Building a web-based app: In this assignment, you are going to be building an app that will run in your web browser.
One can use this app to create a to-do list. Once the user is done a task, they can remove it from the list. We’re going to need to learn some new JavaScript functions to build our app.
At the moment the web pages we’ve built don’t change after your browser has drawn them on-screen. We want to add and remove items from our list, so our app needs to be more interactive.
The best web browsers to use in this assignment are Mozilla Firefox and Google Chrome. Not all browsers will support the features you need to complete this assignment.
Our app will have a text box that user can type into. When user clicks on the button, the item will be added to the list.
When users completed a task, he can click on it and it will be removed. We can code all these things using the JavaScript you learnt earlier with some new programming tools.
Building a text box and button for our web app
Before we start learning new JavaScript code, let’s build the basic structure of our app. We need a text box and a button. We learnt how to use the < input/ > tag and the type attribute. We’re going to be using those skills again now.
The < input/ > tag allows you to create a HTML element on your page where your user can enter data.
You use the type attribute to choose the kind of element your user can add data to. So to create a text box and a clickable button on our page, we will need the following code:
<input type="text"/> <input type="button"/>
We also need to add some text inside the text box and button, so the user knows what action they perform. We do this by adding a new value attribute to the < input/ > tags:
<input type="text" value="Type here to add task"/> <input type="button" value="Add item"/>
Then we can change the CSS properties of our < input/ > tags to make them look a bit more exciting. We do this with CSS classes like we did in earlier lessons.
But this time, rather than giving our CSS class a name, we use the CSS type attribute selector to find and format our button. Let’s have a look at the whole code block:
<!DOCTYPE html>
<html>
<head>
<title>To-Do List App</title>
<style>
input[type="button"] {
background-color: pink;
}
</style>
</head>
<body>
<p>Special Hello World To-Do list</p>
<br/>
<input type="text" value="Type here to add task"/>
<br/>
<input type="button" value="Add item"/>
<br/>
</body>
</html>
But if you try to type into the text box or click the button, nothing will happen. If we want our button and text box to work, we need to add some JavaScript to our page.
