DEV Community: Jasec

Let’s Validate: Frontend and Backend Validation with React and Flask

Jasec — Wed, 11 Mar 2026 09:56:11 +0000

One of the most common problems in web applications is allowing invalid data into the database. Incorrect data can lead to bugs, inconsistent records, and security issues.

To prevent this, developers implement validation in both the frontend and the backend. Frontend validation improves the user experience by catching errors early, while backend validation ensures that only valid data is stored in the database.

In this article, we will explore how validation can be implemented in React using Formik and Yup, and how similar protections can be applied in the backend using Flask and SQLAlchemy.

Formik

Formik is a library used in React to manage form state, validation and submission without having to manually write the whole logic by ourselves.

The following example shows a form that allows a user to create a new store.

We use Formik to handle the form state and submission logic, and Yup to define a validation schema that ensures the user enters valid information before the request is sent to the backend.

Below is a visual example of the form validation in action.

Looking at this example, we can see at the top the imports for useFormik and the Yup library. The useFormik hook handles the form state, while Yup is used to define our validation schema and the rules for our attributes.

For example, the name and address fields are required and must meet a minimum and maximum number of characters. The phone number field is also required, and it must match a valid phone number format.

Inside useFormik we initialize the form configuration. The initialValues object defines the default values of the form fields. Then we connect our formSchema, which links the Yup validation rules to the form.

Finally, we define the onSubmit function. This function is responsible for sending a POST request to the backend with the form data. If the request is successful, the new store is added to the user's list of stores in state and the form is reset.

Even though validating data in the frontend helps prevent bad input, it is not completely secure. Frontend validation can be bypassed by sending requests directly to the server. Because of this, developers must also implement validation in the backend.

Validation in the backend

There are several ways we can protect our data in the backend. Two common approaches are enforcing constraints on database columns and creating custom validations in our models.

Constraint validations

Enforcing constraints on database columns guarantees that only appropriate data is saved in the database. Some of the most common constraints are:

Nullable: ensures that the value of a column cannot be null. We can implement this by defining the column with nullable=False.
Unique: ensures that the value stored in a column must be unique across the table. This constraint is applied by defining the column with unique=True.

In the example below we can see the implementation of nullable in a model:

In the example above we observe that by assigning nullable=False to the column we avoid users from submitting inputs without the required value.

While applying database constraints helps to enforce basic rules, there are cases where we require custom validation. SQLAlchemy enable us to create custom validation by using the @validates decorator.

@validates

The @validates decorator is used to create custom validation rules for specific model attributes. This validation runs when a value is assigned to the model attribute, before the data is committed to the database. If the data is invalid, an error is raised and the record will not be saved.

Below is a simple example showing how the @validates decorator can be used to validate a phone number before saving it to the database.

from sqlalchemy.orm import validates

class Store(db.Model):
    __tablename__ = "stores"

    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String, nullable=False)
    address = db.Column(db.String, nullable=False)
    phone_number = db.Column(db.String, nullable=False)

    @validates("phone_number")
    def validate_phone_number(self, key, phone_number):
        if len(phone_number) < 7:
            raise ValueError("Phone number must contain at least 7 digits")
        return phone_number

In this example, the @validates decorator ensures that the phone_number field contains at least seven characters. If a shorter value is given, a ValueError is raised and the record will not be committed to the database.

Implementing validation in our programs plays a big role in the development of our applications. While using validation in the frontend improves the user experience by catching errors early on, the backend validation avoids bad data being committed in the system even if it passes the frontend check. By combining both frontend and backend validation strategies, developers can build more reliable and secure applications.

Building APIs with Flask: What They Are and What They’re Used For

Jasec — Fri, 23 Jan 2026 11:22:34 +0000

What is an API?

An API (Application Programming Interface) allows software systems to communicate, share data, and work together.

A common analogy for APIs is a restaurant setting: the customer (client) places an order (request) with the waitress, the waitress sends the order to the chef (server), the chef prepares the food and sends it back (response), and finally the customer receives the meal.

APIs are useful because they make development more efficient by providing functionality that already exists. This allows developers to reuse existing APIs instead of building everything from scratch, and it also helps applications scale as they grow.

How do APIs function?

APIs generally work through a sequence of four steps: request, processing, response, and delivery. In this section, we will focus on the request and response phases.

Request

APIs use different HTTP methods to define the type of action being performed.

GET

Used to retrieve data from a specific resource.

POST

Used to send data to the server to create a new resource.

PUT

Used to create or fully update a resource. Unlike POST, PUT requests produces the same result every time.

PATCH

Used to apply partial updates to an existing resource.

DELETE

Used to remove a specific resource from the server.

Response

A response is what the server sends back after processing a request, allowing the frontend to update the UI. In the response we usually find:

Data in JSON format.
An HTTP status code (200 OK, 201 Created, 204 No Content, 404 Not Found).

In Flask, building APIs consists of defining routes that manage these requests and retrieve JSON responses to the client.

How are APIs built in Flask

Flask is a Python framework that helps build web servers and define API endpoints. It also allows developers to implement RESTful APIs by mapping URLs and HTTP methods to Python functions.

To start a Flask application, a Flask application instance must be created. This instance represents the web application and it is responsible for handling incoming requests and routing them to the appropriate functions.


from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return '<h1>Welcome to Manga Hub!</h1>'

@app.route('/<string:naruto>')
def character(naruto):
    return f'<h1>This is {naruto}</h1>'

if __name__ == '__main__':
    app.run(port=5555, debug=True)

In this example, Flask is imported and an instance of the Flask class is created. The __ name __ argument helps Flask determine where the application’s files can be located.

When a client sends a request to the server, Flask receives the request and tries to match it to a route. Routes associate URLs with Python functions, allowing the application to determine which function should handle a specific request.

The @app.route() decorator maps a URL to a function. In this case, the index() function is executed when the root route ("/") is requested, and the character() function is executed when a dynamic URL is accessed.

The function associated with the ("/") route is usually called a view. A view represents the response that is sent back to the client after a request is made. In this case, the function returns a simple HTML string, <h1>Welcome to Manga Hub!</h1>, which is then displayed to the user.

Another important detail in route decorators is that anything passed between the angle brackets (<>) must be used as a parameter in the function. This also allows us to validate the data type of the parameter.

After analyzing how routes and endpoints work in Flask, the next example demonstrates how a POST method processes incoming data and returns a JSON response.

Example:

We can observe that the application starts with a decorator (@app.route("/")) that returns a string as a sanity check. After that, we see the Mangas class. By using Flask-RESTful, we can define a resource class, which allows us to group related behaviors into a single block instead of creating multiple decorators for each endpoint.

Inside the Mangas class, a get() method is defined to retrieve all mangas. We also see a post() method that receives incoming data using request.get_json(). The data is then validated, used to create a new manga object, and finally added and committed to the database.

After execution, the server returns a JSON object along with a status code of 201, using make_response().

jsonify() vs make_response()

Flask-RESTful automatically converts Python dictionaries and lists into JSON responses. For this reason, make_response() is used in the example above, since it allows explicit control over the HTTP status code. In plain Flask applications, it is very common to use jsonify() to manually convert responses into JSON.

Note: In this example, the Resource and API classes are used. By creating an instance of the API class and combining it with a resource, HTTP methods can be defined without manually checking the request method using conditionals. Under the hood, the API instance creates a route using
api.add_resource(Mangas, "/mangas"), inspects the resource class, and maps each HTTP method to the appropriate function.

Conclusion

In conclusion, APIs are used everywhere today and represent a fundamental part of modern software development.

Getting Started with Object-Oriented Programming in Python

Jasec — Thu, 09 Oct 2025 10:09:04 +0000

In order to develop applications that are easier to read, modify, and scale, it helps to use an object-oriented approach. Object-Oriented Programming (OOP) allows you to group related pieces of data and functionality together inside objects. These objects contain methods (functions that belong to the object) which define specific behaviors that act on their internal data.

What is Object Oriented Programming (OOP)?

Object-Oriented Programming is a programming paradigm based on the concept of “objects.” These objects gather together attributes (data) and methods (functions) that define the object’s behavior. This approach makes it easier to model real-world entities, organize code, and build more maintainable applications.

Classes

A class is kind of like diagram for creating an object. It’s not the object itself it just tells you what the structure looks like and what kind of data and behavior the object will have. When we call a class, we’re basically calling its constructor, which is what creates a new object based on that blueprint.

Instances

An instance is just a specific object created from a class. For example, if we have a Game class, when we create a new instance, we’re making a new game object that follows the structure of the Game class. Each instance is its own separate object, even if it comes from the same class.

An example of class and instances:

class Game:
    pass

g1 = Game()
g1
<__main__.Game object at 0x7f87d8f642b0>

Here, g1 is an instance of the Game class. The output shows its memory location, which is how Python represents the object by default.

Most methods you define inside a class are actually instance methods. They use self to access and modify the object’s data, and they’re called on specific instances of the class.

Instance Methods

When you have a class defined, you usually want it to do something. To make that happen, you can create functions inside the class to customize its behavior. These functions defined within the class are called instance methods, and they always have self (I’ll dig more into this later) as one of their arguments.

class Game:
    def __init__(self, name, genre):
        self.name = name
        self.genre = genre

    def shout_game(self):
        return f"I love playing {self.name} because it's an {self.genre} game"

>>> g1 = Game("Metal Gear", "action")
>>> g1
<__main__.Game object at 0x7f6a069652b0>

>>> g1.shout_game()
'I love playing Metal Gear because is an action game'

As we can see here, we have a Game class that is initialized with a name and genre. Then we have an instance method that returns a string based on the object’s data.

When we call the class like this:


g1 = Game("Metal Gear", "action")

We’re initializing a new object using the __init__ method. This special method runs automatically when a new instance is created.

The self keyword represents the specific instance being created or used. Inside __init__ and other instance methods, self lets us access or modify the object’s own attributes. For example, self.name refers to the name attribute of the g1 object.

Also, when we want to add extra attributes that might not always be provided, Python lets us use default arguments in the __init__ method.

>>> class Game:
...     def __init__(self, name, genre, style="red"):
...         self.name = name
...         self.genre = genre
...         self.style = style
...
>>> g1 = Game("Metal Gear", "action")
>>> g1.style
'red'
>>> g2 = Game("Metal Gear", "action", "blue")
>>> g2.style
'blue'

Attributes

Attributes are unique variables that belong to objects. In some programming languages, attributes and methods are often protected using different access levels: public, private, and protected.

Public: accessible from anywhere.
Private: accessible only within the class itself.
Protected: accessible within the class and by classes that inherit from it.

Python doesn’t strictly enforce these rules like some other languages do, but it uses naming conventions (like prefixing with _ or __) to signal the intended level of access.

There are also class attributes, which are defined outside any method, directly inside the class. These attributes belong to the class itself and are shared by all instances. They’re typically used to store information that applies to the entire class.

Similarly, class methods are methods that belong to the class rather than to instances. They’re usually used to define behaviors that apply to the class as a whole, not to any specific object.


class Game:
   # This is a class attribute — shared across all instances
    all = {}

   # These are instance attributes — unique to each object
    def __init__(self, title, genre, console_id, id = None):
        self.title = title
        self.genre = genre
        self.console_id = console_id
        self.id = id 


g1 = Game("Metal Gear", "Action", "PS2", 1)
g2 = Game("God of War", "Action", "PS2", 2)

print(g1.title)  # Metal Gear (instance attribute)
print(g2.title)  # God of War  (instance attribute)

print(Game.all)  # Accessing the class attribute

Properties

Sometimes, we want to make sure that our attributes follow certain rules or validations. Python’s @property decorator lets us use methods to control how attributes are accessed and modified, while still letting us use them like normal attributes.

class Game:
    all = {}

    def __init__(self, title, genre, console_id, id = None):
        self.title = title
        self.genre = genre
        self.console_id = console_id
        self.id = id

    def __repr__(self):
        return(
            f"<Game {self.id}: {self.title}, {self.genre}, " +
            f"Console ID: {self.console_id}>"
        )

    @property
    def title(self):
        return self._title

    @title.setter
    def title(self, value):
        if not isinstance(value, str):
            raise ValueError("Title must be a string")
        if len(value.strip()) <= 0:
            raise ValueError("Title must be longer than 0")
        self._title = value

    @property
    def genre(self):
        return self._genre

    @genre.setter
    def genre(self, value):
        if not isinstance(value, str):
            raise ValueError("Genre must be a string")
        if len(value.strip()) <= 0:
            raise ValueError("Genre must be longer than 0")
        self._genre = value

    @property
    def console_id(self):
        return self._console_id

    @console_id.setter
    def console_id(self, console_id):
        # Assume Console.find_by_id(console_id) checks if the console exists in the database
        if type(console_id) is int and Console.find_by_id(console_id):
            self._console_id = console_id
        else:
            raise ValueError("console_id must reference a console in the database")

Here, the @property decorator lets us write validation logic inside methods, but access the values like regular attributes. This gives us more control without changing how the object is used.

Decorators

Earlier, I mentioned that @classmethod belongs to the class itself. Now, let’s see how it differs from a regular method and how these are implemented as decorators.

There are two other common decorators you’ll see often: the @property decorator, which we already used in the previous section, and @staticmethod.

In Python, decorators are basically functions that take another function as a parameter and return a new one with extra functionality. This allows us to modify or extend how methods work without changing their actual code.

A class method it differs from an instance method because it works with the class itself, not a specific object. Instead of using self as the first parameter, it uses cls, which represents the class. Class methods are useful when you want to create or change data that applies to the whole class rather than individual instances.

A static method is different from both instance and class methods because it doesn’t take self or cls as its first parameter. It behaves just like a regular function, but it’s located inside a class because it’s associated to the class logically. Static methods are often used for utility functions that don’t need to access or modify instance or class data.


class Game:
    all = []

    def __init__(self, title):
        self.title = title
        Game.all.append(self)

    @classmethod
    def total_games(cls):
        return len(cls.all)

g1 = Game("Metal Gear")
g2 = Game("God of War")

print(Game.total_games())  # 2

Here, total_games is a class method that uses cls to access the class-level all list and return the total number of games created.


class Game:
    @staticmethod
    def greet():
        return "Welcome to the Game database!"

print(Game.greet())

The greet method doesn’t use self or cls. It’s just a utility function that logically belongs to the class, so we keep it inside for organization.

Inheritance

Just like in the real world, some entities are related to each other and share certain characteristics or behaviors. In Python, we can represent these relationships through inheritance, which lets one class reuse the attributes and methods of another.

Without inheritance, you might end up repeating a lot of code just to represent small differences between related objects. Inheritance helps avoid that repetition by letting child classes build on top of a parent class.

To use inheritance, we start by creating a parent (or superclass) with shared attributes and methods. Then, we define a child (or subclass) that inherits from the parent by passing the parent class as an argument when defining the child. This way, the child class automatically has access to everything from the parent class.


class Game:
    def __init__(self, title):
        self.title = title

    def play(self):
        print(f"Playing {self.title}")

class ActionGame(Game):
    def __init__(self, title, difficulty):
        super().__init__(title)
        self.difficulty = difficulty

g1 = ActionGame("Metal Gear", "Hard")
g1.play()  # Inherits play() from Game
'Playing Metal Gear'

Implementing inheritance helps us to have a cleaner code while avoiding repetition of code and helps to represent real world relationships between objects.

Python has a lot of powerful tools, and here we just scratched the surface. However, this gives us a clear idea of how these concepts work in Python.

What's the Deal With React Components and Props?

Jasec — Sun, 06 Jul 2025 06:06:24 +0000

When you start working with React you'll notice independent pieces of UI that work in isolation and they can be reusable, these pieces are called components.

What are Components?

Components are like functions in JavaScript that take props(short for properties) and return HTML specifically JSX that tells react what should be displayed on the screen.

Nowadays developers use functional components but in older React applications you can still find class components. The switch from Class components to Functional began with ES6, which introduced arrow functions, making functional components more concise then in 2019, with the release of React Hooks, functional components were better for handling state and side effect, basically replacing Class components.

Here's an example of class components and functional components equivalent:

//Class Component
class Hello extends React.Component {
  render() {
    return <h2>Hi, my name is Joe!</h2>;
  }
}

//Functional Component
function Hello() {
  return <h2>Hi, my name is Joe!</h2>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Hello />);

In this example, the Hello component returns an "h2" element. The root.render() method then displays the component inside the HTML element with the ID root. This is how we render a component in React.

However, we can make components more dynamic and reusable by using props to pass data to them.

Props

Props are like attributes that work as arguments in JavaScript functions helping your components to be more dynamic and helpful to pass data between them.

function Greeting(props) {
  return <h2>Hello, {props.name}!</h2>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Greeting name="Nicky" />);

As we can see in this example, props make the Greeting component more flexible and reusable. Instead of hardcoding the name, we can render <Greeting name="Bob" /> or any other name without creating a separate component.

Even though using props.name works fine there are better ways to use props in a cleaner way by using JavaScript destructuring.

In my current project, I passed props from a parent component called PlayerList to a child component called PlayerDetails. This allowed me to display a list of players dynamically.



function PlayerList({players}){
    return(
        <div className="card">
            {players.map((player) => (
                <PlayerDetails key={player.id} 
                id={player.id} 
                name={player.name} 
                team={player.team} 
                position={player.position}
                image={player.image}/> 
            ))}
        </div>
    );
}

Here, PlayerList receives an array of players as a prop and uses .map() to render a PlayerDetails component for each one. Each PlayerDetails receives individual props like name, team, position, and image, making it reusable for any player in the list.


function PlayerDetails({id, name, team, position, image}){
    return(
        <div className="details">
            <br/>
            <img src={image} alt={name} className="player-image"/>
            <h2>{name}</h2>
            <p>Team: {team}</p>
            <p>Position: {position}</p>
            <Link to={`/players/${id}/notes`}>View Performance Notes
</Link>
        </div>
    )
};

Components and props are important tools in React that helps us break our UI in small reusable pieces and pass information between them, this is vital for building complex applications.

Playing with The DOM

Jasec — Mon, 31 Mar 2025 00:54:27 +0000

A couple months ago I decided to jump into the tech world by enrolling in a bootcamp. It's been an interesting journey, from starting with the classic "Hello, World!" to building a small project. I'm currently learning JavaScript, and even though it has been a roller coaster of emotions I'm enjoying the process.
As my assessment for my final phase approaches, I'm building an app to showcase everything I've learned. One topic I've really enjoyed working with is manipulating the DOM.

What's the DOM?

Document Object Model (DOM) is the way your browser turns HTML into something JavaScript can understand and manipulate.

when a website loads, takes the HTML and turns it into the DOM making it possible to find elements, modify text and add or removes elements. In my short time working with the DOM I've had a lot of fun specially using methods to find elements like getElementById(), getElementsByClassName(), getElementsByTagName(), querySelector() and querySelectorAll().

getElementById()

Let's start with one of my favorites methods. This one allows you to quickly access an element by introducing its id and just returns one element at the time due that ids are expected to be unique. Here is an example of its implementation in my current project:

const search = document.getElementById('search-input');

getElementsByClassName()

This method returns all elements with a given class name in the form of an HTMLCollection (which is similar to an array). You can loop through them and manipulate each one.

<div>
  <div class="banner">
    <h1>Hello!</h1>
  </div>
  <div class="banner">
    <h1>Sup?</h1>
  </div>

  <div class="banner">
    <h5>Tinier heading</h5>
  </div>
</div>

document.getElementsByClassName('banner');

getElementsByTagName()

If you don't know the ID or class of an element but know the tag, this method it's perfect because by using the tag it gives you an HTMLCollection of it.

<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
<p>This is paragraph 3.</p>

const paragraphs = document.getElementsByTagName("p");

for (let i = 0; i < paragraphs.length; i++) {
  paragraphs[i].textContent = `Updated paragraph ${i + 1}`;
}

querySelector()

Another of my favorite is this one! This one returns the first CSS selectors or group of CSS selector that matches. When you use querySelector() you need to specified what Kind of element you are looking for, for example if you're looking:

IDs use #, like document.querySelector('#list').
Classes use (.), like document.querySelector('.button').
Tags use just the name, like document.querySelector('h1')

 const ramenDetail = document.querySelector('#ramen-detail')
   ramenDetail.querySelector('.detail-image').src = ramen.image;
   ramenDetail.querySelector('h2').textContent = ramen.name;
   ramenDetail.querySelector('h3').textContent = ramen.restaurant;
   document.getElementById('rating-display').textContent = ramen.rating;
   document.getElementById('comment-display').textContent = ramen.comment

   console.log('currentRamen:',currentRamen)
 };

However with querySelector() you could even use it for more specific nested selections:

<body>
  <div>
    <ul class="ranked-list">
      <li>1</li>
      <li>
        <div>
          <ul>
            <li>2</li>
          </ul>
        </div>
      </li>
      <li>3</li>
    </ul>
  </div>

  <div>
    <ul class="unranked-list">
      <li>6</li>
      <li>2</li>
      <li>
        <div>4</div>
      </li>
    </ul>
  </div>
</body>

const li2 = document.querySelector("ul.ranked-list li ul li");
li2;
//=> <li>2</li>

querySelectorAll()

Last but not least querySelectorAll() works pretty much like querySelector() but instead of returning the first element matching, it'll give you a nodeList of all elements matching:

<ul>
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
</ul>

const listItems = document.querySelectorAll(".item");

listItems.forEach((item, index) => {
  item.textContent = `Updated Item ${index + 1}`;
});

.textContent vs .innerHTML

I've also been using properties like .textContent and .innerHTML, and I've learned when to use each one. With .textContent, you can set plain text while ignoring any HTML tags. With .innerHTML, you can set or return the HTML content inside an element, allowing you to replace or add HTML tags and structure. However, when using .innerHTML, you're essentially rebuilding the element, which can sometimes remove IDs, classes, and other attributes. If you're working with a database or accepting user input, this can lead to cross-site scripting (XSS)—a type of security vulnerability where malicious HTML can be injected. In that regard, .textContent is the safer option.

const renderMovies = (movieArray) =>{
    const movieList = document.getElementById('movie-list');
    movieList.innerHTML = "";
    movieArray.forEach(movie =>{
        movieList.innerHTML +=`
        <div>
        <h3>${movie.title} (${movie.year})</h3>
        <p>Genre: ${movie.genre}</p>
        <img src="${movie.poster}" width="100">
        <button class="add-watchlist-btn" data-id="${movie.id}">Add to Watchlist</button>
      </div>
        `
})

 h1.textContent = "Hello, world!";

Creating and Appending Elements with createElement()

Another cool method I've started using is document.createElement(). This lets me build elements completely from scratch in JavaScript. Instead of using innerHTML, I can create an element, set its content or attributes, and then add it to the page using .appendChild() or .append().

Here's a simple example:

 const selectedMovie = allMovies.find(movie => movie.id == movieId)
            const block = document.createElement('div');
            block.id = `watchlist-item-${movieId}` 
            block.innerHTML = `
             <ul> 
                <h4>${selectedMovie.title}</h4>
                <img src="${selectedMovie.poster}" width="100">
                <button class="remove-watchlist-btn">Remove</button>
                </ul>
                `
                   console.log(selectedMovie.title);

        document.getElementById('watchlist').appendChild(block)
         };

        });

Using createElement() is cleaner and often reduces the risk of accidentally removing other elements or opening up security issues like cross-site scripting.

JavaScript Events

When working with the DOM, one of the coolest things is making elements respond to user actions like getting a button to do something when it's clicked. With JavaScript, we have the ability to listen for events that happen in the browser and run code in response. This makes our pages more interactive and dynamic. These events can include things like clicking a button, submitting a form, moving the mouse, or even pressing a key.

Common Event Listeners

-Click
Used when you want something to happen when the user clicks a button or element.

 document.getElementById('watchlist').addEventListener('click', (e) => {
            if(e.target.classList.contains('remove-watchlist-btn')) {
               e.target.closest('div').remove(); 
            } 
    })

-Submit
Used for forms. You can prevent the page from refreshing using event.preventDefault().

const addSubmitListener = (e) => {
   const form = document.getElementById('new-ramen');
   form.addEventListener('submit', (e) => {
     e.preventDefault();
 console.log('new ramen:', newRamen);
});
}

-Input
Fires when a user types into an input field—great for live search or form validation.

 const search = document.getElementById('search-input')
    search.addEventListener('input', (e) =>{
    const searchTerm = e.target.value.toLowerCase();

    const filteredMovies = allMovies.filter(movie => 
     movie.title.toLowerCase().includes(searchTerm));
     renderMovies(filteredMovies);
  });

Final Thoughts

As I continue learning, I’m looking forward to using the DOM in more advanced projects. Working with it again and again has made me feel more confident than when I first started this journey. I still face challenges, but looking back at what I’ve built already reminds me how far I’ve come—and that helps me keep moving forward. I can’t wait to keep learning and deepening my understanding.