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",
"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": {
......
* {
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;
}
......@@ -8,10 +8,8 @@ export function Card(props) {
return (
<div className="card">
<h1>{props.title}</h1>
<div>
<h1 className="cardTitle">{props.title}</h1>
{props.children}
</div>
</div>
);
}
......@@ -36,7 +36,7 @@ export function EndingNumberOutput() {
}
return (
<div>
<div className="endingNumberHolder">
<h1>{convertedNumber} {currentOutputUnit}</h1>
</div>
);
......
......@@ -13,7 +13,7 @@ export function NumberInputField() {
}
return (
<div>
<div className="inputFieldContainer">
<input className="inputField" type="text" placeholder={ placeHolderString } onChange={handleChange}/>
</div>
);
......
......@@ -52,20 +52,12 @@ export function UnitSelector(props) {
unsubscribe();
}
function handleSubmit(e) {
e.preventDefault();
}
return (
<div>
<form onSubmit={handleSubmit}>
<div className="select-container">
<div className="selectorContainer">
<select className="selector" name="units" onChange={handleChange}>
{unitSelectorOptions.map((option) =>
<option value={option.value}>{option.label}</option>)}
</select>
</div>
</form>
</div>
);
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment