Fluff Stuff
THE CHALLENGE
-
Develop a website to sell pillows
THE OUTCOME
-
Website to sell pillows developed using HTML, CSS and Javascript
MY ROLE
-
This is an individual project, so I was responsible for design and development
01
BRIEF
Develop a website for Fluff Stuff, Who specialize in throw pillows that are designed to turn any room cozy.
Each pillow cover is hand-knitted from thick and soft hand-dyed cotton yarn in our artisan workshop out of Pittsburgh, PA. For our online shop, please allow customers to choose from a variety of types:
Each of these comes in the yarn colors: After School Special / Morning Haze / Cozy Denim / Rainy Day, and can be filled with the customer’s choice of: duck down /hypoallergenic poly-blend / memory foam
02
LOW FI - PROTOTYPE
i developed 3 different lofi-prototypes and tested with users
Low-fi Variation1
Low-fi Variation2
Low-fi Variation3
FINAL PROTOTYPE
Improvements done:
Homepage: Changes both names for clear navigation - with "Products" and "Picking assistant" pages
Shopping Page: Included "See All" products in products page along with pillow categories
Product Detail Page: Post add to cart, collapsible side popup of cart section
03
HIGH FI - PROTOTYPE
Site Map
.jpg)
Home Page
.png)
Product Detail Page
.png)
Checkout
.png)
Product Browsing Page
Picking Assistant
Similar Items for you
.png)
Cart
04
DEVELOPMENT
BUGS FIXED / CHALLENGES FACED WHILE DOING HTML, CSS
1. Double border on button, due to writing it twice by mistake
2. Pillows images in the handpicked collection are a bit off to the right. Found the issue using chrome dev tools, inspect and then seeing where the border is wrong etc., Fixed this by justifying content one level above.
BUGS FIXED / CHALLENGES FACED WHILE DOING JAVASCRIPT
1. On click functionality seems to work only once: When I change the color from one to other, I could see the images changing but when I press the other colors images were not changing. Using console.log() when I debugged I made a silly mistake of fetching the same id in every function of the button. Fixed it by adding relevant ids in each of the function
2. Using Async: One challenge that I faced is when I was trying to capture all the prices and inputs in an array, I console.logged and saw the divs that I’m targeting but html collection elements showed null. Digging into this further I found that as I’m keeping my javascript files in head and html elements in body which runs later, my javascript is running even when the html is not present. So I added “async” along with the <script> tag
3. “Event” is deprecated : After lot of time of debugging using console.log realized that this happening due to not writing event in the function like function(event) {} which is a silly mistake
PROGRAMMING CONCEPTS
1. Using ‘innerText’ to just extract the price
2. Using 'parsefloat' to convert a string into a floating point number to count the total in a cart
3. Using 'event.target' to write contextual functions when an event like changing the quantity or removing from the cart happens
4. Using 'Math.round' to round the total to two decimal places
5.Using Arrays for implementing the carousel functionality in product detail page
Webapp link: https://pvegired.github.io/homework_6b/
GitHub repository link: https://github.com/pvegired/life-in-numbers/tree/master