16. **Toggle Password Visibility**:
```javascript
const passwordInput = document.getElementById("password");
const toggleButton = document.getElementById("togglePassword");
toggleButton.addEventListener("click", function() {
if (passwordInput.type === "password") {
passwordInput.type = "text";
} else {
passwordInput.type = "password";
}
});
```
This code allows users to toggle the visibility of a password input field by clicking a button. It changes the input type between "password" and "text."
17. **Countdown Timer**:
```javascript
const countdown = document.getElementById("countdown");
let seconds = 60;
function updateCountdown() {
countdown.textContent = `Time left: ${seconds} seconds`;
seconds--;
if (seconds < 0) {
clearInterval(timer);
countdown.textContent = "Time's up!";
}
}
const timer = setInterval(updateCountdown, 1000);
```
This code creates a simple countdown timer that updates every second and displays the time remaining. It stops and shows "Time's up!" when the countdown reaches zero.
18. **Responsive Navigation Menu (Hamburger)**:
```javascript
const menuToggle = document.getElementById("menuToggle");
const navLinks = document.getElementById("navLinks");
menuToggle.addEventListener("click", function() {
navLinks.classList.toggle("show");
});
```
This code implements a responsive navigation menu with a hamburger icon. Clicking the icon toggles the visibility of the navigation links.
19. **Local Storage for User Preferences**:
```javascript
const darkModeToggle = document.getElementById("darkModeToggle");
darkModeToggle.addEventListener("click", function() {
if (localStorage.getItem("darkMode") === "enabled") {
localStorage.setItem("darkMode", "disabled");
} else {
localStorage.setItem("darkMode", "enabled");
}
toggleDarkMode();
});
function toggleDarkMode() {
document.body.classList.toggle("dark-mode");
}
// Check local storage for user preference on page load
if (localStorage.getItem("darkMode") === "enabled") {
toggleDarkMode();
}
```
This code allows users to toggle dark mode on a website and stores their preference in local storage so that it persists across sessions.
20. **Dynamic Content Loading (Fetch Data)**:
```javascript
const fetchDataButton = document.getElementById("fetchDataButton");
const dataDisplay = document.getElementById("dataDisplay");
fetchDataButton.addEventListener("click", function() {
fetch("
https://api.example.com/data")
.then(response => response.json())
.then(data => {
dataDisplay.textContent = JSON.stringify(data);
})
.catch(error => {
console.error('Error:', error);
});
});
```
This code fetches data from an API when a button is clicked and displays the retrieved data on the web page.
These JavaScript code snippets cover a variety of practical scenarios, including UI interactions, timers, navigation menus, user preferences, and data fetching. They can enhance the functionality and user experience of your web applications.
