diff --git a/unit-conversion/package.json b/unit-conversion/package.json index 3fcb54acbb265081f3db46c048ab9e55156e9d1d..2bdc31d0fa8f267587cc340d9f255e3d63b28dbf 100644 --- a/unit-conversion/package.json +++ b/unit-conversion/package.json @@ -5,7 +5,7 @@ "private": true, "license": "UNLICENSED", "scripts": { - "lint:css": "stylelint '**/*.css' '**/*.module.css' '!coverage/**'", + "lint:css": "stylelint \"**/*.css\" \"**/*.module.css\" \"!coverage/**\"", "lint:js": "eslint --max-warnings 0 ./src", "lint": "run-s --continue-on-error lint:**", "test-once": "react-scripts test --watchAll=false --coverage", diff --git a/unit-conversion/src/app.js b/unit-conversion/src/app.js index d547b717a04cccfd83c5d5eac3f9a82a57e37ea9..c2a952966a9a73eaa58c1f6f87155b28d0bffc40 100644 --- a/unit-conversion/src/app.js +++ b/unit-conversion/src/app.js @@ -5,10 +5,10 @@ import { UnitSelector } from './features/unit-selector/unitSelector.js'; export function App() { return ( <> - <UnitSelector /> + <UnitSelector id="inputUnitSelector"/> <NumberInputField /> <h1>Ouput Section</h1> - <UnitSelector /> + <UnitSelector id="outputUnitSelector"/> <EndingNumberOutput /> </> ); diff --git a/unit-conversion/src/features/ending-number-output/endingNumberOutput.js b/unit-conversion/src/features/ending-number-output/endingNumberOutput.js index d3af4212739bae41d6f01bcf981d67cf9a1012d7..de16f06296e501c69ab6fd932680c89f5d6708a3 100644 --- a/unit-conversion/src/features/ending-number-output/endingNumberOutput.js +++ b/unit-conversion/src/features/ending-number-output/endingNumberOutput.js @@ -4,4 +4,4 @@ export function EndingNumberOutput() { <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 index a72db64d2f2ddfcabd024aeb9a97ef99f1940453..3599709b473d4d057acb3744f39613bff6c7d076 100644 --- a/unit-conversion/src/features/number-input-field/numberInputField.js +++ b/unit-conversion/src/features/number-input-field/numberInputField.js @@ -1,8 +1,14 @@ +import { UnitSelector } from '../unit-selector/unitSelector'; + export function NumberInputField() { + const unitSelectorName = UnitSelector.name; + const inputUnits = document.getElementById('inputUnitSelector').UnitSelector; + const placeHolderString = `Enter # of ${inputUnits}`; return ( <div> <h1>NumberInputField</h1> - <input required type="text" placeholder="Enter # of {unitSelectorUnit}"></input> + <p>{ unitSelectorName }</p> + <input required type="text" placeholder={ placeHolderString }></input> </div> ); } diff --git a/unit-conversion/src/features/unit-selector/unitSelector.js b/unit-conversion/src/features/unit-selector/unitSelector.js index 087deda5d99aa8f0646f0c8ff1d4310b26c78691..ead13b809253d9246e9fe1701916c046c21fc41a 100644 --- a/unit-conversion/src/features/unit-selector/unitSelector.js +++ b/unit-conversion/src/features/unit-selector/unitSelector.js @@ -1,13 +1,40 @@ -export function UnitSelector() { +export function UnitSelector(props) { + const unitSelectorOptions = [ + { + label: 'Km', + value: 'km', + }, + { + label: 'M', + value: 'm', + }, + { + label: 'Cm', + value: 'cm', + }, + { + label: 'Cm', + value: 'cm', + }, + { + label: 'Ft', + value: 'ft', + }, + { + label: 'In', + value: 'in', + }, + ]; + 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 className="select-container"> + <select name="units"> + {unitSelectorOptions.map((option) => + <option value={option.value}>{option.label}</option>)} + </select> + </div> </div> ); } diff --git a/unit-conversion/src/features/unit-selector/unitSelectorSlice.js b/unit-conversion/src/features/unit-selector/unitSelectorSlice.js new file mode 100644 index 0000000000000000000000000000000000000000..a7d9cabbbf301d767b05c1b0cb28906ea34ed7fd --- /dev/null +++ b/unit-conversion/src/features/unit-selector/unitSelectorSlice.js @@ -0,0 +1,25 @@ +import { createSlice } from '@reduxjs/toolkit'; + +const unitSelectorSlice = createSlice({ + name: 'unitSelector', + initialState: { + selectedInputUnit: '', + }, + reducers: { + setCurrentInputUnit: (state, action) => { + const { + value, + } = action.payload; + state.value = value; + }, + }, +}); +export default unitSelectorSlice; + +export const { + setCurrentInputUnit, +} = unitSelectorSlice.actions; + +export function selectCurrentInputUnit(state) { + return state.state.value; +}