Master your productivity: ChatGPT

Master your productivity: ChatGPT

Tomas Yevenes
Fabian Ferrada
Vicente Espoz
Jose Henriquez
Sebastian San Martin

University of the Bio-Bio

Faculty of Business
Department of Sciences of
Technology and Information

Spring 2023
Presentation based on the advanced ChatGPT course for Programmers from Programmer X

T. Yevenes
 Master your productivity: ChatGPT

Content

1 Basic commands
Learn with ChatGPT
Learning routes and syllabus
Creative tasks
Professional emails
Advanced documents
Resumes
Interview preparation

2 Introduction to programming
Bug fixes
Algorithms
Code improvement
Language translation
Code testing
Computer's science

T. Yevenes
 Master your productivity: ChatGPT

Content

3 Programation advance
Html
css
JavaScript
Tailwind
APIs
bash scripting
GIT
react
Dummy data
Typescript
SQL
NodeJS/Express
Python/Django
MongoDB/PostgreSQL

T. Yevenes
 Master your productivity: ChatGPT

Learn with ChatGPT

Prompt 1
What are the best resources to learn to program?

Online platforms
Books
Online tutorials
Interactive programming platforms
Online communities
Online courses
YouTube channels
Podcasts
Local communities
Online university courses

T. Yevenes
 Master your productivity: ChatGPT

Learn with ChatGPT

Prompt 1.1
Can you give me more details about the resources mentioned in
point 2?

“Python Crash Course” by Eric Matthes

“JavaScript. The Good Parts by Douglas Crockford
“Eloquent JavaScript” by Marijn Haverbeke

T. Yevenes
 Master your productivity: ChatGPT

Learn with ChatGPT

Prompt 1.2
I was referring to books in Spanish.

“Learn Java with Exercises” by Luis Jose Sanchez Gonzalez

“JavaScript: Reference Manual” by David Flanagan
“Learn to Program in C++” by Jose Antonio Gonzalez Seco

T. Yevenes
 Master your productivity: ChatGPT

Learning routes and syllabus

prompt 2
What is the route to become a Frontend developer?

Programming Fundamentals
HTML and CSS
JavaScript
Frameworks and libraries
Development tools
Responsive Design
Testing and debugging
Task automation
Web accessibility
Additional knowledge
Personal projects
Learn from the community
Job search

T. Yevenes
 Master your productivity: ChatGPT

Learning routes and syllabus

Prompt 2.1
Can you give me the syllabus to learn HTML.

Week 1: HTML Fundamentals

Week 2: HTML Page Structures
Week 3: Advanced HTML Elements
Week 4: Validation and good practices

T. Yevenes
 Master your productivity: ChatGPT

Creative tasks

prompt 3
Give me name ideas for an app for my startup that focuses on
selling furniture online.

FurnitureClick
FurnitureExpress
HouseComfort
FurnitureEasy
FurnitureWeb
FurnitureMarket
StoreFurnitureOnline
SofaShop
FurnitureDirect
ChairBuy
FurnitureWorld

T. Yevenes
 Master your productivity: ChatGPT

Professional emails
Prompt 4
Write an email asking my boss for a raise as a Frontend
developer, I have worked in this company for 2 years and have
contributed as a mentor, team leader, and creating all our
documentation that did not exist using Swagger.

Subject: Request for salary increase as a Frontend developer

Dear [Name of your boss],

I hope this email finds you well
…
Thank you again for the opportunity to be part of this team and
for your continued support.
Sincerely,
[Your name]

T. Yevenes
 Master your productivity: ChatGPT

Advanced documents

Prompt 5
I want to hire a designer to design my website, we have agreed
that he will deliver the draft in a week and offer 2 iterations free
of charge, each iteration then charge 20 dollars an hour, write a
contract for us

WEB DESIGN CONTRACT

This contract ("Agreement") is entered into on [Date], between:
Client data:
Designer data:
Terms and Conditions
…
Client's signature
Designer's signature

T. Yevenes
 Master your productivity: ChatGPT

CV

Prompt 6
I have 4 years of experience programming in HTML, CSS and
JavaScript, write a resume for me

Professional information
…

Programmer with 4 years of experience in web development

using HTML, CSS and JavaScript…

Work experience
I collaborated on user interface design and development
projects…

Interests
Stay up to date with the latest trends and advances in web
development…
T. Yevenes
 Master your productivity: ChatGPT

CV

Prompt 6.1
I am applying for the Frontend programmer role at [company],
write a cover letter

[Your name]
[Your e-mail]

[Recruiter name]
[Recruiter email]

Dear [Name of Recruiter or Hiring Manager],

I am pleased to express my interest in the Frontend Programmer
position at [company], as advertised on [job posting source] on
[job posting date]…

Technical skills
…
T. Yevenes
 Master your productivity: ChatGPT

Interview preparation

Prompt 7
As a technical interviewee ask me 3 questions about CSS.

What is specificity in CSS and how does it affect how style

conflicts are resolved on a web page?

Can you explain the difference between the "margin" and

"padding" properties in CSS, and when it is more appropriate to
use one or the other in the layout of a web design?

What are selectors in CSS and how do they work? Can you
mention examples of advanced selectors that are used to target
specific elements on a web page?

T. Yevenes
 Master your productivity: ChatGPT

Interview preparation

Prompt 7.1
What is the answer to the first question?

Type selectors (e.g. `div`, `p`, `a`) have a specificity value of 1.

Class selectors (for example, `.my-class`) have a specificity

value of 10.

ID selectors (for example, `#my-id`) have a specificity value of

100.

Inline selectors have a specificity value of 1,000.

T. Yevenes
 Master your productivity: ChatGPT

Interview preparation

Prompt 7.2
Can you give me the official documentation on this topic?

Mozilla Developer Network (MDN) - It is an excellent source of

CSS documentation.
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

W3C CSS Specification - The World Wide Web Consortium

(W3C) is the organization that defines web standards, including
CSS.https://www.w3.org/TR/CSS/

Books on CSS - You can also check out books on CSS, such
as "CSS: The Definitive Guide" by Eric Meyer or "CSS Secrets"
by Lea Verou,

T. Yevenes
 Master your productivity: ChatGPT

Html
Prompt 8
Create only the HTML code to render an accordion (do not
include CSS or JavaScript)

<!DOCTYPE html>
<html>
<head>
<title>Simple Accordion</title>
</head>
<body>

<div class="accordion">
<div class="item">
<button class="title">Section 1</button>
<div class="content">
…

T. Yevenes
 Master your productivity: ChatGPT

css
Prompt 9
Create the styles with modern colors for this HTML code. (attach
HTML code)

<!DOCTYPE html>
<html>
<head>
<title>Modern Accordion</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
…

T. Yevenes
 Master your productivity: ChatGPT

JavaScript

Prompt 10
Replaces the logic of opening my accordion elements from
HTML and CSS, using JavaScript. (attach HTML code)

<!DOCTYPE html>
…
<script>
const titles = document.querySelectorAll('.title');
titles.forEach(title => {
title.addEventListener('click', () => {
const item = title.parentElement;
const content = item.querySelector('.content');
…

T. Yevenes
 Master your productivity: ChatGPT

JavaScript

Prompt 11
Give me the code to create an accordion element using HTML,
CSS and JavaScript, use modern styles and colors.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Modern Accordion</title>
<style>
body {
font-family: Arial, sans-serif;
}
…

T. Yevenes
 Master your productivity: ChatGPT

JavaScript

Prompt 11.1
The content is not displayed when clicking, it seems that the
code has errors. You can fix it?

<!DOCTYPE html>
…
<script>
const accordions = document.querySelectorAll('.accordion');

accordions.forEach(accordion => {
const header = accordion.querySelector('.accordion-header');
const content = accordion.querySelector('.accordion-content');
…

T. Yevenes
 Master your productivity: ChatGPT

Bug fixes

Prompt 12
UncaughtTypeError; Cannot read property 'prop' of undefined.

if (myObject && myObject.prop) {

// Access myObject.prop safely here
} else {
// Handle the case when myObject or myObject.prop is undefined
}

T. Yevenes
 Master your productivity: ChatGPT

Bug fixes

Prompt 12.1
Can you give me the answer in Spanish?

if (myObject && myObject.prop) {

// Access myObject.prop safely here
} else {
// Handles the case where myObject or myObject.prop is
undefined
}

T. Yevenes
 Master your productivity: ChatGPT

Tailwind

Prompt 13
Can you replace this CSS code and use Tailwind?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Modern Accordion</title>
<link href="https://cdn.jsdelivr.net/npm/ tailwindcss@2.2.7
/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
…

T. Yevenes
 Master your productivity: ChatGPT

APIs

Prompt 14
Write JavaScript code to place a request at /api/metas/

fetch('/api/goals/')
.then(response => {
if (!response.ok) {
throw new Error('Request error');
}
return response.json();
})
.then(data => {
// Do something with the received data, for example:
console.log('Data received:', data);
})
…

T. Yevenes
 Master your productivity: ChatGPT

APIs

Prompt 14.1
Can you use Axios instead of Fetch?

const axios = require('axios'); // Import Axios if you are working in

a Node.js environment

// Make the GET request to the address /api/metas/

axios.get('/api/metas/')
.then(response => {
// Successful response is found in response.data
console.log('Data received:', response.data);
})
.catch(error => {
console.error('An error occurred:', error);
});

T. Yevenes
 Master your productivity: ChatGPT

bash scripting

Prompt 15
Write a Bash command to read all the Markdown files in a folder
and merge the contents of each into a new Markdown file

cat *.md > united_file.md

T. Yevenes
 Master your productivity: ChatGPT

GIT
Prompt 16
How to create a new GIT branch and include an old commit?

Make sure you are on the branch from which you want to
create the new branch and to which you want to add the old
commit.
git Branch

Create a new branch with the git Branch command followed by

the name of the new branch
git branch new-branch

Switch to the new branch you just created using git checkout or
git switch
git checkout new-branch
# Or in Git 2.23 and later:
git switch new-branch
T. Yevenes
 Master your productivity: ChatGPT

GIT

Once in the new branch, you can add the old commit. To do
this, you must first find the hash (unique identifier) ​of the old
commit. You can do this using git log to see the commit history
gitlog

Use the git Cherry-pick commandfollowed by the hash of the

old commit to add it to the new branch:
git cherry-pick <old-commit-hash>

Finally, verify that the old commit was added correctly using git
log on the new branch
gitlog

T. Yevenes
 Master your productivity: ChatGPT

Algorithms
Prompt 17
Give me the code for a sorting algorithm in JavaScript.

function bubbleSort(arr) {
var len = arr.length;
var swapped;
do {
swapped = false;
for (var i = 0; i < len - 1; i++) {
if (arr[i] > arr[i + 1]) {
var temp = arr[i];
arr[i] = arr[i + 1];
arr[i + 1] = temp;
swapped = true;
}
}
…
T. Yevenes
 Master your productivity: ChatGPT

Code improvement
Prompt 18
Can you improve this code? (attach code)

function bubbleSort(arr) {
const len ​= arr.length;
let swapped;

do {
swapped = false;

for (let i = 0; i < len - 1; i++) {

if (arr[i] > arr[i + 1]) {
[arr[i], arr[i + 1]] = [arr[i + 1], arr[i]]; // Swap elements using
destructuring
swapped = true;
}
…
T. Yevenes
 Master your productivity: ChatGPT

Language translation

Prompt 19
Translate this algorithm and use Python.

def bubble_sort(arr):
n = len(arr)
swapped = True

while swapped:
swapped = False

for i in range(n - 1):

if arr[i] > arr[i + 1]:
arr[i], arr[i + 1] = arr[i + 1], arr[i] # Swap elements
swapped = True

T. Yevenes
 Master your productivity: ChatGPT

Language translation

Prompt 19.1
What does this line do? (attach line)

The line `for i in range(n - 1):` is a `for` loop that loops through a
sequence of `i` values ​from 0 to `n - 2`.

Since the indexes of an array start at 0, you need to subtract 1

from `n` to ensure that the loop iterates through the valid indexes
of the array. The reason for subtracting 1 is that the last element
will already be in its correct position after a complete pass of the
algorithm.

For example, if `n` is equal to 5, the `for` loop will iterate from `i =
0` to `i = 3`, allowing you to compare and, if necessary, swap the
elements in the array positions from 0 to 3.

T. Yevenes
 Master your productivity: ChatGPT

Code testing
Prompt 20
Write tests for this code. (attach code)

Test case with an unordered list:

array = [64, 34, 25, 12, 22, 11, 90]
bubble_sort(array)
assert array == [11, 12, 22, 25, 34, 64, 90]

Test case with an already sorted list:

array = [11, 12, 22, 25, 34, 64, 90]
bubble_sort(array)
assert array == [11, 12, 22, 25, 34, 64, 90]

Test case with a list in reverse order:

array = [90, 64, 34, 25, 22, 12, 11]
bubble_sort(array)
assert array == [11, 12, 22, 25, 34, 64, 90]

T. Yevenes
 Master your productivity: ChatGPT

Code testing

Test case with a list containing repeated elements:

array = [64, 34, 25, 12, 22, 11, 64]
bubble_sort(array)
assert array == [11, 12, 22, 25, 34, 64, 64]

Test case with an empty list:

array = []
bubble_sort(array)
assert array == []

Test case with a single element list:

array = [42]
bubble_sort(array)
assert array == [42]

T. Yevenes
 Master your productivity: ChatGPT

Code testing
Prompt 20.1
Write tests for Jess. (attach code)

// Test case with an unordered list

let array = [64, 34, 25, 12, 22, 11, 90];
bubbleSort(array);
if (arraysEqual(array, [11, 12, 22, 25, 34, 64, 90])) {
console.log("Test Case 1: Passed");
} else {
console.error("Test Case 1: Failed");
}

// Test case with an already sorted list

array = [11, 12, 22, 25, 34, 64, 90];
bubbleSort(array);
if (arraysEqual(array, [11, 12, 22, 25, 34, 64, 90])) {
…

T. Yevenes
 Master your productivity: ChatGPT

react
Prompt 21
Create an accordion component using React.

import React, { useState } from 'react';

function Accordion() {
const [isOpen, setIsOpen] = useState(false);

const toggleAccordion = () => {

setIsOpen(!isOpen);
};

return (
<div className="accordion">
<div className="accordion-header" onClick={toggleAccordion}>
…

T. Yevenes
 Master your productivity: ChatGPT

Typescript
Prompt 22
Use Typescript for the accordion component. (attach code)

import React, { useState } from 'react';

function Accordion() {
const [isOpen, setIsOpen] = useState<boolean>(false); // Add
boolean type annotation

const toggleAccordion = () => {

setIsOpen(!isOpen);
};

return (
<div className="accordion">
<div className="accordion-header" ={toggleAccordion}>
…

T. Yevenes
 Master your productivity: ChatGPT

Dummy data

Prompt 23
Generates dummy data for a table called users, each user must
have a first name, a last name, an address and an id.

| ID | Name | Surname | Address |

|-------|-------------|--------------|------------ -----------|
| 1 | Anna | Rodriguez | 123rd Street, City A |
| 2 | John | Perez | XYZ Avenue, City B |
| 3 | Maria | Gomez | ABC Street, City C |
| 4 | Luis | Sanchez | 456 Street, City D |
| 5 | Laura | Martínez | MNO Avenue, City E |
| 6 | Diego | Fernandez | 789 Street, City F |

T. Yevenes
 Master your productivity: ChatGPT

Dummy data

Prompt 23.1
Give me the SQL query to insert this data.

INSERT INTO users (ID, First Name, Last Name, Address)

VALUES
(1, 'Juan', 'Pérez', 'Calle Principal, 123'),
(2, 'María', 'López', 'Avenida Central, 456'),
(3, 'Carlos', 'Rodríguez', 'Plaza del Sol, 789'),
(4, 'Laura', 'García', 'Paseo de la Luna, 101'),
(5, 'Roberto', 'Martínez', 'Camino Real, 234');

T. Yevenes
 Master your productivity: ChatGPT

SQL

Prompt 24
Create a table of goals, each goal has an id, description,
deadline, completed. Use SQL

CREATE TABLE Goals (

id INT AUTO_INCREMENT PRIMARY KEY,
description VARCHAR(255) NOT NULL,
deadline_date DATE NOT NULL,
completed BOOLEAN DEFAULT false
);

T. Yevenes
 Master your productivity: ChatGPT

SQL

Prompt 24.1
Add the day, month, year column.

CREATE TABLE Goals (

id INT AUTO_INCREMENT PRIMARY KEY,
description VARCHAR(255) NOT NULL,
deadline_date DATE NOT NULL,
completed BOOLEAN DEFAULT false,
INT day,
month INT,
anus INT
);

T. Yevenes
 Master your productivity: ChatGPT

SQL

Prompt 24.2
Can you use only one column for day, month, year?

CREATE TABLE Goals (

id INT AUTO_INCREMENT PRIMARY KEY,
description VARCHAR(255) NOT NULL,
deadline_date DATE NOT NULL,
completed BOOLEAN DEFAULT false
);

T. Yevenes
 Master your productivity: ChatGPT

SQL

Prompt 24.3
Create the query to get all completed goals

SELECT * FROM Goals WHERE completed = true;

T. Yevenes
 Master your productivity: ChatGPT

NodeJS/Express
Prompt 25
Create an API to return a list of goals from the url /api/metas,
each goal has an id, description, deadline_date, completed. Use
NodeJS and Express.

const express = require('express');

const app = express();
const port = 3000; // You can change the port if necessary

// Sample data (goals stored in an array)

const goals = [
{ id: 1, description: 'Exercise', deadline: '2023-01-31', completed:
false },
{ id: 2, description: 'Learn Node.js', deadline: '2023-03-15',
completed: false },
…

T. Yevenes
 Master your productivity: ChatGPT

Python/Django
Prompt 26
Create an API to return a list of goals from the url /api/metas,
each goal has an id, description, deadline_date, completed. Use
NodeJS and Express.

from django.db import models

class Meta(models.Model):
description = models.CharField(max_length=200)
deadline_date = models.DateField()
completed = models.BooleanField(default=False)

def __str__(self):
return self.description
…

T. Yevenes
 Master your productivity: ChatGPT

MongoDB/PostgreSQL
Prompt 27
Create the model or schema for a user in NodeJS.

const mongoose = require('mongoose');

const User = require('./userModel'); // Import the user model

// Connect to the MongoDB database

mongoose.connect('mongodb://localhost/your_database',
{ useNewUrlParser: true, useUnifiedTopology: true });

// Create user instances and save them to the database

const usersData = [
{ ID: 1, First name: 'Juan', Last name: 'Pérez', Address: 'Calle
Principal, 123' },
…

T. Yevenes
 Master your productivity: ChatGPT

MongoDB/PostgreSQL
Prompt 27.1
Can you create it to connect to a PostgreSQL database?

const { insertUser } = require('./userModel'); // Import the user

model

const usersData = [
{ ID: 1, First name: 'Juan', Last name: 'Pérez', Address: 'Calle
Principal, 123' },
{ ID: 2, First name: 'María', Last name: 'López', Address: 'Avenida
Central, 456' },
{ ID: 3, First name: 'Carlos', Last name: 'Rodríguez', Address:
'Plaza del Sol, 789' },
{ ID: 4, First name: 'Laura', Last name: 'García', Address: 'Paseo
de la Luna, 101' },
…

T. Yevenes
 Master your productivity: ChatGPT

Computer's science

Prompt 28
What is the time complexity of this algorithm? (attach code)

The algorithm you provided is an implementation of the Bubble

Sort sorting algorithm. The worst-case time complexity of Bubble
Sort is O(n^2), where "n" is the number of elements in the array.
This means that the time it takes to sort an array increases
quadratically as the size of the array grows.

In your implementation, the outer loop will be executed "n" times,

where "n" is the length of the array. The inner loop is executed "n -
1" times in the first iteration, then "n - 2" times in the second
iteration, and so on. This adds up to a complexity of O(n^2) in the
worst case.

T. Yevenes
 Master your productivity: ChatGPT

Master your productivity: ChatGPT

Tomas A. Yevenes Campos

University of the Bio-Bio

Faculty of Business
Department of Sciencesof
Technology and Information

Spring 2023

Presentation based on the advanced ChatGPT course for Programmers from Programmer

T. Yevenes