-
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/rominamartinliberon/",
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
#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")
View Compiled
$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 {
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;
}
}
}
View Compiled
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");
}
}
This Pen doesn't use any external JavaScript resources.