Hello everyone, you can learn how to create a Change Font-size using Javascript with Button Webpage in this blog. So if you want to learn then follow all the steps carefully.
Watch Full Tutorial on YouTube
Source Code Of Change Font-size Page
Step 1: Create Index.html File
Create one file with the name index.html and paste the below code in this file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Font Size Change</title>
</head>
<body>
<div class="container">
<div class="buttons">
<button type="button" class="button active" onclick="fontchange(18)">A</button>
<button type="button" class="button" onclick="fontchange(23)">A</button>
<button type="button" class="button" onclick="fontchange(27)">A</button>
</div>
<div class="text">
<p id="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi laboriosam id, corporis, iure necessitatibus dolorem quaerat ab unde veritatis voluptates architecto. In cum sint ad vitae! Voluptate eligendi vitae vel quia dolore ipsa, enim totam soluta molestiae, impedit pariatur libero. Fugiat voluptatem corrupti consequuntur maxime aut fugit qui ex, tempora aperiam, facilis minima totam quia possimus et! Ullam consequatur iusto excepturi deserunt neque sint dolore aut, porro iure architecto veniam magnam voluptatem vel. Quia veritatis, ab quisquam explicabo doloremque atque iusto et! Voluptatum, mollitia pariatur? Officia unde minus expedita, reprehenderit fuga ex obcaecati dolores sapiente voluptatibus quos eius maxime, vitae commodi cupiditate pariatur et sed officiis consectetur eveniet. Porro quidem illo dolorem ut rerum id molestiae! Optio, et in a itaque fugit repellendus, nobis laborum natus tempora neque aliquid maxime quibusdam perspiciatis velit necessitatibus! Iure repellat, fuga deleniti quae veniam alias necessitatibus deserunt, voluptas dolorem labore laborum explicabo excepturi quas.</p>
</div>
</div>
<script>
function fontchange(n){
var paragraph = document.getElementById('para');
paragraph.style.fontSize = n + "px";
}
var buttons = document.querySelector(".buttons");
var button = buttons.querySelectorAll(".button");
for(var i = 0; i < button.length; i++){
button[i].addEventListener('click', function(){
var current = document.getElementsByClassName('active');
current[0].className = current[0].className.replace("active", "");
this.className += " active"
})
}
</script>
</body>
</html>Step 2: Create style.css File
Create one file with the name style.css and paste the below code in this file.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
.container{
padding: 2rem 5rem;
position: relative;
}
.container .buttons{
width: 100%;
position: absolute;
right: 100px;
top: 30px;
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
.container .buttons .button{
padding: 3px 10px;
margin-left: 10px;
display: inline-block;
background: rgb(184, 181, 181);
color: white;
border: none;
outline: none;
border-radius: 4px;
font-size: 18px;
cursor: pointer;
}
.container .buttons .button:nth-child(2){
font-size: 23px;
}
.container .buttons .button:nth-child(3){
font-size: 27px;
}
.container .buttons .active{
background: #444;
}
.container .text{
margin: 5rem 0;
}
.container .text p{
text-align: justify;
font-size: 18px;
transition: 0.2s;
}That's It. if you face any error/problem then comment below or Download this code file and then try again. This file is a Zip file so after download you have to extract it.
