rNvYPPO

index.html

<div class="stage">
  <div class="display" id="result">
  </div>
  <div class="toprow">
    <button class="button" id="clr">AC</button>
    <button class="button" id="bks"><--</button>
    <button class="button" id="mod">%</button>
    <button class="button" id="div">/</button>
  </div>
  <div class="middlerow">
    <div class="numpad">
      <button class="button" id="nine">9</button>
      <button class="button" id="eight">8</button>
      <button class="button" id="seven">7</button>
      <button class="button" id="six">6</button>
      <button class="button" id="five">5</button>
      <button class="button" id="four">4</button>
      <button class="button" id="three">3</button>
      <button class="button" id="two">2</button>
      <button class="button" id="one">1</button>
    </div>
    <div class="rightcol">
      <button class="button" id="mul">x</button>
      <button class="button" id="add">+</button>
      <button class="button" id="sub">-</button>
    </div>
  </div>
  <div class="bottomrow">
    <button class="button">?</button>
    <button class="button">0</button>
    <button class="button">.</button>
    <button class="button">=</button>
  </div>
</div>

rnvyppo.markdown

rNvYPPO

A Pen by Ahmad Shakeel Khan on CodePen.

License.

script.js

document.getElementsByTagName("h1")[0].style.fontSize = "6vw";

style.css

body{
  background-color:lightblue;
}

.stage{
  display:flex;
  flex-direction:column;
  border-style:dashed;
  border-color:grey;
  padding:5px;
}

.display{
  background-color:white;
  width:160px;
  height:40px;
  border-style:double;
  border-color:grey;
}

.button{
  width:40px;
  height:40px;
  background-color:white;
  border-color:grey;
  color:black;
}

span{
  color:black;
}

.numpad{
  display:flex;
  flex-wrap:wrap;
  width:120px;
  margin:3px;
}

.toprow{
  margin:3px;
  display:flex;
  gap:1px;
}

.rightcol{
  margin-top:3px;
  display:flex;
  flex-direction:column;
}

.bottomrow{
  margin:3px;
  display:flex;
  gap:1px;
}
.middlerow{
  display:flex;
}