This repository contains a some mini-websites for you to study and practice developing. Each one has some HTML a few listeners and handlers with blanks to fill in, and each one is organized the same way. The goal of these exercises isn't to create mind-blowing projects. Instead the goal to get lots of practice reading code, debugging and stepping through in the debugging.
You should already know a little about events before getting working on these exercises, head over to study.hackyourfuture.be to find some starting resources
These exercises are as much about practicing using the DevTools Debugger as it is about learning Events and Handlers. After connecting the event listeners to the correct DOM elements, you will find that it's possible to pass all of the asserts just by investigating local variables in you Debugger.
So keep your DevTools open and study away!
To complete the exercises you should copy-paste the code from challenge.html into the file solution.html, this will help you go back to the beginning when you make mistakes and to review what you learned later.
Each challenge.html contains multiple blanks (_) to fill in. Your task is to replace each one with the correct word. All of the words you need to fill in the blanks are already somewhere in the challenge, you just need to find them!
For example in the first exercise:
<head>
<script id='handlers'>
function handler(event) {
debugger;
console.assert(event.target.innerHTML === '_', 'event.target.innerHTML');
console.assert(event.target.nodeName === '_', 'event.target.nodeName');
console.assert(event.target.id === 'hi', 'event.target.id');
console.assert(event.target.className === 'secret', 'event.target._');
console.assert(event.type === 'click', 'event.type');
}
</script>
</head>
<body>
<section id='user-interface'>
<button id='hi' class='secret'>catch me if you can!</button>
</section>
<script id='listeners'>
document.getElementById('_').addEventListener('_', _);
</script>
</body>The best way to solve the exercises is to start by studying the code in <script id='handlers'>, and working "backwards" from there. This will help you know what you are looking for in the rest of the file, for example in the code above:
event.type === 'click'shows that you should be adding a "click" event, so you can fill in the event type like this:document.getElementById('_').addEventListener('click', _);event.targetis the HTML element that the event is attached to. So when you seeevent.target.id === 'hi'in the handler, you can fill in the event listener like this:document.getElementById('hi').addEventListener('click', _);
An enormous part of programming is actually just reading! Spotting relationships between lines of code, or finding small changes or mistakes in a file of code is a crucial skill to develop.
To get an idea of how this works, it will be very helpful to start by studying the completed example. Open both the example challenge.html and the example solution.html in Visual Studio Code and compare them side-by-side, can you find find how each blank was filled in?
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent