Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
freeCodeCamp - Front End Libraries Projects1- Build a Random Quote Machine
<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>
$(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");
});
});
<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>
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%;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment