Forem: AricayaJohn

Flask-Login for Class Management Application

AricayaJohn — Sun, 23 Mar 2025 05:36:59 +0000

In this blog, we’ll explain flask Login with examples from a Class Management System Application.

We’ll explore how Flask-Login works, how to integrate it with a React frontend, and how to secure your application.

By the end, you’ll have an idea of the concept of functional system where a professors can log in, and bring them to a dashboard page where they can manage semesters, classes, and students, and securely log out.

What is Flask-Login?

Flask-Login is a Flask extension that simplifies user authentication.

It handles:

User sessions: Keeping users logged in across requests.
Access control: Protecting routes from unauthorized access.
User loading: Fetching user data from the database based on session information.
Remember me: Persisting user sessions across browser restarts.
Flask-Login doesn’t handle password hashing or database management directly. Instead, it integrates seamlessly with other libraries like bcrypt for password hashing and SQLAlchemy for database interactions.

Core Components in My Code

Create a model for user -> Professor model: It represents a professor in the database and includes methods required by Flask-Login.

class Professor(db.Model, SerializerMixin):
    __tablename__ = "professors"
    serialize_rules = ('-_password_hash', '-semesters.professor',) 

    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String, nullable=False, unique=True)
    name = db.Column(db.String, nullable=False)
    department = db.Column(db.String, nullable=False)
    office_location = db.Column(db.String, nullable=True)
    _password_hash = db.Column(db.String, nullable=False)

    semesters = db.relationship('Semester', back_populates='professor', cascade='all, delete-orphan')

    def get_id(self):
        return str(self.id)

    @property
    def is_authenticated(self):
        return True

    @property
    def is_active(self):
        return True

    @property
    def is_anonymous(self):
        return False

    @hybrid_property
    def password_hash(self):
        raise Exception('Password hashes may not be viewed')

    @password_hash.setter
    def password_hash(self, password):
        if len(password) < 5:
            raise ValueError("Password should be 5 characters or longer")
        self._password_hash = bcrypt.generate_password_hash(password.encode('utf-8')).decode('utf-8')

    def authenticate(self, password):
        return bcrypt.check_password_hash(self._password_hash, password.encode('utf-8'))

    @validates('username')
    def validate_username(self, key, username):
        if not username or not isinstance(username, str):
            raise ValueError('Username should be a string')
        if len(username) < 3:
            raise ValueError('Username should be at 3 characters or more')
        return username

    @validates('name')
    def validate_name(self, key, name):
        if not name or not isinstance(name, str):
            raise ValueError('Name must be a string')
        return name

    @validates('department')
    def validate_department(self, key, department):
        if not department or not isinstance(department, str):
            raise ValueError('Department must be a non-empty string.')
        return department

    @validates('office_location')
    def validate_office_location(self, key, office_location):
        if office_location and not isinstance(office_location, str):
            raise ValueError('Office location should be a string.')
        return office_location

    def to_dict(self, rules=()):
        professor_dict = {
            "id": self.id,
            "username": self.username,
            "name": self.name,
            "department": self.department,
            "office_location": self.office_location,
            "semesters": [semester.to_dict() for semester in self.semesters]
        }
        for rule in rules:
            if rule in professor_dict:
                del professor_dict[rule]
        return professor_dict

    def __repr__(self):
        return f'<Professor ID: {self.id} | Username: {self.username} | Name: {self.name}>'

Key Features:

get_id(): Flask-Login uses this method to identify the user. It must return a unique identifier (e.g., the user’s ID).
is_authenticated: This property checks if the user is logged in. It’s used by Flask-Login to determine if a user can access protected routes.
is_active: This property checks if the user account is active. For example, you could deactivate accounts without deleting them.
is_anonymous: This property checks if the user is anonymous (not logged in).
Password Handling:
The password_hash setter hashes the password using bcrypt.
The authenticate method compares a provided password with the stored hash.

Create a backend user loader in config.py The user loader is a callback function that Flask-Login uses to reload a user from their session ID.

@login_manager.user_loader
def load_user(professor_id):
    return db.session.get(Professor, int(professor_id))

What it Does:

When a user logs in, Flask-Login stores their ID in the session cookie.
On subsequent requests, Flask-Login calls load_user to reload the user from the database using the stored ID.

2.1 Add Security figure in config.py

app.config['SESSION_COOKIE_SECURE'] = True  # HTTPS only
app.config['SECRET_KEY'] = 'your-secret-key'  # Encrypts cookies

Password Security

bcrypt hashes passwords before storage

self._password_hash = bcrypt.generate_password_hash(password).decode('utf-8')

Plain passwords never stored in the database
authenticate() method compares hashes Authentication: Passwords are verified using bcrypt.check_password_hash().

Create a Login/Logout Route(Backend) ->Make sure to include the resource in the app.py file ->The Login and Logout routes handle user authentication and session management.

class Login(Resource):
    def post(self):
        professor = Professor.query.filter_by(username=username).first()
        if professor.authenticate(password):
            login_user(professor)  # Flask-Login magic!
            return current_user.to_dict()

class Logout(Resource):
    @login_required
    def post(self):
        logout_user()  # Ends the session
        return {'message': 'Logged out!'}

How it Works:

The frontend sends a username and password.
The backend verifies the credentials using the authenticate method.
If valid, login_user() starts a session and stores the user’s ID in a secure cookie.

Logout:

logout_user() clears the session cookie, effectively logging the user out.

Protected Routes You can protect routes using the @login_required decorator.

class Semesters(Resource):
    @login_required
    def get(self):
        return Semester.query.filter_by(professor_id=current_user.id).all()

What Happens:

If a user tries to access a protected route without logging in, Flask-Login redirects them to the login page.
current_user is a proxy for the logged-in user, accessible in all routes.

*Integrating in frontEnd (React Context) *
-> Create a global state file useContext that include login fetch request to the back end
-> The frontend uses React Context to manage the authenticated user’s state.

// UserContext.js
const UserContext = createContext();

function UserProvider({ children }) {
  const [user, setUser] = useState(null);

  // Auto-login on page load
  useEffect(() => {
    fetch("/check_session")
      .then(res => res.json())
      .then(data => setUser(data));
  }, []);

  // Login function
  const login = (credentials) => {
    fetch("/login", { method: "POST", body: JSON.stringify(credentials) })
      .then(() => fetch("/check_session"))
      .then(res => setUser(res.json()));
  };

  // Logout function
  const logout = () => {
    fetch("/logout", { method: "POST" })
      .then(() => setUser(null));
  };
}

Key Flows:

Auto-Login: On page load, the app checks if the user is already logged in by calling /check_session.
Persistent Login: The user’s data is stored in React state and shared across components via context.
Protected Components: Use the user state to conditionally render UI elements.

WorkFlow:

1) Signup

A professor creates an account.
The password is hashed and stored in the database.

2)Login

Frontend: The professor logs in with their username and password.
Backend: verifies credentials, starts session

3)Access Control

Protected routes use @login_required
Protected routes (e.g., managing semesters) are only accessible to logged-in users.

4)Access Control:

Protected routes (e.g., managing semesters) are only accessible to logged-in users.

5)Logout

The session is destroyed, and the user is logged out.
Client-side user state cleared

Conclusion

Flask-Login manages user authentication, especially when paired with secure password handling via bcrypt and frontend integration. With proper setup, your application can efficiently handle signup, login, logout, and session management while maintaining a level of security.

RESTful API in Flask: Resources and CRUD Operations through Conventions Project

AricayaJohn — Tue, 28 Jan 2025 20:47:07 +0000

What is RESTful API?
Representational State Transfer that allows clients to interact with a server by performing HTTP operation (GET, POST, PATCH, DELETE) on resources.

In our project our resources are Convention Areas, Conventions, Host companies.

In our project we create and define the models for the resources so that we can have a database that will be the foundation of our API resources.

class ConventionArea(db.Model, SerializerMixin):
    __tablename__ = 'convention_areas'

    id = db.Column(db.Integer, primary_key=True)
    location_name = db.Column(db.String, nullable=False)
    venue = db.Column(db.String, nullable=False)

    conventions = db.relationship('Convention', backref='convention_area', cascade='all, delete-orphan')
    host_companies = association_proxy('conventions', 'host_company')

    serialize_rules = ('-conventions.convention_area',)

class HostCompany(db.Model, SerializerMixin):
    __tablename__ = 'host_companies'

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

    conventions = db.relationship('Convention', backref='host_company')
    convention_names = association_proxy('conventions', 'convention_name')

    serialize_rules = ('-conventions.host_company',)

    @validates('name')
    def validate_name(self, key, name):
        if not name:
            raise ValueError('HostCompany name cannot be empty')
        return name

    @validates('industry')
    def validate_industry(self, key, industry):
        if not industry:
            raise ValueError('Industry cannot be empty')
        return industry

class Convention(db.Model, SerializerMixin):
    __tablename__ = 'conventions'

    id = db.Column(db.Integer, primary_key=True)
    convention_name = db.Column(db.String, nullable=False)
    days = db.Column(db.Integer, nullable=False)

    convention_area_id = db.Column(db.Integer, db.ForeignKey('convention_areas.id'))
    host_company_id = db.Column(db.Integer, db.ForeignKey('host_companies.id'))

    serialize_rules = ('-convention_area.conventions', '-host_company.conventions')

    host_company = association_proxy('host_company_id', 'host_company')

    @validates('days')
    def validate_days(self, key, days):
        if not isinstance(days, int):
            raise ValueError('Days must be an integer')
        return days

The key component for our Resource Code are:

CRUD Operations: Each resource class implements methods for Create, Read, Update, Delete operations.
Endpoints: This defines the routes and the corresponding resource classes
Serialization: Convert database objects to JSON format using the to_dict method

Here is the breakdown of each resource:
ConventionAreas Resource:
-> This class manages the convention areas and the places where the conventions are being held

class ConventionAreas(Resource):
    def get(self):
        areas = ConventionArea.query.all()
        return [area.to_dict(only=('id', 'location_name', 'venue')) for area in areas]

    def post(self):
        data = request.get_json()
        try:
            new_area = ConventionArea(
                location_name=data['location_name'],
                venue=data['venue']
            )
            db.session.add(new_area)
            db.session.commit()
            return make_response(new_area.to_dict(), 200)
        except ValueError as e:
            print('Error', e)
            return make_response({'errors': ['validation errors']}, 400)

api.add_resource(ConventionAreas, '/convention_areas')

GET: Retrieves all convention areas from the database and returns a list of dictionaries
-Process:
>Query the database to get all convention areas.
>Convert each convention area to a dictionary format(to_dict)
>Return the list of convention areas as JSON
POST: Creates a new convention area from the provided JSON data and saves it to the database
-Process:
>Retrieve the JSON data from the request
>Create a new ConventionArea object using the data
>Add the new object to the database and commit the transaction
>Return the new convention area as JSON

ConventionAreasById Resource:
-> this handle request for specific convention areas, we need to use this resource to to get the id parameter of the ConventionAreas.

class ConventionAreasById(Resource):
    def get(self, id):
        area = db.session.get(ConventionArea, id)
        if area:
            return area.to_dict(), 200
        return {'error': 'ConventionArea not found'}, 404

    def patch(self, id):
        area = ConventionArea.query.filter_by(id=id).first()
        if area:
            try:
                data = request.get_json()
                for attr, value in data.items():
                    setattr(area, attr, value)
                db.session.add(area)
                db.session.commit()
                return make_response(area.to_dict(), 202)
            except ValueError:
                return make_response({'errors': ['validation errors']}, 400)
        else:
            return make_response(jsonify({'error': 'ConventionArea not found'}), 404)

    def delete(self, id):
        area = db.session.get(ConventionArea, id)
        if area:
            db.session.delete(area)
            db.session.commit()
            return '', 204
        return {'error': 'ConventionArea not found'}, 404

api.add_resource(ConventionAreasById, '/convention_areas/<int:id>')

GET: Fetches a specific convention area by its ID.
-Process:
>Query the database to get the convention area by ID
>Return the convention area as JSON

PATCH: Updates an existing convention area.
-Process:
>Retrieve the JSON data from the request
>Update the convention area with the new data
>Commmit the changes to the database
>Return the updated convention area as JSON
DELETE: Deletes a convention area by its ID.
-Process:
>Query the database to get the convention area by Id
>Delete the convention area from the database
>Commit the changes

Hosts Resource:
-> This resource manages the companies that host conventions

class Hosts(Resource):
    def get(self):
        convention_id = request.args.get('convention_id', type=int)
        if (convention_id):
            conventions = Convention.query.filter_by(id=convention_id).all()
            hosts = [convention.host_company for convention in conventions if convention.host_company is not None]
        else:
            hosts = HostCompany.query.all()
        return [host.to_dict(only=('id', 'name', 'industry')) for host in hosts]

    def post(self):
        data = request.get_json()
        try:
            new_host = HostCompany(
                name=data['name'],
                industry=data['industry']
            )
            db.session.add(new_host)
            db.session.commit()

            convention = Convention.query.get(data['convention_id'])
            if (convention):
                convention.host_company_id = new_host.id
                db.session.commit()

            return make_response(new_host.to_dict(), 201)
        except ValueError:
            return make_response({'errors': ['validation errors']}, 400)

api.add_resource(Hosts, '/hosts')

GET: Retrieves host companies, filtered by convention ID if provided
-Process:
>Check if a convention_id is provided
>Query the database for host companies associated with the convention
>Return the list of host companies as JSON

POST: Creates a new host company and associates it with a convention
-Process:
>Retrieve JSON data from the request
>Create a new HostCompany object using the data
>Add the new object to the database and commit the transaction
>Link the new host to a convention
>Return the new host company as JSON

HostCompaniesById Resource:
-> This manages the individual host companies

    def get(self, id):
        host = db.session.get(HostCompany, id)
        if host:
            return host.to_dict(), 200
        return {'error': 'HostCompany not found'}, 404

    def patch(self, id):
        host = HostCompany.query.filter_by(id=id).first()
        if host:
            try:
                data = request.get_json()
                for attr in data:
                    setattr(host, attr, data[attr])
                db.session.add(host)
                db.session.commit()
                return make_response(host.to_dict(), 202)
            except ValueError:
                return make_response({'errors': ['validation errors']}, 400)
        else:
            return make_response(jsonify({'error': 'HostCompany not found'}), 404)

    def delete(self, id):
        host = db.session.get(HostCompany, id)
        if host:
            db.session.delete(host)
            db.session.commit()
            return '', 204
        return {'error': 'HostCompany not found'}, 404

api.add_resource(HostCompaniesById, '/hosts/<int:id>')

GET:Retrieves the specific host company by its ID
-Process:
>Query the database to get host company by ID
>Return the host company as JSON
PATCH:Updates a specific host company
-Process:
>Retrieve JSON data from the request
>Update the host company with the new data
>Commit the changes to the database
>Return the updated host company as JSON
DELETE:Deletes a specific host company by its ID
-Process:
>Query the database to get host company by ID.
>Delete the host company from the database
>Commit the changes.

Convention Resource:
-> This resource allows us to manage conventions, including the assosciation with specific convention areas and hosts

class Conventions(Resource):
    def get(self):
        convention_area_id = request.args.get('convention_area_id', type=int)
        if convention_area_id:
            conventions = Convention.query.filter_by(convention_area_id=convention_area_id).all()
        else:
            conventions = Convention.query.all()
        return [convention.to_dict(only=('id', 'convention_name', 'days', 'convention_area_id', 'host_company_id')) for convention in conventions]

    def post(self):
        data = request.get_json()
        try:
            new_convention = Convention(
                convention_name=data['convention_name'],
                days=data['days'],
                convention_area_id=data['convention_area_id'],
                host_company_id=data.get('host_company_id')
            )
            db.session.add(new_convention)
            db.session.commit()
            return make_response(new_convention.to_dict(), 201)
        except ValueError as e:
            print('Error', e)
            return make_response({'errors': ['validation errors']}, 400)

api.add_resource(Conventions, '/conventions')

GET: Retrieves all conventions with the option to be filtered by convention areas.
-Process:
>Check if a convention_area_id is provided
>Query the database for conventions associated with the convention area
>Return the list of convention as JSON

POST: Creates a new convention and association it with a host company and convention area.
-Process:
>Retrieve JSON data from the request
>Create a new Convention object using the data
>Add the new object to the database and commit the transaction
>Return the new convention as JSON

ConventionById Resource:
-> To manage individual conventions

class ConventionsById(Resource):
    def get(self, id):
        convention = db.session.get(Convention, id)
        if convention:
            return convention.to_dict(), 200
        return {'error': 'Convention not found'}, 404

    def patch(self, id):
        convention = Convention.query.filter_by(id=id).first()
        if convention:
            try:
                data = request.get_json()
                for attr in data:
                    setattr(convention, attr, data[attr])
                db.session.add(convention)
                db.session.commit()
                return make_response(convention.to_dict(), 202)
            except ValueError:
                return make_response({'errors': ['validation errors']}, 400)
        else:
            return make_response(jsonify({'error': 'Convention not found'}), 404)

    def delete(self, id):
        convention = db.session.get(Convention, id)
        if convention:
            db.session.delete(convention)
            db.session.commit()
            return '', 204
        return {'error': 'Convention not found'}, 404

api.add_resource(ConventionsById, '/conventions/<int:id>')

GET :Retrieves a specific convention by its ID
-Process:
>Query the database to get the convention by ID.
>Return the convention as JSON
PATCH: Updates the specific convention
-Process:
>Retrieve the JSON data from the request
>Update the convention with the new data
>Commit the changes to the database
>Return the updated convention as JSON
DELETE: Deletes a specific convention by its ID
-Process:
>Query the database to get the convention by ID.
>Delete the convention from the database
>Commit the changes

Conclusion:

Building a RESTful API can be great for managing resources within a system. To ensure your code is both flexible and maintainable, it's crucial to structure it thoughtfully. By defining clear models, implementing CRUD operations, and utilizing serialization, we can effectively handle complex relationships between elements in a many to many relation ship system. This structured approach simplifies the process and helps it to be scallable.

React for Modern WebDevelopment: Trends and Best Practices

AricayaJohn — Tue, 30 Jul 2024 10:29:12 +0000

In today's fast-paced world, staying informed about industry trends and innovative tools can be beneficial to someone's success. With React's powerful features and growing capabilities, we will see a rise on usage of the React Library among future developers. Today, We will discuss the three Best Practices/Trends that React Developers are adopting, using examples from my Software Management Tracker Project.

After reading this article, you will gain insights into Component-Based Architecture, State Management + Data Fetching, and lastly Routing and Navigation. If you want to check out more about my code, feel free to fork my repo at [(https://github.com/AricayaJohn/ProjectManagement_ReactApplication)].

We will start with Component-Based Architecture :
Developers are moving towards component-based style of coding because of the benefits that it provide:

It is designed to create reusable pieces for your app giving you the power to use that code again, saving you time and effort.
Each component works on its own, which means that fixing or updating one part of the application does not disrupt the whole structure of your project.
Easier Testing and Scalability. With pieces broken into different parts anyone can work on different parts of the project without having any conflicts with other team members work.

Example: The App component displays routes
to different pages. It integrates multiple components in one page.

import React from "react";
import { Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Login from "./pages/Login";
import EmploeeTask from "./pages/EmployeeTask";

function App() {
    return (
        <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="/login" element={<Login />} />
            <Route path="/employee-task/:id" element = {<EmploeeTask />} />
        </Routes>
    );
}

export default App;

The next topic we are going to expore is State Management + Data Fetching

This trend is crucial when we take our application to the next level. This needs React's useState anduseEffect` hooks that helps us simplify changes in our application and data.
Here is the benefits of this proccess:

useState helps you keep track of changes in your forms, buttons and other onChange features.
useEffect lets you run and get data from your document file which is the API(application programming interface).
By using state and effects in your components, React can help a smoother and better user experience for your users.

Here is an example from my project that uses useState and useEffect:
In the function the useState updates the state of the employees when needed.
In the function the useEffect fetches/gets the employees data from the server and gives a response.

In the home Component, by using the useState and useEffect we are given the capability to display our data, change our data, and add more to our data.

The last Trend and Best Practice that we will discuss is the Routing and Navigation.
In my project I used a Single Page Application(SPAs) because of this benefits:
1) This functionality makes the transition between different pages quick and easy, without reloading the page.
2)Clear URLs helps create and manage userfriendly navigation for users
3) I was able to organize the structure of the nested routes or multiple routes. This keeps related pages together and easier to understand.

Here is an example of Routing and Navigation

These syntax imports the React Components that will be used as different pages in the application. Each object specifies the path to which component will be displayed when clicked or visited. This setup allows the application to handle navigation without reloading the entire page. This also organized the different parts on how it will be displayed on the URL.

These practices: component-based architecture, effective state management + data fetching, and efficient routing + navigation, are key to building complex and user-friendly React application.

For more details, check out my github :[(https://github.com/AricayaJohn)]
and Linkedin [(https://www.linkedin.com/in/john-aricaya/)]

React Components Basic 101

AricayaJohn — Mon, 03 Jun 2024 04:13:41 +0000

The Building Blocks Of Modern Web Application

What is a React Component:
-Components are part of React, which is a JavaScript Library used to build web interface.
-They are written in JSX, a syntax extension that combines JS and HTML making it more readable.

Analogy
Imagine codes inside LEGO blocks that, when pieced together, forms a web page application. Each webpage is broken up into pieces of smaller User Interface. By combining these blocks, you build complex and dynamic web pages.

Why is it important:
Reusability:
-You can create a component and use that same application through out different parts of your code.
-This means you write less code and reduce the potential bugs and errors
Maintainability:
-You can organize each component for a clear purpose and simplify the furture updates or modification.

But how does Component Work and Pieced together:

We have a main component that combines all the other components.
It is usually in the default component which is the App.js.
and in here we would see:

Import React from 'react';

function App() {
  return (
    <div>
      <Header />
      <Content />
      <Footer />
    </div>
  );
}

export default App

This App component is linked to index.js, which renders it to the index.html file using:

ReactDOM.render(<App />, document.getElementById("root"));

Each component is linked by the Import and Export
Import syntax:
import ComponentName from "./componentfolder/ComponentName";

To use a component, you import it at the beginning of the file

Export syntax:
export default ComponentName;

To make a component available for use in other parts of your application, you export it at the end of the file

What do we put in the middle?
-Component syntax:
We start with a component function and adds a return property that will contain an JSX style of code

function ComponentName () {
  return (....)
}

Conclusion:
This simple introduction opens up a more complex structure and component lifecycle that we can explore. We can pass properties (props) to components and use that data to make our UI more interactive. We can nest components inside other components to create more sophisticated layouts.

For those up to the challenge, exploring class-based components can provide a deeper understanding of React. Class components are the original structure for writing React components and offer additional features like lifecycle methods.

React components are powerful tools that allow developers to build modular, maintainable, and reusable code. By mastering components, you can create efficient and dynamic web applications. Happy coding!

EV Test Drive Project

AricayaJohn — Sat, 27 Apr 2024 18:22:50 +0000

Electric Car Website Project

Step 1 : Coming up with an idea

Purpose:

As someone interested in new technology and cars, I want to have the users to get information about the Electric vehicles and their qualities that they need
I want this site to give accessibility to get them book a test drive when the customer's see the car that they want.
Since in today's world there is a pletora of option to choose from. I want to give users the option to randomly get a car that they can test drive.

Requirements

Have a webrowser installed.
Have a code editor installed.
Have json-server installed in the code editor.

Installation Instructions

Fork and clone.https://github.com/AricayaJohn/EVTestDrive-Project
Run json-server --watch db.json in code Editor.
Open index.html in the browser.

Step 2: Features

- I want to have a title in the header.
To do this, in the HTML add h1 tag in the body of the file.

<h1 id = "header">Electric Car Test Drive</h1>

- I want to have a random button generator.
To do this, we add a button tag with an id attribute in html.

 <button id = "randomBtn">Random EV</button>

-I want a list of cars with its information inside a card structure that can also take a user information so that they can book the test drive. (DOMContentLoaded)
To do this we will create a div element with id attribute and a class attribute that will allow us to edit, style and manipulate the data in html.

  <div id ="ev-collection" class = "card-containter"></div>
    <!--This where we will fetch data from db.json then create a card in js-->
        </div>

Step 3 : Come up with an MVP

I want a list of cars inside a card structure. (DOMContentLoaded) To do this, we are going to fetch the data using DOMCOntentLoaded event listener and use a function to call and create the cards from our the data in our json file.

document.addEventListener("DOMContentLoaded", () => {
    fetchGetEVData();
    createRandomBtn(); // call the function for random button 
})
//This is to get data from db.json
function fetchGetEVData() {
    fetch("http://localhost:3000/EV")
    .then(resp => resp.json())
    .then(data => {
      console.log("Data fetched successfully:", data); // Log fetched data json objects to console
            data.forEach(EV => showCars(EV));
        })
        //if promise failed to load data from json file
        //then it will show error 
        .catch(error => {
          console.error('Error fetching the json data', error)
        })
    }
  //Create a card
function showCars(EV) {
  //Fetch data for ev-collection HTML and create structure to cards
    const evCollection = document.getElementById("ev-collection");
        const div = document.createElement("div")
        div.classList.add("card");
  //Create images variable to add to div 
    const img = document.createElement("img")
        img.src = EV.ImageLink
        img.classList.add("car-img")

 //Create h2 variable to give title for card
    const h2 = document.createElement("h2")
    h2.textContent = EV.Company

 //Create p document for model, price, and range
    const p = document.createElement("p")
        p.textContent = EV.Model

 //Create p for price 
    const price = document.createElement("p")
        price.textContent = EV.Price  

 //create p for range
    const range = document.createElement("p")
        range.textContent = EV.Range

I want to take user information into a form so that they can book the test drive In our index.js, below of our previous syntax we will create a form variable that will contain alabel and input for name, email, and date of testdrive and a submit button for the form

 //Create a form for user's info name, email, the day to test drive, and submit button
    const form = document.createElement("form")
        form.classList.add("comment-form")
 //Create a label for name
        const userName = document.createElement("Label")
            userName.textContent = "Name: ";
            const userInput = document.createElement("input")
            userName.type = "text"
            userInput.name = "name";
  //Create a label for email          
        const userEmail = document.createElement("label")
            userEmail.textContent = "Email: ";
            const inputEmail = document.createElement("input")
            inputEmail.type = "email";
            userEmail.name = "email";
 //Create a email label and input
        const dateLabel = document.createElement("label")
        dateLabel.textContent = "Schedule Test Drive: "
        const dateInput = document.createElement("input")
        dateInput.type = "date";
        dateInput.name = "date";
 //Create a submit button to submit form 
        const submitBtn = document.createElement("input")
        submitBtn.type = "submit"
        submitBtn.value = "submit"
 //Handling submit function eventListener
            function handleSubmit(event) {
                event.preventDefault();
                const name = userInput.value;
                const email = inputEmail.value;
                const date = dateInput.value;
                if (!name || !email || !date) {
                    alert("Please complete all fields before submitting the form.");
                    return;
                  }

                alert("Your Test Drive reservaton has been completed");
                form.reset();  
            };
    //callback
    form.addEventListener("submit", handleSubmit)

Then we will append this functions, attributes and elements to the Dom so that we could see it on our website.

//Going to append the form to the card DOM
    form.appendChild(userName);
    form.append(userInput);
//Create a break to have another input bellow
    form.appendChild(document.createElement("br"))
//Going to append the email form to the card DOM    
    form.appendChild(userEmail);
    form.append(inputEmail);
//Going to create a break to put date label and input bellow
    form.appendChild(document.createElement("br"))
//Going to append date label and input to the DOM
    form.appendChild(dateLabel)
    form.append(dateInput);
//Adding a break to put submit button bellow 
    form.appendChild(document.createElement("br"))
//Appending submit button to form 
    form.appendChild(submitBtn)

//Connect the data to html div to be able to send to the DOM       
div.append (img, h2, p, price, range, form)
    evCollection.append(div)
}

*- I want to have a random button generator that would pick a random car for the user. *

To do this, we are getting the randomBtn tag in our HTML and adding a function to it so that it would display a random EV card.

function createRandomBtn() {
    const randomBtn = document.getElementById("randomBtn");
    randomBtn.classList.add("random-btn");

    randomBtn.addEventListener("click", () => {
      const cards = document.querySelectorAll(".card");
      const randomIndex = Math.floor(Math.random() * cards.length);

      cards.forEach((card, index) => {
        if (index === randomIndex) {
          card.style.display = "block"; // Show the selected card
        } else {
          card.style.display = "none"; // Hide the other cards
        }
      });
    });
  }

**- I want an alert to show up when form is submitted or is incomplete. **
To do this, we add a function and event listener bellow our submit button that we created.

 //handling submit
            function handleSubmit(event) {
                event.preventDefault();
                const name = userInput.value;
                const email = inputEmail.value;
                const date = dateInput.value;
                if (!name || !email || !date) {
                    alert("Please complete all fields before submitting the form.");
                    return;
                  }

                alert("Your Test Drive reservaton has been completed");
                form.reset();  
            };
    form.addEventListener("submit", handleSubmit)

Step 4 : Stretch goals

I want to have a drop down button that filters down to the car model
I want user can like/favorite the vehicle (click)
Add form for user to submit a test drive request to their email at certain date