fetch project data and display in index.html[DOM] file.

Author: pradipchaudhary

assets/css/index.css

@@ -131,30 +131,33 @@ h2.cat-title {
 /* project item */
 .project-item {
     width: 285px;
-    height: 500px;
+    height: 400px;
     overflow: hidden;
     border: 1px solid #efefef;
+    background: #faf9f9;
+    border-radius: 5px;
 }
 .project-item img {
     width: 100%;
     object-fit: cover;
 }
 .project-info {
-    padding: 10px;
+    padding: 14px;
 }
 .project-info .lang {
-    font-weight: 300;
-    font-size: 0.8rem;
+    font-weight: 400;
+    font-size: 0.7rem;
+    word-spacing: 8px;
     color: #2200ff;
 }
 .project-info h3.project-name {
     font-weight: 500;
-    font-size: 1.7rem;
+    font-size: 1.4rem;
     padding: 5px 0;
 }
 .project-info p.description {
     font-weight: 300;
-    font-size: 1rem;
+    font-size: 0.9rem;
     color: #131212;
     line-height: 22px;
     margin-bottom: 10px;
@@ -185,7 +188,7 @@ footer {
     width: 100%;
     text-align: center;
     color: #000;
-    padding: 0.8rem;
+    padding: 7rem 0 3rem;
     display: flex;
     justify-content: center;
     align-items: center;

assets/js/index.js

@@ -34,27 +34,19 @@ fetch("./api.json")
 // };
 
 const updateUI = (projects) => {
-    projects.map((project) => {
+    projects.map(({ id, name, description, language }) => {
         const projectItem = document.createElement("div");
         projectItem.className = "project-item";
         console.log(projectItem);
         projectItem.innerHTML = `
                             <img src="./assets/screen/thumbnail.png" alt="" />
                             <div class="project-info">
-                                <div class="lang">html, css, JavaScript</div>
-                                <h3 class="project-name">Personal Blog</h3>
+                                <div class="lang">${language}</div>
+                                <h3 class="project-name">${name}</h3>
                                 <p class="description">
-                                    Create a personal blog platform where users
-                                    can share their thoughts and experiences.
+                                    ${description}
                                 </p>
-                                <div class="project-features">
-                                    <h4 class="features-title">Features:</h4>
-                                    <ul>
-                                        <li>Blog post creation</li>
-                                        <li>User authentication</li>
-                                        <li>Comment section</li>
-                                    </ul>
-                                </div>
+                                
                             </div>
         `;
         projectsItems.appendChild(projectItem);
@@ -78,10 +70,10 @@ function Circle(t, e, i, n, s) {
         (this.draw = function () {
             context.beginPath(),
                 context.arc(this.x, this.y, this.radius, 2 * Math.PI, !1),
-                (context.strokeStyle = "rgba(255,251,0, 0.1)"),
+                (context.strokeStyle = "rgba(255,255,255, 0.1)"),
                 context.stroke(),
                 context.fill(),
-                (context.fillStyle = "rgba(201, 170, 28, .600)");
+                (context.fillStyle = "rgba(0,0,0,0.05)");
         }),
         (this.update = function () {
             (this.x + this.radius > innerWidth || this.x - this.radius < 0) &&

index.html

@@ -57,3 +57,12 @@ <h2 class="cat-title">Web Development</h2>
         <script src="./assets/js/index.js"></script>
     </body>
 </html>
+
+<!-- <div class="project-features">
+    <h4 class="features-title">Features:</h4>
+    <ul>
+        <li>Blog post creation</li>
+        <li>User authentication</li>
+        <li>Comment section</li>
+    </ul>
+</div> -->