Membuat random quotes dengan html CSS dan javascript

<!DOCTYPE html>




      body {

        background-color: #FEDA77;

        font-family: sans-serif;

        font-size: 1.5em;


      #quote-container {

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        border-radius: 10px;

        margin: 0 auto;

        width: 500px;

        padding: 20px;

        background-color: #FEDA77;


      #quote-box {

        width: 100%;

        height: 100%;

        background-color: #E6E6E6;

        border-radius: 10px;

        padding: 15px;


      #quote {

        font-style: italic;

        font-weight: bold;

        text-align: center;


      #author {

        font-style: italic;

        font-size: 0.8em;

        text-align: right;





    <div id="quote-container">

      <div id="quote-box">

        <p id="quote">Every day may not be good, but there is something good in every day.</p>

        <p id="author">- Unknown</p>




      // Make array of quotes

      const quotes = [


          quote: "Life is 10% what happens to you and 90% how you react to it.",

          author: "Charles R. Swindoll"



          quote: "It does not matter how slowly you go as long as you do not stop.",

          author: "Confucius"



          quote: "Every day may not be good, but there is something good in every day.",

          author: "Unknown"



          quote: "Our greatest weakness lies in giving up. The most certain way to succeed is always to try just one more time.",

          author: "Thomas A. Edison"



            quote: "Life is like riding a bicycle. To keep your balance, you must keep moving.",

            author: "Albert Einstein"




      // Get a random quote

      const getRandomQuote = () => {

        const quoteIndex = Math.floor(Math.random() * quotes.length);

        const { quote, author } = quotes[quoteIndex];

        return { quote, author };



      // Get a random quote and update the page

      const updateQuote = () => {

        const { quote, author } = getRandomQuote();

        document.getElementById("quote").innerText = quote;

        document.getElementById("author").innerText = author;



      // Initial page load





Posting Komentar

Lebih baru Lebih lama

Formulir Kontak