DEV Community: Suryansh Chopra

Stocks: Profit or loss indicator

Suryansh Chopra — Fri, 13 Aug 2021 23:00:08 +0000

Cover photo by @austindistel show some ❤️ to creator

It's been a while since I uploaded a blog. The project I did recently was to make a Profit or loss indicator for Stocks.

This is a project I created by using Vanilla JS, It inputs 3 parameters

Stock symbol
Initial investing amount
Stock quantity

Based on these 3 parameters, it will give output of the current price and and shows profit and loss according to it.

SuryanshChopra / Profit-or-loss-Indicator

Stocks: profit or loss indicator

Now I wanna show you how you can build this awesome website.

Nothing to be feared, I got you

Remember what you need in the project, 3 input parameters

A stock symbol
A initial investing amount
A stock quantity

Start by including these 3 things in your 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>

Done with these, now move to JavaScript section, In app.js return the form elements and add a event listener on "submit" button

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));
    }
}

You must be like "WOAH dude where the hell is this SP coming from"

Relax man we gonna get this value from the API, That's right the Stock symbol user has entered, its closing price will become our SP. It is included here just to let you know our logic is correct.

So Now the problem arises where do I get this API that's gonna get my closing price. Chill man

So, we are gonna use Tiingo API, or use any of your favourite API, some use AlphaVantage, I never used it , so I cannot tell the difference.

Anyways, make a account on api.tiingo.com. It's like 5 minute job then navigate to api.tiingo.com/account/api/token. Here is your API key, Don't give it to anyone, keep it safe.

Now usually how Tiingo api works is by calling the stock symbol of a particular stock. For example:
https://api.tiingo.com/tiingo/daily/AAPL/prices - Here I have use Apple Stock symbol AAPL(this is gonna become our input1). It won't work right now because it is not associated with your token.

Input this link in on Postman app. if you don't have it, install it. Add 2 headers

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

Click on send button. You'll get a nice JSON type file looking like this

[
    {
        "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
    }
]

Click on the code snippet </> icon and get the link in JavaScript-Fetch. Copy the entire code and paste it in app.js inside the CheckHandler function

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));

On running you must be getting a CORS error, it is normal nothing to be panick about. It is use to restrict HTTP and HTTPS requests made from scripts to resources in a different origin for security reasons, mainly to protect the user's data and prevent attacks that would compromise the app.

There are many ways to resolve this error, we are gonna do this by using a simple way. You can use any method you want. just go to https://cors-anywhere.herokuapp.com/ and "request temporary access" Also add a single line https://cors-anywhere.herokuapp.com/ before your api link like this

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

Now, let's fix this snippet first we don't need entire JSON file which is showing in our console right now. We are only interested in close price of the stock. Instead of .then(result => console.log(result)) do this

  .then(json => {

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

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

Onto our second problem, the current snippet will always give value for the AAPL prices. To change this add in the initial lines of 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;

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

do this

fetch(getTranslationURL(inputText), requestOptions)

Congratulations!! you are done with the application

Do this part only if you want to upload your project on to github

Now, that we've made our application there is one problem still remaining. Our code is sitting right there with our API key in it. We certainly can't push this onto github. so, we are gonna do what any man should do in this situation

We should not push our code onto github

- Suryansh Chopra (2021)

That's a joke That's a joke...

Back to the problem, create a config.js file,

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

and add these lines inside app.js file

var token = config.TOKEN;

//rest code

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

Now create a .gitignore file and add

config.js

inside it.

Push the code and you have successfully uploaded the code and kept your API key safe.

Day 8 Training: Birthday-lucky react app

Suryansh Chopra — Fri, 30 Jul 2021 19:40:30 +0000

Yesterday was my Day 8 Training at Ryaz. The objective was to make a Is-your-birthday-lucky app in react.

Take user's complete birthday
And his/her lucky number.
Now, find out if sum of digits of birthday is divisible by the lucky number.
Show the result to user with some graphics.
Create this as a website, put a privacy notice. Say that you're not storing data.

This was very time tasking project not because of logic but because of designing. After a day on working on this I had to take a small help from Material UI regarding the alert boxes and Icons. Rest I had to dig up the CSS from internet. In short I'm totally exhausted by this project :)

The Live project is up at code sandbox

Code for this project is updated on my Github

AND THAT'S ALL!

Day 7 of Training: Make a Cash Register app

Suryansh Chopra — Wed, 28 Jul 2021 16:48:20 +0000

Today was my Day 7 of training in Ryaz. The objective was to make a Cash register App.

Your program has currencies of Rs. 1, 5, 10, 20, 100, 500, 2000.
Your user enters a bill amount say Rs. 243.
Your user then enters a cash given say Rs. 2000.
Now, help the user by telling how can he/she return the change to the customer with minimum number of notes?

I've made this project in vanilla js. It was a good project to brush up the basics. The logic was to traverse the remaining change through the array. Most of my time has gone to designing and error handling.

The live project is on my code sandbox

The code for this project is updated on my Github repository

AAAND THAT'S ALL!!

Day 6 of Training: Assignment React Js

Suryansh Chopra — Tue, 27 Jul 2021 19:48:15 +0000

Today was my day 6 of Training in Ryaz. Apart from the Emoji-Interpreter. I had to make a recommendation app divided by different genres. So I decided to make a Anime recommendation app.

It is kinda similar to Emoji-Interpreter app, so not many problems occur during this project.

Live project is up on sandbox. Make sure to visit it guys!!, Also comment down below what you guys think that I need to watch that is totally banger.

Code for this project is updated on my Github

AND THAT'S ALL!

Day 6 of Training: React Js

Suryansh Chopra — Tue, 27 Jul 2021 13:12:04 +0000

Yesterday was my day 6 training at Ryaz. I learnt about the basics of React Js by making a Emoji Interpreter app.

The live project is up now at sandbox. Make sure to visit it.

It was really fun making this app and I learnt a lot about React during this project. Although the main app work is complete, I will be improving its styling and update the emoji database later on.

Code for the project is present at my Github

Do you know:
emojipedia - It is website known as "Encyclopedia of emoji". It shows emojis with their meaning, I find it quite funny. All emoji fans should at least visit this website once.

AND THAT'S ALL! See you tomorrow

Day 5 of Training: Node js

Suryansh Chopra — Mon, 26 Jul 2021 13:49:06 +0000

Yesterday was my day 5 of training in Ryaz. I learnt about basics of Node js by making a CLI quiz game.
I have used for loops, functions, arrays and dictionary in my project.

Do you know:

readlineSync: It is a npm package that lets you have a conversation with the user via a console(TTY). A super handy tool if you want to make a complete CLI project.
chalk: It is a npm package that lets you color inside a terminal. Pretty awesome tool, definitely going to use in my next CLI project.

Are You a Marvel fan? Drop by to check if you are true fan by giving a small quiz

Marvel quiz

Code

Day 4 of Training: Vanilla JavaScript

Suryansh Chopra — Fri, 23 Jul 2021 09:03:56 +0000

Yesterday was 4 day of my training with Ryaz. The task provided was to understand the basics of Vanilla and successfully implement it into the project.

During this project I got know about

Event Listeners
Reading from Input
Writing to DOM
Arrays & objects
Processing data on user actions

The Personal expense app handles your personal expense. You can add and delete the expenses as you want. The styling for this app was done using bootstrap. I've not added much for now.

Github repository - Personal Expense

Day 3 of Training: To do list using Vanilla JavaScript

Suryansh Chopra — Wed, 21 Jul 2021 10:41:42 +0000

Today was the day 3rd of my training with Ryaz.
Task was focused on creating a simple to do list with Vanilla JavaScript in order to understand better the concept of Java DOM.

While working on the project I revised my previous concept regarding DOM. Also learnt some new features in this project.

I've added .addEventListeners to add task, to mark complete task(line-through) and to remove the task from the list(double-click).

Day 2 of Training: JavaScript in browser

Suryansh Chopra — Wed, 21 Jul 2021 05:44:41 +0000

Yesterday was my day 2 of training in Ryaz.
The task was basically divided into different parts like:

Attaching events to HTML elements
Taking user input in browser
Showing output in browser
Making network calls to get relevant data.
Error handling network calls

I learnt many things from yesterday's lesson like:

document.querySelector() - It returns the first element that matches a specified CSS selector(s) in the document.
addEventListener() - This method attaches an event handler to the specified element.

and

fetch() - It is useful in fetching resources across the internet.

Do you Know:

funtranslations - This website provides API translations to the users for free. There are tons of API's you can go through like "minion", "yoda", "Dothraki" and many more. It is more fun working with a API that reference meme culture. Only and most irritating downside is that it only gives 5 API calls per hour or two.

DAY 1 Of Training: HTML AND CSS

Suryansh Chopra — Tue, 20 Jul 2021 10:31:46 +0000

Yesterday was my first day of Training under Ryaz. I am very helpful to the community as well as the mentors who have guided me with every step.

Yesterday task was to follow the tutorials of component libraries HTML5 and CSS3 and to make a website. Component Libraries that I explored were:

Typography
Containers
Links
Lists
Navbar
Header
Section
Footer

During the task I have encountered many new things I would like to share:

Undraw - A good website always follow some kind of pattern, design that will match the theme of your website. Undraw offers various illustrations to beautify the website. For example - illustrations like "programming" or "gaming" or what-not, Everything is provided for free. It also comes with color selector to match the theme of your project.

Tailwind CSS colors - It offers variations of colors to users so as to match with the theme of the project. A user can also customize the colors as per there need.

Google fonts - As I have already mentioned, A good website always follow some kind of pattern, design to beautify your website. But not only fonts or illustrations alone can do that work. A great part of making a good website is to focus on Fonts. Selecting the perfect font is a difficult job. Google fonts helps the user to find there perfect font and also offers various font styles and widths to go by. A user can simply selects the font and can import these fonts into the project.

These are some new things that I have learnt and I am definitely visiting it again in future.