DEV Community

somen das
somen das

Posted on

I added if-else & loops in HTML5

#webdev #javascript #html

So it's time to stop the meme that HTML is not a programming language. i just added support to HTML5 of for loops
if else conditions.
template inclusions.
automatic State rebuild on variable change.
lot's of things nowadays they have in bloatwares like react.

check it out on guthub under KTBsomen/httl-s
To use this library, simply include the script in your HTML file after the body tag this should be loaded at last after defining all custom components:

    <script src="https://cdn.jsdelivr.net/gh/KTBsomen/httl-s@main/statejs.js"></script>
Enter fullscreen mode Exit fullscreen mode 
<for-loop array="[1, 2, 3]" valueVar="item" indexVar="index" loopid="loop1">
    <template loopid="loop1">
        <p>Index: ${index}, Value: ${item}</p>
    </template>
</for-loop>
Enter fullscreen mode Exit fullscreen mode 
<condition-block ifid="condition1">
    <if-condition value="5" eq="5" elseid="conditionElse">
        <p>Condition is true!</p>
    </if-condition>
    <else-condition elseid="conditionElse">
        <p>Condition is false!</p>
    </else-condition>
</condition-block>
Enter fullscreen mode Exit fullscreen mode

here is a full example 

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <title>Reactive Counter with HTTL-S</title>
      <script src="https://cdn.jsdelivr.net/gh/KTBsomen/httl-s@main/statejs.js"></script>
   </head>
   <body>
      <condition-block ifid="condition1">
         <template ifid="condition1">
            <h1>Counter: {{ count }}</h1>
         </template>
      </condition-block>
      <button onclick="count++">Increment</button>
      <script>
         // Declare the reactive variable

         watch("count",(x,y)=>{
           setState()
         },0); // This makes `count` reactive and bindable in HTML
         initState()
      </script>
   </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
xwero profile image
david duymelinck • • Edited

It is not a programming language, you just made web components.
While they are in the HTML spec I consider it to be a hybrid between HTML and javascript. Like the CSS painting API is a hybrid between CSS and javascript.

All three of the elements of a webpage have their task, and that is ok. HTML is always going to be the element with the least programmability because it is the foundation.

Instead of keeping the components together I would split them. That way people can only load the component they need.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.