Users should be able to:
- View the optimal layout for each page depending on their device's screen size
- See hover states for all interactive elements throughout the site
- Make selections to create a coffee subscription and see an order summary modal of their choices
The interactive subscription page has a number of specific behaviours, which are listed below:
- If "Capsule" is selected for the first option
- The "Want us to grind them?" section should be disabled and not able to be opened
- Order summary texts updates
- If "Capsule" is selected, update the order summary text to:
- "I drink my coffee using Capsules"
- Remove the grind selection text
- If "Filter" or "Espresso" are selected, update the order summary text to:
- "I drink my coffee as Filter||Espresso"
- Keep/Add the grind selection text
- For all other selections, add the selection title in the blank space where appropriate
- If "Capsule" is selected, update the order summary text to:
- Updating per shipment price (shown in "How often should we deliver?" section at the bottom) based on weight selected
- If 250g weight is selected
- Every Week price per shipment is $7.20
- Every 2 Weeks price per shipment is $9.60
- Every Month price per shipment is $12.00
- If 500g weight is selected
- Every Week price per shipment is $13.00
- Every 2 Weeks price per shipment is $17.50
- Every Month price per shipment is $22.00
- If 1000g weight is selected
- Every Week price per shipment is $22.00
- Every 2 Weeks price per shipment is $32.00
- Every Month price per shipment is $42.00
- If 250g weight is selected
- Calculating per month cost for the Order Summary modal
- If Every Week is selected, the Order Summary modal should show the per shipment price multiplied by 4. For example, if 250g weight is selected, the price would be $28.80/month
- If Every 2 Weeks is selected, the Order Summary modal should show the per shipment price multiplied by 2. For example, if 250g weight is selected, the price would be $19.20/month
- If Every Month is selected, the Order Summary modal should show the per shipment price multiplied by 1. For example, if 250g weight is selected, the price would be $12.00/month
- Live Site URL: coffeeroasters live
- React - JS library
- React hooks
- React-router-dom - for page navigation
- Semantic HTML5 markup
- sass setting up instruction
- parceljs for sass compiling
- Flexbox
- CSS Grid
- Mobile-first workflow
formatting a string into currency Intl.NumberFormat
create number formatter
const formatter = new Intl.NumberFormat("en-US", {
style: 'currency',
currency: 'USD',
})
//USAGE
formatter.format(2500); //result $2, 500.00
If you want more help with writing markdown, we'd recommend checking out The Markdown Guide to learn more.
- mobile navigation, it is not closing when a selection has been made . Has to be closed by pressing the close button again