From 92f78f62b3d1c166ee28b1695495b95b9697ffd2 Mon Sep 17 00:00:00 2001 From: Gabriel Clark <> Date: Tue, 31 Aug 2021 23:28:44 -0500 Subject: [PATCH] Wrote basic react outline of project. --- .../src/__snapshots__/app.test.js.snap | 83 +++++++++++++++++-- unit-conversion/src/app.js | 14 ++-- .../endingNumberOutput.js | 7 ++ .../number-input-field/numberInputField.js | 8 ++ .../features/unit-selector/unitSelector.js | 13 +++ 5 files changed, 111 insertions(+), 14 deletions(-) create mode 100644 unit-conversion/src/features/ending-number-output/endingNumberOutput.js create mode 100644 unit-conversion/src/features/number-input-field/numberInputField.js create mode 100644 unit-conversion/src/features/unit-selector/unitSelector.js diff --git a/unit-conversion/src/__snapshots__/app.test.js.snap b/unit-conversion/src/__snapshots__/app.test.js.snap index ce50593..1b22075 100644 --- a/unit-conversion/src/__snapshots__/app.test.js.snap +++ b/unit-conversion/src/__snapshots__/app.test.js.snap @@ -2,14 +2,81 @@ exports[`the app has one labeled button that displays the value from the store 1`] = ` <div> - <label> - Taps - : - <button - class="blue" + <div> + <h1> + Unit Selector + </h1> + <select + name="units" > - 9999 - </button> - </label> + <option + value="km" + > + km + </option> + <option + value="m" + > + m + </option> + <option + value="ft" + > + ft + </option> + <option + value="in" + > + in + </option> + </select> + </div> + <div> + <h1> + NumberInputField + </h1> + <input + placeholder="Enter # of {unitSelectorUnit}" + required="" + type="text" + /> + </div> + <h1> + Ouput Section + </h1> + <div> + <h1> + Unit Selector + </h1> + <select + name="units" + > + <option + value="km" + > + km + </option> + <option + value="m" + > + m + </option> + <option + value="ft" + > + ft + </option> + <option + value="in" + > + in + </option> + </select> + </div> + <div> + <h1> + Number Output Text + </h1> + </div> </div> `; diff --git a/unit-conversion/src/app.js b/unit-conversion/src/app.js index 848a3df..d547b71 100644 --- a/unit-conversion/src/app.js +++ b/unit-conversion/src/app.js @@ -1,13 +1,15 @@ -import { Route } from 'react-router-dom'; - -import { Counter } from './features/counter/counter.js'; +import { EndingNumberOutput } from './features/ending-number-output/endingNumberOutput.js'; +import { NumberInputField } from './features/number-input-field/numberInputField.js'; +import { UnitSelector } from './features/unit-selector/unitSelector.js'; export function App() { return ( <> - <Route exact path={'/'}> - <Counter label={'Taps'} /> - </Route> + <UnitSelector /> + <NumberInputField /> + <h1>Ouput Section</h1> + <UnitSelector /> + <EndingNumberOutput /> </> ); } diff --git a/unit-conversion/src/features/ending-number-output/endingNumberOutput.js b/unit-conversion/src/features/ending-number-output/endingNumberOutput.js new file mode 100644 index 0000000..d3af421 --- /dev/null +++ b/unit-conversion/src/features/ending-number-output/endingNumberOutput.js @@ -0,0 +1,7 @@ +export function EndingNumberOutput() { + return ( + <div> + <h1>Number Output Text</h1> + </div> + ); +} \ No newline at end of file diff --git a/unit-conversion/src/features/number-input-field/numberInputField.js b/unit-conversion/src/features/number-input-field/numberInputField.js new file mode 100644 index 0000000..a72db64 --- /dev/null +++ b/unit-conversion/src/features/number-input-field/numberInputField.js @@ -0,0 +1,8 @@ +export function NumberInputField() { + return ( + <div> + <h1>NumberInputField</h1> + <input required type="text" placeholder="Enter # of {unitSelectorUnit}"></input> + </div> + ); +} diff --git a/unit-conversion/src/features/unit-selector/unitSelector.js b/unit-conversion/src/features/unit-selector/unitSelector.js new file mode 100644 index 0000000..087deda --- /dev/null +++ b/unit-conversion/src/features/unit-selector/unitSelector.js @@ -0,0 +1,13 @@ +export function UnitSelector() { + return ( + <div> + <h1>Unit Selector</h1> + <select name="units"> + <option value="km">km</option> + <option value="m">m</option> + <option value="ft">ft</option> + <option value="in">in</option> + </select> + </div> + ); +} -- GitLab