diff --git a/package.json b/package.json
index 9f390a6..b624a35 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/public/index.html b/public/index.html
index aa069f2..229663f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -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`.
-->
- React App
+
+
+ yarn yarn yarn
diff --git a/src/App.js b/src/App.js
index 3784575..c7cc176 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,25 +1,101 @@
+import { useState, useEffect } from "react";
import logo from './logo.svg';
import './App.css';
-function App() {
- return (
-
- );
-}
+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 (
+
+
+
+ hey, we love yarn!
+ Project details
+
+
+
+ Yarn details
+
+
+
+ $,
+ }}
+ />
+
+
+ Total project cost
+
+
+
+ (ps love you)
+
+
+
+
+ );
+};
export default App;
diff --git a/src/index.js b/src/index.js
index ef2edf8..989faa0 100644
--- a/src/index.js
+++ b/src/index.js
@@ -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(
-
-
- ,
- document.getElementById('root')
+
+
+
+ ,
+ document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function