Front End Development Libraries Projects - Build a JavaScript Calculator

JavaScript
1

Tell us what’s happening:
I am trying to align my JavaScript calculator elements according to a grid-template-areas format, but I don’t know why it’s not rendering appropriately. If you look in the codepen, in the return statement in the div id “bottom” all the buttons/inputs are there with their className that is then used in the CSS.
Can someone explain to me why my grid layout is not working as per how I’ve written it out in the CSS? Any pointers as to why the buttons all form a uniform line would be great.

Thanks
Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

Challenge: Front End Development Libraries Projects - Build a JavaScript Calculator

Link to the challenge:

3

Thanks @camperextraordinaire - I feel like I’ve revised it to what it should be, targeting with className https://codepen.io/tdoherty92/pen/rNZJpXQ - still not rendering. Would a solution now be to remove the “top” and “bottom” className in my JavaScript since they’re not in use, then all the selected elements are immediate children of the grid-container? Would that have any effect?

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.