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

In this lesson, we will explore the possibility of programming with GPT, such as writing code for the game "Rock, Paper, Scissors" in JavaScript and integrating it into a React application.&#x20;

**Generating JavaScript code**

To begin, we will ask ChatGPT to create the code for the "Rock, Paper, Scissors" game in JavaScript.&#x20;

An example request might be: "Write the code for the 'Rock, Paper, Scissors' game in JavaScript."&#x20;

ChatGPT will generate code that might look something like this:

<figure><img src="https://304182736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbLgcwVoFtnJ1fCeF9OHz%2Fuploads%2FWPxhz0UCBEhRaXJQLlNm%2F1.png?alt=media&#x26;token=9e675842-b834-4cb9-a08b-1a5653801dc2" alt=""><figcaption></figcaption></figure>

<figure><img src="https://304182736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbLgcwVoFtnJ1fCeF9OHz%2Fuploads%2FNLOdE9FC8nRyuHQ5HJmo%2F1-2.png?alt=media&#x26;token=5540dc32-40f0-4a8d-8cfd-5e85f53b7cc6" alt=""><figcaption></figcaption></figure>

Interestingly, we can copy and execute the generated code directly in the browser console, which is its own execution environment.&#x20;

<figure><img src="https://304182736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbLgcwVoFtnJ1fCeF9OHz%2Fuploads%2FMZEsHSDoJYBzydRRIPGS%2F1.png?alt=media&#x26;token=9b5e08f9-ffb4-40a3-b753-b311f68eb040" alt=""><figcaption></figcaption></figure>

<figure><img src="https://304182736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbLgcwVoFtnJ1fCeF9OHz%2Fuploads%2F9UxoUTRoir4aV6GwFmuF%2F1-2.png?alt=media&#x26;token=8627f4cf-ce04-48ff-bf35-dffc555e6890" alt=""><figcaption></figcaption></figure>

Interestingly, we can copy and execute the generated code directly in the browser console, which is its own execution environment.&#x20;

We copy the function from the generated code, open the console by pressing F12, and paste it there:

<figure><img src="https://304182736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbLgcwVoFtnJ1fCeF9OHz%2Fuploads%2FEwjNSzPVYASRmuxPblag%2F2.png?alt=media&#x26;token=7ec8ff85-67c8-426c-9dab-1e96ddd149fd" alt=""><figcaption></figcaption></figure>

<figure><img src="https://304182736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbLgcwVoFtnJ1fCeF9OHz%2Fuploads%2FF01JmoxGlLxutyIbsOcH%2F2.png?alt=media&#x26;token=cd4efcca-3295-4297-b588-595128ab837f" alt=""><figcaption></figcaption></figure>

Now we call a function and get a dialog window to choose between rock, paper, or scissors.

<figure><img src="https://304182736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbLgcwVoFtnJ1fCeF9OHz%2Fuploads%2FkVIMKvJfiM9DmpvVTFJw%2F3.png?alt=media&#x26;token=9bd98630-3288-4643-8a3b-fb575759268c" alt=""><figcaption></figcaption></figure>

<figure><img src="https://304182736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbLgcwVoFtnJ1fCeF9OHz%2Fuploads%2F2ciphIzmiOYPieTWGiWM%2F3.png?alt=media&#x26;token=9d48b46a-6fa8-4d10-8d96-5b504a563d86" alt=""><figcaption></figcaption></figure>

Once we have confirmed that the function works, let's now consider whether we can achieve a tie or a loss.

<figure><img src="https://304182736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbLgcwVoFtnJ1fCeF9OHz%2Fuploads%2FnndMcuVhACNTGACX9bo9%2F4.png?alt=media&#x26;token=da09d832-4ad1-4199-b3eb-f188e35f648a" alt=""><figcaption></figcaption></figure>

<figure><img src="https://304182736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbLgcwVoFtnJ1fCeF9OHz%2Fuploads%2FGeKvWRfA0bcF9zLd0Sdq%2F4.png?alt=media&#x26;token=4ae77522-db8e-49f9-af60-831362deee57" alt=""><figcaption></figcaption></figure>

"Scissors won :)&#x20;

**Understanding the Generated Code**

If there are any parts of the code or terms that you don't understand, you can ask ChatGPT and it will explain them. An example question would be: 'ChatGPT, how does the comparison function work in the generated code of the game?'&#x20;

The answer might be something like this:"

<figure><img src="https://304182736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbLgcwVoFtnJ1fCeF9OHz%2Fuploads%2FIUHqQ61LHS5XSmv16vVl%2F5.png?alt=media&#x26;token=2d9eaf90-77f7-4bd4-93c9-a8e735ae946c" alt=""><figcaption></figcaption></figure>

<figure><img src="https://304182736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbLgcwVoFtnJ1fCeF9OHz%2Fuploads%2FMCiVsySSHR2OUhOnGfjR%2F5.png?alt=media&#x26;token=9d933df1-28f8-4097-88a2-bbae9893fd6a" alt=""><figcaption></figcaption></figure>

Practical task&#x20;

Objective: Try to use ChatGPT to write a game of "Tic Tac Toe" in JavaScript.&#x20;

Instructions:&#x20;

1. Ask ChatGPT to write the code for the "Tic Tac Toe" game in JavaScript.&#x20;
2. Copy the generated code into an HTML file.&#x20;
3. Open it in a browser and try playing!&#x20;

Example:&#x20;

1. Request: "Write code for the game of 'Tic Tac Toe' in JavaScript."
2. Response:

<figure><img src="https://304182736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbLgcwVoFtnJ1fCeF9OHz%2Fuploads%2FHjx3SrOl1JWjE0fJIuL5%2F6.png?alt=media&#x26;token=c2f43645-5f49-4d85-a13e-e26b0d8ffcc4" alt=""><figcaption></figcaption></figure>

<figure><img src="https://304182736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbLgcwVoFtnJ1fCeF9OHz%2Fuploads%2FtO52LLAFvSGmKvXKjGDz%2F6-1.png?alt=media&#x26;token=edbe834a-2486-40cb-9eff-90f403fd443a" alt=""><figcaption></figcaption></figure>

<figure><img src="https://304182736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbLgcwVoFtnJ1fCeF9OHz%2Fuploads%2F3K6WRCerYglnqJaSwLi5%2F6-2.png?alt=media&#x26;token=68758ab7-545d-4fe6-9140-b51d047cc6d3" alt=""><figcaption></figcaption></figure>

<figure><img src="https://304182736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbLgcwVoFtnJ1fCeF9OHz%2Fuploads%2F57Dntsl3ygirwSFOeAsa%2F6-3.png?alt=media&#x26;token=ac4442c2-b011-4010-a8da-c0bda2f72a69" alt=""><figcaption></figcaption></figure>

<figure><img src="https://304182736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbLgcwVoFtnJ1fCeF9OHz%2Fuploads%2FlgQjzOljYe9hz2OMXhWk%2F6.png?alt=media&#x26;token=9e7b44d1-7fe1-4ca2-80e3-c926804d9589" alt=""><figcaption></figcaption></figure>

<figure><img src="https://304182736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbLgcwVoFtnJ1fCeF9OHz%2Fuploads%2FuDrutrygylPMfxkR7Hpm%2F6-1.png?alt=media&#x26;token=1304dd44-50b6-419f-bbd4-4afe8a49f167" alt=""><figcaption></figcaption></figure>

<figure><img src="https://304182736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbLgcwVoFtnJ1fCeF9OHz%2Fuploads%2FCcY0PhS2ButTlsyg70MC%2F6-2.png?alt=media&#x26;token=b81986e0-ad74-4086-acdc-94c1ca01bf14" alt=""><figcaption></figcaption></figure>

<figure><img src="https://304182736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbLgcwVoFtnJ1fCeF9OHz%2Fuploads%2FTexFO3j8e9xnLQXhmT8Q%2F6-3.png?alt=media&#x26;token=883fb960-9e5e-433b-bc4a-2614be0ae0c0" alt=""><figcaption></figcaption></figure>

3. Insert this code into the HTML file:

<figure><img src="https://304182736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbLgcwVoFtnJ1fCeF9OHz%2Fuploads%2FWS1AaeQUHYwHHK5OLmDg%2F7.png?alt=media&#x26;token=4dca0412-8e49-4608-bc08-559cb3928cbe" alt=""><figcaption></figcaption></figure>

<figure><img src="https://304182736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbLgcwVoFtnJ1fCeF9OHz%2Fuploads%2FQCwfObilT8Df4ine4fqm%2F7.png?alt=media&#x26;token=67ed8aa8-e6b4-4bff-8552-446c67a93c57" alt=""><figcaption></figcaption></figure>

4. Open it in the browser.

<figure><img src="https://304182736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbLgcwVoFtnJ1fCeF9OHz%2Fuploads%2FRPykLTfFqJGeDpvCHPNk%2F8.png?alt=media&#x26;token=4ad6cfc6-6f67-4451-ab98-c6113a534982" alt=""><figcaption></figcaption></figure>

<figure><img src="https://304182736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbLgcwVoFtnJ1fCeF9OHz%2Fuploads%2FVmlY65p6P45x0YlOZfMp%2F8.png?alt=media&#x26;token=0492ffc6-8c12-4152-bef4-bbb70bb2db0d" alt=""><figcaption></figcaption></figure>

**Conclusion**

In conclusion of the lesson, it can be said that ChatGPT can help bring ideas to life, create new projects, and improve existing ones. This can be a useful tool for anyone studying programming, regardless of their level of knowledge.
