How to interact data with JavaScript, HTML and CSS in the browser
Table of Contents
- 🎯 Objective
- 🏗 Prerequisites
- 📱 Features
- Feature 0 - Show more
- Feature 1 - Browse pages
- Feature 2 - Filter by brands
- Feature 3 - Filter by recent products
- Feature 4 - Filter by reasonable price
- Feature 5 - Sort by price
- Feature 6 - Sort by date
- Feature 8 - Number of products indicator
- Feature 9 - Number of recent products indicator
- Feature 10 - p50, p90 and p95 price value indicator
- Feature 11 - Last released date indicator
- Feature 12 - Open product link
- Feature 12 - Save as favorite
- Feature 4 - Filter by favorite
- Feature 12 - Usable and pleasant UX
- 👩💻 Just tell me what to do
- 🛣️ Related Theme and courses
Build a Usable and pleasant web page that interacts with arrays, objects, functions etc... with JavaScript, HTML and CSS.
- Be sure to have a clean working copy.
This means that you should not have any uncommitted local changes.
❯ cd /path/to/workspace/clear-fashion
❯ git status
On branch master
Your branch is up to date with 'origin/master'.
nothing to commit, working tree clean- Pull the
masterbranch to update your local with the new remote changes
❯ git remote add upstream git@github.com:92bondstreet/clear-fashion.git
## or ❯ git remote add upstream https://github.com/92bondstreet/clear-fashion
❯ git fetch upstream
❯ git pull upstream master- Open the entry point ../client/v2/index.html in your browser (that loads the ../client/v2/portfolio.js file)
# macos cli
❯ open client/v2/index.html
# linux cli
❯ xdg-open client/v2/index.html
# or by double-clicking in your browser files- Check the rendering of your browser webpage
I will describe each feature with the Agile User Story template.
A User Story is an informal, general explanation of a software feature written from the perspective of the end user or customer.
A user story should typically have a summary structured this way:
- As a [user concerned by the story]
- I want [goal of the story]
- so that [reason for the story]
As a user
I want to show more products
So that I can display 12, 24 or 48 products on the same page
As a user
I want to browse available pages
So that I can load more products
As a user
I want to filter by brands name
So that I can browse product for a specific brand
As a user
I want to filter by by recent products
So that I can browse the new released products (less than 2 weeks)
As a user
I want to filter by reasonable price
So that I can buy affordable product i.e less than 50€
As a user
I want to sort by price
So that I can easily identify cheapest and expensive products
As a user
I want to sort by price
So that I can easily identify recent and old products
As a user
I want to indicate the number of displayed products
So that I can understand how many products is available
As a user
I want to indicate the number of displayed products
So that I can understand how many new products is available
As a user
I want to indicate the p50, p90 and p95 price value
So that I can understand the price values of the products
As a user
I want to indicate the last released date
So that I can understand if we
As a user
I want to open product link in a new page
So that I can buy the product easily
As a user
I want to save a product as favorite
So that I can retreive this product later
As a user
I want to filter by favorite products
So that I can load only my favorite products
As a user
I want to parse a usable and pleasant web page
So that I can find valuable and useful content
- Solve each
User Storiesinside ../client/v2/portfolio.js file with JavaScript
- Once an User Story is solved, commit your modification:
❯ cd /path/to/workspace/clear-fashion
❯ git add -A && git commit -m "feat(display): show 12, 24 or 48 products"(why following a commit message convention?)
- Commit early, commit often
- Don't forget to push before the end of the workshop
❯ git push origin masterNote: if you catch an error about authentication, add your ssh to your github profile.
- Check that your codebase works by checking the console output
- If you need some helps on git commands, read git - the simple guide
- DOT - Do One Thing
- LIM - Less Is More
- If you change the ../client/v2/index.html selectors, you should probably update ../client/v2/portfolio.js file
- English only: codebase, variables, comments...
Focus on coding and web design