Skip to content

Latest commit

 

History

History
54 lines (41 loc) · 1.52 KB

README.md

File metadata and controls

54 lines (41 loc) · 1.52 KB
Raw

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