Select a different inspiring quote every hour

Question

Select a different inspiring quote every hour

Wouldn't it be great to add a touch of inspiration to my page with a new motivational quote that changes every hour or day? I'm thinking of compiling all the quotes in a document and having javascript randomly select one to display on my website. Maybe using a list format like this:

<ul>
   <li>It’s not that I’m so smart, it’s just that I stay with problems longer.</li>
   <li>Eighty percent of success is showing up.</li>
   <li>I respect faith, but doubt is what gets you an education.</li>
   <li>...</li>
<ul>

Is there a way to automate this process, or do I have to manually update the quotes (perhaps through a CMS or directly in HTML)?

javascript html css database quote

Answer 1

Answer №1

It is entirely possible to display random messages without using any server-side code, but keep in mind that without it, there is no way to ensure the same message will be shown to every visitor or even the same visitor in different browser instances. One approach could be selecting a random message from a predefined set each time someone visits your page. Here's an example:

var phrases = [
    {
      hour: 0,
      content : [
        "Be or not to be",
        "Foo",
        "Bar"
      ]
    },
    {
      hour: 1,
      content : [
        "Be or not to be",
        "Foo",
        "Bar"
      ]
    }
];

var phrase = undefined; //get one randomly based on new Date().getHours()
document.addEventListener('DOMContentLoaded', function() {
   document.getElementById('phrase').innerHTML = phrase;
});

For a complete example, visit:

https://plnkr.co/edit/tBcH5DYxYTxl2kBtp0yk?p=preview

This is just a suggestion and I hope it proves helpful to you. If you want everyone to see the same message, consider having only one message per hour. This way, you can achieve a consistent experience without relying on server-side logic. Keep in mind that this approach will show the same set of messages every day.

Answer 2

It is entirely possible to display random messages without using any server-side code, but keep in mind that without it, there is no way to ensure the same message will be shown to every visitor or even the same visitor in different browser instances. One approach could be selecting a random message from a predefined set each time someone visits your page. Here's an example:

var phrases = [
    {
      hour: 0,
      content : [
        "Be or not to be",
        "Foo",
        "Bar"
      ]
    },
    {
      hour: 1,
      content : [
        "Be or not to be",
        "Foo",
        "Bar"
      ]
    }
];

var phrase = undefined; //get one randomly based on new Date().getHours()
document.addEventListener('DOMContentLoaded', function() {
   document.getElementById('phrase').innerHTML = phrase;
});

For a complete example, visit:

https://plnkr.co/edit/tBcH5DYxYTxl2kBtp0yk?p=preview

This is just a suggestion and I hope it proves helpful to you. If you want everyone to see the same message, consider having only one message per hour. This way, you can achieve a consistent experience without relying on server-side logic. Keep in mind that this approach will show the same set of messages every day.

Answer 3

Answer №2

Instead of choosing a new quote every hour or day, you could have a different quote displayed each time the page is refreshed. One way to achieve this is by storing the quotes in a table and assigning each quote an id. Then, on your webpage, you would connect to the database and fetch a random id using the following function:

int rand ( int $min , int $max )

This function would return an integer between the specified minimum and maximum values ($min and $max), which in this case would be the range of ids. The corresponding quote for that randomly selected id can then be displayed on the page. Please note that while this suggestion may not directly answer your question, it offers a possible approach to achieving your desired outcome. (I'm unable to comment due to my lack of reputation at the moment!)

Answer 4

Instead of choosing a new quote every hour or day, you could have a different quote displayed each time the page is refreshed. One way to achieve this is by storing the quotes in a table and assigning each quote an id. Then, on your webpage, you would connect to the database and fetch a random id using the following function:

int rand ( int $min , int $max )

This function would return an integer between the specified minimum and maximum values ($min and $max), which in this case would be the range of ids. The corresponding quote for that randomly selected id can then be displayed on the page. Please note that while this suggestion may not directly answer your question, it offers a possible approach to achieving your desired outcome. (I'm unable to comment due to my lack of reputation at the moment!)

Select a different inspiring quote every hour

Answer №1

Answer №2

Similar questions

Adjust the class based on the number of li elements

The scripts within the body tag are failing to load

Is there a way to adjust the background color of the clicked tab with divs and revert the others back to their original color?

The placement of a material-ui component at the beginning of the render method can impact the styling of the following components in the hierarchy

The responsive design of Bootstrap NavBar seems to be malfunctioning when viewed on an iPhone device

Adjust the font size to fit the size of the button when resizing a md-button

developing a deferred commitment by utilizing promise objects

php print some additional php script

There was an error in the search: [parse_exception] The search source could not be parsed. A field name was expected, but instead [

The border color of the text input is not changing as expected when in focus

Verify if the input field is devoid of any content or not

Error: Attempting to access 'push' property on an undefined object

looping through an ajax function with addEventListener

Ways to modify the color of the legend text in a HighChart graph

The issue with CSS z-index not functioning properly when using absolute positioning

Establishing properties while creating a fresh instance of a class

Count the start and end rows of a table within the <tfoot> using pdfHTML/iText 7

Is the whitespace-pre-line feature of TailwindCSS experiencing issues?

Listcell XUL with button options

What is the process for translating HTML elements into JSX format?