I chose to use Bootstrap for the overall design and layout to make the page responsive easily across devices. Key choices:
- Container and rows for layout using Bootstrap grid system
- Header, main, and footer sections for clean separation
- Image on left and details on right in main section for visual appeal
Key features added:
- Dynamic pricing based on plan, currency etc using JS
- Image change on color option select using JS
- Unit changes on unit system select using JS
- Clean unordered list for feature highlights
- Select boxes for options to pick plan, color etc
These features enhance user experience and interaction.
Some challenges faced:
- Getting price update logic with currency exchange rates right
- Updating image source correctly on select change
- Ensuring responsiveness across devices
Solved these by:
- Carefully working through different scenarios like how will it look on mobile devices.
- Using a switch statement to pick image name
- Adding media queries based on Bootstrap