FTT-JavaScript/aulajs19.html at master · danielscarvalho/FTT-JavaScript · 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
<!DOCTYPE html>
<html>
<!-- user no browser http://localhost:5500  para a chamada de api funcionar-->
<head>
    <title>JavaScript Aula 19</title>
    <script>
        var key = 'a471bfae6bea4870828911cc205e47e9'; //Conseguir uma chave no site da API...
        var newsSearch = document.getElementById("news-search");
        var newsSearchText;
        var url;

        function createNews(nData) {

            for (i in nData.articles) {

                var a = document.createElement("ARTICLE"); // Create a <ARTICLE> element
                a.setAttribute("class", "card");

                var nImg = document.createElement("IMG"); // Create a <H2> element
                var h2 = document.createElement("H2"); // Create a <H2> element
                var desc = document.createElement("P"); // Create a <H2> element
                var ath = document.createElement("AUTHOR"); // Create a <AUTHOR> element

                nImg.src = nData.articles[i].urlToImage; // Create a text node
                nImg.style.width = '380px'; //The full width is 400px, 10px of border left and right
                h2.innerText = nData.articles[i].title; // Create a text node
                desc.innerText = nData.articles[i].description;
                ath.innerText = "by " + nData.articles[i].author + " - " + nData.articles[i].source.name;

                a.appendChild(nImg);
                a.appendChild(h2); // Append the text to
                a.appendChild(desc);
                a.appendChild(ath);

                document.getElementById("noticias").appendChild(a);

            } //for

        }

        function reloadPage() {

            newsSearch = document.getElementById("news-search");
            newsSearchText = newsSearch.options[newsSearch.selectedIndex].value;

            url = 'https://newsapi.org/v2/everything?q=' + newsSearchText + '&sortBy=publishedAt&apiKey=' + key;
            document.getElementById("noticias").innerHTML = "";
            console.log(url);

            var xhr = new XMLHttpRequest();

            xhr.onload = function() {

                if (xhr.status >= 200 && xhr.status < 300) {

                    console.log('success!', JSON.parse(xhr.responseText));
                    var newsData = JSON.parse(xhr.responseText);
                    createNews(newsData);

                } else {
                    console.log('Ops!!! The request failed!');
                }

                console.log('Here we are...');
            };

            xhr.open('GET', url);
            xhr.send();
        }
        //TODO: Reescrever a chamada de API utilizando "fetch" do ECMA Script 6: https://developer.mozilla.org/pt-BR/docs/Web/API/Fetch_API/Using_Fetch
    </script>
    <style>
        body {
            font-family: Lora, serif;
        }

        header {
            background-color: 000;
            color: fff;
        }

        .noticias {
            width: 400px;
            display: block;
            padding: 16px;
        }

        .card {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            transition: 0.3s;
            width: 400;
            porder: 10px;
            padding: 10px;
            background-color: 101010;
        }

        .card:hover {
            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.9);
        }

        author {
            color: darkgray;
        }
    </style>

</head>

<body onload="reloadPage();">
    <h1>JavaScript Aula 19</h1>
    <h2>JSON, API, AJAX - Asynchronous JavaScript And XML</h2>

    <header>
        <p>
            <label>News WEB Search: </label>
            <select id="news-search" onchange="reloadPage();">
                <option value="blockchain">Blockchain</option>
                <option value="machine+learning">Machine Learning</option>
                <option value="artificial+inteligence">Artificial Inteligence</option>
                <option value="robots">Robots</option>
                <option value="hackers">Hackers</option>
                <option value="bitcoin" selected>Bitcoin</option>
                <option value="corinthians" selected>Corinthians</option>
            </select>
        </p>
    </header>
    <div class="noticias" id="noticias"></div>


</body>

</html>