Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 302d069

Browse files
React recap added memegenerator
1 parent 67a5a9e commit 302d069

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+3499
-4866
lines changed
File renamed without changes.
File renamed without changes.

‎REACT_RECAP/first-react/package.json renamed to ‎REACT_RECAP/airbnb-clone/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "first-react",
2+
"name": "airbnb-clone",
33
"private": true,
44
"version": "0.0.0",
55
"type": "module",
File renamed without changes.

‎REACT_RECAP/airbnb-clone/src/App.css

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
.app-container{
7+
border: 2px solid red;
8+
width: 500px;
9+
height: 600px;
10+
margin: 20px auto;
11+
padding: 10px;
12+
}
13+
.card-section{
14+
border: 2px solid rgb(30, 47, 5);
15+
display: flex;
16+
overflow-x: auto;
17+
18+
}

‎REACT_RECAP/airbnb-clone/src/App.jsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from "react";
2+
import "./App.css";
3+
import Card from "./components/Card";
4+
import data from "./data.js";
5+
6+
export default function App() {
7+
const cardData = data.map((itemValue) => {
8+
return (
9+
<Card
10+
// key = {itemValue.id}
11+
// itemTitle = {itemValue.title}
12+
// itemDescription = {itemValue.description}
13+
// itemRating = {itemValue.stats.rating}
14+
// itemCover = {itemValue.coverImg}
15+
// itemSpot = {itemValue.openSpots}
16+
// itemLocation = {itemValue.location}
17+
18+
// ES6 feature
19+
transferData={itemValue} // or
20+
/>
21+
);
22+
});
23+
24+
return (
25+
<div className="app-container">
26+
<section className="card-section">{cardData}</section>
27+
</div>
28+
);
29+
}
File renamed without changes.
Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from "react";
2+
import "./card.css";
3+
4+
export default function Card(props) {
5+
6+
7+
let spotstatus;
8+
if (props.transferData.openSpots === 0) {
9+
spotstatus = "Not Available";
10+
} else if (props.transferData.location === "Online") {
11+
spotstatus = "ONLINE";
12+
} else if (props.transferData.openSpots > 0) {
13+
spotstatus = props.transferData.openSpots;
14+
}
15+
16+
return (
17+
<div className="card-container">
18+
{spotstatus && <div className="status">{spotstatus}</div>}
19+
<img
20+
className="item-image"
21+
src={props.transferData.coverImg}
22+
alt="error loading"
23+
/>
24+
<div className="property-container">
25+
<p className="title">{props.transferData.title}</p>
26+
<p className="description">{props.transferData.description}</p>
27+
<span className="rating">{props.transferData.stats.rating}</span>
28+
</div>
29+
</div>
30+
);
31+
}
Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
.card-container{
2+
height: 260px;
3+
border: 1px solid rgba(160, 160, 160, 0.815);
4+
min-width: 200px;
5+
/* max-width: 200px; */
6+
margin: 12px;
7+
background-color: white;
8+
border-radius: 9px;
9+
font-family: monospace;
10+
overflow: hidden;
11+
position: relative;
12+
box-shadow: 0px 0px 9px 3px rgba(0, 0, 0, 0.219);
13+
14+
}
15+
.property-container{
16+
display: flex;
17+
flex-direction: column;
18+
align-items: center;
19+
justify-content: center;
20+
}
21+
.item-image{
22+
min-width: 200px;
23+
min-height: 150px;
24+
height: 80px;
25+
background-size: cover;
26+
background-position: center;
27+
/* border: 1px solid red; */
28+
}
29+
.title{
30+
font-weight: bold;
31+
font-size: 14px;
32+
margin-bottom: 12px;
33+
text-align: center;
34+
}
35+
.rating{
36+
font-size: 16px;
37+
font-weight: bold;
38+
}
39+
.status{
40+
background-color: rgb(255, 180, 68);
41+
width: 120px;
42+
text-align: center;
43+
padding: 6px;
44+
font-weight: bold;
45+
border-radius: 15px;
46+
position: absolute;
47+
top: 9px;
48+
left: 6px;
49+
box-shadow: 0px 0px 9px 3px rgba(0, 0, 0, 0.494);
50+
}

‎REACT_RECAP/airbnb-clone/src/data.js

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
export default [
2+
{
3+
id: 1,
4+
title: "Life Lessons with Katie Zaferes",
5+
description: "This is description one" ,
6+
price: 136,
7+
coverImg: "https://images.unsplash.com/photo-1668816143737-b820e308fe6c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
8+
stats: {
9+
rating: 5.0,
10+
reviewCount: 6
11+
},
12+
location: "Online",
13+
openSpots: 0,
14+
},
15+
{
16+
id: 2,
17+
title: "Learn Wedding Photography",
18+
description: "This is description two",
19+
price: 125,
20+
coverImg: "https://images.unsplash.com/photo-1668620589356-56ba14193005?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80",
21+
stats: {
22+
rating: 5.0,
23+
reviewCount: 30
24+
},
25+
location: "Online",
26+
openSpots: 27,
27+
},
28+
{
29+
id: 3,
30+
title: "Group Mountain Biking",
31+
description: "This is description three",
32+
price: 50,
33+
coverImg: "https://images.unsplash.com/photo-1558868540-3b5e8ca26dc2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bW9ua3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60",
34+
stats: {
35+
rating: 4.8,
36+
reviewCount: 2
37+
},
38+
location: "Norway",
39+
openSpots: 3,
40+
},
41+
{
42+
id: 3,
43+
title: "Group Mountain Biking",
44+
description: "This is description three",
45+
price: 50,
46+
coverImg: "https://images.unsplash.com/photo-1558868540-3b5e8ca26dc2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bW9ua3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60",
47+
stats: {
48+
rating: 4.8,
49+
reviewCount: 2
50+
},
51+
location: "Norway",
52+
openSpots: 3,
53+
},
54+
{
55+
id: 3,
56+
title: "Group Mountain Biking",
57+
description: "This is description three",
58+
price: 50,
59+
coverImg: "https://images.unsplash.com/photo-1558868540-3b5e8ca26dc2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bW9ua3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60",
60+
stats: {
61+
rating: 4.8,
62+
reviewCount: 2
63+
},
64+
location: "Norway",
65+
openSpots: 3,
66+
}
67+
]

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /