12 |
32 |
33 |
36 |
37 |
--------------------------------------------------------------------------------
/image-crousel/index.js:
--------------------------------------------------------------------------------
1 | const container = document.querySelector(".image-container")
2 | const prev = document.querySelector("#prev")
3 | const next = document.querySelector("#next")
4 |
5 | let count = 0;
6 | let width = 500;
7 |
8 | prev.addEventListener("click",()=>{
9 | console.log(count)
10 | if(count > 0){
11 | count--;
12 | container.style.transform = `translateX(-${width*count}px)`
13 | }
14 | })
15 |
16 | next.addEventListener("click",()=>{
17 | console.log("inside next")
18 | console.log(count)
19 | if(count < 4){
20 | count++;
21 | container.style.transform = `translateX(-${width*count}px)`
22 | }
23 |
24 | })
--------------------------------------------------------------------------------
/image-gallary/image-gallery.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background-color: antiquewhite;
9 | display: flex;
10 | justify-content: center;
11 | align-items: center;
12 | height: 100vh;
13 | }
14 |
15 | .container {
16 | position: absolute;
17 | width: 350px;
18 | box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
19 | border-radius: 10px;
20 | padding: 10px;
21 | text-align: center;
22 | background-color: white;
23 | }
24 |
25 | .header {
26 | font-size: 1.5rem;
27 | margin-bottom: 10px;
28 | }
29 |
30 | label {
31 | display: block;
32 | margin-bottom: 10px;
33 | }
34 |
35 | input {
36 | margin-bottom: 10px;
37 | padding: 5px;
38 | border-radius: 5px;
39 | font-size: 1rem;
40 | }
41 |
42 | button {
43 | padding: 5px 10px;
44 | border-radius: 5px;
45 | font-size: 1rem;
46 | cursor: pointer;
47 | color: white;
48 | background-color: black;
49 | }
50 |
51 | .img-container {
52 | display: flex;
53 | flex-wrap: wrap;
54 | justify-content: center;
55 | margin-top: 10px;
56 | }
--------------------------------------------------------------------------------
/image-gallary/image-gallery.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
13 | 
14 | 
15 | 
16 | 
17 | 
18 |
19 |
31 |
11 |
29 |
12 |
16 |
17 | 13 | Image Gallery 14 |
15 |
18 |
20 |
21 |
22 |
27 |
28 |
30 |
31 |
32 |
35 |
36 |
--------------------------------------------------------------------------------
/image-gallary/image-gallery.js:
--------------------------------------------------------------------------------
1 | // picsum.photos/200/300/?random/1
2 |
3 | const input = document.querySelector('#input');
4 | const submit = document.querySelector('#submit');
5 | const imgContainer = document.querySelector('.img-container');
6 | submit.addEventListener('click', async function() {
7 | const count = input.value;
8 | console.log(count)
9 | if( count < 1 || count > 100) {
10 | alert('Please enter a number between 1 and 10');
11 | }else {
12 | for( let i=0;i < count;i++) {
13 | const img = document.createElement('img');
14 | img.src = `https://picsum.photos/200/300/?random/${i}`;
15 | imgContainer.appendChild(img);
16 | }
17 | }
18 | });
--------------------------------------------------------------------------------
/image-search/imagesearch.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | .header {
8 | background-color: #333333;
9 | text-align: center;
10 | padding: 20px;
11 | }
12 |
13 | .header h1 {
14 | color: white;
15 | font-size: 40px;
16 | }
17 |
18 | .search-bar {
19 | margin: 20px auto;
20 | width: 100%;
21 | text-align: center;
22 | }
23 |
24 | input {
25 | width: 50%;
26 | padding: 10px;
27 | border: 1px solid #333333;
28 | border-radius: 5px;
29 | font-size: 18px;
30 | outline: none;
31 | }
32 |
33 | button {
34 | padding: 10px;
35 | border: 1px solid blue;
36 | border-radius: 5px;
37 | font-size: 18px;
38 | background-color: blue;
39 | color: white;
40 | cursor: pointer;
41 | }
42 |
43 | .img-container {
44 | display: flex;
45 | flex-wrap: wrap;
46 | justify-content: center;
47 | }
48 |
49 | img {
50 | width: 200px;
51 | height: 200px;
52 | margin: 10px;
53 | }
--------------------------------------------------------------------------------
/image-search/imagesearch.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
11 |
19 |
12 |
14 |
18 | Image Search App
13 |
20 |
21 |
22 |
25 |
26 |
--------------------------------------------------------------------------------
/image-search/imagesearch.js:
--------------------------------------------------------------------------------
1 | const search = document.querySelector('#search')
2 | const search_btn = document.querySelector('#search-btn')
3 | const img_container = document.querySelector('.img-container')
4 |
5 |
6 | search_btn.addEventListener('click', async () => {
7 | const search_value = search.value
8 | console.log(search_value,"search_value")
9 | if ( search_value === '' ) {
10 | alert('Please enter a search term')
11 | return
12 | }else {
13 | const key = 'RuJTeKhXAyF9G-9VlCJJv1NlEMuCgGCDgIS-2Brjv3E'
14 | const url = `https://api.unsplash.com/search/photos?page=1&query=${search_value}&client_id=${key}`
15 | let data = await fetch(url)
16 | data = await data.json()
17 | console.log(data,"data")
18 | displayImages(data)
19 | }
20 | })
21 |
22 | function displayImages(data){
23 | img_container.innerHTML = ''
24 | data.results.forEach(element => {
25 | console.log(element.urls.regular,"element.urls.regular")
26 | const img = document.createElement('img')
27 | img.src=element.urls.regular
28 | img_container.appendChild(img)
29 | });
30 | }
--------------------------------------------------------------------------------
/image-slide/image-slider.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 0;
3 | margin: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background-color: antiquewhite;
9 | display: flex;
10 | justify-content: center;
11 | align-items: center;
12 | height: 100vh;
13 | }
14 |
15 | .container {
16 | width: 500px;
17 | height: 300px;
18 | overflow: hidden;
19 | border-radius: 10px;
20 | box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
21 | }
22 |
23 | .img-container {
24 | display: flex;
25 | }
26 |
27 | .btn {
28 | font-size: 50px;
29 | color: white;
30 | opacity: .9;
31 | position: absolute;
32 | top:48%;
33 | }
34 |
35 | .prev {
36 | right: 60%;
37 | }
38 |
39 | .next {
40 | left: 60%;
41 | }
--------------------------------------------------------------------------------
/image-slide/image-slider.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
19 |
30 |
33 |
34 |
--------------------------------------------------------------------------------
/image-slide/image-slider.js:
--------------------------------------------------------------------------------
1 | const prev = document.querySelector(".prev")
2 | const next = document.querySelector(".next")
3 |
4 | const imgContainer = document.querySelector(".img-container")
5 |
6 | let count = 0;
7 | let widht = 500;
8 |
9 | prev.addEventListener("click",()=>{
10 | console.log("clicked prev")
11 | if ( count > 0){
12 | count--;
13 | imgContainer.style.transform = `translateX(-${count*widht}px)`;
14 | }
15 |
16 |
17 | })
18 |
19 | next.addEventListener("click",()=>{
20 | console.log("clicked next")
21 | if(count < 5){
22 | count++;
23 | imgContainer.style.transform = `translateX(-${count*widht}px)`;
24 | }
25 |
26 | })
--------------------------------------------------------------------------------
/increment-counter/incrementcounter.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 0;
3 | margin: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background-color: antiquewhite;
9 | height: 100vh;
10 | }
11 |
12 | .container {
13 | display: flex;
14 | justify-content: center;
15 | align-items: center;
16 | height: 100vh;
17 | }
18 |
19 | .container-counter {
20 | height: 300px;
21 | width: 300px;
22 | background-color: #fff;
23 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
24 | border-radius: 10px;
25 | margin: 10px;
26 | display: flex;
27 | justify-content: center;
28 | align-items: center;
29 | flex-direction: column;
30 | border: none;
31 | padding: 10px;
32 | }
33 |
34 | .container-counter span {
35 | font-size: 1.5rem;
36 | font-weight: bold;
37 | color: #000;
38 | }
39 |
40 | .container-counter .counter{
41 | font-size: 4rem;
42 | font-weight: bold;
43 | color: #000;
44 | }
--------------------------------------------------------------------------------
/increment-counter/incrementcounter.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
20 | 
21 | 
22 | 
23 | 
24 | 
25 | 
26 |
27 |
28 |
29 |
12 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/increment-counter/incrementcounter.js:
--------------------------------------------------------------------------------
1 | const counters = document.querySelectorAll('.counter');
2 |
3 | console.log(counters)
4 |
5 | counters.forEach(counter => {
6 | counter.innerHTML = '0';
7 | let target = +counter.getAttribute('data-target');
8 | console.log(target)
9 | let inc = target / 20;
10 | let count = 0;
11 | function incrementcounter(){
12 | if( count < target){
13 | count = count + inc;
14 | counter.innerHTML = count;
15 | setInterval(incrementcounter, 1);
16 | }else{
17 | counter.innerHTML = target;
18 | }
19 | }
20 | incrementcounter();
21 | })
--------------------------------------------------------------------------------
/jumping-letters/index.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | display: flex;
9 | align-items: center;
10 | justify-content: center;
11 | background-color: lightblue;
12 | height: 100vh;
13 | }
14 |
15 | .container {
16 | cursor: pointer;
17 | }
18 |
19 | span {
20 | font-size: 11rem;
21 | color: blue;
22 | font-weight: bolder;
23 | line-height: 1;
24 | display: inline-block;
25 | }
26 |
27 | span.active {
28 | animation: jump 2s ease-in-out;
29 | }
30 |
31 | @keyframes jump {
32 | 0% {
33 | transform: translate(0,0) rotate(180deg);
34 | }
35 | 100% {
36 | transform: scale(2.5) translate(0,-150px);
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/jumping-letters/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
13 |
14 |
17 | 10000
15 | Twitter Followers
16 |
18 |
19 |
22 | 6000
20 | Youtube Followers
21 |
23 |
24 |
27 | 8000
25 | Instagram Followers
26 |
12 | P
13 | R
14 | O
15 | C
16 | O
17 | D
18 | E
19 |
20 |
23 |
24 |
--------------------------------------------------------------------------------
/jumping-letters/index.js:
--------------------------------------------------------------------------------
1 | const container = document.querySelectorAll("span")
2 | console.log(container)
3 | container.forEach((item) => {
4 | item.addEventListener("click", () => {
5 | item.classList.toggle("active")
6 | })
7 | })
8 |
--------------------------------------------------------------------------------
/loader/loader.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 0;
3 | margin: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 |
8 | body {
9 | background-color: black;
10 | display: flex;
11 | justify-content: center;
12 | align-items: center;
13 | height: 100vh;
14 | }
15 |
16 | .parent {
17 | position: relative;
18 | width: 100px;
19 | height: 100px;
20 | }
21 |
22 | .tri1 {
23 | position: absolute;
24 | width: 0;
25 | height: 0;
26 | border: 50px solid transparent;
27 | border-right: 50px solid white;
28 | top:0;
29 | left:0;
30 | animation:triangle1 2s infinite linear 3s;
31 | }
32 |
33 | .tri2{
34 | position: absolute;
35 | width: 0;
36 | height: 0;
37 | border: 50px solid transparent;
38 | border-left: 50px solid white;
39 | bottom:0;
40 | right:0;
41 | /* transform: rotate(90deg); */
42 | animation:triangle2 2s infinite linear 5s;
43 | }
44 |
45 | @keyframes triangle1 {
46 | 0%,25%{
47 | transform: rotate(0deg);
48 | }
49 | 50%,75%{
50 | transform: rotate(180deg);
51 | }
52 | 100%{
53 | transform: rotate(360deg);
54 | }
55 | }
56 |
57 | @keyframes triangle2 {
58 | 0%,25%{
59 | transform: rotate(0deg);
60 | }
61 | 50%,75%{
62 | transform: rotate(1800deg);
63 | }
64 | 100%{
65 | transform: rotate(360deg);
66 | }
67 |
68 | }
--------------------------------------------------------------------------------
/loader/loader.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
11 |
12 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/loading-bar/loading.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background-color: antiquewhite;
9 | display: flex;
10 | justify-content: center;
11 | align-items: center;
12 | height: 100vh;
13 | }
14 |
15 | .container {
16 | height: 30px;
17 | width: 800px;
18 | border-radius: 10px;
19 | border: 2px solid black;
20 | }
21 |
22 | .percentage {
23 | font-size: 35px;
24 | display: flex;
25 | justify-content: center;
26 | position: absolute;
27 | top: 43%;
28 | left: 50%;
29 | }
30 |
31 | .loading-bar {
32 | background-color: orange;
33 | width: 0;
34 | height: 100%;
35 | transition: width ease .3;
36 | }
37 |
--------------------------------------------------------------------------------
/loading-bar/loading.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
13 |
14 |
15 |
16 |
17 |
18 |
11 |
12 |
15 |
19 |
22 |
23 |
--------------------------------------------------------------------------------
/loading-bar/loading.js:
--------------------------------------------------------------------------------
1 | const loadingbar = document.querySelector(".loading-bar")
2 | const percentage = document.querySelector(".percentage")
3 |
4 | window.addEventListener("DOMContentLoaded",()=>{
5 | console.log("inside dom content loaded")
6 | let progress = 0;
7 | setInterval(()=>{
8 | if (progress < 100){
9 | progress++;
10 | loadingbar.style.width = `${progress}%`
11 | percentage.textContent = `${progress}%`
12 | }
13 | },30)
14 | })
--------------------------------------------------------------------------------
/mini-calender/index.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 |
8 | body {
9 | background-color: lightblue;
10 | display: flex;
11 | justify-content: center;
12 | align-items: center;
13 | height: 100vh;
14 | }
15 |
16 | .container {
17 | width: 250px;
18 | background-color: white;
19 | box-shadow: 0 0 5px 0 rgba(0,0,0,0.5);
20 | border-radius: 10px;
21 | text-align: center;
22 | border: none;
23 | }
24 |
25 | .month {
26 | background-color: red;
27 | height: 60px;
28 | font-size: 2rem;
29 | font-weight: bold;
30 | color: white;
31 | padding: 10px;
32 | margin-bottom: 10px;
33 | border-radius: 10px 10px 0 0;
34 | }
35 |
36 | .weekday {
37 | margin-bottom: 10px;
38 | }
39 |
40 | .day {
41 | font-size: 5rem;
42 | font-weight: bold;
43 | margin-bottom: 10px;
44 | }
45 |
46 | .year {
47 | margin-bottom: 10px;
48 | }
--------------------------------------------------------------------------------
/mini-calender/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
16 | 0%
17 |
18 |
12 |
19 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/mini-calender/index.js:
--------------------------------------------------------------------------------
1 | const month = document.querySelector(".month")
2 | const weekday = document.querySelector(".weekday")
3 | const day = document.querySelector(".day")
4 | const year = document.querySelector(".year")
5 |
6 | window.addEventListener("DOMContentLoaded",()=>{
7 | const date = new Date();
8 | console.log(date,"date")
9 | console.log("month",date.toLocaleDateString("en-US",{month:"long"}))
10 | console.log("day",date.getDate())
11 | console.log("year",date.getFullYear())
12 | console.log("weekday",date.toLocaleDateString("en-US",{weekday:"long"}))
13 | day.textContent = date.getDate();
14 | year.textContent = date.getFullYear();
15 | month.textContent = date.toLocaleDateString("en-US",{month:"long"})
16 | weekday.textContent = date.toLocaleDateString("en-US",{weekday:"long"})
17 | })
--------------------------------------------------------------------------------
/mouseover/mouseover.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background-color: antiquewhite;
9 | display: flex;
10 | justify-content: center;
11 | align-items: center;
12 | height: 100vh;
13 | }
14 |
15 | .container {
16 | display: flex;
17 | justify-content: space-between;
18 | }
19 |
20 | .xpos,.ypos {
21 | width: 300px;
22 | border: 3px solid black;
23 | border-radius: 5px;
24 | margin: 40px;
25 | padding: 20px;
26 | font-size: 1.5rem;
27 | text-align: center;
28 | position: relative;
29 | }
30 |
31 | h4 {
32 | position: absolute;
33 | top: -40%;
34 | left: 20%;
35 | }
36 |
37 | #xpos-value, #ypos-value {
38 | font-size: 3.5rem;
39 | font-weight: bold;
40 | }
--------------------------------------------------------------------------------
/mouseover/mouseover.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
13 | December
14 |
15 | Saturday
16 | 30
17 | 2023
18 |
11 |
24 |
25 |
28 |
29 |
--------------------------------------------------------------------------------
/mouseover/mouseover.js:
--------------------------------------------------------------------------------
1 | const xpos = document.querySelector("#xpos-value");
2 | const ypos = document.querySelector("#ypos-value");
3 |
4 |
5 | window.addEventListener("mouseover", (event) => {
6 | console.log(event);
7 | const xclient = event.clientX;
8 | const yclient = event.clientY;
9 | xpos.textContent = xclient;
10 | ypos.textContent = yclient;
11 | } );
--------------------------------------------------------------------------------
/multiplication-app/index.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body{
8 | background-color: lightblue;
9 | display: flex;
10 | justify-content: center;
11 | align-items: center;
12 | height: 100vh;
13 | }
14 |
15 | .container {
16 | width: 350px;
17 | border-radius: 10px;
18 | text-align: center;
19 | background-color: white;
20 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
21 | }
22 |
23 | .score {
24 | text-align: right;
25 | padding: 5px;
26 | color: blue;
27 | font-size: 1.2rem;
28 | font-weight: bold;
29 | }
30 |
31 | .question {
32 | font-size: 1.75rem;
33 | margin-bottom: 10px;
34 | font-weight: bold;
35 | }
36 |
37 | input {
38 | width: 90%;
39 | padding: 10px;
40 | font-size: 1.2rem;
41 | margin-bottom: 10px;
42 | }
43 |
44 | button {
45 | width: 90%;
46 | padding: 10px;
47 | font-size: 1.2rem;
48 | margin-bottom: 10px;
49 | background-color: blue;
50 | color: white;
51 | border: none;
52 | border-radius: 5px;
53 | cursor: pointer;
54 | }
--------------------------------------------------------------------------------
/multiplication-app/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
12 |
17 | 13 | Mouse X Position: 14 |
15 | 0 16 |
18 |
23 | 19 | Mouse Y Position: 20 |
21 | 0 22 |
12 |
25 |
26 |
29 |
30 |
--------------------------------------------------------------------------------
/multiplication-app/index.js:
--------------------------------------------------------------------------------
1 | const score = document.querySelector('#score');
2 | const num1 = document.querySelector('#num1');
3 | const num2 = document.querySelector('#num2');
4 | let input = document.querySelector('#input');
5 | const submit = document.querySelector('#submit');
6 | let count = 0;
7 | submit.addEventListener('click', () => {
8 | let val = input.value;
9 | val = val.trim();
10 | val = Number(val);
11 | let mult = document.querySelector('#num1').textContent * document.querySelector('#num2').textContent;
12 | mult = Number(mult);
13 | if( document.querySelector('#input').value === '') {
14 | alert('Please enter a number')
15 | }else if (val === mult) {
16 | console.log("inside if")
17 | count++;
18 | score.textContent = count;
19 | num1.textContent = Math.floor(Math.random() * 20);
20 | num2.textContent = Math.floor(Math.random() * 20);
21 | }else {
22 | num1.textContent = Math.floor(Math.random() * 20);
23 | num2.textContent = Math.floor(Math.random() * 20);
24 | }
25 | });
--------------------------------------------------------------------------------
/new-year-countdown/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "liveServer.settings.port": 5502
3 | }
--------------------------------------------------------------------------------
/new-year-countdown/newyear.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body{
8 | background-color: antiquewhite;
9 | display: flex;
10 | justify-content: center;
11 | align-items: center;
12 | height: 100vh;
13 | }
14 |
15 | .container {
16 | background-color: white;
17 | width: 400px;
18 | border-radius: 10px;
19 | text-align: center;
20 | box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
21 | }
22 |
23 | .header {
24 | background-color: purple;
25 | padding: 20px;
26 | border-top-left-radius: 10px;
27 | border-top-right-radius: 10px;
28 | color: white;
29 | font-size: 1.3rem;
30 | }
31 |
32 | .next-year {
33 | font-size: 3.5rem;
34 | font-weight: bold;
35 | color: purple;
36 | margin-bottom: 10px;
37 | }
38 |
39 | .counter {
40 | display: flex;
41 | justify-content: space-around;
42 | background-color: purple;
43 | color: white;
44 | padding: 10px;
45 | }
46 |
47 | #days, #hours, #minutes, #seconds {
48 | font-size: 3rem;
49 | font-weight: bold;
50 | }
--------------------------------------------------------------------------------
/new-year-countdown/newyear.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
13 | Score: 0
14 |
15 |
16 | What is 5 X 5?
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
11 |
57 |
58 |
61 |
62 |
--------------------------------------------------------------------------------
/new-year-countdown/newyear.js:
--------------------------------------------------------------------------------
1 | const days = document.querySelector('#days');
2 | const hours = document.querySelector('#hours');
3 | const minutes = document.querySelector('#minutes');
4 | const seconds = document.querySelector('#seconds');
5 |
6 | const currentYear = new Date().getFullYear();
7 | const nextYear = currentYear + 1;
8 |
9 | console.log("currentYear: ", currentYear)
10 | console.log("nextYear: ", nextYear)
11 |
12 | setInterval(() => {
13 |
14 | const currentDate = new Date();
15 | const newYearDate = new Date(`January 01 ${nextYear} 00:00:00`);
16 | const totalSeconds = (newYearDate - currentDate) / 1000;
17 |
18 | const daysLeft = Math.floor(totalSeconds / 3600 / 24);
19 | const hoursLeft = Math.floor(totalSeconds / 3600) % 24;
20 | const minutesLeft = Math.floor(totalSeconds / 60) % 60;
21 | const secondsLeft = Math.floor(totalSeconds) % 60;
22 | days.innerHTML = daysLeft;
23 | hours.innerHTML = hoursLeft;
24 | minutes.innerHTML = minutesLeft;
25 | seconds.innerHTML = secondsLeft;
26 | }, 1000);
27 |
--------------------------------------------------------------------------------
/password-generator/password.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 0;
3 | margin: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background-color: antiquewhite;
9 | display: flex;
10 | justify-content: center;
11 | align-items: center;
12 | height: 100vh;
13 | }
14 |
15 | .container-password {
16 | border-radius: 10px;
17 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
18 | text-align: center;
19 | width: 350px;
20 | background-color: white;
21 | }
22 |
23 | .header {
24 | background-color: blue;
25 | color: white;
26 | padding: 15px;
27 | /* margin-bottom: 10px; */
28 | }
29 |
30 | .display {
31 | margin-bottom: 5px;
32 | position: relative;
33 | }
34 |
35 | #pass-input {
36 | width: 75%;
37 | border:none;
38 | outline: none;
39 | padding: 15px;
40 | font-size: 1.5rem;
41 | font-weight: bold;
42 | }
43 |
44 | #copy {
45 | position: absolute;
46 | top: 15px;
47 | right: 30px;
48 | background-color: blue;
49 | color: white;
50 | border: none;
51 | font-size: 1.2rem;
52 | width: 20%;
53 | padding: 5px;
54 | font-weight: bold;
55 | border-radius: 5px;
56 | }
57 |
58 | .setting {
59 | display: flex;
60 | justify-content: space-between;
61 | padding: 0 15px 7.5px 15px;
62 | font-size: large;
63 | font-weight: bold;
64 | }
65 |
66 | #generate {
67 | display: block;
68 | width: 100%;
69 | padding: 7.5px;
70 | border: none;
71 | outline: none;
72 | background-color: blue;
73 | color: white;
74 | font-size: 1.2rem;
75 | font-weight: bold;
76 | }
--------------------------------------------------------------------------------
/password-generator/password.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
12 |
16 |
21 |
22 | 13 | New Year Counter 14 |
15 |
23 |
56 |
24 |
31 | 25 | 00 26 |
27 |28 | Days 29 |
30 |
32 |
39 | 33 | 00 34 |
35 |36 | Hours 37 |
38 |
40 |
47 | 41 | 00 42 |
43 |44 | Minutes 45 |
46 |
48 |
55 | 49 | 00 50 |
51 |52 | Seconds 53 |
54 |
11 |
45 |
46 |
49 |
50 |
51 |
52 |
53 |
54 |
--------------------------------------------------------------------------------
/password-generator/password.js:
--------------------------------------------------------------------------------
1 | const lengthp = document.querySelector('#length-number');
2 | const upper = document.querySelector('#uppercase');
3 | const lower = document.querySelector('#lowercase');
4 | const number = document.querySelector('#numbers');
5 | const symbol = document.querySelector('#symbols');
6 | const passinp = document.querySelector('#pass-input');
7 | const copy = document.querySelector('#copy');
8 | const generate = document.querySelector('#generate');
9 |
10 | console.log(lengthp.value)
11 | console.log(upper.checked)
12 | console.log(lower.checked)
13 | console.log(number.checked)
14 | console.log(symbol.checked)
15 |
16 | const uppercasestr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
17 | const lowercasestr = 'abcdefghijklmnopqrstuvwxyz';
18 | const numberstr = '0123456789';
19 | const symbolstr = '!@#$%^&*()_+';
20 | let password = '';
21 | generate.addEventListener('click', () => {
22 |
23 | let str = '';
24 | if( upper.checked ){
25 | str += uppercasestr;
26 | }
27 |
28 | if( lower.checked ){
29 | str += lowercasestr;
30 | }
31 |
32 | if( number.checked ){
33 | str += numberstr;
34 | }
35 |
36 | if( symbol.checked ){
37 | str += symbolstr;
38 | }
39 | console.log(str,"str")
40 | for( let i=0; i < lengthp.value; i++ ){
41 | console.log(str.length,"str.length")
42 | let index = Math.floor(Math.random() * str.length);
43 | console.log(index,"index")
44 | console.log("Math.random()", Math.random())
45 | console.log("Math.random() * str.length", Math.random() * str.length)
46 | console.log("Math.floor(Math.random() * str.length)", Math.floor(Math.random() * str.length))
47 | console.log(str[index])
48 | password += str[index];
49 | }
50 | console.log(password,"password")
51 | passinp.value = password;
52 | });
53 |
54 | copy.addEventListener('click', () => {
55 | if( passinp.value === '' ){
56 | alert('Please Generate a Password First');
57 | }else {
58 | const newele = document.createElement('textarea');
59 | newele.value = passinp.value;
60 | document.body.appendChild(newele);
61 | newele.select();
62 | document.execCommand('copy');
63 | alert('Password Copied to Clipboard');
64 | newele.remove();
65 | }
66 | });
67 |
68 |
--------------------------------------------------------------------------------
/password-strength-checker/password-checker.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | margin: 0;
4 | padding: 0;
5 | }
6 | body {
7 | background-color: antiquewhite;
8 | display: flex;
9 | align-items: center;
10 | justify-content: center;
11 | height: 100vh;
12 | }
13 |
14 | #password {
15 | width: 350px;
16 | padding: 15px;
17 | font-size: 1.5rem;
18 | background-color: antiquewhite;
19 | border: 2px solid black;
20 | border-radius: 5px;
21 | }
22 |
23 | #password:focus {
24 | outline: none;
25 | }
--------------------------------------------------------------------------------
/password-strength-checker/password-checker.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
12 |
14 | Password Generator
13 |
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 |
43 |
44 |
12 |
13 |
23 |
24 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/password-strength-checker/password-checker.js:
--------------------------------------------------------------------------------
1 | const inputfield = document.querySelector('#password');
2 | const outputfield = document.querySelector('#output');
3 |
4 |
5 | inputfield.addEventListener('input', function() {
6 | console.log(inputfield.value);
7 | let password = inputfield.value;
8 | if (password.length < 8) {
9 | outputfield.innerText = 'Password is too short';
10 | outputfield.style.color = 'red';
11 | }else {
12 | // outputfield.innerText = 'Password is long enough';
13 | // outputfield.style.color = 'green';
14 | // a-z
15 | // A-Z
16 | // 0-9
17 | // special characters !@#$%^&*()_+{}:"<>?|[]\;',.
18 | console.log("is loercase",password.search(/[a-z]/));
19 | if( password.search(/[a-z]/) == -1 ) {
20 | outputfield.innerText = 'Password is missing a lowercase letter';
21 | outputfield.style.color = 'red';
22 | }else if (password.search(/[A-Z]/) == -1){
23 | outputfield.innerText = 'Password is missing a Uppercase letter';
24 | outputfield.style.color = 'red';
25 | }else if (password.search(/[0-9]/) == -1){
26 | outputfield.innerText = 'Password is missing a Numeric letter';
27 | outputfield.style.color = 'red';
28 | }else if (password.search(/[!\@\#\$\%\^\&\*\(\)\_\+\{\}\:\"\<\>\?\|\[\]\\\;\'\,\.]/) == -1){
29 | outputfield.innerText = 'Password is missing a Special Character letter';
30 | outputfield.style.color = 'red';
31 | }
32 | else {
33 | outputfield.innerText = 'Password is strong';
34 | outputfield.style.color = 'green';
35 | }
36 |
37 | }
38 | });
--------------------------------------------------------------------------------
/pomodoro/pomodoro.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 0;
3 | margin: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background-color: antiquewhite;
9 | display: flex;
10 | justify-content: center;
11 | align-items: center;
12 | height: 100vh;
13 | }
14 |
15 | .container {
16 | background-color: white;
17 | border-radius: 10px;
18 | width: 300px;
19 | text-align: center;
20 | box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
21 | }
22 |
23 | .header {
24 | padding: 10px;
25 | font-weight: bold;
26 | background-color: blue;
27 | color: white;
28 | margin-bottom: 10px;
29 | }
30 |
31 | .timer {
32 | font-size: 30px;
33 | font-weight: bold;
34 | margin-bottom: 10px;
35 | }
36 |
37 | button{
38 | padding: 10px;
39 | margin-bottom: 10px;
40 | border-radius: 5px;
41 | font-size: 1rem;
42 | border: none;
43 | font-weight: bold;
44 | cursor: pointer;
45 | width: 70px;
46 | color: white;
47 | }
48 |
49 | #start {
50 | background-color: blue;
51 | }
52 |
53 | #stop {
54 | background-color: red;
55 | }
56 |
57 | #reset {
58 | background-color: green;
59 | }
--------------------------------------------------------------------------------
/pomodoro/pomodoro.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
12 |
13 |
43 |
44 |
45 |
49 |
50 |
--------------------------------------------------------------------------------
/pomodoro/pomodoro.js:
--------------------------------------------------------------------------------
1 | const start = document.getElementById('start');
2 | const stop = document.getElementById('stop');
3 | const reset = document.getElementById('reset');
4 |
5 | const timer = document.getElementById('timer');
6 |
7 | let minutes = 25;
8 | let seconds = 0;
9 | let timerId;
10 |
11 | console.log(timer,"timer");
12 | start.addEventListener('click', () => {
13 | timerId=setInterval(() => {
14 |
15 | if( seconds === 0 ) {
16 | seconds = 59;
17 | if( minutes !== 0 ){
18 | minutes--;
19 | }
20 |
21 | }else{
22 | seconds--;
23 | }
24 | console.log(seconds);
25 | console.log(minutes);
26 | timer.innerHTML = `${minutes}:${seconds}`;
27 | }, 1000);
28 | });
29 |
30 | stop.addEventListener('click', () => {
31 | clearInterval(timerId);
32 | });
33 |
34 | reset.addEventListener('click', () => {
35 | minutes = 25;
36 | seconds = 0;
37 | timer.innerHTML = `${minutes}:0${seconds}`;
38 | })
--------------------------------------------------------------------------------
/qr-code/qrcode.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding:0;
3 | margin:0;
4 | box-sizing:border-box;
5 | }
6 |
7 | body {
8 | background-color: antiquewhite;
9 | display: flex;
10 | justify-content: center;
11 | align-items: center;
12 | height: 100vh;
13 | }
14 | .qr-container {
15 | border-radius: 10px;
16 | padding: 20px;
17 | width: 500px;
18 | box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
19 | background-color: white;
20 | }
21 |
22 | h2 {
23 | text-align: center;
24 | margin-bottom: 10px;
25 | }
26 |
27 | #qr-input {
28 | display: block;
29 | margin-bottom: 10px;
30 | width: 100%;
31 | font-size: 16px;
32 | padding: 10px;
33 | }
34 |
35 | #qr-button {
36 | width: 100%;
37 | padding: 10px;
38 | font-size: 1.2rem;
39 | border: none;
40 | background-color: #2ecc71;
41 | color: white;
42 | margin-bottom: 10px;
43 | }
44 |
45 | #qr-img {
46 | display: block;
47 | width: 50%;
48 | margin: 0 auto;
49 |
50 | }
--------------------------------------------------------------------------------
/qr-code/qrcode.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
14 |
16 |
17 | Pomodoro Timer
15 |
18 |
24 |
25 |
40 |
41 |
42 | 21 | 25:00 22 |
23 |
12 | ![]()
22 |
23 |
24 |
27 |
28 |
--------------------------------------------------------------------------------
/qr-code/qrcode.js:
--------------------------------------------------------------------------------
1 | const qrinput = document.getElementById('qr-input');
2 | const qrimg = document.getElementById('qr-img');
3 | const qrbutton = document.getElementById('qr-button');
4 |
5 | console.log(qrinput, qrimg, qrbutton)
6 |
7 | qrbutton.addEventListener('click', () => {
8 |
9 | const inputValue = qrinput.value;
10 | console.log(inputValue)
11 |
12 | if( !inputValue ) {
13 | alert('Please enter a valid URL');
14 | return;
15 | }else{
16 | qrimg.src= `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${inputValue}`;
17 | arimg.alt = `QR code for ${inputValue}`;
18 | }
19 |
20 | });
--------------------------------------------------------------------------------
/quiz-app/quiz-app.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 0;
3 | margin: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background-color: antiquewhite;
9 | display: flex;
10 | justify-content: center;
11 | align-items: center;
12 | height: 100vh;
13 | }
14 |
15 | .quiz-container{
16 | border-radius: 10px;
17 | box-shadow: 0 0 10px 0 black;
18 | width: 500px;
19 | height: 350px;
20 | background-color: white;
21 | position: relative;
22 | }
23 |
24 | #quiz-question {
25 | font-size: 1.5rem;
26 | padding: 20px;
27 | text-align: center;
28 | }
29 |
30 | ul {
31 | list-style: none;
32 | margin-left: 30px;
33 | }
34 |
35 | li {
36 | font-size: 1.2rem;
37 | margin-bottom: 15px;
38 | padding: 5px;
39 | cursor: pointer;
40 | }
41 |
42 | #submit {
43 | background-color: #F1C40E;
44 | border: none;
45 | color: white;
46 | font-size: 1.2rem;
47 | display: block;
48 | width: 100%;
49 | position: absolute;
50 | bottom: 0;
51 | left: 0;
52 | padding: 7.5px;
53 | border-radius: 0 0 10px 10px;
54 | }
55 |
56 | #submit:hover {
57 | background-color: #F39C12;
58 | cursor: pointer;
59 | }
--------------------------------------------------------------------------------
/quiz-app/quiz-app.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 13 | QR Code Generator 14 |
15 | 16 | 17 | 18 | 21 |
12 |
13 |
39 |
40 |
44 |
45 |
--------------------------------------------------------------------------------
/quiz-app/quiz-app.js:
--------------------------------------------------------------------------------
1 | const quiz = [
2 | {
3 | question: "What is the most used programming language in 2021?",
4 | ans1text: "Java",
5 | ans2text: "C",
6 | ans3text: "Python",
7 | ans4text: "JavaScript",
8 | answer: "JavaScript",
9 | },
10 | {
11 | question: "Who is the President of US?",
12 | ans1text: "Joe Biden",
13 | ans2text: "Donald Trump",
14 | ans3text: "Barack Obama",
15 | ans4text: "George Bush",
16 | answer: "Joe Biden",
17 | },{
18 | question: "What does HTML stand for?",
19 | ans1text: "Hypertext Markup Language",
20 | ans2text: "Cascading Style Sheet",
21 | ans3text: "Jason Object Notation",
22 | ans4text: "Helicopters Terminals Motorboats Lamborginis",
23 | answer: "Hypertext Markup Language",
24 | },
25 | {
26 | question: "What year was JavaScript launched?",
27 | ans1text: "1996",
28 | ans2text: "1995",
29 | ans3text: "1994",
30 | ans4text: "none of the above",
31 | answer: "1995",
32 |
33 | }
34 | ]
35 | const question = document.getElementById("quiz-question");
36 | console.log(question);
37 | console.log(question.textContent)
38 | const option_a = document.getElementById("text_option_a");
39 | const option_b = document.getElementById("text_option_b");
40 | const option_c = document.getElementById("text_option_c");
41 | const option_d = document.getElementById("text_option_d");
42 | const answerElement = document.querySelectorAll(".answer");
43 | console.log(option_a);
44 | console.log(option_b);
45 | console.log(option_c);
46 | console.log(option_d);
47 | console.log(option_a.textContent);
48 | console.log(option_b.textContent);
49 | console.log(option_c.textContent);
50 | console.log(option_d.textContent);
51 |
52 | const submit = document.getElementById("submit");
53 |
54 | let currentQuestion = 0;
55 | let score = 0;
56 |
57 | console.log(quiz[currentQuestion].question);
58 | console.log(quiz[currentQuestion].ans1text);
59 | console.log(quiz[currentQuestion].ans2text);
60 | console.log(quiz[currentQuestion].ans3text);
61 | console.log(quiz[currentQuestion].ans4text);
62 |
63 | question.textContent = quiz[currentQuestion].question;
64 | option_a.textContent = quiz[currentQuestion].ans1text;
65 | option_b.textContent = quiz[currentQuestion].ans2text;
66 | option_c.textContent = quiz[currentQuestion].ans3text;
67 | option_d.textContent = quiz[currentQuestion].ans4text;
68 |
69 |
70 | submit.addEventListener("click", () => {
71 | const checkedAns = document.querySelector('input[type="radio"]:checked')
72 | console.log(checkedAns);
73 | // console.log(checkedAns.nextElementSibling.textContent);
74 | if( checkedAns === null){
75 | alert("Please select an answer");
76 | }else{
77 | if( checkedAns.nextElementSibling.textContent === quiz[currentQuestion].answer){
78 | score++;
79 | }
80 |
81 | currentQuestion++;
82 | if( currentQuestion < quiz.length){
83 | question.textContent = quiz[currentQuestion].question;
84 | option_a.textContent = quiz[currentQuestion].ans1text;
85 | option_b.textContent = quiz[currentQuestion].ans2text;
86 | option_c.textContent = quiz[currentQuestion].ans3text;
87 | option_d.textContent = quiz[currentQuestion].ans4text;
88 | checkedAns.checked = false;
89 | }else{
90 | alert("Your score is " + score + " out of " + quiz.length);
91 | location.reload();
92 | }
93 |
94 | }
95 | });
96 |
97 |
--------------------------------------------------------------------------------
/quote-generator/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arbazkhan971/html-css-javascript-projects/da9fa39a8e800b46cdc58640810e158a6f031ef5/quote-generator/.DS_Store
--------------------------------------------------------------------------------
/quote-generator/quotes.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background-color: olivedrab;
9 | display: flex;
10 | justify-content: center;
11 | align-items: center;
12 | height: 100vh;
13 | }
14 |
15 |
16 | .container {
17 | background-color: white;
18 | width: 550px;
19 | text-align: center;
20 | border-radius: 10px;
21 | padding: 25px;
22 | border: none;
23 | box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
24 | position: relative;
25 | }
26 |
27 | .header {
28 | font-size: 20px;
29 | color: white;
30 | position: absolute;
31 | top: -25%;
32 | left: 10%;
33 | }
34 |
35 | #quote {
36 | font-size: 25px;
37 | margin-bottom: 20px;
38 | color: black;
39 | }
40 |
41 | #author {
42 | font-size: 20px;
43 | margin-bottom: 20px;
44 | color: black;
45 | }
46 |
47 | button {
48 | background-color: olivedrab;
49 | border: none;
50 | padding: 10px 20px;
51 | border-radius: 5px;
52 | color: white;
53 | font-size: 20px;
54 | cursor: pointer;
55 | outline: none;
56 | }
--------------------------------------------------------------------------------
/quote-generator/quotes.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 14 | Question tag 15 |
16 | 17 |-
18 |
19 |
- 20 | 21 | 22 | 23 |
- 24 | 25 | 26 | 27 |
- 28 | 29 | 30 | 31 |
- 32 | 33 | 34 | 35 |
12 |
31 |
32 |
35 |
36 |
--------------------------------------------------------------------------------
/quote-generator/quotes.js:
--------------------------------------------------------------------------------
1 | const quotes = document.querySelector('#quotes');
2 | const author = document.querySelector('#author');
3 | const btn = document.querySelector('#new-quote');
4 |
5 | async function getQuote() {
6 | const quotes = await fetch("https://api.quotable.io/quotes/random");
7 | const data = await quotes.json();
8 | console.log(quotes)
9 | console.log(data[0])
10 | console.log("author",data[0].author)
11 | console.log("content",data[0].content)
12 | quotes.textContent = data[0].content;
13 | author.textContent = "-"+ " "+data[0].author;
14 | }
15 |
16 |
17 | btn.addEventListener('click', getQuote);
--------------------------------------------------------------------------------
/random-color-card/random-color.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background-color: antiquewhite;
9 | }
10 |
11 | .container {
12 | display: flex;
13 | align-items: center;
14 | justify-content: space-between;
15 | flex-wrap: wrap;
16 | }
17 |
18 | .color-card {
19 | border: 2px solid black;
20 | border-radius: 10px;
21 | width: 250px;
22 | margin: 10px;
23 | text-align: center;
24 | height: 100px;
25 | display: flex;
26 | align-items: center;
27 | justify-content: center;
28 | font-size: 1.5rem;
29 | }
--------------------------------------------------------------------------------
/random-color-card/random-color.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
13 |
15 | Random Quote Generator
14 |
16 |
20 |
21 |
26 |
27 |
30 | 17 | if you have a dream, don't just sit there. Gather courage to believe that you can succeed and leave no stone unturned to make it a reality. 18 |
19 |
12 |
13 |
18 |
19 |
20 |
21 |
24 |
25 |
--------------------------------------------------------------------------------
/random-color-card/random-color.js:
--------------------------------------------------------------------------------
1 | const container = document.querySelector('.container');
2 |
3 | // hexcode
4 | // 0 - 9
5 | // A - F
6 | // #000000 - #FFFFFF
7 | // 01ab56
8 | const hexcode = '0123456789ABCDEF';
9 | for(let i = 0; i < 30; i++) {
10 | const box = document.createElement('div');
11 | box.classList.add('color-card');
12 | let color = '#';
13 | for(let j = 0; j < 6; j++) {
14 | color += hexcode[getRandom()];
15 | }
16 | console.log(color);
17 | box.textContent =color;
18 | box.style.backgroundColor = color;
19 | container.appendChild(box);
20 | }
21 |
22 |
23 | function getRandom(){
24 | return Math.floor(Math.random() * 16);
25 | }
26 |
27 | console.log(getRandom());
--------------------------------------------------------------------------------
/random-emoji-generator/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "liveServer.settings.port": 5501
3 | }
--------------------------------------------------------------------------------
/random-emoji-generator/random-emoji.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin:0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background-color: antiquewhite;
9 | display: flex;
10 | justify-content: center;
11 | align-items: center;
12 | height: 100vh;
13 | }
14 |
15 | .container {
16 | box-shadow: 0 0 10px rgba(0,0,0,0.5);
17 | text-align: center;
18 | padding: 10px;
19 | border-radius: 10px;
20 | width: 300px;
21 | }
22 |
23 | .heading {
24 | font-size: 20px;
25 | margin-bottom: 10px;
26 | }
27 |
28 | button {
29 | width: 120px;
30 | height: 50px;
31 | padding: 10px;
32 | border: none;
33 | box-shadow: 0 0 10px rgba(0,0,0,0.5);
34 | font-size: 20px;
35 | font-weight: 500px;
36 | border-radius: 5px;
37 | margin-bottom: 10px;
38 | }
39 |
40 | .output {
41 | font-size: 18px;
42 | }
--------------------------------------------------------------------------------
/random-emoji-generator/random-emoji.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
12 |
26 |
29 |
30 |
--------------------------------------------------------------------------------
/random-emoji-generator/random-emoji.js:
--------------------------------------------------------------------------------
1 | const clickme = document.querySelector('#btn')
2 | console.log("clickme",clickme)
3 | const output = document.querySelector(".output")
4 | console.log("output",output)
5 |
6 | const url = "https://emoji-api.com/emojis?access_key=8bd7c2327a663e6d1b92a245cc9b14a0b56f7bf6";
7 |
8 | function getRandom(n){
9 | return Math.floor(Math.random()*n)
10 | }
11 |
12 | clickme.addEventListener("click",async ()=> {
13 | console.log("hello from clickme")
14 |
15 | let getData = await fetch(url)
16 | getData = await getData.json()
17 | console.log("getdata length", getData.length)
18 | console.log("getData",getData)
19 | console.log(getRandom(getData.length),"getRandom")
20 | console.log("random getDataObject", getData[200])
21 | console.log("random getRandomData",getData[getRandom(getData.length)])
22 | const randomN = getRandom(getData.length)
23 | const character= getData[randomN].character
24 | const uniCode = getData[randomN].unicodeName
25 | console.log(character)
26 | console.log(uniCode)
27 | clickme.textContent = character
28 | output.textContent = uniCode
29 |
30 | });
--------------------------------------------------------------------------------
/random-emoji/random-emoji.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background-color: antiquewhite;
9 | display: flex;
10 | justify-content: center;
11 | align-items: center;
12 | height: 100vh;
13 | }
14 |
15 | .container {
16 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
17 | width: 350px;
18 | border-radius: 5px;
19 | padding: 15px;
20 | text-align: center;
21 | }
22 |
23 | .header {
24 | font-size: 20px;
25 | font-weight: 700;
26 | margin-bottom: 10px;
27 | }
28 |
29 | button {
30 | width: 150px;
31 | font-size: 30px;
32 | padding: 10px;
33 | border-radius: 5px;
34 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
35 | margin-bottom: 10px;
36 | border: none;
37 | }
--------------------------------------------------------------------------------
/random-emoji/random-emoji.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
13 |
15 |
16 |
19 |
20 | Random Emoji
14 |
21 |
25 | 22 | Emoji Name 23 |
24 |
12 |
13 |
26 |
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/random-emoji/random-emoji.js:
--------------------------------------------------------------------------------
1 | const clickme = document.querySelector('#btn');
2 | const emojiname = document.querySelector('#emoji-name');
3 |
4 | function getRandomInt(max) {
5 | return Math.floor(Math.random() * max);
6 | }
7 |
8 | console.log(getRandomInt(1000),"random number 0 - 9")
9 |
10 |
11 | clickme.addEventListener('click', async() => {
12 | const data = await fetch('https://emoji-api.com/emojis?access_key=8bd7c2327a663e6d1b92a245cc9b14a0b56f7bf6');
13 | console.log("data from endpoint emoji-api",data)
14 | const emojis = await data.json();
15 | console.log("emojis",emojis)
16 | console.log("emojis[0]",emojis[0])
17 | console.log("emojis[0].character",emojis[0].character)
18 | console.log("emojis[0].slug",emojis[0].slug)
19 | console.log("emojis[0].unicodeName",emojis[0].unicodeName)
20 | console.log("emojis[0].codePoint",emojis[0].codePoint)
21 | console.log("emojis[0].group",emojis[0].group)
22 | console.log(emojis.length,"emojis.lenght")
23 | const randomNumber = getRandomInt(emojis.length);
24 | const emoji = emojis[randomNumber];
25 | console.log("emoji",emoji)
26 | emojiname.innerHTML = emoji.unicodeName;
27 | clickme.innerHTML = emoji.character;
28 | });
--------------------------------------------------------------------------------
/ripple-effect/ripple.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin:0;
3 | padding:0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background-color: aquamarine;
9 | display: flex;
10 | justify-content: center;
11 | align-items: center;
12 | height: 100vh;
13 | }
14 |
15 | button {
16 | height: 50px;
17 | border: none;
18 | width: 150px;
19 | font-size: 16px;
20 | border-radius: 5px;
21 | box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
22 | outline: none;
23 | cursor: pointer;
24 | background-color: blueviolet;
25 | color: white;
26 | position: relative;
27 | overflow: hidden;
28 | }
29 |
30 | .circle {
31 | border-radius: 50%;
32 | background-color: violet;
33 | position: absolute;
34 | animation: animationname 0.6s linear;
35 | transform: scale(0);
36 | }
37 |
38 | @keyframes animationname {
39 | to{
40 | transform: scale(3);
41 | opacity: 0;
42 | }
43 | }
--------------------------------------------------------------------------------
/ripple-effect/ripple.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
14 |
16 |
17 |
20 |
21 | Random Emoji
15 |
22 |
24 |
25 | Emoji Name
23 |
12 |
15 |
16 |
17 |
20 |
21 |
--------------------------------------------------------------------------------
/ripple-effect/ripple.js:
--------------------------------------------------------------------------------
1 | const btn = document.querySelector(".button")
2 |
3 |
4 | btn.addEventListener("click", (event)=>{
5 | console.log("event",event.clientX,event.clientY)
6 | const rect = btn.getBoundingClientRect()
7 | console.log("rect",rect)
8 | let circle = document.createElement("span")
9 | circle.className = "circle"
10 | circle.style.height = circle.style.width = `${rect.width}px`
11 | circle.style.left = `${event.clientX - rect.left - rect.width/2}px`
12 | circle.style.top = `${event.clientY - rect.top - rect.width/2}px`
13 | btn.appendChild(circle)
14 | })
--------------------------------------------------------------------------------
/rock-paper-scissor/index.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background-color: lightblue;
9 | display: flex;
10 | justify-content: center;
11 | align-items: center;
12 | height: 100vh;
13 | }
14 |
15 | .container {
16 | width: 500px;
17 | border-radius: 8px;
18 | background-color: white;
19 | text-align: center;
20 | }
21 |
22 | .header {
23 | font-size: 1.5rem;
24 | background-color: blue;
25 | border-radius: 8px 8px 0 0;
26 | color: white;
27 | padding: 10px;
28 | margin-bottom: 10px;
29 | }
30 |
31 | .score {
32 | font-size: 1.2rem;
33 | display: flex;
34 | justify-content: center;
35 | margin-bottom: 10px;
36 | }
37 |
38 | #your_score,#computer_score {
39 | color: blue;
40 | font-size: 1.5rem;
41 | padding: 3px;
42 | margin: 20px;
43 | }
44 |
45 | .game {
46 | display: flex;
47 | justify-content: center;
48 | }
49 |
50 | button {
51 | margin: 10px;
52 | width: 100px;
53 | height: 100px;
54 | border-radius: 8px;
55 | border: none;
56 | font-size: 5rem;
57 | }
58 |
59 | .output {
60 | margin-bottom: 20px;
61 | }
--------------------------------------------------------------------------------
/rock-paper-scissor/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
11 |
34 |
37 |
38 |
--------------------------------------------------------------------------------
/rock-paper-scissor/index.js:
--------------------------------------------------------------------------------
1 | const your_score = document.querySelector('#your_score');
2 | const computer_score = document.querySelector('#computer_score');
3 | let your_choice = "";
4 | let computer_choice = "";
5 | const buttons = document.querySelectorAll('button');
6 |
7 | function computerChoice(){
8 | const choices = ['✊', '✋', '✌'];
9 | const randomChoice = Math.floor(Math.random() * 3);
10 | return choices[randomChoice];
11 | }
12 |
13 | console.log("computer choice: " + computerChoice());
14 |
15 | buttons.forEach((button) => {
16 | button.addEventListener('click', () => {
17 | your_choice = button.innerText;
18 | computer_choice = computerChoice();
19 | console.log("your choice: " + your_choice);
20 | console.log("computer choice: " + computer_choice);
21 | const result = findWinner();
22 | if(result == "You Win!!!"){
23 | your_score.innerText = parseInt(your_score.innerText) + 1;
24 | alert("You Win!!!")
25 | }else if(result == "You Loose!!!"){
26 | computer_score.innerText = parseInt(computer_score.innerText) + 1;
27 | alert("You Loose!!!")
28 | }else if(result == "It's Tie!!!"){
29 | your_score.innerText = parseInt(your_score.innerText) + 1;
30 | computer_score.innerText = parseInt(computer_score.innerText) + 1;
31 | alert("It's Tie!!!")
32 | }
33 |
34 | });
35 | });
36 |
37 | function findWinner(){
38 | let result = "";
39 | if( your_choice == computer_choice){
40 | result = "It's Tie!!!";
41 | }else if ( your_choice == "✊" && (computer_choice == "✋" || computer_choice == "✌")){
42 | result = "You Win!!!";
43 | }else if ( your_choice == "✋" &&(computer_choice == "✌" || computer_choice == "✊")){
44 | result = "You Loose!!!";
45 | }else if ( your_choice == "✌" && computer_choice == "✊"){
46 | result = "You Loose!!!";
47 | } else if ( your_choice == "✌" && computer_choice == "✋"){
48 | result = "You Win!!!";
49 | }
50 | return result;
51 | }
--------------------------------------------------------------------------------
/scroll-animation/index.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body{
8 | background-color: lightblue;
9 | display: flex;
10 | justify-content: center;
11 | }
12 |
13 | .cards {
14 | width: 200px;
15 | height: 200px;
16 | background-color: white;
17 | font-size: 4rem;
18 | display: flex;
19 | justify-content: center;
20 | align-items: center;
21 | border-radius: 10px;
22 | box-shadow: 0 0 5px rgba(0,0,0,0.5);
23 | margin: 10px;
24 | }
25 |
26 | .scrollbar {
27 | background-color: green;
28 | /* width: 100%; */
29 | position: fixed;
30 | height: 40px;
31 | top:0;
32 | left:0;
33 | }
--------------------------------------------------------------------------------
/scroll-animation/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
12 |
16 | 13 | Rock Paper Scissor 14 |
15 |
17 |
20 | Your Score: 0
18 |Computer Score: 0
19 |
21 |
24 |
27 |
30 |
31 |
32 |
33 |
13 |
64 |
65 |
68 |
69 |
70 |
71 |
--------------------------------------------------------------------------------
/scroll-animation/index.js:
--------------------------------------------------------------------------------
1 | const scrollbar = document.querySelector('.scrollbar')
2 |
3 | window.addEventListener('scroll', () => {
4 | console.log("scrollY",window.scrollY)
5 | console.log("scrollHeight",document.body.scrollHeight)
6 | console.log("innerHeight",window.innerHeight)
7 | let percentage = (window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100
8 | scrollbar.style.width = percentage + '%'
9 | })
10 |
11 | // scrollY == distance from the top of the page to the top of the scrollbar
12 | // innerHeight == height of the page (which includes height of the page + height of the scrollbar)
13 | // scrollHeight == total height of the page (which includes height of the page + height of the scrollbar)
--------------------------------------------------------------------------------
/sticky-navbar/index.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | .nav-container {
8 | display: flex;
9 | justify-content: space-between;
10 | background-color: black;
11 | color: white;
12 | height: 50px;
13 | position: fixed;
14 | width: 100%;
15 | z-index: 10000;
16 | }
17 |
18 | .logo {
19 | display: flex;
20 | justify-content: center;
21 | align-items: center;
22 | padding-left: 60px;
23 | font-size: 2.5rem;
24 | font-weight: bold;
25 | }
26 |
27 | .navbar {
28 | padding-right: 50px;
29 | display: flex;
30 | justify-content: space-between;
31 | align-items: center;
32 | }
33 |
34 | a {
35 | margin: 7.5px;
36 | font-size: 1.2rem;
37 | color: white;
38 | text-decoration-line: none;
39 | }
40 |
41 | .img-container {
42 | width: 100%;
43 | height: 700px;
44 | position: relative;
45 | overflow: hidden;
46 | display: block;
47 | }
48 |
49 |
50 | #coffee {
51 | position: absolute;
52 | top:50%;
53 | left:50%;
54 | transform: translate(-50%,-50%);
55 | font-size: 10rem;
56 | color: white;
57 | }
58 |
59 |
--------------------------------------------------------------------------------
/sticky-navbar/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 1
14 | 2
15 | 3
16 | 4
17 | 5
18 | 6
19 | 7
20 | 8
21 | 9
22 | 10
23 | 11
24 | 12
25 | 13
26 | 14
27 | 15
28 | 16
29 | 17
30 | 18
31 | 19
32 | 20
33 | 21
34 | 22
35 | 23
36 | 24
37 | 25
38 | 26
39 | 27
40 | 28
41 | 29
42 | 30
43 | 31
44 | 32
45 | 33
46 | 34
47 | 35
48 | 36
49 | 37
50 | 38
51 | 39
52 | 40
53 | 41
54 | 42
55 | 43
56 | 44
57 | 45
58 | 46
59 | 47
60 | 48
61 | 49
62 | 50
63 |
31 | 
32 |
36 |
32 | 33 | CoffeeZone 34 |
35 |
37 | Coffee is one of the most beloved and widely consumed beverages globally, cherished for its rich aroma, bold flavor, and the energizing kick it provides. Originating from the beans of the Coffea plant, coffee has become an integral part of cultures around the world, fostering social interactions, fueling productivity, and even inspiring entire rituals.
38 |
39 | The journey of coffee begins with the cultivation of its beans in tropical regions, commonly referred to as the "coffee belt." These regions, with their ideal climate and altitude, contribute to the distinctive characteristics of various coffee varieties. The beans are harvested, processed, and roasted to perfection, resulting in an array of coffee types ranging from light and fruity to dark and robust.
40 |
41 | Coffee has transcended its role as a mere beverage; it's a social catalyst. Cafés serve as meeting places, fostering conversations, intellectual discussions, and sometimes even quiet contemplation. The aroma of freshly brewed coffee is often associated with the warmth of human connections and the comfort of shared moments.
42 |
43 | From espresso to cappuccino, the world of coffee offers a diverse palate to suit every taste preference. The coffee culture has evolved, with enthusiasts exploring brewing methods, experimenting with single-origin beans, and appreciating the nuances of the brewing process. Whether enjoyed black or adorned with cream and sugar, coffee has the remarkable ability to adapt to individual preferences.
44 |
45 | Beyond its sensory delights, coffee boasts health benefits, with studies suggesting its positive effects on cognitive function, mood enhancement, and even certain aspects of physical health. However, moderation is key, as excessive consumption may lead to adverse effects.
46 |
47 | In today's fast-paced world, coffee has become more than a beverage; it's a daily ritual, a source of comfort, and a symbol of productivity. Its invigorating properties make it a reliable companion for early mornings, late nights, and every moment in between. As the global coffee community continues to grow, the love for this enchanting elixir shows no signs of waning, cementing its place as an enduring and cherished cultural icon.
48 | Coffee is one of the most beloved and widely consumed beverages globally, cherished for its rich aroma, bold flavor, and the energizing kick it provides. Originating from the beans of the Coffea plant, coffee has become an integral part of cultures around the world, fostering social interactions, fueling productivity, and even inspiring entire rituals.
49 |
50 | The journey of coffee begins with the cultivation of its beans in tropical regions, commonly referred to as the "coffee belt." These regions, with their ideal climate and altitude, contribute to the distinctive characteristics of various coffee varieties. The beans are harvested, processed, and roasted to perfection, resulting in an array of coffee types ranging from light and fruity to dark and robust.
51 |
52 | Coffee has transcended its role as a mere beverage; it's a social catalyst. Cafés serve as meeting places, fostering conversations, intellectual discussions, and sometimes even quiet contemplation. The aroma of freshly brewed coffee is often associated with the warmth of human connections and the comfort of shared moments.
53 |
54 | From espresso to cappuccino, the world of coffee offers a diverse palate to suit every taste preference. The coffee culture has evolved, with enthusiasts exploring brewing methods, experimenting with single-origin beans, and appreciating the nuances of the brewing process. Whether enjoyed black or adorned with cream and sugar, coffee has the remarkable ability to adapt to individual preferences.
55 |
56 | Beyond its sensory delights, coffee boasts health benefits, with studies suggesting its positive effects on cognitive function, mood enhancement, and even certain aspects of physical health. However, moderation is key, as excessive consumption may lead to adverse effects.
57 |
58 | In today's fast-paced world, coffee has become more than a beverage; it's a daily ritual, a source of comfort, and a symbol of productivity. Its invigorating properties make it a reliable companion for early mornings, late nights, and every moment in between. As the global coffee community continues to grow, the love for this enchanting elixir shows no signs of waning, cementing its place as an enduring and cherished cultural icon.
59 | Coffee is one of the most beloved and widely consumed beverages globally, cherished for its rich aroma, bold flavor, and the energizing kick it provides. Originating from the beans of the Coffea plant, coffee has become an integral part of cultures around the world, fostering social interactions, fueling productivity, and even inspiring entire rituals.
60 |
61 | The journey of coffee begins with the cultivation of its beans in tropical regions, commonly referred to as the "coffee belt." These regions, with their ideal climate and altitude, contribute to the distinctive characteristics of various coffee varieties. The beans are harvested, processed, and roasted to perfection, resulting in an array of coffee types ranging from light and fruity to dark and robust.
62 |
63 | Coffee has transcended its role as a mere beverage; it's a social catalyst. Cafés serve as meeting places, fostering conversations, intellectual discussions, and sometimes even quiet contemplation. The aroma of freshly brewed coffee is often associated with the warmth of human connections and the comfort of shared moments.
64 |
65 | From espresso to cappuccino, the world of coffee offers a diverse palate to suit every taste preference. The coffee culture has evolved, with enthusiasts exploring brewing methods, experimenting with single-origin beans, and appreciating the nuances of the brewing process. Whether enjoyed black or adorned with cream and sugar, coffee has the remarkable ability to adapt to individual preferences.
66 |
67 | Beyond its sensory delights, coffee boasts health benefits, with studies suggesting its positive effects on cognitive function, mood enhancement, and even certain aspects of physical health. However, moderation is key, as excessive consumption may lead to adverse effects.
68 |
69 | In today's fast-paced world, coffee has become more than a beverage; it's a daily ritual, a source of comfort, and a symbol of productivity. Its invigorating properties make it a reliable companion for early mornings, late nights, and every moment in between. As the global coffee community continues to grow, the love for this enchanting elixir shows no signs of waning, cementing its place as an enduring and cherished cultural icon.
70 | Coffee is one of the most beloved and widely consumed beverages globally, cherished for its rich aroma, bold flavor, and the energizing kick it provides. Originating from the beans of the Coffea plant, coffee has become an integral part of cultures around the world, fostering social interactions, fueling productivity, and even inspiring entire rituals.
71 |
72 | The journey of coffee begins with the cultivation of its beans in tropical regions, commonly referred to as the "coffee belt." These regions, with their ideal climate and altitude, contribute to the distinctive characteristics of various coffee varieties. The beans are harvested, processed, and roasted to perfection, resulting in an array of coffee types ranging from light and fruity to dark and robust.
73 |
74 | Coffee has transcended its role as a mere beverage; it's a social catalyst. Cafés serve as meeting places, fostering conversations, intellectual discussions, and sometimes even quiet contemplation. The aroma of freshly brewed coffee is often associated with the warmth of human connections and the comfort of shared moments.
75 |
76 | From espresso to cappuccino, the world of coffee offers a diverse palate to suit every taste preference. The coffee culture has evolved, with enthusiasts exploring brewing methods, experimenting with single-origin beans, and appreciating the nuances of the brewing process. Whether enjoyed black or adorned with cream and sugar, coffee has the remarkable ability to adapt to individual preferences.
77 |
78 | Beyond its sensory delights, coffee boasts health benefits, with studies suggesting its positive effects on cognitive function, mood enhancement, and even certain aspects of physical health. However, moderation is key, as excessive consumption may lead to adverse effects.
79 |
80 | In today's fast-paced world, coffee has become more than a beverage; it's a daily ritual, a source of comfort, and a symbol of productivity. Its invigorating properties make it a reliable companion for early mornings, late nights, and every moment in between. As the global coffee community continues to grow, the love for this enchanting elixir shows no signs of waning, cementing its place as an enduring and cherished cultural icon.Coffee is one of the most beloved and widely consumed beverages globally, cherished for its rich aroma, bold flavor, and the energizing kick it provides. Originating from the beans of the Coffea plant, coffee has become an integral part of cultures around the world, fostering social interactions, fueling productivity, and even inspiring entire rituals.
81 |
82 | The journey of coffee begins with the cultivation of its beans in tropical regions, commonly referred to as the "coffee belt." These regions, with their ideal climate and altitude, contribute to the distinctive characteristics of various coffee varieties. The beans are harvested, processed, and roasted to perfection, resulting in an array of coffee types ranging from light and fruity to dark and robust.
83 |
84 | Coffee has transcended its role as a mere beverage; it's a social catalyst. Cafés serve as meeting places, fostering conversations, intellectual discussions, and sometimes even quiet contemplation. The aroma of freshly brewed coffee is often associated with the warmth of human connections and the comfort of shared moments.
85 |
86 | From espresso to cappuccino, the world of coffee offers a diverse palate to suit every taste preference. The coffee culture has evolved, with enthusiasts exploring brewing methods, experimenting with single-origin beans, and appreciating the nuances of the brewing process. Whether enjoyed black or adorned with cream and sugar, coffee has the remarkable ability to adapt to individual preferences.
87 |
88 | Beyond its sensory delights, coffee boasts health benefits, with studies suggesting its positive effects on cognitive function, mood enhancement, and even certain aspects of physical health. However, moderation is key, as excessive consumption may lead to adverse effects.
89 |
90 | In today's fast-paced world, coffee has become more than a beverage; it's a daily ritual, a source of comfort, and a symbol of productivity. Its invigorating properties make it a reliable companion for early mornings, late nights, and every moment in between. As the global coffee community continues to grow, the love for this enchanting elixir shows no signs of waning, cementing its place as an enduring and cherished cultural icon.Coffee is one of the most beloved and widely consumed beverages globally, cherished for its rich aroma, bold flavor, and the energizing kick it provides. Originating from the beans of the Coffea plant, coffee has become an integral part of cultures around the world, fostering social interactions, fueling productivity, and even inspiring entire rituals.
91 |
92 | The journey of coffee begins with the cultivation of its beans in tropical regions, commonly referred to as the "coffee belt." These regions, with their ideal climate and altitude, contribute to the distinctive characteristics of various coffee varieties. The beans are harvested, processed, and roasted to perfection, resulting in an array of coffee types ranging from light and fruity to dark and robust.
93 |
94 | Coffee has transcended its role as a mere beverage; it's a social catalyst. Cafés serve as meeting places, fostering conversations, intellectual discussions, and sometimes even quiet contemplation. The aroma of freshly brewed coffee is often associated with the warmth of human connections and the comfort of shared moments.
95 |
96 | From espresso to cappuccino, the world of coffee offers a diverse palate to suit every taste preference. The coffee culture has evolved, with enthusiasts exploring brewing methods, experimenting with single-origin beans, and appreciating the nuances of the brewing process. Whether enjoyed black or adorned with cream and sugar, coffee has the remarkable ability to adapt to individual preferences.
97 |
98 | Beyond its sensory delights, coffee boasts health benefits, with studies suggesting its positive effects on cognitive function, mood enhancement, and even certain aspects of physical health. However, moderation is key, as excessive consumption may lead to adverse effects.
99 |
100 | In today's fast-paced world, coffee has become more than a beverage; it's a daily ritual, a source of comfort, and a symbol of productivity. Its invigorating properties make it a reliable companion for early mornings, late nights, and every moment in between. As the global coffee community continues to grow, the love for this enchanting elixir shows no signs of waning, cementing its place as an enduring and cherished cultural icon.
101 |
102 | Coffee is one of the most beloved and widely consumed beverages globally, cherished for its rich aroma, bold flavor, and the energizing kick it provides. Originating from the beans of the Coffea plant, coffee has become an integral part of cultures around the world, fostering social interactions, fueling productivity, and even inspiring entire rituals.
103 |
104 | The journey of coffee begins with the cultivation of its beans in tropical regions, commonly referred to as the "coffee belt." These regions, with their ideal climate and altitude, contribute to the distinctive characteristics of various coffee varieties. The beans are harvested, processed, and roasted to perfection, resulting in an array of coffee types ranging from light and fruity to dark and robust.
105 |
106 | Coffee has transcended its role as a mere beverage; it's a social catalyst. Cafés serve as meeting places, fostering conversations, intellectual discussions, and sometimes even quiet contemplation. The aroma of freshly brewed coffee is often associated with the warmth of human connections and the comfort of shared moments.
107 |
108 | From espresso to cappuccino, the world of coffee offers a diverse palate to suit every taste preference. The coffee culture has evolved, with enthusiasts exploring brewing methods, experimenting with single-origin beans, and appreciating the nuances of the brewing process. Whether enjoyed black or adorned with cream and sugar, coffee has the remarkable ability to adapt to individual preferences.
109 |
110 | Beyond its sensory delights, coffee boasts health benefits, with studies suggesting its positive effects on cognitive function, mood enhancement, and even certain aspects of physical health. However, moderation is key, as excessive consumption may lead to adverse effects.
111 |
112 | In today's fast-paced world, coffee has become more than a beverage; it's a daily ritual, a source of comfort, and a symbol of productivity. Its invigorating properties make it a reliable companion for early mornings, late nights, and every moment in between. As the global coffee community continues to grow, the love for this enchanting elixir shows no signs of waning, cementing its place as an enduring and cherished cultural icon.
113 | Coffee is one of the most beloved and widely consumed beverages globally, cherished for its rich aroma, bold flavor, and the energizing kick it provides. Originating from the beans of the Coffea plant, coffee has become an integral part of cultures around the world, fostering social interactions, fueling productivity, and even inspiring entire rituals.
114 |
115 | The journey of coffee begins with the cultivation of its beans in tropical regions, commonly referred to as the "coffee belt." These regions, with their ideal climate and altitude, contribute to the distinctive characteristics of various coffee varieties. The beans are harvested, processed, and roasted to perfection, resulting in an array of coffee types ranging from light and fruity to dark and robust.
116 |
117 | Coffee has transcended its role as a mere beverage; it's a social catalyst. Cafés serve as meeting places, fostering conversations, intellectual discussions, and sometimes even quiet contemplation. The aroma of freshly brewed coffee is often associated with the warmth of human connections and the comfort of shared moments.
118 |
119 | From espresso to cappuccino, the world of coffee offers a diverse palate to suit every taste preference. The coffee culture has evolved, with enthusiasts exploring brewing methods, experimenting with single-origin beans, and appreciating the nuances of the brewing process. Whether enjoyed black or adorned with cream and sugar, coffee has the remarkable ability to adapt to individual preferences.
120 |
121 | Beyond its sensory delights, coffee boasts health benefits, with studies suggesting its positive effects on cognitive function, mood enhancement, and even certain aspects of physical health. However, moderation is key, as excessive consumption may lead to adverse effects.
122 |
123 | In today's fast-paced world, coffee has become more than a beverage; it's a daily ritual, a source of comfort, and a symbol of productivity. Its invigorating properties make it a reliable companion for early mornings, late nights, and every moment in between. As the global coffee community continues to grow, the love for this enchanting elixir shows no signs of waning, cementing its place as an enduring and cherished cultural icon.
124 | Coffee is one of the most beloved and widely consumed beverages globally, cherished for its rich aroma, bold flavor, and the energizing kick it provides. Originating from the beans of the Coffea plant, coffee has become an integral part of cultures around the world, fostering social interactions, fueling productivity, and even inspiring entire rituals.
125 |
126 | The journey of coffee begins with the cultivation of its beans in tropical regions, commonly referred to as the "coffee belt." These regions, with their ideal climate and altitude, contribute to the distinctive characteristics of various coffee varieties. The beans are harvested, processed, and roasted to perfection, resulting in an array of coffee types ranging from light and fruity to dark and robust.
127 |
128 | Coffee has transcended its role as a mere beverage; it's a social catalyst. Cafés serve as meeting places, fostering conversations, intellectual discussions, and sometimes even quiet contemplation. The aroma of freshly brewed coffee is often associated with the warmth of human connections and the comfort of shared moments.
129 |
130 | From espresso to cappuccino, the world of coffee offers a diverse palate to suit every taste preference. The coffee culture has evolved, with enthusiasts exploring brewing methods, experimenting with single-origin beans, and appreciating the nuances of the brewing process. Whether enjoyed black or adorned with cream and sugar, coffee has the remarkable ability to adapt to individual preferences.
131 |
132 | Beyond its sensory delights, coffee boasts health benefits, with studies suggesting its positive effects on cognitive function, mood enhancement, and even certain aspects of physical health. However, moderation is key, as excessive consumption may lead to adverse effects.
133 |
134 | In today's fast-paced world, coffee has become more than a beverage; it's a daily ritual, a source of comfort, and a symbol of productivity. Its invigorating properties make it a reliable companion for early mornings, late nights, and every moment in between. As the global coffee community continues to grow, the love for this enchanting elixir shows no signs of waning, cementing its place as an enduring and cherished cultural icon.
135 |
136 |
137 |
138 |
--------------------------------------------------------------------------------
/stopwatch/stopwatch.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 0;
3 | margin: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body{
8 | background-color: antiquewhite;
9 | display: flex;
10 | justify-content: center;
11 | align-items: center;
12 | height: 100vh;
13 | }
14 |
15 | .container {
16 | border-radius: 15px;
17 | box-shadow: 0 0 10px rgba(0,0,0,0.5);
18 | background-color: white;
19 | width: 300px;
20 | text-align: center;
21 | }
22 |
23 | .header{
24 | padding: 20px;
25 | background-color: blue;
26 | color: white;
27 | font-size: 1.2rem;
28 | }
29 |
30 | .display {
31 | padding: 20px;
32 | font-size: 2.75rem;
33 | }
34 |
35 | button {
36 | border: none;
37 | background-color: blue;
38 | color: white;
39 | padding: 10px 20px;
40 | margin-bottom: 10px;
41 | border-radius: 5px;
42 | }
43 |
44 | .active {
45 | background-color: red;
46 | }
--------------------------------------------------------------------------------
/stopwatch/stopwatch.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
12 |
27 |
28 |
31 |
32 |
--------------------------------------------------------------------------------
/stopwatch/stopwatch.js:
--------------------------------------------------------------------------------
1 | const timer = document.querySelector('#timer');
2 | const start = document.querySelector('#start');
3 | const reset = document.querySelector('#reset');
4 |
5 | console.log(timer);
6 | console.log(start);
7 | console.log(reset);
8 |
9 | let active = false;
10 | let [ss,mm,hh] = [0,0,0];
11 | let interval;
12 |
13 | function watchcount(){
14 | ss++;
15 | if ( ss > 59 ) {
16 | ss = 0;
17 | mm++;
18 | if ( mm > 59){
19 | mm = 0;
20 | hh++;
21 | }
22 | }
23 | console.log(ss,mm,hh)
24 | hh = String(hh).padStart(2,'0');
25 | mm = String(mm).padStart(2,'0');
26 | ss = String(ss).padStart(2,'0');
27 | timer.textContent = `${hh}:${mm}:${ss}`;
28 | }
29 |
30 |
31 | start.addEventListener('click', () => {
32 |
33 | active = active ? false : true;
34 | if ( active ) {
35 | start.textContent = 'Stop';
36 | start.classList.add('active');
37 | interval = setInterval(watchcount,100);
38 |
39 | }else{
40 | start.textContent = 'Start';
41 | start.classList.remove('active');
42 | clearInterval(interval);
43 |
44 | }
45 |
46 | });
47 |
48 | reset.addEventListener('click', () => {
49 | clearInterval(interval);
50 | [ss,mm,hh] = [0,0,0];
51 | timer.textContent = '00:00:00';
52 | });
--------------------------------------------------------------------------------
/temp-conv/index.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background-color: lightblue;
9 | display: flex;
10 | justify-content: center;
11 | align-items: center;
12 | height: 100vh;
13 | }
14 |
15 | .container {
16 | width: 450px;
17 | background-color: white;
18 | border-radius: 10px;
19 | text-align: center;
20 | }
21 |
22 | .header {
23 | margin-bottom: 10px;
24 | background-color: black;
25 | color: white;
26 | font-size: 1rem;
27 | padding: 10px;
28 | border-radius: 10px 10px 0 0;
29 | }
30 |
31 | label {
32 | display: block;
33 | font-size: 1.5rem;
34 | margin-bottom: 10px;
35 | }
36 |
37 | input {
38 | width: 90%;
39 | padding: 10px;
40 | margin-bottom: 10px;
41 | font-size: 1rem;
42 | }
43 |
44 | .input3 {
45 | margin-bottom: 20px;
46 | }
--------------------------------------------------------------------------------
/temp-conv/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
13 |
17 | 14 | Stopwatch 15 |
16 |
18 |
22 |
26 | 19 | 00:00:00 20 |
21 |
11 |
36 |
37 |
40 |
41 |
--------------------------------------------------------------------------------
/temp-conv/index.js:
--------------------------------------------------------------------------------
1 | const calcius = document.querySelector("#calcius");
2 | const fahrenheit = document.querySelector("#farenheit");
3 | const kelvin = document.querySelector("#kelvin");
4 | console.log(calcius, fahrenheit, kelvin);
5 | // calcius to fahrenheit => (0°C × 9/5) + 32 = 32°F
6 | // calcius to kelvin => 0°C + 273.15 = 273.15K
7 | calcius.addEventListener("input", function () {
8 | let c = parseFloat(calcius.value);
9 | let f = (c * 9 / 5) + 32;
10 | let k = c + 273.15;
11 | fahrenheit.value = f;
12 | kelvin.value = k;
13 | });
14 |
15 | // fahrenheit to calcius => (32°F − 32) × 5/9 = 0°C
16 | // fahrenheit to kelvin => (32°F − 32) × 5/9 + 273.15 = 273.15K
17 | fahrenheit.addEventListener("input", function () {
18 | let f = parseFloat(fahrenheit.value);
19 | let c = (f - 32) * 5 / 9;
20 | let k = (f - 32) * 5 / 9 + 273.15;
21 | calcius.value = c;
22 | kelvin.value = k;
23 | });
24 |
25 | // kelvin to calcius => 0K − 273.15 = -273.1°C
26 | // kelvin to fahrenheit => (0K − 273.15) × 9/5 + 32 = -459.7°F
27 | kelvin.addEventListener("input", function () {
28 | let k = parseFloat(kelvin.value);
29 | let c = k - 273.15;
30 | let f = (k - 273.15) * 9 / 5 + 32;
31 | calcius.value = c;
32 | fahrenheit.value = f;
33 | });
--------------------------------------------------------------------------------
/testimonial-slider/index.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background-color: lightblue;
9 | display: flex;
10 | justify-content: center;
11 | align-items: center;
12 | height: 100vh;
13 | }
14 |
15 | .container {
16 | background-color: white;
17 | border-radius: 10px;
18 | width: 550px;
19 | text-align: center;
20 | box-shadow: 0 0 5px 0 rgba(0,0,0,0.5);
21 | }
22 |
23 | img {
24 | height: 120px;
25 | width: 120px;
26 | border-radius: 50%;
27 | margin-top: -60px;
28 | margin-bottom: 30px;
29 | }
30 |
31 | .testimonials{
32 | margin-bottom: 10px;
33 | }
34 |
35 | .author {
36 | margin-bottom: 20px;
37 | }
--------------------------------------------------------------------------------
/testimonial-slider/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
12 |
16 | 13 | Temperature Converter 14 |
15 |
17 |
20 |
21 |
22 |
23 |
26 |
27 |
28 |
29 |
30 |
33 |
34 |
35 |
11 |
25 |
28 |
29 |
--------------------------------------------------------------------------------
/testimonial-slider/index.js:
--------------------------------------------------------------------------------
1 | const testimonials = ["The Lorem Ipsum Company has been an integral part of our content marketing success. We have seen a notable increase in organic leads since we began using their services in 2012.","My busy schedule leaves little, if any, time for blogging and social media. The Lorem Ipsum Company has been a huge part of helping me grow my business through organic search and content marketing.","Jeramy and his team at the Lorem Ipsum Company whipped my website into shape just in time for tax season. I was excited by the results and am proud to direct clients to my website once again.","Professional, responsive, and able to keep up with ever-changing demand and tight deadlines: That's how I would describe Jeramy and his team at The Lorem Ipsum Company. When it comes to content marketing, you'll definitely get the 5-star treatment from the Lorem Ipsum Company!"]
2 | const authors = ["Roland Weedon","Kelsi Gordon","Seth Gewirtz","Tasha Zuzalek"]
3 | const imgUrl = "https://source.unsplash.com/random/150×150/?face"
4 | const author = document.querySelector("#author")
5 | const testimonial = document.querySelector("#testimonials")
6 | const image = document.querySelector(".image-container")
7 | const imgsarry = [
8 | "https://source.unsplash.com/random/150×150/?puma",
9 | "https://source.unsplash.com/random/150×150/?cat",
10 | "https://source.unsplash.com/random/150×150/?dog",
11 | "https://source.unsplash.com/random/150×150/?tiger",
12 | ]
13 | let count = 0
14 | function changeTest(){
15 | author.textContent = authors[count]
16 | testimonial.textContent = testimonials[count]
17 | image.innerHTML=`
12 | 
13 |
14 |
13 |
15 |
19 |
24 | 16 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum. Quisquam, voluptatum. 17 |
18 |
11 |
16 |
17 |
20 |
21 |
--------------------------------------------------------------------------------
/text-animation/text-animation.js:
--------------------------------------------------------------------------------
1 | const animatedtext =document.querySelector(".animated-text");
2 | const text = "Subscribe to Procode Youtube Channel"
3 | let i = 0;
4 | let speed = 50;
5 |
6 | function animate(){
7 | animatedtext.textContent = text.substring(0,i)
8 | i++;
9 | console.log(i)
10 | if( i > text.length){
11 | i = 0;
12 | }
13 | setTimeout(animate,speed)
14 | }
15 |
16 | animate();
--------------------------------------------------------------------------------
/text-effect/texteffect.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 | height: 100vh;
12 | background-color: antiquewhite;
13 | }
14 |
15 | .input {
16 | position: absolute;
17 | bottom:50px;
18 | border-radius: 10px;
19 | background-color: rgba(0,0,0,0.1);
20 | font-size: 18px;
21 | padding: 10px 20px;
22 | }
23 |
24 | #speed {
25 | padding: 5px;
26 | border:none;
27 | outline: none;
28 | background-color: antiquewhite;
29 | text-align: center;
30 | font-size: 18px;
31 | }
--------------------------------------------------------------------------------
/text-effect/texteffect.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
12 |
13 | Subscribe to Procode Youtube Channel, and don't forget to like and share this video
14 |
15 |
12 |
14 |
15 | Text Effect
13 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/text-effect/texteffect.js:
--------------------------------------------------------------------------------
1 | const text = document.querySelector('.text');
2 | console.log(text.innerHTML)
3 |
4 | const value = document.querySelector('#speed');
5 | console.log(value.value)
6 | let speed = 1500/value.value;
7 | let textContent = "I love programming";
8 | value.addEventListener('input', (e)=>{
9 | console.log(e.target.value)
10 | speed = 1500/e.target.value;
11 | // text.style.animationDuration = `${e.target.value}s`
12 | })
13 | let index = 1;
14 | function writeText(){
15 | text.innerHTML = textContent.slice(0, index);
16 | index++;
17 | if(index > textContent.length){
18 | index = 1;
19 | }
20 | setInterval(writeText, speed);
21 | }
22 |
23 | writeText();
24 |
--------------------------------------------------------------------------------
/tip-calculator/tipcalculator.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background-color: antiquewhite;
9 | display: flex;
10 | justify-content: center;
11 | align-items: center;
12 | height: 100vh;
13 | }
14 |
15 | .container {
16 | border-radius: 10px;
17 | box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
18 | background-color: white;
19 | width: 400px;
20 | text-align: center;
21 | padding: 20px;
22 | }
23 |
24 | .header {
25 | font-weight: 700;
26 | margin-bottom: 10px;
27 | }
28 |
29 | .bill-info {
30 | display: block;
31 | font-size: 16px;
32 | margin-bottom: 10px;
33 | }
34 |
35 | .tip-info {
36 | display: block;
37 | font-size: 16px;
38 | margin-bottom: 10px;
39 | }
40 |
41 | input {
42 | width: 100%;
43 | padding: 10px;
44 | outline: none;
45 | margin-bottom: 10px;
46 | border-radius: 5px;
47 | }
48 |
49 | button {
50 | width: 120px;
51 | padding: 10px;
52 | font-size: 16px;
53 | background-color: red;
54 | color: white;
55 | border: none;
56 | outline: none;
57 | border-radius: 5px;
58 | margin-bottom: 10px;
59 | }
60 |
61 | button:hover {
62 | cursor: pointer;
63 | background-color: #ff0099;
64 | }
65 |
66 | .result {
67 | font-size: 16px;
68 | font-weight: 700;
69 | margin-bottom: 10px;
70 | }
--------------------------------------------------------------------------------
/tip-calculator/tipcalculator.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
11 |
12 |
38 |
42 |
43 |
--------------------------------------------------------------------------------
/tip-calculator/tipcalculator.js:
--------------------------------------------------------------------------------
1 | const billamount = document.querySelector("#bill-amount");
2 | const tippercentage = document.querySelector("#tip-percentage");
3 | const calculate = document.querySelector("#calculate");
4 | const output = document.querySelector("#total-bill");
5 |
6 | calculate.addEventListener("click", (e)=>{
7 | if( billamount.value === "" || tippercentage.value === ""){
8 | alert("Please enter the values");
9 | return;
10 | }else if(billamount.value < 0 || tippercentage.value < 0){
11 | alert("Please enter positive values");
12 | return;
13 | }else{
14 | const billamountvalue = parseFloat(billamount.value);
15 | const tippercentagevalue = parseFloat(tippercentage.value);
16 | console.log(billamountvalue, tippercentagevalue)
17 | const tipamount = billamountvalue * (tippercentagevalue/100);
18 | const totalbill = billamountvalue + tipamount;
19 | output.innerText = totalbill;
20 | }
21 | });
--------------------------------------------------------------------------------
/todo/index.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background-color: lightblue;
9 | display: flex;
10 | justify-content: center;
11 | align-items: center;
12 | height: 100vh;
13 | }
14 |
15 | .container {
16 | width: 400px;
17 | background-color: white;
18 | text-align: center;
19 | border-radius: 8px;
20 | }
21 |
22 | .header {
23 | background-color: blue;
24 | font-size: 1.5rem;
25 | color: white;
26 | padding: 10px;
27 | border-radius: 8px 8px 0 0;
28 | margin-bottom: 10px;
29 | }
30 |
31 | .input {
32 | margin-top: 40px;
33 | margin-bottom: 10px;
34 | width: 100%;
35 | }
36 |
37 | input {
38 | width: 50%;
39 | padding: 10px;
40 | font-size: 1.2rem;
41 | }
42 |
43 | #Addtodo {
44 | width: 30%;
45 | padding: 10px;
46 | font-size: 1.2rem;
47 | cursor: pointer;
48 | background-color: blue;
49 | border-radius: 3px;
50 | border: none;
51 | color: white;
52 | }
53 |
54 | .output {
55 | margin-bottom: 20px;
56 | }
57 |
58 | li {
59 | list-style: none;
60 | display: flex;
61 | justify-content: space-around;
62 | align-items: center;
63 | font-size: 1.5rem;
64 | box-shadow: 0 0 2px blue;
65 | margin: 40px;
66 | border-radius: 3px;
67 | padding: 10px;
68 |
69 | }
70 |
71 | #listBtn {
72 | width: 30%;
73 | padding: 10px;
74 | font-size: 1.2rem;
75 | cursor: pointer;
76 | background-color: blue;
77 | border-radius: 3px;
78 | border: none;
79 | color: white;
80 | }
--------------------------------------------------------------------------------
/todo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
13 |
17 |
18 | 14 | Tip Calculator 15 |
16 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
31 |
32 |
33 |
37 | 34 | Your total Bill is 35 |
36 |
12 |
44 |
45 |
48 |
49 |
--------------------------------------------------------------------------------
/todo/index.js:
--------------------------------------------------------------------------------
1 | const input = document.querySelector('input');
2 | const Addtodo = document.querySelector('#Addtodo');
3 | const output = document.querySelector('#output');
4 |
5 | Addtodo.addEventListener('click', () => {
6 | const todo = input.value;
7 | if( todo === '' ) {
8 | alert('Please enter a todo');
9 | return;
10 | }else {
11 | const li = document.createElement('li');
12 | li.innerHTML = `${todo}
13 | `
14 | output.appendChild(li);
15 | input.value = '';
16 | }
17 | });
18 |
19 | function removeTodo(element){
20 | console.log(element.parentNode)
21 | console.log("inside remove Todo")
22 | element.parentNode.remove();
23 | }
--------------------------------------------------------------------------------
/verify-ui/verify.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 0;
3 | margin: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body{
8 | background-color: antiquewhite;
9 | height: 100vh;
10 | display: flex;
11 | justify-content: center;
12 | align-items: center;
13 | }
14 |
15 | .container{
16 | width: 600px;
17 | border: 1px solid black;
18 | padding: 30px;
19 | text-align: center;
20 | border-radius: 20px;
21 | background-color: white;
22 | }
23 |
24 | .container h2 {
25 | margin-bottom: 20px;
26 | font-size: 2rem;
27 | }
28 |
29 | .container p {
30 | margin-bottom: 20px;
31 | font-size: 1.2rem;
32 | }
33 |
34 | .code-container {
35 | display: flex;
36 | justify-content: center;
37 | align-items: center;
38 | margin-top: 20px;
39 | }
40 |
41 | .code{
42 | height: 100px;
43 | width: 80px;
44 | border: 1px solid black;
45 | margin: 5px;
46 | font-size: 4rem;
47 | text-align: center;
48 | }
49 |
50 | .code::-webkit-outer-spin-button,
51 | .code::-webkit-inner-spin-button {
52 | -webkit-appearance: none;
53 | margin: 0;
54 | }
55 |
56 | .code:valid{
57 | border: 1px solid green;
58 | box-shadow: 0 0 5px green;
59 | }
--------------------------------------------------------------------------------
/verify-ui/verify.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
13 |
17 | 14 | Todo Application 15 |
16 |
18 |
19 |
22 |
23 |
24 |
43 | -
25 |
- 26 | this is fist todo 27 | 28 | 29 |
- 30 | this is fist todo 31 | 32 | 33 |
- 34 | this is fist todo 35 | 36 | 37 |
- 38 | this is fist todo 39 | 40 | 41 |
11 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/verify-ui/verify.js:
--------------------------------------------------------------------------------
1 | const codes = document.querySelectorAll(".code");
2 | codes[0].focus();
3 |
4 | codes.forEach((code, idx) => {
5 | code.addEventListener("keydown", (e) => {
6 | if( e.key >= 0 && e.key <=9){
7 | codes[idx].value = "";
8 | setTimeout(() => codes[idx+1].focus(),10);
9 | }else if( e.key === "Backspace"){
10 | setTimeout(() => codes[idx-1].focus(),10);
11 | }
12 | })
13 | })
--------------------------------------------------------------------------------
/vowel-counter/index.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin:0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background-color: lightblue;
9 | display: flex;
10 | justify-content: center;
11 | align-items: center;
12 | height: 100vh;
13 | }
14 |
15 | .container {
16 | width: 400px;
17 | text-align: center;
18 | background-color: white;
19 | border-radius: 10px;
20 | box-shadow: 0 0 10px rgba(0,0,0,0.3);
21 | }
22 |
23 | .header {
24 | margin-bottom: 10px;
25 | padding-top: 10px;
26 | }
27 |
28 | #textarea {
29 | width: 90%;
30 | height: 200px;
31 | padding: 10px;
32 | margin-bottom: 10px;
33 | border-radius: 10px;
34 | }
35 |
36 | button {
37 | width: 90%;
38 | padding: 10px;
39 | border-radius: 5px;
40 | border: none;
41 | background-color: blue;
42 | cursor: pointer;
43 | color: white;
44 | margin-bottom: 10px;
45 | font-size: 1.2rem;
46 | }
47 |
48 | .output {
49 | margin-bottom: 10px;
50 | }
--------------------------------------------------------------------------------
/vowel-counter/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Verify your Account
12 |13 | We have sent a verification code to your email address. 14 | Enter the verification code that you received 15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
12 |
27 |
28 |
31 |
32 |
--------------------------------------------------------------------------------
/vowel-counter/index.js:
--------------------------------------------------------------------------------
1 | const textarea = document.querySelector('#textarea');
2 | const button = document.querySelector('#count');
3 | const output = document.querySelector('.output');
4 |
5 | button.addEventListener('click', () => {
6 | if (textarea.value === '') {
7 | output.innerHTML = 'Please enter some text';
8 | }else {
9 | //aeiou
10 | const val = textarea.value;
11 | let count = 0;
12 | for(let i=0; i
13 |
17 | 14 | Vowel Counter 15 |
16 |
18 |
19 |
20 |
21 |
24 |
25 |
26 |
12 |
26 |
29 |
30 |
--------------------------------------------------------------------------------
/weight-converter/index.js:
--------------------------------------------------------------------------------
1 | const input = document.querySelector('#input');
2 | const output = document.querySelector('#output');
3 |
4 |
5 | input.addEventListener("input",()=>{
6 | let val = input.value;
7 | let out = val*2.2;
8 | output.innerHTML = out.toFixed(2);
9 | })
--------------------------------------------------------------------------------
13 |
17 | 14 | Weight Converter 15 |
16 |
18 |
20 |
21 |
22 |
23 | Your Weight in Pounds
25 | 0
24 |