String/string.html at main · MIKEC7777/String · 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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

<!-- saved from url=(0062)file:///Users/mikec96/Desktop/week3starterfile%204/string.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><style type="text/css">
    /* Text Styles */
    #Text {
      font-style: italic;
      font-weight: bold;
      font-family: verdana, arial;
      color: #000;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10;
      cursor: default;
    }
    #Text div {
      position: relative;
    }
    #Text div div {
      position: absolute;
      top: 0;
      left: 0;
      text-align: center;
    }
  </style>
  </head><body>
  <script type="text/javascript">
    var msg = "MIT boot-camp-----";
    msg = msg.split("");
    var n = msg.length - 1;
    var size = 24;
    var letter_spacing = 5;
    var speed = 0.3;
    var currStep = 20,
      ymouse = 20,
      xmouse = 20,
      y = [],
      x = [],
      Y = [],
      X = [],
      parent = document.createElement("div"),
      ap = document.createElement("div"),
      bod = document.documentElement; // document.body
    var mouse = function (e) {
      ymouse = e.clientY;
      xmouse = e.clientX;
    };
    function update() {
      // first drags second and we all follow the mouse
      y[0] = Y[0] += (ymouse - Y[0]) * speed;
      x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
      for (let i = n; i > 0; --i) {
        y[i] = Y[i] += (y[i - 1] - Y[i]) * speed;
        x[i] = X[i] += (x[i - 1] - X[i]) * speed;
      }
      // update the divs
      for (let d, i = n; i > -1; --i) {
        d = document.getElementById("id" + i);
        d.style.top = y[i];
        d.style.left = x[i];
      }
      setTimeout(update, 100); // loop over update
    }
    var init = function () {
      // appends message divs, & sets initial values for positioning arrays

      for (let d, i = n; i > -1; --i) {
        d = document.createElement("div");
        d.id = "id" + i;
        d.style.height = d.style.width = size;
        d.appendChild(document.createTextNode(msg[i]));
        ap.appendChild(d);
        y[i] = x[i] = Y[i] = X[i] = 0;
      }
      parent.appendChild(ap);
      document.body.appendChild(parent);
      update();
    };
    parent.id = "Text";
    parent.style.fontSize = size + "px";
    if (window.addEventListener) {
      window.addEventListener("load", init, false);
      document.addEventListener("mousemove", mouse, false);
    } else if (window.attachEvent) {
      window.attachEvent("onload", init);
      document.attachEvent("onmousemove", mouse);
    }
  </script>
  <div class="svg-container">
    <svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
      <line stroke="#5AB1BB" stroke-width="2" x1="0" x2="830" y1="430" y2="430"></line>

      <rect x="0" y="0" width="840" height="430" stroke="black" fill="transparent" stroke-width="5"></rect>
    </svg>
  </div>

<div id="Text" style="font-size: 24px;"><div><div id="id17" style="width: 24px; height: 24px; top: 92.9954px; left: 170.001px;">-</div><div id="id16" style="width: 24px; height: 24px; top: 92.9983px; left: 170px;">-</div><div id="id15" style="width: 24px; height: 24px; top: 92.9994px; left: 170px;">-</div><div id="id14" style="width: 24px; height: 24px; top: 92.9998px; left: 170px;">-</div><div id="id13" style="width: 24px; height: 24px; top: 92.9999px; left: 170px;">-</div><div id="id12" style="width: 24px; height: 24px; top: 93px; left: 170px;">p</div><div id="id11" style="width: 24px; height: 24px; top: 93px; left: 170px;">m</div><div id="id10" style="width: 24px; height: 24px; top: 93px; left: 170px;">a</div><div id="id9" style="width: 24px; height: 24px; top: 93px; left: 170px;">c</div><div id="id8" style="width: 24px; height: 24px; top: 93px; left: 170px;">-</div><div id="id7" style="width: 24px; height: 24px; top: 93px; left: 170px;">t</div><div id="id6" style="width: 24px; height: 24px; top: 93px; left: 170px;">o</div><div id="id5" style="width: 24px; height: 24px; top: 93px; left: 170px;">o</div><div id="id4" style="width: 24px; height: 24px; top: 93px; left: 170px;">b</div><div id="id3" style="width: 24px; height: 24px; top: 93px; left: 170px;"> </div><div id="id2" style="width: 24px; height: 24px; top: 93px; left: 170px;">T</div><div id="id1" style="width: 24px; height: 24px; top: 93px; left: 170px;">I</div><div id="id0" style="width: 24px; height: 24px; top: 93px; left: 170px;">M</div></div></div></body></html>