├── now.json
├── README.md
├── src
    ├── index.js
    ├── index.css
    └── App.js
├── .gitignore
├── package.json
└── public
    └── index.html


/now.json:
--------------------------------------------------------------------------------
1 | {
2 |   "version": 2,
3 |   "public": true
4 | }
5 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Life Project
2 | 
3 | ---
4 | 
5 | A simple react App to calculate months lived so far based on your date of birth and how many left based on the approximate life span.
6 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import "./index.css";
4 | import App from "./App";
5 | 
6 | ReactDOM.render(<App />, document.getElementById("root"));
7 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "lifeproject",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@tippy.js/react": "^2.2.2",
 7 |     "react": "^18.2.0",
 8 |     "react-dom": "^18.2.0",
 9 |     "react-scripts": "5.0.1",
10 |     "react-transition-group": "^4.4.5"
11 |   },
12 |   "scripts": {
13 |     "start": "react-scripts start",
14 |     "build": "react-scripts build",
15 |     "test": "react-scripts test",
16 |     "eject": "react-scripts eject"
17 |   },
18 |   "eslintConfig": {
19 |     "extends": "react-app"
20 |   },
21 |   "browserslist": {
22 |     "production": [
23 |       ">0.2%",
24 |       "not dead",
25 |       "not op_mini all"
26 |     ],
27 |     "development": [
28 |       "last 1 chrome version",
29 |       "last 1 firefox version",
30 |       "last 1 safari version"
31 |     ]
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 |   font-family: sans-serif;
 7 |   margin: 0;
 8 |   padding: 2%;
 9 | }
10 | 
11 | #root {
12 |   align-items: start;
13 |   display: grid;
14 |   grid-template-columns: 300px 1fr;
15 |   grid-template-rows: auto auto;
16 |   grid-gap: 2em;
17 | }
18 | 
19 | .years {
20 |   display: grid;
21 |   grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
22 |   grid-gap: 1em;
23 | }
24 | 
25 | form {
26 |   align-items: center;
27 |   display: grid;
28 |   grid-template-rows: repeat(2, 36px 80px) auto;
29 |   justify-items: stretch;
30 | }
31 | 
32 | input {
33 |   padding-left: 10px;
34 |   height: 44px;
35 |   width: 300px;
36 | }
37 | 
38 | input,
39 | button {
40 |   font-size: 16px;
41 | }
42 | 
43 | button {
44 |   height: 44px;
45 |   background-color: #005eff;
46 |   border: none;
47 |   color: white;
48 |   cursor: pointer;
49 | }
50 | 
51 | .box {
52 |   background-color: #efefef;
53 |   border-radius: 50%;
54 |   height: 0.5em;
55 |   width: 0.5em;
56 |   cursor: pointer;
57 | }
58 | 
59 | .fill {
60 |   background: #005eff;
61 |   box-shadow: 0 0 2px inherit;
62 | }
63 | 
64 | @media (max-width: 768px) {
65 |   #root {
66 |     grid-template-columns: 1fr;
67 |   }
68 | }
69 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 | 
 7 |     <!--
 8 |       manifest.json provides metadata used when your web app is installed on a
 9 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
10 |     -->
11 |     <!--
12 |       Notice the use of %PUBLIC_URL% in the tags above.
13 |       It will be replaced with the URL of the `public` folder during the build.
14 |       Only files inside the `public` folder can be referenced from the HTML.
15 | 
16 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
17 |       work correctly both with client-side routing and a non-root public URL.
18 |       Learn how to configure a non-root public URL by running `npm run build`.
19 |     -->
20 |     <title>LIfe Project</title>
21 |   </head>
22 |   <body>
23 |     <noscript>You need to enable JavaScript to run this app.</noscript>
24 |     <div id="root"></div>
25 |     <!--
26 |       This HTML file is a template.
27 |       If you open it directly in the browser, you will see an empty page.
28 | 
29 |       You can add webfonts, meta tags, or analytics to this file.
30 |       The build step will place the bundled scripts into the <body> tag.
31 | 
32 |       To begin the development, run `npm start` or `yarn start`.
33 |       To create a production bundle, use `npm run build` or `yarn build`.
34 |     -->
35 |   </body>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Tippy from '@tippy.js/react'
 3 | class App extends React.Component {
 4 |   state = {
 5 |     years: "90",
 6 |     date: "1978-07-13",
 7 |     total: ""
 8 |   };
 9 | 
10 |   processDate = date => {
11 |     const processedDate = new Date(Date.parse(date));
12 |     return {
13 |       year: processedDate.getFullYear(),
14 |       month: processedDate.getMonth()
15 |     };
16 |   };
17 | 
18 |   handleChange = event => {
19 |     this.setState({ [event.target.name]: event.target.value });
20 |   };
21 | 
22 |   handleSubmit = event => {
23 |     event.preventDefault();
24 |     const { year: birthYear, month: birthMonth } = this.processDate(
25 |       this.state.date
26 |     );
27 |     const { year: currentYear, month: currentMonth } = this.processDate(
28 |       new Date()
29 |     );
30 | 
31 |     const total =
32 |       (currentYear - (birthYear + 1)) * 12 +
33 |       (12 - birthMonth) +
34 |       (currentMonth - 1);
35 | 
36 |     this.setState({ total });
37 |   };
38 | 
39 |   render() {
40 |     const { years, total } = this.state;
41 |     const months = [...Array(years * 12).keys()];
42 | 
43 |     return (
44 |       <>
45 |         <form onSubmit={this.handleSubmit}>
46 |           <label htmlFor="">Date of Birth</label>
47 |           <input
48 |             type="date"
49 |             name="date"
50 |             value={this.state.date}
51 |             onChange={this.handleChange}
52 |           />
53 |           <label htmlFor="years">Life Expectancy</label>
54 |           <input
55 |             id="years"
56 |             type="number"
57 |             name="years"
58 |             value={this.state.years}
59 |             onChange={this.handleChange}
60 |           />
61 |           <button type="submit">Show Life!</button>
62 |         </form>
63 |         <div className="years">
64 |           {months.map(month => (
65 |             <Tippy content={month + 1}>
66 |               <div key={month} className={month < total ? `box fill` : `box`} />
67 |             </Tippy>
68 |           ))}
69 |         </div>
70 |       </>
71 |     );
72 |   }
73 | }
74 | 
75 | export default App;
76 | 


--------------------------------------------------------------------------------