JSFiddle - React, Tailwind, and code Playground

by colus001

HTML

<body>

  <h2>jQuery Elevator 안에서 우린 사랑을 나눴지</h2>

  <div class="tower">

    <div class="led" id="led">1</div>
    <div class="floor" id="floor_7" seq="7">7F</div>
    <div class="floor" id="floor_6" seq="6">6F</div>
    <div class="floor" id="floor_5" seq="5">5F</div>
    <div class="floor" id="floor_4" seq="4">4F</div>
    <div class="floor" id="floor_3" seq="3">3F</div>
    <div class="floor" id="floor_2" seq="2">2F</div>
    <div class="floor" id="floor_1" seq="1">1F</div>
    <div class="floor human" id="human">
      <div class="male">M</div>
      <div class="female">F</div>
    </div>

  </div>

</body>

CSS

.tower {
  background: gray;
  display: inline-block;
  width: 100px;
}

.floor {
  height: 100px;
  background: white;
  margin: 10px;
  cursor: pointer;
}

.human {
  background-color: transparent;
  height: 80px;
  width: 60px;
  position: absolute;
  text-align: center;
  cursor: default;
}

.male {
  background: skyblue;
  width: 30px;
  height: 100%;
  display: inline-block;
}

.female {
  background: pink;
  width: 25px;
  height: 100%;
  display: inline-block;
}

.led {
  background: black;
  height: 20px;
  margin: 10px;
  text-align: center;
  color: yellow;
}

.door {
  position: absolute;
  background-color: #aaa;
  display: none;
  height: 100px;
  width: 80px;
}

.clicked {
  background: yellow;
}

JavaScript

$(document).ready(function(){

  var human = $('#human');
  var floors = $('.floor');
  var first_floor = $('#floor_1');
  var led = $('#led');

  // 엘레베이터를 이동시키기
  var move_elevator = function (floor, pos) {

    human.animate({
      left: '-=90px'
    }, 500, function() {
      human.animate({
        top: pos.top+10,
        left: pos.left+10
      }, 1000, function(){
        var door= $('<div class="door"></div>');
        door.appendTo('body');
        door.css({ top: pos.top+10, left: pos.left+10, width: 80 }).show();
        door.animate({ width: 0 }, function () {
          floor.removeClass('clicked');
          human.animate({left: '+=90px'}, 500);
        });
      });
    });

  };

  // 이니셜라이즈
  human.css({
    top: first_floor.position().top+10,
    left: first_floor.position().left+100
  });

  floors.click(function(){

    var click_count = $('.clicked').length;

    if ( click_count >= 2 ) {
      alert('고만 눌러 임마!');
      return;
    }

    if ( $(this).attr('id') === 'human' ) {
      return;
    }

    var clicked_floor = $(this);
    var pos = $(this).position();

    led.text($(this).attr('seq'));

    // 문 열리고 닫히기
    var door = $('<div class="door"></div>');
    var human_pos = human.position();

    door.appendTo('body');
    door.css({ top:human_pos.top, left: human_pos.left-90}).show();
    door.animate({ width: 0 }, function(){
      move_elevator(clicked_floor, pos);
    });

    clicked_floor.addClass('clicked');

  });

});