Need to create a JavaScript file based on HTML file
HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Fix the Page</title>
<link href="styles.css" type="text/css" rel="stylesheet" />
<!--<script type="application/javascript" src="fixer.js" charset="utf-8"></script> DON'T RUN THE SCRIPT -->
</head>
<body>
<h1 id="main-title">Fix <em>this</em> Page</h1>
<img src="mars.jpg" alt="image of mars" width="500" height="500" />
<ol class="engage">
<li>Ready</li>
<li>Set</li>
<li>Go!</li>
</ol>
<h3>List of things we need to learn about JavaScript</h3>
<ul id="knowledge-list">
<li>Relation to HTML</li>
<li>Variables</li>
<li>Syntax</li>
<li>Conditionals</li>
<li>Loops</li>
<li>Functions</li>
<li>Using the DOM</li>
</ul>
<h6 class="change-me">For extra credit change this tag to an h6 tag.</h6>
<aside>JavaScript is only fun when we can use it to manipulate HTML!</aside>
</body>
</html>
JavaScript file
document.addEventListener("DOMContentLoaded", function() {
let theImage = document.getElementsByTagName('img')[0];
theImage.src = 'mars.jpg';
let theHeading = document.getElementsByTagName('h1')[0];
theHeading.className = 'launched';
let marsList = document.getElementById('engage');
let marsReady = document.createElement('li');
let marsReadyText = document.createTextNode('Ready');
marsReady.appendChild(marsReadyText);
marsList.appendChild(marsReady);
let marsSet = document.createElement('li');
let marsSetText = document.createTextNode('Set');
marsSet.appendChild(marsSetText);
let ductTape = document.getElementsByTagName('li')[1];
marsList.insertBefore(marsSet, ductTape);
matches.parentElement.removeChild(matches);
let first = document.body.firstElementChild;
let last = document.body.lastElementChild;
console.log(first);
console.log(last);
let allParagraphs = document.getElementsByTagName('p');
console.log(allParagraphs);
for (let i = 0; i < allParagraphs.length; i++) {
console.log(allParagraphs[i].textContent);
}