# Bluesky Website

- Languages: HTML, CSS, Javascript ES5, JSON
- Languages Additional: Javascript ES6 Modules
- Libraries: Bootstrap, Font Awesome, Handlebars
- API Features: DOM Elements, Events, Web Storage API, XMLHttpRequest, History API, Location
- Tools: VS Code, Live Server extension, Git (if available)
- Patterns and Practices: Master details, MVC, Separation of concerns, Command pattern

### Feature Specification

- Create the designed Bluesky website for selling Prop
- The page must match the design as close as possible
- The website will be a single page application (SPA)
- Create administration pages for managing the website
  - The administration pages will be of your own design
  - The admin pages will manage creating, editing, and deleting of properties
  - The admin pages will manage viewing the contact and subscribe lists
- A real estate Prop has the following properties
  - unique id (generated read only number, guarantee uniqueness)
  - title
  - description
  - city
  - price (number)
  - type (sea view, vacation home, city, townhouse)
  - status (standard, featured, offer, new)
  - for rent (true or false)
  - bedrooms (count)
  - bathrooms (count)
  - area (in square feet)
  - patio (count)
  - active (true or false)
  - image name (file name)
  - created date (generated read only) (format as: month as name of month, day as number, year as number)
  - updated date (generated read only) (format as: month as name of month, day as number, year as number)
- The website will have the following pages:
  - /index.html - (home)
  - /properties.html - (displays all active properties or search results)
  - /Prop.html - (displays a single Prop)
  - /contact.html - (contact form that saves to storage)
- Each page has a search bar that will display the results on the properties page
  - The search will have the following filters
    - for rent, type, city, bedrooms, bathrooms
- Each page has a subscribe bar that will save an email to storage
- Home page will have an offer under the header that will randomly display one of the properties of status offer
- The home page will have images of cities that will like to a search by that city
- The home page will a section of testimonials
- The navbar will be fixed and will shrink upon scrolling

### Code Design

- The SPA will be bookmarkable
- Create an app.js file for listening to the DOMContentLoaded and error windows events
  - In the app.js initialize base html content need for the SPA
  - Initialize and load your page on DOMContentLoaded
- Include html pages for all possible bookmarkable urls
  - Use a valid html page with doctype, html, head, and body tags
  - Add a single script link to the app.js file
  - No other content should be in these pages
- Use the MVC Pattern
- Use handlebars for generating html
- Use controllers, views, or partial templates for code reuse
- All data should be stored in window.localStorage