Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sidp919/fs-js-wd-b-dom-manipulation
This repo is for those who have learned the basics of JavaScript and are now ready to use the power of JavaScript further to build some apps using DOM Manipulation.
https://github.com/sidp919/fs-js-wd-b-dom-manipulation
dom dom-manipulation es6 javascript
Last synced: 29 days ago
JSON representation
This repo is for those who have learned the basics of JavaScript and are now ready to use the power of JavaScript further to build some apps using DOM Manipulation.
- Host: GitHub
- URL: https://github.com/sidp919/fs-js-wd-b-dom-manipulation
- Owner: SidP919
- Created: 2022-10-07T18:26:04.000Z (over 2 years ago)
- Default Branch: Main
- Last Pushed: 2023-11-21T14:06:51.000Z (about 1 year ago)
- Last Synced: 2024-11-10T11:06:06.949Z (3 months ago)
- Topics: dom, dom-manipulation, es6, javascript
- Language: HTML
- Homepage: https://common-utility-apps.vercel.app/
- Size: 10.3 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: ReadMe.md
Awesome Lists containing this project
README
# DOM Manipulation
**What is DOM ?**
> DOM( Document Object Model) represents structure and elements in the webpage which can then be manipulated by our javascript program/script and can change the document structure, style and its content.
**Description**
> This repo is for those who have learned the basics of JavaScript and are now ready to use the power of JavaScript further to build some apps using DOM Manipulation.
**This repo is divided into three parts :**
- [**Part-01-Practice-DOM-Manipulation**](https://github.com/SidP919/FS-JS-WD-B-DOM-Manipulation#part-01-practice-dom-manipulation)
- [**Part-02-Complete-DOM-Assignments**](https://github.com/SidP919/FS-JS-WD-B-DOM-Manipulation#part-02-complete-dom-assignments)
- [**Part-03-Build-Apps-using-DOM-Manipulation**](https://github.com/SidP919/FS-JS-WD-B-DOM-Manipulation#part-03-build-apps-using-dom-manipulation)
#
## Part-01-Practice-DOM-Manipulation
- In this part, we will go through a ReadMe file containing 20 small examples with solutions showing how to do DOM Manipulation on some popular websites by putting some code in the console window inside developer tools in the browser.
- Before you proceed to other parts, please check the mentioned ReadMe file [here](https://github.com/SidP919/FS-JS-WD-B-DOM-Manipulation/tree/Main/Part-01-Practice-DOM-Manipulation#javascript.md)
#
## Part-02-Complete-DOM-Assignments
- In this part, we will get code of 16 partially-build apps, and we will need to make changes in the javascript files( FileName ending with `.js`) inside each app's folder, to make each app work properly and same as it is shown in the image inside the **Image** folder inside each app's folder.
- You can find all the mini apps built under Part-02 in action at this live link - [https://common-utility-apps-01.vercel.app/](https://common-utility-apps-01.vercel.app/)
- You can find folders of all apps and their code in [here](https://github.com/SidP919/FS-JS-WD-B-DOM-Manipulation/tree/Main/Part-02-Complete-DOM-Assignments)
#
## Part-03-Build-Apps-Using-DOM-Manipulation
- In this part, we won't get any resources or partially-completed code for the apps. We will only have a problem statement for each app to be build and we will need to build them from scratch.
- You can check all the apps built so far in one place, at this live link - [https://common-utility-apps.vercel.app/](https://common-utility-apps.vercel.app/)
- For a complete list of apps, their code and live links which we have build so far and the problem statements of all the apps to be build, please check [here](https://github.com/SidP919/FS-JS-WD-B-DOM-Manipulation/tree/Main/Part-03-Build-Apps-Using-DOM-Manipulation)
- **Below are the live links of 7 apps built so far in Part-03**
1. **Calculator App -** **[Live Link](https://common-utility-apps.vercel.app/01-Calculator/index.html)**
2. **Stopwatch App -** **[Live Link](https://common-utility-apps.vercel.app/02-StopWatch/index.html)**
3. **Countdown App -** **[Live Link](https://common-utility-apps.vercel.app/03-Countdown/index.html)**
4. **Word Count App -** **[Live Link](https://common-utility-apps.vercel.app/04-WordCount/index.html)**
5. **Palindrome Checker Game -** **[Live Link](https://common-utility-apps.vercel.app/05-Palindrome-Checker/index.html)**
6. **Music Player -** **[Live Link](https://common-utility-apps.vercel.app/06-MusicPlayer/index.html)**
7. **Random Quote Generator -** **[Live Link](https://common-utility-apps.vercel.app/07-Random-Quote-Generator/index.html)**
#
## Time taken to complete all three parts:
- Part-01 - 12 hrs
- Part-02 - 21 hrs
- Part-03 - 24 hrs
#
## Developed by:
**Sidharth Pandey [ [Email](mailto:[email protected]) ] [ [LinkedIn](https://www.linkedin.com/in/sidp919) ]**
#
## Special Credits:
Great thanks to below for the learning resources and images:
**[Hitesh Choudhary](https://www.linkedin.com/in/hiteshchoudhary)**
**[Anurag Tiwari](https://www.linkedin.com/in/anuragtiwarime)**
**[Anirudh Jwala](https://www.linkedin.com/in/anirudh-jwala)**
#