lee
/
leemorgan-dev


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445
							<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Lee Morgan -courses-</title>
        <link rel="stylesheet" href="/learn/style">
    </head>
    <body>
        <h1>Courses</h1>

        <div id="container" class="cardContainer"></div>

        <template id="template">
            <a class="card">
                <img>

                <div>
                    <h2></h2>

                    <p></p>
                </div>
            </a>
        </template>

        <script>
            fetch("/learn/courses")
                .then(response => response.json())
                .then((response)=>{
                    let container = document.getElementById("container");
                    let template = document.getElementById("template").content.children[0];

                    for(let i = 0; i < response.length; i++){
                        let course = template.cloneNode(true);
                        course.href = `/learn/course/${response[i]._id}`;
                        course.children[0].src = response[i].thumbNail;
                        course.children[0].alt = `${response[i].title} thumbnail`;
                        course.children[1].children[0].innerText = response[i].title;
                        course.children[1].children[1].innerText = response[i].description;
                        container.appendChild(course);
                    }
                })
                .catch((err)=>{});
        </script>
    </body>
</html>