I am starting to build a Random Quote Machine Project.
I needed some advice on how to start.
From where do i use these APIs and JSON to retrieve data.
Actually i am somewhat confused with this new JSON and API thing.
Please suggest some links and also say that how do u search for those APIs.
It’s normal to be confused. Even when you understand APIs, they are still confusing because every one is different and the documentation is often sketchy.
The following will make an API call to forismatic and send the data to the console window. It’s also sends a quote to the HTML. Don’t forget to include JQuery.
$.ajax({
url: "https://api.forismatic.com/api/1.0/",
jsonp: "jsonp",
dataType: "jsonp",
data: {
method: "getQuote",
lang: "en",
format: "jsonp"
}
})
.done(function(data) {
console.log(data);
$("body").html(data.quoteText + " - " + data.quoteAuthor);
})
.fail(function(err) {
console.log('Error: ' + err.status);
});
This looks helpful…I will ask if i get problems at this stage…Thank you so much!
Can you tell me how can i make a quote box look like this.
I mean i want a quote Box similar to this where size of the box is custom and not the whole window.
See thelink here : https://codepen.io/freeCodeCamp/full/ONjoLe/
Well, that is a different question, and it is the stuff you should be learning. But since you asked…
If I were trying to duplicate this page, I would create a div in which to put the quotes. It looks like it’s about 40% the width and centered. You can set the width of the div with CSS and then center it. You can do the same thing for the vertical. Some Bootstrap rows and cols will lay things out nicely. The quote itself needs to be centered. And those large quotation marks - I think font awesome has those, along with those social media icons.
The color is trickier. I think you’re going to need JavaScript to do that. You can generate a random color (or have an array of prechosen colors) and assign them to the background-color of the body and the color of your quote div. It looks like they’re animated with a bit of fade.
All of those things should be easy to look up. Let us know if you can’t find something.
This is helful…
See my Beta Project here 
https://codepen.io/spetsnaz_dev/pen/oevPRe
I am just making my background color fixed for now…Will change that later…
How am i going till now??
I am using PhpStorm IDE from JetBrains…Its very cool and powerfull.Then i copy that code into codepen.
It looks good.
Just as a thought …
Different people have different workflows. For me, coding the CSS is the last thing I do. To me, the JavaScript is where I am going to have to start and dealing with all that CSS and HTML can get in the way. I always make sure I can get the logic to work. Then I make things pretty.
It’s not the only way to do it, but it’s what works for me.
I should also point out that all those script tags and link tags are “supposed” to be handled by codepen, in the settings. I don’t know if it does any harm to add them manually like that, but it isn’t how codepen likes to do it.
For little projects like this, I find codepen really quick and easy.
Actually i didn’t knew how to complete a project from start to end…Thanks for ur suggetions.
I am having my problem in My New Quote button.
Everything else is working.
Its not working…Please help me fix this.I am in great trouble.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<title>Quote Machine</title>
<script>
// Show the first random quote when the page has loaded
$(document).ready(function() {
randomQuote();
});
// Show a random quote when user clicks "Next quote" button
$("#nextQuote").on("click", function(event) {
event.preventDefault();
randomQuote();
});
// Quotes on Design uses the WordPress JSON REST API to provide a way for you to grab quotes. https://quotesondesign.com/api-v4-0/
function randomQuote() {
$.ajax ({
url:
"https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=",
success: function(data) {
// The data is an array of posts. Grab the first one.
var post = data.shift();
var quoteContent = post.content;
// Remove html tags from the quote
var regex = /(<([^>]+)>)/gi;
quoteContent = quoteContent.replace(regex, "");
// Check that quote is less than 200 chars
if (quoteContent.length < 200) {
// Update quote
$("#quote-content")
.hide().html('<span class="quote-style">' + quoteContent + '</span>').fadeIn();
$("#quote-author").hide().html("— " + post.title).fadeIn();
// If quote is too long, generate another random Quote
} else {
randomQuote();
}
},
cache: false
});
}
</script>
If you want help, please link to a pen with the relevant code. It will make it soooooooooo much easier for us to help you and you will get sooooooo many more responses. Don’t expect us to rebuild your html, etc. That’s why we use codepen - it makes it very easy to help each other.
I can’t answer your question because I have no idea what the rest of your code is.
I finally figured it out…Thank you so much for all your help…
This is the link: https://codepen.io/spetsnaz_dev/full/oevPRe/
Pls give a review.
i will make it appear even better lateron.Just completed the Challenge…Thank you!
It looks good. There is a problem with one of your js files not loading. (Again: Learn to check your browser console.)
There is also an issue that on some clicks, randomQuote is getting called more than once. It doesn’t seem to be related to multiple fires on the click. I have to go to work so I can’t figure it out right now. It doesn’t always seem related to the length of the text and is sometimes writing to the screen, before rewriting it with something else.
I’ll take a look when I get home.
hmm…now have to consider & fix my mistake.
Thank you for ur review! 
This is really helpful, thank you.