My JavaScript Pseudocode steps.

While I am just starting out as a web developer, I believe that the overall ability to problem solve and view a problem from different angles will help you succeed in a development position. When you are confronted with a particular problem it really helps to simplify the problem and create a task list for yourself. This is where my Pseudocode comes in handy for myself. Lets break it down into a few steps to make it easier to understand.

First lets start with a problem that needs solving. I have a web application that I want to take information from a JSON server and distribute this information into a card format for each item within the server. I want to do this when the DOM loads.

Now that is a very specific problem that needs solving but separating this paragraph into Pseudocode steps is going to help with several issues that you may run into. First where do I begin? Well we can start with the "when" we want this code to run.

// Add an event listener for when the DOM is loaded
document.addEventListener("DOMContentLoaded", () => {
getAllNinjas()
})

This is step one and very important because it is going to lead us in the right direction. With the event listener being added to "DOMContentLoaded" we know that this is going to use a callback function. Here is our next step! We are also going to use pseudocode to break down our fetch function as well.

// Create a callback function that "gets" the needed information
function getAllNinjas() {
    // "GET" fetch from JSON server
    fetch("http://localhost:3000/ninjas")
    // Convert result to "json"
    .then(res => res.json())
    // take json data and send to callback function to render a card for each item within the data object
    .then(ninjaData => ninjaData.forEach(ninja => renderOneNinja(ninja)))
}

So after pseudo coding and coding out the next step you can see how complex the problem is beginning to get, but how basic and simple the steps that we are creating. These basic steps help keep focus and guide yourself through the process of creating working code.

So lets just look at our overall steps.

// Add an event listener for when the DOM is loaded
// Create a callback function that "gets" the needed information

An look how easy figuring out the next step is going to be! We need to create another callback function that handles the data that we just fetched from our JSON server. Within the creation of our function it is important again that we use our pseudocode to our advantage to create steps in creating the "handle" function.

// Create a callback function that "handles" the fetch data and renders each item to the DOM or a "DOM manipulation function

function renderOneNinja(ninja) {
    // Create an container element to hold our card
    const ninjaCard = document.createElement("div")
    // Add a class name to each card
    ninjaCard.classList.add("ninja-card")
    // Add an ID to the element that includes the `dataitem.name`
    ninjaCard.id = `${ninja.name}`
    // Format the elements innerHTML using iteration through the item within the data object
    ninjaCard.innerHTML =`
            <div class="front">
                <img class="img" src="${ninja.imageUrl}">
                <p class="name">Name:${ninja.name}</p>
                <p class="village">Village:${ninja.village}</p>
                <p class="rank">Rank:${ninja.rank}</p>
                <p class="power" style="display:none;">${ninja.power}</p>
            </div>
            <div class="back">
                <button id=one class=addBtn>Add to Squad 1</button>
                <button id=two class=addBtn>Add to Squad 2</button>
            </div>
    `
    // Add event listeners for the two buttons and the mouseenter and mouseleave (these event listeners were added on at a later time due to a different desired outcome or a different "PROBLEM".
    ninjaCard.querySelector("#one").addEventListener("click", handleClickOne)
    ninjaCard.querySelector("#two").addEventListener("click", handleClickTwo)
    ninjaCard.addEventListener("mouseenter", handleMouse)
    ninjaCard.addEventListener("mouseleave", handleMouse)

    // Append the element to a container already on the DOM
    document.querySelector("#ninjaContainer").appendChild(ninjaCard)
}

Wow! That was a lot to go through for only one function, but leaving out our pseudocode for the functions creation lets see how our task list looks.

// Add an event listener for when the DOM is loaded
// Create a callback function that "gets" the needed information
// Create a callback function that "handles" the fetch data and renders each item to the DOM or a "DOM manipulation function

Whoa! Only three steps top solve our problem; however, within each steps there are a series of "children steps" that allow a developer to simplify the road to a desired result.
This was a large problem that really needed to be simplified to get yourself pointed in the right direction, but lets just take a look at a more simplified problem that we can still use pseudocode for.

So here is our problem:

Create a function that when given an array with three element objects that contain two items, returns an array that combines the value of power to one value.

This is a more simple problem but look at how confusing it can get. So lets pseudocode this problem.

// Create function "reducePower" that takes in one argument "array of three element objects"

This handles a couple of simple tasks like the name of the function and what we are going to be using as an argument. The problem can be referenced in writing this pseudocode. Our name is describing what our desired result will be and the problem gives us the argument we need to use. Now we need to write out what to do with the argument.

// Iterate through each object and find the power value
// Create a variable to hold each power value ([])
// Push each power value to the variable

We need to obtain the power value for each object and combine them into an array. Why do we need to combine them into an array? Lets see why.

// Use the reduce method on the array of power values which will return the total of the values.

We just pseudo coded our problem out and quickly and effectively came up with a task list to use as a guide when creating our code. Now we are thinking like problem solvers. I promise this will help any developer new or veteran. With that I bid you good day and hope this has helped with your development journey!