JSFiddle - React, Tailwind, and code Playground

by Phoebe Jeske

HTML

<h1 id="bored">
Boredom Buster
</h1>


  <img id="button" src="https://apkpure.co/statics/media/media/6/3/8/appinventor.ai_tylerrroche.YeetButton/">
  <p id="activity">

  </p>
  <button id="again" type="button">Give me something else to do.</button>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>

CSS

h1 {
  text-align: center;
  font-family: Arial;
}

body {
  text-align: center;
}

svg {
  filter: url(#blur-filter);
}

iframe {
  width: 500px;
  height: 500px;
}
#again {
    left : 230px;
    text-align : center;
    position: absolute;
    top: 130px;
    width: 100px;
  height: 75px;
  background-color: #33FF00;
  moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border: 5px solid #009900;
  padding: 5px;
 
}

JavaScript

document.getElementById("button").style.cursor = "pointer";
document.getElementById("again").style.cursor = "pointer";
document.getElementById("again").style.visibility = "hidden";
var bored = document.getElementById("bored");
var again = document.getElementById("again");
var activity = document.getElementById("activity");
var activities = ["Draw", "Call a friend", "Listen to music", "Watch TV", "Read a newspaper", "Create a new recipe", "Learn to sew or knit", "Write a short story", "Try to get around your house without touching the ground", "Stay alive.", "Try to lick your elbow.", "Try to laugh without smiling or grinning", "Attack your own shadow", "Find the w vvvvvvvvvvvvvvvvvvvvvvvvvvwvvvvvvvvvvvvvvvvvvvv.", "Go through past yearbooks and find the ugliest person on each page.", "Go on an epic journey in your backyard.", "Slap the next person you see.", "Find the n : mmmmmmmmmmmmmmmmnmmmmmmmmmmmmmmmmmmm.", "Waste 2 seconds of your life by reading this.", "Exercise", "Write", "Organize your room", "Make a video", "Sing", "Paint", "Make crafts", "Cook", "Enjoy a relaxing bath", "Do crossword puzzles", "Surf the internet", "Chat with others", "Doodle", "Pretend you are a robot", "Do your laundry", "Build something", "Organize the garage", "Do sports", "Bike", "Hike", "Drive somewhere", "Climb trees", "Camp in the backyard", "Mow your lawn", "Speak in acronyms", "Boil ice cream"];

var button = document.getElementById("button");
button.addEventListener("click", getActivity);
again.addEventListener("click", getActivity);

function getActivity() {
  document.getElementById("again").style.visibility = "visible";
  var activity1 = Math.floor(Math.random() * (46 - 1) + 1);
  document.getElementById("activity").style.visibility = "hidden";
  document.getElementById("bored").innerHTML = activities[activity1];
  
  document.getElementById("button").style.visibility = "hidden";

}