In the last section we spent a significant amount of time improving our JavaScript code. But, it was well worth it to make our code more maintainable and readable. Now that we have our structure, appearance and a bit of functionality at a good starting point, it’s time to turn our attention back to the actual Results area of the webpage.
You can download the completed version of fredscars.html for this module with the completed HTML here.
And see it work here.
Adding results placeholder content
Modify the contents of fredscars.html with the following code, save your file, and refresh your browser:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fred's Cars, Trucks & Jeeps</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<style>
body{
/* margin: 0; */
display: flex;
flex-direction: column;
min-height: 100vh;
}
header{
padding:5;
background-color:black;
color: white;
text-align: center;
font-size: 16pt;
font-weight: bold;
font-family: arial;
}
.spacer {
flex: 1;
}
.buttonContainer {
margin-top: 20px;
}
.button{
width: 100px;
}
.result-column {
border: 1px solid black;
margin: 10px;
}
.result-column-empty {
border: 1px solid white;
marigin: 10px;
}
</style>
<script>
<! -- Keep Script the same. Do not modify -->
</script>
</head>
<body>
<header>
Fred's Cars, Trucks & Jeeps
</header>
<div class="container-fluid my-4 text-center">
<h1>Welcome to Fred's Cars!</h1>
Where you'll always find the right car, truck, or jeep.
Thank you for visiting our site.
<div class="container-fluid mx-0 row"
style="margin-top: 20px;>
<!-- Categories -->
<! -- buttons code is unchanged -->
<!-- Results -->
<div class="col">
<h5 class="bg-dark text-success"
style="padding: 5px;">
Results for <span id="resultsType">ALL</span>
</h5>
<div id="cars" style="display: block">
<div class="row">
<div class="col result-column">
<ul class="list-unstyled" style="text-align:left;">
<li><strong>Status</strong>: [New | Used]</li>
<li><strong>Year</strong>: (XXXX)</li>
<li><strong>Make:</strong></li>
<li><strong>Model:</strong></li>
<li><strong>Color:</strong></li>
<li><strong>Price:</strong></li>
<li><strong>VIN:</strong> (Vehicle Id)</li>
<li>Thumbnail image</li>
</ul>
</div>
<div class="col result-column">
Car 2
</div>
<div class="col result-column">
Car 3
</div>
</div>
<div class="row">
<div class="col result-column">
Car 4
</div>
<div class="col result-column">
Car 5
</div>
<div class="col result-column">
Car 6
</div>
</div>
</div>
<div id="trucks" style="display: block">
<div class="row">
<div class="col result-column">
Truck 1
</div>
<div class="col result-column">
Truck 2
</div>
<div class="col result-column-empty">
<!-- empty col -->
</div>
</div>
</div>
<div id="jeeps" style="display: block">
<div class="row">
<div class="col result-column">
Jeep 1
</div>
<div class="col result-column">
Jeep 2
</div>
<div class="col result-column">
Jeep 3
</div>
</div>
<div class="row">
<div class="col result-column">
Jeep 4
</div>
<div class="col result-column-empty">
<!-- empty col -->
</div>
<div class="col result-column-empty">
<!-- empty col -->
</div>
</div>
</div>
</div>
</div>
</div>
<div class="spacer"></div>
<footer style="background-color:black; color: white; text-align:center">
Contact us: (555)555-5555<br />
121 Fredway St.<br />
Cartown USA
</footer>
</body>
</html>Once you have made the code modifications above and refreshed your browser, clicking on each category button should yield the four screen shots below:
Clicking the Cars category button renders the screen shot above. We’ve replaced the simple Cars heading placeholder:
<div id="cars" style="display: block;">
<h3>CARS</h3>
</div>with two Bootstrap grid rows nested within the car results div in the results column:
Each row contains three Bootstrap columns with car result placeholders.
Earlier in the chapter I talked about the fact that we would eventually have to define the data we want to lay out for each result. The first placeholder column in the upper left of the screenshot above is the beginning of that process, where we start to define the data we want to display for each car or vehicle result and the data type that can be used for each piece of car data.
Vehicle Data
Status: Text – The data values can be either New or Used.
Year: Text – A four digit year (XXXX), For example 1996.
Make: Text – The company that produces the car.
Model: Text – The specific model of vehicle produced by the maker.
Color: Text – Exterior color of the vehicle.
Price: Number – Cost of the vehicle to purchase.
VIN: Text – The Vehicle Identification Number.
Thumbnail: Image – A small image showing a picture of the car result.
Above I’ve laid out the name of each vehicle attribute or property we are interested in displaying to the user, it’s data type and a description of the the property.
Here is the HTML portion of the modified code that creates the two car result rows:
<div id="cars" style="display: block;">
<div class="row">
<div class="col result-column">
<ul class="list-unstyled" style="text-align:left;">
<li><strong>Status</strong>: [New | Used]</li>
<li><strong>Year</strong>: (XXXX)</li>
<li><strong>Make:</strong></li>
<li><strong>Model:</strong></li>
<li><strong>Color:</strong></li>
<li><strong>VIN:</strong> (Vehicle Id)</li>
<li>Thumbnail image</li>
</ul>
</div>
<div class="col result-column">
Car 2
</div>
<div class="col result-column">
Car 3
</div>
</div>
<div class="row">
<div class="col result-column">
Car 4
</div>
<div class="col result-column">
Car 5
</div>
<div class="col result-column">
Car 6
</div>
</div>
</div>This code replaces the code for our old heading placeholder results for the cars category:
<div id="cars" style="display: block;">
<h3>CARS</h3>
</div>Let’s look at the html outline of the modified car results grid.
Car Results Outline
<div id="cars" style="display: block;">
<div class="row">
<div class="col result-column">
<!-- ... col content: data definitions -->
</div>
<div class="col result-column">
Car 2
</div>
<div class="col result-column">
Car 3
</div>
</div>
<div class="row">
<div class="col result-column">
Car 4
</div>
<div class="col result-column">
Car 5
</div>
<div class="col result-column">
Car 6
</div>
</div>
</div>
Here we have set up a nested Bootstrap Grid with two rows within the Results column itself. Each row has three columns in order to hold three car results in each row. We have also added a new class in the style element at the top of the code file and applied the new CSS class to each column. The new style looks like this:
.result-column {
border: 1px solid black;
margin: 10px;
}This css class tells each car result that it will be enclosed by a one pixel solid black border and given a margin of 10 pixels both vertically and horizontally in order to evenly space out all of the results.
Since we are not defining the column sizes of each column (we are using col implicitly rather then col-4 explicitly), and Bootstrap rows are twelve columns long, and we have three columns defined in each row, each column will take up four column spaces to fill the row.
12 = 3 x 'X'becomes:
12 = 3 X (4) // Bootstrap figures out 'X' should be four.Notice in the first column of the first row of the new car results outline described above I put the following comment:
<!-- ... col content: data definitions -->This is where we have started to define the vehicle data.
The second two columns of the first row just have place holder text as content: (Car 2, and Car 3).
The second row has place holder text for all three columns. (Car 4, Car 5, and Car 6).
More on HTML Elements and Attributes
Let’s also take a quick look at the html and css in the upper left car results column before moving on to the trucks html outline and screenshot. Here is the portion of html where we define the data we want to lay out and also the beginnings of the look and feel of that data:
<div class="col result-column">
<ul class="list-unstyled" style="text-align:left;">
<li><strong>Status</strong>: [New | Used]</li>
<li><strong>Year</strong>: (XXXX)</li>
<li><strong>Make:</strong></li>
<li><strong>Model:</strong></li>
<li><strong>Color:</strong></li>
<li><strong>Price:</strong></li>
<li><strong>VIN:</strong> (Vehicle Id)</li>
<li>Thumbnail image</li>
</ul>
</div>In the above code we have taken out the text, “Car1” as the placeholder and replaced it with an html <ul> element. ul stands for unordered list. So in affect we are listing out the properties of a vehicle we want to show. The other type of lists in html are called ordered lists (ol) and description lists (dl). You can read more about unordered, ordered, and description lists at w3schools.
Unordered lists in html usually list out items with bullets in front of them. We have added the “list-unstyled” class to the ul element to prevent the bullet points from showing up and also added an in-line style to left align all of the vehicle properties within the ul element.
Within the unordered list we have listed out our data definitions in li list item elements. The name of each property we want to display is shown in bold using the <strong> tag. You can use the <b> bold tag but different browsers can render tags in different ways. Later standards of html recommend using tags such as strong and emphasis and let the browser decide how to render them rather then try to make them look the same across all browsers.
Clicking the Trucks category button will render the following screen shot.
Let’s take a look at the html outline for the truck results.
<div id="trucks" style="display: block;">
<div class="row">
<div class="col result-column">
Truck 1
</div>
<div class="col result-column">
Truck 2
</div>
<div class="col result-column-empty">
<!-- empty col -->
</div>
</div>
</div>The trucks Bootstrap Grid is very similar to the cars grid except that there is only one row and the third column is empty. This is how a row of results would look if there were only two vehicles to show for a category. We have created a second new css class called “result-column-empty and applied it to the empty column:
.result-column-empty {
border: 1px solid white;
margin: 10px;
}This style is basically the same as the result-column css class except that the border is white rather then black to blend in with the background and make it look as if there is no result column taking up that space. But without the class and the one pixel border applied, the column spacing would be applied unevenly compared to other rows.
Clicking on the Jeeps category button renders the screen shot below.
The following is the html code outline for the Jeep results:
<div class="row">
<div class="col result-column">
Jeep 1
</div>
<div class="col result-column">
Jeep 2
</div>
<div class="col result-column">
Jeep 3
</div>
</div>
<hr />
<div class="row">
<div class="col result-column">
Jeep 4
</div>
<div class="col result-column-empty">
<!-- empty col -->
</div>
<div class="col result-column-empty">
<!-- empty col -->
</div>
</div>The Jeeps results html outline is similar to the first two result outlines but Jeeps has two rows and the second row has two empty columns at the end.
And finally, clicking on the All categories button renders the following screen shot:
We have already examined html outlines for all three result sets in the screenshot above. When the user clicks the ALL button, the onclick event for that button fires and makes all three result sets visible. We set up the function for the event in the earlier JavaScript portions of this chapter.
What’s Next
In the next section we will lay out real vehicle data in all of the placehoder columns and learn about the HTML image element so we can add thumbnail images to each result.