Sort tags alphabetically

Description

The goal is to sort the list alphabetically to enhance readability. For the same reason, groups of tags starting with the same letter are separated by a space, while the two non-letter tags being sorted at the top of the list.

To achieve this functionality, I created two functions:

insertTagAndSort to deal with the data aspect of taking the array from local storage, adding a new tag, and sorting the array
renderAllTags to deal with the DOM and the rendering aspect of the list. This function also deals with adding the extra space between groups of tags.

Related Issue

Closes #41

Acceptance Criteria (AC)

[x] The list is sorted alphabetically each time an item is added.
[x] The list is sorted alphabetically at each render
[x] Groups of tags starting with the same letter are separated by a space

Type of Changes

	Type
✓	✨ : Enhancement

Screenshots

Before: A non-sorted list with the following html tags: main, article, div, aside, a, header

After:

Notes & Questions

I had a (really) hard time getting everything to work. Eventually, I decided to take a step backward and imagine that I was starting everything from scratch (there is no code pre-existing code related to the list). This helped me realize that the two functions handling the local storage (saving and uploading) were creating a problem when re-rendering the updated list. So I simplified the calls to local storage. The sorting and rendering seems to work fine now.

A second problem I had was with the space between tags that start with different letters. I tried with CSS, but the code was very cluttered (plus I could not get it to work!). It works now with JavaScript, but I had to rewrite part of the code that deals with adding a new li element. Not sure why the concatenation method we had before was getting in the way, the messages in the console kept pointing to it.

Let me know what you think. This was more difficult that I anticipated, but I learned so much trying to debug all the partial solutions I tried! Should I keep trying with the CSS approach? Since it's a style aspect, it would make sense, but what I had at some point were tens of lines of code. I feel like what we have now is much cleaner (plus, it's working) 🤣

Name	Link
Latest commit	b377396f362560fec84373399eccdd861aacaee5
Latest deploy log	https://app.netlify.com/sites/html-tag-quiz/deploys/65478b55f7fbaf0008c4ff31
Deploy Preview	https://deploy-preview-46--html-tag-quiz.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

CorinaMurg / html-tag-quiz