Site icon MiltonMarketing.com – Bernard Aybout's Blog

Building a web-based app

To-Do-List

To-Do-List

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:

[html] <input type="text"/>
<input type="button"/>[/html]

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:

[html] <input type="text" value="Type here to add task"/>
<input type="button" value="Add item"/>[/html]

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:

[html] <!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>[/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.

HOW TO BUILD A BUTTON

Let’s start making the app by building a button. Use < input/ > tags to code a text box and button.

1) Open up your text-editing program. Create a new HTML file called app.html. Type this code into your new file:

[html] <!DOCTYPE html>
<html>
<head>
<title>To-Do List App</title>
</head>
<body>
<p>Hello World! To-do list.</p>
<br/>
<br/>
<br/>
</body>
</html>[/html]

2) Now use the < input/ > tag to create a text box and button in your. Don’t forget that you need to include two attributes inside your < input/ > tags: the type and value attributes.

You should set the value attribute to the text you want to display in your box and button. Your code will look like this:

[html] <body>
<p>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]

3) Save your HTML file and open it in your browser. You will see your box and button displayed on-screen.

Now create a CSS class and use the CSS type attribute selector to change the colour of your button.

Making buttons run code

We now need to make the button in our app interactive. To make the button run JavaScript code when we click it, we need to add the onclick attribute to our button < input/ > tag, like we did earlier.

When the user clicks on the button, we want it to call a JavaScript function. All we have to do is set the value of our onclick attribute to the name of the function we want to call.

Let’s code a button that will call a function that pops up an alert when it’s clicked. First, create the JavaScript function you need. Then add the onclick attribute to the < input/ > tag for the button.

Finally set the value of the onclick attribute to the name of the function. Do this by using the equals sign (=) and double quotes (” “). The code we need looks like this:

[javascript] <!DOCTYPE html>
<html>
<head>
<title>To-Do List App</title>
<script>
function addItem() {
alert("Remember dog biscuits!");
}
</script>
</head>
<body>
<p>Special Exhibition To-Do List</p>
<br/>
<input type="text" value="Type here to add task"/>
<br/>
<input type="button" value="Add item" onclick="addItem();"/>
<br/>
</body>
</html>[/javascript]

Now when you click on the button, the onclick attribute calls the JavaScript function and an alert pops up.

Now practise using the onclick attribute to make a button that pops up an alert.

1) Open up your text-editing program. Create a new HTML file called button.html. Then copy and paste your code from app.html into your new file. In your < body > add an onclick attribute that calls a JavaScript function to your button, like this:

[javascript] <!DOCTYPE html>
<html>
<head>
<title>To-Do List App</title>
</head>
<body>
<p>Hello World! To-Do List App</p>
<br/>
<input type="text" value="Type here to add task"/>
<br/>
<input type="button" value="Add item" onclick="addItem();"/>
<br/>
</body>
</html>[/javascript]

2) Add the < script > tag to your < head >. Create a JavaScript function that will pop up an alert when it’s called. Your code will look like this:

[javascript] <head>
<title>To-Do List App</title>
<script>
function addItem() {
alert("Pick up milk!");
}
</script>
</head>[/javascript]

3) Save your HTML file and open it in your browser. Your button will now pop up an alert when you click on it.

Exit mobile version