In this project, I tackled the "Sword Master Mix-Up" challenge. The backstory revolves around two legendary swordsmasters, Liechtenauer and Musashi, who accidentally mixed up their swords at a cosplay event.
The task was to develop a web page using HTML, CSS, and JavaScript to manage and assign these swords to the respective masters.
The main functionalities include randomly displaying sword images, showing/hiding a button row when hovering over the sword image, and updating a counter when assigning swords to Liechtenauer or Musashi. The challenge also involved fetching sword data from a simulated REST API using JavaScript's fetch method.
For an extra touch and achieving a higher grade, I implemented additional features. The sword details fetched from the API are displayed in a "result" div with information about the outcome of each action. Moreover, when a sword is correctly assigned, an image of the sword is dynamically added to the corresponding master's section.
The project not only aimed for functionality but also emphasized a clean and visually appealing layout. The code ensures a seamless user experience without any console errors.