3 Vanilla JS Projects in 1 hour - My Students Exam

In this video I will challenge myself and check If I can accomplish 3 vanilla javascript projects/tasks in two hours. I made these projects for my students exam and they told me that they did not fit in time. So I decided to challenge myself and see if I could do it in 2 hours.
I accomplished it in 1 hour and 15 minutes and spent additional 10 minutes for optimization.
Support me by subscribing - bit.ly/2xTQOI0
Follow me on social media:
/ thecodeholic
/ thecodeholic
/ thecodeholic
Check my Github:
github.com/the...

[@jameshello38]

Thanks man. Please do more js tutorials. How about building a framework in js series? I learned so much from your building php framework series.

[@TheCodeholic]

That's great idea. I am also thinking about that.

[@David-nk7pv]

@@TheCodeholic I also think it would be a great idea

[@hassan_codes]

@@TheCodeholic We'd love that. I'm so happy @freeCodeCamp published the full course on their channel to reach a larger audience. You're awesome!

[@mduzairfitness]

@@hassan_codes 😍👌

[@alexawunor8853]

@@TheCodeholic Please do it... Especially something like react or jquery library. It will really help us understand how all these frameworks work. or just create a library like jquery. That alone would be perfect. Thank you

[@sosojughashvili6297]

The only difference is that students couldn't do the tasks in 2 hours, whom are studying min 6 different subjects and are new to JS, and programmer who deals with similar projects on an everyday bases could do it only in one and a half hours* am I right?

[@TheCodeholic]

Good point, but I can't agree fully. My main point is that students do not spend enough time at home to practice in these types of projects. If student is well prepared I can guarantee that he can accomplish these tasks in less than 1 hour. (Faster than I did...) How this might happen, that student should be able to do these tasks in shorter time than me? During semester student does much more vanilla JS projects than I am doing. Recent times, I personally am more busy making code reviews and planing than writing code in vanilla javascript. I give students practical works similar to these ones and they have plenty of time to do the practical work/homework. They have all the necessary links and projects to focus on these types of practical work. This one is awesome: github.com/florinpop17/app-ideas They just need to work on their own AT HOME ENOUGH to feel comfortable enough doing these types of projects. Than it does not matter who has several years of experience. If student has practiced enough they will be able to do it in 1 hour. P.S It was not 1 hour and half, It was 1 hour and 16 minutes. Last 10 minutes are improving code. :)

[@BO-ny5mm]

Big big thanks! This tutorial is so helpful - learned so much and enjoyed watching it! I rarely have chance to see video like this - real example and real mind flow as you code. Thank you for the effort to do "extra work" for last lesson as cherry on top :))

[@TheCodeholic]

You're very welcome!

[@topalek]

привет, наконец то , новое видео. Спасибо))) ждем новых курсов. Не пропадай надолго

[@tarik9563]

I want to thank you for your work. the way you speak while explaining what you do did help me understand somethings.

[@Akosiyawin]

I will watch these later, I saw the documentation of tasks, Im gonna challenge my skills too if I can do this in 2 hours hahaha.

[@TheCodeholic]

Excellent decision

[@aydns7]

Thanks for the tutorial. A small suggestion, when the lessons are long we cannot focus on the lesson.

[@TheCodeholic]

Try to split and watch with break.

[@maxfrischdev]

With all respect Enes, that is a thing to improve on Your side, its attention and focus 😊👍🏻🖖🏻☕ And additionally, like The Codeholic replied, the magic of videocourses is that you can always Pause, Watch again and Change speed! 👍🏻💪🏻😎

[@AnDi-tx2xh]

I saw your full PHP course on Traversy Media and really liked it. Was a nice refresher. So then i came to your channel out of curiosity to check out your content. I was really interested in this exam. Its not always the case that you hear people having to take a js exam. I wonder if it is possible to do the first task just by using the object literal "let obj = {}" like this for example. As far as I know the class syntax is pretty new to javascript and for the longest time we did not have that. Not a big fan in general of the OOP ways, I don't know why I always found it weird and unnecessarily complicated If we have a look at an object created with the class syntax its exactly the same as creating an object literal. We do know that the class syntax in js is just syntactic sugar around the obj literal. In my opinion it was implemented for people who come from languages like java or C# to maybe have an easier time in javascript because the "{}" is pretty different compared to other languages. Also since this is a javascript exam maybe providing the CSS files to your students is not such a bad idea. Would save them time and let them forcus longer on the task itself rather then having to write CSS. if they provide the right classes to their HTML elements in the js then they should me able to build exactly what you requested.

[@TheCodeholic]

First task can actually be done without using classes, but the requirement was to use OOP. Why? Because OOP has many benefits over using let obj = {}; First of all. Classes are syntactic sugar, not for obj literal, but the constructor functions, added in 2015. (I think that's not new any more). When you create classes you create skeleton, what properties and methods should be give to the instances created of that class. When you create let obj = {}, you give these properties exactly at that time. If you need another object with the same methods later, you have to define these methods on obj2 later as well. Thank you for your comment. I think it is difficult to explain all this using comment so I might do a video on that.

[@AnDi-tx2xh]

You might be right. However i was referring to the class syntax not necessarily to the constructor functions as being new. But thts just my prefference of the old constructors and javascripts's unique way of dealing with objects in general.

[@MarcosEsqueda]

We need a OOP tutorials in JS. I hope some day i will be your student.

[@rimantasdanilevicius6754]

Maybe by chance you can share final code of this exercises? I am sure that I did some there type mistake, but cant find it, does not work task 2 :D

[@user-bm8ft1iv5t]

Top content! Thx

[@Frankslaboratory]

Hi, are you planning to make more JavaScript tutorials like this?

[@TheCodeholic]

Yes. I do plan. I also plan several hours Javascript course at the beginning of next year.

[@vaja5357]

In the 2nd exercise, what if we display = none the trs that don't match and display = block the ones that do?

[@vaja5357]

I think it's easier to implement

[@nagakalyan5065]

You are Genius 👏👏👏👏

[@TheCodeholic]

I am just a guy who thinks that he is very hard working person. But thank you. I really appreciate...

[@nagakalyan5065]

@@TheCodeholic your presence of code is some impressive and motivating sir.

[@chntrks]

Thank you 😀😀

[@TheCodeholic]

You're welcome 😊

[@Herclia]

Hello "The Codeholic" can you explain what kind of theme you use in VS Code, thanks

[@TheCodeholic]

I use these: marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme-icons

[@Herclia]

@@TheCodeholic Thank you ...

[@rajabhishek2936]

Awosem

[@BJK_kasva]

thanks Man

[@Sadboy80629]

Thanks it's not another hello world