Below is the code output:
https://i.stack.imgur.com/avhUu.png
I am attempting to enhance the symmetry of these buttons.
The minus (-) button appears slightly smaller than the plus (+) button even though they have the same padding.
I have experimented with adjusting the values individually for each button, but it seems to be trial and error and results in an unpleasant look.
I suspect that the text symbols + and - may be causing this issue, but I'm not certain.
I searched on Google regarding this problem but could not find any relevant answers, which led me to create this question.
let count = 0
let errorMessage = "*Error Cannot Go Below 0*"
function increment() {
count++;
console.log("The button was clicked");
document.getElementById("countNumber").innerText = count;
document.getElementById("errorMessage").innerText = "";
console.log(count);
}
function decrement() {
if (count <= 0) {
document.getElementById("errorMessage").innerText = errorMessage;
} else {
count--;
document.getElementById("countNumber").innerText = count;
document.getElementById("errorMessage").innerText = "";
}
}* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: 'montserrat';
color: white;
}
body {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
height: 100vh;
background-image: url("https://media.istockphoto.com/videos/loopable-color-gradient-background-animation-video-id1182634371?b=1&k=6&m=1182634371&s=640x640&h=jqdmV3r0EeOvcbeJaQHu4do8s74YvzsxHWymZAf_MNg=");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
h1 {
font-size: 50px;
}
h2 {
font-size: 90px;
}
#decrement {
background-color: rgba(255, 0, 0, 0.589);
/* margin-top: -45px; */
margin-right: 8vw;
}
button {
/* margin: 0px; */
/* margin-bottom: -45px; */
font-size: 90px;
padding: 10px 20px;
border-radius: 10px;
border: 0;
background-color: rgba(172, 255, 47, 0.671);
}
p {
color: red;
font-size: 25px;
font-weight: 800;
margin-top: -10vh;
}
div {
display: flex;
flex-direction: row;
text-align: center;
justify-content: center;
align-items: center;
width: 100vw;
}<!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>Document</title>
</head>
<body>
<h1>Simple Counter</h1>
<p id="errorMessage"></p>
<h2 id="countNumber">0</h2>
<div>
<button id="decrement" onclick="decrement()">-</button>
<button onclick="increment()">+</button>
</div>
<script src="index.js"></script>
</body>
</html>