In the last few modules, we started the car1-details.html page, made the header and footer reusable, and performed some administrative, configuration, and house cleaning tasks. Now let’s turn our attention back to finishing up and filling in the details for car1.
Below is a screen shot of what the “Car 1” Details Page will look like at the end of this module.
You can see a working version of the above details page at the following link:
- Preparing for the Module
- Modify the code
- Finding the jQuery Library
- Finding the Bootstrap Bundle
- The Bootstrap Carousel code
- Bootstrap Indicators
- The Carousel Slide-Show
- Bootstrap Carousel Left and Right Buttons
- Showing Details using Bootstrap Tables
- Bootstrap Carousel JavaScript
- The Details page Custom CSS
- What's Next
Preparing for the Module
The screenshot above shows a details page for Car 1 of the car results on fredscars.html, a 2021 Dodge Challenger. At the top is a common feature of detail pages called a Carousel. It is a kind of slide show that “slides” through a collection of images or text. Here I used the Bootstrap 5 Carousel component plugin. The Carousel slides through three images at an interval of every two seconds which I changed from a default of every five seconds. It has left and right arrows to scroll through the images manually and three buttons at the bottom called indicators shaped like thick horizontal lines which let you select any one of the slides. There are also two buttons called Pause and Play which pause the slide show and restart it respectively.
As with fredscars.html, the details page relies on image resources for it’s slide show.
You can download all the html code and the images it depends on in the screenshot above from the following link so your details page can access the needed images and resources. Also if you want you can cut and paste the code from the downloadable car1-details page file so you don’t have to type in the whole example. Or you can look at the downloaded code and compare to your own file and fix any errors.
Remember you will need to extract the code the same way you did in module 9 in the section, Extract the code.
Also remember to run your code through the IIS Webhost the way we set it up in the previous module, module 10b, in the section, Setting up IIS (Internet Information Services).
Modify the code
Modify the contents of car1-details.html with the following code, save your file, and refresh you browser. (You may want to read the sections, “Finding the jQuery Library“, and “Finding the Bootstrap Bundle” before typing in the code. It will show you how to cut and paste in the long script tags for jQuery and the Bootstrap Bundle for the Carousel component):
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Car 1 Details</title>
<script src="https://www.w3schools.com/lib/w3.js"></script>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous">
<!-- Site CSS -->
<link rel="stylesheet" href="css/site.css">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"></script>
<!-- Bootstrap Bundle -->
<!-- adding defer keyword to script tag fixes interval: 2000 -->
<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<script>
window.onload = function () {
$('#cars-carousel.slide').carousel({
interval: 2000,
});
$( "#btn-pause" ).click(function() {
console.log("pausing carousel.");
pauseCarousel()
});
$( "#btn-play" ).click(function() {
console.log("starting carousel.");
playCarousel()
});
function pauseCarousel() {
console.log("pauseCarousel called");
$("#cars-carousel").carousel('pause');
}
function playCarousel() {
console.log("playCarousel called");
$("#cars-carousel").carousel('cycle');
}
}
</script>
<style>
#cars-carousel
{
border:1px solid black;
width: 90%;
margin:auto;
}
img {
width: 70%;
}
#details {
width: 90%;
}
.carousel-control-prev-icon,
.carousel-control-next-icon,
.carousel-indicators
{
background-color:black;
}
</style>
</head>
<body>
<div w3-include-html="include/header.html"></div>
<div class="container py-4">
<h3 class="text-center bg-primary py-2" style="border:1px solid black;">
2021 Dodge Challenger
</h3>
<!-- Bootstrap Carousel -->
<!-- Adding data-bs-pause="false" fixes Pause button -->
<div id="cars-carousel"
class="carousel slide"
data-bs-ride="carousel"
data-bs-pause="false">
<!-- Indicators/dots -->
<div class="carousel-indicators">
<button id="btn-pause">Pause</button>
<button id="btn-play" class="mx-2">Play</button>
<button type="button" data-bs-target="#cars-carousel" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#cars-carousel" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#cars-carousel" data-bs-slide-to="2"></button>
</div>
<!-- The slideshow/carousel -->
<center>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/cars/details/car1/car1-details-1.jpg" alt="Car One" />
<div class="carousel-caption">
<h3>Sexy Scoop</h3>
<p>on the hood!</p>
</div>
</div>
<div class="carousel-item">
<img src="images/cars/details/car1/car1-details-2.jpg" alt="Car Two" />
<div class="carousel-caption">
<h3>Muscular Back View</h3>
</div>
</div>
<div class="carousel-item">
<img src="images/cars/details/car1/car1-details-3.jpg" alt="Car Three" />
<div class="carousel-caption">
<h3>Luxerious Interior</h3>
</div>
</div>
</div>
</center>
<!-- Left and right controls/icons -->
<button class="carousel-control-prev" type="button" data-bs-target="#cars-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#cars-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
<!-- end Bootstrap Carousel -->
<div id="details" class="container">
<h2 class="mt-4">Details</h2>
<table class="table table-primary table-striped">
<tr>
<td><b>Condition</b></td>
<td>New</td>
<td><b>Mileage</b></td>
<td>0</td>
</tr>
<tr>
<td><b>Interior Color</b></td>
<td>Black</td>
<td><b>Exterior Color</b></td>
<td>Frostbite</td>
</tr>
<tr>
<td><b>Drivetrain</b></td>
<td>Rear-Wheel Drive</td>
<td><b>Transmission</b></td>
<td>Automatic</td>
</tr>
<tr>
<td><b>Fuel</b></td>
<td>Gas</td>
<td><b>Engine</b></td>
<td>6.4L V8 16V MPFI OHV</td>
</tr>
<tr>
<td><b>VIN</b></td>
<td>2C3CDZFJ8MH631199</td>
<td><b>Stock Number</b></td>
<td>MH631199</td>
</tr>
</table>
<div class="d-flex justify-content-center">
<button class="btn btn-primary">Order</button>
</div>
</div>
</div>
<div class="spacer"></div>
<div w3-include-html="include/footer.html"></div>
<script>
w3.includeHTML();
</script>
</body>
</html>Now type http://www.fredscars.com/car1-details.html into your browser and it should look similar to the screenshot at the beginning of this module.
Well, there is a considerable amount of new code here. Let’s get started and inspect the new features!
At the top of the header we have included two new script tags with their src attribute pointed to the jQuery library and the bootstrap bundle.
jQuery is another client library like Bootstrap. But instead of being a client-side CSS library that works across all browsers like Bootstrap, jQuery is a client-side JavaScript library that solves a lot of the same problems for JavaScript as Bootstrap does for CSS, like making JavaScript easier to use and ensuring all of your JavaScript works the same way in all browser types and versions.
The Bootstrap bundle file is needed in order for the Bootstrap Carousel (and other Bootstrap components) to work. Notice the defer keyword in the Bootstrap bundle script tag. Without this keyword included in the script tag you can get funny behavior in the Carousel component. For instance, the interval setting of 2000 (2 seconds) in the carousel configuration code will not work correctly.
Finding the jQuery Library
Like the bootstrap.min.css link, the jQuery.min.js script tag would be very cumbersome to type in. Especially the value for the integrity attribute. Here is an easy way to get this script link into your code.
Visit https://code.jquery.com.
Click on the minified link for jQuery 3.7.1
Click the “Copy to clipboard!” button.
Now place your cursor in your text editor in the car1-details.html file where the script tag should go and press
Ctrl-V
to paste the code into the file.
Finding the Bootstrap Bundle
To find the Bootstrap bundle file and insert it into your code visit the Bootstrap Download section on the “Getting Started” page and scroll down to where it says “CDN via jsDelivr” at https://getbootstrap.com/docs/5.3/getting-started/download/#cdn-via-jsdelivr.
Click the “Copy to clipboard” button.
Now paste the bundle link into your code using the same procedure above for jQuery. But keep in mind one sticky point here. The “Copy to clipboard” button copies both the Bootstrap CSS and JS files. We have already imported the Bootstrap CSS link in an earlier module so we only need the Bootstrap JS link. So first paste the two lines into a text editor like notepad. Then copy only the script element tag for the Bootstrap bundle JS file. And now paste that into your code.
And finally, do not forget to include the defer keyword in the script tag for the reasons explained in the “Modify the code” section above. Script tags usually go at the bottom of the HTML after the body tag. But since we are referencing the Bootstrap bundle script tag at the top of the file, the defer keyword defers executing the script file until after the HTML file has been loaded and parsed. To read more about how an external script can be executed check out the w3School’s HTML <script> Tag documentation.
Here is the final code you should paste into car1-details.html.
<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>The Bootstrap Carousel code
Let’s scroll down and take a look at the actual Bootstrap Carousel html between the
<!-- Bootstrap Carousel -->and
<!-- end Bootstrap Carousel -->comments.
The Bootstrap Carousel is contained in a div that looks like this:
<div id="cars-carousel"
class="carousel slide"
data-bs-ride="carousel"
data-bs-pause="false">Every carousel has to have a unique id. Ours is “cars-carousel”. The carousel class tells the html file and Bootstrap that this is a carousel component. And the slide class says to use a slide transition effect when switching images. data-bs-ride=”carousel” instructs Bootstrap to start the slide-show immediately after the page loads. And data-bs-pause="false" tells Bootstrap that hovering over the carousel won’t pause it. You can read more about these settings in the options section of the Bootstrap Carousel documentation.
Bootstrap Indicators
Within the Carousel <div> container is the Indicators section.
<!-- Indicators/dots -->
<div class="carousel-indicators">
<button id="btn-pause">Pause</button>
<button id="btn-play" class="mx-2">Play</button>
<button type="button" data-bs-target="#cars-carousel" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#cars-carousel" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#cars-carousel" data-bs-slide-to="2"></button>
</div>The carousel-indicators class, as it’s name indicates, tells bootstrap that this is the indicators section of the carousel. There are three buttons at the bottom with a data-bs-target attribute. These are the thick horizontal line shaped buttons at the bottom of the slide-show of the carousel. On all three buttons data-bs-target points to the id of the carousel <div> container, “cars-carousel”. And each of the three buttons has a data-bs-slide-to attribute specifying which slide clicking the button should take the user to; slide 0, slide 1, or slide 2. The numbering starts at 0. So think of slide 0 as the first slide, slide 1 as the second slide, and slide 2 as the third slide.
The two buttons at the top of the indicators section are pause and play buttons to pause and restart the slide-show. These two buttons require some JavaScript in order to work which we will look at coming up in a following section. The play button has the bootstrap mx-2 class to give some horizontal spacing of two pixels between the two buttons and between pause/play and the indicator buttons.
The Carousel Slide-Show
The actual slide-show is contained within a <div> that has the Bootstrap carousel-inner class applied to it.
<div class="carousel-inner">The <div> elements containing the slides are then nested within the carousel-inner <div>.
Let’s take a look at the first slide.
<div class="carousel-item active">
<img src="images/cars/details/car1/car1-details-1.jpg" alt="Car One">
<div class="carousel-caption">
<h3>Sexy Scoop</h3>
<p>on the hood!</p>
</div>
</div>Each slide has a carousel-item class applied to it’s containing <div>. This makes the div one of the slides in the slide-show. The above <div> slide also has the active class applied to it. One of the slides must contain this class in order for the slide show to start.
The first element in the carousel-item <div> is an image element pointing to one of our car1 detail images. The second element is a <div> with the carousel-caption class applied to it making it a caption for the slide with white text. In the slide example above we have an <h3> heading element and a <p> element both containing text for the slide’s caption which ends up looking like the screen-shot below.
Bootstrap Carousel Left and Right Buttons
The left and right buttons are represented by a left chevron and right chevron respectively and are laid out after the following comment:
<!-- Left and right controls/icons -->The following is what the left button looks like in the html:
<button class="carousel-control-prev"
type="button"
data-bs-target="#cars-carousel"
data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>The button element above has the carousel-control-prev class applied to it, the data-bs-target class as with the indicator buttons pointing to the carousel’s main containing <div>, and the data-bs-slide attribute with a value of prev instructing the slide-show to go to the previous slide. The data-bs-slide attribute is similar to the data-bs-slide-to attribute on the indicator buttons which instruct the carousel to go to a specific slide in the slide-show.
The <button> element contains a <span> element with the carousel-control-prev-icon class which instructs bootstrap to show the default left chevron icon for the previous button.
The following code is for the next button and works the same way as the previous button but with every instance of “prev” replaced with “next”:
<button class="carousel-control-next" type="button" data-bs-target="#cars-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>Showing Details using Bootstrap Tables
Below the Bootstrap Carousel component we show the actual details of the car in an HTML Table Element. This uses a new HTML element for us. The table element is used to lay out actual data rather then the Bootstrap grid system using div elements we looked at earlier to help structure our page in columns and rows. HTML table elements contain table row tr elements. And tr elements contain table data td elements which contain column data within the table rows. This is what the details section looks like on our page.
We start off defining a Bootstrap Container div to hold our details section.
<div id="details" class="container">Within the container div we have a heading two <h2> element to show the heading text, “Details”. The <h2> element has the Bootstrap mt-4 class applied to separate the details section 4 pixels from the section before it, which was the carousel.
<h2 class="mt-4">Details</h2>After our heading comes the html table holding our actual car details. The table element looks like this:
<table class="table table-primary table-striped">There are three Bootstrap classes applied to the <table> element. We apply the table class to tell Bootstrap to start applying table styling or in other words, to opt in to Bootstrap table styles. Without the table class other classes like table-primary and table-striped will not work. (Buttons work the same way. Without the btn class, classes like btn-primary and btn-large will not work.) The table-primary class makes the table background blue and the table-striped class stripes the table rows with two alternating tones of blue, one darker and one lighter. If we did not include the table-primary class, the alternating rows would be two alternating shades of gray by default.
The <table> elements contain table rows:
<tr>And the <tr> elements contain table data in <td> elements.
Let’s look at the first row of our details:
<tr>
<td><b>Condition</b></td>
<td>New</td>
<td><b>Mileage</b></td>
<td>0</td>
</tr>In the first <td> element or the first column of the row, we have the text, “Condition” wrapped in HTML Bold tags <b> emphasizing the text in order to indicate this is the heading for the next column (the second column of the row) which contains the text value, “New”. The third <td> or the third column of the row contains the text, “Mileage”, again wrapped in bold to indicate it is heading text for the fourth and final column with a text value of, “0”.
I formatted our details table here in this way with the heading data in every <td> element of the first and third columns because this format makes more sense then another format I show in the following section.
Tabular Data vs Aesthetic Data
Normally you have many rows of data in a table which looks something like this:
In the above screenshot there are three headers across the top of the table; “First Name”, “Last Name”, and “Social”. Each row below the header row contains data for the headers.
So the first row contains the data “Joe” for First Name. “Brown” for Last Name, and “324-75-8374” for Social.
The following html is the code that I used to render this table:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example Table</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous">
</head>
<body>
<table class="table table-primary table-striped">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Social</th>
</tr>
<tr>
<td>Joe</td>
<td>Brown</td>
<td>324-75-8374</td>
</tr>
<tr>
<td>Sam</td>
<td>Miller</td>
<td>225-87-7382</td>
</tr>
<tr>
<td>Tonya</td>
<td>Smith</td>
<td>187-65-4827</td>
</tr>
</table>
</body>
</html>example-table.html
Notice in the top table row <tr> we have used table header <th> elements to emphasize that the text is header text for the columns rather then wrap the text in html bold <b> tags.
So for our car details table we have used the html table elements to structure the look and feel of our data. In the example-table above, we are using the html table elements to show true tabular data, or rows of data.
The rule of thumb is if you are trying to show true tabular data use html tables. If you are laying out the structure of an html page or a section on that page use <div> elements and a grid system like the Bootstrap grid system to create that structure.
I simply took the liberty of using the html table and Bootstrap table classes to create a look and feel for our details page that fits our project.
Bootstrap Carousel JavaScript
The Bootstrap Carousel component comes with properties, methods, and events you can read about on the Bootstrap Carousel page in the usage section.
Inside the script element we have three jQuery statements the first of which uses a software pattern called the options pattern and two JavaScript functions both of which call one jQuery Statement. jQuery statements start with a dollar sign “$” char and require a script tag pulling in the jQuery library which we have already added to make Bootstrap components work.
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"></script>Let’s first take a look at the three jQuery statements at the top of the script element.
The first jQuery statement is used to configure the Carousel component. It sets the interval option to 2000, meaning the Carousel transitions to a new slide every two seconds.
$('#cars-carousel.slide').carousel({
interval: 2000,
});In the above code is a jQuery statement starting with the required “$” char followed by parenthesis with a selector inside.
This is the same type of selector we have been using in our css rules to target elements and apply css property values. Here the selector starts with a “#” sign indicating we want to select an HTML Element by it’s id. And the id of the element we want to select is “cars-carousel”. In addition we specify the “cars-carousel” element we select should also have the class slide applied to it.
Our main cars-carousel containing <div> fits all the criteria of the above selector. So, in affect this part of the statement:
$('#cars-carousel.slide')selects our “cars-carousel” <div> and acts as a pointer to that html element in memory that we can access.
From there we access the carousel component itself:
$('#cars-carousel.slide').carouselIn the next part of the statement we set up a software pattern called the options pattern where we can set the interval option of the carousel component.
$('#cars-carousel.slide').carousel({
});The options pattern looks like this:
{
property: value,
property: value
}Above is a set of parenthesis containing a set of open and close squiggly ({}) characters, and within those squiggly characters we specify property/value sets. It is within these characters we can set the carousel properties. The options pattern looks very similar between JavaScript and C#. We will be visiting C# plenty in the following chapters to see more examples of this pattern.
Inside of the squiggly characters is a property/value set:
interval: 2000Here, we have changed the default of interval from a slide change every five seconds to every two seconds.
This is a lot of information to wrap your head around in a beginning introductory chapter. Don’t worry if you don’t understand everything yet. It will come with practice. But it’s a good time to start getting familiar with these concepts before we move on to more advanced chapters. And once you are comfortable with this pattern you will see and use it over and over as it is ubiquitous in coding these days.
The second jQuery statement looks like this:
$( "#btn-pause" ).click(function() {
console.log("pausing carousel.");
pauseCarousel()
});In the above code we are selecting the <button> element whose id is “btn-pause” and accessing that element’s click property:
$( "#btn-pause" ).clickFrom there we assign a function to the click property:
function() {
console.log("pausing carousel.");
pauseCarousel()
}Now when a user clicks the Pause button, the above function will fire and call our pauseCarousel function to pause the slide show.
Another way to add the click event to the button would be to define the click event right on the button itself.
<button id="btn-pause" onclick="pauseCarousel();">Pause</button>Using a jQuery statement to apply the click function separately from the button element rather then directly on the button element itself as in the above statement is called unobtrusive JavaScript. Using unobtrusive JavaScript enables you to read your html more easily and use html only for what it is intended to do; define the structure of your webpage. This way the html is not cluttered up with extraneous JavaScript.
When you click the Pause button there is not much feedback that the slide-show has stopped. So I inserted a console.log statement into the Pause Button’s click function.
console.log("pausing carousel.");Remember we can always turn to the web development tools included with most modern browsers to debug our code and make sure things are happening as we think they are. Hit F12 on your keyboard to open up your web development tools in the browser, click the Pause button on the Carousel slide-show, and you should see the statement “pausing carousel” written out in the console tab.
The final jQuery statement defines the click event for the Play button and is very similar to the Pause button.
$( "#btn-play" ).click(function() {
console.log("starting carousel.");
playCarousel()
});In the above code we access the play button element and assign a function to it’s click property and use that function to call the our “playCarousel” function and log a debugging statement to the console.
Let’s now take a quick look at the two JavaScript functions we defined at the bottom of the script element and wrap up the JavaScript section.
The first function we defined is pauseCarousel which we called from our second jQuery statement above.
function pauseCarousel() {
$("#cars-carousel").carousel('pause');
}This function uses a single jQuery statement to target our Carousel component and pause it using one of the methods defined in the methods section of the Bootstrap Carousel documentation.
The method we used is called pause.
The second function we defined is playCarousel which we called from our third jQuery statement above.
function playCarousel() {
$("#cars-carousel").carousel('cycle');
}This function again uses a single jQuery statement to target our Carousel component using another method defined in the methods section of the Bootstrap Carousel documentation and restart the slide-show from its paused state.
The method we used is called cycle which, “Cycles through the carousel items from left to right.”
The Details page Custom CSS
Let us now turn our attention to the CSS defined in the <style> section.
We have defined four styles, or rules.
The cars-carousel style
The cars-carousel style looks like this:
#cars-carousel
{
border: 1px solid black;
width: 90%;
margin: auto;
}In the above css rule, the selector portion selects a div by its id of “cars-carousel”, our main carousel containing div.
The rule applies values to three css properties of the retrieved <div>.
- It creates a border with a thin one pixel, solid black line creating a nice aesthetic square box for the carousel, it’s images in the slide-show, and its buttons to sit in.
- It sets the width of the carousel containing div to 90 percent of it’s parent containing div. So the carousel has a little space on the left and right and is not quite as wide in width as the header above it with the text “2021 Dodge Challenger”.
- “margin: auto” centers the carousel so there will be space on the left and right under the header and not have the carousel left justified with all the left over space sitting on right.
The img tag style
The img tag style targets all of the images in the slide-show and sets their widths to 70 percent so they only takes up 70% of the containing carousel parent div and there will be room for the left and right buttons.
The img style looks like this:
img {
width: 70%;
}The details style
The details styling rule is very similar to the cars-carousel rule in that it selects it’s element to style by id and sets the width to ninety percent of it’s parent containing div, again the main carousel div. The details styling rule looks like the following:
#details {
width: 90%;
}In the above css code, we select the div containing our details header and details table by the id of “details” and apply the value of 90% to the width property. Now the details section’s left and right borders will more nicely align with the carousel component’s containing div above it.
Carousel button styling
The carousel buttons by default are white and so is the background on two of our three images. This creates a bad contrast and the user would barely be able to see the buttons if at all.
So I created a css rule to make the background of the indicators section and the left and right buttons black. The rule looks like the following.
.carousel-control-prev-icon,
.carousel-control-next-icon,
.carousel-indicators
{
background-color: black;
}In the above css code we are seeing a couple of techniques for the first time.
To begin with, it has multiple selectors separated by commas. This means the rule specified between the squiggly chars, {} should be applied to all of the selectors in the comma delimited list.
Secondly, instead of targeting the elements on which to apply the rule by a hash tag, #, to specify the id, or the name of an html tag like img, we are prefixing each selector with a dot, (.). This specifies to target each element in the html file with the class name following the dot.
So in the above rule we are targeting the previous button’s <button> element because it has the class “carousel-control-prev“, the next button’s <button> element because it has the class “carousel-control-next, and the whole carousel indicators section because it’s containing div has the “carousel-indicators” class.
Finally the rule itself specified to make the background of each of these elements black.
What’s Next
Wow! We learned a lot in creating the Details page. But that’s how development goes. You never really know what you are going to need and what you are going to learn until you get into it.
In the next section we are going to put it all together and link to the details page from the car1 result on the main page.