All solutions

My first try using Tailwind CSS - it's pretty easy to pick up if you're already comfortable using CSS.

Had fun getting more comfortable with Svelte components. I couldn't figure out how to adjust the fill colour of SVGs on hover using CSS classes, so if anyone knows how to do this (without including the SVG code inline) it'd be a great help. Thanks!

This is my first project using Svelte. It took a while to figure out the syntax and the deployment, but I think it'll be very useful when I start to make more interactive apps. Keen to hear your suggestions if you're experienced with Svelte!

Happy to hear your suggestions!

I felt I did well with the appearance & theming, but the calculator output display isn't perfect.

I'm new to asynchronous programming. Ideally, I would like to build a cache of a few pieces of advice to ready to load instantly when the user clicks the advice button. I couldn't figure out how to create a while loop to populate a cache on a continuous loop, and not consume too much memory. Is there a way for me to create an asynchronous loop where:

• every 1 second, a function is run. Then, the loop waits for the function to finish before continuing Let me know if you have any good resources for starting out in this kind of async programming :) Thanks

I figured out pretty early that range inputs are styled differently in Chrome vs Firefox, and decided to focus on the styling within Chrome. I'm aware that I can add some more CSS for other browsers and accessibility, but for now I want to keep this fun :)

A question for you - what other elements are you aware of that are styled differently based on the browser? I'd rather keep those elements out of my personal projects.

Super happy with this solution - my progress was again made much smoother by using BEM conventions for the HTML & CSS. I'm not interested in coding for accessibility but I'd love to hear your suggestions regarding the CSS/JS design and HTML semantics!

I used the BEM convention for naming my HTML elements, and I had a great experience! I'd strongly recommend looking into it if you spend too much time dealing with styling collisions or coming up with perfect names for your elements.

I got frustrated writing the CSS on this one as I didn't consider the states that different elements would need to be in (expandable dropdown elements, sidebar, etc.). Lesson learned - don't mix utility CSS classes with applying styling to specific elements.

Pretty happy with this. Feel free to let me know how you'd simplify the HTML/CSS, particularly the parts where I positioned elements absolutely. Thanks!

My first junior-level project! It took me a while to figure out the JavaScript form validation, but I learnt a lot along the way.

I feel like I could have removed some of the duplication in my JavaScript validation code, but I decided against it as there were some things that varied for each input that needed to be validated (updating the values displayed on the card, allowing different ranges of values, providing slightly different error messages, etc.). Would love to hear your input on my JS setup.

Took about 30min. Getting faster :)

Quick and easy. I'm getting better at this :)

This was a challenging one - I needed to redo the HTML/CSS a couple of times to get something I thought was clean enough. Not 100% happy with the readability of the HTML/CSS code in the end, but I certainly improved a lot and I'm happy with the final result.

This is my first time integrating JS into a web page to add styling dynamically! Do you think there are any cleaner ways I can structure the CSS? I felt like the rating class wasn't necessary, but it was the easiest way to select the rating elements in the JS.

Happy with the result. Only took me 2 hours this time!

I'm brand new to media queries and responsive design! Is there any obvious CSS duplication I can remove or a cleaner way to manage the media query?