Week 2 Plans and Tangibles

[YLu-1258]

Todo

---

• [x] Brainstorm mini project to cover the JS hacks presented on teacher site
  • [x] JS API: Utilize external API to print motivational quotes at the top of the page.
  • [x] JS Input: Utilized input boxes and adding new elements onto the document.
  • [x] Do something extra, have the program detect whenever a new table row is completed, then add on a new row with comment boxes. Scan the new row for completion
  • [x] JS Output using jQuery: Implement a dataTable embed using jQuery, allow for column sorting, multiple pages, and searching
  • [x] JS Storage using localStorage: Use the localStorage feature in modern browsers to store persistent user data for the user
  • [x] Auto-generate the existing user data from JSON stored in localStorage
  • Project would simulate the old CSP project we created last year. Just more lightweight and implemented into the blog
• [x] Record video timelapse showing collaboration on project
• [x] Utilizing technology such as live share to facilitate group collaboration and peer programming
• [x] Stylize the todo list using CSS

Bugs

---

• [x] localStorage would not properly store user data
  • fixed, bad semicolon.
• [x] Bad starting index for table
  • fixed, stored index_count in localStorage
• [x] jQuery dataTable would not render properly, adds additional "No data in table" row in table even when data is present
  • Table structure was bad, new rows were being added to <thead> element instead of <tbody>. Locating this element fixed the issue.
• [x] Todo list would not render properly on Github pages, Jekyll rendering is bad
  • The todo list had JS comments in the code which commented out the rest of the program. Comment was removed in order for program to work as everything in the script tag was interpreted as one line
• [x] Todo list does not properly index each row of content
  • [x] Sequence of code was messed up, fixed

[YLu-1258]

Here is feedback from ChatGPT for the code I wrote with Ethan.

I've reviewed your code and here are some observations and suggestions:

1. Global Variables: You have a few global variables like index_count, row, and idxCount. It's generally a good practice to limit the use of global variables and declare them within the scope where they are needed. Consider using function parameters and return values to pass data between functions.

2. Variable Declarations: Always declare variables using var, let, or const to avoid accidental global scope issues. Make sure to declare variables like row and idxCount using var, let, or const to avoid potential issues.

3. Inconsistent Naming: Your variable naming is somewhat inconsistent. Some variables use underscores (class_name), while others use camelCase (jsonParsed). Stick to a consistent naming convention, preferably camelCase for JavaScript variables.

4. Code Structure: Your code could benefit from better organization and comments to improve readability and maintainability. Consider adding comments explaining the purpose of each function and the logic within it.

5. LocalStorage Usage: Be cautious when using localStorage for storing data. It has a limited storage capacity, and storing large amounts of data can lead to issues. Consider using other storage options like IndexedDB for larger data sets.

6. Error Handling: There's no error handling in your code. When working with external APIs like the one in getNewQuote(), it's essential to handle potential errors gracefully.

7. HTTP Requests: You're using the XMLHttpRequest API for making HTTP requests. Consider using the more modern fetch API for better readability and compatibility.

8. Hardcoded API Tokens and URLs: Avoid hardcoding sensitive information like API tokens directly in your code. Store them in environment variables or configuration files for security reasons.

9. Magic Values: There are several hard-coded values like the API URL and keys. It's a good practice to define such values as constants at the top of your script to make it easier to update them in the future.

10. HTML Structure: Your code assumes the existence of an HTML table with specific cell structures (table1, rows, and cells). Ensure that your HTML structure matches the code's expectations.