geir/startit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

javascript og lit css

Browse source
This commit is contained in:
Geir Okkenhaug Jerstad 2024-08-15 14:38:20 +02:00
parent fcbb649185
commit fe0b5a944b
8 changed files with 156 additions and 103 deletions
Download patch file Download diff file Expand all files Collapse all files

83
team/variabler/healthMana.html
View file

@ -1,83 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Health og Mana</title>
<style>
body {
margin: 0;
padding: 0;
}
.container {
border: 10px solid greenyellow;
display: grid;
grid-template-columns: repeat(4, 1fr);
height: 10vh;
}
.header{
border: 10px solid grey;
border-radius: 10px;
background-color: antiquewhite;
font-size: x-large;
}
</style>
</head>
<body>
<div class="header">Add or delete potions from inventory</div>
<div class="container">
<button onclick="addHealth()">add health potion</button>
<button onclick="delHealth()">delete health potion</button>
<button onclick="addMana()">add mana potion</button>
<button onclick="delMana()">delete mana potion</button>
</div>
<div>
<div onclick="showHideInventory()">
<div class="header">Inventory</div>
</div>
<div id="inventory">
</div>
</div>
<script>
var healthTotal = 0;
var manaTotal = 0;
var inventoryOpen = Boolean(false);
function addHealth() {
++healthTotal
document.getElementById("healthTotal").innerHTML = healthTotal;
}
function delHealth() {
--healthTotal
document.getElementById("healthTotal").innerHTML = healthTotal;
}
function addMana() {
++manaTotal
document.getElementById("manaTotal").innerHTML = manaTotal;
}
function delMana() {
--manaTotal
document.getElementById("manaTotal").innerHTML = manaTotal;
}
function showHideInventory() {
if (inventoryOpen != true) {
document.getElementById('inventory').innerHTML = /*HTML*/ `
<div class="container">Health<div id="healthTotal"></div>
Mana<div id="manaTotal"></div>
</div>`;
document.getElementById("manaTotal").innerHTML = manaTotal;
document.getElementById("healthTotal").innerHTML = healthTotal;
inventoryOpen = true;
} else {
blankAll()
inventoryOpen = false;
}
}
function blankAll() {
document.getElementById('inventory').innerHTML = '';
}
</script>
</body>
</html>

0
team/variabler/script.js
View file

0
team/variabler/style.css
View file