Thanks for checking out this front-end coding challenge! This project is part of a Frontend Mentor(https://www.frontendmentor.io) challenge, designed to help you improve your HTML, CSS, and JavaScript skills by building realistic, responsive projects. It's a great way to practice front-end development, enhance your web design abilities, and sharpen your responsive layout techniques.
This project is a Tip Calculator App built with HTML, CSS, and JavaScript. It allows users to quickly and easily calculate the tip amount and total per person based on the bill, selected tip percentage, and the number of people. The app is fully responsive, ensuring a smooth experience across desktop and mobile devices. Developed as part of a Frontend Mentor challenge, this project focuses on creating a user-friendly, accessible, and interactive web application.
Users should be able to:
- View the optimal layout for the app depending on their device's screen size
- See hover states for all interactive elements on the page
- Calculate the correct tip and total cost of the bill per person
Mobile view of my solution: images\Mobile_view.jpeg Desktop view of my solution: images\Desktop_view.jpeg
- Live Site URL: https://tip-calculator-eight-livid.vercel.app/
To build this Tip Calculator App, I started by analyzing the provided design from Frontend Mentor and structured the layout using semantic HTML for better accessibility and SEO. I crafted the visual design with CSS Flexbox and Grid to ensure a responsive and mobile-friendly layout across all screen sizes. The interactive functionality, including real-time tip and total calculations, was implemented using vanilla JavaScript, focusing on clean and efficient code. I continuously tested and refined the design using Chrome DevTools to optimize the app’s responsiveness and user experience.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- JavaScript
- LinkedIn - https://www.linkedin.com/in/sirriayongwa/
- Twitter - https://www.x.com/SirriCodes