Pin Generator Using HTML, CSS, Fontawesome & JavaScript

Learn on how to make a PinGenerator using HTML5,CSS3 ,Font-awesome and Javascript Step By Step

Ratings 0.00 / 5.00

Pin Generator Using HTML, CSS, Fontawesome & JavaScript

What You Will Learn!

Students to learn how to create HTML structure and link Font-awesome, CSS and J
Students to learn how to use the DIV Tags by adding IDs to them
Students to learn how to add Font-awesome icons in HTML
Students to learn on how to use inline styling in HTML tags
Students to learn on how create input tags and how use it's attributes such as placeholders,id,button and disabled attributes
Students to learn on how to use the footer tag
Students to learn on how to use CSS styling such padding, Fontsize, text-alignment, background, box-shadow, display, fontfamily, height, width, boxradius etc
Students to learn on how to use and add a hover feature
Students to learn on how to add Javascript methods in Html and call them in CSS
Students to learn on how to use the new Date() keyword to make a clock
Students to learn on how to use the checkTime() method to add zeros in front of numbers less than ten
How to style using Javascript methods
How to generate the pin sequence of safaricom, airtel and telkom
How to make an element appear and disappear using HTML, CSS and Javascript

Description

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