Welcome back! This is the last installment of this tutorial. Here we will learn about styling the page. By no means are my styles perfect. So, I want you to mess around as much as you can to make the style of the page your own. I will show you how to use the Bootstrap framework, how to add your own CSS, and how to use SVG images for your background. So, let’s get started.

We will start by introducing Bootstrap and how to setup and use this powerful framework. Before we can use any Bootstrap classes, we must link to the framework. You can follow the Get Started page on the Bootstrap documentation.  Notice, below that between lines 7 and 16 I am setting up the use of the Bootstrap framework and referencing an external stylesheet that we will set up later. Now, I can start using the Bootstrap classes to style my page.  Notice, that I have added the class “form-group” and “form-control” to elements within our form. I also use the class “btn btn-primary” on the submit button. These classes will style these elements based on Bootstrap forms, and buttons. Notice that I am also using some similar classes for the output table. With these Bootstrap table classes, I am making the table bordered, the rows will be of the light theme, and the hover call will change the color of the row when the user hovers the mouse over the element. Pretty cool, right? Bootstrap takes care of a lot of the heavy lifting, and allows us to use simple classes to style the elements.

Now, let’s look at how we can dynamically add classes with our JavaScript that will also allow us to style with Bootstrap.  You will notice some differences that I have made from last weeks JS file. First, notice the if statement on line 12. I put this if statement so that we can show the alert with a different message when the user has failed to supply loan parameters. Notice, inside the if statement that I am setting the class of our alert div to “alert alert-danger”. This is yet another Bootstrap class for alerts.  Using the className method, we can dynamically set the class name, which will set the style on the element. On line 34, we have verified the user input and now set the alert to a different style. Thus, if the users input is invalid the alert will be styled differently than if the input is valid. On line 48, we are using the same technique to style the header of the table. This will make the table header dark, which will contrast to the light theme that we are using for the rows.  Now let’s look at some CSS.

The first part of the CSS is going to deal with setting an SVG for the background image of our page. Go ahead and head over to Hero Patterns and choose an image that you like. I chose the tic-tac-toe for mine. Download the file and put it in the same directory as all your other files (Amortization folder). Now, in VS Code, create a new file named app.css. Notice below, that I am setting the background image of the document body equal to my SVG image. I am also changing the background color. Go ahead and give it a shot and then open it up in Chrome. Notice that the SVG automatically repeats for the entire background. This is one thing that makes SVGs so powerful.

Now, let’s add some animation. The button hover and label hover will activate when the user hovers over the elements with the mouse. We call the transform property  and use scale to scale the image by 10% (*1.1). Next, I added some CSS to the form so that it wouldn’t wash out into the background of the body and some styling to the alert so that it matches the form better. And viola…we now have a page that is functional and styled. Please, mess around with the style on the page and come up with your own. Thanks for joining me, and I hope that you were able to take something away form this tutorial. Stay tuned for more tutorials coming up on CodingFromNull.

One comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s