shape-generator/index.html at main · elena-io/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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<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.square{
        padding: 0.5rem;
        border-radius: 0%;
      }

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

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

      #container > div.cornSilk {
        background-color: cornSilk;
      }

      #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>
    <div> Number of Circles: <span class="counter">3</span></div>
    <div>Average: <span class="average"></span> </div>
    <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' type="number"/>
    </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');
      const counter = document.querySelector('span.counter');
      const average = document.querySelector('span.average');
      let total = 0

      container.addEventListener('click', (ev)=>{
          console.log(ev.target.tagName);
         if (ev.target.tagName === "SPAN"){
           //removing one class and adding a class cornSilk
            ev.target.parentNode.classList.remove("blue");
            ev.target.parentNode.classList.add("cornSilk");
        }
      });

      let arrAver = [];
      const generateCircle = ()=> {
        //restricting numbers to 250 plus restricting size of the cirxle to 250
        if(input.value > 250) {
            input.value = 250;
        }
        else {
            input.value = Math.floor(Math.random()*(250 - 25) + 25);
        }
        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);

        //Calculating the average
        //Creating an array of the input numbers
        arrAver.push(span.innerText*1);
        let total = 0
        for(let i = 0; i < arrAver.length; i++) {
          total += arrAver[i];
        }
        let avgNum = Math.floor(total / arrAver.length);
        //assigning the average value to the inerHTML
        average.innerHTML = avgNum;

        window.setTimeout(function(){
          circle.classList.add('blue');
        }, 500);
      };

      //creating a function to generate square
      const generateSquare = ()=> {
        //restricting numbers to 250 plus restricting size of the cirxle to 250
        if(input.value > 250) {
            input.value = 250;
        }
        else {
            input.value = Math.floor(Math.random()*(250 - 25) + 25);
        }
        const size = `${input.value}px`;
        const square = document.createElement('div');
        square.classList.add("square");
        square.style.width = size;
        square.style.height = size;
        container.appendChild(square);
        const span = document.createElement('span');
        span.innerText = input.value;
        square.appendChild(span);

        window.setTimeout(function(){
          square.classList.add('blue');
        }, 500);
      }

      //since we start with 3 shapes, the count will sart at 3
      let count = 3;
      form.addEventListener('submit', (ev)=> {
        ev.preventDefault();
        count++
        counter.innerHTML = count;
        toggleShape();
      });

      //funciton to toggle between square and circle
      var toggleSquare = false;
      const toggleShape = () => {
        // generate circle or square depending on toggleSquare
        !toggleSquare ? generateCircle() : generateSquare();
        // switch toggleSquare
        toggleSquare = !toggleSquare;
      }

      toggleShape();
      toggleShape();
      toggleShape();

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