<main class="content">
<button class="pop-up-button-open">Open</button>
  </main>
<div class="mypop-up visuallyhidden">
  <div class="mypop-up__content">
    <div class="block1">
      <label for="number">Enter the number:</label>
      <input id="number" type="number" step="any" required autofocus>
    </div>
    <div class="block2">
      <label for="degreeOf">Enter the degree:</label>
      <input id="degreeOf" type="number" step="any" required>
    </div>
    <div class="block3">
      <p id="txt">Result:</p>
    </div>
    <div class="block4">
      <button id="calculate" class="mypop-up__button_calculate">Calculate</button>
      <button class="mypop-up__button_close">Close</button>
    </div>
  </div>
</div>

body{
  margin:0;
}
.content{
  display:grid;
  background-color:#c77;
  background-image: url('https://preview.ibb.co/dMmUQK/GDMathematics_Banner.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  width:100vw;
  height:100vh;
  padding: 10px;
}
.pop-up-button-open{
  justify-self:center;
  align-self:start;
  width:70px;
  height:70px;
  background:rgba(1,87,152, 1);
  color:#fff;
  border:2px dotted #fff;
  border-radius:50%;
  cursor:pointer;
  transition:all .3s;
}

.pop-up-button-open:focus, .pop-up-button-open:hover{
  outline:none;
  box-shadow:0 0 0 2px rgba(255,255,255, .5), 0 0 5px 4px rgba(3,155,229, 1);
  background:rgba(3,155,229, .8);
}

.mypop-up{
  display:grid;
  background:rgba(27, 94, 32, .3);
  filter:blur(0px);
  width:100vw;
  height:100vh;
  justify-content:center;
  align-content:center;
  position:fixed;
  left:0;
  top:0;
  z-index:999;
}

.mypop-up__content{
  display:grid;
  grid-template-rows:repeat(4, 1fr);
  grid-row-gap:10px;
  background:#fff;
  box-shadow:0 0 15px rgba(0, 0, 0, .5);
  border-radius:5px;
  width:0px;
  height:0px;
  opacity:0;
  overflow:hidden;
  padding:10px;
  transition:all .5s;
  
}
.block1, .block2{
  display:grid;
  justify-items:center;
  align-items:center;
}
.block3{
  display:grid;
  justify-items:center;
  align-items:center;
  border:1px solid #c1c1c1;
  color:#088A29;
}
.block4{
  display:grid;
  grid-template-rows:1fr;
  grid-template-columns:1fr 1fr;
}
.mypop-up__button_close{
  justify-self:end;
  align-self:end;
  width:50px;
  height:25px;
}

.mypop-up__button_calculate{
  justify-self:start;
  align-self:end;
  width:100px;
  height:25px;
}

.visuallyhidden{
	border:0;
	clip:rect(0 0 0 0);
	clip-path: inset(50%);
	height:1px;
	margin:-1px;
	overflow:hidden;
	padding:0;
	position:absolute;
	width:1px;
	white-space:nowrap;
}

function popupWindow(){
    const popUpBtnOpen = document.querySelectorAll('.pop-up-button-open');
    const popUpBtnClose = document.querySelectorAll('.mypop-up__button_close');
    const myPopUp = document.querySelectorAll('.mypop-up');
    const myPopUpContent = document.querySelectorAll('.mypop-up__content');
    const myContent = document.querySelectorAll('.content');
    const btn = document.getElementById('calculate');
    let num = document.getElementById('number');
    let deg = document.getElementById('degreeOf');
    let txt = document.getElementById('txt');
  
    function visuallyHidden(){
      myPopUp[0].classList.toggle('visuallyhidden');
    }
  
    function openPopup(){
      popUpBtnOpen[0].addEventListener('click', function(){
        myPopUp[0].removeEventListener('transitionend', visuallyHidden);
        myPopUp[0].classList.toggle('visuallyhidden');
        myPopUpContent[0].style.opacity = 1;
        myPopUpContent[0].style.width = '250px';
        myPopUpContent[0].style.height = '250px';
        myContent[0].style.filter = 'blur(3px)';
        document.getElementById('number').focus();
      });
    }
    
    function closePopup(){
      popUpBtnClose[0].addEventListener('click', function(){
        //setTimeout(function(){myPopUp[0].classList.toggle('visuallyhidden');},500);
        myPopUpContent[0].style.opacity = 0;
        myPopUpContent[0].style.width = '0px';
        myPopUpContent[0].style.height = '0px';
        myContent[0].style.filter = 'none';
        num.value = '';
        deg.value = '';
        txt.firstChild.nodeValue = 'Result:';
        myPopUp[0].addEventListener('transitionend', visuallyHidden);
      });
    }
    
  
    /*----------Calculate degree of---------*/
    function calcDegree(){
      btn.addEventListener('click', ()=>{
        let result = Math.pow(num.value, deg.value);
        txt.firstChild.nodeValue = `Result: ${result}`;
      });
    }
    
  openPopup();
  closePopup();
  calcDegree();
}

  window.addEventListener('DOMContentLoaded', popupWindow);