diff --git a/codepal/components/component.html b/codepal/components/Maincard.html similarity index 62% rename from codepal/components/component.html rename to codepal/components/Maincard.html index 93a81cd..1a444e5 100644 --- a/codepal/components/component.html +++ b/codepal/components/Maincard.html @@ -7,6 +7,13 @@ -
+
+

+ {{Cardtitle}} +

+

+ {{CardDescription}} +

+
\ No newline at end of file diff --git a/codepal/index.css b/codepal/index.css index 9bb973f..152f6c0 100644 --- a/codepal/index.css +++ b/codepal/index.css @@ -72,6 +72,39 @@ nav .githubIcon { height: 75%; } +#Allcards { + display: flex; + flex-wrap: wrap; + align-items: start; + justify-content: start; + gap: 1em; + margin-top: max(50px, 3%); + width: min(95vw, 1000px); + margin-inline: auto; +} + +.MainPagecard:hover { + box-shadow: 6px 0.55px 18px -3px rgba(101, 101, 101, 0.608); +} + +.MainPagecard { + display: flex; + flex-direction: column; + width: min(80vw, 300px); + padding: 2em; + border-radius: 12px; + border: 1px solid rgba(34, 34, 34, 0.25); + background: #FFF; + gap: 1em; + transition: 0.5s; + cursor: pointer; +} + +.MainPagecard p { + width: 75%; + margin: auto; + opacity: 0.6; +} @media only screen and (max-width : 520px) { @@ -79,26 +112,8 @@ nav .githubIcon { display: none; } -} + #Allcards { + justify-content: center; + } -.box{ - display: flex; - margin: auto auto; - width: 94%; - height: auto; - background: transparent; - justify-content: space-between; - flex-wrap: wrap; -} -.box .tutorial{ - margin: 1em 1em; - padding: 2rem; - height: 15rem; - width: 20rem; - background-color: rgb(249, 220, 183); - border-radius: 3rem; -} -.box .tutorial h2{ - padding-bottom: 1.5rem; - font-size: 1.4rem; } \ No newline at end of file diff --git a/codepal/index.html b/codepal/index.html index 883999b..66d15cc 100644 --- a/codepal/index.html +++ b/codepal/index.html @@ -12,7 +12,7 @@
-
+
diff --git a/codepal/index.js b/codepal/index.js index 876536b..ee8c81f 100644 --- a/codepal/index.js +++ b/codepal/index.js @@ -5,47 +5,53 @@ document.addEventListener("DOMContentLoaded", function () { .then(navbarHtml => { document.getElementById("navbar").innerHTML = navbarHtml; }); - //render components - fetch("./components/component.html") - .then(response => response.text()) - .then(componentHtml => { - document.getElementById("component").innerHTML = componentHtml; - }); - // Template to add course change the JSON file name - fetch('./chapter-data/STRUCTURE_SAMPLE.json') - .then(response => response.json()) - .then(data => { - const main = document.querySelector('.box'); - const tutorial = document.createElement('div'); - tutorial.classList.add('tutorial'); - - tutorial.innerHTML = `

${data.chapter_name}

${data.chapter_description}

`; - - main.appendChild(tutorial); - }); - fetch('./chapter-data/DATA_STRUCTURES_WITH_CPP.json') - .then(response => response.json()) - .then(data => { - const main = document.querySelector('.box'); - const tutorial = document.createElement('div'); - tutorial.classList.add('tutorial'); - - tutorial.innerHTML = `

${data.chapter_name}

${data.chapter_description}

`; - - main.appendChild(tutorial); - }); - fetch('./chapter-data/ALL_ABOUT_JAVASCRIPT.json') - .then(response => response.json()) - .then(data => { - const main = document.querySelector('.box'); - const tutorial = document.createElement('div'); - tutorial.classList.add('tutorial'); - tutorial.innerHTML = `

${data.chapter_name}

${data.chapter_description}

`; - main.appendChild(tutorial); - }); - + // fetchAllCards + async function fetchAllcards() { + await fetch("./Chapters.json") + .then(responce => responce.json()) + .then(data => { + // console.log(data.chapter_data_paths) + for (let i = 0; i < data.chapter_data_paths.length; i++) { + console.log("card path : ", data.chapter_data_paths[i]) + rendercard(`.${data.chapter_data_paths[i]}`) + } + // let allchapter = JSON.parse(data) + }) + } + + //render Cards + async function rendercard(path) { + + // console.log(path) + let carddata; + await fetch(path) + .then(response => response.json()) + .then(cardData => { + console.log("cardData : ", cardData) + carddata = cardData + + }); + + await fetch("./components/Maincard.html") + .then(responce => responce.text()) + .then((componentHTML) => { + const cardsContainer = document.getElementById("Allcards") + + // const type = typeof componentHTML + // console.log(type) // string + + const FinalCardComponent = componentHTML + .replace(/{{Cardtitle}}/g, carddata.chapter_name) + .replace(/{{CardDescription}}/g, carddata.chapter_description); + + cardsContainer.innerHTML += FinalCardComponent + + }) + } + + fetchAllcards() + - });