0%
\n\n \n \n\n"
},
{
"path": "blurry-loading/script.js",
"content": "const loadText = document.querySelector('.loading-text')\nconst bg = document.querySelector('.bg')\n\nlet load = 0\n\nlet int = setInterval(blurring, 30)\n\nfunction blurring() {\n load++\n\n if (load > 99) {\n clearInterval(int)\n }\n\n loadText.innerText = `${load}%`\n loadText.style.opacity = scale(load, 0, 100, 1, 0)\n bg.style.filter = `blur(${scale(load, 0, 100, 30, 0)}px)`\n}\n\n// https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers\nconst scale = (num, in_min, in_max, out_min, out_max) => {\n return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min\n}\n"
},
{
"path": "blurry-loading/style.css",
"content": "@import url('https://fonts.googleapis.com/css?family=Ubuntu');\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Ubuntu', sans-serif;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100vh;\n overflow: hidden;\n margin: 0;\n}\n\n.bg {\n background: url('https://images.unsplash.com/photo-1576161787924-01bb08dad4a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2104&q=80')\n no-repeat center center/cover;\n position: absolute;\n top: -30px;\n left: -30px;\n width: calc(100vw + 60px);\n height: calc(100vh + 60px);\n z-index: -1;\n filter: blur(0px);\n}\n\n.loading-text {\n font-size: 50px;\n color: #fff;\n}\n"
},
{
"path": "button-ripple-effect/index.html",
"content": "\n\n \n \n \n \n \n \n\n
\n\n \n \n\n"
},
{
"path": "content-placeholder/script.js",
"content": "const header = document.getElementById('header')\nconst title = document.getElementById('title')\nconst excerpt = document.getElementById('excerpt')\nconst profile_img = document.getElementById('profile_img')\nconst name = document.getElementById('name')\nconst date = document.getElementById('date')\n\nconst animated_bgs = document.querySelectorAll('.animated-bg')\nconst animated_bg_texts = document.querySelectorAll('.animated-bg-text')\n\nsetTimeout(getData, 2500)\n\nfunction getData() {\n header.innerHTML =\n '\n
\n \n \n
\n\n \n \n \n \n
\n \n![\"\"](\"https://images.unsplash.com/photo-1496181133206-80ce9b88a853?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2102&q=80\")
'\n title.innerHTML = 'Lorem ipsum dolor sit amet'\n excerpt.innerHTML =\n 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore perferendis'\n profile_img.innerHTML =\n '![\"\"](\"https://randomuser.me/api/portraits/men/45.jpg\")
'\n name.innerHTML = 'John Doe'\n date.innerHTML = 'Oct 08, 2020'\n\n animated_bgs.forEach((bg) => bg.classList.remove('animated-bg'))\n animated_bg_texts.forEach((bg) => bg.classList.remove('animated-bg-text'))\n}\n"
},
{
"path": "content-placeholder/style.css",
"content": "@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n background-color: #ecf0f1;\n font-family: 'Roboto', sans-serif;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100vh;\n overflow: hidden;\n margin: 0;\n}\n\nimg {\n max-width: 100%;\n}\n\n.card {\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);\n border-radius: 10px;\n overflow: hidden;\n width: 350px;\n}\n\n.card-header {\n height: 200px;\n}\n\n.card-header img {\n object-fit: cover;\n height: 100%;\n width: 100%;\n}\n\n.card-content {\n background-color: #fff;\n padding: 30px;\n}\n\n.card-title {\n height: 20px;\n margin: 0;\n}\n\n.card-excerpt {\n color: #777;\n margin: 10px 0 20px;\n}\n\n.author {\n display: flex;\n}\n\n.profile-img {\n border-radius: 50%;\n overflow: hidden;\n height: 40px;\n width: 40px;\n}\n\n.author-info {\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n margin-left: 10px;\n width: 100px;\n}\n\n.author-info small {\n color: #aaa;\n margin-top: 5px;\n}\n\n.animated-bg {\n background-image: linear-gradient(\n to right,\n #f6f7f8 0%,\n #edeef1 10%,\n #f6f7f8 20%,\n #f6f7f8 100%\n );\n background-size: 200% 100%;\n animation: bgPos 1s linear infinite;\n}\n\n.animated-bg-text {\n border-radius: 50px;\n display: inline-block;\n margin: 0;\n height: 10px;\n width: 100%;\n}\n\n@keyframes bgPos {\n 0% {\n background-position: 50% 0;\n }\n\n 100% {\n background-position: -150% 0;\n }\n}\n"
},
{
"path": "custom-range-slider/.vscode/settings.json",
"content": "{\n \"liveServer.settings.port\": 5501\n}"
},
{
"path": "custom-range-slider/index.html",
"content": "\n\n \n \n \n \n Custom Range Slider
\n\n \n \n
\n\n \n \n\n"
},
{
"path": "custom-range-slider/script.js",
"content": "const range = document.getElementById('range')\n\nrange.addEventListener('input', (e) => {\n const value = +e.target.value\n const label = e.target.nextElementSibling\n\n const range_width = getComputedStyle(e.target).getPropertyValue('width')\n const label_width = getComputedStyle(label).getPropertyValue('width')\n\n const num_width = +range_width.substring(0, range_width.length - 2)\n const num_label_width = +label_width.substring(0, label_width.length - 2)\n\n const max = +e.target.max\n const min = +e.target.min\n\n const left = value * (num_width / max) - num_label_width / 2 + scale(value, min, max, 10, -10)\n\n label.style.left = `${left}px`\n\n\n label.innerHTML = value\n})\n\n// https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers\nconst scale = (num, in_min, in_max, out_min, out_max) => {\n return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;\n }"
},
{
"path": "custom-range-slider/style.css",
"content": "@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);\n font-family: 'Lato', sans-serif;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100vh;\n overflow: hidden;\n margin: 0;\n}\n\nh2 {\n position: absolute;\n top: 10px;\n}\n\n.range-container {\n position: relative;\n}\n\ninput[type='range'] {\n width: 300px;\n margin: 18px 0;\n -webkit-appearance: none;\n}\n\ninput[type='range']:focus {\n outline: none;\n}\n\ninput[type='range'] + label {\n background-color: #fff;\n position: absolute;\n top: -25px;\n left: 110px;\n width: 80px;\n padding: 5px 0;\n text-align: center;\n border-radius: 4px;\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n}\n\n/* Chrome & Safari */\ninput[type='range']::-webkit-slider-runnable-track {\n background: purple;\n border-radius: 4px;\n width: 100%;\n height: 10px;\n cursor: pointer;\n}\n\ninput[type='range']::-webkit-slider-thumb {\n -webkit-appearance: none;\n height: 24px;\n width: 24px;\n background: #fff;\n border-radius: 50%;\n border: 1px solid purple;\n margin-top: -7px;\n cursor: pointer;\n}\n\n/* Firefox */\ninput[type='range']::-moz-range-track {\n background: purple;\n border-radius: 4px;\n width: 100%;\n height: 13px;\n cursor: pointer;\n}\n\ninput[type='range']::-moz-range-thumb {\n -webkit-appearance: none;\n height: 24px;\n width: 24px;\n background: #fff;\n border-radius: 50%;\n border: 1px solid purple;\n margin-top: -7px;\n cursor: pointer;\n}\n\n/* IE */\ninput[type='range']::-ms-track {\n background: purple;\n border-radius: 4px;\n width: 100%;\n height: 13px;\n cursor: pointer;\n}\n\ninput[type='range']::-ms-thumb {\n -webkit-appearance: none;\n height: 24px;\n width: 24px;\n background: #fff;\n border-radius: 50%;\n border: 1px solid purple;\n margin-top: -7px;\n cursor: pointer;\n}\n"
},
{
"path": "dad-jokes/index.html",
"content": "\n\n \n \n \n \n \n
\n \n \n\n"
},
{
"path": "dad-jokes/script.js",
"content": "const jokeEl = document.getElementById('joke')\nconst jokeBtn = document.getElementById('jokeBtn')\n\njokeBtn.addEventListener('click', generateJoke)\n\ngenerateJoke()\n\n// USING ASYNC/AWAIT\nasync function generateJoke() {\n const config = {\n headers: {\n Accept: 'application/json',\n },\n }\n\n const res = await fetch('https://icanhazdadjoke.com', config)\n\n const data = await res.json()\n\n jokeEl.innerHTML = data.joke\n}\n\n// USING .then()\n// function generateJoke() {\n// const config = {\n// headers: {\n// Accept: 'application/json',\n// },\n// }\n\n// fetch('https://icanhazdadjoke.com', config)\n// .then((res) => res.json())\n// .then((data) => {\n// jokeEl.innerHTML = data.joke\n// })\n// }\n"
},
{
"path": "dad-jokes/style.css",
"content": "@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n background-color: #686de0;\n font-family: 'Roboto', sans-serif;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100vh;\n overflow: hidden;\n margin: 0;\n padding: 20px;\n}\n\n.container {\n background-color: #fff;\n border-radius: 10px;\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1);\n padding: 50px 20px;\n text-align: center;\n max-width: 100%;\n width: 800px;\n}\n\nh3 {\n margin: 0;\n opacity: 0.5;\n letter-spacing: 2px;\n}\n\n.joke {\n font-size: 30px;\n letter-spacing: 1px;\n line-height: 40px;\n margin: 50px auto;\n max-width: 600px;\n}\n\n.btn {\n background-color: #9f68e0;\n color: #fff;\n border: 0;\n border-radius: 10px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1);\n padding: 14px 40px;\n font-size: 16px;\n cursor: pointer;\n}\n\n.btn:active {\n transform: scale(0.98);\n}\n\n.btn:focus {\n outline: 0;\n}\n"
},
{
"path": "double-click-heart/index.html",
"content": "\n\n \n \n \n \n \n Don't Laugh Challenge
\n// Joke goes here
\n \n Double click on the image to it
\n You liked it 0 times\n\n \n\n \n \n\n" }, { "path": "double-click-heart/script.js", "content": "const loveMe = document.querySelector('.loveMe')\nconst times = document.querySelector('#times')\n\nlet clickTime = 0\nlet timesClicked = 0\n\nloveMe.addEventListener('click', (e) => {\n if(clickTime === 0) {\n clickTime = new Date().getTime()\n } else {\n if((new Date().getTime() - clickTime) < 800) {\n createHeart(e)\n clickTime = 0\n } else {\n clickTime = new Date().getTime()\n }\n }\n})\n\nconst createHeart = (e) => {\n const heart = document.createElement('i')\n heart.classList.add('fas')\n heart.classList.add('fa-heart')\n\n const x = e.clientX\n const y = e.clientY\n\n const leftOffset = e.target.offsetLeft\n const topOffset = e.target.offsetTop\n\n const xInside = x - leftOffset\n const yInside = y - topOffset\n\n heart.style.top = `${yInside}px`\n heart.style.left = `${xInside}px`\n\n loveMe.appendChild(heart)\n\n times.innerHTML = ++timesClicked\n\n setTimeout(() => heart.remove(), 1000)\n}" }, { "path": "double-click-heart/style.css", "content": "@import url('https://fonts.googleapis.com/css?family=Oswald');\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Oswald', sans-serif;\n text-align: center;\n overflow: hidden;\n margin: 0;\n}\n\nh3 {\n margin-bottom: 0;\n text-align: center;\n}\n\nsmall {\n display: block;\n margin-bottom: 20px;\n text-align: center;\n}\n\n.fa-heart {\n color: red;\n}\n\n.loveMe {\n height: 440px;\n width: 300px;\n background: url('https://images.unsplash.com/photo-1504215680853-026ed2a45def?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80')\n no-repeat center center/cover;\n margin: auto;\n cursor: pointer;\n max-width: 100%;\n position: relative;\n box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);\n overflow: hidden;\n}\n\n.loveMe .fa-heart {\n position: absolute;\n animation: grow 0.6s linear;\n transform: translate(-50%, -50%) scale(0);\n}\n\n@keyframes grow {\n to {\n transform: translate(-50%, -50%) scale(10);\n opacity: 0;\n }\n}\n" }, { "path": "double-vertical-slider/index.html", "content": "\n\n \n \n \n \n \n\n \n
\n \n \n \n \n\n \n \n\n"
},
{
"path": "drag-n-drop/script.js",
"content": "const fill = document.querySelector('.fill')\nconst empties = document.querySelectorAll('.empty')\nconst body = document.body\n\nbody.addEventListener('dragstart', dragStart)\nbody.addEventListener('dragend', dragEnd)\n\nfor(const empty of empties) {\n empty.addEventListener('dragover', dragOver)\n empty.addEventListener('dragenter', dragEnter)\n empty.addEventListener('dragleave', dragLeave)\n empty.addEventListener('drop', dragDrop)\n}\n\nfunction dragStart(e) {\n if(!e.target.classList.contains(\"fill\")) {\n e.preventDefault()\n return\n }\n fill.className += ' hold' \n setTimeout(() => fill.className = 'invisible', 0)\n}\n\nfunction dragEnd() {\n fill.className = 'fill'\n}\n\nfunction dragOver(e) {\n e.preventDefault()\n}\n\nfunction dragEnter(e) {\n e.preventDefault()\n this.className += ' hovered'\n}\n\nfunction dragLeave() {\n this.className = 'empty'\n}\n\nfunction dragDrop() {\n this.className = 'empty'\n this.append(fill)\n}"
},
{
"path": "drag-n-drop/style.css",
"content": "* {\n box-sizing: border-box;\n}\n\nbody {\n background-color: steelblue;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100vh;\n overflow: hidden;\n margin: 0;\n}\n\n.empty {\n height: 150px;\n width: 150px;\n margin: 10px;\n border: solid 3px black;\n background: white;\n}\n\n.fill {\n background-image: url('https://source.unsplash.com/random/150x150');\n height: 145px;\n width: 145px;\n cursor: pointer;\n}\n\n.hold {\n border: solid 5px #ccc;\n}\n\n.hovered {\n background-color: #333;\n border-color: white;\n border-style: dashed;\n}\n\n@media (max-width: 800px) {\n body {\n flex-direction: column;\n }\n}\n"
},
{
"path": "drawing-app/index.html",
"content": "\n\n \n \n \n \n \n \n 10\n \n \n \n
\n\n \n \n\n"
},
{
"path": "drawing-app/script.js",
"content": "const canvas = document.getElementById('canvas');\nconst increaseBtn = document.getElementById('increase');\nconst decreaseBtn = document.getElementById('decrease');\nconst sizeEL = document.getElementById('size');\nconst colorEl = document.getElementById('color');\nconst clearEl = document.getElementById('clear');\n\nconst ctx = canvas.getContext('2d');\n\nlet size = 10\nlet isPressed = false\ncolorEl.value = 'black'\nlet color = colorEl.value\nlet x\nlet y\n\ncanvas.addEventListener('mousedown', (e) => {\n isPressed = true\n\n x = e.offsetX\n y = e.offsetY\n})\n\ndocument.addEventListener('mouseup', (e) => {\n isPressed = false\n\n x = undefined\n y = undefined\n})\n\ncanvas.addEventListener('mousemove', (e) => {\n if(isPressed) {\n const x2 = e.offsetX\n const y2 = e.offsetY\n\n drawCircle(x2, y2)\n drawLine(x, y, x2, y2)\n\n x = x2\n y = y2\n }\n})\n\nfunction drawCircle(x, y) {\n ctx.beginPath();\n ctx.arc(x, y, size, 0, Math.PI * 2)\n ctx.fillStyle = color\n ctx.fill()\n}\n\nfunction drawLine(x1, y1, x2, y2) {\n ctx.beginPath()\n ctx.moveTo(x1, y1)\n ctx.lineTo(x2, y2)\n ctx.strokeStyle = color\n ctx.lineWidth = size * 2\n ctx.stroke()\n}\n\nfunction updateSizeOnScreen() {\n sizeEL.innerText = size\n}\n\nincreaseBtn.addEventListener('click', () => {\n size += 5\n\n if(size > 50) {\n size = 50\n }\n\n updateSizeOnScreen()\n})\n\ndecreaseBtn.addEventListener('click', () => {\n size -= 5\n\n if(size < 5) {\n size = 5\n }\n\n updateSizeOnScreen()\n})\n\ncolorEl.addEventListener('change', (e) => color = e.target.value)\n\nclearEl.addEventListener('click', () => ctx.clearRect(0,0, canvas.width, canvas.height))\n"
},
{
"path": "drawing-app/style.css",
"content": "@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n background-color: #f5f5f5;\n font-family: 'Roboto', sans-serif;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100vh;\n margin: 0;\n}\n\ncanvas {\n border: 2px solid steelblue;\n}\n\n.toolbox {\n background-color: steelblue;\n border: 1px solid slateblue;\n display: flex;\n width: 804px;\n padding: 1rem;\n}\n\n.toolbox > * {\n background-color: #fff;\n border: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: 2rem;\n height: 50px;\n width: 50px;\n margin: 0.25rem;\n padding: 0.25rem;\n cursor: pointer;\n}\n\n.toolbox > *:last-child {\n margin-left: auto;\n}\n"
},
{
"path": "drink-water/index.html",
"content": "\n\n \n \n \n \n Drink Water
\nGoal: 2 Liters
\n\n\n
\n\n \n \n Remained\n
\n\n \n Select how many glasses of water that you have drank
\n\n\n
\n\n \n \n\n"
},
{
"path": "drink-water/script.js",
"content": "const smallCups = document.querySelectorAll('.cup-small')\nconst liters = document.getElementById('liters')\nconst percentage = document.getElementById('percentage')\nconst remained = document.getElementById('remained')\n\nupdateBigCup()\n\nsmallCups.forEach((cup, idx) => {\n cup.addEventListener('click', () => highlightCups(idx))\n})\n\nfunction highlightCups(idx) {\n if (idx===7 && smallCups[idx].classList.contains(\"full\")) idx--;\n else if(smallCups[idx].classList.contains('full') && !smallCups[idx].nextElementSibling.classList.contains('full')) {\n idx--\n }\n\n smallCups.forEach((cup, idx2) => {\n if(idx2 <= idx) {\n cup.classList.add('full')\n } else {\n cup.classList.remove('full')\n }\n })\n\n updateBigCup()\n}\n\nfunction updateBigCup() {\n const fullCups = document.querySelectorAll('.cup-small.full').length\n const totalCups = smallCups.length\n\n if(fullCups === 0) {\n percentage.style.visibility = 'hidden'\n percentage.style.height = 0\n } else {\n percentage.style.visibility = 'visible'\n percentage.style.height = `${fullCups / totalCups * 330}px`\n percentage.innerText = `${fullCups / totalCups * 100}%`\n }\n\n if(fullCups === totalCups) {\n remained.style.visibility = 'hidden'\n remained.style.height = 0\n } else {\n remained.style.visibility = 'visible'\n liters.innerText = `${2 - (250 * fullCups / 1000)}L`\n }\n}\n"
},
{
"path": "drink-water/style.css",
"content": "@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600&display=swap');\n\n:root {\n --border-color: #144fc6;\n --fill-color: #6ab3f8;\n}\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n background-color: #3494e4;\n color: #fff;\n font-family: 'Montserrat', sans-serif;\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-bottom: 40px;\n}\n\nh1 {\n margin: 10px 0 0;\n}\n\nh3 {\n font-weight: 400;\n margin: 10px 0;\n}\n\n.cup {\n background-color: #fff;\n border: 4px solid var(--border-color);\n color: var(--border-color);\n border-radius: 0 0 40px 40px;\n height: 330px;\n width: 150px;\n margin: 30px 0;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.cup.cup-small {\n height: 95px;\n width: 50px;\n border-radius: 0 0 15px 15px;\n background-color: rgba(255, 255, 255, 0.9);\n cursor: pointer;\n font-size: 14px;\n align-items: center;\n justify-content: center;\n text-align: center;\n margin: 5px;\n transition: 0.3s ease;\n}\n\n.cup.cup-small.full {\n background-color: var(--fill-color);\n color: #fff;\n}\n\n.cups {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n width: 280px;\n}\n\n.remained {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n flex: 1;\n transition: 0.3s ease;\n}\n\n.remained span {\n font-size: 20px;\n font-weight: bold;\n}\n\n.remained small {\n font-size: 12px;\n}\n\n.percentage {\n background-color: var(--fill-color);\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n font-size: 30px;\n height: 0;\n transition: 0.3s ease;\n}\n\n.text {\n text-align: center;\n margin: 0 0 5px;\n}\n"
},
{
"path": "event-keycodes/dark-style.css",
"content": "@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');\n\n* {\n box-sizing: border-box;\n \n}\n\nbody {\n background-color: #383838;\n font-family: 'Muli', sans-serif;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n height: 100vh;\n overflow: hidden;\n margin: 0;\n}\n\n.key {\n border: 1px solid #999999;\n background-color: #2B2B2B;\n box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);\n display: inline-flex;\n align-items: center;\n font-size: 20px;\n font-weight: bold;\n padding: 20px;\n flex-direction: column;\n margin: 10px;\n min-width: 150px;\n color: white;\n position: relative;\n}\n\n.key small {\n position: absolute;\n top: -24px;\n left: 0;\n text-align: center;\n width: 100%;\n color: #c4c4c4;\n font-size: 14px;\n}\n"
},
{
"path": "event-keycodes/index.html",
"content": "\n\n \n \n \n \n 250 ml
\n 250 ml
\n 250 ml
\n 250 ml
\n 250 ml
\n 250 ml
\n 250 ml
\n 250 ml
\n \n
\n \n \n\n"
},
{
"path": "event-keycodes/script.js",
"content": "const insert = document.getElementById('insert')\n\nwindow.addEventListener('keydown', (event) => {\n insert.innerHTML = `\n \n Press any key to get the keyCode\n
\n \n ${event.key === ' ' ? 'Space' : event.key} \n event.key\n
\n\n\n ${event.keyCode}\n event.keyCode\n
\n\n\n ${event.code}\n event.code\n
\n `\n})"
},
{
"path": "expanding-cards/index.html",
"content": "\n\n \n \n \n \n \n
\n\n \n \n\n"
},
{
"path": "expanding-cards/script.js",
"content": "const panels = document.querySelectorAll('.panel')\n\npanels.forEach(panel => {\n panel.addEventListener('click', () => {\n removeActiveClasses()\n panel.classList.add('active')\n })\n})\n\nfunction removeActiveClasses() {\n panels.forEach(panel => {\n panel.classList.remove('active')\n })\n}"
},
{
"path": "expanding-cards/style.css",
"content": "@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Muli', sans-serif;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100vh;\n overflow: hidden;\n margin: 0;\n}\n\n.container {\n display: flex;\n width: 90vw;\n}\n\n.panel {\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n height: 80vh;\n border-radius: 50px;\n color: #fff;\n cursor: pointer;\n flex: 0.5;\n margin: 10px;\n position: relative;\n -webkit-transition: all 700ms ease-in;\n}\n\n.panel h3 {\n font-size: 24px;\n position: absolute;\n bottom: 20px;\n left: 20px;\n margin: 0;\n opacity: 0;\n}\n\n.panel.active {\n flex: 5;\n}\n\n.panel.active h3 {\n opacity: 1;\n transition: opacity 0.3s ease-in 0.4s;\n}\n\n@media (max-width: 480px) {\n .container {\n width: 100vw;\n }\n\n .panel:nth-of-type(4),\n .panel:nth-of-type(5) {\n display: none;\n }\n}\n"
},
{
"path": "faq-collapse/index.html",
"content": "\n\n \n \n \n \n \n \n
\n Explore The World
\n\n
\n Wild Forest
\n\n
\n Sunny Beach
\n\n
\n City on Winter
\n\n
\n\n Mountains - Clouds
\nFrequently Asked Questions
\n\n
\n \n \n\n"
},
{
"path": "faq-collapse/script.js",
"content": "const toggles = document.querySelectorAll('.faq-toggle')\n\ntoggles.forEach(toggle => {\n toggle.addEventListener('click', () => {\n toggle.parentNode.classList.toggle('active')\n })\n})"
},
{
"path": "faq-collapse/style.css",
"content": "@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Muli', sans-serif;\n background-color: #f0f0f0;\n}\n\nh1 {\n margin: 50px 0 30px;\n text-align: center;\n}\n\n.faq-container {\n max-width: 600px;\n margin: 0 auto;\n}\n\n.faq {\n background-color: transparent;\n border: 1px solid #9fa4a8;\n border-radius: 10px;\n margin: 20px 0;\n padding: 30px;\n position: relative;\n overflow: hidden;\n transition: 0.3s ease;\n}\n\n.faq.active {\n background-color: #fff;\n box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1);\n}\n\n.faq.active::before,\n.faq.active::after {\n content: '\\f075';\n font-family: 'Font Awesome 5 Free';\n color: #2ecc71;\n font-size: 7rem;\n position: absolute;\n opacity: 0.2;\n top: 20px;\n left: 20px;\n z-index: 0;\n}\n\n.faq.active::before {\n color: #3498db;\n top: -10px;\n left: -30px;\n transform: rotateY(180deg);\n}\n\n.faq-title {\n margin: 0 35px 0 0;\n}\n\n.faq-text {\n display: none;\n margin: 30px 0 0;\n}\n\n.faq.active .faq-text {\n display: block;\n}\n\n.faq-toggle {\n background-color: transparent;\n border: 0;\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 16px;\n padding: 0;\n position: absolute;\n top: 30px;\n right: 30px;\n height: 30px;\n width: 30px;\n}\n\n.faq-toggle:focus {\n outline: 0;\n}\n\n.faq-toggle .fa-times {\n display: none;\n}\n\n.faq.active .faq-toggle .fa-times {\n color: #fff;\n display: block;\n}\n\n.faq.active .faq-toggle .fa-chevron-down {\n display: none;\n}\n\n.faq.active .faq-toggle {\n background-color: #9fa4a8;\n}\n"
},
{
"path": "feedback-ui-design/index.html",
"content": "\n\n \n \n \n \n \n \n
\n\n \n Why shouldn't we trust atoms?\n
\n\n\n They make up everything\n
\n\n \n\n
\n \n \n What do you call someone with no body and no nose?\n
\n\n Nobody knows.\n
\n \n\n
\n \n \n What's the object-oriented way to become wealthy?\n
\n\n Inheritance.\n
\n \n\n
\n \n \n How many tickles does it take to tickle an octopus?\n
\n\n Ten-tickles!\n
\n \n\n
\n \n What is: 1 + 1?\n
\n\n Depends on who are you asking.\n
\n \n\n How satisfied are you with our
customer support performance?\n
\n \n \n\n"
},
{
"path": "feedback-ui-design/script.js",
"content": "const ratings = document.querySelectorAll('.rating')\nconst ratingsContainer = document.querySelector('.ratings-container')\nconst sendBtn = document.querySelector('#send')\nconst panel = document.querySelector('#panel')\nlet selectedRating = 'Satisfied'\n\nratingsContainer.addEventListener('click', (e) => {\n if(e.target.parentNode.classList.contains('rating') && e.target.nextElementSibling) {\n removeActive()\n e.target.parentNode.classList.add('active')\n selectedRating = e.target.nextElementSibling.innerHTML\n } else if(\n e.target.parentNode.classList.contains('rating') &&\n e.target.previousSibling &&\n e.target.previousElementSibling.nodeName === 'IMG'\n ) {\n removeActive()\n e.target.parentNode.classList.add('active')\n selectedRating = e.target.innerHTML\n }\n\n})\n\nsendBtn.addEventListener('click', (e) => {\n panel.innerHTML = `\n \n Thank You!\n customer support performance?\n
\n
\n \n \n ![\"\"](\"https://img.icons8.com/external-neu-royyan-wijaya/64/000000/external-emoji-neumojis-smiley-neu-royyan-wijaya-17.png\")
\n Unhappy\n
\n\n \n Unhappy\n \n ![\"\"/](\"https://img.icons8.com/external-neu-royyan-wijaya/64/000000/external-emoji-neumojis-smiley-neu-royyan-wijaya-3.png\")
\n Neutral\n
\n\n \n Neutral\n \n ![\"\"/](\"https://img.icons8.com/external-neu-royyan-wijaya/64/000000/external-emoji-neumojis-smiley-neu-royyan-wijaya-30.png\")
\n Satisfied\n
\n \n Satisfied\n \n Feedback: ${selectedRating}\n
We'll use your feedback to improve our customer support
\n `\n})\n\nfunction removeActive() {\n for(let i = 0; i < ratings.length; i++) {\n ratings[i].classList.remove('active')\n }\n}\n" }, { "path": "feedback-ui-design/style.css", "content": "@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n background-color: #fef9f2;\n font-family: 'Montserrat', sans-serif;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100vh;\n overflow: hidden;\n margin: 0;\n}\n\n.panel-container {\n background-color: #fff;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);\n border-radius: 4px;\n font-size: 90%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n padding: 30px;\n max-width: 400px;\n}\n\n.panel-container strong {\n line-height: 20px;\n}\n\n.ratings-container {\n display: flex;\n margin: 20px 0;\n}\n\n.rating {\n flex: 1;\n cursor: pointer;\n padding: 20px;\n margin: 10px 5px;\n}\n\n.rating:hover,\n.rating.active {\n border-radius: 4px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n}\n\n.rating img {\n width: 40px;\n}\n\n.rating small {\n color: #555;\n display: inline-block;\n margin: 10px 0 0;\n}\n\n.rating:hover small,\n.rating.active small {\n color: #111;\n}\n\n.btn {\n background-color: #302d2b;\n color: #fff;\n border: 0;\n border-radius: 4px;\n padding: 12px 30px;\n cursor: pointer;\n}\n\n.btn:focus {\n outline: 0;\n}\n\n.btn:active {\n transform: scale(0.98);\n}\n\n.fa-heart {\n color: red;\n font-size: 30px;\n margin-bottom: 10px;\n}\n" }, { "path": "form-input-wave/index.html", "content": "\n\n \n \n \n \n\n
\n \n \n\n"
},
{
"path": "form-input-wave/script.js",
"content": "const labels = document.querySelectorAll('.form-control label')\n\nlabels.forEach(label => {\n label.innerHTML = label.innerText\n .split('')\n .map((letter, idx) => `${letter}`)\n .join('')\n})"
},
{
"path": "form-input-wave/style.css",
"content": "@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n background-color: steelblue;\n color: #fff;\n font-family: 'Muli', sans-serif;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100vh;\n overflow: hidden;\n margin: 0;\n}\n\n.container {\n background-color: rgba(0, 0, 0, 0.4);\n padding: 20px 40px;\n border-radius: 5px;\n}\n\n.container h1 {\n text-align: center;\n margin-bottom: 30px;\n}\n\n.container a {\n text-decoration: none;\n color: lightblue;\n}\n\n.btn {\n cursor: pointer;\n display: inline-block;\n width: 100%;\n background: lightblue;\n padding: 15px;\n font-family: inherit;\n font-size: 16px;\n border: 0;\n border-radius: 5px;\n}\n\n.btn:focus {\n outline: 0;\n}\n\n.btn:active {\n transform: scale(0.98);\n}\n\n.text {\n margin-top: 30px;\n}\n\n.form-control {\n position: relative;\n margin: 20px 0 40px;\n width: 300px;\n}\n\n.form-control input {\n background-color: transparent;\n border: 0;\n border-bottom: 2px #fff solid;\n display: block;\n width: 100%;\n padding: 15px 0;\n font-size: 18px;\n color: #fff;\n position: relative;\n z-index: 100;\n}\n\n.form-control input:focus,\n.form-control input:valid {\n outline: 0;\n border-bottom-color: lightblue;\n}\n\n.form-control label {\n position: absolute;\n top: 15px;\n left: 0;\n pointer-events: none;\n}\n\n.form-control label span {\n display: inline-block;\n font-size: 18px;\n min-width: 5px;\n transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n\n.form-control input:focus ~ label span,\n.form-control input:valid ~ label span {\n color: lightblue;\n transform: translateY(-30px);\n}\n"
},
{
"path": "github-profiles/index.html",
"content": "\n\n \n \n \n \n Please Login
\n \n${user.bio}
` : ''\n const cardHTML = `\n\n
\n `\n main.innerHTML = cardHTML\n \n}\n\nfunction createErrorCard(msg) {\n const cardHTML = `\n \n ![\"${user.name}\"](\"${user.avatar_url}\")
\n
\n \n \n
\n `\n\n main.innerHTML = cardHTML\n}\n\nfunction addReposToCard(repos) {\n const reposEl = document.getElementById('repos')\n\n repos\n .slice(0, 5)\n .forEach(repo => {\n const repoEl = document.createElement('a')\n repoEl.classList.add('repo')\n repoEl.href = repo.html_url\n repoEl.target = '_blank'\n repoEl.innerText = repo.name\n\n reposEl.appendChild(repoEl)\n })\n}\n\nform.addEventListener('submit', (e) => {\n e.preventDefault()\n\n const user = search.value\n\n if(user) {\n getUser(user)\n\n search.value = ''\n }\n})\n\n"
},
{
"path": "github-profiles/style.css",
"content": "@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n background-color: #2a2a72;\n color: #fff;\n font-family: 'Poppins', sans-serif;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100vh;\n overflow: hidden;\n margin: 0;\n}\n\n.user-form {\n width: 100%;\n max-width: 700px;\n}\n\n.user-form input {\n width: 100%;\n display: block;\n background-color: #4c2885;\n border: none;\n border-radius: 10px;\n color: #fff;\n padding: 1rem;\n margin-bottom: 2rem;\n font-family: inherit;\n font-size: 1rem;\n box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05),\n 0 15px 40px rgba(0, 0, 0, 0.1);\n}\n\n.user-form input::placeholder {\n color: #bbb;\n}\n\n.user-form input:focus {\n outline: none;\n}\n\n.card {\n max-width: 800px;\n background-color: #4c2885;\n border-radius: 20px;\n box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05),\n 0 15px 40px rgba(0, 0, 0, 0.1);\n display: flex;\n padding: 3rem;\n margin: 0 1.5rem;\n}\n\n.avatar {\n border-radius: 50%;\n border: 10px solid #2a2a72;\n height: 150px;\n width: 150px;\n}\n\n.user-info {\n color: #eee;\n margin-left: 2rem;\n}\n\n.user-info h2 {\n margin-top: 0;\n}\n\n.user-info ul {\n list-style-type: none;\n display: flex;\n justify-content: space-between;\n padding: 0;\n max-width: 400px;\n}\n\n.user-info ul li {\n display: flex;\n align-items: center;\n}\n\n.user-info ul li strong {\n font-size: 0.9rem;\n margin-left: 0.5rem;\n}\n\n.repo {\n text-decoration: none;\n color: #fff;\n background-color: #212a72;\n font-size: 0.7rem;\n padding: 0.25rem 0.5rem;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: inline-block;\n}\n\n@media (max-width: 500px) {\n .card {\n flex-direction: column;\n align-items: center;\n }\n\n .user-form {\n max-width: 400px;\n }\n}\n"
},
{
"path": "good-cheap-fast/index.html",
"content": "\n\n \n \n \n \n ${msg}
\nHow do you want your project to be?
\n\n \n \n Good\n
\n\n \n \n \n Cheap\n
\n\n \n \n \n Fast\n
\n \n \n\n"
},
{
"path": "good-cheap-fast/script.js",
"content": "const toggles = document.querySelectorAll('.toggle')\nconst good = document.querySelector('#good')\nconst cheap = document.querySelector('#cheap')\nconst fast = document.querySelector('#fast')\n\ntoggles.forEach(toggle => toggle.addEventListener('change', (e) => doTheTrick(e.target)))\n\nfunction doTheTrick(theClickedOne) {\n if(good.checked && cheap.checked && fast.checked) {\n if(good === theClickedOne) {\n fast.checked = false\n }\n\n if(cheap === theClickedOne) {\n good.checked = false\n }\n\n if(fast === theClickedOne) {\n cheap.checked = false\n }\n }\n}"
},
{
"path": "good-cheap-fast/style.css",
"content": "@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Roboto', sans-serif;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100vh;\n overflow: hidden;\n margin: 0;\n}\n\n.toggle-container {\n display: flex;\n align-items: center;\n margin: 10px 0;\n width: 200px;\n}\n\n.toggle {\n visibility: hidden;\n}\n\n.label {\n position: relative;\n background-color: #d0d0d0;\n border-radius: 50px;\n cursor: pointer;\n display: inline-block;\n margin: 0 15px 0;\n width: 80px;\n height: 40px;\n}\n\n.toggle:checked + .label {\n background-color: #8e44ad;\n}\n\n.ball {\n background: #fff;\n height: 34px;\n width: 34px;\n border-radius: 50%;\n position: absolute;\n top: 3px;\n left: 3px;\n align-items: center;\n justify-content: center;\n animation: slideOff 0.3s linear forwards;\n}\n\n.toggle:checked + .label .ball {\n animation: slideOn 0.3s linear forwards;\n}\n\n@keyframes slideOn {\n 0% {\n transform: translateX(0) scale(1);\n }\n 50% {\n transform: translateX(20px) scale(1.2);\n }\n 100% {\n transform: translateX(40px) scale(1);\n }\n}\n\n@keyframes slideOff {\n 0% {\n transform: translateX(40px) scale(1);\n }\n 50% {\n transform: translateX(20px) scale(1.2);\n }\n 100% {\n transform: translateX(0) scale(1);\n }\n}\n"
},
{
"path": "hidden-search/index.html",
"content": "\n\n \n \n \n \n \n \n \n \n
\n \n \n\n"
},
{
"path": "hidden-search/script.js",
"content": "const search = document.querySelector('.search')\nconst btn = document.querySelector('.btn')\nconst input = document.querySelector('.input')\n\nbtn.addEventListener('click', () => {\n search.classList.toggle('active')\n input.focus()\n})"
},
{
"path": "hidden-search/style.css",
"content": "@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n background-image: linear-gradient(90deg, #7d5fff, #7158e2);\n font-family: 'Roboto', sans-serif;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100vh;\n overflow: hidden;\n margin: 0;\n}\n\n.search {\n position: relative;\n height: 50px;\n}\n\n.search .input {\n background-color: #fff;\n border: 0;\n font-size: 18px;\n padding: 15px;\n height: 50px;\n width: 50px;\n transition: width 0.3s ease;\n}\n\n.btn {\n background-color: #fff;\n border: 0;\n cursor: pointer;\n font-size: 24px;\n position: absolute;\n top: 0;\n left: 0;\n height: 50px;\n width: 50px;\n transition: transform 0.3s ease;\n}\n\n.btn:focus,\n.input:focus {\n outline: none;\n}\n\n.search.active .input {\n width: 200px;\n}\n\n.search.active .btn {\n transform: translateX(198px);\n}\n"
},
{
"path": "hoverboard/index.html",
"content": "\n\n \n \n \n \n \n
\n\n \n \n\n"
},
{
"path": "image-carousel/script.js",
"content": "const imgs = document.getElementById('imgs')\nconst leftBtn = document.getElementById('left')\nconst rightBtn = document.getElementById('right')\n\nconst img = document.querySelectorAll('#imgs img')\n\nlet idx = 0\n\nlet interval = setInterval(run, 2000)\n\nfunction run() {\n idx++\n changeImage()\n}\n\nfunction changeImage() {\n if(idx > img.length - 1) {\n idx = 0\n } else if(idx < 0) {\n idx = img.length - 1\n }\n\n imgs.style.transform = `translateX(${-idx * 500}px)`\n}\n\nfunction resetInterval() {\n clearInterval(interval)\n interval = setInterval(run, 2000)\n}\n\nrightBtn.addEventListener('click', () => {\n idx++\n changeImage()\n resetInterval()\n})\n\nleftBtn.addEventListener('click', () => {\n idx--\n changeImage()\n resetInterval()\n})\n"
},
{
"path": "image-carousel/style.css",
"content": "@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Roboto', sans-serif;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100vh;\n margin: 0;\n}\n\nimg {\n width: 500px;\n height: 500px;\n object-fit: cover;\n}\n\n.carousel {\n box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);\n height: 530px;\n width: 500px;\n overflow: hidden;\n}\n\n.image-container {\n display: flex;\n transform: translateX(0);\n transition: transform 0.5s ease-in-out;\n}\n\n.buttons-container {\n display: flex;\n justify-content: space-between;\n}\n\n.btn {\n background-color: rebeccapurple;\n color: #fff;\n border: none;\n padding: 0.5rem;\n cursor: pointer;\n width: 49.5%;\n}\n\n.btn:hover {\n opacity: 0.9;\n}\n\n.btn:focus {\n outline: none;\n}\n"
},
{
"path": "incrementing-counter/index.html",
"content": "\n\n \n \n \n \n \n \n ![\"first-image\"\n](\"https://images.unsplash.com/photo-1599394022918-6c2776530abb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1458&q=80\"\n)
\n
\n\n \n \n \n \n \n Twitter Followers\n
\n\n \n \n \n YouTube Subscribers\n
\n\n \n \n \n Facebook Fans\n
\n \n \n\n"
},
{
"path": "incrementing-counter/script.js",
"content": "const counters = document.querySelectorAll('.counter')\n\ncounters.forEach(counter => {\n counter.innerText = '0'\n\n const updateCounter = () => {\n const target = +counter.getAttribute('data-target')\n const c = +counter.innerText\n\n const increment = target / 200\n\n if(c < target) {\n counter.innerText = `${Math.ceil(c + increment)}`\n setTimeout(updateCounter, 1)\n } else {\n counter.innerText = target\n }\n }\n\n updateCounter()\n})"
},
{
"path": "incrementing-counter/style.css",
"content": "@import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap');\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n background-color: #8e44ad;\n color: #fff;\n font-family: 'Roboto Mono', sans-serif;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100vh;\n overflow: hidden;\n margin: 0;\n}\n\n.counter-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n text-align: center;\n margin: 30px 50px;\n}\n\n.counter {\n font-size: 60px;\n margin-top: 10px;\n}\n\n@media (max-width: 580px) {\n body {\n flex-direction: column;\n }\n}\n"
},
{
"path": "insect-catch-game/index.html",
"content": "\n\n \n \n \n \n \n
\n\n Catch The Insect
\n \n\n
\n\n What is your \"favorite\" insect?
\n- \n
- \n \n \n
- \n \n \n
- \n \n \n
- \n \n \n
\n \n Are you annoyed yet?
\n
\n\n \n \n\n"
},
{
"path": "insect-catch-game/script.js",
"content": "const screens = document.querySelectorAll('.screen');\nconst choose_insect_btns = document.querySelectorAll('.choose-insect-btn');\nconst start_btn = document.getElementById('start-btn')\nconst game_container = document.getElementById('game-container')\nconst timeEl = document.getElementById('time')\nconst scoreEl = document.getElementById('score')\nconst message = document.getElementById('message')\nlet seconds = 0\nlet score = 0\nlet selected_insect = {}\n\nstart_btn.addEventListener('click', () => screens[0].classList.add('up'))\n\nchoose_insect_btns.forEach(btn => {\n btn.addEventListener('click', () => {\n const img = btn.querySelector('img')\n const src = img.getAttribute('src')\n const alt = img.getAttribute('alt')\n selected_insect = { src, alt }\n screens[1].classList.add('up')\n setTimeout(createInsect, 1000)\n startGame()\n })\n})\n\nfunction startGame() {\n setInterval(increaseTime, 1000)\n}\n\nfunction increaseTime() {\n let m = Math.floor(seconds / 60)\n let s = seconds % 60\n m = m < 10 ? `0${m}` : m\n s = s < 10 ? `0${s}` : s\n timeEl.innerHTML = `Time: ${m}:${s}`\n seconds++\n}\n\nfunction createInsect() {\n const insect = document.createElement('div')\n insect.classList.add('insect')\n const { x, y } = getRandomLocation()\n insect.style.top = `${y}px`\n insect.style.left = `${x}px`\n insect.innerHTML = `Time: 00:00
\nScore: 0
\n\n Are you annoyed yet?
\n You are playing an impossible game!!\n
\n \n \n \n\n
\n \n \n\n"
},
{
"path": "live-user-filter/script.js",
"content": "const result = document.getElementById('result')\nconst filter = document.getElementById('filter')\nconst listItems = []\n\ngetData()\n\nfilter.addEventListener('input', (e) => filterData(e.target.value))\n\nasync function getData() {\n const res = await fetch('https://randomuser.me/api?results=50')\n\n const { results } = await res.json()\n\n // Clear result\n result.innerHTML = ''\n\n results.forEach(user => {\n const li = document.createElement('li')\n\n listItems.push(li)\n\n li.innerHTML = `\n Live User Filter
\n Search by name and/or location\n \n- \n
- \n
Loading...
\n \n
\n ![\"home\"](\"https://images.unsplash.com/photo-1480074568708-e7b720bb3f09?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1053&q=80\")
\n ![\"work\"](\"https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80\")
\n ![\"blog\"](\"https://images.unsplash.com/photo-1471107340929-a87cd0f5b5f3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1266&q=80\")
\n ![\"about\"](\"https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80\")
\n \n
\n \n \n\n"
},
{
"path": "mobile-tab-navigation/script.js",
"content": "const contents = document.querySelectorAll('.content')\nconst listItems = document.querySelectorAll('nav ul li')\n\nlistItems.forEach((item, idx) => {\n item.addEventListener('click', () => {\n hideAllContents()\n hideAllItems()\n\n item.classList.add('active')\n contents[idx].classList.add('show')\n })\n})\n\nfunction hideAllContents() {\n contents.forEach(content => content.classList.remove('show'))\n}\n\n\nfunction hideAllItems() {\n listItems.forEach(item => item.classList.remove('active'))\n}"
},
{
"path": "mobile-tab-navigation/style.css",
"content": "@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n background-color: rgba(155, 89, 182, 0.7);\n font-family: 'Open Sans', sans-serif;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100vh;\n margin: 0;\n}\n\n.phone {\n position: relative;\n overflow: hidden;\n border: 3px solid #eee;\n border-radius: 15px;\n height: 600px;\n width: 340px;\n}\n\n.phone .content {\n opacity: 0;\n object-fit: cover;\n position: absolute;\n top: 0;\n left: 0;\n height: calc(100% - 60px);\n width: 100%;\n transition: opacity 0.4s ease;\n}\n\n.phone .content.show {\n opacity: 1;\n}\n\nnav {\n position: absolute;\n bottom: 0;\n left: 0;\n margin-top: -5px;\n width: 100%;\n}\n\nnav ul {\n background-color: #fff;\n display: flex;\n list-style-type: none;\n padding: 0;\n margin: 0;\n height: 60px;\n}\n\nnav li {\n color: #777;\n cursor: pointer;\n flex: 1;\n padding: 10px;\n text-align: center;\n}\n\nnav ul li p {\n font-size: 12px;\n margin: 2px 0;\n}\n\nnav ul li:hover,\nnav ul li.active {\n color: #8e44ad;\n}\n"
},
{
"path": "movie-app/index.html",
"content": "\n\n \n \n \n \n \n \n \n \n \n \n
\n ${title}
\n ${vote_average}\n\n
\n `\n main.appendChild(movieEl)\n })\n}\n\nfunction getClassByRate(vote) {\n if(vote >= 8) {\n return 'green'\n } else if(vote >= 5) {\n return 'orange'\n } else {\n return 'red'\n }\n}\n\nform.addEventListener('submit', (e) => {\n e.preventDefault()\n\n const searchTerm = search.value\n\n if(searchTerm && searchTerm !== '') {\n getMovies(SEARCH_API + searchTerm)\n\n search.value = ''\n } else {\n window.location.reload()\n }\n})"
},
{
"path": "movie-app/style.css",
"content": "@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');\n\n:root {\n --primary-color: #22254b;\n --secondary-color: #373b69;\n}\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n background-color: var(--primary-color);\n font-family: 'Poppins', sans-serif;\n margin: 0;\n}\n\nheader {\n padding: 1rem;\n display: flex;\n justify-content: flex-end;\n background-color: var(--secondary-color);\n}\n\n.search {\n background-color: transparent;\n border: 2px solid var(--primary-color);\n border-radius: 50px;\n font-family: inherit;\n font-size: 1rem;\n padding: 0.5rem 1rem;\n color: #fff;\n}\n\n.search::placeholder {\n color: #7378c5;\n}\n\n.search:focus {\n outline: none;\n background-color: var(--primary-color);\n}\n\nmain {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n}\n\n.movie {\n width: 300px;\n margin: 1rem;\n background-color: var(--secondary-color);\n box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);\n position: relative;\n overflow: hidden;\n border-radius: 3px;\n}\n\n.movie img {\n width: 100%;\n}\n\n.movie-info {\n color: #eee;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap:0.2rem;\n padding: 0.5rem 1rem 1rem;\n letter-spacing: 0.5px;\n}\n\n.movie-info h3 {\n margin-top: 0;\n}\n\n.movie-info span {\n background-color: var(--primary-color);\n padding: 0.25rem 0.5rem;\n border-radius: 3px;\n font-weight: bold;\n}\n\n.movie-info span.green {\n color: lightgreen;\n}\n\n.movie-info span.orange {\n color: orange;\n}\n\n.movie-info span.red {\n color: red;\n}\n\n.overview {\n background-color: #fff;\n padding: 2rem;\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n max-height: 100%;\n transform: translateY(101%);\n overflow-y: auto;\n transition: transform 0.3s ease-in;\n}\n\n.movie:hover .overview {\n transform: translateY(0);\n}\n"
},
{
"path": "netflix-mobile-navigation/index.html",
"content": "\n\n\n\n \n \n \n \n Overview
\n ${overview}\nMobile Navigation
\n\n\n
\n\n \n\n\n"
},
{
"path": "netflix-mobile-navigation/script.js",
"content": "const open_btn = document.querySelector('.open-btn')\nconst close_btn = document.querySelector('.close-btn')\nconst nav = document.querySelectorAll('.nav')\n\nopen_btn.addEventListener('click', () => {\n nav.forEach(nav_el => nav_el.classList.add('visible'))\n})\n\nclose_btn.addEventListener('click', () => {\n nav.forEach(nav_el => nav_el.classList.remove('visible'))\n})"
},
{
"path": "netflix-mobile-navigation/style.css",
"content": "@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Muli', sans-serif;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100vh;\n}\n\n.text {\n text-transform: uppercase;\n}\n\n.logo {\n width: 200px;\n}\n\n.nav-btn {\n border: none;\n background-color: transparent;\n cursor: pointer;\n font-size: 20px;\n}\n\n.open-btn {\n position: fixed;\n top: 10px;\n left: 10px;\n}\n\n.nav {\n position: fixed;\n top: 0;\n left: 0;\n height: 100vh;\n transform: translateX(-100%);\n transition: transform 0.3s ease-in-out;\n}\n\n.nav.visible {\n transform: translateX(0);\n}\n\n.nav-black {\n background-color: rgb(34, 31, 31);\n width: 60%;\n max-width: 480px;\n min-width: 320px;\n transition-delay: 0.4s;\n}\n\n.nav-black.visible {\n transition-delay: 0s;\n}\n\n.nav-red {\n background-color: rgb(229, 9, 20);\n width: 95%;\n transition-delay: 0.2s;\n}\n\n.nav-red.visible {\n transition-delay: 0.2s;\n}\n\n.nav-white {\n background-color: #fff;\n width: 95%;\n padding: 40px;\n position: relative;\n transition-delay: 0s;\n}\n\n.nav-white.visible {\n transition-delay: 0.4s;\n}\n\n.close-btn {\n opacity: 0.3;\n position: absolute;\n top: 40px;\n right: 30px;\n}\n\n.list {\n list-style-type: none;\n padding: 0;\n}\n\n.list li {\n margin: 20px 0;\n}\n\n.list li a {\n color: rgb(34, 31, 31);\n font-size: 14px;\n text-decoration: none;\n text-transform: uppercase;\n}\n\n.list ul {\n list-style-type: none;\n padding-left: 20px;\n}\n"
},
{
"path": "notes-app/index.html",
"content": "\n\n \n \n \n \n \n \n
\n \n \n\n \n\n
\n - \n
- Teams \n
- Locations \n
- Life at Netflix \n
- \n \n \n
\n \n \n
\n\n \n \n `\n\n const editBtn = note.querySelector('.edit')\n const deleteBtn = note.querySelector('.delete')\n const main = note.querySelector('.main')\n const textArea = note.querySelector('textarea')\n\n textArea.value = text\n main.innerHTML = marked(text)\n\n deleteBtn.addEventListener('click', () => {\n note.remove()\n\n updateLS()\n })\n\n editBtn.addEventListener('click', () => {\n main.classList.toggle('hidden')\n textArea.classList.toggle('hidden')\n })\n\n textArea.addEventListener('input', (e) => {\n const { value } = e.target\n\n main.innerHTML = marked(value)\n\n updateLS()\n })\n\n document.body.appendChild(note)\n}\n\nfunction updateLS() {\n const notesText = document.querySelectorAll('textarea')\n\n const notes = []\n\n notesText.forEach(note => notes.push(note.value))\n\n localStorage.setItem('notes', JSON.stringify(notes))\n}"
},
{
"path": "notes-app/style.css",
"content": "@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');\n\n* {\n box-sizing: border-box;\n outline: none;\n}\n\nbody {\n background-color: #7bdaf3;\n font-family: 'Poppins', sans-serif;\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n padding-top: 3rem;\n}\n\n.add {\n position: fixed;\n top: 1rem;\n right: 1rem;\n background-color: #9ec862;\n color: #fff;\n border: none;\n border-radius: 3px;\n padding: 0.5rem 1rem;\n cursor: pointer;\n}\n\n.add:active {\n transform: scale(0.98);\n}\n\n.note {\n background-color: #fff;\n box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);\n margin: 30px 20px;\n height: 400px;\n width: 400px;\n overflow-y: scroll;\n}\n\n.note .tools {\n background-color: #9ec862;\n display: flex;\n justify-content: flex-end;\n padding: 0.5rem;\n}\n\n.note .tools button {\n background-color: transparent;\n border: none;\n color: #fff;\n cursor: pointer;\n font-size: 1rem;\n margin-left: 0.5rem;\n}\n\n.note textarea {\n outline: none;\n font-family: inherit;\n font-size: 1.2rem;\n border: none;\n height: 400px;\n width: 100%;\n padding: 20px;\n}\n\n.main {\n padding: 20px;\n}\n\n.hidden {\n display: none;\n}\n"
},
{
"path": "password-generator/index.html",
"content": "\n\n \n \n \n \n \n \n
\n \n \n\n"
},
{
"path": "password-generator/script.js",
"content": "const resultEl = document.getElementById('result')\nconst lengthEl = document.getElementById('length')\nconst uppercaseEl = document.getElementById('uppercase')\nconst lowercaseEl = document.getElementById('lowercase')\nconst numbersEl = document.getElementById('numbers')\nconst symbolsEl = document.getElementById('symbols')\nconst generateEl = document.getElementById('generate')\nconst clipboardEl = document.getElementById('clipboard')\n\nconst randomFunc = {\n lower: getRandomLower,\n upper: getRandomUpper,\n number: getRandomNumber,\n symbol: getRandomSymbol\n}\n\nclipboardEl.addEventListener('click', () => {\n const password = resultEl.innerText;\n if (!password) {\n return;\n }\n navigator.clipboard.writeText(password);\n alert('Password copied to clipboard!')\n})\n\ngenerateEl.addEventListener('click', () => {\n const length = +lengthEl.value\n const hasLower = lowercaseEl.checked\n const hasUpper = uppercaseEl.checked\n const hasNumber = numbersEl.checked\n const hasSymbol = symbolsEl.checked\n\n resultEl.innerText = generatePassword(hasLower, hasUpper, hasNumber, hasSymbol, length)\n})\n\nfunction generatePassword(lower, upper, number, symbol, length) {\n let generatedPassword = ''\n const typesCount = lower + upper + number + symbol\n const typesArr = [{lower}, {upper}, {number}, {symbol}].filter(item => Object.values(item)[0])\n \n if(typesCount === 0) {\n return ''\n }\n\n for(let i = 0; i < length; i += typesCount) {\n typesArr.forEach(type => {\n const funcName = Object.keys(type)[0]\n generatedPassword += randomFunc[funcName]()\n })\n }\n\n const finalPassword = generatedPassword.slice(0, length)\n\n return finalPassword\n}\n\nfunction getRandomLower() {\n return String.fromCharCode(Math.floor(Math.random() * 26) + 97)\n}\n\nfunction getRandomUpper() {\n return String.fromCharCode(Math.floor(Math.random() * 26) + 65)\n}\n\nfunction getRandomNumber() {\n return String.fromCharCode(Math.floor(Math.random() * 10) + 48)\n}\n\nfunction getRandomSymbol() {\n const symbols = '!@#$%^&*(){}[]=<>/,.'\n return symbols[Math.floor(Math.random() * symbols.length)]\n}\n"
},
{
"path": "password-generator/style.css",
"content": "@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n background-color: #3b3b98;\n color: #fff;\n font-family: 'Muli', sans-serif;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100vh;\n overflow: hidden;\n padding: 10px;\n margin: 0;\n}\n\nh2 {\n margin: 10px 0 20px;\n text-align: center;\n}\n\n.container {\n background-color: #23235b;\n box-shadow: 0px 2px 10px rgba(255, 255, 255, 0.2);\n padding: 20px;\n width: 350px;\n max-width: 100%;\n}\n\n.result-container {\n background-color: rgba(0, 0, 0, 0.4);\n display: flex;\n justify-content: flex-start;\n align-items: center;\n position: relative;\n font-size: 18px;\n letter-spacing: 1px;\n padding: 12px 10px;\n height: 50px;\n width: 100%;\n}\n\n.result-container #result {\n word-wrap: break-word;\n max-width: calc(100% - 40px);\n overflow-y: scroll;\n height: 100%;\n}\n\n#result::-webkit-scrollbar {\n width: 1rem;\n}\n\n.result-container .btn {\n position: absolute;\n top: 5px;\n right: 5px;\n width: 40px;\n height: 40px;\n font-size: 20px;\n}\n\n.btn {\n border: none;\n background-color: #3b3b98;\n color: #fff;\n font-size: 16px;\n padding: 8px 12px;\n cursor: pointer;\n}\n\n.btn-large {\n display: block;\n width: 100%;\n}\n\n.setting {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin: 15px 0;\n}\n"
},
{
"path": "password-strength-background/index.html",
"content": "\n\n \n \n \n Password Generator
\n\n \n \n
\n \n
\n\n \n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n Submit\n \n
\n \n \n\n"
},
{
"path": "password-strength-background/script.js",
"content": "const password = document.getElementById('password')\nconst background = document.getElementById('background')\n\npassword.addEventListener('input', (e) => {\n const input = e.target.value\n const length = input.length\n const blurValue = 20 - length * 2\n background.style.filter = `blur(${blurValue}px)`\n})\n"
},
{
"path": "password-strength-background/style.css",
"content": "* {\n box-sizing: border-box;\n}\n\nbody {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100vh;\n overflow: hidden;\n margin: 0;\n}\n\n.background {\n background: url('https://images.unsplash.com/photo-1556745757-8d76bdb6984b')\n no-repeat center center/cover;\n position: absolute;\n top: -20px;\n bottom: -20px;\n left: -20px;\n right: -20px;\n z-index: -1;\n filter: blur(20px);\n}\n"
},
{
"path": "pokedex/index.html",
"content": "\n\n \n \n \n \n Image Password Strength
\nChange the password to see the effect
\n\n \n
\n\n \n \n
\n\n Pokedex
\n \n\n \n \n \n\n" }, { "path": "pokedex/script.js", "content": "const poke_container = document.getElementById('poke-container')\nconst pokemon_count = 150\nconst colors = {\n fire: '#FDDFDF',\n grass: '#DEFDE0',\n\telectric: '#FCF7DE',\n\twater: '#DEF3FD',\n\tground: '#f4e7da',\n\trock: '#d5d5d4',\n\tfairy: '#fceaff',\n\tpoison: '#98d7a5',\n\tbug: '#f8d5a3',\n\tdragon: '#97b3e6',\n\tpsychic: '#eaeda1',\n\tflying: '#F5F5F5',\n\tfighting: '#E6E0D4',\n\tnormal: '#F5F5F5'\n}\n\nconst main_types = Object.keys(colors)\n\nconst fetchPokemons = async () => {\n for(let i = 1; i <= pokemon_count; i++) {\n await getPokemon(i)\n }\n}\n\nconst getPokemon = async (id) => {\n const url = `https://pokeapi.co/api/v2/pokemon/${id}`\n const res = await fetch(url)\n const data = await res.json()\n createPokemonCard(data)\n}\n\nconst createPokemonCard = (pokemon) => {\n const pokemonEl = document.createElement('div')\n pokemonEl.classList.add('pokemon')\n\n const name = pokemon.name[0].toUpperCase() + pokemon.name.slice(1)\n const id = pokemon.id.toString().padStart(3, '0')\n\n const poke_types = pokemon.types.map(type => type.type.name)\n const type = main_types.find(type => poke_types.indexOf(type) > -1)\n const color = colors[type]\n\n pokemonEl.style.backgroundColor = color\n\n const pokemonInnerHTML = `\n\n ![\"${name}\"](\"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.id}.png\"\")
\n
\n \n \n #${id}\n
\n `\n\n pokemonEl.innerHTML = pokemonInnerHTML\n\n poke_container.appendChild(pokemonEl)\n}\n\nfetchPokemons()\n"
},
{
"path": "pokedex/style.css",
"content": "@import url('https://fonts.googleapis.com/css?family=Lato:300,400&display=swap');\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n background: #efefbb;\n background: linear-gradient(to right, #d4d3dd, #efefbb);\n font-family: 'Lato', sans-serif;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n margin: 0;\n}\n\nh1 {\n letter-spacing: 3px;\n}\n\n.poke-container {\n display: flex;\n flex-wrap: wrap;\n align-items: space-between;\n justify-content: center;\n margin: 0 auto;\n max-width: 1200px;\n}\n\n.pokemon {\n background-color: #eee;\n border-radius: 10px;\n box-shadow: 0 3px 15px rgba(100, 100, 100, 0.5);\n margin: 10px;\n padding: 20px;\n text-align: center;\n}\n\n.pokemon .img-container {\n background-color: rgba(255, 255, 255, 0.6);\n border-radius: 50%;\n width: 120px;\n height: 120px;\n text-align: center;\n}\n\n.pokemon .img-container img {\n max-width: 90%;\n margin-top: 20px;\n}\n\n.pokemon .info {\n margin-top: 20px;\n}\n\n.pokemon .info .number {\n background-color: rgba(0, 0, 0, 0.1);\n padding: 5px 10px;\n border-radius: 10px;\n font-size: 0.8em;\n}\n\n.pokemon .info .name {\n margin: 15px 0 7px;\n letter-spacing: 1px;\n}\n"
},
{
"path": "progress-steps/index.html",
"content": "\n\n \n \n \n \n ${name}
\n Type: ${type} \n\n
\n \n \n\n"
},
{
"path": "progress-steps/script.js",
"content": "const progress = document.getElementById('progress')\nconst prev = document.getElementById('prev')\nconst next = document.getElementById('next')\nconst circles = document.querySelectorAll('.circle')\n\nlet currentActive = 1\n\nnext.addEventListener('click', () => {\n currentActive++\n\n if(currentActive > circles.length) {\n currentActive = circles.length\n }\n\n update()\n})\n\nprev.addEventListener('click', () => {\n currentActive--\n\n if(currentActive < 1) {\n currentActive = 1\n }\n\n update()\n})\n\nfunction update() {\n circles.forEach((circle, idx) => {\n if(idx < currentActive) {\n circle.classList.add('active')\n } else {\n circle.classList.remove('active')\n }\n })\n\n const actives = document.querySelectorAll('.active')\n\n progress.style.width = (actives.length - 1) / (circles.length - 1) * 100 + '%'\n\n if(currentActive === 1) {\n prev.disabled = true\n } else if(currentActive === circles.length) {\n next.disabled = true\n } else {\n prev.disabled = false\n next.disabled = false\n }\n}"
},
{
"path": "progress-steps/style.css",
"content": "@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');\n\n:root {\n --line-border-fill: #3498db;\n --line-border-empty: #383838;\n\n}\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n background-color: #f1f1f1;\n font-family: 'Muli', sans-serif;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100vh;\n overflow: hidden;\n margin: 0;\n}\n\n.container {\n text-align: center;\n}\n\n.progress-container {\n display: flex;\n justify-content: space-between;\n position: relative;\n margin-bottom: 30px;\n max-width: 100%;\n width: 350px;\n}\n\n.progress-container::before {\n content: '';\n background-color: var(--line-border-empty);\n position: absolute;\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n height: 4px;\n width: 100%;\n z-index: -1;\n}\n\n.progress {\n background-color: var(--line-border-fill);\n position: absolute;\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n height: 4px;\n width: 0%;\n z-index: -1;\n transition: 0.4s ease;\n}\n\n.circle {\n background-color: #f1f1f1;\n color:#e2e2e2;\n border-radius: 50%;\n height: 30px;\n width: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 3px solid var(--line-border-empty);\n transition: 0.4s ease;\n}\n\n.circle.active {\n border-color: var(--line-border-fill);\n}\n\n.btn {\n background-color: var(--line-border-fill);\n color: #fff;\n border: 0;\n border-radius: 6px;\n cursor: pointer;\n font-family: inherit;\n padding: 8px 30px;\n margin: 5px;\n font-size: 14px;\n}\n\n.btn:active {\n transform: scale(0.98);\n}\n\n.btn:focus {\n outline: 0;\n}\n\n.btn:disabled {\n background-color: var(--line-border-empty);\n cursor: not-allowed;\n}\n"
},
{
"path": "quiz-app/index.html",
"content": "\n\n \n \n \n \n \n \n
\n\n \n \n 1
\n 2
\n 3
\n 4
\n \n
\n \n \n\n"
},
{
"path": "quiz-app/script.js",
"content": "const quizData = [\n {\n question: \"Which language runs in a web browser?\",\n a: \"Java\",\n b: \"C\",\n c: \"Python\",\n d: \"JavaScript\",\n correct: \"d\",\n },\n {\n question: \"What does CSS stand for?\",\n a: \"Central Style Sheets\",\n b: \"Cascading Style Sheets\",\n c: \"Cascading Simple Sheets\",\n d: \"Cars SUVs Sailboats\",\n correct: \"b\",\n },\n {\n question: \"What does HTML stand for?\",\n a: \"Hypertext Markup Language\",\n b: \"Hypertext Markdown Language\",\n c: \"Hyperloop Machine Language\",\n d: \"Helicopters Terminals Motorboats Lamborginis\",\n correct: \"a\",\n },\n {\n question: \"What year was JavaScript launched?\",\n a: \"1996\",\n b: \"1995\",\n c: \"1994\",\n d: \"none of the above\",\n correct: \"b\",\n },\n];\n\nconst quiz = document.getElementById('quiz')\nconst answerEls = document.querySelectorAll('.answer')\nconst questionEl = document.getElementById('question')\nconst a_text = document.getElementById('a_text')\nconst b_text = document.getElementById('b_text')\nconst c_text = document.getElementById('c_text')\nconst d_text = document.getElementById('d_text')\nconst submitBtn = document.getElementById('submit')\n\nlet currentQuiz = 0\nlet score = 0\n\nloadQuiz()\n\nfunction loadQuiz() {\n deselectAnswers()\n\n const currentQuizData = quizData[currentQuiz]\n\n questionEl.innerText = currentQuizData.question\n a_text.innerText = currentQuizData.a\n b_text.innerText = currentQuizData.b\n c_text.innerText = currentQuizData.c\n d_text.innerText = currentQuizData.d\n}\n\nfunction deselectAnswers() {\n answerEls.forEach(answerEl => answerEl.checked = false)\n}\n\nfunction getSelected() {\n let answer\n\n answerEls.forEach(answerEl => {\n if(answerEl.checked) {\n answer = answerEl.id\n }\n })\n\n return answer\n}\n\nsubmitBtn.addEventListener('click', () => {\n const answer = getSelected()\n \n if(answer) {\n if(answer === quizData[currentQuiz].correct) {\n score++\n }\n\n currentQuiz++\n\n if(currentQuiz < quizData.length) {\n loadQuiz()\n } else {\n quiz.innerHTML = `\n \n
\n \n Question text
\n- \n
- \n \n \n \n\n
- \n \n \n \n\n
- \n \n \n \n\n
- \n \n \n \n
You answered ${score}/${quizData.length} questions correctly
\n\n \n `\n }\n }\n})" }, { "path": "quiz-app/style.css", "content": "@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n background-color: #b8c6db;\n background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7fa 100%);\n font-family: 'Poppins', sans-serif;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100vh;\n overflow: hidden;\n margin: 0;\n}\n\n.quiz-container {\n background-color: #fff;\n border-radius: 10px;\n box-shadow: 0 0 10px 2px rgba(100, 100, 100, 0.1);\n width: 600px;\n overflow: hidden;\n}\n\n.quiz-header {\n padding: 4rem;\n}\n\nh2 {\n padding: 1rem;\n text-align: center;\n margin: 0;\n}\n\nul {\n list-style-type: none;\n padding: 0;\n}\n\nul li {\n font-size: 1.2rem;\n margin: 1rem 0;\n}\n\nul li label {\n cursor: pointer;\n}\n\nbutton {\n background-color: #8e44ad;\n color: #fff;\n border: none;\n display: block;\n width: 100%;\n cursor: pointer;\n font-size: 1.1rem;\n font-family: inherit;\n padding: 1.3rem;\n}\n\nbutton:hover {\n background-color: #732d91;\n}\n\nbutton:focus {\n outline: none;\n background-color: #5e3370;\n}\n" }, { "path": "random-choice-picker/index.html", "content": "\n\n \n \n \n \n\n Enter all of the choices divided by a comma (',').
\n \n\n \n
\n\n \n \n\n"
},
{
"path": "random-choice-picker/script.js",
"content": "const tagsEl = document.getElementById('tags')\nconst textarea = document.getElementById('textarea')\n\ntextarea.focus()\n\ntextarea.addEventListener('keyup', (e) => {\n createTags(e.target.value)\n\n if(e.key === 'Enter') {\n setTimeout(() => {\n e.target.value = ''\n }, 10)\n\n randomSelect()\n }\n})\n\nfunction createTags(input) {\n const tags = input.split(',').filter(tag => tag.trim() !== '').map(tag => tag.trim())\n \n tagsEl.innerHTML = ''\n\n tags.forEach(tag => {\n const tagEl = document.createElement('span')\n tagEl.classList.add('tag')\n tagEl.innerText = tag\n tagsEl.appendChild(tagEl)\n })\n}\n\nfunction randomSelect() {\n const times = 30\n\n const interval = setInterval(() => {\n const randomTag = pickRandomTag()\n\t\n\tif (randomTag !== undefined) {\n highlightTag(randomTag)\n\n setTimeout(() => {\n unHighlightTag(randomTag)\n }, 100)\n\t}\n }, 100);\n\n setTimeout(() => {\n clearInterval(interval)\n\n setTimeout(() => {\n const randomTag = pickRandomTag()\n\n highlightTag(randomTag)\n }, 100)\n\n }, times * 100)\n}\n\nfunction pickRandomTag() {\n const tags = document.querySelectorAll('.tag')\n return tags[Math.floor(Math.random() * tags.length)]\n}\n\nfunction highlightTag(tag) {\n tag.classList.add('highlight')\n}\n\nfunction unHighlightTag(tag) {\n tag.classList.remove('highlight')\n}\n"
},
{
"path": "random-choice-picker/style.css",
"content": "@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n background-color: #2b88f0;\n font-family: 'Muli', sans-serif;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100vh;\n overflow: hidden;\n margin: 0;\n}\n\nh3 {\n color: #fff;\n margin: 10px 0 20px;\n text-align: center;\n}\n\n.container {\n width: 500px;\n}\n\ntextarea {\n border: none;\n display: block;\n width: 100%;\n height: 100px;\n font-family: inherit;\n padding: 10px;\n margin: 0 0 20px;\n font-size: 16px;\n}\n\ntextarea:focus {\n outline: none;\n}\n\n.tag {\n background-color: #f0932b;\n color: #fff;\n border-radius: 50px;\n padding: 10px 20px;\n margin: 0 5px 10px 0;\n font-size: 14px;\n display: inline-block;\n}\n\n.tag.highlight {\n background-color: #273c75;\n}\n"
},
{
"path": "random-image-generator/index.html",
"content": "\n\n \n \n \n \n Enter all of the choices divided by a comma (',').
Press enter when you're done
\n \n\n \n Random Image Feed
\n \n\n \n \n\n" }, { "path": "random-image-generator/script.js", "content": "const container = document.querySelector('.container')\nconst unsplashURL = 'https://source.unsplash.com/random/'\nconst rows = 5\n\nfor(let i = 0; i < rows * 3; i++) {\n const img = document.createElement('img')\n img.src = `${unsplashURL}${getRandomSize()}`\n container.appendChild(img)\n}\n\nfunction getRandomSize() {\n return `${getRandomNr()}x${getRandomNr()}`\n}\n\nfunction getRandomNr() {\n return Math.floor(Math.random() * 10) + 300\n}" }, { "path": "random-image-generator/style.css", "content": "@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Roboto', sans-serif;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 100vh;\n margin: 0;\n}\n\n.title {\n margin: 10px 0 0;\n text-align: center;\n}\n\n.container {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n max-width: 1000px;\n}\n\n.container img {\n object-fit: cover;\n margin: 10px;\n height: 300px;\n width: 300px;\n max-width: 100%;\n}\n" }, { "path": "rotating-nav-animation/index.html", "content": "\n\n \n \n \n \n \n\n
\n\n \n \n \n\n"
},
{
"path": "rotating-nav-animation/script.js",
"content": "const open = document.getElementById('open')\nconst close = document.getElementById('close')\nconst container = document.querySelector('.container')\n\nopen.addEventListener('click', () => container.classList.add('show-nav'))\n\nclose.addEventListener('click', () => container.classList.remove('show-nav'))"
},
{
"path": "rotating-nav-animation/style.css",
"content": "@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Lato', sans-serif;\n background-color: #333;\n color: #222;\n overflow-x: hidden;\n margin: 0;\n}\n\n.container {\n background-color: #fafafa;\n transform-origin: top left;\n transition: transform 0.5s linear;\n width: 100vw;\n min-height: 100vh;\n padding: 50px;\n}\n\n.container.show-nav {\n transform: rotate(-20deg);\n}\n\n.circle-container {\n position: fixed;\n top: -100px;\n left: -100px;\n}\n\n.circle {\n background-color: #ff7979;\n height: 200px;\n width: 200px;\n border-radius: 50%;\n position: relative;\n transition: transform 0.5s linear;\n}\n\n.container.show-nav .circle {\n transform: rotate(-70deg);\n}\n\n.circle button {\n cursor: pointer;\n position: absolute;\n top: 50%;\n left: 50%;\n height: 100px;\n background: transparent;\n border: 0;\n font-size: 26px;\n color: #fff;\n}\n\n.circle button:focus {\n outline: none;\n}\n\n.circle button#open {\n left: 60%;\n}\n\n.circle button#close {\n top: 60%;\n transform: rotate(90deg);\n transform-origin: top left;\n}\n\n.container.show-nav + nav li {\n transform: translateX(0);\n transition-delay: 0.3s;\n}\n\nnav {\n position: fixed;\n bottom: 40px;\n left: 0;\n z-index: 100;\n}\n\nnav ul {\n list-style-type: none;\n padding-left: 30px;\n}\n\nnav ul li {\n text-transform: uppercase;\n color: #fff;\n margin: 40px 0;\n transform: translateX(-100%);\n transition: transform 0.4s ease-in;\n}\n\nnav ul li i {\n font-size: 20px;\n margin-right: 10px;\n}\n\nnav ul li + li {\n margin-left: 15px;\n transform: translateX(-150%);\n}\n\nnav ul li + li + li {\n margin-left: 30px;\n transform: translateX(-200%);\n}\n\nnav a{\n color: #fafafa;\n text-decoration: none;\n transition: all 0.5s;\n}\n\nnav a:hover {\n color: #FF7979;\n font-weight: bold;\n}\n\n.content img {\n max-width: 100%;\n}\n\n.content {\n max-width: 1000px;\n margin: 50px auto;\n}\n\n.content h1 {\n margin: 0;\n}\n\n.content small {\n color: #555;\n font-style: italic;\n}\n\n.content p {\n color: #333;\n line-height: 1.5;\n}\n"
},
{
"path": "scroll-animation/index.html",
"content": "\n\n \n \n \n \n \n
\n\n \n \n \n
\n \n ![\"doggy\"](\"https://images.unsplash.com/photo-1507146426996-ef05306b995a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80\")
\n
\n Amazing Article
\n Florin Pop\nLorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium quia in ratione dolores cupiditate, maxime aliquid impedit dolorem nam dolor omnis atque fuga labore modi veritatis porro laborum minus, illo, maiores recusandae cumque ipsa quos. Tenetur, consequuntur mollitia labore pariatur sunt quia harum aut. Eum maxime dolorem provident natus veritatis molestiae cumque quod voluptates ab non, tempore cupiditate? Voluptatem, molestias culpa. Corrupti, laudantium iure aliquam rerum sint nam quas dolor dignissimos in error placeat quae temporibus minus optio eum soluta cupiditate! Cupiditate saepe voluptates laudantium. Ducimus consequuntur perferendis consequatur nobis exercitationem molestias fugiat commodi omnis. Asperiores quia tenetur nemo ipsa.
\n\nMy Dog
\n\n Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit libero deleniti rerum quo, incidunt vel consequatur culpa ullam. Magnam facere earum unde harum. Ea culpa veritatis magnam at aliquid. Perferendis totam placeat molestias illo laudantium? Minus id minima doloribus dolorum fugit deserunt qui vero voluptas, ut quia cum amet temporibus veniam ad ea ab perspiciatis, enim accusamus asperiores explicabo provident. Voluptates sint, neque fuga cum illum, tempore autem maxime similique laborum odio, magnam esse. Aperiam?
\nScroll to see the animation
\nContent
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
\r\n \r\n
\r\n \r\n Timer
\r\n\r\n \r\n00:00
\r\n\r\n \r\n\r\n \r\n
\r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n\r\n"
},
{
"path": "simple-timer/script.js",
"content": "const resetBtn = document.querySelector('#reset');\r\nconst playBtn = document.querySelector('#play');\r\nconst timerEl = document.querySelector('#timer');\r\nconst root = document.querySelector(':root');\r\n\r\n// Initial setup\r\nconst totalSeconds = 60;\r\nlet playing = false;\r\nlet currentSeconds = totalSeconds;\r\ntimerEl.innerText = formatTime(totalSeconds);\r\n\r\nconst timerInterval = setInterval(run, 1000);\r\n\r\nplayBtn.addEventListener('click', () => {\r\n playing = !playing;\r\n playBtn.classList.toggle('play');\r\n playBtn.classList.toggle('bg-green-500'); // Toggle the color class\r\n const playIcon = playBtn.querySelector('i');\r\n playIcon.classList.toggle('fa-play'); // Toggle the play icon\r\n playIcon.classList.toggle('fa-pause'); // Toggle the pause icon\r\n});\r\nresetBtn.addEventListener('click', resetAll);\r\n\r\n// Run the timer\r\nfunction run() {\r\n if (playing) {\r\n currentSeconds -= 1;\r\n if (currentSeconds <= 0) {\r\n clearInterval(timerInterval);\r\n resetAll();\r\n }\r\n\r\n timerEl.innerText = formatTime(currentSeconds);\r\n root.style.setProperty('--degrees', calcDeg());\r\n }\r\n}\r\n\r\n// Format the time\r\nfunction formatTime(seconds) {\r\n const minutes = Math.floor(seconds / 60);\r\n const newSeconds = seconds % 60;\r\n\r\n return `${minutes.toString().padStart(2, '0')}:${newSeconds\r\n .toString()\r\n .padStart(2, '0')}`;\r\n}\r\n\r\n// Calculate the degrees\r\nfunction calcDeg() {\r\n return `${360 - (currentSeconds / totalSeconds) * 360}deg`;\r\n}\r\n\r\n// Reset all the values\r\nfunction resetAll() {\r\n playing = false;\r\n playBtn.classList.remove('play');\r\n playBtn.classList.remove('bg-green-500'); // Remove the color class\r\n const playIcon = playBtn.querySelector('i');\r\n playIcon.classList.remove('fa-pause'); // Remove the pause icon\r\n playIcon.classList.add('fa-play'); // Add the play icon\r\n currentSeconds = totalSeconds;\r\n timerEl.innerText = formatTime(totalSeconds);\r\n root.style.setProperty('--degrees', '0deg');\r\n}\r\n"
},
{
"path": "simple-timer/style.css",
"content": ":root {\r\n --degrees: 0deg;\r\n}\r\n\r\n.bg-conic {\r\n background: conic-gradient(\r\n transparent 0deg,\r\n transparent var(--degrees),\r\n white var(--degrees),\r\n white 360deg\r\n );\r\n}\r\n\r\n.hand {\r\n transform-origin: bottom center;\r\n transform: rotate(var(--degrees));\r\n}\r\n"
},
{
"path": "sound-board/index.html",
"content": "\n\n \n \n \n \n \n
\n\n \n
\n Welcome To My Website
\nLorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores, consequuntur?
\nContent One
\nLorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione dolorem voluptates eveniet tempora ut cupiditate magnam, sapiente, hic quo in ipsum iste soluta eaque perferendis nihil recusandae dolore officia aperiam corporis similique. Facilis quos tempore labore totam! Consectetur molestiae iusto ducimus error reiciendis aspernatur dolor, modi dolorem sit architecto, voluptate magni sunt unde est quas? Voluptates a dolorum voluptatum quo perferendis aut sit. Aspernatur libero laboriosam ab eligendi omnis delectus earum labore, placeat officiis sint illum rem voluptas ipsum repellendus iste eius recusandae quae excepturi facere, iure rerum sequi? Illum velit delectus dicta et iste dolorum obcaecati minus odio eligendi!
\n\nContent Two
\nLorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur provident nostrum possimus inventore nisi laboriosam consequatur modi nulla eos, commodi, omnis distinctio! Maxime distinctio impedit provident, voluptates illo odio nostrum minima beatae similique a sint sapiente voluptatum atque optio illum est! Tenetur tempora doloremque quae iste aperiam hic cumque repellat?
\n\n \n \n \n
\n \n \n\n"
},
{
"path": "testimonial-box-switcher/script.js",
"content": "const testimonialsContainer = document.querySelector('.testimonials-container')\nconst testimonial = document.querySelector('.testimonial')\nconst userImage = document.querySelector('.user-image')\nconst username = document.querySelector('.username')\nconst role = document.querySelector('.role')\n\nconst testimonials = [\n {\n name: 'Miyah Myles',\n position: 'Marketing',\n photo:\n 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=707b9c33066bf8808c934c8ab394dff6',\n text:\n \"I've worked with literally hundreds of HTML/CSS developers and I have to say the top spot goes to this guy. This guy is an amazing developer. He stresses on good, clean code and pays heed to the details. I love developers who respect each and every aspect of a throughly thought out design and do their best to put it in code. He goes over and beyond and transforms ART into PIXELS - without a glitch, every time.\",\n },\n {\n name: 'June Cha',\n position: 'Software Engineer',\n photo: 'https://randomuser.me/api/portraits/women/44.jpg',\n text:\n 'This guy is an amazing frontend developer that delivered the task exactly how we need it, do your self a favor and hire him, you will not be disappointed by the work delivered. He will go the extra mile to make sure that you are happy with your project. I will surely work again with him!',\n },\n {\n name: 'Iida Niskanen',\n position: 'Data Entry',\n photo: 'https://randomuser.me/api/portraits/women/68.jpg',\n text:\n \"This guy is a hard worker. Communication was also very good with him and he was very responsive all the time, something not easy to find in many freelancers. We'll definitely repeat with him.\",\n },\n {\n name: 'Renee Sims',\n position: 'Receptionist',\n photo: 'https://randomuser.me/api/portraits/women/65.jpg',\n text:\n \"This guy does everything he can to get the job done and done right. This is the second time I've hired him, and I'll hire him again in the future.\",\n },\n {\n name: 'Jonathan Nunfiez',\n position: 'Graphic Designer',\n photo: 'https://randomuser.me/api/portraits/men/43.jpg',\n text:\n \"I had my concerns that due to a tight deadline this project can't be done. But this guy proved me wrong not only he delivered an outstanding work but he managed to deliver 1 day prior to the deadline. And when I asked for some revisions he made them in MINUTES. I'm looking forward to work with him again and I totally recommend him. Thanks again!\",\n },\n {\n name: 'Sasha Ho',\n position: 'Accountant',\n photo:\n 'https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?h=350&auto=compress&cs=tinysrgb',\n text:\n 'This guy is a top notch designer and front end developer. He communicates well, works fast and produces quality work. We have been lucky to work with him!',\n },\n {\n name: 'Veeti Seppanen',\n position: 'Director',\n photo: 'https://randomuser.me/api/portraits/men/97.jpg',\n text:\n 'This guy is a young and talented IT professional, proactive and responsible, with a strong work ethic. He is very strong in PSD2HTML conversions and HTML/CSS technology. He is a quick learner, eager to learn new technologies. He is focused and has the good dynamics to achieve due dates and outstanding results.',\n },\n]\n\nlet idx = 1\n\nfunction updateTestimonial() {\n const { name, position, photo, text } = testimonials[idx]\n\n testimonial.innerHTML = text\n userImage.src = photo\n username.innerHTML = name\n role.innerHTML = position\n\n idx++\n\n if (idx > testimonials.length - 1) {\n idx = 0\n }\n}\n\nsetInterval(updateTestimonial, 10000)\n"
},
{
"path": "testimonial-box-switcher/style.css",
"content": "@import url('https://fonts.googleapis.com/css?family=Montserrat');\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n background-color: #f4f4f4;\n font-family: 'Montserrat', sans-serif;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100vh;\n overflow: hidden;\n margin: 0;\n padding: 10px;\n}\n\n.testimonial-container {\n background-color: #476ce4;\n color: #fff;\n border-radius: 15px;\n margin: 20px auto;\n padding: 50px 80px;\n max-width: 768px;\n position: relative;\n}\n\n.fa-quote {\n color: rgba(255, 255, 255, 0.3);\n font-size: 28px;\n position: absolute;\n top: 70px;\n}\n\n.fa-quote-right {\n left: 40px;\n}\n\n.fa-quote-left {\n right: 40px;\n}\n\n.testimonial {\n line-height: 28px;\n text-align: justify;\n}\n\n.user {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.user .user-image {\n border-radius: 50%;\n height: 75px;\n width: 75px;\n object-fit: cover;\n}\n\n.user .user-details {\n margin-left: 10px;\n}\n\n.user .username {\n margin: 0;\n}\n\n.user .role {\n font-weight: normal;\n margin: 10px 0;\n}\n\n.progress-bar {\n background-color: #fff;\n height: 4px;\n width: 100%;\n animation: grow 10s linear infinite;\n transform-origin: left;\n}\n\n@keyframes grow {\n 0% {\n transform: scaleX(0);\n }\n}\n\n@media (max-width: 768px) {\n .testimonial-container {\n padding: 20px 30px;\n }\n\n .fa-quote {\n display: none;\n }\n}\n"
},
{
"path": "theme-clock/index.html",
"content": "\n\n \n \n \n \n \n I've worked with literally hundreds of HTML/CSS developers and I have to\n say the top spot goes to this guy. This guy is an amazing developer. He\n stresses on good, clean code and pays heed to the details. I love\n developers who respect each and every aspect of a throughly thought out\n design and do their best to put it in code. He goes over and beyond and\n transforms ART into PIXELS - without a glitch, every time.\n
\n\n
\n \n
\n Miyah Myles
\nMarketing
\n\n
\n\n \n \n\n"
},
{
"path": "theme-clock/script.js",
"content": "const hourEl = document.querySelector('.hour')\nconst minuteEl = document.querySelector('.minute')\nconst secondEl = document.querySelector('.second')\nconst timeEl = document.querySelector('.time')\nconst dateEl = document.querySelector('.date')\nconst toggle = document.querySelector('.toggle')\n\nconst days = [\"Sunday\", \"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\"];\nconst months = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"];\n\ntoggle.addEventListener('click', (e) => {\n const html = document.querySelector('html')\n if (html.classList.contains('dark')) {\n html.classList.remove('dark')\n e.target.innerHTML = 'Dark mode'\n } else {\n html.classList.add('dark')\n e.target.innerHTML = 'Light mode'\n }\n})\n\nfunction setTime() {\n const time = new Date();\n const month = time.getMonth()\n const day = time.getDay()\n const date = time.getDate()\n const hours = time.getHours()\n const hoursForClock = hours >= 13 ? hours % 12 : hours;\n const minutes = time.getMinutes()\n const seconds = time.getSeconds()\n const ampm = hours >= 12 ? 'PM' : 'AM'\n\n hourEl.style.transform = `translate(-50%, -100%) rotate(${scale(hoursForClock, 0, 12, 0, 360)}deg)`\n minuteEl.style.transform = `translate(-50%, -100%) rotate(${scale(minutes, 0, 60, 0, 360)}deg)`\n secondEl.style.transform = `translate(-50%, -100%) rotate(${scale(seconds, 0, 60, 0, 360)}deg)`\n\n timeEl.innerHTML = `${hoursForClock}:${minutes < 10 ? `0${minutes}` : minutes} ${ampm}`\n dateEl.innerHTML = `${days[day]}, ${months[month]} ${date}`\n}\n\n// StackOverflow https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers\nconst scale = (num, in_min, in_max, out_min, out_max) => {\n return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;\n}\n\nsetTime()\n\nsetInterval(setTime, 1000)\n"
},
{
"path": "theme-clock/style.css",
"content": "@import url('https://fonts.googleapis.com/css?family=Heebo:300&display=swap');\n\n* {\n box-sizing: border-box;\n}\n\n:root {\n --primary-color: #000;\n --secondary-color: #fff;\n}\n\nhtml {\n transition: all 0.5s ease-in;\n}\n\nhtml.dark {\n --primary-color: #fff;\n --secondary-color: #333;\n}\n\nhtml.dark {\n background-color: #111;\n color: var(--primary-color);\n}\n\nbody {\n font-family: 'Heebo', sans-serif;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100vh;\n overflow: hidden;\n margin: 0;\n}\n\n.toggle {\n cursor: pointer;\n background-color: var(--primary-color);\n color: var(--secondary-color);\n border: 0;\n border-radius: 4px;\n padding: 8px 12px;\n position: absolute;\n top: 100px;\n}\n\n.toggle:focus {\n outline: none;\n}\n\n.clock-container {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n}\n\n.clock {\n position: relative;\n width: 200px;\n height: 200px;\n}\n\n.needle {\n background-color: var(--primary-color);\n position: absolute;\n top: 50%;\n left: 50%;\n height: 65px;\n width: 3px;\n transform-origin: bottom center;\n transition: all 0.5s ease-in linear;\n}\n\n.needle.hour {\n transform: translate(-50%, -100%) rotate(0deg);\n}\n\n.needle.minute {\n transform: translate(-50%, -100%) rotate(0deg);\n height: 100px;\n}\n\n.needle.second {\n transform: translate(-50%, -100%) rotate(0deg);\n height: 100px;\n background-color: #e74c3c;\n}\n\n.center-point {\n background-color: #e74c3c;\n width: 10px;\n height: 10px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border-radius: 50%;\n}\n\n.center-point::after {\n content: '';\n background-color: var(--primary-color);\n width: 5px;\n height: 5px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border-radius: 50%;\n}\n\n.time {\n font-size: 60px;\n}\n\n.date {\n color: #aaa;\n font-size: 14px;\n letter-spacing: 0.3px;\n text-transform: uppercase;\n}\n\n.date .circle {\n background-color: var(--primary-color);\n color: var(--secondary-color);\n border-radius: 50%;\n height: 18px;\n width: 18px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n line-height: 18px;\n transition: all 0.5s ease-in;\n font-size: 12px;\n}"
},
{
"path": "toast-notification/index.html",
"content": "\n\n \n \n \n \n \n \n \n \n \n
\n\n \n \n todos
\n \n Left click to toggle completed.Right click to delete todo\n\n \n \n\n" }, { "path": "todo-list/script.js", "content": "const form = document.getElementById('form')\nconst input = document.getElementById('input')\nconst todosUL = document.getElementById('todos')\n\nconst todos = JSON.parse(localStorage.getItem('todos'))\n\nif(todos) {\n todos.forEach(todo => addTodo(todo))\n}\n\nform.addEventListener('submit', (e) => {\n e.preventDefault()\n\n addTodo()\n})\n\nfunction addTodo(todo) {\n let todoText = input.value\n\n if(todo) {\n todoText = todo.text\n }\n\n if(todoText) {\n const todoEl = document.createElement('li')\n if(todo && todo.completed) {\n todoEl.classList.add('completed')\n }\n\n todoEl.innerText = todoText\n\n todoEl.addEventListener('click', () => {\n todoEl.classList.toggle('completed')\n updateLS()\n }) \n\n todoEl.addEventListener('contextmenu', (e) => {\n e.preventDefault()\n\n todoEl.remove()\n updateLS()\n }) \n\n todosUL.appendChild(todoEl)\n\n input.value = ''\n\n updateLS()\n }\n}\n\nfunction updateLS() {\n todosEl = document.querySelectorAll('li')\n\n const todos = []\n\n todosEl.forEach(todoEl => {\n todos.push({\n text: todoEl.innerText,\n completed: todoEl.classList.contains('completed')\n })\n })\n\n localStorage.setItem('todos', JSON.stringify(todos))\n}" }, { "path": "todo-list/style.css", "content": "@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n background-color: #f5f5f5;\n color: #444;\n font-family: 'Poppins', sans-serif;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100vh;\n margin: 0;\n}\n\nh1 {\n color: rgb(179, 131, 226);\n font-size: 10rem;\n text-align: center;\n opacity: 0.4;\n}\n\nform {\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);\n max-width: 100%;\n width: 400px;\n}\n\n.input {\n border: none;\n color: #444;\n font-size: 2rem;\n padding: 1rem 2rem;\n display: block;\n width: 100%;\n}\n\n.input::placeholder {\n color: #d5d5d5;\n}\n\n.input:focus {\n outline-color: rgb(179, 131, 226);\n}\n\n.todos {\n background-color: #fff;\n padding: 0;\n margin: 0;\n list-style-type: none;\n}\n\n.todos li {\n border-top: 1px solid #e5e5e5;\n cursor: pointer;\n font-size: 1.5rem;\n padding: 1rem 2rem;\n}\n\n.todos li.completed {\n color: #b6b6b6;\n text-decoration: line-through;\n}\n\nsmall {\n color: #b5b5b5;\n margin-top: 3rem;\n text-align: center;\n}\n" }, { "path": "verify-account-ui/index.html", "content": "\n\n \n \n \n \n
\n
\n \n \n\n"
},
{
"path": "verify-account-ui/script.js",
"content": "const codes = document.querySelectorAll('.code')\n\ncodes[0].focus()\n\ncodes.forEach((code, idx) => {\n code.addEventListener('keydown', (e) => {\n if(e.key >= 0 && e.key <=9) {\n codes[idx].value = ''\n setTimeout(() => codes[idx + 1].focus(), 10)\n } else if(e.key === 'Backspace') {\n setTimeout(() => codes[idx - 1].focus(), 10)\n }\n })\n})"
},
{
"path": "verify-account-ui/style.css",
"content": "@import url('https://fonts.googleapis.com/css?family=Muli:300,700&display=swap');\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n background-color: #fbfcfe;\n font-family: 'Muli', sans-serif;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100vh;\n overflow: hidden;\n margin: 0;\n}\n\n.container {\n background-color: #fff;\n border: 3px #000 solid;\n border-radius: 10px;\n padding: 30px;\n max-width: 1000px;\n text-align: center;\n}\n\n.code-container {\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 40px 0;\n}\n\n.code {\n caret-color: transparent;\n border-radius: 5px;\n font-size: 75px;\n height: 120px;\n width: 100px;\n border: 1px solid #eee;\n margin: 1%;\n text-align: center;\n font-weight: 300;\n -moz-appearance: textfield;\n}\n\n.code::-webkit-outer-spin-button,\n.code::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\n.code:valid {\n border-color: #3498db;\n box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.25);\n}\n\n.info {\n background-color: #eaeaea;\n display: inline-block;\n padding: 10px;\n line-height: 20px;\n max-width: 400px;\n color: #777;\n border-radius: 5px;\n}\n\n@media (max-width: 600px) {\n .code-container {\n flex-wrap: wrap;\n }\n\n .code {\n font-size: 60px;\n height: 80px;\n max-width: 70px;\n }\n}\n"
}
]Verify Your Account
\nWe emailed you the six digit code to cool_guy@email.com
Enter the code below to confirm your email address.
\n \n \n \n \n \n \n
\n \n This is design only. We didn't actually send you an email as we don't have your email, right?\n \n