The following tags are missing in the Root Layout: <html>, <body>.
yarn build again..env file.As someone who’s recently delved into the clean architecture (more on this later), I’ve come to recognize the importance of using modules in projects. As a newcomer to Vanilla JS, I’ve found a particularly effective way of achieving this. In this blog post, I’ll share my insights on using ESModules for better module management and efficient DOM manipulation.
One of the key challenges I encountered was figuring out how to add events to DOM elements, such as buttons, using scripts marked as modules and those that weren’t. When working with modules, it’s crucial to understand how to interact with the document object to manipulate the DOM. If this sounds confusing, don’t worry – the steps outlined below are simplified to help you get started.
Step 1: Set Up Your HTML Page Start by creating your HTML page and adding a script tag with type=’module’. Here’s a snippet of what it might look like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Timetable</title>
<script src="/src/app/main.js" type="module"></script>
</head>
<body>
<header></header>
<div id="timetable">
<h1>Timetable</h1>
<button id="btn">Click me</button>
</div>
</body>
</html>
Step 2: Initialize Your UI and Variables
Create an init function to initialize your user interface and any other critical variables. Here’s an example:
function init() {
const button = document.getElementById('btn');
button.addEventListener('click', () => {
bye();
});
const paragraph = createElement('p');
paragraph.innerText = 'Hello World';
document.body.appendChild(paragraph);
}
window.onload = init;
function bye() {
console.log('hello');
}
function getElementById(id) {
return document.getElementById(id);
}
function createElement(tag) {
return document.createElement(tag);
}
Step 3: Invoke Your init Function
Make sure your init function is invoked either through window.onload or directly using init().
window.onload = init;
// Alternatively
init();
This blog post is the beginning of a series aimed at simplifying your journey into utilizing ESModules for DOM manipulation in Vanilla JS. I encourage you to provide feedback and ask questions as we continue exploring this topic together.
Thank you for reading, and stay tuned for the next installment!
Your feedback is valuable – feel free to share your thoughts in the comments.
[Read More]I am currently busy building a virtual lab that will contain frontend, database connectivity, backend, and cloud infrastructure. I want these to be presented as components and to be independent of each other.
Imagine being able to switch your front end from React JS to Svelte without having to change the code that connects to AWS or Postgres.
Its a set of instructions from executing things from start to finish using a block of code. Its like a recipe that helps the computer know what to do.
// Use Case: Adding an Item to the Cart
// Step 1: User clicks on "Add to Cart" button
document
.getElementById("add-to-cart-button")
.addEventListener("click", function () {
// Step 2: Get the details of the selected item
const itemName = document.getElementById("item-name").innerText;
const itemPrice = parseFloat(
document.getElementById("item-price").innerText
);
// Step 3: Create an object to represent the item
const newItem = {
name: itemName,
price: itemPrice,
quantity: 1,
};
// Step 4: Add the item to the user's cart
// This is where you would have code to manage the cart, like an array or an object
// Step 5: Update the cart total and display
// This is where you would update the total price and show the cart contents to the user
// Step 6: Show a message to the user that the item was added
alert("Item added to cart: " + itemName);
});
The Software Architecture Handbook
Android Architecture Patterns — MVC, MVP, MVVM, MVI, Clean Architecture
The Clean Architecture — Beginner’s Guide
Clean Node.js Architecture —With NestJS and TypeScript
Why is Clean Architecture so Popular?
Clean Architecture on Frontend
https://github.com/bespoyasov/frontend-clean-architecture
[Read More]