text details added 80%

markdavepanado · Mar 12, 2020 · e7e60fe · e7e60fe
1 parent 7542376
commit e7e60fe
Show file tree

Hide file tree

Showing 5 changed files with 126 additions and 6 deletions.
diff --git a/images/fail.ico b/images/fail.ico
diff --git a/images/success.ico b/images/success.ico
diff --git a/index.html b/index.html
@@ -13,6 +13,11 @@
       href="https://fonts.googleapis.com/css?family=Alegreya+Sans+SC&display=swap"
       rel="stylesheet"
     />
+
+    <link
+      href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700&display=swap"
+      rel="stylesheet"
+    />
   </head>
 
   <body>
@@ -74,6 +79,23 @@ <h5 class="sound">Open Hi-Hat</h5>
           /></a>
         </section>
 
+        <section class="youpress-text-container">
+          <p>You Press:</p>
+
+          <div class="image-details-youpress-container">
+            <div class="image-youpress-container">
+              <img src="" alt="" />
+            </div>
+            <div class="details-youpress-container">
+              <h1 class="key-details-youpress">Key</h1>
+              <div class="message-details-youpress">
+                <h4>message</h4>
+              </div>
+              <h6 class="sound-details-youpress">Sound</h6>
+            </div>
+          </div>
+        </section>
+
         <section class="help-text-container">
           <h1>Keyboard Controls</h1>
           <hr />

diff --git a/sound.js b/sound.js
@@ -11,12 +11,39 @@ function play(e) {
 
     const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
 
-    if (!audio) return;
-    audio.currentTime = 0;
-    audio.play();
-    key.classList.add("playing");
-
-    addRemoveEventListener();
+    const keypress = document.getElementsByClassName("key-details-youpress");
+    const message = document.getElementsByClassName("message-details-youpress");
+    const imageMessage = document.getElementsByClassName(
+      "image-youpress-container"
+    );
+
+    const soundName = document.getElementsByClassName("sound-details-youpress");
+
+    keypress[0].innerHTML = truncate(e.key, 6);
+
+    message[0].style.display = "flex";
+
+    // console.log(message[0].children[0]);
+
+    // console.log(soundName[0]);
+    if (!audio) {
+      imageMessage[0].children[0].setAttribute("src", "images/fail.ico");
+      imageMessage[0].children[0].setAttribute("alt", "Wrong");
+      message[0].children[0].innerHTML = "Oops! wrong key";
+      soundName[0].innerHTML = "No sound";
+      return;
+    } else {
+      imageMessage[0].children[0].setAttribute("src", "images/success.ico");
+      imageMessage[0].children[0].setAttribute("alt", "Success");
+      message[0].children[0].innerHTML = "Good! keep going";
+      // key.children[0].innerHTML;
+      soundName[0].innerHTML = key.children[0].innerHTML;
+      audio.currentTime = 0;
+      audio.play();
+      key.classList.add("playing");
+
+      addRemoveEventListener();
+    }
   }
 }
 
@@ -81,3 +108,9 @@ window.setInterval(function() {
     //do nothing
   }
 }, 1000);
+
+// ==> for adding dots when string is too long
+function truncate(string, length, delimiter) {
+  delimiter = delimiter || "&hellip;";
+  return string.length > length ? string.substr(0, length) + delimiter : string;
+}
diff --git a/style.css b/style.css
@@ -237,6 +237,71 @@ body {
   font-weight: bolder;
 }
 
+.youpress-text-container {
+  padding: 20px;
+}
+
+.youpress-text-container,
+.youpress-text-container p {
+  font-family: "Source Sans Pro", sans-serif;
+}
+
+.youpress-text-container p {
+  color: #fdffe6;
+  letter-spacing: 0.15em;
+}
+
+.details-youpress-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-top: 15px;
+}
+
+.details-youpress-container h1 {
+  color: yellow;
+  font-size: 6em;
+  letter-spacing: 0.2em;
+  line-height: 0.9em;
+  word-break: break-all;
+}
+
+.details-youpress-container h4 {
+  color: #fdffe6;
+  font-size: 1.8em;
+  letter-spacing: 0.1em;
+  font-family: "Source Sans Pro", sans-serif;
+  font-weight: lighter;
+}
+
+.details-youpress-container h6 {
+  color: #fdffe6;
+  font-size: 1.6em;
+  font-weight: lighter;
+}
+
+.message-details-youpress {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+}
+
+.image-youpress-container img {
+  width: 30px;
+  margin: 0 10px;
+}
+.message-details-youpress h4 {
+  margin: 0 10px;
+  font-size: 1.5em;
+}
+
+.image-details-youpress-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 @media only screen and (max-width: 1024px) {
   .key-container .key {
     margin: 5px;