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

• Part-02-Complete-DOM-Assignments

• 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

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/

• You can find folders of all apps and their code in here

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/

• 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

• Below are the live links of 7 apps built so far in Part-03

  1. Calculator App - Live Link
  2. Stopwatch App - Live Link
  3. Countdown App - Live Link
  4. Word Count App - Live Link
  5. Palindrome Checker Game - Live Link
  6. Music Player - Live Link
  7. Random Quote Generator - Live Link

Time taken to complete all three parts:

• Part-01 - 12 hrs

• Part-02 - 21 hrs

• Part-03 - 24 hrs

Developed by:

Sidharth Pandey [ Email ] [ LinkedIn ]

Special Credits:

Great thanks to below for the learning resources and images:

Hitesh Choudhary

Anurag Tiwari

Anirudh Jwala