<div class="main-app">

  <div class="part-one steps">
    <p><b>Take the number of the month, in which you are born in your mind. Starting from 1 for Jan to 12 for Dec.</b></p>
    <button>Next -></button>
  </div>
  
  <div class="part-two steps">
    <p><b>Double that number.</b></p>
    <p>For example 9 x 2 = 18.</p>
    <button>Next -></button>
  </div>
  
  <div class="part-three steps">
    <p><b>Next add 5 to it.</b></p>
    <p>For example 18 + 5 = 23.</p>
    <button>Next -></button>
  </div>
  
  <div class="part-four steps">
    <p><b>Then multiply the answer you got with 5.</b></p>
    <p>For example 23 * 5 = 115.</p>
    <button>Next -></button>
  </div>
  
  <div class="part-five steps">
    <p><b>Whatever answer you got in the previous step, add zero at the end of the number.</b></p>
    <p>For example I got 115 answer in previous step so now it become 115<b>0</b>.</p>
    <button>Next -></button>
  </div>
  
  <div class="part-six steps">
    <p><b>To the answer you got, now add your date of birth.</b></p>
    <p>For example 1150 + 27 = 1177.</p>
    <button>Next -></button>
  </div>

  <div class="part-seven steps">
    <p><b>Now declare the final answer in textbox below.</b></p>
    <input type="number" id="solve_input" required/>
    <button type="button" onclick="solve()">Submit</button>
  </div>
  
  <div class="part-eight steps">
    <h1>Answer</h1>
    <div id="ans"></div>
  </div>
  
</div>

  <!-- Calculator -->
<div class="calculator-app">
  <h1>Calculator for Help</h1>
  <div class="calculator">
    <div class="output">
      <input type="text" id="d" readonly><button onclick="c('')">C</button>
    </div>
    <div class="button-grp">
      <div class="button-grp1">
        <button onclick="v('7')">7</button>
        <button onclick="v('8')">8</button>
        <button onclick="v('9')">9</button>
        <button onclick="v('4')">4</button>
        <button onclick="v('5')">5</button>
        <button onclick="v('6')">6</button>
        <button onclick="v('1')">1</button>
        <button onclick="v('2')">2</button>
        <button onclick="v('3')">3</button>
        <button onclick="v('.')"><b style="font-weight:900;">.</b></button>
        <button onclick="v('0')">0</button>
        <button onclick="e()">=</button>
      </div>
      <div class="button-grp2">
        <button onclick="v(' + ')">+</button>
        <button onclick="v(' - ')">-</button>
        <button onclick="v(' * ')">*</button>
        <button onclick="v(' / ')">/</button>
      </div>  
    </div>
  </div>
</div>

* {box-sizing:border-box; font-family:arial; color:#555;}
body {background:#4CAF50;}

.main-app {
  position: relative;
  height: 96vh;
  width: 100%;
}
.main-app .steps {
  position: absolute;
  width: 80%;
  height: 250px;
  border-radius: 5px;
  padding: 30px;
  background: #fff;
  box-shadow: 0 0 30px 0px #09460c;
  opacity: 1;
  transition: all 0.4s;
}
.main-app .steps p {
  font-weight: 500;
  margin:0 0 10px;
}
.main-app .steps button {
  background: #4caf50;
  color: #fff;
  padding: 10px;
  font-size: 18px;
  border-radius: 4px;
  border: 0;
  cursor: pointer; 
  position:absolute;
  bottom:30px;
}
.main-app .part-seven button {
  position:relative;
  bottom:0;
}
.main-app .steps input {
  padding: 10px;
  font-size: 18px;
  margin-bottom: 15px;
  width:80%;
}
.main-app .part-one {
  top: 20%;
  left: 7%;
  z-index: 7;
}
.main-app .part-two {
  top: 21%;
  left: 8%;
  z-index: 6;
}
.main-app .part-three {
  top: 22%;
  left: 9%;
  z-index: 5;
}
.main-app .part-four {
  top: 23%;
  left: 10%;
  z-index: 4;
}
.main-app .part-five {
  top: 24%;
  left: 11%;
  z-index: 3;
}
.main-app .part-six {
  top: 25%;
  left: 12%;
  z-index: 2;
}
.main-app .part-seven {
  top: 26%;
  left: 13%;
  z-index: 1;
}
.main-app .part-eight {
  top: 27%;
  left: 14%;
  z-index: 0;
}


/* Calculator */
.calculator-app {transform:scale(0.9); text-align:center;}
.calculator {width:320px; background: #2a3d51; padding:20px 10px 30px; display:inline-block; border-radius:15px; text-align:left;}
.output #d {width:63%; margin:0 auto; background:#f15c59; margin:20px; color:#fff; padding:15px; font-size:20px; border:10px solid #5e626d; color:#000; border-radius:15px; }
.output button {padding:12px 20px; background:#d17c3c; border:0px; border-bottom:5px solid #446280; border-radius:4px;}
.button-grp {width:95%;margin:0 auto;}
.button-grp1 {float:left;width:75%;}
.button-grp2 {float:left;width:25%;}
.button-grp button {padding:12px 20px; margin:10px; background:#2d81d5; border:0px; border-bottom:5px solid #446280; border-radius:4px; color:#000; font-weight:700; font-size:14px;}

@media screen and (min-width: 500px) {
  .main-app .steps {width:60%;}
  
}

@media screen and (min-width: 900px) {
  .main-app .steps {width:70%; height:200px;}
  .main-app {float:left; width:50%;}
  .calculator-app {float:left; width:50%;}
}

$(document).ready(function() {
    
  $('.steps button').click(function() {
    $(this).parent().css({'opacity':'0'});
    $(this).parent().next().css({'z-index': '10'});
  });
});

function solve() {
  const user_input = document.getElementById('solve_input').value.toString();
  const user_array = user_input.split("");
  let first_num, second_num;
  
  if (user_array.length < 4) {
    first_num = user_array[0];
    second_num = user_array[1] + user_array[2];
  } else {
    first_num = user_array[0] + user_array[1];
    second_num = user_array[2] + user_array[3];
  }
  let month = first_num - 2;
  
  switch(month) {
    case 1:
      month = "January";
      break;
    case 2:
      month = "February";
      break;
    case 3:
      month = "March";
      break;
    case 4:
      month = "April";
      break;
    case 5:
      month = "May";
      break;
    case 6:
      month = "June";
      break;  
    case 7:
      month = "July";
      break;
    case 8:
      month = "August";
      break; 
    case 9:
      month = "September";
      break;
    case 10:
      month = "October";
      break;
    case 11:
      month = "November";
      break;
    case 12:
      month = "December";
      break;
  }
  
  const ans = document.getElementById('ans');
  ans.innerHTML = `<b>Your Birthday is on ${second_num - 50} ${month}.</b>`;
}

// Calculator
function c(val) {
document.getElementById("d").value=val;
}
function v(val) {
  document.getElementById('d').value += val;
}
function e() { 
  try { 
    c(eval(document.getElementById('d').value)) 
  } 
  catch(e) {
    c('Error') 
  } 
}