![]() |
2 years ago | |
---|---|---|
.. | ||
README.md | 2 years ago | |
get-them-all.data.js | 2 years ago | |
get-them-all.html | 2 years ago |
README.md
Get them all
Instructions
You've been attributed the task to find the main architect of the Tower of Pisa before he achieves his plans, avoiding us nowadays all those lame pictures of people pretending to stop it from falling.
You arrive at the architects' chamber to find him, but all you have in front of you is a bunch of unknown people. Step by step, with the little information you have, gather information and figure out by elimination who he is.
Launch the provided HTML file in the browser to begin your investigation.
On top of the webpage, each of the four buttons fires a function:
-
Write the body of the
getArchitects
function, which returns an array containing 2 arrays of HTML elements:- the first array contains the architects, all corresponding to a
<a>
tag - the second array contains all the non-architects people
- the first array contains the architects, all corresponding to a
-
Write the body of the
getClassical
function, which returns an array containing 2 arrays of HTML elements:- the first array contains the architects belonging to the
classical
class - the second array contains the non-classical architects
- the first array contains the architects belonging to the
-
Write the body of the
getActive
function, which returns an array containing 2 arrays of HTML elements:- the first array contains the classical architects who are
active
in their class - the second array contains the non-active classical architects
- the first array contains the classical architects who are
-
Write the body of the
getBonannoPisano
function, which returns an array containing:- the HTML element of the architect you're looking for, whose
id
isBonannoPisano
- an array which contains all the remaining HTML elements of active classical architects
- the HTML element of the architect you're looking for, whose
From now on, don't forget to export all the expected functions, so that they can be imported to be tested
>export const getArchitects = () => {...}
Notions
- HTML Element
getElementsByTagName()
getElementsByClassName()
getElementById()
querySelectorAll()
/querySelector()
- ...and bit of CSS that could help with the
:not
pseudo class
Files
You only need to create & submit the JS file get-them-all.js
; we're providing you the following files to download (click right and save link) & test locally:
-
the HTML file get-them-all.html to open in the browser, which includes:
- the JS script running some code, and which will also allow to run yours
- some CSS pre-styled classes: feel free to use those as they are, or modify them
- the import of the data
-
the data file get-them-all.data.js used to generate content in the HTML