HTML & FONTAWESOME
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
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.
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.
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.
Here we are going to conclude this tutorial…..
Top Udemy courses from 13.99$ when you first visit Udemy.