Youtube link - click here
Source code :
HTML:
<!DOCTYPE html>
<html>
<head>
<title>
font size
</title>
<link href="fontsize.css" rel="stylesheet">
<script src="fontsize.js"></script>
</head>
<body>
<div class="container">
<table id="table" border="1">
<tr>
<td id="minus" class="items" onclick="decrease()">
<a href="https://icons8.com/icon/SqI0tEwvS9NO/minus" class="ima">Minus icon by Icons8</a>
<img src="https://img.icons8.com/emoji/48/000000/minus-emoji.png" />
</td>
<td id="number" class="items">16</td>
<td id='plus' class="items" onclick=increase()>
<a href="https://icons8.com/icon/K0l4dwcsMaJa/plus" class="ima">Plus icon by Icons8</a>
<img src="https://img.icons8.com/emoji/48/000000/plus-emoji.png" />
</td>
</tr>
</table>
<div id='display'>
Hello, Find the color palette for your next project
</div>
</div>
</body>
</html>
CSS:
.container {
display: flex;
width: 75%;
height: 100vh;
margin: 0px auto;
justify-content: center;
align-items: center;
border: 1px solid red;
}
#table {
border-collapse: collapse;
margin: 10px;
}
.items {
padding: 10px;
}
a {
display: none;
}
#display {
width: 75%;
border: 1px solid blue;
background-color: #eaf6f6;
}
#minus>img,
#plus>img {
width: 10px;
height: 10px;
}
JS:
var size = 16;
function increase() {
if (size >= 0) {
size++;
document.getElementById('display').style.fontSize = size + "px";
document.getElementById('number').innerHTML = size;
}
}
function decrease() {
if (size > 0) {
size--;
document.getElementById('display').style.fontSize = size + "px";
document.getElementById('number').innerHTML = size;
}
}
Post a Comment