All solutions

This was my first time using Tailwind and Typescript, although typescript I didn't dive into at all since the logic for the list was too simple and I'm not experienced it with it. I really like tailwind, if you had the measurements already prepared with a solid HTML structure you can do things quite fast and have a fluid layout, I'm really looking forward to next times I'm gonna use it, if not to be a staple to be an option I can comfortably use. For the next time I'd like to make some components for set of properties repeated too much, think you can already see how messy classes are here and I'd like to work on that next time, could've definetely factored more there. Damn I like not having to name classes lmao

This was my first time handling multiple themes for a web page, I couldn't wait to do it sooner or later. The CSS side of the challenge I'm really happy with, maybe the top side of the calculator uses too many flexboxes but don't cause any problem. I basically use 0 media queries since the content takes straight 100vh and the calculator just needs a max-width to contain for desktop view, so it's all good. It was planned as mobile-first though, and it looks good there The calculator logic in Javascript though is REALLY messy, I did came up with it on my own, but it's basically reinventing the wheel. It's something you just take from somewhere else probably, but I did practice some DOM manipulation and switch so it's all good.

One thing I'd like to ask people reading, I wanted to implement the possibility to drag the slider for the themes, but deemed it too complicated, was it easy enough for me to do? I might still implement it to get some eventListener experience under my belt

This challenge had a couple of interesting styles that made me learn interesting set of properties, for example the font of the counter split in two colors, or the background images needing some tweaking to look like I wanted too. The background for the footer needed to be on top of the background for the main section, and I achieved this by setting the latter to fixed. All in all, I learned a lot about backgrounds with this challenge, and I learned to use pseudo elements and colors in new interesting ways.

The first thing to handle was the menus that pop-up in the navigation bar, I wanted to implement both a timer that deactivated them when you go away and leaving only one of them open. The rest of the page was easy, beside some figuring out the right size for the main heading, since the pop-up menus needed to be right above it. The grid is simply split into two equals section with a text and an image.

The part a bit more challenging was implementing the side menu for the mobile version, not as much implementing the side menu perse but more how to handle a different type of event for the pop menus. The pop menu are not anymore a floating element in the page but open up naturally in the navigation bar, using an hover effect for them didn't look right at all so I used a simple click event for them.

By using a window.matchMedia with the right query, the events are changed dynamically by assigning new ones and removing the old ones. The event only triggers when the query threshold is reached so it's really mostly for shows than anything, mobile users would never need to worry about that.

Handling the text on image was by far the hardest part of this challenge, what helped was setting the text with a max-width. Still, wasn't able to give borders and error messages to the form, overral I'm happy I managed to get it to this point and I'm dying to see what other people came up with. This challenge I am the least satisfied with but was the most fun

added challenge, still don't know how to handle error messages so I wasn't able to implement them

The layout responds well to both mobile and desktop, the trick I used to have the decorations in the background move accordingly is setting a positive vw value and a negative vh value, the objects are both positioned absolutely and move decently as the pages gets smaller

Teached me I should find good ways to deal with images, especially on smaller screens

wrote the whole site, still bare html and css