Pre-work for SCTP in Software Engineering - Coding Challenge

Brief

This pre-work challenge is meant to prepare learners on their HTML/CSS/JS knowledge and skills prior to day 1 of the program.

The Outcome

You are to produce this simple game on the browser - watch this Link

• Setup the car image on screen (image file provided in img folder) on index.html.
• Edit src/index.js to achieve the following:
  • When key "a" is pressed, the car move 10px to the left.
  • When key "d" is pressed, the car move 10px to the right.

A simple project has been set up on codesandbox. Make sure you create an account on code sandbox, fork the repository (the button on top right) before editing the content. So that you can retain the changes you've made in your own account.

Study Materials

This challenge requires basic knowledge of HTML, CSS, and JavaScript to accomplish. You should go through an introduction of HTML before looking at the reference links below.

W3Schools is a reference site that contains sample code that helps you explore the code. Most of the reference links listed below are from the site. It is also expected of you to perform further research and close knowledge gap (if any).

• Intro to HTML
• Connect HTML to JS file using <script> tag
• Select HTML element using Query Selector
• Detect key press
• Changing style of element dynamically using JavaScript
• Using absolute position and left properties to move car

Submission

There is no need to submit this prep work. This is meant get you better prepared for the program.

Additional Prep

You should have completed an entry test prior to joining this program. It is a good idea to revise on the referenced material to strengthen the basic understanding of JavaScript.