Commit 6fa003e

committed

add random emoji project

1 parent 1b8a8f0 commit 6fa003eCopy full SHA for 6fa003e

File tree

+96

-0

lines changed

+96

-0

lines changed

Lines changed: 18 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,18 @@`
	`1`	`+<!DOCTYPE html>`
	`2`	`+<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" />`
	`8`	`+ <title>Random Emoji</title>`
	`9`	`+ </head>`
	`10`	`+ <body>`
	`11`	`+ <h2>Random Emoji</h2>`
	`12`	`+ <div class="section">`
	`13`	`+ <button id="emoji-btn" class="emoji-btn">Click</button>`
	`14`	`+ <p id="emoji-name" class="emoji-name">Emoji Name</p>`
	`15`	`+ </div>`
	`16`	`+ <script src="index.js"></script>`
	`17`	`+ </body>`
	`18`	`+</html>`

Lines changed: 27 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,27 @@`
	`1`	`+const btnEl = document.getElementById("emoji-btn");`
	`2`	`+const emojiNameEl = document.getElementById("emoji-name");`
	`3`	`+`
	`4`	`+const emojis = [];`
	`5`	`+`
	`6`	`+const emojiAddFunction = async () => {`
	`7`	`+ let response = await fetch(`
	`8`	`+ "https://emoji-api.com/emojis?access_key=c026368c7be293ca27c373a38b0d4361494d257d"`
	`9`	`+ );`
	`10`	`+ data = await response.json();`
	`11`	`+ console.log(data);`
	`12`	`+`
	`13`	`+ for (let i = 0; i < 1500; i++) {`
	`14`	`+ emojis.push({`
	`15`	`+ name: data[i].unicodeName,`
	`16`	`+ character: data[i].character,`
	`17`	`+ });`
	`18`	`+ }`
	`19`	`+};`
	`20`	`+`
	`21`	`+emojiAddFunction();`
	`22`	`+`
	`23`	`+btnEl.addEventListener("click", () => {`
	`24`	`+ const randomNum = Math.floor(Math.random() * emojis.length);`
	`25`	`+ btnEl.innerText = emojis[randomNum].character;`
	`26`	`+ emojiNameEl.innerText = emojis[randomNum].name;`
	`27`	`+});`

Lines changed: 51 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,51 @@`
	`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;`
	`11`	`+}`
	`12`	`+`
	`13`	`+h2 {`
	`14`	`+ position: absolute;`
	`15`	`+ top: 0;`
	`16`	`+ padding-top: 140px;`
	`17`	`+ color: white;`
	`18`	`+ font-size: 2rem;`
	`19`	`+ text-align: center;`
	`20`	`+}`
	`21`	`+`
	`22`	`+.section{`
	`23`	`+ display: flex;`
	`24`	`+ flex-direction: column;`
	`25`	`+ justify-content: center;`
	`26`	`+ align-items: center;`
	`27`	`+}`
	`28`	`+`
	`29`	`+`
	`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;`
	`39`	`+}`
	`40`	`+`
	`41`	`+.emoji-btn:hover {`
	`42`	`+ filter: grayscale(0);`
	`43`	`+`
	`44`	`+}`
	`45`	`+`
	`46`	`+.emoji-name {`
	`47`	`+font-weight: 600;`
	`48`	`+ color: darkblue;`
	`49`	`+`
	`50`	`+}`
	`51`	`+`

Comments

(0)