amfoss · PinJinx · Nov 18, 2024 · Nov 25, 2024 · Nov 29, 2024
diff --git a/3-typing-game/Assignment/index.html b/3-typing-game/Assignment/index.html
@@ -0,0 +1,46 @@
+<!-- inside index.html -->
+<html>
+<head>
+  <title>Guess the Text</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+
+
+<body>
+  <ls class="NumBox">
+    <ol class="Numbox">
+      <ls class="nums">
+        <H1 id="Num1">-</H1>
+      </ls>
+      <ls class="nums">
+        <H1 id="Num2">-</H1>
+      </ls>
+      <ls class="nums">
+        <H1 id="Num3">-</H1>
+      </ls>
+      <ls class="nums">
+        <H1 id="Num4">-</H1>
+      </ls>
+    </ol>
+    <div style="width: 10%;"></div>
+    <h1>How to Play:</h1>
+    <p >How to Play:
+      In this game, your objective is to find the hidden number based on the clues provided for your previous guess. <br>
+      There are three types of clues: <br>
+      <strong>Red</strong> digits indicate the number of digits in your guess that are in the<strong> correct position </strong>and have the correct value. <br>
+      <strong>Yellow</strong> digits show how many digits are present in the hidden number but are in the <strong>wrong position</strong>. <br>
+      <strong>Green</strong> digits represent the number of digits in your guess that are <strong>repeated</strong> in the hidden number. <br>
+      Use these clues to narrow down your guesses and discover the hidden number!<br>
+  </p>
+  </ls>
+  <h1>Your Guess:</h1>
+  <input style="margin-left: 65px;" type="text" placeholder="Enter your Guess:" class="box" id="guess" maxlength="4">
+  <button style="visibility: hidden;" id="rs">Restart?</button>
+  <h1 id="psh">Previous Guesses:</h1>
+  <ol class="PrevGuess" id="ps">
+
+  </ol>
+  <script src="script.js"></script>
+
+</body>
+</html>
diff --git a/3-typing-game/Assignment/script.js b/3-typing-game/Assignment/script.js
@@ -0,0 +1,139 @@
+const Num1 = document.getElementById('Num1');
+const Num2 = document.getElementById('Num2');
+const Num3 = document.getElementById('Num3');
+const Num4 = document.getElementById('Num4');
+const Prev_Guess = document.getElementById('ps');
+const Prev_Guess_Header = document.getElementById('psh');
+const inputbox = document.getElementById('guess');
+const RestartButton = document.getElementById('rs');
+
+let GuessNum = 0;
+
+let GuessAmt = 0;
+
+
+
+function UpdateNum(k){
+  Num1.innerText=k[0];
+  Num2.innerText=k[1];
+  Num3.innerText=k[2];
+  Num4.innerText=k[3];
+}
+
+RestartButton.addEventListener('click',()=>{
+  RestartButton.visibility='';
+  GuessNum=getRandomInt(1000,9999);
+  GuessAmt=0;
+  inputbox.value='';
+  UpdateNum('----');
+  while (Prev_Guess.firstChild) {
+    Prev_Guess.removeChild(Prev_Guess.lastChild);
+  }
+  Prev_Guess_Header.innerText = "Previous Guesses:";
+  Prev_Guess.style.visibility='visible';
+})
+
+
+inputbox.addEventListener("input",()=>{
+  let val=inputbox.value;
+
+
+
+  if(val.length > 3){
+    GuessAmt++;
+    //Do PrevGuess
+    inputbox.value="";
+    let ele =document.createElement("ls");
+    let ele2=document.createElement("ol");
+    ele2.className = "Numbox";
+    h1=document.createElement("h1");
+    h2=document.createElement("h1");
+    h3=document.createElement("h1");
+    h4=document.createElement("h1");
+    ele2.appendChild(h1);
+    ele2.appendChild(h2);
+    ele2.appendChild(h3);
+    ele2.appendChild(h4);
+
+    h2.className = "red";
+    h3.className="yellow";
+    h4.className="green";
+
+    ele.appendChild(ele2)
+    Prev_Guess.appendChild(ele);
+
+    //Set val of h1
+    GuessNum=GuessNum.toString();
+    let y=0;
+    let r=0;
+    let m=Num1.innerText+Num2.innerText+Num3.innerText+Num4.innerText;
+    let k=''
+    //Count a number repeating
+    let multi_occurence=''
+    let ml=0
+    console.log(GuessNum);
+    for(let i=0;i<val.length;i++){
+      if(GuessNum[i] == val[i]){
+        r+=1;
+        k+=GuessNum[i];
+        multi_occurence+=GuessNum[i];
+      }
+      else{
+        k+=m[i];
+        for(let j=0;j<val.length;j++){
+          if(val[j] == GuessNum[i]){
+            y+=1;
+            multi_occurence+=GuessNum[i];
+            if(count(multi_occurence,GuessNum[i])>1){
+              ml++;
+            }
+          }
+        }
+
+      }
+    }
+    console.log(k);
+    UpdateNum(k);
+
+    if(k === GuessNum){
+      Prev_Guess.style.visibility = 'hidden';
+
+      let hs = localStorage.getItem('hs');
+      RestartButton.style.visibility = 'visible';
+      if(hs === null || hs > GuessAmt){
+        Prev_Guess_Header.innerText = `You Won with ${GuessAmt} guesses.That is a new HIGHSCORE!`;
+        localStorage.setItem('hs',GuessAmt);
+      }
+      else{
+        Prev_Guess_Header.innerText = `You Won with ${GuessAmt} guesses.The High Score is ${hs}`;
+      }
+    }
+    //Setup Text 
+    h1.innerText=val;
+    h2.innerText = r;
+    h3.innerText= y;
+    h4.innerText=ml;
+
+  }
+})
+
+
+
+
+
+function count(str,count_term){
+  let c =0;
+  for(let j=0;j<str.length;j++){
+    if(str[j]==count_term){c++;}
+  }
+  return c;
+}
+
+function getRandomInt(min, max) {
+  const minCeiled = Math.ceil(min);
+  const maxFloored = Math.floor(max);
+  return Math.floor(Math.random() * (maxFloored - minCeiled + 1) + minCeiled); // The maximum is inclusive and the minimum is inclusive
+}
+
+
+GuessNum=getRandomInt(1000,9999);
diff --git a/3-typing-game/Assignment/style.css b/3-typing-game/Assignment/style.css
@@ -0,0 +1,28 @@
+.Numbox{
+  display: flex;
+  align-content: space-between;
+  gap: 50px;
+}
+.PrevGuess{
+  height: 500px;
+  overflow: scroll;
+  background-color: whitesmoke;
+}
+.Nums{
+  font-size: xx-large;
+}
+.red{
+  color: red;
+}
+.yellow{
+  color: yellow;
+}
+.green{
+  color: green;
+}
+.box{
+  height: 50px;
+  width: 190px;
+  border: 5px solid lightgreen;
+  border-radius: 5px;
+}