diff --git a/README.md b/README.md index f768e33..575c183 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,55 @@ -# React + Vite +
+

⚜️ AGE   CALCULATOR ⚜️

+
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. +
-Currently, two official plugins are available: +### Overview -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh +The Age Calculator App is a React application built with Vite that allows users to calculate their age in years, months, and days. It also features error handling for missing or invalid inputs and includes a night mode and day mode for enhanced user experience. + +### Features + +- Calculate age in years, months, and days +- Error handling for missing or invalid inputs +- Night mode and day mode for UI customization + +### Screenshots + +![Screenshot](/Age%20Calculator/src/assets/Light%20Mode%20Ui.png) +![Screenshot](/Age%20Calculator/src/assets/Night%20Mode%20Ui.png) +![Screenshot](/Age%20Calculator/src/assets/Light%20Mode%20Error.png) +![Screenshot](/Age%20Calculator/src/assets/Night%20Mode%20Error.png) + +### Installation + +### 01. Clone the repository: + ```git +git clone https://github.com/Bloivating-Major/Age-Calculator-CA-.git + ``` + + +### 02. Navigate to the Project Directory: Change your current directory to the project directory: + ```bash + cd '.\Age-Calculator-CA--main\' + ``` + +### 03. Install Dependencies: Install the required dependencies for the project using npm or yarn: + ```npm +npm install +``` + +### 04. Start the Developement Server: +```npm +npm run dev +``` + +This will open the application in your default web browser at http://localhost:3000. + +### 05. Usage: +Input your birthdate in the provided field, click on the "Calculate Age" button to see your age in years, months, and days. Toggle between night mode and day mode for different color themes. + +``` +Make sure to update any other project-specific details as needed. This guide provides clear instructions for new users to clone the repository, install dependencies, start the Vite development server, and access and use the app locally. + +``` diff --git a/src/assets/Light Mode Error.png b/src/assets/Light Mode Error.png new file mode 100644 index 0000000..bb0183e Binary files /dev/null and b/src/assets/Light Mode Error.png differ diff --git a/src/assets/Light Mode Ui.png b/src/assets/Light Mode Ui.png new file mode 100644 index 0000000..8cc7c94 Binary files /dev/null and b/src/assets/Light Mode Ui.png differ diff --git a/src/assets/Night Mode Error.png b/src/assets/Night Mode Error.png new file mode 100644 index 0000000..21cca21 Binary files /dev/null and b/src/assets/Night Mode Error.png differ diff --git a/src/assets/Night Mode Ui.png b/src/assets/Night Mode Ui.png new file mode 100644 index 0000000..396aeb0 Binary files /dev/null and b/src/assets/Night Mode Ui.png differ