Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Event</title>

<style>
    p {font-size:25px;color:#FC3;text-align:center}
    h1 {text-align:center; color:#FC3}
</style>

</head>

<body background="background.jpg" style="background-size:cover">

<form background="background.jpg" style="background-size:cover">
    <b>
        <p style="font-family:'Times New Roman', Times, serif;font-size:60px;color:#FC3;text-align:center">
            Welcome to "A Night Out"
        </p>
    </b>
    <b>
        <p style="font-family:'Times New Roman', Times, serif;font-size:25px;color:#FC3;text-align:center">
            This is an event that is going to be taking place South Park from 04:00pm to 01:00am on the 12th of March 2020
        </p>
    </b>

<br><br><br><br>

    <hr>

<br><br><br>

    <h1>Get your tickets</h1>

<br><br><br>

<form>

    <p>Kids pass: 11$ <input type="button" value="add to cart" id="kids id" onclick="kids()"></p>
<br><br>
    <p>One person pass: 15$ <input type="button" value="add to cart" id="1 person id" onclick="one()"></p>
<br><br>
    <p>Couples pass: 25$ <input type="button" value="add to cart" id="couples id" onclick="couples()"></p>
<br><br>
    <p>Family pass: 50$ <input type="button" value="add to cart" id="family id" onclick="family()"></p>
<br><br>
    <p>Elders pass: 13$ <input type="button" value="add to cart" id="elders id" onclick="elders()"></p>

</form>

<br><br><br><br><br>

    <h1>VIP tickets</h1>

<br><br><br>

<form>

    <p>Kids VIP pass: 20$ <input type="button" value="add to cart" id="kids vip id" onclick="vipkids()"></p>
<br><br>
    <p>One person VIP pass: 27$ <input type="button" value="add to cart" id="1 person vip id" onclick="vipone()"></p>
<br><br>
    <p>Couples VIP pass: 50$ <input type="button" value="add to cart" id="couples vip id" onclick="vipcouples()"></p>
<br><br>
    <p>Family VIP pass: 90$ <input type="button" value="add to cart" id="family vip id" onclick="vipfamily()"></p>
<br><br>
    <p>Elders VIP pass: 25$ <input type="button" value="add to cart" id="elders vip id" onclick="vipelders()"></p>

</form>

<br><br><br><br>

    <hr>

<br><br><br>

    <h1>Cart</h1>

<br><br><br>

<p id="p9">Kids pass</p>
<p id="p1">One person pass</p>
<p id="p2">Couples pass</p>
<p id="p3">Family pass</p>
<p id="p4">Elders pass</p>
<p id="p10">Kids VIP pass</p>
<p id="p5">One person VIP pass</p>
<p id="p6">Couples VIP pass</p>
<p id="p7">Family VIP pass</p>
<p id="p8">Elders VIP pass</p>

<br><br>

<p id="total">Your total bill is: 0$</p>

<script>
  var totalText = document.getElementById("total");

var kid = 0
var one = 0
var cou = 0
var fam = 0
var eld = 0

var vkid = 0
var vone = 0
var vcou = 0
var vfam = 0
var veld = 0

var k = 0
var o = 0
var c = 0
var f = 0
var e = 0

var vk = 0
var vo = 0
var vc = 0
var vf = 0
var ve = 0

function kids() {
    document.getElementById("p9").innerHTML="Kids pass purchesed"
    document.getElementById("p9").style.color="green"
    document.getElementById("kids id").value="ADDED"
    kid = k + 11
    printTotal();
}

function one() {
    document.getElementById("p1").innerHTML="One person pass purchesed"
    document.getElementById("p1").style.color="green"
    document.getElementById("1 person id").value="ADDED"
    one = o + 15
    printTotal();
}

function couples() {
    document.getElementById("p2").innerHTML="Couples pass purchesed"
    document.getElementById("p2").style.color="green"
    document.getElementById("couples id").value="ADDED"
    cou = c + 25
    printTotal();
}

function family() {
    document.getElementById("p3").innerHTML="Family pass purchesed"
    document.getElementById("p3").style.color="green"
    document.getElementById("family id").value="ADDED"
    fam = f + 50
    printTotal();
}

function elders() {
    document.getElementById("p4").innerHTML="Elders pass purchesed"
    document.getElementById("p4").style.color="green"
    document.getElementById("elders id").value="ADDED"
    eld = e + 13
    printTotal();
}

function vipkids() {
    document.getElementById("p10").innerHTML="Kids VIP pass purchesed"
    document.getElementById("p10").style.color="green"
    document.getElementById("kids vip id").value="ADDED"
    vkid = vk + 20
    printTotal();
}

function vipone() {
    document.getElementById("p5").innerHTML="One person VIP pass purchesed"
    document.getElementById("p5").style.color="green"
    document.getElementById("1 person vip id").value="ADDED"
    vone = v0 + 27
    printTotal();
}

function vipcouples() {
    document.getElementById("p6").innerHTML="Couples VIP pass purchesed"
    document.getElementById("p6").style.color="green"
    document.getElementById("couples vip id").value="ADDED"
    vcou = vc + 50
    printTotal();
}

function vipfamily() {
    document.getElementById("p7").innerHTML="Family VIP pass purchesed"
    document.getElementById("p7").style.color="green"
    document.getElementById("family vip id").value="ADDED"
    vfam = vf + 95
    printTotal();
}

function vipelders() {
    document.getElementById("p8").innerHTML="Elders VIP pass purchesed"
    document.getElementById("p8").style.color="green"
    document.getElementById("elders vip id").value="ADDED"
    veld = ve + 25
    printTotal();
}

  function printTotal() {
    var total = kid + one + cou + fam + eld + vkid + vcou + vfam + veld
    totalText.textContent = `Your total bill is: ${total}$`;
    console.log(total);
  }
</script>


</body background="background.jpg" style="background-size:cover">
</html>