Skip to content

Commit 20a4751

Browse files
btholtbtholt
committed
write first React code, no JSX
0 parents  commit 20a4751

File tree

5 files changed

+374
-0
lines changed

5 files changed

+374
-0
lines changed

‎.gitattributes

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
package-lock.json binary
2+
yarn.lock binary

‎.gitignore

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
node_modules
2+
.cache/
3+
dist/
4+
.env
5+
.DS_Store
6+
coverage/
7+
.vscode/

‎src/App.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
const Pet = props => {
2+
return React.createElement("div", {}, [
3+
React.createElement("h1", {}, props.name),
4+
React.createElement("h2", {}, props.animal),
5+
React.createElement("h2", {}, props.breed)
6+
]);
7+
};
8+
9+
const App = () => {
10+
return React.createElement("div", {}, [
11+
React.createElement("h1", {}, "Adopt Me!"),
12+
React.createElement(Pet, {
13+
name: "Luna",
14+
animal: "Dog",
15+
breed: "Havanese"
16+
}),
17+
React.createElement(Pet, {
18+
name: "Pepper",
19+
animal: "Bird",
20+
breed: "Cockatiel"
21+
}),
22+
React.createElement(Pet, { name: "Doink", animal: "Cat", breed: "Mix" })
23+
]);
24+
};
25+
26+
ReactDOM.render(React.createElement(App), document.getElementById("root"));

‎src/index.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<link rel="stylesheet" href="./style.css" />
8+
<title>Adopt Me</title>
9+
</head>
10+
11+
<body>
12+
<div id="root">not rendered</div>
13+
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
14+
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
15+
<script src="./App.js"></script>
16+
</body>
17+
</html>

‎src/style.css

+322
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,322 @@
1+
* {
2+
box-sizing: border-box;
3+
color: #333;
4+
}
5+
6+
body {
7+
background-color: #81a69b;
8+
background-image: url(http://static.frontendmasters.com/resources/2019-05-02-complete-intro-react-v5/image-background.png);
9+
margin: 0;
10+
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
11+
}
12+
13+
.search-params {
14+
width: 1100px;
15+
margin: 0 auto;
16+
}
17+
18+
.search-params form {
19+
background-color: #d9c148;
20+
width: 360px;
21+
margin: 0px 25px 0px 0px;
22+
padding: 35px 15px 15px 15px;
23+
border-radius: 5px;
24+
float: left;
25+
}
26+
27+
.search {
28+
background-color: #d9c148;
29+
width: 715px;
30+
padding: 15px;
31+
border-radius: 9px;
32+
float: left;
33+
margin-bottom: 25px;
34+
}
35+
36+
.details {
37+
width: 1100px;
38+
margin: 0 auto;
39+
background-color: #d9c148;
40+
padding: 15px;
41+
border-radius: 9px;
42+
margin-bottom: 25px;
43+
}
44+
45+
.pet {
46+
width: 100%;
47+
height: 130px;
48+
display: block;
49+
overflow: hidden;
50+
margin: 25px 0;
51+
border-bottom: #bf9b2f 1px solid;
52+
}
53+
54+
.pet img {
55+
width: 100px;
56+
min-height: 100px;
57+
}
58+
59+
.info {
60+
float: left;
61+
width: 80%;
62+
height: 100px;
63+
padding-top: 10px;
64+
flex-direction: column;
65+
justify-content: space-around;
66+
}
67+
68+
.image-container {
69+
clip-path: circle(50% at 50% 50%);
70+
width: 100px;
71+
height: 100px;
72+
float: left;
73+
margin: 0px 20px 0px 10px;
74+
}
75+
76+
.pet h1 {
77+
white-space: nowrap;
78+
font-weight: normal;
79+
font-size: 30px;
80+
color: #bf3334;
81+
width: 95%;
82+
overflow: hidden;
83+
margin: 0;
84+
text-overflow: ellipsis;
85+
}
86+
87+
header > a,
88+
#root > div > h1 {
89+
display: inline-block;
90+
background-image: url(http://static.frontendmasters.com/resources/2019-05-02-complete-intro-react-v5/image-logo.png);
91+
width: 279px;
92+
height: 76px;
93+
overflow: hidden;
94+
text-indent: -9999px;
95+
}
96+
97+
.pet h2 {
98+
white-space: nowrap;
99+
font-weight: normal;
100+
font-size: 20px;
101+
margin: 0;
102+
text-overflow: ellipsis;
103+
}
104+
105+
header a {
106+
color: #bf3334;
107+
font-size: 3px;
108+
text-decoration: none;
109+
font-weight: bold;
110+
display: block;
111+
padding-bottom: 10px;
112+
}
113+
114+
header {
115+
display: flex;
116+
align-content: center;
117+
justify-content: space-between;
118+
width: 1100px;
119+
margin: 0 auto;
120+
padding: 20px 0px 0px 0px;
121+
}
122+
123+
.details p {
124+
line-height: 1.5;
125+
padding: 0px 15px;
126+
}
127+
128+
.details h1 {
129+
text-align: center;
130+
color: #bf3334;
131+
font-size: 60px;
132+
margin: 5px 0px;
133+
}
134+
135+
.details h2 {
136+
text-align: center;
137+
margin: 5px 0px 20px 0px;
138+
}
139+
140+
.carousel {
141+
display: flex;
142+
justify-content: space-around;
143+
align-items: center;
144+
height: 400px;
145+
margin-top: 8px;
146+
}
147+
148+
.carousel > img {
149+
max-width: 45%;
150+
max-height: 400px;
151+
}
152+
153+
.carousel-smaller {
154+
width: 50%;
155+
}
156+
157+
.carousel-smaller > img {
158+
width: 100px;
159+
height: 100px;
160+
border-radius: 50%;
161+
display: inline-block;
162+
margin: 15px;
163+
cursor: pointer;
164+
border: 2px solid #333;
165+
}
166+
167+
.carousel-smaller > img.active {
168+
border-color: #ad343e;
169+
opacity: 0.6;
170+
}
171+
172+
.search-params label {
173+
display: block;
174+
width: 60px;
175+
}
176+
177+
.search-params input,
178+
.search-params select {
179+
margin-bottom: 30px;
180+
font-size: 18px;
181+
height: 30px;
182+
width: 325px;
183+
}
184+
185+
.search-params button,
186+
#modal button,
187+
.details button {
188+
background-color: #ad343e;
189+
padding: 5px 25px;
190+
color: white;
191+
font-size: 18px;
192+
border: #333 1px solid;
193+
border-radius: 5px;
194+
display: block;
195+
margin: 0 auto;
196+
cursor: pointer;
197+
}
198+
199+
.search-params button:hover {
200+
background-color: #122622;
201+
}
202+
203+
.search-params button:active {
204+
background-color: #5f1d22;
205+
}
206+
207+
.search-params button:focus {
208+
border: 1px solid cornflowerblue;
209+
}
210+
211+
#modal {
212+
background-color: rgba(0, 0, 0, 0.9);
213+
position: fixed;
214+
left: 0;
215+
right: 0;
216+
bottom: 0;
217+
top: 0;
218+
z-index: 10;
219+
display: flex;
220+
justify-content: center;
221+
align-items: center;
222+
}
223+
224+
#modal:empty {
225+
display: none;
226+
}
227+
228+
#modal > div {
229+
background-color: white;
230+
max-width: 500px;
231+
padding: 15px;
232+
border-radius: 5px;
233+
text-align: center;
234+
}
235+
236+
#modal .buttons button {
237+
display: inline-block;
238+
margin-right: 15px;
239+
}
240+
241+
@media only screen and (max-width: 1129px) {
242+
header {
243+
display: flex;
244+
align-content: center;
245+
justify-content: space-between;
246+
width: 95%;
247+
margin: 0 auto;
248+
padding: 20px 0px 0px 0px;
249+
}
250+
251+
.search-params {
252+
width: 95%;
253+
}
254+
255+
.search-params form {
256+
margin-bottom: 20px;
257+
}
258+
259+
.search {
260+
width: 55%;
261+
padding: 15px;
262+
border-radius: 9px;
263+
float: left;
264+
margin-bottom: 25px;
265+
}
266+
267+
.details {
268+
width: 95%;
269+
margin: 0 auto;
270+
padding: 15px;
271+
border-radius: 9px;
272+
margin-bottom: 25px;
273+
}
274+
275+
.info {
276+
width: 65%;
277+
}
278+
279+
.info h1 {
280+
width: 100%;
281+
white-space: nowrap;
282+
overflow: hidden;
283+
text-overflow: ellipsis;
284+
}
285+
286+
.info h2 {
287+
width: 100%;
288+
white-space: nowrap;
289+
overflow: hidden;
290+
text-overflow: ellipsis;
291+
}
292+
}
293+
294+
@media only screen and (max-width: 945px) {
295+
.search-params {
296+
width: 95%;
297+
}
298+
299+
.search {
300+
width: 100%;
301+
}
302+
}
303+
304+
@media only screen and (max-width: 600px) {
305+
.pet {
306+
height: 200px;
307+
}
308+
309+
.info {
310+
width: 100%;
311+
text-align: center;
312+
}
313+
314+
.image-container {
315+
margin: 0 auto;
316+
float: none;
317+
}
318+
.carousel-smaller > img {
319+
width: 60px;
320+
height: 60px;
321+
}
322+
}

0 commit comments

Comments
 (0)