Issue#1181 fixed.Added age calculator project with the required changes

ParnaRoyChowdhury777 · Jul 12, 2024 · d4cd94f · d4cd94f
1 parent 8f67315
commit d4cd94f
Show file tree

Hide file tree

Showing 19 changed files with 374 additions and 42 deletions.
diff --git a/Web Development/Basic/Age_Calculator/.eslintrc.cjs b/Web Development/Basic/Age_Calculator/.eslintrc.cjs
@@ -0,0 +1,21 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react/jsx-no-target-blank': 'off',
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/Web Development/Basic/Age_Calculator/.gitignore b/Web Development/Basic/Age_Calculator/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/Web Development/Basic/Age_Calculator/Images/age_calculator_ss.png b/Web Development/Basic/Age_Calculator/Images/age_calculator_ss.png
diff --git a/Web Development/Basic/Age_Calculator/Images/calendar.svg b/Web Development/Basic/Age_Calculator/Images/calendar.svg
diff --git a/Web Development/Basic/Age_Calculator/Images/favicon.png b/Web Development/Basic/Age_Calculator/Images/favicon.png
diff --git a/Web Development/Basic/Age_Calculator/README.md b/Web Development/Basic/Age_Calculator/README.md
@@ -0,0 +1,93 @@
+# Age Calculator
+
+## Project Overview
+
+Age Calculator is a simple yet powerful web application built using ReactJS and TailwindCSS. The primary function of this application is to calculate the age of a person based on their date of birth. It accurately calculates and displays the age in terms of years, months, and days. Additionally, the application includes robust error handling to ensure that users cannot select a future date as a date of birth.
+
+## Features
+
+- **Accurate Age Calculation**: Calculates age in years, months, and days.
+- **Responsive Design**: Built with TailwindCSS for a clean and responsive user interface.
+- **Error Handling**: Ensures no future date can be selected as the date of birth.
+- **User-Friendly Interface**: Simple and intuitive interface for ease of use.
+
+## Technologies Used
+
+- **ReactJS**: A JavaScript library for building user interfaces.
+- **TailwindCSS**: A utility-first CSS framework for rapidly building custom user interfaces.
+
+## Getting Started
+
+### Prerequisites
+
+Make sure you have the following installed on your system:
+
+- Node.js (v14 or higher)
+- npm (v6 or higher)
+
+### Installation
+
+1. **Clone the repository:**
+
+   ```bash
+   git clone https://github.com/your-username/age-calculator.git
+   ```
+
+2. **Navigate to the project directory:**
+
+   ```bash
+   cd age-calculator
+   ```
+
+3. **Install the dependencies:**
+
+   ```bash
+   npm install
+   ```
+
+### Running the Application
+
+To start the application, run:
+
+```bash
+npm start
+```
+
+This will start the development server and you can view the application in your browser at `http://localhost:3000`.
+
+## Screenshots
+
+![Age Calculator](./Images/age_calculator_ss.png)
+
+## Deployment link
+
+[Age Calculator](https://age-calculator-rho-two.vercel.app/) - Click here to view the live application.
+
+## Usage
+
+1. **Enter Date of Birth:**
+   - Select your date of birth using the date picker.
+2. **Calculate Age:**
+   - Click the "Calculate Age" button.
+   - The application will display your age in years, months, and days.
+3. **Error Handling:**
+   - If a future date is selected, an error message will be displayed prompting you to select a valid date of birth.
+
+## Contributing
+
+Contributions are welcome! If you have any suggestions or find any bugs, please open an issue or create a pull request.
+
+1. Fork the repository.
+2. Create a new branch (`git checkout -b feature-branch`).
+3. Make your changes.
+4. Commit your changes (`git commit -m 'Add some feature'`).
+5. Push to the branch (`git push origin feature-branch`).
+6. Open a pull request.
+
+## Contact
+
+For any questions or suggestions, feel free to contact me at [parnaroychowdhury2020@gmail.com].
+
+---
+
+Thank you for using Age Calculator! Enjoy calculating your age with ease and accuracy.
diff --git a/Web Development/Basic/Age_Calculator/index.html b/Web Development/Basic/Age_Calculator/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image" href="favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Age Calculator</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/Web Development/Basic/Age_Calculator/package.json b/Web Development/Basic/Age_Calculator/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "age-calculator",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-datepicker": "^6.1.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.56",
+    "@types/react-dom": "^18.2.19",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.17",
+    "eslint": "^8.56.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
+    "vite": "^5.1.4"
+  }
+}
diff --git a/Web Development/Basic/Age_Calculator/postcss.config.js b/Web Development/Basic/Age_Calculator/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/Web Development/Basic/Age_Calculator/public/favicon.png b/Web Development/Basic/Age_Calculator/public/favicon.png
diff --git a/Web Development/Basic/Age_Calculator/src/App.jsx b/Web Development/Basic/Age_Calculator/src/App.jsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import { useState } from 'react';
+import { AgeCalculatorForm } from './components/AgeCalculatorForm'
+import AgeResult from './components/AgeResult';
+import Image from './assets/calendar.svg';
+
+
+const App = () => {
+
+    const [age, setAge] = useState(null);
+
+    const calculateAge = (date) => {
+        const birthDate = new Date(date);
+        const age_in_diff_ms = Date.now() - birthDate.getTime();
+        const ageDate = new Date(age_in_diff_ms);
+        const years = ageDate.getUTCFullYear() - 1970;
+        const months = ageDate.getUTCMonth();
+        const days = ageDate.getUTCDate() - 1;
+        setAge({years, months, days});
+    };
+    return (
+      <>
+      <div className='flex flex-col md:flex-row justify-end bg-slate-50'>
+        <div className='self-center w-full md:w-1/2'>
+          <h1 className='text-5xl font-bold tracking-wider my-12 text-center text-slate-600'>Age Calculator</h1>
+          <h3 className='text-2xl text-center text-stone-400'>Uncover the Secrets of Time: Calculate Your Age with Precision!</h3>
+          <AgeCalculatorForm calculateAge={calculateAge} />
+          {age && <AgeResult age={age} />}
+        </div>
+        <img src={Image} alt='calendar' className='w-full md:w-1/2' />
+      </div>
+      <footer className='text-center text-stone-400 text-xl bg-slate-50'>&copy; Made with &hearts; by PRC</footer>
+      </>
+    )
+};
+
+export default App
diff --git a/Web Development/Basic/Age_Calculator/src/assets/calendar.svg b/Web Development/Basic/Age_Calculator/src/assets/calendar.svg
diff --git a/Web Development/Basic/Age_Calculator/src/components/AgeCalculatorForm.jsx b/Web Development/Basic/Age_Calculator/src/components/AgeCalculatorForm.jsx
@@ -0,0 +1,52 @@
+import React from 'react'
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+
+export const AgeCalculatorForm = ({calculateAge}) => {
+    const [date, setDate] = useState('');
+
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        calculateAge(date);
+    };
+
+    const getCurrentDate = () => {
+        const today = new Date();
+        const year = today.getFullYear();
+        let month = today.getMonth() + 1;
+        let day = today.getDate();
+
+
+        if (month < 10) {
+          month = '0' + month;
+        }
+        if (day < 10) {
+          day = '0' + day;
+        }
+
+        return `${year}-${month}-${day}`;
+      };
+
+
+
+    return (
+    <div>
+    <form onSubmit={handleSubmit} className='flex-col'>
+        <input type='date' className='block mx-auto my-10 p-3 border-2 border-gray-300 rounded-md cursor-text' value={date} onChange={e => setDate(e.target.value)} max={getCurrentDate()}/>
+        <div className='text-center'>
+          <button
+            type="submit"
+            className="mx-auto p-3 bg-purple-800 text-white rounded-md hover:bg-green-900 cursor-pointer"
+            disabled={!date}
+          >
+            Calculate Age
+          </button>
+        </div>
+    </form>
+    </div>
+  );
+};
+
+AgeCalculatorForm.propTypes = {
+    calculateAge: PropTypes.func.isRequired,
+};
diff --git a/Web Development/Basic/Age_Calculator/src/components/AgeResult.jsx b/Web Development/Basic/Age_Calculator/src/components/AgeResult.jsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import PropTypes from 'prop-types';
+
+
+const AgeResult = ({age}) => {
+    return (
+      <div>
+        <h3 className='text-2xl text-center mt-10'>You are <span className='font-bold text-red-800'>{age.years}</span> years, <span className='font-bold text-red-800'>{age.months}</span> months and <span className='font-bold text-red-800'>{age.days}</span> days old.</h3>
+      </div>
+    )
+}
+AgeResult.propTypes = {
+    age: PropTypes.shape({
+        years: PropTypes.number.isRequired,
+        months: PropTypes.number.isRequired,
+        days: PropTypes.number.isRequired,
+    })
+};
+export default AgeResult
diff --git a/Web Development/Basic/Age_Calculator/src/index.css b/Web Development/Basic/Age_Calculator/src/index.css
@@ -0,0 +1,7 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
+
+
+
diff --git a/Web Development/Basic/Age_Calculator/src/main.jsx b/Web Development/Basic/Age_Calculator/src/main.jsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
diff --git a/Web Development/Basic/Age_Calculator/tailwind.config.js b/Web Development/Basic/Age_Calculator/tailwind.config.js
@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+
diff --git a/Web Development/Basic/Age_Calculator/vite.config.js b/Web Development/Basic/Age_Calculator/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})