<body>
<div class ="parent">
  <div id="display" class="display1">
  </div>
   <div class="button">C</div>
 <div class="button">&larr;</div>
   <div class="button">.</div>
  <div class="button">1</div>
  <div class="button">2</div>
  <div class="button">3</div>
  <div class="button">4</div>
  <div class="button">5</div>
  <div class="button">6</div>
  <div class="button">7</div>
  <div class="button">8</div>
  <div class="button">9</div>
  <div class="button">0</div>
  <div class="button">+</div>
  <div class="button">-</div>
  <div class="button">/</div>
  <div class="button">*</div>
  <div id="equal" class="button">=</div>
</div>
   <div class="name"> CREATED BY KIRZIN</div>
</body>

.name{
  background:linear-gradient(90deg,black,white);
  background-size:400%;
  color:transparent;
  -webkit-background-clip:text;
  animation:ani 15s linear infinite;
}
body{
  display:flex;
  flex-direction:column;
  height:100vh;
  align-items: center;
  justify-content: center;
background:linear-gradient(90deg,#03a9f4,#f441a5,#fe9b4b,#03a9f4);
  background-size:400%;
  overflow:hidden;
  font-family:cursive;
  animation:ani 50s linear infinite;
}
@keyframes ani{
  0%{
    background-position:0%;
  }
  100%{
    background-position:400%;
  }
}
.parent{
  display:flex;
  flex-direction:row;
  justify-content:center;
  margin:0.2em;
  width:300px;
  height:70vh;
  padding:0.5em;
  flex-wrap:wrap;
  box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.1); 
  background-blend-mode:soft-light;
   border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
  overflow:hidden; 
} 

.button{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:0.4em;
  width:20%;
  border:groove rgba(255, 255, 255, 0.1) ;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.1); 
  background-blend-mode:soft-light;
   border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
  
}

.button:hover{
  background: rgba(0, 0, 0, 0.4); 
  color:white;
  box-shadow: 0px 0px 20px rgba(0, 0,0, 0.4);

}
.display1{
  display:flex;
  width:100%;
  height:50px;
  align-items:center;
  margin:1px;
  padding:5px;
  overflow:hidden;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.1); 
  background-blend-mode:soft-light;
   border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(1px);
}

@media screen and (max-width: 650px) {
  .parent {
    width:70vw;
  height:60vh;
  }
  .button{
    width:15vw;
    font-size:12px;
  }
  .display1{
    font-size:12px;
  }
}
let display = document.getElementById('display');

let buttons = Array.from(document.getElementsByClassName('button'));

buttons.map( button => {
    button.addEventListener('click', (e) => {
        switch(e.target.innerText){
            case 'C':
                display.innerText = '';
                break;
            case '=':
                try{
                    display.innerText = eval(display.innerText);
                } catch {
                    display.innerText = "Error"
                }
                break;
            case '←':
                if (display.innerText){
                   display.innerText = display.innerText.slice(0, -1);
                }
                break;
            default:
                display.innerText += e.target.innerText;
        }
    });
});
//what are you doin here ??

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.