All solutions

A nice fun project, and i've successfully used JSON which works on all platforms. I realised i was doing my fetching syntax incorrectly, and managed to correct it for my other projects!

Some comments

• had a lot of fun doing the password JS code, and thoroughly enjoyed the challenge! if you can help on this:

• Wasn't very sure how to customise the slider using the input tag type = range. I wanted to change the color of the slider-thumb to grey but was unsuccessful, if you can help on this please!

• I tried this: #length-number { background-color: transparent; appearance: none; } #length-number::-webkit-slider-runnable-track { background-color: $green; } #length-number::-webkit-slider-thumb { background-color: $grey; }

• webkit-slider-thumb didn't work, but runnable-track did, still it just gave a green background with a blue thumb, which is not what i want

• so i ended up just doing this: #length-number { accent-color: $green; }

One of my absolute favourites comments -i learnt so much! It was my first time drawing the ring counter, which was exciting, and my first time using the forEach function on arrays -i customised a lot of this using Javascript, which was a challenge in its own -Had a lot of fun! in my next project -i will stick to a BEM naming convention for my CSS next round -i will try to group together elements into arrays and use forEach, which saves a lot of coding lines -i will use more deconstructing and spread operators consistently instead of coding for each individual element If you can help -Please could you suggest cleaner and more efficient code, or any methods that i have used which is cumbersome, looking for the most efficient way to represent my code.

• To add to the challenge, i decided to code this using Vanilla Javascript. Difficult, but very satisfying when it works
• First time using localStorage for variables! Very exciting
• Figured out the getElementsByClassName used HTMLCollection which updates live, took a while to realise that changing pages causes this function to empty its array and add in new ones, but the DOM fired immediately as the code did and resulted in a blank array. I realised this function took longer to process and made it async, and it all turned out fine :)
• First time doing a horizontal scroll carousel, and this project actually has a lot of firsts!
• First time using local storage, first time making a bookmarking system and a customised search bar for each page
• A login system ( without back-end, but surprising still hard to code on front-end)
• One of the hardest website i've coded in Vanilla Javascript

** General Comments **

• Feel free to suggest advise!
• loved the addition of a javascript element, lots of fun making charts

** Things to work on/ ask about **

• i used flex a lot on this project ( see html that says horizontally/vertically for different flex directions), i did use some CSS magic to get the brown popup by reversing the flex direction (see vertical-reverse), i was wondering if there was a better way to code this
• also wondering if my js code can be cleaned up in fewer lines.
• looking for a better way to name my html tags, can anyone suggest a good naming system?

Improvements made

• Since the previous project on single-price-grid-component-master, i have made some improvements to my coding which has doubled time efficiency allowing me to complete this project quickly

• plain background as from the design image a consistent class naming system using ARIA tags and landmark main in HTML using colors in variable names first in CSS I found that a consistent width and height for this worked on all devices, quick fix! Didn't need to use flex either

Some changes:

• I implemented 100% height and width on html and body, is this common practice? please check:
• is my box-shadow too strong? how do i make it fainter but not have a large blur radius?

What did you find difficult while building the project?

• The responsive design at the phone level, i had issues with margins and items coming out the screen

COLLECTIVE ANSWER: Which areas of your code are you unsure of?/ Do you have any questions about best practices?

• Not too sure about html, body, .background-objects having a height of 0, is this common practice?
• also not sure if i did the responsive design professionally, i feel like a fudged and fiddled with vh and vw