Category: Projects

Live Search Filter

Concepts Used: keyup(), filtering elements

Features:

Search through a list dynamically

<!DOCTYPE html>
<html>
<head>
  <title>Live Search</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <h2>Live Search Filter</h2>
  <input type="text" id="search" placeholder="Search...">
  <ul id="list">
&lt;li&gt;Apple&lt;/li&gt;
&lt;li&gt;Banana&lt;/li&gt;
&lt;li&gt;Orange&lt;/li&gt;
&lt;li&gt;Mango&lt;/li&gt;
&lt;li&gt;Grapes&lt;/li&gt;  </ul>

  <script>
$(document).ready(function(){
  $("#search").keyup(function(){
    let value = $(this).val().toLowerCase();
    $("#list li").filter(function(){
      $(this).toggle($(this).text().toLowerCase().indexOf(value) &gt; -1);
    });
  });
});  </script>
</body>
</html>

Explanation:

.keyup() detects input changes.
.filter() checks list items dynamically.

August 21, 2025

Light/Dark Mode Switch

Concepts Used: toggleClass()

Features:

Switch page between light & dark theme

<!DOCTYPE html>
<html>
<head>
  <title>Dark Mode Toggle</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
body { transition: 0.5s; }
.dark { background: black; color: white; }  </style>
</head>
<body>
  <h2>Dark Mode Example</h2>
  <button id="toggle">Toggle Dark Mode</button>

  <script>
$(document).ready(function(){
  $("#toggle").click(function(){
    $("body").toggleClass("dark");
  });
});  </script>
</body>
</html>

Explanation:

.toggleClass() switches between normal and dark theme.

August 21, 2025

Weather App (API + jQuery AJAX)

Concepts Used: $.ajax(), API call

Features:

Get weather by city using OpenWeatherMap API (free key required).

<!DOCTYPE html>
<html>
<head>
  <title>Weather App</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <h2>Weather App</h2>
  <input type="text" id="city" placeholder="Enter City">
  <button id="getWeather">Get Weather</button>
  <p id="weather"></p>

  <script>
$(document).ready(function(){
  $("#getWeather").click(function(){
    let city = $("#city").val();
    let apiKey = "YOUR_API_KEY"; // &lt;-- Replace with your OpenWeatherMap key
    $.ajax({
      url: https://api.openweathermap.org/data/2.5/weather?q=${city}&amp;amp;appid=${apiKey}&amp;amp;units=metric,
      method: "GET",
      success: function(data){
        $("#weather").text(Temperature: ${data.main.temp}°C, ${data.weather&amp;#91;0].description});
      },
      error: function(){
        $("#weather").text("City not found!");
      }
    });
  });
});  </script>
</body>
</html>

Explanation:

Uses $.ajax() to fetch weather JSON data.
Displays temperature & description dynamically.

August 21, 2025

Drag & Drop Boxes

Concepts Used: jQuery UI (draggable, droppable)

Features:

Drag a box and drop into target

<!DOCTYPE html>
<html>
<head>
  <title>Drag Drop Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
  <style>
#drag { width: 100px; height: 100px; background: skyblue; margin: 20px; }
#drop { width: 150px; height: 150px; background: lightgray; margin: 20px; }  </style>
</head>
<body>
  <h2>Drag and Drop</h2>
  <div id="drag">Drag Me</div>
  <div id="drop">Drop Here</div>

  <script>
$(document).ready(function(){
  $("#drag").draggable();
  $("#drop").droppable({
    drop: function(event, ui){
      $(this).css("background","lightgreen").text("Dropped!");
    }
  });
});  </script>
</body>
</html>

Explanation:

draggable() makes item movable.
droppable() detects drop event.

August 21, 2025

Calculator

Concepts Used: Event handling, DOM manipulation

Features:

Basic calculator with +, -, ×, ÷

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Calculator</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
#calc { width: 200px; margin: 20px; }
button { width: 45px; height: 45px; margin: 2px; }
#result { width: 185px; height: 40px; margin-bottom: 10px; text-align: right; font-size: 18px; }  </style>
</head>
<body>
  <h2>Calculator</h2>
  <div id="calc">
&lt;input type="text" id="result" readonly&gt;&lt;br&gt;
&lt;button class="btn"&gt;7&lt;/button&gt;
&lt;button class="btn"&gt;8&lt;/button&gt;
&lt;button class="btn"&gt;9&lt;/button&gt;
&lt;button class="btn"&gt;/&lt;/button&gt;&lt;br&gt;
&lt;button class="btn"&gt;4&lt;/button&gt;
&lt;button class="btn"&gt;5&lt;/button&gt;
&lt;button class="btn"&gt;6&lt;/button&gt;
&lt;button class="btn"&gt;*&lt;/button&gt;&lt;br&gt;
&lt;button class="btn"&gt;1&lt;/button&gt;
&lt;button class="btn"&gt;2&lt;/button&gt;
&lt;button class="btn"&gt;3&lt;/button&gt;
&lt;button class="btn"&gt;-&lt;/button&gt;&lt;br&gt;
&lt;button class="btn"&gt;0&lt;/button&gt;
&lt;button class="btn"&gt;.&lt;/button&gt;
&lt;button class="btn"&gt;=&lt;/button&gt;
&lt;button class="btn"&gt;+&lt;/button&gt;  </div>

  <script>
$(document).ready(function(){
  let input = "";
  $(".btn").click(function(){
    let val = $(this).text();
    if(val === "="){
      try {
        input = eval(input).toString();
      } catch {
        input = "Error";
      }
    } else {
      input += val;
    }
    $("#result").val(input);
  });
});  </script>
</body>
</html>

Explanation:

Stores expression as string.
eval() evaluates input (simple demo).
Updates display with .val().

August 21, 2025

Digital Clock

Concepts Used: setInterval(), DOM update

Features:

Shows live time updating every second

<!DOCTYPE html>
<html>
<head>
  <title>Digital Clock</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
#clock { font-size: 40px; font-weight: bold; margin: 20px; }  </style>
</head>
<body>
  <h2>Digital Clock</h2>
  <div id="clock"></div>

  <script>
$(document).ready(function(){
  function updateClock(){
    let now = new Date();
    let time = now.toLocaleTimeString();
    $("#clock").text(time);
  }
  setInterval(updateClock, 1000);
  updateClock();
});  </script>
</body>
</html>

Explanation:

setInterval() updates every second.
.text() replaces content with the current time.

August 21, 2025

FAQ Accordion

Concepts Used: SlideToggle, event handling

Features:

Click a question → answer expands/collapses

<!DOCTYPE html>
<html>
<head>
  <title>FAQ Accordion</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
.question { cursor: pointer; font-weight: bold; margin: 10px 0; }
.answer { display: none; margin-left: 20px; }  </style>
</head>
<body>
  <h2>FAQ</h2>
  <div class="question">What is jQuery?</div>
  <div class="answer">jQuery is a JavaScript library for DOM manipulation.</div>

  <div class="question">Why use jQuery?</div>
  <div class="answer">It simplifies JavaScript code and works across browsers.</div>

  <script>
$(document).ready(function(){
  $(".question").click(function(){
    $(this).next(".answer").slideToggle();
  });
});  </script>
</body>
</html>

Explanation:

.slideToggle() smoothly shows/hides answers.
.next() selects the answer related to the clicked question.

August 21, 2025

Form Validation

Concepts Used: Events, Regex, DOM manipulation

Features:

Checks empty input
Validates email format
Shows error messages

<!DOCTYPE html>
<html>
<head>
  <title>Form Validation</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <h2>Register Form</h2>
  <form id="myForm">
&lt;input type="text" id="name" placeholder="Enter Name"&gt;&lt;br&gt;&lt;br&gt;
&lt;input type="email" id="email" placeholder="Enter Email"&gt;&lt;br&gt;&lt;br&gt;
&lt;button type="submit"&gt;Submit&lt;/button&gt;  </form>
  <p id="msg"></p>

  <script>
$(document).ready(function(){
  $("#myForm").submit(function(e){
    e.preventDefault();
    let name = $("#name").val().trim();
    let email = $("#email").val().trim();
    let emailPattern = /^&#91;^ ]+@&#91;^ ]+\.&#91;a-z]{2,3}$/;
    if(name === ""){
      $("#msg").text("Name is required").css("color","red");
    } 
    else if(!email.match(emailPattern)){
      $("#msg").text("Invalid Email").css("color","red");
    } 
    else {
      $("#msg").text("Form Submitted Successfully!").css("color","green");
    }
  });
});  </script>
</body>
</html>

Explanation:

.submit() handles form submission.
Regex checks email format.
.text() and .css() display validation messages dynamically.

August 21, 2025

Image Slider

Concepts Used: show/hide, animations, selectors

Features:

Next/Prev buttons
Auto slideshow

<!DOCTYPE html>
<html>
<head>
  <title>Image Slider</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
#slider { width: 400px; height: 250px; overflow: hidden; position: relative; }
#slider img { width: 400px; height: 250px; display: none; }
#slider img:first-child { display: block; }
.btn { cursor: pointer; margin: 5px; padding: 5px 10px; background: black; color: white; }  </style>
</head>
<body>
  <h2>Image Slider</h2>
  <div id="slider">
&lt;img src="https://via.placeholder.com/400x250/ff7f7f" /&gt;
&lt;img src="https://via.placeholder.com/400x250/7f7fff" /&gt;
&lt;img src="https://via.placeholder.com/400x250/7fff7f" /&gt;  </div>
  <button id="prev" class="btn">Prev</button>
  <button id="next" class="btn">Next</button>

  <script>
$(document).ready(function(){
  let index = 0;
  let images = $("#slider img");
  let total = images.length;
  function showImage(i){
    images.hide();
    images.eq(i).fadeIn();
  }
  $("#next").click(function(){
    index = (index + 1) % total;
    showImage(index);
  });
  $("#prev").click(function(){
    index = (index - 1 + total) % total;
    showImage(index);
  });
  // Auto Slide
  setInterval(function(){
    $("#next").click();
  }, 3000);
});  </script>
</body>
</html>

Explanation:

.eq(index) selects image by index.
.fadeIn() creates a smooth transition.
setInterval() automatically cycles through images.

August 21, 2025

To-Do List App

Concepts Used: DOM manipulation, event handling, selectors

Features:

Add tasks
Mark tasks as completed
Delete tasks

<!DOCTYPE html>
<html>
<head>
  <title>To-Do List</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
.done { text-decoration: line-through; color: gray; }  </style>
</head>
<body>
  <h2>My To-Do List</h2>
  <input type="text" id="taskInput" placeholder="Enter task">
  <button id="addBtn">Add Task</button>
  <ul id="taskList"></ul>

  <script>
$(document).ready(function(){
  // Add new task
  $("#addBtn").click(function(){
    let task = $("#taskInput").val();
    if(task !== ""){
      $("#taskList").append("&lt;li&gt;" + task + " &lt;button class='delete'&gt;X&lt;/button&gt;&lt;/li&gt;");
      $("#taskInput").val("");
    }
  });
  // Mark task as done
  $(document).on("click", "li", function(){
    $(this).toggleClass("done");
  });
  // Delete task
  $(document).on("click", ".delete", function(e){
    e.stopPropagation();
    $(this).parent().remove();
  });
});  </script>
</body>
</html>

Explanation:

Uses .append() to add tasks dynamically.
.toggleClass() lets us mark tasks complete.
.on() handles dynamically created elements

August 21, 2025