Forem: familymanjosh

Constructing Web Applications with Flask and SQLAlchemy

familymanjosh — Wed, 14 Jun 2023 19:57:44 +0000

Introduction:
Flask and SQLAlchemy are two influential Python libraries that, when combined, provide an excellent foundation for crafting robust web applications. Flask is a lightweight web framework that follows the microservice architecture, while SQLAlchemy is an Object-Relational Mapping (ORM) tool that simplifies database operations. In this blog, we'll explore the amalgamation of Flask and SQLAlchemy and demonstrate how they can be utilized together to develop scalable and maintainable web applications.
**
Setting up Flask:**
To get started, we need to install Flask and establish a fundamental Flask application. Flask can be effortlessly installed using pip, the Python package manager. Once installed, we can generate a new Flask application by importing the necessary modules, defining routes, and running the development server. We'll also investigate Flask's request and response handling capabilities, URL routing, and template rendering.

Introduction to SQLAlchemy:
Next, we'll delve into SQLAlchemy and its fundamental concepts. SQLAlchemy provides an advanced, user-friendly interface for interacting with databases, enabling us to work with databases using Python objects and methods. We'll explore SQLAlchemy's Object-Relational Mapping capabilities, which allow us to define database models as Python classes, and learn how to execute common database operations such as table creation, data querying, and record modification.

Integrating Flask and SQLAlchemy:
Now that we have a solid understanding of Flask and SQLAlchemy independently, we'll explore how they can be integrated to harness the strengths of both libraries. We'll configure Flask to utilize SQLAlchemy as its database engine and establish a connection to a database. We'll demonstrate how to define SQLAlchemy models within a Flask application and how to create database tables based on these models.

Performing Database Operations:
With the integration in place, we'll explore how to execute various database operations using SQLAlchemy within Flask. We'll cover typical tasks such as data retrieval, result filtering, record updates, and data deletion. We'll also discuss advanced features provided by SQLAlchemy, such as eager loading, relationships between tables, and managing database transactions.

Flask-SQLAlchemy Extension:
In addition to the core SQLAlchemy library, Flask offers a convenient extension known as Flask-SQLAlchemy, which further simplifies the integration process. We'll explore how to leverage Flask-SQLAlchemy to streamline common database tasks with reduced lines of code, including session management, database migrations, and query optimization.

Testing and Debugging:
Writing tests and debugging are integral parts of any software development process. We'll discuss strategies for testing Flask applications that utilize SQLAlchemy, including unit testing database operations and utilizing tools such as Flask's testing client and the pytest framework. Additionally, we'll explore techniques for debugging SQLAlchemy queries and resolving common issues that may arise during development.

Conclusion:
Flask and SQLAlchemy form a dynamic combination when it comes to constructing web applications in Python. By combining Flask's simplicity and flexibility with SQLAlchemy's powerful ORM capabilities, developers can create resilient, scalable, and maintainable applications. In this blog, we've explored the integration of Flask and SQLAlchemy, covering the setup process, database operations, and testing/debugging techniques. Equipped with this knowledge, you'll be able to develop feature-rich web applications using Flask and SQLAlchemy.

Remember, practice makes perfect, so don't hesitate to delve deeper into Flask and SQLAlchemy documentation to explore the full range of capabilities offered by these exceptional libraries. Happy coding!

Understanding Python Classes: A Comprehensive Guide

familymanjosh — Thu, 25 May 2023 20:50:55 +0000

Python, as a language is mainly, object-oriented programming (OOP), where it provides powerful tools for structuring and organizing code. One of the main features of Python's OOP model is the idea of classes. Classes allow you to define blueprints for objects, condensing data and behavior together in a cohesive unit. In this blog post, we will delve into the world of Python classes, exploring their syntax, attributes, methods, and inheritance.

Creating a Class

To define a class in Python, you use the class keyword followed by the name of the class. Let's start by creating a simple class called Person that represents a person's attributes:

class Person:
    pass

The pass statement is a placeholder that allows us to define an empty class for now. We'll add more to it shortly.

Instantiating Objects

Once a class is defined, you can create instances of that class, also known as objects. Objects are specific instances of a class that possess their own set of attributes and can perform actions defined within the class.

To create an object, you call the class name followed by parentheses:

person1 = Person()
person2 = Person()

In the above code snippet, we created two Person objects, person1 and person2.

Class Attributes

Classes can have attributes, which are variables shared among all instances of the class. These attributes can be accessed using dot notation. Let's add some attributes to our Person class:

class Person:
species = 'Human'

def __init__(self, name, age):
    self.name = name
    self.age = age

In the modified Person class, we added two attributes: species and name. The species attribute is a class attribute, while name is an instance attribute. The init method, also known as the constructor, is a special method that gets called when an object is instantiated. It allows us to set initial values for instance attributes.

Instance Methods

Methods are functions defined within a class that can perform actions or provide functionality to objects of that class. Let's add a method called greet to our Person class:


class Person:
    # ...

    def greet(self):
        return f"Hello, my name is {self.name}!"

The greet method takes self as a parameter, which refers to the instance of the class. It can access the instance attributes using the self keyword.

To call the greet method on a Person object, we use dot notation:

person = Person("Alice", 25)
print(person.greet())  # Output: Hello, my name is Alice!

Class Methods and Static Methods

Apart from instance methods, Python classes support class methods and static methods.

A class method is a method that operates on the class itself rather than on instances of the class. It's defined using the @classmethod decorator and takes the class (cls) as the first parameter. Let's add a class method to our Person class:

class Person:
    # ...

    @classmethod
    def from_birth_year(cls, name, birth_year):
        age = datetime.date.today().year - birth_year
        return cls(name, age)

In this example, we defined the from_birth_year class method that takes the name and birth_year as parameters and calculates the age based on the current year. It then returns a new instance of the class using the cls parameter.

A static method is a method that doesn't operate on the instance or the class. It's defined using the @staticmethod decorator and doesn't require any additional parameters. Let's add a static method to our Person class:


class Person:
    # ...

    @staticmethod
    def is_adult(age):
        return age >= 18

The is_adult static method takes an age parameter and checks if the person is an adult based on a threshold value.

Inheritance

Inheritance is a fundamental concept in OOP that allows you to create a new class by deriving from an existing class. The new class, called the child class or subclass, inherits the attributes and methods of the parent class or superclass. This promotes code reuse and enables hierarchical relationships between classes.

Let's define a new class Employee that inherits from the Person class:

class Employee(Person):
    def __init__(self, name, age, employee_id):
        super().__init__(name, age)
        self.employee_id = employee_id

In the above example, the Employee class inherits from the Person class using the parentheses after the class name. It also defines an additional attribute employee_id and overrides the init method to include the new attribute. The super() function is used to call the superclass's init method and initialize the inherited attributes.

Conclusion

Python classes provide a powerful mechanism for organizing and structuring code. By encapsulating data and behavior within a class, you can create reusable objects with well-defined attributes and methods. In this blog post, we explored the syntax of defining classes, creating objects, using attributes, writing methods, and leveraging inheritance.

Classes are a fundamental building block of Python's object-oriented programming paradigm, and mastering them is essential for writing clean and maintainable code. With practice and exploration, you'll be able to unlock the full potential of classes in Python.

Have fun Creating!

Intro to React, Components and Props

familymanjosh — Wed, 03 May 2023 03:28:46 +0000

Intro

React is a popular JavaScript library for building user interfaces. It allows you to build reusable components that encapsulate the logic and rendering of a particular part of your application. In this blog post, we'll dive into the concepts of components and props in React, and explore how they work together to create powerful UIs.

Components

In React, components are the building blocks of your UI. A component is a reusable piece of code that defines how a part of your UI should be rendered, and how it should behave when certain events occur. Components can be simple, such as a button, or complex, such as a search bar that allows users to filter through a large data set.

There are two types of components in React: functional components and class components. Functional components are defined as functions that take in some data (also known as props) and return some JSX (JavaScript XML) code that represents the UI element. Class components are defined as classes that inherit from the React.Component class, and provide additional functionality such as state management.

Here's an example of a simple functional component that renders a button:

import React from 'react';

function Button({props}) {
  return (
    <button onClick={props}>
     some label
    </button>
  );
}

export default Button;

In this example, the Button component takes in a props object as an argument, which contains two properties: onClick and label. The onClick property is a function that should be called when the button is clicked, and the label property is the text that should be displayed on the button.

The return statement in the Button function contains JSX code that defines how the button should be rendered. The onClick property is set to the onClick function provided in the props object, and the label property is used to render the text on the button.

Props

Props are short for "properties", and are a way of passing data from a parent component to a child component. In the example above, the Button component takes in two props: onClick and label. When the Button component is used in another component, the parent component can pass in the values for these props, like so:

import React from 'react';
import Button from './Button';

const App = () => {
  const handleClick = () => {
    console.log('Button clicked!');
  }

  return (
    <div>
      <Button onClick={handleClick}/>
    </div>
  );
}

export default App;

In this example, the App component is the parent component, and it's rendering the Button component as a child component. The onClick prop is set to the handleClick function defined in the App component.

When the Button component is rendered by the App component, the prop is passed in as an object,changing the Component button.js to this:

import React from 'react';

function Button({onClick}) {
  return (
    <button onClick={onClick}>Click me!</button>
  );
}

export default Button;

The Button component can then use these props to render the button with the correct text and behavior.

Conclusion

In this blog post, we've explored the concepts of components and props in React. Components are the building blocks of your UI, and can be either functional or class components. Props are a way of passing data from a parent component to a child component, and are used to customize the behavior and rendering of the child component.

Understanding components and props is essential to building powerful UIs in React, and I hope this makes understanding React a little easier. Till next time.....

Code Challenge Tutorial

familymanjosh — Sat, 01 Apr 2023 23:37:47 +0000

Hi, my name is Josh! Are you about to take your first Coding-Challenge, or did you just fail your first Challenge? Well then you are in luck. This tutorial will be a step by step guide to pass your deliverables. I will cover base deliverables. This will be great if you just started phase-1 for Software-Engineering program with FlatIron School.

So First we are gonna start with a github link, with special thanks to Flatiron, for the resource. We will be using an Instructor's created one. This challenge is called Calexico. Here is the link so you can follow along:The Challenge
And here is a photo of the Deliverables:

So to begin, the first thing you will want to do is check the Html file. If your script tag where you call the .js file, is on the top of the page that you have a defer. It should look like this:

This is very important because when we start using DOM elements, and manipulating them, we will need access to all the HTML. So if we do not defer the page will load the .js file before loading the entire .HTML file which can be problematic. Now that we have done that we can move to the next step.

Alright this is where you will look at your preview and run
json-server --watch db.json
in your terminal, make sure you are in the proper folder. This will give us access to the back end or server, in this case db.json. Then we are going to grab the URL that we will need which in this case is http://localhost:3000/menu
we will assign it to a variable

const menuUrl = "http://localhost:3000/menu"

This will be the first line in your .js file

Now move on to the next step. Open the preview file and find all the DOM Elements you will need to pass the base Deliverables. This is first seen in the second Deliverable/Challenge. Do not fret, I know we have not done the first yet, we will get there.

Challenge #2
When the page loads, display the first menu item. You should set the image, name, description, and price. All the correct elements to set are located in the #dish section element.

So from this we see that we will need the image, name, description, and price elements from the HTML. So this is where we will start coding the next few lines. I like to comment what each section is doing so I will put a //Dom Selectors then list every Dom element we will need.
Which looks like this
We also should look at the other deliverables to see if we will need any more then just those.
Which there are:

Challenge #1
Fetch all the menu items from http://localhost:3000/menu. For each menu item create a span element that contains the name of the menu item, and add it to the #menu-items div.
Challenge #3
When the user clicks on the menu items on the left, they should see all the details for that specific menu item.
Challenge #4
The user should be able to add the menu items to their cart. When the user presses the 'Add to Cart' button, that number should be added to however many are currently in the cart.

So I put in italics what the other Dom elements we will need. Next up is to grab these elements and assign them to variables like so:

//Dom selectors
const menuDiv = document.getElementById("menu-items")
const menuDetails = document.getElementById("dish")
const menuImage = document.getElementById("dish-image")
const menuName = document.getElementById("dish-name")
const menuDescription = document.getElementById("dish-description")
const menuPrice = document.getElementById("dish-price")
const menuCart = document.getElementById("number-in-cart")
const menuForm = document.getElementById("cart-form")
const menuCartAmount =  document.getElementById("cart-amount")
const currentCart = {}

Now that we have this we can move forward to our next step. We will add a new comment for our block of code called //Fecthes. In this we have two options. we can either have the fetch in an arrow function that will need to be initalized at the bottom of the page which would look like so

//fetches
const fetchAll = () =>{
    fetch(menuUrl)
}
//init
const init = () =>{
    fetchAll()
  }
  init()

This init function will load our fetch on

page-load. Now this fetch will not do anything yet because we are not done. The fetch will be what we utilize to grab all the information we will need from the Server. The fetch provides the front end access to it. So you will first write fetch() and in the parameter is where you will call the URL. Now remember that is the first line we wrote so in this case we can just put that variable in fetch(menuUrl). Next step is to tell js what we are doing with this information in two .then s. the completed code looks like this.

const fetchAll = () =>{
    fetch(menuUrl)
    .then((response) => response.json())
    .then (menuArr => {
      console.log(menuArr)
      menuArr.forEach(menuObj => {
          renderMenuNames(menuObj)
      });
   renderMenuDetails(menuArr[0])
  });
}

The first .then returns a promise, the second .then grabs the array then assigns it to an arrow function in which we console log the array to make sure we are getting the information we want. The next line is where we do a forEach statement in that we attach to the array of objects we just grabbed called menuArr. Then in the parameter we state for each object or in this case menuObj arrow function then a call back function with the parameter of that object. Dont worry about the renderDetails line underneath the forEach function for now, I will come back to it. Now is time for the next section, rendering the fetch onto the page.

Deliverable 1

_
Challenge #1
Fetch all the menu items from http://localhost:3000/menu. For each menu item create a span element that contains the name of the menu item, and add it to the #menu-items div._

So it's easy to read we named my call-back function renderMenuNames. Because this is the first deliverable its asking for. So we now define renderMenuNames and assign it to an arrow function, with the parameter menuObj. Within the arrow function the first deliverable asks to create a span tag. So that will be the first line, then we will want to set that new tags textContent to equar our menu objects name. So we look at the Json to figure out what the name is put in. In this case it is just name, so menuObj.name will assign the span tags text to equal each of the array of objects name. The next step is to append it to the div. We already assigned this element to the variable menuDiv, so we append the new spanTag we created to the that Div. The code should look like this

-NOTE YOU WILL NEED TO ADD THE CALL BACK FUNCTION renderMenuDetails WITH MENUOBJ TO THE BOTTOM OF YOUR renderMenuNames FUNCTION WITH THE ARGUMENT OF MENU OBJ IN ORDER FOR THE SCOPE TO WORK IF YOU HAVE NOT DONE DELIVERABLE 3 YET.

const renderMenuNames = (menuObj) => {
    const spanTag = document.createElement("span")
    spanTag.textContent = menuObj.name
    menuDiv.append(spanTag)
    renderMenuDetails(menuObj)
}

When you look at the page on the browser it should now look like this

Congratulations we have now passed the first deliverable.

Deliverable 2

Challenge #2
When the page loads, display the first menu item. You should set the image, name, description, and price. All the correct elements to set are located in the #dish section element.

Now we will define that function mentioned in the fetch renderMenuDetails. This function will be an arrow function just like the previous one in which we take in the paramater menuObj, and then assign those Dom selectors we made to equal the servers details just like the name. So that line in the fetch is how we accomplish the first part of the second deliverable. Underneath the forEach function but still within the fetch function the line is saying call this function renderMenuDetails and set the parameter as menuArr and then grab the first obj in that array and load it on page load.
renderMenuDetails(menuArr[0])

-NOTE YOU WILL NEED TO ADD THE CALL BACK FUNCTION WITH MENUOBJ TO THE BOTTOM OF YOUR renderMenuNames FUNCTION WITH THE ARGUMENT OF MENU OBJ IN ORDER FOR THE SCOPE TO WORK IF YOU HAVE NOT DONE DELIVERABLE 3 YET.
So now that we have that passing, next thing to do is finish writing that function out. So you will want to use the variables we assigned in the Dom Selectors for the Image, Name, Description, Price, and Cart. I know the cart is not listed in the second deliverable but it will make sense as we go along. Besides the image all the other selectors will be .textContent for the image you will use .src. Then you will assign each of these to the menuObj.[whatever the json pathway for that is]
When you finish it should look like this:
--note: I added the string of "$" + the menuObj.price just to be more aesthetically pleasing, it is not necessary to pass the deliverable.

const renderMenuDetails = (menuObj) => {
    menuImage.src = menuObj.image
    menuName.textContent = menuObj.name
    menuDescription.textContent = menuObj.description
    menuPrice.textContent = '$' + menuObj.price
    menuCart.textContent = menuObj.number_in_bag
  };

Which your webpage should now look like this.

Congratulations the first two deliverables are now complete.

Deliverable 3

Challenge #3
When the user clicks on the menu items on the left, they should see all the details for that specific menu item.

Time to move to deliverable 3. So this one is easy no new function needed, in fact we will be going back and writing this step in your renderMenuNames function. Now I wrote this when I was defining my function initially, because I looked ahead and new I would need it. But for this tutorial I am going step by step. So you will want to add a click event to the span tag you created, and then within that function call renderMenuDetails(menuObj). We call the menuObj within the parameter because we have access to it within function scope, which will allow you to access it in the renderMenuDetails function. and delete the call back from the bottom of renderMenuNames. The end result should look like this

const renderMenuNames = (menuObj) => {
    const spanTag = document.createElement("span")
    spanTag.textContent = menuObj.name
    spanTag.addEventListener("click", (e) =>{
        renderMenuDetails(menuObj)
    })
    menuDiv.append(spanTag)
}

You should now be able to click another name on the left and display its details

Congratulations 3 down 1 to go.

Deliverable 4

Challenge #4
The user should be able to add the menu items to their cart. When the user presses the 'Add to Cart' button, that number should be added to however many are currently in the cart.

So there will be two functions we will need to write in order to do this one. The first will be the EventListener which will be a submit event since we are dealing with a form. So remember to prevent default within. Also we will be adding this EL to the Dom selector menuForm. Lastly add a call back function called menuCounter() no parameter necessary. It should look like this

menuForm.addEventListener("submit", (e) =>{
    e.preventDefault();
    menuCounter()
})

Last step is to define menuCounter(). So I defined it using another arrow function. This is also where adding the menuCart to the renderMenuDetails is important. This is because without us defining that there, the cart amount will be the same for menu item. With it being defined in the renderMenuDetails it allows each one to have a separate cart. This also where the const currentCart = {} line in Dom Selectors comes in. Within menuCounter the first thing will be to declare a variable and assign it to parseInt(menuCartAmount.value), here we are grabbing the value from the form which is a string and making it a number. The next step is to grab currentCart.number_in_bag and assign it to parseInt(menuCart.textContent). It would be a good habit to console log adding cart to make sure you are getting a value you want and it is a number. After that we will want to add currentCart.number_in_bag to the verse variable we made in this function. We would do that with += between the two values. Lastly we want to take menuCart.textContent and assign it to the new updated currentCart.number_in_bag. The code should look something like this

const menuCounter = () =>{
    const addingCart = parseInt(menuCartAmount.value)
    currentCart.number_in_bag = parseInt(menuCart.textContent)
     console.log(menuCartAmount.value)
    currentCart.number_in_bag += addingCart
    console.log(currentCart.number_in_bag)
    menuCart.textContent = currentCart.number_in_bag
}

On the Page you should now be able to add items to the cart and keep adding more to your cart. The final product should look like this

Summary

In this tutorial and walkthrough of a Mock CC from an instructor from FlatIron College, I walked you through each deliverable and how to achieve it. I also hope that I gave you a methodology or format in which you can use as a layout for any other challenge.

The STEPS

**1. Confirm you are in the right folder in the terminal. And run the json-server --watch db.json command, or whatever the Readme tells you to run.

Make sure to defer your script tag
Make a variable to assign your base Url too
Open the Readme preview and read every deliverable, paying attention to which Dom selectors you will need.
Underneath the Url variable Write out //Dom Selectors then underneath that use querySelector or getElementById and grab each Html ID or element you will need and assign them to variables.
Write out your fetch, and pay attention if you are grabbing an array or one object. In this example it was an Array. 7.Console log the array then set the array to a forEach to grab each object, and within that function write a callback Fuction for the first thing you want to render and have the parameter be the name of the object. 8.While still in the fetch function or .then function but outside the forEach function write your cb function for renderdetails(array[0]). So this way on page load you get that first objects details on the page.
Next step define the cb function you made with the obj as the parameter.
Then write a cb at the bottom of that render for your details with the obj as a parameter so you have access to it within your next render function.
Create a section for your Event Listeners and add them to the proper dom selectors. Within it write the cb function of what you want to happen.
Define that function, remember to pay attention to what type of data you are trying to use and change its type if necessary, ex: parseInt.
If you put your fetch in a function remember to initialize it at the bottom of your code and call the initializer. This is what the finished code should look like: **

//Globals
const menuUrl = "http://localhost:3000/menu"

//Dom selectors
const menuDiv = document.getElementById("menu-items")
const menuDetails = document.getElementById("dish")
const menuImage = document.getElementById("dish-image")
const menuName = document.getElementById("dish-name")
const menuDescription = document.getElementById("dish-description")
const menuPrice = document.getElementById("dish-price")
const menuCart = document.getElementById("number-in-cart")
const menuForm = document.getElementById("cart-form")
const menuCartAmount =  document.getElementById("cart-amount")
const currentCart = {}
//eventListeners
menuForm.addEventListener("submit", (e) =>{
    e.preventDefault();
    menuCounter()
})
//fetches
const fetchAll = () =>{
    fetch(menuUrl)
    .then((response) => response.json())
    .then (menuArr => {
      console.log(menuArr)
      menuArr.forEach(menuObj => {
          renderMenuNames(menuObj)
      });
  renderMenuDetails(menuArr[0])
  });
}

//renders

const menuCounter = () =>{
    const addingCart = parseInt(menuCartAmount.value)
    currentCart.number_in_bag = parseInt(menuCart.textContent)
     console.log(menuCartAmount.value)
    currentCart.number_in_bag += addingCart
    console.log(currentCart.number_in_bag)
    menuCart.textContent = currentCart.number_in_bag
}

const renderMenuNames = (menuObj) => {
    const spanTag = document.createElement("span")
    spanTag.textContent = menuObj.name
    spanTag.addEventListener("click", (e) =>{
        renderMenuDetails(menuObj)
    })
    menuDiv.append(spanTag)
}
const renderMenuDetails = (menuObj) => {
    menuImage.src = menuObj.image
    menuName.textContent = menuObj.name
    menuDescription.textContent = menuObj.description
    menuPrice.textContent = '$' + menuObj.price
    menuCart.textContent = menuObj.number_in_bag
  };

//init
const init = () =>{
    fetchAll()
  }
  init()

GOOD LUCK AND YOU GOT THIS!!!!!

Feeling lost on Dom Events?

familymanjosh — Tue, 07 Mar 2023 05:23:08 +0000

DOM EVENTS EXPLAINED

Introduction

You might be asking what are DOM events, and how on earth am I going to get this for a code challenge. Well, let's start with the technical definition

The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web.
(Introduction to the DOM - web apis: MDN)

So now that we have defined DOM, let's talk about what DOM Events are. These events, are what we use as programmers to influence, manipulate, change and create web sites or pages. It does this by organizing all the data into objects. So everything you see even on this page is an object. For example, this web page has a document object that serves as the document all on its own. This also includes table objects, that put into effect/action the HTMLTableElement DOM interface, allowing it to gain access to HTML tables, pretty much all of it is objects. JavaScript uses the DOM to access the web page and all of its elements. The DOM is not a language in itself but rather a tool, but without it, the JavaScript would have no template/framework or even concept of what web pages are, ex. HTML documents. Everything within the HTML, like the head, tables and its headers, even the text you see in the cells of that table, and every other element are parts of the DOM for that HTML. They can all be accessed and changed using the DOM and JavaScript. It allows these two different documents to communicate. We now can talk about these specific types of events of the DOM.

TYPES OF EVENTS

1.Mouse: Is any event in which you, as the user, create events that interact with actions of the mouse like scrolling, clicking, moving the mouse.In dom we call these: click, scroll, and mouseover.

2.Keyboard: Is any instance in which the user types on the keyboard, such as hitting or tapping a key. In DOM we call these: keydown, keyup, and keypress events.

3.Form: Is any interaction with a form and any of its elements, like creating forms and even altering data in the forms. In DOM we call these: submit, focus, and change.

4.Window: Is any interaction with the page itself. Like anytime we refresh or load a web page, close one, resize it. In DOM we call these:load, unload, and resize.

JAVASCRIPT AND DOM

In JAVASCRIPT in order to do these events, we use what is referred to as event listeners, these are functions that we create in JS that can perform or execute, a wide array of actions, like grabbing and changing the amount of inventory, or console.log() something so the programmer can make sure his function is rendering properly on the front end. So let's see how just a couple of these events look in code.

NOW CODING

This is how it looks when you are doing this when coding in your .JS file and .HTML file

These are just a couple of events you can do and how they are structured in the code.

CONCLUSION

I hope this helps you, the reader and user, and maybe even another fellow coder, understand DOM Events. We talked about what the DOM stands for. What type of events you can do with the DOM. How the DOM is essential to create all the elements we see. Knowing how JavaScript manipulates and pulls info from Html will be essential for any website building. Have fun coding!

Sources:

“Introduction to the DOM - Web Apis: MDN.” Web APIs | MDN, https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction.