Time format changer button | 12h & 24h

app.css

@@ -24,6 +24,8 @@
   --accent: #57a0d9; /* Hover color */
   --background: #f5f5f5; /* Background color */
   --cards: #e4e6e6; /* Cards color */
+  --timeFormat: #e4e4e4;
+  --timeFormatSecondary: #f0f0f0;
 
   /* Image background  */
   --imgbg: url(assets/background.jpg); /* Image URL */
@@ -38,6 +40,8 @@
   --accent: #57a0d9; /* Hover color */
   --background: #19171a; /* Background color */
   --cards: #201e21; /* Cards color */
+  --timeFormat: #201e21;
+  --timeFormatSecondary: #2c292e;
 
   /* Fonts Color */
   --fg: #d8dee9; /* Foreground color */
@@ -361,3 +365,44 @@ body {
     padding-right: 100px;
   }
 }
+
+/* Time Format Styles */
+
+.timeFormatBlock{
+  background: var(--timeFormat);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  justify-items: center;
+  padding: 10px;
+  border-radius: 10px;
+  position: absolute;
+  top: 50px;
+  box-shadow: 0 5px 7px rgba(0, 0, 0, 0.35);
+}
+
+.timeFormatBlock > button{
+  background-color: var(--timeFormatSecondary);
+  color: var(--fg);
+  padding: 5px;
+  font-size: 16pt;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  width: 60px;
+  box-shadow: 0 5px 7px rgba(0, 0, 0, 0.35);
+}
+
+.timeFormatBlock > button:hover{
+  background-color: #57a0d9;
+  color: #19171a;
+  font-size: 18pt;
+
+}
+#timeFormat1{
+  margin-right: 5px;
+}
+
+#timeFormat2{
+  margin-left: 5px;
+}

assets/js/time.js

@@ -14,7 +14,9 @@ function displayClock() {
 	var hh = d.getHours();
 	var ampm = '';
 
-	if (CONFIG.twelveHourFormat) {
+	const isTwelveHour = localStorage.getItem("Twelve Hour") === "true";
+
+	if (isTwelveHour) {
 		ampm = hh >= 12 ? ' pm' : ' am';
 		hh = hh % 12;
 		hh = hh ? hh : 12;

assets/js/timeFormat.js

@@ -0,0 +1,14 @@
+// Set time format
+
+let hours = document.getElementById("hour")
+let minutes = document.getElementById("minutes")
+
+// Set 12 - hour format
+function timeFormat1(){
+    localStorage.setItem("Twelve Hour", true)
+}
+
+// Set 24 - hour format
+function timeFormat2(){
+    localStorage.setItem("Twelve Hour", false)
+}

index.html

@@ -30,6 +30,13 @@
 				<div id="greetings"></div>
 			</div>
 
+			<!-- Time Format Changer -->
+
+			<div class="timeFormatBlock">
+				<button id="timeFormat1" onclick="timeFormat1()">12</button>
+				<button id="timeFormat2" onclick="timeFormat2()">24</button>
+			</div>
+
 			<!-- Date and Weather  -->
 
 			<div class="weatherBlock">
@@ -65,6 +72,8 @@
 		<script src="assets/js/time.js"></script>
 		<script src="assets/js/greeting.js"></script>
 		<script src="assets/js/weather.js"></script>
+		<script src="assets/js/timeFormat.js"></script>
+		<script src="assets/js/timeFormat.js"></script>
 
 		<!-- Generators  -->
 		<script src="assets/js/buttons.js"></script>