Drink_Water/30_days_of_javascript #313

[yashmadke]

Add Drink Water Project

Project Overview

• Name: Drink Water
• Purpose: To visually track and encourage daily water consumption of 2 liters.
• Files Added:
  • index.html: The main HTML file that structures the application.
  • script.js: JavaScript to handle the interactivity, including the filling of cups and updating of the water consumption display.
  • style.css: CSS for styling the application, providing a clean and responsive design.

Features

• Interactive Cups: Users can click on the cups to mark their water intake, which updates the main display.
• Real-Time Progress: The app shows the percentage of the water goal achieved and the remaining amount needed to reach 2 liters.
• Responsive Design: The application is styled for usability across different screen sizes.

Implementation Details

• HTML: The structure includes a title, goal statement, interactive cups, and a script link for interactivity.
• JavaScript: The script manages the state of the cups and updates the large cup's visual display to reflect progress.
• CSS: Styling uses variables and ensures a visually appealing, user-friendly interface.

Testing

• The project has been tested locally to ensure all functionalities work as expected:
  • Clicking cups correctly updates the water intake display.
  • The remaining water and percentage indicators dynamically adjust as cups are selected.
  • The design remains consistent across different screen sizes.

Issue No: #313

[github-actions[bot]]

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. In the meantime, please ensure that your changes align with our [CONTRIBUTING.md]. If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊