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:

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

1. Button Styling

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?"

ChatGPT will again provide us with a sample code:

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.

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?"

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

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

1. Button Styling in React

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?"

ChatGPT will then provide us with a code example:

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.

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.

And now, try it out yourself!

Practical Assignment

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."

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

1. If necessary, ask him for clarification.

2. 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":

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

Conclusion

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.