🏷️ 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
Feature Card πŸ”— Clone

Instructions:

Test:

  • πŸ‡ Size Small
  • πŸ”‘ Priority Key
  • πŸ“… Week 1
  • 🧩 Feature
Feature AppHeader πŸ”— Clone

Instructions:

Test:

  • πŸ‡ Size Small
  • πŸ”‘ Priority Key
  • πŸ“… Week 1
  • 🧩 Feature
Feature SearchButton πŸ”— Clone

Feature:

Test:

  • πŸ‡ Size Small
  • πŸ”‘ Priority Key
  • πŸ“… Week 1
  • 🧩 Feature