You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
eval("// Create a variable for the container to hold the emoji cards.\r\nconst emojiCardContainer = document.querySelector(\"#books\");\r\n\r\n// Create a variable for the emoji cards.\r\nlet emojiCard = \"\";\r\n\r\n// Run the random order function below on the data inside data.js. This will display the cards in a random order on the page every time the page is refreshed.\r\nshuffle(emojiItems);\r\n\r\n// Loop through the data from the data.js file and insert parts of the data into HTML. On each loop, we are appending a new card with the HTML below.\r\nfor (let i in emojiItems) {\r\n emojiCard +=\r\n \"<div class='emoji-card'><div class='emoji-card-wrapper'><div class='hint-container' tabindex='0'><i class='fas fa-question-circle'></i><p class='hint'><span class='type'>\" + emojiItems[i].year +\r\n \"</span></p></div><div class='emoji-images' tabindex='0'>\" + emojiItems[i].emojiImgs +\r\n \"</div><div class='emoji-card-title hide-card'>\";\r\n\r\n emojiCard += \"<div class='title-content'><h3>\" + emojiItems[i].title +\r\n \" (\" + emojiItems[i].year + \")\" + \"</h3><div class='author-container'><h4>\" + emojiItems[i].author + \"</h4></div>\";\r\n\r\n emojiCard += \"</div></div></div></div>\";\r\n\r\n}\r\n\r\n// Append the emoji card variable, which has all of the emoji cards to the initial variable we created that was for the container to hold the cards.\r\nemojiCardContainer.innerHTML = emojiCard;\r\n\r\n// Run Twemoji to change all emojis to Twitter emojis.\r\ntwemoji.parse(document.body);\r\n\r\n// Add the count of number of shows/movies to the footer.\r\ndocument.querySelector(\"footer span\").innerHTML = emojiItems.length;\r\n\r\n// Display movies and show in a random order, the random order will refresh on page reload. This function is used above before the cards are rendered on the page.\r\nfunction shuffle(array) {\r\n let currentIndex = array.length,\r\n temporaryValue,\r\n randomIndex;\r\n\r\n while (currentIndex !== 0) {\r\n randomIndex = Math.floor(Math.random() * currentIndex);\r\n currentIndex -= 1;\r\n temporaryValue = array[currentIndex];\r\n array[currentIndex] = array[randomIndex];\r\n array[randomIndex] = temporaryValue;\r\n }\r\n\r\n return array;\r\n}\r\n\r\n// Expand the emoji card when clicked to reveal the song name, artist and music video link.\r\nconst toggleShowCard = elem => elem && elem.classList.toggle(\"hide-card\");\r\ndocument.querySelectorAll(\".emoji-images\").forEach(elem => {\r\n elem.addEventListener(\"click\", function (e) {\r\n toggleShowCard(e.target.closest(\".emoji-images\").nextElementSibling);\r\n });\r\n});\r\n\r\nconst showHint = elem => elem && elem.classList.add(\"hint-reveal\");\r\nconst hideHint = elem => elem && elem.classList.remove(\"hint-reveal\");\r\ndocument.querySelectorAll(\".hint-container\").forEach(elem => {\r\n // Display a hint (type ie tv, movie or musical) when hovering over the question mark.\r\n elem.addEventListener(\"mousedown\", function (e) {\r\n showHint(e.target.closest(\".hint-container\").querySelector(\".hint\"));\r\n });\r\n elem.addEventListener(\"keypress\", function (e) {\r\n showHint(e.target.querySelector(\".hint\"));\r\n });\r\n\r\n // Hide hint (type ie tv, movie or musical) when the user stops hovering over the question mark.\r\n elem.addEventListener(\"mouseleave\", function (e) {\r\n hideHint(e.target.querySelector(\".hint\"));\r\n });\r\n elem.addEventListener(\"focusout\", function (e) {\r\n hideHint(e.target.querySelector(\".hint\"));\r\n });\r\n});\r\n\r\n\n\n//# sourceURL=webpack:///./app.js?");
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
21
+
<![endif]-->
22
+
<main>
23
+
<header>
24
+
<h1>EmojiPages</h1>
25
+
<divclass="heading-content">
26
+
<divclass="header">
27
+
<h2>A listing of books depicted through emojis. 💖</h2>
28
+
<p>Click on the emojis to reveal the book name, year and author!</p>
29
+
</div>
30
+
<divclass="contribute-callout">
31
+
<p>Want to add to EmojiPages? Head to Github! ✨</p>
0 commit comments