Hi everyone, My name is Arinze Calistus. The purpose of this blog is to teach you all you need to know about JavaScript.
What can JavaScript Do?
Well, JS can do alot of things! Here are some of them...
1. Changing Content
Example:
<!DOCTYPE html>
<html>
<head>
<title>Arizon code's</title>
</head>
<body>
<p id="demo"> Hello World! </p>
<button type="button" onclick="myFunc()"> Change Value </button>
<script>
function myFunc() {
document.getElementById("demo").innerHTML = "Hello Everyone!";
}
</script>
</body>
</html>
The example above changes the content of HTML element
That is from "Hello World!" to "Hello Everyone!".
2. Change the Styling of HTML elements
Example:
<!DOCTYPE html>
<html>
<head>
<title> Arizon code's</title>
</head>
<body>
<p id="demo" style="color: gold"> Hello World! </p>
<button type="button" onclick="myFunc()"> Change Style </button>
<script>
function myFunc() {
document.getElementById("demo").style.color = "green";
document.getElementById("demo").style.fontWeight = "bold";
document.getElementById("demo").style.fontSize = "300%";
}
</script>
</body>
</html>
The example above changes the style color from "gold" to "green" when the button is clicked.
And when the button is clicked again is changes the style font-weight to "bold" and style font-size to "300%".
3. Contains the Feature that can show or hide HTML elements
Example:
<!DOCTYPE html>
<html>
<head>
<title> Arizon code's</title>
</head>
<body>
<div id="demo" style="width: 200px; height: 200px; background-color: yellow"> Hello World! </div>
<button type="button" onclick="show()"> Show </button>
<button type="button" onclick="hide()"> Hide </button>
<script>
function show() {
document.getElementById("demo").style.display = "block";
}
function hide() {
document.getElementById("demo").style.display = "none";
}
</script>
</body>
</html>
The example above hides the div element when it is clicked.
All these examples can be practiced,you just have to copy the code snippet and paste it in your text editor.
Thanks for reading this blog. Peace!