Repository: bradtraversy/50projects50days Branch: master Commit: c92b0bc3a87f Files: 159 Total size: 176.5 KB Directory structure: gitextract_82g65fro/ ├── .gitignore ├── 3d-boxes-background/ │ ├── index.html │ ├── script.js │ └── style.css ├── LICENSE ├── README.md ├── _project_starter_/ │ ├── index.html │ ├── script.js │ └── style.css ├── animated-countdown/ │ ├── index.html │ ├── script.js │ └── style.css ├── animated-navigation/ │ ├── index.html │ ├── script.js │ └── style.css ├── auto-text-effect/ │ ├── index.html │ ├── script.js │ └── style.css ├── background-slider/ │ ├── index.html │ ├── script.js │ └── style.css ├── blurry-loading/ │ ├── index.html │ ├── script.js │ └── style.css ├── button-ripple-effect/ │ ├── index.html │ ├── script.js │ └── style.css ├── content-placeholder/ │ ├── index.html │ ├── script.js │ └── style.css ├── custom-range-slider/ │ ├── .vscode/ │ │ └── settings.json │ ├── index.html │ ├── script.js │ └── style.css ├── dad-jokes/ │ ├── index.html │ ├── script.js │ └── style.css ├── double-click-heart/ │ ├── index.html │ ├── script.js │ └── style.css ├── double-vertical-slider/ │ ├── index.html │ ├── script.js │ └── style.css ├── drag-n-drop/ │ ├── index.html │ ├── script.js │ └── style.css ├── drawing-app/ │ ├── index.html │ ├── script.js │ └── style.css ├── drink-water/ │ ├── index.html │ ├── script.js │ └── style.css ├── event-keycodes/ │ ├── dark-style.css │ ├── index.html │ └── script.js ├── expanding-cards/ │ ├── index.html │ ├── script.js │ └── style.css ├── faq-collapse/ │ ├── index.html │ ├── script.js │ └── style.css ├── feedback-ui-design/ │ ├── index.html │ ├── script.js │ └── style.css ├── form-input-wave/ │ ├── index.html │ ├── script.js │ └── style.css ├── github-profiles/ │ ├── index.html │ ├── script.js │ └── style.css ├── good-cheap-fast/ │ ├── index.html │ ├── script.js │ └── style.css ├── hidden-search/ │ ├── index.html │ ├── script.js │ └── style.css ├── hoverboard/ │ ├── index.html │ ├── script.js │ └── style.css ├── image-carousel/ │ ├── index.html │ ├── script.js │ └── style.css ├── incrementing-counter/ │ ├── index.html │ ├── script.js │ └── style.css ├── insect-catch-game/ │ ├── index.html │ ├── script.js │ └── style.css ├── kinetic-loader/ │ ├── index.html │ └── style.css ├── live-user-filter/ │ ├── index.html │ ├── script.js │ └── style.css ├── mobile-tab-navigation/ │ ├── index.html │ ├── script.js │ └── style.css ├── movie-app/ │ ├── index.html │ ├── script.js │ └── style.css ├── netflix-mobile-navigation/ │ ├── index.html │ ├── script.js │ └── style.css ├── notes-app/ │ ├── index.html │ ├── script.js │ └── style.css ├── password-generator/ │ ├── index.html │ ├── script.js │ └── style.css ├── password-strength-background/ │ ├── index.html │ ├── script.js │ └── style.css ├── pokedex/ │ ├── index.html │ ├── script.js │ └── style.css ├── progress-steps/ │ ├── index.html │ ├── script.js │ └── style.css ├── quiz-app/ │ ├── index.html │ ├── script.js │ └── style.css ├── random-choice-picker/ │ ├── index.html │ ├── script.js │ └── style.css ├── random-image-generator/ │ ├── index.html │ ├── script.js │ └── style.css ├── rotating-nav-animation/ │ ├── index.html │ ├── script.js │ └── style.css ├── scroll-animation/ │ ├── index.html │ ├── script.js │ └── style.css ├── simple-timer/ │ ├── index.html │ ├── script.js │ └── style.css ├── sound-board/ │ ├── index.html │ ├── script.js │ └── style.css ├── split-landing-page/ │ ├── index.html │ ├── script.js │ └── style.css ├── sticky-navigation/ │ ├── index.html │ ├── script.js │ └── style.css ├── testimonial-box-switcher/ │ ├── index.html │ ├── script.js │ └── style.css ├── theme-clock/ │ ├── index.html │ ├── script.js │ └── style.css ├── toast-notification/ │ ├── index.html │ ├── script.js │ └── style.css ├── todo-list/ │ ├── index.html │ ├── script.js │ └── style.css └── verify-account-ui/ ├── index.html ├── script.js └── style.css ================================================ FILE CONTENTS ================================================ ================================================ FILE: .gitignore ================================================ .DS_Store ================================================ FILE: 3d-boxes-background/index.html ================================================ 3D Boxes Background
================================================ FILE: 3d-boxes-background/script.js ================================================ const boxesContainer = document.getElementById('boxes') const btn = document.getElementById('btn') btn.addEventListener('click', () => boxesContainer.classList.toggle('big')) function createBoxes() { for (let i = 0; i < 4; i++) { for (let j = 0; j < 4; j++) { const box = document.createElement('div') box.classList.add('box') box.style.backgroundPosition = `${-j * 125}px ${-i * 125}px` boxesContainer.appendChild(box) } } } createBoxes() ================================================ FILE: 3d-boxes-background/style.css ================================================ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); * { box-sizing: border-box; } body { background-color: #fafafa; font-family: 'Roboto', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; } .magic { background-color: #f9ca24; color: #fff; font-family: 'Poppins', sans-serif; border: 0; border-radius: 3px; font-size: 16px; padding: 12px 20px; cursor: pointer; position: fixed; top: 20px; letter-spacing: 1px; box-shadow: 0 3px rgba(249, 202, 36, 0.5); z-index: 100; } .magic:focus { outline: none; } .magic:active { box-shadow: none; transform: translateY(2px); } .boxes { display: flex; flex-wrap: wrap; justify-content: space-around; height: 500px; width: 500px; position: relative; transition: 0.4s ease; } .boxes.big { width: 600px; height: 600px; } .boxes.big .box { transform: rotateZ(360deg); } .box { background-image: url('https://media.giphy.com/media/EZqwsBSPlvSda/giphy.gif'); background-repeat: no-repeat; background-size: 500px 500px; position: relative; height: 125px; width: 125px; transition: 0.4s ease; } .box::after { content: ''; background-color: #f6e58d; position: absolute; top: 8px; right: -15px; height: 100%; width: 15px; transform: skewY(45deg); } .box::before { content: ''; background-color: #f9ca24; position: absolute; bottom: -15px; left: 8px; height: 15px; width: 100%; transform: skewX(45deg); } ================================================ FILE: LICENSE ================================================ MIT License Copyright (c) 2022 Brad Traversy Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================ # 50 Projects in 50 Days - HTML/CSS and JavaScript This is the main repository for all of the projects in the course. - [Course Link](https://www.traversymedia.com/50-Projects-In-50-Days) | # | Project | Live Demo | | :-: | --------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | | 01 | [Expanding Cards](https://github.com/bradtraversy/50projects50days/tree/master/expanding-cards) | [Live Demo](https://50projects50days.com/projects/expanding-cards/) | | 02 | [Progress Steps](https://github.com/bradtraversy/50projects50days/tree/master/progress-steps) | [Live Demo](https://50projects50days.com/projects/progress-steps/) | | 03 | [Rotating Navigation Animation](https://github.com/bradtraversy/50projects50days/tree/master/rotating-nav-animation) | [Live Demo](https://50projects50days.com/projects/rotating-navigation-animation/) | | 04 | [Hidden Search Widget](https://github.com/bradtraversy/50projects50days/tree/master/hidden-search) | [Live Demo](https://50projects50days.com/projects/hidden-search-widget/) | | 05 | [Blurry Loading](https://github.com/bradtraversy/50projects50days/tree/master/blurry-loading) | [Live Demo](https://50projects50days.com/projects/blurry-loading/) | | 06 | [Scroll Animation](https://github.com/bradtraversy/50projects50days/tree/master/scroll-animation) | [Live Demo](https://50projects50days.com/projects/scroll-animation/) | | 07 | [Split Landing Page](https://github.com/bradtraversy/50projects50days/tree/master/split-landing-page) | [Live Demo](https://50projects50days.com/projects/split-landing-page/) | | 08 | [Form Wave](https://github.com/bradtraversy/50projects50days/tree/master/form-input-wave) | [Live Demo](https://50projects50days.com/projects/form-wave/) | | 09 | [Sound Board](https://github.com/bradtraversy/50projects50days/tree/master/sound-board) | [Live Demo](https://50projects50days.com/projects/sound-board/) | | 10 | [Dad Jokes](https://github.com/bradtraversy/50projects50days/tree/master/dad-jokes) | [Live Demo](https://50projects50days.com/projects/dad-jokes/) | | 11 | [Event Keycodes](https://github.com/bradtraversy/50projects50days/tree/master/event-keycodes) | [Live Demo](https://50projects50days.com/projects/event-keycodes/) | | 12 | [Faq Collapse](https://github.com/bradtraversy/50projects50days/tree/master/faq-collapse) | [Live Demo](https://50projects50days.com/projects/faq-collapse/) | | 13 | [Random Choice Picker](https://github.com/bradtraversy/50projects50days/tree/master/random-choice-picker) | [Live Demo](https://50projects50days.com/projects/random-choice-picker/) | | 14 | [Animated Navigation](https://github.com/bradtraversy/50projects50days/tree/master/animated-navigation) | [Live Demo](https://50projects50days.com/projects/animated-navigation/) | | 15 | [Incrementing Counter](https://github.com/bradtraversy/50projects50days/tree/master/incrementing-counter) | [Live Demo](https://50projects50days.com/projects/incrementing-counter/) | | 16 | [Drink Water](https://github.com/bradtraversy/50projects50days/tree/master/drink-water) | [Live Demo](https://50projects50days.com/projects/drink-water/) | | 17 | [Movie App](https://github.com/bradtraversy/50projects50days/tree/master/movie-app) | [Live Demo](https://50projects50days.com/projects/movie-app/) | | 18 | [Background Slider](https://github.com/bradtraversy/50projects50days/tree/master/background-slider) | [Live Demo](https://50projects50days.com/projects/background-slider/) | | 19 | [Theme Clock](https://github.com/bradtraversy/50projects50days/tree/master/theme-clock) | [Live Demo](https://50projects50days.com/projects/theme-clock/) | | 20 | [Button Ripple Effect](https://github.com/bradtraversy/50projects50days/tree/master/button-ripple-effect) | [Live Demo](https://50projects50days.com/projects/button-ripple-effect/) | | 21 | [Drag N Drop](https://github.com/bradtraversy/50projects50days/tree/master/drag-n-drop) | [Live Demo](https://50projects50days.com/projects/drag-n-drop/) | | 22 | [Drawing App](https://github.com/bradtraversy/50projects50days/tree/master/drawing-app) | [Live Demo](https://50projects50days.com/projects/drawing-app/) | | 23 | [Kinetic Loader](https://github.com/bradtraversy/50projects50days/tree/master/kinetic-loader) | [Live Demo](https://50projects50days.com/projects/kinetic-loader/) | | 24 | [Content Placeholder](https://github.com/bradtraversy/50projects50days/tree/master/content-placeholder) | [Live Demo](https://50projects50days.com/projects/content-placeholder/) | | 25 | [Sticky Navbar](https://github.com/bradtraversy/50projects50days/tree/master/sticky-navigation) | [Live Demo](https://50projects50days.com/projects/sticky-navbar/) | | 26 | [Double Vertical Slider](https://github.com/bradtraversy/50projects50days/tree/master/double-vertical-slider) | [Live Demo](https://50projects50days.com/projects/double-vertical-slider/) | | 27 | [Toast Notification](https://github.com/bradtraversy/50projects50days/tree/master/toast-notification) | [Live Demo](https://50projects50days.com/projects/toast-notification/) | | 28 | [Github Profiles](https://github.com/bradtraversy/50projects50days/tree/master/github-profiles) | [Live Demo](https://50projects50days.com/projects/github-profiles/) | | 29 | [Double Click Heart](https://github.com/bradtraversy/50projects50days/tree/master/double-click-heart) | [Live Demo](https://50projects50days.com/projects/double-click-heart/) | | 30 | [Auto Text Effect](https://github.com/bradtraversy/50projects50days/tree/master/auto-text-effect) | [Live Demo](https://50projects50days.com/projects/auto-text-effect/) | | 31 | [Password Generator](https://github.com/bradtraversy/50projects50days/tree/master/password-generator) | [Live Demo](https://50projects50days.com/projects/password-generator/) | | 32 | [Good Cheap Fast](https://github.com/bradtraversy/50projects50days/tree/master/good-cheap-fast) | [Live Demo](https://50projects50days.com/projects/good-cheap-fast/) | | 33 | [Notes App](https://github.com/bradtraversy/50projects50days/tree/master/notes-app) | [Live Demo](https://50projects50days.com/projects/notes-app/) | | 34 | [Animated Countdown](https://github.com/bradtraversy/50projects50days/tree/master/animated-countdown) | [Live Demo](https://50projects50days.com/projects/animated-countdown/) | | 35 | [Image Carousel](https://github.com/bradtraversy/50projects50days/tree/master/image-carousel) | [Live Demo](https://50projects50days.com/projects/image-carousel/) | | 36 | [Hoverboard](https://github.com/bradtraversy/50projects50days/tree/master/hoverboard) | [Live Demo](https://50projects50days.com/projects/hoverboard/) | | 37 | [Pokedex](https://github.com/bradtraversy/50projects50days/tree/master/pokedex) | [Live Demo](https://50projects50days.com/projects/pokedex/) | | 38 | [Mobile Tab Navigation](https://github.com/bradtraversy/50projects50days/tree/master/mobile-tab-navigation) | [Live Demo](https://50projects50days.com/projects/mobile-tab-navigation/) | | 39 | [Password Strength Background](https://github.com/bradtraversy/50projects50days/tree/master/password-strength-background) | [Live Demo](https://50projects50days.com/projects/password-strength-background/) | | 40 | [3d Background Boxes](https://github.com/bradtraversy/50projects50days/tree/master/3d-boxes-background) | [Live Demo](https://50projects50days.com/projects/3d-background-boxes/) | | 41 | [Verify Account Ui](https://github.com/bradtraversy/50projects50days/tree/master/verify-account-ui) | [Live Demo](https://50projects50days.com/projects/verify-account-ui/) | | 42 | [Live User Filter](https://github.com/bradtraversy/50projects50days/tree/master/live-user-filter) | [Live Demo](https://50projects50days.com/projects/live-user-filter/) | | 43 | [Feedback Ui Design](https://github.com/bradtraversy/50projects50days/tree/master/feedback-ui-design) | [Live Demo](https://50projects50days.com/projects/feedback-ui-design/) | | 44 | [Custom Range Slider](https://github.com/bradtraversy/50projects50days/tree/master/custom-range-slider) | [Live Demo](https://50projects50days.com/projects/custom-range-slider/) | | 45 | [Netflix Mobile Navigation](https://github.com/bradtraversy/50projects50days/tree/master/netflix-mobile-navigation) | [Live Demo](https://50projects50days.com/projects/netflix-mobile-navigation/) | | 46 | [Quiz App](https://github.com/bradtraversy/50projects50days/tree/master/quiz-app) | [Live Demo](https://50projects50days.com/projects/quiz-app/) | | 47 | [Testimonial Box Switcher](https://github.com/bradtraversy/50projects50days/tree/master/testimonial-box-switcher) | [Live Demo](https://50projects50days.com/projects/testimonial-box-switcher/) | | 48 | [Random Image Feed](https://github.com/bradtraversy/50projects50days/tree/master/random-image-generator) | [Live Demo](https://50projects50days.com/projects/random-image-feed/) | | 49 | [Todo List](https://github.com/bradtraversy/50projects50days/tree/master/todo-list) | [Live Demo](https://50projects50days.com/projects/todo-list/) | | 50 | [Insect Catch Game](https://github.com/bradtraversy/50projects50days/tree/master/insect-catch-game) | [Live Demo](https://50projects50days.com/projects/insect-catch-game/) | | 51 | [Simple Timer](https://github.com/bradtraversy/50projects50days/tree/master/simple-timer) | [Live Demo](https://50projects50days.com/projects/simple-timer/) | **NOTE ON PULL REQUESTS**: All of these projects are part of the course. While I do appreciate people trying to make some things prettier or adding new features, we are only accepting pull requests and looking at issues for bug fixes so that the code stays inline with the course ## License The MIT License Copyright (c) 2020-2021 Traversy Media https://traversymedia.com Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 🔹 Software Disclaimer 🔹 🛠️ Provided "As Is" – No guarantees, use at your own risk. 📜 No Warranty – No promises on performance or fitness for any purpose. ⚖️ No Liability – Authors aren't responsible for any damages or claims. 🔄 Use Freely – But at your own discretion and responsibility. 🚀 In short: Use it, but don’t blame us! 😃 ================================================ FILE: _project_starter_/index.html ================================================ My Project

Project Starter

================================================ FILE: _project_starter_/script.js ================================================ ================================================ FILE: _project_starter_/style.css ================================================ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); * { box-sizing: border-box; } body { font-family: 'Roboto', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } ================================================ FILE: animated-countdown/index.html ================================================ Animated Countdown
3 2 1 0

Get Ready

GO

================================================ FILE: animated-countdown/script.js ================================================ const nums = document.querySelectorAll('.nums span') const counter = document.querySelector('.counter') const finalMessage = document.querySelector('.final') const replay = document.querySelector('#replay') runAnimation() function resetDOM() { counter.classList.remove('hide') finalMessage.classList.remove('show') nums.forEach((num) => { num.classList.value = '' }) nums[0].classList.add('in') } function runAnimation() { nums.forEach((num, idx) => { const nextToLast = nums.length - 1 num.addEventListener('animationend', (e) => { if (e.animationName === 'goIn' && idx !== nextToLast) { num.classList.remove('in') num.classList.add('out') } else if (e.animationName === 'goOut' && num.nextElementSibling) { num.nextElementSibling.classList.add('in') } else { counter.classList.add('hide') finalMessage.classList.add('show') } }) }) } replay.addEventListener('click', () => { resetDOM() runAnimation() }) ================================================ FILE: animated-countdown/style.css ================================================ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); * { box-sizing: border-box; } body { font-family: 'Roboto', sans-serif; margin: 0; height: 100vh; overflow: hidden; } h4 { font-size: 20px; margin: 5px; text-transform: uppercase; } .counter { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } .counter.hide { transform: translate(-50%, -50%) scale(0); animation: hide 0.2s ease-out; } @keyframes hide { 0% { transform: translate(-50%, -50%) scale(1); } 100% { transform: translate(-50%, -50%) scale(0); } } .final { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); text-align: center; } .final.show { transform: translate(-50%, -50%) scale(1); animation: show 0.2s ease-out; } @keyframes show { 0% { transform: translate(-50%, -50%) scale(0); } 30% { transform: translate(-50%, -50%) scale(1.4); } 100% { transform: translate(-50%, -50%) scale(1); } } .nums { color: #3498db; font-size: 50px; position: relative; overflow: hidden; width: 250px; height: 50px; } .nums span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(120deg); transform-origin: bottom center; } .nums span.in { transform: translate(-50%, -50%) rotate(0deg); animation: goIn 0.5s ease-in-out; } .nums span.out { animation: goOut 0.5s ease-in-out; } @keyframes goIn { 0% { transform: translate(-50%, -50%) rotate(120deg); } 30% { transform: translate(-50%, -50%) rotate(-20deg); } 60% { transform: translate(-50%, -50%) rotate(10deg); } 100% { transform: translate(-50%, -50%) rotate(0deg); } } @keyframes goOut { 0% { transform: translate(-50%, -50%) rotate(0deg); } 60% { transform: translate(-50%, -50%) rotate(20deg); } 100% { transform: translate(-50%, -50%) rotate(-120deg); } } #replay{ background-color: #3498db; border-radius: 3px; border: none; color: aliceblue; padding: 5px; text-align: center; display: inline-block; cursor: pointer; transition: all 0.3s; } #replay span{ cursor: pointer; display: inline-block; position: relative; transition: 0.3s; } #replay span:after{ content: '\00bb'; position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s; } #replay:hover span{ padding-right: 25px; } #replay:hover span:after{ opacity: 1; right: 0; } ================================================ FILE: animated-navigation/index.html ================================================ Animated Navigation ================================================ FILE: animated-navigation/script.js ================================================ const toggle = document.getElementById('toggle') const nav = document.getElementById('nav') toggle.addEventListener('click', () => nav.classList.toggle('active')) ================================================ FILE: animated-navigation/style.css ================================================ @import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); * { box-sizing: border-box; } body { background-color: #eafbff; background-image: linear-gradient( to bottom, #eafbff 0%, #eafbff 50%, #5290f9 50%, #5290f9 100% ); font-family: 'Muli', sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; } nav { background-color: #fff; padding: 20px; width: 80px; display: flex; align-items: center; justify-content: center; border-radius: 3px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); transition: width 0.6s linear; overflow-x: hidden; } nav.active { width: 350px; } nav ul { display: flex; list-style-type: none; padding: 0; margin: 0; width: 0; transition: width 0.6s linear; } nav.active ul { width: 100%; } nav ul li { transform: rotateY(0deg); opacity: 0; transition: transform 0.6s linear, opacity 0.6s linear; } nav.active ul li { opacity: 1; transform: rotateY(360deg); } nav ul a { position: relative; color: #000; text-decoration: none; margin: 0 10px; } .icon { background-color: #fff; border: 0; cursor: pointer; padding: 0; position: relative; height: 30px; width: 30px; } .icon:focus { outline: 0; } .icon .line { background-color: #5290f9; height: 2px; width: 20px; position: absolute; top: 10px; left: 5px; transition: transform 0.6s linear; } .icon .line2 { top: auto; bottom: 10px; } nav.active .icon .line1 { transform: rotate(-765deg) translateY(5.5px); } nav.active .icon .line2 { transform: rotate(765deg) translateY(-5.5px); } ================================================ FILE: auto-text-effect/index.html ================================================ Auto Text Effect

Starting...

================================================ FILE: auto-text-effect/script.js ================================================ const textEl = document.getElementById('text') const speedEl = document.getElementById('speed') const text = 'We Love Programming!' let idx = 1 let speed = 300 / speedEl.value writeText() function writeText() { textEl.innerText = text.slice(0, idx) idx++ if(idx > text.length) { idx = 1 } setTimeout(writeText, speed) } speedEl.addEventListener('input', (e) => speed = 300 / e.target.value) ================================================ FILE: auto-text-effect/style.css ================================================ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); * { box-sizing: border-box; } body { background-color: darksalmon; font-family: 'Roboto', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } div { position: absolute; bottom: 20px; background: rgba(0, 0, 0, 0.1); padding: 10px 20px; font-size: 18px; } input { width: 50px; padding: 5px; font-size: 18px; background-color: darksalmon; border: none; text-align: center; } input:focus { outline: none; } ================================================ FILE: background-slider/index.html ================================================ Background Slider
================================================ FILE: background-slider/script.js ================================================ const body = document.body const slides = document.querySelectorAll('.slide') const leftBtn = document.getElementById('left') const rightBtn = document.getElementById('right') let activeSlide = 0 rightBtn.addEventListener('click', () => { activeSlide++ if (activeSlide > slides.length - 1) { activeSlide = 0 } setBgToBody() setActiveSlide() }) leftBtn.addEventListener('click', () => { activeSlide-- if (activeSlide < 0) { activeSlide = slides.length - 1 } setBgToBody() setActiveSlide() }) setBgToBody() function setBgToBody() { body.style.backgroundImage = slides[activeSlide].style.backgroundImage } function setActiveSlide() { slides.forEach((slide) => slide.classList.remove('active')) slides[activeSlide].classList.add('active') } ================================================ FILE: background-slider/style.css ================================================ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); * { box-sizing: border-box; } body { font-family: 'Roboto', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; background-position: center center; background-size: cover; transition: 0.4s; } body::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.7); z-index: -1; } .slider-container { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); height: 70vh; width: 70vw; position: relative; overflow: hidden; } .slide { opacity: 0; height: 100vh; width: 100vw; background-position: center center; background-size: cover; position: absolute; top: -15vh; left: -15vw; transition: 0.4s ease; z-index: 1; } .slide.active { opacity: 1; } .arrow { position: fixed; background-color: transparent; color: #fff; padding: 20px; font-size: 30px; border: 2px solid orange; top: 50%; transform: translateY(-50%); cursor: pointer; } .arrow:focus { outline: 0; } .left-arrow { left: calc(15vw - 65px); } .right-arrow { right: calc(15vw - 65px); } ================================================ FILE: blurry-loading/index.html ================================================ Blurry Loading
0%
================================================ FILE: blurry-loading/script.js ================================================ const loadText = document.querySelector('.loading-text') const bg = document.querySelector('.bg') let load = 0 let int = setInterval(blurring, 30) function blurring() { load++ if (load > 99) { clearInterval(int) } loadText.innerText = `${load}%` loadText.style.opacity = scale(load, 0, 100, 1, 0) bg.style.filter = `blur(${scale(load, 0, 100, 30, 0)}px)` } // https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers const scale = (num, in_min, in_max, out_min, out_max) => { return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min } ================================================ FILE: blurry-loading/style.css ================================================ @import url('https://fonts.googleapis.com/css?family=Ubuntu'); * { box-sizing: border-box; } body { font-family: 'Ubuntu', sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .bg { background: url('https://images.unsplash.com/photo-1576161787924-01bb08dad4a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2104&q=80') no-repeat center center/cover; position: absolute; top: -30px; left: -30px; width: calc(100vw + 60px); height: calc(100vh + 60px); z-index: -1; filter: blur(0px); } .loading-text { font-size: 50px; color: #fff; } ================================================ FILE: button-ripple-effect/index.html ================================================ Button Ripple Effect ================================================ FILE: button-ripple-effect/script.js ================================================ const buttons = document.querySelectorAll('.ripple') buttons.forEach(button => { button.addEventListener('click', function (e) { const x = e.pageX const y = e.pageY const buttonTop = e.target.offsetTop const buttonLeft = e.target.offsetLeft const xInside = x - buttonLeft const yInside = y - buttonTop const circle = document.createElement('span') circle.classList.add('circle') circle.style.top = yInside + 'px' circle.style.left = xInside + 'px' this.appendChild(circle) setTimeout(() => circle.remove(), 500) }) }) ================================================ FILE: button-ripple-effect/style.css ================================================ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); * { box-sizing: border-box; } body { background-color: #000; font-family: 'Roboto', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } button { background-color: purple; color: #fff; border: 1px purple solid; font-size: 14px; text-transform: uppercase; letter-spacing: 2px; padding: 20px 30px; overflow: hidden; margin: 10px 0; position: relative; } button:focus { outline: none; } button .circle { position: absolute; background-color: #fff; width: 100px; height: 100px; border-radius: 50%; transform: translate(-50%, -50%) scale(0); animation: scale 0.5s ease-out; } @keyframes scale { to { transform: translate(-50%, -50%) scale(3); opacity: 0; } } ================================================ FILE: content-placeholder/index.html ================================================ Content Placeholder

 

       

 
   
================================================ FILE: content-placeholder/script.js ================================================ const header = document.getElementById('header') const title = document.getElementById('title') const excerpt = document.getElementById('excerpt') const profile_img = document.getElementById('profile_img') const name = document.getElementById('name') const date = document.getElementById('date') const animated_bgs = document.querySelectorAll('.animated-bg') const animated_bg_texts = document.querySelectorAll('.animated-bg-text') setTimeout(getData, 2500) function getData() { header.innerHTML = '' title.innerHTML = 'Lorem ipsum dolor sit amet' excerpt.innerHTML = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore perferendis' profile_img.innerHTML = '' name.innerHTML = 'John Doe' date.innerHTML = 'Oct 08, 2020' animated_bgs.forEach((bg) => bg.classList.remove('animated-bg')) animated_bg_texts.forEach((bg) => bg.classList.remove('animated-bg-text')) } ================================================ FILE: content-placeholder/style.css ================================================ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); * { box-sizing: border-box; } body { background-color: #ecf0f1; font-family: 'Roboto', sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } img { max-width: 100%; } .card { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); border-radius: 10px; overflow: hidden; width: 350px; } .card-header { height: 200px; } .card-header img { object-fit: cover; height: 100%; width: 100%; } .card-content { background-color: #fff; padding: 30px; } .card-title { height: 20px; margin: 0; } .card-excerpt { color: #777; margin: 10px 0 20px; } .author { display: flex; } .profile-img { border-radius: 50%; overflow: hidden; height: 40px; width: 40px; } .author-info { display: flex; flex-direction: column; justify-content: space-around; margin-left: 10px; width: 100px; } .author-info small { color: #aaa; margin-top: 5px; } .animated-bg { background-image: linear-gradient( to right, #f6f7f8 0%, #edeef1 10%, #f6f7f8 20%, #f6f7f8 100% ); background-size: 200% 100%; animation: bgPos 1s linear infinite; } .animated-bg-text { border-radius: 50px; display: inline-block; margin: 0; height: 10px; width: 100%; } @keyframes bgPos { 0% { background-position: 50% 0; } 100% { background-position: -150% 0; } } ================================================ FILE: custom-range-slider/.vscode/settings.json ================================================ { "liveServer.settings.port": 5501 } ================================================ FILE: custom-range-slider/index.html ================================================ Custom Range Slider

Custom Range Slider

================================================ FILE: custom-range-slider/script.js ================================================ const range = document.getElementById('range') range.addEventListener('input', (e) => { const value = +e.target.value const label = e.target.nextElementSibling const range_width = getComputedStyle(e.target).getPropertyValue('width') const label_width = getComputedStyle(label).getPropertyValue('width') const num_width = +range_width.substring(0, range_width.length - 2) const num_label_width = +label_width.substring(0, label_width.length - 2) const max = +e.target.max const min = +e.target.min const left = value * (num_width / max) - num_label_width / 2 + scale(value, min, max, 10, -10) label.style.left = `${left}px` label.innerHTML = value }) // https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers const scale = (num, in_min, in_max, out_min, out_max) => { return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min; } ================================================ FILE: custom-range-slider/style.css ================================================ @import url('https://fonts.googleapis.com/css?family=Lato&display=swap'); * { box-sizing: border-box; } body { background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); font-family: 'Lato', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } h2 { position: absolute; top: 10px; } .range-container { position: relative; } input[type='range'] { width: 300px; margin: 18px 0; -webkit-appearance: none; } input[type='range']:focus { outline: none; } input[type='range'] + label { background-color: #fff; position: absolute; top: -25px; left: 110px; width: 80px; padding: 5px 0; text-align: center; border-radius: 4px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); } /* Chrome & Safari */ input[type='range']::-webkit-slider-runnable-track { background: purple; border-radius: 4px; width: 100%; height: 10px; cursor: pointer; } input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; height: 24px; width: 24px; background: #fff; border-radius: 50%; border: 1px solid purple; margin-top: -7px; cursor: pointer; } /* Firefox */ input[type='range']::-moz-range-track { background: purple; border-radius: 4px; width: 100%; height: 13px; cursor: pointer; } input[type='range']::-moz-range-thumb { -webkit-appearance: none; height: 24px; width: 24px; background: #fff; border-radius: 50%; border: 1px solid purple; margin-top: -7px; cursor: pointer; } /* IE */ input[type='range']::-ms-track { background: purple; border-radius: 4px; width: 100%; height: 13px; cursor: pointer; } input[type='range']::-ms-thumb { -webkit-appearance: none; height: 24px; width: 24px; background: #fff; border-radius: 50%; border: 1px solid purple; margin-top: -7px; cursor: pointer; } ================================================ FILE: dad-jokes/index.html ================================================ Dad Jokes

Don't Laugh Challenge

// Joke goes here
================================================ FILE: dad-jokes/script.js ================================================ const jokeEl = document.getElementById('joke') const jokeBtn = document.getElementById('jokeBtn') jokeBtn.addEventListener('click', generateJoke) generateJoke() // USING ASYNC/AWAIT async function generateJoke() { const config = { headers: { Accept: 'application/json', }, } const res = await fetch('https://icanhazdadjoke.com', config) const data = await res.json() jokeEl.innerHTML = data.joke } // USING .then() // function generateJoke() { // const config = { // headers: { // Accept: 'application/json', // }, // } // fetch('https://icanhazdadjoke.com', config) // .then((res) => res.json()) // .then((data) => { // jokeEl.innerHTML = data.joke // }) // } ================================================ FILE: dad-jokes/style.css ================================================ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); * { box-sizing: border-box; } body { background-color: #686de0; font-family: 'Roboto', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; padding: 20px; } .container { background-color: #fff; border-radius: 10px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1); padding: 50px 20px; text-align: center; max-width: 100%; width: 800px; } h3 { margin: 0; opacity: 0.5; letter-spacing: 2px; } .joke { font-size: 30px; letter-spacing: 1px; line-height: 40px; margin: 50px auto; max-width: 600px; } .btn { background-color: #9f68e0; color: #fff; border: 0; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1); padding: 14px 40px; font-size: 16px; cursor: pointer; } .btn:active { transform: scale(0.98); } .btn:focus { outline: 0; } ================================================ FILE: double-click-heart/index.html ================================================ Double Click Heart

Double click on the image to it

You liked it 0 times
================================================ FILE: double-click-heart/script.js ================================================ const loveMe = document.querySelector('.loveMe') const times = document.querySelector('#times') let clickTime = 0 let timesClicked = 0 loveMe.addEventListener('click', (e) => { if(clickTime === 0) { clickTime = new Date().getTime() } else { if((new Date().getTime() - clickTime) < 800) { createHeart(e) clickTime = 0 } else { clickTime = new Date().getTime() } } }) const createHeart = (e) => { const heart = document.createElement('i') heart.classList.add('fas') heart.classList.add('fa-heart') const x = e.clientX const y = e.clientY const leftOffset = e.target.offsetLeft const topOffset = e.target.offsetTop const xInside = x - leftOffset const yInside = y - topOffset heart.style.top = `${yInside}px` heart.style.left = `${xInside}px` loveMe.appendChild(heart) times.innerHTML = ++timesClicked setTimeout(() => heart.remove(), 1000) } ================================================ FILE: double-click-heart/style.css ================================================ @import url('https://fonts.googleapis.com/css?family=Oswald'); * { box-sizing: border-box; } body { font-family: 'Oswald', sans-serif; text-align: center; overflow: hidden; margin: 0; } h3 { margin-bottom: 0; text-align: center; } small { display: block; margin-bottom: 20px; text-align: center; } .fa-heart { color: red; } .loveMe { height: 440px; width: 300px; background: url('https://images.unsplash.com/photo-1504215680853-026ed2a45def?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80') no-repeat center center/cover; margin: auto; cursor: pointer; max-width: 100%; position: relative; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); overflow: hidden; } .loveMe .fa-heart { position: absolute; animation: grow 0.6s linear; transform: translate(-50%, -50%) scale(0); } @keyframes grow { to { transform: translate(-50%, -50%) scale(10); opacity: 0; } } ================================================ FILE: double-vertical-slider/index.html ================================================ Vertical Slider

Nature flower

all in pink

Bluuue Sky

with it's mountains

Lonely castle

in the wilderness

Flying eagle

in the sunset

================================================ FILE: double-vertical-slider/script.js ================================================ const sliderContainer = document.querySelector('.slider-container') const slideRight = document.querySelector('.right-slide') const slideLeft = document.querySelector('.left-slide') const upButton = document.querySelector('.up-button') const downButton = document.querySelector('.down-button') const slidesLength = slideRight.querySelectorAll('div').length let activeSlideIndex = 0 slideLeft.style.top = `-${(slidesLength - 1) * 100}vh` upButton.addEventListener('click', () => changeSlide('up')) downButton.addEventListener('click', () => changeSlide('down')) const changeSlide = (direction) => { const sliderHeight = sliderContainer.clientHeight if(direction === 'up') { activeSlideIndex++ if(activeSlideIndex > slidesLength - 1) { activeSlideIndex = 0 } } else if(direction === 'down') { activeSlideIndex-- if(activeSlideIndex < 0) { activeSlideIndex = slidesLength - 1 } } slideRight.style.transform = `translateY(-${activeSlideIndex * sliderHeight}px)` slideLeft.style.transform = `translateY(${activeSlideIndex * sliderHeight}px)` } ================================================ FILE: double-vertical-slider/style.css ================================================ @import url('https://fonts.googleapis.com/css?family=Open+Sans'); * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Open Sans', sans-serif; height: 100vh; } .slider-container { position: relative; overflow: hidden; width: 100vw; height: 100vh; } .left-slide { height: 100%; width: 35%; position: absolute; top: 0; left: 0; transition: transform 0.5s ease-in-out; } .left-slide > div { height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; } .left-slide h1 { font-size: 40px; margin-bottom: 10px; margin-top: -30px; } .right-slide { height: 100%; position: absolute; top: 0; left: 35%; width: 65%; transition: transform 0.5s ease-in-out; } .right-slide > div { background-repeat: no-repeat; background-size: cover; background-position: center center; height: 100%; width: 100%; } button { background-color: #fff; border: none; color: #aaa; cursor: pointer; font-size: 16px; padding: 15px; } button:hover { color: #222; } button:focus { outline: none; } .slider-container .action-buttons button { position: absolute; left: 35%; top: 50%; z-index: 100; } .slider-container .action-buttons .down-button { transform: translateX(-100%); border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .slider-container .action-buttons .up-button { transform: translateY(-100%); border-top-right-radius: 5px; border-bottom-right-radius: 5px; } ================================================ FILE: drag-n-drop/index.html ================================================ Drag N Drop
================================================ FILE: drag-n-drop/script.js ================================================ const fill = document.querySelector('.fill') const empties = document.querySelectorAll('.empty') const body = document.body body.addEventListener('dragstart', dragStart) body.addEventListener('dragend', dragEnd) for(const empty of empties) { empty.addEventListener('dragover', dragOver) empty.addEventListener('dragenter', dragEnter) empty.addEventListener('dragleave', dragLeave) empty.addEventListener('drop', dragDrop) } function dragStart(e) { if(!e.target.classList.contains("fill")) { e.preventDefault() return } fill.className += ' hold' setTimeout(() => fill.className = 'invisible', 0) } function dragEnd() { fill.className = 'fill' } function dragOver(e) { e.preventDefault() } function dragEnter(e) { e.preventDefault() this.className += ' hovered' } function dragLeave() { this.className = 'empty' } function dragDrop() { this.className = 'empty' this.append(fill) } ================================================ FILE: drag-n-drop/style.css ================================================ * { box-sizing: border-box; } body { background-color: steelblue; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .empty { height: 150px; width: 150px; margin: 10px; border: solid 3px black; background: white; } .fill { background-image: url('https://source.unsplash.com/random/150x150'); height: 145px; width: 145px; cursor: pointer; } .hold { border: solid 5px #ccc; } .hovered { background-color: #333; border-color: white; border-style: dashed; } @media (max-width: 800px) { body { flex-direction: column; } } ================================================ FILE: drawing-app/index.html ================================================ Drawing App
10
================================================ FILE: drawing-app/script.js ================================================ const canvas = document.getElementById('canvas'); const increaseBtn = document.getElementById('increase'); const decreaseBtn = document.getElementById('decrease'); const sizeEL = document.getElementById('size'); const colorEl = document.getElementById('color'); const clearEl = document.getElementById('clear'); const ctx = canvas.getContext('2d'); let size = 10 let isPressed = false colorEl.value = 'black' let color = colorEl.value let x let y canvas.addEventListener('mousedown', (e) => { isPressed = true x = e.offsetX y = e.offsetY }) document.addEventListener('mouseup', (e) => { isPressed = false x = undefined y = undefined }) canvas.addEventListener('mousemove', (e) => { if(isPressed) { const x2 = e.offsetX const y2 = e.offsetY drawCircle(x2, y2) drawLine(x, y, x2, y2) x = x2 y = y2 } }) function drawCircle(x, y) { ctx.beginPath(); ctx.arc(x, y, size, 0, Math.PI * 2) ctx.fillStyle = color ctx.fill() } function drawLine(x1, y1, x2, y2) { ctx.beginPath() ctx.moveTo(x1, y1) ctx.lineTo(x2, y2) ctx.strokeStyle = color ctx.lineWidth = size * 2 ctx.stroke() } function updateSizeOnScreen() { sizeEL.innerText = size } increaseBtn.addEventListener('click', () => { size += 5 if(size > 50) { size = 50 } updateSizeOnScreen() }) decreaseBtn.addEventListener('click', () => { size -= 5 if(size < 5) { size = 5 } updateSizeOnScreen() }) colorEl.addEventListener('change', (e) => color = e.target.value) clearEl.addEventListener('click', () => ctx.clearRect(0,0, canvas.width, canvas.height)) ================================================ FILE: drawing-app/style.css ================================================ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); * { box-sizing: border-box; } body { background-color: #f5f5f5; font-family: 'Roboto', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; } canvas { border: 2px solid steelblue; } .toolbox { background-color: steelblue; border: 1px solid slateblue; display: flex; width: 804px; padding: 1rem; } .toolbox > * { background-color: #fff; border: none; display: inline-flex; align-items: center; justify-content: center; font-size: 2rem; height: 50px; width: 50px; margin: 0.25rem; padding: 0.25rem; cursor: pointer; } .toolbox > *:last-child { margin-left: auto; } ================================================ FILE: drink-water/index.html ================================================ Drink Water

Drink Water

Goal: 2 Liters

Remained

Select how many glasses of water that you have drank

250 ml
250 ml
250 ml
250 ml
250 ml
250 ml
250 ml
250 ml
================================================ FILE: drink-water/script.js ================================================ const smallCups = document.querySelectorAll('.cup-small') const liters = document.getElementById('liters') const percentage = document.getElementById('percentage') const remained = document.getElementById('remained') updateBigCup() smallCups.forEach((cup, idx) => { cup.addEventListener('click', () => highlightCups(idx)) }) function highlightCups(idx) { if (idx===7 && smallCups[idx].classList.contains("full")) idx--; else if(smallCups[idx].classList.contains('full') && !smallCups[idx].nextElementSibling.classList.contains('full')) { idx-- } smallCups.forEach((cup, idx2) => { if(idx2 <= idx) { cup.classList.add('full') } else { cup.classList.remove('full') } }) updateBigCup() } function updateBigCup() { const fullCups = document.querySelectorAll('.cup-small.full').length const totalCups = smallCups.length if(fullCups === 0) { percentage.style.visibility = 'hidden' percentage.style.height = 0 } else { percentage.style.visibility = 'visible' percentage.style.height = `${fullCups / totalCups * 330}px` percentage.innerText = `${fullCups / totalCups * 100}%` } if(fullCups === totalCups) { remained.style.visibility = 'hidden' remained.style.height = 0 } else { remained.style.visibility = 'visible' liters.innerText = `${2 - (250 * fullCups / 1000)}L` } } ================================================ FILE: drink-water/style.css ================================================ @import url('https://fonts.googleapis.com/css?family=Montserrat:400,600&display=swap'); :root { --border-color: #144fc6; --fill-color: #6ab3f8; } * { box-sizing: border-box; } body { background-color: #3494e4; color: #fff; font-family: 'Montserrat', sans-serif; display: flex; flex-direction: column; align-items: center; margin-bottom: 40px; } h1 { margin: 10px 0 0; } h3 { font-weight: 400; margin: 10px 0; } .cup { background-color: #fff; border: 4px solid var(--border-color); color: var(--border-color); border-radius: 0 0 40px 40px; height: 330px; width: 150px; margin: 30px 0; display: flex; flex-direction: column; overflow: hidden; } .cup.cup-small { height: 95px; width: 50px; border-radius: 0 0 15px 15px; background-color: rgba(255, 255, 255, 0.9); cursor: pointer; font-size: 14px; align-items: center; justify-content: center; text-align: center; margin: 5px; transition: 0.3s ease; } .cup.cup-small.full { background-color: var(--fill-color); color: #fff; } .cups { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; width: 280px; } .remained { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; flex: 1; transition: 0.3s ease; } .remained span { font-size: 20px; font-weight: bold; } .remained small { font-size: 12px; } .percentage { background-color: var(--fill-color); display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 30px; height: 0; transition: 0.3s ease; } .text { text-align: center; margin: 0 0 5px; } ================================================ FILE: event-keycodes/dark-style.css ================================================ @import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); * { box-sizing: border-box; } body { background-color: #383838; font-family: 'Muli', sans-serif; display: flex; align-items: center; justify-content: center; text-align: center; height: 100vh; overflow: hidden; margin: 0; } .key { border: 1px solid #999999; background-color: #2B2B2B; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); display: inline-flex; align-items: center; font-size: 20px; font-weight: bold; padding: 20px; flex-direction: column; margin: 10px; min-width: 150px; color: white; position: relative; } .key small { position: absolute; top: -24px; left: 0; text-align: center; width: 100%; color: #c4c4c4; font-size: 14px; } ================================================ FILE: event-keycodes/index.html ================================================ Event KeyCodes
Press any key to get the keyCode
================================================ FILE: event-keycodes/script.js ================================================ const insert = document.getElementById('insert') window.addEventListener('keydown', (event) => { insert.innerHTML = `
${event.key === ' ' ? 'Space' : event.key} event.key
${event.keyCode} event.keyCode
${event.code} event.code
` }) ================================================ FILE: expanding-cards/index.html ================================================ Expanding Cards

Explore The World

Wild Forest

Sunny Beach

City on Winter

Mountains - Clouds

================================================ FILE: expanding-cards/script.js ================================================ const panels = document.querySelectorAll('.panel') panels.forEach(panel => { panel.addEventListener('click', () => { removeActiveClasses() panel.classList.add('active') }) }) function removeActiveClasses() { panels.forEach(panel => { panel.classList.remove('active') }) } ================================================ FILE: expanding-cards/style.css ================================================ @import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); * { box-sizing: border-box; } body { font-family: 'Muli', sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .container { display: flex; width: 90vw; } .panel { background-size: cover; background-position: center; background-repeat: no-repeat; height: 80vh; border-radius: 50px; color: #fff; cursor: pointer; flex: 0.5; margin: 10px; position: relative; -webkit-transition: all 700ms ease-in; } .panel h3 { font-size: 24px; position: absolute; bottom: 20px; left: 20px; margin: 0; opacity: 0; } .panel.active { flex: 5; } .panel.active h3 { opacity: 1; transition: opacity 0.3s ease-in 0.4s; } @media (max-width: 480px) { .container { width: 100vw; } .panel:nth-of-type(4), .panel:nth-of-type(5) { display: none; } } ================================================ FILE: faq-collapse/index.html ================================================ FAQ

Frequently Asked Questions

Why shouldn't we trust atoms?

They make up everything

What do you call someone with no body and no nose?

Nobody knows.

What's the object-oriented way to become wealthy?

Inheritance.

How many tickles does it take to tickle an octopus?

Ten-tickles!

What is: 1 + 1?

Depends on who are you asking.

================================================ FILE: faq-collapse/script.js ================================================ const toggles = document.querySelectorAll('.faq-toggle') toggles.forEach(toggle => { toggle.addEventListener('click', () => { toggle.parentNode.classList.toggle('active') }) }) ================================================ FILE: faq-collapse/style.css ================================================ @import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); * { box-sizing: border-box; } body { font-family: 'Muli', sans-serif; background-color: #f0f0f0; } h1 { margin: 50px 0 30px; text-align: center; } .faq-container { max-width: 600px; margin: 0 auto; } .faq { background-color: transparent; border: 1px solid #9fa4a8; border-radius: 10px; margin: 20px 0; padding: 30px; position: relative; overflow: hidden; transition: 0.3s ease; } .faq.active { background-color: #fff; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1); } .faq.active::before, .faq.active::after { content: '\f075'; font-family: 'Font Awesome 5 Free'; color: #2ecc71; font-size: 7rem; position: absolute; opacity: 0.2; top: 20px; left: 20px; z-index: 0; } .faq.active::before { color: #3498db; top: -10px; left: -30px; transform: rotateY(180deg); } .faq-title { margin: 0 35px 0 0; } .faq-text { display: none; margin: 30px 0 0; } .faq.active .faq-text { display: block; } .faq-toggle { background-color: transparent; border: 0; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; padding: 0; position: absolute; top: 30px; right: 30px; height: 30px; width: 30px; } .faq-toggle:focus { outline: 0; } .faq-toggle .fa-times { display: none; } .faq.active .faq-toggle .fa-times { color: #fff; display: block; } .faq.active .faq-toggle .fa-chevron-down { display: none; } .faq.active .faq-toggle { background-color: #9fa4a8; } ================================================ FILE: feedback-ui-design/index.html ================================================ Let Us Know Your Feedback
How satisfied are you with our
customer support performance?
Unhappy
Neutral
Satisfied
================================================ FILE: feedback-ui-design/script.js ================================================ const ratings = document.querySelectorAll('.rating') const ratingsContainer = document.querySelector('.ratings-container') const sendBtn = document.querySelector('#send') const panel = document.querySelector('#panel') let selectedRating = 'Satisfied' ratingsContainer.addEventListener('click', (e) => { if(e.target.parentNode.classList.contains('rating') && e.target.nextElementSibling) { removeActive() e.target.parentNode.classList.add('active') selectedRating = e.target.nextElementSibling.innerHTML } else if( e.target.parentNode.classList.contains('rating') && e.target.previousSibling && e.target.previousElementSibling.nodeName === 'IMG' ) { removeActive() e.target.parentNode.classList.add('active') selectedRating = e.target.innerHTML } }) sendBtn.addEventListener('click', (e) => { panel.innerHTML = ` Thank You!
Feedback: ${selectedRating}

We'll use your feedback to improve our customer support

` }) function removeActive() { for(let i = 0; i < ratings.length; i++) { ratings[i].classList.remove('active') } } ================================================ FILE: feedback-ui-design/style.css ================================================ @import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap'); * { box-sizing: border-box; } body { background-color: #fef9f2; font-family: 'Montserrat', sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .panel-container { background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); border-radius: 4px; font-size: 90%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 30px; max-width: 400px; } .panel-container strong { line-height: 20px; } .ratings-container { display: flex; margin: 20px 0; } .rating { flex: 1; cursor: pointer; padding: 20px; margin: 10px 5px; } .rating:hover, .rating.active { border-radius: 4px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .rating img { width: 40px; } .rating small { color: #555; display: inline-block; margin: 10px 0 0; } .rating:hover small, .rating.active small { color: #111; } .btn { background-color: #302d2b; color: #fff; border: 0; border-radius: 4px; padding: 12px 30px; cursor: pointer; } .btn:focus { outline: 0; } .btn:active { transform: scale(0.98); } .fa-heart { color: red; font-size: 30px; margin-bottom: 10px; } ================================================ FILE: form-input-wave/index.html ================================================ Form Input Wave

Please Login

Don't have an account? Register

================================================ FILE: form-input-wave/script.js ================================================ const labels = document.querySelectorAll('.form-control label') labels.forEach(label => { label.innerHTML = label.innerText .split('') .map((letter, idx) => `${letter}`) .join('') }) ================================================ FILE: form-input-wave/style.css ================================================ @import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); * { box-sizing: border-box; } body { background-color: steelblue; color: #fff; font-family: 'Muli', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .container { background-color: rgba(0, 0, 0, 0.4); padding: 20px 40px; border-radius: 5px; } .container h1 { text-align: center; margin-bottom: 30px; } .container a { text-decoration: none; color: lightblue; } .btn { cursor: pointer; display: inline-block; width: 100%; background: lightblue; padding: 15px; font-family: inherit; font-size: 16px; border: 0; border-radius: 5px; } .btn:focus { outline: 0; } .btn:active { transform: scale(0.98); } .text { margin-top: 30px; } .form-control { position: relative; margin: 20px 0 40px; width: 300px; } .form-control input { background-color: transparent; border: 0; border-bottom: 2px #fff solid; display: block; width: 100%; padding: 15px 0; font-size: 18px; color: #fff; position: relative; z-index: 100; } .form-control input:focus, .form-control input:valid { outline: 0; border-bottom-color: lightblue; } .form-control label { position: absolute; top: 15px; left: 0; pointer-events: none; } .form-control label span { display: inline-block; font-size: 18px; min-width: 5px; transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .form-control input:focus ~ label span, .form-control input:valid ~ label span { color: lightblue; transform: translateY(-30px); } ================================================ FILE: github-profiles/index.html ================================================ Github Profiles
================================================ FILE: github-profiles/script.js ================================================ const APIURL = 'https://api.github.com/users/' const main = document.getElementById('main') const form = document.getElementById('form') const search = document.getElementById('search') async function getUser(username) { try { const { data } = await axios(APIURL + username) createUserCard(data) getRepos(username) } catch(err) { if(err.response.status == 404) { createErrorCard('No profile with this username') } } } async function getRepos(username) { try { const { data } = await axios(APIURL + username + '/repos?sort=created') addReposToCard(data) } catch(err) { createErrorCard('Problem fetching repos') } } function createUserCard(user) { const userID = user.name || user.login const userBio = user.bio ? `

${user.bio}

` : '' const cardHTML = `
${user.name}

${userID}

${userBio}
` main.innerHTML = cardHTML } function createErrorCard(msg) { const cardHTML = `

${msg}

` main.innerHTML = cardHTML } function addReposToCard(repos) { const reposEl = document.getElementById('repos') repos .slice(0, 5) .forEach(repo => { const repoEl = document.createElement('a') repoEl.classList.add('repo') repoEl.href = repo.html_url repoEl.target = '_blank' repoEl.innerText = repo.name reposEl.appendChild(repoEl) }) } form.addEventListener('submit', (e) => { e.preventDefault() const user = search.value if(user) { getUser(user) search.value = '' } }) ================================================ FILE: github-profiles/style.css ================================================ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap'); * { box-sizing: border-box; } body { background-color: #2a2a72; color: #fff; font-family: 'Poppins', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .user-form { width: 100%; max-width: 700px; } .user-form input { width: 100%; display: block; background-color: #4c2885; border: none; border-radius: 10px; color: #fff; padding: 1rem; margin-bottom: 2rem; font-family: inherit; font-size: 1rem; box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05), 0 15px 40px rgba(0, 0, 0, 0.1); } .user-form input::placeholder { color: #bbb; } .user-form input:focus { outline: none; } .card { max-width: 800px; background-color: #4c2885; border-radius: 20px; box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05), 0 15px 40px rgba(0, 0, 0, 0.1); display: flex; padding: 3rem; margin: 0 1.5rem; } .avatar { border-radius: 50%; border: 10px solid #2a2a72; height: 150px; width: 150px; } .user-info { color: #eee; margin-left: 2rem; } .user-info h2 { margin-top: 0; } .user-info ul { list-style-type: none; display: flex; justify-content: space-between; padding: 0; max-width: 400px; } .user-info ul li { display: flex; align-items: center; } .user-info ul li strong { font-size: 0.9rem; margin-left: 0.5rem; } .repo { text-decoration: none; color: #fff; background-color: #212a72; font-size: 0.7rem; padding: 0.25rem 0.5rem; margin-right: 0.5rem; margin-bottom: 0.5rem; display: inline-block; } @media (max-width: 500px) { .card { flex-direction: column; align-items: center; } .user-form { max-width: 400px; } } ================================================ FILE: good-cheap-fast/index.html ================================================ Good, Cheap, Fast

How do you want your project to be?

Good
Cheap
Fast
================================================ FILE: good-cheap-fast/script.js ================================================ const toggles = document.querySelectorAll('.toggle') const good = document.querySelector('#good') const cheap = document.querySelector('#cheap') const fast = document.querySelector('#fast') toggles.forEach(toggle => toggle.addEventListener('change', (e) => doTheTrick(e.target))) function doTheTrick(theClickedOne) { if(good.checked && cheap.checked && fast.checked) { if(good === theClickedOne) { fast.checked = false } if(cheap === theClickedOne) { good.checked = false } if(fast === theClickedOne) { cheap.checked = false } } } ================================================ FILE: good-cheap-fast/style.css ================================================ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); * { box-sizing: border-box; } body { font-family: 'Roboto', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .toggle-container { display: flex; align-items: center; margin: 10px 0; width: 200px; } .toggle { visibility: hidden; } .label { position: relative; background-color: #d0d0d0; border-radius: 50px; cursor: pointer; display: inline-block; margin: 0 15px 0; width: 80px; height: 40px; } .toggle:checked + .label { background-color: #8e44ad; } .ball { background: #fff; height: 34px; width: 34px; border-radius: 50%; position: absolute; top: 3px; left: 3px; align-items: center; justify-content: center; animation: slideOff 0.3s linear forwards; } .toggle:checked + .label .ball { animation: slideOn 0.3s linear forwards; } @keyframes slideOn { 0% { transform: translateX(0) scale(1); } 50% { transform: translateX(20px) scale(1.2); } 100% { transform: translateX(40px) scale(1); } } @keyframes slideOff { 0% { transform: translateX(40px) scale(1); } 50% { transform: translateX(20px) scale(1.2); } 100% { transform: translateX(0) scale(1); } } ================================================ FILE: hidden-search/index.html ================================================ Hidden Search
================================================ FILE: hidden-search/script.js ================================================ const search = document.querySelector('.search') const btn = document.querySelector('.btn') const input = document.querySelector('.input') btn.addEventListener('click', () => { search.classList.toggle('active') input.focus() }) ================================================ FILE: hidden-search/style.css ================================================ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); * { box-sizing: border-box; } body { background-image: linear-gradient(90deg, #7d5fff, #7158e2); font-family: 'Roboto', sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .search { position: relative; height: 50px; } .search .input { background-color: #fff; border: 0; font-size: 18px; padding: 15px; height: 50px; width: 50px; transition: width 0.3s ease; } .btn { background-color: #fff; border: 0; cursor: pointer; font-size: 24px; position: absolute; top: 0; left: 0; height: 50px; width: 50px; transition: transform 0.3s ease; } .btn:focus, .input:focus { outline: none; } .search.active .input { width: 200px; } .search.active .btn { transform: translateX(198px); } ================================================ FILE: hoverboard/index.html ================================================ Hoverboard
================================================ FILE: hoverboard/script.js ================================================ const container = document.getElementById('container') const colors = ['#e74c3c', '#8e44ad', '#3498db', '#e67e22', '#2ecc71'] const SQUARES = 500 for(let i = 0; i < SQUARES; i++) { const square = document.createElement('div') square.classList.add('square') square.addEventListener('mouseover', () => setColor(square)) square.addEventListener('mouseout', () => removeColor(square)) container.appendChild(square) } function setColor(element) { const color = getRandomColor() element.style.background = color element.style.boxShadow = `0 0 2px ${color}, 0 0 10px ${color}` } function removeColor(element) { element.style.background = '#1d1d1d' element.style.boxShadow = '0 0 2px #000' } function getRandomColor() { return colors[Math.floor(Math.random() * colors.length)] } ================================================ FILE: hoverboard/style.css ================================================ * { box-sizing: border-box; } body { background-color: #111; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; max-width: 400px; } .square { background-color: #1d1d1d; box-shadow: 0 0 2px #000; height: 16px; width: 16px; margin: 2px; transition: 2s ease; } .square:hover { transition-duration: 0s; } ================================================ FILE: image-carousel/index.html ================================================ Image Carousel
first-image second-image third-image fourth-image
================================================ FILE: image-carousel/script.js ================================================ const imgs = document.getElementById('imgs') const leftBtn = document.getElementById('left') const rightBtn = document.getElementById('right') const img = document.querySelectorAll('#imgs img') let idx = 0 let interval = setInterval(run, 2000) function run() { idx++ changeImage() } function changeImage() { if(idx > img.length - 1) { idx = 0 } else if(idx < 0) { idx = img.length - 1 } imgs.style.transform = `translateX(${-idx * 500}px)` } function resetInterval() { clearInterval(interval) interval = setInterval(run, 2000) } rightBtn.addEventListener('click', () => { idx++ changeImage() resetInterval() }) leftBtn.addEventListener('click', () => { idx-- changeImage() resetInterval() }) ================================================ FILE: image-carousel/style.css ================================================ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); * { box-sizing: border-box; } body { font-family: 'Roboto', sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; } img { width: 500px; height: 500px; object-fit: cover; } .carousel { box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); height: 530px; width: 500px; overflow: hidden; } .image-container { display: flex; transform: translateX(0); transition: transform 0.5s ease-in-out; } .buttons-container { display: flex; justify-content: space-between; } .btn { background-color: rebeccapurple; color: #fff; border: none; padding: 0.5rem; cursor: pointer; width: 49.5%; } .btn:hover { opacity: 0.9; } .btn:focus { outline: none; } ================================================ FILE: incrementing-counter/index.html ================================================ Increment Counter
Twitter Followers
YouTube Subscribers
Facebook Fans
================================================ FILE: incrementing-counter/script.js ================================================ const counters = document.querySelectorAll('.counter') counters.forEach(counter => { counter.innerText = '0' const updateCounter = () => { const target = +counter.getAttribute('data-target') const c = +counter.innerText const increment = target / 200 if(c < target) { counter.innerText = `${Math.ceil(c + increment)}` setTimeout(updateCounter, 1) } else { counter.innerText = target } } updateCounter() }) ================================================ FILE: incrementing-counter/style.css ================================================ @import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap'); * { box-sizing: border-box; } body { background-color: #8e44ad; color: #fff; font-family: 'Roboto Mono', sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .counter-container { display: flex; flex-direction: column; justify-content: center; text-align: center; margin: 30px 50px; } .counter { font-size: 60px; margin-top: 10px; } @media (max-width: 580px) { body { flex-direction: column; } } ================================================ FILE: insect-catch-game/index.html ================================================ Catch The Insect

Catch The Insect

What is your "favorite" insect?

Time: 00:00

Score: 0

Are you annoyed yet?
You are playing an impossible game!!
================================================ FILE: insect-catch-game/script.js ================================================ const screens = document.querySelectorAll('.screen'); const choose_insect_btns = document.querySelectorAll('.choose-insect-btn'); const start_btn = document.getElementById('start-btn') const game_container = document.getElementById('game-container') const timeEl = document.getElementById('time') const scoreEl = document.getElementById('score') const message = document.getElementById('message') let seconds = 0 let score = 0 let selected_insect = {} start_btn.addEventListener('click', () => screens[0].classList.add('up')) choose_insect_btns.forEach(btn => { btn.addEventListener('click', () => { const img = btn.querySelector('img') const src = img.getAttribute('src') const alt = img.getAttribute('alt') selected_insect = { src, alt } screens[1].classList.add('up') setTimeout(createInsect, 1000) startGame() }) }) function startGame() { setInterval(increaseTime, 1000) } function increaseTime() { let m = Math.floor(seconds / 60) let s = seconds % 60 m = m < 10 ? `0${m}` : m s = s < 10 ? `0${s}` : s timeEl.innerHTML = `Time: ${m}:${s}` seconds++ } function createInsect() { const insect = document.createElement('div') insect.classList.add('insect') const { x, y } = getRandomLocation() insect.style.top = `${y}px` insect.style.left = `${x}px` insect.innerHTML = `${selected_insect.alt}` insect.addEventListener('click', catchInsect) game_container.appendChild(insect) } function getRandomLocation() { const width = window.innerWidth const height = window.innerHeight const x = Math.random() * (width - 200) + 100 const y = Math.random() * (height - 200) + 100 return { x, y } } function catchInsect() { increaseScore() this.classList.add('caught') setTimeout(() => this.remove(), 2000) addInsects() } function addInsects() { setTimeout(createInsect, 1000) setTimeout(createInsect, 1500) } function increaseScore() { score++ if(score > 19) { message.classList.add('visible') } scoreEl.innerHTML = `Score: ${score}` } ================================================ FILE: insect-catch-game/style.css ================================================ @import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap'); * { box-sizing: border-box; } body { background-color: #516dff; color: #fff; font-family: 'Press Start 2P', sans-serif; height: 100vh; overflow: hidden; margin: 0; text-align: center; } a { color: #fff; } h1 { line-height: 1.4; } .btn { border: 0; background-color: #fff; color: #516dff; padding: 15px 20px; font-family: inherit; cursor: pointer; } .btn:hover { opacity: 0.9; } .btn:focus { outline: 0; } .screen { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; width: 100vw; transition: margin 0.5s ease-out; } .screen.up { margin-top: -100vh; } .insects-list { display: flex; flex-wrap: wrap; justify-content: center; list-style-type: none; padding: 0; } .insects-list li { margin: 10px; } .choose-insect-btn { background-color: transparent; border: 2px solid #fff; color: #fff; cursor: pointer; font-family: inherit; width: 150px; height: 150px; } .choose-insect-btn:hover { background-color: #fff; color: #516dff; } .choose-insect-btn:active { background-color: rgba(255, 255, 255, 0.7); } .choose-insect-btn img { width: 100px; height: 100px; object-fit: contain; } .game-container { position: relative; } .time, .score { position: absolute; top: 20px; } .time { left: 20px; } .score { right: 20px; } .message { line-height: 1.7; background-color: rgba(0, 0, 0, 0.5); width: 100%; padding: 20px; z-index: 100; text-align: center; opacity: 0; position: absolute; top: 0; left: 50%; transform: translate(-50%, -150%); transition: transform 0.4s ease-in; } .message.visible { transform: translate(-50%, 150%); opacity: 1; } .insect { cursor: pointer; display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; position: absolute; transform: translate(-50%, -50%) scale(1); transition: transform 0.3s ease-in-out; } .insect.caught { transform: translate(-50%, -50%) scale(0); } .insect img { width: 100px; height: 100px; } ================================================ FILE: kinetic-loader/index.html ================================================ Kinetic Loader
================================================ FILE: kinetic-loader/style.css ================================================ * { box-sizing: border-box; } body { background-color: #2c3e50; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .kinetic { position: relative; height: 80px; width: 80px; } .kinetic::after, .kinetic::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 0; border: 50px solid transparent; border-bottom-color: #fff; animation: rotateA 2s linear infinite 0.5s; } .kinetic::before { transform: rotate(90deg); animation: rotateB 2s linear infinite; } @keyframes rotateA { 0%, 25% { transform: rotate(0deg); } 50%, 75% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } @keyframes rotateB { 0%, 25% { transform: rotate(90deg); } 50%, 75% { transform: rotate(270deg); } 100% { transform: rotate(450deg); } } ================================================ FILE: live-user-filter/index.html ================================================ Live User Filter

Live User Filter

Search by name and/or location
================================================ FILE: live-user-filter/script.js ================================================ const result = document.getElementById('result') const filter = document.getElementById('filter') const listItems = [] getData() filter.addEventListener('input', (e) => filterData(e.target.value)) async function getData() { const res = await fetch('https://randomuser.me/api?results=50') const { results } = await res.json() // Clear result result.innerHTML = '' results.forEach(user => { const li = document.createElement('li') listItems.push(li) li.innerHTML = ` ${user.name.first}

${user.name.first} ${user.name.last}

${user.location.city}, ${user.location.country}

` result.appendChild(li) }) } function filterData(searchTerm) { listItems.forEach(item => { if(item.innerText.toLowerCase().includes(searchTerm.toLowerCase())) { item.classList.remove('hide') } else { item.classList.add('hide') } }) } ================================================ FILE: live-user-filter/style.css ================================================ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); * { box-sizing: border-box; } body { background-color: #f8f9fd; font-family: 'Roboto', sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .container { border-radius: 5px; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2); overflow: hidden; width: 300px; } .title { margin: 0; } .subtitle { display: inline-block; margin: 5px 0 20px; opacity: 0.8; } .header { background-color: #3e57db; color: #fff; padding: 30px 20px; } .header input { background-color: rgba(0, 0, 0, 0.3); border: 0; border-radius: 50px; color: #fff; font-size: 14px; padding: 10px 15px; width: 100%; } .header input:focus { outline: none; } .user-list { background-color: #fff; list-style-type: none; margin: 0; padding: 0; max-height: 400px; overflow-y: auto; } .user-list li { display: flex; padding: 20px; } .user-list img { border-radius: 50%; object-fit: cover; height: 50px; width: 50px; } .user-list .user-info { margin-left: 10px; } .user-list .user-info h4 { margin: 0 0 10px; } .user-list .user-info p { font-size: 12px; } .user-list li:not(:last-of-type) { border-bottom: 1px solid #eee; } .user-list li.hide { display: none; } ================================================ FILE: mobile-tab-navigation/index.html ================================================ Mobile Tab Navigation
home work blog about
================================================ FILE: mobile-tab-navigation/script.js ================================================ const contents = document.querySelectorAll('.content') const listItems = document.querySelectorAll('nav ul li') listItems.forEach((item, idx) => { item.addEventListener('click', () => { hideAllContents() hideAllItems() item.classList.add('active') contents[idx].classList.add('show') }) }) function hideAllContents() { contents.forEach(content => content.classList.remove('show')) } function hideAllItems() { listItems.forEach(item => item.classList.remove('active')) } ================================================ FILE: mobile-tab-navigation/style.css ================================================ @import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap'); * { box-sizing: border-box; } body { background-color: rgba(155, 89, 182, 0.7); font-family: 'Open Sans', sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; } .phone { position: relative; overflow: hidden; border: 3px solid #eee; border-radius: 15px; height: 600px; width: 340px; } .phone .content { opacity: 0; object-fit: cover; position: absolute; top: 0; left: 0; height: calc(100% - 60px); width: 100%; transition: opacity 0.4s ease; } .phone .content.show { opacity: 1; } nav { position: absolute; bottom: 0; left: 0; margin-top: -5px; width: 100%; } nav ul { background-color: #fff; display: flex; list-style-type: none; padding: 0; margin: 0; height: 60px; } nav li { color: #777; cursor: pointer; flex: 1; padding: 10px; text-align: center; } nav ul li p { font-size: 12px; margin: 2px 0; } nav ul li:hover, nav ul li.active { color: #8e44ad; } ================================================ FILE: movie-app/index.html ================================================ Movie App
================================================ FILE: movie-app/script.js ================================================ const API_URL = 'https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=3fd2be6f0c70a2a598f084ddfb75487c&page=1' const IMG_PATH = 'https://image.tmdb.org/t/p/w1280' const SEARCH_API = 'https://api.themoviedb.org/3/search/movie?api_key=3fd2be6f0c70a2a598f084ddfb75487c&query="' const main = document.getElementById('main') const form = document.getElementById('form') const search = document.getElementById('search') // Get initial movies getMovies(API_URL) async function getMovies(url) { const res = await fetch(url) const data = await res.json() showMovies(data.results) } function showMovies(movies) { main.innerHTML = '' movies.forEach((movie) => { const { title, poster_path, vote_average, overview } = movie const movieEl = document.createElement('div') movieEl.classList.add('movie') movieEl.innerHTML = ` ${title}

${title}

${vote_average}

Overview

${overview}
` main.appendChild(movieEl) }) } function getClassByRate(vote) { if(vote >= 8) { return 'green' } else if(vote >= 5) { return 'orange' } else { return 'red' } } form.addEventListener('submit', (e) => { e.preventDefault() const searchTerm = search.value if(searchTerm && searchTerm !== '') { getMovies(SEARCH_API + searchTerm) search.value = '' } else { window.location.reload() } }) ================================================ FILE: movie-app/style.css ================================================ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap'); :root { --primary-color: #22254b; --secondary-color: #373b69; } * { box-sizing: border-box; } body { background-color: var(--primary-color); font-family: 'Poppins', sans-serif; margin: 0; } header { padding: 1rem; display: flex; justify-content: flex-end; background-color: var(--secondary-color); } .search { background-color: transparent; border: 2px solid var(--primary-color); border-radius: 50px; font-family: inherit; font-size: 1rem; padding: 0.5rem 1rem; color: #fff; } .search::placeholder { color: #7378c5; } .search:focus { outline: none; background-color: var(--primary-color); } main { display: flex; flex-wrap: wrap; justify-content: center; } .movie { width: 300px; margin: 1rem; background-color: var(--secondary-color); box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2); position: relative; overflow: hidden; border-radius: 3px; } .movie img { width: 100%; } .movie-info { color: #eee; display: flex; align-items: center; justify-content: space-between; gap:0.2rem; padding: 0.5rem 1rem 1rem; letter-spacing: 0.5px; } .movie-info h3 { margin-top: 0; } .movie-info span { background-color: var(--primary-color); padding: 0.25rem 0.5rem; border-radius: 3px; font-weight: bold; } .movie-info span.green { color: lightgreen; } .movie-info span.orange { color: orange; } .movie-info span.red { color: red; } .overview { background-color: #fff; padding: 2rem; position: absolute; left: 0; bottom: 0; right: 0; max-height: 100%; transform: translateY(101%); overflow-y: auto; transition: transform 0.3s ease-in; } .movie:hover .overview { transform: translateY(0); } ================================================ FILE: netflix-mobile-navigation/index.html ================================================ Netflix Mobile Navigation

Mobile Navigation

================================================ FILE: netflix-mobile-navigation/script.js ================================================ const open_btn = document.querySelector('.open-btn') const close_btn = document.querySelector('.close-btn') const nav = document.querySelectorAll('.nav') open_btn.addEventListener('click', () => { nav.forEach(nav_el => nav_el.classList.add('visible')) }) close_btn.addEventListener('click', () => { nav.forEach(nav_el => nav_el.classList.remove('visible')) }) ================================================ FILE: netflix-mobile-navigation/style.css ================================================ @import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); * { box-sizing: border-box; } body { font-family: 'Muli', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; } .text { text-transform: uppercase; } .logo { width: 200px; } .nav-btn { border: none; background-color: transparent; cursor: pointer; font-size: 20px; } .open-btn { position: fixed; top: 10px; left: 10px; } .nav { position: fixed; top: 0; left: 0; height: 100vh; transform: translateX(-100%); transition: transform 0.3s ease-in-out; } .nav.visible { transform: translateX(0); } .nav-black { background-color: rgb(34, 31, 31); width: 60%; max-width: 480px; min-width: 320px; transition-delay: 0.4s; } .nav-black.visible { transition-delay: 0s; } .nav-red { background-color: rgb(229, 9, 20); width: 95%; transition-delay: 0.2s; } .nav-red.visible { transition-delay: 0.2s; } .nav-white { background-color: #fff; width: 95%; padding: 40px; position: relative; transition-delay: 0s; } .nav-white.visible { transition-delay: 0.4s; } .close-btn { opacity: 0.3; position: absolute; top: 40px; right: 30px; } .list { list-style-type: none; padding: 0; } .list li { margin: 20px 0; } .list li a { color: rgb(34, 31, 31); font-size: 14px; text-decoration: none; text-transform: uppercase; } .list ul { list-style-type: none; padding-left: 20px; } ================================================ FILE: notes-app/index.html ================================================ Notes App ================================================ FILE: notes-app/script.js ================================================ const addBtn = document.getElementById('add') const notes = JSON.parse(localStorage.getItem('notes')) if(notes) { notes.forEach(note => addNewNote(note)) } addBtn.addEventListener('click', () => addNewNote()) function addNewNote(text = '') { const note = document.createElement('div') note.classList.add('note') note.innerHTML = `
` const editBtn = note.querySelector('.edit') const deleteBtn = note.querySelector('.delete') const main = note.querySelector('.main') const textArea = note.querySelector('textarea') textArea.value = text main.innerHTML = marked(text) deleteBtn.addEventListener('click', () => { note.remove() updateLS() }) editBtn.addEventListener('click', () => { main.classList.toggle('hidden') textArea.classList.toggle('hidden') }) textArea.addEventListener('input', (e) => { const { value } = e.target main.innerHTML = marked(value) updateLS() }) document.body.appendChild(note) } function updateLS() { const notesText = document.querySelectorAll('textarea') const notes = [] notesText.forEach(note => notes.push(note.value)) localStorage.setItem('notes', JSON.stringify(notes)) } ================================================ FILE: notes-app/style.css ================================================ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap'); * { box-sizing: border-box; outline: none; } body { background-color: #7bdaf3; font-family: 'Poppins', sans-serif; display: flex; flex-wrap: wrap; margin: 0; padding-top: 3rem; } .add { position: fixed; top: 1rem; right: 1rem; background-color: #9ec862; color: #fff; border: none; border-radius: 3px; padding: 0.5rem 1rem; cursor: pointer; } .add:active { transform: scale(0.98); } .note { background-color: #fff; box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1); margin: 30px 20px; height: 400px; width: 400px; overflow-y: scroll; } .note .tools { background-color: #9ec862; display: flex; justify-content: flex-end; padding: 0.5rem; } .note .tools button { background-color: transparent; border: none; color: #fff; cursor: pointer; font-size: 1rem; margin-left: 0.5rem; } .note textarea { outline: none; font-family: inherit; font-size: 1.2rem; border: none; height: 400px; width: 100%; padding: 20px; } .main { padding: 20px; } .hidden { display: none; } ================================================ FILE: password-generator/index.html ================================================ Password Generator

Password Generator

================================================ FILE: password-generator/script.js ================================================ const resultEl = document.getElementById('result') const lengthEl = document.getElementById('length') const uppercaseEl = document.getElementById('uppercase') const lowercaseEl = document.getElementById('lowercase') const numbersEl = document.getElementById('numbers') const symbolsEl = document.getElementById('symbols') const generateEl = document.getElementById('generate') const clipboardEl = document.getElementById('clipboard') const randomFunc = { lower: getRandomLower, upper: getRandomUpper, number: getRandomNumber, symbol: getRandomSymbol } clipboardEl.addEventListener('click', () => { const password = resultEl.innerText; if (!password) { return; } navigator.clipboard.writeText(password); alert('Password copied to clipboard!') }) generateEl.addEventListener('click', () => { const length = +lengthEl.value const hasLower = lowercaseEl.checked const hasUpper = uppercaseEl.checked const hasNumber = numbersEl.checked const hasSymbol = symbolsEl.checked resultEl.innerText = generatePassword(hasLower, hasUpper, hasNumber, hasSymbol, length) }) function generatePassword(lower, upper, number, symbol, length) { let generatedPassword = '' const typesCount = lower + upper + number + symbol const typesArr = [{lower}, {upper}, {number}, {symbol}].filter(item => Object.values(item)[0]) if(typesCount === 0) { return '' } for(let i = 0; i < length; i += typesCount) { typesArr.forEach(type => { const funcName = Object.keys(type)[0] generatedPassword += randomFunc[funcName]() }) } const finalPassword = generatedPassword.slice(0, length) return finalPassword } function getRandomLower() { return String.fromCharCode(Math.floor(Math.random() * 26) + 97) } function getRandomUpper() { return String.fromCharCode(Math.floor(Math.random() * 26) + 65) } function getRandomNumber() { return String.fromCharCode(Math.floor(Math.random() * 10) + 48) } function getRandomSymbol() { const symbols = '!@#$%^&*(){}[]=<>/,.' return symbols[Math.floor(Math.random() * symbols.length)] } ================================================ FILE: password-generator/style.css ================================================ @import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); * { box-sizing: border-box; } body { background-color: #3b3b98; color: #fff; font-family: 'Muli', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; padding: 10px; margin: 0; } h2 { margin: 10px 0 20px; text-align: center; } .container { background-color: #23235b; box-shadow: 0px 2px 10px rgba(255, 255, 255, 0.2); padding: 20px; width: 350px; max-width: 100%; } .result-container { background-color: rgba(0, 0, 0, 0.4); display: flex; justify-content: flex-start; align-items: center; position: relative; font-size: 18px; letter-spacing: 1px; padding: 12px 10px; height: 50px; width: 100%; } .result-container #result { word-wrap: break-word; max-width: calc(100% - 40px); overflow-y: scroll; height: 100%; } #result::-webkit-scrollbar { width: 1rem; } .result-container .btn { position: absolute; top: 5px; right: 5px; width: 40px; height: 40px; font-size: 20px; } .btn { border: none; background-color: #3b3b98; color: #fff; font-size: 16px; padding: 8px 12px; cursor: pointer; } .btn-large { display: block; width: 100%; } .setting { display: flex; justify-content: space-between; align-items: center; margin: 15px 0; } ================================================ FILE: password-strength-background/index.html ================================================ Password Strength Backround

Image Password Strength

Change the password to see the effect

================================================ FILE: password-strength-background/script.js ================================================ const password = document.getElementById('password') const background = document.getElementById('background') password.addEventListener('input', (e) => { const input = e.target.value const length = input.length const blurValue = 20 - length * 2 background.style.filter = `blur(${blurValue}px)` }) ================================================ FILE: password-strength-background/style.css ================================================ * { box-sizing: border-box; } body { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .background { background: url('https://images.unsplash.com/photo-1556745757-8d76bdb6984b') no-repeat center center/cover; position: absolute; top: -20px; bottom: -20px; left: -20px; right: -20px; z-index: -1; filter: blur(20px); } ================================================ FILE: pokedex/index.html ================================================ Pokedex

Pokedex

================================================ FILE: pokedex/script.js ================================================ const poke_container = document.getElementById('poke-container') const pokemon_count = 150 const colors = { fire: '#FDDFDF', grass: '#DEFDE0', electric: '#FCF7DE', water: '#DEF3FD', ground: '#f4e7da', rock: '#d5d5d4', fairy: '#fceaff', poison: '#98d7a5', bug: '#f8d5a3', dragon: '#97b3e6', psychic: '#eaeda1', flying: '#F5F5F5', fighting: '#E6E0D4', normal: '#F5F5F5' } const main_types = Object.keys(colors) const fetchPokemons = async () => { for(let i = 1; i <= pokemon_count; i++) { await getPokemon(i) } } const getPokemon = async (id) => { const url = `https://pokeapi.co/api/v2/pokemon/${id}` const res = await fetch(url) const data = await res.json() createPokemonCard(data) } const createPokemonCard = (pokemon) => { const pokemonEl = document.createElement('div') pokemonEl.classList.add('pokemon') const name = pokemon.name[0].toUpperCase() + pokemon.name.slice(1) const id = pokemon.id.toString().padStart(3, '0') const poke_types = pokemon.types.map(type => type.type.name) const type = main_types.find(type => poke_types.indexOf(type) > -1) const color = colors[type] pokemonEl.style.backgroundColor = color const pokemonInnerHTML = `
${name}
#${id}

${name}

Type: ${type}
` pokemonEl.innerHTML = pokemonInnerHTML poke_container.appendChild(pokemonEl) } fetchPokemons() ================================================ FILE: pokedex/style.css ================================================ @import url('https://fonts.googleapis.com/css?family=Lato:300,400&display=swap'); * { box-sizing: border-box; } body { background: #efefbb; background: linear-gradient(to right, #d4d3dd, #efefbb); font-family: 'Lato', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; } h1 { letter-spacing: 3px; } .poke-container { display: flex; flex-wrap: wrap; align-items: space-between; justify-content: center; margin: 0 auto; max-width: 1200px; } .pokemon { background-color: #eee; border-radius: 10px; box-shadow: 0 3px 15px rgba(100, 100, 100, 0.5); margin: 10px; padding: 20px; text-align: center; } .pokemon .img-container { background-color: rgba(255, 255, 255, 0.6); border-radius: 50%; width: 120px; height: 120px; text-align: center; } .pokemon .img-container img { max-width: 90%; margin-top: 20px; } .pokemon .info { margin-top: 20px; } .pokemon .info .number { background-color: rgba(0, 0, 0, 0.1); padding: 5px 10px; border-radius: 10px; font-size: 0.8em; } .pokemon .info .name { margin: 15px 0 7px; letter-spacing: 1px; } ================================================ FILE: progress-steps/index.html ================================================ Progress Steps
1
2
3
4
================================================ FILE: progress-steps/script.js ================================================ const progress = document.getElementById('progress') const prev = document.getElementById('prev') const next = document.getElementById('next') const circles = document.querySelectorAll('.circle') let currentActive = 1 next.addEventListener('click', () => { currentActive++ if(currentActive > circles.length) { currentActive = circles.length } update() }) prev.addEventListener('click', () => { currentActive-- if(currentActive < 1) { currentActive = 1 } update() }) function update() { circles.forEach((circle, idx) => { if(idx < currentActive) { circle.classList.add('active') } else { circle.classList.remove('active') } }) const actives = document.querySelectorAll('.active') progress.style.width = (actives.length - 1) / (circles.length - 1) * 100 + '%' if(currentActive === 1) { prev.disabled = true } else if(currentActive === circles.length) { next.disabled = true } else { prev.disabled = false next.disabled = false } } ================================================ FILE: progress-steps/style.css ================================================ @import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); :root { --line-border-fill: #3498db; --line-border-empty: #383838; } * { box-sizing: border-box; } body { background-color: #f1f1f1; font-family: 'Muli', sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .container { text-align: center; } .progress-container { display: flex; justify-content: space-between; position: relative; margin-bottom: 30px; max-width: 100%; width: 350px; } .progress-container::before { content: ''; background-color: var(--line-border-empty); position: absolute; top: 50%; left: 0; transform: translateY(-50%); height: 4px; width: 100%; z-index: -1; } .progress { background-color: var(--line-border-fill); position: absolute; top: 50%; left: 0; transform: translateY(-50%); height: 4px; width: 0%; z-index: -1; transition: 0.4s ease; } .circle { background-color: #f1f1f1; color:#e2e2e2; border-radius: 50%; height: 30px; width: 30px; display: flex; align-items: center; justify-content: center; border: 3px solid var(--line-border-empty); transition: 0.4s ease; } .circle.active { border-color: var(--line-border-fill); } .btn { background-color: var(--line-border-fill); color: #fff; border: 0; border-radius: 6px; cursor: pointer; font-family: inherit; padding: 8px 30px; margin: 5px; font-size: 14px; } .btn:active { transform: scale(0.98); } .btn:focus { outline: 0; } .btn:disabled { background-color: var(--line-border-empty); cursor: not-allowed; } ================================================ FILE: quiz-app/index.html ================================================ Quiz App

Question text

================================================ FILE: quiz-app/script.js ================================================ const quizData = [ { question: "Which language runs in a web browser?", a: "Java", b: "C", c: "Python", d: "JavaScript", correct: "d", }, { question: "What does CSS stand for?", a: "Central Style Sheets", b: "Cascading Style Sheets", c: "Cascading Simple Sheets", d: "Cars SUVs Sailboats", correct: "b", }, { question: "What does HTML stand for?", a: "Hypertext Markup Language", b: "Hypertext Markdown Language", c: "Hyperloop Machine Language", d: "Helicopters Terminals Motorboats Lamborginis", correct: "a", }, { question: "What year was JavaScript launched?", a: "1996", b: "1995", c: "1994", d: "none of the above", correct: "b", }, ]; const quiz = document.getElementById('quiz') const answerEls = document.querySelectorAll('.answer') const questionEl = document.getElementById('question') const a_text = document.getElementById('a_text') const b_text = document.getElementById('b_text') const c_text = document.getElementById('c_text') const d_text = document.getElementById('d_text') const submitBtn = document.getElementById('submit') let currentQuiz = 0 let score = 0 loadQuiz() function loadQuiz() { deselectAnswers() const currentQuizData = quizData[currentQuiz] questionEl.innerText = currentQuizData.question a_text.innerText = currentQuizData.a b_text.innerText = currentQuizData.b c_text.innerText = currentQuizData.c d_text.innerText = currentQuizData.d } function deselectAnswers() { answerEls.forEach(answerEl => answerEl.checked = false) } function getSelected() { let answer answerEls.forEach(answerEl => { if(answerEl.checked) { answer = answerEl.id } }) return answer } submitBtn.addEventListener('click', () => { const answer = getSelected() if(answer) { if(answer === quizData[currentQuiz].correct) { score++ } currentQuiz++ if(currentQuiz < quizData.length) { loadQuiz() } else { quiz.innerHTML = `

You answered ${score}/${quizData.length} questions correctly

` } } }) ================================================ FILE: quiz-app/style.css ================================================ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap'); * { box-sizing: border-box; } body { background-color: #b8c6db; background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7fa 100%); font-family: 'Poppins', sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .quiz-container { background-color: #fff; border-radius: 10px; box-shadow: 0 0 10px 2px rgba(100, 100, 100, 0.1); width: 600px; overflow: hidden; } .quiz-header { padding: 4rem; } h2 { padding: 1rem; text-align: center; margin: 0; } ul { list-style-type: none; padding: 0; } ul li { font-size: 1.2rem; margin: 1rem 0; } ul li label { cursor: pointer; } button { background-color: #8e44ad; color: #fff; border: none; display: block; width: 100%; cursor: pointer; font-size: 1.1rem; font-family: inherit; padding: 1.3rem; } button:hover { background-color: #732d91; } button:focus { outline: none; background-color: #5e3370; } ================================================ FILE: random-choice-picker/index.html ================================================ Random Choice Picker

Enter all of the choices divided by a comma (',').
Press enter when you're done

================================================ FILE: random-choice-picker/script.js ================================================ const tagsEl = document.getElementById('tags') const textarea = document.getElementById('textarea') textarea.focus() textarea.addEventListener('keyup', (e) => { createTags(e.target.value) if(e.key === 'Enter') { setTimeout(() => { e.target.value = '' }, 10) randomSelect() } }) function createTags(input) { const tags = input.split(',').filter(tag => tag.trim() !== '').map(tag => tag.trim()) tagsEl.innerHTML = '' tags.forEach(tag => { const tagEl = document.createElement('span') tagEl.classList.add('tag') tagEl.innerText = tag tagsEl.appendChild(tagEl) }) } function randomSelect() { const times = 30 const interval = setInterval(() => { const randomTag = pickRandomTag() if (randomTag !== undefined) { highlightTag(randomTag) setTimeout(() => { unHighlightTag(randomTag) }, 100) } }, 100); setTimeout(() => { clearInterval(interval) setTimeout(() => { const randomTag = pickRandomTag() highlightTag(randomTag) }, 100) }, times * 100) } function pickRandomTag() { const tags = document.querySelectorAll('.tag') return tags[Math.floor(Math.random() * tags.length)] } function highlightTag(tag) { tag.classList.add('highlight') } function unHighlightTag(tag) { tag.classList.remove('highlight') } ================================================ FILE: random-choice-picker/style.css ================================================ @import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); * { box-sizing: border-box; } body { background-color: #2b88f0; font-family: 'Muli', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } h3 { color: #fff; margin: 10px 0 20px; text-align: center; } .container { width: 500px; } textarea { border: none; display: block; width: 100%; height: 100px; font-family: inherit; padding: 10px; margin: 0 0 20px; font-size: 16px; } textarea:focus { outline: none; } .tag { background-color: #f0932b; color: #fff; border-radius: 50px; padding: 10px 20px; margin: 0 5px 10px 0; font-size: 14px; display: inline-block; } .tag.highlight { background-color: #273c75; } ================================================ FILE: random-image-generator/index.html ================================================ Random Image Feed

Random Image Feed

================================================ FILE: random-image-generator/script.js ================================================ const container = document.querySelector('.container') const unsplashURL = 'https://source.unsplash.com/random/' const rows = 5 for(let i = 0; i < rows * 3; i++) { const img = document.createElement('img') img.src = `${unsplashURL}${getRandomSize()}` container.appendChild(img) } function getRandomSize() { return `${getRandomNr()}x${getRandomNr()}` } function getRandomNr() { return Math.floor(Math.random() * 10) + 300 } ================================================ FILE: random-image-generator/style.css ================================================ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); * { box-sizing: border-box; } body { font-family: 'Roboto', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; margin: 0; } .title { margin: 10px 0 0; text-align: center; } .container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; max-width: 1000px; } .container img { object-fit: cover; margin: 10px; height: 300px; width: 300px; max-width: 100%; } ================================================ FILE: rotating-nav-animation/index.html ================================================ Rotating Navigation

Amazing Article

Florin Pop

Lorem 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.

My Dog

doggy

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?

================================================ FILE: rotating-nav-animation/script.js ================================================ const open = document.getElementById('open') const close = document.getElementById('close') const container = document.querySelector('.container') open.addEventListener('click', () => container.classList.add('show-nav')) close.addEventListener('click', () => container.classList.remove('show-nav')) ================================================ FILE: rotating-nav-animation/style.css ================================================ @import url('https://fonts.googleapis.com/css?family=Lato&display=swap'); * { box-sizing: border-box; } body { font-family: 'Lato', sans-serif; background-color: #333; color: #222; overflow-x: hidden; margin: 0; } .container { background-color: #fafafa; transform-origin: top left; transition: transform 0.5s linear; width: 100vw; min-height: 100vh; padding: 50px; } .container.show-nav { transform: rotate(-20deg); } .circle-container { position: fixed; top: -100px; left: -100px; } .circle { background-color: #ff7979; height: 200px; width: 200px; border-radius: 50%; position: relative; transition: transform 0.5s linear; } .container.show-nav .circle { transform: rotate(-70deg); } .circle button { cursor: pointer; position: absolute; top: 50%; left: 50%; height: 100px; background: transparent; border: 0; font-size: 26px; color: #fff; } .circle button:focus { outline: none; } .circle button#open { left: 60%; } .circle button#close { top: 60%; transform: rotate(90deg); transform-origin: top left; } .container.show-nav + nav li { transform: translateX(0); transition-delay: 0.3s; } nav { position: fixed; bottom: 40px; left: 0; z-index: 100; } nav ul { list-style-type: none; padding-left: 30px; } nav ul li { text-transform: uppercase; color: #fff; margin: 40px 0; transform: translateX(-100%); transition: transform 0.4s ease-in; } nav ul li i { font-size: 20px; margin-right: 10px; } nav ul li + li { margin-left: 15px; transform: translateX(-150%); } nav ul li + li + li { margin-left: 30px; transform: translateX(-200%); } nav a{ color: #fafafa; text-decoration: none; transition: all 0.5s; } nav a:hover { color: #FF7979; font-weight: bold; } .content img { max-width: 100%; } .content { max-width: 1000px; margin: 50px auto; } .content h1 { margin: 0; } .content small { color: #555; font-style: italic; } .content p { color: #333; line-height: 1.5; } ================================================ FILE: scroll-animation/index.html ================================================ Scroll Animation

Scroll to see the animation

Content

Content

Content

Content

Content

Content

Content

Content

Content

Content

Content

Content

Content

================================================ FILE: scroll-animation/script.js ================================================ const boxes = document.querySelectorAll('.box') window.addEventListener('scroll', checkBoxes) checkBoxes() function checkBoxes() { const triggerBottom = window.innerHeight / 5 * 4 boxes.forEach(box => { const boxTop = box.getBoundingClientRect().top if(boxTop < triggerBottom) { box.classList.add('show') } else { box.classList.remove('show') } }) } ================================================ FILE: scroll-animation/style.css ================================================ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); * { box-sizing: border-box; } body { background-color: #efedd6; font-family: 'Roboto', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; overflow-x: hidden; } h1 { margin: 10px; } .box { background-color: steelblue; color: #fff; display: flex; align-items: center; justify-content: center; width: 400px; height: 200px; margin: 10px; border-radius: 10px; box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3); transform: translateX(400%); transition: transform 0.4s ease; } .box:nth-of-type(even) { transform: translateX(-400%); } .box.show { transform: translateX(0); } .box h2 { font-size: 45px; } ================================================ FILE: simple-timer/index.html ================================================ Simple Timer

Timer

00:00

================================================ FILE: simple-timer/script.js ================================================ const resetBtn = document.querySelector('#reset'); const playBtn = document.querySelector('#play'); const timerEl = document.querySelector('#timer'); const root = document.querySelector(':root'); // Initial setup const totalSeconds = 60; let playing = false; let currentSeconds = totalSeconds; timerEl.innerText = formatTime(totalSeconds); const timerInterval = setInterval(run, 1000); playBtn.addEventListener('click', () => { playing = !playing; playBtn.classList.toggle('play'); playBtn.classList.toggle('bg-green-500'); // Toggle the color class const playIcon = playBtn.querySelector('i'); playIcon.classList.toggle('fa-play'); // Toggle the play icon playIcon.classList.toggle('fa-pause'); // Toggle the pause icon }); resetBtn.addEventListener('click', resetAll); // Run the timer function run() { if (playing) { currentSeconds -= 1; if (currentSeconds <= 0) { clearInterval(timerInterval); resetAll(); } timerEl.innerText = formatTime(currentSeconds); root.style.setProperty('--degrees', calcDeg()); } } // Format the time function formatTime(seconds) { const minutes = Math.floor(seconds / 60); const newSeconds = seconds % 60; return `${minutes.toString().padStart(2, '0')}:${newSeconds .toString() .padStart(2, '0')}`; } // Calculate the degrees function calcDeg() { return `${360 - (currentSeconds / totalSeconds) * 360}deg`; } // Reset all the values function resetAll() { playing = false; playBtn.classList.remove('play'); playBtn.classList.remove('bg-green-500'); // Remove the color class const playIcon = playBtn.querySelector('i'); playIcon.classList.remove('fa-pause'); // Remove the pause icon playIcon.classList.add('fa-play'); // Add the play icon currentSeconds = totalSeconds; timerEl.innerText = formatTime(totalSeconds); root.style.setProperty('--degrees', '0deg'); } ================================================ FILE: simple-timer/style.css ================================================ :root { --degrees: 0deg; } .bg-conic { background: conic-gradient( transparent 0deg, transparent var(--degrees), white var(--degrees), white 360deg ); } .hand { transform-origin: bottom center; transform: rotate(var(--degrees)); } ================================================ FILE: sound-board/index.html ================================================ Sound Board
================================================ FILE: sound-board/script.js ================================================ const sounds = ['applause', 'boo', 'gasp', 'tada', 'victory', 'wrong'] sounds.forEach(sound => { const btn = document.createElement('button') btn.classList.add('btn') btn.innerText = sound btn.addEventListener('click', () => { stopSongs() document.getElementById(sound).play() }) document.getElementById('buttons').appendChild(btn) }) function stopSongs() { sounds.forEach(sound => { const song = document.getElementById(sound) song.pause() song.currentTime = 0; }) } ================================================ FILE: sound-board/style.css ================================================ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap'); * { box-sizing: border-box; } body { background-color: rgb(161, 100, 223); font-family: 'Poppins', sans-serif; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; text-align: center; height: 100vh; overflow: hidden; margin: 0; } .btn { background-color: rebeccapurple; border-radius: 5px; border: none; color: #fff; margin: 1rem; padding: 1.5rem 3rem; font-size: 1.2rem; font-family: inherit; cursor: pointer; } .btn:hover { opacity: 0.9; } .btn:focus { outline: none; } ================================================ FILE: split-landing-page/index.html ================================================ Split Landing Page

Playstation 5

Buy Now

XBox Series X

Buy Now
================================================ FILE: split-landing-page/script.js ================================================ const left = document.querySelector('.left') const right = document.querySelector('.right') const container = document.querySelector('.container') left.addEventListener('mouseenter', () => container.classList.add('hover-left')) left.addEventListener('mouseleave', () => container.classList.remove('hover-left')) right.addEventListener('mouseenter', () => container.classList.add('hover-right')) right.addEventListener('mouseleave', () => container.classList.remove('hover-right')) ================================================ FILE: split-landing-page/style.css ================================================ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); :root { --left-bg-color: rgba(87, 84, 236, 0.7); --right-bg-color: rgba(43, 43, 43, 0.8); --left-btn-hover-color: rgba(87, 84, 236, 1); --right-btn-hover-color: rgba(28, 122, 28, 1); --hover-width: 75%; --other-width: 25%; --speed: 1000ms; } * { box-sizing: border-box; } body { font-family: 'Roboto', sans-serif; height: 100vh; overflow: hidden; margin: 0; } h1 { font-size: 4rem; color: #fff; position: absolute; left: 50%; top: 20%; transform: translateX(-50%); white-space: nowrap; } .btn { position: absolute; display: flex; align-items: center; justify-content: center; left: 50%; top: 40%; transform: translateX(-50%); text-decoration: none; color: #fff; border: #fff solid 0.2rem; font-size: 1rem; font-weight: bold; text-transform: uppercase; width: 15rem; padding: 1.5rem; } .split.left .btn:hover { background-color: var(--left-btn-hover-color); border-color: var(--left-btn-hover-color); } .split.right .btn:hover { background-color: var(--right-btn-hover-color); border-color: var(--right-btn-hover-color); } .container { position: relative; width: 100%; height: 100%; background: #333; } .split { position: absolute; width: 50%; height: 100%; overflow: hidden; } .split.left { left: 0; background: url('ps.jpg'); background-repeat: no-repeat; background-size: cover; } .split.left::before { content: ''; position: absolute; width: 100%; height: 100%; background-color: var(--left-bg-color); } .split.right { right: 0; background: url('xbox.jpg'); background-repeat: no-repeat; background-size: cover; } .split.right::before { content: ''; position: absolute; width: 100%; height: 100%; background-color: var(--right-bg-color); } .split.right, .split.left, .split.right::before, .split.left::before { transition: all var(--speed) ease-in-out; } .hover-left .left { width: var(--hover-width); } .hover-left .right { width: var(--other-width); } .hover-right .right { width: var(--hover-width); } .hover-right .left { width: var(--other-width); } @media (max-width: 800px) { h1 { font-size: 2rem; top: 30%; } .btn { padding: 1.2rem; width: 12rem; } } ================================================ FILE: sticky-navigation/index.html ================================================ Sticky Navigation

Welcome To My Website

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores, consequuntur?

Content One

Lorem, 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!

Content Two

Lorem 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?

================================================ FILE: sticky-navigation/script.js ================================================ const nav = document.querySelector('.nav') window.addEventListener('scroll', fixNav) function fixNav() { if(window.scrollY > nav.offsetHeight + 150) { nav.classList.add('active') } else { nav.classList.remove('active') } } ================================================ FILE: sticky-navigation/style.css ================================================ @import url('https://fonts.googleapis.com/css?family=Open+Sans'); * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Open Sans', sans-serif; color: #222; padding-bottom: 50px; } .container { max-width: 1200px; margin: 0 auto; } .nav { position: fixed; background-color: #222; top: 0; left: 0; right: 0; transition: all 0.3s ease-in-out; } .nav .container { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; transition: all 0.3s ease-in-out; } .nav ul { display: flex; list-style-type: none; align-items: center; justify-content: center; } .nav a { color: #fff; text-decoration: none; padding: 7px 15px; transition: all 0.3s ease-in-out; } .nav.active { background-color: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } .nav.active a { color: #000; } .nav.active .container { padding: 10px 0; } .nav a.current, .nav a:hover { color: #c0392b; font-weight: bold; } .hero { background-image: url('https://images.pexels.com/photos/450035/pexels-photo-450035.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'); background-repeat: no-repeat; background-size: cover; background-position: bottom center; height: 100vh; color: #fff; display: flex; justify-content: center; align-items: center; text-align: center; position: relative; margin-bottom: 20px; z-index: -2; } .hero::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: -1; } .hero h1 { font-size: 46px; margin: -20px 0 20px; } .hero p { font-size: 20px; letter-spacing: 1px; } .content h2, .content h3 { font-size: 150%; margin: 20px 0; } .content p { color: #555; line-height: 30px; letter-spacing: 1.2px; } ================================================ FILE: testimonial-box-switcher/index.html ================================================ Testimonial Box

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.

user

Miyah Myles

Marketing

================================================ FILE: testimonial-box-switcher/script.js ================================================ const testimonialsContainer = document.querySelector('.testimonials-container') const testimonial = document.querySelector('.testimonial') const userImage = document.querySelector('.user-image') const username = document.querySelector('.username') const role = document.querySelector('.role') const testimonials = [ { name: 'Miyah Myles', position: 'Marketing', photo: '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', text: "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.", }, { name: 'June Cha', position: 'Software Engineer', photo: 'https://randomuser.me/api/portraits/women/44.jpg', text: '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!', }, { name: 'Iida Niskanen', position: 'Data Entry', photo: 'https://randomuser.me/api/portraits/women/68.jpg', text: "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.", }, { name: 'Renee Sims', position: 'Receptionist', photo: 'https://randomuser.me/api/portraits/women/65.jpg', text: "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.", }, { name: 'Jonathan Nunfiez', position: 'Graphic Designer', photo: 'https://randomuser.me/api/portraits/men/43.jpg', text: "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!", }, { name: 'Sasha Ho', position: 'Accountant', photo: 'https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?h=350&auto=compress&cs=tinysrgb', text: '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!', }, { name: 'Veeti Seppanen', position: 'Director', photo: 'https://randomuser.me/api/portraits/men/97.jpg', text: '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.', }, ] let idx = 1 function updateTestimonial() { const { name, position, photo, text } = testimonials[idx] testimonial.innerHTML = text userImage.src = photo username.innerHTML = name role.innerHTML = position idx++ if (idx > testimonials.length - 1) { idx = 0 } } setInterval(updateTestimonial, 10000) ================================================ FILE: testimonial-box-switcher/style.css ================================================ @import url('https://fonts.googleapis.com/css?family=Montserrat'); * { box-sizing: border-box; } body { background-color: #f4f4f4; font-family: 'Montserrat', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; padding: 10px; } .testimonial-container { background-color: #476ce4; color: #fff; border-radius: 15px; margin: 20px auto; padding: 50px 80px; max-width: 768px; position: relative; } .fa-quote { color: rgba(255, 255, 255, 0.3); font-size: 28px; position: absolute; top: 70px; } .fa-quote-right { left: 40px; } .fa-quote-left { right: 40px; } .testimonial { line-height: 28px; text-align: justify; } .user { display: flex; align-items: center; justify-content: center; } .user .user-image { border-radius: 50%; height: 75px; width: 75px; object-fit: cover; } .user .user-details { margin-left: 10px; } .user .username { margin: 0; } .user .role { font-weight: normal; margin: 10px 0; } .progress-bar { background-color: #fff; height: 4px; width: 100%; animation: grow 10s linear infinite; transform-origin: left; } @keyframes grow { 0% { transform: scaleX(0); } } @media (max-width: 768px) { .testimonial-container { padding: 20px 30px; } .fa-quote { display: none; } } ================================================ FILE: theme-clock/index.html ================================================ Theme Clock
================================================ FILE: theme-clock/script.js ================================================ const hourEl = document.querySelector('.hour') const minuteEl = document.querySelector('.minute') const secondEl = document.querySelector('.second') const timeEl = document.querySelector('.time') const dateEl = document.querySelector('.date') const toggle = document.querySelector('.toggle') const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; toggle.addEventListener('click', (e) => { const html = document.querySelector('html') if (html.classList.contains('dark')) { html.classList.remove('dark') e.target.innerHTML = 'Dark mode' } else { html.classList.add('dark') e.target.innerHTML = 'Light mode' } }) function setTime() { const time = new Date(); const month = time.getMonth() const day = time.getDay() const date = time.getDate() const hours = time.getHours() const hoursForClock = hours >= 13 ? hours % 12 : hours; const minutes = time.getMinutes() const seconds = time.getSeconds() const ampm = hours >= 12 ? 'PM' : 'AM' hourEl.style.transform = `translate(-50%, -100%) rotate(${scale(hoursForClock, 0, 12, 0, 360)}deg)` minuteEl.style.transform = `translate(-50%, -100%) rotate(${scale(minutes, 0, 60, 0, 360)}deg)` secondEl.style.transform = `translate(-50%, -100%) rotate(${scale(seconds, 0, 60, 0, 360)}deg)` timeEl.innerHTML = `${hoursForClock}:${minutes < 10 ? `0${minutes}` : minutes} ${ampm}` dateEl.innerHTML = `${days[day]}, ${months[month]} ${date}` } // StackOverflow https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers const scale = (num, in_min, in_max, out_min, out_max) => { return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min; } setTime() setInterval(setTime, 1000) ================================================ FILE: theme-clock/style.css ================================================ @import url('https://fonts.googleapis.com/css?family=Heebo:300&display=swap'); * { box-sizing: border-box; } :root { --primary-color: #000; --secondary-color: #fff; } html { transition: all 0.5s ease-in; } html.dark { --primary-color: #fff; --secondary-color: #333; } html.dark { background-color: #111; color: var(--primary-color); } body { font-family: 'Heebo', sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .toggle { cursor: pointer; background-color: var(--primary-color); color: var(--secondary-color); border: 0; border-radius: 4px; padding: 8px 12px; position: absolute; top: 100px; } .toggle:focus { outline: none; } .clock-container { display: flex; flex-direction: column; justify-content: space-between; align-items: center; } .clock { position: relative; width: 200px; height: 200px; } .needle { background-color: var(--primary-color); position: absolute; top: 50%; left: 50%; height: 65px; width: 3px; transform-origin: bottom center; transition: all 0.5s ease-in linear; } .needle.hour { transform: translate(-50%, -100%) rotate(0deg); } .needle.minute { transform: translate(-50%, -100%) rotate(0deg); height: 100px; } .needle.second { transform: translate(-50%, -100%) rotate(0deg); height: 100px; background-color: #e74c3c; } .center-point { background-color: #e74c3c; width: 10px; height: 10px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; } .center-point::after { content: ''; background-color: var(--primary-color); width: 5px; height: 5px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; } .time { font-size: 60px; } .date { color: #aaa; font-size: 14px; letter-spacing: 0.3px; text-transform: uppercase; } .date .circle { background-color: var(--primary-color); color: var(--secondary-color); border-radius: 50%; height: 18px; width: 18px; display: inline-flex; align-items: center; justify-content: center; line-height: 18px; transition: all 0.5s ease-in; font-size: 12px; } ================================================ FILE: toast-notification/index.html ================================================ Toast Notification
================================================ FILE: toast-notification/script.js ================================================ const button = document.getElementById('button') const toasts = document.getElementById('toasts') const messages = [ 'Message One', 'Message Two', 'Message Three', 'Message Four', ] const types = ['info', 'success', 'error'] button.addEventListener('click', () => createNotification()) function createNotification(message = null, type = null) { const notif = document.createElement('div') notif.classList.add('toast') notif.classList.add(type ? type : getRandomType()) notif.innerText = message ? message : getRandomMessage() toasts.appendChild(notif) setTimeout(() => { notif.remove() }, 3000) } function getRandomMessage() { return messages[Math.floor(Math.random() * messages.length)] } function getRandomType() { return types[Math.floor(Math.random() * types.length)] } ================================================ FILE: toast-notification/style.css ================================================ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap'); * { box-sizing: border-box; } body { background-color: rebeccapurple; font-family: 'Poppins', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .btn { background-color: #ffffff; color: rebeccapurple; font-family: inherit; font-weight: bold; padding: 1rem; border-radius: 5px; border: none; cursor: pointer; } .btn:focus { outline: none; } .btn:active { transform: scale(0.98); } #toasts { position: fixed; bottom: 10px; right: 10px; display: flex; flex-direction: column; align-items: flex-end; } .toast { background-color: #fff; border-radius: 5px; padding: 1rem 2rem; margin: 0.5rem; } .toast.info { color: rebeccapurple; } .toast.success { color: green; } .toast.error { color: red; } ================================================ FILE: todo-list/index.html ================================================ Todo List

todos

Left click to toggle completed.
Right click to delete todo ================================================ FILE: todo-list/script.js ================================================ const form = document.getElementById('form') const input = document.getElementById('input') const todosUL = document.getElementById('todos') const todos = JSON.parse(localStorage.getItem('todos')) if(todos) { todos.forEach(todo => addTodo(todo)) } form.addEventListener('submit', (e) => { e.preventDefault() addTodo() }) function addTodo(todo) { let todoText = input.value if(todo) { todoText = todo.text } if(todoText) { const todoEl = document.createElement('li') if(todo && todo.completed) { todoEl.classList.add('completed') } todoEl.innerText = todoText todoEl.addEventListener('click', () => { todoEl.classList.toggle('completed') updateLS() }) todoEl.addEventListener('contextmenu', (e) => { e.preventDefault() todoEl.remove() updateLS() }) todosUL.appendChild(todoEl) input.value = '' updateLS() } } function updateLS() { todosEl = document.querySelectorAll('li') const todos = [] todosEl.forEach(todoEl => { todos.push({ text: todoEl.innerText, completed: todoEl.classList.contains('completed') }) }) localStorage.setItem('todos', JSON.stringify(todos)) } ================================================ FILE: todo-list/style.css ================================================ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap'); * { box-sizing: border-box; } body { background-color: #f5f5f5; color: #444; font-family: 'Poppins', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; } h1 { color: rgb(179, 131, 226); font-size: 10rem; text-align: center; opacity: 0.4; } form { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); max-width: 100%; width: 400px; } .input { border: none; color: #444; font-size: 2rem; padding: 1rem 2rem; display: block; width: 100%; } .input::placeholder { color: #d5d5d5; } .input:focus { outline-color: rgb(179, 131, 226); } .todos { background-color: #fff; padding: 0; margin: 0; list-style-type: none; } .todos li { border-top: 1px solid #e5e5e5; cursor: pointer; font-size: 1.5rem; padding: 1rem 2rem; } .todos li.completed { color: #b6b6b6; text-decoration: line-through; } small { color: #b5b5b5; margin-top: 3rem; text-align: center; } ================================================ FILE: verify-account-ui/index.html ================================================ Verify Account

Verify Your Account

We emailed you the six digit code to cool_guy@email.com
Enter the code below to confirm your email address.

This is design only. We didn't actually send you an email as we don't have your email, right?
================================================ FILE: verify-account-ui/script.js ================================================ const codes = document.querySelectorAll('.code') codes[0].focus() codes.forEach((code, idx) => { code.addEventListener('keydown', (e) => { if(e.key >= 0 && e.key <=9) { codes[idx].value = '' setTimeout(() => codes[idx + 1].focus(), 10) } else if(e.key === 'Backspace') { setTimeout(() => codes[idx - 1].focus(), 10) } }) }) ================================================ FILE: verify-account-ui/style.css ================================================ @import url('https://fonts.googleapis.com/css?family=Muli:300,700&display=swap'); * { box-sizing: border-box; } body { background-color: #fbfcfe; font-family: 'Muli', sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .container { background-color: #fff; border: 3px #000 solid; border-radius: 10px; padding: 30px; max-width: 1000px; text-align: center; } .code-container { display: flex; align-items: center; justify-content: center; margin: 40px 0; } .code { caret-color: transparent; border-radius: 5px; font-size: 75px; height: 120px; width: 100px; border: 1px solid #eee; margin: 1%; text-align: center; font-weight: 300; -moz-appearance: textfield; } .code::-webkit-outer-spin-button, .code::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .code:valid { border-color: #3498db; box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.25); } .info { background-color: #eaeaea; display: inline-block; padding: 10px; line-height: 20px; max-width: 400px; color: #777; border-radius: 5px; } @media (max-width: 600px) { .code-container { flex-wrap: wrap; } .code { font-size: 60px; height: 80px; max-width: 70px; } }