Learning Lessons Building a Single Page Application as a Programming Student

I recently completed my first project assignment with Flatiron School as part of their online part-time software engineering program. The goals for this assignment were to create a Single Page Application (SPA) which used HTML, JavaScript, and CSS, as well as accessed data from a public Application Programming Interface (API). It also asked for three separate interactive features in the form of JavaScript event listeners. The rest was up to me! I was excited to take on this challenge because it was my first opportunity to be creative with my programming abilities, and work on something practical in the real world, instead of just passing tests on assignments. Working on this project taught me a couple valuable lessons as a new programmer with only a couple of months of learning under his belt, lessons that may be useful to new students or anyone self-teaching! This post will discuss those lessons, and how they were learned.

The Application

I decided to use the coinpaprika API as my source of information in order to build a single page application which would provide details on the most popular cryptocurrencies. My vision was to be able to search the cryptocurrency database provided by the coinpaprika API on my web application, display information about that cryptocurrency, and compare the current value of that cryptocurrency in dollars to a secondary cryptocurrency of the user's choice.

The Important Steps

The majority of my application utilized JavaScript, although it also utilized HTML and CSS. What I will discuss in this blog are the steps I took using Javascript and HTML to accomplish what I had set out to do which resulted in me learning a valuable lesson.

Lesson 1 - Understand your API

When I set off on programming my application, I let my goals for the application completely drive what I wanted to do before I had a complete understanding of the API I wanted to use. I wanted to be able to pull detailed information from the API about the desired cryptocurrency, and direct the user to the information.

I looked through several cryptocurrencies and how the API structured the JSON which was sent via the fetch request. The examples I looked at had all the information I wanted, with key:value pairs which provided the information I wanted. For example:

*Bitcoin
name: "Bitcoin"
whitepaper:
link: "https://static.coinpaprika.com/storage/cdn/whitepapers/215.pdf"

However, as I was finishing up my project and testing input values for other cryptocurrencies, I noticed a few of the cryptocurrency objects came back with no key:value pair for the link: "https://example.com" data. And thus I learned my first valuable lesson on this project, be familiar with the information provided to you by your API. I did not have time at the end of my project to add filters to search queries with null return values, or to come up with another solution. If I had become more familiar with my API, I could have allotted more time for a fix.

Lesson 2 - Sketch out, or outline, how you envision your final project looking

Eager to start my project, I immediately started typing out HTML and getting the structure of my document established. I had a vague idea of how I wanted the site to look in my head, and that's all I was working off. I had my form all set up in my HTML with an input field, and a place to put the information returned from the API after the search. I then realized the API required very specific values to be provided for it to return information on cryptocurrencies. The URL from the API was structured as such:

https://api.coinpaprika.com/v1/coins/{coin_id}

with {coin_id} being the input value users would plug into the search bar to retrieve the information. The format of {coin_id} had to match exactly as "id": "btc-bitcoin" according to the key:value pair provided by the API objects.

My search function was set up as follows:

function displayCrypto(e){
    e.preventDefault()
    fetch(`https://api.coinpaprika.com/v1/coins/${input.value}`)
        .then(response => response.json())
        .then(function(data){
            result.innerHTML = `
                <li>
                    ${data.name}
                    <br>
                    Description: ${data.description}
                    <br>
                    Click <span id = "link"> here </span> for more information: 
                </li>
                `
                    console.log(data)
        })

    input.value = "";
}

This led me to the decision to automatically print a list of the cryptocurrencies on the page by adding an event listener on the document, which listened for DOMContentLoaded. I executed this in the following manner:

function displayAll(){
    fetch(`https://api.coinpaprika.com/v1/coins`)
        .then(response => response.json())
        .then(function(data){
            //console.log(data.slice(0, 100)), limited from size of of about 6100
            let sliced = data.slice(0, 100)
            sliced.forEach((d) => {
                cryptoList.innerHTML += `
                    <li>
                        Name: ${d.name}, <br>Symbol: ${d.symbol}
                    </li>
                `
            })

        }) 
}

With this list, I wanted to include the {coin_id} information, which is found in the ${d.name} and ${d.symbol} interpolations, so users could reference the list of cryptocurrencies, and then see what they would have to type in to the input field to retrieve additional information. This is a very inefficient and unintuitive way to get information to users.

This made me realize another valuable lesson. If I had sketched out by hand, or made an outline of my project, along with a better understanding of the API I was using, I would have realized it would have required some filtering functionality for null values, or just display the list of cryptocurrencies and have them be clickable elements.

However, since I had already set up a full list to load on the DOM, and I had set up my search through input function, I decided to just add a clickable element to the cryptocurrency once it had been searched. I did this by adding the following code to my displayCrypto() function:

let el = document.getElementById("link");
                el.addEventListener("click", function(){
                    location.href = `${data.whitepaper.link}`;
            });

So, the displayCrypto() function in its entirety came out to this:

function displayCrypto(e){
    e.preventDefault()
    fetch(`https://api.coinpaprika.com/v1/coins/${input.value}`)
        .then(response => response.json())
        .then(function(data){
            result.innerHTML = `
                <li>
                    ${data.name}
                    <br>
                    Description: ${data.description}
                    <br>
                    Click <span id = "link"> here </span> for more information: 
                </li>
                `
                    console.log(data)
                let el = document.getElementById("link");
                el.addEventListener("click", function(){
                    location.href = `${data.whitepaper.link}`;
            });
        })

    input.value = "";
}

Takeaways from my first project

While I did create an application which met all the requirements for my project assignment, I know a few things I will do differently before I tackle my next project. With the two main lessons I've learned, I need to keep the big picture in mind, and take the time to gather my thoughts and ideas before jumping straight into programming. This will help ensure I create a product that is as practical and user-friendly as possible. I hope the lessons I've learned are helpful to any other beginner programmers.