All solutions

The form validation was a challenge, especially for validating leap years. I think my code is okay.

I just need to figure out a good way to get the error messages to go away after updating the inputs. If anyone has tips on how I can do this with JS that would be great.

If anyone has time to offer suggestions with my JS that would be great. I think the calculator works fine. I think my logic is okay, but I wonder if I could have simplified things.

I want to organize the JS code a little better. I'm trying to avoid "spaghetti code" or not repeating myself.

I converted my user inputs to numbers before doing calculations. Should I convert back to string when updating innerContent?

Everything is working except sometimes the screen refreshes really fast. I can tell the code is working but I don't know why the error state or the success screen flashes so quickly. Does anyone have any solution or input for this?

No real comment here. If anyone has any input on how my JavaScript could be better that would be helpful. Otherwise, I thought this was an easy challenge.

Pretty simple project. I feel like my JavaScript could be cleaner. I wrapped my function in a modular pattern to protect my variables and not cloud the global scope.

I also made a variable for each corresponding icon and message for their respective input fields. I thought of doing querySelector all for them (using "this" and a for each loop) but each element needed to work independently upon submit. If anyone has recommendations that'd be appreciated.

I had trouble on two things:

1. The logo container has extra space above and below in it's grid cell. I centered the logo inside the cell, but I could not figure out how to get rid of the extra space. It looks fine but I wanted to control the spacing myself.

2. For the desktop version, I couldn't get the background image just to be on the divs on the left side of the image. I think this is because of the way the HTML is structured for the grid system to work. I ended up putting the background image on the full body. It looks fine, it just isn't exactly what the design had.

Had some minor hiccups with margins and paddings, but overall it turned out. I started with mobile first, so I think that's why I had trouble with the spacing.

To those who take a look, I'm open to any suggestions for improvement. :)

Here's my solution. I know my code could be a bit better. I think my naming for my classes got messy after awhile on this one. I also know accessibility needs work, just not that far in my learning journey.

I've never done this sort of tool tip, so that was a learning experience. I don't think I positioned it quite correctly. Because of the html structure I ended up having to adjust the popup in relation to it's parent div rather than in relation to the button.

I also used display: none to toggle the different states. It seems to work fine, but I don't think I can animate anything based on the display status.

Help with SVG positioning

On the desktop view, the position of the orange box only stays in the right spot if the screen with is 1440px wide. Any wider it moves because it's relative to the body. I can't make it relative to the white container because I have the container set to overflow: hidden to account for the illustration SGVs. How would you handle this situation? The box needs to sit on top of the white container and preferably be anchored to that position.

The most difficult part of this challenge was the JavaScript portion. This is my first attempt at any sort of form validation. I think I got some or most parts right, but I'm not confident that what I wrote was best practice.

I would like it if anyone could take a look and point out any recommendations they have, especially with JS.

I also know need to work on my HTML accessibility. I just haven't made it that far in my learning journey.

For the most part this is working. I can't figure out how to get the active state for the buttons on mobile. There's no way to see which button has been selected. Would that be something completed with JavaScript?

Hero I cannot figure out the hero section. I've tried positioning but that creates horizontal scroll (for some reason overflow: hidden didn't work) AND my image was not the correct size. It was smaller than it should be. I think it may be because the image is inside of a grid, but when I tried it as a background image it didn't look right because it was layered under the nav.

Whitespace There is extra white space at the bottom of my page that I can't figure out where it's coming from.

Any advice would be appreciated

Two areas that i could use assistance,

I can't figure out why my hero image for mobile and tablet won't fill the width of the window/bleeding out the edges. I tried using the vw unit with overflow hidden.

I also can't seem to get the footer to behave correctly. The button takes up the full space in the container and I don't know why.

This was a hard challenge for me. Any feedback would be extremely helpful.

1. How do you do curved divs? I don't think the solution I found is the best. It creates a horizontal scroll that I don't know how to fix.

2. I also know that I need to read into positioning and how to move elements. I found a solution that I was able to play with but any advice in that area is welcome.

Was positioning the best choice to use for the phone and the bottom section with the founder image and the text-box?

Two things:

1. I used Grid to create the cascading cards. Is that a good method? Had to create extra rows then assign each card.

2. I can't get the lower right background image to show on the mobile version. Any tips would be helpful.

I think I did alright on this one. Had to look up how to get my rows to line up, I was pretty close.

any feedback is always welcome!

Could use some help with a few things; I used SVGs for the icons. I had a hard time adding padding to them so that there was space between the border. When the icons were slightly larger and I added any padding then the icons would disappear. So the solution was make them small with a small amount of padding. Does anyone have any advice on how I can size them better, specifically with padding?

.icon { width: 2em; height: 2em; border: 1px solid #fff; border-radius: 100%; color: #fff; padding: 0.5em; margin: 5em 0.25em 0 0; }

The other challenge was that the background image doesn't always stretch to the bottom of the viewport.

I think this is a decent attempt. Not sure if I used too many classes. For some reason {display: flex} was creating an extra block of empty space making it appear like there was 3 columns. So I used CSS grid instead, worked perfectly.

Open to suggestions. TIA

I couldn't figure out what to do with the background svg. Should it scale when the viewport gets very wide?

Did I use the correct tags for my html. Tried using semantic html rather than just divs.

Also, do I have too many classes? Should I have used id for any of the classes?

Tried using ems and rems, but couldn't figure out why my ems were all getting too big, so switched to all rems.

I started with the mobile screen and then used a media query to create the look for larger devices.

Any advice is helpful.

I used a couple of semantic tags, main and section. But I used a class on <main> and I nested a <div> within my section tag. I wasn't sure how to style them. If I should style the semantic or nest and style a div...

I also tried to strictly use em and rems. Rem on text and em on everything else. The only px I used was on a drop shadow.

Any advice as to how to properly use semantic html and nest divs? Or if my use of em and rems where okay?

I know this was a simple project, so hopefully I'm not over complicating. just trying to build good habits.

jut uploading for the challenge completion. i'm two weeks into learning html and css. any advice is helpful.

Any advice would be helpful. Obviously a noob. I don't know responsive coding yet.

I'm wondering if I relied on too many classes with my CSS?