From 35819007df07a8f8bc51183e3029cb6d7d007c5a Mon Sep 17 00:00:00 2001 From: Olha Danylevska Date: Tue, 13 Jun 2023 13:32:05 +0100 Subject: [PATCH 01/21] #1-8 done --- package-lock.json | 9 +++++++ package.json | 1 + src/App.css | 36 +++++++++++++++++++++++++++ src/App.js | 59 ++++++++++++++++++++++++++++++++++++++++++-- src/Bookings.js | 10 +++++--- src/SearchResults.js | 48 +++++++++++++++++++++++++++++++++++ 6 files changed, 157 insertions(+), 6 deletions(-) create mode 100644 src/SearchResults.js diff --git a/package-lock.json b/package-lock.json index 8197e6f22..94217b93a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "react-hotel", "version": "0.1.0", "dependencies": { + "moment": "^2.29.4", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "^5.0.1" @@ -11681,6 +11682,14 @@ "mkdirp": "bin/cmd.js" } }, + "node_modules/moment": { + "version": "2.29.4", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz", + "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==", + "engines": { + "node": "*" + } + }, "node_modules/mri": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz", diff --git a/package.json b/package.json index e3e1562a7..f81c28013 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "moment": "^2.29.4", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "^5.0.1" diff --git a/src/App.css b/src/App.css index 05fe2d52e..d76b07d55 100644 --- a/src/App.css +++ b/src/App.css @@ -1,5 +1,6 @@ .App { text-align: left; + background-color: #c7c7c7; } .App-logo { @@ -18,6 +19,19 @@ font-weight: bold; } + + +.AllCards { + display: flex; + justify-content: center; + gap: 2rem; + margin-top: 2rem; +} + +.card-img-top { + padding: 0.3rem; +} + .App-title { font-size: 1.5em; } @@ -31,10 +45,12 @@ from { transform: rotate(0deg); } + to { transform: rotate(360deg); } } + .search { padding: 5px 0 20px 0; } @@ -52,6 +68,26 @@ tr { text-align: center; } +.footer li { + list-style: none; +} + .card { width: 18rem; + border: #b7b7b7 solid 0.08rem; +} + +.btn-primary { + background-color: #222; + border: none; +} + +.btn-primary:hover { + background-color: #cddb96; + color: #222; + border: #222 solid 0.08rem; } + +h2 { + color: #a1a1a1; +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 953c98560..ab0dcf6c8 100644 --- a/src/App.js +++ b/src/App.js @@ -1,15 +1,70 @@ import React from "react"; +import Search from "./Search.js"; import Bookings from "./Bookings"; import "./App.css"; +const Heading = () => { + return ( +
+
CYF Hotel
+
+ ) +} + +const Footer = (props) => { + let data = props.address + return ( +
+ +
+ ) + + +} + +const TouristInfoCards = (props) => { + return ( +
+ +
+

{props.name}

+

{props.description}

+ Go somewhere +
+
+ ) +} + const App = () => { return (
-
CYF Hotel
+ +
+ + + + + + + +
+
); }; -export default App; +export default App; \ No newline at end of file diff --git a/src/Bookings.js b/src/Bookings.js index e0d911b13..7a8249695 100644 --- a/src/Bookings.js +++ b/src/Bookings.js @@ -1,7 +1,9 @@ import React from "react"; import Search from "./Search.js"; -// import SearchResults from "./SearchResults.js"; -// import FakeBookings from "./data/fakeBookings.json"; +import SearchResults from "./SearchResults.js"; +import FakeBookings from "./data/fakeBookings.json"; + + const Bookings = () => { const search = searchVal => { @@ -12,10 +14,10 @@ const Bookings = () => {
- {/* */} +
); }; -export default Bookings; +export default Bookings; \ No newline at end of file diff --git a/src/SearchResults.js b/src/SearchResults.js new file mode 100644 index 000000000..63f75c303 --- /dev/null +++ b/src/SearchResults.js @@ -0,0 +1,48 @@ +import moment from "moment" + + +const SearchResults = (props) => { + let allData = props.results + return ( + + + + + + + + + + + + + + + + { + + allData.map(client => { + let a = moment((client.checkOutDate).split("-")) + let b = moment((client.checkInDate).split("-")) + + return ( + + + + + + + + + + + + ) + }) + } + +
IDTitleFirst NameSurnameEmailRoom IDCheck In DateCheck Out DateNights
{client.id}{client.title}{client.firstName}{client.surname}{client.email}{client.roomId}{client.checkInDate}{client.checkOutDate}{a.diff(b, 'days')}
+ ) +} + +export default SearchResults; \ No newline at end of file From 78fb4d955bef9f2d2caf88dfc1090248edde90cb Mon Sep 17 00:00:00 2001 From: Olha Danylevska Date: Tue, 13 Jun 2023 14:03:49 +0100 Subject: [PATCH 02/21] exercise 10 finished --- src/App.js | 3 ++- src/Restaurant.js | 13 ++++++++++--- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/src/App.js b/src/App.js index ab0dcf6c8..557e2cfd7 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,6 @@ import React from "react"; import Search from "./Search.js"; - +import Restaurant from "./Restaurant.js" import Bookings from "./Bookings"; import "./App.css"; @@ -62,6 +62,7 @@ const App = () => { +