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) onindex.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.
- When key "a" is pressed, the car move
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 andleft
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.