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 b9eb365

Browse files
finished my react traver journal project
1 parent 225a47a commit b9eb365

File tree

4 files changed

+96
-18
lines changed

4 files changed

+96
-18
lines changed

‎travel-journal/src/App.css

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,23 @@
55
body {
66
box-sizing: border-box;
77
}
8-
9-
.app--container {
10-
border: 1px solid green;
8+
.react--app--container{
119
width: 550px;
10+
height: 705px;
1211
margin: 10px auto;
13-
background-color: rgb(254, 247, 247);
12+
background-color: rgb(255, 255, 255);
13+
overflow-y: auto;
14+
box-shadow: 0px 1px 14px 0px rgba(128, 128, 128, 0.353);
15+
16+
}
17+
::-webkit-scrollbar{
18+
display: none;
19+
}
20+
.nav--cont--bar{
21+
position: sticky;
22+
top: 0px;
23+
}
24+
.app--container {
1425
}
1526

1627
/* navbar css style */
@@ -40,14 +51,15 @@ body {
4051
}
4152

4253
/* place js css styling */
54+
4355
.place--container{
4456
width: 471px;
4557
height: 168px;
4658
border-radius: 9px;
4759
margin: 30px auto;
4860
display: flex;
49-
background-color: rgba(250,248,245,0.975);
50-
box-shadow: 1px 1px 10px 0px rgba(128, 128, 128, 0.4);
61+
background-color: rgb(242,236,236);
62+
box-shadow: 1px 1px 10px 0px rgba(128, 128, 128, 0.466);
5163
}
5264
.left--container{
5365

@@ -84,9 +96,7 @@ body {
8496
color: gray;
8597
margin-top: 3px;
8698
}
87-
.heading--part{
8899

89-
}
90100
.mane--h1{
91101
font-size: 25px;
92102
color: rgb(53, 52, 52);
@@ -101,4 +111,6 @@ body {
101111
.content--part p{
102112
font-size: 10.24px;
103113
color: rgb(53, 52, 52);
104-
}
114+
margin-right: 7px;
115+
}
116+

‎travel-journal/src/App.js

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,33 @@
11
import './App.css';
22
import Navbar from "./components/Navbar"
33
import Place from './components/Place';
4+
import Data from './Data';
45

56
// logo icon
67
import world from "./images/world.png"
78
import pointer from "./images/placeholder.png"
89

910
function App() {
11+
const dataset = Data.map((itemDetails) => {
12+
return (
13+
<Place
14+
point={pointer}
15+
details={itemDetails}
16+
/>
17+
)
18+
19+
})
1020
return (
11-
<div className="app--container">
12-
<Navbar img={world}/>
13-
<Place point={pointer} />
21+
<div className='react--app--container'>
22+
<div className="nav--cont--bar">
23+
24+
<Navbar img={world} />
25+
</div>
26+
<div className="app--container">
27+
28+
29+
{dataset}
30+
</div>
1431
</div>
1532
);
1633
}

‎travel-journal/src/Data.js

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
const Data= [
2+
{
3+
title: "Mount Fuji",
4+
location: "Japan",
5+
googleMapsUrl: "https://goo.gl/maps/1DGM5WrWnATgkSNB8",
6+
startDate: "20 September, 2022",
7+
endDate: "20 January, 2023",
8+
description: "Mount Fuji is the tallest mountain in Japan, standing at 3,776 meters (12,380 feet). Mount Fuji is the single most popular tourist site in Japan, for both Japanese and foreign tourists.",
9+
imageUrl: "https://images.unsplash.com/photo-1570459027562-4a916cc6113f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1888&q=80"
10+
},
11+
{
12+
title: "Sydney Opera House",
13+
location: "Australia",
14+
googleMapsUrl: "https://goo.gl/maps/1DGM5WrWnATgkSNB8",
15+
startDate: "20 September, 2022",
16+
endDate: "21 January, 2023",
17+
description: "The Sydney Opera House constitutes a masterpiece of 20th century architecture. Its significance is based on its unparalleled design and construction; its exceptional engineering achievements and technological innovation and its position as a world-famous icon of architecture.",
18+
imageUrl: "https://images.unsplash.com/photo-1599352318473-abbc53b44a9a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80"
19+
},
20+
{
21+
title: "Geirangerfjord",
22+
location: "Norway",
23+
googleMapsUrl: "https://goo.gl/maps/1DGM5WrWnATgkSNB8",
24+
startDate: "2 September, 2022",
25+
endDate: "22 January, 2023",
26+
description: "The iconic Geirangerfjord is known for its spectacular waterfalls and deserted fjord farms high up on the steep cliffsides. The Geirangerfjord is considered one of the most beautiful fjords in the world, and is included on the UNESCO World Heritage list together with the Nærøyfjord.",
27+
imageUrl: "https://images.unsplash.com/photo-1663150067969-59600db8fc6e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=393&q=80"
28+
},
29+
{
30+
title: "Niagra falls",
31+
location: "North America",
32+
googleMapsUrl: "https://goo.gl/maps/1DGM5WrWnATgkSNB8",
33+
startDate: "20 September, 2022",
34+
endDate: "23 January, 2023",
35+
description: "Niagara Falls consists of two waterfalls on the Niagara River, which marks the border between New York and Ontario, Canada: the American Falls, located on the American side of the border, and the Canadian or Horseshoe Falls located on the Canadian side.",
36+
imageUrl: "https://images.unsplash.com/photo-1534833697616-825d2698fa12?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=465&q=80"
37+
},
38+
{
39+
title: "Mount Everest",
40+
location: "Asia",
41+
googleMapsUrl: "https://goo.gl/maps/1DGM5WrWnATgkSNB8",
42+
startDate: "20 September, 2022",
43+
endDate: "24 January, 2023",
44+
description: "Mount Everest is Earth's highest mountain above sea level, located in the Mahalangur Himal sub-range of the Himalayas. The China–Nepal border runs across its summit point. Its elevation of 8,848.86 m was most recently established in 2020 by the Chinese and Nepali authorities.",
45+
imageUrl: "https://images.unsplash.com/photo-1623127899673-39264566a100?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80"
46+
}
47+
]
48+
49+
export default Data;

‎travel-journal/src/components/Place.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,21 @@ export default function Place(props) {
44
return (
55
<div className="place--container">
66
<div className="left--container">
7-
<img src="https://images.unsplash.com/photo-1540979388789-6cee28a1cdc9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8cGhvbmUlMjB3YWxscGFwZXJ8ZW58MHx8MHx8&auto=format&fit=crop&w=700&q=60" alt="errod loading" className='left--image' />
7+
<img src={props.details.imageUrl} alt="errod loading" className='left--image' />
88
</div>
99
<div className="right--container">
1010
<div className="first--location">
1111
<img src={props.point} alt="" className='location--image'/>
12-
<span className='city--name'>JAPAN</span>
13-
<a className='map--link' href="/">View on Google Maps</a>
12+
<span className='city--name'>{props.details.location}</span>
13+
<a className='map--link' href={props.details.googleMapsUrl}>View on Google Maps</a>
1414

1515
</div>
1616
<div className="heading--part">
17-
<h1 className="mane--h1">Mount Fuji</h1>
17+
<h1 className="mane--h1">{props.details.title}</h1>
1818
</div>
1919
<div className="content--part">
20-
<h4>212 Jan, 2021 - 24 Jan, 2021</h4>
21-
<p>Mount Fuji is the tallest mountain in Japan, standing at 3,776 meters (12,380 feet). Mount Fuji is the single most popular tourist site in Japan, for both Japanese and foreign tourists.</p>
20+
<h4>{props.details.startDate} - {props.details.endDate}</h4>
21+
<p>{props.details.description}</p>
2222
</div>
2323
</div>
2424
</div>

0 commit comments

Comments
(0)

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