├── .DS_Store ├── 1.HTML-Intro ├── aboutme.html ├── formdemo.html └── index.html ├── 10.Project5 ├── img │ ├── 0.webp │ ├── 1.webp │ ├── 2.webp │ ├── 3.webp │ ├── 4.webp │ ├── 5.webp │ └── 6.webp ├── index.html └── style.css ├── 11.Project6 ├── .DS_Store ├── img │ ├── 1.jpeg │ ├── 2.webp │ └── 3.jpeg ├── index.html └── style.css ├── 12.Project7 ├── cart.html ├── css │ ├── cart.css │ ├── common.css │ ├── home.css │ ├── login.css │ ├── productDetails.css │ └── productList.css ├── img │ └── product.jpg ├── index.html ├── login.html ├── productDetails.html └── productList.html ├── 13.Dom-intro ├── index.html └── index.js ├── 14.Project8 ├── index.html ├── index.js └── style.css ├── 15.Project9 ├── index.html ├── index.js └── style.css ├── 16.Project10 ├── cart.html ├── css │ ├── cart.css │ ├── common.css │ ├── home.css │ ├── login.css │ ├── productDetails.css │ └── productList.css ├── img │ └── product.jpg ├── index.html ├── js │ ├── cart.js │ ├── common.js │ ├── index.js │ ├── productDetails.js │ └── productList.js ├── login.html ├── notes.pdf ├── productDetails.html └── productList.html ├── 17.Project11 ├── index.css ├── index.html ├── index.js └── notes.pdf ├── 2.Project1 └── index.html ├── 3.CSS-Intro ├── a.Css-basics │ ├── index.html │ └── style.css ├── b.boxmodel │ ├── index.html │ └── style.css └── c.flexbox │ ├── index.html │ └── style.css ├── 4.Project2 ├── img │ └── IMG_6200.jpg ├── index.html └── style.css ├── 5.Project3 ├── index.html └── style.css ├── 6.CSS-animations ├── index.html └── style.css ├── 7.Project4 ├── index.html └── style.css ├── 8.Bootstrap-Demo ├── index.html └── style.css ├── 9.Project4 ├── calculator.html ├── index.html └── style.css ├── Assignments ├── .DS_Store ├── Assign-1 │ └── Screenshot 2023-05-19 at 11.05.50 PM.png └── Assign-2 │ └── Screenshot 2023-05-20 at 11.02.42 PM.png └── README.md /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/singhsanket143/Frontend-Basics/e380a36f4ee8f1174f2fdd3d07b19754c43876fb/.DS_Store -------------------------------------------------------------------------------- /1.HTML-Intro/aboutme.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | About me 8 | 9 | 10 |

Sanket Singh

11 |
12 | Software Engineer | 13 | Educator | 14 | Tech enthusiast 15 |
16 | 17 |

I love to build and break stuff and educate people about tech.

18 | 19 | 30 | 31 |
32 | -------------------------------------------------------------------------------- /1.HTML-Intro/formdemo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Forms 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /1.HTML-Intro/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | HTML DEMO 8 | 9 | 10 | 11 |

This is heading 1

12 |

This is heading 2

13 |

This is heading 3

14 |

This is heading 4

15 |
This is heading 5
16 |
This is heading 6
17 | 18 |

This is a paragraph

19 | 20 | 30 | 31 |
    32 |
  1. List item 1
    2. 33 |
  2. List item 2
    3. 34 |
  3. List item 3
    4. 35 |
  4. List item 4
    5. 36 |
      37 |
    1. Sublist item 1
      2. 38 |
    2. sublist item 2
      3. 39 |
    40 |
41 | 42 |
43 | Hi there 44 | an adorable pet dog 45 |
46 | 47 |
48 | Hi there 49 | an adorable pet dog 50 |
51 | 52 |
53 | One div tag 54 |
55 |
56 | Two div tag 57 |
58 | 59 | One span 60 | Two span 61 | 62 | This is a moving marquee 63 | 64 | 65 | 66 | 67 |
68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 83 | 84 | 85 |
86 | 87 |

Text area can expand

88 | 89 | 90 | 91 | 92 | Heading of the table 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 |
onetwo
onetwo
onetwo
onetwo
113 | 114 |

Added paragraph

115 | 116 | -------------------------------------------------------------------------------- /10.Project5/img/0.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/singhsanket143/Frontend-Basics/e380a36f4ee8f1174f2fdd3d07b19754c43876fb/10.Project5/img/0.webp -------------------------------------------------------------------------------- /10.Project5/img/1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/singhsanket143/Frontend-Basics/e380a36f4ee8f1174f2fdd3d07b19754c43876fb/10.Project5/img/1.webp -------------------------------------------------------------------------------- /10.Project5/img/2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/singhsanket143/Frontend-Basics/e380a36f4ee8f1174f2fdd3d07b19754c43876fb/10.Project5/img/2.webp -------------------------------------------------------------------------------- /10.Project5/img/3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/singhsanket143/Frontend-Basics/e380a36f4ee8f1174f2fdd3d07b19754c43876fb/10.Project5/img/3.webp -------------------------------------------------------------------------------- /10.Project5/img/4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/singhsanket143/Frontend-Basics/e380a36f4ee8f1174f2fdd3d07b19754c43876fb/10.Project5/img/4.webp -------------------------------------------------------------------------------- /10.Project5/img/5.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/singhsanket143/Frontend-Basics/e380a36f4ee8f1174f2fdd3d07b19754c43876fb/10.Project5/img/5.webp -------------------------------------------------------------------------------- /10.Project5/img/6.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/singhsanket143/Frontend-Basics/e380a36f4ee8f1174f2fdd3d07b19754c43876fb/10.Project5/img/6.webp -------------------------------------------------------------------------------- /10.Project5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Shopping page 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 54 | 55 | 56 | 57 | 75 | 76 | 77 |
78 |
79 |
80 |
81 |
82 |
83 | ... 84 |
85 |
86 |
Monitor
87 |

₹20,000 - ₹40,000

88 | View Options 89 |
90 |
91 |
92 |
93 |
94 |
95 | ... 96 |
97 |
98 |
Monitor
99 |

₹20,000 - ₹40,000

100 | View Options 101 |
102 |
103 |
104 |
105 |
106 |
107 | ... 108 |
109 |
110 |
Monitor
111 |

₹20,000 - ₹40,000

112 | View Options 113 |
114 |
115 |
116 |
117 |
118 |
119 | ... 120 |
121 |
122 |
Monitor
123 |

₹20,000 - ₹40,000

124 | View Options 125 |
126 |
127 |
128 |
129 |
130 | 131 |
132 | 133 |
134 |
135 |
136 |
137 |
138 | ... 139 |
140 |
141 |
Monitor
142 |

₹20,000 - ₹40,000

143 | View Options 144 |
145 |
146 |
147 |
148 |
149 |
150 | ... 151 |
152 |
153 |
Monitor
154 |

₹20,000 - ₹40,000

155 | View Options 156 |
157 |
158 |
159 |
160 |
161 |
162 | ... 163 |
164 |
165 |
Monitor
166 |

₹20,000 - ₹40,000

167 | View Options 168 |
169 |
170 |
171 |
172 |
173 |
174 | ... 175 |
176 |
177 |
Monitor
178 |

₹20,000 - ₹40,000

179 | View Options 180 |
181 |
182 |
183 |
184 |
185 | 186 |
187 | 188 |
189 |
190 |
191 |
192 |
193 | ... 194 |
195 |
196 |
Monitor
197 |

₹20,000 - ₹40,000

198 | View Options 199 |
200 |
201 |
202 |
203 |
204 |
205 | ... 206 |
207 |
208 |
Monitor
209 |

₹20,000 - ₹40,000

210 | View Options 211 |
212 |
213 |
214 |
215 |
216 |
217 | ... 218 |
219 |
220 |
Monitor
221 |

₹20,000 - ₹40,000

222 | View Options 223 |
224 |
225 |
226 |
227 |
228 |
229 | ... 230 |
231 |
232 |
Monitor
233 |

₹20,000 - ₹40,000

234 | View Options 235 |
236 |
237 |
238 |
239 |
240 | 241 |
242 | 243 |
244 | 245 | 246 | 247 |
248 | 258 |
259 | 260 | 261 | 262 | 263 | -------------------------------------------------------------------------------- /10.Project5/style.css: -------------------------------------------------------------------------------- 1 | .b-example-divider { 2 | height: 3rem; 3 | background-color: rgba(0, 0, 0, .1); 4 | border: solid rgba(0, 0, 0, .15); 5 | border-width: 1px 0; 6 | box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15); 7 | } 8 | 9 | .custom-divider { 10 | height: 3rem; 11 | background-color: white; 12 | } 13 | 14 | @media (max-width: 600px) { 15 | .product-card { 16 | max-width: 275px; 17 | margin: 1rem auto; 18 | } 19 | } 20 | 21 | @media (max-width: 920px) { 22 | .product-card { 23 | max-width: 275px; 24 | margin: 1rem auto; 25 | } 26 | } 27 | 28 | .product-image-container { 29 | display: flex; 30 | padding: 2rem; 31 | height: 250px; 32 | } 33 | 34 | .product-image { 35 | max-height: 160px; 36 | max-width: 150px; 37 | } 38 | 39 | -------------------------------------------------------------------------------- /11.Project6/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/singhsanket143/Frontend-Basics/e380a36f4ee8f1174f2fdd3d07b19754c43876fb/11.Project6/.DS_Store -------------------------------------------------------------------------------- /11.Project6/img/1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/singhsanket143/Frontend-Basics/e380a36f4ee8f1174f2fdd3d07b19754c43876fb/11.Project6/img/1.jpeg -------------------------------------------------------------------------------- /11.Project6/img/2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/singhsanket143/Frontend-Basics/e380a36f4ee8f1174f2fdd3d07b19754c43876fb/11.Project6/img/2.webp -------------------------------------------------------------------------------- /11.Project6/img/3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/singhsanket143/Frontend-Basics/e380a36f4ee8f1174f2fdd3d07b19754c43876fb/11.Project6/img/3.jpeg -------------------------------------------------------------------------------- /11.Project6/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Parallax website 8 | 9 | 10 | 11 | 12 |
13 |
How to travel ?
14 |
15 | 16 |
17 |

Planning your trip

18 |
19 |

20 | Choose your destination: This is the first and most important step in planning your trip. There are so many amazing places to visit in the world, so it can be tough to decide where to go. Start by thinking about what you're interested in seeing and doing. Are you looking for a beach vacation? A city break? A cultural experience? Once you have a general idea of what you want, you can start narrowing down your options. 21 | Book your flights and accommodation: Once you know where you're going, it's time to start booking your flights and accommodation. There are a number of different websites and travel agents that can help you with this. Be sure to compare prices and read reviews before making a booking. 22 | Get your visa and travel insurance: If you're traveling outside of your home country, you'll need to get a visa. You can usually apply for a visa online or at your local embassy or consulate. You'll also need to get travel insurance. This will protect you in case of any medical emergencies or other unforeseen events. 23 | Start planning your itinerary: Once you have your flights and accommodation sorted, it's time to start planning your itinerary. This is where you'll need to start thinking about what you want to see and do on your trip. There are a number of different resources that can help you with this, such as travel guides, websites, and blogs. 24 |

25 |
26 | 27 |
28 |
Getting around
29 |
30 | 31 |
32 |

Getting around

33 |

34 | Choose your transportation: There are a number of different ways to get around when you're traveling. The best way to choose your transportation will depend on your destination and your budget. Some popular options include: 35 | Flights: Flights are the fastest way to get around, but they can also be the most expensive. 36 | Trains: Trains are a good option for long-distance travel. They're usually more comfortable than buses and can be cheaper than flights. 37 | Buses: Buses are a good option for short-distance travel. They're usually cheaper than trains and flights, but they can be less comfortable. 38 | Cars: Cars give you the most flexibility, but they can also be the most expensive. If you're planning on doing a lot of driving, it's a good idea to rent a car. 39 | 40 |

41 |
42 | 43 |
44 |
Staying safe
45 |
46 | 47 |
48 |

Staying safe

49 |

50 | Be aware of your surroundings: This is one of the most important things you can do to stay safe while you're traveling. Be aware of your surroundings at all times and don't be afraid to ask for help if you feel unsafe. 51 | Don't carry valuables with you: If you can, avoid carrying valuables with you when you're out and about. If you do have to carry valuables, keep them in a safe place, such as a hotel safe. 52 | Be careful about what you eat and drink: When you're traveling to a new country, it's important to be careful about what you eat and drink. Avoid eating street food and only drink bottled water. 53 | Be aware of the local customs: When you're traveling to a new country, it's important to be aware of the local customs. This includes things like dress code, body language, and gestures. 54 |

55 |
56 | 57 |
58 | 59 | -------------------------------------------------------------------------------- /11.Project6/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | } 4 | 5 | *, *::after, *::before { 6 | box-sizing: inherit; 7 | } 8 | 9 | body { 10 | margin: 0; 11 | padding: 0; 12 | } 13 | 14 | .first-image, .second-image, .third-image, .fourth-image { 15 | background-position: center; 16 | background-size: cover; 17 | background-attachment: fixed; 18 | 19 | } 20 | 21 | .first-image { 22 | background-image: url(img/1.jpeg); 23 | min-height: 500px; 24 | opacity: 0.8; 25 | } 26 | 27 | .second-image { 28 | background-image: url(img/2.webp); 29 | min-height: 500px; 30 | } 31 | 32 | .third-image { 33 | background-image: url(img/3.jpeg); 34 | min-height: 500px; 35 | } 36 | 37 | .fourth-image { 38 | background-image: url(img/1.jpeg); 39 | min-height: 500px; 40 | opacity: 0.8; 41 | } 42 | 43 | section { 44 | text-align: center; 45 | padding: 3rem 5rem; 46 | } 47 | 48 | .section-light { 49 | background-color: #f4f4f4; 50 | color: #0f0f0f; 51 | } 52 | 53 | .section-dark { 54 | background-color: #282e34; 55 | color: #ddd; 56 | } 57 | 58 | .image { 59 | /* display: flex; 60 | justify-content: center; 61 | align-items: center; */ 62 | position: relative; 63 | } 64 | 65 | .image div { 66 | position: absolute; 67 | top: 50%; 68 | width: 100%; 69 | text-align: center; 70 | color: white; 71 | font-size: 30px; 72 | letter-spacing: 8px; 73 | text-transform: uppercase; 74 | } 75 | 76 | .first-image span { 77 | color: white; 78 | background-color: #111; 79 | padding: 20px; 80 | } 81 | 82 | .custom { 83 | letter-spacing: 20px; 84 | color: red; 85 | font-size: 100px; 86 | } -------------------------------------------------------------------------------- /12.Project7/cart.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Cart 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 33 | 34 | 35 |
36 |
37 |

Your cart

38 |
39 |
40 | 41 |
Order Details
42 |
43 | 44 |
45 | 46 |
47 |
48 |
Some product
49 |
₹ 10000
50 |
51 |
52 |
53 |
Quantity
54 |
55 | 62 |
63 |
64 |
Remove
65 |
66 |
67 | 68 | 69 |
70 |
71 | 72 |
73 | 74 |
75 |
76 |
Some product
77 |
₹ 10000
78 |
79 |
80 |
81 |
Quantity
82 |
83 | 90 |
91 |
92 |
Remove
93 |
94 |
95 | 96 |
97 |
98 | 99 |
100 | 101 |
102 |
103 |
Some product
104 |
₹ 10000
105 |
106 |
107 |
108 |
Quantity
109 |
110 | 117 |
118 |
119 |
Remove
120 |
121 |
122 | 123 |
124 |
125 | 126 |
127 | 128 |
129 |
130 |
Some product
131 |
₹ 10000
132 |
133 |
134 |
135 |
Quantity
136 |
137 | 144 |
145 |
146 |
Remove
147 |
148 |
149 |
150 | 151 |
152 |
153 | 154 | 155 | 156 |
Price Details
157 |
158 |
159 |
Price
160 |
₹ 10000
161 |
162 |
163 |
Discount
164 |
₹ 10
165 |
166 |
167 |
Delivery Charges
168 |
FREE
169 |
170 |
171 |
Total
172 |
₹ 9990
173 |
174 |
175 | 176 |
177 |
178 | 179 | Continue Shopping 180 | 181 | 182 | Checkout 183 | 184 |
185 | 186 |
187 |
188 |
189 |
190 |
191 | 192 | 193 | 194 | 195 | 196 | -------------------------------------------------------------------------------- /12.Project7/css/cart.css: -------------------------------------------------------------------------------- 1 | .cart-title { 2 | padding: 3rem 0; 3 | } 4 | 5 | .order-details { 6 | flex-basis: 70%; 7 | box-shadow: 0px 1px 5px var(--mid-gray); 8 | padding: 20px; 9 | border-radius: 10px; 10 | margin-bottom: 2rem; 11 | } 12 | 13 | .order-details-title { 14 | font-size: 1.5rem; 15 | padding-bottom: 20px; 16 | border-bottom: 1px solid var(--light-gray); 17 | } 18 | 19 | .order-details-product { 20 | margin-top: 20px; 21 | } 22 | 23 | .order-details-product-img { 24 | flex-basis: 25%; 25 | } 26 | 27 | .order-details-product-img img { 28 | max-width: 100%; 29 | } 30 | 31 | .order-details-product-data { 32 | flex-basis: 50%; 33 | padding: 0 1rem; 34 | font-size: 1rem; 35 | justify-content: center; 36 | } 37 | 38 | .order-details-product-data > div:first-child { 39 | font-size: 1.2rem; 40 | margin-bottom: 10px; 41 | } 42 | 43 | .order-details-product-actions { 44 | flex-basis: 25%; 45 | } 46 | 47 | .order-details-product-remove { 48 | margin-top: 1rem; 49 | } 50 | 51 | .order-details-product-quantity > div:first-child { 52 | margin-bottom: 0.5rem; 53 | } 54 | 55 | .price-details { 56 | flex-basis: 30%; 57 | margin-left: 2rem; 58 | gap: 2rem; 59 | align-self: flex-start; 60 | position: sticky; 61 | top: 10px; 62 | } 63 | 64 | .price-details-box { 65 | box-shadow: 0px 1px 5px var(--mid-gray); 66 | border-radius: 10px; 67 | padding: 20px; 68 | } 69 | 70 | .continue-shopping-btn { 71 | color: white; 72 | } -------------------------------------------------------------------------------- /12.Project7/css/common.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --blue-gray: #ecf0f1; 3 | --pale-blue: #2c3e50; 4 | --mid-gray: #999; 5 | --jean-blue: #3b5875; 6 | --light-blue: #95afc0; 7 | --sky-blue: #dff9fb; 8 | --dark-sky-blue: #c7ecee; 9 | --light-gray: #ccc; 10 | } 11 | 12 | html { 13 | box-sizing: border-box; 14 | } 15 | 16 | *, *::before, *::after { 17 | box-sizing: inherit; 18 | } 19 | 20 | #header { 21 | background-color: var(--blue-gray); 22 | padding: 1.25rem 0; 23 | } 24 | 25 | #header .header-wrapper .logo { 26 | font-size: 1.35rem; 27 | line-height: 1.5; 28 | } 29 | 30 | #header .header-wrapper .logo a { 31 | color: black; 32 | letter-spacing: 5px; 33 | } 34 | 35 | #header .header-wrapper .user-actions { 36 | font-size: 1rem; 37 | line-height: 1.5; 38 | gap: 1rem; 39 | } 40 | 41 | #header .header-wrapper .user-actions .logout-btn { 42 | cursor: pointer; 43 | margin-left: 1.5rem; 44 | } 45 | 46 | #header .header-wrapper .user-actions a { 47 | color: black; 48 | text-decoration: none; 49 | } 50 | 51 | #header .header-wrapper .user-actions a:hover { 52 | text-decoration-line: underline; 53 | } 54 | 55 | .clear-filter { 56 | margin-top: 1rem; 57 | } 58 | 59 | .price-filter .price-filter-select > div { 60 | margin-bottom: 0.5rem; 61 | } -------------------------------------------------------------------------------- /12.Project7/css/home.css: -------------------------------------------------------------------------------- 1 | .home-title { 2 | font-size: 3.5rem; 3 | margin-top: 5rem; 4 | letter-spacing: 1rem; 5 | } 6 | 7 | .category-title { 8 | margin-top: 3rem; 9 | font-size: 1.5rem; 10 | } 11 | 12 | 13 | .category-list { 14 | margin-top: 3rem; 15 | gap: 1rem; 16 | } 17 | 18 | .category-item { 19 | border: 1px solid var(--pale-blue); 20 | box-shadow: 4px 4px 2px var(--mid-gray); 21 | width: 150px; 22 | background-color: var(--jean-blue); 23 | padding: 20px 30px; 24 | border-radius: 10px; 25 | text-align: center; 26 | min-height: 100px; 27 | min-width: 135px; 28 | } 29 | 30 | .category-item a { 31 | color: white; 32 | text-decoration: none; 33 | font-size: 1rem; 34 | 35 | } 36 | 37 | .category-item:hover { 38 | box-shadow: 0px 0px; 39 | transition: box-shadow 0.15s linear 0s; 40 | } 41 | 42 | -------------------------------------------------------------------------------- /12.Project7/css/login.css: -------------------------------------------------------------------------------- 1 | .home-title { 2 | font-size: 3.5rem; 3 | margin-top: 5rem; 4 | letter-spacing: 1rem; 5 | } 6 | 7 | 8 | .login-wrapper { 9 | width: 600px; 10 | margin: 50px auto; 11 | } 12 | 13 | .login-wrapper .signup-btn { 14 | cursor: pointer; 15 | color: black; 16 | padding: 1rem; 17 | } 18 | 19 | .login-wrapper .signup-btn:hover { 20 | text-decoration: underline; 21 | } 22 | 23 | .input-group { 24 | margin-bottom: 1.5rem; 25 | } 26 | 27 | .login-wrapper h4 { 28 | font-size: 2rem; 29 | letter-spacing: 4px; 30 | } -------------------------------------------------------------------------------- /12.Project7/css/productDetails.css: -------------------------------------------------------------------------------- 1 | .product-details-wrapper { 2 | padding-top: 3rem; 3 | } 4 | 5 | .product-img { 6 | flex-basis: 30%; 7 | } 8 | 9 | .product-img img { 10 | width: 100%; 11 | } 12 | 13 | .product-details-box { 14 | flex-basis: 60%; 15 | } 16 | 17 | .product-name { 18 | font-size: 3rem; 19 | } 20 | 21 | .product-price { 22 | margin-top: 1.5rem; 23 | font-size: 1.5rem; 24 | } 25 | 26 | .product-description { 27 | margin-top: 1.5rem; 28 | } 29 | 30 | .product-description-title { 31 | color: var(--mid-gray); 32 | margin-bottom: 1rem; 33 | } 34 | 35 | .product-description-data { 36 | font-size: 1rem; 37 | line-height: 1.75; 38 | text-align: justify; 39 | } 40 | 41 | .product-details-action { 42 | margin-top: 1.5rem; 43 | width: 250px; 44 | } -------------------------------------------------------------------------------- /12.Project7/css/productList.css: -------------------------------------------------------------------------------- 1 | #price-filter-label-min { 2 | flex-basis: 50%; 3 | } 4 | 5 | .product-list-title { 6 | font-size: 3rem; 7 | margin: 40px 0; 8 | font-weight: normal; 9 | } 10 | 11 | .product-list-sidebar { 12 | margin-right: 100px; 13 | flex-basis: 20%; 14 | } 15 | 16 | .product-list-sidebar a { 17 | padding: 0.5rem 1.5rem; 18 | font-size: 1.2rem; 19 | color: black; 20 | border-bottom: 1px solid var(--light-blue); 21 | background-color: var(--sky-blue); 22 | } 23 | 24 | .product-list-sidebar a:last-child { 25 | border-bottom: none; 26 | } 27 | 28 | #categoryList { 29 | margin-bottom: 1rem; 30 | } 31 | 32 | .product-list-sidebar a:hover { 33 | background-color: var(--dark-sky-blue); 34 | font-weight: bold; 35 | } 36 | 37 | .sidebar-title { 38 | margin-bottom: 0.5rem; 39 | } 40 | 41 | .sidebar-search { 42 | margin-bottom: 1rem; 43 | } 44 | 45 | .product-list-box { 46 | flex-basis: 80%; 47 | } 48 | 49 | .product-list-box .product-item { 50 | width: 30%; 51 | margin-right: 2%; 52 | margin-bottom: 30px; 53 | box-shadow: 0px 1px 5px var(--light-gray); 54 | padding: 0.5rem; 55 | } 56 | 57 | .product-list-box .product-item img { 58 | max-width: 100%; 59 | } 60 | 61 | .product-list-box .product-item .product-name { 62 | font-size: 1.5rem; 63 | color: black; 64 | padding: 0.75rem 0; 65 | } 66 | 67 | .product-list-box .product-item .product-price { 68 | color: var(--jean-blue); 69 | padding-bottom: 10px; 70 | } 71 | 72 | 73 | .product-list-box .product-item:nth-child(3n) { 74 | margin-right: 0; 75 | } 76 | 77 | .product-list-box .product-item:hover { 78 | box-shadow: 0px 4px 10px var(--light-gray); 79 | transition: box-shadow 0.15s linear 0s; 80 | } -------------------------------------------------------------------------------- /12.Project7/img/product.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/singhsanket143/Frontend-Basics/e380a36f4ee8f1174f2fdd3d07b19754c43876fb/12.Project7/img/product.jpg -------------------------------------------------------------------------------- /12.Project7/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Shop Cart 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 35 | 36 | 37 |
38 |
39 |

Welcome to Shop Cart

40 |
41 | 42 | 43 |
44 | All products 45 |
46 | 47 |
48 | Electronics 49 |
50 | 51 |
52 | Kitchen Ware 53 |
54 | 55 |
56 | Women Outfit 57 |
58 | 59 |
60 | Sports 61 |
62 | 63 |
64 | Gaming 65 |
66 | 67 |
68 |
69 | Select a category to start Shopping 70 |
71 |
72 |
73 | 74 | 75 |
76 | 77 | 78 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /12.Project7/login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Login / Signup 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 28 | 29 | 30 |
31 |
32 |

33 | Welcome to Shop Cart 34 |

35 |
36 | 50 |
51 | 52 |
53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /12.Project7/productDetails.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Product Details 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 34 | 35 | 36 |
37 |
38 |
39 |
40 | 41 |
42 | 43 |
44 |
45 | 46 |
Some product
47 |
₹ 10000
48 |
49 |
Description
50 |
51 | Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the 52 | industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type 53 | and scrambled it to make a type specimen book. It has survived not only five centuries, but also 54 | the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 55 | 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with 56 | desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 57 |
58 |
59 |
60 | 61 |
Add to cart
62 | 63 | Go to cart 64 | 65 |
66 |
67 |
68 |
69 | 70 | 71 |
72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /12.Project7/productList.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Product List 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 33 | 34 |
35 |
36 | 37 |

All Products

38 | 39 |
40 | 41 |
42 | 43 |
Search Products
44 |
45 | 46 |
47 | 48 |
Categories
49 |
50 | Electronics 51 | Kitchen ware 52 | Women outfit 53 | Sports 54 | Gaming 55 | 56 |
57 | 58 | 59 |
Filter by price
60 |
61 |
62 |
63 | 71 |
72 |
73 | 82 |
83 |
84 |
85 |
Min Price
86 |
Max Price
87 |
88 |
89 | 90 | 91 |
92 | 195 |
196 | 197 | 198 | 199 |
200 |
201 | 202 |
203 | 204 | 205 | 206 | 207 | 208 | 209 | -------------------------------------------------------------------------------- /13.Dom-intro/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document1 8 | 9 | 10 |

Hi there

11 | 12 | 13 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /13.Dom-intro/index.js: -------------------------------------------------------------------------------- 1 | function addTodo() { 2 | ul = document.getElementById("ul"); 3 | inp = document.getElementById("inp") 4 | li = document.createElement('li'); 5 | li.textContent = inp.value; 6 | cross = document.createElement('button'); 7 | cross.textContent = 'X'; 8 | cross.addEventListener('click', function handleClick(event) { 9 | event.srcElement.parentElement.remove(); 10 | }); 11 | li.appendChild(cross); 12 | ul.appendChild(li); 13 | inp.value = ''; 14 | } -------------------------------------------------------------------------------- /14.Project8/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Todo App 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 |
16 |
17 |
18 |

To-Do App

19 |
20 |
21 | 22 |
23 |
24 |
25 | 26 |
27 |
28 | Save 29 |
30 |
31 | Get Pending Todos 32 |
33 |
34 |
35 | 36 | 37 | 38 |
39 |
40 |
41 |
No.
42 |
Todo Item
43 |
Status
44 |
Actions
45 |
46 |
47 |
48 | 49 |
50 | 51 |
52 | 53 | 54 | 55 | 67 | 68 |
69 | 70 | 71 | 72 |
73 | 74 | 75 |
76 | 77 | 78 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /14.Project8/index.js: -------------------------------------------------------------------------------- 1 | console.log("Welcome to my todo app"); 2 | 3 | let todos = []; 4 | 5 | let todoDataList = document.getElementById("todo-data-list"); 6 | let saveButton = document.getElementById("save-todo"); 7 | let todoInputBar = document.getElementById("todo-input-bar") 8 | let getPendingTodosButton = document.getElementById("get-todos"); 9 | 10 | getPendingTodosButton.addEventListener("click", () => { 11 | todos = todos.filter((todo) => todo.status != "Finished"); 12 | reRenderTodos(); 13 | }) 14 | 15 | todoInputBar.addEventListener("keyup", function toggleSaveButton() { 16 | let todotext = todoInputBar.value; 17 | if(todotext.length == 0) { 18 | if(saveButton.classList.contains("disabled")) return; 19 | saveButton.classList.add("disabled"); 20 | } 21 | else if(saveButton.classList.contains("disabled")) { 22 | saveButton.classList.remove("disabled"); 23 | } 24 | }) 25 | 26 | saveButton.addEventListener("click", function getTextAndAddTodo() { 27 | let todotext = todoInputBar.value; 28 | if(todotext.length == 0) return; 29 | let todo = {text: todotext, status: 'In progress', finishButtontext: 'Finshed'}; 30 | todos.push(todo); 31 | addTodo(todo, todos.length); 32 | todoInputBar.value = '' 33 | }); 34 | 35 | 36 | function reRenderTodos() { 37 | todoDataList.innerHTML = ''; 38 | todos.forEach((element, idx) => { 39 | addTodo(element, idx+1); 40 | }) 41 | } 42 | function removeTodo(event) { 43 | let deleteButtonPressed = event.target; 44 | let indexTobeRemoved = Number(deleteButtonPressed.getAttribute("todo-idx")); 45 | todos.splice(indexTobeRemoved, 1); 46 | reRenderTodos(); 47 | } 48 | 49 | function finishTodo(event) { 50 | let finshButtonPressed = event.target; 51 | let indexToBeFinshed = Number(finshButtonPressed.getAttribute("todo-idx")); 52 | 53 | // toggle 54 | if(todos[indexToBeFinshed].status == "Finished") { 55 | todos[indexToBeFinshed].status = "In progress"; 56 | todos[indexToBeFinshed].finishButtontext = "Finshed"; 57 | } else { 58 | todos[indexToBeFinshed].status = "Finished"; 59 | todos[indexToBeFinshed].finishButtontext = "Undo"; 60 | } 61 | 62 | todos.sort((a, b) => { 63 | console.log("inside sort") 64 | if(a.status == 'Finished') { 65 | return 1; 66 | } 67 | return -1; 68 | }); 69 | 70 | reRenderTodos(); 71 | } 72 | 73 | 74 | function editTodo(event) { 75 | let editButtonPressed = event.target; 76 | let indexToEdit = Number(editButtonPressed.getAttribute("todo-idx")); 77 | let detailDiv = document.querySelector(`div[todo-idx="${indexToEdit}"]`); 78 | let input = document.querySelector(`input[todo-idx="${indexToEdit}"]`); 79 | detailDiv.style.display="none"; 80 | input.type="text"; 81 | input.value = detailDiv.textContent; 82 | } 83 | 84 | function saveEdittedTodo(event) { 85 | let input = event.target; 86 | let indexToEdit = Number(input.getAttribute("todo-idx")); 87 | let detailDiv = document.querySelector(`div[todo-idx="${indexToEdit}"]`); 88 | 89 | if(event.keyCode == 13) { 90 | detailDiv.textContent = input.value; 91 | detailDiv.style.display="block"; 92 | input.value = ''; 93 | input.type="hidden"; 94 | } 95 | } 96 | 97 | function addTodo(todo, todoCount) { 98 | console.log("called add todo") 99 | let rowDiv = document.createElement("div"); 100 | let todoItem = document.createElement("div"); 101 | let todoNumber = document.createElement("div"); 102 | let todoDetail = document.createElement("div"); 103 | let todoStatus = document.createElement("div"); 104 | let todoActions = document.createElement("div"); 105 | let deleteButton = document.createElement("button"); 106 | let finishedButton = document.createElement("button"); 107 | let editButton = document.createElement("button"); 108 | let hiddenInput = document.createElement("input"); 109 | let hr = document.createElement("hr"); 110 | 111 | // adding classes 112 | rowDiv.classList.add("row") 113 | todoItem.classList.add("todo-item", "d-flex", "flex-row", "justify-content-between", "align-items-center") 114 | todoNumber.classList.add("todo-no"); 115 | todoDetail.classList.add("todo-detail", "text-muted"); 116 | todoStatus.classList.add("todo-status", "text-muted"); 117 | todoActions.classList.add("todo-actions", "d-flex", "justify-content-start", "gap-2"); 118 | deleteButton.classList.add("btn", "btn-danger", "delete-todo"); 119 | finishedButton.classList.add("btn", "btn-success", "finish-todo"); 120 | editButton.classList.add("btn", "btn-warning", "edit-todo"); 121 | hiddenInput.classList.add("form-control", "todo-detail"); 122 | 123 | // adding attributes 124 | finishedButton.setAttribute("todo-idx", todoCount-1); 125 | deleteButton.setAttribute("todo-idx", todoCount-1); 126 | editButton.setAttribute("todo-idx", todoCount-1); 127 | todoDetail.setAttribute("todo-idx", todoCount-1); 128 | hiddenInput.setAttribute("todo-idx", todoCount-1); 129 | hiddenInput.type = "hidden" 130 | 131 | 132 | 133 | // adding click listeners 134 | deleteButton.onclick = removeTodo; 135 | finishedButton.onclick = finishTodo; 136 | editButton.onclick = editTodo; 137 | hiddenInput.addEventListener("keypress",saveEdittedTodo); 138 | 139 | todoNumber.textContent = `${todoCount}.`; 140 | todoDetail.textContent = todo.text; // sets the todo text sent from the input element 141 | todoStatus.textContent = todo.status; 142 | deleteButton.textContent = "Delete"; 143 | finishedButton.textContent = todo.finishButtontext; 144 | editButton.textContent = "Edit"; 145 | 146 | // creating the div on dom 147 | todoActions.appendChild(deleteButton); 148 | todoActions.appendChild(finishedButton); 149 | todoActions.appendChild(editButton); 150 | 151 | todoItem.appendChild(todoNumber); 152 | todoItem.appendChild(todoDetail); 153 | todoItem.appendChild(hiddenInput); 154 | todoItem.appendChild(todoStatus); 155 | todoItem.appendChild(todoActions); 156 | 157 | rowDiv.appendChild(todoItem); 158 | rowDiv.appendChild(hr); 159 | 160 | todoDataList.appendChild(rowDiv); 161 | } 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | // Reference 186 | // let getTodosButton = document.getElementById('get-todos'); 187 | // registration of event listener 188 | // getTodosButton.addEventListener("click", () => { 189 | // console.log("clicked"); 190 | // }); 191 | 192 | // getTodosButton.onclick = () => { 193 | // console.log("clicked") 194 | // } 195 | 196 | // function clickBtn() { 197 | // console.log("click") 198 | // } -------------------------------------------------------------------------------- /14.Project8/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | } 4 | 5 | *, *::after, *::before { 6 | box-sizing: inherit; 7 | } 8 | 9 | :root { 10 | --light-gray: #7284a1; 11 | } 12 | 13 | .input-section { 14 | gap: 2rem; 15 | margin-top: 2rem; 16 | } 17 | 18 | .todo-input { 19 | flex-basis: 60%; 20 | } 21 | 22 | .list-todo-heading > div { 23 | font-weight: bold; 24 | font-size: 1.5rem; 25 | margin-top: 2rem; 26 | } 27 | 28 | .todo-no { 29 | flex-basis: 3%; 30 | } 31 | 32 | .todo-detail { 33 | flex-basis:55%; 34 | } 35 | 36 | .todo-status { 37 | flex-basis: 10%; 38 | } 39 | 40 | .todo-actions { 41 | flex-basis: 15%; 42 | } 43 | 44 | .todo-actions button { 45 | /* padding-top: 0.7rem; 46 | padding-bottom: 0.7rem; */ 47 | } 48 | 49 | .todo-item { 50 | font-size: 1.3rem; 51 | margin-bottom: 1rem; 52 | } 53 | -------------------------------------------------------------------------------- /15.Project9/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Ping pong 8 | 9 | 10 | 11 | 12 |

Welcome to the ping pong game

13 | 14 |
15 |
16 | 17 |
18 | 19 |
20 | 21 |
22 |
23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /15.Project9/index.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", () => { 2 | let table = document.getElementById("ping-pong-table"); 3 | let ball = document.getElementById("ball"); // targetting the ball element 4 | let paddle = document.getElementById("paddle"); // targetting the paddle element 5 | 6 | // here the ballX and ballY will be helping us to set a starting point of ball w.r.t table 7 | let ballX = 50; // distance of the top of the ball w.r.t ping pong table 8 | let ballY = 50; // distance of the left of the ball w.r.t ping pong table 9 | 10 | let dx = 2; // displacement factor in x-direction, 2 -> you will displace by 2 px in +x direction , -2 -> you will displace by 2px in -x direction 11 | let dy = 2; // displacement factor in y-direction, 2 -> you will displace by 2 px in +y direction , -2 -> you will displace by 2px in -y direction 12 | 13 | ball.style.left = `${ballX}px`; 14 | ball.style.top = `${ballY}px`; 15 | setInterval(function exec() { 16 | 17 | ballX += dx; 18 | ballY += dy; 19 | 20 | ball.style.left = `${ballX}px`; 21 | ball.style.top = `${ballY}px`; 22 | 23 | // if(ballX > 700-20 || ballX ) dx *= -1; 24 | // if(ballY > 400-20 || ballY <= 0) dy *<= 0= -1; 25 | /** 26 | * ballX < paddle.offsetLeft + paddle.offsetWidth -> if left(wrt table) of ball < right(wrt table) of the paddle 27 | * ballY > paddle.offsetTop -> if top(wrt table) of ball > top(wrt table) of paddle 28 | * ballY + ball.offsetHeight < paddle.offsetTop + paddle.offsetHeight -> 29 | * ballY + ball.offsetHeight -> bottom of the ball 30 | * paddle.offsetTop + paddle.offsetHeight -> bottom of the paddle 31 | */ 32 | if(ballX < paddle.offsetLeft + paddle.offsetWidth && 33 | ballY > paddle.offsetTop && 34 | ballY + ball.offsetHeight < paddle.offsetTop + paddle.offsetHeight 35 | ) { 36 | dx*=-1; 37 | } 38 | // collision of ball and paddle 39 | if(ballX > table.offsetWidth - ball.offsetWidth || ballX <= 0) dx *= -1; // change x-direction 40 | if(ballY > table.offsetHeight - ball.offsetHeight || ballY <= 0) dy *= -1; // change y-direction 41 | 42 | 43 | 44 | }, 1); 45 | 46 | let paddleY = 0; 47 | let dPy = 10; // displacement for paddle in y-direction 48 | document.addEventListener("keydown", (event) => { 49 | event.preventDefault(); // prevents the execution of the default event behaviour 50 | if(event.keyCode == 38 && paddleY > 0) { 51 | // up arrow 52 | paddleY += (-1)*dPy;; 53 | console.log("up", paddleY) 54 | 55 | } else if(event.keyCode == 40 && paddleY < table.offsetHeight - paddle.offsetHeight) { 56 | // down arrow 57 | paddleY += dPy; 58 | } 59 | paddle.style.top = `${paddleY}px`; 60 | }); 61 | 62 | document.addEventListener("mousemove", (event) => { 63 | if(event.clientX > table.offsetLeft + (table.offsetWidth/2)) return; 64 | let mouseDistanceFromTop = event.clientY; // this is the distance of the mouse point from the top of the screen 65 | let distanceOfTableFromTop = table.offsetTop; 66 | let mousePointControl = mouseDistanceFromTop - distanceOfTableFromTop - paddle.offsetHeight/2; 67 | paddleY = mousePointControl; 68 | if(paddleY <= 0 || paddleY > table.offsetHeight - paddle.offsetHeight) return; // if bottom of the paddle touches bottom of the table return 69 | paddle.style.top = `${paddleY}px`; 70 | }) 71 | 72 | }); -------------------------------------------------------------------------------- /15.Project9/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | } 4 | 5 | *, *::before, *::after { 6 | box-sizing: inherit; 7 | } 8 | 9 | #ping-pong-table { 10 | border: 2px solid black; 11 | width: 700px; 12 | height: 400px; 13 | position: relative; 14 | } 15 | 16 | #paddle { 17 | background-color: blue; 18 | width: 20px; 19 | height: 75px; 20 | margin-left: 2px; 21 | position: absolute; 22 | } 23 | 24 | #ball { 25 | background-color: red; 26 | width: 20px; 27 | height: 20px; 28 | border-radius: 50%; 29 | position: absolute; 30 | } -------------------------------------------------------------------------------- /16.Project10/cart.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Cart 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 | 17 |
18 |
19 |
20 | 21 |
22 | 23 | 40 | 41 | 42 |
43 |
44 |

Your cart

45 |
46 |
47 | 48 |
Order Details
49 | 50 | 51 | 52 | 53 | 54 |
55 | 56 |
57 |
58 | 59 | 60 | 61 |
Price Details
62 |
63 |
64 |
Price
65 |
66 |
67 |
68 |
Discount
69 |
10
70 |
71 |
72 |
Delivery Charges
73 |
FREE
74 |
75 |
76 |
Total
77 |
78 |
79 |
80 | 81 |
82 |
83 | 84 | Continue Shopping 85 | 86 | 87 | Checkout 88 | 89 |
90 | 91 |
92 |
93 |
94 |
95 |
96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | -------------------------------------------------------------------------------- /16.Project10/css/cart.css: -------------------------------------------------------------------------------- 1 | .cart-title { 2 | padding: 3rem 0; 3 | } 4 | 5 | .order-details { 6 | flex-basis: 70%; 7 | box-shadow: 0px 1px 5px var(--mid-gray); 8 | padding: 20px; 9 | border-radius: 10px; 10 | margin-bottom: 2rem; 11 | } 12 | 13 | .order-details-title { 14 | font-size: 1.5rem; 15 | padding-bottom: 20px; 16 | border-bottom: 1px solid var(--light-gray); 17 | } 18 | 19 | .order-details-product { 20 | margin-top: 20px; 21 | } 22 | 23 | .order-details-product-img { 24 | flex-basis: 25%; 25 | } 26 | 27 | .order-details-product-img img { 28 | max-width: 100%; 29 | } 30 | 31 | .order-details-product-data { 32 | flex-basis: 50%; 33 | padding: 0 1rem; 34 | font-size: 1rem; 35 | justify-content: center; 36 | } 37 | 38 | .order-details-product-data > div:first-child { 39 | font-size: 1.2rem; 40 | margin-bottom: 10px; 41 | } 42 | 43 | .order-details-product-actions { 44 | flex-basis: 25%; 45 | } 46 | 47 | .order-details-product-remove { 48 | margin-top: 1rem; 49 | } 50 | 51 | .order-details-product-quantity > div:first-child { 52 | margin-bottom: 0.5rem; 53 | } 54 | 55 | .price-details { 56 | flex-basis: 30%; 57 | margin-left: 2rem; 58 | gap: 2rem; 59 | align-self: flex-start; 60 | position: sticky; 61 | top: 10px; 62 | } 63 | 64 | .price-details-box { 65 | box-shadow: 0px 1px 5px var(--mid-gray); 66 | border-radius: 10px; 67 | padding: 20px; 68 | } 69 | 70 | .continue-shopping-btn { 71 | color: white; 72 | } -------------------------------------------------------------------------------- /16.Project10/css/common.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --blue-gray: #ecf0f1; 3 | --pale-blue: #2c3e50; 4 | --mid-gray: #999; 5 | --jean-blue: #3b5875; 6 | --light-blue: #95afc0; 7 | --sky-blue: #dff9fb; 8 | --dark-sky-blue: #c7ecee; 9 | --light-gray: #ccc; 10 | } 11 | 12 | html { 13 | box-sizing: border-box; 14 | } 15 | 16 | *, *::before, *::after { 17 | box-sizing: inherit; 18 | } 19 | 20 | #header { 21 | background-color: var(--blue-gray); 22 | padding: 1.25rem 0; 23 | } 24 | 25 | #header .header-wrapper .logo { 26 | font-size: 1.35rem; 27 | line-height: 1.5; 28 | } 29 | 30 | #header .header-wrapper .logo a { 31 | color: black; 32 | letter-spacing: 5px; 33 | } 34 | 35 | #header .header-wrapper .user-actions { 36 | font-size: 1rem; 37 | line-height: 1.5; 38 | gap: 1rem; 39 | } 40 | 41 | #header .header-wrapper .user-actions .logout-btn { 42 | cursor: pointer; 43 | margin-left: 1.5rem; 44 | } 45 | 46 | #header .header-wrapper .user-actions a { 47 | color: black; 48 | text-decoration: none; 49 | } 50 | 51 | #header .header-wrapper .user-actions a:hover { 52 | text-decoration-line: underline; 53 | } 54 | 55 | .clear-filter { 56 | margin-top: 1rem; 57 | } 58 | 59 | .price-filter .price-filter-select > div { 60 | margin-bottom: 0.5rem; 61 | } 62 | 63 | .loader-backdrop { 64 | position: absolute; 65 | background-color: rgba(0,0,0,0.5); 66 | height: 100%; 67 | width: 100%; 68 | display: flex; 69 | justify-content: center; 70 | align-items: center; 71 | } 72 | 73 | .loader2 { 74 | display: flex; 75 | justify-content: center; 76 | align-items: center; 77 | height: 5rem; 78 | } 79 | 80 | .loader2 > div { 81 | border: 5px solid var(--jean-blue); 82 | width: 5rem; 83 | height: 5rem; 84 | border-top: 5px solid #f0eeeb; 85 | border-bottom: 5px solid #f0eeeb; 86 | border-radius: 50%; 87 | animation: spinner2 2s linear infinite; 88 | } 89 | 90 | @keyframes spinner2 { 91 | from { 92 | transform: rotate(0); 93 | } 94 | 95 | to { 96 | transform: rotate(360deg); 97 | } 98 | } -------------------------------------------------------------------------------- /16.Project10/css/home.css: -------------------------------------------------------------------------------- 1 | .home-title { 2 | font-size: 3.5rem; 3 | margin-top: 5rem; 4 | letter-spacing: 1rem; 5 | } 6 | 7 | .category-title { 8 | margin-top: 3rem; 9 | font-size: 1.5rem; 10 | } 11 | 12 | 13 | .category-list { 14 | margin-top: 3rem; 15 | gap: 1rem; 16 | } 17 | 18 | .category-item { 19 | border: 1px solid var(--pale-blue); 20 | box-shadow: 4px 4px 2px var(--mid-gray); 21 | width: 150px; 22 | background-color: var(--jean-blue); 23 | padding: 20px 30px; 24 | border-radius: 10px; 25 | text-align: center; 26 | min-height: 100px; 27 | min-width: 135px; 28 | } 29 | 30 | .category-item a { 31 | color: white; 32 | text-decoration: none; 33 | font-size: 1rem; 34 | 35 | } 36 | 37 | .category-item:hover { 38 | box-shadow: 0px 0px; 39 | transition: box-shadow 0.15s linear 0s; 40 | } 41 | 42 | -------------------------------------------------------------------------------- /16.Project10/css/login.css: -------------------------------------------------------------------------------- 1 | .home-title { 2 | font-size: 3.5rem; 3 | margin-top: 5rem; 4 | letter-spacing: 1rem; 5 | } 6 | 7 | 8 | .login-wrapper { 9 | width: 600px; 10 | margin: 50px auto; 11 | } 12 | 13 | .login-wrapper .signup-btn { 14 | cursor: pointer; 15 | color: black; 16 | padding: 1rem; 17 | } 18 | 19 | .login-wrapper .signup-btn:hover { 20 | text-decoration: underline; 21 | } 22 | 23 | .input-group { 24 | margin-bottom: 1.5rem; 25 | } 26 | 27 | .login-wrapper h4 { 28 | font-size: 2rem; 29 | letter-spacing: 4px; 30 | } -------------------------------------------------------------------------------- /16.Project10/css/productDetails.css: -------------------------------------------------------------------------------- 1 | .product-details-wrapper { 2 | padding-top: 3rem; 3 | } 4 | 5 | .product-img { 6 | flex-basis: 30%; 7 | } 8 | 9 | .product-img img { 10 | width: 100%; 11 | } 12 | 13 | .product-details-box { 14 | flex-basis: 60%; 15 | } 16 | 17 | .product-name { 18 | font-size: 3rem; 19 | } 20 | 21 | .product-price { 22 | margin-top: 1.5rem; 23 | font-size: 1.5rem; 24 | } 25 | 26 | .product-description { 27 | margin-top: 1.5rem; 28 | } 29 | 30 | .product-description-title { 31 | color: var(--mid-gray); 32 | margin-bottom: 1rem; 33 | } 34 | 35 | .product-description-data { 36 | font-size: 1rem; 37 | line-height: 1.75; 38 | text-align: justify; 39 | } 40 | 41 | .product-details-action { 42 | margin-top: 1.5rem; 43 | width: 250px; 44 | } -------------------------------------------------------------------------------- /16.Project10/css/productList.css: -------------------------------------------------------------------------------- 1 | #price-filter-label-min { 2 | flex-basis: 50%; 3 | } 4 | 5 | .product-list-title { 6 | font-size: 3rem; 7 | margin: 40px 0; 8 | font-weight: normal; 9 | } 10 | 11 | .product-list-sidebar { 12 | margin-right: 100px; 13 | flex-basis: 20%; 14 | } 15 | 16 | .product-list-sidebar a { 17 | padding: 0.5rem 1.5rem; 18 | font-size: 1.2rem; 19 | color: black; 20 | border-bottom: 1px solid var(--light-blue); 21 | background-color: var(--sky-blue); 22 | } 23 | 24 | .product-list-sidebar a:last-child { 25 | border-bottom: none; 26 | } 27 | 28 | #categoryList { 29 | margin-bottom: 1rem; 30 | } 31 | 32 | .product-list-sidebar a:hover { 33 | background-color: var(--dark-sky-blue); 34 | font-weight: bold; 35 | } 36 | 37 | .sidebar-title { 38 | margin-bottom: 0.5rem; 39 | } 40 | 41 | .sidebar-search { 42 | margin-bottom: 1rem; 43 | } 44 | 45 | .product-list-box { 46 | flex-basis: 80%; 47 | } 48 | 49 | .product-list-box .product-item { 50 | width: 30%; 51 | margin-right: 2%; 52 | margin-bottom: 30px; 53 | box-shadow: 0px 1px 5px var(--light-gray); 54 | padding: 0.5rem; 55 | } 56 | .product-img { 57 | height: 400px; 58 | } 59 | 60 | img { 61 | max-width: 100%; 62 | max-height: 100%; 63 | } 64 | 65 | .product-list-box .product-item .product-name { 66 | font-size: 1.5rem; 67 | color: black; 68 | padding: 0.75rem 0; 69 | } 70 | 71 | .product-list-box .product-item .product-price { 72 | color: var(--jean-blue); 73 | padding-bottom: 10px; 74 | } 75 | 76 | 77 | .product-list-box .product-item:nth-child(3n) { 78 | margin-right: 0; 79 | } 80 | 81 | .product-list-box .product-item:hover { 82 | box-shadow: 0px 4px 10px var(--light-gray); 83 | transition: box-shadow 0.15s linear 0s; 84 | } -------------------------------------------------------------------------------- /16.Project10/img/product.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/singhsanket143/Frontend-Basics/e380a36f4ee8f1174f2fdd3d07b19754c43876fb/16.Project10/img/product.jpg -------------------------------------------------------------------------------- /16.Project10/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Shop Cart 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 | 18 |
19 |
20 |
21 | 22 |
23 | 24 | 25 | 42 | 43 | 44 |
45 |
46 |

Welcome to Shop Cart

47 |
48 | 49 | 50 |
51 | All products 52 |
53 | 54 | 55 | 56 |
57 |
58 | Select a category to start Shopping 59 |
60 |
61 |
62 | 63 | 64 |
65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /16.Project10/js/cart.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", () => { 2 | 3 | function prepareWrapperDivForCartItems(product, productQuanityMapping) { 4 | const orderDetailsProduct = document.createElement("div"); 5 | orderDetailsProduct.classList.add("order-details-product", "d-flex", "flex-row"); 6 | 7 | const orderDetailsProductImg = document.createElement("div"); 8 | orderDetailsProductImg.classList.add("order-details-product-img", "d-flex"); 9 | const image = document.createElement("img"); 10 | image.src = product.image; 11 | orderDetailsProductImg.appendChild(image); 12 | 13 | const orderDetailsProductData = document.createElement("div"); 14 | orderDetailsProductData.classList.add("order-details-product-data", "d-flex", "flex-column"); 15 | const name = document.createElement("div"); 16 | const price = document.createElement("div"); 17 | name.textContent = product.title; 18 | price.textContent = product.price; 19 | orderDetailsProductData.appendChild(name); 20 | orderDetailsProductData.appendChild(price); 21 | 22 | 23 | const orderDetailsProductActions = document.createElement("div"); 24 | orderDetailsProductActions.classList.add("order-details-product-actions", "d-flex", "flex-column"); 25 | const orderDetailsProductQuantity = document.createElement("div"); 26 | orderDetailsProductQuantity.classList.add("order-details-product-quantity"); 27 | const quantityLabel = document.createElement("div"); 28 | quantityLabel.textContent = "Quantity"; 29 | quantityLabel.classList.add("fw-bold"); 30 | const formGroup = document.createElement("div"); 31 | formGroup.classList.add("form-group"); 32 | const select = document.createElement("select"); 33 | select.classList.add("form-select"); 34 | for(let i = 1; i <= 10; i++) { 35 | const option = document.createElement("option"); 36 | option.textContent = i; 37 | option.value = i; 38 | if(i == productQuanityMapping[product.id]) { 39 | option.selected = "true"; 40 | } 41 | select.appendChild(option); 42 | } 43 | formGroup.appendChild(select); 44 | orderDetailsProductQuantity.appendChild(quantityLabel); 45 | orderDetailsProductQuantity.appendChild(formGroup); 46 | orderDetailsProductActions.appendChild(orderDetailsProductQuantity); 47 | const remove = document.createElement("button"); 48 | remove.classList.add("order-details-product-remove", "btn", "btn-danger"); 49 | remove.textContent = "Remove"; 50 | orderDetailsProductActions.appendChild(remove); 51 | 52 | 53 | 54 | orderDetailsProduct.appendChild(orderDetailsProductImg); 55 | orderDetailsProduct.appendChild(orderDetailsProductData); 56 | orderDetailsProduct.appendChild(orderDetailsProductActions); 57 | 58 | const hr = document.createElement("hr"); 59 | document.getElementById("orderDetails").appendChild(orderDetailsProduct); 60 | document.getElementById("orderDetails").appendChild(hr); 61 | } 62 | 63 | async function populateCart() { 64 | const cart = await fetchCartById(2); 65 | const cartProducts = cart.products; 66 | console.log(cartProducts); 67 | const productQuantityMapping = {}; 68 | const cartProductDownloadPromise = cartProducts.map(product => { 69 | productQuantityMapping[product.productId] = product.quantity; 70 | return fetchProductById(product.productId) 71 | }); 72 | const products = await Promise.all(cartProductDownloadPromise); 73 | let totalPrice = 0; 74 | products.forEach(product => { 75 | prepareWrapperDivForCartItems(product, productQuantityMapping); 76 | totalPrice += product.price * productQuantityMapping[product.id]; 77 | }); 78 | 79 | document.getElementById("total-price").textContent = totalPrice; 80 | document.getElementById("net-price").textContent = totalPrice - 10; 81 | 82 | removeLoader(); 83 | } 84 | populateCart(); 85 | }); -------------------------------------------------------------------------------- /16.Project10/js/common.js: -------------------------------------------------------------------------------- 1 | function getQueryParams() { 2 | const queryParams = new URLSearchParams(window.location.search); 3 | const queryParamsObject = Object.fromEntries(queryParams.entries()); 4 | return queryParamsObject; 5 | } 6 | 7 | function removeLoader() { 8 | const loaderBackdrop = document.getElementById("loader-backdrop"); 9 | loaderBackdrop.style.display = 'none'; 10 | } 11 | 12 | async function fetchProductById(id) { 13 | const product = await axios.get(`https://fakestoreapi.com/products/${id}`); 14 | return product.data; 15 | } 16 | 17 | async function fetchCartById(id) { 18 | const cart = await axios.get(`https://fakestoreapi.com/carts/${id}`); 19 | return cart.data; 20 | } -------------------------------------------------------------------------------- /16.Project10/js/index.js: -------------------------------------------------------------------------------- 1 | console.log("Index js loaded"); 2 | 3 | async function fetchCategories() { 4 | // this function is marked async so this will also return a promise 5 | const response = await fetch("https://fakestoreapi.com/products/categories"); 6 | const data = await response.json(); 7 | return data; 8 | } 9 | 10 | async function populateCtaegories() { 11 | const categories = await fetchCategories(); 12 | removeLoader(); 13 | const categoryList = document.getElementById("categoryList"); 14 | categories.forEach(category => { 15 | const categoryHolder = document.createElement("div"); 16 | const categoryLink = document.createElement("a"); 17 | categoryLink.href = `productList.html?category=${category}`; 18 | categoryLink.textContent = category; // setting the category name as the text of the anchor tag 19 | categoryHolder.classList.add("category-item", "d-flex", "align-items-center", "justify-content-center"); 20 | categoryHolder.appendChild(categoryLink); 21 | categoryList.appendChild(categoryHolder); 22 | }); 23 | } 24 | 25 | populateCtaegories(); -------------------------------------------------------------------------------- /16.Project10/js/productDetails.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", () => { 2 | async function populateproduct() { 3 | const queryParams = getQueryParams(); 4 | if(queryParams['id']) { 5 | const productId = queryParams['id']; 6 | const product = await fetchProductById(productId); 7 | 8 | const productName = document.getElementById('product-name'); 9 | const productPrice = document.getElementById('product-price'); 10 | const productDesc = document.getElementById('product-description-data'); 11 | const productImg = document.getElementById('product-img'); 12 | 13 | productName.textContent = product.title; 14 | productDesc.textContent = product.description; 15 | productImg.src = product.image; 16 | productPrice.textContent = product.price; 17 | removeLoader(); 18 | 19 | } 20 | } 21 | 22 | populateproduct(); 23 | }); -------------------------------------------------------------------------------- /16.Project10/js/productList.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", async () => { 2 | 3 | async function fetchProducts() { 4 | const response = await axios.get("https://fakestoreapi.com/products"); 5 | console.log(response.data); 6 | return response.data; 7 | } 8 | 9 | async function fetchProductsByCategory(category) { 10 | const response = await axios.get(`https://fakestoreapi.com/products/category/${category}`); 11 | console.log(response.data); 12 | return response.data; 13 | } 14 | 15 | async function fetchCategories() { 16 | // this function is marked async so this will also return a promise 17 | const response = await fetch("https://fakestoreapi.com/products/categories"); 18 | const data = await response.json(); 19 | return data; 20 | } 21 | 22 | const downloadedProducts = await fetchProducts(); 23 | 24 | async function populateProducts(flag, customProducts) { 25 | let products = customProducts; 26 | 27 | const queryParamsObject = getQueryParams(); 28 | if(flag == false) { 29 | if(queryParamsObject['category']) { 30 | products = await fetchProductsByCategory(queryParamsObject['category']); 31 | } else { 32 | products = await fetchProducts(); 33 | } 34 | } 35 | 36 | const productList = document.getElementById("productList"); 37 | products.forEach(product => { 38 | const productItem = document.createElement("a"); 39 | productItem.target = "_blank"; 40 | productItem.classList.add("product-item", "text-decoration-none", "d-inline-block") 41 | productItem.href = `productDetails.html?id=${product.id}`; 42 | 43 | const productImage = document.createElement("div"); 44 | const productName = document.createElement("div"); 45 | const productPrice = document.createElement("div"); 46 | 47 | productImage.classList.add("product-img"); 48 | productName.classList.add("product-name", "text-center"); 49 | productPrice.classList.add("product-price", "text-center"); 50 | 51 | productName.textContent = product.title.substring(0, 12) + "..."; 52 | productPrice.textContent = `₹ ${product.price}`; 53 | 54 | const imageInsideProductImage = document.createElement("img"); 55 | imageInsideProductImage.src = product.image; 56 | 57 | // append divs 58 | productImage.appendChild(imageInsideProductImage); 59 | productItem.appendChild(productImage); 60 | productItem.appendChild(productName); 61 | productItem.appendChild(productPrice); 62 | 63 | productList.appendChild(productItem); 64 | 65 | }); 66 | } 67 | 68 | async function populateCategories() { 69 | const categories = await fetchCategories(); 70 | const categoryList = document.getElementById("categoryList"); 71 | categories.forEach(category => { 72 | const categoryLink = document.createElement("a"); 73 | categoryLink.classList.add("d-flex", "text-decoration-none"); 74 | categoryLink.textContent = category; 75 | categoryLink.href = `productList.html?category=${category}`; 76 | 77 | categoryList.appendChild(categoryLink); 78 | }) 79 | } 80 | 81 | async function downloadContentAndPopulate () { 82 | Promise.all([populateProducts(false), populateCategories()]) 83 | .then(() => { 84 | removeLoader(); 85 | }); 86 | } 87 | downloadContentAndPopulate(); 88 | 89 | 90 | const filterSearch = document.getElementById("search"); 91 | filterSearch.addEventListener("click", async () => { 92 | const productList = document.getElementById("productList"); 93 | const minPrice = Number(document.getElementById("minPrice").value); 94 | const maxPrice = Number(document.getElementById("maxPrice").value); 95 | const products = downloadedProducts; 96 | filteredProducts = products.filter(product => product.price >= minPrice && product.price <= maxPrice); 97 | productList.innerHTML = ""; 98 | populateProducts(true, filteredProducts); 99 | }); 100 | 101 | const resetFilter = document.getElementById("clear"); 102 | resetFilter.addEventListener("click", () => { 103 | window.location.reload(); 104 | }) 105 | 106 | }); -------------------------------------------------------------------------------- /16.Project10/login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Login / Signup 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 28 | 29 | 30 |
31 |
32 |

33 | Welcome to Shop Cart 34 |

35 |
36 | 50 |
51 | 52 |
53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /16.Project10/notes.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/singhsanket143/Frontend-Basics/e380a36f4ee8f1174f2fdd3d07b19754c43876fb/16.Project10/notes.pdf -------------------------------------------------------------------------------- /16.Project10/productDetails.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Product Details 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 | 18 |
19 |
20 |
21 | 22 |
23 | 24 | 25 | 42 | 43 | 44 |
45 |
46 |
47 |
48 | product image 49 |
50 | 51 |
52 |
53 | 54 |
55 |
56 |
57 |
Description
58 |
59 | 60 |
61 |
62 |
63 | 64 |
Add to cart
65 | 66 | Go to cart 67 | 68 |
69 |
70 |
71 |
72 | 73 | 74 |
75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /16.Project10/productList.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Product List 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 | 17 |
18 |
19 |
20 | 21 |
22 | 23 | 24 | 41 | 42 |
43 |
44 | 45 |

All Products

46 | 47 |
48 | 49 |
50 | 51 |
Search Products
52 |
53 | 54 |
55 | 56 |
Categories
57 |
58 | 59 |
60 | 61 | 62 |
Filter by price
63 |
64 |
65 |
66 | 74 |
75 |
76 | 85 |
86 |
87 |
88 |
Min Price
89 |
Max Price
90 |
91 |
92 | 93 | 94 |
95 |
96 | 97 | 98 | 99 |
100 | 101 |
102 |
Some product
103 |
₹ 10000
104 | 105 | 106 | 107 | 108 | 109 |
110 |
111 | 112 | 113 | 114 |
115 |
116 | 117 |
118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | -------------------------------------------------------------------------------- /17.Project11/index.css: -------------------------------------------------------------------------------- 1 | #outer { 2 | width: 600px; 3 | height: 600px; 4 | padding: 5px; 5 | border: 1px solid black; 6 | display: flex; 7 | flex-wrap: wrap; 8 | align-items: center; 9 | justify-content: space-between; 10 | } 11 | 12 | .inner { 13 | border: 1px solid red; 14 | flex-basis: 33%; 15 | width: 180px; 16 | height: 180px; 17 | display: flex; 18 | align-items: center; 19 | justify-content: center; 20 | font-size: 80px; 21 | } -------------------------------------------------------------------------------- /17.Project11/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |

Tic Tac Toe

11 |
12 |
13 | 14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | 24 |
25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /17.Project11/index.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", () => { 2 | let outer = document.getElementById("outer"); 3 | let chance = false; // when chance is false we put O , when chance is true we put X 4 | let arr = Array(9).fill(undefined); 5 | outer.addEventListener("click", (e) => { 6 | let cell = e.target; 7 | let cellNumber = cell.getAttribute("data-cell"); 8 | if(cell.getAttribute("data-clicked")) { 9 | return; 10 | } 11 | cell.setAttribute("data-clicked", "true"); 12 | if(chance == true) { 13 | cell.textContent = "X"; 14 | arr[cellNumber] = "X"; 15 | winningCombo("X"); 16 | } else { 17 | cell.textContent = "O" 18 | arr[cellNumber] = "O"; 19 | winningCombo("O"); 20 | } 21 | console.log(arr); 22 | chance = !chance; // toggles chance 23 | }) 24 | 25 | function winningCombo(char) { 26 | let result = document.getElementById("result"); 27 | if(arr[0] == char && arr[1] == char && arr[2] == char) { 28 | // the f0th row is having the char; 29 | result.textContent = `${char} wins`; 30 | } 31 | else if(arr[3] == char && arr[4] == char && arr[5] == char) { 32 | // the 1st row is having the char; 33 | result.textContent = `${char} wins`; 34 | } 35 | else if(arr[6] == char && arr[7] == char && arr[8] == char) { 36 | // the 2nd row is having the char; 37 | result.textContent = `${char} wins`; 38 | } 39 | else if(arr[0] == char && arr[3] == char && arr[6] == char) { 40 | // the 0th col is having the char; 41 | result.textContent = `${char} wins`; 42 | } 43 | else if(arr[1] == char && arr[4] == char && arr[7] == char) { 44 | // the 1st col is having the char; 45 | result.textContent = `${char} wins`; 46 | } 47 | else if(arr[2] == char && arr[5] == char && arr[0] == char) { 48 | // the 2nd col is having the char; 49 | result.textContent = `${char} wins`; 50 | } 51 | else if(arr[0] == char && arr[4] == char && arr[8] == char) { 52 | // the 1st col is having the char; 53 | result.textContent = `${char} wins`; 54 | } 55 | else if(arr[2] == char && arr[4] == char && arr[6] == char) { 56 | // the 2nd col is having the char; 57 | result.textContent = `${char} wins`; 58 | } 59 | } 60 | }) -------------------------------------------------------------------------------- /17.Project11/notes.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/singhsanket143/Frontend-Basics/e380a36f4ee8f1174f2fdd3d07b19754c43876fb/17.Project11/notes.pdf -------------------------------------------------------------------------------- /2.Project1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

Student Registration form.....

11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 67 | 68 | 69 | 70 | 117 | 118 | 119 | 120 | 121 | 122 |

(max 40 characters a-z and A-Z)

(max 40 characters a-z and A-Z)

(10 digit number)

40 | Male: 41 | Female: 42 | Transgender: 43 |

(6 digit number)

Hobbies: 61 | 62 | 63 | 64 | 65 | 66 |
Qualification 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 |
Please add you data..
S.NoExaminationBoard/UniversityPercentageYear Of Passing
1.Class X
2.Class XII
3.Graduation
4.Masters
116 |
123 |
124 | 125 | -------------------------------------------------------------------------------- /3.CSS-Intro/a.Css-basics/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Basic CSS 8 | 9 | 10 | 11 | 12 |
13 | 14 |

Sanket Singh

15 |
16 | 17 | Software Engineer| 18 | Educator | 19 | Tech enthusiast 20 | 21 |
22 |

I love to build and break stuff and educate people about tech.

23 |
24 | 25 |

26 | Linekd In The profession social media 27 |

28 | 29 | 43 |

About

44 |

45 | Self motivated and hardworking individual constantly involved in self 46 | improvement and always ready to take up challenging tasks in order to test 47 | my skills and improve them further. Keen observer who believes in learning 48 | by sharing knowledge. Experienced Full Stack Web Developer and Teaching 49 | Professional with a demonstrated history of working in software development 50 | and in the higher education industry. Skilled in Java, Ruby on rails, Node.JS, 51 | Data Structures, Front-end Development in Angular 5, and Python. Strong 52 | professional with a Bachelor of Technology - BTech focused in Computer Science 53 | from Guru Gobind Singh Indraprastha University 54 |

55 | 56 |
57 | 58 | -------------------------------------------------------------------------------- /3.CSS-Intro/a.Css-basics/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | /* This is a universal selector, whatever you write here is applied to everything */ 3 | padding: 0; 4 | margin: 0; 5 | } 6 | 7 | body { 8 | background-color: #f3f2ef; 9 | } 10 | 11 | /*header { 12 | background-color: white; 13 | }*/ 14 | 15 | /* .mid-text { 16 | font-weight: bolder; 17 | font-size: medium; 18 | } */ 19 | 20 | #head-text { 21 | text-decoration-line: underline; 22 | text-decoration-style: solid; /* https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style */ 23 | } 24 | 25 | 26 | /* div span { */ 27 | /* color:cadetblue; */ 28 | /* } */ 29 | 30 | /* div > .extra { 31 | text-decoration-line: underline; 32 | } */ 33 | 34 | /*div + h4 { https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors */ 35 | /* color:chocolate; */ 36 | /* } */ 37 | 38 | div :first-child { 39 | color: blue; 40 | } 41 | 42 | div, p { 43 | padding: 5px; 44 | } -------------------------------------------------------------------------------- /3.CSS-Intro/b.boxmodel/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |
13 | This is a new div 14 |
15 | 16 |
17 | This is another div 18 |
19 | this is a child div 20 |
21 |
22 | 23 | -------------------------------------------------------------------------------- /3.CSS-Intro/b.boxmodel/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | /* Unless changed, every element has box-sizing as border-box */ 3 | box-sizing: border-box; /* https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ 4 | } 5 | *, *:before, *:after { 6 | /* We allow the child to follow the parent box sizing */ 7 | box-sizing: inherit; /* https://css-tricks.com/almanac/properties/b/box-sizing/ */ 8 | } 9 | #demo { 10 | width: 200px; 11 | border: solid red 5px; 12 | /* border-style: dotted; 13 | border-width: 5px; 14 | border-color: red; */ 15 | padding: 10px; 16 | margin-bottom: 10px; 17 | } 18 | 19 | #demo2 { 20 | width: 200px; 21 | border: solid red 5px; 22 | /* border-style: dotted; 23 | border-width: 5px; 24 | border-color: red; */ 25 | /* padding: 10px; */ 26 | /* box-sizing: content-box; */ 27 | } 28 | 29 | #demo3 { 30 | border: solid blue 15px; 31 | /* width: 150px; */ 32 | width: 150px; 33 | } -------------------------------------------------------------------------------- /3.CSS-Intro/c.flexbox/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 20 | 21 |
22 | 23 |
24 | Child 1 25 |
26 |
27 | Child 2, with some more content bigger than others 28 |
29 |
30 | Child 3 31 |
32 |
33 | Child 4 34 |
35 |
36 | Child 5, with some more content bigger than others 37 |
38 |
39 | 40 | 41 | -------------------------------------------------------------------------------- /3.CSS-Intro/c.flexbox/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | } 4 | 5 | *, *:before, *:after { 6 | box-sizing: inherit; 7 | } 8 | 9 | #parent { 10 | /* flex container */ 11 | border: solid red 10px; 12 | display: flex; 13 | height: 500px; 14 | /* flex-direction: row; 15 | flex-wrap: nowrap; */ 16 | flex-flow: row wrap; 17 | justify-content: start; /* to arrange elements on main axis */ 18 | align-items: center; /* to arrange elements on cross axis */ 19 | align-content: start;/* to arrange elements on cross axis */ 20 | 21 | } 22 | 23 | #parent div { 24 | /* flex items */ 25 | border: solid blue 2px; 26 | padding: 20px; 27 | background-color: bisque; 28 | min-width: 100px; 29 | /* max-width: 200px; */ 30 | max-height: 100px; 31 | 32 | } 33 | 34 | #child1 { 35 | flex-basis: 100%; 36 | } 37 | 38 | /* #child2 { 39 | flex-grow: 1; 40 | } */ 41 | 42 | nav { 43 | display: flex; 44 | justify-content: space-between; 45 | padding: 20px; 46 | } 47 | 48 | nav button { 49 | margin-left: 10px; 50 | } 51 | 52 | .signin { 53 | background-color: rgb(229,9,20); 54 | border: none; 55 | border-radius: 4px; 56 | color: white; 57 | padding-left: 10px; 58 | padding-right: 10px; 59 | padding-top: 6px; 60 | padding-bottom: 6px; 61 | font-size: 10px; 62 | font-weight: bolder; 63 | } 64 | 65 | .signin:hover { 66 | background-color: rgb(193,17,25); 67 | } -------------------------------------------------------------------------------- /4.Project2/img/IMG_6200.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/singhsanket143/Frontend-Basics/e380a36f4ee8f1174f2fdd3d07b19754c43876fb/4.Project2/img/IMG_6200.jpg -------------------------------------------------------------------------------- /4.Project2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Sanket Singh 8 | 9 | 10 | 11 | 28 |
29 |
30 |

Hello Humans !!!

31 |

My Name is Sanket Singh

32 |
33 | Software Engineer | 34 | Educator | 35 | Tech Enthusiast 36 |
37 |

38 | I love to build and break stuff and educate people about tech. 39 |

40 |

41 | I am a Software Engineer @ Google and love to spread word 42 | about tech and teach software engineering as well as foundations of CS. 43 |

44 |
45 | 46 |
47 |
48 |

49 | Experience 50 |

51 |
52 |
53 |
54 |
55 | 56 |
57 | 71 |
72 | 73 |
74 | 75 |
76 |
77 |

Hire me

78 |

I am always eager to learn and get my hands dirty on some exciting projects.

79 |
80 |
81 | 82 | 83 |
84 | 85 | 89 | 90 | 91 | -------------------------------------------------------------------------------- /4.Project2/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --teal: #031634; 3 | --cobalt: #033649; 4 | --turquoise: #066464; 5 | --beige: #CEB280; 6 | --gold: #EADDCC; 7 | } 8 | html { 9 | box-sizing: border-box; 10 | } 11 | 12 | *, *::after, *::before { 13 | box-sizing: inherit; 14 | } 15 | 16 | body { 17 | margin: 0; 18 | padding: 0; 19 | color: white; 20 | background-color: var(--teal); 21 | } 22 | 23 | .section-turquoise { 24 | background-color: var(--turquoise); 25 | } 26 | 27 | h1, h2, h3, h4, h5, h6 { 28 | margin: 0; 29 | } 30 | 31 | #intro { 32 | padding: 4rem 1rem 5rem 1rem; /* TRBL */ 33 | max-width: 1200px; 34 | margin: 0 auto; 35 | } 36 | 37 | #intro p{ 38 | font-size: 1.5rem; 39 | line-height: 1.5; 40 | } 41 | 42 | .name span { 43 | display: block; 44 | color: var(--gold); 45 | font-size: 4rem; 46 | } 47 | 48 | .profile { 49 | padding-bottom: 1rem; 50 | } 51 | 52 | #intro h2 { 53 | font-size: 3rem; 54 | font-weight: normal; 55 | } 56 | 57 | #experience ul { 58 | margin: 0; 59 | padding: 0; 60 | font-size: 1.2rem; 61 | 62 | } 63 | 64 | #experience li { 65 | list-style-type: none; 66 | padding: 1rem; 67 | } 68 | 69 | #experience a { 70 | color: white; 71 | } 72 | 73 | #hire { 74 | background-color: var(--turquoise); 75 | width: 400px; 76 | text-align: center; 77 | margin: 0 auto; 78 | padding: 3rem 0; 79 | } 80 | 81 | #hire p:last-child { 82 | margin-top: 3rem;; 83 | } 84 | 85 | nav { 86 | font-size: 80%; 87 | padding: 1rem; 88 | background-color: var(--cobalt); 89 | } 90 | 91 | nav ul { 92 | list-style-type: none; 93 | padding: 0; 94 | margin: 0; 95 | display: flex; 96 | flex-flow: row wrap; 97 | justify-content: center; 98 | align-items: center; 99 | gap: 2rem; 100 | margin-right: 2rem; 101 | } 102 | 103 | nav a { 104 | color: white; 105 | text-decoration: none; 106 | font-size: 1.2rem; 107 | } 108 | 109 | nav a:hover { 110 | color: var(--beige); 111 | text-decoration: underline; 112 | font-size: 1.2rem; 113 | } 114 | 115 | nav li:first-child { 116 | /* flex-grow: 1; we will write a media query to bring this back*/ 117 | flex-basis: 100%;; 118 | font-size: 1.5rem; 119 | margin-left: 3rem; 120 | } 121 | 122 | .button { 123 | background-color: orangered; 124 | padding: 0.5rem; 125 | border-radius: 5px; 126 | } 127 | 128 | .button:hover { 129 | color: white; 130 | background: linear-gradient(145deg, rgba(247,106,82,1) 26%, rgba(222,120,66,1) 36%, rgba(240,86,71,1) 47%); 131 | } 132 | 133 | .gradient-section { 134 | height: 2px; 135 | background: linear-gradient(90deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%); 136 | } 137 | 138 | footer { 139 | text-align: center; 140 | padding: 2rem 0; 141 | } 142 | 143 | .my-picture { 144 | max-height: 500px; 145 | max-width: 350px; 146 | } 147 | 148 | .my-picture img { 149 | width: 100%; 150 | border-radius: 5px; 151 | margin: 1rem 0; 152 | } 153 | 154 | #experience { 155 | display: flex; 156 | justify-content: space-around; 157 | align-items: center; 158 | } 159 | 160 | #experience ul { 161 | max-width: 400px; 162 | border: solid white 2px; 163 | border-radius: 5px; 164 | background-color: var(--turquoise); 165 | padding: 1rem; 166 | } 167 | 168 | #experience-header { 169 | font-size: 3rem; 170 | margin: 0 auto; 171 | width: 200px; 172 | padding: 1rem; 173 | } 174 | 175 | @media (min-width: 600px) { 176 | nav li:first-child { 177 | flex-grow: 1; 178 | flex-basis: auto; 179 | } 180 | } -------------------------------------------------------------------------------- /5.Project3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Progress Bar 8 | 9 | 10 | 11 |
12 |
13 | 100% 14 |
15 |
16 | 17 | -------------------------------------------------------------------------------- /5.Project3/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | } 4 | 5 | *, *::after, *::before { 6 | box-sizing: inherit; 7 | } 8 | 9 | #progress { 10 | width: 400px; 11 | border: solid black 2px; 12 | border-radius: 5px; 13 | display: flex; 14 | } 15 | 16 | #progress-bar { 17 | background-color: aquamarine; 18 | padding: 5px; 19 | flex-basis: 100%; 20 | } 21 | 22 | .percentage { 23 | width: 10px; 24 | margin: 0 auto; 25 | display: block; 26 | } -------------------------------------------------------------------------------- /6.CSS-animations/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Animations Intro 8 | 9 | 10 | 11 | 16 | 17 |
18 |
19 |
20 |
21 |
22 | 23 | -------------------------------------------------------------------------------- /6.CSS-animations/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | } 4 | 5 | *, *::after, *::before { 6 | box-sizing: inherit; 7 | } 8 | 9 | .row { 10 | display: flex; 11 | justify-content: space-between; 12 | align-items: center; 13 | } 14 | 15 | .static { 16 | width: 100px; 17 | height: 100px; 18 | background-color: red; 19 | border-radius: 50px; 20 | } 21 | 22 | .moving { 23 | width: 50px; 24 | height: 50px; 25 | border: 5px solid red; 26 | /* border-top: none; */ 27 | background-color: blue; 28 | border-radius: 25px; 29 | animation-name: rotator; 30 | animation-iteration-count: infinite; 31 | animation-duration: 5s; 32 | animation-timing-function: ease-out; 33 | } 34 | 35 | @keyframes rotator { 36 | 0% { 37 | transform: translateX(-500px); 38 | /* transform: rotate(0); 39 | background-color: blue; */ 40 | } 41 | 50% { 42 | /* background-color: green; */ 43 | transform: translateX(500px); 44 | } 45 | 100% { 46 | transform: translateX(-500px); 47 | /* transform: rotate(180deg); 48 | background-color: red; */ 49 | } 50 | } 51 | 52 | .moving:hover { 53 | transform: rotate(180deg); 54 | background-color: red; 55 | /* margin-left: 2000px; */ 56 | /* 57 | transition-delay: 0; start making the state change after 1s 58 | transition-duration: 5s; take 5s after the start to move to the final state 59 | transition-property: all; 60 | transition-timing-function: ease-out; 61 | */ 62 | /* transition: all 5s 1s ease-out; */ 63 | /* animation-name: rotator; 64 | animation-iteration-count: infinite; 65 | animation-duration: 5s; 66 | animation-timing-function: ease-out; */ 67 | } 68 | 69 | -------------------------------------------------------------------------------- /7.Project4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Loaders 8 | 9 | 10 | 11 | 12 |
13 |
14 | 15 |
16 |
17 | 18 |
19 | 20 | 21 |
22 |
23 | 24 |
25 |
26 | 27 |
28 | 29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 | 38 |
39 |
40 | 41 |
42 | 43 |
44 |
45 | 46 |
47 | 48 |
49 | 50 |
51 |
52 |
53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /7.Project4/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | } 4 | 5 | *, *::after, *::before { 6 | box-sizing: inherit; 7 | } 8 | 9 | .spacer { 10 | height: 128px; 11 | } 12 | 13 | .loader6 { 14 | display: flex; 15 | justify-content: start; 16 | align-items: center; 17 | height: 5rem; 18 | 19 | } 20 | 21 | .loader6 > div { 22 | width: 100%; 23 | height: 5px; 24 | background-color: #0057e7; 25 | animation: mover 0.9s linear 0s infinite; 26 | animation-direction: alternate; 27 | } 28 | 29 | 30 | @keyframes mover { 31 | 0% { 32 | width: 0%; 33 | /* transform: translateX(-1000px); */ 34 | } 35 | 36 | 50% { 37 | margin-left: 0%; 38 | width: 100%; 39 | } 40 | 41 | 100% { 42 | width: 0%; 43 | margin-left: 100%; 44 | /* transform: translateX(1000px); */ 45 | } 46 | } 47 | 48 | .loader1 { 49 | display: flex; 50 | justify-content: center; 51 | align-items: center; 52 | height: 5rem; 53 | 54 | } 55 | 56 | .loader1 > div { 57 | border: 5px solid red; 58 | width: 4rem; 59 | height: 4rem; 60 | border-top: 5px solid #f0eeeb; 61 | border-radius: 50%; 62 | animation: spinner1 2s linear infinite; 63 | animation-direction: alternate; 64 | } 65 | 66 | @keyframes spinner1 { 67 | from { 68 | transform: rotate(0); 69 | } 70 | 71 | to { 72 | transform: rotate(360deg); 73 | } 74 | } 75 | 76 | .loader2 { 77 | display: flex; 78 | justify-content: center; 79 | align-items: center; 80 | height: 5rem; 81 | } 82 | 83 | .loader2 > div { 84 | border: 5px solid red; 85 | width: 4rem; 86 | height: 4rem; 87 | border-top: 5px solid #f0eeeb; 88 | border-bottom: 5px solid #f0eeeb; 89 | border-radius: 50%; 90 | animation: spinner2 2s linear infinite; 91 | } 92 | 93 | @keyframes spinner2 { 94 | from { 95 | transform: rotate(0); 96 | } 97 | 98 | to { 99 | transform: rotate(360deg); 100 | } 101 | } 102 | 103 | .loader3 { 104 | display: flex; 105 | justify-content: center; 106 | align-items: center; 107 | gap: 0.5rem; 108 | height: 5rem; 109 | } 110 | 111 | .loader3 div { 112 | background-color: red; 113 | height: 100px; 114 | width: 30px; 115 | } 116 | .loader3 .first { 117 | animation: expander 0.8s linear infinite; 118 | animation-delay: 0.4s; 119 | } 120 | .loader3 .second { 121 | animation: expander 0.8s linear infinite; 122 | animation-delay: 0.6s; 123 | } 124 | .loader3 .third { 125 | animation: expander 0.8s linear infinite; 126 | animation-delay: 0; 127 | } 128 | 129 | @keyframes expander { 130 | 0% { 131 | height: 100px; 132 | } 133 | 134 | 50% { 135 | height: 150px; 136 | } 137 | 138 | 100% { 139 | height: 100px; 140 | } 141 | } 142 | 143 | 144 | .loader4 { 145 | display: flex; 146 | justify-content: center; 147 | align-items: center; 148 | height: 5rem; 149 | } 150 | 151 | .loader4 > div { 152 | width: 2rem; 153 | height: 2rem; 154 | border: 5px solid grey; 155 | border-radius: 50%; 156 | animation: drop 2s linear infinite; 157 | } 158 | 159 | @keyframes drop { 160 | 0% { 161 | width: 2rem; 162 | height: 2rem; 163 | border-color: grey; 164 | opacity: 0; 165 | } 166 | 167 | 4.5% { 168 | width: 2rem; 169 | height: 2rem; 170 | border-color: grey; 171 | opacity: 0; 172 | } 173 | 5% { 174 | width: 2rem; 175 | height: 2rem; 176 | border-color: grey; 177 | opacity: 1; 178 | } 179 | 180 | 35% { 181 | opacity: 0; 182 | } 183 | 184 | 50% { 185 | width: 3rem; 186 | height: 3rem; 187 | border-color: #f7f6f5; 188 | opacity: 1; 189 | } 190 | 191 | 53% { 192 | width: 3rem; 193 | height: 3rem; 194 | border-color: #f7f6f5; 195 | opacity: 1; 196 | } 197 | 198 | 54% { 199 | width: 3rem; 200 | height: 3rem; 201 | border-color: #f7f6f5; 202 | opacity: 0; 203 | } 204 | 205 | 75% { 206 | width: 3.8rem; 207 | height: 3.8rem; 208 | border-color: #fcfbfa; 209 | opacity: 1; 210 | } 211 | 79% { 212 | width: 3.8rem; 213 | height: 3.8rem; 214 | border-color: #fcfbfa; 215 | opacity: 1; 216 | } 217 | 218 | 80% { 219 | width: 3.8rem; 220 | height: 3.8rem; 221 | border-color: #fcfbfa; 222 | opacity: 0; 223 | } 224 | 225 | 100% { 226 | width: 4rem; 227 | height: 4rem; 228 | border-color: #faf5f5; 229 | opacity: 1; 230 | } 231 | } 232 | 233 | .loader5 { 234 | background-color: grey; 235 | display: flex; 236 | justify-content: center; 237 | height: 5rem; 238 | } 239 | 240 | .lds-spinner { 241 | color: official; 242 | display: inline-block; 243 | position: relative; 244 | width: 80px; 245 | height: 80px; 246 | } 247 | .lds-spinner div { 248 | transform-origin: 40px 40px; 249 | animation: lds-spinner 1.2s linear infinite; 250 | } 251 | .lds-spinner div:after { 252 | content: " "; 253 | display: block; 254 | position: absolute; 255 | top: 3px; 256 | left: 37px; 257 | width: 6px; 258 | height: 18px; 259 | border-radius: 20%; 260 | background: #fff; 261 | } 262 | .lds-spinner div:nth-child(1) { 263 | transform: rotate(0deg); 264 | animation-delay: -1.1s; 265 | } 266 | .lds-spinner div:nth-child(2) { 267 | transform: rotate(30deg); 268 | animation-delay: -1s; 269 | } 270 | .lds-spinner div:nth-child(3) { 271 | transform: rotate(60deg); 272 | animation-delay: -0.9s; 273 | } 274 | .lds-spinner div:nth-child(4) { 275 | transform: rotate(90deg); 276 | animation-delay: -0.8s; 277 | } 278 | .lds-spinner div:nth-child(5) { 279 | transform: rotate(120deg); 280 | animation-delay: -0.7s; 281 | } 282 | .lds-spinner div:nth-child(6) { 283 | transform: rotate(150deg); 284 | animation-delay: -0.6s; 285 | } 286 | .lds-spinner div:nth-child(7) { 287 | transform: rotate(180deg); 288 | animation-delay: -0.5s; 289 | } 290 | .lds-spinner div:nth-child(8) { 291 | transform: rotate(210deg); 292 | animation-delay: -0.4s; 293 | } 294 | .lds-spinner div:nth-child(9) { 295 | transform: rotate(240deg); 296 | animation-delay: -0.3s; 297 | } 298 | .lds-spinner div:nth-child(10) { 299 | transform: rotate(270deg); 300 | animation-delay: -0.2s; 301 | } 302 | .lds-spinner div:nth-child(11) { 303 | transform: rotate(300deg); 304 | animation-delay: -0.1s; 305 | } 306 | .lds-spinner div:nth-child(12) { 307 | transform: rotate(330deg); 308 | animation-delay: 0s; 309 | } 310 | @keyframes lds-spinner { 311 | 0% { 312 | opacity: 1; 313 | } 314 | 100% { 315 | opacity: 0; 316 | } 317 | } 318 | -------------------------------------------------------------------------------- /8.Bootstrap-Demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |
13 | 14 |

Welcome to bootstrap

15 | 16 | 17 | 20 |
21 | 24 | 29 |
30 |
31 | 32 |
33 |
34 |
35 | 1 of 3 36 |
37 |
38 | Variable width content 39 |
40 |
41 | 3 of 3 42 |
43 |
44 |
45 |
46 | 1 of 3 47 |
48 |
49 | Variable width content 50 |
51 |
52 | 3 of 3 53 |
54 |
55 |
56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /8.Bootstrap-Demo/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/singhsanket143/Frontend-Basics/e380a36f4ee8f1174f2fdd3d07b19754c43876fb/8.Bootstrap-Demo/style.css -------------------------------------------------------------------------------- /9.Project4/calculator.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 |
14 |

Calculator

15 |
16 |
17 |
18 |
19 | 20 |
21 |
22 |
23 |
24 | 25 |
26 |
27 | 28 | 29 |
30 |
31 | 32 | 33 |
34 |
35 | 36 | 37 |
38 |
39 |
40 |
41 | 42 | 43 |
44 |
45 | 46 | 47 |
48 |
49 | 50 | 51 |
52 |
53 | 54 | 55 |
56 |
57 |
58 |
59 | 60 | 61 |
62 |
63 | 64 | 65 |
66 |
67 | 68 | 69 |
70 |
71 | 72 | 73 |
74 |
75 |
76 |
77 | 78 | 79 |
80 |
81 | 82 | 83 |
84 |
85 | 86 | 87 |
88 |
89 | 90 | 91 |
92 |
93 |
94 |
95 | 96 |
97 |
98 | 99 |
100 | 101 |
102 |
103 |
104 |
105 | 106 | 107 | 108 | 109 | 110 | 111 | -------------------------------------------------------------------------------- /9.Project4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 |
14 |

Calculator

15 | 16 |
17 |
18 |
19 |
20 |
21 | 22 |
23 |
24 |
25 |
26 | 27 |
28 |
29 | 30 | 31 |
32 |
33 | 34 | 35 |
36 |
37 | 38 | 39 |
40 |
41 |
42 |
43 | 44 | 45 |
46 |
47 | 48 | 49 |
50 |
51 | 52 | 53 |
54 |
55 | 56 | 57 |
58 |
59 |
60 |
61 | 62 | 63 |
64 |
65 | 66 | 67 |
68 |
69 | 70 | 71 |
72 |
73 | 74 | 75 |
76 |
77 |
78 |
79 | 80 | 81 |
82 |
83 | 84 | 85 |
86 |
87 | 88 | 89 |
90 |
91 | 92 | 93 |
94 |
95 | 96 |
97 | 98 | 99 | 100 |
101 | 102 |
103 |
104 |
105 |
106 | 107 | 108 |
109 |
110 | 111 | 112 | 113 | 114 | -------------------------------------------------------------------------------- /9.Project4/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/singhsanket143/Frontend-Basics/e380a36f4ee8f1174f2fdd3d07b19754c43876fb/9.Project4/style.css -------------------------------------------------------------------------------- /Assignments/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/singhsanket143/Frontend-Basics/e380a36f4ee8f1174f2fdd3d07b19754c43876fb/Assignments/.DS_Store -------------------------------------------------------------------------------- /Assignments/Assign-1/Screenshot 2023-05-19 at 11.05.50 PM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/singhsanket143/Frontend-Basics/e380a36f4ee8f1174f2fdd3d07b19754c43876fb/Assignments/Assign-1/Screenshot 2023-05-19 at 11.05.50 PM.png -------------------------------------------------------------------------------- /Assignments/Assign-2/Screenshot 2023-05-20 at 11.02.42 PM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/singhsanket143/Frontend-Basics/e380a36f4ee8f1174f2fdd3d07b19754c43876fb/Assignments/Assign-2/Screenshot 2023-05-20 at 11.02.42 PM.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Frontend-Basics 2 | 3 | [Read more about class attribute ](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) 4 | 5 | [Read more about id attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) 6 | 7 | 8 | https://www.freecodecamp.org/news/git-and-github-crash-course/ 9 | https://www.youtube.com/playlist?list=PLm4khKImW62F8lyZs9yJG2lgiIHNnnyIj 10 | 11 | - Space shooter 12 | - Tic Tac Toe 13 | - Calculator 14 | - Netflix home page ui 15 | - COmplete git lectures --------------------------------------------------------------------------------