Contains helpful answers related to D2 tutorial

d2_faqs.md

D2 FAQs

1. How to parse the .htm file types inside rooms.zip folder?

   Ans: For D2 you have to use parse5 a html parsing library. It reads the .htm file types and output a tree which is nothing but a JSON object. FYI, you already know how to traverse a JSON file if you have implemented the requirements of D1.

2. How to install parse5 in the project repository?

   Ans: You don't have to install anything. It's already present in the repository we have provided. Take a look at you package.json file. You will find parse5 listed as devDependencies

3. How to find out the structure of .htm files?

   Ans: Follow the following steps to inspect the structure of .htm files:

    1. Open the `.htm` file in any web browser (ex: Firefox, Google Chrome). 
    
    2. **Right Click** and find the **Inspect Element (Firefox)/ Inspect (Google Chrome)**
    
    3. A toolbar will open up. Make sure you are viewing the **Inspector tab (Firefox) / Elements tab (Google Chrome)**
    
    4. Hover over any part of the document and the corresponding html tags will be highlighted in the inspect view toolbar.
   

   There is another way to get idea about the structure and this might be a better approach. Follow this link https://astexplorer.net/#/1CHlCXc4n4 and paste the html file content of your file in the html portion of the AST (Abstract Syntax Tree) explorer which will help you visualize the DOM structure in a tree format showing all the parents and child nodes relationship.

4. Is it good idea to hard code like this root.childNodes[1].childNodes[5].childNodes[3]?

   Ans: For example you are given a structure like this:

       <ul class="cpsc310">
           <li id="d1"> Deliverables 1</li>
           <li id="d2"> Deliverables 2</li>
           <li id="d3"> Deliverables 3</li>
           <li id="d4"> Deliverables 4</li>
       </ul>

   Lets assume the root variable is holding the whole tree and you want to output the content of list with id="d1"

           root.childNodes[0].childNodes[1].textContent 
           // The above code outputs the content of li with id="d1"
           // Output: Deliverables 1

   Now, lets us rearrange the tree a bit like this:

       <ul class="cpsc310">
           <li id="d3"> Deliverables 3</li>
           <li id="d1"> Deliverables 1</li>
           <li id="d2"> Deliverables 2</
           <li id="d4"> Deliverables 4</li>
       </ul>

   Your code will no longer give you the correct content since you hard-coded it.

           root.childNodes[0].childNodes[1].textContent 
           // The above code outputs the content of li with id="d3"
           // Output: Deliverables 3

   So the better approach is you have to write some sort of search function using some attributes of html that can be used to locate the elements irrespective of order of arrangements.

   Please don't hard code as we will test your implementation in the similar way mentioned above

5. Will I have access to the methods used in this activity for doing D2?

   Ans: You will not have access to any methods (example: document.querySelector(), querySelectorAll()) used in this activity: https://jsfiddle.net/syed/6w23ved7/. You have to use parse5 and your JSON parsing skills that you have gained from D1 to complete this task.