Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Interactive Pricing Component - Vanilla Everything 🍨

Rafal 1,395

@grizhlieCodes

Desktop design screenshot for the Interactive pricing component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


A hopefully simple solution for this challenge. I'll still tweak a few things before (probably) making a YT video on building this particular solution. I'll possibly add some accessibility-friendly bits and pieces once I learn a thing or 2 about adding them for something like a custom-toggle. If someone has any suggestions I'd welcome accessibility tips!

Styling the <input type="range"> was simple and yet very 'long' since you have to replicate code for different selectors for chrome/mozilla and if you're bothered - IE. I wasn't bothered 😕.

Cheers :)

Community feedback

@Duyen-codes

Posted

Great job! as always! :)

Marked as helpful

1

Rafal 1,395

@grizhlieCodes

Posted

@Duyen-codes Thanks! How have you been? Done any interesting projects lately 😬?

0

@Duyen-codes

Posted

@grizhlieCodes Hey! Thanks for asking! I have been learning JS on MDN and working on the blogr landing page (dropdown menu specifically when the nav-item gets clicked/hover, still can't figure out yet). Been feeling quite down, wanted to reach out to you for some inspirations but did not dare to :) I feel like my JS is still quite low so I just go back and forth with it. I understand the concepts but when it comes to real work projects, I feel so confused. How have you been? Anything new to share?

1
Rafal 1,395

@grizhlieCodes

Posted

@Duyen-codes Feel free to reach out whenever. I like helping out. I might make a video on Blogr, it's a relatively difficult challenge for JS 'beginners' I think, I would have definitely struggled with it a few months ago.

And with regards to JavaScript - it simply doesn't make sense until it just does. At some point it just clicks. Annoying comment, I know.

A good 'exercise' to really start understanding JS from a Web-Dev perspective is to just try building everything by using JS. So empty HTML page with a linked script and just go nuts within JS. Use things like document.createElement('div'), adding styling through JS, manipulating DOM elements through JS. I advised this to my friend and whilst the end product looks AWFUL he learned a ton.

And take each problem truly 1 step at a time. Like.. line by line. I have recently attempted 'teaching' some projects that have JS on YouTube channel and I must admit that it's difficult to teach/explain JS. I keep on realising that everything may seem new and scary, so taking it slower always helps.

As for me... hmm. I did a few projects over the last few weeks. Started on the 'Feedback Suggestion App' (the last Guru project I haven't tackled). Made like 3 YT videos in the last month, plan on making one every week now though. Did a V1 of a website-design for my first freelance client, awaiting his feedback :). Had an awesome Xmas with my partner too (just cooking, watching tv series and doing anything else she wanted 🙄🥲 lol).

Feel free to reach out if you need help on anything.

0

@Duyen-codes

Posted

@grizhlieCodes Thanks so much! I truly appreciate your advice! Definitely follow those. Nice to hear about your updates. Hopefully things go well as expected, but even if they don't, I know you'll handle well too. Congrats on the freelance client. Yayyy! hihi. 1 video a week sounds like a very good plan. Keep it up! Reading your comment always has a calming effect on me. Can't thank you enough.

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord