freeCodeCamp - Front End Libraries Projects1- Build a Random Quote Machine

freecodecamp-front-end-libraries-projects1-build-a-random-quote-machine.markdown

freeCodeCamp - Front End Libraries Projects1- Build a Random Quote Machine

A Pen by Pappu Kumar Pashi on CodePen.

License.

index.html

<nav class="navbar navbar-toggleable-md navbar-inverse">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="container">
  <a class="navbar-brand" href="#"><img src="https://user-images.githubusercontent.com/46879554/89633996-46205300-d8c2-11ea-9304-38a348fd0c23.png" width="30px" height="30px" alt="logo"> Pappu Kumar Pashi</a>
  <div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active"><a class="nav-link homeLink" href="#"><i class="fa fa-home fa-lg" aria-hidden="true"></i> Home<span class="sr-only">(current)</span></a></li>
      <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-building fa-lg" aria-hidden="true"></i> Helpful Links for this Pen</a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="https://www.youtube.com/watch?v=Le5L7tdzZd8" target="_blank"><i class="fa fa-code fa-lg" aria-hidden="true"></i> What are APIs,JSON & AJAX?</a>
          <a class="dropdown-item" href="https://www.freecodecamp.com/challenges/get-json-with-the-jquery-getjson-method" target="_blank"><i class="fa fa-free-code-camp fa-lg" aria-hidden="true"></i> FreeCodeCamp Curriculum</a>
          <a class="dropdown-item" href="https://forismatic.com/en/api/" target="_blank"><i class="fa fa-terminal fa-lg" aria-hidden="true"></i> Forismatic API</a>
          <a class="dropdown-item" href="https://css-tricks.com/currentcolor/" target="_blank"><i class="fa fa-css3 fa-lg" aria-hidden="true"></i>    CSS-TRICKS</a><a class="dropdown-item" href="https://dev.twitter.com/web/intents" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i> Twitter Developer Documentation</a>
        </div>
      </li>
     <li class="nav-item"><a class="nav-link homeLink" href="https://codepen.io/Pappu_kumar_pashi/" target="_blank"><i class="fa fa-briefcase fa-lg" aria-hidden="true"></i> My Other Projects</a></li>
       <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-commenting" aria-hidden="true"></i> Contact & Feedback</a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="https://twitter.com/TwistedPappu" target="_blank"><i class="fa fa-twitter-square fa-lg" aria-hidden="true"></i> Twitter</a>
          <a class="dropdown-item" href="#"><i class="fa fa-envelope fa-lg" aria-hidden="true"></i> pappuskskumar@gmail.com</a>
        </div>
      </li>
    </ul>
    </div>
  </div>
</nav>

<div class="jumbotron container">
    <h1 class="display-4 text-center">Random Quote Machine</h1><br>
    <p class="lead"><i class="fa fa-quote-left fa-lg" aria-hidden="true"></i><span id="quoteText">Debugging is twice as hard as writing the code in …are, by definition, not smart enough to debug it.</span> <i class="fa fa-quote-right fa-lg" aria-hidden="true"></i></p>
    <hr class="my-4">
    <blockquote id="author">Brian Kernighan</blockquote>
    <p class="lead">
    <button id="tweetButton" class="pointer"><i class="fa fa-twitter fa-lg" aria-hidden="true"></i> Tweet Out</button>
    <button id="randomQuote" class="float-right pointer" href="#"><i class="fa fa-random fa-lg" aria-hidden="true"></i> Quote</button>
    </p>
</div>

script.babel

$(document).ready(function() { 
        var randomQuote = '' + "Debugging is twice as hard as writing the code in …are, by definition, not smart enough to debug it." + '';
        
        $("#randomQuote").click(function() {      
              $.getJSON("https://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&jsonp=?&lang=en", function(responseText) { 
                
                $("#quoteText").html('"' + responseText.quoteText + '"');
                $("#author").html("- " + responseText.quoteAuthor);
                
                randomQuote = responseText.quoteText;
                
                var randomColor = function getRandomColor() {
                    var letters = '012345';
                    var color = '#';
                    for (var i = 0; i < 6; i++ ) {
                        color += letters[Math.floor(Math.random() * 6)];
                    }
                    return color;
                }
                
                $("body").css("color",randomColor); 
            });                    
        });
        
        
        $("#tweetButton").click(function() {
            window.open("https://twitter.com/intent/tweet?text="+'"'+randomQuote+'"');
        });
  
  $(".dropdown-menu").click(function() {
 
       $(".navbar-collapse").collapse("hide");
   
});

$(".homeLink").click(function() {
 
       $(".navbar-collapse").collapse("hide");
   
});
        
    });   

scripts

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/dfb01e1534.js"></script>

style.css

html {
    min-height: 100%;
    min-width: 100%;
    overflow-x: hidden;
}
body {
    color: #345434;
    background-color: currentColor;
    overflow-x: hidden;
}
button {
    background-color: white;
    color: currentColor;
}
nav {
    background-color: #121212;
}
.jumbotron {
    background-color: white;
    height: 100%;
    width: 80%;
    margin-top: 25%;
}
.pointer {
    cursor: pointer;
    cursor: hand;
}
button:focus {
    outline: none;
}

@media (min-width: 576px) and (max-width: 767px) {
    .jumbotron {
        margin-top: 17%;
        width: 70%;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .jumbotron {
        margin-top: 13%;
        width: 60%
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .jumbotron {
        margin-top: 11%;
        width: 50%;
    }
}
@media (min-width: 1200px) {
    .jumbotron {
        margin-top: 10%;
        width: 40%;
    }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />