✏ Lab 1—Basic HTML and jQuery exercises

This is the first lab of the Beginning jQuery course.

Welcome to the lab and exercise section. In this section, I’ll give you several hand on tutorials and exercises.

Tutorials come with the step-by-step sample code that you can follow. After you complete the tutorial, I encourage you to build something your own on top of the tutorial code.

Besides tutorials, there are exercises. I’ll provide a starting point to help you. But there is no model answer on the topic. You need to figure out how to accomplish the task.

1. Basic HTML exercise

Imagine now we are planning a website. The website is about a game that uses real world’s weather data. We have the following content.

Title: World Simulation Game

This is a game that simulate your life with your real world data. This game uses the real world’s weather and temperature data.

It’s rainy today in Macao. You should buy an umbrella by using $10 game coins.

Haven’t started playing yet? Buy now with $4.99.

Thank you and enjoy the rest of your Friday.

Your task:

Now try to implement the HTML by using the provided content. Make sure you apply the right grouping on the content. Also please consider adding span tag to content that we’ll need to dynamically change them with JavaScript later.

You can use the following link as a starting point.

http://codepen.io/makzan/pen/GgXJag

2. Basic jQuery Exercises

In the following link, I code an HTML error message. There is a button there and I create a skeleton of JavaScript code. Can you add jQuery code to make the error message only shows when user clicks on the button?

http://codepen.io/makzan/pen/bNxGPM

You may find the suggested solution in the following link:

http://codepen.io/makzan/pen/wBEBgE

Taking the code further

1. How about adding a button that clears the error message?
2. Can we define the show and hide animation by using CSS and jQuery addClass?
3. Let’s take the exercise one step further. Now we have a form that user needs to input data. Please display an error message if the user submit the form with the input field blank. The following link provides you a starting point.

http://codepen.io/makzan/pen/ByONvj

After you completed this exercise, try to add more fields to the form and do similar jQuery checking. For example, you may add a checkbox and check if the checkbox is checked on form submission.

3. Lab — Building tab panel

The following links show how we can build a tab panel by using HTML and jQuery.

Step 3: Indicating active Tab.

In Step 1, we created the basic HTML structure. Please note that the content and links work perfectly without any JavaScript code. Clicking on the tab links to the targeted content by browser anchor hash link.

In Step 2, we use jQuery to handle the tab link clicking and toggle the visibility of tabs.

In Step 3, we use addClass and removeClass to indicate which tab is currently in active.

Taking the code further

By following the steps, you created a working tab panels. We haven’t added any CSS styles to the tab. Can you style the tabs into different themes?

4. Extra Resources: 147 Color Names

There are actually 147 color names in CSS. If you need to choose colors for your CSS styles, you can find those color names in the following website.

CSS named color

Submitting your exercises

Once you have worked on the exercises, you can send me the links of your work in the chat area, globally or privately. Usually there are plenty of questions when working on the code. You can ask me any questions via the 1-on-1 chat too.

—Thomas Mak