a1-gettingstarted/index.html at main · DSoiffer/a1-gettingstarted · 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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!doctype html>
<html lang="en">

<head>
  <title>CS4241 Assignment 1</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Allison">

  <style>
    body {
      color: #FC8E62;
      background-color: #F7FFFC;
    }

    label {
      font-family: 'Allison', serif;
      font-size: 40px;
    }

    .some {
      color: #C25CD1;
    }

    .alot {
      color: #384CD2;
      font-weight: bold;
    }

    .none {
      color: #FE3A5E;
    }

    #animcont {
      width: 10px;
      height: 10px;
      position: relative;

    }

    #anim {
      width: 15px;
      height: 15px;
      position: absolute;
      background: red;
    }
  </style>
</head>

<body>
  <h1>Information about Duncan Soiffer</h1>
  <p>
    Hello! This is the page of Duncan Soiffer, a class of 2024 WPI student.
  </p>
  <p>
    Officially, my major is Undecided, but in reality I am majoring in Computer Science and Math.
  </p>

  <p><button onclick="move()">Send the box on an adventure</button></p>
  <div id="animcont">
    <div id="anim">am box</div>
  </div>
  <script>
    function move() {
      let posx = 0;
      let posy = 0;
      let xadd = 0;
      let yadd = 0;
      let id = null;
      let lost = false;
      let timer = 0;
      const elem = document.getElementById("anim");
      elem.textContent = "am box";
      clearInterval(id);
      id = setInterval(frame, 5);
      function frame() {
        if (posx === 400) {
          lost = true
          elem.textContent = "am LOST";
        }
        timer++
        if (timer > 60) {
          xadd = Math.floor(Math.random() * 3) - 1;
          yadd = Math.floor(Math.random() * 3) - 1;
          timer = 0;
        }
        if (lost) {
          posx += xadd;
          posy += yadd;
        } else {
          posx++;
          posy++;
        }
        elem.style.top = posy + "px";
        elem.style.left = posx + "px";
      }
    }

  </script>

  <p><a href="https://www.destroyallsoftware.com/talks/wat">Here's</a> a link to a short, amusing 4 minute talk on weird
    things JS does.</p>

  <h2>Experience</h2>
  <p>
    Language (and unit testing) experience
  </p>
  <ul>
    <li>HTML: <span class="some">some</span></li>
    <li>CSS: <span class="some">some</span></li>
    <li>Java: <span class="alot">a lot</span></li>
    <li>Javascript: <span class="some">some</span></li>
    <li>Ruby: <span class="none">none</span></li>
    <li>Python: <span class="alot">a lot</span></li>
    <li>Unit testing: <span class="some">some</span> <span class="none">(but not really)</span></li>

  </ul>
  <p>
    Class experience
  </p>
  <ul>
    <li>CS 2022: Discrete Math (which is CS apparently?)</li>
    <li>CS 2223: Algorithms</li>
    <li>CS 2011: Intro- Machine Org & Assembly</li>
    <li>CS 4120: Analysis of Algorithms</li>
  </ul>

  <h3>
    Post-Reading Questionnaire
  </h3>
  <p>After reading this website, please take the following questionnaire:</p>
  <p>Duncan is (check all that apply):</p>
  <input type="checkbox" id="q1" name="q1" value="q1">
  <label for="q1"> cool</label><br>
  <input type="checkbox" id="q2" name="q2" value="q2">
  <label for="q2"> hip</label><br>
  <input type="checkbox" id="q3" name="q3" value="q3">
  <label for="q3"> with it</label><br>

</body>

</html>