https://github.com/tempehs/sdd-webjs-examples
https://github.com/tempehs/sdd-webjs-examples
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/tempehs/sdd-webjs-examples
- Owner: TempeHS
- License: gpl-3.0
- Created: 2023-06-23T04:28:38.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-02-06T22:35:49.000Z (over 2 years ago)
- Last Synced: 2025-02-01T10:11:28.690Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://tempehs.github.io/2024SDD-WebJS-Ben.Jones/
- Size: 10 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# A toolbox of Web JS Experiements
Before you begin, [set up Visual Studio Code](https://github.com/TempeHS/VisualStudioCodeSetup).
## Learn DOM (Document Object Module) JS
A range of basic HTML/CSS/JS applications that utilise the JS Documement Object Module in different (not always correct) ways. These examples have been written to build student skills in JS and the DOM, so they need to conform to standards or be complete.
| Application | Source | DOM Example |
|---|---|---|
| [To do list](https://tempehs.github.io/2024SDD-WebJS-Ben.Jones/Array-To-Do-List/) | [Code](https://github.com/TempeHS/2024SDD-WebJS-Ben.Jones/tree/main/Array-To-Do-List) | Storing in Array, using local memory |
| [Rock Paper Scissors v1](https://tempehs.github.io/2024SDD-WebJS-Ben.Jones/Bootstrap-Rock-Paper-Scissors) | [Code](https://github.com/TempeHS/2024SDD-WebJS-Ben.Jones/tree/main/Bootstrap-Rock-Paper-Scissors) | Bootstrap, Passing data into methods |
| [Guess a number between 1 & 10](https://tempehs.github.io/2024SDD-WebJS-Ben.Jones/Number-Guess) | [Code](https://github.com/TempeHS/2024SDD-WebJS-Ben.Jones/tree/main/Number-Guess) | Basic Inner HTML |
| [To do list & timer](https://tempehs.github.io/2024SDD-WebJS-Ben.Jones/To-list-and-timer) | [Code](https://github.com/TempeHS/2024SDD-WebJS-Ben.Jones/tree/main/To-list-and-timer) | Animation, CSS |
| [CD Catalogue](https://tempehs.github.io/2024SDD-WebJS-Ben.Jones/xhtml1-catalogue-example) | [Code](https://github.com/TempeHS/2024SDD-WebJS-Ben.Jones/tree/main/xhtml1-catalogue-example) | XML data, AJAX |
| [Rock Paper Scissors v2](https://tempehs.github.io/2024SDD-WebJS-Ben.Jones/html5canvas-rps) | [Code](https://github.com/TempeHS/2024SDD-WebJS-Ben.Jones/tree/main/html5canvas-rps) | HTML5 Canvas |
| [Text Puzzle](https://tempehs.github.io/2024SDD-WebJS-Ben.Jones/Text-Puzzle) | [Code](https://github.com/TempeHS/2024SDD-WebJS-Ben.Jones/tree/main/Text-Puzzle) | CCS DOM Control |
## Further reading/learning
1. https://www.w3schools.com/js/js_htmldom.asp
2. https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction