button panel on the TV

SergioTorresGarcia · Feb 3, 2024 · 7dd00b8 · 7dd00b8
1 parent e9cf7d7
commit 7dd00b8
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 20 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -204,13 +204,24 @@ button {
     text-align: center;
     vertical-align: middle;
 }
+.panelBtns {
+    position: absolute;
+    margin-top: -30em;
+    margin-left: 56em;
+    display: flex;
+    flex-direction: column;
+    z-index: 999;
+}
+.btnTV {
+    margin: 0.2em;
+
+    z-index: 999;
+    background-color: red;
+}
 
 .btn span {
     margin-top: 2.5em;
 }
-.numbers {
-    scale: 1.5;
-}
 
 .blackScreen {
     background-color: black;
@@ -219,27 +230,27 @@ button {
     background-image: url(../img/tvstatic.gif);
     background-size:cover;
 }
-.ch1{
+.ch1, .cc1{
     background-image: url(../img/ch1.jpeg);
     background-size:cover;
 }
-.ch2{
+.ch2, .cc2{
     background-image: url(../img/ch2.jpeg);
     background-size:cover;
 }
-.ch3{
+.ch3, .cc3{
     background-image: url(../img/ch3.jpeg);
     background-size:cover;
 }
-.ch4{
+.ch4, .cc4{
     background-image: url(../img/ch4.jpg);
     background-size:cover;
 }
-.ch5{
+.ch5, .cc5{
     background-image: url(../img/ch5.jpeg);
     background-size:cover;
 }
-.ch6{
+.ch6, .cc6{
     background-image: url(../img/ch6.jpeg);
     background-size:cover;
 }

diff --git a/index.html b/index.html
@@ -29,6 +29,47 @@
                 <div id="displayChannel"></div>
                 <div id="displayDay"></div>
                 <div id="displayTime"></div>
+
+                <div class="panelBtns">
+
+                    <button type="button">
+                        <div class="btnTV" id="btt1">
+                            <div>1</div>
+                        </div>
+                    </button>
+                    <button type="button">
+                        <div class="btnTV" id="btt2">
+                            <div>2</div>
+                        </div>
+                    </button>
+                    <button type="button">
+                        <div class="btnTV" id="btt3">
+                            <div>3</div>
+                        </div>
+                    </button>
+                    <button type="button">
+                        <div class="btnTV" id="btt4">
+                            <div>4</div>
+                        </div>
+                    </button>
+                    <button type="button">
+                        <div class="btnTV" id="btt5">
+                            <div>5</div>
+                        </div>
+                    </button>
+                    <button type="button">
+                        <div class="btnTV" id="btt6">
+                            <div>6</div>
+                        </div>
+                    </button>
+
+                </div>
+
+
+
+
+
+
             </div>
 
         </div>
@@ -65,13 +106,13 @@
                                 <button type="button">
                                     <div class="btn" id="btn1">
                                         <div>CH</div>
-                                        <div class="numbers">1</div>
+                                        <div>1</div>
                                     </div>
                                 </button>
                                 <button type="button">
                                     <div class="btn" id="btn2">
                                         <div>CH</div>
-                                        <div class="numbers">2</div>
+                                        <div>2</div>
                                     </div>
                                 </button>
 
@@ -80,27 +121,27 @@
                                 <button type="button">
                                     <div class="btn" id="btn3">
                                         <div>CH</div>
-                                        <div class="numbers">3</div>
+                                        <div>3</div>
+                                    </div>
+                                </button>
+                                <button type="button">
+                                    <div class="btn" id="btn4">
+                                        <div>CH</div>
+                                        <div>4</div>
                                     </div>
                                 </button>
-                                <a href="#"><button type="button">
-                                        <div class="btn" id="btn4">
-                                            <div>CH</div>
-                                            <div class="numbers">4</div>
-                                        </div>
-                                    </button></a>
                             </div>
                             <div class="colbtn">
                                 <button type="button">
                                     <div class="btn" id="btn5">
                                         <div>CH</div>
-                                        <div class="numbers">5</div>
+                                        <div>5</div>
                                     </div>
                                 </button>
                                 <button type="button">
                                     <div class="btn" id="btn6">
                                         <div>CH</div>
-                                        <div class="numbers">6</div>
+                                        <div>6</div>
                                     </div>
                                 </button>
                             </div>

diff --git a/js/main.js b/js/main.js
@@ -14,6 +14,12 @@ let lessVolume = document.getElementById("lessVolume")
 const allBtns = document.getElementsByClassName("btn")
 let arrayBtns = Array.from(allBtns)
 
+const tvBtns = document.getElementsByClassName("btnTV")
+let arrayTvBtns = Array.from(tvBtns)
+
+
+
+
 // STAMPS (channel, time, date)    .innerHTML = Date()">
 let displayChannelScreen = document.getElementById("displayChannelScreen")
 let displayChannel = document.getElementById("displayChannel")
@@ -91,3 +97,25 @@ arrayBtns.map(
     }
   }
   ))
+
+  arrayTvBtns.map(
+  item => item.addEventListener("click", (e) => {
+    let lastClass = image.classList[image.classList.length - 1];
+
+    if (lastClass != "blackScreen") {
+      image.classList.remove(lastClass);
+      signal.classList.remove("redDot");
+      signal.classList.add("greenDot");
+      displayDay.innerHTML = currentDate + " 1999";
+      displayTime.innerHTML = currentTime;
+
+      let num = item.id.slice(-1)
+
+      image.classList.add("cc" + num);
+      displayChannel.innerHTML = 'CHANNEL ' + num;
+      displayChannelScreen.innerHTML = 'CHANNEL ' + num;
+      setTimeout(function () { displayChannelScreen.innerHTML = '' }, 3000);
+
+    }
+  }
+  ))