All solutions

Hey everyone! Here is my submission for the LoopStudios challenge. I think I may have overcomplicated some of the responsive elements with the use of alot of calc functions. I had recently discovered about the clamp min and max so wanted to try these functions out. As always feedback is greatly appreciated let me know if you have submitted a solution to this project so I can see how others may approach this challenge!

Hey everyone!

For this project I became far more familiar with the range input! With vanilla javascript I could not add eventlisteners to the thumb. I attempted to take away all aesthetics of the original thumb and place a custom div over it to act as the thumb however this took away the functionality of the original slider thumb.

The issue became that the thumb had to be placed in front of the div to maintain functionality. I attempted to hard code the functionality of the slider into the div however this proved too complicated for such a small feature (adding mouseover and mousedown event listeners to the thumb for small aesthetic changes). Has anybody been able to find a reasonable way to add the desired behaviours to the thumb without interfering with the slider?

Let me know if any bugs occur! Would be grateful to received feedback on the JS mainly as I am unfamiliar with best practices.

I'm working towards making my Javascript more modern and elegant. Would appreciate any feedback on the logic and implementation of the javascript! Please comment any sources that you've found helpful in learning about the 'smart' ways to go about these different java script challenges.

Also, on the live website and in my chrom dev tools the website fills the height of the window. Not sure why in the screenshot it doesn't.

This was my first time attempting to make a nav bar that had a dropdown. Any suggestions for a more elegant implementation would be greatly appreciated. I feel like the javascript was a bit too long for the simplicity of the nav bar itself.

Hi everyone! For this project I tried to make the page responsive on a larger range of displays, as opposed to the usual 375px mobile 1440px desktop specifications the guide gives us typically. I have a few questions.

1. It seems that some colors were missing from the style guide. I had to use a color picker on the design images to track them down. Did anyone else notice this?
2. The images for desktop were blurry when on a larger screen also wondering if anybody had this issue?
3. I attempted to use srcset to control the responsive images. (You can see I kept this for the header image) however I ran into issues making it work when switching to a desktop layout as the images actually went smaller in many cases as the layout switched from a 1 column layout to a 2 column layout. I opted to use media queries to display the appropriate images at different screen widths. Did anybody use srcsets? If so how did you make it work?

As always any feedback would be greatly appreciated!

Hey! I made a small change to the layout where I had the accordion container expand as the accordion expanded. To make the accordion expand on click I used an input check box to trigger changes. I have seen other solutions on stack overflow to similar problems use <a> tags too. Would love to hear explanations for why <a> tags may be better for this purpose. If any feedback comes to mind please do not hesitate to write it down as it helps me develop my programming skills :)!

I am wondering if there is a more efficient way to program the buttons. I gave them a general class but then had to use IDs when styling the individual colours and hover behaviours. I feel like there would be an easier way for this.