UPYOURS Basics

UPYOURS is a lightweight JavaScript framework for adding real-time interactivity to a web page using a global update loop. Simply define a function for a CSS selector, and each frame, all matching elements will run that function.

<style>

    .activeCounter
    {
        font-style: italic;
        background-color:red;
    }

</style>

<script>

    UPYOURS['.activeCounter'] = function()
    {
        this.myCount ??= 0;
        this.myCount++;
        this.textContent = "Stop/Start: "+this.myCount;
    }

    UPYOURS['button'] = function()
    {
        if (this.event_click)
        {
            this.classList.toggle("activeCounter");
        }
    }

</script>
            

With UPYOURS, all you have to do is add/remove CSS classes in order to change the behavior of an element. The same way you can mix and match CSS styles, you can do the same with JavaScript behaviors.

UPYOURS was inspired by game development engines like Unity and GameMaker, where systems are built around a global update loop. It's designed to be simple and lightweight, with no dependencies and no configuration. Just include the UPYOURS.js file in your HTML, define your functions, and you're good to go. There's no special syntax or API to learn, just plain JavaScript and CSS.

Ideal use cases for UPYOURS include prototyping, simple games, marketing websites, and any other situation where you want to add interactivity to a web page without having to write a lot of code or set up a complex framework.

Guide

Setup

Using UPYOURS is as simple as including the UPYOURS.js file in your HTML and defining functions for CSS selectors. The UPYOURS.js file will automatically run the functions for each matching element every frame. You don't have to initialize or configure anything, and you don't need to add anything to your HTML markup.

//Load UPYOURS.js first before defining your functions
<script src="src="https://cdn.jsdelivr.net/gh/tomsennett/UPYOURS/upyours.js"></script>
<script>

    UPYOURS[".someClass"] = function()
    {
        //Code here will run every frame on all elements with the CSS class 'someClass'
    }

    UPYOURS[".anotherClass"] = function()
    {
        //Code here will run every frame on all elements with the CSS class 'anotherClass'
    }

...

</script>

Inside Your UPYOURS Functions

Inside an UPYOURS[] function, the this keyword refers to the element that the function is being run on. You can use this to access and modify the element's properties, such as this.textContent or this.style. You can also use this.classList to add or remove CSS classes. These are all standard JavaScript DOM properties, but you can also define and use custom properties on the element via this.

//This function will run every frame on all elements with the class 'activeCounter'
UPYOURS['.activeCounter'] = function()
{
    //If the element doesn't have a myCount property, set it to 0
    this.myCount ??= 0;

    //Increment the myCount property
    this.myCount++;

    //Set the text content of the element to the current value of myCount
    this.textContent = "Stop/Start: "+this.myCount;
}

Events

Any element running an UPYOURS[] function will automatically have event listeners added to it. In the frame an event is received, a custom property on the element called event_{{event_name}} will be set to the event object. This way, inside an UPYOURS[] function you can check if an event has occurred, and access the event object if it has.

UPYOURS['.myClass'] = function()
{
    if (this.event_keydown)
    {
        //Code here will run when a key is pressed and the element has focus
        alert("The key pressed was: "+this.event_keydown.key);
    }
}

GitHub and Examples

Find the code, further docs, and examples on GitHub