Learn JavaScript MOUSE EVENTS in 10 minutes! 🖱

แชร์
ฝัง
  • เผยแพร่เมื่อ 19 ธ.ค. 2024

ความคิดเห็น •

  • @BroCodez
    @BroCodez  ปีที่แล้ว +11

    // eventListener = Listen for specific events to create interactive web pages
    // events: click, mouseover, mouseout
    // .addEventListener(event, callback);
    const myBox = document.getElementById("myBox");
    myBox.addEventListener("click", event => {
    event.target.style.backgroundColor = "tomato";
    event.target.textContent = "OUCH! 🤕";
    });
    myBox.addEventListener("mouseover", event => {
    event.target.style.backgroundColor = "yellow";
    event.target.textContent = "Don't do it 😲";
    });
    myBox.addEventListener("mouseout", event => {
    event.target.style.backgroundColor = "lightgreen";
    event.target.textContent = "Click Me 😀";
    });


    Document


    Click Me 😀


    #myBox{
    background-color: lightgreen;
    width: 300px;
    height: 300px;
    font-size: 4.1rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    text-align: center;
    }

    • @masternobody1896
      @masternobody1896 ปีที่แล้ว +2

      yo make more video about how to get a job please

    • @user-sy9hm8cl2h
      @user-sy9hm8cl2h หลายเดือนก่อน

      @@masternobody1896 🤣🤣 same

  • @high.notes1
    @high.notes1 ปีที่แล้ว +34

    Bro I majorly respect you and I feel like you're working so hard to keep posting content for us. I feel like you should just be free to take a break whenever you feel like it because I know the amount of hard work you put into these videos.

    • @BroCodez
      @BroCodez  ปีที่แล้ว +27

      I appreciate that! Tbh I'm mentally exhausted 😩

    • @Chilli_Tea
      @Chilli_Tea ปีที่แล้ว +17

      @@BroCodez Have a break!!! More than enough content to keep us busy for a long while

  • @FlockofSmeagles
    @FlockofSmeagles 2 หลายเดือนก่อน

    I love how stark you are about the curly brackets. "click, event, do this."
    It really is as simple as breaking it down into. For the lack of a better phrase, common tongue.

  • @nikolasknappen4110
    @nikolasknappen4110 5 หลายเดือนก่อน

    Bro Code is the Best Code! Thank you for all that you do. You are a gentleman and a scholar.

  • @leshanelim9454
    @leshanelim9454 5 หลายเดือนก่อน

    thank you so much!! this helps a lot! my web development has improved significantly ever since i found your channel, and its only going to get better! i love the way you explain and show the code! kudos to you!!

  • @MohamedMuhumed-d8u
    @MohamedMuhumed-d8u 3 หลายเดือนก่อน

    the only mentor that made me fall in love with code

  • @tharunkumar8507
    @tharunkumar8507 11 หลายเดือนก่อน +2

    We would love your content. Thank you ❤ sir

  • @PyrdeXshorts
    @PyrdeXshorts ปีที่แล้ว +17

    Can you do this for Python also?

    • @Hnxzxvr
      @Hnxzxvr 7 หลายเดือนก่อน +1

      No I don’t thing so cause it doesn’t have a getelementbyid or getelementbyclass functions

  • @hellmn9490
    @hellmn9490 2 หลายเดือนก่อน

    your explanation is so good man

  • @KennethCox-or8bm
    @KennethCox-or8bm 5 หลายเดือนก่อน +1

    Thank you, these videos have helped me learn JavaScript. Please would you let us know which VSCode extension you're using to pull up your Emoji console... I love what you're doing Thanks Again!

  • @pietraderdetective8953
    @pietraderdetective8953 ปีที่แล้ว +1

    BroCode! lovin your videos!
    Any plan to make Zig videos? Looks to be the hype especially since people realizes Bun is made with Zig.
    cheers!

  • @leFrederic
    @leFrederic ปีที่แล้ว +3

    Bro sorry for my stupid question, but how can I add emojis on the HTML file just like you did at 1:00?

    • @BroCodez
      @BroCodez  ปีที่แล้ว +3

      Win + ;

    • @RanMC9918
      @RanMC9918 6 หลายเดือนก่อน

      @@BroCodez 🙏

    • @soaibakhtar815
      @soaibakhtar815 5 วันที่ผ่านมา

      Press windows + ;

  • @TapasShrestha
    @TapasShrestha 2 หลายเดือนก่อน

    awesome video sir , i always learn something new from your video . btw i have a question sir
    Whats the difference between using addeventlisterner and using .onclick , .onmouseover etc , its faster to use second option and easier too , event object also works on both methods , so which one should i use

  • @Snickerx
    @Snickerx 6 หลายเดือนก่อน

    Super Film!

    • @RanMC9918
      @RanMC9918 6 หลายเดือนก่อน

      most recent comment

  • @camishan8465
    @camishan8465 9 หลายเดือนก่อน

    This was awesome

  • @janlim9374
    @janlim9374 10 หลายเดือนก่อน

    very clear thank you

  • @jiyoungkim9258
    @jiyoungkim9258 ปีที่แล้ว

    this is so cute functions xD

  • @Belumga77
    @Belumga77 3 หลายเดือนก่อน

    you are my real bro

  • @liamlienhard8693
    @liamlienhard8693 ปีที่แล้ว +1

    how do you toggle between the original state and a custom state?

  • @SHAHIDZE_GAMING
    @SHAHIDZE_GAMING ปีที่แล้ว

    This is usefull

  • @FactzHub_00
    @FactzHub_00 ปีที่แล้ว

    Thankyou bro:)

  • @FushigiMigi
    @FushigiMigi 8 หลายเดือนก่อน

    Thanks!

  • @248h9
    @248h9 ปีที่แล้ว

    Can you make course for making spigot plugins?

  • @abdihamidmukhtar
    @abdihamidmukhtar 2 หลายเดือนก่อน

    How to add emojis in HTML using VS CODE? Please share thar with us because it is easier than using HTML emojis by using tags

  • @ahamednafees9961
    @ahamednafees9961 ปีที่แล้ว

    Everyone's getting an heart can i too bro?

  • @AsianCanadianInvestor
    @AsianCanadianInvestor 9 หลายเดือนก่อน

    how did you add that emoji on the html page?

    • @jabulanipolokera7027
      @jabulanipolokera7027 8 หลายเดือนก่อน

      press windows button and full stop button combination...you get emojis

  • @SHAHIDZE_GAMING
    @SHAHIDZE_GAMING ปีที่แล้ว

    Lucky you

  • @liamlienhard8693
    @liamlienhard8693 ปีที่แล้ว

    btw, is the an easy way to make an undo button?

    • @BroCodez
      @BroCodez  ปีที่แล้ว +2

      Ctrl + z my brother lol

  • @l213dhanesh3
    @l213dhanesh3 ปีที่แล้ว

    Code bro😊

  • @sergiocondo9585
    @sergiocondo9585 5 หลายเดือนก่อน

    Muy buen video, gracias

  • @essekgeldim
    @essekgeldim ปีที่แล้ว +1

    First

  • @sergiocondo9585
    @sergiocondo9585 5 หลายเดือนก่อน

    Buen dia, como hago para que aparezca los emojis?

  • @AshwinSI-px5yo
    @AshwinSI-px5yo 6 หลายเดือนก่อน

    How did you bring the emoji box in vs code ??

    • @RanMC9918
      @RanMC9918 6 หลายเดือนก่อน +1

      windows + "."