Lab 7 - Functions

Challenge

In this lab, we are getting familiar with JavaScript functions.

Problems

This lab was a little trickier than the previous ones. One, I had a really really small mistake that wasn't letting me see the results of my JavaScript code on my web page. I spent a solid 10 minutes trying to figure out why it wasn't showing up. Turned out I had writen <scriptsrc> instead of <script src>. Two, I had originally used a for loop to try and iterate through the letters of the user input but then I had saw the example code and realized how much more complicated I was making the code. It's not quite a problem but it was something I had experienced.

Results

I have a Lab 7 index.html file that is styled with CSS and I have a JavaScript file that sorts the letters of a user's input.

Script Output

If there is no output, try refreshing the page.

Task X

  1. How does sort() deal with upper and lowercase? Can you make your function sort lowercase and uppercase together?

    It prioritizes uppercase letters so when sorting, it will first sort all the uppercase letters and then sort the lowercase letters. To make it ignore casing, you can either turn the whole word into uppercase or lowercase and then sort it.

    Here, you can see when there is no toLowerCase() or toUpperCase() method, the output sorts the uppercase letters first and then the lowercase letters.

  2. Can you make your funcion ignore/omit spaces?

    Yes, by using the replace() method for strings. This can replace all instances of white space using replace(/(to be replaced)/g, (replacement)).

    Here is a screenshot showing the replace method. This is the current code that's being used for the script output.

  3. Can you make your function shuffle the user's name to create an anagram? Can you make it capitalize the words properly?

    I didn't quite understand this question. If the shuffled name needs to be an actual word in the dictionary, I'm lost. However, if this question is asking to shuffle the letters randomly and then capitalize the first letter, after doing some research, it seems you can actually utilize the sort() method and its optional argument. This demonstrates how to do that and this explains how the sort() optional argument works.

    Here is a screenshot of the shuffleName() function I made for this task. I referenced a shuffle code from the link above.

  4. When you output a name, can you make your script output a <div> with a class that is styled in your css?

    Yes, in fact, my code is already organized that way. The script output is already a part of a <div> called "output" and so adding CSS to that <div> will make changes. The only thing is that I added <pre> for the sorted name so unless I take that out, it will be unaffected.

    Here is a screenshot showing the removed <pre> code and seeing the output styled like the other text on this page.

  5. Can you make it so window.prompt() happens outside of your functions then pass the name as a parameter to the functions and return the result?

    I originally did this when I didn't read the directions closely.

    Here is a screenshot of my JavaScript code with the window.prompt() declared outside of the sortName function.

Click to view images in a new tab! Image gallery code from w3schools.com.

Here is a screenshot of my Lab 7 HTML code.
Here is a screenshot of my Lab 7 CSS code.
Here is a screenshot of my final Lab 7 JavaScript code after doing the bonus tasks. I did originally have the window.prompt() code inside the function but in order to use the same input for the shuffleName() function, I had to move it outside of the function.
Here is a screenshot of my previous JavaScript code with the window.prompt() inside of the function and without the shuffle code.
Here is a screenshot showing that the code sorts an input and also shuffles it.