deleted the duplicate, renamed the video link

the-internet/dom-manipulation.md

@@ -1,4 +1,3 @@
-
 # What is DOM Manipulation?
 
 **DOM manipulation** refers to the activity of selecting and modifying DOM elements. The main reason why this is done is that **you want to show the user different things depending their activity**, for example if you click on a [hamburger menu icon](https://bit.ly/2Yr4O7Z) and a navigation menu slides in.
@@ -10,10 +9,10 @@ Finding the right elements is called **traversing the DOM**. Traversing the DOM
 Look at the following code sample:
 
 ```js
-const body = document.querySelector('body'); // you can also use 'document.body'
-const newParagraph = document.createElement('p');
-newParagraph.innerText = 'This paragraph will be added to the body!';
-newParagraph.style.background = 'red';
+const body = document.querySelector("body"); // you can also use 'document.body'
+const newParagraph = document.createElement("p");
+newParagraph.innerText = "This paragraph will be added to the body!";
+newParagraph.style.background = "red";
 body.appendChild(newParagraph);
 ```
 
@@ -23,7 +22,7 @@ In this example we're executing the following steps:
 2. Creating a new DOM element: a paragraph i.e. a `<p>` element
 3. Injecting content into the newly create paragraph element
 4. Setting the background color for the newly create paragraph element
-5. Adding the  newly create paragraph element element to the body
+5. Adding the newly create paragraph element element to the body
 
 Test this code out by copying and pasting it in the Developer Console of your browser. After you've pressed the Enter/Return key you will find your new `<p>` at the end of the page!
 
@@ -51,9 +50,9 @@ Check out the following resources to learn more about what events there are, and
 Take a look at this code:
 
 ```js
-const body = document.querySelector('body');
-body.addEventListener('click', function () {
-  body.style.background = 'black';
+const body = document.querySelector("body");
+body.addEventListener("click", function () {
+  body.style.background = "black";
 });
 ```
 
@@ -69,13 +68,13 @@ The second step is called **listening for the event**. We do this by using a by
 
 The third and final step is called **handling the event**. The term "handler" effectively means "taking care of" the event; the response to the event. The handler itself is nothing more than a function that executes more JavaScript code in order to manipulate a particular part of the page (either the element that experienced the event or a totally different part of the page).
 
-- [Events in JavaScript](https://www.youtube.com/watch?v=7UstS0hsHgI)
+- [Why `.addEventListener('click', handler)` is better than `onclick`](https://www.youtube.com/watch?v=7UstS0hsHgI)
 - [JavaScript Events Tutorial](https://www.youtube.com/watch?v=e57ReoUn6kM)
 
 # Extra reading
+
 If you just can't get enough, here are some extra links that mentors/students have found useful concerning this topic:
 
 - [javascript.info/document](https://javascript.info/document)
 - [javascript.info/events](https://javascript.info/events)
-- [`onclick` vs. `.addEventListener('click', handler)`](https://www.youtube.com/watch?v=7UstS0hsHgI)
 - [What are event listeners in JS?](https://www.youtube.com/watch?v=jqU3uaRgQyQ)