ayushya/vaxandme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Start of Vax & Me

Browse Source
This commit is contained in:
ayushya
2021-04-08 02:00:00 -04:00
commit ca7ea5fbf3
24 changed files with 17345 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.firebaserc
+5
View File
@@ -0,0 +1,5 @@
{
"projects": {
"default": "vaxandme"
}
}
.gitignore
+24
View File
@@ -0,0 +1,24 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
*.cache
firebase.json
+16
View File
@@ -0,0 +1,16 @@
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
package-lock.json
Generated
+16512
View File
File diff suppressed because it is too large Load Diff
package.json
+38
View File
@@ -0,0 +1,38 @@
{
"name": "vaxandme",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.10",
"@testing-library/react": "^11.2.6",
"@testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
public/favicon.ico
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

public/fonts/glacialindifference-bold-webfont.woff
BIN
View File
Binary file not shown.
public/fonts/glacialindifference-bold-webfont.woff2
BIN
View File
Binary file not shown.
public/fonts/glacialindifference-italic-webfont.woff
BIN
View File
Binary file not shown.
public/fonts/glacialindifference-italic-webfont.woff2
BIN
View File
Binary file not shown.
public/fonts/glacialindifference-regular-webfont.woff
BIN
View File
Binary file not shown.
public/fonts/glacialindifference-regular-webfont.woff2
BIN
View File
Binary file not shown.
public/index.html
+79
View File
@@ -0,0 +1,79 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Learn about the expected side effects of COVID-19 Vaccines"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<style>
@import "%PUBLIC_URL%/styles/variables.css";
@import "%PUBLIC_URL%/styles/variables-dark.css" screen and
(prefers-color-scheme: dark);
@import "%PUBLIC_URL%/styles/extrasmall.css";
@import "%PUBLIC_URL%/styles/small.css" only screen and (min-width: 768px)
and (max-width: 1024px);
@import "%PUBLIC_URL%/styles/medium.css" only screen and
(min-width: 1024px);
@import "%PUBLIC_URL%/styles/large.css" only screen and
(min-width: 1366px);
@import "%PUBLIC_URL%/styles/extralarge.css" only screen and
(min-width: 1921px);
@font-face {
font-family: "GlacialBold";
src: url("%PUBLIC_URL%/fonts/glacialindifference-bold-webfont.woff2")
format("woff2"),
url("/fonts/glacialindifference-bold-webfont.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "GlacialItalic";
src: url("%PUBLIC_URL%/fonts/glacialindifference-italic-webfont.woff2")
format("woff2"),
url("%PUBLIC_URL%/fonts/glacialindifference-italic-webfont.woff")
format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Glacial";
src: url("%PUBLIC_URL%/fonts/glacialindifference-regular-webfont.woff2")
format("woff2"),
url("%PUBLIC_URL%/fonts/glacialindifference-regular-webfont.woff")
format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
[data-font="sans"] {
font-family: "Glacial", sans-serif;
font-display: swap;
}
[data-font="sans-bold"] {
font-family: "GlacialBold", sans-serif;
font-display: swap;
}
[data-font="sans-italic"] {
font-family: "GlacialItalic", sans-serif;
font-style: italic;
font-display: swap;
}
.logo {
background-image: url("%PUBLIC_URL%/logo512.png");
}
</style>
<title>Vax & Me</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
public/logo192.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.4 KiB

public/logo512.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

public/manifest.json
+25
View File
@@ -0,0 +1,25 @@
{
"short_name": "Vax&Me",
"name": "Vax And Me",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
public/styles/extralarge.css
View File
public/styles/extrasmall.css
+180
View File
@@ -0,0 +1,180 @@
* {
margin: 0;
padding: 0;
transition: all ease-in-out 0.2s;
}
html {
font-size: 10px;
}
body {
display: flex;
font-size: 10px;
padding: 3.75rem;
height: calc(100vh - 7.5rem);
}
#root {
flex: 1;
display: flex;
}
#root > div {
flex: 1;
display: flex;
flex-direction: column;
}
#root > div > main {
flex: 1;
}
.logo-container {
display: flex;
align-items: center;
justify-content: center;
}
.logo {
background-size: 100%;
width: 5rem;
height: 5rem;
display: inline-block;
}
.logo-text-container {
display: inline-flex;
align-items: center;
vertical-align: middle;
flex: 1;
margin-left: 1.5rem;
}
.logo-text-container p {
font-size: 2.4rem;
}
.logo-text-container p:last-of-type {
margin-left: 0.75rem;
}
.subheader {
font-size: 2.5rem;
margin: 0;
}
.overline {
font-size: 2rem;
letter-spacing: 0.1rem;
margin: 0;
}
.intro {
margin: 4.5rem 0;
}
.question {
font-size: 2rem;
}
.answers-container {
margin: 1rem 0;
}
.answer {
display: inline-flex;
font-size: 1.8rem;
padding: 1.2rem 1.5rem;
margin-right: 0.75rem;
margin-bottom: 0.75rem;
border-radius: 24rem;
background-color: var(--color-secondary);
color: var(--color-primary);
outline: none !important;
border: none !important;
letter-spacing: 0.2rem;
text-transform: uppercase;
cursor: pointer;
}
.answer:hover,
.answer:focus {
background-color: var(--color-secondary-light);
}
.answer.selected {
background-color: var(--color-bright);
}
.answer.unselected {
background-color: var(--color-dim);
}
.symptom-container.subheader {
margin-top: 5rem;
margin-bottom: 1rem;
display: block !important;
}
.symptom {
max-width: 100%;
padding: 1.5rem;
flex-direction: column;
justify-content: center;
align-items: center;
border: 1px solid transparent;
border-radius: 1rem;
transition: border-color ease-in-out 0.4s;
transition: box-shadow ease-in-out 0.3s;
}
.symptom.at-site {
background-color: var(--color-dim);
border-radius: 0;
}
.symptom.at-site:first-of-type {
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
}
.symptom.at-site:nth-of-type(3) {
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
}
.symptom-emoji {
text-align: center;
font-size: 3rem;
padding: 0.75rem;
display: block;
}
.symptom-name {
font-size: 2rem;
text-align: center;
display: block;
}
.symptom-chance {
font-size: 1.8rem;
text-align: center;
display: block;
}
.symptom:hover {
box-shadow: 0px 0px 100px var(--color-dim);
background-color: var(--color-primary);
}
.symptom.at-site:hover {
background-color: var(--color-bright);
color: var(--color-primary);
}
.symptom-chance:before {
content: "EXPERIENCED BY";
font-size: 1rem;
display: block;
text-align: center;
letter-spacing: 0.1rem;
}
.symptom-chance:after {
content: "PEOPLE";
font-size: 1rem;
display: block;
text-align: center;
letter-spacing: 0.1rem;
}
footer {
font-size: 1.2rem;
padding: 1.5rem;
}
public/styles/large.css
+5
View File
@@ -0,0 +1,5 @@
body {
padding: 15rem;
padding-top: 10rem;
height: calc(100vh - 25rem);
}
public/styles/medium.css
+57
View File
@@ -0,0 +1,57 @@
body {
padding: 7.5rem;
padding-top: 5rem;
height: calc(100vh - 12.5rem);
}
.logo {
width: 7.5rem;
height: 7.5rem;
}
.logo-text-container {
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.logo-text-container p:last-of-type {
margin-left: 0;
}
.symptom {
width: 100%;
max-width: 20rem;
display: inline-block;
margin-bottom: 0.75rem;
}
.symptom-emoji {
font-size: 3.5rem;
padding: 0.75rem;
}
.symptom-name {
font-size: 2.5rem;
text-align: center;
}
.symptom-chance {
font-size: 2.4rem;
text-align: center;
}
.symptom-chance:before {
font-size: 1.5rem;
}
.symptom-chance:after {
font-size: 1.5rem;
}
.symptom.at-site:first-of-type {
border-radius: 0;
border-top-left-radius: 1rem;
border-bottom-left-radius: 1rem;
}
.symptom.at-site:nth-of-type(3) {
border-radius: 0;
border-top-right-radius: 1rem;
border-bottom-right-radius: 1rem;
}
footer {
font-size: 1.7rem;
padding: 1.5rem;
}
public/styles/small.css
View File
public/styles/variables-dark.css
View File
public/styles/variables.css
+9
View File
@@ -0,0 +1,9 @@
:root {
--color-primary: white;
--color-secondary: black;
--color-secondary-light: rgb(87, 87, 87);
--color-tertiary: #f7f6f6;
--color-bright: rgb(25, 48, 122);
--color-dim: rgb(138, 154, 209);
font-size: 10px;
}
src/index.js
+395
View File
@@ -0,0 +1,395 @@
import React from "react";
import ReactDOM from "react-dom";
const VAX_NAMES = {
PB: "Pfizer-BioNTech",
MD: "Moderna",
JJ: "J&J Janssen",
};
const VAX_DOSES = {
ONE: "Dose 1",
TWO: "Dose 2",
};
const VAX_AGES = {
"Pfizer-BioNTech": {
YOUNGER: "18 - 55",
OLDER: "56 & Older",
},
Moderna: {
YOUNGER: "18 - 64",
OLDER: "65 & Older",
},
"J&J Janssen": {
YOUNGER: "18 - 59",
OLDER: "60 & Older",
},
};
const PB_DOSE1_YOUNGER_RESULT = {
"PAIN AT SITE": "8",
"RED AT SITE": "1",
"SWELLING AT SITE": "1",
FATIGUE: "5",
HEADACHE: "4",
"NEED PAIN MED": "3",
"MUSCLE PAIN": "2",
CHILLS: "1",
DIRRHEA: "1",
"JOINT PAIN": "1",
FEVER: "<1",
VOMITING: "<1",
};
const PB_DOSE2_YOUNGER_RESULT = {
"PAIN AT SITE": "8",
"RED AT SITE": "1",
"SWELLING AT SITE": "1",
FATIGUE: "6",
HEADACHE: "5",
"NEED PAIN MED": "5",
"MUSCLE PAIN": "4",
CHILLS: "4",
"JOINT PAIN": "2",
FEVER: "2",
DIRRHEA: "1",
VOMITING: "<1",
};
const PB_DOSE1_OLDER_RESULT = {
"PAIN AT SITE": "7",
"RED AT SITE": "1",
"SWELLING AT SITE": "1",
FATIGUE: "3",
HEADACHE: "3",
"NEED PAIN MED": "2",
"MUSCLE PAIN": "1",
CHILLS: "1",
DIRRHEA: "1",
"JOINT PAIN": "1",
FEVER: "<1",
VOMITING: "<1",
};
const PB_DOSE2_OLDER_RESULT = {
"PAIN AT SITE": "7",
"RED AT SITE": "1",
"SWELLING AT SITE": "1",
FATIGUE: "5",
HEADACHE: "4",
"NEED PAIN MED": "4",
"MUSCLE PAIN": "3",
CHILLS: "2",
"JOINT PAIN": "2",
DIRRHEA: "1",
FEVER: "1",
VOMITING: "<1",
};
const MD_DOSE1_YOUNGER_RESULT = {
"PAIN AT SITE": "9",
"RED AT SITE": "<1",
"SWELLING AT SITE": "<1",
HEADACHE: "4",
FATIGUE: "4",
"MUSCLE PAIN": "2",
"JOINT PAIN": "2",
"NAUSEA / VOMITING": "1",
FEVER: "1",
CHILLS: "1",
};
const MD_DOSE2_YOUNGER_RESULT = {
"PAIN AT SITE": "9",
"RED AT SITE": "1",
"SWELLING AT SITE": "1",
FATIGUE: "7",
HEADACHE: "6",
"JOINT PAIN": "5",
CHILLS: "5",
FEVER: "2",
"NAUSEA / VOMITING": "2",
"MUSCLE PAIN": "1",
};
const MD_DOSE1_OLDER_RESULT = {
"PAIN AT SITE": "7",
"RED AT SITE": "<1",
"SWELLING AT SITE": "<1",
HEADACHE: "3",
FATIGUE: "3",
"MUSCLE PAIN": "2",
"JOINT PAIN": "2",
"NAUSEA / VOMITING": "1",
CHILLS: "1",
FEVER: "<1",
};
const MD_DOSE2_OLDER_RESULT = {
"PAIN AT SITE": "8",
"RED AT SITE": "1",
"SWELLING AT SITE": "1",
FATIGUE: "6",
HEADACHE: "5",
"MUSCLE PAIN": "5",
"JOINT PAIN": "4",
CHILLS: "3",
"NAUSEA / VOMITING": "1",
FEVER: "1",
};
const JJ_YOUNGER_RESULT = {
"PAIN AT SITE": "6",
"RED AT SITE": "1",
"SWELLING AT SITE": "1",
HEADACHE: "4",
FATIGUE: "4",
"MUSCLE PAIN": "4",
"NEED PAIN MED": "3",
"NAUSEA / VOMITING": "2",
FEVER: "1",
};
const JJ_OLDER_RESULT = {
"PAIN AT SITE": "3",
"RED AT SITE": "<1",
"SWELLING AT SITE": "<1",
HEADACHE: "3",
FATIGUE: "3",
"MUSCLE PAIN": "2",
"NAUSEA / VOMITING": "1",
"NEED PAIN MED": "1",
FEVER: "<1",
};
const VAX_RESULTS = {
"Pfizer-BioNTech": {
"Dose 1": {
"18 - 55": PB_DOSE1_YOUNGER_RESULT,
"56 & Older": PB_DOSE1_OLDER_RESULT,
},
"Dose 2": {
"18 - 55": PB_DOSE2_YOUNGER_RESULT,
"56 & Older": PB_DOSE2_OLDER_RESULT,
},
},
Moderna: {
"Dose 1": {
"18 - 64": MD_DOSE1_YOUNGER_RESULT,
"65 & Older": MD_DOSE1_OLDER_RESULT,
},
"Dose 2": {
"18 - 64": MD_DOSE2_YOUNGER_RESULT,
"65 & Older": MD_DOSE2_OLDER_RESULT,
},
},
"J&J Janssen": {
"18 - 59": JJ_YOUNGER_RESULT,
"60 & Older": JJ_OLDER_RESULT,
},
};
const ICONS = {
"PAIN AT SITE": "💪",
"RED AT SITE": "🔴",
"SWELLING AT SITE": "⭕",
FATIGUE: "🥱",
HEADACHE: "🤯",
"NEED PAIN MED": "💊",
"MUSCLE PAIN": "😫",
CHILLS: "🥶",
DIRRHEA: "💩",
"JOINT PAIN": "🦵",
FEVER: "🤒",
VOMITING: "🤮",
"NAUSEA / VOMITING": "🤮",
};
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
name: "",
dose: "",
age: "",
};
}
shouldShowAgeGroup = () => {
const { name, dose } = this.state;
switch (name) {
case VAX_NAMES.JJ:
return true;
case VAX_NAMES.MD:
case VAX_NAMES.PB:
return !!dose;
default:
return false;
}
};
shouldShowResults = () => {
const { name, dose, age } = this.state;
switch (name) {
case VAX_NAMES.JJ:
return !!age;
case VAX_NAMES.MD:
case VAX_NAMES.PB:
return !!dose && !!age;
default:
return false;
}
};
getResults = () => {
const { name, dose, age } = this.state;
switch (name) {
case VAX_NAMES.JJ:
return VAX_RESULTS[name][age];
case VAX_NAMES.MD:
case VAX_NAMES.PB:
return VAX_RESULTS[name][dose][age];
default:
return null;
}
};
render() {
const { name, dose, age } = this.state;
let result = {};
let resultAtSite = {};
if (this.shouldShowResults()) {
result = Object.assign({}, this.getResults());
Object.keys(result).map((s) => {
if (s.includes("AT SITE")) {
resultAtSite[s] = result[s];
delete result[s];
}
});
}
return (
<div>
<div className="logo-container">
<div className="logo"> </div>
<div className="logo-text-container">
<p data-font="sans-bold">VAX</p>
<p data-font="sans">&amp; ME</p>
</div>
</div>
<main>
<div className="intro">
<h6 className="overline" data-font="sans">
Getting vaccinated?
</h6>
<h3 className="subheader" data-font="sans-bold">
Find out what to expect
</h3>
</div>
<div className="question-container">
<p className="question" data-font="sans-italic">
Select Vaccine
</p>
<div className="answers-container">
{Object.values(VAX_NAMES).map((v) => (
<button
key={`name-group-${v}`}
onClick={() => this.setState({ name: v, dose: "", age: "" })}
data-font="sans-bold"
className={`answer ${name === v ? "selected" : ""} ${
name && name !== v ? "unselected" : ""
}`}
>
{v}
</button>
))}
</div>
</div>
{name && (name === VAX_NAMES.PB || name === VAX_NAMES.MD) ? (
<div className="question-container">
<p className="question" data-font="sans-italic">
Select Dose
</p>
<div className="answers-container">
{Object.values(VAX_DOSES).map((v) => (
<button
key={`dose-group-${v}`}
onClick={() => this.setState({ dose: v, age: "" })}
data-font="sans-bold"
className={`answer ${dose === v ? "selected" : ""} ${
dose && dose !== v ? "unselected" : ""
}`}
>
{v}
</button>
))}
</div>
</div>
) : null}
{this.shouldShowAgeGroup() ? (
<div className="question-container">
<p className="question" data-font="sans-italic">
Select Age Group
</p>
<div className="answers-container">
{Object.values(VAX_AGES[name]).map((v) => (
<button
key={`age-group-${v}`}
onClick={() => this.setState({ age: v })}
data-font="sans-bold"
className={`answer ${age === v ? "selected" : ""} ${
age && age !== v ? "unselected" : ""
}`}
>
{v}
</button>
))}
</div>
</div>
) : null}
{this.shouldShowResults() ? (
<h3 className="symptom-container subheader" data-font="sans-bold">
Here's what to expect
</h3>
) : null}
{this.shouldShowResults() ? (
<div className="symptom-container">
{Object.keys(resultAtSite).map((symptom) => (
<div className="symptom at-site" key={`symptom-${symptom}`}>
<span className="symptom-emoji">{ICONS[symptom]}</span>
<p data-font="sans" className="symptom-name">
{symptom}
</p>
<p data-font="sans-bold" className="symptom-chance">
{resultAtSite[symptom]}/10
</p>
</div>
))}
{Object.keys(result).map((symptom) => (
<div className="symptom" key={`symptom-${symptom}`}>
<span className="symptom-emoji">{ICONS[symptom]}</span>
<p data-font="sans" className="symptom-name">
{symptom}
</p>
<p data-font="sans-bold" className="symptom-chance">
{result[symptom]}/10
</p>
</div>
))}
</div>
) : null}
</main>
<footer data-font="sans">
<div>
All data shown is sourced from FDA report on vaccine efficacy.
Updated on April 6th, 2021.
</div>
<div>
Designed &amp; Developed with ❤ by Alba Rajanibala and Ayushya
Amitabh
</div>
</footer>
</div>
);
}
}
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.querySelector("#root")
);