Who can get my blood?

index.pug

-
  var BLOOD_TYPES = ["O−", "O+", "A−", "A+", "B−", "B+", "AB−", "AB+"];
  
mixin bloodSelector(value)
  div= value

mixin bloodTypeMixin(value, side)
  .human(class=side)
    .scribble
      span.blood_type= value
      .head
      .body
    .via
    .blood_via

#about
  .mySocial
    a.social(
      href="https://www.linkedin.com/in/rominamartinlib/",
      target="_new"
    )
      i.fab.fa-linkedin
    a.social(href="https://rominamartin.github.io/", target="_new")
      i.fab.fa-github
    a.social(href="https://twitter.com/rominamartinlib", target="_new")
      i.fab.fa-twitter
    a.social(href="https://donatinghelps.com/", target="_new")
      i.fas.fa-globe

#content
  h3= 'Select the donor blood type:'
  #blood_selector
    each type in BLOOD_TYPES
      +bloodSelector(type)
  #blood_content
    .bar
    .main_bag
      .blood
  #center_via_c
    .center_via
      .blood_via
  #humans
    each type, index in BLOOD_TYPES
      if (index % 2)
        +bloodTypeMixin(type, "right")
      else
        +bloodTypeMixin(type, "left")

script.js

const humans_parent = document.getElementById("humans");
const BLOOD_TYPES = {
  "O−": ["O−", "O+", "A−", "A+", "B−", "B+", "AB−", "AB+"],
  "O+": ["O+", "A+", "B+", "AB+"],
  "A−": ["A−", "A+", "AB−", "AB+"],
  "A+": ["A+", "AB+"],
  "B−": ["B−", "B+", "AB−", "AB+"],
  "B+": ["B+", "AB+"],
  "AB−": ["AB−", "AB+"],
  "AB+": ["AB+"]
};
const reset_button = document.getElementById("reset");
const selector = document.getElementById("blood_selector");
const blood_vias = document.querySelectorAll("#humans .human .blood_via");
const blood_bag = document.querySelector("#blood_content > div.main_bag > div");
const center_via = document.querySelector(".center_via > .blood_via");
const blood_types = document.querySelectorAll(".blood_type");
let lastCalled;
addListeners();

function callIfChildren(e) {
  if (lastCalled) change();
  if (e.target !== this) setRecipents(e);
}

function addListeners() {
  selector.addEventListener("click", callIfChildren);
  reset.addEventListener("click", reset);
}

function reset() {
  change();
  blood_bag.style.height = "100px";
  center_via.style.height = "0px";
}

function change() {
  lastCalled.target.classList.remove("highlight");

  for (let i = 0; i < blood_vias.length; i++) {
    blood_vias[i].style.width = "0px";
    blood_types[i].classList.remove("highlightText");
  }
}

function timeout(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

async function setRecipents(e) {
  e.target.classList.add("highlight");
  lastCalled = e;

  const donor = e.target.innerText;
  for (let item of BLOOD_TYPES[donor]) {
    const recipent_index = Object.keys(BLOOD_TYPES).indexOf(item);
    const height = 50 + 50 * Math.floor(recipent_index / 2);
    const blood_height = 125 - 25 * Math.floor(recipent_index / 2);
    blood_bag.style.height = `${blood_height}px`;
    center_via.style.height = `${height}px`;

    await timeout(100);
    blood_vias[recipent_index].style.width = "100%";
    blood_types[recipent_index].classList.add("highlightText");
  }
}

style.scss

$wires_color: #ccc;
$human_color: #666;
$blood_color: #b51e23;
$transition_time: 1s;
$global_background: #f7f7f7;

body {
  overflow-y: hidden;
  background: $global_background;
  font-family: "Montserrat", sans-serif;
}
#about {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  a {
    display: inline-block;
    height: 2.5em;
    margin: 0 5px;
  }
  a i {
    font-size: 1.5em;
    &.fa-linkedin {
      color: #0073b0;
    }
    &.fa-github,
    &.fa-globe {
      color: #24292e;
    }
    &.fa-twitter {
      color: #1da1f2;
    }
  }
}
#content {
  position: relative;
  margin: 50px auto;
  width: 600px;
  height: 600px;
}

h3 {
  position: absolute;
  top: 0px;
  left: 0px;
}
#blood_selector {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 1fr;
  grid-gap: 5px;
  width: 200px;
  height: 100px;
  position: absolute;
  left: 10px;
  top: 45px;
  z-index: 2;

  div {
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: $global_background;
    border: 1px solid $blood_color;
    border-radius: 25%;
  }

  div:hover {
    border: 1px solid #1da1f2;
    font-weight: bold;
    cursor: pointer;
  }
}

#blood_content {
  position: absolute;
  top: 50px;
  width: 100%;
  height: 100%;
}
#center_via_c {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;

  .center_via {
    width: 8px;
    background: $wires_color;
    height: 200px;
    position: absolute;
    left: 304px;
    top: 276px;
  }

  .blood_via {
    height: 0;
    background-color: $blood_color;
    right: 50%;
    width: 8px;
    transition: height $transition_time/4;
  }
}

.bar {
  position: fixed;
  right: 0;
  top: 55px;
  width: 55%;
  height: 8px;
  border-radius: 2px 0 0 2px;
  background-color: $wires_color;
}

.main_bag {
  position: absolute;
  width: 100px;
  height: 140px;
  top: 70px;
  left: 250px;
  border-radius: 30px;
  opacity: 0.8;
  background-color: rgba(154, 207, 234, 0.9);
  border: 8px solid rgba(154, 207, 234, 0.9);

  .blood {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100px;
    background-color: $blood_color;
    border-radius: 0 0 35px 35px;
    transition: height $transition_time;

    &::before {
      content: "";
      position: absolute;
      top: -6px;
      width: 100%;
      height: 10px;
      background-color: #92191b;
      border-radius: 100%;
    }
  }
  &::before {
    content: "";
    position: absolute;
    top: -118px;
    left: 45%;
    width: 10%;
    height: 110px;
    background-color: $wires_color;
  }
}

#humans {
  position: absolute;
  top: 276px;
  width: 400px;
  height: 200px;
  left: 108px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, 1fr);

  .human {
    position: relative;
    .via {
      position: absolute;
      text-align: right;
      width: 100%;
      height: 8px;
      background-color: $wires_color;
      bottom: 0;
    }
    .blood_via {
      position: absolute;
      height: 8px;
      background-color: $blood_color;
      width: 0;
      bottom: 0;
      transition: width $transition_time;
    }

    &.left {
      display: grid;
      justify-content: left;
      align-content: center;
      .blood_via {
        right: 0;
      }
      .scribble {
        left: -30px;
        span {
          left: -40px;
          text-align: right;
        }
      }
    }
    &.right {
      display: grid;
      justify-content: right;
      align-content: center;
      .scribble {
        right: -60px;
        span {
          right: -10px;
        }
      }
    }

    .scribble {
      position: absolute;
      height: 50px;
      width: 50px;
      top: 0;
      transition: background $transition_time;

      span {
        position: absolute;
        display: grid;
        align-items: end;
        height: 100%;
      }

      .head {
        width: 30%;
        height: 30%;
        background-color: $human_color;
        border-radius: 50%;
        margin: 2px auto;
        transition: background $transition_time;
        position: absolute;
        top: 30%;
        left: 5%;
      }
      .body {
        position: absolute;
        bottom: 0;
        width: 40%;
        height: 30%;
        background-color: $human_color;
        border-radius: 50% 50% 0 0;
        margin: 0 auto;
        transition: background $transition_time;
      }
    }
  }
}

.no_transition {
  transition: none !important;
}

.highlight {
  border: 2px solid $blood_color !important;
  font-weight: bold;
}
.highlightText {
  font-weight: bold;
}

@media only screen and (max-width: 400px) {
  #content {
    position: relative;
    margin: 25px auto;
    width: 300px;
    height: 300px;

    h3 {
      top: 10px;
      font-size: 1em;
    }

    #blood_selector {
      width: 150px;
      height: 75px;
      font-size: 0.75em;
      top: 45px;
    }
    .bar {
      top: 40px;
    }

    .main_bag {
      width: 75px;
      height: 105px;
      left: 125px;

      &::before {
        top: -108px;
        height: 100px;
      }

      .blood {
        height: 70%;
      }
    }
    #center_via_c .center_via {
      left: 167px;
      top: 240px;
    }
    #humans {
      top: 240px;
      width: 180px;
      left: 85px;
    }
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&amp;display=swap" rel="stylesheet" />

who-can-get-my-blood.markdown

Who can get my blood?

Donate blood, help people. Find out which blood types does your donated blood goes to.

Not responsive [yet]

A Pen by Romina on CodePen.

License.