Typing game!
+Practice your typing skills with a quote from Sherlock Holmes. Click **start** to begin!
+ + +
+
+
+
+
+
+ Welldone! May the force be with you!
+
+
+
+
+
+
+
+
+
+CSS:
+.highlight {
+ background-color: yellow;
+ }
+
+ .error {
+ background-color: lightcoral;
+ border: red;
+ }
+ .sep{
+ margin-top: 20px;
+ margin-bottom: 30px;
+ width: 500px;
+ border: 1px solid black;
+ }
+ .box {
+ width: 500px;
+ background-color: lightgreen;
+ height: 170px;
+ border: 1px solid black;
+ padding: 10px;
+ text-align: center;
+ margin: 10px;
+ }
+ .x{
+ margin-left: 480px;
+ }
+ Java:
+ const quotes = [
+
+ 'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.',
+ 'There is nothing more deceptive than an obvious fact.',
+ 'I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation.',
+ 'I never make exceptions. An exception disproves the rule.',
+ 'What one man can invent another can discover.',
+ 'Nothing clears up a case so much as stating it to another person.',
+ 'Education never ends, Watson. It is a series of lessons, with the greatest for the last.',
+];
+// store the list of words and the index of the word the player is currently typing
+let words = [];
+let wordIndex = 0;
+// the starting time
+let startTime = Date.now();
+// page elements
+const quoteElement = document.getElementById('quote');
+const messageElement = document.getElementById('message');
+const typedValueElement = document.getElementById('typed-value');
+const WinBox=document.getElementById('winbox');
+const close = document.getElementById("close");
+
+let k=false;
+
+
+close.addEventListener('click',() => {
+ WinBox.style.visibility = 'hidden';
+})
+
+document.getElementById('start').addEventListener('click', () => {
+ // get a quote
+ const quoteIndex = Math.floor(Math.random() * quotes.length);
+ const quote = quotes[quoteIndex];
+ // Put the quote into an array of words
+ words = quote.split(' ');
+ // reset the word index for tracking
+ wordIndex = 0;
+ WinBox.style.visibility = 'hidden';
+ // UI updates
+ // Create an array of span elements so we can set a class
+ const spanWords = words.map(function(word) { return `${word} `});
+ // Convert into string and set as innerHTML on quote display
+ quoteElement.innerHTML = spanWords.join('');
+ // Highlight the first word
+ quoteElement.childNodes[0].className = 'highlight';
+ // Clear any prior messages
+ messageElement.innerText = '';
+ typedValueElement.disabled = false;
+ // Clear the textbox
+ typedValueElement.value = '';
+ // set focus
+ typedValueElement.focus();
+ // set the event handler
+ // Start the timer
+ startTime = new Date().getTime();
+ });
+
+
+ // at the end of script.js
+typedValueElement.addEventListener('input', () => {
+ // Get the current word
+ const currentWord = words[wordIndex];
+ // get the current value
+ const typedValue = typedValueElement.value;
+
+ if (typedValue === currentWord && wordIndex === words.length - 1) {
+ // end of sentence
+ // Display success
+ const elapsedTime = new Date().getTime() - startTime;
+ // Setup the textbox
+ const HighScore = localStorage.getItem("hs");
+ let message = ``;
+ if(HighScore != null){
+ message= `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.Current highscore is ${HighScore}`;
+ }
+ if(HighScore>elapsedTime / 1000 || HighScore == null){
+ message = `CONGRATULATIONS! You finished with a new Highscore of ${elapsedTime / 1000} seconds.`;
+ localStorage.setItem("hs",elapsedTime/1000);
+ }
+ messageElement.innerText = message;
+ WinBox.style.visibility = 'visible';
+ //Challenges
+ typedValueElement.disabled = true;
+ typedValueElement.removeEventListener('input');
+
+
+
+ } else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) {
+ // end of word
+ // clear the typedValueElement for the new word
+ typedValueElement.value = '';
+ // move to the next word
+ wordIndex++;
+ // reset the class name for all elements in quote
+ for (const wordElement of quoteElement.childNodes) {
+ wordElement.className = '';
+ }
+ // highlight the new word
+ quoteElement.childNodes[wordIndex].className = 'highlight';
+ } else if (currentWord.startsWith(typedValue)) {
+ // currently correct
+ // highlight the next word
+ typedValueElement.className = '';
+ } else {
+ // error state
+ typedValueElement.className = 'error';
+ }
+ });
+
+
+
+
+
+ Assignment:
+
+ For the Assignment I made a game where your objective is to find the hidden number based on the clues provided for your previous guess.
+ There are three types of clues:
+ Red digits indicate the number of digits in your guess that are in the correct position and have the correct value.
+ Yellow digits show how many digits are present in the hidden number but are in the wrong position
+ Green digits represent the number of digits in your guess that are repeated in the hidden number.
+ Use these clues to narrow down guesses and discover the hidden number!Sc
+
+ScreenShots:
+
+
+
+
+Code:
+HTML
+
+
+
+ Congrats You Completed in 25secs
+-
+
-
+-
+-
+-
+How to Play:
+How to Play:
+ In this game, your objective is to find the hidden number based on the clues provided for your previous guess.
+ There are three types of clues:
+ Red digits indicate the number of digits in your guess that are in the correct position and have the correct value.
+ Yellow digits show how many digits are present in the hidden number but are in the wrong position.
+ Green digits represent the number of digits in your guess that are repeated in the hidden number.
+ Use these clues to narrow down your guesses and discover the hidden number!
+
Your Guess:
+ + +Previous Guesses:
+-
+
+
Typing game!
+Practice your typing skills with a quote from Sherlock Holmes. Click **start** to begin!
+ + +
+
+
+
+
+
+ Welldone! May the force be with you!
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/3-typing-game/script.js b/3-typing-game/script.js
new file mode 100644
index 0000000..1b79c54
--- /dev/null
+++ b/3-typing-game/script.js
@@ -0,0 +1,108 @@
+const quotes = [
+
+ 'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.',
+ 'There is nothing more deceptive than an obvious fact.',
+ 'I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation.',
+ 'I never make exceptions. An exception disproves the rule.',
+ 'What one man can invent another can discover.',
+ 'Nothing clears up a case so much as stating it to another person.',
+ 'Education never ends, Watson. It is a series of lessons, with the greatest for the last.',
+];
+// store the list of words and the index of the word the player is currently typing
+let words = [];
+let wordIndex = 0;
+// the starting time
+let startTime = Date.now();
+// page elements
+const quoteElement = document.getElementById('quote');
+const messageElement = document.getElementById('message');
+const typedValueElement = document.getElementById('typed-value');
+const WinBox=document.getElementById('winbox');
+const close = document.getElementById("close");
+
+let k=false;
+
+
+close.addEventListener('click',() => {
+ WinBox.style.visibility = 'hidden';
+})
+
+document.getElementById('start').addEventListener('click', () => {
+ // get a quote
+ const quoteIndex = Math.floor(Math.random() * quotes.length);
+ const quote = quotes[quoteIndex];
+ // Put the quote into an array of words
+ words = quote.split(' ');
+ // reset the word index for tracking
+ wordIndex = 0;
+ WinBox.style.visibility = 'hidden';
+ // UI updates
+ // Create an array of span elements so we can set a class
+ const spanWords = words.map(function(word) { return `${word} `});
+ // Convert into string and set as innerHTML on quote display
+ quoteElement.innerHTML = spanWords.join('');
+ // Highlight the first word
+ quoteElement.childNodes[0].className = 'highlight';
+ // Clear any prior messages
+ messageElement.innerText = '';
+ typedValueElement.disabled = false;
+ // Clear the textbox
+ typedValueElement.value = '';
+ // set focus
+ typedValueElement.focus();
+ // set the event handler
+ // Start the timer
+ startTime = new Date().getTime();
+ });
+
+
+ // at the end of script.js
+typedValueElement.addEventListener('input', () => {
+ // Get the current word
+ const currentWord = words[wordIndex];
+ // get the current value
+ const typedValue = typedValueElement.value;
+
+ if (typedValue === currentWord && wordIndex === words.length - 1) {
+ // end of sentence
+ // Display success
+ const elapsedTime = new Date().getTime() - startTime;
+ // Setup the textbox
+ const HighScore = localStorage.getItem("hs");
+ let message = ``;
+ if(HighScore != null){
+ message= `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.Current highscore is ${HighScore}`;
+ }
+ if(HighScore>elapsedTime / 1000 || HighScore == null){
+ message = `CONGRATULATIONS! You finished with a new Highscore of ${elapsedTime / 1000} seconds.`;
+ localStorage.setItem("hs",elapsedTime/1000);
+ }
+ messageElement.innerText = message;
+ WinBox.style.visibility = 'visible';
+ //Challenges
+ typedValueElement.disabled = true;
+ typedValueElement.removeEventListener('input');
+
+
+
+ } else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) {
+ // end of word
+ // clear the typedValueElement for the new word
+ typedValueElement.value = '';
+ // move to the next word
+ wordIndex++;
+ // reset the class name for all elements in quote
+ for (const wordElement of quoteElement.childNodes) {
+ wordElement.className = '';
+ }
+ // highlight the new word
+ quoteElement.childNodes[wordIndex].className = 'highlight';
+ } else if (currentWord.startsWith(typedValue)) {
+ // currently correct
+ // highlight the next word
+ typedValueElement.className = '';
+ } else {
+ // error state
+ typedValueElement.className = 'error';
+ }
+ });
\ No newline at end of file
diff --git a/3-typing-game/style.css b/3-typing-game/style.css
new file mode 100644
index 0000000..c69b562
--- /dev/null
+++ b/3-typing-game/style.css
@@ -0,0 +1,27 @@
+.highlight {
+ background-color: yellow;
+ }
+
+ .error {
+ background-color: lightcoral;
+ border: red;
+ }
+ .sep{
+ margin-top: 20px;
+ margin-bottom: 30px;
+ width: 500px;
+ border: 1px solid black;
+ }
+ .box {
+ width: 500px;
+ background-color: lightgreen;
+ height: 170px;
+ border: 1px solid black;
+ padding: 10px;
+ text-align: center;
+ margin: 10px;
+ }
+ .x{
+ margin-left: 480px;
+ }
+
\ No newline at end of file
diff --git a/4-bank-project/Solution.md b/4-bank-project/Solution.md
new file mode 100644
index 0000000..fabbabe
--- /dev/null
+++ b/4-bank-project/Solution.md
@@ -0,0 +1,147 @@
+```
+This is the Documentation for Bank Project
+
+
+1-template-route
+Challenge:Add a new template and route for a third page that shows the credits for this app.
+
+This Challenge was pretty straight forward and simple i created the following template for the credits
+
+ Congrats You Completed in 25secs
+Credits
+This App was made by:
+Name
Name2
Name3
Loading...
+
+
+
+
+ 
+
+
+
+
+
+ Your Pefect Banking Partner!
+Login
+ +Or
+Register
+ +
+
+
+
+ Balance:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Bank App
+ Logout + Credits +
+
+
+ Transactions
+ +| Date | +Object | +Amount | +
|---|
Credits
+This App was made by:
+Name
Name2
Name3