Skip to content
Snippets Groups Projects
Commit ba3437c7 authored by Gabriel Clark's avatar Gabriel Clark
Browse files

Added missing description. Added a required css property.

parent 694411f1
No related branches found
No related tags found
No related merge requests found
{ {
"name": "@unlsoft/starter-code", "name": "unit-conversion",
"version": "1.0.0", "version": "1.1.0",
"description": "A project skeleton to be used as starter code for labs and homework.", "description": "An app that takes units and converts them to other units",
"private": true, "private": true,
"license": "UNLICENSED", "license": "UNLICENSED",
"scripts": { "scripts": {
......
* {
box-sizing: border-box;
}
.card { .card {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
align-items: center;
margin: 7%; margin: 7%;
min-height: 20%; min-height: 20%;
border-radius: 10px; border-radius: 10px;
...@@ -17,13 +20,32 @@ ...@@ -17,13 +20,32 @@
padding-right: 20px; padding-right: 20px;
} }
.cardTitle {
align-self: flex-start;
}
.selectorContainer {
justify-self: center;
align-self: center;
}
.selector { .selector {
border-color: rgba(255 255 255 / 0%); border-color: rgba(255 255 255 / 0%);
border-radius: 5px; border-radius: 5px;
} }
.inputFieldContainer {
justify-self: center;
align-self: center;
}
.inputField { .inputField {
border-color: rgba(255 255 255 / 0%); border-color: rgba(255 255 255 / 0%);
border-radius: 5px; border-radius: 5px;
max-width: 75%; max-width: 75%;
} }
.endingNumberHolder {
justify-self: center;
align-self: center;
}
...@@ -8,10 +8,8 @@ export function Card(props) { ...@@ -8,10 +8,8 @@ export function Card(props) {
return ( return (
<div className="card"> <div className="card">
<h1>{props.title}</h1> <h1 className="cardTitle">{props.title}</h1>
<div>
{props.children} {props.children}
</div> </div>
</div>
); );
} }
...@@ -36,7 +36,7 @@ export function EndingNumberOutput() { ...@@ -36,7 +36,7 @@ export function EndingNumberOutput() {
} }
return ( return (
<div> <div className="endingNumberHolder">
<h1>{convertedNumber} {currentOutputUnit}</h1> <h1>{convertedNumber} {currentOutputUnit}</h1>
</div> </div>
); );
......
...@@ -13,7 +13,7 @@ export function NumberInputField() { ...@@ -13,7 +13,7 @@ export function NumberInputField() {
} }
return ( return (
<div> <div className="inputFieldContainer">
<input className="inputField" type="text" placeholder={ placeHolderString } onChange={handleChange}/> <input className="inputField" type="text" placeholder={ placeHolderString } onChange={handleChange}/>
</div> </div>
); );
......
...@@ -52,20 +52,12 @@ export function UnitSelector(props) { ...@@ -52,20 +52,12 @@ export function UnitSelector(props) {
unsubscribe(); unsubscribe();
} }
function handleSubmit(e) {
e.preventDefault();
}
return ( return (
<div> <div className="selectorContainer">
<form onSubmit={handleSubmit}>
<div className="select-container">
<select className="selector" name="units" onChange={handleChange}> <select className="selector" name="units" onChange={handleChange}>
{unitSelectorOptions.map((option) => {unitSelectorOptions.map((option) =>
<option value={option.value}>{option.label}</option>)} <option value={option.value}>{option.label}</option>)}
</select> </select>
</div> </div>
</form>
</div>
); );
} }
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment