<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
font-size: 300%;
user-select: none;
}
</style>
</head>
<body>
<div id="app"></div>
<script>
//model
var points = 0;
var pointsPerClick = 1;
var smilyIndex = 0;
// view
updateView();
function updateView() {
var smiley = smilyIndex == 0 ? '😊' : '😁' ;
document.getElementById('app').innerHTML = /*HTML*/ `
<div id="image" onclick="doClick()">${smiley}</div>
<div id="pointsInfo">${points}</div>
<button onclick="buyUpgrade()">Kjøp oppgrdering (-10 poeng)</button>
`;
}
// controller
function doClick(){
points += pointsPerClick;
console.log(points + "<-- Dette er points");
smilyIndex = 1 - smilyIndex;
updateView();
}
function buyUpgrade(){
if (points < 10) return;
points -= 10;
pointsPerClick++;
updateView();
}
</script>
</body>
</html>