Give feedback on guess by color coding each letter

3 files changed, 40 insertions, 12 deletions

diff --git a/index.html b/index.html
index 39427fa..d4fd3cc 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,7 @@
 		<form onsubmit="checkAnswer(event)">
 			<input type="text" placeholder="Guess" autofocus>
 		</form>
-		<p id="result"></p>
+		<p id="hint"></p>
 		<p id="win"></p>
 		<p id="attempt"></p>
 	</body>
diff --git a/script.js b/script.js
index 6854ba5..600a5b2 100644
--- a/script.js
+++ b/script.js
@@ -1,34 +1,58 @@
 let answer = "hello";
-let form = document.querySelector('form');
+let len = answer.length;
 
 let input = document.querySelector('input');
-let name = document.querySelector('#result');
+
 let win = document.querySelector('#win');
+let hint = document.querySelector('#hint');
 let attempt = document.querySelector('#attempt');
 
 let exit = false;
 let tries = 0;
 
+function letterinstr(c) {
+	
+	let isin = false;
+
+	for (var i = 0; i < len; i++) {
+		if (c == answer.charAt(i)) {
+			isin = true;	
+			break;
+		}
+	}	
+
+	return isin;
+
+}
+
 function checkAnswer(event) {
 	event.preventDefault();
 	if (!exit) {
-		if (input.value.length == 5) {
-			tries++;
-			name.innerHTML = `${input.value}`;
+		if (input.value.length == len) {
 			if (input.value == answer) {
+				tries++;
 				win.innerHTML = "You won!";
 				exit = true;
 			} else {
+				tries++;
 				win.innerHTML = "Not quite right!";
+				hint.innerHTML += "</br>";
+				for (var i = 0; i < len; i++) {
+					if (input.value.charAt(i) != answer.charAt(i) && !(letterinstr(input.value.charAt(i))) ) {
+						hint.innerHTML += '<span style="color: #595959">' + input.value.charAt(i) + "</span>";
+					} else if (input.value.charAt(i) != answer.charAt(i) && (letterinstr(input.value.charAt(i))) ) {
+						hint.innerHTML += '<span style="color: #bebe00">' + input.value.charAt(i) + "</span>";
+					} else if (input.value.charAt(i) == answer.charAt(i)) {
+						hint.innerHTML += '<span style="color: #00ff00">' + input.value.charAt(i) + "</span>";
+					}
+				}
 			}
-			if (tries == 1) {
-				attempt.innerHTML = tries + " attempt taken";
-			} else {
-				attempt.innerHTML = tries + " attempts taken";
+
+			attempt.innerHTML = tries + " attempt";
+			if (tries > 1) {
+				attempt.innerHTML += "s";
 			}
 
-		} else {
-			name.innerHTML = "";
 		}
 	}
 }
diff --git a/style.css b/style.css
index 70d56db..da332c2 100644
--- a/style.css
+++ b/style.css
@@ -9,3 +9,7 @@ input {
 	background: #000000;
 	color: #ffffff;
 }
+
+span {
+	font-size: 2em;
+}