FCC: Random Quote

Developer
Jeanine
Size
3,219 Kb
Views
28,336
  1. FCC: Random Quote Previews
  2. FCC: Random Quote HTML Codes
  3. FCC: Random Quote CSS Codes
  4. FCC: Random Quote JS Codes

How do I make an fcc: random quote?

What is a fcc: random quote? How do you make a fcc: random quote? This script and codes were developed by Jeanine on 12 September 2022, Monday.

FCC: Random Quote Previews
IQ Test

FCC: Random Quote - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>FCC: Random Quote</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!DOCTYPE html>
<html lang="en">
<head> <meta charset="utf=8"> <link href='https://fonts.googleapis.com/css?family=Rokkitt' rel='stylesheet' type='text/css'>
</head>
<body class="background-colors"> <div class="wrapper"> <div class="container"> <div class="row"> <div class=""> <div class="well"> <div class="row"> <div class="col-sm-12"> <blockquote> <p><img src="https://i0.wp.com/cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif" alt="Loading" /> </p> <small>Me</small></blockquote> </div> <div class="col-sm-12"> <p class="new-quote"><a class="background-colors">New Quote</a></p> <ul class="list-unstyled list-inline fa-3x"> <li><a class="tweet-link" href="https://twitter.com/intent/tweet?hashtags=freecodecamp,quotes&text=View fancy quotes&url=https://codepen.io/virtual/pen/jqJeKb" target="_blank"><span class="fa fa-twitter-square" aria-hidden="false"><span class="sr-only">Post to Twitter</span></span></a></li> <li><a class="tumblr-link" href="https://www.tumblr.com/share/link?url=http%3A%2F%2Fcodepen.io/virtual/pen/jqJeKb" target="blank_"><span class="fa fa-tumblr-square" aria-hidden="false"><span class="sr-only">Post to Tumblr</span></span></a></li> </ul> </div> </div> </div> <p class="attribution"><a href="http://satinflame.com" target="_blank">by satinflame design</a></p> </div> </div> </div> </div>
</body>
</html> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

FCC: Random Quote - Script Codes CSS Codes

body { font-family: 'Rokkitt', 'Times New Roman', serif; font-weight: 400; padding-top: 20px; transition: background-color 0.5s ease;
}
.background-colors { margin: auto;
}
blockquote { padding: 10px 15px; margin: 0; line-height: 1.3em; margin-left: 20px; padding-left: 0; border-left: 0; font-size: 28px; text-align: center; font-weight: 400;
}
blockquote:before { content: '“'; position: relative; left: -10px; top: 28px; font-size: 80px;
}
blockquote small { text-align: right; clear: both; margin-bottom: 30px; font-weight: 300; display:none;
}
blockquote .small:before,
blockquote footer:before,
blockquote small:before { top: -6px; position: relative;
}
.well { padding: 10px 30px; max-width: 520px; margin: 0 auto;
}
.well > div { padding: 5px;
}
ul,
li { padding: 0; margin: 0;
}
a { color: inherit;
}
p a { text-decoration: underline;
}
.new-quote { padding: 10px; float: right; display: inline-block; width: 200px; text-align: right;
}
.new-quote a,
.attribution a { color: #fff !important; text-align: center; padding: 8px 10px; text-decoration: none; font-size: 18px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; cursor:pointer;
}
.attribution { text-align: center; width: 100%; padding: 10px;
}

FCC: Random Quote - Script Codes JS Codes

function ran_col() { //function name var letters = ['f19d2d', 'a40a60', '333']; var color = "#" + letters[Math.floor(Math.random() * letters.length)]; $('.background-colors').css('background-color', color); $('blockquote small').css('color', color); $('body').css('color', color); $('a').css('color', color);
}
$(function() { ran_col(); getQuote();
});
$(".new-quote a").click(function() { getQuote();
});
function getQuote() { ran_col(); $.ajax({ url: 'https://quotesondesign.com//wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1', success: function(data) { var post = data.shift(); $("blockquote p").html(post.content); $("blockquote small").html(post.title); var linktext = (post.content); linktext = $(linktext).text(); //alert(linktext); var tweet = "https://twitter.com/intent/tweet?hashtags=freecodecamp,quotes&text=" + linktext+ "&url=https://codepen.io/virtual/pen/jqJeKb "; var tumblr = " https://www.tumblr.com/share/link?url=http%3A%2F%2Fcodepen.io/virtual/pen/jqJeKb"; $('.tweet-link').attr("href",tweet); $('.tumblr-link').attr("href",tumblr); }, cache: false }); $('blockquote small').css('display','block');
}
FCC: Random Quote - Script Codes
FCC: Random Quote - Script Codes
Home Page Home
Developer Jeanine
Username virtual
Uploaded September 12, 2022
Rating 3
Size 3,219 Kb
Views 28,336
Do you need developer help for FCC: Random Quote?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jeanine (virtual) Script Codes
Name
Font-Awesome Icon Card with heading
Flexbox
3 Piece Slider with featured center
Simple React Template
3 Piece Slider
Simple Event Box
Parallax Cats
Table Sorter Data
Expanding Info Boxes
Bootstrap 4
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!