Showing preview only (292K chars total). Download the full file or copy to clipboard to get everything.
Repository: jadjoubran/codetogo.io
Branch: master
Commit: b6589e60412f
Files: 261
Total size: 235.2 KB
Directory structure:
gitextract_o7rxk2fy/
├── .editorconfig
├── .gitignore
├── CNAME
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── PULL_REQUEST_TEMPLATE.md
├── README.md
├── bootstrap.php
├── build/
│ └── config.gypi
├── composer.json
├── config.php
├── netlify.toml
├── package.json
├── source/
│ ├── 404.html
│ ├── CNAME
│ ├── _assets/
│ │ ├── js/
│ │ │ ├── autocomplete.js
│ │ │ └── main.js
│ │ └── sass/
│ │ ├── about.scss
│ │ ├── all.scss
│ │ ├── autocomplete.scss
│ │ ├── banner.scss
│ │ ├── body.scss
│ │ ├── card.scss
│ │ ├── category.scss
│ │ ├── code.scss
│ │ ├── footer.scss
│ │ ├── landing.scss
│ │ ├── main.scss
│ │ ├── nav.scss
│ │ ├── prism.css
│ │ ├── related.scss
│ │ ├── share.scss
│ │ └── usecase.scss
│ ├── _jsusecases/
│ │ ├── add-class-to-element.md
│ │ ├── add-item-to-array.md
│ │ ├── add-item-to-localstorage.md
│ │ ├── add-item-to-sessionstorage.md
│ │ ├── add-multiple-classes-to-element.md
│ │ ├── add-object-to-localstorage.md
│ │ ├── append-html.md
│ │ ├── apply-function-to-every-array-element.md
│ │ ├── async-await-fetch.md
│ │ ├── async-await.md
│ │ ├── call-a-function-with-arguments.md
│ │ ├── call-a-function.md
│ │ ├── capitalize-first-letter.md
│ │ ├── change-CSS-property.md
│ │ ├── check-if-array-includes-element.md
│ │ ├── check-if-element-has-class.md
│ │ ├── check-if-number-is-even.md
│ │ ├── check-if-number-is-odd.md
│ │ ├── check-if-object-includes-substring.md
│ │ ├── check-if-object-includes-value.md
│ │ ├── check-if-object-is-empty.md
│ │ ├── check-if-string-ends-with-substring.md
│ │ ├── check-if-string-includes-another-string.md
│ │ ├── check-if-string-starts-with-substring.md
│ │ ├── check-if-variable-is-a-string.md
│ │ ├── check-if-variable-is-an-object.md
│ │ ├── clear-interval.md
│ │ ├── clear-timeout.md
│ │ ├── comment.md
│ │ ├── concatenate-arrays.md
│ │ ├── concatenate-objects.md
│ │ ├── convert-JSON-to-string.md
│ │ ├── convert-array-to-comma-separated-string.md
│ │ ├── convert-date-to-mysql-format-YYYY-MM-DD.md
│ │ ├── convert-date-to-timestamp.md
│ │ ├── convert-from-degree-to-radian.md
│ │ ├── convert-string-to-number.md
│ │ ├── copy-text-to-clipboard.md
│ │ ├── create-a-promise.md
│ │ ├── create-a-range-array.md
│ │ ├── create-a-regex.md
│ │ ├── create-a-switch-statement.md
│ │ ├── create-an-object.md
│ │ ├── create-array-from-existing-array.md
│ │ ├── create-date-in-RFC3339-format.md
│ │ ├── create-logical-AND-condition.md
│ │ ├── create-logical-NOT-condition.md
│ │ ├── create-logical-OR-condition.md
│ │ ├── create-object-from-array.md
│ │ ├── create-shallow-copy-of-object.md
│ │ ├── create-string-from-character-code.md
│ │ ├── decode-url.md
│ │ ├── decrement-a-variable.md
│ │ ├── define-a-class.md
│ │ ├── define-a-function-with-default-parameter.md
│ │ ├── define-variable.md
│ │ ├── delete-item-from-array.md
│ │ ├── destructure-from-array.md
│ │ ├── destructure-from-object.md
│ │ ├── destructure-with-default-value.md
│ │ ├── empty-array.md
│ │ ├── encode-url.md
│ │ ├── fetch-XML.md
│ │ ├── fetch-json.md
│ │ ├── fetch-post-json.md
│ │ ├── filter-objects-in-array.md
│ │ ├── find-an-element-from-the-DOM.md
│ │ ├── find-element-by-class.md
│ │ ├── find-element-by-id.md
│ │ ├── find-index-of-element-in-array.md
│ │ ├── find-multiple-DOM-elements.md
│ │ ├── find-next-element.md
│ │ ├── find-previous-element.md
│ │ ├── find-root-of-positive-number.md
│ │ ├── flatten-a-nested-array.md
│ │ ├── format-currency-as-per-locale.md
│ │ ├── format-date.md
│ │ ├── generate-random-string.md
│ │ ├── get-CSS-custom-property.md
│ │ ├── get-CSS-property.md
│ │ ├── get-count-of-DOM-elements.md
│ │ ├── get-count-of-character-in-string.md
│ │ ├── get-count-of-duplicate-items-in-array.md
│ │ ├── get-current-day-name.md
│ │ ├── get-current-month-name.md
│ │ ├── get-current-page-url.md
│ │ ├── get-current-short-day-name.md
│ │ ├── get-current-short-month-name.md
│ │ ├── get-current-timestamp-in-seconds.md
│ │ ├── get-current-timestamp.md
│ │ ├── get-current-year.md
│ │ ├── get-data-attribute-from-element.md
│ │ ├── get-division-remainder.md
│ │ ├── get-extension-from-input-type-file.md
│ │ ├── get-file-name-from-path.md
│ │ ├── get-first-character-of-string.md
│ │ ├── get-function-arguments-as-array.md
│ │ ├── get-human-friendly-date-difference.md
│ │ ├── get-item-from-localstorage.md
│ │ ├── get-item-from-sessionstorage.md
│ │ ├── get-keys-of-object.md
│ │ ├── get-last-array-element.md
│ │ ├── get-last-character-of-string.md
│ │ ├── get-length-of-array.md
│ │ ├── get-length-of-string.md
│ │ ├── get-minutes-ago.md
│ │ ├── get-path-from-full-path.md
│ │ ├── get-port-from-url.md
│ │ ├── get-random-element-from-array.md
│ │ ├── get-random-hex-color.md
│ │ ├── get-random-number-between-two-numbers.md
│ │ ├── get-unique-values-from-object-array-property.md
│ │ ├── get-url-search-params.md
│ │ ├── hide-element.md
│ │ ├── increment-a-variable.md
│ │ ├── interpolate.md
│ │ ├── listen-to-click-event.md
│ │ ├── listen-to-hover-event.md
│ │ ├── listen-to-scroll-event.md
│ │ ├── loop-backwards-through-array.md
│ │ ├── loop-through-array.md
│ │ ├── loop-through-object.md
│ │ ├── lowercase-a-string.md
│ │ ├── manually-trigger-event-on-element.md
│ │ ├── match-text-against-regex.md
│ │ ├── open-url-in-new-tab.md
│ │ ├── parse-JSON-string.md
│ │ ├── pause-audio.md
│ │ ├── pause-video.md
│ │ ├── play-audio.md
│ │ ├── play-video.md
│ │ ├── prevent-default-action-of-event.md
│ │ ├── redirect-to-another-page.md
│ │ ├── register-a-service-worker.md
│ │ ├── reload-page.md
│ │ ├── remove-a-property-from-object.md
│ │ ├── remove-class-from-element.md
│ │ ├── remove-duplicates-from-array.md
│ │ ├── remove-element-from-DOM.md
│ │ ├── remove-item-from-localstorage.md
│ │ ├── remove-multiple-classes-from-element.md
│ │ ├── repeat-a-string.md
│ │ ├── replace-a-class-of-element.md
│ │ ├── replace-all-occurrences-of-string.md
│ │ ├── replace-element-content-HTML.md
│ │ ├── replace-spaces-with-dashes.md
│ │ ├── reverse-elements-of-array.md
│ │ ├── round-a-number.md
│ │ ├── set-CSS-custom-property.md
│ │ ├── set-interval.md
│ │ ├── set-timeout.md
│ │ ├── set-url-search-params.md
│ │ ├── show-element.md
│ │ ├── skip-values-from-array-destructuring.md
│ │ ├── smooth-scroll.md
│ │ ├── sort-array-in-ascending-order.md
│ │ ├── sort-array-in-descending-order.md
│ │ ├── sort-array-of-objects-in-ascending-order.md
│ │ ├── sort-array-of-objects-in-descending-order.md
│ │ ├── split-comma-separated-string.md
│ │ ├── split-string-into-array-of-characters.md
│ │ ├── stop-audio.md
│ │ ├── stop-video.md
│ │ ├── sum-items-of-array.md
│ │ ├── swap-variables.md
│ │ ├── time-a-function.md
│ │ ├── toggle-class-of-element.md
│ │ ├── try-catch.md
│ │ ├── update-array-immutably.md
│ │ ├── uppercase-a-string.md
│ │ ├── uppercase-every-word.md
│ │ ├── uppercase-first-letter.md
│ │ ├── validate-email.md
│ │ ├── wait-in-async-await-functions.md
│ │ ├── write-a-multiline-string.md
│ │ └── write-an-arrow-function.md
│ ├── _layouts/
│ │ ├── master.blade.php
│ │ └── usecase.blade.php
│ ├── _partials/
│ │ ├── footer.blade.php
│ │ ├── head.blade.php
│ │ ├── header.blade.php
│ │ ├── header_inner.blade.php
│ │ ├── logosvg.blade.php
│ │ ├── menu.blade.php
│ │ ├── related.blade.php
│ │ ├── scripts.blade.php
│ │ └── share.blade.php
│ ├── _reactusecases/
│ │ ├── destructure-props.md
│ │ ├── export-a-component.md
│ │ ├── fetch-with-use-hook.md
│ │ ├── get-React-version.md
│ │ ├── get-props.md
│ │ ├── listen-to-click-event.md
│ │ ├── listen-to-keydown-event.md
│ │ ├── listen-to-keypress-event.md
│ │ ├── listen-to-keyup-event.md
│ │ ├── render-to-the-DOM.md
│ │ ├── use-fragments.md
│ │ ├── use-state-with-hooks.md
│ │ ├── write-a-class-component.md
│ │ └── write-a-functional-component.md
│ ├── about.blade.php
│ ├── all.blade.php
│ ├── api/
│ │ ├── users.json
│ │ └── users.xml
│ ├── assets/
│ │ └── build/
│ │ ├── 0.js
│ │ ├── css/
│ │ │ ├── app.css
│ │ │ └── main.css
│ │ ├── js/
│ │ │ ├── index.js
│ │ │ └── main.js
│ │ └── mix-manifest.json
│ ├── build/
│ │ ├── css/
│ │ │ └── main-17bd45cbc3.css
│ │ ├── js/
│ │ │ └── all-0048fc7a19.js
│ │ └── rev-manifest.json
│ ├── css/
│ │ └── main.css
│ ├── dynamic-sitemap.blade.php
│ ├── favicons/
│ │ ├── browserconfig.xml
│ │ └── manifest.json
│ ├── index.blade.php
│ ├── javascript.blade.php
│ ├── js/
│ │ ├── all.js
│ │ └── index.js
│ └── react.blade.php
├── tasks/
│ ├── algolia-sync.js
│ ├── bin.js
│ └── build.js
└── webpack.mix.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .editorconfig
================================================
root = true
[*]
end_of_line = lf
# 4 space indentation
[*.{js,php,scss}]
indent_style = space
indent_size = 4
================================================
FILE: .gitignore
================================================
/build_local/
/build_production/
/node_modules/
/vendor/
/_tmp/
/cache/
/.idea/
/.vscode/
npm-debug.log
yarn-error.log
# Optional ignores
# /build_staging/
# /build_production/
# /source/assets/build/css/
# /source/assets/build/fonts/
# /source/assets/build/js/
================================================
FILE: CNAME
================================================
codetogo.io
================================================
FILE: CODE_OF_CONDUCT.md
================================================
# Contributor Covenant Code of Conduct
## Our Pledge
In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
## Our Standards
Examples of behavior that contributes to creating a positive environment include:
* Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism
* Focusing on what is best for the community
* Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
* The use of sexualized language or imagery and unwelcome sexual attention or advances
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or electronic address, without explicit permission
* Other conduct which could reasonably be considered inappropriate in a professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
## Scope
This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at joubran.jad@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
[homepage]: http://contributor-covenant.org
[version]: http://contributor-covenant.org/version/1/4/
================================================
FILE: CONTRIBUTING.md
================================================
Thank you for contributing a use case on CodeToGo!
You can either follow the below steps to send a Pull Request, or you can simply create a new Issue
0. We recommend creating an issue discussing the use case before you send a PR
1. Search the website to make sure that this use case doesn't already exist
2. Create a new markdown file in `source/_jsusecases/` or `source/_reactusecases`.
The name of the markdown file will determine the **Title** of the use case.
For example: [lowercase-a-string.md](https://github.com/jadjoubran/codetogo.io/blob/master/source/_jsusecases/lowercase-a-string.md) will automatically yield a title of:
`How to lowercase a string in JavaScript`.
`How to ` and ` in JavaScript` are always automatically added.
3. Please start off using this template
````
---
extends: _layouts.usecase
date: 2018-01-20
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase
reference: String.toUpperCase
related: lowercase-a-string
category: strings
author: "Your name/nickname (optional)"
---
```javascript
const text = 'Hello World';
text.toUpperCase();
```
<pre class="output">HELLO WORLD</pre>
````
4. Replace the use case with your own.
5. If there's an output for such code, show it in between `<pre class="output"></pre>`
6. If the solution for that usecase references a particular javascript method or object, please find the [MDN](https://developer.mozilla.org/
) link for it and replace it in the header of the file. Also add a `reference` that points to the method name. For example: `String.toUpperCase`.
7. If there is one or more related use cases, please reference them (comma separated) in the `related:` filed in the headers. If there are none, then please remove that line.
8. Update the `category:` to a suitable category
9. Set the `date:` to today's date
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2018 Jad Joubran
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: PULL_REQUEST_TEMPLATE.md
================================================
> Put an `x` inside those square brackets to mark them as complete.
- [ ] Check [CONTRIBUTING.md](https://github.com/jadjoubran/codetogo.io/blob/master/CONTRIBUTING.md)?
- [ ] 1 use case per Pull Request
- [ ] Double check the use case file name?
- [ ] Update or remove the `mdn` link?
- [ ] Update or remove the `related` use cases?
- [ ] Update the category? (if necessary)
- [ ] Update the date?
================================================
FILE: README.md
================================================
# Codetogo.io
Code to go aims to help developers learning JavaScript & React find up to date, accurate and ready to use snippets of JavaScript & React code for common use cases.
## Contributing a new use case
Do you have a use case that is not covered in codetogo? Please open an issue (even if you don't have the answer for that use case).
You can also create a Pull Request by following the steps in [contributing.md](https://github.com/jadjoubran/codetogo.io/blob/master/CONTRIBUTING.md) however we recommend opening an issue first.
## Use case feedback
Do you have feedback on a particular use case? Please open an issue
## Makers
[Codetogo.io](https://codetogo.io) is built by [Jad Joubran](https://github.com/jadjoubran) and designed by [Nicole Saidy](https://github.com/nicolesaidy).
================================================
FILE: bootstrap.php
================================================
<?php
/** @var $container \Illuminate\Container\Container */
/** @var $jigsaw \TightenCo\Jigsaw\Jigsaw */
================================================
FILE: build/config.gypi
================================================
# Do not edit. File was generated by node-gyp's "configure" step
{
"target_defaults": {
"cflags": [],
"default_configuration": "Release",
"defines": [],
"include_dirs": [],
"libraries": []
},
"variables": {
"asan": 0,
"build_v8_with_gn": "false",
"coverage": "false",
"debug_nghttp2": "false",
"enable_lto": "false",
"enable_pgo_generate": "false",
"enable_pgo_use": "false",
"force_dynamic_crt": 0,
"host_arch": "x64",
"icu_gyp_path": "tools/icu/icu-system.gyp",
"icu_small": "false",
"icu_ver_major": "63",
"llvm_version": "0",
"node_byteorder": "little",
"node_debug_lib": "false",
"node_enable_d8": "false",
"node_enable_v8_vtunejit": "false",
"node_experimental_http_parser": "false",
"node_install_npm": "false",
"node_module_version": 67,
"node_no_browser_globals": "false",
"node_prefix": "/usr/local/Cellar/node/11.12.0",
"node_release_urlbase": "",
"node_report": "true",
"node_shared": "false",
"node_shared_cares": "false",
"node_shared_http_parser": "false",
"node_shared_libuv": "false",
"node_shared_nghttp2": "false",
"node_shared_openssl": "false",
"node_shared_zlib": "false",
"node_tag": "",
"node_target_type": "executable",
"node_use_bundled_v8": "true",
"node_use_dtrace": "true",
"node_use_etw": "false",
"node_use_large_pages": "false",
"node_use_openssl": "true",
"node_use_pch": "false",
"node_use_v8_platform": "true",
"node_with_ltcg": "false",
"node_without_node_options": "false",
"openssl_fips": "",
"openssl_is_fips": "false",
"shlib_suffix": "67.dylib",
"target_arch": "x64",
"v8_enable_gdbjit": 0,
"v8_enable_i18n_support": 1,
"v8_enable_inspector": 1,
"v8_no_strict_aliasing": 1,
"v8_optimized_debug": 1,
"v8_promise_internal_field_count": 1,
"v8_random_seed": 0,
"v8_trace_maps": 0,
"v8_use_siphash": "true",
"v8_use_snapshot": "true",
"want_separate_host_toolset": 0,
"xcode_version": "10.0",
"nodedir": "/Users/jadjoubran/.node-gyp/11.12.0",
"standalone_static_library": 1
}
}
================================================
FILE: composer.json
================================================
{
"require": {
"tightenco/jigsaw": "^1.3"
},
"config": {
"platform": {
"php": "8.0"
}
}
}
================================================
FILE: config.php
================================================
<?php
return [
'baseUrl' => '',
'production' => true,
'collections' => [
'jsusecases' => [
'type' => 'javascript',
'formatted_type' => 'JavaScript',
'path' => 'how-to-{filename}-in-javascript',
'section' => 'content',
'question' => function ($page) {
$question = str_replace('-', ' ', $page->getFilename());
return "How to $question in JavaScript";
},
'url' => function ($page) {
return 'how-to-'.$page->getFilename().'-in-javascript';
},
'learnbtn' => '<div style="text-align: center"><a href="https://learnjavascript.online/?utm_source=codetogo.io" target="_blank" rel="noopener" class="learn-btn learn-javascript">Learn JavaScript step by step</a></div>'
],
'reactusecases' => [
'type' => 'react',
'formatted_type' => 'React',
'path' => 'how-to-{filename}-in-react',
'section' => 'content',
'question' => function ($page) {
$question = str_replace('-', ' ', $page->getFilename());
return "How to $question in React";
},
'url' => function ($page) {
return 'how-to-'.$page->getFilename().'-in-react';
},
'learnbtn' => '<a href="https://react-tutorial.app/?utm_source=codetogo.io" target="_blank" rel="noopener" class="learn-btn learn-react">Step by step React Tutorial</a>'
],
],
];
================================================
FILE: netlify.toml
================================================
[[headers]]
for = "/*"
[headers.values]
Cache-Control = "public, s-max-age=18748800"
================================================
FILE: package.json
================================================
{
"name": "codetogo",
"private": false,
"devDependencies": {
"algoliasearch": "^3.35.1",
"browser-sync": "^3.0.2",
"browser-sync-webpack-plugin": "^2.3.0",
"cross-env": "^3.2.3",
"extra-watch-webpack-plugin": "^1.0.3",
"hasbin": "^1.2.3",
"husky": "^0.14.3",
"laravel-mix": "^6.0.49",
"lint-staged": "^15.2.7",
"node-cmd": "^3.0.0",
"prettier": "^1.19.1",
"rrssb": "^1.14.0",
"sass": "^1.26.10",
"sass-loader": "^16.0.1",
"vue-template-compiler": "^2.6.11",
"webpack": "5.75.0",
"yaml-front-matter": "^4.1.0",
"yargs": "^17.6.2"
},
"scripts": {
"local": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --env=local --config=node_modules/laravel-mix/setup/webpack.config.js",
"staging": "cross-env NODE_ENV=staging node_modules/webpack/bin/webpack.js --progress --env=staging --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --env=production --config=node_modules/laravel-mix/setup/webpack.config.js",
"dev": "npm run local",
"prod": "npm run production",
"watch": "npm run local -- --watch",
"sync": "node tasks/algolia-sync.js",
"precommit": "lint-staged",
"netlify-build": "composer install && npm run prod && vendor/bin/jigsaw build production && npm run sync"
},
"lint-staged": {
"source/_jsusecases/*.md": [
"prettier --write",
"git add"
],
"source/_reactusecases/*.md": [
"prettier --write",
"git add"
]
}
}
================================================
FILE: source/404.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>404</title>
</head>
<body>
<script>
window.location.href = '/';
</script>
</body>
</html>
================================================
FILE: source/CNAME
================================================
codetogo.io
================================================
FILE: source/_assets/js/autocomplete.js
================================================
const client = algoliasearch("7V5EBRZWFF", "8a58d6caba2a81878b26e24c1028624d");
const index = client.initIndex("prod_JS-HOWTO");
autocomplete(
"#autocomplete",
{
hint: true,
autoselect: true
// autoselectOnBlur: true
},
[
{
source: autocomplete.sources.hits(index, { hitsPerPage: 50 }),
displayKey: "question",
templates: {
suggestion: suggestion => {
return suggestion._highlightResult.question.value;
},
empty: _ => {
return `<div class="aa-suggestion aa-notfound" role="option">
<div>No results found.</div>
<div>
<svg width="11" height="11" fill="var(--gray-800)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"><path d="M26 0C11.664 0 0 11.663 0 26s11.664 26 26 26 26-11.663 26-26S40.336 0 26 0zm12.5 28H28v11a2 2 0 0 1-4 0V28H13.5a2 2 0 0 1 0-4H24V14a2 2 0 0 1 4 0v10h10.5a2 2 0 0 1 0 4z"/></svg>
<em style="white-space: normal;">Click here to contribute</em>
</div>
</div>`;
}
}
}
]
).on("autocomplete:selected", function(event, suggestion, dataset) {
if (suggestion && suggestion.url) {
window.location.href = `/${suggestion.url}`;
} else {
const url = document.querySelector("#contribute").href;
window.open(`${url} ${event.currentTarget.value}`);
}
});
document.querySelector("#autocomplete").focus({ preventScroll: true });
================================================
FILE: source/_assets/js/main.js
================================================
import "./autocomplete.js";
import "./prism.min.js";
================================================
FILE: source/_assets/sass/about.scss
================================================
.about {
}
.about-text{
color: var(--gray-800);
line-height: 34px;
font-size: 18px;
}
.about-text a {
text-decoration: underline;
}
================================================
FILE: source/_assets/sass/all.scss
================================================
.all{
a{
text-decoration: none;
}
h3 {
color: var(--gray-900);
}
.page-title{
margin-top: 45px;
}
}
================================================
FILE: source/_assets/sass/autocomplete.scss
================================================
#autocomplete {
}
.hide-till-ready {
visibility: hidden;
}
//when autocomplete widget is ready
.algolia-autocomplete .hide-till-ready {
visibility: visible;
}
.algolia-autocomplete {
width: 100%;
border: 0;
}
.autocomplete-header .algolia-autocomplete {
width: calc(100% - 60px);
margin-left: 20px;
}
.algolia-autocomplete .aa-input::placeholder {
color: #c0c9cf;
}
.algolia-autocomplete .aa-input,
.algolia-autocomplete .aa-hint {
border-radius: 3px;
width: 100%;
padding: 18px 0 18px 48px;
border: 0;
font-size: 18px;
box-sizing: border-box;
border: 1px solid transparent;
outline: none;
}
.algolia-autocomplete .aa-hint {
// color: #C0C9CF;
color: black;
background-color: var(--gray-200) !important;
}
.autocomplete-header .algolia-autocomplete .aa-hint {
background-color: var(--gray-100) !important;
}
.algolia-autocomplete .aa-input {
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNSAxNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGU+JiMyMzk7JiMxMjg7JiMxMzA7PC90aXRsZT48ZGVzYz5DcmVhdGVkIHVzaW5nIEZpZ21hPC9kZXNjPjxnIGlkPSJDYW52YXMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyOCAtMTM2MCkiPjxnIGlkPSImIzIzOTsmIzEyODsmIzEzMDsiPjx1c2UgeGxpbms6aHJlZj0iI3BhdGgwX2ZpbGwiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMjggMTM1OC44OSkiIGZpbGw9IiM4OTk5QTMiLz48L2c+PC9nPjxkZWZzPjxwYXRoIGlkPSJwYXRoMF9maWxsIiBkPSJNIDEwLjQyNjMgNy43MTQyOUMgMTAuNDI2MyA5LjkxOTY0IDguNjMxNyAxMS43MTQzIDYuNDI2MzQgMTEuNzE0M0MgNC4yMjA5OCAxMS43MTQzIDIuNDI2MzQgOS45MTk2NCAyLjQyNjM0IDcuNzE0MjlDIDIuNDI2MzQgNS41MDg5MyA0LjIyMDk4IDMuNzE0MjkgNi40MjYzNCAzLjcxNDI5QyA4LjYzMTcgMy43MTQyOSAxMC40MjYzIDUuNTA4OTMgMTAuNDI2MyA3LjcxNDI5Wk0gMTQuOTk3OCAxNS4xNDI5QyAxNC45OTc4IDE0LjgzOTMgMTQuODcyOCAxNC41NDQ2IDE0LjY2NzQgMTQuMzM5M0wgMTEuNjA0OSAxMS4yNzY4QyAxMi4zMjgxIDEwLjIzMjEgMTIuNzEyMSA4Ljk4MjE0IDEyLjcxMjEgNy43MTQyOUMgMTIuNzEyMSA0LjI0MTA3IDkuODk5NTUgMS40Mjg1NyA2LjQyNjM0IDEuNDI4NTdDIDIuOTUzMTIgMS40Mjg1NyAwLjE0MDYyNSA0LjI0MTA3IDAuMTQwNjI1IDcuNzE0MjlDIDAuMTQwNjI1IDExLjE4NzUgMi45NTMxMiAxNCA2LjQyNjM0IDE0QyA3LjY5NDIgMTQgOC45NDQyIDEzLjYxNjEgOS45ODg4NCAxMi44OTI5TCAxMy4wNTEzIDE1Ljk0NjRDIDEzLjI1NjcgMTYuMTYwNyAxMy41NTEzIDE2LjI4NTcgMTMuODU0OSAxNi4yODU3QyAxNC40Nzk5IDE2LjI4NTcgMTQuOTk3OCAxNS43Njc5IDE0Ljk5NzggMTUuMTQyOVoiLz48L2RlZnM+PC9zdmc+);
background-repeat: no-repeat;
background-position: 21px center;
transition: background-color 300ms, border-color 300ms;
}
.algolia-autocomplete .aa-input:focus {
border-color: var(--gray-200);
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.05);
background-color: rgba(255, 255, 255, 0.91) !important;
}
.autocomplete-header .algolia-autocomplete .aa-input {
background-position: 11px center;
}
.autocomplete-header .algolia-autocomplete .aa-input,
.autocomplete-header .algolia-autocomplete .aa-hint {
padding: 10px 0 10px 35px;
font-size: 16px;
}
.autocomplete-header {
flex-grow: 1;
}
@mixin algolia() {
// background-image: url('https://www.algolia.com/static_assets/images/press/downloads/algolia-logo-light.svg');
background-size: 50px 50px;
background-repeat: no-repeat;
background-position: right 15px top 0;
}
.algolia-autocomplete .aa-dropdown-menu {
width: 100%;
text-align: left;
background-color: white;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
margin-top: 6px;
border-radius: 3px;
max-height: 300px;
overflow-y: scroll;
}
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion {
cursor: pointer;
padding: 15px 20px;
}
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor {
background-color: var(--gray-200);
}
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion em {
font-weight: bold;
font-style: normal;
}
@media screen and (min-width: 560px) {
.landing .algolia-autocomplete .aa-dropdown-menu {
@include algolia();
}
.landing
.algolia-autocomplete
.aa-dropdown-menu
.aa-suggestion:first-child.aa-cursor:not(.aa-notfound) {
@include algolia();
}
}
@media screen and (max-width: 712px) {
.algolia-autocomplete .aa-input,
.algolia-autocomplete .aa-hint {
font-size: 16px;
}
.algolia-autocomplete .aa-dropdown-menu {
font-size: 14px;
}
}
.algolia-autocomplete .aa-notfound {
font-size: 14px;
color: var(--gray-600);
background-image: none !important;
display: flex;
justify-content: space-between;
background-color: white;
em {
color: var(--gray-800);
}
}
================================================
FILE: source/_assets/sass/banner.scss
================================================
.banner{
padding: 130px 0;
text-align: center;
.autocomplete{
margin-top: 57px;
}
}
================================================
FILE: source/_assets/sass/body.scss
================================================
:root {
--gray-900: #353b3f;
--gray-800: #67737a;
--gray-700: #8999a3;
--gray-600: #adb5ba;
--gray-500: #c0c9cf;
--gray-400: #e7eaec;
--gray-300: #eef0f1;
--gray-200: #f3f4f4;
--gray-100: #fafafa;
--base-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
}
body {
margin: 0;
color: var(--gray-900);
background-color: var(--gray-100);
-webkit-font-smoothing: antialiased;
font-family: var(--base-font);
letter-spacing: -0.01em;
}
.container {
max-width: 750px;
margin: 0 auto;
}
.hidden {
display: none;
visibility: hidden;
}
h1 {
font-size: 38px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
line-height: 1.4em;
}
h2 {
font-size: 30px;
}
h3 {
font-size: 26px;
}
h4 {
font-size: 20px;
font-weight: normal;
color: var(--gray-800);
}
h5 {
font-size: 14px;
font-weight: normal;
color: var(--gray-700);
}
@media screen and (max-width: 712px) {
.container {
margin-left: 20px;
margin-right: 20px;
}
h1 {
font-size: 38px;
}
h2 {
font-size: 26px;
}
h3 {
font-size: 24px;
}
.hide-mobile {
display: none;
}
}
================================================
FILE: source/_assets/sass/card.scss
================================================
.card{
background-color: white;
border-radius: 6px;
padding: 40px;
margin: 40px 0;
border: 1px solid var(--gray-200);
transition: box-shadow 250ms;
&:hover{
box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.05);
}
a{
text-decoration: none;
color: inherit;
}
h1, h2, h3, h4, h5, h6{
margin-top: 0;
margin-left: 0;
margin-right: 0;
}
h2,
h3 {
margin-bottom: 15px;
}
}
.card-compact{
margin: 30px 0;
h5{
margin: 0;
}
}
@media screen and (max-width: 712px){
.card{
margin: 20px 0;
padding: 20px;
}
}
.usecase .usecase-card:hover{
box-shadow: none;
}
================================================
FILE: source/_assets/sass/category.scss
================================================
.category-pill{
border-radius: 5px;
background-color: white;
display: inline-block;
padding: 3px 5px;
}
================================================
FILE: source/_assets/sass/code.scss
================================================
pre[class*="language-"] {
font-size: 18px;
padding: 30px;
letter-spacing: 0;
position: relative;
}
pre[class*="language-"],
code[class*="language-"],
pre.output {
white-space: pre-wrap;
word-break: keep-all;
}
pre.language-html,
pre.language-css{
margin-bottom: 15px;
}
pre.language-html::before,
pre.language-css::before,
pre.language-javascript::before {
content: "";
display: inline-block;
position: absolute;
top: 6px;
right: 8px;
font-size: 12px;
color: var(--gray-700);
font-family: var(--base-font);
}
pre.language-html::before {
content: "html";
text-transform: uppercase;
}
pre.language-css::before {
content: "css";
text-transform: uppercase;
}
pre.language-javascript::before {
content: "JavaScript";
}
================================================
FILE: source/_assets/sass/footer.scss
================================================
footer{
padding: 23px;
color: var(--gray-700);
a{
color: inherit;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
}
.footer-container{
border-top: 1px solid var(--gray-200);
padding-top: 22px;
font-size: 14px;
display: flex;
justify-content: space-between;
align-items: center;
.links{
display: flex;
}
.link{
padding: 0 11px;
}
}
================================================
FILE: source/_assets/sass/landing.scss
================================================
================================================
FILE: source/_assets/sass/main.scss
================================================
@import "prism";
@import "body";
@import "code";
@import "nav";
@import "card";
@import "banner";
@import "footer";
@import "autocomplete";
@import "landing";
@import "all";
@import "usecase";
@import "related";
@import "share";
@import "about";
@import "category";
================================================
FILE: source/_assets/sass/nav.scss
================================================
nav{
background-color: white;
padding: 10px;
border-bottom: 1px solid var(--gray-200);
}
.nav-spacer{
padding: 10px;
}
nav a{
text-decoration: none;
color: inherit;
}
.nav-container{
display: flex;
justify-content: space-between;
align-items: center;
}
nav .link{
padding: 0 8px;
color: var(--gray-800);
}
#logo{
display: flex;
align-items: center;
font-weight: 900;
}
#logo svg{
padding-right: 11px;
}
================================================
FILE: source/_assets/sass/prism.css
================================================
/* PrismJS 1.19.0
https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript+jsx */
/**
* okaidia theme for JavaScript, CSS and HTML
* Loosely based on Monokai textmate theme by http://www.monokai.nl/
* @author ocodia
*/
code[class*="language-"],
pre[class*="language-"] {
color: #f8f8f2;
background: none;
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 1em;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
border-radius: 0.3em;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #272822;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #f8f8f2;
}
.token.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
color: #f92672;
}
.token.boolean,
.token.number {
color: #ae81ff;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #a6e22e;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
color: #f8f8f2;
}
.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
color: #e6db74;
}
.token.keyword {
color: #66d9ef;
}
.token.regex,
.token.important {
color: #fd971f;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
================================================
FILE: source/_assets/sass/related.scss
================================================
.related{
padding-top: 20px;
a{
text-decoration: none;
}
h3{
font-size: 22px;
color: var(--gray-900);
margin-bottom: 0;
}
.card-compact{
margin: 24px 0;
padding: 30px;
}
}
================================================
FILE: source/_assets/sass/share.scss
================================================
.rrssb-buttons {
box-sizing: border-box;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
height: 36px;
margin: 0;
padding: 0;
width: 100%;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-animation-name: fade-in;
animation-name: fade-in;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.rrssb-buttons:after {
clear: both;
}
.rrssb-buttons:after,
.rrssb-buttons:before {
content: " ";
display: table;
}
.rrssb-buttons li {
box-sizing: border-box;
float: left;
height: 100%;
line-height: 13px;
list-style: none;
margin: 0;
padding: 0 2px;
}
.rrssb-buttons li.rrssb-facebook a {
background-color: #306199;
}
.rrssb-buttons li.rrssb-facebook a:hover {
background-color: #244872;
}
.rrssb-buttons li.rrssb-twitter a {
background-color: #26c4f1;
}
.rrssb-buttons li.rrssb-twitter a:hover {
background-color: #0eaad6;
}
.rrssb-buttons li a {
background-color: #ccc;
border-radius: 2px;
box-sizing: border-box;
display: block;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-weight: 700;
height: 100%;
padding: 11px 7px 12px 27px;
position: relative;
text-align: center;
text-decoration: none;
text-transform: uppercase;
-webkit-transition: background-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out;
width: 100%;
}
.rrssb-buttons li a .rrssb-icon {
display: block;
left: 10px;
padding-top: 9px;
position: absolute;
top: 0;
width: 10%;
}
.rrssb-buttons li a .rrssb-icon svg {
height: 17px;
width: 17px;
}
.rrssb-buttons li a .rrssb-icon svg circle,
.rrssb-buttons li a .rrssb-icon svg path {
fill: #fff;
}
.share {
.clear {
clear: both;
}
}
.rrssb-buttons {
height: 34px;
}
.rrssb-buttons li {
margin-right: 12px;
}
.rrssb-buttons li a {
padding: 11px 7px 12px 27px;
border-radius: 3px;
}
.rrssb-buttons li a .rrssb-icon {
left: 9px;
}
.rrssb-buttons li.rrssb-facebook a,
.rrssb-buttons li.rrssb-twitter a {
background-color: #ccc;
}
.rrssb-buttons li.rrssb-facebook a:hover {
background-color: #306199;
}
.rrssb-buttons li.rrssb-twitter a:hover {
background-color: #26c4f1;
}
================================================
FILE: source/_assets/sass/usecase.scss
================================================
.usecase {
min-height: calc(100vh - 80px - 65px - 86px);
}
#usecase-question {
font-size: 30px;
}
.usecase-subtitle {
display: flex;
align-items: center;
margin-bottom: 35px;
.category {
margin-right: 10px;
background-color: var(--gray-200);
padding: 4px 6px;
border-radius: 3px;
color: var(--gray-800);
font-size: 14px;
}
h5 {
margin-bottom: 0;
}
}
.mdn-container {
color: var(--gray-700);
font-size: 14px;
padding-top: 8px;
text-align: right;
a {
text-decoration: underline;
}
}
.output {
background-color: var(--gray-300);
padding: 15px;
border-radius: 0.3em;
font-size: 14px;
line-height: 20px;
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
color: var(--gray-800);
margin-bottom: 0;
a {
text-decoration: underline;
}
}
.output::before {
content: "Output";
display: block;
color: var(--gray-600);
font-size: 12px;
font-family: var(--base-font);
position: relative;
top: -10px;
right: -7px;
font-weight: bold;
float: right;
}
.learn-tech-container {
margin-top: 40px;
display: flex;
justify-content: center;
}
.learn-btn {
padding: 12px 40px;
font-weight: 800;
font-size: 16px;
border-radius: 3px;
border: 0;
font-family: var(--font-family);
cursor: pointer;
display: inline-block;
transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.learn-btn:hover {
opacity: 0.8;
}
.learn-btn:active {
transform: translate(0.5px, 0.5px);
}
.learn-javascript {
background-color: #03cbaf;
color: #25272a !important;
}
.learn-react {
background-color: #0097ec;
color: white !important;
}
================================================
FILE: source/_jsusecases/add-class-to-element.md
================================================
---
extends: _layouts.usecase
date: 2024-02-26
link: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
reference: Element.classList.add
related: remove-class-from-element,toggle-class-of-element,replace-a-class-of-element
category: DOM
---
```html
<div id="box"></div>
```
```javascript
const element = document.querySelector("#box");
// Note: only class name, without the '.'
element.classList.add("class-name");
```
================================================
FILE: source/_jsusecases/add-item-to-array.md
================================================
---
extends: _layouts.usecase
date: 2017-12-16
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push
reference: Array.push
category: arrays
---
```javascript
const apps = [];
apps.push("calculator"); // returns 1 (new length of the array)
apps.push("phone", "clock"); // returns 3 (new length of the array)
```
<pre class="output">["calculator", "phone", "clock"]</pre>
================================================
FILE: source/_jsusecases/add-item-to-localstorage.md
================================================
---
extends: _layouts.usecase
date: 2017-12-19
link: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
related: add-object-to-localstorage,remove-item-from-localstorage,get-item-from-localstorage
reference: Window.localStorage
category: storage
---
```javascript
const name = "John";
localStorage.setItem("name", name);
```
================================================
FILE: source/_jsusecases/add-item-to-sessionstorage.md
================================================
---
extends: _layouts.usecase
date: 2017-12-21
link: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
reference: Window.sessionStorage
related: get-item-from-sessionstorage
category: storage
---
```javascript
const name = "John";
sessionStorage.setItem("name", name);
```
================================================
FILE: source/_jsusecases/add-multiple-classes-to-element.md
================================================
---
extends: _layouts.usecase
date: 2018-09-22
link: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
reference: Element.classList
related: add-class-to-element,remove-multiple-classes-from-element
category: DOM
---
```html
<div id="box"></div>
```
```javascript
const element = document.querySelector("#box");
element.classList.add("active", "highlighted");
```
<pre class="output"><div id="box" class="active highlighted"></div></pre>
================================================
FILE: source/_jsusecases/add-object-to-localstorage.md
================================================
---
extends: _layouts.usecase
date: 2017-12-19
link: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
reference: Window.localStorage
related: add-item-to-localstorage,remove-item-from-localstorage
category: storage
---
```javascript
const user = {
id: 1,
first_name: "John",
last_name: "Doe"
};
localStorage.setItem("user", JSON.stringify(user));
```
================================================
FILE: source/_jsusecases/append-html.md
================================================
---
extends: _layouts.usecase
date: 2018-07-28
link: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
reference: Element.insertAdjacentHTML
category: DOM
---
```html
<ul id="list"></ul>
```
```javascript
const list = document.querySelector("#list");
list.insertAdjacentHTML("beforeend", `<li>Apple</li>`);
```
================================================
FILE: source/_jsusecases/apply-function-to-every-array-element.md
================================================
---
extends: _layouts.usecase
date: 2017-12-19
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
reference: Array.map
category: functions
---
```javascript
const ages = [18, 20, 21, 30];
const agesPlusOne = ages.map(age => age + 1);
```
<pre class="output">[19, 21, 22, 31]</pre>
================================================
FILE: source/_jsusecases/async-await-fetch.md
================================================
---
extends: _layouts.usecase
date: 2024-02-13
link: https://learnjavascript.online/topics/fetch.html?utm_source=codetogo.io
reference_website: Learn JavaScript
reference: Fetch API use cases
related: fetch-json
category: JSON
extra: https://learnjavascript.online/topics/fetch.html?utm_source=codetogo.io
---
```javascript
(async () => {
try {
const response = await fetch("https://codetogo.io/api/users.json");
const data = await response.json();
console.log(data);
} catch (err) {
console.error(err);
}
})();
```
<pre class="output">
[{
id: 1,
name: "Sam"
}, {
id: 2,
name: "Alex"
}]
</pre>
================================================
FILE: source/_jsusecases/async-await.md
================================================
---
extends: _layouts.usecase
date: 2024-02-28
link: https://learnjavascript.online/topics/promises.html?utm_source=codetogo.io
reference: Promises
reference_website: Learn JavaScript
category: Promise
author: "Vijay Singh"
---
```javascript
(async () => {
try {
const response = await fetch("https://codetogo.io/api/users.json");
const data = await response.json();
console.log(data);
} catch (err) {
console.error(err);
}
})();
```
<pre class="output">
[{
id: 1,
name: "Sam"
}, {
id: 2,
name: "Alex"
}]
</pre>
================================================
FILE: source/_jsusecases/call-a-function-with-arguments.md
================================================
---
extends: _layouts.usecase
date: 2017-12-18
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions
reference: Functions
related: call-a-function
category: functions
---
```javascript
function greetUser(name) {
return `Welcome ${name} to code to go!`;
}
let result = greetUser("John");
console.log(result);
```
<pre class="output">Welcome John to code to go!</pre>
================================================
FILE: source/_jsusecases/call-a-function.md
================================================
---
extends: _layouts.usecase
date: 2017-12-17
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions
reference: Functions
related: call-a-function-with-arguments
category: functions
---
```javascript
function greetUser() {
return "Welcome to code to go!";
}
let result = greetUser();
console.log(result);
```
<pre class="output">Welcome to code to go!</pre>
================================================
FILE: source/_jsusecases/capitalize-first-letter.md
================================================
---
extends: _layouts.usecase
date: 2018-12-26
category: strings
---
```javascript
let str = "welcome to code to go";
str = str[0].toUpperCase() + str.substring(1);
```
<pre class="output">Welcome to code to go</pre>
================================================
FILE: source/_jsusecases/change-CSS-property.md
================================================
---
extends: _layouts.usecase
date: 2018-03-11
category: DOM
---
```html
<div id="box"></div>
```
```javascript
const element = document.querySelector("#box");
//change background-color
element.style.backgroundColor = "red";
```
================================================
FILE: source/_jsusecases/check-if-array-includes-element.md
================================================
---
extends: _layouts.usecase
date: 2017-12-16
link: https://blog.learnjavascript.online/posts/javascript-in-array/
reference_website: Learn JavaScript Blog
reference: JavaScript in array
category: arrays
---
```javascript
const apps = ["phone", "calculator", "clock"];
apps.includes("calculator");
```
<pre class="output">true</pre>
================================================
FILE: source/_jsusecases/check-if-element-has-class.md
================================================
---
extends: _layouts.usecase
date: 2024-02-26
link: https://blog.learnjavascript.online/posts/javascript-has-class/
reference_website: Learn JavaScript Blog
reference: JavaScript has class
category: DOM
---
```html
<div id="box" class="active"></div>
```
```javascript
const element = document.querySelector("#box");
// Check if hasclass
// Result is a boolean
element.classList.contains("active");
```
<pre class="output">true</pre>
================================================
FILE: source/_jsusecases/check-if-number-is-even.md
================================================
---
extends: _layouts.usecase
date: 2017-12-23
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder_()
reference: Remainder
related: check-if-number-is-odd
category: numbers
---
```javascript
const number = 12;
const isEven = number % 2 === 0;
console.log(isEven);
```
<pre class="output">true</pre>
================================================
FILE: source/_jsusecases/check-if-number-is-odd.md
================================================
---
extends: _layouts.usecase
date: 2017-12-23
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder_()
reference: Remainder
related: check-if-number-is-even
category: numbers
---
```javascript
const number = 13;
const isOdd = number % 2 !== 0;
console.log(isOdd);
```
<pre class="output">true</pre>
================================================
FILE: source/_jsusecases/check-if-object-includes-substring.md
================================================
---
extends: _layouts.usecase
date: 2018-01-28
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Object/values
reference: Object.values
related: check-if-object-includes-value
category: objects
---
```javascript
const person = {
first_name: "Joan",
last_name: "Leon",
twitter: "@nucliweb"
};
Object.values(person)
.toString()
.includes("web");
```
<pre class="output">true</pre>
================================================
FILE: source/_jsusecases/check-if-object-includes-value.md
================================================
---
extends: _layouts.usecase
date: 2024-02-26
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Object/values
reference: Object.values
related: check-if-object-includes-substring
category: objects
---
```javascript
const person = {
firstName: "Sam",
lastName: "Bradley"
};
// Result is a boolean
Object.values(person).includes("Bradley");
```
<pre class="output">true</pre>
================================================
FILE: source/_jsusecases/check-if-object-is-empty.md
================================================
---
extends: _layouts.usecase
date: 2024-02-27
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
reference: Object.keys
related: pause-audio,stop-audio
category: DOM
---
```javascript
const obj = {};
const isEmpty = Object.keys(obj).length === 0;
```
<pre class="output">true</pre>
================================================
FILE: source/_jsusecases/check-if-string-ends-with-substring.md
================================================
---
extends: _layouts.usecase
date: 2018-02-01
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith
reference: String.endsWith
related: check-if-string-starts-with-substring
category: strings
---
```javascript
const string = "js is awesome";
string.endsWith("awesome");
```
<pre class="output">true</pre>
================================================
FILE: source/_jsusecases/check-if-string-includes-another-string.md
================================================
---
extends: _layouts.usecase
date: 2017-12-16
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes
reference: String.includes
category: strings
---
```javascript
const text = "Code to go has awesome use cases!";
text.includes("Code to go");
```
<pre class="output">true</pre>
================================================
FILE: source/_jsusecases/check-if-string-starts-with-substring.md
================================================
---
extends: _layouts.usecase
date: 2018-02-01
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith
reference: String.startsWith
related: check-if-string-ends-with-substring
category: strings
---
```javascript
const string = "js is awesome";
string.startsWith("js");
```
<pre class="output">true</pre>
================================================
FILE: source/_jsusecases/check-if-variable-is-a-string.md
================================================
---
extends: _layouts.usecase
date: 2018-04-28
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof
reference: typeof
category: strings
---
```javascript
const input = "potential string";
typeof input === "string";
```
<pre class="output">true</pre>
================================================
FILE: source/_jsusecases/check-if-variable-is-an-object.md
================================================
---
extends: _layouts.usecase
date: 2017-12-17
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/toString
reference: Object.toString
category: objects
---
```javascript
const value = {
name: "John"
};
Object.prototype.toString.call(value) === "[object Object]";
```
<pre class="output">true</pre>
================================================
FILE: source/_jsusecases/clear-interval.md
================================================
---
extends: _layouts.usecase
date: 2019-01-28
link: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval
reference: Window.clearInterval
related: set-interval
category: functions
author: "Vijay Singh"
---
```javascript
const intervalId = setInterval(() => {
console.log("I will not be printed");
}, 2000);
clearInterval(intervalId);
```
================================================
FILE: source/_jsusecases/clear-timeout.md
================================================
---
extends: _layouts.usecase
date: 2019-01-28
link: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout
reference: Window.clearTimeout
related: set-timeout
category: functions
author: "Vijay Singh"
---
```javascript
const timeOutId = setTimeout(() => {
console.log("I will not be printed");
}, 2000);
clearTimeout(timeOutId);
```
================================================
FILE: source/_jsusecases/comment.md
================================================
---
extends: _layouts.usecase
date: 2017-12-24
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Comments
reference: Comments
category: syntax
---
```javascript
//this is a one line comment
/*
And this is a comment
that spans multiple lines
*/
```
================================================
FILE: source/_jsusecases/concatenate-arrays.md
================================================
---
extends: _layouts.usecase
date: 2017-12-24
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator
reference: Spread operator
category: arrays
related: concatenate-objects
---
```javascript
const winners = ["Jane", "Bob"];
const losers = ["Ronald", "Kevin"];
const players = [...winners, ...losers];
```
<pre class="output">['Jane', 'Bob', 'Ronald', 'Kevin']</pre>
================================================
FILE: source/_jsusecases/concatenate-objects.md
================================================
---
extends: _layouts.usecase
date: 2018-02-16
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator
reference: Spread operator
category: objects
related: concatenate-arrays
---
```javascript
const defaultOptions = {
verbose: false,
src: "./src",
dist: "./dist"
};
const userOptions = { verbose: true };
const options = { ...defaultOptions, ...userOptions };
```
<pre class="output">{
verbose: true,
src: "./src",
dist: "./dist"
}</pre>
================================================
FILE: source/_jsusecases/convert-JSON-to-string.md
================================================
---
extends: _layouts.usecase
date: 2018-03-6
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
reference: JSON.stringify
related: parse-JSON-string
category: JSON
---
```javascript
const object = {
id: 1,
name: "Leanne Graham"
};
JSON.stringify(object);
```
<pre class="output">
"{"id":1,"name":"Leanne Graham"}"
</pre>
================================================
FILE: source/_jsusecases/convert-array-to-comma-separated-string.md
================================================
---
extends: _layouts.usecase
date: 2017-12-18
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join
reference: Array.join
related: split-comma-separated-string
category: arrays
---
```javascript
const elements = ["Eat", "Sleep", "Code", "Repeat"];
elements.join(",");
```
<pre class="output">
Eat,Sleep,Code,Repeat
</pre>
================================================
FILE: source/_jsusecases/convert-date-to-mysql-format-YYYY-MM-DD.md
================================================
---
extends: _layouts.usecase
date: 2019-12-01
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString
reference: Date.toISOString
category: datetime
---
```javascript
const date = new Date();
//YYYY-MM-DD format
const mysqlDate = date.toISOString().split("T")[0];
```
<pre class="output">2019-12-01</pre>
================================================
FILE: source/_jsusecases/convert-date-to-timestamp.md
================================================
---
extends: _layouts.usecase
date: 2017-12-26
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getTime
reference: Date.getTime
category: datetime
---
```javascript
const date = new Date("Jan 10, 2000");
const timestamp = date.getTime();
```
<pre class="output">947455200000</pre>
================================================
FILE: source/_jsusecases/convert-from-degree-to-radian.md
================================================
---
extends: _layouts.usecase
date: 2017-12-21
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/PI
reference: Math.PI
category: numbers
---
```javascript
const degree = 90;
const radians = degree * (Math.PI / 180);
```
<pre class="output">1.5707963267948966</pre>
================================================
FILE: source/_jsusecases/convert-string-to-number.md
================================================
---
extends: _layouts.usecase
date: 2017-11-11
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/parseInt
reference: Number.parseInt
category: numbers
---
```javascript
Number.parseInt("24", 10);
```
<pre class="output">24</pre>
================================================
FILE: source/_jsusecases/copy-text-to-clipboard.md
================================================
---
extends: _layouts.usecase
date: 2018-02-19
link: https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
reference: Document.execCommand
category: strings
---
```javascript
const textToCopy = "npm install webdash";
const el = document.createElement("textarea");
el.textContent = textToCopy;
el.style.cssText = "position: absolute;left:-500%";
document.body.appendChild(el);
el.select();
document.execCommand("copy");
el.remove();
```
================================================
FILE: source/_jsusecases/create-a-promise.md
================================================
---
extends: _layouts.usecase
date: 2024-02-28
link: https://learnjavascript.online/topics/promises.html?utm_source=codetogo.io
reference: Promises
reference_website: Learn JavaScript
related: async-await
category: promise
---
```javascript
new Promise((resolve, reject) => {
// Do some work
// then in case of success
resolve();
// or
reject("failure reason");
});
```
================================================
FILE: source/_jsusecases/create-a-range-array.md
================================================
---
extends: _layouts.usecase
date: 2024-02-27
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
reference: Object.keys
category: Arrays
---
```javascript
// Create a range from 0 to 4
[...Array(5).keys()];
```
<pre class="output">[0, 1, 2, 3, 4]</pre>
================================================
FILE: source/_jsusecases/create-a-regex.md
================================================
---
extends: _layouts.usecase
date: 2017-11-11
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp
reference: RegExp
category: regex
---
```javascript
let pattern = /hello world/;
```
================================================
FILE: source/_jsusecases/create-a-switch-statement.md
================================================
---
extends: _layouts.usecase
date: 2017-12-24
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch
reference: switch
category: syntax
---
```javascript
let key = "right";
switch (key) {
case "right":
console.log("Go right");
break;
case "left":
console.log("Go left");
break;
}
```
<pre class="output">Go right</pre>
================================================
FILE: source/_jsusecases/create-an-object.md
================================================
---
extends: _layouts.usecase
date: 2017-11-11
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object
reference: Object
category: objects
---
```javascript
const person = {
key: "value",
first_name: "John",
last_name: "Doe"
};
```
================================================
FILE: source/_jsusecases/create-array-from-existing-array.md
================================================
---
extends: _layouts.usecase
date: 2017-12-21
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator
reference: Spread operator
related: add-item-to-sessionstorage
category: arrays
---
```javascript
const apps = ["phone", "calculator", "clock"];
const clonedApps = [...apps];
```
<pre class="output">["phone", "calculator", "clock"]</pre>
================================================
FILE: source/_jsusecases/create-date-in-RFC3339-format.md
================================================
---
extends: _layouts.usecase
date: 2024-02-26
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString
reference: Date.toISOString()
related: get-human-friendly-date-difference
category: datetime
---
```javascript
const date = new Date();
// RFC 3339 format
const rfc339 = date.toISOString();
```
<pre class="output">2024-02-26T20:11:23.708Z</pre>
================================================
FILE: source/_jsusecases/create-logical-AND-condition.md
================================================
---
extends: _layouts.usecase
date: 2018-01-02
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators
reference: Logical operators
related: create-logical-OR-condition
category: syntax
---
```javascript
const isLearning = true;
const isOverwhelmed = true;
if (isLearning && isOverwhelmed) {
console.log("Take a break");
}
```
<pre class="output">Take a break</pre>
================================================
FILE: source/_jsusecases/create-logical-NOT-condition.md
================================================
---
extends: _layouts.usecase
date: 2018-01-02
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators
reference: Logical operators
category: syntax
---
```javascript
const isOverage = false;
if (!isOverage) {
console.log("You are underage");
}
```
<pre class="output">You are underage</pre>
================================================
FILE: source/_jsusecases/create-logical-OR-condition.md
================================================
---
extends: _layouts.usecase
date: 2018-01-02
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators
reference: Logical operators
related: create-logical-AND-condition
category: syntax
---
```javascript
const isUnderage = true;
const isDrunk = false;
if (isUnderage || isDrunk) {
console.log("Cannot drive");
}
```
<pre class="output">Cannot drive</pre>
================================================
FILE: source/_jsusecases/create-object-from-array.md
================================================
---
extends: _layouts.usecase
date: 2020-02-18
category: arrays
---
```javascript
const apps = ["phone", "calculator", "clock"];
const object = { ...apps };
console.log(object);
```
<pre class="output">
{
0: "phone",
1: "calculator",
2: "clock"
}
</pre>
================================================
FILE: source/_jsusecases/create-shallow-copy-of-object.md
================================================
---
extends: _layouts.usecase
date: 2018-08-14
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator
reference: Spread operator
category: objects
---
```javascript
const person = {
id: 1,
name: {
first: "John",
last: "Doe"
}
};
const duplicate = { ...person };
```
<pre class="output">
{
id: 1,
name: {
first: 'John',
last: 'Doe'
}
}
</pre>
================================================
FILE: source/_jsusecases/create-string-from-character-code.md
================================================
---
extends: _layouts.usecase
date: 2017-12-23
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode
reference: String.fromCharCode
category: strings
---
```javascript
String.fromCharCode(67, 111, 111, 108, 46);
```
<pre class="output">Cool.</pre>
================================================
FILE: source/_jsusecases/decode-url.md
================================================
---
extends: _layouts.usecase
date: 2017-12-18
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent
reference: decodeURIComponent
related: encode-url
category: URL
---
```javascript
const search = "hello%20world%3F";
decodeURIComponent(search);
```
<pre class="output">
hello world?
</pre>
================================================
FILE: source/_jsusecases/decrement-a-variable.md
================================================
---
extends: _layouts.usecase
date: 2024-02-27
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators
reference: Arithmetic operators
related: increment-a-variable
category: numbers
---
```javascript
let limit = 10;
limit--;
console.log(limit);
```
<pre class="output">9</pre>
================================================
FILE: source/_jsusecases/define-a-class.md
================================================
---
extends: _layouts.usecase
date: 2017-12-18
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
reference: Classes
category: syntax
---
```javascript
class Pencil {
constructor(price) {
this.price = price;
}
isExpensive() {
return this.price >= 10;
}
}
//usage
const bic = new Pencil(3);
bic.isExpensive();
```
<pre class="output">false</pre>
================================================
FILE: source/_jsusecases/define-a-function-with-default-parameter.md
================================================
---
extends: _layouts.usecase
date: 2017-12-18
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters
reference: Default parameters
category: syntax
---
```javascript
function greetUser(name = "user") {
return `Welcome ${name} to code to go!`;
}
let result = greetUser();
console.log(result);
```
<pre class="output">Welcome user to code to go!</pre>
================================================
FILE: source/_jsusecases/define-variable.md
================================================
---
extends: _layouts.usecase
date: 2024-02-27
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
reference: let
category: syntax
---
```javascript
// Variables that can be re-assigned
let counter = 0;
counter += 1;
// Variables that cannot be re-assigned
const ageLimit = 18;
```
================================================
FILE: source/_jsusecases/delete-item-from-array.md
================================================
---
extends: _layouts.usecase
date: 2017-12-23
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
reference: Array.splice
category: arrays
---
```javascript
const apps = ["phone", "calculator", "codetogo", "clock"];
apps.splice(2, 1);
console.log(apps);
```
<pre class="output">["phone", "calculator", "clock"]</pre>
================================================
FILE: source/_jsusecases/destructure-from-array.md
================================================
---
extends: _layouts.usecase
date: 2017-12-16
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring
reference: Array destructuring
related: destructure-from-object,destructure-with-default-value
category: syntax
---
```javascript
const [lat, lng] = [52.369661, 4.897243];
console.log(lat, lng);
```
<pre class="output">
52.369661
4.897243
</pre>
================================================
FILE: source/_jsusecases/destructure-from-object.md
================================================
---
extends: _layouts.usecase
date: 2017-12-16
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring
reference: Object destructuring
related: destructure-from-array,destructure-with-default-value
category: syntax
---
```javascript
const { lat, lng } = {
lat: 52.369661,
lng: 4.897243,
elevation: -2
};
console.log(lat, lng);
```
<pre class="output">
52.369661
4.897243
</pre>
================================================
FILE: source/_jsusecases/destructure-with-default-value.md
================================================
---
extends: _layouts.usecase
date: 2017-12-23
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring
reference: Array destructuring
related: destructure-from-array,destructure-from-object
category: syntax
---
```javascript
const { id, active = true } = {
id: 10,
name: "John"
};
console.log(id, active);
```
<pre class="output">
10
true
</pre>
================================================
FILE: source/_jsusecases/empty-array.md
================================================
---
extends: _layouts.usecase
date: 2017-12-16
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/length
reference: Array.length
category: arrays
---
```javascript
const apps = ["phone", "calculator", "clock"];
apps.length = 0;
console.log(apps);
```
<pre class="output">[]</pre>
================================================
FILE: source/_jsusecases/encode-url.md
================================================
---
extends: _layouts.usecase
date: 2017-12-18
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent
reference: encodeURIComponent
related: decode-url
category: URL
---
```javascript
const query = encodeURIComponent("hello world?");
//safe to add to URL
const url = `https://google.com/search?q=${query}`;
```
<pre class="output">
<a href="https://google.com/search?q=hello%20world%3F" target="_blank" rel="noopener">https://google.com/search?q=hello%20world%3F</a>
</pre>
================================================
FILE: source/_jsusecases/fetch-XML.md
================================================
---
extends: _layouts.usecase
date: 2024-02-26
link: https://learnjavascript.online/topics/fetch.html?utm_source=codetogo.io
reference_website: Learn JavaScript
reference: Fetch API use cases
related: async-await-fetch
category: JSON
extra: https://learnjavascript.online/topics/fetch.html?utm_source=codetogo.io
---
```javascript
fetch("https://codetogo.io/api/users.xml")
.then(response => response.text())
.then(data => {
const parser = new DOMParser();
const xml = parser.parseFromString(data, "application/xml");
console.log(xml);
})
.catch(console.error);
```
<pre class="output">
<users>
<user>
<id>1</id>
<name>Alex</name>
</user>
<user>
<id>2</id>
<name>Sam</name>
</user>
</users>
</pre>
================================================
FILE: source/_jsusecases/fetch-json.md
================================================
---
extends: _layouts.usecase
date: 2024-02-13
link: https://learnjavascript.online/topics/fetch.html?utm_source=codetogo.io
reference_website: Learn JavaScript
reference: Fetch API use cases
related: async-await-fetch
category: JSON
---
```javascript
fetch("https://codetogo.io/api/users.json")
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(console.error);
```
<pre class="output">
[{
id: 1,
name: "Sam"
}, {
id: 2,
name: "Alex"
}]
</pre>
================================================
FILE: source/_jsusecases/fetch-post-json.md
================================================
---
extends: _layouts.usecase
date: 2024-02-13
link: https://learnjavascript.online/topics/fetch.html?utm_source=codetogo.io
reference_website: Learn JavaScript
reference: Fetch API use cases
related: fetch-json
category: JSON
extra: https://learnjavascript.online/topics/fetch.html?utm_source=codetogo.io
---
```javascript
fetch("https://codetogo.io/api/users.json", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
key1: "value1"
})
})
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(console.error);
```
<pre class="output">
[{
id: 1,
name: "Sam"
}, {
id: 2,
name: "Alex"
}]
</pre>
================================================
FILE: source/_jsusecases/filter-objects-in-array.md
================================================
---
extends: _layouts.usecase
date: 2017-12-18
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
reference: Array.filter
category: arrays
---
```javascript
const friends = [
{ name: "Abby", age: 22 },
{ name: "Boby", age: 16 },
{ name: "Coel", age: 20 },
{ name: "Dany", age: 15 }
];
//who can drink?
friends.filter(friend => friend.age >= 18);
```
<pre class="output">
[
{ name: 'Abby', age: 22 },
{ name: 'Coel', age: 20 },
]
</pre>
================================================
FILE: source/_jsusecases/find-an-element-from-the-DOM.md
================================================
---
extends: _layouts.usecase
date: 2018-03-11
link: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
reference: Document.querySelector
related: find-element-by-id,find-element-by-class,find-multiple-DOM-elements
category: DOM
---
```html
<div id="box"></div>
<div class="title"></div>
```
```javascript
const box = document.querySelector("#box");
const title = document.querySelector(".title");
```
================================================
FILE: source/_jsusecases/find-element-by-class.md
================================================
---
extends: _layouts.usecase
date: 2018-03-11
link: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
reference: Document.querySelector
related: find-element-by-id,find-multiple-DOM-elements,find-an-element-from-the-DOM
category: DOM
---
```html
<div class="box"></div>
```
```javascript
const element = document.querySelector(".box");
```
================================================
FILE: source/_jsusecases/find-element-by-id.md
================================================
---
extends: _layouts.usecase
date: 2018-03-11
link: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
reference: Document.getElementById
related: find-element-by-class,find-multiple-DOM-elements,find-an-element-from-the-DOM
category: DOM
---
```html
<div id="box"></div>
```
```javascript
const element = document.getElementById("box");
// OR
const alt = documnet.querySelector("#box");
```
================================================
FILE: source/_jsusecases/find-index-of-element-in-array.md
================================================
---
extends: _layouts.usecase
date: 2018-03-29
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf
reference: Array.indexOf
category: arrays
---
```javascript
const colors = ["red", "green", "blue"];
colors.indexOf("green");
```
<pre class="output">1</pre>
================================================
FILE: source/_jsusecases/find-multiple-DOM-elements.md
================================================
---
extends: _layouts.usecase
date: 2018-03-11
link: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
reference: Document.querySelectorAll
related: find-element-by-id,find-element-by-class,find-an-element-from-the-DOM
category: DOM
---
```html
<div class="boxes"></div>
<div class="boxes"></div>
```
```javascript
const elements = document.querySelectorAll(".boxes");
```
================================================
FILE: source/_jsusecases/find-next-element.md
================================================
---
extends: _layouts.usecase
date: 2024-02-26
link: https://developer.mozilla.org/en-US/docs/Web/API/NonDocumentTypeChildNode/nextElementSibling
reference: nextElementSibling
related: find-previous-element
category: DOM
---
```html
<div id="box"></div>
<div>Next element</div>
```
```javascript
const box = document.querySelector("#box1");
const next = box.nextElementSibling;
```
<pre class="output"><div>Next element</div></pre>
================================================
FILE: source/_jsusecases/find-previous-element.md
================================================
---
extends: _layouts.usecase
date: 2018-03-11
link: https://developer.mozilla.org/en-US/docs/Web/API/NonDocumentTypeChildNode/previousElementSibling
reference: previousElementSibling
related: find-next-element
category: DOM
---
```html
<div id="box1"></div>
<div id="box2"></div>
```
```javascript
const box2 = document.querySelector("#box2");
const box1 = box2.previousElementSibling;
```
================================================
FILE: source/_jsusecases/find-root-of-positive-number.md
================================================
---
extends: _layouts.usecase
date: 2017-12-26
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow
reference: Math.pow
category: numbers
---
```javascript
const number = 16;
const result = Math.pow(number, 1 / 2);
```
<pre class="output">4</pre>
================================================
FILE: source/_jsusecases/flatten-a-nested-array.md
================================================
---
extends: _layouts.usecase
date: 2018-02-21
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
reference: Array
category: arrays
---
```javascript
const nestedArray = [1, [2], [[3], 4], 5];
const flatten = nestedArray =>
nestedArray.reduce(
(flat, item) => flat.concat(Array.isArray(item) ? flatten(item) : [item]),
[]
);
flatten(nestedArray);
```
<pre class="output">[1, 2, 3, 4, 5 ]</pre>
================================================
FILE: source/_jsusecases/format-currency-as-per-locale.md
================================================
---
extends: _layouts.usecase
date: 2018-03-04
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString
reference: Number.toLocaleString
category: numbers
---
```javascript
const amount = 1999.9;
const options = {
style: "currency",
currency: "USD"
};
amount.toLocaleString("en-US", options);
```
<pre class="output">$1,999.90</pre>
================================================
FILE: source/_jsusecases/format-date.md
================================================
---
extends: _layouts.usecase
date: 2020-08-16
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat
reference: Intl.DateTimeFormat
related: get-current-day-name,get-current-month-name
category: datetime
---
```javascript
const date = new Date();
// remove an option to hide it from the output
const options = {
weekday: "long", // or: "short", "numeric"
month: "long", //or: "short", "numeric"
day: "numeric",
year: "numeric",
day: "numeric",
hour: "numeric",
minute: "numeric",
second: "numeric"
};
// replace "en-US" with undefined to use the user's locale
new Intl.DateTimeFormat("en-US", options).format(date);
```
<pre class="output">
Sunday, August 16, 2020, 7:34:44 PM
</pre>
================================================
FILE: source/_jsusecases/generate-random-string.md
================================================
---
extends: _layouts.usecase
date: 2018-03-12
category: strings
---
```javascript
const length = 20;
//should NOT be used for cryptography
const randomString = [...Array(length)]
.map(() => Math.random().toString(36)[5])
.join("");
```
<pre class="output">ga6fr8rf7uan1yn2adqy</pre>
================================================
FILE: source/_jsusecases/get-CSS-custom-property.md
================================================
---
extends: _layouts.usecase
date: 2018-03-12
link: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/getPropertyValue
reference: Style.getPropertyValue
related: set-CSS-custom-property
category: DOM
---
```css
:root {
--primary-color: #ececec;
}
```
```javascript
const color = getComputedStyle(document.body).getPropertyValue(
"--primary-color"
);
```
<pre class="output">#ECECEC</pre>
================================================
FILE: source/_jsusecases/get-CSS-property.md
================================================
---
extends: _layouts.usecase
date: 2018-07-29
link: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
reference: Window.getComputedStyle
related: change-CSS-property
category: DOM
---
```css
#box {
padding: 15px;
}
```
```html
<div id="box"></div>
```
```javascript
const div = document.querySelector("#box");
const padding = getComputedStyle(div).padding;
```
<pre class="output">15px</pre>
================================================
FILE: source/_jsusecases/get-count-of-DOM-elements.md
================================================
---
extends: _layouts.usecase
date: 2018-03-09
link: https://developer.mozilla.org/en-US/docs/Web/API/NodeList/length
reference: NodeList.length
category: DOM
---
```html
<div class="title"></div>
<div class="title"></div>
```
```javascript
const elements = document.querySelectorAll(".title");
const length = elements.length;
```
<pre class="output">2</pre>
================================================
FILE: source/_jsusecases/get-count-of-character-in-string.md
================================================
---
extends: _layouts.usecase
date: 2018-02-16
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split
reference: String.split
category: strings
---
```javascript
const name = "Jad Joubran";
const countJ = name.split("J").length - 1;
```
<pre class="output">2</pre>
================================================
FILE: source/_jsusecases/get-count-of-duplicate-items-in-array.md
================================================
---
extends: _layouts.usecase
date: 2018-01-08
category: arrays
---
```javascript
const chars = ["a", "b", "c", "a", "a", "c"];
let result = {};
result = chars.reduce((acc, item) => {
acc[item] = acc[item] ? ++acc[item] : 1;
return acc;
}, result);
```
<pre class="output">
{
a: 3,
b: 1,
c: 2
}
</pre>
================================================
FILE: source/_jsusecases/get-current-day-name.md
================================================
---
extends: _layouts.usecase
date: 2017-12-29
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat
reference: Intl.DateTimeFormat
related: get-current-short-day-name,get-current-month-name
category: datetime
---
```javascript
const date = Date.now();
const options = { weekday: "long" };
new Intl.DateTimeFormat("en-US", options).format(date);
```
<pre class="output">
Friday
</pre>
================================================
FILE: source/_jsusecases/get-current-month-name.md
================================================
---
extends: _layouts.usecase
date: 2017-12-29
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat
reference: Intl.DateTimeFormat
related: get-current-short-month-name,get-current-day-name
category: datetime
---
```javascript
const date = Date.now();
const options = { month: "long" };
new Intl.DateTimeFormat("en-US", options).format(date);
```
<pre class="output">
December
</pre>
================================================
FILE: source/_jsusecases/get-current-page-url.md
================================================
---
extends: _layouts.usecase
date: 2017-12-16
link: https://developer.mozilla.org/en-US/docs/Web/API/Window/location
reference: Window.location
category: URL
---
```javascript
window.location.href;
```
<pre class="output">https://codetogo.io/how-to-get-current-page-url-in-javascript/</pre>
================================================
FILE: source/_jsusecases/get-current-short-day-name.md
================================================
---
extends: _layouts.usecase
date: 2018-01-04
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat
reference: Intl.DateTimeFormat
related: get-current-day-name,get-current-month-name
category: datetime
---
```javascript
const date = Date.now();
const options = { weekday: "short" };
new Intl.DateTimeFormat("en-US", options).format(date);
```
<pre class="output">
Thu
</pre>
================================================
FILE: source/_jsusecases/get-current-short-month-name.md
================================================
---
extends: _layouts.usecase
date: 2018-01-04
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat
reference: Intl.DateTimeFormat
related: get-current-month-name,get-current-day-name
category: datetime
---
```javascript
const date = Date.now();
const options = { month: "short" };
new Intl.DateTimeFormat("en-US", options).format(date);
```
<pre class="output">
Jan
</pre>
================================================
FILE: source/_jsusecases/get-current-timestamp-in-seconds.md
================================================
---
extends: _layouts.usecase
date: 2017-12-26
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/now
reference: Date.now
related: get-current-timestamp
category: datetime
---
```javascript
const timestamp = Math.floor(Date.now() / 1000);
console.log(timestamp); //in seconds
```
<pre class="output">1514300500</pre>
================================================
FILE: source/_jsusecases/get-current-timestamp.md
================================================
---
extends: _layouts.usecase
date: 2017-12-26
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/now
reference: Date.now
related: get-current-timestamp-in-seconds
category: datetime
---
```javascript
const timestamp = Date.now();
console.log(timestamp); //in milliseconds
```
<pre class="output">1514300333756</pre>
================================================
FILE: source/_jsusecases/get-current-year.md
================================================
---
extends: _layouts.usecase
date: 2018-01-04
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getFullYear
reference: Date.getFullYear
related: get-current-day-name,get-current-month-name
category: datetime
---
```javascript
const date = new Date();
const year = date.getFullYear();
```
<pre class="output">
2018
</pre>
================================================
FILE: source/_jsusecases/get-data-attribute-from-element.md
================================================
---
extends: _layouts.usecase
date: 2018-07-28
link: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
reference: dataset
category: DOM
---
```html
<div id="box" data-user-id="123"></div>
```
```javascript
const box = document.querySelector("#box");
const userId = box.dataset.userId;
```
<pre class="output">123</pre>
================================================
FILE: source/_jsusecases/get-division-remainder.md
================================================
---
extends: _layouts.usecase
date: 2018-03-08
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder_()
reference: Remainder
category: numbers
---
```javascript
const even = 8 % 2;
const odd = 5 % 2;
console.log({ even, odd });
```
<pre class="output">{
even: 0,
odd: 1
}</pre>
================================================
FILE: source/_jsusecases/get-extension-from-input-type-file.md
================================================
---
extends: _layouts.usecase
date: 2018-12-26
category: functions
---
```html
<input type="file" id="upload">
```
```javascript
const upload = document.querySelector("#upload");
upload.addEventListener("change", event => {
const file = event.currentTarget.value;
if (!file) {
return false;
}
const extension = file.substring(file.lastIndexOf(".") + 1);
});
```
================================================
FILE: source/_jsusecases/get-file-name-from-path.md
================================================
---
extends: _layouts.usecase
date: 2018-12-26
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/lastIndexOf
reference: String.lastIndexOf
related: get-path-from-full-path
category: strings
---
```javascript
const url = "/Users/code/codetogo/index.html";
url.substring(url.lastIndexOf("/") + 1);
```
<pre class="output">index.html</pre>
================================================
FILE: source/_jsusecases/get-first-character-of-string.md
================================================
---
extends: _layouts.usecase
date: 2018-12-26
related: get-last-character-of-string
category: strings
---
```javascript
const name = "William moore";
name[0];
```
<pre class="output">W</pre>
================================================
FILE: source/_jsusecases/get-function-arguments-as-array.md
================================================
---
extends: _layouts.usecase
date: 2017-12-19
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator
reference: Spread operator
category: functions
---
```javascript
function log(...msgs) {
//msgs is now an array
console.log(`Received ${msgs.length} messages`);
}
log("code", "to", "go");
log("code", "to", "go", "is", "cool");
```
<pre class="output">
Received 3 messages
Received 5 messages
</pre>
================================================
FILE: source/_jsusecases/get-human-friendly-date-difference.md
================================================
---
extends: _layouts.usecase
date: 2024-02-27
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat
reference: Intl.RelativeTimeFormat
related: get-minutes-ago,create-date-in-RFC3339-format
category: datetime
---
```javascript
const formatter = new Intl.RelativeTimeFormat("en");
const t1 = 1709042520000;
const t2 = 1709042400000;
// Date diff & convert from ms to minutes
const diff = (t2 - t1) / 60 / 1000;
formatter.format(diff, "minutes");
```
<pre class="output">2 minutes ago</pre>
================================================
FILE: source/_jsusecases/get-item-from-localstorage.md
================================================
---
extends: _layouts.usecase
date: 2017-12-19
link: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
reference: Window.localStorage
related: add-item-to-localstorage
category: storage
---
```javascript
localStorage.getItem("name");
```
================================================
FILE: source/_jsusecases/get-item-from-sessionstorage.md
================================================
---
extends: _layouts.usecase
date: 2017-12-21
link: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
reference: Window.sessionStorage
related: add-item-to-sessionstorage
category: storage
---
```javascript
sessionStorage.getItem("name");
```
================================================
FILE: source/_jsusecases/get-keys-of-object.md
================================================
---
extends: _layouts.usecase
date: 2017-12-16
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
reference: Object.keys
category: objects
---
```javascript
const person = {
key: "value",
first_name: "John",
last_name: "Doe"
};
Object.keys(person);
```
<pre class="output">['key', 'first_name', 'last_name']</pre>
================================================
FILE: source/_jsusecases/get-last-array-element.md
================================================
---
extends: _layouts.usecase
date: 2024-02-28
link: https://blog.learnjavascript.online/posts/javascript-at-method/
reference: String.at()
reference_website: Learn JavaScript Blog
category: arrays
related: get-last-character-of-string
---
```javascript
const apps = ["phone", "calculator", "clock"];
apps.at(-1);
```
<pre class="output">"clock"</pre>
================================================
FILE: source/_jsusecases/get-last-character-of-string.md
================================================
---
extends: _layouts.usecase
date: 2022-08-18
link: https://blog.learnjavascript.online/posts/javascript-at-method/
reference: String.at()
reference_website: Learn JavaScript Blog
related: get-first-character-of-string,get-last-array-element
category: strings
---
```javascript
const name = "Lewis";
name.at(-1);
```
<pre class="output">s</pre>
================================================
FILE: source/_jsusecases/get-length-of-array.md
================================================
---
extends: _layouts.usecase
date: 2017-12-29
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/length
reference: Array.length
category: arrays
---
```javascript
const apps = ["phone", "calculator", "clock"];
const count = apps.length;
```
<pre class="output">3</pre>
================================================
FILE: source/_jsusecases/get-length-of-string.md
================================================
---
extends: _layouts.usecase
date: 2017-12-29
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length
reference: String.length
category: strings
---
```javascript
const name = "Penny";
console.log(name.length);
```
<pre class="output">
5
</pre>
================================================
FILE: source/_jsusecases/get-minutes-ago.md
================================================
---
extends: _layouts.usecase
date: 2024-02-27
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat
reference: Intl.RelativeTimeFormat
related: get-human-friendly-date-difference,create-date-in-RFC3339-format
category: datetime
---
```javascript
const formatter = new Intl.RelativeTimeFormat("en", {
// Change to "short" for min. (instead of minutes)
style: "long"
});
// -5 can be the difference between 2 date objects
formatter.format(-5, "minutes");
```
<pre class="output">5 minutes ago</pre>
================================================
FILE: source/_jsusecases/get-path-from-full-path.md
================================================
---
extends: _layouts.usecase
date: 2018-12-26
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/lastIndexOf
reference: String.lastIndexOf
related: get-file-name-from-path
category: strings
---
```javascript
const url = "/Users/code/codetogo/index.html";
url.substring(0, url.lastIndexOf("/") + 1);
```
<pre class="output">/Users/code/codetogo/</pre>
================================================
FILE: source/_jsusecases/get-port-from-url.md
================================================
---
extends: _layouts.usecase
date: 2018-04-28
link: https://developer.mozilla.org/en-US/docs/Web/API/Location
reference: Location.port
related: get-current-page-url
category: URL
---
```javascript
window.location.port;
```
================================================
FILE: source/_jsusecases/get-random-element-from-array.md
================================================
---
extends: _layouts.usecase
date: 2022-08-18
link: https://blog.learnjavascript.online/posts/javascript-at-method/
reference: String.at()
reference_website: Learn JavaScript Blog
category: arrays
---
```javascript
const names = ["Sam", "Alex", "Charley"];
names.at(Math.random() * names.length);
```
<pre class="output">
a random element from the names array
</pre>
================================================
FILE: source/_jsusecases/get-random-hex-color.md
================================================
---
extends: _layouts.usecase
date: 2020-02-18
category: numbers
---
```javascript
const hex = Math.floor(Math.random() * 0xffffff)
.toString(16)
.padStart(6, "0");
const color = `#${hex}`;
console.log(color);
```
<pre class="output">#a75d43</pre>
================================================
FILE: source/_jsusecases/get-random-number-between-two-numbers.md
================================================
---
extends: _layouts.usecase
date: 2018-01-08
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
reference: Math.random
category: numbers
---
```javascript
const min = 0;
const max = 10;
let rand;
rand = Math.floor(Math.random() * (max - min + 1)) + min;
```
<pre class="output">
a random number between 0 and 10 inclusive
</pre>
================================================
FILE: source/_jsusecases/get-unique-values-from-object-array-property.md
================================================
---
extends: _layouts.usecase
date: 2018-03-06
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
reference: Set
category: objects
related: remove-duplicates-from-array
---
```javascript
const objects = [
{ id: 1, category: "Cars" },
{ id: 2, category: "Cars" },
{ id: 3, category: "Smatphones" },
{ id: 4, category: "Cars" },
{ id: 5, category: "Tablet" }
];
const categories = [...new Set(objects.map(object => object.category))];
```
<pre class="output">["Cars", "Smartphones", "Tablet"]</pre>
================================================
FILE: source/_jsusecases/get-url-search-params.md
================================================
---
extends: _layouts.usecase
date: 2018-03-04
link: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
reference: URLSearchParams
related: set-url-search-params
category: URL
---
```javascript
//https://codetogo.io?lang=en
const url = new URL(document.location);
const lang = url.searchParams.get("lang");
```
<pre class="output">en</pre>
================================================
FILE: source/_jsusecases/hide-element.md
================================================
---
extends: _layouts.usecase
date: 2018-03-11
related: show-element
category: DOM
---
```html
<div id="box"></div>
```
```javascript
const element = document.querySelector("#box");
element.style.display = "none";
```
================================================
FILE: source/_jsusecases/increment-a-variable.md
================================================
---
extends: _layouts.usecase
date: 2024-02-27
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators
reference: Arithmetic operators
related: decrement-a-variable
category: syntax
---
```javascript
let counter = 0;
counter++;
console.log(counter);
```
<pre class="output">1</pre>
================================================
FILE: source/_jsusecases/interpolate.md
================================================
---
extends: _layouts.usecase
date: 2024-02-26
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
reference: Template literals
related: write-a-multiline-string
category: strings
---
```javascript
const name = "Sam";
console.log(`Welcome ${name}.
You have ${2 * 5} new notifications!`);
```
<pre class="output">
Welcome Sam.
You have 10 new notifications!
</pre>
================================================
FILE: source/_jsusecases/listen-to-click-event.md
================================================
---
extends: _layouts.usecase
date: 2017-11-11
link: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
reference: EventTarget.addEventListener
related: prevent-default-action-of-event
category: DOM
---
```html
<div id="box"></div>
```
```javascript
const element = document.querySelector("#box");
element.addEventListener("click", event => {
console.log("Element clicked");
});
```
================================================
FILE: source/_jsusecases/listen-to-hover-event.md
================================================
---
extends: _layouts.usecase
date: 2024-02-26
link: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
reference: EventTarget.addEventListener
category: DOM
---
```html
<div id="box"></div>
```
```javascript
const element = document.querySelector("#box");
element.addEventListener("mouseover", event => {
console.log("Mouse in (over)");
});
element.addEventListener("mouseout", event => {
console.log("Mouse out");
});
```
================================================
FILE: source/_jsusecases/listen-to-scroll-event.md
================================================
---
extends: _layouts.usecase
date: 2018-11-05
link: https://developer.mozilla.org/en-US/docs/Web/Events/scroll
category: DOM
---
```javascript
window.addEventListener("scroll", event => {
console.log("Window scrolled", event);
});
```
================================================
FILE: source/_jsusecases/loop-backwards-through-array.md
================================================
---
extends: _layouts.usecase
date: 2017-12-18
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse
reference: Array.reverse
related: loop-through-array
category: arrays
---
```javascript
const people = ["John", "Nicole", "Jad"];
for (const person of people.reverse()) {
console.log(person);
}
```
<pre class="output">
Jad
Nicole
John
</pre>
================================================
FILE: source/_jsusecases/loop-through-array.md
================================================
---
extends: _layouts.usecase
date: 2020-02-22
link: https://blog.learnjavascript.online/posts/javascript-foreach-the-complete-guide/
reference: JavaScript forEach
reference_website: Learn JavaScript Blog
related: loop-through-object
category: arrays
---
```javascript
const people = ["Sam", "Alex", "Charlie"];
people.forEach(person => {
console.log(person);
});
```
<pre class="output">
Sam
Alex
Charlie
</pre>
================================================
FILE: source/_jsusecases/loop-through-object.md
================================================
---
extends: _layouts.usecase
date: 2017-11-11
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Object/values
reference: Object.values
category: objects
---
```javascript
const repository = {
id: 1,
language: "javascript",
public: true
};
for (const value of Object.values(repository)) {
console.log(value);
}
```
<pre class="output">
1
javascript
true
</pre>
================================================
FILE: source/_jsusecases/lowercase-a-string.md
================================================
---
extends: _layouts.usecase
date: 2017-11-11
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase
reference: String.toLowerCase
related: uppercase-a-string
category: strings
---
```javascript
const text = "Hello World";
text.toLowerCase();
```
<pre class="output">hello world</pre>
================================================
FILE: source/_jsusecases/manually-trigger-event-on-element.md
================================================
---
extends: _layouts.usecase
date: 2018-03-11
link: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events
reference: Events
category: DOM
---
```html
<button id="submit"></button>
```
```javascript
const button = document.querySelector("#submit");
//trigger click
button.dispatchEvent(new Event("click"));
```
================================================
FILE: source/_jsusecases/match-text-against-regex.md
================================================
---
extends: _layouts.usecase
date: 2017-11-11
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp
reference: RegExp
related: create-a-regex
category: regex
---
```javascript
const result = "My age is 41".match(/\d+/);
console.log(result);
console.log(result[0]);
```
<pre class="output">
["41", index: 10, input: "My age is 41"]
41
</pre>
================================================
FILE: source/_jsusecases/open-url-in-new-tab.md
================================================
---
extends: _layouts.usecase
date: 2018-04-28
link: https://developer.mozilla.org/en-US/docs/Web/API/Window/open
reference: Window.open
category: URL
---
```javascript
window.open("https://example.com");
```
================================================
FILE: source/_jsusecases/parse-JSON-string.md
================================================
---
extends: _layouts.usecase
date: 2018-01-11
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse
reference: JSON.parse
related: convert-JSON-to-string
category: JSON
---
```javascript
const string = '{"id":1,"name":"Leanne Graham"}';
JSON.parse(string);
```
<pre class="output">
{
id: 1,
name: "Leanne Graham"
}
</pre>
================================================
FILE: source/_jsusecases/pause-audio.md
================================================
---
extends: _layouts.usecase
date: 2018-03-12
link: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause
reference: HTMLMediaElement.pause
related: play-audio,stop-audio
category: DOM
---
```html
<audio id="audio" controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
```
```javascript
const audio = document.querySelector("#audio");
audio.pause();
```
================================================
FILE: source/_jsusecases/pause-video.md
================================================
---
extends: _layouts.usecase
date: 2018-03-12
link: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause
reference: HTMLMediaElement.pause
related: play-video,stop-video
category: DOM
---
```html
<video id="video" controls>
<source src="movie.mp4" type="video/mp4">
</video>
```
```javascript
const video = document.querySelector("#video");
video.pause();
```
================================================
FILE: source/_jsusecases/play-audio.md
================================================
---
extends: _layouts.usecase
date: 2018-03-12
link: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play
reference: HTMLMediaElement.play
related: pause-audio,stop-audio
category: DOM
---
```html
<audio id="audio" controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
```
```javascript
const audio = document.querySelector("#audio");
audio.play();
```
================================================
FILE: source/_jsusecases/play-video.md
================================================
---
extends: _layouts.usecase
date: 2018-03-12
link: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play
reference: HTMLMediaElement.play
related: pause-video,stop-video
category: DOM
---
```html
<video id="video" controls>
<source src="movie.mp4" type="video/mp4">
</video>
```
```javascript
const video = document.querySelector("#video");
video.play();
```
================================================
FILE: source/_jsusecases/prevent-default-action-of-event.md
================================================
---
extends: _layouts.usecase
date: 2017-12-16
link: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
reference: Event.preventDefault
related: listen-to-click-event
category: DOM
---
```html
<div id="box"></div>
```
```javascript
const element = document.querySelector("#box");
element.addEventListener("click", event => {
event.preventDefault();
//Default action prevented
});
```
================================================
FILE: source/_jsusecases/redirect-to-another-page.md
================================================
---
extends: _layouts.usecase
date: 2017-12-16
link: https://developer.mozilla.org/en-US/docs/Web/API/Window/location
reference: Window.location
category: URL
---
```javascript
window.location.href = "https://codetogo.io";
```
================================================
FILE: source/_jsusecases/register-a-service-worker.md
================================================
---
extends: _layouts.usecase
date: 2018-03-12
link: https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer/register
reference: ServiceWorkerContainer.register
category: PWA
---
```javascript
if ("serviceWorker" in navigator) {
window.addEventListener("load", () => {
navigator.serviceWorker
.register("/sw.js")
.then(registration => console.log(registration))
.catch(err => console.error(err));
});
}
```
================================================
FILE: source/_jsusecases/reload-page.md
================================================
---
extends: _layouts.usecase
date: 2017-11-11
link: https://developer.mozilla.org/en-US/docs/Web/API/Location/reload
reference: Location.reload
category: URL
---
```javascript
window.location.reload();
```
================================================
FILE: source/_jsusecases/remove-a-property-from-object.md
================================================
---
extends: _layouts.usecase
date: 2017-12-16
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete
reference: delete
category: objects
---
```javascript
const repository = {
id: 1,
language: "javascript",
public: true
};
delete repository.id;
console.log(repository);
```
<pre class="output">
{
language: 'javascript',
public: true
}
</pre>
================================================
FILE: source/_jsusecases/remove-class-from-element.md
================================================
---
extends: _layouts.usecase
date: 2018-03-11
link: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
reference: Element.classList
related: toggle-class-of-element,add-class-to-element,replace-a-class-of-element
category: DOM
---
```html
<div id="box" class="class-name"></div>
```
```javascript
const element = document.querySelector("#box");
element.classList.remove("class-name");
```
================================================
FILE: source/_jsusecases/remove-duplicates-from-array.md
================================================
---
extends: _layouts.usecase
date: 2018-03-06
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
reference: Set
category: arrays
related: get-unique-values-from-object-array-property
---
```javascript
const items = ["Cars", "Cars", "Smartphone", "Cars", "Tablet"];
const uniqueItems = [...new Set(items)];
```
<pre class="output">["Cars", "Smartphone", "Tablet"]</pre>
================================================
FILE: source/_jsusecases/remove-element-from-DOM.md
================================================
---
extends: _layouts.usecase
date: 2018-03-10
link: https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove
reference: ChildNode.remove
category: DOM
---
```html
<div id="box"></div>
```
```javascript
const element = document.querySelector("#box");
element.remove();
```
================================================
FILE: source/_jsusecases/remove-item-from-localstorage.md
================================================
---
extends: _layouts.usecase
date: 2017-12-19
link: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
reference: Window.localStorage
related: add-item-to-localstorage
category: storage
---
```javascript
localStorage.removeItem("name");
```
================================================
FILE: source/_jsusecases/remove-multiple-classes-from-element.md
================================================
---
extends: _layouts.usecase
date: 2018-09-22
link: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
reference: Element.classList
related: remove-class-from-element
category: DOM
---
```html
<div id="box" class="active highlighted"></div>
```
```javascript
const element = document.querySelector("#box");
element.classList.remove("active", "highlighted");
```
<pre class="output"><div id="box"></div></pre>
================================================
FILE: source/_jsusecases/repeat-a-string.md
================================================
---
extends: _layouts.usecase
date: 2020-08-16
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat
reference: String.repeat
category: strings
---
```javascript
const string = "Code";
string.repeat(3);
```
<pre class="output">"CodeCodeCode"</pre>
================================================
FILE: source/_jsusecases/replace-a-class-of-element.md
================================================
---
extends: _layouts.usecase
date: 2018-03-11
link: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
reference: Element.classList
related: remove-class-from-element,toggle-class-of-element,add-class-to-element
category: DOM
---
```html
<div id="box"></div>
```
```javascript
const element = document.querySelector("#box");
element.classList.replace("old-class-name", "new-class-name");
```
================================================
FILE: source/_jsusecases/replace-all-occurrences-of-string.md
================================================
---
extends: _layouts.usecase
date: 2017-12-16
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace
reference: String.replace
related: replace-spaces-with-dashes
category: strings
---
```javascript
const text = "We are outside. We are waiting.";
text.replace(/We/g, "You");
```
<pre class="output">You are outside. You are waiting.</pre>
================================================
FILE: source/_jsusecases/replace-element-content-HTML.md
================================================
---
extends: _layouts.usecase
date: 2018-03-11
link: https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
reference: Element.innerHTML
category: DOM
---
```html
<div id="box"></div>
```
```javascript
const element = document.querySelector("#box");
element.innerHTML = `<div>New Content</div>`;
```
================================================
FILE: source/_jsusecases/replace-spaces-with-dashes.md
================================================
---
extends: _layouts.usecase
date: 2017-12-16
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace
reference: String.replace
related: replace-all-occurrences-of-string
category: strings
---
```javascript
const text = "codetogo saved me tons of time";
text.replace(/ /g, "-");
```
<pre class="output">codetogo-saved-me-tons-of-time</pre>
================================================
FILE: source/_jsusecases/reverse-elements-of-array.md
================================================
---
extends: _layouts.usecase
date: 2017-12-19
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse
reference: Array.reverse
category: arrays
---
```javascript
const data = [1, 2, 3, 4, 5];
const reversed = data.reverse();
```
<pre class="output">[5, 4, 3, 2, 1]</pre>
================================================
FILE: source/_jsusecases/round-a-number.md
================================================
---
extends: _layouts.usecase
date: 2020-02-18
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round
reference: Math.round
category: numbers
---
```javascript
const number = 4.7138;
Math.round(number);
```
<pre class="output">5</pre>
================================================
FILE: source/_jsusecases/set-CSS-custom-property.md
================================================
---
extends: _layouts.usecase
date: 2018-03-12
link: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty
reference: Style.setProperty
related: get-CSS-custom-property
category: DOM
---
```css
:root {
--primary-color: #ececec;
}
```
```javascript
document.documentElement.style.setProperty("--primary-color", "#000000");
```
================================================
FILE: source/_jsusecases/set-interval.md
================================================
---
extends: _layouts.usecase
date: 2018-11-05
link: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval
reference: Window.setInterval
category: functions
---
```javascript
setInterval(() => {
console.log("I am called every 5 seconds");
}, 5000);
```
<pre class="output">I am called every 5 seconds</pre>
================================================
FILE: source/_jsusecases/set-timeout.md
================================================
---
extends: _layouts.usecase
date: 2018-11-05
link: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
reference: Window.setTimeout
category: functions
---
```javascript
setTimeout(() => {
console.log("I am called after 5 seconds");
}, 5000);
```
<pre class="output">I am called after 5 seconds</pre>
================================================
FILE: source/_jsusecases/set-url-search-params.md
================================================
---
extends: _layouts.usecase
date: 2018-03-04
link: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
reference: URLSearchParams
related: get-url-search-params
category: URL
---
```javascript
const url = new URL(document.location);
url.searchParams.set("lang", "en");
console.log(url.href);
```
<pre class="output">https://codetogo.io/how-to-set-url-search-params-in-javascript/?lang=en</pre>
================================================
FILE: source/_jsusecases/show-element.md
================================================
---
extends: _layouts.usecase
date: 2018-03-11
related: hide-element
category: DOM
---
```html
<div id="box"></div>
```
```css
#box {
display: none;
}
```
```javascript
const element = document.querySelector("#box");
element.style.display = "block";
```
================================================
FILE: source/_jsusecases/skip-values-from-array-destructuring.md
================================================
---
extends: _layouts.usecase
date: 2018-12-16
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring
reference: Skip values from Array destructuring
related: destructure-from-object,destructure-with-default-value
category: syntax
---
```javascript
const [, , elevation] = [52.369661, 4.897243, 3];
console.log(elevation);
```
<pre class="output">
3
</pre>
================================================
FILE: source/_jsusecases/smooth-scroll.md
================================================
---
extends: _layouts.usecase
date: 2018-04-28
link: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
reference: Element.scrollIntoView
category: DOM
---
```html
<div id="box"></div>
```
```javascript
const element = document.querySelector("#box");
element.scrollIntoView({ behavior: "smooth" });
```
================================================
FILE: source/_jsusecases/sort-array-in-ascending-order.md
================================================
---
extends: _layouts.usecase
date: 2017-12-23
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
reference: Array.sort
related: sort-array-in-descending-order
category: arrays
---
```javascript
const numbers = [10, 20, 30, 100, 5, 1, 20];
numbers.sort((a, b) => a - b);
console.log(numbers);
```
<pre class="output">[1, 5, 10, 20, 20, 30, 100]</pre>
================================================
FILE: source/_jsusecases/sort-array-in-descending-order.md
================================================
---
extends: _layouts.usecase
date: 2017-12-23
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
reference: Array.sort
related: sort-array-in-ascending-order
category: arrays
---
```javascript
const numbers = [10, 20, 30, 100, 5, 1, 20];
numbers.sort((a, b) => b - a);
console.log(numbers);
```
<pre class="output">[100, 30, 20, 20, 10, 5, 1]</pre>
================================================
FILE: source/_jsusecases/sort-array-of-objects-in-ascending-order.md
================================================
---
extends: _layouts.usecase
date: 2020-08-16
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
reference: Array.sort
related: sort-array-of-objects-in-descending-order
category: arrays
---
```javascript
const users = [
{ name: "user1", age: 28 },
{ name: "user2", age: 21 },
{ name: "user3", age: 38 },
{ name: "user4", age: 18 }
];
users.sort((user1, user2) => user1.age - user2.age);
console.log(users);
```
<pre class="output">[
{ name: "user4", age: 18 },
{ name: "user2", age: 21 },
{ name: "user1", age: 28 },
{ name: "user3", age: 38 }
]</pre>
================================================
FILE: source/_jsusecases/sort-array-of-objects-in-descending-order.md
================================================
---
extends: _layouts.usecase
date: 2020-08-16
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
reference: Array.sort
related: sort-array-of-objects-in-ascending-order
category: arrays
---
```javascript
const users = [
{ name: "user1", age: 28 },
{ name: "user2", age: 21 },
{ name: "user3", age: 38 },
{ name: "user4", age: 18 }
];
users.sort((user1, user2) => user2.age - user1.age);
console.log(users);
```
<pre class="output">[
{ name: "user3", age: 38 },
{ name: "user1", age: 28 },
{ name: "user2", age: 21 },
{ name: "user4", age: 18 }
]</pre>
================================================
FILE: source/_jsusecases/split-comma-separated-string.md
================================================
---
extends: _layouts.usecase
date: 2017-12-24
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split
reference: String.split
related: convert-array-to-comma-separated-string
category: strings
---
```javascript
const csv = "Eat,Sleep,Code,Repeat";
csv.split(",");
```
<pre class="output">['Eat', 'Sleep', 'Code', 'Repeat']</pre>
================================================
FILE: source/_jsusecases/split-string-into-array-of-characters.md
================================================
---
extends: _layouts.usecase
date: 2017-12-16
category: arrays
---
```javascript
const arrayOfChars = [..."hello world"];
```
<pre class="output">
['h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd']
</pre>
================================================
FILE: source/_jsusecases/stop-audio.md
================================================
---
extends: _layouts.usecase
date: 2024-02-26
link: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime
reference: HTMLMediaElement.pause
related: play-audio,pause-audio
category: DOM
---
```html
<audio>
<source src="audio.mp3" type="audio/mpeg" />
</audio>
```
```javascript
const audio = document.querySelector("audio");
// Stop = pause + reset the playhead
audio.pause();
audio.currentTime = 0;
```
================================================
FILE: source/_jsusecases/stop-video.md
================================================
---
extends: _layouts.usecase
date: 2024-02-26
link: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime
reference: HTMLMediaElement.currentTime
related: play-video,pause-video
category: DOM
---
```html
<video id="video">
<source src="movie.mp4" type="video/mp4" />
</video>
```
```javascript
const video = document.querySelector("#video");
// Stop = pause + reset the playhead
video.pause();
video.currentTime = 0;
```
================================================
FILE: source/_jsusecases/sum-items-of-array.md
================================================
---
extends: _layouts.usecase
date: 2018-01-23
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
reference: Array.reduce
category: arrays
---
```javascript
const calories = [50, 100, 200];
//sum
calories.reduce((total, current) => total + current, 0);
```
<pre class="output">350</pre>
================================================
FILE: source/_jsusecases/swap-variables.md
================================================
---
extends: _layouts.usecase
date: 2024-02-27
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring
reference: Array destructuring
category: syntax
---
```javascript
let firstName = "Doe";
let lastName = "Sam";
// Swap
[firstName, lastName] = [lastName, firstName];
console.log(firstName, lastName);
```
<pre class="output">Sam Doe</pre>
================================================
FILE: source/_jsusecases/time-a-function.md
================================================
---
extends: _layouts.usecase
date: 2018-03-14
link: https://developer.mozilla.org/en-US/docs/Web/API/Performance/now
reference: performance.now
category: performance
---
```javascript
function foo() {
// do stuff
}
const start = performance.now();
foo();
const end = performance.now();
console.log(`Call to ${foo.name} took ${end - start} ms.`);
```
<pre class="output">Call to foo took x ms</pre>
================================================
FILE: source/_jsusecases/toggle-class-of-element.md
================================================
---
extends: _layouts.usecase
date: 2018-09-22
link: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
reference: Element.classList
category: DOM
---
```html
<div id="box" class="highlighted"></div>
```
```javascript
const element = document.querySelector("#box");
element.classList.toggle("highlighted");
```
================================================
FILE: source/_jsusecases/try-catch.md
================================================
---
extends: _layouts.usecase
date: 2018-04-28
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch
reference: try...catch
category: syntax
---
```javascript
try {
potentialFail();
} catch (error) {
console.log(error);
}
```
<pre class="output">ReferenceError: potentialFail is not defined</pre>
================================================
FILE: source/_jsusecases/update-array-immutably.md
================================================
---
extends: _layouts.usecase
date: 2024-02-28
link: https://web.dev/blog/array-with?hl=en
reference: Array.with
reference_website: web.dev
category: arrays
---
```javascript
const names = ["Alex", "Sam", "Blane"];
const newNames = names.with(1, "Sammy");
// names remains unmodified
console.log(newNames);
```
<pre class="output">["Alex", "Sammy", "Blane"]</pre>
================================================
FILE: source/_jsusecases/uppercase-a-string.md
================================================
---
extends: _layouts.usecase
date: 2017-11-11
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase
reference: String.toUpperCase
related: lowercase-a-string
category: strings
---
```javascript
const text = "Hello World";
text.toUpperCase();
```
<pre class="output">HELLO WORLD</pre>
================================================
FILE: source/_jsusecases/uppercase-every-word.md
================================================
---
extends: _layouts.usecase
date: 2018-12-26
category: strings
---
```javascript
let string = "code to go is AWESOME";
const pattern = /([^\W_]+[^\s]*) */g;
string.replace(pattern, word => {
const first = word[0].toUpperCase();
const rest = word.substring(1).toLowerCase();
return first + rest;
});
```
<pre class="output">
Code To Go Is Awesome
</pre>
================================================
FILE: source/_jsusecases/uppercase-first-letter.md
================================================
---
extends: _layouts.usecase
date: 2018-12-26
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase
reference: String.toUpperCase
category: strings
---
```javascript
const name = "micha";
const upperFirst = name[0].toUpperCase() + name.substring(1);
```
<pre class="output">Micha</pre>
================================================
FILE: source/_jsusecases/validate-email.md
================================================
---
extends: _layouts.usecase
date: 2017-12-16
category: regex
---
```javascript
const pattern = /\S+@\S+\.\S+/;
pattern.test("john@gmail.com");
```
<pre class="output">true</pre>
================================================
FILE: source/_jsusecases/wait-in-async-await-functions.md
================================================
---
extends: _layouts.usecase
date: 2019-04-11
link: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise
reference: new Promise(executor)
related: create-a-promise
category: Promise
author: "Marvin Heilemann"
---
```javascript
const timer = ms => new Promise(r => setTimeout(r, ms));
async function doSomething() {
console.log("Start");
await timer(2000);
console.log("Stop");
}
doSomething();
```
<pre class="output">
Start
Stop
</pre>
================================================
FILE: source/_jsusecases/write-a-multiline-string.md
================================================
---
extends: _layouts.usecase
date: 2024-02-26
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
reference: Template literals
related: interpolate
category: strings
---
```javascript
const text = `Using the backtick character,
you can define a string that
spans multiple lines.`;
```
================================================
FILE: source/_jsusecases/write-an-arrow-function.md
================================================
---
extends: _layouts.usecase
date: 2020-08-16
link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
reference: Arrow functions
category: functions
---
```javascript
const greetUser = () => {
return "Welcome to code to go!";
};
let result = greetUser();
console.log(result);
```
<pre class="output">Welcome to code to go!</pre>
================================================
FILE: source/_layouts/master.blade.php
================================================
<!DOCTYPE html>
<html lang="en" @if (isset($question)) itemscope itemtype="http://schema.org/QAPage" @endif>
<head>
<title>{{isset($title) ? "$title | Code to go" : "Code to go"}}</title>
@if (isset($question))
@include('_partials.head', ['question' => $question, 'reference' => $reference])
@else
@include('_partials.head')
@endif
</head>
<body>
@if (isset($is_landing))
@include('_partials.header')
@else
@include('_partials.header_inner')
@endif
@yield('body')
@include('_partials.footer')
@include('_partials.scripts')
</body>
</html>
================================================
FILE: source/_layouts/usecase.blade.php
================================================
@extends('_layouts/master', [
'title' => $page->question(),
'question' => $page->question(),
'reference' => $page->reference,
])
<?php
$pageUrl = "https://codetogo.io".$page->getUrl()."/";
?>
@section('body')
<div class="container usecase">
<?php
$date = new DateTime;
$date->setTimestamp($page->date);
?>
<div class="card usecase-card" itemprop="mainEntity" itemscope itemtype="http://schema.org/Question">
<h1 id="usecase-question" itemprop="text name">{{$page->question()}}</h1>
<div class="usecase-subtitle">
@if ($page->category)
<div class="category">{{ucfirst($page->category)}}</div>
@endif
<h5>By {{$page->author ? $page->author : "Jad Joubran"}} · </h5>
<h5 itemprop="dateModified dateCreated" datetime="{{$date->format('c')}}">
Last updated {{$date->format('M d, Y')}}
</h5>
</div>
<div itemprop="suggestedAnswer acceptedAnswer" itemscope itemtype="http://schema.org/Answer">
<div itemprop="text">
@yield('content')
</div>
<div class="hidden" itemprop="dateCreated" datetime="{{$date->format('c')}}">
{{$date->format('M d, Y')}}
<div itemprop="upvoteCount">1</div>
<h3>{{$page->author ? $page->author : "Jad Joubran"}}</h3>
<a href="{{$pageUrl}}" itemprop="url">See answer</a>
</div>
</div>
<div class="hidden">
<span itemprop="answerCount">1</span>
<h3>{{$page->author ? $page->author : "Jad Joubran"}}</h3>
</div>
@if ($page->link)
<div class="mdn-container">
@if ($page->reference)
<a href="{{$page->link}}" target="_blank" rel="noopener" itemprop="citation">{{$page->reference}}</a> on {{$page->reference_website ?? "MDN"}}
@else
<a href="{{$page->link}}" target="_blank" rel="noopener" itemprop="citation">MDN Docs</a>
@endif
</div>
@endif
<div class="learn-tech-container">
{!! $page->learnbtn !!}
</div>
</div>
@include('_partials/share')
@include('_partials/related')
</div>
@endsection
================================================
FILE: source/_partials/footer.blade.php
================================================
<footer>
<div class="container">
<div class="footer-container">
<div>
Designed by
<a href="https://nicolesaidy.design" target="_blank" rel="noopener">Nicole Saidy</a>,
built by
<a href="https://jadjoubran.io" target="_blank" rel="noopener">Jad Joubran</a> & <a href="https://github.com/jadjoubran/codetogo.io/graphs/contributors" target="_blank" rel="noopener nofollower">contributors</a>
</div>
<div class="links">
<a href="/about">
<div class="link">About</div>
</a>
</div>
</div>
</div>
</footer>
================================================
FILE: source/_partials/head.blade.php
================================================
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="{{ mix('css/main.css', 'assets/build') }}">
<meta name="google-site-verification" content="xEjRvI-66es5w1rNkXoLeIcOQH-x0JZYst9uHHwD_1E" />
<meta name="msvalidate.01" content="3BD9278535ABE0574373B8017C1A0787" />
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png">
<link rel="manifest" href="/favicons/manifest.json">
<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/favicons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="Code to go">
<meta name="application-name" content="Code to go">
<meta name="msapplication-config" content="/favicons/browserconfig.xml">
<?php
$title = "JavaScript Code to go";
$description = "Javascript code to go: Find updated snippets for common JavaScript use cases.";
if (isset($question) && $question){
$title = "$question | Code to go";
$description = "$question, $reference modern JavaScript answer on Code to go";
}
?>
<meta name="description" content="{{$description}}">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="{{$title}}">
<meta name="twitter:description" content="{{$description}}">
<meta name="twitter:image" content="/images/share.png">
<meta name="og:title" content="{{$title}}" />
<meta name="og:type" content="article" />
<meta name="og:image" content="/images/share.png" />
<meta name="og:description" content="{{$description}}" />
<meta name="og:site_name" content="Code to go" />
================================================
FILE: source/_partials/header.blade.php
================================================
<nav>
<div class="container">
<div class="nav-container nav-spacer">
<a href="/">
<div id="logo">
@include('_partials/logosvg')
<div class="hide-mobile">Code to go</div>
</div>
</a>
<div id="menu">
@include('_partials.menu')
</div>
</div>
</div>
</nav>
================================================
FILE: source/_partials/header_inner.blade.php
================================================
<nav>
<div class="container">
<div class="nav-container">
<a href="/" class="nav-spacer">
<div id="logo">
@include('_partials/logosvg')
</div>
</a>
<div class="autocomplete-header hide-mobile">
<input type="text" id="autocomplete" class="hide-till-ready" placeholder="How to loop through array in JavaScript">
</div>
<div id="menu" class="nav-spacer">
@include('_partials.menu')
</div>
</div>
</div>
</nav>
================================================
FILE: source/_partials/logosvg.blade.php
================================================
<svg width="24" height="24" viewBox="0 0 266 266" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Code to go logo</title><desc>Created using Figma</desc><use xlink:href="#a" fill="#303030"/><use xlink:href="#b" transform="translate(50 52)" fill="#5DB7F1"/><use xlink:href="#c" transform="translate(50 172)" fill="#A4E388"/><use xlink:href="#d" transform="translate(135 172)" fill="#FADF96"/><g><use xlink:href="#e" transform="translate(50 112.19)" fill="#FADF96"/><use xlink:href="#f" transform="translate(114 112)" fill="#FAAB9E"/><use xlink:href="#g" transform="translate(157 112)" fill="#A9DF92"/></g><defs><path id="a" d="M0 30C0 13.43 13.43 0 30 0h206c16.57 0 30 13.431 30 30v206c0 16.57-13.43 30-30 30H30c-16.569 0-30-13.43-30-30V30z"/><path id="b" d="M0 8c0-4.418 3.582-8 8-8h150c4.418 0 8 3.582 8 8v6c0 4.418-3.582 8-8 8H8c-4.418 0-8-3.582-8-8V8z"/><path id="c" d="M0 8c0-4.418 3.582-8 8-8h50c4.418 0 8 3.582 8 8v6c0 4.418-3.582 8-8 8H8c-4.418 0-8-3.582-8-8V8z"/><path id="d" d="M0 8c0-4.418 3.582-8 8-8h33c4.418 0 8 3.582 8 8v6c0 4.418-3.582 8-8 8H8c-4.418 0-8-3.582-8-8V8z"/><path id="e" d="M0 8c0-4.418 3.582-8 8-8h29c4.418 0 8 3.582 8 8v5.71c0 4.418-3.582 8-8 8H8c-4.418 0-8-3.582-8-8V8z"/><path id="f" d="M0 8c0-4.418 3.582-8 8-8h8c4.418 0 8 3.582 8 8v6c0 4.418-3.582 8-8 8H8c-4.418 0-8-3.582-8-8V8z"/><path id="g" d="M0 8c0-4.418 3.582-8 8-8h43c4.418 0 8 3.582 8 8v6c0 4.418-3.582 8-8 8H8c-4.418 0-8-3.582-8-8V8z"/></defs></svg>
================================================
FILE: source/_partials/menu.blade.php
================================================
<!-- <a class="link" href="https://learnjavascript.online?utm_source=codetogo.io;" target="_blank" rel="noopener">Learn JavaScript</a> -->
<a class="link" href="/all">Use Cases</a>
<a class="link hide-mobile" id="contribute" href="https://github.com/jadjoubran/codetogo.io/issues/new?title=Use+Case+Suggestion: " target="_blank" rel="noopener">Contribute</a>
================================================
FILE: source/_partials/related.blade.php
================================================
@if ($page->related)
<div class="related">
<h4>Related use cases</h4>
@foreach (explode(',', $page->related) as $usecase)
<a href="/how-to-{{$usecase}}-in-{{$page->type}}/">
<div class="card card-compact">
<h3>How to {{str_replace('-', ' ', $usecase)}} in {{$page->formatted_type}}</h3>
</div>
</a>
@endforeach
</div>
@endif
================================================
FILE: source/_partials/scripts.blade.php
================================================
<script>
(function() {
const questions = [
"How to loop through array in JavaScript",
"How to interpolate in JavaScript",
"How to get keys of object in JavaScript",
"How to check if element has class in JavaScript",
"How to get first character of string in JavaScript",
"How to capitalize first letter in JavaScript",
"How to validate email in JavaScript",
"How to replace a class of element in JavaScript",
"How to reload page in JavaScript",
"How to interpolate in JavaScript",
"How to destructure props in React",
"How to use state with hooks in React",
];
const index = Math.floor(Math.random() * questions.length);
document.querySelector("#autocomplete").placeholder = questions[index];
})();
</script>
<script
defer
src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"
></script>
<script
defer
src="https://cdn.jsdelivr.net/autocomplete.js/0/autocomplete.min.js"
></script>
<script defer src="{{ mix('js/main.js', 'assets/build') }}"></script>
<script>
window.addEventListener("load", () => {
window.ga =
window.ga ||
function() {
(ga.q = ga.q || []).push(arguments);
};
ga.l = +new Date();
ga("create", "UA-110654751-1", "auto");
ga("set", "anonymizeIp", true);
ga("send", "pageview");
setTimeout(() => {
const script = document.createElement("script");
script.src =
"https://www.google-analytics.com/analytics.js";
script.defer = true;
script.async = true;
document.body.appendChild(script);
}, 400);
});
</script>
================================================
FILE: source/_partials/share.blade.php
================================================
<?php
$pageUrl = "https://codetogo.io".$page->getUrl();
?>
<div class="share">
<ul class="rrssb-buttons">
<li class="rrssb-facebook">
<a target="_blank" rel="noopener" href="https://www.facebook.com/sharer/sharer.php?u={{$pageUrl}}" class="popup">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 29 29">
<path d="M26.4 0H2.6C1.714 0 0 1.715 0 2.6v23.8c0 .884 1.715 2.6 2.6 2.6h12.393V17.988h-3.996v-3.98h3.997v-3.062c0-3.746 2.835-5.97 6.177-5.97 1.6 0 2.444.173 2.845.226v3.792H21.18c-1.817 0-2.156.9-2.156 2.168v2.847h5.045l-.66 3.978h-4.386V29H26.4c.884 0 2.6-1.716 2.6-2.6V2.6c0-.885-1.716-2.6-2.6-2.6z"></path>
</svg>
</span>
</a>
</li>
<li class="rrssb-twitter">
<a target="_blank" rel="noopener" href="https://twitter.com/intent/tweet?text={{$pageUrl}}"
class="popup">
<span class="rrssb-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewbox="0 0 28 28">
<path d="M24.253 8.756C24.69 17.08 18.297 24.182 9.97 24.62c-3.122.162-6.22-.646-8.86-2.32 2.702.18 5.375-.648 7.507-2.32-2.072-.248-3.818-1.662-4.49-3.64.802.13 1.62.077 2.4-.154-2.482-.466-4.312-2.586-4.412-5.11.688.276 1.426.408 2.168.387-2.135-1.65-2.73-4.62-1.394-6.965C5.574 7.816 9.54 9.84 13.802 10.07c-.842-2.738.694-5.64 3.434-6.48 2.018-.624 4.212.043 5.546 1.682 1.186-.213 2.318-.662 3.33-1.317-.386 1.256-1.248 2.312-2.4 2.942 1.048-.106 2.07-.394 3.02-.85-.458 1.182-1.343 2.15-2.48 2.71z"></path>
</svg>
</span>
</a>
</li>
</ul>
<div class="clear"></div>
</div>
================================================
FILE: source/_reactusecases/destructure-props.md
================================================
---
extends: _layouts.usecase
date: 2020-01-25
related: get-props
reference: React props
category: props
---
```jsx
import React from "react";
function App(props) {
const { theme, className } = props;
console.log(theme, className);
return <div>App</div>;
}
```
```jsx
// Example
<App theme="dark" className="container" />
```
<pre class="output">
"dark"
"container"
</pre>
================================================
FILE: source/_reactusecases/export-a-component.md
================================================
---
extends: _layouts.usecase
date: 2020-03-18
reference: React Component
category: React
---
```jsx
import React from "react";
export default function Navbar() {
return <div>Navbar here</div>;
}
```
================================================
FILE: source/_reactusecases/fetch-with-use-hook.md
================================================
---
extends: _layouts.usecase
date: 2024-02-29
reference: React use hook
category: state
---
```jsx
// Must be on React 18.3 or React 19 (when released)
import { Suspense, use } from "react";
const promise = fetch(
"https://jsonplaceholder.typicode.com/todos/1"
).then(response => response.json());
function Todo() {
const todo = use(promise);
return <h1>{todo.title}</h1>;
}
function App() {
return (
<Suspense fallback={<p>Loading...</p>}>
<Todo />
</Suspense>
);
}
```
================================================
FILE: source/_reactusecases/get-React-version.md
================================================
---
extends: _layouts.usecase
date: 2020-01-28
reference: React.version
category: misc
---
```jsx
import React from "react";
const version = React.version;
console.log(version);
```
<pre class="output">
16.12.0
</pre>
================================================
FILE: source/_reactusecases/get-props.md
================================================
---
extends: _layouts.usecase
date: 2020-01-25
reference: React props
related: destructure-props
category: props
---
```jsx
import React from "react";
function App(props) {
console.log(props.theme);
console.log(props.className);
return <div>App</div>;
}
```
```jsx
// Example
<App theme="dark" className="container" />
```
<pre class="output">
"dark"
"container"
</pre>
================================================
FILE: source/_reactusecases/listen-to-click-event.md
================================================
---
extends: _layouts.usecase
date: 2020-01-28
reference: onClick
category: events
---
```jsx
import React from "react";
function Button() {
function handleButtonClick() {
console.log("Button clicked!");
}
return <button onClick={handleButtonClick}>Click me</button>;
}
```
================================================
FILE: source/_reactusecases/listen-to-keydown-event.md
================================================
---
extends: _layouts.usecase
date: 2020-01-28
reference: onKeyDown
category: events
---
```jsx
import React from "react";
function Input() {
function handleInputKeyDown(event) {
console.log(event.target.value);
}
return <input onKeyDown={handleInputKeyUp} />;
}
```
================================================
FILE: source/_reactusecases/listen-to-keypress-event.md
================================================
---
extends: _layouts.usecase
date: 2020-01-28
reference: onKeyPress
category: events
---
```jsx
import React from "react";
function Input() {
function handleInputKeyPress(event) {
console.log(event.target.value);
}
return <input onKeyPress={handleInputKeyUp} />;
}
```
================================================
FILE: source/_reactusecases/listen-to-keyup-event.md
================================================
---
extends: _layouts.usecase
date: 2020-01-28
reference: onKeyUp
category: events
---
```jsx
import React from "react";
function Input() {
function handleInputKeyUp(event) {
console.log(event.target.value);
}
return <input onKeyUp={handleInputKeyUp} />;
}
```
================================================
FILE: source/_reactusecases/render-to-the-DOM.md
================================================
---
extends: _layouts.usecase
date: 2020-01-28
reference: ReactDOM.render
category: ReactDOM
---
```html
<div id="root"></div>
```
```jsx
import React from "react";
import { render } from "react-dom";
function App() {
return <h1>Hello World!</h1>;
}
const root = document.querySelector("#root");
render(<App />, root);
```
<pre class="output">
<h1>Hello World!</h1>
</pre>
================================================
FILE: source/_reactusecases/use-fragments.md
================================================
---
extends: _layouts.usecase
date: 2020-03-18
reference: React.Fragment
category: React
---
```jsx
import React from "react";
function App() {
return (
<>
<p>First element</p>
<p>Second element</p>
</>
);
}
```
================================================
FILE: source/_reactusecases/use-state-with-hooks.md
================================================
---
extends: _layouts.usecase
date: 2024-02-13
reference: React useState hook
category: state
---
```jsx
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
function handleClick() {
setCount(count => count + 1);
}
return (
<>
<h1>{count} times</h1>
<button onClick={handleClick}>Add 1</button>
</>
);
}
```
================================================
FILE: source/_reactusecases/write-a-class-component.md
================================================
---
extends: _layouts.usecase
date: 2020-01-28
reference: Class component
category: component
---
```jsx
import React from "react";
class MyComponent extends React.Component {
constructor(props) {
super(props);
//
}
render() {
return <h1>This is a class component</h1>;
}
}
```
================================================
FILE: source/_reactusecases/write-a-functional-component.md
================================================
---
extends: _layouts.usecase
date: 2020-01-28
reference: Functional component
category: component
---
```jsx
import React from "react";
function MyComponent() {
return <h1>This is a functional component</h1>;
}
```
================================================
FILE: source/about.blade.php
================================================
@extends('_layouts/master', ['title' => 'About'])
@section('body')
<div class="container about">
<div class="card">
<h3>About Code to go</h3>
<p class="about-text">
Code to go aims to help developers learning JavaScript find up to date, accurate and ready to use snippets of JavaScript code for common use cases.<br>
If you want to suggest a common use case, please create a new issue on the github repository by clicking on <a href="https://github.com/jadjoubran/codetogo.io/issues/new?title=Use+Case+Suggestion: " target="_blank" rel="noopener">Contribute</a>.
</p>
<h3>Courses by Jad</h3>
<p class="about-text">
If you like CodeToGo, check out the following courses:
</p>
<ul class="about-text">
<li><a href="https://learnjavascript.online/?utm_source=codetogo.io" target="_blank">Learn JavaScript</a></li>
<li><a href="https://learntypescript.online/?utm_source=codetogo.io" target="_blank">Learn TypeScript</a></li>
<li><a href="https://learnprogramming.online/?utm_source=codetogo.io" target="_blank">Learn Programming</a></li>
<li><a href="https://learnhtmlcss.online/?utm_source=codetogo.io" target="_blank">Learn HTML CSS</a></li>
<li><a href="https://react-tutorial.app/?utm_source=codetogo.io" target="_blank">React Tutorial</a></li>
<li><a href="https://sql-tutorial.app/?utm_source=codetogo.io" target="_blank">SQL Tutorial</a></li>
</ul>
</div>
</div>
@endsection
================================================
FILE: source/all.blade.php
================================================
@extends('_layouts/master', ['title' => 'Use Cases'])
@section('body')
<div class="container all">
<h4 class="page-title">All Use Cases</h4>
<a href="/javascript">
<div class="card card-compact">
<h3>JavaScript use cases</h3>
<h5>See all {{$jsusecases->count()}} use cases</h5>
</div>
</a>
<a href="/react">
<div class="card card-compact">
<h3>React use cases</h3>
<h5>See all {{$reactusecases->count()}} use cases</h5>
</div>
</a>
</div>
@endsection
================================================
FILE: source/api/users.json
================================================
[
{
"id": 1,
"name": "Sam"
},
{
"id": 2,
"name": "Alex"
}
]
================================================
FILE: source/api/users.xml
================================================
<users>
<user>
<id>1</id>
<name>Alex</name>
</user>
<user>
<id>2</id>
<name>Sam</name>
</user>
</users>
================================================
FILE: source/assets/build/0.js
================================================
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0],{
/***/ "./node_modules/webpack/buildin/global.js":
/*!***********************************!*\
!*** (webpack)/buildin/global.js ***!
\***********************************/
/*! no static exports found */
/***/ (function(module, exports) {
var g;
// This works in non-strict mode
g = (function() {
return this;
})();
try {
// This works if eval is allowed (see CSP)
g = g || new Function("return this")();
} catch (e) {
// This works if the window reference is available
if (typeof window === "object") g = window;
}
// g can still be undefined, but nothing to do about it...
// We return undefined, instead of nothing here, so it's
// easier to handle this case. if(!global) { ...}
module.exports = g;
/***/ }),
/***/ "./source/_assets/js/prism.min.js":
/*!****************************************!*\
!*** ./source/_assets/js/prism.min.js ***!
\****************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(global) {/* PrismJS 1.19.0
https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript+jsx */
var _self = "undefined" != typeof window ? window : "undefined" != typeof WorkerGlobalScope && self instanceof WorkerGlobalScope ? self : {},
Prism = function (u) {
var c = /\blang(?:uage)?-([\w-]+)\b/i,
n = 0,
C = {
manual: u.Prism && u.Prism.manual,
disableWorkerMessageHandler: u.Prism && u.Prism.disableWorkerMessageHandler,
util: {
encode: function encode(e) {
return e instanceof _ ? new _(e.type, C.util.encode(e.content), e.alias) : Array.isArray(e) ? e.map(C.util.encode) : e.replace(/&/g, "&").replace(/</g, "<").replace(/\u00a0/g, " ");
},
type: function type(e) {
return Object.prototype.toString.call(e).slice(8, -1);
},
objId: function objId(e) {
return e.__id || Object.defineProperty(e, "__id", {
value: ++n
}), e.__id;
},
clone: function r(e, t) {
var a,
n,
i = C.util.type(e);
switch (t = t || {}, i) {
case "Object":
if (n = C.util.objId(e), t[n]) return t[n];
for (var o in a = {}, t[n] = a, e) {
e.hasOwnProperty(o) && (a[o] = r(e[o], t));
}
return a;
case "Array":
return n = C.util.objId(e), t[n] ? t[n] : (a = [], t[n] = a, e.forEach(function (e, n) {
a[n] = r(e, t);
}), a);
default:
return e;
}
},
getLanguage: function getLanguage(e) {
for (; e && !c.test(e.className);) {
e = e.parentElement;
}
return e ? (e.className.match(c) || [, "none"])[1].toLowerCase() : "none";
},
currentScript: function currentScript() {
if ("undefined" == typeof document) return null;
if ("currentScript" in document) return document.currentScript;
try {
throw new Error();
} catch (e) {
var n = (/at [^(\r\n]*\((.*):.+:.+\)$/i.exec(e.stack) || [])[1];
if (n) {
var r = document.getElementsByTagName("script");
for (var t in r) {
if (r[t].src == n) return r[t];
}
}
return null;
}
}
},
languages: {
extend: function extend(e, n) {
var r = C.util.clone(C.languages[e]);
for (var t in n) {
r[t] = n[t];
}
return r;
},
insertBefore: function insertBefore(r, e, n, t) {
var a = (t = t || C.languages)[r],
i = {};
for (var o in a) {
if (a.hasOwnProperty(o)) {
if (o == e) for (var l in n) {
n.hasOwnProperty(l) && (i[l] = n[l]);
}
n.hasOwnProperty(o) || (i[o] = a[o]);
}
}
var s = t[r];
return t[r] = i, C.languages.DFS(C.languages, function (e, n) {
n === s && e != r && (this[e] = i);
}), i;
},
DFS: function e(n, r, t, a) {
a = a || {};
var i = C.util.objId;
for (var o in n) {
if (n.hasOwnProperty(o)) {
r.call(n, o, n[o], t || o);
var l = n[o],
s = C.util.type(l);
"Object" !== s || a[i(l)] ? "Array" !== s || a[i(l)] || (a[i(l)] = !0, e(l, r, o, a)) : (a[i(l)] = !0, e(l, r, null, a));
}
}
}
},
plugins: {},
highlightAll: function highlightAll(e, n) {
C.highlightAllUnder(document, e, n);
},
highlightAllUnder: function highlightAllUnder(e, n, r) {
var t = {
callback: r,
container: e,
selector: 'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'
};
C.hooks.run("before-highlightall", t), t.elements = Array.prototype.slice.apply(t.container.querySelectorAll(t.selector)), C.hooks.run("before-all-elements-highlight", t);
for (var a, i = 0; a = t.elements[i++];) {
C.highlightElement(a, !0 === n, t.callback);
}
},
highlightElement: function highlightElement(e, n, r) {
var t = C.util.getLanguage(e),
a = C.languages[t];
e.className = e.className.replace(c, "").replace(/\s+/g, " ") + " language-" + t;
var i = e.parentNode;
i && "pre" === i.nodeName.toLowerCase() && (i.className = i.className.replace(c, "").replace(/\s+/g, " ") + " language-" + t);
var o = {
element: e,
language: t,
grammar: a,
code: e.textContent
};
function l(e) {
o.highlightedCode = e, C.hooks.run("before-insert", o), o.element.innerHTML = o.highlightedCode, C.hooks.run("after-highlight", o), C.hooks.run("complete", o), r && r.call(o.element);
}
if (C.hooks.run("before-sanity-check", o), !o.code) return C.hooks.run("complete", o), void (r && r.call(o.element));
if (C.hooks.run("before-highlight", o), o.grammar) {
if (n && u.Worker) {
var s = new Worker(C.filename);
s.onmessage = function (e) {
l(e.data);
}, s.postMessage(JSON.stringify({
language: o.language,
code: o.code,
immediateClose: !0
}));
} else l(C.highlight(o.code, o.grammar, o.language));
} else l(C.util.encode(o.code));
},
highlight: function highlight(e, n, r) {
var t = {
code: e,
grammar: n,
language: r
};
return C.hooks.run("before-tokenize", t), t.tokens = C.tokenize(t.code, t.grammar), C.hooks.run("after-tokenize", t), _.stringify(C.util.encode(t.tokens), t.language);
},
matchGrammar: function matchGrammar(e, n, r, t, a, i, o) {
for (var l in r) {
if (r.hasOwnProperty(l) && r[l]) {
var s = r[l];
s = Array.isArray(s) ? s : [s];
for (var u = 0; u < s.length; ++u) {
if (o && o == l + "," + u) return;
var c = s[u],
g = c.inside,
f = !!c.lookbehind,
h = !!c.greedy,
d = 0,
m = c.alias;
if (h && !c.pattern.global) {
var p = c.pattern.toString().match(/[imsuy]*$/)[0];
c.pattern = RegExp(c.pattern.source, p + "g");
}
c = c.pattern || c;
for (var y = t, v = a; y < n.length; v += n[y].length, ++y) {
var k = n[y];
if (n.length > e.length) return;
if (!(k instanceof _)) {
if (h && y != n.length - 1) {
if (c.lastIndex = v, !(O = c.exec(e))) break;
for (var b = O.index + (f && O[1] ? O[1].length : 0), w = O.index + O[0].length, A = y, P = v, x = n.length; A < x && (P < w || !n[A].type && !n[A - 1].greedy); ++A) {
(P += n[A].length) <= b && (++y, v = P);
}
if (n[y] instanceof _) continue;
S = A - y, k = e.slice(v, P), O.index -= v;
} else {
c.lastIndex = 0;
var O = c.exec(k),
S = 1;
}
if (O) {
f && (d = O[1] ? O[1].length : 0);
w = (b = O.index + d) + (O = O[0].slice(d)).length;
var j = k.slice(0, b),
N = k.slice(w),
E = [y, S];
j && (++y, v += j.length, E.push(j));
var L = new _(l, g ? C.tokenize(O, g) : O, m, O, h);
if (E.push(L), N && E.push(N), Array.prototype.splice.apply(n, E), 1 != S && C.matchGrammar(e, n, r, y, v, !0, l + "," + u), i) break;
} else if (i) break;
}
}
}
}
}
},
tokenize: function tokenize(e, n) {
var r = [e],
t = n.rest;
if (t) {
for (var a in t) {
n[a] = t[a];
}
delete n.rest;
}
return C.matchGrammar(e, r, n, 0, 0, !1), r;
},
hooks: {
all: {},
add: function add(e, n) {
var r = C.hooks.all;
r[e] = r[e] || [], r[e].push(n);
},
run: function run(e, n) {
var r = C.hooks.all[e];
if (r && r.length) for (var t, a = 0; t = r[a++];) {
t(n);
}
}
},
Token: _
};
function _(e, n, r, t, a) {
this.type = e, this.content = n, this.alias = r, this.length = 0 | (t || "").length, this.greedy = !!a;
}
if (u.Prism = C, _.stringify = function (e, n) {
if ("string" == typeof e) return e;
if (Array.isArray(e)) return e.map(function (e) {
return _.stringify(e, n);
}).join("");
var r = {
type: e.type,
content: _.stringify(e.content, n),
tag: "span",
classes: ["token", e.type],
attributes: {},
language: n
};
if (e.alias) {
var t = Array.isArray(e.alias) ? e.alias : [e.alias];
Array.prototype.push.apply(r.classes, t);
}
C.hooks.run("wrap", r);
var a = Object.keys(r.attributes).map(function (e) {
return e + '="' + (r.attributes[e] || "").replace(/"/g, """) + '"';
}).join(" ");
return "<" + r.tag + ' class="' + r.classes.join(" ") + '"' + (a ? " " + a : "") + ">" + r.content + "</" + r.tag + ">";
}, !u.document) return u.addEventListener && (C.disableWorkerMessageHandler || u.addEventListener("message", function (e) {
var n = JSON.parse(e.data),
r = n.language,
t = n.code,
a = n.immediateClose;
u.postMessage(C.highlight(t, C.languages[r], r)), a && u.close();
}, !1)), C;
var e = C.util.currentScript();
if (e && (C.filename = e.src, e.hasAttribute("data-manual") && (C.manual = !0)), !C.manual) {
var r = function r() {
C.manual || C.highlightAll();
};
var t = document.readyState;
"loading" === t || "interactive" === t && e && e.defer ? document.addEventListener("DOMContentLoaded", r) : window.requestAnimationFrame ? window.requestAnimationFrame(r) : window.setTimeout(r, 16);
}
return C;
}(_self);
true && module.exports && (module.exports = Prism), "undefined" != typeof global && (global.Prism = Prism);
Prism.languages.markup = {
comment: /<!--[\s\S]*?-->/,
prolog: /<\?[\s\S]+?\?>/,
doctype: {
pattern: /<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:(?!<!--)[^"'\]]|"[^"]*"|'[^']*'|<!--[\s\S]*?-->)*\]\s*)?>/i,
greedy: !0
},
cdata: /<!\[CDATA\[[\s\S]*?]]>/i,
tag: {
pattern: /<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/i,
greedy: !0,
inside: {
tag: {
pattern: /^<\/?[^\s>\/]+/i,
inside: {
punctuation: /^<\/?/,
namespace: /^[^\s>\/:]+:/
}
},
"attr-value": {
pattern: /=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/i,
inside: {
punctuation: [/^=/, {
pattern: /^(\s*)["']|["']$/,
lookbehind: !0
}]
}
},
punctuation: /\/?>/,
"attr-name": {
pattern: /[^\s>\/]+/,
inside: {
namespace: /^[^\s>\/:]+:/
}
}
}
},
entity: /&#?[\da-z]{1,8};/i
}, Prism.languages.markup.tag.inside["attr-value"].inside.entity = Prism.languages.markup.entity, Prism.hooks.add("wrap", function (a) {
"entity" === a.type && (a.attributes.title = a.content.replace(/&/, "&"));
}), Object.defineProperty(Prism.languages.markup.tag, "addInlined", {
value: function value(a, e) {
var s = {};
s["language-" + e] = {
pattern: /(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,
lookbehind: !0,
inside: Prism.languages[e]
}, s.cdata = /^<!\[CDATA\[|\]\]>$/i;
var n = {
"included-cdata": {
pattern: /<!\[CDATA\[[\s\S]*?\]\]>/i,
inside: s
}
};
n["language-" + e] = {
pattern: /[\s\S]+/,
inside: Prism.languages[e]
};
var t = {};
t[a] = {
pattern: RegExp("(<__[\\s\\S]*?>)(?:<!\\[CDATA\\[[\\s\\S]*?\\]\\]>\\s*|[\\s\\S])*?(?=<\\/__>)".replace(/__/g, a), "i"),
lookbehind: !0,
greedy: !0,
inside: n
}, Prism.languages.insertBefore("markup", "cdata", t);
}
}), Prism.languages.xml = Prism.languages.extend("markup", {}), Prism.languages.html = Prism.languages.markup, Prism.languages.mathml = Prism.languages.markup, Prism.languages.svg = Prism.languages.markup;
!function (s) {
var t = /("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/;
s.languages.css = {
comment: /\/\*[\s\S]*?\*\//,
atrule: {
pattern: /@[\w-]+[\s\S]*?(?:;|(?=\s*\{))/,
inside: {
rule: /@[\w-]+/
}
},
url: {
pattern: RegExp("url\\((?:" + t.source + "|[^\n\r()]*)\\)", "i"),
inside: {
"function": /^url/i,
punctuation: /^\(|\)$/
}
},
selector: RegExp("[^{}\\s](?:[^{};\"']|" + t.source + ")*?(?=\\s*\\{)"),
string: {
pattern: t,
greedy: !0
},
property: /[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,
important: /!important\b/i,
"function": /[-a-z0-9]+(?=\()/i,
punctuation: /[(){};:,]/
}, s.languages.css.atrule.inside.rest = s.languages.css;
var e = s.languages.markup;
e && (e.tag.addInlined("style", "css"), s.languages.insertBefore("inside", "attr-value", {
"style-attr": {
pattern: /\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,
inside: {
"attr-name": {
pattern: /^\s*style/i,
inside: e.tag.inside
},
punctuation: /^\s*=\s*['"]|['"]\s*$/,
"attr-value": {
pattern: /.+/i,
inside: s.languages.css
}
},
alias: "language-css"
}
}, e.tag));
}(Prism);
Prism.languages.clike = {
comment: [{
pattern: /(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,
lookbehind: !0
}, {
pattern: /(^|[^\\:])\/\/.*/,
lookbehind: !0,
greedy: !0
}],
string: {
pattern: /(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,
greedy: !0
},
"class-name": {
pattern: /(\b(?:class|interface|extends|implements|trait|instanceof|new)\s+|\bcatch\s+\()[\w.\\]+/i,
lookbehind: !0,
inside: {
punctuation: /[.\\]/
}
},
keyword: /\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,
"boolean": /\b(?:true|false)\b/,
"function": /\w+(?=\()/,
number: /\b0x[\da-f]+\b|(?:\b\d+\.?\d*|\B\.\d+)(?:e[+-]?\d+)?/i,
operator: /[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,
punctuation: /[{}[\];(),.:]/
};
Prism.languages.javascript = Prism.languages.extend("clike", {
"class-name": [Prism.languages.clike["class-name"], {
pattern: /(^|[^$\w\xA0-\uFFFF])[_$A-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\.(?:prototype|constructor))/,
lookbehind: !0
}],
keyword: [{
pattern: /((?:^|})\s*)(?:catch|finally)\b/,
lookbehind: !0
}, {
pattern: /(^|[^.]|\.\.\.\s*)\b(?:as|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,
lookbehind: !0
}],
number: /\b(?:(?:0[xX](?:[\dA-Fa-f](?:_[\dA-Fa-f])?)+|0[bB](?:[01](?:_[01])?)+|0[oO](?:[0-7](?:_[0-7])?)+)n?|(?:\d(?:_\d)?)+n|NaN|Infinity)\b|(?:\b(?:\d(?:_\d)?)+\.?(?:\d(?:_\d)?)*|\B\.(?:\d(?:_\d)?)+)(?:[Ee][+-]?(?:\d(?:_\d)?)+)?/,
"function": /#?[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,
operator: /--|\+\+|\*\*=?|=>|&&|\|\||[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?[.?]?|[~:]/
}), Prism.languages.javascript["class-name"][0].pattern = /(\b(?:class|interface|extends|implements|instanceof|new)\s+)[\w.\\]+/, Prism.languages.insertBefore("javascript", "keyword", {
regex: {
pattern: /((?:^|[^$\w\xA0-\uFFFF."'\])\s])\s*)\/(?:\[(?:[^\]\\\r\n]|\\.)*]|\\.|[^/\\\[\r\n])+\/[gimyus]{0,6}(?=(?:\s|\/\*[\s\S]*?\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/,
lookbehind: !0,
greedy: !0
},
"function-variable": {
pattern: /#?[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/,
alias: "function"
},
parameter: [{
pattern: /(function(?:\s+[_$A-Za-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)?\s*\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\))/,
lookbehind: !0,
inside: Prism.languages.javascript
}, {
pattern: /[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*=>)/i,
inside: Prism.languages.javascript
}, {
pattern: /(\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\)\s*=>)/,
lookbehind: !0,
inside: Prism.languages.javascript
}, {
pattern: /((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:[_$A-Za-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*\s*)\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\)\s*\{)/,
lookbehind: !0,
inside: Prism.languages.javascript
}],
constant: /\b[A-Z](?:[A-Z_]|\dx?)*\b/
}), Prism.languages.insertBefore("javascript", "string", {
"template-string": {
pattern: /`(?:\\[\s\S]|\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}|(?!\${)[^\\`])*`/,
greedy: !0,
inside: {
"template-punctuation": {
pattern: /^`|`$/,
alias: "string"
},
interpolation: {
pattern: /((?:^|[^\\])(?:\\{2})*)\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}/,
lookbehind: !0,
inside: {
"interpolation-punctuation": {
pattern: /^\${|}$/,
alias: "punctuation"
},
rest: Prism.languages.javascript
}
},
string: /[\s\S]+/
}
}
}), Prism.languages.markup && Prism.languages.markup.tag.addInlined("script", "javascript"), Prism.languages.js = Prism.languages.javascript;
!function (i) {
var t = i.util.clone(i.languages.javascript);
i.languages.jsx = i.languages.extend("markup", t), i.languages.jsx.tag.pattern = /<\/?(?:[\w.:-]+\s*(?:\s+(?:[\w.:$-]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s{'">=]+|\{(?:\{(?:\{[^}]*\}|[^{}])*\}|[^{}])+\}))?|\{\s*\.{3}\s*[a-z_$][\w$]*(?:\.[a-z_$][\w$]*)*\s*\}))*\s*\/?)?>/i, i.languages.jsx.tag.inside.tag.pattern = /^<\/?[^\s>\/]*/i, i.languages.jsx.tag.inside["attr-value"].pattern = /=(?!\{)(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">]+)/i, i.languages.jsx.tag.inside.tag.inside["class-name"] = /^[A-Z]\w*(?:\.[A-Z]\w*)*$/, i.languages.insertBefore("inside", "attr-name", {
spread: {
pattern: /\{\s*\.{3}\s*[a-z_$][\w$]*(?:\.[a-z_$][\w$]*)*\s*\}/,
inside: {
punctuation: /\.{3}|[{}.]/,
"attr-value": /\w+/
}
}
}, i.languages.jsx.tag), i.languages.insertBefore("inside", "attr-value", {
script: {
pattern: /=(?:\{(?:\{(?:\{[^}]*\}|[^}])*\}|[^}])+\})/i,
inside: {
"script-punctuation": {
pattern: /^=(?={)/,
alias: "punctuation"
},
rest: i.languages.jsx
},
alias: "language-javascript"
}
}, i.languages.jsx.tag);
var o = function o(t) {
return t ? "string" == typeof t ? t : "string" == typeof t.content ? t.content : t.content.map(o).join("") : "";
},
p = function p(t) {
for (var n = [], e = 0; e < t.length; e++) {
var a = t[e],
s = !1;
if ("string" != typeof a && ("tag" === a.type && a.content[0] && "tag" === a.content[0].type ? "</" === a.content[0].content[0].content ? 0 < n.length && n[n.length - 1].tagName === o(a.content[0].content[1]) && n.pop() : "/>" === a.content[a.content.length - 1].content || n.push({
tagName: o(a.content[0].content[1]),
openedBraces: 0
}) : 0 < n.length && "punctuation" === a.type && "{" === a.content ? n[n.length - 1].openedBraces++ : 0 < n.length && 0 < n[n.length - 1].openedBraces && "punctuation" === a.type && "}" === a.content ? n[n.length - 1].openedBraces-- : s = !0), (s || "string" == typeof a) && 0 < n.length && 0 === n[n.length - 1].openedBraces) {
var g = o(a);
e < t.length - 1 && ("string" == typeof t[e + 1] || "plain-text" === t[e + 1].type) && (g += o(t[e + 1]), t.splice(e + 1, 1)), 0 < e && ("string" == typeof t[e - 1] || "plain-text" === t[e - 1].type) && (g = o(t[e - 1]) + g, t.splice(e - 1, 1), e--), t[e] = new i.Token("plain-text", g, null, g);
}
a.content && "string" != typeof a.content && p(a.content);
}
};
i.hooks.add("after-tokenize", function (t) {
"jsx" !== t.language && "tsx" !== t.language || p(t.tokens);
});
}(Prism);
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./../../../node_modules/webpack/buildin/global.js */ "./node_modules/webpack/buildin/global.js")))
/***/ })
}]);
================================================
FILE: source/assets/build/css/app.css
================================================
code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:none;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#f8f8f2}.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}:root{--gray-900:#353b3f;--gray-800:#67737a;--gray-700:#8999a3;--gray-600:#adb5ba;--gray-500:#c0c9cf;--gray-400:#e7eaec;--gray-300:#eef0f1;--gray-200:#f3f4f4;--gray-100:#fafafa;--base-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif}body{margin:0;color:var(--gray-900);background-color:var(--gray-100);-webkit-font-smoothing:antialiased;font-family:var(--base-font);letter-spacing:-.01em}.container{max-width:712px;margin:0 auto}.hidden{display:none;visibility:hidden}h1{font-size:38px;max-width:600px;margin-left:auto;margin-right:auto;line-height:1.4em}h2{font-size:30px}h3{font-size:26px}h4{font-size:20px;color:var(--gray-800)}h4,h5{font-weight:400}h5{font-size:14px;color:var(--gray-700)}@media screen and (max-width:712px){.container{margin-left:20px;margin-right:20px}h1{font-size:38px}h2{font-size:26px}h3{font-size:24px}.hide-mobile{display:none}}pre[class*=language-]{font-size:18px;padding:30px;letter-spacing:0;position:relative}code[class*=language-],pre.output,pre[class*=language-]{white-space:pre-wrap;word-break:keep-all}pre.language-css,pre.language-html{margin-bottom:15px}pre.language-css:before,pre.language-html:before,pre.language-javascript:before{content:"";display:inline-block;position:absolute;top:6px;right:8px;font-size:12px;color:var(--gray-700);font-family:var(--base-font)}pre.language-html:before{content:"html";text-transform:uppercase}pre.language-css:before{content:"css";text-transform:uppercase}pre.language-javascript:before{content:"JavaScript"}nav{background-color:#fff;border-bottom:1px solid var(--gray-200)}.nav-spacer,nav{padding:10px}nav a{text-decoration:none;color:inherit}.nav-container{display:-webkit-box;display:flex;-webkit-box-pack:justify;justify-content:space-between;-webkit-box-align:center;align-items:center}nav .link{padding:0 8px;color:var(--gray-800)}#logo{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;font-weight:900}#logo svg{padding-right:11px}.card{background-color:#fff;border-radius:6px;padding:40px;margin:40px 0;border:1px solid var(--gray-200);-webkit-transition:box-shadow .25s;transition:box-shadow .25s}.card:hover{box-shadow:0 0 8px 0 rgba(0,0,0,.05)}.card a{text-decoration:none;color:inherit}.card h1,.card h2,.card h3,.card h4,.card h5,.card h6{margin-top:0;margin-left:0;margin-right:0}.card h2,.card h3{margin-bottom:15px}.card-compact{margin:30px 0}.card-compact h5{margin:0}@media screen and (max-width:712px){.card{margin:20px 0;padding:20px}}.usecase .usecase-card:hover{box-shadow:none}.banner{padding:130px 0;text-align:center}.banner .autocomplete{margin-top:57px}footer{padding:23px;color:var(--gray-700)}footer a{color:inherit;text-decoration:none}footer a:hover{text-decoration:underline}.footer-container{border-top:1px solid var(--gray-200);padding-top:22px;font-size:14px;-webkit-box-pack:justify;justify-content:space-between;-webkit-box-align:center;align-items:center}.footer-container,.footer-container .links{display:-webkit-box;display:flex}.footer-container .link{padding:0 11px}.hide-till-ready{visibility:hidden}.algolia-autocomplete .hide-till-ready{visibility:visible}.algolia-autocomplete{width:100%;border:0}.autocomplete-header .algolia-autocomplete{width:calc(100% - 60px);margin-left:20px}.algolia-autocomplete .aa-input::-webkit-input-placeholder{color:#c0c9cf}.algolia-autocomplete .aa-input::-moz-placeholder{color:#c0c9cf}.algolia-autocomplete .aa-input:-ms-input-placeholder{color:#c0c9cf}.algolia-autocomplete .aa-input::-ms-input-placeholder{color:#c0c9cf}.algolia-autocomplete .aa-input::placeholder{color:#c0c9cf}.algolia-autocomplete .aa-hint,.algolia-autocomplete .aa-input{border-radius:3px;width:100%;padding:18px 0 18px 48px;font-size:18px;box-sizing:border-box;border:1px solid transparent;outline:none}.algolia-autocomplete .aa-hint{color:#000;background-color:var(--gray-200)!important}.autocomplete-header .algolia-autocomplete .aa-hint{background-color:var(--gray-100)!important}.algolia-autocomplete .aa-input{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjx1c2UgeGxpbms6aHJlZj0iI3BhdGgwX2ZpbGwiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTEuMTEpIiBmaWxsPSIjODk5OUEzIi8+PGRlZnM+PHBhdGggaWQ9InBhdGgwX2ZpbGwiIGQ9Ik0xMC40MjYgNy43MTRjMCAyLjIwNi0xLjc5NCA0LTQgNC0yLjIwNSAwLTQtMS43OTQtNC00IDAtMi4yMDUgMS43OTUtNCA0LTQgMi4yMDYgMCA0IDEuNzk1IDQgNHptNC41NzIgNy40MjlhMS4xNSAxLjE1IDAgMDAtLjMzLS44MDRsLTMuMDYzLTMuMDYyYTYuMjg0IDYuMjg0IDAgMDAtNS4xNzktOS44NDhBNi4yODQgNi4yODQgMCAwMC4xNDEgNy43MTRhNi4yODQgNi4yODQgMCAwMDkuODQ4IDUuMTc5bDMuMDYyIDMuMDUzYy4yMDYuMjE1LjUuMzQuODA0LjM0YTEuMTUgMS4xNSAwIDAwMS4xNDMtMS4xNDN6Ii8+PC9kZWZzPjwvc3ZnPg==);background-repeat:no-repeat;background-position:21px;-webkit-transition:background-color .3s,border-color .3s;transition:background-color .3s,border-color .3s}.algolia-autocomplete .aa-input:focus{border-color:var(--gray-200);box-shadow:0 0 1px rgba(0,0,0,.05);background-color:hsla(0,0%,100%,.91)!important}.autocomplete-header .algolia-autocomplete .aa-input{background-position:11px}.autocomplete-header .algolia-autocomplete .aa-hint,.autocomplete-header .algolia-autocomplete .aa-input{padding:10px 0 10px 35px;font-size:16px}.autocomplete-header{-webkit-box-flex:1;flex-grow:1}.algolia-autocomplete .aa-dropdown-menu{width:100%;text-align:left;background-color:#fff;box-shadow:0 0 4px rgba(0,0,0,.1);margin-top:6px;border-radius:3px;max-height:300px;overflow-y:scroll}.algolia-autocomplete .aa-dropdown-menu .aa-suggestion{cursor:pointer;padding:15px 20px}.algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor{background-color:var(--gray-200)}.algolia-autocomplete .aa-dropdown-menu .aa-suggestion em{font-weight:700;font-style:normal}@media screen and (min-width:560px){.landing .algolia-autocomplete .aa-dropdown-menu,.landing .algolia-autocomplete .aa-dropdown-menu .aa-suggestion:first-child.aa-cursor:not(.aa-notfound){background-size:50px 50px;background-repeat:no-repeat;background-position:right 15px top 0}}@media screen and (max-width:712px){.algolia-autocomplete .aa-hint,.algolia-autocomplete .aa-input{font-size:16px}.algolia-autocomplete .aa-dropdown-menu{font-size:14px}}.algolia-autocomplete .aa-notfound{font-size:14px;color:var(--gray-600);background-image:none!important;display:-webkit-box;display:flex;-webkit-box-pack:justify;justify-content:space-between;background-color:#fff}.algolia-autocomplete .aa-notfound em{color:var(--gray-800)}.all a{text-decoration:none}.all h3{color:var(--gray-900)}.all .page-title{margin-top:45px}.usecase{min-height:calc(100vh - 231px)}.usecase-subtitle{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;margin-bottom:35px}.usecase-subtitle .category{margin-right:10px;background-color:var(--gray-200);padding:4px 6px;border-radius:3px;color:var(--gray-800);font-size:14px}.usecase-subtitle h5{margin-bottom:0}.mdn-container{color:var(--gray-700);font-size:14px;padding-top:8px;text-decoration:underline;text-align:right}.output{background-color:var(--gray-300);padding:15px;border-radius:.3em;font-size:14px;line-height:20px;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;color:var(--gray-800);margin-bottom:0}.output a{text-decoration:underline}.output:before{content:"Output";display:block;color:var(--gray-600);font-size:12px;font-family:var(--base-font);position:relative;top:-10px;right:-7px;font-weight:700;float:right}.learn-tech-container{margin-top:40px;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center}.learn-btn{padding:12px 40px;font-weight:800;font-size:16px;border-radius:3px;border:0;font-family:var(--font-family);cursor:pointer;display:inline-block;-webkit-transition:opacity .2s ease-out,-webkit-transform .2s ease-out;transition:opacity .2s ease-out,-webkit-transform .2s ease-out;transition:opacity .2s ease-out,transform .2s ease-out;transition:opacity .2s ease-out,transform .2s ease-out,-webkit-transform .2s ease-out}.learn-btn:hover{opacity:.8}.learn-btn:active{-webkit-transform:translate(.5px,.5px);transform:translate(.5px,.5px)}.learn-javascript{background-color:#03cbaf;color:#25272a!important}.learn-react{background-color:#0097ec;color:#fff!important}.related{padding-top:20px}.related a{text-decoration:none}.related h3{font-size:22px;color:var(--gray-900);margin-bottom:0}.related .card-compact{margin:24px 0;padding:30px}.rrssb-buttons{box-sizing:border-box;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:12px;height:36px;margin:0;padding:0;width:100%;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-animation-name:fade-in;animation-name:fade-in;-webkit-animation-delay:.2s;animation-delay:.2s}.rrssb-buttons:after{clear:both}.rrssb-buttons:after,.rrssb-buttons:before{content:" ";display:table}.rrssb-buttons li{box-sizing:border-box;float:left;height:100%;line-height:13px;list-style:none;margin:0;padding:0 2px}.rrssb-buttons li.rrssb-facebook a{background-color:#306199}.rrssb-buttons li.rrssb-facebook a:hover{background-color:#244872}.rrssb-buttons li.rrssb-twitter a{background-color:#26c4f1}.rrssb-buttons li.rrssb-twitter a:hover{background-color:#0eaad6}.rrssb-buttons li a{background-color:#ccc;border-radius:2px;box-sizing:border-box;display:block;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:700;height:100%;position:relative;text-align:center;text-decoration:none;text-transform:uppercase;-webkit-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out;width:100%}.rrssb-buttons li a .rrssb-icon{display:block;left:10px;padding-top:9px;position:absolute;top:0;width:10%}.rrssb-buttons li a .rrssb-icon svg{height:17px;width:17px}.rrssb-buttons li a .rrssb-icon svg circle,.rrssb-buttons li a .rrssb-icon svg path{fill:#fff}.share .clear{clear:both}.rrssb-buttons{height:34px}.rrssb-buttons li{margin-right:12px}.rrssb-buttons li a{padding:11px 7px 12px 27px;border-radius:3px}.rrssb-buttons li a .rrssb-icon{left:9px}.rrssb-buttons li.rrssb-facebook a,.rrssb-buttons li.rrssb-twitter a{background-color:#ccc}.rrssb-buttons li.rrssb-facebook a:hover{background-color:#306199}.rrssb-buttons li.rrssb-twitter a:hover{background-color:#26c4f1}.about-text{color:var(--gray-800);line-height:34px;font-size:18px}.category-pill{border-radius:5px;background-color:#fff;display:inline-block;padding:3px 5px}
================================================
FILE: source/assets/build/css/main.css
================================================
code[class*=language-],pre[class*=language-]{word-wrap:normal;background:none;color:#f8f8f2;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;hyphens:none;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;text-align:left;text-shadow:0 1px rgba(0,0,0,.3);white-space:pre;word-break:normal;word-spacing:normal}pre[class*=language-]{border-radius:.3em;margin:.5em 0;overflow:auto;padding:1em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{border-radius:.3em;padding:.1em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#f8f8f2}.token.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.class-name,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}:root{--gray-900:#353b3f;--gray-800:#67737a;--gray-700:#8999a3;--gray-600:#adb5ba;--gray-500:#c0c9cf;--gray-400:#e7eaec;--gray-300:#eef0f1;--gray-200:#f3f4f4;--gray-100:#fafafa;--base-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif}body{-webkit-font-smoothing:antialiased;background-color:var(--gray-100);color:var(--gray-900);font-family:var(--base-font);letter-spacing:-.01em;margin:0}.container{margin:0 auto;max-width:750px}.hidden{display:none;visibility:hidden}h1{font-size:38px;line-height:1.4em;margin-left:auto;margin-right:auto;max-width:600px}h2{font-size:30px}h3{font-size:26px}h4{color:var(--gray-800);font-size:20px}h4,h5{font-weight:400}h5{color:var(--gray-700);font-size:14px}@media screen and (max-width:712px){.container{margin-left:20px;margin-right:20px}h1{font-size:38px}h2{font-size:26px}h3{font-size:24px}.hide-mobile{display:none}}pre[class*=language-]{font-size:18px;letter-spacing:0;padding:30px;position:relative}code[class*=language-],pre.output,pre[class*=language-]{white-space:pre-wrap;word-break:keep-all}pre.language-css,pre.language-html{margin-bottom:15px}pre.language-css:before,pre.language-html:before,pre.language-javascript:before{color:var(--gray-700);content:"";display:inline-block;font-family:var(--base-font);font-size:12px;position:absolute;right:8px;top:6px}pre.language-html:before{content:"html";text-transform:uppercase}pre.language-css:before{content:"css";text-transform:uppercase}pre.language-javascript:before{content:"JavaScript"}nav{background-color:#fff;border-bottom:1px solid var(--gray-200)}.nav-spacer,nav{padding:10px}nav a{color:inherit;text-decoration:none}.nav-container{align-items:center;display:flex;justify-content:space-between}nav .link{color:var(--gray-800);padding:0 8px}#logo{align-items:center;display:flex;font-weight:900}#logo svg{padding-right:11px}.card{background-color:#fff;border:1px solid var(--gray-200);border-radius:6px;margin:40px 0;padding:40px;transition:box-shadow .25s}.card:hover{box-shadow:0 0 8px 0 rgba(0,0,0,.05)}.card a{color:inherit;text-decoration:none}.card h1,.card h2,.card h3,.card h4,.card h5,.card h6{margin-left:0;margin-right:0;margin-top:0}.card h2,.card h3{margin-bottom:15px}.card-compact{margin:30px 0}.card-compact h5{margin:0}@media screen and (max-width:712px){.card{margin:20px 0;padding:20px}}.usecase .usecase-card:hover{box-shadow:none}.banner{padding:130px 0;text-align:center}.banner .autocomplete{margin-top:57px}footer{color:var(--gray-700);padding:23px}footer a{color:inherit;text-decoration:none}footer a:hover{text-decoration:underline}.footer-container{align-items:center;border-top:1px solid var(--gray-200);display:flex;font-size:14px;justify-content:space-between;padding-top:22px}.footer-container .links{display:flex}.footer-container .link{padding:0 11px}.hide-till-ready{visibility:hidden}.algolia-autocomplete .hide-till-ready{visibility:visible}.algolia-autocomplete{border:0;width:100%}.autocomplete-header .algolia-autocomplete{margin-left:20px;width:calc(100% - 60px)}.algolia-autocomplete .aa-input::-moz-placeholder{color:#c0c9cf}.algolia-autocomplete .aa-input::placeholder{color:#c0c9cf}.algolia-autocomplete .aa-hint,.algolia-autocomplete .aa-input{border:1px solid transparent;border-radius:3px;box-sizing:border-box;font-size:18px;outline:none;padding:18px 0 18px 48px;width:100%}.algolia-autocomplete .aa-hint{background-color:var(--gray-200)!important;color:#000}.autocomplete-header .algolia-autocomplete .aa-hint{background-color:var(--gray-100)!important}.algolia-autocomplete .aa-input{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjx1c2UgeGxpbms6aHJlZj0iI2EiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTEuMTEpIiBmaWxsPSIjODk5OUEzIi8+PGRlZnM+PHBhdGggaWQ9ImEiIGQ9Ik0xMC40MjYgNy43MTRjMCAyLjIwNi0xLjc5NCA0LTQgNC0yLjIwNSAwLTQtMS43OTQtNC00IDAtMi4yMDUgMS43OTUtNCA0LTQgMi4yMDYgMCA0IDEuNzk1IDQgNFptNC41NzIgNy40MjlhMS4xNSAxLjE1IDAgMCAwLS4zMy0uODA0bC0zLjA2My0zLjA2MmE2LjI4NCA2LjI4NCAwIDAgMC01LjE3OS05Ljg0OEE2LjI4NCA2LjI4NCAwIDAgMCAuMTQxIDcuNzE0YTYuMjg0IDYuMjg0IDAgMCAwIDkuODQ4IDUuMTc5bDMuMDYyIDMuMDUzYy4yMDYuMjE1LjUuMzQuODA0LjM0YTEuMTUgMS4xNSAwIDAgMCAxLjE0My0xLjE0M1oiLz48L2RlZnM+PC9zdmc+);background-position:21px;background-repeat:no-repeat;transition:background-color .3s,border-color .3s}.algolia-autocomplete .aa-input:focus{background-color:hsla(0,0%,100%,.91)!important;border-color:var(--gray-200);box-shadow:0 0 1px rgba(0,0,0,.05)}.autocomplete-header .algolia-autocomplete .aa-input{background-position:11px}.autocomplete-header .algolia-autocomplete .aa-hint,.autocomplete-header .algolia-autocomplete .aa-input{font-size:16px;padding:10px 0 10px 35px}.autocomplete-header{flex-grow:1}.algolia-autocomplete .aa-dropdown-menu{background-color:#fff;border-radius:3px;box-shadow:0 0 4px rgba(0,0,0,.1);margin-top:6px;max-height:300px;overflow-y:scroll;text-align:left;width:100%}.algolia-autocomplete .aa-dropdown-menu .aa-suggestion{cursor:pointer;padding:15px 20px}.algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor{background-color:var(--gray-200)}.algolia-autocomplete .aa-dropdown-menu .aa-suggestion em{font-style:normal;font-weight:700}@media screen and (min-width:560px){.landing .algolia-autocomplete .aa-dropdown-menu,.landing .algolia-autocomplete .aa-dropdown-menu .aa-suggestion:first-child.aa-cursor:not(.aa-notfound){background-position:right 15px top 0;background-repeat:no-repeat;background-size:50px 50px}}@media screen and (max-width:712px){.algolia-autocomplete .aa-hint,.algolia-autocomplete .aa-input{font-size:16px}.algolia-autocomplete .aa-dropdown-menu{font-size:14px}}.algolia-autocomplete .aa-notfound{background-color:#fff;background-image:none!important;color:var(--gray-600);display:flex;font-size:14px;justify-content:space-between}.algolia-autocomplete .aa-notfound em{color:var(--gray-800)}.all a{text-decoration:none}.all h3{color:var(--gray-900)}.all .page-title{margin-top:45px}.usecase{min-height:calc(100vh - 231px)}#usecase-question{font-size:30px}.usecase-subtitle{align-items:center;display:flex;margin-bottom:35px}.usecase-subtitle .category{background-color:var(--gray-200);border-radius:3px;color:var(--gray-800);font-size:14px;margin-right:10px;padding:4px 6px}.usecase-subtitle h5{margin-bottom:0}.mdn-container{color:var(--gray-700);font-size:14px;padding-top:8px;text-align:right}.mdn-container a{text-decoration:underline}.output{background-color:var(--gray-300);border-radius:.3em;color:var(--gray-800);font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:14px;line-height:20px;margin-bottom:0;padding:15px}.output a{text-decoration:underline}.output:before{color:var(--gray-600);content:"Output";display:block;float:right;font-family:var(--base-font);font-size:12px;font-weight:700;position:relative;right:-7px;top:-10px}.learn-tech-container{display:flex;justify-content:center;margin-top:40px}.learn-btn{border:0;border-radius:3px;cursor:pointer;display:inline-block;font-family:var(--font-family);font-size:16px;font-weight:800;padding:12px 40px;transition:opacity .2s ease-out,transform .2s ease-out}.learn-btn:hover{opacity:.8}.learn-btn:active{transform:translate(.5px,.5px)}.learn-javascript{background-color:#03cbaf;color:#25272a!important}.learn-react{background-color:#0097ec;color:#fff!important}.related{padding-top:20px}.related a{text-decoration:none}.related h3{color:var(--gray-900);font-size:22px;margin-bottom:0}.related .card-compact{margin:24px 0;padding:30px}.rrssb-buttons{animation-delay:.2s;animation-duration:.3s;animation-fill-mode:both;animation-iteration-count:1;animation-name:fade-in;animation-timing-function:ease-out;box-sizing:border-box;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:12px;height:36px;margin:0;padding:0;width:100%}.rrssb-buttons:after{clear:both}.rrssb-buttons:after,.rrssb-buttons:before{content:" ";display:table}.rrssb-buttons li{box-sizing:border-box;float:left;height:100%;line-height:13px;list-style:none;margin:0;padding:0 2px}.rrssb-buttons li.rrssb-facebook a{background-color:#306199}.rrssb-buttons li.rrssb-facebook a:hover{background-color:#244872}.rrssb-buttons li.rrssb-twitter a{background-color:#26c4f1}.rrssb-buttons li.rrssb-twitter a:hover{background-color:#0eaad6}.rrssb-buttons li a{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;background-color:#ccc;border-radius:2px;box-sizing:border-box;display:block;font-weight:700;height:100%;position:relative;text-align:center;text-decoration:none;text-transform:uppercase;transition:background-color .2s ease-in-out;width:100%}.rrssb-buttons li a .rrssb-icon{display:block;left:10px;padding-top:9px;position:absolute;top:0;width:10%}.rrssb-buttons li a .rrssb-icon svg{height:17px;width:17px}.rrssb-buttons li a .rrssb-icon svg circle,.rrssb-buttons li a .rrssb-icon svg path{fill:#fff}.share .clear{clear:both}.rrssb-buttons{height:34px}.rrssb-buttons li{margin-right:12px}.rrssb-buttons li a{border-radius:3px;padding:11px 7px 12px 27px}.rrssb-buttons li a .rrssb-icon{left:9px}.rrssb-buttons li.rrssb-facebook a,.rrssb-buttons li.rrssb-twitter a{background-color:#ccc}.rrssb-buttons li.rrssb-facebook a:hover{background-color:#306199}.rrssb-buttons li.rrssb-twitter a:hover{background-color:#26c4f1}.about-text{color:var(--gray-800);font-size:18px;line-height:34px}.about-text a{text-decoration:underline}.category-pill{background-color:#fff;border-radius:5px;display:inline-block;padding:3px 5px}
================================================
FILE: source/assets/build/js/index.js
================================================
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule)
gitextract_o7rxk2fy/ ├── .editorconfig ├── .gitignore ├── CNAME ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── PULL_REQUEST_TEMPLATE.md ├── README.md ├── bootstrap.php ├── build/ │ └── config.gypi ├── composer.json ├── config.php ├── netlify.toml ├── package.json ├── source/ │ ├── 404.html │ ├── CNAME │ ├── _assets/ │ │ ├── js/ │ │ │ ├── autocomplete.js │ │ │ └── main.js │ │ └── sass/ │ │ ├── about.scss │ │ ├── all.scss │ │ ├── autocomplete.scss │ │ ├── banner.scss │ │ ├── body.scss │ │ ├── card.scss │ │ ├── category.scss │ │ ├── code.scss │ │ ├── footer.scss │ │ ├── landing.scss │ │ ├── main.scss │ │ ├── nav.scss │ │ ├── prism.css │ │ ├── related.scss │ │ ├── share.scss │ │ └── usecase.scss │ ├── _jsusecases/ │ │ ├── add-class-to-element.md │ │ ├── add-item-to-array.md │ │ ├── add-item-to-localstorage.md │ │ ├── add-item-to-sessionstorage.md │ │ ├── add-multiple-classes-to-element.md │ │ ├── add-object-to-localstorage.md │ │ ├── append-html.md │ │ ├── apply-function-to-every-array-element.md │ │ ├── async-await-fetch.md │ │ ├── async-await.md │ │ ├── call-a-function-with-arguments.md │ │ ├── call-a-function.md │ │ ├── capitalize-first-letter.md │ │ ├── change-CSS-property.md │ │ ├── check-if-array-includes-element.md │ │ ├── check-if-element-has-class.md │ │ ├── check-if-number-is-even.md │ │ ├── check-if-number-is-odd.md │ │ ├── check-if-object-includes-substring.md │ │ ├── check-if-object-includes-value.md │ │ ├── check-if-object-is-empty.md │ │ ├── check-if-string-ends-with-substring.md │ │ ├── check-if-string-includes-another-string.md │ │ ├── check-if-string-starts-with-substring.md │ │ ├── check-if-variable-is-a-string.md │ │ ├── check-if-variable-is-an-object.md │ │ ├── clear-interval.md │ │ ├── clear-timeout.md │ │ ├── comment.md │ │ ├── concatenate-arrays.md │ │ ├── concatenate-objects.md │ │ ├── convert-JSON-to-string.md │ │ ├── convert-array-to-comma-separated-string.md │ │ ├── convert-date-to-mysql-format-YYYY-MM-DD.md │ │ ├── convert-date-to-timestamp.md │ │ ├── convert-from-degree-to-radian.md │ │ ├── convert-string-to-number.md │ │ ├── copy-text-to-clipboard.md │ │ ├── create-a-promise.md │ │ ├── create-a-range-array.md │ │ ├── create-a-regex.md │ │ ├── create-a-switch-statement.md │ │ ├── create-an-object.md │ │ ├── create-array-from-existing-array.md │ │ ├── create-date-in-RFC3339-format.md │ │ ├── create-logical-AND-condition.md │ │ ├── create-logical-NOT-condition.md │ │ ├── create-logical-OR-condition.md │ │ ├── create-object-from-array.md │ │ ├── create-shallow-copy-of-object.md │ │ ├── create-string-from-character-code.md │ │ ├── decode-url.md │ │ ├── decrement-a-variable.md │ │ ├── define-a-class.md │ │ ├── define-a-function-with-default-parameter.md │ │ ├── define-variable.md │ │ ├── delete-item-from-array.md │ │ ├── destructure-from-array.md │ │ ├── destructure-from-object.md │ │ ├── destructure-with-default-value.md │ │ ├── empty-array.md │ │ ├── encode-url.md │ │ ├── fetch-XML.md │ │ ├── fetch-json.md │ │ ├── fetch-post-json.md │ │ ├── filter-objects-in-array.md │ │ ├── find-an-element-from-the-DOM.md │ │ ├── find-element-by-class.md │ │ ├── find-element-by-id.md │ │ ├── find-index-of-element-in-array.md │ │ ├── find-multiple-DOM-elements.md │ │ ├── find-next-element.md │ │ ├── find-previous-element.md │ │ ├── find-root-of-positive-number.md │ │ ├── flatten-a-nested-array.md │ │ ├── format-currency-as-per-locale.md │ │ ├── format-date.md │ │ ├── generate-random-string.md │ │ ├── get-CSS-custom-property.md │ │ ├── get-CSS-property.md │ │ ├── get-count-of-DOM-elements.md │ │ ├── get-count-of-character-in-string.md │ │ ├── get-count-of-duplicate-items-in-array.md │ │ ├── get-current-day-name.md │ │ ├── get-current-month-name.md │ │ ├── get-current-page-url.md │ │ ├── get-current-short-day-name.md │ │ ├── get-current-short-month-name.md │ │ ├── get-current-timestamp-in-seconds.md │ │ ├── get-current-timestamp.md │ │ ├── get-current-year.md │ │ ├── get-data-attribute-from-element.md │ │ ├── get-division-remainder.md │ │ ├── get-extension-from-input-type-file.md │ │ ├── get-file-name-from-path.md │ │ ├── get-first-character-of-string.md │ │ ├── get-function-arguments-as-array.md │ │ ├── get-human-friendly-date-difference.md │ │ ├── get-item-from-localstorage.md │ │ ├── get-item-from-sessionstorage.md │ │ ├── get-keys-of-object.md │ │ ├── get-last-array-element.md │ │ ├── get-last-character-of-string.md │ │ ├── get-length-of-array.md │ │ ├── get-length-of-string.md │ │ ├── get-minutes-ago.md │ │ ├── get-path-from-full-path.md │ │ ├── get-port-from-url.md │ │ ├── get-random-element-from-array.md │ │ ├── get-random-hex-color.md │ │ ├── get-random-number-between-two-numbers.md │ │ ├── get-unique-values-from-object-array-property.md │ │ ├── get-url-search-params.md │ │ ├── hide-element.md │ │ ├── increment-a-variable.md │ │ ├── interpolate.md │ │ ├── listen-to-click-event.md │ │ ├── listen-to-hover-event.md │ │ ├── listen-to-scroll-event.md │ │ ├── loop-backwards-through-array.md │ │ ├── loop-through-array.md │ │ ├── loop-through-object.md │ │ ├── lowercase-a-string.md │ │ ├── manually-trigger-event-on-element.md │ │ ├── match-text-against-regex.md │ │ ├── open-url-in-new-tab.md │ │ ├── parse-JSON-string.md │ │ ├── pause-audio.md │ │ ├── pause-video.md │ │ ├── play-audio.md │ │ ├── play-video.md │ │ ├── prevent-default-action-of-event.md │ │ ├── redirect-to-another-page.md │ │ ├── register-a-service-worker.md │ │ ├── reload-page.md │ │ ├── remove-a-property-from-object.md │ │ ├── remove-class-from-element.md │ │ ├── remove-duplicates-from-array.md │ │ ├── remove-element-from-DOM.md │ │ ├── remove-item-from-localstorage.md │ │ ├── remove-multiple-classes-from-element.md │ │ ├── repeat-a-string.md │ │ ├── replace-a-class-of-element.md │ │ ├── replace-all-occurrences-of-string.md │ │ ├── replace-element-content-HTML.md │ │ ├── replace-spaces-with-dashes.md │ │ ├── reverse-elements-of-array.md │ │ ├── round-a-number.md │ │ ├── set-CSS-custom-property.md │ │ ├── set-interval.md │ │ ├── set-timeout.md │ │ ├── set-url-search-params.md │ │ ├── show-element.md │ │ ├── skip-values-from-array-destructuring.md │ │ ├── smooth-scroll.md │ │ ├── sort-array-in-ascending-order.md │ │ ├── sort-array-in-descending-order.md │ │ ├── sort-array-of-objects-in-ascending-order.md │ │ ├── sort-array-of-objects-in-descending-order.md │ │ ├── split-comma-separated-string.md │ │ ├── split-string-into-array-of-characters.md │ │ ├── stop-audio.md │ │ ├── stop-video.md │ │ ├── sum-items-of-array.md │ │ ├── swap-variables.md │ │ ├── time-a-function.md │ │ ├── toggle-class-of-element.md │ │ ├── try-catch.md │ │ ├── update-array-immutably.md │ │ ├── uppercase-a-string.md │ │ ├── uppercase-every-word.md │ │ ├── uppercase-first-letter.md │ │ ├── validate-email.md │ │ ├── wait-in-async-await-functions.md │ │ ├── write-a-multiline-string.md │ │ └── write-an-arrow-function.md │ ├── _layouts/ │ │ ├── master.blade.php │ │ └── usecase.blade.php │ ├── _partials/ │ │ ├── footer.blade.php │ │ ├── head.blade.php │ │ ├── header.blade.php │ │ ├── header_inner.blade.php │ │ ├── logosvg.blade.php │ │ ├── menu.blade.php │ │ ├── related.blade.php │ │ ├── scripts.blade.php │ │ └── share.blade.php │ ├── _reactusecases/ │ │ ├── destructure-props.md │ │ ├── export-a-component.md │ │ ├── fetch-with-use-hook.md │ │ ├── get-React-version.md │ │ ├── get-props.md │ │ ├── listen-to-click-event.md │ │ ├── listen-to-keydown-event.md │ │ ├── listen-to-keypress-event.md │ │ ├── listen-to-keyup-event.md │ │ ├── render-to-the-DOM.md │ │ ├── use-fragments.md │ │ ├── use-state-with-hooks.md │ │ ├── write-a-class-component.md │ │ └── write-a-functional-component.md │ ├── about.blade.php │ ├── all.blade.php │ ├── api/ │ │ ├── users.json │ │ └── users.xml │ ├── assets/ │ │ └── build/ │ │ ├── 0.js │ │ ├── css/ │ │ │ ├── app.css │ │ │ └── main.css │ │ ├── js/ │ │ │ ├── index.js │ │ │ └── main.js │ │ └── mix-manifest.json │ ├── build/ │ │ ├── css/ │ │ │ └── main-17bd45cbc3.css │ │ ├── js/ │ │ │ └── all-0048fc7a19.js │ │ └── rev-manifest.json │ ├── css/ │ │ └── main.css │ ├── dynamic-sitemap.blade.php │ ├── favicons/ │ │ ├── browserconfig.xml │ │ └── manifest.json │ ├── index.blade.php │ ├── javascript.blade.php │ ├── js/ │ │ ├── all.js │ │ └── index.js │ └── react.blade.php ├── tasks/ │ ├── algolia-sync.js │ ├── bin.js │ └── build.js └── webpack.mix.js
SYMBOL INDEX (7 symbols across 4 files)
FILE: source/assets/build/0.js
function l (line 185) | function l(e) {
function _ (line 299) | function _(e, n, r, t, a) {
FILE: source/assets/build/js/index.js
function __webpack_require__ (line 6) | function __webpack_require__(moduleId) {
FILE: source/assets/build/js/main.js
function c (line 1) | function c(e){u.highlightedCode=e,a.hooks.run("before-insert",u),u.eleme...
function r (line 1) | function r(e,t,n,a,r){this.type=e,this.content=t,this.alias=n,this.lengt...
function a (line 1) | function a(e){var r=n[e];if(void 0!==r)return r.exports;var i=n[e]={expo...
FILE: tasks/build.js
method apply (line 15) | apply(compiler) {
Condensed preview — 261 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (270K chars).
[
{
"path": ".editorconfig",
"chars": 111,
"preview": "root = true\n\n[*]\nend_of_line = lf\n\n# 4 space indentation\n[*.{js,php,scss}]\nindent_style = space\nindent_size = 4"
},
{
"path": ".gitignore",
"chars": 263,
"preview": "/build_local/\n/build_production/\n/node_modules/\n/vendor/\n/_tmp/\n/cache/\n/.idea/\n/.vscode/\nnpm-debug.log\nyarn-error.log\n\n"
},
{
"path": "CNAME",
"chars": 12,
"preview": "codetogo.io\n"
},
{
"path": "CODE_OF_CONDUCT.md",
"chars": 3218,
"preview": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, w"
},
{
"path": "CONTRIBUTING.md",
"chars": 1858,
"preview": "Thank you for contributing a use case on CodeToGo!\n\nYou can either follow the below steps to send a Pull Request, or you"
},
{
"path": "LICENSE",
"chars": 1068,
"preview": "MIT License\n\nCopyright (c) 2018 Jad Joubran\n\nPermission is hereby granted, free of charge, to any person obtaining a cop"
},
{
"path": "PULL_REQUEST_TEMPLATE.md",
"chars": 400,
"preview": "> Put an `x` inside those square brackets to mark them as complete.\n\n- [ ] Check [CONTRIBUTING.md](https://github.com/ja"
},
{
"path": "README.md",
"chars": 798,
"preview": "# Codetogo.io\n\nCode to go aims to help developers learning JavaScript & React find up to date, accurate and ready to use"
},
{
"path": "bootstrap.php",
"chars": 107,
"preview": "<?php\n\n/** @var $container \\Illuminate\\Container\\Container */\n/** @var $jigsaw \\TightenCo\\Jigsaw\\Jigsaw */\n"
},
{
"path": "build/config.gypi",
"chars": 2183,
"preview": "# Do not edit. File was generated by node-gyp's \"configure\" step\n{\n \"target_defaults\": {\n \"cflags\": [],\n \"default"
},
{
"path": "composer.json",
"chars": 142,
"preview": "{\n \"require\": {\n \"tightenco/jigsaw\": \"^1.3\"\n },\n \"config\": {\n \"platform\": {\n \"php\": \"8"
},
{
"path": "config.php",
"chars": 1545,
"preview": "<?php\n\nreturn [\n 'baseUrl' => '',\n 'production' => true,\n 'collections' => [\n 'jsusecases' => [\n "
},
{
"path": "netlify.toml",
"chars": 92,
"preview": "[[headers]]\n for = \"/*\"\n [headers.values]\n Cache-Control = \"public, s-max-age=18748800\""
},
{
"path": "package.json",
"chars": 1611,
"preview": "{\n \"name\": \"codetogo\",\n \"private\": false,\n \"devDependencies\": {\n \"algoliasearch\": \"^3.35.1\",\n \"browser-sync\": \""
},
{
"path": "source/404.html",
"chars": 184,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>404</title>\n</head>\n<body>\n <script>\n "
},
{
"path": "source/CNAME",
"chars": 12,
"preview": "codetogo.io\n"
},
{
"path": "source/_assets/js/autocomplete.js",
"chars": 1548,
"preview": "const client = algoliasearch(\"7V5EBRZWFF\", \"8a58d6caba2a81878b26e24c1028624d\");\nconst index = client.initIndex(\"prod_JS-"
},
{
"path": "source/_assets/js/main.js",
"chars": 53,
"preview": "import \"./autocomplete.js\";\nimport \"./prism.min.js\";\n"
},
{
"path": "source/_assets/sass/about.scss",
"chars": 149,
"preview": ".about {\n}\n\n.about-text{\n color: var(--gray-800);\n line-height: 34px;\n font-size: 18px;\n}\n.about-text a {\n t"
},
{
"path": "source/_assets/sass/all.scss",
"chars": 149,
"preview": ".all{\n a{\n text-decoration: none;\n }\n h3 {\n color: var(--gray-900);\n }\n\n .page-title{\n "
},
{
"path": "source/_assets/sass/autocomplete.scss",
"chars": 4612,
"preview": "#autocomplete {\n}\n\n.hide-till-ready {\n visibility: hidden;\n}\n//when autocomplete widget is ready\n.algolia-autocomplet"
},
{
"path": "source/_assets/sass/banner.scss",
"chars": 109,
"preview": ".banner{\n padding: 130px 0;\n text-align: center;\n\n .autocomplete{\n margin-top: 57px;\n }\n}\n"
},
{
"path": "source/_assets/sass/body.scss",
"chars": 1346,
"preview": ":root {\n --gray-900: #353b3f;\n --gray-800: #67737a;\n --gray-700: #8999a3;\n --gray-600: #adb5ba;\n --gray-5"
},
{
"path": "source/_assets/sass/card.scss",
"chars": 708,
"preview": ".card{\n background-color: white;\n border-radius: 6px;\n padding: 40px;\n margin: 40px 0;\n border: 1px solid"
},
{
"path": "source/_assets/sass/category.scss",
"chars": 119,
"preview": ".category-pill{\n border-radius: 5px;\n background-color: white;\n display: inline-block;\n padding: 3px 5px;\n}"
},
{
"path": "source/_assets/sass/code.scss",
"chars": 798,
"preview": "pre[class*=\"language-\"] {\n font-size: 18px;\n padding: 30px;\n letter-spacing: 0;\n position: relative;\n}\n\npre["
},
{
"path": "source/_assets/sass/footer.scss",
"chars": 455,
"preview": "footer{\n padding: 23px;\n color: var(--gray-700);\n\n a{\n color: inherit;\n text-decoration: none;\n "
},
{
"path": "source/_assets/sass/landing.scss",
"chars": 0,
"preview": ""
},
{
"path": "source/_assets/sass/main.scss",
"chars": 266,
"preview": "@import \"prism\";\n@import \"body\";\n@import \"code\";\n@import \"nav\";\n@import \"card\";\n@import \"banner\";\n@import \"footer\";\n@imp"
},
{
"path": "source/_assets/sass/nav.scss",
"chars": 466,
"preview": "nav{\n background-color: white;\n padding: 10px;\n border-bottom: 1px solid var(--gray-200);\n}\n.nav-spacer{\n pa"
},
{
"path": "source/_assets/sass/prism.css",
"chars": 1971,
"preview": "/* PrismJS 1.19.0\nhttps://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript+jsx */\n/*"
},
{
"path": "source/_assets/sass/related.scss",
"chars": 251,
"preview": ".related{\n padding-top: 20px;\n\n a{\n text-decoration: none;\n }\n\n h3{\n font-size: 22px;\n "
},
{
"path": "source/_assets/sass/share.scss",
"chars": 2578,
"preview": ".rrssb-buttons {\n box-sizing: border-box;\n font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n font-s"
},
{
"path": "source/_assets/sass/usecase.scss",
"chars": 1810,
"preview": ".usecase {\n min-height: calc(100vh - 80px - 65px - 86px);\n}\n\n#usecase-question {\n font-size: 30px;\n}\n\n.usecase-sub"
},
{
"path": "source/_jsusecases/add-class-to-element.md",
"chars": 438,
"preview": "---\nextends: _layouts.usecase\ndate: 2024-02-26\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList\n"
},
{
"path": "source/_jsusecases/add-item-to-array.md",
"chars": 418,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-16\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/add-item-to-localstorage.md",
"chars": 345,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-19\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorag"
},
{
"path": "source/_jsusecases/add-item-to-sessionstorage.md",
"chars": 296,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-21\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStor"
},
{
"path": "source/_jsusecases/add-multiple-classes-to-element.md",
"chars": 471,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-09-22\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList\n"
},
{
"path": "source/_jsusecases/add-object-to-localstorage.md",
"chars": 379,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-19\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorag"
},
{
"path": "source/_jsusecases/append-html.md",
"chars": 340,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-07-28\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdja"
},
{
"path": "source/_jsusecases/apply-function-to-every-array-element.md",
"chars": 330,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-19\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/async-await-fetch.md",
"chars": 634,
"preview": "---\nextends: _layouts.usecase\ndate: 2024-02-13\nlink: https://learnjavascript.online/topics/fetch.html?utm_source=codetog"
},
{
"path": "source/_jsusecases/async-await.md",
"chars": 552,
"preview": "---\nextends: _layouts.usecase\ndate: 2024-02-28\nlink: https://learnjavascript.online/topics/promises.html?utm_source=code"
},
{
"path": "source/_jsusecases/call-a-function-with-arguments.md",
"chars": 396,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-18\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Funct"
},
{
"path": "source/_jsusecases/call-a-function.md",
"chars": 388,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-17\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Funct"
},
{
"path": "source/_jsusecases/capitalize-first-letter.md",
"chars": 220,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-12-26\ncategory: strings\n---\n\n```javascript\nlet str = \"welcome to code to go\";\n\n"
},
{
"path": "source/_jsusecases/change-CSS-property.md",
"chars": 232,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-03-11\ncategory: DOM\n---\n\n```html\n<div id=\"box\"></div>\n```\n\n```javascript\nconst "
},
{
"path": "source/_jsusecases/check-if-array-includes-element.md",
"chars": 337,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-16\nlink: https://blog.learnjavascript.online/posts/javascript-in-array/\nrefe"
},
{
"path": "source/_jsusecases/check-if-element-has-class.md",
"chars": 439,
"preview": "---\nextends: _layouts.usecase\ndate: 2024-02-26\nlink: https://blog.learnjavascript.online/posts/javascript-has-class/\nref"
},
{
"path": "source/_jsusecases/check-if-number-is-even.md",
"chars": 364,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-23\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/O"
},
{
"path": "source/_jsusecases/check-if-number-is-odd.md",
"chars": 363,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-23\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/O"
},
{
"path": "source/_jsusecases/check-if-object-includes-substring.md",
"chars": 429,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-01-28\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/check-if-object-includes-value.md",
"chars": 419,
"preview": "---\nextends: _layouts.usecase\ndate: 2024-02-26\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/check-if-object-is-empty.md",
"chars": 334,
"preview": "---\nextends: _layouts.usecase\ndate: 2024-02-27\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/check-if-string-ends-with-substring.md",
"chars": 358,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-02-01\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/check-if-string-includes-another-string.md",
"chars": 330,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-16\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/check-if-string-starts-with-substring.md",
"chars": 357,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-02-01\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/check-if-variable-is-a-string.md",
"chars": 289,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-04-28\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/O"
},
{
"path": "source/_jsusecases/check-if-variable-is-an-object.md",
"chars": 346,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-17\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/clear-interval.md",
"chars": 378,
"preview": "---\nextends: _layouts.usecase\ndate: 2019-01-28\nlink: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlob"
},
{
"path": "source/_jsusecases/clear-timeout.md",
"chars": 371,
"preview": "---\nextends: _layouts.usecase\ndate: 2019-01-28\nlink: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlob"
},
{
"path": "source/_jsusecases/comment.md",
"chars": 292,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-24\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/L"
},
{
"path": "source/_jsusecases/concatenate-arrays.md",
"chars": 414,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-24\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/O"
},
{
"path": "source/_jsusecases/concatenate-objects.md",
"chars": 502,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-02-16\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/O"
},
{
"path": "source/_jsusecases/convert-JSON-to-string.md",
"chars": 380,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-03-6\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Gl"
},
{
"path": "source/_jsusecases/convert-array-to-comma-separated-string.md",
"chars": 370,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-18\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/convert-date-to-mysql-format-YYYY-MM-DD.md",
"chars": 357,
"preview": "---\nextends: _layouts.usecase\ndate: 2019-12-01\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/convert-date-to-timestamp.md",
"chars": 327,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-26\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/convert-from-degree-to-radian.md",
"chars": 310,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-21\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/convert-string-to-number.md",
"chars": 275,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-11-11\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/copy-text-to-clipboard.md",
"chars": 454,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-02-19\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Document/execComma"
},
{
"path": "source/_jsusecases/create-a-promise.md",
"chars": 381,
"preview": "---\nextends: _layouts.usecase\ndate: 2024-02-28\nlink: https://learnjavascript.online/topics/promises.html?utm_source=code"
},
{
"path": "source/_jsusecases/create-a-range-array.md",
"chars": 304,
"preview": "---\nextends: _layouts.usecase\ndate: 2024-02-27\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/create-a-regex.md",
"chars": 227,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-11-11\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/create-a-switch-statement.md",
"chars": 379,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-24\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/S"
},
{
"path": "source/_jsusecases/create-an-object.md",
"chars": 277,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-11-11\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/create-array-from-existing-array.md",
"chars": 386,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-21\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/O"
},
{
"path": "source/_jsusecases/create-date-in-RFC3339-format.md",
"chars": 399,
"preview": "---\nextends: _layouts.usecase\ndate: 2024-02-26\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/create-logical-AND-condition.md",
"chars": 415,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-01-02\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/O"
},
{
"path": "source/_jsusecases/create-logical-NOT-condition.md",
"chars": 341,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-01-02\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/O"
},
{
"path": "source/_jsusecases/create-logical-OR-condition.md",
"chars": 405,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-01-02\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/O"
},
{
"path": "source/_jsusecases/create-object-from-array.md",
"chars": 269,
"preview": "---\nextends: _layouts.usecase\ndate: 2020-02-18\ncategory: arrays\n---\n\n```javascript\nconst apps = [\"phone\", \"calculator\", "
},
{
"path": "source/_jsusecases/create-shallow-copy-of-object.md",
"chars": 430,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-08-14\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/O"
},
{
"path": "source/_jsusecases/create-string-from-character-code.md",
"chars": 303,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-23\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/decode-url.md",
"chars": 346,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-18\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/decrement-a-variable.md",
"chars": 327,
"preview": "---\nextends: _layouts.usecase\ndate: 2024-02-27\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/O"
},
{
"path": "source/_jsusecases/define-a-class.md",
"chars": 394,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-18\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/C"
},
{
"path": "source/_jsusecases/define-a-function-with-default-parameter.md",
"chars": 403,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-18\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/F"
},
{
"path": "source/_jsusecases/define-variable.md",
"chars": 319,
"preview": "---\nextends: _layouts.usecase\ndate: 2024-02-27\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/S"
},
{
"path": "source/_jsusecases/delete-item-from-array.md",
"chars": 370,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-23\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/destructure-from-array.md",
"chars": 423,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-16\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/O"
},
{
"path": "source/_jsusecases/destructure-from-object.md",
"chars": 459,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-16\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/O"
},
{
"path": "source/_jsusecases/destructure-with-default-value.md",
"chars": 424,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-23\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/O"
},
{
"path": "source/_jsusecases/empty-array.md",
"chars": 326,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-16\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/encode-url.md",
"chars": 528,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-18\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/fetch-XML.md",
"chars": 852,
"preview": "---\nextends: _layouts.usecase\ndate: 2024-02-26\nlink: https://learnjavascript.online/topics/fetch.html?utm_source=codetog"
},
{
"path": "source/_jsusecases/fetch-json.md",
"chars": 504,
"preview": "---\nextends: _layouts.usecase\ndate: 2024-02-13\nlink: https://learnjavascript.online/topics/fetch.html?utm_source=codetog"
},
{
"path": "source/_jsusecases/fetch-post-json.md",
"chars": 705,
"preview": "---\nextends: _layouts.usecase\ndate: 2024-02-13\nlink: https://learnjavascript.online/topics/fetch.html?utm_source=codetog"
},
{
"path": "source/_jsusecases/filter-objects-in-array.md",
"chars": 504,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-18\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/find-an-element-from-the-DOM.md",
"chars": 427,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-03-11\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySele"
},
{
"path": "source/_jsusecases/find-element-by-class.md",
"chars": 365,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-03-11\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySele"
},
{
"path": "source/_jsusecases/find-element-by-id.md",
"chars": 417,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-03-11\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElemen"
},
{
"path": "source/_jsusecases/find-index-of-element-in-array.md",
"chars": 308,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-03-29\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/find-multiple-DOM-elements.md",
"chars": 401,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-03-11\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySele"
},
{
"path": "source/_jsusecases/find-next-element.md",
"chars": 447,
"preview": "---\nextends: _layouts.usecase\ndate: 2024-02-26\nlink: https://developer.mozilla.org/en-US/docs/Web/API/NonDocumentTypeChi"
},
{
"path": "source/_jsusecases/find-previous-element.md",
"chars": 393,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-03-11\nlink: https://developer.mozilla.org/en-US/docs/Web/API/NonDocumentTypeChi"
},
{
"path": "source/_jsusecases/find-root-of-positive-number.md",
"chars": 293,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-26\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/flatten-a-nested-array.md",
"chars": 452,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-02-21\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/format-currency-as-per-locale.md",
"chars": 392,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-03-04\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/format-date.md",
"chars": 752,
"preview": "---\nextends: _layouts.usecase\ndate: 2020-08-16\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/generate-random-string.md",
"chars": 291,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-03-12\ncategory: strings\n---\n\n```javascript\nconst length = 20;\n\n//should NOT be "
},
{
"path": "source/_jsusecases/get-CSS-custom-property.md",
"chars": 415,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-03-12\nlink: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaratio"
},
{
"path": "source/_jsusecases/get-CSS-property.md",
"chars": 423,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-07-29\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputed"
},
{
"path": "source/_jsusecases/get-count-of-DOM-elements.md",
"chars": 363,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-03-09\nlink: https://developer.mozilla.org/en-US/docs/Web/API/NodeList/length\nre"
},
{
"path": "source/_jsusecases/get-count-of-character-in-string.md",
"chars": 313,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-02-16\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/get-count-of-duplicate-items-in-array.md",
"chars": 321,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-01-08\ncategory: arrays\n---\n\n```javascript\nconst chars = [\"a\", \"b\", \"c\", \"a\", \"a"
},
{
"path": "source/_jsusecases/get-current-day-name.md",
"chars": 437,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-29\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/get-current-month-name.md",
"chars": 437,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-29\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/get-current-page-url.md",
"chars": 294,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-16\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Window/location\nre"
},
{
"path": "source/_jsusecases/get-current-short-day-name.md",
"chars": 429,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-01-04\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/get-current-short-month-name.md",
"chars": 427,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-01-04\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/get-current-timestamp-in-seconds.md",
"chars": 361,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-26\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/get-current-timestamp.md",
"chars": 361,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-26\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/get-current-year.md",
"chars": 367,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-01-04\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/get-data-attribute-from-element.md",
"chars": 350,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-07-28\nlink: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_"
},
{
"path": "source/_jsusecases/get-division-remainder.md",
"chars": 348,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-03-08\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/O"
},
{
"path": "source/_jsusecases/get-extension-from-input-type-file.md",
"chars": 377,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-12-26\ncategory: functions\n---\n\n```html\n<input type=\"file\" id=\"upload\">\n```\n\n```"
},
{
"path": "source/_jsusecases/get-file-name-from-path.md",
"chars": 384,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-12-26\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/get-first-character-of-string.md",
"chars": 195,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-12-26\nrelated: get-last-character-of-string\ncategory: strings\n---\n\n```javascrip"
},
{
"path": "source/_jsusecases/get-function-arguments-as-array.md",
"chars": 451,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-19\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/O"
},
{
"path": "source/_jsusecases/get-human-friendly-date-difference.md",
"chars": 552,
"preview": "---\nextends: _layouts.usecase\ndate: 2024-02-27\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/get-item-from-localstorage.md",
"chars": 258,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-19\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorag"
},
{
"path": "source/_jsusecases/get-item-from-sessionstorage.md",
"chars": 266,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-21\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStor"
},
{
"path": "source/_jsusecases/get-keys-of-object.md",
"chars": 371,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-16\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/get-last-array-element.md",
"chars": 355,
"preview": "---\nextends: _layouts.usecase\ndate: 2024-02-28\nlink: https://blog.learnjavascript.online/posts/javascript-at-method/\nref"
},
{
"path": "source/_jsusecases/get-last-character-of-string.md",
"chars": 349,
"preview": "---\nextends: _layouts.usecase\ndate: 2022-08-18\nlink: https://blog.learnjavascript.online/posts/javascript-at-method/\nref"
},
{
"path": "source/_jsusecases/get-length-of-array.md",
"chars": 315,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-29\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/get-length-of-string.md",
"chars": 294,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-29\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/get-minutes-ago.md",
"chars": 562,
"preview": "---\nextends: _layouts.usecase\ndate: 2024-02-27\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/get-path-from-full-path.md",
"chars": 398,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-12-26\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/get-port-from-url.md",
"chars": 225,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-04-28\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Location\nreference"
},
{
"path": "source/_jsusecases/get-random-element-from-array.md",
"chars": 371,
"preview": "---\nextends: _layouts.usecase\ndate: 2022-08-18\nlink: https://blog.learnjavascript.online/posts/javascript-at-method/\nref"
},
{
"path": "source/_jsusecases/get-random-hex-color.md",
"chars": 255,
"preview": "---\nextends: _layouts.usecase\ndate: 2020-02-18\ncategory: numbers\n---\n\n```javascript\nconst hex = Math.floor(Math.random()"
},
{
"path": "source/_jsusecases/get-random-number-between-two-numbers.md",
"chars": 382,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-01-08\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/get-unique-values-from-object-array-property.md",
"chars": 550,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-03-06\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/get-url-search-params.md",
"chars": 357,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-03-04\nlink: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams\nre"
},
{
"path": "source/_jsusecases/hide-element.md",
"chars": 221,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-03-11\nrelated: show-element\ncategory: DOM\n---\n\n```html\n<div id=\"box\"></div>\n```"
},
{
"path": "source/_jsusecases/increment-a-variable.md",
"chars": 331,
"preview": "---\nextends: _layouts.usecase\ndate: 2024-02-27\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/O"
},
{
"path": "source/_jsusecases/interpolate.md",
"chars": 405,
"preview": "---\nextends: _layouts.usecase\ndate: 2024-02-26\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/T"
},
{
"path": "source/_jsusecases/listen-to-click-event.md",
"chars": 415,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-11-11\nlink: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEve"
},
{
"path": "source/_jsusecases/listen-to-hover-event.md",
"chars": 459,
"preview": "---\nextends: _layouts.usecase\ndate: 2024-02-26\nlink: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEve"
},
{
"path": "source/_jsusecases/listen-to-scroll-event.md",
"chars": 239,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-11-05\nlink: https://developer.mozilla.org/en-US/docs/Web/Events/scroll\ncategory"
},
{
"path": "source/_jsusecases/loop-backwards-through-array.md",
"chars": 395,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-18\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/loop-through-array.md",
"chars": 418,
"preview": "---\nextends: _layouts.usecase\ndate: 2020-02-22\nlink: https://blog.learnjavascript.online/posts/javascript-foreach-the-co"
},
{
"path": "source/_jsusecases/loop-through-object.md",
"chars": 409,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-11-11\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/lowercase-a-string.md",
"chars": 340,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-11-11\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/manually-trigger-event-on-element.md",
"chars": 349,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-03-11\nlink: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_"
},
{
"path": "source/_jsusecases/match-text-against-regex.md",
"chars": 385,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-11-11\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/open-url-in-new-tab.md",
"chars": 210,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-04-28\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Window/open\nrefere"
},
{
"path": "source/_jsusecases/parse-JSON-string.md",
"chars": 378,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-01-11\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/pause-audio.md",
"chars": 386,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-03-12\nlink: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/p"
},
{
"path": "source/_jsusecases/pause-video.md",
"chars": 385,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-03-12\nlink: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/p"
},
{
"path": "source/_jsusecases/play-audio.md",
"chars": 384,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-03-12\nlink: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/p"
},
{
"path": "source/_jsusecases/play-video.md",
"chars": 383,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-03-12\nlink: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/p"
},
{
"path": "source/_jsusecases/prevent-default-action-of-event.md",
"chars": 410,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-16\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefau"
},
{
"path": "source/_jsusecases/redirect-to-another-page.md",
"chars": 228,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-16\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Window/location\nre"
},
{
"path": "source/_jsusecases/register-a-service-worker.md",
"chars": 450,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-03-12\nlink: https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerConta"
},
{
"path": "source/_jsusecases/reload-page.md",
"chars": 208,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-11-11\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Location/reload\nre"
},
{
"path": "source/_jsusecases/remove-a-property-from-object.md",
"chars": 396,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-16\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/O"
},
{
"path": "source/_jsusecases/remove-class-from-element.md",
"chars": 409,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-03-11\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList\n"
},
{
"path": "source/_jsusecases/remove-duplicates-from-array.md",
"chars": 413,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-03-06\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/remove-element-from-DOM.md",
"chars": 285,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-03-10\nlink: https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove\nr"
},
{
"path": "source/_jsusecases/remove-item-from-localstorage.md",
"chars": 261,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-19\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorag"
},
{
"path": "source/_jsusecases/remove-multiple-classes-from-element.md",
"chars": 442,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-09-22\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList\n"
},
{
"path": "source/_jsusecases/repeat-a-string.md",
"chars": 298,
"preview": "---\nextends: _layouts.usecase\ndate: 2020-08-16\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/replace-a-class-of-element.md",
"chars": 412,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-03-11\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList\n"
},
{
"path": "source/_jsusecases/replace-all-occurrences-of-string.md",
"chars": 390,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-16\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/replace-element-content-HTML.md",
"chars": 315,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-03-11\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML\n"
},
{
"path": "source/_jsusecases/replace-spaces-with-dashes.md",
"chars": 390,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-16\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/reverse-elements-of-array.md",
"chars": 320,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-19\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/round-a-number.md",
"chars": 281,
"preview": "---\nextends: _layouts.usecase\ndate: 2020-02-18\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/set-CSS-custom-property.md",
"chars": 357,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-03-12\nlink: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaratio"
},
{
"path": "source/_jsusecases/set-interval.md",
"chars": 344,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-11-05\nlink: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlob"
},
{
"path": "source/_jsusecases/set-timeout.md",
"chars": 341,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-11-05\nlink: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlob"
},
{
"path": "source/_jsusecases/set-url-search-params.md",
"chars": 413,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-03-04\nlink: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams\nre"
},
{
"path": "source/_jsusecases/show-element.md",
"chars": 260,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-03-11\nrelated: hide-element\ncategory: DOM\n---\n\n```html\n<div id=\"box\"></div>\n```"
},
{
"path": "source/_jsusecases/skip-values-from-array-destructuring.md",
"chars": 432,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-12-16\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/O"
},
{
"path": "source/_jsusecases/smooth-scroll.md",
"chars": 327,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-04-28\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollInto"
},
{
"path": "source/_jsusecases/sort-array-in-ascending-order.md",
"chars": 402,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-23\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/sort-array-in-descending-order.md",
"chars": 401,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-23\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/sort-array-of-objects-in-ascending-order.md",
"chars": 621,
"preview": "---\nextends: _layouts.usecase\ndate: 2020-08-16\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/sort-array-of-objects-in-descending-order.md",
"chars": 620,
"preview": "---\nextends: _layouts.usecase\ndate: 2020-08-16\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/split-comma-separated-string.md",
"chars": 377,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-24\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/split-string-into-array-of-characters.md",
"chars": 213,
"preview": "---\nextends: _layouts.usecase\ndate: 2017-12-16\ncategory: arrays\n---\n\n```javascript\nconst arrayOfChars = [...\"hello world"
},
{
"path": "source/_jsusecases/stop-audio.md",
"chars": 434,
"preview": "---\nextends: _layouts.usecase\ndate: 2024-02-26\nlink: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/c"
},
{
"path": "source/_jsusecases/stop-video.md",
"chars": 451,
"preview": "---\nextends: _layouts.usecase\ndate: 2024-02-26\nlink: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/c"
},
{
"path": "source/_jsusecases/sum-items-of-array.md",
"chars": 339,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-01-23\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/G"
},
{
"path": "source/_jsusecases/swap-variables.md",
"chars": 416,
"preview": "---\nextends: _layouts.usecase\ndate: 2024-02-27\nlink: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/O"
},
{
"path": "source/_jsusecases/time-a-function.md",
"chars": 405,
"preview": "---\nextends: _layouts.usecase\ndate: 2018-03-14\nlink: https://developer.mozilla.org/en-US/docs/Web/API/Performance/now\nre"
}
]
// ... and 61 more files (download for full content)
About this extraction
This page contains the full source code of the jadjoubran/codetogo.io GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 261 files (235.2 KB), approximately 82.0k tokens, and a symbol index with 7 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.