Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Learn ChatGPT Prompt Input - Output | Text Boxes
Test UI Features

book
ChatGPT Prompt Input - Output

Prompt Input - Output without code

Source Code

html

index.html

copy
<link
rel="stylesheet"
href="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/prompt-input-output.css"
/>

<div class="container">
<div class="input">
<h2 class="title">Input Prompt:</h2>

<!-- =================== Input Content: User's Prompt =================== -->
<p class="content">
Generate a short story about a young astronaut who discovers a hidden
alien civilization on a distant planet.
</p>
<p class="content">Content 2</p>
</div>

<hr class="divider" />

<div class="output">
<h2 class="title">Generated Output:</h2>

<!-- =================== Output Content: AI's Response =================== -->
<p class="content">
As the young astronaut, Alex, stepped onto the barren surface of the
distant planet, they couldn't help but feel a rush of excitement mixed
with trepidation. They had trained for years for this moment, but nothing
could have prepared them for what they were about to discover.
</p>
</div>
</div>

Prompt Input - Output with Code

Source code

html

index.html

copy
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/codemirror.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/theme/dracula.min.css"
/>

<link
rel="stylesheet"
href="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/prompt-input-output-with-code.css"
/>

<div class="container">
<div class="input">
<h2 class="title">Input Prompt:</h2>

<!-- =================== Input Content: User's Prompt =================== -->
<p class="content">
I'm working on a Python program that simulates a basic banking system. I
need a class called 'BankAccount' with methods for deposit, withdrawal,
and checking the account balance. Can you provide a code snippet for this?
</p>
</div>

<hr class="divider" />

<div class="output">
<h2 class="title">Generated Output:</h2>

<!-- =================== Output Content: AI's Response =================== -->
<p class="content">Here is the generated code:</p>
<div class="content">
<textarea id="code-1" class="language-python">
class BankAccount:
def __init__(self, account_holder, initial_balance=0):
self.account_holder = account_holder
self.balance = initial_balance

def deposit(self, amount):
if amount > 0:
self.balance += amount
return f"Deposited ${amount}. Current balance: ${self.balance}"
else:
return "Invalid deposit amount."

def withdraw(self, amount):
if amount > 0 and amount <= self.balance:
self.balance -= amount
return f"Withdrew ${amount}. Current balance: ${self.balance}"
else:
return "Insufficient funds or invalid withdrawal amount."

def check_balance(self):
return f"Account balance for {self.account_holder}: ${self.balance}"

# Usage example:
account1 = BankAccount("John Doe", 1000)
print(account1.deposit(500))
print(account1.withdraw(200))
print(account1.check_balance())</textarea
>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/mode/python/python.min.js"></script>
<script src="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/prompt-input-output-with-code.js"></script>

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 6. Chapter 4
some-alt