From 3dcb8d1238a994f8a9dfb1c3d68d1f5a654d1fbb Mon Sep 17 00:00:00 2001 From: AnshNikhare <145345576+AnshNikhare@users.noreply.github.com> Date: Wed, 14 Aug 2024 18:53:16 +0530 Subject: [PATCH 1/2] Create index.html --- .../Github Project Showcasing/index.html | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 30_days_of_javascript/Github Project Showcasing/index.html diff --git a/30_days_of_javascript/Github Project Showcasing/index.html b/30_days_of_javascript/Github Project Showcasing/index.html new file mode 100644 index 0000000..8cfd2be --- /dev/null +++ b/30_days_of_javascript/Github Project Showcasing/index.html @@ -0,0 +1,24 @@ + + + + + + 30 Days Dev Challenge - Project Showcase + + + +
+

30 Days Dev Challenge - Project Showcase

+
+ + +
+
+
+ + + + From fda07dd7431734975e05ad13fba3884e75997f24 Mon Sep 17 00:00:00 2001 From: AnshNikhare <145345576+AnshNikhare@users.noreply.github.com> Date: Wed, 14 Aug 2024 18:55:00 +0530 Subject: [PATCH 2/2] adding css and js file --- .../Github Project Showcasing/main.js | 75 +++++++++++ .../Github Project Showcasing/style.css | 126 ++++++++++++++++++ 2 files changed, 201 insertions(+) create mode 100644 30_days_of_javascript/Github Project Showcasing/main.js create mode 100644 30_days_of_javascript/Github Project Showcasing/style.css diff --git a/30_days_of_javascript/Github Project Showcasing/main.js b/30_days_of_javascript/Github Project Showcasing/main.js new file mode 100644 index 0000000..febdca2 --- /dev/null +++ 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 new file mode 100644 index 0000000..311a691 --- /dev/null +++ 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; + } +}