nicholas/yarn-calc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Allow simple calculations of skein/cost. Style.

Browse Source
This commit is contained in:
Nicholas Warzin 2020-11-25 09:10:22 -05:00
parent b2ec7b3e50
commit 689c1b4cdf
3 changed files with 63 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package.json
View File

@ -1,9 +1,11 @@
{
"name": "yarn",
"homepage": "/yarn",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.11.0",
"@material-ui/core": "^4.11.1",
"@material-ui/icons": "^4.9.1",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
@ -15,6 +17,7 @@
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"deploy": "npm run build && scp -rp build/* nicholas@warzin.com:/var/www/random/yarn",
"test": "react-scripts test",
"eject": "react-scripts eject"
},

38
src/App.css
View File

@ -1,38 +1,14 @@
.App {
text-align: center;
max-width: 400px;
margin: 12px auto;
padding: 0 20px;
}
.App-logo {
height: 40vmin;
pointer-events: none;
h1 {
font-size: 64px !important;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
h6 {
margin-bottom: 20px !important;
}

64
src/App.js
View File

@ -2,46 +2,64 @@ import { useState, useEffect } from "react";
import logo from './logo.svg';
import './App.css';
import {Typography, TextField, InputAdornment, Grid} from "@material-ui/core";
import {Typography, TextField, InputAdornment, Grid, } from "@material-ui/core";
import FavoriteIcon from "@material-ui/icons/Favorite";
const App = (props) => {
const [values, setValues] = useState({
total: 1914,
total: "",
skeinLength: "",
skeinPrice: "",
skeinCount: "",
});
// const [skeinCount, setSkeinCount] = useState("");
const [totalPrice, setTotalPrice] = useState();
const [skeinsRequiredDisabled, setSkeinsRequiredDisabled] = useState(false);
const _handleChange = (event) => {
const { id, value } = event.target;
console.log("changing", id, value);
// console.log("changing", id, value);
setValues({
...values,
[id]: Number(value),
[id]: parseFloat(value || 0),
});
console.log(values);
};
useEffect(() => {
const newTotal = Math.ceil((Number(values.total) / Number(values.skeinLength || 0)))
* Number(values.skeinPrice);
const newSkeinCount = Math.ceil((Number(values.total) / Number(values.skeinLength || 0)) || 0);
const newTotal = Number(newSkeinCount * Number(values.skeinPrice) || 0).toFixed(2);
// console.log(newSkeinCount, newTotal);
if (!values.total && !values.skeinLength) {
// console.log("setting a basic total");
setSkeinsRequiredDisabled(false);
// setValues({ ...values, skeinCount: newSkeinCount });
setTotalPrice((Number(values.skeinCount) || 0) * (Number(values.skeinPrice) || 0));
} else {
// console.log("setting a complicated total");
if (newSkeinCount !== values.skeinCount) setValues({
...values,
skeinCount: newSkeinCount,
});
setSkeinsRequiredDisabled(true);
setTotalPrice(newTotal);
}
console.log("change");
// console.log("change", values);
}, [values]);
return (
<div className="App" style={{ width: "400px", margin: "0 auto", }}>
<div className="App">
<Grid container direction="column" spacing={2}>
<Grid item xs={12}>
<Typography variant="h1" gutterBottom>hey, we love yarn!</Typography>
<Typography variant="h1" gutterBottom>yarn calc <FavoriteIcon style={{ fontSize: "inherit", color: "#cc0000", position: "relative", top: "12px" }}/></Typography>
<Typography variant="h6">Project details</Typography>
<TextField
label="Total yardage"
@ -49,6 +67,10 @@ const App = (props) => {
value={values.total}
onChange={_handleChange}
type="number"
variant="outlined"
InputProps={{
endAdornment: <InputAdornment position="end">yards</InputAdornment>,
}}
fullWidth
/>
</Grid>
@ -60,6 +82,10 @@ const App = (props) => {
value={values.skeinLength}
onChange={_handleChange}
type="number"
variant="outlined"
InputProps={{
endAdornment: <InputAdornment position="end">yards</InputAdornment>,
}}
fullWidth
/>
</Grid>
@ -70,6 +96,7 @@ const App = (props) => {
value={values.skeinPrice}
onChange={_handleChange}
type="number"
variant="outlined"
fullWidth
InputProps={{
startAdornment: <InputAdornment position="start">$</InputAdornment>,
@ -77,15 +104,26 @@ const App = (props) => {
/>
</Grid>
<Grid item xs={12}>
<TextField
label="Number of skeins required"
id="skeinCount"
type={skeinsRequiredDisabled ? null : "number"}
onChange={_handleChange}
value={values.skeinCount}
fullWidth
inputProps={{ readOnly: skeinsRequiredDisabled }}
/>
</Grid>
<Grid item xs={12}>
<Typography variant="h6">Total project cost</Typography>
<TextField
id="totalPrice"
value={totalPrice}
onChange={_handleChange}
type="number"
fullWidth
InputProps={{
readOnly: true,
startAdornment: <InputAdornment position="start">$</InputAdornment>,
style: { fontSize: "36px" },
}}
/>
</Grid>