Random Hobby Picker

Your random hobby for the day is:

Random Hobby Picker on loading instead of a button

Same hobby picker but updated to only load the hobby for that day, and not have the ability to change until the next day. This stops me from changing the hobby until I see the one I want.


<!DOCTYPE html>
<html>
  <head>
    <title>Random Hobby Picker</title>
    <style>
      /* Add some basic styling to the page */
      .mainContainer {
        background: rgb(255,255,255);
        background: linear-gradient(0deg, rgba(255,255,255,1) 37%,
        rgba(214,236,255,1) 76%);
        font-family: Arial, sans-serif;
        border: solid 1px #374561;
        border-radius: 15px;
        width:auto;
        min-width:100px;
        max-width:400px;
        padding-left:7px;
        padding-right:7px;
        margin: 0 auto;
        margin-top:10px;
      }
      h1 {
        text-align: center;
      }
      .container {
        text-align: center;
      }
    </style>
  </head>
  <body onload="pickHobby()">
    <Div class="mainContainer">
    <h1>Random Hobby Picker</h1>
    <div class="container" id="hobbyContainer">
      <p>Your random hobby for the day is:</p>
    </div>

    <script>
        // Define the hobbies array
        const hobbies = ['Miniature Painting', 'Book Reading', 'Guitar Playing',
        '3D Printing', 'Video Gaming', 'Drums', 'Bass', 'Synths'];
     
        // Get today's date as a string
        const today = new Date().toLocaleDateString();
     
        // Try to retrieve the hobby for today from localStorage
        let hobby = localStorage.getItem(today);
     
        // If no hobby is found for today, pick a random hobby and store it in
        localStorage
        if (!hobby) {
          hobby = hobbies[Math.floor(Math.random() * hobbies.length)];
          localStorage.setItem(today, hobby);
        }

        // Create a new HTML element to display the selected hobby
        const hobbyElement = document.createElement('h2');
        hobbyElement.textContent = `${hobby}`;
     
        // Get the container element on your page
        const containerElement = document.getElementById('hobbyContainer');

        // Add the hobby element to the container element
        containerElement.appendChild(hobbyElement);
     
      </script>
    </Div>
  </body>
</html>

Popular Posts