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(); ``` 
HELLO WORLD
```` 4. Replace the use case with your own. 5. If there's an output for such code, show it in between `
`

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
================================================
 '',
    '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' => '
Learn JavaScript step by step
'
        ],
        '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' => 'Step by step React Tutorial'
        ],
    ],
];


================================================
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
================================================



    
    404


    




================================================
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 `

        
No results found.

        

            
            Click here to contribute
        

        
`;
                }
            }
        }
    ]
).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


```

```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)
```


["calculator", "phone", "clock"]



================================================
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


```

```javascript
const element = document.querySelector("#box");

element.classList.add("active", "highlighted");
```


<div id="box" class="active highlighted"></div>



================================================
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

```

```javascript
const list = document.querySelector("#list");

list.insertAdjacentHTML("beforeend", `
  • Apple
    • `);
```


================================================
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);
```


    [19, 21, 22, 31]
    


================================================
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);
  }
})();
```


    [{
    id: 1,
    name: "Sam"
}, {
    id: 2,
    name: "Alex"
}]

    


================================================
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);
  }
})();
```


    [{
    id: 1,
    name: "Sam"
}, {
    id: 2,
    name: "Alex"
}]

    


================================================
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);
```


    Welcome John to code to go!
    


================================================
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);
```


    Welcome to code to go!
    


================================================
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);
```


    Welcome to code to go
    


================================================
FILE: source/_jsusecases/change-CSS-property.md
================================================
---
extends: _layouts.usecase
date: 2018-03-11
category: DOM
---

```html

    
```

```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");
```


    true
    


================================================
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

    
```

```javascript
const element = document.querySelector("#box");

// Check if hasclass
// Result is a boolean
element.classList.contains("active");
```


    true
    


================================================
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);
```


    true
    


================================================
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);
```


    true
    


================================================
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");
```


    true
    


================================================
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");
```


    true
    


================================================
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;
```


    true
    


================================================
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");
```


    true
    


================================================
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");
```


    true
    


================================================
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");
```


    true
    


================================================
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";
```


    true
    


================================================
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]";
```


    true
    


================================================
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];
```


    ['Jane', 'Bob', 'Ronald', 'Kevin']
    


================================================
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 };
```


    {
    verbose: true,
    src: "./src",
    dist: "./dist"
}
    


================================================
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);
```


    "{"id":1,"name":"Leanne Graham"}"

    


================================================
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(",");
```


    Eat,Sleep,Code,Repeat

    


================================================
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];
```


    2019-12-01
    


================================================
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();
```


    947455200000
    


================================================
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);
```


    1.5707963267948966
    


================================================
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);
```


    24
    


================================================
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()];
```


    [0, 1, 2, 3, 4]
    


================================================
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;
}
```


    Go right
    


================================================
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];
```


    ["phone", "calculator", "clock"]
    


================================================
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();
```


    2024-02-26T20:11:23.708Z
    


================================================
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");
}
```


    Take a break
    


================================================
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");
}
```


    You are underage
    


================================================
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");
}
```


    Cannot drive
    


================================================
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);
```


    {
    0: "phone",
    1: "calculator",
    2: "clock"
}

    


================================================
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 };
```


    {
    id: 1,
    name: {
        first: 'John',
        last: 'Doe'
    }
}

    


================================================
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);
```


    Cool.
    


================================================
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);
```


    hello world?

    


================================================
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);
```


    9
    


================================================
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();
```


    false
    


================================================
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);
```


    Welcome user to code to go!
    


================================================
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);
```


    ["phone", "calculator", "clock"]
    


================================================
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);
```


    52.369661
4.897243

    


================================================
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);
```


    52.369661
4.897243

    


================================================
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);
```


    10
true

    


================================================
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);
```


    []
    


================================================
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}`;
```


    https://google.com/search?q=hello%20world%3F

    


================================================
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);
```


    <users>
    <user>
        <id>1</id>
        <name>Alex</name>
    </user>
    <user>
        <id>2</id>
        <name>Sam</name>
    </user>
</users>

    


================================================
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);
```


    [{
    id: 1,
    name: "Sam"
}, {
    id: 2,
    name: "Alex"
}]

    


================================================
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);
```


    [{
    id: 1,
    name: "Sam"
}, {
    id: 2,
    name: "Alex"
}]

    


================================================
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);
```


    [
    { name: 'Abby', age: 22 },
    { name: 'Coel', age: 20 },
]

    


================================================
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

    


    
```

```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

    
```

```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

    
```

```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");
```


    1
    


================================================
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

    


    
```

```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

    

    Next element
    
```

```javascript
const box = document.querySelector("#box1");
const next = box.nextElementSibling;
```


    <div>Next element</div>
    


================================================
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

    

    
```

```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);
```


    4
    


================================================
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);
```


    [1, 2, 3, 4, 5 ]
    


================================================
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);
```


    $1,999.90
    


================================================
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);
```


    Sunday, August 16, 2020, 7:34:44 PM

    


================================================
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("");
```


    ga6fr8rf7uan1yn2adqy
    


================================================
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"
);
```


    #ECECEC
    


================================================
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

    
```

```javascript
const div = document.querySelector("#box");

const padding = getComputedStyle(div).padding;
```


    15px
    


================================================
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

    

    
```

```javascript
const elements = document.querySelectorAll(".title");

const length = elements.length;
```


    2
    


================================================
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;
```


    2
    


================================================
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);
```


    {
    a: 3,
    b: 1,
    c: 2
}

    


================================================
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);
```


    Friday

    


================================================
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);
```


    December

    


================================================
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;
```


    https://codetogo.io/how-to-get-current-page-url-in-javascript/
    


================================================
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);
```


    Thu

    


================================================
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);
```


    Jan

    


================================================
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
```


    1514300500
    


================================================
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
```


    1514300333756
    


================================================
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();
```


    2018

    


================================================
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

    
```

```javascript
const box = document.querySelector("#box");
const userId = box.dataset.userId;
```


    123
    


================================================
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 });
```


    {
    even: 0,
    odd: 1
}
    


================================================
FILE: source/_jsusecases/get-extension-from-input-type-file.md
================================================
---
extends: _layouts.usecase
date: 2018-12-26
category: functions
---

```html

```

```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);
```


    index.html
    


================================================
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];
```


    W
    


================================================
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");
```


    Received 3 messages
Received 5 messages

    


================================================
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");
```


    2 minutes ago
    


================================================
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);
```


    ['key', 'first_name', 'last_name']
    


================================================
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);
```


    "clock"
    


================================================
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);
```


    s
    


================================================
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;
```


    3
    


================================================
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);
```


    5

    


================================================
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");
```


    5 minutes ago
    


================================================
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);
```


    /Users/code/codetogo/
    


================================================
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);
```


    a random element from the names array

    


================================================
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);
```


    #a75d43
    


================================================
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;
```


    a random number between 0 and 10 inclusive

    


================================================
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))];
```


    ["Cars", "Smartphones", "Tablet"]
    


================================================
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");
```


    en
    


================================================
FILE: source/_jsusecases/hide-element.md
================================================
---
extends: _layouts.usecase
date: 2018-03-11
related: show-element
category: DOM
---

```html

    
```

```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);
```


    1
    


================================================
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!`);
```


    Welcome Sam.
You have 10 new notifications!

    


================================================
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

    
```

```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

    
```

```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);
}
```


    Jad
Nicole
John

    


================================================
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);
});
```


    Sam
Alex
Charlie

    


================================================
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);
}
```


    1
javascript
true

    


================================================
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();
```


    hello world
    


================================================
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

```

```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]);
```


    ["41", index: 10, input: "My age is 41"]
41

    


================================================
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);
```


    {
    id: 1,
    name: "Leanne Graham"
}

    


================================================
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

```

```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

```

```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

```

```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

```

```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

    
```

```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);
```


    {
    language: 'javascript',
    public: true
}

    


================================================
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

    
```

```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)];
```


    ["Cars", "Smartphone", "Tablet"]
    


================================================
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

    
```

```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

    
```

```javascript
const element = document.querySelector("#box");

element.classList.remove("active", "highlighted");
```


    <div id="box"></div>
    


================================================
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);
```


    "CodeCodeCode"
    


================================================
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

    
```

```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");
```


    You are outside. You are waiting.
    


================================================
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

    
```

```javascript
const element = document.querySelector("#box");

element.innerHTML = `
    New Content
    `;
```


================================================
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, "-");
```


    codetogo-saved-me-tons-of-time
    


================================================
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();
```


    [5, 4, 3, 2, 1]
    


================================================
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);
```


    5
    


================================================
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);
```


    I am called every 5 seconds
    


================================================
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);
```


    I am called after 5 seconds
    


================================================
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);
```


    https://codetogo.io/how-to-set-url-search-params-in-javascript/?lang=en
    


================================================
FILE: source/_jsusecases/show-element.md
================================================
---
extends: _layouts.usecase
date: 2018-03-11
related: hide-element
category: DOM
---

```html

    
```

```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);
```


    3

    


================================================
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

    
```

```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);
```


    [1, 5, 10, 20, 20, 30, 100]
    


================================================
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);
```


    [100, 30, 20, 20, 10, 5, 1]
    


================================================
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);
```


    [
  { name: "user4", age: 18 },
  { name: "user2", age: 21 },
  { name: "user1", age: 28 },
  { name: "user3", age: 38 }
]
    


================================================
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);
```


    [
  { name: "user3", age: 38 },
  { name: "user1", age: 28 },
  { name: "user2", age: 21 },
  { name: "user4", age: 18 }
]
    


================================================
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(",");
```


    ['Eat', 'Sleep', 'Code', 'Repeat']
    


================================================
FILE: source/_jsusecases/split-string-into-array-of-characters.md
================================================
---
extends: _layouts.usecase
date: 2017-12-16
category: arrays
---

```javascript
const arrayOfChars = [..."hello world"];
```


    ['h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd']

    


================================================
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

```

```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

```

```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);
```


    350
    


================================================
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);
```


    Sam Doe
    


================================================
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.`);
```


    Call to foo took x ms
    


================================================
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

    
```

```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);
}
```


    ReferenceError: potentialFail is not defined
    


================================================
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);
```


    ["Alex", "Sammy", "Blane"]
    


================================================
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();
```


    HELLO WORLD
    


================================================
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;
});
```


    Code To Go Is Awesome

    


================================================
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);
```


    Micha
    


================================================
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");
```


    true
    


================================================
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();
```


    Start
Stop

    


================================================
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);
```


    Welcome to code to go!
    


================================================
FILE: source/_layouts/master.blade.php
================================================



    {{isset($title) ? "$title | Code to go" : "Code to go"}}

    @if (isset($question))
        @include('_partials.head', ['question' => $question, 'reference' => $reference])
    @else
        @include('_partials.head')
    @endif



    @if (isset($is_landing))
        @include('_partials.header')
    @else
        @include('_partials.header_inner')
    @endif

    @yield('body')

    @include('_partials.footer')

    @include('_partials.scripts')




================================================
FILE: source/_layouts/usecase.blade.php
================================================
@extends('_layouts/master', [
    'title' => $page->question(),
    'question' => $page->question(),
    'reference' => $page->reference,
])

getUrl()."/";
?>

@section('body')
    
    

    setTimestamp($page->date);
    ?>
        
    
            
    {{$page->question()}}
    
            
    
                @if ($page->category)
                    
    {{ucfirst($page->category)}}
    
                @endif
                
    By {{$page->author ? $page->author : "Jad Joubran"}} · 
    
                
    
                    Last updated {{$date->format('M d, Y')}}
                
    
            
    

            
    
                
    
                    @yield('content')
                
    
                
            
    

            

            @if ($page->link)
            
    
                @if ($page->reference)
                    {{$page->reference}} on {{$page->reference_website ?? "MDN"}}
                @else
                    MDN Docs
                @endif
            
    
            @endif
            
    
                {!! $page->learnbtn !!}
            
    
        
    
        @include('_partials/share')
        @include('_partials/related')
    
    

@endsection


================================================
FILE: source/_partials/footer.blade.php
================================================



================================================
FILE: source/_partials/head.blade.php
================================================

































================================================
FILE: source/_partials/header.blade.php
================================================



================================================
FILE: source/_partials/header_inner.blade.php
================================================



================================================
FILE: source/_partials/logosvg.blade.php
================================================
Code to go logoCreated using Figma


================================================
FILE: source/_partials/menu.blade.php
================================================

Use Cases
Contribute


================================================
FILE: source/_partials/related.blade.php
================================================
@if ($page->related)

    

    
    Related use cases
    
    @foreach (explode(',', $page->related) as $usecase)
    
        
    
            
    How to {{str_replace('-', ' ', $usecase)}} in {{$page->formatted_type}}
    
        
    
        
    @endforeach

    
@endif


================================================
FILE: source/_partials/scripts.blade.php
================================================







================================================
FILE: source/_partials/share.blade.php
================================================
getUrl();
?>

    
    
    
    

    

================================================
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 
    App
    ;
}
```

```jsx
// Example

```


    "dark"
"container"

    


================================================
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 
    Navbar here
    ;
}
```


================================================
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 
    {todo.title}
    ;
}

function App() {
  return (
    Loading...
    }>
      
        
  );
}
```


================================================
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);
```


    16.12.0

    


================================================
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 
    App
    ;
}
```

```jsx
// Example

```


    "dark"
"container"

    


================================================
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 ;
}
```


================================================
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 ;
}
```


================================================
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 ;
}
```


================================================
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 ;
}
```


================================================
FILE: source/_reactusecases/render-to-the-DOM.md
================================================
---
extends: _layouts.usecase
date: 2020-01-28
reference: ReactDOM.render
category: ReactDOM
---

```html

    
```

```jsx
import React from "react";
import { render } from "react-dom";

function App() {
  return 
    Hello World!
    ;
}

const root = document.querySelector("#root");

render(, root);
```


    <h1>Hello World!</h1>

    


================================================
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 (
    <>
      
    First element
    
      
    Second element
    
    
  );
}
```


================================================
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 (
    <>
      
    {count} times
    
      
    
  );
}
```


================================================
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 
    This is a class component
    ;
  }
}
```


================================================
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 
    This is a functional component
    ;
}
```


================================================
FILE: source/about.blade.php
================================================
@extends('_layouts/master', ['title' => 'About'])

@section('body')


    
    
    
        
    About Code to go
    
        
    
            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.
    
            If you want to suggest a common use case, please create a new issue on the github repository by clicking on Contribute.
        
    
        
    Courses by Jad
    
        
    
            If you like CodeToGo, check out the following courses:
        
    
        
    
    

    

@endsection


================================================
FILE: source/all.blade.php
================================================
@extends('_layouts/master', ['title' => 'Use Cases'])

@section('body')


    
    
    All Use Cases
    

    
        
    
            
    JavaScript use cases
    
            
    See all {{$jsusecases->count()}} use cases
    
        
    
        
    
        
    
            
    React use cases
    
            
    See all {{$reactusecases->count()}} use cases
    
        
    
        

    

@endsection


================================================
FILE: source/api/users.json
================================================
[
  {
    "id": 1,
    "name": "Sam"
  },
  {
    "id": 2,
    "name": "Alex"
  }
]


================================================
FILE: source/api/users.xml
================================================

    
        1
        Alex
    
    
        2
        Sam
    


================================================
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(/ 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 + "";
  }, !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: //,
  prolog: /<\?[\s\S]+?\?>/,
  doctype: {
    pattern: /"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:(?!)*\]\s*)?>/i,
    greedy: !0
  },
  cdata: //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: /(^$)/i,
      lookbehind: !0,
      inside: Prism.languages[e]
    }, s.cdata = /^$/i;
    var n = {
      "included-cdata": {
        pattern: //i,
        inside: s
      }
    };
    n["language-" + e] = {
      pattern: /[\s\S]+/,
      inside: Prism.languages[e]
    };
    var t = {};
    t[a] = {
      pattern: RegExp("(<__[\\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[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) return value;
/******/ 		var ns = Object.create(null);
/******/ 		__webpack_require__.r(ns);
/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ 		return ns;
/******/ 	};
/******/
/******/ 	// getDefaultExport function for compatibility with non-harmony modules
/******/ 	__webpack_require__.n = function(module) {
/******/ 		var getter = module && module.__esModule ?
/******/ 			function getDefault() { return module['default']; } :
/******/ 			function getModuleExports() { return module; };
/******/ 		__webpack_require__.d(getter, 'a', getter);
/******/ 		return getter;
/******/ 	};
/******/
/******/ 	// Object.prototype.hasOwnProperty.call
/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "/";
/******/
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ({

/***/ "./source/_assets/js/index.js":
/*!************************************!*\
  !*** ./source/_assets/js/index.js ***!
  \************************************/
/*! no static exports found */
/***/ (function(module, exports) {

throw new Error("Module build failed (from ./node_modules/babel-loader/lib/index.js):\nError: ENOENT: no such file or directory, open '/Users/jadjoubran/code/codetogo.io/source/_assets/js/index.js'");

/***/ }),

/***/ "./source/_assets/sass/main.scss":
/*!***************************************!*\
  !*** ./source/_assets/sass/main.scss ***!
  \***************************************/
/*! no static exports found */
/***/ (function(module, exports) {

// removed by extract-text-webpack-plugin

/***/ }),

/***/ 0:
/*!**************************************************************************!*\
  !*** multi ./source/_assets/js/index.js ./source/_assets/sass/main.scss ***!
  \**************************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

__webpack_require__(/*! /Users/jadjoubran/code/codetogo.io/source/_assets/js/index.js */"./source/_assets/js/index.js");
module.exports = __webpack_require__(/*! /Users/jadjoubran/code/codetogo.io/source/_assets/sass/main.scss */"./source/_assets/sass/main.scss");


/***/ })

/******/ });

================================================
FILE: source/assets/build/js/main.js
================================================
(()=>{var e,t={646:()=>{var e=algoliasearch("7V5EBRZWFF","8a58d6caba2a81878b26e24c1028624d").initIndex("prod_JS-HOWTO");autocomplete("#autocomplete",{hint:!0,autoselect:!0},[{source:autocomplete.sources.hits(e,{hitsPerPage:50}),displayKey:"question",templates:{suggestion:function(e){return e._highlightResult.question.value},empty:function(e){return'
    \n        
    No results found.
    \n        
    \n            \n            Click here to contribute\n        
    \n        
    '}}}]).on("autocomplete:selected",function(e,t,n){if(t&&t.url)window.location.href="/".concat(t.url);else{var a=document.querySelector("#contribute").href;window.open("".concat(a," ").concat(e.currentTarget.value))}}),document.querySelector("#autocomplete").focus({preventScroll:!0})},151:(e,t,n)=>{"use strict";n(646),n(790)},790:(e,t,n)=>{var a=function(e){var t=/\blang(?:uage)?-([\w-]+)\b/i,n=0,a={manual:e.Prism&&e.Prism.manual,disableWorkerMessageHandler:e.Prism&&e.Prism.disableWorkerMessageHandler,util:{encode:function(e){return e instanceof r?new r(e.type,a.util.encode(e.content),e.alias):Array.isArray(e)?e.map(a.util.encode):e.replace(/&/g,"&").replace(/e.length)return;if(!(F instanceof r)){if(h&&b!=t.length-1){if(p.lastIndex=w,!(S=p.exec(e)))break;for(var k=S.index+(f&&S[1]?S[1].length:0),x=S.index+S[0].length,A=b,$=w,j=t.length;A"+n.content+""},!e.document)return e.addEventListener&&(a.disableWorkerMessageHandler||e.addEventListener("message",function(t){var n=JSON.parse(t.data),r=n.language,i=n.code,s=n.immediateClose;e.postMessage(a.highlight(i,a.languages[r],r)),s&&e.close()},!1)),a;var i=a.util.currentScript();if(i&&(a.filename=i.src,i.hasAttribute("data-manual")&&(a.manual=!0)),!a.manual){var s=function(){a.manual||a.highlightAll()},o=document.readyState;"loading"===o||"interactive"===o&&i&&i.defer?document.addEventListener("DOMContentLoaded",s):window.requestAnimationFrame?window.requestAnimationFrame(s):window.setTimeout(s,16)}return a}("undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{});e.exports&&(e.exports=a),void 0!==n.g&&(n.g.Prism=a),a.languages.markup={comment://,prolog:/<\?[\s\S]+?\?>/,doctype:{pattern:/"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:(?!)*\]\s*)?>/i,greedy:!0},cdata://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},a.languages.markup.tag.inside["attr-value"].inside.entity=a.languages.markup.entity,a.hooks.add("wrap",function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))}),Object.defineProperty(a.languages.markup.tag,"addInlined",{value:function(e,t){var n={};n["language-"+t]={pattern:/(^$)/i,lookbehind:!0,inside:a.languages[t]},n.cdata=/^$/i;var r={"included-cdata":{pattern://i,inside:n}};r["language-"+t]={pattern:/[\s\S]+/,inside:a.languages[t]};var i={};i[e]={pattern:RegExp("(<__[\\s\\S]*?>)(?:\\s*|[\\s\\S])*?(?=<\\/__>)".replace(/__/g,e),"i"),lookbehind:!0,greedy:!0,inside:r},a.languages.insertBefore("markup","cdata",i)}}),a.languages.xml=a.languages.extend("markup",{}),a.languages.html=a.languages.markup,a.languages.mathml=a.languages.markup,a.languages.svg=a.languages.markup,function(e){var t=/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/;e.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:/[(){};:,]/},e.languages.css.atrule.inside.rest=e.languages.css;var n=e.languages.markup;n&&(n.tag.addInlined("style","css"),e.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:n.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:e.languages.css}},alias:"language-css"}},n.tag))}(a),a.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:/[{}[\];(),.:]/},a.languages.javascript=a.languages.extend("clike",{"class-name":[a.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}|\?[.?]?|[~:]/}),a.languages.javascript["class-name"][0].pattern=/(\b(?:class|interface|extends|implements|instanceof|new)\s+)[\w.\\]+/,a.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:a.languages.javascript},{pattern:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*=>)/i,inside:a.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\)\s*=>)/,lookbehind:!0,inside:a.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:a.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),a.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:a.languages.javascript}},string:/[\s\S]+/}}}),a.languages.markup&&a.languages.markup.tag.addInlined("script","javascript"),a.languages.js=a.languages.javascript,function(e){var t=e.util.clone(e.languages.javascript);e.languages.jsx=e.languages.extend("markup",t),e.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,e.languages.jsx.tag.inside.tag.pattern=/^<\/?[^\s>\/]*/i,e.languages.jsx.tag.inside["attr-value"].pattern=/=(?!\{)(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">]+)/i,e.languages.jsx.tag.inside.tag.inside["class-name"]=/^[A-Z]\w*(?:\.[A-Z]\w*)*$/,e.languages.insertBefore("inside","attr-name",{spread:{pattern:/\{\s*\.{3}\s*[a-z_$][\w$]*(?:\.[a-z_$][\w$]*)*\s*\}/,inside:{punctuation:/\.{3}|[{}.]/,"attr-value":/\w+/}}},e.languages.jsx.tag),e.languages.insertBefore("inside","attr-value",{script:{pattern:/=(?:\{(?:\{(?:\{[^}]*\}|[^}])*\}|[^}])+\})/i,inside:{"script-punctuation":{pattern:/^=(?={)/,alias:"punctuation"},rest:e.languages.jsx},alias:"language-javascript"}},e.languages.jsx.tag);var n=function(e){return e?"string"==typeof e?e:"string"==typeof e.content?e.content:e.content.map(n).join(""):""},a=function(t){for(var r=[],i=0;i"===s.content[s.content.length-1].content||r.push({tagName:n(s.content[0].content[1]),openedBraces:0}):0{}},n={};function a(e){var r=n[e];if(void 0!==r)return r.exports;var i=n[e]={exports:{}};return t[e](i,i.exports,a),i.exports}a.m=t,e=[],a.O=(t,n,r,i)=>{if(!n){var s=1/0;for(c=0;c=i)&&Object.keys(a.O).every(e=>a.O[e](n[l]))?n.splice(l--,1):(o=!1,i0&&e[c-1][2]>i;c--)e[c]=e[c-1];e[c]=[n,r,i]},a.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return a.d(t,{a:t}),t},a.d=(e,t)=>{for(var n in t)a.o(t,n)&&!a.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},a.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),a.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{var e={522:0,870:0};a.O.j=t=>0===e[t];var t=(t,n)=>{var r,i,[s,o,l]=n,u=0;if(s.some(t=>0!==e[t])){for(r in o)a.o(o,r)&&(a.m[r]=o[r]);if(l)var c=l(a)}for(t&&t(n);ua(151));var r=a.O(void 0,[870],()=>a(753));r=a.O(r)})();

================================================
FILE: source/assets/build/mix-manifest.json
================================================
{
    "/js/main.js": "/js/main.js",
    "/css/main.css": "/css/main.css"
}


================================================
FILE: source/build/css/main-17bd45cbc3.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;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:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center}nav .link{padding:0 8px;color:var(--gray-800)}#logo{display:-ms-flexbox;display:flex;-ms-flex-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);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;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center}.footer-container,.footer-container .links{display:-ms-flexbox;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:-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;border:0;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,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNSAxNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGU+JiMyMzk7JiMxMjg7JiMxMzA7PC90aXRsZT48ZGVzYz5DcmVhdGVkIHVzaW5nIEZpZ21hPC9kZXNjPjxnIGlkPSJDYW52YXMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyOCAtMTM2MCkiPjxnIGlkPSImIzIzOTsmIzEyODsmIzEzMDsiPjx1c2UgeGxpbms6aHJlZj0iI3BhdGgwX2ZpbGwiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMjggMTM1OC44OSkiIGZpbGw9IiM4OTk5QTMiLz48L2c+PC9nPjxkZWZzPjxwYXRoIGlkPSJwYXRoMF9maWxsIiBkPSJNIDEwLjQyNjMgNy43MTQyOUMgMTAuNDI2MyA5LjkxOTY0IDguNjMxNyAxMS43MTQzIDYuNDI2MzQgMTEuNzE0M0MgNC4yMjA5OCAxMS43MTQzIDIuNDI2MzQgOS45MTk2NCAyLjQyNjM0IDcuNzE0MjlDIDIuNDI2MzQgNS41MDg5MyA0LjIyMDk4IDMuNzE0MjkgNi40MjYzNCAzLjcxNDI5QyA4LjYzMTcgMy43MTQyOSAxMC40MjYzIDUuNTA4OTMgMTAuNDI2MyA3LjcxNDI5Wk0gMTQuOTk3OCAxNS4xNDI5QyAxNC45OTc4IDE0LjgzOTMgMTQuODcyOCAxNC41NDQ2IDE0LjY2NzQgMTQuMzM5M0wgMTEuNjA0OSAxMS4yNzY4QyAxMi4zMjgxIDEwLjIzMjEgMTIuNzEyMSA4Ljk4MjE0IDEyLjcxMjEgNy43MTQyOUMgMTIuNzEyMSA0LjI0MTA3IDkuODk5NTUgMS40Mjg1NyA2LjQyNjM0IDEuNDI4NTdDIDIuOTUzMTIgMS40Mjg1NyAwLjE0MDYyNSA0LjI0MTA3IDAuMTQwNjI1IDcuNzE0MjlDIDAuMTQwNjI1IDExLjE4NzUgMi45NTMxMiAxNCA2LjQyNjM0IDE0QyA3LjY5NDIgMTQgOC45NDQyIDEzLjYxNjEgOS45ODg4NCAxMi44OTI5TCAxMy4wNTEzIDE1Ljk0NjRDIDEzLjI1NjcgMTYuMTYwNyAxMy41NTEzIDE2LjI4NTcgMTMuODU0OSAxNi4yODU3QyAxNC40Nzk5IDE2LjI4NTcgMTQuOTk3OCAxNS43Njc5IDE0Ljk5NzggMTUuMTQyOVoiLz48L2RlZnM+PC9zdmc+);background-repeat:no-repeat;background-position:21px;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{-ms-flex-positive: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:-ms-flexbox;display:flex;-ms-flex-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 - 80px - 65px - 86px)}.usecase-subtitle{display:-ms-flexbox;display:flex;-ms-flex-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:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.learn-javascript{background-color:#00b99f;color:#fff!important;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 .2s ease-out,transform .2s ease-out}.learn-javascript:hover{opacity:.8}.learn-javascript:active{transform:translate(.5px,.5px)}.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%;animation-duration:.3s;animation-fill-mode:both;animation-iteration-count:1;animation-timing-function:ease-out;animation-name:fade-in;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;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/build/js/all-0048fc7a19.js
================================================
"use strict";var client=algoliasearch("7V5EBRZWFF","8a58d6caba2a81878b26e24c1028624d"),index=client.initIndex("prod_JS-HOWTO");autocomplete("#autocomplete",{hint:!0,autoselect:!0},[{source:autocomplete.sources.hits(index,{hitsPerPage:50}),displayKey:"question",templates:{suggestion:function(e){return e._highlightResult.question.value},empty:function(e){return'
    \n        
    No results found.
    \n        
    \n            \n            Click here to contribute\n        
    \n        
    '}}}]).on("autocomplete:selected",function(e,t,a){if(t&&t.url)window.location.href="/"+t.url;else{var n=document.querySelector("#contribute").href;window.open(n+" "+e.currentTarget.value)}}),document.querySelector("#autocomplete").focus({preventScroll:!0});var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-(\w+)\b/i,t=0,a=_self.Prism={manual:_self.Prism&&_self.Prism.manual,disableWorkerMessageHandler:_self.Prism&&_self.Prism.disableWorkerMessageHandler,util:{encode:function(e){return e instanceof n?new n(e.type,a.util.encode(e.content),e.alias):"Array"===a.util.type(e)?e.map(a.util.encode):e.replace(/&/g,"&").replace(/e.length)return;if(!(w instanceof o)){d.lastIndex=0;var P=d.exec(w),F=1;if(!P&&h&&b!=t.length-1){if(d.lastIndex=k,P=d.exec(e),!P)break;for(var S=P.index+(m?P[1].length:0),x=P.index+P[0].length,A=b,_=k,j=t.length;j>A&&(x>_||!t[A].type&&!t[A-1].greedy);++A)_+=t[A].length,S>=_&&(++b,k=_);if(t[b]instanceof o||t[A-1].greedy)continue;F=A-b,w=e.slice(k,_),P.index-=k}if(P){m&&(f=P[1]?P[1].length:0);var S=P.index+f,P=P[0].slice(f),x=S+P.length,O=w.slice(0,S),N=w.slice(x),C=[b,F];O&&(++b,k+=O.length,C.push(O));var $=new o(u,p?a.tokenize(P,p):P,y,P,h);if(C.push($),N&&C.push(N),Array.prototype.splice.apply(t,C),1!=F&&a.matchGrammar(e,t,n,b,k,!0,u),s)break}else if(s)break}}}}},tokenize:function(e,t){var n=[e],r=t.rest;if(r){for(var i in r)t[i]=r[i];delete t.rest}return a.matchGrammar(e,n,t,0,0,!1),n},hooks:{all:{},add:function(e,t){var n=a.hooks.all;n[e]=n[e]||[],n[e].push(t)},run:function(e,t){var n=a.hooks.all[e];if(n&&n.length)for(var r,i=0;r=n[i++];)r(t)}}},n=a.Token=function(e,t,a,n,r){this.type=e,this.content=t,this.alias=a,this.length=0|(n||"").length,this.greedy=!!r};if(n.stringify=function(e,t,r){if("string"==typeof e)return e;if("Array"===a.util.type(e))return e.map(function(a){return n.stringify(a,t,e)}).join("");var i={type:e.type,content:n.stringify(e.content,t,r),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:r};if(e.alias){var s="Array"===a.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,s)}a.hooks.run("wrap",i);var l=Object.keys(i.attributes).map(function(e){return e+'="'+(i.attributes[e]||"").replace(/"/g,""")+'"'}).join(" ");return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+(l?" "+l:"")+">"+i.content+""},!_self.document)return _self.addEventListener?(a.disableWorkerMessageHandler||_self.addEventListener("message",function(e){var t=JSON.parse(e.data),n=t.language,r=t.code,i=t.immediateClose;_self.postMessage(a.highlight(r,a.languages[n],n)),i&&_self.close()},!1),_self.Prism):_self.Prism;var r=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return r&&(a.filename=r.src,a.manual||r.hasAttribute("data-manual")||("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(a.highlightAll):window.setTimeout(a.highlightAll,16):document.addEventListener("DOMContentLoaded",a.highlightAll))),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism),Prism.languages.markup={comment://,prolog:/<\?[\s\S]+?\?>/,doctype://i,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+)/i,inside:{punctuation:[/^=/,{pattern:/(^|[^\\])["']/,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(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))}),Prism.languages.xml=Prism.languages.markup,Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup,Prism.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(?:;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^{}\s][^{};]*?(?=\s*\{)/,string:{pattern:/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},property:/[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,important:/\B!important\b/i,"function":/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},Prism.languages.css.atrule.inside.rest=Prism.util.clone(Prism.languages.css),Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/()[\s\S]*?(?=<\/style>)/i,lookbehind:!0,inside:Prism.languages.css,alias:"language-css",greedy:!0}}),Prism.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:Prism.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:Prism.languages.css}},alias:"language-css"}},Prism.languages.markup.tag)),Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!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+)|(?:catch\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":/[a-z0-9_]+(?=\()/i,number:/\b0x[\da-f]+\b|(?:\b\d+\.?\d*|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/},Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(?: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|var|void|while|with|yield)\b/,number:/\b(?:0[xX][\dA-Fa-f]+|0[bB][01]+|0[oO][0-7]+|NaN|Infinity)\b|(?:\b\d+\.?\d*|\B\.\d+)(?:[Ee][+-]?\d+)?/,"function":/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*\()/i,operator:/-[-=]?|\+[+=]?|!=?=?|<>?>?=?|=(?:==?|>)?|&[&=]?|\|[|=]?|\*\*?=?|\/=?|~|\^=?|%=?|\?|\.{3}/}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^\/])\/(?!\/)(\[[^\]\r\n]+]|\\.|[^\/\\\[\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0,greedy:!0},"function-variable":{pattern:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*=\s*(?:function\b|(?:\([^()]*\)|[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/i,alias:"function"}}),Prism.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\[\s\S]|[^\\`])*`/,greedy:!0,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/()[\s\S]*?(?=<\/script>)/i,lookbehind:!0,inside:Prism.languages.javascript,alias:"language-javascript",greedy:!0}}),Prism.languages.js=Prism.languages.javascript;

================================================
FILE: source/build/rev-manifest.json
================================================
{
  "css/main.css": "css/main-17bd45cbc3.css",
  "js/all.js": "js/all-0048fc7a19.js"
}

================================================
FILE: source/css/main.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;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:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center}nav .link{padding:0 8px;color:var(--gray-800)}#logo{display:-ms-flexbox;display:flex;-ms-flex-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);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;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center}.footer-container,.footer-container .links{display:-ms-flexbox;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:-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;border:0;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,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNSAxNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGU+JiMyMzk7JiMxMjg7JiMxMzA7PC90aXRsZT48ZGVzYz5DcmVhdGVkIHVzaW5nIEZpZ21hPC9kZXNjPjxnIGlkPSJDYW52YXMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyOCAtMTM2MCkiPjxnIGlkPSImIzIzOTsmIzEyODsmIzEzMDsiPjx1c2UgeGxpbms6aHJlZj0iI3BhdGgwX2ZpbGwiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMjggMTM1OC44OSkiIGZpbGw9IiM4OTk5QTMiLz48L2c+PC9nPjxkZWZzPjxwYXRoIGlkPSJwYXRoMF9maWxsIiBkPSJNIDEwLjQyNjMgNy43MTQyOUMgMTAuNDI2MyA5LjkxOTY0IDguNjMxNyAxMS43MTQzIDYuNDI2MzQgMTEuNzE0M0MgNC4yMjA5OCAxMS43MTQzIDIuNDI2MzQgOS45MTk2NCAyLjQyNjM0IDcuNzE0MjlDIDIuNDI2MzQgNS41MDg5MyA0LjIyMDk4IDMuNzE0MjkgNi40MjYzNCAzLjcxNDI5QyA4LjYzMTcgMy43MTQyOSAxMC40MjYzIDUuNTA4OTMgMTAuNDI2MyA3LjcxNDI5Wk0gMTQuOTk3OCAxNS4xNDI5QyAxNC45OTc4IDE0LjgzOTMgMTQuODcyOCAxNC41NDQ2IDE0LjY2NzQgMTQuMzM5M0wgMTEuNjA0OSAxMS4yNzY4QyAxMi4zMjgxIDEwLjIzMjEgMTIuNzEyMSA4Ljk4MjE0IDEyLjcxMjEgNy43MTQyOUMgMTIuNzEyMSA0LjI0MTA3IDkuODk5NTUgMS40Mjg1NyA2LjQyNjM0IDEuNDI4NTdDIDIuOTUzMTIgMS40Mjg1NyAwLjE0MDYyNSA0LjI0MTA3IDAuMTQwNjI1IDcuNzE0MjlDIDAuMTQwNjI1IDExLjE4NzUgMi45NTMxMiAxNCA2LjQyNjM0IDE0QyA3LjY5NDIgMTQgOC45NDQyIDEzLjYxNjEgOS45ODg4NCAxMi44OTI5TCAxMy4wNTEzIDE1Ljk0NjRDIDEzLjI1NjcgMTYuMTYwNyAxMy41NTEzIDE2LjI4NTcgMTMuODU0OSAxNi4yODU3QyAxNC40Nzk5IDE2LjI4NTcgMTQuOTk3OCAxNS43Njc5IDE0Ljk5NzggMTUuMTQyOVoiLz48L2RlZnM+PC9zdmc+);background-repeat:no-repeat;background-position:21px;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{-ms-flex-positive: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:-ms-flexbox;display:flex;-ms-flex-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 - 80px - 65px - 86px)}.usecase-subtitle{display:-ms-flexbox;display:flex;-ms-flex-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:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.learn-javascript{background-color:#00b99f;color:#fff!important;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 .2s ease-out,transform .2s ease-out}.learn-javascript:hover{opacity:.8}.learn-javascript:active{transform:translate(.5px,.5px)}.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%;animation-duration:.3s;animation-fill-mode:both;animation-iteration-count:1;animation-timing-function:ease-out;animation-name:fade-in;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;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/dynamic-sitemap.blade.php
================================================
https://codetogo.io/
https://codetogo.io/all/
https://codetogo.io/about/
https://codetogo.io/javascript/
@foreach ($jsusecases as $usecase)
https://codetogo.io/{{ $usecase->url() }}/
@endforeach
https://codetogo.io/react/
@foreach ($reactusecases as $usecase)
https://codetogo.io/{{ $usecase->url() }}/
@endforeach


================================================
FILE: source/favicons/browserconfig.xml
================================================


    
        
            
            #da532c
        
    



================================================
FILE: source/favicons/manifest.json
================================================
{
    "name": "Code to go",
    "short_name": "Code to go",
    "icons": [
        {
            "src": "/favicons/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/favicons/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone",
    "start_url": "/"
}


================================================
FILE: source/index.blade.php
================================================
@extends('_layouts.master', ['is_landing' => true])

@section('body')

    
    
    
    Popular use cases
    
    
    
        
            
    How to check if element has class in JavaScript
    
            
        
    Last updated Feb 26, 2024
    

        @include('_jsusecases.check-if-element-has-class')
    
    
    
    
        
            
    How to get last array element in JavaScript
    
            
        
    Last updated Feb 28, 2024
    

        @include('_jsusecases.get-last-array-element')
    
    
    
    
        
            
    How to add multiple classes to element in JavaScript
    
            
        
    Last updated Sep 22, 2018
    

        @include('_jsusecases.add-multiple-classes-to-element')
    
    
    
    
        
            
    How to replace spaces with dashes in JavaScript
    
            
        
    Last updated Nov 11, 2017
    

        @include('_jsusecases.replace-spaces-with-dashes')
    
    
    
    
        
            
    How to loop through array in JavaScript
    
            
        
    Last updated Feb 22, 2020
    

        @include('_jsusecases.loop-through-array')
    
    
    
    
        
            
    How to listen to click event in JavaScript
    
            
        
    Last updated Nov 11, 2017
    

        @include('_jsusecases.listen-to-click-event')
    
    

    

@endsection


================================================
FILE: source/javascript.blade.php
================================================
@extends('_layouts/master', ['title' => 'Use Cases'])

@section('body')


    
    
    JavaScript Use Cases
    

    @foreach ($jsusecases as $usecase)
    setTimestamp($usecase->date);
    ?>
    
        
    
            
    {{ $usecase->question() }}
    
            
    Last updated {{$date->format('M d, Y')}}
    
        
    
        
    @endforeach

    

@endsection


================================================
FILE: source/js/all.js
================================================
"use strict";var client=algoliasearch("7V5EBRZWFF","8a58d6caba2a81878b26e24c1028624d"),index=client.initIndex("prod_JS-HOWTO");autocomplete("#autocomplete",{hint:!0,autoselect:!0},[{source:autocomplete.sources.hits(index,{hitsPerPage:50}),displayKey:"question",templates:{suggestion:function(e){return e._highlightResult.question.value},empty:function(e){return'
    \n        
    No results found.
    \n        
    \n            \n            Click here to contribute\n        
    \n        
    '}}}]).on("autocomplete:selected",function(e,t,a){if(t&&t.url)window.location.href="/"+t.url;else{var n=document.querySelector("#contribute").href;window.open(n+" "+e.currentTarget.value)}}),document.querySelector("#autocomplete").focus({preventScroll:!0});var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-(\w+)\b/i,t=0,a=_self.Prism={manual:_self.Prism&&_self.Prism.manual,disableWorkerMessageHandler:_self.Prism&&_self.Prism.disableWorkerMessageHandler,util:{encode:function(e){return e instanceof n?new n(e.type,a.util.encode(e.content),e.alias):"Array"===a.util.type(e)?e.map(a.util.encode):e.replace(/&/g,"&").replace(/e.length)return;if(!(w instanceof o)){d.lastIndex=0;var P=d.exec(w),F=1;if(!P&&h&&b!=t.length-1){if(d.lastIndex=k,P=d.exec(e),!P)break;for(var S=P.index+(m?P[1].length:0),x=P.index+P[0].length,A=b,_=k,j=t.length;j>A&&(x>_||!t[A].type&&!t[A-1].greedy);++A)_+=t[A].length,S>=_&&(++b,k=_);if(t[b]instanceof o||t[A-1].greedy)continue;F=A-b,w=e.slice(k,_),P.index-=k}if(P){m&&(f=P[1]?P[1].length:0);var S=P.index+f,P=P[0].slice(f),x=S+P.length,O=w.slice(0,S),N=w.slice(x),C=[b,F];O&&(++b,k+=O.length,C.push(O));var $=new o(u,p?a.tokenize(P,p):P,y,P,h);if(C.push($),N&&C.push(N),Array.prototype.splice.apply(t,C),1!=F&&a.matchGrammar(e,t,n,b,k,!0,u),s)break}else if(s)break}}}}},tokenize:function(e,t){var n=[e],r=t.rest;if(r){for(var i in r)t[i]=r[i];delete t.rest}return a.matchGrammar(e,n,t,0,0,!1),n},hooks:{all:{},add:function(e,t){var n=a.hooks.all;n[e]=n[e]||[],n[e].push(t)},run:function(e,t){var n=a.hooks.all[e];if(n&&n.length)for(var r,i=0;r=n[i++];)r(t)}}},n=a.Token=function(e,t,a,n,r){this.type=e,this.content=t,this.alias=a,this.length=0|(n||"").length,this.greedy=!!r};if(n.stringify=function(e,t,r){if("string"==typeof e)return e;if("Array"===a.util.type(e))return e.map(function(a){return n.stringify(a,t,e)}).join("");var i={type:e.type,content:n.stringify(e.content,t,r),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:r};if(e.alias){var s="Array"===a.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,s)}a.hooks.run("wrap",i);var l=Object.keys(i.attributes).map(function(e){return e+'="'+(i.attributes[e]||"").replace(/"/g,""")+'"'}).join(" ");return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+(l?" "+l:"")+">"+i.content+""},!_self.document)return _self.addEventListener?(a.disableWorkerMessageHandler||_self.addEventListener("message",function(e){var t=JSON.parse(e.data),n=t.language,r=t.code,i=t.immediateClose;_self.postMessage(a.highlight(r,a.languages[n],n)),i&&_self.close()},!1),_self.Prism):_self.Prism;var r=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return r&&(a.filename=r.src,a.manual||r.hasAttribute("data-manual")||("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(a.highlightAll):window.setTimeout(a.highlightAll,16):document.addEventListener("DOMContentLoaded",a.highlightAll))),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism),Prism.languages.markup={comment://,prolog:/<\?[\s\S]+?\?>/,doctype://i,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+)/i,inside:{punctuation:[/^=/,{pattern:/(^|[^\\])["']/,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(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))}),Prism.languages.xml=Prism.languages.markup,Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup,Prism.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(?:;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^{}\s][^{};]*?(?=\s*\{)/,string:{pattern:/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},property:/[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,important:/\B!important\b/i,"function":/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},Prism.languages.css.atrule.inside.rest=Prism.util.clone(Prism.languages.css),Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/()[\s\S]*?(?=<\/style>)/i,lookbehind:!0,inside:Prism.languages.css,alias:"language-css",greedy:!0}}),Prism.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:Prism.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:Prism.languages.css}},alias:"language-css"}},Prism.languages.markup.tag)),Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!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+)|(?:catch\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":/[a-z0-9_]+(?=\()/i,number:/\b0x[\da-f]+\b|(?:\b\d+\.?\d*|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/},Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(?: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|var|void|while|with|yield)\b/,number:/\b(?:0[xX][\dA-Fa-f]+|0[bB][01]+|0[oO][0-7]+|NaN|Infinity)\b|(?:\b\d+\.?\d*|\B\.\d+)(?:[Ee][+-]?\d+)?/,"function":/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*\()/i,operator:/-[-=]?|\+[+=]?|!=?=?|<>?>?=?|=(?:==?|>)?|&[&=]?|\|[|=]?|\*\*?=?|\/=?|~|\^=?|%=?|\?|\.{3}/}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^\/])\/(?!\/)(\[[^\]\r\n]+]|\\.|[^\/\\\[\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0,greedy:!0},"function-variable":{pattern:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*=\s*(?:function\b|(?:\([^()]*\)|[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/i,alias:"function"}}),Prism.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\[\s\S]|[^\\`])*`/,greedy:!0,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/()[\s\S]*?(?=<\/script>)/i,lookbehind:!0,inside:Prism.languages.javascript,alias:"language-javascript",greedy:!0}}),Prism.languages.js=Prism.languages.javascript;

================================================
FILE: source/js/index.js
================================================


//# sourceMappingURL=index.js.map


================================================
FILE: source/react.blade.php
================================================
@extends('_layouts/master', ['title' => 'Use Cases'])

@section('body')


    
    
    React Use Cases
    

    @foreach ($reactusecases as $usecase)
    setTimestamp($usecase->date);
    ?>
    
        
    
            
    {{ $usecase->question() }}
    
            
    Last updated {{$date->format('M d, Y')}}
    
        
    
        
    @endforeach

    

@endsection


================================================
FILE: tasks/algolia-sync.js
================================================
const fs = require("fs");
const yamlFront = require("yaml-front-matter");
const algoliasearch = require("algoliasearch");

const paths = ["./source/_jsusecases", "./source/_reactusecases"];

const initIndex = () => {
    const appId = "7V5EBRZWFF";
    const client = algoliasearch(appId, process.env.CODETOGO_ALGOLIA_KEY);
    return client.initIndex("prod_JS-HOWTO");
};

const index = initIndex();
const questions = [];
paths.forEach(path => {

    fs.readdir(path, function(err, items) {
        for (const item of items) {
            const course = getCourseFromPath(path);
            const question = formatQuestion(stripExtension(cleanPath(item)), course);
            const url = formatUrl(stripExtension(item), course);
            if (item === ".DS_Store"){
                continue;
            }
            const objectID = url;
            const fileContents = fs.readFileSync(
                `${path}/${item}`,
                "utf8"
                );
            const info = yamlFront.loadFront(fileContents);
            const reference = info.reference;
            questions.push({ question, url, objectID, reference });
        }
        syncQuestions(questions);
    });
});

const syncQuestions = questions => {
    index.addObjects(questions, (err, content) => {
        if (err) {
            console.log("Error :", err);
            return false;
        }
        console.log("Success!");
        console.log(content);
    });
};

const getCourseFromPath = path => {
    if (path === "./source/_jsusecases"){
        return "javascript";
    }
    if (path === "./source/_reactusecases"){
        return "react";
    }
    console.log("Could not find course");
    process.exit();
}

const stripExtension = filename => {
    return filename.replace(".md", "");
};

const cleanPath = filename => {
    return filename.replace(/\-/g, " ");
};

const formatQuestion = (question, course) => {
    if (course === "javascript"){
        return `How to ${question} in JavaScript`;
    }
    if (course === "react"){
        return `How to ${question} in React`;
    }
};

const formatUrl = (url, course) => {
    return `how-to-${url}-in-${course}`;
};


================================================
FILE: tasks/bin.js
================================================
var hasbin = require('hasbin');
var fs = require('fs');
var path = require('path');

module.exports = {
    path: function() {
        if (fs.existsSync('./vendor/bin/jigsaw')) {
            return path.normalize('./vendor/bin/jigsaw')
        }

        if (hasbin.sync('jigsaw')) {
            return 'jigsaw';
        }

        console.log('Could not find Jigsaw; please install it via Composer, either locally or globally.');

        process.exit();
    }
};


================================================
FILE: tasks/build.js
================================================
let argv = require('yargs').argv;
let bin = require('./bin');
let command = require('node-cmd');

let BrowserSync = require('browser-sync');
let BrowserSyncPlugin = require('browser-sync-webpack-plugin');
let ExtraWatchWebpackPlugin = require('extra-watch-webpack-plugin');

let browserSyncInstance;
let env = argv.e || argv.env || 'local';
let port = argv.p || argv.port || 3000;

module.exports = {
    jigsaw: {
        apply(compiler) {
            compiler.hooks.done.tap('DonePlugin', (compilation) => {
                command.get(bin.path() + ' build -q ' + env, (error, stdout, stderr) => {
                    console.log(error ? stderr : stdout);

                    if (browserSyncInstance) {
                        browserSyncInstance.reload();
                    }
                });
            });
        }
    },

    watch: function (paths) {
        return new ExtraWatchWebpackPlugin({
            files: paths,
        });
    },

    browserSync: function (proxy) {
        return new BrowserSyncPlugin({
            notify: false,
            port: port,
            proxy: proxy,
            server: proxy ? null : { baseDir: 'build_' + env + '/' },
        },
        {
            reload: false,
            callback: function() {
                browserSyncInstance = BrowserSync.get('bs-webpack-plugin');
            },
        })
    },
};


================================================
FILE: webpack.mix.js
================================================
let mix = require("laravel-mix");
let build = require("./tasks/build.js");

mix.disableSuccessNotifications();
mix.setPublicPath("source/assets/build");
mix.webpackConfig({
    plugins: [
        build.jigsaw,
        build.browserSync(),
        build.watch([
            "source/**/*.md",
            "source/**/*.php",
            "source/**/*.scss",
            "!source/**/_tmp/*"
        ])
    ]
});

mix.js("source/_assets/js/main.js", "js")
    .sass("source/_assets/sass/main.scss", "css")
    .options({
        processCssUrls: false
    });
// turned off .version(); because it would invalidate the entire cloudflare cache
// also because the JS is rarely updated