├── .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 | You need to enable JavaScript to run this app.
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 |
20 |
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 | changeCountry(e.target.value)}>
8 | Global
9 | {countries.map((country, i) => (
10 |
11 | {country}
12 |
13 | ))}
14 |
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 |
15 |
19 |
23 |
27 |
31 |
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 |
41 |
42 |
43 |
44 |
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 |
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 |
24 |
25 |
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 |
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 |
--------------------------------------------------------------------------------