Generic Calculator Simulator

Build a clean and modern calculator simulator based on the provided design. The page should include a top navigation area, hero heading, a calculator form card, a totals summary card, and a bottom information or help section. Use HTML for structure, CSS for styling, and JavaScript for simple interactions such as reading form input values, updating totals dynamically, and syncing the dilution slider value. The final result should focus on a polished layout, clean form design, card-based UI, and responsive behavior.

Core Build

Project Requirements

Build the full calculator page based on the provided design
Use semantic HTML5 structure
Style the full interface using CSS
Use JavaScript for calculator interactions
Create a top navigation bar with logo and auth buttons
Build a hero section with title and subtitle
Create a calculator form card with grouped input sections
Add fields for company name, country, currency, annual amount, quantity of options, strike price, and outstanding shares
Create a range slider for expected additional dilution
Display the current slider value beside the slider
Build a totals summary card on the right side
Update total values dynamically when inputs change
Add a bottom help or information section
Use hover and active states for buttons and form elements
Make the layout responsive for tablet and mobile devices
Keep code clean and organized across HTML, CSS, and JavaScript files

Submission Open

Ready to submit your solution?

Upload your project for mentor review and showcase your structure, polish, and implementation quality.

120+ developers joined

Login Required

You need to be logged in to submit your solution for this challenge.