STEP 1:
Go into your “LG6_canvasjs” folder and create a new subfolder called “lesson3”. This is where you will keep all of your files for this lesson.

STEP 2:
Open Notepad++ and close any file that you might still have saved.

STEP 3:
Create three new documents with Notepad++ called lesson3.html, style3.css, and loops.js. All of these documents will be saved to your new “lesson3” folder. After saving these files, take a moment to look inside your “lesson3” folder and see the icons that make each file look different and unique. If the icons all look the same, then you’ve saved something wrong.

STEP 4:
Copy this HTML code and paste it into your “lesson3.html” file.

STEP 5:
Copy this CSS code and paste it into your “style3.css” file.

STEP 6:
Copy this JavaScript code and paste it into your “loops.js” file.

STEP 7:
After pasting all three codes into all three files, click the SAVE ALL button at the top of Notepad++.

STEP 8:
Open your HTML file with Chrome and make sure you see a white canvas with yellow trim and a black border around the outside.

STEP 9:
Create a split screen between your Notepad++ and your browser display.

CHALLENGE #1 (Beginner):
Adding & Manipulating Conditions
After you open your design in Chrome, you should immediately see a square/rectangle in the top left corner of the canvas. But in your code, it seems to show that there are two squares. That’s because the other square is written as part of a JavaScript condition.

1. Challenge 1A is to change the operator in the condition so that the other square shows up.
2. Challenge 1B is to create more conditional squares in the canvas.
3. Challenge 1C is to change the color of the squares.
4. Challenge 1D is to make each square a different color.
5. Challenge 1E is to build a unique pattern using a variety of conditions.

CHALLENGE #2 (Beginner):
FIXING THAT BLUR
For whatever reason, when the HTML5 Canvas element was created, there was a glitch. If you style the canvas and give it a width and height in the CSS file, everything inside that canvas gets blurry. In order to fix the problem, the width and height have to be removed from the CSS file placed inside the canvas tag on the HTML file. Follow the teacher’s instructions again to solve this challenge.

CHALLENGE #3 (Intermediate):
Creating a For Loop
We know that copy/pasting codes is easy, but what if trying to make a similar object multiple times could be even easier than that? Erase the code in your loops.js and replace it with this code snippet. The teacher will explain how this loop works and give you a challenge at the end.

CHALLENGE #4 (Intermediate):
A Color Fading Loop
Now that you can create a loop and change a couple of variables, what if we apply some of the things we know from the last lesson? Follow the teacher’s instructions for creating a color fade.

CHALLENGE #5 (Beginner, Intermediate, & Advanced):
Working with Lines
Similar to the fillRect that you’ve spent the last two lessons working with, the moveTo and lineTo methods allow you to create lines or even connect them. Erase the code in your loops.js file and replace it with this code snippet. The teacher will explain your various challenges.