<div class="card">
    <h2>JavaScript Math<hr/></h2>
  <div class="cardItems">
    <div class="btns">
      <button onclick="addBy()">
        Add
      </button>
      <button onclick="subBy()">
        Subtract
      </button>
      <button onClick="multiplyBy()">
        Multiply
      </button>
      <button onClick="divideBy()">
        Divide
      </button>
    </div>
    <div class="dispInput">
      <label for="firstNumber">
        1st Number : 
      </label>
      <input type="number" id="firstNumber" /><br/>
      <label for="secondNumber">
        2nd Number : 
      </label>
      <input type="number" id="secondNumber"/>
      <br/>
      <p id="answer">
        <label for="result">
          The Result is : 
        </label><br/>
        <span id="result"></span>
      </p>
    </div>
  </div>
 </div>
 <div class="card">
    <h2>Arrays<hr/></h2>
   <div id="myArray"></div>
  <div class="cardItems">
    <div class="btns">
      <button onclick="arrShift()">
        shift
      </button>
      <button onclick="arrUnshift()">
        unshift
      </button>
      <button onClick="arrPop()">
        pop
      </button>
      <button onClick="arrPush()">
        push
      </button>
    </div>
    <div class="arrInput">
      <div class="arrDisplay">numArr[0] = <span id="arrZero"/>
        
      </div>
      <div class="arrDisplay">numArr[1] = <span id="arrOne"/>
        
      </div>
      <div class="arrDisplay">numArr[2] = <span id="arrTwo"/>
        
      </div>
      <div class="arrDisplay">numArr[3] = <span id="arrThree"/>
        
      </div>
    </div>
  </div>
 </div>
  

  
</body>
</html>
body {
  background-color: #dddddd;
  margin: 1em;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(390px, 1fr));
  grid-gap: 2em;
}

h2 {
  text-align: center;
  margin: 0 auto 0.5em;
  width: 100%;
}

hr {
	height: 1px;
	border: 0;
	border-top: 1px solid rgb(155, 50, 43, 0.5);
  margin: 0.5em 16px;
}

button {
  width: 100%;
  height: 50px;
  background-color: #cccccc;
  color: black;
  border: 2px solid #cccccc;
  outline: none;
  padding: 1em 2em;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  margin: 0 auto 1em; 
  transition: 0.5s all ease-out;
  cursor: pointer;
}

button:hover {
  background-color: white;
}

.card {
  background-color: #ffffff;
  box-shadow: 
    0 19px 38px rgba(0,0,0,0.30), 
    0 15px 12px rgba(0,0,0,0.22);
  display: grid;
  justify-items: center;
  padding: 1em 0;
}

.cardItems {
  display: grid;
  grid-gap: 16px;
  grid-template-columns: 195px 195px;
  justify-items: stretch;
  align-items: stretch;
}

.btns {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

.dispInput {
  display: grid;
  align-content: flex-start;
}

#myArray {
  margin: 0 0 1em;
  padding: 0;
  font-size: 1.5em;
}

.arrInput {
  display: grid;
}

.arrDisplay {
  display: grid;
  align-items: center;
  width: 100%;
  height: 47px;
  background-color: rgb(155, 50, 43);
  color: white;
  text-align: center;
  border: 1px solid black;
  transition: 1s background linear;
}

label {
  font-size: 1.3em;
  text-align: center;
}

input {
  margin: 0.5em auto;
}

span {
  font-size: 1.3em;
}

#answer {
  margin: 0;
  text-align: center;
  display: grid;
}
let num1 = document.getElementById('firstNumber')
let num2 = document.getElementById('secondNumber')
let result = document.getElementById('result')

const addBy = () => result.innerHTML = Number(num1.value) + Number(num2.value)

const subBy = () => result.innerHTML = Number(num1.value) - Number(num2.value)

const multiplyBy = () => result.innerHTML = Number(num1.value) * Number(num2.value)

const divideBy = () => result.innerHTML = Number(num1.value) / Number(num2.value)

let numArr = [0, 1, 2, 3, 4];

let myArray = document.getElementById("myArray")
myArray.innerHTML = numArr.join(', ');
let arrZero = document.getElementById("arrZero")
arrZero.innerHTML = numArr[0]
let arrOne = document.getElementById("arrOne")
arrOne.innerHTML = numArr[1];
let arrTwo = document.getElementById("arrTwo")
arrTwo.innerHTML = numArr[2];
let arrThree = document.getElementById("arrThree")
arrThree.innerHTML = numArr[3];

const arrShift = () => {
    if (numArr.length > 1) {
        numArr.shift()
    } 
    myArray.innerHTML = numArr.join(', ');
    arrZero.innerHTML = numArr[0]
    arrOne.innerHTML = numArr[1];
    arrTwo.innerHTML = numArr[2];
    arrThree.innerHTML = numArr[3];
}

const arrUnshift = () => {
    if (numArr.length > 0) {
        numArr.unshift(numArr[0] - 1)
    } else {
        numArr.unshift(0)
        myArray.innerHTML = "can't unshift"
    }

    myArray.innerHTML = numArr.toString()
    arrZero.innerHTML = numArr[0]
    arrOne.innerHTML = numArr[1];
    arrTwo.innerHTML = numArr[2];
    arrThree.innerHTML = numArr[3];
    
}

const arrPop = () => {
  if (numArr.length > 1) {
    numArr.pop();
  } 
    myArray.innerHTML = numArr.join(', ');
    arrZero.innerHTML = numArr[0]
    arrOne.innerHTML = numArr[1];
    arrTwo.innerHTML = numArr[2];
    arrThree.innerHTML = numArr[3];
}

const arrPush = () => {
  let lastNum = numArr[numArr.length - 1]
  numArr.push(lastNum + 1)
  myArray.innerHTML = numArr.join(', ');
  arrZero.innerHTML = numArr[0]
  arrOne.innerHTML = numArr[1];
  arrTwo.innerHTML = numArr[2];
  arrThree.innerHTML = numArr[3];
}



External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.