Online code editor Build full UI design (professional)

Featured

March 27, 2026 in Projects Explanation

Online code editor Build full UI design (professional)

Your professional online code editor is ready in the canvas.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Code Editor | SOA Technology</title>

<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">

<style>
*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif}
body{background:#0f172a;color:#fff}
header{padding:15px 20px;background:#020617;display:flex;justify-content:space-between;align-items:center}
header h1{font-size:20px}

.container{display:grid;grid-template-columns:1fr 1fr;height:90vh}

.editor-section{display:flex;flex-direction:column;padding:10px;gap:10px}
textarea{flex:1;background:#020617;color:#fff;border:1px solid #1e293b;padding:10px;border-radius:10px;resize:none}

.controls{display:flex;gap:10px}
button{padding:10px 15px;border:none;border-radius:8px;cursor:pointer;font-weight:600}
.run{background:#22c55e;color:#000}
.clear{background:#ef4444;color:#fff}

iframe{width:100%;height:100%;border:none;background:#fff}

.preview-section{position:relative}

/* Ad Placeholder */
.ad-box{position:absolute;bottom:10px;right:10px;background:#fff;color:#000;padding:10px;border-radius:10px;font-size:12px}

@media(max-width:900px){
.container{grid-template-columns:1fr}
}
</style>
</head>

<body>

<header>
<h1>💻 Online Code Editor</h1>
<div class="controls">
<button class="run" onclick="runCode()">Run ▶</button>
<button class="clear" onclick="clearCode()">Clear</button>
</div>
</header>

<div class="container">

<div class="editor-section">
<textarea id="htmlCode" placeholder="Write HTML here..."></textarea>
<textarea id="cssCode" placeholder="Write CSS here..."></textarea>
<textarea id="jsCode" placeholder="Write JavaScript here..."></textarea>
</div>

<div class="preview-section">
<iframe id="output"></iframe>

<!-- AdSense Placeholder -->
<div class="ad-box">Ad Space</div>

</div>

</div>

<script>
function runCode(){
let html=document.getElementById('htmlCode').value;
let css=document.getElementById('cssCode').value;
let js=document.getElementById('jsCode').value;

let output=document.getElementById('output');

output.srcdoc=`
<html>
<style>${css}</style>
<body>
${html}
<script>${js}<\/script>
</body>
</html>`;

// Save code
localStorage.setItem('html',html);
localStorage.setItem('css',css);
localStorage.setItem('js',js);
}

function clearCode(){
document.getElementById('htmlCode').value='';
document.getElementById('cssCode').value='';
document.getElementById('jsCode').value='';
runCode();
}

// Load saved code
window.onload=function(){
document.getElementById('htmlCode').value=localStorage.getItem('html')||'';
document.getElementById('cssCode').value=localStorage.getItem('css')||'';
document.getElementById('jsCode').value=localStorage.getItem('js')||'';
runCode();
}

// Live preview

document.querySelectorAll('textarea').forEach(el=>{
el.addEventListener('input',runCode);
});
</script>

</body>
</html>
🇮🇳 Amazon India 🌍 Amazon Global

March 27, 2026 in Projects Explanation

Online Code Editor (Like CodePen)

👇

💻 Online Code Editor (Like CodePen)

📌 What it is

A web app where users can:

  • Write HTML, CSS, JavaScript
  • Instantly see output in a live preview
  • Just like:
    👉 CodePen
    👉 JSFiddle
🇮🇳 Amazon India 🌍 Amazon Global

⚙️ Core Features (Must Have)

1️⃣ Code Input Areas

You need 3 editors:

  • HTML Editor
  • CSS Editor
  • JavaScript Editor

👉 Simple way:

<textarea id="htmlCode"></textarea>
<textarea id="cssCode"></textarea>
<textarea id="jsCode"></textarea>

2️⃣ Live Preview (iframe)

Use an <iframe> to show output.

<iframe id="output"></iframe>

3️⃣ Run Button ▶️

When user clicks Run, combine all code and show inside iframe.

function runCode() {
  let html = document.getElementById("htmlCode").value;
  let css = document.getElementById("cssCode").value;
  let js = document.getElementById("jsCode").value;  let output = document.getElementById("output");  output.srcdoc = `
    <html>
      <style>${css}</style>
      <body>
        ${html}
        <script>${js}<\/script>
      </body>
    </html>
  `;
}

4️⃣ Clear / Reset Button 🔄

function clearCode() {
  document.getElementById("htmlCode").value = "";
  document.getElementById("cssCode").value = "";
  document.getElementById("jsCode").value = "";
}

🚀 Advanced Features (Portfolio Boost)

⭐ 1. Live Auto Update (No Run Button)

document.querySelectorAll("textarea").forEach(area => {
  area.addEventListener("input", runCode);
});

⭐ 2. Syntax Highlighting (Pro Level)

Use:
👉 Monaco Editor (VS Code engine)

CDN:

<script src="https://unpkg.com/monaco-editor@latest/min/vs/loader.js"></script>

⭐ 3. Save Code (LocalStorage)

localStorage.setItem("html", html);
localStorage.setItem("css", css);
localStorage.setItem("js", js);

Load on refresh:

document.getElementById("htmlCode").value = localStorage.getItem("html") || "";

⭐ 4. Download Code as File

Allow user to download .html file.

⭐ 5. Theme Switch (Dark/Light)

Adds UI polish → important for portfolio

🧠 Skills You Learn

🔹 iframe usage

  • Rendering dynamic content
  • Safe sandbox execution

🔹 DOM Manipulation

  • Handling inputs
  • Updating UI in real-time

🔹 JavaScript Logic

  • String templates
  • Event handling

🔹 Advanced Tools

  • Monaco Editor integration
  • LocalStorage (data persistence)

🏗️ Project Structure

/online-editor
 ├── index.html
 ├── style.css
 └── script.js

🎯 Bonus Ideas (Make it Unique)

  • Split screen layout (like VS Code)
  • Console output panel
  • Auto-save feature
  • Share code via link
  • Multiple tabs (HTML/CSS/JS switch)
🇮🇳 Amazon India 🌍 Amazon Global

March 27, 2026 in Projects Explanation

Full source code (HTML + CSS + JS) Movie Search App

Your full working Movie Search App is ready in the canvas.

Before using it:

<!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>
body {
  font-family: Arial, sans-serif;
  background: #0f172a;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.container {
  text-align: center;
  width: 350px;
}

h1 {
  margin-bottom: 20px;
}

input {
  width: 70%;
  padding: 10px;
  border-radius: 8px;
  border: none;
  outline: none;
}

button {
  padding: 10px 15px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: #22c55e;
  color: white;
}

.card {
  margin-top: 20px;
  background: #1e293b;
  padding: 15px;
  border-radius: 12px;
}

img {
  width: 100%;
  border-radius: 10px;
}

.error {
  color: red;
  margin-top: 10px;
}
</style>
</head>

<body>

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

  <input type="text" id="movieInput" placeholder="Enter movie name">
  <button onclick="searchMovie()">Search</button>

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

<script>
const API_KEY = "YOUR_API_KEY"; // Replace with your OMDB API key

async function searchMovie() {
  const movieName = document.getElementById("movieInput").value;
  const resultDiv = document.getElementById("result");

  if (movieName === "") {
    resultDiv.innerHTML = "<p class='error'>Please enter a movie name</p>";
    return;
  }

  resultDiv.innerHTML = "Loading...";

  try {
    const response = await fetch(`https://www.omdbapi.com/?apikey=${API_KEY}&t=${movieName}`);
    const data = await response.json();

    if (data.Response === "False") {
      resultDiv.innerHTML = `<p class='error'>Movie not found</p>`;
      return;
    }

    resultDiv.innerHTML = `
      <div class="card">
        <img src="${data.Poster}" alt="Poster">
        <h2>${data.Title}</h2>
        <p>⭐ Rating: ${data.imdbRating}</p>
        <p>📅 Release: ${data.Released}</p>
      </div>
    `;
  } catch (error) {
    resultDiv.innerHTML = `<p class='error'>Something went wrong</p>`;
  }
}
</script>

</body>
</html>
🇮🇳 Amazon India 🌍 Amazon Global

March 27, 2026 in Projects Explanation

Movie Search App

📌 What it is:

A Movie Search App is a web application where users can search for movies and instantly get details like poster, rating, and release date using an external API (like OMDB).

It’s a real-world project that shows how websites fetch live data from the internet.

⚙️ Features:

✔️ Search Movie by Name
User enters a movie name → app fetches data dynamically

✔️ Display Movie Details:

  • 🎞️ Poster Image
  • ⭐ IMDb Rating
  • 📅 Release Date
  • 🎬 Movie Title

✔️ Responsive UI
Works smoothly on mobile, tablet, and desktop

✔️ Error Handling

  • Show message if movie not found
  • Handle empty input

🔗 API Used:

OMDB API (Open Movie Database)
👉 Website: http://www.omdbapi.com/

Example API request:

https://www.omdbapi.com/?apikey=YOUR_API_KEY&t=avengers

💻 Basic Working Logic:

  1. User enters movie name
  2. Click search button
  3. JavaScript sends request using fetch()
  4. API returns JSON data
  5. Data is displayed on screen

🧠 Skills Learned:

🔥 Fetch API / AJAX

  • How to get data from server

🔥 Working with APIs

  • Sending requests
  • Handling responses

🔥 JSON Parsing

  • Convert API data into usable format

🔥 Async JavaScript

  • async/await
  • Promises

🔥 DOM Manipulation

  • Show data dynamically

💡 Bonus Features (for Advanced Level):

  • 🔍 Search suggestions (autocomplete)
  • 🎥 Show movie trailer (YouTube API)
  • ❤️ Add to favorites (LocalStorage)
  • 🌙 Dark mode UI
  • 📊 Show multiple results (like Netflix)

🚀 Why This Project is Important:

  • Used in real companies
  • Shows API integration skills
  • Great for portfolio & interviews
  • Beginner → Intermediate level project
🇮🇳 Amazon India 🌍 Amazon Global

March 27, 2026 in Projects Explanation

complete Blog System project (HTML + CSS + JavaScript)

Here’s a complete Blog System project (HTML + CSS + JavaScript) with all basic features:

✅ Create Post
✅ Edit Post
✅ Delete Post
✅ Display Blogs
✅ Search Blog
✅ Uses LocalStorage

💻 Full Source Code

📄 index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Blog System</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>  <div class="container">
    <h1>📝 Blog System</h1>    <!-- Form -->
    <form id="blogForm">
      <input type="text" id="title" placeholder="Enter Title" required>
      <textarea id="content" placeholder="Enter Content" required></textarea>
      <button type="submit">Save Post</button>
    </form>    <!-- Search -->
    <input type="text" id="search" placeholder="Search blog...">    <!-- Blog List -->
    <div id="blogList"></div>
  </div>  <script src="script.js"></script>
</body>
</html>

🎨 style.css

body {
  font-family: Arial;
  background: #f4f4f4;
  margin: 0;
  padding: 20px;
}.container {
  max-width: 700px;
  margin: auto;
  background: white;
  padding: 20px;
  border-radius: 10px;
}h1 {
  text-align: center;
}form input, form textarea {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
}button {
  padding: 10px 15px;
  background: black;
  color: white;
  border: none;
  cursor: pointer;
}.blog {
  border: 1px solid #ddd;
  padding: 10px;
  margin-top: 10px;
  border-radius: 5px;
}.blog h3 {
  margin: 0;
}.actions button {
  margin-right: 5px;
  background: gray;
}

⚙️ script.js

let blogs = JSON.parse(localStorage.getItem("blogs")) || [];
let editIndex = -1;const form = document.getElementById("blogForm");
const blogList = document.getElementById("blogList");
const search = document.getElementById("search");form.addEventListener("submit", function(e) {
  e.preventDefault();  const title = document.getElementById("title").value;
  const content = document.getElementById("content").value;  const blog = { title, content };  if (editIndex === -1) {
    blogs.push(blog);
  } else {
    blogs[editIndex] = blog;
    editIndex = -1;
  }  localStorage.setItem("blogs", JSON.stringify(blogs));
  form.reset();
  displayBlogs();
});function displayBlogs(filter = "") {
  blogList.innerHTML = "";  blogs
    .filter(blog => blog.title.toLowerCase().includes(filter.toLowerCase()))
    .forEach((blog, index) => {
      blogList.innerHTML += `
        <div class="blog">
          <h3>${blog.title}</h3>
          <p>${blog.content}</p>
          <div class="actions">
            <button onclick="editBlog(${index})">Edit</button>
            <button onclick="deleteBlog(${index})">Delete</button>
          </div>
        </div>
      `;
    });
}function deleteBlog(index) {
  blogs.splice(index, 1);
  localStorage.setItem("blogs", JSON.stringify(blogs));
  displayBlogs();
}function editBlog(index) {
  document.getElementById("title").value = blogs[index].title;
  document.getElementById("content").value = blogs[index].content;
  editIndex = index;
}search.addEventListener("input", function() {
  displayBlogs(this.value);
});displayBlogs();
🇮🇳 Amazon India 🌍 Amazon Global

March 27, 2026 in Projects Explanation

complete beginner-friendly Chat App (HTML + CSS + JS)

Here’s a complete beginner-friendly Chat App (HTML + CSS + JS) — no backend, runs in browser. It simulates chat UI with username, left/right messages, and timestamps.

📁 1. index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Chat App</title>
  <link rel="stylesheet" href="style.css">
</head>
<body><div class="chat-container">  <!-- Header -->
  <div class="chat-header">
    💬 Chat Application
  </div>  <!-- Messages -->
  <div id="chatBox" class="chat-box"></div>  <!-- Input -->
  <div class="chat-input">
    <input type="text" id="messageInput" placeholder="Type a message...">
    <button onclick="sendMessage()">Send</button>
  </div></div><script src="script.js"></script>
</body>
</html>

🎨 2. style.css

body {
  font-family: Arial;
  background: #f0f2f5;
  display: flex;
  justify-content: center;
  margin-top: 50px;
}.chat-container {
  width: 350px;
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}.chat-header {
  background: #0084ff;
  color: white;
  padding: 15px;
  text-align: center;
  font-weight: bold;
}.chat-box {
  height: 400px;
  overflow-y: auto;
  padding: 10px;
  background: #e5ddd5;
}.message {
  margin: 10px 0;
  max-width: 70%;
  padding: 10px;
  border-radius: 10px;
  position: relative;
  font-size: 14px;
}.left {
  background: white;
  align-self: flex-start;
}.right {
  background: #dcf8c6;
  margin-left: auto;
}.time {
  font-size: 10px;
  color: gray;
  margin-top: 5px;
  display: block;
}.chat-input {
  display: flex;
  border-top: 1px solid #ccc;
}.chat-input input {
  flex: 1;
  padding: 10px;
  border: none;
  outline: none;
}.chat-input button {
  padding: 10px 15px;
  background: #0084ff;
  color: white;
  border: none;
  cursor: pointer;
}

⚙️ 3. script.js

let username = prompt("Enter your name:");function getTime() {
  let now = new Date();
  let hours = now.getHours();
  let minutes = now.getMinutes();  if (minutes < 10) minutes = "0" + minutes;  return hours + ":" + minutes;
}function sendMessage() {
  let input = document.getElementById("messageInput");
  let message = input.value.trim();  if (message === "") return;  addMessage(username, message, "right");  // Fake reply (for demo)
  setTimeout(() => {
    addMessage("Bot", "Reply to: " + message, "left");
  }, 1000);  input.value = "";
}function addMessage(user, text, side) {
  let chatBox = document.getElementById("chatBox");  let msgDiv = document.createElement("div");
  msgDiv.classList.add("message", side);  msgDiv.innerHTML = `
    <strong>${user}</strong><br>
    ${text}
    <span class="time">${getTime()}</span>
  `;  chatBox.appendChild(msgDiv);  // Auto scroll
  chatBox.scrollTop = chatBox.scrollHeight;
}// Enter key support
document.getElementById("messageInput").addEventListener("keypress", function(e) {
  if (e.key === "Enter") {
    sendMessage();
  }
});

✅ What this project includes:

✔ Username input
✔ Send message
✔ Left/right chat UI
✔ Timestamp
✔ Auto scroll
✔ Enter key support
✔ Demo bot reply

🇮🇳 Amazon India 🌍 Amazon Global

March 27, 2026 in Projects Explanation

Chat Application (Basic to Advanced)

📌 What it is:

A real-time messaging app where users can send and receive messages — similar to a simple version of WhatsApp or Messenger.

⚙️ Core Features (Beginner Level)

1️⃣ Send & Receive Messages

  • User types a message in an input box
  • Click Send button or press Enter
  • Message appears in chat area

👉 Concept used:

  • DOM Manipulation
  • Event Handling (onclick, keypress)

2️⃣ User Name Input

  • Ask user to enter their name before chatting
  • Display name with each message

👉 Example:

Aditya: Hello!
Rahul: Hi!

👉 Concept used:

  • Input handling
  • Variables / State

3️⃣ Chat UI (Left / Right Messages)

  • Messages appear:
    • Right side → current user
    • Left side → other users

👉 Concept used:

  • Conditional rendering
  • CSS styling (flexbox)

4️⃣ Timestamp

  • Show time with each message

👉 Example:

Hello! (10:45 AM)

👉 Concept used:

  • JavaScript Date object

🚀 Advanced Features (Important for Portfolio)

🔥 1️⃣ Real-Time Chat

Use:

  • Firebase (easy)
  • Socket.io (advanced)

👉 Without refresh, messages update instantly

👉 Skills:

  • Real-time database
  • Backend connection

🟢 2️⃣ Online / Offline Status

  • Show if user is active

👉 Example:

Aditya (Online)
Rahul (Offline)

👉 Skills:

  • Presence tracking (Firebase / sockets)

💾 3️⃣ Store Messages (Database)

  • Save chat history

👉 Tools:

  • Firebase Firestore
  • MongoDB (advanced)

📱 4️⃣ Responsive Design

  • Works on mobile & desktop

🧠 Skills Students Will Learn

💡 Frontend:

  • Event handling
  • DOM manipulation
  • UI design

💡 Backend (optional):

  • Real-time communication
  • APIs / Database

💡 Logic:

  • Message handling
  • Dynamic UI rendering

🏗️ Basic Project Structure

chat-app/
│
├── index.html
├── style.css
└── script.js

🔥 Simple Flow

  1. User enters name
  2. Types message
  3. Click send
  4. Message appears in UI
  5. (Advanced → stored & synced in real-time)

💡 Pro Tip (Very Important)

If students build this with:

  • Firebase + Good UI
  • Mobile responsive

👉 This becomes a portfolio-level project that can help in jobs & freelancing

🇮🇳 Amazon India 🌍 Amazon Global

March 27, 2026 in Projects Explanation

E-commerce Product Filter (Full Code)

Here’s a complete working project (HTML + CSS + JS in one file) you can copy and run directly 👇

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>E-commerce Filter</title>
  <style>
    body {
      font-family: Arial;
      margin: 20px;
      background: #f5f5f5;
    }

    h1 {
      text-align: center;
    }

    .controls {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 20px;
      justify-content: center;
    }

    input, select, button {
      padding: 10px;
      font-size: 14px;
    }

    .products {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 15px;
    }

    .product {
      background: white;
      padding: 10px;
      border-radius: 10px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      text-align: center;
    }

    .product img {
      width: 100%;
      height: 150px;
      object-fit: cover;
    }
  </style>
</head>
<body>

<h1>🛒 Product Filter</h1>

<div class="controls">
  <input type="text" id="search" placeholder="Search products...">

  <select id="category">
    <option value="all">All Categories</option>
    <option value="Electronics">Electronics</option>
    <option value="Clothes">Clothes</option>
  </select>

  <select id="sort">
    <option value="">Sort by Price</option>
    <option value="low-high">Low → High</option>
    <option value="high-low">High → Low</option>
  </select>

  <input type="number" id="price" placeholder="Max Price">

</div>

<div class="products" id="product-list"></div>

<script>
const products = [
  {name: "iPhone 13", price: 70000, category: "Electronics", rating: 4.5, image: "https://via.placeholder.com/200"},
  {name: "Samsung TV", price: 40000, category: "Electronics", rating: 4.2, image: "https://via.placeholder.com/200"},
  {name: "Laptop", price: 55000, category: "Electronics", rating: 4.7, image: "https://via.placeholder.com/200"},
  {name: "T-Shirt", price: 999, category: "Clothes", rating: 4.1, image: "https://via.placeholder.com/200"},
  {name: "Jeans", price: 1999, category: "Clothes", rating: 4.3, image: "https://via.placeholder.com/200"},
  {name: "Jacket", price: 2999, category: "Clothes", rating: 4.6, image: "https://via.placeholder.com/200"}
];

// Display Products
function displayProducts(data) {
  const container = document.getElementById("product-list");
  container.innerHTML = "";

  data.forEach(p => {
    container.innerHTML += `
      <div class="product">
        <img src="${p.image}">
        <h3>${p.name}</h3>
        <p>₹${p.price}</p>
        <p>⭐ ${p.rating}</p>
      </div>
    `;
  });
}

// Filter Logic
function filterProducts() {
  let result = [...products];

  const search = document.getElementById("search").value.toLowerCase();
  const category = document.getElementById("category").value;
  const sort = document.getElementById("sort").value;
  const price = document.getElementById("price").value;

  // Search
  if (search) {
    result = result.filter(p => p.name.toLowerCase().includes(search));
  }

  // Category
  if (category !== "all") {
    result = result.filter(p => p.category === category);
  }

  // Price
  if (price) {
    result = result.filter(p => p.price <= price);
  }

  // Sorting
  if (sort === "low-high") {
    result.sort((a, b) => a.price - b.price);
  } else if (sort === "high-low") {
    result.sort((a, b) => b.price - a.price);
  }

  displayProducts(result);
}

// Events
document.getElementById("search").addEventListener("input", filterProducts);
document.getElementById("category").addEventListener("change", filterProducts);
document.getElementById("sort").addEventListener("change", filterProducts);
document.getElementById("price").addEventListener("input", filterProducts);

// Initial Load
displayProducts(products);
</script>

</body>
</html>

🚀 What You Get

  • ✅ Live search filtering
  • ✅ Category filter
  • ✅ Price filter
  • ✅ Sorting
  • ✅ Dynamic UI update (no reload)
🇮🇳 Amazon India 🌍 Amazon Global

March 27, 2026 in Projects Explanation

🛒 E-commerce Product Filter (Full Explanation)

📌 What You Are Building

A shopping UI where users can:

  • View products
  • Filter them instantly
  • Search and sort without reloading the page

👉 Exactly like Amazon / Flipkart product listing page

🧱 Project Structure

1️⃣ Data (Products)

You’ll usually store products in JSON / Array

const products = [
  {
    id: 1,
    name: "iPhone 13",
    price: 70000,
    category: "Electronics",
    rating: 4.5,
    image: "img1.jpg"
  },
  {
    id: 2,
    name: "T-Shirt",
    price: 999,
    category: "Clothes",
    rating: 4.2,
    image: "img2.jpg"
  }
];

2️⃣ UI Layout

  • Search bar 🔍
  • Category buttons 📂
  • Sort dropdown ⬇️
  • Product grid 🛍️

⚙️ Core Features (How it Works)

🔎 1. Search Filter

function searchProducts(keyword) {
  return products.filter(product =>
    product.name.toLowerCase().includes(keyword.toLowerCase())
  );
}

👉 Filters products based on text input

📂 2. Category Filter

function filterByCategory(category) {
  return products.filter(product => product.category === category);
}

👉 Example: Only show “Electronics”

💰 3. Price Filter

function filterByPrice(maxPrice) {
  return products.filter(product => product.price <= maxPrice);
}

⭐ 4. Rating Filter

function filterByRating(minRating) {
  return products.filter(product => product.rating >= minRating);
}

🔃 5. Sorting

function sortProducts(products, order) {
  if (order === "low-high") {
    return products.sort((a, b) => a.price - b.price);
  } else {
    return products.sort((a, b) => b.price - a.price);
  }
}

🔄 6. Dynamic Rendering (MOST IMPORTANT)

function displayProducts(data) {
  const container = document.getElementById("product-list");
  container.innerHTML = "";  data.forEach(product => {
    container.innerHTML += `
      <div class="product">
        <img src="${product.image}" />
        <h3>${product.name}</h3>
        <p>₹${product.price}</p>
        <p>⭐ ${product.rating}</p>
      </div>
    `;
  });
}

👉 This updates UI without page reload

🎯 How Everything Connects

When user interacts:

  • Types → Search runs
  • Clicks category → Filter runs
  • Selects sort → Sorting runs

👉 Combine filters:

let filtered = products;filtered = searchProducts(keyword);
filtered = filterByCategory(category);
filtered = filterByPrice(price);displayProducts(filtered);

🧠 Skills You Demonstrate

This project shows recruiters:

✅ Real-world UI logic
✅ Strong JavaScript fundamentals
✅ Array methods (filter, sort)
✅ DOM manipulation
✅ Event handling
✅ Clean UI updates

🚀 Bonus Features (To Make It 🔥)

Add these to stand out:

  • 🧾 Pagination
  • ❤️ Wishlist (LocalStorage)
  • 🛒 Add to Cart
  • 🌙 Dark Mode
  • 🔥 API products (FakeStore API)

💼 How to Explain in Interview

👉 Say this:

“I built a dynamic product filtering system similar to Amazon where users can filter products by category, price, and rating. I used JavaScript array methods like filter() and sort(), and updated the DOM dynamically without reloading the page.”

🇮🇳 Amazon India 🌍 Amazon Global