timer done

index.html

@@ -6,7 +6,7 @@
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
         <link rel="stylesheet" href="style.css">
-        <!--<script src="timer.js"></script>-->
+        <script src="timer.js"></script>
         <!--<script src="navbar.js"></script>-->
         <title>DSZC Beregszászi Pál Technikum</title>
     </head>
@@ -14,7 +14,7 @@
         <header>
             <nav class="">
                 <div class="">
-                    <ul>
+                    <ul id="nav-item">
                         <li>Rólunk</li>
                         <li>Tanulóinknak</li>
                         <li>Hírek</li>
@@ -25,17 +25,12 @@
                     </ul>
                 </div>
             </nav>
-            <!-- Carousel -->
             <div id="carousel" class="carousel slide" data-bs-ride="carousel">
-            
-                <!-- Indicators/dots -->
                 <div class="carousel-indicators">
                   <button type="button" data-bs-target="#carousel" data-bs-slide-to="0" class="active"></button>
                   <button type="button" data-bs-target="#carousel" data-bs-slide-to="1"></button>
                   <button type="button" data-bs-target="#carousel" data-bs-slide-to="2"></button>
                 </div>
-            
-                <!-- The slideshow/carousel -->
                 <div class="carousel-inner">
                   <div class="carousel-item active">
                     <img src="res/bereg/1.png" alt="Los Angeles" class="kep d-block w-75">
@@ -47,7 +42,6 @@
                     <img src="res/bereg/3.png" alt="New York" class="kep d-block w-75">
                   </div>
                 </div>
-                <!-- Left and right controls/icons -->
                 <button class="carousel-control-prev" type="button" data-bs-target="#carousel" data-bs-slide="prev">
                   <span class="carousel-control-prev-icon"></span>
                 </button>
@@ -55,7 +49,15 @@
                   <span class="carousel-control-next-icon"></span>
                 </button>
             </div>
-            <div id="timer"></div>
+            <div id="timer">
+              <ul id="counter"><br><br>
+                <h1>Következő szünetig hátralévő idő</h1>
+                <li id="nap"></li>
+                <li id="ora"></li>
+                <li id="perc"></li>
+                <li id="mperc"></li>
+              </ul>
+            </div>
         </header>
         <div id="content">
             <aside id="left">

style.css

@@ -3,7 +3,7 @@ body{
   color: yellow;
 }
 
-li{
+#nav-item li{
   list-style-type: none;
   float: left;
   padding: 1%;
@@ -13,14 +13,14 @@ ul{
   /*margin-left: 20%;*/
 }
 
-li{
-
+#nav-item li{
+  border-right: 1px solid white;
 }
-li:first-child{
+#nav-item li:first-child{
   border-left: 1px solid white;
   margin-left: 20%;
 }
-li:last-child{
+#nav-item li:last-child{
   border-right: 1px solid white;
 }
 
@@ -31,6 +31,25 @@ nav{
   width: 100%;
 }
 
+#counter li{
+  float: left;
+  list-style-type: none;
+  font-size: 30px;
+  padding-left: 2%;
+}
+
+#counter h1{
+  margin-left: 1%;
+}
+
+#nap{
+  margin-left: 5%;
+}
+
+#timer{
+  margin-left: 25%;
+}
+
 .kep{
   margin-left: 13%;
 }

timer.js

@@ -13,10 +13,21 @@ function updateTimer(){
     m = mins - hours * 60;
     s = secs - mins * 60;
 
-    document.getElementById("timer").innerHTML = 
-        '<div>' + d + '<span>Nap</span></div>' + 
-        '<div>' + h + '<span>Ora</span></div>' + 
-        '<div>' + m + '<span>Perc</span></div>' + 
-        '<div>' + s + '<span>Masodperc</span></div>';
+    d_sz = " " + d;    
+    h_sz = " " + h;    
+    m_sz = " " + m;    
+    s_sz = " " + s;    
+
+    document.getElementById("nap").innerHTML = 
+        '<div>' + d_sz + '<span> Nap </span></div> ';
+    
+    document.getElementById("ora").innerHTML = 
+        '<div>' + h_sz + '<span> Ora </span></div> ';
+
+    document.getElementById("perc").innerHTML = 
+        '<div>' + m_sz + '<span> Perc </span></div> ';
+
+    document.getElementById("mperc").innerHTML = 
+        '<div>' + s_sz + '<span> Masodperc </span></div>';
 }
 setInterval('updateTimer()', 1000);