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

HTML CSS Javascript

Tesla_Ambassadorβ€’ 2,980

@tesla-ambassador

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


Hey guys I am kind of new.. I had problems with my range slider's color changing when I inspected the site.... plus a few more other problems. Think you could help?

Community feedback

P
The Burrito Doggieβ€’ 1,260

@BurritoDoggie

Posted

hey! You changed a bunch of things that are pretty obvious like the 'monthly billing' and the 'yearly billing'. I think fixing them would be good. But everything else is pretty cool:).

Keep Coding!

                               (@@)
                                \__/
2
P
ApplePieGiraffeβ€’ 30,545

@ApplePieGiraffe

Posted

What's up, Tesla_Ambassador? πŸ‘‹

Congratulations on completing your first Frontend Mentor challenge! πŸŽ‰ I knew you could do it! πŸ˜„ Great effort on this challenge! πŸ™Œ

For a small component such as this one, I suggest using an <article> tag for the component card itself and not using any <section> tags inside of the card component (since those require a heading to identify them and they are generating some errors on your solution report).

I also think you should a label to the slider (or identify it in some other way) to make your solution more accessible. πŸ™‚

As for the design, if you make the card component a little wider, you'll have more space to position the contents of the card more like the original design (and prevent some line breaks in places like "Monthly Billing" and "Yearly Billing" or the discount tag).

And for some next steps, you could work on getting the functionality of the monthly/yearly toggle-switch. πŸ˜‰

We all get better with practice, so keep it up! πŸ‘

And dude, you knowβ€”keep coding (and happy coding, too)! 😁

2
Tesla_Ambassadorβ€’ 2,980

@tesla-ambassador

Posted

Arigato sensei So I guess there was a bunch of stuff I missed out but thanks for pointing those things out am going to make corrections to my code bro! It was kind of a hustle to post it but thanks for the help Happy coding too and I will let you know as soon I as I correct my code (laughing emoji)

1

P
ApplePieGiraffeβ€’ 30,545

@ApplePieGiraffe

Posted

@tesla-ambassador

Haha, no problem! πŸ˜„

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