I added a click effect to my calculator keys but when you click one of them the others move too!! Can you help me?

user3FPk1 0
Viewed 39

Like I've written in the title when you click one of the keys the others in the same column move too. How can I solve this problem? I would like them to stay in their place when you click one key! There should be the "button clicked effect" while respecting the spaces. I hope that the code is clear enough: I divided the calculator in two parts, the screen and the keyboard. You can find my problem in the keyboard section!

Thank you!

EDIT I've just edited the code with the solution that I was looking for! Check the edit for the details!

const keys = document.querySelectorAll('#keys-container div');
keys.forEach(key => key.addEventListener('mousedown', () => key.classList.add('press-div')
));
keys.forEach(key => key.addEventListener('mouseup', () => key.classList.remove('press-div')
));
body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

body > div {
    border: 1px solid black;
}



#display-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 142px;
    width: 440px;
}
#display-border {
    border: 1px solid black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 80px;
    width: 410px;

}
#display {
    border: 1px solid black;
    height: 70px;
    width: 400px;
}




#keyboard {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 420px;
    width: 440px;
}
#keys-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    border: 1px solid black;
    gap: 12px;
    height: 377px;
    width: 410px;
}
#keys-container div {
    display: flex;
    justify-content: center;
    align-items: center;
    /*box-sizing: border-box;*/
    border: 1px solid black;
    border-bottom: 3px solid black;
    height: 60px;
    width: 80px;
    transition: 0.01s;
}
#keys-container .press-div {
    border-bottom: 1px solid black;
    margin-top: 2px;
    
}
<body>

    <div id="display-container">
        <div id="display-border">
            <div id="display"></div>
        </div>
    </div>


    <div id="keyboard">
        <div id="keys-container">
            <div>ON/C</div>
            <div>7</div>
            <div>4</div>
            <div>1</div>
            <div>0</div>
            <div>CE</div>
            <div>8</div>
            <div>5</div>
            <div>2</div>
            <div>&#8901;</div>
            <div>&#177;</div>
            <div>9</div>
            <div>6</div>
            <div>3</div>
            <div>&#61;</div>
            <div>&#247;</div>
            <div>&#215;</div>
            <div>&#8722;</div>
            <div style="height: 136px">&#43;</div>
        </div>
    </div>

</body>

dom-events dom-manipulation flexbox javascript css
2 Answers

In your current CSS border (as well as padding) is not counted in the total element height, this results in jitter when changing the border-bottom value.

Adding * { box-sizing: border-box } to your CSS will solve the problem as border and padding values will now be counted as part of the total element width/height. Reference MDN: box-sizing.

Check the first line of CSS in the the snippet:

const keys = document.querySelectorAll('#keys-container div');
keys.forEach(key => key.addEventListener('mousedown', () => key.classList.add('press-div')));
keys.forEach(key => key.addEventListener('mouseup', () => key.classList.remove('press-div')));
* {
  box-sizing: border-box
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

body>div {
  border: 1px solid black;
}

#display-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 142px;
  width: 440px;
}

#display-border {
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 80px;
  width: 410px;
}

#display {
  border: 1px solid black;
  height: 70px;
  width: 400px;
}

#keyboard {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 420px;
  width: 440px;
}

#keys-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border: 1px solid black;
  gap: 12px;
  height: 377px;
  width: 410px;
}

#keys-container div {
  display: flex;
  justify-content: center;
  align-items: center;
  /*box-sizing: border-box;*/
  border: 1px solid black;
  border-bottom: 3px solid black;
  height: 60px;
  width: 80px;
  transition: 0.01s;
}

#keys-container .press-div {
  border-bottom: 1px solid black;
}
<div id="display-container">
  <div id="display-border">
    <div id="display"></div>
  </div>
</div>

<div id="keyboard">
  <div id="keys-container">
    <div>ON/C</div>
    <div>7</div>
    <div>4</div>
    <div>1</div>
    <div>0</div>
    <div>CE</div>
    <div>8</div>
    <div>5</div>
    <div>2</div>
    <div>&#8901;</div>
    <div>&#177;</div>
    <div>9</div>
    <div>6</div>
    <div>3</div>
    <div>&#61;</div>
    <div>&#247;</div>
    <div>&#215;</div>
    <div>&#8722;</div>
    <div style="height: 136px">&#43;</div>
  </div>
</div>

Rene van der Lende0

Well, when you decrease the border size on the bottom of the key, you decrease the height of the content, moving everything under it upwards to fill the 2px space.

Just keep the space consistent by replacing that 2px border perhaps with a margin instead.

#keys-container .press-div {
    border-bottom: 1px solid black;
    margin-bottom: 2px;
}
skara90
Related