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", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@material-ui/core": "^4.11.0",
"@testing-library/jest-dom": "^5.11.4", "@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0", "@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10", "@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. 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`. 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> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <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 logo from './logo.svg';
import './App.css'; import './App.css';
function App() { import {Typography, TextField, InputAdornment, Grid} from "@material-ui/core";
return (
<div className="App">
<header className="App-header"> const App = (props) => {
<img src={logo} className="App-logo" alt="logo" /> const [values, setValues] = useState({
<p> total: 1914,
Edit <code>src/App.js</code> and save to reload. skeinLength: "",
</p> skeinPrice: "",
<a });
className="App-link"
href="https://reactjs.org" const [totalPrice, setTotalPrice] = useState();
target="_blank"
rel="noopener noreferrer" const _handleChange = (event) => {
> const { id, value } = event.target;
Learn React
</a> console.log("changing", id, value);
</header>
</div> 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; export default App;

10
src/index.js
View File

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