Question 49336 in Javascript Question posted in
A very good W3school tutorial can be found here.

How to change to the next object in an array in javascript based on the date changing – how to change to the next word of the day

I have very little experience with coding and I’ve never asked a question on here so please bear with me. I am trying to make a "word of the day" generator with html, css, and javascript specifically (please no other languages if possible), for my website. My site is hosted on one of those drag-and-drop website builders that lets you put a few lines of html code in a block. I used an AI code generator to get this javascript, and instead of changing the word each day it chose to use the randomize function. So every time I reload my website page, the function spits out a random word/definition from the array. I would like to move to the next word/definition in the array every time the day changes. I don’t even mind if it chooses a new random word from the array instead of just moving to the next object, as long as it only changes once a day and not each time you load it.

And I do want to fill it with my own words and definitions rather than pull from and API. It just makes things simpler for me if I want to change something around later, and copy it to other types of apps I’m trying to make.

Oh, and using "wordo" instead of "word", and "definitiono" instead of "definition" was entirely purposeful. I have other things like a searchable dictionary and an actual word generator on the same webpage that I’m trying to put this on, and when different elements get called the same thing it gets screwy really fast so that was my fix. Keeping the words in the word container is also intentional, it just goes with the styling on my site.

Here’s my code:

<!DOCTYPE html>
<html>
  <head>
    <style>
       .word-container {
        width: 80%;
        outline: none;
        font-size: 16px;
        border-radius: 5px;
        padding-left: 15px;
        padding-right: 27px;
        border: 1px solid #999;
      }
    </style>
  </head>
  <body>
    <div class="word-container">
      <h2 id="wordo"></h2>
      <p id="definitiono"></p>
    </div>
    <script>
      const wordos = [
       
        {
          wordo: "Abstemious",
          definitiono:
            "sparing or moderate in eating and drinking; temperate in diet",
        },

        {
          wordo: "Bellicose",
          definitiono: "demonstrating aggression and willingness to fight",
        },

        {
          wordo: "Tawdry",
          definitiono:
            "showy but cheap and of poor quality; sordid or unpleasant",
        },

      ];
      {
     
      const wordoOfTheDay = wordos[Math.floor(Math.random() * wordos.length)];

      const wordoEl = document.getElementById("wordo");
      const definitionoEl = document.getElementById("definitiono");

      wordoEl.textContent = wordoOfTheDay.wordo;
      definitionoEl.textContent = wordoOfTheDay.definitiono;

    }

    </script>
  </body>
</html>
Tags:

2

Answers


  1. 0

    Try and see if this code works for you 🙂

    const wordos = [
       
    {
      wordo: "Abstemious",
      definitiono:
        "sparing or moderate in eating and drinking; temperate in diet",
    },

    {
      wordo: "Bellicose",
      definitiono: "demonstrating aggression and willingness to fight",
    },

    {
      wordo: "Tawdry",
      definitiono:
        "showy but cheap and of poor quality; sordid or unpleasant",
    },

  ];

// Define the initial index to use
let currentIndex = 0;

// Define the previous date as the current date to start
let previousDate = new Date();

// Define a function to check if the day has changed
function hasDayChanged() {
  const currentDate = new Date();
  if (currentDate.getDay() !== previousDate.getDay()) {
    return true;
  }
  return false;
}

// Define a function to get the next element
function getNextElement() {
  // Check if the day has changed
  if (hasDayChanged()) {
    // Pick a new element
    currentIndex = (currentIndex + 1) % wordos.length;
  }
  // Return the current element
  return wordos[currentIndex];
}

const wordoOfTheDay = getNextElement();

const wordoEl = document.getElementById("wordo");
const definitionoEl = document.getElementById("definitiono");

wordoEl.textContent = wordoOfTheDay.wordo;
definitionoEl.textContent = wordoOfTheDay.definitiono;
    Login or Signup to reply.
  2. 0

    Hello and welcome to StackOverflow! I’ve come up with a method to achieve your goal, but here’s an explanation of what you should be doing first:

    1. Keep track of the last time the word was changed using localStorage.
    • Check if there is a saved "lastUpdated" date in the localStorage.
    • If there is no "lastUpdated" date saved or if it is different from today’s date, then update the "lastUpdated" date in localStorage and increment the word index.

    1. Get the current word index from localStorage or use 0 as the default value if it does not exist.

    2. Display the word and its definition using the index obtained in step 2.

    As for the code, here’s the step-by-step implementation:

    1. Write a function checkAndUpdateWordIndex() to check and update the word index in localStorage.
    function checkAndUpdateWordIndex() {
  const lastUpdated = localStorage.getItem("lastUpdated");
  const today = new Date().toDateString();

  if (lastUpdated !== today) {
    updateWordIndex();
    localStorage.setItem("lastUpdated", today);
  }
}
    1. Write a function updateWordIndex() to increment the word index in localStorage.
    function updateWordIndex() {
  const currentWordIndex = parseInt(localStorage.getItem("wordIndex") || "0");
  const newWordIndex = (currentWordIndex + 1) % wordos.length;
  localStorage.setItem("wordIndex", newWordIndex);
}
    1. Write a function displayWord() to display the word and its definition using the index from localStorage.
    function displayWord() {
  const wordIndex = parseInt(localStorage.getItem("wordIndex") || "0");
  const wordoEl = document.getElementById("wordo");
  const definitionoEl = document.getElementById("definitiono");

  wordoEl.textContent = wordos[wordIndex].wordo;
  definitionoEl.textContent = wordos[wordIndex].definitiono;
}
    1. Call the checkAndUpdateWordIndex() and displayWord() functions to achieve the desired behavior.
    checkAndUpdateWordIndex();
displayWord();

    Now, incorporate the above functions and logic into your existing JavaScript code, and it will change the word once every day, while maintaining the same word for all page reloads in between.

    Let me know it went. 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search