🚀 JavaScript Exercise

We want to create an accordion displaying only the content of a section at the same time.

You must follow the next code sample.

<dl>
  <dt>Section 1</dt>
  <dd>
    <p>Section 1 Content...</p>
  </dd>
  <dt>Section 2</dt>
  <dd>
    <p>Section 2 Content...</p>
  </dd>
  <dt>Section 3</dt>
  <dd>
    <p>Section 3 Content...</p>
  </dd>
</dl>

📦 Conditions

• Use Sass for generate CSS
• Use ES6
• Use only Vanilla JS, without any JS framework

⭐️ Bonus

• Add new section with Ajax content

📘 Solution

Hi, I'm Adri and here is my solution for your recruitment process

What I did:

• Install Babel to compile JS6 code to JS2015.

• Intall SASS to the project.

• Configure package.json and create 2 scripts to run Babel and SASS. If needed, you can add "--watch" at the end of each script to put a listeners so the code will be autogenerated during your work. To run it you only have to write in cms "npm run babel" or "npm run scss".

• Configure .gitignore.

• Create the tree project folders and files.

• Code the project.

• And that's all! The JS2015 and CSS is auto compiled using what I mentioned before. These both files are called in index.html

• I'm using those files to run the project because of the support for all the browsers

• BONUS I used a GOT API to get all characters from the show and write only one randomly in the last item of the list.

Hope you like what I did and if you need more information, please let me know. Was fun 😄

Best regards.