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 debuggers 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.