Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <html>

<head>
  <!-- Bootstrap and Font Awesome Links -->
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <link href="https://fonts.googleapis.com/css?family=Indie+Flower|Montserrat:400,600|Open+Sans:400,600i,700" rel="stylesheet">

  <!--  Meta  -->
  <title>Random Quote Machine with Background Themes</title>
  <meta content="width=device-width, initial-scale=1">
  <meta name="twitter:card" content="summary" />
  <meta name="twitter:site" content="@richjarvis2" />
  <meta name="twitter:title" content="FreeCodeCamp Random Quote Machine Project" />
  <meta name="twitter:description" content="Generate quotes filtered by you" />
  <meta name="twitter:image" content="https://res.cloudinary.com/kage/image/upload/v1519338074/iceberg3.jpg" />
  <meta property="og:url" content="https://codepen.io/kagejarvis/full/gvVMYO/" />
  <meta property="og:type" content="website" />
  <meta property="og:title" content="Random Quote Machine" />
  <meta property="og:description" content="Generate quotes filtered by you" />
  <meta property="og:image" content="https://res.cloudinary.com/kage/image/upload/v1519338074/iceberg3.jpg" />

</head>

<body>

  <!-- NavBar Menu Start -->

  <nav class="navbar main-nav sticky-top navbar-expand navbar-light py-0" style="background-color: #e3f2fd;">
    <a class="navbar-brand collapse" href="#">Random Quote Machine</a>

   <ul class="navbar-nav nav mr-auto" id="collapsingNavbarleft">
      <li class="nav-item nav-link py-2">
        Background Themes:
      </li> 
     <li class="nav-item active py-0">
        <a class="nav-link" id="leadership" href="#leadership">Leadership </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="motivation" href="#motivation">Motivation</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="inspiration" href="#inspiration">Inspiration</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="influence" href="#influence">Influence</a>
      </li>
    </ul>

    <ul class="navbar nav navbar-expand-xs py-0 ml-auto collapse2" id="collapsingNavbarXs">
      <li><a href="https://www.linkedin.com/in/richarddjarvis/" class="fa fa-linkedin" target="_blank"></a></li>
      <li><a href="https://www.facebook.com/rich.jarvis.180" class="fa fa-facebook" target="_blank"></a></li>
      <li><a href="https://twitter.com/richjarvis2" class="fa fa-twitter" target="_blank"></a></li>
      <li><a href="https://www.freecodecamp.org/kagejarvis" class="fa fa-free-code-camp" target="_blank"></a></li>
    </ul>

  </nav>
  <!--  NavBar Ending -->

  <!-- Center tile for quotes -->
  <div class="container-fluid container-table">
    <div class="row">
      <div class="col hide-me">
        <small>placeholder</small>
      </div>
    </div>
    <div class="row align-items-center">
      <div class="col-md-2 col-sm-1"></div>
      <div class="col-md-8 col-sm-10 d-flex align-items-center justify-content-center h-100">
        <img class="img-responsive img-thumbnail" alt="Images" id="imageReplace" src="https://res.cloudinary.com/kage/image/upload/v1519338074/iceberg3.jpg">
        <div class="centered align-middle">
          <blockquote class="blockquote quoteColor font-weight-bold" id="displayQuote">
            <p class="mb=0">
              There is no chance, no fate, no destiny that can circumvent or hinder or control the firm resolve of a determined soul.
            </p>
          </blockquote>

          <footer class="blockquote-footer authorName quoteColor" id="displayAuthor">Ella Wheeler Wilcox</footer>

        </div>

      </div>

      <div class="col-md-2 col-sm-1">

      </div>
      <div class="col-2">

      </div>
      <div class="col-8">
        <hr>
        <a class="twitter-share-button" id="tweet" href="" data-size="small">
Tweet</a>

      </div>

      <div class="col-2">

      </div>
      <div class="col-2">

      </div>

      <div class="col-6">

        <label for="sortInput">Generate new quotes based on a key word or phrase</label>
        <input type="text" class="form-control" id="sortInput" aria-describedby="sortHelp" placeholder="Enter your choice here" value="">
        <small id="sortHelp" class="form-text text-muted">Use any word or phrase to filter quotes. Leaving it blank will generate random quote from entire database.</small>

      </div>

      <div class="col-2">
        <button id="btn" class="btn btn-block btn-primary">Submit</button>
      </div>
      <div class="col-12 centered align-middle">

      </div>

    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</body>

</html>
              
            
!

CSS

              
                //In order to solve the problem of responsize text, I found the solution at https://css-tricks.com/optimizing-large-scale-displays/ 


$enable-gradients: true;
// Default Font-Size
$base-font-size: 1em;

// Line-Height
$base-line-height: 1.5;
$header-line-height: 1.25;
// Breakpoints
$bp-xxsmall: 12em; // 360px
$bp-xsmall: 24em; // 360px
$bp-small: 40em; // 768px
$bp-medium: 64em; // 1024px
$bp-large: 85.375em; // 1366px
$bp-xlarge: 120em; // 1920px
$bp-xxlarge: 160em; // 2560px

// Media Queries
$mq-xxsmall: "(min-width: #{$bp-xxsmall})";
$mq-xsmall: "(min-width: #{$bp-xsmall})";
$mq-small: "(min-width: #{$bp-small})";
$mq-medium: "(min-width: #{$bp-medium})";
$mq-large: "(min-width: #{$bp-large})";
$mq-xlarge: "(min-width: #{$bp-xlarge})";
//$mq-xxlarge: "(min-width: #{$bp-xxlarge})";
$mq-retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)";

html,
body {
  height: 100%;
  width: 100%;
  font-family: "Montserrat", sans-serif;
  font-size: $base-font-size;
  line-height: $base-line-height;
@media (min-width: 0px) and (max-width: 584px) {
   .collapse {
       display: none !important;
   }
}
  
  @media (min-width: 0px) and (max-width: 331px) {
   .collapse2 {
       display: none !important;
   }
}
  
  @media #{$mq-xxsmall} {
    font-size: $base-font-size*0.3;
    line-height: $base-line-height*0.4;
  }
  
 @media #{$mq-xsmall} {
    font-size: $base-font-size*0.4;
    line-height: $base-line-height*0.4;
  }
  @media #{$mq-small} {
    font-size: $base-font-size*0.6;
    line-height: $base-line-height*0.6;
  }
  @media #{$mq-medium} {
    font-size: $base-font-size*0.8;
    line-height: $base-line-height*0.8;
  }

  @media #{$mq-large} {
    font-size: $base-font-size*1.0;
  }

  @media #{$mq-xlarge} {
    font-size: $base-font-size*1.5;
    
  }

//  @media #{$mq-xxlarge} {
//    font-size: $base-font-size*2.2;
     
 // }
}

.navbar {
  font-size: 1em !important;  
}
.quote-style {
  border-left: 3px solid #eee;
  padding-left: 10px;
}
li {
  margin-left: 15px;
}

blockquote {
  border-left: 3px solid #eee;
  text-align: left !important;
  padding-left: 20px;
  padding-right: 10px;
  font-size: 2em !important;
  width: 100%;
  
}

.blockquote-footer {
  font-style: italic;
  width: 75%;
}

.container-table {
  height: 100%;
  width: 100%;
  font-family: "Montserrat", sans-serif;
}
.quoteColor {
  color: white !important;
}

.authorName {
  font-size: 1.5em !important;
  text-align: right;
}

li {
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
}

.centered {
  position: absolute;
  top: 30%;
  text-align: left;
  padding-right: 5%;
  padding-left: 5%;
  padding-bottom: 5%;
}

.hide-me {
  visibility: hidden;
  opacity: 0;
  transform: scale(0.75);
}

.width {
  max-width: 1200px;
}

              
            
!

JS

              
                var lead = document.getElementById("leadership");
var mot = document.getElementById("motivation");
var ins = document.getElementById("inspiration");
var inf = document.getElementById("influence");
var displayQuote = document.getElementById("displayQuote").innerHTML;
var displayAuthor = document.getElementById("displayAuthor").innerHTML;
var sortInput = "";
var btn = document.getElementById("btn");
var quoteCounter = 0;
var htmlStringQuote = "";
var htmlStringAuthor = "";
var ourData = [];

lead.addEventListener("click", function(){changeImage('https://res.cloudinary.com/kage/image/upload/v1519338074/iceberg3.jpg')},false);

inf.addEventListener("click", function(){changeImage('https://res.cloudinary.com/kage/image/upload/v1520501612/influencer2.jpg')}, false);

mot.addEventListener("click", function(){changeImage('https://res.cloudinary.com/kage/image/upload/v1520501729/motivation2.jpg')}, false);

ins.addEventListener("click", function(){changeImage('https://res.cloudinary.com/kage/image/upload/v1520501798/mountain3.jpg')}, false);


function changeImage(element) {
 document.getElementById("imageReplace").src = element;
  event.preventDefault();
}


function changeTweet(element) {
  document.getElementById("tweet").href = element;
}

$(document).ready(function() {
  var ourRequest = new XMLHttpRequest();
  ourRequest.open(
    "GET",
    "https://raw.githubusercontent.com/kagejarvis/Database-Quotes-JSON/master/quotes.json"
  );
  ourRequest.onload = function() {
    if (ourRequest.status >= 200 && ourRequest.status < 400) {
      ourData = JSON.parse(ourRequest.responseText);
    } else {
      console.log("The server has returned an error");
    }
  };
  ourRequest.onerror = function() {
    console.log("Connection error");
  };
  ourRequest.send();
});

btn.addEventListener("click", function() {
  var sortInput = document.getElementById("sortInput").value;
       randomQuotes(ourData, sortInput);
   });

function randomQuotes(arr, sortInput) {
  var newArray = [];
  if (sortInput !== "") {
    sortInput = sortInput.toLowerCase().replace(/[^a-z]/g, " ");
    //console.log(sortInput);
    for (var i = 0; i < arr.length; i++) {
      if (arr[i].quoteText.toLowerCase().includes(sortInput.toLowerCase())) {
        newArray.push(arr[i]);
      }
    }
    //  console.log(newArray.length);
    arr = newArray;
  }

  if (arr.length == 0) {
    htmlStringQuote =
      "The word or phrase you entered doesn't exist in the quote database";
    htmlStringAuthor = "Try using another sort";
  } else {
    var htmlStringAuthor = "";
    quoteCounter = arr.length;
    var randomNumber = Math.floor(Math.random() * arr.length);
    if (arr[randomNumber].quoteAuthor === "") {
      htmlStringAuthor = "Author Unknown";
    } else {
      htmlStringAuthor = arr[randomNumber].quoteAuthor;
    }

    var htmlStringQuote = arr[randomNumber].quoteText;
  }

  // console.log(sortInput);
  //console.log("This is how many it returns " + quoteCounter);

  document.getElementById("displayQuote").innerHTML = htmlStringQuote;
  document.getElementById("displayAuthor").innerHTML = htmlStringAuthor;
}

window.twttr = (function(d, s, id) {
  var js,
    fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);

  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };

  return t;
})(document, "script", "twitter-wjs");


lead.addEventListener("click", changeImage('https://res.cloudinary.com/kage/image/upload/v1519338074/iceberg3.jpg'));
mot.addEventListener("click", changeImage('https://res.cloudinary.com/kage/image/upload/v1520501729/motivation2.jpg'));
ins.addEventListener("click", changeImage('https://res.cloudinary.com/kage/image/upload/v1520501798/mountain3.jpg'));
inf.addEventListener("click", changeImage('https://res.cloudinary.com/kage/image/upload/v1520501612/influencer2.jpg'));
              
            
!
999px

Console