HTML Create a Cookie Clicker Site - Part 1 The Start - playegndary.com

HTML Create a Cookie Clicker Site – Part 1 The Start

Leeson
Views: 37960
Like: 451
Today I will be doing a tutorial on how to make a cookie style website!
Part 2:
Playlist:

Within this series we will slowly create a cookie clicker styled website with features like unlockables for progression, achievement popups, and some CSS styling to spice the site design up.

Be sure to leave a like if you enjoyed the video, and ask any questions you have below in the comments.

Links:
Brackets – (A modern, open source text editor that understands web design.)
HTML5 UP! – (HTML5 site templates)

55 Comments

  1. Made a revision of this code, using the Identify template from HTML5Up. It includes AutoSave and AutoLoad, so those buttons don't get in the way. Along with drop-down upgrades, making it more compact, yet clean. Changed from an input box to an inner HTML text. http://jitter.cf/bitcoinsim/index.html

    Opinions on the site? <3

    – I'd love a reply from you Leeson, with your opinion on it 😀

  2. surprisingly this was extremely helpful, good job!

  3. wen i click cookie nothing happen

  4. hey arent the saved data pieces from the save and load called cookies?? coincidence? I THINK NOT!

  5. why the button down't work?
    <script>
    var cookiecount = 0;
    </script>
    <html>
    <head><title>0 Oreo</title></head>
    <body>
    <a href=# onclick="add()"><img src="Oreo.png"></a<
    <br><br>
    You got:
    <input type="text" id="text" disabled style text-align:center>
    <script>
    function add() {
    cookiecount = cookiecount + 1
    document.getElementById('text').value = cookiecount;
    document.title = cookiecount + " Cookies ";
    }

    </script>
    Cookies
    <br> <br>

    <button><a href="#" onClick="save()">Save</a></button>
    <button><a href="#" onClick="load()">Load</a></button>
    <script>
    function save(){
    localStorage.setItem("cookiecount", cookiecount);
    }
    function load() {
    cookiecount = localStorage.getitem("cookiecount");
    cookiecount = parseInt(cookiecount);
    document.getElementById('text').value = cookiecount;
    }
    </script>
    </body>
    </html>

  6. when i click load the amount of cookies does not change until i click the cookie then it adds 1s (and yes i did include the cookiecount = parseint and the document.getElementById)

  7. I named my game Teemo clicker(dont ask why)
    my jpg isnt loading to the script

    <script>
    var teemocount = 0;
    </script>
    <html>
    <head><title>0 Teemo</title></head>
    <body>

    <a href=# onclick="add()"><img src="teemo.jpg"></a>
    <br><br>
    You got:
    <input type="text" id="text" disabled style= text-align:center>
    <script>
    function add() {
    teemocount = teemocount + 1
    document.getElementId('text').value = teemocount;
    }

    </script>
    </body>
    </html>

  8. <a href=# onclick="add()"><img src="Cookie.png"</a>

    the </a> is in red, why ? I know it's wrong, BUT WHY ?

  9. Save and Load don't work PLZ HELP!!! Oh, Here is my code:
    <!DOCTYPE html>
    <script>
    var cookiecount = 0;
    </script>
    <html>
    <head><title>Cookie Game!</title></head>
    <body>

    <a href=# onclick="add()"><img src="cookie.jpeg"></a>
    <br><br>
    You Got:
    <input type="text" id="text" disabled style= text-align:center>
    <script>
    function add() {
    cookiecount = cookiecount + 1
    document.getElementById('text').value = cookiecount;
    document.title = cookiecount + ' Cookies';
    }
    </script>
    Cookies.
    </body>
    <br><br>
    <button><a href="#" onClick="save()"></a>Save</button>
    <button><a href="#" onClick="load()"></a>Load</button>

    <script>
    function save() {
    localStorage.setItem("cookiecount", cookiecount);
    }
    function load() {
    cookiecount=localStorage.getItem("cookiecount");
    cookiecount=parseInt(cookiecount);
    document.getElementById('text').value = cookiecount;
    document.title = cookiecount + ' Cookies';
    }
    </script>

    </html>

  10. My save and load buttons do not work. here is the error I get and my code
    ERROR = idledragons.html:27 Uncaught TypeError: localStorage.setitem is not a function
    at save (idledragons.html:27)
    at HTMLAnchorElement.onclick (VM278 idledragons.html:22)
    <script>
    var BloodCoin = 0;
    </script>
    <html>
    <head><title>Idle Dragons</title></head>
    <body>

    <a href=# onclick="add()"><img src="devil.png"></a>
    <br><br>
    you got:
    <input type="text" id="text" disabled style= text-align:center>
    <script>
    function add() {
    BloodCoin = BloodCoin + 1
    document.getElementById('text').value = BloodCoin;
    document.title = BloodCoin + "BloodCoins";
    }
    </script>
    BloodCoins
    <br><br>

    <button><a href="#" onClick="save()">Save</a></button>
    <button><a href="#" onClick="load()">Load</a></button>

    <script>
    function save() {
    localStorage.setitem("BloodCoin", BloodCoin);
    }
    function load() {
    BloodCoin = localStorage.getitem("BloodCoin");
    BloodCoin = parseInt(BloodCoin);
    document.getElementById('text').value = BloodCoin;
    }
    </script>
    </body>
    </html>

  11. when i click on image numbers wont show up and nothing hapends
    here is code

    <script type="text/javascript">
    var Narutocount = 0;
    </script>
    <html>
    <head><title>0 Narutos</title></head>
    <body>

    <a href=# onclick="add()"><img src="naruto.png"></a>
    <br><br>
    You have:
    <input type="text" id="text" disabled style= text-align:center>
    <script type="text/javascript">
    function add() {
    Narutocount = Narutocount + 1
    document.getElementById('text').value = Narutocount;
    document.title = Narutocount + "narutos";}

    </html>

  12. The coding for the save and load buttons are always on the site, and I can't even get the save or load buttons to save or load.
    This basically means that your tutorial is invalid.

  13. I already know these stuff but I wanted to check out what other people do.
    May I ask why you don't do the short way like
    document.getElementById('text').value = cookiecount += 1;

  14. C
    Co
    Coo
    Cook
    Cooki
    Cookie
    Cookies
    Cookie
    Cooki
    Cook
    Coo
    Co
    C

  15. It didn't work at the save/load part 🙁

  16. Plss use style.css and a js file to do this because doing everything in html is not clever at all

  17. function add() {

    cookiecount = cokiecount + 1 ?
    help, please!

  18. how do u get that text on it? i only have the defaulty text

  19. its not working for me
    Can someone help me ?

  20. Did not work for me, tried this a year ago and I still have it saved for an unknown reason.

  21. Save and load are not working pls help me.

  22. ik im hella late but if anyone can help me when I click save and load it says can not get /a. Im not sure what i did

    Code:

    <script>

    var cookiecount = 0;
    </script>
    <html>
    <head><title> 0 cookies</title></head>
    <body>
    <a href=# onclick="add()"><img src ="pic.jpg"></a>
    <br><br>

    You got:
    <input type="text" id="text" disabled style= text-align: center>
    <script>

    function add(){

    cookiecount = cookiecount +1
    document.getElementById('text').value = cookiecount;
    document.title = cookiecount + "cookies";
    }
    </script>

    cookies
    <br> <br>
    <button><a href="#" onClick="save()">Save</a></button>
    <button><a href="a" onClick="load">Load</a></button>
    <script>

    function save(){

    localStorage.setItem("cookiecoun", cookiecount);

    }
    function load(){

    cookiecount = localStorage.getItem("cookiecount");
    cookiecount = parseInt(cookiecount);
    document.getElementById('text').value = cookiecount
    }

    </script>
    </body>

    </html>

  23. THIS SAVE/LOAD IS MAKED BAD!!!!! I HAVE SOLUTION FOR ALL!!!! USE THIS ALL!! U NEED TO LOOK SOME WRITTEN TUTORIALS AND LOOK CONSOLE BRO BETTER NEXT TIME

    function save(){
    sessionStorage.setItem("cookiecount", cookiecount)
    }
    function load(){
    cookiecount = sessionStorage.getItem("cookiecount")
    cookiecount = parseInt(cookiecount)
    document.getElementById('text').value = cookiecount;
    document.title = cookiecount + " cookies"
    }

  24. Check point: 12:30

    My hard work has now been retrieved by scripting and coding heaven

  25. I made a game and it works in the live preview, but I tried uploading it to a github site so my friends can try it and it just shows <a href=# onclick="add()"> my picture </a>
    And <input type="text" id="text" disabled style=text-align:center> underneath. When I click on the image nothing happens. Can someone help?

  26. "Oh wait we can't add a space cause it's not in a paragraph tag… oh well."

    ..Then put it in a paragraph tag? Lmao.

  27. help my code ain't working!
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="generator" content=""/>
    <script type="text/javascript">
    function update() {
    document.getElementById('text').value = computercount;
    document.title = computercount + " Computers";
    document.getElementById('amountProgrammer').innerHTML = "You Own " + Programmer + " Programmers";
    }
    var computercount = 0;
    var Programmer = 0;
    function timer() {
    computercount + computercount = autoClick;
    update();
    }
    setInterval(timer, 1000)
    </script>
    <title>Computer Company</title>
    <style type="text/css">
    input.c1 {text-align:center; height:150px; width:250px; font-size: 400%; color: blue; font-weight: bold;}
    </style>
    </head>
    <body>
    <a href="#" onclick="add()">
    <img src="comp.jpeg" alt="clicker" align="left" width="500" height="500"/>
    </a>
    <br/>
    <br/>
    <h1>You got:</h1>
    <form>
    <input type="text" id="text" disabled="disabled" class="c1"/>
    <script type="text/javascript">
    var computercount = 0;

    function add() {
    computercount = computercount + 1;
    document.getElementById('text').value = computercount;
    document.title = computercount + " Computers";
    }

    </script>
    Computers.
    <br/>
    <br/>
    <button>
    <a href="#" onclick="save()">Save</a>
    </button>
    <button>
    <a href="#" onclick="load()">Load</a>
    </button>
    <br/>
    <br/></form>
    <p>Hire a Programmer</p>
    <button>
    <a href="#" onclick="buyProgrammer()">
    <img src="Programmer.jpg" width="60px" height="40px"/>
    </a>
    </button>
    <p id="Programmers">Computers</p>
    <p id="amountProgrammer">You Own 0 Programmers</p>
    <script type="text/javascript">
    function save() {
    localStorage.setItem("computercount", computercount);
    }
    function load() {
    computercount = localStorage.getItem("computercount");
    computercount = parseInt(computercount);
    document.getElementById('text').value = computercount;
    document.title = computercount + " Computers";
    }
    function buyProgrammers() {
    if (computercount &gt;= (Programmer+1) * 12 ))
    {
    computercount = computercount – ((Programmer+1) * 12);
    Programmer = Programmer + 1;
    document.getElementById('text').value = computercount;
    document.title = computercount + " Computers";
    }
    }

    </script>
    </body>
    </html>

  28. I simply just did this:

    <!DOCTYPE html>

    <html lang="no">

    <head>

    <title>

    Click!

    </title>
    <body>

    <button onclick="counterClick()">Click me!</button>

    <center>

    <h2 id="counter">

    </h2>

    </center>

    <script>

    var clicks = 0;

    function counterClick(){

    clicks += 1;

    document.getElementById("counter").innerHTML = clicks;

    }

    </script>

    <style>

    body{

    background-color: gray;

    }

    </style>

    </body>

    </head>

    </html>

    but that was the most simple way possible

  29. not working!! the how much cookies thing does not change

  30. for a moment I was lost, what u make this function work without define a var? I have to do this to make it work, however, nice video!

  31. Leeson please reply, when i do the "a href" in the button, it doesnt show the button, its the correct script but it doesnt work, please help.

  32. I have all the right code up to 7:41 so far but it won’t add cookies when I click it? Is the “document.getElementById(‘text’).value = cookiecookiecount;” right?

    Edit: it says it cannot property ‘value’ of null

  33. the description tells me you didn't do all of this

    EDIT: I'm talking about the series NOT EVEN BEING DONE YET!

  34. When you did cookiecount = cookiecount + 1 you could just did cookiecount++

  35. I lost 1 hour on your videos, and nothing you show in videos just not working!

  36. So with the functions when I’ve put “add” “save” and “load” they turn purple in the code does anyone know why that is happening because I can’t actually do anything on the website other than look at it lol

Leave a Reply

Your email address will not be published. Required fields are marked *