BranchesTags

Repository files navigation

JavaScript Exercises

These JavaScript exercises are intended to complement the JavaScript content on The Odin Project (TOP). They should only be done when instructed during the course of the curriculum.

Contributing

If you have a suggestion to improve an exercise, an idea for a new exercise, or notice an issue with an exercise, please feel free to open an issue after thoroughly reading our contributing guide.

How To Use These Exercises

  1. Fork and clone this repository. To learn how to fork a repository, see the GitHub documentation on how to fork a repo.

    • Copies of repositories on your machine are called clones. If you need help cloning to your local environment you can learn how from the GitHub documentation on cloning a repository.

  2. Before you start working on any exercises, you should first ensure you have the following installed:

    • NPM. You should have installed NPM already in our Installing Node.js lesson. Just in case you need to check, type npm --version in your terminal. If you get back Command 'npm' not found, but can be installed with:, do not follow the instructions in the terminal to install with apt-get as this causes permission issues. Instead, go back to the installation lesson and install Node with NVM by following the instructions there.
    • Jest. After cloning this repository to your local machine and installing NPM, go into the newly created directory (cd javascript-exercises) and run npm install. This will install Jest and set up the testing platform based on our preconfigured settings. (Note: if you get warnings that packages are out of date or contain vulnerabilities, you can safely ignore them for these exercises.)

  3. Each exercise includes the following:

    • A markdown file with a description of the task, an empty (or mostly empty) JavaScript file, and a set of tests.
    • A solutions directory that contains a solution and the same test file with all of the tests unskipped.

    To complete an exercise, you will need to go to the exercise directory with cd exerciseName in the terminal and run npm test exerciseName.spec.js. This should run the test file and show you the output. When you run a test for the first time, it will fail. This is by design! You must open the exercise file and write the code needed to get the test to pass.

  4. Some of the exercises have test conditions defined in their spec file as test.skip instead of test. This is intentional. Once all tests pass, you will change the next test.skip to test and test your code again. You will do this until all conditions are satisfied. All tests must pass at the same time, and you should not have any instances of test.skip in the spec file when you are finished with an exercise.

  5. Once you successfully finish an exercise, check the solutions directory within each exercise to compare it with yours.

    • You should not be checking the solution for an exercise until you finish it!
    • If your solution differs wildly from TOP's solution (and still passes the exercise's requirements), that is completely fine. Feel free to ask about it in our Discord if there are parts you do not understand.

Important

Do not submit your solutions to this repo, as any PRs that do so will be closed without merging.

Note

Due to the way Jest handles failed tests, it may return an exit code of 1 if any tests fail. NPM will interpret this as an error and you may see some npm ERR! messages after Jest runs. You can ignore these, or run your test with npm test exerciseName.spec.js --silent to supress the errors.

The first exercise, helloWorld, will walk you through the process in-depth.

Debugging

To debug functions, you can run the tests in the Visual Studio Code debugger terminal. You can open this by clicking the "Run and Debug" icon on the left or pressing Ctrl + Shift + D, then clicking JavaScript Debug Terminal. You will be able to set breakpoints as you would in the Chrome DevTools debugger. You can run npm test exerciseName.spec.js to then execute your code up until your breakpoint and step through your code as necessary. NOTE: To take advantage of the debugger, you MUST run the script in the debugger terminal, not the bash or zsh terminal.

Adding a new exercise

To add a new exercise:

  1. Be sure to run npm install at the root of the javascript-exercises directory.
  2. Run the command npm run generate.
  3. When prompted, enter the name of the new exercise in "camelCase" syntax.

After entering an exercise name, a new directory with the necessary files will be created. You will then need to update the README.md and spec.js files as well as the files in the solution directory of the new exercise.

About

No description, website, or topics provided.

Resources

Readme
License
Activity
Custom properties

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
JavaScript Exercises
These JavaScript exercises are intended to complement the JavaScript content on The Odin Project (TOP). They should only be done when instructed during the course of the curriculum.
Contributing
If you have a suggestion to improve an exercise, an idea for a new exercise, or notice an issue with an exercise, please feel free to open an issue after thoroughly reading our contributing guide.
How To Use These Exercises
  1. Fork and clone this repository. To learn how to fork a repository, see the GitHub documentation on how to fork a repo.
    • Copies of repositories on your machine are called clones. If you need help cloning to your local environment you can learn how from the GitHub documentation on cloning a repository.
  2. Before you start working on any exercises, you should first ensure you have the following installed:
    • NPM. You should have installed NPM already in our Installing Node.js lesson. Just in case you need to check, type npm --version in your terminal. If you get back Command 'npm' not found, but can be installed with:, do not follow the instructions in the terminal to install with apt-get as this causes permission issues. Instead, go back to the installation lesson and install Node with NVM by following the instructions there.
    • Jest. After cloning this repository to your local machine and installing NPM, go into the newly created directory (cd javascript-exercises) and run npm install. This will install Jest and set up the testing platform based on our preconfigured settings. (Note: if you get warnings that packages are out of date or contain vulnerabilities, you can safely ignore them for these exercises.)
  3. Each exercise includes the following:
    • A markdown file with a description of the task, an empty (or mostly empty) JavaScript file, and a set of tests.
    • A solutions directory that contains a solution and the same test file with all of the tests unskipped.
    To complete an exercise, you will need to go to the exercise directory with cd exerciseName in the terminal and run npm test exerciseName.spec.js. This should run the test file and show you the output. When you run a test for the first time, it will fail. This is by design! You must open the exercise file and write the code needed to get the test to pass.
  4. Some of the exercises have test conditions defined in their spec file as test.skip instead of test. This is intentional. Once all tests pass, you will change the next test.skip to test and test your code again. You will do this until all conditions are satisfied. All tests must pass at the same time, and you should not have any instances of test.skip in the spec file when you are finished with an exercise.
  5. Once you successfully finish an exercise, check the solutions directory within each exercise to compare it with yours.
    • You should not be checking the solution for an exercise until you finish it!
    • If your solution differs wildly from TOP's solution (and still passes the exercise's requirements), that is completely fine. Feel free to ask about it in our Discord if there are parts you do not understand.
Important
Do not submit your solutions to this repo, as any PRs that do so will be closed without merging.
Note
Due to the way Jest handles failed tests, it may return an exit code of 1 if any tests fail. NPM will interpret this as an error and you may see some npm ERR! messages after Jest runs. You can ignore these, or run your test with npm test exerciseName.spec.js --silent to supress the errors.
The first exercise, helloWorld, will walk you through the process in-depth.
Debugging
To debug functions, you can run the tests in the Visual Studio Code debugger terminal. You can open this by clicking the "Run and Debug" icon on the left or pressing Ctrl + Shift + D, then clicking JavaScript Debug Terminal. You will be able to set breakpoints as you would in the Chrome DevTools debugger. You can run npm test exerciseName.spec.js to then execute your code up until your breakpoint and step through your code as necessary. NOTE: To take advantage of the debugger, you MUST run the script in the debugger terminal, not the bash or zsh terminal.
Adding a new exercise
To add a new exercise:
  1. Be sure to run npm install at the root of the javascript-exercises directory.
  2. Run the command npm run generate.
  3. When prompted, enter the name of the new exercise in "camelCase" syntax.
After entering an exercise name, a new directory with the necessary files will be created. You will then need to update the README.md and spec.js files as well as the files in the solution directory of the new exercise.
About
No description, website, or topics provided.
Resources
Readme
License
Activity
Custom properties
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
JavaScript Exercises
These JavaScript exercises are intended to complement the JavaScript content on The Odin Project (TOP). They should only be done when instructed during the course of the curriculum.
Contributing
If you have a suggestion to improve an exercise, an idea for a new exercise, or notice an issue with an exercise, please feel free to open an issue after thoroughly reading our contributing guide.
How To Use These Exercises
  1. Fork and clone this repository. To learn how to fork a repository, see the GitHub documentation on how to fork a repo.
    • Copies of repositories on your machine are called clones. If you need help cloning to your local environment you can learn how from the GitHub documentation on cloning a repository.
  2. Before you start working on any exercises, you should first ensure you have the following installed:
    • NPM. You should have installed NPM already in our Installing Node.js lesson. Just in case you need to check, type npm --version in your terminal. If you get back Command 'npm' not found, but can be installed with:, do not follow the instructions in the terminal to install with apt-get as this causes permission issues. Instead, go back to the installation lesson and install Node with NVM by following the instructions there.
    • Jest. After cloning this repository to your local machine and installing NPM, go into the newly created directory (cd javascript-exercises) and run npm install. This will install Jest and set up the testing platform based on our preconfigured settings. (Note: if you get warnings that packages are out of date or contain vulnerabilities, you can safely ignore them for these exercises.)
  3. Each exercise includes the following:
    • A markdown file with a description of the task, an empty (or mostly empty) JavaScript file, and a set of tests.
    • A solutions directory that contains a solution and the same test file with all of the tests unskipped.
    To complete an exercise, you will need to go to the exercise directory with cd exerciseName in the terminal and run npm test exerciseName.spec.js. This should run the test file and show you the output. When you run a test for the first time, it will fail. This is by design! You must open the exercise file and write the code needed to get the test to pass.
  4. Some of the exercises have test conditions defined in their spec file as test.skip instead of test. This is intentional. Once all tests pass, you will change the next test.skip to test and test your code again. You will do this until all conditions are satisfied. All tests must pass at the same time, and you should not have any instances of test.skip in the spec file when you are finished with an exercise.
  5. Once you successfully finish an exercise, check the solutions directory within each exercise to compare it with yours.
    • You should not be checking the solution for an exercise until you finish it!
    • If your solution differs wildly from TOP's solution (and still passes the exercise's requirements), that is completely fine. Feel free to ask about it in our Discord if there are parts you do not understand.
Important
Do not submit your solutions to this repo, as any PRs that do so will be closed without merging.
Note
Due to the way Jest handles failed tests, it may return an exit code of 1 if any tests fail. NPM will interpret this as an error and you may see some npm ERR! messages after Jest runs. You can ignore these, or run your test with npm test exerciseName.spec.js --silent to supress the errors.
The first exercise, helloWorld, will walk you through the process in-depth.
Debugging
To debug functions, you can run the tests in the Visual Studio Code debugger terminal. You can open this by clicking the "Run and Debug" icon on the left or pressing Ctrl + Shift + D, then clicking JavaScript Debug Terminal. You will be able to set breakpoints as you would in the Chrome DevTools debugger. You can run npm test exerciseName.spec.js to then execute your code up until your breakpoint and step through your code as necessary. NOTE: To take advantage of the debugger, you MUST run the script in the debugger terminal, not the bash or zsh terminal.
Adding a new exercise
To add a new exercise:
  1. Be sure to run npm install at the root of the javascript-exercises directory.
  2. Run the command npm run generate.
  3. When prompted, enter the name of the new exercise in "camelCase" syntax.
After entering an exercise name, a new directory with the necessary files will be created. You will then need to update the README.md and spec.js files as well as the files in the solution directory of the new exercise.
About
No description, website, or topics provided.
Resources
Readme
License
Activity
Custom properties
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
JavaScript Exercises
These JavaScript exercises are intended to complement the JavaScript content on The Odin Project (TOP). They should only be done when instructed during the course of the curriculum.
Contributing
If you have a suggestion to improve an exercise, an idea for a new exercise, or notice an issue with an exercise, please feel free to open an issue after thoroughly reading our contributing guide.
How To Use These Exercises
  1. Fork and clone this repository. To learn how to fork a repository, see the GitHub documentation on how to fork a repo.
    • Copies of repositories on your machine are called clones. If you need help cloning to your local environment you can learn how from the GitHub documentation on cloning a repository.
  2. Before you start working on any exercises, you should first ensure you have the following installed:
    • NPM. You should have installed NPM already in our Installing Node.js lesson. Just in case you need to check, type npm --version in your terminal. If you get back Command 'npm' not found, but can be installed with:, do not follow the instructions in the terminal to install with apt-get as this causes permission issues. Instead, go back to the installation lesson and install Node with NVM by following the instructions there.
    • Jest. After cloning this repository to your local machine and installing NPM, go into the newly created directory (cd javascript-exercises) and run npm install. This will install Jest and set up the testing platform based on our preconfigured settings. (Note: if you get warnings that packages are out of date or contain vulnerabilities, you can safely ignore them for these exercises.)
  3. Each exercise includes the following:
    • A markdown file with a description of the task, an empty (or mostly empty) JavaScript file, and a set of tests.
    • A solutions directory that contains a solution and the same test file with all of the tests unskipped.
    To complete an exercise, you will need to go to the exercise directory with cd exerciseName in the terminal and run npm test exerciseName.spec.js. This should run the test file and show you the output. When you run a test for the first time, it will fail. This is by design! You must open the exercise file and write the code needed to get the test to pass.
  4. Some of the exercises have test conditions defined in their spec file as test.skip instead of test. This is intentional. Once all tests pass, you will change the next test.skip to test and test your code again. You will do this until all conditions are satisfied. All tests must pass at the same time, and you should not have any instances of test.skip in the spec file when you are finished with an exercise.
  5. Once you successfully finish an exercise, check the solutions directory within each exercise to compare it with yours.
    • You should not be checking the solution for an exercise until you finish it!
    • If your solution differs wildly from TOP's solution (and still passes the exercise's requirements), that is completely fine. Feel free to ask about it in our Discord if there are parts you do not understand.
Important
Do not submit your solutions to this repo, as any PRs that do so will be closed without merging.
Note
Due to the way Jest handles failed tests, it may return an exit code of 1 if any tests fail. NPM will interpret this as an error and you may see some npm ERR! messages after Jest runs. You can ignore these, or run your test with npm test exerciseName.spec.js --silent to supress the errors.
The first exercise, helloWorld, will walk you through the process in-depth.
Debugging
To debug functions, you can run the tests in the Visual Studio Code debugger terminal. You can open this by clicking the "Run and Debug" icon on the left or pressing Ctrl + Shift + D, then clicking JavaScript Debug Terminal. You will be able to set breakpoints as you would in the Chrome DevTools debugger. You can run npm test exerciseName.spec.js to then execute your code up until your breakpoint and step through your code as necessary. NOTE: To take advantage of the debugger, you MUST run the script in the debugger terminal, not the bash or zsh terminal.
Adding a new exercise
To add a new exercise:
  1. Be sure to run npm install at the root of the javascript-exercises directory.
  2. Run the command npm run generate.
  3. When prompted, enter the name of the new exercise in "camelCase" syntax.
After entering an exercise name, a new directory with the necessary files will be created. You will then need to update the README.md and spec.js files as well as the files in the solution directory of the new exercise.
About
No description, website, or topics provided.
Resources
Readme
License
Activity
Custom properties
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
JavaScript Exercises
These JavaScript exercises are intended to complement the JavaScript content on The Odin Project (TOP). They should only be done when instructed during the course of the curriculum.
Contributing
If you have a suggestion to improve an exercise, an idea for a new exercise, or notice an issue with an exercise, please feel free to open an issue after thoroughly reading our contributing guide.
How To Use These Exercises
  1. Fork and clone this repository. To learn how to fork a repository, see the GitHub documentation on how to fork a repo.
    • Copies of repositories on your machine are called clones. If you need help cloning to your local environment you can learn how from the GitHub documentation on cloning a repository.
  2. Before you start working on any exercises, you should first ensure you have the following installed:
    • NPM. You should have installed NPM already in our Installing Node.js lesson. Just in case you need to check, type npm --version in your terminal. If you get back Command 'npm' not found, but can be installed with:, do not follow the instructions in the terminal to install with apt-get as this causes permission issues. Instead, go back to the installation lesson and install Node with NVM by following the instructions there.
    • Jest. After cloning this repository to your local machine and installing NPM, go into the newly created directory (cd javascript-exercises) and run npm install. This will install Jest and set up the testing platform based on our preconfigured settings. (Note: if you get warnings that packages are out of date or contain vulnerabilities, you can safely ignore them for these exercises.)
  3. Each exercise includes the following:
    • A markdown file with a description of the task, an empty (or mostly empty) JavaScript file, and a set of tests.
    • A solutions directory that contains a solution and the same test file with all of the tests unskipped.
    To complete an exercise, you will need to go to the exercise directory with cd exerciseName in the terminal and run npm test exerciseName.spec.js. This should run the test file and show you the output. When you run a test for the first time, it will fail. This is by design! You must open the exercise file and write the code needed to get the test to pass.
  4. Some of the exercises have test conditions defined in their spec file as test.skip instead of test. This is intentional. Once all tests pass, you will change the next test.skip to test and test your code again. You will do this until all conditions are satisfied. All tests must pass at the same time, and you should not have any instances of test.skip in the spec file when you are finished with an exercise.
  5. Once you successfully finish an exercise, check the solutions directory within each exercise to compare it with yours.
    • You should not be checking the solution for an exercise until you finish it!
    • If your solution differs wildly from TOP's solution (and still passes the exercise's requirements), that is completely fine. Feel free to ask about it in our Discord if there are parts you do not understand.
Important
Do not submit your solutions to this repo, as any PRs that do so will be closed without merging.
Note
Due to the way Jest handles failed tests, it may return an exit code of 1 if any tests fail. NPM will interpret this as an error and you may see some npm ERR! messages after Jest runs. You can ignore these, or run your test with npm test exerciseName.spec.js --silent to supress the errors.
The first exercise, helloWorld, will walk you through the process in-depth.
Debugging
To debug functions, you can run the tests in the Visual Studio Code debugger terminal. You can open this by clicking the "Run and Debug" icon on the left or pressing Ctrl + Shift + D, then clicking JavaScript Debug Terminal. You will be able to set breakpoints as you would in the Chrome DevTools debugger. You can run npm test exerciseName.spec.js to then execute your code up until your breakpoint and step through your code as necessary. NOTE: To take advantage of the debugger, you MUST run the script in the debugger terminal, not the bash or zsh terminal.
Adding a new exercise
To add a new exercise:
  1. Be sure to run npm install at the root of the javascript-exercises directory.
  2. Run the command npm run generate.
  3. When prompted, enter the name of the new exercise in "camelCase" syntax.
After entering an exercise name, a new directory with the necessary files will be created. You will then need to update the README.md and spec.js files as well as the files in the solution directory of the new exercise.
About
No description, website, or topics provided.
Resources
Readme
License
Activity
Custom properties
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
JavaScript Exercises
These JavaScript exercises are intended to complement the JavaScript content on The Odin Project (TOP). They should only be done when instructed during the course of the curriculum.
Contributing
If you have a suggestion to improve an exercise, an idea for a new exercise, or notice an issue with an exercise, please feel free to open an issue after thoroughly reading our contributing guide.
How To Use These Exercises
  1. Fork and clone this repository. To learn how to fork a repository, see the GitHub documentation on how to fork a repo.
    • Copies of repositories on your machine are called clones. If you need help cloning to your local environment you can learn how from the GitHub documentation on cloning a repository.
  2. Before you start working on any exercises, you should first ensure you have the following installed:
    • NPM. You should have installed NPM already in our Installing Node.js lesson. Just in case you need to check, type npm --version in your terminal. If you get back Command 'npm' not found, but can be installed with:, do not follow the instructions in the terminal to install with apt-get as this causes permission issues. Instead, go back to the installation lesson and install Node with NVM by following the instructions there.
    • Jest. After cloning this repository to your local machine and installing NPM, go into the newly created directory (cd javascript-exercises) and run npm install. This will install Jest and set up the testing platform based on our preconfigured settings. (Note: if you get warnings that packages are out of date or contain vulnerabilities, you can safely ignore them for these exercises.)
  3. Each exercise includes the following:
    • A markdown file with a description of the task, an empty (or mostly empty) JavaScript file, and a set of tests.
    • A solutions directory that contains a solution and the same test file with all of the tests unskipped.
    To complete an exercise, you will need to go to the exercise directory with cd exerciseName in the terminal and run npm test exerciseName.spec.js. This should run the test file and show you the output. When you run a test for the first time, it will fail. This is by design! You must open the exercise file and write the code needed to get the test to pass.
  4. Some of the exercises have test conditions defined in their spec file as test.skip instead of test. This is intentional. Once all tests pass, you will change the next test.skip to test and test your code again. You will do this until all conditions are satisfied. All tests must pass at the same time, and you should not have any instances of test.skip in the spec file when you are finished with an exercise.
  5. Once you successfully finish an exercise, check the solutions directory within each exercise to compare it with yours.
    • You should not be checking the solution for an exercise until you finish it!
    • If your solution differs wildly from TOP's solution (and still passes the exercise's requirements), that is completely fine. Feel free to ask about it in our Discord if there are parts you do not understand.
Important
Do not submit your solutions to this repo, as any PRs that do so will be closed without merging.
Note
Due to the way Jest handles failed tests, it may return an exit code of 1 if any tests fail. NPM will interpret this as an error and you may see some npm ERR! messages after Jest runs. You can ignore these, or run your test with npm test exerciseName.spec.js --silent to supress the errors.
The first exercise, helloWorld, will walk you through the process in-depth.
Debugging
To debug functions, you can run the tests in the Visual Studio Code debugger terminal. You can open this by clicking the "Run and Debug" icon on the left or pressing Ctrl + Shift + D, then clicking JavaScript Debug Terminal. You will be able to set breakpoints as you would in the Chrome DevTools debugger. You can run npm test exerciseName.spec.js to then execute your code up until your breakpoint and step through your code as necessary. NOTE: To take advantage of the debugger, you MUST run the script in the debugger terminal, not the bash or zsh terminal.
Adding a new exercise
To add a new exercise:
  1. Be sure to run npm install at the root of the javascript-exercises directory.
  2. Run the command npm run generate.
  3. When prompted, enter the name of the new exercise in "camelCase" syntax.
After entering an exercise name, a new directory with the necessary files will be created. You will then need to update the README.md and spec.js files as well as the files in the solution directory of the new exercise.
About
No description, website, or topics provided.
Resources
Readme
License
Activity
Custom properties
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
JavaScript Exercises
These JavaScript exercises are intended to complement the JavaScript content on The Odin Project (TOP). They should only be done when instructed during the course of the curriculum.
Contributing
If you have a suggestion to improve an exercise, an idea for a new exercise, or notice an issue with an exercise, please feel free to open an issue after thoroughly reading our contributing guide.
How To Use These Exercises
  1. Fork and clone this repository. To learn how to fork a repository, see the GitHub documentation on how to fork a repo.
    • Copies of repositories on your machine are called clones. If you need help cloning to your local environment you can learn how from the GitHub documentation on cloning a repository.
  2. Before you start working on any exercises, you should first ensure you have the following installed:
    • NPM. You should have installed NPM already in our Installing Node.js lesson. Just in case you need to check, type npm --version in your terminal. If you get back Command 'npm' not found, but can be installed with:, do not follow the instructions in the terminal to install with apt-get as this causes permission issues. Instead, go back to the installation lesson and install Node with NVM by following the instructions there.
    • Jest. After cloning this repository to your local machine and installing NPM, go into the newly created directory (cd javascript-exercises) and run npm install. This will install Jest and set up the testing platform based on our preconfigured settings. (Note: if you get warnings that packages are out of date or contain vulnerabilities, you can safely ignore them for these exercises.)
  3. Each exercise includes the following:
    • A markdown file with a description of the task, an empty (or mostly empty) JavaScript file, and a set of tests.
    • A solutions directory that contains a solution and the same test file with all of the tests unskipped.
    To complete an exercise, you will need to go to the exercise directory with cd exerciseName in the terminal and run npm test exerciseName.spec.js. This should run the test file and show you the output. When you run a test for the first time, it will fail. This is by design! You must open the exercise file and write the code needed to get the test to pass.
  4. Some of the exercises have test conditions defined in their spec file as test.skip instead of test. This is intentional. Once all tests pass, you will change the next test.skip to test and test your code again. You will do this until all conditions are satisfied. All tests must pass at the same time, and you should not have any instances of test.skip in the spec file when you are finished with an exercise.
  5. Once you successfully finish an exercise, check the solutions directory within each exercise to compare it with yours.
    • You should not be checking the solution for an exercise until you finish it!
    • If your solution differs wildly from TOP's solution (and still passes the exercise's requirements), that is completely fine. Feel free to ask about it in our Discord if there are parts you do not understand.
Important
Do not submit your solutions to this repo, as any PRs that do so will be closed without merging.
Note
Due to the way Jest handles failed tests, it may return an exit code of 1 if any tests fail. NPM will interpret this as an error and you may see some npm ERR! messages after Jest runs. You can ignore these, or run your test with npm test exerciseName.spec.js --silent to supress the errors.
The first exercise, helloWorld, will walk you through the process in-depth.
Debugging
To debug functions, you can run the tests in the Visual Studio Code debugger terminal. You can open this by clicking the "Run and Debug" icon on the left or pressing Ctrl + Shift + D, then clicking JavaScript Debug Terminal. You will be able to set breakpoints as you would in the Chrome DevTools debugger. You can run npm test exerciseName.spec.js to then execute your code up until your breakpoint and step through your code as necessary. NOTE: To take advantage of the debugger, you MUST run the script in the debugger terminal, not the bash or zsh terminal.
Adding a new exercise
To add a new exercise:
  1. Be sure to run npm install at the root of the javascript-exercises directory.
  2. Run the command npm run generate.
  3. When prompted, enter the name of the new exercise in "camelCase" syntax.
After entering an exercise name, a new directory with the necessary files will be created. You will then need to update the README.md and spec.js files as well as the files in the solution directory of the new exercise.
About
No description, website, or topics provided.
Resources
Readme
License
Activity
Custom properties
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
JavaScript Exercises
These JavaScript exercises are intended to complement the JavaScript content on The Odin Project (TOP). They should only be done when instructed during the course of the curriculum.
Contributing
If you have a suggestion to improve an exercise, an idea for a new exercise, or notice an issue with an exercise, please feel free to open an issue after thoroughly reading our contributing guide.
How To Use These Exercises
  1. Fork and clone this repository. To learn how to fork a repository, see the GitHub documentation on how to fork a repo.
    • Copies of repositories on your machine are called clones. If you need help cloning to your local environment you can learn how from the GitHub documentation on cloning a repository.
  2. Before you start working on any exercises, you should first ensure you have the following installed:
    • NPM. You should have installed NPM already in our Installing Node.js lesson. Just in case you need to check, type npm --version in your terminal. If you get back Command 'npm' not found, but can be installed with:, do not follow the instructions in the terminal to install with apt-get as this causes permission issues. Instead, go back to the installation lesson and install Node with NVM by following the instructions there.
    • Jest. After cloning this repository to your local machine and installing NPM, go into the newly created directory (cd javascript-exercises) and run npm install. This will install Jest and set up the testing platform based on our preconfigured settings. (Note: if you get warnings that packages are out of date or contain vulnerabilities, you can safely ignore them for these exercises.)
  3. Each exercise includes the following:
    • A markdown file with a description of the task, an empty (or mostly empty) JavaScript file, and a set of tests.
    • A solutions directory that contains a solution and the same test file with all of the tests unskipped.
    To complete an exercise, you will need to go to the exercise directory with cd exerciseName in the terminal and run npm test exerciseName.spec.js. This should run the test file and show you the output. When you run a test for the first time, it will fail. This is by design! You must open the exercise file and write the code needed to get the test to pass.
  4. Some of the exercises have test conditions defined in their spec file as test.skip instead of test. This is intentional. Once all tests pass, you will change the next test.skip to test and test your code again. You will do this until all conditions are satisfied. All tests must pass at the same time, and you should not have any instances of test.skip in the spec file when you are finished with an exercise.
  5. Once you successfully finish an exercise, check the solutions directory within each exercise to compare it with yours.
    • You should not be checking the solution for an exercise until you finish it!
    • If your solution differs wildly from TOP's solution (and still passes the exercise's requirements), that is completely fine. Feel free to ask about it in our Discord if there are parts you do not understand.
Important
Do not submit your solutions to this repo, as any PRs that do so will be closed without merging.
Note
Due to the way Jest handles failed tests, it may return an exit code of 1 if any tests fail. NPM will interpret this as an error and you may see some npm ERR! messages after Jest runs. You can ignore these, or run your test with npm test exerciseName.spec.js --silent to supress the errors.
The first exercise, helloWorld, will walk you through the process in-depth.
Debugging
To debug functions, you can run the tests in the Visual Studio Code debugger terminal. You can open this by clicking the "Run and Debug" icon on the left or pressing Ctrl + Shift + D, then clicking JavaScript Debug Terminal. You will be able to set breakpoints as you would in the Chrome DevTools debugger. You can run npm test exerciseName.spec.js to then execute your code up until your breakpoint and step through your code as necessary. NOTE: To take advantage of the debugger, you MUST run the script in the debugger terminal, not the bash or zsh terminal.
Adding a new exercise
To add a new exercise:
  1. Be sure to run npm install at the root of the javascript-exercises directory.
  2. Run the command npm run generate.
  3. When prompted, enter the name of the new exercise in "camelCase" syntax.
After entering an exercise name, a new directory with the necessary files will be created. You will then need to update the README.md and spec.js files as well as the files in the solution directory of the new exercise.
About
No description, website, or topics provided.
Resources
Readme
License
Activity
Custom properties
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages