Skip to content

Use Javascript keyboard events so that when a key is pressed a circle shows up randomly on the screen.

Notifications You must be signed in to change notification settings

ltw-webdev-javascript/circle-maker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

summary time deliverables
Use Javascript keyboard events so that when a key is pressed a circle shows up randomly on the screen.
1 hour
1 HTML file, 1 CSS file, 1 JS file

Circle maker

Overview

  • Fork this repository.
  • Write an event listener in Javascript that listens for keydown
  • When the event is triggered create a brand new <div>
  • Generate a random left and top coordinate for the <div> using Math.random()
  • Place the <div> on the page in the random position.
  • Run it through Markbot and make sure it passes all the checks.

Goal

Create the interaction shown in the linked video.


Hand in

Drop this folder into your Markbot application. Make sure to fix all the errors. And submit online.


Optional challenges

These challenges are here if you’d like to try a little more work—they are for extra experience and learning. They are completely optional and not graded. Show them to me if you’d like—I’d love to see them.

  1. When a new circle is added make its background-color randomized.
    Watch this video to see how it interacts.

About

Use Javascript keyboard events so that when a key is pressed a circle shows up randomly on the screen.

Resources

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project

 

Packages

No packages published