forked from swapnilsparsh/30DaysOfJavaScript
-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
100 lines (78 loc) · 2.77 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
const projectsArea = document.querySelector(".project-list-area");
function getImagePath(id) {
return `public/assets/${id}.png`;
}
function getProjectUrl(name) {
return `./projects/${name.toLowerCase().replace(/ /g, '-')}/`;
}
function getGithubUrl(name) {
const repoName = name.toLowerCase().replace(/ /g, '-');
return `https://github.com/swapnilsparsh/30DaysOfJavaScript/tree/master/projects/${repoName}`;
}
function getProjectImg(project) {
const imgParent = document.createElement("div");
imgParent.className = "project-img-cont";
const imgElm = document.createElement("img");
imgElm.src = project.image;
imgElm.setAttribute("alt", project.name);
imgParent.appendChild(imgElm);
return imgParent;
}
function createAnchorElm(href, value, className, attrName, attrValue) {
const anchorElm = document.createElement("a");
anchorElm.innerText = value;
anchorElm.href = href;
anchorElm.className = className;
anchorElm.setAttribute(attrName, attrValue);
return anchorElm;
}
function getProjectLinks(project) {
const linkContainer = document.createElement("div");
linkContainer.className = "links";
const websiteLink = createAnchorElm(project.url, 'Live', "btn", "target", "_blank");
const githubLink = createAnchorElm(project.github, 'Github', "btn", "target", "_blank");
linkContainer.append(websiteLink, githubLink);
return linkContainer;
}
function getProjectContent(project) {
const contentContainer = document.createElement("div");
contentContainer.className = "project-detail";
const contentElm = document.createElement("div");
contentElm.className = "project-content";
const projectName = document.createElement("h2");
projectName.innerText = project.name;
const projectDescription = document.createElement("p");
projectDescription.innerText = project.description;
contentElm.append(projectName, projectDescription);
contentContainer.appendChild(contentElm);
return contentContainer;
}
function renderProjectList(projects) {
projects.forEach((project) => {
const projectCard = document.createElement("div");
projectCard.className = "project-card";
const projectImg = getProjectImg({
...project,
image: getImagePath(project.id),
});
const projectContent = getProjectContent(project);
const projectLinks = getProjectLinks({
...project,
url: getProjectUrl(project.name),
github: getGithubUrl(project.name),
});
projectCard.append(projectImg, projectContent, projectLinks);
projectsArea.appendChild(projectCard);
});
}
function fetchProjects() {
fetch("./data.json")
.then((res) => res.json())
.then((projects) => {
renderProjectList(projects);
})
.catch((err) => {
console.log("Error fetching project data:", err);
});
}
fetchProjects();