I use ChatGPT to help me code, but from vast experience it is just a tool as I have at times (a lot of times and it sometimes feels like I’m arguing with the AI 
) addressed it to the AI that the code that was given to me simply can’t work and point out the reason why it can’t. I like ChatGPT because it saves me time in writing repetitive code and has helped me tighten up my code considerably over the last 3 to 4 months. Heck, I have even learn new coding techniques from ChatGPT; whereas, human coders while willing to help you only go so far for free. They are either not that willing to help fully or don’t want to give away the whole enchilada as they want to keep some coding techniques to themselves. I believe it’s more of the later and I don’t blame them in a way.
As for helping people here I admit I will use ChatGPT to help with the code as I’m working on my own code as well, not that I want to have ChatGPT do it for me rather so I don’t have copy the code myself straighten or format the code to get a working script or a good start to the script. I will not give the script if I don’t know what the script is doing (though even that code helps me out), but majority of time I understand it. A lot of times I will just see what ChatGPT will spit out for my own curiosity.
Heck, ChatGP has help me convert a JavaScript photo gallery script that I have been working on to convert over to a class as I always wanted to use classes in JavaScript because I have gotten to used to writing classes in PHP. Here’s the class that I’m talking about →
'use strict';
class ProductManager {
constructor() {
// DOM Elements
this.category = document.querySelector('#category');
this.container = document.querySelector('.container');
this.sidebar = document.querySelector('.sidebar_pages');
this.lightbox = document.querySelector('.lightbox');
// Pagination Configurations
this.current_page = 1;
this.per_page = 6;
this.offset = 0;
this.total_pages = 0;
// Data fetched from the database
this.database_data = {
'category': 'images',
'current_page': this.current_page,
'per_page': this.per_page,
'total_count': 0,
'offset': this.offset
};
this.pages = [{}];
// Binding `this` context to methods
this.categoryUISuccess = this.categoryUISuccess.bind(this);
this.paginationUISuccess = this.paginationUISuccess.bind(this);
this.resetLinks = this.resetLinks.bind(this);
}
// Handle fetch errors
handleErrors(response) {
if (!response.ok) {
throw (response.status + ' : ' + response.statusText);
}
return response;
}
// Update the UI upon successfully fetching gallery category data
async categoryUISuccess(parsedData) {
this.clearContainer();
console.log('parsed data', parsedData);
parsedData.forEach((slide, index) => {
this.createSlide(slide, index);
});
this.addImageListeners();
this.addLightboxListener();
}
// Clear all child elements of the container
clearContainer() {
while (this.container.firstChild) {
this.container.removeChild(this.container.firstChild);
}
}
// Create individual gallery slides
createSlide(slide) {
const productContainerClass = "w-2 h-1";
const displayDiv = this.createElementWithClass('div', productContainerClass);
this.container.appendChild(displayDiv);
const productItem = this.createElementWithClass('div', 'product-item');
displayDiv.appendChild(productItem);
const images = this.createElementWithClass('div', 'images');
productItem.appendChild(images);
const productImage = this.createElement('img', {
src: slide.image_path,
alt: slide.content,
loading: 'lazy',
'data-heading': slide.heading
});
images.appendChild(productImage);
const paragraph = this.createElementWithClassAndContent('p', 'hideContent', slide.content);
images.appendChild(paragraph);
const title = this.createElementWithClass('div', 'title');
productItem.appendChild(title);
const heading1 = this.createElementWithClassAndContent('h1', 'pictureHeading', `${slide.heading[0].toUpperCase()}${slide.heading.slice(1)}`);
title.appendChild(heading1);
}
// Utility function to create an HTML element with attributes
createElement(tag, attributes = {}) {
const element = document.createElement(tag);
Object.entries(attributes).forEach(([key, value]) => {
element.setAttribute(key, value);
});
return element;
}
createElementWithClass(tag, className) {
const element = this.createElement(tag);
element.className = className;
return element;
}
createElementWithClassAndContent(tag, className, content) {
const element = this.createElementWithClass(tag, className);
element.textContent = content;
return element;
}
// Add click event listeners to images to open in lightbox
addImageListeners() {
const images = document.querySelectorAll('img');
images.forEach(image => {
image.addEventListener('click', () => this.handleImageClick(image));
});
}
// Handle the click event when an image is clicked
handleImageClick(image) {
this.lightbox.classList.add('active');
this.container.style.display = 'none';
// Create the common container for productImage and productHeading
let imageExifContainer = document.createElement('div');
imageExifContainer.classList.add('image-exif-container');
/*
* Create Image portion of LightBox
*/
let productImage = document.createElement('img');
productImage.classList.add('productImage');
productImage.width = 800;
productImage.height = 534;
//console.log('image', image);
productImage.src = image.src // image path
/*
* Create EXIF portion of LightBox
*/
let productHeading = document.createElement('p');
productHeading.classList.add('productHeading');
productHeading.textContent = image.getAttribute('data-heading');
// Add both elements to the common container
imageExifContainer.appendChild(productImage);
imageExifContainer.appendChild(productHeading);
/*
* Create Text portion of Lightbox
*/
let nextSibling = image.nextElementSibling; // Grab the next sibling:
let content = document.createElement('p');
content.classList.add('galleryText');
content.textContent = nextSibling.textContent;
/* Remove large Image For Screen (cleanup) */
while (this.lightbox.firstChild) {
this.lightbox.removeChild(this.lightbox.firstChild)
}
// Add the container to the lightbox
this.lightbox.appendChild(imageExifContainer);
/* Add Content to Screen */
this.lightbox.appendChild(content);
}
// Add click event listener to lightbox to close it
addLightboxListener() {
this.lightbox.addEventListener('click', () => {
if (this.lightbox.hasChildNodes()) {
this.exitLightbox();
}
});
}
// Close the active lightbox
exitLightbox() {
document.getElementById('gallery_category').style.display = 'block';
document.querySelector('.sidebar_pages').style.display = 'flex';
this.lightbox.classList.remove('active');
this.lightbox.classList.add('lightbox');
document.querySelector('.container').style.display = 'grid';
// document.querySelector('.pagination').style.display = 'flex';
}
// Handle errors when fetching gallery category data fails
categoryUIError(error) {
console.log("Database Table did not load", error);
}
// Send a request to the server to fetch images
async createImageRequest(url, succeed, fail) {
try {
const response = await fetch(url, {
method: 'POST', // or 'PUT'
body: JSON.stringify(this.database_data),
});
this.handleErrors(response);
const data = await response.json();
succeed(data);
} catch (error) {
fail(error);
}
}
// Clear all pagination links
resetLinks() {
/* Remove Links For Screen (cleanup) */
while (this.sidebar.firstChild) {
this.sidebar.removeChild(this.sidebar.firstChild)
}
}
// Update the UI with the received pagination data
async paginationUISuccess(parsedData) {
this.resetLinks();
this.database_data.offset = await parsedData.offset;
this.total_pages = Math.ceil(this.database_data.total_count / this.database_data.per_page);
/* Create the Display Links and add an event listener */
this.pages = [{}];
/*
* Creating the array of page object(s)
*/
for (let x = 0; x < this.total_pages; x++) {
this.pages[x] = {page: x + 1};
}
this.pages.forEach(link_page => {
const links = document.createElement('div');
links.className = 'links';
this.sidebar.appendChild(links);
/*
* Add event listener for the links
*/
links.addEventListener('click', () => {
this.database_data.current_page = link_page.page;
// Close the lightbox if it's currently active
if (this.lightbox.classList.contains('active')) {
this.lightbox.classList.remove('active');
document.getElementById('gallery_category').style.display = 'block';
document.querySelector('.sidebar_pages').style.display = 'flex';
document.querySelector('.container').style.display = 'grid';
}
this.createRequest('portfolioPagination.php', this.paginationUISuccess, this.paginationUIError);
});
const pageText = document.createElement('p');
pageText.className = 'linkStyle';
pageText.id = 'page_' + link_page.page;
pageText.textContent = link_page.page;
links.appendChild(pageText);
if (this.database_data.current_page === link_page.page) {
links.style.backgroundColor = "#00b28d";
}
})
await this.createImageRequest('portfolioGetImages.php', this.categoryUISuccess, this.categoryUIError);
}
// Handle errors when fetching pagination data fails
paginationUIError(error) {
console.log("Database Table did not load", error);
}
// Send a request to the server
async createRequest(url, succeed, fail) {
try {
const response = await fetch(url, {
method: 'POST', // or 'PUT'
body: JSON.stringify(this.database_data),
});
this.handleErrors(response);
const data = await response.json();
//console.log('count', data);
succeed(data);
} catch (error) {
fail(error);
}
}
// Send a request to get the total number of images in a category
async updateTotalCountAndPagination() {
await this.createRequest('getTotalCount.php', this.totalCountUISuccess.bind(this), this.totalCountUIError.bind(this));
}
// Update the UI upon successfully fetching the total count
totalCountUISuccess(parsedData) {
this.database_data.total_count = parsedData.total_count;
this.createRequest('portfolioPagination.php', this.paginationUISuccess.bind(this), this.paginationUIError.bind(this));
}
// Handle errors when fetching the total count fails
totalCountUIError(error) {
console.log("Database Table did not load", error);
}
// Add event listeners to DOM elements
bindEvents() {
this.category.addEventListener('change', () => {
this.database_data.current_page = 1;
this.database_data.category = this.category.value;
if (this.lightbox.classList.contains('active')) {
this.lightbox.classList.remove('active');
document.getElementById('gallery_category').style.display = 'block';
document.querySelector('.sidebar_pages').style.display = 'flex';
document.querySelector('.container').style.display = 'grid';
}
this.updateTotalCountAndPagination();
});
document.addEventListener('DOMContentLoaded', () => {
this.createRequest('portfolioPagination.php', this.paginationUISuccess.bind(this), this.paginationUIError.bind(this));
});
}
// Initialization function
init() {
this.updateTotalCountAndPagination();
this.bindEvents();
}
}
const productManager = new ProductManager();
productManager.init();
It really tightens up the code and make it so much easier adding HTML elements to the page. Like I stated I use ChatGPT as a tool not as a 🩼 which I think is a good way to use AI. Just my two cents.
