+ 
+ | ID | +Tittle | +First Name | +Surname | +Room ID | +check in Date | +check out Date | +No of Night stay | +|
| {item.id} | +{item.title} | +{item.firstName} | +{item.surname} | +{item.email} | +{item.roomId} | +{item.checkInDate} | +{item.checkOutDate} | +{} | +
+ Explore The UK
+
+ + Glasgow is a port city on the River Clyde in Scotland's western + Lowlands. It's famed for its Victorian and art nouveau architecture, + a rich legacy of the city's 18th century prosperity due to trade and + shipbuilding. +
+ +
+ + Manchester is a major city in the northwest of England with a + rich industrial heritage. The Castlefield conservation area’s + 18th-century canal system recalls the city’s days as a textile + powerhouse, and visitors can trace this history at the + interactive Museum of Science & Industry. +
+
+ + London, the capital of England and the United Kingdom, is a + 21st-century city with history stretching back to Roman + times. At its centre stand the imposing Houses of + Parliament, the iconic Big Ben clock tower and Westminster + Abbey, site of British monarch coronations. Across the + Thames River, the London Eye observation wheel provides + panoramic views of the South Bank cultural complex, and the + entire city +
+| ID | Tittle | diff --git a/src/index.css b/src/index.css index 4607bb217..e442bdaeb 100644 --- a/src/index.css +++ b/src/index.css @@ -2,6 +2,7 @@ body { margin: 0; padding: 0; font-family: sans-serif; + /* font-family: fantasy; */ } .search-wrapper { From dbc8a6c925ce137ee985a7f65e58db5c7d864941 Mon Sep 17 00:00:00 2001 From: saqibjvd <70890519+saqibjvd@users.noreply.github.com> Date: Thu, 22 Jun 2023 00:17:55 +0100 Subject: [PATCH 04/15] hoteal react lesson 8 - 13 --- README.md | 2 +- src/App.css | 21 ++++++++++----------- src/App.js | 2 +- src/Footer.css | 1 + src/Footer.js | 1 + src/Order.js | 33 +++++++++++++++++++++++++++++++++ src/RestauranButton.js | 12 ++++++++++++ src/Restaurant.js | 20 ++++++++++---------- src/SearchResults.js | 7 ++++--- src/TouristInfoCards.css | 19 +++++++++++++++++++ src/TouristInfoCards.js | 15 ++++++++------- 11 files changed, 100 insertions(+), 33 deletions(-) create mode 100644 src/Order.js create mode 100644 src/RestauranButton.js create mode 100644 src/TouristInfoCards.css diff --git a/README.md b/README.md index 5711ee7f8..9ef230c01 100644 --- a/README.md +++ b/README.md @@ -86,7 +86,7 @@ A hotel booking application in React. Homework for the [CodeYourFuture React mod #### 9. Preparing to add more pizzas -**Instructions:** At the moment, the number of pizzas a guest can order is static and set to 0, even if they click on the 'Add' button. We will change that in the following to let a guest add more pizzas to their order. First, declare a new state variable `orders` along with the function to set the orders state `setOrders`. The initial value of the `orders` state should be **0**. Use the new `orders` variable instead of the `pizzas` variable (that you can now delete). +**Instructions:** At the moment, the number of pizzas a guest can order is static and set to 0, even if they click on the 'Add' button. We will change that in the following to let a guest add more pizzas to their order. First, declare a new state variable `orders` along with the function to set the orders state `setOrders`. The initial value of the `orders` state should be **0**. **Hint:** You need to use the React function `useState` to create a state variable. Remember to import the function at the top with `import React, {useState} from "react";`. diff --git a/src/App.css b/src/App.css index ffaa3da76..ea4129808 100644 --- a/src/App.css +++ b/src/App.css @@ -1,25 +1,24 @@ -.App { +/* .App { text-align: left; -} +} */ /* .App-logo { animation: App-logo-spin infinite 20s linear; height: 80px; } */ -.App-header { - /* background-color: #222; +/* .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; */ -} - -h2{ + font-weight: bold; +} */ +/* h2{ text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 1.5em; @@ -60,11 +59,11 @@ tr { .footer { padding-top: 20px; text-align: center; -} +} */ -.card { +/* .card { flex: 1; display: grid; grid-template-rows: auto 1fr auto; text-align: center; -} +} */ diff --git a/src/App.js b/src/App.js index 1f84af226..55fdc89f2 100644 --- a/src/App.js +++ b/src/App.js @@ -3,7 +3,7 @@ import Heading from "./Header"; import Footer from "./Footer"; import TouristInfoCards from "./TouristInfoCards"; import Bookings from "./Bookings"; -import Restaurant from "./Restaurant" +import Restaurant from "./Restaurant"; import "./App.css"; const App = () => { diff --git a/src/Footer.css b/src/Footer.css index 218c378db..dad04d7e9 100644 --- a/src/Footer.css +++ b/src/Footer.css @@ -13,4 +13,5 @@ padding: 8px; margin: 10px; border-bottom: 1px orange solid; + } diff --git a/src/Footer.js b/src/Footer.js index 370452605..a428ce725 100644 --- a/src/Footer.js +++ b/src/Footer.js @@ -7,6 +7,7 @@ const Footer = () => { "hello@fakehotel.com", "0123 456789", ]; + const currentDate = new Date().toLocaleDateString(); return ({item.roomId} | {item.checkInDate} | {item.checkOutDate} | -{} | +{ + (new Date(`${item.checkOutDate}T00:00:01Z`) - new Date(`${item.checkInDate}T00:00:01Z`))/ 86400000} + |
| ID | Tittle | @@ -23,7 +36,7 @@ const SearchResults = () => { {data.map((item, index) => { return ( -||||||
| {item.id} | {item.title} | {item.firstName} | @@ -32,12 +45,15 @@ const SearchResults = () => {{item.roomId} | {item.checkInDate} | {item.checkOutDate} | -{ - (new Date(`${item.checkOutDate}T00:00:01Z`) - new Date(`${item.checkInDate}T00:00:01Z`))/ 86400000} + | + {(new Date(`${item.checkOutDate}T00:00:01Z`) - + new Date(`${item.checkInDate}T00:00:01Z`)) / + 86400000} |
-export default Header;
+ return (
+
+ Customer ID:{profile.id}
-Customer Name:{profile.firstName} {profile.surname}
-Customer E-mail:{profile.email}
+Customer ID: {profile.id}
+Name: {profile.firstName} {profile.surname} +
+E-mail: {profile.email}
+ {profile.vip ?VIP
: "Not VIP"} +Mobile: {profile.phoneNumber}
loading profile....
From 97bd792260fddefd59e34e303acdcb6c6c1bf765 Mon Sep 17 00:00:00 2001 From: saqibjvd <70890519+saqibjvd@users.noreply.github.com> Date: Tue, 11 Jul 2023 22:06:00 +0100 Subject: [PATCH 14/15] Update App.css --- src/App.css | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/App.css b/src/App.css index 23edbaa9a..3fec8e3e8 100644 --- a/src/App.css +++ b/src/App.css @@ -88,7 +88,8 @@ color: aliceblue; font-size: 1rem; line-height: 1.5; - border-radius: 0.25rem + border-radius: 0.25rem; + margin: 10px; } /* .......SEARCH RESULTS..... */ @@ -132,3 +133,12 @@ td { padding: 10px; } +.container{ + display: flex; + margin: 20px; + padding: 20px; + flex-direction: column; + flex-wrap: nowrap; + align-items: center; + +} From 3191d17c322bf301d41beaed735bcf2f80974618 Mon Sep 17 00:00:00 2001 From: saqibjvd <70890519+saqibjvd@users.noreply.github.com> Date: Mon, 17 Jul 2023 19:43:10 +0100 Subject: [PATCH 15/15] 23. Show an error message hotel react completed --- src/App.css | 47 +++++++++++++++++++++++------------------------ src/Bookings.js | 7 ++++++- 2 files changed, 29 insertions(+), 25 deletions(-) diff --git a/src/App.css b/src/App.css index 3fec8e3e8..76109353a 100644 --- a/src/App.css +++ b/src/App.css @@ -54,30 +54,6 @@ padding: 5px; background-color: rgb(35, 38, 37); color: aliceblue; - - -} - - -/* FOOTER...... */ - -.address{ - font-family: fantasy; - text-align: center; - height: 50px; - padding: 8px; - margin: 10px; - list-style: none; - border-top: 2px solid blue; -} - -.span{ - font-weight: bold; - color: orange; - padding: 8px; - margin: 10px; - border-bottom: 1px orange solid; - } /* ..........RESTAURANT........ */ @@ -142,3 +118,26 @@ td { align-items: center; } + +/* FOOTER...... */ + +.address{ + font-family: fantasy; + text-align: center; + height: 50px; + padding: 10px; + margin: 10px; + list-style: none; + border-top: 1px solid rgb(49, 46, 42);; + background-color: rgb(16, 14, 13); + color: orange; + height: auto; +} + +.span{ + font-weight: bold; + color: orange; + padding: 8px; + margin: 10px; + border-bottom: 1px orange solid; +} diff --git a/src/Bookings.js b/src/Bookings.js index 53c16e63a..16970e0c5 100644 --- a/src/Bookings.js +++ b/src/Bookings.js @@ -7,8 +7,8 @@ import CustomerProfile from "./CustomerProfile.js"; const Bookings = () => { const [bookings, setBookings] = useState([]); - const [reset, setReset] = useState([]); + const [error, setError] = useState(false); useEffect(() => { fetch(`https://cyf-react.glitch.me/delayed`) @@ -16,6 +16,7 @@ const Bookings = () => { .then((data) => { setBookings(data); setReset(data); + setError(true); }); }, []) @@ -23,6 +24,10 @@ const Bookings = () => { returnLoading booking, Please wait.....
HTTP eror 500...
+ } + const search = (searchVal) => { const filterSearch = bookings.filter(function (bookings) {