BASICS
Change the Text of an Element using JavaScript
Explore the concepts and examples below to master this topic.
Code Example
document.getElementById("btn").addEventListener("click", function() {
document.getElementById("text").innerText = "Hello, JavaScript!";
});
Video Walkthrough
Coming soon — in-depth video explanation for this topic.
Hide and Show Elements using JavaScript
Explore the concepts and examples below to master this topic.
Code Example
document.getElementById("hide").addEventListener("click", function() {
document.getElementById("box").style.display = "none";
});
document.getElementById("show").addEventListener("click", function() {
document.getElementById("box").style.display = "block";
});
Video Walkthrough
Coming soon — in-depth video explanation for this topic.
INTERMEDIATE
Toggle an Element's Visibility
Explore the concepts and examples below to master this topic.
Code Example
document.getElementById("toggle").addEventListener("click", function() {
let box = document.getElementById("box");
box.style.display = (box.style.display === "none") ? "block" : "none";
});
Video Walkthrough
Coming soon — in-depth video explanation for this topic.
Animate an Element using JavaScript
Explore the concepts and examples below to master this topic.
Code Example
document.getElementById("animate").addEventListener("click", function() {
let box = document.getElementById("box");
box.style.transition = "left 1s";
box.style.position = "relative";
box.style.left = "250px";
});
Video Walkthrough
Coming soon — in-depth video explanation for this topic.
ADVANCED
Perform AJAX Request with JavaScript
Explore the concepts and examples below to master this topic.
Code Example
document.getElementById("loadData").addEventListener("click", function() {
fetch("https://api.example.com/data")
.then(response => response.text())
.then(data => {
document.getElementById("dataContainer").innerHTML = data;
});
});
Video Walkthrough
Coming soon — in-depth video explanation for this topic.
Implement Datepicker using JavaScript
Explore the concepts and examples below to master this topic.
Code Example
document.addEventListener("DOMContentLoaded", function() {
let dateInput = document.getElementById("datepicker");
dateInput.type = "date";
});
Video Walkthrough
Coming soon — in-depth video explanation for this topic.
⚡ Quick Reference — Recipe
Use the reference cards below for fast lookup. Perfect for brushing up on syntax while you cook your code. 🍳
Change the Text of an Element using JavaScript
document.getElementById("btn").addEventListener("click", function() {
document.getElementById("text").innerText = "Hello, JavaScript!";
});
Hide and Show Elements using JavaScript
document.getElementById("hide").addEventListener("click", function() {
document.getElementById("box").style.display = "none";
});
document.getElementById("show").addEventListener("click", function() {
document.getElementById("box").style.display = "block";
});
Toggle an Element's Visibility
document.getElementById("toggle").addEventListener("click", function() {
let box = document.getElementById("box");
box.style.display = (box.style.display === "none") ? "block" : "none";
});
Animate an Element using JavaScript
document.getElementById("animate").addEventListener("click", function() {
let box = document.getElementById("box");
box.style.transition = "left 1s";
box.style.position = "relative";
box.style.left = "250px";
});
Perform AJAX Request with JavaScript
document.getElementById("loadData").addEventListener("click", function() {
fetch("https://api.example.com/data")
.then(response => response.text())
.then(data => {
document.getElementById("dataContainer").innerHTML = data;
});
});
Implement Datepicker using JavaScript
document.addEventListener("DOMContentLoaded", function() {
let dateInput = document.getElementById("datepicker");
dateInput.type = "date";
});
Recipe Complete! 🎉
You've explored the full Javascript recipe.
Keep practising — a language a day keeps AI away! 🤖
