LearningByDoing/index.php at main · AnthonyNet/LearningByDoing · 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
<?php
 include "partials/header.php";
?>


<!--Showcase-->


          <div>
              <h1 class="text-primary text-center">#sorryYako</h1>
          </div>


<div class="container-xl">
<h1 class="text-center text-primary">Arrow Functions</h1>

<div class="row align-items-md-stretch text-primary">
    <div class="col-md-6 mb-5">
        <pre>
        <h5>const add = (x,y) => {
            return x + y ;
        }
    </h5>

        </pre>
    </div>
</div>

<h1 class="text-center text-primary">AddEventListener</h1>
<h3 class="text-center mb-4 text-primary">Pamatuj</h3>
    <div class="row align-items-md-stretch text-primary">
    <div class="col-md-6 mb-5">
        <code>Vytvoř x krát UL LI ve VsCode</code>
        <kbd>ul>li*3{text $}</kbd>
    </div>
    <div class="col-md-6 mb-5">
        <code>Vytvoř parent element/child element</code>
        <kbd>.flex-parent>.flex-child</kbd>
    </div>


        <div class="col-md-6">
        <code>let hello = document.querySelector('#hello') <br>
hello.addEventListener('click', ()=>{
  console.log('hello')
})</code>
        </div>

        <div class="col-md-6">
            <code>Tag < details > zobrazí podrobnosti</code>
            <details>Nekůkaj!</details>
        </div>

        <div id="backChange" class="col-md-6">
        <h1 class="text-dark">Fakt smrdíš</h1>
            <h1  id="msg" class="text-dark">Fakt smrdíš</h1>
            <button>Click me</button>
            <script>
                const button = document.querySelector('button');

                button.addEventListener('click', function(){
                    const newColor = makeRandColor();
                    let back = document.querySelector('#backChange')
                    back.style.backgroundColor = 'olive'


                   back.style.backgroundColor = newColor;
                   const msg = document.querySelector('#msg');
                    msg.innerText = newColor;
                });

                const makeRandColor = () => {
                    const r = Math.floor(Math.random() *255);
                    const g = Math.floor(Math.random() *255);
                    const b = Math.floor(Math.random() *255);
                    return `rgb(${r}, ${g}, ${b} )`;
                };
            </script>
        </div>
    </div>
 </div>


<?php
 include "partials/footer.php";
?>