quiz

Quiz: Using JavaScript with Forms and Event handling

This quiz will test your knowledge on Event handling and interacting with Forms in JavaScript.

Overview

Here's a small video recording of me playing the game:

What is jQuery?

jQuery is an open source JavaScript library or module, which basically means that it is a JavaScript file that has been written by someone else to make our tasks concise and easy. jQuery was made to make HTML—JavaScript interaction easier, it has a lot of stuff related to event handling and animations built in.

It is not a new programming language; it is just a set of functions and properties written in JavaScript.

Why jQuery?

jQuery is cross-browser compatible. This means that when you run your code, the output will remain the same, independent of the browser. It won't change from one ...

Overview

The solution script is divided into three functions, main(), preload() and changeImage(). The main() function calls the other two in order. First the preload() method is called and then changeImage(). Preloading continues to happen in background, while changeImage() executes.

Code

<html>
    <head>
        <title>Image slideshow using JavaScript</title>
        <script>
            // array of URLs to be loaded
            var urls = [
                "https://imgur.com/download/yAKnWJ2",

Overview

You are to get images from the internet and change the src attribute of an <img> element after a fixed interval of time. The images should also be preloaded in background using JavaScript.

Optionally, you can also further beautify the slideshow using animation effects in jQuery.

Here's the slideshow we made (recorded with Fast 3G network throttling):

Set-up for this tutorial

For this tutorial, to ensure that everyone sees similar results and is able to run the code properly, we will change some settings in Google Chrome.

Open up the console using Ctrl + Shift + J. In the t...

Overview

The script is divided into three functions startTimer(), calculate() and updateHTML(). The startTimer() method is called when the button is clicked and it does the set-up for the timer to start. If everything is fine, it calls the calculate() method every 100 milliseconds. The calculate() method calculates the remaining numbers of days, hours, minutes and seconds from current time to target. Finally, it calls the updateHTML() method to reflect this time in the HTML as well.

We've also written some custom CSS to make the countdown timer look beautiful.

Code

<html>

Overview

Although we've provided guidance and instructions for the project, you'll be writing all the code for this project. You are supposed to take end date and time input from the user and run a countdown timer based on the time difference.

Expected behavior

Your finished web page should look something like th...

Math

The Math module has functions to do various mathematical operations, and it also includes functions for generating random numbers. It has many constant values as well, like the value of pi (ratio of a circle's circumference to its diameter), etc.

Math Constants

Let's start by looking at some of the constants defined in the Math object. We will use the JavaScript Console for this tutorial to run the examples interactively.

Math.E is the Euler's constant — e. It is used as th...

Overview

What is jQuery?

Why jQuery?

Overview

Code

Overview

Set-up for this tutorial

Overview

Code

Overview

Expected behavior

Math

Math Constants

HTML Forms