Ver 2.2

-Added a misc section for game calls and other information players might want to record -Modified input logic to delete input from input boxes after submitting (score, misc)
AndreasCampan · Apr 26, 2021 · 51bb165 · 51bb165
1 parent a0e6aab
commit 51bb165
Show file tree

Hide file tree

Showing 3 changed files with 197 additions and 107 deletions.
diff --git a/css/style.css b/css/style.css
@@ -56,6 +56,46 @@ p {
   text-align: center;
 }
 
+#playerBttn {
+  background-color: #217E02;
+  border-radius: 5px;
+  color:rgb(255, 255, 255);
+  font-size: 1.2em;
+  font-weight: 700;
+  padding: 3px 10px;
+}
+
+#nameinput {
+  padding: 4px;
+  width: 250px;
+  line-height: 1.3em;
+  font-size: 1.2em;
+  border-radius: 5px;
+  border: 1px solid rgb(126, 126, 126);
+}
+
+#list{
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+}
+
+ul {
+  list-style-type: none;
+}
+
+ul > li {
+  padding: 15px 10px;
+  color: #000;
+  height: auto;
+}
+
+ul li:nth-child(even) {
+  background: #cfe6d0;
+}
+
+/* -- Top related declarations -- */
 .top {
   display: grid;
   grid-template-columns: 1.2fr 0.8fr 0.8fr 0.2fr;
@@ -65,24 +105,14 @@ p {
   text-align: left;
 }
 
-.bottom {
-  display: flex;
-  flex-direction: row;
-  justify-content:space-between;
-  align-items: center;
-  height: 50px;
-  font-size: 1.2em;
-
+input[type=radio]:hover, label:hover {
+  cursor: pointer;
 }
 
 .dealer, .starter {
   font-size: 1.2em;
 }
 
-input[type=radio]:hover, label:hover {
-  cursor: pointer;
-}
-
 .close {
   font-size: 1.2em;
   font-weight: 700;
@@ -92,25 +122,14 @@ input[type=radio]:hover, label:hover {
   cursor: pointer;
 }
 
-.score {
-  display: inline-block;
-  color: rgb(0, 0, 0);
-  width: 80px;
-}
-
- #addbttn {
-   background-color: #217E02;
-   border-radius: 5px;
-   color:rgb(255, 255, 255);
-   font-size: 1.2em;
-   font-weight: 700;
-   padding: 3px 10px;
- }
-
-.resetbttn {
-  cursor: pointer;
-  padding: 5px 8px;
-  border-radius: 5px;
+/* -- Mid related declarations -- */
+.mid {
+  display: flex;
+  flex-direction: row;
+  justify-content:space-between;
+  align-items: center;
+  height: 50px;
+  font-size: 1.2em;
 }
 
 .minus {
@@ -120,55 +139,69 @@ input[type=radio]:hover, label:hover {
   background-color: #d45454;
 }
 
-.ptsbttn {
+.score {
+  display: inline-block;
+  color: rgb(0, 0, 0);
+  width: 80px;
+}
+
+.enterbttn {
   cursor: pointer;
-  padding: 3px 7px;
+  padding: 3px 4px;
   border-radius: 5px;
   background-color: #72d454;
 }
 
-.ptsbttn:hover{
-  opacity: 70%;
+.enterbttn:hover{
+  color: rgb(255, 255, 255);
+  background-color: #4b8b38;
 }
 
-#nameinput {
-  padding: 4px;
-  width: 250px;
-  line-height: 1.3em;
-  font-size: 1.2em;
+.resetbttn {
+  cursor: pointer;
+  background-color: rgb(219, 219, 219);
+  padding: 3px 4px;
   border-radius: 5px;
-  border: 1px solid rgb(126, 126, 126);
+}
+
+.resetbttn:hover {
+  color: #ffffff;
+ background-color: rgb(122, 122, 122);
 }
 
 .score-input {
   width: 80px;
   margin: 0 3px;
 }
 
-#list{
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  margin: 0;
-}
-
-ul {
-  list-style-type: none;
+/* -- Bottom related declarations -- */
+.mid2 {
+  display: grid;
+  grid-gap: 1em;
+  grid-template-columns: 0.1fr 1fr 0.1fr;
+  align-items: center;
+  height: 50px;
+  text-align: left;
+  font-size: 1.2em;
 }
 
-ul > li {
-  padding: 15px 10px;
-  color: #000;
-  height: auto;
-  word-wrap: break-word;
+.misc-input {
+  width: 100%;
 }
 
-ul li:nth-child(even) {
-  background: #cfe6d0;
+/* -- Bottom related declarations -- */
+.bottom {
+  display: flex;
+  flex-direction: row;
+  height: 50px;
+  width: 100%;
 }
 
-.delete {
-  display: none;
+.misc-List {
+  width: 100%;
+  min-height: 30px;
+  text-align: left;
+  overflow-wrap:break-word;
 }
 
 .footer-logos {
@@ -189,7 +222,7 @@ ul li:nth-child(even) {
   }
 
   h1 {
-    font-size: 17pt;
+    font-size: 2em;
   }
 
   h2 {
@@ -210,7 +243,7 @@ ul li:nth-child(even) {
   }
 
   #nameinput {
-    width: 200px;
+    width: 150px;
   }
 
   ol > li {
@@ -223,7 +256,8 @@ ul li:nth-child(even) {
   }
 
   .resetbttn {
-    padding: 3px 2px;
+    padding: 2px 3px;
+    margin-right: 3px;
     font-size: 0.9em;
   }
 

diff --git a/index.html b/index.html
@@ -12,13 +12,13 @@
   <body>
     <div class="container">
       <a href="about.html">About</a>
-      <h1>Score Keeper v2.1.1</h1>
+      <h1>Score Keeper v2.2</h1>
 
       <form name="Score" onsubmit="return false;">
         <input type="text" name="list-name" id="nameinput" placeholder="Type a Name..." maxlength="10">
       </form>
 
-      <button id="addbttn">Add</button>
+      <button id="playerBttn">Add Player</button>
       <ul id="list">
       </ul>
     </div>