Generate project cards from a json, rather than having them hardcoded
This commit is contained in:
parent
6a193eb3ec
commit
1ae77b8270
3 changed files with 93 additions and 47 deletions
42
script.js
42
script.js
|
|
@ -83,10 +83,52 @@ async function getLanguageData(lang){
|
|||
return response.json();
|
||||
}
|
||||
|
||||
|
||||
async function getProjectsData(){
|
||||
const response = await fetch(`projects.json`);
|
||||
return response.json();
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", async () => {
|
||||
const userLang = (navigator.language || navigator.userLanguage).split('-')[0];
|
||||
const langData = await getLanguageData(userLang);
|
||||
|
||||
// Load Projects from projects.json
|
||||
const projects = await getProjectsData();
|
||||
|
||||
if (projects != null){
|
||||
console.log(projects);
|
||||
for (var key in projects){
|
||||
var project = projects[key];
|
||||
|
||||
var newProject = document.createElement("div");
|
||||
newProject.setAttribute("class", "project");
|
||||
|
||||
var title = document.createElement("h1");
|
||||
title.setAttribute("data-i18n", key);
|
||||
newProject.appendChild(title);
|
||||
|
||||
var description = document.createElement("p");
|
||||
description.setAttribute("data-i18n", project.description);
|
||||
newProject.appendChild(description);
|
||||
|
||||
var skills = document.createElement("ul");
|
||||
for (var skillKey in project.skills){
|
||||
var newSkill = document.createElement("li");
|
||||
newSkill.innerHTML = project.skills[skillKey];
|
||||
skills.appendChild(newSkill);
|
||||
}
|
||||
newProject.appendChild(skills);
|
||||
|
||||
var button = document.createElement("a");
|
||||
button.setAttribute("href", project.link);
|
||||
button.innerHTML = "<i class='" + project.linkIcon + "'></i>"
|
||||
newProject.appendChild(button);
|
||||
|
||||
document.getElementsByClassName("projects")[0].appendChild(newProject);
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelectorAll("[data-i18n]").forEach((element) => {
|
||||
const key = element.getAttribute("data-i18n");
|
||||
element.innerHTML = langData[key];
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue