first lesson done

paigekelsey · Apr 1, 2022 · bdfad83 · bdfad83
1 parent 656e651
commit bdfad83
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 28 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,18 @@
+{
+  "js/ts.implicitProjectConfig.strictNullChecks": true,
+  "js/ts.implicitProjectConfig.checkJs": true,
+  "javascript.suggest.completeFunctionCalls": true,
+  "javascript.referencesCodeLens.enabled": true,
+  "javascript.referencesCodeLens.showOnAllFunctions": true,
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "js/ts.implicitProjectConfig.experimentalDecorators": true,
+  "typescript.inlayHints.parameterNames.enabled": "all",
+  "typescript.inlayHints.variableTypes.enabled": true,
+  "typescript.inlayHints.propertyDeclarationTypes.enabled": true,
+  "typescript.inlayHints.parameterTypes.enabled": true,
+  "typescript.referencesCodeLens.enabled": true,
+  "typescript.referencesCodeLens.showOnAllFunctions": true,
+  "typescript.suggest.completeFunctionCalls": true,
+  "typescript.tsserver.experimental.enableProjectDiagnostics": true,
+  "typescript.tsserver.enableTracing": true
+}
diff --git a/first-project/index.html b/first-project/index.html
@@ -1,15 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>Understanding TypeScript</title>
-    <script src="js-only.js" defer></script>
-  </head>
-  <body>
-    <input type="number" id="num1" placeholder="Number 1" />
-    <input type="number" id="num2" placeholder="Number 2" />
-    <button>Add!</button>
-  </body>
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+		<title>Understanding TypeScript</title>
+		<script src="withts.js" defer></script>
+	</head>
+	<body>
+		<input type="number" id="num1" placeholder="Number 1" />
+		<input type="number" id="num2" placeholder="Number 2" />
+		<button>Add!</button>
+	</body>
 </html>
diff --git a/first-project/js-only.js b/first-project/js-only.js
diff --git a/first-project/plainjs.js b/first-project/plainjs.js
diff --git a/first-project/withts.js b/first-project/withts.js
@@ -0,0 +1,9 @@
+var button = document.querySelector('button');
+var input1 = document.getElementById('num1');
+var input2 = document.getElementById('num2');
+function add(num1, num2) {
+    return num1 + num2;
+}
+button.addEventListener('click', function () {
+    console.log(add(+input1.value, +input2.value));
+});
diff --git a/first-project/withts.ts b/first-project/withts.ts
@@ -0,0 +1,11 @@
+const button = document.querySelector('button');
+const input1 = document.getElementById('num1')! as HTMLInputElement;
+const input2 = document.getElementById('num2')! as HTMLInputElement;
+
+function add(num1: number, num2: number) {
+	return num1 + num2;
+}
+
+button.addEventListener('click', function () {
+	console.log(add(+input1.value, +input2.value));
+});