polsevev/hangman
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

la til styling

Browse source
This commit is contained in:
Rolf Martin Glomsrud 2020-01-15 13:01:42 +01:00
parent 741cc2ace1
commit 7040e661f6
3 changed files with 125 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
index.html
View file

@ -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>

100
main.css
View file

@ -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%;
}

9
script.js
View file

@ -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();
}
}
}