Random Quote Generator: Problem displaying random quote. Pls help review

Code Feedback
1

Hi,

This is my codepen: https://codepen.io/alacrity/pen/qRQjOo

Could you please help review:

  1. why the pen doesn’t display the random quote
  2. why does a blue line around the border of the button once i click it?

Appreciate any help and feedback, Thanks!

2

You’re off to a good start-
1)please look into js escape sequences. eg: \n

2)can not see an issue- though a quick and clean change could involve bootstrap.

Keep at it!

3

My code is working in browser but not working on CodePen. I don’t know why I am not able to fetch quotes in Code pent. Please help by looking at below JS

JS -
$(document).ready(function() {
window.twttr = (function(d, s, id) {
var js,
fjs = d.getElementsByTagName(s)[0],
t = window.twttr || {};
if (d.getElementById(id)) returnt;
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”);

function getRandomColor() {
var letters = “0123456789ABCDEF”;
var color = “#”;
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}

function createTweetButton(text) {
twttr.widgets.createShareButton(
“https://twitter.com/share”, // url : string
document.getElementById(“twitter-button”), // targetEl : DOM node
{
text: text
} // options : object
);
}

// Generates tweet text and creates button
function createTweetButtonFromQuote(tweetText) {
var tweetText = tweetText.quote + " -" + tweetText.author;

createTweetButton(tweetText);
}

$.getJSON(“http://quotes.stormconsultancy.co.uk/random.json”, function(a) {
createTweetButtonFromQuote(a);

$("#quoteTextBox").html(a.quote + "

— " + a.author + “

”);
});

$("#quoteChangeButton").click(function() {
var randomColor = getRandomColor();

$("#quoteChangeButton").css(“backgroundColor”, randomColor);
$(“body”).css(“backgroundColor”, randomColor);
$("#titleCase").css(“color”, randomColor);
$.getJSON(“http://quotes.stormconsultancy.co.uk/random.json”, function(a) {
$("#quoteTextBox").html(a.quote + "

— " + a.author + “

”);

$("#twitter-button").empty();

createTweetButtonFromQuote(a);
});
});
});

4

I’m also a bit of a beginner myself so I might not be very accurate but i don’t think javascript can fetch any info from a comment, since the browser completely ignores it, so just uncomment it and you’ll be fine. And I think you’re doing fine overall but tI would recommend to avoid mixing jQuery and javascript, because it makes things very messy.