├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── _redirects ├── index.html ├── logo.png ├── manifest.json └── robots.txt └── src ├── API └── index.js ├── App.css ├── App.js ├── App.test.js ├── Pages ├── Cases │ ├── Cards │ │ ├── Cards.js │ │ └── Cards.module.css │ ├── Cases.js │ ├── Cases.module.css │ ├── Chart │ │ ├── Chart.js │ │ └── Chart.module.css │ └── CountryPicker │ │ ├── CountryPicker.js │ │ └── CountryPicker.module.css ├── Home │ ├── AboutPage │ │ ├── AboutPage.js │ │ └── AboutPage.module.css │ ├── CoverPage │ │ ├── CoverPage.js │ │ └── CoverPage.module.css │ ├── DoDonts │ │ ├── DoDonts.js │ │ └── DoDonts.module.css │ ├── HandWash │ │ ├── HandWash.js │ │ └── Handwash.module.css │ ├── Home.js │ ├── Home.module.css │ ├── Protect │ │ └── Protect.js │ ├── Symptoms │ │ └── Symptoms.js │ ├── Take-steps │ │ ├── TakeSteps.js │ │ └── TakeSteps.module.css │ ├── Transmission │ │ └── Transmission.js │ └── Treatment │ │ ├── Treatment.js │ │ └── Treatment.module.css └── NotFound │ ├── NotFound.js │ └── NotFound.module.css ├── UI ├── Footer │ ├── Footer.js │ └── Footer.module.css ├── Header │ ├── Header.js │ └── Header.module.css └── ReusablePage │ ├── Reusable.module.css │ └── ReusablePage.js ├── images ├── Cover-Page │ └── main-image.png ├── Handwash │ ├── hand-1.png │ ├── hand-2.png │ ├── hand-3.png │ ├── hand-4.png │ ├── hand-5.png │ └── hand-6.png ├── Not-Found │ └── 404.png ├── Protect │ ├── advice1.png │ ├── advice2.png │ ├── advice3.png │ └── advice4.png ├── Symptom │ ├── symptom1.png │ ├── symptom2.png │ └── symptom3.png ├── Take-Steps │ └── whatiscovid.png ├── Transmission │ ├── contacting.png │ ├── cough.png │ └── person.png ├── do-donts │ ├── donts-a.png │ ├── donts-b.png │ ├── donts-c.png │ ├── dos-a.png │ ├── dos-b.png │ ├── dos-c.png │ └── protect.png ├── logo.png └── updates-logo.png ├── index.css ├── index.js ├── serviceWorker.js └── setupTests.js /.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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | #CHECKOUT LIVE: [CLICK HERE](https://project-covid.netlify.app/) 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "project-covid", 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 | "axios": "^0.19.2", 10 | "chart.js": "^2.9.3", 11 | "classnames": "^2.2.6", 12 | "react": "^16.13.1", 13 | "react-chartjs-2": "^2.9.0", 14 | "react-countup": "^4.3.3", 15 | "react-dom": "^16.13.1", 16 | "react-icons": "^3.10.0", 17 | "react-loading-skeleton": "^2.1.1", 18 | "react-router-dom": "^5.2.0", 19 | "react-scripts": "3.4.1" 20 | }, 21 | "scripts": { 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test", 25 | "eject": "react-scripts eject" 26 | }, 27 | "eslintConfig": { 28 | "extends": "react-app" 29 | }, 30 | "browserslist": { 31 | "production": [ 32 | ">0.2%", 33 | "not dead", 34 | "not op_mini all" 35 | ], 36 | "development": [ 37 | "last 1 chrome version", 38 | "last 1 firefox version", 39 | "last 1 safari version" 40 | ] 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /public/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 15 | 19 | 23 | Corona Tracker 24 | 25 | 26 | 27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/public/logo.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/API/index.js: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | 3 | const url = "https://covid19.mathdro.id/api"; 4 | 5 | export const fetchData = async (country) => { 6 | let changableURL = url; 7 | if (country) { 8 | changableURL = `${url}/countries/${country}`; 9 | } 10 | try { 11 | const { 12 | data: { confirmed, recovered, deaths, lastUpdate }, 13 | } = await axios.get(changableURL); 14 | return { confirmed, recovered, deaths, lastUpdate }; 15 | } catch (error) { 16 | console.log(error); 17 | } 18 | }; 19 | 20 | export const fetchDailyData = async () => { 21 | try { 22 | const { data } = await axios.get(`${url}/daily`); 23 | 24 | const modifiedData = data.map((dailyData) => ({ 25 | confirmed: dailyData.confirmed.total, 26 | deaths: dailyData.deaths.total, 27 | date: dailyData.reportDate, 28 | })); 29 | return modifiedData; 30 | } catch (error) { 31 | console.log(error); 32 | } 33 | }; 34 | 35 | export const countriesData = async () => { 36 | try { 37 | const { 38 | data: { countries }, 39 | } = await axios.get(`${url}/countries`); 40 | 41 | return countries.map((country) => country.name); 42 | } catch (error) { 43 | console.log(error); 44 | } 45 | }; 46 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --theme-color-one: #a56cc1; 3 | --theme-color-two: #a6acec; 4 | --theme-color-three: #ace7ef; 5 | --theme-color-four: #cefff1; 6 | } 7 | * { 8 | box-sizing: border-box; 9 | margin: 0; 10 | padding: 0; 11 | } 12 | body { 13 | font-family: "Roboto", sans-serif; 14 | background-color: var(--theme-color-three); 15 | color: #3d4b69; 16 | } 17 | 18 | ::-webkit-scrollbar { 19 | width: 12px; 20 | background-color: #fff; 21 | } 22 | ::-webkit-scrollbar-thumb { 23 | /* background: linear-gradient(transparent, #1468cd); */ 24 | background: #1468cd; 25 | border-radius: 6px; 26 | } 27 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./App.css"; 3 | import { Route, Switch } from "react-router-dom"; 4 | import Header from "./UI/Header/Header"; 5 | import Footer from "./UI/Footer/Footer"; 6 | import Home from "./Pages/Home/Home"; 7 | import Cases from "./Pages/Cases/Cases"; 8 | import NotFound from "./Pages/NotFound/NotFound"; 9 | 10 | function App() { 11 | return ( 12 |
13 |
14 | 15 | 16 | 17 | 18 | 19 |
21 | ); 22 | } 23 | 24 | export default App; 25 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /src/Pages/Cases/Cards/Cards.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styling from "./Cards.module.css"; 3 | import CountUp from "react-countup"; 4 | 5 | export default function Cards({ 6 | data: { confirmed, recovered, deaths, lastUpdate }, 7 | }) { 8 | if (!confirmed) { 9 | return

Loading...

; 10 | } 11 | 12 | return ( 13 |
14 |
15 |

Infected

16 |

17 | 23 |

24 |

{new Date(lastUpdate).toDateString()}

25 |

Number of active cases of COVID-19

26 |
27 |
28 |

Recoverd

29 |

30 | 36 |

37 |

{new Date(lastUpdate).toDateString()}

38 |

Number of recoveries cases of COVID-19

39 |
40 |
41 |

Deaths

42 |

43 | 44 |

45 |

{new Date(lastUpdate).toDateString()}

46 |

Number of deaths caused by COVID-19

47 |
48 |
49 | ); 50 | } 51 | -------------------------------------------------------------------------------- /src/Pages/Cases/Cards/Cards.module.css: -------------------------------------------------------------------------------- 1 | .Cards { 2 | width: 100%; 3 | height: 21vh; 4 | display: flex; 5 | justify-content: space-around; 6 | align-items: center; 7 | background-color: #f7f9fe; 8 | font-family: "Roboto", sans-serif; 9 | text-align: center; 10 | } 11 | .Cards p { 12 | font-weight: bold; 13 | } 14 | .Cards > div { 15 | width: 25%; 16 | height: 100%; 17 | display: flex; 18 | flex-direction: column; 19 | justify-content: space-around; 20 | align-items: center; 21 | border-radius: 5px; 22 | box-shadow: 0 4px 8px 0 rgba(2, 2, 2, 0.1), 0 6px 20px 0 rgba(7, 7, 7, 0.1); 23 | } 24 | .Card1 { 25 | border-bottom: 4px solid #056cc4; 26 | } 27 | .Card1 h2:first-child, 28 | .Card1 h4 { 29 | color: #056cc4; 30 | } 31 | .Card2 { 32 | border-bottom: 4px solid #3dca93; 33 | } 34 | .Card2 h2:first-child, 35 | .Card2 h4 { 36 | color: #3dca93; 37 | } 38 | .Card3 { 39 | border-bottom: 4px solid #ff5363; 40 | } 41 | .Card3 h2:first-child, 42 | .Card3 h4 { 43 | color: #ff5363; 44 | } 45 | @media screen and (max-width: 680px) { 46 | .Cards { 47 | width: 100%; 48 | height: 80vh; 49 | flex-direction: column; 50 | } 51 | .Cards p { 52 | font-weight: bold; 53 | } 54 | .Cards > div { 55 | width: 90%; 56 | height: 100%; 57 | margin: 13px 0; 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /src/Pages/Cases/Cases.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import styling from "./Cases.module.css"; 3 | 4 | import Cards from "./Cards/Cards"; 5 | import Chart from "./Chart/Chart"; 6 | import CountryPicker from "./CountryPicker/CountryPicker"; 7 | 8 | import { fetchData, fetchDailyData, countriesData } from "../../API/index"; 9 | 10 | export default function Cases() { 11 | let [data, setData] = useState({}); 12 | const [dailyData, setDailyData] = useState({}); 13 | let [countries, setCountries] = useState([]); 14 | let [country, setCountry] = useState(""); 15 | 16 | useEffect(() => { 17 | (async () => { 18 | setData(await fetchData(country)); 19 | })(); 20 | }, [country]); 21 | 22 | useEffect(() => { 23 | (async () => { 24 | setDailyData(await fetchDailyData()); 25 | })(); 26 | }, []); 27 | 28 | useEffect(() => { 29 | (async () => { 30 | setCountries(await countriesData()); 31 | })(); 32 | }, []); 33 | 34 | let handleCountryChange = async (countryName) => { 35 | setCountry(countryName); 36 | }; 37 | // console.log(data); 38 | return ( 39 |
40 | 41 | 45 | 46 |
47 | ); 48 | } 49 | -------------------------------------------------------------------------------- /src/Pages/Cases/Cases.module.css: -------------------------------------------------------------------------------- 1 | .Cases { 2 | width: 100%; 3 | height: 100vh; 4 | display: flex; 5 | flex-direction: column; 6 | justify-content: space-around; 7 | align-items: center; 8 | background-color: #f7f9fe; 9 | padding: 14vh 5vw 0 5vw; 10 | } 11 | @media screen and (max-width: 680px) { 12 | .Cases { 13 | width: 100%; 14 | height: auto; 15 | /* display: flex; 16 | flex-direction: column; 17 | justify-content: space-around; 18 | align-items: center; 19 | background-color: #f7f9fe; 20 | padding: 14vh 5vw 0 5vw; */ 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/Pages/Cases/Chart/Chart.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styling from "./Chart.module.css"; 3 | import { Line, Bar } from "react-chartjs-2"; 4 | 5 | export default function Chart({ 6 | dailyData, 7 | country, 8 | data: { confirmed, deaths, recovered }, 9 | }) { 10 | const lineChart = dailyData[0] ? ( 11 | date), 14 | datasets: [ 15 | { 16 | data: dailyData.map(({ confirmed }) => confirmed), 17 | label: "Infected", 18 | fill: true, 19 | borderColor: "#056cc4", 20 | }, 21 | { 22 | data: dailyData.map(({ deaths }) => deaths), 23 | label: "Deaths", 24 | fill: true, 25 | borderColor: "#ff5363", 26 | }, 27 | ], 28 | }} 29 | /> 30 | ) : null; 31 | 32 | const barChart = confirmed ? ( 33 | 49 | ) : null; 50 | 51 | return
{country ? barChart : lineChart}
; 52 | } 53 | -------------------------------------------------------------------------------- /src/Pages/Cases/Chart/Chart.module.css: -------------------------------------------------------------------------------- 1 | .Chart { 2 | width: 65%; 3 | } 4 | @media screen and (max-width: 680px) { 5 | .Chart { 6 | width: 100%; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/Pages/Cases/CountryPicker/CountryPicker.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styling from "./CountryPicker.module.css"; 3 | 4 | export default function CountryPicker({ countries, changeCountry }) { 5 | return ( 6 |
7 | 15 |
16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /src/Pages/Cases/CountryPicker/CountryPicker.module.css: -------------------------------------------------------------------------------- 1 | .CountryPicker { 2 | width: 100%; 3 | display: flex; 4 | justify-content: center; 5 | align-items: center; 6 | } 7 | .CountryPicker > select { 8 | width: 30%; 9 | height: 6vh; 10 | font-size: 17px; 11 | border: none; 12 | background-color: #f7f9fe; 13 | border-bottom: 1px solid #056cc4; 14 | } 15 | select:focus { 16 | outline: none; 17 | } 18 | @media screen and (max-width: 680px) { 19 | .CountryPicker { 20 | padding: 15px 0px; 21 | } 22 | .CountryPicker > select { 23 | width: 80%; 24 | height: 6vh; 25 | font-size: 17px; 26 | border: none; 27 | background-color: #f7f9fe; 28 | border-bottom: 1px solid #056cc4; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/Pages/Home/AboutPage/AboutPage.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styling from "./AboutPage.module.css"; 3 | import { FaCaretRight } from "react-icons/fa"; 4 | 5 | export default function AboutPage() { 6 | return ( 7 |
8 |
9 |
10 |
What you need to know
11 |
12 | How corona virus spread 13 | 14 |
15 |
16 | Symptoms of coronavirus 17 | 18 |
19 |
20 | Prevention & Advice 21 | 22 |
23 |
24 | Treatment of coronavirus 25 | 26 |
27 | 31 |
32 | How to protect yourself 33 | 34 |
35 |
36 |
37 |
38 |
39 |

ABOUT THE DISEASE

40 |

CORONAVIRUS (COVID-19)

41 |
42 |
43 |

44 | COVID-19 is a new illness that can affect your lungs and airways. 45 | It's caused by a virus called coronavirus. It was discovered in 46 | December 2019 in Wuhan, Hubei, China. 47 |

48 |
49 |
50 |

51 | Common signs of infection include respiratory symptoms, fever, 52 | cough, shortness of breath and breathing difficulties. In more 53 | severe cases, infection can cause pneumonia, severe acute 54 | respiratory syndrome, kidney failure and even death. 55 |

56 |

57 | Standard recommendations to prevent infection spread include regular 58 | hand washing, covering mouth and nose when coughing and sneezing, 59 | thoroughly cooking meat and eggs. Avoid close contact with anyone 60 | showing symptoms of respiratory illness such as coughing and 61 | sneezing. 62 |

63 |
64 |
65 |
66 | ); 67 | } 68 | -------------------------------------------------------------------------------- /src/Pages/Home/AboutPage/AboutPage.module.css: -------------------------------------------------------------------------------- 1 | .AboutPage { 2 | width: 100%; 3 | height: 100vh; 4 | background-color: #ffffff; 5 | display: flex; 6 | justify-content: space-around; 7 | align-items: center; 8 | padding: 0 5vw; 9 | font-family: "Roboto", sans-serif; 10 | } 11 | .ImageSection { 12 | display: flex; 13 | align-items: center; 14 | justify-content: center; 15 | width: 40%; 16 | height: 100%; 17 | } 18 | .ImageSection > div { 19 | width: 80%; 20 | height: 63%; 21 | background-color: #f7f9fe; 22 | border: 1px solid #d6d8d8; 23 | border-radius: 5px; 24 | display: flex; 25 | flex-direction: column; 26 | justify-content: center; 27 | align-items: center; 28 | } 29 | .ImageSection > div > div { 30 | width: 100%; 31 | height: 14%; 32 | background-color: #fff; 33 | border-bottom: 1px solid #d6d8d8; 34 | display: flex; 35 | align-items: center; 36 | justify-content: space-between; 37 | padding: 0% 7%; 38 | color: #1468cd; 39 | } 40 | .ImageSection > div > div:first-child { 41 | color: #3d4b69; 42 | font-weight: bold; 43 | font-size: 20px; 44 | } 45 | .ImageSection > div > div:last-child { 46 | border: none; 47 | } 48 | .ImageSection a { 49 | color: #1468cd; 50 | text-decoration: none; 51 | font-size: 17px; 52 | } 53 | .TextSection { 54 | width: 50%; 55 | height: 100%; 56 | display: flex; 57 | flex-direction: column; 58 | justify-content: center; 59 | align-items: flex-end; 60 | text-align: justify; 61 | text-align: right; 62 | } 63 | .TextSection > div { 64 | padding: 10px 0px; 65 | } 66 | .TextSection h1 { 67 | font-family: "Oswald", sans-serif; 68 | color: #50658e; 69 | font-size: 40px; 70 | font-weight: 700; 71 | } 72 | .TextSection h3 { 73 | font-size: 20px; 74 | font-weight: 900; 75 | } 76 | .TextSection p { 77 | font-size: 17px; 78 | margin: 5px 0; 79 | line-height: 23px; 80 | } 81 | .TextSection > div:first-child > h3 { 82 | color: #1468cd; 83 | font-family: "Oswald", sans-serif; 84 | } 85 | @media screen and (max-width: 680px) { 86 | .AboutPage { 87 | height: 120vh; 88 | flex-direction: column; 89 | } 90 | .ImageSection { 91 | width: 90%; 92 | order: 2; 93 | } 94 | .ImageSection > div { 95 | width: 100%; 96 | height: 100%; 97 | } 98 | .ImageSection > div > div { 99 | width: 100%; 100 | height: 20%; 101 | } 102 | .ImageSection > div > div:first-child { 103 | font-size: 17px; 104 | } 105 | .ImageSection > div > div:last-child { 106 | border: none; 107 | } 108 | .ImageSection a { 109 | color: #1468cd; 110 | text-decoration: none; 111 | font-size: 17px; 112 | } 113 | .TextSection { 114 | width: 90%; 115 | height: 100%; 116 | order: 1; 117 | } 118 | .TextSection h1 { 119 | font-size: 30px; 120 | } 121 | .TextSection h3 { 122 | font-size: 15px; 123 | } 124 | .TextSection p { 125 | font-size: 16px; 126 | line-height: 19px; 127 | } 128 | } 129 | -------------------------------------------------------------------------------- /src/Pages/Home/CoverPage/CoverPage.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styling from "./CoverPage.module.css"; 3 | import image from "../../../images/Cover-Page/main-image.png"; 4 | import { FaCaretRight } from "react-icons/fa"; 5 | 6 | export default function CoverPage() { 7 | return ( 8 | // 9 |
10 |
11 |
12 |
13 |

CORONA

14 |
15 |
16 |
17 |

COVID-19

18 |
19 |
20 |

VIRUS

21 |
22 |
23 |
24 |
25 |

26 | The Coronavirus (COVID-19) was first reported in Wuhan, Hubei, China 27 | in December 2019, the outbreak was later recognized as a pandemic by 28 | the World Health Organization (WHO) on 11 March 2020 29 |

30 |
31 |
32 | 35 |

36 | 37 | About COVID-19 38 | 39 |

40 |
41 |
42 | 43 |
44 | happy 45 |
46 |
47 | //
48 | ); 49 | } 50 | -------------------------------------------------------------------------------- /src/Pages/Home/CoverPage/CoverPage.module.css: -------------------------------------------------------------------------------- 1 | .CoverPage { 2 | width: 100%; 3 | height: 88vh; 4 | margin-top: 12vh; 5 | display: flex; 6 | justify-content: space-between; 7 | align-items: center; 8 | background-color: #f7f9fe; 9 | padding: 0 5vw; 10 | font-family: "Roboto", sans-serif; 11 | } 12 | 13 | .textSection { 14 | width: 50%; 15 | height: 100%; 16 | display: flex; 17 | flex-direction: column; 18 | justify-content: center; 19 | } 20 | 21 | .Heading { 22 | display: flex; 23 | font-family: "Oswald", sans-serif; 24 | } 25 | .Heading > div { 26 | display: flex; 27 | flex-direction: column; 28 | justify-content: center; 29 | align-items: center; 30 | } 31 | 32 | .Heading > div:nth-child(1) > h1 { 33 | font-size: 84px; 34 | font-weight: 700; 35 | color: #50658e; 36 | } 37 | 38 | .Heading > div:nth-child(2) > div:nth-child(1) { 39 | } 40 | .Heading > div:nth-child(2) > div:nth-child(1) > h1 { 41 | font-size: 28px; 42 | color: #f86168; 43 | margin-bottom: -10px; 44 | } 45 | .Heading > div:nth-child(2) > div:nth-child(2) { 46 | } 47 | .Heading > div:nth-child(2) > div:nth-child(2) > h1 { 48 | font-size: 40px; 49 | color: #50658e; 50 | padding-top: 0px; 51 | } 52 | .punchLine p { 53 | font-size: 17px; 54 | margin: 20px 0px; 55 | } 56 | .buttons { 57 | margin: 20px 0px; 58 | display: flex; 59 | align-items: center; 60 | } 61 | .buttons > button { 62 | border: none; 63 | border-radius: 20px; 64 | background-color: #1468cd; 65 | padding: 12px 28px; 66 | color: #fff; 67 | font-size: 17px; 68 | } 69 | .buttons > button:focus { 70 | outline: none; 71 | } 72 | .buttons a { 73 | color: #1468cd; 74 | text-decoration: none; 75 | margin-left: 20px; 76 | } 77 | .buttons > button > a { 78 | color: #fff; 79 | margin-left: 0; 80 | } 81 | .imgSection { 82 | width: 50%; 83 | height: 100%; 84 | display: flex; 85 | align-items: center; 86 | justify-content: flex-end; 87 | } 88 | .imgSection img { 89 | width: 100%; 90 | } 91 | @media screen and (max-width: 680px) { 92 | .CoverPage { 93 | flex-direction: column; 94 | margin-top: 9vh; 95 | height: 91vh; 96 | } 97 | 98 | .textSection { 99 | width: 90%; 100 | height: 100%; 101 | order: 2; 102 | } 103 | 104 | .Heading > div:nth-child(1) > h1 { 105 | font-size: 50px; 106 | } 107 | 108 | .Heading > div:nth-child(2) > div:nth-child(1) > h1 { 109 | font-size: 19px; 110 | } 111 | 112 | .Heading > div:nth-child(2) > div:nth-child(2) > h1 { 113 | font-size: 28px; 114 | } 115 | .punchLine p { 116 | font-size: 15px; 117 | margin: 15px 0px; 118 | } 119 | .buttons h3 { 120 | font-size: 15px; 121 | } 122 | .buttons > button { 123 | border-radius: 20px; 124 | padding: 12px 22px; 125 | font-size: 14px; 126 | } 127 | 128 | .imgSection { 129 | width: 80%; 130 | order: 1; 131 | } 132 | .imgSection img { 133 | width: 100%; 134 | } 135 | } 136 | -------------------------------------------------------------------------------- /src/Pages/Home/DoDonts/DoDonts.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styling from "./DoDonts.module.css"; 3 | import mainImage from "../../../images/do-donts/protect.png"; 4 | import does1 from "../../../images/do-donts/dos-a.png"; 5 | import does2 from "../../../images/do-donts/dos-b.png"; 6 | import does3 from "../../../images/do-donts/dos-c.png"; 7 | import dont1 from "../../../images/do-donts/donts-a.png"; 8 | import dont2 from "../../../images/do-donts/donts-b.png"; 9 | import dont3 from "../../../images/do-donts/donts-c.png"; 10 | import { FaCheckCircle, FaTimesCircle } from "react-icons/fa"; 11 | 12 | export default function DoDonts() { 13 | return ( 14 |
15 |
16 |

DO’S & DON’TS

17 |

PROTECT YOURSELF

18 |

19 | The best thing you can do now is plan for how you can adapt your daily 20 | routine. Take few steps to protect yourself as Clean your hands often, 21 | Avoid close contact, Cover coughs and sneezes, clean daily used 22 | surfaces etc. The best way to prevent illness is to avoid being 23 | exposed to this virus 24 |

25 |
26 |
27 |
28 |
29 |

Wash Your Hands

30 | 31 | 32 |
33 |
34 |

Drink Much Watar

35 | 36 |
37 |
38 |

Use Face Mask

39 | 40 |
41 |
42 | {/* */} 43 |
44 | 45 |
46 | {/* */} 47 | 48 |
49 |
50 | 51 |

Avoid Close Contact

52 |
53 |
54 | 55 |

Don’t Touch Face

56 |
57 |
58 | 59 |

Social Distancing

60 |
61 |
62 |
63 |
64 | ); 65 | } 66 | -------------------------------------------------------------------------------- /src/Pages/Home/DoDonts/DoDonts.module.css: -------------------------------------------------------------------------------- 1 | .DoDonts { 2 | width: 100%; 3 | height: 100vh; 4 | display: flex; 5 | flex-direction: column; 6 | justify-content: space-around; 7 | align-items: center; 8 | background-color: #f7f9fe; 9 | padding: 5vh 6vw; 10 | font-family: "Roboto", sans-serif; 11 | } 12 | .TextSection { 13 | width: 60%; 14 | height: 35vh; 15 | display: flex; 16 | flex-direction: column; 17 | justify-content: center; 18 | align-items: center; 19 | text-align: center; 20 | } 21 | .TextSection h1 { 22 | font-family: "Oswald", sans-serif; 23 | color: #50658e; 24 | font-size: 40px; 25 | } 26 | .TextSection h3 { 27 | color: #1468cd; 28 | } 29 | .TextSection p { 30 | line-height: 23px; 31 | } 32 | .imageSection { 33 | width: 100%; 34 | height: 65vh; 35 | width: 90%; 36 | display: flex; 37 | justify-content: space-between; 38 | align-items: center; 39 | } 40 | .Donts, 41 | .Dos { 42 | width: 23%; 43 | height: 100%; 44 | display: flex; 45 | flex-direction: column; 46 | justify-content: space-around; 47 | align-items: center; 48 | } 49 | 50 | .Donts > div, 51 | .Dos > div { 52 | display: flex; 53 | justify-content: center; 54 | align-items: center; 55 | } 56 | .Donts img, 57 | .Dos img { 58 | border: 2px solid #2a81ea; 59 | border-radius: 50%; 60 | width: 40%; 61 | } 62 | .DoDonts h4 { 63 | text-align: center; 64 | width: 60%; 65 | color: #2a81ea; 66 | } 67 | .MainImage { 68 | width: 50%; 69 | height: 100%; 70 | display: flex; 71 | justify-content: center; 72 | align-items: center; 73 | } 74 | .MainImage img { 75 | width: 90%; 76 | } 77 | @media screen and (max-width: 680px) { 78 | .DoDonts { 79 | padding: 2vh 2vw; 80 | height: 130vh; 81 | } 82 | .TextSection { 83 | width: 100%; 84 | height: 25%; 85 | } 86 | .TextSection h1 { 87 | font-size: 30px; 88 | } 89 | .TextSection h3 { 90 | color: #1468cd; 91 | font-size: 17px; 92 | } 93 | .TextSection p { 94 | line-height: 19px; 95 | } 96 | .imageSection { 97 | height: 75%; 98 | width: 100%; 99 | flex-direction: column; 100 | } 101 | .Dos { 102 | order: 2; 103 | } 104 | .Donts { 105 | order: 3; 106 | } 107 | .Donts, 108 | .Dos { 109 | width: 100%; 110 | height: 100%; 111 | flex-direction: row; 112 | } 113 | 114 | .Donts > div, 115 | .Dos > div { 116 | flex-direction: column; 117 | } 118 | .Donts img, 119 | .Dos img { 120 | width: 60%; 121 | } 122 | .DoDonts h4 { 123 | width: 100%; 124 | } 125 | .MainImage { 126 | order: 1; 127 | width: 90%; 128 | } 129 | .MainImage img { 130 | width: 100%; 131 | } 132 | } 133 | -------------------------------------------------------------------------------- /src/Pages/Home/HandWash/HandWash.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styling from "./Handwash.module.css"; 3 | import hand1 from "../../../images/Handwash/hand-1.png"; 4 | import hand2 from "../../../images/Handwash/hand-2.png"; 5 | import hand3 from "../../../images/Handwash/hand-3.png"; 6 | import hand4 from "../../../images/Handwash/hand-4.png"; 7 | import hand5 from "../../../images/Handwash/hand-5.png"; 8 | import hand6 from "../../../images/Handwash/hand-6.png"; 9 | 10 | export default function HandWash() { 11 | return ( 12 |
13 |
14 |

Follow steps to wash hands

15 |

It is necessary step to avoid corona

16 |
17 |
18 |
19 |
20 | 21 |

Focus on Wrist

22 |
23 |
24 | 25 |

Clean with Water

26 |
27 |
28 |
29 |
30 | 31 |

Back to Hands

32 |
33 |
34 | 35 |

Between Fingers

36 |
37 |
38 |
39 |
40 | 41 |

Palm to Palm

42 |
43 |
44 | 45 |

Soap on Hand

46 |
47 |
48 |
49 |
50 | ); 51 | } 52 | -------------------------------------------------------------------------------- /src/Pages/Home/HandWash/Handwash.module.css: -------------------------------------------------------------------------------- 1 | .HandWash { 2 | width: 100%; 3 | height: 70vh; 4 | display: flex; 5 | flex-direction: column; 6 | justify-content: space-between; 7 | align-items: center; 8 | background-color: #f7f9fe; 9 | padding: 5vh 5vw; 10 | font-family: "Roboto", sans-serif; 11 | } 12 | .TextSection { 13 | display: flex; 14 | flex-direction: column; 15 | justify-content: center; 16 | align-items: center; 17 | text-align: center; 18 | width: 100%; 19 | height: 40%; 20 | } 21 | .TextSection h1 { 22 | font-size: 40px; 23 | color: #465675; 24 | font-family: "Oswald", sans-serif; 25 | font-weight: bold; 26 | } 27 | .TextSection h3 { 28 | color: #1468cd; 29 | } 30 | .ImageSection { 31 | display: flex; 32 | justify-content: space-around; 33 | align-items: center; 34 | width: 100%; 35 | height: 60%; 36 | text-align: center; 37 | } 38 | .ImageSection > div { 39 | width: 32%; 40 | display: flex; 41 | align-items: center; 42 | justify-content: center; 43 | } 44 | .ImageSection > div > div { 45 | display: flex; 46 | flex-direction: column; 47 | align-items: center; 48 | justify-content: center; 49 | } 50 | .ImageSection img { 51 | display: flex; 52 | width: 80%; 53 | height: 80%; 54 | border-radius: 50%; 55 | box-shadow: 0 4px 8px 0 rgba(2, 2, 2, 0.1), 0 6px 20px 0 rgba(7, 7, 7, 0.1); 56 | } 57 | .ImageSection h4 { 58 | margin-top: 15px; 59 | } 60 | @media screen and (max-width: 680px) { 61 | .HandWash { 62 | width: 100%; 63 | height: 105vh; 64 | } 65 | .TextSection { 66 | width: 100%; 67 | height: 20%; 68 | } 69 | .TextSection h1 { 70 | font-size: 30px; 71 | } 72 | .ImageSection { 73 | flex-direction: column; 74 | width: 100%; 75 | height: 80%; 76 | } 77 | .ImageSection > div { 78 | width: 90%; 79 | display: flex; 80 | } 81 | 82 | .ImageSection img { 83 | display: flex; 84 | width: 70%; 85 | height: 70%; 86 | border-radius: 50%; 87 | box-shadow: 0 4px 8px 0 rgba(2, 2, 2, 0.1), 0 6px 20px 0 rgba(7, 7, 7, 0.1); 88 | } 89 | .ImageSection h4 { 90 | margin-top: 15px; 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /src/Pages/Home/Home.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styling from "./Home.module.css"; 3 | import CoverPage from "./CoverPage/CoverPage"; 4 | import AboutPage from "./AboutPage/AboutPage"; 5 | import Transmission from "./Transmission/Transmission"; 6 | import Symptoms from "./Symptoms/Symptoms"; 7 | import Protect from "./Protect/Protect"; 8 | import TakeSteps from "./Take-steps/TakeSteps"; 9 | import Handwash from "./HandWash/HandWash.js"; 10 | import Treatment from "./Treatment/Treatment"; 11 | import DoDonts from "./DoDonts/DoDonts"; 12 | import { Link } from "react-router-dom"; 13 | import updatesLogo from "../../images/updates-logo.png"; 14 | 15 | export default function Home() { 16 | return ( 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
32 |
33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /src/Pages/Home/Home.module.css: -------------------------------------------------------------------------------- 1 | .moveTo { 2 | position: fixed; 3 | bottom: 15px; 4 | right: 15px; 5 | background-color: #056cc4; 6 | width: 60px; 7 | height: 60px; 8 | border-radius: 50%; 9 | display: flex; 10 | flex-direction: column; 11 | justify-content: center; 12 | align-items: center; 13 | color: #fff; 14 | font-size: 13px; 15 | box-shadow: 0 4px 8px 0 rgba(2, 2, 2, 0.3), 0 6px 20px 0 rgba(7, 7, 7, 0.3); 16 | text-align: center; 17 | } 18 | .moveTo img { 19 | width: 60%; 20 | animation: blinker 3s linear infinite; 21 | } 22 | @keyframes blinker { 23 | 50% { 24 | opacity: 0.2; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/Pages/Home/Protect/Protect.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Transmission from "../../../UI/ReusablePage/ReusablePage"; 3 | import symptom1 from "../../../images/Protect/advice1.png"; 4 | import symptom2 from "../../../images/Protect/advice2.png"; 5 | import symptom3 from "../../../images/Protect/advice3.png"; 6 | import symptom4 from "../../../images/Protect/advice4.png"; 7 | 8 | export default function Protect() { 9 | return ( 10 |
11 | 42 |
43 | ); 44 | } 45 | -------------------------------------------------------------------------------- /src/Pages/Home/Symptoms/Symptoms.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Transmission from "../../../UI/ReusablePage/ReusablePage"; 3 | import symptom1 from "../../../images/Symptom/symptom1.png"; 4 | import symptom2 from "../../../images/Symptom/symptom2.png"; 5 | import symptom3 from "../../../images/Symptom/symptom3.png"; 6 | 7 | export default function Symptoms() { 8 | return ( 9 |
10 | 34 |
35 | ); 36 | } 37 | -------------------------------------------------------------------------------- /src/Pages/Home/Take-steps/TakeSteps.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styling from "./TakeSteps.module.css"; 3 | import doctorImage from "../../../images/Take-Steps/whatiscovid.png"; 4 | import { FaCheckCircle } from "react-icons/fa"; 5 | 6 | export default function TakeSteps() { 7 | return ( 8 |
9 |
10 |
11 | 12 |
13 |
14 |

Take steps to protect others

15 |
16 |
17 | 18 |
19 |
20 | Stay home if you’re sick{" "} 21 | – Stay home if you are sick, except to get medical care. 22 |
23 |
24 |
25 |
26 | 27 |
28 |
29 | 30 | Cover your mouth and nose 31 | {" "} 32 | – with a tissue when you cough or sneeze (throw used tissues in 33 | the trash) or use the inside of your elbow. 34 |
35 |
36 |
37 |
38 | 39 |
40 |
41 | 42 | Wear a facemask if you are sick 43 | {" "} 44 | – You should wear a facemask when you are around other people 45 | (e.g., sharing a room or vehicle) and before you enter a 46 | healthcare provider’s 47 |
48 |
49 |
50 |
51 | 52 |
53 |
54 | 55 | Clean AND disinfect frequently touched surfaces daily 56 | 57 | – This includes phones, tables, light switches, doorknobs, 58 | countertops, handles, desks, toilets, faucets, and sinks 59 |
60 |
61 |
62 |
63 | 64 |
65 |
66 | Clean the dirty surfaces{" "} 67 | – Use detergent or soap and water prior to disinfection 68 |
69 |
70 |
71 |
72 | 73 |
74 |
75 | 76 | Stay informed about the local COVID-19 situation 77 | {" "} 78 | – Get up-to-date information about local COVID-19 activity from 79 | public health officials. 80 |
81 |
82 |
83 |
84 | 85 |
86 |
87 | 88 | Dedicated, lined trash can 89 | {" "} 90 | – If possible, dedicate a lined trash can for the ill person. Use 91 | gloves when removing garbage bags, and handling & disposing of 92 | trash. 93 |
94 |
95 |
96 |
97 |
98 | ); 99 | } 100 | -------------------------------------------------------------------------------- /src/Pages/Home/Take-steps/TakeSteps.module.css: -------------------------------------------------------------------------------- 1 | .TakeSteps { 2 | width: 100%; 3 | height: 100vh; 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | background-color: #f7f9fe; 8 | padding: 5vh 5vw; 9 | font-family: "Roboto", sans-serif; 10 | color: #3d4b69; 11 | } 12 | .TakeSteps > div { 13 | background-color: #fff; 14 | width: 100%; 15 | height: 77vh; 16 | display: flex; 17 | justify-content: space-between; 18 | align-items: center; 19 | text-justify: auto; 20 | } 21 | 22 | .imageSection { 23 | width: 45%; 24 | height: 100%; 25 | display: flex; 26 | justify-content: center; 27 | align-items: center; 28 | } 29 | .imageSection img { 30 | height: 100%; 31 | } 32 | .checkIcon { 33 | color: #3dca93; 34 | margin-right: 10px; 35 | } 36 | .textSection { 37 | width: 55%; 38 | height: 100%; 39 | display: flex; 40 | flex-direction: column; 41 | justify-content: space-around; 42 | } 43 | .textSection > div { 44 | display: flex; 45 | font-size: 16px; 46 | line-height: 23px; 47 | } 48 | .boldText { 49 | font-weight: bolder; 50 | } 51 | @media screen and (max-width: 680px) { 52 | .TakeSteps { 53 | height: 160vh; 54 | } 55 | .TakeSteps > div { 56 | height: 160vh; 57 | flex-direction: column; 58 | } 59 | 60 | .imageSection { 61 | width: 90%; 62 | height: 40%; 63 | order: 2; 64 | } 65 | .imageSection img { 66 | height: 100%; 67 | } 68 | .textSection { 69 | width: 90%; 70 | height: 60%; 71 | order: 1; 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /src/Pages/Home/Transmission/Transmission.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import symptom1 from "../../../images/Transmission/cough.png"; 3 | import symptom2 from "../../../images/Transmission/contacting.png"; 4 | import symptom3 from "../../../images/Transmission/person.png"; 5 | import Transmissio from "../../../UI/ReusablePage/ReusablePage"; 6 | export default function Transmission() { 7 | return ( 8 |
9 | 34 |
35 | ); 36 | } 37 | -------------------------------------------------------------------------------- /src/Pages/Home/Treatment/Treatment.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styling from "./Treatment.module.css"; 3 | import { FaCaretRight } from "react-icons/fa"; 4 | 5 | export default function Treatment() { 6 | return ( 7 |
8 |
9 |
10 |

Self Care

11 |

12 | If you have mild symptoms, stay at home until you’ve recovered. You 13 | can relieve your symptoms if you: 14 |

15 |

16 | 17 | Rest and sleep 18 |

19 |

20 | 21 | Keep warm 22 |

23 |

24 | 25 | Drink plenty of liquids 26 |

27 |

28 | 29 | Use a room humidifier or take a hot shower to help ease a sore 30 | throat and cough 31 |

32 |
33 |
34 |

Medical Treatments

35 |

36 | If you develop a fever, cough, and have difficulty breathing, 37 | promptly seek medical care. Call in advance and tell your health 38 | provider of any recent travel or recent contact with travelers 39 |

40 |
41 |
42 |
43 |

BE CAREFULL & STAY SAFE

44 |

TREATMENT FOR CORONAVIRUS

45 |

46 | 47 | To date, there is no vaccine and no specific antiviral medicine to 48 | prevent or treat COVID-2019. 49 | {" "} 50 | However, those affected should receive care to relieve symptoms. 51 | People with serious illness should be hospitalized. Most patients 52 | recover thanks to supportive care 53 |

54 |

55 | Antibiotics do not help, as they do not work against viruses. 56 | Treatment aims to relieve the symptoms while your body fights the 57 | illness. You'll need to stay in isolation, away from other people, 58 | until you have recovered 59 |

60 |
61 |
62 | ); 63 | } 64 | -------------------------------------------------------------------------------- /src/Pages/Home/Treatment/Treatment.module.css: -------------------------------------------------------------------------------- 1 | .Treatment { 2 | width: 100%; 3 | height: 90vh; 4 | display: flex; 5 | justify-content: space-between; 6 | align-items: center; 7 | background-color: #2766bb; 8 | padding: 5vh 8vw; 9 | font-family: "Roboto", sans-serif; 10 | color: aliceblue; 11 | } 12 | .TreatmentBox { 13 | background-color: #1b47a1; 14 | width: 40%; 15 | height: 80%; 16 | display: flex; 17 | flex-direction: column; 18 | justify-content: space-around; 19 | align-items: center; 20 | border-radius: 5px; 21 | } 22 | .TreatmentBox > div:first-child { 23 | width: 90%; 24 | height: 60%; 25 | display: flex; 26 | flex-direction: column; 27 | justify-content: space-around; 28 | } 29 | .TreatmentBox > div:last-child { 30 | width: 90%; 31 | height: 30%; 32 | display: flex; 33 | flex-direction: column; 34 | justify-content: space-around; 35 | } 36 | .TreatmentBox h3 { 37 | font-family: "Oswald", sans-serif; 38 | } 39 | .TreatmentText { 40 | width: 50%; 41 | height: 50%; 42 | display: flex; 43 | flex-direction: column; 44 | justify-content: space-around; 45 | align-items: flex-end; 46 | text-align: justify; 47 | text-align: right; 48 | } 49 | .TreatmentText h1 { 50 | font-family: "Oswald", sans-serif; 51 | font-size: 40px; 52 | } 53 | .TreatmentText p { 54 | font-size: 16px; 55 | line-height: 25px; 56 | } 57 | .TreatmentText h3 { 58 | color: #73e3ff; 59 | font-family: "Oswald", sans-serif; 60 | } 61 | @media screen and (max-width: 680px) { 62 | .Treatment { 63 | width: 100%; 64 | height: 100vh; 65 | flex-direction: column; 66 | justify-content: space-around; 67 | padding: 2vh 4vw; 68 | } 69 | .TreatmentBox { 70 | width: 100%; 71 | height: 70%; 72 | } 73 | 74 | .TreatmentText { 75 | width: 100%; 76 | height: 50%; 77 | } 78 | .TreatmentText h1 { 79 | font-size: 30px; 80 | } 81 | .TreatmentText p { 82 | font-size: 15px; 83 | line-height: 23px; 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /src/Pages/NotFound/NotFound.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styling from "./NotFound.module.css"; 3 | import NotFoundImage from "../../images/Not-Found/404.png"; 4 | 5 | export default function NotFound() { 6 | return ( 7 |
8 | 9 |
10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /src/Pages/NotFound/NotFound.module.css: -------------------------------------------------------------------------------- 1 | .NotFound { 2 | width: 100%; 3 | height: 100vh; 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | background-color: #fff; 8 | } 9 | .NotFound img { 10 | height: 100%; 11 | } 12 | -------------------------------------------------------------------------------- /src/UI/Footer/Footer.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styling from "./Footer.module.css"; 3 | import logo from "../../images/logo.png"; 4 | 5 | export default function Footer() { 6 | return ( 7 |
8 |
9 |
10 | logo 11 |

12 | This website is for health information and advice about coronavirus 13 | (COVID-19), how to prevent and protect yourself from disease. 14 |

15 |
16 | 17 |
18 |

IMPORTANT LINK

19 | WHO Website 20 | CDC Website 21 | NHS Website 22 | Harvard Health 23 |
24 |
25 |
26 | 33 |
34 |

QUICK LINK

35 | Symptoms 36 | Prevention 37 | Protect Youself 38 | About Corona 39 |
40 |
41 |
42 | ); 43 | } 44 | -------------------------------------------------------------------------------- /src/UI/Footer/Footer.module.css: -------------------------------------------------------------------------------- 1 | .Footer { 2 | background-color: #151c2e; 3 | width: 100%; 4 | height: 50vh; 5 | display: flex; 6 | padding: 5vh 5vw; 7 | font-family: "Roboto", sans-serif; 8 | justify-content: space-around; 9 | align-items: center; 10 | } 11 | .Footer > div { 12 | display: flex; 13 | width: 50%; 14 | height: 85%; 15 | border-bottom: 1px solid rgb(42, 42, 42); 16 | border-top: 1px solid rgb(42, 42, 42); 17 | } 18 | .Footer > div > div { 19 | display: flex; 20 | flex-direction: column; 21 | justify-content: space-around; 22 | width: 50%; 23 | height: 100%; 24 | } 25 | .Footer img { 26 | width: 55%; 27 | } 28 | .Footer h3 { 29 | color: rgb(204, 200, 200); 30 | font-family: "Oswald", sans-serif; 31 | } 32 | .Footer p { 33 | color: rgb(204, 200, 200); 34 | } 35 | .Footer a { 36 | color: rgb(141, 140, 140); 37 | text-decoration: none; 38 | } 39 | .Footer a:hover { 40 | color: rgb(204, 200, 200); 41 | } 42 | .additional { 43 | align-items: flex-end; 44 | padding-right: 10px; 45 | } 46 | @media screen and (max-width: 680px) { 47 | .Footer { 48 | background-color: #151c2e; 49 | width: 100%; 50 | height: 70vh; 51 | display: flex; 52 | padding: 5vh 5vw; 53 | flex-direction: column; 54 | } 55 | .Footer > div { 56 | display: flex; 57 | width: 100%; 58 | height: 100%; 59 | } 60 | .Footer > div > div { 61 | text-align: right; 62 | align-items: flex-end; 63 | } 64 | .Footer img { 65 | width: 55%; 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /src/UI/Header/Header.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { Link, NavLink } from "react-router-dom"; 3 | import styling from "./Header.module.css"; 4 | import logo from "../../images/logo.png"; 5 | 6 | export default function Header() { 7 | // CHANGING NAVBAR ON SCROLL 8 | let [navStyle, setNavStyle] = useState(styling.Header); 9 | window.onscroll = function myFunction() { 10 | if (window.innerHeight / 7 > window.scrollY) { 11 | setNavStyle(styling.Header); 12 | } else { 13 | setNavStyle(styling.newHeader); 14 | } 15 | }; 16 | 17 | return ( 18 |
19 |
20 |

21 | 22 | logo 23 | 24 |

25 |
26 |
27 |

28 | 29 | Home 30 | 31 |

32 |

33 | 34 | Cases 35 | 36 |

37 |
38 |
39 | ); 40 | } 41 | -------------------------------------------------------------------------------- /src/UI/Header/Header.module.css: -------------------------------------------------------------------------------- 1 | .Header { 2 | width: 100%; 3 | height: 12vh; 4 | background-color: #f7f9fe; 5 | position: fixed; 6 | top: 0; 7 | display: flex; 8 | justify-content: space-between; 9 | align-items: center; 10 | padding: 0 5vw; 11 | z-index: 10000000; 12 | } 13 | .newHeader { 14 | width: 100%; 15 | height: 12vh; 16 | box-shadow: 0 4px 8px 0 rgba(1, 1, 1, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1); 17 | /* box-shadow: 0 4px 8px 0 rgba(2, 2, 2, 0.1), 0 6px 20px 0 rgba(7, 7, 7, 0.1); */ 18 | 19 | background-color: #fff; 20 | position: fixed; 21 | top: 0; 22 | display: flex; 23 | justify-content: space-between; 24 | align-items: center; 25 | padding: 0 5vw; 26 | } 27 | 28 | .Header a, 29 | .newHeader a { 30 | text-decoration: none; 31 | margin-left: 30px; 32 | font-size: 16px; 33 | font-weight: bold; 34 | color: black; 35 | } 36 | .active { 37 | background-color: #1468cd; 38 | padding: 9px 30px; 39 | border-radius: 20px; 40 | color: #fff !important; 41 | } 42 | /* .logo img { 43 | width: 43%; 44 | } */ 45 | .logo a { 46 | padding-left: 0; 47 | } 48 | .Header a:hover, 49 | .newHeader a:hover { 50 | color: #3d434e; 51 | } 52 | 53 | .PageLinks { 54 | display: flex; 55 | } 56 | @media screen and (max-width: 680px) { 57 | .Header { 58 | width: 100%; 59 | height: 9vh; 60 | /* background-color: #f7f9fe; 61 | position: fixed; 62 | top: 0; 63 | display: flex; 64 | justify-content: space-between; 65 | align-items: center; 66 | padding: 0 5vw; 67 | z-index: 10000000; */ 68 | } 69 | .newHeader { 70 | width: 100%; 71 | height: 9vh; 72 | /* box-shadow: 0 4px 8px 0 rgba(1, 1, 1, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1); */ 73 | /* box-shadow: 0 4px 8px 0 rgba(2, 2, 2, 0.1), 0 6px 20px 0 rgba(7, 7, 7, 0.1); */ 74 | 75 | /* background-color: #fff; 76 | position: fixed; 77 | top: 0; 78 | display: flex; 79 | justify-content: space-between; 80 | align-items: center; 81 | padding: 0 5vw; */ 82 | } 83 | 84 | .Header a, 85 | .newHeader a { 86 | /* text-decoration: none; */ 87 | margin-left: 12px; 88 | font-size: 12px; 89 | /* font-weight: bold; 90 | color: black; */ 91 | } 92 | .active { 93 | background-color: #1468cd; 94 | padding: 7px 15px; 95 | /* border-radius: 20px; 96 | color: #fff !important; */ 97 | } 98 | .logo img { 99 | width: 70%; 100 | } 101 | /* .logo a { 102 | padding-left: 0; 103 | } 104 | .Header a:hover, 105 | .newHeader a:hover { 106 | color: #3d434e; 107 | } 108 | 109 | .PageLinks { 110 | display: flex; 111 | } */ 112 | } 113 | -------------------------------------------------------------------------------- /src/UI/ReusablePage/Reusable.module.css: -------------------------------------------------------------------------------- 1 | .Transmission { 2 | width: 100%; 3 | height: 100vh; 4 | display: flex; 5 | flex-direction: column; 6 | justify-content: space-between; 7 | align-items: center; 8 | background-color: #f7f9fe; 9 | padding: 5vh 5vw; 10 | font-family: "Roboto", sans-serif; 11 | } 12 | 13 | .TextSection { 14 | width: 70%; 15 | height: 30%; 16 | display: flex; 17 | flex-direction: column; 18 | justify-content: center; 19 | align-items: center; 20 | text-align: center; 21 | } 22 | .TextSection h3 { 23 | color: #1468cd; 24 | font-size: 18px; 25 | } 26 | .TextSection h1 { 27 | font-family: "Oswald", sans-serif; 28 | color: #50658e; 29 | font-size: 40px; 30 | } 31 | .TextSection p { 32 | font-size: 18px; 33 | } 34 | .ImageSection { 35 | width: 100%; 36 | height: 65%; 37 | display: flex; 38 | justify-content: space-between; 39 | align-items: center; 40 | } 41 | .ImageSection > div { 42 | width: 30%; 43 | height: 100%; 44 | display: flex; 45 | flex-direction: column; 46 | justify-content: center; 47 | align-items: center; 48 | box-shadow: 0 4px 8px 0 rgba(2, 2, 2, 0.1), 0 6px 20px 0 rgba(7, 7, 7, 0.1); 49 | border-radius: 5px; 50 | } 51 | 52 | .ImageSection h3 { 53 | color: #1468cd; 54 | margin: 5% 5% 0% 5%; 55 | } 56 | .ImageSection p { 57 | margin: 3% 5% 0% 5%; 58 | } 59 | .ImageSection img { 60 | width: 100%; 61 | } 62 | .ImageSection > .addClassForBg { 63 | box-shadow: none; 64 | text-align: center; 65 | height: 80%; 66 | } 67 | 68 | .ImageSection > div > .addClassForImg { 69 | border-radius: 50%; 70 | width: 50%; 71 | height: 45%; 72 | box-shadow: 0 4px 8px 0 rgba(2, 2, 2, 0.1), 0 6px 20px 0 rgba(7, 7, 7, 0.1); 73 | } 74 | .ImageSection > .addClassForBg > .addClassForImg { 75 | height: 48%; 76 | } 77 | 78 | @media screen and (max-width: 680px) { 79 | .Transmission { 80 | height: auto; 81 | } 82 | 83 | .TextSection { 84 | width: 90%; 85 | height: 30%; 86 | display: flex; 87 | } 88 | .TextSection h3 { 89 | font-size: 15px; 90 | } 91 | .TextSection h1 { 92 | font-size: 30px; 93 | } 94 | .TextSection p { 95 | font-size: 16px; 96 | } 97 | .ImageSection { 98 | flex-direction: column; 99 | } 100 | .ImageSection > div { 101 | width: 90%; 102 | margin: 20px 0; 103 | } 104 | 105 | .ImageSection h3 { 106 | color: #1468cd; 107 | margin: 5% 5% 0% 5%; 108 | } 109 | .ImageSection p { 110 | margin: 3% 5% 0% 5%; 111 | } 112 | .ImageSection img { 113 | width: 100%; 114 | } 115 | .ImageSection > .addClassForBg { 116 | box-shadow: none; 117 | text-align: center; 118 | height: 80%; 119 | } 120 | 121 | .ImageSection > div > .addClassForImg { 122 | border-radius: 50%; 123 | width: 50%; 124 | height: 45%; 125 | box-shadow: 0 4px 8px 0 rgba(2, 2, 2, 0.1), 0 6px 20px 0 rgba(7, 7, 7, 0.1); 126 | } 127 | .ImageSection > .addClassForBg > .addClassForImg { 128 | height: 48%; 129 | } 130 | } 131 | -------------------------------------------------------------------------------- /src/UI/ReusablePage/ReusablePage.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styling from "./Reusable.module.css"; 3 | 4 | export default function Transmission(props) { 5 | return ( 6 |
7 |
8 |

{props.subHeading}

9 |

{props.heding}

10 |

{props.textHeading}

11 |
12 |
13 |
16 | 22 | 23 |

{props.imageSection1.heading}

24 |

{props.imageSection1.text}

25 |
26 |
29 | 35 | 36 |

{props.imageSection2.heading}

37 |

{props.imageSection2.text}

38 |
39 |
42 | 48 | 49 |

{props.imageSection3.heading}

50 |

{props.imageSection3.text}

51 |
52 | {props.addClassForMultiple && !props.addClassForSix ? ( 53 |
56 | 62 | 63 |

{props.imageSection4.heading}

64 |

{props.imageSection4.text}

65 |
66 | ) : null} 67 |
68 |
69 | ); 70 | } 71 | -------------------------------------------------------------------------------- /src/images/Cover-Page/main-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/Cover-Page/main-image.png -------------------------------------------------------------------------------- /src/images/Handwash/hand-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/Handwash/hand-1.png -------------------------------------------------------------------------------- /src/images/Handwash/hand-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/Handwash/hand-2.png -------------------------------------------------------------------------------- /src/images/Handwash/hand-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/Handwash/hand-3.png -------------------------------------------------------------------------------- /src/images/Handwash/hand-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/Handwash/hand-4.png -------------------------------------------------------------------------------- /src/images/Handwash/hand-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/Handwash/hand-5.png -------------------------------------------------------------------------------- /src/images/Handwash/hand-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/Handwash/hand-6.png -------------------------------------------------------------------------------- /src/images/Not-Found/404.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/Not-Found/404.png -------------------------------------------------------------------------------- /src/images/Protect/advice1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/Protect/advice1.png -------------------------------------------------------------------------------- /src/images/Protect/advice2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/Protect/advice2.png -------------------------------------------------------------------------------- /src/images/Protect/advice3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/Protect/advice3.png -------------------------------------------------------------------------------- /src/images/Protect/advice4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/Protect/advice4.png -------------------------------------------------------------------------------- /src/images/Symptom/symptom1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/Symptom/symptom1.png -------------------------------------------------------------------------------- /src/images/Symptom/symptom2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/Symptom/symptom2.png -------------------------------------------------------------------------------- /src/images/Symptom/symptom3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/Symptom/symptom3.png -------------------------------------------------------------------------------- /src/images/Take-Steps/whatiscovid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/Take-Steps/whatiscovid.png -------------------------------------------------------------------------------- /src/images/Transmission/contacting.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/Transmission/contacting.png -------------------------------------------------------------------------------- /src/images/Transmission/cough.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/Transmission/cough.png -------------------------------------------------------------------------------- /src/images/Transmission/person.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/Transmission/person.png -------------------------------------------------------------------------------- /src/images/do-donts/donts-a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/do-donts/donts-a.png -------------------------------------------------------------------------------- /src/images/do-donts/donts-b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/do-donts/donts-b.png -------------------------------------------------------------------------------- /src/images/do-donts/donts-c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/do-donts/donts-c.png -------------------------------------------------------------------------------- /src/images/do-donts/dos-a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/do-donts/dos-a.png -------------------------------------------------------------------------------- /src/images/do-donts/dos-b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/do-donts/dos-b.png -------------------------------------------------------------------------------- /src/images/do-donts/dos-c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/do-donts/dos-c.png -------------------------------------------------------------------------------- /src/images/do-donts/protect.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/do-donts/protect.png -------------------------------------------------------------------------------- /src/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/logo.png -------------------------------------------------------------------------------- /src/images/updates-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/updates-logo.png -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 12 | monospace; 13 | } 14 | html { 15 | scroll-behavior: smooth; 16 | } 17 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | import * as serviceWorker from "./serviceWorker"; 6 | import { BrowserRouter } from "react-router-dom"; 7 | 8 | ReactDOM.render( 9 | 10 | 11 | 12 | 13 | , 14 | document.getElementById("root") 15 | ); 16 | 17 | serviceWorker.unregister(); 18 | -------------------------------------------------------------------------------- /src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.0/8 are considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | export function register(config) { 24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 25 | // The URL constructor is available in all browsers that support SW. 26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 27 | if (publicUrl.origin !== window.location.origin) { 28 | // Our service worker won't work if PUBLIC_URL is on a different origin 29 | // from what our page is served on. This might happen if a CDN is used to 30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 31 | return; 32 | } 33 | 34 | window.addEventListener('load', () => { 35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 36 | 37 | if (isLocalhost) { 38 | // This is running on localhost. Let's check if a service worker still exists or not. 39 | checkValidServiceWorker(swUrl, config); 40 | 41 | // Add some additional logging to localhost, pointing developers to the 42 | // service worker/PWA documentation. 43 | navigator.serviceWorker.ready.then(() => { 44 | console.log( 45 | 'This web app is being served cache-first by a service ' + 46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA' 47 | ); 48 | }); 49 | } else { 50 | // Is not localhost. Just register service worker 51 | registerValidSW(swUrl, config); 52 | } 53 | }); 54 | } 55 | } 56 | 57 | function registerValidSW(swUrl, config) { 58 | navigator.serviceWorker 59 | .register(swUrl) 60 | .then(registration => { 61 | registration.onupdatefound = () => { 62 | const installingWorker = registration.installing; 63 | if (installingWorker == null) { 64 | return; 65 | } 66 | installingWorker.onstatechange = () => { 67 | if (installingWorker.state === 'installed') { 68 | if (navigator.serviceWorker.controller) { 69 | // At this point, the updated precached content has been fetched, 70 | // but the previous service worker will still serve the older 71 | // content until all client tabs are closed. 72 | console.log( 73 | 'New content is available and will be used when all ' + 74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' 75 | ); 76 | 77 | // Execute callback 78 | if (config && config.onUpdate) { 79 | config.onUpdate(registration); 80 | } 81 | } else { 82 | // At this point, everything has been precached. 83 | // It's the perfect time to display a 84 | // "Content is cached for offline use." message. 85 | console.log('Content is cached for offline use.'); 86 | 87 | // Execute callback 88 | if (config && config.onSuccess) { 89 | config.onSuccess(registration); 90 | } 91 | } 92 | } 93 | }; 94 | }; 95 | }) 96 | .catch(error => { 97 | console.error('Error during service worker registration:', error); 98 | }); 99 | } 100 | 101 | function checkValidServiceWorker(swUrl, config) { 102 | // Check if the service worker can be found. If it can't reload the page. 103 | fetch(swUrl, { 104 | headers: { 'Service-Worker': 'script' }, 105 | }) 106 | .then(response => { 107 | // Ensure service worker exists, and that we really are getting a JS file. 108 | const contentType = response.headers.get('content-type'); 109 | if ( 110 | response.status === 404 || 111 | (contentType != null && contentType.indexOf('javascript') === -1) 112 | ) { 113 | // No service worker found. Probably a different app. Reload the page. 114 | navigator.serviceWorker.ready.then(registration => { 115 | registration.unregister().then(() => { 116 | window.location.reload(); 117 | }); 118 | }); 119 | } else { 120 | // Service worker found. Proceed as normal. 121 | registerValidSW(swUrl, config); 122 | } 123 | }) 124 | .catch(() => { 125 | console.log( 126 | 'No internet connection found. App is running in offline mode.' 127 | ); 128 | }); 129 | } 130 | 131 | export function unregister() { 132 | if ('serviceWorker' in navigator) { 133 | navigator.serviceWorker.ready 134 | .then(registration => { 135 | registration.unregister(); 136 | }) 137 | .catch(error => { 138 | console.error(error.message); 139 | }); 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | --------------------------------------------------------------------------------