├── .editorconfig ├── .github ├── CODEOWNERS ├── ISSUE_TEMPLATE │ ├── bug.yml │ └── config.yml ├── dependabot.yml ├── labels.json └── workflows │ ├── codeql.yml │ ├── idle.yml │ ├── set-default-labels.yml │ └── welcome-bot.yml ├── .gitignore ├── .prettierrc.json ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── REVIEWING.md ├── module-examples ├── README.md ├── basic-modules │ ├── index.html │ ├── main.js │ └── modules │ │ ├── canvas.js │ │ └── square.js ├── classes │ ├── index.html │ ├── main.js │ └── modules │ │ ├── canvas.js │ │ ├── circle.js │ │ ├── square.js │ │ └── triangle.js ├── dynamic-module-imports │ ├── index.html │ ├── main.js │ └── modules │ │ ├── canvas.js │ │ ├── circle.js │ │ ├── square.js │ │ └── triangle.js ├── module-aggregation │ ├── index.html │ ├── main.js │ └── modules │ │ ├── canvas.js │ │ ├── shapes.js │ │ └── shapes │ │ ├── circle.js │ │ ├── square.js │ │ └── triangle.js ├── module-objects │ ├── index.html │ ├── main.js │ └── modules │ │ ├── canvas.js │ │ ├── circle.js │ │ ├── square.js │ │ └── triangle.js ├── package.json ├── renaming │ ├── index.html │ ├── main.js │ └── modules │ │ ├── canvas.js │ │ ├── circle.js │ │ ├── square.js │ │ └── triangle.js └── top-level-await │ ├── data │ └── colors.json │ ├── index.html │ ├── main.js │ └── modules │ ├── canvas.js │ ├── circle.js │ ├── getColors.js │ ├── square.js │ └── triangle.js └── promises-test ├── index.html └── myLittleVader.jpg /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | end_of_line = lf 5 | insert_final_newline = true 6 | charset = utf-8 7 | indent_style = space 8 | indent_size = 2 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | # Default 2 | * @mdn/core-yari-content 3 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug.yml: -------------------------------------------------------------------------------- 1 | name: "Issue report" 2 | description: Report an unexpected problem or unintended behavior. 3 | labels: ["needs triage"] 4 | body: 5 | - type: markdown 6 | attributes: 7 | value: | 8 | ### Before you start 9 | 10 | **Want to fix the problem yourself?** This project is open source and we welcome fixes and improvements from the community! 11 | 12 | ↩ Check the project [CONTRIBUTING.md](../blob/main/CONTRIBUTING.md) guide to see how to get started. 13 | 14 | --- 15 | - type: textarea 16 | id: problem 17 | attributes: 18 | label: What information was incorrect, unhelpful, or incomplete? 19 | validations: 20 | required: true 21 | - type: textarea 22 | id: expected 23 | attributes: 24 | label: What did you expect to see? 25 | validations: 26 | required: true 27 | - type: textarea 28 | id: references 29 | attributes: 30 | label: Do you have any supporting links, references, or citations? 31 | description: Link to information that helps us confirm your issue. 32 | - type: textarea 33 | id: more-info 34 | attributes: 35 | label: Do you have anything more you want to share? 36 | description: For example, steps to reproduce, screenshots, screen recordings, or sample code. 37 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: true 2 | contact_links: 3 | - name: Content or feature request 4 | url: https://github.com/mdn/mdn/issues/new/choose 5 | about: Propose new content for MDN Web Docs or submit a feature request using this link. 6 | - name: MDN GitHub Discussions 7 | url: https://github.com/orgs/mdn/discussions 8 | about: Does the issue involve a lot of changes, or is it hard to split it into actionable tasks? Start a discussion before opening an issue. 9 | - name: MDN Web Docs on Discourse 10 | url: https://discourse.mozilla.org/c/mdn/learn/250 11 | about: Need help with assessments on MDN Web Docs? We have a support community for this purpose on Discourse. 12 | - name: Help with code 13 | url: https://stackoverflow.com/ 14 | about: If you are stuck and need help with code, StackOverflow is a great resource. 15 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: "github-actions" 4 | directory: "/" 5 | schedule: 6 | interval: "daily" 7 | -------------------------------------------------------------------------------- /.github/labels.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "good first issue", 4 | "color": "028c46", 5 | "description": "A good issue for newcomers to get started with." 6 | }, 7 | { 8 | "name": "help wanted", 9 | "color": "028c46", 10 | "description": "If you know something about this, we would love your help!" 11 | }, 12 | { 13 | "name": "needs info", 14 | "color": "028c46", 15 | "description": "This needs more information to review or act on." 16 | }, 17 | { 18 | "name": "needs triage", 19 | "color": "028c46", 20 | "description": "Triage needed by staff and/or partners. Automatically applied when an issue is opened." 21 | }, 22 | { 23 | "name": "expert help needed", 24 | "color": "028c46", 25 | "description": "This needs more information from a subject matter expert (SME)." 26 | }, 27 | { 28 | "name": "idle", 29 | "color": "028c46", 30 | "description": "Issues and pull requests with no activity for three months." 31 | }, 32 | { 33 | "name": "on hold", 34 | "color": "028c46", 35 | "description": "Waiting on something else before this can be moved forward." 36 | }, 37 | { 38 | "name": "for later", 39 | "color": "028c46", 40 | "description": "Not planned at this time." 41 | }, 42 | { 43 | "name": "needs content update", 44 | "color": "028c46", 45 | "description": "Needs update to the content to support this change." 46 | }, 47 | { 48 | "name": "chore", 49 | "color": "028c46", 50 | "description": "A routine task." 51 | }, 52 | { 53 | "name": "enhancement", 54 | "color": "028c46", 55 | "description": "Improves an existing feature." 56 | }, 57 | { 58 | "name": "bug", 59 | "color": "c05964", 60 | "description": "Indicates an unexpected problem or unintended behavior." 61 | }, 62 | { 63 | "name": "wontfix", 64 | "color": "c05964", 65 | "description": "Deemed to be outside the scope of the project or would require significant time and resources to fix." 66 | }, 67 | { 68 | "name": "effort: small", 69 | "color": "866dc1", 70 | "description": "Task is a small effort." 71 | }, 72 | { 73 | "name": "effort: medium", 74 | "color": "866dc1", 75 | "description": "Task is a medium effort." 76 | }, 77 | { 78 | "name": "effort: large", 79 | "color": "866dc1", 80 | "description": "Task is large effort." 81 | }, 82 | { 83 | "name": "p0", 84 | "color": "6e8bc1", 85 | "description": "Urgent. We will address this as soon as possible." 86 | }, 87 | { 88 | "name": "p1", 89 | "color": "6e8bc1", 90 | "description": "We will address this soon and will provide capacity from our team for it in the next few releases." 91 | }, 92 | { 93 | "name": "p2", 94 | "color": "6e8bc1", 95 | "description": "We want to address this but may have other higher priority items." 96 | }, 97 | { 98 | "name": "p3", 99 | "color": "6e8bc1", 100 | "description": "We don't have visibility when this will be addressed." 101 | } 102 | ] 103 | -------------------------------------------------------------------------------- /.github/workflows/codeql.yml: -------------------------------------------------------------------------------- 1 | name: "CodeQL" 2 | 3 | on: 4 | push: 5 | branches: ["main"] 6 | paths-ignore: 7 | - "**.md" 8 | pull_request: 9 | # The branches below must be a subset of the branches above 10 | branches: ["main"] 11 | paths-ignore: 12 | - "**.md" 13 | 14 | jobs: 15 | analyze: 16 | name: Analyze 17 | runs-on: ubuntu-latest 18 | permissions: 19 | actions: read 20 | contents: read 21 | security-events: write 22 | 23 | strategy: 24 | matrix: 25 | language: ["javascript"] 26 | 27 | steps: 28 | - name: Checkout repository 29 | uses: actions/checkout@v4 30 | 31 | # Initializes the CodeQL tools for scanning. 32 | - name: Initialize CodeQL 33 | uses: github/codeql-action/init@v3 34 | with: 35 | languages: ${{ matrix.language }} 36 | 37 | - name: Perform CodeQL Analysis 38 | uses: github/codeql-action/analyze@v3 39 | with: 40 | category: "/language:${{matrix.language}}" 41 | -------------------------------------------------------------------------------- /.github/workflows/idle.yml: -------------------------------------------------------------------------------- 1 | name: "Label idle issues" 2 | 3 | on: 4 | schedule: 5 | - cron: "0 8 * * *" 6 | 7 | jobs: 8 | mark-as-idle: 9 | uses: mdn/workflows/.github/workflows/idle.yml@main 10 | with: 11 | target-repo: "mdn/js-examples" 12 | -------------------------------------------------------------------------------- /.github/workflows/set-default-labels.yml: -------------------------------------------------------------------------------- 1 | name: set-default-labels 2 | on: [workflow_dispatch] 3 | 4 | jobs: 5 | set-default-labels: 6 | uses: mdn/workflows/.github/workflows/set-default-labels.yml@main 7 | with: 8 | target-repo: "mdn/js-examples" 9 | should-delete-labels: true 10 | -------------------------------------------------------------------------------- /.github/workflows/welcome-bot.yml: -------------------------------------------------------------------------------- 1 | # This workflow is hosted at: https://github.com/mdn/workflows/blob/main/.github/workflows/allo-allo.yml 2 | # Docs for this workflow: https://github.com/mdn/workflows/blob/main/README.md#allo-allo 3 | name: "AlloAllo" 4 | 5 | on: 6 | issues: 7 | types: 8 | - opened 9 | pull_request_target: 10 | branches: 11 | - main 12 | types: 13 | - opened 14 | - closed 15 | 16 | jobs: 17 | allo-allo: 18 | uses: mdn/workflows/.github/workflows/allo-allo.yml@main 19 | with: 20 | target-repo: "mdn/js-examples" 21 | issue-welcome: > 22 | It looks like this is your first issue. Welcome! 👋 23 | One of the project maintainers will be with you as soon as possible. We 24 | appreciate your patience. To safeguard the health of the project, please 25 | take a moment to read our [code of conduct](../blob/main/CODE_OF_CONDUCT.md). 26 | pr-welcome: > 27 | It looks like this is your first pull request. 🎉 28 | Thank you for your contribution! One of the project maintainers will triage 29 | and assign the pull request for review. We appreciate your patience. To 30 | safeguard the health of the project, please take a moment to read our 31 | [code of conduct](../blob/main/CODE_OF_CONDUCT.md). 32 | pr-merged: > 33 | Congratulations on your first merged pull request. 🎉 Thank you for your contribution! 34 | Did you know we have a [project board](https://github.com/orgs/mdn/projects/25) with high-impact contribution opportunities? 35 | We look forward to your next contribution. 36 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Code of conduct 2 | 3 | This repository is governed by Mozilla's code of conduct and etiquette guidelines. 4 | For more details, read [Mozilla's Community Participation Guidelines](https://www.mozilla.org/about/governance/policies/participation/). 5 | 6 | ## Reporting violations 7 | 8 | For more information on how to report violations of the Community Participation Guidelines, read the [How to report](https://www.mozilla.org/about/governance/policies/participation/reporting/) page. 9 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contribution guide 2 | 3 | ![github-profile](https://user-images.githubusercontent.com/10350960/166113119-629295f6-c282-42c9-9379-af2de5ad4338.png) 4 | 5 | - [Ways to contribute](#ways-to-contribute) 6 | - [Finding an issue](#finding-an-issue) 7 | - [Asking for help](#asking-for-help) 8 | - [Pull request process](#pull-request-process) 9 | - [Forking and cloning the project](#forking-and-cloning-the-project) 10 | - [Signing commits](#signing-commits) 11 | 12 | Welcome 👋 Thank you for your interest in contributing to MDN Web Docs. We are happy to have you join us! 💖 13 | 14 | As you get started, you are in the best position to give us feedback on project areas we might have forgotten about or assumed to work well. 15 | These include, but are not limited to: 16 | 17 | - Problems found while setting up a new developer environment 18 | - Gaps in our documentation 19 | - Bugs in our automation scripts 20 | 21 | If anything doesn't make sense or work as expected, please open an issue and let us know! 22 | 23 | ## Ways to contribute 24 | 25 | We welcome many different types of contributions including: 26 | 27 | - New features and content suggestions. 28 | - Identifying and filing issues. 29 | - Providing feedback on existing issues. 30 | - Engaging with the community and answering questions. 31 | - Contributing documentation or code. 32 | - Promoting the project in personal circles and social media. 33 | 34 | ## Finding an issue 35 | 36 | We have issues labeled `good first issue` for new contributors and `help wanted` suitable for any contributor. 37 | Good first issues have extra information to help you make your first contribution a success. 38 | Help wanted issues are ideal when you feel a bit more comfortable with the project details. 39 | 40 | Sometimes there won't be any issues with these labels, but there is likely still something for you to work on. 41 | If you want to contribute but don't know where to start or can't find a suitable issue, speak to us on [Matrix](https://matrix.to/#/#mdn:mozilla.org), and we will be happy to help. 42 | 43 | Once you find an issue you'd like to work on, please post a comment saying you want to work on it. 44 | Something like "I want to work on this" is fine. 45 | Also, mention the community team using the `@mdn/mdn-community-engagement` handle to ensure someone will get back to you. 46 | 47 | ## Asking for help 48 | 49 | The best way to reach us with a question when contributing is to use the following channels in the following order of precedence: 50 | 51 | - [Start a discussion](https://github.com/orgs/mdn/discussions) 52 | - Ask your question or highlight your discussion on [Matrix](https://matrix.to/#/#mdn:mozilla.org). 53 | - File an issue and tag the community team using the `@mdn/mdn-community-engagement` handle. 54 | 55 | ## Pull request process 56 | 57 | The MDN Web Docs project has a well-defined pull request process which is documented in the [Pull request guidelines](https://developer.mozilla.org/en-US/docs/MDN/Community/Pull_requests). 58 | Make sure you read and understand this process before you start working on a pull request. 59 | 60 | ### Forking and cloning the project 61 | 62 | The first step in setting up your development environment is to [fork the repository](https://docs.github.com/en/get-started/quickstart/fork-a-repo) and [clone](https://docs.github.com/en/get-started/quickstart/fork-a-repo#cloning-your-forked-repository) the repository to your local machine. 63 | 64 | ## Signing commits 65 | 66 | We require all commits to be signed to verify the author's identity. 67 | GitHub has a detailed guide on [setting up signed commits](https://docs.github.com/en/authentication/managing-commit-signature-verification/signing-commits). 68 | If you get stuck, please [ask for help](#asking-for-help). 69 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | CC0 1.0 Universal 2 | 3 | Statement of Purpose 4 | 5 | The laws of most jurisdictions throughout the world automatically confer 6 | exclusive Copyright and Related Rights (defined below) upon the creator and 7 | subsequent owner(s) (each and all, an "owner") of an original work of 8 | authorship and/or a database (each, a "Work"). 9 | 10 | Certain owners wish to permanently relinquish those rights to a Work for the 11 | purpose of contributing to a commons of creative, cultural and scientific 12 | works ("Commons") that the public can reliably and without fear of later 13 | claims of infringement build upon, modify, incorporate in other works, reuse 14 | and redistribute as freely as possible in any form whatsoever and for any 15 | purposes, including without limitation commercial purposes. These owners may 16 | contribute to the Commons to promote the ideal of a free culture and the 17 | further production of creative, cultural and scientific works, or to gain 18 | reputation or greater distribution for their Work in part through the use and 19 | efforts of others. 20 | 21 | For these and/or other purposes and motivations, and without any expectation 22 | of additional consideration or compensation, the person associating CC0 with a 23 | Work (the "Affirmer"), to the extent that he or she is an owner of Copyright 24 | and Related Rights in the Work, voluntarily elects to apply CC0 to the Work 25 | and publicly distribute the Work under its terms, with knowledge of his or her 26 | Copyright and Related Rights in the Work and the meaning and intended legal 27 | effect of CC0 on those rights. 28 | 29 | 1. Copyright and Related Rights. A Work made available under CC0 may be 30 | protected by copyright and related or neighboring rights ("Copyright and 31 | Related Rights"). Copyright and Related Rights include, but are not limited 32 | to, the following: 33 | 34 | i. the right to reproduce, adapt, distribute, perform, display, communicate, 35 | and translate a Work; 36 | 37 | ii. moral rights retained by the original author(s) and/or performer(s); 38 | 39 | iii. publicity and privacy rights pertaining to a person's image or likeness 40 | depicted in a Work; 41 | 42 | iv. rights protecting against unfair competition in regards to a Work, 43 | subject to the limitations in paragraph 4(a), below; 44 | 45 | v. rights protecting the extraction, dissemination, use and reuse of data in 46 | a Work; 47 | 48 | vi. database rights (such as those arising under Directive 96/9/EC of the 49 | European Parliament and of the Council of 11 March 1996 on the legal 50 | protection of databases, and under any national implementation thereof, 51 | including any amended or successor version of such directive); and 52 | 53 | vii. other similar, equivalent or corresponding rights throughout the world 54 | based on applicable law or treaty, and any national implementations thereof. 55 | 56 | 2. Waiver. To the greatest extent permitted by, but not in contravention of, 57 | applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and 58 | unconditionally waives, abandons, and surrenders all of Affirmer's Copyright 59 | and Related Rights and associated claims and causes of action, whether now 60 | known or unknown (including existing as well as future claims and causes of 61 | action), in the Work (i) in all territories worldwide, (ii) for the maximum 62 | duration provided by applicable law or treaty (including future time 63 | extensions), (iii) in any current or future medium and for any number of 64 | copies, and (iv) for any purpose whatsoever, including without limitation 65 | commercial, advertising or promotional purposes (the "Waiver"). Affirmer makes 66 | the Waiver for the benefit of each member of the public at large and to the 67 | detriment of Affirmer's heirs and successors, fully intending that such Waiver 68 | shall not be subject to revocation, rescission, cancellation, termination, or 69 | any other legal or equitable action to disrupt the quiet enjoyment of the Work 70 | by the public as contemplated by Affirmer's express Statement of Purpose. 71 | 72 | 3. Public License Fallback. Should any part of the Waiver for any reason be 73 | judged legally invalid or ineffective under applicable law, then the Waiver 74 | shall be preserved to the maximum extent permitted taking into account 75 | Affirmer's express Statement of Purpose. In addition, to the extent the Waiver 76 | is so judged Affirmer hereby grants to each affected person a royalty-free, 77 | non transferable, non sublicensable, non exclusive, irrevocable and 78 | unconditional license to exercise Affirmer's Copyright and Related Rights in 79 | the Work (i) in all territories worldwide, (ii) for the maximum duration 80 | provided by applicable law or treaty (including future time extensions), (iii) 81 | in any current or future medium and for any number of copies, and (iv) for any 82 | purpose whatsoever, including without limitation commercial, advertising or 83 | promotional purposes (the "License"). The License shall be deemed effective as 84 | of the date CC0 was applied by Affirmer to the Work. Should any part of the 85 | License for any reason be judged legally invalid or ineffective under 86 | applicable law, such partial invalidity or ineffectiveness shall not 87 | invalidate the remainder of the License, and in such case Affirmer hereby 88 | affirms that he or she will not (i) exercise any of his or her remaining 89 | Copyright and Related Rights in the Work or (ii) assert any associated claims 90 | and causes of action with respect to the Work, in either case contrary to 91 | Affirmer's express Statement of Purpose. 92 | 93 | 4. Limitations and Disclaimers. 94 | 95 | a. No trademark or patent rights held by Affirmer are waived, abandoned, 96 | surrendered, licensed or otherwise affected by this document. 97 | 98 | b. Affirmer offers the Work as-is and makes no representations or warranties 99 | of any kind concerning the Work, express, implied, statutory or otherwise, 100 | including without limitation warranties of title, merchantability, fitness 101 | for a particular purpose, non infringement, or the absence of latent or 102 | other defects, accuracy, or the present or absence of errors, whether or not 103 | discoverable, all to the greatest extent permissible under applicable law. 104 | 105 | c. Affirmer disclaims responsibility for clearing rights of other persons 106 | that may apply to the Work or any use thereof, including without limitation 107 | any person's Copyright and Related Rights in the Work. Further, Affirmer 108 | disclaims responsibility for obtaining any necessary consents, permissions 109 | or other rights required for any use of the Work. 110 | 111 | d. Affirmer understands and acknowledges that Creative Commons is not a 112 | party to this document and has no duty or obligation with respect to this 113 | CC0 or use of the Work. 114 | 115 | For more information, please see 116 | 117 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # js-examples 2 | 3 | This repository contains examples of JavaScript usage. 4 | 5 | The "promises-test" directory contains a JS promises test example, for learning purposes. [Run the example live](http://mdn.github.io/js-examples/promises-test/). 6 | 7 | The "modules" directory contains a series of examples that explain how [JavaScript modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) are used. The subdirectories are as follows: 8 | 9 | - [basic-modules](module-examples/basic-modules): Simple example that demonstrates module basics, including default exports ([run the example live](http://mdn.github.io/js-examples/module-examples/basic-modules)). 10 | - [renaming](module-examples/renaming): Shows how exports can be renamed to avoid conflicts, using `x as y` syntax ([run the example live](http://mdn.github.io/js-examples/module-examples/renaming)). 11 | - [module-objects](module-examples/module-objects)): Shows how to import an entire module as an object using `import * as x from 'y.js'` syntax ([run the example live](http://mdn.github.io/js-examples/module-examples/module-objects)). 12 | - [classes](module-examples/classes): Provides an example of importing a class from a module ([run the example live](http://mdn.github.io/js-examples/module-examples/classes)). 13 | - [module-aggregation](module-examples/module-aggregation): Shows how sub module features can be aggregated into a parent module using `export { x } from 'y.js'` syntax ([run the example live](http://mdn.github.io/js-examples/module-examples/module-aggregation)). 14 | - [dynamic-module-imports](module-examples/dynamic-module-imports): Demonstrates dynamic module loading using `import().then()` ([run the example live](http://mdn.github.io/js-examples/module-examples/dynamic-module-imports)). 15 | - [top-level-await](module-examples/top-level-await): An example of using the `await` keyword within a module ([run the example live](http://mdn.github.io/js-examples/module-examples/top-level-await)). 16 | -------------------------------------------------------------------------------- /REVIEWING.md: -------------------------------------------------------------------------------- 1 | # Reviewing guide 2 | 3 | All reviewers must abide by the [code of conduct](CODE_OF_CONDUCT.md); they are also protected by the code of conduct. 4 | A reviewer should not tolerate poor behavior and is encouraged to [report any behavior](CODE_OF_CONDUCT.md#Reporting_violations) that violates the code of conduct. 5 | 6 | ## Review process 7 | 8 | The MDN Web Docs team has a well-defined review process that must be followed by reviewers in all repositories under the GitHub MDN organization. 9 | This process is described in detail on the [Pull request guidelines](https://developer.mozilla.org/en-US/docs/MDN/Community/Pull_requests) page. 10 | -------------------------------------------------------------------------------- /module-examples/README.md: -------------------------------------------------------------------------------- 1 | # JavaScript module examples 2 | The "modules" directory contains a series of examples that explain how [JavaScript modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) are used. The subdirectories are as follows: 3 | 4 | * [basic-modules](basic-modules): Simple example that demonstrates module basics, including default exports ([run the example live](http://mdn.github.io/js-examples/module-examples/basic-modules)). 5 | * [renaming](renaming): Shows how exports can be renamed to avoid conflicts, using `x as y` syntax ([run the example live](http://mdn.github.io/js-examples/module-examples/renaming)). 6 | * [module-objects](module-objects): Shows how to import an entire module as an object using `import * as x from 'y.js'` syntax ([run the example live](http://mdn.github.io/js-examples/module-examples/module-objects)). 7 | * [classes](classes): Provides an example of importing a class from a module ([run the example live](http://mdn.github.io/js-examples/module-examples/classes)). 8 | * [module-aggregation](module-aggregation): Shows how sub module features can be aggregated into a parent module using `export { x } from 'y.js'` syntax ([run the example live](http://mdn.github.io/js-examples/module-examples/module-aggregation)). 9 | * [dynamic-module-imports](dynamic-module-imports): Demonstrates dynamic module loading using `import().then()` ([run the example live](http://mdn.github.io/js-examples/module-examples/dynamic-module-imports)). 10 | * [top-level-await](top-level-await): Shows the use of top-level await when exporting data from a module. ([run the example live](https://mdn.github.io/js-examples/module-examples/top-level-await/)). 11 | -------------------------------------------------------------------------------- /module-examples/basic-modules/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Basic JavaScript module example 6 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /module-examples/basic-modules/main.js: -------------------------------------------------------------------------------- 1 | import { create, createReportList } from './modules/canvas.js'; 2 | import { name, draw, reportArea, reportPerimeter } from './modules/square.js'; 3 | import randomSquare from './modules/square.js'; 4 | 5 | let myCanvas = create('myCanvas', document.body, 480, 320); 6 | let reportList = createReportList(myCanvas.id); 7 | 8 | let square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue'); 9 | reportArea(square1.length, reportList); 10 | reportPerimeter(square1.length, reportList); 11 | 12 | // Use the default 13 | let square2 = randomSquare(myCanvas.ctx); 14 | -------------------------------------------------------------------------------- /module-examples/basic-modules/modules/canvas.js: -------------------------------------------------------------------------------- 1 | function create(id, parent, width, height) { 2 | let divWrapper = document.createElement('div'); 3 | let canvasElem = document.createElement('canvas'); 4 | parent.appendChild(divWrapper); 5 | divWrapper.appendChild(canvasElem); 6 | 7 | divWrapper.id = id; 8 | canvasElem.width = width; 9 | canvasElem.height = height; 10 | 11 | let ctx = canvasElem.getContext('2d'); 12 | 13 | return { 14 | ctx: ctx, 15 | id: id 16 | }; 17 | } 18 | 19 | function createReportList(wrapperId) { 20 | let list = document.createElement('ul'); 21 | list.id = wrapperId + '-reporter'; 22 | 23 | let canvasWrapper = document.getElementById(wrapperId); 24 | canvasWrapper.appendChild(list); 25 | 26 | return list.id; 27 | } 28 | 29 | export { create, createReportList }; 30 | -------------------------------------------------------------------------------- /module-examples/basic-modules/modules/square.js: -------------------------------------------------------------------------------- 1 | const name = 'square'; 2 | 3 | function draw(ctx, length, x, y, color) { 4 | ctx.fillStyle = color; 5 | ctx.fillRect(x, y, length, length); 6 | 7 | return { 8 | length: length, 9 | x: x, 10 | y: y, 11 | color: color 12 | }; 13 | } 14 | 15 | function random(min, max) { 16 | let num = Math.floor(Math.random() * (max - min)) + min; 17 | return num; 18 | } 19 | 20 | function reportArea(length, listId) { 21 | let listItem = document.createElement('li'); 22 | listItem.textContent = `${name} area is ${length * length}px squared.` 23 | 24 | let list = document.getElementById(listId); 25 | list.appendChild(listItem); 26 | } 27 | 28 | function reportPerimeter(length, listId) { 29 | let listItem = document.createElement('li'); 30 | listItem.textContent = `${name} perimeter is ${length * 4}px.` 31 | 32 | let list = document.getElementById(listId); 33 | list.appendChild(listItem); 34 | } 35 | 36 | function randomSquare(ctx) { 37 | let color1 = random(0, 255); 38 | let color2 = random(0, 255); 39 | let color3 = random(0, 255); 40 | let color = `rgb(${color1},${color2},${color3})` 41 | ctx.fillStyle = color; 42 | 43 | let x = random(0, 480); 44 | let y = random(0, 320); 45 | let length = random(10, 100); 46 | ctx.fillRect(x, y, length, length); 47 | 48 | return { 49 | length: length, 50 | x: x, 51 | y: y, 52 | color: color 53 | }; 54 | } 55 | 56 | export { name, draw, reportArea, reportPerimeter }; 57 | export default randomSquare; 58 | -------------------------------------------------------------------------------- /module-examples/classes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JavaScript module class example 6 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /module-examples/classes/main.js: -------------------------------------------------------------------------------- 1 | import { Canvas } from './modules/canvas.js'; 2 | 3 | import { Square } from './modules/square.js'; 4 | import { Circle } from './modules/circle.js'; 5 | import { Triangle } from './modules/triangle.js'; 6 | 7 | // create the canvas and reporting list 8 | let myCanvas = new Canvas('myCanvas', document.body, 480, 320); 9 | myCanvas.create(); 10 | myCanvas.createReportList(); 11 | 12 | // draw a square 13 | let square1 = new Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue'); 14 | square1.draw(); 15 | square1.reportArea(); 16 | square1.reportPerimeter(); 17 | 18 | // draw a circle 19 | let circle1 = new Circle(myCanvas.ctx, myCanvas.listId, 75, 200, 100, 'green'); 20 | circle1.draw(); 21 | circle1.reportArea(); 22 | circle1.reportPerimeter(); 23 | 24 | // draw a triangle 25 | let triangle1 = new Triangle(myCanvas.ctx, myCanvas.listId, 100, 75, 190, 'yellow'); 26 | triangle1.draw(); 27 | triangle1.reportArea(); 28 | triangle1.reportPerimeter(); 29 | -------------------------------------------------------------------------------- /module-examples/classes/modules/canvas.js: -------------------------------------------------------------------------------- 1 | class Canvas { 2 | constructor(id, parent, width, height) { 3 | this.id = id; 4 | this.listId = null; 5 | this.parent = parent; 6 | this.width = width; 7 | this.height = height; 8 | this.ctx = null; 9 | } 10 | 11 | // new class stuff above here 12 | 13 | create() { 14 | if(this.ctx !== null) { 15 | console.log('Canvas already created!'); 16 | return; 17 | } else { 18 | let divWrapper = document.createElement('div'); 19 | let canvasElem = document.createElement('canvas'); 20 | this.parent.appendChild(divWrapper); 21 | divWrapper.appendChild(canvasElem); 22 | 23 | divWrapper.id = this.id; 24 | canvasElem.width = this.width; 25 | canvasElem.height = this.height; 26 | 27 | this.ctx = canvasElem.getContext('2d'); 28 | } 29 | } 30 | 31 | createReportList() { 32 | if(this.listId !== null) { 33 | console.log('Report list already created!'); 34 | return; 35 | } else { 36 | let list = document.createElement('ul'); 37 | list.id = this.id + '-reporter'; 38 | 39 | let canvasWrapper = document.getElementById(this.id); 40 | canvasWrapper.appendChild(list); 41 | 42 | this.listId = list.id; 43 | } 44 | } 45 | } 46 | 47 | export { Canvas }; 48 | -------------------------------------------------------------------------------- /module-examples/classes/modules/circle.js: -------------------------------------------------------------------------------- 1 | function degToRad(degrees) { 2 | return degrees * Math.PI / 180; 3 | } 4 | 5 | class Circle { 6 | constructor(ctx, listId, radius, x, y, color) { 7 | this.ctx = ctx; 8 | this.listId = listId; 9 | this.radius = radius; 10 | this.x = x; 11 | this.y = y; 12 | this.color = color; 13 | this.name = 'circle'; 14 | } 15 | 16 | draw() { 17 | this.ctx.fillStyle = this.color; 18 | this.ctx.beginPath(); 19 | this.ctx.arc(this.x, this.y, this.radius, degToRad(0), degToRad(360), false); 20 | this.ctx.fill(); 21 | } 22 | 23 | reportArea() { 24 | let listItem = document.createElement('li'); 25 | listItem.textContent = `${this.name} area is ${Math.round(Math.PI * (this.radius * this.radius))}px squared.` 26 | 27 | let list = document.getElementById(this.listId); 28 | list.appendChild(listItem); 29 | } 30 | 31 | reportPerimeter() { 32 | let listItem = document.createElement('li'); 33 | listItem.textContent = `${this.name} circumference is ${Math.round(2 * Math.PI * this.radius)}px.` 34 | 35 | let list = document.getElementById(this.listId); 36 | list.appendChild(listItem); 37 | } 38 | } 39 | 40 | export { Circle }; 41 | -------------------------------------------------------------------------------- /module-examples/classes/modules/square.js: -------------------------------------------------------------------------------- 1 | class Square { 2 | constructor(ctx, listId, length, x, y, color) { 3 | this.ctx = ctx; 4 | this.listId = listId; 5 | this.length = length; 6 | this.x = x; 7 | this.y = y; 8 | this.color = color; 9 | this.name = 'square'; 10 | } 11 | 12 | draw() { 13 | this.ctx.fillStyle = this.color; 14 | this.ctx.fillRect(this.x, this.y, this.length, this.length); 15 | } 16 | 17 | reportArea() { 18 | let listItem = document.createElement('li'); 19 | listItem.textContent = `${this.name} area is ${this.length * this.length}px squared.` 20 | 21 | let list = document.getElementById(this.listId); 22 | list.appendChild(listItem); 23 | } 24 | 25 | reportPerimeter() { 26 | let listItem = document.createElement('li'); 27 | listItem.textContent = `${this.name} perimeter is ${this.length * 4}px.` 28 | 29 | let list = document.getElementById(this.listId); 30 | list.appendChild(listItem); 31 | } 32 | } 33 | 34 | export { Square }; 35 | -------------------------------------------------------------------------------- /module-examples/classes/modules/triangle.js: -------------------------------------------------------------------------------- 1 | function degToRad(degrees) { 2 | return degrees * Math.PI / 180; 3 | }; 4 | 5 | class Triangle { 6 | constructor(ctx, listId, length, x, y, color) { 7 | this.ctx = ctx; 8 | this.listId = listId; 9 | this.length = length; 10 | this.x = x; 11 | this.y = y; 12 | this.color = color; 13 | this.name = 'triangle'; 14 | } 15 | 16 | draw() { 17 | this.ctx.fillStyle = this.color; 18 | 19 | this.ctx.beginPath(); 20 | this.ctx.moveTo(this.x, this.y); 21 | this.ctx.lineTo(this.x + this.length, this.y); 22 | let triHeight = (this.length/2) * Math.tan(degToRad(60)); 23 | this.ctx.lineTo(this.x + (this.length/2), this.y + triHeight); 24 | this.ctx.lineTo(this.x, this.y); 25 | this.ctx.fill(); 26 | } 27 | 28 | reportArea() { 29 | let listItem = document.createElement('li'); 30 | listItem.textContent = `${this.name} area is ${Math.round((Math.sqrt(3)/4)*(this.length * this.length))}px squared.` 31 | 32 | let list = document.getElementById(this.listId); 33 | list.appendChild(listItem); 34 | } 35 | 36 | reportPerimeter() { 37 | let listItem = document.createElement('li'); 38 | listItem.textContent = `${this.name} perimeter is ${this.length * 3}px.` 39 | 40 | let list = document.getElementById(this.listId); 41 | list.appendChild(listItem); 42 | } 43 | } 44 | 45 | export { Triangle }; 46 | -------------------------------------------------------------------------------- /module-examples/dynamic-module-imports/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dynamic module class example 6 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /module-examples/dynamic-module-imports/main.js: -------------------------------------------------------------------------------- 1 | import { Canvas } from './modules/canvas.js'; 2 | 3 | let circleBtn = document.querySelector('.circle'); 4 | let squareBtn = document.querySelector('.square'); 5 | let triangleBtn = document.querySelector('.triangle'); 6 | 7 | // create the canvas and reporting list 8 | let myCanvas = new Canvas('myCanvas', document.body, 480, 320); 9 | myCanvas.create(); 10 | myCanvas.createReportList(); 11 | 12 | // draw a square 13 | squareBtn.addEventListener('click', () => { 14 | import('./modules/square.js').then((Module) => { 15 | let square1 = new Module.Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue'); 16 | square1.draw(); 17 | square1.reportArea(); 18 | square1.reportPerimeter(); 19 | }) 20 | }); 21 | 22 | // draw a circle 23 | circleBtn.addEventListener('click', () => { 24 | import('./modules/circle.js').then((Module) => { 25 | let circle1 = new Module.Circle(myCanvas.ctx, myCanvas.listId, 75, 200, 100, 'green'); 26 | circle1.draw(); 27 | circle1.reportArea(); 28 | circle1.reportPerimeter(); 29 | }) 30 | }); 31 | 32 | // draw a triangle 33 | triangleBtn.addEventListener('click', () => { 34 | import('./modules/triangle.js').then((Module) => { 35 | let triangle1 = new Module.Triangle(myCanvas.ctx, myCanvas.listId, 100, 75, 190, 'yellow'); 36 | triangle1.draw(); 37 | triangle1.reportArea(); 38 | triangle1.reportPerimeter(); 39 | }) 40 | }); 41 | -------------------------------------------------------------------------------- /module-examples/dynamic-module-imports/modules/canvas.js: -------------------------------------------------------------------------------- 1 | class Canvas { 2 | constructor(id, parent, width, height) { 3 | this.id = id; 4 | this.listId = null; 5 | this.parent = parent; 6 | this.width = width; 7 | this.height = height; 8 | this.ctx = null; 9 | } 10 | 11 | // new class stuff above here 12 | 13 | create() { 14 | if(this.ctx !== null) { 15 | console.log('Canvas already created!'); 16 | return; 17 | } else { 18 | let divWrapper = document.createElement('div'); 19 | let canvasElem = document.createElement('canvas'); 20 | this.parent.appendChild(divWrapper); 21 | divWrapper.appendChild(canvasElem); 22 | 23 | divWrapper.id = this.id; 24 | canvasElem.width = this.width; 25 | canvasElem.height = this.height; 26 | 27 | this.ctx = canvasElem.getContext('2d'); 28 | } 29 | } 30 | 31 | createReportList() { 32 | if(this.listId !== null) { 33 | console.log('Report list already created!'); 34 | return; 35 | } else { 36 | let list = document.createElement('ul'); 37 | list.id = this.id + '-reporter'; 38 | 39 | let canvasWrapper = document.getElementById(this.id); 40 | canvasWrapper.appendChild(list); 41 | 42 | this.listId = list.id; 43 | } 44 | } 45 | } 46 | 47 | export { Canvas }; 48 | -------------------------------------------------------------------------------- /module-examples/dynamic-module-imports/modules/circle.js: -------------------------------------------------------------------------------- 1 | function degToRad(degrees) { 2 | return degrees * Math.PI / 180; 3 | } 4 | 5 | class Circle { 6 | constructor(ctx, listId, radius, x, y, color) { 7 | this.ctx = ctx; 8 | this.listId = listId; 9 | this.radius = radius; 10 | this.x = x; 11 | this.y = y; 12 | this.color = color; 13 | this.name = 'circle'; 14 | } 15 | 16 | draw() { 17 | this.ctx.fillStyle = this.color; 18 | this.ctx.beginPath(); 19 | this.ctx.arc(this.x, this.y, this.radius, degToRad(0), degToRad(360), false); 20 | this.ctx.fill(); 21 | } 22 | 23 | reportArea() { 24 | let listItem = document.createElement('li'); 25 | listItem.textContent = `${this.name} area is ${Math.round(Math.PI * (this.radius * this.radius))}px squared.` 26 | 27 | let list = document.getElementById(this.listId); 28 | list.appendChild(listItem); 29 | } 30 | 31 | reportPerimeter() { 32 | let listItem = document.createElement('li'); 33 | listItem.textContent = `${this.name} circumference is ${Math.round(2 * Math.PI * this.radius)}px.` 34 | 35 | let list = document.getElementById(this.listId); 36 | list.appendChild(listItem); 37 | } 38 | } 39 | 40 | export { Circle }; 41 | -------------------------------------------------------------------------------- /module-examples/dynamic-module-imports/modules/square.js: -------------------------------------------------------------------------------- 1 | class Square { 2 | constructor(ctx, listId, length, x, y, color) { 3 | this.ctx = ctx; 4 | this.listId = listId; 5 | this.length = length; 6 | this.x = x; 7 | this.y = y; 8 | this.color = color; 9 | this.name = 'square'; 10 | } 11 | 12 | draw() { 13 | this.ctx.fillStyle = this.color; 14 | this.ctx.fillRect(this.x, this.y, this.length, this.length); 15 | } 16 | 17 | reportArea() { 18 | let listItem = document.createElement('li'); 19 | listItem.textContent = `${this.name} area is ${this.length * this.length}px squared.` 20 | 21 | let list = document.getElementById(this.listId); 22 | list.appendChild(listItem); 23 | } 24 | 25 | reportPerimeter() { 26 | let listItem = document.createElement('li'); 27 | listItem.textContent = `${this.name} perimeter is ${this.length * 4}px.` 28 | 29 | let list = document.getElementById(this.listId); 30 | list.appendChild(listItem); 31 | } 32 | } 33 | 34 | export { Square }; 35 | -------------------------------------------------------------------------------- /module-examples/dynamic-module-imports/modules/triangle.js: -------------------------------------------------------------------------------- 1 | function degToRad(degrees) { 2 | return degrees * Math.PI / 180; 3 | }; 4 | 5 | class Triangle { 6 | constructor(ctx, listId, length, x, y, color) { 7 | this.ctx = ctx; 8 | this.listId = listId; 9 | this.length = length; 10 | this.x = x; 11 | this.y = y; 12 | this.color = color; 13 | this.name = 'triangle'; 14 | } 15 | 16 | draw() { 17 | this.ctx.fillStyle = this.color; 18 | 19 | this.ctx.beginPath(); 20 | this.ctx.moveTo(this.x, this.y); 21 | this.ctx.lineTo(this.x + this.length, this.y); 22 | let triHeight = (this.length/2) * Math.tan(degToRad(60)); 23 | this.ctx.lineTo(this.x + (this.length/2), this.y + triHeight); 24 | this.ctx.lineTo(this.x, this.y); 25 | this.ctx.fill(); 26 | } 27 | 28 | reportArea() { 29 | let listItem = document.createElement('li'); 30 | listItem.textContent = `${this.name} area is ${Math.round((Math.sqrt(3)/4)*(this.length * this.length))}px squared.` 31 | 32 | let list = document.getElementById(this.listId); 33 | list.appendChild(listItem); 34 | } 35 | 36 | reportPerimeter() { 37 | let listItem = document.createElement('li'); 38 | listItem.textContent = `${this.name} perimeter is ${this.length * 3}px.` 39 | 40 | let list = document.getElementById(this.listId); 41 | list.appendChild(listItem); 42 | } 43 | } 44 | 45 | export { Triangle }; 46 | -------------------------------------------------------------------------------- /module-examples/module-aggregation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JavaScript module aggregation example 6 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /module-examples/module-aggregation/main.js: -------------------------------------------------------------------------------- 1 | import { Canvas } from './modules/canvas.js'; 2 | 3 | import { Square, Circle, Triangle } from './modules/shapes.js'; 4 | 5 | // create the canvas and reporting list 6 | let myCanvas = new Canvas('myCanvas', document.body, 480, 320); 7 | myCanvas.create(); 8 | myCanvas.createReportList(); 9 | 10 | // draw a square 11 | let square1 = new Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue'); 12 | square1.draw(); 13 | square1.reportArea(); 14 | square1.reportPerimeter(); 15 | 16 | // draw a circle 17 | let circle1 = new Circle(myCanvas.ctx, myCanvas.listId, 75, 200, 100, 'green'); 18 | circle1.draw(); 19 | circle1.reportArea(); 20 | circle1.reportPerimeter(); 21 | 22 | // draw a triangle 23 | let triangle1 = new Triangle(myCanvas.ctx, myCanvas.listId, 100, 75, 190, 'yellow'); 24 | triangle1.draw(); 25 | triangle1.reportArea(); 26 | triangle1.reportPerimeter(); 27 | -------------------------------------------------------------------------------- /module-examples/module-aggregation/modules/canvas.js: -------------------------------------------------------------------------------- 1 | class Canvas { 2 | constructor(id, parent, width, height) { 3 | this.id = id; 4 | this.listId = null; 5 | this.parent = parent; 6 | this.width = width; 7 | this.height = height; 8 | this.ctx = null; 9 | } 10 | 11 | // new class stuff above here 12 | 13 | create() { 14 | if(this.ctx !== null) { 15 | console.log('Canvas already created!'); 16 | return; 17 | } else { 18 | let divWrapper = document.createElement('div'); 19 | let canvasElem = document.createElement('canvas'); 20 | this.parent.appendChild(divWrapper); 21 | divWrapper.appendChild(canvasElem); 22 | 23 | divWrapper.id = this.id; 24 | canvasElem.width = this.width; 25 | canvasElem.height = this.height; 26 | 27 | this.ctx = canvasElem.getContext('2d'); 28 | } 29 | } 30 | 31 | createReportList() { 32 | if(this.listId !== null) { 33 | console.log('Report list already created!'); 34 | return; 35 | } else { 36 | let list = document.createElement('ul'); 37 | list.id = this.id + '-reporter'; 38 | 39 | let canvasWrapper = document.getElementById(this.id); 40 | canvasWrapper.appendChild(list); 41 | 42 | this.listId = list.id; 43 | } 44 | } 45 | } 46 | 47 | export { Canvas }; 48 | -------------------------------------------------------------------------------- /module-examples/module-aggregation/modules/shapes.js: -------------------------------------------------------------------------------- 1 | export { Square } from './shapes/square.js'; 2 | export { Triangle } from './shapes/triangle.js'; 3 | export { Circle } from './shapes/circle.js'; 4 | -------------------------------------------------------------------------------- /module-examples/module-aggregation/modules/shapes/circle.js: -------------------------------------------------------------------------------- 1 | function degToRad(degrees) { 2 | return degrees * Math.PI / 180; 3 | } 4 | 5 | class Circle { 6 | constructor(ctx, listId, radius, x, y, color) { 7 | this.ctx = ctx; 8 | this.listId = listId; 9 | this.radius = radius; 10 | this.x = x; 11 | this.y = y; 12 | this.color = color; 13 | this.name = 'circle'; 14 | } 15 | 16 | draw() { 17 | this.ctx.fillStyle = this.color; 18 | this.ctx.beginPath(); 19 | this.ctx.arc(this.x, this.y, this.radius, degToRad(0), degToRad(360), false); 20 | this.ctx.fill(); 21 | } 22 | 23 | reportArea() { 24 | let listItem = document.createElement('li'); 25 | listItem.textContent = `${this.name} area is ${Math.round(Math.PI * (this.radius * this.radius))}px squared.` 26 | 27 | let list = document.getElementById(this.listId); 28 | list.appendChild(listItem); 29 | } 30 | 31 | reportPerimeter() { 32 | let listItem = document.createElement('li'); 33 | listItem.textContent = `${this.name} circumference is ${Math.round(2 * Math.PI * this.radius)}px.` 34 | 35 | let list = document.getElementById(this.listId); 36 | list.appendChild(listItem); 37 | } 38 | } 39 | 40 | export { Circle }; 41 | -------------------------------------------------------------------------------- /module-examples/module-aggregation/modules/shapes/square.js: -------------------------------------------------------------------------------- 1 | class Square { 2 | constructor(ctx, listId, length, x, y, color) { 3 | this.ctx = ctx; 4 | this.listId = listId; 5 | this.length = length; 6 | this.x = x; 7 | this.y = y; 8 | this.color = color; 9 | this.name = 'square'; 10 | } 11 | 12 | draw() { 13 | this.ctx.fillStyle = this.color; 14 | this.ctx.fillRect(this.x, this.y, this.length, this.length); 15 | } 16 | 17 | reportArea() { 18 | let listItem = document.createElement('li'); 19 | listItem.textContent = `${this.name} area is ${this.length * this.length}px squared.` 20 | 21 | let list = document.getElementById(this.listId); 22 | list.appendChild(listItem); 23 | } 24 | 25 | reportPerimeter() { 26 | let listItem = document.createElement('li'); 27 | listItem.textContent = `${this.name} perimeter is ${this.length * 4}px.` 28 | 29 | let list = document.getElementById(this.listId); 30 | list.appendChild(listItem); 31 | } 32 | } 33 | 34 | export { Square }; 35 | -------------------------------------------------------------------------------- /module-examples/module-aggregation/modules/shapes/triangle.js: -------------------------------------------------------------------------------- 1 | function degToRad(degrees) { 2 | return degrees * Math.PI / 180; 3 | }; 4 | 5 | class Triangle { 6 | constructor(ctx, listId, length, x, y, color) { 7 | this.ctx = ctx; 8 | this.listId = listId; 9 | this.length = length; 10 | this.x = x; 11 | this.y = y; 12 | this.color = color; 13 | this.name = 'triangle'; 14 | } 15 | 16 | draw() { 17 | this.ctx.fillStyle = this.color; 18 | 19 | this.ctx.beginPath(); 20 | this.ctx.moveTo(this.x, this.y); 21 | this.ctx.lineTo(this.x + this.length, this.y); 22 | let triHeight = (this.length/2) * Math.tan(degToRad(60)); 23 | this.ctx.lineTo(this.x + (this.length/2), this.y + triHeight); 24 | this.ctx.lineTo(this.x, this.y); 25 | this.ctx.fill(); 26 | } 27 | 28 | reportArea() { 29 | let listItem = document.createElement('li'); 30 | listItem.textContent = `${this.name} area is ${Math.round((Math.sqrt(3)/4)*(this.length * this.length))}px squared.` 31 | 32 | let list = document.getElementById(this.listId); 33 | list.appendChild(listItem); 34 | } 35 | 36 | reportPerimeter() { 37 | let listItem = document.createElement('li'); 38 | listItem.textContent = `${this.name} perimeter is ${this.length * 3}px.` 39 | 40 | let list = document.getElementById(this.listId); 41 | list.appendChild(listItem); 42 | } 43 | } 44 | 45 | export { Triangle }; 46 | -------------------------------------------------------------------------------- /module-examples/module-objects/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JavaScript module object example 6 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /module-examples/module-objects/main.js: -------------------------------------------------------------------------------- 1 | import * as Canvas from './modules/canvas.js'; 2 | 3 | import * as Square from './modules/square.js'; 4 | import * as Circle from './modules/circle.js'; 5 | import * as Triangle from './modules/triangle.js'; 6 | 7 | // create the canvas and reporting list 8 | let myCanvas = Canvas.create('myCanvas', document.body, 480, 320); 9 | let reportList = Canvas.createReportList(myCanvas.id); 10 | 11 | // draw a square 12 | let square1 = Square.draw(myCanvas.ctx, 50, 50, 100, 'blue'); 13 | Square.reportArea(square1.length, reportList); 14 | Square.reportPerimeter(square1.length, reportList); 15 | 16 | // draw a circle 17 | let circle1 = Circle.draw(myCanvas.ctx, 75, 200, 100, 'green'); 18 | Circle.reportArea(circle1.radius, reportList); 19 | Circle.reportPerimeter(circle1.radius, reportList); 20 | 21 | // draw a triangle 22 | let triangle1 = Triangle.draw(myCanvas.ctx, 100, 75, 190, 'yellow'); 23 | Triangle.reportArea(triangle1.length, reportList); 24 | Triangle.reportPerimeter(triangle1.length, reportList); 25 | -------------------------------------------------------------------------------- /module-examples/module-objects/modules/canvas.js: -------------------------------------------------------------------------------- 1 | function create(id, parent, width, height) { 2 | let divWrapper = document.createElement('div'); 3 | let canvasElem = document.createElement('canvas'); 4 | parent.appendChild(divWrapper); 5 | divWrapper.appendChild(canvasElem); 6 | 7 | divWrapper.id = id; 8 | canvasElem.width = width; 9 | canvasElem.height = height; 10 | 11 | let ctx = canvasElem.getContext('2d'); 12 | 13 | return { 14 | ctx: ctx, 15 | id: id 16 | }; 17 | } 18 | 19 | function createReportList(wrapperId) { 20 | let list = document.createElement('ul'); 21 | list.id = wrapperId + '-reporter'; 22 | 23 | let canvasWrapper = document.getElementById(wrapperId); 24 | canvasWrapper.appendChild(list); 25 | 26 | return list.id; 27 | } 28 | 29 | export { create, createReportList }; 30 | -------------------------------------------------------------------------------- /module-examples/module-objects/modules/circle.js: -------------------------------------------------------------------------------- 1 | const name = 'circle'; 2 | 3 | function degToRad(degrees) { 4 | return degrees * Math.PI / 180; 5 | }; 6 | 7 | function draw(ctx, radius, x, y, color) { 8 | ctx.fillStyle = color; 9 | ctx.beginPath(); 10 | ctx.arc(x, y, radius, degToRad(0), degToRad(360), false); 11 | ctx.fill(); 12 | 13 | return { 14 | radius: radius, 15 | x: x, 16 | y: y, 17 | color: color 18 | }; 19 | } 20 | 21 | function reportArea(radius, listId) { 22 | let listItem = document.createElement('li'); 23 | listItem.textContent = `${name} area is ${Math.round(Math.PI * (radius * radius))}px squared.` 24 | 25 | let list = document.getElementById(listId); 26 | list.appendChild(listItem); 27 | } 28 | 29 | function reportPerimeter(radius, listId) { 30 | let listItem = document.createElement('li'); 31 | listItem.textContent = `${name} circumference is ${Math.round(2 * Math.PI * radius)}px.` 32 | 33 | let list = document.getElementById(listId); 34 | list.appendChild(listItem); 35 | } 36 | 37 | export { name, draw, reportArea, reportPerimeter }; 38 | -------------------------------------------------------------------------------- /module-examples/module-objects/modules/square.js: -------------------------------------------------------------------------------- 1 | const name = 'square'; 2 | 3 | function draw(ctx, length, x, y, color) { 4 | ctx.fillStyle = color; 5 | ctx.fillRect(x, y, length, length); 6 | 7 | return { 8 | length: length, 9 | x: x, 10 | y: y, 11 | color: color 12 | }; 13 | } 14 | 15 | function reportArea(length, listId) { 16 | let listItem = document.createElement('li'); 17 | listItem.textContent = `${name} area is ${length * length}px squared.` 18 | 19 | let list = document.getElementById(listId); 20 | list.appendChild(listItem); 21 | } 22 | 23 | function reportPerimeter(length, listId) { 24 | let listItem = document.createElement('li'); 25 | listItem.textContent = `${name} perimeter is ${length * 4}px.` 26 | 27 | let list = document.getElementById(listId); 28 | list.appendChild(listItem); 29 | } 30 | 31 | export { name, draw, reportArea, reportPerimeter }; 32 | -------------------------------------------------------------------------------- /module-examples/module-objects/modules/triangle.js: -------------------------------------------------------------------------------- 1 | const name = 'triangle'; 2 | 3 | function degToRad(degrees) { 4 | return degrees * Math.PI / 180; 5 | }; 6 | 7 | function draw(ctx, length, x, y, color) { 8 | ctx.fillStyle = color; 9 | 10 | ctx.beginPath(); 11 | ctx.moveTo(x, y); 12 | ctx.lineTo(x + length, y); 13 | let triHeight = (length/2) * Math.tan(degToRad(60)); 14 | ctx.lineTo(x + (length/2), y + triHeight); 15 | ctx.lineTo(x, y); 16 | ctx.fill(); 17 | 18 | return { 19 | length: length, 20 | x: x, 21 | y: y, 22 | color: color 23 | }; 24 | } 25 | 26 | function reportArea(length, listId) { 27 | let listItem = document.createElement('li'); 28 | listItem.textContent = `${name} area is ${Math.round((Math.sqrt(3)/4)*(length * length))}px squared.` 29 | 30 | let list = document.getElementById(listId); 31 | list.appendChild(listItem); 32 | } 33 | 34 | function reportPerimeter(length, listId) { 35 | let listItem = document.createElement('li'); 36 | listItem.textContent = `${name} perimeter is ${length * 3}px.` 37 | 38 | let list = document.getElementById(listId); 39 | list.appendChild(listItem); 40 | } 41 | 42 | export { name, draw, reportArea, reportPerimeter }; 43 | -------------------------------------------------------------------------------- /module-examples/package.json: -------------------------------------------------------------------------------- 1 | { "type": "module" } 2 | -------------------------------------------------------------------------------- /module-examples/renaming/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JavaScript module renaming example 6 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /module-examples/renaming/main.js: -------------------------------------------------------------------------------- 1 | import { create, createReportList } from './modules/canvas.js'; 2 | 3 | import { name as squareName, 4 | draw as drawSquare, 5 | reportArea as reportSquareArea, 6 | reportPerimeter as reportSquarePerimeter } from './modules/square.js'; 7 | 8 | import { name as circleName, 9 | draw as drawCircle, 10 | reportArea as reportCircleArea, 11 | reportPerimeter as reportCirclePerimeter } from './modules/circle.js'; 12 | 13 | import { name as triangleName, 14 | draw as drawTriangle, 15 | reportArea as reportTriangleArea, 16 | reportPerimeter as reportTrianglePerimeter } from './modules/triangle.js'; 17 | 18 | // create the canvas and reporting list 19 | let myCanvas = create('myCanvas', document.body, 480, 320); 20 | let reportList = createReportList(myCanvas.id); 21 | 22 | // draw a square 23 | let square1 = drawSquare(myCanvas.ctx, 50, 50, 100, 'blue'); 24 | reportSquareArea(square1.length, reportList); 25 | reportSquarePerimeter(square1.length, reportList); 26 | 27 | // draw a circle 28 | let circle1 = drawCircle(myCanvas.ctx, 75, 200, 100, 'green'); 29 | reportCircleArea(circle1.radius, reportList); 30 | reportCirclePerimeter(circle1.radius, reportList); 31 | 32 | // draw a triangle 33 | let triangle1 = drawTriangle(myCanvas.ctx, 100, 75, 190, 'yellow'); 34 | reportTriangleArea(triangle1.length, reportList); 35 | reportTrianglePerimeter(triangle1.length, reportList); 36 | -------------------------------------------------------------------------------- /module-examples/renaming/modules/canvas.js: -------------------------------------------------------------------------------- 1 | function create(id, parent, width, height) { 2 | let divWrapper = document.createElement('div'); 3 | let canvasElem = document.createElement('canvas'); 4 | parent.appendChild(divWrapper); 5 | divWrapper.appendChild(canvasElem); 6 | 7 | divWrapper.id = id; 8 | canvasElem.width = width; 9 | canvasElem.height = height; 10 | 11 | let ctx = canvasElem.getContext('2d'); 12 | 13 | return { 14 | ctx: ctx, 15 | id: id 16 | }; 17 | } 18 | 19 | function createReportList(wrapperId) { 20 | let list = document.createElement('ul'); 21 | list.id = wrapperId + '-reporter'; 22 | 23 | let canvasWrapper = document.getElementById(wrapperId); 24 | canvasWrapper.appendChild(list); 25 | 26 | return list.id; 27 | } 28 | 29 | export { create, createReportList }; 30 | -------------------------------------------------------------------------------- /module-examples/renaming/modules/circle.js: -------------------------------------------------------------------------------- 1 | const name = 'circle'; 2 | 3 | function degToRad(degrees) { 4 | return degrees * Math.PI / 180; 5 | }; 6 | 7 | function draw(ctx, radius, x, y, color) { 8 | ctx.fillStyle = color; 9 | ctx.beginPath(); 10 | ctx.arc(x, y, radius, degToRad(0), degToRad(360), false); 11 | ctx.fill(); 12 | 13 | return { 14 | radius: radius, 15 | x: x, 16 | y: y, 17 | color: color 18 | }; 19 | } 20 | 21 | function reportArea(radius, listId) { 22 | let listItem = document.createElement('li'); 23 | listItem.textContent = `${name} area is ${Math.round(Math.PI * (radius * radius))}px squared.` 24 | 25 | let list = document.getElementById(listId); 26 | list.appendChild(listItem); 27 | } 28 | 29 | function reportPerimeter(radius, listId) { 30 | let listItem = document.createElement('li'); 31 | listItem.textContent = `${name} circumference is ${Math.round(2 * Math.PI * radius)}px.` 32 | 33 | let list = document.getElementById(listId); 34 | list.appendChild(listItem); 35 | } 36 | 37 | export { name, draw, reportArea, reportPerimeter }; 38 | -------------------------------------------------------------------------------- /module-examples/renaming/modules/square.js: -------------------------------------------------------------------------------- 1 | const name = 'square'; 2 | 3 | function draw(ctx, length, x, y, color) { 4 | ctx.fillStyle = color; 5 | ctx.fillRect(x, y, length, length); 6 | 7 | return { 8 | length: length, 9 | x: x, 10 | y: y, 11 | color: color 12 | }; 13 | } 14 | 15 | function reportArea(length, listId) { 16 | let listItem = document.createElement('li'); 17 | listItem.textContent = `${name} area is ${length * length}px squared.` 18 | 19 | let list = document.getElementById(listId); 20 | list.appendChild(listItem); 21 | } 22 | 23 | function reportPerimeter(length, listId) { 24 | let listItem = document.createElement('li'); 25 | listItem.textContent = `${name} perimeter is ${length * 4}px.` 26 | 27 | let list = document.getElementById(listId); 28 | list.appendChild(listItem); 29 | } 30 | 31 | export { name, draw, reportArea, reportPerimeter }; 32 | -------------------------------------------------------------------------------- /module-examples/renaming/modules/triangle.js: -------------------------------------------------------------------------------- 1 | const name = 'triangle'; 2 | 3 | function degToRad(degrees) { 4 | return degrees * Math.PI / 180; 5 | }; 6 | 7 | function draw(ctx, length, x, y, color) { 8 | ctx.fillStyle = color; 9 | 10 | ctx.beginPath(); 11 | ctx.moveTo(x, y); 12 | ctx.lineTo(x + length, y); 13 | let triHeight = (length/2) * Math.tan(degToRad(60)); 14 | ctx.lineTo(x + (length/2), y + triHeight); 15 | ctx.lineTo(x, y); 16 | ctx.fill(); 17 | 18 | return { 19 | length: length, 20 | x: x, 21 | y: y, 22 | color: color 23 | }; 24 | } 25 | 26 | function reportArea(length, listId) { 27 | let listItem = document.createElement('li'); 28 | listItem.textContent = `${name} area is ${Math.round((Math.sqrt(3)/4)*(length * length))}px squared.` 29 | 30 | let list = document.getElementById(listId); 31 | list.appendChild(listItem); 32 | } 33 | 34 | function reportPerimeter(length, listId) { 35 | let listItem = document.createElement('li'); 36 | listItem.textContent = `${name} perimeter is ${length * 3}px.` 37 | 38 | let list = document.getElementById(listId); 39 | list.appendChild(listItem); 40 | } 41 | 42 | export { name, draw, reportArea, reportPerimeter }; 43 | -------------------------------------------------------------------------------- /module-examples/top-level-await/data/colors.json: -------------------------------------------------------------------------------- 1 | { 2 | "yellow": "#F4D03F", 3 | "green": "#52BE80", 4 | "blue": "#5499C7", 5 | "red": "#CD6155", 6 | "orange": "#F39C12" 7 | } -------------------------------------------------------------------------------- /module-examples/top-level-await/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dynamic module class example 6 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /module-examples/top-level-await/main.js: -------------------------------------------------------------------------------- 1 | import colors from './modules/getColors.js'; 2 | import { Canvas } from './modules/canvas.js'; 3 | 4 | let circleBtn = document.querySelector('.circle'); 5 | let squareBtn = document.querySelector('.square'); 6 | let triangleBtn = document.querySelector('.triangle'); 7 | 8 | // create the canvas and reporting list 9 | let myCanvas = new Canvas('myCanvas', document.body, 480, 320); 10 | myCanvas.create(); 11 | myCanvas.createReportList(); 12 | 13 | // draw a square 14 | squareBtn.addEventListener('click', () => { 15 | import('./modules/square.js').then((Module) => { 16 | let square1 = new Module.Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, colors.blue); 17 | square1.draw(); 18 | square1.reportArea(); 19 | square1.reportPerimeter(); 20 | }) 21 | }); 22 | 23 | // draw a circle 24 | circleBtn.addEventListener('click', () => { 25 | import('./modules/circle.js').then((Module) => { 26 | let circle1 = new Module.Circle(myCanvas.ctx, myCanvas.listId, 75, 200, 100, colors.green); 27 | circle1.draw(); 28 | circle1.reportArea(); 29 | circle1.reportPerimeter(); 30 | }) 31 | }); 32 | 33 | // draw a triangle 34 | triangleBtn.addEventListener('click', () => { 35 | import('./modules/triangle.js').then((Module) => { 36 | let triangle1 = new Module.Triangle(myCanvas.ctx, myCanvas.listId, 100, 75, 190, colors.yellow); 37 | triangle1.draw(); 38 | triangle1.reportArea(); 39 | triangle1.reportPerimeter(); 40 | }) 41 | }); 42 | -------------------------------------------------------------------------------- /module-examples/top-level-await/modules/canvas.js: -------------------------------------------------------------------------------- 1 | class Canvas { 2 | constructor(id, parent, width, height) { 3 | this.id = id; 4 | this.listId = null; 5 | this.parent = parent; 6 | this.width = width; 7 | this.height = height; 8 | this.ctx = null; 9 | } 10 | 11 | // new class stuff above here 12 | 13 | create() { 14 | if(this.ctx !== null) { 15 | console.log('Canvas already created!'); 16 | return; 17 | } else { 18 | let divWrapper = document.createElement('div'); 19 | let canvasElem = document.createElement('canvas'); 20 | this.parent.appendChild(divWrapper); 21 | divWrapper.appendChild(canvasElem); 22 | 23 | divWrapper.id = this.id; 24 | canvasElem.width = this.width; 25 | canvasElem.height = this.height; 26 | 27 | this.ctx = canvasElem.getContext('2d'); 28 | } 29 | } 30 | 31 | createReportList() { 32 | if(this.listId !== null) { 33 | console.log('Report list already created!'); 34 | return; 35 | } else { 36 | let list = document.createElement('ul'); 37 | list.id = this.id + '-reporter'; 38 | 39 | let canvasWrapper = document.getElementById(this.id); 40 | canvasWrapper.appendChild(list); 41 | 42 | this.listId = list.id; 43 | } 44 | } 45 | } 46 | 47 | export { Canvas }; 48 | -------------------------------------------------------------------------------- /module-examples/top-level-await/modules/circle.js: -------------------------------------------------------------------------------- 1 | function degToRad(degrees) { 2 | return degrees * Math.PI / 180; 3 | } 4 | 5 | class Circle { 6 | constructor(ctx, listId, radius, x, y, color) { 7 | this.ctx = ctx; 8 | this.listId = listId; 9 | this.radius = radius; 10 | this.x = x; 11 | this.y = y; 12 | this.color = color; 13 | this.name = 'circle'; 14 | } 15 | 16 | draw() { 17 | this.ctx.fillStyle = this.color; 18 | this.ctx.beginPath(); 19 | this.ctx.arc(this.x, this.y, this.radius, degToRad(0), degToRad(360), false); 20 | this.ctx.fill(); 21 | } 22 | 23 | reportArea() { 24 | let listItem = document.createElement('li'); 25 | listItem.textContent = `${this.name} area is ${Math.round(Math.PI * (this.radius * this.radius))}px squared.` 26 | 27 | let list = document.getElementById(this.listId); 28 | list.appendChild(listItem); 29 | } 30 | 31 | reportPerimeter() { 32 | let listItem = document.createElement('li'); 33 | listItem.textContent = `${this.name} circumference is ${Math.round(2 * Math.PI * this.radius)}px.` 34 | 35 | let list = document.getElementById(this.listId); 36 | list.appendChild(listItem); 37 | } 38 | } 39 | 40 | export { Circle }; 41 | -------------------------------------------------------------------------------- /module-examples/top-level-await/modules/getColors.js: -------------------------------------------------------------------------------- 1 | // fetch request 2 | const colors = fetch('https://mdn.github.io/js-examples/module-examples/top-level-await/data/colors.json') 3 | .then(response => response.json()); 4 | 5 | export default await colors; 6 | -------------------------------------------------------------------------------- /module-examples/top-level-await/modules/square.js: -------------------------------------------------------------------------------- 1 | class Square { 2 | constructor(ctx, listId, length, x, y, color) { 3 | this.ctx = ctx; 4 | this.listId = listId; 5 | this.length = length; 6 | this.x = x; 7 | this.y = y; 8 | this.color = color; 9 | this.name = 'square'; 10 | } 11 | 12 | draw() { 13 | this.ctx.fillStyle = this.color; 14 | this.ctx.fillRect(this.x, this.y, this.length, this.length); 15 | } 16 | 17 | reportArea() { 18 | let listItem = document.createElement('li'); 19 | listItem.textContent = `${this.name} area is ${this.length * this.length}px squared.` 20 | 21 | let list = document.getElementById(this.listId); 22 | list.appendChild(listItem); 23 | } 24 | 25 | reportPerimeter() { 26 | let listItem = document.createElement('li'); 27 | listItem.textContent = `${this.name} perimeter is ${this.length * 4}px.` 28 | 29 | let list = document.getElementById(this.listId); 30 | list.appendChild(listItem); 31 | } 32 | } 33 | 34 | export { Square }; 35 | -------------------------------------------------------------------------------- /module-examples/top-level-await/modules/triangle.js: -------------------------------------------------------------------------------- 1 | function degToRad(degrees) { 2 | return degrees * Math.PI / 180; 3 | }; 4 | 5 | class Triangle { 6 | constructor(ctx, listId, length, x, y, color) { 7 | this.ctx = ctx; 8 | this.listId = listId; 9 | this.length = length; 10 | this.x = x; 11 | this.y = y; 12 | this.color = color; 13 | this.name = 'triangle'; 14 | } 15 | 16 | draw() { 17 | this.ctx.fillStyle = this.color; 18 | 19 | this.ctx.beginPath(); 20 | this.ctx.moveTo(this.x, this.y); 21 | this.ctx.lineTo(this.x + this.length, this.y); 22 | let triHeight = (this.length/2) * Math.tan(degToRad(60)); 23 | this.ctx.lineTo(this.x + (this.length/2), this.y + triHeight); 24 | this.ctx.lineTo(this.x, this.y); 25 | this.ctx.fill(); 26 | } 27 | 28 | reportArea() { 29 | let listItem = document.createElement('li'); 30 | listItem.textContent = `${this.name} area is ${Math.round((Math.sqrt(3)/4)*(this.length * this.length))}px squared.` 31 | 32 | let list = document.getElementById(this.listId); 33 | list.appendChild(listItem); 34 | } 35 | 36 | reportPerimeter() { 37 | let listItem = document.createElement('li'); 38 | listItem.textContent = `${this.name} perimeter is ${this.length * 3}px.` 39 | 40 | let list = document.getElementById(this.listId); 41 | list.appendChild(listItem); 42 | } 43 | } 44 | 45 | export { Triangle }; 46 | -------------------------------------------------------------------------------- /promises-test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Promise example 9 | 10 | 11 | 12 | 13 | 14 |

Promise example

15 | 16 |

Darth Vader image by Shawn Taylor, published under a Attribution-NonCommercial-NoDerivs 2.0 Generic license.

17 | 18 | 19 | 65 | 66 | -------------------------------------------------------------------------------- /promises-test/myLittleVader.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/js-examples/91dd87a8df0f13dda52f632b5778f7b9b2d9f42a/promises-test/myLittleVader.jpg --------------------------------------------------------------------------------