secret code app

MickShannahan · MickShannahan · commit 65a2b077f8cc · 2025-08-18T13:18:50.000-06:00
diff --git a/app.js b/app.js
@@ -0,0 +1,60 @@
+console.log("howdy")
+
+let secretCode = '🍕🍕🍱🍳🍢'
+let string = ''
+let inputElement = document.getElementById("user-input")
+let secretImgElement = document.getElementById("secret-img")
+console.log('inputElement', inputElement)
+// console.warn(secreteCode == string)
+
+function clickPizza() {
+  string += '🍕'
+  console.log('☝️🍕')
+  drawUserInputString()
+}
+
+
+function clickBento() {
+  string += '🍱'
+  console.log('☝️🍱')
+  drawUserInputString()
+}
+
+// NOTE foodItem is a parameter. A Block Scoped variable to this function that has no value
+// foodItem doesn't have a value until it's called
+// onclick="clickFoodButton('🫔')" : foodItem = '🫔'
+function clickFoodButton(foodItem) {
+  string += foodItem
+  console.log('☝️', foodItem)
+  drawUserInputString()
+}
+
+
+
+
+function checkCode() {
+  console.warn(secretCode == string)
+  // the comparison creates a BOOL for the if to check
+  // True runs the block
+  // False skips the block
+  if (secretCode == string) {
+    console.log("It's TRUE")
+    secretImgElement.classList.remove('d-none')
+    // secretImgElement.classList.add('d-none')
+  } else {
+    console.log("Else False")
+    string = ''
+    drawUserInputString()
+  }
+  // ! is NOT, so these are NOT equal
+  // if (secreteCode !== string) {
+  //   console.log("It's FALSE")
+  // }
+}
+
+
+
+function drawUserInputString() {
+  console.log("current user string", string)
+  inputElement.innerText = string
+}
diff --git a/index.html b/index.html
@@ -14,9 +14,43 @@
 <body data-bs-theme="dark">
   <nav>sup <i class="mdi mdi-cow-off"></i></nav>
 
+  <main class="container">
+    <section class="row ">
+      <div id="user-input" class="bg-black text-warning p-2 rounded">
+        user input goes here
+      </div>
+      <!-- To run a function, use a "event listener" -->
+      <button onclick="clickPizza()" class="col-md-3 btn btn-secondary">
+        🍕
+      </button>
+      <button onclick="clickBento()" class="col-md-3 btn btn-secondary">
+        🍱
+      </button>
+      <button onclick="clickFoodButton('🍿')" class="col-md-3 btn btn-secondary">
+        🍿
+      </button>
+      <button onclick="clickFoodButton('🫔')" class="col-md-3 btn btn-secondary">
+        🫔
+      </button>
+      <button onclick="clickFoodButton('🍳')" class="col-md-3 btn btn-secondary">
+        🍳
+      </button>
+      <button onclick="clickFoodButton('🍢')" class="col-md-3 btn btn-secondary">
+        🍢
+      </button>
+
+      <button onclick="checkCode()" class="col-md-6 btn btn-primary">
+        Enter Code 💷
+      </button>
+
+      <img id="secret-img" class="d-none img-fluid" src="jake.gif" alt="">
+    </section>
+  </main>
+
 
   <!-- NOTE script tags should load at the bottom of the body -->
-  <script src="example.js"></script>
+  <!-- <script src="example.js"></script> -->
+  <script src="app.js"></script>
 </body>
 
 </html>
diff --git a/jake.gif b/jake.gif
diff --git a/style.css b/style.css
@@ -1,4 +1,8 @@
 nav {
   min-height: 25px;
   color: aqua;
+}
+
+button:active {
+  background-color: aqua !important;
 }

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,8 @@`
`1`	`1`	`nav {`
`2`	`2`	`min-height: 25px;`
`3`	`3`	`color: aqua;`
	`4`	`+}`
	`5`	`+`
	`6`	`+button:active {`
	`7`	`+ background-color: aqua !important;`
`4`	`8`	`}`