23.8. Studio: The DOM and Events¶

Now that we can build a basic flight simulator, we want to add more controls for the staff at our space station. The HTML, CSS, and JavaScript files are provided. For each event, the requirements and desired effect is listed.

23.8.1. Getting Started¶

First, fork the studio repository to your Github account. To do so, on the studio repository page on Github, click the "Fork" button.

Image showing the "Fork" button is in the top right on the repository page.

A popup appears asking where to fork the repository to and you select your profile. You should now have a copy of the repository on your own profile!

Note

Not only is forking repositories an important Git skill, it is especially vital in the class so that everyone has the same starter code! Before continuing, make sure that the repository is now on your profile and you are working with your copy of the starter code for the rest of the studio.

If you have properly forked a repository, when you click on the forked repository on your profile, you will see the following:

Image showing that the repository name says "Forked from" in the top left when the repository has been forked.

Once you have properly forked the repository, you can clone the remote repository to your computer. To start, click on the green "Clone" button to get the proper HTTPS url for the command.

Copy the url either by clicking on the button with a clipboard icon or highlighting the whole url and copying.

In the terminal, navigate to the directory where you want to put your new project. Use the command, git clone <url>, with the url you just copied to put the project on your local machine.

Note

git clone will clone a whole directory including the Git repository on your machine, so there is no need to initialize a Git repository in a new directory to get started this way!

Open Visual Studio Code and go to File > Open to find your new project and get started!

23.8.2. The Requirements¶

Use the window load event to ensure all elements have loaded before attaching event handlers.
When the "Take off" button is clicked, the following should happen:
1. A window confirm should let the user know "Confirm that the shuttle is ready for takeoff." If the shuttle is ready for liftoff, then add parts b-d.
2. The flight status should change to "Shuttle in flight."
3. The background color of the shuttle flight screen (id = "shuttleBackground") should change from green to blue.
4. The shuttle height should increase by 10,000 miles.
When the "Land" button is clicked, the following should happen:
1. A window alert should let the user know "The shuttle is landing. Landing gear engaged."
2. The flight status should change to "The shuttle has landed."
3. The background color of the shuttle flight screen should change from blue to green.
4. The shuttle height should go down to 0.
When the "Abort Mission" button is clicked, the following should happen:
1. A window confirm should let the user know "Confirm that you want to abort the mission." If the user wants to abort the mission, then add parts b-d.
2. The flight status should change to "Mission aborted."
3. The background color of the shuttle flight screen should change from blue to green.
4. The shuttle height should go to 0.
When the "Up", "Down", "Right", and "Left" buttons are clicked, the following should happen:
1. The rocket image should move 10 px in the direction of the button that was clicked.
2. If the "Up" or "Down" buttons were clicked, then the shuttle height should increase or decrease by 10,000 miles.

23.8.3. Bonus Mission¶

If you are done with the above and have some time left during class, there are a few problems that you can tackle for a bonus mission.

Keep the rocket from flying off of the background.
Return the rocket to its original position on the background when it has been landed or the mission was aborted.