Guess The Brainrot!

I have finally completed my FIRST EVER HTML, CSS and JavaScript project. I did not know much coding before this and in terms of those three languages I did not even know the Syntax. But now I can confidently say I can make a project like this. I have added audio for correct and incorrect answers. Completion audio customised based on correct and incorrect answers. Added all the audios of the brainrots which play when you hover over the option. Changed the entire theme from before to match the brainrot theme. I see so many people have uploaded such great projects in the amount of time I took to make a simple one like this. But in the future I won’t procrastinate like I did before. Started this project on 1st June and now September is almost here. If I had not skipped for one month I could have completed it in less than ten hours. But here I am finally completing my first ever project and I am really excited to see what you all think of it.

Finally figured out how to add images. Added the images into my answer state so it fit neatly into my quiz question object. I ran into a problem where the images were too large and clipping out of the screen. Most of my time was spent trying to figure the CSS out to contain them all inside the img I made for them. Made it so that the entire container including the answers, question and all other elements adapt to fit the image so it doesn’t look weird if the image is too wide or too thin. Re made all the questions to match the new theme. Fixed a few CSS bugs I created while trying to fit the image in. Next step is going to be adding sounds whenever an answer is clicked. I plan on adding the sound of the correct brainrot. After that I will change the colours to match match the theme. Hopefully this project will be completed soon after months. I started this as soon as this event started. And because of my procrastination I am here. Thank you for reading!

Sad update. I procrastinated a lot and forgot everything I had learnt up to now. I just skimmed through my code and decided it would be a great idea to add images and sounds to the quiz and make it into something a little more unique than a generic quiz game. But because I procrastinated for an entire month I did not remember anything I did or learnt which led to me breaking the code instead of adding any features. Thankfully I had a commit so it’s not like I lost everything but I had to re learn everything which has taken away so many hours. My aim from this is to be able to retain all the things I learn and so I will try to do that. I was unable to add anything and instead wasted hours just breaking and failing to fix. I have done a lot of revision and have revised everything related to my javascript code. I have used artificial intelligence and made it act as a teacher to explain the code to me. It kind of does an amazing job at explaining concepts. Of course no code was written by AI as what is the point of spending hours to learn something just to have AI do it. I could do a few changes in the existing code of the tutorial and ship the project but I will not give up until the learn everything about what I did in the project and make it completely my own. And I will make sure I add images and sounds to it as well. Also for some reason the project has started displaying a folder instead of directly opening when I use live server I don’t know why this has happened. Maybe because I opened the previous folder as well.🤧

Well it has been a while since the last devlog. I got a new device to work on. Anyways now I completed the javascript part of the quiz. It was very complicated as I am a beginner and I am sure I won’t be able to replicate most of it if I tried blindly. Still I am going to try because why not? This is the point of the event anyway. A lot of logic was written a lot of things were used which I could not understand. I ran into a lot of bugs because my dumb brain thought it was a good idea to use my own variables instead of following the tutorial. Try out different things instead of doing what the tutorial said. Now I have made the commit and am going to break it all up and try to see how much I understood. Main goal will be to at least redo the UI and use my own themes and give it my touch through CSS and then I will change the questions and answers to a different topic then I will try to break the javascript and fix it. This is a bad idea but praise git.

EDIT:Just realised videos are not working in devlogs so replaced it.

The CSS part is turning out to be way easier than the html part. Maybe because most of it is just styling choices but i learnt a lot from this. I learnt that the browsers by default have their own margins so you first have to universally erase it. Then i learnt about the “box-sizing: border box” thing which is used so that the browser doesn’t increase the size of the box when padding is added. Then i learnt that we use the flex display to place the box perfectly in the centre. Then i experimented with the newly found units like rem, vh and px. Then i followed the tutorial to make the screen in the screenshot which is way better than what only html had to offer. Then i used AI to explain to me why the code was written this way and all the thoughts behind the decisions made. After that i remade everything on my own to see if i could think the way i am supposed to.

After that i have also made the other screens like the question page, result page, the answer containers and a lot more. I learnt to add transition effect for hovering and also learnt how to adjust the media according to the pixels available which are supposed to be used but according to the tutorial we will see them only after we move on to JS so i am looking forward to it. The parts i have not seen are not really solidified into my memory yet as i have not seen the results my inputs are producing so i will re write that part myself after i complete the JS part so that i am able to decide what the size of everything should be on my own as i will be able to visualise the size. I have properly done the first screen tho. Next devlog after completing the JS part. :0

EDIT: Just realised the vids are not working anymore so added a SS

So this is the first time i have ever tried html. My mistake was i jumped directly into projects without any basic learning of HTML because i knew basic coding already. But damn was i wrong, i had to use AI to help me understand each and every command used by the tutorial. Took me an hour just to follow along the tutorial while pausing and asking AI to explain what just happened. Then I tried to erase the code and remake it myself. After a full afternoon of trying i have finally understood the concept and what a developer is supposed to think step by step and i created the entire HTML part alone without the help of anything else and am finally confident i can remake this. Though i am yet to explore all that is possible as this is a very simple project. Gonna move on to CSS next and see what is it about. Hopefully I don’t spend as much time on it as i did with HTML with a code this small. Next devlog after completing the CSS portion.

PS:It’s kinda embarrassing that i only have this to show after four hours of work(it was way more than four hours as this doesn’t count me searching the internet and asking AI for explanations). I uploaded it because the resources said that i should upload once every 3 or 4 hours and i had finally completed the html part so i thought this is the time.