javascript-workbook/01week/javascripting/index.html at d356fce54bd75774a4fce909ca2f1a2b21cf897e · copelandhouse2/javascript-workbook · 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
<!DOCTYPE html>
<html>
  <head>
    <title>Javascripting</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <header>
      <h1 class="web-title">Craig's Javascripting Tests</h1>
    </header>

    <main class="my-tests">

      <!-- This div covers Test 1: display day and time -->
      <!-- Take note, styles are defined as {num, str}{A,B,C}_{1, 2, 3}.
      ABC represents the frequency of object in section.  123 represents the test number -->
      <div class="test test1">
        <h3>Test 1 - Display day and time</h3>
        <p id="current-date"></p>
        <input class="btn btn1" type="button" value="Get Date">
      </div>

      <!-- This div covers Test 2: Converting a number into a string -->
      <div class="test test2">
        <h3>Test 2 - Number to a string</h3>
        <p class="question q1">Pick a Number: </p>
        <p class="question q2">Pick a Noun: </p>

        <input class="num num-a2" type="number" name="numA_2" min="2" max="100" value="42">
        <select class="str str-a2" name="strA_2">
          <option value="books">books</option>
          <option value="salt shakers">salt shakers</option>
          <option value="coins">coins</option>
          <option value="beamers">beamers</option>
          <option value="doggies">doggies</option>
          <option value="pencils">pencils</option>
          <option value="bananas">bananas</option>
        </select>
        <input class="btn btn2" type="button" value="Gen Sentence">
        <p class="sentence sentence2"></p>
      </div>

      <!-- This div covers Test 3: Converting a string into a number -->
      <div class="test test3">
        <h3>Test 3 - String to a number</h3>
        <p class="question q1">Type in a Number: </p>
        <p class="question q2">Type in another one: </p>
        <input class="num num-a3" type="text" name="numA_3" value="foo">
        <input class="num num-b3" type="text" name="numB_3" value="bar">
        <input class="btn btn3" type="button" value="Gen Sentence">
        <p class="sentence sentence3"></p>
      </div>

      <!-- This div covers Test 4: Scenarios to display different datatypes -->
      <div class="test test4">
        <h3>Test 4 - Different datatypes</h3>
        <p class="question q1 qlast">Type anything in... I am the soothsayer.  I can tell you if your entry is a string, number, boolean, or NULL</p>
        <input class="num num-a4" type="text" name="numA_4" value="myFoo">
        <input class="btn btn4" type="button" value="Name that Datatype!">
        <p class="sentence sentence4"></p>
        <br><br><br>
        <p class="question q2 qlast">To test "undefined" and "Not a Number (NaN)", I need to force the test.</p>
        <input class="btn btn4b" type="button" value="Final Datatype Test">
        <p class="sentence sentence4b"></p>
        <p class="sentence sentence4c"></p>
        <p class="sentence sentence4d"></p>
      </div>

      <!-- This div covers Test 5: Add 2 numbers -->
      <div class="test test5">
        <h3>Test 5 - Add two numbers</h3>
        <p class="question q1">Type in a Number: </p>
        <p class="question q2">Type in another one: </p>
        <input class="num num-a5" type="text" name="num-a5" value="1">
        <input class="num num-b5" type="text" name="num-b5" value="2">
        <input class="btn btn5" type="button" value="Add">
        <p class="sentence sentence5"></p>
      </div>

      <!-- This div sets up a control section to manage tests 6, 7, 8 -->
      <div class="test test-control">
        <h3>Setup below covers tests 6, 7, 8</h3>
        <p class="question q1">Select Number A: </p>
        <p class="question q-2">Select Number B: </p>
        <p class="question q3">Type in String A: </p>
        <p class="question q4">Type in String B: </p>
        <input class="num num-a678" type="number" name="num-a678" min="1" max="100" value="42">
        <input class="num num-b678" type="number" name="num-b678" min="1" max="100" value="42">
        <input class="str str-a678" type="text" name="str-a678" value="foo">
        <input class="str str-b678" type="text" name="str-b678" value="bar">
        <input class="btn btn678" type="button" value="Test!">
      </div>

      <!-- This div covers Test 6: Tests for both conditions are TRUE -->
      <div class="test test6">
        <h3>Test 6 - Comparing! IF num A = B AND str A = B THEN display "secret sentence"</h3>
        <p class="sentence sentence6"></p>
      </div>

      <!-- This div covers Test 7: Tests if one of the conditions is TRUE -->
      <div class="test test7">
        <h3>Test 7 - Comparing! IF num A = B OR str A = B THEN display "secret sentence"</h3>
        <p class="sentence sentence7"></p>
      </div>

      <!-- This div covers Test 8: Tests if none of the conditions are TRUE -->
      <div class="test test8">
        <h3>Test 8 - Comparing! IF num A != B AND str A != B THEN display "secret sentence"</h3>
        <p class="sentence sentence8"></p>
      </div>

    </main>

    <!-- <footer></footer> -->

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/datatypes.js"></script>
  </body>
</html>