CODEWITHSUNDEEP
javascripthtml
Tanku
Tanku

Reputation: 15

How to open a GIF every time I press a button

So everything works (except for the "if" "else" statements), every time I press the button, it'll return or output the "emotion" (happy, sad, vibe check failed etc). But I also want, for every "emotion" returned, I want it to play a specific GIF as well. Don't judge haha, just a small little project (since I'm new to coding). It's for an app too by the way.

var adjective = ["Happy", "sad","vibe check failed", "yes","funny", "dumb", "Doot-Doot","Tik Tok","Amazing","horny" ] 
var list;

function generator() {
 document.getElementById("name").innerHTML = adjective[Math.floor(Math.random() * adjective.length)] + " "
}


//gif per vibe
if (document.getElementsByClassName("get-vibe-button").innerHTML === adjective[0]) {
    let url1 = "https://media.giphy.com/media/Lb4IZLmCfALhm/giphy.gif"
   url1.play()
   } else if (adjective  === adjective[1]){
       let url2 = "https://media.giphy.com/media/3o7aCV2Be0Cfk4H8nC/giphy.gif"
       console.log(url2)
   } else if (adjective  === adjective[2]){
   let url3 = "https://i.imgur.com/fBQFAPm.gif"
   console.log(url3)
   } else if (adjective  === adjective[3]) {
    let url4 = "https://media.giphy.com/media/WJjLyXCVvro2I/giphy.gif"
    console.log(url4)
   } else if (adjective  === adjective[4]){
       let url5 = "https://media.giphy.com/media/SggILpMXO7Xt6/giphy.gif"
       console.log(url5)
   } else if (adjective  === adjective[5]){
       let url6 = "https://media.giphy.com/media/24FMDDRwtF4uaMTmEQ/giphy.gif"
       console.log(url6)
   } else if (adjective === adjective[6]) {
       let url7 = "https://media.giphy.com/media/5MxvgLxp5p732/giphy.gif"
       console.log(url7)
   } else if (adjective  === adjective[7]) {
       let url8 = "https://media.giphy.com/media/WQrVVyPi3qxVSqqyLi/giphy.gif"
       console.log(url8)
   } else if (adjective  === adjective[8]){
       let url9 = "https://media.giphy.com/media/zz00w5nNFMnPq/giphy.gif"
       console.log(url9)
   } else if (adjective === adjective[9]){
       let url10 = "https://media.giphy.com/media/wCSGHsoNgtDa0/giphy.gif"
       console.log(url10)
   }
<!DOCTYPE html>
<html>
<head>
</head>
<style>
.vibe-check-heading{
    background-color: rgb(98, 211, 255);
    font-size: 20px;
    font-family: Comfortaa;
    padding: 10rem;
}

.get-vibe-button{
    font-family: Comfortaa;
    padding: .75rem 2.5rem;
	font-weight: 600;
	background: #424242;
	z-index: 10;
	color: #fff;
	border-radius: 30px;
	border: 0;
	font-size: 14px;
	top: .5rem;
	left: .5rem;
    margin: auto;
    width:50%;

}

#gif-placer {
    margin: 20px;
    padding: 20px;
}

.instructions {
    font-size: 15px;
    font-family: Comfortaa;

}

</style>

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Comfortaa" />
<script src = "vibe check script.js"> </script>

<div>
    <h1 class="Vibe-Check-heading">
        Vibe Check
      </h1>
</div>

<div class="instructions">
    <h2>
        Instructions: 
        Just click the button loser.
    </h2>
</div>

<div class="vibing">

    <button onclick="generator()" class="get-vibe-button">The Vibe is</button>
    <h1 class="jumbotron text-center rokkitt" id="name"></h1>
  </div>


  
  <div class ="gif-placer">

</div>


</body>
</html>

Upvotes: 1

Views: 45

Answers (1)

Jaromanda X
Jaromanda X

Reputation: 1

Many changes to make it work - but here you go

var adjectives = ["Happy", "sad", "vibe check failed", "yes", "funny", "dumb", "Doot-Doot", "Tik Tok", "Amazing", "horny"];
var gifs = [
  "https://media.giphy.com/media/Lb4IZLmCfALhm/giphy.gif",
  "https://media.giphy.com/media/3o7aCV2Be0Cfk4H8nC/giphy.gif",
  "https://i.imgur.com/fBQFAPm.gif",
  "https://media.giphy.com/media/WJjLyXCVvro2I/giphy.gif",
  "https://media.giphy.com/media/SggILpMXO7Xt6/giphy.gif",
  "https://media.giphy.com/media/24FMDDRwtF4uaMTmEQ/giphy.gif",
  "https://media.giphy.com/media/5MxvgLxp5p732/giphy.gif",
  "https://media.giphy.com/media/WQrVVyPi3qxVSqqyLi/giphy.gif",
  "https://media.giphy.com/media/zz00w5nNFMnPq/giphy.gif",
  "https://media.giphy.com/media/wCSGHsoNgtDa0/giphy.gif"
];

function generator() {
  var index = Math.floor(Math.random() * adjectives.length);
  document.getElementById("name").innerHTML = adjectives[index] + " ";
  document.getElementById("gif").src = gifs[index];
}
.vibe-check-heading {
  background-color: rgb(98, 211, 255);
  font-size: 20px;
  font-family: Comfortaa;
  padding: 10rem;
}

.get-vibe-button {
  font-family: Comfortaa;
  padding: .75rem 2.5rem;
  font-weight: 600;
  background: #424242;
  z-index: 10;
  color: #fff;
  border-radius: 30px;
  border: 0;
  font-size: 14px;
  top: .5rem;
  left: .5rem;
  margin: auto;
  width: 50%;
}

#gif-placer {
  margin: 20px;
  padding: 20px;
}

.instructions {
  font-size: 15px;
  font-family: Comfortaa;
}
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Comfortaa" />
<script src="vibe check script.js">
</script>
<div>
  <h1 class="Vibe-Check-heading">
    Vibe Check
  </h1>
</div>
<div class="instructions">
  <h2>
    Instructions: Just click the button loser.
  </h2>
</div>
<div class="vibing">

  <button onclick="generator()" class="get-vibe-button">The Vibe is</button>
  <h1 class="jumbotron text-center rokkitt" id="name"></h1>
</div>
<div class="gif-placer">
  <img id="gif" />
</div>

Upvotes: 1

Related Questions