<!DOCTYPE html> 
<html lang="en"> 
<head>
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>To-do List</title>

/* Main container for the to-do list */
.todo-container {
  background-color: white; /* White background */
  padding: 20px; /* Padding around the content */
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  width: 100%; /* Full width */
  max-width: 400px; /* Limit on large screens */
}

/* Title styling */
h2 {
  text-align: center; /* Centered title */
  margin-bottom: 20px; /* Space below title */
}

/* Input section layout */
.input-section {
  display: flex; /* Side-by-side layout */
  gap: 10px; /* Space between input and button */
}

/* Input field styling */
#taskInput {
  flex: 1; /* Take up available space */
  padding: 10px; /* Padding inside input */
  border: 1px solid #ccc; /* Border style */
  border-radius: 5px; /* Rounded edges */
}

/* Add button styling */
#addTaskBtn {
  padding: 10px; /* Button padding */
  border: none; /* No border */
  background-color: #28a745; /* Green background */
  color: white; /* White text */
  border-radius: 5px; /* Rounded edges */
  cursor: pointer; /* Pointer cursor */
}

/* Task list styling */
ul {
  list-style-type: none; /* Remove bullets */
  padding: 0; /* Remove default padding */
  margin-top: 20px; /* Space above list */
}

/* Individual task item styling */
li {
  display: flex; /* Horizontal layout */
  flex-direction: column; /* Stack task and controls */
  padding: 10px; /* Padding inside task */
  border-bottom: 1px solid #ddd; /* Divider */
  position: relative; /* Position for delete button */
}

/* Task content layout */
.task-top {
  display: flex; /* Horizontal layout */
  justify-content: space-between; /* Space between task and delete */
  align-items: center; /* Center vertically */
}

/* Date display styling */
.date-added {
  font-size: 0.8em; /* Smaller font */
  color: gray; /* Gray text */
  margin-top: 5px; /* Space above date */
}

/* Delete button styling */
.delete-btn {
  background-color: red; /* Red background */
  color: white; /* White text */
  border: none; /* No border */
  padding: 5px 10px; /* Button padding */
  border-radius: 5px; /* Rounded edges */
  cursor: pointer; /* Pointer on hover */
}

/* Strike-through when task is completed */
.done {
  text-decoration: line-through; /* Line-through text */
  color: #999; /* Gray text */
}

/* Responsive design for smaller screens */
@media (max-width: 500px) {
  .input-section {
    flex-direction: column; /* Stack vertically */
  }

#addTaskBtn {
    width: 100%; /* Full-width button */
  }
}
</style>
</head>
<body>

<div class="todo-container">
<h2>To-do List</h2>

<div class="input-section">
  <input type="text" id="taskInput" placeholder="Enter a task"> 
  <button id="addTaskBtn">Add</button> 
</div>

// Function to get current date in readable format
function getCurrentDate() {
  const now = new Date(); // Current date and time
  return now.toLocaleString(); // Convert to readable string
}

// Function to add a new task
function addTask() {
  const taskText = taskInput.value.trim(); // Get input and trim whitespace

if (taskText !== '') {
    const li = document.createElement('li'); // Create new list item

// Create a container for task text and delete button
    const topSection = document.createElement('div'); // Container div
    topSection.className = 'task-top'; // Add class for layout

// Create span for the task text
    const taskSpan = document.createElement('span'); // Text element
    taskSpan.textContent = taskText; // Set task text

// Toggle strike-through on click
    taskSpan.onclick = () => {
      taskSpan.classList.toggle('done'); // Toggle "done" class
    };

// Create delete button
    const deleteBtn = document.createElement('button'); // Delete button
    deleteBtn.textContent = 'Delete'; // Button text
    deleteBtn.className = 'delete-btn'; // Class for styling

// Remove task when delete button is clicked
    deleteBtn.onclick = () => {
      taskList.removeChild(li); // Remove task item
    };

// Add task text and delete button to top section
    topSection.appendChild(taskSpan); // Add task text
    topSection.appendChild(deleteBtn); // Add delete button

// Create date element
    const dateSpan = document.createElement('span'); // Span for date
    dateSpan.textContent = 'Added: ' + getCurrentDate(); // Set date text
    dateSpan.className = 'date-added'; // Class for style

// Add everything to the task list item
    li.appendChild(topSection); // Add top section
    li.appendChild(dateSpan); // Add date
    taskList.appendChild(li); // Add to list

taskInput.value = ''; // Clear input
  } else {
    alert('Please enter a task!'); // Alert for empty input
  }
}

// Add task on button click
addTaskBtn.addEventListener('click', addTask); // Event for add button

// Add task on Enter key
taskInput.addEventListener('keypress', function(e) {
  if (e.key === 'Enter') { // If Enter key is pressed
    addTask(); // Call addTask function
  }
});
</script>
</body>
</html>

Prerequisite:
1. Get your free API key from https://openweathermap.org/api
2. Replace YOUR_API_KEY_HERE with your real API key in the code

<!DOCTYPE html>
<html lang="en">
<head>
  
  <meta charset="UTF-8">
  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <title>Weather App</title>

<style>
    /* Basic page reset and font */
    body {
      font-family: Arial, sans-serif; /* Sets a clean font */
      margin: 0; /* Removes default margin */
      padding: 0; /* Removes default padding */
      background: linear-gradient(to right, #2193b0, #6dd5ed); /* Background gradient */
      color: white; /* Text color */
      display: flex; /* Flexbox layout */
      justify-content: center; /* Center horizontally */
      align-items: center; /* Center vertically */
      height: 100vh; /* Full viewport height */
    }

/* Main container for the weather app */
    .weather-container {
      background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
      padding: 20px; /* Inner spacing */
      border-radius: 10px; /* Rounded corners */
      text-align: center; /* Center text */
      width: 90%; /* Responsive width */
      max-width: 400px; /* Limit max width */
    }

/* Input box styling */
    input[type="text"] {
      padding: 10px; /* Inner spacing */
      width: 80%; /* Responsive width */
      border: none; /* No border */
      border-radius: 5px; /* Rounded edges */
      margin-bottom: 10px; /* Spacing below */
    }

/* Button styling */
    button {
      padding: 10px 20px; /* Inner spacing */
      background-color: #4CAF50; /* Green background */
      color: white; /* Text color */
      border: none; /* No border */
      border-radius: 5px; /* Rounded corners */
      cursor: pointer; /* Pointer cursor on hover */
    }

/* Weather info display */
    .weather-info {
      margin-top: 20px; /* Space above */
    }

/* Icon for weather condition */
    .weather-icon {
      width: 100px; /* Fixed width */
      height: 100px; /* Fixed height */
    }

/* Responsive behavior for small devices */
    @media (max-width: 500px) {
      .weather-container {
        padding: 15px; /* Smaller padding */
      }

input[type="text"] {
        width: 100%; /* Full width */
      }
    }
  </style>
</head>
<body>
  
  <div class="weather-container">
    
    <h2>Weather App</h2>
    
    <input type="text" id="cityInput" placeholder="Enter city name">
    
    <button onclick="getWeather()">Get Weather</button>

<div class="weather-info" id="weatherInfo">
      
    </div>
  </div>

<script>
    // Function to fetch weather data
    function getWeather() {
      // Get the city entered by the user
      const city = document.getElementById('cityInput').value;

// If no city is entered, alert the user
      if (!city) {
        alert('Please enter a city name');
        return; // Stop function
      }

// Your OpenWeatherMap API key (replace with your actual key)
      const apiKey = 'YOUR_API_KEY_HERE';

// Construct the API URL with the city and key
      const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;

// Fetch data from the API
      fetch(url)
        .then(response => {
          // Check if response is ok
          if (!response.ok) {
            throw new Error('City not found');
          }
          return response.json(); // Parse JSON
        })
        .then(data => {
          // Extract required information
          const temp = data.main.temp; // Temperature
          const desc = data.weather[0].description; // Weather description
          const icon = data.weather[0].icon; // Icon code

// Construct icon URL from OpenWeatherMap
          const iconUrl = `https://openweathermap.org/img/wn/${icon}@2x.png`;

// Build HTML to display weather info
          const weatherHTML = `
            <h3>${data.name}</h3> 
            <img src="${iconUrl}" alt="Weather Icon" class="weather-icon"> 
            <p><strong>${temp}°C</strong></p> 
            <p>${desc}</p> 
          `;

// Insert the weather info into the page
          document.getElementById('weatherInfo').innerHTML = weatherHTML;
        })
        .catch(error => {
          // Handle errors, like city not found
          document.getElementById('weatherInfo').innerHTML = `<p>${error.message}</p>`;
        });
    }
  </script>
</body>
</html>

Calculator 1 - Basic

<!DOCTYPE html> 
<html lang="en">

<head>
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>Calculator App</title>

body {
      font-family: Arial, sans-serif; /* Sets font style */
      background: #f4f4f4; /* Light background color */
      display: flex; /* Enables flexbox for center alignment */
      justify-content: center; /* Horizontally centers the calculator */
      align-items: center; /* Vertically centers the calculator */
      height: 100vh; /* Full viewport height */
    }

.calculator {
      background: #222; /* Dark background for calculator */
      padding: 20px; /* Inner spacing */
      border-radius: 10px; /* Rounded corners */
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Subtle shadow */
      width: 100%; /* Full width */
      max-width: 400px; /* Max width on larger screens */
    }

.display {
      background: #000; /* Black background for display */
      color: #0f0; /* Green text like old calculators */
      font-size: 2em; /* Larger font for visibility */
      text-align: right; /* Right-align the numbers */
      padding: 15px; /* Spacing inside display */
      border-radius: 5px; /* Slight rounding */
      margin-bottom: 20px; /* Space below the display */
      overflow-x: auto; /* Allow scrolling for long numbers */
    }

.buttons {
      display: grid; /* Enables grid layout */
      grid-template-columns: repeat(4, 1fr); /* 4 columns of equal width */
      gap: 10px; /* Spacing between buttons */
    }

button {
      padding: 20px; /* Padding inside buttons */
      font-size: 1.2em; /* Slightly larger text */
      border: none; /* No border */
      border-radius: 5px; /* Rounded corners */
      background: #444; /* Dark button background */
      color: white; /* White text */
      cursor: pointer; /* Pointer cursor on hover */
      transition: background 0.2s ease; /* Smooth color change */
    }

button:hover {
      background: #666; /* Slightly lighter on hover */
    }

button.operator {
      background: #ff9500; /* Orange background for operators */
    }

button.equal {
      background: #34c759; /* Green background for equals button */
      grid-column: span 2; /* Make it span 2 columns */
    }

button.clear {
      background: #ff3b30; /* Red background for clear button */
    }

@media (max-width: 500px) {
      .display {
        font-size: 1.5em; /* Slightly smaller text on small devices */
      }

button {
        padding: 15px; /* Smaller buttons on mobile */
      }
    }
  </style>
</head>

<div class="display" id="display">0</div>

<div class="buttons">
      
      <button class="clear" onclick="clearDisplay()">C</button> 
      <button onclick="appendToDisplay('%')">%</button> 
      <button onclick="appendToDisplay('/')">/</button> 
      <button class="operator" onclick="appendToDisplay('*')">×</button>

// Function to append characters to the display
    function appendToDisplay(value) {
      // If display is 0, replace it. Otherwise, add value to it
      if (display.textContent === "0") {
        display.textContent = value;
      } else {
        display.textContent += value;
      }
    }

// Function to clear the display
    function clearDisplay() {
      display.textContent = "0"; // Reset display to 0
    }

// Function to calculate and display the result
    function calculateResult() {
      try {
        // Use eval to calculate result from string
        display.textContent = eval(display.textContent);
      } catch (error) {
        display.textContent = "Error"; // Show error if expression is invalid
      }
    }
  </script>
</body>

</html>

Calculator 2 - More Advanced

<!DOCTYPE html> 
<html lang="en">

<head>
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>Calculator App</title>

body {
      background: #121212; /* Dark theme */
      color: #fff;
      font-family: sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

.calculator {
      background: #222;
      padding: 20px;
      border-radius: 10px;
      width: 100%;
      max-width: 500px;
    }

.display {
      background: black;
      color: #0f0;
      padding: 15px;
      font-size: 2em;
      border-radius: 5px;
      text-align: right;
      overflow-x: auto;
      margin-bottom: 15px;
    }

.buttons {
      display: grid;
      grid-template-columns: repeat(6, 1fr); /* 6 buttons per row now */
      gap: 10px;
    }

button {
      padding: 12px;
      font-size: 1em;
      background: #444;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

button:hover {
      background: #666;
    }

.clear {
      background: #ff3b30;
    }

.equal {
      background: #28a745;
      grid-column: span 2;
    }

.operator {
      background: #ff9500;
    }

.advanced {
      background: #007aff;
    }

@media (max-width: 500px) {
      button {
        font-size: 0.9em;
        padding: 10px;
      }
    }
  </style>
</head>

<button onclick="appendToDisplay('7')">7</button>
      <button onclick="appendToDisplay('8')">8</button>
      <button onclick="appendToDisplay('9')">9</button>
      <button onclick="appendToDisplay('-')">−</button>
      <button onclick="appendToDisplay('+')">+</button>
      <button onclick="appendToDisplay('.')">.</button>

<button onclick="appendToDisplay('4')">4</button>
      <button onclick="appendToDisplay('5')">5</button>
      <button onclick="appendToDisplay('6')">6</button>
      <button onclick="appendToDisplay('0')">0</button>
      <button class="equal" onclick="calculateResult()">=</button>
      <button onclick="toggleSign()">±</button>

<button class="advanced" onclick="appendToDisplay('Math.sin(')">sin</button>
      <button class="advanced" onclick="appendToDisplay('Math.cos(')">cos</button>
      <button class="advanced" onclick="appendToDisplay('Math.tan(')">tan</button>
      <button class="advanced" onclick="appendToDisplay('Math.log10(')">log</button>
      <button class="advanced" onclick="appendToDisplay('Math.log(')">ln</button>
      <button class="advanced" onclick="appendToDisplay('Math.abs(')">abs</button>

<button class="advanced" onclick="appendToDisplay('Math.PI')">π</button>
      <button class="advanced" onclick="appendToDisplay('Math.E')">e</button>
      <button class="advanced" onclick="appendToDisplay('Math.sqrt(')">√</button>
      <button class="advanced" onclick="appendToDisplay('**')">^</button>
      <button class="advanced" onclick="appendToDisplay('Math.random()')">rand</button>
      <button class="advanced" onclick="factorial()">n!</button>

<button class="advanced" onclick="appendToDisplay('Math.floor(')">floor</button>
      <button class="advanced" onclick="appendToDisplay('Math.ceil(')">ceil</button>
      <button class="advanced" onclick="appendToDisplay('Math.round(')">round</button>

<button class="advanced" onclick="appendToDisplay('**2')">x²</button> 
      <button class="advanced" onclick="appendToDisplay('**3')">x³</button> 
    </div>
  </div>

// Append value to display
    function appendToDisplay(value) {
      if (display.textContent === "0" || display.textContent === "Error") {
        display.textContent = value;
      } else {
        display.textContent += value;
      }
    }

// Clear all text
    function clearDisplay() {
      display.textContent = "0";
    }

// Remove last character
    function backspace() {
      display.textContent = display.textContent.slice(0, -1);
      if (display.textContent === "") display.textContent = "0";
    }

// Toggle negative and positive sign
    function toggleSign() {
      try {
        let current = eval(display.textContent);
        display.textContent = String(current * -1);
      } catch {
        display.textContent = "Error";
      }
    }

// Calculate factorial of a number
    function factorial() {
      try {
        let val = eval(display.textContent);
        if (val < 0 || !Number.isInteger(val)) {
          display.textContent = "Error";
          return;
        }
        let result = 1;
        for (let i = 2; i <= val; i++) {
          result *= i;
        }
        display.textContent = result;
      } catch {
        display.textContent = "Error";
      }
    }

// Compute result of the expression
    function calculateResult() {
      try {
        display.textContent = eval(display.textContent);
      } catch {
        display.textContent = "Error";
      }
    }

// Keyboard support
    document.addEventListener("keydown", function (e) {
      const key = e.key;
      if (/[0-9+\-*/().]/.test(key)) {
        appendToDisplay(key);
      } else if (key === "Enter") {
        e.preventDefault();
        calculateResult();
      } else if (key === "Backspace") {
        backspace();
      } else if (key === "Escape") {
        clearDisplay();
      } else if (key === "^") {
        appendToDisplay("**");
      }
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>Currency Converter</title> 
  <style>
    /* General Styles */
    body {
      font-family: Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #f2f2f2;
      margin: 0;
    }
  
    .converter {
      background-color: white;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      max-width: 400px;
      width: 100%;
    }
  
    input, select, button {
      width: 100%;
      padding: 10px;
      margin: 10px 0;
      border: 1px solid #ccc;
      border-radius: 5px;
      box-sizing: border-box;
    }
  
    button {
      background-color: #4CAF50;
      color: white;
      font-weight: bold;
      cursor: pointer;
    }
  
    button:hover {
      background-color: #45a049;
    }
  
    #result {
      margin-top: 20px;
      font-size: 20px;
      font-weight: bold;
      color: #333;
    }
  
    /* Responsive styling for small screens */
    @media (max-width: 600px) {
      body {
        font-size: 16px;
      }
  
      select, input {
        font-size: 20px; /* Increase font size for better readability */
        font-weight: 700;
        padding: 14px; /* Increase padding for easier selection on touch devices */
      }
  
      select {
        height: 50px; /* Increase the height of the select dropdown */
       
      }
    }
  </style>
  
</head>
<body>

<div class="converter">
    <h2>Currency Converter</h2>

<input type="number" id="amount" placeholder="Enter amount" />

<select id="fromCurrency">
      <option value="USD">USD</option> 
      <option value="EUR">EUR</option> 
      <option value="GBP">GBP</option> 
      <option value="INR">INR</option> 
      <option value="JPY">JPY</option> 
      <option value="AUD">AUD</option> 
      <option value="CAD">CAD</option> 
      <option value="CHF">CHF</option> 
      <option value="CNY">CNY</option> 
      <option value="NZD">NZD</option> 
      <option value="MXN">MXN</option> 
      <option value="SGD">SGD</option> 
      <option value="HKD">HKD</option> 
      <option value="ZAR">ZAR</option> 
      <option value="SEK">SEK</option> 
      <option value="NOK">NOK</option> 
      <option value="DKK">DKK</option> 
      <option value="KRW">KRW</option> 
      <option value="SAR">SAR</option> 
      <option value="AED">AED</option> 
      <option value="BRL">BRL</option> 
      <option value="INR">INR</option> 
    </select>

<select id="toCurrency">
      <option value="USD">USD</option> 
      <option value="EUR">EUR</option> 
      <option value="GBP">GBP</option> 
      <option value="INR">INR</option> 
      <option value="JPY">JPY</option> 
      <option value="AUD">AUD</option> 
      <option value="CAD">CAD</option> 
      <option value="CHF">CHF</option> 
      <option value="CNY">CNY</option> 
      <option value="NZD">NZD</option> 
      <option value="MXN">MXN</option> 
      <option value="SGD">SGD</option> 
      <option value="HKD">HKD</option> 
      <option value="ZAR">ZAR</option> 
      <option value="SEK">SEK</option> 
      <option value="NOK">NOK</option> 
      <option value="DKK">DKK</option> 
      <option value="KRW">KRW</option> 
      <option value="SAR">SAR</option> 
      <option value="AED">AED</option> 
      <option value="BRL">BRL</option> 
      <option value="INR">INR</option> 
    </select>

<button onclick="convertCurrency()">Convert</button>

<div id="result"></div>
  </div>

<script>
    // Exchange rates relative to 1 USD
    const exchangeRates = {
      USD: 1,       // 1 USD = 1 USD
      EUR: 0.91,    // 1 USD = 0.91 EUR
      GBP: 0.78,    // 1 USD = 0.78 GBP
      INR: 83.2,    // 1 USD = 83.2 INR
      JPY: 156.2,   // 1 USD = 156.2 JPY
      AUD: 1.46,    // 1 USD = 1.46 AUD
      CAD: 1.36,    // 1 USD = 1.36 CAD
      CHF: 0.92,    // 1 USD = 0.92 CHF
      CNY: 7.15,    // 1 USD = 7.15 CNY
      NZD: 1.59,    // 1 USD = 1.59 NZD
      MXN: 18.5,    // 1 USD = 18.5 MXN
      SGD: 1.35,    // 1 USD = 1.35 SGD
      HKD: 7.85,    // 1 USD = 7.85 HKD
      ZAR: 19.14,   // 1 USD = 19.14 ZAR
      SEK: 9.4,     // 1 USD = 9.4 SEK
      NOK: 9.35,    // 1 USD = 9.35 NOK
      DKK: 6.6,     // 1 USD = 6.6 DKK
      KRW: 1320,    // 1 USD = 1320 KRW
      SAR: 3.75,    // 1 USD = 3.75 SAR
      AED: 3.67,    // 1 USD = 3.67 AED
      BRL: 5.1      // 1 USD = 5.1 BRL
    };

// Function to convert currency
    function convertCurrency() {
      // Get the amount from the input field and convert it to a number
      const amount = parseFloat(document.getElementById('amount').value);

// Get selected currency to convert FROM
      const from = document.getElementById('fromCurrency').value;

// Get selected currency to convert TO
      const to = document.getElementById('toCurrency').value;

// Check if the entered amount is a valid number
      if (isNaN(amount) || amount <= 0) {
        // Display error if amount is invalid
        document.getElementById('result').innerText = "Please enter a valid amount.";
        return; // Stop the function
      }

// Convert the amount to USD first, then to the target currency
      const usdAmount = amount / exchangeRates[from]; // Convert from source currency to USD
      const converted = usdAmount * exchangeRates[to]; // Convert from USD to target currency

// Format the result to two decimal places and display it
      document.getElementById('result').innerText = 
        `${amount} ${from} = ${converted.toFixed(2)} ${to}`;
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  
  <title>Contact Book</title>

body {
      margin: 0;
      padding: 20px;
      background-color: #f2f2f2;
    }

/* Container for the whole app */
    .container {
      max-width: 600px;
      margin: auto;
      background: white;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }

/* Heading */
    h1 {
      text-align: center;
      color: #333;
    }

/* Input fields and button styles */
    input, button {
      width: 100%;
      padding: 10px;
      margin-top: 10px;
      margin-bottom: 10px;
      border-radius: 5px;
      border: 1px solid #ccc;
    }

button {
      background-color: #28a745;
      color: white;
      cursor: pointer;
    }

button:hover {
      background-color: #218838;
    }

/* Contact list display */
    .contact {
      padding: 10px;
      margin: 5px 0;
      border: 1px solid #ddd;
      border-radius: 5px;
      background-color: #fafafa;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

/* Edit and Delete buttons for each contact */
    .button-container {
      display: flex;
      gap: 10px;
    }

.delete-btn, .edit-btn {
      padding: 5px 10px;
      border-radius: 3px;
      cursor: pointer;
      font-size: 12px;
    }

.delete-btn {
      background-color: red;
      color: white;
      border: none;
    }

.delete-btn:hover {
      background-color: darkred;
    }

.edit-btn {
      background-color: #ffc107;
      color: white;
      border: none;
    }

.edit-btn:hover {
      background-color: #e0a800;
    }

/* Responsive for smaller screens */
    @media (max-width: 600px) {
      .container {
        padding: 10px;
      }
      input, button {
        padding: 8px;
      }
    }
  </style>
</head>
<body>
  
  <div class="container">
    
    <h1>Contact Book</h1>

<input type="text" id="name" placeholder="Enter Name">

<input type="text" id="phone" placeholder="Enter Phone Number">

<button onclick="addContact()">Add Contact</button>

<div id="contactList"></div>
  </div>

// Function to add a contact or edit an existing one
    function addContact() {
      // Get value from name input
      const name = document.getElementById('name').value;

// Get value from phone input
      const phone = document.getElementById('phone').value;

// Check if both fields are filled
      if (!name || !phone) {
        alert('Please enter both name and phone number');
        return;
      }

const contactList = document.getElementById('contactList');

// If editing, update the contact instead of adding a new one
      if (editIndex !== -1) {
        const contactDiv = contactList.children[editIndex];
        contactDiv.innerHTML = `
          ${name} - ${phone}
          <div class="button-container">
            <button class="edit-btn" onclick="editContact(${editIndex})">Edit</button>
            <button class="delete-btn" onclick="deleteContact(${editIndex})">Delete</button>
          </div>
        `;
        editIndex = -1; // Reset editing mode
      } else {
        // Create a new div element to display the contact
        const contactDiv = document.createElement('div');
        contactDiv.className = 'contact'; // Add class for styling

// Add text content (name and phone) to the contact div
        contactDiv.innerHTML = `
          ${name} - ${phone}
          <div class="button-container">
            <button class="edit-btn" onclick="editContact(${contactList.children.length})">Edit</button>
            <button class="delete-btn" onclick="deleteContact(${contactList.children.length})">Delete</button>
          </div>
        `;

// Append the new contact to the contact list div
        contactList.appendChild(contactDiv);
      }

// Clear input fields after adding
      document.getElementById('name').value = '';
      document.getElementById('phone').value = '';
    }

// Function to delete a contact
    function deleteContact(index) {
      // Remove the contact div from the contact list
      document.getElementById('contactList').children[index].remove();
    }

// Function to edit a contact
    function editContact(index) {
      // Get the contact element
      const contactDiv = document.getElementById('contactList').children[index];

// Get the current name and phone number
      const currentText = contactDiv.innerText;
      const [currentName, currentPhone] = currentText.split(" - ");

// Fill the input fields with the current contact details
      document.getElementById('name').value = currentName;
      document.getElementById('phone').value = currentPhone;

// Update the edit index to mark which contact is being edited
      editIndex = index;
    }
  </script>
</body>
</html>

1. Replace the API Key

In the code, find this line:

const apiUrl = 'https://cors-anywhere.herokuapp.com/https://api.spoonacular.com/recipes/complexSearch?query={ingredient}&apiKey=YOUR_API_KEY';

Replace YOUR_API_KEY with your real Spoonacular API key.

You can get your key from: https://spoonacular.com/food-api

Example:

const apiUrl = 'https://cors-anywhere.herokuapp.com/https://api.spoonacular.com/recipes/complexSearch?query={ingredient}&apiKey=123456abcdef';

2. Open It in a Browser

Locate the recipe-finder.html file on your computer.
Double-click the file, and it will open in your default browser.

Try entering an ingredient like:

chicken

Then click the Search button.

3. (Optional) Fix CORS Issue

Option A (Quick Dev Workaround):

Use a public proxy:
Go to https://cors-anywhere.herokuapp.com/
Click the "Request temporary access to the demo server" button.
Then refresh your Recipe Finder page.

Option B (Advanced/Recommended):

Use a backend (like Node.js, Flask, etc.) to call the API from the server side, which avoids CORS altogether.

<!DOCTYPE html> 
<html lang="en">

<head>
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>Recipe Finder</title>

/* Main container for the recipe finder app */
    .recipe-container {
      background-color: white; /* White background for the main container */
      padding: 20px; /* Padding inside the container */
      border-radius: 10px; /* Rounded corners for the container */
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
      width: 100%; /* Full width */
      max-width: 600px; /* Maximum width */
    }

/* Title of the app */
    h1 {
      text-align: center; /* Center-align the title */
      margin-bottom: 20px; /* Space below the title */
    }

/* Input and search button layout */
    .search-section {
      display: flex; /* Flexbox layout */
      gap: 10px; /* Space between the input field and button */
    }

/* Input field styling */
    #ingredientInput {
      flex: 1; /* Takes up remaining space */
      padding: 10px; /* Padding inside the input */
      border: 1px solid #ccc; /* Light border for the input */
      border-radius: 5px; /* Rounded edges for input */
    }

/* Search button styling */
    #searchBtn {
      padding: 10px; /* Padding inside the button */
      border: none; /* No border for the button */
      background-color: #28a745; /* Green background color */
      color: white; /* White text color */
      border-radius: 5px; /* Rounded corners for the button */
      cursor: pointer; /* Pointer cursor on hover */
    }

/* Recipe list styling */
    .recipe-list {
      list-style-type: none; /* Remove bullet points from the list */
      padding: 0; /* Remove padding */
      margin-top: 20px; /* Space above the list */
    }

/* Styling for individual recipe items */
    .recipe-item {
      background-color: #fafafa; /* Light background color for each item */
      padding: 15px; /* Padding inside each item */
      margin-bottom: 10px; /* Space below each item */
      border-radius: 5px; /* Rounded corners for each item */
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* Light shadow around each item */
    }

/* Recipe image styling */
    .recipe-item img {
      max-width: 100%; /* Ensure the image fits within the container */
      height: auto; /* Maintain aspect ratio */
      border-radius: 5px; /* Rounded corners for images */
    }

/* Recipe title styling */
    .recipe-item h3 {
      margin-top: 10px; /* Space above the title */
      font-size: 1.2em; /* Larger font size for the title */
    }

/* Recipe details (e.g., ingredients) */
    .recipe-item p {
      margin: 5px 0; /* Small margin above and below paragraph */
      color: #555; /* Slightly darker color for the text */
    }

/* Responsive design for smaller screens */
    @media (max-width: 500px) {
      .search-section {
        flex-direction: column; /* Stack input and button vertically on small screens */
      }

#searchBtn {
        width: 100%; /* Full-width button on small screens */
      }
    }
  </style>
</head>

<body>
  
  <div class="recipe-container">
    <h1>Recipe Finder</h1>

<div class="search-section">
      <input type="text" id="ingredientInput" placeholder="Enter an ingredient" /> 
      <button id="searchBtn">Search</button> 
    </div>

<ul id="recipeList" class="recipe-list"></ul> 
  </div>

// API URL template
    const apiUrl = 'https://api.spoonacular.com/recipes/complexSearch?query={ingredient}&apiKey=YOUR_API_KEY'; // API endpoint for recipe search

// Event listener for the search button
    searchBtn.addEventListener('click', function () {
      const ingredient = ingredientInput.value.trim(); // Get input value and trim extra spaces

if (ingredient) {
        fetchRecipes(ingredient); // Call the function to fetch recipes if input is not empty
      } else {
        alert('Please enter an ingredient!'); // Alert if no ingredient is entered
      }
    });

// Fetch recipes from the Spoonacular API
    function fetchRecipes(ingredient) {
      const url = apiUrl.replace('{ingredient}', ingredient); // Replace placeholder with actual ingredient

fetch(url) // Make the API request
        .then(response => response.json()) // Parse the response as JSON
        .then(data => {
          if (data.results.length > 0) {
            displayRecipes(data.results); // If recipes found, display them
          } else {
            recipeList.innerHTML = '<li>No recipes found for this ingredient.</li>'; // Display message if no results
          }
        })
        .catch(error => {
          console.error('Error fetching recipes:', error); // Log any error to the console
        });
    }

// Display the fetched recipes in the list
    function displayRecipes(recipes) {
      recipeList.innerHTML = ''; // Clear the existing list before adding new results

recipes.forEach(recipe => {
        const li = document.createElement('li'); // Create a new list item for each recipe
        li.className = 'recipe-item'; // Assign class for styling

// Create the recipe image element
        const img = document.createElement('img');
        img.src = recipe.image; // Set the image source
        img.alt = recipe.title; // Set alt text for accessibility

// Create the recipe title element
        const title = document.createElement('h3');
        title.textContent = recipe.title; // Set the title text

// Create a paragraph for the recipe's ready time or description
        const readyIn = document.createElement('p');
        readyIn.textContent = `Ready in ${recipe.readyInMinutes} minutes`; // Set ready time

// Append the image, title, and ready time to the list item
        li.appendChild(img); // Add image to the list item
        li.appendChild(title); // Add title to the list item
        li.appendChild(readyIn); // Add ready time to the list item

// Append the list item to the recipe list
        recipeList.appendChild(li);
      });
    }
  </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
  
  <meta charset="UTF-8">
  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <title>Chat Application</title>
  
  <style>
    /* Set the body styles including background and font */
    body {
      margin: 0; /* Remove default margin */
      padding: 0; /* Remove default padding */
      font-family: Arial, sans-serif; /* Set the font */
      background-color: #f0f0f0; /* Set background color */
      display: flex; /* Use flexbox for center alignment */
      justify-content: center; /* Center horizontally */
      align-items: center; /* Center vertically */
      height: 100vh; /* Full viewport height */
    }

/* Style the main chat container */
    .chat-container {
      width: 90%; /* Set width to 90% for responsiveness */
      max-width: 400px; /* Max width for large screens */
      background-color: #ffffff; /* White background */
      border-radius: 10px; /* Rounded corners */
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Soft shadow */
      display: flex; /* Flex container */
      flex-direction: column; /* Stack children vertically */
      overflow: hidden; /* Hide overflowing content */
    }

/* Style the chat header */
    .chat-header {
      background-color: #4CAF50; /* Green background */
      color: white; /* White text */
      padding: 15px; /* Padding inside the header */
      text-align: center; /* Centered text */
      font-weight: bold; /* Bold title */
      font-size: 18px; /* Larger font */
    }

/* Style the area where chat messages appear */
    .chat-messages {
      flex: 1; /* Fill available vertical space */
      padding: 10px; /* Padding around messages */
      overflow-y: auto; /* Scroll when content exceeds height */
    }

/* Common styles for all messages */
    .message {
      padding: 10px; /* Padding inside message bubble */
      margin: 5px 0; /* Space above and below each message */
      border-radius: 5px; /* Rounded corners */
      max-width: 80%; /* Limit width of messages */
      word-wrap: break-word; /* Wrap long words */
    }

/* Style for messages from user */
    .message.user {
      background-color: #DCF8C6; /* Light green */
      align-self: flex-end; /* Align to the right */
    }

/* Style for messages from the other person */
    .message.other {
      background-color: #EAEAEA; /* Light gray */
      align-self: flex-start; /* Align to the left */
    }

/* Container for input and button */
    .chat-input {
      display: flex; /* Side by side layout */
      border-top: 1px solid #ddd; /* Separator line */
    }

/* Style the input field */
    .message-input {
      flex: 1; /* Take all available space */
      padding: 10px; /* Padding inside the input */
      border: none; /* Remove border */
      font-size: 16px; /* Set font size */
    }

/* Style the send button */
    .send-button {
      background-color: #4CAF50; /* Green button */
      color: white; /* White text */
      border: none; /* Remove border */
      padding: 10px 15px; /* Padding inside button */
      cursor: pointer; /* Cursor changes on hover */
    }

/* Change color when hovering on send button */
    .send-button:hover {
      background-color: #45a049; /* Slightly darker green */
    }
  </style>
</head>
<body>
  
  <div class="chat-container">
    
    <div class="chat-header">Chat Application</div>

<div class="chat-messages" id="chatMessages"></div>

<div class="chat-input">
      
      <input type="text" id="messageInput" class="message-input" placeholder="Type your message...">
      
      <button class="send-button" onclick="sendMessage()">Send</button>
    </div>
  </div>

<script>
    // Function that sends the user message
    function sendMessage() {
      // Get the input field value
      const message = document.getElementById('messageInput').value;

// If the message is empty or whitespace, don't send
      if (!message.trim()) {
        return;
      }

// Create a new div element for the user's message
      const messageElement = document.createElement('div');
      messageElement.classList.add('message', 'user'); // Add classes for styling

// Set the text of the message
      messageElement.textContent = message;

// Add the new message to the chat
      document.getElementById('chatMessages').appendChild(messageElement);

// Clear the input field
      document.getElementById('messageInput').value = '';

// Scroll to the bottom of the chat area
      document.getElementById('chatMessages').scrollTop = document.getElementById('chatMessages').scrollHeight;

// Simulate a response from another user after 1 second
      setTimeout(() => {
        // Create a new div for the fake response
        const responseMessage = document.createElement('div');
        responseMessage.classList.add('message', 'other'); // Apply styling
        responseMessage.textContent = 'Hello, how can I help you?'; // Static response

// Add the response to the chat
        document.getElementById('chatMessages').appendChild(responseMessage);

// Scroll to show the new message
        document.getElementById('chatMessages').scrollTop = document.getElementById('chatMessages').scrollHeight;
      }, 1000); // Wait 1 second before showing response
    }

// Wait until the page has fully loaded
    document.addEventListener('DOMContentLoaded', function () {
      // Get the message input field
      const input = document.getElementById('messageInput');

// Add keydown listener to detect key presses
      input.addEventListener('keydown', function (event) {
        // Check if the Enter key was pressed
        if (event.key === 'Enter') {
          // Prevent default behavior (like submitting a form)
          event.preventDefault();

// Send the message
          sendMessage();
        }
      });
    });
  </script>
</body>
</html>

<style>
    body {
      font-family: Arial, sans-serif; /* Use Arial font */
      background-color: #f0f0f0; /* Light background */
      display: flex; /* Flex layout */
      justify-content: center; /* Center horizontally */
      align-items: flex-start; /* Align top */
      min-height: 100vh; /* Full height */
      margin: 0; /* Remove default margin */
      padding: 20px; /* Add padding */
    }

.app {
      background-color: #fff; /* White background */
      padding: 20px; /* Space inside */
      border-radius: 8px; /* Rounded corners */
      box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Subtle shadow */
      width: 100%; /* Full width */
      max-width: 500px; /* Max width */
    }

h1 {
      text-align: center; /* Center title */
    }

#noteInput {
      width: 100%; /* Full width */
      padding: 10px; /* Padding */
      font-size: 16px; /* Text size */
      border: 1px solid #ccc; /* Border */
      border-radius: 5px; /* Rounded input */
      margin-bottom: 10px; /* Space below */
    }

#addBtn {
      width: 100%; /* Full width */
      padding: 10px; /* Button padding */
      background-color: #28a745; /* Green */
      color: white; /* White text */
      border: none; /* No border */
      border-radius: 5px; /* Rounded corners */
      font-size: 16px; /* Text size */
      cursor: pointer; /* Pointer cursor */
    }

ul {
      list-style-type: none; /* No bullets */
      padding: 0; /* No padding */
      margin-top: 20px; /* Space above */
    }

li {
      background-color: #f9f9f9; /* Light gray */
      padding: 10px; /* Inside padding */
      margin-bottom: 10px; /* Space below */
      border: 1px solid #ccc; /* Border */
      border-radius: 5px; /* Rounded corners */
      display: flex; /* Flex layout */
      justify-content: space-between; /* Text and buttons apart */
      align-items: center; /* Align middle */
    }

.buttons {
      display: flex; /* Flex container */
      gap: 5px; /* Space between buttons */
    }

.buttons button {
      padding: 5px 10px; /* Size */
      font-size: 14px; /* Text size */
      border: none; /* No border */
      border-radius: 3px; /* Rounded */
      cursor: pointer; /* Pointer cursor */
    }

.edit {
      background-color: #ffc107; /* Yellow */
      color: black;
    }

.delete {
      background-color: #dc3545; /* Red */
      color: white;
    }

@media(max-width: 600px) {
      .buttons {
        flex-direction: column; /* Stack buttons on small screens */
      }
    }
  </style>
</head>
<body>
  
  <div class="app">
    <h1>Note-taking App</h1>

<input type="text" id="noteInput" placeholder="Write your note here...">

<button id="addBtn">Add Note</button>

<ul id="noteList"></ul>
  </div>

<script>
    // Get DOM elements
    const noteInput = document.getElementById("noteInput"); // Input box
    const addBtn = document.getElementById("addBtn"); // Add button
    const noteList = document.getElementById("noteList"); // List container

// Add click event to Add Note button
    addBtn.addEventListener("click", function() {
      const noteText = noteInput.value.trim(); // Get trimmed input text

if (noteText === "") {
        alert("Please write something!"); // Show warning if empty
        return; // Stop function
      }

// Create new list item for the note
      const li = document.createElement("li");

// Create span to hold note text
      const span = document.createElement("span");
      span.textContent = noteText;

// Create button container
      const btnGroup = document.createElement("div");
      btnGroup.classList.add("buttons");

// Create Edit button
      const editBtn = document.createElement("button");
      editBtn.textContent = "Edit";
      editBtn.classList.add("edit");

// Edit button functionality
      editBtn.onclick = function() {
        const newNote = prompt("Edit your note:", span.textContent); // Ask user
        if (newNote !== null && newNote.trim() !== "") {
          span.textContent = newNote.trim(); // Update text
        }
      };

// Create Delete button
      const deleteBtn = document.createElement("button");
      deleteBtn.textContent = "Delete";
      deleteBtn.classList.add("delete");

// Delete button functionality
      deleteBtn.onclick = function() {
        if (confirm("Delete this note?")) {
          noteList.removeChild(li); // Remove list item
        }
      };

// Add buttons to group
      btnGroup.appendChild(editBtn);
      btnGroup.appendChild(deleteBtn);

// Add span and buttons to list item
      li.appendChild(span);
      li.appendChild(btnGroup);

// Add the new note to the list
      noteList.appendChild(li);

// Clear input box
      noteInput.value = "";
    });
  </script>
</body>
</html>

To Run the Movie Search App, Follow These Simple Steps:

Step-by-Step Guide

1. Get an OMDb API Key

This app uses the OMDb API, so you need an API key.

Go to https://www.omdbapi.com/apikey.aspx
Choose the free plan
Sign up and verify your email
You’ll receive a key like: abc12345

2. Create an HTML File

Open a text editor (like VS Code, Notepad, or any code editor)
Copy the full HTML code I gave you above
Paste it into a new file
Save the file as: movie-app.html

3. Insert Your API Key

Find this line in the code:

const apiKey = 'YOUR_API_KEY';

Replace 'YOUR_API_KEY' with the key you got from OMDb, like:

const apiKey = 'abc12345';

4. Open in Browser

Locate the saved movie-app.html file
Double-click it → It will open in your default browser
Now type a movie name (e.g., Matrix) in the input field
→ The search results will appear instantly

Notes

The app works without a server. It’s pure HTML + JS.

If nothing appears, check:

Console errors (press F12 → Console)
That your API key is valid
That you’re connected to the internet

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>Movie Search App</title> 
  <style>
    /* Basic Styling */
    body {
      font-family: Arial, sans-serif; /* Sets the font for the page */
      background-color: #f0f0f0; /* Light grey background for the page */
      margin: 0; /* Removes default margin from the body */
      padding: 0; /* Removes default padding from the body */
    }

.container {
      display: flex;
      flex-direction: column; /* Align elements in a vertical direction */
      align-items: center; /* Centers the elements horizontally */
      padding: 20px; /* Adds padding around the container */
    }

h1 {
      color: #333; /* Dark text color for the header */
      font-size: 36px; /* Larger font size for the header */
    }

input, button {
      padding: 10px; /* Adds padding inside input and button elements */
      margin: 10px 0; /* Adds vertical margin between elements */
      font-size: 16px; /* Sets font size */
      width: 100%; /* Ensures the input and button take up full width */
      max-width: 400px; /* Restricts the width to a maximum of 400px */
      border-radius: 5px; /* Rounds the corners of the input and button */
      border: 1px solid #ccc; /* Adds a light grey border */
    }

button {
      background-color: #4CAF50; /* Green background color for the button */
      color: white; /* White text color for the button */
      cursor: pointer; /* Changes the cursor to a pointer when hovering over the button */
    }

button:hover {
      background-color: #45a049; /* Darkens the button color on hover */
    }

.movie-list {
      display: grid; /* Uses grid layout for movie items */
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Makes a responsive grid */
      gap: 20px; /* Adds space between the movie items */
      margin-top: 20px; /* Adds top margin to the movie list */
      width: 100%; /* Ensures the movie list takes full width */
      max-width: 1000px; /* Limits the width of the movie list */
    }

.movie-item {
      background-color: white; /* White background for each movie item */
      border-radius: 5px; /* Rounds the corners of each movie item */
      overflow: hidden; /* Ensures the content inside movie item doesn't overflow */
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow to the movie item */
    }

.movie-item img {
      width: 100%; /* Makes the image take up full width of the movie item */
      height: auto; /* Maintains aspect ratio of the image */
    }

.movie-item h3 {
      padding: 10px; /* Adds padding around the title */
      margin: 0; /* Removes default margin */
      font-size: 18px; /* Sets font size for the title */
      color: #333; /* Dark text color for the title */
    }

.movie-item p {
      padding: 0 10px 10px 10px; /* Adds padding to the description */
      color: #555; /* Light grey color for description text */
      font-size: 14px; /* Smaller font size for description */
    }

/* Responsive design for small devices */
    @media (max-width: 600px) {
      h1 {
        font-size: 28px; /* Reduces font size for the header on small screens */
      }

input, button {
        font-size: 14px; /* Smaller font size for inputs and buttons */
      }
    }
  </style>
</head>
<body>

<div class="container">
    <h1>Movie Search App</h1>

<input type="text" id="searchInput" placeholder="Search for a movie..." oninput="searchMovies()" />

<button onclick="searchMovies()">Search</button>

<div class="movie-list" id="movieList"></div>
    
  </div>

<script>
    // Movie Search API URL
    const apiKey = 'YOUR_API_KEY'; // Replace 'YOUR_API_KEY' with your own API key
    const apiUrl = 'https://www.omdbapi.com/';

// Function to fetch and display movie data
    function searchMovies() {
      const searchInput = document.getElementById('searchInput').value; // Get the value from the input field
      const movieList = document.getElementById('movieList'); // Get the movie list container
      movieList.innerHTML = ''; // Clear the previous search results

// Check if the search input is not empty
      if (searchInput.trim() === '') {
        return; // Do nothing if the input is empty
      }

// Fetch movie data from the API
      fetch(`${apiUrl}?s=${searchInput}&apikey=${apiKey}`)
        .then(response => response.json()) // Convert the response to JSON
        .then(data => {
          if (data.Response === 'True') {
            // If movies are found, create movie items
            data.Search.forEach(movie => {
              const movieItem = document.createElement('div'); // Create a new div for each movie
              movieItem.classList.add('movie-item'); // Add 'movie-item' class for styling

// Create an image element for the movie poster
              const movieImg = document.createElement('img');
              movieImg.src = movie.Poster !== 'N/A' ? movie.Poster : 'https://via.placeholder.com/200x300'; // Use placeholder image if no poster

// Create a title element for the movie name
              const movieTitle = document.createElement('h3');
              movieTitle.textContent = movie.Title; // Set the movie title

// Create a description element for the movie year
              const movieDescription = document.createElement('p');
              movieDescription.textContent = `Year: ${movie.Year}`; // Set the movie year

// Append the elements to the movie item div
              movieItem.appendChild(movieImg);
              movieItem.appendChild(movieTitle);
              movieItem.appendChild(movieDescription);

// Append the movie item to the movie list container
              movieList.appendChild(movieItem);
            });
          } else {
            // If no movies found, show a message
            movieList.innerHTML = '<p>No movies found. Please try another search.</p>';
          }
        })
        .catch(error => {
          // Handle errors (like API issues)
          movieList.innerHTML = '<p>Error fetching data. Please try again later.</p>';
        });
    }
  </script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Blog Website</title>

  <style>
    * {
      box-sizing: border-box;
      font-family: Arial, sans-serif;
    }
    body {
      margin: 0;
      padding: 20px;
      background-color: #f9f9f9;
    }
    .container {
      max-width: 800px;
      margin: auto;
      background: white;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    h1 {
      text-align: center;
      color: #333;
    }
    input, textarea, button {
      width: 100%;
      padding: 10px;
      margin-top: 10px;
      margin-bottom: 10px;
      border-radius: 5px;
      border: 1px solid #ccc;
    }
    button {
      background-color: #28a745;
      color: white;
      cursor: pointer;
    }
    button:hover {
      background-color: #218838;
    }
    .blog-post {
      padding: 15px;
      margin: 10px 0;
      border: 1px solid #ddd;
      border-radius: 5px;
      background-color: #fff;
    }
    .blog-title {
      font-size: 24px;
      color: #333;
    }
    .blog-content {
      font-size: 16px;
      color: #555;
      margin-top: 10px;
    }
    .button-container {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }
    .delete-btn {
      background-color: red;
      color: white;
      border: none;
      padding: 5px 10px;
      border-radius: 3px;
      cursor: pointer;
    }
    .delete-btn:hover {
      background-color: darkred;
    }
    .edit-btn {
      background-color: #ffc107;
      color: white;
      border: none;
      padding: 5px 10px;
      border-radius: 3px;
      cursor: pointer;
    }
    .edit-btn:hover {
      background-color: #e0a800;
    }
    @media (max-width: 600px) {
      .container {
        padding: 10px;
      }
      input, textarea, button {
        padding: 8px;
      }
      .blog-title {
        font-size: 20px;
      }
      .blog-content {
        font-size: 14px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Blog Website</h1>
    <input type="text" id="title" placeholder="Enter Blog Title">
    <textarea id="content" placeholder="Write your blog content..." rows="5"></textarea>
    <button onclick="addPost()">Add Blog Post</button>
    <div id="blogPosts"></div>
  </div>

  <script>
    let posts = [];
    function addPost() {
      const title = document.getElementById('title').value;
      const content = document.getElementById('content').value;
      if (!title || !content) {
        alert('Please fill in both title and content');
        return;
      }
      const newPost = {
        title: title,
        content: content,
        id: posts.length + 1
      };
      posts.push(newPost);
      displayPosts();
      document.getElementById('title').value = '';
      document.getElementById('content').value = '';
    }

    function displayPosts() {
      const blogPostsContainer = document.getElementById('blogPosts');
      blogPostsContainer.innerHTML = '';
      posts.forEach(post => {
        const postDiv = document.createElement('div');
        postDiv.classList.add('blog-post');
        postDiv.innerHTML = `
          <div class="blog-title">${post.title}</div>
          <div class="blog-content">${post.content}</div>
          <div class="button-container">
            <button class="edit-btn" onclick="editPost(${post.id})">Edit</button>
            <button class="delete-btn" onclick="deletePost(${post.id})">Delete</button>
          </div>
        `;
        blogPostsContainer.appendChild(postDiv);
      });
    }

    function deletePost(postId) {
      posts = posts.filter(post => post.id !== postId);
      displayPosts();
    }

    function editPost(postId) {
      const post = posts.find(post => post.id === postId);
      document.getElementById('title').value = post.title;
      document.getElementById('content').value = post.content;
      deletePost(postId);
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  
  <meta charset="UTF-8" />

<title>Personal Portfolio</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<style>
    /* Basic reset for consistent rendering */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

/* Body styling */
    body {
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
      color: #333;
      line-height: 1.6;
      padding: 20px;
      transition: background-color 0.3s, color 0.3s;
    }

/* Dark mode styles */
    body.dark-mode {
      background-color: #121212;
      color: #f0f0f0;
    }

/* Header section */
    header {
      text-align: center;
      margin-bottom: 40px;
    }

header h1 {
      font-size: 2.5rem;
    }

header p {
      font-size: 1.2rem;
      color: #777;
    }

/* Navigation bar */
    nav {
      text-align: center;
      margin: 20px 0;
    }

nav a {
      margin: 0 10px;
      text-decoration: none;
      color: #0077cc;
      font-weight: bold;
    }

/* Section styling */
    section {
      margin-bottom: 40px;
    }

h2 {
      margin-bottom: 10px;
      border-bottom: 2px solid #0077cc;
      display: inline-block;
      padding-bottom: 5px;
    }

/* Button styling */
    button {
      padding: 10px 15px;
      border: none;
      background-color: #0077cc;
      color: white;
      cursor: pointer;
      border-radius: 5px;
      transition: background 0.3s;
    }

button:hover {
      background-color: #005fa3;
    }

/* Responsive layout for small screens */
    @media (max-width: 600px) {
      header h1 {
        font-size: 2rem;
      }
    }
  </style>
</head>

<body>
  
  <header>
    <h1>Jane Doe</h1> 
    <p>Frontend Developer & Designer</p> 
    <button onclick="toggleDarkMode()">Toggle Dark Mode</button> 
  </header>

<nav>
    <a href="#about">About</a> 
    <a href="#projects">Projects</a> 
    <a href="#contact">Contact</a> 
  </nav>

<section id="about">
    <h2>About Me</h2>
    <p>
      Hello! I’m Jane, a passionate developer who loves building websites and apps
      that are user-friendly and accessible.
    </p>
  </section>

<section id="projects">
    <h2>Projects</h2>
    <ul>
      <li><strong>Weather App:</strong> A web app that shows weather by location.</li>
      <li><strong>Todo List:</strong> A task management app with local storage.</li>
      <li><strong>Portfolio Site:</strong> You're looking at it!</li>
    </ul>
  </section>

<section id="contact">
    <h2>Contact</h2>
    <p>Email: jane.doe@example.com</p> 
    <p>LinkedIn: linkedin.com/in/janedoe</p> 
  </section>

<script>
    // This function toggles the dark mode class on the body
    function toggleDarkMode() {
      document.body.classList.toggle('dark-mode'); // Add/remove class
    }
  </script>
</body>
</html>

Vertical Preview

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"> <!-- Set character encoding -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Ensure responsive design -->
  <title>Enhanced Markdown Previewer</title> <!-- Title of the page -->

  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #f4f4f4;
    }
    .container {
      display: flex;
      width: 80%;
      max-width: 1000px;
      height: 80%;
      background-color: #fff;
      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
      border-radius: 8px;
    }
    .editor {
      width: 50%;
      padding: 20px;
      border-right: 1px solid #ddd;
    }
    .preview {
      width: 50%;
      padding: 20px;
      overflow-y: auto;
      background-color: #f9f9f9;
    }
    textarea {
      width: 100%;
      height: 90%;
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ddd;
      border-radius: 4px;
      resize: none;
    }
    .preview-content {
      font-size: 16px;
      color: #333;
    }
    pre {
      background-color: #f2f2f2;
      padding: 10px;
      border-radius: 4px;
      overflow-x: auto;
    }
    code {
      background-color: #f4f4f4;
      padding: 2px 4px;
      border-radius: 4px;
    }
    a {
      color: #3498db;
      text-decoration: none;
    }
    a:hover {
      text-decoration: underline;
    }
    img {
      max-width: 100%;
      height: auto;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="editor">
      <h2>Editor</h2>
      <textarea id="markdownInput" placeholder="Write your markdown here..." oninput="updatePreview()"></textarea>
    </div>
    <div class="preview">
      <h2>Preview</h2>
      <div id="markdownPreview" class="preview-content"></div>
    </div>
  </div>

  <script>
    function updatePreview() {
      const markdownText = document.getElementById('markdownInput').value;
      const htmlContent = marked(markdownText);
      document.getElementById('markdownPreview').innerHTML = htmlContent;
    }
    document.getElementById('markdownInput').value = `
# Markdown Previewer
Welcome to the **Markdown Previewer**!
## Features
- **Real-time preview**
- **Links**, **images**, **code blocks**

\`\`\`
function helloWorld() {
  console.log('Hello, World!');
}
\`\`\`

[Google](https://www.google.com)

![Example Image](https://via.placeholder.com/150)
`;
    window.onload = updatePreview;
  </script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/2.1.3/marked.min.js"></script>
</body>
</html>

Horizontal Preview

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Markdown Previewer</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #f4f4f4;
    }
    .container {
      display: flex;
      flex-wrap: wrap;
      width: 90%;
      max-width: 1200px;
      height: 80%;
      background-color: #fff;
      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
      border-radius: 10px;
    }
    .editor {
      width: 50%;
      padding: 20px;
      border-right: 1px solid #ddd;
    }
    .preview {
      width: 50%;
      padding: 20px;
      overflow-y: auto;
      background-color: #f9f9f9;
    }
    textarea {
      width: 100%;
      height: 90%;
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ddd;
      border-radius: 4px;
      resize: none;
    }
    .preview-content {
      font-size: 16px;
      color: #333;
    }
    pre {
      background-color: #f2f2f2;
      padding: 10px;
      border-radius: 4px;
      overflow-x: auto;
    }
    code {
      background-color: #f4f4f4;
      padding: 2px 4px;
      border-radius: 4px;
    }
    a {
      color: #3498db;
      text-decoration: none;
    }
    a:hover {
      text-decoration: underline;
    }
    img {
      max-width: 100%;
      height: auto;
      border-radius: 4px;
    }
    @media (max-width: 768px) {
      .editor, .preview {
        width: 100%;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="editor">
      <h2>Markdown Editor</h2>
      <textarea id="markdownInput" placeholder="Write your markdown here..." oninput="updatePreview()"></textarea>
    </div>
    <div class="preview">
      <h2>Preview</h2>
      <div id="markdownPreview" class="preview-content"></div>
    </div>
  </div>

  <script>
    function updatePreview() {
      const markdownText = document.getElementById('markdownInput').value;
      const htmlContent = marked(markdownText);
      document.getElementById('markdownPreview').innerHTML = htmlContent;
    }

    document.getElementById('markdownInput').value = `
# Welcome to the Markdown Previewer!
This is a simple Markdown Previewer.

## Features
- **Real-time preview**
- **Support for code blocks**
- **Links** and **Images**

\`\`\`
function sayHello() {
  console.log('Hello, Markdown!');
}
\`\`\`

[Google](https://www.google.com)

![Sample Image](https://via.placeholder.com/150)
`;
    window.onload = updatePreview;
  </script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/2.1.3/marked.min.js"></script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>Task Manager</title>

<style>
    body {
      font-family: Arial, sans-serif; /* Set the font for the page */
      background-color: #f4f4f4; /* Light background color */
      margin: 0; /* Remove default margin */
      padding: 0; /* Remove default padding */
      display: flex; /* Use flexbox to layout the elements */
      justify-content: center; /* Center the app horizontally */
      align-items: center; /* Center the app vertically */
      height: 100vh; /* Full viewport height */
    }

.container {
      width: 100%; /* Make the container full-width */
      max-width: 400px; /* Limit the width to 400px */
      background-color: white; /* Set background color of the container */
      padding: 20px; /* Add padding inside the container */
      border-radius: 8px; /* Round the corners */
      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Add subtle shadow for the container */
    }

h1 {
      text-align: center; /* Center the title text */
      color: #333; /* Dark text color */
      margin-bottom: 20px; /* Add space below the title */
    }

input[type="text"] {
      width: 100%; /* Make input field full width */
      padding: 10px; /* Add padding inside input */
      margin-bottom: 20px; /* Add space below input */
      border-radius: 5px; /* Round the corners of the input */
      border: 1px solid #ccc; /* Light gray border */
      font-size: 16px; /* Set font size */
    }

button {
      width: 100%; /* Make the button full width */
      padding: 10px; /* Add padding inside the button */
      background-color: #28a745; /* Green background color */
      color: white; /* White text */
      border: none; /* Remove border */
      border-radius: 5px; /* Round corners of the button */
      font-size: 16px; /* Set font size */
      cursor: pointer; /* Change cursor to pointer */
    }

button:hover {
      background-color: #218838; /* Darker green on hover */
    }

ul {
      list-style: none; /* Remove bullets from the list */
      padding: 0; /* Remove padding from the list */
      margin-top: 20px; /* Add space above the list */
    }

li {
      display: flex; /* Use flexbox for the task items */
      justify-content: space-between; /* Space out task and buttons */
      align-items: center; /* Align items vertically */
      background-color: #f9f9f9; /* Light gray background for tasks */
      padding: 10px; /* Add padding inside each task */
      margin-bottom: 10px; /* Add space below each task */
      border-radius: 5px; /* Round corners */
      border: 1px solid #ddd; /* Light gray border */
    }

li.completed {
      text-decoration: line-through; /* Add a line-through style for completed tasks */
      background-color: #d4edda; /* Light green background for completed tasks */
    }

.buttons {
      display: flex; /* Use flexbox for buttons inside task */
      gap: 10px; /* Space between buttons */
    }

.buttons button {
      padding: 5px 10px; /* Add padding to buttons */
      font-size: 14px; /* Set font size */
      border: none; /* Remove border */
      border-radius: 3px; /* Round corners of buttons */
      cursor: pointer; /* Change cursor to pointer */
    }

.delete {
      background-color: #dc3545; /* Red background for delete button */
      color: white; /* White text */
    }

.complete {
      background-color: #ffc107; /* Yellow background for complete button */
      color: white; /* White text */
    }

/* Responsive design for smaller screens */
    @media (max-width: 600px) {
      .container {
        padding: 15px; /* Reduce padding on smaller screens */
      }

h1 {
        font-size: 24px; /* Smaller font size for the title */
      }
    }
  </style>
</head>
<body>

<div class="container">
    <h1>Task Manager</h1>

<input type="text" id="taskInput" placeholder="Enter a new task...">
    
    
    <button id="addTaskBtn">Add Task</button>

<ul id="taskList"></ul>
  </div>

<script>
    // Get DOM elements
    const taskInput = document.getElementById("taskInput"); // Input field for new tasks
    const addTaskBtn = document.getElementById("addTaskBtn"); // Button to add tasks
    const taskList = document.getElementById("taskList"); // List to display tasks

// Function to create and add a new task
    function addTask(taskText) {
      // Create a new list item for the task
      const li = document.createElement("li");

// Create span to hold task text
      const span = document.createElement("span");
      span.textContent = taskText;

// Create a div to hold the buttons
      const buttonsDiv = document.createElement("div");
      buttonsDiv.classList.add("buttons");

// Create Complete button
      const completeBtn = document.createElement("button");
      completeBtn.textContent = "Complete";
      completeBtn.classList.add("complete");

// Complete button functionality
      completeBtn.onclick = function() {
        li.classList.toggle("completed"); // Toggle completed class
      };

// Create Delete button
      const deleteBtn = document.createElement("button");
      deleteBtn.textContent = "Delete";
      deleteBtn.classList.add("delete");

// Delete button functionality
      deleteBtn.onclick = function() {
        taskList.removeChild(li); // Remove the task from the list
      };

// Append buttons to the button container
      buttonsDiv.appendChild(completeBtn);
      buttonsDiv.appendChild(deleteBtn);

// Append the span and button container to the list item
      li.appendChild(span);
      li.appendChild(buttonsDiv);

// Append the new task to the task list
      taskList.appendChild(li);
    }

// Event listener for Add Task button
    addTaskBtn.addEventListener("click", function() {
      const taskText = taskInput.value.trim(); // Get the input text

// Check if input is empty
      if (taskText === "") {
        alert("Please enter a task!"); // Show alert if empty
        return; // Stop execution if empty
      }

// Call addTask function with the entered text
      addTask(taskText);

// Clear input field after adding the task
      taskInput.value = "";
    });

// Allow pressing Enter key to add task
    taskInput.addEventListener("keypress", function(event) {
      if (event.key === "Enter") {
        addTaskBtn.click(); // Trigger the add task button
      }
    });
  </script>
</body>
</html>

Simple Quiz App

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>Quiz App</title> 
  <style>
    /* General Styles */
    body {
      font-family: Arial, sans-serif; /* Sets a clean, readable font for the app */
      background-color: #f4f4f4; /* Light grey background color for the page */
      margin: 0; /* Removes default margin */
      padding: 0; /* Removes default padding */
    }

.container {
      display: flex; /* Flexbox layout for easy centering of content */
      flex-direction: column; /* Items are stacked vertically */
      justify-content: center; /* Vertically center the content */
      align-items: center; /* Horizontally center the content */
      min-height: 100vh; /* Ensures the container takes up at least the full height of the viewport */
    }

h1 {
      font-size: 36px; /* Makes the header larger */
      color: #333; /* Dark grey color for the title */
    }

.question {
      font-size: 24px; /* Large font for the question text */
      color: #333; /* Dark grey text color */
      margin: 20px 0; /* Adds vertical margin around the question */
    }

.options {
      display: flex; /* Flexbox to layout the options horizontally */
      flex-direction: column; /* Stack options vertically */
      align-items: flex-start; /* Align options to the left */
      margin: 10px 0; /* Adds vertical margin between question and options */
    }

.options button {
      background-color: #4CAF50; /* Green background for the options */
      color: white; /* White text on the button */
      padding: 15px 30px; /* Adds padding inside the button */
      margin: 10px 0; /* Vertical margin between buttons */
      border: none; /* Removes the default border */
      border-radius: 5px; /* Rounds the corners of the buttons */
      cursor: pointer; /* Changes cursor to pointer on hover */
      font-size: 18px; /* Makes text inside button larger */
      width: 200px; /* Fixed width for all buttons */
    }

.options button:hover {
      background-color: #45a049; /* Darkens the button color on hover */
    }

.result {
      font-size: 24px; /* Larger text size for result */
      font-weight: bold; /* Makes the result text bold */
      margin-top: 20px; /* Adds a top margin to the result */
    }

/* Responsive Design for smaller devices */
    @media (max-width: 600px) {
      h1 {
        font-size: 28px; /* Smaller header font size for small screens */
      }

.question {
        font-size: 20px; /* Smaller question text on small devices */
      }

.options button {
        width: 100%; /* Make buttons full width on small devices */
        font-size: 16px; /* Smaller font size for buttons */
      }
    }
  </style>
</head>
<body>

<div id="question" class="question">Loading question...</div>

<div id="options" class="options">
      
    </div>

<div id="result" class="result"></div>

<button id="startButton" onclick="startQuiz()">Start Quiz</button>
  </div>

let currentQuestionIndex = 0; // Keeps track of the current question index
    let score = 0; // Stores the user's score

// Function to start the quiz
    function startQuiz() {
      // Hide the Start button once quiz starts
      document.getElementById('startButton').style.display = 'none';

// Reset the score and question index for a fresh start
      score = 0;
      currentQuestionIndex = 0;

// Display the first question
      showQuestion();
    }

// Function to show the current question and options
    function showQuestion() {
      const currentQuestion = quizData[currentQuestionIndex]; // Get the current question from quizData

// Display the question text
      document.getElementById('question').textContent = currentQuestion.question;

// Clear previous options (if any)
      const optionsDiv = document.getElementById('options');
      optionsDiv.innerHTML = '';

// Loop through options and create a button for each option
      currentQuestion.options.forEach(option => {
        const button = document.createElement('button'); // Create a button for each option
        button.textContent = option; // Set button text to option
        button.onclick = () => checkAnswer(option); // Call checkAnswer function on click
        optionsDiv.appendChild(button); // Append the button to the options div
      });
    }

// Function to check the selected answer
    function checkAnswer(selectedOption) {
      const currentQuestion = quizData[currentQuestionIndex]; // Get the current question from quizData

if (selectedOption === currentQuestion.correct) {
        score++; // If answer is correct, increment the score
      }

// Move to the next question or finish the quiz
      currentQuestionIndex++;

if (currentQuestionIndex < quizData.length) {
        showQuestion(); // Show the next question
      } else {
        showResult(); // Display the final score
      }
    }

// Function to display the result after all questions are answered
    function showResult() {
      const resultDiv = document.getElementById('result'); // Get the result div
      resultDiv.textContent = `You scored ${score} out of ${quizData.length}`; // Display the score

// Display the Start button again to restart the quiz
      const startButton = document.getElementById('startButton');
      startButton.textContent = 'Restart Quiz'; // Change the button text to "Restart Quiz"
      startButton.style.display = 'block'; // Make the button visible
    }
  </script>

</body>
</html>

Advanced Quiz App

h1 {
      font-size: 36px; /* Makes the header larger */
      color: #333; /* Dark grey color for the title */
    }

.timer {
      font-size: 24px; /* Font size for timer */
      color: #333; /* Dark grey color for timer text */
      margin-bottom: 10px; /* Margin between timer and question */
    }

.progress-bar-container {
      width: 100%; /* Full width of the screen */
      background-color: #ddd; /* Light grey background for the progress bar */
      border-radius: 5px; /* Rounded corners for the progress bar container */
      margin: 10px 0; /* Vertical margin around the progress bar */
    }

.progress-bar {
      height: 20px; /* Height of the progress bar */
      width: 100%; /* Full width at the start */
      background-color: #4CAF50; /* Green background for the progress bar */
      border-radius: 5px; /* Rounded corners for the progress bar */
      transition: width 1s linear; /* Smooth transition of width */
    }

.question {
      font-size: 24px; /* Large font for the question text */
      color: #333; /* Dark grey text color */
      margin: 20px 0; /* Adds vertical margin around the question */
    }

.options button:hover {
      background-color: #45a049; /* Darkens the button color on hover */
    }

.result {
      font-size: 24px; /* Larger text size for result */
      font-weight: bold; /* Makes the result text bold */
      margin-top: 20px; /* Adds a top margin to the result */
    }

/* Responsive Design for smaller devices */
    @media (max-width: 600px) {
      h1 {
        font-size: 28px; /* Smaller header font size for small screens */
      }

.question {
        font-size: 20px; /* Smaller question text on small devices */
      }

.options button {
        width: 100%; /* Make buttons full width on small devices */
        font-size: 16px; /* Smaller font size for buttons */
      }
    }
  </style>
</head>
<body>

<div id="timer" class="timer">Time Remaining: 1:00</div>

<div class="progress-bar-container">
      <div id="progress-bar" class="progress-bar"></div> 
    </div>

<div id="question" class="question">Loading question...</div>

<div id="options" class="options">
      
    </div>

<div id="result" class="result"></div>

<button id="startButton" onclick="startQuiz()">Start Quiz</button>

<button id="resetButton" onclick="resetQuiz()" style="display:none;">Reset Quiz</button> 
  </div>

let currentQuestionIndex = 0; // Keeps track of the current question index
    let score = 0; // Stores the user's score
    let timer; // Timer variable
    let timeLeft = 60; // Total quiz time in seconds (1 minute)

// Function to start the quiz
    function startQuiz() {
      // Hide the Start button once quiz starts
      document.getElementById('startButton').style.display = 'none';

// Display the Reset button
      document.getElementById('resetButton').style.display = 'block';

// Reset the score and question index for a fresh start
      score = 0;
      currentQuestionIndex = 0;

// Display the first question
      showQuestion();

// Start the timer countdown
      startTimer();
    }

// Function to start the timer
    function startTimer() {
      // Update the timer every second
      timer = setInterval(function() {
        // Decrease timeLeft by 1 every second
        timeLeft--;

// Calculate minutes and seconds
        const minutes = Math.floor(timeLeft / 60);
        const seconds = timeLeft % 60;

// Update the timer display
        document.getElementById('timer').textContent = `Time Remaining: ${minutes}:${seconds < 10 ? '0' + seconds : seconds}`;

// Update the progress bar width
        const progressWidth = (timeLeft / 60) * 100; // Calculate the percentage of time remaining
        document.getElementById('progress-bar').style.width = progressWidth + '%';

// If time runs out, stop the quiz and play a beep sound
        if (timeLeft <= 0) {
          clearInterval(timer);
          playBeep(); // Play a beep when time is up
          showResult(); // Show the result when time is up
        }
      }, 1000); // 1000 milliseconds = 1 second
    }

// Function to show the current question and options
    function showQuestion() {
      const currentQuestion = quizData[currentQuestionIndex];
      // Display the question text
      document.getElementById('question').textContent = currentQuestion.question;

// Display the options dynamically
      const optionsContainer = document.getElementById('options');
      optionsContainer.innerHTML = ''; // Clear previous options
      currentQuestion.options.forEach(function(option) {
        const button = document.createElement('button'); // Create a button for each option
        button.textContent = option; // Set the button text
        button.onclick = function() {
          checkAnswer(option); // Check the answer when an option is clicked
        };
        optionsContainer.appendChild(button); // Add the button to the options container
      });
    }

// Function to check if the selected answer is correct
    function checkAnswer(selectedOption) {
      const currentQuestion = quizData[currentQuestionIndex];
      if (selectedOption === currentQuestion.correct) {
        score++; // Increase the score for correct answers
      }

// Move to the next question
      currentQuestionIndex++;

// If all questions are answered, show the result
      if (currentQuestionIndex < quizData.length) {
        showQuestion(); // Show the next question
      } else {
        clearInterval(timer); // Stop the timer
        showResult(); // Show the result after all questions are answered
      }
    }

// Function to display the result
    function showResult() {
      // Display the user's score
      document.getElementById('result').textContent = `Quiz Over! Your score is ${score}/${quizData.length}`;
    }

// Function to reset the quiz
    function resetQuiz() {
      // Hide the Reset button and show the Start button
      document.getElementById('resetButton').style.display = 'none';
      document.getElementById('startButton').style.display = 'block';

// Reset score and question index
      score = 0;
      currentQuestionIndex = 0;
      timeLeft = 60; // Reset timer to 60 seconds
      document.getElementById('timer').textContent = 'Time Remaining: 1:00'; // Reset timer text
      document.getElementById('result').textContent = ''; // Clear the result text
      document.getElementById('progress-bar').style.width = '100%'; // Reset progress bar to full width

// Hide the options and question text
      document.getElementById('question').textContent = 'Loading question...';
      document.getElementById('options').innerHTML = '';

// Reset the timer
      startTimer(); // Restart the timer
    }

// Function to play a beep sound when time is up
    function playBeep() {
      const beep = new Audio('https://www.soundjay.com/button/beep-07.wav'); // URL to a beep sound file
      beep.play(); // Play the beep sound
    }
  </script>
</body>
</html>

Quiz Features

Reset Button:

A reset button is added below the "Start Quiz" button. It’s initially hidden and shown only after the quiz starts.
When clicked, the reset button resets the score, timer, and question index, effectively restarting the quiz.

Beep Sound:

The playBeep() function plays a beep sound when the timer runs out.
The beep sound file is fetched from a URL (https://www.soundjay.com/button/beep-07.wav), but you can replace this URL with any desired sound file.

Timer:

The timer starts at 60 seconds and updates the remaining time on the screen every second.
When the timer reaches 0, the beep sound plays, and the result is displayed.

<!DOCTYPE html>
<html lang="en">
<head>
  
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Music Player</title>

body {
      margin: 0;
      padding: 20px;
      background-color: #f4f4f4;
    }

/* Main container styling */
    .container {
      max-width: 500px;
      margin: auto;
      background: white;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
      text-align: center;
    }

/* Heading styles */
    h1 {
      font-size: 2rem;
      color: #333;
    }

/* Audio player */
    audio {
      width: 100%;
      margin-top: 20px;
    }

/* Buttons and controls */
    .controls {
      display: flex;
      justify-content: center;
      gap: 15px;
      margin-top: 20px;
    }

.button {
      background-color: #007bff;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 1rem;
    }

/* Volume control */
    input[type="range"] {
      width: 80%;
      margin-top: 20px;
    }

/* File input for uploading audio */
    #fileInput {
      margin-top: 20px;
      padding: 10px;
      background-color: #f1f1f1;
      border-radius: 5px;
      cursor: pointer;
    }

/* Responsive design for smaller screens */
    @media (max-width: 600px) {
      .container {
        padding: 10px;
      }

.button {
        padding: 8px 16px;
      }
    }
  </style>
</head>
<body>
  
  <div class="container">
    
    <h1>Music Player</h1>

<audio id="audioPlayer" controls>
      Your browser does not support the audio element.
    </audio>

<div class="controls">
      
      <button class="button" id="playPauseBtn">Play</button>
      
      <button class="button" id="stopBtn">Stop</button>
    </div>

<div>
      <input type="range" id="volumeControl" min="0" max="1" step="0.1" value="1">
    </div>

<input type="file" id="fileInput" accept="audio/*">
  </div>

// Function to play or pause the audio
    function togglePlayPause() {
      if (audioPlayer.paused) {
        // If audio is paused, play the audio and update button text
        audioPlayer.play();
        playPauseBtn.textContent = 'Pause';
      } else {
        // If audio is playing, pause the audio and update button text
        audioPlayer.pause();
        playPauseBtn.textContent = 'Play';
      }
    }

// Function to stop the audio
    function stopAudio() {
      // Pause the audio and reset to the beginning
      audioPlayer.pause();
      audioPlayer.currentTime = 0;
      playPauseBtn.textContent = 'Play'; // Reset button text to 'Play'
    }

// Function to adjust volume
    function adjustVolume() {
      // Set the volume of the audio player based on the volume slider value
      audioPlayer.volume = volumeControl.value;
    }

// Function to load and play the uploaded audio file
    function loadAudioFile(event) {
      const file = event.target.files[0]; // Get the first file from the input
      if (file) {
        // Create a URL for the uploaded file
        const fileURL = URL.createObjectURL(file);
        // Set the audio player's source to the uploaded file
        audioPlayer.src = fileURL;
        // Play the newly uploaded audio
        audioPlayer.play();
        playPauseBtn.textContent = 'Pause'; // Change button to 'Pause'
      }
    }

// Event listener for play/pause button
    playPauseBtn.addEventListener('click', togglePlayPause);

// Event listener for stop button
    stopBtn.addEventListener('click', stopAudio);

// Event listener for volume slider
    volumeControl.addEventListener('input', adjustVolume);

// Event listener for file input to upload audio
    fileInput.addEventListener('change', loadAudioFile);
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  
  <meta charset="UTF-8">
  
  <title>Pomodoro Timer</title>
  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
    /* Reset default margins/paddings and set box model */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

/* Set body font and center content */
    body {
      font-family: Arial, sans-serif;
      background: #f2f2f2;
      color: #333;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      padding: 20px;
    }

/* Timer heading */
    h1 {
      margin-bottom: 20px;
      font-size: 2.5rem;
      color: #e63946;
    }

/* Timer display styling */
    #timer {
      font-size: 5rem;
      margin: 20px 0;
    }

/* Button styling */
    button {
      padding: 10px 20px;
      margin: 10px;
      font-size: 1rem;
      border: none;
      border-radius: 5px;
      background-color: #457b9d;
      color: white;
      cursor: pointer;
      transition: background 0.3s;
    }

/* Change color when hovering */
    button:hover {
      background-color: #1d3557;
    }

/* Responsive font size for mobile */
    @media (max-width: 600px) {
      #timer {
        font-size: 3rem;
      }
      h1 {
        font-size: 2rem;
      }
    }
  </style>
</head>
<body>

<h1>Pomodoro Timer</h1>

<div id="timer">25:00</div>

<div>
    <button onclick="startTimer()">Start</button> 
    <button onclick="pauseTimer()">Pause</button> 
    <button onclick="resetTimer()">Reset</button> 
  </div>

<script>
    // Initial total time in seconds (25 minutes)
    let timeLeft = 25 * 60;

// Variable to store the timer interval
    let timerInterval;

// Boolean to track if the timer is running
    let isRunning = false;

// Function to format and display the time
    function updateDisplay() {
      const minutes = Math.floor(timeLeft / 60); // Get full minutes
      const seconds = timeLeft % 60;             // Get remaining seconds
      // Update the text inside the #timer div
      document.getElementById("timer").textContent =
        `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
    }

// Start the countdown
    function startTimer() {
      // Only start if it's not already running
      if (!isRunning) {
        isRunning = true;
        // Set interval to update every 1 second
        timerInterval = setInterval(() => {
          if (timeLeft > 0) {
            timeLeft--;     // Decrease time by 1 second
            updateDisplay(); // Update on screen
          } else {
            clearInterval(timerInterval); // Stop timer if finished
            alert("Pomodoro session completed!"); // Alert the user
            isRunning = false; // Reset running status
          }
        }, 1000); // 1000 ms = 1 second
      }
    }

// Pause the countdown
    function pauseTimer() {
      clearInterval(timerInterval); // Stop the interval
      isRunning = false;            // Mark as not running
    }

// Reset to original time
    function resetTimer() {
      clearInterval(timerInterval); // Stop the timer
      timeLeft = 25 * 60;           // Reset to 25 minutes
      updateDisplay();              // Show the reset time
      isRunning = false;            // Mark as not running
    }

// Initial display when page loads
    updateDisplay(); // Show 25:00 at start
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>Memory Game</title> 
  <style>
    /* Basic reset and layout */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

body {
      font-family: Arial, sans-serif;
      background-color: #f7f7f7;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

.game-container {
      display: grid; /* Use grid layout */
      grid-template-columns: repeat(4, 100px); /* 4 columns */
      gap: 10px; /* Space between cards */
      padding: 20px;
      background-color: white;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

.card {
      width: 100px;
      height: 100px;
      background-color: #ccc;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      cursor: pointer;
      border-radius: 8px;
      user-select: none;
      transition: transform 0.3s;
    }

.flipped {
      background-color: #4CAF50; /* Color when flipped */
      color: white;
    }

@media (max-width: 500px) {
      .game-container {
        grid-template-columns: repeat(2, 100px); /* Responsive to 2 columns */
      }
    }
  </style>
</head>
<body>

<div class="game-container" id="game"></div>

// Duplicate the array to create pairs and shuffle them
    const gameArray = [...emojis, ...emojis].sort(() => 0.5 - Math.random());

// Track flipped cards
    let firstCard = null;
    let secondCard = null;
    let lockBoard = false; // Prevent clicking more than 2 at once

// Reference to the game board container
    const gameBoard = document.getElementById('game');

// Create card elements and add them to the board
    gameArray.forEach((emoji, index) => {
      const card = document.createElement('div'); // Create a new card
      card.classList.add('card'); // Add card style
      card.dataset.emoji = emoji; // Store emoji in dataset
      card.dataset.index = index; // Store index to identify the card

// Handle card click
      card.addEventListener('click', () => {
        if (lockBoard) return; // Prevent actions if board is locked
        if (card === firstCard) return; // Prevent double click on same card

card.textContent = emoji; // Show emoji
        card.classList.add('flipped'); // Add flipped style

if (!firstCard) {
          firstCard = card; // Set first card
        } else {
          secondCard = card; // Set second card
          lockBoard = true; // Lock board

// Check if cards match
          if (firstCard.dataset.emoji === secondCard.dataset.emoji) {
            // If match, keep them flipped and reset
            firstCard = null;
            secondCard = null;
            lockBoard = false;
          } else {
            // If not a match, flip back after delay
            setTimeout(() => {
              firstCard.textContent = '';
              secondCard.textContent = '';
              firstCard.classList.remove('flipped');
              secondCard.classList.remove('flipped');
              firstCard = null;
              secondCard = null;
              lockBoard = false;
            }, 1000); // 1 second delay
          }
        }
      });

// Add card to game board
      gameBoard.appendChild(card);
    });
  </script>
</body>
</html>

Next Game

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Memory Game</title>

body {
      font-family: Arial, sans-serif;
      background-color: #f0f8ff;
      text-align: center;
      padding: 20px;
    }

h1 {
      margin-bottom: 20px;
    }

.game-board {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 10px;
      max-width: 800px;
      margin: 0 auto;
    }

.card {
      width: 100%;
      padding-top: 100%;
      position: relative;
      perspective: 1000px;
    }

.card-content {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      transition: transform 0.6s;
      transform-style: preserve-3d;
    }

.flipped .card-content {
      transform: rotateY(180deg);
    }

.card-face {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      font-size: 2rem;
      cursor: pointer;
    }

.card-back {
      background-color: #1e90ff;
      color: white;
    }

.card-front {
      background-color: #ffffff;
      transform: rotateY(180deg);
      font-size: 2.5rem;
    }

.matched .card-content {
      opacity: 0.5;
      pointer-events: none;
    }
  </style>
</head>
<body>
  <h1>Memory Game - Level <span id="level">1</span></h1>
  <div class="game-board" id="gameBoard"></div>

let level = 1;
    let firstCard = null;
    let secondCard = null;
    let lockBoard = false;
    let matchedPairs = 0;

function shuffle(array) {
      return array.sort(() => 0.5 - Math.random());
    }

function initGame() {
      const gameBoard = document.getElementById('gameBoard');
      gameBoard.innerHTML = '';
      document.getElementById('level').textContent = level;
      matchedPairs = 0;

const selectedEmojis = shuffle(animalEmojis).slice(0, 32);
      const emojiPairs = shuffle([...selectedEmojis, ...selectedEmojis]);

emojiPairs.forEach(emoji => {
        const card = document.createElement('div');
        card.classList.add('card');
        card.dataset.emoji = emoji;

const content = document.createElement('div');
        content.classList.add('card-content');

const front = document.createElement('div');
        front.classList.add('card-face', 'card-front');
        front.textContent = emoji;

const back = document.createElement('div');
        back.classList.add('card-face', 'card-back');
        back.textContent = "🎴";

content.appendChild(front);
        content.appendChild(back);
        card.appendChild(content);

card.addEventListener('click', () => handleFlip(card));

gameBoard.appendChild(card);
      });
    }

function handleFlip(card) {
      if (lockBoard || card.classList.contains('flipped') || card.classList.contains('matched')) return;

card.classList.add('flipped');

if (!firstCard) {
        firstCard = card;
        return;
      }

secondCard = card;
      lockBoard = true;

checkMatch();
    }

function checkMatch() {
      const isMatch = firstCard.dataset.emoji === secondCard.dataset.emoji;

if (isMatch) {
        firstCard.classList.add('matched');
        secondCard.classList.add('matched');
        matchedPairs++;

if (matchedPairs === 32) {
          setTimeout(() => {
            level++;
            initGame();
          }, 1000);
        }

resetFlip();
      } else {
        setTimeout(() => {
          firstCard.classList.remove('flipped');
          secondCard.classList.remove('flipped');
          resetFlip();
        }, 1000);
      }
    }

function resetFlip() {
      [firstCard, secondCard] = [null, null];
      lockBoard = false;
    }

window.addEventListener('DOMContentLoaded', initGame);
  </script>
</body>
</html>

Third Game

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Modern Memory Game for Kids</title>
  <style>
    /* Basic reset and layout */
    body {
      font-family: 'Comic Sans MS', cursive;
      background-color: #f0f8ff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
    }

h1 {
      color: #ff6347;
      text-shadow: 1px 1px 0 #fff;
    }

.game-board {
      display: grid;
      grid-template-columns: repeat(8, 80px);
      grid-gap: 10px;
      justify-content: center;
    }

.card {
      width: 80px;
      height: 80px;
      background-color: #ffd700;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40px;
      cursor: pointer;
      transition: transform 0.5s;
      transform-style: preserve-3d;
      position: relative;
    }

.card.flipped .front {
      transform: rotateY(0);
    }

.card.flipped .back {
      transform: rotateY(180deg);
    }

.front, .back {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
    }

.front {
      background: #fff;
      transform: rotateY(180deg);
    }

.back {
      background: #87ceeb;
      color: transparent;
    }
  </style>
</head>
<body>
  <h1>🐾 Animal Memory Match 🐾</h1>
  <div class="game-board" id="gameBoard"></div>

// Shuffle array function
    function shuffle(array) {
      for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
      }
    }

// Prepare shuffled cards
    const cards = [...emojis];
    shuffle(cards);

const gameBoard = document.getElementById('gameBoard');
    let flippedCards = [];
    let lockBoard = false;

// Create card elements
    cards.forEach((emoji, index) => {
      const card = document.createElement('div');
      card.classList.add('card');
      card.dataset.emoji = emoji;

const front = document.createElement('div');
      front.classList.add('front');
      front.textContent = emoji;

const back = document.createElement('div');
      back.classList.add('back');
      back.textContent = '?';

card.appendChild(front);
      card.appendChild(back);

// Card click handler
      card.addEventListener('click', () => {
        if (lockBoard || card.classList.contains('flipped')) return;
        card.classList.add('flipped');
        flippedCards.push(card);

if (flippedCards.length === 2) {
          lockBoard = true;
          const [first, second] = flippedCards;
          if (first.dataset.emoji === second.dataset.emoji) {
            flippedCards = [];
            lockBoard = false;
          } else {
            setTimeout(() => {
              first.classList.remove('flipped');
              second.classList.remove('flipped');
              flippedCards = [];
              lockBoard = false;
            }, 1000);
          }
        }
      });

gameBoard.appendChild(card);
    });
  </script>
</body>
</html>

Fourth game French-English Words

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>French Vocabulary Memory Game</title>
  <style>
    body {
      font-family: 'Comic Sans MS', cursive;
      background-color: #f0f8ff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
    }

h1 {
      color: #ff6347;
      text-shadow: 1px 1px 0 #fff;
    }

.game-board {
      display: grid;
      grid-template-columns: repeat(5, 120px);
      grid-gap: 15px;
      justify-content: center;
      margin-top: 20px;
    }

.card {
      width: 120px;
      height: 80px;
      background-color: #ffd700;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      cursor: pointer;
      transition: transform 0.5s;
      transform-style: preserve-3d;
      position: relative;
    }

.card.flipped .front {
      transform: rotateY(0);
    }

.card.flipped .back {
      transform: rotateY(180deg);
    }

.front {
      background: #fff;
      transform: rotateY(180deg);
    }

.back {
      background: #87ceeb;
      color: transparent;
    }
  </style>
</head>
<body>
  <h1>🇫🇷 French Memory Match 🇫🇷</h1>
  <div class="game-board" id="gameBoard"></div>

// Convert to card array (question/answer)
    let cards = [];
    vocabPairs.forEach(pair => {
      cards.push({ word: pair[0], match: pair[1] });
      cards.push({ word: pair[1], match: pair[0] });
    });

// Shuffle cards
    function shuffle(array) {
      for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
      }
    }
    shuffle(cards);

const gameBoard = document.getElementById('gameBoard');
    let flippedCards = [];
    let lockBoard = false;

// Create card elements
    cards.forEach((item) => {
      const card = document.createElement('div');
      card.classList.add('card');
      card.dataset.word = item.word;
      card.dataset.match = item.match;

const front = document.createElement('div');
      front.classList.add('front');
      front.textContent = item.word;

const back = document.createElement('div');
      back.classList.add('back');
      back.textContent = '?';

card.appendChild(front);
      card.appendChild(back);

// Card click logic
      card.addEventListener('click', () => {
        if (lockBoard || card.classList.contains('flipped')) return;
        card.classList.add('flipped');
        flippedCards.push(card);

if (flippedCards.length === 2) {
          lockBoard = true;
          const [first, second] = flippedCards;
          if (first.dataset.match === second.dataset.word) {
            flippedCards = [];
            lockBoard = false;
          } else {
            setTimeout(() => {
              first.classList.remove('flipped');
              second.classList.remove('flipped');
              flippedCards = [];
              lockBoard = false;
            }, 1000);
          }
        }
      });

gameBoard.appendChild(card);
    });
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>Task Tracker</title>

<style>
    * {
      box-sizing: border-box; /* Ensures padding doesn't affect width/height */
    }

body {
      font-family: Arial, sans-serif; /* Font for all text */
      margin: 0; /* Remove default margin */
      padding: 0; /* Remove default padding */
      background: #f1f1f1; /* Light background color */
      display: flex; /* Use flexbox */
      justify-content: center; /* Center horizontally */
      align-items: center; /* Center vertically */
      min-height: 100vh; /* Full viewport height */
    }

.container {
      background: #fff; /* White background */
      padding: 20px; /* Padding inside container */
      border-radius: 10px; /* Rounded corners */
      width: 100%; /* Full width */
      max-width: 500px; /* Max width */
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Soft shadow */
    }

h1 {
      text-align: center; /* Center title */
      margin-bottom: 20px; /* Space below title */
      color: #333; /* Dark text */
    }

input, button {
      padding: 10px; /* Padding for inputs and buttons */
      font-size: 16px; /* Set font size */
      margin-bottom: 10px; /* Space below inputs/buttons */
      width: 100%; /* Full width */
      border-radius: 5px; /* Rounded corners */
      border: 1px solid #ccc; /* Light gray border */
    }

button {
      background-color: #28a745; /* Green button */
      color: white; /* White text */
      cursor: pointer; /* Pointer cursor */
    }

button:hover {
      background-color: #218838; /* Darker green on hover */
    }

ul {
      list-style: none; /* Remove bullets */
      padding: 0; /* Remove default padding */
    }

li {
      background: #f9f9f9; /* Light gray background */
      margin-bottom: 10px; /* Space between items */
      padding: 10px; /* Padding inside item */
      border-radius: 5px; /* Rounded corners */
      display: flex; /* Flex layout */
      justify-content: space-between; /* Space between text and buttons */
      align-items: center; /* Align vertically */
    }

.completed {
      text-decoration: line-through; /* Strike-through completed task */
      background-color: #d4edda; /* Light green background */
    }

.actions button {
      margin-left: 5px; /* Space between buttons */
      font-size: 14px; /* Smaller font size */
      padding: 5px 8px; /* Button padding */
    }

.delete-btn {
      background-color: #dc3545; /* Red delete button */
      color: white;
      border: none;
    }

.complete-btn {
      background-color: #ffc107; /* Yellow complete button */
      color: white;
      border: none;
    }

/* Responsive on smaller screens */
    @media (max-width: 600px) {
      .container {
        padding: 15px;
      }
    }
  </style>
</head>
<body>

<div class="container">
    <h1>Task Tracker</h1>

<input type="text" id="taskInput" placeholder="Enter task title...">

<input type="datetime-local" id="taskTime">

<button onclick="addTask()">Add Task</button>

<ul id="taskList"></ul>
  </div>

<script>
    // Get references to input fields and task list
    const taskInput = document.getElementById("taskInput"); // Task title input
    const taskTime = document.getElementById("taskTime");   // Task time input
    const taskList = document.getElementById("taskList");   // Task list container

// Function to add a new task
    function addTask() {
      const title = taskInput.value.trim(); // Get and trim task title
      const time = taskTime.value;          // Get selected date and time

// Check if inputs are empty
      if (title === '' || time === '') {
        alert("Please enter both title and time."); // Alert user
        return; // Exit function
      }

// Create a list item (task)
      const li = document.createElement("li"); // Create list item

// Create span for the task title and time
      const textSpan = document.createElement("span"); // Create span
      textSpan.innerHTML = `<strong>${title}</strong><br><small>${time}</small>`; // Set task text

// Create action buttons (complete and delete)
      const actions = document.createElement("div"); // Container for buttons
      actions.className = "actions"; // Set class

// Complete button
      const completeBtn = document.createElement("button");
      completeBtn.innerText = "Complete"; // Button label
      completeBtn.className = "complete-btn"; // Class for styling
      completeBtn.onclick = () => {
        li.classList.toggle("completed"); // Toggle completed style
      };

// Delete button
      const deleteBtn = document.createElement("button");
      deleteBtn.innerText = "Delete"; // Button label
      deleteBtn.className = "delete-btn"; // Class for styling
      deleteBtn.onclick = () => {
        li.remove(); // Remove task from list
      };

// Add buttons to action div
      actions.appendChild(completeBtn); // Add complete button
      actions.appendChild(deleteBtn);   // Add delete button

// Add text and actions to the task item
      li.appendChild(textSpan); // Add task text
      li.appendChild(actions);  // Add action buttons

// Add task to the list
      taskList.appendChild(li); // Append to task list

// Clear inputs
      taskInput.value = ""; // Clear title input
      taskTime.value = "";  // Clear date/time input
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>Expense Tracker</title>

<style>
    * {
      box-sizing: border-box; /* Padding/margin does not overflow elements */
    }

body {
      font-family: Arial, sans-serif; /* Default font */
      margin: 0;
      padding: 0;
      background: #f4f4f4; /* Light gray background */
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

.container {
      background: #fff; /* White background for the tracker box */
      padding: 20px;
      border-radius: 10px;
      width: 100%;
      max-width: 500px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Drop shadow */
    }

h1 {
      text-align: center; /* Centered heading */
      margin-bottom: 20px;
      color: #333;
    }

input, select, button {
      width: 100%; /* Full width */
      padding: 10px; /* Padding */
      margin-bottom: 10px; /* Margin between inputs */
      font-size: 16px;
      border-radius: 5px;
      border: 1px solid #ccc;
    }

button {
      background-color: #28a745; /* Green button */
      color: white;
      border: none;
      cursor: pointer;
    }

button:hover {
      background-color: #218838; /* Darker green on hover */
    }

ul {
      list-style-type: none; /* No bullet points */
      padding: 0;
    }

li {
      background: #f9f9f9;
      margin-bottom: 10px;
      padding: 10px;
      border-radius: 5px;
      display: flex;
      justify-content: space-between; /* Space between text and delete button */
      align-items: center;
    }

.delete-btn {
      background-color: #dc3545; /* Red delete button */
      color: white;
      border: none;
      padding: 5px 10px;
      border-radius: 4px;
      cursor: pointer;
    }

.delete-btn:hover {
      background-color: #c82333; /* Darker red on hover */
    }

.total {
      font-weight: bold;
      text-align: center;
      margin-top: 15px;
    }

@media (max-width: 600px) {
      .container {
        padding: 15px;
      }

input, select, button {
        font-size: 14px;
      }
    }
  </style>
</head>
<body>

<div class="container">
    <h1>Expense Tracker</h1>

<input type="text" id="expenseName" placeholder="Enter expense name...">

<input type="number" id="expenseAmount" placeholder="Enter amount...">

<select id="expenseCategory">
      <option value="">Select category</option>
      <option value="Food">Food</option>
      <option value="Transport">Transport</option>
      <option value="Utilities">Utilities</option>
      <option value="Entertainment">Entertainment</option>
      <option value="Shopping">Shopping</option>
      <option value="Health">Health</option>
      <option value="Education">Education</option>
      <option value="Housing">Housing</option>
      <option value="Insurance">Insurance</option>
      <option value="Travel">Travel</option>
      <option value="Savings">Savings</option>
      <option value="Investment">Investment</option>
      <option value="Subscription">Subscription</option>
      <option value="Gifts">Gifts</option>
      <option value="Others">Others</option>
    </select>

<button onclick="addExpense()">Add Expense</button>

<ul id="expenseList"></ul>

<div class="total" id="totalAmount">Total: $0.00</div>
  </div>

<script>
    // Get references to input fields and display areas
    const expenseName = document.getElementById("expenseName"); // Expense name input
    const expenseAmount = document.getElementById("expenseAmount"); // Expense amount input
    const expenseCategory = document.getElementById("expenseCategory"); // Category dropdown
    const expenseList = document.getElementById("expenseList"); // List to hold expenses
    const totalAmount = document.getElementById("totalAmount"); // Total display

let total = 0; // Variable to hold total expense

// Function to add an expense
    function addExpense() {
      const name = expenseName.value.trim(); // Get and trim name
      const amount = parseFloat(expenseAmount.value); // Convert amount to number
      const category = expenseCategory.value; // Get selected category

// Validate inputs
      if (name === "" || isNaN(amount) || category === "") {
        alert("Please enter valid expense details.");
        return; // Stop if input is invalid
      }

// Create a new list item
      const li = document.createElement("li"); // New list item

// Format content inside list item
      li.innerHTML = `
        <div>
          <strong>${name}</strong> <br>
          <small>${category}</small> - $${amount.toFixed(2)}
        </div>
        <button class="delete-btn" onclick="deleteExpense(this, ${amount})">Delete</button>
      `;

// Add new expense to the list
      expenseList.appendChild(li);

// Update the total
      total += amount;
      totalAmount.innerText = `Total: $${total.toFixed(2)}`;

// Clear input fields
      expenseName.value = "";
      expenseAmount.value = "";
      expenseCategory.value = "";
    }

// Function to delete an expense
    function deleteExpense(button, amount) {
      // Remove the parent list item
      button.parentElement.remove();

// Subtract from total and update display
      total -= amount;
      totalAmount.innerText = `Total: $${total.toFixed(2)}`;
    }
  </script>
</body>
</html>

First App

<!DOCTYPE html>
<html lang="en">
<head>
  
  <meta charset="UTF-8">
  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <title>Flashcards App</title>
  
  <style>
    /* Reset default browser styles and use a basic font */
    * {
      box-sizing: border-box;
      font-family: Arial, sans-serif;
    }

/* Set body background and center the content */
    body {
      margin: 0;
      padding: 20px;
      background: #f0f0f0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

/* Main container styling */
    .container {
      background: #fff;
      padding: 30px;
      border-radius: 15px;
      box-shadow: 0 0 20px rgba(0,0,0,0.1);
      width: 100%;
      max-width: 400px;
      text-align: center;
    }

/* Flashcard box styling */
    .flashcard {
      background-color: #007bff;
      color: #fff;
      padding: 40px 20px;
      border-radius: 10px;
      cursor: pointer;
      min-height: 150px;
      font-size: 1.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      transition: background-color 0.3s;
    }

/* Button group styling */
    .buttons {
      display: flex;
      justify-content: space-between;
      gap: 10px;
    }

/* Navigation buttons styling */
    button {
      flex: 1;
      padding: 10px;
      border: none;
      background-color: #28a745;
      color: white;
      border-radius: 5px;
      font-size: 1rem;
      cursor: pointer;
      transition: background 0.2s;
    }

/* Button hover effect */
    button:hover {
      background-color: #218838;
    }

/* Responsive tweak for very small screens */
    @media (max-width: 320px) {
      .flashcard {
        font-size: 1rem;
        padding: 20px;
      }
    }
  </style>
</head>
<body>

<div class="container">
    
    <div class="flashcard" id="card">
      Click to reveal answer
    </div>

<div class="buttons">
      
      <button id="prevBtn">Previous</button>
      
      <button id="nextBtn">Next</button>
    </div>
  </div>

<script>
    // Flashcards data array (each object contains a question and answer)
    const flashcards = [
      { question: "What is the capital of France?", answer: "Paris" },
      { question: "What is 2 + 2?", answer: "4" },
      { question: "What language runs in a web browser?", answer: "JavaScript" },
      { question: "What is the largest planet?", answer: "Jupiter" },
      { question: "Who wrote 'Romeo and Juliet'?", answer: "William Shakespeare" }
    ];

// Get references to DOM elements
    const card = document.getElementById("card");         // Flashcard container
    const prevBtn = document.getElementById("prevBtn");   // Previous button
    const nextBtn = document.getElementById("nextBtn");   // Next button

let currentIndex = 0;     // Track the index of the current flashcard
    let isShowingAnswer = false; // Track if we are currently showing the answer

// Function to display the current flashcard (question or answer)
    function displayCard() {
      const current = flashcards[currentIndex]; // Get current flashcard object
      card.textContent = isShowingAnswer ? current.answer : current.question; // Show question or answer
    }

// Function to go to the next flashcard
    function nextCard() {
      // Move to the next index, loop back to 0 if at end
      currentIndex = (currentIndex + 1) % flashcards.length;
      isShowingAnswer = false; // Always show question first
      displayCard(); // Update display
    }

// Function to go to the previous flashcard
    function prevCard() {
      // Move to the previous index, loop back to last if at beginning
      currentIndex = (currentIndex - 1 + flashcards.length) % flashcards.length;
      isShowingAnswer = false; // Always show question first
      displayCard(); // Update display
    }

// Function to flip the flashcard between question and answer
    function flipCard() {
      isShowingAnswer = !isShowingAnswer; // Toggle the state
      displayCard(); // Update display
    }

// Attach event listeners to the buttons and flashcard
    nextBtn.addEventListener("click", nextCard);     // Handle Next button click
    prevBtn.addEventListener("click", prevCard);     // Handle Previous button click
    card.addEventListener("click", flipCard);        // Handle click on flashcard to flip

// Initial call to show the first flashcard
    displayCard();
  </script>

</body>
</html>

Second App - question - Answer

<!DOCTYPE html>
<html lang="en">
<head>
  
  <meta charset="UTF-8">
  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <title>Flashcards App</title>
  
  <style>
    * {
      box-sizing: border-box; /* Include padding and border in element's total width/height */
      font-family: Arial, sans-serif; /* Use clean, readable font */
    }

body {
      margin: 0; /* Remove default margin */
      padding: 20px;
      background-color: #f0f0f0; /* Light background */
      display: flex;
      justify-content: center; /* Center horizontally */
      align-items: center; /* Center vertically */
      height: 100vh; /* Full viewport height */
    }

.container {
      background: white;
      padding: 30px;
      border-radius: 12px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
      max-width: 400px;
      width: 100%;
      text-align: center;
    }

.info {
      margin-bottom: 10px;
      color: #555;
      font-size: 0.95rem;
    }

.flashcard {
      background-color: #007bff;
      color: #fff;
      padding: 30px 20px;
      border-radius: 10px;
      margin-bottom: 20px;
      min-height: 100px;
      font-size: 1.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

input[type="text"] {
      padding: 10px;
      width: 100%;
      font-size: 1rem;
      border: 1px solid #ccc;
      border-radius: 6px;
      margin-bottom: 10px;
    }

.buttons {
      display: flex;
      gap: 10px;
      margin-bottom: 10px;
    }

button {
      flex: 1;
      padding: 10px;
      font-size: 0.95rem;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.3s;
      color: white;
    }

#checkBtn {
      background-color: #ffc107;
      color: black;
    }

#checkBtn:hover {
      background-color: #e0a800;
    }

#nextBtn, #prevBtn {
      background-color: #28a745;
    }

#nextBtn:hover, #prevBtn:hover {
      background-color: #218838;
    }

@media (max-width: 400px) {
      .flashcard {
        font-size: 1rem;
        padding: 20px;
      }
    }
  </style>
</head>
<body>

<div class="container">
    
    
    <div class="info" id="questionCount">Question 1 of 5</div>

<div class="flashcard" id="card">Question here</div>

<input type="text" id="userAnswer" placeholder="Type your answer here">

<button id="checkBtn">Check Answer</button>

<div class="buttons">
      <button id="prevBtn">Previous</button>
      <button id="nextBtn">Next</button>
    </div>

<div class="info" id="scoreDisplay">Correct: 0 out of 5</div>

<div class="info" id="feedback"></div>

</div>

<script>
    // Array of flashcard questions and correct answers
    const flashcards = [
      { question: "What is the capital of France?", answer: "Paris" },
      { question: "What is 2 + 2?", answer: "4" },
      { question: "What is the color of the sky?", answer: "Blue" },
      { question: "What do bees make?", answer: "Honey" },
      { question: "How many legs does a spider have?", answer: "8" }
    ];

// Get HTML elements
    const card = document.getElementById("card");
    const userAnswer = document.getElementById("userAnswer");
    const checkBtn = document.getElementById("checkBtn");
    const nextBtn = document.getElementById("nextBtn");
    const prevBtn = document.getElementById("prevBtn");
    const questionCount = document.getElementById("questionCount");
    const scoreDisplay = document.getElementById("scoreDisplay");
    const feedback = document.getElementById("feedback");

// State variables
    let currentIndex = 0;         // Index of current flashcard
    let correctCount = 0;         // Total correct answers
    let answered = new Array(flashcards.length).fill(false); // Track answered state

// Function to show the current flashcard
    function displayCard() {
      const current = flashcards[currentIndex]; // Get current flashcard
      card.textContent = current.question; // Show question
      questionCount.textContent = `Question ${currentIndex + 1} of ${flashcards.length}`; // Show current position
      userAnswer.value = ""; // Clear input field
      feedback.textContent = ""; // Clear feedback
      scoreDisplay.textContent = `Correct: ${correctCount} out of ${flashcards.length}`; // Update score
    }

// Check user answer
    function checkAnswer() {
      const userInput = userAnswer.value.trim().toLowerCase(); // Get user input in lowercase
      const correctAnswer = flashcards[currentIndex].answer.toLowerCase(); // Correct answer in lowercase

// Check if user already got this right
      if (answered[currentIndex]) {
        feedback.textContent = "You already answered this one!";
        return;
      }

// Compare input with correct answer
      if (userInput === correctAnswer) {
        correctCount++; // Increase correct count
        answered[currentIndex] = true; // Mark as answered
        feedback.textContent = "Correct! ✅";
      } else {
        feedback.textContent = `Incorrect! ❌ Try again.`;
      }

// Update score display
      scoreDisplay.textContent = `Correct: ${correctCount} out of ${flashcards.length}`;
    }

// Show next flashcard
    function nextCard() {
      currentIndex = (currentIndex + 1) % flashcards.length; // Go to next index
      displayCard(); // Update display
    }

// Show previous flashcard
    function prevCard() {
      currentIndex = (currentIndex - 1 + flashcards.length) % flashcards.length;
      displayCard();
    }

// Attach event listeners
    checkBtn.addEventListener("click", checkAnswer);
    nextBtn.addEventListener("click", nextCard);
    prevBtn.addEventListener("click", prevCard);

// Initial card display when page loads
    displayCard();
  </script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>21. Advanced Time Converter</title>
  <style>
    /* Basic styles for responsiveness */
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      padding: 20px;
      margin: 0;
      background-color: #f4f4f9;
    }

h1 {
      color: #333;
    }

.converter {
      max-width: 500px;
      margin: auto;
      padding: 20px;
      border: 2px solid #ccc;
      border-radius: 10px;
      background-color: #ffffff;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

input, select, button {
      width: 90%;
      padding: 12px;
      margin: 12px 0;
      font-size: 16px;
      border-radius: 5px;
      border: 1px solid #aaa;
    }

#result {
      font-size: 18px;
      font-weight: bold;
      color: #2d8b60;
    }

@media (max-width: 600px) {
      .converter {
        padding: 15px;
      }
    }
  </style>
</head>
<body>

<h1>21. Advanced Time Converter</h1>

<div class="converter">
    
    <input type="number" id="timeInput" placeholder="Enter time (e.g., 5, 120)" />

<select id="fromUnit">
      <option value="" disabled selected>From Unit</option> 
      <option value="milliseconds">Milliseconds</option>
      <option value="seconds">Seconds</option>
      <option value="minutes">Minutes</option>
      <option value="hours">Hours</option>
      <option value="days">Days</option>
      <option value="weeks">Weeks</option>
    </select>

<select id="toUnit">
      <option value="" disabled selected>To Unit</option> 
      <option value="milliseconds">Milliseconds</option>
      <option value="seconds">Seconds</option>
      <option value="minutes">Minutes</option>
      <option value="hours">Hours</option>
      <option value="days">Days</option>
      <option value="weeks">Weeks</option>
    </select>

<button onclick="convertTime()">Convert</button>

<p id="result"></p>
  </div>

// Check if input is valid
      if (input === '' || isNaN(input)) {
        resultElement.innerText = "Please enter a valid number."; 
        return;
      }

// Check if units are selected
      if (from === "" || to === "") {
        resultElement.innerText = "Please select both units."; 
        return;
      }

// Convert input to milliseconds
      let milliseconds;

if (from === 'milliseconds') {
        milliseconds = Number(input);
      } else if (from === 'seconds') {
        milliseconds = Number(input) * 1000;
      } else if (from === 'minutes') {
        milliseconds = Number(input) * 60000;
      } else if (from === 'hours') {
        milliseconds = Number(input) * 3600000;
      } else if (from === 'days') {
        milliseconds = Number(input) * 86400000;
      } else if (from === 'weeks') {
        milliseconds = Number(input) * 604800000;
      }

// Convert milliseconds to the target unit
      let output;

if (to === 'milliseconds') {
        output = milliseconds;
      } else if (to === 'seconds') {
        output = milliseconds / 1000;
      } else if (to === 'minutes') {
        output = milliseconds / 60000;
      } else if (to === 'hours') {
        output = milliseconds / 3600000;
      } else if (to === 'days') {
        output = milliseconds / 86400000;
      } else if (to === 'weeks') {
        output = milliseconds / 604800000;
      }

// Round the result to 4 decimal places
      output = output.toFixed(4);

// Display result
      resultElement.innerText = `${input} ${from} = ${output} ${to}`;
    }
  </script>

</body>
</html>

<!DOCTYPE html> 
<html lang="en">

<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>22. File Upload App</title> 
  <style>

body {
      font-family: Arial, sans-serif; /* Sets the font style */
      display: flex; /* Enables flex layout */
      justify-content: center; /* Horizontally centers content */
      align-items: center; /* Vertically centers content */
      height: 100vh; /* Full height of viewport */
      margin: 0; /* Removes default margin */
      background-color: #f2f2f2; /* Light background */
    }

.container {
      background: white; /* White background */
      padding: 20px; /* Inner spacing */
      border-radius: 10px; /* Rounded corners */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow */
      width: 100%; /* Full width */
      max-width: 500px; /* Max width for responsiveness */
      box-sizing: border-box; /* Include padding in width calculation */
    }

h2 {
      margin-top: 0; /* Remove top margin */
      text-align: center; /* Center the title text */
    }

input[type="file"] {
      width: 100%; /* Full width */
      padding: 10px; /* Padding inside input */
      margin: 10px 0; /* Margin above and below */
      border: 1px solid #ccc; /* Add border to input */
      border-radius: 5px; /* Rounded corners for input */
      box-sizing: border-box; /* Include padding in width calculation */
    }

#fileInfo {
      font-size: 14px; /* Smaller text */
      color: #333; /* Dark gray text */
      margin-top: 10px; /* Spacing above file info */
      word-wrap: break-word; /* Break long lines */
    }

/* Media query for screens smaller than 600px */
    @media (max-width: 600px) {
      .container {
        padding: 15px; /* Reduce padding on small screens */
        max-width: 90%; /* Container takes 90% of the screen width */
      }

input[type="file"] {
        padding: 8px; /* Reduce input padding */
      }

#fileInfo {
        font-size: 12px; /* Smaller text for file info */
      }
    }

</style>
</head>

<div class="container"> 
    <h2>22. File Upload App</h2> 
    <input type="file" id="fileInput" multiple> 
    <div id="fileInfo">No file selected.</div> 
  </div>

// Add event listener for when file selection changes
    fileInput.addEventListener('change', function () {
      // Check if any file is selected
      if (fileInput.files.length === 0) {
        fileInfo.textContent = 'No file selected.'; // Show message if none selected
        return; // Exit function
      }

// Prepare to show info about selected files
      let details = ''; // Initialize empty string to store file details

// Loop through each selected file
      for (let i = 0; i < fileInput.files.length; i++) {
        const file = fileInput.files[i]; // Get individual file
        details += `File ${i + 1}: ${file.name} (${Math.round(file.size / 1024)} KB)\n`; // Add file name and size in KB
      }

fileInfo.textContent = details; // Display all file details
    });
  </script>

</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>23. Image Gallery - 20 Hover Effects</title>
  <style>
    /* General Styles */
    * {
      box-sizing: border-box;
    }

body {
      margin: 0;
      font-family: Arial, sans-serif;
      background-color: #f0f0f0;
    }

.gallery-container {
      padding: 20px;
      max-width: 1200px;
      margin: auto;
    }

h1 {
      text-align: center;
      margin-bottom: 20px;
    }

.image-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 15px;
    }

.image-grid img {
      width: 100%;
      height: auto;
      cursor: pointer;
      border-radius: 8px;
      transition: all 0.3s ease; /* Smooth transition for all effects */
    }

/* Hover Effects */
    .img-zoom-in:hover {
      transform: scale(1.2);
    }

.img-zoom-out:hover {
      transform: scale(0.8);
    }

.img-grayscale:hover {
      filter: grayscale(100%);
    }

.img-blur:hover {
      filter: blur(5px);
    }

.img-rotate:hover {
      transform: rotate(15deg);
    }

.img-opacity:hover {
      opacity: 0.5;
    }

.img-contrast:hover {
      filter: contrast(150%);
    }

.img-sepia:hover {
      filter: sepia(100%);
    }

.img-brightness:hover {
      filter: brightness(1.5);
    }

.img-saturation:hover {
      filter: saturate(200%);
    }

.img-skew:hover {
      transform: skew(20deg, 20deg);
    }

.img-shadow:hover {
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }

.img-flip:hover {
      transform: rotateY(180deg);
    }

.img-ripple:hover {
      transform: scale(1.1);
      animation: ripple 0.6s infinite;
    }

@keyframes ripple {
      0% {
        transform: scale(1.1);
      }
      100% {
        transform: scale(1);
      }
    }

.img-slide-left:hover {
      transform: translateX(-50px);
    }

.img-slide-right:hover {
      transform: translateX(50px);
    }

.img-shake:hover {
      animation: shake 0.5s ease;
    }

@keyframes shake {
      0% {
        transform: translateX(0);
      }
      25% {
        transform: translateX(-10px);
      }
      50% {
        transform: translateX(10px);
      }
      75% {
        transform: translateX(-10px);
      }
      100% {
        transform: translateX(0);
      }
    }

.img-wave:hover {
      animation: wave 0.5s ease;
    }

@keyframes wave {
      0% {
        transform: rotate(0deg);
      }
      50% {
        transform: rotate(10deg);
      }
      100% {
        transform: rotate(0deg);
      }
    }

.img-tilt:hover {
      transform: perspective(500px) rotateX(10deg) rotateY(10deg);
    }

.img-stretch:hover {
      transform: scaleX(1.5);
    }

/* Overlay Styles for Fullscreen Image */
    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }

.overlay img {
      max-width: 90%;
      max-height: 80%;
      border-radius: 10px;
    }

.close-btn {
      position: absolute;
      top: 20px;
      right: 30px;
      font-size: 30px;
      color: white;
      cursor: pointer;
    }
  </style>
</head>
<body>

<div class="gallery-container">
    <h1>Image Gallery - With Hover Effect</h1>
    <div class="image-grid" id="imageGrid"></div>
  </div>

<div class="overlay" id="overlay">
    <span class="close-btn" id="closeBtn">×</span>
    <img id="overlayImage" src="" alt="Full View">
  </div>

// Reference to the image grid container
    const imageGrid = document.getElementById('imageGrid');
    const overlay = document.getElementById('overlay');
    const overlayImage = document.getElementById('overlayImage');
    const closeBtn = document.getElementById('closeBtn');

// Create 20 image elements and apply hover effect classes dynamically
    imageUrls.forEach((url, index) => {
      const img = document.createElement('img');
      img.src = url;
      img.className = `img-${index + 1}`; // Assign unique class to each image
      img.addEventListener('click', () => {
        overlayImage.src = url; // Set the clicked image as overlay source
        overlay.style.display = 'flex'; // Display the overlay
      });
      imageGrid.appendChild(img); // Add image to the grid
    });

// Close the overlay when clicking on the close button
    closeBtn.addEventListener('click', () => {
      overlay.style.display = 'none';
    });

// Close the overlay if clicking outside the image
    overlay.addEventListener('click', (e) => {
      if (e.target === overlay) {
        overlay.style.display = 'none';
      }
    });
  </script>

</body>
</html>

<!DOCTYPE html> 
<html lang="en"> 
<head>
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>24. Text-based Adventure Game</title>

/* Container for the game UI */
    #gameContainer {
      background-color: #222; /* Dark background for contrast */
      padding: 20px; /* Space inside the container */
      border-radius: 10px; /* Rounded corners */
      max-width: 500px; /* Max width for responsiveness */
      width: 90%; /* Responsive width */
    }

/* Styles for game text */
    #text {
      margin-bottom: 20px; /* Space below the text */
      font-size: 18px; /* Slightly larger text */
    }

/* Styles for choice buttons */
    .choiceButton {
      display: block; /* Makes buttons stack vertically */
      margin: 10px 0; /* Vertical spacing */
      padding: 10px; /* Space inside the button */
      font-size: 16px; /* Button text size */
      background-color: #444; /* Dark gray background */
      color: white; /* White text */
      border: none; /* No border */
      border-radius: 5px; /* Slightly rounded corners */
      cursor: pointer; /* Pointer cursor on hover */
    }

/* Button hover effect */
    .choiceButton:hover {
      background-color: #666; /* Lighter gray on hover */
    }
  </style>
</head>
<body>
  
  <div id="gameContainer">
    
    <div id="text">Welcome to the adventure!</div>
    
    <div id="choices"></div>
  </div>

// Get reference to the DOM elements
    const textElement = document.getElementById("text"); // For story text
    const choicesElement = document.getElementById("choices"); // For choice buttons

// Function to update the screen based on the game state
    function showState(stateKey) {
      const state = gameStates[stateKey]; // Get the current state object
      textElement.textContent = state.text; // Display the narrative text

// Clear any previous choices
      choicesElement.innerHTML = "";

// Loop through each choice for this state
      state.choices.forEach(choice => {
        const button = document.createElement("button"); // Create new button
        button.textContent = choice.text; // Set button label
        button.classList.add("choiceButton"); // Apply styling class
        button.addEventListener("click", () => showState(choice.next)); // Handle click
        choicesElement.appendChild(button); // Add button to UI
      });
    }

// Start the game at the initial state
    showState("start");
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>Simple E-commerce Store</title> 
  <style>
    /* Basic reset and body styling */
    body {
      font-family: Arial, sans-serif; /* Sets default font */
      margin: 0;
      padding: 0;
      background: #f2f2f2; /* Light grey background */
    }

header {
      background-color: #333; /* Dark background */
      color: white; /* White text */
      padding: 10px;
      text-align: center; /* Centered title */
    }

.container {
      padding: 20px; /* Inner spacing */
      display: flex;
      flex-wrap: wrap; /* Allows items to wrap */
      justify-content: center; /* Centers the products */
    }

.product {
      background: white; /* White background for products */
      border: 1px solid #ddd; /* Light grey border */
      margin: 10px; /* Space around products */
      padding: 15px; /* Inner padding */
      width: 200px; /* Fixed width */
      box-shadow: 0 0 5px rgba(0,0,0,0.1); /* Subtle shadow */
    }

.product h3 {
      margin: 0 0 10px 0; /* Space below title */
    }

.product button {
      padding: 10px;
      background: #28a745; /* Green color */
      color: white;
      border: none;
      cursor: pointer;
    }

.product button:hover {
      background: #218838; /* Darker green on hover */
    }

.cart {
      background: white;
      border-top: 3px solid #333;
      padding: 20px;
    }

@media (max-width: 600px) {
      .product {
        width: 90%; /* Full width on small screens */
      }
    }
  </style>
</head>
<body>

<header>
    <h1>Simple E-commerce Store</h1> 
  </header>

// Cart array to store added items
    let cart = [];

// Reference to product list container
    const productList = document.getElementById("product-list");

// Reference to cart elements
    const cartItems = document.getElementById("cart-items");
    const subtotalDisplay = document.getElementById("subtotal");
    const hstDisplay = document.getElementById("hst");
    const totalDisplay = document.getElementById("total");

// Loop through product array to generate product cards
    products.forEach((product, index) => {
      // Create product container
      const productDiv = document.createElement("div");
      productDiv.className = "product"; // Assign class for styling

// Create product title
      const title = document.createElement("h3");
      title.innerText = product.name;

// Create product price element
      const price = document.createElement("p");
      price.innerText = `$${product.price.toFixed(2)}`;

// Create "Add to Cart" button
      const button = document.createElement("button");
      button.innerText = "Add to Cart";

// Add click event to button
      button.onclick = () => {
        cart.push(product); // Add product to cart
        updateCart(); // Refresh cart display
      };

// Append elements to product div
      productDiv.appendChild(title);
      productDiv.appendChild(price);
      productDiv.appendChild(button);

// Append product div to container
      productList.appendChild(productDiv);
    });

// Function to update cart display
    function updateCart() {
      cartItems.innerHTML = ""; // Clear existing cart items

let subtotal = 0; // Initialize subtotal

// Loop through cart items and display
      cart.forEach((item) => {
        const li = document.createElement("li");
        li.innerText = `${item.name} - $${item.price.toFixed(2)}`;
        cartItems.appendChild(li); // Add item to list
        subtotal += item.price; // Add price to subtotal
      });

// Calculate HST (13%)
      const hst = subtotal * 0.13;

// Calculate total
      const total = subtotal + hst;

// Display prices
      subtotalDisplay.innerText = `Subtotal: $${subtotal.toFixed(2)}`;
      hstDisplay.innerText = `HST (13%): $${hst.toFixed(2)}`;
      totalDisplay.innerText = `Total: $${total.toFixed(2)}`;
    }
  </script>

</body>
</html>

<style>
    /* Resets margins and paddings */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box; /* Ensures padding doesn't affect element size */
    }

body {
      font-family: Arial, sans-serif; /* Sets default font */
      background: #f4f4f4; /* Light background color */
      display: flex;
      justify-content: center; /* Horizontally center the content */
      align-items: center; /* Vertically center the content */
      height: 100vh; /* Full viewport height */
    }

.calendar {
      background: white; /* White background for calendar box */
      padding: 20px; /* Space inside the calendar box */
      border-radius: 10px; /* Rounded corners */
      box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Soft shadow for depth */
      width: 100%;
      max-width: 400px; /* Max width for larger screens */
    }

.calendar-header {
      display: flex; /* Horizontal layout */
      justify-content: space-between; /* Space between elements */
      align-items: center; /* Align items vertically */
      margin-bottom: 10px; /* Space below the header */
    }

.calendar-header button {
      background: #007BFF; /* Blue background */
      color: white; /* White text */
      border: none; /* No border */
      padding: 5px 10px; /* Button padding */
      border-radius: 5px; /* Rounded corners */
      cursor: pointer; /* Pointer cursor on hover */
    }

.calendar-header h2 {
      font-size: 1.2em; /* Header font size */
    }

.day-names, .days {
      display: grid; /* Grid layout */
      grid-template-columns: repeat(7, 1fr); /* 7 equal columns */
      text-align: center; /* Centered text */
    }

.day-names div {
      font-weight: bold; /* Bold day names */
      margin-bottom: 5px; /* Space below */
    }

.days div {
      padding: 10px; /* Padding inside day cells */
      margin: 2px; /* Space around day cells */
      background: #e9e9e9; /* Light gray background */
      border-radius: 5px; /* Rounded day boxes */
    }

.days div.today {
      background: #007BFF; /* Blue background for today */
      color: white; /* White text for today */
    }

@media (max-width: 500px) {
      .calendar {
        padding: 10px; /* Less padding on small screens */
      }

.calendar-header h2 {
        font-size: 1em; /* Smaller header on mobile */
      }

.days div {
        padding: 8px; /* Smaller day cells on mobile */
      }
    }
  </style>
</head>
<body>

<div class="calendar">
    
    <div class="calendar-header">
      <button id="prev">‹</button> 
      <h2 id="monthYear"></h2> 
      <button id="next">›</button> 
    </div>

<div class="day-names">
      <div>Sun</div>
      <div>Mon</div>
      <div>Tue</div>
      <div>Wed</div>
      <div>Thu</div>
      <div>Fri</div>
      <div>Sat</div>
    </div>

<div class="days" id="daysContainer"></div>
  </div>

<script>
    const monthYear = document.getElementById("monthYear"); // Gets the header element
    const daysContainer = document.getElementById("daysContainer"); // Gets the container for day cells
    const prevBtn = document.getElementById("prev"); // Gets previous month button
    const nextBtn = document.getElementById("next"); // Gets next month button

let currentDate = new Date(); // Initializes with current date

// Function to render the calendar
    function renderCalendar() {
      const year = currentDate.getFullYear(); // Gets the year
      const month = currentDate.getMonth(); // Gets the month (0-11)
      const today = new Date(); // Gets today's date

// Sets the month and year in the header
      monthYear.textContent = currentDate.toLocaleString("default", {
        month: "long",
        year: "numeric"
      });

// Clears previous days
      daysContainer.innerHTML = "";

// Finds the first day of the month (0 = Sunday, ..., 6 = Saturday)
      const firstDayIndex = new Date(year, month, 1).getDay();

// Finds the total number of days in the month
      const daysInMonth = new Date(year, month + 1, 0).getDate();

// Adds empty slots before the first day of the month
      for (let i = 0; i < firstDayIndex; i++) {
        const emptyDiv = document.createElement("div"); // Creates an empty cell
        daysContainer.appendChild(emptyDiv); // Adds it to the container
      }

// Adds day numbers
      for (let day = 1; day <= daysInMonth; day++) {
        const dayDiv = document.createElement("div"); // Creates a day cell
        dayDiv.textContent = day; // Sets the text to the day number

// Highlights today if it's the current date
        if (
          day === today.getDate() &&
          month === today.getMonth() &&
          year === today.getFullYear()
        ) {
          dayDiv.classList.add("today"); // Adds 'today' class for styling
        }

daysContainer.appendChild(dayDiv); // Adds the day to the container
      }
    }

// Event listener to go to the previous month
    prevBtn.addEventListener("click", () => {
      currentDate.setMonth(currentDate.getMonth() - 1); // Decrease month
      renderCalendar(); // Re-render calendar
    });

// Event listener to go to the next month
    nextBtn.addEventListener("click", () => {
      currentDate.setMonth(currentDate.getMonth() + 1); // Increase month
      renderCalendar(); // Re-render calendar
    });

renderCalendar(); // Initial rendering of the calendar
  </script>
</body>
</html>

Single-Page Form

<!DOCTYPE html>
<html lang="en">
<head>
  
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <title>27. Survey Form</title>
  
  
  <style>
    /* Style the entire page */
    body {
      font-family: Arial, sans-serif; /* Use clean font */
      margin: 0; /* Remove default margin */
      padding: 20px; /* Add padding */
      background-color: #f2f2f2; /* Light gray background */
    }

/* Container holding the form */
    .container {
      max-width: 600px; /* Limit width for readability */
      margin: auto; /* Center horizontally */
      background-color: #fff; /* White background */
      padding: 20px; /* Padding inside box */
      box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Slight shadow */
      border-radius: 10px; /* Rounded corners */
    }

/* Title style */
    h1 {
      text-align: center; /* Center the heading */
      color: #333; /* Dark text color */
    }

/* Label style */
    label {
      display: block; /* Show each label on its own line */
      margin-top: 15px; /* Space above each label */
      color: #555; /* Medium gray */
    }

/* Style text input, email, select and textarea fields */
    input, select, textarea {
      width: 100%; /* Take full width */
      padding: 10px; /* Inner space */
      margin-top: 5px; /* Space above input */
      border: 1px solid #ccc; /* Light gray border */
      border-radius: 5px; /* Slightly rounded edges */
      box-sizing: border-box; /* Include padding in width */
    }

/* Style the submit button */
    button {
      margin-top: 20px; /* Space above button */
      padding: 12px; /* Button size */
      width: 100%; /* Full width */
      background-color: #28a745; /* Green background */
      color: white; /* White text */
      border: none; /* No border */
      border-radius: 5px; /* Rounded corners */
      cursor: pointer; /* Pointer cursor on hover */
      font-size: 16px; /* Larger text */
    }

/* Change button color when hovered */
    button:hover {
      background-color: #218838; /* Darker green */
    }

/* Make form responsive */
    @media (max-width: 600px) {
      .container {
        padding: 15px; /* Less padding on smaller screens */
      }
    }
  </style>
</head>
<body>
  
  
  <div class="container">
    
    <h1>27. Survey Form</h1>

<form id="surveyForm">
      
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" required>

<label for="email">Email:</label>
      <input type="email" id="email" name="email" required>

<label for="age">Age:</label>
      <input type="number" id="age" name="age" min="10" max="100">

<label for="gender">Gender:</label>
      <select id="gender" name="gender">
        <option value="">--Please choose an option--</option>
        <option value="female">Female</option>
        <option value="male">Male</option>
        <option value="other">Other</option>
      </select>

<label for="comments">Additional Comments:</label>
      <textarea id="comments" name="comments" rows="4"></textarea>

<button type="submit">Submit Survey</button>
    </form>
  </div>

<script>
    // Select the form element by ID
    const form = document.getElementById('surveyForm');

// Add a listener for form submission
    form.addEventListener('submit', function(event) {
      // Prevent default behavior (page reload)
      event.preventDefault();

// Capture form input values
      const name = document.getElementById('name').value;
      const email = document.getElementById('email').value;
      const age = document.getElementById('age').value;
      const gender = document.getElementById('gender').value;
      const comments = document.getElementById('comments').value;

// Create a summary string with user input
      const summary = `
        Thank you for your response!\n
        Name: ${name}\n
        Email: ${email}\n
        Age: ${age}\n
        Gender: ${gender}\n
        Comments: ${comments}
      `;

// Show summary as alert (you can replace with modal or server logic)
      alert(summary);

// Optionally reset the form after submission
      form.reset();
    });
  </script>

</body>
</html>

Multi-Page Survey Form

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>27. Multi-Page Survey Form</title>
  
  <style>
    /* Basic Styling for the Page */
    body {
      font-family: Arial, sans-serif; /* Clean font */
      margin: 0; /* Remove default margin */
      padding: 20px; /* Add padding */
      background-color: #f2f2f2; /* Light gray background */
    }

/* Main container to hold the form */
    .container {
      max-width: 600px; /* Max width */
      margin: auto; /* Center form */
      background-color: #fff; /* White background */
      padding: 20px; /* Inner space */
      box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Shadow around container */
      border-radius: 10px; /* Rounded corners */
    }

/* Title of the survey form */
    h1 {
      text-align: center; /* Center the title */
      color: #333; /* Dark text */
    }

/* Style for each input field */
    input, select, textarea {
      width: 100%; /* Full width */
      padding: 10px; /* Padding inside fields */
      margin-top: 5px; /* Space above input */
      border: 1px solid #ccc; /* Light gray border */
      border-radius: 5px; /* Rounded corners */
      box-sizing: border-box; /* Include padding in width */
    }

/* Button to navigate pages */
    .btn {
      margin-top: 20px; /* Space above button */
      padding: 12px; /* Button size */
      width: 100%; /* Full width button */
      background-color: #28a745; /* Green background */
      color: white; /* White text */
      border: none; /* No border */
      border-radius: 5px; /* Rounded corners */
      cursor: pointer; /* Pointer cursor */
      font-size: 16px; /* Larger text */
    }

/* Change color when hovering over button */
    .btn:hover {
      background-color: #218838; /* Darker green */
    }

/* Hide all pages by default */
    .page {
      display: none; /* Hide all pages initially */
    }

/* Show only the active page */
    .active {
      display: block; /* Display active page */
    }
  </style>
</head>
<body>

<div class="container">
    
    <h1>27. Multi-Page Survey Form</h1>

<form id="surveyForm">
      
      
      <div class="page active" id="page1">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>

<label for="email">Email:</label>
        <input type="email" id="email" name="email" required>

<div class="page" id="page2">
        <label for="age">Age:</label>
        <input type="number" id="age" name="age" min="10" max="100">

<label for="gender">Gender:</label>
        <select id="gender" name="gender">
          <option value="">--Please choose an option--</option>
          <option value="female">Female</option>
          <option value="male">Male</option>
          <option value="other">Other</option>
        </select>

<div class="page" id="page3">
        <label for="comments">Additional Comments:</label>
        <textarea id="comments" name="comments" rows="4"></textarea>

<button type="button" class="btn" onclick="submitForm()">Submit Survey</button> 
      </div>

</form>
  </div>

// Show the selected page
      document.getElementById('page' + pageNumber).classList.add('active'); // Add 'active' class to show the current page
    }

// Function to submit the form and display a summary
    function submitForm() {
      // Capture form input values
      const name = document.getElementById('name').value;
      const email = document.getElementById('email').value;
      const age = document.getElementById('age').value;
      const gender = document.getElementById('gender').value;
      const comments = document.getElementById('comments').value;

// Show the summary as an alert (could replace with a confirmation page/modal)
      alert(summary);

// Optionally reset the form after submission
      document.getElementById('surveyForm').reset();
    }
  </script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  
  <meta charset="UTF-8">
  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <title>28. News App</title>
  <style>
    /* Basic reset and background color */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background: #f4f4f4;
    }

/* App title styling */
    h1 {
      text-align: center;
      padding: 20px;
      background-color: #333;
      color: white;
    }

/* News container grid setup */
    .news-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 20px;
      padding: 20px;
    }

/* Individual news card styling */
    .news-card {
      background: white;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      display: flex;
      flex-direction: column;
    }

/* News image styling */
    .news-card img {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }

/* Padding around the text content */
    .news-content {
      padding: 15px;
    }

/* Headline style */
    .news-content h3 {
      margin: 0 0 10px 0;
      font-size: 1.2rem;
    }

/* Description style */
    .news-content p {
      font-size: 0.95rem;
      color: #555;
    }

/* Link button */
    .news-content a {
      margin-top: auto;
      display: inline-block;
      text-decoration: none;
      color: white;
      background: #007BFF;
      padding: 10px 15px;
      border-radius: 5px;
      margin-top: 10px;
    }

/* Responsive tweaks */
    @media (max-width: 500px) {
      h1 {
        font-size: 1.5rem;
      }
    }
  </style>
</head>
<body>
  
  <h1>28. News App</h1>

<div class="news-container" id="newsContainer">
    
  </div>

<script>
    // Selects the container where we’ll display the news cards
    const newsContainer = document.getElementById("newsContainer");

// Asynchronous function to fetch news data
    async function fetchNews() {
      // Try-catch block to handle errors gracefully
      try {
        // Replace with your actual API key (replace 'YOUR_API_KEY_HERE' with a valid one)
        const apiKey = 'YOUR_API_KEY_HERE';
        
        // URL of the News API (example uses NewsAPI.org)
        const url = `https://newsapi.org/v2/top-headlines?country=us&apiKey=${apiKey}`;
        
        // Check if the API Key exists
        if (!apiKey || apiKey === 'YOUR_API_KEY_HERE') {
          alert('Please insert a valid API key from NewsAPI.org');
          return;
        }

// Fetches data from the API
        const response = await fetch(url);
        
        // Handle cases where response is not ok (like 404 or 500 errors)
        if (!response.ok) {
          throw new Error('Error fetching the news data.');
        }

// Converts the response into JSON
        const data = await response.json();
        
        // Check if the API returned articles
        if (!data.articles || data.articles.length === 0) {
          newsContainer.innerHTML = "<p>No news available at the moment.</p>";
          return;
        }

// Loops through each article in the news data
        data.articles.forEach(article => {
          // Creates a div for each news card
          const card = document.createElement('div');
          card.className = 'news-card';

// Adds HTML content to the news card
          card.innerHTML = `
            <img src="${article.urlToImage || 'https://via.placeholder.com/400x200'}" alt="News Image">
            <div class="news-content">
              <h3>${article.title}</h3>
              <p>${article.description || 'No description available.'}</p>
              <a href="${article.url}" target="_blank">Read More</a>
            </div>
          `;

// Appends the card to the container
          newsContainer.appendChild(card);
        });

} catch (error) {
        // If there's an error (like network issues), log it
        console.error("Error fetching news:", error);
        // Show fallback message
        newsContainer.innerHTML = "<p>Unable to load news. Please try again later.</p>";
      }
    }

// Calls the function to fetch and display news when the page loads
    fetchNews();
  </script>
</body>
</html>

Important Notes

API Key: You need to replace 'YOUR_API_KEY_HERE' with an actual API key from NewsAPI. Without a valid key, the fetch request won't work.

CORS Issue: If you're testing it locally, your browser might block the API request due to CORS (Cross-Origin Resource Sharing). If that’s the case, try using a local server like VS Code Live Server or a similar tool, or host it on a server to avoid CORS issues.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>29. Weather Dashboard</title>
    <style>
        /* Global styles */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

.container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

#weatherForm {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column; /* Stack input and button vertically */
            margin-bottom: 20px;
        }

#cityInput {
            width: 100%;
            max-width: 300px;
            padding: 10px;
            font-size: 16px;
            margin-bottom: 10px; /* Adds spacing between input and button */
            box-sizing: border-box; /* Ensures the padding doesn't break the layout */
        }

#getWeatherBtn {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #007bff;
            color: white;
            border: none;
            cursor: pointer;
            width: 100%;
            max-width: 150px; /* Limit button width */
        }

#getWeatherBtn:hover {
            background-color: #0056b3;
        }

#weatherDisplay {
            display: flex;
            flex-wrap: wrap; /* Allow cards to wrap */
            justify-content: space-between;
            gap: 20px;
            margin-top: 20px;
        }

.weatherCard {
            display: inline-block;
            width: calc(33.33% - 20px);
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 8px;
            background-color: #f8f9fa;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            box-sizing: border-box;
        }

.weatherCard h2 {
            margin: 0;
            font-size: 24px;
        }

.weatherCard p {
            margin: 5px 0;
            font-size: 18px;
        }

/* Responsive Styles */
        @media (max-width: 768px) {
            .weatherCard {
                width: 100%; /* Full width on small screens */
                margin: 0 auto;
            }

#cityInput {
                width: 90%; /* Make input field larger on smaller screens */
            }

#getWeatherBtn {
                width: 90%; /* Make button larger on smaller screens */
            }

#weatherForm {
                flex-direction: column; /* Stack form elements vertically */
            }
        }

/* Extra Small Devices */
        @media (max-width: 480px) {
            .weatherCard {
                padding: 15px; /* Smaller padding on mobile devices */
            }

.weatherCard h2 {
                font-size: 20px; /* Adjust font size */
            }

.weatherCard p {
                font-size: 16px; /* Adjust font size */
            }

#cityInput {
                font-size: 14px; /* Adjust font size for input */
            }

#getWeatherBtn {
                font-size: 14px; /* Adjust font size for button */
            }
        }
    </style>
</head>
<body>

<div class="container">
        
        <form id="weatherForm">
            <input type="text" id="cityInput" placeholder="Enter City Name" required />
            <button type="submit" id="getWeatherBtn">Get Weather</button>
        </form>

<div id="weatherDisplay"></div>
    </div>

// Fetch weather data based on city input
        async function getWeatherData(city) {
            const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;
            try {
                const response = await fetch(url);
                if (response.ok) {
                    const data = await response.json();
                    displayWeather(data); // Display weather data
                } else {
                    alert('City not found');
                }
            } catch (error) {
                alert('Error fetching weather data');
                console.error('Error:', error);
            }
        }

// Display weather data on the page
        function displayWeather(data) {
            const weatherDisplay = document.getElementById('weatherDisplay');
            weatherDisplay.innerHTML = ''; // Clear previous results

const weatherCard = document.createElement('div');
            weatherCard.className = 'weatherCard';

weatherCard.innerHTML = `
                <h2>${data.name}, ${data.sys.country}</h2>
                <p><strong>Temperature:</strong> ${data.main.temp}°C</p>
                <p><strong>Weather:</strong> ${data.weather[0].description}</p>
                <p><strong>Humidity:</strong> ${data.main.humidity}%</p>
                <p><strong>Wind Speed:</strong> ${data.wind.speed} m/s</p>
            `;

weatherDisplay.appendChild(weatherCard);
        }

// Handle form submission and fetch weather data
        document.getElementById('weatherForm').addEventListener('submit', function(event) {
            event.preventDefault(); // Prevent the form from refreshing the page
            const city = document.getElementById('cityInput').value.trim(); // Get city name
            if (city) {
                getWeatherData(city); // Fetch and display weather data
            }
        });
    </script>

</body>
</html>

Important Instructions

Get your API Key: Go to OpenWeatherMap and create a free account. After signing in, go to the API section and generate an API key. Replace 'YOUR_API_KEY' in the code with this key.

Run Locally: Save the code in an .html file and open it in your browser. If you're running it on your local machine, it should work. If you encounter CORS issues, try running it from a local server (you can use a tool like Live Server if you're using VS Code).

Check Developer Console: If the data isn't displayed correctly, check the browser console for error messages (right-click > Inspect > Console).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>30. GitHub Finder</title>
    <style>
        /* Basic styling for the container */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f7fc;
            margin: 0;
            padding: 0;
        }

.container {
            width: 80%;
            margin: 20px auto;
            text-align: center;
        }

h1 {
            color: #333;
        }

/* Style for the search bar */
        .search-bar {
            margin: 20px 0;
        }

.search-input {
            padding: 10px;
            width: 80%;
            border-radius: 5px;
            border: 1px solid #ccc;
            font-size: 16px;
        }

/* Button style */
        .search-btn {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-left: 10px;
        }

.search-btn:hover {
            background-color: #0056b3;
        }

/* Style for displaying the user data */
        .user-info {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            margin-top: 20px;
        }

.user-card {
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin: 10px;
            width: 250px;
            text-align: center;
        }

.user-avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin-bottom: 15px;
        }

.user-name {
            font-size: 20px;
            color: #333;
        }

.user-bio {
            font-size: 14px;
            color: #777;
            margin-bottom: 10px;
        }

/* Repositories section */
        .repos {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin-top: 30px;
        }

.repo-card {
            background-color: #fff;
            padding: 15px;
            margin: 10px;
            width: 220px;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

.repo-name {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 5px;
        }

.repo-url {
            color: #007bff;
            text-decoration: none;
        }

/* Styling for the reset button */
        .reset-btn {
            padding: 10px 20px;
            background-color: #e83e8c;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 20px;
        }

.reset-btn:hover {
            background-color: #c51f5e;
        }

/* Responsive styling for smaller screens */
        @media screen and (max-width: 600px) {
            .search-input {
                width: 70%;
            }

.user-card, .repo-card {
                width: 90%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>GitHub Finder</h1>
        
        
        <div class="search-bar">
            <input type="text" id="username" class="search-input" placeholder="Enter GitHub Username">
            <button class="search-btn" onclick="searchUser()">Search</button>
        </div>

<button class="reset-btn" onclick="resetResults()">Reset</button>

<div id="user-info" class="user-info"></div>

<div id="repos" class="repos"></div>
    </div>

// Fetch user data from GitHub API
            fetch(`https://api.github.com/users/${username}`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('User not found');
                    }
                    return response.json();
                })
                .then(data => {
                    // Display user info
                    displayUserInfo(data);
                    // Fetch repositories data
                    fetchRepos(data.repos_url);
                })
                .catch(error => {
                    alert(error.message);
                    resetResults(); // Reset results on error
                });
        }

// Function to display user information
        function displayUserInfo(data) {
            const userInfoContainer = document.getElementById('user-info');
            userInfoContainer.innerHTML = `
                <div class="user-card">
                    <img src="${data.avatar_url}" alt="${data.login}" class="user-avatar">
                    <div class="user-name">${data.name || data.login}</div>
                    <div class="user-bio">${data.bio || 'No bio available'}</div>
                    <div>Followers: ${data.followers}</div>
                    <a href="${data.html_url}" target="_blank">View Profile</a>
                </div>
            `;
        }

// Function to fetch and display user repositories
        function fetchRepos(reposUrl) {
            fetch(reposUrl)
                .then(response => response.json())
                .then(repos => {
                    displayRepos(repos);
                })
                .catch(error => {
                    console.log('Error fetching repos:', error);
                    document.getElementById('repos').innerHTML = '<p>Could not load repositories.</p>';
                });
        }

// Function to display repositories in the repos container
        function displayRepos(repos) {
            const reposContainer = document.getElementById('repos');
            reposContainer.innerHTML = ''; // Clear any previous data

// If no repositories found
            if (repos.length === 0) {
                reposContainer.innerHTML = '<p>No repositories found.</p>';
                return;
            }

// Loop through each repository and create a card
            repos.forEach(repo => {
                const repoCard = document.createElement('div');
                repoCard.classList.add('repo-card');
                repoCard.innerHTML = `
                    <div class="repo-name">${repo.name}</div>
                    <p>${repo.description || 'No description available'}</p>
                    <a href="${repo.html_url}" class="repo-url" target="_blank">View Repo</a>
                `;
                reposContainer.appendChild(repoCard);
            });
        }

// Function to reset the search results
        function resetResults() {
            document.getElementById('username').value = ''; // Clear the input field
            document.getElementById('user-info').innerHTML = ''; // Clear user info section
            document.getElementById('repos').innerHTML = ''; // Clear repositories section
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>31. Invoice Generator</title>
  <style>
    /* Basic CSS Reset */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

/* Container for the entire page */
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f9;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

/* Main container for the invoice form */
    .invoice-container {
      width: 90%;
      max-width: 800px;
      background-color: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

/* Title styling */
    h1 {
      text-align: center;
      color: #333;
      margin-bottom: 20px;
    }

/* Invoice form fields */
    .invoice-form {
      display: flex;
      flex-direction: column;
    }

.invoice-form input,
    .invoice-form select {
      padding: 10px;
      margin: 8px 0;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 16px;
    }

/* Button styling */
    .btn {
      background-color: #4CAF50;
      color: white;
      padding: 10px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
    }

.btn:hover {
      background-color: #45a049;
    }

/* Invoice output container */
    .invoice-output {
      margin-top: 30px;
    }

/* Responsive styling */
    @media (max-width: 600px) {
      .invoice-container {
        padding: 15px;
      }

.btn {
        width: 100%;
      }
    }
  </style>
</head>

<body>
  <div class="invoice-container">
    <h1>Invoice Generator</h1>
    <form id="invoiceForm" class="invoice-form">
      <label for="itemName">Item Name:</label>
      <input type="text" id="itemName" placeholder="Enter item name" required>
      
      <label for="quantity">Quantity:</label>
      <input type="number" id="quantity" placeholder="Enter quantity" required min="1">
      
      <label for="price">Price per Item:</label>
      <input type="number" id="price" placeholder="Enter price" required min="0.01" step="0.01">
      
      <label for="taxRate">Tax Rate (%):</label>
      <input type="number" id="taxRate" placeholder="Enter tax rate" required min="0" step="0.1">

<button type="button" class="btn" onclick="generateInvoice()">Generate Invoice</button>
    </form>

// Calculate the total amount
      const totalBeforeTax = quantity * price; // Total price before tax
      const taxAmount = (taxRate / 100) * totalBeforeTax; // Tax amount
      const totalAfterTax = totalBeforeTax + taxAmount; // Total price after tax

// Create the invoice HTML content
      const invoiceHTML = `
        <h2>Invoice Summary</h2>
        <p><strong>Item Name:</strong> ${itemName}</p>
        <p><strong>Quantity:</strong> ${quantity}</p>
        <p><strong>Price per Item:</strong> $${price.toFixed(2)}</p>
        <p><strong>Total (Before Tax):</strong> $${totalBeforeTax.toFixed(2)}</p>
        <p><strong>Tax (${taxRate}%):</strong> $${taxAmount.toFixed(2)}</p>
        <p><strong>Total (After Tax):</strong> $${totalAfterTax.toFixed(2)}</p>
      `;

// Display the generated invoice in the output section
      document.getElementById("invoiceOutput").innerHTML = invoiceHTML;

// Clear form after generating the invoice
      document.getElementById("invoiceForm").reset();
    }
  </script>
</body>

</html>

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>32. Shopping Cart</title> 
    <style> 
        /* Basic reset to remove any browser-specific padding/margin */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: Arial, sans-serif; /* Set font family */
            background-color: #f8f9fa; /* Light background color */
            display: flex; /* Use flexbox layout */
            justify-content: center; /* Center elements horizontally */
            align-items: center; /* Center elements vertically */
            min-height: 100vh; /* Full viewport height */
        }

.cart-container {
            background-color: white; /* White background for the shopping cart */
            width: 90%; /* Set width to 90% of the container */
            max-width: 800px; /* Set max-width to 800px */
            padding: 20px; /* Add padding inside the container */
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); /* Add shadow around the container */
            border-radius: 10px; /* Rounded corners */
        }

h1 {
            text-align: center; /* Center-align the header */
            color: #343a40; /* Set header color */
            margin-bottom: 20px; /* Add space below header */
        }

.product {
            display: flex; /* Use flexbox for product layout */
            justify-content: space-between; /* Space items evenly */
            align-items: center; /* Vertically align items */
            padding: 15px 0; /* Add padding above and below each product */
            border-bottom: 1px solid #ccc; /* Add a bottom border for separation */
        }

.product img {
            width: 50px; /* Set image width */
            height: 50px; /* Set image height */
            object-fit: cover; /* Ensure the image is not stretched */
        }

.product-name {
            flex: 1; /* Allow product name to take up remaining space */
            padding-left: 10px; /* Add space to the left of the product name */
        }

.product-price {
            width: 80px; /* Fixed width for price */
            text-align: right; /* Align text to the right */
        }

.product-quantity {
            width: 50px; /* Fixed width for quantity input */
            text-align: center; /* Align text to the center */
        }

.total {
            display: flex; /* Use flexbox for the total section */
            justify-content: space-between; /* Space out the total label and price */
            margin-top: 20px; /* Add space above total section */
            font-size: 18px; /* Increase font size for total */
        }

.button {
            display: block; /* Display button as block element */
            width: 100%; /* Button takes full width */
            padding: 15px; /* Add padding inside button */
            background-color: #007bff; /* Set button background color */
            color: white; /* Set button text color */
            text-align: center; /* Center-align text inside button */
            font-size: 16px; /* Set font size */
            border: none; /* Remove border */
            border-radius: 5px; /* Rounded button corners */
            cursor: pointer; /* Change cursor to pointer on hover */
            margin-top: 20px; /* Add space above button */
        }

.button:hover {
            background-color: #0056b3; /* Change button color on hover */
        }

@media (max-width: 600px) {
            /* Adjust styles for smaller screens */
            .cart-container {
                width: 100%; /* Make container take full width on small screens */
                padding: 10px; /* Reduce padding */
            }

h1 {
                font-size: 24px; /* Reduce font size for header */
            }

.product {
                flex-direction: column; /* Stack items vertically */
                align-items: flex-start; /* Align items to the left */
            }

.product-name, .product-price, .product-quantity {
                width: 100%; /* Set all elements to full width */
                text-align: left; /* Align text to the left */
                margin-top: 5px; /* Add space between elements */
            }

.product-quantity {
                text-align: center; /* Center-align quantity on small screens */
            }
        }
    </style> 
</head>
<body> 
    <div class="cart-container"> 
        <h1>Shopping Cart</h1>

<div class="product"> 
            <img src="https://via.placeholder.com/50" alt="Product 1"> 
            <div class="product-name">Product 1</div> 
            <div class="product-price">$19.99</div> 
            <input type="number" value="1" min="1" class="product-quantity"> 
        </div>

<div class="product"> 
            <img src="https://via.placeholder.com/50" alt="Product 2"> 
            <div class="product-name">Product 2</div> 
            <div class="product-price">$29.99</div> 
            <input type="number" value="1" min="1" class="product-quantity"> 
        </div>

<div class="total"> 
            <div>Total:</div> 
            <div id="total-price">$49.98</div> 
        </div>

<button class="button" id="checkout-btn">Checkout</button> 
    </div>

// Get all product items
            const products = document.querySelectorAll('.product');

// Loop through each product and calculate the price
            products.forEach(function(product) {
                const price = parseFloat(product.querySelector('.product-price').textContent.replace('$', '')); // Get product price
                const quantity = product.querySelector('.product-quantity').value; // Get product quantity
                total += price * quantity; // Add price * quantity to total
            });

// Update total price on the screen
            document.getElementById('total-price').textContent = `$${total.toFixed(2)}`; // Display total with two decimal places
        }

// Event listener for quantity change to update the total
        document.querySelectorAll('.product-quantity').forEach(function(input) {
            input.addEventListener('change', calculateTotal); // Call calculateTotal when quantity changes
        });

// Event listener for checkout button click
        document.getElementById('checkout-btn').addEventListener('click', function() {
            alert('Proceeding to checkout!'); // Display an alert when checkout is clicked
        });

// Initial call to calculate total price
        calculateTotal(); // Run the function to calculate total price on page load
    </script> 
</body> 
</html>

Shopping Cart Checkout Form

body {
            font-family: Arial, sans-serif;
            background-color: #f8f9fa;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

.checkout-container {
            background-color: white;
            width: 90%;
            max-width: 600px;
            padding: 20px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
        }

h1 {
            text-align: center;
            color: #343a40;
            margin-bottom: 20px;
        }

.total {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            font-size: 18px;
            border-bottom: 1px solid #ccc;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }

.payment-form {
            display: flex;
            flex-direction: column;
        }

.payment-form input {
            padding: 10px;
            margin: 10px 0;
            border-radius: 5px;
            border: 1px solid #ccc;
        }

.button {
            display: block;
            width: 100%;
            padding: 15px;
            background-color: #007bff;
            color: white;
            text-align: center;
            font-size: 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 20px;
        }

.button:hover {
            background-color: #0056b3;
        }

@media (max-width: 600px) {
            .checkout-container {
                width: 100%;
                padding: 10px;
            }

h1 {
                font-size: 24px;
            }

.total {
                font-size: 16px;
            }
        }
    </style> 
</head>
<body> 
    <div class="checkout-container"> 
        <h1>Checkout</h1>

<div class="total"> 
            <div>Total:</div> 
            <div id="total-price">$49.98</div> 
        </div>

<div class="payment-form"> 
            <input type="text" id="card-name" placeholder="Cardholder's Name" required> 
            <input type="text" id="card-number" placeholder="Card Number" required> 
            <input type="text" id="expiry-date" placeholder="MM/YY" required> 
            <input type="text" id="cvv" placeholder="CVV" required> 
        </div>

<button class="button" id="submit-payment-btn">Submit Payment</button>

</div>

// Event listener for submit button to process payment
        document.getElementById('submit-payment-btn').addEventListener('click', function() {
            // Get values from the payment form
            const cardName = document.getElementById('card-name').value;
            const cardNumber = document.getElementById('card-number').value;
            const expiryDate = document.getElementById('expiry-date').value;
            const cvv = document.getElementById('cvv').value;

// Basic validation (This is just an example; more validation would be needed for real payments)
            if (!cardName || !cardNumber || !expiryDate || !cvv) {
                alert('Please fill out all fields.'); // Alert if fields are missing
                return;
            }

// Simulate processing payment
            alert(`Payment of $49.98 from ${cardName} processed successfully!`); // Simulate payment success
        });

// Initial call to calculate total price (if needed)
        calculateTotal(); // Run the function to calculate total price on page load
    </script> 
</body> 
</html>

<!DOCTYPE html> 
<html lang="en"> 
<head>
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>33. Random Joke Generator</title> 
    <style>
        /* Basic CSS for responsiveness and styling */
        body { 
            font-family: Arial, sans-serif; /* Sets the font style for the page */
            display: flex; /* Enables flexbox layout */
            justify-content: center; /* Centers content horizontally */
            align-items: center; /* Centers content vertically */
            height: 100vh; /* Sets the height to 100% of the viewport height */
            margin: 0; /* Removes default margin */
            background-color: #f7f7f7; /* Sets a light background color */
        }

.container {
            text-align: center; /* Centers text inside the container */
            background-color: white; /* Sets the background color of the container */
            border-radius: 8px; /* Rounds the corners of the container */
            padding: 20px; /* Adds padding around the content */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow around the container */
            width: 80%; /* Makes the container width responsive */
            max-width: 600px; /* Sets a maximum width for the container */
        }

button {
            padding: 10px 20px; /* Adds padding inside the button */
            font-size: 16px; /* Sets the font size of the button */
            cursor: pointer; /* Changes the cursor to a pointer on hover */
            background-color: #007bff; /* Sets a blue background color for the button */
            color: white; /* Sets the text color to white */
            border: none; /* Removes the border */
            border-radius: 5px; /* Rounds the corners of the button */
            margin-top: 20px; /* Adds space above the button */
        }

button:hover {
            background-color: #0056b3; /* Changes the background color when the button is hovered */
        }

.joke {
            margin-top: 20px; /* Adds space above the joke text */
            font-size: 18px; /* Sets the font size of the joke */
            color: #333; /* Sets the text color */
        }
    </style>
</head>
<body>

<h1>Random Joke Generator</h1>

<div id="joke" class="joke"> 
            Click the button to get a joke! 
        </div>

</div>

</body> 
</html>

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>34. Number Guessing Game</title> 
    <style>
        /* Basic styling to center the content and make it responsive */
        body {
            font-family: Arial, sans-serif; /* Set the font for the page */
            display: flex; /* Use flexbox for centering */
            justify-content: center; /* Align content horizontally */
            align-items: center; /* Align content vertically */
            height: 100vh; /* Full height of the viewport */
            margin: 0; /* Remove default margin */
            background-color: #f0f0f0; /* Set a light background color */
        }

.container {
            text-align: center; /* Center text inside the container */
            padding: 20px; /* Add padding around the container */
            background-color: white; /* Set background to white */
            border-radius: 10px; /* Round the corners */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add shadow effect */
            max-width: 500px; /* Set max width */
            width: 100%; /* Set width to 100% for responsiveness */
        }

h1 {
            font-size: 24px; /* Set font size for the title */
            color: #333; /* Set color for the title */
        }

input {
            padding: 10px; /* Add padding inside the input */
            font-size: 16px; /* Set font size inside input */
            margin: 10px 0; /* Add margin on top and bottom */
            border: 2px solid #ccc; /* Add border around input */
            border-radius: 5px; /* Round the corners of the input */
            width: 80%; /* Make the input width responsive */
        }

button {
            padding: 10px 20px; /* Add padding around the button */
            font-size: 16px; /* Set font size inside button */
            background-color: #4CAF50; /* Green background color */
            color: white; /* White text color */
            border: none; /* Remove border */
            border-radius: 5px; /* Round the corners of the button */
            cursor: pointer; /* Change cursor to pointer on hover */
        }

button:hover {
            background-color: #45a049; /* Change background color on hover */
        }

.message {
            font-size: 18px; /* Set font size for message */
            color: #333; /* Set text color for message */
            margin-top: 20px; /* Add margin on top */
        }

@media (max-width: 600px) {
            .container {
                padding: 10px; /* Reduce padding for smaller screens */
            }
        }
    </style>
</head>
<body>
    <div class="container"> 
        <h1>Guess the Number Game</h1> 
        <p>Guess a number between 1 and 100</p>

<input type="number" id="guess" placeholder="Enter your guess" /> 
        <button onclick="checkGuess()">Submit Guess</button>

function checkGuess() {
            let userGuess = document.getElementById("guess").value; // Get the value from the input field
            let messageElement = document.getElementById("message"); // Get the message element

if (userGuess < 1 || userGuess > 100 || isNaN(userGuess)) { // Check if the input is a valid number between 1 and 100
                messageElement.textContent = "Please enter a valid number between 1 and 100."; // Show error message
                messageElement.style.color = "red"; // Set message color to red
                return; // Stop the function if the guess is invalid
            }

attempts++; // Increment the attempt counter

if (userGuess == randomNumber) { // Check if the user's guess is correct
                messageElement.textContent = `Congratulations! You guessed the number in ${attempts} attempts.`; // Success message
                messageElement.style.color = "green"; // Set message color to green
            } else if (userGuess < randomNumber) { // Check if the guess is too low
                messageElement.textContent = "Too low, try again."; // Give a hint
                messageElement.style.color = "blue"; // Set message color to blue
            } else if (userGuess > randomNumber) { // Check if the guess is too high
                messageElement.textContent = "Too high, try again."; // Give a hint
                messageElement.style.color = "blue"; // Set message color to blue
            }
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>35. URL Shortener</title>
    <style>
        /* Style for the body, setting background color, text color, and font */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            color: #333;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        /* Container that holds the URL shortener box */
        .container {
            background-color: #fff;
            padding: 20px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            max-width: 500px;
            width: 100%;
        }
        /* Style for heading text */
        h1 {
            text-align: center;
            color: #5a5a5a;
        }
        /* Style for input fields */
        input[type="text"] {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
        }
        /* Button style for shortening the URL */
        button {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
        }
        /* Button hover effect */
        button:hover {
            background-color: #0056b3;
        }
        /* Style for showing the shortened URL */
        .output {
            margin-top: 20px;
            text-align: center;
        }
        /* Make sure the app is responsive and looks good on mobile */
        @media (max-width: 600px) {
            .container {
                padding: 10px;
            }
            h1 {
                font-size: 24px;
            }
            input[type="text"], button {
                font-size: 14px;
            }
        }
    </style>
</head>
<body>
    
    <div class="container">
        
        <h1>URL Shortener</h1>
        
        <input type="text" id="urlInput" placeholder="Enter your URL here">
        
        <button onclick="shortenUrl()">Shorten URL</button>
        
        <div class="output" id="output"></div>
    </div>

// Check if the URL entered is a valid URL using a regex pattern
            var validUrl = /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/i;
            if (!validUrl.test(url)) {
                // Alert if the URL entered is not valid
                alert("Please enter a valid URL.");
                return;
            }

// Simulate URL shortening process
            var shortenedUrl = 'https://short.ly/' + Math.random().toString(36).substring(2, 8);

// Show the shortened URL with a clickable link
            document.getElementById('output').innerHTML = `
                <p>Your shortened URL is:</p>
                <a href="${shortenedUrl}" target="_blank">${shortenedUrl}</a>
            `;
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  
  <meta charset="UTF-8">
  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <title>Movie Booking App</title>
  <style>
    /* Basic styles for the body, including font, margins, and background color */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f4f4f4;
    }

/* Container that centers content on the page */
    .container {
      max-width: 800px;
      margin: 50px auto;
      padding: 20px;
      background-color: white;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      border-radius: 10px;
    }

/* Heading style */
    h1 {
      text-align: center;
      color: #333;
    }

/* Styling for form elements, inputs, and buttons */
    select, input[type="number"], button {
      width: 100%;
      padding: 10px;
      margin: 10px 0;
      font-size: 16px;
      border-radius: 5px;
      border: 1px solid #ccc;
    }

/* Styling for the result container */
    .result {
      margin-top: 20px;
      padding: 15px;
      background-color: #e9f7e9;
      border: 1px solid #d1e7d1;
      border-radius: 5px;
      text-align: center;
    }

/* Responsive design adjustments for smaller screens */
    @media (max-width: 600px) {
      .container {
        padding: 15px;
      }

h1 {
        font-size: 24px;
      }
    }
  </style>
</head>
<body>

<div class="container">
    
    <h1>Movie Booking App</h1>

<form id="movieForm">
      
      <label for="movieSelect">Select a Movie:</label>
      <select id="movieSelect" required>
        <option value="" disabled selected>Select a movie</option>
        <option value="movie1">Movie 1</option>
        <option value="movie2">Movie 2</option>
        <option value="movie3">Movie 3</option>
        <option value="movie4">Movie 4</option>
      </select>

<label for="timeSelect">Select Time:</label>
      <select id="timeSelect" required>
        <option value="" disabled selected>Select a time</option>
        <option value="12pm">12:00 PM</option>
        <option value="3pm">3:00 PM</option>
        <option value="6pm">6:00 PM</option>
        <option value="9pm">9:00 PM</option>
      </select>

<label for="ticketCount">Number of Tickets:</label>
      <input type="number" id="ticketCount" placeholder="Enter number of tickets" min="1" required>

<button type="submit">Book Now</button>
    </form>

<div id="result" class="result" style="display:none;">
      <p id="bookingDetails"></p>
    </div>
  </div>

<script>
    // Get references to the form and result elements
    const form = document.getElementById('movieForm');
    const resultDiv = document.getElementById('result');
    const bookingDetails = document.getElementById('bookingDetails');

// Add event listener to handle form submission
    form.addEventListener('submit', function(event) {
      // Prevent the default form submission (which would refresh the page)
      event.preventDefault();

// Get the selected movie, time, and number of tickets
      const movie = document.getElementById('movieSelect').value;
      const time = document.getElementById('timeSelect').value;
      const ticketCount = document.getElementById('ticketCount').value;

// Check if all fields are filled
      if (!movie || !time || !ticketCount) {
        alert('Please fill all the fields.');
        return;
      }

// Calculate the total price based on the number of tickets (assuming a ticket price of $10)
      const pricePerTicket = 10;
      const totalPrice = pricePerTicket * ticketCount;

// Display the booking details in the result container
      bookingDetails.innerHTML = `
        You have successfully booked ${ticketCount} ticket(s) for "${movie}" at ${time}.<br>
        Total price: $${totalPrice}.
      `;

// Show the result container
      resultDiv.style.display = 'block';

// Clear the form after submission
      form.reset();
    });
  </script>

</body>
</html>

<!DOCTYPE html> 
<html lang="en">

<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>Advanced Calculator with History</title> 
  <style> /* Internal CSS for styling the app */

* {
      box-sizing: border-box; /* Includes padding and border in width/height */
    }

body {
      margin: 0; /* Removes default margin */
      padding: 0; /* Removes default padding */
      font-family: 'Segoe UI', sans-serif; /* Sets modern font */
      display: flex; /* Uses flexbox for layout */
      justify-content: center; /* Centers horizontally */
      align-items: center; /* Centers vertically */
      min-height: 100vh; /* Minimum height is full viewport */
      background: #282c34; /* Dark background color */
    }

.calculator {
      background: #fff; /* White background */
      padding: 20px; /* Space inside calculator */
      border-radius: 15px; /* Rounded corners */
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* Shadow effect */
      width: 100%; /* Full width */
      max-width: 400px; /* Max width for larger screens */
    }

.display {
      background: #000; /* Black screen background */
      color: #0f0; /* Green text */
      font-size: 24px; /* Text size */
      padding: 15px; /* Space inside display */
      border-radius: 10px; /* Rounded corners */
      height: 60px; /* Fixed height */
      overflow-x: auto; /* Scroll if overflow horizontally */
      margin-bottom: 10px; /* Space below display */
    }

.buttons {
      display: grid; /* Grid layout for buttons */
      grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
      gap: 10px; /* Space between buttons */
    }

button {
      padding: 20px; /* Size of each button */
      font-size: 18px; /* Text size */
      border: none; /* No border */
      border-radius: 10px; /* Rounded button corners */
      background: #f0f0f0; /* Light gray background */
      cursor: pointer; /* Pointer cursor on hover */
      transition: background 0.3s; /* Smooth background transition */
    }

button:hover {
      background: #ddd; /* Darker on hover */
    }

.equal {
      background: #4caf50; /* Green background */
      color: white; /* White text */
    }

.clear {
      background: #f44336; /* Red background */
      color: white; /* White text */
    }

.history {
      margin-top: 15px; /* Space above history */
      background: #eaeaea; /* Light gray */
      padding: 10px; /* Padding inside history */
      border-radius: 10px; /* Rounded corners */
      height: 120px; /* Fixed height */
      overflow-y: auto; /* Scroll when too long */
      font-size: 14px; /* Smaller text */
      color: #333; /* Dark text */
    }

@media (max-width: 480px) { /* Small screen adjustments */
      .display {
        font-size: 18px; /* Smaller font */
        height: auto; /* Auto height */
      }

button {
        padding: 15px; /* Smaller buttons */
        font-size: 16px; /* Smaller font */
      }
    }

</style>
</head>

<button onclick="appendToDisplay('1')">1</button>
      <button onclick="appendToDisplay('2')">2</button>
      <button onclick="appendToDisplay('3')">3</button>
      <button onclick="appendToDisplay('+')">+</button>

<button onclick="appendToDisplay('0')">0</button>
      <button onclick="appendToDisplay('.')">.</button> 
      <button onclick="appendToDisplay('Math.PI')">π</button> 
      <button onclick="appendToDisplay('**')">^</button>

<button onclick="appendToDisplay('Math.sqrt(')">√</button> 
      <button onclick="appendToDisplay('%')">%</button> 
      <button onclick="calculate()" class="equal">=</button> 
    </div>

<div class="history" id="history"> 
      <strong>History:</strong><br>
    </div>

</div>

let display = document.getElementById("display"); // Get the display element
    let history = document.getElementById("history"); // Get the history element
    let currentInput = ""; // Holds the current user input

function appendToDisplay(value) {
      // Appends the clicked button value to current input
      if (display.textContent === "0") {
        display.textContent = ""; // Clear initial 0
      }
      display.textContent += value; // Show new character
      currentInput += value; // Save in variable
    }

function clearDisplay() {
      // Clears the display and input
      display.textContent = "0"; // Reset screen
      currentInput = ""; // Reset input
    }

</script>
</body>

</html>

<!DOCTYPE html> 
<html lang="en"> 
<head>
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>Instagram Clone</title>

/* Container for the whole Instagram clone */
    .container {
      width: 100%; /* Takes up the entire width of the screen */
      max-width: 600px; /* Limits max width to 600px for a cleaner layout */
      padding: 10px; /* Adds space around the content */
    }

/* Header of the app, mimicking the Instagram logo and navbar */
    header {
      display: flex; /* Aligns items horizontally */
      justify-content: space-between; /* Spaces items apart */
      padding: 15px; /* Adds space around the header */
      background-color: white; /* White background for the header */
      border-radius: 5px; /* Rounded corners */
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow effect */
    }

/* Styling for the logo */
    .logo {
      font-size: 24px; /* Font size for the logo text */
      font-weight: bold; /* Bold font */
      color: #000; /* Black text */
    }

/* For the icons and navigation in the header */
    .nav-icons {
      display: flex; /* Aligns the icons horizontally */
      gap: 15px; /* Adds space between icons */
    }

/* Styling for each post card */
    .post {
      background-color: white; /* White background for posts */
      border-radius: 10px; /* Rounded corners */
      margin-bottom: 20px; /* Adds space below each post */
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Soft shadow effect */
      overflow: hidden; /* Ensures elements inside don't overflow */
    }

/* Post image styling */
    .post img {
      width: 100%; /* Makes the image take up the full width */
      height: auto; /* Keeps the image's aspect ratio intact */
    }

/* Post header (user info) */
    .post-header {
      display: flex; /* Aligns user info horizontally */
      padding: 10px; /* Adds padding */
      background-color: #f0f0f0; /* Light gray background */
      justify-content: space-between; /* Spaces out user name and time */
      align-items: center; /* Vertically centers the items */
    }

/* User profile picture styling */
    .user-profile {
      width: 40px; /* Sets width */
      height: 40px; /* Sets height */
      border-radius: 50%; /* Makes the image round */
      object-fit: cover; /* Ensures the image fills the circle */
    }

/* Styling for the post content */
    .post-content {
      padding: 10px; /* Adds space inside the post */
    }

/* Like button styling */
    .like-button {
      background-color: transparent; /* Transparent background */
      border: none; /* Removes default border */
      cursor: pointer; /* Cursor changes to pointer on hover */
      font-size: 18px; /* Font size for the like button */
    }

/* Like count display */
    .like-count {
      font-size: 14px; /* Small font size for like count */
      color: #888; /* Light gray color for text */
    }

/* Footer containing navigation links */
    footer {
      display: flex; /* Aligns navigation items horizontally */
      justify-content: space-evenly; /* Even spacing between items */
      padding: 15px; /* Padding around the footer */
      background-color: white; /* White background */
      position: fixed; /* Fixes the footer at the bottom */
      bottom: 0; /* Positions at the bottom of the page */
      width: 100%; /* Takes up full width */
      border-top: 1px solid #ddd; /* Light border at the top */
    }

/* Footer icon style */
    footer div {
      text-align: center; /* Centers the icon text */
    }

/* Icon styling in the footer */
    footer div i {
      font-size: 24px; /* Larger icon size */
      color: #888; /* Light gray icon color */
    }
  </style>
</head>

<body>
  
  <div class="container">
    
    <header>
      <div class="logo">Instagram</div>
      <div class="nav-icons">
        <i class="fa fa-search"></i> 
        <i class="fa fa-heart"></i> 
        <i class="fa fa-paper-plane"></i> 
      </div>
    </header>

<div class="post">
      
      <img src="https://via.placeholder.com/600x400" alt="Post Image">
      
      <div class="post-header">
        <div>
          <img class="user-profile" src="https://via.placeholder.com/40" alt="User Profile">
        </div>
        <div>
          <strong>John Doe</strong> 
          <span>2 hours ago</span> 
        </div>
      </div>

<div class="post-content">
        <button class="like-button">♡ Like</button> 
        <div class="like-count">100 likes</div> 
      </div>
    </div>

<div class="post">
      <img src="https://via.placeholder.com/600x400" alt="Post Image">
      <div class="post-header">
        <div>
          <img class="user-profile" src="https://via.placeholder.com/40" alt="User Profile">
        </div>
        <div>
          <strong>Jane Smith</strong>
          <span>3 hours ago</span>
        </div>
      </div>

<div class="post-content">
        <button class="like-button">♡ Like</button>
        <div class="like-count">120 likes</div>
      </div>
    </div>

<footer>
      <div>
        <i class="fa fa-home"></i> 
        <span>Home</span>
      </div>
      <div>
        <i class="fa fa-search"></i> 
        <span>Search</span>
      </div>
      <div>
        <i class="fa fa-plus-square"></i> 
        <span>Post</span>
      </div>
      <div>
        <i class="fa fa-heart"></i> 
        <span>Likes</span>
      </div>
      <div>
        <i class="fa fa-user"></i> 
        <span>Profile</span>
      </div>
    </footer>
  </div>

<script src="https://kit.fontawesome.com/a076d05399.js"></script> 
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Twitter Clone</title>

header {
      background: #1da1f2;
      color: white;
      padding: 10px 20px;
      text-align: center;
    }

.container {
      padding: 20px;
      max-width: 600px;
      margin: auto;
    }

.tweet-box {
      margin-bottom: 20px;
      padding: 15px;
      background: white;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

textarea {
      width: 100%;
      height: 100px;
      padding: 10px;
      border-radius: 5px;
      border: 1px solid #ccc;
      box-sizing: border-box;
    }

button {
      background-color: #1da1f2;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

button:hover {
      background-color: #1991c7;
    }

.tweet {
      background: white;
      margin-bottom: 15px;
      padding: 10px;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    }

.tweet h3 {
      margin: 0;
      font-size: 1.1em;
    }

.tweet p {
      margin: 10px 0 0 0;
      font-size: 0.9em;
    }

@media (max-width: 600px) {
      .container {
        padding: 10px;
      }
    }
  </style>
</head>

<body>

<header>
    <h1>Twitter Clone</h1>
  </header>

<div class="container">
    <div class="tweet-box">
      <textarea id="tweet-input" placeholder="What's happening?"></textarea>
      <button id="tweet-btn">Tweet</button>
    </div>

let tweets = [];

function displayTweets() {
      tweetsContainer.innerHTML = "";

tweets.forEach((tweet, index) => {
        const tweetDiv = document.createElement("div");
        tweetDiv.classList.add("tweet");

const tweetTitle = document.createElement("h3");
        tweetTitle.innerText = `Tweet #${index + 1}`;

const tweetContent = document.createElement("p");
        tweetContent.innerText = tweet;

tweetDiv.appendChild(tweetTitle);
        tweetDiv.appendChild(tweetContent);

tweetsContainer.appendChild(tweetDiv);
      });
    }

tweetBtn.addEventListener("click", () => {
      const tweetContent = tweetInput.value.trim();

if (tweetContent !== "") {
        tweets.push(tweetContent);
        tweetInput.value = "";
        displayTweets();
      } else {
        alert("Please enter a tweet!");
      }
    });

displayTweets();
  </script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>YouTube Clone</title>

<style>
    * {
      margin: 0; /* Removes margin from all elements */
      padding: 0; /* Removes padding from all elements */
      box-sizing: border-box; /* Ensures padding and borders are included in width/height */
    }

body {
      font-family: Arial, sans-serif; /* Sets font for the body */
      background: #f4f4f4; /* Light gray background color */
    }

.container {
      width: 100%; /* Full width */
      max-width: 1200px; /* Limits the width on larger screens */
      margin: 0 auto; /* Centers the container horizontally */
      padding: 20px; /* Adds padding around the content */
    }

.header {
      background-color: #ff0000; /* YouTube red color */
      color: white; /* White text color */
      padding: 20px 0; /* Adds vertical padding to the header */
      text-align: center; /* Centers the text inside the header */
    }

.video-grid {
      display: grid; /* Enables grid layout */
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Creates responsive columns */
      gap: 20px; /* Space between grid items */
      margin-top: 20px; /* Adds margin on top of the grid */
    }

.video-card {
      background-color: white; /* White background for each video card */
      border-radius: 8px; /* Rounded corners for video cards */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
      overflow: hidden; /* Ensures content does not overflow the card */
      cursor: pointer; /* Indicates that the video cards are clickable */
    }

.video-card img {
      width: 100%; /* Makes the thumbnail fill the width of the card */
      height: auto; /* Adjusts the height to maintain aspect ratio */
    }

.video-title {
      padding: 10px; /* Padding inside the card */
      font-size: 16px; /* Sets font size for the title */
      font-weight: bold; /* Makes the title bold */
      text-align: center; /* Centers the title text */
    }

/* Modal styling */
    .modal {
      display: none; /* Hides the modal by default */
      position: fixed; /* Fixes the modal on the screen */
      top: 0; /* Aligns the modal to the top */
      left: 0; /* Aligns the modal to the left */
      width: 100%; /* Full width of the viewport */
      height: 100%; /* Full height of the viewport */
      background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black background */
      justify-content: center; /* Centers the modal content */
      align-items: center; /* Vertically centers the modal content */
    }

.modal-content {
      background-color: white; /* White background for modal content */
      width: 80%; /* Modal width */
      max-width: 900px; /* Maximum width for the modal */
      padding: 20px; /* Adds padding inside the modal */
      border-radius: 8px; /* Rounded corners for the modal */
    }

.modal-content iframe {
      width: 100%; /* Makes the video fill the width of the modal */
      height: 500px; /* Sets a fixed height for the video */
    }

.close-btn {
      position: absolute; /* Positions the close button relative to the modal */
      top: 10px; /* Places the button near the top */
      right: 10px; /* Places the button near the right edge */
      font-size: 30px; /* Sets a large font size */
      color: #333; /* Dark color for the button */
      cursor: pointer; /* Changes cursor to pointer */
    }

/* Responsive adjustments */
    @media (max-width: 600px) {
      .modal-content iframe {
        height: 300px; /* Makes the video smaller on mobile */
      }
    }
  </style>
</head>
<body>

<div class="header">
    <h1>YouTube Clone</h1> 
  </div>

<div class="container">
    <div class="video-grid">
      
    </div>
  </div>

<div class="modal" id="modal">
    <div class="modal-content">
      
      <span class="close-btn" id="closeBtn">×</span>
      
      <iframe id="videoFrame" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
  </div>

<script>
    // Video data: array of video objects containing title and video URL
    const videos = [
      { title: 'JavaScript Tutorial', url: 'https://www.youtube.com/embed/hdI2bqOjy3c' },
      { title: 'Learn HTML & CSS', url: 'https://www.youtube.com/embed/pQN-pnXH1N0' },
      { title: 'React JS Crash Course', url: 'https://www.youtube.com/embed/dGcsHMXbSOA' },
      { title: 'Vue.js Tutorial', url: 'https://www.youtube.com/embed/ZqV5U0v9zDE' },
      { title: 'Node.js Explained', url: 'https://www.youtube.com/embed/fBNz5xF7XW4' },
      { title: 'CSS Grid Layout', url: 'https://www.youtube.com/embed/jV8PwyJr3Hk' },
    ];

const videoGrid = document.querySelector('.video-grid'); // Selects the video grid element
    const modal = document.getElementById('modal'); // Selects the modal element
    const closeBtn = document.getElementById('closeBtn'); // Selects the close button
    const videoFrame = document.getElementById('videoFrame'); // Selects the iframe for video

// Function to create video cards and add them to the grid
    function renderVideos() {
      videos.forEach(video => {
        const videoCard = document.createElement('div'); // Creates a video card
        videoCard.classList.add('video-card'); // Adds class to style the card

const thumbnail = document.createElement('img'); // Creates an image element for the thumbnail
        thumbnail.src = `https://img.youtube.com/vi/${getYouTubeID(video.url)}/0.jpg`; // Uses YouTube thumbnail
        thumbnail.alt = video.title; // Sets alt text for accessibility

const title = document.createElement('div'); // Creates a div for the title
        title.classList.add('video-title'); // Adds class for styling
        title.textContent = video.title; // Sets the title of the video

// Appends image and title to the video card
        videoCard.appendChild(thumbnail);
        videoCard.appendChild(title);

// Adds event listener to the card to open the modal
        videoCard.addEventListener('click', () => openModal(video.url));

// Appends the video card to the grid
        videoGrid.appendChild(videoCard);
      });
    }

// Function to extract YouTube ID from the URL
    function getYouTubeID(url) {
      const regExp = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
      const match = url.match(regExp); // Matches the YouTube ID pattern
      return match ? match[1] : null; // Returns the matched YouTube ID
    }

// Function to open the modal and load the selected video
    function openModal(url) {
      modal.style.display = 'flex'; // Shows the modal
      videoFrame.src = url; // Sets the iframe src to the video URL
    }

// Event listener to close the modal when the close button is clicked
    closeBtn.addEventListener('click', () => {
      modal.style.display = 'none'; // Hides the modal
      videoFrame.src = ''; // Stops the video when modal is closed
    });

// Event listener to close the modal when clicking outside the content area
    window.addEventListener('click', (event) => {
      if (event.target === modal) {
        modal.style.display = 'none'; // Hides the modal if clicked outside
        videoFrame.src = ''; // Stops the video
      }
    });

// Calls the renderVideos function to populate the grid
    renderVideos();
  </script>

</body>
</html>

/* Main container for the feed */
    .feed-container {
      max-width: 600px;
      margin: 30px auto;
      padding: 20px;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

/* Styling each post */
    .post {
      border-bottom: 1px solid #ccc;
      padding: 15px 0;
    }

/* Post author */
    .post-header {
      font-weight: bold;
      font-size: 16px;
    }

/* Post date */
    .post-date {
      font-size: 12px;
      color: gray;
      margin-bottom: 10px;
    }

/* Post content */
    .post-content {
      font-size: 14px;
      margin-bottom: 10px;
    }

/* Footer buttons */
    .post-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

.like-btn {
      cursor: pointer;
      color: #007bff;
    }

.like-btn.liked {
      color: red;
    }

.comment-section {
      margin-top: 10px;
    }

.comment-input {
      width: 100%;
      padding: 8px;
      margin-top: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

.comment-btn {
      background-color: #007bff;
      color: white;
      border: none;
      padding: 8px 12px;
      border-radius: 4px;
      margin-top: 5px;
      cursor: pointer;
    }

.comment-btn:hover {
      background-color: #0056b3;
    }

/* Displayed comments */
    .comments {
      margin-top: 10px;
    }

.comment {
      background-color: #f9f9f9;
      border: 1px solid #ddd;
      padding: 5px 10px;
      border-radius: 4px;
      margin-top: 5px;
      font-size: 14px;
    }
  </style>
</head>
<body>

<div class="feed-container">

<div class="post" id="post1">
      <div class="post-header">Alice Johnson</div> 
      <div class="post-date">2 hours ago</div> 
      <div class="post-content">Enjoying the sunshine today!</div>

<div class="post-footer">
        <span class="like-btn" onclick="toggleLike(this)">Like</span>
      </div>

<div class="comment-section">
        <input type="text" class="comment-input" placeholder="Write a comment...">
        <button class="comment-btn" onclick="postComment(this)">Post Comment</button>
        <div class="comments"></div> 
      </div>
    </div>

<div class="post" id="post2">
      <div class="post-header">Bob Lee</div>
      <div class="post-date">4 hours ago</div>
      <div class="post-content">Just finished a great book </div>

<div class="comment-section">
        <input type="text" class="comment-input" placeholder="Write a comment...">
        <button class="comment-btn" onclick="postComment(this)">Post Comment</button>
        <div class="comments"></div>
      </div>
    </div>

</div>

// Change the button text accordingly
      btn.textContent = btn.classList.contains('liked') ? 'Liked' : 'Like';
    }

// Function to post a comment
    function postComment(button) {
      // Find the nearest parent .comment-section
      const commentSection = button.closest('.comment-section');

// Get the input field and its value
      const input = commentSection.querySelector('.comment-input');
      const text = input.value.trim();

// If the input is not empty
      if (text !== '') {
        // Create a new comment div
        const newComment = document.createElement('div');
        newComment.classList.add('comment'); // Add comment styling class
        newComment.textContent = text; // Set the comment text

// Append the new comment to the comment list
        commentSection.querySelector('.comments').appendChild(newComment);

// Clear the input field
        input.value = '';
      }
    }
  </script>

</body>
</html>

.item {
      background: white;
      padding: 15px;
      margin-bottom: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

.item-content {
      cursor: pointer;
      color: #007bff;
      text-decoration: underline;
    }

.views {
      margin-top: 10px;
      font-size: 14px;
      color: gray;
    }

/* Modal styles */
    .modal {
      display: none; /* Hidden by default */
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.7); /* Transparent black background */
      justify-content: center;
      align-items: center;
      z-index: 999;
    }

.modal-content {
      background: white;
      padding: 20px;
      border-radius: 10px;
      max-width: 90%;
      text-align: center;
    }

.modal img {
      max-width: 100%;
      max-height: 400px;
    }

.close-btn {
      margin-top: 10px;
      background: red;
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 6px;
      cursor: pointer;
    }
  </style>
</head>
<body>

<div class="item" data-type="text" data-id="1">
    <div class="item-content">Click to read the special announcement</div>
    <div class="views">Views: <span class="view-count">0</span></div>
  </div>

<div class="item" data-type="image" data-id="2" data-src="https://via.placeholder.com/300">
    <div class="item-content">Click to view the image</div>
    <div class="views">Views: <span class="view-count">0</span></div>
  </div>

<div class="item" data-type="link" data-id="3" data-src="https://example.com">
    <div class="item-content">Click to open the website</div>
    <div class="views">Views: <span class="view-count">0</span></div>
  </div>

<div class="modal" id="modal">
    <div class="modal-content" id="modal-content">
      
    </div>
  </div>

// Add event listener to each item
    items.forEach(item => {
      item.addEventListener('click', () => {
        // Get content type and ID
        const type = item.getAttribute('data-type');
        const id = item.getAttribute('data-id');
        const viewCountEl = item.querySelector('.view-count');

// Increment the count
        let currentCount = parseInt(viewCountEl.textContent);
        currentCount++;
        viewCountEl.textContent = currentCount;

// Show the modal with appropriate content
        showModal(item, type);
      });
    });

// Function to show content in modal
    function showModal(item, type) {
      const modal = document.getElementById('modal');
      const modalContent = document.getElementById('modal-content');

// Clear previous content
      modalContent.innerHTML = '';

// Display content based on type
      if (type === 'text') {
        const p = document.createElement('p');
        p.textContent = 'This is the special announcement content shown on click.';
        modalContent.appendChild(p);
      } else if (type === 'image') {
        const img = document.createElement('img');
        img.src = item.getAttribute('data-src');
        modalContent.appendChild(img);
      } else if (type === 'link') {
        const link = document.createElement('a');
        link.href = item.getAttribute('data-src');
        link.textContent = 'Go to website';
        link.target = '_blank';
        modalContent.appendChild(link);
      }

// Add a close button
      const closeBtn = document.createElement('button');
      closeBtn.className = 'close-btn';
      closeBtn.textContent = 'Close';
      closeBtn.onclick = () => modal.style.display = 'none';
      modalContent.appendChild(closeBtn);

// Show the modal
      modal.style.display = 'flex';
    }
  </script>

</body>
</html>

Persistent View Count Across Reloads

Option 1: localStorage (Client-Side Only)

Views are saved in the user’s browser.

Simple, no server needed
Not shared between users

Solution A: Using localStorage
Quick and works per device/browser.

Add this inside your <script> tag:


      // Load and initialize view counts from localStorage

      document.querySelectorAll('.item').forEach(item => {

  const id = item.getAttribute('data-id'); // Get unique ID

  const storedCount = localStorage.getItem('view-' + id);

  if (storedCount) {

    item.querySelector('.view-count').textContent = storedCount;

  }

});

Modify the click event:

Before:


      let currentCount = parseInt(viewCountEl.textContent);

      currentCount++;

      viewCountEl.textContent = currentCount;

After:


      let currentCount = parseInt(viewCountEl.textContent);

      currentCount++;

      viewCountEl.textContent = currentCount;

      localStorage.setItem('view-' + id, currentCount);

Option 2: Server-Side View Tracking (Recommended)

For hosted sites with multiple users.

Shared across devices
Real counts
Requires backend/database

Solution B: Using Firebase
Real-time shared view counter across users.

Load Firebase SDK in HTML:


      <script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js"></script>

      <script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-database.js"></script>

Initialize Firebase:


      const firebaseConfig = {

  apiKey: "YOUR_KEY",

  authDomain: "YOUR_DOMAIN",

  databaseURL: "https://YOUR_DB.firebaseio.com",

  projectId: "YOUR_PROJECT_ID"

      };


      firebase.initializeApp(firebaseConfig);

      const db = firebase.database();

Fetch & Update View Count:


      const id = item.getAttribute('data-id');

      const viewRef = db.ref('views/' + id);


      viewRef.once('value').then(snapshot => {

  let views = snapshot.val() || 0;

  views++;

  viewRef.set(views); // Save new count

  viewCountEl.textContent = views; // Show in UI

      });

Summary

Method	Works Offline?	Shared Across Users?	Requires Server?
localStorage	✅ Yes	❌ No	❌ No
Firebase	❌ No	✅ Yes	✅ Yes
Node.js + DB	❌ No	✅ Yes	✅ Yes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>View Counter Example</title>
    
    <script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-database.js"></script>
    <script>
        // Your Firebase Config
        const firebaseConfig = {
            apiKey: "YOUR_API_KEY",
            authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
            databaseURL: "https://YOUR_PROJECT_ID.firebaseio.com",
            projectId: "YOUR_PROJECT_ID",
        };

//  Initialize Firebase
        firebase.initializeApp(firebaseConfig);
        const db = firebase.database();
    </script>
</head>
<body>

<h1>Viewer Count Demo</h1>

<div class="item" data-id="img1">
        <img src="image.jpg" alt="Image 1">
        <span class="views">👁️ <span class="count">0</span> views</span>
    </div>

<div class="item" data-id="link1">
        <a href="https://example.com">Visit Page</a>
        <span class="views">👁️ <span class="count">0</span> views</span>
    </div>

const ref = db.ref('views/' + id); // Firebase path for this item

//  Fetch and show current count on load
            ref.once('value').then(snapshot => {
                const count = snapshot.val() || 0;
                countEl.textContent = count;
            });

//  On click, increase the count and update database
            item.addEventListener('click', () => {
                ref.once('value').then(snapshot => {
                    let count = snapshot.val() || 0;
                    count++;
                    ref.set(count); // Save new count
                    countEl.textContent = count; // Update UI
                });
            });
        });
    </script>

<footer>
        <p>Note: Use Firebase for a real demo setup. Ensure to adjust read/write rules in Firebase console.</p>
    </footer>

</body>
</html>

Have the viewr on a website updated , show the real numbers of clicks

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>View Counter Example</title>
    
    <script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-database.js"></script>
    <script>
        //  Your Firebase Config
        const firebaseConfig = {
            apiKey: "YOUR_API_KEY",
            authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
            databaseURL: "https://YOUR_PROJECT_ID.firebaseio.com",
            projectId: "YOUR_PROJECT_ID",
        };

//  Initialize Firebase
        firebase.initializeApp(firebaseConfig);
        const db = firebase.database();
    </script>
</head>
<body>

<h1>Viewer Count Demo</h1>

<p> Total number of views</p>
    <p> Updates live when clicked</p>
    <p> Stores data online (so the number persists and is shared across devices)</p>
    <p> Simple and Free Online Setup Using Firebase Realtime Database</p>
    <p>Firebase is a cloud-based backend by Google. It lets you store data like view counts without writing a custom backend server.</p>

<h2>Step-by-Step Guide (Fully Explained)</h2>
    
    <h3>1.  Create a Firebase Project</h3>
    <ul>
        <li>Go to <a href="https://console.firebase.google.com" target="_blank">Firebase Console</a></li>
        <li>Click Add project, name it (e.g., "ViewTracker")</li>
        <li>Skip Google Analytics</li>
        <li>Click Create</li>
    </ul>

<h3>2.  Add Firebase to Your Website</h3>
    <p>Go to your project → click </> Web → Register app → Get your config snippet.</p>
    <p>Paste this inside your <head> or before </body>:</p>

//  Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  const db = firebase.database();
</script>
    </pre>

<h3>3.  HTML Page with Items to Track Views</h3>
    <pre>
<div class="item" data-id="img1">
  <img src="image.jpg" alt="Image 1">
  <span class="views">👁️ <span class="count">0</span> views</span>
</div>

<div class="item" data-id="link1">
  <a href="https://examplee.com">Visit Page</a>
  <span class="views">👁️ <span class="count">0</span> views</span>
</div>
    </pre>

<h3>4.  JavaScript to Handle Viewing and Count Update</h3>
    <pre>
<script>
  document.querySelectorAll('.item').forEach(item => {
    const id = item.getAttribute('data-id'); // Unique key for Firebase
    const countEl = item.querySelector('.count');

const ref = db.ref('views/' + id); // Firebase path for this item

//  Fetch and show current count on load
    ref.once('value').then(snapshot => {
      const count = snapshot.val() || 0;
      countEl.textContent = count;
    });

//  On click, increase the count and update database
    item.addEventListener('click', () => {
      ref.once('value').then(snapshot => {
        let count = snapshot.val() || 0;
        count++;
        ref.set(count); // Save new count
        countEl.textContent = count; // Update UI
      });
    });
  });
</script>
    </pre>

<h3>5. Allow Public Read/Write Access (for test/demo only)</h3>
    <pre>
{
  "rules": {
    ".read": true,
    ".write": true
  }
}
    </pre>

</body>
</html>

Only do this for demos. For production, set proper authentication and rules.

Result

Each item shows its view count.

When clicked, it updates both:

Visually in the UI.
Persistently in Firebase (shared with all users).

View count continues to increase, even across devices or reloads.

Note: Use Firebase for a real demo setup. Ensure to adjust read/write rules in Firebase console.

View Counter Example

Viewer Count Demo

Total number of views

Updates live when clicked

Stores data online (so the number persists and is shared across devices)

Simple and Free Online Setup Using Firebase Realtime Database

Firebase is a cloud-based backend by Google. It lets you store data like view counts without writing a custom backend server.

Step-by-Step Guide (Fully Explained)

1. Create a Firebase Project

Go to Firebase Console
Click Add project, name it (e.g., "ViewTracker")
Skip Google Analytics
Click Create

2. Add Firebase to Your Website

Go to your project → click Web → Register app → Get your config snippet.

Paste this inside your or before :

3. HTML Page with Items to Track Views


  
  👁️ 0 views



  Visit Page
  👁️ 0 views

4. JavaScript to Handle Viewing and Count Update

5. Allow Public Read/Write Access (for test/demo only)

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Product Review App</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f1f1f1;
      margin: 0;
      padding: 0;
    }

.container {
      max-width: 600px;
      margin: 40px auto;
      padding: 20px;
      background-color: white;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

h1 {
      text-align: center;
      color: #333;
    }

input, select, textarea, button {
      width: 100%;
      padding: 10px;
      margin: 10px 0;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 16px;
    }

.review {
      background-color: #e9f5ff;
      padding: 15px;
      margin-top: 15px;
      border-left: 4px solid #2196F3;
      border-radius: 5px;
    }

.review strong {
      display: block;
      margin-bottom: 5px;
    }

@media (max-width: 600px) {
      .container {
        padding: 15px;
      }

h1 {
        font-size: 22px;
      }
    }
  </style>
</head>
<body>

<div class="container">
    <h1>Product Review App</h1>

<select id="rating" required>
        <option value="" disabled selected>Select Rating</option>
        <option value="⭐">⭐</option>
        <option value="⭐⭐">⭐⭐</option>
        <option value="⭐⭐⭐">⭐⭐⭐</option>
        <option value="⭐⭐⭐⭐">⭐⭐⭐⭐</option>
        <option value="⭐⭐⭐⭐⭐">⭐⭐⭐⭐⭐</option>
      </select>

<button type="submit">Submit Review</button>
    </form>

form.addEventListener('submit', function(event) {
      event.preventDefault();

const name = document.getElementById('name').value.trim();
      const rating = document.getElementById('rating').value;
      const comment = document.getElementById('comment').value.trim();

if (!name || !rating || !comment) {
        alert('Please fill out all fields.');
        return;
      }

const review = document.createElement('div');
      review.className = 'review';

review.innerHTML = `
        <strong>${name} - ${rating}</strong>
        <p>${comment}</p>
      `;

reviewsContainer.prepend(review);
      form.reset();
    });
  </script>

</body>
</html>

<!DOCTYPE html> 
<html lang="en">

<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>Flashlight App</title>

* {
      box-sizing: border-box; /* Includes padding and border in element width/height */
    }

body {
      margin: 0; /* Removes default margin */
      padding: 0; /* Removes default padding */
      font-family: Arial, sans-serif; /* Sets font */
      background-color: #111; /* Default dark background */
      color: white; /* White text color */
      display: flex; /* Flexbox layout */
      flex-direction: column; /* Stacks items vertically */
      justify-content: center; /* Center vertically */
      align-items: center; /* Center horizontally */
      height: 100vh; /* Full viewport height */
      transition: background-color 0.5s ease; /* Smooth background transition */
    }

h1 {
      margin-bottom: 20px; /* Space below heading */
    }

button {
      padding: 20px 40px; /* Button size */
      font-size: 20px; /* Button text size */
      border: none; /* Removes default border */
      border-radius: 10px; /* Rounded corners */
      cursor: pointer; /* Pointer on hover */
      background-color: #4caf50; /* Green background */
      color: white; /* White text */
      transition: background 0.3s ease; /* Smooth color transition */
    }

button:hover {
      background-color: #45a049; /* Darker green on hover */
    }

@media (max-width: 480px) { /* Responsive adjustments */
      h1 {
        font-size: 24px; /* Smaller heading */
      }

button {
        font-size: 18px; /* Smaller text */
        padding: 15px 30px; /* Smaller padding */
      }
    }

</style>
</head>

<h1>Flashlight App</h1> 
  <button onclick="toggleFlashlight()">Toggle Flashlight</button>

let flashlightOn = false; // Track whether flashlight is on
    let stream; // Variable to hold camera stream

async function toggleFlashlight() {
      // Toggles flashlight on or off

if (!flashlightOn) {
        // Flashlight is off, turn it on

document.body.style.backgroundColor = "#ffffff"; // Change background to white
        document.body.style.color = "#000000"; // Change text color to black
        flashlightOn = true; // Update state

try {
          // Try accessing camera torch via mediaDevices (on supported devices)
          stream = await navigator.mediaDevices.getUserMedia({
            video: {
              facingMode: "environment", // Use rear camera
              torch: true // Request torch
            }
          });

const track = stream.getVideoTracks()[0]; // Get video track
          const imageCapture = new ImageCapture(track); // Create image capture for control
          const capabilities = await imageCapture.getPhotoCapabilities(); // Get camera capabilities

if (capabilities.torch) {
            // If torch is supported, turn it on
            await track.applyConstraints({
              advanced: [{ torch: true }]
            });
          }

} catch (err) {
          // If torch not available or any error, fallback to screen
          console.warn("Torch not available on this device:", err); // Log warning
        }

} else {
        // Flashlight is on, turn it off

document.body.style.backgroundColor = "#111"; // Restore dark background
        document.body.style.color = "#ffffff"; // Restore white text
        flashlightOn = false; // Update state

if (stream) {
          // If stream exists, stop all tracks
          const tracks = stream.getTracks();
          tracks.forEach(track => track.stop()); // Stop each track
          stream = null; // Clear stream
        }
      }
    }

</script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Polling App</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      margin: 0;
      padding: 0;
    }

.container {
      max-width: 500px;
      margin: 40px auto;
      background: #fff;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

h2 {
      text-align: center;
      margin-bottom: 20px;
      color: #333;
    }

.option {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #e7f3ff;
      margin: 10px 0;
      padding: 10px 15px;
      border-left: 5px solid #2196F3;
      border-radius: 6px;
    }

button {
      padding: 10px 15px;
      background-color: #2196F3;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

button:hover {
      background-color: #1976D2;
    }

.result {
      font-size: 14px;
      color: #333;
    }

@media (max-width: 600px) {
      .container {
        padding: 15px;
      }
    }
  </style>
</head>
<body>

<div class="container">
    <h2>Which do you prefer?</h2>

// Load votes from sessionStorage if available
    if (sessionStorage.getItem('votes')) {
      votes = JSON.parse(sessionStorage.getItem('votes'));
      updateResults();
    }

// Function to handle voting
    function vote(option) {
      // Prevent multiple votes in session
      if (sessionStorage.getItem('voted')) {
        alert('You already voted!');
        return;
      }

// Increase vote for selected option
      votes[option]++;

// Save votes and vote flag in sessionStorage
      sessionStorage.setItem('votes', JSON.stringify(votes));
      sessionStorage.setItem('voted', 'true');

// Update results on screen
      updateResults();
    }

// Function to update results
    function updateResults() {
      const total = votes.cats + votes.dogs;
      const catPercent = total ? Math.round((votes.cats / total) * 100) : 0;
      const dogPercent = total ? Math.round((votes.dogs / total) * 100) : 0;

const results = `
        Cats: ${votes.cats} votes (${catPercent}%) <br>
        Dogs: ${votes.dogs} votes (${dogPercent}%)
      `;

document.getElementById('results').innerHTML = results;
    }
  </script>

</body>
</html>

<!DOCTYPE html> 
<html lang="en">

<head>
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>Habit Tracker</title>

body {
      font-family: Arial, sans-serif; /* Sets font */
      background-color: #f0f0f0; /* Light grey background */
      padding: 20px; /* Adds spacing around content */
      display: flex; /* Flex layout */
      flex-direction: column; /* Stack children vertically */
      align-items: center; /* Center horizontally */
    }

h1 {
      margin-bottom: 20px; /* Adds spacing under title */
      color: #333; /* Dark text color */
    }

#habitForm {
      display: flex; /* Horizontal form layout */
      gap: 10px; /* Space between input and button */
      margin-bottom: 20px; /* Space under form */
      flex-wrap: wrap; /* Wrap on small screens */
    }

#habitInput {
      padding: 10px; /* Input padding */
      font-size: 16px; /* Input text size */
      flex: 1; /* Allow to grow */
    }

button {
      padding: 10px 20px; /* Button size */
      font-size: 16px; /* Button text */
      background-color: #4CAF50; /* Green background */
      color: white; /* White text */
      border: none; /* No border */
      cursor: pointer; /* Pointer on hover */
      border-radius: 5px; /* Rounded corners */
    }

button:hover {
      background-color: #45a049; /* Darker green on hover */
    }

ul {
      list-style: none; /* Remove bullets */
      width: 100%; /* Full width */
      max-width: 600px; /* Max width for larger screens */
    }

li {
      background: white; /* White background */
      padding: 15px; /* Space inside each habit item */
      margin-bottom: 10px; /* Space between items */
      display: flex; /* Layout as row */
      justify-content: space-between; /* Spread content */
      align-items: center; /* Vertically centered */
      border-radius: 5px; /* Rounded edges */
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Slight shadow */
    }

.done {
      text-decoration: line-through; /* Strikethrough text */
      color: gray; /* Grey text when done */
    }

@media (max-width: 600px) {
      #habitForm {
        flex-direction: column; /* Stack inputs on small screen */
        align-items: stretch;
      }

button {
        width: 100%; /* Full-width button */
      }
    }
  </style>
</head>

<body>

<h1>Habit Tracker</h1>

<form id="habitForm">
    <input type="text" id="habitInput" placeholder="Enter a habit (e.g. Drink water)" required>
    <button type="submit">Add Habit</button>
  </form>

<ul id="habitList"></ul>

let habits = []; // Array to store habit objects

// Load saved habits from localStorage if they exist
    if (localStorage.getItem('habits')) {
      habits = JSON.parse(localStorage.getItem('habits')); // Parse and assign to habits array
      renderHabits(); // Render them on the page
    }

// Event listener for submitting the form
    habitForm.addEventListener('submit', function (e) {
      e.preventDefault(); // Prevent page reload

const habitText = habitInput.value.trim(); // Get and trim input
      if (habitText === '') return; // Skip if empty

const habit = {
        id: Date.now(), // Unique ID using timestamp
        text: habitText, // Habit description
        done: false // Initially not done
      };

habits.push(habit); // Add to array
      saveHabits(); // Save to localStorage
      renderHabits(); // Re-render list
      habitInput.value = ''; // Clear input
    });

// Function to render all habits in the list
    function renderHabits() {
      habitList.innerHTML = ''; // Clear existing list

habits.forEach(habit => {
        const li = document.createElement('li'); // Create list item

const span = document.createElement('span'); // Text span
        span.textContent = habit.text; // Set habit text

if (habit.done) span.classList.add('done'); // Add class if done

span.addEventListener('click', () => {
          habit.done = !habit.done; // Toggle done
          saveHabits(); // Save updated state
          renderHabits(); // Re-render
        });

const delBtn = document.createElement('button'); // Create delete button
        delBtn.textContent = 'Delete'; // Button label
        delBtn.style.background = '#e74c3c'; // Red background
        delBtn.style.marginLeft = '10px'; // Space between text and button

delBtn.addEventListener('click', () => {
          habits = habits.filter(h => h.id !== habit.id); // Remove this habit
          saveHabits(); // Save changes
          renderHabits(); // Re-render
        });

li.appendChild(span); // Add text to item
        li.appendChild(delBtn); // Add delete button
        habitList.appendChild(li); // Add item to list
      });
    }

// Save habits to localStorage
    function saveHabits() {
      localStorage.setItem('habits', JSON.stringify(habits)); // Save array as string
    }
  </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Editor with 50 Formatting Options</title>

body {
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
      padding: 20px;
    }

.editor-container {
      max-width: 1000px;
      margin: 0 auto;
      background: #ffffff;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }

.toolbar {
      background-color: #ffffff;
      padding: 15px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      border-bottom: 1px solid #ddd;
    }

.toolbar button,
    .toolbar select {
      background-color: #90ee90;
      color: black;
      border: 1px solid #ddd;
      padding: 8px 12px;
      cursor: pointer;
      font-size: 14px;
      border-radius: 5px;
      transition: background-color 0.3s;
    }

.toolbar button:hover,
    .toolbar select:hover {
      background-color: #76c76e;
    }

.toolbar button.active,
    .toolbar select.active {
      background-color: #66b75d;
    }

.editor {
      width: 100%;
      min-height: 300px;
      border: 1px solid #ddd;
      padding: 10px;
      font-size: 16px;
      font-family: inherit;
      outline: none;
      white-space: pre-wrap;
    }

/* Mobile responsiveness */
    @media (max-width: 600px) {
      .toolbar {
        flex-direction: column;
        align-items: flex-start;
      }

.toolbar button,
      .toolbar select {
        width: 100%;
      }
    }
  </style>
</head>

<body>
  <div class="editor-container">
    <div class="toolbar">
      
      <button id="bold" onclick="toggleFormat('bold')"><strong>B</strong></button>
      <button id="italic" onclick="toggleFormat('italic')"><em>I</em></button>
      <button id="underline" onclick="toggleFormat('underline')"><u>U</u></button>
      <button id="strike" onclick="toggleFormat('strikeThrough')">S</button>
      <button id="subscript" onclick="toggleFormat('subscript')">Sub</button>
      <button id="superscript" onclick="toggleFormat('superscript')">Sup</button>
      <button id="alignLeft" onclick="toggleFormat('justifyLeft')">Left</button>
      <button id="alignCenter" onclick="toggleFormat('justifyCenter')">Center</button>
      <button id="alignRight" onclick="toggleFormat('justifyRight')">Right</button>
      <button id="alignJustify" onclick="toggleFormat('justifyFull')">Justify</button>
      <button id="indent" onclick="toggleFormat('indent')">Indent</button>
      <button id="outdent" onclick="toggleFormat('outdent')">Outdent</button>
      <button id="insertOrderedList" onclick="toggleFormat('insertOrderedList')">Ordered List</button>
      <button id="insertUnorderedList" onclick="toggleFormat('insertUnorderedList')">Unordered List</button>
      <button id="blockQuote" onclick="toggleFormat('formatBlock', 'blockquote')">Blockquote</button>

<select id="fontFamily" onchange="changeFontFamily()">
        <option value="Arial">Arial</option>
        <option value="Courier New">Courier New</option>
        <option value="Georgia">Georgia</option>
        <option value="Times New Roman">Times New Roman</option>
        <option value="Verdana">Verdana</option>
      </select>

<select id="fontSize" onchange="changeFontSize()">
        <option value="1">Small</option>
        <option value="3">Normal</option>
        <option value="5">Large</option>
        <option value="7">Huge</option>
      </select>

<button id="textColor" onclick="changeColor('foreColor')">Text Color</button>

<button id="bgColor" onclick="changeColor('backColor')">BG Color</button>

<button id="link" onclick="insertLink()">Insert Link</button>

<button id="image" onclick="insertImage()">Insert Image</button>

<button id="fontWeight" onclick="toggleFormat('fontWeight')">Font Weight</button>
      <button id="fontStyle" onclick="toggleFormat('fontStyle')">Font Style</button>
      <button id="lineHeight" onclick="toggleFormat('lineHeight')">Line Height</button>
      <button id="letterSpacing" onclick="toggleFormat('letterSpacing')">Letter Spacing</button>
      <button id="textDecoration" onclick="toggleFormat('textDecoration')">Text Decoration</button>
      <button id="colorAdjust" onclick="toggleFormat('colorAdjust')">Color Adjust</button>

</div>

<div contenteditable="true" class="editor" id="editor" spellcheck="false"></div>
  </div>

// Function to change font family
    function changeFontFamily() {
      const font = document.getElementById('fontFamily').value;
      document.execCommand('fontName', false, font);
    }

// Function to change font size
    function changeFontSize() {
      const size = document.getElementById('fontSize').value;
      document.execCommand('fontSize', false, size);
    }

// Function to change text or background color
    function changeColor(command) {
      let color = prompt("Enter color (e.g., red, #ff0000)");
      document.execCommand(command, false, color);
    }

// Function to insert a link
    function insertLink() {
      let url = prompt("Enter URL for the link");
      document.execCommand('createLink', false, url);
    }

// Function to insert an image
    function insertImage() {
      let url = prompt("Enter image URL");
      document.execCommand('insertImage', false, url);
    }

// Adding event listeners for image and link insertion
    document.querySelector('#link').addEventListener('click', function() {
      let url = prompt("Enter URL for the link");
      document.execCommand('createLink', false, url);
    });

document.querySelector('#image').addEventListener('click', function() {
      let url = prompt("Enter image URL");
      document.execCommand('insertImage', false, url);
    });
  </script>

</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Budget Planner App</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f4f4f4;
      margin: 0;
      padding: 0;
    }

.container {
      max-width: 800px;
      margin: 30px auto;
      background: #fff;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

h2, h3 {
      text-align: center;
      color: #333;
    }

form {
      display: flex;
      flex-direction: column;
      margin-bottom: 20px;
    }

input, select, button {
      margin: 10px 0;
      padding: 12px;
      font-size: 16px;
      border-radius: 5px;
      border: 1px solid #ccc;
    }

button {
      background-color: #28a745;
      color: white;
      border: none;
    }

button:hover {
      background-color: #218838;
    }

.summary {
      background: #e9ecef;
      padding: 15px;
      border-radius: 8px;
      margin-bottom: 20px;
    }

.summary p {
      margin: 5px 0;
      font-weight: bold;
    }

.entry-list {
      list-style-type: none;
      padding: 0;
    }

.entry {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #f8f9fa;
      margin: 8px 0;
      padding: 10px;
      border-left: 5px solid #007bff;
      border-radius: 6px;
    }

.entry.expense {
      border-left-color: #dc3545;
    }

.entry button {
      background: #dc3545;
      color: white;
      border: none;
      padding: 6px 10px;
      border-radius: 4px;
      cursor: pointer;
    }

.entry button:hover {
      background: #c82333;
    }

table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }

table, th, td {
      border: 1px solid #ddd;
    }

th, td {
      padding: 10px;
      text-align: left;
    }

th {
      background-color: #007bff;
      color: white;
    }

@media (max-width: 600px) {
      .container {
        padding: 15px;
      }
      table, thead, tbody, th, td, tr {
        font-size: 14px;
      }
    }
  </style>
</head>
<body>

<div class="container">
    <h2>Budget Planner App</h2>

<form id="entryForm">
      <select id="type">
        <option value="income">Income</option>
        <option value="expense">Expense</option>
      </select>
      <input type="text" id="description" placeholder="Description" required>
      <input type="number" id="amount" placeholder="Amount" required>
      <button type="submit">Add Entry</button>
    </form>

<div class="summary">
      <p id="totalIncome">Total Income: $0</p>
      <p id="totalExpense">Total Expense: $0</p>
      <p id="balance">Balance: $0</p>
    </div>

<h3>All Transactions</h3>
    <table>
      <thead>
        <tr>
          <th>Type</th>
          <th>Description</th>
          <th>Amount</th>
          <th>Date</th>
        </tr>
      </thead>
      <tbody id="historyTable"></tbody>
    </table>
  </div>

let allEntries = [];

entryForm.addEventListener('submit', function(e) {
      e.preventDefault();

const type = document.getElementById('type').value;
      const description = document.getElementById('description').value.trim();
      const amount = parseFloat(document.getElementById('amount').value);

if (!description || isNaN(amount) || amount <= 0) {
        alert("Please enter a valid description and amount.");
        return;
      }

const entry = {
        id: Date.now(),
        type,
        description,
        amount,
        date: new Date().toLocaleString()
      };

allEntries.push(entry);

entryForm.reset();

updateEntries();
      updateSummary();
      updateTable();
    });

function deleteEntry(id) {
      allEntries = allEntries.filter(entry => entry.id !== id);
      updateEntries();
      updateSummary();
      updateTable();
    }

function updateSummary() {
      let income = 0;
      let expense = 0;

allEntries.forEach(entry => {
        if (entry.type === 'income') {
          income += entry.amount;
        } else {
          expense += entry.amount;
        }
      });

const balance = income - expense;

totalIncomeEl.textContent = `Total Income: $${income}`;
      totalExpenseEl.textContent = `Total Expense: $${expense}`;
      balanceEl.textContent = `Balance: $${balance}`;
    }

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Stock Price Tracker</title>
  <style>
    /* Basic reset and styling */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f4f4f9;
    }

/* Header Section */
    header {
      background-color: #4CAF50;
      color: white;
      text-align: center;
      padding: 15px;
    }

/* Main Content */
    main {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 20px;
    }

/* Input Section */
    .input-section {
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
    }

/* Input field and button styling */
    input[type="text"] {
      padding: 10px;
      font-size: 16px;
      margin-right: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      width: 200px;
    }

button {
      padding: 10px 15px;
      font-size: 16px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

button:hover {
      background-color: #45a049;
    }

/* Stock Price Result Section */
    .stock-result {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

/* Stock Price Details */
    .stock-details {
      display: flex;
      justify-content: center;
      margin-top: 15px;
      background-color: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      width: 80%;
      max-width: 500px;
    }

/* Stock Detail Items */
    .stock-item {
      margin: 5px 15px;
      font-size: 18px;
    }

/* Error message styling */
    .error {
      color: red;
      margin-top: 20px;
    }

/* Responsive Design */
    @media screen and (max-width: 600px) {
      .input-section {
        flex-direction: column;
      }

input[type="text"] {
        width: 100%;
        margin-bottom: 10px;
      }

button {
        width: 100%;
      }
    }
  </style>
</head>
<body>

<header>
    <h1>Stock Price Tracker</h1>
  </header>

<main>
    
    <div class="input-section">
      <input type="text" id="stockSymbol" placeholder="Enter stock symbol (e.g., AAPL)" />
      <button onclick="getStockPrice()">Get Price</button>
    </div>

<div class="stock-result" id="stockResult"></div>

<div class="error" id="errorMessage"></div>
  </main>

<script>
    // Function to fetch the stock price from the API
    function getStockPrice() {
      // Clear previous results and error message
      document.getElementById('stockResult').innerHTML = '';
      document.getElementById('errorMessage').innerHTML = '';

// Get the value of the stock symbol entered by the user
      const stockSymbol = document.getElementById('stockSymbol').value.trim();

// Check if the input field is empty
      if (stockSymbol === '') {
        document.getElementById('errorMessage').textContent = 'Please enter a stock symbol.';
        return; // Exit the function if the field is empty
      }

// Fetch stock price from a public API (e.g., Alpha Vantage, Finnhub, or similar)
      const apiKey = 'YOUR_API_KEY'; // Replace with your API key
      const url = `https://finnhub.io/api/v1/quote?symbol=${stockSymbol}&token=${apiKey}`;

// Fetch stock data from the API
      fetch(url)
        .then(response => {
          if (!response.ok) {
            // If the response is not OK, show an error message
            throw new Error('Stock symbol not found or API limit exceeded');
          }
          return response.json();
        })
        .then(data => {
          // Check if data is available and display it
          if (data && data.c !== undefined) {
            displayStockPrice(data, stockSymbol);
          } else {
            throw new Error('Stock data not available');
          }
        })
        .catch(error => {
          // Display error if something goes wrong
          document.getElementById('errorMessage').textContent = error.message;
        });
    }

// Function to display stock price and details
    function displayStockPrice(data, symbol) {
      // Create the HTML to display stock details
      const stockDetails = `
        <div class="stock-item"><strong>Stock Symbol:</strong> ${symbol.toUpperCase()}</div>
        <div class="stock-item"><strong>Current Price:</strong> $${data.c}</div>
        <div class="stock-item"><strong>High Price:</strong> $${data.h}</div>
        <div class="stock-item"><strong>Low Price:</strong> $${data.l}</div>
        <div class="stock-item"><strong>Opening Price:</strong> $${data.o}</div>
        <div class="stock-item"><strong>Previous Close Price:</strong> $${data.pc}</div>
      `;

// Display the stock details in the stock result section
      document.getElementById('stockResult').innerHTML = stockDetails;
    }
  </script>

</body>
</html>

How to Run the App - Stock Price Tracker

API Key:

To use this app, you'll need an API key from a stock data provider like Finnhub. Follow these steps to get the API key:

Create a free account on a stock data provider's website (such as Finnhub).
Once registered, navigate to the API section and generate a free API key.
Copy the generated API key to use in the app.

Save and Run:

Save the HTML code in a file called stock-price-tracker.html.
Open the file in any modern web browser (e.g., Chrome, Firefox, Edge).
Enter a stock symbol (e.g., AAPL) into the input field and click the "Get Price" button to see the stock details.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Professional Portfolio</title>

body {
      font-family: 'Arial', sans-serif;
      line-height: 1.6;
      background-color: #f4f4f4;
    }

header {
      background-color: #333;
      color: #fff;
      padding: 20px 0;
      text-align: center;
    }

header h1 {
      font-size: 2.5rem;
    }

nav ul {
      list-style: none;
      padding: 0;
      text-align: center;
    }

nav ul li {
      display: inline-block;
      margin: 0 15px;
    }

nav ul li a {
      color: #fff;
      text-decoration: none;
      font-size: 1.1rem;
    }

nav ul li a:hover {
      text-decoration: underline;
    }

section {
      padding: 40px 10%;
      margin-bottom: 40px;
      background-color: #fff;
    }

.about, .skills, .projects, .contact {
      margin-bottom: 40px;
    }

h2 {
      text-align: center;
      font-size: 2rem;
      margin-bottom: 20px;
    }

.skills .skill {
      margin: 10px 0;
    }

.skill-name {
      font-weight: bold;
    }

.progress-bar {
      width: 100%;
      background-color: #e0e0e0;
      border-radius: 10px;
      height: 20px;
      overflow: hidden;
    }

.progress-bar span {
      display: block;
      height: 100%;
      background-color: #4CAF50;
      width: 0;
      text-align: center;
      line-height: 20px;
      color: white;
      font-weight: bold;
    }

.projects .project {
      margin-bottom: 20px;
    }

.project img {
      width: 100%;
      max-width: 500px;
      border-radius: 8px;
    }

.contact form input,
    .contact form textarea {
      width: 100%;
      padding: 10px;
      margin: 10px 0;
      border: 1px solid #ddd;
      border-radius: 5px;
    }

.contact form button {
      padding: 10px 20px;
      background-color: #333;
      color: white;
      border: none;
      cursor: pointer;
      border-radius: 5px;
    }

.contact form button:hover {
      background-color: #444;
    }

footer {
      background-color: #333;
      color: #fff;
      text-align: center;
      padding: 20px 0;
    }

footer a {
      color: #fff;
      text-decoration: none;
    }

footer a:hover {
      text-decoration: underline;
    }

/* Mobile Responsiveness */
    @media (max-width: 768px) {
      section {
        padding: 40px 5%;
      }
      header h1 {
        font-size: 2rem;
      }
      nav ul li {
        display: block;
        margin: 10px 0;
      }
    }
  </style>
</head>

<body>

<header>
    <h1>Majid Farjani</h1>
    <p>Web Developer | Designer</p>
    <nav>
      <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#skills">Skills</a></li>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>

<section id="about" class="about">
    <h2>About Me</h2>
    <p>
      I am a passionate web developer with 5 years of experience in building user-friendly and accessible websites.
      I have a strong background in front-end development and enjoy creating responsive, interactive user interfaces.
      I am constantly learning new technologies and enhancing my skills to stay up-to-date with industry trends.
    </p>
  </section>

<section id="skills" class="skills">
    <h2>Skills</h2>
    <div class="skill">
      <div class="skill-name">HTML</div>
      <div class="progress-bar"><span style="width: 90%;">90%</span></div>
    </div>
    <div class="skill">
      <div class="skill-name">CSS</div>
      <div class="progress-bar"><span style="width: 85%;">85%</span></div>
    </div>
    <div class="skill">
      <div class="skill-name">JavaScript</div>
      <div class="progress-bar"><span style="width: 80%;">80%</span></div>
    </div>
    <div class="skill">
      <div class="skill-name">React</div>
      <div class="progress-bar"><span style="width: 75%;">75%</span></div>
    </div>
    <div class="skill">
      <div class="skill-name">Node.js</div>
      <div class="progress-bar"><span style="width: 70%;">70%</span></div>
    </div>
  </section>

<section id="projects" class="projects">
    <h2>Projects</h2>
    <div class="project">
      <img src="https://via.placeholder.com/500x300" alt="Project 1">
      <h3>Project 1: Personal Portfolio Website</h3>
      <p>Built a responsive personal portfolio website showcasing my skills and projects. Features include a clean design and interactive elements.</p>
      <a href="#">View Project</a>
    </div>
    <div class="project">
      <img src="https://via.placeholder.com/500x300" alt="Project 2">
      <h3>Project 2: E-commerce Website</h3>
      <p>Developed a fully functional e-commerce website with a product catalog, shopping cart, and checkout system. Integrated payment gateways.</p>
      <a href="#">View Project</a>
    </div>
  </section>

<section id="contact" class="contact">
    <h2>Contact Me</h2>
    <form action="#">
      <input type="text" name="name" placeholder="Your Name" required>
      <input type="email" name="email" placeholder="Your Email" required>
      <textarea name="message" placeholder="Your Message" rows="4" required>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Photo Editor App</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background: #f0f0f0;
    }
    #editor-container {
      border: 2px solid #ccc;
      background: #fff;
      padding: 10px;
      margin-bottom: 20px;
      text-align: center;
    }
    canvas {
      max-width: 100%;
      border: 1px solid #000;
    }
    .controls {
      margin: 10px 0;
    }
    .controls button, .controls input, .controls select {
      margin: 5px;
      padding: 8px;
    }
  </style>
</head>
<body>

<h1>Photo Editor App</h1>

<div class="controls">
  <input type="file" id="imageLoader" accept="image/*"/>
  <button onclick="addText()">Add Text</button>
  <button onclick="applyFilter('grayscale')">Grayscale</button>
  <button onclick="applyFilter('sepia')">Sepia</button>
  <button onclick="applyFilter('invert')">Invert</button>
  <button onclick="applyFilter('brightness')">Brightness</button>
  <button onclick="applyFilter('contrast')">Contrast</button>
  <button onclick="applyFilter('saturation')">Saturation</button>
  <button onclick="applyFilter('blur')">Blur</button>
  <input type="range" id="brightness" min="0" max="2" step="0.1" value="1" onchange="adjust('brightness', this.value)"/>
  <input type="range" id="contrast" min="0" max="2" step="0.1" value="1" onchange="adjust('contrast', this.value)"/>
  <input type="range" id="saturation" min="0" max="2" step="0.1" value="1" onchange="adjust('saturation', this.value)"/>
  <input type="range" id="blur" min="0" max="10" step="1" value="0" onchange="adjust('blur', this.value)"/>
  <br>
  <button onclick="saveAsImage()">Save as PNG</button>
  <button onclick="saveAsPDF()">Save as PDF</button>
  <button onclick="window.print()">Print</button>
  <button onclick="undo()">Undo</button>
  <button onclick="redo()">Redo</button>
</div>

<div class="controls">
  <label for="font-family">Font Family:</label>
  <select id="font-family" onchange="changeFont()">
    <option value="Arial">Arial</option>
    <option value="Verdana">Verdana</option>
    <option value="Courier">Courier</option>
    <option value="Georgia">Georgia</option>
  </select>
  
  <label for="font-size">Font Size:</label>
  <input type="number" id="font-size" value="24" onchange="changeFont()"/>
  
  <label for="font-color">Font Color:</label>
  <input type="color" id="font-color" value="#000000" onchange="changeFont()"/>
</div>

<div id="editor-container">
  <canvas id="canvas" width="800" height="600"></canvas>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.0/fabric.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

// Upload image
  document.getElementById('imageLoader').addEventListener('change', function (e) {
    const reader = new FileReader();
    reader.onload = function (f) {
      const imgObj = new Image();
      imgObj.src = f.target.result;
      imgObj.onload = function () {
        const img = new fabric.Image(imgObj);
        img.scaleToWidth(600);
        canvas.clear();
        canvas.add(img);
        canvas.centerObject(img);
        canvas.setActiveObject(img);
        saveHistory(); // Save to history after image load
      };
    };
    reader.readAsDataURL(e.target.files[0]);
  });

// Add text
  function addText() {
    const text = new fabric.Textbox("Your Text Here", {
      left: 100,
      top: 100,
      fontSize: 24,
      fill: '#000'
    });
    canvas.add(text).setActiveObject(text);
    saveHistory(); // Save to history after adding text
  }

// Change font, size, and color
  function changeFont() {
    const activeObj = canvas.getActiveObject();
    if (activeObj && activeObj.type === 'textbox') {
      activeObj.set({
        fontFamily: document.getElementById('font-family').value,
        fontSize: parseInt(document.getElementById('font-size').value),
        fill: document.getElementById('font-color').value
      });
      canvas.renderAll();
      saveHistory(); // Save to history after text change
    }
  }

// Apply filter
  function applyFilter(type) {
    const obj = canvas.getActiveObject();
    if (!obj || obj.type !== 'image') {
      alert("Select an image first!");
      return;
    }

let filter;
    switch (type) {
      case 'grayscale': filter = new fabric.Image.filters.Grayscale(); break;
      case 'sepia': filter = new fabric.Image.filters.Sepia(); break;
      case 'invert': filter = new fabric.Image.filters.Invert(); break;
      case 'brightness': filter = new fabric.Image.filters.Brightness({ brightness: parseFloat(document.getElementById('brightness').value) }); break;
      case 'contrast': filter = new fabric.Image.filters.Contrast({ contrast: parseFloat(document.getElementById('contrast').value) }); break;
      case 'saturation': filter = new fabric.Image.filters.Saturation({ saturation: parseFloat(document.getElementById('saturation').value) }); break;
      case 'blur': filter = new fabric.Image.filters.Blur({ blur: parseInt(document.getElementById('blur').value) }); break;
    }

obj.filters = [filter];
    obj.applyFilters();
    canvas.renderAll();
    saveHistory(); // Save to history after filter application
  }

// Adjust filter values
  function adjust(type, value) {
    applyFilter(type);
  }

// Undo action
  function undo() {
    if (historyIndex > 0) {
      historyIndex--;
      const state = history[historyIndex];
      canvas.loadFromJSON(state, () => {
        canvas.renderAll();
      });
    }
  }

// Redo action
  function redo() {
    if (historyIndex < history.length - 1) {
      historyIndex++;
      const state = history[historyIndex];
      canvas.loadFromJSON(state, () => {
        canvas.renderAll();
      });
    }
  }

// Save to history
  function saveHistory() {
    if (historyIndex < history.length - 1) {
      history = history.slice(0, historyIndex + 1); // Remove forward history if any
    }
    history.push(JSON.stringify(canvas.toJSON()));
    historyIndex++;
  }

// Save as image
  function saveAsImage() {
    const dataURL = canvas.toDataURL({
      format: 'png',
      quality: 1.0
    });
    const link = document.createElement('a');
    link.href = dataURL;
    link.download = 'edited-image.png';
    link.click();
  }

// Save as PDF
  async function saveAsPDF() {
    const canvasElement = document.getElementById('canvas');
    const canvasImage = await html2canvas(canvasElement);
    const data = canvasImage.toDataURL('image/png');

const { jsPDF } = window.jspdf;
    const pdf = new jsPDF('landscape', 'pt', [canvas.width, canvas.height]);
    pdf.addImage(data, 'PNG', 0, 0, canvas.width, canvas.height);
    pdf.save('image.pdf');
  }
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Restaurant Menu App</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

body {
      font-family: Arial, sans-serif;
      background-color: #f9f9f9;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      height: 100vh;
      padding-top: 30px;
      flex-direction: column;
    }

.container {
      width: 90%;
      max-width: 1200px;
      margin: auto;
      margin-top: 50px;
    }

h1 {
      text-align: center;
      margin-bottom: 20px;
    }

.menu-category {
      margin-bottom: 40px;
    }

.category-title {
      font-size: 2em;
      color: #333;
      margin-bottom: 15px;
    }

.menu-items {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 20px;
      justify-items: center;
    }

.menu-item {
      background-color: #fff;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      text-align: center;
      width: 100%;
    }

.menu-item img {
      width: 100%;
      height: 200px;
      object-fit: cover;
      border-radius: 10px;
    }

.menu-item h3 {
      font-size: 1.5em;
      margin-top: 15px;
      color: #333;
    }

.menu-item p {
      color: #777;
      margin: 10px 0;
    }

.price {
      font-size: 1.2em;
      color: #e74c3c;
    }

.add-to-cart {
      background-color: #2ecc71;
      color: white;
      padding: 10px;
      margin-top: 15px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

.add-to-cart:hover {
      background-color: #27ae60;
    }

.cart {
      background-color: #fff;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      width: 100%;
      margin-top: 50px;
    }

.cart h2 {
      font-size: 2em;
      margin-bottom: 20px;
      color: #333;
    }

.cart-item {
      display: flex;
      justify-content: space-between;
      margin: 10px 0;
    }

.cart-item span {
      font-size: 1.2em;
    }

.summary {
      margin-top: 20px;
    }

.summary div {
      font-size: 1.2em;
      margin: 5px 0;
    }

.total-price {
      font-size: 1.5em;
      font-weight: bold;
      color: #e74c3c;
    }

.checkout-button {
      background-color: #3498db;
      color: white;
      padding: 10px;
      margin-top: 15px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      width: 100%;
    }

.checkout-button:hover {
      background-color: #2980b9;
    }

footer {
      text-align: center;
      font-size: 1.1em;
      margin: 20px 0;
      color: #555;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Restaurant Menu</h1>

<div class="menu-category">
      <div class="category-title">Appetizers</div>
      <div class="menu-items" id="appetizers"></div>
    </div>

<div class="menu-category">
      <div class="category-title">Main Dishes</div>
      <div class="menu-items" id="main-dishes"></div>
    </div>

<div class="menu-category">
      <div class="category-title">Desserts</div>
      <div class="menu-items" id="desserts"></div>
    </div>

<div class="cart">
      <h2>Your Cart</h2>
      <div id="cart-items"></div>
      <div class="summary">
        <div id="subtotal">Subtotal: $0.00</div>
        <div id="tax">HST (13%): $0.00</div>
        <div class="total-price" id="total">Total: $0.00</div>
      </div>
      <button class="checkout-button" id="checkout-button" disabled>Checkout</button>
    </div>
  </div>

let cart = [];

function addToCart(item) {
      cart.push(item);
      updateCart();
    }

function updateCart() {
      const cartItems = document.getElementById('cart-items');
      cartItems.innerHTML = '';

const tax = subtotal * 0.13;
      const total = subtotal + tax;

document.getElementById('checkout-button').disabled = cart.length === 0;
    }

function checkout() {
      alert('Your order has been placed!');
      const today = new Date();
      const dateStr = today.toISOString().split('T')[0];
      document.getElementById('footer-message').textContent = `Income on: ${dateStr}`;
      cart = [];
      updateCart();
    }

document.getElementById('checkout-button').onclick = checkout;
    generateMenu();
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>File Explorer Style Menu</title>
  <style>
    body {
      font-family: sans-serif;
      background: #f4f4f4;
      padding: 30px;
    }

h1 {
      text-align: center;
      margin-bottom: 20px;
    }

.explorer {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 20px;
    }

.item {
      background: white;
      padding: 15px;
      border-radius: 10px;
      text-align: center;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      cursor: pointer;
      transition: transform 0.2s ease;
    }

.item:hover {
      transform: scale(1.03);
    }

.item img {
      width: 64px;
      height: 64px;
      margin-bottom: 10px;
    }

.item-title {
      font-size: 1.1em;
      margin-bottom: 5px;
    }

.item-price {
      color: #e67e22;
    }
  </style>
</head>
<body>
  <h1>Menu Explorer</h1>

const container = document.getElementById("menuExplorer");

items.forEach(item => {
      const div = document.createElement("div");
      div.className = "item";
      div.innerHTML = `
        <div style="font-size: 3rem">${item.icon}</div>
        <div class="item-title">${item.name}</div>
        <div class="item-price">$${item.price.toFixed(2)}</div>
      `;
      container.appendChild(div);
    });
  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>File Explorer Style Menu</title>
  <style>
    body {
      font-family: sans-serif;
      background: #f4f4f4;
      padding: 30px;
    }

h1 {
      text-align: center;
      margin-bottom: 20px;
    }

.explorer {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 20px;
    }

.item:hover {
      transform: scale(1.03);
    }

.item img {
      width: 64px;
      height: 64px;
      margin-bottom: 10px;
    }

.item-title {
      font-size: 1.1em;
      margin-bottom: 5px;
    }

.item-price {
      color: #e67e22;
    }
  </style>
</head>
<body>
  <h1>Menu Explorer</h1>

const container = document.getElementById("menuExplorer");

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Music Playlist App</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background-color: #f0f0f0;
      text-align: center;
    }
    #playlist {
      list-style-type: none;
      padding: 0;
    }
    #playlist li {
      padding: 10px;
      margin: 5px 0;
      background-color: #fff;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s;
    }
    #playlist li:hover {
      background-color: #e0e0e0;
    }
    #player {
      margin-top: 20px;
      text-align: center;
    }
    #player audio {
      width: 100%;
      max-width: 400px;
    }
    #controls {
      margin-top: 10px;
    }
    button {
      padding: 10px;
      margin: 5px;
      font-size: 16px;
      cursor: pointer;
      border: none;
      border-radius: 5px;
      background-color: #4CAF50;
      color: white;
    }
    button:hover {
      background-color: #45a049;
    }
    #volume {
      width: 100%;
      max-width: 300px;
    }
    #seekbar {
      width: 100%;
      max-width: 300px;
    }
    input[type="file"] {
      margin: 20px 0;
      padding: 10px;
    }
  </style>
</head>
<body>

<h1>Music Playlist App</h1>

<input type="file" id="file-input" accept="audio/*" onchange="loadFile(event)" multiple />
  
  
  <ul id="playlist">
    
  </ul>

<div id="player">
    <h2 id="song-title">Select a Song to Play</h2>
    <audio id="audio-player" controls>
      <source id="audio-source" src="" type="audio/mp3" />
      Your browser does not support the audio element.
    </audio>

<div id="controls">
      <button onclick="prevSong()">Prev</button>
      <button onclick="playPause()">Play/Pause</button>
      <button onclick="nextSong()">Next</button>
    </div>

<input type="range" id="seekbar" value="0" max="100" onchange="seekSong()">
    <div>
      <label for="volume">Volume: </label>
      <input type="range" id="volume" min="0" max="1" step="0.01" value="1" onchange="adjustVolume()">
    </div>
  </div>

// Function to load files from input
    function loadFile(event) {
      const files = event.target.files;
      playlist = []; // Clear the existing playlist

// Loop through files and add them to the playlist
      for (let i = 0; i < files.length; i++) {
        const file = files[i];
        if (file.type.startsWith('audio/')) {
          const fileURL = URL.createObjectURL(file); // Create a URL for the file
          const song = {
            title: file.name,
            src: fileURL
          };
          playlist.push(song);
        }
      }
      updatePlaylist();
      playSong(playlist[0].src, playlist[0].title); // Automatically play the first song in the list
    }

// Update the playlist UI with the songs added
    function updatePlaylist() {
      const playlistContainer = document.getElementById('playlist');
      playlistContainer.innerHTML = ''; // Clear the current playlist
      playlist.forEach((song, index) => {
        const li = document.createElement('li');
        li.textContent = song.title;
        li.onclick = () => playSong(song.src, song.title);
        playlistContainer.appendChild(li);
      });
    }

// Function to play a song
    function playSong(songSrc, title) {
      audioPlayer.src = songSrc;
      songTitle.textContent = title;
      audioPlayer.play();
      isPlaying = true;
      updateSeekbar();
    }

// Play/pause functionality
    function playPause() {
      if (isPlaying) {
        audioPlayer.pause();
        isPlaying = false;
      } else {
        audioPlayer.play();
        isPlaying = true;
      }
    }

// Change to the previous song
    function prevSong() {
      currentSongIndex = (currentSongIndex === 0) ? playlist.length - 1 : currentSongIndex - 1;
      const song = playlist[currentSongIndex];
      playSong(song.src, song.title);
    }

// Change to the next song
    function nextSong() {
      currentSongIndex = (currentSongIndex === playlist.length - 1) ? 0 : currentSongIndex + 1;
      const song = playlist[currentSongIndex];
      playSong(song.src, song.title);
    }

// Seek through the song
    function seekSong() {
      const seekTo = audioPlayer.duration * (seekbar.value / 100);
      audioPlayer.currentTime = seekTo;
    }

// Update the seekbar as the song plays
    function updateSeekbar() {
      setInterval(() => {
        if (audioPlayer.currentTime) {
          const seekPosition = (audioPlayer.currentTime / audioPlayer.duration) * 100;
          seekbar.value = seekPosition;
        }
      }, 1000);
    }

// Adjust volume
    function adjustVolume() {
      audioPlayer.volume = document.getElementById('volume').value;
    }

</script>

</body>
</html>

Another Music Player

<h1>Music Playlist App</h1>

<ul id="playlist">
    <li onclick="playSong('song1.mp3', 'Song 1')">Song 1</li>
    <li onclick="playSong('song2.mp3', 'Song 2')">Song 2</li>
    <li onclick="playSong('song3.mp3', 'Song 3')">Song 3</li>
    <li onclick="playSong('song4.mp3', 'Song 4')">Song 4</li>
  </ul>

// Function to play a song
    function playSong(song, title) {
      audioPlayer.src = song;
      songTitle.textContent = title;
      audioPlayer.play();
      isPlaying = true;
      updateSeekbar();
    }

// Seek through the song
    function seekSong() {
      const seekTo = audioPlayer.duration * (seekbar.value / 100);
      audioPlayer.currentTime = seekTo;
    }

// Adjust volume
    function adjustVolume() {
      audioPlayer.volume = document.getElementById('volume').value;
    }

// Initial song setup (first song)
    playSong(playlist[currentSongIndex], `Song ${currentSongIndex + 1}`);
  </script>

</body>
</html>

Youtube Player

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Music & Video Playlist App</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background-color: #f0f0f0;
      text-align: center;
    }
    #playlist {
      list-style-type: none;
      padding: 0;
    }
    #playlist li {
      padding: 10px;
      margin: 5px 0;
      background-color: #fff;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s;
    }
    #playlist li:hover {
      background-color: #e0e0e0;
    }
    #player {
      margin-top: 20px;
      text-align: center;
    }
    #controls {
      margin-top: 10px;
    }
    button {
      padding: 10px;
      margin: 5px;
      font-size: 16px;
      cursor: pointer;
      border: none;
      border-radius: 5px;
      background-color: #4CAF50;
      color: white;
    }
    button:hover {
      background-color: #45a049;
    }
    #volume {
      width: 100%;
      max-width: 300px;
    }
    #seekbar {
      width: 100%;
      max-width: 300px;
    }
    input[type="file"] {
      margin: 20px 0;
      padding: 10px;
    }
  </style>
</head>
<body>

<h1>Music & Video Playlist App</h1>

<ul id="playlist">
    <li data-video-id="dQw4w9WgXcQ">Rick Astley - Never Gonna Give You Up</li>
    <li data-video-id="tVj0ZTS4WF4">Adele - Hello</li>
    <li data-video-id="kJQP7kiw5Fk">Luis Fonsi - Despacito ft. Daddy Yankee</li>
    <li data-video-id="3JZ_D3ELwOQ">Shakira - Hips Don't Lie</li>
  </ul>

<div id="player">
    <h2 id="song-title">Select a Video to Play</h2>
    <div id="youtube-player"></div>

<div>
      <label for="volume">Volume: </label>
      <input type="range" id="volume" min="0" max="1" step="0.01" value="1" onchange="adjustVolume()">
    </div>
  </div>

<h1>Steps to Run the App</h1>

<div class="section steps">
    <h2>Prepare the HTML File:</h2>
    <ul>
      <li>Copy the HTML code I provided into a text editor (like Notepad or Visual Studio Code).</li>
      <li>Save the file with an .html extension, for example: <strong>music-video-playlist-app.html</strong>.</li>
    </ul>
  </div>

<div class="section steps">
    <h2>Open the HTML File in a Web Browser:</h2>
    <ul>
      <li>Locate the HTML file you saved (e.g., <strong>music-video-playlist-app.html</strong>) on your computer.</li>
      <li>Right-click on the file and select <strong>Open with</strong> > Your preferred web browser (e.g., Chrome, Firefox, Edge).</li>
      <li>The page should open in your web browser, and you should see the app with the playlist and player.</li>
    </ul>
  </div>

<div class="section steps">
    <h2>Interact with the Player:</h2>
    <ul>
      <li>Once the page is loaded, you should see the playlist with the video titles.</li>
      <li>Click on any video title in the list, and it should start playing that video.</li>
      <li>Use the Play/Pause, Next, and Previous buttons to control playback.</li>
      <li>Adjust the volume using the volume slider.</li>
    </ul>
  </div>

<div class="section troubleshooting">
    <h3>Troubleshooting:</h3>

<h4>If the YouTube Player Doesn't Load:</h4>
    <ul>
      <li>Ensure you're connected to the internet, as the YouTube player requires an active internet connection to load and stream videos.</li>
      <li>Check that your browser allows the iframe API and has JavaScript enabled. YouTube's embedded player relies on JavaScript, so make sure it's not blocked in your browser settings.</li>
    </ul>

<h4>Console Errors:</h4>
    <ul>
      <li>If you see any errors in the browser's developer console (press F12 and go to the "Console" tab), it may be due to an issue with the YouTube API script loading.</li>
      <li>Make sure the script URL <strong>https://www.youtube.com/iframe_api</strong> is accessible.</li>
    </ul>
  </div>

<script src="https://www.youtube.com/iframe_api"></script>
  <script>
    let playlist = []; // Array to hold song objects {title, videoId}
    let currentSongIndex = 0; // Variable to track the current song
    let isPlaying = false; // Variable to track play/pause status
    let player; // YouTube player object

// Playlist data (YouTube video IDs and titles)
    const songList = [
      { title: "Rick Astley - Never Gonna Give You Up", videoId: "dQw4w9WgXcQ" },
      { title: "Adele - Hello", videoId: "tVj0ZTS4WF4" },
      { title: "Luis Fonsi - Despacito ft. Daddy Yankee", videoId: "kJQP7kiw5Fk" },
      { title: "Shakira - Hips Don't Lie", videoId: "3JZ_D3ELwOQ" },
    ];

// This function is called when the YouTube API script is loaded
    function onYouTubeIframeAPIReady() {
      player = new YT.Player('youtube-player', {
        height: '360',
        width: '640',
        videoId: songList[currentSongIndex].videoId,
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
      });
    }

// This function runs when the player is ready
    function onPlayerReady(event) {
      event.target.playVideo();
    }

// This function runs when the player state changes (like playing, paused, etc.)
    function onPlayerStateChange(event) {
      if (event.data == YT.PlayerState.PLAYING && !isPlaying) {
        isPlaying = true;
      } else if (event.data == YT.PlayerState.PAUSED && isPlaying) {
        isPlaying = false;
      }
    }

// Play or pause the video
    function playPause() {
      if (isPlaying) {
        player.pauseVideo();
        isPlaying = false;
      } else {
        player.playVideo();
        isPlaying = true;
      }
    }

// Play the next song in the playlist
    function nextSong() {
      currentSongIndex = (currentSongIndex + 1) % songList.length;
      const song = songList[currentSongIndex];
      songTitle.textContent = song.title;
      player.loadVideoById(song.videoId);
    }

// Play the previous song in the playlist
    function prevSong() {
      currentSongIndex = (currentSongIndex - 1 + songList.length) % songList.length;
      const song = songList[currentSongIndex];
      songTitle.textContent = song.title;
      player.loadVideoById(song.videoId);
    }

// Adjust the volume of the video
    function adjustVolume() {
      const volume = document.getElementById('volume').value;
      player.setVolume(volume * 100); // YouTube volume is between 0 and 100
    }

// Set up the playlist UI (clicking on a song will play it)
    const playlistContainer = document.getElementById('playlist');
    playlistContainer.addEventListener('click', function (event) {
      if (event.target.tagName === 'LI') {
        const videoId = event.target.getAttribute('data-video-id');
        const song = songList.find(song => song.videoId === videoId);
        songTitle.textContent = song.title;
        player.loadVideoById(videoId);
      }
    });

// Initialize the first song
    songTitle.textContent = songList[currentSongIndex].title;
  </script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Job Search App</title>
  <style>
    /* Basic styling and reset */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f7f7f7;
    }

/* Header Styling */
    header {
      background-color: #2c3e50;
      color: white;
      padding: 20px;
      text-align: center;
    }

/* Main Section */
    main {
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

/* Input Section */
    .input-section {
      margin-bottom: 20px;
      display: flex;
      justify-content: center;
      gap: 10px;
    }

/* Search input and button */
    input[type="text"] {
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 4px;
      width: 200px;
    }

button {
      padding: 10px 15px;
      font-size: 16px;
      background-color: #3498db;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

button:hover {
      background-color: #2980b9;
    }

/* Filter Section */
    .filter-section {
      margin-top: 20px;
      display: flex;
      gap: 10px;
      justify-content: center;
    }

select {
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

/* Job Result Section */
    .job-result {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
      margin-top: 20px;
    }

/* Job Card */
    .job-card {
      background-color: white;
      padding: 15px;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      width: 250px;
      text-align: center;
    }

/* Job Title and Company */
    .job-title {
      font-size: 18px;
      font-weight: bold;
    }

.company-name {
      font-size: 16px;
      color: #7f8c8d;
    }

/* Job Description and Button */
    .description {
      font-size: 14px;
      margin: 10px 0;
    }

.apply-button {
      background-color: #27ae60;
      color: white;
      border: none;
      padding: 8px 15px;
      border-radius: 4px;
      cursor: pointer;
    }

.apply-button:hover {
      background-color: #2ecc71;
    }
  </style>
</head>
<body>

<header>
    <h1>Job Search App</h1>
  </header>

<main>
    
    <div class="input-section">
      <input type="text" id="jobSearch" placeholder="Search for jobs..." />
      <button onclick="searchJobs()">Search</button>
    </div>

<div class="filter-section">
      <select id="jobTypeFilter">
        <option value="">All Job Types</option>
        <option value="Full-time">Full-time</option>
        <option value="Part-time">Part-time</option>
        <option value="Remote">Remote</option>
      </select>
    </div>

<div id="jobResults" class="job-result"></div>
  </main>

<script>
    // Sample Job Data
    const jobListings = [
      { title: 'Software Engineer', company: 'Google', type: 'Full-time', description: 'Develop and maintain software solutions.' },
      { title: 'Data Scientist', company: 'Facebook', type: 'Part-time', description: 'Analyze and interpret complex data.' },
      { title: 'Web Developer', company: 'Amazon', type: 'Full-time', description: 'Build and maintain websites.' },
      { title: 'Product Manager', company: 'Apple', type: 'Remote', description: 'Manage product lifecycle and strategy.' },
      { title: 'Graphic Designer', company: 'Microsoft', type: 'Part-time', description: 'Design graphics for marketing.' },
      { title: 'UX/UI Designer', company: 'Netflix', type: 'Remote', description: 'Design user interfaces and experiences.' },
    ];

// Function to Search Jobs Based on Input
    function searchJobs() {
      // Get the search query from the input field
      const searchQuery = document.getElementById('jobSearch').value.toLowerCase();
      // Get the selected job type filter
      const jobType = document.getElementById('jobTypeFilter').value;

// Filter jobs based on search query and selected job type
      const filteredJobs = jobListings.filter(job => {
        const matchesSearch = job.title.toLowerCase().includes(searchQuery) || job.company.toLowerCase().includes(searchQuery);
        const matchesType = jobType ? job.type === jobType : true;
        return matchesSearch && matchesType;
      });

// Display the filtered job results
      displayJobs(filteredJobs);
    }

// Function to Display Job Results
    function displayJobs(jobs) {
      // Get the job results container
      const jobResults = document.getElementById('jobResults');
      // Clear previous job results
      jobResults.innerHTML = '';

// Check if any jobs were found
      if (jobs.length === 0) {
        jobResults.innerHTML = '<p>No jobs found matching your criteria.</p>';
        return;
      }

// Loop through the filtered jobs and display them
      jobs.forEach(job => {
        const jobCard = document.createElement('div');
        jobCard.classList.add('job-card');

jobCard.innerHTML = `
          <div class="job-title">${job.title}</div>
          <div class="company-name">${job.company}</div>
          <div class="description">${job.description}</div>
          <button class="apply-button">Apply Now</button>
        `;

// Append the job card to the results container
        jobResults.appendChild(jobCard);
      });
    }

// Initialize the app by displaying all jobs
    displayJobs(jobListings);
  </script>
</body>
</html>

Steps to Run the Job Search App Locally on Your Computer

1. Prepare Your Files:

Copy the HTML Code: Copy the HTML code provided (e.g., job-search-app) into a text editor.
Open a Text Editor: You can use any text editor like Notepad, Visual Studio Code, Sublime Text, etc.
Paste the HTML Code: Paste the HTML code into your editor.
Save the File: Save the file with the .html extension. For example, name it job-search-app.html.

2. Open the File in a Web Browser:

Locate the File: After saving the file, navigate to the directory where you saved it.
Open the File: Double-click on the saved .html file, and it will open in your default web browser (such as Google Chrome, Mozilla Firefox, Edge, etc.).

3. Interact with the App:

Use the Search Bar: Enter a job title or company name into the search field and click the Search button.
Use Filters: You can filter the results by Full-time, Part-time, or Remote job types.
View Results: The filtered job listings will appear below the search bar as per your input.

Alternative Method: Running the App Using a Local Web Server

For a more complex project setup, you might want to simulate a production environment or interact with APIs using a local web server. Here’s how you can do that:

1. Install a Local Server:

Use XAMPP (for Apache and MySQL): Download and install XAMPP, which comes with Apache (for serving your app) and MySQL (if you plan to use a database).
Use Live Server in Visual Studio Code: Download and install Visual Studio Code. Open Visual Studio Code, then go to the Extensions tab and search for Live Server. Install the Live Server extension.

2. Open Your App in Visual Studio Code Using Live Server:

Open Your HTML File: Open the job-search-app.html file in Visual Studio Code.
Right-click to Open with Live Server: Right-click on the HTML file and select Open with Live Server. This will open your app in the default web browser.
Live Interaction: You can now make live changes to the app (e.g., modify the HTML, CSS, or JavaScript) and see them reflected in real-time in your browser.

Running the App on the Web:

If you want to share your app with others or make it publicly accessible online, you can host it on a web hosting platform.

1. Host on GitHub Pages:

Create a GitHub Account: Go to GitHub and sign up for an account.
Create a New Repository: After logging in to GitHub, click on the New Repository button. Name it something like job-search-app.
Upload Your Files: Upload the HTML file (and any related files, like CSS or JavaScript) to the repository.
Enable GitHub Pages: Go to the repository’s settings. Scroll down to the GitHub Pages section. Select the main branch as the source (or the folder containing your files). Save the settings.
Access Your App: Once the changes are saved, your app will be live. The URL will be https://your-username.github.io/repository-name. For example: https://johnDoe.github.io/job-search-app.

2. Host on Other Platforms (Netlify, Vercel, etc.):

Netlify: Go to Netlify and sign up. Upload your project files to Netlify. After uploading, Netlify will provide you with a URL where your app is hosted.
Vercel: Visit Vercel, create an account, and link it with your GitHub repository. Deploy the project directly from the repository to get a live URL.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Voting System</title>

/* Styling for the container that holds the voting options */
    .container {
      width: 100%; /* Takes the full width of the screen */
      max-width: 600px; /* Limits the width to 600px */
      background-color: white; /* White background for the container */
      padding: 20px; /* Adds padding inside the container */
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Adds shadow for a card-like effect */
      border-radius: 10px; /* Rounds the corners */
    }

/* Styling for the title */
    h1 {
      text-align: center; /* Centers the title */
      font-size: 24px; /* Sets the font size */
      margin-bottom: 20px; /* Adds space below the title */
    }

/* Styling for each voting option */
    .vote-option {
      display: flex; /* Aligns the text and button horizontally */
      justify-content: space-between; /* Spreads out the text and button */
      align-items: center; /* Centers the content vertically */
      margin-bottom: 10px; /* Adds space below each option */
      background-color: #f9f9f9; /* Light gray background for each option */
      padding: 10px; /* Adds padding inside each option */
      border-radius: 5px; /* Rounds the corners of each option */
    }

/* Button styling for voting */
    .vote-button {
      background-color: #4CAF50; /* Green background */
      color: white; /* White text color */
      border: none; /* Removes the border */
      padding: 10px 20px; /* Adds padding inside the button */
      font-size: 16px; /* Sets the font size */
      cursor: pointer; /* Changes the cursor to a pointer on hover */
      border-radius: 5px; /* Rounds the corners of the button */
    }

/* Changes button color on hover */
    .vote-button:hover {
      background-color: #45a049; /* Darker green when hovering */
    }

/* Styling for displaying the result counts */
    .result {
      font-size: 18px; /* Sets the font size */
      color: #333; /* Dark text color */
    }

/* Styling for the results section */
    .results {
      margin-top: 30px; /* Adds space above the results section */
      background-color: #f9f9f9; /* Light gray background */
      padding: 15px; /* Adds padding inside the results section */
      border-radius: 5px; /* Rounds the corners */
    }

/* Styling for the result header */
    .results h2 {
      text-align: center; /* Centers the results header */
      font-size: 22px; /* Sets the font size */
      margin-bottom: 20px; /* Adds space below the header */
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Vote for Your Favorite Option</h1>

<div class="vote-option">
      <span>Option 1</span> 
      <button class="vote-button" onclick="vote(1)">Vote</button> 
      <span class="result" id="result-1">0 votes</span> 
    </div>

<div class="vote-option">
      <span>Option 2</span> 
      <button class="vote-button" onclick="vote(2)">Vote</button> 
      <span class="result" id="result-2">0 votes</span> 
    </div>

<div class="vote-option">
      <span>Option 3</span> 
      <button class="vote-button" onclick="vote(3)">Vote</button> 
      <span class="result" id="result-3">0 votes</span> 
    </div>

<div class="results">
      <h2>Vote Results</h2>
      <p id="result-message">No votes yet</p> 
    </div>
  </div>

<script>
    // Initialize vote counts for each option
    let votes = {
      1: 0,
      2: 0,
      3: 0
    };

// Function to handle voting
    function vote(option) {
      // Increment the vote for the selected option
      votes[option]++;

// Update the result display for the selected option
      document.getElementById(`result-${option}`).textContent = `${votes[option]} votes`;

// Update the result message with the current top option
      updateResults();
    }

// Function to update the results display
    function updateResults() {
      // Find the option with the maximum votes
      let maxVotes = Math.max(votes[1], votes[2], votes[3]);
      let winningOption = '';

// Determine which option has the highest vote count
      if (votes[1] === maxVotes) {
        winningOption = 'Option 1';
      } else if (votes[2] === maxVotes) {
        winningOption = 'Option 2';
      } else if (votes[3] === maxVotes) {
        winningOption = 'Option 3';
      }

// Display the result message with the leading option
      if (maxVotes > 0) {
        document.getElementById('result-message').textContent = `${winningOption} is currently winning with ${maxVotes} votes.`;
      } else {
        document.getElementById('result-message').textContent = 'No votes yet';
      }
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Code Viewer with Run & Debug</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #f4f4f4;
        }

h1 {
            text-align: center;
            margin-bottom: 20px;
        }

.container {
            width: 90%;
            max-width: 1200px;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

.editors {
            display: flex;
            gap: 20px;
            justify-content: space-between;
        }

.editor {
            flex: 1;
            border: 1px solid #ccc;
            padding: 10px;
            box-sizing: border-box;
            border-radius: 5px;
            background-color: #fff;
            font-family: monospace;
            font-size: 14px;
        }

textarea {
            width: 100%;
            height: 300px;
            border: none;
            resize: none;
            outline: none;
            font-family: monospace;
            font-size: 14px;
        }

.preview {
            width: 100%;
            min-height: 300px;
            border: 1px solid #ccc;
            padding: 10px;
            box-sizing: border-box;
            border-radius: 5px;
            background-color: #fff;
            overflow: auto;
            margin-top: 20px;
        }

.buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 10px;
        }

button {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }

.run-btn {
            background-color: #4CAF50;
            color: white;
        }

.debug-btn {
            background-color: #FF5722;
            color: white;
        }

.editor:focus, .preview:focus {
            border-color: #4CAF50;
        }
    </style>
</head>
<body>
<br/> <br/>
    <h1>HTML, CSS, and JavaScript Code Viewer</h1>
    <div class="container">
        <div class="editors">
            <div class="editor">
                <h3>HTML Code</h3>
                <textarea id="html-code" placeholder="Write your HTML here..."></textarea>
            </div>
            <div class="editor">
                <h3>CSS Code</h3>
                <textarea id="css-code" placeholder="Write your CSS here..."></textarea>
            </div>
            <div class="editor">
                <h3>JavaScript Code</h3>
                <textarea id="js-code" placeholder="Write your JavaScript here..."></textarea>
            </div>
        </div>

<div class="buttons">
            <button class="run-btn" id="run-btn">Run</button>
            <button class="debug-btn" id="debug-btn">Debug</button>
        </div>

function updatePreview() {
            const html = htmlCode.value;
            const css = cssCode.value;
            const js = jsCode.value;

htmlCode.addEventListener('input', updatePreview);
        cssCode.addEventListener('input', updatePreview);
        jsCode.addEventListener('input', updatePreview);

function runCode() {
            const html = htmlCode.value;
            const css = cssCode.value;
            const js = jsCode.value;

function debugCode() {
            const html = htmlCode.value;
            const css = cssCode.value;
            const js = jsCode.value;

console.clear();
            console.log("HTML Code:");
            console.log(html);
            console.log("CSS Code:");
            console.log(css);
            console.log("JavaScript Code:");
            console.log(js);

try {
                const iframeDoc = preview.contentDocument || preview.contentWindow.document;
                iframeDoc.open();
                iframeDoc.write(`
                    <!DOCTYPE html>
                    <html lang="en">
                    <head>
                        <meta charset="UTF-8">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <title>Preview</title>
                        <style>${css}</style>
                    </head>
                    <body>
                        ${html}
                        <script>${js}</script>
                    </body>
                    </html>
                `);
                iframeDoc.close();
            } catch (error) {
                console.error("Error running the code:", error);
            }
        }

runBtn.addEventListener('click', runCode);
        debugBtn.addEventListener('click', debugCode);

updatePreview();
    </script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Personal Finance Tracker</title>

/* Container for the tracker */
    .tracker {
      background: #fff;
      max-width: 500px;
      margin: auto;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }

/* Heading style */
    h2 {
      text-align: center;
      color: #333;
    }

/* Style for balance section */
    .balance {
      text-align: center;
      font-size: 24px;
      margin: 20px 0;
    }

/* Style for the transaction form */
    form {
      display: flex;
      flex-direction: column;
    }

label {
      margin: 5px 0;
    }

input, select {
      padding: 10px;
      margin-bottom: 15px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

button {
      padding: 10px;
      background-color: #28a745; /* Green button */
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

button:hover {
      background-color: #218838;
    }

/* Style for transaction list */
    ul {
      list-style-type: none;
      padding: 0;
    }

li {
      background: #eee;
      margin: 5px 0;
      padding: 10px;
      border-left: 5px solid #ccc;
      display: flex;
      justify-content: space-between;
    }

li.income {
      border-color: #28a745;
    }

li.expense {
      border-color: #dc3545;
    }

.delete-btn {
      background: transparent;
      color: red;
      border: none;
      cursor: pointer;
      font-size: 16px;
    }
  </style>
</head>
<body>

<div class="tracker">
    <h2>Personal Finance Tracker</h2>

<div class="balance" id="balance">$0.00</div>

<form id="transaction-form">
      <label for="type">Type</label>
      <select id="type">
        <option value="income">Income</option>
        <option value="expense">Expense</option>
      </select>

<label for="description">Description</label>
      <input type="text" id="description" placeholder="Enter description" required>

<label for="amount">Amount</label>
      <input type="number" id="amount" placeholder="Enter amount" required>

<button type="submit">Add Transaction</button>
    </form>

<ul id="transaction-list"></ul>
  </div>

// Array to store all transactions
    let transactions = [];

// Function to update the balance
    function updateBalance() {
      let balance = 0;

// Calculate balance by summing income and subtracting expenses
      transactions.forEach(tx => {
        balance += tx.type === 'income' ? tx.amount : -tx.amount;
      });

// Update the balance text
      balanceDisplay.textContent = `$${balance.toFixed(2)}`;
    }

// Function to render all transactions to the UI
    function renderTransactions() {
      // Clear the current list
      list.innerHTML = '';

// Loop through transactions and display each one
      transactions.forEach((tx, index) => {
        const li = document.createElement('li');
        li.classList.add(tx.type); // Apply class for income or expense

li.innerHTML = `
          ${tx.description} - $${tx.amount.toFixed(2)}
          <button class="delete-btn" onclick="deleteTransaction(${index})">x</button>
        `;

list.appendChild(li); // Add the item to the list
      });
    }

// Function to delete a transaction by index
    function deleteTransaction(index) {
      transactions.splice(index, 1); // Remove transaction from array
      updateBalance();              // Recalculate balance
      renderTransactions();         // Re-render UI
    }

// Event listener for form submission
    form.addEventListener('submit', function (e) {
      e.preventDefault(); // Prevent page reload

const type = typeInput.value;
      const description = descInput.value;
      const amount = parseFloat(amountInput.value);

if (!description || isNaN(amount)) return; // Simple validation

// Create transaction object
      const transaction = {
        type,
        description,
        amount
      };

// Add transaction to array
      transactions.push(transaction);

// Update UI
      updateBalance();
      renderTransactions();

// Clear form
      descInput.value = '';
      amountInput.value = '';
    });
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  <title>Code Snippet Manager</title> 
  <style>
    body {
      font-family: Arial, sans-serif; /* Use simple font */
      margin: 0; /* Remove default margin */
      padding: 20px; /* Padding around content */
      background-color: #f2f2f2; /* Light background */
    }

.container {
      max-width: 600px; /* Limit width */
      margin: auto; /* Center horizontally */
      background-color: white; /* White background */
      padding: 20px; /* Inner spacing */
      border-radius: 10px; /* Rounded corners */
      box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Subtle shadow */
    }

h2 {
      text-align: center; /* Center heading */
    }

input, textarea {
      width: 100%; /* Full width */
      margin-bottom: 10px; /* Space between inputs */
      padding: 10px; /* Inner padding */
      border: 1px solid #ccc; /* Border color */
      border-radius: 5px; /* Rounded input */
    }

button {
      padding: 10px 15px; /* Button size */
      margin-right: 10px; /* Space between buttons */
      border: none; /* No border */
      border-radius: 5px; /* Rounded corners */
      cursor: pointer; /* Hand cursor */
    }

.add-btn {
      background-color: #4CAF50; /* Green background */
      color: white; /* White text */
    }

.copy-btn {
      background-color: #2196F3; /* Blue */
      color: white;
    }

.delete-btn {
      background-color: #f44336; /* Red */
      color: white;
    }

.snippet {
      background-color: #f9f9f9; /* Light gray background */
      border: 1px solid #ddd; /* Light border */
      padding: 15px; /* Inner padding */
      margin-bottom: 15px; /* Space between snippets */
      border-radius: 5px; /* Rounded corners */
    }

.snippet-title {
      font-weight: bold; /* Make title bold */
      margin-bottom: 5px; /* Space below title */
    }

@media (max-width: 600px) {
      button {
        display: block; /* Stack buttons */
        margin-bottom: 10px; /* Space between */
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>Code Snippet Manager</h2>

<input type="text" id="title" placeholder="Snippet Title" />

<textarea id="code" rows="5" placeholder="Enter your code snippet here..."></textarea>

<button class="add-btn" onclick="addSnippet()">Add Snippet</button>

<div id="snippet-list"></div>
  </div>

// Function to add a new snippet
    function addSnippet() {
      const title = document.getElementById("title").value.trim(); // Get title
      const code = document.getElementById("code").value.trim(); // Get code

if (title === "" || code === "") {
        alert("Please enter both title and code."); // Validate input
        return;
      }

// Create snippet object
      const snippet = { title, code };

// Get current snippets from localStorage
      let snippets = JSON.parse(localStorage.getItem("snippets")) || [];

// Add new snippet
      snippets.push(snippet);

// Save updated snippets
      localStorage.setItem("snippets", JSON.stringify(snippets));

// Clear inputs
      document.getElementById("title").value = "";
      document.getElementById("code").value = "";

// Reload snippet list
      loadSnippets();
    }

// Function to load all snippets
    function loadSnippets() {
      const snippetList = document.getElementById("snippet-list"); // Container
      snippetList.innerHTML = ""; // Clear old content

const snippets = JSON.parse(localStorage.getItem("snippets")) || []; // Get saved snippets

// Loop through each snippet
      snippets.forEach((snippet, index) => {
        // Create snippet div
        const snippetDiv = document.createElement("div");
        snippetDiv.className = "snippet"; // Apply class

// Title
        const titleEl = document.createElement("div");
        titleEl.className = "snippet-title";
        titleEl.innerText = snippet.title;

// Code block
        const codeEl = document.createElement("pre");
        codeEl.innerText = snippet.code;

// Copy button
        const copyBtn = document.createElement("button");
        copyBtn.innerText = "Copy";
        copyBtn.className = "copy-btn";
        copyBtn.onclick = () => {
          navigator.clipboard.writeText(snippet.code); // Copy to clipboard
          alert("Code copied!");
        };

// Delete button
        const deleteBtn = document.createElement("button");
        deleteBtn.innerText = "Delete";
        deleteBtn.className = "delete-btn";
        deleteBtn.onclick = () => {
          deleteSnippet(index); // Call delete
        };

// Append everything
        snippetDiv.appendChild(titleEl);
        snippetDiv.appendChild(codeEl);
        snippetDiv.appendChild(copyBtn);
        snippetDiv.appendChild(deleteBtn);
        snippetList.appendChild(snippetDiv); // Add to list
      });
    }

// Function to delete a snippet
    function deleteSnippet(index) {
      let snippets = JSON.parse(localStorage.getItem("snippets")) || []; // Get snippets
      snippets.splice(index, 1); // Remove selected
      localStorage.setItem("snippets", JSON.stringify(snippets)); // Save back
      loadSnippets(); // Reload list
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
  
  <meta charset="UTF-8">
  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <title>Task Prioritization Tool</title>

<style>
    body {
      font-family: Arial, sans-serif; /* Use clean font */
      background: #f0f4f8; /* Light background */
      margin: 0;
      padding: 0;
    }

header {
      background-color: #1976d2; /* Blue background for header */
      color: white; /* White text */
      padding: 20px;
      text-align: center;
    }

.container {
      max-width: 700px;
      margin: auto;
      padding: 20px;
    }

.task-box {
      background: white;
      padding: 20px;
      border-radius: 8px;
      margin-bottom: 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

input, select, button {
      width: 100%;
      padding: 10px;
      margin-top: 10px;
      border-radius: 5px;
      border: 1px solid #ccc;
      box-sizing: border-box;
    }

button {
      background-color: #1976d2;
      color: white;
      cursor: pointer;
    }

button:hover {
      background-color: #125ea8;
    }

.task-list {
      margin-top: 20px;
    }

.priority-group {
      margin-bottom: 20px;
    }

.priority-group h3 {
      border-bottom: 2px solid #ddd;
      padding-bottom: 5px;
      color: #333;
    }

.task-item {
      background: #fafafa;
      margin: 8px 0;
      padding: 10px;
      border-left: 5px solid;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

.task-item.high {
      border-color: red;
    }

.task-item.medium {
      border-color: orange;
    }

.task-item.low {
      border-color: green;
    }

.task-name {
      flex-grow: 1;
    }

@media (max-width: 600px) {
      .task-item {
        flex-direction: column;
        align-items: flex-start;
      }
    }
  </style>
</head>

<body>
  
  <header>
    <h1>Task Prioritization Tool</h1>
  </header>

<div class="container">

<div class="task-box">
      <h2>Add Task</h2>
      
      <input type="text" id="taskName" placeholder="Task name">
      
      <select id="priority">
        <option value="">Select priority</option>
        <option value="high">High</option>
        <option value="medium">Medium</option>
        <option value="low">Low</option>
      </select>
      
      <button id="addTaskBtn">Add Task</button>
    </div>

<div class="task-list" id="taskList">
      
    </div>
  </div>

<script>
    // Get references to elements
    const taskName = document.getElementById('taskName'); // Input field for task name
    const priority = document.getElementById('priority'); // Dropdown for priority level
    const addTaskBtn = document.getElementById('addTaskBtn'); // Add task button
    const taskList = document.getElementById('taskList'); // Container for task list

// Array to store all tasks
    let tasks = [];

// Function to add a new task
    function addTask() {
      const name = taskName.value.trim(); // Get and trim task name
      const level = priority.value; // Get selected priority

// Validate input
      if (name === '' || level === '') {
        alert('Please enter a task name and select a priority!');
        return;
      }

// Push new task to array
      tasks.push({ name, level });

// Clear inputs
      taskName.value = '';
      priority.value = '';

// Update the UI
      renderTasks();
    }

// Function to remove a task by index
    function deleteTask(index) {
      tasks.splice(index, 1); // Remove from array
      renderTasks(); // Re-render list
    }

// Function to render the tasks
    function renderTasks() {
      // Clear task list HTML
      taskList.innerHTML = '';

// Priorities in display order
      const priorities = ['high', 'medium', 'low'];

// Loop over each priority level
      priorities.forEach(priorityLevel => {
        // Filter tasks by current priority
        const filteredTasks = tasks.filter(task => task.level === priorityLevel);

// If no tasks of this priority, skip
        if (filteredTasks.length === 0) return;

// Create a group section
        const groupDiv = document.createElement('div');
        groupDiv.classList.add('priority-group');

// Create heading for the group
        const heading = document.createElement('h3');
        heading.textContent = priorityLevel.charAt(0).toUpperCase() + priorityLevel.slice(1) + ' Priority';
        groupDiv.appendChild(heading);

// Add each task in the group
        filteredTasks.forEach((task, index) => {
          const taskDiv = document.createElement('div'); // Container for task
          taskDiv.classList.add('task-item', task.level); // Add class based on priority

const nameSpan = document.createElement('span'); // Task name span
          nameSpan.classList.add('task-name');
          nameSpan.textContent = task.name;

const deleteBtn = document.createElement('button'); // Delete button
          deleteBtn.textContent = 'Delete';
          deleteBtn.onclick = () => deleteTask(tasks.indexOf(task)); // Call delete function

// Append elements to task container
          taskDiv.appendChild(nameSpan);
          taskDiv.appendChild(deleteBtn);

// Append task to group
          groupDiv.appendChild(taskDiv);
        });

// Append group to task list
        taskList.appendChild(groupDiv);
      });
    }

// Add click event to the button
    addTaskBtn.addEventListener('click', addTask); // When clicked, call addTask()
  </script>
</body>

</html>

JavaScript

Beginners To Experts

The site is under development.

Javascript Projects

To-Do List App

Weather App

Calculator App

Currency Converter

Contact Book

Recipe Finder

1. Replace the API Key

2. Open It in a Browser

3. (Optional) Fix CORS Issue

Option A (Quick Dev Workaround):

Option B (Advanced/Recommended):

Chat Application

Note-taking App

Movie Search App

To Run the Movie Search App, Follow These Simple Steps:

Step-by-Step Guide

1. Get an OMDb API Key

2. Create an HTML File

3. Insert Your API Key

4. Open in Browser

Notes

Blog Website

Personal Portfolio

Markdown Previewer

Task Manager

Quiz App

Quiz Features

Reset Button:

Beep Sound:

Timer:

Music Player

Pomodoro Timer

Memory Game

Task Tracker

Expense Tracker

Flashcards App

Time Converter

File Upload App

Image Gallery App

Text-based Adventure Game

Simple E-commerce Store

Calendar App

Survey Form

News App

Important Notes

Weather App

Important Instructions

GitHub Finder

Invoice Generator App

Shopping Cart

Joke Generator

Number Guessing Game

URL Shortener app

Movie Booking App

Calculator with History

Instagram Clone App

Twitter Clone

YouTube Clone

Social Media Feed

Viewer App

Persistent View Count Across Reloads

Option 1: localStorage (Client-Side Only)

Option 2: Server-Side View Tracking (Recommended)

Summary

Result

Viewer Count Demo

Step-by-Step Guide (Fully Explained)

1. Create a Firebase Project

2. Add Firebase to Your Website

3. HTML Page with Items to Track Views

4. JavaScript to Handle Viewing and Count Update

5. Allow Public Read/Write Access (for test/demo only)

Product Review App

Flash Light

Polling App

Habit Tracker App