├── Stopwatch ├── index.html ├── styles.css ├── styles.css.map ├── styles.scss └── app.js ├── BMI Calculator ├── index.html ├── style.css └── app.js ├── Digital Clock ├── style.css ├── app.js └── index.html ├── User Profile ├── index.html └── app.js ├── github-profiles ├── index.html ├── style.css └── app.js ├── Calculator ├── app.js ├── style.css └── index.html ├── calendar ├── index.html ├── app.js └── style.css ├── Loan Calculator ├── style.css ├── index.html └── app.js ├── countdown-timer ├── style.css ├── index.html └── app.js ├── Tip Calculator ├── app.js ├── index.html └── style.css └── Todo List ├── index.html └── app.js /Stopwatch/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 |

STOPWATCH

10 |

00 : 00

11 | 12 | 13 | 14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /BMI Calculator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | BMI Calculator 6 | 7 | 8 | 9 | 10 |
11 |

BMI Calculator

12 | 13 |

Height (cm)

14 | 15 | 16 |

Weight (kg)

17 | 18 | 19 | 20 | 21 |
22 |
23 | 24 | -------------------------------------------------------------------------------- /Digital Clock/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); 2 | 3 | body { 4 | background: #131313; 5 | } 6 | 7 | .clock { 8 | position: absolute; 9 | top: 50%; 10 | left: 50%; 11 | transform: translateX(-50%) translateY(-50%); 12 | display: flex; 13 | font-family: 'Poppins', sans-serif; 14 | } 15 | 16 | .heading { 17 | color: #F5F5F5; 18 | font-size: 18px; 19 | text-transform: uppercase; 20 | text-align: center; 21 | } 22 | 23 | .time { 24 | background: #090909; 25 | color: #FFFFFF; 26 | font-size: 100px; 27 | width: 150px; 28 | margin: 0 10px; 29 | text-align: center; 30 | } -------------------------------------------------------------------------------- /User Profile/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | User Profile 9 | 10 | 11 | 12 |
13 |

User Profile

14 | 15 |
16 |
17 | 18 | -------------------------------------------------------------------------------- /github-profiles/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Github Profiles 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 19 |
20 |
21 | 22 | -------------------------------------------------------------------------------- /Digital Clock/app.js: -------------------------------------------------------------------------------- 1 | window.onload = () => { 2 | function buildClock() { 3 | const date = new Date(); 4 | 5 | let hours = date.getHours(); // 0 - 23 6 | let minutes = date.getMinutes(); // 0 - 59 7 | let seconds = date.getSeconds(); // 0 - 59 8 | 9 | hours = hours < 10 ? "0" + hours : hours; 10 | minutes = minutes < 10 ? "0" + minutes : minutes; 11 | seconds = seconds < 10 ? "0" + seconds : seconds; 12 | 13 | document.querySelector('#clock-hours').innerText = hours; 14 | document.querySelector('#clock-minutes').innerText = minutes; 15 | document.querySelector('#clock-seconds').innerText = seconds; 16 | 17 | setTimeout(buildClock, 1000); 18 | } 19 | buildClock(); 20 | } -------------------------------------------------------------------------------- /Calculator/app.js: -------------------------------------------------------------------------------- 1 | window.onload = () => { 2 | const buttons = document.querySelectorAll('.numbers'); 3 | const screen = document.querySelector('.screen'); 4 | const equals = document.querySelector('#btn-equals'); 5 | const clear = document.querySelector('#btn-clear'); 6 | 7 | buttons.forEach(button => { 8 | button.addEventListener('click', (e) => { 9 | screen.value += e.target.innerHTML; 10 | }) 11 | }) 12 | 13 | equals.addEventListener('click', (e) => { 14 | if (!screen.value) { 15 | screen.value = "Enter Value" 16 | } else { 17 | screen.value = eval(screen.value); 18 | } 19 | }) 20 | 21 | clear.addEventListener('click', () => { 22 | screen.value = ""; 23 | }) 24 | } -------------------------------------------------------------------------------- /Digital Clock/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Digital Clock 6 | 7 | 8 | 9 | 10 |
11 |
12 |

Hours

13 |
14 |
15 |
16 |

Minutes

17 |
18 |
19 |
20 |

Seconds

21 |
22 |
23 |
24 | 25 | -------------------------------------------------------------------------------- /User Profile/app.js: -------------------------------------------------------------------------------- 1 | window.onload = () => { 2 | document.querySelector('#btnSubmit').addEventListener('click', getData); 3 | } 4 | 5 | function getData(){ 6 | fetch('https://jsonplaceholder.typicode.com/users') 7 | .then(res => res.json()) 8 | .then(data => { 9 | let out = '

Data of Users

' 10 | 11 | data.forEach(user => { 12 | out += ` 13 | 18 | ` 19 | }); 20 | document.querySelector('#result').innerHTML = out; 21 | }) 22 | } -------------------------------------------------------------------------------- /calendar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Month Calendar 5 | 6 | 7 | 8 | 9 |
10 |
11 |
12 |

13 |

14 |
15 |
16 |
17 |
Mon
18 |
Tue
19 |
Wed
20 |
Thu
21 |
Fri
22 |
Sat
23 |
Sun
24 |
25 |
26 |
27 | 28 | -------------------------------------------------------------------------------- /Stopwatch/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #17D4EF; 3 | font-family: sans-serif; 4 | } 5 | 6 | .wrapper { 7 | text-align: center; 8 | color: #FFF; 9 | } 10 | 11 | .wrapper h1 { 12 | font-family: 'Roboto', sans-serif; 13 | font-size: 40px; 14 | font-weight: 100; 15 | } 16 | 17 | .wrapper #seconds, .wrapper #tens { 18 | font-size: 32px; 19 | } 20 | 21 | .wrapper button { 22 | border-radius: 5px; 23 | background-color: #17D4EF; 24 | color: #FFF; 25 | font-size: 18px; 26 | padding: 18px 10px; 27 | width: 180px; 28 | margin: 10px; 29 | border: 1px solid #FFF; 30 | cursor: pointer; 31 | } 32 | 33 | .wrapper button:hover { 34 | -webkit-transition: all 0.5s ease-in-out; 35 | transition: all 0.5s ease-in-out; 36 | background-color: #FFF; 37 | color: #17D4EF; 38 | border: 1px solid #FFF; 39 | } 40 | /*# sourceMappingURL=styles.css.map */ -------------------------------------------------------------------------------- /Stopwatch/styles.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAYA,AAAA,IAAI,CAAA;EACA,gBAAgB,EAbZ,OAAO;EAcX,WAAW,EAAE,UAAU;CAC1B;;AAED,AAAA,QAAQ,CAAA;EACJ,UAAU,EAAE,MAAM;EAClB,KAAK,EAlBA,IAAI;CA+CZ;;AA/BD,AAII,QAJI,CAIJ,EAAE,CAAA;EACE,WAAW,EAAE,oBAAoB;EACjC,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,GAAG;CACnB;;AARL,AAUI,QAVI,CAUJ,QAAQ,EAVZ,QAAQ,CAUM,KAAK,CAAA;EACX,SAAS,EAAE,IAAI;CAClB;;AAZL,AAcI,QAdI,CAcJ,MAAM,CAAA;EA1BN,aAAa,EA2BQ,GAAG;EACpB,gBAAgB,EAjChB,OAAO;EAkCP,KAAK,EAjCJ,IAAI;EAkCL,SAAS,EAAE,IAAI;EACf,OAAO,EAAE,SAAS;EAClB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,IAAI;EACZ,MAAM,EAAE,GAAG,CAAC,KAAK,CAtChB,IAAI;EAuCL,MAAM,EAAE,OAAO;CAOlB;;AA9BL,AAwBQ,QAxBA,CAcJ,MAAM,AAUD,MAAM,CAAA;EAhCX,UAAU,EAAE,oBAAoB;EAkCxB,gBAAgB,EA1CnB,IAAI;EA2CD,KAAK,EA5CT,OAAO;EA6CH,MAAM,EAAE,GAAG,CAAC,KAAK,CA5CpB,IAAI;CA6CJ", 4 | "sources": [ 5 | "styles.scss" 6 | ], 7 | "names": [], 8 | "file": "styles.css" 9 | } -------------------------------------------------------------------------------- /Loan Calculator/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | } 7 | 8 | body { 9 | display: flex; 10 | justify-content: center; 11 | background-color: #F5F5F5; 12 | font-family: 'Open Sans', sans-serif; 13 | } 14 | 15 | .container { 16 | width: 600px; 17 | height: 450px; 18 | background-color: #445A6F; 19 | color: #FFFFFF; 20 | padding: 25px; 21 | border-radius: 10px; 22 | margin-top: 50px; 23 | } 24 | 25 | .wrapper { 26 | display: flex; 27 | } 28 | 29 | .wrapper div { 30 | background-color: #e63946; 31 | padding: 20px; 32 | margin-top: 10px; 33 | } 34 | 35 | input { 36 | width: 80%; 37 | padding: 8px; 38 | margin-top: 10px; 39 | border: none; 40 | font-size: 20px; 41 | } 42 | 43 | input:focus { 44 | outline: none; 45 | } 46 | 47 | h2 { 48 | margin-top: 40px; 49 | } -------------------------------------------------------------------------------- /Loan Calculator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Loan Calculator 5 | 6 | 7 | 8 | 9 |
10 |

Loan Calculator

11 |
12 |
13 |

Loan Amount (₹)

14 | 15 |
16 |
17 |

Interest Rate (%)

18 | 19 |
20 |
21 |

Tenure (in months)

22 | 23 |
24 |
25 |

26 |

27 |

28 |
29 | 30 | -------------------------------------------------------------------------------- /BMI Calculator/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap'); 2 | 3 | * { 4 | font-family: 'Open Sans', sans-serif; 5 | } 6 | 7 | body { 8 | display: flex; 9 | justify-content: center; 10 | } 11 | 12 | .container { 13 | margin-top: 50px; 14 | width: 300px; 15 | box-shadow: 0px 0px 20px 10px #0044ff; 16 | padding: 50px; 17 | border-radius: 30px; 18 | text-align: center; 19 | } 20 | 21 | h1 { 22 | margin-bottom: 40px; 23 | } 24 | 25 | input { 26 | border: none; 27 | border-bottom: 1px solid #0044ff; 28 | width: 50%; 29 | margin-bottom: 20px; 30 | outline: none; 31 | padding: 10px; 32 | text-align: center; 33 | font-size: 25px; 34 | } 35 | 36 | button { 37 | width: 100%; 38 | height: 35px; 39 | margin-top: 25px; 40 | border-radius: 20px; 41 | border: none; 42 | background-color: #0044ff; 43 | color: #fff; 44 | font-size: 22px; 45 | } 46 | 47 | #result { 48 | margin-top: 20px; 49 | font-size: 25px; 50 | } 51 | -------------------------------------------------------------------------------- /countdown-timer/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); 2 | 3 | body { 4 | text-align: center; 5 | background-color: #131313; 6 | font-family: 'Poppins', sans-serif; 7 | } 8 | 9 | h1 { 10 | color: #F5F5F5; 11 | font-size: 40px; 12 | } 13 | 14 | table { 15 | margin: auto; 16 | } 17 | 18 | th { 19 | color: #FFFFFF; 20 | } 21 | 22 | input { 23 | font-size: 20px; 24 | padding: 5px; 25 | border-radius: 5px; 26 | } 27 | 28 | button { 29 | min-width: 120px; 30 | margin: 20px 10px; 31 | padding: 10px; 32 | font-size: 20px; 33 | background-color: #FFFFFF; 34 | border-radius: 5px; 35 | font-weight: 600; 36 | } 37 | 38 | .countdown { 39 | display: flex; 40 | justify-content: center; 41 | } 42 | 43 | .heading { 44 | color: #F5F5F5; 45 | font-size: 18px; 46 | text-transform: uppercase; 47 | } 48 | 49 | .time { 50 | background-color: #090909; 51 | color: #FFFFFF; 52 | font-size: 100px; 53 | width: 150px; 54 | margin: 0 10px; 55 | } -------------------------------------------------------------------------------- /Stopwatch/styles.scss: -------------------------------------------------------------------------------- 1 | $blue : #17D4EF; 2 | $white : #FFF; 3 | 4 | 5 | @mixin corners($radius) { 6 | border-radius: $radius; 7 | } 8 | 9 | @mixin transition { 10 | transition: all 0.5s ease-in-out; 11 | } 12 | 13 | body{ 14 | background-color: $blue; 15 | font-family: sans-serif; 16 | } 17 | 18 | .wrapper{ 19 | text-align: center; 20 | color: $white; 21 | 22 | h1{ 23 | font-family: 'Roboto', sans-serif; 24 | font-size: 40px; 25 | font-weight: 100; 26 | } 27 | 28 | #seconds, #tens{ 29 | font-size: 32px; 30 | } 31 | 32 | button{ 33 | @include corners(5px); 34 | background-color: $blue; 35 | color: $white; 36 | font-size: 18px; 37 | padding: 18px 10px; 38 | width: 180px; 39 | margin: 10px; 40 | border: 1px solid $white; 41 | cursor: pointer; 42 | &:hover{ 43 | @include transition; 44 | background-color: $white; 45 | color: $blue; 46 | border: 1px solid $white; 47 | } 48 | } 49 | } -------------------------------------------------------------------------------- /Calculator/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); 2 | 3 | body { 4 | background-color: #33ffd8; 5 | display: flex; 6 | justify-content: center; 7 | } 8 | 9 | .container { 10 | margin-top: 20px; 11 | width: 400px; 12 | height: fit-content; 13 | background-color: #445A6F; 14 | border-radius: 10px; 15 | } 16 | 17 | .screen { 18 | background-color: #445A6F; 19 | border: none; 20 | padding: 10px; 21 | width: 90%; 22 | color: #F5F5F5; 23 | font-size: 60px; 24 | margin-top: 50px; 25 | font-family: 'Poppins', sans-serif; 26 | } 27 | 28 | .buttons { 29 | display: flex; 30 | flex-wrap: wrap; 31 | } 32 | 33 | button { 34 | flex: 20%; 35 | font-size: 40px; 36 | margin: 10px; 37 | padding: 10px; 38 | border: none; 39 | border-radius: 10px; 40 | background-color: #445A6F; 41 | color: #F5F5F5; 42 | opacity: .8; 43 | box-shadow: -8px -8px 15px rgba(255, 255, 255, 0.1); 44 | font-family: 'Poppins', sans-serif; 45 | } 46 | 47 | .btn { 48 | color: #33ffd8; 49 | } -------------------------------------------------------------------------------- /Loan Calculator/app.js: -------------------------------------------------------------------------------- 1 | window.onload = () => { 2 | const inputs = document.querySelectorAll("input"); 3 | 4 | inputs.forEach(input => { 5 | input.addEventListener('change', calculateLoan) 6 | }) 7 | } 8 | 9 | function calculateLoan () { 10 | const principal = document.querySelector('#amount').value; 11 | const interestRate = document.querySelector('#interest').value; 12 | const tenure = document.querySelector('#tenure').value; 13 | 14 | if (!principal || !interestRate || !tenure) return; 15 | 16 | const monthlyInterest = interestRate / 100 / 12; 17 | const emi = principal * monthlyInterest * Math.pow(1 + monthlyInterest, tenure) / (Math.pow(1 + monthlyInterest, tenure) - 1); 18 | 19 | const totalAmount = emi * tenure; 20 | const totalInterest = totalAmount - principal; 21 | 22 | document.querySelector('#emi').innerText = 'EMI: ₹' + emi.toFixed(2); 23 | document.querySelector('#totalAmount').innerText = 'Total Amount: ₹' + totalAmount.toFixed(2); 24 | document.querySelector('#totalInterest').innerHTML = 'Total Interest: ₹' + totalInterest.toFixed(2); 25 | } 26 | -------------------------------------------------------------------------------- /calendar/app.js: -------------------------------------------------------------------------------- 1 | window.onload = () => { 2 | const month = document.querySelector("#month"); 3 | const date = document.querySelector("#date"); 4 | const days = document.querySelector("#days"); 5 | 6 | const currentMonth = new Date().getMonth(); 7 | const firstDay = new Date(new Date().getFullYear(), currentMonth, 1).getDay() -1; 8 | const lastDay = new Date(new Date().getFullYear(), currentMonth + 1, 0).getDate(); 9 | 10 | const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", 11 | "October", "November", "December"]; 12 | 13 | month.innerText = months[currentMonth]; 14 | date.innerText = new Date().toDateString(); 15 | 16 | console.log(firstDay); 17 | 18 | let result = ""; 19 | 20 | for (let i = firstDay; i > 0; i--) { 21 | result += `
` 22 | } 23 | for (let i = 1; i <= lastDay; i++) { 24 | if (i === new Date().getDate()) { 25 | result += `
${i}
` 26 | } else { 27 | result += `
${i}
` 28 | } 29 | } 30 | 31 | days.innerHTML = result; 32 | } -------------------------------------------------------------------------------- /Tip Calculator/app.js: -------------------------------------------------------------------------------- 1 | const varObj = { 2 | tip: 0 3 | } 4 | 5 | window.onload = () => { 6 | document.querySelector('#calculate').onclick = calculateTip; 7 | document.querySelector('#reset').onclick = resetValues; 8 | 9 | const tips = document.querySelectorAll('.tip'); 10 | 11 | tips.forEach(tip => { 12 | tip.addEventListener('click', handleTipClick); 13 | }) 14 | } 15 | 16 | 17 | function handleTipClick(e) { 18 | varObj.tip = Number(e.target.textContent.split('%')[0]); 19 | } 20 | 21 | function calculateTip() { 22 | const amount = Number(document.querySelector('#amount').value); 23 | const people = Number(document.querySelector('#people').value); 24 | 25 | if (!amount && !people) { 26 | alert("Please enter values"); 27 | return; 28 | } 29 | 30 | const tip = (amount * varObj.tip) / 100; 31 | const billPerPerson = (amount + tip) / people; 32 | 33 | document.querySelector('#tipamount').innerText = tip / people; 34 | document.querySelector('#totalamount').innerText = billPerPerson; 35 | } 36 | 37 | function resetValues () { 38 | document.querySelector('#tipamount').innerText = 0; 39 | document.querySelector('#totalamount').innerText = 0; 40 | } -------------------------------------------------------------------------------- /BMI Calculator/app.js: -------------------------------------------------------------------------------- 1 | window.onload = () => { 2 | const button = document.querySelector('#btn'); 3 | button.addEventListener('click', calculateBmi) 4 | } 5 | 6 | function calculateBmi() { 7 | const height = document.querySelector('#height').value; 8 | const weight = document.querySelector('#weight').value; 9 | const result = document.querySelector('#result'); 10 | 11 | if (!height || isNaN(height) || height < 0) { 12 | result.innerText = "Please provide a valid height"; 13 | return; 14 | } else if (!weight || isNaN(weight) || weight < 0) { 15 | result.innerText = "Please provide a valid weight"; 16 | return; 17 | } 18 | 19 | const bmi = (weight / ((height * height) / 10000)).toFixed(2); 20 | 21 | if (bmi < 18.5) { 22 | result.innerText = `Under Weight: ${bmi}`; 23 | } else if (bmi >= 18.5 && bmi < 24.9) { 24 | result.innerText = `Normal: ${bmi}`; 25 | } else if (bmi >= 25 && bmi < 29.9) { 26 | result.innerText = `Over Weight: ${bmi}`; 27 | } else if (bmi >= 30 && bmi < 34.9) { 28 | result.innerText = `Obesity (Class I): ${bmi}`; 29 | } else if (bmi >= 35.5 && bmi < 39.9) { 30 | result.innerText = `Obesity (Class II) : ${bmi}`; 31 | } else { 32 | result.innerText = `Extreme Obesity: ${bmi}`; 33 | } 34 | } -------------------------------------------------------------------------------- /Tip Calculator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tip Calculator 5 | 6 | 7 | 8 | 9 |
10 |
11 |

Bill ₹

12 | 13 | 14 |

Select Tip %

15 |
16 |
5%
17 |
15%
18 |
20%
19 |
25%
20 |
50%
21 |
22 | 23 |

Number of People

24 | 25 | 26 |
27 |
28 |

Tip Amount: ₹0 each

29 |

Total: ₹0 each

30 | 31 |
32 |
33 | 34 | -------------------------------------------------------------------------------- /Calculator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Calculator 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 | -------------------------------------------------------------------------------- /Stopwatch/app.js: -------------------------------------------------------------------------------- 1 | 2 | window.onload = function () { 3 | 4 | let seconds = 0; 5 | let tens = 0; 6 | 7 | let buttonStart = document.querySelector('#button-start'); 8 | let buttonStop = document.querySelector('#button-stop'); 9 | let buttonReset = document.querySelector('#button-reset'); 10 | 11 | let appendSeconds = document.querySelector('#seconds'); 12 | let appendTens = document.querySelector('#tens') 13 | let interval; 14 | 15 | buttonStart.onclick = () => { 16 | this.clearInterval(interval); 17 | interval = setInterval(startTimer, 10); 18 | } 19 | 20 | buttonStop.onclick = ()=>{ 21 | this.clearInterval(interval); 22 | } 23 | 24 | buttonReset.onclick = ()=> { 25 | this.clearInterval(interval); 26 | tens = "00" 27 | seconds = "00"; 28 | appendTens.innerHTML = tens; 29 | appendSeconds.innerHTML = seconds; 30 | } 31 | 32 | function startTimer() { 33 | tens++; 34 | 35 | tens < 9 ? appendTens.innerHTML = '0'+ tens : appendTens.innerHTML = tens; 36 | 37 | if(tens > 99){ 38 | seconds++; 39 | appendSeconds.innerHTML = '0' + seconds; 40 | tens = 0; 41 | appendTens.innerHTML = '0' + 0; 42 | } 43 | 44 | if(seconds > 9){ 45 | appendSeconds.innerHTML = seconds; 46 | } 47 | } 48 | } -------------------------------------------------------------------------------- /calendar/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | } 7 | 8 | body { 9 | justify-content: center; 10 | display: flex; 11 | font-family: 'Raleway', sans-serif; 12 | } 13 | 14 | .calendar { 15 | margin-top: 50px; 16 | background-color: #000; 17 | color: #F5F5F5; 18 | width: 450px; 19 | height: 480px; 20 | border-radius: 10px; 21 | } 22 | 23 | .month { 24 | background-color: #445A6F; 25 | border-radius: 10px 10px 0 0; 26 | height: 100px; 27 | justify-content: center; 28 | display: flex; 29 | text-align: center; 30 | align-items: center; 31 | } 32 | 33 | .month h1 { 34 | font-size: 30px; 35 | text-transform: uppercase; 36 | margin-bottom: 10px; 37 | } 38 | 39 | .month p { 40 | font-size: 16px; 41 | } 42 | 43 | .weekdays { 44 | display: flex; 45 | margin-top: 25px; 46 | } 47 | 48 | .weekdays div { 49 | font-size: 16px; 50 | width: 100%; 51 | display: flex; 52 | justify-content: center; 53 | } 54 | 55 | .days { 56 | display: flex; 57 | flex-wrap: wrap; 58 | padding: 2px; 59 | margin-top: 15px; 60 | } 61 | 62 | .days div { 63 | font-size: 14px; 64 | margin: 3px; 65 | width: 57px; 66 | height: 50px; 67 | display: flex; 68 | align-items: center; 69 | justify-content: center; 70 | } 71 | 72 | .today { 73 | background-color: #445A6F; 74 | border-radius: 50%; 75 | } -------------------------------------------------------------------------------- /countdown-timer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Countdown Timer 5 | 6 | 7 | 8 | 9 |

Countdown Timer

10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
Enter DateEnter Time
24 | 25 | 26 | 27 | 28 |
29 |
30 |

DAY

31 |
0
32 |
33 |
34 |

HOURS

35 |
0
36 |
37 |
38 |

MINUTES

39 |
0
40 |
41 |
42 |

SECONDS

43 |
0
44 |
45 |
46 | 47 | -------------------------------------------------------------------------------- /Todo List/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 9 | Todo List 10 | 11 | 12 |
13 |
14 |
15 |
16 |

To-Do List

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

Add Items

23 | 24 | 25 |
26 |
27 |
28 |
29 |
30 |
31 | 32 |

Tasks

33 | 34 |
35 | 36 |
37 |
38 | 39 | -------------------------------------------------------------------------------- /Tip Calculator/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | } 7 | 8 | body { 9 | display: flex; 10 | justify-content: center; 11 | background-color: #c5e4e7; 12 | font-family: 'Roboto Condensed', sans-serif; 13 | } 14 | 15 | .container { 16 | margin-top: 50px; 17 | width: 800px; 18 | height: 450px; 19 | background-color: #fff; 20 | border-radius: 20px; 21 | display: flex; 22 | } 23 | 24 | .wrapper { 25 | padding: 40px; 26 | width: 50%; 27 | } 28 | 29 | input { 30 | width: 80%; 31 | border: none; 32 | background: #f3f8fb; 33 | padding: 10px; 34 | margin: 10px 0 20px 0; 35 | border-radius: 2px; 36 | } 37 | 38 | input:focus { 39 | outline: none; 40 | } 41 | 42 | input::placeholder { 43 | opacity: 0.7; 44 | } 45 | 46 | .tips { 47 | display: flex; 48 | margin-bottom: 20px; 49 | flex-wrap: wrap; 50 | } 51 | 52 | .tip { 53 | background: #00474b; 54 | color: #a4cdd1; 55 | min-width: 80px; 56 | margin: 5px; 57 | text-align: center; 58 | padding: 10px; 59 | border-radius: 5px; 60 | cursor: pointer; 61 | } 62 | 63 | button { 64 | height: 40px; 65 | width: 100%; 66 | background-color: #39CCCC; 67 | color: #fff; 68 | font-size: 16px; 69 | border: none; 70 | border-radius: 5px; 71 | } 72 | 73 | .right-wrapper { 74 | background: #00474b; 75 | color: #9dc8c9; 76 | width: 50%; 77 | padding: 30px; 78 | } 79 | 80 | .right-wrapper p { 81 | margin-bottom: 20px; 82 | } 83 | 84 | span { 85 | font-size: 30px; 86 | } -------------------------------------------------------------------------------- /countdown-timer/app.js: -------------------------------------------------------------------------------- 1 | window.onload = () => { 2 | document.querySelector('#calculate').onclick = calculate; 3 | document.querySelector('#reset').onclick = reset; 4 | } 5 | 6 | function calculate () { 7 | const date = document.querySelector("#date").value; 8 | const time = document.querySelector("#time").value; 9 | 10 | const stop = document.querySelector('#stop'); 11 | 12 | const endTime = new Date(date + " " + time); 13 | 14 | const interval = setInterval(() => calculateTime(endTime), 1000); 15 | 16 | stop.addEventListener('click', () => { 17 | clearInterval(interval); 18 | }) 19 | } 20 | 21 | function calculateTime(endTime) { 22 | const currentTime = new Date(); 23 | 24 | const days = document.querySelector('#countdown-days'); 25 | const hours = document.querySelector('#countdown-hours'); 26 | const minutes = document.querySelector('#countdown-minutes'); 27 | const seconds = document.querySelector('#countdown-seconds'); 28 | 29 | if (endTime > currentTime) { 30 | const timeLeft = (endTime - currentTime) / 1000; 31 | 32 | console.log(timeLeft); 33 | days.innerText = Math.floor(timeLeft / (24 * 60 * 60)); 34 | hours.innerText = Math.floor((timeLeft / (60 * 60)) % 24); 35 | minutes.innerText = Math.floor((timeLeft / 60) % 60); 36 | seconds.innerText = Math.floor(timeLeft % 60); 37 | } else { 38 | days.innerText = 0 39 | hours.innerText = 0 40 | minutes.innerText = 0 41 | seconds.innerText = 0 42 | } 43 | } 44 | 45 | function reset() { 46 | document.querySelector('#countdown-days').innerText = 0; 47 | document.querySelector('#countdown-hours').innerText = 0; 48 | document.querySelector('#countdown-minutes').innerText = 0; 49 | document.querySelector('#countdown-seconds').innerText = 0; 50 | } -------------------------------------------------------------------------------- /github-profiles/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins&family=Roboto:wght@500&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | background-color: #2a2a72; 11 | min-height: 100vh; 12 | align-items: center; 13 | text-align: center; 14 | justify-content: center; 15 | display: flex; 16 | flex-direction: column; 17 | font-family: 'Poppins', sans-serif; 18 | } 19 | 20 | input { 21 | background-color: #4c2885; 22 | width: 400px; 23 | padding: 18px; 24 | font-size: 16px; 25 | border: none; 26 | border-radius: 10px; 27 | color: #FFF; 28 | margin-bottom: 35px; 29 | } 30 | 31 | input::placeholder { 32 | color: #bbb; 33 | } 34 | 35 | input:focus { 36 | outline: none; 37 | } 38 | 39 | .card { 40 | background-color: #4c2885; 41 | display: flex; 42 | max-width: 800px; 43 | padding: 50px; 44 | border-radius: 20px; 45 | background-image: linear-gradient(315deg, #4c2885 0%, #4c11ac 100%); 46 | } 47 | 48 | .avatar { 49 | height: 150px; 50 | width: 150px; 51 | border: 10px solid #2a2a72; 52 | border-radius: 50%; 53 | } 54 | 55 | .user { 56 | color: #eee; 57 | margin-left: 30px; 58 | } 59 | 60 | .user h2 { 61 | margin-top: 0; 62 | } 63 | 64 | .user ul { 65 | display: flex; 66 | justify-content: space-between; 67 | list-style-type: none; 68 | padding: 0; 69 | max-width: 400px; 70 | } 71 | 72 | .user ul li { 73 | display: flex; 74 | align-items: center; 75 | margin-right: 10px; 76 | } 77 | 78 | .user ul li strong { 79 | font-size: 14px; 80 | margin-left: 10px; 81 | } 82 | 83 | .repo { 84 | color: #fff; 85 | text-decoration: none; 86 | background-color: #2a2a72; 87 | border-radius: 5px; 88 | font-size: 10px; 89 | padding: 5px 10px; 90 | margin: 0 6px 6px 0; 91 | display: inline-block; 92 | } -------------------------------------------------------------------------------- /github-profiles/app.js: -------------------------------------------------------------------------------- 1 | window.onload = () => { 2 | const searchBox = document.querySelector('#search'); 3 | 4 | searchBox.addEventListener('focusout', () => { 5 | formSubmit(); 6 | }) 7 | 8 | getUser("kunaltyagi9"); 9 | } 10 | 11 | const formSubmit = () => { 12 | const searchBox = document.querySelector('#search'); 13 | if (searchBox.value != "") { 14 | getUser(searchBox.value); 15 | searchBox.value = ""; 16 | } 17 | return false; 18 | } 19 | 20 | const getUser = async (username) => { 21 | const API_URL = "https://api.github.com/users"; 22 | const main = document.querySelector('#main'); 23 | 24 | const response = await fetch(`${API_URL}/${username}`); 25 | const data = await response.json(); 26 | 27 | const card = ` 28 |
29 |
30 | dp 31 |
32 |
33 |

${data.name}

34 |

${data.bio}

35 | 36 | 41 | 42 |
43 |
44 |
45 | ` 46 | 47 | main.innerHTML = card; 48 | getRepos(API_URL, username); 49 | } 50 | 51 | const getRepos = async (API_URL, username) => { 52 | const repos = document.querySelector('#repos'); 53 | 54 | const response = await fetch(`${API_URL}/${username}/repos`); 55 | const data = await response.json(); 56 | 57 | data.forEach(repo => { 58 | const element = document.createElement('a'); 59 | element.classList.add('repo'); 60 | element.href=repo.html_url; 61 | element.innerText = repo.name; 62 | element.target = "_blank"; 63 | repos.appendChild(element); 64 | }) 65 | } -------------------------------------------------------------------------------- /Todo List/app.js: -------------------------------------------------------------------------------- 1 | window.onload= () =>{ 2 | const form1 = document.querySelector('#addForm'); 3 | 4 | let items = document.getElementById('items'); 5 | let submit = document.getElementById('submit'); 6 | 7 | let editItem = null; 8 | 9 | form1.addEventListener('submit', addItem); 10 | items.addEventListener('click', removeItem); 11 | } 12 | 13 | function addItem(e) { 14 | e.preventDefault(); 15 | if(submit.value != 'Submit'){ 16 | console.log("Hello"); 17 | editItem.target.parentNode.childNodes[0].data = document.getElementById('item').value; 18 | submit.value = "Submit"; 19 | document.getElementById('item').value = ''; 20 | 21 | document.getElementById("lblsuccess").innerHTML = "Text edited successfully"; 22 | document.getElementById("lblsuccess").style.display = "block"; 23 | setTimeout( function(){ document.getElementById("lblsuccess").style.display = "none"; } ,3000); 24 | 25 | return false; 26 | } 27 | 28 | let newItem = document.getElementById('item').value; 29 | if(newItem.trim() == '' || newItem.trim() ==null){ 30 | return false; 31 | }else{ 32 | document.getElementById('item').value = ''; 33 | } 34 | 35 | let li = document.createElement('li'); 36 | li.className = "list-group-item"; 37 | 38 | let deleteButton = document.createElement('button'); 39 | deleteButton.className = "btn-danger btn btn-sm float-right delete"; 40 | 41 | deleteButton.appendChild(document.createTextNode("Delete")); 42 | 43 | let editButton = document.createElement('button'); 44 | editButton.className = "btn-success btn btn-sm float-right edit"; 45 | 46 | editButton.appendChild(document.createTextNode("Edit")); 47 | 48 | li.appendChild(document.createTextNode(newItem)); 49 | li.appendChild(deleteButton); 50 | li.appendChild(editButton); 51 | 52 | items.appendChild(li); 53 | } 54 | 55 | function removeItem(e){ 56 | 57 | e.preventDefault(); 58 | if(e.target.classList.contains('delete')){ 59 | if(confirm("Are you Sure?")){ 60 | let li = e.target.parentNode; 61 | items.removeChild(li); 62 | document.getElementById("lblsuccess").innerHTML = "Text deleted successfully"; 63 | document.getElementById("lblsuccess").style.display = "block"; 64 | setTimeout( function(){ document.getElementById("lblsuccess").style.display = "none"; } ,3000); 65 | } 66 | } 67 | if(e.target.classList.contains('edit')){ 68 | document.getElementById('item').value = e.target.parentNode.childNodes[0].data; 69 | submit.value = "EDIT"; 70 | editItem = e; 71 | } 72 | } 73 | 74 | function toggleButton(ref,btnID){ 75 | document.getElementById(btnID).disabled = false; 76 | } 77 | --------------------------------------------------------------------------------