I wanted to create an original piece of code which did something.
And I did with Chop Wood.
Something simple, but something which took an input and then changed an attribute on the DOM. Or is it “element”, I am still not well versed in javaspeak.
This week has all been about learning a few simple things to the point of where I could actually use them:
- querySelector
- getElementById
- function()
- addEventListerner
- Global variables
- Function variables
I have spent 7 days or more studying the above, in various youtube video tutorials, books and wikis. All I wanted to do was present and object with a variable, click on that object which reduces that variable by one and then changes another variable. I then wanted the variable that had been changed to be clicked on and change again, as well as changing another variable and so on.
Cascading the effect down a list of objects.
It seems simple, well I thought it did and found it incredibly hard, but I stuck with it. Although causing my family to emit radioactive death rays towards me as I wouldn’t stop going on about it. Ever been there?
One of the problems is the much talked about issue of function variables and global variables, I thought it would be easy to pass a variable which originated in a function to play in the global scope, no no no, can’t do that.
I read you could create the variable outside the function and then pass it in, but still I couldn’t get it to work.
I then found a work around and came up with this:
let treecard = document.querySelector('.this-tree'),
count = 10,
logfun = 0;
//Tree counting function
treecard.addEventListener('click', function() {
//tree
if (count <= 0) { alert("You are out of trees, dumb dumb. Go find some more."); return } else { count--; document.getElementById('tree-score').innerHTML = count; logfun++; document.getElementById('log-score').innerHTML = logfun; } });
I absolutely expect there to be an easier work around and may even be schooled by another javascript noob, which I am fine with this. I have only been serious about learning javascript for a few months so any criticism from coders more experienced than me is welcome.
I still can't wrap my head around where the variable of "count" actually lives, is it on the DOM or is it in the script. And is a global variable(I assume it is) or a function variable?
I have read a number of code examples of global vs function variables and become even more confused, but I know clarity will come. As it has somewhat with querySelector and getElementById and I get a kick out of manipulating the DOM with them. My question is, why bother with getElementById anymore. Is it just habit that people still use it?
Also, getting to grips with ES6, which seems the wise thing to do. All the old tutorials still use var, whilst I am focusing on only using let and cost. Which seems to be the perceived wisdom. I realise it is worth getting to know the old way of doing things, especially if working on legacy cod.
So go look at what I did, yes, it will take you 17 seconds to get it and then get bored, but I am so proud that I got it to work. Real agony was spent on this.
I have new things to add updates to the Chop Wood game, which will continue my learning, like:
- Animation of objects when performing
- Sounds when objects performing
- Time delay for better usability
- Progress bar, time animated
- Regrow trees button with cost to score variable
- Market place to sell and buy items from the game, variable pricing
- Save game to JSON
- Save game to local storage on browser
- Save game to Firebase
- Save game to SQL
A long way to go yet, but I have set myself the goal of learning javascript this year. I expect the above to take another 3 -4 months to complete. But I love learning this stuff and creating something where nothing existed before, even if the actual thing is so simple.
Any comments or suggestions please make them in the comments. Would love to hear feedback.
Thanks to the Youtube channels of Brad Traversy and Dylan Isreal, I bought Brad's Modern Javascript course from Udemy, highly recommend it.