Kaoru Kawashima - Code Challenge

[altoinu]

Hello! Here is the completed Think Company code challenge - SEPTA Rail Fare Calculator. I developed this using React.

Required

Node.js (v23.5.0) https://nodejs.org/

Initial set up

npm install

To run

npm run dev

...then open in web browser: http://localhost:5173/

Some of the expected behaviors

• Initially loads fares.json via JavaScript fetch. Loading spinner covers entire widget while loading (you should see something flashing really quick, since .json is local and loads almost immediatelly).
• Widget stretches to fill width 100%.
• Select boxes populated using data from fares.json.
• Making selections in all sections will make widget automatically calculate and display fare at the bottom.
• Changing any selection updates calculated fare.
• Selecting "Anytime" option for "When are you riding?" will get "Special pricing" label to display. <input> for Number of rides will also update so steps become increments of however many trips the special pricing is for.

SEPTA.Rail.Fare.Calculator.mov

Nice to have's if there was more time to work on this

• pixel perfect styles, fonts, etc. (had to guess fonts, colors, sizes from screenshot)
• unit tests
• actually integrating with remote API instead of using local .json
• performance improvements? (ex. checking with Chrome Lighthouse, etc.)