volume buttons on TV. hover effect. missing JS

README.md

@@ -0,0 +1 @@
+deployed in pages: https://sergiotorresgarcia.github.io/Proyecto2-TV/

css/styles.css

@@ -10,7 +10,7 @@ body {
     display: flex;
     width: 100vw;
     max-height: 100vh;
-    /* background-color: rgb(148, 148, 148); */
+    background-color: rgb(148, 148, 148);
 }
 
 #image {    /* <<< ---------------- MAIN PICTURE - PROGRAMES -------------- */
@@ -36,7 +36,7 @@ body {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    /* background-color: rgb(148, 148, 148); */
+    background-color: rgb(148, 148, 148);
     width: 50em;
     height: 45.4em;
 }
@@ -61,6 +61,16 @@ body {
     background-color: rgba(255, 0, 0, 0.429);
 }
 
+.volLevel {
+    width: 3.5em;
+    height: 0.2em;
+    border: .1em solid lightgray;
+    position: absolute;
+    background-color: rgba(0, 255, 115, 0.429);
+    margin: 37em 0 0 52em;
+    z-index: 150;
+}
+
 #mando {
     border:1em solid black;
     background-color: rgb(112, 112, 112);
@@ -96,6 +106,9 @@ body {
     color: gray;
     font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
 }
+.grayText {
+    color: gray;
+}
 #displayChannelScreen {
     margin-top: -28em;
     margin-left: 30em;
@@ -267,3 +280,31 @@ button {
     background-size:cover;
 }
 
+#volBg {
+    width:4em;
+    height: 14em;
+    background-color: black;
+    z-index: 999;
+    position: absolute;
+    margin: 10.3em 0 0 50.5em;
+    display: flex;
+    flex-direction: column-reverse;
+}
+
+.levelVol {
+    margin: 0.3em 0.5em 0.3em 1.2em;
+    border-radius: 50%;
+    border:0.2em solid gray;
+    width:2em;
+    height:0.8em;
+    z-index: 999;
+    background-color: rgb(23, 23, 23);
+}
+.levelVol:hover {
+    background-color: rgb(7, 67, 1)
+}
+.levelVol>div {
+    padding-left:2.5em;
+    color: gray;
+
+}

index.html

@@ -15,6 +15,56 @@
             <!-- green light - lights up when TV is ON -->
             <div id="signal" class=""></div>
 
+            <!-- volume -->
+            <div id="volBg">
+                <div id="volLevel" class="">
+                    <button type="button">
+
+                        <div class="grayText">VOLUME</div>
+                        <br>
+                        <div class="levelVol" id="btt1">
+                            <div>8</div>
+                        </div>
+                    </button>
+                    <button type="button">
+                        <div class="levelVol" id="btt1">
+                            <div>7</div>
+                        </div>
+                    </button>
+                    <button type="button">
+                        <div class="levelVol" id="btt1">
+                            <div>6</div>
+                        </div>
+                    </button>
+                    <button type="button">
+                        <div class="levelVol" id="btt1">
+                            <div>5</div>
+                        </div>
+                    </button>
+                    <button type="button">
+                        <div class="levelVol" id="btt1">
+                            <div>4</div>
+                        </div>
+                    </button>
+                    <button type="button">
+                        <div class="levelVol" id="btt1">
+                            <div>3</div>
+                        </div>
+                    </button>
+                    <button type="button">
+                        <div class="levelVol" id="btt1">
+                            <div>2</div>
+                        </div>
+                    </button>            
+                    <button type="button">
+                        <div class="levelVol" id="btt2">
+                            <div>1</div>
+                        </div>
+                    </button>
+
+                </div>
+            </div>
+
             <!-- frame and screen -->
             <div id="screen" class="">
                 <div class="marco">
@@ -31,7 +81,7 @@
                 <div id="displayTime"></div>
 
                 <div class="panelBtns">
-                    
+
                     <button type="button">
                         <div class="btnTV" id="btt1">
                             <div>1</div>
@@ -64,7 +114,7 @@
                     </button>
 
                 </div>
-                    
+