Merge pull request #13 from TAS-scorchedshadow/dylan/dom-manipulation…

…-docs

Added Docs for Javascript DOM manipulation exercises

book/src/02_javascript/index.md

@@ -1,3 +1,10 @@
-# Javscript 
+# Javascript
 
-Try to use symbolic links when we can to reduce having to write the same thing twice
+Below is an assortment of videos that well help you get started with javascript. Currently the exercises on offer are
+- [JS Dom Manipulation](../02_javascript/js-dom-manipulation.md)
+## Javascript Summary (Credits: Fireship)
+<iframe width="560" height="315" src="https://www.youtube.com/embed/DHjqpvDnNGE?si=bCRAVJRtcQ_2QWpM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+
+
+## Javascript Syntax Tutorial (Credits: Jeremy Le) 
+<iframe width="560" height="315" src="https://www.youtube.com/embed/OHe4b-OTuI0?si=HnVZO0yYzv3BjifC" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

book/src/02_javascript/js-dom-manipulation.md

@@ -0,0 +1 @@
+../../../exercises/js_dom_manipulation/README.md

book/src/SUMMARY.md

@@ -9,7 +9,7 @@
   - [Installing Git, Node, NVM](01_getting-started/installation.md)
   - [(Optional) Additional Tools](01_getting-started/optional_extras.md)
 - [Javascript](02_javascript/index.md)
-  - [Example Exercise](02_javascript/example.md)
+  - [DOM manipulation](02_javascript/js-dom-manipulation.md)
 - [Figma](03_figma/index.md)
 - [React Basics](04_react-intro/index.md)
 - [Styling](06_styling/index.md)

exercise-solutions/js_dom_manipulation/ex1/ex1.html

@@ -17,7 +17,7 @@ <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">
+        <img id="my-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>

exercise-solutions/js_dom_manipulation/ex1/ex1.js

@@ -8,6 +8,8 @@ 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
 
+document.querySelector("#my-img").src = "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")

exercises/js_dom_manipulation/README.md

@@ -1,8 +1,11 @@
 # Javascript DOM Exercises
+**Focus**: JS | **Authors**: Dylan H
 
+These exercises are designed to get you familar with making changes to the DOM. You should open the file in your browser by copying the absolute file path of ex(1|2|3).html and pasting it into the top bar.
 ## Exercise 1
-For this exercise only change **ex1.js**. Use javascript to change the following things on the html page
+For this exercise change **ex1.js**. Use javascript to change the following things on the html page
 
+- Link the javascript into the html
 - 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
@@ -11,9 +14,9 @@ For this exercise only change **ex1.js**. Use javascript to change the following
 ## 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.
 
-**Bonus ⭐**: Make it so that the text fills in when the mouse leave the button instead of the click event. Also try extending or altering the setup
+**Bonus ⭐**: Make it so that the text fills in when the mouse leave the button instead of the click event. What happens if you add another button?
 
 ## Exercise 3
-Complete the fetch code in **ex3.js**. Write the friendly advice from the API to the given box.
+Complete the fetch code in **ex3.js**. Add 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
+**Bonus ⭐**: Try using [another api](https://github.com/public-apis/public-apis?)! You could also try to use an api that takes an input and combine that with a text input.