projects-varied/codigos-js at master · devanquinta/projects-varied · 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
Esta página web coloca uma imagem de um bigode em cima de uma imagem de um gato quando o usuário clica nela, mas ela sempre fica 100 pixels abaixo e 100 pixels a partir da esquerda. Altere a função de callback
para usar as propriedades do evento para posicionar o bigode de acordo com o local onde o usuário clica.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Challenge: Cat-stache</title>
        <style>
            #mustache-pic {
                position: absolute;
            }
        </style>
    </head>
    <body>

        <img id="cat-pic" src="https://www.kasandbox.org/programming-images/animals/cat.png" width="300" alt="cat photo">

        <img id="mustache-pic" src="https://www.kasandbox.org/programming-images/misc/mustache.png" alt="mustache" width="100">

        <script>
            var catPic = document.getElementById("cat-pic");
            var onCatClick = function(e) {
                var stashePic = document.getElementById("mustache-pic");
                 stashePic.style.top = e.clientY + "px";
                 stashePic.style.left = e.clientX + "px";
            };
            catPic.addEventListener("click", onCatClick);

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

// troca de linguagem

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Processing forms with events</title>
    </head>
    <body>
    <div>
        <label>What's your name?
        <input id="name" type="text">
        </label>
        <br>
        <label>What language do you speak?
        <select id="lang">
            <option value="en">English</option>
            <option value="es">Spanish</option>
            <option value="plt">Pig-latin</option>
        </select>
        </label>
        <br>
        <button id="button" type="button">Greet me, please!</button>
        <div id="message"></div>
    </div>

  <script>
  // Step 1: Find the element we want the event on
  var button = document.getElementById("button");
  // Step 2: Define the event listener function

  var onButtonClick = function() {
    var name = document.getElementById("name").value;
    var lang = document.getElementById("lang").value;
    var greeting;
    if (lang === "es") {
        greeting = "Hola, " + name;
    } else if (lang === "plt") {
        greeting = "Ello-hay, " + name;
    } else {
        greeting = "Heyaz, " + name;
    }
    document.getElementById("message").textContent += greeting;
  };
  // Step 3: Attach event listener to element
  button.addEventListener("click", onButtonClick);
  </script>

    </body>
</html>