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:
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)
03.01.2022
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 😀
surprisingly this was extremely helpful, good job!
wen i click cookie nothing happen
when i click on load it says NaN cookies.
hey arent the saved data pieces from the save and load called cookies?? coincidence? I THINK NOT!
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>
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)
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>
<a href=# onclick="add()"><img src="Cookie.png"</a>
the </a> is in red, why ? I know it's wrong, BUT WHY ?
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>
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>
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>
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.
YOU=BOSS
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;
C
Co
Coo
Cook
Cooki
Cookie
Cookies
Cookie
Cooki
Cook
Coo
Co
C
It didn't work at the save/load part 🙁
Plss use style.css and a js file to do this because doing everything in html is not clever at all
function add() {
cookiecount = cokiecount + 1 ?
help, please!
dont work on 2018
how do u get that text on it? i only have the defaulty text
its not working for me
Can someone help me ?
How do I rename
Did not work for me, tried this a year ago and I still have it saved for an unknown reason.
It shows a broken image for me please help
Save and load are not working pls help me.
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>
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"
}
Check point: 12:30
My hard work has now been retrieved by scripting and coding heaven
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?
6:30 I know im late but this is where i left of
"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.
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 >= (Programmer+1) * 12 ))
{
computercount = computercount – ((Programmer+1) * 12);
Programmer = Programmer + 1;
document.getElementById('text').value = computercount;
document.title = computercount + " Computers";
}
}
</script>
</body>
</html>
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
not working!! the how much cookies thing does not change
when ever i load it just says NaN
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!
6:40 saved
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.
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
does matter if i make all this on notepad++
how i make save and load becose i cant do it
the description tells me you didn't do all of this
EDIT: I'm talking about the series NOT EVEN BEING DONE YET!
When you did cookiecount = cookiecount + 1 you could just did cookiecount++
i dont see cookie
load didnt work for me
I lost 1 hour on your videos, and nothing you show in videos just not working!
did you use electron?
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
Saving didnt work