Lab 7 - Functions

Challenge

For this challenge, we are using JavaScript to create a function that takes a user's input for their name and sorts it into alphabetical order.

Problems

In this lab, I ran into more problems than I did for my previous assignments. This lab was fairly difficult because it was like being dropped from a nest and being forced to fly. In previous labs, almost everything we needed to do was already done for us. Because of this, we couldn't learn how to do them ourselves legitimately. For the most part, I sort of copied and pasted a few snippets from previous labs while also manually coding some of these things on my own so that I can slowly learn how to do it.

One of the things that had perplexed me in previous labs was on linking the JS file. Whenever I linked a JS file in the Script Output section, I always noticed the one already created in the heading. I wasn't sure exactly what that did and if they both functioned similarly and I was too hesitant to delete or replace anything in the original coding that could break everything. This lab sort of enlightened me on problems that could happen when you link a JS file twice. For one, when I was testing out the coding I did in the JS file, I received two prompts for me to put my name in. Another thing was that when I deleted the linked JS in the Script Output section, the code would work properly, but when I do the opposite (delete the one in the heading instead of the output section), it would not work.

Besides that, I also encountered problems with the function. The first issue was quickly realized after comparing notes with my partner. It took me a while, but I came to realize that I was victim to one of the many coding dilemmas that all programmers face: capitalization. I had put toLowercase instead of toLowerCase. Although I had problem-solved this issue, my TA introduced me to another solution to the challenge that was much cleaner and took into consideration the capitalization. Because I found this method better, I scrapped my original function and used his, with a few modifications. For one, I only included the user's input and their named sorted through with consideration for capitalization. This, of course, quickly became a problem because as I tested out the code, the user's input would print out but the sorted name wouldn't. Once again I had become a victim to one of the common coding errors, this time with saving files instead of formatting cases. I had saved the JavaScript file, but forgot to save my main HTML file. Because of this, the JS code could not register the id I put in the span for name sorting. Once I saved both files, the program would work splendidly.

Furthermore, I also used functions created by my partner for omitting spaces and capitalizing the beginning of each sorted word. I think, for the most part, copying the code was easy- figuring out how they work and why my copied version wouldn't work was the hard part. For one, when copying the code for omitting spaces, I couldn't get it to output how I wanted it. I was able to safely connect the code to the span with the id I wanted to change, but at first it would only output one word. I troubleshooted things using ChatGPT and realized that the problem was with how I named my variables. This was safely fixed after I changed the problematic variables. The A.I. also helped me understand how the iteration worked and drastically raised my understanding of things. I also encountered issues with understanding how the other code worked. There was an expression in the function called /\b./g and it seemed extraordinarily complicated. I once again conferred with ChatGPT about this expression and learned that it was a "word boundary anchor," which I totally understand (don't). I asked my partner and after being shown the website, stackoverflow, I was quickly able to figure it out. It was such a simple selector, but appeared complex at first glance.

Results

Down below is my function working to sort a name into alphabetical order.

Script Output