├── app.js ├── assets └── images │ ├── HeartRain.gif │ ├── PopupModal.gif │ ├── SoundBoard.gif │ ├── ZoomEffect.png │ ├── play-button.png │ ├── HamburgerMenu.gif │ ├── ImageCarousel.png │ ├── ToastGenerator.gif │ ├── autoTextWriter.gif │ ├── DarkModeToggler.gif │ └── BackgroundChanger.gif ├── SoundBoard ├── sounds │ ├── DirilisMusic1.mp3 │ ├── DirilisMusic2.mp3 │ ├── DirilisMusic3.mp3 │ └── DirilisMusic4.mp3 ├── style.css ├── index.html └── app.js ├── DarkModeToggle ├── app.js ├── index.html └── style.css ├── Hamburger ├── app.js ├── index.html └── style.css ├── BackgroundChanger ├── app.js ├── index.html └── style.css ├── HeartRain ├── style.css ├── index.html └── app.js ├── AutoWriteText ├── style.css ├── app.js └── index.html ├── ImageCarousel ├── app.js ├── style.css └── index.html ├── ZoomEffect ├── style.css ├── app.js └── index.html ├── PopUpModal ├── app.js ├── index.html └── style.css ├── ToastNotification ├── index.html ├── app.js └── style.css ├── LICENSE ├── style.css ├── README.md └── index.html /app.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/HeartRain.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sameem420/10MiniProjectsChallenge/HEAD/assets/images/HeartRain.gif -------------------------------------------------------------------------------- /assets/images/PopupModal.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sameem420/10MiniProjectsChallenge/HEAD/assets/images/PopupModal.gif -------------------------------------------------------------------------------- /assets/images/SoundBoard.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sameem420/10MiniProjectsChallenge/HEAD/assets/images/SoundBoard.gif -------------------------------------------------------------------------------- /assets/images/ZoomEffect.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sameem420/10MiniProjectsChallenge/HEAD/assets/images/ZoomEffect.png -------------------------------------------------------------------------------- /assets/images/play-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sameem420/10MiniProjectsChallenge/HEAD/assets/images/play-button.png -------------------------------------------------------------------------------- /assets/images/HamburgerMenu.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sameem420/10MiniProjectsChallenge/HEAD/assets/images/HamburgerMenu.gif -------------------------------------------------------------------------------- /assets/images/ImageCarousel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sameem420/10MiniProjectsChallenge/HEAD/assets/images/ImageCarousel.png -------------------------------------------------------------------------------- /assets/images/ToastGenerator.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sameem420/10MiniProjectsChallenge/HEAD/assets/images/ToastGenerator.gif -------------------------------------------------------------------------------- /assets/images/autoTextWriter.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sameem420/10MiniProjectsChallenge/HEAD/assets/images/autoTextWriter.gif -------------------------------------------------------------------------------- /assets/images/DarkModeToggler.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sameem420/10MiniProjectsChallenge/HEAD/assets/images/DarkModeToggler.gif -------------------------------------------------------------------------------- /SoundBoard/sounds/DirilisMusic1.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sameem420/10MiniProjectsChallenge/HEAD/SoundBoard/sounds/DirilisMusic1.mp3 -------------------------------------------------------------------------------- /SoundBoard/sounds/DirilisMusic2.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sameem420/10MiniProjectsChallenge/HEAD/SoundBoard/sounds/DirilisMusic2.mp3 -------------------------------------------------------------------------------- /SoundBoard/sounds/DirilisMusic3.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sameem420/10MiniProjectsChallenge/HEAD/SoundBoard/sounds/DirilisMusic3.mp3 -------------------------------------------------------------------------------- /SoundBoard/sounds/DirilisMusic4.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sameem420/10MiniProjectsChallenge/HEAD/SoundBoard/sounds/DirilisMusic4.mp3 -------------------------------------------------------------------------------- /assets/images/BackgroundChanger.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sameem420/10MiniProjectsChallenge/HEAD/assets/images/BackgroundChanger.gif -------------------------------------------------------------------------------- /DarkModeToggle/app.js: -------------------------------------------------------------------------------- 1 | const toggler = document.getElementById('toggle'); 2 | 3 | toggler.addEventListener('change', (e) => { 4 | document.body.classList.toggle('dark', e.target.checked); 5 | }) -------------------------------------------------------------------------------- /Hamburger/app.js: -------------------------------------------------------------------------------- 1 | let navWrapper = document.querySelector('.nav-wrapper'), 2 | navToogler = document.querySelector('.nav-toogler') 3 | 4 | navToogler.addEventListener('click', function (event) { 5 | navWrapper.classList.toggle('active') 6 | }) -------------------------------------------------------------------------------- /BackgroundChanger/app.js: -------------------------------------------------------------------------------- 1 | const btnBGChanger = document.getElementById('changebg'); 2 | 3 | btnBGChanger.addEventListener('click', () => { 4 | document.body.style.background = randomBG(); 5 | }) 6 | 7 | const randomBG= () => { 8 | return `hsl(${Math.floor(Math.random() * 360)}, 100%, 50%)`; 9 | } -------------------------------------------------------------------------------- /HeartRain/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | box-sizing: border-box; 3 | } 4 | .heart { 5 | position: fixed; 6 | top: -1vh; 7 | transform: translateY(0); 8 | animation: fall 3s linear forwards; 9 | } 10 | @keyframes fall { 11 | to { 12 | transform: translateY(105vh); 13 | } 14 | } -------------------------------------------------------------------------------- /HeartRain/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Heart Rain 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /AutoWriteText/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Galdeano&display=swap'); 2 | 3 | body { 4 | background-color: rgb(0,102,102); 5 | } 6 | #wrapper { 7 | height: 500px; 8 | display: grid; 9 | place-items: center; 10 | font-family: 'Galdeano', sans-serif; 11 | font-size: 25px; 12 | color: white; 13 | } 14 | -------------------------------------------------------------------------------- /ImageCarousel/app.js: -------------------------------------------------------------------------------- 1 | const imgs = document.getElementById("imgs"); 2 | 3 | const img = document.querySelectorAll("#imgs img"); 4 | 5 | let idx = 0; 6 | 7 | function runCarousel() { 8 | idx++; 9 | if(idx > img.length - 1) 10 | { 11 | idx = 0; 12 | } 13 | imgs.style.transform = `translateX(${-idx * 500}px)`; 14 | 15 | } 16 | 17 | setInterval(runCarousel, 2000); -------------------------------------------------------------------------------- /HeartRain/app.js: -------------------------------------------------------------------------------- 1 | function generateHeart() { 2 | const heart = document.createElement('div'); 3 | heart.innerText = "💖"; 4 | heart.style.left = Math.random() * 100 + 'vw'; 5 | heart.style.animationDuration = Math.random() * 2 + 3 + 's'; 6 | heart.classList.add('heart'); 7 | document.body.appendChild(heart); 8 | } 9 | 10 | setInterval(generateHeart, 300); -------------------------------------------------------------------------------- /AutoWriteText/app.js: -------------------------------------------------------------------------------- 1 | const myText = `Hello There! 2 | I am a React/React Native Engineer`; 3 | const divWrapper = document.getElementById('wrapper'); 4 | 5 | let index = 0; 6 | 7 | writeText = () => { 8 | divWrapper.innerText = myText.slice(0,index); 9 | index++; 10 | if(index > myText.length) 11 | { 12 | index = 0; 13 | } 14 | } 15 | 16 | setInterval(writeText, 100); -------------------------------------------------------------------------------- /AutoWriteText/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Auto Text Writer 7 | 8 | 9 | 10 |
11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /BackgroundChanger/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Background Changer 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /ZoomEffect/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | min-height: 100vh; 6 | } 7 | #container { 8 | box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.4); 9 | width: 500px; 10 | height: 500px; 11 | overflow: hidden; 12 | } 13 | img { 14 | transform-origin: center center; 15 | object-fit: cover; 16 | width: 100%; 17 | height: 100%; 18 | } -------------------------------------------------------------------------------- /PopUpModal/app.js: -------------------------------------------------------------------------------- 1 | const btnOpenModal = document.getElementById('btnOpenModal'); 2 | const btnCloseModal = document.getElementById('btnCloseModal'); 3 | const modalContainer = document.getElementById('popup-container'); 4 | 5 | btnOpenModal.addEventListener('click', () => { 6 | modalContainer.classList.add('active'); 7 | }); 8 | 9 | btnCloseModal.addEventListener('click', () => { 10 | modalContainer.classList.remove('active'); 11 | }); -------------------------------------------------------------------------------- /ToastNotification/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Toast Generator 7 | 8 | 9 | 10 |
11 | 12 |
13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /DarkModeToggle/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Dark Mode Toggler 7 | 8 | 9 | 10 |
11 | 12 | 13 |
14 |

Muhammad Sameem

15 | 16 | 17 | -------------------------------------------------------------------------------- /ImageCarousel/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | min-height: 100vh; 6 | } 7 | .carousel { 8 | box-shadow: 2px 2px 5px rgba(218, 181, 181, 0.4); 9 | overflow: hidden; 10 | height: 500px; 11 | width: 500px; 12 | } 13 | .image-container { 14 | display: flex; 15 | transition: transform 0.5s ease-in-out; 16 | transform: translateX(0); 17 | } 18 | img { 19 | object-fit: cover; 20 | height: 500px; 21 | width: 500px; 22 | } -------------------------------------------------------------------------------- /SoundBoard/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | min-height: 100vh; 6 | } 7 | .btn { 8 | background-color: rgb(70, 56, 80); 9 | background-image: url("../assets/images/play-button.png"); 10 | background-repeat: no-repeat; 11 | background-position: left top; 12 | background-size: 50px 50px; 13 | color: white; 14 | height: 50px; 15 | width: 200px; 16 | margin: 5px; 17 | outline: none; 18 | border: none; 19 | border-radius: 25px; 20 | } -------------------------------------------------------------------------------- /ZoomEffect/app.js: -------------------------------------------------------------------------------- 1 | const container = document.getElementById("container"); 2 | const img = document.querySelector("img"); 3 | 4 | container.addEventListener('mousemove', (e) => { 5 | const x = e.clientX - e.target.offsetLeft; 6 | const y = e.clientY - e.target.offsetTop; 7 | 8 | img.style.transformOrigin = `${x}px ${y}px`; 9 | img.style.transform = `scale(2)`; 10 | }); 11 | 12 | container.addEventListener('mouseleave', () => { 13 | img.style.transformOrigin = `center center`; 14 | img.style.transform = `scale(1)`; 15 | }); -------------------------------------------------------------------------------- /ToastNotification/app.js: -------------------------------------------------------------------------------- 1 | const btnToast = document.getElementById("btnToast"); 2 | const divWrapper = document.getElementById("wrapper"); 3 | 4 | btnToast.addEventListener('click', () => { 5 | generateNotification(); 6 | }); 7 | 8 | function generateNotification() { 9 | const notification = document.createElement('div'); 10 | notification.classList.add('toast'); 11 | 12 | notification.innerText = "Hi There, I am a Toast!"; 13 | divWrapper.appendChild(notification); 14 | 15 | setTimeout(() => { 16 | notification.remove(); 17 | }, 5000); 18 | } -------------------------------------------------------------------------------- /ZoomEffect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Zoom Effect 7 | 8 | 9 | 10 |
11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /PopUpModal/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | PopUp / Modal 7 | 8 | 9 | 10 | 11 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /SoundBoard/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sound Board 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /SoundBoard/app.js: -------------------------------------------------------------------------------- 1 | const sounds = ["DirilisMusic1","DirilisMusic2","DirilisMusic3","DirilisMusic4"]; 2 | 3 | sounds.forEach((sound) => { 4 | const btn = document.createElement("button"); 5 | btn.innerText = sound; 6 | btn.classList.add('btn'); 7 | document.body.appendChild(btn); 8 | btn.addEventListener("click", () => { 9 | stopSong(); 10 | document.getElementById(sound).play(); 11 | }); 12 | }); 13 | 14 | const stopSong = () => { 15 | sounds.forEach((sound) => { 16 | const currentSong = document.getElementById(sound); 17 | currentSong.pause(); 18 | currentSong.currentTime = 0; 19 | }); 20 | } -------------------------------------------------------------------------------- /BackgroundChanger/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | body { 5 | height: 100%; 6 | display: flex; 7 | align-items: center; 8 | justify-content: center; 9 | } 10 | button { 11 | background-color: blueviolet; 12 | color: white; 13 | font-size: 25px; 14 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 15 | box-shadow: 2px 2px 6px rgba(rgb(26, 25, 25), rgb(111, 112, 111), rgb(174, 174, 182), 0.4); 16 | border-radius: 5px; 17 | border: none; 18 | outline: none; 19 | width: 150px; 20 | height: 50px; 21 | transition: transform 0.1s linear; 22 | } 23 | button:active { 24 | transform: translate(3px,3px); 25 | } -------------------------------------------------------------------------------- /Hamburger/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hamburger Menu 7 | 8 | 9 | 10 |
11 | 22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /ToastNotification/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Galdeano&display=swap'); 2 | body { 3 | display: flex; 4 | flex-flow: column wrap; 5 | justify-content: center; 6 | align-items: center; 7 | min-height: 100vh; 8 | } 9 | #wrapper { 10 | /* height: 500px; */ 11 | display: grid; 12 | place-items: center; 13 | font-family: 'Galdeano', sans-serif; 14 | position: fixed; 15 | top: 10px; 16 | right: 10px; 17 | } 18 | #btnToast { 19 | color: white; 20 | background-color: rebeccapurple; 21 | font-family: 'Galdeano', sans-serif; 22 | font-size: 20px; 23 | height: 100px; 24 | width: 300px; 25 | border: none; 26 | border-radius: 50px; 27 | outline: none; 28 | padding: 1rem; 29 | } 30 | .toast { 31 | background-color: rebeccapurple; 32 | color: #fff; 33 | width: 200px; 34 | text-align: center; 35 | padding: 1rem; 36 | border-radius: 25px; 37 | margin: 0.5rem; 38 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Muhammad Sameem 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /PopUpModal/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: grid; 3 | place-items: center; 4 | } 5 | #popup-container { 6 | position: fixed; 7 | top: 0; 8 | bottom: 0; 9 | left: 0; 10 | right: 0; 11 | background-color: rgba(0, 0, 0, .5); 12 | display: none; 13 | place-items: center; 14 | } 15 | #popup-container.active { 16 | display: grid; 17 | } 18 | #popup { 19 | position: relative; 20 | width: 500px; 21 | border-radius: 5px; 22 | box-shadow: 2px 2px 10px rgba(0, 0, 0, .5); 23 | background-color: #fff; 24 | padding: 2rem; 25 | } 26 | #popup button { 27 | position: absolute; 28 | top: 10px; 29 | right: 10px; 30 | } 31 | #btnCloseModal { 32 | background-color: red; 33 | color: white; 34 | outline: none; 35 | border: 1px solid white; 36 | border-radius: 10px; 37 | height: 20px; 38 | width: 25px; 39 | text-align: center; 40 | } 41 | #btnOpenModal { 42 | background-color: rgb(85, 80, 80); 43 | color: white; 44 | outline: none; 45 | border: 1px solid white; 46 | border-radius: 25px; 47 | height: 50px; 48 | width: 100px; 49 | text-align: center; 50 | } -------------------------------------------------------------------------------- /ImageCarousel/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Image Carousel 7 | 8 | 9 | 10 |
11 |
12 | 13 | 14 | 15 | 16 |
17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Texturina&display=swap'); 2 | 3 | body { 4 | background-image: radial-gradient( circle farthest-corner at 50.3% 44.5%, rgba(116,147,179,1) 0%, rgba(62,83,104,1) 100.2% ); 5 | box-sizing: border-box; 6 | font-family: 'Texturina', serif; 7 | } 8 | #wrapper { 9 | display: flex; 10 | flex-flow: row wrap; 11 | justify-content: space-around; 12 | font-family: 'Texturina', serif; 13 | font-size: 20px; 14 | color: white; 15 | } 16 | #wrapper > div { 17 | width: 350px; 18 | box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.4); 19 | border-radius: 5px; 20 | background-color: #f1f1f1; 21 | color: darkslategray; 22 | margin: 10px; 23 | padding: 20px; 24 | text-align: center; 25 | position: relative; 26 | } 27 | img { 28 | margin-bottom: 30px; 29 | } 30 | #techStack { 31 | position: absolute; 32 | bottom: 5px; 33 | left: 0; 34 | right: 0; 35 | } 36 | button { 37 | font-family: 'Texturina', serif; 38 | border: none; 39 | border-radius: 5px; 40 | outline: none; 41 | background-image: radial-gradient( circle farthest-corner at -4% -12.9%, rgba(74,98,110,1) 0.3%, rgba(30,33,48,1) 90.2% ); 42 | color: white; 43 | width: 100px; 44 | height: 30px; 45 | } 46 | h1{ 47 | text-align: center; 48 | color: #f1f1f1; 49 | font-size: 36px; 50 | } 51 | footer { 52 | text-align: center; 53 | color: #f1f1f1; 54 | } 55 | a { 56 | text-decoration: none; 57 | } -------------------------------------------------------------------------------- /DarkModeToggle/style.css: -------------------------------------------------------------------------------- 1 | #wrapper { 2 | position: absolute; 3 | top:10px; 4 | right: 20px; 5 | } 6 | body { 7 | display: grid; 8 | place-content: center; 9 | margin: 0; 10 | height: 100vh; 11 | background: silver; 12 | } 13 | #toggle { 14 | position: absolute; 15 | right: 100vw; 16 | } 17 | #toggle + label { 18 | --i: 0; 19 | --j: calc(1 - var(--i)); 20 | display: grid; 21 | grid-gap: 0.5em 0.25em; 22 | overflow: hidden; 23 | padding: 0.5em; 24 | height: 1.5em; 25 | border-radius: 1.75em; 26 | background: hsl(199, 98%, calc(var(--j)*48%)); 27 | color: transparent; 28 | user-select: none; 29 | transition: .3s; 30 | cursor: pointer; 31 | } 32 | #toggle + label:before, #toggle + label:after { 33 | width: 1.5em; 34 | height: 1.5em; 35 | transition: inherit; 36 | content: ""; 37 | } 38 | #toggle + label:before { 39 | transform-origin: 20% 20%; 40 | transform: translate(calc(var(--i)*(100% + 0.25em))) scale(calc(1 - var(--i)*.7)); 41 | background: yellow; 42 | --poly: polygon(44.13371% 12.96169%, 50% 0%, 55.86629% 12.96169%, 59.70571% 13.77778%, 63.4388% 14.99073%, 67.02464% 16.58726%, 79.38926% 9.54915%, 76.5165% 23.4835%, 79.14297% 26.40049%, 81.45015% 29.57604%, 83.41274% 32.97536%, 97.55283% 34.54915%, 87.03831% 44.13371%, 87.44861% 48.0374%, 87.44861% 51.9626%, 87.03831% 55.86629%, 97.55283% 65.45085%, 83.41274% 67.02464%, 81.45015% 70.42396%, 79.14297% 73.59951%, 76.5165% 76.5165%, 79.38926% 90.45085%, 67.02464% 83.41274%, 63.4388% 85.00927%, 59.70571% 86.22222%, 55.86629% 87.03831%, 50% 100%, 44.13371% 87.03831%, 40.29429% 86.22222%, 36.5612% 85.00927%, 32.97536% 83.41274%, 20.61074% 90.45085%, 23.4835% 76.5165%, 20.85703% 73.59951%, 18.54985% 70.42396%, 16.58726% 67.02464%, 2.44717% 65.45085%, 12.96169% 55.86629%, 12.55139% 51.9626%, 12.55139% 48.0374%, 12.96169% 44.13371%, 2.44717% 34.54915%, 16.58726% 32.97536%, 18.54985% 29.57604%, 20.85703% 26.40049%, 23.4835% 23.4835%, 20.61074% 9.54915%, 32.97536% 16.58726%, 36.5612% 14.99073%, 40.29429% 13.77778%); 43 | -webkit-clip-path: var(--poly); 44 | clip-path: var(--poly); 45 | } 46 | #toggle + label:after { 47 | grid-column: 2; 48 | border-radius: 50%; 49 | transform: translatey(calc(var(--i)*(-100% - 0.5em))); 50 | background: radial-gradient(circle at 19% 19%, rgba(0, 0, 0, 0) 41%, #ffffff 43%); 51 | } 52 | #toggle:checked + label { 53 | --i: 1; 54 | } 55 | body.dark { 56 | background-color: #1f1f1f; 57 | color: #e8e0e0; 58 | } 59 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # JavaScriptApps-10MiniProjects-Challenge 2 | 3 | *Completing 10 different Mini-Projects Challenge 🚀* 4 | ## 📙 DESCRIPTION : 5 | + Welcome to our collection of **10 mini-projects** using HTML, CSS, and JavaScript! 6 | + These projects are designed to help you build a solid foundation in web development and improve your skills in creating dynamic and interactive websites. 7 | + Each project is designed to be self-contained and easy to follow, with clean code and perfect execution. 8 | + The projects range from simple exercises to more complex JavaScript applications, to enhance your knowledge on these technologies. 9 | + This collection is perfect for beginners who want to learn web development or for more experienced developers who want to expand their skills and flex their creative muscles. 10 | + By the end of these projects, you will have a strong understanding of the basics of web development and be able to create your own websites. 11 | 12 |

So let's start building some amazing projects!

13 |
14 | 15 | ## 📸 DEMO : 16 | Check the [MiniProjects](https://sameem420.github.io/10MiniProjectsChallenge/) websites to see what exciting projects you will be building 17 |

18 | 19 | 20 | 21 | | Project Name | Project Deployed Link | 22 | | ---- | ---- | 23 | | Hamburger Menu | [Preview](https://sameem420.github.io/10MiniProjectsChallenge/Hamburger/) | 24 | | Toast Generator | [Preview](https://sameem420.github.io/10MiniProjectsChallenge/ToastNotification/) | 25 | | Auto-Text Writer | [Preview](https://sameem420.github.io/10MiniProjectsChallenge/AutoWriteText/) | 26 | | Background Changer | [Preview](https://sameem420.github.io/10MiniProjectsChallenge/BackgroundChanger/) | 27 | | Heart Rain | [Preview](https://sameem420.github.io/10MiniProjectsChallenge/HeartRain/) | 28 | | Popup Modal | [Preview](https://sameem420.github.io/10MiniProjectsChallenge/PopUpModal/) | 29 | | Dark-Mode Toggler | [Preview](https://sameem420.github.io/10MiniProjectsChallenge/DarkModeToggle//) | 30 | | Image Carousel | [Preview](https://sameem420.github.io/10MiniProjectsChallenge/ImageCarousel/) | 31 | | Sound Board | [Preview](https://sameem420.github.io/10MiniProjectsChallenge/SoundBoard/) | 32 | | Zoom Effect | [Preview](https://sameem420.github.io/10MiniProjectsChallenge/ZoomEffect/) | 33 | 34 | ## Author 👋 : 35 | 36 | - [Muhammad Sameem](https://github.com/sameem420) 37 | 38 | ## License 39 | 40 | This project is licensed under the [MIT License](https://choosealicense.com/licenses/mit/) - see the [LICENSE](https://github.com/sameem420/10MiniProjectsChallenge/blob/main/LICENSE) file for details. 41 | 42 |

43 |

© 2020 Muhammad Sameem

44 | -------------------------------------------------------------------------------- /Hamburger/style.css: -------------------------------------------------------------------------------- 1 | /*Counsidere sharing with friends if you like it :) */ 2 | 3 | *, *::before, *::after{ 4 | box-sizing: border-box; 5 | } 6 | 7 | body{ 8 | height: 100vh; 9 | padding: 0; 10 | margin: 0; 11 | overflow: hidden; 12 | } 13 | 14 | .nav-wrapper{ 15 | position: relative; 16 | width: 100%; 17 | height: 100%; 18 | font-family: "Trebuchet MS" , Arial; 19 | } 20 | .nav-wrapper::before, 21 | .nav-wrapper::after{ 22 | content: ''; 23 | position: relative; 24 | display: block; 25 | width: 100%; 26 | height: 50%; 27 | background-color: #EAFBFF; 28 | } 29 | .nav-wrapper::after{ 30 | background-color: #208FF9; 31 | } 32 | 33 | .nav-wrapper nav{ 34 | position: absolute; 35 | top: 0; 36 | z-index: 1; 37 | width: 100%; 38 | height: 100%; 39 | display: flex; 40 | justify-content: center; 41 | align-items: center; 42 | } 43 | .navigation{ 44 | max-width: 500px; 45 | border-radius: 8px; 46 | box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2); 47 | background-color: #fff; 48 | padding-right: 30px; 49 | line-height: 3; 50 | display: flex; 51 | justify-content: space-between; 52 | align-items: center; 53 | } 54 | .nav-wrapper ul{ 55 | display: flex; 56 | justify-content: space-between; 57 | list-style: none; 58 | width: 0; 59 | overflow: hidden; 60 | transition: .4s cubic-bezier(.77,0,.18,1); 61 | } 62 | .nav-wrapper.active ul{ 63 | width: 420px; 64 | margin-right: 20px; 65 | } 66 | 67 | a{ 68 | color: #888; 69 | text-decoration: none; 70 | transition: .3s; 71 | } 72 | a:hover{ 73 | color: #3C9DFB; 74 | } 75 | 76 | .nav-toogler{ 77 | position: relative; 78 | display: inline-block; 79 | width: 40px; 80 | height: 48px; 81 | padding: 14px 5px; 82 | cursor: pointer; 83 | } 84 | .nav-wrapper:not(.active) .nav-toogler{ 85 | margin-left: -10px; 86 | } 87 | .nav-toogler::before, 88 | .nav-toogler::after{ 89 | content: ''; 90 | position: relative; 91 | display: block; 92 | width: 30px; 93 | height: 3px; 94 | background-color: #3C9DFB; 95 | transition: .4s cubic-bezier(.77,0,.18,1); 96 | } 97 | .nav-toogler::after { 98 | margin-top: 10px; 99 | } 100 | .nav-wrapper.active .nav-toogler::before, 101 | .nav-wrapper.active .nav-toogler::after{ 102 | position: absolute; 103 | top: 50%; 104 | background-color: #3C9DFB; 105 | transform: rotate(135deg); 106 | } 107 | .nav-wrapper.active .nav-toogler::after { 108 | transform: rotate(-135deg); 109 | margin-top: 0; 110 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 Mini Projects Challenge 7 | 8 | 9 | 10 |

10 Mini-Projects Challenge

11 |
12 |
13 | 14 |

Toast/Notification Generator

15 | Toast Generator 16 | 17 |
18 | 19 | 20 | 21 |
22 |
23 |
24 | 25 |

Auto-Text Writer

26 | autoTextWriter 27 | 28 |
29 | 30 | 31 | 32 |
33 |
34 |
35 | 36 |

Background Changer

37 | BackgroundChanger 38 | 39 |
40 | 41 | 42 | 43 |
44 |
45 |
46 | 47 |

Darkmode Toggle

48 | DarkModeToggler 49 | 50 |
51 | 52 | 53 | 54 |
55 |
56 |
57 | 58 |

Hamburger Menu

59 | HamburgerMenu 60 | 61 |
62 | 63 | 64 | 65 |
66 |
67 |
68 | 69 |

Heart Rain

70 | HeartRain 71 | 72 |
73 | 74 | 75 | 76 |
77 |
78 |
79 | 80 |

Popup Modal

81 | PopupModal 82 | 83 |
84 | 85 | 86 | 87 |
88 |
89 |
90 | 91 |

Image Carousel

92 | ImageCarousel 93 | 94 |
95 | 96 | 97 | 98 |
99 |
100 |
101 | 102 |

Sound Board

103 | SoundBoard 104 | 105 |
106 | 107 | 108 | 109 |
110 |
111 |
112 | 113 |

Zoom Effect

114 | ZoomEffect 115 | 116 |
117 | 118 | 119 | 120 |
121 |
122 |
123 | 128 | 129 | 130 | --------------------------------------------------------------------------------