Build out initial project.
This commit is contained in:
Nicholas Warzin
parent
2775e7c12f
commit
b2ec7b3e50
@ -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",
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
110
src/App.js
110
src/App.js
@ -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";
|
||||||
|
|
||||||
|
|
||||||
|
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 (
|
return (
|
||||||
<div className="App">
|
<div className="App" style={{ width: "400px", margin: "0 auto", }}>
|
||||||
<header className="App-header">
|
<Grid container direction="column" spacing={2}>
|
||||||
<img src={logo} className="App-logo" alt="logo" />
|
<Grid item xs={12}>
|
||||||
<p>
|
<Typography variant="h1" gutterBottom>hey, we love yarn!</Typography>
|
||||||
Edit <code>src/App.js</code> and save to reload.
|
<Typography variant="h6">Project details</Typography>
|
||||||
</p>
|
<TextField
|
||||||
<a
|
label="Total yardage"
|
||||||
className="App-link"
|
id="total"
|
||||||
href="https://reactjs.org"
|
value={values.total}
|
||||||
target="_blank"
|
onChange={_handleChange}
|
||||||
rel="noopener noreferrer"
|
type="number"
|
||||||
>
|
fullWidth
|
||||||
Learn React
|
/>
|
||||||
</a>
|
</Grid>
|
||||||
</header>
|
<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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
|
|||||||
@ -1,11 +1,13 @@
|
|||||||
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>
|
||||||
|
<CssBaseline/>
|
||||||
<App />
|
<App />
|
||||||
</React.StrictMode>,
|
</React.StrictMode>,
|
||||||
document.getElementById('root')
|
document.getElementById('root')
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user