Shopping list app

When it came time to start with the UI, I started by finding a color palette and decide on a font. Getting to choose colors selected i to use a website https://coolors.co/. This was because the page generate different color palette that I can use as inspiration.

When I chose the font I used roboto because it is a clean and modern font which is easily legible that was specifically designed for phones that fit Good for a shopping list website.

The icons of the components were drawn themselves. This was because I didn't was going to have a lot of icons and then it could quickly take me longer to find icons I could use online instead of drawing them myself.

When I started making the prototype, I focused on how I could Make shopping list as easy to understand as possible. Then I chose to have a clean and easy to disembark. All buttons on the website are also 48px minimum get Keep it easy for everyone to tap. With large font sizes as well to make the entire website scalable to less than 320px width.

In the Javascript file I made sure to make the entire shopping list possible to Navigate only by keyboard if one prefers it and for convenience You can press Enter when the input field on the website is highlighted to add things to the list. On the trash bin icon I have on the website I added a mouseover effect that changes the icon to make it more obvious that the icon is highlighted and at the same time the hover effect is only active on the PC to not create problems on the phone.

I also included local storage in the Javascript file so that it is Possible for people to use the website add the things they are going to buy too Later open the website again to bring back the same list.

For me, it was quite problematic to make local storage in this task because I have never worked with JavaScript before this task in additionally, I had to make an array out of everything I was going to store in Local Storage.

Originally, when I implemented local storage I only saved the html in the page, but Since it's an unsecure way to do it, I had to find others solutions and then the answer was to convert elements from the HTML file above to string. First variation of this I had two functions to add to elements in HTML and one to take the HTML elements and convert it Over to String which was stored in Local Storage. This was an ineffective System where I had to repeat everything I had in HTML and Local Storage function twice. In the latest version I'm using now I've got mixed html function along with local storage function so that I avoid the most possible repetition.