theDOMinator/index.html at master · cha-kos/theDOMinator · 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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>The DOMinator</title>
    <script type="text/javascript" src="lib/theDOMinator.js"> </script>
    <link rel='stylesheet' href='lib/index.css'>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans|Playfair+Display" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  </head>
  <body>
    <script type='text/javascript'>

    let count = 1
    const addLi = () => {
      const input = ($l('.input').elArray[0].value)
      $l('ul').append(`<li class=${count}> ${input}
        <button class='clear-todos' onClick=removeItem('.${count}')>Complete</button> </li>`);
      $l('.input').elArray[0].value = '';
      count += 1;
    }

    const clearList = () => {
      $l('ul').empty();
    }

    const removeItem = (input) => {
      $(input).remove();
    }

    const switchColor = (input) => {
      $l('body').toggleClass(input)
    }

    </script>
    <div class='body-wrap'>
      <div class='title-explanation'>
        <h1>Welcome to The DOMinator</h1>
        <p> The DOMinator is a lean DOM manipulation software inspired by JQuery. Check out the examples below!</p>
    </div>
    <div class="todo">
      This is an example of a simple Todo list using The DOMinator. You can add Todos one at a time, delete one a time,
      and also clear all if you have accomplished all Todos.
      <ul>
      </ul>
      <input type='text' value='' class='input' onSubmit="addLi()"/>
      <button onClick="addLi()" class='add-todo'> Add ToDo </button><br>
      <button onClick="clearList()" class='clear-todos'> Clear Todos</button>
    </div>
    <div class='background-toggle'>
      Choose your background color! Using The DOMinators toggleClass method, you can change a DOM's style attributes on the fly!
      <div class='buttons'>
        <button class='blue-button' onClick="switchColor('blue')">Blue</button>
        <button class='red-button' onClick="switchColor('red')">Red</button>
        <button class='green-button' onClick="switchColor('green')">Green</button>
        <button class='yellow-button' onClick="switchColor('yellow')">Yellow</button>
        <button class='none-button' onClick="switchColor('')">None</button>
    </div>
    </div>
  </div>
  </body>
</html>