Added the JS workshop (#17)

* Added the JS workshop * Added in some more context around opening HTML files, updated header * Added image for IDE link to browser Co-authored-by: Rodger Gu <[email protected]>
NZMSA · Apr 13, 2022 · 9e19925 · 9e19925
1 parent 017a41d
commit 9e19925
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 3 deletions.
diff --git a/7. JS workshop/README.md b/7. JS workshop/README.md
@@ -0,0 +1,19 @@
+# MSA 2022 JS Workshop
+
+Welcome to the MSA JS workshop! This workshop will help you implement some basic JS scripting for a webpage.
+
+JS is a programming language that is used to create dynamic content on a webpage. It can be used to alter page elements, send alerts, call other code, etc.
+
+* Lets start by opening `js-workshop.html` in your browser (double-click the file and select the browser of your choice when prompted)
+
+![](images/2022-04-14-11-10-49.png)
+
+  * Click the button labelled `Click Me!` - you should get an alert message!
+  * This is because in `alerter.js`, there is a function called `sendAlert()` that is being called when the button is clicked!
+  * The function sends an alert, which shows up as a popup on your browser when it is triggered
+  * The function is referenced in `js-workshop.html` because within the html head, there is a `<script></script>` tag containing a reference to the `alerter.js` file.
+* Now let's make this page a little bit more interesting:
+    - [ ] Let's make the `sendAlert` function also show the General Kenobi GIF that is on the page.
+      - [ ] Start by referencing the id element within the html by using `document.getElementById()` so that you have access to the HTML element in JS
+      - [ ] Set the hidden attribute on the document to false so that the image becomes visible when the function is called
+      - [ ] Edit the HTML so that hidden is true by default 
diff --git a/7. JS workshop/alerter.js b/7. JS workshop/alerter.js
@@ -0,0 +1,3 @@
+const sendAlert = () => {
+    alert('Why Hello There');
+}
diff --git a/7. JS workshop/images/2022-04-14-11-10-49.png b/7. JS workshop/images/2022-04-14-11-10-49.png
diff --git a/7. JS workshop/js-workshop.html b/7. JS workshop/js-workshop.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<head>
+    <title>MSA JS Workshop</title>
+    <script src="alerter.js"></script>
+</head>
+<body>
+    <div>
+    <h1>MSA JS Workshop</h1>
+    <button style="margin-bottom: 10px;" onclick="sendAlert()">Click Me!</button>
+    <img id="general_kenobi" src="https://media0.giphy.com/media/7JC7bCJJGj44aBwB8p/giphy.gif?cid=ecf05e47sdjjm4r5yahgxqup8hbndi6j4n3b7x0i1tfs7fo1&rid=giphy.gif&ct=g" alt="General_Kenobi"/>
+</div>
+</body>
diff --git a/README.md b/README.md
@@ -60,8 +60,6 @@ To help you out, we've created a schedule which will allow you to complete all o
 
 We have also created small modular workshops for each section of MS Learn. **These workshops intended for you to solidify your understanding and are optional. To pass Phase 1 all you will have to do is obtain 34,000 MS learn XP on your account.**
 
---TODO: Hyperlink the workshops here when done--
-
 ### Checklist :white_check_mark:
 
 - [ ] Week 1 (15 APR - 21 APR)
@@ -88,7 +86,7 @@ We have also created small modular workshops for each section of MS Learn. **The
   - [ ] [6. HTML & CSS workshop](https://github.com/NZMSA/2022-Phase-1/tree/main/6.%20HTML%2BCSS%20workshop/README.md)
 - [ ] Week 8 (3 JUN - 9 JUN)
   - [ ] [JavaScript](https://docs.microsoft.com/en-us/learn/paths/web-development-101/)
-  - [ ] [7. JavaScript workshop](//TODO_INSERT_LINK_HERE)
+  - [ ] [7. JavaScript workshop](https://github.com/NZMSA/2022-Phase-1/tree/main/7.%JS%20workshop)
 - [ ] Week 9 (10 JUN - 16 JUN)
   - [ ] [TypeScript](https://docs.microsoft.com/en-us/learn/paths/build-javascript-applications-typescript/)
   - [ ] [8. TypeScript workshop](https://github.com/NZMSA/2022-Phase-1/tree/main/8.%20Typescript%20workshop)