Daedalus359.github.io/cube.html at master · Daedalus359/Daedalus359.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<head>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.10.2/Sortable.min.js"></script>
   <link rel="stylesheet" href="style.css">
   <title>Drag, Drop, Color, Cube!</title>
   <style>
      body {
         background-color: rgba(0,0,0,1);
      }
      div {
         margin: 10px;
      }
      input[type=text] {
         width: 50px;
      }
   </style>
</head>

<div id="container">
  <ul id="sortable-list">
    <li>r <input id="red" type="text" value="100"></li>
    <li>g <input id="green" type="text" value="55"></li>
    <li>b <input id="blue" type="text" value="200"></li>
    <li>a <input id="alpha" type="text" value="1"></li>
  </ul>
</div>

<div class="cube center">
  <div class="side front">xHey!</div>
  <div class="side back">x日</div>
  <div class="side right">z <a href="/index.html">HOME</a></div>
  <div class="side left">zWheee!</div>
  <div class="side top">yTop</div>
  <div class="side bottom">y:)</div>
</div>


<script>
   Sortable.create(document.getElementById('sortable-list'), {
      dragClass: 'sortable-drag',
      animation: 150
   });
</script>

<script>
   const redInput = document.getElementById("red");
   const greenInput = document.getElementById("green");
   const blueInput = document.getElementById("blue");
   const alphaInput = document.getElementById("alpha");

   function updateColor() {
      const red = parseInt(redInput.value);
      const green = parseInt(greenInput.value);
      const blue = parseInt(blueInput.value);
      const alpha = parseFloat(alphaInput.value);

      document.body.style.backgroundColor = `rgba(${red},${green},${blue},${alpha})`;
   }

   redInput.addEventListener("input", updateColor);
   greenInput.addEventListener("input", updateColor);
   blueInput.addEventListener("input", updateColor);
   alphaInput.addEventListener("input", updateColor);

   updateColor();
</script>