mainApp.js

const list = document.querySelector('.list');

fetch("./projects.json")
 .then(response => {
 return response.json();
 })
 .then(data => {
 updateUI(data);
 });

function updateUI(projects){
 projects.forEach(({name, code, index}) => {

 const listItem = document.createElement('li');
 
 listItem.innerHTML = `
 <span class="project-number">${index}</span>
 <a href="/${name}/index.html" class="project-name">
 ${projectNameFormater(name)}
 </a>
 <a href=${code} class="container-links">
 Code
 </a>
 `;
 list.appendChild(listItem); 
 });
}

function projectNameFormater(name){
 return name
		.split('-')
		.map(word => word[0].toUpperCase() + word.slice(1))
		.join(' ');
}