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 and javascript to build the page.

@abhikulshrestha22

Desktop design screenshot for the Pricing component with toggle coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


How to toggle the price (annually or monthly) without JS. As toggle button and price are not being direct parents /child or sibling relationship.

Community feedback

P

@nityagulati

Posted

Nice work, Abhishek! The page looks good and is responsive. Few suggestions to improve upon the code --

  1. Instead of using <div> tags for the card details, you should use <ul> as they are a list of features.

  2. Use meaningful, descriptive class names to style the elements such as card-list or card-details instead of row.

  3. Instead of adding another div - extra-height and applying height to it, you can simply add padding-top and padding-bottom to the card-selected element.

  4. I believe you are overusing the display: flex property on some elements that don't necessarily require it. The main element that needs it is cards container that holds and aligns all three cards next to each other.

  • card class (applied to each card) doesn't require flex property because <div> elements are block elements and are naturally aligned in columnar/vertical orientation.
  • row doesn't require flex as you don't have any child elements within the rows that need to be aligned. Also if you use <ul> instead of row divs then they will be listed as a list (column) naturally.
  • you can remove all the accompanying flex properties from these elements as well. flex-direction align-content justify-content align-items.
  1. You can instead use text-align: center on card class to align the content within the cards.

  2. Removing Flex from card will resize the buttons. You can use width: -webkit-fill-available for the buttons to stretch or specify a width using % (responsive) or px.

Keep up the good work!

1

@sauravchamoli17

Posted

Very well done on your project. Keep up the good work!

1
P
Matt Studdert 13,611

@mattstuddert

Posted

Really nice work Abishek! You've received some amazing feedback from Nitya already, so I'll just jump straight to your question. In order to get the toggle working without JS you'd need to re-structure your HTML to make the input element a sibling of the element you've currently got an ID of cards on. Then your selector would look something like this: input:checked ~ #cards .yearPrice.

Great work on this challenge. Keep it up! 👍

0

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