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

Build out initial project.

Browse Source
This commit is contained in:
Nicholas Warzin 2020-11-22 12:33:52 -05:00
parent 2775e7c12f
commit b2ec7b3e50
4 changed files with 106 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -3,6 +3,7 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.11.0",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",

4
public/index.html
View File

@ -24,7 +24,9 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<title>yarn yarn yarn</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

116
src/App.js
View File

@ -1,25 +1,101 @@
import { useState, useEffect } from "react";
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
import {Typography, TextField, InputAdornment, Grid} from "@material-ui/core";
const App = (props) => {
const [values, setValues] = useState({
total: 1914,
skeinLength: "",
skeinPrice: "",
});
const [totalPrice, setTotalPrice] = useState();
const _handleChange = (event) => {
const { id, value } = event.target;
console.log("changing", id, value);
setValues({
...values,
[id]: Number(value),
});
console.log(values);
};
useEffect(() => {
const newTotal = Math.ceil((Number(values.total) / Number(values.skeinLength || 0)))
* Number(values.skeinPrice);
setTotalPrice(newTotal);
console.log("change");
}, [values]);
return (
<div className="App" style={{ width: "400px", margin: "0 auto", }}>
<Grid container direction="column" spacing={2}>
<Grid item xs={12}>
<Typography variant="h1" gutterBottom>hey, we love yarn!</Typography>
<Typography variant="h6">Project details</Typography>
<TextField
label="Total yardage"
id="total"
value={values.total}
onChange={_handleChange}
type="number"
fullWidth
/>
</Grid>
<Grid item xs={12}>
<Typography variant="h6">Yarn details</Typography>
<TextField
label="Yardage per skein"
id="skeinLength"
value={values.skeinLength}
onChange={_handleChange}
type="number"
fullWidth
/>
</Grid>
<Grid item xs={12}>
<TextField
label="Price per skein"
id="skeinPrice"
value={values.skeinPrice}
onChange={_handleChange}
type="number"
fullWidth
InputProps={{
startAdornment: <InputAdornment position="start">$</InputAdornment>,
}}
/>
</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,
}}
/>
</Grid>
<Grid item xs={12}>
<Typography component="small">(ps love you)</Typography>
</Grid>
</Grid>
</div>
);
};
export default App;

10
src/index.js
View File

@ -1,14 +1,16 @@
import React from 'react';
import ReactDOM from 'react-dom';
import CssBaseline from "@material-ui/core/CssBaseline";
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
<React.StrictMode>
<CssBaseline/>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function