Javascript Cookie Clicker

Katherine's Cookie Clicker Game!

Instructions: Click the cookie - this makes more cookies.

Number of Cookies:

Shop: Buy upgrades to increase cookies per second

Automatically upgrade based on the following table of upgrade costs!

Name	How many cookies can it make?	Cost	Buy
Granny	Granny makes 2x more cookies per second!	30 cookies
Factory	Factory makes 10x more cookies per second!	500 cookies
Plant	Plant makes 30x more cookies per second!	1000 cookies
SuperPlant	SuperPlant makes 1000x more cookies per second!	100,000 cookies

<html>
    <head>
        <script type="text/javascript" src="js/cookie.js"></script>
        <title>Shark Bait's Cookie Clicker Game!</title>
        <link rel = "stylesheet" href = "style.css"/>
    </head>
    <body>
        <div id = "space"></div>
        <div id = "cookie" onclick="cookieClick()">
            <img src="https://media.giphy.com/media/l0u0eiVkW4x0Y/200.gif" width="200px"/>
        </div>
        <p>Number of Cookies:</p>
        <div id = "numbers"></div>
        <div id= "upgradeLevel"></div>
        <p>Intructions: Click the cookie - this makes more cookies.</p>
        <p>You will AUTOMATICALLY upgrade according the following table of upgrade costs! :)</p>
        <table>
            <tr>
                <td>Name</td>
                <td>How many cookies can it make?</td>
                <td>cost</td>
            </tr>
            <tr>
                <td>Granny!</td>
                <td>Granny make 2x's as much!</td>
                <td>30 cookies!</td>
            </tr>
            <tr>
                <td>Factory</td>
                <td> Factory makes 10x's as much!</td>
                <td>500 cookies!</td>
            </tr>
            <tr>
                <td>Plant</td>
                <td> Plant makes 30x's as much!</td>
                <td>1,000 cookies!</td>
            </tr>
             <tr>
                <td>SuperPlant</td>
                <td> SuperFactory makes 1000x's as much!</td>
                <td>100,000 cookies!</td>
            </tr>
        </table>
    </body>
</html>

body {
    padding-top: 30px;
    font-family: Arial;
    background-color: turquoise;
    width: 500px;
    margin: auto;
    text-align: center;
}                                           

p {
    font-size: 20px;
    color: white;
    display: block;
    margin: 5px;
}

#space {
    margin: auto;
    text-align:center;
    padding-top: 20px;
    margin-bottom: 5px;
    font-size: 30px;
    border:5px solid;
    border-radius:10px;
    background-color: greenyellow;
    color: white;
    width:389px;
    height:60px;
}

table {
    margin-top: 10px;
    border: 2px solid;
    border-radius: 5px;
}

td {
    border:1px solid;
}

#numbers {
    margin: auto;
    text-align:center;
    padding-top: 20px;
    margin-bottom: 20px;
    font-size: 30px;
    border:5px solid;
    border-radius:10px;
    background-color:white;
    width:200px;
    height:60px;    
}

#upgradeLevel {
    margin: auto;
    text-align:center;
    padding-top: 20px;
    margin-bottom: 20px;
    font-size: 30px;
    border:5px solid;
    border-radius:10px;
    background-color:lightpink;
    width:300px;
    height:50px;    
}

//initial number of cookies    
var num = 0;

window.onload = function () {
        var name = prompt("What is your name");
        
        var space = document.getElementById("space");
        
        space.innerHTML = name + "'s Bakery";
}

var cookie = document.getElementById("cookie");

function cookieClick() { 
    num += 1;

    var numbers = document.getElementById("numbers");
    
    //upgrade level for printing
    var upgradeLevel = document.getElementById("upgradeLevel");
    
    numbers.innerHTML = num;      
    //automatic Granny upgrade to 2x
    if(num >= 30 ){
        num += 2;
        upgradeLevel.innerHTML = "Granny Level";
    }

    //automatic factory upgrade to 10x
    if(num >= 500) {
        num += 10;
        upgradeLevel.innerHTML = "Factory Level";
    }

    //automatic plant upgrade to 30x
    if(num >= 1000) {
        num += 30;
        upgradeLevel.innerHTML = "Plant Level";
    }

    //automatic super factory upgrade to 1000x
    if(num >= 100000) {
        num += 1000;
        upgradeLevel.innerHTML = "Super-Plant Level";
    }
}

<html>
    <head>
        <script type="text/javascrmipt" src="js/cookie.js"></script>
        <title>Shark Bait's Cookie Clicker Game!</title>
        <link rel = "stylesheet" href = "style.css"/>
    </head>
    <body>
        <div id = "space"></div>
        <div id = "cookie" onclick="cookieClick()">
            <img src="https://media.giphy.com/media/l0u0eiVkW4x0Y/200.gif" width="200px" onclick="playAudio('munching-food-73994.mp3')"/>
        </div>
        <p>Number of Cookies:</p>
        <div id = "numbers"></div>
        <div id= "upgradeLevel"></div>
        <p>Intructions: Click the cookie - this makes more cookies.</p>
        <p>You will AUTOMATICALLY upgrade according the following table of upgrade costs! :)</p>
        <table  style="background-color: blue;">
            <tr>
                <td>Name</td>
                <td>How many cookies can it make?</td>
                <td>cost</td>
            </tr>
            <tr>
                <td>Granny!</td>
                <td>Granny make 2x's as much!</td>
                <td>30 cookies!</td>
            </tr>
            <tr>
                <td>Factory</td>
                <td> Factory makes 10x's as much!</td>
                <td>500 cookies!</td>
            </tr>
            <tr>
                <td>Plant</td>
                <td> Plant makes 30x's as much!</td>
                <td>1,000 cookies!</td>
            </tr>
             <tr>
                <td>SuperPlant</td>
                <td> SuperFactory makes 1000x's as much!</td>
                <td>100,000 cookies!</td>
            </tr>
        </table>
    </body>
</html>
<style>
body {
    padding-top: 30px;
    font-family: Arial;
    background-color: turquoise;
    width: 500px;
    margin: auto;
    text-align: center;
}                                           
p {
    font-size: 20px;
    color: white;
    display: block;
    margin: 5px;
}
#space {
    margin: auto;
    text-align:center;
    padding-top: 5px;
    margin-bottom: 5px;
    font-size: 30px;
    border:5px solid;
    border-radius:10px;
    background-color: greenyellow;
    color: white;
    width:389px;
    height:60px;
}
table {
    margin-top: 10px;
    border: 2px solid;
    border-radius: 5px;
}
td {
    border:1px solid;
}
#numbers {
    margin: auto;
    text-align:center;
    padding-top:7px;
    margin-bottom: 20px;
    font-size: 30px;
    border:5px solid;
    border-radius:10px;
    background-color:white;
    width:200px;
    height:60px;    
}
#upgradeLevel {
    margin: auto;
    text-align:center;
    padding-top: 0px;
    margin-bottom: 30px;
    font-size: 30px;
    border:5px solid;
    border-radius:10px;
    background-color:lightpink;
    width:300px;
    height:50px;    
}
</style>
<script>
    //initial number of cookies    
var num = 0;
window.onload = function () {
        var name = prompt("What is your name");
        var space = document.getElementById("space");
        space.innerHTML = name + "'s Bakery";
}
var cookie = document.getElementById("cookie");
function cookieClick() { 
    num += 1;
    var numbers = document.getElementById("numbers");
    //upgrade level for printing
    var upgradeLevel = document.getElementById("upgradeLevel");
    numbers.innerHTML = num;      
    //automatic Granny upgrade to 2x
    if(num >= 30 ){
        num += 2;
        upgradeLevel.innerHTML = "Granny Level";
    }
    //automatic factory upgrade to 10x
    if(num >= 500) {
        num += 10;
        upgradeLevel.innerHTML = "Factory Level";
    }
    //automatic plant upgrade to 30x
    if(num >= 1000) {
        num += 30;
        upgradeLevel.innerHTML = "Plant Level";
    }
    //automatic super factory upgrade to 1000x
    if(num >= 100000) {
        num += 1000;
        upgradeLevel.innerHTML = "Super-Plant Level";
    }
}
</script>

Name

How many cookies can it make?

Cost

Buy