googlecreativelab/coder-projects

typos in Night and Day tutorial codeblocks

Opened this issue · 3 comments

Hi, there is a typo in step 6 of the Night and Day tutorial at the end of step 6. The anonymous function in the click event handler is not properly closed.

$(document).ready( function() {
    $('button').click( function() {
        $('body').addClass('black');
    });  // missing } was at beginning of this line!
});

In Step 7 there is a typo in the #orb css codeblock in the background-color. Blue does not render properly in most browsers if prefixed with #, thus breaking the page.

#orb {
    height: 300px;
    width: 300px;
    border-radius: 100%;
    padding: 20px;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background-color: blue; /* this line originally had # prefixed before the word blue */
}

In Step 11, the last codeblock is missing the last line, which should close click.

Should be

$('#orb').click( function() {
        if ($(this).hasClass('sun')) {
            $(this).removeClass('sun').addClass('moon');
        } else {
            $(this).removeClass('moon').addClass('sun');
        }
}); //this line missing

In Step 8 there are mistakes in the css for the sky. Instead of width and height set to 100%, they should be set to 100vw and 100vh.

#sky {
    height: 100vh;
    width: 100vw;
}