From 7040e661f6b54bbcb83a677f21980cbbc34f50c2 Mon Sep 17 00:00:00 2001
From: polsevev <rolf.martin@glomsrud.no>
Date: Wed, 15 Jan 2020 13:01:42 +0100
Subject: [PATCH] la til styling

---
 index.html |  32 +++++++++--------
 main.css   | 100 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 script.js  |   9 ++++-
 3 files changed, 125 insertions(+), 16 deletions(-)

diff --git a/index.html b/index.html
index 60c8800..9f25d63 100644
--- a/index.html
+++ b/index.html
@@ -16,26 +16,28 @@
     
     <h1>Hangman 2020 av Rolf Martin Glomsrud</h1>
     <canvas id="myCanvas"></canvas>
-    <div>
+    <div class="guessField">
       <h2>Gjett bokstaver</h2>
-      <input type="text" id="myText" value="" onkeyup="if(event.keyCode===13) {event.preventDefault(); sjekkBokstav();}">
-      <input type="button" id="testKnapp" width="40px" height="40px" value="Test!" onclick="sjekkBokstav()">
+      <input type="text" id="myText" class="css-input" value="" onkeyup="if(event.keyCode===13) {event.preventDefault(); sjekkBokstav();}">
+      <input type="button" class="myButton" id="testKnapp" width="40px" height="40px" value="Test!" onclick="sjekkBokstav()">
     </div>
     
-    <div>
+    <div class="guessField">
       <h2>Gjett ord</h2>
-      <input type="text" id="myTextWord" onkeyup="if(event.keyCode===13) {event.preventDefault(); sjekkOrd();}">
-      <input type="button" id="testOrdKnapp" width="40px" height="40px" value="Test ord!" onclick="sjekkOrd()">
+      <input type="text" class="css-input" id="myTextWord" onkeyup="if(event.keyCode===13) {event.preventDefault(); sjekkOrd();}">
+      <input type="button" class="myButton" id="testOrdKnapp" width="40px" height="40px" value="Test ord!" onclick="sjekkOrd()">
+    </div>
+    <div class="resultField">
+      <h2>Feil:</h2>
+      <p id="wrongLetters"></p>
+      <h2>Antall forsøk igjen:</h2>
+      <p id="tries"></p>
+    </div>
+    <div class="resultField1">
+      <h2>Ordet så langt:</h2>
+      <p id="ord"></p>
+      <script src="script.js"></script>
     </div>
-    <h2>Feil:</h2>
-    <p id="wrongLetters"></p>
-    <h2>Antall forsøk igjen:</h2>
-    <p id="tries"></p>
-    
-    <h2>Ordet så langt:</h2>
-    <p id="ord"></p>
-    <script src="script.js"></script>
-
     <h2 id="result"></h2>
 </body>
 </html>
\ No newline at end of file
diff --git a/main.css b/main.css
index 55ca6aa..becc276 100644
--- a/main.css
+++ b/main.css
@@ -4,4 +4,104 @@
 .yikes {
     float: left;
     padding: 5px;
+}
+h1 {
+    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
+    font-size: 25px;
+    letter-spacing: -0.6px;
+    word-spacing: 2.4px;
+    color: #000000;
+    font-weight: 700;
+    text-decoration: none;
+    font-style: normal;
+    font-variant: normal;
+    text-transform: none;
+    }
+p {
+    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
+    font-size: 16px;
+    letter-spacing: -0.6px;
+    word-spacing: 2.4px;
+    color: #000000;
+    font-weight: 700;
+    text-decoration: none;
+    font-style: normal;
+    font-variant: normal;
+    text-transform: none;
+    }
+h2 {
+    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
+    font-size: 16px;
+    letter-spacing: -0.6px;
+    word-spacing: 2.4px;
+    color: #000000;
+    font-weight: 700;
+    text-decoration: none;
+    font-style: normal;
+    font-variant: normal;
+    text-transform: none;
+    }
+.css-input {
+    padding: 9px;
+    font-size: 20px;
+    border-width: 3px;
+    border-color: #528935;
+    background-color: #ffffff;
+    color: #000000;
+    border-style: solid;
+    border-radius: 13px;
+    box-shadow: 0px 0px 5px rgba(66,66,66,.75);
+    text-shadow: 0px 0px 5px rgba(66,66,66,.75);
+}
+.css-input:focus {
+    outline:none;
+}
+.myButton {
+	background-color:#44c767;
+	border-radius:28px;
+	border:1px solid #18ab29;
+	display:inline-block;
+	cursor:pointer;
+	color:#ffffff;
+	font-family:Arial;
+	font-size:17px;
+	padding:16px 31px;
+	text-decoration:none;
+	text-shadow:0px 1px 0px #2f6627;
+}
+.myButton:hover {
+	background-color:#5cbf2a;
+}
+.myButton:active {
+	position:relative;
+	top:1px;
+}
+
+#myText{
+    border: 2px solid black;
+}
+#myTextWord{
+    border: 2px solid black;
+}
+#myCanvas{
+    border: 5px solid black;
+    position: relative;
+    padding: 10px; 
+    float: left;
+}
+.guessField{
+    position: relative;
+    top: 5%;
+    left: 2%;
+}
+.resultField{
+    position: relative;
+    padding-top: 40px;
+    left: 5%;
+
+}
+.resultField1{
+    position: relative;
+    left: 5%;
+
 }
\ No newline at end of file
diff --git a/script.js b/script.js
index 69bdace..c01b2d3 100644
--- a/script.js
+++ b/script.js
@@ -1,7 +1,6 @@
 var screenWidth = screen.width;
 var screenHeight = screen.height;
 var partsTracker = 0
-
 var guessed = [];
 var tries = 9;
 var word = "babaganoush";
@@ -41,6 +40,14 @@ function testWord(){
         if (word == guessedWord){
             get("result").innerHTML = "Gratulerer, du gjettet ordet!";
             get("ord").innerHTML = word;
+        }else{
+            tries -= 1;
+            feil.push(guessedWord);
+            var earlier = get("wrongLetters").innerHTML;
+            var nyInner = earlier + " " + guessedWord;
+            get("wrongLetters").innerHTML = nyInner;
+            get("tries").innerHTML = tries;
+            draw();
         }
     }
 }