Skip to content

Commit 467eacc

Browse files
nosugarplsnosugarpls
authored
Add files via upload
0 parents  commit 467eacc

File tree

9 files changed

+323
-0
lines changed

9 files changed

+323
-0
lines changed

‎AskNotesBeta/package.json

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"name": "using-pre-built-react-components-completed",
3+
"version": "1.0.0",
4+
"description": "",
5+
"keywords": [],
6+
"main": "src/index.js",
7+
"dependencies": {
8+
"@material-ui/core": "4.6.1",
9+
"@material-ui/icons": "4.5.1",
10+
"react": "16.8.6",
11+
"react-dom": "16.8.6",
12+
"react-scripts": "3.2.0",
13+
"uuid": "3.3.3"
14+
},
15+
"devDependencies": {
16+
"typescript": "3.3.3"
17+
},
18+
"scripts": {
19+
"start": "react-scripts start",
20+
"build": "react-scripts build",
21+
"test": "react-scripts test --env=jsdom",
22+
"eject": "react-scripts eject"
23+
},
24+
"browserslist": [
25+
">0.2%",
26+
"not dead",
27+
"not ie <= 11",
28+
"not op_mini all"
29+
]
30+
}

‎AskNotesBeta/public/index.html

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Ask Notes</title>
5+
<link font-family: "Montserrat", sans-serif;
6+
href="https://fonts.googleapis.com/css?family=McLaren|Montserrat&display=swap"
7+
rel="stylesheet" />
8+
<link rel="stylesheet" href="styles.css" />
9+
<link
10+
id="external-css"
11+
rel="stylesheet"
12+
type="text/css"
13+
href="https://fonts.googleapis.com/css?family=Montserrat&amp;display=swap"
14+
media="all"
15+
/>
16+
<link id="external-css" rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Montserrat&amp;display=swap" media="all">
17+
</head>
18+
19+
<body>
20+
<div id="root"></div>
21+
<script src="../src/index.js" type="text/jsx"></script>
22+
</body>
23+
</html>

‎AskNotesBeta/public/styles.css

+106
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
}
6+
html {
7+
font-family: "Montserrat", sans-serif;
8+
}
9+
body {
10+
background: #eee;
11+
background-image: url("https://www.klaviyo.com/wp-content/uploads/2016/09/abstract-background.jpg");
12+
padding: 0 16px;
13+
opacity: 0.5;
14+
background-repeat: no-repeat;
15+
background-size: cover;
16+
}
17+
18+
header {
19+
background-color: #00587a;
20+
margin: auto -16px;
21+
padding: 16px 32px;
22+
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
23+
}
24+
25+
header h1 {
26+
color: #fff;
27+
font-family: "McLaren", cursive;
28+
font-weight: 200;
29+
}
30+
31+
footer {
32+
position: absolute;
33+
text-align: center;
34+
bottom: 0;
35+
width: 100%;
36+
height: 2.5rem;
37+
}
38+
39+
footer p {
40+
color: #ccc;
41+
}
42+
.note {
43+
background: #fff;
44+
border-radius: 7px;
45+
box-shadow: 0 2px 5px #ccc;
46+
padding: 10px;
47+
width: 240px;
48+
margin: 16px;
49+
float: left;
50+
}
51+
.note h1 {
52+
font-size: 1.1em;
53+
margin-bottom: 6px;
54+
}
55+
.note p {
56+
font-size: 1.1em;
57+
margin-bottom: 10px;
58+
white-space: pre-wrap;
59+
word-wrap: break-word;
60+
}
61+
62+
.note button {
63+
position: relative;
64+
float: right;
65+
margin-right: 10px;
66+
color: #00587a;
67+
border: none;
68+
width: 36px;
69+
height: 36px;
70+
cursor: pointer;
71+
outline: none;
72+
}
73+
74+
form.create-note {
75+
position: relative;
76+
width: 480px;
77+
margin: 30px auto 20px auto;
78+
background: #fff;
79+
padding: 15px;
80+
border-radius: 7px;
81+
box-shadow: 0 1px 5px rgb(138, 137, 137);
82+
}
83+
form.create-note input,
84+
form.create-note textarea {
85+
width: 100%;
86+
border: none;
87+
padding: 4px;
88+
outline: none;
89+
font-size: 1.2em;
90+
font-family: inherit;
91+
resize: none;
92+
}
93+
form.create-note button {
94+
position: absolute;
95+
right: 18px;
96+
bottom: -18px;
97+
background: #00587a;
98+
color: #fff;
99+
border: none;
100+
border-radius: 50%;
101+
width: 36px;
102+
height: 36px;
103+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
104+
cursor: pointer;
105+
outline: none;
106+
}

‎AskNotesBeta/src/components/App.jsx

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import React, { useState } from "react";
2+
import Header from "./Header";
3+
import Footer from "./Footer";
4+
import Note from "./Note";
5+
import CreateArea from "./CreateArea";
6+
7+
function App() {
8+
const [notes, setNotes] = useState([]);
9+
10+
function addNote(newNote) {
11+
setNotes(prevNotes => {
12+
return [...prevNotes, newNote];
13+
});
14+
}
15+
16+
function deleteNote(id) {
17+
setNotes(prevNotes => {
18+
return prevNotes.filter((noteItem, index) => {
19+
return index !== id;
20+
});
21+
});
22+
}
23+
24+
return (
25+
<div>
26+
<Header />
27+
<CreateArea onAdd={addNote} />
28+
{notes.map((noteItem, index) => {
29+
return (
30+
<Note
31+
key={index}
32+
id={index}
33+
title={noteItem.title}
34+
content={noteItem.content}
35+
onDelete={deleteNote}
36+
/>
37+
);
38+
})}
39+
<Footer />
40+
</div>
41+
);
42+
}
43+
44+
export default App;

‎AskNotesBeta/src/components/CreateArea.jsx

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import React, { useState } from "react";
2+
import AddIcon from "@material-ui/icons/Add";
3+
import Fab from "@material-ui/core/Fab";
4+
import Zoom from "@material-ui/core/Zoom";
5+
6+
function CreateArea(props) {
7+
const [isExpanded, setExpanded] = useState(false);
8+
9+
const [note, setNote] = useState({
10+
title: "",
11+
content: ""
12+
});
13+
14+
function handleChange(event) {
15+
const { name, value } = event.target;
16+
17+
setNote(prevNote => {
18+
return {
19+
...prevNote,
20+
[name]: value
21+
};
22+
});
23+
}
24+
25+
function submitNote(event) {
26+
props.onAdd(note);
27+
setNote({
28+
title: "",
29+
content: ""
30+
});
31+
event.preventDefault();
32+
}
33+
34+
function expand() {
35+
setExpanded(true);
36+
}
37+
38+
return (
39+
<div>
40+
<form className="create-note">
41+
{isExpanded && (
42+
<input
43+
name="title"
44+
onChange={handleChange}
45+
value={note.title}
46+
placeholder="Title"
47+
/>
48+
)}
49+
50+
<textarea
51+
name="content"
52+
onClick={expand}
53+
onChange={handleChange}
54+
value={note.content}
55+
placeholder="Take a note..."
56+
rows={isExpanded ? 3 : 1}
57+
/>
58+
<Zoom in={isExpanded}>
59+
<Fab onClick={submitNote}>
60+
<AddIcon />
61+
</Fab>
62+
</Zoom>
63+
</form>
64+
</div>
65+
);
66+
}
67+
68+
export default CreateArea;

‎AskNotesBeta/src/components/Footer.jsx

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from "react";
2+
3+
function Footer() {
4+
const year = new Date().getFullYear();
5+
return (
6+
<footer>
7+
<p>Copyright ⓒ {year}</p>
8+
</footer>
9+
);
10+
}
11+
12+
export default Footer;

‎AskNotesBeta/src/components/Header.jsx

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from "react";
2+
import HighlightIcon from "@material-ui/icons/Highlight";
3+
4+
function Header() {
5+
return (
6+
<header>
7+
<h1>
8+
<HighlightIcon />
9+
AskNotes
10+
</h1>
11+
</header>
12+
);
13+
}
14+
15+
export default Header;

‎AskNotesBeta/src/components/Note.jsx

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from "react";
2+
import DeleteIcon from "@material-ui/icons/Delete";
3+
4+
function Note(props) {
5+
function handleClick() {
6+
props.onDelete(props.id);
7+
}
8+
9+
return (
10+
<div className="note">
11+
<h1>{props.title}</h1>
12+
<p>{props.content}</p>
13+
<button onClick={handleClick}>
14+
<DeleteIcon />
15+
</button>
16+
</div>
17+
);
18+
}
19+
20+
export default Note;

‎AskNotesBeta/src/index.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import React from "react";
2+
import ReactDOM from "react-dom";
3+
import App from "./components/App";
4+
5+
ReactDOM.render(<App />, document.getElementById("root"));

0 commit comments

Comments
 (0)