First properly working implementation
This commit is contained in:
parent
f45abdecc9
commit
f23f2e05d8
File diff suppressed because one or more lines are too long
@ -1,8 +1,8 @@
|
|||||||
import "./App.css";
|
import "./App.css";
|
||||||
import Playground from "./components/Playground";
|
|
||||||
import Logo from "./components/Logo";
|
import Logo from "./components/Logo";
|
||||||
import Workplace from "./components/Workplace";
|
import Workplace from "./components/Workplace";
|
||||||
// <Playground title="👨🏻💻" />
|
// <Playground title="👨🏻💻" />
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@ -11,7 +11,6 @@ function App() {
|
|||||||
<Logo />
|
<Logo />
|
||||||
</header>
|
</header>
|
||||||
<h1>Guillotine-cutter App</h1>
|
<h1>Guillotine-cutter App</h1>
|
||||||
|
|
||||||
<Workplace />
|
<Workplace />
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
|
35
src/Test.js
Normal file
35
src/Test.js
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
import React from "react";
|
||||||
|
class Test extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
value: "Please write an essay about your favorite DOM element.",
|
||||||
|
};
|
||||||
|
this.handleChange = this.handleChange.bind(this);
|
||||||
|
this.handleSubmit = this.handleSubmit.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
handleChange(event) {
|
||||||
|
this.setState({ value: event.target.value });
|
||||||
|
}
|
||||||
|
handleSubmit(event) {
|
||||||
|
alert("An essay was submitted: " + this.state.value);
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<form onSubmit={this.handleSubmit}>
|
||||||
|
<label>
|
||||||
|
Essay:
|
||||||
|
<textarea
|
||||||
|
value={this.state.value}
|
||||||
|
onChange={this.handleChange}
|
||||||
|
/>{" "}
|
||||||
|
</label>
|
||||||
|
<input type="submit" value="Submit" />
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default Test;
|
9
src/components/List.css
Normal file
9
src/components/List.css
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
.list {
|
||||||
|
width: 1000px;
|
||||||
|
height: 1000px;
|
||||||
|
margin: auto;
|
||||||
|
width: 50%;
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
border: solid brown;
|
||||||
|
}
|
@ -1,10 +1,23 @@
|
|||||||
|
import "./List.css";
|
||||||
export default function List(props) {
|
export default function List(props) {
|
||||||
const rectangles = props.rectangles;
|
const rectangles = props.rectangles;
|
||||||
const listItems = rectangles.map((rectangle) => (
|
const listRectangles = rectangles.map((rectangle) => (
|
||||||
<li>
|
<div
|
||||||
|
style={{
|
||||||
|
width: rectangle.w,
|
||||||
|
height: rectangle.h,
|
||||||
|
border: "solid",
|
||||||
|
display: "inline-block",
|
||||||
|
position: "relative",
|
||||||
|
}}
|
||||||
|
>
|
||||||
{rectangle.w} x {rectangle.h}
|
{rectangle.w} x {rectangle.h}
|
||||||
</li>
|
</div>
|
||||||
));
|
));
|
||||||
|
|
||||||
return <> {listItems}</>;
|
return (
|
||||||
|
<>
|
||||||
|
<div className="list">{listRectangles}</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
@ -1,18 +1,20 @@
|
|||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import List from "./List";
|
import List from "./List";
|
||||||
|
|
||||||
export default function Workplace() {
|
export default function Workplace(props) {
|
||||||
const [width, setWidth] = useState("");
|
const [width, setWidth] = useState("");
|
||||||
const [height, setHeight] = useState("");
|
const [height, setHeight] = useState("");
|
||||||
const [rectangleArray, setRectangleArray] = useState("");
|
const [rectanglesItems, setRectanglesItems] = useState([]);
|
||||||
|
|
||||||
const rectangles = [{ w: "100px", h: "100px", c: "red" }];
|
|
||||||
rectangles.push({ w: "200px", h: "300px", c: "cyan" });
|
|
||||||
|
|
||||||
const handleFormSubmit = (e) => {
|
const handleFormSubmit = (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
rectangles.push({ w: width + "px", h: height + "px", c: "blue" });
|
setRectanglesItems([
|
||||||
console.log(rectangles);
|
...rectanglesItems,
|
||||||
|
{
|
||||||
|
w: width + "px",
|
||||||
|
h: height + "px",
|
||||||
|
},
|
||||||
|
]);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -34,7 +36,7 @@ export default function Workplace() {
|
|||||||
</label>
|
</label>
|
||||||
<input type="submit" value="Submit" />
|
<input type="submit" value="Submit" />
|
||||||
</form>
|
</form>
|
||||||
<List rectangles={rectangles} />
|
<List rectangles={rectanglesItems} />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user