Click here to Skip to main content
15,609,864 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
<!DOCTYPE html>
<html lang="en">

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <link rel="stylesheet" href="main.css">

 <section class="calculator">
   <input type="text" name="" id="" class="screen">
  <div class="buttons">
   <!-- yellow -->
   <button type="button" class="btn btn-yellow" data-num="*">*</button>
   <button type="button" class="btn btn-yellow" data-num="/">/</button>
   <button type="button" class="btn btn-yellow" data-num="-">-</button>
   <button type="button" class="btn btn-yellow" data-num="+">+</button>
   <!-- grey buttons -->
   <button type="button" class="btn btn-grey" data-num=".">.</button>
   <button type="button" class="btn btn-grey" data-num="9">9</button>
   <button type="button" class="btn btn-grey" data-num="8">8</button>
   <button type="button" class="btn btn-grey" data-num="7">7</button>
   <button type="button" class="btn btn-grey" data-num="6">6</button>
   <button type="button" class="btn btn-grey" data-num="5">5</button>
   <button type="button" class="btn btn-grey" data-num="4">4</button>
   <button type="button" class="btn btn-grey" data-num="3">3</button>
   <button type="button" class="btn btn-grey" data-num="2">2</button>
   <button type="button" class="btn btn-grey" data-num="1">1</button>
   <button type="button" class="btn btn-grey" data-num="0">0</button>
   <button type="button" class="btn-equal btn-grey">=</button>
   <button type="button" class="btn-clear btn-grey">C</button>
      //Wrap code in an IIFE
  let screen = document.querySelector('.screen');
  let buttons = document.querySelectorAll('.btn');
  let clear = document.querySelector('.btn-clear');
  let equal = document.querySelector('.btn-equal');
  //retrieve data from numbers that are clicked
    button.addEventListener('click', function(e){
      let value =;
      screen.value += value;
  equal.addEventListener('click', function(e){
    if(screen.value === ''){
      screen.value = 'Please Enter a Value';
    } else {
      let answer = eval(screen.value);
      screen.value = answer;
  clear.addEventListener('click', function(e){
    screen.value = '';
})(); //end IIFE


What I have tried:

I tried googling this but could not get exact meaning of this "" line..
Updated 1-Jun-21 6:07am

1 solution is the element which was clicked: - Web APIs | MDN[^]

.dataset returns the set of data-* attributes on that element:
HTMLOrForeignElement.dataset - Web APIs | MDN[^]
Using data attributes - Learn web development | MDN[^]

And finally, .num returns the value of the data-num attribute.
Attributes can be set and read by the camelCase name/key as an object property of the dataset: element.dataset.keyname
Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900