FilesExpand file tree

 master

/

script.js

Copy path

Blame

More file actions

Blame

More file actions

Latest commit

 

History

History

History

100 lines (78 loc) · 2.77 KB

 master

/

script.js

Copy path

Top

File metadata and controls

• Code
• Blame

100 lines (78 loc) · 2.77 KB

Raw

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

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();