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

# html# css# javascript
learn JavaScript DOM events, CSS hover effects, and random value generationRaja B

What does this project do? <html lang="en"> <head> <meta charset="UTF-8"...

What does this project do?

<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" 
content="width=device-width, 
initial-scale=1.0" />
    <title>Random Emojy</title>
    <link rel="stylesheet" href="styleEmoji.css" />
</head>

<body>
    <div id="emoji">😂</div>

    <script src="appEmoji.js"></script>

</body>

</html>
Enter fullscreen mode Exit fullscreen mode

<div id="emoji">😂</div>

This creates one emoji on the webpage.

Page

     😂
Enter fullscreen mode Exit fullscreen mode

The id="emoji" is used so JavaScript and CSS can find this element

CSS

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #ccc;
}

#emoji {
  font-size: 10rem;
  filter: grayscale(1);
  cursor: pointer;
  transition-property: transform, filter;
  transition-duration: 200ms;
}

#emoji:hover {
  transform: scale(1.3);
  filter: grayscale(0);
}
Enter fullscreen mode Exit fullscreen mode

1.

body 
{
  height: 100vh;
}
Enter fullscreen mode Exit fullscreen mode

means:

100 = Full height
vh = View Height
Enter fullscreen mode Exit fullscreen mode

So the body occupies the whole browser window

2.

display: flex;
Enter fullscreen mode Exit fullscreen mode

Makes the body a Flexbox container

Without Flexbox

😂
Enter fullscreen mode Exit fullscreen mode

With Flexbox

        😂
Enter fullscreen mode Exit fullscreen mode

3.

justify-content: center;
Enter fullscreen mode Exit fullscreen mode

Centers the content vertically

4.

align-items: center;
Enter fullscreen mode Exit fullscreen mode

Centers horizontally

Result:

-------------------------
|                       |
|                       |
|          😂           |
|                       |
|                       |
-------------------------
Enter fullscreen mode Exit fullscreen mode

5.

font-size: 10rem;
Enter fullscreen mode Exit fullscreen mode

Makes the emoji very large

😂

↓

😂😂😂 (Large size)
Enter fullscreen mode Exit fullscreen mode

6.

filter: grayscale(1);

Makes the emoji appear without color (grayscale)

😀

↓

⚪ Gray-looking emoji
Enter fullscreen mode Exit fullscreen mode

7.

cursor: pointer;

Changes the mouse cursor

Without:

Arrow
Enter fullscreen mode Exit fullscreen mode

With:

☝
Enter fullscreen mode Exit fullscreen mode

It tells the user the element is interactive

8.

transition-duration: 200ms;

Instead of changing instantly,

Small

↓

Large
Enter fullscreen mode Exit fullscreen mode

it changes smoothly

Hover CSS

#emoji:hover
 {
    transform: scale(1.3);
}
Enter fullscreen mode Exit fullscreen mode

When the mouse is over the emoji,

😂

↓

😆
Enter fullscreen mode Exit fullscreen mode

it becomes 30% larger

scale(1.3) means:

Original = 100%

↓

130%
Enter fullscreen mode Exit fullscreen mode 
filter: grayscale(0);
Enter fullscreen mode Exit fullscreen mode

Removes the grayscale effect

Before:

Gray Emoji
Enter fullscreen mode Exit fullscreen mode

After

😀 Full Color
Enter fullscreen mode Exit fullscreen mode