This quiz will test your knowledge on Event handling and interacting with Forms in JavaScript.
In this final project you'll make a clone of a popular android game called "4pics1word". The game is divided into levels and in each level, four pictures are shown which are related to a word. You, as the player, have to guess this word by looking at these pictures and fill it in the blanks provided. If your answer is correct, you proceed to the next level.
Here's a small video recording of me playing the game:
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.
This is the official solution for Hands-on Project: Image Slideshow.
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.
<html><head><title>Image slideshow using JavaScript</title><script>// array of URLs to be loadedvar urls = ["https://imgur.com/download/yAKnWJ2",
In this mini project, you will make a JavaScript based automatic image slideshow, which will loop over a set of images from the internet and display them one by one on the screen. In the process, you'll get to practice most of the JavaScript skills you have acquired over the course, including arrays, functions, creating dynamic event listeners, image preloading, etc. Let's get started!
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):
In this tutorial you'll learn about a special type of functions — callbacks.
We will also look at pre-loading static assets like scripts, images and stylesheets into the browsers cache so that they can be instantly fetched from the cache which is a lot faster than downloading from a remote URL.
Let's get started!
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...
This is the official solution for Hands-on Project: Countdown timer.
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.
<html>
In this mini project, you will create a countdown timer using the JavaScript Date module. In the process, you'll get to practice many of the JavaScript skills you have acquired over the course, including strings and operators, creating your own functions, interacting with HTML elements and forms, form validation, using Date object, and using the setInterval method of JavaScript.
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.
Your finished web page should look something like th...
In this tutorial we will learn about two built-in utilities of JavaScript — the Math module and the Date module.
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.
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...
HTML Forms are used everywhere on web - for creating an account, for submitting applications, for submitting payment information, etc. In this tutorial you will learn how to read HTML form data from JavaScript and how to perform form validation (that the user has filled the form as expected).
Note: Once the form has been filled satisfactorily by the user and submitted, often the information is sent to server (the computer which responds to user requests for your website) or stored in your database. For example, if the user just entered his log-in details, this data is sent to the server, which responds back saying whether the log-in credentials were correct or not. We'll cover such interactions (making web-requests from JavaScript) later in the course.