Learn JavaScript with ChatGPT, here’s how

Key Takeaways

with Chad GPT you can learn literally anything and to prove that I'm going to learn JavaScript from scratch I want to show you that using AI is the fastest way to learn any skill and honestly it's also a lot of fun all right let's begin teach me JavaScript so as you can see C GPT is laying out a stepbystep plan and it also gave us the first task create a variable let greeting okay hello JavaScript and we need the semicolon okay console.log greting okay so let's run the code I didn't even realize there is no button to run the code uh you can simply use a browser so I'm going to follow the instructions exactly create a new file index HTML copy this code replace this with learning. JS and then I have to do inspect element console and we see it here it's super small okay you can see it better I guess what is the next step now while it's writing out I want to tell you about the new community commity I started specifically for people who are serious about AI it's going to be linked in the description and for the next two days it's completely free to join so make sure to check it out if you want to be among the people who are building the future all right Next Step if else you know standard programming Loops so let's declare a number variable let number equals 42 you know 10 we can do if number is greater than 40 console.log the number is bigger than 40 I'm not going to type that out this is perfect situation where GitHub cile will just save you time so else and then we do console.log and then the number is smaller than 40 okay save and let's refresh this Boom the number is bigger than 40 right step one step two for Loop okay so CH GPT is not wasting any time I like it maybe I could ask it to explain the syntax a bit more for let I equals all right you do semicolons not normal columns okay I smaller or equals I ++ okay so this is quite similar to C sharp actually and then console.log oh I think I didn't just save the file there is no way I'm that bad jgpt is kind of spinning through it I mean I like it task write a simple function function is the reserved keyword and then this is the syntax you can't really pick a better reserve keyword than that let's do greet and then name and then we do console.log let me just type that out because it's something new we don't want a space after because you know this is is not French like in French people do a space with for a question mark which is very strange all right so now we can just call the function GRE I'm just going to use my name David Andre and then we can do greet uh YouTube let's see this how these two things work boom hello David Andre hello YouTube Please Subscribe I mean the language told you it's not really me so you kind of have to do it if you were a complete programming beginner with zero you know experience in any language you probably would go even slower and ask it but at any point I can just you know tell it to slow down tell it to explain something further but since I understand it we can just keep going actually what we can do is real quick I can do a duplicate so we don't mess up this flow I can just start a new chat and do what is the Syntax for comments in JavaScript single comments okay so SL slash classic okay so if I select this and it's like control slash all right that's even faster beautiful anyway let's go back to our main threet task one change web page content set up the HTML file okay so we need a paragraph so I'm just going to copy this I have to call you out you are going way too fast with the syntax the goal here is for me to learn the language not to speedrun all I want to do is at the end I want to build my own compiler with JavaScript now if you can't tell that's obviously a joke cuz CU that would take like a thousand hours but no like seriously um you know I just want to build something impressive at the end with minimal help of AI so see like you can just call out chgb you can tell it to slow down to explain something you know don't let it boss you around like you're still in control we are still in control of the AI I mean might not be the case in 5 years or 10 years but hey when you declare a variable with lead you're creating a named storage for data that you can refer to later I mean yeah the syntax is still very simple here but I just wanted to you know not rush so much so now this is where we are do do manipulation when you access document. G get element by ID so this is by far like the most advanced syntax we've ever had document. get element by ID okay so document refers to this document um you know HTML so let's do that document. get element by ID and then we want the ID demo just the you know this paragraph we created get element by ID demo okay obviously um GitHub cor is helping out but let's see that inner HTML interesting why do we use this it says this you're finding an HTML with the ID demo that inner HTML lets you change the content inside that element okay so this is currently the content but we will change that to hello JavaScript okay that inner HTML equals hello JavaScript is GitHub Cal listening like is my mic compromised it's kind of crazy um but yeah maybe just infert since we used it before anyway it's getting scary good okay so let's see we have everything saved contrl s contrl s and F5 let's go F5 in here boom we see this as a paragraph and we have an error uncode reference error running JS line 19 oh my God yes obviously obviously we don't have the function we cannot have the function commented out that's a rookie mistake but hey um we C it I mean Chrome C it so okay hello David Andre hello YouTube Please Subscribe and as you can see here hello JavaScript it updated so before it was this is a paragraph and then it updated actually you know what let me comment this out as well it's kind of or stay focused okay hello JavaScript it's beautiful okay so let's say good now I understand let's keep going maybe it could go more into the reserved keyboards right event handling event handling in JavaScript is about responding to the user actions like clicks keyboard presses or Mouse movements task respond to a button click set up HTML file it's annoying that you know well actually I can just copy this it's kind of easy and title we don't have a title or is the title is Javascript test but yeah that's good so let's just copy this code for the button because you know or we can just write it you know learning HTML and GSS kind of goes hand in hand so let's go and make a button so let's go button ID equals my button my button and then uh just click me okay and this is the text inside click me boom and vs code for completed this for us it's good and then we have to go into the JavaScript and then we have a new uh method on click or I guess it's event handling document. getet element by ID all right so this is the same syntax we just use a different method here equals function interesting understanding the code okay let's see document. get element by ID my button gets the button yes we knew that on click is an event handler that listens for a click event on the button makes sense the function defines what happens when the event occurs it's interesting that we have to do like equals a new function all right so this is again like one step further in terms of how advanced we're going so let's go document. getet element by ID and then we need the my button and then we do on click yes equals function yes I actually type that out you know why not function boom and then what was it alert button was click okay alert first time we're using alert alert button was clicked boom save and I guess we have to do semicolon I assume yes let's see boom we have a button click me seems like a scam website but hey we coded this so we know there is no malware in these 26 lines of code let's see click me boom click this page says button was click Al this is alert oh okay so one of these warning I mean yeah you probably don't want to use this when you're like actually building a website but yeah it's good we have a nice button that uh just Wars us button was clicked very nice um now actually I'm just going to ask it like I'd like you to go more into the syntax of JavaScript you haven't really touched on the reserved keywords and stuff like that it's kind of you know just going progression in terms of difficulty of the programming which is very nice I mean obviously I enjoy challenge in terms of logic and algorithms but to learn any language you have to understand the syntax right you can't just make simple mistakes let allows you to declare variables that you can change later I mean that's the definition of a variable const is for variables whose value should not change constants is it still a variable then I mean it's a weird explanation but it's probably just trying to make it simple but yeah const so yeah I mean let's just write it right why not so let's comment this out boom it's already completed and then do let H equals 21 It's My AG you know getting old it's kind of unfortunate and yeah I mean look GitHub co-pilot is basically AGI it's kind of crazy let name equals David Andre boom save well actually we do constant where is constant I mean some people are into changing names uh you know but for most people it's a constant so we can actually do constant right constant name David Onre I mean I wish age was a constant but hey maybe Brian John will figure something out until then AG is still a variable okay if else statement yes we've we've done those four initialization okay so this is a good way to actually explain it for initialization condition increment right so here you do let I equals 1 or zero here you do how long I mean how many times have you Loop basically the condition and how fast you want it to increment same um you know structure as C in Python it's a lot simpler while condition right Run Okay so yeah I mean basically very very simple very similar to C actually I'm kind of surprised return used to specify the value returned by function okay same reserved keyword as python try catch finally again very similar to python obviously except for the C brackets but I guess the benefit is that indentation doesn't matter other important synx elements okay so comments yes we've already G over that operators JavaScript includes arithmetic operators plus minus times uh divide whatever equals plus equals minus equals uh you know is equal like the co like exactly the variable what is this like how was it say like is the same this is an equal sign but a double equal sign basically it has to be like the exact same variable you know like when doing if statements or whatever it's not equal greater than less than blah blah data types number string Boolean object function null undefined interesting undefined objects and rates objects store data in key value pairs okay so that's like dictionaries in Python I guess and arrays stored all ordered collections is it really like seems to be a lot simpler than python that's is like seven different data types for this like topples you know lists arrays dictionaries so many but yeah okay so classic array and this is I guess called an object I know it is a dictionary but sure let person name Alice H25 object okay all right great I mean well explained let's keep progressing in our journey to learn JavaScript just one you know prompt engineering tip is like improve your typing speed if you're typing it like 40 words per minute that's like disastrous you have to fix that otherwise like you're just going to waste so much time okay so next TX next task working with arrays and object objects create and use an array by the way if you're new here my name is David Andre and I love building stuff with AI so if you want to see more videos like this please subscribe okay create an array of your favorite fruits interesting use a for Loop to print out each fruit in the console okay so let's comment this out boom and yeah so this is the Syntax for an array let fruits so everything is let in C you know you obviously have to do in string or whatever here you just do let for everything and then in Python it's even simpler you don't even you don't even do L you just type fruits equals and the language I mean the compiler recognizes what data type it is but okay let's do fruits um array so let's do let fruits equals and then we do and this is beautiful right I don't have to type this this is like a waste of time and GitHub co- pallet has my back right and then we do for Loop for let I equal z i has to be smaller than fruits. length Okay so very familiar uh syntax multiple languages have have this console that log fruits with the argument being I okay so really good let's do um for let I equals Zer I mean co-pilot already knows exactly what we want to do but I'm just going to type this out then i++ okay boom and then console.log fruits and it's always going to display the current fruit boom and let's test it out apple banana orange strawberry mango by the way this shouldn't do anything yes exactly it doesn't do anything because we commented out the code so yeah it just lists out all the fruits and it's also good that it says which line it's coming from this is really nice for debugging but yeah I mean out of these um dude I've bought some mangoes and that was a mistake like that's such a hard fruit to consume like I mean I like it but just like an entire mango like come on it's like so difficult to open up anyway understanding we do understand that objects an object is a collection of properties and a property is an association between a name or key and a value interesting yeah so I'm going to have to like re relearn this because I really have this engraved as a dictionary but that's fine so create and use an object create an object representing a book with properties for title offer and year the great gu be oh my God it's almost 100 years old Jesus print each property to the console okay so we declared the object let's comment this out so it's not distracting let how how we call book oh I see okay so it's different than a dictionary yeah okay so I have this confused it's yeah it really is an object in this case because dictionary is like a list of key value Pairs and this is basically like defining one item and giving it properties yes makes sense I guess you can still have like a dictionary named book and have I don't know maybe both work but yeah okay let book equals and then it's curly brackets for objects for you know as you can see for lists it's square brackets so title offer and year okay so title equals is even suggesting okay let's go with github's co- pallad right okay Tolen exactly and then year 1954 it's much newer than the Great Gatsby all right so I mean as you can see for stuff like this just having GitHub copal is like a massive save of time obviously there are other you know AI coding assistants but this one is the one I use and I think it's the best one to be honest okay console.log and then we just want to Output everything again let's see if copell save us time right log and wait why is it okay it's I guess nice nice formatting title equals yes yes yes so I just press Tab and you know codes it for me soon enough we won't even have to do that all right so I mean it's crazy like people think you know AI will replace programmers but it's really like the people with actual ideas and who want to implement will replace the lazy programmers who just want to type and not think so like if somebody has an idea in you know four years from now they'll just type it into gbt 8 or whatever and it will just execute upon it and sure like you don't have to actually write the every single line by yourself and you you could still go back and look at it but like it will just allow you to implement new ideas and changes super fast and that's like in my book that's who's a great programmer the best programmers are the ones who build something not the ones who know eight different languages and you know know all the syntax and blah blah blah and just like Farm points on stack Overflow or whatever like the best programmers are the one who actually buil something that changes the world even like I don't I don't care how I don't care if you've used AI or if you use the internet to help you like who cares all that matters is that you create something the people want all right so we've created an object and we've called it um could we actually put this into for Loops somehow let me ask chb it's interesting could we actually put the console.log outputs into some sort of a for Loop that outputs every single property of the object I'm pretty sure there is a way to do this this but I don't know the syntax absolutely the loop through each it's just like four each on the four in okay so it is a bit more complex we have I mean not really H let's see let's actually call this instead of this so so for let property in book I mean again copal already completed the whole challenge but console.log and we do property so this um just outputs you know title of for year and then wait maybe there's like a actually dot is it like um uppercase is there um method pre-built to start start with uppercase bad start to uppercase puts everything to uppercase to local uppercase whatever let's not complicate right so console.log property plus and then we do the colon and then we actually have to access the object and get the property value property boom okay so is this correct no we have to do semicolon obviously it's JavaScript we have to always semicolon and as you can see it works exactly the same but we don't have the first letter capitalized but that's okay because you know if you look at all the senior like all the people you know leaders of like if you just look at maybe like Sam mman Greg Brockman all these people at open AI none of them use capital letters so I guess if you want to create AGI you have to stop using you know capital letters It's also faster let's be honest that's the ni nice thing about it it's much faster to type without any capital letters I don't know I still have to capitalize I it feels kind of illegal to not capitalize I but okay okay okay so got it let's move on here I'm actually curious what CH gbd suggests me to learn next we have reached 45 lines of code maybe we can go to like 200 let's see would be interesting to see how many lines I have at the end how fast I can learn this language actually you know what I'm kind of curious trends. google.com let's see how the popularity of JavaScript has been changing so I'm just going to do worldwide and let's do from 2004 okay so it's on the downtrend that's interesting let's just do JavaScript as a search term wow that's crazy let's compare it to python language okay so I guess JavaScript is kind of struggling let's do five last five years yeah python is growing faster there has been some Resurgence H I did know JavaScript like declined in popularity so much maybe it's like typescript is the next implement ation we have to remove these obviously because they're way more popular oh yeah typescript is taking off like what are these huge jumps bro anyway it seems like it reached kind of a local Peak but yeah we're um not doing typescript right now obviously it's very similar to JavaScript but hey this is Javascript maybe I can make a video on other languages if this does well I can actually make any other language so if you have a specific ific request maybe C++ maybe I don't know Java I mean I know a bit of java but yeah okay let's delve into one of the more advanced yet crucial aspects of JavaScript asynchronous programming oh my God was this supposed to be beginner tutorial I mean I'm I'm all for the challenge so let's see this involves handling operations that might take some some time to complete like fetching data from a server without blocking the rest of the code next task understanding Ayn asynchronous JavaScript asynchronous operations are often handled using promises and the async SL await syntax okay I'm I I'm really about to learn like now you know this all of this was still in my comfort zone now we're stepping out promises A promise is an object representing the eventual completion or failure it's like so motivating if you apply that to like human goals of a synchronous operation create a simple promise make a promise that resolves with a message after a delay yeah so all the delays is in milliseconds so this is 3 seconds okay so we I mean I'm actually kind of excited for this so let my so for all variables including promises have this keyword let my promise equals new promise okay and then we have to do resolve project yo this is crazy look at this we have like one two three four five five layers of brackets I guess you know you can count this as five but wow we're really JavaScript is really going deep this is you know the advantage of python where you don't use so many curly brackets but yeah I mean actually it's kind of making me grateful for the indentation oh personally I I think indentation is cleaner than curly brackets but it's also easier to get messed up you know so both have their own advantages disadvantages so let's see let okay let's go let my promise equals new promise and then we do resolve reject y it needs to explain this right okay resolve reject all right I'm just going to type it and I hope CH GPT explains it right and we do this okay now we're getting into JavaScript now like we've really entered the bread and butter of this language set timeout set timeout and we want to do again this bro it needs to explain the syntax okay we do the symbol resolve promise resolved oh okay so I guess you can declare both both this is like try accept a little bit of that um same idea I guess resolve success whatever promise resolved whatever so let's type it out promise resolved boom what is going on this is so chaotic bro you have to go here and do 3,000 and then semicolon here and semicolon here yo okay so this is we're entering some new territory my promise that then message okay I guess this is maybe after the promise is resolved I don't really know message I guess it's easiest to like type it like this and then just do this cono that log message yes okay so let's see how this runs actually um it doesn't run oh my God I have to wait the three seconds yeah so it appears after 3 seconds exactly promise resolved okay wow understanding okay let's see I need to I really need chgb to explain this new promise resolved creates a new promise the function inside takes two arguments resolve and reject which are used to settle the promise the set timeout makes sense let's see let's go back a bit to see I mean when we did the function was like much simpler yeah it it's trying to do too much at once and like this explanation is not sufficient so I'm just going to do copy code I'm going to please explain this part in more detail especially the all the syn like including all the syntax that then this method is used to access the result of the promise okay so it's I mean it's wrong I thought it was like what happens after the promise but no it's get the result of the promise and then we print it out okay so how is it decided if the promise is resolved like whether the code frows an error promise is an object okay represent presting the eventual completion or failure okay so maybe this is like maybe running out of memory could also be another way of failure doesn't have to be just error I guess maybe we can ask all the different ways it could fail to better understand the concept of promises handling operations that might take some time to complete okay so yeah you want stuff to you want your code to still be running got it asnc wait we're going to skip this and just go into the explanation the promise Constructor let my promise okay this declares a variable my promise and assigns a new promise to it we do understand understand that this is clear new promise this creates a new promise object okay so it's like this basically resolve reject this is an arrow function Arrow function it never explained Arrow functions resolve and reject these are both function themselves oh my God jgpt like you really need to slow it down resolve is called to successfully complete the promise reject is used this is another arrow function it gets called after the timeout period okay wait a second you you've never explained Arrow functions all of this is new to me just be honest like this is good this is like the main benefit of working with AI there is no reason to pretend anything like if you're working with a human you know some Advanced programmer you might want to act like you understand you know because there's peer pressure to act like you know what's happening but but if AI you can just ask the same question like a million times until you actually understand it so that's why I think learning with AI is so op because none of the so like social limitations or you know assumptions or anything like that like the Dynamics none of that applies you can just learn at your own pace as fast as you can or as slow as you want it doesn't matter again like tgb is rushing it's not explaining enough so I have to call it up out Arrow functions are a more concise Syntax for writing functions Expressions make sense they're particularly useful for short functions and come in handy when working with methods like that then in promises so you can see we've used it here but why is it why do we de have to declare a function though can't we just like print the message right away I don't know I do not know maybe it's like for this is maybe bad example it's too simple syntax of Arrow functions okay parameters and then function body okay okay so you skip the name well I guess you have the name H okay I still I've still have like a bunch of confusion around this like regular functions Arrow functions can take parameters and closed in parenthesis if there's only one parameter the parenthesis can be omitted oh so this okay so this is I guess a parameter it's not a name of the function then oh that's interesting okay Arrow the arrow symbol is what defines an arrow function function body in curly brackets for single line functions you can omit the braces and the return statement the result will be returned automatically for single line functions we haven't used any single line functions just yet wait you do wait you do Arrow okay I see examples Arrow function with no parameters why wow I mean I guess you would never really use this cuz you can just do this obviously and you can't really call these I assume maybe you can I don't know here you can I guess let's try this actually I'm going to copy this I'm just going to um comment that out and let's try this can you call it can you call it let's do can you like name how I mean I don't know maybe it will explain it since there's only one oh it's oh my God I keep forgetting it's the parameter so the function doesn't have a name that's why it's faster I mean yeah there is a similar Concept in Python but it's not called Arrow functions because it doesn't use the syntax so this is the parameter and then you call the parameter so this just executes Arrow functions with multiple parameters okay very simple very clean single line but then like what is the purpose I still don't understand like what the purpose of an arrow function is when you can just you know do this like you know if you can't call the function why not just do it without what is the benefit of wrapping in a function just again I'm assuming you can't call Arrow functions in other places in your code in that case what is the purpose of using them when you can just do that a ib directly single line Arrow function oh yeah so you don't need to return even Arrow functions in the promise example set time out function is using an arrow function as its first parameter bro the function is the parameter oh so that's why you do this it's like an arrow function with no parameters okay so that makes sense and its body calls resolve promise resolved and do then method takes an arrow function message as its parameter okay so this is like the entire Arrow function but message is just argument yes that makes sense Arrow functions are not just a shorter way to write functions they also have some differences in Behavior particularly with the handling of this but that's more advanced for later okay Arrow functions can indeed be called elsewhere in our code just like regular functions however the way you define and use them can be slightly different if you assign an eror function to a variable you can then call it using that variable name just like a regular function constant add so this is a constant equals oh the constant is the function wait a second but why I'm just I gu trying to understand like why wouldn't you use a normal function you know function add I maybe this the shorter syntax okay here purpose of using Arrow functions conciseness they allow for shorter syntax which is particularly handy for simple functions yes okay so here it's exactly what I want it explained traditional function yes and then Arrow function just one line of code instead of free right so this is basically kind of like execute this and you don't even need return no binding binding of this Arrow functions don't have their own this context they inherit this from the parent scope at the time they they are defined this is useful in certain scenarios especially in object methods and Evan handlers where you want to access the parent context oh yeah okay so this like for game development this would be quite useful implicit return in errow functions with a single expression you can omit the braces and the return keyword just like this just like here useful in functional programming they are often used in functional programming par especially AR array methods map filter reduce obviously we do not know what these are just yet okay this is good when to use which use Arrow functions for non method functions and when you don't need to use this arguments super or new use traditional functions for object methods right or Constructors especially when you need need to access this okay so I mean I don't have complete understanding of this but it certainly helped so I'm just going to do okay thank you for this explanation please be more forough when introducing New Concepts if you don't explain them properly it can be quite overwhelming that said let's keep going in the Journey of learning JavaScript okay let's do error handling try catch classic objective write a function that attempts to parse Json use a TR catch statement to handle any errors that might occur if the Json is invalid I mean this is actually very useful all right so let's do this function pars Json Json string and we do try let Chason object okay this is very useful for you know web development building scrapers or stuff like that so let's do it right I'm going to comment this out as always and let's do function pars Json and then we do J wait was it Json string yes I mean it doesn't really matter how you name it but yeah bro GitHub co- pallet is crazy maybe I should disable it I don't know let let me know guys like is it distracting for you to have these suggestions wait this shouldn't be here actually for me it's like I don't know it's good because it saves time but if it's to distracting I can definitely disable it for future videos okay so now we do the try catch try boom and here uh um let okay so new variable named Json object and this this is the result of the parse when it's successful and then we do just a simple output and then we catch the error or so this is nice you can actually get do this directly it's kind of like type error test the function and then we give it Json oh that's nice inva wait oh okay I I was about to say what's the you know this is the difference I couldn't Spot the Difference that's funny but yeah the difference is that instead of column there is a comma and that's invalid Json so yeah JavaScript is obviously very closely tied to Json and maybe I can ask um jgb to more explain Json because that's an essential part of understanding JavaScript all right anyway let's finish this function we need to do a variable Json object okay Json object equals json.parse and then um parameter argument whatever and then we do console do um log Json pass successfully yes Json pass successfully boom also so when you do comma it does um yeah okay so commas will give you an extra space but pluses will not Json part successfully boom and then comma Json object yes correct and we do accept we actually should do eror okay so interesting no it's try catch what am I doing dude try accept oh yeah so try catch okay just the same thing I guess different syntax but yeah error boom and do console that log boom boom yes that's clear and then we have to test it out so we do par Json and name David Andre ag21 we want to do valid okay so we do testing valid Json we can do then we do testing in valid Json and it will give me hopefully inv valid Json yes without the it's not closed curly bracket right so let's save it and let's test it out Json per successfully right line 63 oh okay so yeah it calls this but right I have to remember that it's like when the console is called not the line that executed yeah I mean this is the line that executed the console call but yeah not what led to it and then testing invalid Json right so we start with valid Json part successfully give it the Json oh wow this is nice you can click it and it's like um more visible format it nicely it's basically pared Json parsing failed syntax error expected comma or curly bracket 66 so yeah okay so this is a bit unlucky oh yeah nice that's good so this is good you know the error points you to the actual error not just not only to the line that CA the console but also the line that had the error so this is very nice for debugging okay so let's actually ask it can you can you please explain Json a bit I feel like it's integral to learning JavaScript yet I don't know much about Json I mean I know way more about Json than about JavaScript because you can use Json with other languages obviously but let's see if Chad GPT can give me something new something I did not know before certainly Json stands for JavaScript object notation okay so this is very uh related to our book object right here and this is basically Json wow javascri JavaScript object notation so how you basically how you do the syntax of objects is a lightweight data interchange format that is easy for humans to read and write and easy for machines to pass and generate you know much better than XML I can tell you that it is incred integral to Modern web development especially in JavaScript as it's commonly used for transmitting data in web applications key features of Json text format Json is purely a text form M that is language independent that's correct see Okay C family of languages wait let me just ask this I'm going to duplicate again and do a new channel what language is Javascript compiled in interesting JavaScript is not comp oh yes okay so this is yeah I mean I should have known this but again I'm learning everything from scratch here JavaScript is not compiled in another language rather it is an interpreted language this means that JavaScript code is executed directly by the JavaScript engine in the browser or environment like nodejs where it's running it doesn't need to be compiled into another language before execution this is different for languages like C or Java which are compiled into machine code wow so I'm just going to ask a very D question so then how does the computer understand JS if it's not compiled into machine code the JavaScript engine in a browser or environment like nodejs interprets and executes JavaScript code directly parsing when JavaScript code is run it is first passed read and analyzed by the JavaScript engine during this stage the code is converted into abstract syntax trees as you know what let's make it a bit more fun I'm just going to ask from now on let's make the learning a bit more fun instead of just explaining A New Concept give me a small project that utilizes that concept and teaches me it thoroughly let's start with the basics no need to rush let's start need to Basics um learning the fundamentals is the most deeply is the most important thing okay so yeah I mean really huh gbd4 message cap is this actually true did we actually use 40 messages so okay so one two one two and then we had the other chat so this is this is the main chat so free okay so free in other chats you're telling me like 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 21 bro it's not even it should be 40 the message cap should be 40 learn more dynamically what we're currently dynamically adjusting usage CS for gb4 as we learn more about demand this is crazy I'm paying for 40 messages every 3 hour yet I like only did 21 today and I'm already capped like this is a scam this is a straight up SC scam I I've heard other people say this I've had people in the comments say that they run into the cap while not being nowhere near the limit but personally you know I've never really experienced it but now it's clear 21 messages and we hit the cap instead of the 40 that they promis it it was you 50 like it's I don't know what happened it used to be 50 messages every 3 hours then they lowered it to 40 and now it's like dynamically adjusted and they just point you to a Google form or whatever sh shares form it's like what what is this man like just like I'm paying for 40 like why man I mean I do have you know this is luckily I have uh two I'm paying for Two jgb Plus accounts so anyway let's continue in here I want to learn JavaScript but let's make it fun explain a concept and then give me a small project to complete which will thoroughly teach me that concept never um never reveal the complete solution only give hints okay let's give it more context right now I'm a complete beginner I'm using using VSS code okay so actually you know let's give it some context because we're already in in this challenge so I go before you decide what project to give me ask me five uh questions that will help you understand just how much of a jazz beginner I I am cuz you know um I have we've done like all this stuff so I don't want to be repetitive but I want to implement the fun games like small projects CU sometimes like here we just kind of um you know copying basically just typing it manually what jgpt explains and that's not really engaging my brain uh as much as a small project right so let's Okay number one yes I know python C and Java today I am comfortable with those but not with the JS syntax number three I have but it's been a while number four kind of projects interest you the most anything that challenges me number five by actually building something that's just outside of my comfort zone okay let's see a classic project that's excellent for practicing dumb manipulation event handling and basic JavaScript logic is to create a simple to-do list application when I said small Pro projects are really meant small projects this is this is still quite extensive please return to the fundamentals of JS and JS give me five options to uh of Concepts to practice and then and only then um okay okay five options of Concepts to practice with three project ideas for each and then only after I tell you what concept we will focus on and what project I'm interested in you will give me more detailed steps again keep in mind that I am a JavaScript beginner I know basically nothing about the syntax I mean I know you know the programming side of things but still JavaScript syntax like this didn't give me that much practice right so I need more practice in that domain so let's see if this more detailed prompt gives us better chgb results now the crazy part is like given that we've ran out in 21 messages on my you know jbt Plus account for recording like this is my personal one so like how many do we get you know when you get back when it was 50 you knew it were getting 50 now you don't even know how much you get like after 21 messages I just ran out it's like I I'm going to make a video on that honestly it's kind of crazy like it's insane I mean isn't it illegal I mean I don't want to sound like you know OV exaggerated but like isn't it illegal to just you know declare one thing and then your product is different cuz like there's a big difference between 21 message cap and 4 day that's basically double so they give you half of what they promise like that's sketchy man that is sketchy okay variables and data types arrays and Loops functions conditional statements Dom manipulations it's I don't know like it feels like it's pushing for the Dom way too quickly currency converter temperature converter h calculator okay I mean we could do the currency converter and really like focus on the variables and data types let's do the currency converter project and really try to L try to teach me as much as possible about in this small project again keep it concise and easy the goal is to learn here also I have to be mindful to not waste messages you know ideally IDE I should tell you to always like propose free uh like always propose the next three things in the prompt because you know I don't want to waste my my message C because open ey is so stingy with letting you use their product I mean I I have the co- pallet but you can't you know it's not as good for learning as jgpt because it's like explains the concept so like that this is just for the code concept Focus variables and data types yes the basics I need to really like engrave the syntax into my head before we move on to you know advanced concepts like promises number streaks booleans of course currency converter project overview simple program that coms a fixed amount from one currency to another for Simplicity oh we're doing okay let's do a new file actually it's fun for each project new file declare variables right right so amount in USD 100 okay let USD amount we can do let's do 10,000 why not you know $10,000 that's like everybody's goal nowadays but once you reach it you realize that um it's not that crazy anyway conversion rate let conversion rate equals 0.73 okay now this is from you know Great British pound to dollar no from dollar to Great pound yeah yeah yeah okay so we have to be careful because if we apply it in other way we have to divide it by one like I mean one divided by this perform the conversion use a simple arithmetic operation okay let uh GBP amount that's crazy it recognize the conversion rate and predicted that this is Great British pound wow I'm actually shocked how good copilot is so we let's use the two you know values we have so obviously this is super simple we just multiply it USD amount times conversion rate yes and now we can do console. um log boom boom and let's go in here we actually can't see it right we have to update the index a um we have to change this right so we have to go for the currency yep save F5 and this is the amount 7,300 it works perfectly display the result okay this is an interesting syntax I've never used the syn syn tax before amount in USD yeah so this is kind of similar how you do F strings in Python basically makes it simpler so let's let's do that and then we do we have to do like it's all basically the same you but you don't change anything in Python you have to say it's F string in here you just um you know do curly brackets so let's do USD amount yeah exactly this and save oh it did not it did not output it maybe we have to put it into the single let's see nope interesting um hm why doesn't it it is the same right yes it is that's interesting okay so I have to I don't have not I don't have nodejs we will be using the browser method for this okay so this line is okay I have to put it is not doing what it's supposed to do it just outputting the raw string and not the variables by the way in all of your responses always suggest always suggest the next three small projects we could do that way we don't waste this super low gbd4 message cap okay so our back taks fixing the problem lies in the type of quotation marks okay okay so we do have to change something we cannot use normal quotes single yeah we cannot use single quotes or double quotes we have to back Texs and then okay oh so even the vs code shows it wow yeah yeah okay because before it was all you know orange showing the string but now it actually shows the amounts and the dollar oh okay so the that's kind of confusing but yeah so the dollar isn't for the USD the dollar is for the syntax okay yeah that makes sense yeah so it's not simpler than Python and now it works beautiful okay yep I did that wait what I mean that's kind of crazy I did not realize you can do this you can just put the JavaScript directly into the HTML interesting I mean obviously this is like the more professional way to do it just linking the script it's kind of cleaner also but yeah okay temperature converter simple h calculator basic quiz I mean um let's go back to all the project it suggested okay here what if we actually wait let's see conditional statements dumb manipulation Basics okay I'm just going to say all these projects are way too simple which is boring give me something slightly more challenging list out the next seven Concepts seven chest Concepts we have to learn and suggest three small yet fun projects for each really need to try to hit like the you know learning Optimum because the optimum learning is like 4% above your current skill level if it's too easy you get bored if it's too hard you get overwhelmed and you know you basically quit me you can push through but you don't learn as optimally right like if it's overwhelming confusing or just you don't understand anything that's bad you can't you know go and start I don't know building some super interactive websites and is your first day of JavaScript you want to something that's 4% just slightly above your comfort zone so that it challenges you but it doesn't bore you and it doesn't overwhelm you so let's see event and event handlers Create a quiz with multiple choice questions give me a project that combines all of the following and then we do all the basics cuz I just want to like go over it properly and just I don't know cuz when I tell chgb to make it like more advanced it goes way more advanced when I go simpler it's like super boring it's like really tough to nail it down the project shouldn't be long it needs to be quick however it should thoroughly and deeply go over all of the concepts I just mentioned we need to get to coding man like this project is what is this project bro this is just you know I don't know like jbt the issue with it is like it takes everything too literally it doesn't have a big overview of your current skill level and you know it it doesn't it never almost never nails that 4% push it either gives you something that's like way too overwhelming or long or something that's like super boring like this you know like sure let that's what we learned like let and multiplier I mean I guess the only useful you know is the the only useful part is this the dollar sign syntax so that we can embed the variables in the string mini quiz game okay series of questions multiple choice answers final score sure mini quiz game overview yes we use everything step-by-step guide declare your questions and answers I mean a question like this is just stupid honestly but this is good this is good use an array of objects to start a question oh okay so questions is an array and each of these is objects nice can actually generate these in like perplexity or whatever so I'm not wasting the message cap okay do this in JavaScript I'm going to show you what I'm doing so do this in JavaScript I put it on writing so it's not browsing the web um each question should be relevant to either AI or programming example we do this declare let's do use an array of 10 objects to store your 10 questions oops let's see I mean this should be running for from gbt 4 so should be very similar but yeah I mean on perplexity the message cab is like 500 a day or something so I don't know might be better off just using perplexity for this rather than open AI scam low cap okay oh come on this is cringe this is good yeah some of these are cringe some of these are good yes I'm just going to copy this copy um what is this project called actually mini quiz mini quiz okay new file mini quiz. JS boom can close these and we can replace this Domin quiz save and yeah okay so first see this um this is exactly like situations like this is exactly why where you should use AI like typing this out would take like 10 minutes and it's like why would I do that manually when AI can just do this and you know we have an array of 10 different questions it's amazing like all I have to understand is that brackets are for arrays and curly brackets are for objects and that this is a array of different objects okay that's great let's continue create a function to display questions and record answers H Loop through the the questions array to display each question and the choices use prompt huh alert to show okay so I mean do we just go like do we just go like randomly or how do we do this right check if the answer is correct using a conditional statement I mean simple okay sample code structure um okay so is this like too much prompt is I guess like input basically the equivalent of input in Python so I mean yeah we can just declare the score here we declare the constant which is questions okay so yeah that's a constant that doesn't change and then we do score equals z which is a variable which will change right um I mean it's unfortunate that it's doing like this because like this should be just like you maybe this is enough R does display question object oh okay so no so it's not random it