Action items from retro after October run (#67)

Pairs with CodeYourFuture/curriculum#1683

Contributes to CodeYourFuture/curriculum#1678

Author: illicitonion

Project-Days-Calendar/README.md

@@ -22,12 +22,20 @@ Your website must be hosted on the internet, and must be automatically deployed
 
 You must be able to explain every line of code in your project, even ones other people in your group wrote.
 
+> [!WARN]
+>
+> Date calculations can be complicated. Daylight savings time in particular can cause problems.
+>
+> Read [this guidance on handling daylight savings time and time zones](https://stackoverflow.com/questions/2532729/daylight-saving-time-and-time-zone-best-practices).
+>
+> Be sure to check the _exact_ dates returned when testing. Being off by one day will fail your project.
+
 ### Requirements for everyone
 
 Regardless of your group size, you must:
 
 * Create an HTML page which, when loaded, displays a calendar.
-* The calendar must show every day of the current month, each as a rectangle. Each row of rectangles must show one week. The first column must show Mondays. The first day of the month must be shown in the first row.
+* The calendar must show every day of the current month, each as a rectangle. Each row of rectangles must show one week. The first column must show Sundays. The first day of the month must be shown in the first row.
 * There must be two buttons which, when clicked, switch what is displayed. One button must change the display to the previous month. The other button must change the display to the next month. On repeated clicks, these buttons must keep moving back/forwards in time, one month per click.
   * These buttons must work on every month. There should be no first/last months beyond which you can't press previous/next and have them work.
 * There must be a way to jump to a particular month and year, e.g. "October 2020". For example, you could use a `<select>` tag for each of the month name and a reasonable range of years.
@@ -84,8 +92,8 @@ Note that when running locally, in order to open a web page which uses modules,
 * Open the calendar, it should be showing the current month.
 * Go to October 2024. Observe:
   * A grid of 5 rows x 7 columns.
-  * The first row contains Tuesday October 1 - Sunday October 6. Monday is either labelled for September 30 or is blank.
-  * The last row contains Monday October 28 - Thursday October 31. Friday - Sunday are either labelled for November or are blank.
+  * The first row contains Tuesday October 1 - Sunday October 6. Sunday and Monday are either labelled for September 29/30 or are blank.
+  * The last row contains Monday October 28 - Thursday October 31. Friday  and Saturday are either labelled for November or are blank.
   * October 8th: Ada Lovelace Day.
   * October 25th: World Lemur Day.
 * On the web page, open October 2020. Observe:
@@ -94,14 +102,14 @@ Note that when running locally, in order to open a web page which uses modules,
 * On the web page, open May 2030. Observe:
   * May 11th: International Binturong Day.
 * The following months start and end on these dates, and do not have extra days or padding boxes outside of the weeks they're meant to cover:
-  * 2025-01: Wednesday (two days before, labelled or blank) - Friday (two days after, labelled or blank)
-  * 2025-03: Saturday (5 days before) - Monday (6 days after)
-  * 2025-09: Monday (no empty days before) - Tuesday (5 empty days after)
-  * 2025-11: Saturday (5 empty days before) - Sunday (no empty days after)
+  * 2024-12: Sunday (no empty days before) - Tuesday (4 empty days after).
+  * 2025-02: Saturday (6 days before) - Friday (1 empty day after).
+  * 2025-05: Thursday (4 empty days before) - Saturday (no empty days after).
+  * 2026-02: Sunday (no empty days before) - Saturday (no empty days after).
 * Functioning previous and next buttons including at the end-points of the month+year selector (if it has ends).
   * If there are end-points to the month+year selector, the previous and next buttons must work flawlessly when going beyond that limit. The UI must not e.g. show an empty string, "undefined", "null", "NaN" or similar if the "current month" or "current year" is displayed anywhere in the UI. The calendar days must be correctly shown.
 * A usable way of jumping to a month+year.
-* UI is generated by DOM manipulation, and would work if arbitrary additional days were added to the data file.
+* UI is generated by DOM manipulation, and day generation is dynamic. Everything would work if arbitrary additional days were added to the data file.
 * The website must score 100 for accessibility in Lighthouse
 * Unit tests must be written for at least one non-trivial function
 

Project-Days-Calendar/days.json

@@ -3,35 +3,35 @@
         "name": "Ada Lovelace Day",
         "monthName": "October",
         "dayName": "Tuesday",
-        "occurence": "second",
+        "occurrence": "second",
         "descriptionURL": "https://codeyourfuture.github.io/The-Piscine/days/ada.txt"
     },
     {
         "name": "International Binturong Day",
         "monthName": "May",
         "dayName": "Saturday",
-        "occurence": "second",
+        "occurrence": "second",
         "descriptionURL": "https://codeyourfuture.github.io/The-Piscine/days/binturongs.txt"
     },
     {
         "name": "International Vulture Awareness Day",
         "monthName": "September",
         "dayName": "Saturday",
-        "occurence": "first",
+        "occurrence": "first",
         "descriptionURL": "https://codeyourfuture.github.io/The-Piscine/days/vultures.txt"
     },
     {
         "name": "International Red Panda Day",
         "monthName": "September",
         "dayName": "Saturday",
-        "occurence": "third",
+        "occurrence": "third",
         "descriptionURL": "https://codeyourfuture.github.io/The-Piscine/days/red-pandas.txt"
     },
     {
         "name": "World Lemur Day",
         "monthName": "October",
         "dayName": "Friday",
-        "occurence": "last",
+        "occurrence": "last",
         "descriptionURL": "https://codeyourfuture.github.io/The-Piscine/days/lemurs.txt"
     }
 ]

Project-Days-Calendar/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "project-days-calendar",
+  "version": "1.0.0",
+  "scripts": {
+    "test": "node common.test.mjs"
+  }
+}

Project-Music-Data/README.md

@@ -8,7 +8,7 @@ Make a small HTML + JavaScript frontend which displays the answers to several qu
 
 Some principles to remember throughout this project:
 
-1. This is a project about data processing, not UI. You should make a simple frontend to show the data in valid semantic HTML. No credit will be given for making prettier or more complicated frontend. Do not write any CSS.
+1. This is a project about data processing, not UI. You should make a simple frontend to show the data in valid semantic HTML. No credit will be given for making prettier or more complicated frontend. You are allowed to use CSS, but you are strongly advised to focus on the logic, and only add styling when you are finished. You will not get any credit for styling.
 2. You should assume the data will change in the future, but will have the same schema. So you shouldn't pre-compute anything. Your code should always read the data and calculate results from scratch.
 
 We have provided a `data.js` file, which contains three functions to provide data for you to analyse. `data.js` is a file containing four functions:

Project-Music-Data/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "project-music-data",
+  "version": "1.0.0",
+  "main": "script.js",
+  "scripts": {
+    "test": "node common.test.mjs"
+  }
+}

Project-Shared-Bookmarks/README.md

@@ -11,7 +11,7 @@ Here are some examples of bookmark sites:
 
 Your task is to write code which allows a user to save a link with a short description and share them with others.
 
-You should make a frontend, which displays a list of bookmarked links and the user’s description. A user can create new bookmarks by submitting a form with the URL and the description. You should use **HTML and JavaScript only**. You should **not** use CSS. We want to focus on your ability to create the correct logic and not spend time on creating the perfect UI.
+You should make a frontend, which displays a list of bookmarked links and the user's description. A user can create new bookmarks by submitting a form with the URL and the description. You should use HTML and JavaScript for this. We want to focus on your ability to create the correct logic and not spend time on creating the perfect UI. You are allowed to use CSS, but you are strongly advised to focus on the logic, and only add styling when you are finished. You will not get any credit for styling.
 
 ## Supplied scaffolding
 
@@ -40,7 +40,11 @@ You **must not** implement any kind of authentication. Just a drop-down to choos
 
 After picking a user, your website should display the list of bookmarks in reverse chronological order. For each bookmark, it should display the title and description of the bookmark. The title should be hyperlink to the URL of the bookmark. The timestamp at which the bookmark was created should be displayed.
 
-Your website must include a form with text inputs for the URL and title, a textarea for the description and submit button that allows a user to add a new topic. This form must be accessible, so for example, hitting the Enter key will also submit the topic name, the same as clicking the submit button.
+Each bookmark should also have:
+- A button which, when clicked, copies the URL to the clipboard.
+- A like counter/button. When a bookmark is first saved, its like count should be 0. Each time a user clicks the like button, that number should go up by one, and be displayed. This like count should be persisted such that closing the page and coming back to it, it is preserved.
+
+Your website must include a form with text inputs for the URL, title, and description, and submit button that allows a user to add a new topic. This form must be accessible, so for example, a user using the keyboard should be able to submit it without using a mouse.
 
 After the new data has been stored, the updated list of bookmarks must be displayed (including the new bookmark) for the relevant user.
 
@@ -58,6 +62,8 @@ All of the below requirements must be met for the project to be considered compl
 - The list of bookmarks must be shown in reverse chronological order
 - Each bookmark has a title, description and created at timestamp displayed
 - Each bookmark’s title is a link to the bookmark’s URL
+- Each bookmark's "Copy to clipboard" button must copy the URL of the bookmark
+- Each bookmark's like counter works independently, and persists data across sessions
 - The website must contain a form with inputs for a URL, a title, and a description. The form should have a submit button.
 - Submitting the form adds a new bookmark for the relevant user only
 - After creating a new bookmark, the list of bookmarks for the current user is shown, including the new bookmark

Project-Shared-Bookmarks/example.test.js

@@ -0,0 +1,7 @@
+import assert from "node:assert";
+import test from "node:test";
+import { getUserIds } from "./storage.js";
+
+test("User count is correct", () => {
+  assert.equal(getUserIds().length, 5);
+});

Project-Shared-Bookmarks/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "project-shared-bookmarks",
+  "version": "1.0.0",
+  "scripts": {
+    "test": "node example.test.js"
+  }
+}

Project-Spaced-Repetition-Tracker/README.md

@@ -4,7 +4,7 @@ At Code Your Future, we like to use a learning technique called spaced repetitio
 
 One of the difficulties of this approach is tracking which topic should be revised at what time. Your task is to write code which allows a user to track topics and then understand which topic they should revise next.
 
-You should make a frontend, which displays an agenda of topics to revise on specific dates. You should use **HTML and JavaScript only**. You should **not** use CSS. We want to focus on your ability to create the correct logic and not spend time on creating the perfect UI.
+You should make a frontend, which displays an agenda of topics to revise on specific dates. You should use HTML and JavaScript for this. We want to focus on your ability to create the correct logic and not spend time on creating the perfect UI. You are allowed to use CSS, but you are strongly advised to focus on the logic, and only add styling when you are finished. You will not get any credit for styling.
 
 ## Supplied scaffolding
 
@@ -22,7 +22,7 @@ We have also provided a `storage.js` file, which contains three functions to hel
 
 ## Requirements
 
-This is intended to be a group project - your class leaders will tell you how the groups will work.
+This may be an individual or a team project - your class leaders will tell you which you are doing. If it is a team project, they will also tell you how the groups will work.
 
 You must submit both a link to your GitHub repo, and a link to the deployed website.
 
@@ -38,7 +38,7 @@ When a user is selected, you must get the stored data for that user and use it t
 
 If there is an agenda, your website should display a list of topics and the revision date when the user should revise in _chronological order_. For each revision date, it should display the date and the name of the topic to revise. Revision dates in the past should not be displayed.
 
-Your website must include a form with a text input, a date picker and submit button that allows a user to add a new topic. This form must be accessible, so for example, hitting the Enter key will also submit the topic name, the same as clicking the submit button. The form should validate that the topic name and date have be set by the user.
+Your website must include a form with a text input, a date picker and submit button that allows a user to add a new topic. This form must be accessible, so for example, a user using the keyboard should be able to submit it without using a mouse. The form should validate that the topic name and date have be set by the user.
 
 The date picker should default to today’s date, but allow selection of another date. You should use the built-in date picker for browsers, unless attempted as a bonus task. **No credit** is given for using an alternative date picker.
 
@@ -54,17 +54,20 @@ Every view of your website must be accessible (i.e. for each user, with any numb
 >
 > Date calculations can be complicated. Daylight savings time in particular can cause problems.
 >
-> Make sure your date calculations work as you expect, even if adding an interval means that a date crosses a daylight savings boundary.
+> Read [this guidance on handling daylight savings time and time zones](https://stackoverflow.com/questions/2532729/daylight-saving-time-and-time-zone-best-practices).
+>
+> Be sure to check the _exact_ dates returned when testing, even if adding an interval means that a date crosses a daylight savings boundary. Being off by one day will fail your project.
 >
 > A tip here is to either only be adding dates and not times, or to make sure all dates are in UTC.
 
+
 ## Rubric
 
 All of the below requirements must be met for the project to be considered complete:
 
 - The website must contain a drop-down which lists exactly 5 users
 - No user is selected on page load
-- All of the users must have no agenda when starting from a "clean state" with no stored data
+- All of the users must have no agenda when first loading (i.e. with clear `localStorage`). Data should be persisted across page loads (which is handled by the code in `storage.mjs`).
 - Selecting a user must load the relevant user's agenda from storage
 - Selecting a user must display the agenda for the relevant user (see manual testing below)
 - If there is no agenda for the selected user, a message is displayed to explain this
@@ -76,7 +79,7 @@ All of the below requirements must be met for the project to be considered compl
 - The website must score 100 for accessibility in Lighthouse
 - Unit tests must be written for at least one non-trivial function
 
-Below are some manual testing steps and expected results, which will be run on all websites to fairly assess them.
+Below are some manual testing steps and expected results, which will be run on all websites to fairly assess them. All of the dates are intended to be exact - if dates are off by one day, that counts as a failure.
 
 Pick the year after the current one (e.g. in 2025, pick 2026).
 

Project-Spaced-Repetition-Tracker/common.test.mjs

@@ -1,4 +1,4 @@
-import { getUserIDs } from "./common.mjs";
+import { getUserIds } from "./common.mjs";
 import assert from "node:assert";
 import test from "node:test";