FTT-JavaScript/aulajs19.html at master · luizgustavo77/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
<!DOCTYPE html>
<html>

<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>
            </select>
        </p>
    </header>
    <div class="noticias" id="noticias"></div>


</body>

</html>