diff --git a/package.json b/package.json index f31dc60116aef42af31290289f2b88f6882bdc0a..c931e8535a231fb53b80e88db57a263b56f8bd65 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { - "name": "@unlsoft/starter-code", - "version": "1.0.0", - "description": "A project skeleton to be used as starter code for labs and homework.", + "name": "unit-conversion", + "version": "1.1.0", + "description": "An app that takes units and converts them to other units", "private": true, "license": "UNLICENSED", "scripts": { diff --git a/unit-conversion/src/features/card/card.css b/unit-conversion/src/features/card/card.css index d504599396181a0a18537494e5a50412eec2067e..7b7d9f6800b947e1dec6c09fe769172f8b264590 100644 --- a/unit-conversion/src/features/card/card.css +++ b/unit-conversion/src/features/card/card.css @@ -1,7 +1,10 @@ +* { + box-sizing: border-box; +} + .card { display: flex; justify-content: space-around; - align-items: center; margin: 7%; min-height: 20%; border-radius: 10px; @@ -17,13 +20,32 @@ padding-right: 20px; } +.cardTitle { + align-self: flex-start; +} + +.selectorContainer { + justify-self: center; + align-self: center; +} + .selector { border-color: rgba(255 255 255 / 0%); border-radius: 5px; } +.inputFieldContainer { + justify-self: center; + align-self: center; +} + .inputField { border-color: rgba(255 255 255 / 0%); border-radius: 5px; max-width: 75%; } + +.endingNumberHolder { + justify-self: center; + align-self: center; +} diff --git a/unit-conversion/src/features/card/card.js b/unit-conversion/src/features/card/card.js index 7c7e973a2f319b7ee6135bd8aa84652517d6e644..f2b8e08e6b91047b9d61940747a37b7e2b94336c 100644 --- a/unit-conversion/src/features/card/card.js +++ b/unit-conversion/src/features/card/card.js @@ -8,10 +8,8 @@ export function Card(props) { return ( <div className="card"> - <h1>{props.title}</h1> - <div> - {props.children} - </div> + <h1 className="cardTitle">{props.title}</h1> + {props.children} </div> ); } diff --git a/unit-conversion/src/features/ending-number-output/endingNumberOutput.js b/unit-conversion/src/features/ending-number-output/endingNumberOutput.js index ad1038b26a49fe08c7ede60fcaf49201fd274fee..02f64462bb7324264688c0879cf66cc01956bc3a 100644 --- a/unit-conversion/src/features/ending-number-output/endingNumberOutput.js +++ b/unit-conversion/src/features/ending-number-output/endingNumberOutput.js @@ -36,7 +36,7 @@ export function EndingNumberOutput() { } return ( - <div> + <div className="endingNumberHolder"> <h1>{convertedNumber} {currentOutputUnit}</h1> </div> ); diff --git a/unit-conversion/src/features/number-input-field/numberInputField.js b/unit-conversion/src/features/number-input-field/numberInputField.js index e6a5925c98ee0643f62a1146ea2fdaa21899bce9..e09671d0954b940c019e8fdabf1b96624d061cdb 100644 --- a/unit-conversion/src/features/number-input-field/numberInputField.js +++ b/unit-conversion/src/features/number-input-field/numberInputField.js @@ -13,7 +13,7 @@ export function NumberInputField() { } return ( - <div> + <div className="inputFieldContainer"> <input className="inputField" type="text" placeholder={ placeHolderString } onChange={handleChange}/> </div> ); diff --git a/unit-conversion/src/features/unit-selector/unitSelector.js b/unit-conversion/src/features/unit-selector/unitSelector.js index 0e258175e9b172bbc56f5edf028cce558275e155..270c0e54b722166f3201ae0ed496b1f1f08ff324 100644 --- a/unit-conversion/src/features/unit-selector/unitSelector.js +++ b/unit-conversion/src/features/unit-selector/unitSelector.js @@ -43,29 +43,21 @@ export function UnitSelector(props) { const currentUnit = e.target.value; console.log(currentUnit); - if (props.type === 'Input'){ + if (props.type === 'Input') { disbatch(setCurrentInputUnit(currentUnit)); } - if (props.type === 'Output'){ + if (props.type === 'Output') { disbatch(setCurrentOutputUnit(currentUnit)); } unsubscribe(); } - function handleSubmit(e) { - e.preventDefault(); - } - return ( - <div> - <form onSubmit={handleSubmit}> - <div className="select-container"> - <select className="selector" name="units" onChange={handleChange}> - {unitSelectorOptions.map((option) => - <option value={option.value}>{option.label}</option>)} - </select> - </div> - </form> + <div className="selectorContainer"> + <select className="selector" name="units" onChange={handleChange}> + {unitSelectorOptions.map((option) => + <option value={option.value}>{option.label}</option>)} + </select> </div> ); }