From ba3437c71415d08022d38d6dc32abb14ca394ebe Mon Sep 17 00:00:00 2001
From: Gabriel Clark <>
Date: Wed, 8 Sep 2021 20:27:19 -0500
Subject: [PATCH] Added missing description. Added a required css property.
---
package.json | 6 ++---
unit-conversion/src/features/card/card.css | 24 ++++++++++++++++++-
unit-conversion/src/features/card/card.js | 6 ++---
.../endingNumberOutput.js | 2 +-
.../number-input-field/numberInputField.js | 2 +-
.../features/unit-selector/unitSelector.js | 22 ++++++-----------
6 files changed, 37 insertions(+), 25 deletions(-)
diff --git a/package.json b/package.json
index f31dc60..c931e85 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 d504599..7b7d9f6 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 7c7e973..f2b8e08 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 ad1038b..02f6446 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 e6a5925..e09671d 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 0e25817..270c0e5 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>
);
}
--
GitLab