# Lesson №3 "Code Generation with ChatGPT." Part 2

In the previous lesson, we explored how ChatGPT can assist us in generating code. In this lesson, we will continue to expand our knowledge and skills, using ChatGPT to create and style a button in our web application. 

Let's start by looking at this process using an html example: 

1. **Creating a Button** 

To begin with, we need to create a button. Let's ask ChatGPT how to create a simple button in HTML. In this case, the request might be something like: "ChatGPT, how can I create a button in HTML?" ChatGPT will provide you with a sample code that you can use:

<figure><img src="/files/d1j3LRyXyVr9WzyGiarB" alt=""><figcaption></figcaption></figure>

Insert this code into your HTML file and refresh the page. Now you will see a button on your website.&#x20;

2. **Button Styling**&#x20;

Now that we have a button, let's work on its style. We want to change the color of this button to blue. Let's ask ChatGPT how to do that. The request could be something like: "ChatGPT, how can I change the button color to blue in HTML?"&#x20;

ChatGPT will again provide us with a sample code:

<figure><img src="/files/D3CqPQxxCiarJGI9wwsn" alt=""><figcaption></figcaption></figure>

Insert this code into your HTML file and refresh the page. Now your button is blue. If you want to use a different shade of blue, you can continue to consult with ChatGPT, and it will suggest various color code options for you.&#x20;

Now let’s see how we can achieve the same in React:

1. **Creating a Button in React**

Let’s start with creating a button. We can ask ChatGPT how to create a simple button in React. In this case, the request might be something like: "ChatGPT, how can I create a button in React?"&#x20;

ChatGPT will provide you with a code example that you can use:

<figure><img src="/files/kaGVZa5KlGsubAAjup1A" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/iplEysDcxUmYzPnKnPCR" alt=""><figcaption></figcaption></figure>

Insert this code into your React file. Now you will see a button on your web application.&#x20;

2. **Button Styling in React**&#x20;

Now that we have a button, let's work on its styling. We want to change the color of this button to blue. Let's ask ChatGPT how to do it. The request might look something like this: "ChatGPT, how can I change the button color to blue in React?"&#x20;

ChatGPT will then provide us with a code example:

<figure><img src="/files/sDldpuopYbcdVnOGSiOo" alt=""><figcaption></figcaption></figure>

Insert this code into your React file. Now your button is blue. If you want to use a different shade of blue, you can continue to consult with ChatGPT, and it will suggest various color code options for you.&#x20;

It's important to remember that ChatGPT does not maintain context between different sessions, so if you want to continue the discussion with the context preserved, make sure you do it in the same session.&#x20;

And now, try it out yourself!

**Practical Assignment**&#x20;

**Task:** Try creating a React web application with two buttons of different colors, using ChatGPT to generate the code.

**Instructions:**

1. Ask ChatGPT to explain how to create an application named my-app using vite.
2. Create a new React application using the command "npm create vite my-app" in the command line.
3. Choose React and then select JavaScript.
4. In the terminal, enter "cd my-app".
5. Next, enter "npm install" and "npm run dev".
6. Use ChatGPT and give it the request, "Add two buttons 'Hello' and 'Goodbye' to the main screen of the application."

<figure><img src="/files/UZtCbg1y6PGnBCDrgXyx" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/bpBf9fY6fK9EmOdvcny4" alt=""><figcaption></figcaption></figure>

7. And then ask them to make one button green and the other one red.

<figure><img src="/files/GAKiloWdB07GMfEZ0Ivp" alt=""><figcaption></figcaption></figure>

8. If necessary, ask him for clarification.
9. Next, we'll ask ChatGPT to make it so that when you click on the first button, it displays the text "Hello", and on the second button, it says "Goodbye":

<figure><img src="/files/GJZDSUcIbGtk5bJC0kRv" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/4iiqCUU5bc0VuwXwiUWZ" alt=""><figcaption></figcaption></figure>

In this example, we created two buttons: one blue and one red. Remember that your buttons can be any color that you choose.&#x20;

**Conclusion**&#x20;

As we have seen, using Chat GPT allows for the generation of code, suggesting styles and solutions for website creation, acting as a kind of developer's assistant. And although the chatbot can sometimes make mistakes, it can be an invaluable tool when used properly and when the right questions are asked.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://academy.bothub.chat/english/module-5-become-a-programmer-with-chatgpt/lesson-3-code-generation-with-chatgpt.-part-2.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.