1 of 12

OpenBrackets

Intermediate Web Development

Week 9 Day 1

Welcome!

2 of 12

Welcome to class!

This is the Intermediate Web Development class. Make sure you’re in the right place!

​

Today we’ll continue working on our capstone projects.

3 of 12

How are you doing today?

On a scale of 1-10, how are you doing today and why?

​

4 of 12

Asking Questions

Type in chat

Or

  1. Click Reactions
  2. Click Raise Hand

5 of 12

Steps (Speed Clicker)

  1. Create the game container and page header
  2. Create the block
  3. Put the block in a random starting position
  4. Make the block move when the user clicks on it
  5. Add a timer and score
  6. Add a reset button
  7. Add styling to the game

​

Extra 1: make the block move around as the player tries to click on it

Extra 2: make the block move away from the mouse

Extra 3: make the timer count down or add a target score

Extra 4: add difficulty levels

6 of 12

Step 5a: Add a timer

  • We’ll need to make an element to display the timer
    • We can put a <p> at the top, and inside that, the part where the timer should be can go in a <span>
    • If we give that <span> an ID, then we can change the text inside it with JavaScript
  • Let’s create a variable to keep track of when the the game starts
    • Before the game starts, the variable can store -1
    • When the user clicks on the block for the first time, we can update the variable
    • Date.now() gives the current time
  • Then we can use setInterval to update the timer every few milliseconds
    • To get the timer value, we can subtract the current time from the start time

7 of 12

Step 5b: Add a score

  • Same idea as timer: add a <span> where the score should go
  • The score starts at 0 and increments each time the user clicks on the block

8 of 12

Step 6: Add a reset button

  • Add a <button> to the website that resets the game
  • Timer should be set back to -1
  • Score should be set to 0

9 of 12

Step 7: Add styling

  • Make the block change color when the mouse hovers over it
  • Change the background of the game container or the outside page

10 of 12

10 minute break!

11 of 12

When you need help outside class

Email contact@openbrackets.us and say what class and teacher you have

  • Don't email teacher directly

​

If you are age 13 or older, you can try Discord

  • https://discord.gg/ZRtk534

​

The age restriction is because of Discord’s Terms of Service

12 of 12

Thanks for coming to class!

Please let us know if you have any questions!