├── 3d-boxes-background ├── 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 ├── content-placeholder ├── index.html ├── script.js └── style.css ├── custom-range-slider ├── 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 ├── index.html ├── script.js └── style.css ├── expanding-cards ├── index.html └── style.css ├── faq-collapse ├── index.html ├── script.js ├── style.css └── v2 │ ├── index.html │ ├── script.js │ └── style.css ├── feedback-ui-design ├── index.html ├── script.js └── style.css ├── fixed-navbar ├── index.html ├── script.js └── style.css ├── form-input-wave ├── index.html ├── script.js └── style.css ├── github-profile ├── index.html ├── script.js └── style.css ├── good-cheap-fast ├── index.html ├── script.js ├── style.css └── v1 │ ├── index.html │ ├── script.js │ └── style.css ├── hidden-search ├── index.html ├── script.js └── style.css ├── hoverboard ├── index.html ├── script.js └── style.css ├── image-carousel ├── v1 │ ├── index.html │ ├── script.js │ └── style.css └── v2 │ ├── 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 ├── script.js └── 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-navigation ├── index.html ├── script.js └── style.css ├── note-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-feed ├── index.html ├── script.js └── style.css ├── readme.md ├── ripple-effect ├── index.html ├── script.js └── style.css ├── rotating-nav-animation ├── index.html ├── script.js └── style.css ├── scroll-animation ├── index.html ├── script.js └── style.css ├── sound-board ├── applause.mp3 ├── boo.mp3 ├── gasp.mp3 ├── index.html ├── script.js ├── style.css ├── tada.mp3 ├── victory.mp3 └── wrong.mp3 ├── split-landing-page ├── index.html ├── ps.jpg ├── script.js ├── style.css └── xbox.jpg ├── testimonial-box-switcher ├── index.html ├── script.js └── style.css ├── theme-clock ├── index.html ├── script.js └── style.css ├── to-do-list ├── index.html ├── script.js └── style.css ├── toast-notification ├── index.html ├── script.js └── style.css └── verify-account-ui ├── index.html ├── script.js └── style.css /3d-boxes-background/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | The 3D Box Background App 11 | 12 | 13 | 14 | 15 |
16 |
17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /3d-boxes-background/script.js: -------------------------------------------------------------------------------- 1 | let boxContainer = document.getElementById('boxes'); 2 | let btn = document.getElementById('btn'); 3 | 4 | btn.addEventListener('click', () =>{ 5 | boxContainer.classList.toggle('big'); 6 | }) 7 | 8 | function createBoxes(){ 9 | for(let i = 0; i < 4; i++){ 10 | for(let j = 0; j < 4; j++){ 11 | let box = document.createElement('div'); 12 | box.classList.add('box'); 13 | box.style.backgroundPosition = `${-j * 125}px ${-i * 125}px`; 14 | boxContainer.appendChild(box); 15 | } 16 | } 17 | } 18 | createBoxes(); 19 | -------------------------------------------------------------------------------- /3d-boxes-background/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | } 4 | body{ 5 | background-color: #f5e4e4; 6 | font-family: 'Roboto', sans-serif; 7 | display: flex; 8 | flex-direction: column; 9 | align-items: center; 10 | justify-content: center; 11 | height: 100vh; 12 | overflow: hidden; 13 | } 14 | 15 | .magic { 16 | background-color: #f9ca24; 17 | color: #fff; 18 | font-family: 'Poppins', sans-serif; 19 | border: 0; 20 | border-radius: 3px; 21 | font-size: 16px; 22 | padding: 12px 20px; 23 | cursor: pointer; 24 | position: fixed; 25 | top: 20px; 26 | letter-spacing: 1px; 27 | box-shadow: 0 3px rgba(249, 202, 36, 0.5); 28 | z-index: 100; 29 | } 30 | .magic:focus { 31 | outline: none; 32 | } 33 | .magic:active{ 34 | box-shadow: none; 35 | transform: translateY(2px); 36 | } 37 | .boxes{ 38 | height: 500px; 39 | width: 500px; 40 | display: flex; 41 | flex-wrap: wrap; 42 | justify-content: space-around; 43 | transition: 0.4s ease; 44 | } 45 | .boxes.big{ 46 | height: 600px; 47 | width: 600px; 48 | } 49 | .boxes.big .box{ 50 | transform: rotateZ(360deg); 51 | } 52 | .box{ 53 | background-image: url('https://media.giphy.com/media/11J027GnyjrcJi/giphy.gif'); 54 | height: 125px; 55 | width: 125px; 56 | position: relative; 57 | background-size: 500px 500px; 58 | background-repeat: no-repeat; 59 | transition: 0.4s ease; 60 | } 61 | .box::after{ 62 | content: ''; 63 | background-color: #f6e58d; 64 | position: absolute; 65 | top: 8px; 66 | right: -15px; 67 | height: 100%; 68 | width: 15px; 69 | transform : skewY(45deg); 70 | } 71 | .box::before { 72 | content: ''; 73 | background-color: #f9ca24; 74 | position: absolute; 75 | bottom: -15px; 76 | left: 8px; 77 | height: 15px; 78 | width: 100%; 79 | transform: skewX(45deg); 80 | } 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /animated-countdown/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Animated Countdown 8 | 9 | 10 |
11 |
12 | 3 13 | 2 14 | 1 15 | 0 16 |
17 |

Get Ready

18 |
19 | 20 |
21 |

GO

22 | 23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /animated-countdown/script.js: -------------------------------------------------------------------------------- 1 | let nums = document.querySelectorAll('.nums span') 2 | let counter = document.querySelector('.counter') 3 | let finalMessage = document.querySelector('.final') 4 | let replay = document.querySelector('#replay') 5 | 6 | runAnimation() 7 | 8 | function resetDOM() { 9 | counter.classList.remove('hide') 10 | finalMessage.classList.remove('show') 11 | 12 | nums.forEach((num) => { 13 | num.classList.value = '' 14 | }) 15 | 16 | nums[0].classList.add('in') 17 | } 18 | 19 | function runAnimation() { 20 | nums.forEach((num, idx) => { 21 | let nextToLast = nums.length - 1 22 | 23 | num.addEventListener('animationend', (e) => { 24 | if (e.animationName === 'goIn' && idx !== nextToLast) { 25 | num.classList.remove('in') 26 | num.classList.add('out') 27 | } else if (e.animationName === 'goOut' && num.nextElementSibling) { 28 | num.nextElementSibling.classList.add('in') 29 | } else { 30 | counter.classList.add('hide') 31 | finalMessage.classList.add('show') 32 | } 33 | }) 34 | }) 35 | } 36 | 37 | replay.addEventListener('click', () => { 38 | resetDOM() 39 | runAnimation() 40 | }) 41 | -------------------------------------------------------------------------------- /animated-countdown/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: 'Roboto', sans-serif; 9 | margin: 0; 10 | height: 100vh; 11 | overflow: hidden; 12 | } 13 | 14 | h4 { 15 | font-size: 20px; 16 | margin: 5px; 17 | text-transform: uppercase; 18 | } 19 | 20 | .counter { 21 | position: fixed; 22 | top: 50%; 23 | left: 50%; 24 | transform: translate(-50%, -50%); 25 | text-align: center; 26 | } 27 | 28 | .counter.hide { 29 | transform: translate(-50%, -50%) scale(0); 30 | animation: hide 0.2s ease-out; 31 | } 32 | 33 | @keyframes hide { 34 | 0% { 35 | transform: translate(-50%, -50%) scale(1); 36 | } 37 | 38 | 100% { 39 | transform: translate(-50%, -50%) scale(0); 40 | } 41 | } 42 | 43 | .final { 44 | position: fixed; 45 | top: 50%; 46 | left: 50%; 47 | transform: translate(-50%, -50%) scale(0); 48 | text-align: center; 49 | } 50 | 51 | .final.show { 52 | transform: translate(-50%, -50%) scale(1); 53 | animation: show 0.2s ease-out; 54 | } 55 | 56 | @keyframes show { 57 | 0% { 58 | transform: translate(-50%, -50%) scale(0); 59 | } 60 | 61 | 30% { 62 | transform: translate(-50%, -50%) scale(1.4); 63 | } 64 | 65 | 100% { 66 | transform: translate(-50%, -50%) scale(1); 67 | } 68 | } 69 | 70 | .nums { 71 | color: #3498db; 72 | font-size: 50px; 73 | position: relative; 74 | overflow: hidden; 75 | width: 250px; 76 | height: 50px; 77 | } 78 | 79 | .nums span { 80 | position: absolute; 81 | top: 50%; 82 | left: 50%; 83 | transform: translate(-50%, -50%) rotate(120deg); 84 | transform-origin: bottom center; 85 | } 86 | 87 | .nums span.in { 88 | transform: translate(-50%, -50%) rotate(0deg); 89 | animation: goIn 0.5s ease-in-out; 90 | } 91 | 92 | .nums span.out { 93 | animation: goOut 0.5s ease-in-out; 94 | } 95 | 96 | @keyframes goIn { 97 | 0% { 98 | transform: translate(-50%, -50%) rotate(120deg); 99 | } 100 | 101 | 30% { 102 | transform: translate(-50%, -50%) rotate(-20deg); 103 | } 104 | 105 | 60% { 106 | transform: translate(-50%, -50%) rotate(10deg); 107 | } 108 | 109 | 100% { 110 | transform: translate(-50%, -50%) rotate(0deg); 111 | } 112 | } 113 | 114 | @keyframes goOut { 115 | 0% { 116 | transform: translate(-50%, -50%) rotate(0deg); 117 | } 118 | 119 | 60% { 120 | transform: translate(-50%, -50%) rotate(20deg); 121 | } 122 | 123 | 100% { 124 | transform: translate(-50%, -50%) rotate(-120deg); 125 | } 126 | } 127 | -------------------------------------------------------------------------------- /animated-navigation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Animated Navigation 9 | 10 | 11 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /animated-navigation/script.js: -------------------------------------------------------------------------------- 1 | let toggle = document.getElementById('toggle') 2 | let nav = document.getElementById('nav') 3 | 4 | toggle.addEventListener('click', () => nav.classList.toggle('active')) 5 | -------------------------------------------------------------------------------- /animated-navigation/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: #eafbff; 9 | background-image: linear-gradient( 10 | to bottom, 11 | #eafbff 0%, 12 | #eafbff 50%, 13 | #5290f9 50%, 14 | #5290f9 100% 15 | ); 16 | font-family: 'Muli', sans-serif; 17 | display: flex; 18 | align-items: center; 19 | justify-content: center; 20 | height: 100vh; 21 | margin: 0; 22 | } 23 | 24 | nav { 25 | background-color: #fff; 26 | padding: 20px; 27 | width: 80px; 28 | display: flex; 29 | align-items: center; 30 | justify-content: center; 31 | border-radius: 3px; 32 | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); 33 | transition: width 0.6s linear; 34 | overflow-x: hidden; 35 | } 36 | 37 | nav.active { 38 | width: 350px; 39 | } 40 | 41 | nav ul { 42 | display: flex; 43 | list-style-type: none; 44 | padding: 0; 45 | margin: 0; 46 | width: 0; 47 | transition: width 0.6s linear; 48 | } 49 | 50 | nav.active ul { 51 | width: 100%; 52 | } 53 | 54 | nav ul li { 55 | transform: rotateY(0deg); 56 | opacity: 0; 57 | transition: transform 0.6s linear, opacity 0.6s linear; 58 | } 59 | 60 | nav.active ul li { 61 | opacity: 1; 62 | transform: rotateY(360deg); 63 | } 64 | 65 | nav ul a { 66 | position: relative; 67 | color: #000; 68 | text-decoration: none; 69 | margin: 0 10px; 70 | } 71 | 72 | .icon { 73 | background-color: #fff; 74 | border: 0; 75 | cursor: pointer; 76 | padding: 0; 77 | position: relative; 78 | height: 30px; 79 | width: 30px; 80 | } 81 | 82 | .icon:focus { 83 | outline: 0; 84 | } 85 | 86 | .icon .line { 87 | background-color: #5290f9; 88 | height: 2px; 89 | width: 20px; 90 | position: absolute; 91 | top: 10px; 92 | left: 5px; 93 | transition: transform 0.6s linear; 94 | } 95 | 96 | .icon .line2 { 97 | top: auto; 98 | bottom: 10px; 99 | } 100 | 101 | nav.active .icon .line1 { 102 | transform: rotate(-765deg) translateY(5.5px); 103 | } 104 | 105 | nav.active .icon .line2 { 106 | transform: rotate(765deg) translateY(-5.5px); 107 | } 108 | -------------------------------------------------------------------------------- /auto-text-effect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | The Automatic Text Effect 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /auto-text-effect/script.js: -------------------------------------------------------------------------------- 1 | let msg = "Music Art and Life!" 2 | let speed = document.getElementById('speed'); 3 | let output = document.getElementById('output'); 4 | 5 | let fast = 800/speed.value; 6 | console.log(fast); 7 | 8 | speed.addEventListener('input', (e) => { 9 | fast = 800/e.target.value; 10 | }) 11 | 12 | 13 | let idx = 1; 14 | 15 | function show(){ 16 | output.innerHTML = msg.slice(0, idx); 17 | idx++; 18 | if(idx > msg.length){ 19 | idx = 0; 20 | } 21 | setTimeout(show, fast); 22 | } 23 | 24 | show(); 25 | 26 | -------------------------------------------------------------------------------- /auto-text-effect/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: rgb(224, 229, 235); 3 | font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 4 | } 5 | #app{ 6 | position: absolute; 7 | top: 50%; 8 | left: 50%; 9 | transform: translate(-50%, -50%); 10 | box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 8px 16px rgba(0, 0, 0, .1); 11 | padding: 2.5vh; 12 | background-color: white; 13 | border-radius: 8px; 14 | width: 50vw; 15 | justify-content: center; 16 | text-align: center; 17 | padding: 5vh; 18 | } 19 | #output{ 20 | height: 10vh; 21 | font-size: 5vh; 22 | } 23 | -------------------------------------------------------------------------------- /background-slider/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Background Slider 11 | 12 | 13 | 14 |
15 |
21 |
27 | 28 |
34 | 35 |
41 | 42 |
48 | 51 | 52 | 55 | 56 |
57 | 58 | 59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /background-slider/script.js: -------------------------------------------------------------------------------- 1 | let body= document.body; 2 | let slides = document.querySelectorAll('.slide'); 3 | let leftBtn= document.getElementById('left'); 4 | let rightBtn= document.getElementById('right'); 5 | 6 | let activeSlide = 0; 7 | 8 | setBg(); 9 | 10 | function setBg(){ 11 | body.style.backgroundImage = slides[activeSlide].style.backgroundImage; 12 | } 13 | 14 | rightBtn.addEventListener('click', () => { 15 | activeSlide++; 16 | if(activeSlide > slides.length -1){ 17 | activeSlide = 0; 18 | } 19 | setBg(); 20 | setActiveSlide(); 21 | }) 22 | 23 | 24 | leftBtn.addEventListener('click', () => { 25 | activeSlide--; 26 | if(activeSlide < 0){ 27 | activeSlide = slides.length -1; 28 | } 29 | setBg(); 30 | setActiveSlide(); 31 | }) 32 | 33 | function setActiveSlide(){ 34 | slides.forEach((slide) => { 35 | slide.classList.remove('active'); 36 | }) 37 | slides[activeSlide].classList.add('active'); 38 | } 39 | -------------------------------------------------------------------------------- /background-slider/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | } 4 | body{ 5 | height: 100vh; 6 | width: 100vw; 7 | background-position: center center; 8 | background-size: cover; 9 | transition: 0.4s ease; 10 | background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80'); 11 | display: flex; 12 | flex-direction: column; 13 | overflow: hidden; 14 | align-items: center; 15 | justify-content: center; 16 | } 17 | body::before{ 18 | content: ''; 19 | position: absolute; 20 | top: 0; 21 | left: 0; 22 | height: 100vh; 23 | width: 100%; 24 | z-index: -1; 25 | background-color: rgba(0,0,0,0.7); 26 | } 27 | .slide-container{ 28 | box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); 29 | height: 70vh; 30 | width: 70vw; 31 | position: relative; 32 | overflow: hidden; 33 | } 34 | .slide{ 35 | opacity: 0; 36 | height: 100vh; 37 | width: 100vw; 38 | background-position: center center; 39 | background-size: cover; 40 | position: absolute; 41 | top: -15vh; 42 | left: -15vw; 43 | transition:0.4s ease; 44 | } 45 | .slide.active{ 46 | opacity: 1; 47 | } 48 | .arrow { 49 | position: fixed; 50 | background-color: transparent; 51 | color: #fff; 52 | padding: 20px; 53 | font-size: 30px; 54 | top: 50%; 55 | border: none; 56 | transform: translateY(-50%); 57 | cursor: pointer; 58 | } 59 | .arrow:focus { 60 | outline: 0; 61 | } 62 | 63 | .left-arrow { 64 | left: calc(15vw - 65px); 65 | } 66 | 67 | .right-arrow { 68 | right: calc(15vw - 65px); 69 | } 70 | -------------------------------------------------------------------------------- /blurry-loading/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Blurry Loading 12 | 13 | 14 | 15 | 16 |
17 |
0%
18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /blurry-loading/script.js: -------------------------------------------------------------------------------- 1 | let loader = document.querySelector('.loading-text'); 2 | let bg = document.querySelector('.bg'); 3 | 4 | 5 | let count = 0; 6 | 7 | let a = setInterval(increment, 20); 8 | 9 | function increment(){ 10 | count++; 11 | if(count == 100){ 12 | clearInterval(a); 13 | } 14 | 15 | loader.innerHTML = count; 16 | loader.style.opacity = scale(count, 0, 100, 1, 0); 17 | bg.style.filter = `blur(${scale(count, 0, 100, 30, 0)}px)`; 18 | } 19 | 20 | const scale = (num, in_min, in_max, out_min, out_max) => { 21 | return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min 22 | } 23 | -------------------------------------------------------------------------------- /blurry-loading/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Ubuntu'); 2 | 3 | * { 4 | margin: 0; 5 | } 6 | 7 | body { 8 | font-family: 'Ubuntu', sans-serif; 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | height: 100vh; 13 | } 14 | 15 | .bg { 16 | background: url('https://images.pexels.com/photos/15286/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=650&w=940') 17 | no-repeat center center/cover; 18 | position: absolute; 19 | width: 100vw; 20 | height: 100vh; 21 | z-index: -1; 22 | } 23 | 24 | .loading-text { 25 | font-size: 50px; 26 | color: #fff; 27 | } 28 | -------------------------------------------------------------------------------- /content-placeholder/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | The Password Strength Background 12 | 13 | 14 | 15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /content-placeholder/script.js: -------------------------------------------------------------------------------- 1 | let a = document.getElementById('cardimage'); 2 | let b = document.getElementById('cardhead'); 3 | let c = document.getElementById('cardinfo'); 4 | let d = document.getElementById('cardprice'); 5 | 6 | setTimeout(disp, 2500); 7 | 8 | function disp(){ 9 | a.classList.remove("card"); 10 | a.classList.add("cardloaded"); 11 | a.innerHTML = ``; 12 | 13 | b.style.backgroundImage = "none"; 14 | b.style.backgroundColor = 'white'; 15 | b.innerHTML = "Full Stack Development Course"; 16 | 17 | c.innerHTML = "Learn HTML, CSS, JavaScript, AngularJS, React, MongoDB, Node and other exciting technologies"; 18 | c.style.backgroundImage = "none"; 19 | c.style.backgroundColor = 'white'; 20 | 21 | d.innerHTML = "Price: $99.99"; 22 | d.style.backgroundImage = "none"; 23 | d.style.backgroundColor = 'white'; 24 | } 25 | 26 | -------------------------------------------------------------------------------- /content-placeholder/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: rgb(224, 229, 235); 3 | } 4 | #app{ 5 | position: absolute; 6 | top: 50%; 7 | left: 50%; 8 | transform: translate(-50%, -50%); 9 | box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 8px 16px rgba(0, 0, 0, .1); 10 | padding: 2.5vh; 11 | background-color: white; 12 | border-radius: 8px; 13 | } 14 | .cardhead{ 15 | background-image: linear-gradient( 16 | to right, 17 | #f6f7f8 0%, 18 | #edeef1 10%, 19 | #f6f7f8 20%, 20 | #f6f7f8 100% 21 | ); 22 | width: 48vh; 23 | height: 3.5vh; 24 | background-size: 200% 100%; 25 | animation: bgPos 2s linear infinite; 26 | font-size: 3.5vh; 27 | } 28 | .card{ 29 | margin: 2vh; 30 | } 31 | .cardinfo{ 32 | background-image: linear-gradient( 33 | to right, 34 | #f6f7f8 0%, 35 | #edeef1 10%, 36 | #f6f7f8 20%, 37 | #f6f7f8 100% 38 | ); 39 | width: 50vh; 40 | height: 7vh; 41 | background-size: 200% 100%; 42 | animation: bgPos 2s linear infinite; 43 | overflow-wrap: break-word; 44 | word-wrap: break-word; 45 | } 46 | .cardprice{ 47 | padding: 1vh; 48 | background-image: linear-gradient( 49 | to right, 50 | #f6f7f8 0%, 51 | #edeef1 10%, 52 | #f6f7f8 20%, 53 | #f6f7f8 100% 54 | ); 55 | width: 50vh; 56 | height: 3.5vh; 57 | background-size: 200% 100%; 58 | animation: bgPos 2s linear infinite; 59 | overflow-wrap: break-word; 60 | word-wrap: break-word; 61 | } 62 | .cardimage{ 63 | background-image: linear-gradient( 64 | to right, 65 | #f6f7f8 0%, 66 | #edeef1 10%, 67 | #f6f7f8 20%, 68 | #f6f7f8 100% 69 | ); 70 | width: 50vh; 71 | height: 25vh; 72 | background-size: 200% 100%; 73 | animation: bgPos 2s linear infinite; 74 | } 75 | img{ 76 | background-size: cover; 77 | width: 50vh; 78 | height: 25vh; 79 | } 80 | 81 | @keyframes bgPos { 82 | 0% { 83 | background-position: 50% 0; 84 | } 85 | 86 | 100% { 87 | background-position: -150% 0; 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /custom-range-slider/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Custom Range Slider 8 | 9 | 10 |

Custom Range Slider

11 |
12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /custom-range-slider/script.js: -------------------------------------------------------------------------------- 1 | const range = document.getElementById('range') 2 | 3 | range.addEventListener('input', (e) => { 4 | const value = +e.target.value 5 | const label = e.target.nextElementSibling 6 | 7 | const range_width = getComputedStyle(e.target).getPropertyValue('width') 8 | const label_width = getComputedStyle(label).getPropertyValue('width') 9 | 10 | const num_width = +range_width.substring(0, range_width.length - 2) 11 | const num_label_width = +label_width.substring(0, label_width.length - 2) 12 | 13 | const max = +e.target.max 14 | const min = +e.target.min 15 | 16 | const left = value * (num_width / max) - num_label_width / 2 + scale(value, min, max, 10, -10) 17 | 18 | label.style.left = `${left}px` 19 | 20 | 21 | label.innerHTML = value 22 | }) 23 | 24 | // https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers 25 | const scale = (num, in_min, in_max, out_min, out_max) => { 26 | return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min; 27 | } 28 | -------------------------------------------------------------------------------- /custom-range-slider/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Lato&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); 9 | font-family: 'Lato', sans-serif; 10 | display: flex; 11 | flex-direction: column; 12 | align-items: center; 13 | justify-content: center; 14 | height: 100vh; 15 | overflow: hidden; 16 | margin: 0; 17 | } 18 | 19 | h2 { 20 | position: absolute; 21 | top: 10px; 22 | } 23 | 24 | .range-container { 25 | position: relative; 26 | } 27 | 28 | input[type='range'] { 29 | width: 300px; 30 | margin: 18px 0; 31 | -webkit-appearance: none; 32 | } 33 | 34 | input[type='range']:focus { 35 | outline: none; 36 | } 37 | 38 | input[type='range'] + label { 39 | background-color: #fff; 40 | position: absolute; 41 | top: -25px; 42 | left: 110px; 43 | width: 80px; 44 | padding: 5px 0; 45 | text-align: center; 46 | border-radius: 4px; 47 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); 48 | } 49 | 50 | input[type='range']::-webkit-slider-runnable-track { 51 | background: purple; 52 | border-radius: 4px; 53 | width: 100%; 54 | height: 10px; 55 | cursor: pointer; 56 | } 57 | 58 | input[type='range']::-webkit-slider-thumb { 59 | -webkit-appearance: none; 60 | height: 24px; 61 | width: 24px; 62 | background: #fff; 63 | border-radius: 50%; 64 | border: 1px solid purple; 65 | margin-top: -7px; 66 | cursor: pointer; 67 | } 68 | -------------------------------------------------------------------------------- /dad-jokes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Document 11 | 12 | 13 | 45 | 46 | 47 |
48 |

Dad Jokes

49 | 50 | 51 |
52 |
53 | 54 | 55 | 56 | 57 | 58 | 59 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /dad-jokes/script.js: -------------------------------------------------------------------------------- 1 | document.getElementById('btn').addEventListener('click', joke); 2 | async function joke(){ 3 | 4 | let config = { 5 | headers:{ 6 | Accept: 'application/json' 7 | } 8 | } 9 | 10 | let a = await fetch('https://icanhazdadjoke.com', config); 11 | let b = await a.json(); 12 | 13 | document.getElementById('demo').innerHTML = b.joke; 14 | 15 | 16 | } 17 | -------------------------------------------------------------------------------- /dad-jokes/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: rgb(252, 228, 192); 3 | } 4 | #container{ 5 | display: flex; 6 | flex-direction: column; 7 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 8 | } 9 | #btn{ 10 | align-items:center; 11 | text-align:center; 12 | width: 25vh; 13 | margin: auto; 14 | margin-top:30vh; 15 | background-color: white; 16 | border-radius: 5px; 17 | border: 2px solid black; 18 | font-weight: 600; 19 | padding: 2vh; 20 | cursor: pointer; 21 | } 22 | #demo{ 23 | margin: auto; 24 | padding: 4vh; 25 | font-size: 1.2rem; 26 | } 27 | h1{ 28 | margin: auto; 29 | font-size: 10vh; 30 | } 31 | -------------------------------------------------------------------------------- /double-click-heart/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Double Click Heart Animation 12 | 13 | 14 | 15 | 16 |
17 |
18 | 21 |
22 |
Likes:
23 |
24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /double-click-heart/script.js: -------------------------------------------------------------------------------- 1 | let a = document.getElementById('img'); 2 | a.addEventListener('dblclick', disp); 3 | 4 | let b = document.getElementById('heart'); 5 | let c = document.getElementById('counter'); 6 | let count = 0; 7 | 8 | function disp(){ 9 | count++ 10 | b.style.visibility = 'visible'; 11 | b.style.animation = '2s like-heart-animation ease-in-out forwards'; 12 | c.innerHTML = `Likes: ${count}`; 13 | setTimeout(() => { 14 | b.style.visibility = 'hidden'; 15 | b.style.animation = 'none'; 16 | }, 1200); 17 | } 18 | -------------------------------------------------------------------------------- /double-click-heart/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: rgb(252, 244, 230); 3 | } 4 | #app{ 5 | position: absolute; 6 | top: 50%; 7 | left: 50%; 8 | transform: translate(-50%, -50%); 9 | } 10 | i{ 11 | font-size: 10vh; 12 | color: white; 13 | margin-top: 35vh; 14 | visibility: hidden; 15 | } 16 | #img{ 17 | box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 8px 16px rgba(0, 0, 0, .1); 18 | text-align: center; 19 | height: 80vh; 20 | width: 25vw; 21 | background-image: url('https://images.unsplash.com/photo-1444090542259-0af8fa96557e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80'); 22 | z-index: -1; 23 | } 24 | #counter{ 25 | text-align: center; 26 | padding: 2vh; 27 | font-weight: 400; 28 | font-family: Verdana, Geneva, Tahoma, sans-serif; 29 | margin-top: 1vh; 30 | border-radius: 5px; 31 | border: 2px solid lightsalmon; 32 | background-color: white; 33 | } 34 | @keyframes like-heart-animation { 35 | 0%, 36 | to { 37 | opacity: 0; 38 | -webkit-transform: scale(0); 39 | transform: scale(0); 40 | } 41 | 15% { 42 | opacity: 0.9; 43 | -webkit-transform: scale(1.2); 44 | transform: scale(1.2); 45 | } 46 | 30% { 47 | -webkit-transform: scale(0.95); 48 | transform: scale(0.95); 49 | } 50 | 45%, 51 | 80% { 52 | opacity: 0.9; 53 | -webkit-transform: scale(1); 54 | transform: scale(1); 55 | } 56 | } 57 | 58 | -------------------------------------------------------------------------------- /double-vertical-slider/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | The Double Vertical Slider 11 | 12 | 13 | 14 | 15 |
16 |
17 | 18 |
19 |

Nature flower

20 |

all in pink

21 |
22 | 23 |
24 |

Bluuue Sky

25 |

with it's mountains

26 |
27 | 28 |
29 |

Lonely castle

30 |

in the wilderness

31 |
32 | 33 |
34 |

Flying eagle

35 |

in the sunset

36 |
37 | 38 |
39 | 40 |
41 |
42 |
43 |
44 |
45 |
46 | 47 | 48 |
49 | 52 | 55 |
56 | 57 |
58 | 59 | 60 | 61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /double-vertical-slider/script.js: -------------------------------------------------------------------------------- 1 | const sliderContainer = document.querySelector('.slider-container'); 2 | const slideRight = document.querySelector('.right-slide'); 3 | const slideLeft = document.querySelector('.left-slide'); 4 | const upButton = document.querySelector('.up-button'); 5 | const downButton = document.querySelector('.down-button'); 6 | const slidesLength = slideRight.querySelectorAll('div').length; 7 | 8 | slideLeft.style.top = `-${(slidesLength - 1) * 100}vh`; 9 | 10 | upButton.addEventListener('click', () => { 11 | changeSlide('up'); 12 | }) 13 | 14 | 15 | downButton.addEventListener('click', () => { 16 | changeSlide('down'); 17 | }) 18 | 19 | let idx = 0; 20 | 21 | const changeSlide = (direction) => { 22 | const dispHeight = sliderContainer.clientHeight; 23 | if(direction === 'up'){ 24 | idx++; 25 | if(idx > slidesLength -1){ 26 | idx = 0; 27 | } 28 | }else if(direction === 'down'){ 29 | idx--; 30 | if(idx < 0){ 31 | idx = slidesLength -1; 32 | } 33 | } 34 | 35 | slideLeft.style.transform = `translateY(${idx * dispHeight}px)`; 36 | 37 | slideRight.style.transform = `translateY(-${idx * dispHeight}px)`; 38 | 39 | } 40 | -------------------------------------------------------------------------------- /double-vertical-slider/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Open+Sans'); 2 | 3 | *{ 4 | box-sizing: border-box; 5 | margin: 0; 6 | padding: 0; 7 | } 8 | 9 | body { 10 | font-family: 'Open Sans', sans-serif; 11 | height: 100vh; 12 | } 13 | 14 | .slider-container { 15 | position: relative; 16 | overflow: hidden; 17 | width: 100vw; 18 | height: 100vh; 19 | } 20 | 21 | .left-slide { 22 | height: 100%; 23 | width: 35%; 24 | position: absolute; 25 | top: 0; 26 | left: 0; 27 | transition: transform 0.5s ease-in-out; 28 | } 29 | 30 | .left-slide > div { 31 | height: 100%; 32 | width: 100%; 33 | display: flex; 34 | flex-direction: column; 35 | align-items: center; 36 | justify-content: center; 37 | color: #fff; 38 | } 39 | 40 | .left-slide h1 { 41 | font-size: 40px; 42 | margin-bottom: 10px; 43 | margin-top: -30px; 44 | } 45 | 46 | .right-slide { 47 | height: 100%; 48 | position: absolute; 49 | top: 0; 50 | left: 35%; 51 | width: 65%; 52 | transition: transform 0.5s ease-in-out; 53 | } 54 | 55 | .right-slide > div { 56 | background-repeat: no-repeat; 57 | background-size: cover; 58 | background-position: center center; 59 | height: 100%; 60 | width: 100%; 61 | } 62 | 63 | button { 64 | background-color: #fff; 65 | border: none; 66 | color: #aaa; 67 | cursor: pointer; 68 | font-size: 16px; 69 | padding: 15px; 70 | } 71 | 72 | button:hover { 73 | color: #222; 74 | } 75 | 76 | button:focus { 77 | outline: none; 78 | } 79 | 80 | .slider-container .action-buttons button { 81 | position: absolute; 82 | left: 35%; 83 | top: 50%; 84 | z-index: 100; 85 | } 86 | 87 | .slider-container .action-buttons .down-button { 88 | transform: translateX(-100%); 89 | border-top-left-radius: 5px; 90 | border-bottom-left-radius: 5px; 91 | } 92 | 93 | .slider-container .action-buttons .up-button { 94 | transform: translateY(-100%); 95 | border-top-right-radius: 5px; 96 | border-bottom-right-radius: 5px; 97 | } 98 | -------------------------------------------------------------------------------- /drag-n-drop/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Drag N Drop 11 | 12 | 13 | 14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /drag-n-drop/script.js: -------------------------------------------------------------------------------- 1 | let fill = document.querySelector('.fill'); 2 | let empties = document.querySelectorAll('.empty'); 3 | 4 | fill.addEventListener('dragstart', dragStart); 5 | fill.addEventListener('dragend', dragEnd); 6 | 7 | for (let empty of empties) { 8 | empty.addEventListener('dragover', dragOver); 9 | empty.addEventListener('dragenter', dragEnter); 10 | empty.addEventListener('dragleave', dragLeave); 11 | empty.addEventListener('drop', dragDrop); 12 | } 13 | 14 | function dragStart(){ 15 | this.className += ' hold'; 16 | setTimeout(() => { 17 | this.className = 'invisible'; 18 | }, 0); 19 | } 20 | function dragEnd(){ 21 | this.className = 'fill'; 22 | } 23 | function dragOver(e){ 24 | e.preventDefault(); 25 | } 26 | function dragEnter(e){ 27 | e.preventDefault(); 28 | this.className += ' hovered'; 29 | } 30 | function dragLeave(){ 31 | this.className = 'empty'; 32 | } 33 | function dragDrop(){ 34 | this.className = 'empty'; 35 | this.append(fill); 36 | } 37 | -------------------------------------------------------------------------------- /drag-n-drop/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: rgb(60, 60, 100); 3 | } 4 | #app{ 5 | display: flex; 6 | flex-direction: row; 7 | top: 50%; 8 | left: 50%; 9 | position: absolute; 10 | transform: translate(-50%, -50%); 11 | } 12 | .empty{ 13 | height: 15vh; 14 | width: 15vh; 15 | margin: 10px; 16 | border: 4px solid black; 17 | background-color: white; 18 | } 19 | .fill{ 20 | background: url('https://source.unsplash.com/random/145x145'); 21 | height: 15vh; 22 | width: 15vh; 23 | cursor: pointer; 24 | background-size: cover; 25 | } 26 | .hold{ 27 | border: 4px solid grey; 28 | } 29 | .hovered{ 30 | background-color: #333; 31 | border-color: 4px dashed white; 32 | } 33 | -------------------------------------------------------------------------------- /drawing-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Drawing App 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 20 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /drawing-app/script.js: -------------------------------------------------------------------------------- 1 | let canvas = document.getElementById('canvas'); 2 | let increaseBtn = document.getElementById('increase'); 3 | let decreaseBtn = document.getElementById('decrease'); 4 | let sizeEl = document.getElementById('size'); 5 | let colorEl = document.getElementById('color'); 6 | let clearEl = document.getElementById('clear'); 7 | 8 | const ctx = canvas.getContext('2d'); 9 | 10 | //variables 11 | let color = colorEl.value; 12 | let size = 20; 13 | let x; 14 | let y; 15 | let isPressed = false; 16 | 17 | //when mouse is pressed 18 | canvas.addEventListener('mousedown', (e) => { 19 | isPressed = true; 20 | x = e.offsetX; 21 | y = e.offsetY; 22 | }) 23 | 24 | //when you stop pressing the mouse 25 | canvas.addEventListener('mouseup', (e) => { 26 | isPressed = false; 27 | x = undefined; 28 | y = undefined; 29 | }) 30 | 31 | //when you press and grab the mouse 32 | canvas.addEventListener('mousemove', (e) => { 33 | if(isPressed){ 34 | let x2 = e.offsetX; 35 | let y2 = e.offsetY; 36 | drawCircle(x2, y2); 37 | drawLine(x, y, x2, y2); 38 | x = x2; 39 | y = y2; 40 | } 41 | }) 42 | 43 | //drawCircle and drawLine are enough to draw 44 | //1 45 | function drawCircle(x, y) { 46 | ctx.beginPath(); 47 | ctx.arc(x, y, size, 0, Math.PI * 2) 48 | ctx.fillStyle = color; 49 | ctx.fill() 50 | } 51 | //2 52 | function drawLine(x1, y1, x2, y2){ 53 | ctx.beginPath(); 54 | ctx.moveTo(x1, y1); 55 | ctx.lineTo(x2, y2); 56 | ctx.strokeStyle = color; 57 | ctx.lineWidth = size * 2; 58 | ctx.stroke(); 59 | } 60 | 61 | //change color 62 | colorEl.addEventListener('change', (e) => { 63 | color = e.target.value; 64 | }) 65 | //display size change on screen 66 | function changeOnScreen(){ 67 | sizeEl.innerText = size 68 | } 69 | 70 | //to increase the size of brush 71 | increaseBtn.addEventListener('click', () => { 72 | size += 5 73 | 74 | if(size > 50) { 75 | size = 50 76 | } 77 | 78 | changeOnScreen() 79 | }) 80 | 81 | //to decrease the size of brush 82 | decreaseBtn.addEventListener('click', () => { 83 | size -= 5 84 | 85 | if(size < 5) { 86 | size = 5 87 | } 88 | 89 | changeOnScreen() 90 | }) 91 | 92 | //clear the canvas bro 93 | clearEl.addEventListener('click', () => ctx.clearRect(0,0, canvas.width, canvas.height)) 94 | -------------------------------------------------------------------------------- /drawing-app/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: #dce3f7; 9 | font-family: 'Roboto', sans-serif; 10 | display: flex; 11 | flex-direction: column; 12 | align-items: center; 13 | justify-content: center; 14 | height: 100vh; 15 | margin: 0; 16 | } 17 | 18 | canvas { 19 | border: 2px solid rgb(20, 51, 77); 20 | background-color: white; 21 | } 22 | 23 | .toolbox { 24 | background-color: rgb(20, 51, 77); 25 | border: 1px solid rgb(5, 4, 14); 26 | display: flex; 27 | width: 804px; 28 | padding: 1rem; 29 | } 30 | 31 | .toolbox > * { 32 | background-color: #fff; 33 | border: none; 34 | display: inline-flex; 35 | align-items: center; 36 | justify-content: center; 37 | font-size: 2rem; 38 | height: 50px; 39 | width: 50px; 40 | margin: 0.25rem; 41 | padding: 0.25rem; 42 | cursor: pointer; 43 | border-radius: 10px; 44 | } 45 | 46 | .toolbox > *:last-child { 47 | margin-left: auto; 48 | border-radius: 10px; 49 | } 50 | -------------------------------------------------------------------------------- /drink-water/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Water App 11 | 12 | 13 | 14 |

Drink Water

15 |

Goal: 2 Liters

16 | 17 |
18 |
19 | 20 | Remained 21 |
22 | 23 |
24 |
25 | 26 |

Select how many glasses of water that you have drank

27 | 28 |
29 |
250 ml
30 |
250 ml
31 |
250 ml
32 |
250 ml
33 |
250 ml
34 |
250 ml
35 |
250 ml
36 |
250 ml
37 |
38 | 39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /drink-water/script.js: -------------------------------------------------------------------------------- 1 | const smallCups = document.querySelectorAll('.cup-small'); 2 | const listers = document.getElementById('liters'); 3 | const percentage = document.getElementById('percentage'); 4 | const remained = document.getElementById('remained'); 5 | 6 | fillBig(); 7 | 8 | //adding event listener of filling function for every small cup 9 | //used to get the index of clicked cup 10 | 11 | smallCups.forEach((cup, idx) => { 12 | cup.addEventListener('click', () => fillCups(idx)); 13 | }) 14 | 15 | //function to fill the small cups 16 | //if the cup clicked is full and the next cup is empty then the clicked cup will be empty, for ex, if 4 is clicked and 5 is empty then 4 will be empty 17 | 18 | //to access all the indexes before the index we are getting from smallCups function 19 | //idx --> clicked idx2 --> all indexes before the idx 20 | function fillCups(idx){ 21 | 22 | if(smallCups[idx].classList.contains('full') && !smallCups[idx].nextElementSibling.classList.contains('full')){ 23 | idx--; 24 | } 25 | 26 | smallCups.forEach((cup, idx2) => { 27 | if(idx2 <= idx){ 28 | cup.classList.add('full'); 29 | }else{ 30 | cup.classList.remove('full'); 31 | } 32 | }) 33 | fillBig(); 34 | 35 | 36 | } 37 | 38 | function fillBig(){ 39 | let totalFullCups = document.querySelectorAll('.cup-small.full').length; 40 | let totalCups = smallCups.length; 41 | 42 | if(totalFullCups === 0){ 43 | percentage.style.visibility = 'hidden'; 44 | percentage.style.height = 0; 45 | }else{ 46 | percentage.style.visibility = 'visible'; 47 | percentage.style.height = `${totalFullCups/ totalCups * 330}px`; 48 | percentage.innerText = `${totalFullCups/ totalCups * 100}%`; 49 | } 50 | 51 | if(totalFullCups === totalCups){ 52 | remained.style.visibility = 'hidden'; 53 | remained.style.height = 0; 54 | }else{ 55 | remained.style.visibility = 'visible'; 56 | listers.innerText = `${2 -(250 * totalFullCups/1000)}L` 57 | } 58 | 59 | } 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /drink-water/style.css: -------------------------------------------------------------------------------- 1 | 2 | @import url('https://fonts.googleapis.com/css?family=Montserrat:400,600&display=swap'); 3 | 4 | :root { 5 | --border-color: #144fc6; 6 | --fill-color: #6ab3f8; 7 | } 8 | 9 | * { 10 | box-sizing: border-box; 11 | } 12 | 13 | body { 14 | background-color: #3494e4; 15 | color: #fff; 16 | font-family: 'Montserrat', sans-serif; 17 | display: flex; 18 | flex-direction: column; 19 | align-items: center; 20 | margin-bottom: 40px; 21 | } 22 | 23 | h1 { 24 | margin: 10px 0 0; 25 | } 26 | 27 | h3 { 28 | font-weight: 400; 29 | margin: 10px 0; 30 | } 31 | 32 | .cup { 33 | background-color: #fff; 34 | border: 4px solid var(--border-color); 35 | color: var(--border-color); 36 | border-radius: 0 0 40px 40px; 37 | height: 330px; 38 | width: 150px; 39 | margin: 30px 0; 40 | display: flex; 41 | flex-direction: column; 42 | overflow: hidden; 43 | } 44 | 45 | .cup.cup-small { 46 | height: 95px; 47 | width: 50px; 48 | border-radius: 0 0 15px 15px; 49 | background-color: rgba(255, 255, 255, 0.9); 50 | cursor: pointer; 51 | font-size: 14px; 52 | align-items: center; 53 | justify-content: center; 54 | text-align: center; 55 | margin: 5px; 56 | transition: 0.3s ease; 57 | } 58 | 59 | .cup.cup-small.full { 60 | background-color: var(--fill-color); 61 | color: #fff; 62 | } 63 | 64 | .cups { 65 | display: flex; 66 | flex-wrap: wrap; 67 | align-items: center; 68 | justify-content: center; 69 | width: 280px; 70 | } 71 | 72 | .remained { 73 | display: flex; 74 | flex-direction: column; 75 | align-items: center; 76 | justify-content: center; 77 | text-align: center; 78 | flex: 1; 79 | transition: 0.3s ease; 80 | } 81 | 82 | .remained span { 83 | font-size: 20px; 84 | font-weight: bold; 85 | } 86 | 87 | .remained small { 88 | font-size: 12px; 89 | } 90 | 91 | .percentage { 92 | background-color: var(--fill-color); 93 | display: flex; 94 | align-items: center; 95 | justify-content: center; 96 | font-weight: bold; 97 | font-size: 30px; 98 | height: 0; 99 | transition: 0.3s ease; 100 | } 101 | 102 | .text { 103 | text-align: center; 104 | margin: 0 0 5px; 105 | } 106 | -------------------------------------------------------------------------------- /event-keycodes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Document 12 | 13 | 14 | 17 |
18 |

Press any key to get the Continue

19 | 20 |
21 |
22 |
23 |
24 |
25 | 26 |
27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /event-keycodes/script.js: -------------------------------------------------------------------------------- 1 | let key = document.getElementById('key'); 2 | let keycode = document.getElementById('keycode'); 3 | let eventcode = document.getElementById('eventcode'); 4 | let hello = document.getElementById('hello'); 5 | 6 | 7 | window.addEventListener('keydown', function(e){ 8 | key.innerHTML = `

Key

${e.key}`; 9 | keycode.innerHTML = `

Key Code

${e.keyCode}`; 10 | eventcode.innerHTML = `

Event Code

${e.code}`;; 11 | hello.style.display = "none"; 12 | key.style.display = "block"; 13 | keycode.style.display = "block"; 14 | eventcode.style.display = "block"; 15 | 16 | }); 17 | -------------------------------------------------------------------------------- /event-keycodes/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: rgb(235, 228, 228); 3 | } 4 | #app{ 5 | position: absolute; 6 | top: 50%; 7 | left: 50%; 8 | transform: translate(-50%, -50%); 9 | } 10 | .header{ 11 | text-align: center; 12 | } 13 | #output{ 14 | display: flex; 15 | flex-direction: row; 16 | } 17 | #key, #keycode, #eventcode{ 18 | background-color: whitesmoke; 19 | box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 8px 16px rgba(0, 0, 0, .1); 20 | margin: 2vh; 21 | padding: 2vh; 22 | display: none; 23 | width: 25vh; 24 | text-align: center; 25 | font-size: 6vh; 26 | font-family: Verdana, Geneva, Tahoma, sans-serif; 27 | } 28 | 29 | p{ 30 | font-size: 6vh; 31 | } 32 | -------------------------------------------------------------------------------- /expanding-cards/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Expanding Cards 13 | 14 | 15 |
16 |

Expanding Cards

17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /expanding-cards/style.css: -------------------------------------------------------------------------------- 1 | .header{ 2 | text-align: center; 3 | margin-top: 5vh; 4 | } 5 | body{ 6 | background-color: rgb(224, 250, 224); 7 | } 8 | #cards{ 9 | box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 8px 16px rgba(0, 0, 0, .1); 10 | background-color: white; 11 | position: absolute; 12 | top: 50%; 13 | left: 50%; 14 | transform: translate(-50%,-50%); 15 | height: 60vh; 16 | width: 90vh; 17 | display: flex; 18 | flex-direction: row; 19 | } 20 | #card1{ 21 | background-color: burlywood; 22 | height: 55vh; 23 | width: 16vh; 24 | margin: 2vh; 25 | transition: width 2s; 26 | } 27 | #card2{ 28 | background-color: cadetblue; 29 | height: 55vh; 30 | width: 16vh; 31 | margin: 2vh; 32 | transition: width 2s; 33 | } 34 | #card3{ 35 | background-color: chocolate; 36 | height: 55vh; 37 | width: 16vh; 38 | margin: 2vh; 39 | transition: width 2s; 40 | } 41 | #card4{ 42 | background-color: darkkhaki; 43 | height: 55vh; 44 | width: 16vh; 45 | margin: 2vh; 46 | transition: width 2s; 47 | } 48 | #card5{ 49 | background-color: goldenrod; 50 | height: 55vh; 51 | width: 16vh; 52 | margin: 2vh; 53 | transition: width 2s; 54 | } 55 | #card1:hover{ 56 | width: 125vh; 57 | } 58 | #card2:hover{ 59 | width: 125vh; 60 | } 61 | #card3:hover{ 62 | width: 125vh; 63 | } 64 | #card4:hover{ 65 | width: 125vh; 66 | } 67 | #card5:hover{ 68 | width: 125vh; 69 | } 70 | 71 | 72 | -------------------------------------------------------------------------------- /faq-collapse/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | FAQ 14 | 15 | 16 | 17 |
18 | 19 |
20 |
21 | 22 | 23 |
24 |
Depends on who are you asking
25 |
26 | 27 | 28 |
29 |
30 |
31 | What's the object-oriented way to become wealthy? 32 |
33 |
34 |
35 |
Inheritance
36 |
37 | 38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /faq-collapse/script.js: -------------------------------------------------------------------------------- 1 | let aw = document.getElementById('logo'); 2 | let info = document.getElementById('two'); 3 | let aw1 = document.getElementById('logo1'); 4 | let info1 = document.getElementById('two1'); 5 | let count = 0; 6 | 7 | function change(){ 8 | 9 | count++; 10 | if(count % 2 == 1){ 11 | aw.innerHTML = ''; 12 | info.style.display = 'block'; 13 | info.style.height = '5vh'; 14 | } 15 | else{ 16 | aw.innerHTML = '' 17 | info.style.display = 'none'; 18 | info.style.height = '5vh'; 19 | } 20 | 21 | } 22 | 23 | 24 | 25 | function change1(){ 26 | 27 | count++; 28 | if(count % 2 == 1){ 29 | aw1.innerHTML = ''; 30 | info1.style.display = 'block'; 31 | info1.style.height = '5vh'; 32 | } 33 | else{ 34 | aw1.innerHTML = '' 35 | info1.style.display = 'none'; 36 | info1.style.height = '5vh'; 37 | } 38 | 39 | } 40 | -------------------------------------------------------------------------------- /faq-collapse/style.css: -------------------------------------------------------------------------------- 1 | #app{ 2 | margin: auto; 3 | } 4 | #item, #item1{ 5 | display: flex; 6 | flex-direction: column; 7 | padding: 5vh; 8 | width: 70vh; 9 | border: 1px solid lightgray; 10 | box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 8px 16px rgba(0, 0, 0, .1); 11 | } 12 | #one, #one1{ 13 | display: flex; 14 | flex-direction: row; 15 | font-size: 4vh; 16 | } 17 | #two, #two1{ 18 | margin-top: 2vh; 19 | height: 5vh; 20 | display: none; 21 | } 22 | #logo, #logo1{ 23 | margin-left: auto; 24 | } 25 | -------------------------------------------------------------------------------- /faq-collapse/v2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Document 11 | 12 | 13 | 14 |
15 |

FAQs

16 |
17 | 18 |
19 | 20 | 24 | 25 |
26 | They make up everything 27 |
28 | 29 | 33 |
34 | Nobody knows. 35 |
36 | 37 | 41 |
42 | Inheritance. 43 |
44 | 45 | 49 |
50 | Depends on who are you asking. 51 |
52 |
53 | 54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /faq-collapse/v2/script.js: -------------------------------------------------------------------------------- 1 | let a = document.getElementsByClassName('collapse'); 2 | 3 | let c = document.getElementById('logo').addEventListener('click', change); 4 | 5 | for(let i = 0; i < a.length; i++){ 6 | a[i].addEventListener('click', function(){ 7 | let b = this.nextElementSibling; 8 | if(b.style.display === "none"){ 9 | b.style.display = "block"; 10 | b.style.padding = '5vh'; 11 | b.style.width = '55vh'; 12 | b.style.height = '5vh'; 13 | }else{ 14 | b.style.display = "none"; 15 | } 16 | }); 17 | } 18 | 19 | function change(){ 20 | c.classList.remove("fas fa-chevron-down"); 21 | } 22 | -------------------------------------------------------------------------------- /faq-collapse/v2/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family: Arial, Helvetica, sans-serif; 3 | } 4 | #app{ 5 | display: flex; 6 | flex-direction: column; 7 | align-items: center; 8 | } 9 | .header{ 10 | text-align: center; 11 | } 12 | .collapse{ 13 | background-color: #eee; 14 | padding: 4vh; 15 | width: 65vh; 16 | box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 8px 16px rgba(0, 0, 0, .1); 17 | border-radius: 5px; 18 | cursor: pointer; 19 | margin: 0.5vh; 20 | } 21 | button{ 22 | text-align: left; 23 | } 24 | .content{ 25 | padding: 2.5vh; 26 | background-color:whitesmoke; 27 | display: none; 28 | font-size: 2.2vh; 29 | border: 2px solid grey; 30 | border-radius: 5px; 31 | } 32 | i{ 33 | float: right; 34 | } 35 | -------------------------------------------------------------------------------- /feedback-ui-design/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | The Feedback UI Design 11 | 12 | 13 | 14 |
15 | How satisfied are you with our
customer support performance? 16 |
17 |
18 | 19 | Unhappy 20 |
21 | 22 |
23 | 24 | Neutral 25 |
26 | 27 |
28 | 29 | Satisfied 30 |
31 |
32 | 33 |
34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /feedback-ui-design/script.js: -------------------------------------------------------------------------------- 1 | let panel = document.querySelector('#panel'); 2 | let rating = document.querySelectorAll('.rating'); 3 | let sendBtn = document.querySelector('#send'); 4 | let ratingContainer = document.querySelector('.ratings-container'); 5 | 6 | let selectedRating = 'Satisfied'; 7 | 8 | //remove all the active classes 9 | function removeActive(){ 10 | for (let index = 0; index < rating.length; index++) { 11 | rating[index].classList.remove('active'); 12 | } 13 | } 14 | 15 | ratingContainer.addEventListener('click', (e) => { 16 | if(e.target.parentNode.classList.contains('rating')){ 17 | //first remove the active class and then add to the clicked one 18 | removeActive(); 19 | //small is the sibling of the image tag where we are clicking for the event 20 | selectedRating = e.target.nextElementSibling.innerHTML; 21 | e.target.parentNode.classList.add('active'); 22 | } 23 | }) 24 | 25 | sendBtn.addEventListener('click', (e) => { 26 | panel.innerHTML = ` 27 | 28 | Thank You! 29 |
30 | Feedback: ${selectedRating} 31 |

We'll use your feedback to improve our customer support

32 | ` 33 | }) 34 | -------------------------------------------------------------------------------- /feedback-ui-design/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: rgb(14, 14, 31); 9 | font-family: 'Montserrat', sans-serif; 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | height: 100vh; 14 | overflow: hidden; 15 | margin: 0; 16 | } 17 | 18 | .panel-container { 19 | background-color: #fff; 20 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); 21 | border-radius: 4px; 22 | font-size: 90%; 23 | display: flex; 24 | flex-direction: column; 25 | justify-content: center; 26 | align-items: center; 27 | text-align: center; 28 | padding: 30px; 29 | max-width: 400px; 30 | } 31 | 32 | .panel-container strong { 33 | line-height: 20px; 34 | } 35 | 36 | .ratings-container { 37 | display: flex; 38 | margin: 20px 0; 39 | } 40 | 41 | .rating { 42 | flex: 1; 43 | cursor: pointer; 44 | padding: 20px; 45 | margin: 10px 5px; 46 | } 47 | 48 | .rating:hover, 49 | .rating.active { 50 | border-radius: 4px; 51 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 52 | } 53 | 54 | .rating img { 55 | width: 40px; 56 | } 57 | 58 | .rating small { 59 | color: #555; 60 | display: inline-block; 61 | margin: 10px 0 0; 62 | } 63 | 64 | .rating:hover small, 65 | .rating.active small { 66 | color: #111; 67 | } 68 | 69 | .btn { 70 | background-color: #302d2b; 71 | color: #fff; 72 | border: 0; 73 | border-radius: 4px; 74 | padding: 12px 30px; 75 | cursor: pointer; 76 | } 77 | 78 | .btn:focus { 79 | outline: 0; 80 | } 81 | 82 | .btn:active { 83 | transform: scale(0.98); 84 | } 85 | 86 | .fa-heart { 87 | color: red; 88 | font-size: 30px; 89 | margin-bottom: 10px; 90 | } 91 | -------------------------------------------------------------------------------- /fixed-navbar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Fixed Navbar 14 | 15 | 16 | 17 | 18 | 31 | 32 |
33 | 34 | 35 |
36 |

Paragraph 01

37 |

38 | Nature is the best remedy for all problems over the word. Nature is an inspirational figure for various writers, novelists. We often heard that spending time in nature can freshen up our mind and body. Nature is the reason for living entities are surviving on earth. Nature is beneficial in all ways. 39 |

40 | The green forests, mountains, glaciers, are the striking scenic beauties of nature. On vacations, people move to a hilly, beach or desert place. Because being with nature freshen up minds from the chaos of the world. 41 |

42 | Nature has also emotions. But humans don’t understand it. With the burden of a growing population, nature is degrading its quality. Population means more and more numbers of concrete buildings and it results in cutting down forests 43 |

44 | 45 |

Paragraph 02

46 |

47 | Nature is boon to humankind. Nature consists of various natural resources i.e. Sunrays, air, water, soil, etc. which are necessary for humankind. There are various biotic and abiotic factors that together called nature. Biotic factors consist of forests and animals and abiotic factors are physical elements. 48 |

49 | All those elements which are naturally found on earth and which are untouched by human activities are classified as natural resources. Fossils, Metals, Natural crude oil, etc. which are helpful for the world are also part of natural resources. 50 |

51 | Nature is essential for the survival of humankind. Bio-diversity is an integral part of the natural system. Nature feeds several terrestrial and aquatic creatures. Preservation of natural resources is crucial for all humans. 52 |

53 | Forest, sunrays, mountains all are important. Every element is carrying a special geological fact. What if there were no stones and pebbles? Then the fire was not invented. Yes, it is true natural elements are the root cause for developing a civilization 54 |

55 |
56 | 57 |
58 | 59 | 60 | 61 | 62 | 72 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /fixed-navbar/script.js: -------------------------------------------------------------------------------- 1 | let navbar = document.getElementById('navbar'); 2 | window.onscroll = function(){ 3 | if(window.scrollY > 350){ 4 | navbar.style.backgroundColor = "white"; 5 | }else{ 6 | navbar.style.backgroundColor = "transparent"; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /fixed-navbar/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | } 4 | #navbar{ 5 | display: flex; 6 | flex-direction: row; 7 | background-color: transparent; 8 | position: fixed; 9 | width: 100%; 10 | font-weight: 600; 11 | font-size: 2.9vh; 12 | } 13 | #one{ 14 | padding: 1.5vh; 15 | } 16 | li{ 17 | padding: 1.5vh; 18 | list-style: none; 19 | margin-left: 1.5vh; 20 | margin-right: 1.5vh; 21 | } 22 | #two{ 23 | margin-left: auto; 24 | } 25 | #two ul{ 26 | display: flex; 27 | flex-direction: row; 28 | } 29 | #para{ 30 | padding: 10vh; 31 | } 32 | img 33 | { 34 | background-size: cover; 35 | background-repeat: no-repeat; 36 | background-position: center center; 37 | width:100%; 38 | height:100vh; 39 | } 40 | -------------------------------------------------------------------------------- /form-input-wave/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Form Input Wave 12 | 13 | 14 | 15 |
16 | 17 |
18 | 19 | 20 |
21 | 22 |
23 | 24 | 25 |
26 | 27 | 28 |

Don't have an account? Register

29 |
30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /form-input-wave/script.js: -------------------------------------------------------------------------------- 1 | let labels = document.querySelectorAll('.form-control label'); 2 | 3 | labels.forEach(label => { 4 | label.innerHTML = label.innerText 5 | .split('') 6 | .map((letter, idx) => `${letter}`) 7 | .join('') 8 | }) 9 | -------------------------------------------------------------------------------- /form-input-wave/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: lightslategray; 9 | color: #fff; 10 | font-family: 'Muli', sans-serif; 11 | display: flex; 12 | flex-direction: column; 13 | align-items: center; 14 | justify-content: center; 15 | height: 100vh; 16 | overflow: hidden; 17 | margin: 0; 18 | } 19 | 20 | .app{ 21 | background-color: rgba(0, 0, 0, 0.4); 22 | padding: 20px 40px; 23 | border-radius: 5px; 24 | } 25 | 26 | .container h1 { 27 | text-align: center; 28 | margin-bottom: 30px; 29 | } 30 | 31 | .container a { 32 | text-decoration: none; 33 | color: rgb(38, 201, 255); 34 | } 35 | a{ 36 | color:lightblue; 37 | text-decoration: none; 38 | } 39 | .btn{ 40 | background-color: lightblue; 41 | border: 2px solid white; 42 | width: 100%; 43 | border-radius: 5px;; 44 | padding: 2vh; 45 | font-size: 2.3vh; 46 | } 47 | .btn:focus { 48 | outline: 0; 49 | } 50 | 51 | .btn:active { 52 | transform: scale(1.05); 53 | } 54 | 55 | .text { 56 | margin-top: 30px; 57 | } 58 | 59 | .form-control { 60 | position: relative; 61 | margin: 20px 0 40px; 62 | width: 300px; 63 | } 64 | 65 | .form-control input { 66 | background-color: transparent; 67 | border: 0; 68 | border-bottom: 2px #fff solid; 69 | display: block; 70 | width: 100%; 71 | padding: 15px 0; 72 | font-size: 18px; 73 | color: #fff; 74 | } 75 | 76 | .form-control input:focus, 77 | .form-control input:valid { 78 | outline: 0; 79 | border-bottom-color: lightblue; 80 | } 81 | 82 | .form-control label { 83 | position: absolute; 84 | top: 15px; 85 | left: 0; 86 | pointer-events: none; 87 | } 88 | 89 | .form-control label span { 90 | display: inline-block; 91 | font-size: 18px; 92 | min-width: 5px; 93 | transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); 94 | } 95 | 96 | .form-control input:focus + label span, 97 | .form-control input:valid + label span { 98 | color: lightblue; 99 | transform: translateY(-30px); 100 | } 101 | -------------------------------------------------------------------------------- /github-profile/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | GitHub Finder 12 | 13 | 14 | 15 |
16 |

GitHub Finder

17 |
18 | 19 |
20 | 21 |
22 | 23 |
24 | 25 |
26 | 27 |
28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /github-profile/script.js: -------------------------------------------------------------------------------- 1 | let username = document.getElementById('userName'); 2 | 3 | username.addEventListener('keyup', search); 4 | 5 | function search(username){ 6 | let enteredUser = username.target.value; 7 | console.log(enteredUser); 8 | gUser(enteredUser); 9 | } 10 | 11 | async function gUser(username){ 12 | let a = await fetch(`https://api.github.com/users/${username}`); 13 | let b = await a.json(); 14 | console.log(b); 15 | let ou = ""; 16 | ou = ` 17 | Name: ${b.name}
18 | Repositories: ${b.public_repos}
19 | Followers: ${b.followers}
20 | Following: ${b.following} 21 | `; 22 | 23 | document.getElementById('output').innerHTML = ou; 24 | 25 | 26 | } 27 | -------------------------------------------------------------------------------- /github-profile/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: whitesmoke; 3 | } 4 | .header{ 5 | text-align: center; 6 | background-color: white; 7 | padding: 2vh; 8 | border-bottom: 2px solid lightgrey; 9 | } 10 | #app{ 11 | position: absolute; 12 | top: 50%; 13 | left: 50%; 14 | transform: translate(-50%,-50%); 15 | box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 8px 16px rgba(0, 0, 0, .1); 16 | padding: 15vh; 17 | } 18 | #output{ 19 | height: 10vh; 20 | padding-top: 2vh; 21 | } 22 | -------------------------------------------------------------------------------- /good-cheap-fast/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Good Cheap Fast Design 11 | 12 | 13 | 14 |
15 | 16 | 19 | Good 20 |
21 | 22 |
23 | 24 | 27 | Cheap 28 |
29 | 30 |
31 | 32 | 35 | Fast 36 |
37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /good-cheap-fast/script.js: -------------------------------------------------------------------------------- 1 | const toggles = document.querySelectorAll('.toggle') 2 | const good = document.querySelector('#good') 3 | const cheap = document.querySelector('#cheap') 4 | const fast = document.querySelector('#fast') 5 | 6 | toggles.forEach(toggle => toggle.addEventListener('change', (e) => func(e.target))); 7 | 8 | function func(a){ 9 | if(good.checked && cheap.checked && fast.checked){ 10 | if(a == good){ 11 | fast.checked = false; 12 | } 13 | if(a == cheap){ 14 | good.checked = false; 15 | } 16 | if(a == fast){ 17 | cheap.checked = false; 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /good-cheap-fast/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | justify-content: center; 6 | height: 100vh; 7 | overflow: hidden; 8 | margin: 0; 9 | font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 10 | } 11 | .toggle-container{ 12 | display: flex; 13 | align-items: center; 14 | margin: 10px 0; 15 | width: 200px; 16 | } 17 | .toggle{ 18 | visibility: hidden; 19 | } 20 | .label{ 21 | position: relative; 22 | background-color: #d0d0d0; 23 | border-radius: 50px; 24 | cursor: pointer; 25 | display: inline-block; 26 | margin: 0 15px 0; 27 | width: 80px; 28 | height: 40px; 29 | } 30 | .toggle:checked + .label{ 31 | background-color: blueviolet; 32 | } 33 | .toggle:checked + .label .ball{ 34 | animation: slideOn 0.2s linear forwards; 35 | } 36 | .ball { 37 | background: #fff; 38 | height: 34px; 39 | width: 34px; 40 | border-radius: 50%; 41 | position: absolute; 42 | top: 3px; 43 | left: 3px; 44 | align-items: center; 45 | justify-content: center; 46 | animation: slideOff 0.2s linear forwards; 47 | } 48 | @keyframes slideOff{ 49 | 0%{ 50 | transform: translateX(40px) scale(1); 51 | } 52 | 50%{ 53 | transform: translateX(20px) scale(1.2); 54 | } 55 | 100%{ 56 | transform: translateX(0px) scale(1); 57 | } 58 | } 59 | @keyframes slideOn{ 60 | 0%{ 61 | transform: translateX(0px) scale(1); 62 | } 63 | 50%{ 64 | transform: translateX(20px) scale(1.2); 65 | } 66 | 100%{ 67 | transform: translateX(40px) scale(1); 68 | } 69 | } 70 | 71 | 72 | -------------------------------------------------------------------------------- /good-cheap-fast/v1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Good Cheap Fast Design 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 21 | 22 | Checking 23 | 24 |
25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /good-cheap-fast/v1/script.js: -------------------------------------------------------------------------------- 1 | let a = document.getElementById('name'); 2 | a.addEventListener('click', () => { 3 | if(a.checked){ 4 | console.log('checked'); 5 | }else if(!a.checked){ 6 | console.log('unchecked'); 7 | } 8 | }) 9 | -------------------------------------------------------------------------------- /good-cheap-fast/v1/style.css: -------------------------------------------------------------------------------- 1 | .toggle{ 2 | background-color: rgb(176, 118, 231); 3 | width: 125px; 4 | height: 45px; 5 | display: flex; 6 | flex-direction: row; 7 | } 8 | input{ 9 | visibility: hidden; 10 | } 11 | -------------------------------------------------------------------------------- /hidden-search/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Document 12 | 13 | 14 | 15 | 16 |
17 | 18 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /hidden-search/script.js: -------------------------------------------------------------------------------- 1 | let search = document.querySelector('.search'); 2 | let btn = document.querySelector('.btn'); 3 | let input = document.querySelector('.input'); 4 | 5 | btn.addEventListener('click', function(){ 6 | search.classList.toggle('active'); 7 | }); 8 | -------------------------------------------------------------------------------- /hidden-search/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #2c3e50; /* fallback for old browsers */ 3 | background: -webkit-linear-gradient(to left, #3498db, #2c3e50); /* Chrome 10-25, Safari 5.1-6 */ 4 | background: linear-gradient(to left, #3498db, #2c3e50); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 5 | font-family: 'Roboto', sans-serif; 6 | display: flex; 7 | align-items: center; 8 | justify-content: center; 9 | height: 100vh; 10 | overflow: hidden; 11 | margin: 0; 12 | } 13 | .search{ 14 | position: relative; 15 | } 16 | .search .input{ 17 | background-color: white; 18 | border: 0; 19 | padding: 2vh; 20 | width: 1px; 21 | transition: width 0.5s ease; 22 | } 23 | .btn{ 24 | background-color: #fff; 25 | cursor: pointer; 26 | width: 6.2vh; 27 | height: 6.2vh; 28 | transition: transform 0.5 ease; 29 | margin-left: -5vh; 30 | border: none; 31 | } 32 | .btn:focus, .input:focus{ 33 | outline: none; 34 | } 35 | .search.active .input{ 36 | width: 200px; 37 | } 38 | .search.input .btn{ 39 | transform: translateX(210px); 40 | } 41 | -------------------------------------------------------------------------------- /hoverboard/script.js: -------------------------------------------------------------------------------- 1 | let squares = document.querySelectorAll('#square'); 2 | let colors = ['#e74c3c', '#8e44ad', '#3498db', '#e67e22', '#2ecc71']; 3 | 4 | squares.forEach((square) => { 5 | square.addEventListener('mouseover', () => { 6 | square.style.backgroundColor = `${getColor()}`; 7 | }) 8 | square.addEventListener('mouseout', () => { 9 | square.style.backgroundColor = "#1d1d1d"; 10 | }) 11 | }); 12 | 13 | function getColor(){ 14 | return colors[Math.floor(Math.random() * colors.length)]; 15 | } 16 | 17 | -------------------------------------------------------------------------------- /hoverboard/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | overflow: hidden; 4 | } 5 | body{ 6 | background-color: #111; 7 | overflow: hidden; 8 | align-items: center; 9 | justify-content: center; 10 | } 11 | #app{ 12 | overflow: hidden; 13 | top: 50%; 14 | left: 50%; 15 | position: absolute; 16 | transform: translate(-50%, -50%); 17 | align-items: center; 18 | justify-content: center; 19 | display: flex; 20 | flex-wrap: wrap; 21 | max-width: 400px; 22 | text-align: center; 23 | } 24 | .square{ 25 | background-color: #1d1d1d; 26 | box-shadow: 0 0 2px #000; 27 | height: 15px; 28 | width: 15px; 29 | margin: 2px; 30 | display: flex; 31 | flex-wrap: wrap; 32 | transition: 2s ease; 33 | } 34 | 35 | .square:hover { 36 | transition-duration: 0s; 37 | } 38 | -------------------------------------------------------------------------------- /image-carousel/v1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Image Carousel 11 | 12 | 13 | 14 |
15 | 16 |
17 | 18 |
19 | 22 | 23 | 26 |
27 | 28 |
29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /image-carousel/v1/script.js: -------------------------------------------------------------------------------- 1 | let pics = ['https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80', 'https://images.unsplash.com/photo-1511593358241-7eea1f3c84e5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1934&q=80', 'https://images.unsplash.com/photo-1495467033336-2effd8753d51?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80', 'https://images.unsplash.com/photo-1522735338363-cc7313be0ae0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2689&q=80', 'https://images.unsplash.com/photo-1559087867-ce4c91325525?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80']; 2 | 3 | let left = document.getElementById('left'); 4 | let right = document.getElementById('right'); 5 | 6 | let photos = document.getElementById('photos'); 7 | 8 | let colors = ["green", "blue", "red", "yellow"]; 9 | 10 | let idx = 0; 11 | 12 | left.addEventListener('click', () => { 13 | idx--; 14 | if(idx < 0){ 15 | idx = colors.length; 16 | } 17 | photos.style.background = `url(${pics[idx]})`; 18 | }) 19 | 20 | right.addEventListener('click', () => { 21 | idx++; 22 | if(idx > colors.length){ 23 | idx = 0; 24 | } 25 | photos.style.background = `url(${pics[idx]})`; 26 | }) 27 | 28 | -------------------------------------------------------------------------------- /image-carousel/v1/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: thistle; 3 | } 4 | #app{ 5 | top: 50%; 6 | left: 50%; 7 | position: absolute; 8 | transform: translate(-50%, -50%); 9 | height: 75vh; 10 | width: 55vh; 11 | } 12 | 13 | #photos{ 14 | box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); 15 | height: 75vh; 16 | width: 55vh; 17 | transform: translateX(0); 18 | transition: 2s ease-in-out; 19 | overflow: hidden; 20 | } 21 | img{ 22 | background-position: center center; 23 | position: absolute; 24 | transition: 2s ease-in-out; 25 | height: 75vh; 26 | width: 55vh; 27 | object-fit: cover; 28 | } 29 | .arrow{ 30 | width: 50%; 31 | background-color: white; 32 | padding: 2vh; 33 | border: 0.5px solid grey; 34 | cursor: pointer; 35 | } 36 | .arrow:focus{ 37 | outline: none; 38 | } 39 | #ctrl{ 40 | display: flex; 41 | flex-direction: row; 42 | } 43 | -------------------------------------------------------------------------------- /image-carousel/v2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Background Slider 11 | 12 | 13 | 14 |
15 |
16 | first-image 19 | second-image 23 | third-image 27 | fourth-image 31 |
32 | 33 |
34 | 35 | 36 |
37 |
38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /image-carousel/v2/script.js: -------------------------------------------------------------------------------- 1 | const imgs = document.getElementById('imgs') 2 | const leftBtn = document.getElementById('left') 3 | const rightBtn = document.getElementById('right') 4 | 5 | const img = document.querySelectorAll('#imgs img') 6 | 7 | let idx = 0 8 | 9 | let interval = setInterval(run, 2000) 10 | 11 | function run() { 12 | idx++ 13 | changeImage() 14 | } 15 | 16 | function changeImage() { 17 | if(idx > img.length - 1) { 18 | idx = 0 19 | } else if(idx < 0) { 20 | idx = img.length - 1 21 | } 22 | 23 | imgs.style.transform = `translateX(${-idx * 500}px)` 24 | } 25 | 26 | function resetInterval() { 27 | clearInterval(interval) 28 | interval = setInterval(run, 2000) 29 | } 30 | 31 | rightBtn.addEventListener('click', () => { 32 | idx++ 33 | changeImage() 34 | resetInterval() 35 | }) 36 | 37 | leftBtn.addEventListener('click', () => { 38 | idx-- 39 | changeImage() 40 | resetInterval() 41 | }) 42 | -------------------------------------------------------------------------------- /image-carousel/v2/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | } 4 | body{ 5 | display: flex; 6 | align-items: center; 7 | justify-content: center; 8 | height: 100vh; 9 | margin: 0; 10 | } 11 | .carousel{ 12 | box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 8px 16px rgba(0, 0, 0, .1); 13 | height: 530px; 14 | width: 500px; 15 | overflow: hidden; 16 | } 17 | .image-container{ 18 | display: flex; 19 | transform: translateX(0); 20 | transition: transform 0.5s ease-in-out; 21 | } 22 | img{ 23 | width: 500px; 24 | height: 500px; 25 | object-fit: cover; 26 | } 27 | .buttons-container { 28 | display: flex; 29 | justify-content: space-between; 30 | } 31 | 32 | .btn { 33 | background-color: rebeccapurple; 34 | color: #fff; 35 | border: none; 36 | padding: 0.5rem; 37 | cursor: pointer; 38 | width: 49.5%; 39 | } 40 | 41 | .btn:hover { 42 | opacity: 0.9; 43 | } 44 | .btn:focus { 45 | outline: none; 46 | } 47 | -------------------------------------------------------------------------------- /incrementing-counter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Incrementing Counter 15 | 16 | 17 | 18 |
19 |

Incrementing Counter

20 |
21 | 22 |
23 | 24 |
25 | 28 |
0
29 |
30 | 31 |
32 | 35 |
36 |
37 | 38 |
39 | 42 |
43 |
44 | 45 |
46 | 49 |
50 |
51 |
52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /incrementing-counter/script.js: -------------------------------------------------------------------------------- 1 | 2 | let fb = document.getElementById('fbcount'); 3 | let tw= document.getElementById('twittercount'); 4 | let insta = document.getElementById('instagramcount'); 5 | let twitch= document.getElementById('twitchcount'); 6 | 7 | let current = 0; 8 | 9 | function facebook(){ 10 | let fbcount = 1653400; 11 | 12 | if(current < fbcount){ 13 | let increment = Math.ceil(fbcount/ 19); 14 | current = current + increment; 15 | fb.innerHTML = current; 16 | setTimeout(facebook, 80); 17 | }else{ 18 | fb.innerHTML = fbcount; 19 | } 20 | } 21 | 22 | function twitter(){ 23 | let twcount = 1435600; 24 | 25 | if(current < twcount){ 26 | let increment = Math.ceil(twcount/ 19); 27 | current = current + increment; 28 | tw.innerHTML = current; 29 | setTimeout(twitter, 75); 30 | }else{ 31 | tw.innerHTML = twcount; 32 | } 33 | } 34 | 35 | function instagram(){ 36 | let instcount = 1232400; 37 | 38 | if(current < instcount){ 39 | let increment = Math.ceil(instcount/ 9); 40 | current = current + increment; 41 | insta.innerHTML = current; 42 | setTimeout(instagram, 95); 43 | }else{ 44 | insta.innerHTML = instcount; 45 | } 46 | } 47 | 48 | function twitchfunction(){ 49 | let twitchcount = 943000; 50 | 51 | if(current < twitchcount){ 52 | let increment = Math.ceil(twitchcount/ 19); 53 | current = current + increment; 54 | twitch.innerHTML = current; 55 | setTimeout(twitchfunction, 85); 56 | }else{ 57 | twitch.innerHTML = twitchcount; 58 | } 59 | } 60 | 61 | 62 | facebook(); 63 | twitter(); 64 | instagram(); 65 | twitchfunction(); 66 | 67 | -------------------------------------------------------------------------------- /incrementing-counter/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color:whitesmoke; 3 | } 4 | .header{ 5 | text-align: center; 6 | background-color: rgb(222, 233, 247); 7 | padding: 2vh; 8 | border-bottom: 2px solid grey; 9 | } 10 | #counter{ 11 | position: absolute; 12 | top: 50%; 13 | left: 50%; 14 | transform: translate(-50%, -50%); 15 | display: flex; 16 | flex-direction: row; 17 | } 18 | i{ 19 | font-size: 10vh; 20 | margin-left: 5vh; 21 | margin-right: 5vh; 22 | } 23 | #fbcount, #twittercount, #instagramcount, #twitchcount{ 24 | text-align: center; 25 | font-size: 4vh; 26 | margin-top: 5vh; 27 | } 28 | -------------------------------------------------------------------------------- /insect-catch-game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Catch The Insect 8 | 9 | 10 |
11 |

Catch The Insect

12 | 13 |
14 | 15 |
16 |

What is your "favorite" insect?

17 | 52 |
53 | 54 |
55 |

Time: 00:00

56 |

Score: 0

57 |
58 | Are you annnoyed yet?
59 | You are playing an impossible game!! 60 |
61 |
62 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /insect-catch-game/script.js: -------------------------------------------------------------------------------- 1 | const screens = document.querySelectorAll('.screen'); 2 | const choose_insect_btns = document.querySelectorAll('.choose-insect-btn'); 3 | const start_btn = document.getElementById('start-btn') 4 | const game_container = document.getElementById('game-container') 5 | const timeEl = document.getElementById('time') 6 | const scoreEl = document.getElementById('score') 7 | const message = document.getElementById('message') 8 | let seconds = 0 9 | let score = 0 10 | let selected_insect = {} 11 | 12 | start_btn.addEventListener('click', () => screens[0].classList.add('up')) 13 | 14 | choose_insect_btns.forEach(btn => { 15 | btn.addEventListener('click', () => { 16 | const img = btn.querySelector('img') 17 | const src = img.getAttribute('src') 18 | const alt = img.getAttribute('alt') 19 | selected_insect = { src, alt } 20 | screens[1].classList.add('up') 21 | setTimeout(createInsect, 1000) 22 | startGame() 23 | }) 24 | }) 25 | 26 | function startGame() { 27 | setInterval(increaseTime, 1000) 28 | } 29 | 30 | function increaseTime() { 31 | let m = Math.floor(seconds / 60) 32 | let s = seconds % 60 33 | m = m < 10 ? `0${m}` : m 34 | s = s < 10 ? `0${s}` : s 35 | timeEl.innerHTML = `Time: ${m}:${s}` 36 | seconds++ 37 | } 38 | 39 | function createInsect() { 40 | const insect = document.createElement('div') 41 | insect.classList.add('insect') 42 | const { x, y } = getRandomLocation() 43 | insect.style.top = `${y}px` 44 | insect.style.left = `${x}px` 45 | insect.innerHTML = `${selected_insect.alt}` 46 | 47 | insect.addEventListener('click', catchInsect) 48 | 49 | game_container.appendChild(insect) 50 | } 51 | 52 | function getRandomLocation() { 53 | const width = window.innerWidth 54 | const height = window.innerHeight 55 | const x = Math.random() * (width - 200) + 100 56 | const y = Math.random() * (height - 200) + 100 57 | return { x, y } 58 | } 59 | 60 | function catchInsect() { 61 | increaseScore() 62 | this.classList.add('caught') 63 | setTimeout(() => this.remove(), 2000) 64 | addInsects() 65 | } 66 | 67 | function addInsects() { 68 | setTimeout(createInsect, 1000) 69 | setTimeout(createInsect, 1500) 70 | } 71 | 72 | function increaseScore() { 73 | score++ 74 | if(score > 19) { 75 | message.classList.add('visible') 76 | } 77 | scoreEl.innerHTML = `Score: ${score}` 78 | } 79 | -------------------------------------------------------------------------------- /insect-catch-game/style.css: -------------------------------------------------------------------------------- 1 | 2 | @import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap'); 3 | 4 | * { 5 | box-sizing: border-box; 6 | } 7 | 8 | body { 9 | background-color: #516dff; 10 | color: #fff; 11 | font-family: 'Press Start 2P', sans-serif; 12 | height: 100vh; 13 | overflow: hidden; 14 | margin: 0; 15 | text-align: center; 16 | } 17 | 18 | a { 19 | color: #fff; 20 | } 21 | 22 | h1 { 23 | line-height: 1.4; 24 | } 25 | 26 | .btn { 27 | border: 0; 28 | background-color: #fff; 29 | color: #516dff; 30 | padding: 15px 20px; 31 | font-family: inherit; 32 | cursor: pointer; 33 | } 34 | 35 | .btn:hover { 36 | opacity: 0.9; 37 | } 38 | 39 | .btn:focus { 40 | outline: 0; 41 | } 42 | 43 | .screen { 44 | display: flex; 45 | flex-direction: column; 46 | align-items: center; 47 | justify-content: center; 48 | height: 100vh; 49 | width: 100vw; 50 | transition: margin 0.5s ease-out; 51 | } 52 | 53 | .screen.up { 54 | margin-top: -100vh; 55 | } 56 | 57 | .insects-list { 58 | display: flex; 59 | flex-wrap: wrap; 60 | justify-content: center; 61 | list-style-type: none; 62 | padding: 0; 63 | } 64 | 65 | .insects-list li { 66 | margin: 10px; 67 | } 68 | 69 | .choose-insect-btn { 70 | background-color: transparent; 71 | border: 2px solid #fff; 72 | color: #fff; 73 | cursor: pointer; 74 | font-family: inherit; 75 | width: 150px; 76 | height: 150px; 77 | } 78 | 79 | .choose-insect-btn:hover { 80 | background-color: #fff; 81 | color: #516dff; 82 | } 83 | 84 | .choose-insect-btn:active { 85 | background-color: rgba(255, 255, 255, 0.7); 86 | } 87 | 88 | .choose-insect-btn img { 89 | width: 100px; 90 | height: 100px; 91 | object-fit: contain; 92 | } 93 | 94 | .game-container { 95 | position: relative; 96 | } 97 | 98 | .time, 99 | .score { 100 | position: absolute; 101 | top: 20px; 102 | } 103 | 104 | .time { 105 | left: 20px; 106 | } 107 | 108 | .score { 109 | right: 20px; 110 | } 111 | 112 | .message { 113 | line-height: 1.7; 114 | background-color: rgba(0, 0, 0, 0.5); 115 | width: 100%; 116 | padding: 20px; 117 | z-index: 100; 118 | text-align: center; 119 | opacity: 0; 120 | position: absolute; 121 | top: 0; 122 | left: 50%; 123 | transform: translate(-50%, -150%); 124 | transition: transform 0.4s ease-in; 125 | } 126 | 127 | .message.visible { 128 | transform: translate(-50%, 150%); 129 | opacity: 1; 130 | } 131 | 132 | .insect { 133 | cursor: pointer; 134 | display: flex; 135 | align-items: center; 136 | justify-content: center; 137 | width: 100px; 138 | height: 100px; 139 | position: absolute; 140 | transform: translate(-50%, -50%) scale(1); 141 | transition: transform 0.3s ease-in-out; 142 | } 143 | 144 | .insect.caught { 145 | transform: translate(-50%, -50%) scale(0); 146 | } 147 | 148 | .insect img { 149 | width: 100px; 150 | height: 100px; 151 | } 152 | -------------------------------------------------------------------------------- /kinetic-loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Kinetic Loader 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |
21 |
22 |
23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /kinetic-loader/script.js: -------------------------------------------------------------------------------- 1 | // JS file not needed here 2 | -------------------------------------------------------------------------------- /kinetic-loader/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: #2c3e50; 3 | font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 4 | } 5 | #app{ 6 | position: absolute; 7 | top: 50%; 8 | left: 50%; 9 | transform: translate(-50%, -50%); 10 | } 11 | .triangle-up { 12 | margin-left: 9vh; 13 | width: 0; 14 | height: 0; 15 | border-left: 25px solid transparent; 16 | border-right: 25px solid transparent; 17 | border-bottom: 50px solid white; 18 | animation: forup 1.5s linear infinite; 19 | } 20 | .triangle-down { 21 | width: 0; 22 | height: 0; 23 | border-left: 25px solid transparent; 24 | border-right: 25px solid transparent; 25 | border-top: 50px solid white; 26 | animation: fordown 1.5s linear infinite; 27 | } 28 | @keyframes forup { 29 | 0%{ 30 | transform: rotate(0deg); 31 | } 32 | 25%{ 33 | transform: rotate(72deg); 34 | } 35 | 50%{ 36 | transform: rotate(144deg); 37 | } 38 | 75%{ 39 | transform: rotate(216deg); 40 | } 41 | 100%{ 42 | transform: rotate(360deg); 43 | } 44 | } 45 | @keyframes fordown { 46 | 0%{ 47 | transform: rotate(0deg); 48 | } 49 | 25%{ 50 | transform: rotate(-72deg); 51 | } 52 | 50%{ 53 | transform: rotate(-144deg); 54 | } 55 | 75%{ 56 | transform: rotate(-216deg); 57 | } 58 | 100%{ 59 | transform: rotate(-360deg); 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /live-user-filter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | The Live User Filter 12 | 13 | 14 | 15 | 16 |
17 |

The Live User Filter

18 |
19 | 20 |
21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /live-user-filter/script.js: -------------------------------------------------------------------------------- 1 | let output = document.getElementById('output'); 2 | let filter = document.getElementById('filter'); 3 | let names = []; 4 | filter.addEventListener('input', (e) => filterData(e.target.value)); 5 | 6 | async function getUser(){ 7 | let a = await fetch('https://randomuser.me/api?results=15'); 8 | let b = await a.json(); 9 | return b; 10 | } 11 | 12 | let ou = ""; 13 | let res = ""; 14 | async function add(){ 15 | let z = await getUser(); 16 | for(let i = 0; i < 15; i++){ 17 | ou += `
  • ${z.results[i].name.first}
    • `; 18 | names.push(`${z.results[i].name.first}`); 19 | } 20 | output.innerHTML = ou; 21 | let res = document.querySelectorAll('.show'); 22 | console.log(names.length); 23 | } 24 | 25 | function filterData(searchTerm){ 26 | ou = ""; 27 | for(let i = 0; i < names.length; i++){ 28 | if(names[i].indexOf(searchTerm) > -1){ 29 | ou += `
  • ${names[i]}
    • `; 30 | }else{ 31 | } 32 | } 33 | output.innerHTML = ou; 34 | } 35 | 36 | 37 | 38 | getUser(); 39 | add(); 40 | -------------------------------------------------------------------------------- /live-user-filter/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: #2c3e50; 3 | font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 4 | } 5 | .header{ 6 | color: white; 7 | text-align: center; 8 | } 9 | #app{ 10 | position: absolute; 11 | top: 50%; 12 | left: 50%; 13 | transform: translate(-50%, -50%); 14 | } 15 | .show{ 16 | list-style-type: none; 17 | padding: 0.5vh; 18 | color: white; 19 | display: block; 20 | } 21 | .hide{ 22 | display: none; 23 | } 24 | #output{ 25 | height: 60vh; 26 | } 27 | -------------------------------------------------------------------------------- /mobile-tab-navigation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | The Mobile Tab Navigation 11 | 12 | 13 | 14 |
    15 |
    16 |
    17 |
    18 |
    19 | 20 | 21 | 22 | 23 |
    24 |
    25 |
    26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /mobile-tab-navigation/script.js: -------------------------------------------------------------------------------- 1 | let wallpaper = document.getElementById('wallpaper'); 2 | let home = document.getElementById('home'); 3 | let work = document.getElementById('work'); 4 | let blog = document.getElementById('blog'); 5 | let power = document.getElementById('power'); 6 | 7 | home.addEventListener('click', () => { 8 | wallpaper.style.backgroundImage = "url('https://images.unsplash.com/photo-1480074568708-e7b720bb3f09?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1053&q=80')"; 9 | wallpaper.style.objectFit = 'cover'; 10 | wallpaper.style.position = 'absolute'; 11 | wallpaper.style.width = '45vh'; 12 | wallpaper.style.height = '65vh'; 13 | 14 | wallpaper.style.backgroundSize = 'cover'; 15 | wallpaper.style.backgroundRepeat = 'no-repeat'; 16 | wallpaper.style.backgroundPosition = 'center center'; 17 | 18 | home.className = 'btnactive'; 19 | work.className = "btn"; 20 | blog.className = "btn"; 21 | power.className = "btn"; 22 | }) 23 | work.addEventListener('click', () => { 24 | wallpaper.style.backgroundImage = "url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80')"; 25 | wallpaper.style.objectFit = 'cover'; 26 | wallpaper.style.position = 'absolute'; 27 | wallpaper.style.width = '45vh'; 28 | wallpaper.style.height = '65vh'; 29 | 30 | wallpaper.style.backgroundSize = 'cover'; 31 | wallpaper.style.backgroundRepeat = 'no-repeat'; 32 | wallpaper.style.backgroundPosition = 'center center'; 33 | 34 | work.className = 'btnactive'; 35 | home.className = "btn"; 36 | blog.className = "btn"; 37 | power.className = "btn"; 38 | }) 39 | 40 | blog.addEventListener('click', () => { 41 | wallpaper.style.backgroundImage = "url('https://images.unsplash.com/photo-1471107340929-a87cd0f5b5f3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1266&q=80')"; 42 | wallpaper.style.objectFit = 'cover'; 43 | wallpaper.style.position = 'absolute'; 44 | wallpaper.style.width = '45vh'; 45 | wallpaper.style.height = '65vh'; 46 | 47 | 48 | wallpaper.style.backgroundSize = 'cover'; 49 | wallpaper.style.backgroundRepeat = 'no-repeat'; 50 | wallpaper.style.backgroundPosition = 'center center'; 51 | 52 | blog.className = 'btnactive'; 53 | work.className = "btn"; 54 | home.className = "btn"; 55 | power.className = "btn"; 56 | }) 57 | 58 | power.addEventListener('click', () => { 59 | wallpaper.style.backgroundImage = "url('https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80')"; 60 | wallpaper.style.objectFit = 'cover'; 61 | wallpaper.style.position = 'absolute'; 62 | wallpaper.style.width = '45vh'; 63 | wallpaper.style.height = '65vh'; 64 | 65 | wallpaper.style.backgroundSize = 'cover'; 66 | wallpaper.style.backgroundRepeat = 'no-repeat'; 67 | wallpaper.style.backgroundPosition = 'center center'; 68 | 69 | power.className = 'btnactive'; 70 | work.className = "btn"; 71 | blog.className = "btn"; 72 | home.className = "btn"; 73 | }) 74 | -------------------------------------------------------------------------------- /mobile-tab-navigation/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: rgb(35, 34, 59); 3 | } 4 | #app{ 5 | top: 50%; 6 | left: 50%; 7 | position: absolute; 8 | transform: translate(-50%, -50%); 9 | } 10 | #mobile{ 11 | background-color: lightgrey; 12 | width: 45vh; 13 | height: 75vh; 14 | border-radius: 8px; 15 | border: 4px solid white; 16 | box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 8px 16px rgba(0, 0, 0, .1); 17 | transition: opacity 0.4s ease; 18 | } 19 | #bar{ 20 | background-color: white; 21 | height: 10vh; 22 | margin-top: 65vh; 23 | } 24 | .btn{ 25 | height: 10vh; 26 | width: 10.75vh; 27 | font-size: 3vh; 28 | background-color: white; 29 | border: none; 30 | cursor: pointer; 31 | color: grey; 32 | } 33 | .btn:focus{ 34 | outline: none; 35 | } 36 | .btnactive{ 37 | height: 10vh; 38 | width: 10.75vh; 39 | font-size: 3vh; 40 | background-color: white; 41 | border: none; 42 | cursor: pointer; 43 | color: purple; 44 | } 45 | .btnactive:focus{ 46 | outline: none; 47 | } 48 | .btn:hover{ 49 | color: purple; 50 | } 51 | 52 | 53 | -------------------------------------------------------------------------------- /movie-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Movie App 8 | 9 | 10 |
    11 |
    12 | 13 |
    14 |
    15 | 16 |
    17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /movie-app/script.js: -------------------------------------------------------------------------------- 1 | const API_URL = 'https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=3fd2be6f0c70a2a598f084ddfb75487c&page=1' 2 | const IMG_PATH = 'https://image.tmdb.org/t/p/w1280' 3 | const SEARCH_API = 'https://api.themoviedb.org/3/search/movie?api_key=3fd2be6f0c70a2a598f084ddfb75487c&query="' 4 | 5 | const main = document.getElementById('main') 6 | const form = document.getElementById('form') 7 | const search = document.getElementById('search') 8 | 9 | // Get initial movies 10 | getMovies(API_URL) 11 | 12 | async function getMovies(url) { 13 | const res = await fetch(url) 14 | const data = await res.json() 15 | 16 | showMovies(data.results) 17 | } 18 | 19 | function showMovies(movies) { 20 | main.innerHTML = '' 21 | 22 | movies.forEach((movie) => { 23 | const { title, poster_path, vote_average, overview } = movie 24 | 25 | const movieEl = document.createElement('div') 26 | movieEl.classList.add('movie') 27 | 28 | movieEl.innerHTML = ` 29 | ${title} 30 |
    31 |

    ${title}

    32 | ${vote_average} 33 |
    34 |
    35 |

    Overview

    36 | ${overview} 37 |
    38 | ` 39 | main.appendChild(movieEl) 40 | }) 41 | } 42 | 43 | function getClassByRate(vote) { 44 | if(vote >= 8) { 45 | return 'green' 46 | } else if(vote >= 5) { 47 | return 'orange' 48 | } else { 49 | return 'red' 50 | } 51 | } 52 | 53 | form.addEventListener('submit', (e) => { 54 | e.preventDefault() 55 | 56 | const searchTerm = search.value 57 | 58 | if(searchTerm && searchTerm !== '') { 59 | getMovies(SEARCH_API + searchTerm) 60 | 61 | search.value = '' 62 | } else { 63 | window.location.reload() 64 | } 65 | }) 66 | -------------------------------------------------------------------------------- /movie-app/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap'); 2 | 3 | :root { 4 | --primary-color: #22254b; 5 | --secondary-color: #373b69; 6 | } 7 | 8 | * { 9 | box-sizing: border-box; 10 | } 11 | 12 | body { 13 | background-color: var(--primary-color); 14 | font-family: 'Poppins', sans-serif; 15 | margin: 0; 16 | } 17 | 18 | header { 19 | padding: 1rem; 20 | display: flex; 21 | justify-content: flex-end; 22 | background-color: var(--secondary-color); 23 | } 24 | 25 | .search { 26 | background-color: transparent; 27 | border: 2px solid var(--primary-color); 28 | border-radius: 50px; 29 | font-family: inherit; 30 | font-size: 1rem; 31 | padding: 0.5rem 1rem; 32 | color: #fff; 33 | } 34 | 35 | .search::placeholder { 36 | color: #7378c5; 37 | } 38 | 39 | .search:focus { 40 | outline: none; 41 | background-color: var(--primary-color); 42 | } 43 | 44 | main { 45 | display: flex; 46 | flex-wrap: wrap; 47 | justify-content: center; 48 | } 49 | 50 | .movie { 51 | width: 300px; 52 | margin: 1rem; 53 | background-color: var(--secondary-color); 54 | box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2); 55 | position: relative; 56 | overflow: hidden; 57 | border-radius: 3px; 58 | } 59 | 60 | .movie img { 61 | width: 100%; 62 | } 63 | 64 | .movie-info { 65 | color: #eee; 66 | display: flex; 67 | align-items: center; 68 | justify-content: space-between; 69 | padding: 0.5rem 1rem 1rem; 70 | letter-spacing: 0.5px; 71 | } 72 | 73 | .movie-info h3 { 74 | margin-top: 0; 75 | } 76 | 77 | .movie-info span { 78 | background-color: var(--primary-color); 79 | padding: 0.25rem 0.5rem; 80 | border-radius: 3px; 81 | font-weight: bold; 82 | } 83 | 84 | .movie-info span.green { 85 | color: lightgreen; 86 | } 87 | 88 | .movie-info span.orange { 89 | color: orange; 90 | } 91 | 92 | .movie-info span.red { 93 | color: red; 94 | } 95 | 96 | .overview { 97 | background-color: #fff; 98 | padding: 2rem; 99 | position: absolute; 100 | left: 0; 101 | bottom: 0; 102 | right: 0; 103 | max-height: 100%; 104 | transform: translateY(101%); 105 | overflow-y: auto; 106 | transition: transform 0.3s ease-in; 107 | } 108 | 109 | .movie:hover .overview { 110 | transform: translateY(0); 111 | } 112 | -------------------------------------------------------------------------------- /netflix-navigation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Netflix Navigation 12 | 13 | 14 | 15 | 16 |
    17 |
    18 |
    19 |
    20 |
    21 |
    22 |
    23 |
    24 | 25 |
    26 | 27 | 30 |
    31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /netflix-navigation/script.js: -------------------------------------------------------------------------------- 1 | let black = document.querySelector('.navblack'); 2 | let red = document.querySelector('.navred'); 3 | let white = document.querySelector('.navwhite'); 4 | 5 | let btn = document.querySelector('.btn'); 6 | 7 | btn.addEventListener('click', function(){ 8 | // black.style.width = "45vh"; 9 | // black.style.transitionDelay = "0.5s"; 10 | // black.style.tram 11 | black.classList.toggle("navblackactive"); 12 | red.classList.toggle("navredactive"); 13 | white.classList.toggle("navwhiteactive"); 14 | 15 | }); 16 | -------------------------------------------------------------------------------- /netflix-navigation/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | } 4 | .navblack{ 5 | background-color: black; 6 | width: 0vh; 7 | height: 100vh; 8 | } 9 | .navblackactive{ 10 | background-color: black; 11 | width: 45vh; 12 | height: 100vh; 13 | transition: width 0.5s; 14 | } 15 | .navred{ 16 | background-color: red; 17 | width: 0vh; 18 | height: 100vh; 19 | z-index: -1; 20 | } 21 | .navredactive{ 22 | background-color: red; 23 | width: 42vh; 24 | height: 100vh; 25 | transition: width 0.3s; 26 | transition-delay: 0.5s; 27 | /* z-index: -1; */ 28 | } 29 | .navwhite{ 30 | background-color: white; 31 | width: 0vh; 32 | height: 100vh; 33 | z-index: -12; 34 | } 35 | .navwhiteactive{ 36 | background-color: white; 37 | width: 39vh; 38 | height: 100vh; 39 | transition: width 0.2s; 40 | transition-delay: 1s; 41 | /* z-index: -12; */ 42 | } 43 | .btn{ 44 | position: absolute; 45 | top: 50%; 46 | left: 50%; 47 | transform: translate(-50%, -50%); 48 | width: 25vh; 49 | height: 10vh; 50 | background-color: transparent; 51 | border:none; 52 | display: block; 53 | border: 2px solid red; 54 | border-radius: 5px; 55 | font-size: 2.9vh; 56 | cursor: pointer; 57 | } 58 | .btn:focus{ 59 | outline: none; 60 | } 61 | -------------------------------------------------------------------------------- /note-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Notes App 9 | 10 | 11 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /note-app/script.js: -------------------------------------------------------------------------------- 1 | const addBtn = document.getElementById('add') 2 | 3 | const notes = JSON.parse(localStorage.getItem('notes')) 4 | 5 | if(notes) { 6 | notes.forEach(note => addNewNote(note)) 7 | } 8 | 9 | addBtn.addEventListener('click', () => addNewNote()) 10 | 11 | function addNewNote(text = '') { 12 | const note = document.createElement('div') 13 | note.classList.add('note') 14 | 15 | note.innerHTML = ` 16 |
    17 | 18 | 19 |
    20 |
    21 | 22 | ` 23 | 24 | const editBtn = note.querySelector('.edit') 25 | const deleteBtn = note.querySelector('.delete') 26 | const main = note.querySelector('.main') 27 | const textArea = note.querySelector('textarea') 28 | 29 | textArea.value = text 30 | main.innerHTML = marked(text) 31 | 32 | deleteBtn.addEventListener('click', () => { 33 | note.remove() 34 | 35 | updateLS() 36 | }) 37 | 38 | editBtn.addEventListener('click', () => { 39 | main.classList.toggle('hidden') 40 | textArea.classList.toggle('hidden') 41 | }) 42 | 43 | textArea.addEventListener('input', (e) => { 44 | const { value } = e.target 45 | 46 | main.innerHTML = marked(value) 47 | 48 | updateLS() 49 | }) 50 | 51 | document.body.appendChild(note) 52 | } 53 | 54 | function updateLS() { 55 | const notesText = document.querySelectorAll('textarea') 56 | 57 | const notes = [] 58 | 59 | notesText.forEach(note => notes.push(note.value)) 60 | 61 | localStorage.setItem('notes', JSON.stringify(notes)) 62 | } 63 | -------------------------------------------------------------------------------- /note-app/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | outline: none; 6 | } 7 | 8 | body { 9 | background-color: #7bdaf3; 10 | font-family: 'Poppins', sans-serif; 11 | display: flex; 12 | flex-wrap: wrap; 13 | margin: 0; 14 | padding-top: 3rem; 15 | } 16 | 17 | .add { 18 | position: fixed; 19 | top: 1rem; 20 | right: 1rem; 21 | background-color: #9ec862; 22 | color: #fff; 23 | border: none; 24 | border-radius: 3px; 25 | padding: 0.5rem 1rem; 26 | cursor: pointer; 27 | } 28 | 29 | .add:active { 30 | transform: scale(0.98); 31 | } 32 | 33 | .note { 34 | background-color: #fff; 35 | box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1); 36 | margin: 30px 20px; 37 | height: 400px; 38 | width: 400px; 39 | overflow-y: scroll; 40 | } 41 | 42 | .note .tools { 43 | background-color: #9ec862; 44 | display: flex; 45 | justify-content: flex-end; 46 | padding: 0.5rem; 47 | } 48 | 49 | .note .tools button { 50 | background-color: transparent; 51 | border: none; 52 | color: #fff; 53 | cursor: pointer; 54 | font-size: 1rem; 55 | margin-left: 0.5rem; 56 | } 57 | 58 | .note textarea { 59 | outline: none; 60 | font-family: inherit; 61 | font-size: 1.2rem; 62 | border: none; 63 | height: 400px; 64 | width: 100%; 65 | padding: 20px; 66 | } 67 | 68 | .main { 69 | padding: 20px; 70 | } 71 | 72 | .hidden { 73 | display: none; 74 | } 75 | -------------------------------------------------------------------------------- /password-generator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Password Generator 12 | 13 | 14 | 15 |

    Random Password Generator using JavaScript

    16 |

    17 |
    18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |
    35 | 36 |
    37 | 38 | 39 | 40 |
    41 |
    42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /password-generator/script.js: -------------------------------------------------------------------------------- 1 | function randomString(){ 2 | 3 | var alphabet = document.getElementById('alphabet').value; 4 | var specialch = document.getElementById('specialch').value; 5 | var num = document.getElementById('num').value; 6 | 7 | var a = parseInt(alphabet); 8 | var b = parseInt(specialch); 9 | var c = parseInt(num); 10 | 11 | var length = a + b + c; 12 | 13 | 14 | if(Number.isNaN(a) && Number.isNaN(b) && Number.isNaN(c)){ 15 | document.getElementById("input1").innerHTML = "Please enter atleast one numerical value to continue"; 16 | }else{ 17 | document.getElementById('input1').innerHTML = ""; 18 | } 19 | // alphabet; 20 | // document.getElementById('input2').innerHTML = specialch; 21 | // document.getElementById('input3').innerHTML = num; 22 | 23 | 24 | var characters = "ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz"; 25 | var specialcharacters = "!@#$%^&*()_+"; 26 | var numbers = "1234567890"; 27 | 28 | var len1 = alphabet; 29 | var len2 = specialch; 30 | var len3 = num; 31 | var randomString = ""; 32 | 33 | for(var i = 0; i < len1; i++){ 34 | var ch = Math.floor(Math.random() * characters.length); 35 | randomString = randomString + characters.substring(ch, ch+1); 36 | } 37 | 38 | for(var i = 0; i < len2; i++){ 39 | var ch = Math.floor(Math.random() * specialcharacters.length); 40 | randomString = randomString + specialcharacters.substring(ch, ch+1); 41 | } 42 | 43 | for(var i = 0; i < len3; i++){ 44 | var ch = Math.floor(Math.random() * numbers.length); 45 | randomString = randomString + numbers.substring(ch, ch+1); 46 | } 47 | 48 | let shuffleString = randomString.split('').sort(function(){return 0.5-Math.random()}).join(''); 49 | 50 | 51 | document.getElementById("string").innerHTML = shuffleString; 52 | 53 | } 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /password-generator/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Mukta:wght@200&display=swap'); 2 | *{ 3 | font-family: 'Mukta', sans-serif; 4 | font-weight: 600; 5 | } 6 | body{ 7 | background-color: #5eaaa8; 8 | } 9 | .container{ 10 | width: 80vh; 11 | background-color:#d8ebe4; 12 | padding: 5vh; 13 | border-radius: 2vh; 14 | } 15 | .generate{ 16 | color: black; 17 | background-color:white; 18 | cursor:pointer; 19 | border: 2px solid black; 20 | text-align: center; 21 | margin-top: 5vh; 22 | width: 67vh; 23 | } 24 | .generate:hover{ 25 | background-color: whitesmoke; 26 | } 27 | #string{ 28 | margin-top: 4vh; 29 | border: 2px solid black; 30 | width: 67vh; 31 | font-size: 4vh; 32 | text-align: center; 33 | margin: auto; 34 | height: 10vh; 35 | background-color: rgb(228, 222, 222); 36 | padding-top: 1.8vh; 37 | } 38 | h2{ 39 | text-align:center; 40 | color: white; 41 | font-weight: 600; 42 | margin-top: 5vh; 43 | } 44 | .container{ 45 | position: absolute; 46 | top: 50%; 47 | left: 50%; 48 | transform: translate(-50%, -50%); 49 | } 50 | form{ 51 | display:flex; 52 | flex-direction:column; 53 | } 54 | .row1, .row2, .row3{ 55 | display:flex; 56 | flex-direction: row; 57 | } 58 | table{ 59 | width: 100%; 60 | } 61 | label{ 62 | margin: 1.5vh; 63 | } 64 | input{ 65 | width: 25vh; 66 | margin: 1.5vh; 67 | padding:1vh; 68 | } 69 | #input1{ 70 | color:black; 71 | font-size: 14px; 72 | margin-left: auto; 73 | margin-right: auto; 74 | text-align: center; 75 | height: 2vh; 76 | } 77 | -------------------------------------------------------------------------------- /password-strength-background/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | The Password Strength Background 12 | 13 | 14 | 15 |
    16 |
    17 | 18 |
    19 | 20 |
    21 |

    Image Password Strength

    22 |
    Enter password to see the effect
    23 |
    24 | 25 |
    26 | 27 | 28 |
    29 | 30 |
    31 | 32 | 33 |
    34 | 35 |
    36 |
    37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /password-strength-background/script.js: -------------------------------------------------------------------------------- 1 | let pwd = document.getElementById('upwd'); 2 | let backg = document.getElementById('bg'); 3 | 4 | pwd.addEventListener('keydown', (e) => { 5 | let len = e.target.value.length; 6 | let blurValue = 20 - len * 2; 7 | console.log(blurValue); 8 | backg.style.filter = `blur(${blurValue}px)`; 9 | }); 10 | -------------------------------------------------------------------------------- /password-strength-background/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | } 4 | #bg{ 5 | background: url('https://images.unsplash.com/photo-1556745757-8d76bdb6984b'); 6 | background-size: cover; 7 | background-repeat: no-repeat; 8 | background-position: center center; 9 | width:98vw; 10 | height:98vh; 11 | filter: blur(20px); 12 | } 13 | #app{ 14 | position: absolute; 15 | top: 50%; 16 | left: 50%; 17 | transform: translate(-50%, -50%); 18 | } 19 | .header{ 20 | padding: 2vh; 21 | } 22 | form{ 23 | background-color: white; 24 | padding: 5vh; 25 | opacity: 0.8; 26 | border-radius: 8px; 27 | filter: blur(0px); 28 | z-index: -1; 29 | font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 30 | } 31 | label{ 32 | margin-bottom: 2vh; 33 | } 34 | input{ 35 | padding: 1vh; 36 | } 37 | #row{ 38 | display: flex; 39 | flex-direction: column; 40 | padding: 2vh; 41 | } 42 | -------------------------------------------------------------------------------- /pokedex/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Pokedex 12 | 13 | 14 | 15 | 16 |
    17 |
    18 |
    19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /pokedex/script.js: -------------------------------------------------------------------------------- 1 | let pokemons = document.getElementById('pokemons'); 2 | 3 | async function pokedex(id){ 4 | let a = await fetch(`https://pokeapi.co/api/v2/pokemon/${id}`); 5 | let b = await a.json(); 6 | console.log(b); 7 | createDog(b); 8 | } 9 | 10 | 11 | function createDog(b){ 12 | let a = document.createElement('div'); 13 | a.classList.add('poke'); 14 | a.innerHTML = ` 15 |
    16 | Name: ${b.name}
    17 | Type: ${b.types[0].type.name}
    18 | Experience: ${b.base_experience} 19 | `; 20 | 21 | if(b.types[0].type.name == 'water'){ 22 | a.style.backgroundColor = "#DEF3FD"; 23 | } 24 | if(b.types[0].type.name == 'electric'){ 25 | a.style.backgroundColor = "#FCF7DE"; 26 | } 27 | if(b.types[0].type.name == 'ground'){ 28 | a.style.backgroundColor = "#f4e7da"; 29 | } 30 | if(b.types[0].type.name == 'rock'){ 31 | a.style.backgroundColor = "#d5d5d4"; 32 | } 33 | if(b.types[0].type.name == 'fairy'){ 34 | a.style.backgroundColor = "#fceaff"; 35 | } 36 | if(b.types[0].type.name == 'poison'){ 37 | a.style.backgroundColor = "#98d7a5"; 38 | } 39 | if(b.types[0].type.name == 'bug'){ 40 | a.style.backgroundColor = "#f8d5a3"; 41 | } 42 | if(b.types[0].type.name == 'dragon'){ 43 | a.style.backgroundColor = "#97b3e6"; 44 | } 45 | if(b.types[0].type.name == 'psychic'){ 46 | a.style.backgroundColor = "#eaeda1"; 47 | } 48 | if(b.types[0].type.name == 'flying'){ 49 | a.style.backgroundColor = "#F5F5F5"; 50 | } 51 | if(b.types[0].type.name == 'fighting'){ 52 | a.style.backgroundColor = "#E6E0D4"; 53 | } 54 | if(b.types[0].type.name == 'normal'){ 55 | a.style.backgroundColor = "#F5F5F5"; 56 | } 57 | pokemons.appendChild(a); 58 | } 59 | 60 | 61 | for(let i = 1; i < 150; i++){ 62 | pokedex(i); 63 | } 64 | -------------------------------------------------------------------------------- /pokedex/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | } 4 | #app{ 5 | background-color: rgb(69, 102, 134); 6 | width: 100%; 7 | } 8 | #pokemons{ 9 | padding: 5vh; 10 | display: flex; 11 | flex-direction: row; 12 | flex-wrap: wrap; 13 | justify-content: center; 14 | } 15 | .poke{ 16 | align-items: center; 17 | text-align: center; 18 | background-color:rgb(220, 230, 243); 19 | margin: 1vh; 20 | width: 25vh; 21 | height: 25vh; 22 | padding: 1vh; 23 | font-size: 2.4vh; 24 | border-radius: 8px; 25 | box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 8px 16px rgba(0, 0, 0, .1); 26 | } 27 | -------------------------------------------------------------------------------- /progress-steps/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Progress Steps 13 | 14 | 15 | 16 |
    17 |

    Progress Steps

    18 |
    19 | 20 | 21 |
    22 | 23 |
    24 |
    25 |
    26 |
    27 |
    28 |
    29 |
    30 | 31 |
    32 | 33 | 34 |
    35 | 36 |
    37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /progress-steps/script.js: -------------------------------------------------------------------------------- 1 | let clicked = 1; 2 | 3 | let btn = document.getElementById('btn'); 4 | btn.addEventListener('click', addCount()); 5 | 6 | let btn1 = document.getElementById('btn1'); 7 | btn1.addEventListener('click', decCount()); 8 | 9 | function addCount(){ 10 | if(clicked == 1){ 11 | document.getElementById('l1').classList.add("active"); 12 | } 13 | if(clicked == 2){ 14 | document.getElementById('c2').classList.add("active"); 15 | } 16 | if(clicked == 3){ 17 | document.getElementById('l2').classList.add("active"); 18 | } 19 | if(clicked == 4){ 20 | document.getElementById('c3').classList.add("active"); 21 | } 22 | 23 | clicked++; 24 | if(clicked >= 6){ 25 | decCount(); 26 | } 27 | } 28 | 29 | function decCount(){ 30 | clicked--; 31 | if(clicked == 1){ 32 | document.getElementById('l1').classList.remove("active"); 33 | } 34 | if(clicked == 2){ 35 | document.getElementById('c2').classList.remove("active"); 36 | } if(clicked == 3){ 37 | document.getElementById('l2').classList.remove("active"); 38 | } if(clicked == 4){ 39 | document.getElementById('c3').classList.remove("active"); 40 | } 41 | if(clicked == 0){ 42 | addCount(); 43 | } 44 | } 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /progress-steps/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color:whitesmoke; 3 | } 4 | #all{ 5 | box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 8px 16px rgba(0, 0, 0, .1); 6 | background-color: white; 7 | position: absolute; 8 | top: 50%; 9 | left: 50%; 10 | transform: translate(-50%,-50%); 11 | height: 40vh; 12 | width: 70vh; 13 | display: flex; 14 | flex-direction: column; 15 | 16 | } 17 | #app{ 18 | display: flex; 19 | flex-direction: row; 20 | margin: auto; 21 | } 22 | #control{ 23 | display: flex; 24 | flex-direction: row; 25 | margin: auto; 26 | } 27 | .c1{ 28 | height: 5vh; 29 | width: 5vh; 30 | background-color: teal; 31 | border-radius: 50%; 32 | } 33 | .c2{ 34 | height: 5vh; 35 | width: 5vh; 36 | background-color: thistle; 37 | border-radius: 50%; 38 | } 39 | .c3{ 40 | height: 5vh; 41 | width: 5vh; 42 | background-color:thistle; 43 | border-radius: 50%; 44 | margin:auto 45 | } 46 | .l1{ 47 | height: 0.8vh; 48 | width: 15vh; 49 | background-color: thistle; 50 | border: 1px solid thistle; 51 | margin-top: auto; 52 | margin-bottom: auto; 53 | margin-left: 4vh; 54 | margin-right: 4vh; 55 | 56 | } 57 | .l2{ 58 | height: 0.8vh; 59 | width: 15vh; 60 | background-color: thistle; 61 | border: 1px solid thistle; 62 | margin-top: auto; 63 | margin-bottom: auto; 64 | margin-left: 4vh; 65 | margin-right: 4vh; 66 | } 67 | #btn, #btn1{ 68 | margin-right: 2vh; 69 | margin-left: 2vh; 70 | background-color: white; 71 | border: 1.5px solid grey; 72 | padding: 1vh; 73 | box-shadow: none; 74 | border-radius: 4px; 75 | width: 20vh; 76 | } 77 | .active{ 78 | background-color: teal; 79 | } 80 | .header{ 81 | text-align: center; 82 | background-color: rgb(222, 233, 247); 83 | padding: 2vh; 84 | border-bottom: 2px solid grey; 85 | } 86 | 87 | /* @keyframes animation { 88 | 0% { 89 | width: 0%; 90 | background-color: teal; 91 | } 92 | 25% { 93 | width: 25%; 94 | background-color: teal; 95 | } 96 | 50% { 97 | width: 50%; 98 | background-color: teal; 99 | } 100 | 75% { 101 | width: 75%; 102 | background-color: teal; 103 | } 104 | 100% { 105 | width: 100%; 106 | background-color: teal; 107 | } 108 | } */ 109 | -------------------------------------------------------------------------------- /quiz-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Quiz App 11 | 12 | 13 | 14 | 15 |
    16 |
    17 |

    Question text

    18 | 39 |
    40 | 41 |
    42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /quiz-app/script.js: -------------------------------------------------------------------------------- 1 | const quizData = [ 2 | { 3 | question: "Which language runs in a web browser?", 4 | a: "Java", 5 | b: "C", 6 | c: "Python", 7 | d: "JavaScript", 8 | correct: "d", 9 | }, 10 | { 11 | question: "What does CSS stand for?", 12 | a: "Central Style Sheets", 13 | b: "Cascading Style Sheets", 14 | c: "Cascading Simple Sheets", 15 | d: "Cars SUVs Sailboats", 16 | correct: "b", 17 | }, 18 | { 19 | question: "What does HTML stand for?", 20 | a: "Hypertext Markup Language", 21 | b: "Hypertext Markdown Language", 22 | c: "Hyperloop Machine Language", 23 | d: "Helicopters Terminals Motorboats Lamborginis", 24 | correct: "a", 25 | }, 26 | { 27 | question: "What year was JavaScript launched?", 28 | a: "1996", 29 | b: "1995", 30 | c: "1994", 31 | d: "none of the above", 32 | correct: "b", 33 | }, 34 | ]; 35 | 36 | const quiz = document.getElementById('quiz') 37 | const answerEls = document.querySelectorAll('.answer') 38 | const questionEl = document.getElementById('question') 39 | const a_text = document.getElementById('a_text') 40 | const b_text = document.getElementById('b_text') 41 | const c_text = document.getElementById('c_text') 42 | const d_text = document.getElementById('d_text') 43 | const submitBtn = document.getElementById('submit') 44 | 45 | let currentQuiz = 0 46 | let score = 0 47 | 48 | loadQuiz() 49 | function loadQuiz(){ 50 | let currentQuizData = quizData[currentQuiz]; 51 | questionEl.innerHTML = currentQuizData.question; 52 | a_text.innerHTML = currentQuizData.a; 53 | b_text.innerText = currentQuizData.b 54 | c_text.innerText = currentQuizData.c 55 | d_text.innerText = currentQuizData.d 56 | resetAns(); 57 | 58 | } 59 | 60 | function selected(){ 61 | let ans = ""; 62 | answerEls.forEach(answer => { 63 | if(answer.checked){ 64 | //check the console the answer is stored in 'id' key of the nodelist console.log(answerEls); 65 | ans = answer.id; 66 | } 67 | }); 68 | return ans; 69 | } 70 | 71 | 72 | //currently the option selected for one slides keeps there for the next slide also so making this new resetAns function to clear the selected response from the previous slide before the next slide is loaded 73 | 74 | function resetAns(){ 75 | answerEls.forEach((answer) => { 76 | if(answer.checked){ 77 | answer.checked = false; 78 | } 79 | }) 80 | } 81 | 82 | submitBtn.addEventListener('click', () => { 83 | let answer = selected(); 84 | if(answer === quizData[currentQuiz].correct){ 85 | score++; 86 | } 87 | 88 | currentQuiz++; 89 | 90 | if(currentQuiz < quizData.length){ 91 | loadQuiz() 92 | }else{ 93 | quiz.innerHTML = ` 94 |

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

    95 | 96 | `; 97 | } 98 | }) 99 | -------------------------------------------------------------------------------- /quiz-app/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Heebo:300&display=swap'); 2 | 3 | body{ 4 | background-color: rgb(154, 158, 189); 5 | font-family: 'Heebo', sans-serif; 6 | display: flex; 7 | align-items: center; 8 | justify-content: center; 9 | height: 100vh; 10 | overflow: hidden; 11 | margin: 0; 12 | } 13 | .header{ 14 | color: white; 15 | } 16 | 17 | 18 | .quiz-container { 19 | background-color: #fff; 20 | border-radius: 10px; 21 | box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 8px 16px rgba(0, 0, 0, .1); 22 | width: 600px; 23 | overflow: hidden; 24 | } 25 | 26 | .quiz-header { 27 | padding: 4rem; 28 | } 29 | 30 | h2 { 31 | padding: 1rem; 32 | text-align: center; 33 | margin: 0; 34 | } 35 | 36 | ul { 37 | list-style-type: none; 38 | padding: 0; 39 | } 40 | 41 | ul li { 42 | font-size: 1.2rem; 43 | margin: 1rem 0; 44 | } 45 | 46 | ul li label { 47 | cursor: pointer; 48 | } 49 | 50 | button { 51 | background-color: #6d53e4; 52 | color: #fff; 53 | border: none; 54 | display: block; 55 | width: 100%; 56 | cursor: pointer; 57 | font-size: 1.1rem; 58 | font-family: inherit; 59 | padding: 1.3rem; 60 | } 61 | 62 | button:hover { 63 | background-color: #2232c2; 64 | } 65 | 66 | button:focus { 67 | outline: none; 68 | background-color: #3169b3; 69 | } 70 | -------------------------------------------------------------------------------- /random-choice-picker/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | The Random Choice Picker 11 | 12 | 13 | 14 | 15 |
    16 |

    The Random Choice Picker

    17 |

    Add --> Adding options

    18 |

    Answer --> Display randomly selected option

    19 |
    20 | 21 |
    22 | 23 | 24 | 25 | 26 |
    27 | 28 | 29 |
    30 | 31 |
    32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /random-choice-picker/script.js: -------------------------------------------------------------------------------- 1 | let task = document.getElementById('task'); 2 | let alltasks = document.getElementById('alltasks'); 3 | let result = document.getElementById('result'); 4 | 5 | 6 | function display(){ 7 | 8 | let a = task.value; 9 | if(a != ''){ 10 | let item = document.createElement('li'); 11 | item.classList.add('item'); 12 | item.innerHTML = a; 13 | alltasks.append(item); 14 | let l = document.querySelectorAll('.item'); 15 | }else{ 16 | alert('Enter a value to continue'); 17 | } 18 | } 19 | 20 | function displayAnswer(){ 21 | let alltasks1 = document.querySelectorAll('.item'); 22 | let l1 = alltasks1.length; 23 | result.innerHTML = `Your randomly selected option is
    ${alltasks1[Math.floor(Math.random() * (l1-1))].innerHTML}`; 24 | } 25 | -------------------------------------------------------------------------------- /random-choice-picker/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Heebo:300&display=swap'); 2 | 3 | body{ 4 | background-color: rgb(34, 34, 82); 5 | font-family: 'Heebo', sans-serif; 6 | } 7 | .header{ 8 | margin-left: auto; 9 | margin-right: auto; 10 | text-align: center; 11 | color: white; 12 | } 13 | #app{ 14 | top: 50%; 15 | left: 50%; 16 | position: absolute; 17 | transform: translate(-50%, -50%); 18 | } 19 | #task{ 20 | padding: 2vh; 21 | background-color: white; 22 | border: 2.5px solid black; 23 | outline: 1px solid white; 24 | } 25 | #btn{ 26 | height: 7vh; 27 | width: 10vh; 28 | cursor: pointer; 29 | background-color: white; 30 | border: 2.5px solid black; 31 | outline: 1px solid white; 32 | } 33 | #btn1{ 34 | height: 7vh; 35 | width: 41vh; 36 | cursor: pointer; 37 | background-color: white; 38 | border: 2.5px solid black; 39 | outline: 1px solid white; 40 | } 41 | #alltasks{ 42 | margin: 2vh; 43 | } 44 | li{ 45 | list-style-type: none; 46 | color: white; 47 | } 48 | 49 | #result{ 50 | margin-top: 5vh; 51 | color: white; 52 | } 53 | -------------------------------------------------------------------------------- /random-image-feed/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | GitHub Finder 12 | 13 | 14 | 15 |
    16 | 17 |
    18 |

    Random Dog Images Gallery API

    19 |
    20 | 21 |
    22 | 23 | 24 |
    25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /random-image-feed/script.js: -------------------------------------------------------------------------------- 1 | async function gUser(){ 2 | let a = await fetch('https://dog.ceo/api/breeds/image/random'); 3 | let b = await a.json(); 4 | console.log(b); 5 | createDog(b.message); 6 | } 7 | 8 | 9 | let output = document.getElementById('output'); 10 | 11 | function createDog(url){ 12 | let a = document.createElement('img'); 13 | a.src = url; 14 | output.appendChild(a); 15 | } 16 | 17 | 18 | for(let i = 0; i < 20; i++){ 19 | gUser(); 20 | } 21 | -------------------------------------------------------------------------------- /random-image-feed/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: white; 3 | } 4 | .header{ 5 | text-align: center; 6 | background-color: white; 7 | padding: 5vh; 8 | } 9 | #output{ 10 | display: flex; 11 | justify-content: center; 12 | flex-wrap: wrap; 13 | } 14 | img{ 15 | margin: 2vh; 16 | height: 40vh; 17 | width: 40vh; 18 | border-radius: 10px; 19 | } 20 | -------------------------------------------------------------------------------- /ripple-effect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Ripple Effect 12 | 13 | 14 | 15 | 16 |
    17 |

    Ripple Effect

    18 |
    19 | 20 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /ripple-effect/script.js: -------------------------------------------------------------------------------- 1 | let buttons = document.querySelectorAll('.ripple'); 2 | 3 | buttons.forEach(button => { 4 | button.addEventListener('click', function(e){ 5 | 6 | let x = e.clientX; 7 | let y = e.clientY; 8 | 9 | let a = e.target.offsetTop; 10 | let b = e.target.offsetLeft; 11 | 12 | let insideLeft = x-b; 13 | let insideTop = y-a; 14 | console.log(insideTop, insideLeft); 15 | 16 | let circle = document.createElement('span'); 17 | circle.classList.add('circle'); 18 | circle.style.left = insideLeft + "px"; 19 | circle.style.top = insideTop + "px"; 20 | this.appendChild(circle); 21 | 22 | setTimeout(() => circle.remove(), 500); 23 | 24 | }) 25 | }) 26 | -------------------------------------------------------------------------------- /ripple-effect/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap'); 2 | 3 | body{ 4 | background-color: #5d7a96; 5 | font-family: 'Roboto Mono', monospace; 6 | display: flex; 7 | flex-direction: column; 8 | align-items: center; 9 | justify-content: center; 10 | } 11 | .header{ 12 | top: 50%; 13 | left: 50%; 14 | color: white; 15 | } 16 | button:focus{ 17 | outline: none; 18 | } 19 | button{ 20 | margin-top: 30vh; 21 | color: white; 22 | background-color: rgb(7, 82, 105); 23 | border-radius: 5px; 24 | border: none; 25 | padding: 2.5vh; 26 | width: 25vh; 27 | cursor: pointer; 28 | position: relative; 29 | overflow: hidden; 30 | } 31 | .circle{ 32 | background-color: white; 33 | width: 120px; 34 | height: 120px; 35 | z-index: 1; 36 | border-radius: 50%; 37 | position: absolute; 38 | transform: translate(-50%, -50%) scale(0); 39 | animation: ripple 0.5s ease-in; 40 | } 41 | @keyframes ripple { 42 | to{ 43 | transform: translate(-50%, -50%) scale(4); 44 | opacity: 0; 45 | } 46 | } 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /rotating-nav-animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Rotating Navigation 9 | 10 | 11 |
    12 |
    13 |
    14 | 17 | 20 |
    21 |
    22 | 23 |
    24 |

    Amazing Article

    25 | Florin Pop 26 |

    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.

    27 | 28 |

    My Dog

    29 | doggy 30 |

    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?

    31 |
    32 |
    33 | 34 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /rotating-nav-animation/script.js: -------------------------------------------------------------------------------- 1 | let open = document.getElementById('open') 2 | let close = document.getElementById('close') 3 | let container = document.querySelector('.container') 4 | 5 | open.addEventListener('click', () => container.classList.add('show-nav')) 6 | 7 | close.addEventListener('click', () => container.classList.remove('show-nav')) 8 | -------------------------------------------------------------------------------- /rotating-nav-animation/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Lato&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: 'Lato', sans-serif; 9 | background-color: #333; 10 | color: #222; 11 | overflow-x: hidden; 12 | margin: 0; 13 | } 14 | 15 | .container { 16 | background-color: #fafafa; 17 | transform-origin: top left; 18 | transition: transform 0.5s linear; 19 | width: 100vw; 20 | min-height: 100vh; 21 | padding: 50px; 22 | } 23 | 24 | .container.show-nav { 25 | transform: rotate(-20deg); 26 | } 27 | 28 | .circle-container { 29 | position: fixed; 30 | top: -100px; 31 | left: -100px; 32 | } 33 | 34 | .circle { 35 | background-color: #ff7979; 36 | height: 200px; 37 | width: 200px; 38 | border-radius: 50%; 39 | position: relative; 40 | transition: transform 0.5s linear; 41 | } 42 | 43 | .container.show-nav .circle { 44 | transform: rotate(-70deg); 45 | } 46 | 47 | .circle button { 48 | cursor: pointer; 49 | position: absolute; 50 | top: 50%; 51 | left: 50%; 52 | height: 100px; 53 | background: transparent; 54 | border: 0; 55 | font-size: 26px; 56 | color: #fff; 57 | } 58 | 59 | .circle button:focus { 60 | outline: none; 61 | } 62 | 63 | .circle button#open { 64 | left: 60%; 65 | } 66 | 67 | .circle button#close { 68 | top: 60%; 69 | transform: rotate(90deg); 70 | transform-origin: top left; 71 | } 72 | 73 | .container.show-nav + nav li { 74 | transform: translateX(0); 75 | transition-delay: 0.3s; 76 | } 77 | 78 | nav { 79 | position: fixed; 80 | bottom: 40px; 81 | left: 0; 82 | z-index: 100; 83 | } 84 | 85 | nav ul { 86 | list-style-type: none; 87 | padding-left: 30px; 88 | } 89 | 90 | nav ul li { 91 | text-transform: uppercase; 92 | color: #fff; 93 | margin: 40px 0; 94 | transform: translateX(-100%); 95 | transition: transform 0.4s ease-in; 96 | } 97 | 98 | nav ul li i { 99 | font-size: 20px; 100 | margin-right: 10px; 101 | } 102 | 103 | nav ul li + li { 104 | margin-left: 15px; 105 | transform: translateX(-150%); 106 | } 107 | 108 | nav ul li + li + li { 109 | margin-left: 30px; 110 | transform: translateX(-200%); 111 | } 112 | 113 | .content img { 114 | max-width: 100%; 115 | } 116 | 117 | .content { 118 | max-width: 1000px; 119 | margin: 50px auto; 120 | } 121 | 122 | .content h1 { 123 | margin: 0; 124 | } 125 | 126 | .content small { 127 | color: #555; 128 | font-style: italic; 129 | } 130 | 131 | .content p { 132 | color: #333; 133 | line-height: 1.5; 134 | } 135 | -------------------------------------------------------------------------------- /scroll-animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Scroll Animation 12 | 13 | 14 | 15 |
    16 |

    Scroll Animation

    17 |
    18 |
    19 |
    20 |
    21 |
    22 |
    23 |
    24 |
    25 |
    26 |
    27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /scroll-animation/script.js: -------------------------------------------------------------------------------- 1 | let boxes = document.querySelectorAll('.box'); 2 | 3 | window.addEventListener('scroll', change); 4 | 5 | function change(){ 6 | let changer = window.innerHeight * 0.75; 7 | 8 | boxes.forEach(box => { 9 | let boxtop = box.getBoundingClientRect().top; 10 | 11 | if(boxtop < changer){ 12 | box.classList.add('active'); 13 | }else{ 14 | box.classList.remove('active'); 15 | } 16 | 17 | }); 18 | 19 | 20 | } 21 | change(); 22 | -------------------------------------------------------------------------------- /scroll-animation/style.css: -------------------------------------------------------------------------------- 1 | .box{ 2 | height: 25vh; 3 | width: 45vh; 4 | margin: 2vh; 5 | background-color: yellowgreen; 6 | margin-left: auto; 7 | margin-right: auto; 8 | transform: translateX(400%); 9 | transition: transform 0.5s ease; 10 | } 11 | h1{ 12 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 13 | text-align: center; 14 | } 15 | .box:nth-of-type(even){ 16 | transform: translateX(-400%); 17 | } 18 | .box.active{ 19 | transform: translateX(0); 20 | } 21 | 22 | -------------------------------------------------------------------------------- /sound-board/applause.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanchit0496/javascript-mini-projects/077f1352250daf846488009b31f5f0902bfa7fcb/sound-board/applause.mp3 -------------------------------------------------------------------------------- /sound-board/boo.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanchit0496/javascript-mini-projects/077f1352250daf846488009b31f5f0902bfa7fcb/sound-board/boo.mp3 -------------------------------------------------------------------------------- /sound-board/gasp.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanchit0496/javascript-mini-projects/077f1352250daf846488009b31f5f0902bfa7fcb/sound-board/gasp.mp3 -------------------------------------------------------------------------------- /sound-board/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Sound Board 12 | 13 | 14 | 15 |
    16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
    25 | 26 |
    27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /sound-board/script.js: -------------------------------------------------------------------------------- 1 | let sounds = ['applause', 'boo', 'gasp', 'tada', 'victory', 'wrong']; 2 | 3 | let count = 0; 4 | 5 | sounds.forEach(sound => { 6 | let btn = document.createElement('button'); 7 | btn.classList.add('sound'); 8 | btn.innerHTML = sound; 9 | 10 | btn.addEventListener('click', () => { 11 | count++; 12 | if(count % 2 == 1){ 13 | document.getElementById(sound).play(); 14 | }else{ 15 | pauseSong(); 16 | } 17 | 18 | }); 19 | 20 | document.getElementById('buttons').appendChild(btn); 21 | 22 | }); 23 | 24 | 25 | function pauseSong(){ 26 | sounds.forEach(sound => { 27 | let a = document.getElementById(sound); 28 | a.pause(); 29 | }); 30 | } 31 | -------------------------------------------------------------------------------- /sound-board/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: rgb(245, 232, 207); 3 | } 4 | #buttons{ 5 | position: absolute; 6 | top: 50%; 7 | left: 50%; 8 | transform: translate(-50%, -50%); 9 | } 10 | .sound{ 11 | display: flex; 12 | flex-direction: column; 13 | width: 25vh; 14 | height: 10vh; 15 | margin: 1vh; 16 | justify-content: center; 17 | align-items: center; 18 | background-color: lightsteelblue; 19 | border: 2px solid blue; 20 | font-size: 2.5vh; 21 | font-weight: 600; 22 | font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; 23 | } 24 | -------------------------------------------------------------------------------- /sound-board/tada.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanchit0496/javascript-mini-projects/077f1352250daf846488009b31f5f0902bfa7fcb/sound-board/tada.mp3 -------------------------------------------------------------------------------- /sound-board/victory.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanchit0496/javascript-mini-projects/077f1352250daf846488009b31f5f0902bfa7fcb/sound-board/victory.mp3 -------------------------------------------------------------------------------- /sound-board/wrong.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanchit0496/javascript-mini-projects/077f1352250daf846488009b31f5f0902bfa7fcb/sound-board/wrong.mp3 -------------------------------------------------------------------------------- /split-landing-page/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | The Split Landing Page 11 | 12 | 13 | 14 |
    15 | 16 |
    17 |

    Playstation 5

    18 | Buy Now 19 |
    20 | 21 |
    22 |

    X Box

    23 | Buy Now 24 |
    25 | 26 |
    27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /split-landing-page/ps.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanchit0496/javascript-mini-projects/077f1352250daf846488009b31f5f0902bfa7fcb/split-landing-page/ps.jpg -------------------------------------------------------------------------------- /split-landing-page/script.js: -------------------------------------------------------------------------------- 1 | let left = document.querySelector('.left'); 2 | let right = document.querySelector('.right'); 3 | let container = document.querySelector('.container'); 4 | 5 | left.addEventListener('mouseenter', () => { 6 | container.classList.add('hover-left'); 7 | }) 8 | left.addEventListener('mouseleave', () => { 9 | container.classList.remove('hover-left'); 10 | }) 11 | 12 | right.addEventListener('mouseenter', () => { 13 | container.classList.add('hover-right'); 14 | }) 15 | right.addEventListener('mouseleave', () => { 16 | container.classList.remove('hover-right'); 17 | }) 18 | -------------------------------------------------------------------------------- /split-landing-page/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); 2 | 3 | *{ 4 | box-sizing: border-box; 5 | } 6 | :root{ 7 | --left-bg-color: linear-gradient( 8 | rgba(87, 84, 236, 0.8), 9 | rgba(87, 84, 236, 0.8) 10 | ); 11 | --right-bg-color: linear-gradient( 12 | rgba(28, 122, 28, 0.8), 13 | rgba(28, 122, 28, 0.8) 14 | ); 15 | --left-btn-hover-color: rgba(87, 84, 236, 1); 16 | --right-btn-hover-color: rgba(28, 122, 28, 1); 17 | --hover-width: 75%; 18 | --other-width: 25%; 19 | --speed: 1000ms; 20 | } 21 | .split.left, .split.right, .split.left::before, .split.right::before{ 22 | transition: all var(--speed) ease-in-out; 23 | } 24 | body{ 25 | font-family: 'Roboto', sans-serif; 26 | height: 100vh; 27 | overflow: hidden; 28 | margin: 0; 29 | } 30 | h1{ 31 | font-family: 'Roboto', sans-serif; 32 | color: white; 33 | height: 100vh; 34 | overflow: hidden; 35 | margin: 0; 36 | position: absolute; 37 | left: 50%; 38 | top: 20%; 39 | white-space: nowrap; 40 | transform: translateX(-50%); 41 | font-size: 4rem; 42 | } 43 | .btn { 44 | position: absolute; 45 | display: flex; 46 | align-items: center; 47 | justify-content: center; 48 | left: 50%; 49 | top: 40%; 50 | transform: translateX(-50%); 51 | text-decoration: none; 52 | color: #fff; 53 | border: #fff solid 0.2rem; 54 | font-size: 1rem; 55 | font-weight: bold; 56 | text-transform: uppercase; 57 | width: 15rem; 58 | padding: 1.5rem; 59 | } 60 | .container{ 61 | position: relative; 62 | width: 100%; 63 | height: 100%; 64 | background-color: #333; 65 | } 66 | .split{ 67 | position: absolute; 68 | width: 50%; 69 | height: 100%; 70 | overflow: hidden; 71 | } 72 | .split.left{ 73 | left: 0; 74 | background: url('ps.jpg'); 75 | background-repeat: no-repeat; 76 | background-size: cover; 77 | } 78 | .split.left::before{ 79 | content: ''; 80 | position: absolute; 81 | width: 100%; 82 | height: 100%; 83 | background: var(--left-bg-color); 84 | } 85 | .split.right{ 86 | right: 0; 87 | background: url('xbox.jpg'); 88 | background-repeat: no-repeat; 89 | background-size: cover; 90 | } 91 | 92 | .split.right::before{ 93 | content: ''; 94 | position: absolute; 95 | width: 100%; 96 | height: 100%; 97 | background: var(--right-bg-color); 98 | } 99 | .split.left .btn:hover{ 100 | background-color: var(--left-btn-hover-color); 101 | border-color: var(--left-btn-hover-color); 102 | } 103 | .split.right .btn:hover{ 104 | background-color: var(--right-btn-hover-color); 105 | border-color: var(--right-btn-hover-color); 106 | } 107 | .hover-left .left{ 108 | width: var(--hover-width); 109 | } 110 | .hover-left .right{ 111 | width: var(--other-width); 112 | } 113 | .hover-right .left{ 114 | width: var(--other-width); 115 | } 116 | .hover-right .right{ 117 | width: var(--hover-width); 118 | } 119 | -------------------------------------------------------------------------------- /split-landing-page/xbox.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanchit0496/javascript-mini-projects/077f1352250daf846488009b31f5f0902bfa7fcb/split-landing-page/xbox.jpg -------------------------------------------------------------------------------- /testimonial-box-switcher/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | The Testimonial Box Switcher 12 | 13 | 14 | 15 | 16 |
    17 | 18 |
    19 |
    20 |
    21 |
    22 |
    23 |
    24 |
    25 |
    26 |
    27 |
    28 |
    29 |
    30 |
    31 |
    32 | 33 |
    34 | 35 |
    36 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /testimonial-box-switcher/script.js: -------------------------------------------------------------------------------- 1 | let output = document.getElementById('output'); 2 | 3 | let message = document.getElementById('message'); 4 | let one = document.getElementById('one'); 5 | let name1 = document.getElementById('name'); 6 | let position1 = document.getElementById('position'); 7 | 8 | const testimonials = [ 9 | { 10 | name: 'Miyah Myles', 11 | position: 'Marketing', 12 | photo: 13 | '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', 14 | text: 15 | "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.", 16 | }, 17 | { 18 | name: 'June Cha', 19 | position: 'Software Engineer', 20 | photo: 'https://randomuser.me/api/portraits/women/44.jpg', 21 | text: 22 | '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!', 23 | }, 24 | { 25 | name: 'Iida Niskanen', 26 | position: 'Data Entry', 27 | photo: 'https://randomuser.me/api/portraits/women/68.jpg', 28 | text: 29 | "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.", 30 | }, 31 | { 32 | name: 'Renee Sims', 33 | position: 'Receptionist', 34 | photo: 'https://randomuser.me/api/portraits/women/65.jpg', 35 | text: 36 | "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.", 37 | }, 38 | { 39 | name: 'Jonathan Nunfiez', 40 | position: 'Graphic Designer', 41 | photo: 'https://randomuser.me/api/portraits/men/43.jpg', 42 | text: 43 | "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!", 44 | }, 45 | { 46 | name: 'Sasha Ho', 47 | position: 'Accountant', 48 | photo: 49 | 'https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?h=350&auto=compress&cs=tinysrgb', 50 | text: 51 | '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!', 52 | }, 53 | { 54 | name: 'Veeti Seppanen', 55 | position: 'Director', 56 | photo: 'https://randomuser.me/api/portraits/men/97.jpg', 57 | text: 58 | '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.', 59 | }, 60 | ] 61 | 62 | let count = 0; 63 | 64 | function change(){ 65 | message.innerHTML = testimonials[count].text; 66 | name1.innerHTML = testimonials[count].name; 67 | position1.innerHTML = testimonials[count].position; 68 | message.innerHTML = testimonials[count].text; 69 | one.innerHTML = ` 70 | 71 | `; 72 | count++; 73 | if(count >= testimonials.length){ 74 | count = 0; 75 | } 76 | } 77 | setInterval(change, 5000); 78 | change(); 79 | -------------------------------------------------------------------------------- /testimonial-box-switcher/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Montserrat'); 2 | 3 | *{ 4 | margin: 0; 5 | } 6 | body{ 7 | background-color: #f4f4f4; 8 | } 9 | #app{ 10 | position: absolute; 11 | top: 50%; 12 | left: 50%; 13 | transform: translate(-50%, -50%); 14 | color: white; 15 | } 16 | hr{ 17 | margin-top: 4vh; 18 | } 19 | #about{ 20 | padding: 0vh; 21 | display: flex; 22 | flex-direction: row; 23 | align-items: center; 24 | } 25 | #output{ 26 | font-family: 'Montserrat', sans-serif; 27 | background-color: #476ce4; 28 | padding: 5vh; 29 | border-radius: 10px; 30 | } 31 | img{ 32 | margin-top: 4vh; 33 | margin-left: 25vh; 34 | border-radius: 50%; 35 | height: 15vh; 36 | width: 15vh; 37 | object-fit: cover; 38 | } 39 | #two{ 40 | padding-left: 5vh; 41 | } 42 | #name{ 43 | font-weight: 600; 44 | } 45 | #message{ 46 | line-height: 28px; padding-top: 2vh; 47 | } 48 | 49 | #progressbar{ 50 | background-color: white; 51 | width: 100vh; 52 | height: 0.5vh; 53 | transform-origin: left; 54 | animation: grow 5s linear infinite; 55 | } 56 | 57 | @keyframes grow { 58 | 0%{ 59 | transform: scaleX(0); 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /theme-clock/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | The Clock 11 | 12 | 13 |
    14 |
    15 |
    16 |
    17 |
    18 |
    19 |
    20 |
    21 |
    22 | 23 |
    24 |
    25 |
    26 |
    27 |
    :
    28 |
    29 |
    30 | 31 |
    32 | 33 |
    34 |
    :
    35 |
    36 |
    :
    37 |
    38 | 39 |
    40 | 41 |
    42 | 43 |
    44 |
    45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /theme-clock/script.js: -------------------------------------------------------------------------------- 1 | let secC = document.getElementById('second'); 2 | let minC = document.getElementById('minute'); 3 | let hourC = document.getElementById('hour'); 4 | let night = document.getElementById('night'); 5 | let all = document.getElementById('all'); 6 | 7 | let h = document.getElementById('h'); 8 | let m = document.getElementById('m'); 9 | let s = document.getElementById('s'); 10 | let span = document.getElementById('span'); 11 | let datecss = document.getElementById('date'); 12 | 13 | 14 | function clock(){ 15 | var d = new Date(); 16 | var hour = d.getHours(); 17 | var minute = d.getMinutes(); 18 | var second = d.getSeconds(); 19 | 20 | hDeg = hour * 30 + minute * (360/720); 21 | mDeg = minute * 6 + second * (360/3600); 22 | sDeg = second * 6; 23 | 24 | console.log(hDeg, mDeg, sDeg); 25 | 26 | secC.style.transform = `rotate(${sDeg}deg)`; 27 | minC.style.transform = `rotate(${mDeg}deg)`; 28 | hourC.style.transform = `rotate(${hDeg}deg)`; 29 | 30 | } 31 | function displayDates(){ 32 | 33 | var dateObj = new Date(); 34 | var date = dateObj.getDate() 35 | var month = dateObj.getUTCMonth(); 36 | var day = dateObj.getDay(); 37 | var year = dateObj.getUTCFullYear(); 38 | 39 | const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" 40 | ]; 41 | const dayName = ["Sunday", "Monday","Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; 42 | 43 | document.getElementById('day').innerHTML = date; 44 | document.getElementById('month').innerHTML = monthNames[month]; 45 | document.getElementById('year').innerHTML = year; 46 | document.getElementById('dayname').innerHTML = dayName[day]; 47 | 48 | } 49 | function displayClock(){ 50 | var d = new Date(); 51 | var hour = d.getHours(); 52 | var minute = d.getMinutes(); 53 | var second = d.getSeconds(); 54 | 55 | if(hour < 10){ 56 | document.getElementById('h').innerHTML = "0" + hour; 57 | }else{ 58 | document.getElementById('h').innerHTML = hour; 59 | } 60 | 61 | if(minute < 10){ 62 | document.getElementById('m').innerHTML = "0" + minute; 63 | }else{ 64 | document.getElementById('m').innerHTML = minute; 65 | } 66 | 67 | if(second < 10){ 68 | document.getElementById('s').innerHTML = "0" + second; 69 | }else{ 70 | document.getElementById('s').innerHTML = second; 71 | } 72 | window.setInterval(displayClock, 1000); 73 | } 74 | 75 | //this can be optimised by creating classes and using toggle 76 | let count = 1; 77 | 78 | night.addEventListener('click', () => { 79 | count++; 80 | if(count % 2 == 1){ 81 | //normal 82 | all.style.backgroundColor = "white"; 83 | h.style.color = "black"; 84 | m.style.color = "black"; 85 | s.style.color = "black"; 86 | span.style.color = "black"; 87 | datecss.style.color = "black"; 88 | night.style.backgroundColor = "white"; 89 | night.style.color = "black"; 90 | night.style.borderColor = "black"; 91 | night.innerHTML = "Light Mode"; 92 | }else if(count % 2 == 0){ 93 | //night 94 | all.style.backgroundColor = "black"; 95 | h.style.color = "white"; 96 | m.style.color = "white"; 97 | s.style.color = "white"; 98 | span.style.color = "white"; 99 | datecss.style.color = "white"; 100 | night.style.backgroundColor = "black"; 101 | night.style.color = "white"; 102 | night.style.borderColor = "white"; 103 | night.innerHTML = "Night Mode"; 104 | } 105 | }); 106 | displayDates(); 107 | displayClock(); 108 | setInterval(clock, 1000); 109 | -------------------------------------------------------------------------------- /theme-clock/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Heebo:300&display=swap'); 2 | *{ 3 | margin: 0; 4 | } 5 | body{ 6 | font-family: 'Heebo', sans-serif; 7 | } 8 | #all{ 9 | background-color: white; 10 | height: 100vh; 11 | width: 100vw; 12 | transition: all 0.5s ease-in; 13 | vertical-align: none; 14 | top: 50%; 15 | left: 50%; 16 | position: absolute; 17 | transform: translate(-50%, -50%); 18 | } 19 | #app{ 20 | top: 50%; 21 | left: 50%; 22 | position: absolute; 23 | transform: translate(-50%, -50%); 24 | } 25 | .needle{ 26 | transform-origin: bottom right; 27 | position: absolute; 28 | } 29 | .clock{ 30 | transform: rotate(90deg); 31 | margin-bottom: 45vh; 32 | background-color: red; 33 | } 34 | .hour{ 35 | width: 145px; 36 | height:3.5px; 37 | background-color:#333; 38 | transform: translate(-50%, -100%) rotate(0deg); 39 | } 40 | .minute{ 41 | width: 145px; 42 | height:2px; 43 | background-color:#666; 44 | transform: translate(-50%, -100%) rotate(0deg); 45 | } 46 | .second{ 47 | width: 145px; 48 | height:1px; 49 | background-color: #e74c3c; 50 | transform: translate(-50%, -100%) rotate(0deg); 51 | } 52 | .cp{ 53 | transform: translate(-50%, -50%) rotate(0deg); 54 | background-color: white; 55 | border: 2px solid #e74c3c; 56 | height: 8px; 57 | width: 8px; 58 | top: 50%; 59 | left: 50%; 60 | position: absolute; 61 | margin-left: 22.5vh; 62 | margin-top: 0.2vh; 63 | border-radius: 50%; 64 | transform: translate(-50%, -100); 65 | } 66 | #day, #month, #year, #dayname{ 67 | padding: 2vh; 68 | font-size: 5vh; 69 | } 70 | #date{ 71 | text-align: center; 72 | justify-content: center; 73 | align-items: center; 74 | color:black; 75 | display:flex; 76 | flex-direction: row; 77 | } 78 | .span1{ 79 | font-size: 5vh; 80 | padding: 1vh; 81 | } 82 | #h, #m, #s, .span{ 83 | font-size: 5vh; 84 | padding: 1vh; 85 | } 86 | #clk{ 87 | display: flex; 88 | flex-direction: row; 89 | justify-content: center; 90 | } 91 | .nightm{ 92 | padding-top: 60vh; 93 | text-align: center; 94 | } 95 | #night{ 96 | padding: 2vh; 97 | border: 2px solid black; 98 | border-radius: 5px; 99 | background-color: white; 100 | cursor: pointer; 101 | } 102 | #night:focus{ 103 | outline: none; 104 | } 105 | -------------------------------------------------------------------------------- /to-do-list/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Task List 10 | 11 | 12 | 13 |
    14 |

    ToDo List

    15 |
    Using Vanilla JS and Local Storage
    16 |
    17 | 18 |
    19 |
    20 |
    21 |
    22 |
    23 | Task List 24 |
    25 |
    26 |
    27 | 28 | 29 |
    30 | 31 |
    32 |
    33 |
    34 |
    35 |
    Tasks
    36 |
    37 | 38 | 39 |
    40 |
      41 | Clear Tasks 42 |
      43 |
      44 |
      45 |
      46 |
      47 | 48 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /to-do-list/script.js: -------------------------------------------------------------------------------- 1 | //defining variables 2 | const form = document.querySelector('#task-form'); 3 | const taskList = document.querySelector('.collection'); 4 | const clearBtn = document.querySelector('.clear-tasks'); 5 | const filter = document.querySelector('#filter'); 6 | const taskInput = document.querySelector('#task'); 7 | 8 | //loading the event listeners 9 | loadEventListeners(); 10 | 11 | //creating the loadEventListener function 12 | function loadEventListeners(){ 13 | document.addEventListener('DOMContentLoaded', getTasks); 14 | form.addEventListener('submit', addTask); 15 | taskList.addEventListener('click', removeTask); 16 | clearBtn.addEventListener('click', clearTasks); 17 | filter.addEventListener('keyup', filterTasks); 18 | } 19 | 20 | //funtion to get task from the local storage 21 | function getTasks(){ 22 | 23 | let tasks; 24 | if(localStorage.getItem('tasks') === null){ 25 | tasks = []; 26 | }else{ 27 | tasks = JSON.parse(localStorage.getItem('tasks')); 28 | } 29 | 30 | tasks.forEach(function(task){ 31 | //creating element 32 | const li = document.createElement('li'); 33 | //adding classname 34 | li.className = 'collection-item'; 35 | //creating a text node 36 | const t = document.createTextNode(task); 37 | //adding to the li 38 | li.appendChild(t); 39 | 40 | 41 | //creating logo of remove 42 | const logo = document.createElement('a'); 43 | //adding class 44 | logo.className = 'delete-item secondary-content'; 45 | //adding the icon html 46 | logo.innerHTML = ''; 47 | //append the logo to li 48 | li.appendChild(logo); 49 | 50 | 51 | //appending task created to tasklist 52 | taskList.appendChild(li); 53 | }); 54 | 55 | } 56 | 57 | 58 | //adding task 59 | function addTask(e){ 60 | 61 | if(taskInput.value === ''){ 62 | alert("Add a task to perform"); 63 | } 64 | 65 | //creating element 66 | const li = document.createElement('li'); 67 | //adding classname 68 | li.className = 'collection-item'; 69 | //creating a text node 70 | const t = document.createTextNode(taskInput.value); 71 | //adding to the li 72 | li.appendChild(t); 73 | 74 | 75 | //creating logo of remove 76 | const logo = document.createElement('a'); 77 | //adding class 78 | logo.className = 'delete-item secondary-content'; 79 | //adding the icon html 80 | logo.innerHTML = ''; 81 | //append the logo to li 82 | li.appendChild(logo); 83 | 84 | 85 | //appending task created to tasklist 86 | taskList.appendChild(li); 87 | 88 | //adding to local storage 89 | storeTaskInLocalStorage(taskInput.value); 90 | 91 | //resetting the input to blank 92 | taskInput.value = ''; 93 | e.preventDefault(); 94 | 95 | } 96 | 97 | //store task in local storage 98 | function storeTaskInLocalStorage(task){ 99 | let tasks; 100 | if(localStorage.getItem('tasks') === null){ 101 | tasks = []; 102 | }else{ 103 | tasks = JSON.parse(localStorage.getItem('tasks')); 104 | } 105 | tasks.push(task); 106 | localStorage.setItem('tasks', JSON.stringify(tasks)); 107 | } 108 | 109 | //removing task 110 | function removeTask(e){ 111 | if(e.target.parentElement.classList.contains('delete-item')){ 112 | if(confirm("Do you want to delete this task")){ 113 | e.target.parentElement.parentElement.remove(); 114 | //removing from local storage 115 | removefromLocalStorage(e.target.parentElement.parentElement); 116 | } 117 | } 118 | } 119 | 120 | //function to remove from local storage 121 | function removefromLocalStorage(itemToRemove){ 122 | let tasks; 123 | if(localStorage.getItem('tasks') === null){ 124 | tasks = []; 125 | }else{ 126 | tasks = JSON.parse(localStorage.getItem('tasks')); 127 | } 128 | 129 | tasks.forEach(function(task, index){ 130 | if(itemToRemove.textContent === task){ 131 | tasks.splice(index,1); 132 | } 133 | }); 134 | localStorage.setItem('tasks', JSON.stringify(tasks)); 135 | } 136 | 137 | //clearing tasks 138 | function clearTasks(e){ 139 | while(taskList.firstChild){ 140 | taskList.firstChild.remove(); 141 | } 142 | //clearing from local storage 143 | localStorage.clear(); 144 | 145 | } 146 | 147 | //filter tasks 148 | function filterTasks(e){ 149 | 150 | const text = e.target.value.toLowerCase(); 151 | 152 | document.querySelectorAll('.collection-item').forEach(function(task){ 153 | //task is the iterator 154 | const item = task.firstChild.textContent; 155 | 156 | if(item.toLowerCase().indexOf(text) != -1){ 157 | task.style.display = 'block'; 158 | }else{ 159 | task.style.display = 'none'; 160 | } 161 | 162 | }); 163 | 164 | 165 | 166 | } 167 | -------------------------------------------------------------------------------- /to-do-list/style.css: -------------------------------------------------------------------------------- 1 | html{ 2 | background-color:#e8e8e8; 3 | } 4 | -------------------------------------------------------------------------------- /toast-notification/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Toast Notification 12 | 13 | 14 | 15 | 16 |
      17 |

      Toast Notification

      18 |
      19 | 20 |
      21 | 22 |
      23 |
      24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /toast-notification/script.js: -------------------------------------------------------------------------------- 1 | let buttons = document.querySelectorAll('.btn'); 2 | let notifs = document.getElementById('notifs'); 3 | 4 | let count = 0; 5 | buttons.forEach(button => { 6 | button.addEventListener('click', () => { 7 | count++; 8 | const notif = document.createElement('div') 9 | notif.classList.add('toast') 10 | notif.innerHTML = `Notification ${count}`; 11 | notifs.appendChild(notif) 12 | setTimeout( () => notif.remove(), 2000); 13 | 14 | }); 15 | }) 16 | -------------------------------------------------------------------------------- /toast-notification/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap'); 2 | 3 | body{ 4 | background-color: #5d7a96; 5 | font-family: 'Roboto Mono', monospace; 6 | } 7 | .header{ 8 | text-align: center; 9 | color: white; 10 | } 11 | #app{ 12 | top: 50%; 13 | left: 50%; 14 | transform: translate(-50%, -50%); 15 | position: absolute; 16 | } 17 | .btn{ 18 | background-color: #ffffff; 19 | color: rebeccapurple; 20 | font-family: inherit; 21 | font-weight: bold; 22 | padding: 1rem; 23 | border-radius: 5px; 24 | border: none; 25 | cursor: pointer; 26 | } 27 | .btn:focus{ 28 | outline: none; 29 | } 30 | #notifs{ 31 | position: absolute; 32 | display: flex; 33 | flex-direction: column; 34 | overflow: hidden; 35 | bottom: 0; 36 | right: 0; 37 | } 38 | .toast{ 39 | background-color: #ffffff; 40 | color: rebeccapurple; 41 | vertical-align: center; 42 | font-size: 2vh; 43 | padding: 4vh; 44 | border-radius: 5px; 45 | margin: 2vh; 46 | } 47 | 48 | 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /verify-account-ui/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | The Live User Filter 12 | 13 | 14 | 15 | 16 |
      17 |

      The Verify Account UI

      18 |
      19 | 20 |
      21 | 22 | 23 | 24 | 25 | 26 |
      27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /verify-account-ui/script.js: -------------------------------------------------------------------------------- 1 | let codes = document.querySelectorAll('.num'); 2 | 3 | codes[0].focus(); 4 | 5 | codes.forEach((code, i) => { 6 | code.addEventListener('keydown', (e) => { 7 | if(e.key >= 0 && e.key <= 9){ 8 | codes[i].value = ""; 9 | setTimeout(()=> codes[i+1].focus(), 10); 10 | }else if(e.key === 'Backspace'){ 11 | setTimeout(() => codes[i-1].focus(), 10); 12 | } 13 | }) 14 | }) 15 | -------------------------------------------------------------------------------- /verify-account-ui/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap'); 2 | 3 | body{ 4 | background-color: #5d7a96; 5 | font-family: 'Roboto Mono', monospace; 6 | } 7 | .header{ 8 | color: white; 9 | text-align: center; 10 | } 11 | #app{ 12 | position: absolute; 13 | top: 50%; 14 | left: 50%; 15 | transform: translate(-50%, -50%); 16 | display: flex; 17 | flex-direction: row; 18 | } 19 | .num{ 20 | width: 15vh; 21 | height: 15vh; 22 | align-items: center; 23 | text-align: center; 24 | font-size: 8vh; 25 | font-family: 'Roboto Mono', monospace; 26 | } 27 | --------------------------------------------------------------------------------