Collection of practice problems for learning jQuery.
Using html and Javascript, display a count down timer that counts down from 5. The count should decrease by one every second. When the count reaches 0, display the message "Times Up!".
One possible solution may be viewed on CodePen.io here
Creat a web page with the following elements:
- Page heading with a title for the problem
- A button with the text "Add Buttons"
- An empty
divelement with the id "buttons" - include the jQuery CDN.
Write a script that will do the following using jQuery:
- Hide the "Add Buttons" button
- Create an array of strings with the names of animals (or your own subject such as movie titles)
- Add a button to the #buttons div for each element of the array. Use the string to set the text of the button.
When the user clicks on one of the buttons in the #buttons div, display an alert with the text of the button.
One possible solution may be viewed on CodePen.io here
Create a web page with the following starter html in the body:
<h2>Add Button:</h2>
<label for="newButton">Button Text:</label>
<input type="text">
<button>Add</button>
<hr>
<h2>Buttons:</h2>
<div id="buttons"></div>
Include the jQuery CDN in the html.
Using Javascript and jQuery, add the following behavior to the application:
-
When the "Add" button is clicked, a new button with the text from the input should be added to the #buttons div.
-
When a button in the #buttons div is clicked, display an alert with the text of the button.
One possible solution may be viewed on CodePen.io here
Create a page with an image.
Use Javascript and jQuery to display a different image when the image element is clicked on.
Every time the image is clicked, the image should be swaped.
View on CodePen.
Created by John Desrosiers. December 2017.