jitacm · jitacm · Aug 14, 2025 · Aug 14, 2024 · Aug 14, 2024
diff --git a/30_days_of_javascript/Github Project Showcasing/index.html b/30_days_of_javascript/Github Project Showcasing/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>30 Days Dev Challenge - Project Showcase</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="container">
+        <h1>30 Days Dev Challenge - Project Showcase</h1>
+        <div class="controls">
+            <input type="text" id="search" placeholder="Search by title..." oninput="filterProjects()">
+            <select id="sort" onchange="sortProjects()">
+                <option value="newest">Sort by: Newest</option>
+                <option value="oldest">Sort by: Oldest</option>
+            </select>
+        </div>
+        <div id="projects" class="project-list"></div>
+    </div>
+
+    <script src="main.js"></script>
+</body>
+</html>
diff --git a/30_days_of_javascript/Github Project Showcasing/main.js b/30_days_of_javascript/Github Project Showcasing/main.js
@@ -0,0 +1,75 @@
+const repoOwner = 'jitacm';
+const repoName = '-30DaysDevChallenge-';
+let projects = [];
+
+async function fetchProjects() {
+    try {
+        const response = await fetch(`https://api.github.com/repos/${repoOwner}/${repoName}/pulls?state=closed`);
+        projects = await response.json();
+        displayProjects(projects);
+    } catch (error) {
+        console.error('Error fetching projects:', error);
+    }
+}
+
+function displayProjects(projects) {
+    const projectsDiv = document.getElementById('projects');
+    projectsDiv.innerHTML = '';
+
+    projects.forEach(pull => {
+        const projectDiv = document.createElement('div');
+        projectDiv.classList.add('project');
+
+        const title = document.createElement('h2');
+        title.textContent = pull.title;
+
+        const description = document.createElement('p');
+        description.textContent = pull.body.split('\n')[0]; // Display only the first line as description
+
+        const link = document.createElement('a');
+        link.href = pull.html_url;
+        link.textContent = 'View Pull Request';
+
+        // Container for image/video
+        const mediaDiv = document.createElement('div');
+        mediaDiv.classList.add('project-media');
+
+        // Display image or video if present in the body
+        const imageUrl = pull.body.match(/!\[.*\]\((.*)\)/);
+        if (imageUrl) {
+            const image = document.createElement('img');
+            image.src = imageUrl[1];
+            mediaDiv.appendChild(image);
+        }
+
+        projectDiv.appendChild(title);
+        projectDiv.appendChild(mediaDiv);
+        projectDiv.appendChild(description);
+        projectDiv.appendChild(link);
+
+        projectsDiv.appendChild(projectDiv);
+    });
+}
+
+function filterProjects() {
+    const query = document.getElementById('search').value.toLowerCase();
+    const filteredProjects = projects.filter(pull => pull.title.toLowerCase().includes(query));
+    displayProjects(filteredProjects);
+}
+
+function sortProjects() {
+    const sortOrder = document.getElementById('sort').value;
+    let sortedProjects = [...projects];
+
+    if (sortOrder === 'newest') {
+        sortedProjects.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
+    } else {
+        sortedProjects.sort((a, b) => new Date(a.created_at) - new Date(b.created_at));
+    }
+
+    displayProjects(sortedProjects);
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    fetchProjects();
+});
diff --git a/30_days_of_javascript/Github Project Showcasing/style.css b/30_days_of_javascript/Github Project Showcasing/style.css
@@ -0,0 +1,126 @@
+/* CSS File: styles.css */
+
+body {
+    font-family: 'Arial', sans-serif;
+    margin: 0;
+    padding: 0;
+    background: linear-gradient(135deg, #6a11cb, #2575fc) !important; /* Purple gradient */
+    color: #333;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 50px auto;
+    padding: 20px;
+    background-color: #ffffff;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+}
+
+h1 {
+    text-align: center;
+    color: #ffffff;
+    margin-bottom: 30px;
+    font-size: 2rem;
+}
+
+.controls {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+}
+
+#search {
+    width: 60%;
+    padding: 10px;
+    font-size: 16px;
+    border: 1px solid #ced4da;
+    border-radius: 5px;
+}
+
+#sort {
+    padding: 10px;
+    font-size: 16px;
+    border: 1px solid #ced4da;
+    border-radius: 5px;
+}
+
+.project-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 20px;
+}
+
+.project {
+    padding: 20px;
+    border-radius: 8px;
+    background-color: #f8f9fa;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.project:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+.project h2 {
+    margin: 0 0 10px 0;
+    color: #007bff;
+    font-size: 1.5rem;
+}
+
+.project p {
+    margin: 10px 0;
+    font-size: 0.95rem;
+    color: #555;
+}
+
+.project img, .project video {
+    width: 100%;
+    height: 200px;
+    object-fit: cover;
+    border-radius: 5px;
+    margin-top: 10px;
+    display: block;
+}
+
+/* Styling the "View Pull Request" button */
+.project a {
+    display: inline-block;
+    padding: 10px 20px;
+    color: #fff;
+    background-color: #007bff;
+    text-decoration: none;
+    font-weight: bold;
+    font-size: 0.95rem;
+    border-radius: 5px;
+    transition: background-color 0.3s ease, transform 0.3s ease;
+}
+
+.project a:hover {
+    background-color: #0056b3;
+    transform: scale(1.05);
+}
+
+.project-media {
+    margin-top: 10px;
+    text-align: center;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .controls {
+        flex-direction: column;
+    }
+
+    #search, #sort {
+        width: 100%;
+        margin-bottom: 10px;
+    }
+}