Skip to main content

Tutorial

Let's discover Cog in less than 5 minutes.

In this tutorial, we'll walk through the process of creating a simple counter application using Cog. We'll be using the <script> tag to include the Cog library and access it through the global Cog object.

Get started by creating a new index.html file and adding Cog script to the <head> tag.

index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Add Cog script tag here 👇 -->
        <script src="https://unpkg.com/@mzrk/cog@latest/lib/cog.js"></script>
    </head>
    <body></body>
</html>

Or try Cog immediately with CodePen.

Define UI in HTML​

First we'll define a container element for our app in the <body> tag. We'll make a div and give it an id with the value "app" so that we can find it later in our JavaScript logic. Inside this container, we'll add a div element for the counter and a button element to increment the counter.

In the HTML, you can use {{ count }} to bind a variable to the text content of an element.

index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Add Cog script tag here 👇 -->
        <script src="https://unpkg.com/@mzrk/cog@latest/lib/cog.js"></script>
    </head>
    <body>
        <div id="app">
            <div>Counter: {{ count }}</div>
            <button onclick="increment()">Increment</button>
        </div>
    </body>
</html>

We're using HTML's built-in onclick event attribute to call the increment() function when the button is clicked. Now let's go and define out {{ count }} reactive variable and increment() callback in our app logic.

Logic in JavaScript​

Create a new javascript file to write the app logic. You can name it whatever, we'll use index.js in this example.

Make sure to add your app logic file to your index.html before the closing </body> tag.

index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <script src="https://unpkg.com/@mzrk/cog@latest/lib/cog.js"></script>
    </head>
    <body>
        <div id="app">...</div>
        <!-- Include your script here 👇 -->
        <script src="./index.js"></script>
    </body>
</html>

Now, open up your index.js file in your favorite editor. In this file, we'll define our count reactive variable.

We'll use Cog's variable() method to do so:

index.js
const counter = Cog.variable("count", 0);

In this example, counter is a reactive variable and count is the name of the state variable used in the HTML template.

We'll also add a function to increment the counter:

index.js
const counter = Cog.variable("count", 0);

function increment() {
    counter.set(counter.value + 1);
}

Notice that we've used the counter.set() function to update the value that we've accessed by using count.value getter. You can read more about variable's getters/setters here.

Now we can add an event listener that'll fire when the DOM is loaded and ready so that we can render our app. We'll use document's getElementById() method to select our container with the id "app" and we'll pass it to Cog's render() method.

index.js
const counter = Cog.variable("count", 0);

function increment() {
    counter.set(counter.value + 1);
}

document.addEventListener("DOMContentLoaded", function () {
    const rootElement = document.getElementById("app");

    render(rootElement);
});

That's it! Now, when you click the "Increment" button, the counter will increase by 1. The {{ count }} variable in the HTML will automatically update to reflect the new value.

Congratulations! You've just created a simple counter application using Cog. As you can see, Cog makes it easy to create reactive web applications with minimal code. Happy coding!