aws-react-tutorial/babel.html at master · renal128/aws-react-tutorial · 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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title> Babel Demo </title>
    <style media="screen">
      .errorBox {
        border: 1px solid red;
        background-color: #eebbbb;
        margin: 1em;
        padding: 2em;
      }

      .errorBox--hidden {
        display: none;
      }
    </style>
  </head>
  <body>
    <main>
      <label>Name: <input id="name" type="text"/></label>
      <button id="submit_info">Click me!</button>
      <div id="content"></div>
      <div id="error" class="errorBox--hidden">
        Error message goes here
      </div>
    </main>
    <script src="https://unpkg.com/babel-standalone">
    </script>

    <script type="text/babel" data-presets="latest">
    const getMessage = (name) => `Welcome to Javascript, ${name}!`;
    const button = document.getElementById('submit_info');
    const content = document.getElementById('content');
    const nameInput = document.getElementById('name');
    const error = document.getElementById('error');

    button.addEventListener('click', (evt) => {
      let name = nameInput.value;
      if (name.length < 2) {
        content.textContent = "";
        error.textContent = "You need to enter a name!";
        error.className = "errorBox";
      } else {
        content.textContent = getMessage(name);
        error.className = "errorBox--hidden";
      }
    });
    content.textContent = getMessage("Renal")
    </script>
  </body>
</html>