Skip to content

Commit 9abfb46

Browse files
committed
foundation
1 parent 3314d45 commit 9abfb46

File tree

8 files changed

+371
-0
lines changed

8 files changed

+371
-0
lines changed

package-lock.json

+31
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

public/.DS_Store

6 KB
Binary file not shown.

public/Media/keySound.m4a

4.67 KB
Binary file not shown.

public/app.js

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
"use strict";
2+
let ul = document.querySelector("ul");
3+
let frontOfStackElem = ul.firstElementChild;
4+
const keySound = document.querySelector("#key_sound");
5+
const wrongSound = document.querySelector("#wrong_sound");
6+
nextSet();
7+
document.addEventListener("keydown", (event) => {
8+
let currPress = event.key;
9+
const frontOfStackLetter = frontOfStackElem === null || frontOfStackElem === void 0 ? void 0 : frontOfStackElem.innerHTML;
10+
currPress = convertSpecial(currPress);
11+
if (currPress === frontOfStackLetter && frontOfStackElem !== null) {
12+
//correct key
13+
isCorrect(frontOfStackElem, true);
14+
frontOfStackElem = moveToNext(frontOfStackElem);
15+
return;
16+
}
17+
else if (currPress === " " &&
18+
frontOfStackLetter === "" &&
19+
frontOfStackElem !== null) {
20+
//correct space key
21+
frontOfStackElem = moveToNext(frontOfStackElem);
22+
return;
23+
}
24+
else if (currPress !== "Shift" && frontOfStackElem !== null) {
25+
//incorrect key
26+
isCorrect(frontOfStackElem, false);
27+
return;
28+
}
29+
});
30+
function nextSet() {
31+
clearList();
32+
const snippet = `const wrongSound = document.querySelector("#wrong_sound") as HTMLAudioElement;`;
33+
const itemsArr = snippet.split("");
34+
populateList(itemsArr);
35+
frontOfStackElem = ul.firstElementChild;
36+
if (frontOfStackElem !== null) {
37+
return frontOfStackElem;
38+
}
39+
else {
40+
throw new Error("Ul has no child element");
41+
}
42+
}
43+
function clearList() {
44+
while (ul.firstChild) {
45+
ul.removeChild(ul.firstChild);
46+
}
47+
}
48+
function populateList(itemsArr) {
49+
itemsArr.forEach((item) => {
50+
let li = document.createElement("li");
51+
if (item === " ") {
52+
item = " ";
53+
}
54+
li.appendChild(document.createTextNode(item));
55+
ul.appendChild(li);
56+
});
57+
}
58+
function isCorrect(frontOfStackElem, correct) {
59+
if (correct) {
60+
keySound.currentTime = 0;
61+
keySound.play();
62+
frontOfStackElem.classList.remove("incorrect");
63+
frontOfStackElem.classList.add("correct");
64+
}
65+
else if (!correct) {
66+
wrongSound.currentTime = 0;
67+
wrongSound.play();
68+
frontOfStackElem.classList.add("incorrect");
69+
}
70+
}
71+
function moveToNext(frontOfStackElem) {
72+
if (frontOfStackElem.nextElementSibling === null) {
73+
frontOfStackElem = nextSet();
74+
return frontOfStackElem;
75+
}
76+
return frontOfStackElem.nextElementSibling;
77+
}
78+
function convertSpecial(currPress) {
79+
switch (currPress) {
80+
case "&":
81+
if (frontOfStackElem.innerHTML === "&") {
82+
return "&";
83+
}
84+
case ">":
85+
if (frontOfStackElem.innerHTML === ">") {
86+
return ">";
87+
}
88+
case "<":
89+
if (frontOfStackElem.innerHTML === "&lt;") {
90+
return "&lt;";
91+
}
92+
default:
93+
return currPress;
94+
}
95+
}

public/index.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Touch typing for programmers</title>
8+
<link rel="stylesheet" href="./styles.css" />
9+
</head>
10+
<body>
11+
<pre>
12+
<ul>
13+
</ul>
14+
</pre>
15+
<audio id="key_sound" src="Media/keySound.m4a"></audio>
16+
<audio id="wrong_sound" src="Media/wrongSound.mp3"></audio>
17+
18+
<script src="app.js"></script>
19+
</body>
20+
</html>

public/styles.css

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
body {
2+
background-color: rgb(49, 42, 89);
3+
}
4+
5+
ul {
6+
display: flex;
7+
flex-direction: row;
8+
}
9+
10+
ul > li {
11+
display: inline-block;
12+
font-size: xx-large;
13+
color: aliceblue;
14+
}
15+
16+
.correct {
17+
color: greenyellow;
18+
}
19+
20+
.incorrect {
21+
color: rgb(247, 93, 76);
22+
}

src/app.ts

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
let ul = document.querySelector("ul")!;
2+
let frontOfStackElem = ul.firstElementChild!;
3+
const keySound = document.querySelector("#key_sound") as HTMLAudioElement;
4+
const wrongSound = document.querySelector("#wrong_sound") as HTMLAudioElement;
5+
6+
nextSet();
7+
8+
document.addEventListener("keydown", (event) => {
9+
let currPress = event.key;
10+
const frontOfStackLetter = frontOfStackElem?.innerHTML;
11+
12+
currPress = convertSpecial(currPress);
13+
14+
if (currPress === frontOfStackLetter && frontOfStackElem !== null) {
15+
//correct key
16+
isCorrect(frontOfStackElem, true);
17+
frontOfStackElem = moveToNext(frontOfStackElem);
18+
return;
19+
} else if (
20+
currPress === " " &&
21+
frontOfStackLetter === "" &&
22+
frontOfStackElem !== null
23+
) {
24+
//correct space key
25+
frontOfStackElem = moveToNext(frontOfStackElem);
26+
return;
27+
} else if (currPress !== "Shift" && frontOfStackElem !== null) {
28+
//incorrect key
29+
isCorrect(frontOfStackElem, false);
30+
return;
31+
}
32+
});
33+
34+
function nextSet() {
35+
clearList();
36+
const snippet = `const wrongSound = document.querySelector("#wrong_sound") as HTMLAudioElement;`;
37+
const itemsArr = snippet.split("");
38+
populateList(itemsArr);
39+
frontOfStackElem = ul.firstElementChild!;
40+
if (frontOfStackElem !== null) {
41+
return frontOfStackElem;
42+
} else {
43+
throw new Error("Ul has no child element");
44+
}
45+
}
46+
47+
function clearList() {
48+
while (ul.firstChild) {
49+
ul.removeChild(ul.firstChild);
50+
}
51+
}
52+
53+
function populateList(itemsArr: string[]) {
54+
itemsArr.forEach((item) => {
55+
let li = document.createElement("li");
56+
if (item === " ") {
57+
item = " ";
58+
}
59+
li.appendChild(document.createTextNode(item));
60+
ul.appendChild(li);
61+
});
62+
}
63+
64+
function isCorrect(frontOfStackElem: Element, correct: Boolean) {
65+
if (correct) {
66+
keySound.currentTime = 0;
67+
keySound.play();
68+
frontOfStackElem.classList.remove("incorrect");
69+
frontOfStackElem.classList.add("correct");
70+
} else if (!correct) {
71+
wrongSound.currentTime = 0;
72+
wrongSound.play();
73+
frontOfStackElem.classList.add("incorrect");
74+
}
75+
}
76+
77+
function moveToNext(frontOfStackElem: Element) {
78+
if (frontOfStackElem.nextElementSibling === null) {
79+
frontOfStackElem = nextSet();
80+
return frontOfStackElem;
81+
}
82+
return frontOfStackElem.nextElementSibling;
83+
}
84+
85+
function convertSpecial(currPress: string) {
86+
switch (currPress) {
87+
case "&":
88+
if (frontOfStackElem.innerHTML === "&amp;") {
89+
return "&amp;";
90+
}
91+
case ">":
92+
if (frontOfStackElem.innerHTML === "&gt;") {
93+
return "&gt;";
94+
}
95+
case "<":
96+
if (frontOfStackElem.innerHTML === "&lt;") {
97+
return "&lt;";
98+
}
99+
default:
100+
return currPress;
101+
}
102+
}

tsconfig.json

+101
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
{
2+
"compilerOptions": {
3+
/* Visit https://aka.ms/tsconfig.json to read more about this file */
4+
5+
/* Projects */
6+
// "incremental": true, /* Enable incremental compilation */
7+
// "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
8+
// "tsBuildInfoFile": "./", /* Specify the folder for .tsbuildinfo incremental compilation files. */
9+
// "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects */
10+
// "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
11+
// "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
12+
13+
/* Language and Environment */
14+
"target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
15+
// "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
16+
// "jsx": "preserve", /* Specify what JSX code is generated. */
17+
// "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */
18+
// "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
19+
// "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */
20+
// "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
21+
// "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.` */
22+
// "reactNamespace": "", /* Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit. */
23+
// "noLib": true, /* Disable including any library files, including the default lib.d.ts. */
24+
// "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */
25+
26+
/* Modules */
27+
"module": "commonjs" /* Specify what module code is generated. */,
28+
// "rootDir": "./", /* Specify the root folder within your source files. */
29+
// "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */
30+
// "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */
31+
// "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */
32+
// "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */
33+
// "typeRoots": [], /* Specify multiple folders that act like `./node_modules/@types`. */
34+
// "types": [], /* Specify type package names to be included without being referenced in a source file. */
35+
// "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
36+
// "resolveJsonModule": true, /* Enable importing .json files */
37+
// "noResolve": true, /* Disallow `import`s, `require`s or `<reference>`s from expanding the number of files TypeScript should add to a project. */
38+
39+
/* JavaScript Support */
40+
// "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */
41+
// "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */
42+
// "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`. */
43+
44+
/* Emit */
45+
// "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
46+
// "declarationMap": true, /* Create sourcemaps for d.ts files. */
47+
// "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */
48+
// "sourceMap": true, /* Create source map files for emitted JavaScript files. */
49+
// "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */
50+
"outDir": "./public" /* Specify an output folder for all emitted files. */,
51+
// "removeComments": true, /* Disable emitting comments. */
52+
// "noEmit": true, /* Disable emitting files from a compilation. */
53+
// "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
54+
// "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types */
55+
// "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
56+
// "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */
57+
// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
58+
// "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */
59+
// "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */
60+
// "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
61+
// "newLine": "crlf", /* Set the newline character for emitting files. */
62+
// "stripInternal": true, /* Disable emitting declarations that have `@internal` in their JSDoc comments. */
63+
// "noEmitHelpers": true, /* Disable generating custom helper functions like `__extends` in compiled output. */
64+
// "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */
65+
// "preserveConstEnums": true, /* Disable erasing `const enum` declarations in generated code. */
66+
// "declarationDir": "./", /* Specify the output directory for generated declaration files. */
67+
// "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
68+
69+
/* Interop Constraints */
70+
// "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */
71+
// "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */
72+
"esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */,
73+
// "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
74+
"forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
75+
76+
/* Type Checking */
77+
"strict": true /* Enable all strict type-checking options. */,
78+
// "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied `any` type.. */
79+
// "strictNullChecks": true, /* When type checking, take into account `null` and `undefined`. */
80+
// "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
81+
// "strictBindCallApply": true, /* Check that the arguments for `bind`, `call`, and `apply` methods match the original function. */
82+
// "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */
83+
// "noImplicitThis": true, /* Enable error reporting when `this` is given the type `any`. */
84+
// "useUnknownInCatchVariables": true, /* Type catch clause variables as 'unknown' instead of 'any'. */
85+
// "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */
86+
// "noUnusedLocals": true, /* Enable error reporting when a local variables aren't read. */
87+
// "noUnusedParameters": true, /* Raise an error when a function parameter isn't read */
88+
// "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */
89+
// "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */
90+
// "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */
91+
// "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */
92+
// "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */
93+
// "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type */
94+
// "allowUnusedLabels": true, /* Disable error reporting for unused labels. */
95+
// "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */
96+
97+
/* Completeness */
98+
// "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */
99+
"skipLibCheck": true /* Skip type checking all .d.ts files. */
100+
}
101+
}

0 commit comments

Comments
 (0)