SyedImtiyaz-1 · komal-agarwal5 · Jun 26, 2024 · Jun 26, 2024
diff --git a/Projects/Age Calculator/public/favicon.ico b/Projects/Age Calculator/public/favicon.ico
diff --git a/Projects/Age Calculator/public/index.html b/Projects/Age Calculator/public/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  </head>
+    <title>Age Calculator</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/Projects/Age Calculator/public/logo192.png b/Projects/Age Calculator/public/logo192.png
diff --git a/Projects/Age Calculator/public/logo512.png b/Projects/Age Calculator/public/logo512.png
diff --git a/Projects/Age Calculator/public/manifest.json b/Projects/Age Calculator/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/Projects/Age Calculator/public/robots.txt b/Projects/Age Calculator/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/Projects/Age Calculator/src/App.css b/Projects/Age Calculator/src/App.css
@@ -0,0 +1,3 @@
+body{
+  background-color: rgb(199, 228, 228);
+}
diff --git a/Projects/Age Calculator/src/App.js b/Projects/Age Calculator/src/App.js
@@ -0,0 +1,13 @@
+
+import "./App.css";
+import Agecalc from "./component/agecalc";
+
+function App() {
+  return (
+    <div>
+      <Agecalc/>
+    </div>
+  );
+}
+
+export default App;
diff --git a/Projects/Age Calculator/src/App.test.js b/Projects/Age Calculator/src/App.test.js
@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});
diff --git a/Projects/Age Calculator/src/bg.jpg b/Projects/Age Calculator/src/bg.jpg
diff --git a/Projects/Age Calculator/src/component/agecalc.css b/Projects/Age Calculator/src/component/agecalc.css
@@ -0,0 +1,82 @@
+.container {
+    text-align: center;
+    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+  }
+  .minicont{
+    /* display:inline-block; */
+    display:inline-block;
+    border: 1px solid black;
+    /* margin-top: 25px; */
+    padding: 5px 20px;
+    /* background-image: radial-gradient( circle at 40% 20%,  rgb(160, 235, 232) 0%, rgb(118, 136, 184) 90% ); */
+    background: linear-gradient(360deg, rgb(173, 235, 233) 0%, rgb(141, 175, 219) 100%);
+    border-radius: 10px;
+  }
+  /* .bgimg{
+    opacity:"50%";
+  } */
+  .heading{
+    letter-spacing: 1.5px;
+  }
+  .ask{
+
+    letter-spacing: 1.5px;
+  }
+  .btn{
+    margin-top: 20px;
+    padding: 10px 20px;
+    font-size: 1.2rem;
+    border: none;
+    /* background-color: #3c3fbe; */
+    background-color: rgb(35, 35, 184);
+    color: white;
+    cursor: pointer;
+    border-radius: 7px;
+  }
+  .output{
+    /* display: none; */
+  }
+  .box{
+    display: flex;
+    justify-content:center;
+    margin-top: -15px;
+    gap: 20px;
+    align-items: center;
+  }
+  .box p{
+    border: 1px solid blue;
+    margin: 20px 20px;
+    padding: 20px 20px;
+    background-color: rgb(192, 227, 228);
+  }
+  .cont{
+    display: flex;
+    justify-content:space-around;
+    margin-top: -15px;
+    /* gap:70px; */
+    align-items: center;
+  }
+  .cont p{
+    font-size: large;
+  }
+  .old{
+    margin-top: -3px;
+  }
+  .footer{
+    background-color: #4b4949;
+    color: white;
+    text-align: center;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 25px;
+  }
+  .footer p{
+    font-size: 1.1rem;
+    margin-top: 0px;
+  }
+  .footer a{
+    text-decoration: none;
+    color: white;
+  }
diff --git a/Projects/Age Calculator/src/component/agecalc.js b/Projects/Age Calculator/src/component/agecalc.js
@@ -0,0 +1,70 @@
+import React ,{useState} from 'react'
+// import ReactDOM from 'react-dom';
+import './agecalc.css'
+export default function Agecalc() {
+    const [birthdate, setBirthdate] = useState('');
+    const [age, setAge] = useState(0);
+
+    const calculateAge = () => {
+        const today = new Date();
+        const birthdateDate = new Date(birthdate);
+
+        if(birthdateDate > today){
+            alert("Please enter a valid date of birth");
+            return;
+        }
+
+        let years = today.getFullYear() - birthdateDate.getFullYear();
+        let months = today.getMonth() - birthdateDate.getMonth();
+        let days = today.getDate() - birthdateDate.getDate();
+
+        if (months < 0 || (months === 0 && days < 0)) {
+          years--;
+          months += 12;
+        }
+
+        if (days < 0) {
+          const prevMonthLastDay = new Date(today.getFullYear(), today.getMonth(), 0).getDate();
+          days += prevMonthLastDay;
+          months--;
+        }
+        setAge({ years, months, days });
+    };
+  return (
+    <div className="container">
+      {/* <div className="bgimg" style={{ backgroundImage:`url(${bg})`,backgroundRepeat:"no-repeat",backgroundSize:"cover", height:600,width:1300}}> */}
+      <h1 className="heading">AGE CALCULATOR</h1>
+      <h2 className="subheading">Want to find out how old you are?</h2>
+      <div className="minicont">
+      <div>
+      <label htmlFor='birthdate' className="ask"><h2>Enter your date of birth</h2></label>
+      </div>
+      <div>
+      <input className="date" type="date" value={birthdate} onChange={e => setBirthdate(e.target.value)} name="date" id="datei" required />
+      </div>
+      <button className="btn" onClick={calculateAge}>Calculate</button>
+      <div className="output">
+        <h2>You are </h2>
+        <div className="opcont">
+          <div className="box">
+            <p>{age.years}</p>
+            <p>{age.months}</p>
+            <p>{age.days}</p>
+          </div>
+          <div className="cont">
+            <p>years</p>
+            <p>months</p>
+            <p>days</p>
+          </div>
+        </div>
+        <p className='old'>old</p>
+      </div>
+      <div className="footer">
+        <p>Made with <svg xmlns="http://www.w3.org/2000/svg" height="15" width="15" fill="white" viewBox="0 0 512 512"><path d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/></svg>  by <a href="https://www.linkedin.com/in/komal-agarwal-95a3a026a" target="_blank" rel="noopener noreferrer"> Komal Agarwal</a></p>
+      </div>
+      </div>
+      {/* </div> */}
+    </div>
+  )
+};
+
diff --git a/Projects/Age Calculator/src/index.css b/Projects/Age Calculator/src/index.css
@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
diff --git a/Projects/Age Calculator/src/index.js b/Projects/Age Calculator/src/index.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();
diff --git a/Projects/Age Calculator/src/logo.svg b/Projects/Age Calculator/src/logo.svg
diff --git a/Projects/Age Calculator/src/reportWebVitals.js b/Projects/Age Calculator/src/reportWebVitals.js
@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;
diff --git a/Projects/Age Calculator/src/setupTests.js b/Projects/Age Calculator/src/setupTests.js
@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';
diff --git a/backend/public/img/agecalc.png b/backend/public/img/agecalc.png
diff --git a/backend/public/projects.json b/backend/public/projects.json
@@ -583,5 +583,14 @@
     "techstack": "HTML, CSS",
     "slide-img-1": "img/Monopoly_Game.png",
     "slide-img-2": "img/Monopoly_Game.png"
+  },
+  {
+    "courseId": "Age Calculator",
+    "name": "Age Calculator",
+    "image": "img/agecalc.png",
+    "downloadLink": "https://drive.google.com/drive/folders/1ftpLlmUkapDN9kkK8EWM1CAQyuw20mgu?usp=sharing",
+    "techstack": "React Js",
+    "slide-img-1": "img/agecalc.png",
+    "slide-img-2": "img/agecalc.png"
   }
 ]