I used sublime text and basic javascipt to make a functionable buttons

Community feedback

• 

  Khaya•300

  @khaya05Posted about 2 years ago

  Hi 👋🏽👋🏽, nice job on trying to create this project.

  I can see that you added eventListeners on all buttons, which works but I think it's better to add the event listener on the parent, which in this case is div class='keyscontainer, like this

        <div class="keys">
          <button data-key="7">7</button>
          <button data-key="8">8</button>
          <button data-key="9">9</button>
          <button data-key="DEL">DEL</button>
          <button data-key="4">4</button>
          <button data-key="5">5</button>
          <button data-key="6">6</button>
          <button data-key="+">+</button>
          <button data-key="1">1</button>
          <button data-key="2">2</button>
          <button data-key="3">3</button>
          <button data-key="-">-</button>
          <button data-key=".">.</button>
          <button data-key="0">0</button>
          <button data-key="/">/</button>
          <button data-key="x">x</button>
          <button id="resetbtn" data-key="reset">Reset</button>
          <button id="enterbtn" data-key="equals">=</button>
        </div>
  

  This is called dom traversing. Check this video by WebDevSimplified: video_1

  Then this is what you might do on your .js

  const keysContainer = document.querySelector('.keys');
  
  keysContainer.addEventListener('click', (e) => {
    const key = e.target.dataset.key
  });
  

  Also, check out this scrimba video video_2

  hope this helps you 👍👍👍

  Marked as helpful

  0