├── Animated navigation ├── .vscode │ └── settings.json ├── animated.html ├── script.js └── style.css ├── Background Slider ├── .vscode │ └── settings.json ├── index.html ├── script.js └── style.css ├── Blurry Loading ├── .vscode │ └── settings.json ├── index.html ├── script.js └── style.css ├── Button ripple effect ├── .vscode │ └── settings.json ├── index.html ├── script.js └── style.css ├── Clock ├── .vscode │ └── settings.json ├── face.png ├── index.html ├── script.js └── style.css ├── Content Placeholder ├── index.html ├── script.js └── style.css ├── Dad jokes ├── .vscode │ └── settings.json ├── index.html ├── script.js └── style.css ├── Drag n Drop ├── .vscode │ └── settings.json ├── index.html ├── script.js └── style.css ├── Drawing App ├── .vscode │ └── settings.json ├── index.html ├── script.js └── style.css ├── Drink water ├── .vscode │ └── settings.json ├── index.html ├── script.js └── style.css ├── Expanding cards ├── .vscode │ └── settings.json ├── img │ ├── img1.jpg │ ├── img2.jpg │ ├── img3.jpg │ ├── img4.png │ ├── img5.png │ └── img6.png ├── index.html ├── script.js └── style.css ├── FAQ ├── .vscode │ └── settings.json ├── index.html ├── script.js └── style.css ├── Form input wave ├── .vscode │ └── settings.json ├── index.html ├── script.js └── style.css ├── Github Profiles ├── index.html ├── script.js └── style.css ├── Hidden search widget ├── index.html ├── script.js └── style.css ├── Increment Counter ├── .vscode │ └── settings.json ├── index.html ├── script.js └── style.css ├── KeyCodes ├── .vscode │ └── settings.json ├── index.html ├── script.js └── style.css ├── Mini mani mo ├── .vscode │ └── settings.json ├── index.html ├── script.js └── style.css ├── Movie App ├── index.html ├── script.js └── style.css ├── Preset files ├── index.html ├── script.js └── style.css ├── Progress steps ├── .vscode │ └── settings.json ├── index.html ├── script.js └── style.css ├── README.md ├── Rotate slide effect ├── .vscode │ └── settings.json ├── index.html ├── script.js └── style.css ├── Scroll animation ├── .vscode │ └── settings.json ├── index.html ├── script.js └── style.css ├── Sound Board ├── .vscode │ └── settings.json ├── index.html ├── script.js ├── sounds │ ├── sound-board_sounds_applause.mp3 │ ├── sound-board_sounds_boo.mp3 │ ├── sound-board_sounds_gasp.mp3 │ ├── sound-board_sounds_tada.mp3 │ ├── sound-board_sounds_victory.mp3 │ └── sound-board_sounds_wrong.mp3 └── style.css ├── Split Landing page ├── .vscode │ └── settings.json ├── img │ ├── grand.jpg │ └── upright.jpg ├── index.html ├── script.js └── style.css ├── Sticky Navbar ├── index.html ├── script.js ├── style.css ├── style.css.map └── style.scss ├── Toast Notofication ├── index.html ├── script.js └── style.css ├── Vertical SLider ├── img │ ├── blackGirl.JPG │ ├── gold.JPG │ ├── mama.JPG │ ├── pupleDresss.JPG │ └── white wedding.JPG ├── index.html ├── script.js └── style.css ├── index.html └── kinetic loader ├── index.html ├── script.js └── style.css /Animated navigation/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.linkedEditing": true 3 | } -------------------------------------------------------------------------------- /Animated navigation/animated.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Animated Navigation 8 | 12 | 13 | 14 | 15 |
16 | 17 | 40 |
41 | 42 | 43 | -------------------------------------------------------------------------------- /Animated navigation/script.js: -------------------------------------------------------------------------------- 1 | const button = document.querySelector("#toggle"); 2 | const navigation = document.querySelector("#nav"); 3 | 4 | button.addEventListener("click", () => navigation.classList.toggle("active")); 5 | -------------------------------------------------------------------------------- /Animated navigation/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Muli&display=swap"); 2 | 3 | * { 4 | box-sizing: border-box; 5 | margin: 0; 6 | border: 0; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | font-family: "Muli", monospace; 12 | background-color: #092e00; 13 | color: #fefefe; 14 | font-size: 18px; 15 | } 16 | 17 | header { 18 | /* background-color: #041500; */ 19 | background-image: linear-gradient( 20 | to bottom, 21 | #041500 0%, 22 | #041500 50%, 23 | #051c00 50%, 24 | #051c00 100% 25 | ); 26 | display: flex; 27 | padding: 20px; 28 | box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.9); 29 | } 30 | 31 | /* .brand { 32 | font-size: 2.3em; 33 | font-weight: 700; 34 | } */ 35 | 36 | nav { 37 | display: flex; 38 | transition: width 0.6s linear; 39 | width: 50px; 40 | align-items: center; 41 | background-color: rgba(0, 0, 0, 0.1); 42 | } 43 | 44 | nav.active { 45 | width: auto; 46 | } 47 | ul { 48 | list-style: none; 49 | display: flex; 50 | width: 0; 51 | transition: width 0.6s linear; 52 | } 53 | ul li { 54 | opacity: 0; 55 | transform: rotateY(0deg); 56 | transition: transform 0.6s linear; 57 | transition: opacity 0.6s linear; 58 | } 59 | ul li a { 60 | color: inherit; 61 | margin: auto 10px; 62 | text-decoration: none; 63 | font-weight: bold; 64 | text-transform: uppercase; 65 | font-size: 1em; 66 | letter-spacing: 1px; 67 | position: relative; 68 | } 69 | 70 | nav.active ul { 71 | width: 100%; 72 | } 73 | 74 | nav.active ul li { 75 | opacity: 1; 76 | transform: rotateY(360deg); 77 | } 78 | 79 | .icon { 80 | cursor: pointer; 81 | position: relative; 82 | height: 35px; 83 | width: 35px; 84 | background-color: inherit; 85 | } 86 | 87 | .icon .line{ 88 | background-color: #2bd500; 89 | height: 2px; 90 | width: 25px; 91 | position: absolute; 92 | top: 10px; 93 | right: 5px; 94 | transition: transform 0.8s linear; 95 | } 96 | 97 | .icon .line2{ 98 | top: auto; 99 | bottom: 10px; 100 | } 101 | 102 | nav.active .icon .line1{ 103 | transform: rotate(-765deg) translateY(8.5px); 104 | } 105 | 106 | nav.active .icon .line2{ 107 | transform: rotate(765deg) translateY(-8.5px); 108 | } -------------------------------------------------------------------------------- /Background Slider/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.linkedEditing": true 3 | } -------------------------------------------------------------------------------- /Background Slider/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Background Slider 8 | 12 | 13 | 14 | 15 |
16 |
22 |
28 |
34 |
40 |
46 | 47 | 50 | 53 |
54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /Background Slider/script.js: -------------------------------------------------------------------------------- 1 | const slides = document.querySelectorAll(".slide"); 2 | const body = document.body; 3 | const leftBtn = document.querySelector("#left"); 4 | const rightBtn = document.querySelector("#right"); 5 | 6 | let activeSlide = 0; 7 | 8 | rightBtn.addEventListener("click", () => { 9 | activeSlide++; 10 | 11 | if (activeSlide > slides.length - 1) { 12 | activeSlide = 0; 13 | } 14 | 15 | setBodyBg(); 16 | setActive(); 17 | }); 18 | 19 | leftBtn.addEventListener("click", () => { 20 | activeSlide--; 21 | 22 | if (activeSlide < 0) { 23 | activeSlide = slides.length - 1; 24 | } 25 | 26 | setBodyBg(); 27 | setActive(); 28 | }); 29 | 30 | 31 | 32 | function setBodyBg() { 33 | body.style.backgroundImage = slides[activeSlide].style.backgroundImage; 34 | } 35 | setBodyBg(); 36 | 37 | function setActive() { 38 | slides.forEach((slide) => slide.classList.remove("active")); 39 | 40 | slides[activeSlide].classList.add("active"); 41 | } 42 | setActive(); 43 | -------------------------------------------------------------------------------- /Background Slider/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=poppings:,wght@0,200;400;600&display=swap"); 2 | 3 | * { 4 | box-sizing: border-box; 5 | margin: 0; 6 | border: 0; 7 | } 8 | 9 | body { 10 | font-family: "poppings", sans-serif; 11 | display: flex; 12 | flex-direction: column; 13 | align-items: center; 14 | justify-content: center; 15 | height: 100vh; 16 | background-position: center center; 17 | background-size: cover; 18 | transition: 0.4s ease; 19 | } 20 | 21 | body::before { 22 | content: ""; 23 | position: absolute; 24 | top: 0; 25 | left: 0; 26 | width: 100%; 27 | height: 100vh; 28 | background-color: rgba(0, 0, 0, 0.7); 29 | z-index: -1; 30 | } 31 | 32 | .slider-container { 33 | box-shadow: 0 3px 5px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.27); 34 | height: 70vh; 35 | width: 70vw; 36 | position: relative; 37 | overflow: hidden; 38 | border-radius: 10px; 39 | } 40 | .slide { 41 | opacity: 0; 42 | height: 100vh; 43 | width: 100vw; 44 | background-position: center center; 45 | background-size: cover; 46 | position: absolute; 47 | top: -15vh; 48 | left: -15vw; 49 | transition: 0.4s ease; 50 | z-index: 1; 51 | } 52 | 53 | .slide.active { 54 | opacity: 1; 55 | } 56 | 57 | .arrow { 58 | position: fixed; 59 | z-index: 100; 60 | background-color: transparent; 61 | font-size: 3rem; 62 | color: #ff4500; 63 | padding: 20px; 64 | top: 50%; 65 | transform: translateY(-50%); 66 | cursor: pointer; 67 | outline: none; 68 | } 69 | .arrow:hover { 70 | color: aliceblue; 71 | } 72 | 73 | .left-arrow { 74 | left: calc(15vw - 65px); 75 | } 76 | .right-arrow { 77 | right: calc(15vw - 65px); 78 | } 79 | -------------------------------------------------------------------------------- /Blurry Loading/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.linkedEditing": true 3 | } -------------------------------------------------------------------------------- /Blurry Loading/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Blurry Loading 8 | 12 | 13 | 14 | 15 |
16 |
0%
17 | 18 | 19 | -------------------------------------------------------------------------------- /Blurry Loading/script.js: -------------------------------------------------------------------------------- 1 | const bg = document.querySelector(".bg"); 2 | const text = document.querySelector(".loading-text"); 3 | 4 | let load = 0; 5 | 6 | let int = setInterval(blurring, 40); 7 | 8 | function blurring() { 9 | load++; 10 | 11 | if (load > 99) { 12 | clearInterval(int); 13 | } 14 | 15 | text.innerHTML = `${load}%`; 16 | text.style.opacity = scale(load, 0, 100, 1, 0); 17 | bg.style.filter = `blur(${scale(load, 0, 100, 30, 0)}px)`; 18 | } 19 | 20 | function scale(number, inMin, inMax, outMin, outMax) { 21 | return ((number - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin; 22 | } 23 | -------------------------------------------------------------------------------- /Blurry Loading/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,900;1,200;1,500&display=swap'); 2 | 3 | *{ 4 | box-sizing: border-box; 5 | margin: 0; 6 | border: 0; 7 | } 8 | 9 | body{ 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | height: 100vh; 14 | overflow: hidden; 15 | font-family: 'Source Code Pro', monospace; 16 | } 17 | .bg{ 18 | background: url("https://images.unsplash.com/photo-1580587771525-78b9dba3b914?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1567&q=80") no-repeat center center/cover; 19 | position: absolute; 20 | top: -40px; 21 | left: -40px; 22 | height: calc(100vh + 80px); 23 | width: calc(100vw + 80px); 24 | z-index: -1; 25 | filter: blur(0px); 26 | 27 | } 28 | 29 | .loading-text{ 30 | font-size: 50px; 31 | /* background-color: rgba(0, 0,0, 0.3); */ 32 | padding: 20px; 33 | color: #030022; 34 | } -------------------------------------------------------------------------------- /Button ripple effect/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.linkedEditing": true 3 | } -------------------------------------------------------------------------------- /Button ripple effect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Ripple Effect 8 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Button ripple effect/script.js: -------------------------------------------------------------------------------- 1 | const btns = document.querySelectorAll("#ripple"); 2 | 3 | btns.forEach((btn) => { 4 | btn.addEventListener("click", function (e) { 5 | const x = e.clientX; 6 | const y = e.clientY; 7 | 8 | const buttonTop = e.target.offsetTop; 9 | const buttonLeft = e.target.offsetLeft; 10 | 11 | const xInside = x - buttonLeft; 12 | const yInside = y - buttonTop; 13 | 14 | const circle = document.createElement("span"); 15 | circle.classList.add("circle"); 16 | 17 | circle.style.top = yInside + "px"; 18 | circle.style.left = xInside + "px"; 19 | 20 | this.appendChild(circle); 21 | 22 | setTimeout(() => circle.remove(), 500); 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /Button ripple effect/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,900;1,200;1,500&display=swap'); 2 | 3 | *{ 4 | box-sizing: border-box; 5 | margin: 0; 6 | border: 0; 7 | } 8 | 9 | 10 | body{ 11 | background-color: #101010; 12 | display: flex; 13 | flex-direction: column; 14 | align-items: center; 15 | justify-content: center; 16 | height: 100vh; 17 | overflow: hidden; 18 | font-family:'Source Code Pro', monospace; 19 | } 20 | 21 | button{ 22 | cursor: pointer; 23 | padding: 30px; 24 | font-weight: bold; 25 | font-size: 25px; 26 | border-radius: 10px; 27 | border: none; 28 | background-color: #00bbbb; 29 | box-shadow: 1px 4px 6px #000, -1px -4px 6px #000; 30 | text-transform: uppercase; 31 | letter-spacing: 2; 32 | overflow: hidden; 33 | margin: 10px; 34 | position: relative; 35 | outline: none; 36 | } 37 | 38 | button .circle{ 39 | position: absolute; 40 | background-color: rgb(255, 255, 255); 41 | width: 100px; 42 | height: 100px; 43 | border-radius: 50%; 44 | transform: translate(-50%, -50%) scale(0); 45 | animation: scale 0.5s ease-out; 46 | } 47 | 48 | @keyframes scale { 49 | to{ 50 | transform: translate(-50%, -50%) scale(3); 51 | opacity: 0; 52 | } 53 | } -------------------------------------------------------------------------------- /Clock/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.linkedEditing": true 3 | } -------------------------------------------------------------------------------- /Clock/face.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mo-renike/50Javascript-projects/9fa48355aac038e7dd9b231423b3cd88985d4621/Clock/face.png -------------------------------------------------------------------------------- /Clock/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Theme Clock 8 | 12 | 13 | 14 | 15 |
16 | 17 |
18 |
19 |
20 | 21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 | 33 |
12:00
34 |
Monday, Nov 6
35 |
36 |
37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /Clock/script.js: -------------------------------------------------------------------------------- 1 | const hourEl = document.querySelector(".hour"); 2 | const minuteEl = document.querySelector(".minute"); 3 | const secondsEl = document.querySelector(".second"); 4 | const toggler = document.querySelector(".toggle"); 5 | const timeEl = document.querySelector(".time"); 6 | const dateEl = document.querySelector(".date"); 7 | const body = document.querySelector("html"); 8 | 9 | // toggler.addEventListener("click", () => { 10 | 11 | // if (body.classList.contains("dark")) { 12 | // body.classList.remove("dark"); 13 | // } else { 14 | // body.classList.add("dark"); 15 | // toggler.innerHTML = 'Light Mode' 16 | // } 17 | // }); 18 | 19 | toggler.addEventListener("click", () => { 20 | body.classList.toggle("dark"); 21 | if (body.classList.contains("dark")) { 22 | toggler.innerHTML = "revert"; 23 | } else { 24 | toggler.innerHTML = "change Tone"; 25 | } 26 | }); 27 | 28 | const days = [ 29 | "Sunday", 30 | "Monday", 31 | "Tuesday", 32 | "Wednesday", 33 | "Thursday", 34 | "Friday", 35 | "Saturday", 36 | ]; 37 | const months = [ 38 | "JAN", 39 | "FEB", 40 | "MAR", 41 | "APR", 42 | "MAY", 43 | "JUN", 44 | "JUL", 45 | "AUG", 46 | "SEP", 47 | "OCT", 48 | "NOV", 49 | "DEC", 50 | ]; 51 | 52 | const setTime = () => { 53 | const time = new Date(); 54 | const hour = time.getHours(); 55 | const minute = time.getMinutes(); 56 | const hour12 = hour % 12; 57 | const seconds = time.getSeconds(); 58 | const day = time.getDay(); 59 | const date = time.getDate(); 60 | const month = time.getMonth(); 61 | const amPm = hour >= 12 ? "PM" : "AM"; 62 | 63 | hourEl.style.transform = `translate(-50%, -100%) rotate(${scale( 64 | hour12, 65 | 0, 66 | 11, 67 | 0, 68 | 360 69 | )}deg)`; 70 | minuteEl.style.transform = `translate(-50%, -100%) rotate(${scale( 71 | minute, 72 | 0, 73 | 59, 74 | 0, 75 | 360 76 | )}deg)`; 77 | secondsEl.style.transform = `translate(-50%, -100%) rotate(${scale( 78 | seconds, 79 | 0, 80 | 59, 81 | 0, 82 | 360 83 | )}deg)`; 84 | 85 | timeEl.innerHTML = `${hour12} : ${ 86 | minute < 10 ? `0${minute}` : minute 87 | } ${amPm}`; 88 | dateEl.innerHTML = `${days[day]}, ${months[month]} ${date}`; 89 | }; 90 | 91 | function scale(number, inMin, inMax, outMin, outMax) { 92 | return ((number - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin; 93 | } 94 | 95 | setTime(); 96 | 97 | setInterval(setTime, 1000); 98 | -------------------------------------------------------------------------------- /Clock/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Heebo:ital,wght@900;1,200&display=swap"); 2 | 3 | * { 4 | box-sizing: border-box; 5 | margin: 0; 6 | border: 0; 7 | } 8 | :root { 9 | --primary-color: #ffb5b5; 10 | --secondary-color: #110000; 11 | } 12 | html { 13 | transition: all 0.5s ease-in; 14 | } 15 | html.dark { 16 | --secondary-color: #001313; 17 | --primary-color: #00fcfc; 18 | color: var(--primary-color); 19 | } 20 | 21 | body { 22 | display: flex; 23 | align-items: center; 24 | justify-content: center; 25 | text-align: center; 26 | height: 100vh; 27 | font-family: "Heebo", monospace; 28 | background-color: var(--secondary-color); 29 | color: var(--primary-color); 30 | } 31 | .container{ 32 | justify-content: space-between; 33 | align-items: center; 34 | height: 90%; 35 | } 36 | .toggle { 37 | background-color: var(--primary-color); 38 | color: var(--secondary-color); 39 | border: 0; 40 | border-radius: 5px; 41 | text-transform: uppercase; 42 | padding: 10px; 43 | margin: 1rem auto; 44 | font-weight: bold; 45 | cursor: pointer; 46 | outline: none; 47 | } 48 | 49 | /* .toggle:active { 50 | transform: scale(1.1); 51 | } */ 52 | 53 | .clock-container { 54 | display: flex; 55 | height: 80%; 56 | flex-direction: column; 57 | justify-content: space-between; 58 | align-items: center; 59 | } 60 | 61 | .clock { 62 | position: relative; 63 | margin: 25px auto; 64 | width: 230px; 65 | height: 230px; 66 | border: 4px solid var(--secondary-color); 67 | border-radius: 50%; 68 | box-shadow: 0 -8px 10px rgba(255, 255, 255, 0.05), 69 | inset 0 -15px 10px rgba(255, 255, 255, 0.05), 70 | 0 15px 10px rgba(0, 0, 0, 0.3), 71 | inset 0 15px 10px rgba(0, 0, 0, 0.3); 72 | /* backdrop-filter: blur(25px); */ 73 | } 74 | 75 | .face { 76 | width: 200px; 77 | height: 200px; 78 | border-radius: 50%; 79 | background-color: var(--secondary-color); 80 | position: absolute; 81 | top: 5%; 82 | left: 50%; 83 | transform: translate(-50%); 84 | z-index: 1; 85 | } 86 | .line { 87 | width: 2px; 88 | background-color: var(--primary-color); 89 | position: absolute; 90 | height: 220px; 91 | top: 0; 92 | left: 50%; 93 | transform: translate(-100%); 94 | } 95 | 96 | .line.line2 { 97 | transform: rotate(30deg); 98 | } 99 | .line.line3 { 100 | transform: rotate(60deg); 101 | } 102 | .line.line4 { 103 | transform: rotate(90deg); 104 | } 105 | .line.line5 { 106 | transform: rotate(120deg); 107 | } 108 | .line.line6 { 109 | transform: rotate(150deg); 110 | } 111 | /* .clock img{ 112 | width: 100%; 113 | } */ 114 | .needle { 115 | background-color: var(--primary-color); 116 | position: absolute; 117 | top: 50%; 118 | left: 50%; 119 | height: 65px; 120 | width: 3px; 121 | transform-origin: bottom center; 122 | border-radius: 2px; 123 | transition: all 0.5s ease; 124 | z-index: 5; 125 | } 126 | .needle.hour { 127 | transform: translate(-50%, -100%) rotate(0deg); 128 | } 129 | .needle.minute { 130 | transform: translate(-50%, -100%) rotate(0deg); 131 | height: 90px; 132 | } 133 | .needle.second { 134 | transform: translate(-50%, -100%) rotate(0deg); 135 | height: 95px; 136 | background-color: #ffffff; 137 | } 138 | 139 | .center-point { 140 | background-color: var(--primary-color); 141 | width: 12px; 142 | height: 12px; 143 | position: absolute; 144 | top: 50%; 145 | left: 50%; 146 | transform: translate(-50%); 147 | border-radius: 50%; 148 | z-index: 100; 149 | } 150 | /* .center-point::after { 151 | content: ""; 152 | background-color: var(--primary-color); 153 | width: 5px; 154 | height: 5px; 155 | position: absolute; 156 | top: 50%; 157 | left: 50%; 158 | transform: translate(-50%); 159 | border-radius: 50%; 160 | } */ 161 | .time { 162 | font-size: 50px; 163 | } 164 | 165 | .date { 166 | color: var(--primary-color); 167 | font-size: 16px; 168 | letter-spacing: 0.3px; 169 | text-transform: uppercase; 170 | } 171 | .date .circle { 172 | background-color: var(--primary-color); 173 | color: var(--secondary-color); 174 | border-radius: 5px; 175 | height: 18px; 176 | width: 18px; 177 | padding: 15px; 178 | display: inline-flex; 179 | justify-content: center; 180 | align-items: center; 181 | line-height: 18px; 182 | font-weight: bold; 183 | transition: 0.5s ease; 184 | font-size: 15px; 185 | } 186 | -------------------------------------------------------------------------------- /Content Placeholder/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Content Placeholder 8 | 12 | 13 | 14 | 15 |
16 | 17 | 18 |
19 |

20 |   21 |

22 |

23 |   24 |   25 |   26 |   27 |

28 |
29 |
 
30 |
31 |   34 |   35 |
36 |
37 |
38 |
39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /Content Placeholder/script.js: -------------------------------------------------------------------------------- 1 | const header = document.getElementById("header"); 2 | const title = document.getElementById("title"); 3 | const excerpt = document.getElementById("excerpt"); 4 | const profile_img = document.getElementById("profile_img"); 5 | const name = document.getElementById("name"); 6 | const date = document.getElementById("date"); 7 | 8 | const animated_bgs = document.querySelectorAll(".animated-bg"); 9 | const animated_bg_texts = document.querySelectorAll(".animated-bg-text"); 10 | 11 | setTimeout(getData, 2500); 12 | 13 | function getData() { 14 | header.innerHTML = 15 | ''; 16 | title.innerHTML = "Lorem ipsum dolor sit amet"; 17 | excerpt.innerHTML = 18 | "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore perferendis"; 19 | profile_img.innerHTML = 20 | ''; 21 | name.innerHTML = "John Doe"; 22 | date.innerHTML = "Oct 27, 2021"; 23 | 24 | animated_bgs.forEach((bg) => bg.classList.remove("animated-bg")); 25 | animated_bg_texts.forEach((bg) => bg.classList.remove("animated-bg-text")); 26 | } 27 | -------------------------------------------------------------------------------- /Content Placeholder/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | border: 0; 5 | } 6 | 7 | body { 8 | background: #545454; 9 | display: flex; 10 | height: 100vh; 11 | justify-content: center; 12 | align-items: center; 13 | overflow: hidden; 14 | /* color: #efefef; */ 15 | } 16 | /* before*/ 17 | /* body::before { 18 | content: ""; 19 | position: absolute; 20 | top: 0; 21 | left: 0; 22 | width: 100%; 23 | height: 100%; 24 | background: linear-gradient(#dc0000, #d60b1f); 25 | clip-path: polygon(30% 10%, 60% 40%, 30% 75%); 26 | } */ 27 | /* after*/ 28 | /* body::after { 29 | content: ""; 30 | position: absolute; 31 | top: 0; 32 | left: 0; 33 | width: 100%; 34 | height: 100%; 35 | background: linear-gradient(#00a6ff, #4c00ff); 36 | clip-path: circle(20% at 70% 75%); 37 | } */ 38 | .card { 39 | /* border: 1px solid rgba(255, 255, 255, 0.1); */ 40 | width: 350px; 41 | background-color: #efefef; 42 | /* background: rgba(255, 255, 255, 0.1); 43 | backdrop-filter: blur(10px);*/ 44 | box-shadow: 1px 6px 6px rgba(0, 0, 0, 0.4), -1px -6px 6px rgba(0, 0, 0, 0.4); 45 | display: flex; 46 | flex-direction: column; 47 | overflow: hidden; 48 | border-radius: 10px; 49 | } 50 | .card-header { 51 | width: 100%; 52 | height: 200px; 53 | } 54 | .card-header img { 55 | height: 90%; 56 | width: 100%; 57 | object-fit: cover; 58 | } 59 | .card-content { 60 | margin: 0; 61 | width: 100%; 62 | padding: 0 20px 20px; 63 | } 64 | .card-title { 65 | margin: 0; 66 | } 67 | .card-excerpt { 68 | color: #5f5f5f; 69 | margin: 10px 0 20px; 70 | } 71 | .author { 72 | display: flex; 73 | align-items: center; 74 | } 75 | .profile-img img { 76 | height: 40px; 77 | border-radius: 50%; 78 | margin-right: 10px; 79 | } 80 | .author-info { 81 | display: flex; 82 | flex-direction: column; 83 | } 84 | 85 | .author-info small { 86 | color: #5f5f5f; 87 | } 88 | 89 | 90 | .animated-bg { 91 | background-image: linear-gradient( 92 | to right, 93 | #f6f7f8 0%, 94 | #edeef1 10%, 95 | #f6f7f8 20%, 96 | #f6f7f8 100% 97 | ); 98 | background-size: 200% 100%; 99 | animation: bgPos 1s linear infinite; 100 | } 101 | 102 | .animated-bg-text { 103 | border-radius: 50px; 104 | display: inline-block; 105 | margin: 0; 106 | height: 10px; 107 | width: 100%; 108 | } 109 | 110 | @keyframes bgPos { 111 | 0% { 112 | background-position: 50% 0; 113 | } 114 | 115 | 100% { 116 | background-position: -150% 0; 117 | } 118 | } -------------------------------------------------------------------------------- /Dad jokes/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.linkedEditing": true 3 | } -------------------------------------------------------------------------------- /Dad jokes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Dad Jokes 8 | 12 | 13 | 14 | 15 |
16 |

Don't laugh challenge

17 |
18 | jokes jokes jokes.... 19 |
20 | 21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /Dad jokes/script.js: -------------------------------------------------------------------------------- 1 | const jokeWrapper = document.querySelector(".jokes"); 2 | const button = document.querySelector("#joke-btn"); 3 | 4 | button.addEventListener("click", getJoke); 5 | getJoke(); 6 | 7 | async function getJoke() { 8 | let config = { 9 | headers: { 10 | Accept: "application/JSON", 11 | }, 12 | }; 13 | const resp = await fetch("https://icanhazdadjoke.com", config); 14 | const data = await resp.json() 15 | jokeWrapper.innerHTML = data.joke; 16 | } 17 | 18 | 19 | 20 | // function getJoke() { 21 | // let config = { 22 | // headers: { 23 | // Accept: "application/JSON", 24 | // }, 25 | // }; 26 | // fetch("https://icanhazdadjoke.com", config) 27 | // .then((resp) => resp.json()) 28 | // .then((data) => { 29 | // jokeWrapper.innerHTML = data.joke; 30 | // }); 31 | 32 | // } 33 | -------------------------------------------------------------------------------- /Dad jokes/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,900;1,200;1,500&display=swap"); 2 | 3 | * { 4 | box-sizing: border-box; 5 | margin: 0; 6 | border: 0; 7 | } 8 | 9 | body { 10 | background-color: #506070; 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | height: 100vh; 15 | overflow: hidden; 16 | padding: 1.5rem; 17 | font-size: 20px; 18 | color: white; 19 | font-family: "Source Code Pro", monospace; 20 | } 21 | 22 | .container { 23 | background-color: #304050; 24 | border-radius: 10px; 25 | padding: 2.5rem 2rem; 26 | text-align: center; 27 | max-width: 100%; 28 | width: 70%; 29 | box-shadow: 3px 3px 4px #111111, -3px -3px 4px #0f0f0f; 30 | } 31 | 32 | h3 { 33 | margin: 0; 34 | opacity: 0.5; 35 | letter-spacing: 2px; 36 | font-size: 1.6em; 37 | text-decoration: underline; 38 | } 39 | 40 | .jokes { 41 | font-size: 1.1em; 42 | letter-spacing: 1px; 43 | line-height: 40px; 44 | margin: 3rem auto; 45 | max-width: 80%; 46 | } 47 | .btn { 48 | background-color: #203040; 49 | border-radius: 10px; 50 | color: #efefef; 51 | box-shadow: 2px 2px 2px #111111, -2px -2px 2px #0f0f0f; 52 | padding: 1em 2.2em; 53 | font-size: 1em; 54 | font-weight: bold; 55 | outline: 0; 56 | cursor: pointer; 57 | border: none; 58 | } 59 | .btn:active { 60 | transform: scale(0.93); 61 | } 62 | 63 | @media (max-width: 769px) { 64 | .container { 65 | width: 90%; 66 | } 67 | .jokes { 68 | max-width: 90%; 69 | } 70 | body { 71 | font-size: 18px; 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /Drag n Drop/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.linkedEditing": true 3 | } -------------------------------------------------------------------------------- /Drag n Drop/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Drag and Drop 8 | 12 | 13 | 14 | 15 |
16 |
17 | 18 |
19 |
20 |
21 |
22 |
23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /Drag n Drop/script.js: -------------------------------------------------------------------------------- 1 | const fill = document.querySelector(".fill"); 2 | const 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 | function dragStart() { 14 | this.className += " hold"; 15 | setTimeout(() => (this.className = "invisble"), 0); 16 | } 17 | function dragEnd() { 18 | this.className = "fill"; 19 | } 20 | function dragOver(e) { 21 | e.preventDefault(); 22 | } 23 | function dragEnter(e) { 24 | e.preventDefault(); 25 | this.className += " hovered"; 26 | } 27 | function dragLeave() { 28 | this.className = "empty"; 29 | } 30 | function dragDrop() { 31 | this.className = "empty"; 32 | this.append(fill); 33 | } 34 | -------------------------------------------------------------------------------- /Drag n Drop/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | margin: 0; 4 | border: 0; 5 | } 6 | 7 | body{ 8 | display: flex; 9 | background-color: #8d4e00; 10 | align-items: center; 11 | justify-content: center; 12 | height: 100vh; 13 | overflow: hidden; 14 | } 15 | .empty{ 16 | width: 180px; 17 | height: 180px; 18 | border: 3px solid #331c00; 19 | margin: 10px; 20 | background-color: #fff7ed; 21 | } 22 | .fill{ 23 | background-image: url('https://source.unsplash.com/random/150x150'); 24 | height: 175px; 25 | width: 175px; 26 | cursor: pointer; 27 | } 28 | .hold{ 29 | border: 5px solid #ccc; 30 | } 31 | 32 | .hovered{ 33 | border-color:white ; 34 | border-style: dashed; 35 | background-color: #333; 36 | } 37 | 38 | @media (max-width:800px) { 39 | body{ 40 | flex-direction: column; 41 | } 42 | } -------------------------------------------------------------------------------- /Drawing App/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.linkedEditing": true 3 | } -------------------------------------------------------------------------------- /Drawing App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Drawing App 8 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 10 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /Drawing App/script.js: -------------------------------------------------------------------------------- 1 | const add = document.querySelector("#plus"); 2 | const sub = document.querySelector("#minus"); 3 | const figure = document.querySelector("#value"); 4 | const clear = document.querySelector("#clear"); 5 | const colorBox = document.querySelector("#color"); 6 | const canvas = document.querySelector("#canvas"); 7 | 8 | const ctx = canvas.getContext("2d"); 9 | 10 | let size = 10; 11 | let color = "black"; 12 | let isPressed = false; 13 | let x; 14 | let y; 15 | 16 | canvas.addEventListener("mousedown", (e) => { 17 | isPressed = true; 18 | 19 | x = e.offsetX; 20 | y = e.offsetY; 21 | }); 22 | 23 | document.addEventListener("mouseup", (e) => { 24 | isPressed = false; 25 | 26 | x = undefined; 27 | y = undefined; 28 | }); 29 | 30 | canvas.addEventListener("mousemove", (e) => { 31 | if (isPressed) { 32 | const x2 = e.offsetX; 33 | const y2 = e.offsetY; 34 | 35 | drawCircle(x2, y2); 36 | drawLine(x, y, x2, y2); 37 | 38 | x = x2; 39 | y = y2; 40 | } 41 | }); 42 | 43 | function drawCircle(x, y) { 44 | ctx.beginPath(); 45 | ctx.arc(x, y, size, 0, Math.PI * 2); 46 | ctx.fillStyle = color; 47 | ctx.fill(); 48 | } 49 | 50 | function drawLine(x1, y1, x2, y2) { 51 | ctx.beginPath(); 52 | ctx.moveTo(x1, y1); 53 | ctx.lineTo(x2, y2); 54 | ctx.strokeStyle = color; 55 | ctx.lineWidth = size * 2; 56 | ctx.stroke(); 57 | } 58 | 59 | const updateSize = () => { 60 | figure.innerText = size; 61 | }; 62 | add.addEventListener("click", () => { 63 | size += 5; 64 | if (size > 50) { 65 | size = 50; 66 | } 67 | 68 | updateSize(); 69 | }); 70 | sub.addEventListener("click", () => { 71 | size -= 5; 72 | if (size < 5) { 73 | size = 5; 74 | } 75 | 76 | updateSize(); 77 | }); 78 | 79 | colorBox.addEventListener("change", (e) => { 80 | color = e.target.value; 81 | }); 82 | 83 | clear.addEventListener("click", () => { 84 | ctx.clearRect(0, 0, canvas.width, canvas.height); 85 | }); 86 | -------------------------------------------------------------------------------- /Drawing App/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,900;1,200;1,500&display=swap'); 2 | 3 | *{ 4 | box-sizing: border-box; 5 | margin: 0; 6 | border: 0; 7 | } 8 | :root{ 9 | --primary-color: #004141; 10 | --sec-color: #d7ffff; 11 | } 12 | body{ 13 | background-color: var(--sec-color); 14 | display: flex; 15 | flex-direction: column; 16 | justify-content: center; 17 | align-items: center; 18 | height: 100vh; 19 | font-family:'Source Code Pro', monospace; 20 | } 21 | 22 | canvas{ 23 | border: 2px solid var(--primary-color); 24 | } 25 | .controls{ 26 | background-color: var(--primary-color); 27 | padding: .8rem; 28 | width: 604px; 29 | display: flex; 30 | } 31 | .controls > * { 32 | background-color: var(--sec-color); 33 | border: none; 34 | font-size: 1.5rem; 35 | font-weight: bold; 36 | height: 50px; 37 | width: 50px; 38 | color: var(--primary-color); 39 | display: inline-flex; 40 | align-items: center; 41 | justify-content: center; 42 | margin: 0.3rem; 43 | padding:0.3rem; 44 | cursor: pointer; 45 | } 46 | 47 | .controls > *:last-child{ 48 | margin-left: auto; 49 | } 50 | 51 | button:active{ 52 | transform: scale(1); 53 | } -------------------------------------------------------------------------------- /Drink water/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.linkedEditing": true 3 | } -------------------------------------------------------------------------------- /Drink water/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Drink Water 8 | 12 | 13 | 14 | 15 |

Drink Water

16 |

GOAL: 2Litres

17 | 18 |
19 |
20 | 21 | Remaining 22 |
23 |
24 |
25 | 26 |

How many glasses of water you have drank today?

27 |
28 |
250 ml
29 |
250 ml
30 |
250 ml
31 |
250 ml
32 |
250 ml
33 |
250 ml
34 |
250 ml
35 |
250 ml
36 |
37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /Drink water/script.js: -------------------------------------------------------------------------------- 1 | const smallCups = document.querySelectorAll(".cup-small"); 2 | const liters = document.querySelector("#litres"); 3 | const percent = document.querySelector("#percentage"); 4 | const remained = document.querySelector("#remained"); 5 | 6 | 7 | 8 | smallCups.forEach((smallie, idx) => { 9 | smallie.addEventListener("click", () => highlightCups(idx)); 10 | }); 11 | 12 | function highlightCups(idx) { 13 | if ( 14 | smallCups[idx].classList.contains("full") && 15 | !smallCups[idx].nextElementSibling.classList.contains("full") 16 | ) { 17 | idx--; 18 | } 19 | 20 | smallCups.forEach((cup, idx2) => { 21 | if (idx2 <= idx) { 22 | cup.classList.add("full"); 23 | } else { 24 | cup.classList.remove("full"); 25 | } 26 | }); 27 | updateBigCup(); 28 | } 29 | 30 | const updateBigCup = () => { 31 | const fullCups = document.querySelectorAll(".cup-small.full").length; 32 | const totalCups = smallCups.length; 33 | 34 | if (fullCups === 0) { 35 | percent.style.visibility = "hidden"; 36 | percent.style.height = 0; 37 | } else { 38 | percent.style.visibility = `visible`; 39 | percent.style.height = `${fullCups / totalCups * 300}px`; 40 | percent.innerText = `${fullCups / totalCups *100}%` 41 | } 42 | 43 | if (fullCups === totalCups) { 44 | remained.style.visibility = 'hidden' 45 | remained.style.height = 0 46 | } else { 47 | remained.style.visibility = 'visible' 48 | liters.innerText = `${(2- (0.25 * fullCups) )}L`; 49 | } 50 | 51 | }; 52 | 53 | 54 | updateBigCup(); -------------------------------------------------------------------------------- /Drink water/style.css: -------------------------------------------------------------------------------- 1 | 2 | *{ 3 | box-sizing: border-box; 4 | margin: 0; 5 | border: 0; 6 | } 7 | 8 | body{ 9 | display: flex; 10 | flex-direction: column; 11 | align-items: center; 12 | font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 13 | background-color: #3291e4; 14 | color: #ffff; 15 | margin-bottom: 40px; 16 | } 17 | 18 | h1, h3{ 19 | margin: 7px auto; 20 | font-weight: 700; 21 | } 22 | 23 | .cup{ 24 | background-color: #ffff; 25 | border: 4px solid #004a8a; 26 | border-radius: 0px 0px 40px 40px; 27 | height: 300px; 28 | width: 150px; 29 | color:#004a8a; 30 | display: flex; 31 | flex-direction: column; 32 | margin: 30px auto; 33 | overflow: hidden; 34 | } 35 | 36 | .cups{ 37 | display: flex; 38 | flex-wrap: wrap; 39 | width: 280px; 40 | align-items: center; 41 | justify-content: center; 42 | } 43 | .cup.cup-small{ 44 | height: 90px; 45 | width: 50px; 46 | margin: 10px auto; 47 | border-radius: 0px 0px 20px 20px; 48 | cursor: pointer; 49 | background-color: rgba(255, 255, 255, 0.9); 50 | font-size: 14px; 51 | margin: 5px; 52 | text-align: center; 53 | align-items: center; 54 | justify-content: center; 55 | transform: 0.5s ease; 56 | } 57 | 58 | .cup.cup-small.full{ 59 | background-color: #6ab3f8; 60 | color: #ffff; 61 | } 62 | .remained{ 63 | display: flex; 64 | align-items: center; 65 | justify-content: center; 66 | text-align: center; 67 | flex-direction: column; 68 | flex: 1; 69 | transition: 0.5s ease; 70 | } 71 | 72 | .remained span{ 73 | font-size: 20px; 74 | font-weight: bold; 75 | } 76 | .remained small{ 77 | font-size: 12px; 78 | } 79 | .percentage{ 80 | background-color: #6ab3f8; 81 | font-size: 30px; 82 | display: flex; 83 | align-items: center; 84 | justify-content: center; 85 | font-weight: bold; 86 | height: 0; 87 | transition: 0.5s ease; 88 | } 89 | 90 | p.text{ 91 | text-align: center; 92 | margin: 0 0 5px; 93 | } -------------------------------------------------------------------------------- /Expanding cards/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.linkedEditing": true, 3 | "liveServer.settings.CustomBrowser": "chrome", 4 | "liveServer.settings.donotShowInfoMsg": true, 5 | "liveServer.settings.fullReload": true, 6 | "liveServer.settings.https": { 7 | "enable": true 8 | }, 9 | "liveServer.settings.NoBrowser": true, 10 | "liveServer.settings.useBrowserPreview": true, 11 | "prettier.trailingComma": "all", 12 | "prettier.jsxSingleQuote": true, 13 | "prettier.singleQuote": true 14 | } -------------------------------------------------------------------------------- /Expanding cards/img/img1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mo-renike/50Javascript-projects/9fa48355aac038e7dd9b231423b3cd88985d4621/Expanding cards/img/img1.jpg -------------------------------------------------------------------------------- /Expanding cards/img/img2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mo-renike/50Javascript-projects/9fa48355aac038e7dd9b231423b3cd88985d4621/Expanding cards/img/img2.jpg -------------------------------------------------------------------------------- /Expanding cards/img/img3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mo-renike/50Javascript-projects/9fa48355aac038e7dd9b231423b3cd88985d4621/Expanding cards/img/img3.jpg -------------------------------------------------------------------------------- /Expanding cards/img/img4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mo-renike/50Javascript-projects/9fa48355aac038e7dd9b231423b3cd88985d4621/Expanding cards/img/img4.png -------------------------------------------------------------------------------- /Expanding cards/img/img5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mo-renike/50Javascript-projects/9fa48355aac038e7dd9b231423b3cd88985d4621/Expanding cards/img/img5.png -------------------------------------------------------------------------------- /Expanding cards/img/img6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mo-renike/50Javascript-projects/9fa48355aac038e7dd9b231423b3cd88985d4621/Expanding cards/img/img6.png -------------------------------------------------------------------------------- /Expanding cards/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Expanding Cards 8 | 9 | 10 | 11 |
12 |
13 |

Explore the world

14 |
15 |
16 |

Sunny Side out

17 |
18 |
19 |

Take a tour

20 |
21 |
22 |

World Class

23 |
24 |
25 |

Life is what you make of it

26 |
27 |
28 |

Bank with us

29 |
30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /Expanding cards/script.js: -------------------------------------------------------------------------------- 1 | const show = document.querySelectorAll('.panels'); 2 | 3 | show.forEach(panels => { 4 | panels.addEventListener('click', () => { 5 | removeActiveClasses(); 6 | panels.classList.add('active'); 7 | }); 8 | }); 9 | 10 | function removeActiveClasses() { 11 | show.forEach(panels => { 12 | panels.classList.remove('active'); 13 | }); 14 | } 15 | -------------------------------------------------------------------------------- /Expanding cards/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | margin: 0; 4 | border: 0; 5 | } 6 | 7 | body{ 8 | background-color: #030303; 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | height: 100vh; 13 | overflow: hidden; 14 | font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 15 | } 16 | .container{ 17 | display: flex; 18 | width: 90vw; 19 | } 20 | .panels{ 21 | background-size: auto 100%; 22 | background-position: center; 23 | background-repeat: no-repeat; 24 | border-radius: 50px; 25 | height: 80vh; 26 | color: #eefefe; 27 | cursor: pointer; 28 | flex: 0.5; 29 | margin: 10px; 30 | position: relative; 31 | transition: flex 0.7 ease; 32 | } 33 | .panels h3{ 34 | position: absolute; 35 | bottom: 20px; 36 | left: 20px; 37 | font-size: 24px; 38 | margin: 0; 39 | opacity: 0; 40 | background-color: rgba(0, 0, 0, 0.6); 41 | padding: 10px; 42 | } 43 | .panels.active{ 44 | flex: 5; 45 | } 46 | 47 | .panels.panels.active h3{ 48 | opacity: 1; 49 | transition: opacity 0.3s ease-in 0.4s; 50 | } 51 | 52 | @media (max-width:594px) { 53 | .container{ 54 | width: 100vw; 55 | } 56 | .panels:nth-of-type(5), 57 | .panels:nth-of-type(6){ 58 | display: none; 59 | } 60 | } -------------------------------------------------------------------------------- /FAQ/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.linkedEditing": true 3 | } -------------------------------------------------------------------------------- /FAQ/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | FAQ 8 | 12 | 13 | 14 | 15 |

Frequently asked questions

16 |
17 |
18 |

What's for lunch tomorrow?

19 |

20 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem 21 | non totam, atque repudiandae culpa reiciendis. 22 |

23 | 24 | 28 |
29 |
30 |

Who is playing the game tonight?

31 |

32 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique 33 | nemo reprehenderit eos? 34 |

35 | 36 | 40 |
41 |
42 |

What's for breakfast?

43 |

44 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, eum? 45 |

46 | 47 | 51 |
52 |
53 |

Why are atoms so funny?

54 |

55 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit 56 | velit sequi tenetur esse? 57 |

58 | 59 | 63 |
64 |
65 |

How are you feeling today?

66 |

67 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, eum? 68 |

69 | 70 | 74 |
75 |
76 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /FAQ/script.js: -------------------------------------------------------------------------------- 1 | const btns = document.querySelectorAll(".faq-toggle"); 2 | 3 | btns.forEach((btn) => { 4 | btn.addEventListener("click", () => { 5 | let container = btn.parentNode; 6 | container.classList.toggle("active"); 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /FAQ/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=muli:ital,wght@0,900;1,200;1,500&display=swap"); 2 | 3 | * { 4 | box-sizing: border-box; 5 | margin: 0; 6 | border: 0; 7 | } 8 | 9 | body { 10 | font-family: "muli"; 11 | background-color: #130000; 12 | color: #ffb4b4; 13 | } 14 | h1 { 15 | margin: 2em; 16 | text-align: center; 17 | } 18 | 19 | .faq-container { 20 | max-width: 60%; 21 | margin: 0 auto; 22 | } 23 | 24 | .faq { 25 | margin: 1em 0; 26 | padding: 30px; 27 | position: relative; 28 | overflow: hidden; 29 | transition: all 0.3s ease; 30 | border-radius: 10px; 31 | background-color: #0f0000; 32 | } 33 | 34 | .faq.active { 35 | border: none; 36 | outline: none; 37 | box-shadow: 2px 4px 6px rgba(145, 99, 99, 0.9), -1px -3px 6px rgba(0, 0, 0, 0.9); 38 | } 39 | 40 | .faq.active::before, 41 | .faq.active::after { 42 | content: '\f075'; 43 | font-family: 'Font Awesome 5 Free'; 44 | font-size: 6em; 45 | font-weight: normal; 46 | position: absolute; 47 | opacity: 0.1; 48 | top: 20px; 49 | left: 20px; 50 | z-index: 0; 51 | } 52 | .faq.active::before{ 53 | top: -10px; 54 | left: -30px; 55 | transform: rotateY(180deg); 56 | } 57 | 58 | .faq-title{ 59 | margin: 0 2em 0.5em 0; 60 | font-size: 1em; 61 | } 62 | 63 | .faq-text{ 64 | margin: 1em auto; 65 | display: none; 66 | } 67 | 68 | .faq.active .faq-text{ 69 | display: block; 70 | } 71 | 72 | .faq-toggle{ 73 | position: absolute; 74 | top: 20px; 75 | right: 20px; 76 | width: 30px; 77 | height: 30px; 78 | background-color: inherit; 79 | color: inherit; 80 | font-size: 1.1em; 81 | cursor: pointer; 82 | display: flex; 83 | align-items: center; 84 | justify-content: center; 85 | } 86 | 87 | .faq-toggle .fa-times{ 88 | display: none; 89 | } 90 | 91 | .faq.active .faq-toggle .fa-times{ 92 | display: block; 93 | } 94 | 95 | .faq.active .faq-toggle .fa-chevron-down{ 96 | display: none; 97 | } -------------------------------------------------------------------------------- /Form input wave/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.linkedEditing": true 3 | } -------------------------------------------------------------------------------- /Form input wave/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Form input wave 8 | 12 | 13 | 14 | 15 |
16 |

Login to your account

17 |
18 |
19 | 20 | 21 | 28 |
29 |
30 | 31 | 32 |
33 | 34 | 35 |

Don't have an account? Register

36 |
37 |
38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /Form input wave/script.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | const labels = document.querySelectorAll('.form-control label') 4 | 5 | labels.forEach(label => { 6 | label.innerHTML = label.innerText 7 | .split('') 8 | .map((letter, idx) => `${letter}`) 9 | .join('') 10 | }) -------------------------------------------------------------------------------- /Form input wave/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=muli&display=swap"); 2 | 3 | * { 4 | box-sizing: border-box; 5 | margin: 0; 6 | border: 0; 7 | } 8 | 9 | body { 10 | background-color: #002400; 11 | color: #00c500; 12 | display: flex; 13 | flex-direction: column; 14 | align-items: center; 15 | justify-content: center; 16 | height: 100vh; 17 | overflow: hidden; 18 | font-size: 18px; 19 | font-family: "Muli", sans-serif; 20 | } 21 | 22 | .btn { 23 | cursor: pointer; 24 | display: inline-block; 25 | width: 100%; 26 | background-color: #002400; 27 | color: #00c500; 28 | padding: 15px; 29 | font-size: 1em; 30 | border: none; 31 | border-radius: 5px; 32 | outline: none; 33 | } 34 | 35 | .text { 36 | margin-top: 1.5em; 37 | } 38 | .btn:hover { 39 | transform: scale(0.9); 40 | } 41 | .container { 42 | background-color: #001a00; 43 | padding: 2em 3em; 44 | border-radius: 5px; 45 | } 46 | 47 | .container h1 { 48 | text-align: center; 49 | margin-bottom: 1em; 50 | } 51 | a { 52 | text-decoration: none; 53 | color: #00c559; 54 | } 55 | 56 | .form-control { 57 | position: relative; 58 | margin: 20px 0 40px; 59 | } 60 | 61 | .form-control input { 62 | background-color: transparent; 63 | border-bottom: 2px solid #002400; 64 | display: block; 65 | width: 100%; 66 | padding: 10px 0; 67 | font-size: 1em; 68 | color: #fefefe; 69 | outline: none; 70 | } 71 | 72 | .form-control label { 73 | position: absolute; 74 | top: 15px; 75 | left: 0; 76 | } 77 | 78 | .form-control label span { 79 | display: inline-block; 80 | font-size: 1em; 81 | min-width: 5px; 82 | transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 83 | } 84 | 85 | .form-control input:focus, 86 | .form-control input:valid{ 87 | outline: 0; 88 | border-bottom-color: #00c500; 89 | } 90 | .form-control input:focus + label span, 91 | .form-control input:valid + label span { 92 | transform: translateY(-30px); 93 | color: #00c500; 94 | } 95 | -------------------------------------------------------------------------------- /Github Profiles/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Github Profiles 8 | 12 | 13 | 14 | 15 |
16 | 17 |
18 | 19 |
20 | 21 |
22 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /Github Profiles/script.js: -------------------------------------------------------------------------------- 1 | const search = document.getElementById("search"); 2 | const wrapper = document.getElementById("main"); 3 | const form = document.getElementById("form"); 4 | 5 | const APIURL = "https://api.github.com/users/"; 6 | 7 | // const getUser = (username) => { 8 | // axios(APIURL + username) 9 | // .then((res) => console.log(res.data)) 10 | // .catch((err) => console.log(err)); 11 | // }; 12 | 13 | const getUser = async (username) => { 14 | try { 15 | const { data } = await axios(APIURL + username); 16 | createUser(data); 17 | createRepo(username); 18 | } catch (err) { 19 | if (err.response.status == 404) { 20 | console.log("not found"); 21 | createErr("No Profile with this username"); 22 | } 23 | } 24 | }; 25 | const getRepos = async (username) => { 26 | try { 27 | const { data } = await axios(APIURL + username + "/repos"); 28 | createRepo(data); 29 | console.log(data); 30 | } catch (err) { 31 | // console.log(err); 32 | } 33 | }; 34 | 35 | const createRepo = (repos) => { 36 | const repoEl = document.getElementById("repos"); 37 | repos.forEach((repo) => { 38 | const repoLink = document.createElement("a"); 39 | repoLink.classList.add(repo); 40 | repoLink.href = repo.html_url; 41 | repoLink.target = "_blank"; 42 | repoLink.innerText = String(repo.name); 43 | 44 | repoEl.appendChild(repoLink); 45 | }); 46 | }; 47 | 48 | const createUser = (user) => { 49 | const cardHtml = ` 50 |
51 |
52 | AV 53 |
54 |
55 |

${user.name}

56 |
57 | ${ 58 | user.blog ? "Website" : "" 59 | } 60 | Twitter 61 |
62 | 63 |

64 | ${user.bio} 65 |

66 | 71 |
72 |
73 | 74 |
75 |
76 | `; 77 | 78 | wrapper.innerHTML = cardHtml; 79 | }; 80 | 81 | const createErr = (msg) => { 82 | wrapper.innerHTML = ` 83 |
84 |

${msg}

85 |
`; 86 | }; 87 | 88 | form.addEventListener("submit", (e) => { 89 | e.preventDefault(); 90 | const user = search.value; 91 | 92 | if (user) { 93 | getUser(user); 94 | search.value = ""; 95 | } 96 | }); 97 | -------------------------------------------------------------------------------- /Github Profiles/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=poppins:ital,wght@0,200;400;1,500&display=swap"); 2 | 3 | * { 4 | box-sizing: border-box; 5 | margin: 0; 6 | border: 0; 7 | } 8 | 9 | body { 10 | background-color: #011522; 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | flex-direction: column; 15 | font-size: 18px; 16 | height: 100vh; 17 | color: #fff; 18 | overflow: hidden; 19 | font-family: "poppins", "sans-serif"; 20 | } 21 | .user_form { 22 | width: 100%; 23 | text-align: center; 24 | } 25 | .card.err { 26 | width: 100%; 27 | display: flex; 28 | text-align: center; 29 | } 30 | input { 31 | padding: 1rem; 32 | outline: none; 33 | border: none; 34 | background: linear-gradient(145deg, #011522, #011522); 35 | width: 50%; 36 | max-width: 700px; 37 | box-shadow: inset 1px 2px 3px #011019, inset -1px -2px 3px #000e17; 38 | color: #fff; 39 | border-radius: 10px; 40 | } 41 | main { 42 | margin-top: 3rem; 43 | width: 100%; 44 | display: flex; 45 | align-items: center; 46 | justify-content: center; 47 | } 48 | .card { 49 | background: linear-gradient(145deg, #011522, #011522); 50 | box-shadow: 3px 3px 6px #011019, -3px -3px 6px #000e17; 51 | border-radius: 10px; 52 | padding: 1.5rem 2.5rem; 53 | display: grid; 54 | grid-template-columns: 30% 70%; 55 | width: 50%; 56 | max-width: 700px; 57 | grid-gap: 2rem; 58 | justify-content: center; 59 | align-items: center; 60 | } 61 | .card_socials a { 62 | text-decoration: none; 63 | 64 | color: aqua; 65 | font-size: 0.9rem; 66 | transition: 0.5s ease-in-out; 67 | } 68 | .card_socials a:hover { 69 | color: #9b9b9b; 70 | transform: scale(1.1); 71 | } 72 | .card_img { 73 | width: 150px; 74 | height: 150px; 75 | border-radius: 100%; 76 | border: 5px solid #000e17; 77 | } 78 | .card_img img { 79 | width: 100%; 80 | border-radius: inherit; 81 | height: 100%; 82 | object-fit: cover; 83 | } 84 | .card_info p { 85 | margin: 1.2rem 0; 86 | } 87 | ul { 88 | display: flex; 89 | padding: 0; 90 | justify-content: space-between; 91 | } 92 | ul li { 93 | list-style: none; 94 | font-size: 0.7rem; 95 | margin-right: 4px; 96 | margin-bottom: 5px; 97 | } 98 | 99 | #repos { 100 | margin: 1rem 0; 101 | } 102 | .repo { 103 | text-decoration: none; 104 | font-size: 0.7rem; 105 | color: #9b9b9b; 106 | margin: 10px 0; 107 | overflow-wrap: normal; 108 | padding: 4px 7px; 109 | border-radius: 10px; 110 | background-color: #000e17; 111 | transition: 0.5s ease-in-out; 112 | } 113 | .repo:hover { 114 | color: aqua; 115 | } 116 | @media (max-width: 912px) { 117 | input, 118 | .card { 119 | width: 70%; 120 | } 121 | } 122 | 123 | @media (max-width: 540px) { 124 | input, 125 | .card { 126 | width: 90%; 127 | padding: 1rem; 128 | } 129 | .card { 130 | display: flex; 131 | flex-direction: column; 132 | align-items: flex-start; 133 | } 134 | } 135 | -------------------------------------------------------------------------------- /Hidden search widget/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Hidden Seacrh 8 | 12 | 13 | 14 | 15 |
16 | 17 | 18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /Hidden search widget/script.js: -------------------------------------------------------------------------------- 1 | const btn = document.querySelector(".btn"); 2 | const search = document.querySelector(".search"); 3 | const input = document.querySelector(".input"); 4 | 5 | btn.addEventListener("click", () => { 6 | search.classList.toggle("active"); 7 | input.focus() 8 | }); -------------------------------------------------------------------------------- /Hidden search widget/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,900;1,200;1,500&display=swap'); 2 | 3 | *{ 4 | box-sizing: border-box; 5 | margin: 0; 6 | border: 0; 7 | } 8 | 9 | body{ 10 | background-image: linear-gradient(80deg, #102310, #300430); 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | height: 100vh; 15 | overflow: hidden; 16 | font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 17 | } 18 | .search{ 19 | position: relative; 20 | height: 50px; 21 | } 22 | 23 | .input{ 24 | background-color: white; 25 | border: 0; 26 | font-size: 18px; 27 | padding: 15px; 28 | height: 50px; 29 | width: 50px; 30 | transition: width .4s ease; 31 | } 32 | .btn{ 33 | position: absolute; 34 | border: 0; 35 | left: 0; 36 | top: 0; 37 | height: 50px; 38 | width: 50px; 39 | background: white; 40 | font-size: 20px; 41 | cursor: pointer; 42 | transition: transform .4s ease; 43 | } 44 | 45 | .btn:focus, 46 | .input:focus{ 47 | outline: none; 48 | } 49 | .search.active .input{ 50 | width: 200px; 51 | } 52 | 53 | .search.active .btn{ 54 | transform: translateX(198px); 55 | } -------------------------------------------------------------------------------- /Increment Counter/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.linkedEditing": true 3 | } -------------------------------------------------------------------------------- /Increment Counter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Increment Counter 8 | 12 | 13 | 14 | 15 |
16 |
17 | 18 |
19 | Twitter Followers 20 |
21 |
22 | 23 |
24 | Youtube subscribers 25 |
26 |
27 | 28 |
29 | Facebook Fans 30 |
31 |
32 | 33 | 34 | -------------------------------------------------------------------------------- /Increment Counter/script.js: -------------------------------------------------------------------------------- 1 | const counters = document.querySelectorAll(".counter"); 2 | 3 | counters.forEach((counter) => { 4 | counter.innerText = "0"; 5 | 6 | const updateCounter = () => { 7 | //plus sign turns the string into a number 8 | const target = +counter.getAttribute("data-target"); 9 | const c = +counter.innerText; 10 | 11 | const increment = target / 200; 12 | if (c < target) { 13 | counter.innerText = `${Math.ceil(c + increment)}`; 14 | setTimeout(updateCounter, 1); 15 | } else { 16 | counter.innerText = target; 17 | } 18 | }; 19 | 20 | updateCounter(); 21 | }); 22 | 23 | // counters.forEach((counter) => { 24 | // counter.innerText = "0"; 25 | // const target = +counter.getAttribute("data-target"); 26 | // const index = +counter.innerText; 27 | 28 | // const update = ()=>{ 29 | // if (index < target) { 30 | // index *= 200; 31 | // } 32 | // } 33 | // });update() 34 | -------------------------------------------------------------------------------- /Increment Counter/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=roboto,wght@0,900;1,200;1,500&display=swap"); 2 | 3 | * { 4 | box-sizing: border-box; 5 | margin: 0; 6 | border: 0; 7 | } 8 | :root { 9 | --bg-1: #1c0800; 10 | --bg-2: #2e0e00; 11 | --bg-3: #ff4d00; 12 | } 13 | body { 14 | display: flex; 15 | align-items: center; 16 | justify-content: center; 17 | height: 100vh; 18 | overflow: hidden; 19 | font-family: "roboto", monospace; 20 | background-color: var(--bg-2); 21 | } 22 | 23 | .container { 24 | margin: auto; 25 | display: flex; 26 | width: 60%; 27 | } 28 | .counter-container { 29 | margin: 10px; 30 | padding: 20px; 31 | text-align: center; 32 | background-color: var(--bg-1); 33 | width: 100%; 34 | } 35 | 36 | .counter{ 37 | font-size: 3em; 38 | } 39 | .counter, 40 | span { 41 | color: var(--bg-3); 42 | } 43 | 44 | .fab { 45 | color: var(--bg-3); 46 | margin-bottom: 10px; 47 | } 48 | 49 | /* .counter-container span { 50 | font-size: 12px; 51 | } */ 52 | 53 | @media (max-width: 680px) { 54 | .container { 55 | flex-direction: column; 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /KeyCodes/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.linkedEditing": true 3 | } -------------------------------------------------------------------------------- /KeyCodes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Event keycodes 8 | 10 | 11 | 12 | 13 |
14 |
Press any key to get KeyCode
15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /KeyCodes/script.js: -------------------------------------------------------------------------------- 1 | const insert = document.querySelector("#insert"); 2 | 3 | window.addEventListener("keydown", (event) => { 4 | insert.innerHTML = ` 5 | 6 |
${event.key === ' ' ? 'space' : event.key} event.key
7 |
${event.keyCode}event.keycode
8 |
${event.code} event.code
9 | ` 10 | }); 11 | -------------------------------------------------------------------------------- /KeyCodes/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=muli:ital,wght@0,900;1,200;1,500&display=swap'); 2 | 3 | *{ 4 | box-sizing: border-box; 5 | margin: 0; 6 | border: 0; 7 | } 8 | 9 | body{ 10 | background-color: #000600; 11 | display: flex; 12 | text-align: center; 13 | align-items: center; 14 | justify-content: center; 15 | height: 100vh; 16 | overflow: hidden; 17 | font-family:'muli', sans-serif; 18 | color: #00ff00; 19 | } 20 | 21 | .key{ 22 | border: 1px solid #00ff00; 23 | box-shadow: 1px 1px 2px #00ff00, -1px -1px 2px #00ff00; 24 | margin: 10px; 25 | padding: 15px; 26 | display: inline-flex; 27 | align-items: center; 28 | flex-direction: column; 29 | font-size: 20px; 30 | font-weight: bold; 31 | min-width: 150px; 32 | position: relative; 33 | } 34 | 35 | .key small{ 36 | position: absolute; 37 | top: -24px; 38 | left: 0; 39 | text-align: center; 40 | width: 100%; 41 | opacity: 0.3; 42 | font-size: 14px; 43 | } 44 | 45 | -------------------------------------------------------------------------------- /Mini mani mo/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.linkedEditing": true 3 | } -------------------------------------------------------------------------------- /Mini mani mo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Mini Mani Mo 8 | 12 | 13 | 14 | 15 |
16 |

17 | Enter all your choices, divided by a comma ( , )
Press Enter when 18 | you are done 19 |

20 | 21 | 22 |
23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /Mini mani mo/script.js: -------------------------------------------------------------------------------- 1 | const tagsEl = document.getElementById("tags"); 2 | const textarea = document.getElementById("textarea"); 3 | 4 | textarea.focus(); 5 | 6 | textarea.addEventListener("keyup", (e) => { 7 | createTags(e.target.value); 8 | 9 | if (e.key === "Enter") { 10 | setTimeout(() => { 11 | e.target.value = ""; 12 | }, 10); 13 | 14 | randomSelect(); 15 | } 16 | }); 17 | 18 | function createTags(input) { 19 | const tags = input 20 | .split(",") 21 | .filter((tag) => tag.trim() !== "") 22 | .map((tag) => tag.trim()); 23 | 24 | tagsEl.innerHTML = ""; 25 | 26 | tags.forEach((tag) => { 27 | const tagEl = document.createElement("span"); 28 | tagEl.classList.add("tag"); 29 | tagEl.innerText = tag; 30 | tagsEl.appendChild(tagEl); 31 | }); 32 | } 33 | 34 | function randomSelect() { 35 | const times = 30; 36 | 37 | const interval = setInterval(() => { 38 | const randomTag = pickRandomTag(); 39 | 40 | if (randomTag !== undefined) { 41 | highlightTag(randomTag); 42 | 43 | setTimeout(() => { 44 | unHighlightTag(randomTag); 45 | }, 100); 46 | } 47 | }, 100); 48 | 49 | setTimeout(() => { 50 | clearInterval(interval); 51 | 52 | setTimeout(() => { 53 | const randomTag = pickRandomTag(); 54 | 55 | highlightTag(randomTag); 56 | }, 100); 57 | }, times * 100); 58 | } 59 | 60 | function pickRandomTag() { 61 | const tags = document.querySelectorAll(".tag"); 62 | return tags[Math.floor(Math.random() * tags.length)]; 63 | } 64 | 65 | function highlightTag(tag) { 66 | tag.classList.add("highlight"); 67 | } 68 | 69 | function unHighlightTag(tag) { 70 | tag.classList.remove("highlight"); 71 | } 72 | -------------------------------------------------------------------------------- /Mini mani mo/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=muli:ital,wght@0,900;1,200;1,500&display=swap'); 2 | 3 | *{ 4 | box-sizing: border-box; 5 | margin: 0; 6 | border: 0; 7 | } 8 | 9 | body{ 10 | display: flex; 11 | flex-direction: column; 12 | align-items: center; 13 | justify-content: center; 14 | height: 100vh; 15 | overflow: hidden; 16 | font-family:'muli', sans-serif; 17 | background-color: #082b2c; 18 | } 19 | 20 | .container{ 21 | width: 70%; 22 | margin: auto auto; 23 | padding: 30px; 24 | } 25 | 26 | h3{ 27 | font-size: 1.2rem; 28 | color: #efefef; 29 | margin: 1em auto; 30 | text-align: center; 31 | } 32 | 33 | textarea{ 34 | width: 100%; 35 | background-color: inherit; 36 | display: block; 37 | outline: none; 38 | height: 100px; 39 | color: #efefee; 40 | padding: 20px; 41 | border-radius: 10px; 42 | box-shadow: inset 5px 6px 5px #051718, inset -5px -5px 5px #051a1a; 43 | 44 | } 45 | 46 | #tags{ 47 | display: flex; 48 | flex-direction: row; 49 | flex-wrap: wrap; 50 | margin: 1em auto 51 | } 52 | 53 | .tag{ 54 | margin: 5px; 55 | background-color: #44080a; 56 | color: #efefef; 57 | padding: 10px; 58 | border-radius: 10px; 59 | font-size: .9em; 60 | border: none; 61 | } 62 | 63 | .tag.highlight{ 64 | background-color: #104446; 65 | } 66 | -------------------------------------------------------------------------------- /Movie App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Movie App 8 | 9 | 10 |
11 |

Get Info Of Your Favourite Movies

12 |

Free, fast, and easy to use

13 |
14 | 20 |
21 |
22 | 23 |
24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /Movie App/script.js: -------------------------------------------------------------------------------- 1 | const API_URL = 2 | "https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=bd551351d613eae72b5219e295facfeb&page1"; 3 | const SEARCH_API = 4 | 'https://api.themoviedb.org/3/search/movie?api_key=bd551351d613eae72b5219e295facfeb&query="'; 5 | const IMG_PATH = "https://image.tmdb.org/t/p/w1280"; 6 | 7 | const form = document.querySelector("#form"); 8 | const main = document.querySelector("#main"); 9 | const search = document.querySelector("#search"); 10 | 11 | getMovies(API_URL); 12 | 13 | async function getMovies(url) { 14 | const res = await fetch(url); 15 | const data = await res.json(); 16 | 17 | showMovies(data.results); 18 | } 19 | 20 | 21 | const showMovies = (movies) => { 22 | main.innerHTML = " "; 23 | movies.forEach((movie) => { 24 | const { title, poster_path, vote_average, overview } = movie; 25 | 26 | const movieEL = document.createElement("div"); 27 | movieEL.classList.add("movie"); 28 | 29 | movieEL.innerHTML = ` 30 | ${title} 31 |
32 |

${title}

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

Overview

${overview}
37 | ` 38 | main.appendChild(movieEL); 39 | }); 40 | }; 41 | 42 | 43 | function rating(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 | 54 | // const rating = (vote) => { return 55 | // ( vote >= 8 ? 'green' : vote >= 5 ? 'orange' : 'red') 56 | // }; 57 | 58 | form.addEventListener("submit", (e) => { 59 | e.preventDefault(); 60 | 61 | const searchTerm = search.value; 62 | if (searchTerm && searchTerm !== " ") { 63 | getMovies(SEARCH_API + searchTerm); 64 | search.value = ""; 65 | } else { 66 | window.location.reload(); 67 | } 68 | }); 69 | -------------------------------------------------------------------------------- /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: #17171a; 5 | --secondary-color: #0f0f10; 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: 2rem; 20 | display: flex; 21 | color: white; 22 | justify-content: center; 23 | align-items: center; 24 | flex-direction: column; 25 | background-color: var(--secondary-color); 26 | } 27 | 28 | h1 { 29 | padding: 0; 30 | margin: 0; 31 | } 32 | form { 33 | width: 280px; 34 | margin-top: 2rem; 35 | } 36 | .search { 37 | background-color: transparent; 38 | border: 2px solid #ffff; 39 | border-radius: 50px; 40 | font-family: inherit; 41 | font-size: 1rem; 42 | padding: 0.5rem 1rem; 43 | width: 100%; 44 | color: #fff; 45 | } 46 | 47 | .search::placeholder { 48 | color: #333333; 49 | } 50 | 51 | .search:focus { 52 | outline: none; 53 | background-color: var(--primary-color); 54 | } 55 | 56 | main { 57 | display: flex; 58 | flex-wrap: wrap; 59 | justify-content: center; 60 | } 61 | 62 | .movie { 63 | width: 300px; 64 | margin: 1rem; 65 | background-color: var(--secondary-color); 66 | box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2); 67 | position: relative; 68 | overflow: hidden; 69 | border-radius: 3px; 70 | } 71 | 72 | .movie img { 73 | width: 100%; 74 | } 75 | 76 | .movie-info { 77 | color: #eee; 78 | display: flex; 79 | align-items: center; 80 | justify-content: space-between; 81 | gap: 0.2rem; 82 | padding: 0.5rem 1rem 1rem; 83 | letter-spacing: 0.5px; 84 | } 85 | 86 | .movie-info h3 { 87 | margin-top: 0; 88 | } 89 | 90 | .movie-info span { 91 | background-color: var(--primary-color); 92 | padding: 0.25rem 0.5rem; 93 | border-radius: 3px; 94 | font-weight: bold; 95 | } 96 | 97 | .movie-info span.green { 98 | color: lightgreen; 99 | } 100 | 101 | .movie-info span.orange { 102 | color: orange; 103 | } 104 | 105 | .movie-info span.red { 106 | color: red; 107 | } 108 | 109 | .overview { 110 | background-color: #333; 111 | color: #dddd; 112 | padding: 2rem; 113 | position: absolute; 114 | left: 0; 115 | bottom: 0; 116 | right: 0; 117 | max-height: 100%; 118 | transform: translateY(101%); 119 | overflow-y: auto; 120 | transition: transform 0.3s ease-in; 121 | } 122 | 123 | .movie:hover .overview { 124 | transform: translateY(0); 125 | } 126 | -------------------------------------------------------------------------------- /Preset files/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My Project 8 | 12 | 13 | 14 | 15 |

Project 1

16 | 17 | 18 | -------------------------------------------------------------------------------- /Preset files/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mo-renike/50Javascript-projects/9fa48355aac038e7dd9b231423b3cd88985d4621/Preset files/script.js -------------------------------------------------------------------------------- /Preset files/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,900;1,200;1,500&display=swap'); 2 | 3 | *{ 4 | box-sizing: border-box; 5 | margin: 0; 6 | border: 0; 7 | } 8 | 9 | body{ 10 | display: flex; 11 | flex-direction: column; 12 | align-items: center; 13 | justify-content: center; 14 | height: 100vh; 15 | overflow: hidden; 16 | font-family:'Source Code Pro', monospace; 17 | } 18 | 19 | -------------------------------------------------------------------------------- /Progress steps/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.linkedEditing": true 3 | } -------------------------------------------------------------------------------- /Progress steps/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Progress Steps 8 | 9 | 10 | 11 |
12 |
13 |
14 |
1
15 |
2
16 |
3
17 |
4
18 |
19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /Progress steps/script.js: -------------------------------------------------------------------------------- 1 | const progress = document.querySelector("#progress"); 2 | const circles = document.querySelectorAll(".circle"); 3 | const next = document.querySelector("#next"); 4 | const prev = document.querySelector("#prev"); 5 | 6 | let currentActive = 1; 7 | 8 | next.addEventListener("click", () => { 9 | currentActive++; 10 | 11 | if (currentActive > circles.length) { 12 | currentActive = circles.length; 13 | } 14 | update(); 15 | }); 16 | 17 | prev.addEventListener("click", () => { 18 | currentActive--; 19 | 20 | if (currentActive < 1) { 21 | currentActive = 1; 22 | } 23 | update(); 24 | }); 25 | 26 | function update() { 27 | circles.forEach((circle, idx) => { 28 | if (idx < currentActive) { 29 | circle.classList.add("active"); 30 | } else { 31 | circle.classList.remove("active"); 32 | } 33 | }); 34 | const actives = document.querySelectorAll(".active"); 35 | progress.style.width = 36 | ((actives.length - 1) / (circles.length - 1)) * 100 + "%"; 37 | 38 | if (currentActive === 1) { 39 | prev.disabled = true; 40 | } else if (currentActive === circles.length) { 41 | next.disabled = true; 42 | } else { 43 | next.disabled = false; 44 | prev.disabled = false; 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /Progress steps/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | border: 0; 5 | } 6 | :root{ 7 | --line-border-fill: #00c3ee; 8 | --line-border-empty: #3a3a3a; 9 | } 10 | 11 | body { 12 | display: flex; 13 | background-color: #151515; 14 | align-items: center; 15 | justify-content: center; 16 | height: 100vh; 17 | overflow: hidden; 18 | font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", 19 | "Lucida Sans Unicode", Geneva, Verdana, sans-serif; 20 | } 21 | 22 | .container { 23 | text-align: center; 24 | } 25 | .progress-container { 26 | display: flex; 27 | justify-content: space-between; 28 | position: relative; 29 | margin-bottom: 20px; 30 | max-width: 100%; 31 | width: 350px; 32 | } 33 | .progress-container::before{ 34 | content: ''; 35 | background-color: var(--line-border-empty); 36 | position: absolute; 37 | height: 4px; 38 | top: 50%; 39 | left: 0; 40 | width: 100%; 41 | transform: translateY(-50%); 42 | z-index: -1; 43 | border-radius: 10px; 44 | } 45 | .progress { 46 | background-color: var(--line-border-fill); 47 | position: absolute; 48 | height: 4px; 49 | top: 50%; 50 | left: 0; 51 | width: 0%; 52 | transform: translateY(-50%); 53 | z-index: -1; 54 | transition: .4s ease-in; 55 | border-radius: 10px; 56 | } 57 | 58 | .circle{ 59 | background-color: #fff; 60 | color: #4e4e4e; 61 | border-radius: 50%; 62 | height: 30px; 63 | width: 30px; 64 | display: flex; 65 | font-weight: 600; 66 | align-items: center; 67 | justify-content: center; 68 | border: 3px solid var(--line-border-empty); 69 | transition: .4s ease; 70 | } 71 | 72 | .circle.active{ 73 | border-color: var(--line-border-fill); 74 | } 75 | 76 | .btn{ 77 | background-color: var(--line-border-fill); 78 | color: #ffff; 79 | font-weight: 600; 80 | border: 0; 81 | border-radius: 5px; 82 | cursor: pointer; 83 | padding: 10px 25px; 84 | margin: 5px; 85 | font-size: 15px; 86 | } 87 | 88 | .btn:active{ 89 | transform: scale(.9); 90 | } 91 | .btn:focus{ 92 | outline: none; 93 | } 94 | .btn:disabled{ 95 | background-color: var(--line-border-empty); 96 | cursor: not-allowed; 97 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 50Javascript projects in 50days. 2 | 3 | 4 | 5 | 6 | 7 | https://50projects50days.com/ 8 | Course link https://www.udemy.com/course/50-projects-50-days/ 9 | -------------------------------------------------------------------------------- /Rotate slide effect/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.linkedEditing": true 3 | } -------------------------------------------------------------------------------- /Rotate slide effect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Rotating CArds 8 | 12 | 13 | 14 | 15 |
16 |
17 |
18 | 21 | 24 |
25 |
26 |
27 |

Welcome to this space

28 | Mo Oye 29 |

30 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro 31 | nostrum quo quis, et alias, doloremque sint corrupti quisquam 32 | exercitationem officia natus possimus animi fugiat adipisci hic 33 | architecto fuga aliquid ex molestias officiis? Eum doloremque officiis 34 | impedit quas nobis asperiores sapiente, totam praesentium aspernatur 35 | tempora vero commodi inventore adipisci illum id voluptatem, earum 36 | excepturi dicta quos cum aliquid dolores? Earum corrupti hic officiis, 37 | voluptate laborum aperiam sunt dolorum iure eveniet, inventore itaque 38 | impedit, ducimus nisi doloremque accusamus ea nulla modi? Labore 39 | voluptatibus illum quasi iusto tempora vitae. Nemo voluptatibus 40 | voluptate impedit reiciendis nostrum, velit veritatis? Doloremque 41 | accusamus quis vitae tempora rerum? 42 |

43 |

It's a good day.

44 | woman holding iphone snapping the sunset 48 |

49 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat quod 50 | cupiditate ducimus sequi consequuntur dolore quos ut deleniti vero 51 | enim reprehenderit, unde dolor distinctio, voluptatum tenetur earum, 52 | qui laudantium repudiandae corporis doloribus nostrum accusamus 53 | molestias? Nemo, maxime reiciendis! A placeat tenetur omnis officia 54 | porro magni fuga culpa delectus deserunt asperiores! 55 |

56 |
57 |
58 | 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /Rotate slide effect/script.js: -------------------------------------------------------------------------------- 1 | const open = document.querySelector("#open"); 2 | const close = document.querySelector("#close"); 3 | const container = document.querySelector(".container"); 4 | 5 | open.addEventListener("click", () => { 6 | container.classList.add("show-nav"); 7 | }); 8 | close.addEventListener("click", () => { 9 | container.classList.remove("show-nav"); 10 | }); 11 | -------------------------------------------------------------------------------- /Rotate slide effect/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: #212121; 10 | color: rgb(230, 230, 230); 11 | overflow-x: hidden; 12 | margin: 0; 13 | } 14 | 15 | .container { 16 | background-color: #0e0e0e; 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: #ff6347; 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: #ff6347; 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 | nav a{ 114 | color: #fafafa; 115 | text-decoration: none; 116 | transition: all 0.5s; 117 | } 118 | 119 | nav a:hover { 120 | color: #FF7979; 121 | font-weight: bold; 122 | } 123 | 124 | .content img { 125 | max-width: 100%; 126 | } 127 | 128 | .content { 129 | max-width: 1000px; 130 | margin: 50px auto; 131 | } 132 | 133 | .content h1 { 134 | margin: 0; 135 | } 136 | 137 | .content small { 138 | color: #ff6347; 139 | font-style: italic; 140 | } 141 | 142 | .content p { 143 | color: inherit; 144 | line-height: 1.5; 145 | } -------------------------------------------------------------------------------- /Scroll animation/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.linkedEditing": true 3 | } -------------------------------------------------------------------------------- /Scroll animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Scroll Animation 8 | 12 | 13 | 14 | 15 |

Scroll to see the animation effect

16 |

My name is Mo

17 |

Welcome to my space

18 |

I identify as female

19 |

My pronouns are she/her

20 |

I am a pianist

21 |

I'm a founder and builder

22 |

I teach music

23 |

I am also a frontend developer

24 |

I love amala (-_-)

25 |

I'm an introvert

26 |

I love dark and cozy spaces

27 |

Okay Bye

28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /Scroll animation/script.js: -------------------------------------------------------------------------------- 1 | const boxes = document.querySelectorAll(".box"); 2 | 3 | window.addEventListener("scroll", checkboxes); 4 | checkboxes(); 5 | 6 | function checkboxes() { 7 | const triggerBottom = (window.innerHeight / 5) * 4; 8 | 9 | boxes.forEach(box =>{ 10 | const boxTop = box.getBoundingClientRect().top 11 | 12 | if (boxTop < triggerBottom) { 13 | box.classList.add('show') 14 | } else { 15 | box.classList.remove("show"); 16 | } 17 | }) 18 | } 19 | 20 | -------------------------------------------------------------------------------- /Scroll animation/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,900;1,200;1,500&display=swap"); 2 | 3 | * { 4 | box-sizing: border-box; 5 | margin: 0; 6 | border: 0; 7 | } 8 | 9 | body { 10 | display: flex; 11 | flex-direction: column; 12 | align-items: center; 13 | text-align: center; 14 | justify-content: center; 15 | font-size: 18px; 16 | font-family: "Source Code Pro", monospace; 17 | background-color: #003030; 18 | color: #00f2f2; 19 | overflow-x: hidden; 20 | } 21 | h1 { 22 | margin: 1.5em; 23 | font-size: 2.1em; 24 | } 25 | 26 | .box { 27 | background-color: #002323; 28 | font-size: 1em; 29 | display: flex; 30 | justify-content: center; 31 | align-items: center; 32 | width: 400px; 33 | height: 200px; 34 | margin: 13px auto; 35 | padding: 30px; 36 | text-align: center; 37 | border-radius: 10px; 38 | box-shadow: 5px 6px 5px #111111, -5px -5px 5px #111111; 39 | transform: translateX(400%); 40 | transition: transform 0.6s ease; 41 | } 42 | 43 | .box:nth-of-type(even) { 44 | transform: translateX(-400%); 45 | } 46 | .box.show { 47 | transform: translateX(0); 48 | } 49 | -------------------------------------------------------------------------------- /Sound Board/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.linkedEditing": true 3 | } -------------------------------------------------------------------------------- /Sound Board/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Sound Board 8 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /Sound Board/script.js: -------------------------------------------------------------------------------- 1 | const sounds = ["applause", "boo", "gasp", "tada", "victory", "wrong"]; 2 | 3 | sounds.forEach((sound) => { 4 | const btn = document.createElement("button"); 5 | 6 | btn.classList.add("btn"); 7 | btn.innerText = sound; 8 | document.querySelector(".buttons").appendChild(btn); 9 | 10 | btn.addEventListener("click", () => { 11 | stopPlaying(); 12 | document.getElementById(sound).play(); 13 | }); 14 | 15 | }); 16 | 17 | function stopPlaying() { 18 | sounds.forEach((sound) => { 19 | let voice = document.getElementById(sound); 20 | voice.pause(); 21 | voice.currentTime = 0; 22 | }); 23 | } 24 | -------------------------------------------------------------------------------- /Sound Board/sounds/sound-board_sounds_applause.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mo-renike/50Javascript-projects/9fa48355aac038e7dd9b231423b3cd88985d4621/Sound Board/sounds/sound-board_sounds_applause.mp3 -------------------------------------------------------------------------------- /Sound Board/sounds/sound-board_sounds_boo.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mo-renike/50Javascript-projects/9fa48355aac038e7dd9b231423b3cd88985d4621/Sound Board/sounds/sound-board_sounds_boo.mp3 -------------------------------------------------------------------------------- /Sound Board/sounds/sound-board_sounds_gasp.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mo-renike/50Javascript-projects/9fa48355aac038e7dd9b231423b3cd88985d4621/Sound Board/sounds/sound-board_sounds_gasp.mp3 -------------------------------------------------------------------------------- /Sound Board/sounds/sound-board_sounds_tada.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mo-renike/50Javascript-projects/9fa48355aac038e7dd9b231423b3cd88985d4621/Sound Board/sounds/sound-board_sounds_tada.mp3 -------------------------------------------------------------------------------- /Sound Board/sounds/sound-board_sounds_victory.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mo-renike/50Javascript-projects/9fa48355aac038e7dd9b231423b3cd88985d4621/Sound Board/sounds/sound-board_sounds_victory.mp3 -------------------------------------------------------------------------------- /Sound Board/sounds/sound-board_sounds_wrong.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mo-renike/50Javascript-projects/9fa48355aac038e7dd9b231423b3cd88985d4621/Sound Board/sounds/sound-board_sounds_wrong.mp3 -------------------------------------------------------------------------------- /Sound Board/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,900;1,200;1,500&display=swap'); 2 | 3 | *{ 4 | box-sizing: border-box; 5 | margin: 0; 6 | border: 0; 7 | } 8 | 9 | body{ 10 | display: flex; 11 | background-color: #101010; 12 | align-items: center; 13 | justify-content: center; 14 | height: 100vh; 15 | overflow: hidden; 16 | font-family:'Source Code Pro', monospace; 17 | } 18 | 19 | .btn{ 20 | background-color: #3333; 21 | color: #ff6347; 22 | text-align: center; 23 | font-size: 1.1em; 24 | padding: 1em 3em; 25 | margin: 1em; 26 | text-transform: uppercase; 27 | cursor: pointer; 28 | border-radius: 10px; 29 | border: none; 30 | } 31 | 32 | .btn:hover{ 33 | transform: scale(1.05); 34 | } 35 | .buttons{ 36 | display: flex; 37 | flex-wrap: wrap; 38 | margin: auto; 39 | } -------------------------------------------------------------------------------- /Split Landing page/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.linkedEditing": true 3 | } -------------------------------------------------------------------------------- /Split Landing page/img/grand.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mo-renike/50Javascript-projects/9fa48355aac038e7dd9b231423b3cd88985d4621/Split Landing page/img/grand.jpg -------------------------------------------------------------------------------- /Split Landing page/img/upright.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mo-renike/50Javascript-projects/9fa48355aac038e7dd9b231423b3cd88985d4621/Split Landing page/img/upright.jpg -------------------------------------------------------------------------------- /Split Landing page/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Split Landing Page 8 | 12 | 13 | 14 | 15 |
16 |
17 |

Upright Pianos

18 | Buy Now 19 |
20 |
21 |

Grand Pianos

22 | Buy Now 23 |
24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /Split Landing page/script.js: -------------------------------------------------------------------------------- 1 | const leftSide = document.querySelector(".left"); 2 | const rightSide = document.querySelector(".right"); 3 | const wrapper = document.querySelector(".container"); 4 | 5 | leftSide.addEventListener("mouseenter", () => 6 | wrapper.classList.add("hover-left") 7 | ); 8 | leftSide.addEventListener("mouseleave", () => 9 | wrapper.classList.remove("hover-left") 10 | ); 11 | 12 | rightSide.addEventListener("mouseenter", () => 13 | wrapper.classList.add("hover-right") 14 | ); 15 | rightSide.addEventListener("mouseleave", () => 16 | wrapper.classList.remove("hover-right") 17 | ); 18 | -------------------------------------------------------------------------------- /Split Landing page/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=roboto:ital,wght@0,900;1,200;1,500&display=swap"); 2 | 3 | * { 4 | box-sizing: border-box; 5 | margin: 0; 6 | border: 0; 7 | } 8 | :root { 9 | --left-bg-color: rgba(98, 78, 89, 0.5); 10 | --right-bg-color: rgba(99, 99, 99, 0.5); 11 | --btn-hover-color: rgb(3, 13, 39); 12 | --hover-width: 75%; 13 | --other-width: 25%; 14 | --speed: 1000ms; 15 | } 16 | body { 17 | height: 100vh; 18 | overflow: hidden; 19 | font-family: "roboto", sans-serif; 20 | font-size: 18px; 21 | } 22 | h1 { 23 | font-size: 3.7em; 24 | color: #181818; 25 | position: absolute; 26 | left: 50%; 27 | top: 20%; 28 | transform: translateX(-50%); 29 | white-space: nowrap; 30 | } 31 | 32 | .container { 33 | width: 100%; 34 | height: 100%; 35 | background: #222; 36 | position: relative; 37 | } 38 | 39 | .split { 40 | position: absolute; 41 | width: 50%; 42 | height: 100%; 43 | overflow: hidden; 44 | } 45 | 46 | .split.left { 47 | left: 0; 48 | background: url("img/upright.jpg"); 49 | background-repeat: no-repeat; 50 | background-size: cover; 51 | } 52 | 53 | .split.left::before { 54 | content: ""; 55 | position: absolute; 56 | width: 100%; 57 | height: 100%; 58 | background-color: var(--left-bg-color); 59 | } 60 | .split.right::before { 61 | content: ""; 62 | position: absolute; 63 | width: 100%; 64 | height: 100%; 65 | background-color: var(--right-bg-color); 66 | } 67 | .split.right { 68 | right: 0; 69 | background: url("img/grand.jpg"); 70 | background-repeat: no-repeat; 71 | background-size: cover; 72 | } 73 | 74 | .split.left, 75 | .split.right, 76 | .split.left::before, 77 | .split.right::before { 78 | transition: all var(--speed) ease-in-out; 79 | } 80 | .btn { 81 | position: absolute; 82 | left: 50%; 83 | top: 40%; 84 | transform: translateX(-50%); 85 | padding: 1em; 86 | width: 10em; 87 | text-align: center; 88 | color: #efefef; 89 | border-radius: 15px; 90 | font-weight: bold; 91 | text-decoration: none; 92 | text-transform: uppercase; 93 | border: 2px solid var(--btn-hover-color); 94 | background-color: transparent; 95 | color: var(--btn-hover-color); 96 | } 97 | .btn:hover { 98 | background-color: var(--btn-hover-color); 99 | color: #efefef; 100 | } 101 | 102 | .hover-left .left { 103 | width: var(--hover-width); 104 | } 105 | .hover-left .right { 106 | width: var(--other-width); 107 | } 108 | .hover-right .left { 109 | width: var(--other-width); 110 | } 111 | .hover-right .right { 112 | width: var(--hover-width); 113 | } 114 | 115 | @media (max-width: 880px) { 116 | body { 117 | font-size: 15px; 118 | } 119 | h1 { 120 | top: 25%; 121 | font-size: 2.5em; 122 | } 123 | } 124 | @media (max-width: 560px) { 125 | body { 126 | font-size: 13px; 127 | } 128 | } 129 | -------------------------------------------------------------------------------- /Sticky Navbar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Sticky NavBar 8 | 12 | 13 | 14 | 15 | 26 |
27 |
28 |

Welcome to my site

29 |

30 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, 31 | quidem ipsa? Itaque consectetur necessitatibus voluptates rerum, 32 | asperiores provident placeat deserunt. 33 |

34 |
35 |
36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /Sticky Navbar/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mo-renike/50Javascript-projects/9fa48355aac038e7dd9b231423b3cd88985d4621/Sticky Navbar/script.js -------------------------------------------------------------------------------- /Sticky Navbar/style.css: -------------------------------------------------------------------------------- 1 | nav { 2 | background-color: #013001; 3 | display: -webkit-box; 4 | display: -ms-flexbox; 5 | display: flex; 6 | } 7 | 8 | nav ul { 9 | margin: 0; 10 | padding: 0; 11 | list-style: none; 12 | display: -webkit-box; 13 | display: -ms-flexbox; 14 | display: flex; 15 | } 16 | 17 | nav li { 18 | display: inline-block; 19 | } 20 | 21 | nav a { 22 | padding: 6px 12px; 23 | color: #dfd1cc; 24 | text-align: center; 25 | text-transform: uppercase; 26 | text-overflow: hidden; 27 | text-decoration: none; 28 | } 29 | 30 | body { 31 | font-family: Helvetica, sans-serif; 32 | font-size: 18px; 33 | font-weight: bold; 34 | } 35 | /*# sourceMappingURL=style.css.map */ -------------------------------------------------------------------------------- /Sticky Navbar/style.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAIA,AAAA,GAAG,CAAC;EACF,gBAAgB,EAHX,OAAO;EAIZ,OAAO,EAAE,IAAI;CAoBd;;AAtBD,AAGE,GAHC,CAGD,EAAE,CAAC;EACD,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,UAAU,EAAE,IAAI;EAChB,OAAO,EAAE,IAAI;CACd;;AARH,AASE,GATC,CASD,EAAE,CAAC;EACD,OAAO,EAAE,YAAY;CACtB;;AAXH,AAYE,GAZC,CAYD,CAAC,CAAC;EACA,OAAO,EAAE,QAAQ;EACjB,KAAK,EAjBF,OAAO;EAmBR,UAAK,EAAE,MAAM;EACb,cAAS,EAAE,SAAS;EACpB,aAAQ,EAAE,MAAM;EAChB,eAAU,EAAE,IAAI;CAEnB;;AAGH,AAAA,IAAI,CAAC;EAED,WAAM,EAAE,qBAAqB;EAC7B,SAAI,EAAE,IAAI;EACV,WAAM,EAAE,IAAI;CAEf", 4 | "sources": [ 5 | "style.scss" 6 | ], 7 | "names": [], 8 | "file": "style.css" 9 | } -------------------------------------------------------------------------------- /Sticky Navbar/style.scss: -------------------------------------------------------------------------------- 1 | $pry1: #007c00; 2 | $pry2: #dfd1cc; 3 | $pry3: #013001; 4 | 5 | nav { 6 | background-color: $pry3; 7 | display: flex; 8 | ul { 9 | margin: 0; 10 | padding: 0; 11 | list-style: none; 12 | display: flex; 13 | } 14 | li { 15 | display: inline-block; 16 | } 17 | a { 18 | padding: 6px 12px; 19 | color: $pry2; 20 | text: { 21 | align: center; 22 | transform: uppercase; 23 | overflow: hidden; 24 | decoration: none; 25 | } 26 | } 27 | } 28 | 29 | body { 30 | font: { 31 | family: Helvetica, sans-serif; 32 | size: 18px; 33 | weight: bold; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /Toast Notofication/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Toast Notification 8 | 12 | 13 | 14 | 15 |
16 |
17 |

Login

18 | 19 | 26 | 27 | 28 | 35 | 36 |
37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /Toast Notofication/script.js: -------------------------------------------------------------------------------- 1 | const button = document.getElementById("btn"); 2 | const toasts = document.getElementById("toasts"); 3 | const email = document.getElementById("email"); 4 | const pwd = document.getElementById("password"); 5 | 6 | button.addEventListener("click", () => createToast()); 7 | 8 | const createToast = () => { 9 | 10 | const notif = document.createElement("div"); 11 | notif.classList.add("toast"); 12 | if (!email.value || !pwd.value) { 13 | notif.innerText = "Please fill all fields"; 14 | notif.style.color = "red"; 15 | } else if ( 16 | email.value == "herroyalpianist@gmail.com" && 17 | pwd.value == "morenike" 18 | ) { 19 | notif.innerText = "Login Successfully"; 20 | notif.style.color = "green"; 21 | } else { 22 | notif.innerText = "invalid Login Details"; 23 | notif.style.color = "red"; 24 | } 25 | 26 | toasts.appendChild(notif); 27 | 28 | setTimeout(() => { 29 | notif.remove(); 30 | }, 4000); 31 | }; 32 | -------------------------------------------------------------------------------- /Toast Notofication/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,900;1,200;1,500&display=swap"); 2 | 3 | * { 4 | box-sizing: border-box; 5 | margin: 0; 6 | border: 0; 7 | } 8 | 9 | body { 10 | background-image: linear-gradient(70deg, #01071a, #1e0202); 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | height: 100vh; 15 | color: #fff; 16 | overflow: hidden; 17 | font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", 18 | "Lucida Sans Unicode", Geneva, Verdana, sans-serif; 19 | } 20 | 21 | form { 22 | background: rgba(255, 255, 255, 0.1); 23 | border-radius: 10px; 24 | box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8); 25 | backdrop-filter: blur(3.9px); 26 | -webkit-backdrop-filter: blur(3.9px); 27 | border: 1px solid rgba(255, 255, 255, 0.1); 28 | padding: 2rem 1rem; 29 | display: flex; 30 | width: 350px; 31 | flex-direction: column; 32 | } 33 | 34 | h1 { 35 | margin-bottom: 2.7rem; 36 | text-align: center; 37 | } 38 | form input { 39 | border-radius: 10px; 40 | background-color: transparent; 41 | border: 1px solid rgba(255, 255, 255, 0.7); 42 | margin: 5px 0 10px; 43 | padding: 10px; 44 | outline: none; 45 | color: rgba(255, 255, 255, 0.7); 46 | } 47 | label { 48 | opacity: 0.4; 49 | font-weight: bold; 50 | font-size: 0.79rem; 51 | } 52 | 53 | button, 54 | .toast { 55 | padding: 9px; 56 | background-color: white; 57 | border-radius: 10px; 58 | border: 1px solid rgba(255, 255, 255, 0.7); 59 | transition: 0.4s ease; 60 | margin-top: 5px; 61 | color: #01071a; 62 | font-weight: bold; 63 | font-size: 1.1rem; 64 | text-transform: capitalize; 65 | cursor: pointer; 66 | } 67 | button:hover { 68 | border: 1px solid rgba(255, 255, 255, 0.7); 69 | color: white; 70 | background-color: transparent; 71 | } 72 | button:active { 73 | transform: scale(0.98); 74 | } 75 | .toast { 76 | transition: 0.3s ease; 77 | padding: 10px 1rem; 78 | font-size: 0.8rem; 79 | box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8); 80 | } 81 | 82 | #toasts { 83 | position: fixed; 84 | top: 10px; 85 | display: flex; 86 | flex-direction: column; 87 | align-items: flex-end; 88 | right: 10px; 89 | } 90 | -------------------------------------------------------------------------------- /Vertical SLider/img/blackGirl.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mo-renike/50Javascript-projects/9fa48355aac038e7dd9b231423b3cd88985d4621/Vertical SLider/img/blackGirl.JPG -------------------------------------------------------------------------------- /Vertical SLider/img/gold.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mo-renike/50Javascript-projects/9fa48355aac038e7dd9b231423b3cd88985d4621/Vertical SLider/img/gold.JPG -------------------------------------------------------------------------------- /Vertical SLider/img/mama.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mo-renike/50Javascript-projects/9fa48355aac038e7dd9b231423b3cd88985d4621/Vertical SLider/img/mama.JPG -------------------------------------------------------------------------------- /Vertical SLider/img/pupleDresss.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mo-renike/50Javascript-projects/9fa48355aac038e7dd9b231423b3cd88985d4621/Vertical SLider/img/pupleDresss.JPG -------------------------------------------------------------------------------- /Vertical SLider/img/white wedding.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mo-renike/50Javascript-projects/9fa48355aac038e7dd9b231423b3cd88985d4621/Vertical SLider/img/white wedding.JPG -------------------------------------------------------------------------------- /Vertical SLider/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vertical Slider 8 | 9 | 10 | 11 |
12 |
13 |
14 |

Affordable Luxury

15 |

We offer Convienent payment Plans you tailored to suit you

16 |
17 |
18 |

Prompt Delivery

19 |

Wherever you are - in the world, in the moon, we gatchu

20 |
21 |
22 |

Quality Products

23 |

We take pride in bringing you only the best Quality products

24 |
25 |
26 |

You first

27 |

28 | Our customer service has always been our forte. We are dedicated to 29 | maing sure your needs are all met. 30 |

31 |
32 |
33 |
34 |
38 |
39 |
40 |
44 |
45 |
46 | D 47 | U 48 |
49 |
50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /Vertical SLider/script.js: -------------------------------------------------------------------------------- 1 | let wrapper = document.querySelector(".wrapper"); 2 | let leftSlide = document.querySelector(".left-bar"); 3 | let rightSlide = document.querySelector(".right-bar"); 4 | let upBtn = document.querySelector(".up"); 5 | let downBtn = document.querySelector(".down"); 6 | let slideLength = rightSlide.querySelectorAll("div").length; 7 | 8 | let activeSlideIndex = 0; 9 | 10 | leftSlide.style.top = `-${(slideLength - 1) * 100}vh`; 11 | 12 | upBtn.addEventListener("click", () => changeSlide("up")); 13 | downBtn.addEventListener("click", () => changeSlide("down")); 14 | 15 | const changeSlide = (direction) => { 16 | const sliderHeight = wrapper.clientHeight; 17 | if (direction === "up") { 18 | activeSlideIndex++; 19 | if (activeSlideIndex > slideLength - 1) { 20 | activeSlideIndex = 0; 21 | } 22 | } else if (direction === "down") { 23 | activeSlideIndex--; 24 | if (activeSlideIndex < 0) { 25 | activeSlideIndex = slideLength - 1; 26 | } 27 | } 28 | rightSlide.style.transform = `translateY(-${ 29 | activeSlideIndex * sliderHeight 30 | }px)`; 31 | leftSlide.style.transform = `translateY(${ 32 | activeSlideIndex * sliderHeight 33 | }px)`; 34 | }; 35 | -------------------------------------------------------------------------------- /Vertical SLider/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | border: none; 5 | box-sizing: border-box; 6 | } 7 | 8 | body { 9 | font-size: 16px; 10 | height: 100vh; 11 | font-family: "Open Sans" sans-serif; 12 | } 13 | 14 | .wrapper { 15 | position: relative; 16 | overflow: hidden; 17 | width: 100vw; 18 | height: 100vh; 19 | } 20 | .left-bar { 21 | width: 30%; 22 | position: absolute; 23 | left: 0; 24 | top: 0; 25 | height: 100%; 26 | transition: transform 0.6s ease-in-out; 27 | } 28 | .right-bar { 29 | width: 70%; 30 | top: 0; 31 | left: 30%; 32 | height: 100%; 33 | position: absolute; 34 | transition: transform 0.6s ease-in-out; 35 | } 36 | 37 | .img { 38 | background-repeat: no-repeat; 39 | background-size: cover; 40 | background-position: top center; 41 | height: 100%; 42 | width: 100%; 43 | } 44 | .img img { 45 | object-fit: contain; 46 | object-position: center; 47 | } 48 | .text { 49 | height: 100%; 50 | display: flex; 51 | justify-content: center; 52 | align-items: center; 53 | padding: 1rem; 54 | flex-direction: column; 55 | text-align: center; 56 | } 57 | 58 | h3 { 59 | margin: 0.5rem 0; 60 | font-size: 2rem; 61 | } 62 | 63 | 64 | .actions > span { 65 | padding: 10px; 66 | position: absolute; 67 | bottom: 0%; 68 | left: 30%; 69 | font-weight: bold; 70 | background-color: #456f77; 71 | border: 1px solid #456f77; 72 | color: #fff; 73 | cursor: pointer; 74 | transition: 0.3s ease; 75 | } 76 | .actions span:hover { 77 | border: 1px solid #456f77; 78 | background-color: transparent; 79 | color: #456f77; 80 | } 81 | .down { 82 | transform: translateX(-100%); 83 | border-bottom-left-radius: 5px; 84 | border-top-left-radius: 5px; 85 | } 86 | .up { 87 | transform: translateY(-100%); 88 | border-bottom-right-radius: 5px; 89 | border-top-right-radius: 5px; 90 | } 91 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 50Javascript Projects 8 | 69 | 70 | 71 |
72 |
73 |
74 |

50 Javascript Projects

75 | Github Repo 78 |
79 |
80 | Animated Navigation 81 | Split Landing page 82 | Blurry Loading 83 | Dad Jokes 84 | Expanding Cards 85 | FAQ 86 | Hidden search widget 87 | Increment Counter 88 | KeyCodes Generator 89 | Progress Steps 90 | Scroll Animation 91 | Sound Board 92 | Form Input Wave 93 | Mini Mani Mo 94 | Rotate Side Effect 95 | Drink Water 96 | Movie App 97 | Background Slider 98 | Analog Clock 99 | Button ripple Effect 100 | Drag n Drop 101 | Drawing App 102 | Kinetic Loader 103 | Content Placeholder 104 | Vertical Slider 105 | Toast Alerts 106 | Github Profiles 107 | 108 | 109 | 112 |
113 |
114 |
115 | 116 | 117 | -------------------------------------------------------------------------------- /kinetic loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | kinetic Loader 8 | 12 | 13 | 14 | 15 |
16 | 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /kinetic loader/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mo-renike/50Javascript-projects/9fa48355aac038e7dd9b231423b3cd88985d4621/kinetic loader/script.js -------------------------------------------------------------------------------- /kinetic loader/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | border: 0; 5 | } 6 | 7 | body { 8 | background: linear-gradient(30deg, #560025, #0c0074); 9 | display: flex; 10 | flex-direction: column; 11 | align-items: center; 12 | justify-content: center; 13 | height: 100vh; 14 | overflow: hidden; 15 | } 16 | 17 | .kinetic { 18 | position: relative; 19 | height: 80px; 20 | width: 80px; 21 | } 22 | 23 | .kinetic::after, 24 | .kinetic::before { 25 | content: ""; 26 | position: absolute; 27 | top: 0; 28 | left: 0; 29 | width: 0; 30 | height: 0; 31 | border: 50px solid transparent; 32 | border-bottom-color: #fff; 33 | animation: rotateA 2s linear infinite 0.5s; 34 | } 35 | 36 | .kinetic::before { 37 | transform: rotate(90deg); 38 | animation: rotateB 2s linear infinite; 39 | } 40 | 41 | @keyframes rotateA { 42 | 0%, 43 | 25% { 44 | transform: rotate(0deg); 45 | } 46 | 50%, 47 | 75% { 48 | transform: rotate(180deg); 49 | } 50 | 100% { 51 | transform: rotate(360deg); 52 | } 53 | } 54 | @keyframes rotateB { 55 | 0%, 56 | 25% { 57 | transform: rotate(90deg); 58 | } 59 | 50%, 60 | 75% { 61 | transform: rotate(270deg); 62 | } 63 | 100% { 64 | transform: rotate(450deg); 65 | } 66 | } 67 | --------------------------------------------------------------------------------