fix: cource load
This commit is contained in:
parent
eda7a7c463
commit
a580e3b68f
65
index.html
65
index.html
@ -307,6 +307,71 @@
|
|||||||
<section class="corces-s">
|
<section class="corces-s">
|
||||||
<div class="corces"></div>
|
<div class="corces"></div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
console.log("test");
|
||||||
|
document.addEventListener('DOMContentLoaded', async () => {
|
||||||
|
const allCourses = [];
|
||||||
|
|
||||||
|
const baseUrl = 'https://kodepilot.in/course/index.php';
|
||||||
|
const res = await fetch(baseUrl);
|
||||||
|
const html = await res.text();
|
||||||
|
|
||||||
|
const categoryRegex = /<h3 class="categoryname aabtn"><a href="([^"]+)">([^<]+)<\/a><\/h3>/g;
|
||||||
|
const categories = [];
|
||||||
|
let match;
|
||||||
|
while ((match = categoryRegex.exec(html)) !== null) {
|
||||||
|
categories.push({ url: match[1], name: match[2] });
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const category of categories) {
|
||||||
|
const resCat = await fetch(category.url);
|
||||||
|
const catHtml = await resCat.text();
|
||||||
|
const cleanHtml = catHtml.replace(/\n/g, ' ');
|
||||||
|
|
||||||
|
const courseRegex = /<div class="card dashboard-card [^"]*"[^>]*>.*?<a href="([^"]+)"[^>]*>.*?background-image: url\(([^)]+)\);".*?<span class="sr-only">(.*?)<\/span>.*?<div class="course-category">\s*([^<]+)<\/div>.*?<div class="course-summary">.*?<p>(.*?)<\/p>/g;
|
||||||
|
|
||||||
|
while ((match = courseRegex.exec(cleanHtml)) !== null) {
|
||||||
|
allCourses.push({
|
||||||
|
category: match[4].trim(),
|
||||||
|
link: match[1].trim(),
|
||||||
|
image: match[2].trim(),
|
||||||
|
name: match[3].trim(),
|
||||||
|
description: match[5].replace(/<br\s*\/?>/g, ' ').trim()
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
renderCourses(allCourses);
|
||||||
|
});
|
||||||
|
|
||||||
|
function renderCourses(allCourses) {
|
||||||
|
const container = document.querySelector('.corces');
|
||||||
|
if (!container) {
|
||||||
|
console.error("⚠️ No .corces container found in DOM");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
container.innerHTML = ''; // clear old content
|
||||||
|
|
||||||
|
allCourses.forEach(course => {
|
||||||
|
const courseDiv = document.createElement('div');
|
||||||
|
courseDiv.className = 'course-card';
|
||||||
|
courseDiv.innerHTML = `
|
||||||
|
<a href="${course.link}" target="_blank">
|
||||||
|
<div class="course-image" style="background-image: url(${course.image});"></div>
|
||||||
|
</a>
|
||||||
|
<div class="course-content">
|
||||||
|
<div class="course-category">${course.category}</div>
|
||||||
|
<a href="${course.link}" class="course-name" target="_blank">${course.name}</a>
|
||||||
|
<div class="course-description">${course.description}</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
container.appendChild(courseDiv);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
<footer class="footer">
|
<footer class="footer">
|
||||||
<div class="footer-container">
|
<div class="footer-container">
|
||||||
<div class="footer-section company-section">
|
<div class="footer-section company-section">
|
||||||
|
|||||||
94
main.js
94
main.js
@ -24,7 +24,6 @@ function goToLogin() {
|
|||||||
|
|
||||||
if (!this.track || this.slides.length === 0) {
|
if (!this.track || this.slides.length === 0) {
|
||||||
console.warn("Slider DOM elements not found. Retrying...");
|
console.warn("Slider DOM elements not found. Retrying...");
|
||||||
// Retry after a short delay
|
|
||||||
setTimeout(() => this.initSlider(), 200);
|
setTimeout(() => this.initSlider(), 200);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -126,14 +125,12 @@ function goToLogin() {
|
|||||||
this.prevBtn.addEventListener('click', () => this.prevSlide());
|
this.prevBtn.addEventListener('click', () => this.prevSlide());
|
||||||
}
|
}
|
||||||
|
|
||||||
// Pause on hover
|
|
||||||
const container = document.querySelector('.slide1r-container');
|
const container = document.querySelector('.slide1r-container');
|
||||||
if (container) {
|
if (container) {
|
||||||
container.addEventListener('mouseenter', () => this.stopAutoPlay());
|
container.addEventListener('mouseenter', () => this.stopAutoPlay());
|
||||||
container.addEventListener('mouseleave', () => this.startAutoPlay());
|
container.addEventListener('mouseleave', () => this.startAutoPlay());
|
||||||
}
|
}
|
||||||
|
|
||||||
// Touch support
|
|
||||||
let startX = 0;
|
let startX = 0;
|
||||||
let endX = 0;
|
let endX = 0;
|
||||||
|
|
||||||
@ -165,9 +162,7 @@ function goToLogin() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
bindKeyboardEvents() {
|
bindKeyboardEvents() {
|
||||||
// Use a more specific event listener to avoid conflicts
|
|
||||||
const keyHandler = (e) => {
|
const keyHandler = (e) => {
|
||||||
// Only respond if the slider container is visible
|
|
||||||
const container = document.querySelector('.slide1r-container');
|
const container = document.querySelector('.slide1r-container');
|
||||||
if (container && this.isElementInViewport(container)) {
|
if (container && this.isElementInViewport(container)) {
|
||||||
if (e.key === 'ArrowLeft') {
|
if (e.key === 'ArrowLeft') {
|
||||||
@ -192,94 +187,5 @@ function goToLogin() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Initialize the slider immediately
|
|
||||||
new Slide1rSlider();
|
new Slide1rSlider();
|
||||||
})();
|
})();
|
||||||
|
|
||||||
const allCourses = [
|
|
||||||
{
|
|
||||||
category: "Software Development & Engineering",
|
|
||||||
link: "https://kodepilot.in/course/view.php?id=16",
|
|
||||||
image: "https://kodepilot.in/pluginfile.php/46/course/overviewfiles/ChatGPT%20Image%20Sep%2011%2C%202025%2C%2008_28_21%20PM.png",
|
|
||||||
name: "UI/UX Design",
|
|
||||||
description: "Go beyond aesthetics. Design seamless journeys that users love. Translate user needs into intuitive prototypes and pixel-perfect designs for web and mobile."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
category: "Software Development & Engineering",
|
|
||||||
link: "https://kodepilot.in/course/view.php?id=17",
|
|
||||||
image: "https://kodepilot.in/pluginfile.php/46/course/overviewfiles/ChatGPT%20Image%20Sep%2011%2C%202025%2C%2008_28_21%20PM.png",
|
|
||||||
name: "Python Basics",
|
|
||||||
description: "Learn Python from scratch. Master variables, loops, functions, and create real projects."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
category: "Data Science",
|
|
||||||
link: "https://kodepilot.in/course/view.php?id=20",
|
|
||||||
image: "https://kodepilot.in/pluginfile.php/46/course/overviewfiles/ChatGPT%20Image%20Sep%2011%2C%202025%2C%2008_28_21%20PM.png",
|
|
||||||
name: "Data Analysis with Pandas",
|
|
||||||
description: "Analyze data efficiently using Pandas. Explore datasets, clean data, and visualize results."
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
(async () => {
|
|
||||||
const baseUrl = 'https://kodepilot.in/course/index.php';
|
|
||||||
|
|
||||||
// Step 1: Fetch categories dynamically
|
|
||||||
const res = await fetch(baseUrl);
|
|
||||||
const html = await res.text();
|
|
||||||
const categoryRegex = /<h3 class="categoryname aabtn"><a href="([^"]+)">([^<]+)<\/a><\/h3>/g;
|
|
||||||
|
|
||||||
const categories = [];
|
|
||||||
let match;
|
|
||||||
while ((match = categoryRegex.exec(html)) !== null) {
|
|
||||||
categories.push({ url: match[1], name: match[2] });
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('Categories found:', categories);
|
|
||||||
|
|
||||||
// Step 2: Fetch courses for each category
|
|
||||||
const allCourses = [];
|
|
||||||
|
|
||||||
for (const category of categories) {
|
|
||||||
const resCat = await fetch(category.url);
|
|
||||||
const catHtml = await resCat.text();
|
|
||||||
const cleanHtml = catHtml.replace(/\n/g, ' '); // Flatten HTML for easier regex
|
|
||||||
|
|
||||||
// Regex to extract course info
|
|
||||||
const courseRegex = /<div class="card dashboard-card [^"]*"[^>]*>.*?<a href="([^"]+)"[^>]*>.*?background-image: url\(([^)]+)\);".*?<span class="sr-only">(.*?)<\/span>.*?<div class="course-category">\s*([^<]+)<\/div>.*?<div class="course-summary">.*?<p>(.*?)<\/p>/g;
|
|
||||||
|
|
||||||
while ((match = courseRegex.exec(cleanHtml)) !== null) {
|
|
||||||
allCourses.push({
|
|
||||||
category: match[4].trim(),
|
|
||||||
link: match[1].trim(),
|
|
||||||
image: match[2].trim(),
|
|
||||||
name: match[3].trim(),
|
|
||||||
description: match[5].replace(/<br\s*\/?>/g, ' ').trim()
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('All courses:', allCourses);
|
|
||||||
})();
|
|
||||||
|
|
||||||
|
|
||||||
// Test printing all courses
|
|
||||||
console.log("Testing allCourses array:");
|
|
||||||
const container = document.querySelector('.corces');
|
|
||||||
|
|
||||||
allCourses.forEach(course => {
|
|
||||||
const courseDiv = document.createElement('div');
|
|
||||||
courseDiv.className = 'course-card'; // you can style this class later
|
|
||||||
|
|
||||||
courseDiv.innerHTML = `
|
|
||||||
<a href="${course.link}" target="_blank">
|
|
||||||
<div class="course-image" style="background-image: url(${course.image});"></div>
|
|
||||||
</a>
|
|
||||||
<div class="course-content">
|
|
||||||
<div class="course-category">${course.category}</div>
|
|
||||||
<a href="${course.link}" class="course-name" target="_blank">${course.name}</a>
|
|
||||||
<div class="course-description">${course.description}</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
container.appendChild(courseDiv);
|
|
||||||
});
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user