├── 10AgeCalcuator ├── age.png ├── index.html ├── logic.js └── style.css ├── 11GradeCalculator └── index.html ├── 12SimpleIntersetCalculator ├── index.html ├── script.js └── style.css ├── 13GuessTheNumber ├── index.css ├── index.html └── index.js ├── 14CompoundInterestCalculator ├── index.html ├── logic.js └── style.css ├── 15CurrenyConverter ├── index.html ├── js │ ├── country-list.js │ └── logic.js └── style.css ├── 16PercentageCalculator ├── index.html ├── script.js └── style.css ├── 17randomNumberGenerator ├── index.html ├── script.js └── style.css ├── 18randomEmojiGenerator ├── index.html ├── script.js └── style.css ├── 19toDoList ├── index.html ├── script.js └── style.css ├── 1Bulb On&Off ├── bulbOff.jpg ├── bulbOn.jpg └── index.html ├── 20randomColorGenerator ├── index.html ├── script.js └── style.css ├── 21surveyForm ├── index.html ├── script.js └── style.css ├── 22loginForm ├── background.jpg ├── index.html ├── script.js └── style.css ├── 23snakeWaterGunGame ├── gun.mp3 ├── gun.png ├── index.html ├── script.js ├── snake.mp3 ├── snake.png ├── style.css ├── water.mp3 └── water.png ├── 24tellMeAJoke ├── index.html ├── laugh.png ├── script.js └── style.css ├── 25passwordGenerator ├── index.html ├── script.js └── style.css ├── 26AlarmClock ├── clock.png ├── index.html ├── ringtone.mp3 ├── script.js └── style.css ├── 27imageSliderShowWithTransitions ├── index.html ├── script.js └── style.css ├── 2WordCounter ├── index.html ├── main.js └── style.css ├── 3TwoNumbersSum ├── .vscode │ └── settings.json └── index.html ├── 4ThemeToggle ├── index.html ├── logic.js └── style.css ├── 5ArithematicCalcuator ├── index.html ├── logic.js └── style.css ├── 6ProcessBar ├── index.html ├── logic.js └── style.css ├── 7ExpandingCards ├── index.html ├── logic.js └── style.css ├── 8Calculator ├── index.html ├── script.js └── style.css ├── 9.DetectPressedKey ├── index.html ├── logic.js └── style.css └── desktop.ini /10AgeCalcuator/age.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devikumavath/27-frontend-project/cc6c176f83643dae1ae85f929a08688027f7b4be/10AgeCalcuator/age.png -------------------------------------------------------------------------------- /10AgeCalcuator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Age Calculator 8 | 9 | 10 | 11 |
12 |

Age Calculator

13 | 14 |
15 |

From(Date of Brith)

16 | 17 | 18 |

To(Till Date)

19 | 20 |
21 | 22 |
23 | 29 |
30 | 31 |

32 | 33 |
34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /10AgeCalcuator/logic.js: -------------------------------------------------------------------------------- 1 | let dob = document.getElementById("birthdata"); 2 | let currdate = document.getElementById("currentdata"); 3 | 4 | let output = document.getElementById("output"); 5 | 6 | document.getElementById("submitbtn").addEventListener("click", () => { 7 | if (dob.value == "" || currdate.value == "") { 8 | return (output.innerHTML = "please select date "); 9 | } else { 10 | calculateAgeDifference(dob.value, currdate.value); 11 | } 12 | }); 13 | 14 | 15 | 16 | function calculateAgeDifference(start, end) { 17 | let dobYear = parseInt(start.substring(0, 4), 10); 18 | let dobMonth = parseInt(start.substring(5, 7), 10); 19 | let dobDate = parseInt(start.substring(8, 10), 10); 20 | 21 | let currYear = parseInt(end.substring(0, 4), 10); 22 | let currMonth = parseInt(end.substring(5, 7), 10); 23 | let currDate = parseInt(end.substring(8, 10), 10); 24 | 25 | let yearAgeDiff = currYear - dobYear; 26 | 27 | let monthAgeDiff; 28 | if (currMonth >= dobMonth) { 29 | monthAgeDiff = currMonth - dobMonth; 30 | } else { 31 | yearAgeDiff--; 32 | monthAgeDiff = 12 + currMonth - dobMonth; 33 | } 34 | 35 | let dateAgeDiff; 36 | if (currDate >= dobDate) { 37 | dateAgeDiff = currDate - dobDate; 38 | } else { 39 | monthAgeDiff--; 40 | let noOfDaysInDob = daysInMonth(dobMonth, dobYear); 41 | dateAgeDiff = noOfDaysInDob + currDate - dobDate; 42 | 43 | if (monthAgeDiff < 0) { 44 | monthAgeDiff = 11; 45 | yearAgeDiff--; 46 | } 47 | } 48 | 49 | console.log(yearAgeDiff , monthAgeDiff , dateAgeDiff); 50 | output.innerHTML = 51 | yearAgeDiff + " Years " + monthAgeDiff + " Months " + dateAgeDiff + " Days."; 52 | } 53 | 54 | 55 | 56 | 57 | function daysInMonth(month, year) { 58 | return new Date(year, month, 0).getDate(); 59 | } 60 | 61 | 62 | -------------------------------------------------------------------------------- /10AgeCalcuator/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0%; 3 | margin: 0%; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | min-height: 100vh; 12 | /* background-image: url(age.png); 13 | background-repeat: repeat-x; */ 14 | 15 | } 16 | 17 | .container { 18 | background-color: #CCF381; 19 | border: 2px solid #4831D4; 20 | padding: 4vw; 21 | margin: auto; 22 | width: max-content; 23 | border-radius: 10px; 24 | box-shadow: 0 0 4px 1px lightgreen; 25 | } 26 | 27 | h2{ 28 | text-align: center; 29 | text-transform: capitalize; 30 | text-shadow: #4831D4; 31 | } 32 | 33 | .startdate, 34 | .enddate { 35 | padding: 7px; 36 | border: 1px solid black; 37 | border-radius: 5px; 38 | } 39 | 40 | .from, 41 | .to { 42 | text-transform: capitalize; 43 | padding: 10px; 44 | } 45 | 46 | .inputdata { 47 | margin-top: 20px; 48 | display: flex; 49 | justify-content:center; 50 | } 51 | 52 | .submitdata , .getage 53 | { 54 | margin-top: 20px; 55 | display: flex; 56 | justify-content: center; 57 | } 58 | .submit { 59 | padding: 7px; 60 | border-radius: 5px; 61 | border: 1px solid black; 62 | text-transform: uppercase; 63 | 64 | } 65 | 66 | .submit:hover { 67 | background-color:lightgreen; 68 | color: white; 69 | cursor: pointer; 70 | box-shadow: 0 0 4px 1px black; 71 | transition: 0.3s; 72 | } 73 | 74 | .container p { 75 | color: black; 76 | margin: 10px; 77 | font-size: 20px; 78 | font-weight: bolder; 79 | font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; 80 | text-align: center; 81 | } 82 | 83 | /* #result { 84 | width: fit-content; 85 | font-weight: bold; 86 | font-family: 'Times New Roman', Times, serif; 87 | text-align: center; 88 | } */ -------------------------------------------------------------------------------- /11GradeCalculator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Grade Calculator 8 | 12 | 16 | 133 | 134 | 135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 | telangana ssc
143 | 10th grade
144 | calculator 145 |
146 |
147 |
148 |
149 |
150 |
151 | 157 |
158 | 159 |
160 | 166 |
167 | 168 |
169 | 175 |
176 | 177 |
178 | 184 |
185 | 186 |
187 | 193 |
194 | 195 |
196 | 202 |
203 | 204 |
205 | 212 |
213 |
214 |
215 |
216 |
217 |

218 |
219 |
220 |
221 |
222 | 223 | 274 | 275 | 276 | -------------------------------------------------------------------------------- /12SimpleIntersetCalculator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Simple Interest Calculator 8 | 9 | 10 | 11 | 12 |
13 | 14 |
15 | 16 |

Calculate simple interest 💰💱

17 |
18 | 19 | 20 |
21 | 22 |

23 | 24 |

25 | 26 | 27 |
28 |
29 | 30 | 31 |
32 |
33 | 34 | 35 |
36 | 37 |
38 | 39 | 40 | 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 | -------------------------------------------------------------------------------- /12SimpleIntersetCalculator/script.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | const form = document.querySelector('form'); 5 | const result = document.querySelector('.result'); 6 | const interestEarned = document.querySelector('.interset-earned'); 7 | const principalAmount = document.querySelector('.princple-amount'); 8 | const totalValue = document.querySelector('.total-value'); 9 | 10 | form.addEventListener('submit', (event) => { 11 | event.preventDefault(); // prevent form submission 12 | 13 | const principal = parseInt(document.getElementById('p').value); 14 | const rate = parseInt(document.getElementById('r').value); 15 | const time = parseInt(document.getElementById('t').value); 16 | const periodunit = document.getElementById('period').value; 17 | 18 | let timeInYears = time; 19 | switch (periodunit) { 20 | case 'days': 21 | timeInYears = time / 365; 22 | break; 23 | case 'weeks': 24 | timeInYears = time / 52; 25 | break; 26 | case 'months': 27 | timeInYears = time / 12; 28 | break; 29 | case 'quarters': 30 | timeInYears = time / 4; 31 | break; 32 | case 'years': 33 | timeInYears = time; 34 | break; 35 | default: 36 | timeInYears = time; 37 | break; 38 | } 39 | 40 | const interest = (principal * rate * timeInYears) / 100; 41 | const total = principal + interest; 42 | 43 | interestEarned.textContent = `Interest earned: ${interest.toFixed(2)} Rs`; 44 | principalAmount.textContent = `Principal amount: ${principal} Rs`; 45 | totalValue.textContent = `Total value: ${total.toFixed(2)} Rs`; 46 | 47 | 48 | // Clear input fields 49 | // document.getElementById('p').value = ''; 50 | // document.getElementById('r').value = ''; 51 | // document.getElementById('t').value = ''; 52 | // document.getElementById('period').value = 'days'; 53 | 54 | }); -------------------------------------------------------------------------------- /12SimpleIntersetCalculator/style.css: -------------------------------------------------------------------------------- 1 | .wrapper { 2 | margin: auto; 3 | display: flex; 4 | flex-direction: column; 5 | align-items: center; 6 | text-transform: capitalize; 7 | background-color: #b3ffae; 8 | width: 500px; 9 | border-radius: 5px; 10 | } 11 | button[type="submit"] { 12 | background-color: rgb(76, 210, 76); 13 | color: black; 14 | border: none; 15 | border-radius: 3px; 16 | padding: 5px; 17 | text-transform: capitalize; 18 | cursor: pointer; 19 | max-height: max-content; 20 | } 21 | 22 | button:hover { 23 | background-color: rgb(0, 78, 29); 24 | color: whitesmoke; 25 | } 26 | .cal { 27 | text-align: center; 28 | margin-top: 10px; 29 | } 30 | input[type="text"] { 31 | width: 100%; 32 | padding: 5px; 33 | border: 1px solid #ccc; 34 | border-radius: 5px; 35 | margin: 5px; 36 | } 37 | 38 | select[name="periodunit"] { 39 | padding: 5px; 40 | margin: 5px; 41 | border: none; 42 | border-radius: 3px; 43 | } 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /13GuessTheNumber/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #333232; 3 | } 4 | 5 | #container { 6 | background-color: #0e2431; 7 | 8 | text-align: center; 9 | text-transform: capitalize; 10 | font-size: 35px; 11 | color: white; 12 | margin: auto; 13 | height: 400px; 14 | width: 800px; 15 | border-radius: 5px; 16 | border: 2px solid #f5e4c3; 17 | } 18 | 19 | #btn { 20 | cursor: pointer; 21 | padding: 5px; 22 | border-radius: 7px; 23 | 24 | width: 100px 100px; 25 | padding: 14px; 26 | } 27 | 28 | #btn:hover { 29 | background-color: goldenrod; 30 | } 31 | 32 | p { 33 | color: white; 34 | } 35 | 36 | #userinput { 37 | width: 100px 100px; 38 | 39 | padding: 14px; 40 | border: none; 41 | } 42 | 43 | #outputtext { 44 | font-size: smaller; 45 | } 46 | 47 | input::-webkit-outer-spin-button, 48 | input::-webkit-inner-spin-button { 49 | -webkit-appearance: none; 50 | margin: 0; 51 | } 52 | -------------------------------------------------------------------------------- /13GuessTheNumber/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Guess The Number Game 8 | 9 | 10 | 11 |
12 |

😍 guess the number 😍

13 |

Enter Number Between 1-100

14 |

enter number :

15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /13GuessTheNumber/index.js: -------------------------------------------------------------------------------- 1 | const btn = document.getElementById("btn"); 2 | const outputtext = document.getElementById("outputtext"); 3 | 4 | let number = [Math.floor(Math.random() * 100)]; 5 | 6 | console.log(number); 7 | 8 | btn.addEventListener("click", function () { 9 | const userinput = document.getElementById("userinput").value; 10 | // console.log(userinput); 11 | 12 | if (userinput == number) { 13 | outputtext.innerHTML = `congratulations 💃 you have guess the correct numer ${userinput}. `; 14 | } else if (userinput >= 101 || userinput < 1) { 15 | outputtext.innerHTML = `Choose random No 1-100.`; 16 | } 17 | 18 | else if (userinput > number) { 19 | outputtext.innerHTML = `${userinput} is greater than the actual number.`; 20 | } else if (userinput < number) { 21 | outputtext.innerHTML = `${userinput} is smaller than the actual number.`; 22 | } 23 | }); 24 | -------------------------------------------------------------------------------- /14CompoundInterestCalculator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Compound Interest Calculator 8 | 9 | 10 | 11 |
12 |

Compound Interest Calculator 🧮🤑

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 | -------------------------------------------------------------------------------- /14CompoundInterestCalculator/logic.js: -------------------------------------------------------------------------------- 1 | const pInput = document.getElementById("p"); 2 | const rInput = document.getElementById("r"); 3 | const nInput = document.getElementById("n"); 4 | const result = document.getElementById("result"); 5 | 6 | const btn = document.getElementById("btn"); 7 | btn.addEventListener("click", function () { 8 | if (pInput.value === "" || rInput.value === "" || nInput.value === "") { 9 | alert("Please enter data in all fields."); 10 | return; 11 | } 12 | 13 | const p = parseFloat(pInput.value); 14 | const r = parseFloat(rInput.value); 15 | const n = parseFloat(nInput.value); 16 | 17 | console.log(p, r, n); 18 | 19 | const CI = p * (Math.pow(1 + r / 100, n) - 1); 20 | const TA = p + CI; 21 | 22 | const CIResult = result.querySelector("#CI"); 23 | CIResult.textContent = "Compound Interest: " + CI.toFixed(2); 24 | 25 | const TAResult = result.querySelector("#TA"); 26 | TAResult.textContent = "Total Amount: " + TA.toFixed(2); 27 | 28 | // Clear the input fields 29 | pInput.value = ""; 30 | rInput.value = ""; 31 | nInput.value = ""; 32 | }); 33 | -------------------------------------------------------------------------------- /14CompoundInterestCalculator/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: linear-gradient(to bottom right, #0099ff, #33cc33) no-repeat; 3 | height: 560px; 4 | } 5 | 6 | .container { 7 | border-radius: 3px; 8 | height: max-content; 9 | width: max-content; 10 | margin: auto auto; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | flex-direction: column; 15 | padding: 50px; 16 | background-color: #ffffff; 17 | } 18 | 19 | h1 { 20 | font-family: sans-serif; 21 | } 22 | 23 | .formgroup { 24 | text-transform: capitalize; 25 | font-family: "Times New Roman", Times, serif; 26 | padding: 5px; 27 | /* color: white; */ 28 | display: flex; 29 | align-items: center; 30 | } 31 | 32 | .formgroup label { 33 | display: inline-block; 34 | width: 190px; 35 | } 36 | 37 | #btn { 38 | text-transform: capitalize; 39 | padding: 10px; 40 | 41 | border: none; 42 | margin-top: 10px; 43 | border-radius: 7px; 44 | cursor: pointer; 45 | } 46 | 47 | #btn:hover { 48 | background-color: #33cc33; 49 | border: 2px solid black; 50 | 51 | transition: 2s ease; 52 | } 53 | -------------------------------------------------------------------------------- /15CurrenyConverter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Currency Converter App in JavaScript | Devi Kumavath 6 | 7 | 8 | 9 | 13 | 14 | 15 |
16 |
CurrencyConverter💱
17 |
18 |
19 |

Enter Amount

20 | 21 |
22 |
23 |
24 |

From

25 |
26 | flag 27 | 30 |
31 |
32 |
33 |
34 |

To

35 |
36 | flag 37 | 40 |
41 |
42 |
43 |
Getting exchange rate...
44 | 45 |
46 |
47 | 48 | 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /15CurrenyConverter/js/country-list.js: -------------------------------------------------------------------------------- 1 | let country_list = { 2 | AED: "AE", 3 | AFN: "AF", 4 | XCD: "AG", 5 | ALL: "AL", 6 | AMD: "AM", 7 | ANG: "AN", 8 | AOA: "AO", 9 | AQD: "AQ", 10 | ARS: "AR", 11 | AUD: "AU", 12 | AZN: "AZ", 13 | BAM: "BA", 14 | BBD: "BB", 15 | BDT: "BD", 16 | XOF: "BE", 17 | BGN: "BG", 18 | BHD: "BH", 19 | BIF: "BI", 20 | BMD: "BM", 21 | BND: "BN", 22 | BOB: "BO", 23 | BRL: "BR", 24 | BSD: "BS", 25 | NOK: "BV", 26 | BWP: "BW", 27 | BYR: "BY", 28 | BZD: "BZ", 29 | CAD: "CA", 30 | CDF: "CD", 31 | XAF: "CF", 32 | CHF: "CH", 33 | CLP: "CL", 34 | CNY: "CN", 35 | COP: "CO", 36 | CRC: "CR", 37 | CUP: "CU", 38 | CVE: "CV", 39 | CYP: "CY", 40 | CZK: "CZ", 41 | DJF: "DJ", 42 | DKK: "DK", 43 | DOP: "DO", 44 | DZD: "DZ", 45 | ECS: "EC", 46 | EEK: "EE", 47 | EGP: "EG", 48 | ETB: "ET", 49 | EUR: "FR", 50 | FJD: "FJ", 51 | FKP: "FK", 52 | GBP: "GB", 53 | GEL: "GE", 54 | GGP: "GG", 55 | GHS: "GH", 56 | GIP: "GI", 57 | GMD: "GM", 58 | GNF: "GN", 59 | GTQ: "GT", 60 | GYD: "GY", 61 | HKD: "HK", 62 | HNL: "HN", 63 | HRK: "HR", 64 | HTG: "HT", 65 | HUF: "HU", 66 | IDR: "ID", 67 | ILS: "IL", 68 | INR: "IN", 69 | IQD: "IQ", 70 | IRR: "IR", 71 | ISK: "IS", 72 | JMD: "JM", 73 | JOD: "JO", 74 | JPY: "JP", 75 | KES: "KE", 76 | KGS: "KG", 77 | KHR: "KH", 78 | KMF: "KM", 79 | KPW: "KP", 80 | KRW: "KR", 81 | KWD: "KW", 82 | KYD: "KY", 83 | KZT: "KZ", 84 | LAK: "LA", 85 | LBP: "LB", 86 | LKR: "LK", 87 | LRD: "LR", 88 | LSL: "LS", 89 | LTL: "LT", 90 | LVL: "LV", 91 | LYD: "LY", 92 | MAD: "MA", 93 | MDL: "MD", 94 | MGA: "MG", 95 | MKD: "MK", 96 | MMK: "MM", 97 | MNT: "MN", 98 | MOP: "MO", 99 | MRO: "MR", 100 | MTL: "MT", 101 | MUR: "MU", 102 | MVR: "MV", 103 | MWK: "MW", 104 | MXN: "MX", 105 | MYR: "MY", 106 | MZN: "MZ", 107 | NAD: "NA", 108 | XPF: "NC", 109 | NGN: "NG", 110 | NIO: "NI", 111 | NPR: "NP", 112 | NZD: "NZ", 113 | OMR: "OM", 114 | PAB: "PA", 115 | PEN: "PE", 116 | PGK: "PG", 117 | PHP: "PH", 118 | PKR: "PK", 119 | PLN: "PL", 120 | PYG: "PY", 121 | QAR: "QA", 122 | RON: "RO", 123 | RSD: "RS", 124 | RUB: "RU", 125 | RWF: "RW", 126 | SAR: "SA", 127 | SBD: "SB", 128 | SCR: "SC", 129 | SDG: "SD", 130 | SEK: "SE", 131 | SGD: "SG", 132 | SKK: "SK", 133 | SLL: "SL", 134 | SOS: "SO", 135 | SRD: "SR", 136 | STD: "ST", 137 | SVC: "SV", 138 | SYP: "SY", 139 | SZL: "SZ", 140 | THB: "TH", 141 | TJS: "TJ", 142 | TMT: "TM", 143 | TND: "TN", 144 | TOP: "TO", 145 | TRY: "TR", 146 | TTD: "TT", 147 | TWD: "TW", 148 | TZS: "TZ", 149 | UAH: "UA", 150 | UGX: "UG", 151 | USD: "US", 152 | UYU: "UY", 153 | UZS: "UZ", 154 | VEF: "VE", 155 | VND: "VN", 156 | VUV: "VU", 157 | YER: "YE", 158 | ZAR: "ZA", 159 | ZMK: "ZM", 160 | ZWD: "ZW", 161 | }; 162 | -------------------------------------------------------------------------------- /15CurrenyConverter/js/logic.js: -------------------------------------------------------------------------------- 1 | const dropList = document.querySelectorAll("form select"), 2 | fromCurrency = document.querySelector(".from select"), 3 | toCurrency = document.querySelector(".to select"), 4 | getButton = document.querySelector("form button"); 5 | 6 | for (let i = 0; i < dropList.length; i++) { 7 | for (let currency_code in country_list) { 8 | let selected = 9 | i == 0 10 | ? currency_code == "USD" 11 | ? "selected" 12 | : "" 13 | : currency_code == "INR" 14 | ? "selected" 15 | : ""; 16 | let optionTag = ``; 17 | dropList[i].insertAdjacentHTML("beforeend", optionTag); 18 | } 19 | dropList[i].addEventListener("change", (e) => { 20 | loadFlag(e.target); 21 | }); 22 | } 23 | 24 | function loadFlag(element) { 25 | for (let code in country_list) { 26 | if (code == element.value) { 27 | let imgTag = element.parentElement.querySelector("img"); 28 | imgTag.src = `https://flagcdn.com/48x36/${country_list[ 29 | code 30 | ].toLowerCase()}.png`; 31 | } 32 | } 33 | } 34 | 35 | window.addEventListener("load", () => { 36 | getExchangeRate(); 37 | }); 38 | 39 | getButton.addEventListener("click", (e) => { 40 | e.preventDefault(); 41 | getExchangeRate(); 42 | }); 43 | 44 | const exchangeIcon = document.querySelector("form .icon"); 45 | exchangeIcon.addEventListener("click", () => { 46 | let tempCode = fromCurrency.value; 47 | fromCurrency.value = toCurrency.value; 48 | toCurrency.value = tempCode; 49 | loadFlag(fromCurrency); 50 | loadFlag(toCurrency); 51 | getExchangeRate(); 52 | }); 53 | 54 | function getExchangeRate() { 55 | const amount = document.querySelector("form input"); 56 | const exchangeRateTxt = document.querySelector("form .exchange-rate"); 57 | let amountVal = amount.value; 58 | if (amountVal == "" || amountVal == "0") { 59 | amount.value = "1"; 60 | amountVal = 1; 61 | } 62 | exchangeRateTxt.innerText = "Getting exchange rate..."; 63 | // let url = `https://v6.exchangerate-api.com/v6/YOUR-API-KEY/latest/${fromCurrency.value}`; 64 | let url = `https://v6.exchangerate-api.com/v6/b516a3b22935bb5d1b414d5d/latest/${fromCurrency.value}`; 65 | 66 | fetch(url) 67 | .then((response) => response.json()) 68 | .then((result) => { 69 | let exchangeRate = result.conversion_rates[toCurrency.value]; 70 | let totalExRate = (amountVal * exchangeRate).toFixed(2); 71 | exchangeRateTxt.innerText = `${amountVal} ${fromCurrency.value} = ${totalExRate} ${toCurrency.value}`; 72 | }) 73 | .catch(() => { 74 | exchangeRateTxt.innerText = "Something went wrong"; 75 | }); 76 | } 77 | -------------------------------------------------------------------------------- /15CurrenyConverter/style.css: -------------------------------------------------------------------------------- 1 | /* Import Google Font - Poppins */ 2 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); 3 | *{ 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: 'Poppins', sans-serif; 8 | } 9 | body{ 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | min-height: 100vh; 14 | padding: 0 10px; 15 | background: #675AFE; 16 | } 17 | ::selection{ 18 | color: #fff; 19 | background: #675AFE; 20 | } 21 | .wrapper{ 22 | width: 370px; 23 | padding: 30px; 24 | border-radius: 7px; 25 | background: #fff; 26 | box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.05); 27 | } 28 | .wrapper header{ 29 | font-size: 28px; 30 | font-weight: 500; 31 | text-align: center; 32 | } 33 | .wrapper form{ 34 | margin: 40px 0 20px 0; 35 | } 36 | form :where(input, select, button){ 37 | width: 100%; 38 | outline: none; 39 | border-radius: 5px; 40 | border: none; 41 | } 42 | form p{ 43 | font-size: 18px; 44 | margin-bottom: 5px; 45 | } 46 | form input{ 47 | height: 50px; 48 | font-size: 17px; 49 | padding: 0 15px; 50 | border: 1px solid #999; 51 | } 52 | form input:focus{ 53 | padding: 0 14px; 54 | border: 2px solid #675AFE; 55 | } 56 | form .drop-list{ 57 | display: flex; 58 | margin-top: 20px; 59 | align-items: center; 60 | justify-content: space-between; 61 | } 62 | .drop-list .select-box{ 63 | display: flex; 64 | width: 115px; 65 | height: 45px; 66 | align-items: center; 67 | border-radius: 5px; 68 | justify-content: center; 69 | border: 1px solid #999; 70 | } 71 | .select-box img{ 72 | max-width: 21px; 73 | } 74 | .select-box select{ 75 | width: auto; 76 | font-size: 16px; 77 | background: none; 78 | margin: 0 -5px 0 5px; 79 | } 80 | .select-box select::-webkit-scrollbar{ 81 | width: 8px; 82 | } 83 | .select-box select::-webkit-scrollbar-track{ 84 | background: #fff; 85 | } 86 | .select-box select::-webkit-scrollbar-thumb{ 87 | background: #888; 88 | border-radius: 8px; 89 | border-right: 2px solid #ffffff; 90 | } 91 | .drop-list .icon{ 92 | cursor: pointer; 93 | margin-top: 30px; 94 | font-size: 22px; 95 | } 96 | form .exchange-rate{ 97 | font-size: 17px; 98 | margin: 20px 0 30px; 99 | } 100 | form button{ 101 | height: 52px; 102 | color: #fff; 103 | font-size: 17px; 104 | cursor: pointer; 105 | background: #675AFE; 106 | transition: 0.3s ease; 107 | } 108 | form button:hover{ 109 | background: #4534fe; 110 | } -------------------------------------------------------------------------------- /16PercentageCalculator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Percentage Calculator 9 | 10 | 11 | 12 | 13 |

Percentage Calculator

14 |
15 |

What is % of ?

17 | 18 | 19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /16PercentageCalculator/script.js: -------------------------------------------------------------------------------- 1 | // Get DOM elements 2 | const percentageInput = document.getElementById('Percentage'); 3 | const numberInput = document.getElementById('number'); 4 | const calculateButton = document.getElementById('Calculate'); 5 | const resultInput = document.getElementById('result'); 6 | 7 | // Add event listener to the Calculate button 8 | calculateButton.addEventListener('click', calculatePercentage); 9 | 10 | // Function to calculate the percentage 11 | function calculatePercentage() { 12 | const percentage = parseFloat(percentageInput.value); 13 | const number = parseFloat(numberInput.value); 14 | 15 | if (isNaN(percentage) || isNaN(number)) { 16 | resultInput.value = 'Invalid input'; 17 | } else { 18 | const result = (percentage / 100) * number; 19 | resultInput.value = result; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /16PercentageCalculator/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | h1 { 8 | text-align: center; 9 | margin-top: 20px; 10 | text-transform: capitalize; 11 | } 12 | 13 | body { 14 | background-color: #f7f7f7; 15 | min-height: 100vh; 16 | display: flex; 17 | justify-content: center; 18 | align-items: center; 19 | flex-direction: column; 20 | } 21 | 22 | .container { 23 | display: flex; 24 | flex-direction: column; 25 | align-items: center; 26 | 27 | background-color: pink; 28 | width: 580px; 29 | height: 200px; 30 | margin: 16px 0; 31 | padding: 24px; 32 | text-align: center; 33 | box-shadow: 2px 2px 8px 2px #aaa; 34 | border-radius: 8px; 35 | } 36 | 37 | .no-spinner::-webkit-inner-spin-button, 38 | .no-spinner::-webkit-outer-spin-button { 39 | -webkit-appearance: none; 40 | margin: 0; 41 | } 42 | 43 | .no-spinner { 44 | -moz-appearance: textfield; 45 | } 46 | 47 | input[type="number"] { 48 | width: 84px; 49 | font-size: 18px; 50 | padding: 8px; 51 | margin: 0px 8px 8px 8px; 52 | } 53 | 54 | #Calculate { 55 | background-color: blue; 56 | color: white; 57 | padding: 10px 20px; 58 | font-size: 16px; 59 | border: none; 60 | border-radius: 4px; 61 | cursor: pointer; 62 | margin-top: 10px; 63 | margin-bottom: 10px; 64 | } 65 | 66 | #Calculate:hover { 67 | background-color: darkblue; 68 | } 69 | 70 | #result { 71 | width: 200px; 72 | padding: 8px; 73 | font-size: 16px; 74 | border: 1px solid #ccc; 75 | border-radius: 4px; 76 | background-color: #f7f7f7; 77 | color: #333; 78 | cursor: not-allowed; 79 | } 80 | -------------------------------------------------------------------------------- /17randomNumberGenerator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Random Number Generator 8 | 9 | 10 | 11 |
12 |

Random Number Generator 🎲

13 | 14 | 0 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /17randomNumberGenerator/script.js: -------------------------------------------------------------------------------- 1 | const number = document.getElementById("number"); 2 | const generatorBtn = document.getElementById("generatorBtn"); 3 | 4 | const randomNumberGenerator = () => { 5 | const randomNumber = Math.floor(Math.random() * 6) + 1; 6 | 7 | number.textContent = randomNumber 8 | }; 9 | 10 | generatorBtn.addEventListener('click' , 11 | randomNumberGenerator); 12 | 13 | randomNumberGenerator(); 14 | 15 | -------------------------------------------------------------------------------- /17randomNumberGenerator/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: sans-serif; 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | body { 9 | display: flex; 10 | 11 | align-items: center; 12 | justify-content: center; 13 | height: 100vh; 14 | 15 | background-color: #eeee; 16 | } 17 | 18 | .container { 19 | background-color: #fff; 20 | padding: 2rem; 21 | border-radius: 1rem; 22 | text-align: center; 23 | border: 0.1rem solid black; 24 | } 25 | .container h1 { 26 | margin-bottom: 1rem; 27 | } 28 | 29 | .container span { 30 | display: block; 31 | color: orangered; 32 | margin-bottom: 1rem; 33 | font-size: 8rem; 34 | } 35 | 36 | .container button { 37 | outline: none; 38 | border: none; 39 | padding: 0.5rem 1rem; 40 | font-size: 1.5rem; 41 | border-radius: 1rem; 42 | background-color: black; 43 | color: white; 44 | cursor: pointer; 45 | transition: background-color 0.3s ease; 46 | } 47 | 48 | .container button:hover { 49 | background-color: gray; 50 | } -------------------------------------------------------------------------------- /18randomEmojiGenerator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Random Emoji Generator 8 | 9 | 10 | 11 |
12 |

Random EMOJI Generator

13 | 14 | 0 15 | 16 | 19 |
20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /18randomEmojiGenerator/script.js: -------------------------------------------------------------------------------- 1 | const emojiSpan = document.getElementById("emoji"); 2 | const generatorBtn = document.getElementById("generatorBtn"); 3 | 4 | const emojis = [ 5 | "😊", 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 | "🍜", 58 | "🍝", 59 | "🍧", 60 | "🍫", 61 | "🍿", 62 | "🍰", 63 | "🍪", 64 | "🍬", 65 | "🍮", 66 | "🍯", 67 | "🍶", 68 | "🍵", 69 | "🍹", 70 | "🍸", 71 | "🍺", 72 | "🍷", 73 | "🥂", 74 | "🥤", 75 | "🍼", 76 | "🥛", 77 | "🍴", 78 | "🍽️", 79 | "🎂", 80 | "🍾", 81 | "🧁", 82 | "🍨", 83 | "🍻", 84 | "🍶", 85 | "🌺", 86 | "💐", 87 | "🌹", 88 | "🌷", 89 | "🌻", 90 | "🌼", 91 | "🌸", 92 | "🌈", 93 | "🌟", 94 | "⭐️", 95 | "✨", 96 | "🎈", 97 | "🎉", 98 | "🎀", 99 | "🎁", 100 | "🧸", 101 | "🎲", 102 | "🎳", 103 | "🎮", 104 | "🎵", 105 | "🎶", 106 | "🎤", 107 | "🎧", 108 | "🎼", 109 | "🎺", 110 | "🎷", 111 | "🎸", 112 | ]; 113 | 114 | const randomEmojiGenerator = () => { 115 | const emoji = emojis[Math.floor(Math.random() * emojis.length)]; 116 | 117 | console.log(emoji); 118 | 119 | emojiSpan.textContent = emoji; 120 | }; 121 | 122 | randomEmojiGenerator(); 123 | -------------------------------------------------------------------------------- /18randomEmojiGenerator/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: sans-serif; 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | body { 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | height: 100vh; 13 | background-color: #eeee; 14 | } 15 | 16 | .container { 17 | background-color: #fff; 18 | padding: 2rem; 19 | border-radius: 1rem; 20 | text-align: center; 21 | border: 0.1rem solid black; 22 | } 23 | 24 | .container h1 { 25 | margin-bottom: 1rem; 26 | } 27 | 28 | .container span { 29 | display: block; 30 | margin-bottom: 1rem; 31 | font-size: 8rem; 32 | } 33 | 34 | #emoji { 35 | text-shadow: none; 36 | } 37 | .container button { 38 | outline: none; 39 | border: none; 40 | padding: 0.5rem 1rem; 41 | font-size: 1.5rem; 42 | border-radius: 1rem; 43 | background-color: black; 44 | color: white; 45 | cursor: pointer; 46 | transition: background-color 0.3s ease; 47 | } 48 | 49 | .container button:hover { 50 | background-color: gray; 51 | } 52 | -------------------------------------------------------------------------------- /19toDoList/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Todo List 8 | 9 | 10 | 11 |
12 |

Task List 2021

13 |
14 | 19 | 23 |
24 |
25 |
26 |
27 |

Tasks

28 | 29 |
30 | 31 | 44 | 45 |
46 |
47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /19toDoList/script.js: -------------------------------------------------------------------------------- 1 | window.addEventListener("load", () => { 2 | const form = document.querySelector("#new-task-form"); 3 | const input = document.querySelector("#new-task-input"); 4 | const list_el = document.querySelector("#tasks"); 5 | 6 | form.addEventListener("submit", (e) => { 7 | e.preventDefault(); 8 | 9 | const task = input.value; 10 | 11 | const task_el = document.createElement("div"); 12 | task_el.classList.add("task"); 13 | 14 | const task_content_el = document.createElement("div"); 15 | task_content_el.classList.add("content"); 16 | 17 | task_el.appendChild(task_content_el); 18 | 19 | const task_input_el = document.createElement("input"); 20 | task_input_el.classList.add("text"); 21 | task_input_el.type = "text"; 22 | task_input_el.value = task; 23 | task_input_el.setAttribute("readonly", "readonly"); 24 | 25 | task_content_el.appendChild(task_input_el); 26 | 27 | const task_actions_el = document.createElement("div"); 28 | task_actions_el.classList.add("actions"); 29 | 30 | const task_edit_el = document.createElement("button"); 31 | task_edit_el.classList.add("edit"); 32 | task_edit_el.innerText = "Edit"; 33 | 34 | const task_delete_el = document.createElement("button"); 35 | task_delete_el.classList.add("delete"); 36 | task_delete_el.innerText = "Delete"; 37 | 38 | task_actions_el.appendChild(task_edit_el); 39 | task_actions_el.appendChild(task_delete_el); 40 | 41 | task_el.appendChild(task_actions_el); 42 | 43 | list_el.appendChild(task_el); 44 | 45 | input.value = ""; 46 | 47 | task_edit_el.addEventListener("click", (e) => { 48 | if (task_edit_el.innerText.toLowerCase() == "edit") { 49 | task_edit_el.innerText = "Save"; 50 | task_input_el.removeAttribute("readonly"); 51 | task_input_el.focus(); 52 | } else { 53 | task_edit_el.innerText = "Edit"; 54 | task_input_el.setAttribute("readonly", "readonly"); 55 | } 56 | }); 57 | 58 | task_delete_el.addEventListener("click", (e) => { 59 | list_el.removeChild(task_el); 60 | }); 61 | }); 62 | }); 63 | -------------------------------------------------------------------------------- /19toDoList/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --dark: #374154; 3 | --darker: #1f2937; 4 | --darkest: #111827; 5 | --grey: #6b7280; 6 | --light: #eee; 7 | --pink: #ec4899; 8 | --purple: #8b5cf6; 9 | } 10 | 11 | * { 12 | box-sizing: border-box; 13 | margin: 0; 14 | font-family: sans-serif; 15 | } 16 | 17 | body { 18 | display: flex; 19 | flex-direction: column; 20 | min-height: 100vh; 21 | background: var(--dark); 22 | color: var(--light); 23 | } 24 | 25 | header { 26 | padding: 2rem 1rem; 27 | max-width: 800px; 28 | width: 100%; 29 | margin: 0 auto; 30 | } 31 | 32 | header h1 { 33 | font-size: 2.5rem; 34 | font-weight: 300; 35 | color: var(--grey); 36 | margin-bottom: 1rem; 37 | } 38 | 39 | #new-task-form { 40 | display: flex; 41 | } 42 | 43 | input, 44 | button { 45 | appearance: none; 46 | border: none; 47 | outline: none; 48 | background: none; 49 | } 50 | 51 | #new-task-input { 52 | flex: 1 1 0%; 53 | background-color: var(--darker); 54 | padding: 1rem; 55 | border-radius: 1rem; 56 | margin-right: 1rem; 57 | color: var(--light); 58 | font-size: 1.25rem; 59 | } 60 | 61 | #new-task-input::placeholder { 62 | color: var(--grey); 63 | } 64 | 65 | #new-task-submit { 66 | color: var(--pink); 67 | font-size: 1.25rem; 68 | font-weight: 700; 69 | background-image: linear-gradient(to right, var(--pink), var(--purple)); 70 | -webkit-background-clip: text; 71 | -webkit-text-fill-color: transparent; 72 | cursor: pointer; 73 | transition: 0.4s; 74 | } 75 | 76 | #new-task-submit:hover { 77 | opacity: 0.8; 78 | } 79 | 80 | #new-task-submit:active { 81 | opacity: 0.6; 82 | } 83 | 84 | main { 85 | flex: 1 1 0%; 86 | padding: 2rem 1rem; 87 | max-width: 800px; 88 | width: 100%; 89 | margin: 0 auto; 90 | } 91 | 92 | .task-list { 93 | padding: 1rem; 94 | } 95 | 96 | .task-list h2 { 97 | font-size: 1.5rem; 98 | font-weight: 300; 99 | color: var(--grey); 100 | margin-bottom: 1rem; 101 | } 102 | 103 | #tasks .task { 104 | display: flex; 105 | justify-content: space-between; 106 | background-color: var(--darkest); 107 | padding: 1rem; 108 | border-radius: 1rem; 109 | margin-bottom: 1rem; 110 | } 111 | 112 | #tasks .task .content .text { 113 | color: #fff; 114 | font-size: 1.125rem; 115 | width: 100%; 116 | display: block; 117 | transition: 0.04s; 118 | } 119 | 120 | #tasks .task .content .text:not(:read-only) { 121 | color: var(--pink); 122 | } 123 | 124 | #tasks .task .actions { 125 | display: flex; 126 | margin: 0 -0.5rem; 127 | } 128 | 129 | .task .actions button { 130 | cursor: pointer; 131 | margin: 0 0.5rem; 132 | font-size: 1.125rem; 133 | font-weight: 700; 134 | text-transform: uppercase; 135 | transition: 0.04s; 136 | } 137 | 138 | .task .actions button:hover { 139 | opacity: 0.8; 140 | } 141 | 142 | .task .actions button:active { 143 | opacity: 0.6; 144 | } 145 | 146 | .task .actions .edit { 147 | background-image: linear-gradient(to right, var(--pink), var(--purple)); 148 | -webkit-background-clip: text; 149 | -webkit-text-fill-color: transparent; 150 | } 151 | 152 | .task .actions .delete { 153 | color: crimson; 154 | } 155 | -------------------------------------------------------------------------------- /1Bulb On&Off/bulbOff.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devikumavath/27-frontend-project/cc6c176f83643dae1ae85f929a08688027f7b4be/1Bulb On&Off/bulbOff.jpg -------------------------------------------------------------------------------- /1Bulb On&Off/bulbOn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devikumavath/27-frontend-project/cc6c176f83643dae1ae85f929a08688027f7b4be/1Bulb On&Off/bulbOn.jpg -------------------------------------------------------------------------------- /1Bulb On&Off/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | BULB ON OFF IN JAVASCRIPT 8 | 42 | 43 | 44 |

bulb on/off

45 | 46 | 47 | 48 | 49 | 50 | 51 | off bulb 52 | 53 | 54 | 55 | 56 | 57 | 58 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /20randomColorGenerator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Random Color Generator 🎨 8 | 9 | 10 | 11 |
12 |
13 |
14 | #f77754 15 | 16 |
17 |
18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /20randomColorGenerator/script.js: -------------------------------------------------------------------------------- 1 | const container = document.querySelector(".container"); 2 | const colorCard = document.querySelector(".color-card"); 3 | const btn = document.querySelector("button"); 4 | const hex = document.querySelector("span"); 5 | 6 | function getNewColor() { 7 | const symbols = "0123456789ABCDEF"; 8 | 9 | let color = "#"; 10 | 11 | for (let i = 0; i < 6; i++) { 12 | color = color + symbols[Math.floor(Math.random() * 16)]; 13 | } 14 | document.body.style.background = color; 15 | colorCard.style.background = color; 16 | hex.innerHTML = color; 17 | } 18 | 19 | btn.addEventListener("click", getNewColor); 20 | 21 | 22 | -------------------------------------------------------------------------------- /20randomColorGenerator/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | min-height: 100vh; 6 | background-color: #f77754; 7 | } 8 | 9 | .container { 10 | height: 320px; 11 | width: 50%; 12 | padding: 20px; 13 | position: relative; 14 | box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; 15 | border-radius: 10px; 16 | background-color: #fff; 17 | } 18 | 19 | .color-card { 20 | background-color: #f77754; 21 | position: absolute; 22 | height: 280px; 23 | width: 280px; 24 | top: 40px; 25 | left: -50px; 26 | box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, 27 | rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, 28 | rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; 29 | border-radius: 30px 0px 30px 30px; 30 | } 31 | 32 | .content { 33 | display: flex; 34 | justify-content: center; 35 | align-items: center; 36 | flex-direction: column; 37 | height: 300px; 38 | margin-left: 0; 39 | position: relative; 40 | } 41 | 42 | #span { 43 | display: block; 44 | color: #fff; 45 | font-size: 40px; 46 | margin: 40px; 47 | text-transform: uppercase; 48 | } 49 | 50 | #button { 51 | background-color: transparent; 52 | border: 1px solid #fff; 53 | padding: 12px 20px; 54 | cursor: pointer; 55 | color: #fff; 56 | font-size: 22px; 57 | position: absolute; 58 | bottom: 20px; 59 | right: 20px; 60 | } 61 | 62 | #hex { 63 | font-size: 22px; 64 | margin-bottom: 22px; 65 | } 66 | -------------------------------------------------------------------------------- /21surveyForm/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | YouTube Ads Survey 6 | 7 | 8 | 9 | 10 |
11 |

YouTube Ads Survey

12 |
13 |
14 | 15 | 16 |
17 |
18 | 19 | 20 |
21 |
22 | 23 | 29 |
30 |
31 | 32 | 39 |
40 |
41 | 42 | 55 |
56 | 57 |
58 |
59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /21surveyForm/script.js: -------------------------------------------------------------------------------- 1 | document 2 | .getElementById("surveyForm") 3 | .addEventListener("submit", function (event) { 4 | event.preventDefault(); 5 | 6 | var name = document.getElementById("name").value; 7 | var age = document.getElementById("age").value; 8 | var gender = document.getElementById("gender").value; 9 | var frequency = document.getElementById("frequency").value; 10 | var ads = document.getElementById("ads").value; 11 | 12 | // Add sparkle animation 13 | var sparkle = document.createElement("div"); 14 | sparkle.classList.add("sparkle-animation"); 15 | document.body.appendChild(sparkle); 16 | 17 | // Remove sparkle after animation ends 18 | sparkle.addEventListener("animationend", function () { 19 | sparkle.remove(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /21surveyForm/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, sans-serif; 3 | background-color: #f2f2f2; 4 | } 5 | 6 | .container { 7 | max-width: 400px; 8 | margin: 0 auto; 9 | padding: 20px; 10 | background-color: #fff; 11 | border-radius: 5px; 12 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 13 | } 14 | 15 | h2 { 16 | text-align: center; 17 | color: #333; 18 | } 19 | 20 | .form-group { 21 | margin-bottom: 15px; 22 | } 23 | 24 | .form-group label { 25 | display: block; 26 | margin-bottom: 5px; 27 | font-weight: bold; 28 | color: #555; 29 | } 30 | 31 | .form-group input[type="text"], 32 | .form-group input[type="number"], 33 | .form-group select, 34 | .form-group textarea { 35 | width: 100%; 36 | padding: 8px; 37 | border-radius: 5px; 38 | border: 1px solid #ccc; 39 | transition: border-color 0.3s ease; 40 | } 41 | 42 | .form-group input[type="text"]:focus, 43 | .form-group input[type="number"]:focus, 44 | .form-group select:focus, 45 | .form-group textarea:focus { 46 | outline: none; 47 | border-color: #c4302b; 48 | } 49 | 50 | .submit-btn { 51 | display: block; 52 | width: 100%; 53 | padding: 10px; 54 | margin-top: 20px; 55 | background-color: #c4302b; 56 | color: #fff; 57 | border: none; 58 | border-radius: 5px; 59 | cursor: pointer; 60 | transition: background-color 0.3s ease; 61 | } 62 | 63 | .submit-btn:hover { 64 | background-color: #962820; 65 | } 66 | 67 | .sparkle-animation { 68 | position: fixed; 69 | top: 50%; 70 | left: 50%; 71 | width: 50px; 72 | height: 50px; 73 | background: linear-gradient( 74 | -45deg, 75 | rgba(255, 255, 255, 0.8), 76 | rgba(255, 255, 255, 0) 77 | ); 78 | transform: translate(-50%, -50%); 79 | animation: sparkle 1s ease forwards; 80 | z-index: 9999; 81 | pointer-events: none; 82 | } 83 | 84 | @keyframes sparkle { 85 | 0% { 86 | transform: translate(-50%, -50%) scale(0); 87 | opacity: 1; 88 | } 89 | 100% { 90 | transform: translate(-50%, -50%) scale(2); 91 | opacity: 0; 92 | } 93 | } 94 | -------------------------------------------------------------------------------- /22loginForm/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devikumavath/27-frontend-project/cc6c176f83643dae1ae85f929a08688027f7b4be/22loginForm/background.jpg -------------------------------------------------------------------------------- /22loginForm/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Login and Registration 6 | 7 | 8 | 9 |
10 | 11 | 18 |
19 |
20 | 21 | 22 | 23 | 51 | 52 |
53 |

Registration

54 |
55 |
56 | 57 | 58 | 59 | 60 | 61 |
62 |
63 | 64 | 65 | 66 | 67 | 68 |
69 |
70 | 71 | 72 | 73 | 74 | 75 |
76 |
77 | 79 |
80 | 81 | 84 |
85 |
86 |
87 | 88 | 89 | 90 | 91 | 92 | -------------------------------------------------------------------------------- /22loginForm/script.js: -------------------------------------------------------------------------------- 1 | const wrapper = document.querySelector('.wrapper'); 2 | const loginLink = document.querySelector('.login-link'); 3 | const registerLink = document.querySelector('.register-link'); 4 | const bthPopup = document.querySelector('.bthLogin-popup'); 5 | const iconClose = document.querySelector('.icon-close'); 6 | 7 | registerLink.addEventListener('click', () => wrapper.classList.add('active')); 8 | loginLink.addEventListener('click', () => wrapper.classList.remove('active')); 9 | bthPopup.addEventListener('click', () => wrapper.classList.add('active-popup')); 10 | iconClose.addEventListener('click', () => wrapper.classList.remove('active-popup')); 11 | -------------------------------------------------------------------------------- /22loginForm/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: "Poppins", sans-serif; 8 | } 9 | 10 | body { 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | min-height: 100vh; 15 | background-size: cover; 16 | background: url("background.jpg") no-repeat center; 17 | } 18 | 19 | header { 20 | position: fixed; 21 | top: 0; 22 | left: 0; 23 | width: 100%; 24 | padding: 20px 100px; 25 | display: flex; 26 | justify-content: space-between; 27 | align-items: center; 28 | z-index: 99; 29 | } 30 | 31 | .logo { 32 | font-size: 2em; 33 | color: #ffffff; 34 | user-select: none; 35 | } 36 | 37 | .navigation a { 38 | position: relative; 39 | font-size: 1.1em; 40 | color: #ffffff; 41 | text-decoration: none; 42 | font-weight: 500; 43 | margin-left: 40px; 44 | } 45 | 46 | .navigation a::after { 47 | content: ""; 48 | position: absolute; 49 | left: 0; 50 | bottom: -6px; 51 | width: 100%; 52 | height: 3px; 53 | background: #ffffff; 54 | border-radius: 5px; 55 | transform-origin: right; 56 | transform: scaleX(0); 57 | transition: transform 0.5s; 58 | } 59 | 60 | .navigation a:hover::after { 61 | transform-origin: left; 62 | transform: scaleX(1); 63 | } 64 | 65 | .navigation .bthLogin-popup { 66 | width: 130px; 67 | height: 50px; 68 | background: transparent; 69 | border: 2px solid #ffffff; 70 | outline: none; 71 | border-radius: 6px; 72 | cursor: pointer; 73 | font-size: 1.1em; 74 | color: #ffffff; 75 | font-weight: 500; 76 | margin-left: 40px; 77 | transition: 0.5s; 78 | } 79 | 80 | .navigation .bthLogin-popup:hover { 81 | background: #ffffff; 82 | color: #162938; 83 | } 84 | 85 | .wrapper { 86 | position: relative; 87 | width: 400px; 88 | height: 440px; 89 | background: transparent; 90 | border: 2px solid rgba(255, 255, 255, 0.5); 91 | border-radius: 20px; 92 | backdrop-filter: blur(20px); 93 | box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); 94 | display: flex; 95 | justify-content: center; 96 | align-items: center; 97 | overflow: hidden; 98 | transform: scale(0); 99 | transition: transform 0.5s ease, height 0.2s ease; 100 | } 101 | 102 | .wrapper.active-popup { 103 | transform: scale(1); 104 | } 105 | 106 | .wrapper.active { 107 | height: 520px; 108 | } 109 | 110 | .wrapper .form-box { 111 | width: 100%; 112 | padding: 40px; 113 | } 114 | 115 | .wrapper .form-box.login { 116 | transition: transfrom 0.18s ease; 117 | transform: translateX(0); 118 | } 119 | 120 | .wrapper.active .form-box.login { 121 | transition: none; 122 | transform: translateX(-400px); 123 | } 124 | 125 | .wrapper .form-box.register { 126 | position: absolute; 127 | transition: none; 128 | transform: translateX(400px); 129 | } 130 | 131 | .wrapper.active .form-box.register { 132 | transition: transfrom 0.18s ease; 133 | transform: translateX(0); 134 | } 135 | 136 | .wrapper .icon-close { 137 | position: absolute; 138 | top: 0; 139 | right: 0; 140 | width: 45px; 141 | height: 45px; 142 | background: #162938; 143 | font-size: 2em; 144 | color: #ffffff; 145 | display: flex; 146 | justify-content: center; 147 | align-items: center; 148 | border-bottom-left-radius: 20px; 149 | cursor: pointer; 150 | z-index: 1; 151 | } 152 | 153 | .form-box h2 { 154 | font-size: 2em; 155 | color: #162938; 156 | text-align: center; 157 | } 158 | 159 | .input-box { 160 | position: relative; 161 | width: 100%; 162 | height: 50px; 163 | border-bottom: 2px solid #162938; 164 | margin: 30px 0; 165 | } 166 | 167 | .input-box label { 168 | position: absolute; 169 | top: 50%; 170 | left: 5px; 171 | transform: translateY(-50%); 172 | font-size: 1em; 173 | color: #162938; 174 | font-weight: 500; 175 | pointer-events: none; 176 | transition: 0.5s; 177 | } 178 | 179 | .input-box input:focus ~ label, 180 | .input-box input:valid ~ label { 181 | top: -5px; 182 | } 183 | 184 | .input-box input { 185 | width: 100%; 186 | height: 100%; 187 | background: transparent; 188 | border: none; 189 | outline: none; 190 | font-size: 1em; 191 | color: #162938; 192 | font-weight: 600; 193 | padding: 0 35px 0 5px; 194 | } 195 | 196 | .input-box .icon { 197 | position: absolute; 198 | right: 8px; 199 | font-size: 1.2em; 200 | color: #162938; 201 | line-height: 57px; 202 | } 203 | 204 | .remember-forgot { 205 | font-size: 0.9em; 206 | color: #162938; 207 | font-weight: 500; 208 | margin: -15px 0 15px; 209 | display: flex; 210 | justify-content: space-between; 211 | } 212 | 213 | .remember-forgot label input { 214 | accent-color: #162938; 215 | margin-right: 3px; 216 | } 217 | 218 | .remember-forgot a { 219 | color: #162938; 220 | text-decoration: none; 221 | } 222 | 223 | .remember-forgot a:hover { 224 | text-decoration: underline; 225 | } 226 | 227 | .bth { 228 | width: 100%; 229 | height: 45px; 230 | background: #162938; 231 | border: none; 232 | outline: none; 233 | border-radius: 6px; 234 | cursor: pointer; 235 | font-size: 1em; 236 | color: #ffffff; 237 | font-weight: 500; 238 | } 239 | 240 | .login-register { 241 | font-size: 0.9em; 242 | color: #162938; 243 | text-align: center; 244 | font-weight: 500; 245 | margin: 25px 0 10px; 246 | } 247 | 248 | .login-register p a { 249 | color: #162938; 250 | text-decoration: none; 251 | font-weight: 600; 252 | } 253 | 254 | .login-register p a:hover { 255 | text-decoration: underline; 256 | } 257 | -------------------------------------------------------------------------------- /23snakeWaterGunGame/gun.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devikumavath/27-frontend-project/cc6c176f83643dae1ae85f929a08688027f7b4be/23snakeWaterGunGame/gun.mp3 -------------------------------------------------------------------------------- /23snakeWaterGunGame/gun.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devikumavath/27-frontend-project/cc6c176f83643dae1ae85f929a08688027f7b4be/23snakeWaterGunGame/gun.png -------------------------------------------------------------------------------- /23snakeWaterGunGame/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Snake Water Gun Game 5 | 6 | 7 | 8 |
9 |

Snake Water Gun Game

10 |
11 |
12 |
13 | Snake 14 | Snake 15 |
16 |
17 | Water 18 | Water 19 |
20 |
21 | Gun 22 | Gun 23 |
24 |
25 |
26 |
27 |
28 | 29 | 30 | 31 |
32 |
33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /23snakeWaterGunGame/script.js: -------------------------------------------------------------------------------- 1 | function play(userChoice) { 2 | const options = ["snake", "water", "gun"]; 3 | const computerChoice = options[Math.floor(Math.random() * options.length)]; 4 | 5 | const snakeSound = document.getElementById("snake-sound"); 6 | const waterSound = document.getElementById("water-sound"); 7 | const gunSound = document.getElementById("gun-sound"); 8 | 9 | snakeSound.pause(); 10 | waterSound.pause(); 11 | gunSound.pause(); 12 | 13 | if (userChoice === "snake") { 14 | snakeSound.currentTime = 0; 15 | snakeSound.play(); 16 | } else if (userChoice === "water") { 17 | waterSound.currentTime = 0; 18 | waterSound.play(); 19 | } else if (userChoice === "gun") { 20 | gunSound.currentTime = 0; 21 | gunSound.play(); 22 | } 23 | 24 | const result = document.getElementById("result"); 25 | const userChoiceText = document.getElementById("user-choice"); 26 | const machineChoiceText = document.getElementById("machine-choice"); 27 | 28 | userChoiceText.textContent = `You chose: ${userChoice}`; 29 | machineChoiceText.textContent = `Machine chose: ${computerChoice}`; 30 | 31 | if (userChoice === computerChoice) { 32 | result.textContent = "It's a tie!"; 33 | } else if ( 34 | (userChoice === "snake" && computerChoice === "water") || 35 | (userChoice === "water" && computerChoice === "gun") || 36 | (userChoice === "gun" && computerChoice === "snake") 37 | ) { 38 | result.textContent = "You win!"; 39 | } else { 40 | result.textContent = "You lose!"; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /23snakeWaterGunGame/snake.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devikumavath/27-frontend-project/cc6c176f83643dae1ae85f929a08688027f7b4be/23snakeWaterGunGame/snake.mp3 -------------------------------------------------------------------------------- /23snakeWaterGunGame/snake.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devikumavath/27-frontend-project/cc6c176f83643dae1ae85f929a08688027f7b4be/23snakeWaterGunGame/snake.png -------------------------------------------------------------------------------- /23snakeWaterGunGame/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, sans-serif; 3 | background-color: #f2f2f2; 4 | margin: 0; 5 | padding: 0; 6 | } 7 | 8 | .container { 9 | display: flex; 10 | flex-direction: column; 11 | justify-content: center; 12 | align-items: center; 13 | height: 100vh; 14 | box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); 15 | } 16 | 17 | h1 { 18 | margin: 20px 0; 19 | } 20 | 21 | .game-container { 22 | display: flex; 23 | flex-direction: column; 24 | align-items: center; 25 | padding: 20px; 26 | background-color: #fff; 27 | border-radius: 10px; 28 | } 29 | 30 | .options { 31 | display: flex; 32 | justify-content: space-between; 33 | margin-bottom: 20px; 34 | } 35 | 36 | .option { 37 | display: flex; 38 | flex-direction: column; 39 | align-items: center; 40 | cursor: pointer; 41 | } 42 | 43 | .option img { 44 | width: 100px; 45 | height: 100px; 46 | object-fit: cover; 47 | opacity: 0.8; 48 | background-color: transparent; 49 | } 50 | 51 | #result { 52 | font-size: 24px; 53 | font-weight: bold; 54 | } 55 | 56 | .choices { 57 | display: flex; 58 | justify-content: center; 59 | margin-top: 20px; 60 | } 61 | 62 | .choices > div { 63 | margin: 10px; 64 | font-weight: bold; 65 | } 66 | -------------------------------------------------------------------------------- /23snakeWaterGunGame/water.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devikumavath/27-frontend-project/cc6c176f83643dae1ae85f929a08688027f7b4be/23snakeWaterGunGame/water.mp3 -------------------------------------------------------------------------------- /23snakeWaterGunGame/water.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devikumavath/27-frontend-project/cc6c176f83643dae1ae85f929a08688027f7b4be/23snakeWaterGunGame/water.png -------------------------------------------------------------------------------- /24tellMeAJoke/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 |

Tell me a Joke

15 | two child laughing 16 |

17 | 18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /24tellMeAJoke/laugh.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devikumavath/27-frontend-project/cc6c176f83643dae1ae85f929a08688027f7b4be/24tellMeAJoke/laugh.png -------------------------------------------------------------------------------- /24tellMeAJoke/script.js: -------------------------------------------------------------------------------- 1 | const get = document.getElementById("get"); 2 | const btn = document.getElementById("btn"); 3 | 4 | btn.addEventListener("click", async () => { 5 | const getJoke = await fetch("https://icanhazdadjoke.com/", { 6 | headers: { 7 | accept: "application/json", 8 | }, 9 | }); 10 | 11 | const data = await getJoke.json(); 12 | const joke = data.joke; 13 | 14 | get.innerText = joke; 15 | 16 | console.log(joke); 17 | }); 18 | -------------------------------------------------------------------------------- /24tellMeAJoke/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: sans-serif; 3 | } 4 | 5 | body { 6 | display: flex; 7 | align-items: center; 8 | justify-content: center; 9 | } 10 | 11 | .container { 12 | display: flex; 13 | align-items: center; 14 | justify-self: center; 15 | flex-direction: column; 16 | height: 450px; 17 | width: 450px; 18 | border-radius: 3px; 19 | margin-top: 50px; 20 | 21 | background: #1bd496; 22 | border-radius: 16px; 23 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 24 | backdrop-filter: blur(5px); 25 | -webkit-backdrop-filter: blur(5px); 26 | border: 1px solid rgba(255, 255, 255, 0.3); 27 | } 28 | 29 | .container img { 30 | height: 200px; 31 | width: 200px; 32 | border-radius: 50%; 33 | border: 1px solid black; 34 | } 35 | 36 | h3 { 37 | text-align: center; 38 | font-weight: smaller; 39 | } 40 | 41 | #btn { 42 | padding: 5px 100px; 43 | 44 | cursor: pointer; 45 | transition: background-color 0.3s ease; 46 | background-color: #f2f2f2; 47 | border: 1px solid black; 48 | font-weight: bold; 49 | border-radius: 10px; 50 | } 51 | 52 | #btn:hover { 53 | background-color: #e0e0e0; 54 | } 55 | -------------------------------------------------------------------------------- /25passwordGenerator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Password Generator 7 | 8 | 9 | 10 |
11 |

Password Generator

12 |
13 |
14 | 15 | 16 |
17 | 18 |
19 |
20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /25passwordGenerator/script.js: -------------------------------------------------------------------------------- 1 | function generatePassword() { 2 | const length = 12; // Change this to set the password length 3 | const charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; 4 | let password = ""; 5 | for (let i = 0; i < length; i++) { 6 | const randomIndex = Math.floor(Math.random() * charset.length); 7 | password += charset[randomIndex]; 8 | } 9 | document.getElementById("password").value = password; 10 | } 11 | 12 | function copyPassword() { 13 | const passwordInput = document.getElementById("password"); 14 | passwordInput.select(); 15 | passwordInput.setSelectionRange(0, 99999); // For mobile devices 16 | document.execCommand("copy"); 17 | 18 | const copyBtn = document.getElementById("copyBtn"); 19 | copyBtn.innerText = "Copied"; 20 | setTimeout(() => { 21 | copyBtn.innerText = "Copy"; 22 | }, 1500); 23 | } 24 | -------------------------------------------------------------------------------- /25passwordGenerator/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, sans-serif; 3 | display: flex; 4 | justify-content: center; 5 | align-items: center; 6 | height: 100vh; 7 | margin: 0; 8 | background-color: #f1f1f1; 9 | } 10 | 11 | .main-container { 12 | display: flex; 13 | flex-direction: column; 14 | align-items: center; 15 | } 16 | 17 | h1 { 18 | margin-bottom: 20px; 19 | color: #333; 20 | } 21 | 22 | .container { 23 | text-align: center; 24 | background-color: #444; 25 | padding: 20px; 26 | border-radius: 8px; 27 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 28 | } 29 | 30 | .password-box { 31 | display: flex; 32 | justify-content: space-between; 33 | align-items: center; 34 | border: 1px solid #ccc; 35 | padding: 10px; 36 | border-radius: 4px; 37 | margin-bottom: 20px; 38 | } 39 | 40 | input[type="text"] { 41 | flex: 1; 42 | padding: 5px; 43 | border: none; 44 | font-size: 18px; 45 | background-color: transparent; 46 | color: #fff; 47 | } 48 | 49 | button { 50 | padding: 10px 20px; 51 | font-size: 16px; 52 | background-color: #007bff; 53 | color: #fff; 54 | border: none; 55 | border-radius: 4px; 56 | cursor: pointer; 57 | } 58 | 59 | button:hover { 60 | background-color: #0056b3; 61 | } 62 | 63 | button:active { 64 | transform: translateY(2px); 65 | } 66 | -------------------------------------------------------------------------------- /26AlarmClock/clock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devikumavath/27-frontend-project/cc6c176f83643dae1ae85f929a08688027f7b4be/26AlarmClock/clock.png -------------------------------------------------------------------------------- /26AlarmClock/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Alarm Clock in JavaScript | CodingNepal 7 | 8 | 9 | 10 | 11 |
12 | clock 13 |

00:00:00 PM

14 |
15 |
16 | 19 |
20 |
21 | 24 |
25 |
26 | 29 |
30 |
31 | 32 |
33 | 34 | 35 | -------------------------------------------------------------------------------- /26AlarmClock/ringtone.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devikumavath/27-frontend-project/cc6c176f83643dae1ae85f929a08688027f7b4be/26AlarmClock/ringtone.mp3 -------------------------------------------------------------------------------- /26AlarmClock/script.js: -------------------------------------------------------------------------------- 1 | const currentTime = document.querySelector("h1"), 2 | content = document.querySelector(".content"), 3 | selectMenu = document.querySelectorAll("select"), 4 | setAlarmBtn = document.querySelector("button"); 5 | 6 | let alarmTime, isAlarmSet, 7 | ringtone = new Audio("ringtone.mp3"); 8 | 9 | 10 | 11 | 12 | for (let i = 12; i > 0; i--) { 13 | i = i < 10 ? `0${i}` : i; 14 | let option = ``; 15 | selectMenu[0].firstElementChild.insertAdjacentHTML("afterend", option); 16 | } 17 | 18 | for (let i = 59; i >= 0; i--) { 19 | i = i < 10 ? `0${i}` : i; 20 | let option = ``; 21 | selectMenu[1].firstElementChild.insertAdjacentHTML("afterend", option); 22 | } 23 | 24 | for (let i = 2; i > 0; i--) { 25 | let ampm = i == 1 ? "AM" : "PM"; 26 | let option = ``; 27 | selectMenu[2].firstElementChild.insertAdjacentHTML("afterend", option); 28 | } 29 | 30 | setInterval(() => { 31 | let date = new Date(), 32 | h = date.getHours(), 33 | m = date.getMinutes(), 34 | s = date.getSeconds(), 35 | ampm = "AM"; 36 | if(h >= 12) { 37 | h = h - 12; 38 | ampm = "PM"; 39 | } 40 | h = h == 0 ? h = 12 : h; 41 | h = h < 10 ? "0" + h : h; 42 | m = m < 10 ? "0" + m : m; 43 | s = s < 10 ? "0" + s : s; 44 | currentTime.innerText = `${h}:${m}:${s} ${ampm}`; 45 | 46 | if (alarmTime === `${h}:${m} ${ampm}`) { 47 | ringtone.play(); 48 | ringtone.loop = true; 49 | } 50 | }); 51 | 52 | function setAlarm() { 53 | if (isAlarmSet) { 54 | alarmTime = ""; 55 | ringtone.pause(); 56 | content.classList.remove("disable"); 57 | setAlarmBtn.innerText = "Set Alarm"; 58 | return isAlarmSet = false; 59 | } 60 | 61 | let time = `${selectMenu[0].value}:${selectMenu[1].value} ${selectMenu[2].value}`; 62 | if (time.includes("Hour") || time.includes("Minute") || time.includes("AM/PM")) { 63 | return alert("Please, select a valid time to set Alarm!"); 64 | } 65 | alarmTime = time; 66 | isAlarmSet = true; 67 | content.classList.add("disable"); 68 | setAlarmBtn.innerText = "Clear Alarm"; 69 | } 70 | 71 | setAlarmBtn.addEventListener("click", setAlarm); -------------------------------------------------------------------------------- /26AlarmClock/style.css: -------------------------------------------------------------------------------- 1 | /* Import Google font - Poppins */ 2 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); 3 | *{ 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: 'Poppins', sans-serif; 8 | } 9 | body, .wrapper, .content{ 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | } 14 | body{ 15 | padding: 0 10px; 16 | min-height: 100vh; 17 | background: #f278f7; 18 | } 19 | .wrapper{ 20 | width: 440px; 21 | padding: 30px 30px 38px; 22 | background: #fff; 23 | border-radius: 10px; 24 | flex-direction: column; 25 | box-shadow: 0 10px 25px rgba(0,0,0,0.1); 26 | } 27 | .wrapper img{ 28 | max-width: 103px; 29 | } 30 | .wrapper h1{ 31 | font-size: 38px; 32 | font-weight: 500; 33 | margin: 30px 0; 34 | } 35 | .wrapper .content{ 36 | width: 100%; 37 | justify-content: space-between; 38 | } 39 | .content.disable{ 40 | cursor: no-drop; 41 | } 42 | .content .column{ 43 | padding: 0 10px; 44 | border-radius: 5px; 45 | border: 1px solid #bfbfbf; 46 | width: calc(100% / 3 - 5px); 47 | } 48 | .content.disable .column{ 49 | opacity: 0.6; 50 | pointer-events: none; 51 | } 52 | .column select{ 53 | width: 100%; 54 | height: 53px; 55 | border: none; 56 | outline: none; 57 | background: none; 58 | font-size: 19px; 59 | } 60 | .wrapper button{ 61 | width: 100%; 62 | border: none; 63 | outline: none; 64 | color: #fff; 65 | cursor: pointer; 66 | font-size: 20px; 67 | padding: 17px 0; 68 | margin-top: 20px; 69 | border-radius: 5px; 70 | background: purple; 71 | } -------------------------------------------------------------------------------- /27imageSliderShowWithTransitions/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Random Image from Unsplash 7 | 8 | 9 | 10 |
11 |
12 | Random Image 13 |
14 | 15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /27imageSliderShowWithTransitions/script.js: -------------------------------------------------------------------------------- 1 | const accessKey = 'djDZBAElD-4V_QA69nNu_ebNm1gMt2o5McRvF-OjSzQ'; 2 | const apiUrl = `https://api.unsplash.com/photos/random?client_id=${accessKey}&query=nature`; // Change 'nature' to any keyword you want to search for 3 | 4 | function getRandomImage() { 5 | fetch(apiUrl) 6 | .then(response => response.json()) 7 | .then(data => { 8 | const imageSrc = data.urls.regular; 9 | const imageElement = document.getElementById('randomImage'); 10 | imageElement.src = imageSrc; 11 | }) 12 | .catch(error => console.error('Error fetching image:', error)); 13 | } 14 | 15 | document.addEventListener('DOMContentLoaded', getRandomImage); 16 | 17 | const generateButton = document.getElementById('generateButton'); 18 | 19 | generateButton.addEventListener('click', function () { 20 | generateButton.classList.add('clicked'); 21 | setTimeout(() => { 22 | generateButton.classList.remove('clicked'); 23 | }, 500); // Reset the 'clicked' class after 500ms 24 | }); -------------------------------------------------------------------------------- /27imageSliderShowWithTransitions/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | height: 100vh; 8 | background-color: #f0f0f0; 9 | } 10 | 11 | .container { 12 | text-align: center; 13 | } 14 | 15 | .image-container { 16 | width: 600px; 17 | height: 400px; 18 | border: 2px solid #fff; 19 | border-radius: 8px; 20 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 21 | overflow: hidden; 22 | margin-bottom: 10px; 23 | } 24 | 25 | #randomImage { 26 | width: 100%; 27 | height: 100%; 28 | object-fit: cover; 29 | } 30 | 31 | #generateButton { 32 | padding: 12px 20px; 33 | font-size: 16px; 34 | background-color: #007BFF; 35 | color: #fff; 36 | border: none; 37 | border-radius: 4px; 38 | cursor: pointer; 39 | transition: background-color 0.3s ease; 40 | position: relative; 41 | overflow: hidden; 42 | } 43 | 44 | #generateButton.clicked { 45 | animation: clickAnimation 0.5s; 46 | animation-fill-mode: forwards; 47 | } 48 | 49 | #generateButton::before { 50 | content: ''; 51 | position: absolute; 52 | top: 0; 53 | left: 0; 54 | width: 0; 55 | height: 100%; 56 | background-color: rgba(255, 255, 255, 0.2); 57 | transition: width 0.3s ease; 58 | z-index: -1; 59 | } 60 | 61 | #generateButton:hover::before, 62 | #generateButton.clicked::before { 63 | width: 100%; 64 | } 65 | 66 | @keyframes shake { 67 | 0%, 100% { 68 | transform: translateX(0); 69 | } 70 | 50% { 71 | transform: translateX(-5px); 72 | } 73 | } 74 | 75 | @keyframes clickAnimation { 76 | 0% { 77 | transform: scale(1); 78 | } 79 | 50% { 80 | transform: scale(0.8); 81 | } 82 | 100% { 83 | transform: scale(1); 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /2WordCounter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 |
14 |

word and char counter

15 | 16 |

17 | 18 |

19 |

20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /2WordCounter/main.js: -------------------------------------------------------------------------------- 1 | 2 | // this is similar to function 3 | /* function countwords () 4 | { 5 | 6 | } 7 | */ 8 | const countwords = () => { 9 | let numberOfChar = document.getElementById("words").value.length; 10 | let numberOfWord = document.getElementById("words").value; 11 | 12 | numberOfWord = numberOfWord.match(/\w+/g); 13 | numberOfWord = numberOfWord.length; 14 | 15 | document.getElementById("showchar").innerHTML = 16 | "TOTAL CHARACTERS = " + numberOfChar; 17 | alert(numberOfChar); 18 | 19 | document.getElementById("showword").innerHTML = 20 | "TOTAL WORDS = " + numberOfWord; 21 | alert(numberOfWord); 22 | }; 23 | -------------------------------------------------------------------------------- /2WordCounter/style.css: -------------------------------------------------------------------------------- 1 | 2 | * { 3 | padding: 0%; 4 | margin: 0%; 5 | font-family: "Times New Roman", Times, serif; 6 | } 7 | div { 8 | height: 100vh; 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | flex-direction: column; 13 | } 14 | 15 | h1 { 16 | text-transform: capitalize; 17 | margin-bottom: 10px; 18 | border: 2px solid blue; 19 | border-radius: 5px; 20 | padding: 5px; 21 | font-size: 1.5rem; 22 | } 23 | 24 | textarea { 25 | border: 2px solid blue; 26 | border-radius: 10px; 27 | outline: none; 28 | font-size: 1.2rem; 29 | padding: 10px 2px; 30 | margin-bottom: 10px; 31 | /* box-shadow: 0 0 4px 1px red; */ 32 | width: 400px; 33 | height: 200px; 34 | resize: none; 35 | } 36 | 37 | button { 38 | padding: 7px 25px; 39 | background-color: blue; 40 | color: white; 41 | border-radius: 10px; 42 | /* border: 2px solid red; */ 43 | font-size: 1.2rem; 44 | } 45 | button:hover { 46 | background-color: red; 47 | padding: 7px 20px; 48 | cursor: pointer; 49 | } 50 | -------------------------------------------------------------------------------- /3TwoNumbersSum/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /3TwoNumbersSum/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | addition of two numbers 8 | 14 | 15 | 16 |
17 | number 1: 18 |

19 | number 2: 20 |

21 | 22 | 23 |

24 | total : 25 | 26 |
27 | 28 | 44 | 45 | -------------------------------------------------------------------------------- /4ThemeToggle/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | drak/light mode 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /4ThemeToggle/logic.js: -------------------------------------------------------------------------------- 1 | //js 2 | const checkbox = document.getElementById('checkbox'); 3 | 4 | checkbox.addEventListener('change' , () => { 5 | 6 | 7 | document.body.classList.toggle('dark'); 8 | 9 | }); -------------------------------------------------------------------------------- /4ThemeToggle/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); 2 | * 3 | { 4 | box-sizing: border-box; 5 | } 6 | 7 | body{ 8 | 9 | display: flex; 10 | justify-content:center; 11 | align-items: center; 12 | height: 100vh; 13 | margin: 0%; 14 | flex-direction: column; 15 | transition: background 0.2s linear; 16 | } 17 | 18 | body.dark 19 | { 20 | background-color: #292c35; 21 | } 22 | 23 | body.dark h1{ 24 | color: #fff; 25 | } 26 | 27 | .label 28 | { 29 | 30 | background-color: #111; 31 | display: flex; 32 | align-items: center; 33 | justify-content:space-between; 34 | border-radius: 50px; 35 | position: relative; 36 | width: 50px; 37 | height: 26px; 38 | padding: 5px; 39 | transform: scale(1.5); 40 | 41 | } 42 | .fa-moon 43 | { 44 | color: #f1c40f; 45 | } 46 | 47 | .fa-sun 48 | { 49 | color: #f39c12; 50 | } 51 | 52 | .ball 53 | { 54 | background-color: #fff; 55 | position: absolute; 56 | border-radius: 50%; 57 | height: 22px; 58 | width: 22px; 59 | top: 2px; 60 | left: 2px; 61 | transition: transform 0.2s linear; 62 | 63 | } 64 | 65 | .checkbox 66 | { 67 | opacity: 0; 68 | position: absolute; 69 | } 70 | 71 | .checkbox:checked + .label .ball 72 | { 73 | transform: translateX(24px); 74 | } 75 | 76 | -------------------------------------------------------------------------------- /5ArithematicCalcuator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | calculator 9 | 10 | 11 | enter number 1:
12 |
13 | 14 | enter number 2: 15 | 16 |
17 |
18 | 19 | 26 | 27 | 28 | 29 | 30 | 31 |
32 |
33 | 34 | result : 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /5ArithematicCalcuator/logic.js: -------------------------------------------------------------------------------- 1 | 2 | // console.log("hii"); 3 | function calculator() { 4 | const val1 = parseInt(document.getElementById("val1").value); 5 | 6 | const val2 = parseInt(document.getElementById("val2").value); 7 | 8 | const symbol = document.getElementById("op").value; 9 | 10 | if (symbol === "+") { 11 | document.getElementById("result").value = val1 + val2; 12 | } 13 | 14 | if (symbol === "-") { 15 | document.getElementById("result").value = val1 - val2; 16 | } 17 | 18 | if (symbol === "*") { 19 | document.getElementById("result").value = val1 * val2; 20 | } 21 | 22 | if (symbol === "/") { 23 | document.getElementById("result").value = val1 / val2; 24 | } 25 | 26 | if (symbol === "%") { 27 | document.getElementById("result").value = val1 % val2; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /5ArithematicCalcuator/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | background-color: bisque; 3 | 4 | } 5 | 6 | #val1 , body , #val2 , #result { 7 | text-transform: capitalize; 8 | font-size: large; 9 | 10 | } 11 | 12 | #op { 13 | color: blue; 14 | 15 | } 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /6ProcessBar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | process Steps 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 | 16 |
1
17 |
2
18 |
3
19 |
4
20 |
21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /6ProcessBar/logic.js: -------------------------------------------------------------------------------- 1 | const progress = document.getElementById("progress"); 2 | const prev = document.getElementById("prev"); 3 | const next = document.getElementById("next"); 4 | const circles = document.querySelectorAll(".circle"); 5 | 6 | var CurrentActive = 1; 7 | next.addEventListener("click", () => { 8 | CurrentActive++; 9 | if (CurrentActive > circles.length) { 10 | CurrentActive = circles.length; 11 | } 12 | update(); 13 | }); 14 | 15 | prev.addEventListener("click", () => { 16 | CurrentActive--; 17 | if (CurrentActive < 1) { 18 | CurrentActive = 1; 19 | } 20 | 21 | update(); 22 | }); 23 | function update() { 24 | // upate active class in circle 25 | circles.forEach((circles, index) => { 26 | if (index < CurrentActive) { 27 | circles.classList.add("active"); 28 | } else { 29 | circles.classList.remove("active"); 30 | } 31 | }); 32 | 33 | // update the progress bar 34 | var activeCircles = document.querySelectorAll(".active"); 35 | progress.style.width = 36 | ((activeCircles.length - 1) / (circles.length - 1)) * 100 + "%"; 37 | 38 | // change the button enable and disable satte 39 | if(CurrentActive ==1 ) 40 | { 41 | prev.disabled = true 42 | } 43 | else if(CurrentActive == circles.length){ 44 | next.disabled = true 45 | } 46 | else{ 47 | prev.disabled = false; 48 | next.disabled = false; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /6ProcessBar/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | background-color: rgb(212, 10, 178); 7 | /* font-family: Georgia, 'Times New Roman', Times, serif; */ 8 | font-family: Verdana, Geneva, Tahoma, sans-serif; 9 | margin: 0%; 10 | display: flex; 11 | flex-direction: column; 12 | align-items: center; 13 | justify-content: center; 14 | min-height: 100vh; 15 | overflow: hidden; 16 | } 17 | 18 | .container { 19 | text-align: center; 20 | } 21 | 22 | .progress-container { 23 | display: flex; 24 | max-width: 100%; 25 | width: 350px; 26 | justify-content: space-between; 27 | margin-bottom: 30px; 28 | position: relative; 29 | } 30 | 31 | .progress-container::before { 32 | content: " "; 33 | background-color: #e0e0e0; 34 | position: absolute; 35 | top: 50%; 36 | left: 0; 37 | transform: translateY(-50%); 38 | height: 4px; 39 | width: 100%; 40 | z-index: -1; 41 | transition: 0.4s ease-in; 42 | } 43 | 44 | .progress { 45 | background-color: #3498db; 46 | position: absolute; 47 | top: 50%; 48 | left: 0; 49 | transform: translateY(-50%); 50 | height: 4px; 51 | width: 0%; 52 | z-index: -1; 53 | transition: 0.4s ease-in; 54 | } 55 | 56 | .circle { 57 | background-color: white; 58 | height: 30px; 59 | width: 30px; 60 | border-radius: 50%; 61 | display: flex; 62 | align-items: center; 63 | justify-content: center; 64 | border: 3px solid #e0e0e0; 65 | transition: 0.4s ease; 66 | } 67 | 68 | .circle.active { 69 | border-color: #3498db; 70 | } 71 | 72 | .btn { 73 | /* margin-top: 40px; */ 74 | font-family: inherit; 75 | font-size: 14px; 76 | padding: 10px 30px; 77 | background-color: #3498db; 78 | color: white; 79 | border: none; 80 | border-radius: 6px; 81 | cursor: pointer; 82 | } 83 | 84 | .btn:active { 85 | transform: scale(0.98); 86 | } 87 | 88 | .btn:disabled { 89 | background-color: #e0e0e0; 90 | cursor: not-allowed; 91 | } 92 | -------------------------------------------------------------------------------- /7ExpandingCards/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | expanding cards 8 | 9 | 10 | 11 |
12 | 13 |
14 |

Taj mahel

15 | 16 |
17 | 18 |
24 |

Hawa Mahal

25 |
26 | 27 |
33 |

charminar

34 |
35 | 36 |
42 |

Marine Drive

43 |
44 | 45 |
51 |

Nandi statue

52 | 53 |
54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /7ExpandingCards/logic.js: -------------------------------------------------------------------------------- 1 | const panels = document.querySelectorAll('.panel'); 2 | 3 | panels.forEach(panel => { 4 | panel.addEventListener('click' , () => { 5 | removeActiveClasses(); 6 | panel.classList.add('active'); 7 | } ) 8 | 9 | 10 | } ) 11 | 12 | function removeActiveClasses(){ 13 | panels.forEach(panel => { 14 | panel.classList.remove('active'); 15 | }) 16 | } -------------------------------------------------------------------------------- /7ExpandingCards/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | } 4 | 5 | body{ 6 | font-family: 'Times New Roman', Times, serif; 7 | margin: 0%; 8 | display: flex; 9 | align-items: center; 10 | justify-content: center; 11 | min-height: 100vh; 12 | overflow: hidden; 13 | } 14 | 15 | .container 16 | { 17 | display: flex; 18 | width: 90vw; 19 | 20 | } 21 | 22 | .panel{ 23 | background-size: cover; 24 | background-position: center; 25 | background-repeat: no-repeat; 26 | height:80vh; 27 | border-radius: 50px; 28 | flex: 0.5; 29 | position: relative; 30 | transition:flex 0.7s ease-in; 31 | color: white; 32 | cursor: pointer; 33 | margin: 10px; 34 | } 35 | 36 | .panel h3{ 37 | position: absolute; 38 | bottom: 20px; 39 | left: 20px; 40 | font-size: 25px; 41 | opacity:0; 42 | } 43 | 44 | .panel.active { 45 | flex:5; 46 | } 47 | 48 | .panel.active h3{ 49 | opacity:1; 50 | transition:opacity 0.4s ease-in 0.4s; 51 | 52 | } 53 | @media (max-width:480px) 54 | { 55 | .container{ 56 | width: 100vh; 57 | 58 | } 59 | 60 | .panel:nth-of-type(4) , .panel:nth-of-type(5) { 61 | display: none; 62 | } 63 | } -------------------------------------------------------------------------------- /8Calculator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Title 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 | -------------------------------------------------------------------------------- /8Calculator/script.js: -------------------------------------------------------------------------------- 1 | const display = document.querySelector("#display"); 2 | const buttons = document.querySelectorAll("button"); 3 | 4 | buttons.forEach((item) => { 5 | item.onclick = () => { 6 | if (item.id == "clear") { 7 | display.innerText = ""; 8 | } else if (item.id == "backspace") { 9 | let string = display.innerText.toString(); 10 | display.innerText = string.substr(0, string.length - 1); 11 | } else if (display.innerText != "" && item.id == "equal") { 12 | display.innerText = eval(display.innerText); 13 | } else if (display.innerText == "" && item.id == "equal") { 14 | display.innerText = "Empty!"; 15 | setTimeout(() => (display.innerText = ""), 2000); 16 | } else { 17 | display.innerText += item.id; 18 | } 19 | }; 20 | }); 21 | 22 | const themeToggleBtn = document.querySelector(".theme-toggler"); 23 | const calculator = document.querySelector(".calculator"); 24 | const toggleIcon = document.querySelector(".toggler-icon"); 25 | let isDark = true; 26 | themeToggleBtn.onclick = () => { 27 | calculator.classList.toggle("dark"); 28 | themeToggleBtn.classList.toggle("active"); 29 | isDark = !isDark; 30 | }; 31 | -------------------------------------------------------------------------------- /8Calculator/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | outline: 0; 6 | transition: all 0.5s ease; 7 | } 8 | 9 | body { 10 | font-family: sans-serif; 11 | } 12 | 13 | a { 14 | text-decoration: none; 15 | color: #fff; 16 | } 17 | 18 | body { 19 | background-image: linear-gradient( to bottom right, rgba(79,51,176,1.0),rgba(210,53,165)); 20 | } 21 | 22 | .container { 23 | height: 100vh; 24 | width: 100vw; 25 | display: grid; 26 | place-items: center; 27 | } 28 | 29 | .calculator { 30 | position: relative; 31 | height: auto; 32 | width: auto; 33 | padding: 20px; 34 | border-radius: 10px; 35 | box-shadow: 0 0 30px #000; 36 | } 37 | 38 | .theme-toggler { 39 | position: absolute; 40 | top: 30px; 41 | right: 30px; 42 | color: #fff; 43 | cursor: pointer; 44 | z-index: 1; 45 | } 46 | 47 | .theme-toggler.active { 48 | color: #333; 49 | } 50 | 51 | .theme-toggler.active::before { 52 | background-color: #fff; 53 | } 54 | 55 | .theme-toggler::before { 56 | content: ''; 57 | height: 30px; 58 | width: 30px; 59 | position: absolute; 60 | top: 50%; 61 | transform: translate(-50%, -50%); 62 | border-radius: 50%; 63 | background-color: #333; 64 | z-index: -1; 65 | } 66 | 67 | #display { 68 | margin: 0 10px; 69 | height: 150px; 70 | width: auto; 71 | max-width: 270px; 72 | display: flex; 73 | align-items: flex-end; 74 | justify-content: flex-end; 75 | font-size: 30px; 76 | margin-bottom: 20px; 77 | overflow-x: scroll; 78 | } 79 | 80 | #display::-webkit-scrollbar { 81 | display: block; 82 | height: 3px; 83 | } 84 | 85 | button { 86 | height: 60px; 87 | width: 60px; 88 | border: 0; 89 | border-radius: 30px; 90 | margin: 5px; 91 | font-size: 20px; 92 | cursor: pointer; 93 | transition: all 200ms ease; 94 | } 95 | 96 | button:hover { 97 | transform: scale(1.1); 98 | } 99 | 100 | button#equal { 101 | height: 130px; 102 | } 103 | 104 | /* light theme */ 105 | 106 | .calculator { 107 | background-color: #fff; 108 | } 109 | 110 | .calculator #display { 111 | color: #0a1e23; 112 | } 113 | 114 | .calculator button#clear { 115 | background-color: #ffd5d8; 116 | color: #fc4552; 117 | } 118 | 119 | .calculator button.btn-number { 120 | background-color: #c3eaff; 121 | color: #000000; 122 | } 123 | 124 | .calculator button.btn-operator { 125 | background-color: #ffd0fb; 126 | color: #f967f3; 127 | } 128 | 129 | .calculator button.btn-equal { 130 | background-color: #adf9e7; 131 | color: #000; 132 | } 133 | 134 | /* dark theme */ 135 | 136 | .calculator.dark { 137 | background-color: #071115; 138 | } 139 | 140 | .calculator.dark #display { 141 | color: #f8fafb; 142 | } 143 | 144 | .calculator.dark button#clear { 145 | background-color: #2d191e; 146 | color: #bd3740; 147 | } 148 | 149 | .calculator.dark button.btn-number { 150 | background-color: #1b2f38; 151 | color: #f8fafb; 152 | } 153 | 154 | .calculator.dark button.btn-operator { 155 | background-color: #2e1f39; 156 | color: #aa00a4; 157 | } 158 | 159 | .calculator.dark button.btn-equal { 160 | background-color: #223323; 161 | color: #ffffff; 162 | } 163 | -------------------------------------------------------------------------------- /9.DetectPressedKey/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Detect key pressed 8 | 9 | 10 | 11 |
12 |

press any key

13 |
14 |
15 |
16 |
17 |

key :

18 |

code :

19 |
20 |
21 |
22 | 23 | 38 | 39 | -------------------------------------------------------------------------------- /9.DetectPressedKey/logic.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("keydown" , e =>{ 2 | console.log(e); 3 | 4 | }); 5 | 6 | 7 | //console.log;("hiii") -------------------------------------------------------------------------------- /9.DetectPressedKey/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Mulish&family=Poppins&family=Ubuntu&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: "Poppins", sans-serif; 8 | } 9 | 10 | body { 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | min-height: 100vh; 15 | background: #17a2b8; 16 | } 17 | 18 | .text, 19 | .key-code, 20 | .key-name { 21 | font-size: 45px; 22 | color: #17a2b8; 23 | font-weight: 500; 24 | } 25 | 26 | .text { 27 | font-size: 30px; 28 | text-align: center; 29 | } 30 | 31 | .box.active .text { 32 | display: none; 33 | } 34 | .box { 35 | background: #fff; 36 | width: 290px; 37 | padding: 25px; 38 | border-radius: 15px; 39 | } 40 | 41 | .content, 42 | .key-code, 43 | .details { 44 | display: flex; 45 | align-items: center; 46 | justify-content: center; 47 | } 48 | 49 | .box .content { 50 | flex-direction: column; 51 | display: none; 52 | } 53 | 54 | .box.active .content { 55 | display: flex; 56 | } 57 | 58 | .content .key-code { 59 | border: 5px solid #17a2b8; 60 | height: 110px; 61 | width: 110px; 62 | margin-bottom: 15px; 63 | border-radius: 5px solid #17a2b8; 64 | border-radius: 50%; 65 | } 66 | 67 | .text, 68 | .key-code, 69 | .key-name { 70 | font-size: 45px; 71 | color: #17a2b8; 72 | font-weight: 500; 73 | } 74 | 75 | .content .details { 76 | width: 100%; 77 | margin-top: 15px; 78 | justify-content: space-evenly; 79 | } 80 | 81 | .details p { 82 | width: 100%; 83 | font-size: 18px; 84 | text-align: center; 85 | } 86 | 87 | .details p:last-child { 88 | border-left: 1px solid #bfbfbf; 89 | } 90 | -------------------------------------------------------------------------------- /desktop.ini: -------------------------------------------------------------------------------- 1 | [.ShellClassInfo] 2 | IconResource=C:\WINDOWS\System32\SHELL32.dll,4 3 | [ViewState] 4 | Mode= 5 | Vid= 6 | FolderType=Generic 7 | --------------------------------------------------------------------------------