From c5d4115c808e104646f3bbf9938f2821481372b6 Mon Sep 17 00:00:00 2001 From: anuthapaliy <113211321+anuthapaliy@users.noreply.github.com> Date: Sat, 17 Jun 2023 06:04:57 +0100 Subject: [PATCH 1/5] Completed Lesson 1-Week 1React --- package-lock.json | 96 +++++++++++++++++++++++++++++++++++++++- package.json | 5 ++- src/App.css | 31 +++++++++---- src/App.js | 9 +++- src/App.test.js | 4 +- src/Bookings.js | 5 ++- src/Footer.js | 17 ++++++++ src/Heading.js | 11 +++++ src/Search.js | 51 ++++++++++++---------- src/SearchButton.js | 7 +++ src/SearchResults.js | 97 +++++++++++++++++++++++++++++++++++++++++ src/TouristInfoCards.js | 34 +++++++++++++++ 12 files changed, 327 insertions(+), 40 deletions(-) create mode 100644 src/Footer.js create mode 100644 src/Heading.js create mode 100644 src/SearchButton.js create mode 100644 src/SearchResults.js create mode 100644 src/TouristInfoCards.js diff --git a/package-lock.json b/package-lock.json index 8197e6f22..52b85d0e5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,9 +8,12 @@ "name": "react-hotel", "version": "0.1.0", "dependencies": { + "-": "^0.0.1", + "moment": "^2.29.4", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-scripts": "^5.0.1" + "react-scripts": "^5.0.1", + "save": "^2.9.0" }, "devDependencies": { "husky": "^8.0.3", @@ -18,6 +21,11 @@ "pretty-quick": "^3.1.3" } }, + "node_modules/-": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/-/-/--0.0.1.tgz", + "integrity": "sha512-3HfneK3DGAm05fpyj20sT3apkNcvPpCuccOThOPdzz8sY7GgQGe0l93XH9bt+YzibcTIgUAIMoyVJI740RtgyQ==" + }, "node_modules/@ampproject/remapping": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz", @@ -7283,6 +7291,20 @@ "node": ">= 0.6" } }, + "node_modules/event-stream": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/event-stream/-/event-stream-4.0.1.tgz", + "integrity": "sha512-qACXdu/9VHPBzcyhdOWR5/IahhGMf0roTeZJfzz077GwylcDd90yOHLouhmv7GJ5XzPi6ekaQWd8AvPP2nOvpA==", + "dependencies": { + "duplexer": "^0.1.1", + "from": "^0.1.7", + "map-stream": "0.0.7", + "pause-stream": "^0.0.11", + "split": "^1.0.1", + "stream-combiner": "^0.2.2", + "through": "^2.3.8" + } + }, "node_modules/eventemitter3": { "version": "4.0.7", "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz", @@ -7843,6 +7865,11 @@ "node": ">= 0.6" } }, + "node_modules/from": { + "version": "0.1.7", + "resolved": "https://registry.npmjs.org/from/-/from-0.1.7.tgz", + "integrity": "sha512-twe20eF1OxVxp/ML/kq2p1uc6KvFK/+vs8WjEbeKmV2He22MKm7YF2ANIt+EOqhJ5L3K/SuuPhk0hWQDjOM23g==" + }, "node_modules/fs-extra": { "version": "10.1.0", "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz", @@ -11389,6 +11416,11 @@ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, + "node_modules/lodash.assign": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz", + "integrity": "sha512-hFuH8TY+Yji7Eja3mGiuAxBqLagejScbG8GbG0j6o9vzn0YL14My+ktnqtZgFTosKymC9/44wP6s7xyuLfnClw==" + }, "node_modules/lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", @@ -11479,6 +11511,11 @@ "tmpl": "1.0.5" } }, + "node_modules/map-stream": { + "version": "0.0.7", + "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.0.7.tgz", + "integrity": "sha512-C0X0KQmGm3N2ftbTGBhSyuydQ+vV1LC3f3zPvT3RXHXNZrvfPZcoXp/N5DOa8vedX/rTMm2CjTtivFg2STJMRQ==" + }, "node_modules/mdn-data": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz", @@ -11579,6 +11616,11 @@ "node": ">=6" } }, + "node_modules/mingo": { + "version": "6.4.1", + "resolved": "https://registry.npmjs.org/mingo/-/mingo-6.4.1.tgz", + "integrity": "sha512-33eT0c5rGCiHd+fb6myC7zUg5YhufB/3+Ix4wzIi5vwbB6UOODfcxDhrjTiMZkJHVdKnkeeSB2fdGcvDmN1ibw==" + }, "node_modules/mini-css-extract-plugin": { "version": "2.7.2", "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.2.tgz", @@ -11681,6 +11723,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", @@ -12200,6 +12250,14 @@ "node": ">=8" } }, + "node_modules/pause-stream": { + "version": "0.0.11", + "resolved": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz", + "integrity": "sha512-e3FBlXLmN/D1S+zHzanP4E/4Z60oFAa3O051qt1pxa7DEJWKAyil6upYVXCWadEnuoqa4Pkc9oUx9zsxYeRv8A==", + "dependencies": { + "through": "~2.3" + } + }, "node_modules/performance-now": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz", @@ -14606,6 +14664,17 @@ } } }, + "node_modules/save": { + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/save/-/save-2.9.0.tgz", + "integrity": "sha512-eg8+g8CjvehE/2C6EbLdtK1pINVD27pcJLj4M9PjWWhoeha/y5bWf4dp/0RF+OzbKTcG1bae9qi3PAqiR8CJTg==", + "dependencies": { + "async": "^3.2.2", + "event-stream": "^4.0.1", + "lodash.assign": "^4.2.0", + "mingo": "^6.1.0" + } + }, "node_modules/sax": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", @@ -14991,6 +15060,17 @@ "wbuf": "^1.7.3" } }, + "node_modules/split": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/split/-/split-1.0.1.tgz", + "integrity": "sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==", + "dependencies": { + "through": "2" + }, + "engines": { + "node": "*" + } + }, "node_modules/sprintf-js": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", @@ -15045,6 +15125,15 @@ "node": ">= 0.4" } }, + "node_modules/stream-combiner": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.2.2.tgz", + "integrity": "sha512-6yHMqgLYDzQDcAkL+tjJDC5nSNuNIx0vZtRZeiPh7Saef7VHX9H5Ijn9l2VIol2zaNYlYEX6KyuT/237A58qEQ==", + "dependencies": { + "duplexer": "~0.1.1", + "through": "~2.3.4" + } + }, "node_modules/string_decoder": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz", @@ -15546,6 +15635,11 @@ "resolved": "https://registry.npmjs.org/throat/-/throat-6.0.2.tgz", "integrity": "sha512-WKexMoJj3vEuK0yFEapj8y64V0A6xcuPuK9Gt1d0R+dzCSJc0lHqQytAbSB4cDAK0dWh4T0E2ETkoLE2WZ41OQ==" }, + "node_modules/through": { + "version": "2.3.8", + "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", + "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==" + }, "node_modules/thunky": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz", diff --git a/package.json b/package.json index e3e1562a7..cb57d09a6 100644 --- a/package.json +++ b/package.json @@ -3,9 +3,12 @@ "version": "0.1.0", "private": true, "dependencies": { + "-": "^0.0.1", + "moment": "^2.29.4", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-scripts": "^5.0.1" + "react-scripts": "^5.0.1", + "save": "^2.9.0" }, "scripts": { "start": "react-scripts start", diff --git a/src/App.css b/src/App.css index 05fe2d52e..883c4b3b9 100644 --- a/src/App.css +++ b/src/App.css @@ -8,16 +8,31 @@ } .App-header { - background-color: #222; - height: 50px; - padding: 20px; - color: white; - text-align: left; - font-family: Arial, Helvetica, sans-serif; - font-size: 1em; - font-weight: bold; + + + background-color: #222; + height: 50px; + padding: 20px; + color: white; + text-align: left; + font-family: Arial, Helvetica, sans-serif; + font-size: 1em; + font-weight: bold; + display: flex; + align-items: center; + justify-content: space-between; + padding: 1rem; + background-color: aqua; + color: purple; +} + +.App-header img { + width: 50px; + height:50px; } + + .App-title { font-size: 1.5em; } diff --git a/src/App.js b/src/App.js index 953c98560..a5f59984d 100644 --- a/src/App.js +++ b/src/App.js @@ -1,13 +1,18 @@ import React from "react"; - +import Heading from"./Heading"; +import TouristInfoCards from "./TouristInfoCards"; import Bookings from "./Bookings"; +import Footer from "./Footer"; import "./App.css"; const App = () => { + const addresses = ["123 Fake Street, London, E1 4UD", "hello@fakehotel.com", "0123 456789"]; return (
-
CYF Hotel
+ + +
); }; diff --git a/src/App.test.js b/src/App.test.js index c9ac3ef8f..c411922ec 100644 --- a/src/App.test.js +++ b/src/App.test.js @@ -1,8 +1,8 @@ import React from "react"; -import ReactDOM from "react-dom"; +import { createRoot } from "react-dom/client"; import App from "./App"; it("renders without crashing", () => { const div = document.createElement("div"); - ReactDOM.render(, div); + createRoot(div).render(,); }); diff --git a/src/Bookings.js b/src/Bookings.js index e0d911b13..68b365f0f 100644 --- a/src/Bookings.js +++ b/src/Bookings.js @@ -1,7 +1,7 @@ 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,6 +12,7 @@ const Bookings = () => {
+ {/* */}
diff --git a/src/Footer.js b/src/Footer.js new file mode 100644 index 000000000..930b5500c --- /dev/null +++ b/src/Footer.js @@ -0,0 +1,17 @@ +import React from "react"; + +const Footer = (props) => { + const { addresses } = props; + + return ( +
+
    + {addresses.map((address, index) => ( +
  • {address}
    • + ))} +
+
+ ); +}; + +export default Footer; \ No newline at end of file diff --git a/src/Heading.js b/src/Heading.js new file mode 100644 index 000000000..ed52b21f9 --- /dev/null +++ b/src/Heading.js @@ -0,0 +1,11 @@ +import React from "react"; +const Heading = () => { + return ( +
+ Hotel Logo +
+ ); +}; + + +export default Heading; \ No newline at end of file diff --git a/src/Search.js b/src/Search.js index 7bd5871c0..9d2ba554a 100644 --- a/src/Search.js +++ b/src/Search.js @@ -1,29 +1,32 @@ import React from "react"; +import SearchButton from "./SearchButton"; + const Search = () => { - return ( -
-
-

Search Bookings

-
-
-
-
- -
- - -
-
-
-
-
- ); + return ( +
+
+

Search Bookings

+
+
+
+
+ +
+ + +
+
+
+
+
+ ); }; -export default Search; + +export default Search; \ No newline at end of file diff --git a/src/SearchButton.js b/src/SearchButton.js new file mode 100644 index 000000000..48e0a48bb --- /dev/null +++ b/src/SearchButton.js @@ -0,0 +1,7 @@ +import React from "react"; +const SearchButton = () => { + return ( + + ); +}; +export default SearchButton; \ No newline at end of file diff --git a/src/SearchResults.js b/src/SearchResults.js new file mode 100644 index 000000000..9ca8e28d1 --- /dev/null +++ b/src/SearchResults.js @@ -0,0 +1,97 @@ +import React from "react"; +import moment from "moment"; +const SearchResults = () => { + const bookings = [ +{ +id: 1, +title: "Mr", +firstName: "John", +Surname: "Doe", +Email: "johndoe@doe.com", +roomId: 2, +checkInDate: "2017-11-21", +checkOutDate: "2017-11-23", + +}, + +{ + id: 2, + title: "Doctor", + firstName: "Sadia", + surname: "Begum", + email: "begum_sadia@sadia.org", + roomId: 1, + checkInDate: "2018-02-15", + checkOutDate: "2018-02-28", +}, + +{ + id: 3, + title: "Prince", + firstName: "Henry", + surname: "Wales", + email: "harry@wales.com", + roomId: 5, + checkInDate: "2018-03-01", + checkOutDate: "2018-04-09", +}, + +{ + id: 4, + title: "Dame", + firstName: "Judi", + surname: "Dench", + email: "Judi@dench.co.uk", + roomId: 6, + checkInDate: "2017-12-25", + checkOutDate: "2018-01-03", + }, +{ + id: 5, + title: "Madam", + firstName: "Anuradha", + surname: "Selvam", + email: "anu@selvam.net", + roomId: 3, + checkInDate: "2017-08-30", + checkOutDate: "2017-10-02", + +} + ]; + + return ( + + + + + + + + + + + + + + + + + {bookings.map((booking) => ( + + + + + + + + + + + + ))} + +
IDTitleFirst NameSurnameEmailRoom IDCheck-In DateCheck-Out DateNights
{booking.id}{booking.title}{booking.firstName}{booking.Surname}{booking.Email}{booking.roomId}{booking.checkInDate}{booking.checkOutDate}{moment(booking.checkOutDate).diff(booking.checkInDate, "days")}
+ ); +}; + +export default SearchResults; \ No newline at end of file diff --git a/src/TouristInfoCards.js b/src/TouristInfoCards.js new file mode 100644 index 000000000..8dac37bf2 --- /dev/null +++ b/src/TouristInfoCards.js @@ -0,0 +1,34 @@ +import React from "react"; +const TouristInfoCards = () => { + return ( +
+
+ Glasgow +
+
Glasgow
+

Explore the city with its authenticity and Natural Beauty

+ More Info +
+
+
+ Manchester +
+
Manchester
+

Visit the exciting city of Football.

+ More Info +
+
+
+ London +
+
London
+

Explore the beauty and cultural Diversity of London

+ More Info +
+
+
+ ); +}; + + +export default TouristInfoCards; \ No newline at end of file From 677d867ad00f613a1176523dc6d7dac618863519 Mon Sep 17 00:00:00 2001 From: anuthapaliy <113211321+anuthapaliy@users.noreply.github.com> Date: Sat, 24 Jun 2023 09:59:17 +0100 Subject: [PATCH 2/5] done --- src/App.css | 45 +++++++++++++++++++++++++++++++++++++++++ src/App.js | 2 ++ src/Bookings.js | 20 +++++++++--------- src/Order.js | 19 +++++++++++++++++ src/Restaurant.js | 23 +++++++++++++++------ src/RestaurantButton.js | 9 +++++++++ src/SearchResults.js | 19 ++++++++++++++--- 7 files changed, 118 insertions(+), 19 deletions(-) create mode 100644 src/Order.js create mode 100644 src/RestaurantButton.js diff --git a/src/App.css b/src/App.css index 883c4b3b9..6f115f0b8 100644 --- a/src/App.css +++ b/src/App.css @@ -54,9 +54,26 @@ padding: 5px 0 20px 0; } +table { + width: 100%; + border-collapse: collapse; +} + +th, td { +padding: 10px; +text-align: left; +border-bottom: 1px solid aqua; +} + tr { color: #5b5757; } +tr:hover { + background-color: orange; +} +.selected { + background-color: lightskyblue; +} .results { padding-top: 15px; @@ -70,3 +87,31 @@ tr { .card { width: 18rem; } + +.btn, .RestaurantButton { + background-color: aqua; + color: white; + border: none; + padding: 8px, 16px; + text-align: center; + display: inline-block; + font-size: 14px; + cursor: pointer; + /* transition: background-color 0.3s; */ + +} +h3 { + color: purple; + font-size:xx-large; + font-weight: bold; + margin-bottom: 10px; +} + +ul { + margin-bottom: 20px; +} + +.order-type { + font-weight: bold; + color:maroon; +} diff --git a/src/App.js b/src/App.js index a5f59984d..a8cd85aca 100644 --- a/src/App.js +++ b/src/App.js @@ -2,6 +2,7 @@ import React from "react"; import Heading from"./Heading"; import TouristInfoCards from "./TouristInfoCards"; import Bookings from "./Bookings"; +import Restaurant from "./Restaurant"; import Footer from "./Footer"; import "./App.css"; @@ -12,6 +13,7 @@ const App = () => { +