DEV Community: Ivan Arias

My Cloud Computing Journey

Ivan Arias — Thu, 28 Mar 2024 01:33:59 +0000

Click here to listen to the Post audio.

AWS Career Change for Software Engineers

Hey there! 🚀 It's been a while since my last post, but I'm back with exciting news I can't wait to share. I've been on an incredible journey diving into AWS and am eager to take you along!

Transitioning Journey

Many software engineers are considering a shift in their professional career towards cloud computing, with a particular focus on Amazon Web Services (AWS). The allure of AWS as a leading cloud platform has prompted numerous professionals to contemplate transitioning from traditional software engineering roles to the dynamic and innovative world of cloud computing.

Industry Expert: "New data shows digital skills are more needed than ever—AWS has 600+ free cloud courses that can help." (AWS Support Documentation, n.d.)

After graduating with a certification as a Software Engineer, I started exploring other fields like cybersecurity and cloud computing. I am writing this post to share my starting journey through the AWS world with all of you.

Exploring AWS

As software engineers venture into cloud computing, obtaining AWS certification is essential. It validates their expertise in utilizing Amazon Web Services to design, deploy, and manage scalable systems on the cloud platform. Preparing for AWS certification exams involves deeply understanding various AWS services, architectural best practices, and hands-on experience with cloud infrastructure.

Recently, I enrolled in the Cloud Mastery Bootcamp to acquire cloud computing skills and earn five cloud certifications:

AWS Certified Cloud Practitioner
AWS Certified Solutions Architect Associate
AWS Certified Developer Associate
HashiCorp Certified: Terraform Associate
Certified Kubernetes Administrator (CKA)

The Cloud Mastery Bootcamp provides training for a broad set of cloud job roles, including cloud engineer, DevOps engineer, and solutions architect. (Digital Cloud Training, 2024). I expect to advance in my professional career and get a position as a cloud professional.

Cloud Foundations and Linux training is the first module of the Bootcamp, and it provides an overview of the following topics:

Cloud Computing and AWS
Compute and Storage Services
Amazon Linux
Serverless Applications
Deployment and Management

Cloud Career

DevOps plays a pivotal role in streamlining software development and operations in cloud computing. It involves integrating development and IT operations to enhance collaboration, automate processes, and improve the quality of software delivery. For software engineers making a professional transition into the Cloud, embracing DevOps practices is crucial for staying competitive in the rapidly evolving technology landscape.

I am so excited about learning all these AWS applications. The first thing that came to my mind when I learned about AWS applications was to migrate all my web apps and web pages to AWS. So, I plan to start the Developer Associate module to migrate and create websites and web applications using AWS services. One project that's been on my mind is deploying The Database Tool using Docker containers on AWS.

In short, enrolling in the Cloud Mastery Bootcamp and pursuing five AWS cloud certifications signifies my commitment to advancing in the Cloud Computing field. Through ongoing learning and practical experience, I aim to become a successful cloud professional and make meaningful contributions to the field.

If you are a web development nerd (like me 🤓) and want to peek at my portfolio, follow this link:

Portfolio Ivan Arias 💾

References:

Digital Cloud Training. (2024, February 25). Cloud Mastery Bootcamp: AWS, Linux, Python, Kubernetes, Terraform. https://digitalcloud.training/cloud-mastery-bootcamp/

AWS Support Documentation. (n.d.). https://docs.aws.amazon.com/aws-support/

Finally, I did it!! I solved a real-world problem

Ivan Arias — Wed, 13 Mar 2024 13:34:45 +0000

Introduction to My Coding Journey

Greetings, technology enthusiasts! Today, I am delighted to present a narrative connecting programming and practical problem resolution. This blog post is for everyone interested in technology, especially those just beginning to navigate the expansive web development domain.

Coding for Real-World Solutions

Since entering the IT world (one year ago), I have read many articles and blog posts about how coding can solve real-world problems. Writing code and building an app that helps others succeed in a role or achieve a goal should be gratifying.

Some bloggers and influencers on LinkedIn and YouTube recommend using the phrase "I want to solve real-world problems through coding" in your resume or behavioral interviews. They say that using those expressions helps you get attention from recruiters.

The Reality of Coding Solutions

After learning how to build full-stack applications, I became obsessed with creating "something" to solve "something else" through coding. Initially, I found myself disheartened. I plunged into the world of coding with dreams of crafting innovative solutions, only to discover that seasoned developers had already tackled many challenges I faced. Also, artificial intelligence supports everybody in creating websites, web apps, images, logos, blog posts, essays, etc. The question that tormented me was, 'What unique contribution could I offer?' This period of introspection led me to the brink of abandoning my quest to create something meaningful through coding.

Reevaluating My Goals

Why was I looking to solve someone else's problems?

This question remained in my mind, echoing my frustrations. Upon reflection, I realized I was approaching the problem from the wrong angle. My desire to create wasn't just about solving any problem but finding a challenge that resonated with me. It was about using my unique perspective and skills to contribute in a way that only I could.

From Disappointment to Inspiration: Finding My Project

However, this phase of doubt was not the end but a necessary journey toward a deeper understanding of my goals and capabilities. Time passed, and a circumstance at work pointed to a realization that led to a solution. One day, while walking through the warehouse at my job, I had my laptop, pocket notebook, pen, and several sheets of paper for taking notes. After engaging with and coaching several employees, I needed help remembering where I left my pen, pocket notebook, or other item. It wasn't the first time I had forgotten my belongings in various places, but it was the moment I recognized the need for a solution.

This might seem trivial to some, but for me, it highlighted a gap—a personal inconvenience that I realized could be addressed through the skills I was questioning.

Introducing the Audits Tool: My Solution to a Real-World Problem

The phrase " I want to solve real-world problems through coding" kept appearing in my mind. I thought, "The critical point is to solve a problem or a situation, and it doesn't matter if it is a to-do list." Solving a problem using effortless tools is fascinating and something I am proud of. Thus, I shifted my focus from seeking grandiose projects to identifying and tackling real, tangible issues I encountered.

After a challenging outline process, the Audits Tool was born, a project that, while seemingly modest, represented a significant milestone in my development journey. Audits Tool is a taking notes app that allows users to input audit details such as usernames, process paths, and audit descriptions, which are then saved locally and can be viewed or deleted. Additionally, the app offers a feature to generate and download comprehensive audit reports.

Pride and Progress: The Journey of the Audits Tool

I take great pride in this app, not just because I use it daily, but because it stands as a testament to the power of simple solutions to enhance productivity. I am still testing it and will add new features to improve the user experience. Also, I plan to migrate the Audits Tool to the AWS platform and add features like authentication and a database.

This narrative reminds aspiring developers to consider their everyday experiences as potential opportunities to apply their skills. It underscores the idea that the problems we often overlook could lead to meaningful achievements.

So, finally, I did it 😏. I created a web application and solved a real-world problem.

Expanding Horizons: Stepping Into AWS and Cybersecurity

My journey through the development of all my projects refined my technical skills and ignited a curiosity about the landscape of technology. This exploration led me to recognize the importance of security and infrastructure, particularly in the era of cloud computing. This realization propelled me to expand my expertise in AWS and Cybersecurity to expand my career options and acquire cloud and security skills. As I continue to seek my first IT job, my incursion into these areas is more than just a diversification of skills—it's a strategic step towards becoming a well-rounded tech professional capable of addressing the multifaceted challenges of today's digital world.

If you are a web development nerd (like me 🤓) and want to peek at this React app or my portfolio, follow these links:

Audits Tool 🦾
Portfolio Ivan Arias 💾

What is RSS?

Ivan Arias — Tue, 05 Sep 2023 00:00:00 +0000

“Have you noticed the little RSS icons around the web? Or have you heard about RSS from friends or colleagues, but still, it remains a mystery to you? What does it mean, how does it work, and do I really need it? These are just some of the questions that usually come to people’s minds when they hear about RSS.” (Feeder Help, 2021)

What’s RSS?

“RSS stands for “Really Simple Syndication” or “Rich Site Summary.” It’s a web feed format used to distribute frequently updated content – like blog posts, news stories, or podcasts – in a standardized format.” (OpenAI, September 5. 2023)

Step-by-Step Guide to use RSS:

1.Find the RSS Link:

This is usually a small orange icon that looks like radio waves, or it might simply say “RSS”. Click on it. Sometimes you’ll be taken to a page full of code – don’t panic! This is the RSS feed.

2.Copy the Link:

Right-click (or tap and hold on mobile) on the page or the RSS icon, and choose ‘Copy link address’ or something similar.

3.Choose an RSS Reader:

This tool or app collects and displays content from RSS feeds. Some popular options are Feedly, Inoreader, and The Old Reader.

4.Add the RSS Link to the Reader:

Open your chosen RSS reader. Look for an option that says “Add Feed”, “Subscribe”, or something similar. Paste the RSS link you copied into the given field and hit ‘Subscribe’ or ‘Add’.

5.Voila! You’re Subscribed:

Now, every time the website you subscribed to posts new content, it’ll show up in your RSS reader. This way, you can keep track of updates from multiple websites without visiting each one individually.

6.Keep Adding Feeds: For instance, you’re reading this post on my blog (https://hcoco1-blog.onrender.com/whats-rss/) right now. If you want to keep up with my future posts, you can subscribe to my RSS feed by clicking on the orange icon in the bottom left corner of the page. You can also subscribe to my YouTube channel, Twitter feed, or my LinkedIn account.

Why Do This?

It’s a great way to stay updated! Instead of bouncing around different websites to see if they’ve posted anything new, you can just check your RSS reader and get all the latest updates in one place.

References:

What is RSS, and how can you use it? - Feeder Help. (2021, March 25). Feeder Help.

Growth Origin. (2017, March 12). RSS made easy [Video]. YouTube.

The Linux Experiment. (2023, May 9). STOP using SOCIAL MEDIA for News; RSS is MUCH BETTER! [Video]. YouTube.

“What is RSS?” prompt. ChatGPT, August 3 version, OpenAI, September 5. 2023, chat.openai.com.

Building aggregate functions In SQLAlchemy

Ivan Arias — Sun, 27 Aug 2023 00:00:00 +0000

In this tutorial, I will use SQLAlchemy to perform aggregate operations on a database containing information about states, counties, cities, and government facilities. I will describe briefly the process of building a project to use aggregate functions.

Let us check some concepts before starting:

What is SQLAlchemy?

According to Myers (2016), “The SQLAlchemy ORM is what most people think of when you mention SQLAlchemy. It provides a very effective way to bind database schema and operations to the same data objects used in the application. It offers a way to rapidly build applications and get them into customers’ hands.”

Also, the documentation on the SQLAlchemy website says, “SQLAlchemy is the Python SQL toolkit and Object Relational Mapper that gives application developers the full power and flexibility of SQL.”

What aggregate functions In SQLAlchemy are?

Aggregate functions are generic function implementations for a set of standard SQL functions that automatically set up the expected return type for each function.

In SQLAlchemy, an aggregate function is a function where the values of multiple rows are grouped to form a single value of a more significant meaning or measurement. These functions are widely used in database queries to perform calculations on data, such as summing values, calculating averages, or finding the minimum or maximum value in a set.

As can be seen from Figure 1 (GeeksforGeeks, 2022), Some standard aggregate functions include:

sum(): Calculates the sum of values, avg(): Computes the average of values, min(): Determines the smallest value, max(): Determines the largest value, and count(): Counts the number of rows.

Figure 1. Common aggregate functions. GeeksforGeeks (2022).

What is Alembic?

Alembic documentation shows that ‘Alembic is a lightweight database migration tool for usage with the SQLAlchemy Database Toolkit for Python.’

According to Myers (2016), ‘Alembic is a tool for handling database changes that leverages SQLAlchemy to perform the migrations. Since SQLAlchemy will only create missing tables when we use the metadata’s create_all method, it does not update the database tables to match any changes we might make to the columns. Nor would it delete tables that we removed from the code. Alembic provides a way to do things like adding/ deleting tables, changing column names, and adding new constraints. Because Alembic uses SQLAlchemy to perform the migrations; they can be used on various backend databases.’

Process to build a project to use aggregate functions.

(You must have Python installed in your system.)

Overview

Create your own Git Repo.
Creating a Migration Environment.
Configuring a Migration Environment.
Generating a Base Empty Migration.
Autogenerating a Migration.
Test the database.
Populate the database.
Test the database.
Build the aggregate operations.
Test the aggregate operations.

Step by Step

Create your own Git Repo : create your local repo and push it.
Creating a Migration Environment : To create the migration environment, we will create a folder labeled lib, initialize the environment, install the dependencies, and run the first alembic command. This initialization process creates the migration environment and also creates an alembic.ini file with the configuration options
Configuring a Migration Environment :
Generating a Base Empty Migration : This command will create a migration file in the alembic/versions/ subfolder. “Because we do not have any data classes and have made no changes, our upgrade and downgrade methods are empty. So running this migration will have no effect, but it will provide a great foundation for our migration chain.” (Mayers, 2016)
Autogenerating a Migration : With our base in place, we can add our data class to our application. For this tutorial, I will add the final version of models.py, but it is supposed that you should build the models.py file in a few steps and generate different migrations files.

6.Test the database! : After running this migration, we can take a peek in the database to make sure the changes happened:

7.Populate the database : You have noticed that we installed click in step number 2; it was not a mistake. We will take advantage of click commands to seed our database. “Click is a Python package for creating beautiful command line interfaces in a composable way with as little code as necessary. It is the “Command Line Interface Creation Kit.” It is highly configurable but comes with sensible defaults out of the box.” (Docs, Click)

Seed.py : Following a specific order populating the database is crucial. We must start seeding states, which generate state_id that will be used for the others tables, then seed counties table, following cities tables, facilities, and finally, seed associations table. Of course, you can seed the database using another order, but you will probably have to modify NULL or NONE values in some tables’ column IDs.

 @click.group()
 def cli():
     """Manage the database records."""
     pass

 @cli.command()
 def seed_states():
     """ Seed states."""
     session.query(State).delete()
     session.commit()
     session.add_all(states_to_add)
     session.commit()
     click.echo("✅ Done seeding states!")


 @cli.command()
 def seed_counties():
     """ Seed counties."""
     session.query(County).delete()
     session.commit()
     session.add_all(counties_to_add)
     session.commit()
     click.echo("✅ Done seeding counties!")

     # more click commands


 ➜ lib git:(master) python seed.py seed-states
 🌱 Seeding DB...
 ✅ Done seeding states!
 ➜ lib git:(master) ✗ python seed.py seed-counties
 🌱 Seeding DB...
 ✅ Done seeding counties!
 ➜ lib git:(master) ✗ python seed.py seed-cities
 🌱 Seeding DB...
 ✅ Done seeding cities!
 ➜ lib git:(master) ✗ python seed.py seed-facilities
 🌱 Seeding DB...
 ✅ Done seeding facilities!
 ➜ lib git:(master) ✗ python seed.py seed-associations
 🌱 Seeding DB...
 ✅ Done seeding associations!
 ➜ lib git:(master) ✗ >....

8.Test the database : time to check our work! I will use SQLite3 to query the database.

9.Build the aggregate operations : I will use click commands again to perform aggregate operations. Each command prompts the user for input and then executes a database query based on that input. After querying the database, the command outputs a result.

10.Test the aggregate operations using sqlite3: finally, I will use sqlite3 to test the aggregate operations.

Final thoughts:

This tutorial showed how to use SQLAlchemy to query a database. We walked through setting up a project to use aggregate functions. By the end, you should understand how to handle and use such functions effectively.

This article was originally posted on: https://hcoco1-blog.onrender.com/

References:

Myers, J. (2016). Essential sqlalchemy. O’Reilly.

“Documentation.” Alembic, www.alembic.sqlalchemy.org. Accessed 14 Aug. 2023.

“Documentation.” SQLAlchemy, www.sqlalchemy.org/. Accessed 14 Aug. 2023.

GeeksforGeeks. (2022). SQLAlchemy Aggregate Functions. GeeksforGeeks. https://www.geeksforgeeks.org/sqlalchemy-aggregate-functions/

Creating a Dynamic Table in React Using react-table (v7.8.0).

Ivan Arias — Sun, 02 Jul 2023 16:20:41 +0000

In web development, tables are commonly used to display structured data in a tabular format. React provides various tools and libraries to create interactive and dynamic tables. One such library is react-table, which simplifies developing and managing tables in React.

In this tutorial, we will learn how to create a table using the react-table library in a React application. We'll walk through the steps of fetching data from an API, setting up the table component, and rendering the table with sortable columns.

Prerequisites

Before starting, make sure you have the following requirements installed:

Node.js and npm (Node Package Manager) - to set up and manage the React application.
Basic knowledge of React - understanding React components and hooks will be helpful.

Step 1: Set Up the Project

To get started, create a new React project by running the following command in your terminal:

npx create-react-app react-table-demo
cd react-table-demo

Step 2: Install Dependencies

In this step, we'll install the required dependencies for our project. Open a terminal and run the following command inside the project directory:

npm install react-table

Step 3: Fetch Data

In this step, we'll fetch data from an API and store it in the parent component's state. In this code, we define the App component as the parent component. It fetches data from the API using the fetchData function when the component mounts. The fetched data is stored in the data state variable and passed to the Table component as a prop.

import React, { useState, useEffect } from "react";

const App = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    try {
      const response = await fetch("https://cities-qd9i.onrender.com/agents");
      const agents = await response.json();
      setData(agents);
    } catch (error) {
      console.error("Error fetching data:", error);
    }
  };

That is how looks the JSON data.

{
  "agents": [
   {
    "id": 1,
    "first_name": "Alysia",
    "last_name": "Ivashechkin",
    "email": "aivashechkin0@example.com",
    "phone": "(424) 8787997",
    "image": "https://picsum.photos/400",
    "state": "California",
    "city": "Los Angeles",
    "address": "2 Vermont Junction"
  },
  {
    "id": 2,
    "first_name": "Alicia",
    "last_name": "Sworder",
    "email": "asworder1@mozilla.com",
    "phone": "(804) 8988278",
    "image": "https://picsum.photos/400",
    "state": "Virginia",
    "city": "Richmond",
    "address": "362 Hoffman Court"
  }
 ]
}

Step 4: Create the Table Component

In this step, we'll create the Table component that will render the table using the react-table library.

The useMemo hook is used in this code to memoize the columns configuration so that it is only calculated once and avoids unnecessary recalculations and re-renders.

import React, { useMemo } from "react";
import { useTable } from "react-table";
import "./Table.css";

const Table = ({ data }) => {
  const columns = useMemo(
    () => [
      { Header: "ID", accessor: "id" },
      { Header: "First Name", accessor: "first_name" },
      { Header: "Last Name", accessor: "last_name" },
      { Header: "Email", accessor: "email" },
      { Header: "Phone", accessor: "phone" },
      { Header: "State", accessor: "state" },
      { Header: "City", accessor: "city" },
      { Header: "Address", accessor: "address" }
    ],
    []
  );

Step 5: Creating the Table Instance

Using the useTable hook, we create a table instance by passing the columns and data as arguments. The hook returns several properties and methods we can use to render and interact with the table.

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
  } = useTable({ columns, data });

Step 6. Rendering the Table

We render the table. We use the spread operator (...) to apply the getTableProps function to the

element, which assigns the necessary attributes and event handlers to the table.

Inside the table, we render the table headers <thead> and table body <tbody> using the properties provided by the useTable hook. We iterate over the headerGroups array to render the header rows. We iterate over the header array within each row to render individual header cells.

We iterate over the rows array for the table body to render the data rows. Inside each row, we iterate over the cells array to render the individual cells.

  return (
    <div className="table-container">
      <table {...getTableProps()}>
        <thead>
          {headerGroups.map((headerGroup) => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map((column) => (
                <th {...column.getHeaderProps()}>{column.render("Header")}</th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {rows.map((row) => {
            prepareRow(row);
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map((cell) => (
                  <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
                ))}
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );

Step 7: Styling the Table

We apply basic styling to the table container by adding a CSS class table-container to the wrapping

.table-container {
  margin-top: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 8px;
  border-bottom: 1px solid # ddd;
  text-align: left;
}

th {
  background-color: #f2f2f2;
  font-weight: bold;
}

Step 8: Run the Application

To run the application, open a terminal, navigate to the project directory, and run the following command:

npm start

Try yourself Basic Table:

Let's add another functionality: the sortBy hook.

1.-Import the useSortBy hook:

import { useTable, useSortBy } from "react-table";

2.- Modify the useTable hook: The useTable hook uses columns, data, and useSortBy as arguments. The useSortBy hook enables the sorting functionality.

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
  } = useTable({ columns, data }, useSortBy);

3.- Sort indicators in table headers: The table headers are rendered with sorting indicators. A span element is added within each th element to display the sorting indicator based on the sorting state of the column. It shows "🔽" for descending order and "🔼" for ascending order.

4.- Sorting toggle attributes: The th elements have the column.getSortByToggleProps() function added to their attributes. This function enables toggling the sorting order when the column header is clicked.

        <thead>
          {headerGroups.map((headerGroup) => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map((column) => (
                <th {...column.getHeaderProps(column.getSortByToggleProps())}>
                  {column.render("Header")}
                  <span>
                    {column.isSorted ? (column.isSortedDesc ? " 🔽" : " 🔼") : ""}
                  </span>
                </th>
              ))}
            </tr>
          ))}
        </thead>

The updated code enables sorting functionality in the table by making these changes. Clicking on a column header will trigger sorting based on that column, and the sorting indicator will reflect the current sorting state of the column.

Summary.

In this tutorial, we built a table using a react-table library and implemented hooks like sortBy. Using React Hooks effectively is essential for optimizing the performance and maintaining a clean and efficient codebase in React applications.

Try yourself Table with Sort functionality:

References:

W3Schools Free Online Web Tutorials. (n.d.). https://www.w3schools.com/default.asp

MDN Web Docs. (n.d.). https://developer.mozilla.org/en-US/

React-table tutorial - beginners tutorial (2023) YouTube. Available at: https://www.youtube.com/watch?v=A9oUTEP-Q84&ab_channel=PedroTech.

"Give me some ideas to blog about the given code in the last three days" prompt. ChatGPT, July 1th, ChatGPT May 24 Version, OpenAI, chat.openai.com.

JavaScript Dynamic List: The DOM Manipulation.

Ivan Arias — Sun, 14 May 2023 15:27:40 +0000

DOM Manipulation

Since I had difficulty showing a list of items in the Document Object Model (DOM) in my final phase-1 Project. I decided to blog about DOM manipulation using Javascript.
I will describe a step-by-step guide on creating and inserting a dynamic list in the DOM. I will focus on javascript and HTML code rather than on CSS code.

Before starting coding, we need to think about what our goals are. We should make a “mental map” to organize our ideas and define our objectives. Also, we must consider writing clean code: for instance, creating single-purpose functions instead of an extended ones, which are difficult to debug.

First, we start coding a basic HTML structure with head and body tags. Then add an h1 tag for the main heading, an input (type = “text) tag for the text input box, a button tag for triggering a function, a ul tag for the list's content, and a script tag for writing JavaScript code. Some HTML tags have identifiers (id= identifier), there are necessary to link the HTML with javascript. The HTML structure should look like this:

<!DOCTYPE html>
<html>
<head>
  <title>Dynamic List BLOG</title>
</head>
<body>
  <h1>Dynamic List</h1>
  <input type="text" id="countryInput" placeholder="Enter a country">
  <button id="addCountryButton">Add a Country</button>
  <ul id="list"></ul>
  <script></script>
</body>
</html>

In the JavaScript code, we must declare and initialize variables. The variable “list” is an empty array that will store the list of countries. The variable addItemButton stores the HTML button with the identifier id='addItemButton'. Then an eventListener is added to the "Add Country" button. When clicked, it triggers the saveItemToList() function, which saves the entered country to the list.

The following line defines the saveItemToList() function. This function is triggered when clicking the "Add a Country" button. It retrieves the value entered in the input field, trims any leading or trailing whitespace, and checks if it is not an empty string. If it's not empty, the country is added to the list array using the .push() method, the input field is cleared, and the displayList() function is called to update the displayed list.

<script>

  //Declare  variable list and initialize.
  let list = [];
  const addItemButton = document.getElementById('addItemButton');

  // Add event listener to trigger saving of items
   addItemButton.addEventListener('click', saveItemToList);


  // Function to save items to the list
  function saveItemToList() {
   const itemInput = document.getElementById("countryInput");
    const item = itemInput.value.trim();
    if (item !== '') {
      list.push(item);
      itemInput.value = '';
      displayList();
    }
  }

So, now we have a function to save our data, but what if we want to delete one of the countries on the list? We need another single-purpose function to delete countries!

The deleteItem(index) function takes an index as a parameter and removes the corresponding country from the list array using the splice() method. After deleting the item, the displayList() function updates the list in the DOM.

At this point, we have a function to save countries using the .push() method and another function to delete countries using the .splice() method. Our main goal is to insert the countries list in the DOM, so we need a function to display the saved countries.

The displayList() function renders the list in the DOM. It starts by obtaining a reference to the ul element with the id "list." It then clears the existing content of the ul element. Using a for loop, the function iterates over the list array. For each country in the list, it creates a new li element and sets its text content to the country name. It also creates a delete button for each item using the button element.

The delete button is assigned the text "Delete" and an event listener that triggers the deleteItem() function with the corresponding index when clicked. Also, it is appended as a child of the li element, and the li element is appended as a child of the ul element. This process is repeated for each item in the list array, resulting in a dynamically generated list of countries with corresponding delete buttons.

// Function to delete an item from the list
function deleteItem(index) {
  list.splice(index, 1);
  displayList();
}

// Function to display the list in the DOM
function displayList() {
  const listContainer = document.getElementById('list');
  listContainer.innerHTML = '';
  for (let i = 0; i < list.length; i++) {
    const listItem = document.createElement('li');
    listItem.textContent = list[i];
    const deleteButton = document.createElement('button');
    deleteButton.textContent = 'Delete';
    deleteButton.addEventListener('click', () => deleteItem(i));
    listItem.appendChild(deleteButton);
    listContainer.appendChild(listItem);
  }
}

The list of countries is fetched from an API using the fetch() function. It sends an HTTP GET request to the URL and retrieves the response. The response is converted to JSON format using the response.json() method.

The resulting data is an array of objects, where each object represents a country. The map() method to extract each object's country names and assign them to the list array. Finally, the displayList() function is called to render the initial list of countries in the DOM.

So, we can add countries manually and get data from any API if we want. This API “countries” is used as a database on the World Population Dashboard App.

// Fetch the list of countries from the API
    fetch('https://world-population-dashboard.onrender.com/countries')
      .then(response => response.json())
      .then(data => {
        list = data.map(country => country.country);
        displayList();
      })
      .catch(error => console.error('Error fetching countries:', error));
    // Display the initial list on page load
    displayList();
  </script>
</body>
</html>

Finally, the displayList() function is called at the end to ensure that the initial list is displayed when the page loads.

Summary

The last code showed us the power of javascript to manipulate the DOM, creating, selecting, and iterating over elements and objects. JavaScript has become integral to web development, allowing developers to manipulate the DOM, recognize events, and communicate with the server. These features provide developers with the tools to create dynamic, interactive, and responsive web pages that meet the needs of modern web users.

Try it Yourself

References:
W3Schools Free Online Web Tutorials. (n.d.). https://www.w3schools.com/default.asp

MDN Web Docs. (n.d.). https://developer.mozilla.org/en-US/

Traversy Media (n.d.-b). https://www.youtube.com/@TraversyMedia/videos

Laurence Svekis (n.d.-c). https://www.youtube.com/@LaurenceSvekisCourses/videos

1BestCsharp blog. (2017, October 28). Javascript - How To Add LI To UL From Input Text Using JS [ with source code ] [Video]. YouTube. https://www.youtube.com/watch?v=JBdyASuhq1c

kootkot. (2022, February 5). ✅ JavaScript Array | How to Display Array Elements? | Real World Coding Example [Video]. YouTube. https://www.youtube.com/watch?v=MkE2_YWnJbo

Visit my Site

Changing careers

Ivan Arias — Tue, 02 May 2023 15:17:24 +0000

Changing careers is exciting and intimidating, and some people think that starting a new job is challenging and impossible for adults and seniors. I was a geologist long ago, but I am changing my major from geology to software development. There are two reasons why I am changing careers: first, my long-term goals have changed, and second, I realized that dealing with software and data is my passion.

First, I decided to change careers because my long-term goals have changed. I was born in Venezuela, where I got my degree as a geologist and started a family. However, Venezuela's political and economic crisis is worsening, so I decided to create a new life abroad. I began to work at Amazon in the United States in 2020, and I have enrolled in the Amazon Career Program, which allows employees to work and study part-time careers. Thanks to the Amazon Career Program, I have gotten my GED and language certificate, and next October, I will get my certification as a Full Stack Developer.

Second, after several years of working with databases and geostatistical modeling software, I realized that my current passion is working with programming languages, software, and websites. As a result, I decided to pursue a software development career.

In brief, I'm changing careers because my long-term goals have changed, and I realized that my passion is working with programming languages, software, and websites. I have studied at Flatiron School for about a month and learned basic HTML, CSS, and JavaScript concepts and methods. I'll try my best.

Ivan