V0.0.9 / Styling Done

This commit is contained in:
2021-04-13 21:13:18 -04:00
parent ca7ea5fbf3
commit f8da0347da
13 changed files with 553 additions and 79 deletions
-3
View File
@@ -3,9 +3,6 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "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": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-scripts": "4.0.3", "react-scripts": "4.0.3",
+3
View File
@@ -0,0 +1,3 @@
RewriteEngine On
DirectoryIndex index.html
+57 -2
View File
@@ -1,6 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Google Tag Manager -->
<script>
(function (w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != "dataLayer" ? "&l=" + l : "";
j.async = true;
j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, "script", "dataLayer", "GTM-K4XHBR6");
</script>
<!-- End Google Tag Manager -->
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -17,8 +31,10 @@
@import "%PUBLIC_URL%/styles/variables-dark.css" screen and @import "%PUBLIC_URL%/styles/variables-dark.css" screen and
(prefers-color-scheme: dark); (prefers-color-scheme: dark);
@import "%PUBLIC_URL%/styles/extrasmall.css"; @import "%PUBLIC_URL%/styles/extrasmall.css";
@import "%PUBLIC_URL%/styles/small.css" only screen and (min-width: 768px) @import "%PUBLIC_URL%/styles/small.css" only screen and (min-width: 400px)
and (max-width: 1024px); and (max-width: 767px);
@import "%PUBLIC_URL%/styles/smallmedium.css" only screen and
(min-width: 768px) and (max-width: 1023px);
@import "%PUBLIC_URL%/styles/medium.css" only screen and @import "%PUBLIC_URL%/styles/medium.css" only screen and
(min-width: 1024px); (min-width: 1024px);
@import "%PUBLIC_URL%/styles/large.css" only screen and @import "%PUBLIC_URL%/styles/large.css" only screen and
@@ -71,9 +87,48 @@
background-image: url("%PUBLIC_URL%/logo512.png"); background-image: url("%PUBLIC_URL%/logo512.png");
} }
</style> </style>
<!-- Google Analytics -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-7VZCY223NG"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "G-7VZCY223NG");
</script>
<title>Vax & Me</title> <title>Vax & Me</title>
</head> </head>
<body> <body>
<!-- Google Tag Manager (noscript) -->
<noscript>
<iframe
src="https://www.googletagmanager.com/ns.html?id=GTM-K4XHBR6"
height="0"
width="0"
style="display: none; visibility: hidden"
>
</iframe>
</noscript>
<!-- End Google Tag Manager (noscript) -->
<div id="root"></div> <div id="root"></div>
<footer data-font="sans">
<div>
<h6 class="overline" data-font="sans">FDA Data Sources</h6>
<a href="https://www.fda.gov/media/144416/download">PFizer-BioNTech</a>
<a href="https://www.fda.gov/media/144637/download">Moderna</a>
<a href="https://www.fda.gov/media/146304/download">J&J Janssen</a>
</div>
<div>
<h6 class="overline" data-font="sans">Download</h6>
<a href="%PUBLIC_URL%/vaxandme_chart.pdf">Visualized Chart</a>
</div>
<div>
Designed &amp; Developed with ❤ by Alba Rajanibala and Ayushya Amitabh
</div>
</footer>
</body> </body>
</html> </html>
+3
View File
@@ -0,0 +1,3 @@
.input-popup.expanded {
height: 40vh;
}
+188 -27
View File
@@ -2,6 +2,8 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
transition: all ease-in-out 0.2s; transition: all ease-in-out 0.2s;
color: var(--color-secondary);
user-select: none;
} }
html { html {
@@ -9,9 +11,14 @@ html {
} }
body { body {
display: flex; display: flex;
flex-direction: column;
font-size: 10px; font-size: 10px;
padding: 3.75rem; padding: 3.75rem;
height: calc(100vh - 7.5rem); padding-bottom: 0 !important;
height: calc(100vh - 3.75rem);
overflow-x: hidden;
max-width: 100vw;
background: var(--color-primary);
} }
#root { #root {
@@ -19,18 +26,19 @@ body {
display: flex; display: flex;
} }
#root > div { .app-container {
flex: 1; flex: 1;
display: flex;
flex-direction: column;
} }
#root > div > main { header {
flex: 1; display: flex;
justify-content: center;
flex-direction: column;
} }
.logo-container { .logo-container {
display: flex; display: flex;
width: fit-content;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
@@ -41,18 +49,16 @@ body {
display: inline-block; display: inline-block;
} }
.logo-text-container { .logo-text-container {
display: inline-flex; display: none;
align-items: center; justify-content: center;
vertical-align: middle; vertical-align: middle;
flex-direction: column;
flex: 1; flex: 1;
margin-left: 1.5rem; margin-left: 1.5rem;
} }
.logo-text-container p { .logo-text-container p {
font-size: 2.4rem; font-size: 2.4rem;
} }
.logo-text-container p:last-of-type {
margin-left: 0.75rem;
}
.subheader { .subheader {
font-size: 2.5rem; font-size: 2.5rem;
@@ -65,8 +71,24 @@ body {
margin: 0; margin: 0;
} }
.overline[data-button] {
border-bottom: 1px solid;
width: fit-content;
cursor: pointer;
}
.overline[data-button] a {
text-decoration: none;
}
.intro { .intro {
margin: 4.5rem 0; margin: 4.5rem 0;
display: inline-block;
width: fit-content;
}
.question-container {
margin: 3.5rem 0;
} }
.question { .question {
@@ -93,11 +115,6 @@ body {
cursor: pointer; cursor: pointer;
} }
.answer:hover,
.answer:focus {
background-color: var(--color-secondary-light);
}
.answer.selected { .answer.selected {
background-color: var(--color-bright); background-color: var(--color-bright);
} }
@@ -107,10 +124,15 @@ body {
.symptom-container.subheader { .symptom-container.subheader {
margin-top: 5rem; margin-top: 5rem;
margin-bottom: 1rem; margin-bottom: 2.5rem;
display: block !important; display: block !important;
} }
.symptom-container.subheader .overline {
margin: 1rem 0;
}
.symptom-container {
margin-bottom: 5rem;
}
.symptom { .symptom {
max-width: 100%; max-width: 100%;
padding: 1.5rem; padding: 1.5rem;
@@ -151,14 +173,6 @@ body {
text-align: center; text-align: center;
display: block; 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 { .symptom-chance:before {
content: "EXPERIENCED BY"; content: "EXPERIENCED BY";
font-size: 1rem; font-size: 1rem;
@@ -176,5 +190,152 @@ body {
footer { footer {
font-size: 1.2rem; font-size: 1.2rem;
padding: 1.5rem; padding: 5rem 3.75rem;
width: calc(100vw - 7.5rem);
margin-left: -3.75rem;
background-color: var(--color-secondary-light);
transition: none !important;
display: flex;
flex-direction: column;
}
footer > div {
flex: 1;
display: flex;
flex-direction: column;
color: var(--color-primary);
}
footer > div > .overline {
color: var(--color-primary);
}
footer > div:not(:first-of-type) {
margin-top: 3rem;
}
a {
color: var(--color);
margin-top: 0.75rem;
max-width: fit-content;
}
@keyframes slideUp {
0% {
transform: translateY(300%);
}
100% {
transform: translateY(0);
}
}
.input-popup {
position: sticky;
background-color: var(--color-secondary-light);
bottom: 1rem;
height: 13.5rem;
margin-bottom: 7.5rem;
transition: height ease-in-out 0.3s;
overflow: hidden;
border-radius: 2rem;
max-height: 85vh;
display: flex;
flex-direction: column;
animation: 0.5s ease-out 0s 1 slideUp;
animation-delay: 1s;
animation-fill-mode: forwards;
transform: translateY(300%);
}
.input-popup * {
color: var(--color-primary);
}
.input-popup.expanded {
height: 80vh;
overflow-y: auto;
}
.input-popup .input-popup-header-icon {
transform: rotate(180deg);
}
.input-popup.expanded .input-popup-header-icon {
transform: rotate(0deg);
}
.input-popup-header {
padding: 2.5rem;
position: sticky;
top: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background-color: var(--color-secondary-light);
border-bottom: 1px solid var(--color-tertiary);
}
.input-popup-header-text {
flex: 1;
}
.input-popup-header-icon {
cursor: pointer;
background-color: var(--color-secondary);
outline: none;
color: var(--color-primary);
border: 1px solid transparent;
border-radius: 10rem;
height: 5rem;
width: 5rem;
}
.input-popup-body {
padding: 2.5rem 2.5rem;
flex: 1;
}
.input-popup-body .question-container .answers-container .answer {
background-color: var(--color-tertiary);
}
.input-popup-body .question-container .answers-container .answer.selected {
background-color: var(--color-secondary);
}
.input-popup-submit {
padding: 2.5rem;
text-align: center;
font-size: 2rem;
letter-spacing: 0.3rem;
background-color: var(--color-secondary);
cursor: pointer;
}
.input-popup.expanded .input-popup-submit {
position: sticky;
bottom: 0;
}
.input-popup-submit.submitted {
background-color: #55c16c;
}
@media (hover: hover) and (pointer: fine) {
.answer:hover,
.answer.unselected:hover {
background-color: var(--color-secondary-light);
}
.symptom:hover {
box-shadow: 0px 0px 100px var(--color-tertiary);
background-color: var(--color-primary);
}
.symptom.at-site:hover {
box-shadow: 0px 0px 100px var(--color-dim);
background-color: var(--color-secondary-light);
color: var(--color-primary);
}
.symptom.at-site:hover p {
color: var(--color-primary);
}
.input-popup-header-icon:hover {
background-color: var(--color-tertiary);
}
.input-popup-body .question-container .answers-container .answer:hover {
background-color: var(--color-bright);
}
.input-popup-submit:hover {
background-color: var(--color-tertiary);
}
} }
+22 -1
View File
@@ -1,5 +1,26 @@
body { body {
padding: 15rem; padding: 15rem;
padding-top: 10rem; padding-top: 10rem;
height: calc(100vh - 25rem); height: calc(100vh - 10rem);
}
.logo {
width: 10rem;
height: 10rem;
}
.symptom {
max-width: 25rem;
height: 25rem;
}
footer {
padding: 5rem 15rem;
width: calc(100vw - 30rem);
margin-left: -15rem;
}
.input-popup {
height: 10rem;
}
.input-popup.expanded {
height: 50vh;
} }
+40 -9
View File
@@ -1,26 +1,33 @@
body { body {
padding: 7.5rem; padding: 7.5rem;
padding-top: 5rem; padding-top: 5rem;
height: calc(100vh - 12.5rem); height: calc(100vh - 5rem);
} }
.logo { .logo {
width: 7.5rem; width: 7.5rem;
height: 7.5rem; height: 7.5rem;
} }
.logo-text-container {
flex-direction: column; .intro .overline {
justify-content: center; font-size: 3rem;
align-items: flex-start;
} }
.logo-text-container p:last-of-type { .intro .subheader {
margin-left: 0; font-size: 4rem;
}
.overline[data-button] {
display: inline-block;
}
.overline[data-button]:not(:first-of-type) {
margin-left: 1.5rem;
} }
.symptom { .symptom {
width: 100%; width: 100%;
max-width: 20rem; max-width: 20rem;
display: inline-block; height: 20rem;
display: inline-flex;
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
} }
.symptom-emoji { .symptom-emoji {
@@ -51,7 +58,31 @@ body {
border-top-right-radius: 1rem; border-top-right-radius: 1rem;
border-bottom-right-radius: 1rem; border-bottom-right-radius: 1rem;
} }
footer { footer {
font-size: 1.7rem; font-size: 1.7rem;
padding: 1.5rem; padding: 5rem 7.5rem;
width: calc(100vw - 15rem);
margin-left: -7.5rem;
flex-direction: row;
}
footer > div {
flex-direction: column;
flex: 1;
}
footer > div:not(:first-of-type) {
margin-left: 3rem;
margin-top: 0;
}
footer > div:last-of-type {
flex: 3;
align-items: flex-end;
}
.input-popup {
height: 10rem;
}
.input-popup.expanded {
height: 55vh;
} }
+7
View File
@@ -0,0 +1,7 @@
.input-popup {
height: 10rem;
}
.input-popup.expanded {
height: 85vh;
}
+7
View File
@@ -0,0 +1,7 @@
.input-popup {
height: 10rem;
}
.input-popup.expanded {
height: 65vh;
}
+9
View File
@@ -0,0 +1,9 @@
:root {
--color-primary: black;
--color-secondary: white;
--color-secondary-light: rgb(185, 185, 185);
--color-tertiary: rgb(105, 105, 105);
--color-bright: #636363;
--color-dim: #352f2f;
font-size: 10px;
}
+4 -4
View File
@@ -1,9 +1,9 @@
:root { :root {
--color-primary: white; --color-primary: white;
--color-secondary: black; --color-secondary: black;
--color-secondary-light: rgb(87, 87, 87); --color-secondary-light: rgb(56, 56, 56);
--color-tertiary: #f7f6f6; --color-tertiary: rgba(185, 185, 185, 0.459);
--color-bright: rgb(25, 48, 122); --color-bright: #575757;
--color-dim: rgb(138, 154, 209); --color-dim: #aeadb0;
font-size: 10px; font-size: 10px;
} }
Binary file not shown.
+203 -23
View File
@@ -131,7 +131,6 @@ const MD_DOSE2_OLDER_RESULT = {
"NAUSEA / VOMITING": "1", "NAUSEA / VOMITING": "1",
FEVER: "1", FEVER: "1",
}; };
const JJ_YOUNGER_RESULT = { const JJ_YOUNGER_RESULT = {
"PAIN AT SITE": "6", "PAIN AT SITE": "6",
"RED AT SITE": "1", "RED AT SITE": "1",
@@ -185,9 +184,9 @@ const VAX_RESULTS = {
const ICONS = { const ICONS = {
"PAIN AT SITE": "💪", "PAIN AT SITE": "💪",
"RED AT SITE": "🔴", "RED AT SITE": "🔴",
"SWELLING AT SITE": "⭕", "SWELLING AT SITE": "💢",
FATIGUE: "🥱", FATIGUE: "🥱",
HEADACHE: "🤯", HEADACHE: "🤕",
"NEED PAIN MED": "💊", "NEED PAIN MED": "💊",
"MUSCLE PAIN": "😫", "MUSCLE PAIN": "😫",
CHILLS: "🥶", CHILLS: "🥶",
@@ -205,8 +204,50 @@ class App extends React.Component {
name: "", name: "",
dose: "", dose: "",
age: "", age: "",
gid: "",
showInputPopup: false,
answers: {},
}; };
} }
componentDidMount() {
const params = window.location.pathname
.toUpperCase()
.split("/")
.filter((v) => v.length > 0);
if (params) {
if (params[0] && VAX_NAMES[params[0]]) {
const name = VAX_NAMES[params[0]];
this.setState({ name });
switch (name) {
case VAX_NAMES.PB:
case VAX_NAMES.MD:
if (params[1] && VAX_DOSES[params[1]]) {
const dose = VAX_DOSES[params[1]];
this.setState({ dose });
if (params[2] && VAX_AGES[name][params[2]]) {
const age = VAX_AGES[name][params[2]];
this.setState({ age });
}
}
break;
case VAX_NAMES.JJ:
if (params[1] && VAX_AGES[name][params[1]]) {
const age = VAX_AGES[name][params[1]];
this.setState({ age });
}
break;
default:
break;
}
}
}
if (window.gtag) {
window.gtag("get", "G-7VZCY223NG", "client_id", (client_id) => {
this.setState({ gid: client_id });
});
}
}
shouldShowAgeGroup = () => { shouldShowAgeGroup = () => {
const { name, dose } = this.state; const { name, dose } = this.state;
switch (name) { switch (name) {
@@ -243,13 +284,81 @@ class App extends React.Component {
return null; return null;
} }
}; };
render() { copyShareLink = () => {
const { name, dose, age } = this.state; const { name, dose, age } = this.state;
let SHARE_URL = window.location.host;
const serialize_name = Object.keys(VAX_NAMES).filter(
(k) => VAX_NAMES[k] === name
)[0];
const serialize_dose = Object.keys(VAX_DOSES).filter(
(k) => VAX_DOSES[k] === dose
)[0];
const serialize_age = Object.keys(VAX_AGES[name]).filter(
(k) => VAX_AGES[name][k] === age
)[0];
if (serialize_name) {
SHARE_URL += `/${serialize_name}`;
}
if (serialize_dose) {
SHARE_URL += `/${serialize_dose}`;
}
if (serialize_age) {
SHARE_URL += `/${serialize_age}`;
}
const copyTextInput = document.createElement("input");
document.body.appendChild(copyTextInput);
copyTextInput.value = SHARE_URL.toLowerCase();
copyTextInput.select();
document.execCommand("copy");
copyTextInput.remove();
document.querySelector("#share-result").innerHTML = "Copied Link";
setTimeout(() => {
document.querySelector("#share-result").innerHTML = "Share ↗";
}, 1500);
};
updateAnswers = (symptom) => {
const { answers } = this.state;
const newAnswers = Object.assign({}, answers);
if (answers[symptom]) {
newAnswers[symptom] = !answers[symptom];
} else {
newAnswers[symptom] = true;
}
this.setState({ answers: newAnswers });
};
submitAnswer = () => {
document.querySelector(".input-popup-submit").innerHTML = "SENDING...";
const { name, dose, age, answers, gid } = this.state;
const result = Object.assign({}, this.getResults());
const symptoms = {};
Object.keys(result).forEach((symptom) => {
symptoms[symptom] = false;
});
const submitAnswers = Object.assign({}, symptoms, answers, {
name,
dose,
age,
gid,
});
setTimeout(() => {
document.querySelector(".input-popup-submit").innerHTML = "THANK YOU!";
document.querySelector(".input-popup-submit").classList.add("submitted");
setTimeout(() => {
document.querySelector(".input-popup-submit").innerHTML =
"UPDATE ANSWER";
}, 1500);
}, 1500);
console.log(submitAnswers);
};
render() {
const { name, dose, age, showInputPopup, answers } = this.state;
let result = {}; let result = {};
let resultAtSite = {}; let resultAtSite = {};
if (this.shouldShowResults()) { if (this.shouldShowResults()) {
result = Object.assign({}, this.getResults()); result = Object.assign({}, this.getResults());
Object.keys(result).map((s) => { Object.keys(result).forEach((s) => {
if (s.includes("AT SITE")) { if (s.includes("AT SITE")) {
resultAtSite[s] = result[s]; resultAtSite[s] = result[s];
delete result[s]; delete result[s];
@@ -257,7 +366,8 @@ class App extends React.Component {
}); });
} }
return ( return (
<div> <div className="app-container">
<header>
<div className="logo-container"> <div className="logo-container">
<div className="logo"> </div> <div className="logo"> </div>
<div className="logo-text-container"> <div className="logo-text-container">
@@ -265,16 +375,16 @@ class App extends React.Component {
<p data-font="sans">&amp; ME</p> <p data-font="sans">&amp; ME</p>
</div> </div>
</div> </div>
<main>
<div className="intro"> <div className="intro">
<h6 className="overline" data-font="sans"> <h6 className="overline" data-font="sans">
Getting vaccinated? Getting vaccinated?
</h6> </h6>
<h3 className="subheader" data-font="sans-bold"> <h3 className="subheader" data-font="sans-bold">
Find out what to expect Find out what to expect.
</h3> </h3>
</div> </div>
</header>
<main>
<div className="question-container"> <div className="question-container">
<p className="question" data-font="sans-italic"> <p className="question" data-font="sans-italic">
Select Vaccine Select Vaccine
@@ -285,7 +395,7 @@ class App extends React.Component {
key={`name-group-${v}`} key={`name-group-${v}`}
onClick={() => this.setState({ name: v, dose: "", age: "" })} onClick={() => this.setState({ name: v, dose: "", age: "" })}
data-font="sans-bold" data-font="sans-bold"
className={`answer ${name === v ? "selected" : ""} ${ className={`vaccine answer${name === v ? " selected" : ""}${
name && name !== v ? " unselected" : "" name && name !== v ? " unselected" : ""
}`} }`}
> >
@@ -306,7 +416,7 @@ class App extends React.Component {
key={`dose-group-${v}`} key={`dose-group-${v}`}
onClick={() => this.setState({ dose: v, age: "" })} onClick={() => this.setState({ dose: v, age: "" })}
data-font="sans-bold" data-font="sans-bold"
className={`answer ${dose === v ? "selected" : ""} ${ className={`dose answer${dose === v ? " selected" : ""}${
dose && dose !== v ? " unselected" : "" dose && dose !== v ? " unselected" : ""
}`} }`}
> >
@@ -328,7 +438,7 @@ class App extends React.Component {
key={`age-group-${v}`} key={`age-group-${v}`}
onClick={() => this.setState({ age: v })} onClick={() => this.setState({ age: v })}
data-font="sans-bold" data-font="sans-bold"
className={`answer ${age === v ? "selected" : ""} ${ className={`age answer${age === v ? " selected" : ""}${
age && age !== v ? " unselected" : "" age && age !== v ? " unselected" : ""
}`} }`}
> >
@@ -340,9 +450,21 @@ class App extends React.Component {
) : null} ) : null}
{this.shouldShowResults() ? ( {this.shouldShowResults() ? (
<h3 className="symptom-container subheader" data-font="sans-bold"> <div className="symptom-container subheader">
Here's what to expect <h3 data-font="sans-bold">Here's what to expect.</h3>
</h3> <h6
id="share-result"
onClick={this.copyShareLink}
className="overline"
data-font="sans"
data-button
>
Share ↗
</h6>
<h6 className="overline" data-font="sans" data-button>
<a href="/vaxandme_chart.pdf">Download Chart ↗</a>
</h6>
</div>
) : null} ) : null}
{this.shouldShowResults() ? ( {this.shouldShowResults() ? (
@@ -372,16 +494,74 @@ class App extends React.Component {
</div> </div>
) : null} ) : null}
</main> </main>
<footer data-font="sans"> {this.shouldShowResults() ? (
<div> <div className={`input-popup${showInputPopup ? " expanded" : ""}`}>
All data shown is sourced from FDA report on vaccine efficacy. <div
Updated on April 6th, 2021. className="input-popup-header"
onClick={() => this.setState({ showInputPopup: !showInputPopup })}
>
<div className="input-popup-header-text">
<h6 className="overline" data-font="sans">
Already vaxxed?
</h6>
<h3 className="subheader" data-font="sans-bold">
Tell us how it went.
</h3>
</div> </div>
<div> <button
Designed &amp; Developed with ❤ by Alba Rajanibala and Ayushya data-font="sans"
Amitabh className="subheader input-popup-header-icon"
onClick={() =>
this.setState({ showInputPopup: !showInputPopup })
}
>
&#9660;
</button>
</div> </div>
</footer> <div className="input-popup-body">
<p className="question" data-font="sans">
I am in age group <strong>{age}</strong> and got
<strong>{!!dose ? ` ${dose} ` : ""}</strong>
{!!dose ? `of` : ""} the
<strong> {name}</strong> vaccine. I experienced:
</p>
<div className="question-container">
<p className="question" data-font="sans-italic">
(Select all side effects that you experienced)
</p>
<div className="answers-container">
{Object.keys(resultAtSite).map((symptom) => (
<button
key={`ans-${symptom}`}
data-font="sans-bold"
className={`answer${answers[symptom] ? " selected" : ""}`}
onClick={() => this.updateAnswers(symptom)}
>
{symptom}
</button>
))}
{Object.keys(result).map((symptom) => (
<button
key={`ans-${symptom}`}
data-font="sans-bold"
className={`answer${answers[symptom] ? " selected" : ""}`}
onClick={() => this.updateAnswers(symptom)}
>
{symptom}
</button>
))}
</div>
</div>
</div>
<div
onClick={this.submitAnswer}
className="input-popup-submit"
data-font="sans-bold"
>
SUBMIT
</div>
</div>
) : null}
</div> </div>
); );
} }