From b5039ff4945dfe4d5e32065538a17e89b4c56d7e Mon Sep 17 00:00:00 2001 From: Hussein Bahdon <35459369+H-BAHDON@users.noreply.github.com> Date: Sat, 17 Jun 2023 15:29:34 +0100 Subject: [PATCH 1/3] Lesson 1 - done --- README.md | 1 + src/App.js | 39 ++++++++++++-- src/{Bookings.js => Component/Bookings.jsx} | 11 ++-- src/Component/CardData.jsx | 23 ++++++++ src/Component/Footer.jsx | 26 ++++++++++ src/Component/Heading.jsx | 16 ++++++ .../Restaurant.jsx} | 0 src/{Search.js => Component/Search.jsx} | 5 +- src/Component/SearchButton.jsx | 12 +++++ src/Component/SearchResult.jsx | 52 +++++++++++++++++++ src/Component/TouristInfoCards.jsx | 18 +++++++ src/index.css | 10 ++++ 12 files changed, 204 insertions(+), 9 deletions(-) rename src/{Bookings.js => Component/Bookings.jsx} (59%) create mode 100644 src/Component/CardData.jsx create mode 100644 src/Component/Footer.jsx create mode 100644 src/Component/Heading.jsx rename src/{Restaurant.js => Component/Restaurant.jsx} (100%) rename src/{Search.js => Component/Search.jsx} (88%) create mode 100644 src/Component/SearchButton.jsx create mode 100644 src/Component/SearchResult.jsx create mode 100644 src/Component/TouristInfoCards.jsx diff --git a/README.md b/README.md index 5711ee7f8..5bc4e4a02 100644 --- a/README.md +++ b/README.md @@ -40,6 +40,7 @@ A hotel booking application in React. Homework for the [CodeYourFuture React mod Go somewhere + ``` **Test:** 3 info cards should be displayed on the page for each city (Glasgow, Manchester, London). Each card should link to the correct website. diff --git a/src/App.js b/src/App.js index 953c98560..28a0a3853 100644 --- a/src/App.js +++ b/src/App.js @@ -1,13 +1,46 @@ import React from "react"; - -import Bookings from "./Bookings"; +import Search from "./Component/Search"; +import Bookings from "./Component/Bookings"; +import Heading from "./Component/Heading" +import Footer from "./Component/Footer" +import TouristInfoCards from "./Component/TouristInfoCards"; import "./App.css"; const App = () => { + + const fakeDate = [ + "123 Fake Street, London, E1 4UD", + "hello@fakehotel.com", + "0123 456789" +] + return (
-
CYF Hotel
+ + {/* + + + + */} + + +
); }; diff --git a/src/Bookings.js b/src/Component/Bookings.jsx similarity index 59% rename from src/Bookings.js rename to src/Component/Bookings.jsx index e0d911b13..033f24c6e 100644 --- a/src/Bookings.js +++ b/src/Component/Bookings.jsx @@ -1,18 +1,21 @@ import React from "react"; -import Search from "./Search.js"; -// import SearchResults from "./SearchResults.js"; -// import FakeBookings from "./data/fakeBookings.json"; +import Search from "./Search"; +import FakeBookings from "../data/fakeBookings.json"; +import SearchResult from "./SearchResult" const Bookings = () => { const search = searchVal => { console.info("TO DO!", searchVal); }; + + // console.log(FakeBookings) + return (
- {/* */} +
); diff --git a/src/Component/CardData.jsx b/src/Component/CardData.jsx new file mode 100644 index 000000000..aed980d39 --- /dev/null +++ b/src/Component/CardData.jsx @@ -0,0 +1,23 @@ +import react from "react"; + + + +const CardData = ({result}) => ( + <> + + {result.id} + {result.title} + {result.firstName} + {result.surname} + {result.email} + {result.roomId} + {result.checkInDate} + {result.checkOutDate} + { + (new Date(`${result.checkOutDate}T00:00:01Z`) - new Date(`${result.checkInDate}T00:00:01Z`))/ 86400000 + } + + +) + +export default CardData; \ No newline at end of file diff --git a/src/Component/Footer.jsx b/src/Component/Footer.jsx new file mode 100644 index 000000000..7c00c5520 --- /dev/null +++ b/src/Component/Footer.jsx @@ -0,0 +1,26 @@ +import React from "react"; +import "../index.css" + + + + +const Footer = props =>{ + + // console.log("this is the props " + {props.greeting}) + + return( + <> +
+ + {props.data.map((element, index) => ( + + ))} +
+ + ) + +} + +export default Footer; \ No newline at end of file diff --git a/src/Component/Heading.jsx b/src/Component/Heading.jsx new file mode 100644 index 000000000..bfacc1cfa --- /dev/null +++ b/src/Component/Heading.jsx @@ -0,0 +1,16 @@ +import react from "react"; +// https://image.flaticon.com/icons/svg/139/139899.svg + +function Heading(){ + return ( + <> + +
+ //addlogo and styles +

CYF Hotel

+
+ + ) +} + +export default Heading; \ No newline at end of file diff --git a/src/Restaurant.js b/src/Component/Restaurant.jsx similarity index 100% rename from src/Restaurant.js rename to src/Component/Restaurant.jsx diff --git a/src/Search.js b/src/Component/Search.jsx similarity index 88% rename from src/Search.js rename to src/Component/Search.jsx index 7bd5871c0..3d558890d 100644 --- a/src/Search.js +++ b/src/Component/Search.jsx @@ -1,4 +1,5 @@ import React from "react"; +import SearchButton from "./SearchButton" const Search = () => { return ( @@ -17,8 +18,8 @@ const Search = () => { className="form-control" placeholder="Customer name" /> - - + + diff --git a/src/Component/SearchButton.jsx b/src/Component/SearchButton.jsx new file mode 100644 index 000000000..af1642398 --- /dev/null +++ b/src/Component/SearchButton.jsx @@ -0,0 +1,12 @@ +import React from "react"; + + +function searchButton(){ + return ( + <> + + + ) +} + +export default searchButton; \ No newline at end of file diff --git a/src/Component/SearchResult.jsx b/src/Component/SearchResult.jsx new file mode 100644 index 000000000..57ff8f5ea --- /dev/null +++ b/src/Component/SearchResult.jsx @@ -0,0 +1,52 @@ +import react from "react"; +import CardData from "./CardData"; +// import searchButton from "./SearchButton"; + + + +const SearchResult = ({results}) =>{ + + + console.log(results) + + + return ( + <> + + + + + + + + + + + + + + + { + results.map((result, index) => ( + // + // + // + // + // + // + // + // + // + // + + + ) + ) + } + +
IDtitleFirstNameSurname EmailRoomIdCheck In DateCheck out dateNights
{result.id}{result.title}{result.firstName}{result.surname}{result.email}{result.roomId}{result.checkInDate}{result.checkOutDate}
+ + ) +} + +export default SearchResult; \ No newline at end of file diff --git a/src/Component/TouristInfoCards.jsx b/src/Component/TouristInfoCards.jsx new file mode 100644 index 000000000..1bdc4eb67 --- /dev/null +++ b/src/Component/TouristInfoCards.jsx @@ -0,0 +1,18 @@ +import react from "react"; + + + +export default function TouristInfoCards(props) { + return ( + <> +
+ +
+

{props.title}

+

{props.description}

+ Go somewhere +
+
+ + ) +} \ No newline at end of file diff --git a/src/index.css b/src/index.css index 4607bb217..46b35796f 100644 --- a/src/index.css +++ b/src/index.css @@ -24,3 +24,13 @@ body { .search-row input { margin-right: 10px; } + + +.footer-container { + position:fixed; + bottom:0; + left:0; + /* width:100%; + height:15%; */ + background-color: #D0DAEE; +} From 9325812f50bb2e341055bfb3d505c9d6596f0620 Mon Sep 17 00:00:00 2001 From: Hussein Bahdon <35459369+H-BAHDON@users.noreply.github.com> Date: Sat, 17 Jun 2023 16:45:58 +0100 Subject: [PATCH 2/3] Lesson 2 - done --- src/App.js | 4 ++- src/Component/Bookings.jsx | 3 +- src/Component/Orders.jsx | 48 ++++++++++++++++++++++++++++++ src/Component/Restaurant.jsx | 16 +++++----- src/Component/RestaurantButton.jsx | 15 ++++++++++ 5 files changed, 75 insertions(+), 11 deletions(-) create mode 100644 src/Component/Orders.jsx create mode 100644 src/Component/RestaurantButton.jsx diff --git a/src/App.js b/src/App.js index 28a0a3853..f70ef2354 100644 --- a/src/App.js +++ b/src/App.js @@ -5,7 +5,7 @@ import Heading from "./Component/Heading" import Footer from "./Component/Footer" import TouristInfoCards from "./Component/TouristInfoCards"; import "./App.css"; - +import Restaurant from "./Component/Restaurant"; const App = () => { const fakeDate = [ @@ -39,6 +39,8 @@ const App = () => { /> */} + +