株:損益指数

Cover photo @ AustIndistelショーによって❤️ to creator
ブログをアップしてから久しぶりです.私が最近行ったプロジェクトは、株のために利益または損失指標を作ることでした.
これは、バニラJSを使用して作成されたプロジェクトです

株価

初期投資額

数量

これらの3つのパラメータに基づいて、現在の価格の出力を与え、それに応じて利益と損失を示します.

スリヤンチョクラ / 損益表示

株：損益指数

今、あなたはどのようにこの素晴らしいウェブサイトを構築することができますを表示したい。

何も恐れることはない
プロジェクトで必要なもの、3つの入力パラメータを覚えておいてください

株記号

初期投資額

在庫数量

これらの3つの事を含めてindex.html

<form>
<label><input id="input1" placeholder="Enter the stock symbol" type="text" required> Enter the stock symbol</label>                       
<label><input id="input2" placeholder="Enter Cost price of Stock" type="text" required> Purchase Price</label>       
<label><input id="input3" placeholder="Enter stock Quantity" type="text" required> Stock Quantity </label>                       
<button type="submit">Check</button>
</form>
<div class="output0"></div>
<div class="output"></div>

これらで、現在JavaScriptのセクションに移動するapp.js フォーム要素を返し、「送信」ボタンにイベントリスナーを追加する

form = document.forms[0];
input1 = document.querySelector("#input1");
input2 = document.querySelector("#input2");
input3 = document.querySelector("#input3");

output = document.querySelector(".output");
output0 = document.querySelector(".output0");

form.addEventListener("submit", checkHandler);

function checkHandler(e){
    e.preventDefault();

    let CP = input2.value;
    let Qty = input3.value;

    if( !isNaN(CP) && !isNaN(Qty) && !isNaN(SP)) {
        CP = Number(CP);
        Qty = Number(Qty);
        SP = Number(SP);

        if(CP>0 && Qty>0 && SP>0){

            if (CP>SP){
                const loss = ((CP-SP)*Qty).toFixed(2);
                const lossPer = (((CP-SP)*100)/CP).toFixed(2);
                output.innerHTML=  "You lost ${lossPer}%. Your total loss is $${loss}";

            }

            else{
                const profit = ((SP-CP)*Qty).toFixed(2)
                const profitPer=(((SP-CP)*100)/CP).toFixed(2) ;
                output.innerHTML=  "You gained ${profitPer}%. Your total profit is $${profit}";
            }
        }
        else {
            output.innerHTML="Please enter values greater than 0 (only numbers are allowed in above fields"
        }
    }
    else{
        output.innerHTML="Please enter values greater than 0 (only numbers are allowed in above fields"
    }

        })


    .catch(error => console.log('error', error));
    }
}

閉じるこの動画はお気に入りから削除されています
私たちは、右の株式シンボルのユーザーが入力しているこの値を取得するつもりである人をリラックスして、その閉じられた価格は私たちのSPになりますここで私たちのロジックが正しいことをお知らせするためにここに含まれています.
だから今問題はどこに私は私の閉鎖価格を得るつもりだこのAPIを取得するに発生します.チルマン

だから、私たちは、ティンゴAPIを使用するか、お気に入りのAPIのいずれかを使用して、いくつかの使用AlphaVantage、私はそれを使用したことがないので、私は違いを伝えることはできません.
とにかく、アカウントを作るapi.tiingo.com . それは5分の仕事のようにしてapi.tiingo.com/account/api/token . ここにAPIキーは、誰にも与えないでください、それを安全に保つ.
今どのようにTiingo APIの作品は、特定の株の株式のシンボルを呼び出すことによって通常です.例えば、https://api.tiingo.com/tiingo/daily/AAPL/prices - ここではアップルストックシンボルを使用しているAAPL (これはInput 1になります).それはあなたのトークンに関連付けられていないので、今は動作しません.
このリンクを入力してください.あなたがそれを持っていないならば、それをインストールしてください.ヘッダを追加する

Content-type: application/json
Authorization: Token <your token>

ボタンをクリックします.あなたは、このように見える素晴らしいJSONタイプファイルを得ます

[
    {
        "adjClose": 148.89,
        "adjHigh": 149.05,
        "adjLow": 145.84,
        "adjOpen": 146.19,
        "adjVolume": 73779113,
        "close": 148.89,
        "date": "2021-08-12T00:00:00+00:00",
        "divCash": 0.0,
        "high": 149.05,
        "low": 145.84,
        "open": 146.19,
        "splitFactor": 1.0,
        "volume": 73779113
    }
]

をクリックし、リンクを取得します.コード全体をコピーし、app.js チェックハンドラ関数の内部

var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
myHeaders.append("Authorization", "Token <your token>"); // your token doesn't go in <>. It is a way to explain you
myHeaders.append("Cookie", "sessionid=<your session id>");

var requestOptions = {
  method: 'GET',
  headers: myHeaders,
  redirect: 'follow'
};

fetch("https://api.tiingo.com/tiingo/daily/AAPL/prices", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

実行時には、Corsのエラーを取得する必要があります、それは通常は何もpanickすることです.HTTPとHTTPSの要求をセキュリティ上の理由のために別の起源のリソースに、主にユーザーのデータを保護し、アプリケーションを危うくする攻撃を防ぐためにリソースを制限するために使用されます.
このエラーを解決する多くの方法があります、我々は簡単な方法を使用してこれを行うつもりです.任意の方法を使用できます.ジャスト・ゴーhttps://cors-anywhere.herokuapp.com/ と“一時的なアクセスを要求する”も1行を追加するhttps://cors-anywhere.herokuapp.com/ このようなAPIリンクの前に

fetch("https://cors-anywhere.herokuapp.com/https://api.tiingo.com/tiingo/daily/AAPL/prices", requestOptions)

さて、このスニペットを最初に修正しましょう.まず、コンソールに表示されているJSONファイル全体を必要としません.私たちは株の株価にだけ興味がある.の代わりに.then(result => console.log(result)) こうする

  .then(json => {

        var translatedText = json[0].adjClose;
        SP = translatedText;

        output0.innerHTML="Current price for this stock is: ${SP}"

我々の第2の問題に関して、現在のスニペットは常にAAPL価格の価値を与えます.変更するには、app.js

var serverURL = "https://cors-anywhere.herokuapp.com/https://api.tiingo.com/tiingo/daily/"

function getTranslationURL(text){
    return serverURL + text +"/prices"

}

var SP = 0;

代わりにfetch("https://cors-anywhere.herokuapp.com/https://api.tiingo.com/tiingo/daily/AAPL/prices", requestOptions)こうする

fetch(getTranslationURL(inputText), requestOptions)

おめでとう!あなたは、アプリケーションで行われます

あなたがGithubにあなたのプロジェクトをアップロードしたいならば、この部分をしてください

今、我々は1つの問題はまだ残っている我々のアプリケーションを作った.我々のコードは、そこに我々のAPIキーでそこに正に座っています.我々は確かにGithubにこれをプッシュすることはできません.だから、我々は何の男は、この状況で行う必要がありますか

We should not push our code onto github

- Suryansh Chopra (2021)

それは冗談だよ。

問題に戻るconfig.js ファイル

var config = {
    TOKEN: 'your token' //your token must be inside ''.
  }

これらの行をapp.js ファイル

var token = config.TOKEN;

//rest code

myHeaders.append("Authorization", "Token " + token);

今すぐ作成.gitignore ファイルと追加

config.js

インサイド.
コードをプッシュし、正常にコードをアップロードして、APIキーを安全に保つ.