Merge pull request #7 from TAS-scorchedshadow/dom-manip

Dom manip
devsoc-unsw · Feb 21, 2024 · a29ddc8 · a29ddc8
2 parents 273316f + eda286d
commit a29ddc8
Show file tree

Hide file tree

Showing 20 changed files with 440 additions and 0 deletions.
diff --git a/exercise-solutions/js_dom_manipulation/ex1/ex1.css b/exercise-solutions/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;
+}
diff --git a/exercise-solutions/js_dom_manipulation/ex1/ex1.html b/exercise-solutions/js_dom_manipulation/ex1/ex1.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <title>Exercise 1</title>
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" href="ex1.css">
+    </head>
+    <body>
+        <h1>Hello World</h1>
+
+        <h2>My name is </h2>
+        <h2 id="name"></h2>
+
+        <div id="bigger" style="font-size: x-small;">Make me bigger and green</div>
+
+        <h3>Replace UNSW with a cute cat picture</h3>
+        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/UNSW_lower_campus.jpg/220px-UNSW_lower_campus.jpg">
+
+        <div id="square-container">
+            <div class="square hidden">Hi</div>
+            <div class="square hidden"></div>
+            <div class="square hidden"></div>
+        </div>
+
+        <script src="ex1.js"></script>
+    </body>
+</html>
diff --git a/exercise-solutions/js_dom_manipulation/ex1/ex1.js 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")
+}
diff --git a/exercise-solutions/js_dom_manipulation/ex2/ex2.css 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
+}
diff --git a/exercise-solutions/js_dom_manipulation/ex2/ex2.html b/exercise-solutions/js_dom_manipulation/ex2/ex2.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title></title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="ex2.css">
+</head>
+
+<body>
+    <div id="content">
+        <div id="display-box">
+            Put text here
+        </div>
+        <div id="button-row">
+            <button onclick="insertText('#text1')">Load Text 1</button>
+            <button onclick="insertText('#text2')">Load Text 2</button>
+            <button onclick="insertText('#text3')">Load Text 3</button>
+        </div>
+
+        <div id="text1" style="display: none;">
+            <div> 
+                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
+            </div>
+            <img width="200" src="https://variety.com/wp-content/uploads/2021/07/Rick-Astley-Never-Gonna-Give-You-Up.png?w=1024">
+        </div>
+        <div id="text2" style="display: none;">
+            <h2>Algorithms and Programming Techniques</h2>
+            <h4>Overview</h4>
+            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.
+        </div>
+        <div id="text3" style="display: none;">
+            <div style="color: blueviolet;"> 
+                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.
+            </div>
+        </div>
+        <script src="ex2.js"></script>
+    </div>
+</body>
+
+</html>
diff --git a/exercise-solutions/js_dom_manipulation/ex2/ex2.js 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
+}
diff --git a/exercise-solutions/js_dom_manipulation/ex3/ex3.css 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
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title></title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="ex3.css">
+</head>
+
+<body>
+    <div id="content">
+        <div id="display-box">
+            Insert advice here
+        </div>
+        <button>Request advice</button>
+        <script src="ex3.js"></script>
+    </div>
+</body>
+
+</html>
diff --git a/exercise-solutions/js_dom_manipulation/ex3/ex3.js 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
@@ -0,0 +1,2 @@
+__pycache__
+.venv
diff --git a/exercises/js_dom_manipulation/README.md 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
diff --git a/exercises/js_dom_manipulation/ex1/ex1.css 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;
+}
diff --git a/exercises/js_dom_manipulation/ex1/ex1.html b/exercises/js_dom_manipulation/ex1/ex1.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <title>Exercise 1</title>
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" href="ex1.css">
+    </head>
+    <body>
+        <!-- DON'T EDIT ANYTHING IN THE BODY ELEMENT APART FROM THE SCRIPT -->
+        <h1>Hello World</h1>
+
+        <h2>My name is </h2>
+        <h2 id="name"></h2>
+
+        <div id="bigger" style="font-size: x-small;">Make me bigger and green</div>
+
+        <h3>Replace UNSW with a cute cat picture</h3>
+        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/UNSW_lower_campus.jpg/220px-UNSW_lower_campus.jpg">
+
+        <h3>Make the squares appear!</h3>
+        <div id="square-container">
+            <div class="square hidden">A</div>
+            <div class="square hidden">B</div>
+            <div class="square hidden">C</div>
+        </div>
+
+        <!-- Link js here-->
+        <script src=""></script>
+    </body>
+</html>
diff --git a/exercises/js_dom_manipulation/ex1/ex1.js 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
@@ -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
+}