diff --git a/Sprint-3/todo-list/00-what_is_ES_modules.md b/Sprint-3/todo-list/00-what_is_ES_modules.md new file mode 100644 index 000000000..4817977fb --- /dev/null +++ b/Sprint-3/todo-list/00-what_is_ES_modules.md @@ -0,0 +1,16 @@ +# What is JavaScript Modules? +JavaScript modules let us organize code into separate files, making the code easier to manage and reuse. We can export parts of one file (like functions or variables) and import them into another to keep our code clean and modular. + +## Different Module Systems + +JavaScript has two main ways to handle modules: + +- **CommonJS** is the older format used mostly in Node.js. It uses `require` and `module.exports`. + +- **ES Modules** (ESM) are the modern, standard way for browsers and Node.js. They use `import` and `export`. + +They are **not** fully compatible. At CYF, you should use ESM, not CommonJS. + +## Where can I learn ESM? +- [Modules, introduction](https://javascript.info/modules-intro) +- [JavaScript modules -- JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) \ No newline at end of file diff --git a/Sprint-3/todo-list/01-using_esm_with_nodejs_and_jest.md b/Sprint-3/todo-list/01-using_esm_with_nodejs_and_jest.md new file mode 100644 index 000000000..7d15789ae --- /dev/null +++ b/Sprint-3/todo-list/01-using_esm_with_nodejs_and_jest.md @@ -0,0 +1,50 @@ +# Using ESM with Node.js, Jest, and `jsdom` + +## Node.js + +Node.js supports both CommonJS and ESM, with CommonJS being the default module system. + +To use ESM, we can add `"type": "module"` to `package.json`, or we can name the JavaScript files +with `.mjs` file extension. + +**Important**: +- Avoid mixing CommonJS and ESM in the same project. At CYF you should only use ESM. + + +## Jest + +[Jest’s support for ESM](https://jestjs.io/docs/ecmascript-modules) is still experimental, and may require additional configuration to work correctly. + +One way to execute Jest test script that uses ESM is to + +1. **Update the custom `test` script in `package.json`**: +```javascript +"scripts": { + "test": "NODE_OPTIONS=--experimental-vm-modules jest" +} +``` + +**Note**: On Windows, use **`set`** instead +```javascript +"scripts": { + "test": "set NODE_OPTIONS=--experimental-vm-modules && jest" +} +``` + + +2. **Run a specific Jest test script using**: + +``` +npm test -- +``` + +**Note**: The `--` is optional if you do not have arguments to be forwarded to the underlying +`jest` command. + + +## `jsdom` + +[**`jsdom`**](https://github.com/jsdom/jsdom), a pure-JavaScript implementation of DOM for +use with Node.js, **does not yet support** ` - + + + + ToDo List + + + + + + +
+

My ToDo List

+ +
+ + +
+ + + + + + +
+ diff --git a/Sprint-3/todo-list/package.json b/Sprint-3/todo-list/package.json index b25383cf8..ce181158a 100644 --- a/Sprint-3/todo-list/package.json +++ b/Sprint-3/todo-list/package.json @@ -3,8 +3,10 @@ "version": "1.0.0", "license": "CC-BY-SA-4.0", "description": "You must update this package", + "type": "module", "scripts": { - "test": "jest --config=../jest.config.js todo-list" + "serve": "http-server", + "test": "NODE_OPTIONS=--experimental-vm-modules jest" }, "repository": { "type": "git", @@ -13,5 +15,9 @@ "bugs": { "url": "https://github.com/CodeYourFuture/CYF-Coursework-Template/issues" }, - "homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme" + "homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme", + "devDependencies": { + "http-server": "^14.1.1", + "jest": "^30.0.4" + } } diff --git a/Sprint-3/todo-list/package.json-windows b/Sprint-3/todo-list/package.json-windows new file mode 100644 index 000000000..2262f3d00 --- /dev/null +++ b/Sprint-3/todo-list/package.json-windows @@ -0,0 +1,23 @@ +{ + "name": "todo-list", + "version": "1.0.0", + "license": "CC-BY-SA-4.0", + "description": "You must update this package", + "type": "module", + "scripts": { + "serve": "http-server", + "test": "set NODE_OPTIONS=--experimental-vm-modules && jest" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/CodeYourFuture/CYF-Coursework-Template.git" + }, + "bugs": { + "url": "https://github.com/CodeYourFuture/CYF-Coursework-Template/issues" + }, + "homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme", + "devDependencies": { + "http-server": "^14.1.1", + "jest": "^30.0.4" + } +} diff --git a/Sprint-3/todo-list/script.js b/Sprint-3/todo-list/script.js deleted file mode 100644 index 61982a54f..000000000 --- a/Sprint-3/todo-list/script.js +++ /dev/null @@ -1,25 +0,0 @@ -function populateTodoList(todos) { - let list = document.getElementById("todo-list"); - // Write your code to create todo list elements with completed and delete buttons here, all todos should display inside the "todo-list" element. -} - -// These are the same todos that currently display in the HTML -// You will want to remove the ones in the current HTML after you have created them using JavaScript -let todos = [ - { task: "Wash the dishes", completed: false }, - { task: "Do the shopping", completed: false }, -]; - -populateTodoList(todos); - -// This function will take the value of the input field and add it as a new todo to the bottom of the todo list. These new todos will need the completed and delete buttons adding like normal. -function addNewTodo(event) { - // The code below prevents the page from refreshing when we click the 'Add Todo' button. - event.preventDefault(); - // Write your code here... and remember to reset the input field to be blank after creating a todo! -} - -// Advanced challenge: Write a fucntion that checks the todos in the todo list and deletes the completed ones (we can check which ones are completed by seeing if they have the line-through styling applied or not). -function deleteAllCompletedTodos() { - // Write your code here... -} diff --git a/Sprint-3/todo-list/script.mjs b/Sprint-3/todo-list/script.mjs new file mode 100644 index 000000000..ba0b2ceae --- /dev/null +++ b/Sprint-3/todo-list/script.mjs @@ -0,0 +1,76 @@ +// Store everything imported from './todos.mjs' module as properties of an object named Todos +import * as Todos from "./todos.mjs"; + +// To store the todo tasks +const todos = []; + +// Set up tasks to be performed once on page load +window.addEventListener("load", () => { + document.getElementById("add-task-btn").addEventListener("click", addNewTodo); + + // Populate sample data + Todos.addTask(todos, "Wash the dishes", false); + Todos.addTask(todos, "Do the shopping", true); + + render(); +}); + + +// A callback that reads the task description from an input field and +// append a new task to the todo list. +function addNewTodo() { + const taskInput = document.getElementById("new-task-input"); + const task = taskInput.value.trim(); + if (task) { + Todos.addTask(todos, task, false); + render(); + } + + taskInput.value = ""; +} + +// Note: +// - Store the reference to the