- 1. Project Summary
- 2. User Stories
- 3. Web and Mobile Prototypes
- 4. Preview
- 5. General Features
- 6. Features of Each Function
- 7. Who are the Users?
- 8. Objectives Related to the Product
- 9. Technologies Used
- 10. Testing
- 11. Testing Issues
This project is based on a web platform called "Tarot," which aims to provide detailed information about the 78 tarot cards, including aspects such as their names, types (major arcana and minor arcana), and their meanings in the upright and reversed positions. The platform offers various functionalities, which include:
Sorting: Allows organizing the cards according to their categorization into major and minor arcana.
Filtering: Facilitates the search for specific cards by applying filters based on card types, such as cups, wands, swords, and pentacles.
Random Card: Offers added value with the function to generate a random card by clicking on a dedicated button.
Search: Provides a search feature that allows users to find specific cards by their names.
Full View: Includes a button that allows users to view all the cards in one place.
In summary, this web platform about tarot provides an interactive and comprehensive experience for exploring and understanding the cards in a detailed and versatile manner.
Web Images
Mobile Images
Web Video
Mobile Video
This project consists of several main documents: index.html, main.js, data.js, data.spec.js, package.json, style.css, and tarot.js.
- index.html: The main structure of our website.
- main.js: The file containing various functions and responsible for DOM manipulation.
- data.js: The file housing our three central functions.
- package.json: The starting point for npm operations.
- style.css: The file that encompasses all the styles of our web page, including images.
- tarot.js: The file containing all the fundamental information of our website.
randomCard (getRandomCard): This function selects a card randomly each time a click is made.
filterByType (sortByCategory): This function searches for cards based on their categorization as major or minor arcana.
filterBySuit (filterByType): This function performs filtering to identify and display the different card categories or types available.
This project is aimed at tarot enthusiasts.
The primary purpose of this product is to allow users to interactively explore all the tarot cards, discover how many there are in total, and understand the meaning of each of them. It also provides users with the ability to examine the most relevant characteristics of each arcana and access detailed information about their different categories.
- JavaScript: Executes functionality for the web and thus displays the obtained results.
- HTML5: Facilitates the structure of our application.
- CSS3 (@mediaquery): Determines the style, design of our application, and responsive design.
- GitHub, Git, NodeJs, Jest.
- npm run pretest
- npm test
- npm run open-coverage-report
HTML Issues:
-
An additional div was found in the HTML code that was not necessary, which could cause layout or structure problems on the web page.
-
The header was not properly closed, which could lead to formatting errors on the web page.
-
In the footer, using "&" directly caused an error, and the solution was to use "&" to avoid HTML encoding issues.
Functionality Testing Issues:
-
In the "filterByType" function test, it initially expected the function to return "1 item," but it was changed to return the ".length" property of the list of items, which resolved the issue.
-
In the "getRandomCard" function test, it initially returned "undefined." The solution was to modify the expected value in the test parentheses to be empty, which resolved the problem.
-
There was an issue where the function was not being imported correctly, resulting in the function not doing anything. After checking and correcting the import, the function started working as expected.
These changes and corrections were essential to ensure that the web page and functions meet their objectives and work correctly.