FreeKode - Counter App in Kode.JS [My JS Framework]


Download  View Code in Action
Files/counter.html

Counter App in Kode.JS [My JS Framework]

I uploaded a post on FreeKode a few hours ago that contained the code for my own framework. A lot of people asked me to give some examples, along with the documentation. I'm still working on the docs, but before that, have a look at this counter app example built with Kode.JS!

Writing in Kode.JS is super simple. We've already got events, interpolation, Kode data storage, and so much more. Let's have a look at the counter app!

This is the final code, in case you want it real quick:

<!DOCTYPE html> <html lang="en">= <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Counter in Kode.JS</title> </head> <body>     <button click="count()">Count</button>     <p i>{{ counter }}</p> </body> <script src="https://centeltech.com/kode.js/index.js"></script> <script>     appData({         counter: 0     });       function count() {         counter = parseInt(counter) + 1         state.save(counter)     } </script> </html>

In case you're wondering what all this is, don't worry, I'll explain the code step-by-step to you!

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Counter in Kode.JS</title> </head> <body>

We begin our HTML file the conventional way and set the title to Counter in Kode.JS.

<button click="count()">Count</button> <p i>{{ counter }}</p>

We then create a button. now, the click attribute for the button tag is an event. Events do something if something else happens. Here, when we click on the button, we call the count() function. We'll define the count() function later.

Next, the paragraph tag. You can see that it has an attribute i, which has no value. This tells Kode.JS that you want to call a variable here. Then, you write the standard interpolation syntax. You can explain interpolation like this:

You've defined a variable in your JavaScript code. Now, instead of accessing the paragraph element through the tag name or by ID or by its class, you can simply call the variable in the HTML.

Now, you can't just call a variable in HTML without a special syntax because Kode.JS would not know if you want to display the text counter on the screen or want to call a variable called counter. That is why we use two flower brackets {{, and a space, and then the name of the variable you want to call, and finally, put another space and end the two flower brackets like this: }}. This is how interpolation is done in most frameworks.

</body>

Then, we end the body tag.

<script src="https://centeltech.com/kode.js/index.js"></script>

Then, we link the code of Kode.JS with our HTML, otherwise we won't be able to run Kode.JS.

<script>     appData({         counter: 0     });       function count() {         counter = parseInt(counter) + 1         state.save(counter)     } </script>

This is the code that is used to count. First, we begin the <script> tag to write JavaScript inside, then we call the appData() function, in which we define our variables. Now, you can also define variables outside the Kode.JS's appData() function using the var statement, but if you do so, you will not be able to use interpolation

Then, we create a function called count() in which we add one to the counter variable, which was initially set to 0, whenever our function is called.

Now, you need to use state.save() with the variable you want to save, because in Kode.JS, when you change a variable, it doesn't get stored. So, if you want your change of +1 to be saved, you need to use state.save(), with the name of the variable you want to save in it. You can put as many variables as you like in the state.save() function, if you have defined it in the first place, and modified it. 

</html> And finally, we end the HTML tag! We did it!