diff --git a/README.md b/README.md index 50e5933d0..6d68bc9ac 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,25 @@ # Survey form with React -Replace this readme with your own information about your project. +✔️ **Brief** -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +This week we will be practicing React state and controlled forms by making a Typeform-like product. Your completed project should consist of at least 3 questions that need to be answered by users. + +**What you need to do** + +✓ Your survey should consist of at least 3 questions. + +✓ At least one question should use radio buttons. + +✓ At least one question should use a select dropdown. + +✓ There should be a submit button. When pressed your app should hide the input form and show a summary of the user's submissions. + +✓ Your site should follow accessibility guidelines ## The problem -Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next? +Trying to learn React. Lot of new stuff... ## View it live -Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about. +https://benchpress1rm.netlify.app diff --git a/code/public/favicon.ico b/code/public/favicon.ico new file mode 100644 index 000000000..ce14c9ff4 Binary files /dev/null and b/code/public/favicon.ico differ diff --git a/code/public/index.html b/code/public/index.html index e6730aa66..3628cf3ee 100644 --- a/code/public/index.html +++ b/code/public/index.html @@ -4,31 +4,20 @@ - - Technigo React App + + + + + + + + + Big Dada's Gym
- diff --git a/code/public/og-image-survey.jpg b/code/public/og-image-survey.jpg new file mode 100644 index 000000000..362d30dee Binary files /dev/null and b/code/public/og-image-survey.jpg differ diff --git a/code/src/App.js b/code/src/App.js index f2007d229..1fdfaa428 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -1,9 +1,60 @@ -import React from 'react'; +import React, { useState } from 'react'; +import { Name } from './components/Name'; +import { Kilograms } from './components/Kilograms'; +import { Level } from './components/Level'; +import { Reps } from './components/Reps'; +import { Result } from './components/Result'; export const App = () => { + const [step, setStep] = useState(1); + const [name, setName] = useState(''); + const [kilo, setKilo] = useState(''); + const [reps, setReps] = useState(''); + const [level, setLevel] = useState(); + + const handleStepIncrease = () => { + setStep(step + 1); + } + return ( -
- Find me in src/app.js! +
+
+ {step === 1 && ( + + + )} + {step === 2 && ( + + )} + {step === 3 && ( +
+

All right,

+

{name}

+

Your best at the gym?

+
+

kg

+

reps

+
+
+ + +
+
+ )} + {step === 4 && ( + + )} + {step < 4 && ( +
+ {/*

Current step: {step}

*/} + +
+ )} +
); } diff --git a/code/src/components/Kilograms.js b/code/src/components/Kilograms.js new file mode 100644 index 000000000..499985b26 --- /dev/null +++ b/code/src/components/Kilograms.js @@ -0,0 +1,11 @@ +import React from 'react'; + +export const Kilograms = ({ kilo, setKilo }) => { + const handleKiloChange = (event) => { + setKilo(event.target.value); + }; + + return ( + + ); +}; \ No newline at end of file diff --git a/code/src/components/Level.js b/code/src/components/Level.js new file mode 100644 index 000000000..29adcab9e --- /dev/null +++ b/code/src/components/Level.js @@ -0,0 +1,32 @@ +import React from 'react' + +const levelSelect = ['YES', 'NO'] + +export const Level = ({ level, setLevel }) => { + const handleLevelSelect = (event) => { + setLevel(event.target.value); + } + return ( +
+

Bench Press

+

1 RM

+

We do the math – you lift!

+
+ {levelSelect.map((yesorno) => ( + + ))} +
+
+ ); +}; + +export default Level \ No newline at end of file diff --git a/code/src/components/Name.js b/code/src/components/Name.js new file mode 100644 index 000000000..5ede5a519 --- /dev/null +++ b/code/src/components/Name.js @@ -0,0 +1,16 @@ +import React from 'react'; + +export const Name = ({ name, setName }) => { + const handleNameChange = (event) => { + const limit = 10; + setName(event.target.value.slice(0, limit)); + }; + return ( +
+

Bench Press

+

1 RM

+

What is your name?

+ +
+ ); +} diff --git a/code/src/components/OneRepMax.js b/code/src/components/OneRepMax.js new file mode 100644 index 000000000..73c20108a --- /dev/null +++ b/code/src/components/OneRepMax.js @@ -0,0 +1,20 @@ +import React from 'react'; + +export const OneRepMax = ({ kilo, reps }) => { + const resultEpley = (kilo * (1 + reps / 30)); + const resultBrzycki = (kilo * (36 / (37 - reps))); + const resultBaechle = (kilo * (1 + 0.033 * reps)); + const result = (resultEpley + resultBrzycki + resultBaechle) / 3; + return Math.round(result); +}; + +export const Result = ({ name, kilo, reps }) => { + const oneRepMax = OneRepMax({ kilo, reps }); + return ( + <> +

OK, here we go {name}

+

You have already lifted {reps} with {kilo} in the benchpress.

+

As you consider yourself beginner, your 1 rep max is around {oneRepMax}

+ + ); +}; \ No newline at end of file diff --git a/code/src/components/Reps.js b/code/src/components/Reps.js new file mode 100644 index 000000000..8037391bb --- /dev/null +++ b/code/src/components/Reps.js @@ -0,0 +1,30 @@ +import React from 'react' + +export const Reps = ({ reps, setReps }) => { + return ( +
+ +
+ ); +}; + +export default Reps diff --git a/code/src/components/Result.js b/code/src/components/Result.js new file mode 100644 index 000000000..c037ff7dc --- /dev/null +++ b/code/src/components/Result.js @@ -0,0 +1,50 @@ +import React from 'react'; + +export const Result = ({ name, kilo, reps }) => { + const resultEpley = (kilo * (1 + reps / 30)); + const resultBrzycki = (kilo * (36 / (37 - reps))); + const resultBaechle = (kilo * (1 + 0.033 * reps)); + const oneRepMax = (resultEpley + resultBrzycki + resultBaechle) / 3; + console.log(oneRepMax); + return ( + <> +
+

{`${name}'s`}

+

Bench Press Max

+

{Math.round(oneRepMax)} kg

+
+
+
+

2 reps

+

3 reps

+

4 reps

+

5 reps

+

6 reps

+

7 reps

+

8 reps

+

9 reps

+

10 reps

+

11 reps

+

12 reps

+
+
+

{Math.round(oneRepMax * 0.97)} kg

+

{Math.round(oneRepMax * 0.94)} kg

+

{Math.round(oneRepMax * 0.91)} kg

+

{Math.round(oneRepMax * 0.88)} kg

+

{Math.round(oneRepMax * 0.86)} kg

+

{Math.round(oneRepMax * 0.83)} kg

+

{Math.round(oneRepMax * 0.81)} kg

+

{Math.round(oneRepMax * 0.79)} kg

+

{Math.round(oneRepMax * 0.77)} kg

+

{Math.round(oneRepMax * 0.75)} kg

+

{Math.round(oneRepMax * 0.73)} kg

+ +
+
+
+ +
+ + ); +}; diff --git a/code/src/index.css b/code/src/index.css index 4a1df4db7..1f151edcd 100644 --- a/code/src/index.css +++ b/code/src/index.css @@ -1,13 +1,585 @@ +*, +*:before, +*:after { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +:root { + --primary: #002a3a; + --secondary: #FBF8F3; + --third: #ff8f33; + --dark-box-shadow: 5px 7px 41px 9px rgba(255,255,255,0.8),6px 6px 25px -10px rgba(255,255,255,0.8); +} + + body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", - "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", - sans-serif; + font-family: "Sora", "Helvetica Neue", "Helvetica", "Arial", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; +background: var(--primary); +color: var(--secondary); + } + + code { font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } + +p { + + font-size: 28px; + font-weight: 600; + font-family: "Sora", "Helvetica Neue", "Helvetica", "Arial", sans-serif; + margin: 30px, 0, 0, 30px; +} + +.gym_app_container { + transform: scale(0.86); + display: flex; + justify-content: center; + align-items: center; +} + +.page-one-container { + + display: flex; + flex-direction: column; + align-items: center; + margin-top: 50px; +} + +.page-one-title { + font-size: 28px; + margin-bottom: 0; + font-weight: 800; +} + +.page-one-sub-title { + font-size: 28px; + margin-top: 4px; + font-weight: 800; +} + +.page-one-question { + font-size: 18px; + margin-top: 90px; + font-weight: 800; +} + +.yes-no-buttton { + + margin-top: 60px; + font-size: 18px; + font-weight: 800; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + line-height: 2.1; + display: flex; + gap: 6em; +} + +input[type="radio"] { + display: grid; + place-content: center; + appearance: none; + background-color: var(--secondary); + margin: 0; + margin-left:6px; + font: inherit; + color: var(--third); + width: 1.15em; + height: 1.15em; + border: 0.15em solid var(--secondary); + border-radius: 50%; + cursor: pointer; +} + +input[type="radio"]::before { + content: ""; + width: 0.65em; + height: 0.65em; + border-radius: 50%; + transform: scale(0); + transition: 120ms transform ease-in-out; + box-shadow: inset 1em 1em var(--third); + cursor: pointer; +} + + +input[type="radio"]:checked::before { + transform: scale(1); + cursor: pointer; +} + + + +.button_container{ + +position: absolute; +top: 364px; +left: calc(50% - 28px); +} + +.button-next { + font-size: 28px; + margin-bottom: 0; + font-weight: 800; + background-color: transparent; + border: none; + color: var(--third); + margin-top:100px; + cursor:pointer; +} + + +.page-two-question { + font-size: 18px; + margin-top: 90px; + font-weight: 800; +} + +.input-field { + margin-top: 40px; + font-size: 20px; + text-align: center; + width: 70%; + font-weight: 600; + color: rgb(63, 62, 62); + font-family: "Sora", "Helvetica Neue", "Helvetica", "Arial", sans-serif; + padding: 10px; + border: none; + padding: 12px 20px; + margin: 8px 0; + box-sizing: border-box; + background-color: #d4d3d3; + -webkit-transition: 0.5s; + transition: 0.5s; + outline: none; +} + +input[type=text]:focus { + background-color: var(--secondary); +} + +.radio-buttons { + font-size: 28px; + font-weight: 600; +} + +.page-three-question { + font-size: 18px; + margin-top: 80px; + font-weight: 800; +} + +.kg-reps { + +display: flex; +align-items: center; +justify-content: center; +gap:90px; +margin-top: 40px; + +} + +.page-three-kg { + font-size: 18px; + font-weight: 800; + margin-left: 10px; + +} + +.page-three-reps { + font-size: 18px; + font-weight: 800; + +} + +.set-kg-reps { + + display: flex; +align-items: center; +justify-content: center; +gap: 36px; +margin-top: 10px; +margin-left:10px; +} + +.kilograms { + margin-top: 40px; + font-size: 20px; + text-align: center; + width: 80px; + font-weight: 600; + color: rgb(63, 62, 62); + font-family: "Sora", "Helvetica Neue", "Helvetica", "Arial", sans-serif; + border: none; + padding: 10px 10px; + margin: 10px 0; + box-sizing: border-box; + background-color: #d4d3d3; + -webkit-transition: 0.5s; + transition: 0.5s; + outline: none; +} + +.kilograms[type=number]:focus { + background-color: var(--secondary); +} + + +.reps select { + display: none; /*hide original SELECT element: */ +} + +.reps-selected { + background-color: DodgerBlue; +} + +/* Style the arrow inside the select element: */ +.select-selected:after { + position: absolute; + content: ""; + top: 14px; + right: 10px; + width: 0; + height: 0; + border: 6px solid transparent; + border-color: #fff transparent transparent transparent; +} + +/* Point the arrow upwards when the select box is open (active): */ +.select-selected.select-arrow-active:after { + border-color: transparent transparent #fff transparent; + top: 7px; +} + + + +/* style the items (options), including the selected item: */ +.select-items div,.select-selected { + color: #ffffff; + padding: 8px 16px; + border: 1px solid transparent; + border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent; + cursor: pointer; +} + +/* Style items (options): */ +.select-items { + position: absolute; + background-color: DodgerBlue; + top: 100%; + left: 0; + right: 0; + z-index: 99; +} + +/* Hide the items when the select box is closed: */ +.select-hide { + display: none; +} + +.select-items div:hover, .same-as-selected { + background-color: rgba(0, 0, 0, 0.1); +} + + +.reps { + position:relative; + margin-top: 40px; + font-size: 20px; + text-align: center; + width: 80px; + font-weight: 600; + color: rgb(63, 62, 62); + font-family: "Sora", "Helvetica Neue", "Helvetica", "Arial", sans-serif; + border: none; + padding: 10px 10px; + margin: 10px 8px; + box-sizing: border-box; + background-color: #d4d3d3; + -webkit-transition: 0.5s; + transition: 0.5s; + outline: none; +} + +.reps[type=number]:focus { + background-color: var(--secondary); + +} + + +/* Chrome, Safari, Edge, Opera */ +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +/* Firefox */ +input[type=number] { + -moz-appearance: textfield; + appearance: textfield; +} + + +.one-rep-max-container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin-top: 30px; + +} + + + + + +.one-rep-max-name { + font-size: 28px; + margin-bottom: 0; + font-weight: 800; +} + +.one-rep-max-text { + font-size: 28px; + margin-top: 4px; + font-weight: 800; +} + +.one-rep-max-kg { + font-size: 42px; + margin-top: 32px; + font-weight: 800; +} + +.reps-and-worksets-combo { +display: grid; +grid-template-columns: 1fr 1fr; +gap: 80px; +margin-left: auto; +margin-right: auto; +margin-top: 38px; +max-width: 240px; +width: 240px; + +} + + + + +.one-rep-max-reps { + display: flex; + justify-content: center; + font-size: 18px; + +} + + + +.close_button_container{ + + position: absolute; + top: 500px; + left: calc(50% - 10px); + } + + +.close_button{ + display: flex; + align-items: center; + justify-content: center; + font-size: 24px; + color: var(--third); + font-weight: 900; + margin-top: 24px; + background-color: transparent; + cursor: pointer; + border: none; + margin: 0; + + +} + + + + + + +@media (min-width: 380px) { + + .gym_app_container { + transform: scale(0.86); + display: flex; + justify-content: center; + align-items: center; + } + + + .page-one-container { + margin-top: 50px; + } + + + .page-one-sub-title { + + margin-top: 4px; + + } + + .page-one-question { + font-size: 18px; + margin-top: 170px; + font-weight: 800; + } + + .button_container{ + + position: absolute; + top: 560px; + left: calc(50% - 28px); + } + + + .page-two-question { + + padding-top: 80px; + + } + + .input-field { + margin-top: 20px; + } + + .page-three-question { + + margin-top: 150px; + + } + + + .one-rep-max-container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin-top: 50px; + + } + + + + + + .one-rep-max-name { + font-size: 28px; + margin-bottom: 0; + font-weight: 800; + } + + .one-rep-max-text { + font-size: 28px; + margin-top: 4px; + font-weight: 800; + } + + .one-rep-max-kg { + font-size: 58px; + margin-top: 50px; + font-weight: 800; + } + + + .reps-and-worksets-combo { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 70px; + margin-left: auto; + margin-right: auto; + margin-top: 58px; + max-width: 240px; + width: 240px; + + } + + + .one-rep-max-reps { + display: flex; + justify-content: center; + font-size: 20px; + + } + + + + .close_button_container{ + + position: absolute; + top: 660px; + left: calc(50% - 10px); + max-height: 100px; + } + + + .close_button{ + display: flex; + align-items: center; + justify-content: center; + font-size: 24px; + color: var(--third); + font-weight: 900; + margin-top: 24px; + background-color: transparent; + cursor: pointer; + border: none; + margin: 0; + + + } + + } + + @media (min-width: 520px) { + .gym_app_container { + transform: scale(0.86); + display: flex; + justify-content: center; + align-items: center; + } + + .gym-app { + max-width: 540px; + max-height: 902px; + height: 902px; + border-radius: 10px; + box-shadow: var(--dark-box-shadow); + align-self: center; + display: flex; + margin-left: auto; + margin-right: auto; + padding-left: 20px; + padding-right: 20px; + padding-top: 0; + padding-bottom: 0; + position: relative; + border-radius: 1rem; + box-shadow: var(--light-box-shadow); + + } + + + } + + + diff --git a/code/src/index.js b/code/src/index.js index 99f6d0de7..84eb42916 100644 --- a/code/src/index.js +++ b/code/src/index.js @@ -1,8 +1,6 @@ -import React from 'react'; -import { createRoot } from 'react-dom/client' +import React from 'react' +import ReactDOM from 'react-dom' import './index.css' import { App } from './App' -const container = document.getElementById('root'); -const root = createRoot(container); -root.render(); +ReactDOM.render(, document.getElementById('root'))