diff --git a/about.html b/about.html new file mode 100644 index 0000000..4562229 --- /dev/null +++ b/about.html @@ -0,0 +1,29 @@ + + + + + + + + + + About Me + + + + + + + + + + + + \ No newline at end of file diff --git a/js-dom.html b/js-dom.html new file mode 100644 index 0000000..eacb18f --- /dev/null +++ b/js-dom.html @@ -0,0 +1,18 @@ + + + + + + + + + + + + +

+

+ + + + \ No newline at end of file diff --git a/kitten.jpg b/kitten.jpg new file mode 100644 index 0000000..29ddfce Binary files /dev/null and b/kitten.jpg differ diff --git a/main.js b/main.js new file mode 100644 index 0000000..d5b46bb --- /dev/null +++ b/main.js @@ -0,0 +1,20 @@ +let name = document.querySelector('#name'); +let fave = document.querySelector('#fave'); +let home = document.querySelector("#home"); +let fact = document.querySelector('#fact'); +let listColor = document.querySelectorAll('li'); +let image = document.createElement('img'); + +document.querySelector("body").style.fontFamily = "Arial, sans-serif"; + +name.innerHTML = "Kim"; +fave.innerHTML = "food, anime"; +home.innerHTML = "Philippines"; +fact.innerHTML = "I have an annoying cat"; + +for( let i=0; i < listColor.length; i++){ + listColor[i].style.color = "lightblue"; +} + +image.src = "profile.jpg"; +document.body.appendChild(image); \ No newline at end of file diff --git a/profile.jpg b/profile.jpg new file mode 100644 index 0000000..6959c39 Binary files /dev/null and b/profile.jpg differ diff --git a/script.js b/script.js new file mode 100644 index 0000000..4a6be80 --- /dev/null +++ b/script.js @@ -0,0 +1,33 @@ +let message = document.querySelectorAll('p'); +let p1 = document.querySelector('#one'); +let image = document.createElement('img'); +const button = document.createElement('button'); + + +for (let i = 0; i < message.length; i++){ + message[i].innerHTML = "We are coders!"; + message[i].style.color = "steelblue"; +} + +p1.innerHTML = "Developers for life!" ; + +image.src = 'kitten.jpg'; +document.body.appendChild(image); + +p1.style.fontSize = "40px"; + +button.innerHTML = "Hide Me!"; +document.body.appendChild(button); + + +document.querySelector('button').addEventListener("click", clickMe); +function clickMe() { + var x = document.querySelector('img'); + if (x.style.display === "none") { + x.style.display = "block"; + button.innerHTML = "Hide Me!"; + } else { + x.style.display = "none"; + button.innerHTML = "Show Me!"; + } +} \ No newline at end of file diff --git a/table.html b/table.html new file mode 100644 index 0000000..9fdd49b --- /dev/null +++ b/table.html @@ -0,0 +1,39 @@ + + + + + + + + + + Table of Contents + + + + + +
+

Table of Contents

+
+
+
+

Fruits

+

Red Fruits

+

Apple

+

Raspberry

+

Orange Fruits

+

Orange

+

Tangerine

+

Vegetables

+

Vegetables Which Are Actually Fruits

+

Tomato

+

Eggplant

+
+ + + + + \ No newline at end of file diff --git a/table.js b/table.js new file mode 100644 index 0000000..3675d5c --- /dev/null +++ b/table.js @@ -0,0 +1,14 @@ +const items = document.querySelectorAll('div')[1].children; +let table = document.querySelector('div'); + +function addItems(item){ + console.log({items}) + table.appendChild(item) +} +for (let i=0; i