diff --git a/7. JS workshop/README.md b/7. JS workshop/README.md new file mode 100644 index 0000000..060a39c --- /dev/null +++ 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 `` 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 \ No newline at end of file diff --git a/7. JS workshop/alerter.js b/7. JS workshop/alerter.js new file mode 100644 index 0000000..155f244 --- /dev/null +++ b/7. JS workshop/alerter.js @@ -0,0 +1,3 @@ +const sendAlert = () => { + alert('Why Hello There'); +} \ No newline at end of file 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 new file mode 100644 index 0000000..06b6469 Binary files /dev/null and b/7. JS workshop/images/2022-04-14-11-10-49.png differ diff --git a/7. JS workshop/js-workshop.html b/7. JS workshop/js-workshop.html new file mode 100644 index 0000000..02bfec7 --- /dev/null +++ b/7. JS workshop/js-workshop.html @@ -0,0 +1,12 @@ + + + MSA JS Workshop + + + +
+

MSA JS Workshop

+ + General_Kenobi +
+ \ No newline at end of file diff --git a/README.md b/README.md index e26d366..3722f48 100644 --- 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)