A portfolio project that the purpose of this project is to understand how to use basic JavaScript syntax,

  • By Saeqa Sultani
  • Last update: Dec 1, 2022
  • Comments: 12

this is a portfolio project that the purpose of this project is to understand how to use basic JavaScript syntax, use JavaScript to manipulate DOM elements,use JavaScript events.and also in this project we use form JavaScript + HTML + CSS linters for check the linters errors ,.eslintrc.json file for chech the javascript errors locally,.stylelintrc.json file for check the css errors locally and .hintrc file for check the html errors locally.

Built With

  • HTML & CSS and JavaScript
  • Frameworks
  • Technologies used

Live Demo :)

Live Demo Link

Authors

šŸ‘¤ Saeqa Sultani

GitHub: SaeqaSultani

Twitter: SaeqaSultani

LinkedIn: SaeqaSultani

šŸ¤ Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ā­ļø if you like this project!

Acknowledgments

  • Hat tip to anyone whose code was used
  • Inspiration
  • etc

šŸ“ License

This project is MIT licensed.

Github

https://github.com/SaeqaSultani/Portfolio-Project

Comments(12)

  • 1

    Added mobile menu to the mobile version of the Portfolio-Project

    • Added a .gitignored file.
    • Set up a linter for CSS ,HTML and JavaScript.
    • Added a readme file.
    • Added a .html file.
    • Added a .css file.
    • Added a . js file.
    • Added a test.md file

    instruction

    When the user clicks (or taps) the hamburger button, the mobile menu appears. When the user clicks (or taps) the close (X) button, the mobile menu disappears. When the user clicks (or taps) any of the mobile menu options, the mobile menu disappears. When the user clicks (or taps) any of the mobile menu options, a correct part of the page is displayed.

  • 2

    Added local-storage to the Portfolio-Project

    • Created a new branch according to the GitHub flow rules.
    • Added a .gitignored file.
    • Set up a linter for CSS and HTML .
    • Added a readme file.
    • Added a .html file.
    • Added a .css file.
    • Added a test.md file.
    • Added a .js file.

    Instruction

    • When the user changes the content of any input field, the data is saved to the local storage.
    • When the user loads the page, if there is any data in the local storage the input fields are pre-filled with this data.
  • 3

    Added form-validation to the Portfolio-Project

    • Created a new branch according to the GitHub flow rules.
    • Added a .gitignored file.
    • Set up a linter for CSS and HTML .
    • Added a readme file.
    • Added a .html file .
    • Added a .css file .
    • Added a test.md file.

    Instruction

    • The content of the email field has to be in lower case
    • When the user submits the form, you check if the email is in lower case.
    • If the validation is OK, the form is sent.
    • If the validation is not OK, you show an error message to the user near the submit button informing them of the error and the form is not sent.
  • 4

    Added popup-window to the Portfolio-Project

    • Created a new branch according to the GitHub flow rules.
    • Added a .gitignored file.
    • Set up a linter for CSS and HTML .
    • Added a readme file.
    • Added a .html file.
    • Added a .css file.
    • Added a test.md file.

    Instraction

    • When the user clicks (or taps) the button to check project details, the popup with details about the project appears.
    • When the user clicks (or taps) the close (X) button, the popup disappears.
  • 5

    Added popup-window to the Portfolio-Project

    • Created a new branch according to the GitHub flow rules.
    • Added a .gitignored file.
    • Set up a linter for CSS and HTML .
    • Added a readme file.
    • Added a .html file.
    • Added a .css file.
    • Added a test.md file.

    Instruction

    -When the user clicks (or taps) the button to check project details, the popup with details about the project appears. -When the user clicks (or taps) the close (X) button, the popup disappears.

  • 6

    Added accessibility property to the Portfolio-Project

    1. Page titles: Page Title Changed as "Portfolio home page " instead of "Document"
    2. Image text alternatives: Add alternative text descriptions to16 Images in the working and about section.
    3. Text headings: Text headings "My logo" changed as h1 instead of h2 heading tag and Text headings "Iā€™m Saeqa Glad to see you!" changed as h2 instead of h1 heading tag.
    4. Color Contrast: change the all color of the links in the working section from light to dark.

    links of line number that we have changed

    https://github.com/SaeqaSultani/Portfolio-Project/blob/desktop-version/index.html#L8 https://github.com/SaeqaSultani/Portfolio-Project/blob/desktop-version/index.html#L55-L56 https://github.com/SaeqaSultani/Portfolio-Project/blob/desktop-version/index.html#L64 https://github.com/SaeqaSultani/Portfolio-Project/blob/desktop-version/index.html#L68 https://github.com/SaeqaSultani/Portfolio-Project/blob/desktop-version/index.html#L90 https://github.com/SaeqaSultani/Portfolio-Project/blob/desktop-version/index.html#L123 https://github.com/SaeqaSultani/Portfolio-Project/blob/desktop-version/index.html#L128-L129 https://github.com/SaeqaSultani/Portfolio-Project/blob/desktop-version/index.html#L164 https://github.com/SaeqaSultani/Portfolio-Project/blob/desktop-version/index.html#L198 https://github.com/SaeqaSultani/Portfolio-Project/blob/desktop-version/index.html#L238 https://github.com/SaeqaSultani/Portfolio-Project/blob/desktop-version/index.html#L242 https://github.com/SaeqaSultani/Portfolio-Project/blob/desktop-version/index.html#L246 https://github.com/SaeqaSultani/Portfolio-Project/blob/desktop-version/index.html#L17 https://github.com/SaeqaSultani/Portfolio-Project/blob/desktop-version/index.html#L28 https://github.com/SaeqaSultani/Portfolio-Project/blob/desktop-version/index.html#L79-L81 https://github.com/SaeqaSultani/Portfolio-Project/blob/desktop-version/index.html#L112-L115 https://github.com/SaeqaSultani/Portfolio-Project/blob/desktop-version/index.html#L152-L155 https://github.com/SaeqaSultani/Portfolio-Project/blob/desktop-version/index.html#L187-L190

  • 7

    Added desktop-version to the Portfolio-Project

    • Created a new branch according to the GitHub flow rules.
    • Added a .gitignored file.
    • Set up a linter for CSS and HTML .
    • Added a readme file.
    • Added a .html file .
    • Added a .css file .
    • Added a test.md file.
  • 8

    Desktop version added in the Portfolio-Project

    • Created a new branch according to the GitHub flow rules.
    • Added a .gitignored file.
    • Set up a linter for CSS and HTML .
    • Added a readme file.
    • Added a .html file.
    • Added a .css file.
    • Added a test.md file.
  • 9

    Added contact-form in the Portfolio-Project

    • Created a new branch according to the GitHub flow rules.
    • Added a .gitignored file.
    • Set up a linter for CSS and HTML .
    • Added a readme file.
    • Added a .html file.
    • Added a .css file.
    • Added a test.md file.
  • 10

    Added contact-form in the Portfolio-Project

    • Created a new branch according to the GitHub flow rules.
    • Added a .gitignored file.
    • Set up a linter for CSS and HTML .
    • Added a readme file.
    • Added a .html file.
    • Added a .css file.
    • Added a test.md file.
  • 11

    Mobile version add work and about sections

    • Created a new branch according to the GitHub flow rules.
    • Added a .gitignored file.
    • Set up a linter for CSS and HTML .
    • Added a readme file.
    • Added a .html file.
    • Added a .css.
    • Added a test.md file.
  • 12

    Finding burgs

    Please try to use the ASCII characters. To validate your form in JavaScript. Eg: const checker = (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(myForm.emailAddr.value))

Popular Tag

Related