├── README.md ├── style.css ├── index.html └── main.js /README.md: -------------------------------------------------------------------------------- 1 | # Four Box Template 2 | Starting point for creating accessible apps with the Enabling Technology Club. 3 | 4 | View the live template [here](https://austinbhale.com/ETC-Four-Box-Template/)! 5 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box 5 | } 6 | 7 | html, 8 | body { 9 | width: 100%; 10 | background-color: gray; 11 | font-family: Montserrat, sans-serif; 12 | color: silver; 13 | overflow: auto; 14 | } 15 | 16 | .container { 17 | width: 100%; 18 | } 19 | 20 | .header { 21 | text-align: center; 22 | color: #99badd; 23 | border-bottom: solid #99badd 1px; 24 | width: 80%; 25 | margin: auto; 26 | margin-top: 10px; 27 | } 28 | 29 | .button-row { 30 | height: 45vh; 31 | width: 100%; 32 | display: flex; 33 | } 34 | 35 | .button { 36 | position: relative; 37 | flex: 50%; 38 | margin: 2%; 39 | cursor: pointer; 40 | text-align: center; 41 | } 42 | 43 | .button-text { 44 | color: white; 45 | font-size: 50px; 46 | height: 100%; 47 | margin: auto; 48 | position: relative; 49 | display: flex; 50 | align-items: center; 51 | user-select: none; 52 | } 53 | 54 | /* Centers the text in each button. */ 55 | .inner-text { 56 | margin: auto; 57 | } 58 | 59 | #upper-left-button { 60 | background-color: #dc3545; 61 | } 62 | 63 | #upper-right-button { 64 | background-color: blue; 65 | } 66 | 67 | #lower-left-button { 68 | background-color: green; 69 | } 70 | 71 | #lower-right-button { 72 | background-color: pink; 73 | } 74 | 75 | #upper-left-button:hover { 76 | background-color: purple; 77 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Four Box Template 9 | 10 | 11 | 12 | 13 |
14 |

Four Box Template

15 | 16 |
17 |
18 |

Hover!

19 |
20 |
21 |

Speak "Hello World"

22 |
23 |
24 | 25 |
26 |
27 |

Play Me!

28 |
29 |
30 |

Click Me!

31 |
32 |
33 |
34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | //// Lower Right Button - Clicked Amount //// 2 | var lowerRightButton = document.getElementById("lower-right-button"); 3 | var counter = 0; 4 | 5 | lowerRightButton.addEventListener("click", function () { 6 | counter++; 7 | lowerRightButton.children[0].children[0].innerText = "Clicked " + counter + " times"; 8 | }); 9 | 10 | //// Lower Left Button - Music //// 11 | // For more information on making music with JS, 12 | // head to Magenta's website: https://hello-magenta.glitch.me/. 13 | var lowerLeftButton = document.getElementById("lower-left-button"); 14 | // Initialize a new Magenta player. 15 | var player = new mm.Player(); 16 | var isPlaying = false; 17 | 18 | lowerLeftButton.addEventListener("click", function () { 19 | if (isPlaying) { 20 | isPlaying = false; 21 | lowerLeftButton.children[0].children[0].innerHTML = "Stopped"; 22 | player.stop(); 23 | } else { 24 | isPlaying = true; 25 | lowerLeftButton.children[0].children[0].innerHTML = "Playing"; 26 | playSequence(); 27 | } 28 | }); 29 | 30 | function playSequence() { 31 | // Players can also play at a different tempo 32 | //player.setTempo(200); 33 | 34 | TWINKLE_TWINKLE = { 35 | notes: [ 36 | {pitch: 60, startTime: 0.0, endTime: 0.5}, 37 | {pitch: 60, startTime: 0.5, endTime: 1.0}, 38 | {pitch: 67, startTime: 1.0, endTime: 1.5}, 39 | {pitch: 67, startTime: 1.5, endTime: 2.0}, 40 | {pitch: 69, startTime: 2.0, endTime: 2.5}, 41 | {pitch: 69, startTime: 2.5, endTime: 3.0}, 42 | {pitch: 67, startTime: 3.0, endTime: 4.0}, 43 | {pitch: 65, startTime: 4.0, endTime: 4.5}, 44 | {pitch: 65, startTime: 4.5, endTime: 5.0}, 45 | {pitch: 64, startTime: 5.0, endTime: 5.5}, 46 | {pitch: 64, startTime: 5.5, endTime: 6.0}, 47 | {pitch: 62, startTime: 6.0, endTime: 6.5}, 48 | {pitch: 62, startTime: 6.5, endTime: 7.0}, 49 | {pitch: 60, startTime: 7.0, endTime: 8.0}, 50 | ], 51 | totalTime: 8 52 | }; 53 | 54 | player.start(TWINKLE_TWINKLE); 55 | } 56 | 57 | //// Upper Right Button - Speaking //// 58 | // Adding some voice to your game is very useful for making games blind accessible! 59 | var upperRightButton = document.getElementById("upper-right-button"); 60 | upperRightButton.addEventListener("click", function () { 61 | speak("Hello World"); 62 | }); 63 | 64 | function speak(read_text) { 65 | if (window.speechSynthesis.speaking) { 66 | window.speechSynthesis.cancel(); 67 | } 68 | var message = new SpeechSynthesisUtterance(read_text); 69 | window.speechSynthesis.speak(message); 70 | } --------------------------------------------------------------------------------