From db47424f0c71120d6b51423279d7d0d2aeb6ee42 Mon Sep 17 00:00:00 2001
From: jackmnolley <jackmnolley@gmail.com>
Date: Wed, 8 Sep 2021 10:59:53 -0500
Subject: [PATCH] changed logo and cleaned up errors and look of page
---
unit-conversion/public/index.html | 4 +-
unit-conversion/public/logo.svg | 5 -
unit-conversion/public/manifest.json | 2 +-
unit-conversion/public/u.svg | 1 +
unit-conversion/src/features/card/card.css | 1 +
unit-conversion/src/features/card/card.js | 34 ++---
.../endingNumberOutput.js | 86 +++++------
.../number-input-field/numberInputField.js | 40 ++---
.../numberInputFieldSlice.js | 52 +++----
.../features/unit-selector/unitSelector.js | 142 +++++++++---------
.../unit-selector/unitSelectorSlice.js | 80 +++++-----
11 files changed, 222 insertions(+), 225 deletions(-)
delete mode 100644 unit-conversion/public/logo.svg
create mode 100644 unit-conversion/public/u.svg
diff --git a/unit-conversion/public/index.html b/unit-conversion/public/index.html
index a48795d..ac0ad19 100644
--- a/unit-conversion/public/index.html
+++ b/unit-conversion/public/index.html
@@ -9,8 +9,8 @@
content="An app that takes units and converts them to other units"
/>
<meta name="theme-color" content="rgba(208 0 0 / 100%)" />
- <link rel="icon" href="%PUBLIC_URL%/logo.svg" />
- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.svg" />
+ <link rel="icon" href="u.svg" />
+ <link rel="apple-touch-icon" href="u.svg" />
<title>Unit Conversion</title>
</head>
<body>
diff --git a/unit-conversion/public/logo.svg b/unit-conversion/public/logo.svg
deleted file mode 100644
index 9118454..0000000
--- a/unit-conversion/public/logo.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 152 152">
- <rect x="0" y="0" width="152" height="152" fill="rgba(0 0 0 / 100%)" />
- <path d="M147,1H90V42h10V75.673L53.532,2.393,52.648,1H2V42H12v66H2v41H62V108H52V74.336l46.467,73.271L99.351,149H150V108H140V42h10V1Z" stroke-width="3" stroke="rgba(255 255 255 / 100%)" fill="rgba(208 0 0 / 100%)">
- </path>
-</svg>
diff --git a/unit-conversion/public/manifest.json b/unit-conversion/public/manifest.json
index aaece82..14082a3 100644
--- a/unit-conversion/public/manifest.json
+++ b/unit-conversion/public/manifest.json
@@ -4,7 +4,7 @@
"description": "An app that takes units and converts them to other units",
"icons": [
{
- "src": "logo.svg",
+ "src": "u.svg",
"type": "image/svg+xml",
"sizes": "192x192 512x512",
"purpose": "any maskable"
diff --git a/unit-conversion/public/u.svg b/unit-conversion/public/u.svg
new file mode 100644
index 0000000..deefd64
--- /dev/null
+++ b/unit-conversion/public/u.svg
@@ -0,0 +1 @@
+<svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g id="U"><path d="m337.255 281.038c.015 67.588-1.025 87.876-24.229 105.894-22.163 17.227-82.017 19.79-110.537-1.201-27.246-20.039-28.315-48.384-27.847-96.782l.103-288.949h-128.745v268.557c0 93.472 0 181.758 103.638 226.406 47.595 20.546 154.453 24.243 211.816 1.465 104.546-41.528 104.546-129.477 104.546-231.738v-264.69h-128.745z"/></g></svg>
\ No newline at end of file
diff --git a/unit-conversion/src/features/card/card.css b/unit-conversion/src/features/card/card.css
index 0b564d2..010776b 100644
--- a/unit-conversion/src/features/card/card.css
+++ b/unit-conversion/src/features/card/card.css
@@ -13,6 +13,7 @@
0 22.3px 17.9px rgba(0 0 0 / 7.2%),
0 41.8px 33.4px rgba(0 0 0 / 8.6%),
0 100px 80px rgba(0 0 0 / 12%);
+ padding-left: 40px;
}
.inputField {
diff --git a/unit-conversion/src/features/card/card.js b/unit-conversion/src/features/card/card.js
index 5368f55..7c7e973 100644
--- a/unit-conversion/src/features/card/card.js
+++ b/unit-conversion/src/features/card/card.js
@@ -1,17 +1,17 @@
-import PropTypes from 'prop-types';
-import './card.css';
-
-export function Card(props) {
- Card.propTypes = {
- title: PropTypes.string.isRequired,
- };
-
- return (
- <div className="card">
- <h1>{props.title}</h1>
- <div>
- {props.children}
- </div>
- </div>
- );
-}
+import PropTypes from 'prop-types';
+import './card.css';
+
+export function Card(props) {
+ Card.propTypes = {
+ title: PropTypes.string.isRequired,
+ };
+
+ return (
+ <div className="card">
+ <h1>{props.title}</h1>
+ <div>
+ {props.children}
+ </div>
+ </div>
+ );
+}
diff --git a/unit-conversion/src/features/ending-number-output/endingNumberOutput.js b/unit-conversion/src/features/ending-number-output/endingNumberOutput.js
index 3d3af89..ad1038b 100644
--- a/unit-conversion/src/features/ending-number-output/endingNumberOutput.js
+++ b/unit-conversion/src/features/ending-number-output/endingNumberOutput.js
@@ -1,43 +1,43 @@
-/* eslint-disable no-magic-numbers */
-import { useSelector } from 'react-redux';
-import { selectCurrentOutputUnit, selectCurrentInputUnit} from '../unit-selector/unitSelectorSlice';
-import { selectNumberOfUnits } from '../number-input-field/numberInputFieldSlice';
-
-export function EndingNumberOutput() {
- const conversionTable = {
- // To use these conversion multiply your specified unit with
- // its number to get meters.
- unitsToMeters: {
- km: 1000,
- m: 1.0,
- cm: 1 / 100,
- ft: 1 / 3.281,
- in: 1 / 39.3701,
- },
- // Multiply a number of meters by one of these conversions to
- // get that number of units.
- metersToUnits: {
- km: 1 / 1000,
- m: 1.0,
- cm: 100,
- ft: 3.281,
- in: 39.3701,
- },
- };
-
- const currentInputUnit = useSelector(selectCurrentInputUnit);
- const currentOutputUnit = useSelector(selectCurrentOutputUnit);
- const numberOfUnits = parseFloat(useSelector(selectNumberOfUnits));
- const numberOfMeters = numberOfUnits * conversionTable.unitsToMeters[currentInputUnit];
- let convertedNumber = numberOfMeters * conversionTable.metersToUnits[currentOutputUnit];
-
- if (isNaN(convertedNumber)) {
- convertedNumber = 'Please enter number to convert to ';
- }
-
- return (
- <div>
- <h1>{convertedNumber} {currentOutputUnit}</h1>
- </div>
- );
-}
+/* eslint-disable no-magic-numbers */
+import { useSelector } from 'react-redux';
+import { selectCurrentOutputUnit, selectCurrentInputUnit } from '../unit-selector/unitSelectorSlice';
+import { selectNumberOfUnits } from '../number-input-field/numberInputFieldSlice';
+
+export function EndingNumberOutput() {
+ const conversionTable = {
+ // To use these conversion multiply your specified unit with
+ // its number to get meters.
+ unitsToMeters: {
+ km: 1000,
+ m: 1.0,
+ cm: 1 / 100,
+ ft: 1 / 3.281,
+ in: 1 / 39.3701,
+ },
+ // Multiply a number of meters by one of these conversions to
+ // get that number of units.
+ metersToUnits: {
+ km: 1 / 1000,
+ m: 1.0,
+ cm: 100,
+ ft: 3.281,
+ in: 39.3701,
+ },
+ };
+
+ const currentInputUnit = useSelector(selectCurrentInputUnit);
+ const currentOutputUnit = useSelector(selectCurrentOutputUnit);
+ const numberOfUnits = parseFloat(useSelector(selectNumberOfUnits));
+ const numberOfMeters = numberOfUnits * conversionTable.unitsToMeters[currentInputUnit];
+ let convertedNumber = numberOfMeters * conversionTable.metersToUnits[currentOutputUnit];
+
+ if (isNaN(convertedNumber)) {
+ convertedNumber = 'Please enter number to convert to ';
+ }
+
+ return (
+ <div>
+ <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 65c50c8..e6a5925 100644
--- a/unit-conversion/src/features/number-input-field/numberInputField.js
+++ b/unit-conversion/src/features/number-input-field/numberInputField.js
@@ -1,20 +1,20 @@
-import { useSelector, useDispatch } from 'react-redux';
-import { selectCurrentInputUnit } from '../unit-selector/unitSelectorSlice';
-import { setNumberOfUnits } from './numberInputFieldSlice';
-
-export function NumberInputField() {
- const currentInputUnit = useSelector(selectCurrentInputUnit);
- const placeHolderString = `Enter # of "${currentInputUnit}"`;
- const dispatch = useDispatch();
-
- function handleChange(e) {
- const currentNumber = e.target.value;
- dispatch(setNumberOfUnits(currentNumber));
- }
-
- return (
- <div>
- <input className="inputField" type="text" placeholder={ placeHolderString } onChange={handleChange}/>
- </div>
- );
-}
+import { useSelector, useDispatch } from 'react-redux';
+import { selectCurrentInputUnit } from '../unit-selector/unitSelectorSlice';
+import { setNumberOfUnits } from './numberInputFieldSlice';
+
+export function NumberInputField() {
+ const currentInputUnit = useSelector(selectCurrentInputUnit);
+ const placeHolderString = `Enter # of "${currentInputUnit}"`;
+ const dispatch = useDispatch();
+
+ function handleChange(e) {
+ const currentNumber = e.target.value;
+ dispatch(setNumberOfUnits(currentNumber));
+ }
+
+ return (
+ <div>
+ <input className="inputField" type="text" placeholder={ placeHolderString } onChange={handleChange}/>
+ </div>
+ );
+}
diff --git a/unit-conversion/src/features/number-input-field/numberInputFieldSlice.js b/unit-conversion/src/features/number-input-field/numberInputFieldSlice.js
index 2d301f6..a387902 100644
--- a/unit-conversion/src/features/number-input-field/numberInputFieldSlice.js
+++ b/unit-conversion/src/features/number-input-field/numberInputFieldSlice.js
@@ -1,26 +1,26 @@
-import { createSlice } from '@reduxjs/toolkit';
-
-const numberInputFieldSlice = createSlice({
- name: 'numberInputField',
- initialState: {
- numberToConvert: 0,
- },
- reducers: {
- setNumberOfUnits: (state, action) => {
- const numToConvert = action.payload;
- return {
- ...state,
- numberToConvert: numToConvert,
- };
- },
- },
-});
-export default numberInputFieldSlice;
-
-export const {
- setNumberOfUnits,
-} = numberInputFieldSlice.actions;
-
-export function selectNumberOfUnits(state) {
- return state.numberInputField.numberToConvert;
-}
+import { createSlice } from '@reduxjs/toolkit';
+
+const numberInputFieldSlice = createSlice({
+ name: 'numberInputField',
+ initialState: {
+ numberToConvert: 0,
+ },
+ reducers: {
+ setNumberOfUnits: (state, action) => {
+ const numToConvert = action.payload;
+ return {
+ ...state,
+ numberToConvert: numToConvert,
+ };
+ },
+ },
+});
+export default numberInputFieldSlice;
+
+export const {
+ setNumberOfUnits,
+} = numberInputFieldSlice.actions;
+
+export function selectNumberOfUnits(state) {
+ return state.numberInputField.numberToConvert;
+}
diff --git a/unit-conversion/src/features/unit-selector/unitSelector.js b/unit-conversion/src/features/unit-selector/unitSelector.js
index 5cf9a67..7dbb9ed 100644
--- a/unit-conversion/src/features/unit-selector/unitSelector.js
+++ b/unit-conversion/src/features/unit-selector/unitSelector.js
@@ -1,71 +1,71 @@
-import { store } from '../../app/store';
-import { useDispatch } from 'react-redux';
-import {
- setCurrentInputUnit,
- setCurrentOutputUnit,
-} from './unitSelectorSlice';
-import PropTypes from 'prop-types';
-
-export function UnitSelector(props) {
- // type will either be 'Input' or 'Output'
- UnitSelector.propTypes = {
- type: PropTypes.string.isRequired,
- };
-
- const unitSelectorOptions = [
- {
- label: 'Km',
- value: 'km',
- },
- {
- label: 'M',
- value: 'm',
- },
- {
- label: 'Cm',
- value: 'cm',
- },
- {
- label: 'Ft',
- value: 'ft',
- },
- {
- label: 'In',
- value: 'in',
- },
- ];
-
- const disbatch = useDispatch();
- function handleChange(e) {
- const unsubscribe = store.subscribe(() =>
- console.log('State after dispatch: ', store.getState()),
- );
- const currentUnit = e.target.value;
- console.log(currentUnit);
-
- if (props.type === 'Input'){
- disbatch(setCurrentInputUnit(currentUnit));
- }
- if (props.type === 'Output'){
- disbatch(setCurrentOutputUnit(currentUnit));
- }
- unsubscribe();
- }
-
- function handleSubmit(e) {
- e.preventDefault();
- }
-
- return (
- <div>
- <form onSubmit={handleSubmit}>
- <div className="select-container">
- <select name="units" onChange={handleChange}>
- {unitSelectorOptions.map((option) =>
- <option value={option.value}>{option.label}</option>)}
- </select>
- </div>
- </form>
- </div>
- );
-}
+import { store } from '../../app/store';
+import { useDispatch } from 'react-redux';
+import {
+ setCurrentInputUnit,
+ setCurrentOutputUnit,
+} from './unitSelectorSlice';
+import PropTypes from 'prop-types';
+
+export function UnitSelector(props) {
+ // type will either be 'Input' or 'Output'
+ UnitSelector.propTypes = {
+ type: PropTypes.string.isRequired,
+ };
+
+ const unitSelectorOptions = [
+ {
+ label: 'Km',
+ value: 'km',
+ },
+ {
+ label: 'M',
+ value: 'm',
+ },
+ {
+ label: 'Cm',
+ value: 'cm',
+ },
+ {
+ label: 'Ft',
+ value: 'ft',
+ },
+ {
+ label: 'In',
+ value: 'in',
+ },
+ ];
+
+ const disbatch = useDispatch();
+ function handleChange(e) {
+ const unsubscribe = store.subscribe(() =>
+ console.log('State after dispatch: ', store.getState()),
+ );
+ const currentUnit = e.target.value;
+ console.log(currentUnit);
+
+ if (props.type === 'Input'){
+ disbatch(setCurrentInputUnit(currentUnit));
+ }
+ if (props.type === 'Output'){
+ disbatch(setCurrentOutputUnit(currentUnit));
+ }
+ unsubscribe();
+ }
+
+ function handleSubmit(e) {
+ e.preventDefault();
+ }
+
+ return (
+ <div>
+ <form onSubmit={handleSubmit}>
+ <div className="select-container">
+ <select name="units" onChange={handleChange}>
+ {unitSelectorOptions.map((option) =>
+ <option value={option.value}>{option.label}</option>)}
+ </select>
+ </div>
+ </form>
+ </div>
+ );
+}
diff --git a/unit-conversion/src/features/unit-selector/unitSelectorSlice.js b/unit-conversion/src/features/unit-selector/unitSelectorSlice.js
index 2886513..f8e6d30 100644
--- a/unit-conversion/src/features/unit-selector/unitSelectorSlice.js
+++ b/unit-conversion/src/features/unit-selector/unitSelectorSlice.js
@@ -1,40 +1,40 @@
-import { createSlice } from '@reduxjs/toolkit';
-
-const unitSelectorSlice = createSlice({
- name: 'unitSelector',
- initialState: {
- currentInputUnit: 'km',
- currentOutputUnit: 'km',
- },
- reducers: {
- // The action payload should have the unit to switch to with the in or out
- setCurrentInputUnit: (state, action) => {
- const newUnit = action.payload;
- return {
- ...state,
- currentInputUnit: newUnit,
- };
- },
- setCurrentOutputUnit: (state, action) => {
- const newUnit = action.payload;
- return {
- ...state,
- currentOutputUnit: newUnit,
- };
- },
- },
-});
-export default unitSelectorSlice;
-
-export const {
- setCurrentInputUnit,
- setCurrentOutputUnit,
-} = unitSelectorSlice.actions;
-
-export function selectCurrentInputUnit(state) {
- return state.unitSelector.currentInputUnit;
-}
-
-export function selectCurrentOutputUnit(state) {
- return state.unitSelector.currentOutputUnit;
-}
+import { createSlice } from '@reduxjs/toolkit';
+
+const unitSelectorSlice = createSlice({
+ name: 'unitSelector',
+ initialState: {
+ currentInputUnit: 'km',
+ currentOutputUnit: 'km',
+ },
+ reducers: {
+ // The action payload should have the unit to switch to with the in or out
+ setCurrentInputUnit: (state, action) => {
+ const newUnit = action.payload;
+ return {
+ ...state,
+ currentInputUnit: newUnit,
+ };
+ },
+ setCurrentOutputUnit: (state, action) => {
+ const newUnit = action.payload;
+ return {
+ ...state,
+ currentOutputUnit: newUnit,
+ };
+ },
+ },
+});
+export default unitSelectorSlice;
+
+export const {
+ setCurrentInputUnit,
+ setCurrentOutputUnit,
+} = unitSelectorSlice.actions;
+
+export function selectCurrentInputUnit(state) {
+ return state.unitSelector.currentInputUnit;
+}
+
+export function selectCurrentOutputUnit(state) {
+ return state.unitSelector.currentOutputUnit;
+}
--
GitLab