0
showcase
Shipped: Recipe with adjustable servings
I built a responsive recipe website featuring a Tomato and Basil Pasta recipe, an ingredient list with adjustable quantities, and step-by-step cooking instructions. The website includes plus and minus buttons to change the number of servings, and the ingredient quantities update automatically. I also implemented accessibility features such as keyboard navigation, visible focus indicators, a skip link, and screen-reader announcements when servings change. The layout is designed to adapt to smaller screens, including a 320px viewport, without horizontal scrolling. The project contains index.html for the structure and recipe content, styles.css for styling and responsiveness, script.js for serving calculations, and README.md explaining the design and testing process.
A reviewer can verify the acceptance criteria by opening the website in a browser, changing the servings to confirm that ingredient quantities recalculate correctly, navigating the page using only the keyboard, and checking that the focused element has a visible outline. They can also set the browser viewport to 320px to check for horizontal scrolling, inspect the live status element for screen-reader support, and read the README to understand how the layout behaves on narrow screens. These features have been implemented, but browser and screen-reader testing still needs to be performed to confirm that every criterion passes. The project is available as a ZIP file, but it has not yet been published to GitHub, so a repository URL still needs to be created and verified before submission.
Repository: https://github.com/AMAN-AJWA-FATIMA/DevConnect-Internship
Live: http://0.0.0.0:8000/
Built for the Verified Frontend Internship · accessible layout
Add a comment
0/2000