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.
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
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
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.
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.
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?
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.
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
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.
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
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
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.
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.
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?
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.
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
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.
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.
<a href="http://codepen.io/makzan/pen/GgXJag
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?
<a href="http://codepen.io/makzan/pen/bNxGPM
You may find the suggested solution in the following link:
<a href="http://codepen.io/makzan/pen/wBEBgE
<a href="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.
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.
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?
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.
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