How to change background color, Hiding blog and how to use Request and Response object with Java Script | Know About

Do you know how to use HTML, CSS and JS ?

If you are a beginner in Front End Development you must have read the post at least once. Have you ever wondered how to solve small coding problems ? Have you ever wanted to rapidly increase your coding skills ? When I am writing blog posts about coding, I am learning a lot. If you want to learn a lot or If you want to be a developer you have to work hard and make time for practice everyday.

CLICK THE BUTTONS TO CHANGE THE BACKGROUND

Done by creating functions for every button onclick. Getting Div's ID by getElementById and creating a class name from implementing that in CSS we can change the background colour.

1. Firstly, you have to create a button using html and set an onclick event for that.

input type="button" value="BLACK" onclick="black()" id="b"

2. In the second place you have to create a function in javascript inside that you have to get the ID and create a class name for that.

function black() { document.getElementById("bd").className = "black"; }

3. Finally, you have to style it with CSS from the class name that you have created using javascript.

.black { animation: toblack 4s forwards;<br> }

REQUEST AND RESPONSE USING JS

Enter your name :

Password :

Enter your birth year :

Please re-enter your password :

By filling details and submitting this form you are going to request and it will validate and give you Response.

1. Firstly, you have to create a form using form tag and then you are going to create required fields like set ID, type, name and buttons onclick inside the input tag.


Enter your name : input type="textbox" id="txt1" value=" " Password : input type="password" id="pass1" value=" " Enter your birth year : input type="number" id="txt2" value=" " Please re-enter your password : input type="password" id="pass2" value=" " input type="button" id="btn1" value="Submit" onclick="submit()"

2. To display the result on the screen using an onclick event.
Next, you are going to create a function using if conditions in javascript.


function submit(){ if(document.getElementById("pass1").value== ""){ alert("please enter password"); } else if(document.getElementById("txt2").value.length != 4){ alert("birth year always be 4 digits"); } else if(document.getElementById("pass2").value== ""){ alert("please enter password confirmation"); } else if(document.getElementById("txt1").value== ""){ alert("please enter your name"); } else if(document.getElementById("txt2").value== ""){ alert("please enter your birth year"); } else if(document.getElementById("pass1").value==document.getElementById("pass2").value){ var d = new Date(); var ages = d.getFullYear(); var age = ages - txt2.value; if(age > -1){ alert("hi"+" "+txt1.value); alert("your age is"+ " " +age); } else alert("Enter your birth year correctly") } else{ alert("please enter correct password"); } }
Thus the Request, Response and Validation using Java script is created and corresponding functions are verified.

CLICK THE BUTTON TO HIDE

Done by creating functions for every button onclick. Getting Div's ID by getElementById and creating a class name from implementing that in CSS we can hide this post.

1. Firstly, you have to create a button using html and set an onclick event for that.

input type="button" value="HIDDING BUTTON" onclick="hide()" id="b"

2. In the second place you have to create a function in javascript inside that you have to get the ID and create a class name for that.

function hide() { document.getElementById("sa").className = "hide"; }

3. Finally, you have to style it with CSS from the class name that you have created using javascript.

.hide { animation: tohiding 10s forwards; transition: all 10s ease; }

This is just a page to show how to implement an onclick event into css with the help of Javascript. In the next session we are going to create a page with Blinking page, changing text colour and Hit counter using Javascript. How do you feel about this post? If it's good , give me a thumbs up !!!