diff --git a/book/src/02_javascript/index.md b/book/src/02_javascript/index.md index 5ef82a6..34ab547 100644 --- a/book/src/02_javascript/index.md +++ b/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 \ No newline at end of file +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) + + + +## Javascript Syntax Tutorial (Credits: Jeremy Le) + diff --git a/book/src/02_javascript/js-dom-manipulation.md b/book/src/02_javascript/js-dom-manipulation.md new file mode 120000 index 0000000..07751e7 --- /dev/null +++ b/book/src/02_javascript/js-dom-manipulation.md @@ -0,0 +1 @@ +../../../exercises/js_dom_manipulation/README.md \ No newline at end of file diff --git a/book/src/SUMMARY.md b/book/src/SUMMARY.md index 277f165..8e845f8 100644 --- a/book/src/SUMMARY.md +++ b/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) diff --git a/exercise-solutions/js_dom_manipulation/ex1/ex1.html b/exercise-solutions/js_dom_manipulation/ex1/ex1.html index a546d9f..a487b60 100644 --- a/exercise-solutions/js_dom_manipulation/ex1/ex1.html +++ b/exercise-solutions/js_dom_manipulation/ex1/ex1.html @@ -17,7 +17,7 @@

Make me bigger and green

Replace UNSW with a cute cat picture

- +
diff --git a/exercise-solutions/js_dom_manipulation/ex1/ex1.js b/exercise-solutions/js_dom_manipulation/ex1/ex1.js index 8906f2e..a2aaaae 100644 --- a/exercise-solutions/js_dom_manipulation/ex1/ex1.js +++ b/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") diff --git a/exercises/js_dom_manipulation/README.md b/exercises/js_dom_manipulation/README.md index 64cfb53..536de0a 100644 --- a/exercises/js_dom_manipulation/README.md +++ b/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 \ No newline at end of file +**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. \ No newline at end of file