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 BUTTON TO CHANGE THE COLOR
Done by creating a function for buttons onclick. Getting Div's ID by getElementById and creating a class name from implementing that class name in CSS we can change the colour.
1. Firstly, you have to create a button using html and set an onclick event for that.
input type="button" value="TEXT COLOUR" onclick="txtcolor()" 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 txtcolor() {
document.getElementById("g1").className = "txtcolor";
}
3. Finally, you have to style it with CSS from the class name what you have created using javascript.
.txtcolor {
animation: colortxt 4s forwards;
}
HIT THE BUTTON TO COUNT
1. You have to create a button using html and set an onclick event for that.
input type="button" value="CLICK ME" onclick="debug('pushed \t'+ ++n + 'times,');"
2. And then you have to create a new window to show the count using window.open();
3. Everytime you push that button it makes a count as shown in the below image.
Thus the Hit Counter using Java Script has been created.
CLICK THE BUTTON TO BLINK
Done by creating functions for every buttons onclick. Getting Div's ID by getElementById and creating a class name and from implementing that in CSS we can blink the page.
1. Firstly, you have to create a button using html and set an onclick event for that.
input type="button" value="START BLINK" onclick="sblink()" id="b"
input type="button" value="BLINK FAST" onclick="blinkf()" id="b"
2. In the second place you have to create a function in javascript inside that you have to get the ID by getElemetById and
create a class name for that.
function blink() {
document.getElementById("bs").className = "blink";
}
3. Finally, you have to style it with CSS from the class name what you have created using javascript.
.blink {
animation: toblink 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 previous session we have already created an page with Hiding page, changing background colour and Request and Response object using Javascript. How do you feel about this post? If it's good, give me a thumbs up !!!
0 Comments