Skip to content

Commit 17eeae6

Browse files
sahandghavidelsahandghavidel
committed
update random emoji project
1 parent 6fa003e commit 17eeae6

File tree

3 files changed

+53
-63
lines changed

3 files changed

+53
-63
lines changed

‎projects/random-emoji/index.html

+11-11
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<link rel="stylesheet" href="style.css" />
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="style.css">
88
<title>Random Emoji</title>
9-
</head>
10-
<body>
9+
</head>
10+
<body>
1111
<h2>Random Emoji</h2>
1212
<div class="section">
13-
<button id="emoji-btn" class="emoji-btn">Click</button>
14-
<p id="emoji-name" class="emoji-name">Emoji Name</p>
13+
<button class="btn" id="btn">Click</button>
14+
<p class="emoji-name" id="emoji-name">Emoji Name</p>
1515
</div>
1616
<script src="index.js"></script>
17-
</body>
18-
</html>
17+
</body>
18+
</html>

‎projects/random-emoji/index.js

+13-13
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,27 @@
1-
const btnEl = document.getElementById("emoji-btn");
1+
const btnEl = document.getElementById("btn");
22
const emojiNameEl = document.getElementById("emoji-name");
33

4-
const emojis = [];
4+
const emoji = [];
55

6-
const emojiAddFunction = async () => {
6+
async function getEmoji() {
77
let response = await fetch(
8-
"https://emoji-api.com/emojis?access_key=c026368c7be293ca27c373a38b0d4361494d257d"
8+
"https://emoji-api.com/emojis?access_key=773b58f681fb786fafdb8392e8b8a75ddc177fd1"
99
);
10+
1011
data = await response.json();
11-
console.log(data);
1212

1313
for (let i = 0; i < 1500; i++) {
14-
emojis.push({
15-
name: data[i].unicodeName,
16-
character: data[i].character,
14+
emoji.push({
15+
emojiName: data[i].character,
16+
emojiCode: data[i].unicodeName,
1717
});
1818
}
19-
};
19+
}
2020

21-
emojiAddFunction();
21+
getEmoji();
2222

2323
btnEl.addEventListener("click", () => {
24-
const randomNum = Math.floor(Math.random() * emojis.length);
25-
btnEl.innerText = emojis[randomNum].character;
26-
emojiNameEl.innerText = emojis[randomNum].name;
24+
const randomNum = Math.floor(Math.random() * emoji.length);
25+
btnEl.innerText = emoji[randomNum].emojiName;
26+
emojiNameEl.innerText = emoji[randomNum].emojiCode;
2727
});

‎projects/random-emoji/style.css

+29-39
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,41 @@
1-
2-
body {
3-
font-family:'Courier New', Courier, monospace;
4-
padding: 0;
5-
margin: 0;
6-
display: flex;
7-
justify-content: center;
8-
align-items: center;
9-
height: 100vh;
10-
background: salmon;
1+
body{
2+
padding: 0;
3+
margin: 0;
4+
background: salmon;
5+
display: flex;
6+
flex-direction: column;
7+
justify-content: center;
8+
height: 100vh;
9+
align-items: center;
10+
font-family: 'Courier New', Courier, monospace;
1111
}
1212

13-
h2 {
14-
position: absolute;
15-
top: 0;
16-
padding-top: 140px;
17-
color: white;
18-
font-size: 2rem;
19-
text-align: center;
13+
h2{
14+
font-size: 2rem;
15+
color: aliceblue;
2016
}
2117

2218
.section{
23-
display: flex;
24-
flex-direction: column;
25-
justify-content: center;
26-
align-items: center;
19+
text-align: center;
2720
}
2821

22+
.btn{
23+
font-size: 5rem;
24+
border: none;
25+
background: rgb(255,255,255,.2);
26+
border-radius: 10px;
27+
padding: 15px;
28+
filter: grayscale();
29+
transition: filter .2s ease-in-out;
30+
cursor: pointer;
2931

30-
.emoji-btn {
31-
border: none;
32-
font-size: 5rem;
33-
background: rgba(255, 255, 255, 0.2);
34-
border-radius: 10px;
35-
filter: grayscale();
36-
padding: 15px;
37-
transition: filter 0.2s ease-in-out;
38-
cursor: pointer;
3932
}
4033

41-
.emoji-btn:hover {
42-
filter: grayscale(0);
43-
44-
}
45-
46-
.emoji-name {
47-
font-weight: 600;
48-
color: darkblue;
49-
34+
.btn:hover{
35+
filter: grayscale(0);
5036
}
5137

38+
.emoji-name{
39+
font-weight: 600;
40+
color: darkblue;
41+
}

0 commit comments

Comments
 (0)