JSFiddle - React, Tailwind, and code Playground

by Ari Viinikainen

HTML

<div class="teksti" id="a">Lähettäjä</div>
<div class="teksti" id="b">Kytkin</div>
<div class="teksti" id="c">Reititin</div>
<div class="teksti" id="d">Vastaanottaja</div>
<div class="layers" id="item1">Sovellus</div>
<div class="layers" id="item2">Kuljetus</div>
<div class="layers" id="item3">Verkko</div>
<div class="layers" id="item4">Linkki</div>
<div class="layers" id="item5">Fyysinen</div>
<div class="sanoma" id="ss">Sanoma</div>
<div class="layers2" id="item6">Linkki</div>
<div class="layers2" id="item7">Fyysinen</div>
<div class="layers3" id="item8">Verkko</div>
<div class="layers3" id="item9">Linkki</div>
<div class="layers3" id="item10">Fyysinen</div>
<div class="layers4" id="item11">Sovellus</div>
<div class="layers4" id="item12">Kuljetus</div>
<div class="layers4" id="item13">Verkko</div>
<div class="layers4" id="item14">Linkki</div>
<div class="layers4" id="item15">Fyysinen</div>
<div class="res">
  <p id="result">| GET / HTTP/1.1 jne. |</p>
</div>

CSS

div {
  background-color: #9999CC;
  border: 1px solid black;
  border-radius: 5px;
  text-align: center;
  font-size: 1em;
  position: relative;
  top: 30px;
  left: 10px;
  margin-bottom: 50px;
}

.teksti {
  background-color: #FFFFFF;
  position: absolute;
  top: 0px;
  width: 75px;
  font-size: 0.9em;
}

.layers,
.layers2,
.layers3,
.layers4 {
  position: absolute;
  width: 75px;
}

.layers,
#a {
  left: 5px;
}

.layers2,
#b {
  left: 235px;
}

.layers3,
#c {
  left: 455px;
}

.layers4,
#d {
  left: 685px;
}

#item5,
#item7,
#item10,
#item15 {
  top: 230px;
}

#item4,
#item6,
#item9,
#item14 {
  top: 180px;
}

#item3,
#item8,
#item13 {
  top: 130px;
}

#item2,
#item12 {
  top: 80px;
}

#item1,
#item11 {
  top: 30px;
}

.sanoma {
  position: absolute;
  width: fit-content;
  left: 85px;
  top: 30px;
  background-color: #2299CC;
}

.k,
.v,
.l,
.f {
  position: absolute;
  width: fit-content;
  left: 110px;
  background-color: #F2FFCC;
  top: 105px;
}

.res {
  top: 300px;
  width: 740px;
}

JavaScript

// Kapsulointiesimerkki
// 25.3.2015 added example relation to real protocols
// 15.3.2016 poistetaan H1 myös kytkimessä
// 29.3.2016 pienennetty kerrosten välejä että näkyy paremmin pienellä näytöllä + real protocols examplea muokataan myös silloin kuin headereitä poistetaan
// 10.1.2018 Kavennettu, jotta mahtuisi 768 pikseliä leveeseen TIM-sivuun
// TODO: siisti koodia, jos jaksat, vois yksinkertaistaa

var alas = 50;
var testattava = "";
var leveys = 0;
var kerros = 'H5';
var tila = 0;
var orig = '| GET / HTTP/1.1 jne. |';
var protot = ['|TCP portit 80 jne|', '|IP osoiteet ja otsikot |', '|MAC osoitteet|', '|Muunnos fyysiseksi signaaliksi|'];
var nextHeader = {
  'H5': 0,
  'H4': 1,
  'H3': 2,
  'H2': 3
};

$(document).ready(function() {
  $('.sanoma').click(function() {
    if (kerros != 'H5') {
      kliku(this);
    } else {
      $('.' + this.className).animate({
        top: 30 + alas
      });
      leveys += $(this).width();
      kapsuloi($(this), kerros);
    }
  });
});

function kapsuloi(element, h) {
  var kerrokset = ["k", "v", "l", "f"];
  var headerit = ['H4', 'H3', 'H2', 'H1'];
  var index = nextHeader[h];
  //$("#result").html(protot[index] + $("#result").html());
  //$("#result").html(orig + protot.slice(0, index+1).join(""));
  $("#result")
    .delay(1000)
    .queue(function(n) {
      $(this).html(orig + protot.slice(0, index + 1).join(""));
      n();
    })
    // create header
  createDiv(headerit[index], 'sanoma', kerrokset[index] + headerit[index]);
  $('#' + kerrokset[index] + headerit[index]).animate({
    left: 85 + leveys // Mihin kohtaan suhteessa sanomaan tulee headerit
  });
  leveys += $('#' + kerrokset[index] + headerit[index]).width();
  kerros = headerit[index]; // update what layer we are on
}

function createDiv(text, luokka, id) {
  d = document.createElement('div');
  var paljon = {
    'H4': 50,
    'H3': 100,
    'H2': 150,
    'H1': 200
  };
  var vari = {
    'H4': '#F2FFCC',
    'H3': '#22FF00',
    'H2':...