Why i created Mahal.js ?

mahal.js logo

1. Documentation

---
name: new_todo.mahal
description: It helps you create new task. Contains input box to input a task and a button to submit task.
events:
newTask : emits the task details when click on add.
dateCreated: April 24, 2022
---
<html>
<div class="row content-center content-v-center">
<div class="column">
<div class="textbox">
<input :model(title) placeholder="Enter task title" type="text" />
</div>
<div class="textbox margin-top-20px">
<input :model(description) type="text" placeholder="Enter task description" />
</div>
</div>
<button on:click={'validate' | 'addTask' } class="btn primary btn-add">
Add
</button>
</div>
</html>
<script>
import { Component, reactive } from "mahal";
export default class extends Component {
@reactive
title = "";
@reactive
description = "";
validate() {
if (!this.title) {
alert("Title can not be empty");
return false;
} else if (!this.description) {
alert("Description can not be empty");
return false;
}
return true;
}
addTask(isValid) {
if (!isValid) {
return;
}
this.emit("newTask", {
title: this.title,
description: this.description,
});
this.title = this.description = "";
}
}
</script>
<style>
.btn-add {
height: 50px;
width: 100px;
margin-left: 25px;
}
.textbox input {
width: 100%;
}
</style>

2. Code scalability

3. No Vdom

4. Typing

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ujjwal Gupta

Ujjwal Gupta

Frontend lead Polygon | Creator of jsstore, mahaljs | sqlweb, fortjs | opensource creator | we3, blockchain, solidity | javascript