All solutions

I decided to try going the vanilla route this time. For the hero slideshow, I set the div's background image and used JS to switch the image on button clicks.

I've initially gone with grid-template-areas to set the grid layout, but I think that I'm going to switch to using flex an flex direction with two separate divs to display as needed based on media queries. I can't quite get the bottom row to fit exactly like the design with my current solution.

If anyone has any thoughts, tips, or tricks to make the layout more similar to the design I'd love to hear them.

This one is still a WIP, but I have the main functioning desktop portion. My next task is working on the responsiveness/mobile version.

If you have any comments or questions, feel free to shoot them my way.

I utilized local storage to hold two objects for the add-ons(name and price) and the plan details(plan name, plan price, and billing type). My first thought was to use state variables set in the parent component(App.jsx) and pass it between the children components, but I decided that in a real world scenario, it would be more likely to use session storage to hold info like this in case a browser or tab closes suddenly.

I decided to use fetch to make the API call, but whenever I ran it in Firefox, the call got cached and would return the same result over and over again. It works as expected in Chrome. Does anyone know what would cause this in Firefox? Also if anyone has tips on centering the button on the container div, I would really appreciate it.

I love to use frameworks when working with React but I want to challenge myself to only work with JavaScript, HTML, and CSS where possible.

The form validation logic is purely JS though I do use React to set the variables for different states relating to the input. Within the year and day logic, I took leap years into account going back to 1952.

I also used JavaScript document.getElementByID to set the styles for the inputs and get their values within the function. Normally set the style with the CSS and get input values with onChange(), so it was pretty interesting to try this approach.

if (d === "") {
document.getElementById('dayInput').style.outline = "1px solid hsl(0, 100%, 67%)";
document.getElementById('dayLabel').style.color = "hsl(0, 100%, 67%)";
setIsDayFieldEmpty(true);
}

I'd love feedback on my JS logic, especially any tricks on how to trim it down. I'm considering replacing the if/else statements with a switch where possible.