DEV Community

Raja B
Raja B

Posted on

learn JavaScript DOM events, CSS hover effects, and random value generation Next part

#javascript #html #css 
const btn = document.querySelector("#emoji");

const emojis = [
  "๐Ÿ˜†",
  "๐Ÿ˜…",
  "๐Ÿคฃ",
  "๐Ÿ˜‚",
  "๐Ÿ˜€",
  "๐Ÿค‘",
  "๐Ÿคจ",
  "๐Ÿ™‚",
  "๐Ÿ˜Š",
  "๐Ÿ˜—",
  "๐Ÿ˜›",
  "๐Ÿ˜",
  "๐Ÿคฅ",
  "๐Ÿ˜ด",
  "๐Ÿฅบ",
  "๐Ÿ˜ง",
  "๐Ÿ˜‡",
  "๐Ÿ˜ณ",
  "๐Ÿ™ƒ",
  "๐Ÿฅด",
  "๐Ÿง",
  "๐Ÿคจ",
  "๐Ÿ˜’",
  "๐Ÿค”",
  "๐Ÿคญ",
  "๐Ÿฅฐ",
  "๐Ÿค",
  "๐Ÿ˜„",
  "๐Ÿค”",
  "๐Ÿคช",
  "๐Ÿฅฒ",
  "๐Ÿ˜ƒ",
  "๐Ÿ˜",
  "๐Ÿ˜ฌ",
];

btn.addEventListener("mouseover", () => {
  btn.innerText = emojis[Math.floor(Math.random() * emojis.length)];
});
Enter fullscreen mode Exit fullscreen mode

JavaScript

const btn = document.querySelector("#emoji");
Enter fullscreen mode Exit fullscreen mode

  • document = the webpage

  • querySelector() = finds an element

It finds

<div id="emoji">
Enter fullscreen mode Exit fullscreen mode

and stores it in btn

Think of it like:

Web Page

      โ†“

Find

<div id="emoji">

โ†“

btn
Enter fullscreen mode Exit fullscreen mode

2.

const emojis = [
 "๐Ÿ˜†",
 "๐Ÿ˜…",
 "๐Ÿคฃ",
 ...
];
Enter fullscreen mode Exit fullscreen mode

This is an array

It stores many emojis

Index

0 ๐Ÿ˜†

1 ๐Ÿ˜…

2 ๐Ÿคฃ

3 ๐Ÿ˜‚

4 ๐Ÿ˜€

5 ๐Ÿฅฐ

...
Enter fullscreen mode Exit fullscreen mode

3.

btn.addEventListener("mouseover", () => {
Enter fullscreen mode Exit fullscreen mode

This waits for an event

mouseover means:

"When the mouse enters this element"

Mouse

โ†“

๐Ÿ˜‚

โ†“

Run JavaScript
Enter fullscreen mode Exit fullscreen mode

4.

Math.random()
Enter fullscreen mode Exit fullscreen mode

Generates a random decimal number between 0 (inclusive) and 1 (exclusive)

Example:

0.23

0.81

0.45

0.02
Enter fullscreen mode Exit fullscreen mode

It changes every time

5.

Math.random() * emojis.length
Enter fullscreen mode Exit fullscreen mode

Suppose there are 35 emojis

Then:

0.45 ร— 35

=

15.75
Enter fullscreen mode Exit fullscreen mode

or

0.92 ร— 35

=

32.2
Enter fullscreen mode Exit fullscreen mode

6.

Math.floor()

Removes the decimal part

Example:

15.75

โ†“

15
Enter fullscreen mode Exit fullscreen mode 
32.2

โ†“

32
Enter fullscreen mode Exit fullscreen mode

So you get a valid array index

7.

emojis[Math.floor(Math.random() * emojis.length)]
Enter fullscreen mode Exit fullscreen mode

This picks a random emoji from the array

Example:

Random number

โ†“

12

โ†“

emojis[12]

โ†“

๐Ÿคฅ
Enter fullscreen mode Exit fullscreen mode

Next time:

Random

โ†“

25

โ†“

๐Ÿฅฐ
Enter fullscreen mode Exit fullscreen mode

8.

btn.innerText =

Changes the text inside the <div>

Initially:

๐Ÿ˜‚
Enter fullscreen mode Exit fullscreen mode

After hover:

๐Ÿฅฐ
Enter fullscreen mode Exit fullscreen mode

Again:

๐Ÿ˜„
Enter fullscreen mode Exit fullscreen mode

Flow of the program

Page Opens
      โ”‚
      โ–ผ
Show ๐Ÿ˜‚
      โ”‚
      โ–ผ
Mouse moves over emoji
      โ”‚
      โ–ผ
mouseover event fires
      โ”‚
      โ–ผ
Generate random number
      โ”‚
      โ–ผ
Pick random emoji
      โ”‚
      โ–ผ
Replace current emoji
      โ”‚
      โ–ผ
CSS hover effect
      โ”‚
      โ”œโ”€โ”€ scale(1.3)
      โ””โ”€โ”€ grayscale(0)
Enter fullscreen mode Exit fullscreen mode

Output:

https://raja000999-project-6ae1d0.gitlab.io/emoji.html

                   เฎ•เฏ‡เฎณเฏเฎตเฎฟ เฎ•เฏ‡เฎณเฏเฎ™เฏเฎ•เฎณเฏ???
Enter fullscreen mode Exit fullscreen mode

Do you have any questions??? or Feel free to ask questions???

Top comments (0)