Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by James Crane Lewis III
.a{fill-rule:evenodd;}techdegree
James Crane Lewis III
Full Stack JavaScript Techdegree Student 5,276 Points

Random Quote Generator - printQuote()

Good morning,

So my code is listed below. I am using the module pattern with self invoking functions. I have two modules, the Quote and controller module.

Within the Quote module the two functions 'getRandomQuote' and 'printQuote' are listed.

I am having trouble following the requirements for 'printQuote'

Requirements (NOT MET):

  1. printQuote constructs a string containing the different properties of the quote object using the following HTML template:

  2. printQuote displays the final HTML string to the page. You can use this JS snippet to accomplish that: document.getElementById('quote-box').innerHTML

It seems I have dug myself in a hole and have met these requirements in the 'getRandomQuote' function, and NOT the 'printQuote' function.

How do I meet the 'printQuote' requirements as I have the code set up now?

Any advice is appreciated. Thank you!

var Quote = (function () {

var getRandomQuote = function () {

    var randomQuote = Math.floor(Math.random() * quotes.length);
    // Search through the quotes array to find a random quote
    for (var key in quotes[randomQuote]) {

        var html = '<i><p class="quote">%quote%</p></i><strong><p class="source"> - %src%</p></strong><span class="citation">%citation%</span><span class="year">%year%</span></p>';

        // Use the 'replace' method to call the appropriate variable
        var newQuote = html.replace('%quote%', quotes[randomQuote].quotation);
        newQuote = newQuote.replace('%src%', quotes[randomQuote].source);
        newQuote = newQuote.replace('%citation%', quotes[randomQuote].citation);
        newQuote = newQuote.replace('%year%', quotes[randomQuote].year);

        // Use innerHTML to connect to the web page
        var demo = document.getElementById('demo');
        demo.innerHTML = newQuote;
        return newQuote;
    }
};

var printQuote = function () {
  getRandomQuote();
};

return {
  printQuote: printQuote,
};

}());

/* // 2 of 3 - UI Controller Module for variables and DOM Elements

var UI_Controller = (function () {

}()); */

// 3 of 3 - controller Module for init() function

var controller = (function (one) {

var findQuote = function () {
    one.printQuote();
};

var eventListeners = function () {

    // Click the button for a quote to display - And click again for another quote to display!
    document.querySelector('.btn').addEventListener('click', findQuote);

    // keycode and which for current / older browsers using the enter key to call eventListeners()
    document.addEventListener('keypress', function (e) {
        if (e.keycode === 13 || e.which === 13) {
            findQuote();
        }
    });
};

return {
    init: function () {
        eventListeners();
    }
};

}(Quote));

controller.init();

James Crane Lewis III
.a{fill-rule:evenodd;}techdegree
James Crane Lewis III
Full Stack JavaScript Techdegree Student 5,276 Points

I found a solution:

the Quote module has the 'getRandomQuote' function return the equation as a variable passing it into the 'printQuote' function, which worked nicely and met the requirements I believe

var Quote = (function () {

// Returning my functions immediately to make 'public'

var getRandomQuote = function () {
    var randomQuote = Math.floor(Math.random() * quotes.length);
    return randomQuote;
};

var printQuote = function () {
  var randomQuote = getRandomQuote();

for (var key in quotes[randomQuote]) {

        var html = '<i><p class="quote">%quote%</p></i><strong><p class="source"> - %src%</p></strong><span class="citation">%citation%</span><span class="year">%year%</span></p>';

        // Use the 'replace' method to call the appropriate variable
        var newQuote = html.replace('%quote%', quotes[randomQuote].quotation);
        newQuote = newQuote.replace('%src%', quotes[randomQuote].source);
        newQuote = newQuote.replace('%citation%', quotes[randomQuote].citation);
        newQuote = newQuote.replace('%year%', quotes[randomQuote].year);

        // Use innerHTML to connect to the web page
        var demo = document.getElementById('demo');
        demo.innerHTML = newQuote;
        return newQuote;
    }
  };

return {
  printQuote: printQuote
};

}());

1 Answer

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

Congratulations on resolving your own issue. :+1:

FYI: For better readability, use the instructions for code formatting in the Markdown Cheatsheet pop-up below the "Add an Answer" area. :arrow_heading_down:

James Crane Lewis III
.a{fill-rule:evenodd;}techdegree
James Crane Lewis III
Full Stack JavaScript Techdegree Student 5,276 Points

Thank you, I did not realize. Will do!