Implement the buildNav function:

1. It takes an array of objects as its argument, and returns a nav element.
2. The array passed into the function contains the data needed to construct the nav.
3. Each object in the array contains the data needed to construct a single anchor tag inside the nav.
4. Each object contains href, textContent and title properties.

See below an example of a return value of buildNav, depending on the data passed into it:

<nav>
  <a href="https://www.example.com" title="Go to the home page">Home</a>
  <a href="https://www.example.com/about" title="Learn more about our company">About</a>
  <a href="https://www.example.com/services" title="View our available services">Services</a>
  <a href="https://www.example.com/blog" title="Read our latest blog posts">Blog</a>
  <a href="https://www.example.com/contact" title="Get in touch with us">Contact</a>
</nav>

❗ After the buildNav function declaration you will see the function being used to create a nav and attach it to the DOM.

This task has too parts 2A and 2B:

• 2A is concerned with implementing a function buildLearnerCard that returns a single learner card.
• 2B is concerned with utilizing the function to create the learner cards and attaching them to the DOM.

You will need to tackle 2A and 2B in parallel at the beginning:

1. Begin 2A by stubbing out a simple card by returning a <div>WIP</div> element from buildLearnerCard.

2. Switch to 2B and loop over the learners array of data.

3. At each iteration of the loop, generate a learner card using buildLearnerCard:

   • The first argument buildLearnerCard is the learner of interest in the current iteration of the loop.
   • The second argument is the whole languages array.

4. Also, at each iteration of the loop, you need to append the card to the section element inside the HTML.

5. Reload Chrome and see all your "WIPs" rendering inside the section element, one per learner.

6. Turn back to part 2A and implement the function so that the structure returned from it looks like the following example:

   <div class="learner-card">
     <p>Kenneth Fisher</p>
     <p>Learner ID: 24</p>
     <p>Date of Birth: 1990-01-01</p>
     <p>Favorite Language: Python</p>
   </div>

   ❗ Note that because of the styles applied in styles.css, some paragraphs will be hidden from view and you will have use Dev Tools to see them!

7. To make the cards behave like the ones in the mock, inside buildLearnerCard add a listener for click events on the card that does the following:

   1. Adds the class name 'active' to the clicked div.learner-card.
   2. Removes the 'active' class name from any other card that has it, if any.

This task is more tedious but more straightforward than TASK 2! Implement the buildFooter function:

1. It takes an object as its only argument, containing all the data needed to build the footer.
2. The function returns a fully-built footer.
3. Ensure the email link works correctly and attempts to open an email client when clicked.

See below an example of a possible return value of buildNav, depending on the data passed into it:

  <footer>
    <div class="company-info">
      <p class="company-name">Bloom Institute of Technology</p>
      <p class="address">123 Main Street, City, Country</p>
      <p class="contact-email">Email: <a href="mailto:[email protected]"> [email protected]</a></p>
    </div>
    <div class="social-media">
      <a href="https://twitter.com/example">Twitter</a>
      <a href="https://www.facebook.com/example">Facebook</a>
      <a href="https://www.instagram.com/example">Instagram</a>
    </div>
    <div>© BLOOM INSTITUTE OF TECHNOLOGY 2023</div>
  </footer>

❗ After the buildFooter function declaration you will find the function being used to create a nav and attach it to the DOM.

Create the necessary code so that clicking on the <section> anywhere outside of a card deactivates the active card if any. See this functionality in action in the mock.

Check out the Solution Video for this project in your learning platform. In it, an industry expert will walk you through their thinking in detail while they solve the tasks. The Solution Videos are highly recommended even if you are not stuck: you will learn lots of tricks.

This project requires Node to be correctly installed on your computer to work. Your learning materials should have covered the installation of Node. Sometimes Node can be installed but misconfigured. You can try executing npm run fixit (check package.json to see what this does), but if Node errors are recurrent, it indicates something is wrong with your machine or configuration, so you should request assistance from learner assistants.

No. Everything you need should be installed already.

The CSS is the domain of a different team, and in this particular project we're not supposed to touch it. Do not use inline styles to get around this limitation.

This particular part of the product is a Single Page Application, so the HTML is mostly empty and the page is generated automatically using JavaScript and raw data. We would not want to manually edit HTML files in a website that changed all the time! It would be untenable.

Save your changes and reload the site in Chrome. If your code has a syntax problem, the app will print error messages in the console. Focus on the first message. Place console logs right before the crash site (errors usually inform of the line number where the problem originates) and see if your variables contain the data you think they do.

Suppose there are no errors, but the page is not doing what it should. In that case, the debugging technique is similar: put console logs to ensure that the code you are working on is executing and check that all variables in the area hold the correct data.

Execute npm test in your terminal. If a particular test is giving you grief, don't jump straight to the code to try and fix it. Go to Chrome first, and make sure you can replicate the problem there. A problem we can reliably replicate is a problem mostly fixed.

On occasion the test runner will get stuck. Use CTRL-C to kill the tests, and then npm test to launch them again. Try to reproduce the problem the test is complaining about by interacting with the site in Chrome, and do not code "to make the test happy". Code so that your app does exactly what the mock does. The tests are there for confirmation. Although it's possible that a particular test be flawed, statistically it's more likely that the bug is in your own code. Check all your texts to make sure they match the mock exactly! If the problem persists, please request assistance from Staff.

If you need to disable all tests except the one you are focusing on, edit the mvp.test.js file and, as an example, change test('👉 focus on this', () => { etc }) to be test.only('👉 focus on this', () => { etc }). (Note the "only".)

Do NOT delete your repository from GitHub! Instead, commit frequently as you work. Make a commit whenever you achieve anything and the app isn't crashing in Chrome. This in practice creates restore points you can use should you wreak havoc with your app. If you find yourself in a mess, use git reset --hard to simply discard all changes to your code since your last commit. If you are dead-set on restarting the challenge from scratch, you can do this with Git as well, but it is advised that you request assistance from a learner assistant.

Although a small, "old-fashioned" website might be made of just HTML, CSS and JS files, these days we mostly manage projects with Node and its package manager, NPM. Node apps typically have a package.json file and several other configuration files placed at the root of the project. This project also includes automated tests and a web server, which adds a little bit of extra complexity and files.

Web projects can be organized in many ways and there aren't many standards. Some developers like the freedom, while others prefer to use opinionated frameworks, which can do a lot of magic but require folders and files be structured and named just so.

This way we can easily import your code as a single function in the mvp.test.js test suite. The export syntax is at the bottom of index.js.

The package.json file contains meta-information about the project like its version number, scripts that the developer can execute, and a list of the dependencies that are downloaded when you execute npm install. There can be some wiggle room to allow newer versions of the dependencies to be installed, so the package-lock.json file, when present, makes sure the exact same versions of everything are used every time the project is installed from scratch.

Give ChatGPT the following input for a detailed breakdown:

Hello, I'm looking at a JavaScript project on GitHub, and inside the package.json file I am seeing the following "script":

"start": "fkill :3003 -s && node ./backend/server.js"

Can you explain in detail, but with simple terms, to an audience of inexperienced web developers, what the "start" script is doing?

This file works in combination with the Eslint extension for VSCode to highlight syntax errors and problems in your code. By editing this file you can customize your linting rules.

Jest is a framework that allows you to write tests and execute them, to alert you very quickly of problems with the code. Jest can do in seconds what an entire Quality Assurance team would take hours or even days. In the context of the Sprint Challenge, Jest is used to check your code against specification and give you a grade (% of tests passing).