Responsive CSS grid and JavaScript

Hello, I only managed to complete this challenge today with the help of others in the community and it was a struggle but I'll share my thought process with you. The first step for me was to know the function or job of every field, writing it down or typing it in a text file helps. For example you know that you need the values in the bill and number of people fields as well as the tips, that means you need to return the value and assign it to variable. So you created a variable to hold the values of the bill, number of people and tip, next you want to start calculating so you create a function that will do that but you don't want it to start calculating as soon as the page loads because that will give you NaN(Not a Number) since there's no input, that means you need a trigger something to tell it when to start calculating. By understanding what each element does you can see how they connect with each other. So my advice would be to write your idea down and create the basic variables and functions and then going back to your notes to see how they will work together and then, if you want, you can draw a flow chart. Hope you find this helpful. If you need help with coding javascript let me know, I got a lot of help from the community and I'm eager to share what they taught me. One last thing, if you want to get rid of the scroll bars in the input fields you can use the code below input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

input[type=number] { -moz-appearance: textfield; }