{"id":20365597,"url":"https://github.com/hackyourfuture/assignments","last_synced_at":"2025-04-05T07:07:36.334Z","repository":{"id":39324372,"uuid":"333084610","full_name":"HackYourFuture/Assignments","owner":"HackYourFuture","description":"This repository contains all of the homework exercises that need to be handed in for the HackYourFuture curriculum.","archived":false,"fork":false,"pushed_at":"2025-02-14T21:18:28.000Z","size":10103,"stargazers_count":11,"open_issues_count":0,"forks_count":124,"subscribers_count":9,"default_branch":"main","last_synced_at":"2025-03-29T06:09:00.058Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/HackYourFuture.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-01-26T12:54:16.000Z","updated_at":"2025-02-14T21:18:32.000Z","dependencies_parsed_at":"2023-09-14T03:11:17.496Z","dependency_job_id":"a5a7ec29-09f7-4d84-b1f0-261070063b82","html_url":"https://github.com/HackYourFuture/Assignments","commit_stats":null,"previous_names":["hackyourfuture/assignments","hackyourfuture/homework"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HackYourFuture%2FAssignments","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HackYourFuture%2FAssignments/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HackYourFuture%2FAssignments/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HackYourFuture%2FAssignments/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HackYourFuture","download_url":"https://codeload.github.com/HackYourFuture/Assignments/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247299832,"owners_count":20916190,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-15T00:18:58.370Z","updated_at":"2025-04-05T07:07:36.314Z","avatar_url":"https://github.com/HackYourFuture.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Assignments\n\nThis repository contains all of the assignments exercises that need to be handed in for the JavaScript modules (i.e., JavaScript, Browsers and UsingAPIs) of the HackYourFuture curriculum.\n\n## TL;DR\n\nWe highly recommend that you go through this README in detail before starting to work on the assignments. Having said that, the essentials can be summarized as follows:\n\n\u003e Important: If you are using a Windows-based computer, please type this command from a Windows Terminal window before you proceed:\n\u003e\n\u003e `git config --global core.autocrlf false`\n\u003e\n\u003e This will ensure that the line endings for text files are compatible with those used on MacOS and Linux-based computers.\n\n1. Fork the `HackYourAssignment/Assignments-CohortXX` repository to your own GitHub account.\n2. Clone the fork to your local computer.\n3. Open the root folder of the repository in VSCode.\n4. When invited to do so, please install the recommended VSCode extensions.\n5. Run the command `npm install` from the root folder of the repository.\n6. Make sure that you are on the `main` branch (if not, check it out first).\n7. Create a new branch and name it (e.g., for week 2 of JavaScript) `YOUR_NAME-w2-JavaScript`. Replace `YOUR_NAME` with your name. Note that you should not work on / modify the `main` branch.\n8. Start your work on the assignments for week 2.\n9. After finishing an assignment, use the command `npm test` to test your solution.\n10. Fix any reported issues and rerun the test. Repeat until all issues are fixed.\n11. When all assignments are done, commit all changed files. This includes the modified exercises, the generated test summary (`TEST_SUMMARY.md`) and test reports (`EXERCISE_NAME.report.txt`).\n12. Push the changes to your fork.\n13. Create a pull request against the `main` branch of the `HackYourAssignment/Assignments-CohortXX` repository. For the title of your pull request use the same format as the branch name, e.g.: `YOUR_NAME-w2-JavaScript`.\n\nRepeat steps 6-13 for each week. For subsequent weeks the mandated branch names are:\n\n- `YOUR_NAME-w3-JavaScript`\n- `YOUR_NAME-w1-Browsers`\n- `YOUR_NAME-w1-UsingAPIs`\n- `YOUR_NAME-w2-UsingAPIs`\n\nFor more information how to hand in your weekly assignments please refer to the [Hand-in Assignments Guide](https://github.com/HackYourFuture/JavaScript/blob/main/hand-in-assignments-guide.md#12-every-week).\n\n## Introduction\n\nThroughout your [HYF journey](https://github.com/HackYourFuture/curriculum) you will be asked to do certain exercises. This repository contains all of these exercises for the JavaScript modules (JavaScript, Browsers, UsingAPIs). The module repositories will tell you how to hand in the assignment, the curriculum will indicate what week you will need to do.\n\n\u003e Note that a fork of this repository will be created on the [HackYourAssignment](https://github.com/HackYourAssignment) GitHub account specifically for your cohort. The name of the repository will have the format `Assignments-cohortXX` where `XX` is your cohort number,\n\n## Installation\n\nAfter forking and subsequently cloning your forked repository execute the following command from the command line to complete the installation:\n\n```text\nnpm install\n```\n\nThis command:\n\n- Installs required software dependencies from the Internet.\n- Sets up folders and files used to track your progress.\n\n## VSCode\n\nYou will be spending a lot of time in [VSCode](https://code.visualstudio.com/) while working with this repository. If you are new to VSCode please check out the [VSCode Tips](https://github.com/HackYourFuture/fundamentals/blob/master/VSCodeTips/README.md) before continuing.\n\nFrom the command line, while inside the `Assignments-cohortXX` folder, you can use this command to open VSCode (the `.` stands for the current directory):\n\n```text\ncode .\n```\n\n\u003e When working on your assignments it is strongly recommended to always open the `Assignments-cohortXX` folder in VSCode rather than one of its sub-folders. This gives VSCode and all its extensions the full view on the repository for the best overall developer experience.\n\u003e\n\u003e Note that the name of the folder opened in VSCode can always be found in the `EXPLORER` panel ( `ASSIGNMENTS_COHORT49` in the picture below):\n\u003e\n\u003e ![folder-name](./assets/folder-name.png)\n\n### Install Recommended VSCode Extensions\n\n**Important**: When you open the repository for the first time you may see the dialog box shown below that invites you to install a set of **recommended VSCode extensions**. These extensions will provide useful help and guidance when you are creating and editing files in VSCode. **Please install these extensions when invited to do so.**\n\n![recommended-extensions](./assets/recommended-extensions.png)\n\nIf, for some reason, the prompt to install the extensions does not appear then please install the extensions manually (click on the triangle below for details).\n\n\u003cdetails\u003e\n  \u003csummary\u003eManual installation\u003c/summary\u003e\n\n\u003cbr\u003eIf for some reason you do not see the VSCode message box inviting you to install the recommended extensions you can do so manually by clicking the **Extensions** button in the VSCode sidebar, pressing the **Filter** button and then selecting **Recommended** from the drop-down menu as shown in the figure below. Please install all extensions listed under the **Workspace Recommendations** header.\n\n![VSCode Recommended Extensions](./assets/vscode-recommended-extensions.png)\n\n\u003c/details\u003e\n\n### Overview of the Directory Structure\n\nThe directory structure containing the assignment for a specific curriculum module (in Figure 1 below, the **JavaScript** module), looks like this:\n\n![directory structure](./assets/directory-structure.png)\n\u003cbr\u003eFigure 1. Directory Structure for the `1-JavaScript` folder.\n\n\u003e A similar directory structure exists for the **Browser** module (`2-Browsers`) and the **UsingAPIs** module (`3-UsingAPIs`).\n\nEach `assignment` folder contains files and (sometimes) sub-folders that make up the exercises. The exercises consist of starter files that you need to complete. Some exercises consist of a single JavaScript (for example, `ex1-giveCompliment.js`). Exercises that are browser-based are mostly contained in sub-folders (for example, `ex1-bookList` in the `1-Browsers/assignment` folder).\n\n\u003e You should not change anything in the `unit-tests` sub-folder. The purpose of this folder will be explained later.\n\nAs mentioned, each exercise comes with starter code. Inside the starter code you will find comments that indicate the places where there is something for you to do. For example, in the code of the JavaScript file `ex1-giveCompliment.js` as shown in Figure 2 this is:\n\n1. The **parameter list** (if needed, for you to figure out) of the function `giveCompliment`.\n2. The **function body** of `giveCompliment`.\n3. The **value** of the variable `myName`.\n\n```js\nexport function giveCompliment(/* TODO parameter(s) go here */) {\n  // TODO complete this function\n}\n\nfunction main() {\n  // TODO substitute your own name for \"HackYourFuture\"\n  const myName = 'HackYourFuture';\n\n  console.log(giveCompliment(myName));\n  console.log(giveCompliment(myName));\n  console.log(giveCompliment(myName));\n\n  const yourName = 'Amsterdam';\n\n  console.log(giveCompliment(yourName));\n  console.log(giveCompliment(yourName));\n  console.log(giveCompliment(yourName));\n}\n\n// ! Do not change or remove the code below\nif (process.env.NODE_ENV !== 'test') {\n  main();\n}\n```\n\nFigure 2. Starter code example: file `ex1-giveCompliment.js`.\n\nIn general, you should only change or add code in the places indicated by the `// TODO` comments. Once you have implemented what the `// TODO` comment asks you to do, remove the `// TODO` comment itself.\n\nYou should not delete or rename existing function(s), nor should you change the file names of the starter files. This repository comes with an automated test facility that relies on the presence of these files and functions.\n\nYou _are_ allowed to add additional functions and/or global variables (but avoid global variables if you can).\n\nWhen you are in the process of making changes to a file you will notice a dot or bullet appearing after the file name in the tab of the editor window, as shown in Figure 4 below:\n\n![Unsaved Changes](./assets/unsaved-changes.png)\n\u003cbr\u003eFigure 3. Unsaved changes\n\nThis indicates that you have unsaved changes. Once you are done, you can use the **File**, **Save** menu commands (or a keyboard shortcut) to save the changes. However, in this repository we have included a setting that automatically saves changes for you whenever you click away from the editor window.\n\n\u003e If you are curious about the VSCode settings that we included in this repository, check the file `settings.json` in the `.vscode` folder. The setting we mentioned in the previous paragraph is: **\"files.autoSave\": \"onFocusChange\"**.\n\u003e\n\u003e You can learn more about VSCode settings here: [User and Workspace Settings](https://code.visualstudio.com/docs/getstarted/settings).\n\n### Prettier VSCode Extension\n\nThis is a recommended VSCode extension that we have included in this repository. **Prettier** is an automatic code formatter to make your code look \"pretty\". However, it is not just that your code is made pretty, it formats your code into a popular standard that has become well established in the JavaScript community. Other developers, whether trainees, mentors or, later, your colleagues will thank you for using it.\n\n\u003e Ensure that you do not install any other code formatter extensions, for example, **Beautify**, in addition to Prettier. This may cause formatting conflicts.\n\n### ESLint VSCode Extension\n\nAnother recommended extension is we have included is **ESLint**. This tool will check your code for _coding style_ errors. Style errors will not necessarily prevent your code from running correctly. However, they indicate that your code does not conform to a preferred coding style. For instance, if you define a variable using the `let` keyword and you do not reassign that variable elsewhere in your code then ESLint will warn you to replace `let` with `const`. In Figure 4 below you can see that the variable name `myName` has a squiggly colored underline. If you hover your mouse over the variable a pop-up window will appear.\n\n![ESLint warnings](./assets/eslint-warning.png)\n\u003cbr\u003eFigure 4. ESLint warnings\n\nYou can also inspect the **Problems** pane or the left hand size of the VSCode status bar to see whether any problems have been detected, as shown in Figure 5.\n\n![Problems](./assets/problems.png)\n\u003cbr\u003eFigure 5. VSCode Problems Pane\n\n### Code Spell Checker\n\nA further extension that we have included is a spell checker that understands code. It particularly understands that variable, property and function names are often multi-word names that use **camelCase**, **PascalCase**, **snake_case** or **kebab-case**. When it checks for spelling errors it knows how to break up these multi-word names before checking the broken down words against its dictionary. Spelling mistakes are indicated by squiggly underlines and also reported in the Problems pane.\n\n\u003e Take pride in the correct spelling in your code. It is a sign of professionalism!\n\n## Running the exercises\n\nWhile working on the exercises you can test-run your code in the usual way, either using the command line (for node-based programs) or by running it in the browser (for browser-based applications). As mentioned earlier, in the **JavaScript** module you will be working with Node-based programs.\n\nTo run the exercise while in VSCode, first open a VSCode **Integrated Terminal**. You can do so from the VSCode menu, by selecting the **Terminal**, **New Terminal** menu commands, or by using the keyboard shortcut as listed in that menu.\n\n\u003e Tip: for an overview of the keyboard shortcuts available in VSCode, select the **Help**, **Keyboard Shortcut Reference** menu commands. This will open a PDF file in the standard browser, listing all available shortcuts.\n\nThe most convenient way to run an exercise from the command line is to use the **exercise runner** included in this repository. Type the following command to run an exercise this way:\n\n```text\nnpm start\n```\n\nThis will lead you through a series of prompts, similar to as shown below, to select the exercise to run:\n\n```text\n? Which module? 1-Javascript\n? Which week? Week3\n? Which exercise? ex1-giveCompliment\nRunning exercise, please wait...\nYou are exciting, HackYourFuture!\nYou are marvelous, HackYourFuture!\nYou are awesome, HackYourFuture!\n```\n\nFor Node-based programs the console output will be shown in the terminal window. For browser-based application an HTTP server will be started and your web page will opened in the default web browser.\n\nAlternatively you may choose to run the exercise manually. The easiest way for a Node-based program is to open a new terminal window directly in the folder that contains your exercise, to right-click its name in the File Explorer pane and select the **Open in Integrated Terminal** option from the context menu, as shown in Figure 6 below.\n\n![Open in Integrated Terminal](./assets/open-in-terminal.png)\n\u003cbr\u003eFigure 6. Open in Integrated Terminal\n\nThis will open a terminal window at the bottom of the screen, as show in Figure 7 below (using **PowerShell** in Windows or **bash** or **zsh** in MacOS or Linux):\n\n![Terminal Window](./assets/terminal-window.png)\n\u003cbr\u003eFigure 7. Terminal Window\n\nBecause we used the context menu in the VSCode File Explorer, the current directory in the terminal window is already the `assignment` folder containing the exercise. We can execute our program (in this example `ex1-giveCompliment.js`) by typing `node`, followed by a space and then enough characters to uniquely identify the file. Then press the **Tab** key to _expand_ the file name. Because the names of all exercises start with `ex𝑛`, where 𝑛 is a number, it is enough to type just that and press the **Tab** key:\n\n```text\nnode ex1- (press TAB)\n```\n\nThis will run the code and any `console.log` statement will print in the terminal window. The unmodified code example will just print:\n\n```text\n❯ node .\\ex1-giveCompliment.js\nundefined\nundefined\nundefined\n```\n\nIt is now up to you to complete the code so that it, perhaps, produces something like:\n\n```text\n❯ node .\\ex1-giveCompliment.js\nYou are lovely, HackYourFuture!\nYou are great, HackYourFuture!\nYou are awesome, HackYourFuture!\n```\n\nOnce you are satisfied with the results it is time to use the **test runner**, as described next.\n\n\u003e IMPORTANT: it is not recommended to use the test-runner if your code still crashes when run directly. This will just crash the test runner too. You should at least have some running code before trying it with the test runner.\n\n### Automated testing\n\nThe repository includes an automated test facility. It serves two purposes.\n\n1. It allows you to test yourself whether your finished exercise meets some important requirements of the assignment. Consider this a form of _early feedback_. Your assignment will also be reviewed by a mentor for more thorough feedback later but that make take a while to complete.\n\n2. It allows mentors to gain a quick insight on some key quality benchmarks, giving them a head start in the review process.\n\n\u003e The tests that we have provided here cannot possibly test conformance to every detail of the exercise assignments. Therefore running a successful test is just a first indication of success. Ultimately, it will be the mentor reviewing your assignment to give the final verdict.\n\n### Running a test\n\nEach time you have made changes to an exercise you need to test your changes.\n\nTo run a test, type the following command from the command line:\n\n```text\nnpm test\n```\n\nThe test runner examines the exercise files in your repository and if it finds one or more modified exercises it will prompt you whether you want to test the first one. For example:\n\n```text\n? Test modified exercise (1-JavaScript, Week2, ex1-giveCompliment)? (Y/n)\n```\n\nIf that is what you want, accept the default by just pressing \u003ckbd\u003eEnter\u003c/kbd\u003e to run the test. Otherwise enter `n` and press \u003ckbd\u003eEnter\u003c/kbd\u003e to let the test runner present you a menu from which to select an exercise to test.\n\n```text\n? Which module? 1-JavaScript\n? Which week? Week2\n? Which exercise? ex1-giveCompliment\n```\n\nOnce an exercise has been selected the test runner will execute the test, as illustrated in the example of Figure 8 below:\n\n```text\nRunning test, please wait...\n\n*** Unit Test Error Report ***\n\nCommand failed: npx jest H:/dev/hackyourfuture/Assignments/.dist/1-JavaScript/Week2/unit-tests/ex1-giveCompliment.test.js --colors --noStackTrace --json\n FAIL  .dist/1-JavaScript/Week2/unit-tests/ex1-giveCompliment.test.js\n  js-wk2-ex1-giveCompliment\n    ✅ should exist and be executable (2 ms)\n    ❌ should have all TODO comments removed (1 ms)\n    ✅ `giveCompliment` should not contain unneeded console.log calls\n    ❌ should take a single parameter (1 ms)\n    ✅ should include a `compliments` array inside its function body\n    ❌ the `compliments` array should be initialized with 10 strings (1 ms)\n    ❌ should give a random compliment: You are `compliment`, `name`! (2 ms)\n\n  ● js-wk2-ex1-giveCompliment › should have all TODO comments removed\n\n    expect(received).toBeFalsy()\n\n    Received: true\n\n  ● js-wk2-ex1-giveCompliment › should take a single parameter\n\n    expect(received).toHaveLength(expected)\n\n    Expected length:   1\n    Received length:   0\n    Received function: [Function giveCompliment]\n\n  ● js-wk2-ex1-giveCompliment › the `compliments` array should be initialized with 10 strings\n\n    expect(received).toHaveLength(expected)\n\n    Expected length: 10\n    Received length: 0\n    Received array:  []\n\n  ● js-wk2-ex1-giveCompliment › should give a random compliment: You are `compliment`, `name`!\n\n    expect(received).toBe(expected) // Object.is equality\n\n    Expected: \"\"\n    Received: \"compliment is not randomly selected\"\n\nTest Suites: 1 failed, 1 total\nTests:       4 failed, 3 passed, 7 total\nSnapshots:   0 total\nTime:        1.582 s\nRan all test suites matching /H:\\\\dev\\\\hackyourfuture\\\\Assignments\\\\.dist\\\\1-JavaScript\\\\Week2\\\\unit-tests\\\\ex1-giveCompliment.test.js/i.\nNo linting errors detected.\nNo spelling errors detected.\n```\n\nFigure 8. Running a test.\n\n#### Unit Test Error Report\n\nUnit tests are software tests that determine whether a particular part of your code produces an expected result. If is it does, it is said to _pass_ the test. If it doesn't, the failing test will be reported in the console.\n\nIn Figure 8 the test results are shown for the still unmodified version of `ex1-giveCompliment`. There are 4 such failing unit tests (marked with `x`). The messages are hopefully sufficiently informative for you to correct the error(s).\n\nOnce you have corrected the error(s), rerun the test to try again.\n\n#### ESLint Report\n\nThese are not programming errors but _coding style_ errors. For instance, the unmodified exercise `ex3-tellFortune.js` produces this ESLint error:\n\n```text\nex3-tellFortune.js\n  46:10  error  'selectRandomly' is defined but never used  no-unused-vars\n```\n\nIn this example the error message indicates that a style error was detect in line 46, column 10 of the file `ex3-tellFortune.js`. The variable (or function) `selectRandomly` was defined but never used.\n\nStyle errors do not prevent your code from running correctly. However, leaving them in is simply a bad practice and is a recipe for trouble in the future when other developers attempt to understand and maintain your code.\n\n#### Spell Checker Report\n\nLeaving spelling errors in your code is just plain embarrassing, especially so when there are tools to check for them. Always correct spelling errors, or, if you know the spelling to be correct, add the word to the _workspace dictionary_ in VSCode so that it is not reported again.\n\nIf there are no unit-test, style and/or spelling errors then all is well and you should see:\n\n```text\nAll unit tests passed.\nNo linting errors detected.\nNo spelling errors detected.\n```\n\n### Test Reports\n\nWhen you run a test the results are reported to the console, but also written to a report file in the `test-reports` folder for the assignments of current week and a test summary in the `.test-results` folder.\n\nYou should include the test report files in the pull request that you will make to submit your assignments. This will enable reviewers to get a quick overview of your progress, without the need to run the tests again themselves.\n\n\u003e **IMPORTANT: You are expected to run all the tests for the current week before submitting a pull request.**\n\u003e\n\u003e You should strive to complete all tests with no errors reported, however it is okay if for some reason you were unable to fix some error and need your mentor to help during review. Nevertheless, you _**are**_ required to run the tests, whether successful or not.\n\n## Assignment Exercise Instructions\n\n### JavaScript Module\n\n- [Week 3](/1-JavaScript/Week3/README.md)\n- [Week 4](/1-JavaScript/Week4/README.md)\n\n### Browsers Module\n\n- [Week 1](/2-Browsers/Week1/README.md)\n\n### UsingAPIs Module\n\n- [Week 1](/3-UsingAPIs/Week1/README.md)\n- [Week 2](/3-UsingAPIs/Week2/README.md)\n\n## Information for mentors\n\nMore information about the review process:\n\n- [Review Guide](https://github.com/HackYourFuture/mentors/blob/main/assignment-support/review-guide.md)\n\nHere you will find some documentation how to write exercises and unit tests.\n\n- [Test Runner](/test-runner/README.md)\n\n## Copyright\n\n_The HackYourFuture curriculum is subject to CC BY copyright. This means you can freely use our materials, but just make sure to give us credit for it_ :).\n\n\u003ca rel=\"license\" href=\"http://creativecommons.org/licenses/by/4.0/\"\u003e\u003cimg alt=\"Creative Commons License\" style=\"border-width:0\" src=\"https://i.creativecommons.org/l/by/4.0/88x31.png\" /\u003e\u003c/a\u003e\u003cbr /\u003eThis work is licensed under a \u003ca rel=\"license\" href=\"http://creativecommons.org/licenses/by/4.0/\"\u003eCreative Commons Attribution 4.0 International License\u003c/a\u003e.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhackyourfuture%2Fassignments","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhackyourfuture%2Fassignments","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhackyourfuture%2Fassignments/lists"}