All solutions

I was not sure how to complete the full email validation so I did what I could. If anyone has some tips for me that would be greatly appreciated.

Let me know what I can do to improve on my solution. Thanks.

Just wanting to know if there was anything that I could have done better in my JS.

I have never used a JSON file before and I figured out how to import the file but when it came to using it I was not sure of the syntax and the correct use. I know how to display each item individually but I was unsure of how to get it all functioning seamlessly. I did lots of googling and testing but my code just did not work so I completed the project in the way that I know how. A quick rundown of how to use a JSON file in JS in this scenario would be appreciated. Thanks.

My first time building a theme switch! I struggled a bit at first. If there is a way to do this with fewer lines in JS or a different method altogether please let me know. Also, I was not sure how to get the hover states to work when in light mode.

I was trying to figure out a more efficient way to write some JS code for the navigation functions but I ended up just settling on what I know. But I did write a forEach() statement correctly so that's a win for today. One thing that I could not figure out was why the mobile view is not properly centered. Seems as though something is too wide but I am unsure what I did because it was fine before I added the media query for the desktop view.

The css grid irked me a little bit on this one but I got it in the end. other than that not too many issues.

Not sure why... But when looking at the project on mobile view the top image has a small space on the right and for the life of me I could not figure out why. Also, my CSS is way too long but I felt like if I touched too much it would mess it up. I will try to build more efficiently on the next one. This one got away from me.

This took me awhile because I am not familiar with CSS grid but I sure learned how to use it.

Learned about checkboxes in this one and how to target them in JS. I could not get the purple gradient on the middle card to look right so if anyone knows how I can do that let me know!

I had a few issues getting <nav> to look the way it should but I got it in the end! There is probably a more efficient way to do it and if you know how, share your knowledge 😊

See something that I did that I could have done better or differently? Let me know! :D

I found it difficult to figure out how to get input: invalid to activate only on submit but once I found the solution it all made sense. Learned more about form validation mostly on this one! Don't be afraid to let me know if there is an easier way with fewer lines of code.

If you see that I could have done something better or with fewer lines of code please let me know! I learned more about form validation while building this challenge.

I have a few questions about how to achieve the correct look on this project;

1. How do I change the color of an SVG when it's in an image tag?
2. How do I get the "speech bubble" look on the share panel in desktop view? Is creating a new div, styling a triangle, and using position to place it correctly the only way?
3. In desktop view, how do I make it so the share panel is always going to be above the share button when clicked no matter how big or small the user's screen size is?

I have never had to implement client-side verification before but I think I got it! Learned something new. I enjoyed working on this one. Any suggestions are welcome.

Tell me what I could have done better or what you think I should change. Also... I am not very familiar with using setTimeout(). I have implemented it in my JS but I don't want it to constantly run, is there a way to only have the timeout run after the submit button is pressed? Or if there is a better way to have a preset timout. Thanks in advance for your help.

I was not sure how I could achieve the "cut-off corner" look in the desktop view for the woman online image. If anyone knows how to get this to work let me know. I tried using z-index but I am not experienced enough to get it to work. Unless there is another way. Any suggestions are appreciated. Also anything wider than 1440px, the orange box will move because I used absolute positioning, How do I make it stay where I want it with all larger screen sizes? Thanks in advance. Other than that completing this challenge taught me about the <details> HTML tag and how to use it.

I loved coding this one! If you think there is a better way that I could have accomplished this output let me know.

Enjoyed creating this one! What could I have done better or differently?

This one was not as difficult as the last. I just had minimal time to work on challenges last week but I got it done! Let me know what I could have done better. Thanks! ❤ 🙃

The fine details of this one threw me for a loop...

1. I do not know how to get the error message to display underneath the text box.
2. I could not get the social buttons at the bottom of the page to work correctly in the hover state. the icon and the outline change colors separately.
3. Yes I know my CSS is very long and could use some cleaning up but I was struggling 😅
4. Don't be afraid to pick my solution apart so I can improve! Thanks :D

I have never used grid before and it took me a little while to cram the info into my head and then try to execute it but once I completed it I felt good about my solution. Let me know if there was a better way to achieve the final result or if I missed any details. Thanks! :D