JSFiddle - React, Tailwind, and code Playground

by somya_kashyap3

HTML

<head>
  <title>Ajax calls for quotes</title>
  <script src="https://code.jquery.com/jquery-latest.min.js"></script>
</head>
<p>
This is a practice set designed to get the daily opening price of shares from the famous Alphavantage API and beware 
this doesnt give the prices on weekend. But you don't need to worry about that as the part of the code that deals with dates is hard coded here and you get an alert if it's a weekned. The task is simply to place an ajax call using jQuery to the "https://www.alphavantage.co/query?function=TIME_SERIES_DAILY_ADJUSTED&apikey=NAJXWIA8D6VN6A3K&symbol="along with the symbol value that the usr passes from the form. I have called the onsubmit handler in the HTML but you may change and use addEventListener with the form submit event. Now there is one if part for the whole code is written but the else part has something to do.In the else part if the day is not a weekend then just get write to the html of the p element with "quote" as id, today's opening price of shares. For this part you will have to first go the  <a href = "https://www.alphavantage.co/query?function=TIME_SERIES_DAILY_ADJUSTED&symbol=MSFT&outputsize=full&apikey=demo">URL</a> to see how to get the opening price of today's share of the symbol passed. In this URL, the symbol used is of microsoft but you will have to pass the symbol user passed in the url you pass in the jQuery ajax call. Finally, just remove the value from the form in the input box, so that user can type new values.
</p>
<form onsubmit="quote(); return false;">
            <input autocomplete="off" autofocus id="symbol" placeholder="Symbol" type="text"/>
            <input type="submit" value="Get Quote"/>
</form>
<p id="quote"></p>

JavaScript

function quote(){
// code below creates a date object and checks if it's a weekend using getDay function
    var d = new Date;
    if(d.getDay() == 6 || d.getDay() == 0){
         alert('Daily shares are not available on Weekend!');
    }
    else{
    // todo
    // place an ajax call using jQuery with the url given and the symbol from the form
    // inside of this ajax call to the url uncomment the code below and place it 
    // the code below gives today's date which is the value of output 
       /*var month = d.getMonth()+1;
       var day = d.getDate();
       var output = d.getFullYear() + '-' + (month<10 ? '0' : '') + month + '-' + (day<10 ? '0' : '') + day;*/
       
       
     }  

 }