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

Html – Make columns of calculator appear as example

I am trying to build a calculator with code.
My calculator looks different from the one in the video.

Here’s the original calculator; Calculator from video

And here’s mine;

My Calculator

I want the buttons to be set out in the same way as the video.
Does anybody know how I can make my calculator more like the one in the video. Any suggenstions?

I want the buttons on my calculator to be the same as the ones in the video.

Here’s the code;

<!DOCTYPE html>
<html>
  <head>
   
<style>   
   button{
width: 100px;
height: 100px;
border-radius: 50px;
border: none;
background-color: hsl(0, 0%, 27%);
color: white;
font-size: 3rem;
font-weight: bold;
cursor: pointer;
   }


.keys{
  display: grid;
  grid-timeplate-columns:repeat(4, 1fr);
  }



   
  </style> 
  
  
  </head>
  <body>
     
     <div id="calculator">
       <input id="display" readonly>
       <div id="keys">
         <button onclick="appendToDisplay('+')">+ </button>
         <button onclick="appendToDisplay('7')">7 </button>
         <button onclick="appendToDisplay('8')">9 </button>
         <button onclick="appendToDisplay('-')">- </button>
         <button onclick="appendToDisplay('4')">4 </button>
         <button onclick="appendToDisplay('5')">5 </button>
         <button onclick="appendToDisplay('6')">6 </button>
         <button onclick="appendToDisplay('*')">* </button>
         <button onclick="appendToDisplay('1')">1 </button>
         <button onclick="appendToDisplay('2')">2 </button>
         <button onclick="appendToDisplay('3')">3 </button>
         <button onclick="appendToDisplay('/')">/ </button>
         <button onclick="appendToDisplay('0')">0 </button>
         <button onclick="appendToDisplay('.')">. </button>
         <button onclick="calculate()"> =</button>
         <button onclick="clearDisplay()"> C</button>
         </div> 
     
     </div>
     
     
     
     
  </body>
</html>
Tags:

2

Answers


  1. 0

    It is different because you have missed the number 8 in your code. Please check the images for differences.

    Login or Signup to reply.
  2. 0

    1. You’re missing your 8th button in your <div id="keys"> element.

    2. In your <style> elements, you refer to the keys class, not ID — your selector should be #keys, not .keys.

    3. You use CSS property grid-template-columns, but you’ve misspelled it as grid-timeplate-columns. Correct the spelling of the middle word.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search