5 Mini JavaScript Projects - For Beginners

  Рет қаралды 51,637

Tech With Tim

Tech With Tim

Күн бұрын

Get TypeAI PREMIUM now! Start your FREE trial by clicking the link here: bit.ly/TechWithTimFeb24
Today I will be walking you through 5 different JavaScript projects for beginners. These practical projects will take you about 15 - 20 minutes each. By the end of this video you will have 5 working applications complete with JavaScript, HTML, & CSS.
If you want to land a developer job: techwithtim.net/dev
If you want to learn Web 3 & Blockchain: algoexpert.io/blockchain (use code “tim”)
If you want learn Python & Go: programmingexpert.io/tim (use code “tim”)
Skool community for free resources: softwaredeveloperacademy.com
Discord server: / discord
🎞 Video Resources 🎞
Code In This Video: github.com/techwithtim/5-Mini...
⏳ Timestamps ⏳
00:00 | Overview
02:13 | Project Demos
05:09 | Environment Setup
06:43 | Color Flipper
30:21 | Palindrome Checker
45:43 | Random Quote Generator
01:02:34 | Stop Watch
01:19:20 | Persistent ToDo List
Hashtags
#techwithtim
#howtocode
#javascipt

Пікірлер: 90
@TechWithTim
@TechWithTim 4 ай бұрын
Get TypeAI PREMIUM now! Start your FREE trial by clicking the link here: bit.ly/TechWithTimFeb24
@djlclopez128
@djlclopez128 4 ай бұрын
Thank you for making beginner projects and for explaining everything in detail. I appreciate it!
@zixinzhang6157
@zixinzhang6157 12 күн бұрын
Hi Tim! Thank you for the wonderful projects!!! I found a way to solve the startTimer() funtion in the 4th project Stop Watch! You could use "return" instead of "stopTimer()" in the "startTimer()" function, because the "stopTimer()" lags the program for 1 sec, but "return" will just return the time and continue running! We also just need to add a "isPaused" variable and make it true when we clic "stop" to pause the program. let isPaused = true function startClock() { if (isPaused === true) { interval = setInterval(timer, 1000); isPaused = false; } if (isPaused === false) { if (interval) return; } interval = setInterval(timer, 1000); } function stopClock() { clearInterval(interval) isPaused = true }
@mohammedshibil315
@mohammedshibil315 2 ай бұрын
For the past month, I've been consistently tuning in to your videos, they are accommodating! Your dedication to creating valuable content is truly admirable. I just wanted to take a moment to commend you on your hard work and wish you all the success in building an even greater community.
@viktoria7281
@viktoria7281 2 ай бұрын
+ information about the Palindrome Checker project: const value = input.value; When you use ".value" to access the value of an input element, it retrieves whatever text or data the user has entered into that field. .value is a property in JavaScript that retrieves the current value of an input field in a form. Essentially, it returns the value entered into an HTML input element, such as a text box.
@espanglishGarage
@espanglishGarage 2 ай бұрын
Awesome video! Now for newbies > instead of typing html:5 you can simply type exclamation and hit enter. this ! and press enter, it will create same html template.... I LOVE this simple tutorials, they are easy to follow and we can learn a TON! Thanks Tim! Keep it up!!!
@zixinzhang6157
@zixinzhang6157 12 күн бұрын
Hi Tim! Thank you for the wonderful projects!!! I found a way to solve the startTimer() funtion in the 4th project Stop Watch! You could use "return" instead of "stopTimer()" in the "startTimer()" function, because the "stopTimer()" lags the program for 1 sec, but "return" will just return the time and continue running! We also just need to add a "isPaused" variable and make it true when we clic "stop" to pause the program. let isPaused = true function startClock() { if (isPaused === true) { interval = setInterval(timer, 1000); isPaused = false; } if (isPaused === false) { if (interval) return; } interval = setInterval(timer, 1000); } function stopClock() { clearInterval(interval) isPaused = true }
@MwapeMwelwa-wn9ed
@MwapeMwelwa-wn9ed 4 ай бұрын
Saving the video to come and use it during my project. Thank you so much.
@Big_chicken-ok8gc
@Big_chicken-ok8gc 4 ай бұрын
Amazing video! Finally the js video we all needed! Greatly appreciated Tim. ❤️
@GreenShinyPentagon
@GreenShinyPentagon Ай бұрын
A long time of me searching for a project tutorial that's not 200+ lines of code, and is... actually practical
@Indian-cx5is
@Indian-cx5is 4 ай бұрын
Thank you so much 🙏😊🎉❤
@joe2271
@joe2271 4 ай бұрын
Thanks for posting so many tutorial videos like this again Tim. Can you do an advanced Flask Series one of these days? Maybe even Flask with React?? I'll be a patreon or something LOL
@softwhere07
@softwhere07 4 ай бұрын
That to do list one seems pretty interesting. I wonder how you would do that one with python. I mean like the whole adding reminders and deleting them when done type thing.
@bryrivera2
@bryrivera2 3 ай бұрын
Suuuper helpful tutorials for learning js syntax, even for more experienced programmers. Thankss
@MikeBora
@MikeBora 4 ай бұрын
Your explanations are so accurate, you've encountered every problem that a very new coder can get, amazing 🤩
@levon9
@levon9 25 күн бұрын
Thank you for doing this, very helpful.
@franciscorios7374
@franciscorios7374 Ай бұрын
Thanks!
@MikeCode-iy9sb
@MikeCode-iy9sb 7 күн бұрын
I mean, I've watched tons of tutorial, and this one is like one of the best. It's so easy to understand, please continue making videos
@ReshtinZegham
@ReshtinZegham 2 ай бұрын
Awesome, thanks for the Tutorial
@ocireocire
@ocireocire 4 ай бұрын
Pretty useful projects, i will give a try
@sompagnimdisankara4662
@sompagnimdisankara4662 9 күн бұрын
hey thank for your tutorial it was very well demonstrated
@sportzeditz2023
@sportzeditz2023 2 ай бұрын
This was wonderful Mr.Tim and thank you. Will you make intermediate projects following this video.
@BenRogersWPG
@BenRogersWPG 4 ай бұрын
Great video!
@alimihakeem841
@alimihakeem841 3 ай бұрын
Thanks Tim. I love the way you explained in detailed. I'm just suggesting probably you should as well make some react projects. "Learn react by building 5 projects"
@Haccod-kg2ou
@Haccod-kg2ou 8 күн бұрын
for anyone who wants to know [what to learn before making projects]- 1)learn basics of html and css 2)Basics of JS 3)Basics of DOM manipulation and JS events
@DeltaXML_Ltd
@DeltaXML_Ltd 4 ай бұрын
Amazing video for those who need a bit of guidance!
@not_amanullah
@not_amanullah 3 ай бұрын
thanks ❤
@user-ko1cw6mv4q
@user-ko1cw6mv4q 4 ай бұрын
Great job ❤️🔥🔥🔥
@HA-sz8mu
@HA-sz8mu 4 ай бұрын
maaaaan, the level of detailed explanations is top notch! Pleaaaaase keep it up and upload more javascript projects, perhaps increasing the complexity slowly Love your content
@TechWithTim
@TechWithTim 4 ай бұрын
Glad you like it!
@HA-sz8mu
@HA-sz8mu 4 ай бұрын
@@TechWithTim OFCOURSE And the best part is that i saw you uploaded this right at the time when im learning Javascript 😂. So its just reinforcing a lot of the concepts Also, i was wondering why this hasn't gotten more comments or views considering the size of ur channel :) But i do hope more people benefit off this
@svnbeats6700
@svnbeats6700 2 ай бұрын
@@HA-sz8muhows the journey so far?
@user-rt4rp5yb4r
@user-rt4rp5yb4r 22 күн бұрын
Thanks tim .
@KhatibiWorkStation
@KhatibiWorkStation 16 күн бұрын
amazing and easy to understand codes
@rahmanmusah4470
@rahmanmusah4470 2 ай бұрын
you are a fantastic teacher. you're my Kevin Powell for Javascript. more js content please. 😢❤
@briandall8591
@briandall8591 11 күн бұрын
Hey @TechWithTim, I don't know if you could/should edit this one, or if (more likely) you could link to a new video you'd create where you do it, but could you demonstrate how you would add unit tests to these projects? I know there's multiple ways to do it, but I'm interested in what and how you'd choose to do it. . . .
@mahmoodhashemi21
@mahmoodhashemi21 2 ай бұрын
Thank you so much guru 😚😚
@Mani_OnFire
@Mani_OnFire 2 ай бұрын
Hi Time, can you please make a video on simple portfolio using html, css and js for beginners.
@justchecking2470
@justchecking2470 2 ай бұрын
you know what? I actually got better at syntax and troubleshooting while also learning data structures without having any js101 or any kind of lectures that begin intro to js. Project based learning is the way to go guys
@BenRogersWPG
@BenRogersWPG 4 ай бұрын
Great video! Tim, did you get a new keyboard?! It sounds different from your clicky one. It sounds so good!
@TechWithTim
@TechWithTim 4 ай бұрын
I did! Glad you like it.
@user-rg7ec9cn7d
@user-rg7ec9cn7d 3 ай бұрын
I love your videos! You should teach online with Bayvalley Tech
@xviewmytubex
@xviewmytubex 3 ай бұрын
Is JS designed so every script requires starting with variables, as most languages are? Great vid! Thanks! =)
@WesamKhalil-wn5vc
@WesamKhalil-wn5vc 2 күн бұрын
would any of these be worth putting on a resume for interships?
@tech_with_the_unknownguy
@tech_with_the_unknownguy 4 ай бұрын
hey Tim great video do you have any tips or tricks cuz i just posted 3 vids and wanna know how to make my channel like your channel
@xviewmytubex
@xviewmytubex 3 ай бұрын
Can different JS be used for these projects, or is your particular use related to some professional, current JS used in the industry? Thanks! =)
@FaunFunc
@FaunFunc 4 ай бұрын
Bro am making a 2d game engine using Javascript. Pray for me 😅
@rockerzhackers799
@rockerzhackers799 4 ай бұрын
Rip
@santoshshah1523
@santoshshah1523 4 ай бұрын
God bless you bro 😅
@MegaProggy
@MegaProggy 4 ай бұрын
Please give us a update
@FaunFunc
@FaunFunc 4 ай бұрын
@@MegaProggy will do. I'll be posting on my yt channel, sub to get notified 😊
@rahmanmusah4470
@rahmanmusah4470 2 ай бұрын
Ameen
@willlywillly
@willlywillly 4 ай бұрын
Thank you Tim for another great video! Can I contact for a consultation on a graduate degree? 👍
@mavsocc
@mavsocc 25 күн бұрын
nice. javascript and ferraries.
@EzraSchroeder
@EzraSchroeder Ай бұрын
@ 36:58 how come if i put the tags in the **head** instead of the bottom of the **body** it won't work?
@perrychamileke
@perrychamileke Ай бұрын
Because if their in the head together it'll load the javascript before the html so it's like the page isn't fully formed when it executes the code.
@petresebastian8578
@petresebastian8578 4 ай бұрын
Hi Tim! Can you do this kind of videos with Java? 5 mini projects or 20 maybe, idk. Thank you for your help and work!!! You are awesome !
@garrettsmith315
@garrettsmith315 4 ай бұрын
You should do these same projects with a few of the different front end frameworks. React first please!
@TechWithTim
@TechWithTim 4 ай бұрын
Great suggestion!
@garrettsmith315
@garrettsmith315 4 ай бұрын
@@TechWithTim I have a few more as a long time channel fan and budding developer myself! Reach out anytime!
@maicon484
@maicon484 2 ай бұрын
Nice good
@Eswar.
@Eswar. 4 ай бұрын
i have these skills ml,python,sql,nlp(basics),js,react js,express js ,tailwind,typescript (basic)prisma postgres.. suggest me some best projects to get my first job i graduated in 23 any suggestions and my biggest issue is i understand most of the things but cant code my self(tutorial hell ig) any help will be appreciated thanx
@deadlylive_gaming7154
@deadlylive_gaming7154 4 ай бұрын
do rethink about do developers really need to have the skills of can code each every thing that requires as as skills. i think most things are ok to be just knowing & understanding at specialist level , then the world is just acquiring to ai & low code tools.
@user-ts9ks8in2n
@user-ts9ks8in2n 4 ай бұрын
Hey Tim, you know what, we need to talk. Thank you.
@jayroche135
@jayroche135 2 ай бұрын
isn't the way you did the to-do list like.. a little over engineered?
@s_liyarli
@s_liyarli 2 ай бұрын
agreed bro
@user-be2bs1hy8e
@user-be2bs1hy8e 4 ай бұрын
'':52 wouldn't you go slow through the difficult problems?
@sportzeditz2023
@sportzeditz2023 2 ай бұрын
@subatt
@subatt 3 ай бұрын
i do the same thing you do but not working
@t.a-8469
@t.a-8469 4 ай бұрын
Civic 😊
@ShamMohammdi
@ShamMohammdi 22 күн бұрын
Please be my mentor I lost my live no one to guide me😢😢😢😢😢
@laurenazareth39
@laurenazareth39 3 ай бұрын
Hi! Do you believe in God?
@Aiden-sf3ns
@Aiden-sf3ns 3 ай бұрын
are you hitting on tim?
@loosabway3400
@loosabway3400 25 күн бұрын
Can't understand why you used a Set (with all of the added complexity size/length/inspecting contents etc )when you just could have compared the existing list to a new one?
@MwapeMwelwa-wn9ed
@MwapeMwelwa-wn9ed 4 ай бұрын
Saving the video to come and use it during my project. Thank you so much.
@boredape7304
@boredape7304 4 ай бұрын
do it now bro. by that time you would have better capacity to make better
Mastering JavaScript - EVERYTHING You Need To Know
13:28
Tech With Tim
Рет қаралды 25 М.
All The JavaScript You Need To Know For React
28:00
PedroTech
Рет қаралды 567 М.
孩子多的烦恼?#火影忍者 #家庭 #佐助
00:31
火影忍者一家
Рет қаралды 31 МЛН
Василиса наняла личного массажиста 😂 #shorts
00:22
Денис Кукояка
Рет қаралды 9 МЛН
Tom & Jerry !! 😂😂
00:59
Tibo InShape
Рет қаралды 60 МЛН
THEY made a RAINBOW M&M 🤩😳 LeoNata family #shorts
00:49
LeoNata Family
Рет қаралды 5 МЛН
Build this JS calculator in 15 minutes! 🖩
15:20
Bro Code
Рет қаралды 400 М.
Top 10 CSS One Liners That Will Blow Your Mind
13:34
developedbyed
Рет қаралды 915 М.
5 Javascript Projects to Build (For Beginners)
10:21
Andy Sterkowitz
Рет қаралды 297 М.
JavaScript Tutorial for Beginners [JS Crash Course 2024]
1:37:14
TechWorld with Nana
Рет қаралды 124 М.
How to MASTER Javascript FAST in 2023
12:49
Internet Made Coder
Рет қаралды 339 М.
100+ Web Development Things you Should Know
13:18
Fireship
Рет қаралды 1,4 МЛН
Backend, Frontend or DevOps? How to Decide!
16:54
Tech With Tim
Рет қаралды 76 М.
Python Generators Explained
28:37
Tech With Tim
Рет қаралды 146 М.
Python Object Oriented Programming (OOP) - For Beginners
53:06
Tech With Tim
Рет қаралды 3,3 МЛН
Python or JavaScript - Which One Should YOU Learn?
8:05
Tech With Tim
Рет қаралды 163 М.
孩子多的烦恼?#火影忍者 #家庭 #佐助
00:31
火影忍者一家
Рет қаралды 31 МЛН