Add wai aria, add time, fix navbar and add a footer

Agathebadia · Sep 8, 2020 · 166f19d · 166f19d
1 parent d619208
commit 166f19d
Show file tree

Hide file tree

Showing 3 changed files with 117 additions and 14 deletions.
diff --git a/game.js b/game.js
@@ -1,8 +1,26 @@
 const textElement = document.getElementById('text')
 const optionButtonsElement = document.getElementById('option-buttons')
+const timeElement = document.getElementById('time')
 
 let state = {}
 
+function checkTime(i) {
+  if (i < 10) {
+    i = "0" + i;
+  }
+  return i;
+}
+
+function startTime() {
+  const today = new Date();
+  const hours = today.getHours();
+  const minutes = today.getMinutes();
+  h = checkTime(hours);
+  m = checkTime(minutes);
+  timeElement.innerHTML = h + ":" + m;
+}
+startTime();
+
 function startGame() {
   state = {}
   showTextNode(1)

diff --git a/index.html b/index.html
@@ -8,20 +8,31 @@
   <title>Dev Knight Adventure</title>
 </head>
 <body>
+  <nav role="navigation" class="navbar">
+    <div class="navbar-items">
+      <a class="btn btn-navbar" href="index.html">Start</a>
+      <span role="timer" id="time"></span>
+    </div>
+  </nav>
   <div class="container">
-    <div class="header">
-      <img class="icon" src="exe.gif">
+    <h1 class="header">
+      <img class="icon" src="exe.gif" role="img" alt="icon of a window">
       Dev Knight Adventure
-    </div>
-    <div class="content">
-      <div id="text">TEXT</div>
+    </h1>
+    <main class="content">
+      <div id="text" role="text">TEXT</div>
       <div id="option-buttons" class="btn-grid">
-        <button class="btn">Option 1</button>
-        <button class="btn">Option 2</button>
-        <button class="btn">Option 3</button>
-        <button class="btn">Option 4</button>
+        <button class="btn" role="option">Option 1</button>
+        <button class="btn" role="option">Option 2</button>
+        <button class="btn" role="option">Option 3</button>
+        <button class="btn" role="option">Option 4</button>
       </div>
-    </div>
+    </main>
   </div>
+  <footer>
+    <span>
+      Created by <a href="https://github.com/Agathebadia" target="_blank">Agathe Badia</a>
+    </span>
+  </footer>
 </body>
 </html>
diff --git a/style.css b/style.css
@@ -3,7 +3,7 @@
 }
 
 body {
-  padding: 0;
+  font-family: Tahoma, Verdana;
   margin: 0;
   display: flex;
   justify-content: center;
@@ -13,13 +13,32 @@ body {
   background-color: #008080;
 }
 
+.navbar {
+  height: 38px;
+  background: #C0C0C0;
+  border-bottom: 2px solid #FCFCFC;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 100;
+}
+
+.navbar-items {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-left: 4px;
+  padding-right: 4px;
+  padding-top: 2px;
+}
+
 .header {
-  font-family: Tahoma, Verdana;
   margin: 2px 2px 0;
   padding: 1px 2px;
   color: #fff;
   font-size: 12px;
-  background: linear-gradient(to right, #000080, #1084d0);
+  background: #000080;
   font-weight: bold;
   line-height: 16px;
   display: flex;
@@ -31,6 +50,16 @@ body {
   margin-top: 1em;
 }
 
+#time {
+  border-top: 1px solid #08080E;
+  border-left: 1px solid #08080E;
+  border-right: 1px solid #FCFCFC;
+  border-bottom: 1px solid #FCFCFC;
+  padding: 3px 12px;
+  font-size: 15px;
+  height: 26px;
+}
+
 .container {
   min-height: 94px;
   width: 800px;
@@ -70,11 +99,56 @@ body {
   padding: 4px;
 }
 
-.btn:hover {
+.btn:hover, .btn-navbar:hover {
   cursor: pointer;
 }
 
 .btn:active {
   border-color: black;
   cursor: pointer;
 }
+
+.btn-navbar {
+  align-items: center;
+  border: 2px solid;
+  border-top-color: #dfdfdf;
+  border-left-color: #dfdfdf;
+  border-right-color: #808080;
+  border-bottom-color: #808080;
+  box-shadow: 1px 1px 0 0 #000;
+  margin-top: 4px;
+  margin-bottom: 4px;
+  text-decoration: none;
+  color: black;
+  font-size: 12px;
+  height: auto;
+  margin-right: 5px;
+}
+
+.btn-navbar:active {
+  cursor: pointer;
+  border-color: none;
+}
+
+footer {
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+  height: 28px;
+  display: block;
+  background: #C0C0C0;
+  padding-left: 4px;
+  padding-right: 4px;
+  border-bottom: 2px solid #FCFCFC;
+  padding-left: 4px;
+  padding-right: 4px;
+  padding-top: 4px;
+  font-size: 14px;
+  display: flex;
+  justify-content: center;
+}
+
+span > a {
+  color: #000181;
+  text-decoration: none;
+}