Urgent problem of calculator text input

I need the text input of the calculator(where it will show the calculations) to match with that of the numbers. I tried putting it in a seperate container called .container1but that didn’t work. Pls pls pls pls :sob: :sob: :sob: :sob: :sob: :sob: :sob: :sob: :sob: I’ve been stuck here for a very long time (almost a day) and I really need to go on. :sob: :sob: :sob: :sob: :sob: :sob: :sob:Pls any help will be greatly appreciated. This is really urgent. Thank you very much in advance! and happy coding! Here’s the pen

I’m not really sure I follow what the problem is: can you elaborate a bit on that?
What’s the desired output? What have you tried so far? Do you see any visible errors? … etc…etc…

You have tons of code in that pen, but it seems to have nothing to do with a calculator.

If you want a number to show up in an element when you click a button, you’ll first have to attach a click event to your calculator, or to the individual buttons. Have you tried anything at all so far?

Thanks for the reply. But I just designated that pen for whatever I want to do in JS since I don’t really know the language. So, so much code is there. I’ve used CSS grid to create the numbers and the spaces of the calculator. Now, the place where the calculations will appear - the display is what I need to create. I tried making another container(called container1) so as to change grid-template-columns: auto auto auto; to grid-template-columns: auto; thinking that it will probably work but it didn’t. This is what I need help for. Thanks

Thanks for the reply. I’ve used CSS grid to create the numbers and the spaces of the calculator. Now, the place where the calculations will appear - the display is what I need to create. I tried making another container(called container1) so as to change grid-template-columns: auto auto auto; to grid-template-columns: auto; thinking that it will probably work but it didn’t. This is what I need help for. Thanks

To add a display at the top of your calculator, all you have to do is add it to your container:

<div class="container">
    <div class="display">12345</div>
    <button class="item">1</button>
    <button class="item">2</button>
    <button class="item">3</button>
    <button class="item">4</button>
    <button class="item">5</button>
    <button class="item">6</button>
    <button class="item">7</button>
    <button class="item">8</button>
    <button class="item">9</button>
    <button class="item">+</button>
    <button class="item">-</button>
    <button class="item">×</button>
  </div>

Then, the following CSS:

.display {
  height:80px;
  grid-column:1/4; /* this will make the display stretch over all three columns */
  background:green;
  text-align:right;
  line-height:80px; /* this is just to center the text vertically */
  font-size:30px;
}

Hope that helps so you can start with the JavaScript :love_you_gesture:

Thank you very much. It worked! I’m using jQuery and JS for it. To me, it’s easier