├── .editorconfig ├── .github ├── ISSUE_TEMPLATE │ ├── bug.yml │ └── config.yml ├── PULL_REQUEST_TEMPLATE ├── labels.json └── workflows │ ├── codeql.yml │ ├── idle.yml │ ├── set-default-labels.yml │ └── welcome-bot.yml ├── .prettierrc.json ├── CODEOWNERS ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── REVIEWING.md ├── SECURITY.md ├── images ├── firefox-icon.png └── firefox2.png ├── index.html ├── scripts └── main.js └── styles └── style.css /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: https://EditorConfig.org 2 | 3 | # top-most EditorConfig file 4 | root = true 5 | 6 | [*] 7 | indent_style = space 8 | indent_size = 2 9 | end_of_line = lf 10 | charset = utf-8 11 | trim_trailing_whitespace = true 12 | insert_final_newline = true 13 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug.yml: -------------------------------------------------------------------------------- 1 | name: "Bug 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 a bug, 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/PULL_REQUEST_TEMPLATE: -------------------------------------------------------------------------------- 1 | 2 | 3 | ### Description 4 | 5 | 6 | 7 | ### Motivation 8 | 9 | 10 | 11 | ### Additional details 12 | 13 | 14 | 15 | ### Related issues and pull requests 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /.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@v3 30 | 31 | # Initializes the CodeQL tools for scanning. 32 | - name: Initialize CodeQL 33 | uses: github/codeql-action/init@v2 34 | with: 35 | languages: ${{ matrix.language }} 36 | 37 | - name: Perform CodeQL Analysis 38 | uses: github/codeql-action/analyze@v2 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/beginner-html-site-scripted" 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/beginner-html-site-scripted" 9 | should-delete-labels: true 10 | -------------------------------------------------------------------------------- /.github/workflows/welcome-bot.yml: -------------------------------------------------------------------------------- 1 | name: "AlloAllo" 2 | 3 | on: 4 | issues: 5 | types: 6 | - opened 7 | pull_request_target: 8 | branches: 9 | - main 10 | types: 11 | - opened 12 | - closed 13 | 14 | jobs: 15 | allo-allo: 16 | uses: mdn/workflows/.github/workflows/allo-allo.yml@main 17 | with: 18 | target-repo: "mdn/beginner-html-site-scripted" 19 | issue-welcome: | 20 | It looks like this is your first issue. Welcome! 👋 21 | One of the project maintainers will be with you as soon as possible. We 22 | appreciate your patience. To safeguard the health of the project, please 23 | take a moment to read our [code of conduct](../blob/main/CODE_OF_CONDUCT.md). 24 | pr-welcome: | 25 | It looks like this is your first pull request. 🎉 26 | Thank you for your contribution! One of the project maintainers will triage 27 | and assign the pull request for review. We appreciate your patience. To 28 | safeguard the health of the project, please take a moment to read our 29 | [code of conduct](../blob/main/CODE_OF_CONDUCT.md). 30 | pr-merged: | 31 | Congratulations on your first merged pull request. 🎉 Thank you for your contribution! 32 | Did you know we have a [project board](https://github.com/orgs/mdn/projects/25) with high-impact contribution opportunities? 33 | We look forward to your next contribution. 34 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /CODEOWNERS: -------------------------------------------------------------------------------- 1 | # These owners are the default owners for everything in this repo. 2 | * @mdn/core-yari-content 3 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Community Participation Guidelines 2 | 3 | This repository is governed by Mozilla's code of conduct and etiquette guidelines. 4 | For more details, please read the 5 | [Mozilla Community Participation Guidelines](https://www.mozilla.org/about/governance/policies/participation/). 6 | 7 | ## How to Report 8 | For more information on how to report violations of the Community Participation Guidelines, please read our '[How to Report](https://www.mozilla.org/about/governance/policies/participation/reporting/)' page. 9 | 10 | 16 | -------------------------------------------------------------------------------- /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 | 11 | Welcome 👋 Thank you for your interest in contributing to MDN Web Docs. We are happy to have you join us! 💖 12 | 13 | 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. 14 | These include, but are not limited to: 15 | 16 | - Problems found while setting up a new developer environment 17 | - Gaps in our documentation 18 | - Bugs in our automation scripts 19 | 20 | If anything doesn't make sense or work as expected, please open an issue and let us know! 21 | 22 | ## Ways to contribute 23 | 24 | We welcome many different types of contributions including: 25 | 26 | - Identifying and filing issues. 27 | - Providing feedback on existing issues. 28 | - Engaging with the community and answering questions. 29 | - Contributing documentation or code. 30 | - Promoting the project in personal circles and social media. 31 | 32 | ## Finding an issue 33 | 34 | We have issues labeled `good first issue` for new contributors and `help wanted` suitable for any contributor. 35 | Good first issues have extra information to help you make your first contribution a success. 36 | Help wanted issues are ideal when you feel a bit more comfortable with the project details. 37 | 38 | Sometimes there won't be any issues with these labels, but there is likely still something for you to work on. 39 | 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. 40 | 41 | Once you find an issue you'd like to work on, please post a comment saying you want to work on it. 42 | Something like "I want to work on this" is fine. 43 | Also, mention the community team using the `@mdn/mdn-community-engagement` handle to ensure someone will get back to you. 44 | 45 | ## Asking for help 46 | 47 | The best way to reach us with a question when contributing is to use the following channels in the following order of precedence: 48 | 49 | - [Start a discussion](https://github.com/orgs/mdn/discussions) 50 | - Ask your question or highlight your discussion on [Matrix](https://matrix.to/#/#mdn:mozilla.org). 51 | - File an issue and tag the community team using the `@mdn/mdn-community-engagement` handle. 52 | 53 | ## Pull request process 54 | 55 | 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). 56 | Make sure you read and understand this process before you start working on a pull request. 57 | 58 | ## Forking and cloning the project 59 | 60 | 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. 61 | -------------------------------------------------------------------------------- /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 | # Beginner HTML (HyperText Markup Language) site scripted 2 | 3 | A simple one page website created to help complete beginners learn HTML basics, which in this repo has also had some script added to help beginners learn JavaScript basics. The scripting is explained over the course of the [JavaScript basics](https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/JavaScript_basics) course. 4 | 5 | ## Live site 6 | 7 | [Run the example live](https://mdn.github.io/beginner-html-site-scripted/). 8 | -------------------------------------------------------------------------------- /REVIEWING.md: -------------------------------------------------------------------------------- 1 | # Reviewing guide 2 | 3 | ## Values and guidelines 4 | 5 | All reviewers must abide by the [Code of Conduct](CODE_OF_CONDUCT.md); they are also protected by the Code of Conduct. 6 | 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. 7 | 8 | Everyone participating must follow our [Community Participation Guidelines](CODE_OF_CONDUCT.md#Community_Participation_Guidelines) 9 | 10 | ## Review process 11 | 12 | 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. 13 | This process is described in detail on the [Pull request guidelines](https://developer.mozilla.org/en-US/docs/MDN/Community/Pull_requests) page. 14 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # Security Policy 2 | 3 | ## Reporting a Vulnerability 4 | 5 | If you've discovered a security issue, please report it through the form linked 6 | below, which will create a secure, private ticket. 7 | https://bugzilla.mozilla.org/form.web.bounty 8 | 9 | MDN Web Docs may be eligible for 10 | [Mozilla's Security Bug Bounty Program](https://www.mozilla.org/en-US/security/bug-bounty/). 11 | You can find more information about the bounty program in the 12 | [Mozilla Web Bug Bounty FAQ](https://www.mozilla.org/en-US/security/bug-bounty/faq-webapp/). 13 | You can use the above form even if you are not interested in a bounty reward. 14 | -------------------------------------------------------------------------------- /images/firefox-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginner-html-site-scripted/f04613e0061454981484bcaac6c3676833bdbb6d/images/firefox-icon.png -------------------------------------------------------------------------------- /images/firefox2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdn/beginner-html-site-scripted/f04613e0061454981484bcaac6c3676833bdbb6d/images/firefox2.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | My test page 6 | 7 | 8 | 9 | 10 |

Mozilla is cool

11 | The Firefox logo: a flaming fox surrounding the Earth. 12 | 13 |

At Mozilla, we’re a global community of

14 | 15 | 20 | 21 |

working together to keep the Internet alive and accessible, so people worldwide can be informed contributors and creators of the Web. We believe this act of human collaboration across an open platform is essential to individual growth and our collective future.

22 | 23 |

Read the Mozilla Manifesto to learn even more about the values and principles that guide the pursuit of our mission.

24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /scripts/main.js: -------------------------------------------------------------------------------- 1 | // Image switcher code 2 | 3 | const myImage = document.querySelector("img"); 4 | 5 | myImage.addEventListener("click", () => { 6 | const mySrc = myImage.getAttribute("src"); 7 | if (mySrc === "images/firefox-icon.png") { 8 | myImage.setAttribute("src", "images/firefox2.png"); 9 | } else { 10 | myImage.setAttribute("src", "images/firefox-icon.png"); 11 | } 12 | }); 13 | 14 | 15 | // Personalized welcome message code 16 | 17 | let myButton = document.querySelector('button'); 18 | let myHeading = document.querySelector('h1'); 19 | 20 | function setUserName() { 21 | let myName = prompt('Please enter your name.'); 22 | if(!myName) { 23 | setUserName(); 24 | } else { 25 | localStorage.setItem('name', myName); 26 | myHeading.innerHTML = 'Mozilla is cool, ' + myName; 27 | } 28 | } 29 | 30 | if(!localStorage.getItem('name')) { 31 | setUserName(); 32 | } else { 33 | let storedName = localStorage.getItem('name'); 34 | myHeading.innerHTML = 'Mozilla is cool, ' + storedName; 35 | } 36 | 37 | myButton.addEventListener("click", () => { 38 | setUserName(); 39 | }); 40 | 41 | -------------------------------------------------------------------------------- /styles/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 10px; 3 | font-family: 'Open Sans', sans-serif; 4 | } 5 | 6 | 7 | h1 { 8 | font-size: 60px; 9 | text-align: center; 10 | } 11 | 12 | p, li { 13 | font-size: 16px; 14 | line-height: 2; 15 | letter-spacing: 1px; 16 | } 17 | 18 | 19 | html { 20 | background-color: #00539F; 21 | } 22 | 23 | body { 24 | width: 600px; 25 | margin: 0 auto; 26 | background-color: #FF9500; 27 | padding: 0 20px 20px 20px; 28 | border: 5px solid black; 29 | } 30 | 31 | h1 { 32 | margin: 0; 33 | padding: 20px 0; 34 | color: #00539F; 35 | text-shadow: 3px 3px 1px black; 36 | } 37 | 38 | img { 39 | display: block; 40 | margin: 0 auto; 41 | } 42 | --------------------------------------------------------------------------------