Add container for additional styling

tomcollis · tomcollis · commit c19d460a14b3 · 2025-01-23T21:00:26.000Z
diff --git a/public/main.js b/public/main.js
@@ -59,7 +59,7 @@ document.getElementById('next-item').addEventListener('click', () => {
 
 // Show Next Item
 function showNextItem() {
-    const container = document.getElementById('timer-container');
+    const container = document.getElementById('time-container');
     container.innerHTML = '';
     const timerElement = createTimerElement(agendaItems[currentItemIndex], timeItems[currentItemIndex]);
     container.appendChild(timerElement);
diff --git a/public/styles.css b/public/styles.css
@@ -8,11 +8,13 @@ body {
     margin: 0;
     background-color: #f0f0f0;
 }
-#timer-container {
+#time-container {
     text-align: center;
     margin-bottom: 20px;
 }
-.timer-item {
+#pri-container {
+    text-align: center;
+    min-width: 25%;
     background-color: #ffffff;
     border-radius: 10px;
     padding: 2rem;
@@ -63,7 +65,7 @@ footer {
     body {
         padding: 1rem;
     }
-    #timer-container {
+    #pri-container {
         width: 100%;
     }
     #next-item {
@@ -77,7 +79,7 @@ footer {
     body {
         padding: 2rem;
     }
-    #timer-container {
+    #pri-container {
         width: 75%;
     }
     #next-item {
diff --git a/views/timer.ejs b/views/timer.ejs
@@ -7,8 +7,10 @@
     <link rel="stylesheet" href="/styles.css">
 </head>
 <body>
-    <div id="timer-container"></div>
-    <button id="next-item" class="next-button">Next Item</button>
+    <div id="pri-container">
+        <div id="time-container"></div>
+        <button id="next-item" class="next-button">Next Item</button>
+    </div>
     <script src="/main.js"></script>
     <script>
         const agendaItems = <%- JSON.stringify(agendaItems) %>;

Original file line number	Diff line number	Diff line change
`@@ -8,11 +8,13 @@ body {`
`8`	`8`	`margin: 0;`
`9`	`9`	`background-color: #f0f0f0;`
`10`	`10`	`}`
`11`		`-#timer-container {`
	`11`	`+#time-container {`
`12`	`12`	`text-align: center;`
`13`	`13`	`margin-bottom: 20px;`
`14`	`14`	`}`
`15`		`-.timer-item {`
	`15`	`+#pri-container {`
	`16`	`+ text-align: center;`
	`17`	`+ min-width: 25%;`
`16`	`18`	`background-color: #ffffff;`
`17`	`19`	`border-radius: 10px;`
`18`	`20`	`padding: 2rem;`
`@@ -63,7 +65,7 @@ footer {`
`63`	`65`	`body {`
`64`	`66`	`padding: 1rem;`
`65`	`67`	`}`
`66`		`- #timer-container {`
	`68`	`+ #pri-container {`
`67`	`69`	`width: 100%;`
`68`	`70`	`}`
`69`	`71`	`#next-item {`
`@@ -77,7 +79,7 @@ footer {`
`77`	`79`	`body {`
`78`	`80`	`padding: 2rem;`
`79`	`81`	`}`
`80`		`- #timer-container {`
	`82`	`+ #pri-container {`
`81`	`83`	`width: 75%;`
`82`	`84`	`}`
`83`	`85`	`#next-item {`