As a result, visibility is no longer defined solely by rankings. This shift has introduced a new concept known as Generative Engine Optimization (GEO).

In this tutorial, we’ll walk through how to build a simple AI Overview Rank Tracker using Python.

What Is an AI Overview Rank Tracker?

An AI Overview Rank Tracker is a tool that answers a new kind of visibility question:

“Is my website cited inside Google’s AI Overview, and how prominent is that citation?”

Traditional rank trackers focus on organic positions (1–10).
An AI Overview Rank Tracker focuses on:

• Whether an AI Overview appears for a query
• Which sources does the AI references
• The order in which those sources appear
• Whether your brand or competitors are included

This is a core component of Generative Engine Optimization (GEO).

Why AI Overviews Change How Ranking Works

AI Overviews often appear above organic results and summarize information directly on the search results page. In many cases, users get their answers without clicking any links.

This introduces several challenges:

• Traditional rankings become less visible
• Click-through rates are harder to attribute
• Competition shifts toward citations, not just rankings
• Existing SEO tools offer little insight into AI-generated answers

As AI Overviews become more common, tracking AI citation presence becomes essential.

Read more details explanation about Rank Tracking in the Age of AI Overviews from our previous post below:

Rank Tracking in the Age of AI Overviews: What’s Changed

Why Traditional Scraping Is Not Enough

Tracking AI Overviews via browser automation or raw HTML scraping is unreliable due to:

• JavaScript-rendered content
• Frequent layout changes
• Regional and language variations
• Bot detection and captchas
• Fragile DOM-based selectors

These issues make traditional scraping brittle and difficult to maintain at scale.

Using SerpApi to Build an AI Overview Rank Tracker

SerpApi provides real-time access to structured search engine data, including AI-generated elements where available. It handles:

• IP rotation and request routing
• JavaScript rendering
• Layout changes across regions
• High-volume request reliability

By using a Web Search API, developers can focus on analysis and insights rather than infrastructure maintenance.

Check out the tutorial below on how to get results from AI Overviews using our API:

How to Scrape Google AI Overviews (AIO)

Prefer watching instead of reading? You can also follow along with the video walkthrough below:

Building an AI Overview Rank Tracker using Python

Below is a step-by-step implementation that:

• Detects AI Overviews
• Fetches AI Overview details
• Extracts cited sources
• Prints title and link only
• Determines whether a specific website is cited
• Reports the site’s rank inside the AI Overview

Step 1: Install dependencies

pip install google-search-results python-dotenv

Step 2: Run a Google search and detect AI Overview presence

AI Overview does not appear for every query.

The first step is to detect whether one exists and retrieve its page_token.

from serpapi import GoogleSearch
import os

SERPAPI_API_KEY = os.getenv("SERPAPI_API_KEY")
def detect_ai_overview(query):
    params = {
        "engine": "google",
        "q": query,
        "hl": "en",
        "gl": "us",
        "api_key": SERPAPI_API_KEY
    }
    search = GoogleSearch(params)
    results = search.get_dict()
    ai_overview = results.get("ai_overview")
    if not ai_overview:
        return None
    return ai_overview.get("page_token")

The query here refers to target keyword or search phrase you want to monitor for AI Overview visibility.
If no page_token is returned, the query does not trigger an AI Overview.

Step 3: Fetch the AI Overview result page

Once a page token is available, use the google_ai_overview engine to retrieve full AI Overview data.

def fetch_ai_overview(page_token):
    params = {
        "engine": "google_ai_overview",
        "page_token": page_token,
        "api_key": SERPAPI_API_KEY
    }

    search = GoogleSearch(params)
    return search.get_dict()

This response includes structured AI content and cited references.
Note: Since this is another API endpoint, it uses another one search credit.

Step 4: Extract citations and calculate rank

In AI Overviews, ranking is determined by the order in which references are returned by the API.

from urllib.parse import urlparse

def normalize_domain(url):
    return urlparse(url).netloc.replace("www.", "")
def analyze_ai_overview(ai_results, target_url):
    references = ai_results.get("ai_overview", {}).get("references", [])
    target_domain = normalize_domain(target_url)
    found_rank = None
    print("\nAI Overview References:\n")
    for rank, ref in enumerate(references, start=1):
        title = ref.get("title")
        link = ref.get("link")
        print(f"{rank}. {title}")
        print(f"   {link}\n")
        if target_domain in normalize_domain(link):
            found_rank = rank
    if found_rank:
        print(f"Your site appears in the AI Overview at position #{found_rank}")
    else:
        print("Your site is not referenced in the AI Overview")

Step 5: Run the full AI Overview Rank Tracker

if __name__ == "__main__":
    query = input("Enter target keyword to track: ").strip()
    website = input("Enter your website URL: ").strip()

page_token = detect_ai_overview(query)
    if not page_token:
        print("No AI Overview detected for this query.")
    else:
        ai_results = fetch_ai_overview(page_token)
        analyze_ai_overview(ai_results, website)

Result

Full code is available in our GitHub serpapi/tutorials repository.

Conclusion

AI Overviews are redefining search visibility. As generative search experiences continue to expand, being cited by AI systems becomes as important as ranking organically.

An AI Overview Rank Tracker allows developers and SEO teams to measure this new form of visibility using structured, reliable data. By leveraging Google Search API and Google AI Overview API, we can move beyond fragile scraping and build scalable GEO monitoring systems for the future of search.

Will these business last long? Or are they just part of a seasonal hype?

This curiosity inspired me to create an AI agent that can explore the coffee shop market and predict its potential success. While I’m focusing on coffee shops in this project, the same framework can be applied to other businesses, such as restaurants, salons, gyms, and retail stores. However, because LLMs are limited by their knowledge cutoff dates, having access to real-time data is crucial for obtaining the most up-to-date insights.

Traditionally, entrepreneurs relied on guesswork, small surveys, or costly market research. Now, thanks to tools like Google Maps and Google Reviews, we can access real-time information to guide better decisions.

In this project, we will use these two API solutions from SerpApi to help us gather data easily:

1. Google Maps API: To scrape business listings and locations.
2. Google Maps Reviews API: To extract detailed customer reviews and ratings.

Check out the Scrape Google Maps data and reviews using Python, a comprehensive Getting Started Tutorial.

Please keep in mind that this AI agent is intended for educational purposes only. While it provides useful insights, predictions may not always be entirely accurate. To get the best results, it’s a good idea to combine AI insights with your own careful market research.

How the AI Agent Works

1. Search for coffee shops using SerpApi’s Google Maps API
   - Input either a location (e.g., “Austin, TX”) or GPS coordinates.
   - Scrape all the local coffee shops with metadata.
2. Pull reviews with SerpApi’s Google Maps Reviews API
   - Extract customer opinions, ratings, and timestamps for each competitor.
3. AI-Powered Analysis
   - Summarize competitor density and pricing tiers.
   - Perform sentiment analysis on customer reviews.
   - Predict the success probability of a new coffee shop in the area.
   - Output structured tables and an action plan in a clean Markdown file.

Using SerpApi to scrape data from Google Maps

SerpApi’s Google Maps API allows us to gather organized data from Google Maps quickly and easily, without the hassle of CAPTCHA, proxies, or manual scraping stress.

With just one API request, you can access a wealth of information. Feel free to explore our Google Maps API playground to see what data you can retrieve. Below, there’s a sample screenshot from our playground to give you an idea.

However, this is the data we need:

• title
• data_id (We need this information to be able to retrieve the reviews later)
• gps_coordinates
• address
• rating
• reviews
• price
• operating_hours

All data will be passed to the AI model for analysis, except for the data_id, which is required to scrape Google Maps Reviews.

Beyond ratings, reviews tell the real story. Using SerpApi’s Google Maps Reviews API, we can pull recent customer feedback for each competitor. You can visit our Google Maps Reviews API playground to explore the additional information we can collect.

The data that we’re interested in collecting:

• snippet which is the customer's review
• rating
• date

Set up the scraper

Prerequisites

• Python 3.9+
• Install dependencies:
  pip install google-search-results openai python-dotenv requests
• SerpApi API keys (sign up here to get 250 free searches/month).
• OpenAI API key or download the gpt-oss model locally via ollama.
• Create a .env file with your API keys.

SERPAPI_API_KEY=your_serpapi_key_here
OPENAI_API_KEY=your_openai_key_here # If you're using OpenAI

Import the necessary libraries

Before we begin, let’s import the necessary libraries for making API calls, logging, managing environment variables, and handling dates and times.

import os
import json
import time
import logging
from datetime import datetime
from dotenv import load_dotenv
from serpapi import GoogleSearch
from openai import OpenAI
import requests

For our convenience, we will create a log to record debug information. It will be saved in the debug.log file.

logger = logging.getLogger("coffee_agent")
logger.setLevel(logging.DEBUG)
file_handler = logging.FileHandler('debug.log')
file_handler.setFormatter(logging.Formatter('%(asctime)s %(levelname)s: %(message)s', datefmt='%Y-%m-%d %H:%M:%S'))
logger.addHandler(file_handler)
stream_handler = logging.StreamHandler()
stream_handler.setFormatter(logging.Formatter('%(asctime)s %(levelname)s: %(message)s', datefmt='%Y-%m-%d %H:%M:%S'))
logger.addHandler(stream_handler)

Scrape data from Google Maps

The first step is to query Google Maps for coffee shops around a given location or coordinates.

We define a helper function to build the search parameters:

BUSINESS_TYPE = "Coffee Shop"

def get_search_params(user_input, api_key):
    if "," in user_input and all(part.replace('.', '', 1).replace('-', '', 1).isdigit() for part in user_input.split(',')):
        logger.info(f"Fetching {BUSINESS_TYPE.lower()} near coordinates: {user_input}")
        return {
            "engine": "google_maps",
            "q": BUSINESS_TYPE,
            "ll": f"@{user_input},14z",
            "api_key": api_key
        }
    else:
        logger.info(f"Fetching {BUSINESS_TYPE.lower()} in location: {user_input}")
        return {
            "engine": "google_maps",
            "q": f"{BUSINESS_TYPE} in {user_input}",
            "api_key": api_key
        }

This function builds the right parameters depending on whether the user types a city name or latitude/longitude coordinates.

You can change the value for BUSINESS_TYPE based on your business of interest.

Now let’s use it to scrape nearby coffee shops:

def fetch_shops_details(search_params):
    logger.info(f"Sending request to SerpApi for {BUSINESS_TYPE.lower()} search...")
    response = requests.get("https://serpapi.com/search", params=search_params)
    data = response.json()
    logger.debug(f"Received response: {json.dumps(data)[:500]}")
    logger.info(f"Received response from SerpAPI.")
    local_results = data.get("local_results", [])
    logger.info(f"Found {len(local_results)} {BUSINESS_TYPE.lower()}s around the area.")
    return local_results

This part of the script sends a request to SerpApi’s Google Maps API to retrieve local business results based on the area specified by the user’s input.

Visit our Google Maps API documentation for more information.

Scrape data from Google Maps Reviews

Each coffee shop result has a unique data_id, which we get from the previous API call. We can use this data_id to retrieve customer reviews.

def fetch_reviews(data_id, shop_title):
    logger.info(f"Fetching reviews for: {data_id} ({shop_title})")
    review_params = {
        "api_key": os.getenv("SERPAPI_API_KEY"),
        "engine": "google_maps_reviews",
        "data_id": data_id,
        "hl": "en"
    }
    review_search = GoogleSearch(review_params)
    review_results = review_search.get_dict()
    reviews = review_results.get("reviews", [])
    logger.info(f"Found {len(reviews)} reviews for shop {shop_title}")
    time.sleep(1)
    return [
        {
            "review_text": review.get("snippet"),
            "review_star_rating": review.get("rating"),
            "timestamp": review.get("date")
        }
        for review in reviews
    ]

This script sends a request to SerpApi’s Google Maps Reviews API to scrape each customer’s reviews and returns the collected reviews to each coffee shop’s data.

In our example, 20 coffee shops were found in the area from the previous search, resulting in 20 requests for Google Maps Reviews. Check out your search history here.

Visit our Google Maps Reviews documentation for detailed information.

Build Competitor Dataset

Finally, let’s put everything together into a string format for the AI to analyze.

def format_competitor_data(competitors):
    competitor_data_str = ""
    for shop in competitors:
        competitor_data_str += f"\n- {shop['business_name']}\n  - Address: {shop['address']}\n  - GPS: {shop['GPS_coordinates']}\n  - Star Rating: {shop['star_rating']}\n  - Review Count: {shop['review_count']}\n  - Opening Hours: {shop['opening_hours']}\n  - Price Level: {shop['price_level']}\n  - Customer Reviews:\n"
        for review in shop["customer_reviews"]:
            competitor_data_str += f"    - \"{review['review_text']}\" | {review['review_star_rating']} stars | {review['timestamp']}\n"
    return competitor_data_str

Set up an AI agent

Now that we have the competitor data, let’s build an AI agent to analyze it.

Design the AI prompt

LLMs perform best when provided with clear, structured instructions. Here’s an example prompt.

def build_prompt(competitor_data_str):

    return f"""
                You are **{BUSINESS_TYPE} Success Forecaster**, an AI agent that predicts the potential success of a new {BUSINESS_TYPE.lower()} in a given location.
                You will be fed structured data about competitor {BUSINESS_TYPE.lower()}s, including:
                {competitor_data_str}
                Your tasks are:
                1. **Market Landscape Analysis**
                - Summarize competitor density within 1–3 km.
                - Identify star-rating patterns, price tiers, and operating hours.
                - Highlight underserved niches (pricing gaps, late-night, early-morning).
                - Output:
                    - A **2-column table** with | Metric | Observations |.
                    - A short **bullet list of underserved slots/pricing gaps**.
                2. **Sentiment & Customer Insight**
                - Perform sentiment analysis on reviews.
                - Extract recurring positives, negatives, and unmet needs.
                - Output:
                    
                    | Sentiment Category | Positive Highlights | Negative Highlights | Unmet Needs / Opportunities |
                    |--------------------|---------------------|---------------------|-----------------------------|
                    
                - Conclude with exactly **3 key takeaways** in bullet points.
                3. **Success Prediction**
                - Estimate a **success probability score (0–100%)** in bold.
                - Output:
                    - A **2-column table** with | Metric | Value |.
                    - A bullet list of the **Top 3 drivers of success/failure**.
                4. **Recommendations**
                - Output:
                    - A **2-column table** with | Differentiator | Rationale |.
                    - A **2-column Risks & Mitigations table**.
                    - End with an **Action Plan** that:
                        - Is written as **one concise paragraph (1–2 sentences, max 3 lines)**.
                        - Starts with: **Action plan:** (exact text, bolded).
                        - Specifies **location, operating hours, pricing, or promotions** directly tied to the analysis.
                        - Avoids bullet points, timelines ("next 2 weeks"), or generic advice.
                ⚠️ Rules for consistency:
                - Always be clear, data-driven, and practical.
                - Do not give generic answers; tailor insights directly to the provided data.
                - Use tables where defined, and bullets only where instructed.
                - Keep tone business-strategic, concise, and data-driven.
                - Do not mix styles between sections.
            """

Notice how we use tables, bullet points, and structured outputs to make things clearer and easier to follow. You can experiment with different prompts to see what works best for you.

Run the AI Agent

def main():
    load_dotenv()
    api_key = os.getenv("SERPAPI_API_KEY")
    while True:
        user_input = input("Enter your business location name or coordinates (e.g., 'Austin, TX' or '30.2957009,-98.0626221') [type 'q' or 'quit' to exit]: ").strip()
        if user_input.lower() in ["q", "quit"]:
            print("Exiting program.")
            return
        if not user_input:
            print("[ERROR] Input cannot be empty. Please enter a valid location name or coordinates.")
            continue
        if not isinstance(user_input, str):
            print("[ERROR] Input must be a string.")
            continue
        break
    global now
    now = lambda: datetime.now().strftime('%Y-%m-%d %H:%M:%S')
    search_params = get_search_params(user_input, api_key)
    local_results = fetch_shops_details(search_params)
    competitors = build_competitor_data(local_results)
    competitor_data_str = format_competitor_data(competitors)
    prompt = build_prompt(competitor_data_str)
    client = OpenAI(
        base_url="http://localhost:11434/v1",  # Local Ollama API
        api_key="ollama"                       # Dummy key
    )
    response = client.chat.completions.create(
        model="gpt-oss:20b",
        messages=[
            {"role": "user", "content": prompt}
        ]
    )
    ai_output = response.choices[0].message.content
    logger.debug(f"AI response: {ai_output[:500]}")
    # Save AI output to markdown file with timestamp
    md_filename = f"ai_response_{datetime.now().strftime('%Y%m%d_%H%M%S')}.md"
    with open(md_filename, "w", encoding="utf-8") as md_file:
        md_file.write(ai_output)
    print(ai_output)
if __name__ == "__main__":
    main()

When you run this script, the AI will output a market analysis, sentiment breakdown, prediction, score, and action plan in Markdown format.

The full source code is available in our GitHub repository

What’s next?

While this prototype focuses on coffee shops, the same approach could easily apply to other businesses as well, such as:

• Restaurants
• Gym
• Salons
• Co-working spaces

Some possible improvements that you can make:

• Add charts & visualizations (e.g., competitor density heatmaps)
• Deploy as a Flask/FastAPI web app so anyone can test it in their city.
• Turn into a dashboard tool for entrepreneurs scouting opportunities.

Conclusion

By combining real-time Google Maps data with AI analysis, we can quickly gain insights into competition, customer sentiment, and market gaps.

Of course, no AI can perfectly predict business success. However, tools like this can provide entrepreneurs with a faster and more data-driven way to explore opportunities.

⚠️ Disclaimer: This project is for educational and experimental purposes only. Predictions may be inaccurate. Always validate insights with proper market research before making real business decisions.

Note:

If you’d like to explore the Google Maps API and Google Reviews API for other use cases, be sure to check out our in-depth tutorial below:
How To Make a Travel Guide Using SERP data and Python
Gauge Business Popularities using Google Maps

Before you get started, you need to have:

• ZOHO email ‘Client ID’, ‘Client Secret’, ‘accountId’ and ‘labelId’ (read here if you’re not sure how to get them)
• make.com account (sign up here if you don’t have the account)
• OpenAI API keys
• Download the make.com blueprint here.

My Automated Email Organization System

I’m excited to share with you my step-by-step guide on how I organize my Zoho email labels automatically using Make.com and ChatGPT. This system has revolutionized my email management, and I believe it can do the same for you.

This approach inspired by Andy O’Neil who create a youtube tutorial on how to automatically label incoming Google Workspace emails using ChatGPT and Make.com

Since I use Zoho email, the steps are slightly different.

Step-by-Step Guide

1. Connect Your Email to the Zoho Mail Module

Click on the ‘Add’ button and choose your region. Make sure to toggle ‘Show advanced settings’ to enter your Client ID and Client Secret keys.

2. Set the Interval

Click on the ‘Clock’ icon to set the interval for checking your emails.

3. Connect to the ChatGPT Module

Click on the ‘ChatGPT’ module and create a connection. Enter your OpenAI API key here.

4. Modify the Message Content

After creating the connection, ensure you modify the ‘Message Content’ section according to your needs.

5. Configure the Tools Module

Inside the ‘Tools’ module, change the pattern to your label name that you created, and set the output as the ‘labelId’. Click on ‘Add item’ to include more labels.

6. Finalize the Zoho Mail Module

In the ‘Zoho Mail’ module, choose the connection you made earlier and replace your ‘accountId’.

That’s it!

By following these steps, you’ll create an automated system that:

• Categorizes incoming emails
• Filters out spam
• Identifies urgent messages
• Prioritizes emails that need responses

The result? A cleaner inbox, reduced anxiety, and more time to focus on what truly matters in your business.

Need Help Getting Started?

If you’re feeling overwhelmed or unsure about implementing this system, don’t worry! I’m here to help. Book a free consultation call with me, and we can discuss how to tailor this solution to your specific needs.

Beyond Email Management: How I Can Help Your Business Thrive

While mastering your inbox is a great start, it’s just one piece of the productivity puzzle. Here are some other services I offer to help businesses like yours reach their full potential:

1. Custom AI Chatbot: Enhance customer interactions with intelligent chatbots tailored to your business needs.
2. Make.com Automation: Streamline your workflows and boost productivity with custom Make.com automations.
3. Virtual Assistant: Get comprehensive support for your business operations with our virtual assistant services.

Ready to take control of your inbox and supercharge your productivity? Start with the steps above, and remember — I’m just a call away if you need personalized assistance. Visit norainanordin.com for more information

Let’s turn your email chaos into email clarity, together!

In this step-by-step guide, I’ll show you how to extract up-to-the-minute stock data from TradingView ( https://www.tradingview.com/screener/), a popular financial analysis platform, using nothing but Python code. Buckle up and get ready to take your data game to new heights!

Inspecting the website

The first step in any web scraping project is to identify the data source. For TradingView, we’ll navigate to their stock screener page at https://www.tradingview.com/screener/.

Right-click anywhere on the page and select “Inspect” (or press F12 on most browsers). This will open the developer tools, allowing us to peek under the hood.

Next, head to the “Network” tab and refresh the page. This will display all the requests made by the website as it loads.

Finding the API Endpoint

Scroll through the network requests until you spot something promising — in our case is the first one

If we expand the 0: Object, we can see the all information needed for the column.

Right-click on this request and select “Copy as cURL.”

Now, fire up a tool like Insomnia or Postman, paste the cURL command, and hit send. You should see the same stock data appear in the response!

Generating the Python Code

Most API clients provide a handy “Generate Client Code” feature. In Insomnia, click on the dropdown next to the send button and select “Generate Client Code”.

Copy the generated code into a new Python file in your editor of choice. We’ll modify this code to fetch all available stock data from TradingView.

Open your code editor and paste the code.

After pasting the code, find (using ctrl + f) the “range” inside the payload and change it to 15000 as we have 14217 total data.

Parse the response

data_json = response.json()
lists = data_json["data"]

Now we will extract all the data and store them in a list.

data_list = []
for item in lists:
    name = item['d'][0]
    price = item['d'][6]
    change = item['d'][12]
    volume = item['d'][13]
    relative_volume = item['d'][14]
    market_cap = item['d'][15]
    pe = item['d'][17]
    eps_diluted = item['d'][18]
    eps_diluted_growth = item['d'][19]
    dividends_yield = item['d'][20]
    sector = item['d'][22]

    data = {
        'name': name,
        'price': price,
        'change': change,
        'volume': volume,
        'relative_volume': relative_volume,
        'market_cap': market_cap,
        'pe': pe,
        'eps_diluted': eps_diluted,
        'eps_diluted_growth': eps_diluted_growth,
        'dividends_yield': dividends_yield,
        'sector': sector
    }

    data_list.append(data)

This code converts the JSON response into a Python dictionary, then loops through the data and extracts the fields you’re interested in (e.g., stock name, price, volume, etc.).

Save the data to CSV file

Finally, let’s save our freshly scraped data to a CSV file for easy analysis:

with open('stocks_data.csv', 'w', newline='') as csvfile:
    fieldnames = ['name', 'price', 'change', 'volume', 'relative_volume', 'market_cap',
                  'pe', 'eps_diluted', 'eps_diluted_growth', 'dividends_yield', 'sector']
    writer = csv.DictWriter(csvfile, fieldnames=fieldnames)

    # Write the header row
    writer.writeheader()

    # Write the data rows
    for data in data_list:
        writer.writerow(data)

And there you have it! You’ve successfully scraped financial data from TradingView using Python.

Of course, this is just the beginning. You can further analyze and visualize the data using Python’s powerful data science libraries like pandas, matplotlib, and seaborn.

But remember, with great power comes great responsibility. Always ensure you’re scraping ethically and within the website’s terms of service.

Happy scraping!

Check out the full code and more examples on my GitHub: https://github.com/ainacodes/TradingView-scraper

ps: Need a help for your data projects? Feel free to reach out to me at aina.workspace@gmail.com to discuss your project requirements and how I can assist you. Let’s turn your data into actionable insights together!

As a self-taught (web developer-to-be) that currently learning JavaScript, I always looking for ways to make sure I understand the topic that I’m currently learning.

So in this post, I’ll show you how I used JavaScript constructor by building a product adder feature for an e-commerce site. By the end, you’ll see how constructors helped streamline working with product data.

JavaScript constructors are great ways to organize code and manage data more efficiently. They act as a blueprint for creating objects with a consistent structure.

Understanding JavaScript Constructors

Constructors are functions that create new objects. Here’s a simple Product constructor:

function Product(title, price, description) {
  this.title = title;
  this.price = price;  
  this.description = description;
}

Now I can create structured product objects like:

const product1 = new Product(
  "Blue socks", 
  10.99,
  "Comfortable cotton socks"
);

Much easier than manually assigning properties!

Now, lets see how we can use this in web application .

Building the Interface

I created a simple interface to add and display products. The final products look like this:

<!-- HTML -->
<h1>Add Your Products Here</h1>
<button class="addProductBtn" id="addProductBtn">Add Product</button>
<div class="productForm" id="productForm" style="display: none;">
  <input type="text" id="title" placeholder="Title">
  <input type="text" id="price" placeholder="Price">
  <input type="text" id="description" placeholder="Description">
  <div class="buttonContainer">
    <button class="saveBtn" id="saveBtn">Save</button>
    <button class="cancelBtn" id="cancelBtn">Cancel</button>
  </div>
</div>
<div class="productList" id="productList"></div>

Upon clicking “Add Product”, a form dynamically appears, allowing users to input details like the product title, price, and description.

Interacting with JavaScript Constructors

Through JavaScript, we’ll capture user input and instantiate new Product objects utilizing the constructor.

function addProduct() {
  // Get entered values
  const title = document.getElementById('title').value; 
  const price = document.getElementById('price').value;
  const desc = document.getElementById('description').value;

  // Create Product
  const product = new Product(title, price, desc);
  
  // Display
  displayProduct(product);
}

The key is using the constructor to convert user input into tidy Product instances!

displayProduct() then shows the new product. I append some DOM elements:

function displayProduct(product) {
  const productList = document.getElementById('productList');
  const productCard = document.createElement('div');
  productCard.classList.add('productCard');

  // Creating elements for product details
  const title = document.createElement('h2');
  title.textContent = product.title;
  const price = document.createElement('p');
  price.textContent = `Price: $${product.price}`;
  const description = document.createElement('p');
  description.textContent = product.description;

  productCard.appendChild(title);
  productCard.appendChild(price);
  productCard.appendChild(description);

  productList.appendChild(productCard);
}

For friendly user experience, I add resetForm() to reset the form when user wants to add another new product.

function resetForm() {
  document.getElementById('title').value = '';
  document.getElementById('price').value = '';
  document.getElementById('description').value = '';
}

Add event listener for Add Product and Save buttons.

document.getElementById('addProductBtn').addEventListener('click', () => {
  document.getElementById('productForm').style.display = 'block';
  resetForm();
});

document.getElementById('saveBtn').addEventListener('click', () => {
  addProduct();
  document.getElementById('productForm').style.display = 'none';
});

document.getElementById('cancelBtn').addEventListener('click', () => {
  document.getElementById('productForm').style.display = 'none';
});

The final JavaScript code look like this:

function Product(title, price, description) {
  this.title = title;
  this.price = price;  
  this.description = description;
}

function addProduct() {
  // Get entered values
  const title = document.getElementById('title').value; 
  const price = document.getElementById('price').value;
  const desc = document.getElementById('description').value;

  // Create Product
  const product = new Product(title, price, desc);
  
  // Display
  displayProduct(product);
}

function displayProduct(product) {
  // Creating a new div element inside productList
  const productList = document.getElementById('productList');
  const productCard = document.createElement('div');
  productCard.classList.add('productCard');

  // Creating elements for product details
  const title = document.createElement('h2');
  title.textContent = product.title;
  const price = document.createElement('p');
  price.textContent = `Price: $${product.price}`;
  const description = document.createElement('p');
  description.textContent = product.description;

  productCard.appendChild(title);
  productCard.appendChild(price);
  productCard.appendChild(description);

  productList.appendChild(productCard);
}

function resetForm() {
  document.getElementById('title').value = '';
  document.getElementById('price').value = '';
  document.getElementById('description').value = '';
}

document.getElementById('addProductBtn').addEventListener('click', () => {
  document.getElementById('productForm').style.display = 'block';
  resetForm();
});

document.getElementById('saveBtn').addEventListener('click', () => {
  addProduct();
  document.getElementById('productForm').style.display = 'none';
});

document.getElementById('cancelBtn').addEventListener('click', () => {
  document.getElementById('productForm').style.display = 'none';
});

Bringing It Together

Combining the DOM with constructors made managing products a breeze. We can now instantly transform user submissions into structured data — no messy object creation code!

Constructors FTW!

Conclusion

Constructors help organize complex systems. By standardizing object creation, they reduce redundancies and make code more adaptable.

I hope you’ve seen their potential for managing data in meaningful ways. Constructors elevate your code from messy scripts to robust programs ready for real-world systems like e-commerce.

Try them in your next web project!

Full code available in my GitHub: https://github.com/ainacodes/product-adder-page