All solutions

What are you most proud of, and what would you do differently next time?

I had a lot of fun figuring out hyper-specific selectors, for example this one only displays an element on page 4 if there's at least one visible sibling following it (not just the next sibling) (note: these are written with SASS not vanilla CSS)

.colored-box:has(hr ~ .price-row:not(.hide)){
    hr {
        border-top: 1px solid $light-gray;
    } 
}

And this selects the button text on page 2 and shifts it upwards to make room for a third line but only if a button in a different container on the page is toggled

.form-container:has(.payment-toggle-switch input:checked){
        .container {
            .discount {
                opacity: 100;
            }
            h2, .payment-rate {
                transform: translateY(0);
            }
        }

What challenges did you encounter, and how did you overcome them?

I struggled a little figuring out how to manage the totals page since they all changed when the monthly/yearly button was toggled, and realised the best solution was just to keep track of all the numerical values with variables under the hood instead of pulling the values directly from the DOM. This seems like a good practice going forward, only add data to the DOM, don't grab data from it (excluding inputs)

I also ran into issues with the mobile version being impacted by the viewport height (eg if you open a link with twitter it creates a container that takes up a lot of space at top and bottom and doesn't reflect the actual device's height which I didn't think of when using Devtools, so my buttons at the bottom were obscured) but that was solved by creating a media query for max-height that shrank a few elements' heights on shorter screens

What are you most proud of, and what would you do differently next time?

I'm proud of the way I figured out the CSS for the cards (using a grid display and setting negative margins so they'd sit on top of each other)

I also think the way I set up each card as a separate object that interfaced with the user data in an iterative loop was a clean solution to updating the same types of info 6 times per button press, as well as the methods within each object that handle plural hours and the past tense

What challenges did you encounter, and how did you overcome them?

I wanted to set up a fake server fetch with asynchronous functions but I was really struggling with promises, until I better understood that each .then() is a separate promise instance that needs to be resolved, and when they're chained together they pass a value to the next .then() I also didn't realize that you can't directly interface with async patterns, ie, I initially had userData = fetchJSONDataAsync(); which did not work, because it wouldn't return the data it would return a promise object (which did include the data)

I solved this by declaring UserData as a global variable, then populating it with data within the logic of the async function

What are you most proud of, and what would you do differently next time?

I'm pretty proud of how I set up the Add-to-cart functionality, which I planned and designed without consulting any tutorials. If I were to start over, I'd probably organize my CSS a bit better with less specific entries. I had the idea to start adding "flex-container" as a class to indicate flexboxes but I'm not sure if that's a good idea yet as it's slightly annoying to use devtools to play with flex properties when everything is relying on the same class

What challenges did you encounter, and how did you overcome them?

I had a really funny bug when building the lightbox where I was grabbing the "src" property of the click target, and using a function to extract the number from the filename to determine which image should be the main image (eg. if you click on an image with src of "image-thumbnail-2" it sets the index to 2 and shows main-image-2; I know, that's horrible), except I found out that VScode's live site extension adds "https://127.0.0:5500" to the front of the img src, so I had to hunt down why my index variable was randomly turning into 127 which broke the lightbox but for some reason only 30% of the time. ridiculous thing to hunt down, because I thought it was an issue with the index type being turned into a string at first.

Using chrome's live expressions tool to keep track of the variable and figure out exactly where it went wrong was tremendously useful. I ended up adding a unique class for each image and using that instead, which seems safer lol

What specific areas of your project would you like help with?

I wanted to animate the cart entries so that the other ones slide up to fill the gap instead of instantly moving, but it seems that is not possible in vanilla CSS unfortunately, and I wasn't confident in my JS enough to implement it. If there is in fact a way to do that in CSS I'd love to know.

What are you most proud of, and what would you do differently next time?

I'm pretty happy with how I solved the problem of a button hover effect that uses a gradient. Once I realised I couldn't animate a transition from a background-color to a background-image:gradient in vanilla CSS without it flickering, as the gradient pops in and out, especially when quickly moving mouse over the element, I discovered I could just change the blending mode: the gradient is always loaded but the :hover transition only changes its blending mode from Darken (which results in 0% visibility as the entire gradient is lighter than the initial button) to multiply, making it visible.

(this is built with Sass and the $variables are not vanilla CSS)

.email-submit-button {
    transition: all 150ms ease-out;
    background-image: $orange-red-gradient ;
    background-blend-mode: darken;
}

.email-submit-button:hover {
    background-blend-mode: multiply;
}

What challenges did you encounter, and how did you overcome them?

I had a lot of issues thinking about Mobile-first, and my css is disorganised as I added more exceptions. I think this is probably an issue that requires more of my attention in the planning stage

What specific areas of your project would you like help with?

So my solution for the success message involved changing the pop-up message from display:none to display:initial, which felt not great as I did it. I didn't find much about best practices online, should I be loading an entire new element into the DOM somehow when the success fires instead of toggling visibility in js? Should I be looking into frameworks or is there another jump-off point for how to do that?

What are you most proud of, and what would you do differently next time?

I decided to look into how to create an animation for the accordion expanding and shrinking, and picking apart some other accordions in console along with going through a tutorial on css-tricks helped me finally wrap my head around constructors and objects as a concept. I guess seeing them in practical use was the final hurdle.

If I were to restart it, I would probably figure out a css preprocessor but the scale of the project made it feel unnecessary at the time

What challenges did you encounter, and how did you overcome them?

When implementing the JS animation, there was an issue where a margin under the summary was making the animation stutter, because it wasn't factored into the calculations and would skip about 20px at the end. Figured it out by comparing height values in the dev console, and fixed the bug by including the margin in the endHeight calculations (it's a hardcoded 16px which is a little messy) As I understand it Jquery has a 1-line method for getting the outerHeight including the margin but vanilla JS does not, so it's probably time to stop procrastinating and look into Jquery

What specific areas of your project would you like help with?

I'm familiar with the different options for drop-shadows in photoshop but actually implementing the glow behind the info panel in CSS is a different beast entirely. It would either be too bright on the dark half or too dark on the light half, and I eventually arrived at something that looks ok if you don't pixelpeep. Is there a way to adjust opacity on the dropshadow without altering the element it's linked to?