1. Refactor your ticker project to use jQuery for all DOM manipulations.

   My solution.

2. Using jquery, create a modal dialog for your 'Welcome to Berlin and the Future' page. A modal dialog is a popup that users must interact with before they can do anything else. Typically, modals on website involve a box of content sitting on top of a semi-transparent background that fills the browser window.

   Your modal should appear 1 second after users arrive at the page. The modal should disappear when the user clicks the X in the upper right corner.

   My solution.

​

jQuery is probably the most widely used Javascript library of all time. It's popularity seems to have peaked and entered decline, primarily because many of the problems it solves have become less significant as browsers have improved and become more consistent. However, it is still incredibly widely used and it is very likely you will encounter it on projects in the future.

jQuery provides tons of methods designed to help you traverse the DOM tree, manipulate elements, make ajax requests, and handle user action.

When you include jQuery, it creates two global variables, jQuery and $, both of which refer to the same thing: a function that returns jQuery objects.

If you pass a selector to this function, it returns an object representing any elements on the page that match the selector. Note that it does not return the elements themselves. The object it returns has references to the elements themselves, but you usually do not need to access them. The jQuery object wraps the elements. When you call methods on the jQuery object, it acts upon the elements without the methods being directly attached to them.

Most jQuery methods return the object they belong to, which allows you to chain your method calls.

$('h1').css({
    color: 'red'
}).html('jQuery is pretty great!');

In this example, the style.color and innerHTML of all <h1> elements of the page have been changed. No loop is required.

If you pass a string containing HTML content to jQuery or $, it creates the element(s).

$('<div>I love jQuery!</div>').css({
    textDecoration: 'underline'
}).addClass('happy').appendTo('body');

If you pass a reference to an element to jQuery or $, a wrapped object is returned.

$(document.body).css('backgroundColor', '#fff');

It is common for jQuery methods that are setters (such as attr, val, and html) to also be getters. If they are not passed a value to set, they return the current value.

jQuery has had several different APIs for adding and removing event listeners through the years (bind/unbind, live/die, delegate/undelegate). The current methods to use for this are on and off.

$('.pretty').on('mousedown', function fn(e) {
    console.log(e.currentTarget.id);
    $(e.currentTarget).off('mousedown', fn);
});

jQuery allows you to give events a namespace, which is very handy for removing listeners without references to the functions themselves.

$('a').on('mouseover.removeAfterFirstClick', function() {
    console.log('mouseover!');
}).on('click.removeAfterFirstClick', function(e) {
    $(e.currentTarget).off('.removeAfterFirstClick'); //removes all events in the removeAfterFirstClick namespace
});

You can give events arbitrary names and trigger them at will.

$('body').on('whatever', function() {
    console.log('The "whatever" event happened');
}).trigger('whatever');

jQuery also supports creating custom events that are composites of other events.

In order to use jquery, you have to include it with a script tag in your HTML. You can either download the latest version or include it from the CDN like so:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>