Q9. Demonstrate the Use of JSON in a Website

Question 9:
Design a website demonstrating the use of JSON.

JSON (JavaScript Object Notation) is a lightweight format for storing and exchanging data.
It is widely used for:

Storing structured data (students, products, etc.)
API responses (news, weather, etc.)
Configuration files
Client ↔ Server communication

Example 1: Student Data Website using JSON

File Name: students.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>JSON Student Data</title>
    <!-- Bootstrap 5 -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="students.css" />
  </head>
 
  <body>
    <!-- Hero Section -->
    <header class="hero-section text-white text-center py-5">
      <div class="container">
        <h1 class="display-4 fw-bold">Student Directory</h1>
        <p class="lead">
          Demonstrating <strong>JSON</strong> in a Website
        </p>
      </div>
    </header>
 
    <!-- Student Cards -->
    <main class="container my-5" style="min-height: 550px;">
      <div id="studentList" class="row g-4"></div>
    </main>
 
    <!-- Footer -->
    <footer class="bg-dark text-white text-center py-3">
      <p class="mb-0">
        © 2025 Designed by <strong>Ansari Intesab</strong>
      </p>
    </footer>
 
    <script>
      // Sample JSON Data
      const students = [
        {
          id: 1,
          name: 'Intesab Ansari',
          course: 'MCA',
          year: '2025',
        },
        { id: 2, name: 'Aditya Rane', course: 'MCA', year: '2025' },
        { id: 3, name: 'Pawan Jadhav', course: 'MCA', year: '2025' },
        { id: 4, name: 'Ayesha Khan', course: 'MBA', year: '2024' },
        {
          id: 5,
          name: 'Rahul Sharma',
          course: 'B.Tech',
          year: '2026',
        },
      ];
 
      // Render JSON data into Bootstrap cards
      const container = document.getElementById('studentList');
      students.forEach((s) => {
        container.innerHTML += `
        <div class="col-md-4">
          <div class="card student-card shadow-lg h-100 border-0">
            <div class="card-body text-center">
              <div class="avatar bg-dark mb-3">${s.name.charAt(0)}</div>
              <h5 class="card-title fw-bold">${s.name}</h5>
              <p class="card-text mb-1">📚 ${s.course}</p>
              <p class="card-text">🎓 Year: ${s.year}</p>
              <span class="badge bg-primary">ID: ${s.id}</span>
            </div>
          </div>
        </div>
      `;
      });
    </script>
  </body>
</html>

File Name: students.css


/* General font */
body {
  font-family: "Poppins", sans-serif;
  background: #f8f9fa;
}
 
/* Hero section with gradient */
.hero-section {
  background: linear-gradient(135deg, #2575fc, #6a11cb);
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
 
/* Student cards */
.student-card {
  border-radius: 15px;
  transition: all 0.3s ease;
}
 
.student-card:hover {
  transform: translateY(-8px);
  box-shadow: 0px 15px 35px rgba(0, 0, 0, 0.2);
}
 
/* Avatar circle */
.avatar {
  width: 70px;
  height: 70px;
  line-height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
/* Card text */
.card-title {
  color: #333;
}
 
.card-text {
  color: #555;
}
 
/* Footer */
footer {
  background: #111;
  font-size: 14px;
}

Output Preview : Students Website

Displays student details from static JSON
Link

Example 2: JSON in NewsHub Project

In the NewsHub App (built using Node.js + Express + Bootstrap),
we already use JSON in two ways:

API Response:
We fetch latest news from NewsAPI which returns data in JSON format.

Fallback Local JSON Files:
If API is down or empty, we load JSON files stored in data/ folder, like:

data/technology.json


{
  "status": "ok",
  "totalResults": 2,
  "articles": [
    {
      "title": "AI Revolution in 2025",
      "author": "Tech Magazine",
      "url": "https://example.com/ai",
      "urlToImage": "/img/placeholder.png",
      "publishedAt": "2025-09-08T10:00:00Z"
    },
    {
      "title": "Next.js 15 Released",
      "author": "Web Dev Weekly",
      "url": "https://example.com/nextjs",
      "urlToImage": "/img/placeholder.png",
      "publishedAt": "2025-09-08T12:00:00Z"
    }
  ]
}

This JSON is parsed and rendered dynamically into Bootstrap cards.

Preview of : `NewsHub`

Loads articles from API (JSON) or fallback JSON files

News Website

Conclusion:
JSON is a versatile data format used in almost every modern website and app.
It makes data easy to read, transfer, and render dynamically in websites.

Q9. Demonstrate the Use of JSON in a Website

Example 1: Student Data Website using JSON

Output Preview : Students Website

Example 2: JSON in NewsHub Project

Preview of : NewsHub

Preview of : `NewsHub`