Question 43461 in Html Question posted in
Some basic documentation can be found here.

JavaScript Popups? – Html

Building a Pop-Up Calculator using HTML, CSS and JavaScript. I’m mostly done with the design aspect but I can’t get my open calculator button to work. What am I missing to make this work? I assume once I’ve figured out where I’ve gone wrong I can just use the concept on the exit/close button of my calculator too.

let calc = document.getElementById("calculator");
let overlay = document.getElementById("overlay");
let var1 = document.getElementById('var1');
let var2 = document.getElementById('var2');

function openCalc() {
  calc.classlist.add(".calculator .active");
  overlay.clastlist.add('active');
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

.container {
  width: 100%;
  height: 100vh;
  background-image: url("./bg.png");
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn {
  padding: 10px 60px;
  background: #fff;
  border: 0;
  outline: none;
  cursor: pointer;
  font-size: 22px;
  font-weight: 500;
  border-radius: 25px;
}

.calculator {
  width: 500px;
  background-color: #7ea2d4;
  border-radius: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  padding: 0 30px 30px;
  border: 1px solid black;
  max-width: 80%;
  visibility: hidden;
  transition: 400ms ease-in-out;
}

.calculator .active {
  transform: translate(-50%, -50%) scale(1);
  visibility: visible;
}

.calculator .header {
  padding: 10px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid black;
}

.calculator img {
  width: 100px;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgb(255, 255, 255);
}

.calculator .close-button {
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
  font-size: 1.5rem;
  font-weight: bold;
  color: red;
  width: 30px;
  height: 40px;
  margin-bottom: 50px;
}

.calculator .close-button:hover {
  cursor: pointer;
  border-radius: 5px;
  background-color: red;
  color: white;
  transition: 400ms ease-in-out;
}

.calc-body {
  padding: 10px 15px;
}

.calc-body .operator {
  margin-top: 15px;
  border: 0;
  outline: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: whitesmoke;
  font-size: 20px;
  color: black;
  cursor: pointer;
  margin: 10px;
}

.calc-body .display {
  display: flex;
  justify-content: flex-end;
  margin: 20px 0;
}

#overlay {
  position: fixed;
  opacity: 0;
  transition: 400ms ease-in-out;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, .5);
  pointer-events: none;
}

#overlay.active {
  opacity: 1;
  pointer-events: all;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Calculator</title>
</head>

<body>
  <div class="container">
    <button type="submit" class="btn" onclick="openCalc()">Start Calculator</button>

    <div class="calculator" id="calculator">
      <div class="header">
        <img src="calc.png">
        <h2>Your Calculator App!</h2>
        <button type="button" class="close-button" id="closeCalc">&times;</button>
      </div>

      <div class="calc-body">
        Enter Number 1: <input type="text" id="var1"><br> Enter Number 2: <input type="text" id="var2"><br>
        <input type="button" value="+" class="operator" onclick="add()">
        <input type="button" value="-" class="operator" onclick="sub()">
        <input type="button" value="*" class="operator" onclick="multi()">
        <input type="button" value="/" class="operator" onclick="divi()">
        <input type="button" value="%" class="operator" onclick="modulo()">
      </div>

      <div class="result" id="popup">
        <h2>The answer is...</h2>
        <div class="display">
          <input type="text" name="display">
        </div>
      </div>
    </div>
  </div>

  <div id="overlay"></div>

  <script>
  </script>
</body>

</html>
Tags:

2

Answers


  1. 0

    Add it css and change your function

    function openCalc(){
    calc.classList.add("active");
    overlay.classList.add('active');
}
    #overlay.active{
    opacity: 1;
    pointer-events: all;
    z-index: -1;
}

.active {
    visibility: visible;
    z-index: 1;
}
    Login or Signup to reply.
  2. 0

    You made some mistakes in your original code, let’s go through them one by one:

    1. For manipulating DOM element classes, you should use el.classList.add("a-class-name") instead of classlist
    2. When adding a new class name to an element, you don’t need to include the dot before the class name. Therefore, use classList.add("active") instead of classList.add(".active")
    3. When an element has more than one class name, use .first-class-name.second-class-name to select the element in your CSS, without any space between the selectors.

    And finally, I’ve added the z-index to your popup so that it won’t show up underneath the overlay element.

    Here is the fixed version of your code:

    let calc = document.getElementById('calculator');
let overlay = document.getElementById('overlay');
let var1 = document.getElementById('var1');
let var2 = document.getElementById('var2');

function openCalc() {
  calc.classList.add('active');
  overlay.classList.add('active');
}
    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

.container {
  width: 100%;
  height: 100vh;
  background-image: url('./bg.png');
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn {
  padding: 10px 60px;
  background: #fff;
  border: 0;
  outline: none;
  cursor: pointer;
  font-size: 22px;
  font-weight: 500;
  border-radius: 25px;
}

.calculator {
  width: 500px;
  background-color: #7ea2d4;
  border-radius: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  padding: 0 30px 30px;
  border: 1px solid black;
  max-width: 80%;
  visibility: hidden;
  transition: 400ms ease-in-out;
  z-index: 10;
}

.calculator.active {
  transform: translate(-50%, -50%) scale(1);
  visibility: visible;
}

.calculator .header {
  padding: 10px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid black;
}

.calculator img {
  width: 100px;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgb(255, 255, 255);
}

.calculator .close-button {
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
  font-size: 1.5rem;
  font-weight: bold;
  color: red;
  width: 30px;
  height: 40px;
  margin-bottom: 50px;
}

.calculator .close-button:hover {
  cursor: pointer;
  border-radius: 5px;
  background-color: red;
  color: white;
  transition: 400ms ease-in-out;
}

.calc-body {
  padding: 10px 15px;
}

.calc-body .operator {
  margin-top: 15px;
  border: 0;
  outline: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: whitesmoke;
  font-size: 20px;
  color: black;
  cursor: pointer;
  margin: 10px;
}

.calc-body .display {
  display: flex;
  justify-content: flex-end;
  margin: 20px 0;
}

#overlay {
  position: fixed;
  opacity: 0;
  transition: 400ms ease-in-out;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

#overlay.active {
  opacity: 1;
  pointer-events: all;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Calculator</title>
</head>

<body>
  <div class="container">
    <button type="submit" class="btn" onclick="openCalc()">
        Start Calculator
      </button>

    <div class="calculator" id="calculator">
      <div class="header">
        <img src="calc.png" />
        <h2>Your Calculator App!</h2>
        <button type="button" class="close-button" id="closeCalc">
            &times;
          </button>
      </div>

      <div class="calc-body">
        Enter Number 1: <input type="text" id="var1" /><br /> Enter Number 2: <input type="text" id="var2" /><br />
        <input type="button" value="+" class="operator" onclick="add()" />
        <input type="button" value="-" class="operator" onclick="sub()" />
        <input type="button" value="*" class="operator" onclick="multi()" />
        <input type="button" value="/" class="operator" onclick="divi()" />
        <input type="button" value="%" class="operator" onclick="modulo()" />
      </div>

      <div class="result" id="popup">
        <h2>The answer is...</h2>
        <div class="display">
          <input type="text" name="display" />
        </div>
      </div>
    </div>
  </div>

  <div id="overlay"></div>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search