HTPL is a tool designed to convert standard HTML into a more structured and programmable format, enhancing the development process of web applications. This approach aims to streamline HTML coding by introducing programming constructs, making it more efficient and maintainable.
This project provides a platform to transform traditional HTML code into HTPL, allowing developers to:- Enhance Readability: By structuring HTML with programming paradigms, the code becomes more organized and easier to understand.
- Improve Maintainability: Programmable structures facilitate easier updates and modifications.
- Promote Reusability : Components can be reused across different parts of a project, reducing redundancy.
To utilize HTPL in your project:
- Clone the Repository: Obtain the latest version of the project.
- Explore the Files: Familiarize yourself with the provided index.html, script.js, and style.css files.
- Convert HTML to HTPL: Use the tools/scripts provided to transform your existing HTML code into HTPL.
look at 'index.html' file to undertand better
| Tag | Purpose | Structure |
|---|---|---|
| use-var | Declare new variable (or change its value) | <use-var name="<variableName>"><value></use-var> |
| def-const | Declare new constant | <def-const name="<constantName>"><value></def-const> |
| if-condition | To implement a condition statement | <if-condition condition="<condition>" state="<state>"></if-condition> |
| repeat-times | Loop statement with a known number of iterations | <repeat-times times="<HowManyTimes>"></repeat-times> |
| use-procedure | Declare/define a procedure | <use-procedure type="<declare | define>"><code></use-procedure> |
| while-loop | Loop statement with a condition | <while-loop condition="<condition>"></while-loop> |
| math-calc | To do math operations (simple or complex with functions like abs and sqrt) | <math-calc elem="<functionName(from Math lib of JavaScript), only if lib='true'>" lib="true||false (true if you'll use Math lib, otherwise false)"> "<operationSTATEMENT>" </math-calc> |
| print-eval | Execute something and print the result inside this element | <print-eval><instructions/tags(for HTPL tags or JS code) : !Be careful with types especially strings></print-eval> |
| new-alrt | To do different alert types (prompt, normal alert, confirm) | <new-alrt type="<itstype:prompt,alert,confirm>"><message></new-alrt> |
For a detailed walkthrough and demonstration, refer to the project explanation video:
overview playlist
