This content originally appeared on DEV Community and was authored by Parth Chovatiya
Frameworks like React and Vue are popular, but there’s a lot you can do with plain JavaScript. Let’s explore some techniques for building interactive web applications without any frameworks.
DOM Manipulation
Directly manipulate the Document Object Model to create dynamic content.
document.getElementById('myButton').addEventListener('click', () => {
const newElement = document.createElement('p');
newElement.textContent = 'Hello, World!';
document.body.appendChild(newElement);
});
Fetch API
Interact with server-side APIs using the Fetch API.
async function loadData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
}
document.getElementById('loadDataButton').addEventListener('click', loadData);
Local Storage
Store data locally in the user’s browser.
function saveData() {
localStorage.setItem('name', 'Alice');
}
function loadData() {
const name = localStorage.getItem('name');
console.log(name); // Alice
}
document.getElementById('saveButton').addEventListener('click', saveData);
document.getElementById('loadButton').addEventListener('click', loadData);
CSS Transitions and Animations
Enhance user experience with smooth transitions and animations.
.button {
transition: background-color 0.3s ease;
}
.button:hover {
background-color: blue;
}
Web Components
Create reusable custom elements with Web Components.
class MyElement extends HTMLElement {
connectedCallback() {
this.innerHTML = '<p>Hello, Web Component!</p>';
}
}
customElements.define('my-element', MyElement);
Conclusion
Vanilla JavaScript is powerful and versatile. By mastering DOM manipulation, the Fetch API, local storage, CSS transitions, and Web Components, you can build fully-featured interactive web applications without relying on frameworks. Happy coding!
This content originally appeared on DEV Community and was authored by Parth Chovatiya