Random Quote Generator: Why are "citation" and "year" showing up on a new line?

Question

I haven't touched the starter HTML or CSS files, so "citation" and "year" are spans in the source paragraph.

Is there something in the "if statements" that are causing "citation" and "year" to jump down to the next line on their own? I'd like them to be on the same line as "source".

/******************************************
Treehouse Techdegree:
FSJS project 1 - A Random Quote Generator
******************************************/

//Array of quotes
var quotes = [
  {
    quote: "She's gonna step outside, uncover her eyes, Who knew she could feel so alive",
    source: "Britney Spears",
    citation: "Brave New Girl",
    year: 2003
  },
  {
    quote: "My loneliness ain't killing me no more, I, I'm stronger",
    source: "Britney Spears",
    citation: "Stronger",
    year: 2000
  },
  {
    quote: "Everyone has been doing emails.",
    source: "Britney Spears",
    year: 1999
  },
  {
    quote: "Now are you sure you want a piece of me?",
    source: "Britney Spears",
    citation: "Piece of Me",
    year: 2007
  },
  {
    quote: "Never, ever lose your passion to dream.",
    source: "Britney Spears",
  }
];

//Generate a random number, use number to return random quote from array
function getRandomQuote() {
  var randomQuote = Math.floor(Math.random() * quotes.length); //Selects random quote
  return quotes[randomQuote]; //Returns random quote
};

//Calls getRandomQuote function
function printQuote() {
  var showQuote = getRandomQuote();
  var html = "<p class='quote'>" + showQuote.quote + "</p>";
  html += "<p class='source'>" + showQuote.source + "</p>";

//Prints optional properities in quote array
  if ("citation" in showQuote) {
    html += "<span class='citation'>" + showQuote.citation + "</span>";
  }

  if ("year" in showQuote) {
    html += "<span class='year'>" + showQuote.year + "</span>";
  }

//Sets innerHTML of 'quote-box' div to the HTML string
  document.getElementById("quote-box").innerHTML = html;
}

//Runs printQuote function to print quotes to the page
printQuote();


//When the button is clicked, the event listener will call printQuote function
document.getElementById('loadQuote').addEventListener("click", printQuote, false);

Answer 1 · 2019-01-19T03:42:22Z

January 19, 2019 3:42am

Without seeing your html and css and just looking at a div with the id quote-box, here's two options to try: My guess is that your issue is that the paragraph tag used for source defaults to display block which (try adding a background color) takes up the entire width of it's parent, resulting in the spans on the next line. I thought that spans were generally used to target fragments of their parent element, meaning that they are generally not used out on their own. I would expect that option 2 would be the preferable solution.

Option 1 - change the display of the source paragraph to inline

p.source {
  display: inline;
}

Option 2 - place the closing paragraph tag after the second span. This probably needs some logic fixing to ensure the closing tag of the paragraph when year is not in show quote, but I'll leave that to you

var html = "<p class='quote'>" + showQuote.quote + "</p>";
  html += "<p class='source'>" + showQuote.source; // removed closing paragraph tag

//Prints optional properities in quote array
  if ("citation" in showQuote) {
    html += "<span class='citation'> " + showQuote.citation + "</span>";  // added preceding space
  }

  if ("year" in showQuote) {
    html += "<span class='year'> " + showQuote.year + "</span>" + "</p>"; // added preceding space and closing para
  }

Welcome to the Treehouse Community

Looking to learn something new?

Mary Robin Rose

Mary Robin Rose

Random Quote Generator: Why are "citation" and "year" showing up on a new line?

1 Answer

Dave StSomeWhere

Dave StSomeWhere

Mary Robin Rose

Mary Robin Rose