Completed project 1

Author: wwags33

.devcontainer/Dockerfile

@@ -0,0 +1,21 @@
+#-------------------------------------------------------------------------------------------------------------
+# Copyright (c) Microsoft Corporation. All rights reserved.
+# Licensed under the MIT License. See https://go.microsoft.com/fwlink/?linkid=2090316 for license information.
+#-------------------------------------------------------------------------------------------------------------
+
+# To fully customize the contents of this image, use the following Dockerfile instead:
+# https://github.com/microsoft/vscode-dev-containers/tree/v0.101.0/containers/typescript-node-12/.devcontainer/Dockerfile
+FROM mcr.microsoft.com/vscode/devcontainers/typescript-node:0-12
+
+# ** [Optional] Uncomment this section to install additional packages. **
+#
+# ENV DEBIAN_FRONTEND=noninteractive
+# RUN apt-get update \
+#    && apt-get -y install --no-install-recommends <your-package-list-here> \
+#    #
+#    # Clean up
+#    && apt-get autoremove -y \
+#    && apt-get clean -y \
+#    && rm -rf /var/lib/apt/lists/*
+# ENV DEBIAN_FRONTEND=dialog
+

.devcontainer/devcontainer.json

@@ -0,0 +1,24 @@
+// For format details, see https://aka.ms/vscode-remote/devcontainer.json or this file's README at:
+// https://github.com/microsoft/vscode-dev-containers/tree/v0.101.0/containers/typescript-node-12
+{
+	"name": "Node.js 12 & TypeScript",
+	"dockerFile": "Dockerfile",
+	// Set *default* container specific settings.json values on container create.
+	"settings": {
+		"terminal.integrated.shell.linux": "/bin/bash"
+	},
+	// Add the IDs of extensions you want installed when the container is created.
+	"extensions": [
+		"dbaeumer.vscode-eslint",
+		"ms-vscode.vscode-typescript-tslint-plugin",
+		"ritwickdey.liveserver"
+	],
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	"forwardPorts": [
+		5500
+	],
+	// Use 'postCreateCommand' to run commands after the container is created.
+	// "postCreateCommand": "yarn install",
+	// Uncomment to connect as a non-root user. See https://aka.ms/vscode-remote/containers/non-root.
+	// "remoteUser": "node"
+}

01 - JavaScript Drum Kit/index-START.html

@@ -57,10 +57,6 @@
   <audio data-key="75" src="sounds/tom.wav"></audio>
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
-<script>
-
-</script>
-
-
+  <script src="typescripts.js"></script>
 </body>
 </html>

01 - JavaScript Drum Kit/typescripts.js

@@ -0,0 +1,17 @@
+var keys = document.querySelector('.keys');
+function handleKey(e) {
+    var audio = document.querySelector("audio[data-key=\"" + e.keyCode + "\"]");
+    if (!audio)
+        return;
+    var key = document.querySelector(".key[data-key=\"" + e.keyCode + "\"]");
+    audio.currentTime = 0;
+    audio.play();
+    key.classList.add('playing');
+}
+function handleEnd(e) {
+    if (e.propertyName !== 'transform')
+        return;
+    e.target.classList.remove('playing');
+}
+document.addEventListener('keydown', handleKey);
+keys.addEventListener('transitionend', handleEnd);

01 - JavaScript Drum Kit/typescripts.ts

@@ -0,0 +1,35 @@
+/**
+ * JavaScript30 by Wes Bos, https://javascript30.com/
+ * TypeScript implementation by Will Wager https://willwager.dev
+ * Project: TypeScript Drum Kit
+ * Concepts:
+ *   keyCodes, Audio, transitionend events
+ * Key takeaways:
+ *   Attribute selectors, HTMLAudioElement properties and methods, classList usage, and
+ *   using transitionend events to keep the visuals in sync.
+ * Sidenotes:
+ *   keyCode is deprecated, but the replacement 'code' is not implemented in Edge and IE.
+ *   The sound is reset when pressed multiple times, but the visual state is not so there
+ *   is a flicker when holding the key.
+ */
+
+const keys = document.querySelector('.keys');
+
+function handleKey(e) {
+  const audio: HTMLAudioElement = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+  if (!audio) return;
+  const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
+  audio.currentTime = 0;
+  audio.play();
+
+  key.classList.add('playing');
+}
+
+// Updated to use event delegation here.
+function handleEnd(e) {
+  if (e.propertyName !== 'transform') return;
+  e.target.classList.remove('playing');
+}
+
+document.addEventListener('keydown', handleKey);
+keys.addEventListener('transitionend', handleEnd);

readme.md

@@ -1,7 +1,18 @@
 ![](https://javascript30.com/images/JS3-social-share.png)
 
+Will Wager's TypeScript solutions for Wes Bos's...
 # JavaScript30
 
+Run them yourself from a VS Code container!
+* Open in vscode and run `Remote Containers: Reopen in Container` from the command palette.
+* Build each TypeScript file with `tsc typescripts.ts` from each project's folder.
+  * All html files have been adjusted to look for typescripts.js.
+  * I use the options `--target es5 --removeComments` in my js builds.
+* Press ALT + L, ALT + O to start the Live Server extension and access the html files at http://localhost:5500 + the relative path.
+  * For example, to open the first project, go to (replace spaces with '20%' if your browser complains): `http://localhost:5500/01%20-%20JavaScript%20Drum%20Kit/index-START.html`
+
+----
+
 Starter Files + Completed solutions for the JavaScript 30 Day Challenge.
 
 Grab the course at [https://JavaScript30.com](https://JavaScript30.com)
@@ -39,7 +50,7 @@ Feel free to submit a PR adding a link to your own recaps, guides or reviews!
 * [Yusong Notes](https://sky172839465.github.io/course/js30) Records Yusong JS 30 days note and demo :star2:
 * [Ding's Implementation](https://github.com/Ding-Fan/javascript30) code and online demo
 * [Herminio Torres](https://github.com/herminiotorres/JavaScript30) lessons and tricks learned, and a [gh-page](https://herminiotorres.github.io/JavaScript30/) to see working all the mini-projects.
-* [Dmytro Borysovskyi](https://github.com/dimabory) says many thanks to for the course to Wes 🤝 It was incredible challenge 👌 The full repository with code available [here](https://github.com/dimabory/dimabory.github.io/tree/gh-pages/src/components/JavaScript30Days) and demos can be reached by the link to [gh-pages](https://dimabory.github.io/#/js30days) 👍👍👍 
+* [Dmytro Borysovskyi](https://github.com/dimabory) says many thanks to for the course to Wes 🤝 It was incredible challenge 👌 The full repository with code available [here](https://github.com/dimabory/dimabory.github.io/tree/gh-pages/src/components/JavaScript30Days) and demos can be reached by the link to [gh-pages](https://dimabory.github.io/#/js30days) 👍👍👍
 * [Kizito](https://github.com/akhilome/)'s follow along [repo](https://github.com/akhilome/js30) with [completed challenges](https://akhilome.github.io/js30) and [notes](https://akhilome.github.io/js30/notes).
 * [VannTile](https://github.com/vanntile)'s [repository](https://github.com/vanntile/JavaScript30) and [GitHub Pages showcase](https://vanntile.github.io/JavaScript30/). Thank you for a great ⌨️ experience.
 * [Alex Kim](https://github.com/Alex-K1m/js30-challenge) completed all the challenges. You can check them out at [github pages](https://alex-k1m.github.io/js30-challenge/).