HTML & FONTAWESOME

1.Introduction

This is a PinGenerating Website using HTML, CSS, Fontawesome and JavaScript.

2.We shall create a HTML Structure and load it to the Web Browser and learn on how to change its title

3.We shall create a main DIV for that is going to display the clock. We shall also make another DIV that is going to display the warning message.

4.We shall learn on how to add the exclamation triangle using the Fontawesome in the paragraph tag under the ID of ‘warn’.

5.Creation of the Input Tags

We shall look on how to create the input of Safaricom, Airtel and Telkom. We shall add an inline alignment of type ‘center’. We are going to create a main DIV and this is where we shall make it to have a center alignment for all of its items inside. The title of Safaricom will be held inside a paragraph tag and its ID is going to be ‘line’.

The INPUT will contain a placeholder of XXXX-XXXX-XXXX Pattern and they will be disabled to avoid any form of input and just be for the display purpose only. Their IDs are going to be Safaricom, Airtel and Telkom respectively.

Lastly, we shall another input of type Button. The value will be ‘-Generate-’ and the ID will be click.

6.Lastly, we shall create a footer

CSS

7.Styling of the entire HTML Structure using various CSS Features

In this we are going to style the PinGenerate using various styles. We are going to start from the body to the footer tags. We are going to apply styles such as padding, border, margin, background-color, font-family, box-radius, font-size, height, width, color, outline, cursor, hover and many as we can in CSS.

JAVASCRIPT

8.Adding JavaScript Methods in HTML and JavaScript

Adding JavaScript Methods in HTML to the body tag and button input and calling them in JavaScript File.

We shall add an Onload Method and the function will be startTime () to the body tag. We shall also add onclick to the input of type button. The method is going to be start ().We are going to use the Arrow Functions in JavaScript.

We are going to use the new Date () to create and define the date. We shall use the get Hours, get Minutes and getSeconds methods to create the digital clock. We shall use the set Timeout method to make the clock run. We shall use the check Time Method to make the clock have zeros Infront of numbers less than 10.

9.We shall style the clock from Javascript.

10.Generating the Sequency for the pins

We shall set and declare the sequency for the pins of Safaricom,airtel and Telkom.We shall also make the buttons disappear when clicked and appear when refreshed.

We shall make the warning sign appear only when we click on the button and disappear when we refresh the website.

10.Conclusion

Here we are going to conclude this tutorial…..

THANK YOU