5 Mini JavaScript Projects - For Beginners

Поділитися
Вставка
  • Опубліковано 21 лис 2024

КОМЕНТАРІ •

  • @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 😅

  • @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?

  • @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?

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