In this practice, your tasks will be to use the window
object to manipulate a
basic portfolio page, find objects within the document
by implementing some
search functions, and import
/export
files with ES6 modules.
Clone the practice from the starter.
Run node app.js
to start the application. Navigate to localhost:5000 in your
browser and follow the instructions below.
You will be provided an index.html file within the assets folder that contains a basic portfolio site. Connect the /assets/js/index.js to the HTML page to execute it once the HTML page loads the JavaScript file. Load is as a JavaScript module.
Make sure the code in the index.js file executes only after everything on the HTML document has loaded.
You'll notice there are some calls to functions that don't exist in the index.js file. These functions exist in /assets/js/manipulate.js and /assets/js/search.js. Your task will be to properly export those functions from those files and import them into the index.js file using ES6 modules.
Debug your import/export statements using the "Console" tab in your browser's Developer Tools.
Now that you've connected everything, the functions being called need to be filled in! Start in /assets/js/manipulate.js.
Here you will find functions that manipulate the document
in various ways.
Read the comments within the functions to complete the functions accordingly. To
change the text inside of an HTML element, set the .innerText
property on
the element to a different value. For example, the following code will change
the text content of the body
HTML element to "Hello World!".
document.body.innerText = "Hello World!"
Use the "Console" tab in your browser's Developer Tools to test your code. Add
debugger
s in your code to freeze the code execution on that line to
examine the variables at that time of execution.
Here you will combine your knowledge of
search algorithms and the DOM. You can think of the DOM as a tree,
where each item in the DOM (e.g. <div>
, <p>
, etc.) can be considered a
node of the tree.
The search functions are described in /assets/js/search.js
for you to complete (e.g.
findElementById
, findElementsOfTag
, etc.). You may find the .children
,
.tagName
, and .classList
properties of an HTML element to be useful. If
necessary, you may create your own helper functions.
To view the output of the functions in search.js, use console.log()
to
print the results of calling the functions in index.js.