cascadecoder.github.io/typewriter.html at main · cascadecoder/cascadecoder.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
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
<!DOCTYPE html>
<html>
  <head>
    <title>Make a Story | rowannerd</title>
    <style>
      body {
        background-color: rgb(0, 250, 250);
        color: rgb(10, 10, 12);
        font-family: sans-serif;
        width: 600px;
      }
      .middle {
        text-align: center;
      }
      button {
        background-color: rgb(255, 20, 10);
        height: 50px;
        color: white;
        box-shadow: 4px 4px 5px grey;
        padding: 5px;
      }
      button:hover {
        background-color: black;
      }
      #input {
        visibility: visible;
      }
    </style>
  </head>
  <body>
    <h1 class="middle">Story Maker | rowannerd</h1>
    <p><b>Use the following tools to make your short story:</b></p>
    <button onclick="clearAll()">Clear All</button>
    <button onclick="sentence()">Add Sentence</button>
    <button onclick="lineBreak()">Add Line Break</button>
    <button onclick="paragraph()">Add Paragraph</button>
    <button onclick="resetColor()">Reset Color</button>
    <button onclick="color('blue')">Set Color to Blue</button>
    <button onclick="color('red')">Set Color to Red</button>
    <button onclick="color('green')">Set Color to Green</button>
    <p id="visual">Color and Size Visual</p>
    <br><br>
          <p>Type your text here: </p><input type"text" id="text" width="50px" height="50px">
    <br><br>
    <div id="paste"></div>
    <script>
      var text = "";
      var elm = "";
      var textc = "";
      var  paste = document.getElementById("paste");
      var addText = "";
      function element(id) {
        elm = document.getElementById(id);
      }
      function paste(t) {
        paste.innerHTML = t;
        document.getElementById("text").value="";
      }
      function sentence() {
        addText = document.getElementById("text").value;
        addText = "<span style='color: " + textc + "'>" + addText + "</span>";
        text = text + " " + addText;
        paste(text);
      }
      function clearAll() {
        text = "";
        paste(text);
      }
      function lineBreak() {
        text = text + "<br>";
        paste(text);
      }
      function paragraph() {
        text = text + "<br><br>";
        paste(text);
      }
      function resetColor() {
        textc = 'rgb(0, 0, 0)';
        element("visual");
        elm.style.color = 'rgb(0, 0, 0)';
      }
      function color(color) {
        if (color == "blue") {
          element("visual");
          elm.style.color = 'rgb(0, 10, 240)';
          textc = 'rgb(0, 10, 240)';
        } else if (color == "red") {
          element("visual");
          elm.style.color = 'rgb(250, 0, 0)';
          textc = 'rgb(250, 0, 0)';
        } else if(color == "green") {
          textc = 'rgb(0, 250, 10)';
          element("visual");
          elm.style.color = textc;
        } else {
          paste.innerHTML = "ERROR IN CODE!";
        }
      }


    </script>
  </body>
</html>