├── .github └── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── 30dayofJavascriptProject ├── Images │ ├── AlarmClock.png │ ├── Calculator.png │ ├── Calender.png │ ├── Captcha.png │ ├── ColorPallat.png │ ├── CountryGuide.png │ ├── Dictionary.png │ ├── FaviconFetcher.png │ ├── FilterImage.png │ ├── GradientGenerator.png │ ├── ImageEditor.png │ ├── ImageFilter.png │ ├── LoginForm.png │ ├── MathGame.png │ ├── Meme.png │ ├── ParrotColor.png │ ├── ProductZoom.png │ ├── ProfileCard.png │ ├── QuizApp.png │ ├── Quote.png │ ├── RandomUser.png │ ├── Recipe.png │ ├── Scratch.png │ ├── SimpleInterest.png │ ├── Tictoetak.png │ ├── TodoList.png │ ├── TypingSpeed.png │ └── clock.png ├── index.html ├── script.js └── style.css ├── Alarm Clock ├── images.jpg ├── index.html ├── ringtone.mp3 ├── script.js └── style.css ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── Calculator ├── index.html ├── script.js └── style.css ├── Calendar ├── index.html ├── index.js └── style.css ├── Captcha in js ├── index.html ├── index.js └── style.css ├── Color Palette Generator ├── app.js ├── index.html └── style.css ├── Dictionary ├── index.html ├── index.js └── style.css ├── Favicon Fetcher generator ├── index.html ├── index.js └── style.css ├── Filter Gallery ├── index.html └── style.css ├── Filter Image ├── index.html └── index.js ├── Flag Game ├── index.html ├── script.js └── style.css ├── Gradient Generator ├── index.html ├── index.js └── style.css ├── ImageEditor ├── index.html ├── script.js └── style.css ├── LICENSE ├── Login Form with js ├── index.css ├── index.html └── index.js ├── Math Game ├── index.css ├── index.html └── index.js ├── Memory Game ├── index.html ├── script.js └── style.css ├── Parrot Color ├── index.html ├── script.js └── style.css ├── Product Image Zoom ├── index.html ├── script.js └── style.css ├── Profile Card ├── index.html ├── profile.png ├── script.js └── style.css ├── Quiz App ├── index.html ├── script.js └── style.css ├── README.md ├── Ramdom User cards ├── index.css ├── index.html └── index.js ├── Random Mems App ├── index.css ├── index.html └── index.js ├── Random quote genertor ├── index.html ├── script.js └── style.css ├── Recipe App ├── index.html ├── index.js └── style.css ├── Scratch Card ├── index.html ├── script.js └── style.css ├── Simple Interest App ├── index.html ├── script.js └── style.css ├── Tic tac toe game ├── index.html ├── script.js └── style.css ├── Todo List ├── index.css ├── index.html └── index.js ├── Typing speed Test ├── index.html ├── script.js └── style.css ├── Weather App ├── index.html ├── key.js ├── script.js └── style.css ├── clock ├── README.md ├── index.html └── sytle.css └── country Guide App ├── index.html ├── index.js └── style.css /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /30dayofJavascriptProject/Images/AlarmClock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/AlarmClock.png -------------------------------------------------------------------------------- /30dayofJavascriptProject/Images/Calculator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/Calculator.png -------------------------------------------------------------------------------- /30dayofJavascriptProject/Images/Calender.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/Calender.png -------------------------------------------------------------------------------- /30dayofJavascriptProject/Images/Captcha.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/Captcha.png -------------------------------------------------------------------------------- /30dayofJavascriptProject/Images/ColorPallat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/ColorPallat.png -------------------------------------------------------------------------------- /30dayofJavascriptProject/Images/CountryGuide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/CountryGuide.png -------------------------------------------------------------------------------- /30dayofJavascriptProject/Images/Dictionary.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/Dictionary.png -------------------------------------------------------------------------------- /30dayofJavascriptProject/Images/FaviconFetcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/FaviconFetcher.png -------------------------------------------------------------------------------- /30dayofJavascriptProject/Images/FilterImage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/FilterImage.png -------------------------------------------------------------------------------- /30dayofJavascriptProject/Images/GradientGenerator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/GradientGenerator.png -------------------------------------------------------------------------------- /30dayofJavascriptProject/Images/ImageEditor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/ImageEditor.png -------------------------------------------------------------------------------- /30dayofJavascriptProject/Images/ImageFilter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/ImageFilter.png -------------------------------------------------------------------------------- /30dayofJavascriptProject/Images/LoginForm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/LoginForm.png -------------------------------------------------------------------------------- /30dayofJavascriptProject/Images/MathGame.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/MathGame.png -------------------------------------------------------------------------------- /30dayofJavascriptProject/Images/Meme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/Meme.png -------------------------------------------------------------------------------- /30dayofJavascriptProject/Images/ParrotColor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/ParrotColor.png -------------------------------------------------------------------------------- /30dayofJavascriptProject/Images/ProductZoom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/ProductZoom.png -------------------------------------------------------------------------------- /30dayofJavascriptProject/Images/ProfileCard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/ProfileCard.png -------------------------------------------------------------------------------- /30dayofJavascriptProject/Images/QuizApp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/QuizApp.png -------------------------------------------------------------------------------- /30dayofJavascriptProject/Images/Quote.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/Quote.png -------------------------------------------------------------------------------- /30dayofJavascriptProject/Images/RandomUser.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/RandomUser.png -------------------------------------------------------------------------------- /30dayofJavascriptProject/Images/Recipe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/Recipe.png -------------------------------------------------------------------------------- /30dayofJavascriptProject/Images/Scratch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/Scratch.png -------------------------------------------------------------------------------- /30dayofJavascriptProject/Images/SimpleInterest.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/SimpleInterest.png -------------------------------------------------------------------------------- /30dayofJavascriptProject/Images/Tictoetak.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/Tictoetak.png -------------------------------------------------------------------------------- /30dayofJavascriptProject/Images/TodoList.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/TodoList.png -------------------------------------------------------------------------------- /30dayofJavascriptProject/Images/TypingSpeed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/TypingSpeed.png -------------------------------------------------------------------------------- /30dayofJavascriptProject/Images/clock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/30dayofJavascriptProject/Images/clock.png -------------------------------------------------------------------------------- /30dayofJavascriptProject/script.js: -------------------------------------------------------------------------------- 1 | // Preloader 2 | var preloader = document.getElementById('loading'); 3 | 4 | function loading(){ 5 | setTimeout( myfunction,2000); 6 | } 7 | function myfunction(){ 8 | preloader.style.display = 'none'; 9 | } 10 | 11 | 12 | $(document).ready(function () { 13 | $(window).scroll(function () { 14 | if ($(this).scrollTop() >= 100) { 15 | $(".scrollToTop").fadeIn(); 16 | } else { 17 | $(".scrollToTop").fadeOut(); 18 | } 19 | }); 20 | $(".scrollToTop").click(function (e) { 21 | e.preventDefault(); 22 | $("html, body").animate({ scrollTop: 0 }, 500); 23 | return false; 24 | }); 25 | }); 26 | 27 | function toggleDarkLight() { 28 | var body = document.getElementById("body"); 29 | var button = document.getElementById("toggle"); 30 | if (button.innerHTML == "🌙") { 31 | button.innerHTML = "☀️"; 32 | } else { 33 | button.innerHTML = "🌙"; 34 | } 35 | 36 | var trans = () => { 37 | document.documentElement.classList.add("transition"); 38 | window.setTimeout(() => { 39 | document.documentElement.classList.remove("transition"); 40 | }, 500); 41 | }; 42 | 43 | var currentClass = body.className; 44 | // body.className = currentClass == "dark-mode" ? "light-mode" : "dark-mode"; 45 | if (currentClass == "dark-mode") { 46 | trans(); 47 | body.className = "light-mode"; 48 | } else { 49 | trans(); 50 | body.className = "dark-mode"; 51 | } 52 | } 53 | 54 | function search_project() { 55 | let input = document.getElementById('searchbar').value; 56 | input = input.toLowerCase(); 57 | var x = document.getElementsByClassName('item'); 58 | 59 | for (i = 0; i < x.length; i++) { 60 | if (!x[i].querySelector('a').innerHTML.toLowerCase().includes(input)) { 61 | x[i].style.display = "none"; 62 | } 63 | else { 64 | x[i].style.display = "list-item"; 65 | } 66 | } 67 | } -------------------------------------------------------------------------------- /30dayofJavascriptProject/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | list-style: none; 6 | } 7 | 8 | @font-face { 9 | font-family: "sans"; 10 | src: url(font/sans.ttf); 11 | } 12 | 13 | body { 14 | font-family: "sans"; 15 | } 16 | 17 | /* Preloader */ 18 | #loading{ 19 | position: fixed; 20 | width: 100%; 21 | height: 100vh; 22 | background: #1f1e1e url('./assets/js-preloader.gif'); 23 | background-repeat: no-repeat; 24 | background-position: center; 25 | z-index: 99999; 26 | } 27 | 28 | img{ 29 | width:100%; 30 | } 31 | /* Dark Mode */ 32 | body.dark-mode { 33 | background-color: #111; 34 | color: #eee; 35 | } 36 | 37 | body.dark-mode a { 38 | color: #111; 39 | } 40 | 41 | body.dark-mode button { 42 | background-color: #eee; 43 | color: #111; 44 | } 45 | 46 | body.dark-mode h4 { 47 | color: #eee; 48 | } 49 | 50 | body.dark-mode svg { 51 | fill: #fff; 52 | color: #151513; 53 | } 54 | 55 | body.dark-mode input { 56 | color: white; 57 | } 58 | 59 | body.light-mode input { 60 | color: #111; 61 | } 62 | 63 | body.light-mode { 64 | background-color: #eee; 65 | color: #111; 66 | } 67 | 68 | body.light-mode a { 69 | color: #111; 70 | } 71 | 72 | body.light-mode button { 73 | background-color: #111; 74 | color: #eee; 75 | } 76 | 77 | body.light-mode h4 { 78 | color: #111; 79 | } 80 | 81 | body.light-mode svg { 82 | fill: #151513; 83 | color: #fff; 84 | } 85 | 86 | /* Octocat */ 87 | 88 | .github-corner:hover .octo-arm { 89 | animation: octocat-wave 560ms ease-in-out; 90 | } 91 | 92 | @keyframes octocat-wave { 93 | 94 | 0%, 95 | 100% { 96 | transform: rotate(0); 97 | } 98 | 99 | 20%, 100 | 60% { 101 | transform: rotate(-25deg); 102 | } 103 | 104 | 40%, 105 | 80% { 106 | transform: rotate(10deg); 107 | } 108 | } 109 | 110 | @media (max-width: 500px) { 111 | .github-corner:hover .octo-arm { 112 | animation: none; 113 | } 114 | 115 | .github-corner .octo-arm { 116 | animation: octocat-wave 560ms ease-in-out; 117 | } 118 | } 119 | 120 | .toggleButton { 121 | position: absolute; 122 | top: 0; 123 | margin: 10px 3px 3px 10px; 124 | padding: 3px; 125 | border: none; 126 | border-radius: 50%; 127 | font-size: 30px; 128 | left: 0; 129 | } 130 | 131 | html.transition, 132 | html.transition *, 133 | html.transition *:before, 134 | html.transition *:after { 135 | transition: all 750ms !important; 136 | transition-delay: 0 !important; 137 | } 138 | 139 | h1 { 140 | text-align: center; 141 | font-size: 3.5rem; 142 | padding: 5vh 7vw; 143 | } 144 | 145 | @media only screen and (max-width: 658px) { 146 | 147 | h1 { 148 | font-size: 1.6em; 149 | padding: 32px 40px; 150 | } 151 | 152 | } 153 | 154 | h4 { 155 | padding: 2%; 156 | } 157 | 158 | img { 159 | max-width: 100%; 160 | border-radius: 10px 10px 0 0; 161 | height: 200px; 162 | } 163 | 164 | a { 165 | color: inherit; 166 | } 167 | 168 | a:visited { 169 | color: inherit; 170 | } 171 | 172 | .container { 173 | display: flex; 174 | flex-direction: row; 175 | font-size: 30px; 176 | text-align: center; 177 | } 178 | 179 | .item { 180 | flex: 50%; 181 | width: 90%; 182 | height: 100%; 183 | background-color: rgba(0, 0, 0, 0.4); 184 | box-shadow: 0 0 transparent, 0 0 transparent, 0 0 transparent, 0 0 transparent, 0 2px 3px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.06); 185 | border-radius: 10px; 186 | transition: transform .3s ease-in-out 0s; 187 | } 188 | 189 | .item:hover { 190 | transform: scale3d(1.05, 1.05, 1); 191 | /* border: 1px solid #ffffff; */ 192 | filter: drop-shadow(10px); 193 | filter: contrast(110%); 194 | } 195 | 196 | .item h4 { 197 | font-size: 1.3rem; 198 | text-align: center; 199 | } 200 | 201 | .main { 202 | width: 90vw; 203 | display: grid; 204 | grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 205 | grid-gap: 24px; 206 | row-gap: 24px; 207 | margin: auto; 208 | } 209 | 210 | .main a { 211 | text-decoration: none; 212 | } 213 | 214 | footer { 215 | background-color: #19172e; 216 | text-align: center; 217 | color: white; 218 | font-size: 1rem; 219 | left: 0; 220 | right: 0; 221 | bottom: 0; 222 | margin-bottom: 0; 223 | padding: 10px; 224 | line-height: 3vh; 225 | margin-top: 30px; 226 | } 227 | 228 | footer a:visited { 229 | color: white; 230 | 231 | } 232 | 233 | @media (max-width: 800px) { 234 | .container { 235 | flex-direction: column; 236 | } 237 | } 238 | 239 | .scrollToTop { 240 | position: fixed; 241 | right: 10px; 242 | bottom: 10px; 243 | cursor: pointer; 244 | width: 40px; 245 | height: 40px; 246 | background-color: #5520b6; 247 | border-radius: 50%; 248 | } 249 | 250 | .scrollToTop span { 251 | position: absolute; 252 | top: 50%; 253 | left: 50%; 254 | margin-left: -8px; 255 | margin-top: -12px; 256 | border: 8px solid transparent; 257 | border-bottom-color: white; 258 | } 259 | 260 | .scrollToTop:hover { 261 | background-color: #5836D8; 262 | } 263 | 264 | input { 265 | border-radius: 3rem; 266 | padding: 10px; 267 | width: 15%; 268 | position: absolute; 269 | top: 6.5%; 270 | right: 7%; 271 | background: transparent; 272 | } 273 | 274 | @media(max-width:1000px) { 275 | input { 276 | position: relative; 277 | align-items: center; 278 | margin-bottom: 3%; 279 | left: 35%; 280 | width: 25% 281 | } 282 | } -------------------------------------------------------------------------------- /Alarm Clock/images.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/Alarm Clock/images.jpg -------------------------------------------------------------------------------- /Alarm Clock/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Alarm Clock 8 | 9 | 10 | 11 |
12 | 13 |

04:20:30 PM

14 |
15 |
16 | 19 |
20 |
21 | 24 |
25 |
26 | 29 |
30 |
31 | 32 |
33 | 34 | 35 | -------------------------------------------------------------------------------- /Alarm Clock/ringtone.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/Alarm Clock/ringtone.mp3 -------------------------------------------------------------------------------- /Alarm Clock/script.js: -------------------------------------------------------------------------------- 1 | const currentTime=document.querySelector('h1'), 2 | content=document.querySelector('.content'), 3 | selectMenu=document.querySelectorAll('select'), 4 | setAlarmBtn=document.querySelector('button'); 5 | let alarmTime, isAlarmSet = false, 6 | rigntone = new Audio("ringtone.mp3") 7 | for(let i=12; i>0; i--){ 8 | i = i<10 ? "0" + i : i; 9 | let option = ``; 10 | selectMenu[0].firstElementChild.insertAdjacentHTML('afterend',option); 11 | } 12 | 13 | for(let i=59; i>=0; i--){ 14 | i = i<10 ? "0" + i : i; 15 | let option = ``; 16 | selectMenu[1].firstElementChild.insertAdjacentHTML('afterend',option); 17 | } 18 | 19 | for(let i=2; i>0; i--){ 20 | let ampm = i == 1 ? "AM" : "PM" 21 | let option = ``; 22 | selectMenu[2].firstElementChild.insertAdjacentHTML('afterend',option); 23 | } 24 | 25 | setInterval(()=>{ 26 | let date = new Date(), 27 | h = date.getHours(), 28 | m = date.getMinutes(), 29 | s = date.getSeconds(), 30 | ampm = "AM"; 31 | if(h >= 12){ 32 | h = h-12; 33 | ampm = "PM"; 34 | } 35 | h = h == 0 ? h = 12 : h; 36 | h = h < 10 ? "0" + h : h; 37 | m = m < 10 ? "0" + m : m; 38 | s = s < 10 ? "0" + s : s; 39 | currentTime.innerText =`${h}:${m}:${s} ${ampm}`; 40 | 41 | if( alarmTime == `${h}:${m} ${ampm}`){ 42 | rigntone.play(); 43 | rigntone.loop = true; 44 | } 45 | }, 1000); 46 | 47 | function setAlarm(){ 48 | if(isAlarmSet){ 49 | alarmTime = ""; 50 | rigntone.pause(); 51 | content.classList.remove('disable'); 52 | setAlarmBtn.innerText = "Set Alarm"; 53 | return isAlarmSet = false; 54 | } 55 | let time = `${selectMenu[0].value}:${selectMenu[1].value}:${selectMenu[02].value}` 56 | if(time.includes("Hour")||time.includes("Minute")||time.includes("AM/PM")){ 57 | return alert("Please, select a valid time to set Alarm!") 58 | } 59 | isAlarmSet = true; 60 | alarmTime = time; 61 | content.classList.add('disable'); 62 | setAlarmBtn.innerText = "Clear Alarm" 63 | } 64 | setAlarmBtn.addEventListener('click',setAlarm) -------------------------------------------------------------------------------- /Alarm Clock/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); 2 | *{ 3 | margin: 0; 4 | padding:0; 5 | box-sizing: border-box; 6 | font-family: 'Poppins',sans-serif; 7 | } 8 | body, .wrapper,.content{ 9 | display:flex; 10 | align-items: center; 11 | justify-content: center; 12 | } 13 | body{ 14 | min-height: 100vh; 15 | background: #4a98f7; 16 | } 17 | .wrapper{ 18 | background: #fff; 19 | width:440px; 20 | border-radius: 10px; 21 | flex-direction: column; 22 | padding: 30px 30px 38px; 23 | } 24 | .wrapper img{ 25 | min-height: 103px; 26 | } 27 | .wrapper h1{ 28 | font-size: 38px; 29 | font-weight: 500; 30 | margin: 30px 0; 31 | } 32 | .wrapper .content{ 33 | width:100%; 34 | justify-content: space-between; 35 | 36 | } 37 | .content .column{ 38 | border-radius:5px; 39 | border:1px solid #999; 40 | width:calc(100%/3 - 5px); 41 | } 42 | .column select{ 43 | outline: none; 44 | border: none; 45 | height:53px; 46 | width:100%; 47 | font-size: 19px; 48 | } 49 | .wrapper button{ 50 | width:100%; 51 | margin-top: 20px; 52 | font-size: 20px; 53 | border:none; 54 | cursor: pointer; 55 | color:#fff; 56 | padding:17px 0; 57 | border-radius: 5px; 58 | background: #4a98f7; 59 | } 60 | .wrapper.content.disable{ 61 | opacity: 0.6; 62 | pointer-events: none; 63 | } -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, religion, or sexual identity 10 | and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | * Demonstrating empathy and kindness toward other people 21 | * Being respectful of differing opinions, viewpoints, and experiences 22 | * Giving and gracefully accepting constructive feedback 23 | * Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | * Focusing on what is best not just for us as individuals, but for the 26 | overall community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | * The use of sexualized language or imagery, and sexual attention or 31 | advances of any kind 32 | * Trolling, insulting or derogatory comments, and personal or political attacks 33 | * Public or private harassment 34 | * Publishing others' private information, such as a physical or email 35 | address, without their explicit permission 36 | * Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | . 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series 86 | of actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or 93 | permanent ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within 113 | the community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.0, available at 119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 120 | 121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct 122 | enforcement ladder](https://github.com/mozilla/diversity). 123 | 124 | [homepage]: https://www.contributor-covenant.org 125 | 126 | For answers to common questions about this code of conduct, see the FAQ at 127 | https://www.contributor-covenant.org/faq. Translations are available at 128 | https://www.contributor-covenant.org/translations. 129 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | When contributing to this repository, please first discuss the change you wish to make via issue, 4 | email, or any other method with the owners of this repository before making a change. 5 | 6 | Please note we have a code of conduct, please follow it in all your interactions with the project. 7 | 8 | ## Pull Request Process 9 | 10 | 1. Ensure any install or build dependencies are removed before the end of the layer when doing a 11 | build. 12 | 2. Update the README.md with details of changes to the interface, this includes new environment 13 | variables, exposed ports, useful file locations and container parameters. 14 | 3. Increase the version numbers in any examples files and the README.md to the new version that this 15 | Pull Request would represent. The versioning scheme we use is [SemVer](http://semver.org/). 16 | 4. You may merge the Pull Request in once you have the sign-off of two other developers, or if you 17 | do not have permission to do that, you may request the second reviewer to merge it for you. 18 | 19 | ## Code of Conduct 20 | 21 | ### Our Pledge 22 | 23 | In the interest of fostering an open and welcoming environment, we as 24 | contributors and maintainers pledge to making participation in our project and 25 | our community a harassment-free experience for everyone, regardless of age, body 26 | size, disability, ethnicity, gender identity and expression, level of experience, 27 | nationality, personal appearance, race, religion, or sexual identity and 28 | orientation. 29 | 30 | ### Our Standards 31 | 32 | Examples of behavior that contributes to creating a positive environment 33 | include: 34 | 35 | * Using welcoming and inclusive language 36 | * Being respectful of differing viewpoints and experiences 37 | * Gracefully accepting constructive criticism 38 | * Focusing on what is best for the community 39 | * Showing empathy towards other community members 40 | 41 | Examples of unacceptable behavior by participants include: 42 | 43 | * The use of sexualized language or imagery and unwelcome sexual attention or 44 | advances 45 | * Trolling, insulting/derogatory comments, and personal or political attacks 46 | * Public or private harassment 47 | * Publishing others' private information, such as a physical or electronic 48 | address, without explicit permission 49 | * Other conduct which could reasonably be considered inappropriate in a 50 | professional setting 51 | 52 | ### Our Responsibilities 53 | 54 | Project maintainers are responsible for clarifying the standards of acceptable 55 | behavior and are expected to take appropriate and fair corrective action in 56 | response to any instances of unacceptable behavior. 57 | 58 | Project maintainers have the right and responsibility to remove, edit, or 59 | reject comments, commits, code, wiki edits, issues, and other contributions 60 | that are not aligned to this Code of Conduct, or to ban temporarily or 61 | permanently any contributor for other behaviors that they deem inappropriate, 62 | threatening, offensive, or harmful. 63 | 64 | ### Scope 65 | 66 | This Code of Conduct applies both within project spaces and in public spaces 67 | when an individual is representing the project or its community. Examples of 68 | representing a project or community include using an official project e-mail 69 | address, posting via an official social media account, or acting as an appointed 70 | representative at an online or offline event. Representation of a project may be 71 | further defined and clarified by project maintainers. 72 | 73 | ### Enforcement 74 | 75 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 76 | reported by contacting the project team at [INSERT EMAIL ADDRESS]. All 77 | complaints will be reviewed and investigated and will result in a response that 78 | is deemed necessary and appropriate to the circumstances. The project team is 79 | obligated to maintain confidentiality with regard to the reporter of an incident. 80 | Further details of specific enforcement policies may be posted separately. 81 | 82 | Project maintainers who do not follow or enforce the Code of Conduct in good 83 | faith may face temporary or permanent repercussions as determined by other 84 | members of the project's leadership. 85 | 86 | ### Attribution 87 | 88 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 89 | available at [http://contributor-covenant.org/version/1/4][version] 90 | 91 | [homepage]: http://contributor-covenant.org 92 | [version]: http://contributor-covenant.org/version/1/4/ 93 | -------------------------------------------------------------------------------- /Calculator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Calculator 6 | 7 | 11 | 12 | 13 | 14 | 15 |

Build by 💙 PREETI RAJ

16 |
17 |
18 | 19 |
20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 |
46 |
47 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /Calculator/script.js: -------------------------------------------------------------------------------- 1 | let equal_pressed = 0; 2 | //Refer all buttons excluding AC and DEL 3 | let button_input = document.querySelectorAll(".input-button"); 4 | //Refer input,equal,clear and erase 5 | let input = document.getElementById("input"); 6 | let equal = document.getElementById("equal"); 7 | let clear = document.getElementById("clear"); 8 | let erase = document.getElementById("erase"); 9 | 10 | window.onload = () => { 11 | input.value = ""; 12 | }; 13 | 14 | //Access each class using forEach 15 | button_input.forEach((button_class) => { 16 | button_class.addEventListener("click", () => { 17 | if (equal_pressed == 1) { 18 | input.value = ""; 19 | equal_pressed = 0; 20 | } 21 | //display value of each button 22 | input.value += button_class.value; 23 | }); 24 | }); 25 | 26 | //Solve the user's input when clicked on equal sign 27 | equal.addEventListener("click", () => { 28 | equal_pressed = 1; 29 | let inp_val = input.value; 30 | try { 31 | //evaluate user's input 32 | let solution = eval(inp_val); 33 | //True for natural numbers 34 | //false for decimals 35 | if (Number.isInteger(solution)) { 36 | input.value = solution; 37 | } else { 38 | input.value = solution.toFixed(2); 39 | } 40 | } catch (err) { 41 | //If user has entered invalid input 42 | alert("Invalid Input"); 43 | } 44 | }); 45 | 46 | //Clear Whole Input 47 | clear.addEventListener("click", () => { 48 | input.value = ""; 49 | }); 50 | //Erase Single Digit 51 | erase.addEventListener("click", () => { 52 | input.value = input.value.substr(0, input.value.length - 1); 53 | }); -------------------------------------------------------------------------------- /Calculator/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | font-family: "Roboto Mono", monospace; 6 | } 7 | body { 8 | height: 150vh; 9 | background: linear-gradient(to bottom, #f9544c 50%, #090c31 50%); 10 | } 11 | .calculator { 12 | width: 400px; 13 | background-color: #15173c; 14 | padding: 50px 30px; 15 | position: absolute; 16 | transform: translate(-50%, -50%); 17 | top: 60%; 18 | left: 50%; 19 | border-radius: 8px; 20 | box-shadow: 0 20px 50px rgba(0, 5, 24, 0.4); 21 | } 22 | .display { 23 | width: 100%; 24 | } 25 | .display input { 26 | width: 100%; 27 | padding: 15px 10px; 28 | text-align: right; 29 | border: none; 30 | background-color: transparent; 31 | color: #ffffff; 32 | font-size: 35px; 33 | } 34 | .display input::placeholder { 35 | color: #9490ac; 36 | } 37 | .buttons { 38 | display: grid; 39 | grid-template-columns: repeat(4, 1fr); 40 | grid-gap: 20px; 41 | margin-top: 40px; 42 | } 43 | .buttons input[type="button"] { 44 | font-size: 20px; 45 | padding: 17px; 46 | border: none; 47 | background-color: transparent; 48 | color: #ffffff; 49 | cursor: pointer; 50 | border-radius: 5px; 51 | } 52 | .buttons input[type="button"]:hover { 53 | box-shadow: 0 8px 25px #000d2e; 54 | } 55 | input[type="button"]#equal { 56 | grid-row: span 2; 57 | background-color: #f9544c; 58 | } 59 | input[type="button"][value="0"] { 60 | grid-column: span 2; 61 | } 62 | #h1{ 63 | text-align: center; 64 | margin:10px; 65 | } -------------------------------------------------------------------------------- /Calendar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Pure CSS & JavaScript Calendar 9 | 10 | 11 | 12 |
13 |
14 | 20 |
21 | 22 | 31 | 32 | 33 | 34 | 35 |
36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /Calendar/index.js: -------------------------------------------------------------------------------- 1 | // set variables 2 | let today = new Date(); 3 | let dayInt = today.getDate(); 4 | let month = today.getMonth(); 5 | let year = today.getFullYear(); 6 | // body of the calendar 7 | let calendarBody = document.getElementById("days"); 8 | 9 | let months = [ 10 | "January", 11 | "February", 12 | "March", 13 | "April", 14 | "May", 15 | "June", 16 | "July", 17 | "August", 18 | "September", 19 | "October", 20 | "November", 21 | "December" 22 | ]; 23 | 24 | // next and previous functionality 25 | let nextbtn = document.getElementById("next"); 26 | let prevBtn = document.getElementById("prev"); 27 | 28 | nextbtn.onclick = function() { 29 | next(); 30 | }; 31 | prevBtn.onclick = function() { 32 | previous(); 33 | }; 34 | 35 | // on select of date 36 | // let selectDay = document.getElementsByClassName("singleDay"); 37 | 38 | // init calendar 39 | showCalendar(month, year); 40 | 41 | function showCalendar(month, year) { 42 | // gets the day of the week for this date 43 | let firstDay = new Date(year, month).getDay(); 44 | // clearing all previous cells 45 | calendarBody.innerHTML = ""; 46 | // checking the mount of days in this month to control the loop 47 | let totalDays = daysInMonth(month, year); 48 | 49 | // adding the blank boxes so that date start on correct day of the week 50 | blankDates(firstDay); 51 | // adding the dates to the calendar 52 | for (let day = 1; day <= totalDays; day++) { 53 | // create li node with text content & apend to body 54 | let cell = document.createElement("li"); 55 | let cellText = document.createTextNode(day); 56 | // adding active class if day matches today 57 | if ( 58 | dayInt === day && 59 | month === today.getMonth() && 60 | year === today.getFullYear() 61 | ) { 62 | cell.classList.add("active"); 63 | } 64 | 65 | // appending date attributes to single date li element 66 | cell.setAttribute("data-day", day); 67 | cell.setAttribute("data-month", month); 68 | cell.setAttribute("data-year", year); 69 | 70 | //appending li to body of calendar 71 | cell.classList.add("singleDay"); 72 | cell.appendChild(cellText); 73 | calendarBody.appendChild(cell); 74 | } 75 | 76 | // set month string value 77 | document.getElementById("month").innerHTML = months[month]; 78 | // set year string value 79 | document.getElementById("year").innerHTML = year; 80 | } 81 | 82 | function daysInMonth(month, year) { 83 | // day 0 here returns the last day of the PREVIOUS month 84 | return new Date(year, month + 1, 0).getDate(); 85 | } 86 | 87 | function blankDates(count) { 88 | // looping to add the correct amount of blank days to the calendar 89 | for (let x = 0; x < count; x++) { 90 | let cell = document.createElement("li"); 91 | let cellText = document.createTextNode(""); 92 | cell.appendChild(cellText); 93 | calendarBody.appendChild(cell); 94 | } 95 | } 96 | 97 | function next() { 98 | year = month === 11 ? year + 1 : year; 99 | month = (month + 1) % 12; 100 | showCalendar(month, year); 101 | } 102 | 103 | function previous() { 104 | year = month === 0 ? year - 1 : year; 105 | month = month === 0 ? 11 : month - 1; 106 | showCalendar(month, year); 107 | } 108 | 109 | // function select(d, m, y) { 110 | // document.getElementById("select").innerHTML = new Date(y, m, d); 111 | // } 112 | -------------------------------------------------------------------------------- /Calendar/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | ul { 5 | list-style-type: none; 6 | } 7 | body { 8 | font-family: Verdana, sans-serif; 9 | } 10 | 11 | #calendar { 12 | max-width: 600px; 13 | text-align: center; 14 | align-items: center; 15 | justify-content: center; 16 | margin:auto; 17 | } 18 | 19 | .month { 20 | padding: 70px 25px; 21 | width: 100%; 22 | background: #1abc9c; 23 | text-align: center; 24 | } 25 | 26 | .month ul { 27 | margin: 0; 28 | padding: 0; 29 | display: grid; 30 | grid-template-columns: 1fr 1fr 1fr 1fr; 31 | grid-template-rows: 1fr; 32 | } 33 | 34 | .month ul li { 35 | color: white; 36 | font-size: 20px; 37 | text-transform: uppercase; 38 | letter-spacing: 3px; 39 | } 40 | 41 | #weekdays { 42 | margin: 0; 43 | padding: 10px 0; 44 | background-color: #ddd; 45 | } 46 | 47 | #weekdays li { 48 | color: #666; 49 | text-align: center; 50 | } 51 | 52 | #days { 53 | padding: 10px 0; 54 | background: #eee; 55 | margin: 0; 56 | } 57 | 58 | #days li { 59 | list-style-type: none; 60 | text-align: center; 61 | font-size: 16px; 62 | color: #777; 63 | padding: 15px; 64 | border: 1px solid #ccc; 65 | } 66 | 67 | #days li.active { 68 | background: #1abc9c; 69 | color: white !important; 70 | } 71 | 72 | #next, 73 | #prev { 74 | cursor: pointer; 75 | } 76 | 77 | /* Add media queries for smaller screens */ 78 | @media screen and (max-width: 720px) { 79 | .weekdays li, 80 | #days li { 81 | width: 13.1%; 82 | } 83 | } 84 | 85 | @media screen and (max-width: 420px) { 86 | .weekdays li, 87 | #days li { 88 | width: 12.5%; 89 | } 90 | #days li .active { 91 | padding: 2px; 92 | } 93 | } 94 | 95 | @media screen and (max-width: 290px) { 96 | .weekdays li, 97 | #days li { 98 | width: 12.2%; 99 | } 100 | } 101 | 102 | #days, 103 | #weekdays { 104 | display: grid; 105 | grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 106 | grid-template-rows: 1fr; 107 | } 108 | 109 | @media all and (-ms-high-contrast: none) { 110 | #days { 111 | display: -ms-grid; 112 | -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 113 | -ms-grid-rows: 1fr 1fr 1fr 1fr 1fr 1fr; 114 | } 115 | } 116 | -------------------------------------------------------------------------------- /Captcha in js/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Captcha Generator 6 | 7 | 11 | 12 | 16 | 17 | 18 | 19 | 20 |
21 |
22 | 23 | 26 |
27 | 32 | 33 |
34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /Captcha in js/index.js: -------------------------------------------------------------------------------- 1 | //Initial References 2 | let submitButton = document.getElementById("submit-button"); 3 | let userInput = document.getElementById("user-input"); 4 | let canvas = document.getElementById("canvas"); 5 | let reloadButton = document.getElementById("reload-button"); 6 | let text = ""; 7 | 8 | //Generate Text 9 | const textGenerator = () => { 10 | let generatedText = ""; 11 | /* String.fromCharCode gives ASCII value from a given number */ 12 | // total 9 letters hence loop of 3 13 | for (let i = 0; i < 3; i++) { 14 | //65-90 numbers are capital letters 15 | generatedText += String.fromCharCode(randomNumber(65, 90)); 16 | //97-122 are small letters 17 | generatedText += String.fromCharCode(randomNumber(97, 122)); 18 | //48-57 are numbers from 0-9 19 | generatedText += String.fromCharCode(randomNumber(48, 57)); 20 | } 21 | return generatedText; 22 | }; 23 | 24 | //Generate random numbers between a given range 25 | const randomNumber = (min, max) => 26 | Math.floor(Math.random() * (max - min + 1) + min); 27 | 28 | //Canvas part 29 | function drawStringOnCanvas(string) { 30 | //The getContext() function returns the drawing context that has all the drawing properties and functions needed to draw on canvas 31 | let ctx = canvas.getContext("2d"); 32 | //clear canvas 33 | ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); 34 | //array of text color 35 | const textColors = ["rgb(0,0,0)", "rgb(130,130,130)"]; 36 | //space between letters 37 | const letterSpace = 150 / string.length; 38 | //loop through string 39 | for (let i = 0; i < string.length; i++) { 40 | //Define initial space on X axis 41 | const xInitialSpace = 25; 42 | //Set font for canvas element 43 | ctx.font = "20px Roboto Mono"; 44 | //set text color 45 | ctx.fillStyle = textColors[randomNumber(0, 1)]; 46 | ctx.fillText( 47 | string[i], 48 | xInitialSpace + i * letterSpace, 49 | randomNumber(25, 40), 50 | 100 51 | ); 52 | } 53 | } 54 | 55 | //Initial Function 56 | function triggerFunction() { 57 | //clear Input 58 | userInput.value = ""; 59 | text = textGenerator(); 60 | console.log(text); 61 | //Randomize the text so that everytime the position of numbers and small letters is random 62 | text = [...text].sort(() => Math.random() - 0.5).join(""); 63 | drawStringOnCanvas(text); 64 | } 65 | 66 | //call triggerFunction for reload button 67 | reloadButton.addEventListener("click", triggerFunction); 68 | 69 | //call triggerFunction when page loads 70 | window.onload = () => triggerFunction(); 71 | 72 | //When user clicks on submit 73 | submitButton.addEventListener("click", () => { 74 | //check if user input == generated text 75 | if (userInput.value === text) { 76 | alert("Success"); 77 | } else { 78 | alert("Incorrect"); 79 | triggerFunction(); 80 | } 81 | }); -------------------------------------------------------------------------------- /Captcha in js/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | body { 7 | height: 100vh; 8 | background: linear-gradient(135deg, #8052ec, #d161ff); 9 | } 10 | .container { 11 | width: 32em; 12 | background-color: #ffffff; 13 | padding: 5em; 14 | border-radius: 0.6em; 15 | position: absolute; 16 | transform: translate(-50%, -50%); 17 | top: 50%; 18 | left: 50%; 19 | box-shadow: 0 1em 2em rgba(0, 0, 0, 0.25); 20 | } 21 | .wrapper { 22 | display: flex; 23 | align-content: center; 24 | justify-content: space-between; 25 | margin: 1em 0; 26 | } 27 | canvas { 28 | border: 1px solid #000000; 29 | border-radius: 0.4em; 30 | } 31 | button#reload-button { 32 | font-size: 26px; 33 | width: 4.6em; 34 | background-color: #8052ec; 35 | border: none; 36 | border-radius: 0.4em; 37 | color: #ffffff; 38 | } 39 | input[type="text"] { 40 | font-family: "Roboto Mono", monospace; 41 | font-size: 1.05em; 42 | width: 100%; 43 | padding: 1em 0.7em; 44 | border: 1px solid #000000; 45 | border-radius: 0.4em; 46 | } 47 | button#submit-button { 48 | width: 100%; 49 | background-color: #8052ec; 50 | color: #ffffff; 51 | font-size: 1.5em; 52 | border: none; 53 | margin-top: 1em; 54 | padding: 0.8em 0; 55 | border-radius: 0.4em; 56 | font-family: "Roboto Mono", monospace; 57 | } -------------------------------------------------------------------------------- /Color Palette Generator/app.js: -------------------------------------------------------------------------------- 1 | const colorBtn = document.querySelector('#btn-1'); 2 | const boxes = document.querySelectorAll('.box'); 3 | 4 | let running =false; 5 | function getRandomColor(){ 6 | let letters = "0123456789ABCDEF"; 7 | let color = "#"; 8 | for(let i=0; i<6; i++){ 9 | color += letters[Math.floor(Math.random()*16)]; 10 | } 11 | return color; 12 | } 13 | 14 | function start(){ 15 | if(running){ 16 | boxes.forEach(color =>{ 17 | color.style.background = getRandomColor(); 18 | }); 19 | setTimeout(start,500); 20 | } 21 | } 22 | 23 | colorBtn.addEventListener('click',function(){ 24 | colorBtn.innerText = "STOP"; 25 | if(running){ 26 | running=false; 27 | colorBtn.innerText = "CHANGE COLOR"; 28 | }else{ 29 | running= true; 30 | start(); 31 | } 32 | }) -------------------------------------------------------------------------------- /Color Palette Generator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Random Color Palatte Generator 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 | 75 |
76 | 77 | 107 | 108 | -------------------------------------------------------------------------------- /Color Palette Generator/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin:0; 3 | padding:0; 4 | box-sizing: border-box; 5 | font-family:Arial, Helvetica, sans-serif; 6 | } 7 | body{ 8 | background: radial-gradient(circle,rgba(51,51,51,1)0%,rgba(29,19,19,1) 100%); 9 | } 10 | 11 | .container{ 12 | display:flex; 13 | flex-direction: column; 14 | justify-content: center; 15 | align-items: center; 16 | margin:1rem auto; 17 | padding-top:1rem; 18 | color:#fff; 19 | } 20 | .btn{ 21 | background: red; 22 | border:none; 23 | border-radius: 4px; 24 | font-size: 1.2rem; 25 | outline:none; 26 | cursor: pointer; 27 | color:#fff; 28 | width:200px; 29 | height:60px; 30 | } 31 | .btn:hover{ 32 | background: transparent; 33 | border:2px solid red; 34 | transition:200ms; 35 | transform: scale(1.1); 36 | color:#fff; 37 | } 38 | .box-container{ 39 | width:100%; 40 | height:100%; 41 | display:grid; 42 | grid-template-columns: repeat(12,1fr); 43 | 44 | } 45 | .box{ 46 | padding:3rem; 47 | background: radial-gradient(circle,rgba(51,51,51,1)0%,rgba(29,19,19,1) 100%); 48 | } -------------------------------------------------------------------------------- /Dictionary/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Dictionary 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | 17 | 18 |
19 |
20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /Dictionary/index.js: -------------------------------------------------------------------------------- 1 | const url = "https://api.dictionaryapi.dev/api/v2/entries/en/"; 2 | const result = document.getElementById("result"); 3 | const sound = document.getElementById("sound"); 4 | const btn = document.getElementById("search-btn"); 5 | 6 | btn.addEventListener("click", () => { 7 | let inpWord = document.getElementById("inp-word").value; 8 | fetch(`${url}${inpWord}`) 9 | .then((response) => response.json()) 10 | .then((data) => { 11 | console.log(data); 12 | result.innerHTML = ` 13 |
14 |

${inpWord}

15 | 18 |
19 |
20 |

${data[0].meanings[0].partOfSpeech}

21 |

/${data[0].phonetic}/

22 |
23 |

24 | ${data[0].meanings[0].definitions[0].definition} 25 |

26 |

27 | ${data[0].meanings[0].definitions[0].example || ""} 28 |

`; 29 | sound.setAttribute("src", `https:${data[0].phonetics[0].audio}`); 30 | //console.log(sound) 31 | }) 32 | .catch(() => { 33 | result.innerHTML = `

Couldn't Find The Word

`; 34 | }); 35 | }); 36 | function playSound() { 37 | sound.play(); 38 | } -------------------------------------------------------------------------------- /Dictionary/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | *:not(i) { 7 | font-family: "Poppins", sans-serif; 8 | } 9 | body { 10 | background-color: #ae9cff; 11 | } 12 | .container { 13 | background-color: #ffffff; 14 | width: 90vmin; 15 | position: absolute; 16 | transform: translate(-50%, -50%); 17 | top: 50%; 18 | left: 50%; 19 | padding: 80px 50px; 20 | border-radius: 10px; 21 | box-shadow: 0 20px 40px rgba(38, 33, 61, 0.2); 22 | } 23 | .search-box { 24 | width: 100%; 25 | display: flex; 26 | justify-content: space-between; 27 | } 28 | .search-box input { 29 | padding: 5px; 30 | width: 70%; 31 | border: none; 32 | outline: none; 33 | border-bottom: 3px solid #ae9cff; 34 | font-size: 16px; 35 | } 36 | .search-box button { 37 | padding: 15px 0; 38 | width: 25%; 39 | background-color: #ae9cff; 40 | border: none; 41 | outline: none; 42 | color: #ffffff; 43 | border-radius: 5px; 44 | } 45 | .result { 46 | position: relative; 47 | } 48 | .result h3 { 49 | font-size: 30px; 50 | color: #1f194c; 51 | } 52 | .result .word { 53 | display: flex; 54 | justify-content: space-between; 55 | margin-top: 80px; 56 | } 57 | .result button { 58 | background-color: transparent; 59 | color: #ae9cff; 60 | border: none; 61 | outline: none; 62 | font-size: 18px; 63 | } 64 | .result .details { 65 | display: flex; 66 | gap: 10px; 67 | color: #b3b6d4; 68 | margin: 5px 0 20px 0; 69 | font-size: 14px; 70 | } 71 | .word-meaning { 72 | color: #575a7b; 73 | } 74 | .word-example { 75 | color: #575a7b; 76 | font-style: italic; 77 | border-left: 5px solid #ae9cff; 78 | padding-left: 20px; 79 | margin-top: 30px; 80 | } 81 | .error { 82 | margin-top: 80px; 83 | text-align: center; 84 | color:red; 85 | } -------------------------------------------------------------------------------- /Favicon Fetcher generator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Favicon Fetcher 11 | 12 | 13 |

Favicon Fetcher

14 | 15 |
16 | 17 | 21 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /Favicon Fetcher generator/index.js: -------------------------------------------------------------------------------- 1 | const img = document.querySelector('img'); 2 | const input = document.querySelector('input'); 3 | 4 | input.addEventListener('keydown', () =>{ 5 | const favicon = `https://www.google.com/s2/favicons?sz=32&domain_url=${input.value}`; 6 | img.src = favicon; 7 | }) -------------------------------------------------------------------------------- /Favicon Fetcher generator/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: "sans"; 6 | } 7 | 8 | @font-face { 9 | font-family: "sans"; 10 | src: url(font/sans.ttf); 11 | } 12 | 13 | html,body{ 14 | height: 100%; 15 | } 16 | 17 | body{ 18 | display: flex; 19 | align-items: center; 20 | justify-content: center; 21 | background: #19172e; 22 | } 23 | 24 | h2 { 25 | position: absolute; 26 | top: 0; 27 | padding-top: 100px; 28 | color: white; 29 | font-size: 2rem; 30 | text-align: center; 31 | } 32 | 33 | h3{ 34 | position: absolute; 35 | top: -70px; 36 | color: white; 37 | font-size: 1.3rem; 38 | text-align: center; 39 | } 40 | 41 | img{ 42 | size:18px; 43 | margin-right: 1.2rem; 44 | } 45 | 46 | label{ 47 | position: relative; 48 | } 49 | 50 | label input{ 51 | font-size: 1rem; 52 | padding: 1rem ; 53 | border-radius: 0.2rem; 54 | } 55 | 56 | footer { 57 | background-color: #19172e; 58 | text-align: center; 59 | color: white; 60 | font-size: 1rem; 61 | position: absolute; 62 | left: 0; 63 | right: 0; 64 | bottom: 0; 65 | margin-bottom: 0; 66 | padding: 5px; 67 | line-height: 3vh; 68 | } 69 | 70 | footer a:visited { 71 | color: inherit; 72 | } -------------------------------------------------------------------------------- /Filter Gallery/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |

Filter by PREETI RAJ

12 |
13 | 21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 | 48 |
49 |
50 | 71 | 72 | -------------------------------------------------------------------------------- /Filter Gallery/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap'); 2 | *{ 3 | margin:0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | font-family: "Poppins",sans-serif; 7 | } 8 | h1{ 9 | font-family: 'Montserrat',sans-serif; 10 | background-color: #f40303; 11 | -webkit-background-clip: text; 12 | background-clip: text; 13 | -webkit-text-fill-color: transparent; 14 | animation: text 7.5s linear infinite; 15 | text-align: center; 16 | } 17 | @keyframes text { 18 | from{background-position: 0% 50%;} 19 | to{background-position: 100% 100%;} 20 | } 21 | section{ 22 | padding:20px; 23 | width:100%; 24 | display:flex; 25 | justify-content: center; 26 | align-items: center; 27 | flex-direction: column; 28 | margin:40px auto; 29 | } 30 | section ul{ 31 | display:flex; 32 | justify-content: center; 33 | align-items: center; 34 | flex-wrap: wrap; 35 | margin-bottom:20px; 36 | } 37 | section ul li{ 38 | list-style: none; 39 | background: #eee; 40 | padding: 12px 20px; 41 | margin:5px; 42 | letter-spacing: 1px; 43 | cursor: pointer; 44 | } 45 | section ul li.active{ 46 | background: #03a9f4; 47 | color:#fff; 48 | } 49 | 50 | .product{ 51 | display:flex; 52 | justify-content: center; 53 | align-items: center; 54 | flex-wrap: wrap; 55 | } 56 | .product .itemBox{ 57 | position:relative; 58 | width:200px; 59 | height:200px; 60 | margin:5px; 61 | display:block; 62 | border-radius: 10px; 63 | box-shadow: 10px 10px 10px #0f0f0f; 64 | } 65 | .product .itemBox.hide{ 66 | display:none; 67 | } 68 | .product .itemBox img{ 69 | position:absolute; 70 | top:0; 71 | left:0; 72 | width:100%; 73 | height:100%; 74 | border-radius: 10px; 75 | /* object-fit: cover; */ 76 | } -------------------------------------------------------------------------------- /Filter Image/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

Apply a Filter to Your Image

5 |

6 | Please, upload an image and apply the filter that best suits the image 7 |

8 | 9 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /Filter Image/index.js: -------------------------------------------------------------------------------- 1 | // hiding the div that will contain the images 2 | const imagesDiv = document.querySelector("#images"); 3 | 4 | const fileInput = document.querySelector("#upload"); 5 | 6 | let imageToFilter = null; 7 | const filteredImage = document.querySelector("#filteredImage"); 8 | 9 | // initializing the filter value 10 | const filterElement = document.getElementsByName("filterRadio"); 11 | let filter; 12 | filterElement.forEach((f) => { 13 | if (f.checked) filter = f.value; 14 | }); 15 | 16 | // applying the selected filter 17 | filterElement.forEach((f) => { 18 | f.onclick = () => { 19 | filter = f.value; 20 | filteredImage.src = filterImage(imageToFilter, filter); 21 | }; 22 | }); 23 | 24 | fileInput.addEventListener("change", async (e) => { 25 | const [file] = fileInput.files; 26 | 27 | // displaying the uploaded image 28 | imageToFilter = document.querySelector("#imageToFilter"); 29 | imageToFilter.src = await fileToDataUri(file); 30 | 31 | // making the div containing the image visible 32 | imagesDiv.style.visibility = "visible"; 33 | 34 | // applying the defaul filter 35 | imageToFilter.addEventListener("load", () => { 36 | filteredImage.src = filterImage(imageToFilter, filter); 37 | }); 38 | 39 | return false; 40 | }); 41 | 42 | function fileToDataUri(field) { 43 | return new Promise((resolve) => { 44 | const reader = new FileReader(); 45 | 46 | reader.addEventListener("load", () => { 47 | resolve(reader.result); 48 | }); 49 | 50 | reader.readAsDataURL(field); 51 | }); 52 | } 53 | 54 | function filterImage(imageToFilter, filter) { 55 | const canvas = document.createElement("canvas"); 56 | const context = canvas.getContext("2d"); 57 | 58 | const canvasWidth = imageToFilter.width; 59 | const canvasHeight = imageToFilter.height; 60 | 61 | canvas.width = canvasWidth; 62 | canvas.height = canvasHeight; 63 | 64 | context.drawImage(imageToFilter, 0, 0, canvasWidth, canvasHeight); 65 | 66 | const sourceImageData = context.getImageData(0, 0, canvasWidth, canvasHeight); 67 | const blankOutputImageData = context.createImageData( 68 | canvasWidth, 69 | canvasHeight 70 | ); 71 | 72 | const outputImageData = applyFilter( 73 | sourceImageData, 74 | blankOutputImageData, 75 | filter 76 | ); 77 | 78 | context.putImageData(outputImageData, 0, 0); 79 | 80 | return canvas.toDataURL(); 81 | } 82 | 83 | function applyFilter(sourceImageData, outputImageData, filter) { 84 | if (filter === "noFilter") { 85 | return sourceImageData; 86 | } else if (filter === "threshold") { 87 | return applyThreshold(sourceImageData); 88 | } else if (filter === "sharpen") { 89 | return applyConvolution(sourceImageData, outputImageData, [ 90 | 0, 91 | -1, 92 | 0, 93 | -1, 94 | 5, 95 | -1, 96 | 0, 97 | -1, 98 | 0 99 | ]); 100 | } else if (filter === "blur") { 101 | return applyConvolution(sourceImageData, outputImageData, [ 102 | 1 / 16, 103 | 2 / 16, 104 | 1 / 16, 105 | 2 / 16, 106 | 4 / 16, 107 | 2 / 16, 108 | 1 / 16, 109 | 2 / 16, 110 | 1 / 16 111 | ]); 112 | } else { 113 | return sourceImageData; 114 | } 115 | } 116 | 117 | function applyThreshold(sourceImageData, threshold = 127) { 118 | const src = sourceImageData.data; 119 | 120 | for (let i = 0; i < src.length; i += 4) { 121 | const r = src[i]; 122 | const g = src[i + 1]; 123 | const b = src[i + 2]; 124 | // thresholding the current value 125 | const v = 0.2126 * r + 0.7152 * g + 0.0722 * b >= threshold ? 255 : 0; 126 | src[i] = src[i + 1] = src[i + 2] = v; 127 | } 128 | 129 | return sourceImageData; 130 | } 131 | 132 | function applyConvolution(sourceImageData, outputImageData, kernel) { 133 | const src = sourceImageData.data; 134 | const dst = outputImageData.data; 135 | 136 | const srcWidth = sourceImageData.width; 137 | const srcHeight = sourceImageData.height; 138 | 139 | const side = Math.round(Math.sqrt(kernel.length)); 140 | const halfSide = Math.floor(side / 2); 141 | 142 | // padding the output by the convolution kernel 143 | const w = srcWidth; 144 | const h = srcHeight; 145 | 146 | // iterating through the output image pixels 147 | for (let y = 0; y < h; y++) { 148 | for (let x = 0; x < w; x++) { 149 | let r = 0, 150 | g = 0, 151 | b = 0, 152 | a = 0; 153 | 154 | // calculating the weighed sum of the source image pixels that 155 | // fall under the convolution kernel 156 | for (let cy = 0; cy < side; cy++) { 157 | for (let cx = 0; cx < side; cx++) { 158 | const scy = y + cy - halfSide; 159 | const scx = x + cx - halfSide; 160 | 161 | if (scy >= 0 && scy < srcHeight && scx >= 0 && scx < srcWidth) { 162 | let srcOffset = (scy * srcWidth + scx) * 4; 163 | let wt = kernel[cy * side + cx]; 164 | r += src[srcOffset] * wt; 165 | g += src[srcOffset + 1] * wt; 166 | b += src[srcOffset + 2] * wt; 167 | a += src[srcOffset + 3] * wt; 168 | } 169 | } 170 | } 171 | 172 | const dstOffset = (y * w + x) * 4; 173 | 174 | dst[dstOffset] = r; 175 | dst[dstOffset + 1] = g; 176 | dst[dstOffset + 2] = b; 177 | dst[dstOffset + 3] = a; 178 | } 179 | } 180 | return outputImageData; 181 | } 182 | -------------------------------------------------------------------------------- /Flag Game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Flags Game 6 | 7 | 11 | 12 | 13 | 14 | 15 |
16 |

Drag & Drop The Flags Over Their Respective Country Names

17 |
18 |
19 |
20 |
21 |

22 | 23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /Flag Game/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | font-family: "Poppins", sans-serif; 6 | } 7 | body { 8 | background-color: #5372ef; 9 | } 10 | .container { 11 | width: 90%; 12 | max-width: 37.5em; 13 | background-color: #ffffff; 14 | padding: 3em 0.5em; 15 | position: absolute; 16 | transform: translate(-50%, -50%); 17 | top: 50%; 18 | left: 50%; 19 | border-radius: 0.8em; 20 | } 21 | h3 { 22 | text-align: center; 23 | width: 60%; 24 | margin: 0 auto 2em auto; 25 | font-size: 1.2em; 26 | font-weight: 600; 27 | letter-spacing: 0.03em; 28 | line-height: 1.8em; 29 | color: #010c39; 30 | } 31 | .draggable-objects, 32 | .drop-points { 33 | display: flex; 34 | justify-content: space-around; 35 | padding: 2em; 36 | } 37 | .draggable-image { 38 | width: 8em; 39 | cursor: move; 40 | } 41 | img { 42 | width: 8em; 43 | filter: drop-shadow(0 0.3em 0.9em rgba(0, 0, 0, 0.25)); 44 | } 45 | .countries { 46 | width: 10em; 47 | height: 8em; 48 | display: grid; 49 | place-items: center; 50 | border: 0.25em dashed #010c39; 51 | border-radius: 0.8em; 52 | } 53 | .dropped { 54 | padding: 0; 55 | background-color: #e5ffc8; 56 | } 57 | .controls-container { 58 | position: absolute; 59 | display: flex; 60 | align-items: center; 61 | justify-content: center; 62 | height: 100%; 63 | width: 100%; 64 | background-color: #5372ef; 65 | flex-direction: column; 66 | top: 0; 67 | } 68 | .controls-container button { 69 | font-size: 1.12em; 70 | padding: 0.8em 1em; 71 | border-radius: 0.2em; 72 | border: none; 73 | outline: none; 74 | color: #010c39; 75 | letter-spacing: 0.06em; 76 | cursor: pointer; 77 | } 78 | .controls-container p { 79 | color: #ffffff; 80 | font-size: 2em; 81 | margin-bottom: 1em; 82 | } 83 | .hide { 84 | display: none; 85 | } -------------------------------------------------------------------------------- /Gradient Generator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 12 | 13 | Gradient Generator 14 | 20 | 26 | 27 | 28 |
29 |
30 | 31 | 32 |
33 |
34 | 37 | 40 | 43 | 46 | 49 | 52 | 55 | 58 |
59 | 60 |
61 | 62 | 63 |
64 |
65 | 66 | 67 | -------------------------------------------------------------------------------- /Gradient Generator/index.js: -------------------------------------------------------------------------------- 1 | let colorOne =document.getElementById('color-a'); 2 | let colorTwo = document.getElementById('color-b'); 3 | let currentDirection = 'to bottom'; 4 | let outputCode = document.getElementById('code'); 5 | 6 | function setDirection(value,_this){ 7 | let directions = document.querySelectorAll(".buttons button"); 8 | // console.log(directions) 9 | for(let i of directions){ 10 | i.classList.remove('active'); 11 | } 12 | _this.classList.add('active'); 13 | currentDirection =value; 14 | console.log(currentDirection); 15 | } 16 | function generateCode(){ 17 | outputCode.value = `background-image:linear-gradient(${currentDirection},${colorOne.value}, 18 | ${colorTwo.value});` 19 | 20 | document.getElementsByTagName("BODY")[0].style.backgroundImage = `linear-gradient(${currentDirection} 21 | ,${colorOne.value},${colorTwo.value})`; 22 | } 23 | function copyText(){ 24 | outputCode.select(); 25 | document.execCommand('copy'); 26 | alert('Gradient Copied!'); 27 | } 28 | generateCode(); 29 | /* 30 | 31 | background-image:linear-gradient(to bottom,#c0cc14, 32 | #2bb13a); 33 | background-image:linear-gradient(to bottom left,#33cc14, 34 | #2b4cb1); 35 | */ -------------------------------------------------------------------------------- /Gradient Generator/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | *:before, 3 | *:after{ 4 | padding:0; 5 | margin:0; 6 | box-sizing: border-box; 7 | border:none; 8 | outline:none; 9 | } 10 | body{ 11 | height:100vh; 12 | 13 | } 14 | .container{ 15 | background-color: #ffffff; 16 | width:400px; 17 | padding:50px 30px; 18 | position:absolute; 19 | transform: translate(-50%,-50%); 20 | top:50%; 21 | left:50%; 22 | border-radius: 10px; 23 | box-shadow: 0 20px 25px rgba(0,0,0,0.25); 24 | } 25 | .container *:not(i){ 26 | font-family: "Rubik",sans-serif; 27 | } 28 | .colors{ 29 | width:100%; 30 | display:flex; 31 | justify-content: space-around; 32 | } 33 | input[type="color"]{ 34 | -webkit-appearance: none; 35 | background-color: transparent; 36 | width:100px; 37 | height:45px; 38 | cursor: pointer; 39 | } 40 | 41 | input[type="color"]::-webkit-color-swatch{ 42 | border-radius: 20px; 43 | border:none; 44 | } 45 | .buttons{ 46 | width:100%; 47 | display:flex; 48 | justify-content: space-between; 49 | margin:30px 0; 50 | } 51 | .buttons button{ 52 | height:35px; 53 | width:35px; 54 | background-color: transparent; 55 | border: 2px solid #d5d5dc; 56 | color:#d5d5dc; 57 | cursor: pointer; 58 | } 59 | .rotate-icon i{ 60 | transform: rotate(45deg); 61 | 62 | } 63 | .buttons .active{ 64 | border:none; 65 | background-color: #4a6ee0; 66 | color:#ffffff; 67 | } 68 | #submit{ 69 | display:block;background-color: #4a6ee0; 70 | color:#ffffff; 71 | font-size:16px; 72 | padding:12px 70px; 73 | border-radius: 25px; 74 | margin:0 auto 30px auto; 75 | cursor: pointer; 76 | } 77 | .output{ 78 | background-color: #f0f2fc; 79 | 80 | } 81 | #code{ 82 | width:100%; 83 | resize: none; 84 | color:#30304a; 85 | padding:10px 20px; 86 | background-color: transparent; 87 | } 88 | #copy{ 89 | font-size:14px; 90 | background-color:#4a6ee0; 91 | color:#ffffff; 92 | position:relative; 93 | left:85%; 94 | bottom:10px; 95 | border-radius: 3px; 96 | padding:5px; 97 | cursor: pointer; 98 | } -------------------------------------------------------------------------------- /ImageEditor/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Image Editor 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 | 16 | 17 |
18 |
19 | 20 | 21 |
22 |
23 | 24 | 25 |
26 |
27 | 28 | 29 |
30 |
31 |
32 | 33 | 34 |
35 |
36 | 37 | 38 |
39 |
40 | 41 | 42 |
43 |
44 |
45 |
46 |
47 | 48 |
49 | 50 | 51 |
52 |
53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /ImageEditor/script.js: -------------------------------------------------------------------------------- 1 | let filterA = document.getElementById("blur"); 2 | let filterB = document.getElementById("contrast"); 3 | let filterC = document.getElementById("hue-rotate"); 4 | let filterD = document.getElementById("sepia"); 5 | 6 | let noFlipBtn = document.getElementById("no-flip"); 7 | let flipXBtn = document.getElementById("flip-x"); 8 | let flipYBtn = document.getElementById("flip-y"); 9 | 10 | let uploadButton = document.getElementById("upload-button"); 11 | let image = document.getElementById("chosen-image"); 12 | 13 | 14 | function resetFilter(){ 15 | filterA.value = "0"; 16 | filterB.value = "100"; 17 | filterC.value = "0"; 18 | filterD.value = "0"; 19 | noFlipBtn.checked = true; 20 | addFilter(); 21 | flipImage(); 22 | } 23 | 24 | uploadButton.onchange = () => { 25 | resetFilter(); 26 | document.querySelector(".image-container").style.display = "block"; 27 | let reader = new FileReader(); 28 | reader.readAsDataURL(uploadButton.files[0]); 29 | reader.onload = () => { 30 | image.setAttribute("src", reader.result); 31 | } 32 | } 33 | 34 | let sliders = document.querySelectorAll(".filter input[type='range']"); 35 | sliders.forEach( slider => { 36 | slider.addEventListener("input", addFilter); 37 | }); 38 | 39 | function addFilter(){ 40 | image.style.filter = `blur(${filterA.value}px) contrast(${filterB.value}%) hue-rotate(${filterC.value}deg) sepia(${filterD.value}%)`; 41 | } 42 | 43 | let radioBtns = document.querySelectorAll(".flip-option input[type='radio']"); 44 | radioBtns.forEach( radioBtn => { 45 | radioBtn.addEventListener("click", flipImage); 46 | }); 47 | 48 | function flipImage(){ 49 | if(flipXBtn.checked){ 50 | image.style.transform = "scaleX(-1)"; 51 | } 52 | else if(flipYBtn.checked){ 53 | image.style.transform = "scaleY(-1)"; 54 | } 55 | else{ 56 | image.style.transform = "scale(1,1)"; 57 | } 58 | } -------------------------------------------------------------------------------- /ImageEditor/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | font-family: "Rubik",sans-serif; 6 | } 7 | body{ 8 | background-color: #d3e8f5; 9 | } 10 | .wrapper{ 11 | width: 85vw; 12 | min-height: 50vmin; 13 | padding: 50px 30px; 14 | background-color: #ffffff; 15 | position: absolute; 16 | transform: translate(-50%,-50%); 17 | top: 50%; 18 | left: 50%; 19 | border-radius: 10px; 20 | box-shadow: 0 20px 35px rgba(0,0,0,0.15); 21 | display: grid; 22 | grid-template-columns: 5fr 7fr; 23 | } 24 | .editor{ 25 | min-height: 35vmin; 26 | display: flex; 27 | flex-direction: column; 28 | justify-content: space-around; 29 | gap: 20px; 30 | } 31 | .editor label{ 32 | font-size: 2.8vmin; 33 | color: #2a292a; 34 | font-weight: 400; 35 | } 36 | .editor input[type="range"]{ 37 | display: block; 38 | width: 100%; 39 | position: relative; 40 | margin-top: 5px; 41 | } 42 | .flip-buttons{ 43 | display: flex; 44 | flex-direction: column; 45 | margin-top: 10px; 46 | } 47 | .flip-buttons .flip-option{ 48 | margin-top: 10px; 49 | } 50 | .result{ 51 | position: relative; 52 | display: flex; 53 | flex-direction: column; 54 | justify-content: center; 55 | gap: 20px; 56 | } 57 | .result img{ 58 | display: block; 59 | position: relative; 60 | max-width: calc(100% - 4vmin); 61 | max-height: 45vmin; 62 | margin: auto; 63 | } 64 | .image-container{ 65 | display: none; 66 | } 67 | input[type="file"]{ 68 | display: none; 69 | } 70 | .result label{ 71 | display: block; 72 | position: relative; 73 | margin: 0 auto; 74 | width: 220px; 75 | background-color: #025bee; 76 | color: #ffffff; 77 | text-align: center; 78 | padding: 16px 0; 79 | border-radius: 5px; 80 | font-size: 2.8vmin; 81 | font-weight: 400; 82 | cursor: pointer; 83 | } 84 | @media screen and (max-width: 620px) { 85 | .wrapper{ 86 | width: 95vw; 87 | grid-template-columns: 1fr; 88 | padding: 30px 20px; 89 | gap: 10px; 90 | } 91 | .editor{ 92 | grid-row: 2; 93 | } 94 | .flip-buttons{ 95 | flex-direction: row; 96 | justify-content: space-between; 97 | } 98 | .flip-buttons .flip-option{ 99 | margin-top: 0; 100 | } 101 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Preeti Raj 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 | -------------------------------------------------------------------------------- /Login Form with js/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | font-family: "Poppins", sans-serif; 6 | } 7 | body { 8 | background-color: #31d7f4;; 9 | } 10 | .container { 11 | height: 31.25em; 12 | width: 31.25em; 13 | position: absolute; 14 | transform: translate(-50%, -50%); 15 | top: 50%; 16 | left: 50%; 17 | } 18 | form { 19 | width: 23.75em; 20 | height: 18.75em; 21 | background-color: #ffffff; 22 | position: absolute; 23 | transform: translate(-50%, -50%); 24 | top: calc(50% + 3.1em); 25 | left: 50%; 26 | padding: 0 3.1em; 27 | display: flex; 28 | flex-direction: column; 29 | justify-content: center; 30 | border-radius: 0.5em; 31 | } 32 | form label { 33 | display: block; 34 | margin-bottom: 0.2em; 35 | font-weight: 600; 36 | color: #2e0d30; 37 | } 38 | form input { 39 | font-size: 0.95em; 40 | font-weight: 400; 41 | color: #3f3554; 42 | padding: 0.3em; 43 | border: none; 44 | border-bottom: 0.12em solid #3f3554; 45 | outline: none; 46 | } 47 | form input:focus { 48 | border-color: #31d7f4; 49 | } 50 | form input:not(:last-child) { 51 | margin-bottom: 0.9em; 52 | } 53 | form button { 54 | font-size: 0.95em; 55 | padding: 0.8em 0; 56 | border-radius: 2em; 57 | border: none; 58 | outline: none; 59 | background-color: #31d7f4;; 60 | color: #2e0d30; 61 | text-transform: uppercase; 62 | font-weight: 600; 63 | letter-spacing: 0.15em; 64 | margin-top: 0.8em; 65 | } 66 | .panda-face { 67 | height: 7.5em; 68 | width: 8.4em; 69 | background-color: #ffffff; 70 | border: 0.18em solid #2e0d30; 71 | border-radius: 7.5em 7.5em 5.62em 5.62em; 72 | position: absolute; 73 | top: 2em; 74 | margin: auto; 75 | left: 0; 76 | right: 0; 77 | } 78 | .ear-l, 79 | .ear-r { 80 | background-color: #3f3554; 81 | height: 2.5em; 82 | width: 2.81em; 83 | border: 0.18em solid #2e0d30; 84 | border-radius: 2.5em 2.5em 0 0; 85 | top: 1.75em; 86 | position: absolute; 87 | } 88 | .ear-l { 89 | transform: rotate(-38deg); 90 | left: 10.75em; 91 | } 92 | .ear-r { 93 | transform: rotate(38deg); 94 | right: 10.75em; 95 | } 96 | .blush-l, 97 | .blush-r { 98 | background-color: #ff8bb1; 99 | height: 1em; 100 | width: 1.37em; 101 | border-radius: 50%; 102 | position: absolute; 103 | top: 4em; 104 | } 105 | .blush-l { 106 | transform: rotate(25deg); 107 | left: 1em; 108 | } 109 | .blush-r { 110 | transform: rotate(-25deg); 111 | right: 1em; 112 | } 113 | .eye-l, 114 | .eye-r { 115 | background-color: #3f3554; 116 | height: 2.18em; 117 | width: 2em; 118 | border-radius: 2em; 119 | position: absolute; 120 | top: 2.18em; 121 | } 122 | .eye-l { 123 | left: 1.37em; 124 | transform: rotate(-20deg); 125 | } 126 | .eye-r { 127 | right: 1.37em; 128 | transform: rotate(20deg); 129 | } 130 | .eyeball-l, 131 | .eyeball-r { 132 | height: 0.6em; 133 | width: 0.6em; 134 | background-color: #ffffff; 135 | border-radius: 50%; 136 | position: absolute; 137 | left: 0.6em; 138 | top: 0.6em; 139 | transition: 1s all; 140 | } 141 | .eyeball-l { 142 | transform: rotate(20deg); 143 | } 144 | .eyeball-r { 145 | transform: rotate(-20deg); 146 | } 147 | .nose { 148 | height: 1em; 149 | width: 1em; 150 | background-color: #3f3554; 151 | position: absolute; 152 | top: 4.37em; 153 | margin: auto; 154 | left: 0; 155 | right: 0; 156 | border-radius: 1.2em 0 0 0.25em; 157 | transform: rotate(45deg); 158 | } 159 | .nose:before { 160 | content: ""; 161 | position: absolute; 162 | background-color: #3f3554; 163 | height: 0.6em; 164 | width: 0.1em; 165 | transform: rotate(-45deg); 166 | top: 0.75em; 167 | left: 1em; 168 | } 169 | .mouth, 170 | .mouth:before { 171 | height: 0.75em; 172 | width: 0.93em; 173 | background-color: transparent; 174 | position: absolute; 175 | border-radius: 50%; 176 | box-shadow: 0 0.18em #3f3554; 177 | } 178 | .mouth { 179 | top: 5.31em; 180 | left: 3.12em; 181 | } 182 | .mouth:before { 183 | content: ""; 184 | position: absolute; 185 | left: 0.87em; 186 | } 187 | .hand-l, 188 | .hand-r { 189 | background-color: #3f3554; 190 | height: 2.81em; 191 | width: 2.5em; 192 | border: 0.18em solid #2e0d30; 193 | border-radius: 0.6em 0.6em 2.18em 2.18em; 194 | transition: 1s all; 195 | position: absolute; 196 | top: 8.4em; 197 | } 198 | .hand-l { 199 | left: 7.5em; 200 | } 201 | .hand-r { 202 | right: 7.5em; 203 | } 204 | .paw-l, 205 | .paw-r { 206 | background-color: #3f3554; 207 | height: 3.12em; 208 | width: 3.12em; 209 | border: 0.18em solid #2e0d30; 210 | border-radius: 2.5em 2.5em 1.2em 1.2em; 211 | position: absolute; 212 | top: 26.56em; 213 | } 214 | .paw-l { 215 | left: 10em; 216 | } 217 | .paw-r { 218 | right: 10em; 219 | } 220 | .paw-l:before, 221 | .paw-r:before { 222 | position: absolute; 223 | content: ""; 224 | background-color: #ffffff; 225 | height: 1.37em; 226 | width: 1.75em; 227 | top: 1.12em; 228 | left: 0.55em; 229 | border-radius: 1.56em 1.56em 0.6em 0.6em; 230 | } 231 | .paw-l:after, 232 | .paw-r:after { 233 | position: absolute; 234 | content: ""; 235 | background-color: #ffffff; 236 | height: 0.5em; 237 | width: 0.5em; 238 | border-radius: 50%; 239 | top: 0.31em; 240 | left: 1.12em; 241 | box-shadow: 0.87em 0.37em #ffffff, -0.87em 0.37em #ffffff; 242 | } 243 | @media screen and (max-width: 500px) { 244 | .container { 245 | font-size: 14px; 246 | } 247 | } 248 | #h1{ 249 | text-align: center; 250 | margin:20px; 251 | z-index:9; 252 | } -------------------------------------------------------------------------------- /Login Form with js/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Interactive Panda Form 6 | 7 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | 18 | 19 | 20 | 21 | 22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |

Build by 💞 PREETI RAJ

43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /Login Form with js/index.js: -------------------------------------------------------------------------------- 1 | let usernameRef = document.getElementById("username"); 2 | let passwordRef = document.getElementById("password"); 3 | let eyeL = document.querySelector(".eyeball-l"); 4 | let eyeR = document.querySelector(".eyeball-r"); 5 | let handL = document.querySelector(".hand-l"); 6 | let handR = document.querySelector(".hand-r"); 7 | 8 | let normalEyeStyle = () => { 9 | eyeL.style.cssText = ` 10 | left:0.6em; 11 | top: 0.6em; 12 | `; 13 | eyeR.style.cssText = ` 14 | right:0.6em; 15 | top:0.6em; 16 | `; 17 | }; 18 | 19 | let normalHandStyle = () => { 20 | handL.style.cssText = ` 21 | height: 2.81em; 22 | top:8.4em; 23 | left:7.5em; 24 | transform: rotate(0deg); 25 | `; 26 | handR.style.cssText = ` 27 | height: 2.81em; 28 | top: 8.4em; 29 | right: 7.5em; 30 | transform: rotate(0deg) 31 | `; 32 | }; 33 | //When clicked on username input 34 | usernameRef.addEventListener("focus", () => { 35 | eyeL.style.cssText = ` 36 | left: 0.75em; 37 | top: 1.12em; 38 | `; 39 | eyeR.style.cssText = ` 40 | right: 0.75em; 41 | top: 1.12em; 42 | `; 43 | normalHandStyle(); 44 | }); 45 | //When clicked on password input 46 | passwordRef.addEventListener("focus", () => { 47 | handL.style.cssText = ` 48 | height: 6.56em; 49 | top: 3.87em; 50 | left: 11.75em; 51 | transform: rotate(-155deg); 52 | `; 53 | handR.style.cssText = ` 54 | height: 6.56em; 55 | top: 3.87em; 56 | right: 11.75em; 57 | transform: rotate(155deg); 58 | `; 59 | normalEyeStyle(); 60 | }); 61 | //When clicked outside username and password input 62 | document.addEventListener("click", (e) => { 63 | let clickedElem = e.target; 64 | if (clickedElem != usernameRef && clickedElem != passwordRef) { 65 | normalEyeStyle(); 66 | normalHandStyle(); 67 | } 68 | }); -------------------------------------------------------------------------------- /Math Game/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | font-family: "Poppins", sans-serif; 6 | } 7 | body { 8 | background-color: #f4c531; 9 | } 10 | .container { 11 | background-color: #ffffff; 12 | width: 90%; 13 | max-width: 31.25em; 14 | position: absolute; 15 | transform: translate(-50%, -50%); 16 | top: 50%; 17 | left: 50%; 18 | padding: 5em 3em; 19 | border-radius: 0.5em; 20 | } 21 | .container h3 { 22 | font-size: 1.2em; 23 | color: #23234c; 24 | text-align: center; 25 | font-weight: 500; 26 | line-height: 1.8em; 27 | } 28 | .container #submit-btn { 29 | font-size: 1.2em; 30 | font-weight: 500; 31 | display: block; 32 | margin: 0 auto; 33 | background-color: #f4c531; 34 | border-radius: 0.3em; 35 | border: none; 36 | outline: none; 37 | cursor: pointer; 38 | color: #23234c; 39 | padding: 0.6em 2em; 40 | } 41 | #error-msg { 42 | text-align: center; 43 | margin-top: 1em; 44 | background-color: #ffdde0; 45 | color: #d62f2f; 46 | padding: 0.2em 0; 47 | } 48 | .container #question { 49 | background-color: #eeedf1; 50 | font-size: 2em; 51 | font-weight: 600; 52 | color: #23234c; 53 | text-align: center; 54 | display: flex; 55 | align-items: center; 56 | justify-content: center; 57 | margin: 1.4em 0 1em 0; 58 | padding: 1em 0; 59 | } 60 | .container input { 61 | font-size: 1em; 62 | font-weight: 600; 63 | width: 2.35em; 64 | color: #23234c; 65 | text-align: center; 66 | padding: 0 0.2em; 67 | border: none; 68 | background-color: transparent; 69 | border-bottom: 0.12em solid #23234c; 70 | margin: 0 0.25em; 71 | } 72 | .container input:focus { 73 | border-color: #f4c531; 74 | outline: none; 75 | } 76 | /*Hide Number Arrows*/ 77 | .container input[type="number"] { 78 | -moz-appearance: textfield; 79 | } 80 | .container input[type="number"]::-webkit-outer-spin-button, 81 | .container input[type="number"]::-webkit-inner-spin-button { 82 | -webkit-appearance: none; 83 | margin: 0; 84 | } 85 | .controls-container { 86 | position: absolute; 87 | display: flex; 88 | align-items: center; 89 | justify-content: center; 90 | flex-direction: column; 91 | background-color: #f4c531; 92 | height: 100%; 93 | width: 100%; 94 | top: 0; 95 | } 96 | #start-btn { 97 | font-size: 1.2em; 98 | font-weight: 500; 99 | background-color: #ffffff; 100 | color: #23234c; 101 | border: none; 102 | outline: none; 103 | cursor: pointer; 104 | padding: 0.8em 1.8em; 105 | border-radius: 0.3em; 106 | } 107 | #result { 108 | margin-bottom: 1em; 109 | font-size: 1.5em; 110 | color: #23234c; 111 | } 112 | #result span { 113 | font-weight: 600; 114 | } 115 | 116 | .hide { 117 | display: none; 118 | } 119 | #h1{ 120 | text-align: center; 121 | margin:20px; 122 | z-index:9; 123 | } -------------------------------------------------------------------------------- /Math Game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Math Game 6 | 7 | 11 | 12 | 13 | 14 | 15 |
16 |

Fill In The Blank With Correct Number Or Operator

17 |
18 | 19 |

Some Demo Error Message

20 |
21 |
22 |

23 | 24 |

Build by 💞 PREETI RAJ

25 |
26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /Math Game/index.js: -------------------------------------------------------------------------------- 1 | let operators = ["+", "-", "*"]; 2 | const startBtn = document.getElementById("start-btn"); 3 | const question = document.getElementById("question"); 4 | const controls = document.querySelector(".controls-container"); 5 | const result = document.getElementById("result"); 6 | const submitBtn = document.getElementById("submit-btn"); 7 | const errorMessage = document.getElementById("error-msg"); 8 | let answerValue; 9 | let operatorQuestion; 10 | 11 | //Random Value Generator 12 | const randomValue = (min, max) => Math.floor(Math.random() * (max - min)) + min; 13 | 14 | const questionGenerator = () => { 15 | //Two random values between 1 and 20 16 | let [num1, num2] = [randomValue(1, 20), randomValue(1, 20)]; 17 | 18 | //For getting random operator 19 | let randomOperator = operators[Math.floor(Math.random() * operators.length)]; 20 | 21 | if (randomOperator == "-" && num2 > num1) { 22 | [num1, num2] = [num2, num1]; 23 | } 24 | 25 | //Solve equation 26 | let solution = eval(`${num1}${randomOperator}${num2}`); 27 | 28 | //For placing the input at random position 29 | //(1 for num1, 2 for num2, 3 for operator, anything else(4) for solution) 30 | let randomVar = randomValue(1, 5); 31 | 32 | if (randomVar == 1) { 33 | answerValue = num1; 34 | question.innerHTML = ` ${randomOperator} ${num2} = ${solution}`; 35 | } else if (randomVar == 2) { 36 | answerValue = num2; 37 | question.innerHTML = `${num1} ${randomOperator} = ${solution}`; 38 | } else if (randomVar == 3) { 39 | answerValue = randomOperator; 40 | operatorQuestion = true; 41 | question.innerHTML = `${num1} ${num2} = ${solution}`; 42 | } else { 43 | answerValue = solution; 44 | question.innerHTML = `${num1} ${randomOperator} ${num2} = `; 45 | } 46 | 47 | //User Input Check 48 | submitBtn.addEventListener("click", () => { 49 | errorMessage.classList.add("hide"); 50 | let userInput = document.getElementById("inputValue").value; 51 | //If user input is not empty 52 | if (userInput) { 53 | //If the user guessed correct answer 54 | if (userInput == answerValue) { 55 | stopGame(`Yippie!! Correct Answer`); 56 | } 57 | //If user inputs operator other than +,-,* 58 | else if (operatorQuestion && !operators.includes(userInput)) { 59 | errorMessage.classList.remove("hide"); 60 | errorMessage.innerHTML = "Please enter a valid operator"; 61 | } 62 | //If user guessed wrong answer 63 | else { 64 | stopGame(`Opps!! Wrong Answer`); 65 | } 66 | } 67 | //If user input is empty 68 | else { 69 | errorMessage.classList.remove("hide"); 70 | errorMessage.innerHTML = "Input Cannot Be Empty"; 71 | } 72 | }); 73 | }; 74 | 75 | //Start Game 76 | startBtn.addEventListener("click", () => { 77 | operatorQuestion = false; 78 | answerValue = ""; 79 | errorMessage.innerHTML = ""; 80 | errorMessage.classList.add("hide"); 81 | //Controls and buttons visibility 82 | controls.classList.add("hide"); 83 | startBtn.classList.add("hide"); 84 | questionGenerator(); 85 | }); 86 | 87 | //Stop Game 88 | const stopGame = (resultText) => { 89 | result.innerHTML = resultText; 90 | startBtn.innerText = "Restart"; 91 | controls.classList.remove("hide"); 92 | startBtn.classList.remove("hide"); 93 | }; -------------------------------------------------------------------------------- /Memory Game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Memory Game 6 | 7 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |
18 |
19 |
20 |
21 | 22 |
23 |
24 |

25 | 26 |
27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /Memory Game/script.js: -------------------------------------------------------------------------------- 1 | const moves = document.getElementById("moves-count"); 2 | const timeValue = document.getElementById("time"); 3 | const startButton = document.getElementById("start"); 4 | const stopButton = document.getElementById("stop"); 5 | const gameContainer = document.querySelector(".game-container"); 6 | const result = document.getElementById("result"); 7 | const controls = document.querySelector(".controls-container"); 8 | let cards; 9 | let interval; 10 | let firstCard = false; 11 | let secondCard = false; 12 | 13 | //Items array 14 | const items = [ 15 | { name: "bee", image: "bee.png" }, 16 | { name: "crocodile", image: "crocodile.png" }, 17 | { name: "macaw", image: "macaw.png" }, 18 | { name: "gorilla", image: "gorilla.png" }, 19 | { name: "tiger", image: "tiger.png" }, 20 | { name: "monkey", image: "monkey.png" }, 21 | { name: "chameleon", image: "chameleon.png" }, 22 | { name: "piranha", image: "piranha.png" }, 23 | { name: "anaconda", image: "anaconda.png" }, 24 | { name: "sloth", image: "sloth.png" }, 25 | { name: "cockatoo", image: "cockatoo.png" }, 26 | { name: "toucan", image: "toucan.png" }, 27 | ]; 28 | 29 | //Initial Time 30 | let seconds = 0, 31 | minutes = 0; 32 | //Initial moves and win count 33 | let movesCount = 0, 34 | winCount = 0; 35 | 36 | //For timer 37 | const timeGenerator = () => { 38 | seconds += 1; 39 | //minutes logic 40 | if (seconds >= 60) { 41 | minutes += 1; 42 | seconds = 0; 43 | } 44 | //format time before displaying 45 | let secondsValue = seconds < 10 ? `0${seconds}` : seconds; 46 | let minutesValue = minutes < 10 ? `0${minutes}` : minutes; 47 | timeValue.innerHTML = `Time:${minutesValue}:${secondsValue}`; 48 | }; 49 | 50 | //For calculating moves 51 | const movesCounter = () => { 52 | movesCount += 1; 53 | moves.innerHTML = `Moves:${movesCount}`; 54 | }; 55 | 56 | //Pick random objects from the items array 57 | const generateRandom = (size = 4) => { 58 | //temporary array 59 | let tempArray = [...items]; 60 | //initializes cardValues array 61 | let cardValues = []; 62 | //size should be double (4*4 matrix)/2 since pairs of objects would exist 63 | size = (size * size) / 2; 64 | //Random object selection 65 | for (let i = 0; i < size; i++) { 66 | const randomIndex = Math.floor(Math.random() * tempArray.length); 67 | cardValues.push(tempArray[randomIndex]); 68 | //once selected remove the object from temp array 69 | tempArray.splice(randomIndex, 1); 70 | } 71 | return cardValues; 72 | }; 73 | 74 | const matrixGenerator = (cardValues, size = 4) => { 75 | gameContainer.innerHTML = ""; 76 | cardValues = [...cardValues, ...cardValues]; 77 | //simple shuffle 78 | cardValues.sort(() => Math.random() - 0.5); 79 | for (let i = 0; i < size * size; i++) { 80 | /* 81 | Create Cards 82 | before => front side (contains question mark) 83 | after => back side (contains actual image); 84 | data-card-values is a custom attribute which stores the names of the cards to match later 85 | */ 86 | gameContainer.innerHTML += ` 87 |
88 |
?
89 |
90 |
91 |
92 | `; 93 | } 94 | //Grid 95 | gameContainer.style.gridTemplateColumns = `repeat(${size},auto)`; 96 | 97 | //Cards 98 | cards = document.querySelectorAll(".card-container"); 99 | cards.forEach((card) => { 100 | card.addEventListener("click", () => { 101 | //If selected card is not matched yet then only run (i.e already matched card when clicked would be ignored) 102 | if (!card.classList.contains("matched")) { 103 | //flip the cliked card 104 | card.classList.add("flipped"); 105 | //if it is the firstcard (!firstCard since firstCard is initially false) 106 | if (!firstCard) { 107 | //so current card will become firstCard 108 | firstCard = card; 109 | //current cards value becomes firstCardValue 110 | firstCardValue = card.getAttribute("data-card-value"); 111 | } else { 112 | //increment moves since user selected second card 113 | movesCounter(); 114 | //secondCard and value 115 | secondCard = card; 116 | let secondCardValue = card.getAttribute("data-card-value"); 117 | if (firstCardValue == secondCardValue) { 118 | //if both cards match add matched class so these cards would beignored next time 119 | firstCard.classList.add("matched"); 120 | secondCard.classList.add("matched"); 121 | //set firstCard to false since next card would be first now 122 | firstCard = false; 123 | //winCount increment as user found a correct match 124 | winCount += 1; 125 | //check if winCount ==half of cardValues 126 | if (winCount == Math.floor(cardValues.length / 2)) { 127 | result.innerHTML = `

You Won

128 |

Moves: ${movesCount}

`; 129 | stopGame(); 130 | } 131 | } else { 132 | //if the cards dont match 133 | //flip the cards back to normal 134 | let [tempFirst, tempSecond] = [firstCard, secondCard]; 135 | firstCard = false; 136 | secondCard = false; 137 | let delay = setTimeout(() => { 138 | tempFirst.classList.remove("flipped"); 139 | tempSecond.classList.remove("flipped"); 140 | }, 900); 141 | } 142 | } 143 | } 144 | }); 145 | }); 146 | }; 147 | 148 | //Start game 149 | startButton.addEventListener("click", () => { 150 | movesCount = 0; 151 | seconds = 0; 152 | minutes = 0; 153 | //controls amd buttons visibility 154 | controls.classList.add("hide"); 155 | stopButton.classList.remove("hide"); 156 | startButton.classList.add("hide"); 157 | //Start timer 158 | interval = setInterval(timeGenerator, 1000); 159 | //initial moves 160 | moves.innerHTML = `Moves: ${movesCount}`; 161 | initializer(); 162 | }); 163 | 164 | //Stop game 165 | stopButton.addEventListener( 166 | "click", 167 | (stopGame = () => { 168 | controls.classList.remove("hide"); 169 | stopButton.classList.add("hide"); 170 | startButton.classList.remove("hide"); 171 | clearInterval(interval); 172 | }) 173 | ); 174 | 175 | //Initialize values and func calls 176 | const initializer = () => { 177 | result.innerText = ""; 178 | winCount = 0; 179 | let cardValues = generateRandom(); 180 | console.log(cardValues); 181 | matrixGenerator(cardValues); 182 | }; -------------------------------------------------------------------------------- /Memory Game/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | font-family: "Poppins", sans-serif; 6 | } 7 | body { 8 | background-color: #f4c531; 9 | } 10 | .wrapper { 11 | box-sizing: content-box; 12 | width: 26.87em; 13 | padding: 2.5em 3em; 14 | background-color: #ffffff; 15 | position: absolute; 16 | transform: translate(-50%, -50%); 17 | left: 50%; 18 | top: 50%; 19 | border-radius: 0.6em; 20 | box-shadow: 0 0.9em 2.8em rgba(86, 66, 0, 0.2); 21 | } 22 | .game-container { 23 | position: relative; 24 | width: 100%; 25 | display: grid; 26 | gap: 0.6em; 27 | } 28 | .stats-container { 29 | text-align: right; 30 | margin-bottom: 1.2em; 31 | } 32 | .stats-container span { 33 | font-weight: 600; 34 | } 35 | .card-container { 36 | position: relative; 37 | width: 6.25em; 38 | height: 6.25em; 39 | cursor: pointer; 40 | } 41 | .card-before, 42 | .card-after { 43 | position: absolute; 44 | border-radius: 5px; 45 | width: 100%; 46 | height: 100%; 47 | display: flex; 48 | align-items: center; 49 | justify-content: center; 50 | border: 4px solid #000000; 51 | transition: transform 0.7s ease-out; 52 | backface-visibility: hidden; 53 | } 54 | .card-before { 55 | background-color: #f4c531; 56 | font-size: 2.8em; 57 | font-weight: 600; 58 | } 59 | .card-after { 60 | background-color: #ffffff; 61 | transform: rotateY(180deg); 62 | } 63 | .card-container.flipped .card-before { 64 | transform: rotateY(180deg); 65 | } 66 | .card-container.flipped .card-after { 67 | transform: rotateY(0deg); 68 | } 69 | .controls-container { 70 | position: absolute; 71 | display: flex; 72 | align-items: center; 73 | justify-content: center; 74 | flex-direction: column; 75 | width: 100%; 76 | height: 100%; 77 | background-color: #f4c531; 78 | top: 0; 79 | } 80 | button { 81 | border: none; 82 | border-radius: 0.3em; 83 | padding: 1em 1.5em; 84 | cursor: pointer; 85 | } 86 | #stop { 87 | font-size: 1.1em; 88 | display: block; 89 | margin: 1.1em auto 0 auto; 90 | background-color: #000000; 91 | color: #ffffff; 92 | } 93 | .controls-container button { 94 | font-size: 1.3em; 95 | box-shadow: 0 0.6em 2em rgba(86, 66, 0, 0.2); 96 | } 97 | .hide { 98 | display: none; 99 | } 100 | #result { 101 | text-align: center; 102 | } 103 | #result h2 { 104 | font-size: 2.5em; 105 | } 106 | #result h4 { 107 | font-size: 1.8em; 108 | margin: 0.6em 0 1em 0; 109 | } -------------------------------------------------------------------------------- /Parrot Color/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Color The Parrot 6 | 7 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 |
49 |
50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /Parrot Color/script.js: -------------------------------------------------------------------------------- 1 | let bodyBtn = document.getElementById("body-btn"); 2 | let mainWingBtn = document.getElementById("main-wing-btn"); 3 | let subWingBtn = document.getElementById("sub-wing-btn"); 4 | let upperBeakBtn = document.getElementById("upper-beak-btn"); 5 | let lowerBeakBtn = document.getElementById("lower-beak-btn"); 6 | let clawBtn = document.getElementById("claw-btn"); 7 | let tailWingBtn = document.getElementById("tail-wing-btn"); 8 | let headWingBtn = document.getElementById("head-wing-btn"); 9 | let eyePatchBtn = document.getElementById("eye-patch-btn"); 10 | let eyeBtn = document.getElementById("eye-btn"); 11 | 12 | let colors = [ 13 | "#cd0000", 14 | "#f03800", 15 | "#ffb64c", 16 | "#ff9100", 17 | "#0095ff", 18 | "#1fbf66", 19 | "#ff4380", 20 | "#deecf1", 21 | "#714c2f", 22 | "#7fe881", 23 | "#f7006a", 24 | ]; 25 | 26 | let counter1 = 0; 27 | let counter2 = 0; 28 | let counter3 = 0; 29 | let counter4 = 0; 30 | let counter5 = 0; 31 | let counter6 = 0; 32 | let counter7 = 0; 33 | let counter8 = 0; 34 | let counter9 = 0; 35 | let counter10 = 0; 36 | 37 | function setCounterValue(counter) { 38 | return counter < colors.length - 1 ? counter + 1 : 0; 39 | } 40 | 41 | bodyBtn.addEventListener("click", () => { 42 | document.querySelectorAll(".body-clr").forEach((item) => { 43 | item.style.backgroundColor = colors[counter1]; 44 | }); 45 | document.querySelector(".wing-color2-inner").style.borderTopColor = 46 | colors[counter1]; 47 | counter1 = setCounterValue(counter1); 48 | }); 49 | mainWingBtn.addEventListener("click", () => { 50 | document.querySelector(".wing-color1").style.backgroundColor = 51 | colors[counter2]; 52 | counter2 = setCounterValue(counter2); 53 | }); 54 | subWingBtn.addEventListener("click", () => { 55 | document.querySelector(".wing-color2").style.borderTopColor = 56 | colors[counter3]; 57 | counter3 = setCounterValue(counter3); 58 | }); 59 | upperBeakBtn.addEventListener("click", () => { 60 | document.querySelector(".beak-upper").style.backgroundColor = 61 | colors[counter4]; 62 | counter4 = setCounterValue(counter4); 63 | }); 64 | lowerBeakBtn.addEventListener("click", () => { 65 | document.querySelector(".beak-lower").style.backgroundColor = 66 | colors[counter5]; 67 | counter5 = setCounterValue(counter5); 68 | }); 69 | clawBtn.addEventListener("click", () => { 70 | document.querySelector(".leg").style.backgroundColor = colors[counter6]; 71 | counter6 = setCounterValue(counter6); 72 | }); 73 | tailWingBtn.addEventListener("click", () => { 74 | document 75 | .querySelectorAll(".tail-wing") 76 | .forEach((item) => (item.style.backgroundColor = colors[counter7])); 77 | counter7 = setCounterValue(counter7); 78 | }); 79 | headWingBtn.addEventListener("click", () => { 80 | document.querySelector(".feather").style.backgroundColor = colors[counter8]; 81 | counter8 = setCounterValue(counter8); 82 | }); 83 | eyePatchBtn.addEventListener("click", () => { 84 | document.querySelector(".eye-patch").style.backgroundColor = colors[counter9]; 85 | counter9 = setCounterValue(counter9); 86 | }); 87 | eyeBtn.addEventListener("click", () => { 88 | document.querySelector(".eye").style.backgroundColor = colors[counter10]; 89 | counter10 = setCounterValue(counter10); 90 | }); -------------------------------------------------------------------------------- /Parrot Color/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | body { 7 | background-color: #ffb64c; 8 | } 9 | .container { 10 | width: 95vw; 11 | font-size: 16px; 12 | max-width: 53em; 13 | background-color: #ffffff; 14 | padding: 1.8em; 15 | position: absolute; 16 | transform: translate(-50%, -50%); 17 | top: 50%; 18 | left: 50%; 19 | display: grid; 20 | grid-template-columns: 1fr 2fr; 21 | border-radius: 0.9em; 22 | } 23 | .wrapper { 24 | min-height: 18.75em; 25 | min-width: 18.75em; 26 | z-index: 1; 27 | position: relative; 28 | border-radius: 0.9em 0.9em 0 0; 29 | } 30 | .controls { 31 | padding: 1.8em 0.6em 0 0.6em; 32 | display: grid; 33 | grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); 34 | grid-gap: 1.2em; 35 | align-items: center; 36 | border-left: 2px dashed #000000; 37 | } 38 | .controls button { 39 | font-size: 1em; 40 | height: 3em; 41 | border-radius: 1.5em; 42 | border: none; 43 | background-color: #ffb64c; 44 | font-family: "Poppins", sans-serif; 45 | } 46 | .parrot { 47 | background-color: #f03800; 48 | height: 9.3em; 49 | width: 5em; 50 | position: absolute; 51 | margin: auto; 52 | left: 0; 53 | right: 0; 54 | top: -3.75em; 55 | bottom: 0; 56 | border-radius: 2.8em 0.9em; 57 | } 58 | .tail1 { 59 | position: absolute; 60 | height: 3.75em; 61 | width: 1.75em; 62 | background-color: #cd0000; 63 | border-radius: 0 0 1.25em 0.3em; 64 | bottom: -2.8em; 65 | z-index: -1; 66 | } 67 | .tail2 { 68 | position: absolute; 69 | height: 3.75em; 70 | width: 1.75em; 71 | background-color: #cd0000; 72 | border-radius: 0 0 3em 0; 73 | bottom: -1.8em; 74 | left: 1.5em; 75 | z-index: -1; 76 | } 77 | .wing { 78 | background-color: #f03800; 79 | height: 6.8em; 80 | width: 3.75em; 81 | border-radius: 3.1em 0.6em; 82 | position: absolute; 83 | left: -0.9em; 84 | top: 3.1em; 85 | overflow: hidden; 86 | z-index: 1; 87 | } 88 | .wing-color1 { 89 | position: absolute; 90 | content: ""; 91 | background-color: #0095ff; 92 | height: 60%; 93 | width: 100%; 94 | bottom: 0; 95 | } 96 | .wing-color2 { 97 | height: 0; 98 | width: 0; 99 | border-top: 1.87em solid #ffb64c; 100 | border-left: 1.87em solid transparent; 101 | border-right: 1.87em solid transparent; 102 | position: absolute; 103 | top: 2.7em; 104 | margin: auto; 105 | left: 0; 106 | right: 0; 107 | } 108 | .wing-color2-inner { 109 | position: absolute; 110 | border-top: 1.56em solid #f03800; 111 | border-left: 1.5em solid transparent; 112 | border-right: 1.5em solid transparent; 113 | right: -1.5em; 114 | bottom: 1.2em; 115 | } 116 | .eye-patch { 117 | height: 3.75em; 118 | width: 70%; 119 | background-color: #deecf1; 120 | border-radius: 3.1em 1.25em 1.25em 3.1em; 121 | position: absolute; 122 | right: -1px; 123 | top: 0; 124 | z-index: 2; 125 | } 126 | .eye { 127 | position: absolute; 128 | height: 0.9em; 129 | width: 0.9em; 130 | background-color: #714c2f; 131 | border-radius: 50%; 132 | margin: auto; 133 | left: 0; 134 | right: 0; 135 | bottom: 1.56em; 136 | } 137 | .beak-upper { 138 | position: absolute; 139 | height: 3.75em; 140 | width: 3.75em; 141 | background-color: #ffb64c; 142 | z-index: -1; 143 | right: -3em; 144 | border-radius: 0 3.4em 0.3em 0; 145 | } 146 | .beak-lower { 147 | position: absolute; 148 | background-color: #ff9100; 149 | height: 1.56em; 150 | width: 1.56em; 151 | left: 0.7em; 152 | bottom: -1.56em; 153 | border-radius: 0 0 1.56em 0; 154 | } 155 | .feather { 156 | background-color: #cd0000; 157 | height: 3.1em; 158 | width: 6.25em; 159 | border-radius: 0.6em 0 0 6.25em; 160 | position: absolute; 161 | z-index: -1; 162 | left: -1.87em; 163 | } 164 | .leg { 165 | background-color: #ff9100; 166 | height: 2.1em; 167 | width: 4.37em; 168 | border-radius: 0 4.37em 0.6em 0.6em; 169 | position: absolute; 170 | z-index: -2; 171 | bottom: 0; 172 | left: 1.2em; 173 | } 174 | .branch { 175 | background-color: #ffb64c; 176 | height: 0.5em; 177 | width: 13.12em; 178 | position: absolute; 179 | right: -3.4em; 180 | bottom: -0.5em; 181 | border-radius: 0.5em; 182 | } 183 | @media screen and (max-width: 750px) { 184 | .container { 185 | grid-template-columns: 1fr; 186 | } 187 | .controls { 188 | border: none; 189 | border-top: 2px dashed #000000; 190 | } 191 | .controls button { 192 | font-size: 0.9em; 193 | height: 3em; 194 | } 195 | } -------------------------------------------------------------------------------- /Product Image Zoom/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Product Image Zoom 6 | 7 | 8 | 9 | 10 |
11 | shoe 12 |
13 |
14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Product Image Zoom/script.js: -------------------------------------------------------------------------------- 1 | //Initial References 2 | let imageContainer = document.getElementById("image-container"); 3 | let productImage = document.getElementById("product-image"); 4 | let overlay = document.getElementById("overlay"); 5 | let mouseOverlay = document.getElementById("mouse-overlay"); 6 | 7 | //events object(stores events for touch,mouse) 8 | let events = { 9 | mouse: { 10 | move: "mousemove", 11 | }, 12 | touch: { 13 | move: "touchmove", 14 | }, 15 | }; 16 | 17 | //initially blank 18 | let deviceType = ""; 19 | 20 | //Checks for device type 21 | function isTouchDevice() { 22 | try { 23 | //We try to create touch event (it would fail for desktops and throw error) 24 | deviceType = "touch"; 25 | document.createEvent("TouchEvent"); 26 | return true; 27 | } catch (e) { 28 | deviceType = "mouse"; 29 | return false; 30 | } 31 | } 32 | 33 | //hides overlay 34 | const hideElement = () => { 35 | overlay.style.display = "none"; 36 | mouseOverlay.style.display = "none"; 37 | }; 38 | 39 | //Check device so that deviceType variable is set to touch or mouse 40 | isTouchDevice(); 41 | 42 | /*In addEventListener we use the events object to set the event so deviceType would be set to touch or mouse since we called 'isTouchDevice()' above 43 | E.g: 44 | if deviceType = "mouse" => the statement for event would be events[mouse].move which equals to mousemove. 45 | if deviceType = "touch" => the statement for event would be events[touch].move which equals to touchstart. 46 | */ 47 | 48 | imageContainer.addEventListener(events[deviceType].move, (e) => { 49 | //Try, catch to avoid any errors for touch screens 50 | try { 51 | //pageX and pageY return the position of client's cursor from top left pf screen 52 | var x = !isTouchDevice() ? e.pageX : e.touches[0].pageX; 53 | var y = !isTouchDevice() ? e.pageY : e.touches[0].pageY; 54 | } catch (e) {} 55 | //get image height and width 56 | let imageWidth = imageContainer.offsetWidth; 57 | let imageHeight = imageContainer.offsetHeight; 58 | 59 | //check if mouse goes out of image container 60 | if ( 61 | imageWidth - (x - imageContainer.offsetLeft) < 15 || 62 | x - imageContainer.offsetLeft < 15 || 63 | imageHeight - (y - imageContainer.offsetTop) < 15 || 64 | y - imageContainer.offsetTop < 15 65 | ) { 66 | hideElement(); 67 | } else { 68 | overlay.style.display = "block"; 69 | mouseOverlay.style.display = "inline-block"; 70 | } 71 | 72 | var posX = ((x - imageContainer.offsetLeft) / imageWidth).toFixed(4) * 100; 73 | var posY = ((y - imageContainer.offsetTop) / imageHeight).toFixed(4) * 100; 74 | 75 | //set background position to above obtained values 76 | overlay.style.backgroundPosition = posX + "%" + posY + "%"; 77 | 78 | //move the overlay with cursor 79 | mouseOverlay.style.top = y + "px"; 80 | mouseOverlay.style.left = x + "px"; 81 | }); -------------------------------------------------------------------------------- /Product Image Zoom/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | .image-container { 7 | width: 30%; 8 | margin: 5% 0 0 5%; 9 | } 10 | img { 11 | max-width: 100%; 12 | } 13 | #overlay { 14 | display: none; 15 | background: url("shoe-img.jpg"); 16 | position: absolute; 17 | width: 25%; 18 | height: 35%; 19 | margin-top: -30%; 20 | margin-left: 50%; 21 | border: 2px solid #555; 22 | z-index: 1000; 23 | background-repeat: no-repeat; 24 | } 25 | #mouse-overlay { 26 | cursor: zoom-in; 27 | position: absolute; 28 | width: 2em; 29 | height: 2em; 30 | transform: translate(-50%, -50%); 31 | background-color: rgba(245, 245, 245, 0.6); 32 | border-radius: 50%; 33 | } 34 | @media only screen and (max-width: 768px) { 35 | .image-container { 36 | width: 55%; 37 | } 38 | #overlay { 39 | margin-left: 70%; 40 | width: 25%; 41 | height: 15%; 42 | } 43 | } -------------------------------------------------------------------------------- /Profile Card/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Profile Card 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | Preeti 16 |

Preeti Raj

17 |
Full stack web Developer
18 |
19 |
20 |

1.6K

21 | Followers 22 |
23 |
24 |

200

25 | Following 26 |
27 |
28 |
29 | 30 | 31 |
32 |
33 |
34 | 35 | 36 | 37 | 38 | 39 | 40 |
41 |
42 | 43 | 44 | -------------------------------------------------------------------------------- /Profile Card/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Preetiraj3697/30dayofJavascript/5a5762c45bff34b018598de57290f1a6b88df22c/Profile Card/profile.png -------------------------------------------------------------------------------- /Profile Card/script.js: -------------------------------------------------------------------------------- 1 | const theme = document.querySelector(':root'); 2 | const btns = document.querySelectorAll('.btn'); 3 | btns.forEach(function(btn){ 4 | 5 | btn.addEventListener('click',function(e){ 6 | const color = e.currentTarget.classList; 7 | 8 | if(color.contains("btn1")){ 9 | theme.style.setProperty("--theme-color","#3498db"); 10 | }else if(color.contains("btn2")){ 11 | theme.style.setProperty("--theme-color","#ff1756"); 12 | }else if(color.contains("btn3")){ 13 | theme.style.setProperty("--theme-color","#1cb65d"); 14 | }else if(color.contains("btn4")){ 15 | theme.style.setProperty("--theme-color","#8e44ad"); 16 | }else if(color.contains("btn5")){ 17 | theme.style.setProperty("--theme-color","#f4b932"); 18 | } 19 | 20 | }) 21 | }) -------------------------------------------------------------------------------- /Profile Card/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | *:before, 3 | *:after{ 4 | padding:0; 5 | margin:0; 6 | box-sizing: border-box; 7 | } 8 | :root{ 9 | --theme-color:#ff1756; 10 | } 11 | body{ 12 | background-color: #fafafa; 13 | } 14 | .container{ 15 | position:absolute; 16 | transform: translate(-50%,-50%); 17 | top:50%; 18 | left:50%; 19 | } 20 | .card{ 21 | height:420px; 22 | width:320px; 23 | background: linear-gradient(to bottom, var(--theme-color) 110px , #ffffff 110px); 24 | border-radius: 10px; 25 | box-shadow: 0 5px 15px rgba(50,50,50,0.1); 26 | padding:50px 0; 27 | } 28 | .card *{ 29 | font-family: "Poppins", sans-serif; 30 | text-align: center; 31 | letter-spacing: 0.5px; 32 | font-weight: 600; 33 | } 34 | img{ 35 | display:block; 36 | width:100px; 37 | height:100px; 38 | position:relative; 39 | border-radius:50%; 40 | margin: 0 auto; 41 | box-shadow: 0 0 0 8px #ffffff; 42 | 43 | } 44 | .card h4{ 45 | color: var(--theme-color); 46 | font-size: 16px; 47 | margin:15px 0 5px 0; 48 | } 49 | .card h5{ 50 | color: #454545; 51 | font-size: 14px; 52 | font-weight: 400; 53 | } 54 | .details{ 55 | width:100%; 56 | margin-top:30px; 57 | display:flex; 58 | justify-content: space-around; 59 | } 60 | .details h2{ 61 | font-weight: 400; 62 | } 63 | .details span{ 64 | color:var(--theme-color); 65 | 66 | } 67 | .buttons{ 68 | width:100%; 69 | display:flex; 70 | justify-content: space-around; 71 | margin-top: 30px; 72 | } 73 | .buttons button{ 74 | width:130px; 75 | padding:8px 0; 76 | border-radius: 25px; 77 | border:3px solid var(--theme-color) 78 | } 79 | .buttons button:first-child{ 80 | background-color: var(--theme-color); 81 | } 82 | .buttons button:last-child{ 83 | background-color: transparent; 84 | color:var(--theme-color) 85 | } 86 | .themes{ 87 | background-color: #ffffff; 88 | box-shadow: 0 5px 15px rgba(50,50,50,0.1); 89 | padding:20px; 90 | margin-top:40px; 91 | display:flex; 92 | justify-content: space-around; 93 | } 94 | .themes button{ 95 | height:25px; 96 | width:25px; 97 | border:3px solid #dddddd; 98 | outline:none; 99 | border-radius:50%; 100 | cursor: pointer; 101 | } 102 | .btn1{ 103 | background-color: #3498db; 104 | } 105 | .btn2{ 106 | background-color: #ff1756; 107 | } 108 | .btn3{ 109 | background-color: #1cb65d; 110 | } 111 | .btn4{ 112 | background-color: #8e44ad; 113 | } 114 | .btn5{ 115 | background-color: #f4b932; 116 | } -------------------------------------------------------------------------------- /Quiz App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | MCQ Quiz 6 | 7 | 11 | 12 | 13 | 14 | 15 |
16 | 17 |
18 |
19 |
20 |
21 | 1 of 3 questions 22 |
23 |
24 | img 25 | 10s 26 |
27 |
28 |
29 | 30 |
31 | 32 |
33 |
34 |
Demo Score
35 | 36 |
37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /Quiz App/script.js: -------------------------------------------------------------------------------- 1 | //References 2 | let timeLeft = document.querySelector(".time-left"); 3 | let quizContainer = document.getElementById("container"); 4 | let nextBtn = document.getElementById("next-button"); 5 | let countOfQuestion = document.querySelector(".number-of-question"); 6 | let displayContainer = document.getElementById("display-container"); 7 | let scoreContainer = document.querySelector(".score-container"); 8 | let restart = document.getElementById("restart"); 9 | let userScore = document.getElementById("user-score"); 10 | let startScreen = document.querySelector(".start-screen"); 11 | let startButton = document.getElementById("start-button"); 12 | let questionCount; 13 | let scoreCount = 0; 14 | let count = 11; 15 | let countdown; 16 | 17 | //Questions and Options array 18 | 19 | const quizArray = [ 20 | { 21 | id: "0", 22 | question: "Which is the most widely spoken language in the world?", 23 | options: ["Spanish", "Mandarin", "English", "German"], 24 | correct: "Mandarin", 25 | }, 26 | { 27 | id: "1", 28 | question: "Which is the only continent in the world without a desert?", 29 | options: ["North America", "Asia", "Africa", "Europe"], 30 | correct: "Europe", 31 | }, 32 | { 33 | id: "2", 34 | question: "Who invented Computer?", 35 | options: ["Charles Babbage", "Henry Luce", "Henry Babbage", "Charles Luce"], 36 | correct: "Charles Babbage", 37 | }, 38 | ]; 39 | 40 | //Restart Quiz 41 | restart.addEventListener("click", () => { 42 | initial(); 43 | displayContainer.classList.remove("hide"); 44 | scoreContainer.classList.add("hide"); 45 | }); 46 | 47 | //Next Button 48 | nextBtn.addEventListener( 49 | "click", 50 | (displayNext = () => { 51 | //increment questionCount 52 | questionCount += 1; 53 | //if last question 54 | if (questionCount == quizArray.length) { 55 | //hide question container and display score 56 | displayContainer.classList.add("hide"); 57 | scoreContainer.classList.remove("hide"); 58 | //user score 59 | userScore.innerHTML = 60 | "Your score is " + scoreCount + " out of " + questionCount; 61 | } else { 62 | //display questionCount 63 | countOfQuestion.innerHTML = 64 | questionCount + 1 + " of " + quizArray.length + " Question"; 65 | //display quiz 66 | quizDisplay(questionCount); 67 | count = 11; 68 | clearInterval(countdown); 69 | timerDisplay(); 70 | } 71 | }) 72 | ); 73 | 74 | //Timer 75 | const timerDisplay = () => { 76 | countdown = setInterval(() => { 77 | count--; 78 | timeLeft.innerHTML = `${count}s`; 79 | if (count == 0) { 80 | clearInterval(countdown); 81 | displayNext(); 82 | } 83 | }, 1000); 84 | }; 85 | 86 | //Display quiz 87 | const quizDisplay = (questionCount) => { 88 | let quizCards = document.querySelectorAll(".container-mid"); 89 | //Hide other cards 90 | quizCards.forEach((card) => { 91 | card.classList.add("hide"); 92 | }); 93 | //display current question card 94 | quizCards[questionCount].classList.remove("hide"); 95 | }; 96 | 97 | //Quiz Creation 98 | function quizCreator() { 99 | //randomly sort questions 100 | quizArray.sort(() => Math.random() - 0.5); 101 | //generate quiz 102 | for (let i of quizArray) { 103 | //randomly sort options 104 | i.options.sort(() => Math.random() - 0.5); 105 | //quiz card creation 106 | let div = document.createElement("div"); 107 | div.classList.add("container-mid", "hide"); 108 | //question number 109 | countOfQuestion.innerHTML = 1 + " of " + quizArray.length + " Question"; 110 | //question 111 | let question_DIV = document.createElement("p"); 112 | question_DIV.classList.add("question"); 113 | question_DIV.innerHTML = i.question; 114 | div.appendChild(question_DIV); 115 | //options 116 | div.innerHTML += ` 117 | 118 | 119 | 120 | 121 | `; 122 | quizContainer.appendChild(div); 123 | } 124 | } 125 | 126 | //Checker Function to check if option is correct or not 127 | function checker(userOption) { 128 | let userSolution = userOption.innerText; 129 | let question = 130 | document.getElementsByClassName("container-mid")[questionCount]; 131 | let options = question.querySelectorAll(".option-div"); 132 | 133 | //if user clicked answer == correct option stored in object 134 | if (userSolution === quizArray[questionCount].correct) { 135 | userOption.classList.add("correct"); 136 | scoreCount++; 137 | } else { 138 | userOption.classList.add("incorrect"); 139 | //For marking the correct option 140 | options.forEach((element) => { 141 | if (element.innerText == quizArray[questionCount].correct) { 142 | element.classList.add("correct"); 143 | } 144 | }); 145 | } 146 | 147 | //clear interval(stop timer) 148 | clearInterval(countdown); 149 | //disable all options 150 | options.forEach((element) => { 151 | element.disabled = true; 152 | }); 153 | } 154 | 155 | //initial setup 156 | function initial() { 157 | quizContainer.innerHTML = ""; 158 | questionCount = 0; 159 | scoreCount = 0; 160 | count = 11; 161 | clearInterval(countdown); 162 | timerDisplay(); 163 | quizCreator(); 164 | quizDisplay(questionCount); 165 | } 166 | 167 | //when user click on start button 168 | startButton.addEventListener("click", () => { 169 | startScreen.classList.add("hide"); 170 | displayContainer.classList.remove("hide"); 171 | initial(); 172 | }); 173 | 174 | //hide quiz and display start screen 175 | window.onload = () => { 176 | startScreen.classList.remove("hide"); 177 | displayContainer.classList.add("hide"); 178 | }; -------------------------------------------------------------------------------- /Quiz App/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | font-family: "Poppins", sans-serif; 6 | } 7 | body { 8 | background-color: #0a69ed; 9 | } 10 | .start-screen, 11 | .score-container { 12 | position: absolute; 13 | top: 0; 14 | width: 100%; 15 | height: 100%; 16 | display: flex; 17 | flex-direction: column; 18 | align-items: center; 19 | justify-content: center; 20 | } 21 | button { 22 | border: none; 23 | outline: none; 24 | cursor: pointer; 25 | } 26 | #start-button, 27 | #restart { 28 | font-size: 1.3em; 29 | padding: 0.5em 1.8em; 30 | border-radius: 0.2em; 31 | } 32 | #restart { 33 | margin-top: 0.9em; 34 | } 35 | #display-container { 36 | background-color: #ffffff; 37 | padding: 3.1em 1.8em; 38 | width: 80%; 39 | max-width: 37.5em; 40 | margin: 0 auto; 41 | position: absolute; 42 | transform: translate(-50%, -50%); 43 | top: 50%; 44 | left: 50%; 45 | border-radius: 0.6em; 46 | } 47 | .header { 48 | margin-bottom: 1.8em; 49 | display: flex; 50 | justify-content: space-between; 51 | align-items: center; 52 | padding-bottom: 0.6em; 53 | border-bottom: 0.1em solid #c0bfd2; 54 | } 55 | .timer-div { 56 | background-color: #e1f5fe; 57 | width: 7.5em; 58 | border-radius: 1.8em; 59 | display: flex; 60 | align-items: center; 61 | justify-content: space-between; 62 | padding: 0.7em 1.8em; 63 | } 64 | .question { 65 | margin-bottom: 1.25em; 66 | font-weight: 600; 67 | } 68 | .option-div { 69 | font-size: 0.9em; 70 | width: 100%; 71 | padding: 1em; 72 | margin: 0.3em 0; 73 | text-align: left; 74 | outline: none; 75 | background: transparent; 76 | border: 1px solid #c0bfd2; 77 | border-radius: 0.3em; 78 | } 79 | .option-div:disabled { 80 | color: #000000; 81 | cursor: not-allowed; 82 | } 83 | #next-button { 84 | font-size: 1em; 85 | margin-top: 1.5em; 86 | background-color: #0a69ed; 87 | color: #ffffff; 88 | padding: 0.7em 1.8em; 89 | border-radius: 0.3em; 90 | float: right; 91 | } 92 | .hide { 93 | display: none; 94 | } 95 | .incorrect { 96 | background-color: #ffdde0; 97 | color: #d32f2f; 98 | border-color: #d32f2f; 99 | } 100 | .correct { 101 | background-color: #e7f6d5; 102 | color: #689f38; 103 | border-color: #689f38; 104 | } 105 | #user-score { 106 | font-size: 1.5em; 107 | color: #ffffff; 108 | } 109 | #img{ 110 | border-radius: 50%; 111 | width:30px; 112 | } -------------------------------------------------------------------------------- /Ramdom User cards/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | font-family: "Poppins", sans-serif; 6 | } 7 | :root { 8 | --theme-color: #5074f3; 9 | } 10 | body { 11 | background-color: var(--theme-color); 12 | } 13 | #h1{ 14 | text-align: center; 15 | margin:20px; 16 | z-index:9; 17 | } 18 | .container { 19 | width: 90%; 20 | max-width: 25em; 21 | position: absolute; 22 | transform: translate(-50%, -50%); 23 | top: 60%; 24 | left: 50%; 25 | } 26 | .card { 27 | width: 100%; 28 | padding: 4em 0; 29 | background-color: #ffffff; 30 | text-align: center; 31 | border-radius: 0.5em; 32 | } 33 | .card .img-container { 34 | height: 11.25em; 35 | width: 11.25em; 36 | display: block; 37 | margin: -8.75em auto 0 auto; 38 | background-color: #ffffff; 39 | box-shadow: 0 0 0 0.3em #ffffff, 0 0 0 0.9em var(--theme-color); 40 | border-radius: 50%; 41 | } 42 | .img-container img { 43 | width: 100%; 44 | border-radius: 50%; 45 | } 46 | .container button { 47 | display: block; 48 | font-size: 1.2em; 49 | width: 90%; 50 | margin: 2em auto 0 auto; 51 | padding: 1.1em 0; 52 | border-radius: 0.3em; 53 | border: none; 54 | outline: mome; 55 | font-weight: 600; 56 | color: #000341; 57 | cursor: pointer; 58 | } 59 | .card h2 { 60 | margin-top: 1.8em; 61 | font-weight: 600; 62 | color: #000341; 63 | } 64 | .card h3, 65 | .card h4 { 66 | font-size: 1em; 67 | letter-spacing: 0.02em; 68 | margin-top: 0.5em; 69 | font-weight: 300; 70 | color: #90919e; 71 | } 72 | .card i { 73 | color: var(--theme-color); 74 | margin-right: 0.3em; 75 | } 76 | .card h4 { 77 | margin-top: 0.4em; 78 | } -------------------------------------------------------------------------------- /Ramdom User cards/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Random User Card 6 | 7 | 11 | 12 | 16 | 17 | 18 | 19 | 20 | 21 |
22 |
23 |
24 |
25 |
26 | 27 |

Build by 💞 PREETI RAJ

28 |
29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /Ramdom User cards/index.js: -------------------------------------------------------------------------------- 1 | let details = document.querySelector(".details"); 2 | let imgContainer = document.querySelector(".img-container"); 3 | let getUserBtn = document.getElementById("get-user-btn"); 4 | let url = "https://random-data-api.com/api/v2/users?response_type=json"; 5 | 6 | let getUser = () => { 7 | fetch(url) 8 | .then((resp) => resp.json()) 9 | .then((data) => { 10 | imgContainer.innerHTML = ``; 11 | details.innerHTML = ` 12 |

${data.first_name} ${data.last_name}

13 |

${data.employment.title}

14 |

${data.address.city}

`; 15 | 16 | let randomColor = 17 | "#" + ((Math.random() * 0xffffff) << 0).toString(16).padStart(6, "0"); 18 | document.documentElement.style.setProperty("--theme-color", randomColor); 19 | }); 20 | }; 21 | window.addEventListener("load", getUser); 22 | getUserBtn.addEventListener("click", getUser); -------------------------------------------------------------------------------- /Random Mems App/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | font-family: "Poppins", sans-serif; 6 | } 7 | body { 8 | background-color: #7f5eff; 9 | background-size: 3.12em; 10 | } 11 | #h1{ 12 | text-align: center; 13 | margin:20px; 14 | z-index:9; 15 | } 16 | .container { 17 | width: 80%; 18 | max-width: 37.5em; 19 | padding: 3em 1.5em; 20 | background-color: #ffffff; 21 | text-align: center; 22 | justify-content: center; 23 | align-items: center; 24 | border-radius: 0.6em; 25 | box-shadow: 0 1.4em 3em rgba(20, 16, 39, 0.3); 26 | margin-bottom:50px; 27 | margin-left: 350px; 28 | } 29 | .container img { 30 | display: block; 31 | height: 25em; 32 | max-width: 80%; 33 | margin: 0 auto 1em auto; 34 | } 35 | .container h3 { 36 | display: block; 37 | font-size: 1em; 38 | margin: 0.5em auto 2em auto; 39 | width: 70%; 40 | font-weight: 400; 41 | text-align: center; 42 | text-transform: capitalize; 43 | color: #737081; 44 | letter-spacing: 0.03em; 45 | } 46 | .container button { 47 | display: block; 48 | margin: 0 auto; 49 | font-size: 1.2em; 50 | padding: 0.8em 2em; 51 | border-radius: 2em; 52 | background-color: #7f5eff; 53 | border: none; 54 | outline: none; 55 | color: #ffffff; 56 | cursor: pointer; 57 | } 58 | @media screen and (max-width: 600px) { 59 | .container { 60 | font-size: 14px; 61 | } 62 | } -------------------------------------------------------------------------------- /Random Mems App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Memes Generator 6 | 7 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | meme 18 |

hahaha!

19 | 20 |

Build by 💞 PREETI RAJ

21 |
22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /Random Mems App/index.js: -------------------------------------------------------------------------------- 1 | let meme = document.getElementById("meme"); 2 | let title = document.getElementById("title"); 3 | let getMemeBtn = document.getElementById("get-meme-btn"); 4 | //API URL 5 | let url = " https://meme-api.herokuapp.com/gimme/"; 6 | //Array of subreddits of your choice 7 | let subreddits = ["catmemes", "wholesomemes", "dogmemes", "me_irl"]; 8 | 9 | //Function To Get Random Meme 10 | let getMeme = () => { 11 | //Choose a random subreddit from the subreddits array 12 | let randomSubreddit = 13 | subreddits[Math.floor(Math.random() * subreddits.length)]; 14 | //Fetch data from the api 15 | fetch(url + randomSubreddit) 16 | .then((res) => res.json()) 17 | .then((data) => { 18 | let memeImg = new Image(); 19 | //Display meme image and title only after the image loads 20 | memeImg.onload = () => { 21 | meme.src = data.url; 22 | title.innerHTML = data.title; 23 | }; 24 | memeImg.src = data.url; 25 | }); 26 | }; 27 | 28 | //Call the getMeme() on button click and on window load 29 | getMemeBtn.addEventListener("click", getMeme); 30 | window.addEventListener("load", getMeme); -------------------------------------------------------------------------------- /Random quote genertor/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Random Quote Generator 6 | 7 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |

18 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptas, 19 | magni. 20 |

21 |

Lorem, ipsum.

22 | 23 |
24 |
25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /Random quote genertor/script.js: -------------------------------------------------------------------------------- 1 | let quote = document.getElementById("quote"); 2 | let author = document.getElementById("author"); 3 | let btn = document.getElementById("btn"); 4 | 5 | const url = "https://api.quotable.io/random"; 6 | 7 | let getQuote = () => { 8 | fetch(url) 9 | .then((data) => data.json()) 10 | .then((item) => { 11 | quote.innerText = item.content; 12 | author.innerText = item.author; 13 | }); 14 | }; 15 | 16 | window.addEventListener("load", getQuote); 17 | btn.addEventListener("click", getQuote); -------------------------------------------------------------------------------- /Random quote genertor/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | font-family: "Poppins", sans-serif; 6 | } 7 | body { 8 | background-color: #f43543; 9 | } 10 | .wrapper { 11 | width: 400px; 12 | position: absolute; 13 | transform: translate(-50%, -50%); 14 | top: 50%; 15 | left: 50%; 16 | } 17 | .container { 18 | width: 100%; 19 | background-color: #f43543; 20 | padding: 50px 40px; 21 | box-shadow: 0 20px 65px rgba(87, 11, 16, 0.5); 22 | position: relative; 23 | border-radius: 8px; 24 | text-align: center; 25 | } 26 | .container:after { 27 | content: ""; 28 | position: absolute; 29 | width: 80%; 30 | height: 120%; 31 | background-color: #ffffff; 32 | z-index: -1; 33 | top: -10%; 34 | left: 10%; 35 | } 36 | .container p { 37 | color: #fdd8d8; 38 | line-height: 2; 39 | font-size: 18px; 40 | } 41 | .container h3 { 42 | color: #ffffff; 43 | margin: 20px 0 60px 0; 44 | font-weight: 600; 45 | text-transform: capitalize; 46 | } 47 | .container button { 48 | background-color: #ffffff; 49 | border: none; 50 | padding: 15px 45px; 51 | border-radius: 5px; 52 | font-size: 18px; 53 | font-weight: 600; 54 | color: #f43543; 55 | cursor: pointer; 56 | } -------------------------------------------------------------------------------- /Recipe App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Recipe App 8 | 9 | 10 | 11 | 12 |
13 |
14 | 15 | 16 |
17 |
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /Recipe App/index.js: -------------------------------------------------------------------------------- 1 | let result =document.getElementById('result'); 2 | let searchBtn =document.getElementById("search-btn"); 3 | 4 | let url = "https:www.themealdb.com/api/json/v1/1/search.php?s=" 5 | 6 | 7 | searchBtn.addEventListener("click",()=>{ 8 | let userInp = document.getElementById('user-inp').value; 9 | if(userInp.length == 0){ 10 | result.innerHTML=`

Input Field Cannot Be Empty

`; 11 | } 12 | else{ 13 | fetch(`https://www.themealdb.com/api/json/v1/1/search.php?s=${userInp}`) 14 | .then((response)=> response.json()) 15 | .then((data)=>{ 16 | console.log(data); 17 | let myMeal = data.meals[0]; 18 | console.log(myMeal.strMealThumb); 19 | console.log(myMeal.strMeal); 20 | console.log(myMeal.strArea); 21 | console.log(myMeal.strInstructions); 22 | let count=1; 23 | let ingredients=[]; 24 | for(let i in myMeal){ 25 | let ingredient = ""; 26 | let measure =""; 27 | if(i.startsWith("strIngredient")&& myMeal[i]){ 28 | ingredient=myMeal[i]; 29 | measure = myMeal[`strMeasure`+count]; 30 | count+=1; 31 | ingredients.push(`${measure} ${ingredient}`); 32 | } 33 | } 34 | console.log(ingredients); 35 | result.innerHTML=` 36 |
37 |

${myMeal.strMeal}

38 |

${myMeal.strArea}

39 |
40 |
41 |
42 | 43 | 
${myMeal.strInstructions}
44 |
45 | `; 46 | let ingredientcon = document.getElementById("ingredient-con"); 47 | let parent = document.createElement("ul"); 48 | let recipe =document.getElementById("recipe"); 49 | let hideRecipe =document.getElementById("hide-recipe"); 50 | let showRecipe = document.getElementById("show-recipe"); 51 | 52 | ingredients.forEach((i)=>{ 53 | let child = document.createElement("li"); 54 | child.innerText=i; 55 | parent.appendChild(child); 56 | ingredientcon.appendChild(parent) 57 | }); 58 | hideRecipe.addEventListener('click',()=>{ 59 | recipe.style.display="none"; 60 | }); 61 | showRecipe.addEventListener("click",()=>{ 62 | recipe.style.display ="block"; 63 | }); 64 | }).catch(()=>{ 65 | result.innerHTML=`

Invalid Input

`; 66 | }) 67 | } 68 | }) 69 | -------------------------------------------------------------------------------- /Recipe App/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | padding:0; 3 | margin:0; 4 | box-sizing: border-box; 5 | font-family: "Poppins",sans-serif; 6 | } 7 | body{ 8 | background-color: #f4c531; 9 | } 10 | .container{ 11 | background-color:#ffffff; 12 | font-size:16px; 13 | padding:3em 2.8em; 14 | width:90vw; 15 | max-width:32em; 16 | position:absolute; 17 | transform: translate(-50%); 18 | left:50%; 19 | top:1em; 20 | border-radius:0.6em; 21 | box-shadow:0 1.2em 2.5em rgba(42,32,0,0.2); 22 | } 23 | .search-container{ 24 | width:100%; 25 | display:grid; 26 | grid-template-columns: 9fr 3fr; 27 | gap:1.2em; 28 | } 29 | .search-container input{ 30 | font-size:1em; 31 | padding:0.6em; 32 | border:none; 33 | outline:none; 34 | border-bottom:2px solid #202030; 35 | } 36 | 37 | .search-container button{ 38 | font-size:1em; 39 | background-color: #f4c531; 40 | border:none; 41 | font-weight: 600; 42 | border-radius: 0.3em; 43 | } 44 | img{ 45 | display:block; 46 | width:50%; 47 | margin:1.8em auto 0 auto; 48 | 49 | } 50 | .details{ 51 | background-color: #f4c531; 52 | position: relative; 53 | margin:-4.3em 0 0 0 ; 54 | text-align: center; 55 | padding:0.6em 0; 56 | } 57 | .details h2{ 58 | font-size: 1.2em; 59 | font-weight:600; 60 | } 61 | .details h4{ 62 | font-size: 1em; 63 | font-weight:400; 64 | } 65 | #show-recipe{ 66 | font-size: 1em; 67 | position: relative; 68 | left:75%; 69 | padding: 0.9em 0.6em; 70 | background-color: #f4c531; 71 | border:none; 72 | top:1.5em; 73 | border-radius: 0.3em; 74 | font-weight: 600; 75 | } 76 | #recipe{ 77 | position:absolute; 78 | background-color: #ffffff; 79 | min-height: 100%; 80 | width:100%; 81 | top:0; 82 | left:0; 83 | z-index:2; 84 | border-radius: 0.6em; 85 | display:none; 86 | } 87 | #recipe pre{ 88 | white-space:pre-wrap; 89 | word-wrap: break-word; 90 | padding:2.5em 1.2em 1.2em 1.2em; 91 | } 92 | #hide-recipe{ 93 | font-size:1em; 94 | position:relative; 95 | width:1.8em; 96 | height:1.8em; 97 | background-color: #f4c531; 98 | border:none; 99 | top:1.2em; 100 | left:90%; 101 | border-radius: 0.3em; 102 | } 103 | ul{ 104 | font-size:1em; 105 | position: relative; 106 | display:grid; 107 | grid-template-columns: auto auto; 108 | gap:0.8em 1.1em; 109 | padding:1.2em 0 0 1.2em; 110 | } 111 | h3{ 112 | text-align: center; 113 | margin-top: 1.8em; 114 | color:#202030; 115 | } 116 | @media screen and (max-width:500px){ 117 | .container{ 118 | font-size:14px; 119 | } 120 | } -------------------------------------------------------------------------------- /Scratch Card/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Scratch Card 6 | 7 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |

You Won

18 |

$10

19 |
20 | 21 |
22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /Scratch Card/script.js: -------------------------------------------------------------------------------- 1 | let canvas = document.getElementById("scratch"); 2 | let context = canvas.getContext("2d"); 3 | 4 | const init = () => { 5 | let gradientColor = context.createLinearGradient(0, 0, 135, 135); 6 | gradientColor.addColorStop(0, "#c3a3f1"); 7 | gradientColor.addColorStop(1, "#6414e9"); 8 | context.fillStyle = gradientColor; 9 | context.fillRect(0, 0, 200, 200); 10 | }; 11 | 12 | //initially mouse X and mouse Y positions are 0 13 | let mouseX = 0; 14 | let mouseY = 0; 15 | let isDragged = false; 16 | 17 | //Events for touch and mouse 18 | let events = { 19 | mouse: { 20 | down: "mousedown", 21 | move: "mousemove", 22 | up: "mouseup", 23 | }, 24 | touch: { 25 | down: "touchstart", 26 | move: "touchmove", 27 | up: "touchend", 28 | }, 29 | }; 30 | 31 | let deviceType = ""; 32 | 33 | //Detech touch device 34 | const isTouchDevice = () => { 35 | try { 36 | //We try to create TouchEvent. It would fail for desktops and throw error. 37 | document.createEvent("TouchEvent"); 38 | deviceType = "touch"; 39 | return true; 40 | } catch (e) { 41 | deviceType = "mouse"; 42 | return false; 43 | } 44 | }; 45 | 46 | //Get left and top of canvas 47 | let rectLeft = canvas.getBoundingClientRect().left; 48 | let rectTop = canvas.getBoundingClientRect().top; 49 | 50 | //Exact x and y position of mouse/touch 51 | const getXY = (e) => { 52 | mouseX = (!isTouchDevice() ? e.pageX : e.touches[0].pageX) - rectLeft; 53 | mouseY = (!isTouchDevice() ? e.pageY : e.touches[0].pageY) - rectTop; 54 | }; 55 | 56 | isTouchDevice(); 57 | //Start Scratch 58 | canvas.addEventListener(events[deviceType].down, (event) => { 59 | isDragged = true; 60 | //Get x and y position 61 | getXY(event); 62 | scratch(mouseX, mouseY); 63 | }); 64 | 65 | //mousemove/touchmove 66 | canvas.addEventListener(events[deviceType].move, (event) => { 67 | if (!isTouchDevice()) { 68 | event.preventDefault(); 69 | } 70 | if (isDragged) { 71 | getXY(event); 72 | scratch(mouseX, mouseY); 73 | } 74 | }); 75 | 76 | //stop drawing 77 | canvas.addEventListener(events[deviceType].up, () => { 78 | isDragged = false; 79 | }); 80 | 81 | //If mouse leaves the square 82 | canvas.addEventListener("mouseleave", () => { 83 | isDragged = false; 84 | }); 85 | 86 | const scratch = (x, y) => { 87 | //destination-out draws new shapes behind the existing canvas content 88 | context.globalCompositeOperation = "destination-out"; 89 | context.beginPath(); 90 | //arc makes circle - x,y,radius,start angle,end angle 91 | context.arc(x, y, 12, 0, 2 * Math.PI); 92 | context.fill(); 93 | }; 94 | 95 | window.onload = init(); -------------------------------------------------------------------------------- /Scratch Card/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | body { 7 | height: 100vh; 8 | background: linear-gradient(135deg, #c3a3f1, #6414e9); 9 | } 10 | .container { 11 | width: 31em; 12 | height: 31em; 13 | background-color: #f5f5f5; 14 | position: absolute; 15 | transform: translate(-50%, -50%); 16 | top: 50%; 17 | left: 50%; 18 | border-radius: 0.6em; 19 | } 20 | .base, 21 | #scratch { 22 | height: 200px; 23 | width: 200px; 24 | position: absolute; 25 | transform: translate(-50%, -50%); 26 | top: 50%; 27 | left: 50%; 28 | text-align: center; 29 | cursor: grabbing; 30 | border-radius: 0.3em; 31 | } 32 | .base { 33 | background-color: #ffffff; 34 | font-family: "Poppins", sans-serif; 35 | display: flex; 36 | flex-direction: column; 37 | align-items: center; 38 | justify-content: center; 39 | box-shadow: 0 1.2em 2.5em rgba(16, 2, 96, 0.15); 40 | } 41 | .base h3 { 42 | font-weight: 600; 43 | font-size: 1.5em; 44 | color: #17013b; 45 | } 46 | .base h4 { 47 | font-weight: 400; 48 | color: #746e7e; 49 | } 50 | #scratch { 51 | -webkit-tap-highlight-color: transparent; 52 | -webkit-touch-callout: none; 53 | -webkit-user-select: none; 54 | user-select: none; 55 | } -------------------------------------------------------------------------------- /Simple Interest App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Simple Interest Calculator 6 | 7 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |
18 | 19 | 20 |
21 |
22 | 23 | 24 |
25 |
26 | 27 |
28 | 29 | 33 |
34 | 35 |
36 |
37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /Simple Interest App/script.js: -------------------------------------------------------------------------------- 1 | let calculateBtn = document.getElementById("calculate-btn"); 2 | let result = document.getElementById("result"); 3 | let calculate = () => { 4 | let p = Number(document.getElementById("principal").value); 5 | let r = Number(document.getElementById("rate").value); 6 | let t = Number(document.getElementById("time").value); 7 | let duration = document.getElementById("duration").value; 8 | let simpleInterest = 9 | duration == "year" ? (p * r * t) / 100 : (p * r * t) / 1200; 10 | let amount = p + simpleInterest; 11 | 12 | result.innerHTML = `
Principal Amount: ${p.toFixed(2)}
13 |
Total Interest: ${simpleInterest.toFixed(2)}
14 |
Total Amount: ${amount.toFixed(2)}
`; 15 | }; 16 | calculateBtn.addEventListener("click", calculate); 17 | window.addEventListener("load", calculate); -------------------------------------------------------------------------------- /Simple Interest App/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | font-family: "Poppins", sans-serif; 6 | } 7 | body { 8 | height: 100vh; 9 | background: linear-gradient(#01e26e, #72ffb4); 10 | } 11 | .container { 12 | background-color: #ffffff; 13 | position: absolute; 14 | transform: translate(-50%, -50%); 15 | top: 50%; 16 | left: 50%; 17 | width: 80vw; 18 | max-width: 600px; 19 | min-width: 350px; 20 | padding: 60px 30px; 21 | border-radius: 10px; 22 | box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); 23 | } 24 | label { 25 | display: block; 26 | font-size: 22px; 27 | margin-bottom: 10px; 28 | font-weight: 500; 29 | } 30 | input { 31 | margin-bottom: 20px; 32 | border: none; 33 | font-size: 20px; 34 | border-bottom: 2px solid #585858; 35 | color: #585858; 36 | padding: 2px 15px; 37 | } 38 | input:focus { 39 | outline: none; 40 | border-bottom: 2.4px solid #01e26e; 41 | } 42 | .input-wrapper { 43 | display: flex; 44 | justify-content: space-between; 45 | gap: 20px; 46 | } 47 | .input-wrapper input { 48 | width: 100%; 49 | } 50 | .time-wrapper input { 51 | width: 60%; 52 | } 53 | select { 54 | width: 35%; 55 | border: 1px solid #585858; 56 | font-size: 20px; 57 | margin-left: 3%; 58 | padding: 8px 0; 59 | border-radius: 5px; 60 | } 61 | button { 62 | display: block; 63 | background-color: #01e26e; 64 | border: none; 65 | color: #ffffff; 66 | margin: 20px auto 0 auto; 67 | padding: 15px 40px; 68 | font-size: 20px; 69 | border-radius: 5px; 70 | } 71 | #result { 72 | background-color: #c6ffe2; 73 | margin-top: 30px; 74 | color: #585858; 75 | text-align: center; 76 | font-size: 18px; 77 | padding: 20px; 78 | border-radius: 5px; 79 | } 80 | #result div { 81 | margin-bottom: 10px; 82 | } 83 | #result span { 84 | color: #000000; 85 | font-weight: 500; 86 | } -------------------------------------------------------------------------------- /Tic tac toe game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tic Tac Toe 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 |
25 | 26 |
27 |

Sample Message

28 | 29 |
30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /Tic tac toe game/script.js: -------------------------------------------------------------------------------- 1 | let btnRef = document.querySelectorAll(".button-option"); 2 | let popupRef = document.querySelector(".popup"); 3 | let newgameBtn = document.getElementById("new-game"); 4 | let restartBtn = document.getElementById("restart"); 5 | let msgRef = document.getElementById("message"); 6 | //Winning Pattern Array 7 | let winningPattern = [ 8 | [0, 1, 2], 9 | [0, 3, 6], 10 | [2, 5, 8], 11 | [6, 7, 8], 12 | [3, 4, 5], 13 | [1, 4, 7], 14 | [0, 4, 8], 15 | [2, 4, 6], 16 | ]; 17 | //Player 'X' plays first 18 | let xTurn = true; 19 | let count = 0; 20 | 21 | //Disable All Buttons 22 | const disableButtons = () => { 23 | btnRef.forEach((element) => (element.disabled = true)); 24 | //enable popup 25 | popupRef.classList.remove("hide"); 26 | }; 27 | 28 | //Enable all buttons (For New Game and Restart) 29 | const enableButtons = () => { 30 | btnRef.forEach((element) => { 31 | element.innerText = ""; 32 | element.disabled = false; 33 | }); 34 | //disable popup 35 | popupRef.classList.add("hide"); 36 | }; 37 | 38 | //This function is executed when a player wins 39 | const winFunction = (letter) => { 40 | disableButtons(); 41 | if (letter == "X") { 42 | msgRef.innerHTML = "🎉
'X' Wins"; 43 | } else { 44 | msgRef.innerHTML = "🎉
'O' Wins"; 45 | } 46 | }; 47 | 48 | //Function for draw 49 | const drawFunction = () => { 50 | disableButtons(); 51 | msgRef.innerHTML = "😎
It's a Draw"; 52 | }; 53 | 54 | //New Game 55 | newgameBtn.addEventListener("click", () => { 56 | count = 0; 57 | enableButtons(); 58 | }); 59 | restartBtn.addEventListener("click", () => { 60 | count = 0; 61 | enableButtons(); 62 | }); 63 | 64 | //Win Logic 65 | const winChecker = () => { 66 | //Loop through all win patterns 67 | for (let i of winningPattern) { 68 | let [element1, element2, element3] = [ 69 | btnRef[i[0]].innerText, 70 | btnRef[i[1]].innerText, 71 | btnRef[i[2]].innerText, 72 | ]; 73 | //Check if elements are filled 74 | //If 3 empty elements are same and would give win as would 75 | if (element1 != "" && (element2 != "") & (element3 != "")) { 76 | if (element1 == element2 && element2 == element3) { 77 | //If all 3 buttons have same values then pass the value to winFunction 78 | winFunction(element1); 79 | } 80 | } 81 | } 82 | }; 83 | 84 | //Display X/O on click 85 | btnRef.forEach((element) => { 86 | element.addEventListener("click", () => { 87 | if (xTurn) { 88 | xTurn = false; 89 | //Display X 90 | element.innerText = "X"; 91 | element.disabled = true; 92 | } else { 93 | xTurn = true; 94 | //Display Y 95 | element.innerText = "O"; 96 | element.disabled = true; 97 | } 98 | //Increment count on each click 99 | count += 1; 100 | if (count == 9) { 101 | drawFunction(); 102 | } 103 | //Check for win on every click 104 | winChecker(); 105 | }); 106 | }); 107 | //Enable Buttons and disable popup on page load 108 | window.onload = enableButtons; -------------------------------------------------------------------------------- /Tic tac toe game/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | font-family: "Raleway", sans-serif; 6 | } 7 | body { 8 | height: 100vh; 9 | background: linear-gradient(135deg, #8052ec, #d161ff); 10 | } 11 | html { 12 | font-size: 16px; 13 | } 14 | .wrapper { 15 | position: absolute; 16 | transform: translate(-50%, -50%); 17 | top: 50%; 18 | left: 50%; 19 | } 20 | .container { 21 | width: 70vmin; 22 | height: 70vmin; 23 | display: flex; 24 | flex-wrap: wrap; 25 | gap: 2vmin; 26 | } 27 | .button-option { 28 | background: #ffffff; 29 | height: 22vmin; 30 | width: 22vmin; 31 | border: none; 32 | border-radius: 8px; 33 | font-size: 12vmin; 34 | color: #d161ff; 35 | box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); 36 | } 37 | #restart { 38 | font-size: 1.3em; 39 | padding: 1em; 40 | border-radius: 8px; 41 | background-color: #0a0027; 42 | color: #ffffff; 43 | border: none; 44 | position: relative; 45 | margin: 1.5em auto 0 auto; 46 | display: block; 47 | } 48 | .popup { 49 | background: linear-gradient(135deg, #8052ec, #d161ff); 50 | height: 100%; 51 | width: 100%; 52 | position: absolute; 53 | display: flex; 54 | z-index: 2; 55 | align-items: center; 56 | justify-content: center; 57 | flex-direction: column; 58 | gap: 1em; 59 | font-size: 12vmin; 60 | } 61 | #new-game { 62 | font-size: 0.6em; 63 | padding: 0.5em 1em; 64 | background-color: #0a0027; 65 | color: #ffffff; 66 | border-radius: 0.2em; 67 | border: none; 68 | } 69 | #message { 70 | color: #ffffff; 71 | text-align: center; 72 | font-size: 1em; 73 | } 74 | .popup.hide { 75 | display: none; 76 | } -------------------------------------------------------------------------------- /Todo List/index.css: -------------------------------------------------------------------------------- 1 | *, 2 | *:before, 3 | *:after{ 4 | padding: 0; 5 | margin: 0; 6 | box-sizing: border-box; 7 | } 8 | body{ 9 | height: 100vh; 10 | background: linear-gradient( 11 | 135deg, 12 | #8052ec, 13 | #d161ff 14 | ); 15 | } 16 | .container{ 17 | width: 40%; 18 | min-width: 450px; 19 | position: absolute; 20 | margin: auto; 21 | left: 0; 22 | right: 0; 23 | top: 30px; 24 | padding: 30px 40px; 25 | } 26 | #newtask{ 27 | position: relative; 28 | background-color: #ffffff; 29 | padding: 30px 20px; 30 | border-radius: 5px; 31 | box-shadow: 0 15px 30px rgba(0,0,0,0.3); 32 | } 33 | #newtask input{ 34 | width: 70%; 35 | width: 70%; 36 | height: 45px; 37 | font-family: 'Poppins',sans-serif; 38 | font-size: 15px; 39 | border: 2px solid #d1d3d4; 40 | padding: 12px; 41 | color: #111111; 42 | font-weight: 500; 43 | position: relative; 44 | border-radius: 5px; 45 | } 46 | #newtask input:focus{ 47 | outline: none; 48 | border-color: #8052ec; 49 | } 50 | 51 | #newtask button{ 52 | position: relative; 53 | float: right; 54 | width: 20%; 55 | height: 45px; 56 | border-radius: 5px; 57 | font-family: 'Poppins',sans-serif; 58 | font-weight: 500; 59 | font-size: 16px; 60 | background-color: #8052ec; 61 | border: none; 62 | color: #ffffff; 63 | cursor: pointer; 64 | outline: none; 65 | } 66 | #tasks{ 67 | background-color: #ffffff; 68 | padding: 30px 20px; 69 | margin-top: 60px; 70 | border-radius: 10px; 71 | box-shadow: 0 15px 30px rgba(0,0,0,0.3); 72 | width: 100%; 73 | position: relative; 74 | } 75 | .task{ 76 | background-color: #ffffff; 77 | height: 50px; 78 | padding: 5px 10px; 79 | margin-top: 10px; 80 | display: flex; 81 | align-items: center; 82 | justify-content: space-between; 83 | border-bottom: 2px solid #d1d3d4; 84 | cursor: pointer; 85 | } 86 | #h1{ 87 | text-align: center; 88 | margin:20px; 89 | z-index:9; 90 | } 91 | .task span{ 92 | font-family: 'Poppins',sans-serif; 93 | font-size: 15px; 94 | font-weight: 400; 95 | } 96 | .task button{ 97 | background-color: #8052ec; 98 | color: #ffffff; 99 | height: 100%; 100 | width: 40px; 101 | border-radius: 5px; 102 | border: none; 103 | cursor: pointer; 104 | outline: none; 105 | } 106 | .completed{ 107 | text-decoration: line-through; 108 | } -------------------------------------------------------------------------------- /Todo List/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Simple To Do List 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

Build by 💞 PREETI RAJ

14 |
15 |
16 | 17 | 18 |
19 |
20 |
21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /Todo List/index.js: -------------------------------------------------------------------------------- 1 | document.querySelector('#push').onclick = function(){ 2 | if(document.querySelector('#newtask input').value.length == 0){ 3 | alert("Please Enter a Task") 4 | } 5 | else{ 6 | document.querySelector('#tasks').innerHTML += ` 7 |
8 | 9 | ${document.querySelector('#newtask input').value} 10 | 11 | 14 |
15 | `; 16 | 17 | var current_tasks = document.querySelectorAll(".delete"); 18 | for(var i=0; i 2 | 3 | 4 | 5 | Typing Test 6 | 7 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |

Time: 0s

18 |

Mistakes: 0

19 |
20 |
25 | 30 | 31 | 32 |
33 |

Result

34 |
35 |

Accuracy:

36 |

Speed:

37 |
38 |
39 |
40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /Typing speed Test/script.js: -------------------------------------------------------------------------------- 1 | //Random Quotes Api URL 2 | const quoteApiUrl = "https://api.quotable.io/random?minLength=80&maxLength=100"; 3 | const quoteSection = document.getElementById("quote"); 4 | const userInput = document.getElementById("quote-input"); 5 | let quote = ""; 6 | let time = 60; 7 | let timer = ""; 8 | let mistakes = 0; 9 | 10 | //Display random quotes 11 | const renderNewQuote = async () => { 12 | //Fetch contents from url 13 | const response = await fetch(quoteApiUrl); 14 | 15 | //Store response 16 | let data = await response.json(); 17 | 18 | //Access quote 19 | quote = data.content; 20 | 21 | //Array of characters in the quote 22 | let arr = quote.split("").map((value) => { 23 | //wrap the characters in a span tag 24 | return "" + value + ""; 25 | }); 26 | //join array for displaying 27 | quoteSection.innerHTML += arr.join(""); 28 | }; 29 | 30 | //Logic for comparing input words with quote 31 | userInput.addEventListener("input", () => { 32 | let quoteChars = document.querySelectorAll(".quote-chars"); 33 | //Create an arrat from received span tags 34 | quoteChars = Array.from(quoteChars); 35 | 36 | //array of user input characters 37 | let userInputChars = userInput.value.split(""); 38 | 39 | //loop through each character in quote 40 | quoteChars.forEach((char, index) => { 41 | //Check if char(quote character) = userInputChars[index](input character) 42 | if (char.innerText == userInputChars[index]) { 43 | char.classList.add("success"); 44 | } 45 | //If user hasn't entered anything or backspaced 46 | else if (userInputChars[index] == null) { 47 | //Remove class if any 48 | if (char.classList.contains("success")) { 49 | char.classList.remove("success"); 50 | } else { 51 | char.classList.remove("fail"); 52 | } 53 | } 54 | //If user enter wrong character 55 | else { 56 | //Checks if we alreasy have added fail class 57 | if (!char.classList.contains("fail")) { 58 | //increment and display mistakes 59 | mistakes += 1; 60 | char.classList.add("fail"); 61 | } 62 | document.getElementById("mistakes").innerText = mistakes; 63 | } 64 | //Returns true if all the characters are entered correctly 65 | let check = quoteChars.every((element) => { 66 | return element.classList.contains("success"); 67 | }); 68 | //End test if all characters are correct 69 | if (check) { 70 | displayResult(); 71 | } 72 | }); 73 | }); 74 | 75 | //Update Timer on screen 76 | function updateTimer() { 77 | if (time == 0) { 78 | //End test if timer reaches 0 79 | displayResult(); 80 | } else { 81 | document.getElementById("timer").innerText = --time + "s"; 82 | } 83 | } 84 | 85 | //Sets timer 86 | const timeReduce = () => { 87 | time = 60; 88 | timer = setInterval(updateTimer, 1000); 89 | }; 90 | 91 | //End Test 92 | const displayResult = () => { 93 | //display result div 94 | document.querySelector(".result").style.display = "block"; 95 | clearInterval(timer); 96 | document.getElementById("stop-test").style.display = "none"; 97 | userInput.disabled = true; 98 | let timeTaken = 1; 99 | if (time != 0) { 100 | timeTaken = (60 - time) / 100; 101 | } 102 | document.getElementById("wpm").innerText = 103 | (userInput.value.length / 5 / timeTaken).toFixed(2) + " wpm"; 104 | document.getElementById("accuracy").innerText = 105 | Math.round( 106 | ((userInput.value.length - mistakes) / userInput.value.length) * 100 107 | ) + " %"; 108 | }; 109 | 110 | //Start Test 111 | const startTest = () => { 112 | mistakes = 0; 113 | timer = ""; 114 | userInput.disabled = false; 115 | timeReduce(); 116 | document.getElementById("start-test").style.display = "none"; 117 | document.getElementById("stop-test").style.display = "block"; 118 | }; 119 | 120 | window.onload = () => { 121 | userInput.value = ""; 122 | document.getElementById("start-test").style.display = "block"; 123 | document.getElementById("stop-test").style.display = "none"; 124 | userInput.disabled = true; 125 | renderNewQuote(); 126 | }; -------------------------------------------------------------------------------- /Typing speed Test/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | font-family: "Poppins", sans-serif; 6 | } 7 | body { 8 | background-color: #3066f6; 9 | } 10 | .container { 11 | width: 80vmin; 12 | padding: 50px 30px; 13 | background-color: #ffffff; 14 | position: absolute; 15 | transform: translate(-50%, -50%); 16 | top: 50%; 17 | left: 50%; 18 | border-radius: 10px; 19 | box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); 20 | } 21 | .stats { 22 | text-align: right; 23 | font-size: 18px; 24 | margin-bottom: 30px; 25 | } 26 | .stats span { 27 | font-weight: 600; 28 | } 29 | #quote { 30 | text-align: justify; 31 | margin: 50px 0 30px 0; 32 | } 33 | textarea { 34 | resize: none; 35 | width: 100%; 36 | border-radius: 5px; 37 | padding: 10px 5px; 38 | font-size: 16px; 39 | } 40 | button { 41 | float: right; 42 | margin-top: 20px; 43 | background-color: #3066f6; 44 | color: #ffffff; 45 | border: none; 46 | padding: 10px 30px; 47 | border-radius: 5px; 48 | font-size: 18px; 49 | } 50 | .result { 51 | margin-top: 40px; 52 | display: none; 53 | } 54 | .result h3 { 55 | text-align: center; 56 | margin-bottom: 20px; 57 | font-size: 22px; 58 | } 59 | .wrapper { 60 | display: flex; 61 | justify-content: space-around; 62 | } 63 | .wrapper span { 64 | font-weight: 600; 65 | } 66 | .success { 67 | color: #44b267; 68 | } 69 | .fail { 70 | color: #e81c4e; 71 | } -------------------------------------------------------------------------------- /Weather App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Weather App 6 | 7 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |
18 |
19 |
20 | 26 | 27 |
28 |
29 |
30 |
31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /Weather App/key.js: -------------------------------------------------------------------------------- 1 | //Assign the copied API key to the 'key' variable 2 | key = ""; -------------------------------------------------------------------------------- /Weather App/script.js: -------------------------------------------------------------------------------- 1 | let result = document.getElementById("result"); 2 | let searchBtn = document.getElementById("search-btn"); 3 | let cityRef = document.getElementById("city"); 4 | 5 | //Function to fetch weather details from api and display them 6 | let getWeather = () => { 7 | let cityValue = cityRef.value; 8 | //If input field is empty 9 | if (cityValue.length == 0) { 10 | result.innerHTML = `

Please enter a city name

`; 11 | } 12 | //If input field is NOT empty 13 | else { 14 | let url = `https://api.openweathermap.org/data/2.5/weather?q=${cityValue}&appid=${key}&units=metric`; 15 | //Clear the input field 16 | cityRef.value = ""; 17 | fetch(url) 18 | .then((resp) => resp.json()) 19 | //If city name is valid 20 | .then((data) => { 21 | console.log(data); 22 | console.log(data.weather[0].icon); 23 | console.log(data.weather[0].main); 24 | console.log(data.weather[0].description); 25 | console.log(data.name); 26 | console.log(data.main.temp_min); 27 | console.log(data.main.temp_max); 28 | result.innerHTML = ` 29 |

${data.name}

30 |

${data.weather[0].main}

31 |

${data.weather[0].description}

32 | 33 |

${data.main.temp} °

34 |
35 |
36 |

min

37 |

${data.main.temp_min}°

38 |
39 |
40 |

max

41 |

${data.main.temp_max}°

42 |
43 |
44 | `; 45 | }) 46 | //If city name is NOT valid 47 | .catch(() => { 48 | result.innerHTML = `

City not found

`; 49 | }); 50 | } 51 | }; 52 | searchBtn.addEventListener("click", getWeather); 53 | window.addEventListener("load", getWeather); -------------------------------------------------------------------------------- /Weather App/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | font-family: "Poppins", sans-serif; 6 | } 7 | :root { 8 | --white: #ffffff; 9 | --off-white: #e5e5e5; 10 | --transp-white-1: rgba(255, 255, 255, 0.25); 11 | --transp-white-2: rgba(255, 255, 255, 0.1); 12 | --blue-1: #62b8f5; 13 | --blue-2: #4475ef; 14 | --shadow: rgba(3, 46, 87, 0.2); 15 | } 16 | body { 17 | height: 100vh; 18 | background: linear-gradient(135deg, var(--blue-1), var(--blue-2)); 19 | } 20 | .wrapper { 21 | font-size: 16px; 22 | width: 90vw; 23 | max-width: 28em; 24 | position: absolute; 25 | transform: translate(-50%, -50%); 26 | top: 50%; 27 | left: 50%; 28 | } 29 | .container { 30 | width: 100%; 31 | background: var(--transp-white-2); 32 | backdrop-filter: blur(10px); 33 | padding: 3em 1.8em; 34 | border: 2px solid var(--transp-white-2); 35 | border-radius: 0.6em; 36 | box-shadow: 0 1.8em 3.7em var(--shadow); 37 | text-align: center; 38 | } 39 | .shape { 40 | position: absolute; 41 | background-color: var(--transp-white-1); 42 | backdrop-filter: blur(1.2em); 43 | border: 2px solid var(--transp-white-2); 44 | border-radius: 50%; 45 | } 46 | .shape-1 { 47 | height: 13em; 48 | width: 13em; 49 | right: -6.5em; 50 | top: 1.8em; 51 | } 52 | .shape-2 { 53 | height: 11em; 54 | width: 11em; 55 | bottom: -3.7em; 56 | left: -2.5em; 57 | } 58 | .search-container { 59 | font-size: 1em; 60 | display: grid; 61 | grid-template-columns: 9fr 3fr; 62 | gap: 1.25em; 63 | } 64 | .search-container input, 65 | .search-container button { 66 | outline: none; 67 | font-size: 1em; 68 | border: none; 69 | } 70 | .search-container input { 71 | padding: 0.7em; 72 | background-color: transparent; 73 | border-bottom: 2px solid var(--transp-white-1); 74 | color: var(--white); 75 | font-weight: 300; 76 | } 77 | .search-container input::placeholder { 78 | color: var(--off-white); 79 | } 80 | .search-container input:focus { 81 | border-color: var(--white); 82 | } 83 | .search-container button { 84 | color: var(--blue-2); 85 | background-color: var(--white); 86 | border-radius: 0.3em; 87 | } 88 | #result h2 { 89 | color: var(--white); 90 | text-transform: uppercase; 91 | letter-spacing: 0.18em; 92 | font-weight: 600; 93 | margin: 1.25em 0; 94 | } 95 | .weather, 96 | .desc { 97 | color: var(--off-white); 98 | text-transform: uppercase; 99 | letter-spacing: 0.2em; 100 | font-size: 0.9em; 101 | font-weight: 500; 102 | line-height: 2em; 103 | } 104 | .weather { 105 | margin-top: -0.7em; 106 | } 107 | #result img { 108 | margin: 0.6em 0 0 0; 109 | width: 6.2em; 110 | filter: drop-shadow(0 1.8em 3.7em var(--shadow)); 111 | } 112 | #result h1 { 113 | font-size: 4em; 114 | margin: 0.3em 0 0.7em 0; 115 | line-height: 0; 116 | font-weight: 400; 117 | color: var(--white); 118 | } 119 | .temp-container { 120 | display: flex; 121 | justify-content: center; 122 | } 123 | .temp-container div { 124 | padding: 0.3em 1em; 125 | } 126 | .temp-container div:first-child { 127 | border-right: 1px solid var(--transp-white-1); 128 | } 129 | .temp-container .title { 130 | font-weight: 600; 131 | color: var(--white); 132 | } 133 | .temp-container .temp { 134 | font-weight: 300; 135 | color: var(--off-white); 136 | } 137 | .msg { 138 | margin-top: 1.8em; 139 | color: var(--white); 140 | font-weight: 500; 141 | text-transform: uppercase; 142 | letter-spacing: 0.1em; 143 | } 144 | @media screen and (max-width: 450px) { 145 | .wrapper { 146 | font-size: 14px; 147 | } 148 | } -------------------------------------------------------------------------------- /clock/README.md: -------------------------------------------------------------------------------- 1 |

Clock

-------------------------------------------------------------------------------- /clock/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 | 17 | 1 18 | 2 19 | 3 20 | 4 21 | 5 22 | 6 23 | 7 24 | 8 25 | 9 26 | 10 27 | 11 28 | 12 29 |
30 | 31 |
32 |
00
33 |
00
34 |
00
35 |
AM
36 |
37 |
38 | 39 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /clock/sytle.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin:0; 3 | padding:0; 4 | box-sizing: border-box; 5 | font-family: sans-serif; 6 | } 7 | body{ 8 | display:flex; 9 | justify-content: center; 10 | align-items:center; 11 | min-height:100vh; 12 | background: #2f363e; 13 | } 14 | .container{ 15 | position:relative; 16 | background: #2f363e; 17 | /* min-height: 500px; */ 18 | border-radius: 20px; 19 | border-top-left-radius: 225px; 20 | border-top-right-radius: 225px; 21 | box-shadow: 25px 25px 75px rgba(0,0,0,0.75), 10px 10px 70px rgba(0,0,0,0.25), 22 | inset 5px 5px 10px rgba(0,0,0,0.5), 23 | inset 5px 5px 20px rgba(255,255,255,0.2), 24 | inset -5px -5px 10px rgba(0,0,0,0.75); 25 | display:flex; 26 | justify-content: center; 27 | align-items: center; 28 | flex-direction: column; 29 | } 30 | .clock{ 31 | position: relative; 32 | width:450px; 33 | height:450px; 34 | background: #2f363e; 35 | border-radius: 50%; 36 | box-shadow: 10px 50px 70px rgba(0,0,0,0.25), 37 | inset 5px 5px 10px rgba(0,0,0,0.5), 38 | inset 5px 5px 20px rgba(255,255,255,0.2), 39 | inset -5px -5px 10px rgba(0,0,0,0.75); 40 | display:flex; 41 | justify-content: center; 42 | align-items: center; 43 | margin-bottom:30px; 44 | } 45 | 46 | .clock::before{ 47 | content:''; 48 | position:absolute; 49 | width:8px; 50 | height:8px; 51 | background: #2f363e; 52 | border: 3px solid #fff; 53 | border-radius: 50%; 54 | z-index:100000; 55 | } 56 | .clock span{ 57 | position: absolute; 58 | inset: 20px; 59 | color: #fff; 60 | text-align: center; 61 | transform: rotate(calc(30deg * var(--i))); 62 | } 63 | 64 | .clock span b{ 65 | font-size:2em; 66 | opacity: 0.25; 67 | font-weight:600; 68 | display:inline-block; 69 | transform: rotate(calc(-30deg * var(--i))); 70 | } 71 | .circle{ 72 | position: absolute; 73 | width:300px; 74 | height:300px; 75 | border:2px solid rgba(0,0,0,0.25); 76 | border-radius:50%; 77 | display:flex; 78 | justify-content: center; 79 | align-items: flex-start; 80 | z-index:10; 81 | } 82 | 83 | .circle i { 84 | position: absolute; 85 | width:6px; 86 | height:50%; 87 | background: var(--clr); 88 | opacity:0.75; 89 | transform-origin: bottom; 90 | transform: scaleY(0.5); 91 | 92 | } 93 | .circle:nth-child(1) i { 94 | width: 2px; 95 | } 96 | .circle:nth-child(2) i { 97 | width: 6px; 98 | } 99 | .circle2{ 100 | width:240px; 101 | height:240px; 102 | z-index:9; 103 | } 104 | .circle3{ 105 | width:180px; 106 | height:180px; 107 | z-index:8; 108 | } 109 | .circle::before{ 110 | content: ''; 111 | position: absolute; 112 | top:-8.5px; 113 | width:15px; 114 | height: 15px; 115 | border-radius: 50%; 116 | background: var(--clr); 117 | box-shadow: 0 0 20px var(--clr), 118 | 0 0 60px var(--clr) 119 | } 120 | /* digital clock style */ 121 | #time{ 122 | margin-bottom: 40px; 123 | display:flex; 124 | padding:10px 20px; 125 | font-size: 2em; 126 | font-weight:600; 127 | border:2px solid rgba(0,0,0,0.5); 128 | border-radius:40px; 129 | box-shadow: 5px 5px 10px rgba(0,0,0,0.5), 130 | inset 5px 5px 20px rgba(255,255,255,0.2), 131 | inset -5px -5px 15px rgba(0,0,0,0.75); 132 | 133 | } 134 | 135 | #time div{ 136 | position: relative; 137 | width: 60px; 138 | text-align: center; 139 | font-weight: 500; 140 | color:var(--clr); 141 | } 142 | 143 | #time div:nth-child(1)::after, 144 | #time div:nth-child(2)::after 145 | { 146 | content:':'; 147 | position: absolute; 148 | right: -4px; 149 | } 150 | #time div:last-child{ 151 | font-size:0.5em; 152 | display: flex; 153 | justify-content: center; 154 | align-items: center; 155 | color: #fff; 156 | } 157 | 158 | #time div:nth-child(2)::after 159 | { 160 | animation:amimate 1s steps(1) infinite; 161 | } 162 | 163 | @keyframes amimate { 164 | 0%{ 165 | opacity: 1; 166 | } 167 | 50%{ 168 | opacity: 0; 169 | } 170 | } -------------------------------------------------------------------------------- /country Guide App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Country Guide App 8 | 9 | 10 | 11 | 12 |
13 |
14 | 15 | 16 |
17 |
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /country Guide App/index.js: -------------------------------------------------------------------------------- 1 | let searchBtn = document.getElementById('search-btn'); 2 | let countryInp = document.getElementById('country-inp'); 3 | searchBtn.addEventListener("click",()=>{ 4 | let countryName = countryInp.value; 5 | let finalURL = `https://restcountries.com/v3.1/name/${countryName}?fullText=true`; 6 | console.log(finalURL); 7 | fetch(finalURL).then((response)=> response.json()) 8 | .then((data)=>{ 9 | // console.log(data[0]); 10 | // console.log(data[0].capital[0]); 11 | // console.log(data[0].flags.svg); 12 | // console.log(data[0].name.common); 13 | // console.log(data[0].continents[0]); 14 | // console.log(Object.keys(data[0].currencies)[0]); 15 | // console.log(data[0].currencies[Object.keys(data[0].currencies)].name); 16 | // console.log(Object.values(data[0].languages).toString().split(",").join(",")); 17 | result.innerHTML = ` 18 | 19 |

${data[0].name.common}

20 |
21 |
22 |

Capital:

23 | ${data[0].capital[0]} 24 |
25 |
26 |
27 |
28 |

Continent:

29 | ${data[0].continents[0]} 30 |
31 |
32 |
33 |
34 |

Population:

35 | ${data[0].population} 36 |
37 |
38 |
39 |
40 |

Currency:

41 | ${data[0].currencies[Object.keys(data[0].currencies)].name}- ${Object.keys(data[0].currencies)[0]} 42 |
43 |
44 |
45 |
46 |

Common Language:

47 | ${Object.values(data[0].languages).toString().split(",").join(",")} 48 |
49 |
50 | ` 51 | }).catch(()=>{ 52 | if(countryName.length==0){ 53 | result.innerHTML = `

The input field cannot be empty

` 54 | }else { 55 | result.innerHTML=`

Please enter a valid country name.

`; 56 | } 57 | }) 58 | }) -------------------------------------------------------------------------------- /country Guide App/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | padding:0; 3 | margin:0; 4 | box-sizing: border-box; 5 | font-family: "Poppins",sans-serif; 6 | } 7 | body{ 8 | background-color: #3d64e6; 9 | } 10 | .container{ 11 | background-color: #ffffff; 12 | width:80vw; 13 | max-width: 37.5em; 14 | padding:3em 2.5em; 15 | position:absolute; 16 | transform: translate(-50%,-50%); 17 | top:50%; 18 | left:50%; 19 | border-radius: 0.62em; 20 | box-shadow: 0 1.25em 1.8em rgba(8,21,65,0.25); 21 | } 22 | .search-wrapper{ 23 | display:grid; 24 | grid-template-columns: 9fr 3fr; 25 | gap:1.25em; 26 | } 27 | .search-wrapper button{ 28 | font-size:1em; 29 | background-color: #3d64e6; 30 | color:#ffffff; 31 | padding:0.8em 0; 32 | border:none; 33 | border-radius: 1.5em; 34 | } 35 | .search-wrapper input{ 36 | font-size:1em; 37 | padding:0 0.62em; 38 | border:none; 39 | border-radius: 2px solid #3d64e6 ; 40 | outline:none; 41 | color:#222a43; 42 | } 43 | 44 | #result{ 45 | margin-top: 1.25em; 46 | } 47 | .container .flag-img { 48 | display:block; 49 | width:45%; 50 | min-width: 7.5em; 51 | margin:1.8em auto 1.2em auto; 52 | } 53 | .container h2{ 54 | font-weight: 600; 55 | color:#222a43; 56 | text-align: center; 57 | text-transform: uppercase; 58 | letter-spacing: 2px; 59 | margin-bottom:1.8em; 60 | } 61 | .data-wrapper{ 62 | margin-bottom: 1em; 63 | letter-spacing: 0.3px; 64 | } 65 | .container h4{ 66 | display:inline; 67 | font-weight:500; 68 | color:#222a43; 69 | } 70 | .container span{ 71 | color: #5d6274; 72 | } 73 | .container h3{ 74 | text-align:center; 75 | font-size: 1.2em; 76 | font-weight:400; 77 | color:#ff465a; 78 | } 79 | --------------------------------------------------------------------------------