Learn JavaScript MOUSE EVENTS in 10 minutes! 🖱

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

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

  • @BroCodez
    @BroCodez  11 месяцев назад +10

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

      yo make more video about how to get a job please

    • @user-sy9hm8cl2h
      @user-sy9hm8cl2h 16 дней назад

      @@masternobody1896 🤣🤣 same

  • @high.notes1
    @high.notes1 11 месяцев назад +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  11 месяцев назад +26

      I appreciate that! Tbh I'm mentally exhausted 😩

    • @Chilli_Tea
      @Chilli_Tea 11 месяцев назад +17

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

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

    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.

  • @MohamedMuhumed-d8u
    @MohamedMuhumed-d8u 2 месяца назад

    the only mentor that made me fall in love with code

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

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

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

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

  • @PyrdeXshorts
    @PyrdeXshorts 11 месяцев назад +16

    Can you do this for Python also?

    • @Hnxzxvr
      @Hnxzxvr 6 месяцев назад +1

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

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

  • @tharunkumar8507
    @tharunkumar8507 10 месяцев назад +2

    We would love your content. Thank you ❤ sir

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

    your explanation is so good man

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

    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

  • @pietraderdetective8953
    @pietraderdetective8953 11 месяцев назад +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!

  • @liamlienhard8693
    @liamlienhard8693 11 месяцев назад +1

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

  • @leFrederic
    @leFrederic 11 месяцев назад +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  11 месяцев назад +3

      Win + ;

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

      @@BroCodez 🙏

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

    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

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

    Super Film!

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

      most recent comment

  • @248h9
    @248h9 11 месяцев назад

    Can you make course for making spigot plugins?

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

    This was awesome

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

    very clear thank you

  • @jiyoungkim9258
    @jiyoungkim9258 11 месяцев назад

    this is so cute functions xD

  • @SHAHIDZE_GAMING
    @SHAHIDZE_GAMING 11 месяцев назад

    This is usefull

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

    Thanks!

  • @AJ_Editz002
    @AJ_Editz002 11 месяцев назад

    Thankyou bro:)

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

    how did you add that emoji on the html page?

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

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

  • @SHAHIDZE_GAMING
    @SHAHIDZE_GAMING 11 месяцев назад

    Lucky you

  • @liamlienhard8693
    @liamlienhard8693 11 месяцев назад

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

    • @BroCodez
      @BroCodez  11 месяцев назад +2

      Ctrl + z my brother lol

  • @ahamednafees9961
    @ahamednafees9961 11 месяцев назад

    Everyone's getting an heart can i too bro?

  • @l213dhanesh3
    @l213dhanesh3 11 месяцев назад

    Code bro😊

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

    Muy buen video, gracias

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

    Buen dia, como hago para que aparezca los emojis?

  • @essekgeldim
    @essekgeldim 11 месяцев назад +1

    First

  • @AshwinSI-px5yo
    @AshwinSI-px5yo 5 месяцев назад

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

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

      windows + "."