21 | );
22 | }
23 |
24 | export default App;
25 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "birthday-wisher",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^4.2.4",
7 | "@testing-library/react": "^9.5.0",
8 | "@testing-library/user-event": "^7.2.1",
9 | "react": "^16.13.1",
10 | "react-dom": "^16.13.1",
11 | "react-router-dom": "^5.2.0",
12 | "react-scripts": "3.4.3"
13 | },
14 | "scripts": {
15 | "start": "react-scripts start",
16 | "build": "react-scripts build",
17 | "test": "react-scripts test",
18 | "eject": "react-scripts eject"
19 | },
20 | "eslintConfig": {
21 | "extends": "react-app"
22 | },
23 | "browserslist": {
24 | "production": [
25 | ">0.2%",
26 | "not dead",
27 | "not op_mini all"
28 | ],
29 | "development": [
30 | "last 1 chrome version",
31 | "last 1 firefox version",
32 | "last 1 safari version"
33 | ]
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020 Deepankar Bhade
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/src/Countdown.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Wish from './Wish';
3 |
4 | const Countdown = ({ countdownData, name }) => {
5 | if (!countdownData.isItBday) {
6 | return (
7 |
8 |
9 | Countdown to {name}'s Birthday
10 |
11 |
12 |
13 | {countdownData.days}
14 | Days
15 |
16 |
17 | {countdownData.hours}
18 | Hours
19 |
20 |
21 | {countdownData.minutes}
22 | Minutes
23 |
24 |
25 | {countdownData.seconds}
26 | Seconds
27 |
28 |
29 |
30 | );
31 | } else {
32 | return ;
33 | }
34 | };
35 |
36 | export default Countdown;
37 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 🎉Birthday Wisher with Countdown!🎉
2 |
3 | Made with React with Hooks.
4 |
5 | ## Getting started
6 |
7 | You can view a live demo over at https://birthday-wisher.netlify.app/
8 |
9 | To get It running locally:
10 |
11 | - Clone this repo
12 | - `npm install` to install all req'd dependencies
13 | - `npm start` to start the local server (this project uses create-react-app)
14 |
15 | ## Usage:
16 |
17 | Visit [https://birthday-wisher.netlify.app/]()
18 |
19 | Click on Generate Link
20 | or Head to [https://birthday-wisher.netlify.app/generate]()
21 |
22 | Enter the `name , day , month of birthday`
23 |
24 | 
25 |
26 | Click on Generate Link
27 |
28 | You Can see a Link being generated Copy or Visit the link by Clicking on the Button
29 |
30 | And There You Go ! 🎉
31 |
32 | 
33 |
34 | ## ScreenShot of Coutdown Timer⏲️
35 |
36 | 
37 |
38 | ## Birthday Wisher🎂
39 |
40 | Loads this Page Instead of Coutdown on the Birthday
41 | 
42 |
43 | It's Fully Responsive and you change styles in the `app.css`
44 |
45 | Wishing Component Page : `Wish.jsx`
46 | Countdown Compenent Page : `Countdown.jsx`
47 |
--------------------------------------------------------------------------------
/src/githubLogo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
14 |
15 |
24 | Birthday Coutdown & Wisher
25 |
26 |
27 |
28 |
29 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/src/Generate.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { Link } from 'react-router-dom';
3 |
4 | const Generate = () => {
5 | const [name, setName] = useState('');
6 | const [day, setDay] = useState(1);
7 | const [month, setMonth] = useState(1);
8 | const [link, setLink] = useState('');
9 | const generateLink = () => {
10 | setLink(
11 | `https://birthday-wisher.netlify.app/birthday/${name}/${day}/${month}`
12 | );
13 | };
14 | return (
15 |
116 |
117 |