π·οΈ backlog for sprint 1
React-Module-Project π
Feature Calculate Duration π Clone
Instructions:
Dependent ticket : complete #6 before beginning this
Add another column to your <SearchResults />
table which shows the number of nights a guest is staying.
Hint: Try installing the day.js library (youβll need to install it with npm install dayjs --save
) and using the .diff()
method to compare dates.
Test:
- π Priority Mandatory
- π¦ Size Large
- π Week 1
- 𧩠Feature
- βοΈ Dependent ticket
Feature SearchResults π Clone
Create a table to show hotel bookings
Instructions: Create a <SearchResults />
component that shows hotel bookings in a <table>
element. Each booking will have an id
, title
, first name
, surname
, email
, room id
, check in date
and check out date
. You can make up data in the <SearchResults />
component to show in the table. Then show <SearchResults />
component within the <Bookings />
component that is provided. Be sure to split out your components into small well-named components.
Hint: Look in the <Bookings />
component for how to import data from a JSON file.
AS A TEAM
This ticket is too large. Break down this ticket into smaller, well named components, just like we did with Search and SearchButton, Card and Deck, App and AppHeader.
Write your tickets and share them out. You should try to pair on this larger feature as much as you can. Use class time if you can.
Hint: You will find some useful <table>
examples in the Bootstrap documentation for tables.
Test:
- π Priority Mandatory
- π Size X-Large
- π Week 1
- 𧩠Feature
Feature Footer π Clone
Instructions:
Create a <Footer />
component which should be rendered at the bottom of the page. Pass the following array as a prop to this component: ["123 Fake Street, London, E1 4UD", "hello@fakehotel.com", "0123 456789"]
. Inside the component, use the data you passed as a prop to render a <ul>
list with each item of the array displayed as a <li>
.
Hint: The .map()
method will be useful.
Test:
The footer should render at the bottom of the page with each address property displayed as a list item.
- π Priority Mandatory
- π Size Medium
- π Week 1
- 𧩠Feature
Feature Deck π Clone
Create and use a new component to show info cards
Dependent ticket. Complete and merge #3 before beginning this ticket.
Instructions:
In src/App.js
, above the <Bookings />
component add a new component called Deck
which shows 3 cards.
The cards must link to peoplemakeglasgow.com
, visitmanchester.com
and visitlondon.com
. The cards should contain the name of the city and an image of the city. There is sample data in data/fakeCards.json
Test:
- π Priority Mandatory
- π Size Medium
- π Week 1
- 𧩠Feature
- βοΈ Dependent ticket
- π Size Small
- π Priority Key
- π Week 1
- 𧩠Feature
- π Size Small
- π Priority Key
- π Week 1
- 𧩠Feature
- π Size Small
- π Priority Key
- π Week 1
- 𧩠Feature