Question 269961 in Html Question posted in
Some basic documentation can be found here.

Html – How can I get my quotes to change every day

I’m trying to get my quotes to change every single day, but when I run it, it just stays on one quote. What fixes or changes can I make to get my quote to repeat every single day?

Here is the code below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quote</title>

    <style>

        .widget {
            padding: 5px 5px ;
            color: #C93F79;
            text-align: center;
                max-width: 95%;
            margin: auto;
            font-variant-caps: petite-caps;
            font-size: 2em;

        }

        div {
             width: 95%;
             min-height: 100px;

            background:
                linear-gradient(to right,  pink 4px, transparent 4px) 0 0,
                linear-gradient(to right, pink 4px, transparent 4px) 0 100%,
                linear-gradient(to left, pink 4px, transparent 4px) 100% 0,
                linear-gradient(to left, pink 4px, transparent 4px) 100% 100%,
                linear-gradient(to bottom, pink 4px, transparent 4px) 0 0,
                linear-gradient(to bottom, pink 4px, transparent 4px) 100% 0,
                linear-gradient(to top, pink 4px, transparent 4px) 0 100%,
                linear-gradient(to top, pink 4px, transparent 4px) 100% 100%;

            background-repeat: no-repeat;
            background-size: 20px 20px;
}

     
    </style>
</head>
<body>

    <div class="widget" id="widget"></div>


<script>

quotes=[
"Self-care is not a luxury; it's a necessity.",
"I am in competition with no one. I have no desire to play the game of being better than anyone. I am simply trying to be better than the person I was yesterday.",
"How you care for yourself is how you care for the world.",
"Every day it gets a little easier... But you gotta do it every day—that's the hard part. But it does get easier.",
"Displicine is the highest form of self-care",
"How you spend your time .",
"Most people overestimate what they can do in one year and underestimate what they can do in ten years.",
"A goal without a plan is just a wish.",
"Every second counts",
"There aint nothing but today.",
"The more you fulfill your goals, the more you learn to trust yourself.",
"Every decision you make casts a vote for the person you want to be.",
"Twenty years from now, you will be more disappointed by the things that you didn't do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover.",
];

const INTERVAL = 86400000;

function dispalyQuote(){

    document.getElementById('widget').innerHTML =quotes[0];
    quotes.forEach((quote, i) => {
        setTimeout(() => {
            document.getElementById('widget').innerHTML =quote;
        }, i * INTERVAL);  
    });
    }

    function dispalyWidget() {
        dispalyQuote();
        setTimeout(dispalyWidget, quotes.length*INTERVAL);
    }
    dispalyWidget()

</script>

</body>
</html>

How it would work is that each every 24 hours the code would move onto the quote until it’s back at the first quote and then it repeats on and on.

Tags:

2

Answers


  1. 0

    try changing the INTERVAL = 86400

    Login or Signup to reply.
  2. 0

    To achieve your desired behavior of changing the quote every 24 hours and then cycling back to the first quote, you can use JavaScript’s setInterval to change the quote at regular intervals.

    const INTERVAL = 24 * 60 * 60 * 1000; // 24 hours in milliseconds

    Here is the updated code:

    <script>
    quotes = [
        "Self-care is not a luxury; it's a necessity.",
        "I am in competition with no one. I have no desire to play the game of being better than anyone. I am simply trying to be better than the person I was yesterday.",
        "How you care for yourself is how you care for the world.",
        // Add more quotes here...
    ];

    const INTERVAL = 24 * 60 * 60 * 1000; // 24 hours in milliseconds
    let currentQuoteIndex = 0;

    function displayNextQuote() {
        document.getElementById('widget').innerHTML = quotes[currentQuoteIndex];
        currentQuoteIndex = (currentQuoteIndex + 1) % quotes.length;
    }

    function displayWidget() {
        displayNextQuote();
        setInterval(displayNextQuote, INTERVAL);
    }

    displayWidget();
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search