Random Quote Generator - Test Job Seekers

In this example below you will see how to do a Random Quote Generator - Test Job Seekers with some HTML / CSS and Javascript

This awesome code was written by ecccs, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ecccs ©


  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>Random Quote Generator - Test Job Seekers</title>
  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">



  <html lang="en">

  <title>Test Job Seekers</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

<div class="quote"><span class = "saying"></span><br><span class = "author"></span></div>    
<!-- References:
--- https://codepen.io/chuah48263/pen/bdBqev
--- http://stackoverflow.com/questions/24463678/where-can-i-find-bootstrap-styles-for-html5-range-inputs
--- http://stackoverflow.com/questions/28429685/organising-divs-on-different-screen-sizes-with-bootstrap-3-grid-system
--- https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
--- https://codepen.io/aronwoost/pen/nlyrf
--- http://stackoverflow.com/questions/10473554/jquery-range-input-listener
--- https://codepen.io/AdventureBear/full/vEoVMw
--- http://themarklee.com/2014/04/03/pulling-json-data-open-data-api/
--- https://api.jquery.com/jquery.getjson/
--- http://stackoverflow.com/questions/16078613/check-json-string-from-ajax-response-with-jquery
--- http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call/14220323#14220323
--- http://www.jsontest.com/
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>


    <script  src="js/index.js"></script>



/*Downloaded from https://www.codeseek.co/ecccs/random-quote-generator-test-job-seekers-BrjXGX */
.quote {
  font-family: 'Cardo', serif;
  font-size: 1.5em;
  width: 600px;
  height: auto;
  margin: 0 auto;
  background-color: #efefef;
  padding: 20px;
  background-color: rgba(255,255,255,0.9);;
  border-radius: 20px;
  color: #000;
  box-shadow: -10px 10px 20px rgba(100,100,100,.8);;

.author {
  font-style: italic;

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

/*Downloaded from https://www.codeseek.co/ecccs/random-quote-generator-test-job-seekers-BrjXGX */
   var w_quotes = [{"phrase": "three months of my graduation august, 2016 [got a job sep 2017]", "topic": "length", "user": "AmalyaAvagimyan"}, {"phrase": " I could not devote much time to my learning as I was working as well", "topic": "commitment", "user": "AmalyaAvagimyan"}, {"phrase": "I hold MA in Political Science", "topic": "background", "user": "AmalyaAvagimyan"}, {"phrase": "i will be able to learn new skills in a real job environment", "topic": "hands-on", "user": "brankaandreja"}, {"phrase": "i started fcc 4 months ago", "topic": "length", "user": "brankaandreja"}, {"phrase": "i sent out a highly graphic cv", "topic": "portfolio", "user": "brankaandreja"}, {"phrase": "willing to learn and looking for new challenges", "topic": "commitment", "user": "brankaandreja"}, {"phrase": "looking for someone who will solve different challenges and learn new things as need arises", "topic": "trouble_shoot", "user": "brankaandreja"}, {"phrase": "I speak 3 foreign languages", "topic": "other_skills", "user": "brankaandreja"}, {"phrase": "weird mix of graphic design skills and programming", "topic": "other_skills", "user": "brankaandreja"}, {"phrase": "graphic design", "topic": "background", "user": "brankaandreja"}, {"phrase": "study study study", "topic": "hard", "user": "christianfcc"}, {"phrase": "personal trainer", "topic": "background", "user": "christianfcc"}, {"phrase": "tip : build projects [and] enhance your math skills", "topic": "basics", "user": "christianfcc"}, {"phrase": "from 2012 to ... 2016", "topic": "length", "user": "christianfcc"}, {"phrase": "i just said showed them my codepen [tribute, portfolio]", "topic": "portfolio", "user": "christianfcc"}, {"phrase": "coding everyday is ! important", "topic": "commitment", "user": "kuanhsuh"}, {"phrase": "html , css , es5 scss , gulp , react , vue , d3", "topic": "choices", "user": "kuanhsuh"}, {"phrase": "34 blog posts", "topic": "journey", "user": "kuanhsuh"}, {"phrase": "difficult to learn when working on your own projects", "topic": "hard", "user": "forkerino"}, {"phrase": "helping people who have less experience I sharpened my own knowledge; understand why other people\u2019s code wasn\u2019t working", "topic": "trouble_shoot", "user": "forkerino"}, {"phrase": "to learn read, to know write, to master teach", "topic": "journey", "user": "forkerino"}, {"phrase": "putting in the time and energy really helped me become a better code", "topic": "commitment", "user": "forkerino"}, {"phrase": "[work] on your own projects", "topic": "tip", "user": "forkerino"}, {"phrase": "really look forward to this", "topic": "doable", "user": "forkerino"}, {"phrase": "i couldnt have done it without this community", "topic": "net_support", "user": "forkerino"}, {"phrase": "on may I started freecodecamp\u2019s frontend cert and finished it in august", "topic": "length", "user": "Manuelbasa"}, {"phrase": "react and angular seem to be really important tools on the market", "topic": "choices", "user": "Manuelbasa"}, {"phrase": "solve the challenges as good as you can [go beyond expectations]", "topic": "proficiency", "user": "Manuelbasa"}, {"phrase": "i made my portfolio... which is mostly challenges", "topic": "portfolio", "user": "Manuelbasa"}, {"phrase": "i 'm still learning and expect to still be learning", "topic": "commitment", "user": "kjarva"}, {"phrase": "could express myself by writing code", "topic": "other_skills", "user": "CalcCalcCalc"}, {"phrase": "i had been working in temporary jobs... but I made sure I was getting into non-customer based office work, like data entry ", "topic": "background", "user": "CalcCalcCalc"}, {"phrase": "i am continuing ... , and hope to get into a react", "topic": "choices", "user": "CalcCalcCalc"}, {"phrase": "i\u2019m a coder now", "topic": "doable", "user": "CalcCalcCalc"}, {"phrase": "i started ... over a year and a bit ago now", "topic": "length", "user": "CalcCalcCalc"}, {"phrase": "researching on how i could use programming to solve this problem [given by the eventual recruiter]", "topic": "trouble_shoot", "user": "CalcCalcCalc"}, {"phrase": "with a bit of perseverence and regularly going to study coding at my library every day", "topic": "commitment", "user": "CalcCalcCalc"}, {"phrase": "i was part of a community of peers who i could talk to professionally", "topic": "net_support", "user": "CalcCalcCalc"}, {"phrase": "going to my local javascript meet up to build up that network and peer network", "topic": "networking", "user": "CalcCalcCalc"}, {"phrase": "[job board sites] waste of time...  find a way to bypass them to get your dream job", "topic": "job_appl", "user": "aidansven"}, {"phrase": "i started in may 2016 [until sept 2017]", "topic": "length", "user": "aidansven"}, {"phrase": "building all of projects definitely gave me the skills", "topic": "portfolio", "user": "aidansven"}, {"phrase": "do some remote freelance work", "topic": "hands-on", "user": "aidansven"}, {"phrase": "he gave me the project details on the spot", "topic": "trouble_shoot", "user": "aidansven"}, {"phrase": "IT support job", "topic": "background", "user": "aidansven"}, {"phrase": "i left my... job and moved to a tech hub city thinking it would be easy to get a dev job there: i was wrong", "topic": "hard", "user": "aidansven"}, {"phrase": "you can become a solid developer, and you don\u2019t even need to finish", "topic": "doable", "user": "aidansven"}, {"phrase": "in the tech hubs there\u2019s a lot of competition amongst jrs", "topic": "hard", "user": "aidansven"}, {"phrase": " i did some freelance job for a few weeks", "topic": "hands-on", "user": "argvil19"}, {"phrase": "venezuela is going through hard times and i like to help bringing food to home", "topic": "hard", "user": "argvil19"}, {"phrase": "started to code almost a year ago", "topic": "length", "user": "argvil19"}, {"phrase": "nights and hours i spent reading and coding did worth it", "topic": "commitment", "user": "argvil19"}, {"phrase": "[applying to many jobs]", "topic": "job_appl", "user": "argvil19"}, {"phrase": "someone who can code some machine learning algorithms", "topic": "other_skills", "user": "shian48263"}, {"phrase": "after a few months", "topic": "length", "user": "shian48263"}, {"phrase": "incorporated the self-teaching skills", "topic": "other_skills", "user": "shian48263"}, {"phrase": "not be shy to talk about your capable skills", "topic": "tip", "user": "shian48263"}, {"phrase": "now work in google just cause of a good friend he d known in a hackathon", "topic": "networking", "user": "shian48263"}, {"phrase": "if you 're not good at css but really good at backend [emphasise your strengths]", "topic": "proficiency", "user": "shian48263"}, {"phrase": "got to know some really impressive people", "topic": "networking", "user": "shian48263"}, {"phrase": "it was long long hours of coding back then until december", "topic": "hard", "user": "shian48263"}, {"phrase": "i started to work on some projects of my own", "topic": "portfolio", "user": "shian48263"}, {"phrase": "chose to focus in angular", "topic": "choices", "user": "tokimatu"}, {"phrase": "you should keep an eye in what the companies are asking to hire someone in the position you want", "topic": "job_appl", "user": "tokimatu"}, {"phrase": "have a bachelor degree", "topic": "background", "user": "tokimatu"}, {"phrase": "the basics of webdev and a few good projects to show", "topic": "portfolio", "user": "tokimatu"}, {"phrase": "following the good practices", "topic": "basics", "user": "tokimatu"}, {"phrase": "hired as a front-end developer after about 9 to 10 months after I started", "topic": "length", "user": "tokimatu"}, {"phrase": "really important is to really learn the basics", "topic": "basics", "user": "tokimatu"}, {"phrase": "the nice community were so important", "topic": "net_support", "user": "tokimatu"}, {"phrase": "i bought a domain and hosted my portfolio to start applying for jobs", "topic": "portfolio", "user": "tokimatu"}, {"phrase": " a test in which I had to make a small app ... that would consume an certain API", "topic": "trouble_shoot", "user": "tokimatu"}, {"phrase": "", "topic": "---", "user": "codinglawyer"}, {"phrase": "[2013-2017]", "topic": "length", "user": "vinceumo"}, {"phrase": "project done [per topics to be learned; a personal site and github]", "topic": "portfolio", "user": "vinceumo"}, {"phrase": "studied graphic design for a year , i learned a lot about integration from photoshop", "topic": "background", "user": "vinceumo"}, {"phrase": "i 'm still doing projects and courses", "topic": "commitment", "user": "vinceumo"}, {"phrase": "this amazing platform and community", "topic": "net_support", "user": "yirini"}, {"phrase": "feb 2016 [to oct 2017]", "topic": "length", "user": "yirini"}, {"phrase": "getting a coding a job it really , totally doable", "topic": "doable", "user": "Enikol"}, {"phrase": "no degree... nothing", "topic": "background", "user": "Enikol"}, {"phrase": "i joined this community a year ago", "topic": "length", "user": "Enikol"}, {"phrase": "reading topics in this section really helped me to believe", "topic": "net_support", "user": "Enikol"}, {"phrase": "really hard to learn", "topic": "hard", "user": "Enikol"}, {"phrase": "fcc community is the best", "topic": "net_support", "user": "Enikol"}, {"phrase": "i also built a simple portfolio website", "topic": "portfolio", "user": "Enikol"}, {"phrase": "i wasn\u2019t really comfortable with git , but i am now", "topic": "basics", "user": "Enikol"}, {"phrase": "i tried to code every day", "topic": "commitment", "user": "Enikol"}, {"phrase": "what\u2019s wrong with this code and how to make it work [asked by recruiter]", "topic": "trouble_shoot", "user": "Enikol"}, {"phrase": "how long it would be before i had a success story of my own", "topic": "doable", "user": "codefordays"}, {"phrase": "my coding friends from my local group", "topic": "net_support", "user": "codefordays"}];

  Array.prototype.randomElement = function () {
    return this[Math.floor(Math.random() * this.length)]  
$( document ).ready(function() {

    function getQuote() {
      var index = Math.floor(Math.random() * w_quotes.length);  
      //var _selected = w_quotes.randomElement()[0];
      var _selected = w_quotes[index];
      var final_quote = '<p><i>'+_selected['phrase']+'</i></p><p>('+_selected['topic']+')</p><p>By '+_selected['user']+'</p>';

   setInterval(getQuote, 4000);