Current directory: /home/klas4s23/domains/585455.klas4s23.mid-ica.nl/public_html/Gastenboek/uploads
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Technowire | Programmeertalen per jaar</title>
<!-- includeer font awesome library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- includeer de stylesheet -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<header>
<img src="media/logo.png" alt="logo">
<button class="hamburger-btn" id="hamburger-btn">
<i class="fas fa-bars"></i>
<i class="fas fa-close"></i>
</button>
</header>
<nav>
<a href="./index.html">Home</a>
<a href="./programmeertalen.html">Programmeertalen per jaar</a>
<a href="./tijdlijn.html">Tijdlijn</a>
<a href="./halloffame.html">IT Hall of Fame</a>
<a href="./silvalley.html">Sillicon Valley</a>
</nav>
<main class="main-content">
<select name="jaartal" id="jaartallen"></select>
<h2>Hieronder de top 3 programmeertalen voor het geselecteerde jaartal:</h2>
<ul id="top-languages-list"></ul>
</main>
<footer>
<p>© 2023 Airon Bakker</p>
</footer>
</div>
</body>
<!-- script voor het hamburgermenu -->
<script>
// hamburger button functionality
document.addEventListener("DOMContentLoaded", function () {
const hamburgerBtn = document.getElementById("hamburger-btn");
const nav = document.querySelector("nav");
// Voeg logica toe om tussen het hamburger- en kruisicoon te wisselen
const barsIcon = hamburgerBtn.querySelector(".fas.fa-bars");
const crossIcon = hamburgerBtn.querySelector(".fas.fa-close");
if (hamburgerBtn.classList.contains("active")) {
barsIcon.style.display = "none";
crossIcon.style.display = "block";
} else {
barsIcon.style.display = "block";
crossIcon.style.display = "none";
}
hamburgerBtn.addEventListener("click", function () {
hamburgerBtn.classList.toggle("active");
nav.classList.toggle("active");
// Voeg logica toe om tussen het hamburger- en kruisicoon te wisselen
const barsIcon = hamburgerBtn.querySelector(".fas.fa-bars");
const crossIcon = hamburgerBtn.querySelector(".fas.fa-close");
if (hamburgerBtn.classList.contains("active")) {
barsIcon.style.display = "none";
crossIcon.style.display = "block";
} else {
barsIcon.style.display = "block";
crossIcon.style.display = "none";
}
});
// Functie om een reeks jaartallen te genereren van 1970 tot het huidige jaar (2023)
function generateJaartallen() {
const huidigJaar = new Date().getFullYear();
const select = document.getElementById("jaartallen");
for (let jaar = 1970; jaar <= huidigJaar; jaar++) {
const optie = document.createElement("option");
optie.value = jaar;
optie.text = jaar;
select.appendChild(optie);
}
}
// Vul de selectielijst met de jaartallen bij het laden van de pagina
generateJaartallen();
// Trigger de 'change' gebeurtenis ÊÊn keer
const event = new Event("change");
yearPicker.dispatchEvent(event);
});
// programming languages yearpicker functionality
const topLanguagesByYear = {
"1970": ["Fortran", "ALGOL", "COBOL"],
"1971": ["C", "ALGOL", "PL/I"],
"1972": ["C", "ALGOL", "PL/I"],
"1973": ["C", "ALGOL", "PL/I"],
"1974": ["C", "ALGOL", "PL/I"],
"1975": ["Fortran", "ALGOL", "COBOL"],
"1976": ["Fortran", "ALGOL", "COBOL"],
"1977": ["Fortran", "ALGOL", "COBOL"],
"1978": ["Pascal", "Fortran", "ALGOL"],
"1979": ["Pascal", "Fortran", "ALGOL"],
"1980": ["Pascal", "Fortran", "ALGOL"],
"1981": ["Pascal", "C", "Fortran"],
"1982": ["C++", "Pascal", "C"],
"1983": ["C++", "C", "Pascal"],
"1984": ["C++", "C", "Pascal"],
"1985": ["C++", "C", "Pascal"],
"1986": ["C++", "C", "Pascal"],
"1987": ["C++", "C", "Pascal"],
"1988": ["C++", "C", "Pascal"],
"1989": ["C++", "C", "Pascal"],
"1990": ["C++", "C", "Pascal"],
"1991": ["C", "C++", "Pascal"],
"1992": ["C", "C++", "Pascal"],
"1993": ["C", "C++", "Java"],
"1994": ["C", "C++", "Java"],
"1995": ["Java", "C", "C++"],
"1996": ["Java", "C", "C++"],
"1997": ["Java", "C", "C++"],
"1998": ["Java", "C", "C++"],
"1999": ["Java", "C", "C++"],
"2000": ["Java", "C", "C++"],
"2001": ["Java", "C", "C++"],
"2002": ["Java", "C", "C++"],
"2003": ["Java", "C", "C++"],
"2004": ["Java", "C", "C++"],
"2005": ["Java", "C", "C++"],
"2006": ["Java", "C", "C++"],
"2007": ["Java", "C", "C++"],
"2008": ["Java", "C", "C++"],
"2009": ["Java", "C", "C++"],
"2010": ["Java", "C", "C++"],
"2011": ["Java", "C", "C++"],
"2012": ["Java", "C", "C++"],
"2013": ["Java", "C", "C++"],
"2014": ["Java", "C", "C++"],
"2015": ["Java", "C", "JavaScript"],
"2016": ["JavaScript", "Java", "Python"],
"2017": ["JavaScript", "Java", "Python"],
"2018": ["JavaScript", "Java", "Python"],
"2019": ["JavaScript", "Java", "Python"],
"2020": ["JavaScript", "Java", "Python"],
"2021": ["JavaScript", "Java", "Python"],
"2022": ["JavaScript", "Java", "Python"],
"2023": ["JavaScript", "Java", "Python"]
};
const yearPicker = document.getElementById("jaartallen");
yearPicker.addEventListener("change", function () {
const year = yearPicker.value;
const topLanguages = topLanguagesByYear[year];
const topLanguagesList = document.getElementById("top-languages-list");
// Clear de lijst
topLanguagesList.innerHTML = "";
if (year) {
// Voeg de top talen toe aan de lijst als een jaar is geselecteerd
for (let i = 0; i < topLanguages.length; i++) {
const language = topLanguages[i];
const listItem = document.createElement("li");
const listNumber = i + 1;
listItem.textContent = listNumber + ": " + language;
topLanguagesList.appendChild(listItem);
}
} else {
// Toon "Geen jaartal geselecteerd" als er geen jaar is geselecteerd
const listItem = document.createElement("li");
listItem.textContent = "Geen jaartal geselecteerd";
topLanguagesList.appendChild(listItem);
}
});
</script>
</html>