Forem: jiyongk84

Airline booking app

jiyongk84 — Mon, 09 Oct 2023 03:42:12 +0000

In this blog post, we will explore a project that combines the frontend capabilities of React with the Flask backend, powered by SQLAlchemy for managing database models. This combination allows us to create a practical flight booking app, and we will break down some key components.

Front-End Flight Booking with React

Flight Search
Our flight booking app begins with a user interface powered by React. The core of the app is the flight search feature, allowing users to search for flights by entering a city name. The app fetches flight data from the server based on the city they provided.

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

function SearchFlight() {
  // ...
  const handleFlightSearch = (e) => {
    e.preventDefault();

    if (!cityName) {
      alert('Please enter a city name for flight search.');
      return;
    }

    setLoadingFlights(true);

    // Make a POST request to search for flights based on the city name
    fetch('/api/flights/search', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ city: cityName }),
    })
      .then((response) => {
        if (response.ok) {
          return response.json();
        } else {
          throw an Error('Failed to get flight data');
        }
      })
      .then((data) => {
        setFlights(data);
        setLoadingFlights(false);
      })
      .catch((error) => {
        console.error('Error while fetching flight data:', error);
        setLoadingFlights(false);
      });
  }

  // ...
}

Managing the Cart

Users can add and remove flights in their cart. The cart state is managed within the React app, allowing users to interact with it easily.

// Define the addToCart function to add flights to the cart
const addToCart = (flight) => {
  // Check if the flight is already in the cart
  if (!cart.some((item) => item.id === flight.id)) {
    // If not, add it to the cart
    setCart([...cart, flight]);
  }
};

// Define the removeFromCart function to remove flights from the cart
const removeFromCart = (flightId) => {
  const updatedCart = cart.filter((item) => item.id !== flightId);
  setCart(updatedCart);
};

Booking a Flight

When users are ready to book their selected flights, they can proceed to the booking step. This initiates the booking process, where we create booking objects based on the user's cart and submit these bookings to the server.

const handleSubmit = async () => {
  if (flights.length is 0) {
    alert('Cart is empty. Add flights to the cart before submitting.');
    return;
  }

  try {
    setSubmitting(true);

    // Create an array of booking objects based on cart data
    const bookings = flights.map((cartItem) => ({
      user_id: userId,
      flight_id: cartItem.id,
      order_number: generateOrderNumber(),
      order_status: 0,
    }));

    // Make a POST request to create the bookings
    const bookingResponse = await fetch('/api/bookings', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(bookings),
    });

    if (bookingResponse.ok) {
      alert('Booking successfully submitted!');
    } else {
      // Handle error
      // ...
    }
  } catch (error) {
    console.error('An error occurred:', error);
    alert('An error occurred while submitting the booking.');
  } finally {
    setSubmitting(false);
  }
};

Back-End with Flask-SQLAlchemy

On the server side, Flask and SQLAlchemy play a significant role. Let's take a closer look at some of the essential backend models that power our flight booking app.

User Model

The User model represents app users and includes fields such as username, email, first name, and last name. SQLAlchemy is used to hash and manage user passwords securely.

class User(db.Model):
    # ...
Airport and Flight Models
We define models for airports and flights to manage airport data and flight details. These models are interconnected through foreign keys, creating a seamless relationship.

class Airport(db.Model):
    # ...

class Flight(db.Model):
    # ...

Booking and Payment Models

For bookings and payments, we use SQLAlchemy to manage order details. The Booking model is connected to both users and flights, linking the booking to a specific user and flight.

class Booking(db.Model):
    # ...

User Access Management

User access is a crucial aspect of the flight booking app. Users can sign in, sign up, and sign out as needed. The UserAccess component in React manages this functionality.

import React, { useState } from 'react';

function UserAccess({ onSignIn, onSignUp }) {
  // ...
  const handleSignIn = async () => {
    if (!username || !password) {
      setInputError(true);
      return;
    }
    // ...
  };

  const handleSignUp = async () => {
    if (!username || !password || !firstName || !lastName || !email) {
      setInputError(true);
      return;
    }
    // ...
  };

  const handleSignOut = async () => {
    // ...
  };

  return (
    <div className="user-access">
      {/* User sign-in and sign-up components */}
    </div>
  );
}

Python backend routing(views):

Here is the breakdown of the app.py to receive the request from the react front end:

Find Airports (AirportSearch Class): When you're planning a trip and want to know which airports are available in your destination city, you use the "AirportSearch" feature. The app sends a request to the /api/airports/airportsearch route, which is handled by the "AirportSearch" class. This class retrieves a list of airports in your desired city and sends it back to your app.

Your Info (UserProfile Class): If you want to see your personal details stored in the app, you access the "Your Info" section. The app checks your identity and then uses the /api/users/profile route, handled by the "UserProfile" class, to fetch and display your info. It's like opening your profile page.

Join Us (Signup Class): If you're new to the app and want to create an account, you click on the "Join Us" or "Sign Up" button. This action triggers the app to send your registration details to the /api/users/signup route, managed by the "Signup" class. It's like filling out a form to become a member.

Who's Here (CheckSession Class): You can use the "Who's Here?" feature to see who else is currently using the app. The app queries the /api/users/checksession route, which is handled by the "CheckSession" class, to find out who's logged in and active in the app.

Sign In (Login Class): If you already have an account and want to log in, you click on "Sign In." The app sends your username and password to the /api/users/login route, which is managed by the "Login" class. This class checks if the provided credentials match and grants you access if they do.

Sign Out (Logout Class): When you're done using the app, you click "Sign Out" to log out. This action sends a request to the /api/users/logout route, managed by the "Logout" class, which locks the door to your account and keeps it safe.

Find Flights (FlightSearch Class): After selecting your destination, you use the "Find Flights" feature to find the perfect flight. The app queries the /api/flights/search route, which is handled by the "FlightSearch" class. This class retrieves and displays a list of flights departing from or arriving at your chosen location.

Book a Flight (BookingFlight Class): Once you've found the ideal flight, you're eager to book it. The "Book a Flight" feature uses the /api/bookings route, which is managed by the "BookingFlight" class, to make the booking official. It's like telling the app, "I'm ready to go on this journey."

These route-handler classes are like specialized workers in your app, each responsible for specific tasks, and they interact with the routes to make your app work smoothly. As a user, you interact with the features provided, and the app takes care of the rest by using the corresponding class to make it all happen.

In this blog post, we've explored how to create a practical flight booking app by combining React and Flask-SQLAlchemy. We've walked through key components, such as flight search, cart management, booking, and user access. With this information, you're all set to start building your own web applications using React and Flask. Happy coding!

Maintenance tech task aid CLI app with SQLAlchemy

jiyongk84 — Wed, 30 Aug 2023 20:34:05 +0000

Hello again!

On this blog post, I am going to talk about my latest project that I have worked on using Python and SQLAlchemy ver 1.4 with Alembic for database handling.

What is SQLALchemy?

It is a SQL toolkit and object-relational mapper(ORM) for the Python. It creates SQL database and can create relationships without writing SQL code. It sounds simple but it was not for me.

What is Alembic

Alembic is a database migrations tool that was created by SQLAlchemy's author to help populate the database.

Recap:
SQLAlchemy: Creates a skeleton(structure) of the database.
Alembic: Seeds or populates the data in the database.

First of all, SQLAlchemy was pretty tough to understand but after many trials and errors, I managed to create a basic database using two separate JSON files and two "seed" files to create a skeleton of my database: aircraft.db based on the schema and use a "models" file to populate the actual data using Alembic.

The problems that I ran into were mostly in writing the schema in the seed and models files. SQLAlchemy doesn't allow for incorrect names for database "key" references such as "id" or "user" in the schema between the tables so it gives a whole bunch of error codes.

My "models" for aircraft.db

from sqlalchemy.orm import declarative_base , relationship, backref
from sqlalchemy import Column, Integer, String, ForeignKey

Base = declarative_base()

#Aircraft fleet description
class Aircraft(Base):
    __tablename__ = 'Aircraft'

    id = Column(Integer, primary_key=True)
    make = Column(String)
    model = Column(String)
    body_type = Column(String)

    tasks = relationship("Aircraft_Tasks", backref=backref("Aircraft"))

    def __repr__(self):
        return f"\n<Aircraft" \
            + f"id={self.id}, " \
            + f"make={self.make}, " \
            + f"model={self.model}, " \
            + f"body_type={self.body_type} " \
            + ">"

#Air Transportation Association (ATA) chapter numbers and tasks 
class Aircraft_Tasks(Base):
    __tablename__ = 'Maintenance_tasks'

    id = Column(Integer, primary_key=True)
    ata_chapter_number = Column(Integer)
    ata_chapter_name = Column(String)
    task = Column(String)

    aircraft_id = Column(Integer, ForeignKey('Aircraft.id'))


    def __repr__(self):
        return f"\n<Aircraft_Tasks " \
            + f"id={self.id}, " \
            + f"ata_chapter_number={self.ata_chapter_number}, " \
            + f"ata_chapter_name={self.ata_chapter_name}, " \
            + f"task={self.task} " \
            + ">"

The "tablename" represents the name of the database table and items below such as the "id" represent the columns as shown above taking a "String" as values. The Columns can take Integers as values as defined on the second table under "ata_chapter_number"

The "repr" is a method that shows a class's object into a string readable form. It makes the class object easy to read and recreate it.

After the database was created, the data was migrated using Alembic.

alembic init "your directory" #initiate data migration
alembic revision --autogenerate -m 'your schema update description' #create a skeleton database file with a descriptor of your version name
alembic upgrade head #upgrade(if different) or populate/migrate the data

After running "alembic upgrade head"

Populated database

After creating and joining the database, I used it in my CLI app, called Aircraft tech taskAid.

This app is a CLI(Command Line Interface) that basically takes user input and manages tasks by adding, deleting tasks from the database as well as adding new tasks to the database.

I have used Simple term Menu package by IngoMeyer441 to have a menu for the initial page. The title was created by using Text to ASCII Art Generator (TAAG) at patorjk.com and prettyCli by Noyoshi to color the different menu titles. It lists options to choose the aircraft, pending work, and quit.

Main menu:

#Initial app menu
    def main(self):
        while True:
            heading.hello_air_tech()
            print(green("Welcome Aircraft Tech! Please make a selection:"))
            options = ["Aircraft", "Pending work", "Quit"]
            menu = TerminalMenu(options)
            menu_entry_index = menu.show()
            # Aircraft is selected
            if menu_entry_index == 0:  
                self.show_aircraft_models()
            # Pending work is selected
            elif menu_entry_index == 1:  
                self.manage_pending_work()

            #Check if any pending tasks before exiting the app
            else:
                if self.pending_tasks:
                    print(yellow("You have pending tasks. Are you sure you want to quit? (Y/N)"))
                    choice = input().lower()
                    if choice == 'y':
                        print(magenta("Goodbye!"))
                        break
                else:
                    print(magenta("Goodbye!"))
                    break

Depending on the option chosen, the app will lead to another submenu such as "Pending work" as shown below.

Displaying all the tasks from database:

def handle_aircraft_tasks(self, selected_model):
        while True:
            print(blue(f"You have selected aircraft model: {selected_model}"))
            tasks = self.session.query(Aircraft_Tasks).all()

            if tasks:
                task_strings = [f"ATA {task.ata_chapter_number}, {task.task}" for task in tasks]
                task_menu = TerminalMenu(task_strings + ["Go Back"], title="Select a Task:")
                task_index = task_menu.show()

                if task_index >= 0 and task_index < len(tasks):
                    selected_task = tasks[task_index]
                    print(red(f"You selected: ATA {selected_task.ata_chapter_number} : {selected_task.task}"))
                    self.pending_tasks.append(selected_task)
                    print("Task added to pending work.")
                else:
                    break
            else:
                print("No tasks available for selected aircraft model.")
                break

In this section, after the aircraft is chosen, all the tasks get called by:
tasks = self.session.query(Aircraft_Tasks).all()"
if the aircraft model was chosen by satisfying the while loop condition as True.

This is the result:

After a task is chosen, the selected item is shown:

And also added to the pending work menu:

if task_index >= 0 and task_index < len(tasks):
                    selected_task = tasks[task_index]
                    print(red(f"You selected: ATA {selected_task.ata_chapter_number} : {selected_task.task}"))
                    self.pending_tasks.append(selected_task)
                    print("Task added to pending work.")

The Pending Work menu has the ability to add, delete, and create new tasks.

def manage_pending_work(self):
        while True:
            if not self.pending_tasks:
                print(red("No pending tasks."))
            else:
                print("Pending tasks:")
                for i, task in enumerate(self.pending_tasks, start=1):
                    print(f"{i}. ATA {task.ata_chapter_number} : {task.task}")
            #Pending tasks submenu
            options = ["Add Task", "Remove Task", "Go Back"]
            menu = TerminalMenu(options, title="Pending Work:")
            option_index = menu.show()

            if option_index == 0:
                self.add_task_to_pending()
            elif option_index == 1:
                if not self.pending_tasks:
                    print("No pending tasks to remove.")
                else:
                    task_strings = [f"ATA {task.ata_chapter_number}, {task.task}" for task in self.pending_tasks]
                    task_menu = TerminalMenu(task_strings + ["Go Back"], title="Select a Task to Remove:")
                    task_index = task_menu.show()

                    if task_index >= 0 and task_index < len(self.pending_tasks):
                        removed_task = self.pending_tasks.pop(task_index)
                        print(f"Task removed from pending work: ATA {removed_task.ata_chapter_number} : {removed_task.task}")
                        self.remove_task_from_database(removed_task)  # Remove the task from the database
            else:
                break

The manage_pending_work function has a condition where it will check if there are any task added the list and will "alert" the user if there are any pending tasks or not. It also has the ability to delete tasks from the database via remove_task_from_database function.

def remove_task_from_database(self, task): self.session.delete(task) self.session.commit()
The most important part here is including session and using the delete method and commit function. Otherwise the database won't be changed and will give you a bunch of errors.

There are more functions to the app but these are main ones. Thank you for reading. I hope this was helpful and see you in the next blog.

Point of Sale app

jiyongk84 — Mon, 03 Jul 2023 03:58:57 +0000

Hello again. Let's continue on our journey to becoming a web developer. On this post, we will explore React and many of its features and applications.

For this project, I have created a Point of Sale (POS) / e-commerce app.

In this post, I will demonstrate the various components used in a React e-commerce application. Each component serves a specific purpose and contributes to the overall functionality of the application. I will discuss the useState and useEffect hooks, as well as the React Router, and provide an overview of how I have utilized them within each component.

App Component:
As the entry point for the application, I use the App component. It uses the React Router (BrowserRouter, Routes, and Route) to handle navigation and render different components based on the current URL. Additionally, it includes a NavBar component for navigation and manages the cartItems state using the useState hook.

function App() {
  const [cartItems, setCartItems] = useState([]);

  return (
    <Router>
      <div>
        <NavBar />
        <Routes>
          <Route path="/" element={<Home onAddItem={setCartItems} />} />
          <Route
            path="/cart"
            element={<Cart items={cartItems} onDeleteItem={setCartItems} />}
          />
          <Route path="/data" element={<Data />} />
        </Routes>
      </div>
    </Router>

NavBar Component:
To display a simple navigation bar with links to the home page and the data page, I utilize the NavBar component. It utilizes the Link component from React Router to enable seamless navigation between different pages.

import React from 'react';
import { Link } from 'react-router-dom';

function NavBar() {
  return (
    <nav className='navbar'>
      <Link className='navbar-item' to="/">Home</Link>
      <span className='navbar-item'>|</span>
      <Link className='navbar-item' to="/data">Data</Link>
    </nav>
  );
}

export default NavBar;

Home Component:
Representing the home page of the e-commerce application, the Home component is responsible for fetching a list of items from a server using the useEffect hook. It then displays these items as item cards. Within this component, I manage the items and cartItems states using the useState hook. Furthermore, I have integrated a Cart component to showcase the items added to the cart. Additionally, I have implemented functions to handle adding items to the cart, removing items from the cart, and clearing the cart. Finally, after the items are added, increment and decrement buttons are rendered to give additional functionality to the cart, instead of rendering multiple of the same item.

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

  const fetchItems = () => {
    fetch('http://localhost:3000/items')
      .then((response) => response.json())
      .then((data) => setItems(data))
      .catch((error) => console.log('Error fetching items:', error));
  };

  const handleAddToCart = (item) => {
    const existingItem = cartItems.find((cartItem) => cartItem.id === item.id);
    if (existingItem) {
      const updatedItems = cartItems.map((cartItem) =>
        cartItem.id === item.id ? { ...cartItem, quantity: cartItem.quantity + 1 } : cartItem
      );
      setCartItems(updatedItems);
      onAddItem(updatedItems);
    } else {
      setCartItems((prevItems) => [...prevItems, { ...item, quantity: 1 }]);
      onAddItem({ ...item, quantity: 1 });
    }
  };

  const handleDecrementItem = (item) => {
    if (item.quantity > 1) {
      const updatedItems = cartItems.map((cartItem) =>
        cartItem.id === item.id ? { ...cartItem, quantity: cartItem.quantity - 1 } : cartItem
      );
      setCartItems(updatedItems);
      onAddItem(updatedItems);
    } else {
      handleDeleteItem(item);
    }
  };

Cart Component:
In the Cart component, my focus is on displaying the items added to the cart. By receiving the items state and various callback functions from the Home component, I can effectively manage the cartItems state using the useState hook. Within this component, I render a list of cart items, providing buttons to increment and decrement item quantities, remove items from the cart, and clear the cart. Finally, I calculate the total price of the items in the cart and display it.


function Cart({ items, onDeleteItem, onClearItems, onAddItem, onDecrementItem }) {
  const handleRemoveItem = (index) => {
    onDeleteItem(index);
  };

  const handleDecrementItem = (item) => {
    onDecrementItem(item);
  }
  const handleClearItems = () => {
    onClearItems();
  };

  const handleAddItem = (item) => {
    onAddItem(item);
  };

  const calculateTotal = () => {
    const totalPrice = items.reduce((total, item) => total + item.price, 0);
    return totalPrice.toFixed(2);
  };

  return (
    <div className="cart-container">
      <div className="cart-items">
        {items.length === 0 ? (
          <p>Your cart is empty. Add items from the Item Selection.</p>
        ) : (
          <ul>
            {items.map((item, index) => (
              <li key={index}>
                <span>{item.name}</span>
                <div>
                  <button className="decrement-item" onClick={() => handleDecrementItem(item)}>
                    <FaMinus />
                  </button>
                  <span>{item.quantity}</span>
                  <button className="increment-item" onClick={() => handleAddItem(item)}>
                    <FaPlus />
                  </button>
                </div>
                <button className="delete-item" onClick={() => handleRemoveItem(index)}>
                  <FaTrash />
                </button>
              </li>
            ))}
          </ul>
        )}
        {items.length > 0 && (
          <button className="clear-button" onClick={handleClearItems}>
            Clear Cart
          </button>
        )}
        <div className="total">
          <span>Total: $ {calculateTotal()}</span>
        </div>
      </div>
    </div>
  );
}

Data Component:
The Data component acts as a page where users can both add and view items to the database. To achieve this functionality, I used controlled form inputs through the useState hook and fetch items from a server utilizing the useEffect hook. Additionally, I have incorporated a form to add items, featuring fields for name, type, picture URL, and price. When adding items, I utilize a POST request to the server, subsequently updating the allItems state. Lastly, I present a table of all items fetched from the server, allowing users to delete items individually using the delete button.

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

  const fetchItems = () => {
    fetch('http://localhost:3000/items')
      .then((response) => response.json())
      .then((data) => setAllItems(data))
      .catch((error) => console.log('Error fetching items:', error));
  };

  const handleAddItem = (e) => {
    e.preventDefault();

    const newItem = {
      name: itemName,
      type: itemType,
      image: itemPicture,
      price: parseFloat(itemPrice),
    };

    fetch('http://localhost:3000/items', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(newItem),
    })
      .then((response) => {
        if (!response.ok) {
          throw new Error('Failed to add item');
        }
        return response.json();
      })
      .then((data) => {
        onAddItem(newItem);

        setItemName('');
        setItemType('');
        setItemPicture('');
        setItemPrice('');

        fetchItems();
      })
      .catch((error) => {
        console.log('Error adding item:', error);
      });
  };

  const handleDeleteItem = (id) => {
    fetch(`http://localhost:3000/items/${id}`, {
      method: 'DELETE',
    })
      .then((response) => {
        if (!response.ok) {
          throw new Error('Failed to delete item');
        }

        fetchItems();
      })
      .catch((error) => {
        console.log('Error deleting item:', error);
      });
  };

  return (
    <div className="data-section">
      <h2>Add Items</h2>
      <form onSubmit={handleAddItem}>
        <input
          type="text"
          placeholder="Item Name"
          value={itemName}
          onChange={(e) => setItemName(e.target.value)}
          required
        />
        <input
          type="text"
          placeholder="Item Type"
          value={itemType}
          onChange={(e) => setItemType(e.target.value)}
          required
        />
        <input
          type="url"
          placeholder="Item Picture (URL)"
          value={itemPicture}
          onChange={(e) => setItemPicture(e.target.value)}
          required
        />
        <input
          type="number"
          placeholder="Item Price"
          value={itemPrice}
          onChange={(e) => setItemPrice(e.target.value)}
          required
        />
        <button type="submit">Add</button>
      </form>

      <h2>All Items</h2>
      <table className="item-table">
        <thead>
          <tr>
            <th className="category">Item Name</th>
            <th className="category">Item Type</th>
            <th className="category">Price</th>
            <th className="category">Actions</th>
          </tr>
        </thead>
        <tbody>
          {allItems.map((item) => (
            <tr key={item.id}>
              <td>{item.name}</td>
              <td>{item.type}</td>
              <td>{item.price}</td>
              <td>
                <button onClick={() => handleDeleteItem(item.id)}>Delete</button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

This application can be used as a Point of Sale(POS) or as an e-commerce site allowing users to order or receive orders. This app can be tailored to many types of businesses such as restaurants, mechanic shops, clothing shops, and online stores.

My first single page app (SPA)

jiyongk84 — Mon, 15 May 2023 06:17:50 +0000

Hello everyone. My name is Jiyong and I am a student at Flatiron.
Welcome to my first blog post and it's a project walkthrough!

This is the initial page of the app. It's called World Countries Finder.

This app is a simple web page that will fetch data from an API and display a card with a given input, in this case a country name. The form will receive the data from the API and display the country's capital city, continent, the flag, and spoken language(s). The web page has a 3 files: an HTML, CSS, and JavaScript. It has a Heading, background image, and a search box. The search box was created with a form element in html and it includes the class name, button element with 'Submit' text.

The background image was implemented using CSS on the body element with background: url(path), with a height of 100vh(viewport height). Viewport height is the viewable screen's height. The value of 100vh will fill background image to the entire screen within the body element.

After the correct input is received, the app will create a 'card' and display it below the search box.

The web page can fill up to 5 cards wide and will fill on the next line.

If the country name is not found or has an incorrect spelling, it will display an alert.

That's the basic functionality of the single page app.

But how does it all work? For that, we need to go to the JS file and Event handlers for form submissions and check out Fetch API.

Event handlers basically take an event type such as a 'click', 'mouseover', or 'mouseup' and a listener, which is an object that receives a notification or a Javascript function, such as a callback function. Please visit MDN web docs for more information.
From MDN:

addEventListener(type, listener)
addEventListener(type, listener, options)
addEventListener(type, listener, useCapture)

My app used an Event listener that 'listened' for a 'submit' event in the form and called back a function 'getCountries':

The getCountries() function has an 'if' statement to check if the input form is not empty denoted with if (inputValue === '') with an alert window if the condition is not met. Also it is calling the API using fetch API to receive data in JSON format after the input form condition is true.

fetch API

The first .then receives data and transforms in JSON format. The second .then 'implements' that JSON using .map method to create a new array of results from the JSON object and is defined with a variable 'matchingData' and it uses a callback function to return a single element in the new array. (listOneCountry(matchingData.shift()); shift taking the first element of the new array.

MDN:
map(callbackFn)
map(callbackFn, thisArg)

The second .then also has a condition: if the 'matchingData.length>0' run the listOneCountry() function, else display an alert 'No match found'.

Finally,
The listOneCountry() function 'creates' a card with information such as spoken languages, continent, the flag image, using different types of html elements, such as 'div', 'p', and 'img src'. Some data need to be 'extracted' using the Object.values method to get the value from the object. After that the 'card' was appended (using .appendChild) to display on the DOM.

Result:

I hope this project was helpful and there is more to come! This is not the final product!

References:

MDN web docs:
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map