diff --git a/Projects/Age Calculator/public/favicon.ico b/Projects/Age Calculator/public/favicon.ico new file mode 100644 index 00000000..2e95471f Binary files /dev/null and b/Projects/Age Calculator/public/favicon.ico differ diff --git a/Projects/Age Calculator/public/index.html b/Projects/Age Calculator/public/index.html new file mode 100644 index 00000000..c1e3b76b --- /dev/null +++ b/Projects/Age Calculator/public/index.html @@ -0,0 +1,21 @@ + + + + + + + + + + + + + Age Calculator + + +
+ + diff --git a/Projects/Age Calculator/public/logo192.png b/Projects/Age Calculator/public/logo192.png new file mode 100644 index 00000000..fc44b0a3 Binary files /dev/null and b/Projects/Age Calculator/public/logo192.png differ diff --git a/Projects/Age Calculator/public/logo512.png b/Projects/Age Calculator/public/logo512.png new file mode 100644 index 00000000..a4e47a65 Binary files /dev/null and b/Projects/Age Calculator/public/logo512.png differ diff --git a/Projects/Age Calculator/public/manifest.json b/Projects/Age Calculator/public/manifest.json new file mode 100644 index 00000000..080d6c77 --- /dev/null +++ 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 new file mode 100644 index 00000000..e9e57dc4 --- /dev/null +++ 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 new file mode 100644 index 00000000..2e9cc096 --- /dev/null +++ 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 new file mode 100644 index 00000000..0722ead9 --- /dev/null +++ b/Projects/Age Calculator/src/App.js @@ -0,0 +1,13 @@ + +import "./App.css"; +import Agecalc from "./component/agecalc"; + +function App() { + return ( +
+ +
+ ); +} + +export default App; diff --git a/Projects/Age Calculator/src/App.test.js b/Projects/Age Calculator/src/App.test.js new file mode 100644 index 00000000..1f03afee --- /dev/null +++ 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(); + 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 new file mode 100644 index 00000000..86bab682 Binary files /dev/null and b/Projects/Age Calculator/src/bg.jpg differ diff --git a/Projects/Age Calculator/src/component/agecalc.css b/Projects/Age Calculator/src/component/agecalc.css new file mode 100644 index 00000000..127a4db0 --- /dev/null +++ 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; + } \ No newline at end of file diff --git a/Projects/Age Calculator/src/component/agecalc.js b/Projects/Age Calculator/src/component/agecalc.js new file mode 100644 index 00000000..cc0feebd --- /dev/null +++ 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 ( +
+ {/*
*/} +

AGE CALCULATOR

+

Want to find out how old you are?

+
+
+ +
+
+ setBirthdate(e.target.value)} name="date" id="datei" required /> +
+ +
+

You are

+
+
+

{age.years}

+

{age.months}

+

{age.days}

+
+
+

years

+

months

+

days

+
+
+

old

+
+
+

Made with by Komal Agarwal

+
+
+ {/*
*/} +
+ ) +}; + diff --git a/Projects/Age Calculator/src/index.css b/Projects/Age Calculator/src/index.css new file mode 100644 index 00000000..ec2585e8 --- /dev/null +++ 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 new file mode 100644 index 00000000..d563c0fb --- /dev/null +++ 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( + + + +); + +// 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 new file mode 100644 index 00000000..9dfc1c05 --- /dev/null +++ b/Projects/Age Calculator/src/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Projects/Age Calculator/src/reportWebVitals.js b/Projects/Age Calculator/src/reportWebVitals.js new file mode 100644 index 00000000..5253d3ad --- /dev/null +++ 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 new file mode 100644 index 00000000..8f2609b7 --- /dev/null +++ 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 new file mode 100644 index 00000000..a38bfeab Binary files /dev/null and b/backend/public/img/agecalc.png differ diff --git a/backend/public/projects.json b/backend/public/projects.json index f86cdb04..eaa5e46a 100644 --- 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" } ] \ No newline at end of file