5 Mini JavaScript Projects - For Beginners

Поделиться
HTML-код
  • Опубликовано: 21 ноя 2024

Комментарии • 127

  • @TechWithTim
    @TechWithTim  9 месяцев назад +9

    Get TypeAI PREMIUM now! Start your FREE trial by clicking the link here: bit.ly/TechWithTimFeb24

    • @djlclopez128
      @djlclopez128 9 месяцев назад +1

      Thank you for making beginner projects and for explaining everything in detail. I appreciate it!

    • @zixinzhang6157
      @zixinzhang6157 5 месяцев назад +1

      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
      }

  • @asi69420
    @asi69420 5 месяцев назад +43

    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

  • @espanglishGarage
    @espanglishGarage 7 месяцев назад +7

    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!!!

  • @viktoria7281
    @viktoria7281 7 месяцев назад +14

    + 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.

  • @mohammedshibil315
    @mohammedshibil315 6 месяцев назад +17

    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.

  • @zixinzhang6157
    @zixinzhang6157 5 месяцев назад +6

    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
    }

    • @learnMoreToCode
      @learnMoreToCode 4 месяца назад

      nice solution! what I just did here was disabling the button then making it clickable again after clicking stop button haha

  • @Chan-L-b7l
    @Chan-L-b7l 6 месяцев назад +2

    A long time of me searching for a project tutorial that's not 200+ lines of code, and is... actually practical

  • @MikeBora
    @MikeBora 9 месяцев назад +7

    Your explanations are so accurate, you've encountered every problem that a very new coder can get, amazing 🤩

  • @taaantin
    @taaantin 3 месяца назад +2

    Im trying to learn programming rn and eventhough the internet is full of information its surprisingly hard to find contend which i would deem as beginner friendly. Somehow you managed to make these projekts fun, informational and easy to understand for stupid people like me. I aprechieate that a lot. Tysm

  • @HA-sz8mu
    @HA-sz8mu 9 месяцев назад +10

    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  9 месяцев назад +2

      Glad you like it!

    • @HA-sz8mu
      @HA-sz8mu 9 месяцев назад +1

      @@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 7 месяцев назад

      @@HA-sz8muhows the journey so far?

  • @Big_chicken-ok8gc
    @Big_chicken-ok8gc 9 месяцев назад +7

    Amazing video! Finally the js video we all needed! Greatly appreciated Tim. ❤️

  • @MwapeMwelwa-wn9ed
    @MwapeMwelwa-wn9ed 9 месяцев назад +5

    Saving the video to come and use it during my project. Thank you so much.

  • @nathanielhollis7463
    @nathanielhollis7463 29 дней назад

    Trying to understand JS a little better. So I appreciate these short projects to help drive JS operations home. I picked up HTML and CSS quickly.
    Interesting you use "HTML:5" to start your HTML projects. I learned typing " ! " + tab will generate the same HTML opening. Same kind of concept with any HTML elements: h1 + tab will give you an open and close element for an h1. Or button...or any element. Saves me so much time!
    Anyways, thanks again for these HTML + JS projects!😊

  • @bryrivera2
    @bryrivera2 8 месяцев назад +3

    Suuuper helpful tutorials for learning js syntax, even for more experienced programmers. Thankss

  • @justchecking12
    @justchecking12 6 месяцев назад

    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

  • @shoaibshuja2004
    @shoaibshuja2004 7 месяцев назад +2

    This was wonderful Mr.Tim and thank you. Will you make intermediate projects following this video.

  • @Talkkwithmee
    @Talkkwithmee Месяц назад

    the last project went over my head for first time, had to watch it 3 4 times to actually know what's happening😂😂😂😂 great tutotrial✌✔❤

  • @joe2271
    @joe2271 9 месяцев назад +2

    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

  • @MikeCode-iy9sb
    @MikeCode-iy9sb 4 месяца назад +1

    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

  • @maqbollodhraofficial915
    @maqbollodhraofficial915 4 месяца назад

    Hii tim love from Pakistan ,i am Maqbol ahmad from Pakistan when i became a MERN stack developer ................. i wanted to be start work with you as a begineer devlper

  • @RightonBass
    @RightonBass 3 месяца назад

    Hey, wouldnt call it beginner friendly, but it gave me a different view of how to use Javascript therefore I appreciate it!

  • @franciscorios7374
    @franciscorios7374 6 месяцев назад +8

    Thanks!

  • @Suffynux
    @Suffynux 2 дня назад

    Best Video and Projects for beginner

  • @ocireocire
    @ocireocire 9 месяцев назад +4

    Pretty useful projects, i will give a try

  • @jyotipandey616
    @jyotipandey616 2 месяца назад

    Done with the first mini project, great video

  • @alimihakeem841
    @alimihakeem841 8 месяцев назад

    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"

  • @sompagnimdisankara4662
    @sompagnimdisankara4662 5 месяцев назад +2

    hey thank for your tutorial it was very well demonstrated

  • @softwhere07
    @softwhere07 9 месяцев назад +2

    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.

  • @Indian-cx5is
    @Indian-cx5is 9 месяцев назад +6

    Thank you so much 🙏😊🎉❤

  • @rahmanmusah4470
    @rahmanmusah4470 6 месяцев назад

    you are a fantastic teacher.
    you're my Kevin Powell for Javascript. more js content please. 😢❤

  • @livinginglass
    @livinginglass Месяц назад

    You can also use the live server with save typing so it automatically saves as you type

  • @FaunFunc
    @FaunFunc 9 месяцев назад +42

    Bro am making a 2d game engine using Javascript. Pray for me 😅

    • @rockerzhackers799
      @rockerzhackers799 9 месяцев назад +7

      Rip

    • @santoshshah1523
      @santoshshah1523 9 месяцев назад +1

      God bless you bro 😅

    • @MegaProggy
      @MegaProggy 9 месяцев назад

      Please give us a update

    • @FaunFunc
      @FaunFunc 9 месяцев назад +3

      @@MegaProggy will do. I'll be posting on my yt channel, sub to get notified 😊

    • @rahmanmusah4470
      @rahmanmusah4470 6 месяцев назад

      Ameen

  • @Mani_OnFire
    @Mani_OnFire 7 месяцев назад +1

    Hi Time, can you please make a video on simple portfolio using html, css and js for beginners.

  • @BenRogersWPG
    @BenRogersWPG 9 месяцев назад +1

    Great video!
    Tim, did you get a new keyboard?! It sounds different from your clicky one. It sounds so good!

    • @TechWithTim
      @TechWithTim  9 месяцев назад

      I did! Glad you like it.

  • @abbas_021
    @abbas_021 3 месяца назад +1

    Thanks, it was very helpful, and I really liked the theme. What's its name?

  • @YieFallah
    @YieFallah Месяц назад

    7:38 You can just type ! And hit tab key l, it'll generate the boilerplate

  • @levon9
    @levon9 5 месяцев назад +1

    Thank you for doing this, very helpful.

  • @DeltaXML_Ltd
    @DeltaXML_Ltd 9 месяцев назад

    Amazing video for those who need a bit of guidance!

  • @noorrehman6344
    @noorrehman6344 2 месяца назад

    Thanks sir for that great tutorial Love from Pakistan

  • @briandall8591
    @briandall8591 5 месяцев назад

    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. . . .

  • @HocusPolars
    @HocusPolars 2 месяца назад

    Shortcut to automatically write the html code at the start is exclamation mark and tab key
    ! + tab

  • @ReshtinZegham
    @ReshtinZegham 7 месяцев назад +1

    Awesome, thanks for the Tutorial

  • @not_amanullah
    @not_amanullah 8 месяцев назад +1

    thanks ❤

  • @KhatibiWorkStation
    @KhatibiWorkStation 5 месяцев назад +1

    amazing and easy to understand codes

  • @vaibhavydarshan4293
    @vaibhavydarshan4293 3 месяца назад

    this helped me out so much!

  • @siddharththeone09
    @siddharththeone09 3 месяца назад

    That car sound was the best part of video

  • @BenRogersWPG
    @BenRogersWPG 9 месяцев назад +2

    Great video!

  • @mahmoodhashemi21
    @mahmoodhashemi21 7 месяцев назад

    Thank you so much guru 😚😚

  • @xviewmytubex
    @xviewmytubex 8 месяцев назад

    Is JS designed so every script requires starting with variables, as most languages are? Great vid! Thanks! =)

  • @LesK-n2s
    @LesK-n2s 8 месяцев назад

    I love your videos! You should teach online with Bayvalley Tech

  • @Arhamjamshaid-f6g
    @Arhamjamshaid-f6g 2 месяца назад

    beautiful video

  • @SadicSsentongo
    @SadicSsentongo 5 месяцев назад

    Thanks tim .

  • @garrettsmith315
    @garrettsmith315 9 месяцев назад +1

    You should do these same projects with a few of the different front end frameworks. React first please!

    • @TechWithTim
      @TechWithTim  9 месяцев назад

      Great suggestion!

    • @garrettsmith315
      @garrettsmith315 9 месяцев назад

      @@TechWithTim I have a few more as a long time channel fan and budding developer myself! Reach out anytime!

  • @wastedlife4842
    @wastedlife4842 2 месяца назад +1

    The fact that in the STOP WATCH project you set minutes and seconds as const (not let), destroys my understanding of const vs. let ... I thought, const cannot change - yet it changes every seccond. :/

  • @tech_with_unknown
    @tech_with_unknown 9 месяцев назад

    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

  • @petresebastian8578
    @petresebastian8578 9 месяцев назад

    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 !

  • @GelzintVidaurre
    @GelzintVidaurre 9 месяцев назад +1

    Great job ❤️🔥🔥🔥

  • @jeseviso-s2u
    @jeseviso-s2u 20 дней назад

    Timi tatman the only guy who I watch the whole add.

  • @BiniVEVO
    @BiniVEVO 2 месяца назад

    what keyboard switches are you using?

  • @willlywillly
    @willlywillly 9 месяцев назад

    Thank you Tim for another great video! Can I contact for a consultation on a graduate degree? 👍

  • @xviewmytubex
    @xviewmytubex 8 месяцев назад

    Can different JS be used for these projects, or is your particular use related to some professional, current JS used in the industry? Thanks! =)

  • @WesamKhalil-wn5vc
    @WesamKhalil-wn5vc 4 месяца назад

    would any of these be worth putting on a resume for interships?

    • @donkeyblade
      @donkeyblade 4 месяца назад

      I wouldn't as these are learning projects but better than nothing

  • @Joe-qp9ix
    @Joe-qp9ix 3 месяца назад

    I paused the videos a few times and used switch/case instead of a while loop to loop through the quotes generator. But I couldn't figure out how to apply the usedIndexes variable to work with switch/case

  • @mavsocc
    @mavsocc 5 месяцев назад

    nice. javascript and ferraries.

  • @esrx7a
    @esrx7a 9 месяцев назад

    Hey Tim, you know what, we need to talk.
    Thank you.

  • @mdzunaed7414
    @mdzunaed7414 3 месяца назад

    which mechanichal switch are you using in this video?

  • @MahmoudMohamed-wj3ve
    @MahmoudMohamed-wj3ve 2 месяца назад

    I need to know the THEME u using for VS Code plzzzzzzzzzz

  • @deviiancee765
    @deviiancee765 Месяц назад

    whats your keyboard

  • @lucaskellerlive
    @lucaskellerlive 3 месяца назад

    Is value an HTML keyword? How did JS know value in this case was value from the input and not return undefined?

  • @mrfrkz1235
    @mrfrkz1235 4 месяца назад

    hey i like to know more about JS it possible can we have an meeting

  • @PabloSystemas
    @PabloSystemas 25 дней назад

    21:00 Yes, you totally lost me

  • @jayroche135
    @jayroche135 7 месяцев назад +1

    isn't the way you did the to-do list like.. a little over engineered?

    • @s_liyarli
      @s_liyarli 6 месяцев назад

      agreed bro

  • @awa9902
    @awa9902 3 месяца назад

    Is that thing called dom event??????

  • @Eswar.
    @Eswar. 9 месяцев назад

    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 9 месяцев назад

      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.

  • @ChrisLeftBlank
    @ChrisLeftBlank 9 месяцев назад

    '':52 wouldn't you go slow through the difficult problems?

  • @userXoxo_becky
    @userXoxo_becky Месяц назад

    my background color isn't showing

  • @EzraSchroeder
    @EzraSchroeder 6 месяцев назад

    @ 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 5 месяцев назад +1

      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.

  • @maicon484
    @maicon484 7 месяцев назад

    Nice good

  • @t.a-8469
    @t.a-8469 9 месяцев назад

    Civic 😊

  • @subatt
    @subatt 8 месяцев назад

    i do the same thing you do but not working

  • @christopherkeith2404
    @christopherkeith2404 4 месяца назад

    My buttons will not change colors

  • @ShamMohammdi
    @ShamMohammdi 5 месяцев назад

    Please be my mentor
    I lost my live no one to guide me😢😢😢😢😢

  • @shoaibshuja2004
    @shoaibshuja2004 7 месяцев назад

  • @laurenazareth39
    @laurenazareth39 8 месяцев назад

    Hi! Do you believe in God?

    • @Metamemesss
      @Metamemesss 8 месяцев назад +1

      are you hitting on tim?

    • @stephanieezat-panah7750
      @stephanieezat-panah7750 4 месяца назад

      hi. is this stupid?

    • @laurenazareth39
      @laurenazareth39 4 месяца назад

      @@stephanieezat-panah7750 For the ones who can't see the small details, yes it is.

  • @loosabway3400
    @loosabway3400 5 месяцев назад

    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 9 месяцев назад

    Saving the video to come and use it during my project. Thank you so much.

    • @boredape7304
      @boredape7304 9 месяцев назад +1

      do it now bro. by that time you would have better capacity to make better

  • @mehr8248
    @mehr8248 Месяц назад

    Thanks!