# Increment / Events

Let's make the About page more interactive by adding a simple "click and increment" feature. Each click will update the displayed count, showing how many times the button has been clicked.

### Create Your View

First, create a new view template file named `templates/views/blocks/Increment.js`. Define the view function as follows:

```js
export default function Increment({ props, view }) {

  const clickEvent = view.bind((event) => {
    props.increment += 1;
  });
  
  return `
  <article class="relative card-1 border-bottom ingress">
    <div class="wrapper md">
      <header class="mb">
        <h2 class="headline-2">${props.increment > 0 ? "Incremented" : props.title}</h2>
        <p>Has been incremented <strong>${props.increment}</strong> times!</p>
      </header>
      <a class="button bg-primary sm my-btn" href="#2" onclick="${clickEvent}">Increment +</a>
    </div>
  </article>
  `;
}
```

**Note:** We created a new view in the directory `blocks`. Although the increment view can function like any other view, we intend to use it specifically as a block view. This means we will extend a view—specifically, the start view—with the increment.

### Quick Breakdown

* **Event Binding**: We start by binding the click function to a constant named `clickEvent`, which will execute when the button is clicked.
* **Triggering the Event**: We call `clickEvent` in the button's `onclick` attribute, triggering the function whenever the button is clicked, updating the counter and headline dynamically.

**Note:** It will work exactly the same for `onchange`, `oninput`, and other DOM events.

### Controller

Now that we have our increment block view, we need to render it in the start view:

```js
import Increment from "@/templates/views/blocks/Increment";

export default function Start({ props, view }) {
  return `
    <article class="relative card-1 border-bottom ingress">
      <div class="wrapper md">
        <h1 class="headline-1">${props.title}</h1>
        <p>${props.description}</p>
      </div>
    </article>
    <div class="increment">
      ${view.block(Increment, { title: "Start incrementing", increment: 0 })}
    </div>
  `;
}
```

**Visit your browser to see the results!**

<figure><img src="/files/LSy2t3ltwG04Mp3yqbRb" alt=""><figcaption></figcaption></figure>

### Summary

With these modifications, the code appears much cleaner and highly modular. You've now familiarized yourself with the Stratox architecture, and every example in this tutorial serves an essential purpose. You're free to utilize them as you see fit for your application.

<details>

<summary>Response Arguments</summary>

If you want to know more about the response arguments, then visit the [Response Arguments](/configs/response-arguments.md) page.

</details>

<details>

<summary>Template Layouts</summary>

Here are some important options to consider when loading and initializing views:

* **Static Views**: These are views that are bundled and loaded synchronously with the application. They are commonly used for static content that does not change frequently. [Read more](/views-components/layout-and-components.md)
* **Asynchronous Views**: Asynchronous views are loaded dynamically when needed, which can help improve performance by reducing initial load times. They are useful for content that may change frequently or is not required immediately upon application startup. [Read more](broken://pages/GNorYxQO3RaqhliVEBds)

</details>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://stratox.wazabii.se/step-by-step-tutorial/increment-events.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.