+
+
+
+
\ No newline at end of file
diff --git a/exercise-solutions/js_dom_manipulation/ex1/ex1.js b/exercise-solutions/js_dom_manipulation/ex1/ex1.js
new file mode 100644
index 0000000..8906f2e
--- /dev/null
+++ b/exercise-solutions/js_dom_manipulation/ex1/ex1.js
@@ -0,0 +1,14 @@
+console.log("Yay! The javascript is running")
+
+document.getElementById("name").innerText = "Tim"
+
+document.getElementById("bigger").style.color = "green"
+document.getElementById("bigger").style.fontSize = "70px"
+
+// Cat picture source
+// https://cdn-prd.content.metamorphosis.com/wp-content/uploads/sites/6/2022/12/shutterstock_781327003-1-768x512.jpg
+
+squares = document.getElementsByClassName("square")
+for (square of squares) {
+ square.classList.remove("hidden")
+}
\ No newline at end of file
diff --git a/exercise-solutions/js_dom_manipulation/ex2/ex2.css b/exercise-solutions/js_dom_manipulation/ex2/ex2.css
new file mode 100644
index 0000000..3c9a363
--- /dev/null
+++ b/exercise-solutions/js_dom_manipulation/ex2/ex2.css
@@ -0,0 +1,23 @@
+#display-box {
+ border: solid black 1px;
+ width: 70vw;
+ height: 40vh;
+ text-align: center;
+ padding: 50px;
+ margin: 20px;
+}
+
+#content {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ height: 100vh
+}
+
+#button-row {
+ display: flex;
+ width: 100%;
+ justify-content: space-around;
+ gap: 30px
+}
\ No newline at end of file
diff --git a/exercise-solutions/js_dom_manipulation/ex2/ex2.html b/exercise-solutions/js_dom_manipulation/ex2/ex2.html
new file mode 100644
index 0000000..c130650
--- /dev/null
+++ b/exercise-solutions/js_dom_manipulation/ex2/ex2.html
@@ -0,0 +1,74 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Put text here
+
+
+
+
+
+
+
+
+
+ We're no strangers to love
+ You know the rules and so do I (do I)
+ A full commitment's what I'm thinking of
+ You wouldn't get this from any other guy
+ I just wanna tell you how I'm feeling
+ Gotta make you understand
+ Never gonna give you up
+ Never gonna let you down
+ Never gonna run around and desert you
+ Never gonna make you cry
+ Never gonna say goodbye
+ Never gonna tell a lie and hurt you
+
+
+
+
+
Algorithms and Programming Techniques
+
Overview
+ Correctness and efficiency of algorithms. Computational complexity: time and space bounds. Techniques for
+ best-case, worst-case and average-case time and space analysis. Designing algorithms using induction,
+ divide-and-conquer and greedy strategies. Algorithms: sorting and order statistics, trees, graphs, matrices.
+ Intractability: classes P, NP, and NP-completeness, approximation algorithms.
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit nisi at magna venenatis, in
+ molestie felis scelerisque. Nunc sapien metus, euismod et turpis nec, lobortis mollis ligula. Donec
+ magna nulla, dignissim ac risus venenatis, maximus interdum lectus. Duis pellentesque pellentesque elit,
+ facilisis ultrices arcu hendrerit convallis. Etiam efficitur interdum nisi, in sollicitudin leo suscipit
+ a. Vivamus rhoncus odio enim, ac tristique arcu consequat quis. Etiam quam neque, lobortis sed tincidunt
+ mollis, porta ac tellus. Curabitur aliquam purus ut quam porta maximus. Fusce aliquam ante ante. Mauris
+ sodales justo quis efficitur luctus. Donec bibendum, magna sit amet euismod interdum, nisi metus
+ lobortis orci, eget mollis eros erat at nisi. Fusce sed finibus est. Integer dolor urna, viverra id
+ sollicitudin cursus, cursus vel metus. Aenean non libero et justo posuere ultrices at eu ligula. Nam
+ rutrum, nisi vitae condimentum consectetur, ante turpis volutpat elit, a bibendum magna ipsum a erat.
+
+ Donec facilisis lectus in nisl porttitor scelerisque. Nam non mauris enim. Vivamus pretium odio ac risus
+ luctus auctor. Fusce iaculis pellentesque libero quis viverra. Curabitur fermentum porttitor posuere.
+ Aliquam tincidunt feugiat risus, in faucibus nisl condimentum eu. Nulla sed fermentum dolor, in
+ efficitur risus. Suspendisse potenti. Mauris sed sagittis mauris, eu lobortis sem. Aliquam eget quam nec
+ odio semper elementum eu a mauris. Sed dui mi, suscipit sit amet est et, blandit porttitor lacus.
+ Suspendisse molestie elementum ultricies.
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/exercise-solutions/js_dom_manipulation/ex2/ex2.js b/exercise-solutions/js_dom_manipulation/ex2/ex2.js
new file mode 100644
index 0000000..f071d29
--- /dev/null
+++ b/exercise-solutions/js_dom_manipulation/ex2/ex2.js
@@ -0,0 +1,7 @@
+console.log("Exercise 2")
+
+const main = document.querySelector("#display-box")
+
+function insertText(element) {
+ main.innerHTML = document.querySelector(element).innerHTML
+}
\ No newline at end of file
diff --git a/exercise-solutions/js_dom_manipulation/ex3/ex3.css b/exercise-solutions/js_dom_manipulation/ex3/ex3.css
new file mode 100644
index 0000000..e457e6e
--- /dev/null
+++ b/exercise-solutions/js_dom_manipulation/ex3/ex3.css
@@ -0,0 +1,16 @@
+#display-box {
+ border: solid black 1px;
+ width: 70vw;
+ height: 40vh;
+ text-align: center;
+ padding: 50px;
+ margin: 20px;
+}
+
+#content {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ height: 100vh
+}
diff --git a/exercise-solutions/js_dom_manipulation/ex3/ex3.html b/exercise-solutions/js_dom_manipulation/ex3/ex3.html
new file mode 100644
index 0000000..8825e6c
--- /dev/null
+++ b/exercise-solutions/js_dom_manipulation/ex3/ex3.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Insert advice here
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/exercise-solutions/js_dom_manipulation/ex3/ex3.js b/exercise-solutions/js_dom_manipulation/ex3/ex3.js
new file mode 100644
index 0000000..1d09008
--- /dev/null
+++ b/exercise-solutions/js_dom_manipulation/ex3/ex3.js
@@ -0,0 +1,15 @@
+console.log("Exercise 3")
+
+const main = document.querySelector("#display-box")
+
+const button = document.querySelector("button")
+
+button.addEventListener("click", () => {
+ fetch("https://api.adviceslip.com/advice")
+ .then(resp => resp.json())
+ .then(data => {
+ console.log(data)
+ main.innerText = data.slip.advice
+ })
+ .catch(e => console.log(e))
+})
diff --git a/exercises/.gitignore b/exercises/.gitignore
new file mode 100644
index 0000000..b0f2192
--- /dev/null
+++ b/exercises/.gitignore
@@ -0,0 +1,2 @@
+__pycache__
+.venv
\ No newline at end of file
diff --git a/exercises/js_dom_manipulation/README.md b/exercises/js_dom_manipulation/README.md
new file mode 100644
index 0000000..b8764b0
--- /dev/null
+++ b/exercises/js_dom_manipulation/README.md
@@ -0,0 +1,17 @@
+# Javascript DOM Exercises
+
+## Exercise 1
+For this exercise only change **ex1.js**. Use javascript to change the following things on the html page
+
+- Add your name in the h2 element with id #name
+- Make the text bigger and green
+- Change the img src to show a photo of a cat
+- Change the style of all of the squares so that they appear on the page
+
+## Exercise 2
+For this exercise alter both **ex2.js** and **ex2.html** so that when button(x) is pressed it will fill in the center box with the corresponding html.
+
+## Exercise 3
+Complete the fetch code in **ex3.js**. Write the friendly advice from the API to the given box.
+
+**Bonus ⭐**: Try using another api! You could also try to use an api that takes an input and combine that with some kind of text input
\ No newline at end of file
diff --git a/exercises/js_dom_manipulation/ex1/ex1.css b/exercises/js_dom_manipulation/ex1/ex1.css
new file mode 100644
index 0000000..a4de406
--- /dev/null
+++ b/exercises/js_dom_manipulation/ex1/ex1.css
@@ -0,0 +1,15 @@
+.square {
+ width: 40px;
+ height: 40px;
+ background-color: red;
+}
+
+.hidden {
+ display: none;
+}
+
+#square-container {
+ display: flex;
+ width: 100vw;
+ gap: 20px;
+}
\ No newline at end of file
diff --git a/exercises/js_dom_manipulation/ex1/ex1.html b/exercises/js_dom_manipulation/ex1/ex1.html
new file mode 100644
index 0000000..e71da4f
--- /dev/null
+++ b/exercises/js_dom_manipulation/ex1/ex1.html
@@ -0,0 +1,33 @@
+
+
+
+
+
+ Exercise 1
+
+
+
+
+
+
+
Hello World
+
+
My name is
+
+
+
Make me bigger and green
+
+
Replace UNSW with a cute cat picture
+
+
+
Make the squares appear!
+
+
A
+
B
+
C
+
+
+
+
+
+
\ No newline at end of file
diff --git a/exercises/js_dom_manipulation/ex1/ex1.js b/exercises/js_dom_manipulation/ex1/ex1.js
new file mode 100644
index 0000000..e289b12
--- /dev/null
+++ b/exercises/js_dom_manipulation/ex1/ex1.js
@@ -0,0 +1,4 @@
+console.log("Yay! The javascript is running")
+
+// Cat picture source
+// https://cdn-prd.content.metamorphosis.com/wp-content/uploads/sites/6/2022/12/shutterstock_781327003-1-768x512.jpg
diff --git a/exercises/js_dom_manipulation/ex2/ex2.css b/exercises/js_dom_manipulation/ex2/ex2.css
new file mode 100644
index 0000000..3c9a363
--- /dev/null
+++ b/exercises/js_dom_manipulation/ex2/ex2.css
@@ -0,0 +1,23 @@
+#display-box {
+ border: solid black 1px;
+ width: 70vw;
+ height: 40vh;
+ text-align: center;
+ padding: 50px;
+ margin: 20px;
+}
+
+#content {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ height: 100vh
+}
+
+#button-row {
+ display: flex;
+ width: 100%;
+ justify-content: space-around;
+ gap: 30px
+}
\ No newline at end of file
diff --git a/exercises/js_dom_manipulation/ex2/ex2.html b/exercises/js_dom_manipulation/ex2/ex2.html
new file mode 100644
index 0000000..f5a6e19
--- /dev/null
+++ b/exercises/js_dom_manipulation/ex2/ex2.html
@@ -0,0 +1,74 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Put text here
+
+
+
+
+ Load Text 3
+
+
+
+
+ We're no strangers to love
+ You know the rules and so do I (do I)
+ A full commitment's what I'm thinking of
+ You wouldn't get this from any other guy
+ I just wanna tell you how I'm feeling
+ Gotta make you understand
+ Never gonna give you up
+ Never gonna let you down
+ Never gonna run around and desert you
+ Never gonna make you cry
+ Never gonna say goodbye
+ Never gonna tell a lie and hurt you
+
+
+
+
+
Algorithms and Programming Techniques
+
Overview
+ Correctness and efficiency of algorithms. Computational complexity: time and space bounds. Techniques for
+ best-case, worst-case and average-case time and space analysis. Designing algorithms using induction,
+ divide-and-conquer and greedy strategies. Algorithms: sorting and order statistics, trees, graphs, matrices.
+ Intractability: classes P, NP, and NP-completeness, approximation algorithms.
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit nisi at magna venenatis, in
+ molestie felis scelerisque. Nunc sapien metus, euismod et turpis nec, lobortis mollis ligula. Donec
+ magna nulla, dignissim ac risus venenatis, maximus interdum lectus. Duis pellentesque pellentesque elit,
+ facilisis ultrices arcu hendrerit convallis. Etiam efficitur interdum nisi, in sollicitudin leo suscipit
+ a. Vivamus rhoncus odio enim, ac tristique arcu consequat quis. Etiam quam neque, lobortis sed tincidunt
+ mollis, porta ac tellus. Curabitur aliquam purus ut quam porta maximus. Fusce aliquam ante ante. Mauris
+ sodales justo quis efficitur luctus. Donec bibendum, magna sit amet euismod interdum, nisi metus
+ lobortis orci, eget mollis eros erat at nisi. Fusce sed finibus est. Integer dolor urna, viverra id
+ sollicitudin cursus, cursus vel metus. Aenean non libero et justo posuere ultrices at eu ligula. Nam
+ rutrum, nisi vitae condimentum consectetur, ante turpis volutpat elit, a bibendum magna ipsum a erat.
+
+ Donec facilisis lectus in nisl porttitor scelerisque. Nam non mauris enim. Vivamus pretium odio ac risus
+ luctus auctor. Fusce iaculis pellentesque libero quis viverra. Curabitur fermentum porttitor posuere.
+ Aliquam tincidunt feugiat risus, in faucibus nisl condimentum eu. Nulla sed fermentum dolor, in
+ efficitur risus. Suspendisse potenti. Mauris sed sagittis mauris, eu lobortis sem. Aliquam eget quam nec
+ odio semper elementum eu a mauris. Sed dui mi, suscipit sit amet est et, blandit porttitor lacus.
+ Suspendisse molestie elementum ultricies.
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/exercises/js_dom_manipulation/ex2/ex2.js b/exercises/js_dom_manipulation/ex2/ex2.js
new file mode 100644
index 0000000..940dabf
--- /dev/null
+++ b/exercises/js_dom_manipulation/ex2/ex2.js
@@ -0,0 +1,3 @@
+console.log("Exercise 2")
+
+const main = document.querySelector("#display-box")
\ No newline at end of file
diff --git a/exercises/js_dom_manipulation/ex3/ex3.css b/exercises/js_dom_manipulation/ex3/ex3.css
new file mode 100644
index 0000000..e457e6e
--- /dev/null
+++ b/exercises/js_dom_manipulation/ex3/ex3.css
@@ -0,0 +1,16 @@
+#display-box {
+ border: solid black 1px;
+ width: 70vw;
+ height: 40vh;
+ text-align: center;
+ padding: 50px;
+ margin: 20px;
+}
+
+#content {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ height: 100vh
+}
diff --git a/exercises/js_dom_manipulation/ex3/ex3.html b/exercises/js_dom_manipulation/ex3/ex3.html
new file mode 100644
index 0000000..8825e6c
--- /dev/null
+++ b/exercises/js_dom_manipulation/ex3/ex3.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Insert advice here
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/exercises/js_dom_manipulation/ex3/ex3.js b/exercises/js_dom_manipulation/ex3/ex3.js
new file mode 100644
index 0000000..7eeb08d
--- /dev/null
+++ b/exercises/js_dom_manipulation/ex3/ex3.js
@@ -0,0 +1,13 @@
+// https://github.com/public-apis/public-apis?
+// Alternative APIs
+
+console.log("Exercise 3")
+
+const main = document.querySelector("#display-box")
+
+const button = document.querySelector("button")
+
+button.addEventListener("click", () => {
+ fetch("://api.adviceslip.com/advice")
+ .then(...)
+})
+
+ 
+