JAVASCRIPT

Building the Front End of a List Generator with JavaScript

In this first part of a two-part series, you will go through the process of creating the front end of a simple JavaScript application that generates dynamically list-wrapped links. The code can be copied and pasted to your favorite text editor.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 5

December 05, 2006

TABLE OF CONTENTS:

In consonance with these concepts, the front-end of the list generator will display initially a simple select box where the user can enter the number of links to be created. It will also display a couple of additional input boxes for entering a name for the class attached to the list (if there’s one) and an ID as well.

To clarify the previous explanation, below I included a screen shot which shows the initial state of the list generator’s user interface:

So far, and after examining the previous image, the development process sounds really simple. So let me show now you a simple (X)HTML file. It renders the initial user interface that corresponds to the aforementioned list generator, including the three input boxes that were discussed before. Here is the file in question; take a look at its definition, please:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<title>JavaScript-based List Generator</title>
<style type="text/css">
body{
            padding:0;
            margin:0;
            background:#fff;
}
h1{
            font:bold 24px Arial, Helvetica, sans-serif;
            color:#000;
            text-align:center;
}
form{
            display:inline;
}
textarea{
            width:595px;
}
.elemcontainer{
            width:600px;
            
padding:10px;
            background:#eee;
            margin-left:auto;
            margin-right:auto;
            margin-bottom:5px;
            font:bold 12px Arial, Helvetica, sans-serif;
            color:#000;
            border:1px solid #999;
}
.button{
            width:200px;
            padding:0px;
}
.labelbox,.hrefbox{
            width:200px;
}
</style>
</head>
<body>
<h1>JavaScript-based XHTML List Generator</h1>
<div class="elemcontainer">
<form>
Number of list items <select name="numitems">
<option value="none">None</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
Class <input type="text" name="listclass" />
ID <input type="text" name="listid" />
</form>
</div>
</body>
</html>

As you can see, the above (X)HTML file will display a basic user interface, where web designers can select the number of links to be created (remember that these will be contained in an unordered list), in addition to a pair of input boxes for entering values for the class and ID attributes that belong to the referenced list. That was really simple, wasn’t it?

Okay, at this point, the previous markup code will show only a DIV element, containing only three input boxes. However, I’m sure that you’re wondering how the unordered list will be properly generated after its respective parameters have been entered. I’m glad you asked!

In short, once the appropriate list options have been selected, a new area containing additional input boxes will be displayed in the web document. In this area, users will be able to enter the values for the “href” attributes and the labels that correspond to each link to be generated.

Of course, this process will be neatly performed with a little help from JavaScript and the DOM (after all, as the title of the article claims, this is a JavaScript-based application), thus click on the link below and read the following section to learn how these additional input boxes will be appended to the initial user interface.

Next: Using JavaScript and the DOM >>