I was working on a project today, and practicing. I feel like I am learning to code without relying on youtube tutorials and ai as much. I feel like I am learning to not ask ai for the code, but to google better questions. I feel like my research skills is getting better with googling better questions, looking in documentation a little more, and using other resources before I go to ai and ask it for the code. Which lately I haven't really been asking ai these past few days now for the code. I will tell it don't give me code, but I will ask it how do you code a feature like this, for example, "There is a drop down menu. How do you code a drop down menu , and make sure this is how you it is coded in real world applications and projects, then I will look at the code, study it, figure out what was done step by step and how to do it step by step, sometimes I ask the ai for the html code and css code of that JS code it gave me and post it in a different vs code window and go to the live server and test it. Which recently I opened a new VS Code window for testing code before adapting it to my project. Then I will look at the code and figure out how to adapt and change it to my own specific project, like I will change the variables, or anything else that needs to be changes in my project, I will have different variables, and anything that needs to be adapted for my project ,but I look at the code I tested and adapt it based on my variable. i write the code, and don't just copy and paste and adapt to my specific variables and anything else. I am learning how not to ask ai the code, but ask it how a feature is coded and adapt that feature to my own project, and also ask it if there is a concept I don't understand, but first I go to google and get the answer of how to write a specific code and then I adapt the answer or solutions on google to my specific project. I also try to search concepts in documentation, which I don't always find what I am looking for in documentation, but I feel like I kind of in these past few days been getting better at reading searching documentation. I try to go to google, documentation, and even youtube first before going to ai. When I do go to ai which I do use is I will ask it how is a certain feature is coded in real projects and real world applications and then test the code in different vs code window, look at what steps to take based on that, and then sometimes comment out just to see what each code mean or does, and adapt that in my project where my VS Code project is at. I go to ai last when I couldn't find the answer, but I try not to ask it for code for my specific project but just a general example of how to code a certain feature.

I am starting over again in JavaScript because I realized and found out I didn't take my time and practice the basic concepts and fundamentals like I thought I was doing, and I see now that is important to practice the basic concepts and fundamentals and slow down. Today, I was practicing the basic concepts of JavaScript. I ran into an issue and solved it, and learned something new. I wanted to share what I learned. Today as I was practicing type casting/type conversion and trying to convert a string to a number, I wrote age = Number(age); for the age variable to convert it to a number. I also wrote gpa = Number(gpa); I was thinking to myself that I am writing it the way the tutorial is writing the code to convert data types. I finally figured out that it was because I placed the type conversions/type castings, age = Number(age); and gpa = Number(gpa); after the console.log. I learned the placement of where you put your type casting/type conversion affects whether you still get the same data type back in the console or if it changes to the data type you are converting it to. I also learned you refresh your browser after changing the position of the type conversions/casting because if you don't the browser will still give you back the same data type and not the converted data type you are trying to convert. I didn't know these 2 things until now as I am practicing the type version/type casting concept. I also was practicing textContent, writing sentences with template literals and curly braces, variables, data types. I also learned a lit but about Symbol data type and BigInt data type. I learned that we use Symbol data type mainly in objects, but I think they can be used in any other data type and anywhere. Symbols are used to create unique key so no properties or id or any values don't overwrite the other and they all have their own unique id. If you wanted to write two or more email or id even with the same description in the parenthesis, the Symbol will allow you to assign a unique key so no value or property overwrite each other and every value and property can all coexist together.

I was coding and practicing a project and I learned some new things as I was coding. It was very fascinating, I am working on a digital clock project in JavaScript, and I learned there was two ways to write the JavaScript logic. You can write the JavaScript logic for the toggle either with your custom logic ai give you or you know how to write or the second way is to use the built in strategy like with the toggle and connecting it to the time on the main clock section, you can also use the Intl.DateTimeFormat. I also learned that with intl.DateTimeFormat api, there is two ways to write it. One of the ways was using a fixed string , but your time will be static and not update,and the other was using new Date() which will change your time live on screen, but the newDate(); doesn't format two different times for the 12 hour and 24 hour format until it turns 1 pm. I chose to go with the Intl.DateTime and newDate(); method. I also learned when I first started with this digital clock I had to start over and over because I kept running into this same bug where the city and time values would display before you click the show city button. I tried a lot of methods to debug, I tried commenting out, using breakpoints,looking at local scope, and looking at the call stack, I tried more debugging strategies. I also tried ai over and over and looking in documentation. I tried asking ai to create a mini project around the problem, and that helped at first. Then I asked ai how it would code my version of the project, and it showed me the code for html, css,JavaScript, and I commented out or removed my other code tested ai version of this digital clock, and found the reason for this bug was because I didn't include the city.display = 'none' or hide, but I didn't include the city.display to none or hide or block, it was one of those three for this issue, and the second issue for this was I needed to set an interval, and both of them needed to be in the citySelect where the cities were in the drop down because you don't want the city and time to show on screen before users select the city and press the show city button.

These few days of learning React and React 19, I learned state management, styling options in React, tanstack query, react router: The purpose of state management is when multiple components need to share data, when you notice there may be prop drilling or you need to pass props down to other components(even if all of the components don't use the prop), and also Styling options is like the styles to style each component, your app, and website. This is just like CSS except this is for React and there are multiple options to style in React and React 19. The traditional CSS and module css is different because in traditional css, you have to give each thing with the same class different name, like if you have the button class, you have to name one of them button 1 , button 2, or just differentiate the name if there are things that are the same thing, but in modules css, you can have the same components and name it a name and it won't affect the other components that are the same thing. (I hope I am explaining this the right way.) The purpose of Tanstack Query is to fetch data, cache and store data. Tanstack query works with asynchronous data. (Asynchronous data means the data don't show up or come immediately in the app or browser, it takes time.) Tanstack Query is used when your app or website talk to servers a lot and you want the website or app to feel fast and be fast and smooth for the user while the tanstack is talking to the server. You also use tasnstack query when there is certain data that needs to be constantly updated on the screen or just updated. You don't use Tanstack query when your website or app isn't talking to servers a lot or certain data don't need to be updated constantly. The purpose of React Router is when you have a website that has multiple pages and the user can go to different pages. There is a homepage, about us page, contact us page, testimonials page, or any page. I also learned even though I am not done with the React guide in the Senior Dev Accelerator and the React Course on Udemy is that to create a website in React, it is divided up into two categories. The two categories are for pages that is gone show on every page the visitor go to like the navigation bar, the footer, the header, and these go in the layout in the app.js.

I was studying the React Course/React guide, and I learned something new today about React. I learned that Fragment is a built in React component that groups html elements (h1 tags, p tags, buttons, and any html element that can make up the web page.) together. You only use the fragment tag when you want to group together html elements like h1, paragraphs, buttons and any html element that make up the webpage , and also when you don't need to style the container or section in CSS and also when you don't need to style the html elements as a group, but if you are going to style the html elements individually in CSS (buttons, h1, paragraphs etc.) then you can use the fragment. I also learned that the fragment is written like this <> </>, and the html elements go between the opening and closing fragment tag.