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.css b/src/App.css index 05fe2d52e..2538d34b5 100644 --- a/src/App.css +++ b/src/App.css @@ -8,14 +8,17 @@ } .App-header { - background-color: #222; - height: 50px; + background-color: #d1dbee; + height: auto; padding: 20px; color: white; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 1em; font-weight: bold; + display: flex; + flex-direction: row; + justify-content: space-around; } .App-title { diff --git a/src/App.js b/src/App.js index 953c98560..73c0f5df4 100644 --- a/src/App.js +++ b/src/App.js @@ -1,13 +1,50 @@ 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"; - +import Restaurant from "./Component/Restaurant"; 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 58% rename from src/Bookings.js rename to src/Component/Bookings.jsx index e0d911b13..e6670ded5 100644 --- a/src/Bookings.js +++ b/src/Component/Bookings.jsx @@ -1,18 +1,20 @@ 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..68d01837f --- /dev/null +++ b/src/Component/Heading.jsx @@ -0,0 +1,15 @@ +import react from "react"; +import "../index.css" +function Heading(){ + return ( + <> + +
+ +

CYF Hotel

+
+ + ) +} + +export default Heading; \ No newline at end of file diff --git a/src/Component/Orders.jsx b/src/Component/Orders.jsx new file mode 100644 index 000000000..e1a95c67d --- /dev/null +++ b/src/Component/Orders.jsx @@ -0,0 +1,48 @@ +import { useState } from "react"; +import react from "react"; +import RestaurantButton from "./RestaurantButton"; + +const Orders = props => { + const [pizzaCount, setPizzaCount] = useState(0) + const [count, setCount] = useState(0) + + function handleCountMinus() { + setCount(count - 1) + } + function handleCountPlus() { + setCount(count + 1) + } + + function handlePizzaCount() { + if (count < 0) { + setPizzaCount(0) + } else { + setPizzaCount(count) + } + } + + return ( + <> +
+ +
+ + ) +} + + +export default Orders; \ No newline at end of file diff --git a/src/Component/Restaurant.jsx b/src/Component/Restaurant.jsx new file mode 100644 index 000000000..c8f77400e --- /dev/null +++ b/src/Component/Restaurant.jsx @@ -0,0 +1,17 @@ +import React, { useState } from "react"; +import Orders from "../Component/Orders"; +const Restaurant = () => { + + + const pizzas = 0; + return ( +
+

Restaurant Orders

+ + + +
+ ); +}; + +export default Restaurant; diff --git a/src/Component/RestaurantButton.jsx b/src/Component/RestaurantButton.jsx new file mode 100644 index 000000000..238965919 --- /dev/null +++ b/src/Component/RestaurantButton.jsx @@ -0,0 +1,15 @@ +import react from "react"; + + + + +const RestaurantButton = props =>{ + return ( + <> + + + + ) +} + +export default RestaurantButton; \ No newline at end of file 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..52394455d --- /dev/null +++ b/src/Component/TouristInfoCards.jsx @@ -0,0 +1,18 @@ +import react from "react"; +import "../index.css" + + +export default function TouristInfoCards(props) { + return ( + <> +
+ +
+

{props.title}

+

{props.description}

+ Go somewhere +
+
+ + ) +} \ No newline at end of file diff --git a/src/Restaurant.js b/src/Restaurant.js deleted file mode 100644 index ecb2b43a2..000000000 --- a/src/Restaurant.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from "react"; - -const Restaurant = () => { - const pizzas = 0; - return ( -
-

Restaurant Orders

- -
- ); -}; - -export default Restaurant; diff --git a/src/index.css b/src/index.css index 4607bb217..2da135702 100644 --- a/src/index.css +++ b/src/index.css @@ -24,3 +24,45 @@ body { .search-row input { margin-right: 10px; } + + +.footer-container { + padding-top: 20px; + text-align: center; + background-color: #D0DAEE; +} +.row{ + display: flex; + justify-content: center; + flex-wrap: wrap; +} + +.card { + width: 300px; + margin: 20px; + border: 1px solid #ccc; + border-radius: 5px; + overflow: hidden; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); +} + +.card img { + width: 100%; + height: auto; + object-fit: cover; +} + +.card-body { + padding: 20px; +} + +.card-body h1 { + font-size: 24px; + margin-top: 0; +} + +.card-body p { + font-size: 16px; + margin-bottom: 20px; +} +