I added some new changes 😀

assets/js/audio.js

@@ -0,0 +1,65 @@
+const musicButton1 = document.getElementById("musicList1");
+const musicButton2 = document.getElementById("musicList2");
+const musicButton3 = document.getElementById("musicList3");
+const musicButton4 = document.getElementById("musicList4");
+const x = document.getElementById("audio");
+
+let isPlaying = false;
+
+const playAudio = () => {
+  x.play();
+  isPlaying = true;
+}
+
+const pauseAudio = () => {
+  x.pause();
+  isPlaying = false;
+}
+
+musicButton1.addEventListener('click', () => {
+  x.src = "assets/audio/Chill Vlog Happy Lofi Beat Marshmallow by Lukrembo.mp3";
+  if(isPlaying)
+  {
+    pauseAudio();
+  }
+  else
+  {
+    playAudio();
+  }
+});
+
+musicButton2.addEventListener('click', () => {
+  x.src = "assets/audio/Grieg - Morning Mood.mp3";
+  if(isPlaying)
+  {
+    pauseAudio();
+  }
+  else
+  {
+    playAudio();
+  }
+});
+
+musicButton3.addEventListener('click', () => {
+  x.src = "assets/audio/Infraction-City-Beat-Main-Version-pr.mp3";
+  if(isPlaying)
+  {
+    pauseAudio();
+  }
+  else
+  {
+    playAudio();
+  }
+});
+
+musicButton4.addEventListener('click', () => {
+  x.src = "assets/audio/Punch Deck - Maximalism.mp3";
+  if(isPlaying)
+  {
+    pauseAudio();
+  }
+  else
+  {
+    playAudio();
+  }
+});

assets/js/greeting.js

@@ -7,17 +7,12 @@ const today = new Date();
 const hour = today.getHours();
 const name = CONFIG.name;
 
-const gree1 = `${CONFIG.greetingNight}\xa0`;
-const gree2 = `${CONFIG.greetingMorning}\xa0`;
-const gree3 = `${CONFIG.greetingAfternoon}\xa0`;
-const gree4 = `${CONFIG.greetingEvening}\xa0`;
-
 if (hour >= 23 || hour < 5) {
-	document.getElementById('greetings').innerText = gree1 + name;
+	document.getElementById('greetings').innerText = gree1_english + name;
 } else if (hour >= 6 && hour < 12) {
-	document.getElementById('greetings').innerText = gree2 + name;
+	document.getElementById('greetings').innerText = gree2_english + name;
 } else if (hour >= 12 && hour < 17) {
-	document.getElementById('greetings').innerText = gree3 + name;
+	document.getElementById('greetings').innerText = gree3_english + name;
 } else {
-	document.getElementById('greetings').innerText = gree4 + name;
+	document.getElementById('greetings').innerText = gree4_english + name;
 }

assets/js/input.js

@@ -0,0 +1,33 @@
+const modal = document.getElementById("modalOverlay");
+let inputName;
+
+modal.innerHTML = `
+      <div class="modalPopup">
+				<div class="modalContent">
+					<h1>Input your name here</h1>
+					<input type="text" id="name" style="border-radius: 25; margin-top: 10px;">
+					<button class="buttonStyle" id="button">Submit</button>
+				</div>
+			</div>`;
+
+// Uncomment the line below if you wanna use localStorage
+// if(localStorage.getItem("name") != null)
+// {
+//     document.getElementById('modalOverlay').style.display = 'none'
+//     // inputName = localStorage.getItem("name");
+//     CONFIG.name = inputName;
+//     // document.getElementById('greetings').innerText += inputName;
+// }
+
+window.onload = function() {
+  document.getElementById('button').onclick = () => {
+	  document.getElementById('modalOverlay').style.display = 'none'
+	  inputName = document.getElementById('name').value;
+
+    // Uncomment the line below if you wanna use localStorage
+    // localStorage.setItem("name", inputName);
+
+    CONFIG.name = inputName;
+	  document.getElementById('greetings').innerText += CONFIG.name;
+  }
+}

assets/js/language.js

@@ -0,0 +1,119 @@
+const languageButton = document.getElementById('languageDropbtn');
+const languageEnglishButton = document.getElementById('languageEnglish');
+const languageIndonesianButton = document.getElementById('languageIndonesian');
+const languageFrenchButton = document.getElementById('languageFrench');
+
+const gree1_english = `${CONFIG.greetingNight},\xa0`;
+const gree2_english = `${CONFIG.greetingMorning},\xa0`;
+const gree3_english = `${CONFIG.greetingAfternoon},\xa0`;
+const gree4_english = `${CONFIG.greetingEvening},\xa0`;
+
+const gree1_indonesian = `${CONFIG.greetingNightIndonesian},\xa0`;
+const gree2_indonesian = `${CONFIG.greetingMorningIndonesian},\xa0`;
+const gree3_indonesian = `${CONFIG.greetingAfternoonIndonesian},\xa0`;
+const gree4_indonesian = `${CONFIG.greetingEveningIndonesian},\xa0`;
+
+const gree1_french = `${CONFIG.greetingNightFrench},\xa0`;
+const gree2_french = `${CONFIG.greetingMorningFrench},\xa0`;
+const gree3_french = `${CONFIG.greetingAfternoonFrench},\xa0`;
+const gree4_french = `${CONFIG.greetingEveningFrench},\xa0`;
+
+const musicList1_english = CONFIG.musicEnglish1;
+const musicList2_english = CONFIG.musicEnglish2;
+const musicList3_english = CONFIG.musicEnglish3;
+const musicList4_english = CONFIG.musicEnglish4;
+
+const musicList1_indonesian = CONFIG.musicIndonesian1;
+const musicList2_indonesian = CONFIG.musicIndonesian2;
+const musicList3_indonesian = CONFIG.musicIndonesian3;
+const musicList4_indonesian = CONFIG.musicIndonesian4;
+
+const musicList1_french = CONFIG.musicFrench1;
+const musicList2_french = CONFIG.musicFrench2;
+const musicList3_french = CONFIG.musicFrench3;
+const musicList4_french = CONFIG.musicFrench4;
+
+const showLanguageDropdown = () => {
+    document.getElementById("myDropdown").classList.toggle("show");
+}
+
+const changeToEnglish = () => {
+	document.getElementById('musicList1').innerText = musicList1_english;
+	document.getElementById('musicList2').innerText = musicList2_english;
+	document.getElementById('musicList3').innerText = musicList3_english;
+	document.getElementById('musicList4').innerText = musicList4_english;
+
+	if (hour >= 23 || hour < 5) {
+		document.getElementById('greetings').innerText = gree1_english + CONFIG.name;
+	}
+	else if (hour >= 6 && hour < 12) {
+		document.getElementById('greetings').innerText = gree2_english + CONFIG.name;
+	}
+	else if (hour >= 12 && hour < 17) {
+		document.getElementById('greetings').innerText = gree3_english + CONFIG.name;
+	}
+	else {
+		document.getElementById('greetings').innerText = gree4_english + CONFIG.name;
+	}
+}
+
+const changeToIndonesian = () => {
+	document.getElementById('musicList1').innerText = musicList1_indonesian;
+	document.getElementById('musicList2').innerText = musicList2_indonesian;
+	document.getElementById('musicList3').innerText = musicList3_indonesian;
+	document.getElementById('musicList4').innerText = musicList4_indonesian;
+
+    if (hour >= 23 || hour < 5) {
+		document.getElementById('greetings').innerText = gree1_indonesian + CONFIG.name;
+	}
+	else if (hour >= 6 && hour < 12) {
+		document.getElementById('greetings').innerText = gree2_indonesian + CONFIG.name;
+	}
+	else if (hour >= 12 && hour < 17) {
+		document.getElementById('greetings').innerText = gree3_indonesian + CONFIG.name;
+	}
+	else {
+		document.getElementById('greetings').innerText = gree4_indonesian + CONFIG.name;
+	}
+}
+
+const changeToFrench = () => {
+    document.getElementById('musicList1').innerText = musicList1_french;
+	document.getElementById('musicList2').innerText = musicList2_french;
+	document.getElementById('musicList3').innerText = musicList3_french;
+	document.getElementById('musicList4').innerText = musicList4_french;
+
+    if (hour >= 23 || hour < 5) {
+		document.getElementById('greetings').innerText = gree1_french + CONFIG.name;
+	}
+	else if (hour >= 6 && hour < 12) {
+		document.getElementById('greetings').innerText = gree2_french + CONFIG.name;
+	}
+	else if (hour >= 12 && hour < 17) {
+		document.getElementById('greetings').innerText = gree3_french + CONFIG.name;
+	}
+	else {
+		document.getElementById('greetings').innerText = gree4_french + CONFIG.name;
+	}
+}
+
+languageButton.addEventListener('click', () => {
+    showLanguageDropdown();
+})
+
+languageEnglishButton.addEventListener('click', () => {
+    changeToEnglish();
+})
+
+languageIndonesianButton.addEventListener('click', () => {
+    changeToIndonesian();
+})
+
+languageFrenchButton.addEventListener('click', () => {
+    changeToFrench();
+})
+
+document.getElementById("languageDropbtn").innerHTML = `Language <i icon-name="chevron-down"></i>`;
+document.getElementById("languageEnglish").innerText = 'English';
+document.getElementById("languageIndonesian").innerText = 'Indonesian';
+document.getElementById("languageFrench").innerText = 'French';

assets/js/lists.js

@@ -8,26 +8,22 @@ const generateFirstListsContainer = () => {
 		let item = `
         <div class="card list list__${list.id}" id="list_${list.id}">
           <i class="listIcon" icon-name="${list.icon}"></i>
-          <a
-          target="${CONFIG.openInNewTab ? '_blank' : ''}"
-          href="${list.links[0].link}"
+          <div
           class="listItem"
-          >${list.links[0].name}</a>
-          <a
-          target="${CONFIG.openInNewTab ? '_blank' : ''}"
-          href="${list.links[1].link}"
+          id="musicList1"
+          >${list.links[0].name}</div>
+          <div
           class="listItem"
-          >${list.links[1].name}</a>
-          <a
-          target="${CONFIG.openInNewTab ? '_blank' : ''}"
-          href="${list.links[2].link}"
+          id="musicList2"
+          >${list.links[1].name}</div>
+          <div
           class="listItem"
-          >${list.links[2].name}</a>
-          <a
-          target="${CONFIG.openInNewTab ? '_blank' : ''}"
-          href="${list.links[3].link}"
+          id="musicList3"
+          >${list.links[2].name}</div>
+          <div
           class="listItem"
-          >${list.links[3].name}</a>
+          id="musicList4"
+          >${list.links[3].name}</div>
         </div>
       `;
 		const position = 'beforeend';

assets/js/swiper.js

@@ -0,0 +1,26 @@
+const swiper = new Swiper('.swiper', {
+  // Optional parameters
+  direction: 'horizontal',
+  loop: true,
+
+  autoplay: {
+    delay: 3000,
+  },
+
+  // If we need pagination
+  pagination: {
+    el: '.swiper-pagination',
+  },
+
+  // Navigation arrows
+  navigation: {
+    nextEl: '.swiper-button-next',
+    prevEl: '.swiper-button-prev',
+  },
+
+  // And if we need scrollbar
+  scrollbar: {
+    el: '.swiper-scrollbar',
+    draggable: true,
+  },
+});