├── CheatSheet ├── API.pdf ├── CSS.pdf ├── Chrome Extensions.pdf ├── Express.pdf ├── HTML.pdf ├── JavaScript.pdf ├── MongoDB.pdf ├── React.pdf ├── VS code.pdf └── git-github.pdf ├── Class-projects ├── Image-gallery │ ├── assets │ │ ├── image1.jpg │ │ ├── image2.jpeg │ │ ├── image3.jpeg │ │ ├── image4.jpeg │ │ ├── image5.jpeg │ │ ├── image6.jpeg │ │ ├── image7.jpeg │ │ ├── image8.jpeg │ │ └── image9.jpeg │ ├── index.html │ └── style.css └── Parallex-website │ ├── assets │ ├── background.png │ ├── foreground.png │ ├── sport-1.jpg │ ├── sport-2.jpg │ └── sport-3.jpg │ ├── index.html │ └── style.css ├── Homework-project ├── 1. Tribute │ ├── assets │ │ └── Linus_Bhaya.jpeg │ ├── style.css │ └── tribute.html ├── 2. Time Table │ └── index.html ├── 3. Master card │ ├── assets │ │ └── image.png │ ├── index.html │ └── style.css ├── 4. Hello position │ ├── index.html │ └── style.css ├── 5. Mug card │ ├── assest │ │ └── mug.jpg │ ├── index.html │ └── style.css ├── 6. Blog website │ ├── assets │ │ └── search.png │ ├── blog.css │ ├── blog.html │ ├── index.html │ └── styles.css ├── 7. Figma │ ├── assets │ │ ├── Logo (1) 1.png │ │ ├── Oval-1.png │ │ ├── Oval-2.png │ │ ├── Oval.png │ │ ├── bhaiya.png │ │ ├── facebook.png │ │ ├── instagram.png │ │ ├── microsoft.png │ │ └── twitter.png │ ├── index.html │ └── style.css ├── 8. Hire me Button │ ├── index.html │ └── styles.css └── Index.txt ├── JS MINI PROJECTS ├── Counter-app │ ├── assets │ │ └── index-7daed9f8.css │ ├── index.html │ └── script.js ├── Password-Generator │ ├── assets │ │ ├── copy.svg │ │ └── favicon.ico │ ├── index.html │ ├── script.js │ └── styles.css ├── Tik-Tak-Toe │ ├── assets │ │ └── winnertime.mp4 │ ├── index.html │ ├── script.js │ └── styles.css └── Weather-app │ ├── assets │ ├── cloud.png │ ├── favicon.ico │ ├── humidity.png │ ├── loading.gif │ ├── location.png │ ├── not-found.png │ ├── search.png │ └── wind.png │ ├── index.html │ ├── script.js │ └── styles.css ├── Links-of-codehelp-project.txt ├── Notes ├── CSS-basics-1.pdf ├── CSS-basics-2.pdf ├── CSS_Animation_Lecture_Notes.pdf ├── CSS_III_Lecture_3_notes.pdf ├── CSS_II_Noteslecture_2.pdf ├── CSS_IV_lecture_4_notes_Grid.pdf ├── CSS_Lecture_1_Complete_Notes_Part_1__2.pdf ├── CSS_Transition_Notes_Animation_Lecture.pdf ├── Data_Communications_and_Networking_By_Behrouz_A.Forouzan (1).pdf ├── First_lecture_notes_HTML_1 - Copy.pdf ├── HTML-full-notes.pdf ├── HTML_2_Lecture_II_Notes..pdf ├── JS-basics-1.pdf ├── JS-basics-2.pdf ├── JS-basics-3.pdf ├── JS-basics-4.pdf ├── Lecture_3_NotesHTML_III.pdf ├── Lecture_4_Notes_HTML_IV.pdf ├── REACT_Advance_Lec_2_Notes.pdf ├── REACT_Advance_Lec_4_Notes_Redux_toolkit.pdf ├── REACT_Basics_Lec_2_Notes.pdf ├── REACT_Basics_Lec_4_Notes.pdf ├── REACT_Intermediate_Lec_2_Notes (1).pdf ├── REACT_Intermediate_Lec_2_Notes.pdf └── React_Basics_Lec_1_Notes.pdf ├── README.md └── React-project └── counter ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt └── src ├── App.css ├── App.js ├── App.test.js └── index.js /CheatSheet/API.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/CheatSheet/API.pdf -------------------------------------------------------------------------------- /CheatSheet/CSS.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/CheatSheet/CSS.pdf -------------------------------------------------------------------------------- /CheatSheet/Chrome Extensions.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/CheatSheet/Chrome Extensions.pdf -------------------------------------------------------------------------------- /CheatSheet/Express.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/CheatSheet/Express.pdf -------------------------------------------------------------------------------- /CheatSheet/HTML.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/CheatSheet/HTML.pdf -------------------------------------------------------------------------------- /CheatSheet/JavaScript.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/CheatSheet/JavaScript.pdf -------------------------------------------------------------------------------- /CheatSheet/MongoDB.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/CheatSheet/MongoDB.pdf -------------------------------------------------------------------------------- /CheatSheet/React.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/CheatSheet/React.pdf -------------------------------------------------------------------------------- /CheatSheet/VS code.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/CheatSheet/VS code.pdf -------------------------------------------------------------------------------- /CheatSheet/git-github.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/CheatSheet/git-github.pdf -------------------------------------------------------------------------------- /Class-projects/Image-gallery/assets/image1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Class-projects/Image-gallery/assets/image1.jpg -------------------------------------------------------------------------------- /Class-projects/Image-gallery/assets/image2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Class-projects/Image-gallery/assets/image2.jpeg -------------------------------------------------------------------------------- /Class-projects/Image-gallery/assets/image3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Class-projects/Image-gallery/assets/image3.jpeg -------------------------------------------------------------------------------- /Class-projects/Image-gallery/assets/image4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Class-projects/Image-gallery/assets/image4.jpeg -------------------------------------------------------------------------------- /Class-projects/Image-gallery/assets/image5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Class-projects/Image-gallery/assets/image5.jpeg -------------------------------------------------------------------------------- /Class-projects/Image-gallery/assets/image6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Class-projects/Image-gallery/assets/image6.jpeg -------------------------------------------------------------------------------- /Class-projects/Image-gallery/assets/image7.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Class-projects/Image-gallery/assets/image7.jpeg -------------------------------------------------------------------------------- /Class-projects/Image-gallery/assets/image8.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Class-projects/Image-gallery/assets/image8.jpeg -------------------------------------------------------------------------------- /Class-projects/Image-gallery/assets/image9.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Class-projects/Image-gallery/assets/image9.jpeg -------------------------------------------------------------------------------- /Class-projects/Image-gallery/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Image gallery | Khushi 8 | 9 | 10 | 11 |
12 |
13 | 14 |

My Gallery

15 | 16 |
17 |
18 | 19 |
image 1
20 |
21 |
22 | 23 |
image 2
24 |
25 |
26 | 27 |
image 3
28 |
29 |
30 | 31 |
image 4
32 |
33 |
34 | 35 |
image 5
36 |
37 |
38 | 39 |
image 6
40 |
41 |
42 | 43 |
image 7
44 |
45 |
46 | 47 |
image 8
48 |
49 |
50 | 51 |
image 9
52 |
53 |
54 |
55 |
56 | 57 | -------------------------------------------------------------------------------- /Class-projects/Image-gallery/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .wrapper{ 8 | height: 100vh; 9 | overflow-x: hidden; 10 | overflow-y: auto; 11 | } 12 | 13 | .container{ 14 | height: 100%; 15 | max-width: 80vw; 16 | margin: 0 auto; 17 | } 18 | 19 | .container h1{ 20 | text-align: center; 21 | font-size: 3rem; 22 | margin: 25px 0; 23 | } 24 | 25 | .gallery{ 26 | display: flex; 27 | flex-wrap: wrap; 28 | justify-content: space-around; 29 | position: relative; 30 | } 31 | 32 | .card{ 33 | width: 30%; 34 | margin-bottom: 25px; 35 | box-shadow: 0 0 20px #333; 36 | transition: all 1.2s; 37 | filter: grayscale(1); 38 | border-radius: 20px; 39 | overflow: hidden; 40 | } 41 | 42 | .card img{ 43 | position: relative; 44 | width: 100%; 45 | height: 100%; 46 | } 47 | 48 | .card:hover{ 49 | transform: scale(1.03); 50 | filter: grayscale(0); 51 | } 52 | 53 | .card figcaption{ 54 | position: absolute; 55 | opacity: 0; 56 | } 57 | 58 | .card:hover figcaption{ 59 | font-weight: 500; 60 | font-size: 16px; 61 | bottom: 0; 62 | left: 0; 63 | padding: 25px; 64 | width: 100%; 65 | height: 20%; 66 | color: #fff; 67 | background-image: linear-gradient(0 deg,rgba(0,0,50,0.5)0%,rgba(255,5,255,0)); 68 | position: absolute; 69 | border-radius: 0 0 20px 20px; 70 | opacity: 1; 71 | } -------------------------------------------------------------------------------- /Class-projects/Parallex-website/assets/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Class-projects/Parallex-website/assets/background.png -------------------------------------------------------------------------------- /Class-projects/Parallex-website/assets/foreground.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Class-projects/Parallex-website/assets/foreground.png -------------------------------------------------------------------------------- /Class-projects/Parallex-website/assets/sport-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Class-projects/Parallex-website/assets/sport-1.jpg -------------------------------------------------------------------------------- /Class-projects/Parallex-website/assets/sport-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Class-projects/Parallex-website/assets/sport-2.jpg -------------------------------------------------------------------------------- /Class-projects/Parallex-website/assets/sport-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Class-projects/Parallex-website/assets/sport-3.jpg -------------------------------------------------------------------------------- /Class-projects/Parallex-website/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Parallex | Khushi 8 | 9 | 10 | 11 | 12 |
13 | 14 |
15 | 16 | 17 |

ADVENTURE

18 |
19 | 20 |
21 |

22 | Adventure Time ! 23 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui necessitatibus commodi alias? Veritatis, eligendi nisi. Amet exercitationem, recusandae dolore corrupti laborum aperiam repellendus natus voluptatem quam atque aliquam beatae. Odit deserunt nisi optio eveniet? Aliquam possimus molestiae, ullam illum accusamus autem accusantium! Voluptate laboriosam eum saepe ex veritatis est? Numquam eaque autem labore provident dolorum, velit omnis mollitia eos adipisci! 24 |
25 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad, itaque hic tempore rem eveniet sed repudiandae molestiae magnam aut quod consequatur, harum, totam beatae fugiat ipsam? Explicabo, blanditiis quod similique fugiat fugit ea expedita deleniti doloribus, delectus perferendis, tempore amet maiores libero sapiente voluptatem reprehenderit? Illum alias commodi cupiditate corporis mollitia ab quaerat, ipsum est excepturi vitae a sunt optio. 26 |

27 | 28 |
29 |

BIKING

30 |
31 | 32 |

33 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui necessitatibus commodi alias? Veritatis, eligendi nisi. Amet exercitationem, recusandae dolore corrupti laborum aperiam repellendus natus voluptatem quam atque aliquam beatae. Odit deserunt nisi optio eveniet? Aliquam possimus molestiae, ullam illum accusamus autem accusantium! Voluptate laboriosam eum saepe ex veritatis est? Numquam eaque autem labore provident dolorum, velit omnis mollitia eos adipisci! 34 |
35 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad, itaque hic tempore rem eveniet sed repudiandae molestiae magnam aut quod consequatur, harum, totam beatae fugiat ipsam? Explicabo, blanditiis quod similique fugiat fugit ea expedita deleniti doloribus, delectus perferendis, tempore amet maiores libero sapiente voluptatem reprehenderit? Illum alias commodi cupiditate corporis mollitia ab quaerat, ipsum est excepturi vitae a sunt optio. 36 |

37 | 38 |
39 |

PARA GLIDING

40 |
41 | 42 |

43 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui necessitatibus commodi alias? Veritatis, eligendi nisi. Amet exercitationem, recusandae dolore corrupti laborum aperiam repellendus natus voluptatem quam atque aliquam beatae. Odit deserunt nisi optio eveniet? Aliquam possimus molestiae, ullam illum accusamus autem accusantium! Voluptate laboriosam eum saepe ex veritatis est? Numquam eaque autem labore provident dolorum, velit omnis mollitia eos adipisci! 44 |
45 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad, itaque hic tempore rem eveniet sed repudiandae molestiae magnam aut quod consequatur, harum, totam beatae fugiat ipsam? Explicabo, blanditiis quod similique fugiat fugit ea expedita deleniti doloribus, delectus perferendis, tempore amet maiores libero sapiente voluptatem reprehenderit? Illum alias commodi cupiditate corporis mollitia ab quaerat, ipsum est excepturi vitae a sunt optio. 46 |

47 | 48 |
49 |

SURFING

50 |
51 | 52 |

53 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui necessitatibus commodi alias? Veritatis, eligendi nisi. Amet exercitationem, recusandae dolore corrupti laborum aperiam repellendus natus voluptatem quam atque aliquam beatae. Odit deserunt nisi optio eveniet? Aliquam possimus molestiae, ullam illum accusamus autem accusantium! Voluptate laboriosam eum saepe ex veritatis est? Numquam eaque autem labore provident dolorum, velit omnis mollitia eos adipisci! 54 |
55 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad, itaque hic tempore rem eveniet sed repudiandae molestiae magnam aut quod consequatur, harum, totam beatae fugiat ipsam? Explicabo, blanditiis quod similique fugiat fugit ea expedita deleniti doloribus, delectus perferendis, tempore amet maiores libero sapiente voluptatem reprehenderit? Illum alias commodi cupiditate corporis mollitia ab quaerat, ipsum est excepturi vitae a sunt optio. 56 |

57 | 58 |
59 | 60 |
61 | 62 | 63 | -------------------------------------------------------------------------------- /Class-projects/Parallex-website/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: 'poppins-bold', sans-serif; 6 | } 7 | 8 | @import url('https://fonts.googleapis.com/css?family=Poppins:400,700,900'); 9 | 10 | #wrapper{ 11 | height: 100vh; 12 | overflow-x: hidden; 13 | overflow-y: auto; 14 | perspective: 10px; 15 | } 16 | 17 | .container{ 18 | position: relative; 19 | display: flex; 20 | justify-content: center; 21 | align-content: center; 22 | height: 100%; 23 | transform-style: preserve-3d; 24 | z-index: -1; 25 | } 26 | 27 | .background{ 28 | transform: translateZ(-40px) scale(5.05); 29 | } 30 | 31 | .foreground{ 32 | transform: translateZ(-20px) scale(3); 33 | } 34 | 35 | .background, .forground{ 36 | position: absolute; 37 | height: 100%; 38 | width: 100%; 39 | z-index: -1; 40 | } 41 | 42 | h1{ 43 | position: absolute; 44 | align-self: center; 45 | color: white; 46 | font-size: 8rem; 47 | top: 5rem; 48 | letter-spacing: 5px; 49 | font-weight: 800; 50 | text-shadow: 0 0 10px rgba(0,0,0,0.3); 51 | } 52 | 53 | section{ 54 | color: white; 55 | } 56 | 57 | p{ 58 | background-color: rgb(45,45,45); 59 | padding: 5rem ; 60 | color: white; 61 | font-size: 1.5rem; 62 | } 63 | 64 | p span{ 65 | font-size: 70px; 66 | display: block; 67 | } 68 | 69 | .bg1{ 70 | background-image: url(./assets/sport-1.jpg); 71 | } 72 | 73 | .bg2{ 74 | background-image: url(./assets/sport-2.jpg); 75 | } 76 | 77 | .bg3{ 78 | background-image: url(./assets/sport-3.jpg); 79 | } 80 | 81 | .bg{ 82 | position: relative; 83 | background-size: cover; 84 | background-attachment: fixed; 85 | height: 500px; 86 | width: 100%; 87 | } 88 | 89 | h3{ 90 | background-color: white; 91 | padding: 0.5rem 2.5rem; 92 | color: black; 93 | display: inline-block; 94 | position: absolute; 95 | transform: translateX(-50%) translateY(-50%); 96 | top:50%; 97 | left:50%; 98 | font-weight: 600; 99 | font-size: 3.5rem; 100 | } -------------------------------------------------------------------------------- /Homework-project/1. Tribute/assets/Linus_Bhaya.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Homework-project/1. Tribute/assets/Linus_Bhaya.jpeg -------------------------------------------------------------------------------- /Homework-project/1. Tribute/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | .container{ 7 | font-family:cursive; 8 | width: 70%; 9 | margin: 0 auto; 10 | } 11 | 12 | ::-webkit-scrollbar{ 13 | display: none; 14 | } 15 | 16 | html{ 17 | scroll-behavior: smooth; 18 | } 19 | 20 | body{ 21 | background-image: linear-gradient(to bottom right,rgba(255, 255, 0, 0.356),rgb(38, 165, 207)); 22 | } 23 | 24 | aside{ 25 | float: right; 26 | width: 40%; 27 | } 28 | 29 | header{ 30 | margin: 2vh 2vw; 31 | } 32 | 33 | h1{ 34 | text-align: center; 35 | font-size: 6vh; 36 | } 37 | 38 | p{ 39 | font-size: large; 40 | } 41 | 42 | nav{ 43 | margin: 2vh 2vh; 44 | } 45 | 46 | a{ 47 | text-decoration: none; 48 | color: black; 49 | font-weight: bold; 50 | padding: 1vw; 51 | font-family: 'Courier New', Courier, monospace; 52 | } 53 | 54 | a:hover{ 55 | text-shadow: 1px 1px 1px blue; 56 | } 57 | 58 | figure{ 59 | text-align: center; 60 | } 61 | 62 | figure>img{ 63 | border: 2px solid black; 64 | box-shadow: 3px 3px 1px 0 grey; 65 | } 66 | 67 | .main{ 68 | margin: 2vh 2vw; 69 | } 70 | 71 | main>h2{ 72 | margin-top: 1vh; 73 | margin-bottom: 1vh; 74 | } 75 | 76 | ul{ 77 | list-style-type: none; 78 | } 79 | 80 | footer{ 81 | margin: 2vh 2vw; 82 | } 83 | 84 | footer>h3{ 85 | padding: 1vh; 86 | } 87 | 88 | img{ 89 | width: fit-content; 90 | } -------------------------------------------------------------------------------- /Homework-project/1. Tribute/tribute.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tribute page | Khushi 8 | 9 | 10 | 11 |
12 |
13 |

Linus Torvalds

14 |

The Creator of Linux

15 |
16 | 17 | 22 | 23 |
24 | Linus Torvalds image 25 |
A phtotograph of Linus Torvalds
26 |
27 | 28 |
29 |

Biography

30 |

Linus Torvalds is a Finnish-American software engineer who is the creator and principal developer of the Linux kernel, which is the kernel for a number of operating systems. He also created the version control system Git. Torvalds was born on December 28, 1969 in Helsinki, Finland. He studied computer science at the University of Helsinki, and he developed the Linux kernel as a student project in 1991. Since then, the Linux kernel has become one of the most widely used kernels in the world, powering everything from smartphones to supercomputers.

31 | 32 |

Achievements

33 | 45 | 46 |

"One of the most influential people in the world."

47 | --Time magazine The Famous People
48 |
49 | 50 | 62 |
63 | 64 | -------------------------------------------------------------------------------- /Homework-project/2. Time Table/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Table | Khushi 8 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 |
DaySeminar
ScheduleTopic
BeginEnd
Monday8:00 am5:00 pminroduction to XML
Validity DTD & Relax NG
Tuesday8:00 am11:00 amX path
11:00 am2:00 pm
2:00 pm5:00 pmXSL Transformation
Wednesday8:00 pm12:00 pmXSL formating object
64 | 65 | -------------------------------------------------------------------------------- /Homework-project/3. Master card/assets/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Homework-project/3. Master card/assets/image.png -------------------------------------------------------------------------------- /Homework-project/3. Master card/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Master-card | Khushi 8 | 9 | 10 | 11 |
12 |
13 | 14 |

Web Development Maste
Course @dot batch

15 |
16 | ₹4500 17 | ₹6999 18 | 42% off 19 |
20 |
21 | 22 | -------------------------------------------------------------------------------- /Homework-project/3. Master card/style.css: -------------------------------------------------------------------------------- 1 | .wrapper{ 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | } 6 | 7 | .card>img{ 8 | width: 100%; 9 | height: 100%; 10 | border-radius: 20px; 11 | } 12 | 13 | .card{ 14 | border: 1px solid black; 15 | padding: 1vh 1vw; 16 | /* margin: 10%; */ 17 | box-shadow: 3px 8px 3px grey; 18 | font-family: Arial, Helvetica, sans-serif; 19 | font-weight: bold; 20 | font-size: 20px; 21 | /* height: 400px; */ 22 | width: 30%; 23 | padding-bottom: 20px; 24 | } 25 | 26 | #_1{ 27 | color: rgb(13, 84, 218); 28 | } 29 | 30 | #_3{ 31 | background-color: aqua; 32 | border: 1px solid aqua; 33 | color:rgb(255, 255, 255); 34 | } -------------------------------------------------------------------------------- /Homework-project/4. Hello position/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Position | Khushi 8 | 9 | 10 | 11 |
12 |
Top Left
13 |
Top Right
14 |
Bottom Left
15 |
Bottom Right
16 |
Center
17 |
18 | 19 | -------------------------------------------------------------------------------- /Homework-project/4. Hello position/style.css: -------------------------------------------------------------------------------- 1 | .box { 2 | border: 1px solid black; 3 | width: 600px; 4 | height: 400px; 5 | position: absolute; 6 | } 7 | 8 | .box1 { 9 | position: absolute; 10 | right: 0; 11 | } 12 | 13 | .box2 { 14 | position: absolute; 15 | left: 0; 16 | } 17 | 18 | .box3 { 19 | position: absolute; 20 | bottom: 0; 21 | } 22 | 23 | .box4 { 24 | position: absolute; 25 | bottom: 0; 26 | right: 0; 27 | } 28 | 29 | .box5 { 30 | position: absolute; 31 | top: 50%; 32 | width: 100%; 33 | text-align: center; 34 | } -------------------------------------------------------------------------------- /Homework-project/5. Mug card/assest/mug.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Homework-project/5. Mug card/assest/mug.jpg -------------------------------------------------------------------------------- /Homework-project/5. Mug card/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Coffee mug | Khushi 8 | 9 | 10 | 11 |
12 |
13 | 14 |
15 |
16 |

COFFEE MUG

17 |

White Coffee Mug

18 |
19 | Coffee Mugs are designed to express emotions. 20 | These are acclaimed for their amazing designs 21 | & superior quality. 22 |
23 |
24 | ₹ 149 25 | ₹ 230 26 |
27 | 28 |
29 |
30 | 31 | -------------------------------------------------------------------------------- /Homework-project/5. Mug card/style.css: -------------------------------------------------------------------------------- 1 | 2 | @import url(https://fonts.google.com/specimen/Montserrat); 3 | 4 | *{ 5 | padding: 0; 6 | margin: 0; 7 | box-sizing: border-box; 8 | /* font-family: 'Montserrat', sans-serif; */ 9 | } 10 | 11 | body{ 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | background-color: hsl(30, 38%, 92%); 16 | } 17 | 18 | .box{ 19 | margin: 10%; 20 | width: 700px; 21 | height: 420px; 22 | display: flex; 23 | object-fit: cover; 24 | border-radius: 20px; 25 | overflow: hidden; 26 | } 27 | 28 | img{ 29 | height: 420px; 30 | width: 300px; 31 | } 32 | 33 | .content{ 34 | position: relative; 35 | font-family: 'Montserrat', sans-serif; 36 | color: #6c7289; 37 | display: flex; 38 | flex-direction: column; 39 | background-color: white; 40 | } 41 | 42 | .tittle{ 43 | align-self: center; 44 | letter-spacing: 8px; 45 | padding: 10px; 46 | color: #6c7289; 47 | } 48 | 49 | .heading{ 50 | color:black; 51 | margin: 10px 22px; 52 | font-size: 32px; 53 | } 54 | 55 | .text{ 56 | width: 80%; 57 | font-size: 18px; 58 | margin: 10px 20px; 59 | font-style: italic; 60 | } 61 | 62 | .price{ 63 | margin: 19px; 64 | } 65 | 66 | .rprice{ 67 | color: #3c8067; 68 | font-size: 32px; 69 | font-weight: bold; 70 | } 71 | 72 | .wprice{ 73 | font-size:16px; 74 | color:#6c7289; 75 | margin-left: 10px; 76 | font-weight: 400; 77 | } 78 | 79 | button{ 80 | background-color: #3c8067; 81 | color:white; 82 | align-self: center; 83 | width: 150px; 84 | border: none; 85 | margin: 20px 30px; 86 | border-radius: 5px; 87 | font-size: 20px; 88 | padding: 7px; 89 | } -------------------------------------------------------------------------------- /Homework-project/6. Blog website/assets/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Homework-project/6. Blog website/assets/search.png -------------------------------------------------------------------------------- /Homework-project/6. Blog website/blog.css: -------------------------------------------------------------------------------- 1 | 2 | .wrapper{ 3 | padding: 0; 4 | margin: 0; 5 | box-sizing: border-box; 6 | display: flex; 7 | justify-content: center; 8 | } 9 | 10 | .content{ 11 | width: 80%; 12 | max-width: 800px; 13 | border: 3px solid black; 14 | margin: 1% 5%; 15 | padding: 1% 5%; 16 | height: 800px; 17 | font-weight: bold; 18 | color: white; 19 | background-image: linear-gradient(to right, #434343 0%, black 100%); 20 | } 21 | 22 | header{ 23 | display: flex; 24 | justify-content: space-between; 25 | align-items: baseline; 26 | } 27 | 28 | a{ 29 | color: wheat; 30 | display: inline; 31 | } 32 | 33 | header>h1{ 34 | display: inline; 35 | text-align: center; 36 | font-size: 4rem; 37 | text-decoration: underline; 38 | } 39 | 40 | header>img{ 41 | height: 4rem; 42 | } 43 | 44 | main{ 45 | display: grid; 46 | grid-template-columns: repeat(2 , 1fr); 47 | gap: 2%; 48 | } 49 | 50 | .box{ 51 | border: 1px solid gray; 52 | /* box-shadow: 2px 2px 2px blue; */ 53 | padding: 5%; 54 | } 55 | 56 | h2{ 57 | font-size: 2rem; 58 | margin-top: -5px; 59 | } 60 | 61 | .date{ 62 | font-family: 'Courier New', Courier, monospace; 63 | margin-top: -25px; 64 | font-size: 13px; 65 | text-decoration: underline; 66 | } 67 | 68 | .Blue{ 69 | color:yellow; 70 | /* box-shadow: 2px 2px 2px blue; */ 71 | } 72 | 73 | .a{ 74 | box-shadow: 2px 2px 5px yellow; 75 | } 76 | 77 | .b{ 78 | box-shadow: 2px 2px 5px green; 79 | } 80 | 81 | 82 | .Green{ 83 | color:rgb(34, 180, 34); 84 | } -------------------------------------------------------------------------------- /Homework-project/6. Blog website/blog.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Blog | Khushi 8 | 9 | 10 | 11 |
12 |
13 |
14 | Subscribe 15 |

Blog Title

16 | 17 |
18 |
19 |
20 | Word 21 |

Example Blog Post

22 |
Nov 12
23 |

This card represents an example blog post

24 | Continue Reading 25 |
26 | 27 |
28 | Design 29 |

Post title

30 |
Nov 11
31 |

This is a video card with supporting text below as a natural lead in to additional content.

32 | Continue Reading 33 |
34 | 35 |
36 | Word 37 |

Example Blog Post

38 |
Nov 12
39 |

This card represents an example blog post

40 | Continue Reading 41 |
42 | 43 |
44 | Design 45 |

Post title

46 |
Nov 11
47 |

This is a video card with supporting text below as a natural lead in to additional content.

48 | Continue Reading 49 |
50 | 51 |
52 | Word 53 |

Example Blog Post

54 |
Nov 12
55 |

This card represents an example blog post

56 | Continue Reading 57 |
58 | 59 |
60 | Design 61 |

Post title

62 |
Nov 11
63 |

This is a video card with supporting text below as a natural lead in to additional content.

64 | Continue Reading 65 |
66 | 67 |
68 |
69 |
70 | 71 | -------------------------------------------------------------------------------- /Homework-project/6. Blog website/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Blog | Khushi 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 | Subscribe 16 |

Blog-Title

17 | 18 |
19 |
20 |

Sample blog post

21 |
Jan 11 , MDN NEW
22 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit optio cupiditate esse ipsum. Error officiis, officia illo placeat dolorem dolor tempora, sunt iste fugiat deserunt alias mollitia aut dolorum velit.

23 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt qui quod hic id doloremque enim?Laudantium fugiat srepellat minima repudiandae sit aliquam, labore ullam dolorum expedita totam ea cupiditate illum. Exercitationem, recusandae a corrupti dolore impedit quidem facilis esse. Libero cupiditate corrupti aut quibusdam totam consequatur perferendis, ex at maxime in ratione molestiae animi inventore iste quasi a omnis doloribus!

24 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet esse, aliquid, est velit cumque dignissimos eaque hic voluptatibus ipsam voluptatum cum vero eius asperiores blanditiis unde quo quia numquam itaque!

25 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis, fugiat. Facilis vitae incidunt velit. Quis, veritatis atque? Amet quas laboriosam, modi sapiente reprehenderit quae saepe. Animi iusto obcaecati necessitatibus itaque! Yeah!.....hui n baat..

26 | 27 |

Heading

28 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam esse, nam reiciendis, quibusdam at neque veritatis, nemo maxime inventore officia perferendis! Hic laudantium sunt neque sit quos incidunt nihil quibusdam.

29 | 30 |

Sub-Heading

31 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid excepturi molestias assumenda neque.

32 | 33 | Velit neque, obcaecati beatae ea tenetur cum maxime fuga est commodi totam, rerum porro! Doloremque, soluta magni.

34 | 35 |

Sub-Heading

36 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam veniam vitae ipsam quisquam consequuntur, quis fugit eveniet nostrum sunt est tempora architecto cum quasi deserunt quas dolores fuga perspiciatis recusandae?

37 |
    38 |
  • It is a long established fact that a reader will be distracted
    • 39 |
  • make a type specimen book
    • 40 |
  • Contrary to popular belief,
    • 41 |
42 |

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour,

43 |
    44 |
  1. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary,making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, 45 |
    2. 46 |
  2. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
    3. 47 |
  3. The standard chunk of Lorem Ipsum used since the 1500s is below for those interested
    4. 48 |
49 |

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

50 |
51 | 67 |
68 |
69 | 70 | -------------------------------------------------------------------------------- /Homework-project/6. Blog website/styles.css: -------------------------------------------------------------------------------- 1 | 2 | @import url(https://fonts.google.com/specimen/Poiret+One); 3 | 4 | .wrapper{ 5 | padding: 0; 6 | margin: 0; 7 | box-sizing: border-box; 8 | display: flex; 9 | justify-content: center; 10 | } 11 | 12 | body{ 13 | /* background-image: linear-gradient(120deg, #000428,#004e92); */ 14 | /* background-image: linear-gradient(to right, #434343 0%, black 100%); */ 15 | /* background-image: linear-gradient(to right, 0%, black 100%); */ 16 | color: white; 17 | /* text-shadow: 1px 1px rgb(175, 61, 61); */ 18 | font-family: 'Poiret One', cursive; 19 | } 20 | 21 | .container{ 22 | width: 90%; 23 | max-width: 800px; 24 | background-image: linear-gradient(to right, #434343 0%, black 100%); 25 | padding: 2% 10%; 26 | display: grid; 27 | grid-template-columns: 75% 25%; 28 | grid-template-rows: 5% 95%; 29 | grid-template-areas: 30 | "hd hd" 31 | "main sd"; 32 | /* gap: 1rem; */ 33 | } 34 | 35 | p{ 36 | text-shadow: 1px 1px rgb(175, 61, 61); 37 | } 38 | 39 | header{ 40 | grid-area: hd; 41 | /* position: relative; */ 42 | display: flex; 43 | justify-content: space-between; 44 | align-items: center; 45 | } 46 | 47 | main{ 48 | grid-area: main; 49 | padding-right: 2rem; 50 | } 51 | 52 | aside{ 53 | grid-area: sd; 54 | } 55 | 56 | a{ 57 | color: rgb(209, 166, 86); 58 | text-decoration: none; 59 | cursor: pointer; 60 | font-style: italic; 61 | font-family: cursive; 62 | } 63 | 64 | a:hover{ 65 | color: white; 66 | } 67 | 68 | header>h1{ 69 | color: rgb(209, 143, 62); 70 | text-shadow: 2px 2px 2px bisque; 71 | text-align: center; 72 | font-size: 50px; 73 | display: inline; 74 | } 75 | 76 | header>input[type]{ 77 | display: inline; 78 | padding-top: 0%; 79 | border: 1px solid black; 80 | /* width: 80px; */ 81 | width: 5rem; 82 | padding: 5px; 83 | border-radius: 1rem; 84 | color: black; 85 | font-weight: 500; 86 | } 87 | 88 | main>h2 , aside>h2{ 89 | color: bisque; 90 | } 91 | 92 | .date{ 93 | font-family: 'Courier New', Courier, monospace; 94 | /* margin-top: -20px; */ 95 | margin-top: -1.2rem ; 96 | /* font-size: 13px; */ 97 | font-size: 1em; 98 | text-decoration: underline; 99 | } 100 | 101 | .social{ 102 | font-family: 'Times New Roman', Times, serif; 103 | } 104 | 105 | h1 , h2 , h3 { 106 | text-shadow: 1px 1px red; 107 | } 108 | 109 | 110 | @media only screen and (max-width: 600px) { 111 | 112 | } -------------------------------------------------------------------------------- /Homework-project/7. Figma/assets/Logo (1) 1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Homework-project/7. Figma/assets/Logo (1) 1.png -------------------------------------------------------------------------------- /Homework-project/7. Figma/assets/Oval-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Homework-project/7. Figma/assets/Oval-1.png -------------------------------------------------------------------------------- /Homework-project/7. Figma/assets/Oval-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Homework-project/7. Figma/assets/Oval-2.png -------------------------------------------------------------------------------- /Homework-project/7. Figma/assets/Oval.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Homework-project/7. Figma/assets/Oval.png -------------------------------------------------------------------------------- /Homework-project/7. Figma/assets/bhaiya.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Homework-project/7. Figma/assets/bhaiya.png -------------------------------------------------------------------------------- /Homework-project/7. Figma/assets/facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Homework-project/7. Figma/assets/facebook.png -------------------------------------------------------------------------------- /Homework-project/7. Figma/assets/instagram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Homework-project/7. Figma/assets/instagram.png -------------------------------------------------------------------------------- /Homework-project/7. Figma/assets/microsoft.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Homework-project/7. Figma/assets/microsoft.png -------------------------------------------------------------------------------- /Homework-project/7. Figma/assets/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Homework-project/7. Figma/assets/twitter.png -------------------------------------------------------------------------------- /Homework-project/7. Figma/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Figma | Khushi 8 | 9 | 10 | 11 |
12 |
13 |
14 | 15 | 33 | 34 | 35 |
36 |
37 |
38 |
39 |

Team CodeHelp

40 |
41 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque repellendus perspiciatis 42 | officia in officiis. Voluptates assumenda commodi deserunt, asperiores vitae quos fugit 43 | earum distinctio laborum rem saepe facere voluptatibus numquam..

44 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque repellendus pyior.

45 |
46 |
47 | 48 |
49 |
50 | 51 |
52 |
53 | 54 |
55 |
56 |

Founder,CEO

57 |
58 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque repellendus perspiciatis 59 | officia in officiis. Voluptates assumenda commodi deserunt, asperiores.

60 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque repellendus perspiciatis 61 | officia in officiis. Voluptates assumenda commodi deserunt, asperiores.

62 |
63 | 64 |
65 | 66 |
67 |
68 | 95 |
96 |
97 | 98 | -------------------------------------------------------------------------------- /Homework-project/7. Figma/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | :root { 8 | --Blue: #4E5DC0; 9 | } 10 | 11 | .container{ 12 | max-width: 1440px; 13 | margin: 0 auto; 14 | margin-top: 50px; 15 | /* border: 3px solid black; */ 16 | } 17 | 18 | header{ 19 | width: 90%; 20 | margin: 0 auto; 21 | display: flex; 22 | align-items: center; 23 | justify-content: space-between; 24 | } 25 | 26 | header ul{ 27 | list-style-type: none; 28 | display: flex; 29 | justify-content: space-between; 30 | align-items: center; 31 | width: 40%; 32 | } 33 | 34 | header ul li a{ 35 | text-decoration: none; 36 | color: black; 37 | } 38 | 39 | li:hover a{ 40 | color: var(--Blue) ; 41 | } 42 | 43 | header ul li div{ 44 | width: 100%; 45 | height: 3px; 46 | background-color: var(--Blue); 47 | opacity: 0; 48 | } 49 | 50 | header>ul>li:hover div{ 51 | opacity: 1; 52 | } 53 | 54 | header button{ 55 | padding: 15px; 56 | background-color: var(--Blue); 57 | border: none; 58 | color: white; 59 | border-radius: 15px; 60 | } 61 | 62 | main{ 63 | margin: 10% auto; 64 | width: 90%; 65 | } 66 | 67 | .first-section , .second-section{ 68 | display: flex; 69 | gap: 50px; 70 | } 71 | 72 | .First-content , .Second-content{ 73 | display: flex; 74 | flex-direction: column; 75 | } 76 | 77 | .second-section{ 78 | margin-top: 7rem; 79 | } 80 | 81 | h2{ 82 | padding: 10px; 83 | font-size: 3rem; 84 | } 85 | 86 | .First-content hr , .Second-content hr{ 87 | width: 60%; 88 | margin: 0px 10px; 89 | } 90 | 91 | .First-content p , .Second-content p{ 92 | padding: 10px; 93 | width: 80%; 94 | font-size: 18px; 95 | line-height: 30px; 96 | opacity: 50%; 97 | } 98 | 99 | hr{ 100 | width: 100%; 101 | border: 1.5px solid #E1E2E4; 102 | } 103 | 104 | footer{ 105 | display: flex; 106 | justify-content: space-between; 107 | margin: 10% auto; 108 | width: 90%; 109 | } 110 | 111 | .box{ 112 | display: flex; 113 | justify-content: space-between; 114 | } 115 | 116 | .b1{ 117 | flex-direction: column; 118 | width: 98px; 119 | justify-content: space-between; 120 | height: 82px; 121 | display: flex; 122 | } 123 | 124 | .b1 h5{ 125 | margin-top: 10px; 126 | width: 8rem; 127 | height: 32px; 128 | font-family: 'Raleway'; 129 | font-weight: 700; 130 | font-size: 16px; 131 | line-height: 32px; 132 | letter-spacing: 3px; 133 | text-decoration-line: underline; 134 | color: #4E5DC0; 135 | } 136 | 137 | .b1 p{ 138 | margin-top: 40px; 139 | width: 209px; 140 | height: 64px; 141 | font-family: 'Raleway'; 142 | font-style: normal; 143 | font-weight: 500; 144 | font-size: 16px; 145 | line-height: 32px; 146 | color: #999999; 147 | } 148 | 149 | .b2{ 150 | flex-direction: column; 151 | } 152 | 153 | .b2 h4{ 154 | width: 92px; 155 | height: 32px; 156 | font-family: 'Raleway'; 157 | font-style: normal; 158 | font-weight: 700; 159 | font-size: 16px; 160 | line-height: 32px; 161 | letter-spacing: 3px; 162 | color: #4E5DC0; 163 | } 164 | 165 | .b2 p{ 166 | width: 332px; 167 | height: 96px; 168 | font-family: 'Manrope'; 169 | font-style: normal; 170 | font-weight: 500; 171 | font-size: 16px; 172 | line-height: 32px; 173 | color: #999999; 174 | } 175 | 176 | .b3{ 177 | flex-direction: column; 178 | } 179 | 180 | .b3 h4{ 181 | width: 57px; 182 | height: 32px; 183 | font-family: 'Raleway'; 184 | font-style: normal; 185 | font-weight: 700; 186 | font-size: 16px; 187 | line-height: 32px; 188 | letter-spacing: 3px; 189 | text-transform: uppercase; 190 | color: #4E5DC0; 191 | } 192 | 193 | .b3 a{ 194 | width: 69px; 195 | font-family: 'Manrope'; 196 | font-style: normal; 197 | font-weight: 500; 198 | font-size: 16px; 199 | line-height: 32px; 200 | color: #999999; 201 | } 202 | 203 | 204 | .oval{ 205 | width: 48px; 206 | height: 48px; 207 | /* left: 1210px; */ 208 | /* top: 1517px; */ 209 | border-radius: 50px; 210 | background: #4E5DC0; 211 | } 212 | 213 | .oval img{ 214 | transform: translate(18px , 15px); 215 | } -------------------------------------------------------------------------------- /Homework-project/8. Hire me Button/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Button | Khushi 8 | 9 | 10 | 11 |
12 | 13 |
14 | 15 | -------------------------------------------------------------------------------- /Homework-project/8. Hire me Button/styles.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .wrapper{ 8 | height: 100vh; 9 | width: 100vw; 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | } 14 | 15 | button{ 16 | border: none; 17 | padding: 0.8rem 2.3rem; 18 | font-size: 18px; 19 | background-color: #e84949; 20 | color: white; 21 | box-shadow: 5px 5px 7px 0px #0000003f; 22 | position: relative; 23 | z-index: 1; 24 | } 25 | 26 | button::before{ 27 | content: ""; 28 | z-index: -1; 29 | position: absolute; 30 | background-color: #1f1f1f; 31 | top: 0; 32 | bottom: 0; 33 | left: 0; 34 | right: 0; 35 | transform: scaleX(0); 36 | transform-origin: left; 37 | transition: all 1s; 38 | } 39 | 40 | button:hover::before{ 41 | transform: scaleX(1); 42 | } -------------------------------------------------------------------------------- /Homework-project/Index.txt: -------------------------------------------------------------------------------- 1 | 1. Tribute page. 2 | 2. Time table. 3 | 3. Create web dev Master card. 4 | 4. Set position of 5 hello text. 5 | 5. Mug card. 6 | 6. Blog title. 7 | 7. Figma webpage. 8 | 8. Hire me Button. 9 | 9. Assignment of 10 animation button. 10 | 10. Morden chair -------------------------------------------------------------------------------- /JS MINI PROJECTS/Counter-app/assets/index-7daed9f8.css: -------------------------------------------------------------------------------- 1 | *,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.mt-12{margin-top:3rem}.flex{display:flex}.h-\[100vh\]{height:100vh}.w-\[100vw\]{width:100vw}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-evenly{justify-content:space-evenly}.gap-12{gap:3rem}.gap-20{gap:5rem}.rounded-sm{border-radius:.125rem}.border-l-2{border-left-width:2px}.border-r-2{border-right-width:2px}.border-\[\#bfbfbf\]{--tw-border-opacity: 1;border-color:rgb(191 191 191 / var(--tw-border-opacity))}.bg-\[\#344151\]{--tw-bg-opacity: 1;background-color:rgb(52 65 81 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.p-3{padding:.75rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.pl-5{padding-left:1.25rem}.pr-5{padding-right:1.25rem}.text-\[25px\]{font-size:25px}.font-bold{font-weight:700}.font-medium{font-weight:500}.text-\[\#0398d4\]{--tw-text-opacity: 1;color:rgb(3 152 212 / var(--tw-text-opacity))}.text-\[\#344151\]{--tw-text-opacity: 1;color:rgb(52 65 81 / var(--tw-text-opacity))} 2 | -------------------------------------------------------------------------------- /JS MINI PROJECTS/Counter-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Counter | Khushi 8 | 9 | 10 | 11 | 12 |
13 |
14 |

Increment And Decrement

15 |
16 | 19 |
20 | 0 21 |
22 | 25 |
26 |
27 |
28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /JS MINI PROJECTS/Counter-app/script.js: -------------------------------------------------------------------------------- 1 | const countValue = document.getElementById('value') ; 2 | 3 | function dicrement() { 4 | let num = parseInt(countValue.innerText) ; 5 | num = num - 1 ; 6 | countValue.innerText = num ; 7 | } 8 | 9 | function increment() { 10 | let num = parseInt(value.innerText) ; 11 | num++ ; 12 | value.innerText = num ; 13 | } -------------------------------------------------------------------------------- /JS MINI PROJECTS/Password-Generator/assets/copy.svg: -------------------------------------------------------------------------------- 1 | copy_2_line -------------------------------------------------------------------------------- /JS MINI PROJECTS/Password-Generator/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/JS MINI PROJECTS/Password-Generator/assets/favicon.ico -------------------------------------------------------------------------------- /JS MINI PROJECTS/Password-Generator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Password-Generator | Khushi 8 | 9 | 10 | 14 | 15 | 16 | 17 | 18 |
19 | 20 |

Password Generator

21 | 22 |
23 | 24 | 25 | 26 | 30 | 31 |
32 | 33 | 34 |
35 | 36 | 37 |
38 |

Password Length

39 |

0

40 |
41 | 42 | 43 | 44 | 45 | 46 |
47 | 48 | 49 |
50 | 51 |
52 | 53 | 54 |
55 | 56 |
57 | 58 | 59 |
60 | 61 |
62 | 63 | 64 |
65 | 66 | 67 |
68 |

Strength

69 |
70 |
71 | 72 | 73 | 74 | 75 |
76 | 77 |
78 | 79 | 80 | -------------------------------------------------------------------------------- /JS MINI PROJECTS/Password-Generator/script.js: -------------------------------------------------------------------------------- 1 | const inputSlider = document.querySelector("[data-lengthSlider]"); 2 | const lengthDisplay = document.querySelector("[data-lengthNumber]"); 3 | 4 | const passwordDisplay = document.querySelector("[data-passwordDisplay]"); 5 | const copyBtn = document.querySelector("[data-copy]"); 6 | const copyMsg = document.querySelector("[data-copyMsg]"); 7 | 8 | const uppercaseCheck = document.querySelector("#uppercase"); 9 | const lowercaseCheck = document.querySelector("#lowercase"); 10 | const numbersCheck = document.querySelector("#numbers"); 11 | const symbolsCheck = document.querySelector("#symbols"); 12 | 13 | const indicator = document.querySelector("[data-indicator]"); 14 | const generateBtn = document.querySelector(".generateButton"); 15 | const allCheckBox = document.querySelectorAll("input[type=checkbox]"); 16 | 17 | const symbols = '!@#$%^&*(){}:"<>'; 18 | 19 | let passwordLength = 10 ; 20 | let password = ''; 21 | let count = 0; //1 22 | 23 | 24 | //for slider movement 25 | function slider(){ 26 | inputSlider.value = passwordLength 27 | lengthDisplay.innerText = passwordLength 28 | 29 | //to add styling in slider 30 | const min = inputSlider.min; 31 | const max = inputSlider.max; 32 | inputSlider.style.backgroundSize = ( (passwordLength - min)*100/(max - min)) + "% 100%" 33 | } 34 | 35 | slider() 36 | 37 | inputSlider.addEventListener('input' , (e)=> { 38 | passwordLength = e.target.value ; 39 | slider() 40 | }) 41 | 42 | //to copying password on clipboard 43 | async function copyPassword() { 44 | try { 45 | await navigator.clipboard.writeText(passwordDisplay.value); 46 | copyMsg.innerText = "copied"; 47 | } 48 | catch(e) { 49 | copyMsg.innerText = "Failed"; 50 | } 51 | //to make copy wala span visible 52 | copyMsg.classList.add("active"); 53 | 54 | setTimeout( () => { 55 | copyMsg.classList.remove("active"); 56 | },2000); 57 | } 58 | 59 | copyBtn.addEventListener('click', () => { 60 | if(passwordDisplay.value) 61 | copyPassword(); 62 | }) 63 | 64 | //for generating Random numbers 65 | function getRandom(min , max){ 66 | return Math.floor(Math.random() * (max - min)) + min 67 | } 68 | 69 | function getRandomUppercase(){ 70 | return String.fromCharCode(getRandom(65 , 90)) 71 | } 72 | 73 | function getRandomLowercase(){ 74 | return String.fromCharCode(getRandom(97 , 122)) 75 | } 76 | 77 | function getRandomInterger(){ 78 | return getRandom(0 , 9) 79 | } 80 | 81 | function getRandomSymbol(){ 82 | let random = getRandom(0 , symbols.length) 83 | return symbols.charAt(random) 84 | } 85 | 86 | //to set color of indicator 87 | function setIndicator(color) { 88 | indicator.style.backgroundColor = color; 89 | indicator.style.boxShadow = `0px 0px 12px 1px ${color}`; 90 | } 91 | 92 | //For checking password strength 93 | function passwordStrength(){ 94 | let hasUpper = uppercaseCheck.checked; 95 | let hasLower = lowercaseCheck.checked; 96 | let hasSymbol = symbolsCheck.checked; 97 | let hasNumber = numbersCheck.checked; 98 | 99 | if(hasUpper && hasLower && (hasSymbol || hasNumber) && passwordLength >=8) { 100 | setIndicator("#0f0") 101 | } else if((hasUpper || hasLower) && (hasNumber || hasSymbol) && passwordLength >=6) { 102 | setIndicator("#ff0") 103 | } else { 104 | setIndicator("#f00") 105 | } 106 | } 107 | 108 | function createPassword(){ 109 | let arrFunction = []; 110 | password = '' 111 | if(uppercaseCheck.checked){ 112 | arrFunction.push(getRandomUppercase) 113 | } 114 | if(lowercaseCheck.checked){ 115 | arrFunction.push(getRandomLowercase) 116 | } 117 | if(numbersCheck.checked){ 118 | arrFunction.push(getRandomInterger) 119 | } 120 | if(symbolsCheck.checked){ 121 | arrFunction.push(getRandomSymbol) 122 | } 123 | //for compalsary password 124 | for(let i = 0 ; i < arrFunction.length ; i++){ 125 | password += arrFunction[i]() 126 | } 127 | 128 | //for addtional password 129 | for(let i = 0 ; i < passwordLength-arrFunction.length ; i++){ 130 | let random = getRandom(0 , arrFunction.length) 131 | password += arrFunction[random]() 132 | } 133 | 134 | //for shuffle password 135 | password = password.split('').sort(()=> Math.random() * 0.5).join('') 136 | 137 | //to return password 138 | passwordStrength() 139 | passwordDisplay.value = password 140 | } 141 | 142 | generateBtn.addEventListener('click' , ()=>{ 143 | if(count == 0){ 144 | return 145 | } 146 | if(passwordLength < count){ 147 | passwordLength = count 148 | slider() 149 | } 150 | password = '' 151 | createPassword() 152 | }) 153 | 154 | 155 | function handleCheckBoxChange() { 156 | count = 0; 157 | allCheckBox.forEach( (checkbox) => { 158 | if(checkbox.checked) 159 | count++; 160 | }); 161 | 162 | passwordStrength() 163 | 164 | //special condition 165 | if(passwordLength < count ) { 166 | passwordLength = count; 167 | slider(); 168 | } 169 | } 170 | 171 | allCheckBox.forEach( (checkbox) => { 172 | checkbox.addEventListener('change', handleCheckBoxChange); 173 | }) -------------------------------------------------------------------------------- /JS MINI PROJECTS/Password-Generator/styles.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: 'League Spartan', sans-serif; 8 | } 9 | 10 | :root { 11 | 12 | --dk-violet: hsl(268, 75%, 9%); 13 | --lt-violet: hsl(268, 47%, 21%); 14 | --lt-violet2: hsl(281, 89%, 26%); 15 | --vb-violet: hsl(285, 91%, 52%); 16 | --vb-violet2: hsl(290, 70%, 36%); 17 | 18 | --vb-yellow: hsl(52, 100%, 62%); 19 | 20 | 21 | --pl-white: hsl(0, 0%, 100%); 22 | 23 | --vb-cyan: hsl(176, 100%, 44%); 24 | --vb-cyan2: hsl(177, 92%, 70%); 25 | --dk-text: hsl(198, 20%, 13%); 26 | } 27 | 28 | body { 29 | width: 100vw; 30 | height: 100vh; 31 | display: flex; 32 | flex-direction: column; 33 | align-items: center; 34 | justify-content: center; 35 | background: linear-gradient(231deg, rgba(22, 6, 40, 1) 0%, rgba(52, 28, 79, 1) 50%, rgba(88, 7, 125, 1) 100%); 36 | } 37 | 38 | .container { 39 | width: 90%; 40 | max-width: 450px; 41 | } 42 | 43 | h1 { 44 | color: var(--pl-white); 45 | opacity: 0.75; 46 | text-transform: uppercase; 47 | letter-spacing: 2px; 48 | text-align: center; 49 | line-height: 1.2; 50 | } 51 | 52 | .display-container { 53 | position: relative; 54 | background-color: var(--dk-violet); 55 | border-radius: 1rem; 56 | border-bottom: 0.35rem solid var(--lt-violet2); 57 | margin: 1rem 0; 58 | padding-top: 0.35rem; 59 | } 60 | 61 | 62 | .display { 63 | width: 100%; 64 | background-color: transparent; 65 | padding: 1.15rem 1rem; 66 | color: var(--vb-yellow); 67 | font-weight: 600; 68 | font-size: 1.5rem; 69 | line-height: 30px; 70 | letter-spacing: 1px; 71 | padding-right: 3.25rem; 72 | border:none; 73 | } 74 | 75 | .display::placeholder { 76 | position:absolute; 77 | top: 50%; 78 | left: 1.5rem; 79 | font-size: 1.5rem; 80 | line-height:30px; 81 | color:var(--vb-yellow); 82 | opacity: 0.65; 83 | text-transform: uppercase; 84 | transform: translateY(-50%); 85 | } 86 | 87 | .display-container button { 88 | position:absolute; 89 | top:50%; 90 | right:1.5rem; 91 | transform: translateY(-50%); 92 | } 93 | 94 | .input-container{ 95 | width:100%; 96 | background-color: var(--dk-violet); 97 | border-radius: 1rem; 98 | padding: 2rem; 99 | border-bottom: 0.35rem solid var(--lt-violet2); 100 | } 101 | 102 | 103 | .length-container { 104 | display: flex; 105 | justify-content: space-between; 106 | align-items: center; 107 | } 108 | 109 | 110 | .length-container p:nth-child(1) { 111 | color:var(--pl-white); 112 | font-size: 1.5rem; 113 | } 114 | 115 | 116 | .length-container p:nth-child(2) { 117 | color:var(--vb-yellow); 118 | font-size: 1.5rem; 119 | } 120 | 121 | 122 | .strength-container { 123 | display: flex; 124 | justify-content: space-between; 125 | align-items: center; 126 | margin-top: 1.75rem; 127 | margin-bottom: 2rem; 128 | } 129 | 130 | 131 | .strength-container p{ 132 | color:var(--pl-white); 133 | font-size: 1.5rem; 134 | } 135 | 136 | .indicator { 137 | width:1.5rem; 138 | height:1.5rem; 139 | border-radius:50%; 140 | } 141 | 142 | .generateButton { 143 | width: 100%; 144 | padding: 1rem 0; 145 | background-color: var(--vb-violet); 146 | text-align: center; 147 | border-radius: 0.75rem; 148 | border-bottom: 0.35rem solid var(--vb-yellow); 149 | text-transform: uppercase; 150 | letter-spacing: 1px; 151 | color: var(--vb-yellow); 152 | font-weight: 600; 153 | font-size: 1.25rem; 154 | } 155 | 156 | .check { 157 | display: flex; 158 | align-items: center; 159 | margin: 1rem 0; 160 | gap: 0 1rem; 161 | } 162 | 163 | .check input{ 164 | appearance: none; 165 | width: 20px; 166 | height: 20px; 167 | border: 1px solid var(--vb-cyan); 168 | cursor: pointer; 169 | position: relative; 170 | border-radius: 0.35rem; 171 | } 172 | 173 | 174 | .check input:checked{ 175 | background-color: var(--vb-cyan); 176 | } 177 | 178 | 179 | .check input:checked::before { 180 | content: '✔'; 181 | position: absolute; 182 | color: var(--dk-text); 183 | font-size:1.05rem; 184 | font-weight: 600; 185 | left:50%; 186 | top:-3.5px; 187 | transform: translateX(-50%) translateY(5%); 188 | } 189 | 190 | .check label { 191 | color: var(--pl-white); 192 | font-size: 1.25rem; 193 | letter-spacing: 0.75px; 194 | } 195 | 196 | .copyBtn{ 197 | background-color: transparent; 198 | border:none; 199 | outline:none; 200 | } 201 | 202 | .tooltip { 203 | position: absolute; 204 | background-color: var(--vb-violet2); 205 | color: var(--vb-yellow); 206 | font-size: 1.25rem; 207 | top: -35px; 208 | left: -25px; 209 | padding: 5px 10px; 210 | border-radius: 1rem; 211 | opacity: 0; 212 | transform: scale(0); 213 | transform-origin: bottom; 214 | transition: all 250ms ease-in-out; 215 | } 216 | 217 | .tooltip.active { 218 | opacity: 1; 219 | transform: scale(1); 220 | } 221 | 222 | .slider{ 223 | appearance: none; 224 | width:100%; 225 | height: 0.75rem; 226 | cursor: pointer; 227 | background-color: var(--lt-violet); 228 | border-radius: 1rem; 229 | margin-top: 2rem; 230 | margin-bottom: 1.5rem; 231 | background-image: linear-gradient(var(--vb-violet), var(--vb-violet)); 232 | background-repeat: no-repeat; 233 | border:none; 234 | outline:none; 235 | z-index:-1; 236 | } 237 | 238 | .slider::-webkit-slider-thumb { 239 | position:relative; 240 | z-index:1; 241 | appearance: none; 242 | height:2rem; 243 | width:2rem; 244 | border-radius: 50%; 245 | background-color: var(--vb-yellow); 246 | cursor:pointer; 247 | margin-top: -3px; 248 | box-shadow: 0px 0px 20px 0px rgba(255, 229, 61, 0.50); 249 | transition: all 100ms ease-in; 250 | } 251 | 252 | .slider:focus{ 253 | outline: 3px solid var(--vb-yellow); 254 | } 255 | 256 | .slider::-webkit-slider-thumb:hover{ 257 | outline: 2px solid var(--vb-yellow); 258 | background-color: var(--dk-violet); 259 | box-shadow: 0px 0px 25px 5px rgba(255, 229, 61, 0.80); 260 | } 261 | 262 | 263 | /*Homework -> Explore below code */ 264 | /* .slider::-moz-range-thumb { 265 | position: relative; 266 | z-index: 1; 267 | appearance: none; 268 | height: 2rem; 269 | width: 2rem; 270 | border-radius: 50%; 271 | background: var(--vb-yellow); 272 | box-shadow: 0px 0px 20px 0px rgba(255, 229, 61, 0.50); 273 | cursor: pointer; 274 | } 275 | 276 | .slider::-moz-range-thumb:hover { 277 | outline: 2px solid var(--vb-yellow); 278 | background-color: var(--dk-violet); 279 | box-shadow: 0px 0px 25px 5px rgba(255, 229, 61, 0.80); 280 | } */ -------------------------------------------------------------------------------- /JS MINI PROJECTS/Tik-Tak-Toe/assets/winnertime.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/JS MINI PROJECTS/Tik-Tak-Toe/assets/winnertime.mp4 -------------------------------------------------------------------------------- /JS MINI PROJECTS/Tik-Tak-Toe/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tik-tak-toe | Khushi 8 | 9 | 10 | 11 | 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 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /JS MINI PROJECTS/Tik-Tak-Toe/script.js: -------------------------------------------------------------------------------- 1 | const gameInfo = document.querySelector("[data-game-info]"); 2 | const boxes = document.querySelectorAll(".box"); 3 | const btn = document.querySelector("[data-btn]"); 4 | const bg = document.querySelectorAll(".bg") 5 | const video = document.querySelector("[data-video]") 6 | 7 | let currentPlayer; 8 | let gameGrid; 9 | 10 | const winningPositions = [ 11 | [0 , 1 , 2], 12 | [3 , 4 , 5], 13 | [6 , 7 , 8], 14 | [0 , 3 , 6], 15 | [1 , 4 , 7], 16 | [2 , 5 , 8], 17 | [0 , 4 , 8], 18 | [2 , 4 , 6] 19 | ]; 20 | 21 | function initGame(){ 22 | 23 | currentPlayer = "X"; 24 | gameGrid = ["","","","","","","","",""]; 25 | boxes.forEach((box , index) => { 26 | box.innerHTML = " " 27 | boxes[index].style.pointerEvents = "all"; 28 | box.classList = `box box${index+1}` 29 | }) 30 | 31 | bg.forEach((element)=>{ 32 | element.classList.add("active") 33 | }) 34 | 35 | btn.classList.remove("active"); 36 | video.classList.remove("active") 37 | gameInfo.innerText = `Current Player - ${currentPlayer}`; 38 | } 39 | 40 | initGame(); 41 | 42 | function handleGame(index) { 43 | if(gameGrid[index] === "" ) { 44 | boxes[index].innerText = currentPlayer; 45 | gameGrid[index] = currentPlayer; 46 | boxes[index].style.pointerEvents = "none"; 47 | 48 | swap(); 49 | 50 | checkGameOver(); 51 | } 52 | } 53 | 54 | function checkGameOver(){ 55 | let winner = ""; 56 | 57 | 58 | winningPositions.forEach((position) => { 59 | 60 | if( (gameGrid[position[0]] !== "") 61 | && (gameGrid[position[0]] === gameGrid[position[1]] ) && 62 | (gameGrid[position[0]] === gameGrid[position[2]])) { 63 | 64 | 65 | if(gameGrid[position[0]] === "X") 66 | winner = "X"; 67 | else { 68 | winner = "O"; 69 | } 70 | 71 | boxes.forEach((box) => { 72 | box.style.pointerEvents = "none"; 73 | }) 74 | 75 | boxes[position[0]].classList.add("win"); 76 | boxes[position[1]].classList.add("win"); 77 | boxes[position[2]].classList.add("win"); 78 | } 79 | }); 80 | 81 | if(winner !== "" ) { 82 | gameInfo.innerText = `Winner is - ${winner}`; 83 | celebration() 84 | // btn.classList.add("active"); 85 | return; 86 | } 87 | 88 | let count = 0 89 | gameGrid.forEach((box)=>{ 90 | if(box !== ""){ 91 | count++ 92 | } 93 | }) 94 | 95 | if(count == 9){ 96 | gameInfo.innerText = `Game Tie`; 97 | btn.classList.add("active"); 98 | } 99 | } 100 | 101 | winningPositions.forEach((position) => { 102 | //all 3 boxes should be non-empty and exactly same in value 103 | if( (gameGrid[position[0]] !== "" || gameGrid[position[1]] !== "" || gameGrid[position[2]] !== "") 104 | && (gameGrid[position[0]] === gameGrid[position[1]] ) && (gameGrid[position[1]] === gameGrid[position[2]])) { 105 | 106 | //check if winner is X 107 | if(gameGrid[position[0]] === "X") 108 | answer = "X"; 109 | else { 110 | answer = "O"; 111 | } 112 | 113 | 114 | //disable pointer events 115 | boxes.forEach((box) => { 116 | box.style.pointerEvents = "none"; 117 | }) 118 | 119 | //now we know X/O is a winner 120 | boxes[position[0]].classList.add("win"); 121 | boxes[position[1]].classList.add("win"); 122 | boxes[position[2]].classList.add("win"); 123 | } 124 | }); 125 | 126 | function swap() { 127 | if(currentPlayer === "X") { 128 | currentPlayer = "O"; 129 | } 130 | else { 131 | currentPlayer = "X"; 132 | } 133 | gameInfo.innerText = `Current Player - ${currentPlayer}`; 134 | } 135 | 136 | boxes.forEach((box, index) => { 137 | box.addEventListener("click", () => { 138 | handleGame(index); 139 | }) 140 | }); 141 | 142 | btn.addEventListener("click", initGame); 143 | 144 | function celebration(){ 145 | 146 | bg.forEach((element)=>{ 147 | element.classList.remove("active") 148 | }) 149 | 150 | video.classList.add("active") 151 | btn.classList.add("active") 152 | gameInfo.classList.add("active") 153 | } -------------------------------------------------------------------------------- /JS MINI PROJECTS/Tik-Tak-Toe/styles.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: 'Poppins', 'sans-serif'; 6 | } 7 | 8 | body{ 9 | height: 100vh; 10 | width: 100vw; 11 | overflow: hidden; 12 | background: #000; 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | flex-direction: column; 17 | } 18 | 19 | .game-info{ 20 | color:white; 21 | position:absolute; 22 | top:8rem; 23 | left:50%; 24 | transform:translateX(-50%); 25 | background-color: rgba(255, 255, 255, 0.3); 26 | z-index: 25; 27 | border-radius: 1rem; 28 | border: 1px solid rgba(255, 255, 255, 0.25); 29 | padding: 0.5rem 3rem; 30 | } 31 | 32 | .grid{ 33 | width:90%; 34 | max-width:20rem; 35 | background-color: rgba(255, 255, 255, 0.3); 36 | border-radius: 1rem; 37 | border: 1px solid rgba(255, 255, 255, 0.25); 38 | padding: 2rem; 39 | display: grid; 40 | z-index: 10; 41 | grid-template-columns: repeat(3, 1fr); 42 | aspect-ratio: 1/1; 43 | } 44 | 45 | .box{ 46 | position:relative; 47 | width:100%; 48 | aspect-ratio: 1/1; 49 | cursor: pointer; 50 | font-size: 3rem; 51 | color:white; 52 | display: flex; 53 | justify-content: center; 54 | align-items: center; 55 | } 56 | 57 | .box1, .box2, .box4, .box5{ 58 | border-right:2px solid rgba(255, 255, 255, 0.7); 59 | border-bottom:2px solid rgba(255, 255, 255, 0.7); 60 | } 61 | 62 | .box3, .box6{ 63 | border-bottom: 2px solid rgba(255, 255, 255, 0.7); 64 | } 65 | 66 | .box7, .box8{ 67 | border-right:2px solid rgba(255, 255, 255, 0.7); 68 | } 69 | 70 | .btn{ 71 | color:white; 72 | position: absolute; 73 | bottom:9rem; 74 | z-index: 25; 75 | left:50%; 76 | transform:translateX(-50%); 77 | background-color: rgba(255, 255, 255, 0.15); 78 | border-radius: 1rem; 79 | border: 1px solid rgba(255, 255, 255, 0.25); 80 | padding: 0.5rem 2rem; 81 | cursor:pointer; 82 | display: none; 83 | } 84 | 85 | .btn.active{ 86 | display: flex; 87 | } 88 | 89 | .win{ 90 | background-color: rgba(0, 255, 0, 0.3); 91 | } 92 | 93 | .celebration{ 94 | height: 100vh; 95 | width: 100vw; 96 | z-index: 20; 97 | display: none; 98 | position: absolute; 99 | } 100 | 101 | .celebration.active{ 102 | display: flex; 103 | } 104 | 105 | /* for bg animation */ 106 | 107 | i{ 108 | position: absolute; 109 | z-index: -10; 110 | width: 120px; 111 | height: 120px; 112 | border-radius: 50%; 113 | -webkit-animation: 'screen' infinite; 114 | animation: 'screen' infinite; 115 | display: none; 116 | } 117 | 118 | i.active{ 119 | display: block; 120 | } 121 | 122 | 123 | i:nth-child(1){ 124 | top:20px; 125 | left:30px; 126 | background: radial-gradient(center, ellipse cover, rgba(2,226,252,0.65) 0%,rgba(0,0,0,0) 100%); 127 | box-shadow:0px 0px 5px 0px #02e2fc; 128 | animation-duration: 5s; 129 | } 130 | 131 | i:nth-child(2){ 132 | top:420px; 133 | right:30px; 134 | background: radial-gradient(center, ellipse cover, rgba(250,160,2,0.65) 0%,rgba(0,0,0,0) 100%); 135 | box-shadow:0px 0px 5px 0px #faa002; 136 | animation-duration: 21s; 137 | } 138 | 139 | i:nth-child(3){ 140 | bottom:100px; 141 | right:200px; 142 | background: radial-gradient(center, ellipse cover, rgba(20,252,2,0.65) 0%,rgba(0,0,0,0) 100%); 143 | box-shadow:0px 0px 5px 0px #14fc02; 144 | animation-duration: 5s; 145 | } 146 | 147 | i:nth-child(4){ 148 | top:5px; 149 | left:1030px; 150 | background: radial-gradient(center, ellipse cover, rgba(252,2,196,0.65) 0%,rgba(0,0,0,0) 100%); 151 | box-shadow:0px 0px 5px 0px #fc02c4; 152 | animation-duration: 4s; 153 | } 154 | 155 | i:nth-child(5){ 156 | top:280px; 157 | left:12px; 158 | background: radial-gradient(center, ellipse cover, rgba(139,44,148,0.65) 0%,rgba(0,0,0,0) 100%); 159 | box-shadow:0px 0px 5px 0px #8b2c94; 160 | animation-duration: 5s; 161 | } 162 | 163 | i:nth-child(6){ 164 | top:550px; 165 | left:700px; 166 | background: radial-gradient(center, ellipse cover, rgba(251,184,41,0.65) 0%,rgba(0,0,0,0) 100%); 167 | box-shadow:0px 0px 5px 0px #FBB829; 168 | animation-duration: 6s; 169 | } 170 | 171 | i:nth-child(7){ 172 | top:650px; 173 | left:50px; 174 | background: radial-gradient(center, ellipse cover, rgba(195,255,104,0.65) 0%,rgba(0,0,0,0) 100%); 175 | box-shadow:0px 0px 5px 0px #C3FF68; 176 | animation-duration: 15s; 177 | } 178 | 179 | i:nth-child(8){ 180 | top:20px; 181 | right:100px; 182 | background: radial-gradient(center, ellipse cover, rgba(255,0,102,0.65) 0%,rgba(0,0,0,0) 100%); 183 | box-shadow:0px 0px 5px 0px #FF0066; 184 | animation-duration: 5s; 185 | } 186 | 187 | i:nth-child(9){ 188 | bottom:50px; 189 | right:132px; 190 | background: radial-gradient(center, ellipse cover, rgba(255,255,0,0.65) 0%,rgba(0,0,0,0) 100%); 191 | box-shadow:0px 0px 5px 0px #FFFF00; 192 | animation-duration: 13s; 193 | } 194 | 195 | i:nth-child(10){ 196 | top:578px; 197 | left:357px; 198 | background: radial-gradient(center, ellipse cover, rgba(127,175,27,0.65) 0%,rgba(0,0,0,0) 100%); 199 | box-shadow:0px 0px 5px 0px #7FAF1B; 200 | animation-duration: 4s; 201 | } 202 | 203 | i:nth-child(11){ 204 | top:380px; 205 | left:230px; 206 | background: radial-gradient(center, ellipse cover, rgba(1,210,255,0.65) 0%,rgba(0,0,0,0) 100%); 207 | box-shadow:0px 0px 5px 0px #01D2FF; 208 | animation-duration: 5s; 209 | } 210 | 211 | i:nth-child(12){ 212 | top:570px; 213 | left:1100px; 214 | background: radial-gradient(center, ellipse cover, rgba(237,247,255,0.65) 0%,rgba(0,0,0,0) 100%); 215 | box-shadow:0px 0px 5px 0px #EDF7FF; 216 | animation-duration: 6s; 217 | } 218 | 219 | i:nth-child(13){ 220 | top:600px; 221 | left:600px; 222 | background: radial-gradient(center, ellipse cover, rgba(0,255,255,0.65) 0%,rgba(0,0,0,0) 100%); 223 | box-shadow:0px 0px 5px 0px #00FFFF; 224 | animation-duration: 7s; 225 | } 226 | 227 | i:nth-child(14){ 228 | top:200px; 229 | left:520px; 230 | background: radial-gradient(center, ellipse cover, rgba(0,0,255,0.65) 0%,rgba(0,0,0,0) 100%); 231 | box-shadow:0px 0px 5px 0px #0000FF; 232 | animation-duration: 14s; 233 | } 234 | 235 | i:nth-child(15){ 236 | top:370px; 237 | left:500px; 238 | background: radial-gradient(center, ellipse cover, rgba(16,225,228,0.65) 0%,rgba(0,0,0,0) 100%); 239 | box-shadow:0px 0px 5px 0px #10e1e4; 240 | animation-duration: 9s; 241 | } 242 | 243 | i:nth-child(16){ 244 | top:620px; 245 | left:730px; 246 | background: radial-gradient(center, ellipse cover, rgba(255,51,0,0.65) 0%,rgba(0,0,0,0) 100%); 247 | box-shadow:0px 0px 5px 0px #FF3300; 248 | animation-duration: 3s; 249 | } 250 | 251 | i:nth-child(17){ 252 | top:62px; 253 | left:330px; 254 | background: radial-gradient(center, ellipse cover, rgba(255,234,232,0.65) 0%,rgba(0,0,0,0) 100%); 255 | box-shadow: 0px 0px 5px 0px #FFEAE8; 256 | animation-duration: 4s; 257 | } 258 | 259 | i:nth-child(18){ 260 | top:0px; 261 | left:250px; 262 | background: radial-gradient(center, ellipse cover, rgba(255,229,0,0.65) 0%,rgba(0,0,0,0) 100%); 263 | box-shadow: 0px 0px 5px 0px #FFE500; 264 | animation-duration: 5s; 265 | } 266 | 267 | i:nth-child(19){ 268 | top:600px; 269 | left:180px; 270 | background: radial-gradient(center, ellipse cover, rgba(255,102,153,0.65) 0%,rgba(0,0,0,0) 100%); 271 | box-shadow: 0px 0px 5px 0px #FF6699; 272 | animation-duration: 6s; 273 | } 274 | 275 | i:nth-child(20){ 276 | top:987px; 277 | left:13px; 278 | background: radial-gradient(center, ellipse cover, rgba(84,156,204,0.65) 0%,rgba(0,0,0,0) 100%); 279 | box-shadow: 0px 0px 5px 0px #549CCC; 280 | animation-duration: 7s; 281 | } 282 | 283 | i:nth-child(21){ 284 | top:120px; 285 | left:930px; 286 | background: radial-gradient(center, ellipse cover, rgba(184,175,3,0.65) 0%,rgba(0,0,0,0) 100%); 287 | box-shadow: 0px 0px 5px 0px #B8AF03; 288 | animation-duration: 8s; 289 | } 290 | 291 | i:nth-child(22){ 292 | top:80px; 293 | left:700px; 294 | background: radial-gradient(center, ellipse cover, rgba(171,250,249,0.65) 0%,rgba(0,0,0,0) 100%); 295 | box-shadow: 0px 0px 5px 0px #ABFAF9; 296 | animation-duration: 5s; 297 | } 298 | 299 | i:nth-child(23){ 300 | top:350px; 301 | left:720px; 302 | background: radial-gradient(center, ellipse cover, rgba(127,15,255,0.65) 0%,rgba(0,0,0,0) 100%); 303 | box-shadow: 0px 0px 5px 0px #7F0FFF; 304 | animation-duration: 2s; 305 | } 306 | 307 | i:nth-child(24){ 308 | top:997px; 309 | left:678px; 310 | background: radial-gradient(center, ellipse cover, rgba(48,128,0,0.65) 0%,rgba(0,0,0,0) 100%); 311 | box-shadow: 0px 0px 5px 0px #308000; 312 | animation-duration: 3s; 313 | } 314 | 315 | i:nth-child(25){ 316 | top:714px; 317 | left:246px; 318 | background: radial-gradient(center, ellipse cover, rgba(255,38,38,0.65) 0%,rgba(0,0,0,0) 100%); 319 | box-shadow: 0px 0px 5px 0px #FF2626; 320 | animation-duration: 4s; 321 | } 322 | 323 | i:nth-child(26){ 324 | top:0px; 325 | left:480px; 326 | background: radial-gradient(center, ellipse cover, rgba(15,29,215,0.65) 0%,rgba(0,0,0,0) 100%); 327 | box-shadow: 0px 0px 5px 0px #0F1DD7; 328 | animation-duration: 5s; 329 | } 330 | 331 | i:nth-child(27){ 332 | top:456px; 333 | left:1000px; 334 | background: radial-gradient(center, ellipse cover, rgba(51,102,153,0.65) 0%,rgba(0,0,0,0) 100%); 335 | box-shadow: 0px 0px 5px 0px #336699; 336 | animation-duration: 6s; 337 | } 338 | 339 | i:nth-child(28){ 340 | top:350px; 341 | left:865px; 342 | background: radial-gradient(center, ellipse cover, rgba(70,172,255,0.65) 0%,rgba(0,0,0,0) 100%); 343 | box-shadow: 0px 0px 5px 0px #46ACFF; 344 | animation-duration: 7s; 345 | } 346 | 347 | i:nth-child(29){ 348 | top:100px; 349 | left:100px; 350 | background: radial-gradient(center, ellipse cover, rgba(222,4,5,0.65) 0%,rgba(0,0,0,0) 100%); 351 | box-shadow: 0px 0px 5px 0px #DE0405; 352 | animation-duration: 8s; 353 | } 354 | 355 | i:nth-child(30){ 356 | top:1087px; 357 | left:722px; 358 | background: radial-gradient(center, ellipse cover, rgba(77,254,21,0.65) 0%,rgba(0,0,0,0) 100%); 359 | box-shadow: 0px 0px 5px 0px #4DFE15; 360 | animation-duration: 8s; 361 | } 362 | 363 | @keyframes screen { 364 | from { 365 | opacity: 0; 366 | } 367 | 368 | 25%{ 369 | opacity: 0.3; 370 | transform: scale3d(3, 3, 4); 371 | } 372 | 373 | 50%{ 374 | opacity: 0.75; 375 | } 376 | 377 | 75%{ 378 | opacity: 1; 379 | 380 | } 381 | 382 | to{ 383 | opacity: 0; 384 | } 385 | } -------------------------------------------------------------------------------- /JS MINI PROJECTS/Weather-app/assets/cloud.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/JS MINI PROJECTS/Weather-app/assets/cloud.png -------------------------------------------------------------------------------- /JS MINI PROJECTS/Weather-app/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/JS MINI PROJECTS/Weather-app/assets/favicon.ico -------------------------------------------------------------------------------- /JS MINI PROJECTS/Weather-app/assets/humidity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/JS MINI PROJECTS/Weather-app/assets/humidity.png -------------------------------------------------------------------------------- /JS MINI PROJECTS/Weather-app/assets/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/JS MINI PROJECTS/Weather-app/assets/loading.gif -------------------------------------------------------------------------------- /JS MINI PROJECTS/Weather-app/assets/location.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/JS MINI PROJECTS/Weather-app/assets/location.png -------------------------------------------------------------------------------- /JS MINI PROJECTS/Weather-app/assets/not-found.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/JS MINI PROJECTS/Weather-app/assets/not-found.png -------------------------------------------------------------------------------- /JS MINI PROJECTS/Weather-app/assets/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/JS MINI PROJECTS/Weather-app/assets/search.png -------------------------------------------------------------------------------- /JS MINI PROJECTS/Weather-app/assets/wind.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/JS MINI PROJECTS/Weather-app/assets/wind.png -------------------------------------------------------------------------------- /JS MINI PROJECTS/Weather-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Weather app | Khushi 8 | 9 | 10 | 12 | 13 | 14 | 15 |
16 |
17 |

WEATHER APP

18 | 19 |
20 |
21 | Your Weather 22 |
23 |
24 | Search Weather 25 |
26 |
27 | 28 |
29 |
30 | 31 | 34 |
35 |
36 | 37 | 38 |
39 | 40 |

41 | 42 |
43 | 44 |
45 | 46 | 47 |
48 | location 49 |

Grant Location Access

50 |

Allow Location TO Get Weather Information

51 | 52 |
53 | 54 | 55 |
56 | loding 57 |

LOADING

58 |
59 | 60 | 61 |
62 |
63 |

64 | 65 |
66 |
67 |
68 |
69 |
70 |
71 | 72 |

WINDSPEED

73 |

74 |
75 |
76 | 77 |

HUMIDITY

78 |

79 |
80 |
81 | 82 |

CLOUD

83 |

84 |
85 |
86 |
87 |
88 | 89 | 90 |
91 |
92 | 93 | 94 | -------------------------------------------------------------------------------- /JS MINI PROJECTS/Weather-app/script.js: -------------------------------------------------------------------------------- 1 | const API_KEY = 'b2743dbe9fecf85b38dea8364a39e696' 2 | 3 | const userWeather = document.querySelector("[data-user-weather]") 4 | const searchWeather = document.querySelector("[data-search-weather]") 5 | 6 | const searchForm = document.querySelector("[data-search-form]") 7 | const userLocation = document.querySelector("[data-user-location]") 8 | const weatherDisplay = document.querySelector("[data-weather-show]") 9 | const loading = document.querySelector("[data-loading]") 10 | 11 | const accessBtn = document.querySelector("[data-grant-access]") 12 | 13 | const searchCity = document.querySelector("[search-city]") 14 | 15 | const error = document.querySelector("[data-erorr]") 16 | 17 | const searchBtn = document.querySelector("[data-searchBtn]") 18 | 19 | getSessionStorage() 20 | 21 | let currentTab = userWeather 22 | userWeather.classList.add("current-tab") 23 | 24 | userWeather.addEventListener('click' , ()=> (switchTab(userWeather))) 25 | searchWeather.addEventListener('click' , ()=> (switchTab(searchWeather))) 26 | 27 | function switchTab(clickedTab){ 28 | if(clickedTab != currentTab){ 29 | currentTab.classList.remove("current-tab") 30 | currentTab = clickedTab 31 | currentTab.classList.add("current-tab") 32 | 33 | if(!searchForm.classList.contains("active")){ 34 | weatherDisplay.classList.remove("active") 35 | searchForm.classList.add("active") 36 | userLocation.classList.remove("active") 37 | } 38 | else{ 39 | searchForm.classList.remove("active") 40 | weatherDisplay.classList.remove("active") 41 | 42 | getSessionStorage() 43 | } 44 | } 45 | } 46 | 47 | function getSessionStorage(){ 48 | const localCoordinates = sessionStorage.getItem("user-coordinates") 49 | 50 | if(!localCoordinates){ 51 | userLocation.classList.add("active") 52 | } 53 | else{ 54 | const coordinates = JSON.parse(localCoordinates) 55 | getUserWeatherInfo(coordinates) 56 | } 57 | } 58 | 59 | async function getUserWeatherInfo(coordinates){ 60 | const {lat, lon} = coordinates; 61 | userLocation.classList.remove("active") 62 | loading.classList.add("active") 63 | 64 | try{ 65 | let result = await fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`) 66 | let data = await result.json() 67 | loading.classList.remove("active") ; 68 | renderWeatherInfo(data) 69 | } 70 | catch(error){ 71 | loading.classList.remove("active") 72 | console.log("Your location is not working") 73 | } 74 | } 75 | 76 | function renderWeatherInfo(data){ 77 | const cityName = document.querySelector("[data-cityName]") 78 | const countyFlag = document.querySelector("[data-countyFlag]") 79 | const weatherDescription = document.querySelector("[data-weatherDescription]") 80 | const weatherIcon = document.querySelector("[data-weatherIcon]") 81 | const temp = document.querySelector("[data-cityTemp]") 82 | const windspeed = document.querySelector("[data-windspeed]") 83 | const humidity = document.querySelector("[data-humidity]") 84 | const cloud = document.querySelector("[data-cloud]") 85 | 86 | cityName.textContent = data?.name 87 | countyFlag.src = `https://flagcdn.com/144x108/${data?.sys?.country?.toLowerCase()}.png` 88 | weatherDescription.textContent = data?.weather?.[0]?.description 89 | weatherIcon.src = `http://openweathermap.org/img/w/${data?.weather?.[0]?.icon}.png` 90 | 91 | temp.textContent = `${data?.main?.temp}°C` 92 | 93 | windspeed.textContent = `${data?.wind?.speed}m/s` 94 | humidity.textContent = `${data?.main?.humidity}%` 95 | cloud.textContent = `${data?.clouds?.all}%` 96 | 97 | weatherDisplay.classList.add("active") 98 | } 99 | 100 | accessBtn.addEventListener('click' , ()=> { 101 | getLocation() 102 | } ) 103 | 104 | function getLocation(){ 105 | if(navigator.geolocation){ 106 | navigator.geolocation.getCurrentPosition(getCurentCordinates) 107 | } 108 | else{ 109 | console.log("Cordinates not available") 110 | } 111 | } 112 | 113 | function getCurentCordinates(position){ 114 | let currentCordinates = { 115 | lat : position.coords.latitude, 116 | lon : position.coords.longitude 117 | } 118 | 119 | sessionStorage.setItem("user-coordinates" , JSON.stringify(currentCordinates)) 120 | 121 | getUserWeatherInfo(currentCordinates) 122 | } 123 | 124 | const apiErrorContainer = document.querySelector(".api-error-container") 125 | const apiErrorImg = document.querySelector("[data-notFoundImg]"); 126 | const apiErrorMessage = document.querySelector("[data-apiErrorText]"); 127 | const apiErrorBtn = document.querySelector("[data-apiErrorBtn]"); 128 | 129 | async function getCityWeatherInfo(city){ 130 | loading.classList.add("active"); 131 | weatherDisplay.classList.remove("active"); 132 | apiErrorContainer.classList.remove("active"); 133 | 134 | try { 135 | const res = await fetch( 136 | `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric` 137 | ); 138 | const data = await res.json(); 139 | if (!data.sys) { 140 | throw data; 141 | } 142 | loading.classList.remove("active"); 143 | weatherDisplay.classList.add("active"); 144 | renderWeatherInfo(data); 145 | } catch (error) { 146 | loading.classList.remove("active"); 147 | apiErrorContainer.classList.add("active"); 148 | apiErrorMessage.innerText = `${error?.message}`; 149 | apiErrorBtn.style.display = "none"; 150 | } 151 | } 152 | 153 | searchForm.addEventListener("submit", (e) =>{ 154 | e.preventDefault(); 155 | let city = searchCity.value; 156 | if(city === "") 157 | return; 158 | else 159 | getCityWeatherInfo(city); 160 | 161 | }) 162 | -------------------------------------------------------------------------------- /JS MINI PROJECTS/Weather-app/styles.css: -------------------------------------------------------------------------------- 1 | *{ 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | font-family: 'Merriweather Sans', sans-serif; 6 | } 7 | 8 | :root { 9 | --colorDark1: #112D4E; 10 | --colorDark2: #3F72AF; 11 | --colorLight1: #DBE2EF; 12 | --colorLight2: #F9F7F7; 13 | } 14 | 15 | .wrapper{ 16 | height: 100vh; 17 | width: 100vw; 18 | color: var(--colorLight2); 19 | background-image: linear-gradient(160deg, #112d4e 0%, #3f72af 100%); 20 | } 21 | 22 | .weather-block{ 23 | margin-block: 4rem; 24 | } 25 | 26 | h1 { 27 | text-align: center; 28 | text-transform:uppercase; 29 | padding-top: 20px; 30 | } 31 | 32 | .btn-group{ 33 | width:90%; 34 | max-width: 550px; 35 | margin: 0 auto; 36 | margin-top: 4rem; 37 | display: flex; 38 | justify-content: space-between; 39 | } 40 | 41 | .btn-group{ 42 | cursor: pointer; 43 | font-size: 0.875rem; 44 | letter-spacing: 1.75px; 45 | padding: 5px 8px; 46 | } 47 | 48 | .btn-group .current-tab{ 49 | background-color: rgba(219, 226, 239, 0.5); 50 | padding: 8px; 51 | border-radius: 4px; 52 | } 53 | 54 | .btn{ 55 | all: unset; 56 | font-size: 0.85rem; 57 | text-transform: uppercase; 58 | border-radius: 5px; 59 | background-color: var(--colorDark2); 60 | cursor: pointer; 61 | padding: 10px 30px; 62 | margin-bottom: 10px; 63 | } 64 | 65 | .subcontainer{ 66 | display:flex; 67 | flex-direction:column; 68 | align-items: center; 69 | } 70 | 71 | .initial-ui{ 72 | display:none; 73 | } 74 | 75 | .initial-ui.active{ 76 | display:flex; 77 | } 78 | 79 | .initial-ui img{ 80 | margin-bottom: 2rem; 81 | } 82 | 83 | .initial-ui h3{ 84 | font-size: 1.75rem; 85 | font-weight: 600; 86 | } 87 | 88 | .initial-ui p:last-of-type{ 89 | font-size:0.85rem; 90 | font-weight: 500; 91 | margin-top: 0.75rem; 92 | margin-bottom: 1.75rem; 93 | letter-spacing: 0.75px; 94 | } 95 | 96 | .loading-ui{ 97 | display: none; 98 | } 99 | 100 | .loading-ui.active{ 101 | display: flex; 102 | justify-content: center; 103 | align-items: center; 104 | flex-direction: column; 105 | } 106 | 107 | .loading-ui p{ 108 | text-transform: uppercase; 109 | } 110 | 111 | .user-weather-ui{ 112 | display:none; 113 | } 114 | 115 | .user-weather-ui.active{ 116 | display: flex; 117 | } 118 | 119 | .name{ 120 | display: flex; 121 | align-items: center; 122 | gap: 0 0.5rem; 123 | margin-bottom: 1rem; 124 | } 125 | 126 | .user-weather-ui p{ 127 | font-size:1.5rem; 128 | font-weight:200; 129 | } 130 | 131 | .user-weather-ui img{ 132 | width:90px; 133 | height:90px; 134 | } 135 | 136 | .name p{ 137 | font-size:2rem; 138 | } 139 | 140 | .name img{ 141 | width: 30px; 142 | height:30px; 143 | object-fit: contain; 144 | } 145 | 146 | .user-info-container p[data-cityTemp] { 147 | font-size:2.75rem; 148 | font-weight:700; 149 | } 150 | 151 | .box-container{ 152 | width:90%; 153 | display: flex; 154 | gap: 10px 20px; 155 | justify-content: center; 156 | align-items: center; 157 | margin-top: 2rem; 158 | } 159 | 160 | .box{ 161 | width:30%; 162 | max-width:200px; 163 | background-color: rgba(219, 226, 239, 0.5);; 164 | border-radius: 5px; 165 | padding:1rem; 166 | display: flex; 167 | flex-direction: column; 168 | gap:5px 0; 169 | /* justify-content: space-between; */ 170 | align-items: center; 171 | } 172 | 173 | .box img{ 174 | width:50px; 175 | height:50px; 176 | } 177 | 178 | .box p:first-of-type{ 179 | font-size: 1.15rem; 180 | font-weight:600; 181 | text-transform: uppercase; 182 | } 183 | 184 | .box p:last-of-type{ 185 | font-size: 1rem; 186 | font-weight: 200; 187 | } 188 | 189 | .form-container{ 190 | display: none; 191 | width:90%; 192 | max-width:550px; 193 | margin:0 auto; 194 | justify-content: center; 195 | align-items: center; 196 | gap: 0 10px; 197 | margin-bottom: 3rem; 198 | } 199 | 200 | .input-feild{ 201 | margin: 20px; 202 | display: flex; 203 | gap: 10px; 204 | } 205 | 206 | .form-container.active{ 207 | display: flex; 208 | } 209 | 210 | .form-container input{ 211 | all:unset; 212 | width: calc(100% - 80px); 213 | height:40px; 214 | padding: 0 20px; 215 | background-color:rgba(219, 226, 239, 0.5); 216 | border-radius: 10px; 217 | } 218 | 219 | .form-container input::placeholder{ 220 | color: rgba(255, 255, 255, 0.7); 221 | } 222 | 223 | .form-container input:focus{ 224 | outline: 3px solid rgba(255, 255, 255, 0.7); 225 | } 226 | 227 | .form-container .btn { 228 | padding:unset; 229 | width: 40px; 230 | height: 40px; 231 | display: flex; 232 | align-items: center; 233 | justify-content: center; 234 | border-radius: 100%; 235 | margin-bottom:1px; 236 | } 237 | 238 | .api-error-container { 239 | display: none; 240 | } 241 | 242 | .api-error-container.active { 243 | display: flex; 244 | justify-content: center; 245 | align-items: center; 246 | flex-direction: column; 247 | gap: 1rem 0; 248 | } 249 | 250 | .api-error-container p { 251 | text-align: center; 252 | } 253 | 254 | .api-error-container img { 255 | width: 100%; 256 | max-width: 300px; 257 | aspect-ratio: 1 / 1; 258 | object-fit: cover; 259 | } 260 | -------------------------------------------------------------------------------- /Links-of-codehelp-project.txt: -------------------------------------------------------------------------------- 1 | 2 | StudyNotion live link: 3 | 4 | https://studynotion-edtech-project.vercel.app/ 5 | 6 | 7 | 8 | Postman file of Mega project: 9 | 10 | https://documenter.getpostman.com/view/24441701/2s93kz6REm 11 | 12 | 13 | Figma link of major project : 14 | 15 | https://www.figma.com/file/Mikd0FjHKAofUlWQSi70nf/StudyNotion_shared?type=design&node-id=1-5&t=qe3gWFLXQWrrJh1W-0 16 | 17 | 18 | StudyNotion Project description:- 19 | 20 | https://docs.google.com/document/d/19OZY8J9eDFGxU7w-xrXKS89KYI7EmWqz/edit#heading=h.gjdgxs 21 | 22 | 23 | Shopping website: 24 | 25 | https://codehelp-shopping-cart.netlify.app/ 26 | 27 | 28 | Countdown Timer : 29 | 30 | https://codehelp-countdown-timer.netlify.app/ 31 | 32 | 33 | Blogs : 34 | 35 | https://codehelp-blogs-context-1.netlify.app/ 36 | 37 | 38 | Study Notion : 39 | 40 | https://codehelp-router-project.netlify.app/ 41 | 42 | 43 | Random gif : 44 | 45 | https://codehelp-random-gif.netlify.app/ 46 | 47 | 48 | Testimonial slider: 49 | 50 | https://codehelp-testimonial-slider.netlify.app/ 51 | 52 | 53 | Top courses: 54 | 55 | https://codehelp-top-courses.netlify.app/ 56 | 57 | 58 | Plan with love: 59 | 60 | https://plan-with-love.netlify.app/ 61 | 62 | 63 | Tic-tac-toe app: 64 | 65 | https://codehelp-tictactoe.netlify.app 66 | 67 | 68 | DevDetective project : 69 | 70 | https://codehelp-devdetective.netlify.app/ 71 | 72 | 73 | Weather app: 74 | 75 | https://codehelp-weather-app.netlify.app/ 76 | 77 | 78 | Password generator: 79 | 80 | https://codehelp-password-generator.netlify.app/ 81 | 82 | 83 | Modal project: 84 | 85 | https://codehelp-share-modal.netlify.app/ 86 | 87 | 88 | Counter app: 89 | 90 | https://codehelp-counter-app.netlify.app/ 91 | 92 | 93 | Discord Link: 94 | 95 | https://codehelp-discord-clone.netlify.app/ 96 | 97 | 98 | RazorPay Website: 99 | 100 | https://codehelp-razorpay-clone.netlify.app/ 101 | 102 | 103 | Portfolio Website: 104 | 105 | https://codehelp-portfolio-website.netlify.app/ 106 | 107 | 108 | Modern Chair: 109 | 110 | https://codehelp-modern-chair-page.netlify.app/ 111 | 112 | 113 | Figma Link: 114 | 115 | https://www.figma.com/file/yCb8S93CG1ckFBLeFQy98l/CodeHelp-Figma-Assignment--1 116 | 117 | 118 | Image Gallary: 119 | 120 | https://codehelp-image-gallery.netlify.app/ 121 | 122 | 123 | Product Card: 124 | 125 | https://codehelp-product-card.netlify.app/ 126 | 127 | 128 | Parallax Website: 129 | 130 | https://codehelp-parallax-website.netlify.app/ 131 | 132 | -------------------------------------------------------------------------------- /Notes/CSS-basics-1.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Notes/CSS-basics-1.pdf -------------------------------------------------------------------------------- /Notes/CSS-basics-2.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Notes/CSS-basics-2.pdf -------------------------------------------------------------------------------- /Notes/CSS_Animation_Lecture_Notes.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Notes/CSS_Animation_Lecture_Notes.pdf -------------------------------------------------------------------------------- /Notes/CSS_III_Lecture_3_notes.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Notes/CSS_III_Lecture_3_notes.pdf -------------------------------------------------------------------------------- /Notes/CSS_II_Noteslecture_2.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Notes/CSS_II_Noteslecture_2.pdf -------------------------------------------------------------------------------- /Notes/CSS_IV_lecture_4_notes_Grid.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Notes/CSS_IV_lecture_4_notes_Grid.pdf -------------------------------------------------------------------------------- /Notes/CSS_Lecture_1_Complete_Notes_Part_1__2.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Notes/CSS_Lecture_1_Complete_Notes_Part_1__2.pdf -------------------------------------------------------------------------------- /Notes/CSS_Transition_Notes_Animation_Lecture.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Notes/CSS_Transition_Notes_Animation_Lecture.pdf -------------------------------------------------------------------------------- /Notes/Data_Communications_and_Networking_By_Behrouz_A.Forouzan (1).pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Notes/Data_Communications_and_Networking_By_Behrouz_A.Forouzan (1).pdf -------------------------------------------------------------------------------- /Notes/First_lecture_notes_HTML_1 - Copy.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Notes/First_lecture_notes_HTML_1 - Copy.pdf -------------------------------------------------------------------------------- /Notes/HTML-full-notes.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Notes/HTML-full-notes.pdf -------------------------------------------------------------------------------- /Notes/HTML_2_Lecture_II_Notes..pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Notes/HTML_2_Lecture_II_Notes..pdf -------------------------------------------------------------------------------- /Notes/JS-basics-1.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Notes/JS-basics-1.pdf -------------------------------------------------------------------------------- /Notes/JS-basics-2.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Notes/JS-basics-2.pdf -------------------------------------------------------------------------------- /Notes/JS-basics-3.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Notes/JS-basics-3.pdf -------------------------------------------------------------------------------- /Notes/JS-basics-4.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Notes/JS-basics-4.pdf -------------------------------------------------------------------------------- /Notes/Lecture_3_NotesHTML_III.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Notes/Lecture_3_NotesHTML_III.pdf -------------------------------------------------------------------------------- /Notes/Lecture_4_Notes_HTML_IV.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Notes/Lecture_4_Notes_HTML_IV.pdf -------------------------------------------------------------------------------- /Notes/REACT_Advance_Lec_2_Notes.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Notes/REACT_Advance_Lec_2_Notes.pdf -------------------------------------------------------------------------------- /Notes/REACT_Advance_Lec_4_Notes_Redux_toolkit.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Notes/REACT_Advance_Lec_4_Notes_Redux_toolkit.pdf -------------------------------------------------------------------------------- /Notes/REACT_Basics_Lec_2_Notes.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Notes/REACT_Basics_Lec_2_Notes.pdf -------------------------------------------------------------------------------- /Notes/REACT_Basics_Lec_4_Notes.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Notes/REACT_Basics_Lec_4_Notes.pdf -------------------------------------------------------------------------------- /Notes/REACT_Intermediate_Lec_2_Notes (1).pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Notes/REACT_Intermediate_Lec_2_Notes (1).pdf -------------------------------------------------------------------------------- /Notes/REACT_Intermediate_Lec_2_Notes.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Notes/REACT_Intermediate_Lec_2_Notes.pdf -------------------------------------------------------------------------------- /Notes/React_Basics_Lec_1_Notes.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/Notes/React_Basics_Lec_1_Notes.pdf -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # DOT-BATCH 2 | Welcome to dot-batch 3 | Class-Notes 4 | Class-Projects 5 | Homework-Project 6 | Javascript mini projects 7 | links of codehelp projects -------------------------------------------------------------------------------- /React-project/counter/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /React-project/counter/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `npm start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 13 | 14 | The page will reload when you make changes.\ 15 | You may also see any lint errors in the console. 16 | 17 | ### `npm test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `npm run build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `npm run eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!** 35 | 36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. 39 | 40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 55 | 56 | ### Making a Progressive Web App 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 59 | 60 | ### Advanced Configuration 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `npm run build` fails to minify 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 71 | -------------------------------------------------------------------------------- /React-project/counter/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "counter", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^18.2.0", 10 | "react-dom": "^18.2.0", 11 | "react-scripts": "5.0.1", 12 | "web-vitals": "^2.1.4" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /React-project/counter/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/React-project/counter/public/favicon.ico -------------------------------------------------------------------------------- /React-project/counter/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | 28 | 29 | React App 30 | 31 | 32 | 33 |
34 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /React-project/counter/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/React-project/counter/public/logo192.png -------------------------------------------------------------------------------- /React-project/counter/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushiteli/DOT-BATCH/1f4f7bc6c6346b91d3a8e419fb2903608d4109db/React-project/counter/public/logo512.png -------------------------------------------------------------------------------- /React-project/counter/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /React-project/counter/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /React-project/counter/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /React-project/counter/src/App.js: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import './App.css'; 3 | 4 | function App() { 5 | const [count,setCount] = useState(0); 6 | 7 | return ( 8 | <> 9 |
10 |
11 |

12 | Increment And Decrement 13 |

14 |
15 | 21 |
22 | {count} 23 |
24 | 30 |
31 |
32 |
33 | 34 | ); 35 | } 36 | 37 | export default App; 38 | -------------------------------------------------------------------------------- /React-project/counter/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /React-project/counter/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | 5 | const root = ReactDOM.createRoot(document.getElementById('root')); 6 | root.render( 7 | 8 | 9 | 10 | ); 11 | 12 | --------------------------------------------------------------------------------