91 lines
2.6 KiB
HTML
91 lines
2.6 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Inventory Oppgave2</title>
|
||
|
|
</head>
|
||
|
|
<style>
|
||
|
|
div.InvSelect {
|
||
|
|
color: white;
|
||
|
|
background-color: rgb(73, 162, 76);
|
||
|
|
border: 6px white;
|
||
|
|
text-align: center;
|
||
|
|
padding: 6px;
|
||
|
|
user-select: none;
|
||
|
|
}
|
||
|
|
div.Inv{
|
||
|
|
background-color:lightgrey;
|
||
|
|
background: rgb(182, 182, 182);
|
||
|
|
border: 1px solid black;
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(4, 1fr);
|
||
|
|
}
|
||
|
|
button.mana {
|
||
|
|
background-color: rgb(0, 119, 255);
|
||
|
|
font-size: medium;
|
||
|
|
color: white;
|
||
|
|
|
||
|
|
}
|
||
|
|
button.health {
|
||
|
|
background-color: rgba(255, 0, 0, 0.808);
|
||
|
|
font-size: medium;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
<body><h1>Gruppe Oppgave the Goats</h1>
|
||
|
|
<div><b>Klikk her for å legge til eller ta vekk</b></div>
|
||
|
|
<button class="health" onclick="addHealth()">Legg til helse flaske</button>
|
||
|
|
<button class="health" onclick="decreaseHealth()">Ta fra helse flaske</button>
|
||
|
|
<button class="mana" onclick="addMana()">Legg til magi flaske</button>
|
||
|
|
<button class="mana" onclick="decreaseMana()">Ta fra magi flaske</button>
|
||
|
|
<div>
|
||
|
|
<div class="InvSelect" onclick="openClose()">Inventory</div>
|
||
|
|
<div id="showInventory"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
var healthTotal = 0;
|
||
|
|
var manaTotal = 0;
|
||
|
|
|
||
|
|
blankAll()
|
||
|
|
|
||
|
|
function addHealth() {
|
||
|
|
healthTotal = healthTotal + 1
|
||
|
|
document.getElementById("health").innerHTML = healthTotal;
|
||
|
|
}
|
||
|
|
function addMana(){
|
||
|
|
manaTotal = manaTotal + 1
|
||
|
|
document.getElementById("mana").innerHTML = manaTotal;
|
||
|
|
}
|
||
|
|
|
||
|
|
function decreaseHealth(){
|
||
|
|
healthTotal = healthTotal - 1
|
||
|
|
document.getElementById("health").innerHTML = healthTotal;
|
||
|
|
}
|
||
|
|
|
||
|
|
function decreaseMana(){
|
||
|
|
manaTotal = manaTotal - 1
|
||
|
|
document.getElementById("mana").innerHTML = manaTotal;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function openClose(){
|
||
|
|
document.getElementById("showInventory").innerHTML = /*HTML*/ `
|
||
|
|
<div class="Inv">Total Helse</div>
|
||
|
|
<div class="Inv" id="health"></div>
|
||
|
|
<div class="Inv">Total mana</div>
|
||
|
|
<div class="Inv" id="mana"></div>
|
||
|
|
|
||
|
|
<button onclick="blankAll()">Close Inventory</button>
|
||
|
|
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
function blankAll() {
|
||
|
|
document.getElementById("showInventory").innerHTML = ' ';
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|