A starter app built with Yaseer for creating single page applications.
- Clone the repository:
git clone https://github.com/fahdfady/yaseer-first-app - Install dependencies:
npm install
the app uses Vite
- Run the app:
npm run dev - Open your browser and navigate to
http://localhost:5173
Contributions are welcome! Please follow the contribution guidelines.
This project is licensed under the MIT License.
For any questions or feedback, please reach out @ Fahd's Twitter.
This TypeScript code is a simple web application that uses the yaseer library to create and manage HTML elements and their interactions.
The code performs the following steps:
- Import necessary functions from the yaseer library.
- Select the root HTML element with the id "root" from the DOM.
- Create several HTML elements using the template function from yaseer. These elements include a div, an h1, two p elements, a button, and a span. Each element is created with specific attributes and content.
- Create a signal using the createSignal function to manage the state of a count variable, starting at 0. The countElement is an h1 element that displays the current count.
- Define the increment function, which increases the count by 1 each time it's called and logs the new count and a "hello world!" message to the console. This function is assigned as the onclick handler for the increaseBtn button, so it's called each time the button is clicked.
- Use the createEffect function to create a side effect that runs whenever the count changes. This side effect updates the text content of the countElement to display the current count.
- Use the nest function to group multiple elements under a single parent. In this case, it's used to nest the h1, p, span, countElement, increaseBtn, and br elements under the div element.
- Finally, use the renderAppDDOM function to render the div element (and all its nested elements) under the root element. This updates the DOM to display the created elements and their content.