shape-generator/index.html at main · FullstackAcademy/shape-generator · 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
<html>
  <head>
    <style>
      body {
        font-family: verdana;
        padding: 1rem;
      }
      form {
        border: solid 1px dodgerBlue;
        padding: 1rem;
        display: flex;
        justify-content: center;
      }
      input {
        height: 3rem;
      }

      #container {
        height: 100vh;
        display: flex;
        justify-content: space-around;
        align-items: center;
        align-content: flex-start;
        flex-wrap: wrap;
      }

      #container > div {
        background-color: tomato;
        width: 75px;
        height: 75px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      #container > div > span {
        background-color: cornSilk;
        padding: 0.5rem;
        border-radius: 50%;
      }

      #container > div.blue {
        background-color: dodgerBlue;
        transition: background-color 1s;
      }
    </style>
    <title>Shape Generator</title>
  </head>
  <body>
    <h1><a href='index.html'>Shape Generator</a></h1>
    <h2>Todos</h2>
    <ul>
      <li>Create a repo named shape-generator and add this index.html page</li>
      <li>Currently clicking on the center of a circle causes the center to disappear. This is a bug, the blue circle should disappear.</li>
      <li>
        Currently the user can enter anything in the input field. Restrict the input to numbers and limit the values to be greater than 25 and less than 250.
      </li>
      <li>
        Within the h1 element, display the number of circles which are displayed.
      </li>
      <li>
        Within the h1 element, display the average size of the current circles.
      </li>
      <li>
        Instead of always generating circles, generate either a circle or a square.
      </li>
    </ul>
    <a href='https://github.com/FullstackAcademy/shape-generator'>Repo</a>
    <form>
      <input name='px' value='25'/>
    </form>
    <div id='container'>
    </div>
    <script>
      const form = document.querySelector('form');
      const input = form.querySelector('input');
      const link = document.querySelector('a');
      const container = document.querySelector('#container');

      container.addEventListener('click', (ev)=>{
        if(!ev.target.id){
          ev.target.parentNode.removeChild(ev.target);
        }
      });

      const generateCircle = ()=> {
        const size = `${input.value}px`;
        const circle = document.createElement('div');
        circle.style.width = size;
        circle.style.height = size;
        container.appendChild(circle);
        const span = document.createElement('span');
        span.innerText = input.value;
        circle.appendChild(span);
        input.value = 25 + Math.floor(Math.random()*50);
        window.setTimeout(function(){
          circle.classList.add('blue');
        }, 500);
      };

      form.addEventListener('submit', (ev)=> {
        ev.preventDefault();
        generateCircle();
      });

      generateCircle();
      generateCircle();
      generateCircle();

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