Zach's git repos / purple
Still waiting for the New York Times to send me a bogus takedown notice
Give feedback on guess by color coding each letter
Browse Source
Saksham Mittal 2022-04-02
parent 991fb11 · commit 683863f
Diffstat
-rw-r--r--index.html2
-rw-r--r--script.js46
-rw-r--r--style.css4
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;
+}