An interactive tool to learn about basic blood type compatibility, for educational purposes only.
This website was originally created at the request of my mother. Since this is a hobbyist project in nature, it is very basic in terms of features. Nevertheless, designing the entire website from scratch was a very valuable learning experience for me.
Although it is possible, and perhaps even recommended, to build the website using popular frameworks such as React, Vue, or Svelt, I've decided to prioritize simplicity and accessibility.
Plain HTML, CSS, and JavaScript: This classic trio forms the foundation for the website's user interface and interactive features, ensuring compatibility across various devices and browsers. Given the relatively small scale of the project, this technology stack achieves the educational goals effectively.
Since the website pretty much behaves similarly to a static site, there is no need for complex server-side logic. Thus, I've decided to set up a simple server using the following technologies:
-
Node.js: This popular JavaScript runtime environment efficiently handles server-side operations.
-
Express: This lightweight framework provides a structured approach to building the Node.js server, ensuring efficient organization and scalability.
-
Compression: This library optimizes data transfer, resulting in faster loading times and a smoother user experience.
Running Quynhbio's Interactive Blood Compatibility Checker from source is a relatively straightforward process as there is no compilation step involved.
To run the website from source, please make sure to download and install the following dependencies first:
node>=20.10.0compression>=1.7.4express>=4.18.2express-rate-limit>=7.1.5
To get started on Linux, first download Node.js using your package manager of choice. Please note that the exact package name may differ across distributions.
Fedora
dnf install nodejsDebian
apt install nodejsArch:
pacman -S nodejs-lts-ironNext, clone the GitHub repository onto your system.
git clone https://github.com/QingTian1927/Quynhbio-s-Interactive-Blood-Compatibility-CheckerAfterwards, cd to the cloned directory and install the npm dependencies.
npm installIf npm successfully sets up the Node.js environment, simply launch the server with the following command:
node server.jsYou should see the following message if everything goes well:
[INIT] [2024-02-16T04:32:12.318Z] Blood Compatibility listening on port {<PORT NUMBER>}
where <PORT NUMBER> could be any number, such as 4242 or 10000.
Finally, open up your browser of choice and enter the following into the address bar:
localhost:<PORT NUMBER>
If you specify the <PORT NUMBER> correctly, you should see the main page pop up.
Note: This is a very verbose instruction manual that explains the interactive elements of the website in a highly detailed manner. Since Quynhbio's Interactive Blood Compatibility Checker is designed to be as simple and intuitive as possible, you may skip this section if you wish to.
To mix two blood types together, one must first select the donor's blood type by clicking on one out of the four available blood bags, each representing a particular blood type of the donor.
For example, to select the donor's Type A blood, we must first move the mouse cursor to the blood bag representing Type A blood. When we haven't selected any donor's blood type, the mouse cursor, when hovered over any particular blood bag, will display an empty syringe like this:
Figure 1.1: The mouse cursor when no donor's blood type has been selected
When we click on a given blood bag, the mouse cursor will display a half-full syringe like so:
Figure 1.2: The mouse cursor when a donor's blood type has been selected
Whenever we select a donor's blood type, the currently selected blood type will be displayed in a circular notification icon next to the (?) button used to access the information page, like so:
Figure 1.3: A notification displaying the currently selected blood type
To mix two blood types together, one simply has to click on one out of the four illustrations representing the recipient's blood type.
Supposing that we want to mix Type A blood from the donor with Type O blood from the recipient, we first move the cursor to the illustration representing the recipient's Type O blood. When we haven't clicked on the illustration, or when the recipient's blood type is still in a normal state (i.e., when mixed with a compatible type), the mouse cursor will display a half-full syringe like so:
Figure 2.1: Type O blood before being mixed with Type A blood
Whenever we click on an illustration representing a recipient's blood type, we imagine that we are mixing the donor's blood type with the recipient's blood type. In the example above, since we are mixing Type A blood with Type O blood, the recipient's Type O blood will agglutinate and clump together, indicating that Type A and Type O blood are not compatible like so:
Figure 2.2: Type O blood agglutinating after being mixed with type A blood
When one mixes two incompatible blood types together, the cursor will display a half-full syringe with a red circle with a crossed diagonal line underneath (refer to Figure 2.1). This signifies that we cannot mix an agglutinated blood type with another blood type.
Thus, in the example above, to mix the recipient's Type O blood with another blood type, we must first restore the initial state of the recipient's blood types by clicking on the Reset button at the bottom of the page, like this:
Figure 3.1: The mouse cursor when hovered over the rest button
After clicking on the Reset button, the page will be restored to its initial state, just like when we open the page for the first time.
Apart from third-party libraries in its code base, Quynhbio's Interactive Blood Compatibility Checker also uses some assets from third-party sources, all of which will be listed in the following section:
-
The blood syringe cursor was modified from the
Green syringe element vectorbyrawpixel.comon Freepik -
The color scheme of the website was referenced from the
Paletteof the GNOME Human Interface Guidelines