Week 11 Issue

[kayleehou]

• [x] backend connection using fetch
• [x] retrieve JSON response from backend
• [x] use response to change post content
• [x] create a loop in backend so that depending on user input, different output will show up
• [x] help with post design -- font and colors
• [x] code works even if input doesn't have the right punctuation
• [x] code works even if input isn't capitalized correctly

[kayleehou]

I wanted the code to run regardless of if the user input had the right capitalization or not. Researched and added the .lower function My code only showed this at first: I found the location of the problem using breakpoints: then I ran that specific variable and got this error: built-in method lower of str object at 0x7f224fc5ebf0 After researching the problem, I realized it was a simple syntax error and I just needed parentheses after :) .lower() <-- like this

However, when I did this, the output would change everything to lowercase regardless of if the input had the right capitalizations, I wanted the output to capitalize the first letter of each word like it is in the API.

• I researched using this website: https://www.analyticsvidhya.com/blog/2021/07/regular-expressions-in-python-a-beginners-guide/#:~:text=Regular%20Expressions%2C%20also%20known%20as,the%20help%20of%20regular%20expressions. and this website: https://favtutor.com/blogs/capitalize-first-letter-python#:~:text=capwords(),capital%20as%20the%20desired%20output
• I did some additional regex research and implemented it into my code

[kayleehou]

I used a counter in my code so if the user input title in not in the list, it would print an error message: I counted how many elements were in my list with this resource: https://stackabuse.com/python-get-number-of-elements-in-a-list/

[kayleehou]

The data in my API had problems, the first element in my list was a JPG: I learned how to not print the first element with the pop() function which I learned from this website: https://www.geeksforgeeks.org/python-removing-first-element-of-list/#:~:text=Method%201%3A%20Remove%20Elements%20From,options%20to%20perform%20this%20task.

[kayleehou]

learning how to get it so that it doesn't matter if user input has punctuation or not:

used this website for help: https://www.programiz.com/python-programming/examples/remove-punctuation

[kayleehou]

Starting focusing more on the connection: I was referencing code from the Jokes API for my API but I realized that the Jokes API was personally made whereas my API was already made and I needed to call it instead. This meant I was referencing the wrong code which explained why the API wouldn't show up when I generated the link. I learned the importance of understanding what it is exactly that you want your code to do.

I started referencing the Covid API instead which more closely resembled what I wanted to achieve. From the comic.pop(0) function I was using before, the incorrect data was still showing up when I tried running the link /api/MCU. With Mr. Mortensen's help, he helped me understand that the location of the function was in the wrong place. It was under my filtering response code here: but it should've been under the entire response

[kayleehou]

Another problem I had was my data was only showing up on my webiste when I typed /api/MCU once, whenever I reloaded it would show an error- internal server error.

After debugging with Mr. Mortensen, we realized I had a bug in my backend code, I was returning the Covid API data still, so the first time through the loop it would show the correct data but once it ran another time, the data was empty. It was changed to reflect to MCU_data

[kayleehou]

Reminder: don't have unnecessary spaces when naming!

[kayleehou]

My link worked but I wasn't sure how to have the data show up on the left side of the menu: Once again, I had a typo error, I didn't change the ul id and getElementById to match like it now does below: This is the code for how the data now shows up in the menu: Instead of using tr or td, we used li. We set the value of an attribute on the specific element, 'a' so that the rows would be links. We then set up the content of 'a' as a title. Title and link were both labeled based on the API. We made sure there was an li for each row, an 'a' for each li and then we added li to result.