How to Build a JavaScript App with ChatGPT?

Last Updated : 27 May, 2024

AI is one of the most overhyped techs right now in the market. It is said that it will soon replace Software Engineers in creating complex software applications.

In this article, we will test ChatGPT to create a JavaScript application by giving ChatGPT the prompts and will see if it can actually make this simple application just by following our commands.

Prerequisite

What is ChatGPT?

ChatGPT is an AI language model developed by OpenAI, designed to generate human-like text responses based on the input it receives. Trained on vast amounts of text data, ChatGPT utilizes a transformer architecture to understand the context and predict the next word or sequence of words, enabling it to engage in coherent and contextually relevant conversations with users. With applications ranging from chatbots to content generation, ChatGPT represents a powerful tool for automating text-based tasks and enhancing user interactions across various domains.

So if you don’t know about ChatGPT, now you have know about it by reading the definition that is also written by ChatGPT.

Steps to Create Application by giving the Prompts

Prompt 1: What are the some JavaScript App that you can built or design.

Response:

Prompt 2: Ok Now Create a Todo List or Task master from the above List using JavaScript

Response:

Prompt 3: Now Give me Project Structure for the above code given.

Response:

Example: Implementation to run the code given by chatgpt in above chat.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>TaskMaster - Todo List</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1>TaskMaster - Todo List</h1>
    <input type="text" id="taskInput" 
           placeholder="Add a new task...">
    <button id="addButton">Add Task</button>
    <ul id="taskList"></ul>
    <script src="script.js"></script>
</body>

</html>

CSS

body {
    font-family: Arial, sans-serif;
}

h1 {
    text-align: center;
}

#taskInput {
    width: 70%;
    padding: 10px;
    margin: 10px auto;
    display: block;
}

#addButton {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}

#taskList {
    list-style-type: none;
    padding: 0;
}

.taskItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    padding: 10px;
}

.taskItem button {
    background-color: #f44336;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}

JavaScript

// Get references to HTML elements
const taskInput = document.getElementById('taskInput');
const addButton = document.getElementById('addButton');
const taskList = document.getElementById('taskList');

// Function to add a new task
function addTask() {
    const taskText = taskInput.value.trim();
    if (taskText !== '') {
        const taskItem = document.createElement('li');
        taskItem.classList.add('taskItem');
        taskItem.innerHTML = `
            <span>${taskText}</span>
            <button class="deleteButton">Delete</button>
        `;
        taskList.appendChild(taskItem);
        taskInput.value = ''; // Clear input field
    }
}

// Event listener for the Add Task button
addButton.addEventListener('click', addTask);

// Event delegation for dynamically added delete buttons
taskList.addEventListener('click', function (event) {
    if (event.target.classList.contains('deleteButton')) {
        const taskItem = event.target.closest('.taskItem');
        taskItem.remove();
    }
});

Response:

Prompt 4: Now instead of adding temporary store task data in local Storage.

Response:

Example: Implementing the above code given by chatgpt.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>TaskMaster - Todo List</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1>TaskMaster - Todo List</h1>
    <div id="inputContainer">
        <input type="text" id="taskInput" 
               placeholder="Add a new task...">
        <button id="addButton">Add Task</button>
    </div>
    <ul id="taskList"></ul>

    <script src="script.js"></script>
</body>

</html>

CSS

body {
    font-family: Arial, sans-serif;
}

h1 {
    text-align: center;
}

#inputContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

#taskInput {
    padding: 10px;
}

#addButton {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}

#taskList {
    list-style-type: none;
    padding: 0;
}

.taskItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    padding: 10px;
}

.taskItem button {
    background-color: #f44336;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}

JavaScript

// Get references to HTML elements
const taskInput = document.getElementById('taskInput');
const addButton = document.getElementById('addButton');
const taskList = document.getElementById('taskList');

// Function to add a new task
function addTask() {
    const taskText = taskInput.value.trim();
    if (taskText !== '') {
        const taskItem = document.createElement('li');
        taskItem.classList.add('taskItem');
        taskItem.innerHTML = `
            <span>${taskText}</span>
            <button class="deleteButton">Delete</button>
        `;
        taskList.appendChild(taskItem);
        saveTasks(); // Save tasks to local storage
        taskInput.value = ''; // Clear input field
    }
}

// Function to save tasks to local storage
function saveTasks() {
    const tasks = [];
    document.querySelectorAll('.taskItem').forEach(taskItem => {
        tasks.push(taskItem.querySelector('span').textContent);
    });
    localStorage.setItem('tasks', JSON.stringify(tasks));
}

// Function to load tasks from local storage
function loadTasks() {
    const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
    tasks.forEach(taskText => {
        const taskItem = document.createElement('li');
        taskItem.classList.add('taskItem');
        taskItem.innerHTML = `
            <span>${taskText}</span>
            <button class="deleteButton">Delete</button>
        `;
        taskList.appendChild(taskItem);
    });
}

// Event listener for the Add Task button
addButton.addEventListener('click', addTask);

// Event delegation for dynamically added delete buttons
taskList.addEventListener('click', function (event) {
    if (event.target.classList.contains('deleteButton')) {
        const taskItem = event.target.closest('.taskItem');
        taskItem.remove();
        saveTasks(); // Save tasks to local storage
    }
});

// Load tasks from local storage when the page loads
loadTasks();

Output:

Prompt 5: At the start of application, its giving[ object object] by default remove this error

Response:

Example: Implementing the above code given by chatgpt.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>TaskMaster - Todo List</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1>TaskMaster - Todo List</h1>
    <div id="inputContainer">
        <input type="text" id="taskInput" 
               placeholder="Add a new task...">
        <button id="addButton">Add Task</button>
    </div>
    <ul id="taskList"></ul>

    <script src="script.js"></script>
</body>

</html>

CSS

body {
    font-family: Arial, sans-serif;
}

h1 {
    text-align: center;
}

#inputContainer {
    text-align: center;
}

#taskInput {
    padding: 10px;
}

#addButton {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}

#taskList {
    list-style-type: none;
    padding: 0;
}

.taskItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    padding: 10px;
}

.taskItem button {
    background-color: #f44336;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}

JavaScript

// Get references to HTML elements
const taskInput = document.getElementById('taskInput');
const addButton = document.getElementById('addButton');
const taskList = document.getElementById('taskList');

// Function to add a new task
function addTask() {
    const taskText = taskInput.value.trim();
    if (taskText !== '') {
        const taskItem = document.createElement('li');
        taskItem.classList.add('taskItem');
        taskItem.innerHTML = `
            <span>${taskText}</span>
            <button class="deleteButton">Delete</button>
        `;
        taskList.appendChild(taskItem);
        saveTasks(); // Save tasks to local storage
        taskInput.value = ''; // Clear input field
    }
}

// Function to save tasks to local storage
function saveTasks() {
    const tasks = [];
    document.querySelectorAll('.taskItem').forEach(taskItem => {
        tasks.push(taskItem.querySelector('span').textContent);
    });
    localStorage.setItem('tasks', JSON.stringify(tasks));
}

// Function to load tasks from local storage
function loadTasks() {
    const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
    taskList.innerHTML = ''; // Clear previous tasks
    tasks.forEach(taskText => {
        const taskItem = document.createElement('li');
        taskItem.classList.add('taskItem');
        taskItem.innerHTML = `
            <span>${taskText}</span>
            <button class="deleteButton">Delete</button>
        `;
        taskList.appendChild(taskItem);
    });
}

// Event listener for the Add Task button
addButton.addEventListener('click', addTask);

// Event delegation for dynamically added delete buttons
taskList.addEventListener('click', function (event) {
    if (event.target.classList.contains('deleteButton')) {
        const taskItem = event.target.closest('.taskItem');
        taskItem.remove();
        saveTasks(); // Save tasks to local storage
    }
});

// Load tasks from local storage when the page loads
loadTasks();

Output:

Access Modifiers in TypeScript

pankaj_gupta_gfg

Improve

Article Tags :

How to Build a JavaScript App with ChatGPT?

Prerequisite

What is ChatGPT?

Steps to Create Application by giving the Prompts

Similar Reads

Thank You!

What kind of Experience do you want to share?