Mission 3: Build an app

In Mission 3 you are going to learn how to build an app using HTML and JavaScript. An app, which is a short for “application”, is a type of program built to help a user with a specific task. In this mission you are going to code a to-do list app. The user will be able to add tasks to create their to-do list. Then when they’ve completed the task, they will be able to remove it from the list by clicking on it.

To make the app, you first need to learn to create a button using JavaScript. Then you are going to use two APIs (Application Program Interfaces) called the DOM (Document Object Model) and localStorage. These APIs allow you to program you web browser to make things appear or disappear from screen and store information.

CODE SKILLS:How to build a button

Use the input tag to create a button that the user can click.

CODE SKILLS:Making buttons run code

Use the onclick attribute to make your button pop-up an alert when it’s clicked.

CODE SKILLS:Methods and properties

Find and change the contents of an HTML element using the DOM.

CODE SKILLS:Adding new HTML elements

Use the DOM to create and add new HTML elements to your app.

CODE SKILLS:Building the basic app

Get the template for the basic version of the app.

CODE SKILLS:Removing a HTML element

Use the DOM to remove a HTML element from your app.

CODE SKILLS:Removing more than one HTML element

Use the removeChild method to remove multiple HTML elements from your app.

CODE SKILLS:Using the localStorage API

Store the information in your to-do list app in your browser using the localStorage API.

Do it yourself task:Build a to-do list app

Use your new HTML and JavaScript skills to code a to-do list app for Professor Bairstone. You need to use the DOM and localStorage APIs.

Useful resources for this mission

The House of Volkov logo

Get the logo for the House of Volkov.

Download

Mr Volkov

Get an image of Mr Volkov to use in your app design.

Download

To-do list

See the tasks on Professor Bairstone’s list.

Download

diamond

dog