Skip to content

Commit

Permalink
Update tabs.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@driezie
driezie committed Apr 2, 2024
1 parent e91cc63 commit a82fd4c
Showing 1 changed file with 175 additions and 89 deletions.
264 changes: 175 additions & 89 deletions tabs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,108 +9,194 @@
/* Schrijf hier gewoon je CSS voor dit component */

/* Hint: kijk eens naar de :target selector */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 2rem 1rem;
}
h1 {
margin-bottom: 2rem;
}

ul.tabs {
list-style: none;
display: flex;
flex-direction: row;
}
ul.tabs li {
padding: 1rem 0;
}
.tabs a {
background-color: #fff;
text-decoration: none;
font-weight: bold;
padding: 1.15rem;
border: unset;
}
.tabs a:hover {
text-decoration: underline;
}

.tabs a.active {
background-color: #fff;
border: 1px solid var(--blue);
border-bottom: 0;
border-radius: 10px 10px 0px 0px;
padding-bottom: 19.1px;
}



div {
width: 100%;
padding: 2rem 2.5rem;

border: 1px solid;
border-radius: 0px 0px 10px 10px;

display: none;
}
div:target {
display: block;
}
</style>
<script type="module">
/* Schrijf hier eventueel je client-side JavaScript */

// zorgt ervoor dat je JavaScript alleen wordt uitgevoerd nadat alle HTML-content van de pagina is geladen
document.addEventListener("DOMContentLoaded", function() {

var tabLinks = document.querySelectorAll(".tabs a");

tabLinks.forEach(function(tabLink) {

tabLink.addEventListener("click", function(event) {
// Verwijder de active-klasse van alle tablinks
tabLinks.forEach(function(link) {
link.classList.remove("active");
});

// Voeg de active-klasse toe aan de geklikte tablink
tabLink.classList.add("active");
});

});
});

</script>
</head>
<body>
<h1>Tabbladen</h1>

<!-- Hint: vraag je af wat tabbladen eigenlijk zijn -->

<!-- Content
Docenten
Sprints
Gedragscriteria
Open avond
<ol>
<li>Berat Zekaj</li>
<li>Charley Muhren</li>
<li>Cyd Stumpel</li>
<li>Dorien Drees</li>
<li>Joost Faber</li>
<li>Justus Sturkenboom</li>
<li>Koop Reijnders</li>
<li>Krijn Hoetmer</li>
<li>Sanne 't Hooft</li>
<li>Suus ten Voorde</li>
</ol>
<ol>
<li>Your Tribe</li>
<li>The Client</li>
<li>All Human</li>
<li>Look and Feel</li>
<li>Fix the Flow</li>
<li>The Startup</li>
<li>Connect Your Tribe</li>
<li>Server-Side Rendering</li>
<li>The Web is for Everyone</li>
<li>Performance Matters</li>
<li>Connecting People</li>
<li>Proof of Concept</li>
<li>Your Tribe for Life</li>
<li>Lose Your Head</li>
<li>Choices, Choices</li>
<li>Don't Repeat Yourself</li>
<li>Back to Static</li>
<li>Let's JAM</li>
<li>Free Space</li>
<li>Final Sprint</li>
</ol>
<ol>
<li>Methodisch handelen
<ol>
<li>Kiest binnen projecten passende fases van de development-lifecycle.</li>
<li>Combineert aangeboden principes en conventies op het gebied van frontend design en development.</li>
<li>Houdt in beginnende mate rekening met de belangen van de eindgebruiker bij het realiseren van een oplossing voor een opdrachtgever.</li>
</ol>
</li>
<li>Samenwerken
<ol>
<li>Werkt in teams, vraagt begeleiding waar nodig en geeft feedback aan teamleden.</li>
<li>Draagt verantwoording voor eigen resultaten, verwerkt ontvangen feedback en wijst teamleden op hun verantwoording.</li>
<li>Identificeert diversiteit binnen teams en handelt respectvol naar anderen.</li>
</ol>
</li>
<li>Communiceren
<ol>
<li>Luistert en vraagt door, neemt wat een ander zegt serieus.</li>
<li>Kan ontwerpkeuzes, eigen ideeën en producten begrijpelijk overbrengen aan belanghebbenden.</li>
<li>Documenteert op professionele wijze en houdt voortgang bij.</li>
</ol>
</li>
<li>Probleemoplossend vermogen
<ol>
<li>Analyseert een vraag, signaleert knelpunten en volgt de aangeboden oplossingsrichting.</li>
<li>Schetst om gedachten en processen te verkennen en abstracte begrippen over te brengen.</li>
<li>Bedenkt en implementeert complexere frontend code en gebruikt daarbij API's en databases.</li>
</ol>
</li>
<li>Lerend vermogen
<ol>
<li>Volgt aangeboden internationale ontwikkelingen in het vakgebied.</li>
<li>Maakt aangeboden en zelf gevonden materie eigen en gebruikt dit bij leertaken, deelt ervaring binnen de squad.</li>
<li>Kent eigen capaciteiten en beperkingen, vergelijkt dit met het vermogen van anderen en maakt dit bespreekbaar.</li>
</ol>
</li>
</ol>
<p>Open avond 16 april</p>
<p>Op de open dag proef je de sfeer en ontdek je hoe het is om aan de HvA te studeren. Je maakt kennis met studenten en docenten van de opleiding.</p>
<p>Stel je vragen over studiekeuze, studeren met een functiebeperking en toelating op het studiekeuzeplein. Heb je nog vragen over de opleiding? We staan tijdens de open dag/avond klaar om al jouw vragen te beantwoorden.</p>
-->

<details open>
<!-- Content -->
<ul class="fdnd-nav tabs">
<li><a class="active" href="#docenten">Docenten</a></li>
<li><a href="#sprints">Sprints</a></li>
<li><a href="#Gedragscriteria">Gedragscriteria</a></li>
<li><a href="#openAvond">Open avond</a></li>
</ul>

<div id="docenten">
<ol>
<li>Berat Zekaj</li>
<li>Charley Muhren</li>
<li>Cyd Stumpel</li>
<li>Dorien Drees</li>
<li>Joost Faber</li>
<li>Justus Sturkenboom</li>
<li>Koop Reijnders</li>
<li>Krijn Hoetmer</li>
<li>Sanne 't Hooft</li>
<li>Suus ten Voorde</li>
</ol>
</div>

<div id="sprints">
<ol>
<li>Your Tribe</li>
<li>The Client</li>
<li>All Human</li>
<li>Look and Feel</li>
<li>Fix the Flow</li>
<li>The Startup</li>
<li>Connect Your Tribe</li>
<li>Server-Side Rendering</li>
<li>The Web is for Everyone</li>
<li>Performance Matters</li>
<li>Connecting People</li>
<li>Proof of Concept</li>
<li>Your Tribe for Life</li>
<li>Lose Your Head</li>
<li>Choices, Choices</li>
<li>Don't Repeat Yourself</li>
<li>Back to Static</li>
<li>Let's JAM</li>
<li>Free Space</li>
<li>Final Sprint</li>
</ol>
</div>


<div id="Gedragscriteria">
<ol>
<li>Methodisch handelen
<ol>
<li>Kiest binnen projecten passende fases van de development-lifecycle.</li>
<li>Combineert aangeboden principes en conventies op het gebied van frontend design en development.</li>
<li>Houdt in beginnende mate rekening met de belangen van de eindgebruiker bij het realiseren van een oplossing voor een opdrachtgever.</li>
</ol>
</li>
<li>Samenwerken
<ol>
<li>Werkt in teams, vraagt begeleiding waar nodig en geeft feedback aan teamleden.</li>
<li>Draagt verantwoording voor eigen resultaten, verwerkt ontvangen feedback en wijst teamleden op hun verantwoording.</li>
<li>Identificeert diversiteit binnen teams en handelt respectvol naar anderen.</li>
</ol>
</li>
<li>Communiceren
<ol>
<li>Luistert en vraagt door, neemt wat een ander zegt serieus.</li>
<li>Kan ontwerpkeuzes, eigen ideeën en producten begrijpelijk overbrengen aan belanghebbenden.</li>
<li>Documenteert op professionele wijze en houdt voortgang bij.</li>
</ol>
</li>
<li>Probleemoplossend vermogen
<ol>
<li>Analyseert een vraag, signaleert knelpunten en volgt de aangeboden oplossingsrichting.</li>
<li>Schetst om gedachten en processen te verkennen en abstracte begrippen over te brengen.</li>
<li>Bedenkt en implementeert complexere frontend code en gebruikt daarbij API's en databases.</li>
</ol>
</li>
<li>Lerend vermogen
<ol>
<li>Volgt aangeboden internationale ontwikkelingen in het vakgebied.</li>
<li>Maakt aangeboden en zelf gevonden materie eigen en gebruikt dit bij leertaken, deelt ervaring binnen de squad.</li>
<li>Kent eigen capaciteiten en beperkingen, vergelijkt dit met het vermogen van anderen en maakt dit bespreekbaar.</li>
</ol>
</li>
</ol>
</div>


<div id="openAvond">
<p>Open avond 16 april</p>
<p>Op de open dag proef je de sfeer en ontdek je hoe het is om aan de HvA te studeren. Je maakt kennis met studenten en docenten van de opleiding.</p>
<p>Stel je vragen over studiekeuze, studeren met een functiebeperking en toelating op het studiekeuzeplein. Heb je nog vragen over de opleiding? We staan tijdens de open dag/avond klaar om al jouw vragen te beantwoorden.</p>
</div>




<!-- <details open>
<summary>Demo video</summary>
<video src="assets/tabs.mp4" width="1298" height="505" controls muted autoplay loop>
<a href="assets/tabs.mp4">assets/tabs.mp4</a>
</video>
</details>
</details> -->
</body>
</html>

0 comments on commit a82fd4c

Please sign in to comment.