CODEWITHSUNDEEP
htmlcss
Omar Mahmood
Omar Mahmood

Reputation: 23

Buttons uneven and not on the same line

Here the code output:

enter image description here

I am trying to make those appear more symmetrical.

The - button looks slightly smaller than the + button even tho both of those have the same padding

I tried changing the values individually for the button but it's more of a trial and error and just ends up looking unpleasant.

I think the text + and - is causing it but I am not sure

I tried to search on google for this problem and could not find any answers related to this thus created this question.

let count = 0
let errorMes = "*Error Cannot Go Below 0*"

function increment() {
    count++
    console.log("The button was clicked")
    document.getElementById("countNumber").innerText = count
    document.getElementById("errorMessege").innerText = ""
    console.log(count)
}


function decrement() {
    if (count <= 0) {
        document.getElementById("errorMessege").innerText = errorMes
    } else {
        count--
        document.getElementById("countNumber").innerText = count
        document.getElementById("errorMessege").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="errorMessege"></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>

Upvotes: 0

Views: 601

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206121

For the button symbols, use a different font, or rather an SVG icon.
If you use a font than you should know that (depending on the font family) the character will have a baseline align. In such case play with the paddings or with vertical-align until you're happy with the vertical centering.

  • Use gap for the parent flex and min-width for the buttons.
  • Remove the unnecessary alignment margins
  • Remove text-align: center; from the parent, it already uses justify-content
  • Use always a type="button" for non-submit buttons
  • Don't bother users with error messages. Create a smarter UI instead. The disabled attribute might help here.
  • Don't use inline inline on* JavaScript attributes, same as you hopefully don't use inline style attributes. JS and CSS should be in their respective scripts or tags. Use Element.addEventListener instead
  • Don't copy/paste JS code. Reuse it. If you need a method or function to update a UI counter, well, create it and use it.
  • Don't use general div selectors in CSS. Be more specific

let count = 0
const EL_num = document.querySelector("#countNumber");
const EL_dec = document.querySelector("#decrement");
const EL_inc = document.querySelector("#increment");

const updateCount = () => {
  if (count < 0) count = 0;
  EL_dec.disabled = !count;
  EL_num.textContent = count;
};

const inc = () => {
  count++;
  updateCount();
};

const dec = () => {
  count--;
  updateCount();
}

EL_inc.addEventListener("click", inc);
EL_dec.addEventListener("click", dec);

updateCount();
* {
  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;
  min-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;
}

#buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  gap: 1em;
}

#increment,
#decrement {
  font-family: monospace;
  font-size: 5em;
  padding: 0.1em 0.3em 0.2em;
  border-radius: 10px;
  border: 0;
  background-color: rgba(172, 255, 47, 0.671);
  min-width: 1.4em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#decrement {
  background-color: rgba(255, 0, 0, 0.589);
}

#decrement[disabled] {
  opacity: 0.3;
}
<h1>Simple Counter</h1>
<h2 id="countNumber"></h2>
<div id="buttons">
  <button id="decrement" type="button">-</button>
  <button id="increment" type="button">+</button>
</div>

Upvotes: 2

Related Questions