2
showcase
Shipped: Recipe with adjustable servings
I built a responsive Pâté Chaud recipe page using React, TypeScript, and Vite. The page includes an ingredient list, an ordered cooking method, and a keyboard-accessible slider that adjusts the recipe for 12, 24, or 36 pastries. Changing the slider recalculates the ingredient quantities and triggers an
aria-live announcement for screen-reader users.
A reviewer can verify the acceptance criteria by:
* Using Tab to reach the serving slider and section-navigation links in visual order
* Using the arrow keys to adjust the slider
* Confirming that every interactive element has a visible focus indicator
* Listening for the ingredient-update announcement with a screen reader
* Testing the page at 320px and confirming there is no horizontal scrolling
* Confirming that the Ingredients and Method cards stack vertically on narrow screens
* Using the Ingredients and Method links to move quickly between the two sections
* Reading the README for setup instructions and an explanation of the narrow-screen design
Repository: https://github.com/viveevu11/Adjustable-Recipe
Live: https://adjustable-recipe.vercel.app/
Built for the Verified Frontend Internship · accessible layoutAdd a comment
0/2000