Alpha Vantage API Integration for Stock Market Data

Stock Market Data Integration

Stock Data Table Headers

Alpha Vantage API Implementation

The following script utilizes jQuery AJAX to fetch real-time stock data for MSFT from the Alpha Vantage API.

function main() {
    $("#list").click(function() {
        $.ajax({
            type: "GET",
            url: "https://www.alphavantage.co/query?function=TIME_SERIES_INTRADAY&symbol=MSFT&interval=1min&apikey=demo",
            success: function (azul) {
                var roxo = azul["Time Series (1min)"];
                for (var verde in roxo) {
                    var vermelho = roxo[verde];
                    var str = "<tr><td>" + vermelho["1. open"] + "</td>"
                            + "<td>" + vermelho["2. high"] + "</td>"
                            + "<td>" + vermelho["3. low"] + "</td>"
                            + "<td>" + vermelho["4. close"] + "</td>"
                            + "<td>" + vermelho["5. volume"] + "</td></tr>";
                    $("#tabelaAlvo").append(str);
                }
            }
        });
    });
}
  

JavaScript and jQuery Programming Exercises

Lista 1 - Exercício 1

Code for alternating row colors:

// function main() {
//   $("#b1").click(function() {
//     $("tr:even").css("color", "red");
//     $("tr:odd").css("color", "blue");
//   });
// }
  

Lista 1 - Exercício 2

Code for toggling button text:

// function main() {
//   $('#clickme').on('click', function() {
//     if ($(this).text() === "OK") {
//       $("#clickme").text('Clicado');
//     } else {
//       $('#clickme').text('OK');
//     }
//   });
// }
  

Lista 2 - Exercício 1

Code for changing background colors:

// function main() {
//   $("button").click(function() {
//     $("p").css("backgroundColor", "blue");
//     $("div").css("backgroundColor", "red");
//   });
// }
  

Miscellaneous Event Handlers

• Click to change background:

  // function main() { $("p").click(function() { $(this).css("backgroundColor","blue"); }); }

• Increment number on click:

  // function numero() { $("div").click(function() { $(this).html(parseInt($(this).html())+1); }); }

• Change text to "CLICADO":

  // function main() { $("div").click(function() { $(this).html("CLICADO"); }); }

• Hide and show elements:

  // function main() { $("div").click(function() { $(this).hide(); }); $("#b1").click(function() { $("#d1").show(); }); $("#b2").click(function() { $("#d2").show(); }); }

• Vanilla JavaScript Event Listener:

  // function main() { document.querySelectorAll("div").forEach(function(div) { div.addEventListener("click", function() { alert("Olá sem jQuery!"); }); }); }