Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions about.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>About Me</title>
</head>
<body>
<ul>
<li><span id="nickname">Nickname: booboo</span></li>
<li><span id="favorites">Favorites: music, pizza, The Office</span></li>
<li><span id="hometown">Hometown: Wilmington</span></li>
<li>
<span id="randomFact">Random Fact: Black is my favorite color.</span>
</li>
</ul>
<script src="./main.js"></script>
</body>
</html>
53 changes: 53 additions & 0 deletions fruitandveg.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fruits and Vegetables</title>
</head>
<body>
<div id="firdiv">
<h3>Table of Contents</h3>
</div>
<hr />

<div id="secdiv">
<h1>Fruits</h1>
<h2>Red Fruits</h2>
<h3>Apple</h3>
<h3>Raspberry</h3>
<h2>Orange Fruits</h2>
<h3>Orange</h3>
<h3>Tangerine</h3>
<h1>Vegetables</h1>
<h2>Vegetables Which Are Actually Fruits</h2>
<h3>Tomato</h3>
<h3>Eggplant</h3>
</div>

<script>
/*
3. Add a script to the HTML document that iterates through the elements and creates a table
of contents. The table of contents should be at the top of the webpage.
*/

let textTOC = "";

let headerlength = document
.getElementById("secdiv")
.getElementsByTagName("h2").length;

for (let i = 0; i < headerlength; i++) {
const getHeader = document
.getElementById("secdiv")
.getElementsByTagName("h2")[i].textContent;
document
.getElementById("secdiv")
.getElementsByTagName("h2")
[i].setAttribute("id", "point" + i);
textTOC = "<li><a href='#point" + i + "'>" + getHeader + "</a></li>";
document.getElementById("firdiv").innerHTML += textTOC;
}
</script>
</body>
</html>
Binary file added img/Myphoto.JPG
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
50 changes: 50 additions & 0 deletions js-dom.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<p id="firstParagraph"></p>
<p id="secondParagraph"></p>

<button onclick="removeImage()">Remove Image</button>

<script>
let firstText = document.querySelectorAll("p");

// Write a script to add "We are coders!" to the `<p>` element.
for (let i = 0; i < firstText.length; i++) {
firstText[i].textContent = "We are coders!";
}

//Find the *first* `<p>` element and change its text to "Developers for life!"
let secondText = document.getElementById("firstParagraph");
secondText.innerHTML = "Developers for life!";

//Add an image to the HTML document using DOM methods
let x = document.createElement("img");
x.setAttribute("src", "./lib/images/laptop.svg");
x.setAttribute("width", "304");
x.setAttribute("height", "228");
x.setAttribute("alt", "laptop");
document.body.appendChild(x);

//Write a script to change the color of the text from black to your favorite color
let bodyText = document.querySelectorAll("body");
for (let i = 0; i < bodyText.length; i++) {
bodyText[i].style.color = "tomato";
}

//Add a script to change the font size of the first `<p>` element to `40px`
document.getElementById("firstParagraph").style.fontSize = "40px";

//Add a script that hides the image when the button is clicked
function removeImage() {
var elmnt = document.getElementsByTagName("img");
elmnt[0].style.display = "none";
}
</script>
</body>
</html>
24 changes: 24 additions & 0 deletions main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
// Change the body style so it has a `font-family` of `Arial, sans-serif`.
document.querySelector("body").style.fontFamily = "Arial, sans-serif";

//Replace each of the values with your own information.
document.getElementById("nickname").textContent = "Nickname: cayenne pepper";
document.getElementById("favorites").textContent =
"Favorites: music, cheesecake, The Office";
document.getElementById("hometown").textContent = "Hometown: New Castle";
document.getElementById("randomFact").textContent =
"Random Fact: Red is my favorite color.";

//Change the `<li>` style to a color of your choosing. Cannot be black.
let liText = document.querySelectorAll("li");
for (let i = 0; i < liText.length; i++) {
liText[i].style.color = "#0E497C";
}

let x = document.createElement("img");
x.setAttribute("src", "./img/Myphoto.JPG");
x.setAttribute("width", "304");
x.setAttribute("height", "228");
x.setAttribute("alt", "photo of me");
document.body.appendChild(x);