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 property
- 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 property 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)
- /property.html - (displays a single property)
- /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