<div id="inputWrapper">
<h1>GifDance</h1>
<p>Find a dancer and start the party!</p>
<input type="text" placeholder="Character or Celebrity" id="term" />
<button id="submit">Hit it, DJ!</button>
<p>Press ENTER to shuffle music</p>
</div>
<div id="mainGif"></div>
<ul id="results">
</ul>
<div id="video">
</div>#inputWrapper {
font-family: sans-serif;
position: absolute;
padding-top: 10px;
padding-bottom: 7px;
top: 0px;
left: 0px;
min-height: 45px;
width: 100%;
text-align: center;
/* border-bottom: 4px solid #333; */
background-image: url("https://media.giphy.com/media/dwaeIbBnF6HBu/giphy.gif");
/* background-color: var(--main-bg-color); */
background-size: cover;
background-color: white;
}
ul {
margin: 0 auto;
text-align: center;
}
#mainGif {
padding-top: 215px;
text-align: center;
background: rgb(244, 127, 127);
animation: mymove 5s infinite;
}
#mainImg {
width: 50%;
}
li {
display: inline-block;
vertical-align: top;
padding: 10px;
}
ul {
/* background-color: rgba(255, 255, 255, 0.5); */
/* background: rgb(244, 127, 127);
animation: mymove 5s infinite; */
}
li > img,
#mainImg {
mix-blend-mode: multiply;
}
.title,
.share {
font-family: sans-serif;
}
#video {
position: absolute;
top: 0%;
right: 0px;
}
html {
background: rgb(244, 127, 127);
animation: mymove 5s infinite;
}
@keyframes mymove {
0% {
background-color: rgb(244, 127, 127);
}
25% {
background-color: rgb(127, 141, 244);
}
50% {
background-color: rgb(127, 244, 172);
}
75% {
background-color: rgb(231, 244, 127);
}
100% {
background-color: rgb(244, 127, 127);
}
}
let songs = [
{},
{
artist: "Outkast",
song: "Hey Ya!",
url: "ReEgXh-wURs?",
iframe:
'<iframe src="https://www.youtube.com/embed/ReEgXh-wURs?start=0&autoplay=1&modestbranding=1&showinfo=0&rel=0&iv_load_policy=3&fs=0&color=white&controls=0" width="200" height="200" frameborder="0"></iframe>'
},
{
artist: "Dua Lipa feat. DaBaby",
song: "Levitating",
url: "e8WoWk4b3D0?",
iframe:
'<iframe src="https://www.youtube.com/embed/e8WoWk4b3D0?start=0&autoplay=1&modestbranding=1&showinfo=0&rel=0&iv_load_policy=3&fs=0&color=white&controls=0" width="200" height="200" frameborder="0"></iframe>'
},
{
artist: "Curtis Mayfield",
song: "Move On Up",
url: "A9RMr9KuVZo?",
iframe:
'<iframe src="https://www.youtube.com/embed/A9RMr9KuVZo?start=0&autoplay=1&modestbranding=1&showinfo=0&rel=0&iv_load_policy=3&fs=0&color=white&controls=0" width="200" height="200" frameborder="0"></iframe>'
},
{
artist: "Remi Wolf",
song: "Photo ID",
url: "JrnkOEKdi0M?",
iframe:
'<iframe src="https://www.youtube.com/embed/JrnkOEKdi0M?start=25&autoplay=1&modestbranding=1&showinfo=0&rel=0&iv_load_policy=3&fs=0&color=white&controls=0" width="200" height="200" frameborder="0"></iframe>'
},
{
artist: "Carly Rae Jepsen",
song: "Julien",
iframe:
'<iframe src="https://www.youtube.com/embed/hwS64wL8cUQ?start=54&autoplay=1&modestbranding=1&showinfo=0&rel=0&iv_load_policy=3&fs=0&color=white&controls=0" width="200" height="200" frameborder="0"></iframe>'
},
{
artist: "Thundercat",
song: "Black Qualls",
iframe:
'<iframe src="https://www.youtube.com/embed/IOHbF1Zg4S0?start=0&autoplay=1&modestbranding=1&showinfo=0&rel=0&iv_load_policy=3&fs=0&color=white&controls=0" width="200" height="200" frameborder="0"></iframe>'
},
{
artist: "Milo Greene",
song: "On The Fence",
iframe:
'<iframe src="https://www.youtube.com/embed/0p2GJ2yOd-o?start=48&autoplay=1&modestbranding=1&showinfo=0&rel=0&iv_load_policy=3&fs=0&color=white&controls=0" width="200" height="200" frameborder="0"></iframe>'
},
{
artist: "Lizzo",
song: "Juice",
iframe:
'<iframe src="https://www.youtube.com/embed/nBnpjJUwamg?start=48&autoplay=1&modestbranding=1&showinfo=0&rel=0&iv_load_policy=3&fs=0&color=white&controls=0" width="200" height="200" frameborder="0"></iframe>'
},
{
artist: "Bakermat",
song: "Baianá",
iframe:
'<iframe src="https://www.youtube.com/embed/O06-PTQYyVk?start=51&autoplay=1&modestbranding=1&showinfo=0&rel=0&iv_load_policy=3&fs=0&color=white&controls=0" width="200" height="200" frameborder="0"></iframe>'
},
{
artist: "Yaeji",
song: "Raingurl",
iframe:
'<iframe src="https://www.youtube.com/embed/SaSCEruseZs?start=24&autoplay=1&modestbranding=1&showinfo=0&rel=0&iv_load_policy=3&fs=0&color=white&controls=0" width="200" height="200" frameborder="0"></iframe>'
},
{
artist: "Marc Rebillet",
song: "I Feel So Alive",
iframe:
'<iframe src="https://www.youtube.com/embed/9zGYaq0CzSw?start=89&autoplay=1&modestbranding=1&showinfo=0&rel=0&iv_load_policy=3&fs=0&color=white&controls=0" width="200" height="200" frameborder="0"></iframe>'
},
{
artist: "Where Angels Fear to Tread",
song: "Disclosure",
iframe:
'<iframe src="https://www.youtube.com/embed/4GJcBGgVx-w?start=11&autoplay=1&modestbranding=1&showinfo=0&rel=0&iv_load_policy=3&fs=0&color=white&controls=0" width="200" height="200" frameborder="0"></iframe>'
},
{
artist: "Chloe x Halle",
song: "Do It",
iframe:
'<iframe src="https://www.youtube.com/embed/c9eMpTJmUS4?start=57&autoplay=1&modestbranding=1&showinfo=0&rel=0&iv_load_policy=3&fs=0&color=white&controls=0" width="200" height="200" frameborder="0"></iframe>'
}
// },
// {
// artist: "Lady Gaga",
// song: "Just Dance",
// url: "ACNwMzZejQQ?",
// albumArt:
// "//s.mxmcdn.net/images-storage/albums5/5/6/5/8/4/2/37248565_350_350.jpg"
// },
// {
// artist: "Leona Lewis",
// song: "Bleeding Love",
// url: "5gJVzv7yt1M?",
// albumArt:
// "//s.mxmcdn.net/images-storage/albums/1/5/5/1/3/8/26831551_350_350.jpg"
// },
// {
// artist: "Alicia Keys",
// song: "No One",
// url: "7AOgj5hg1rA?",
// albumArt:
// "//s.mxmcdn.net/images-storage/albums/0/2/4/9/2/8/26829420_350_350.jpg"
// },
// {
// artist: "Timbaland",
// song: "Apologize",
// url: "Ilt_ka7AcpQ?",
// albumArt:
// "//s.mxmcdn.net/images-storage/albums/2/4/7/6/0/9/26906742_350_350.jpg"
// },
// {
// artist: "Sara Bareilles",
// song: "Love Song",
// url: "RGS7FcfmkTY?",
// albumArt:
// "//s.mxmcdn.net/images-storage/albums/5/2/9/3/0/4/26403925_350_350.jpg"
// },
// {
// artist: "Estelle",
// song: "American Boy",
// url: "RCD344yxFAI?",
// albumArt:
// "//s.mxmcdn.net/images-storage/albums/0/0/2/3/3/0/27033200_350_350.jpg"
// },
// {
// artist: "Coldplay",
// song: "Viva La Vida",
// url: "zOQ4ld6NsXE?",
// albumArt:
// "//s.mxmcdn.net/images-storage/albums/1/2/9/0/5/9/28950921_350_350.jpg"
// }
];
songNumber = Math.floor(Math.random() * 13 + 1);
function searchAPI() {
let x = "";
let query = document.getElementById("term").value;
query = query + " dance";
fetch(`https://api.giphy.com/v1/gifs/search?api_key=VRz3wOad2Hj33nfrXVbwTayDihCkPKSP&q=${query}&limit=25&offset=0&rating=g&lang=en
`)
.then((res) => res.json())
.then((out) => {
for (i in out.data) {
console.log(out.data[i].slug);
x +=
"<li>" +
"<img src='" +
out.data[i].images.fixed_height.url +
"' />" +
"<p class='title'>" +
out.data[i].title +
"</p>" +
'<a class="share" href="' +
out.data[i].embed_url +
'" target="_blank">Share</a>' +
"</li>";
document.getElementById("results").innerHTML = x;
document.getElementById("mainGif").innerHTML =
"<img id='mainImg' src='" + out.data[0].images.original.url + "' />";
document.getElementById("video").innerHTML = songs[songNumber].iframe;
document.getElementById("inputWrapper").style.backgroundImage =
"url('https://media.giphy.com/media/3oEjHKvjqt5pssL99C/giphy.gif');";
}
});
}
document.getElementById("submit").addEventListener("click", function () {
songNumber = Math.floor(Math.random() * 13 + 1);
searchAPI();
});
document.getElementById("term").addEventListener("keyup", function (event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("submit").click();
}
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.