Have I Been PWNED clone application

This is the site: https://haveibeenpwned.com/

Have I been PWNED lets you check if you have an account that has been compromised in a data breach

Requirements

Using the HiBP API : https://haveibeenpwned.com/API/v2 , create a SPA in vanilla JS having the following functionalities:

• search for breaches and display them (with pagination and total number)
  • if nothing was searched for, the default page should display all the breaches
• search by account or email and display if your account was compromised in any breach. List them in the same way like in the previous view
• add a detailed view for the breach where you display the following data:
  • description
  • breach date
  • image
  • compromised data
  • compromised accounts
  • date added to HiBP
• use only JS to generate the pages
• you can use any CSS framework
• no other .html other than the one present :P
• make the UI components as reusable as possible
• don't use any external library or package besides moment js for date formatting
• have a look on this list and try to respect it as much as you see it fits your situation ;) : https://github.com/ryanmcdermott/clean-code-javascript ( url to the book: https://www.investigatii.md/uploads/resurse/Clean_Code.pdf )

Inspiration:

https://dev.to/rishavs/making-a-single-page-app-in-ye-good-olde-js-es6-3eng

Bonus points: - the detailed view must contain a breadcrumb which, by clicking on the parent (Breaches or Accounts), it must redirect you to the search page where it must have the same state as before clicking.

Use postman to test the API:

• https://www.getpostman.com/
• https://www.youtube.com/watch?v=t5n07Ybz7yI&t

Useful links

• https://haveibeenpwned.com/API/v2#BreachesForAccount

• https://haveibeenpwned.com/API/v2#AllBreaches

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI ;)

Basic mocks - you can add any design you want, the mocks are made just to describe the functionality