project-thrilltyper/Keyboardval.html at main · Capstone-Projects-2024-Spring/project-thrilltyper · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typing Game</title>
<style>
  .correct { color: green; }
  .incorrect { color: red; }
</style>
</head>
<body>
<script>


// initalize

// this will be changed to the actually database later
const database = "Hello World";


// use to display database on the website and the input bar
const paragraphDiv = document.createElement('div');
const userInput = document.createElement('input');

// attruibes

paragraphDiv.id = 'paragraph';
userInput.type = 'text';
userInput.id = 'userInput';

// appeands the elements and add to web and discript

document.body.appendChild(paragraphDiv);
document.body.appendChild(userInput);


  // Set up and allow database discplay
  let index = 0;
  characterValidation();


  // validates the Users typed Character

  // logic of function- split into character > map over character > check index vs user input position > join back/ set HTML content
 function characterValidation() {

    // split into array of chars
    const paragraphText = database.split('').map((char, i) => {

    // If the index of the character is less than the current index of the user's input
    // set as the wrap char as correct
      if (i < index) {
        return `<span class="correct">${char}</span>`;

    // return character wrap
      } else if (i === index) {
        return `<span>${char}</span>`;
    // return as it is
      } else {
        return char;
      }

      // join back as a string
    }).join('');
    // set the hmlt to the new contruct phara
    paragraphDiv.innerHTML = paragraphText;
  }


// Listen for input events for real time data and input

userInput.addEventListener('input', function() {
    const inputText = this.value;
    const paragraphText = database.substring(0, inputText.length);

    if (inputText === paragraphText) {
      // Check if the input matches the corresponding portion of the paragraph
      this.classList.remove('incorrect');
      this.classList.add('correct');
      index = inputText.length;

      characterValidation();

    } else {
      this.classList.remove('correct');
      this.classList.add('incorrect');
    }
  });


</script>
</body>
</html>