How To Make A Random Quote App

This post contains HTML, CSS, Javascript, JQuery, MySQL, and PHP that make up the random quote app featured here.

1.    HTML (index.html)

First, start off with the index.html or index.php page. Be sure to include boostrap, google fonts, and font awesome CDNs within this page.

<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="bootstrap.css">
    <!-- Font Awesome -->
    <script defer src="fontawesome.js"></script>
    <!-- Google Fonts -->
    <link href="googlefonts.css" rel="stylesheet">

    <!-- master.css -->
    <link rel="stylesheet" href="css/master.css">

    <title>Random Quote Generator</title>
  </head>

  <body>
    <div class="container">
        <div class="row">
            <!-- Quote go here -->
        </div>
        <button type="button" class="btn btn-dark float-right"> To view new quote<br>Click Here! </button>
    </div>

    <!-- External JavaScript inclusion -->
    <!-- jquery.js -->
    <script src="jquery.js"></script>
    <!-- popper.js -->
    <script src="popper.js"></script>
    <!-- Bootstrap js -->
    <script src="bootstrap.js"></script>

    <!-- main.js -->
    <script type="text/javascript" src="js/main.js"></script>

  </body>
</html>

2. CSS (css/master.css)

Next, I used these style to style the app.

.row {
    padding: 45px 40px 40px 40px;
    display: flex;
}
.button-div {
    padding: 20px 20px;
}
blockquote {
    border: none;
}

3.     JS – JQuery (js/main.js)

The javascript and JQuery is tricky. Just follow the code and comments–you should be fine. 🙂 Questions or comment leave them below.

const ARRAY_OF_COLORS = [
  "#7BDFF2", "#B2F7EF", "#EFF7F6", "#F7D6E0", "#F2B5D4",
  "#2EC4B6", "#CBF3F0", "#FFFFFF", "#FFBF69", "#FF9F1C",
  "#A9DEF9", "#EDE7B1", "#F694C1", "#E4C1F9", "#D3F8E2",
]
const ARRAY_OF_FONTS = [
 'Slabo 27px', 'Roboto Slab', 'Merriweather', 'Roboto',
 'Open Sans', 'Lato', 'Roboto Condensed', 'Oswald',
 'Montserrat', 'Ubuntu', 'Playfair Display', 'Lora',
 'PT Serif', 'Raleway', 'Source Sans Pro', 'PT Sans',
 'Noto Serif', 'Bitter', 'Crimson Text'
]
// Set random number to a function (rand)
var rand = function (arr) {
  return Math.floor(Math.random() * arr.length);
}
// Choose a random item from an array (randomEntity)
var randomEntity = function (array) {
  let entity = array[rand(array)];
  return entity;
}
// JQuery
$(document).ready(function () {
  $("button").click(function () {
    // Ajax call on button click
    $.ajax({
      url: "select.php",
      method: "POST"
    // When call successful
    }).done(function (result) {
      // fade in html
      $(".row").hide().html(result).fadeIn();
      let background_color = randomEntity(ARRAY_OF_COLORS),
          font_family = randomEntity(ARRAY_OF_FONTS); 
      // CSS changes on "button" click
      $("body").css("background-color", background_color);
      $("blockquote p").css("font-family", font_family);
      $("button").html("New Quote   " + "<i class="fas fa-redo-alt fa-spin"></i>");
    
    // When call fails
    }).fail(function (err) {
      $(".row").html(err);
      console.log(err);
    });
  });
});

4.    MySQL (select.php)

Last, don’t forget to create you database with a single table with three fields (quote_text, quote_title, and quote_reference).

<?php
  $host = 'host--localhost';
  $user = 'username';
  $password = 'password';
  $dbname = 'database_name';

  // Set DSN
  $dsn = 'mysql:host='. $host . ';dbname='. $dbname;

  // Create a PDO instance
  $pdo = new PDO($dsn, $user, $password);

  # PDO Query
  $stmt = $pdo->query("SELECT * FROM db_table_name ORDER BY RAND() LIMIT 1");

  // Display Quote
  while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
    echo "<div class='col-sm' id='quote_body'>
            <blockquote class='blockquote text-right'>
              <p class='mb-0' id='quote_text'>". $row['quote_text'] ."</p>
              <footer class='blockquote-footer' id='quote_title'>". $row['quote_title'] ."
              <cite title='Source Title' id='quote_reference'>". $row['quote_reference'] ."</cite></footer>
            </blockquote>
          </div>";
  }

  // Close statment ($stmt)
  unset($stmt);

  // Close connection ($pdo)
  unset($pdo);

Thank you for checking out this post and taking interest in what I do! Github repo here. Youtube video here, for a more thorough explanation. I hope this helps you as it has help me. Be sure to leave a comment, concerns, questions, or complaints. All input welcome.

-Jesús Hilario H.

Leave a Reply