├── .vscode
    └── settings.json
├── 1648549544896.jpg
├── AbortController
    ├── app.js
    ├── index.html
    └── style.css
├── Accordion
    ├── app.js
    ├── index.html
    ├── logo.svg
    └── styles.css
├── Array.from-Pagination
    ├── app.js
    ├── displayButtons.js
    ├── displayFollowers.js
    ├── fetchFollowers.js
    ├── index.html
    ├── paginate.js
    └── styles.css
├── Asynchronous-JavaScript
    ├── FetchExample
    │   ├── app.js
    │   ├── index.html
    │   └── style.css
    ├── Promise-example
    │   ├── app.js
    │   └── index.html
    ├── Promise
    │   ├── app.js
    │   └── index.html
    ├── PromiseAsyncNuggets
    │   ├── app.js
    │   ├── index.html
    │   └── temp.js
    └── ajax-xhr
    │   ├── Normalize.css
    │   ├── app.js
    │   ├── index.html
    │   └── main.css
├── Call
    └── Apply
    │   └── Bind
    │       └── app.js
├── Css-variables
    ├── app.js
    ├── index.html
    └── main.css
├── Currying
    ├── app.js
    └── index.html
├── Custom-video-Player
    ├── app.js
    ├── asset
    │   └── pexels.mp4
    ├── index.html
    └── style.css
├── Dynamic-Values
    ├── app.js
    └── index.html
├── Event-bubbling
    ├── Example-1
    │   ├── app.js
    │   └── index.html
    └── Example-2
    │   ├── app.js
    │   ├── index.html
    │   └── style.css
├── Every
    ├── app.js
    └── index.html
├── Filter
    ├── app.js
    └── index.html
├── Find
    ├── app.js
    └── index.html
├── ForOf
    └── ForIn
    │   ├── app.js
    │   └── index.html
├── Form-Enteries
    ├── app.js
    ├── index.html
    └── style.css
├── FormData
    ├── app.js
    ├── index.html
    └── style.css
├── Functions
    └── index.js
├── GeneratorFunctions
    ├── app.js
    └── index.html
├── High-Order-Functions
    ├── app.js
    └── index.html
├── Image-Magnifer
    ├── app.js
    ├── index.html
    └── style.css
├── Image-Preview
    ├── app.js
    ├── index.html
    └── style.css
├── Includes
    ├── app.js
    └── index.html
├── Javascript-Crud
    ├── Js
    │   └── app.js
    ├── css
    │   └── style.css
    └── index.html
├── Javascript-Encapsulation
    └── app.js
├── Map
    ├── index.html
    └── index.js
├── Nullish-Coalescing
    ├── app.js
    └── index.html
├── Object-destructuring
    ├── app.js
    └── index.html
├── Prototype Model
    ├── app.js
    └── index.html
├── README.md
├── Slider
    ├── app.js
    ├── data.js
    ├── index.html
    └── styles.css
├── Some
    ├── app.js
    └── index.html
├── Unique-Values
    ├── app.js
    └── index.html
├── composition
    ├── app.js
    └── index.html
├── create-elements-dynamically
    ├── app.js
    └── index.html
├── debounce
    ├── app.js
    └── index.html
├── deepCopy
    ├── app.js
    └── index.html
├── htmlColorInput
    ├── app.js
    ├── index.html
    └── style.css
├── memozation
    └── app.js
├── reduce
    ├── Example-1
    │   ├── app.js
    │   └── index.html
    └── Example-2
    │   ├── app.js
    │   └── index.html
└── video
    ├── app.js
    ├── index.html
    ├── logo.svg
    ├── preloader.gif
    ├── styles.css
    └── video.mp4


/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "liveServer.settings.port": 5502,
3 |     "cSpell.words": [
4 |         "removeduplication"
5 |     ]
6 | }


--------------------------------------------------------------------------------
/1648549544896.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Amir-ali-anwar/Javascript-nuggets/215e5e886ca7f6417552a3e2a4e6b55270e49fcd/1648549544896.jpg


--------------------------------------------------------------------------------
/AbortController/app.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener('DOMContentLoaded', () => {
 2 |     const fetchButton = document.getElementById('fetchButton');
 3 |     const outputDiv = document.getElementById('output');
 4 |     let controller;
 5 | 
 6 |     fetchButton.addEventListener('click', () => {
 7 |         if (controller) {
 8 |             controller.abort(); // Abort the previous request if any
 9 |         }
10 | 
11 |         controller = new AbortController();
12 |         const signal = controller.signal;
13 | 
14 |         fetch('https://jsonplaceholder.typicode.com/posts', { signal })
15 |             .then(response => {
16 |                 if (!response.ok) {
17 |                     throw new Error('Network response was not ok');
18 |                 }
19 |                 return response.json();
20 |             })
21 |             .then(data => {
22 |                 renderData(data);
23 |             })
24 |             .catch(error => {
25 |                 if (error.name === 'AbortError') {
26 |                     console.log('Fetch operation aborted');
27 |                 } else {
28 |                     console.error('Fetch operation failed:', error);
29 |                 }
30 |             });
31 |     });
32 | 
33 |     function renderData(data) {
34 |         outputDiv.innerHTML = ''; // Clear previous content
35 | 
36 |         data.forEach(item => {
37 |             const itemDiv = document.createElement('div');
38 |             itemDiv.classList.add('output-item');
39 | 
40 |             const title = document.createElement('h2');
41 |             title.textContent = item.title;
42 | 
43 |             const body = document.createElement('p');
44 |             body.textContent = item.body;
45 | 
46 |             itemDiv.appendChild(title);
47 |             itemDiv.appendChild(body);
48 | 
49 |             outputDiv.appendChild(itemDiv);
50 |         });
51 |     }
52 | });
53 | 


--------------------------------------------------------------------------------
/AbortController/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>AbortController Example</title>
 7 |     <link rel="stylesheet" href='./style.css'>
 8 | </head>
 9 | <body>
10 |     <div id="container">
11 |         <button id="fetchButton">Fetch Data</button>
12 |         <div id="output" class="output-container"></div>
13 |     </div>
14 | 
15 |     <script src="app.js"></script>
16 | </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/AbortController/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Arial, sans-serif; /* Clean, modern font */
 3 |     background-color: #f5f5f5; /* Light background for better readability */
 4 |     margin: 0;
 5 |     padding: 0;
 6 |   }
 7 |   
 8 |   /* Container for overall layout */
 9 |   section#container {
10 |     display: flex; /* Allow horizontal layout for button and output */
11 |     flex-direction: column; /* Stack button on top, output below */
12 |     align-items: center; /* Center elements horizontally */
13 |     width: 800px; /* Set a maximum width for responsiveness */
14 |     margin: 0 auto; /* Center the container horizontally on the page */
15 |     padding: 40px; /* Add some padding for visual spacing */
16 |     border-radius: 5px; /* Subtle rounded corners */
17 |     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Slight shadow for depth */
18 |   }
19 |   
20 |   #fetchButton {
21 |     padding: 12px 24px;
22 |     font-size: 18px;
23 |     cursor: pointer;
24 |     background-color: #4CAF50; /* Green for primary action */
25 |     color: white;
26 |     border: none;
27 |     border-radius: 5px;
28 |     transition: background-color 0.3s;
29 |     box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
30 |   }
31 |   
32 |   #fetchButton:hover {
33 |     background-color: #45a049; /* Darker green on hover */
34 |   }
35 |   
36 |   /* Output container for fetched data */
37 |   .output-container {
38 |     display: flex;
39 |     flex-wrap: wrap;
40 |     justify-content: space-between;
41 |     width: 100%;
42 |     max-width: 1300px;
43 |     margin: 0 auto;
44 |   }
45 |   
46 |   .output-item {
47 |     background-color: white;
48 |     border: 1px solid #ddd;
49 |     border-radius: 8px;
50 |     margin: 15px; /* Spacing between items */
51 |     padding: 20px;
52 |     box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
53 |     transition: transform 0.3s, box-shadow 0.3s;
54 |     width: calc(33.33% - 30px); /* Calculate width for three equal blocks with margin */
55 |     /* Adjust margin value if needed to fine-tune spacing */
56 |     text-align: center; /* Center content within each item */
57 |     flex: 0 0 42%;
58 | 
59 |   }
60 |   
61 |   .output-item:hover {
62 |     background-color: #f0f0f0;
63 |     transform: translateY(-5px);
64 |     box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
65 |   }
66 |   
67 |   .output-item h2 {
68 |     font-size: 24px;
69 |     margin-bottom: 10px;
70 |     color: #333;
71 |   }
72 |   
73 |   .output-item p {
74 |     margin: 0;
75 |     font-size: 16px;
76 |     color: #666;
77 |     line-height: 1.6;
78 |   }
79 |   


--------------------------------------------------------------------------------
/Accordion/app.js:
--------------------------------------------------------------------------------
1 | //using selectors inside the element
2 | // traversing the dom
3 | 


--------------------------------------------------------------------------------
/Accordion/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8" />
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |   <title>Accordion </title>
  8 |   <!-- font-awesome -->
  9 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
 10 |   <!-- extra fonts -->
 11 |   <link href="https://fonts.googleapis.com/css?family=Great+Vibes&display=swap" rel="stylesheet" />
 12 |   <!-- styles -->
 13 |   <link rel="stylesheet" href="styles.css" />
 14 | </head>
 15 | 
 16 | <body>
 17 |   <section class="questions">
 18 |     <!-- title -->
 19 |     <div class="title">
 20 |       <h2>general questions</h2>
 21 |     </div>
 22 |     <!-- questions -->
 23 |     <div class="section-center">
 24 |       <!-- single question -->
 25 |       <article class="question">
 26 |         <!-- question title -->
 27 |         <div class="question-title">
 28 |           <p>Do you accept all major credit cards?</p>
 29 |           <button type="button" class="question-btn">
 30 |             <span class="plus-icon">
 31 |               <i class="far fa-plus-square"></i>
 32 |             </span>
 33 |             <span class="minus-icon">
 34 |               <i class="far fa-minus-square"></i>
 35 |             </span>
 36 |           </button>
 37 |         </div>
 38 |         <!-- question text -->
 39 |         <div class="question-text">
 40 |           <p>
 41 |             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est
 42 |             dolore illo dolores quia nemo doloribus quaerat, magni numquam
 43 |             repellat reprehenderit.
 44 |           </p>
 45 |         </div>
 46 |       </article>
 47 |       <!-- end of single question -->
 48 |       <!-- single question -->
 49 |       <article class="question">
 50 |         <!-- question title -->
 51 |         <div class="question-title">
 52 |           <p>do you suppport local farmers?</p>
 53 |           <button type="button" class="question-btn">
 54 |             <span class="plus-icon">
 55 |               <i class="far fa-plus-square"></i>
 56 |             </span>
 57 |             <span class="minus-icon">
 58 |               <i class="far fa-minus-square"></i>
 59 |             </span>
 60 |           </button>
 61 |         </div>
 62 |         <!-- question text -->
 63 |         <div class="question-text">
 64 |           <p>
 65 |             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est
 66 |             dolore illo dolores quia nemo doloribus quaerat, magni numquam
 67 |             repellat reprehenderit.
 68 |           </p>
 69 |         </div>
 70 |       </article>
 71 |       <!-- end of single question -->
 72 |       <!-- single question -->
 73 |       <article class="question">
 74 |         <!-- question title -->
 75 |         <div class="question-title">
 76 |           <p>do you use organic ingredients?</p>
 77 |           <!-- button -->
 78 |           <button type="button" class="question-btn">
 79 |             <span class="plus-icon">
 80 |               <i class="far fa-plus-square"></i>
 81 |             </span>
 82 |             <span class="minus-icon">
 83 |               <i class="far fa-minus-square"></i>
 84 |             </span>
 85 |           </button>
 86 |         </div>
 87 |         <!-- question text -->
 88 |         <div class="question-text">
 89 |           <p>
 90 |             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est
 91 |             dolore illo dolores quia nemo doloribus quaerat, magni numquam
 92 |             repellat reprehenderit.
 93 |           </p>
 94 |         </div>
 95 |       </article>
 96 |       <!-- end of single question -->
 97 |   </section>
 98 |   </main>
 99 |   <!-- javascript -->
100 |   <script src="app.js"></script>
101 | </body>
102 | 
103 | </html>


--------------------------------------------------------------------------------
/Accordion/logo.svg:
--------------------------------------------------------------------------------
 1 | <svg width="230" height="47" viewBox="0 0 230 47" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g filter="url(#filter0_d)">
 3 | <path d="M21.1797 25.2324C20.916 27.4883 20.0811 29.2314 18.6748 30.4619C17.2783 31.6826 15.418 32.293 13.0938 32.293C10.5742 32.293 8.55273 31.3896 7.0293 29.583C5.51562 27.7764 4.75879 25.3594 4.75879 22.332V20.2812C4.75879 18.2988 5.11035 16.5557 5.81348 15.0518C6.52637 13.5479 7.53223 12.3955 8.83105 11.5947C10.1299 10.7842 11.6338 10.3789 13.3428 10.3789C15.6084 10.3789 17.4248 11.0137 18.792 12.2832C20.1592 13.543 20.9551 15.291 21.1797 17.5273H18.3525C18.1084 15.8281 17.5762 14.5977 16.7559 13.8359C15.9453 13.0742 14.8076 12.6934 13.3428 12.6934C11.5459 12.6934 10.1348 13.3574 9.10938 14.6855C8.09375 16.0137 7.58594 17.9033 7.58594 20.3545V22.4199C7.58594 24.7344 8.06934 26.5752 9.03613 27.9424C10.0029 29.3096 11.3555 29.9932 13.0938 29.9932C14.6562 29.9932 15.8525 29.6416 16.6826 28.9385C17.5225 28.2256 18.0791 26.9902 18.3525 25.2324H21.1797ZM26.8896 23.9287C26.8896 22.376 27.1924 20.9795 27.7979 19.7393C28.4131 18.499 29.2627 17.542 30.3467 16.8682C31.4404 16.1943 32.6855 15.8574 34.082 15.8574C36.2402 15.8574 37.9834 16.6045 39.3115 18.0986C40.6494 19.5928 41.3184 21.5801 41.3184 24.0605V24.251C41.3184 25.7939 41.0205 27.1807 40.4248 28.4111C39.8389 29.6318 38.9941 30.584 37.8906 31.2676C36.7969 31.9512 35.5371 32.293 34.1113 32.293C31.9629 32.293 30.2197 31.5459 28.8818 30.0518C27.5537 28.5576 26.8896 26.5801 26.8896 24.1191V23.9287ZM29.6143 24.251C29.6143 26.0088 30.0195 27.4199 30.8301 28.4844C31.6504 29.5488 32.7441 30.0811 34.1113 30.0811C35.4883 30.0811 36.582 29.5439 37.3926 28.4697C38.2031 27.3857 38.6084 25.8721 38.6084 23.9287C38.6084 22.1904 38.1934 20.7842 37.3633 19.71C36.543 18.626 35.4492 18.084 34.082 18.084C32.7441 18.084 31.665 18.6162 30.8447 19.6807C30.0244 20.7451 29.6143 22.2686 29.6143 24.251ZM47.0576 23.9434C47.0576 21.5117 47.6338 19.5586 48.7861 18.084C49.9385 16.5996 51.4473 15.8574 53.3125 15.8574C55.168 15.8574 56.6377 16.4922 57.7217 17.7617V9.5H60.4316V32H57.9414L57.8096 30.3008C56.7256 31.6289 55.2168 32.293 53.2832 32.293C51.4473 32.293 49.9482 31.541 48.7861 30.0371C47.6338 28.5332 47.0576 26.5703 47.0576 24.1484V23.9434ZM49.7676 24.251C49.7676 26.0479 50.1387 27.4541 50.8809 28.4697C51.623 29.4854 52.6484 29.9932 53.957 29.9932C55.6758 29.9932 56.9307 29.2217 57.7217 27.6787V20.3984C56.9111 18.9043 55.666 18.1572 53.9863 18.1572C52.6582 18.1572 51.623 18.6699 50.8809 19.6953C50.1387 20.7207 49.7676 22.2393 49.7676 24.251ZM70.5947 32H67.8848V16.1504H70.5947V32ZM67.665 11.9463C67.665 11.5068 67.7969 11.1357 68.0605 10.833C68.334 10.5303 68.7344 10.3789 69.2617 10.3789C69.7891 10.3789 70.1895 10.5303 70.4629 10.833C70.7363 11.1357 70.873 11.5068 70.873 11.9463C70.873 12.3857 70.7363 12.752 70.4629 13.0449C70.1895 13.3379 69.7891 13.4844 69.2617 13.4844C68.7344 13.4844 68.334 13.3379 68.0605 13.0449C67.7969 12.752 67.665 12.3857 67.665 11.9463ZM80.5088 16.1504L80.5967 18.1426C81.8076 16.6191 83.3896 15.8574 85.3428 15.8574C88.6924 15.8574 90.3818 17.7471 90.4111 21.5264V32H87.7012V21.5117C87.6914 20.3691 87.4277 19.5244 86.9102 18.9775C86.4023 18.4307 85.6064 18.1572 84.5225 18.1572C83.6436 18.1572 82.8721 18.3916 82.208 18.8604C81.5439 19.3291 81.0264 19.9443 80.6553 20.7061V32H77.9453V16.1504H80.5088ZM96.8535 23.9434C96.8535 21.4727 97.4248 19.5098 98.5674 18.0547C99.71 16.5898 101.224 15.8574 103.108 15.8574C105.042 15.8574 106.551 16.541 107.635 17.9082L107.767 16.1504H110.242V31.6191C110.242 33.6699 109.632 35.2861 108.411 36.4678C107.2 37.6494 105.569 38.2402 103.519 38.2402C102.376 38.2402 101.258 37.9961 100.164 37.5078C99.0703 37.0195 98.2354 36.3506 97.6592 35.501L99.0654 33.875C100.228 35.3105 101.648 36.0283 103.328 36.0283C104.646 36.0283 105.672 35.6572 106.404 34.915C107.146 34.1729 107.518 33.1279 107.518 31.7803V30.418C106.434 31.668 104.954 32.293 103.079 32.293C101.224 32.293 99.7197 31.5459 98.5674 30.0518C97.4248 28.5576 96.8535 26.5215 96.8535 23.9434ZM99.5781 24.251C99.5781 26.0381 99.9443 27.4443 100.677 28.4697C101.409 29.4854 102.435 29.9932 103.753 29.9932C105.462 29.9932 106.717 29.2168 107.518 27.6641V20.4277C106.688 18.9141 105.442 18.1572 103.782 18.1572C102.464 18.1572 101.434 18.6699 100.691 19.6953C99.9492 20.7207 99.5781 22.2393 99.5781 24.251Z" fill="#222222"/>
 4 | <path d="M139.987 26.4336H131.052L129.045 32H126.145L134.289 10.6719H136.75L144.909 32H142.023L139.987 26.4336ZM131.901 24.1191H139.152L135.52 14.1436L131.901 24.1191ZM149.696 23.9434C149.696 21.5117 150.272 19.5586 151.425 18.084C152.577 16.5996 154.086 15.8574 155.951 15.8574C157.807 15.8574 159.276 16.4922 160.36 17.7617V9.5H163.07V32H160.58L160.448 30.3008C159.364 31.6289 157.855 32.293 155.922 32.293C154.086 32.293 152.587 31.541 151.425 30.0371C150.272 28.5332 149.696 26.5703 149.696 24.1484V23.9434ZM152.406 24.251C152.406 26.0479 152.777 27.4541 153.52 28.4697C154.262 29.4854 155.287 29.9932 156.596 29.9932C158.314 29.9932 159.569 29.2217 160.36 27.6787V20.3984C159.55 18.9043 158.305 18.1572 156.625 18.1572C155.297 18.1572 154.262 18.6699 153.52 19.6953C152.777 20.7207 152.406 22.2393 152.406 24.251ZM169.63 23.9434C169.63 21.5117 170.206 19.5586 171.358 18.084C172.511 16.5996 174.02 15.8574 175.885 15.8574C177.74 15.8574 179.21 16.4922 180.294 17.7617V9.5H183.004V32H180.514L180.382 30.3008C179.298 31.6289 177.789 32.293 175.855 32.293C174.02 32.293 172.521 31.541 171.358 30.0371C170.206 28.5332 169.63 26.5703 169.63 24.1484V23.9434ZM172.34 24.251C172.34 26.0479 172.711 27.4541 173.453 28.4697C174.195 29.4854 175.221 29.9932 176.529 29.9932C178.248 29.9932 179.503 29.2217 180.294 27.6787V20.3984C179.483 18.9043 178.238 18.1572 176.559 18.1572C175.23 18.1572 174.195 18.6699 173.453 19.6953C172.711 20.7207 172.34 22.2393 172.34 24.251ZM193.167 32H190.457V16.1504H193.167V32ZM190.237 11.9463C190.237 11.5068 190.369 11.1357 190.633 10.833C190.906 10.5303 191.307 10.3789 191.834 10.3789C192.361 10.3789 192.762 10.5303 193.035 10.833C193.309 11.1357 193.445 11.5068 193.445 11.9463C193.445 12.3857 193.309 12.752 193.035 13.0449C192.762 13.3379 192.361 13.4844 191.834 13.4844C191.307 13.4844 190.906 13.3379 190.633 13.0449C190.369 12.752 190.237 12.3857 190.237 11.9463ZM206.875 30.0811C207.842 30.0811 208.687 29.7881 209.409 29.2021C210.132 28.6162 210.532 27.8838 210.61 27.0049H213.174C213.125 27.9131 212.812 28.7773 212.236 29.5977C211.66 30.418 210.889 31.0723 209.922 31.5605C208.965 32.0488 207.949 32.293 206.875 32.293C204.717 32.293 202.998 31.5752 201.719 30.1396C200.449 28.6943 199.814 26.7217 199.814 24.2217V23.7676C199.814 22.2246 200.098 20.8525 200.664 19.6514C201.23 18.4502 202.041 17.5176 203.096 16.8535C204.16 16.1895 205.415 15.8574 206.86 15.8574C208.638 15.8574 210.112 16.3896 211.284 17.4541C212.466 18.5186 213.096 19.9004 213.174 21.5996H210.61C210.532 20.5742 210.142 19.7344 209.438 19.0801C208.745 18.416 207.886 18.084 206.86 18.084C205.483 18.084 204.414 18.582 203.652 19.5781C202.9 20.5645 202.524 21.9951 202.524 23.8701V24.3828C202.524 26.209 202.9 27.6152 203.652 28.6016C204.404 29.5879 205.479 30.0811 206.875 30.0811ZM222.897 12.3125V16.1504H225.856V18.2451H222.897V28.0742C222.897 28.709 223.029 29.1875 223.293 29.5098C223.557 29.8223 224.006 29.9785 224.641 29.9785C224.953 29.9785 225.383 29.9199 225.93 29.8027V32C225.217 32.1953 224.523 32.293 223.85 32.293C222.639 32.293 221.726 31.9268 221.11 31.1943C220.495 30.4619 220.188 29.4219 220.188 28.0742V18.2451H217.302V16.1504H220.188V12.3125H222.897Z" fill="#49A6E9"/>
 5 | </g>
 6 | <defs>
 7 | <filter id="filter0_d" x="0.758789" y="9.5" width="229.171" height="36.7402" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 8 | <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 9 | <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
10 | <feOffset dy="4"/>
11 | <feGaussianBlur stdDeviation="2"/>
12 | <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
13 | <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
14 | <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
15 | </filter>
16 | </defs>
17 | </svg>
18 | 


--------------------------------------------------------------------------------
/Accordion/styles.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | =============== 
  3 | Fonts
  4 | ===============
  5 | */
  6 | @import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");
  7 | 
  8 | /*
  9 | =============== 
 10 | Variables
 11 | ===============
 12 | */
 13 | 
 14 | :root {
 15 |   /* dark shades of primary color*/
 16 |   --clr-primary-1: hsl(205, 86%, 17%);
 17 |   --clr-primary-2: hsl(205, 77%, 27%);
 18 |   --clr-primary-3: hsl(205, 72%, 37%);
 19 |   --clr-primary-4: hsl(205, 63%, 48%);
 20 |   /* primary/main color */
 21 |   --clr-primary-5: #49a6e9;
 22 |   /* lighter shades of primary color */
 23 |   --clr-primary-6: hsl(205, 89%, 70%);
 24 |   --clr-primary-7: hsl(205, 90%, 76%);
 25 |   --clr-primary-8: hsl(205, 86%, 81%);
 26 |   --clr-primary-9: hsl(205, 90%, 88%);
 27 |   --clr-primary-10: hsl(205, 100%, 96%);
 28 |   /* darkest grey - used for headings */
 29 |   --clr-grey-1: hsl(209, 61%, 16%);
 30 |   --clr-grey-2: hsl(211, 39%, 23%);
 31 |   --clr-grey-3: hsl(209, 34%, 30%);
 32 |   --clr-grey-4: hsl(209, 28%, 39%);
 33 |   /* grey used for paragraphs */
 34 |   --clr-grey-5: hsl(210, 22%, 49%);
 35 |   --clr-grey-6: hsl(209, 23%, 60%);
 36 |   --clr-grey-7: hsl(211, 27%, 70%);
 37 |   --clr-grey-8: hsl(210, 31%, 80%);
 38 |   --clr-grey-9: hsl(212, 33%, 89%);
 39 |   --clr-grey-10: hsl(210, 36%, 96%);
 40 |   --clr-white: #fff;
 41 |   --clr-red-dark: hsl(360, 67%, 44%);
 42 |   --clr-red-light: hsl(360, 71%, 66%);
 43 |   --clr-green-dark: hsl(125, 67%, 44%);
 44 |   --clr-green-light: hsl(125, 71%, 66%);
 45 |   --clr-gold: #c59d5f;
 46 |   --clr-black: #222;
 47 |   --ff-primary: "Roboto", sans-serif;
 48 |   --ff-secondary: "Open Sans", sans-serif;
 49 |   --transition: all 0.3s linear;
 50 |   --spacing: 0.25rem;
 51 |   --radius: 0.5rem;
 52 |   --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 53 |   --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 54 |   --max-width: 1170px;
 55 |   --fixed-width: 620px;
 56 | }
 57 | /*
 58 | =============== 
 59 | Global Styles
 60 | ===============
 61 | */
 62 | 
 63 | *,
 64 | ::after,
 65 | ::before {
 66 |   margin: 0;
 67 |   padding: 0;
 68 |   box-sizing: border-box;
 69 | }
 70 | body {
 71 |   font-family: var(--ff-secondary);
 72 |   background: var(--clr-grey-10);
 73 |   color: var(--clr-grey-1);
 74 |   line-height: 1.5;
 75 |   font-size: 0.875rem;
 76 | }
 77 | ul {
 78 |   list-style-type: none;
 79 | }
 80 | a {
 81 |   text-decoration: none;
 82 | }
 83 | img:not(.logo) {
 84 |   width: 100%;
 85 | }
 86 | img {
 87 |   display: block;
 88 | }
 89 | 
 90 | h1,
 91 | h2,
 92 | h3,
 93 | h4 {
 94 |   letter-spacing: var(--spacing);
 95 |   text-transform: capitalize;
 96 |   line-height: 1.25;
 97 |   margin-bottom: 0.75rem;
 98 |   font-family: var(--ff-primary);
 99 | }
100 | h1 {
101 |   font-size: 3rem;
102 | }
103 | h2 {
104 |   font-size: 2rem;
105 | }
106 | h3 {
107 |   font-size: 1.25rem;
108 | }
109 | h4 {
110 |   font-size: 0.875rem;
111 | }
112 | p {
113 |   margin-bottom: 1.25rem;
114 |   color: var(--clr-grey-5);
115 | }
116 | @media screen and (min-width: 800px) {
117 |   h1 {
118 |     font-size: 4rem;
119 |   }
120 |   h2 {
121 |     font-size: 2.5rem;
122 |   }
123 |   h3 {
124 |     font-size: 1.75rem;
125 |   }
126 |   h4 {
127 |     font-size: 1rem;
128 |   }
129 |   body {
130 |     font-size: 1rem;
131 |   }
132 |   h1,
133 |   h2,
134 |   h3,
135 |   h4 {
136 |     line-height: 1;
137 |   }
138 | }
139 | /*  global classes */
140 | 
141 | .btn {
142 |   text-transform: uppercase;
143 |   background: transparent;
144 |   color: var(--clr-black);
145 |   padding: 0.375rem 0.75rem;
146 |   letter-spacing: var(--spacing);
147 |   display: inline-block;
148 |   transition: var(--transition);
149 |   font-size: 0.875rem;
150 |   border: 2px solid var(--clr-black);
151 |   cursor: pointer;
152 |   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
153 |   border-radius: var(--radius);
154 | }
155 | .btn:hover {
156 |   color: var(--clr-white);
157 |   background: var(--clr-black);
158 | }
159 | /* section */
160 | .section {
161 |   padding: 5rem 0;
162 | }
163 | 
164 | .section-center {
165 |   width: 90vw;
166 |   margin: 0 auto;
167 |   max-width: 1170px;
168 | }
169 | @media screen and (min-width: 992px) {
170 |   .section-center {
171 |     width: 95vw;
172 |   }
173 | }
174 | main {
175 |   min-height: 100vh;
176 |   display: grid;
177 |   place-items: center;
178 | }
179 | /*
180 | =============== 
181 | Questions
182 | ===============
183 | */
184 | .title {
185 |   margin-top: 15vh;
186 |   margin-bottom: 4rem;
187 | }
188 | .title h2 {
189 |   color: var(--clr-gold);
190 |   font-family: "Great Vibes", cursive;
191 |   text-align: center;
192 | }
193 | .section-center {
194 |   max-width: var(--fixed-width);
195 | }
196 | .question {
197 |   background: var(--clr-white);
198 |   border-radius: var(--radius);
199 |   box-shadow: var(--light-shadow);
200 |   padding: 1.5rem 1.5rem 0 1.5rem;
201 |   margin-bottom: 2rem;
202 | }
203 | .question-title {
204 |   display: flex;
205 |   justify-content: space-between;
206 |   align-items: center;
207 |   text-transform: capitalize;
208 |   padding-bottom: 1rem;
209 | }
210 | .question-title p {
211 |   margin-bottom: 0;
212 |   letter-spacing: var(--spacing);
213 |   color: var(--clr-grey-1);
214 | }
215 | .question-btn {
216 |   font-size: 1.5rem;
217 |   background: transparent;
218 |   border-color: transparent;
219 |   cursor: pointer;
220 |   color: var(--clr-gold);
221 |   transition: var(--transition);
222 | }
223 | .question-btn:hover {
224 |   transform: rotate(90deg);
225 | }
226 | .question-text {
227 |   padding: 1rem 0 1.5rem 0;
228 |   border-top: 1px solid rgba(0, 0, 0, 0.2);
229 | }
230 | .question-text p {
231 |   margin-bottom: 0;
232 | }
233 | /* hide text */
234 | /* .question-text {
235 |   display: none;
236 | }
237 | .show-text .question-text {
238 |   display: block;
239 | }
240 | .minus-icon {
241 |   display: none;
242 | }
243 | .show-text .minus-icon {
244 |   display: inline;
245 | }
246 | .show-text .plus-icon {
247 |   display: none;
248 | } */
249 | 


--------------------------------------------------------------------------------
/Array.from-Pagination/app.js:
--------------------------------------------------------------------------------
 1 | import fetchFollowers from "./fetchFollowers.js";
 2 | import displayFollowers from "./displayFollowers.js";
 3 | import paginate from "./paginate.js";
 4 | import displayButtons from "./displayButtons.js";
 5 | const title = document.querySelector(".section-title h1");
 6 | const btnContainer = document.querySelector(".btn-container");
 7 | let index = 0;
 8 | let pages = [];
 9 | 
10 | const setUpUI = () => {
11 |   displayFollowers(pages[index]);
12 |   displayButtons(btnContainer, pages, index);
13 | };
14 | const init = async () => {
15 |   const followers = await fetchFollowers();
16 |   title.textContent = "Pagination";
17 |   pages = paginate(followers);
18 |   setUpUI();
19 | };
20 | btnContainer.addEventListener('click',function(e){
21 |   let style = e.target.classList.contains("page-btn");
22 |   if(style){
23 |     index = e.target.dataset.index;
24 |    parseInt(index)
25 |   }
26 |   if (e.target.classList.contains("next-btn")) {
27 |     index++
28 |     if (index > pages.length-1) {
29 |       index=0
30 |     }
31 |   }
32 |    if (e.target.classList.contains("prev-btn")) {
33 |      index--;
34 |      if (index<0) {
35 |        index = pages.length - 1;
36 |      }
37 |    }
38 |   setUpUI()
39 | });
40 | window.addEventListener("load", init);
41 | 


--------------------------------------------------------------------------------
/Array.from-Pagination/displayButtons.js:
--------------------------------------------------------------------------------
 1 | const displayButtons = (container,pages,index) => {
 2 |   let buttons= pages?.map((_,pageIndex)=>{
 3 |     return `<button  class="page-btn ${
 4 |       pageIndex === Number(index) ? "active-btn" : ''
 5 |     }" data-index=${pageIndex}>${pageIndex + 1}</button>`;
 6 |   })
 7 |   
 8 |    buttons.push('<button class="next-btn">next</button>')
 9 |    buttons.unshift('<button class="prev-btn">prev</button>');
10 |    container.innerHTML=buttons.join('')
11 | }
12 | 
13 | export default displayButtons
14 | 


--------------------------------------------------------------------------------
/Array.from-Pagination/displayFollowers.js:
--------------------------------------------------------------------------------
 1 | const container = document.querySelector(".container");
 2 | const display = (followers) => {
 3 |   const newpagination = followers
 4 |     ?.map((follower) => {
 5 |       const { avatar_url, login, html_url } = follower;
 6 |       return `<article class="card">
 7 |         <img src="${avatar_url}">
 8 |         <h4>${login}</h4>
 9 |          <a href="${html_url}" class="btn">view profile</a>
10 |     </article>`;
11 |     })
12 |     .join("");
13 | 
14 |   container.innerHTML = newpagination;
15 | };
16 | 
17 | export default display;
18 | 


--------------------------------------------------------------------------------
/Array.from-Pagination/fetchFollowers.js:
--------------------------------------------------------------------------------
 1 | const url = "https://api.github.com/users/bradtraversy/followers?per_page=1000";
 2 | 
 3 | const fetchFollowers = async () => {
 4 |     const response = await fetch(url);
 5 |     if (!response) throw new Error("Response is not Valid")         
 6 |     const data = await response.json()
 7 |     return data
 8 | }
 9 | 
10 | export default fetchFollowers
11 | 


--------------------------------------------------------------------------------
/Array.from-Pagination/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Pagination Starter</title>
 7 |     <!-- font-awesome -->
 8 |     <link
 9 |       rel="stylesheet"
10 |       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
11 |     />
12 | 
13 |     <!-- stylesheet -->
14 |     <link rel="stylesheet" href="./styles.css" />
15 |   </head>
16 |   <body>
17 |   <main>
18 |     <div class="section-title">
19 |       <h1>Loading...</h1>
20 |       <div class="underline"></div>
21 |     </div>
22 |     <section class="followers">
23 |       <div class="container"></div>
24 |   
25 |       <div class="btn-container"></div>
26 |     </section>
27 |   </main>
28 |     <script type="module" src="./app.js"></script>
29 |   </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/Array.from-Pagination/paginate.js:
--------------------------------------------------------------------------------
 1 | const paginate = (followers) => {
 2 |     let itemsPerPage= 10;
 3 |     let numberOfPages= followers.length/itemsPerPage
 4 |     let finalPages= Array.from({length:numberOfPages},(_,index)=>{
 5 |        const start= index*itemsPerPage
 6 |        return followers.slice(start,start+itemsPerPage)
 7 |     })
 8 |     return finalPages
 9 | };
10 | 
11 | export default paginate
12 | 


--------------------------------------------------------------------------------
/Array.from-Pagination/styles.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | =============== 
  3 | Variables
  4 | ===============
  5 | */
  6 | 
  7 | :root {
  8 |   /* dark shades of primary color*/
  9 |   --clr-primary-1: hsl(205, 86%, 17%);
 10 |   --clr-primary-2: hsl(205, 77%, 27%);
 11 |   --clr-primary-3: hsl(205, 72%, 37%);
 12 |   --clr-primary-4: hsl(205, 63%, 48%);
 13 |   /* primary/main color */
 14 |   --clr-primary-5: hsl(205, 78%, 60%);
 15 |   /* lighter shades of primary color */
 16 |   --clr-primary-6: hsl(205, 89%, 70%);
 17 |   --clr-primary-7: hsl(205, 90%, 76%);
 18 |   --clr-primary-8: hsl(205, 86%, 81%);
 19 |   --clr-primary-9: hsl(205, 90%, 88%);
 20 |   --clr-primary-10: hsl(205, 100%, 96%);
 21 |   /* darkest grey - used for headings */
 22 |   --clr-grey-1: hsl(209, 61%, 16%);
 23 |   --clr-grey-2: hsl(211, 39%, 23%);
 24 |   --clr-grey-3: hsl(209, 34%, 30%);
 25 |   --clr-grey-4: hsl(209, 28%, 39%);
 26 |   /* grey used for paragraphs */
 27 |   --clr-grey-5: hsl(210, 22%, 49%);
 28 |   --clr-grey-6: hsl(209, 23%, 60%);
 29 |   --clr-grey-7: hsl(211, 27%, 70%);
 30 |   --clr-grey-8: hsl(210, 31%, 80%);
 31 |   --clr-grey-9: hsl(212, 33%, 89%);
 32 |   --clr-grey-10: hsl(210, 36%, 96%);
 33 |   --clr-white: #fff;
 34 |   --clr-red-dark: hsl(360, 67%, 44%);
 35 |   --clr-red-light: hsl(360, 71%, 66%);
 36 |   --clr-green-dark: hsl(125, 67%, 44%);
 37 |   --clr-green-light: hsl(125, 71%, 66%);
 38 |   --clr-black: #222;
 39 | 
 40 |   --transition: all 0.3s linear;
 41 |   --spacing: 0.1rem;
 42 |   --radius: 0.75rem;
 43 |   --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 44 |   --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 45 |   --max-width: 1170px;
 46 |   --fixed-width: 620px;
 47 | }
 48 | /*
 49 | =============== 
 50 | Global Styles
 51 | ===============
 52 | */
 53 | 
 54 | *,
 55 | ::after,
 56 | ::before {
 57 |   margin: 0;
 58 |   padding: 0;
 59 |   box-sizing: border-box;
 60 | }
 61 | body {
 62 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
 63 |     Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 64 |   background: var(--clr-grey-10);
 65 |   color: var(--clr-grey-1);
 66 |   line-height: 1.5;
 67 |   font-size: 0.875rem;
 68 | }
 69 | ul {
 70 |   list-style-type: none;
 71 | }
 72 | a {
 73 |   text-decoration: none;
 74 | }
 75 | h1,
 76 | h2,
 77 | h3,
 78 | h4 {
 79 |   letter-spacing: var(--spacing);
 80 |   text-transform: capitalize;
 81 |   line-height: 1.25;
 82 |   margin-bottom: 0.75rem;
 83 | }
 84 | h1 {
 85 |   font-size: 2.75rem;
 86 | }
 87 | h2 {
 88 |   font-size: 2rem;
 89 | }
 90 | h3 {
 91 |   font-size: 1.25rem;
 92 | }
 93 | h4 {
 94 |   font-size: 0.875rem;
 95 | }
 96 | p {
 97 |   margin-bottom: 1.25rem;
 98 |   color: var(--clr-grey-5);
 99 | }
100 | @media screen and (min-width: 800px) {
101 |   h1 {
102 |     font-size: 3rem;
103 |   }
104 |   h2 {
105 |     font-size: 2.5rem;
106 |   }
107 |   h3 {
108 |     font-size: 1.75rem;
109 |   }
110 |   h4 {
111 |     font-size: 1rem;
112 |   }
113 |   body {
114 |     font-size: 1rem;
115 |   }
116 |   h1,
117 |   h2,
118 |   h3,
119 |   h4 {
120 |     line-height: 1;
121 |   }
122 | }
123 | 
124 | /*
125 | =============== 
126 | Pagination
127 | ===============
128 | */
129 | .section-title {
130 |   text-align: center;
131 |   margin: 4rem 0 6rem 0;
132 | }
133 | .underline {
134 |   width: 8rem;
135 |   height: 0.25rem;
136 |   background: var(--clr-primary-5);
137 |   margin: 0 auto;
138 | }
139 | .followers {
140 |   width: 90vw;
141 |   max-width: var(--max-width);
142 |   margin: 5rem auto;
143 | }
144 | .container {
145 |   display: grid;
146 |   gap: 2rem;
147 |   margin-bottom: 4rem;
148 | }
149 | @media screen and (min-width: 576px) {
150 |   .container {
151 |     grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
152 |   }
153 | }
154 | .card {
155 |   background: var(--clr-white);
156 |   border-radius: var(--radius);
157 |   box-shadow: var(--light-shadow);
158 |   padding: 2rem 1.5rem;
159 |   text-align: center;
160 | }
161 | .card img {
162 |   width: 130px;
163 |   height: 130px;
164 |   border-radius: 50%;
165 |   object-fit: cover;
166 |   margin-bottom: 0.75rem;
167 | }
168 | 
169 | .card h4 {
170 |   margin-bottom: 1.5rem;
171 |   font-size: 0.85rem;
172 |   color: var(--clr-grey-5);
173 | }
174 | 
175 | .btn {
176 |   padding: 0.35rem 0.75rem;
177 |   letter-spacing: 1.6px;
178 |   font-size: 0.75rem;
179 |   color: var(--clr-white);
180 |   background: var(--clr-primary-5);
181 |   border-radius: var(--radius);
182 |   border-color: transparent;
183 |   text-transform: uppercase;
184 |   transition: var(--transition);
185 |   cursor: pointer;
186 | }
187 | 
188 | .btn-container {
189 |   display: flex;
190 |   justify-content: center;
191 |   flex-wrap: wrap;
192 | }
193 | .page-btn {
194 |   width: 2rem;
195 |   height: 2rem;
196 |   background: var(--clr-primary-7);
197 |   border-color: transparent;
198 |   border-radius: 5px;
199 |   cursor: pointer;
200 |   margin: 0.5rem;
201 |   transition: var(--transition);
202 | }
203 | .active-btn {
204 |   background: var(--clr-primary-1);
205 |   color: var(--clr-white);
206 | }
207 | .prev-btn,
208 | .next-btn {
209 |   background: transparent;
210 |   border-color: transparent;
211 |   font-weight: bold;
212 |   text-transform: capitalize;
213 |   letter-spacing: var(--spacing);
214 |   margin: 0.5rem;
215 |   font-size: 1rem;
216 |   cursor: pointer;
217 | }
218 | 
219 | @media screen and (min-width: 775px) {
220 |   .btn-container {
221 |     margin: 0 auto;
222 |     max-width: 900px;
223 |   }
224 | }
225 | 


--------------------------------------------------------------------------------
/Asynchronous-JavaScript/FetchExample/app.js:
--------------------------------------------------------------------------------
 1 | 
 2 | const button = document.querySelector(".fetch-data");
 3 | const stories = document.querySelector(".stories");
 4 | const nodata = document.querySelector(".loading");
 5 | const noData= document.querySelector('.no-data')
 6 | // import axios from 'axios'
 7 | 
 8 | let buttonClickCount = 0;
 9 | async function fetchdata() {
10 |   let buttonClicked = true;
11 |   let fetchdata = true;
12 |   buttonClickCount++;
13 |     try {
14 |       buttonClicked && nodata.classList.add("d-block");
15 |       noData.style.display='none'
16 |       buttonClicked = false;
17 |       if (buttonClickCount > 1 && fetchdata) {
18 |         stories.style.display = "none";
19 |         noData.style.display='none'
20 |       }
21 |       const response = await fetch("https://hn.algolia.com/api/v1/search?");
22 |       const data = await response.json();
23 |       fetchdata && nodata.classList.replace("d-block", "d-none");
24 |       fetchdata && (stories.style.display = "grid");
25 |       noData.style.display='none'
26 |       fetchdata = false;
27 |       stories.innerHTML = data?.hits
28 |         ?.map((story) => {
29 |           const { objectID, title, num_comments , points, author } = story;
30 |           return `<article  class='story' id=${objectID}>
31 |         <h4>${title}</h4>
32 |         <p class='info'>
33 |           ${points} points by <span>${author} | </span> ${num_comments}
34 |           comments
35 |         </p>
36 |       </article>`;
37 |         })
38 |         .join("");
39 | 
40 |       console.log(fetchdata);
41 |     } catch (error) {
42 |       throw new Error(error)
43 |     }
44 |     
45 |   }
46 | button.addEventListener("click", fetchdata);
47 | 


--------------------------------------------------------------------------------
/Asynchronous-JavaScript/FetchExample/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Document</title>
 7 |     <link rel="stylesheet" href="style.css" />
 8 |   </head>
 9 | 
10 |   <body>
11 |   
12 |     <p class="no-data">
13 |       There is no data, Click on the below button to view data
14 |     </p>
15 |     <div class="btn-container">
16 |       <button class="fetch-data">fetch data</button>
17 |     </div>
18 |     <div class="loading d-none"></div>
19 | 
20 |     <section class="stories"></section>
21 |     <script type="module" src="app.js"></script>
22 |     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
23 |   
24 |   </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/Asynchronous-JavaScript/FetchExample/style.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | =============== 
  3 | Variables
  4 | ===============
  5 | */
  6 | 
  7 | :root {
  8 |   /* dark shades of primary color*/
  9 |   --clr-primary-1: hsl(205, 86%, 17%);
 10 |   --clr-primary-2: hsl(205, 77%, 27%);
 11 |   --clr-primary-3: hsl(205, 72%, 37%);
 12 |   --clr-primary-4: hsl(205, 63%, 48%);
 13 |   /* primary/main color */
 14 |   --clr-primary-5: hsl(205, 78%, 60%);
 15 |   /* lighter shades of primary color */
 16 |   --clr-primary-6: hsl(205, 89%, 70%);
 17 |   --clr-primary-7: hsl(205, 90%, 76%);
 18 |   --clr-primary-8: hsl(205, 86%, 81%);
 19 |   --clr-primary-9: hsl(205, 90%, 88%);
 20 |   --clr-primary-10: hsl(205, 100%, 96%);
 21 |   /* darkest grey - used for headings */
 22 |   --clr-grey-1: hsl(209, 61%, 16%);
 23 |   --clr-grey-2: hsl(211, 39%, 23%);
 24 |   --clr-grey-3: hsl(209, 34%, 30%);
 25 |   --clr-grey-4: hsl(209, 28%, 39%);
 26 |   /* grey used for paragraphs */
 27 |   --clr-grey-5: hsl(210, 22%, 49%);
 28 |   --clr-grey-6: hsl(209, 23%, 60%);
 29 |   --clr-grey-7: hsl(211, 27%, 70%);
 30 |   --clr-grey-8: hsl(210, 31%, 80%);
 31 |   --clr-grey-9: hsl(212, 33%, 89%);
 32 |   --clr-grey-10: hsl(210, 36%, 96%);
 33 |   --clr-white: #fff;
 34 |   --clr-red-dark: hsl(360, 67%, 44%);
 35 |   --clr-red-light: hsl(360, 71%, 66%);
 36 |   --clr-green-dark: hsl(125, 67%, 44%);
 37 |   --clr-green-light: hsl(125, 71%, 66%);
 38 |   --clr-black: #222;
 39 |   --transition: all 0.3s linear;
 40 |   --spacing: 0.1rem;
 41 |   --radius: 0.25rem;
 42 |   --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 43 |   --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 44 |   --max-width: 1170px;
 45 |   --fixed-width: 620px;
 46 | }
 47 | /*
 48 |   =============== 
 49 |   Global Styles
 50 |   ===============
 51 |   */
 52 | .d-none {
 53 |   display: none;
 54 | }
 55 | .d-block {
 56 |   display: block;
 57 | }
 58 | *,
 59 | ::after,
 60 | ::before {
 61 |   margin: 0;
 62 |   padding: 0;
 63 |   box-sizing: border-box;
 64 | }
 65 | body {
 66 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
 67 |     Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 68 |   background: var(--clr-grey-10);
 69 |   color: var(--clr-grey-1);
 70 |   line-height: 1.5;
 71 |   font-size: 0.875rem;
 72 | }
 73 | ul {
 74 |   list-style-type: none;
 75 | }
 76 | a {
 77 |   text-decoration: none;
 78 | }
 79 | h1,
 80 | h2,
 81 | h3,
 82 | h4 {
 83 |   letter-spacing: var(--spacing);
 84 |   text-transform: capitalize;
 85 |   line-height: 1.25;
 86 |   margin-bottom: 0.75rem;
 87 | }
 88 | h1 {
 89 |   font-size: 2.5rem;
 90 | }
 91 | h2 {
 92 |   font-size: 2rem;
 93 | }
 94 | h3 {
 95 |   font-size: 1.25rem;
 96 | }
 97 | h4 {
 98 |   font-size: 0.875rem;
 99 | }
100 | p {
101 |   margin-bottom: 1.25rem;
102 |   color: var(--clr-grey-3);
103 | }
104 | @media screen and (min-width: 800px) {
105 |   h1 {
106 |     font-size: 3rem;
107 |   }
108 |   h2 {
109 |     font-size: 2.5rem;
110 |   }
111 |   h3 {
112 |     font-size: 1.75rem;
113 |   }
114 |   h4 {
115 |     font-size: 1rem;
116 |   }
117 |   body {
118 |     font-size: 1rem;
119 |   }
120 |   h1,
121 |   h2,
122 |   h3,
123 |   h4 {
124 |     line-height: 1;
125 |   }
126 | }
127 | /*  global classes */
128 | 
129 | /* section */
130 | .section {
131 |   width: 90vw;
132 |   margin: 0 auto;
133 |   max-width: var(--max-width);
134 | }
135 | 
136 | @media screen and (min-width: 992px) {
137 |   .section {
138 |     width: 95vw;
139 |   }
140 | }
141 | 
142 | /*
143 |   =============== 
144 |   Search
145 |   ===============
146 |   */
147 | .search-form {
148 |   width: 90vw;
149 |   max-width: var(--max-width);
150 |   margin: 0 auto;
151 |   margin-top: 5rem;
152 |   margin-bottom: 3rem;
153 | }
154 | .form-input {
155 |   width: 100%;
156 |   border: none;
157 |   border-bottom: 3px solid var(--clr-grey-8);
158 |   max-width: 600px;
159 |   background: transparent;
160 |   padding: 1rem;
161 |   font-size: 1rem;
162 |   color: var(--clr-grey-3);
163 |   text-transform: uppercase;
164 |   letter-spacing: var(--spacing);
165 |   margin-top: 1rem;
166 | }
167 | 
168 | /*
169 |   =============== 
170 |   Buttons
171 |   ===============
172 |   */
173 | 
174 | .btn-container {
175 |   width: 90vw;
176 |   max-width: var(--max-width);
177 |   margin: 0 auto;
178 |   margin-bottom: 1.5rem;
179 |   display: flex;
180 |   justify-content: center;
181 |   align-items: center;
182 | }
183 | .btn-container p {
184 |   margin-bottom: 0;
185 |   font-size: 1.2rem;
186 |   font-weight: bold;
187 | }
188 | 
189 | .btn-container button {
190 |   margin: 1rem;
191 |   padding: 0.25rem 0.5rem;
192 |   text-transform: capitalize;
193 |   font-weight: bold;
194 |   border-color: transparent;
195 |   background: var(--clr-primary-5);
196 |   border-radius: var(--radius);
197 |   color: var(--clr-white);
198 |   letter-spacing: var(--spacing);
199 |   cursor: pointer;
200 | }
201 | .btn-container button:disabled {
202 |   cursor: not-allowed;
203 | }
204 | 
205 | /*
206 |   =============== 
207 |   Spinner
208 |   ===============
209 |   */
210 | .spinner-container {
211 |   position: relative;
212 | }
213 | @keyframes spinner {
214 |   to {
215 |     transform: rotate(360deg);
216 |   }
217 | }
218 | 
219 | .loading {
220 |   width: 6rem;
221 |   height: 6rem;
222 |   margin: 0 auto;
223 |   margin-top: 10rem;
224 |   border-radius: 50%;
225 |   border: 3px solid #ccc;
226 |   border-top-color: var(--clr-primary-5);
227 |   animation: spinner 0.6s linear infinite;
228 | }
229 | 
230 | /*
231 |   =============== 
232 |   Story
233 |   ===============
234 |   */
235 | .stories {
236 |   width: 90vw;
237 |   max-width: var(--max-width);
238 |   margin: 0 auto;
239 |   margin-bottom: 5rem;
240 |   display: grid;
241 |   gap: 2rem;
242 | }
243 | @media screen and (min-width: 992px) {
244 |   .stories {
245 |     display: grid;
246 |     grid-template-columns: 1fr 1fr;
247 |     /* align-items: start; */
248 |   }
249 | }
250 | .story {
251 |   background: var(--clr-white);
252 |   border-radius: var(--radius);
253 |   padding: 1rem 2rem;
254 | }
255 | 
256 | .title {
257 |   line-height: 1.5;
258 |   margin-bottom: 0.25rem;
259 | }
260 | .info {
261 |   margin-bottom: 0.5rem;
262 |   color: var(--clr-grey-5);
263 | }
264 | 
265 | .read-link {
266 |   font-size: 0.85rem;
267 |   margin-right: 0.75rem;
268 |   text-transform: capitalize;
269 |   color: var(--clr-primary-5);
270 | }
271 | 
272 | .remove-btn {
273 |   background: transparent;
274 |   color: var(--clr-red-dark);
275 |   border-color: transparent;
276 |   cursor: pointer;
277 |   text-transform: capitalize;
278 |   font-size: 0.85rem;
279 | }
280 | 
281 | .no-data {
282 |   text-align: center;
283 |     font-weight: 500;
284 |     font-size: 20px;
285 |     text-decoration: underline;
286 |     font-style: italic;
287 |     margin-top: 1.25rem;
288 | }
289 | 


--------------------------------------------------------------------------------
/Asynchronous-JavaScript/Promise-example/app.js:
--------------------------------------------------------------------------------
 1 | const button = document.querySelector('.btn');
 2 | const imgContainer = document.querySelector('.image-container');
 3 | const loadingText = document.querySelector('.loading-text')
 4 | 
 5 | const url = 'https://source.unsplash.com/random';
 6 | 
 7 | button.addEventListener('click', () => {
 8 |     Loadimage(url)
 9 |         .then(resp => {
10 |             if (!resp) {
11 |                 throw new Error('No Image available');
12 |             }
13 |             imgContainer.appendChild(resp);
14 |         })
15 |         .catch(error => {
16 |             console.log(error);
17 |         });
18 | });
19 | 
20 | const Loadimage = (url) => {
21 |     return new Promise((resolve, reject) => {
22 |         let img = new Image();
23 |         loadingText.style.display = 'block';
24 |         img.addEventListener('load', () => {
25 |             resolve(img);
26 |             loadingText.style.display = 'none';
27 |         });
28 |         img.addEventListener('error', () => {
29 |             reject(new Error(`Opps there is error in your ${url}`));
30 |         });
31 |         img.src = url;
32 |     });
33 | };
34 | 


--------------------------------------------------------------------------------
/Asynchronous-JavaScript/Promise-example/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Asynchronous Javascript</title>
 9 |     <style>
10 |         body {
11 |             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
12 |                 Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
13 |             line-height: 1.5;
14 |             font-size: 0.875rem;
15 |         }
16 | 
17 |         .image-container {
18 |             width: 50%;
19 |             margin: 0 auto;
20 |         }
21 | 
22 |         img {
23 |             width: 100%;
24 |             height: 400px;
25 |             object-fit: cover;
26 |         }
27 | 
28 |         .loading-text {
29 |             display: none;
30 |             font-size: 30px;
31 |             font-family: sans-serif;
32 |         }
33 | 
34 |         h1,
35 |         h2,
36 |         h3,
37 |         h4 {
38 |             text-transform: capitalize;
39 |             line-height: 1.25;
40 |             margin-bottom: 0.75rem;
41 |         }
42 |     </style>
43 | </head>
44 | 
45 | <body>
46 |     <button class="btn">Click me to Trigger</button>
47 |     <P class="loading-text">Loading....</P>
48 |     <div class="image-container">
49 |     </div>
50 | 
51 | </body>
52 | <script src="app.js"></script>
53 | 
54 | </html>


--------------------------------------------------------------------------------
/Asynchronous-JavaScript/Promise/app.js:
--------------------------------------------------------------------------------
 1 | const BASEURL = "https://dummyjson.com";
 2 | //Promise are used to run Asynchronous operations in javascript,
 3 | //Prior to promises events and callback functions were used but they had limited functionalities and created unmanageable code.
 4 | //Promise are use to avoid the callback hell
 5 | //pending, Rejected, Fulfilled
 6 | 
 7 | // let Promises = new Promise((resolve, reject) => {
 8 | //     const firstvalue = 'uncle tom'
 9 | //     const secondvalue = 'uncle tom'
10 | //     if (firstvalue === secondvalue) {
11 | //         resolve()
12 | //     } else {
13 | //         reject()
14 | //     }
15 | 
16 | // })
17 | 
18 | // Promises.then(() => {
19 | //     console.log('Success');
20 | // }).catch(() => {
21 | //     console.log('Some error has occurred');
22 | // });
23 | 
24 | // Examples
25 | let success = true;
26 | 
27 | // function getUsers() {
28 | //     return new Promise((resolve, reject) => {
29 | //         setTimeout(() => {
30 | //             if (success) {
31 | //                 resolve([
32 | //                     { username: 'john', email: 'john@test.com' },
33 | //                     { username: 'jane', email: 'jane@test.com' },
34 | //                 ]);
35 | //             } else {
36 | //                 reject('Failed to the user list');
37 | //             }
38 | //         }, 1000);
39 | //     });
40 | // }
41 | 
42 | // function onFulfilled(users) {
43 | //     console.log(users);
44 | // }
45 | // function onRejected(error) {
46 | //     console.log(error);
47 | // }
48 | 
49 | // const promise = getUsers();
50 | // promise.then(onFulfilled, onRejected);
51 | 
52 | 
53 | //Created generic the "customFetch" function to take in a endpoint and handle errors (including a wrong endpoint)
54 | // const customFetch = async (endpoints, options) => {
55 | //     try {
56 | //         const res = await fetch(`${BASEURL}/${endpoints}`, { ...options });
57 | //         if (!res.ok) throw new Error("response not valid")
58 | //         const json = await res.json();
59 | //         return json;
60 | //     } catch (error) {
61 | //         console.log(error.message);
62 | //     }
63 | // }
64 | async function customFetch(endpoint, options) {
65 |   try {
66 |     const res = await fetch(`${BASEURL}/${endpoint}`, { ...options });
67 |     if (!res.ok) {
68 |       throw new Error(`${res.status}: ${res.statusText}`)
69 |     }
70 |     const json = await res.json();
71 |     return json
72 |   } catch (err) {
73 |     console.error(err.message)
74 |   }
75 | }
76 | //Create a function called "getProducts" that returns all the products in an array. Then list all the products in the DOM in an unordered list.
77 | 
78 | const getCommentsOnUsersPosts = async (id) => {
79 |   if (!id) throw Error('Please enter value')
80 |   const postByUser = await customFetch(`users/${id}/posts`);
81 |   const singlePost = await postByUser?.posts?.map((post) => {
82 | 
83 |     const { title, body, reactions } = post
84 |     return { title, body, reactions }
85 |   })
86 |   return singlePost
87 | }
88 | 
89 | 
90 | async function abc() {
91 |   const data = await getCommentsOnUsersPosts(5)
92 |   console.log(data);
93 | }
94 | 
95 | abc()


--------------------------------------------------------------------------------
/Asynchronous-JavaScript/Promise/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Javascript Promise</title>
 9 | </head>
10 | 
11 | <body>
12 |     <script src="app.js"></script>
13 | </body>
14 | 
15 | </html>


--------------------------------------------------------------------------------
/Asynchronous-JavaScript/PromiseAsyncNuggets/app.js:
--------------------------------------------------------------------------------
 1 | const promise = new Promise((resolve, reject) => {
 2 |   setTimeout(() => {
 3 |     resolve("promise resolved");
 4 |   }, 3000);
 5 | });
 6 | 
 7 | // async,await
 8 | async function PromiseHandler() {
 9 |   await promise;
10 |   console.log("value");
11 | }
12 | 
13 | PromiseHandler();
14 | 
15 | function getpromise() {
16 |   promise.then((res) => console.log(res));
17 |   console.log("value");
18 | }
19 | getpromise();
20 | 


--------------------------------------------------------------------------------
/Asynchronous-JavaScript/PromiseAsyncNuggets/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Document</title>
 7 | </head>
 8 | <body>
 9 |     <script src="temp.js"></script>
10 | </body>
11 | </html>


--------------------------------------------------------------------------------
/Asynchronous-JavaScript/PromiseAsyncNuggets/temp.js:
--------------------------------------------------------------------------------
 1 | function counter() {
 2 |     let count = 0;
 3 |     function abc() {
 4 |       return ++count;
 5 |     };
 6 |     return abc
 7 |   }
 8 |   const increment = counter();
 9 |   console.log(increment()); 
10 |   console.log(increment()); 
11 |   console.log(increment());


--------------------------------------------------------------------------------
/Asynchronous-JavaScript/ajax-xhr/Normalize.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
  2 | 
  3 | /* Document
  4 |    ========================================================================== */
  5 | 
  6 | /**
  7 |  * 1. Correct the line height in all browsers.
  8 |  * 2. Prevent adjustments of font size after orientation changes in iOS.
  9 |  */
 10 | 
 11 |  html {
 12 |     line-height: 1.15; /* 1 */
 13 |     -webkit-text-size-adjust: 100%; /* 2 */
 14 |   }
 15 |   
 16 |   /* Sections
 17 |      ========================================================================== */
 18 |   
 19 |   /**
 20 |    * Remove the margin in all browsers.
 21 |    */
 22 |   
 23 |   body {
 24 |     margin: 0;
 25 |   }
 26 |   
 27 |   /**
 28 |    * Render the `main` element consistently in IE.
 29 |    */
 30 |   
 31 |   main {
 32 |     display: block;
 33 |   }
 34 |   
 35 |   /**
 36 |    * Correct the font size and margin on `h1` elements within `section` and
 37 |    * `article` contexts in Chrome, Firefox, and Safari.
 38 |    */
 39 |   
 40 |   h1 {
 41 |     font-size: 2em;
 42 |     margin: 0.67em 0;
 43 |   }
 44 |   
 45 |   /* Grouping content
 46 |      ========================================================================== */
 47 |   
 48 |   /**
 49 |    * 1. Add the correct box sizing in Firefox.
 50 |    * 2. Show the overflow in Edge and IE.
 51 |    */
 52 |   
 53 |   hr {
 54 |     box-sizing: content-box; /* 1 */
 55 |     height: 0; /* 1 */
 56 |     overflow: visible; /* 2 */
 57 |   }
 58 |   
 59 |   /**
 60 |    * 1. Correct the inheritance and scaling of font size in all browsers.
 61 |    * 2. Correct the odd `em` font sizing in all browsers.
 62 |    */
 63 |   
 64 |   pre {
 65 |     font-family: monospace, monospace; /* 1 */
 66 |     font-size: 1em; /* 2 */
 67 |   }
 68 |   
 69 |   /* Text-level semantics
 70 |      ========================================================================== */
 71 |   
 72 |   /**
 73 |    * Remove the gray background on active links in IE 10.
 74 |    */
 75 |   
 76 |   a {
 77 |     background-color: transparent;
 78 |   }
 79 |   
 80 |   /**
 81 |    * 1. Remove the bottom border in Chrome 57-
 82 |    * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 83 |    */
 84 |   
 85 |   abbr[title] {
 86 |     border-bottom: none; /* 1 */
 87 |     text-decoration: underline; /* 2 */
 88 |     text-decoration: underline dotted; /* 2 */
 89 |   }
 90 |   
 91 |   /**
 92 |    * Add the correct font weight in Chrome, Edge, and Safari.
 93 |    */
 94 |   
 95 |   b,
 96 |   strong {
 97 |     font-weight: 500;
 98 |   }
 99 |   
100 |   /**
101 |    * 1. Correct the inheritance and scaling of font size in all browsers.
102 |    * 2. Correct the odd `em` font sizing in all browsers.
103 |    */
104 |   
105 |   code,
106 |   kbd,
107 |   samp {
108 |     font-family: monospace, monospace; /* 1 */
109 |     font-size: 1em; /* 2 */
110 |   }
111 |   
112 |   /**
113 |    * Add the correct font size in all browsers.
114 |    */
115 |   
116 |   small {
117 |     font-size: 80%;
118 |   }
119 |   
120 |   /**
121 |    * Prevent `sub` and `sup` elements from affecting the line height in
122 |    * all browsers.
123 |    */
124 |   
125 |   sub,
126 |   sup {
127 |     font-size: 75%;
128 |     line-height: 0;
129 |     position: relative;
130 |     vertical-align: baseline;
131 |   }
132 |   
133 |   sub {
134 |     bottom: -0.25em;
135 |   }
136 |   
137 |   sup {
138 |     top: -0.5em;
139 |   }
140 |   
141 |   /* Embedded content
142 |      ========================================================================== */
143 |   
144 |   /**
145 |    * Remove the border on images inside links in IE 10.
146 |    */
147 |   
148 |   img {
149 |     border-style: none;
150 |   }
151 |   
152 |   /* Forms
153 |      ========================================================================== */
154 |   
155 |   /**
156 |    * 1. Change the font styles in all browsers.
157 |    * 2. Remove the margin in Firefox and Safari.
158 |    */
159 |   
160 |   button,
161 |   input,
162 |   optgroup,
163 |   select,
164 |   textarea {
165 |     font-family: inherit; /* 1 */
166 |     font-size: 100%; /* 1 */
167 |     line-height: 1.15; /* 1 */
168 |     margin: 0; /* 2 */
169 |   }
170 |   
171 |   /**
172 |    * Show the overflow in IE.
173 |    * 1. Show the overflow in Edge.
174 |    */
175 |   
176 |   button,
177 |   input {
178 |     /* 1 */
179 |     overflow: visible;
180 |   }
181 |   
182 |   /**
183 |    * Remove the inheritance of text transform in Edge, Firefox, and IE.
184 |    * 1. Remove the inheritance of text transform in Firefox.
185 |    */
186 |   
187 |   button,
188 |   select {
189 |     /* 1 */
190 |     text-transform: none;
191 |   }
192 |   
193 |   /**
194 |    * Correct the inability to style clickable types in iOS and Safari.
195 |    */
196 |   
197 |   button,
198 |   [type='button'],
199 |   [type='reset'],
200 |   [type='submit'] {
201 |     -webkit-appearance: button;
202 |   }
203 |   
204 |   /**
205 |    * Remove the inner border and padding in Firefox.
206 |    */
207 |   
208 |   button::-moz-focus-inner,
209 |   [type='button']::-moz-focus-inner,
210 |   [type='reset']::-moz-focus-inner,
211 |   [type='submit']::-moz-focus-inner {
212 |     border-style: none;
213 |     padding: 0;
214 |   }
215 |   
216 |   /**
217 |    * Restore the focus styles unset by the previous rule.
218 |    */
219 |   
220 |   button:-moz-focusring,
221 |   [type='button']:-moz-focusring,
222 |   [type='reset']:-moz-focusring,
223 |   [type='submit']:-moz-focusring {
224 |     outline: 1px dotted ButtonText;
225 |   }
226 |   
227 |   /**
228 |    * Correct the padding in Firefox.
229 |    */
230 |   
231 |   fieldset {
232 |     padding: 0.35em 0.75em 0.625em;
233 |   }
234 |   
235 |   /**
236 |    * 1. Correct the text wrapping in Edge and IE.
237 |    * 2. Correct the color inheritance from `fieldset` elements in IE.
238 |    * 3. Remove the padding so developers are not caught out when they zero out
239 |    *    `fieldset` elements in all browsers.
240 |    */
241 |   
242 |   legend {
243 |     box-sizing: border-box; /* 1 */
244 |     color: inherit; /* 2 */
245 |     display: table; /* 1 */
246 |     max-width: 100%; /* 1 */
247 |     padding: 0; /* 3 */
248 |     white-space: normal; /* 1 */
249 |   }
250 |   
251 |   /**
252 |    * Add the correct vertical alignment in Chrome, Firefox, and Opera.
253 |    */
254 |   
255 |   progress {
256 |     vertical-align: baseline;
257 |   }
258 |   
259 |   /**
260 |    * Remove the default vertical scrollbar in IE 10+.
261 |    */
262 |   
263 |   textarea {
264 |     overflow: auto;
265 |   }
266 |   
267 |   /**
268 |    * 1. Add the correct box sizing in IE 10.
269 |    * 2. Remove the padding in IE 10.
270 |    */
271 |   
272 |   [type='checkbox'],
273 |   [type='radio'] {
274 |     box-sizing: border-box; /* 1 */
275 |     padding: 0; /* 2 */
276 |   }
277 |   
278 |   /**
279 |    * Correct the cursor style of increment and decrement buttons in Chrome.
280 |    */
281 |   
282 |   [type='number']::-webkit-inner-spin-button,
283 |   [type='number']::-webkit-outer-spin-button {
284 |     height: auto;
285 |   }
286 |   
287 |   /**
288 |    * 1. Correct the odd appearance in Chrome and Safari.
289 |    * 2. Correct the outline style in Safari.
290 |    */
291 |   
292 |   [type='search'] {
293 |     -webkit-appearance: textfield; /* 1 */
294 |     outline-offset: -2px; /* 2 */
295 |   }
296 |   
297 |   /**
298 |    * Remove the inner padding in Chrome and Safari on macOS.
299 |    */
300 |   
301 |   [type='search']::-webkit-search-decoration {
302 |     -webkit-appearance: none;
303 |   }
304 |   
305 |   /**
306 |    * 1. Correct the inability to style clickable types in iOS and Safari.
307 |    * 2. Change font properties to `inherit` in Safari.
308 |    */
309 |   
310 |   ::-webkit-file-upload-button {
311 |     -webkit-appearance: button; /* 1 */
312 |     font: inherit; /* 2 */
313 |   }
314 |   
315 |   /* Interactive
316 |      ========================================================================== */
317 |   
318 |   /*
319 |    * Add the correct display in Edge, IE 10+, and Firefox.
320 |    */
321 |   
322 |   details {
323 |     display: block;
324 |   }
325 |   
326 |   /*
327 |    * Add the correct display in all browsers.
328 |    */
329 |   
330 |   summary {
331 |     display: list-item;
332 |   }
333 |   
334 |   /* Misc
335 |      ========================================================================== */
336 |   
337 |   /**
338 |    * Add the correct display in IE 10+.
339 |    */
340 |   
341 |   template {
342 |     display: none;
343 |   }
344 |   
345 |   /**
346 |    * Add the correct display in IE 10.
347 |    */
348 |   
349 |   [hidden] {
350 |     display: none;
351 |   }
352 |   


--------------------------------------------------------------------------------
/Asynchronous-JavaScript/ajax-xhr/app.js:
--------------------------------------------------------------------------------
 1 | const btn = document.querySelector('.btn');
 2 | const loading = document.querySelector('.loading');
 3 | const xhr = new XMLHttpRequest();
 4 | // Sepcify method and endpoint/URL
 5 | // xhr.open('GET', './movies.json');
 6 | xhr.open('GET', 'https://api.github.com/users/bradtraversy/repos')
 7 | // readyState has 5 possible values
 8 | // - 0: request not initialized
 9 | // - 1: server connection established
10 | // - 2: request received
11 | // - 3: processing request
12 | // - 4: request finished and response is ready
13 | xhr.onreadystatechange = function () {
14 |     if (this.readyState == 2 && this.status !== 200) {
15 |         console.log('000');
16 |         loading.style.display='block'  
17 |         return
18 |     }
19 |     if (this.readyState === 4 && this.status === 200) {
20 |         const Users = JSON.parse(this.responseText)
21 |         // loading.style.display='none'  
22 |         const result = Users?.map((User) => {
23 |             const { name, description } = User
24 |             return `
25 |             <li class="data data-${User.id}">
26 |             <strong>${name}</strong-${description} 
27 |             </li>
28 |           `
29 |         })
30 |         document.querySelector('#results').innerHTML = result;
31 |     }
32 | }
33 | const sendRequest = () => {
34 |     xhr.send();
35 | }
36 | 
37 | btn.addEventListener('click', sendRequest)
38 | 
39 | 


--------------------------------------------------------------------------------
/Asynchronous-JavaScript/ajax-xhr/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <link rel="stylesheet" href="Normalize.css" />
 8 |     <link rel="stylesheet" href="./main.css" />
 9 |     <title>AJAX & XHR Object</title>
10 |   </head>
11 |   <body>
12 |     <div class="results-main">
13 |     <h1>AJAX & XHR Object</h1>
14 |     <div class="loading"></div>
15 |     <button class="btn mt-10">Click me to send Request</button>
16 |      <ul id="results"></ul>
17 |     </div>
18 | 
19 |     <script src="./app.js"></script>
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/Asynchronous-JavaScript/ajax-xhr/main.css:
--------------------------------------------------------------------------------
  1 | *,
  2 | ::after,
  3 | ::before {
  4 |   margin: 0;
  5 |   padding: 0;
  6 |   box-sizing: border-box;
  7 | }
  8 | 
  9 | html {
 10 |   font-size: 100%;
 11 | } /*16px*/
 12 | 
 13 | :root {
 14 |   /* colors */
 15 |   --primary-100: #e2e0ff;
 16 |   --primary-200: #c1beff;
 17 |   --primary-300: #a29dff;
 18 |   --primary-400: #837dff;
 19 |   --primary-500: #645cff;
 20 |   --primary-600: #504acc;
 21 |   --primary-700: #3c3799;
 22 |   --primary-800: #282566;
 23 |   --primary-900: #141233;
 24 | 
 25 |   /* grey */
 26 |   --grey-50: #f8fafc;
 27 |   --grey-100: #f1f5f9;
 28 |   --grey-200: #e2e8f0;
 29 |   --grey-300: #cbd5e1;
 30 |   --grey-400: #94a3b8;
 31 |   --grey-500: #64748b;
 32 |   --grey-600: #475569;
 33 |   --grey-700: #334155;
 34 |   --grey-800: #1e293b;
 35 |   --grey-900: #0f172a;
 36 |   /* rest of the colors */
 37 |   --black: #222;
 38 |   --white: #fff;
 39 |   --red-light: #f8d7da;
 40 |   --red-dark: #842029;
 41 |   --green-light: #d1e7dd;
 42 |   --green-dark: #0f5132;
 43 | 
 44 |   --small-text: 0.875rem;
 45 |   --extra-small-text: 0.7em;
 46 |   /* rest of the vars */
 47 |   --backgroundColor: var(--grey-50);
 48 |   --textColor: var(--grey-900);
 49 |   --borderRadius: 0.25rem;
 50 |   --letterSpacing: 1px;
 51 |   --transition: 0.3s ease-in-out all;
 52 |   --max-width: 1120px;
 53 |   --fixed-width: 600px;
 54 | 
 55 |   /* box shadow*/
 56 |   --shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
 57 |   --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
 58 |     0 2px 4px -1px rgba(0, 0, 0, 0.06);
 59 |   --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
 60 |     0 4px 6px -2px rgba(0, 0, 0, 0.05);
 61 |   --shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
 62 |     0 10px 10px -5px rgba(0, 0, 0, 0.04);
 63 | }
 64 | 
 65 | body {
 66 |   background: var(--backgroundColor);
 67 |   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
 68 |     Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 69 |   font-weight: 400;
 70 |   line-height: 1;
 71 |   color: var(--textColor);
 72 | }
 73 | p {
 74 |   margin: 0;
 75 | }
 76 | h1,
 77 | h2,
 78 | h3,
 79 | h4,
 80 | h5 {
 81 |   margin: 0;
 82 |   font-family: var(--headingFont);
 83 |   font-weight: 400;
 84 |   line-height: 1;
 85 |   text-transform: capitalize;
 86 |   letter-spacing: var(--letterSpacing);
 87 | }
 88 | 
 89 | h1 {
 90 |   font-size: 3.052rem;
 91 | }
 92 | 
 93 | h2 {
 94 |   font-size: 2.441rem;
 95 | }
 96 | 
 97 | h3 {
 98 |   font-size: 1.953rem;
 99 | }
100 | 
101 | h4 {
102 |   font-size: 1.563rem;
103 | }
104 | 
105 | h5 {
106 |   font-size: 1.25rem;
107 | }
108 | 
109 | .text {
110 |   margin-bottom: 1.5rem;
111 |   max-width: 40em;
112 | }
113 | 
114 | small,
115 | .text-small {
116 |   font-size: var(--small-text);
117 | }
118 | 
119 | a {
120 |   text-decoration: none;
121 | }
122 | ul {
123 |   list-style-type: none;
124 |   padding: 0;
125 |   margin-top: 30px;
126 | }
127 | li{
128 |     margin-bottom: 15px;
129 |     max-width: var(--fixed-width);
130 |     background: var(--white);
131 |     border-radius: var(--borderRadius);
132 |     box-shadow: var(--shadow-2);
133 |     padding: 0.8rem 0.8rem;
134 | }
135 | .results-main {
136 |     padding: 15px;
137 | }
138 | .btn {
139 |     cursor: pointer;
140 |     color: var(--white);
141 |     background: var(--primary-500);
142 |     border: transparent;
143 |     border-radius: var(--borderRadius);
144 |     letter-spacing: var(--letterSpacing);
145 |     padding: 0.375rem 0.75rem;
146 |     box-shadow: var(--shadow-1);
147 |     transition: var(--transition);
148 |     text-transform: capitalize;
149 |     display: inline-block;
150 |   }
151 |   .btn:hover {
152 |     background: var(--primary-700);
153 |     box-shadow: var(--shadow-3);
154 |   }
155 |   .btn-hipster {
156 |     color: var(--primary-500);
157 |     background: var(--primary-200);
158 |   }
159 |   .btn-hipster:hover {
160 |     color: var(--primary-200);
161 |     background: var(--primary-700);
162 |   }
163 |   .btn-block {
164 |     width: 100%;
165 |   }
166 |   
167 |   .mt-10{
168 |     margin-top: 15px;
169 |   }
170 | 
171 |   @keyframes spinner {
172 |     to {
173 |       transform: rotate(360deg);
174 |     }
175 |   }
176 |   
177 |   .loading {
178 |     width: 6rem;
179 |     height: 6rem;
180 |     border: 5px solid var(--grey-400);
181 |     border-radius: 50%;
182 |     border-top-color: var(--primary-500);
183 |     animation: spinner 0.6s linear infinite;
184 |     margin: 0 auto;
185 |     display: none;
186 |   }


--------------------------------------------------------------------------------
/Call/Apply/Bind/app.js:
--------------------------------------------------------------------------------
 1 | // Examples of call, Apply,Bind
 2 | 
 3 | // Call Method
 4 | 
 5 | function greet(name) {
 6 |     console.log(`Hello, ${name}! My name is ${this.name}.`);
 7 | }
 8 | const person = { name: "Amir Ali Anwar" }
 9 | greet.call(person, 'amir')
10 | 
11 | function sayHello(role) {
12 |     console.log(`Hello, ${this.name}! and I am ${role}`);
13 | }
14 | const PetterObj = { name: "Peter" }
15 | const DocObj = { name: "Dr. Umair" }
16 | const intro = sayHello.call(PetterObj, 'Software Engineer')
17 | const DoctorInto= sayHello.call(DocObj,'Lawyer')
18 | 
19 | 
20 | // Apply Method
21 | 
22 | function greets(name) {
23 |     console.log(`Hello, ${name}! My name is ${this.name}.`);
24 | }
25 | 
26 | const personInfo = { name: 'John' };
27 | const args = ['Alice', 30];
28 | 
29 | greets.apply(personInfo, args);  
30 | 
31 | // Bind
32 | 
33 | const BindPerson= greet.bind(personInfo)
34 | BindPerson('Brad')
35 | 
36 | 
37 | 
38 | function minMovesToMedian(prices, k) {
39 |     // Step 1: Sort the array
40 |     prices.sort((a, b) => a - b);
41 |   
42 |     // Step 2: Calculate the current median index
43 |     const n = prices.length;
44 |     const medianIndex = Math.floor((n + 1) / 2) - 1; // Adjusted for zero-based index
45 |   
46 |     // Step 3: Check if the current median is already equal to k
47 |     const currentMedian = prices[medianIndex];
48 |     if (currentMedian === k) {
49 |       return 0; // No moves needed
50 |     }
51 |   
52 |     // Step 4 and 5: Adjust prices to make the median equal to k
53 |     let moves = 0;
54 |     for (let i = 0; i < n; i++) {
55 |       const diff = k - prices[medianIndex];
56 |       moves += Math.abs(diff);
57 |     }
58 |   
59 |     return moves;
60 |   }
61 |   
62 |   // Example usage:
63 |   const prices = [1, 3, 5];
64 |   const k = 4;
65 |   const result = minMovesToMedian(prices, k);
66 |   console.log(result); // Output the minimum number of moves
67 |   


--------------------------------------------------------------------------------
/Css-variables/app.js:
--------------------------------------------------------------------------------
 1 | const toggleBtn= document.querySelector('.btn')
 2 | const root=document.querySelector(':root')
 3 | const heading3= document.querySelector('.post h3')
 4 | toggleBtn.addEventListener('click',()=>{
 5 |     const rootStyles = getComputedStyle(root);
 6 |     const headingStyles= getComputedStyle(heading3).getPropertyValue('letter-spacing')
 7 |     console.log(headingStyles);
 8 |     const current = rootStyles.getPropertyValue('--clr-bcg');
 9 |     const colorValue = current === '#fff' ? '#282c35' : '#fff';
10 |     const fontValue = current === '#fff' ? '#fff' : '#282c35';
11 |     root.style.setProperty('--clr-bcg',colorValue)
12 |     root.style.setProperty('--clr-font',fontValue)
13 | 
14 | 
15 | })
16 | const variableHeading= document.querySelector('.post h3')
17 | const headingStyles= getComputedStyle(variableHeading).getPropertyValue('margin')
18 | console.log(headingStyles);


--------------------------------------------------------------------------------
/Css-variables/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Javascript Nuggets</title>
 7 |     <link rel="stylesheet" href="./main.css" />
 8 |   </head>
 9 |   <body>
10 |     <main>
11 |       <nav>
12 |         <div class="nav-center">
13 |           <h2>MyBlog</h2>
14 |           <button class="btn">toggle</button>
15 |         </div>
16 |       </nav>
17 |       <section class="articles">
18 |         <article class="post">
19 |           <h3>CSS Variables</h3>
20 |           <p class="date">Sunday 4th, 2020. 11 min read</p>
21 |           <p>
22 |             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam
23 |             dolores enim porro cupiditate molestias vitae sint libero quis illo
24 |             dignissimos...
25 |           </p>
26 |         </article>
27 |       </section>
28 |     </main>
29 |     <script src="./app.js"></script>
30 |   </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/Css-variables/main.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   --clr-bcg: #fff;
 3 |   --clr-font: #282c35;
 4 |   --clr-primary: #d23669;
 5 | }
 6 | 
 7 | .dark-theme {
 8 |   --clr-bcg: #282c35;
 9 |   --clr-font: #fff;
10 |   --clr-primary: #ffa7c4;
11 | }
12 | /* .light-theme {
13 |   --clr-bcg: #fff;
14 |   --clr-font: #282c35;
15 |   --clr-primary: #d23669;
16 | } */
17 | *,
18 | ::after,
19 | ::before {
20 |   margin: 0;
21 |   padding: 0;
22 |   box-sizing: border-box;
23 | }
24 | body {
25 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
26 |     Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
27 |   background: var(--clr-bcg);
28 |   color: var(--clr-font);
29 |   font-size: 0.875rem;
30 |   transition: all 0.3s linear;
31 | }
32 | 
33 | /*
34 | =============== 
35 | Navbar
36 | ===============
37 | */
38 | .nav-center {
39 |   width: 90vw;
40 |   max-width: 600px;
41 |   margin: 0 auto;
42 |   display: flex;
43 |   justify-content: space-between;
44 |   align-items: center;
45 |   padding: 2rem 0;
46 | }
47 | .nav-center h2 {
48 |   font-size: 2.5rem;
49 |   text-transform: capitalize;
50 |   letter-spacing: 2px;
51 |   margin-bottom: 0;
52 | }
53 | 
54 | .articles {
55 |   width: 90vw;
56 |   max-width: 600px;
57 |   margin: 0 auto;
58 |   margin-top: 2rem;
59 | }
60 | .post h3 {
61 |   color: var(--clr-primary);
62 |   text-transform: capitalize;
63 |   letter-spacing: 2px;
64 |   margin-bottom: 0.25rem;
65 | }
66 | .date {
67 |   margin-bottom: 0.75rem;
68 |   font-style: italic;
69 |   font-size: 0.75em;
70 | }
71 | 
72 | .btn {
73 |   background: var(--clr-primary);
74 |   color: var(--clr-bcg);
75 |   padding: 0.35rem 0.75rem;
76 |   border-radius: 5px;
77 |   border-color: transparent;
78 |   text-transform: capitalize;
79 |   transition: all 0.3s linear;
80 |   font-weight: bold;
81 |   letter-spacing: 2px;
82 |   cursor: pointer;
83 | }
84 | .btn:hover {
85 |   background: var(--clr-primary);
86 |   color: var(--clr-bcg);
87 | }
88 | 


--------------------------------------------------------------------------------
/Currying/app.js:
--------------------------------------------------------------------------------
 1 | //Currying is a transformation of functions that translates a function from callable as f(a, b, c) into callable as f(a)(b)(c).
 2 | 
 3 | function curry(r) {
 4 |     return function (a) {
 5 |         return function (b) {
 6 |             return r(a, b)
 7 |         }
 8 |     }
 9 | }
10 | function sum(a, b) {
11 |     return a + b
12 | }
13 | let curryingsum = curry(sum)
14 | console.log(curryingsum(12)(20))


--------------------------------------------------------------------------------
/Currying/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |     <script src="app.js"></script>
13 | </body>
14 | 
15 | </html>


--------------------------------------------------------------------------------
/Custom-video-Player/app.js:
--------------------------------------------------------------------------------
1 | console.log("hy there");


--------------------------------------------------------------------------------
/Custom-video-Player/asset/pexels.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Amir-ali-anwar/Javascript-nuggets/215e5e886ca7f6417552a3e2a4e6b55270e49fcd/Custom-video-Player/asset/pexels.mp4


--------------------------------------------------------------------------------
/Custom-video-Player/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Custom Video Player</title>
 8 |   </head>
 9 |   <script src="./app.js" defer></script>
10 |   <link rel="stylesheet" href="style.css" />
11 |   <body>
12 |     <div class="container">
13 |       <h1>Custom Video Player</h1>
14 |       <video id="video" src="./asset/pexels.mp4"></video>
15 |       <div class="controlCont">
16 |         <!-- Slider -->
17 |         <div class="sliderCont">
18 |           <input type="range" value="0" min="0" max="100" id="progress" />
19 |         </div>
20 |         <!-- Controls -->
21 |         <div class="control">
22 |           <div class="controlLeft">
23 |             <button id="play">
24 |               <ion-icon name="play"></ion-icon>
25 |             </button>
26 |             <button id="stop">
27 |               <ion-icon name="stop"></ion-icon>
28 |             </button>
29 |             <div class="time">
30 |               <p id="time">0:00 / 0:32</p>
31 |             </div>
32 |           </div>
33 |           <div class="controlRight">
34 |             <button>
35 |               <ion-icon name="settings"></ion-icon>
36 |             </button>
37 |             <button id="fullScreen">
38 |               <ion-icon name="expand"></ion-icon>
39 |             </button>
40 |           </div>
41 |         </div>
42 |       </div>
43 |     </div>
44 |     <script src="https://unpkg.com/ionicons@5.4.0/dist/ionicons.js"></script>
45 |   </body>
46 | </html>
47 | 


--------------------------------------------------------------------------------
/Custom-video-Player/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     padding: 0%;
  3 |     margin: 0%;
  4 |     -webkit-box-sizing: border-box;
  5 |             box-sizing: border-box;
  6 |     font-family: sans-serif;
  7 |   }
  8 |   
  9 |   body {
 10 |     background-color: aliceblue;
 11 |   }
 12 |   
 13 |   .container {
 14 |     width: 90%;
 15 |     display: -webkit-box;
 16 |     display: -ms-flexbox;
 17 |     display: flex;
 18 |     -webkit-box-align: center;
 19 |         -ms-flex-align: center;
 20 |             align-items: center;
 21 |     -webkit-box-pack: center;
 22 |         -ms-flex-pack: center;
 23 |             justify-content: center;
 24 |     -webkit-box-orient: vertical;
 25 |     -webkit-box-direction: normal;
 26 |         -ms-flex-direction: column;
 27 |             flex-direction: column;
 28 |     margin: 0 auto;
 29 |     position: relative;
 30 |     margin-top: 3rem;
 31 |     max-width: 610px;
 32 |   }
 33 |   
 34 |   .container video {
 35 |     width: 100%;
 36 |     margin-top: 2rem;
 37 |   }
 38 |   
 39 |   .container .controlCont {
 40 |     position: absolute;
 41 |     bottom: 0%;
 42 |     display: -webkit-box;
 43 |     display: -ms-flexbox;
 44 |     display: flex;
 45 |     -webkit-box-align: center;
 46 |         -ms-flex-align: center;
 47 |             align-items: center;
 48 |     -webkit-box-pack: center;
 49 |         -ms-flex-pack: center;
 50 |             justify-content: center;
 51 |     -webkit-box-orient: vertical;
 52 |     -webkit-box-direction: normal;
 53 |         -ms-flex-direction: column;
 54 |             flex-direction: column;
 55 |     width: 100%;
 56 |     padding: 0.5rem 0.7rem;
 57 |     opacity: 0;
 58 |     -webkit-transition: 0.3s ease opacity;
 59 |     transition: 0.3s ease opacity;
 60 |   }
 61 |   
 62 |   .container .controlCont .sliderCont {
 63 |     width: 100%;
 64 |   }
 65 |   
 66 |   .container .controlCont .sliderCont input {
 67 |     width: 100%;
 68 |     cursor: pointer;
 69 |   }
 70 |   
 71 |   .container .controlCont .sliderCont input {
 72 |     -webkit-appearance: none;
 73 |        -moz-appearance: none;
 74 |             appearance: none;
 75 |     background-color: rgba(255, 255, 255, 0.5);
 76 |     height: 4px;
 77 |     outline: none;
 78 |     background: -webkit-gradient(linear, left top, right top, from(#f00), color-stop(0%, #f00), color-stop(0%, rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0.5)));
 79 |     background: linear-gradient(to right, #f00 0%, #f00 0%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
 80 |   }
 81 |   
 82 |   .container .controlCont .sliderCont input::-webkit-slider-thumb {
 83 |     -webkit-appearance: none;
 84 |             appearance: none;
 85 |     height: 4px;
 86 |     width: 4px;
 87 |     background-color: #f00;
 88 |     border: none;
 89 |     outline: none;
 90 |     border-radius: 0;
 91 |     -webkit-transition: 0.3s ease;
 92 |     transition: 0.3s ease;
 93 |     border-radius: 50%;
 94 |     -webkit-transition-property: height, width;
 95 |     transition-property: height, width;
 96 |   }
 97 |   
 98 |   .container .controlCont .sliderCont input::-moz-range-thumb {
 99 |     -moz-appearance: none;
100 |          appearance: none;
101 |     height: 4px;
102 |     width: 4px;
103 |     background-color: #f00;
104 |     background-color: #f00;
105 |     border: none;
106 |     outline: none;
107 |     border-radius: 0;
108 |     -webkit-transition: 0.3s ease;
109 |     transition: 0.3s ease;
110 |     border-radius: 50%;
111 |     -webkit-transition-property: height, width;
112 |     transition-property: height, width;
113 |   }
114 |   
115 |   .container .controlCont .sliderCont input::-moz-range-progress {
116 |     -moz-appearance: none;
117 |          appearance: none;
118 |     background-color: #f00;
119 |     height: 100%;
120 |   }
121 |   
122 |   .container .controlCont .sliderCont input:hover::-webkit-slider-thumb {
123 |     height: 12px;
124 |     width: 12px;
125 |     border-radius: 50%;
126 |   }
127 |   
128 |   .container .controlCont .sliderCont input:hover::-moz-range-thumb {
129 |     height: 12px;
130 |     width: 12px;
131 |     border-radius: 50%;
132 |   }
133 |   
134 |   .container .controlCont .control {
135 |     display: -webkit-box;
136 |     display: -ms-flexbox;
137 |     display: flex;
138 |     -webkit-box-align: center;
139 |         -ms-flex-align: center;
140 |             align-items: center;
141 |     -webkit-box-pack: justify;
142 |         -ms-flex-pack: justify;
143 |             justify-content: space-between;
144 |     width: 100%;
145 |     margin-top: 0.2rem;
146 |   }
147 |   
148 |   .container .controlCont .control .controlLeft {
149 |     display: -webkit-box;
150 |     display: -ms-flexbox;
151 |     display: flex;
152 |     -webkit-box-align: center;
153 |         -ms-flex-align: center;
154 |             align-items: center;
155 |     -webkit-box-pack: center;
156 |         -ms-flex-pack: center;
157 |             justify-content: center;
158 |   }
159 |   
160 |   .container .controlCont .control .controlLeft .time {
161 |     margin-left: 0.5rem;
162 |   }
163 |   
164 |   .container .controlCont .control .controlLeft .time p {
165 |     color: #f4f4f4;
166 |   }
167 |   
168 |   .container .controlCont .control .controlRight {
169 |     display: -webkit-box;
170 |     display: -ms-flexbox;
171 |     display: flex;
172 |     -webkit-box-align: center;
173 |         -ms-flex-align: center;
174 |             align-items: center;
175 |     -webkit-box-pack: center;
176 |         -ms-flex-pack: center;
177 |             justify-content: center;
178 |   }
179 |   
180 |   .container .controlCont .control button {
181 |     border: none;
182 |     outline: none;
183 |     background-color: transparent;
184 |     font-size: 1.4rem;
185 |     color: #f4f4f4;
186 |     cursor: pointer;
187 |     margin: 0 4px;
188 |     display: -webkit-box;
189 |     display: -ms-flexbox;
190 |     display: flex;
191 |     -webkit-box-align: center;
192 |         -ms-flex-align: center;
193 |             align-items: center;
194 |     -webkit-box-pack: center;
195 |         -ms-flex-pack: center;
196 |             justify-content: center;
197 |     padding: 0.4rem;
198 |     border-radius: 50%;
199 |   }
200 |   
201 |   .container .controlCont .control button:hover {
202 |     background-color: rgba(255, 255, 255, 0.2);
203 |   }
204 |   
205 |   .container .controlCont:hover {
206 |     opacity: 1;
207 |   }
208 |   /*# sourceMappingURL=style.css.map */


--------------------------------------------------------------------------------
/Dynamic-Values/app.js:
--------------------------------------------------------------------------------
 1 | const person ={
 2 |     name:'amir',
 3 |     state:'pakistan'
 4 | }
 5 | console.log(person)
 6 | 
 7 | let newapp='job-portal'
 8 | const app={
 9 |     [newapp]:true
10 | }
11 | console.log(app);
12 | 
13 | const state={
14 |     loading:true,
15 |     name:"amir",
16 |     job:'developer'
17 | }
18 | const updateState=(key='',value='')=>{
19 |     state[key]= value
20 | }
21 | updateState('food',['banna','apple'])
22 | updateState('loading','false')
23 | updateState('name','Amir Ali Anwar')
24 | 
25 | console.log(state);


--------------------------------------------------------------------------------
/Dynamic-Values/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Javascript Dynamic values</title>
 8 | </head>
 9 | <body>
10 |     <script src="app.js"></script>
11 | </body>
12 | </html>


--------------------------------------------------------------------------------
/Event-bubbling/Example-1/app.js:
--------------------------------------------------------------------------------
1 | const parent = document.querySelector('.child');
2 | parent.addEventListener('click', function(event) {
3 |     console.log('Clicked on child element');
4 |     event.stopPropagation()
5 |   })


--------------------------------------------------------------------------------
/Event-bubbling/Example-1/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Event bubbling</title>
 8 |     <style>
 9 |         .parent{
10 |             width:400px;
11 |             height:400px;
12 |             border:1px solid red;
13 |             margin: 0 auto;
14 |         }
15 |         .child{
16 |             width:200px;
17 |             height:200px;
18 |             margin: 30px;
19 |             border:2px solid pink;
20 |         }
21 |     </style>
22 | </head>
23 | <body>
24 |     <div class="parent">
25 |         Parent
26 |         <div class="child">Child</div>
27 |       </div>
28 |       <script src="app.js"></script>
29 | </body>
30 | </html>


--------------------------------------------------------------------------------
/Event-bubbling/Example-2/app.js:
--------------------------------------------------------------------------------
 1 | // Event Bubbling :
 2 | // Event Bubbling is a concept in the DOM (Document Object Model). 
 3 | //it happens when an element receives an event, and that event bubbles up (or you can say is transmitted or propagated) 
 4 | //to its parent and ancestor elements in the DOM tree until it gets to the root element.
 5 | // Event bubbing can be stopped by stopPropagation() that JavaScript provides
 6 | const body = document.getElementsByTagName("body")[0]
 7 | const div = document.getElementsByTagName("div")[0]
 8 | const span = document.getElementsByTagName("span")[0]
 9 | const button = document.getElementsByTagName("button")[0]
10 | 
11 | body.addEventListener('click', () => {
12 |     console.log("body was clicked")
13 |   })
14 |   
15 |   div.addEventListener('click', () => {
16 |     console.log("div was clicked")
17 |   })
18 |   
19 |   span.addEventListener('click', () => {
20 |     console.log("span was clicked")
21 |   })
22 |   
23 |   button.addEventListener('click', (event) => {
24 |     event.stopPropagation()
25 |     console.log("button was clicked")
26 |   })


--------------------------------------------------------------------------------
/Event-bubbling/Example-2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <title>Event bubbling</title>
 9 |     <style>
10 |        
11 |     </style>
12 | </head>
13 | <body>
14 |     <div>
15 |         <span>
16 |           <button>Click Me!</button>
17 |         </span>
18 |       </div>
19 |       <script src="app.js"></script>
20 | </body>
21 | </html>


--------------------------------------------------------------------------------
/Event-bubbling/Example-2/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     padding: 20px;
 3 |     background-color: pink;
 4 |   }
 5 |   
 6 |   div {
 7 |     padding: 20px;
 8 |     background-color: green;
 9 |     width: max-content;
10 |   }
11 |   
12 |   span {
13 |     display: block;
14 |     padding: 20px;
15 |     background-color: blue;
16 |   }
17 |   


--------------------------------------------------------------------------------
/Every/app.js:
--------------------------------------------------------------------------------
 1 | //This funtion methods executes a function for each array eleemnt
 2 | //function returns True if the function returns true of all elements
 3 | //function returns False if the function returns true of all elements
 4 | // method dones not executes for empty values
 5 | //does not change the array of origional array
 6 | const myfriends = [
 7 |     { name: 'Mamoon', age: 25, position: 'Senior Full stack', salary: 1000 },
 8 |     { name: 'Mubahsar', age: 26, position: 'developer', salary: 100 },
 9 |     { name: 'Babar', age: 25, position: 'SQA', salary: 6000 },
10 |     { name: 'Haroon', age: 24, position: 'SQA', salary: 400 },
11 |     { name: 'Amir', age: 25, position: 'Full stack', salary: 50 },
12 | ];
13 | let result= myfriends.every((friend)=>friend.age>40)
14 | console.log(result)
15 | 


--------------------------------------------------------------------------------
/Every/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Javascript Evey Method</title>
 8 | </head>
 9 | <body>
10 |     <script src="index.js"></script>
11 | </body>
12 | </html>


--------------------------------------------------------------------------------
/Filter/app.js:
--------------------------------------------------------------------------------
 1 | //iterates over an array
 2 | //return new array after the complete iteration]
 3 | //does not iterates over the array with empty elements
 4 | //filter method does not change the origional array
 5 | //return empty array when not condition meets
 6 | 
 7 | const foodItems= ['milk','water','sugar','jam'];
 8 | let Istrue= foodItems.filter((item)=>{
 9 |     return item==='meat'
10 | })
11 | console.log(Istrue)
12 | 
13 |  const isAvailable= foodItems.filter((item)=>{
14 |     return item==='milk'
15 | })
16 | console.log(isAvailable)


--------------------------------------------------------------------------------
/Filter/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Javascript Filter Method</title>
 8 | </head>
 9 | <body>
10 |     <script src="index.js"></script>
11 | </body>
12 | </html>


--------------------------------------------------------------------------------
/Find/app.js:
--------------------------------------------------------------------------------
 1 | //  returns a single value, always returns a single ,if no match found return undefined
 2 | 
 3 | const myfriends = [
 4 |     { name: 'Mamoon', age: 25, position: 'Senior Full stack', salary: 1000 },
 5 |     { name: 'Mubahsar', age: 26, position: 'developer', salary: 100 },
 6 |     { name: 'Babar', age: 25, position: 'SQA', salary: 6000 },
 7 |     { name: 'Haroon', age: 24, position: 'SQA', salary: 400 },
 8 |     { name: 'Amir', age: 25, position: 'Full stack', salary: 50 },
 9 | ];
10 | 
11 | let isAvailable= myfriends.find((friend)=>friend.name==='Mamoon')
12 | console.log(isAvailable)
13 | 
14 |  isAvailable= myfriends.find((friend)=>friend.name==='unce tom')
15 | console.log(isAvailable)


--------------------------------------------------------------------------------
/Find/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Javascript Find Method</title>
 9 | </head>
10 | 
11 | <body>
12 |     <script src="app.js"></script>
13 | </body>
14 | 
15 | </html>


--------------------------------------------------------------------------------
/ForOf/ForIn/app.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Amir-ali-anwar/Javascript-nuggets/215e5e886ca7f6417552a3e2a4e6b55270e49fcd/ForOf/ForIn/app.js


--------------------------------------------------------------------------------
/ForOf/ForIn/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Forof /Forin loop in javascript</title>
 9 | </head>
10 | 
11 | <body>
12 | <script src="app.js"></script>
13 | </body>
14 | 
15 | </html>


--------------------------------------------------------------------------------
/Form-Enteries/app.js:
--------------------------------------------------------------------------------
 1 | let form = document.querySelector('.form');
 2 | form?.addEventListener('submit', (e) => {
 3 |   e.preventDefault();
 4 |   const formData = [... new FormData(e.currentTarget).values()];
 5 |   console.log(formData);
 6 |   if (formData.includes('')) {
 7 |     showError("Please enter all the values")
 8 |     throw new Error("Please enter all the values")
 9 |   }
10 |   const formObject = Object.fromEntries(formData)
11 |   let values = []
12 |   for (const [key, value] of formObject) {
13 |     values.push(`${key}: ${value}`);
14 |   }
15 |   const message = values.join('\n');
16 |   showSuccess({message})
17 |   currentTarget.reset();
18 | });
19 | function showError(msg) {
20 |   Swal.fire({
21 |     icon: 'error',
22 |     title: 'Oops...',
23 |     text: msg,
24 |   })
25 | }
26 | 
27 | function showSuccess(msg) {
28 |   Swal.fire({
29 |     icon: 'Success',
30 |     title: 'Your form Values',
31 |     text: msg,
32 |   })
33 | }
34 | 
35 | 
36 | // Object.fromEntries() 
37 | 
38 | //The fromEntries() method creates an object from iterable key / value pairs.
39 | 
40 | //1.Converting an Array of Key-Value Pairs to an Object
41 | const fruits = [
42 |   ["apples", 300],
43 |   ["pears", 900],
44 |   ["bananas", 500]
45 |   ];
46 | 
47 |   
48 | const myObj= Object.fromEntries(fruits)
49 | console.log({myObj});
50 | 
51 | //2.Converting a Map to an Object
52 | 
53 | const map = new Map([
54 |   ['name', 'Alice'],
55 |   ['age', 30],
56 |   ['city', 'New York']
57 | ]);
58 | const obj = Object.fromEntries(map);
59 | console.log({obj});
60 | 
61 | //3.Filtering and Modifying Entries Before Converting Back


--------------------------------------------------------------------------------
/Form-Enteries/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8" />
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |   <title>Javascript Nuggets</title>
 8 |   <link rel="stylesheet" href="./style.css" />
 9 | </head>
10 | 
11 | <body>
12 |   <form class="form">
13 |     <h4>formData API </h4>
14 |     <!-- name -->
15 |     <div class="form-row">
16 |       <label class="form-label" for="name">name</label>
17 |       <input type="text" name="name" id="name" class="form-input name-input" />
18 |     </div>
19 |     <!-- email -->
20 |     <div class="form-row">
21 |       <label class="form-label" for="email">email</label>
22 |       <input type="email" name="email" id="email" class="form-input email-input" />
23 |     </div>
24 |     <!-- password -->
25 |     <div class="form-row">
26 |       <label class="form-label" for="password">password</label>
27 |       <input type="password" name="password" id="password" class="form-input password-input" />
28 |     </div>
29 |     <button type="submit" class="btn btn-block">register</button>
30 |   </form>
31 |   <script src="./app.js"></script>
32 |   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
33 | </body>
34 | 
35 | </html>


--------------------------------------------------------------------------------
/Form-Enteries/style.css:
--------------------------------------------------------------------------------
  1 | *,
  2 | ::after,
  3 | ::before {
  4 |   box-sizing: border-box;
  5 |   margin: 0;
  6 |   padding: 0;
  7 | }
  8 | /* fonts */
  9 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600&family=Montserrat&display=swap');
 10 | 
 11 | html {
 12 |   font-size: 100%;
 13 | } /*16px*/
 14 | 
 15 | :root {
 16 |   /* colors */
 17 |   --primary-100: #e2e0ff;
 18 |   --primary-200: #c1beff;
 19 |   --primary-300: #a29dff;
 20 |   --primary-400: #837dff;
 21 |   --primary-500: #645cff;
 22 |   --primary-600: #504acc;
 23 |   --primary-700: #3c3799;
 24 |   --primary-800: #282566;
 25 |   --primary-900: #141233;
 26 | 
 27 |   /* grey */
 28 |   --grey-50: #f8fafc;
 29 |   --grey-100: #f1f5f9;
 30 |   --grey-200: #e2e8f0;
 31 |   --grey-300: #cbd5e1;
 32 |   --grey-400: #94a3b8;
 33 |   --grey-500: #64748b;
 34 |   --grey-600: #475569;
 35 |   --grey-700: #334155;
 36 |   --grey-800: #1e293b;
 37 |   --grey-900: #0f172a;
 38 |   /* rest of the colors */
 39 |   --black: #222;
 40 |   --white: #fff;
 41 |   --red-light: #f8d7da;
 42 |   --red-dark: #842029;
 43 |   --green-light: #d1e7dd;
 44 |   --green-dark: #0f5132;
 45 | 
 46 |   /* fonts  */
 47 |   --headingFont: 'Roboto', sans-serif;
 48 |   --bodyFont: 'Nunito', sans-serif;
 49 |   --small-text: 0.875rem;
 50 |   --extra-small-text: 0.7em;
 51 |   /* rest of the vars */
 52 |   --backgroundColor: var(--grey-50);
 53 |   --textColor: var(--grey-900);
 54 |   --borderRadius: 0.25rem;
 55 |   --letterSpacing: 1px;
 56 |   --transition: 0.3s ease-in-out all;
 57 |   --max-width: 1120px;
 58 |   --fixed-width: 600px;
 59 | 
 60 |   /* box shadow*/
 61 |   --shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
 62 |   --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
 63 |     0 2px 4px -1px rgba(0, 0, 0, 0.06);
 64 |   --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
 65 |     0 4px 6px -2px rgba(0, 0, 0, 0.05);
 66 |   --shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
 67 |     0 10px 10px -5px rgba(0, 0, 0, 0.04);
 68 | }
 69 | 
 70 | body {
 71 |   background: var(--backgroundColor);
 72 |   font-family: var(--bodyFont);
 73 |   font-weight: 400;
 74 |   line-height: 1.75;
 75 |   color: var(--textColor);
 76 | }
 77 | 
 78 | p {
 79 |   margin-bottom: 1.5rem;
 80 |   max-width: 40em;
 81 | }
 82 | 
 83 | h1,
 84 | h2,
 85 | h3,
 86 | h4,
 87 | h5 {
 88 |   margin: 0;
 89 |   margin-bottom: 1.38rem;
 90 |   font-family: var(--headingFont);
 91 |   font-weight: 400;
 92 |   line-height: 1.3;
 93 |   text-transform: capitalize;
 94 |   letter-spacing: var(--letterSpacing);
 95 | }
 96 | 
 97 | h1 {
 98 |   margin-top: 0;
 99 |   font-size: 3.052rem;
100 | }
101 | 
102 | h2 {
103 |   font-size: 2.441rem;
104 | }
105 | 
106 | h3 {
107 |   font-size: 1.953rem;
108 | }
109 | 
110 | h4 {
111 |   font-size: 1.563rem;
112 | }
113 | 
114 | h5 {
115 |   font-size: 1.25rem;
116 | }
117 | 
118 | small,
119 | .text-small {
120 |   font-size: var(--small-text);
121 | }
122 | 
123 | a {
124 |   text-decoration: none;
125 | }
126 | ul {
127 |   list-style-type: none;
128 |   padding: 0;
129 | }
130 | 
131 | .img {
132 |   width: 100%;
133 |   display: block;
134 |   object-fit: cover;
135 | }
136 | /* buttons */
137 | 
138 | .btn {
139 |   cursor: pointer;
140 |   color: var(--white);
141 |   background: var(--primary-500);
142 |   border: transparent;
143 |   border-radius: var(--borderRadius);
144 |   letter-spacing: var(--letterSpacing);
145 |   padding: 0.375rem 0.75rem;
146 |   box-shadow: var(--shadow-1);
147 |   transition: var(--transition);
148 |   text-transform: capitalize;
149 |   display: inline-block;
150 | }
151 | .btn:hover {
152 |   background: var(--primary-700);
153 |   box-shadow: var(--shadow-3);
154 | }
155 | .btn-hipster {
156 |   color: var(--primary-500);
157 |   background: var(--primary-200);
158 | }
159 | .btn-hipster:hover {
160 |   color: var(--primary-200);
161 |   background: var(--primary-700);
162 | }
163 | .btn-block {
164 |   width: 100%;
165 | }
166 | 
167 | /* alerts */
168 | .alert {
169 |   padding: 0.375rem 0.75rem;
170 |   margin-bottom: 1rem;
171 |   border-color: transparent;
172 |   border-radius: var(--borderRadius);
173 | }
174 | 
175 | .alert-danger {
176 |   color: var(--red-dark);
177 |   background: var(--red-light);
178 | }
179 | .alert-success {
180 |   color: var(--green-dark);
181 |   background: var(--green-light);
182 | }
183 | /* form */
184 | 
185 | .form {
186 |   width: 90vw;
187 |   max-width: var(--fixed-width);
188 |   background: var(--white);
189 |   border-radius: var(--borderRadius);
190 |   box-shadow: var(--shadow-2);
191 |   padding: 2rem 2.5rem;
192 |   margin: 3rem auto;
193 | }
194 | .form-label {
195 |   display: block;
196 |   font-size: var(--small-text);
197 |   margin-bottom: 0.5rem;
198 |   text-transform: capitalize;
199 |   letter-spacing: var(--letterSpacing);
200 | }
201 | .form-input,
202 | .form-textarea {
203 |   width: 100%;
204 |   padding: 0.375rem 0.75rem;
205 |   border-radius: var(--borderRadius);
206 |   background: var(--backgroundColor);
207 |   border: 1px solid var(--grey-200);
208 | }
209 | 
210 | .form-row {
211 |   margin-bottom: 1rem;
212 | }
213 | 
214 | .form-textarea {
215 |   height: 7rem;
216 | }
217 | ::placeholder {
218 |   font-family: inherit;
219 |   color: var(--grey-400);
220 | }
221 | .form-alert {
222 |   color: var(--red-dark);
223 |   letter-spacing: var(--letterSpacing);
224 |   text-transform: capitalize;
225 | }
226 | /* alert */
227 | 
228 | @keyframes spinner {
229 |   to {
230 |     transform: rotate(360deg);
231 |   }
232 | }
233 | 
234 | .loading {
235 |   width: 6rem;
236 |   height: 6rem;
237 |   border: 5px solid var(--grey-400);
238 |   border-radius: 50%;
239 |   border-top-color: var(--primary-500);
240 |   animation: spinner 0.6s linear infinite;
241 | }
242 | .loading {
243 |   margin: 0 auto;
244 | }
245 | /* title */
246 | 
247 | .title {
248 |   text-align: center;
249 | }
250 | 
251 | .title-underline {
252 |   background: var(--primary-500);
253 |   width: 7rem;
254 |   height: 0.25rem;
255 |   margin: 0 auto;
256 |   margin-top: -1rem;
257 | }
258 | 
259 | .form h4 {
260 |   text-align: center;
261 | }
262 | .form button {
263 |   margin-top: 0.5rem;
264 | }
265 | 


--------------------------------------------------------------------------------
/FormData/app.js:
--------------------------------------------------------------------------------
 1 | //target =>refers to the element where clicked
 2 | // currentTarget => referes to the  element where the listner is added
 3 | let isSubmitted = false;
 4 | let error=""
 5 | const form = document.querySelector('.form');
 6 | const formValues = document.querySelector('#form-data');
 7 | form.addEventListener('submit', (e) => {
 8 |   e.preventDefault();
 9 |   isSubmitted=true;
10 |   const formData = new FormData(e.currentTarget);
11 |   const formObject = Object.fromEntries(formData);
12 |   if (!formObject.name) {
13 |     error= "Please enter Name"
14 |     console.log('Please enter Name')
15 |   }
16 |   if (!formObject.email) {
17 |     error= "Please enter Email"
18 |     console.log('Please enter Email')
19 |     if(formObject.email){
20 |       if(!isValidEmail(formObject.email)){
21 |         console.log('Please enter a valid email address')
22 |         // alert('Please enter a valid email address');
23 |       }
24 |     }
25 |   }
26 |   if (!formObject.password) {
27 |     error= "Please enter Password"
28 |     console.log('Please enter Password')
29 |   }
30 |   e.currentTarget.reset();
31 | })
32 | 
33 | if (isSubmitted) {
34 |   formValues.style.display = 'block'
35 | } else {
36 |   formValues.style.display = 'none'
37 | }
38 | 
39 | 
40 | function isValidEmail(email) {
41 |   const emailRegex = /^\S+@\S+\.\S+$/;
42 |   return emailRegex.test(email);
43 | }
44 | 
45 | 


--------------------------------------------------------------------------------
/FormData/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <title>Form data</title>
 9 | </head>
10 | <body>
11 |     <form class="form">
12 |         <h4>formData API</h4>
13 |         <!-- name -->
14 |         <div class="form-row">
15 |           <label class="form-label" for="name">name</label>
16 |           <input
17 |             type="text"
18 |             name="name"
19 |             id="name"
20 |             class="form-input name-input"
21 |           />
22 |         </div>
23 |         <!-- email -->
24 |         <div class="form-row">
25 |           <label class="form-label" for="email">email</label>
26 |           <input
27 |             name="email"
28 |             id="email"
29 |             class="form-input email-input"
30 |           />
31 |         </div>
32 |         <!-- password -->
33 |         <div class="form-row">
34 |           <label class="form-label" for="password">password</label>
35 |           <input
36 |             type="password"
37 |             name="password"
38 |             id="password"
39 |             class="form-input password-input"
40 |           />
41 |         </div>
42 |        
43 |         <button type="submit" class="btn btn-block">register</button>
44 |       </form>
45 |       <div class="form" id="form-data">
46 |           
47 |       </div>
48 |     <script src="app.js"></script>
49 | </body>
50 | </html>


--------------------------------------------------------------------------------
/FormData/style.css:
--------------------------------------------------------------------------------
  1 | *,
  2 | ::after,
  3 | ::before {
  4 |   box-sizing: border-box;
  5 |   margin: 0;
  6 |   padding: 0;
  7 | }
  8 | /* fonts */
  9 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600&family=Montserrat&display=swap');
 10 | 
 11 | html {
 12 |   font-size: 100%;
 13 | } /*16px*/
 14 | 
 15 | :root {
 16 |   /* colors */
 17 |   --primary-100: #e2e0ff;
 18 |   --primary-200: #c1beff;
 19 |   --primary-300: #a29dff;
 20 |   --primary-400: #837dff;
 21 |   --primary-500: #645cff;
 22 |   --primary-600: #504acc;
 23 |   --primary-700: #3c3799;
 24 |   --primary-800: #282566;
 25 |   --primary-900: #141233;
 26 | 
 27 |   /* grey */
 28 |   --grey-50: #f8fafc;
 29 |   --grey-100: #f1f5f9;
 30 |   --grey-200: #e2e8f0;
 31 |   --grey-300: #cbd5e1;
 32 |   --grey-400: #94a3b8;
 33 |   --grey-500: #64748b;
 34 |   --grey-600: #475569;
 35 |   --grey-700: #334155;
 36 |   --grey-800: #1e293b;
 37 |   --grey-900: #0f172a;
 38 |   /* rest of the colors */
 39 |   --black: #222;
 40 |   --white: #fff;
 41 |   --red-light: #f8d7da;
 42 |   --red-dark: #842029;
 43 |   --green-light: #d1e7dd;
 44 |   --green-dark: #0f5132;
 45 | 
 46 |   /* fonts  */
 47 |   --headingFont: 'Roboto', sans-serif;
 48 |   --bodyFont: 'Nunito', sans-serif;
 49 |   --small-text: 0.875rem;
 50 |   --extra-small-text: 0.7em;
 51 |   /* rest of the vars */
 52 |   --backgroundColor: var(--grey-50);
 53 |   --textColor: var(--grey-900);
 54 |   --borderRadius: 0.25rem;
 55 |   --letterSpacing: 1px;
 56 |   --transition: 0.3s ease-in-out all;
 57 |   --max-width: 1120px;
 58 |   --fixed-width: 600px;
 59 | 
 60 |   /* box shadow*/
 61 |   --shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
 62 |   --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
 63 |     0 2px 4px -1px rgba(0, 0, 0, 0.06);
 64 |   --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
 65 |     0 4px 6px -2px rgba(0, 0, 0, 0.05);
 66 |   --shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
 67 |     0 10px 10px -5px rgba(0, 0, 0, 0.04);
 68 | }
 69 | 
 70 | body {
 71 |   background: var(--backgroundColor);
 72 |   font-family: var(--bodyFont);
 73 |   font-weight: 400;
 74 |   line-height: 1.75;
 75 |   color: var(--textColor);
 76 | }
 77 | 
 78 | p {
 79 |   margin-bottom: 1.5rem;
 80 |   max-width: 40em;
 81 | }
 82 | 
 83 | h1,
 84 | h2,
 85 | h3,
 86 | h4,
 87 | h5 {
 88 |   margin: 0;
 89 |   margin-bottom: 1.38rem;
 90 |   font-family: var(--headingFont);
 91 |   font-weight: 400;
 92 |   line-height: 1.3;
 93 |   text-transform: capitalize;
 94 |   letter-spacing: var(--letterSpacing);
 95 | }
 96 | 
 97 | h1 {
 98 |   margin-top: 0;
 99 |   font-size: 3.052rem;
100 | }
101 | 
102 | h2 {
103 |   font-size: 2.441rem;
104 | }
105 | 
106 | h3 {
107 |   font-size: 1.953rem;
108 | }
109 | 
110 | h4 {
111 |   font-size: 1.563rem;
112 | }
113 | 
114 | h5 {
115 |   font-size: 1.25rem;
116 | }
117 | 
118 | small,
119 | .text-small {
120 |   font-size: var(--small-text);
121 | }
122 | 
123 | a {
124 |   text-decoration: none;
125 | }
126 | ul {
127 |   list-style-type: none;
128 |   padding: 0;
129 | }
130 | 
131 | .img {
132 |   width: 100%;
133 |   display: block;
134 |   object-fit: cover;
135 | }
136 | /* buttons */
137 | 
138 | .btn {
139 |   cursor: pointer;
140 |   color: var(--white);
141 |   background: var(--primary-500);
142 |   border: transparent;
143 |   border-radius: var(--borderRadius);
144 |   letter-spacing: var(--letterSpacing);
145 |   padding: 0.375rem 0.75rem;
146 |   box-shadow: var(--shadow-1);
147 |   transition: var(--transition);
148 |   text-transform: capitalize;
149 |   display: inline-block;
150 | }
151 | .btn:hover {
152 |   background: var(--primary-700);
153 |   box-shadow: var(--shadow-3);
154 | }
155 | .btn-hipster {
156 |   color: var(--primary-500);
157 |   background: var(--primary-200);
158 | }
159 | .btn-hipster:hover {
160 |   color: var(--primary-200);
161 |   background: var(--primary-700);
162 | }
163 | .btn-block {
164 |   width: 100%;
165 | }
166 | 
167 | /* alerts */
168 | .alert {
169 |   padding: 0.375rem 0.75rem;
170 |   margin-bottom: 1rem;
171 |   border-color: transparent;
172 |   border-radius: var(--borderRadius);
173 | }
174 | 
175 | .alert-danger {
176 |   color: var(--red-dark);
177 |   background: var(--red-light);
178 | }
179 | .alert-success {
180 |   color: var(--green-dark);
181 |   background: var(--green-light);
182 | }
183 | /* form */
184 | 
185 | .form {
186 |   width: 90vw;
187 |   max-width: var(--fixed-width);
188 |   background: var(--white);
189 |   border-radius: var(--borderRadius);
190 |   box-shadow: var(--shadow-2);
191 |   padding: 2rem 2.5rem;
192 |   margin: 3rem auto;
193 | }
194 | .form-label {
195 |   display: block;
196 |   font-size: var(--small-text);
197 |   margin-bottom: 0.5rem;
198 |   text-transform: capitalize;
199 |   letter-spacing: var(--letterSpacing);
200 | }
201 | .form-input,
202 | .form-textarea {
203 |   width: 100%;
204 |   padding: 0.375rem 0.75rem;
205 |   border-radius: var(--borderRadius);
206 |   background: var(--backgroundColor);
207 |   border: 1px solid var(--grey-200);
208 | }
209 | 
210 | .form-row {
211 |   margin-bottom: 1rem;
212 | }
213 | 
214 | .form-textarea {
215 |   height: 7rem;
216 | }
217 | ::placeholder {
218 |   font-family: inherit;
219 |   color: var(--grey-400);
220 | }
221 | .form-alert {
222 |   color: var(--red-dark);
223 |   letter-spacing: var(--letterSpacing);
224 |   text-transform: capitalize;
225 | }
226 | /* alert */
227 | 
228 | @keyframes spinner {
229 |   to {
230 |     transform: rotate(360deg);
231 |   }
232 | }
233 | 
234 | .loading {
235 |   width: 6rem;
236 |   height: 6rem;
237 |   border: 5px solid var(--grey-400);
238 |   border-radius: 50%;
239 |   border-top-color: var(--primary-500);
240 |   animation: spinner 0.6s linear infinite;
241 | }
242 | .loading {
243 |   margin: 0 auto;
244 | }
245 | /* title */
246 | 
247 | .title {
248 |   text-align: center;
249 | }
250 | 
251 | .title-underline {
252 |   background: var(--primary-500);
253 |   width: 7rem;
254 |   height: 0.25rem;
255 |   margin: 0 auto;
256 |   margin-top: -1rem;
257 | }
258 | 
259 | .form h4 {
260 |   text-align: center;
261 | }
262 | .form button {
263 |   margin-top: 0.5rem;
264 | }


--------------------------------------------------------------------------------
/Functions/index.js:
--------------------------------------------------------------------------------
 1 | function add(a, b) {
 2 |     if (new.target) {
 3 |         return 'The add function cannot be called as a constructor';
 4 |     }
 5 |     return a + b
 6 | }
 7 | console.log(add.length);
 8 | console.log(add.prototype);
 9 | 
10 | let result = new add(10, 30)
11 | console.log(result);
12 | 
13 | 
14 | // closure
15 | 
16 | function outer() {
17 |     this.value = 42;
18 |     function inner() {
19 |         console.log(this.value);
20 |         return this.value
21 |     }
22 |     return inner()
23 | }
24 |   
25 |   const closureFunc = outer();
26 |   console.log(closureFunc);
27 | //   closureFunc(); // Outputs: undefined (or an error in strict mode)
28 |   


--------------------------------------------------------------------------------
/GeneratorFunctions/app.js:
--------------------------------------------------------------------------------
 1 | // A generator function in JavaScript is a special type of function that can be paused and resumed during its execution.
 2 | //It is defined using the function* syntax, and it returns a generator object which conforms to both the iterable and iterator protocols.
 3 | // The yield keyword is used to pause the function and return a value.
 4 | // When the generator's next() method is called, it resumes execution until it either hits another yield statement or completes.
 5 | 
 6 | function* generatorFuntion() {
 7 |   yield "First output";
 8 |   yield "Second Output";
 9 |   yield "Third Output";
10 | }
11 | 
12 | const gen = generatorFuntion();
13 | console.log(gen.next());
14 | console.log(gen.next());
15 | console.log(gen.next());
16 | console.log(gen.next());
17 | 
18 | // Second Example
19 | 
20 | function* RangeGenerator(start, end) {
21 |     for (let i = start; i <= end; i++) {
22 |       yield i;
23 |     }
24 |   }
25 |   
26 |   const range = RangeGenerator(1, 10);
27 |   for (const rangeNumber of range) {
28 |     console.log({ rangeNumber });
29 |   }
30 |   
31 | 
32 |  // . Delegating Generators:
33 | 
34 | //  A generator can delegate to another generator using yield*.
35 | 
36 | function* innerGenerator(){
37 |   yield 'Hello',
38 |   yield 'from'
39 | }
40 | 
41 | function* outerGenerator(){
42 |   yield* innerGenerator()
43 |   yield 'the outside!';
44 | }
45 | 
46 | const gen1 = outerGenerator();
47 | console.log(gen1.next());
48 | console.log(gen1.next());
49 | console.log(gen1.next());
50 | 
51 | 


--------------------------------------------------------------------------------
/GeneratorFunctions/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Generator function</title>
 7 | </head>
 8 | <body>
 9 |     
10 | 
11 | 
12 |     <script src="app.js"></script>
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/High-Order-Functions/app.js:
--------------------------------------------------------------------------------
 1 | // passing function as a parameter to the another is called callback, and the function that is receving the function as a paramater is called
 2 | // higher oder function
 3 | 
 4 | 
 5 | function goodfriend(name) {
 6 |     return `${name}`
 7 | }
 8 | function visitor(name) {
 9 |     return `${name}`
10 | }
11 | function greatfriends(name, cbFn) {
12 |     console.log(`Hi ${cbFn(name)} and welcome to this Higher order funtion tutorial`)
13 | }
14 | 
15 | // greatfriends('amir', goodfriend)
16 | greatfriends('mamoon', visitor)
17 | 


--------------------------------------------------------------------------------
/High-Order-Functions/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>High Order Function in javascript</title>
 9 | </head>
10 | 
11 | <body>
12 | 
13 | </body>
14 | 
15 | </html>


--------------------------------------------------------------------------------
/Image-Magnifer/app.js:
--------------------------------------------------------------------------------
 1 | const formSubmit = document.querySelector('.submit--form');
 2 | const image = document.querySelector('#fileInput');
 3 | const imagePreview = document.querySelector('#image-preview');
 4 | const Noimg = document.querySelector('#image-preview p');
 5 | const magnifier = document.getElementById('magnifier');
 6 | 
 7 | function showMagnifier() {
 8 |     magnifier.style.display = 'block';
 9 | }
10 | 
11 | function hideMagnifier() {
12 |     magnifier.style.display = 'none';
13 | }
14 | 
15 | formSubmit.addEventListener('submit', (event) => {
16 |     event.preventDefault();
17 |     if (image.files.length > 0) {
18 |         const file = image.files[0]; // Get the first file
19 |         const maxFileSizeInKB = 1024;
20 | 
21 |         // Check if the file size exceeds the limit
22 |         if (file.size > maxFileSizeInKB * 1024) {
23 |             alert("File size exceeds " + maxFileSizeInKB + "KB. Please choose a smaller file.");
24 |             return;
25 |         }
26 |         let fileReader = new FileReader();
27 |         const imgElement = new Image();
28 |         fileReader.onload = (e) => {
29 |             const imageSrc = e.target.result;
30 |             imgElement.src = imageSrc;
31 |             imgElement.style.maxWidth = '100%';
32 |             imgElement.style.height = '400px';
33 |             imgElement.style.objectFit = 'contain';
34 |             // Remove previous image if exists
35 |             while (imagePreview.firstChild) {
36 |                 imagePreview.removeChild(imagePreview.firstChild);
37 |             }
38 |             imagePreview.appendChild(imgElement);
39 |             Noimg.classList.add('no-img');
40 |             
41 |             // Attach event listeners to the newly added imgElement
42 |             imgElement.addEventListener('mouseenter', showMagnifier);
43 |             imgElement.addEventListener('mouseleave', hideMagnifier);
44 |             imgElement.addEventListener('mousemove', handleMouseEnter);
45 |         };
46 |         fileReader.readAsDataURL(file);
47 |     }
48 |     formSubmit.reset();
49 | });
50 | function handleMouseEnter(event) {
51 |     const imgElement = event.target;
52 |     const rect = imgElement.getBoundingClientRect();
53 |     const clientX = event.clientX - rect.left;
54 |     const clientY = event.clientY - rect.top;
55 | 
56 |     // Calculate background position for magnifier
57 |     const bgPosX = -clientX * 2 + magnifier.offsetWidth / 2;
58 |     const bgPosY = -clientY * 2 + magnifier.offsetHeight / 2;
59 | 
60 |     // Position and update magnifier
61 |     magnifier.style.left = event.pageX + 'px';
62 |     magnifier.style.top = event.pageY + 'px';
63 |     magnifier.style.backgroundPosition = `${bgPosX}px ${bgPosY}px`;
64 |     magnifier.style.backgroundImage = `url('${imgElement.src}')`;
65 | }
66 | 
67 | 


--------------------------------------------------------------------------------
/Image-Magnifer/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <title>File upload</title>
  7 |     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
  8 |         rel="stylesheet">
  9 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
 10 |     <link rel="stylesheet" href="./style.css">
 11 | 
 12 |     <style>
 13 |         /* Additional CSS for the input file */
 14 |         .upload-area input[type='file'] {
 15 |             display: none;
 16 |             /* Hide the default file input */
 17 |         }
 18 | 
 19 |         .upload-area label {
 20 |             cursor: pointer;
 21 |         }
 22 |     </style>
 23 | </head>
 24 | 
 25 | <body>
 26 |     <!-- partial:index.partial.html -->
 27 |     <div class="magnifer-main">
 28 | 
 29 | 
 30 |     <div class="modal">
 31 |         <div class="modal-header">
 32 |             <div class="modal-logo">
 33 |                 <span class="logo-circle">
 34 |                     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="512"
 35 |                         height="419.116" viewBox="0 0 512 419.116">
 36 |                         <defs>
 37 |                             <clipPath id="clip-folder-new">
 38 |                                 <rect width="512" height="419.116" />
 39 |                             </clipPath>
 40 |                         </defs>
 41 |                         <g id="folder-new" clip-path="url(#clip-folder-new)">
 42 |                             <path id="Union_1" data-name="Union 1"
 43 |                                 d="M16.991,419.116A16.989,16.989,0,0,1,0,402.125V16.991A16.989,16.989,0,0,1,16.991,0H146.124a17,17,0,0,1,10.342,3.513L227.217,57.77H437.805A16.989,16.989,0,0,1,454.8,74.761v53.244h40.213A16.992,16.992,0,0,1,511.6,148.657L454.966,405.222a17,17,0,0,1-16.6,13.332H410.053v.562ZM63.06,384.573H424.722L473.86,161.988H112.2Z"
 44 |                                 fill="var(--c-action-primary)" stroke="" stroke-width="1" />
 45 |                         </g>
 46 |                     </svg>
 47 |                 </span>
 48 |             </div>
 49 |             <button class="btn-close">
 50 |                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
 51 |                     <path fill="none" d="M0 0h24v24H0V0z" />
 52 |                     <path
 53 |                         d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
 54 |                         fill="var(--c-text-secondary)" />
 55 |                 </svg>
 56 |             </button>
 57 |         </div>
 58 |         <div class="modal-body">
 59 |             <form class="submit--form">
 60 |                 <h2 class="modal-title">Upload a file</h2>
 61 |                 <p class="modal-description">Attach the file below</p>
 62 |                 <label class="upload-area">
 63 |                     <input type="file" id="fileInput" accept="image/*">
 64 |                     <span class="upload-area-icon">
 65 |                         <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 66 |                             width="340.531" height="419.116" viewBox="0 0 340.531 419.116">
 67 |                             <g id="files-new" clip-path="url(#clip-files-new)">
 68 |                                 <path id="Union_2" data-name="Union 2"
 69 |                                     d="M-2904.708-8.885A39.292,39.292,0,0,1-2944-48.177V-388.708A39.292,39.292,0,0,1-2904.708-428h209.558a13.1,13.1,0,0,1,9.3,3.8l78.584,78.584a13.1,13.1,0,0,1,3.8,9.3V-48.177a39.292,39.292,0,0,1-39.292,39.292Zm-13.1-379.823V-48.177a13.1,13.1,0,0,0,13.1,13.1h261.947a13.1,13.1,0,0,0,13.1-13.1V-323.221h-52.39a26.2,26.2,0,0,1-26.194-26.195v-52.39h-196.46A13.1,13.1,0,0,0-2917.805-388.708Zm146.5,241.621a14.269,14.269,0,0,1-7.883-12.758v-19.113h-68.841c-7.869,0-7.87-47.619,0-47.619h68.842v-18.8a14.271,14.271,0,0,1,7.882-12.758,14.239,14.239,0,0,1,14.925,1.354l57.019,42.764c.242.185.328.485.555.671a13.9,13.9,0,0,1,2.751,3.292,14.57,14.57,0,0,1,.984,1.454,14.114,14.114,0,0,1,1.411,5.987,14.006,14.006,0,0,1-1.411,5.973,14.653,14.653,0,0,1-.984,1.468,13.9,13.9,0,0,1-2.751,3.293c-.228.2-.313.485-.555.671l-57.019,42.764a14.26,14.26,0,0,1-8.558,2.847A14.326,14.326,0,0,1-2771.3-147.087Z"
 70 |                                     transform="translate(2944 428)" fill="var(--c-action-primary)" />
 71 |                             </g>
 72 |                         </svg>
 73 |                     </span>
 74 |                     <span class="upload-area-title">Drag file(s) here to upload.</span>
 75 |                     <span class="upload-area-description">
 76 |                         Alternatively, you can select a file by <br /><strong>clicking here</strong>
 77 |                     </span>
 78 |                 </label>
 79 | 
 80 |         </div>
 81 |         <div class="modal-footer">
 82 | 
 83 |             <button class="btn-primary" type="submit">Upload File</button>
 84 |         </div>
 85 |         </form>
 86 | 
 87 |         <!-- <div class="modal-footer">
 88 |             <button class="btn-secondary">Cancel</button>
 89 |         </div> -->
 90 |     </div>
 91 |     <div class="modal">
 92 |         <div class="modal-body">
 93 |              <div class="upload-area" id="image-preview" style="padding: 3rem 0.4rem;">
 94 |                 <p>No Image Picked yet.</p>
 95 |             </div>
 96 |             <div id="magnifier"></div>
 97 | 
 98 |         </div>
 99 |     </div>
100 | </div>
101 |     </div>
102 |     <!-- partial -->
103 |     <script src="app.js"></script>
104 | </body>
105 | 
106 | </html>


--------------------------------------------------------------------------------
/Image-Magnifer/style.css:
--------------------------------------------------------------------------------
  1 | *, *:after, *:before {
  2 |     box-sizing: border-box;
  3 |   }
  4 |   
  5 |   :root {
  6 |     --c-action-primary: #2e44ff;
  7 |     --c-action-primary-accent: #e9e5ff;
  8 |     --c-action-secondary: #e5e5e5;
  9 |     --c-text-primary: #0d0f21;
 10 |     --c-text-secondary: #6a6b76;
 11 |     --c-background-primary: #d0d1de;
 12 |   }
 13 |   
 14 |   body {
 15 |     font-family: "Inter", sans-serif;
 16 |     color: var(--c-text-primary);
 17 |     background-color: var(--c-background-primary);
 18 |     line-height: 1.5;
 19 |   }
 20 |   
 21 |   input, button, select, textarea {
 22 |     font: inherit;
 23 |   }
 24 |   
 25 |   .modal {
 26 |     width: 90%;
 27 |     max-width: 500px;
 28 |     margin-left: auto;
 29 |     margin-right: auto;
 30 |     margin-top: 10vh;
 31 |     margin-bottom: 10vh;
 32 |     background-color: #FFF;
 33 |     border-radius: 0.5rem;
 34 |     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 35 |   }
 36 |   
 37 |   .modal-header {
 38 |     display: flex;
 39 |     align-items: flex-start;
 40 |     justify-content: space-between;
 41 |     padding: 1.5rem 1.5rem 1rem;
 42 |   }
 43 |   
 44 |   .logo-circle {
 45 |     width: 3.5rem;
 46 |     height: 3.5rem;
 47 |     display: flex;
 48 |     justify-content: center;
 49 |     align-items: center;
 50 |     border-radius: 50%;
 51 |     background-color: var(--c-action-primary-accent);
 52 |   }
 53 |   .logo-circle svg {
 54 |     max-width: 1.5rem;
 55 |   }
 56 |   
 57 |   .btn-close {
 58 |     display: flex;
 59 |     align-items: center;
 60 |     justify-content: center;
 61 |     width: 2.25rem;
 62 |     height: 2.25rem;
 63 |     border-radius: 0.25rem;
 64 |     border: none;
 65 |     background-color: transparent;
 66 |   }
 67 |   .btn-close:hover, .btn-close:focus {
 68 |     background-color: var(--c-action-primary-accent);
 69 |   }
 70 |   
 71 |   .modal-body {
 72 |     padding: 1rem 1.5rem;
 73 |   }
 74 |   
 75 |   .modal-title {
 76 |     font-weight: 700;
 77 |   }
 78 |   
 79 |   .modal-description {
 80 |     color: var(--c-text-secondary);
 81 |   }
 82 |   
 83 |   .upload-area {
 84 |     margin-top: 1.25rem;
 85 |     border: none;
 86 |     background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23ccc' stroke-width='3' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
 87 |     background-color: transparent;
 88 |     padding: 3rem;
 89 |     width: 100%;
 90 |     display: flex;
 91 |     flex-direction: column;
 92 |     align-items: center;
 93 |   }
 94 |   .upload-area:hover, .upload-area:focus {
 95 |     background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%232e44ff' stroke-width='3' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
 96 |   }
 97 |   
 98 |   .upload-area-icon {
 99 |     display: block;
100 |     width: 2.25rem;
101 |     height: 2.25rem;
102 |   }
103 |   .upload-area-icon svg {
104 |     max-height: 100%;
105 |     max-width: 100%;
106 |   }
107 |   
108 |   .upload-area-title {
109 |     margin-top: 1rem;
110 |     display: block;
111 |     font-weight: 700;
112 |     color: var(--c-text-primary);
113 |   }
114 |   .no-img {
115 |     display: none;
116 | }
117 |   .upload-area-description {
118 |     display: block;
119 |     text-align: center;
120 |     color: var(--c-text-secondary);
121 |   }
122 |   .upload-area-description  input,
123 |   .upload-area-description strong {
124 |     color: var(--c-action-primary);
125 |     font-weight: 700;
126 |   }
127 |   
128 |   .modal-footer {
129 |     padding: 1rem 1.5rem 1.5rem;
130 |     display: flex;
131 |     justify-content: flex-end;
132 |   }
133 |   .modal-footer [class*=btn-] {
134 |     margin-left: 0.75rem;
135 |   }
136 |   
137 |   .btn-secondary, .btn-primary {
138 |     padding: 0.5rem 1rem;
139 |     font-weight: 500;
140 |     border: 2px solid var(--c-action-secondary);
141 |     border-radius: 0.25rem;
142 |     background-color: transparent;
143 |   }
144 |   
145 |   .btn-primary {
146 |     color: #FFF;
147 |     background-color: var(--c-action-primary);
148 |     border-color: var(--c-action-primary);
149 |   }
150 |   .magnifer-main {
151 |     display: flex;
152 |     align-items: center;
153 |     max-width: 1200px;
154 |     margin: 20px auto;
155 |     gap: 0 50px;
156 |     justify-content: space-between;
157 | }
158 | 
159 | #image-container {
160 |   position: relative;
161 |   width: fit-content; /* Adjust according to your layout */
162 | }
163 | 
164 | #magnifier {
165 |   position: absolute;
166 |   border: 1px solid #ccc;
167 |   background-color: rgba(255, 255, 255, 0.5);
168 |   width: 200px; /* Adjust the size of the magnifier */
169 |   height: 200px; /* Adjust the size of the magnifier */
170 |   display: none;
171 |   pointer-events: none; /* Ensure the magnifier doesn't interfere with mouse events */
172 |   /* Additional styling for magnifier */
173 | }
174 | 


--------------------------------------------------------------------------------
/Image-Preview/app.js:
--------------------------------------------------------------------------------
 1 | const formSubmit = document.querySelector('.submit--form');
 2 | const image = document.querySelector('#fileInput');
 3 | const imagePreview = document.querySelector('#image-preview');
 4 | const Noimg = document.querySelector('#image-preview p');
 5 | 
 6 | formSubmit.addEventListener('submit', (event) => {
 7 |     event.preventDefault();
 8 |     
 9 |     const previousImage = imagePreview.querySelector('img');
10 |     if (previousImage) {
11 |         imagePreview.removeChild(previousImage);
12 |         Noimg.classList.remove('no-img');
13 |     }
14 | 
15 |     if (image.files.length > 0) {
16 |         const file = image.files[0]; // Get the first file
17 |         const maxFileSizeInKB = 500;
18 | 
19 |         // Check if the file size exceeds the limit
20 |         if (file.size > maxFileSizeInKB * 1024) {
21 |             alert("File size exceeds " + maxFileSizeInKB + "KB. Please choose a smaller file.");
22 |             return;
23 |         }
24 | 
25 |         let fileReader = new FileReader();
26 |         const imgElement = new Image();
27 |         fileReader.onload = (e) => {
28 |             const imageSrc = e.target.result;
29 |             imgElement.src = imageSrc;
30 |             imgElement.style.maxWidth = '100%';
31 |             imgElement.style.height = '400px';
32 |             imgElement.style.objectFit = 'contain';
33 |             imagePreview.appendChild(imgElement);
34 |             Noimg.classList.add('no-img');
35 |         };
36 |         fileReader.readAsDataURL(file);
37 |     }
38 |     formSubmit.reset();
39 | });
40 | 


--------------------------------------------------------------------------------
/Image-Preview/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <title> File upload</title>
 7 |     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
 8 |         rel="stylesheet">
 9 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
10 |     <link rel="stylesheet" href="./style.css">
11 | 
12 |     <style>
13 |         /* Additional CSS for the input file */
14 |         .upload-area input[type='file'] {
15 |             display: none;
16 |             /* Hide the default file input */
17 |         }
18 | 
19 |         .upload-area label {
20 |             cursor: pointer;
21 |         }
22 |     </style>
23 | </head>
24 | 
25 | <body>
26 |     <!-- partial:index.partial.html -->
27 |     <div class="modal">
28 |         <div class="modal-header">
29 |             <div class="modal-logo">
30 |                 <span class="logo-circle">
31 |                     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="512"
32 |                         height="419.116" viewBox="0 0 512 419.116">
33 |                         <defs>
34 |                             <clipPath id="clip-folder-new">
35 |                                 <rect width="512" height="419.116" />
36 |                             </clipPath>
37 |                         </defs>
38 |                         <g id="folder-new" clip-path="url(#clip-folder-new)">
39 |                             <path id="Union_1" data-name="Union 1"
40 |                                 d="M16.991,419.116A16.989,16.989,0,0,1,0,402.125V16.991A16.989,16.989,0,0,1,16.991,0H146.124a17,17,0,0,1,10.342,3.513L227.217,57.77H437.805A16.989,16.989,0,0,1,454.8,74.761v53.244h40.213A16.992,16.992,0,0,1,511.6,148.657L454.966,405.222a17,17,0,0,1-16.6,13.332H410.053v.562ZM63.06,384.573H424.722L473.86,161.988H112.2Z"
41 |                                 fill="var(--c-action-primary)" stroke="" stroke-width="1" />
42 |                         </g>
43 |                     </svg>
44 |                 </span>
45 |             </div>
46 |             <button class="btn-close">
47 |                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
48 |                     <path fill="none" d="M0 0h24v24H0V0z" />
49 |                     <path
50 |                         d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
51 |                         fill="var(--c-text-secondary)" />
52 |                 </svg>
53 |             </button>
54 |         </div>
55 |         <div class="modal-body">
56 |             <form class="submit--form">
57 |                <h2 class="modal-title">Upload a file</h2>
58 |                 <p class="modal-description">Attach the file below</p>
59 |                 <label class="upload-area">
60 |                     <input type="file" id="fileInput" accept="image/*">
61 |                     <span class="upload-area-icon">
62 |                         <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
63 |                             width="340.531" height="419.116" viewBox="0 0 340.531 419.116">
64 |                             <g id="files-new" clip-path="url(#clip-files-new)">
65 |                                 <path id="Union_2" data-name="Union 2"
66 |                                     d="M-2904.708-8.885A39.292,39.292,0,0,1-2944-48.177V-388.708A39.292,39.292,0,0,1-2904.708-428h209.558a13.1,13.1,0,0,1,9.3,3.8l78.584,78.584a13.1,13.1,0,0,1,3.8,9.3V-48.177a39.292,39.292,0,0,1-39.292,39.292Zm-13.1-379.823V-48.177a13.1,13.1,0,0,0,13.1,13.1h261.947a13.1,13.1,0,0,0,13.1-13.1V-323.221h-52.39a26.2,26.2,0,0,1-26.194-26.195v-52.39h-196.46A13.1,13.1,0,0,0-2917.805-388.708Zm146.5,241.621a14.269,14.269,0,0,1-7.883-12.758v-19.113h-68.841c-7.869,0-7.87-47.619,0-47.619h68.842v-18.8a14.271,14.271,0,0,1,7.882-12.758,14.239,14.239,0,0,1,14.925,1.354l57.019,42.764c.242.185.328.485.555.671a13.9,13.9,0,0,1,2.751,3.292,14.57,14.57,0,0,1,.984,1.454,14.114,14.114,0,0,1,1.411,5.987,14.006,14.006,0,0,1-1.411,5.973,14.653,14.653,0,0,1-.984,1.468,13.9,13.9,0,0,1-2.751,3.293c-.228.2-.313.485-.555.671l-57.019,42.764a14.26,14.26,0,0,1-8.558,2.847A14.326,14.326,0,0,1-2771.3-147.087Z"
67 |                                     transform="translate(2944 428)" fill="var(--c-action-primary)" />
68 |                             </g>
69 |                         </svg>
70 |                     </span>
71 |                     <span class="upload-area-title">Drag file(s) here to upload.</span>
72 |                     <span class="upload-area-description">
73 |                         Alternatively, you can select a file by <br /><strong>clicking here</strong>
74 |                     </span>
75 |                 </label>
76 |                 <div class="upload-area" id="image-preview">
77 |                     <p>No Image Picked yet.</p>
78 |                 </div>
79 |         </div>
80 |         <div class="modal-footer">
81 | 
82 |             <button class="btn-primary" >Upload File</button>
83 |         </div>
84 |         </form>
85 |         <!-- <div class="modal-footer">
86 |             <button class="btn-secondary">Cancel</button>
87 |         </div> -->
88 |     </div>
89 |     <!-- partial -->
90 |     <script src="app.js"></script>
91 | </body>
92 | 
93 | </html>


--------------------------------------------------------------------------------
/Image-Preview/style.css:
--------------------------------------------------------------------------------
  1 | *, *:after, *:before {
  2 |     box-sizing: border-box;
  3 |   }
  4 |   
  5 |   :root {
  6 |     --c-action-primary: #2e44ff;
  7 |     --c-action-primary-accent: #e9e5ff;
  8 |     --c-action-secondary: #e5e5e5;
  9 |     --c-text-primary: #0d0f21;
 10 |     --c-text-secondary: #6a6b76;
 11 |     --c-background-primary: #d0d1de;
 12 |   }
 13 |   
 14 |   body {
 15 |     font-family: "Inter", sans-serif;
 16 |     color: var(--c-text-primary);
 17 |     background-color: var(--c-background-primary);
 18 |     line-height: 1.5;
 19 |   }
 20 |   
 21 |   input, button, select, textarea {
 22 |     font: inherit;
 23 |   }
 24 |   
 25 |   .modal {
 26 |     width: 90%;
 27 |     max-width: 500px;
 28 |     margin-left: auto;
 29 |     margin-right: auto;
 30 |     margin-top: 10vh;
 31 |     margin-bottom: 10vh;
 32 |     background-color: #FFF;
 33 |     border-radius: 0.5rem;
 34 |     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 35 |   }
 36 |   
 37 |   .modal-header {
 38 |     display: flex;
 39 |     align-items: flex-start;
 40 |     justify-content: space-between;
 41 |     padding: 1.5rem 1.5rem 1rem;
 42 |   }
 43 |   
 44 |   .logo-circle {
 45 |     width: 3.5rem;
 46 |     height: 3.5rem;
 47 |     display: flex;
 48 |     justify-content: center;
 49 |     align-items: center;
 50 |     border-radius: 50%;
 51 |     background-color: var(--c-action-primary-accent);
 52 |   }
 53 |   .logo-circle svg {
 54 |     max-width: 1.5rem;
 55 |   }
 56 |   
 57 |   .btn-close {
 58 |     display: flex;
 59 |     align-items: center;
 60 |     justify-content: center;
 61 |     width: 2.25rem;
 62 |     height: 2.25rem;
 63 |     border-radius: 0.25rem;
 64 |     border: none;
 65 |     background-color: transparent;
 66 |   }
 67 |   .btn-close:hover, .btn-close:focus {
 68 |     background-color: var(--c-action-primary-accent);
 69 |   }
 70 |   
 71 |   .modal-body {
 72 |     padding: 1rem 1.5rem;
 73 |   }
 74 |   
 75 |   .modal-title {
 76 |     font-weight: 700;
 77 |   }
 78 |   
 79 |   .modal-description {
 80 |     color: var(--c-text-secondary);
 81 |   }
 82 |   
 83 |   .upload-area {
 84 |     margin-top: 1.25rem;
 85 |     border: none;
 86 |     background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23ccc' stroke-width='3' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
 87 |     background-color: transparent;
 88 |     padding: 3rem;
 89 |     width: 100%;
 90 |     display: flex;
 91 |     flex-direction: column;
 92 |     align-items: center;
 93 |   }
 94 |   .upload-area:hover, .upload-area:focus {
 95 |     background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%232e44ff' stroke-width='3' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
 96 |   }
 97 |   
 98 |   .upload-area-icon {
 99 |     display: block;
100 |     width: 2.25rem;
101 |     height: 2.25rem;
102 |   }
103 |   .upload-area-icon svg {
104 |     max-height: 100%;
105 |     max-width: 100%;
106 |   }
107 |   
108 |   .upload-area-title {
109 |     margin-top: 1rem;
110 |     display: block;
111 |     font-weight: 700;
112 |     color: var(--c-text-primary);
113 |   }
114 |   .no-img {
115 |     display: none;
116 | }
117 |   .upload-area-description {
118 |     display: block;
119 |     text-align: center;
120 |     color: var(--c-text-secondary);
121 |   }
122 |   .upload-area-description  input,
123 |   .upload-area-description strong {
124 |     color: var(--c-action-primary);
125 |     font-weight: 700;
126 |   }
127 |   
128 |   .modal-footer {
129 |     padding: 1rem 1.5rem 1.5rem;
130 |     display: flex;
131 |     justify-content: flex-end;
132 |   }
133 |   .modal-footer [class*=btn-] {
134 |     margin-left: 0.75rem;
135 |   }
136 |   
137 |   .btn-secondary, .btn-primary {
138 |     padding: 0.5rem 1rem;
139 |     font-weight: 500;
140 |     border: 2px solid var(--c-action-secondary);
141 |     border-radius: 0.25rem;
142 |     background-color: transparent;
143 |   }
144 |   
145 |   .btn-primary {
146 |     color: #FFF;
147 |     background-color: var(--c-action-primary);
148 |     border-color: var(--c-action-primary);
149 |   }


--------------------------------------------------------------------------------
/Includes/app.js:
--------------------------------------------------------------------------------
1 | //iterates over an array and return true if given item is available 
2 | const foodItems= ['milk','water','sugar','jam'];
3 | 
4 | const isIncluded= foodItems.includes('milk')
5 | console.log(isIncluded)


--------------------------------------------------------------------------------
/Includes/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |     <script src="app.js"></script>
13 | </body>
14 | 
15 | </html>


--------------------------------------------------------------------------------
/Javascript-Crud/Js/app.js:
--------------------------------------------------------------------------------
  1 | 
  2 | document.addEventListener('DOMContentLoaded', () => {
  3 |     const [form, singleItem, Nodata] = [document.querySelector('#myForm'), document.querySelector('.items'), document.querySelector('.No-data')];
  4 |     const btn = document.querySelector('.btn')
  5 |     singleItem.addEventListener('click', (event) => {
  6 |         if (event.target.classList.contains('remove-btn')) {
  7 |             const itemId = event.target.closest('.single-item').dataset.id;
  8 |             deleteItem(itemId)
  9 |         }
 10 |         if (event.target.classList.contains('update-btn')) {
 11 |             const itemId = event.target.closest('.single-item').dataset.id;
 12 |             UpdateItem(itemId, form)
 13 |         }
 14 |     })
 15 |     const updateTable = () => {
 16 |         const localStorageData = GetItemsFromLocalStorage('Crud');
 17 |         if (localStorageData.length > 0) {
 18 |             Nodata.setAttribute('style', 'display:none')
 19 |         } else {
 20 |             Nodata.setAttribute('style', 'display:block')
 21 |             Nodata.textContent = "No Items in the list"
 22 |         }
 23 |         return singleItem.innerHTML = localStorageData?.map((item) => {
 24 |             return `<div class="single-item" data-id=${item.id}>
 25 |                 <p>${item.name}</p>
 26 |                 <p>${item.email}</p>
 27 |                 <button class="btn remove-btn">delete</button>
 28 |                 <button class="btn update-btn">Update</button>
 29 |             </div>`;
 30 |         }).join(" ");
 31 |     };
 32 |     const SetItemsInLocalStorage = (key, data) => {
 33 |         return localStorage.setItem(key, JSON.stringify(data));
 34 |     };
 35 |     const GetItemsFromLocalStorage = (key) => {
 36 |         return JSON.parse(localStorage.getItem(key)) || [];
 37 |     };
 38 | 
 39 |     const deleteItem = (itemId) => {
 40 |         const storedItems = GetItemsFromLocalStorage('Crud')
 41 |         const filteredItems = storedItems.filter((storedItem) => storedItem.id !== itemId)
 42 |         SetItemsInLocalStorage('Crud', filteredItems);
 43 |         updateTable()
 44 |         return
 45 |     }
 46 |     // const UpdateItem = (itemId, formElement) => {
 47 |     //     const btn = formElement.querySelector('button'); // Assuming btn is defined somewhere in your code
 48 |     
 49 |     //     btn.textContent = "Update Item";
 50 |     //     const storedItems = GetItemsFromLocalStorage('Crud');
 51 |     //     const index = storedItems.findIndex((storedItem) => storedItem.id === itemId);
 52 |     
 53 |     //     if (index === -1) {
 54 |     //         throw new Error('Your item not Found in LocalStorage');
 55 |     //     }
 56 |     
 57 |     //     const { name, email } = storedItems[index];
 58 |     //     formElement.querySelector('#name').value = name;
 59 |     //     formElement.querySelector('#email').value = email;
 60 |     
 61 |     //     btn.addEventListener('click', (e) => {
 62 |     //         e.preventDefault(); // Prevent form submission
 63 |     //         const formData = new FormData(formElement);
 64 |     //         const updatedName = formData.get('name');
 65 |     //         const updatedEmail = formData.get('email');
 66 |     
 67 |     //         // Update the item in the array
 68 |     //         storedItems[index].name = updatedName;
 69 |     //         storedItems[index].email = updatedEmail;
 70 |     
 71 |     //         // Save the updated items back to localStorage
 72 |     //         SetItemsInLocalStorage('Crud', storedItems);
 73 |             
 74 |     //         // Perform any additional operations here, like updating the UI
 75 |     //         updateTable();
 76 |     //     });
 77 |     // };
 78 | 
 79 | 
 80 |     // second apporach
 81 |     
 82 |     const UpdateItem = (itemId, formElement) => {
 83 |         // Update button text to indicate update action
 84 |         btn.textContent = "Update Item";
 85 |       
 86 |         // Retrieve stored items from local storage
 87 |         const storedItems = GetItemsFromLocalStorage('Crud');
 88 |       
 89 |         // Find the item to be updated by ID
 90 |         const itemToUpdate = storedItems.find((storedItem) => storedItem.id === itemId);
 91 |       
 92 |         // Throw an error if the item is not found
 93 |         if (!itemToUpdate) {
 94 |           throw new Error('Your item was not found in LocalStorage');
 95 |         }
 96 |       
 97 |         // Pre-fill the form with existing item data
 98 |         formElement.querySelector('#name').value = itemToUpdate.name;
 99 |         formElement.querySelector('#email').value = itemToUpdate.email;
100 |       
101 |         // Attach click event listener to the update button
102 |         btn.addEventListener('click', (e) => {
103 |           e.preventDefault(); // Prevent default form submission behavior
104 |       
105 |           // Extract updated values from the form
106 |           const formData = new FormData(e.target.parentElement);
107 |           const updatedName = formData.get('name');
108 |           const updatedEmail = formData.get('email');
109 |       
110 |           // Create a copy of the item to update (avoid direct mutation)
111 |           const updatedItem = { ...itemToUpdate };
112 |       
113 |           // Update the copy with new values
114 |           updatedItem.name = updatedName;
115 |           updatedItem.email = updatedEmail;
116 |       
117 |           // Find the index of the item to update in the stored items array
118 |           const itemIndex = storedItems.findIndex((item) => item.id === itemId);
119 |       
120 |           // Replace the old item with the updated version in the stored items array
121 |           storedItems[itemIndex] = updatedItem;
122 |       
123 |           // Update local storage with the modified array
124 |           SetItemsInLocalStorage('Crud', storedItems);
125 |       
126 |           // Update the table (assuming you have a table updating function)
127 |           updateTable();
128 |         });
129 |       };
130 |       
131 |     
132 |     const generateUniqueId = () => {
133 |         const randomBytes = new Uint8Array(5);
134 |         window.crypto.getRandomValues(randomBytes);
135 |         const uniqueId = Array.from(randomBytes).map(byte => byte.toString(16).padStart(2, '0')).join('');
136 |         const timestamp = Date.now().toString(16).padStart(12, '0');
137 | 
138 |         return uniqueId + timestamp;
139 |     };
140 | 
141 |     form.addEventListener('submit', (e) => {
142 |         e.preventDefault();
143 |         btn.textContent="Submit"
144 |         const formData = new FormData(e.target);
145 |         const name = formData.get('name');
146 |         const email = formData.get('email');
147 |         const uniqueId = generateUniqueId();
148 |         const userData = { name, email, id: uniqueId };
149 |         let localStorageData = GetItemsFromLocalStorage('Crud');
150 |         const localStorageUpdatedData = localStorageData.concat(userData);
151 |         SetItemsInLocalStorage('Crud', localStorageUpdatedData);
152 |         form.reset();
153 |         updateTable();
154 |     });
155 | 
156 |     updateTable();
157 | });
158 | 
159 | 
160 | 


--------------------------------------------------------------------------------
/Javascript-Crud/css/style.css:
--------------------------------------------------------------------------------
  1 | *,:after,:before {
  2 |     margin: 0;
  3 |     padding: 0;
  4 |     box-sizing: border-box
  5 | }
  6 | 
  7 | html {
  8 |     font-size: 100%
  9 | }
 10 | 
 11 | :root {
 12 |     --primary-100: #e2e0ff;
 13 |     --primary-200: #a5f3fc;
 14 |     --primary-300: #67e8f9;
 15 |     --primary-400: #22d3ee;
 16 |     --primary-500: #06b6d4;
 17 |     --primary-600: #0891b2;
 18 |     --primary-700: #0e7490;
 19 |     --primary-800: #155e75;
 20 |     --primary-900: #164e63;
 21 |     --grey-50: #f8fafc;
 22 |     --grey-100: #f1f5f9;
 23 |     --grey-200: #e2e8f0;
 24 |     --grey-300: #cbd5e1;
 25 |     --grey-400: #94a3b8;
 26 |     --grey-500: #64748b;
 27 |     --grey-600: #475569;
 28 |     --grey-700: #334155;
 29 |     --grey-800: #1e293b;
 30 |     --grey-900: #0f172a;
 31 |     --black: #222;
 32 |     --white: #fff;
 33 |     --red-light: #f8d7da;
 34 |     --red-dark: #842029;
 35 |     --green-light: #d1e7dd;
 36 |     --green-dark: #0f5132;
 37 |     --small-text: .875rem;
 38 |     --extra-small-text: .7em;
 39 |     --backgroundColor: var(--grey-50);
 40 |     --textColor: var(--grey-900);
 41 |     --borderRadius: .25rem;
 42 |     --letterSpacing: 1px;
 43 |     --transition: .3s ease-in-out all;
 44 |     --max-width: 1120px;
 45 |     --fixed-width: 600px;
 46 |     --shadow-1: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
 47 |     --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);
 48 |     --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
 49 |     --shadow-4: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04)
 50 | }
 51 | 
 52 | body {
 53 |     background: var(--backgroundColor);
 54 |     font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;
 55 |     font-weight: 400;
 56 |     line-height: 1;
 57 |     color: var(--textColor)
 58 | }
 59 | 
 60 | p {
 61 |     margin: 0
 62 | }
 63 | 
 64 | h1,h2,h3,h4,h5 {
 65 |     margin: 0;
 66 |     font-family: var(--headingFont);
 67 |     font-weight: 400;
 68 |     line-height: 1;
 69 |     text-transform: capitalize;
 70 |     letter-spacing: var(--letterSpacing)
 71 | }
 72 | 
 73 | h1 {
 74 |     font-size: 3.052rem
 75 | }
 76 | 
 77 | h2 {
 78 |     font-size: 2.441rem
 79 | }
 80 | 
 81 | h3 {
 82 |     font-size: 1.953rem
 83 | }
 84 | 
 85 | h4 {
 86 |     font-size: 1.563rem
 87 | }
 88 | 
 89 | h5 {
 90 |     font-size: 1.25rem
 91 | }
 92 | 
 93 | .text {
 94 |     margin-bottom: 1.5rem;
 95 |     max-width: 40em
 96 | }
 97 | 
 98 | small,.text-small {
 99 |     font-size: var(--small-text)
100 | }
101 | .mb-10{
102 |     margin-bottom: 10px;
103 | }
104 | a {
105 |     text-decoration: none
106 | }
107 | 
108 | ul {
109 |     list-style-type: none;
110 |     padding: 0
111 | }
112 | 
113 | .img {
114 |     width: 100%;
115 |     display: block;
116 |     object-fit: cover
117 | }
118 | 
119 | .btn {
120 |     cursor: pointer;
121 |     color: var(--white);
122 |     background: var(--primary-500);
123 |     border: transparent;
124 |     border-radius: var(--borderRadius);
125 |     letter-spacing: var(--letterSpacing);
126 |     padding: .375rem .75rem;
127 |     box-shadow: var(--shadow-1);
128 |     transition: var(--transition);
129 |     text-transform: capitalize;
130 |     display: inline-block
131 | }
132 | 
133 | .btn:hover {
134 |     background: var(--primary-700);
135 |     box-shadow: var(--shadow-3)
136 | }
137 | 
138 | .btn-hipster {
139 |     color: var(--primary-500);
140 |     background: var(--primary-200)
141 | }
142 | 
143 | .btn-hipster:hover {
144 |     color: var(--primary-200);
145 |     background: var(--primary-700)
146 | }
147 | 
148 | .btn-block {
149 |     width: 100%
150 | }
151 | 
152 | .alert {
153 |     padding: .375rem .75rem;
154 |     margin-bottom: 1rem;
155 |     border-color: transparent;
156 |     border-radius: var(--borderRadius)
157 | }
158 | 
159 | .alert-danger {
160 |     color: var(--red-dark);
161 |     background: var(--red-light)
162 | }
163 | 
164 | .alert-success {
165 |     color: var(--green-dark);
166 |     background: var(--green-light)
167 | }
168 | 
169 | .form {
170 |     width: 90vw;
171 |     max-width: var(--fixed-width);
172 |     background: var(--white);
173 |     border-radius: var(--borderRadius);
174 |     box-shadow: var(--shadow-2);
175 |     padding: 2rem 2.5rem;
176 |     margin: 3rem auto
177 | }
178 | 
179 | .form-label {
180 |     display: block;
181 |     font-size: var(--small-text);
182 |     margin-bottom: .5rem;
183 |     text-transform: capitalize;
184 |     letter-spacing: var(--letterSpacing)
185 | }
186 | 
187 | .form-input,.form-textarea {
188 |     width: 100%;
189 |     padding: .375rem .75rem;
190 |     border-radius: var(--borderRadius);
191 |     background: var(--backgroundColor);
192 |     border: 1px solid var(--grey-200)
193 | }
194 | 
195 | .form-row {
196 |     margin-bottom: 1rem
197 | }
198 | 
199 | .form-textarea {
200 |     height: 7rem
201 | }
202 | 
203 | ::placeholder {
204 |     font-family: inherit;
205 |     color: var(--grey-400)
206 | }
207 | 
208 | .form-alert {
209 |     color: var(--red-dark);
210 |     letter-spacing: var(--letterSpacing);
211 |     text-transform: capitalize
212 | }
213 | 
214 | @keyframes spinner {
215 |     to {
216 |         transform: rotate(360deg)
217 |     }
218 | }
219 | 
220 | .loading {
221 |     width: 6rem;
222 |     height: 6rem;
223 |     border: 5px solid var(--grey-400);
224 |     border-radius: 50%;
225 |     border-top-color: var(--primary-500);
226 |     animation: spinner .6s linear infinite;
227 |     margin: 0 auto
228 | }
229 | 
230 | .title {
231 |     text-align: center
232 | }
233 | 
234 | .title-underline {
235 |     background: var(--primary-500);
236 |     width: 7rem;
237 |     height: .25rem;
238 |     margin: 0 auto;
239 |     margin-top: 1rem
240 | }
241 | 
242 | .section-center {
243 |     width: 90vw;
244 |     margin: 0 auto;
245 |     margin-top: 8rem;
246 |     max-width: 30rem;
247 |     background: var(--white);
248 |     border-radius: var(--borderRadius);
249 |     padding: 2rem;
250 |     box-shadow: var(--shadow-1);
251 |     transition: var(--transition)
252 | }
253 | 
254 | .section-center:hover {
255 |     box-shadow: var(--shadow-3)
256 | }
257 | 
258 | form h4 {
259 |     text-align: center;
260 |     margin-bottom: 1.5rem
261 | }
262 | 
263 | .form-control {
264 |     display: grid;
265 |     grid-template-columns: 1fr;
266 | }
267 | 
268 | .form-input {
269 |     border-radius: 0;
270 |     border-top-left-radius: var(--borderRadius);
271 |     border-bottom-left-radius: var(--borderRadius)
272 | }
273 | 
274 | .form-control .btn {
275 |     border-radius: 0;
276 |     border-top-right-radius: var(--borderRadius);
277 |     border-bottom-right-radius: var(--borderRadius)
278 | }
279 | 
280 | .items {
281 |     margin-top: 1rem;
282 |     display: grid;
283 |     row-gap: 1rem
284 | }
285 | .No-data {
286 |     font-size: 17px;
287 |     font-weight: 500;
288 |     font-style: italic;
289 |     text-decoration: underline;
290 |     text-align: center;
291 | }
292 | .single-item {
293 |     display: grid;
294 |     grid-template-columns:111px 160px;
295 |     column-gap: 1rem;
296 |     align-items: center
297 | }
298 | 
299 | .single-item p {
300 |     letter-spacing: var(--letterSpacing)
301 | }
302 | 
303 | .remove-btn {
304 |     padding: .375rem .75rem;
305 |     font-size: .75rem;
306 |     background: var(--black)
307 | }


--------------------------------------------------------------------------------
/Javascript-Crud/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |    <head>
 4 |       <meta charset="UTF-8">
 5 |       <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |       <link rel="stylesheet" href="css/style.css">
 7 |       <title>Javascript CRUD</title>
 8 |    </head>
 9 |    <body>
10 |       <section class="section-center">
11 |          <form id="myForm">
12 |             <div class="form-control mb-10">
13 |                <input type="text" id="name" name="name" class="form-input" placeholder="Enter your Name">
14 |             </div>
15 |             <div class="form-control mb-10">
16 |                <input type="email" id="email" name="email" class="form-input" placeholder="Enter your email">
17 |             </div>
18 |             <button type="submit" class="btn">Submit</button>
19 |          </form>
20 |          <div class="items">
21 |           
22 |          </div>
23 |          <p class="No-data"></p>
24 |       </section>
25 |       <script type="module" src="./Js/app.js"></script>
26 |    </body>
27 | </html>


--------------------------------------------------------------------------------
/Javascript-Encapsulation/app.js:
--------------------------------------------------------------------------------
 1 | // Encapsulation is one of the four fundamental principles of object-oriented programming (OOP), along with inheritance, polymorphism, and abstraction.
 2 | // It refers to the bundling of data and methods that operate on the data, and controlling access to that bundle to ensure that data inside the object is accessible only through well-defined interfaces.
 3 | // we can create the closurs by four ways  1) Using Closure, 2) Using ES6 Classes, 3) Symbol-based encapsulation
 4 | 
 5 | 
 6 | // First method Using Closure
 7 | 
 8 | function Counter() {
 9 |     let count = 0;
10 |     this.increment = function () {
11 |         count++;
12 |     }
13 |     this.getCount = function () {
14 |         return count
15 |     }
16 | }
17 | const count = new Counter()
18 | count.increment()
19 | console.log(count.getCount());
20 | console.log(count.count);
21 | 
22 | // 2nd method Using Using ES6 Classes:
23 | 
24 | class CounterClass{
25 |     #count=0;
26 |     increment(){
27 |         this.#count++
28 |     }
29 |     getCount(){
30 |         return this.#count
31 |     }
32 | }
33 | 
34 | const counter= new CounterClass()
35 | counter.increment()
36 | console.log(counter.getCount());
37 | // console.log(counter.#count);
38 | 
39 | // 3rd method 


--------------------------------------------------------------------------------
/Map/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Javascript Map Method</title>
 8 | </head>
 9 | <body>
10 |     <script src="index.js"></script>
11 | </body>
12 | </html>


--------------------------------------------------------------------------------
/Map/index.js:
--------------------------------------------------------------------------------
 1 | //iterates over an array
 2 | // returns new array after performing some manipulations
 3 | //use extenstion Quokka to get the output in Vs code
 4 | //do not change the result of origional array
 5 | let newarray=[1,2,3,4,5,6,7,8]
 6 | 
 7 | let result= newarray.map((item)=>{
 8 |     return item
 9 | })
10 | console.log(result) 
11 | 
12 | let numberarray=[1,2,3,4,5,6,7,8,9,10]
13 | const SquareRoots=numberarray.map((item)=>(Math.sqrt(item)))
14 | console.log(SquareRoots)
15 | 


--------------------------------------------------------------------------------
/Nullish-Coalescing/app.js:
--------------------------------------------------------------------------------
 1 | // The nullish coalescing operator (??) in JavaScript is used to provide a default value 
 2 |  //when dealing with null or undefined values. It is similar to the logical OR (||) operator but only considers null and undefined as the cases where
 3 |  // the default value is used. This means it will not use the default value if the left-hand side expression evaluates to other falsy values like 0, false, 
 4 |  // or an empty string.
 5 | 
 6 | 
 7 |  // Syntax
 8 |  //let result = value1 ?? value2;
 9 | 
10 | 
11 | 
12 |  let myName= false;
13 |  let defaultName= 'Amir Ali Anwar'
14 | 
15 |  let finalName= myName ?? defaultName
16 |  console.log(finalName);
17 |  


--------------------------------------------------------------------------------
/Nullish-Coalescing/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |   
 7 |     <title>Map</title>
 8 |     <!-- <link rel="stylesheet" href="../global.css" /> -->
 9 |   </head>
10 |   <body>
11 |     <h2>Nullish Coalescing</h2>
12 |     <div id="result"></div>
13 |     <script src="app.js"></script>
14 |   </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/Object-destructuring/app.js:
--------------------------------------------------------------------------------
 1 | const employees = {
 2 |     engineers: {
 3 |         0: {
 4 |             id: 1,
 5 |             name: "Amir Ali",
 6 |             // occupation: "Fullstack Engineer"
 7 |         },
 8 |         1: {
 9 |             id: 2,
10 |             name: "Mubashar Akram",
11 |             occupation: "Front-end Engineer"
12 |         },
13 |         2: {
14 |             id: 3,
15 |             name: "Babar mumtaz",
16 |             occupation: "SQA Engineer"
17 |         },
18 |         3: {
19 |             id: 4,
20 |             name: "Haroon hassan",
21 |             occupation: "SQA Engineer"
22 |         },
23 |     }
24 | };
25 | // console.log(employees);
26 | 
27 | // const { engineers:{0:{name,occupation}}} = employees
28 | // console.log(name,'',occupation)
29 | // Destructuring with Error handling 
30 | const { engineers:{0:{name='',occupation=''}=''}=''} = employees
31 | console.log(name,'',occupation)
32 | 
33 | 
34 | 
35 | 
36 | 
37 | 
38 | 
39 | 
40 | 
41 | 
42 | 
43 | 
44 | 
45 | 
46 | 


--------------------------------------------------------------------------------
/Object-destructuring/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |     <script src="app.js"></script>
13 | </body>
14 | 
15 | </html>


--------------------------------------------------------------------------------
/Prototype Model/app.js:
--------------------------------------------------------------------------------
 1 | // Every javascript object has a anonymous property called prototype
 2 | // Point to be remember functions and Array in javascript are objects
 3 | // Prototype will the parent of that object, prototype property is object by itself, which have some special properties & methods.
 4 | // Every object is associated with another object.
 5 | // The object (a) is associated with [[Prototype]] Object
 6 | // -> which means a object will inherit all properties of Object.prototype || [[Prototype]]
 7 | 
 8 | // We can check the prototype of something in 3 ways:
 9 | 
10 | // --> obj.__proto__
11 | // --> obj.constructor.prototype
12 | // --> Object.getPrototypeOf(a)
13 | 
14 | // ********* Checking the Prototype
15 | // const obj = {};
16 | // console.log(obj.__proto__.__proto__);
17 | 
18 | 
19 | // const arr = new Array();
20 | // console.log(arr.__proto__.__proto__.__proto__);
21 | 
22 | // const str = new String();
23 | // console.log(str.__proto__.__proto__.__proto__);
24 | 
25 | 
26 | function Person(firstName,lastName,ProgramingLanguage){
27 | this.firstName=firstName
28 | this.lastName=lastName
29 | this.ProgramingLanguage=ProgramingLanguage
30 | }
31 | const person1= new Person("Amir Ali", 'Anwar',"Frontend")
32 | console.log(person1);
33 | console.log(person1.__proto__);
34 | console.log(person1.__proto__.__proto__);
35 | console.log(person1.__proto__.__proto__);
36 | 
37 |  Array.prototype.pop = function () {
38 |       return "POP IT UP BABE";
39 |  };


--------------------------------------------------------------------------------
/Prototype Model/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>OOP</title>
 8 |   </head>
 9 |   <body>
10 |     <script src="app.js"></script>
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # JavaScript Nuggets 🧠💡
 2 | 
 3 | A collection of bite-sized JavaScript concepts, patterns, and practical examples—perfect for brushing up your skills or learning new things on the go!
 4 | 
 5 | ---
 6 | 
 7 | ## 🚀 What is this Repository?
 8 | 
 9 | This repository contains hands-on examples, patterns, and short implementations of essential and advanced JavaScript concepts. Whether you're preparing for interviews, building projects, or improving your understanding of the JavaScript ecosystem, **JavaScript Nuggets** offers real code, real-world examples, and intuitive explanations.
10 | 
11 | ---
12 | 
13 | ## 📂 Folder Structure
14 | 
15 | | Topic | Description |
16 | |-------|-------------|
17 | | `AbortController` | Learn how to use `AbortController` to cancel async requests |
18 | | `Accordion` | Interactive UI component built using vanilla JS |
19 | | `Array.from-Pagination` | Creating paginated UIs using `Array.from()` |
20 | | `Asynchronous-JavaScript` | Covers async patterns: callbacks, promises, async/await |
21 | | `Call/Apply/Bind` | Understand function context and how to control `this` |
22 | | `Css-variables` | Use of CSS variables with JavaScript |
23 | | `Currying` | Function currying explained with examples |
24 | | `Custom-video-Player` | Build a basic video player from scratch |
25 | | `Dynamic-Values` | Injecting and handling dynamic values |
26 | | `Event-bubbling` | Understanding how event propagation works |
27 | | `Every`, `Filter`, `Find`, `Includes`, `Map`, `Some`, `Reduce` | Essential array methods with practical examples |
28 | | `Form-Enteries` & `FormData` | Handling form data dynamically |
29 | | `ForOf/ForIn` | Iteration techniques in JavaScript |
30 | | `Functions` | Deep dive into JS functions and declarations |
31 | | `GeneratorFunctions` | Lazy evaluation and generator usage |
32 | | `High-Order-Functions` | Learn about callback and HOF patterns |
33 | | `Image-Magnifer` & `Image-Preview` | Image handling with zoom and preview logic |
34 | | `Javascript-Crud` | Basic CRUD implementation using JavaScript |
35 | | `Javascript-Encapsulation` | OOP principles: Encapsulation in JS |
36 | | `Nullish-Coalescing` | Understanding `??` operator with examples |
37 | | `Object-destructuring` | Extracting values from objects efficiently |
38 | | `Prototype Model` | Dive into JavaScript's prototypal inheritance |
39 | | `Slider` | Custom JS image/content slider |
40 | | `Unique-Values` | Extracting unique values from an array |
41 | | `composition` | Object composition vs classical inheritance |
42 | | `create-elements-dynamically` | DOM manipulation and element creation |
43 | | `debounce` | Implementing debounce for performance optimization |
44 | | `deepCopy` | Clone objects deeply to avoid mutation issues |
45 | | `htmlColorInput` | Handling and using color inputs dynamically |
46 | | `video` | Final video player example |
47 | 
48 | ---
49 | 
50 | ## 🛠️ Features
51 | 
52 | - Real-world examples with complete code
53 | - Modular and easy-to-navigate folders
54 | - Covers both fundamentals and modern JS
55 | - Regularly updated with new concepts
56 | 
57 | ---
58 | 
59 | ## 🧑‍💻 Ideal For
60 | 
61 | - Frontend Developers
62 | - JavaScript Enthusiasts
63 | - Interview Preparation
64 | - Daily Practice or Concept Reinforcement
65 | 
66 | ---
67 | 
68 | ## 🔧 How to Use
69 | 
70 | Clone the repo and explore each folder:
71 | 
72 | ```bash
73 | git clone https://github.com/Amir-ali-anwar/javascript-nuggets.git
74 | cd javascript-nuggets
75 | 


--------------------------------------------------------------------------------
/Slider/app.js:
--------------------------------------------------------------------------------
 1 | import data from './data.js'
 2 | let slideContainer = document.querySelector(".slide-container");
 3 | let prevContainer = document.querySelector(".prev-btn");
 4 | let nextContainer = document.querySelector(".next-btn");
 5 | 
 6 | let slideItems= [...data]
 7 | slideContainer.innerHTML=slideItems?.map((person,index)=>{
 8 |     const {img,job,name,text}=person
 9 |     let position='next'
10 |     if(index===0){
11 |       position='active'
12 |     }
13 |     if (index === slideItems.length - 1) {
14 |       position = "last";
15 |     }
16 |      if (slideItems.length <= 1) {
17 |        position = "active";
18 |      }
19 |     return ` <article class="slide ${position}" data-id=${index}>
20 |         <img src=${img}
21 |           class="img" alt=${name} />
22 |         <h4>${name}</h4>
23 |         <p class="title">${job}</p>
24 |         <p class="text">
25 |           ${text}
26 |         </p>
27 |         <div class="quote-icon">
28 |           <i class="fas fa-quote-right"></i>
29 |         </div>
30 |       </article>`;
31 | }).join('')
32 | 
33 | const startSlider = (type) => {
34 |   let active = document.querySelector(".active");
35 |   let last = document.querySelector(".last");
36 |   let next = active.nextElementSibling;
37 |   if (!next) {
38 |     next = slideContainer.firstElementChild;
39 |   }
40 |   active.classList.remove(["active"]);
41 |   last.classList.remove(["last"]);
42 |   next.classList.remove(["next"]);
43 |   if (type === "prev") {
44 |     active.classList.add("next");
45 |     last.classList.add("active");
46 |     next = last.previousElementSibling;
47 |     if (!next) {
48 |       next = slideContainer.lastElementChild;
49 |     }
50 |     next.classList.remove(['next'])
51 |     next.classList.add('last')
52 |     return;
53 |   }
54 |   active.classList.add("last");
55 |   last.classList.add("next");
56 |   next.classList.add("active");
57 | };
58 | 
59 | prevContainer.addEventListener('click',()=>{
60 |   startSlider("prev");
61 | });
62 | nextContainer.addEventListener("click", () => {
63 |   startSlider()
64 | });


--------------------------------------------------------------------------------
/Slider/data.js:
--------------------------------------------------------------------------------
 1 | const people = [
 2 |   {
 3 |     img:
 4 |       "https://res.cloudinary.com/diqqf3eq2/image/upload/c_scale,w_200/v1595959121/person-1_aufeoq.jpg",
 5 |     name: "peter doe",
 6 |     job: "product manager",
 7 |     text: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem quoeius recusandae officia voluptas sint deserunt dicta nihil nam omnis? `,
 8 |   },
 9 |   {
10 |     img:
11 |       "https://res.cloudinary.com/diqqf3eq2/image/upload/c_scale,w_200/v1595959131/person-2_ipcjws.jpg",
12 |     name: "susan doe",
13 |     job: "developer",
14 |     text: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem quoeius recusandae officia voluptas sint deserunt dicta nihil nam omnis?`,
15 |   },
16 |   {
17 |     img:
18 |       "https://res.cloudinary.com/diqqf3eq2/image/upload/c_scale,w_200/v1595959131/person-3_rxtqvi.jpg",
19 |     name: "emma doe",
20 |     job: "designer",
21 |     text: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem quoeius recusandae officia voluptas sint deserunt dicta nihil nam omnis?`,
22 |   },
23 | ];
24 | export default people


--------------------------------------------------------------------------------
/Slider/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8" />
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |   <title>ES6 Slider Setup</title>
 8 |   <!-- font-awesome -->
 9 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
10 | 
11 |   <!-- stylesheet -->
12 |   <link rel="stylesheet" href="styles.css" />
13 | </head>
14 | 
15 | <body>
16 |   <section class="slider">
17 |     <div class="reviews">
18 |       <h2><span>/</span>reviews</h2>
19 |     </div>
20 |     <div class="slide-container">
21 |       <article class="slide">
22 |         <img src="https://res.cloudinary.com/diqqf3eq2/image/upload/c_scale,w_200/v1595959121/person-1_aufeoq.jpg"
23 |           class="img" alt="peter doe" />
24 |         <h4>peter doe</h4>
25 |         <p class="title">product designer</p>
26 |         <p class="text">
27 |           Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem quo
28 |           eius recusandae officia voluptas sint deserunt dicta nihil nam
29 |           omnis?
30 |         </p>
31 |         <div class="quote-icon">
32 |           <i class="fas fa-quote-right"></i>
33 |         </div>
34 |       </article>
35 |     </div>
36 |     <!-- buttons -->
37 |     <!-- prev btn -->
38 |     <button class="btn prev-btn">
39 |       <i class="fas fa-chevron-left"></i>
40 |     </button>
41 |     <!-- next button -->
42 |     <button class="btn next-btn">
43 |       <i class="fas fa-chevron-right"></i>
44 |     </button>
45 |   </section>
46 |   <script type="module" src="app.js"></script>
47 | </body>
48 | 
49 | </html>


--------------------------------------------------------------------------------
/Slider/styles.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | =============== 
  3 | Fonts
  4 | ===============
  5 | */
  6 | @import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap');
  7 | 
  8 | /*
  9 | =============== 
 10 | Variables
 11 | ===============
 12 | */
 13 | 
 14 | :root {
 15 |   /* dark shades of primary color*/
 16 |   --clr-primary-1: hsl(205, 86%, 17%);
 17 |   --clr-primary-2: hsl(205, 77%, 27%);
 18 |   --clr-primary-3: hsl(205, 72%, 37%);
 19 |   --clr-primary-4: hsl(205, 63%, 48%);
 20 |   /* primary/main color */
 21 |   --clr-primary-5: hsl(205, 78%, 60%);
 22 |   /* lighter shades of primary color */
 23 |   --clr-primary-6: hsl(205, 89%, 70%);
 24 |   --clr-primary-7: hsl(205, 90%, 76%);
 25 |   --clr-primary-8: hsl(205, 86%, 81%);
 26 |   --clr-primary-9: hsl(205, 90%, 88%);
 27 |   --clr-primary-10: hsl(205, 100%, 96%);
 28 |   /* darkest grey - used for headings */
 29 |   --clr-grey-1: hsl(209, 61%, 16%);
 30 |   --clr-grey-2: hsl(211, 39%, 23%);
 31 |   --clr-grey-3: hsl(209, 34%, 30%);
 32 |   --clr-grey-4: hsl(209, 28%, 39%);
 33 |   /* grey used for paragraphs */
 34 |   --clr-grey-5: hsl(210, 22%, 49%);
 35 |   --clr-grey-6: hsl(209, 23%, 60%);
 36 |   --clr-grey-7: hsl(211, 27%, 70%);
 37 |   --clr-grey-8: hsl(210, 31%, 80%);
 38 |   --clr-grey-9: hsl(212, 33%, 89%);
 39 |   --clr-grey-10: hsl(210, 36%, 96%);
 40 |   --clr-white: #fff;
 41 |   --clr-red-dark: hsl(360, 67%, 44%);
 42 |   --clr-red-light: hsl(360, 71%, 66%);
 43 |   --clr-green-dark: hsl(125, 67%, 44%);
 44 |   --clr-green-light: hsl(125, 71%, 66%);
 45 |   --clr-black: #222;
 46 |   --ff-primary: 'Roboto', sans-serif;
 47 |   --ff-secondary: 'Open Sans', sans-serif;
 48 |   --transition: all 0.3s linear;
 49 |   --spacing: 0.1rem;
 50 |   --radius: 0.25rem;
 51 |   --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 52 |   --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 53 |   --max-width: 1170px;
 54 |   --fixed-width: 620px;
 55 | }
 56 | /*
 57 | =============== 
 58 | Global Styles
 59 | ===============
 60 | */
 61 | 
 62 | *,
 63 | ::after,
 64 | ::before {
 65 |   margin: 0;
 66 |   padding: 0;
 67 |   box-sizing: border-box;
 68 | }
 69 | body {
 70 |   font-family: var(--ff-secondary);
 71 |   background: var(--clr-grey-10);
 72 |   color: var(--clr-grey-1);
 73 |   line-height: 1.5;
 74 |   font-size: 0.875rem;
 75 | }
 76 | ul {
 77 |   list-style-type: none;
 78 | }
 79 | a {
 80 |   text-decoration: none;
 81 | }
 82 | h1,
 83 | h2,
 84 | h3,
 85 | h4 {
 86 |   letter-spacing: var(--spacing);
 87 |   text-transform: capitalize;
 88 |   line-height: 1.25;
 89 |   margin-bottom: 0.75rem;
 90 |   font-family: var(--ff-primary);
 91 | }
 92 | h1 {
 93 |   font-size: 3rem;
 94 | }
 95 | h2 {
 96 |   font-size: 2rem;
 97 | }
 98 | h3 {
 99 |   font-size: 1.25rem;
100 | }
101 | h4 {
102 |   font-size: 0.875rem;
103 | }
104 | p {
105 |   margin-bottom: 1.25rem;
106 |   color: var(--clr-grey-5);
107 | }
108 | @media screen and (min-width: 800px) {
109 |   h1 {
110 |     font-size: 4rem;
111 |   }
112 |   h2 {
113 |     font-size: 2.5rem;
114 |   }
115 |   h3 {
116 |     font-size: 1.75rem;
117 |   }
118 |   h4 {
119 |     font-size: 1rem;
120 |   }
121 |   body {
122 |     font-size: 1rem;
123 |   }
124 |   h1,
125 |   h2,
126 |   h3,
127 |   h4 {
128 |     line-height: 1;
129 |   }
130 | }
131 | 
132 | .section-center {
133 |   width: 90vw;
134 |   margin: 0 auto;
135 |   max-width: 1170px;
136 | }
137 | @media screen and (min-width: 992px) {
138 |   .section-center {
139 |     width: 95vw;
140 |   }
141 | }
142 | main {
143 |   min-height: 100vh;
144 |   display: grid;
145 |   place-items: center;
146 | }
147 | 
148 | /*
149 | =============== 
150 | Slider Styles
151 | ===============
152 | */
153 | section {
154 |   width: 85vw;
155 |   max-width: var(--fixed-width);
156 |   margin: 0 auto;
157 |   margin-top: 5rem;
158 |   text-align: center;
159 |   padding: 1rem 0;
160 |   /* set relative for buttons */
161 |   position: relative;
162 | }
163 | .reviews {
164 |   margin-bottom: 4rem;
165 | }
166 | .reviews h2 {
167 |   display: flex;
168 |   align-items: center;
169 |   justify-content: center;
170 | }
171 | .reviews span {
172 |   font-size: 0.85em;
173 |   color: var(--clr-primary-5);
174 |   margin-right: 1rem;
175 | }
176 | .img {
177 |   width: 150px;
178 |   height: 150px;
179 |   object-fit: cover;
180 |   border: 1px solid var(--clr-grey-7);
181 |   background: var(--clr-white);
182 |   padding: 0.25rem;
183 |   border-radius: 50%;
184 |   box-shadow: var(--dark-shadow);
185 | }
186 | h4 {
187 |   text-transform: uppercase;
188 |   font-weight: 500;
189 |   color: var(--clr-primary-5);
190 |   letter-spacing: var(--spacing);
191 |   margin: 0.5rem 0;
192 | }
193 | .title {
194 |   margin-bottom: 1.25rem;
195 |   letter-spacing: 2px;
196 |   text-transform: capitalize;
197 | }
198 | .text {
199 |   color: var(--clr-grey-5);
200 |   line-height: 1.8;
201 |   max-width: 35em;
202 |   margin: 0 auto;
203 |   letter-spacing: 1px;
204 | }
205 | 
206 | .icon:hover {
207 |   transform: scale(1.1);
208 |   opacity: 0.8;
209 | }
210 | .quote-icon {
211 |   font-size: 3rem;
212 |   margin-top: 2rem;
213 |   color: var(--clr-primary-5);
214 | }
215 | /* set buttons */
216 | .btn {
217 |   position: absolute;
218 |   top: 175px;
219 |   background: var(--clr-grey-5);
220 |   color: var(--clr-white);
221 |   padding: 0.25rem 0.35rem;
222 |   border-radius: 0.25rem;
223 |   border: transparent;
224 |   cursor: pointer;
225 | }
226 | .next-btn {
227 |   right: -0.5rem;
228 | }
229 | .prev-btn {
230 |   left: -0.5rem;
231 | }
232 | @media screen and (min-width: 768px) {
233 |   .next-btn {
234 |     right: -5rem;
235 |   }
236 |   .prev-btn {
237 |     left: -5rem;
238 |   }
239 |   .btn {
240 |     font-size: 1.3rem;
241 |     padding: 0.35rem 0.5rem;
242 |   }
243 |   .quote-icon {
244 |     font-size: 4rem;
245 |   }
246 | }
247 | 
248 | /* MORE CSS FOR JS */
249 | .slide-container {
250 |   display: flex;
251 |   position: relative;
252 |   height: 450px;
253 |   overflow: hidden;
254 | }
255 | .slide{
256 |   position: absolute;
257 | }
258 | .slide{
259 |   position: absolute;
260 |   top: 0;
261 |   left: 0;
262 |   right: 0;
263 |   width: 100%;
264 |   height: 100%;
265 |   opacity:0;
266 | }
267 | .slide.active {
268 |   opacity: 1;
269 |   transform: translateX(0);
270 | }
271 | .slide.next {
272 |   transform: translateX(100%);
273 | }
274 | .slide.last {
275 |   transform: translateX(-100%);
276 | }


--------------------------------------------------------------------------------
/Some/app.js:
--------------------------------------------------------------------------------
 1 | // filter method iterates over array
 2 | //does not change the origional array
 3 | //returns false if not element found
 4 | //test of every element in an array
 5 | const myfriends = [
 6 |     { name: 'Mamoon', age: 25, position: 'Senior Full stack', salary: 1000 },
 7 |     { name: 'Mubahsar', age: 26, position: 'developer', salary: 100 },
 8 |     { name: 'Babar', age: 25, position: 'SQA', salary: 6000 },
 9 |     { name: 'Haroon', age: 24, position: 'SQA', salary: 400 },
10 |     { name: 'Amir', age: 25, position: 'Full stack', salary: 50 },
11 | ];
12 |  let isTrue= myfriends.some((friends)=>{
13 |      return friends.age>20
14 |  })   
15 |  console.log(isTrue)
16 | 
17 |   isTrue= myfriends.some((friends)=>{
18 |     return friends.age===20
19 | })   
20 | console.log(isTrue)


--------------------------------------------------------------------------------
/Some/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Javascript Some Method</title>
 8 | </head>
 9 | <body>
10 |     <script src="app.js"></script>
11 | </body>
12 | </html>


--------------------------------------------------------------------------------
/Unique-Values/app.js:
--------------------------------------------------------------------------------
 1 | // new set is used to get the unique values from array
 2 | // Returns an object
 3 | 
 4 | const data = [1, 2, 3, 4, 5, 6, 6, 6, 6, 7, 8, 9, 9, 9, 9, 9,]
 5 | let output = [... new Set(data)]
 6 | let objectToArray = Array.from(output)
 7 | console.log(Array.isArray(objectToArray))
 8 | console.log(typeof objectToArray)
 9 | 
10 | 
11 | // remove duplicates using the custom function
12 | 
13 | const removeDuplicates = () => {
14 |     console.log(arr);
15 |     let uniqueArr = []
16 |     for (let index = 0; index < arr.length; index++) {
17 |         const element = arr[index];
18 |         if (!uniqueArr.includes(element)) {
19 |             uniqueArr.push(element)
20 |         }
21 | 
22 |     }
23 |     return uniqueArr
24 | }
25 | 
26 | let arr = [1, 2, 3, 2, 4, 1, 5,123,1,2,3,4,4,4,4,6,6,]
27 | 
28 | 
29 | 
30 | console.log(removeDuplicates(arr));
31 | 
32 | 
33 | // 3rd solution
34 | 
35 | const removeduplication = (arr) => {
36 |     return arr.reduce((acc, curr) => {
37 |         if (!acc.includes(curr)) {
38 |             acc.push(curr)
39 |         }
40 |         return acc
41 |     }, [])
42 | }
43 | 
44 | console.log(removeduplication(arr));
45 | 
46 | 
47 | 
48 | 
49 | 


--------------------------------------------------------------------------------
/Unique-Values/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Document</title>
 8 | </head>
 9 | <body>
10 |     <script src="app.js"></script>
11 | </body>
12 | </html>


--------------------------------------------------------------------------------
/composition/app.js:
--------------------------------------------------------------------------------
 1 | // 
 2 | 
 3 | // Composition in JavaScript refers to a design principle that combines simple functions or components to build more complex ones. 
 4 | // It's often used in functional programming and component-based architectures,
 5 | // such as React. Instead of relying on inheritance (where a class inherits properties and methods from another class), composition allows for greater flexibility and reusability.
 6 | 
 7 | 
 8 | // 1. Function Composition:
 9 | 
10 | // This involves combining two or more functions to create a new function. The output of one function becomes the input of the next.
11 | 
12 | const add = (x) => x + 1;
13 | const multiply = (x) => x * 2;
14 | const compose= (f,g)=>(x)=>f(g(x));
15 | 
16 | const addMultipley= compose(multiply,add)
17 | 
18 | console.log(addMultipley(6));
19 | 
20 | 
21 | // Object Composition:
22 | 
23 | // This involves combining properties and methods from multiple objects to create a new object.
24 | 
25 | const person = {
26 |   name: "Amir Ali Anwar",
27 |   greet() {
28 |     console.log(`Hello, my name is ${this.name}`);
29 |   },
30 | };
31 | const employee = {
32 |   jobTitle: "Frontend Developer",
33 |   work() {
34 |     console.log(`${this.name} is working as a ${this.jobTitle}`);
35 |   },
36 | };
37 | 
38 | const createEmployees = (name) => {
39 |   return Object.assign({}, person, employee, { name });
40 | };
41 | 
42 | const newEmployee = createEmployees('Bob');
43 | newEmployee.greet();
44 | newEmployee.work();


--------------------------------------------------------------------------------
/composition/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css" />
 7 |     <title>Composition in JavaScript</title>
 8 | </head>
 9 | <body>
10 |     
11 |     <h1>Composition in JavaScript</h1>
12 |     <script src="app.js"></script>
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/create-elements-dynamically/app.js:
--------------------------------------------------------------------------------
1 | const main= document.querySelector('.main-div')
2 | const bodydiv= document.createElement('div')
3 | 
4 | const newelement= document.createTextNode('hello this is the text node');
5 | bodydiv.appendChild(newelement)
6 | 
7 | document.body.appendChild(bodydiv)


--------------------------------------------------------------------------------
/create-elements-dynamically/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Document</title>
 8 | </head>
 9 | <body>
10 |     <div class="main-div"></div>
11 |     <script src="app.js"></script>
12 | </body>
13 | </html>


--------------------------------------------------------------------------------
/debounce/app.js:
--------------------------------------------------------------------------------
 1 | const btn = document.querySelector('.btn')
 2 | 
 3 | const decounce = () => {
 4 |   console.log("clicked")
 5 |   let timeOutID;
 6 |   return () => {
 7 |     clearTimeout(timeOutID)
 8 |     console.log(timeOutID)
 9 |     timeOutID = setTimeout(() => {
10 |       console.log('you clicked me')
11 |     },2000)
12 |   }
13 | }
14 | 
15 | btn.addEventListener('click', decounce());


--------------------------------------------------------------------------------
/debounce/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Debouncing</title>
 8 | </head>
 9 | <body>
10 |     <button class="btn">Click me</button>
11 |     <script src="app.js"></script>
12 | </body>
13 | </html>


--------------------------------------------------------------------------------
/deepCopy/app.js:
--------------------------------------------------------------------------------
 1 | const complexObject = {
 2 |   name: "CareerSync",
 3 |   version: 1.0,
 4 |   isActive: true,
 5 |   details: {
 6 |     creator: "Amir",
 7 |     location: "Pakistan",
 8 |     features: ["job portal", "payroll management", "employee management"],
 9 |     metadata: {
10 |       createdAt: new Date(),
11 |       tags: ["tech", "jobs", "HR"],
12 |       nested: {
13 |         level1: {
14 |           level2: {
15 |             level3: "deep",
16 |           },
17 |         },
18 |       },
19 |     },
20 |   },
21 |   list: [1, 2, { nestedObj: "value", nestedArr: [3, 4, 5] }],
22 |   func: function () {
23 |     console.log("test function");
24 |   },
25 | };
26 | 
27 | function makeDeepCopy(obj) {
28 |   if (typeof obj !== "object" || obj == null) {
29 |     return obj;
30 |   }
31 |   let copiedVal = Array.isArray(obj) ? [] : {};
32 |   for (const key in obj) {
33 |     if (obj.hasOwnProperty(key)) {
34 |       copiedVal[key] = makeDeepCopy(obj[key]);
35 |     }
36 |   }
37 |   return copiedVal;
38 | }
39 | const copy1= makeDeepCopy(complexObject)
40 | copy1.details.creator='Hammad Ali Anwar'
41 | complexObject.details.creator='jaduu'
42 | console.log(copy1);
43 | console.log(complexObject);


--------------------------------------------------------------------------------
/deepCopy/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Deep Copy</title>
 7 | </head>
 8 | <body>
 9 |     <script src="app.js"></script>
10 | </body>
11 | </html>


--------------------------------------------------------------------------------
/htmlColorInput/app.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Amir-ali-anwar/Javascript-nuggets/215e5e886ca7f6417552a3e2a4e6b55270e49fcd/htmlColorInput/app.js


--------------------------------------------------------------------------------
/htmlColorInput/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <title>HTML Color input</title>
 9 | </head>
10 | <body>
11 |     <form class="form">
12 |         <h4>HTML Color input </h4>
13 |         <!-- name -->
14 |         <div class="form-row">
15 |           <label class="form-label" for="name">name</label>
16 |           <input
17 |             type="text"
18 |             name="name"
19 |             id="name"
20 |             class="form-input name-input"
21 |           />
22 |         </div>
23 |         <!-- email -->
24 |         <div class="form-row">
25 |           <label class="form-label" for="email">email</label>
26 |           <input
27 |             name="email"
28 |             id="email"
29 |             class="form-input email-input"
30 |           />
31 |         </div>
32 |         <!-- password -->
33 |         <div class="form-row">
34 |           <label class="form-label" for="password">color</label>
35 |           <input
36 |             type="color"
37 |             name="color"
38 |             id="color"
39 |             class="form-input password-input"
40 |           />
41 |         </div>
42 |        
43 |         <button type="submit" class="btn btn-block">register</button>
44 |       </form>
45 |       <div class="form" id="form-data">
46 |           
47 |       </div>
48 |     <script src="app.js"></script>
49 | </body>
50 | </html>


--------------------------------------------------------------------------------
/htmlColorInput/style.css:
--------------------------------------------------------------------------------
  1 | *,
  2 | ::after,
  3 | ::before {
  4 |   box-sizing: border-box;
  5 |   margin: 0;
  6 |   padding: 0;
  7 | }
  8 | /* fonts */
  9 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600&family=Montserrat&display=swap');
 10 | 
 11 | html {
 12 |   font-size: 100%;
 13 | } /*16px*/
 14 | 
 15 | :root {
 16 |   /* colors */
 17 |   --primary-100: #e2e0ff;
 18 |   --primary-200: #c1beff;
 19 |   --primary-300: #a29dff;
 20 |   --primary-400: #837dff;
 21 |   --primary-500: #645cff;
 22 |   --primary-600: #504acc;
 23 |   --primary-700: #3c3799;
 24 |   --primary-800: #282566;
 25 |   --primary-900: #141233;
 26 | 
 27 |   /* grey */
 28 |   --grey-50: #f8fafc;
 29 |   --grey-100: #f1f5f9;
 30 |   --grey-200: #e2e8f0;
 31 |   --grey-300: #cbd5e1;
 32 |   --grey-400: #94a3b8;
 33 |   --grey-500: #64748b;
 34 |   --grey-600: #475569;
 35 |   --grey-700: #334155;
 36 |   --grey-800: #1e293b;
 37 |   --grey-900: #0f172a;
 38 |   /* rest of the colors */
 39 |   --black: #222;
 40 |   --white: #fff;
 41 |   --red-light: #f8d7da;
 42 |   --red-dark: #842029;
 43 |   --green-light: #d1e7dd;
 44 |   --green-dark: #0f5132;
 45 | 
 46 |   /* fonts  */
 47 |   --headingFont: 'Roboto', sans-serif;
 48 |   --bodyFont: 'Nunito', sans-serif;
 49 |   --small-text: 0.875rem;
 50 |   --extra-small-text: 0.7em;
 51 |   /* rest of the vars */
 52 |   --backgroundColor: var(--grey-50);
 53 |   --textColor: var(--grey-900);
 54 |   --borderRadius: 0.25rem;
 55 |   --letterSpacing: 1px;
 56 |   --transition: 0.3s ease-in-out all;
 57 |   --max-width: 1120px;
 58 |   --fixed-width: 600px;
 59 | 
 60 |   /* box shadow*/
 61 |   --shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
 62 |   --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
 63 |     0 2px 4px -1px rgba(0, 0, 0, 0.06);
 64 |   --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
 65 |     0 4px 6px -2px rgba(0, 0, 0, 0.05);
 66 |   --shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
 67 |     0 10px 10px -5px rgba(0, 0, 0, 0.04);
 68 | }
 69 | 
 70 | body {
 71 |   background: var(--backgroundColor);
 72 |   font-family: var(--bodyFont);
 73 |   font-weight: 400;
 74 |   line-height: 1.75;
 75 |   color: var(--textColor);
 76 | }
 77 | 
 78 | p {
 79 |   margin-bottom: 1.5rem;
 80 |   max-width: 40em;
 81 | }
 82 | 
 83 | h1,
 84 | h2,
 85 | h3,
 86 | h4,
 87 | h5 {
 88 |   margin: 0;
 89 |   margin-bottom: 1.38rem;
 90 |   font-family: var(--headingFont);
 91 |   font-weight: 400;
 92 |   line-height: 1.3;
 93 |   text-transform: capitalize;
 94 |   letter-spacing: var(--letterSpacing);
 95 | }
 96 | 
 97 | h1 {
 98 |   margin-top: 0;
 99 |   font-size: 3.052rem;
100 | }
101 | 
102 | h2 {
103 |   font-size: 2.441rem;
104 | }
105 | 
106 | h3 {
107 |   font-size: 1.953rem;
108 | }
109 | 
110 | h4 {
111 |   font-size: 1.563rem;
112 | }
113 | 
114 | h5 {
115 |   font-size: 1.25rem;
116 | }
117 | 
118 | small,
119 | .text-small {
120 |   font-size: var(--small-text);
121 | }
122 | 
123 | a {
124 |   text-decoration: none;
125 | }
126 | ul {
127 |   list-style-type: none;
128 |   padding: 0;
129 | }
130 | 
131 | .img {
132 |   width: 100%;
133 |   display: block;
134 |   object-fit: cover;
135 | }
136 | /* buttons */
137 | 
138 | .btn {
139 |   cursor: pointer;
140 |   color: var(--white);
141 |   background: var(--primary-500);
142 |   border: transparent;
143 |   border-radius: var(--borderRadius);
144 |   letter-spacing: var(--letterSpacing);
145 |   padding: 0.375rem 0.75rem;
146 |   box-shadow: var(--shadow-1);
147 |   transition: var(--transition);
148 |   text-transform: capitalize;
149 |   display: inline-block;
150 | }
151 | .btn:hover {
152 |   background: var(--primary-700);
153 |   box-shadow: var(--shadow-3);
154 | }
155 | .btn-hipster {
156 |   color: var(--primary-500);
157 |   background: var(--primary-200);
158 | }
159 | .btn-hipster:hover {
160 |   color: var(--primary-200);
161 |   background: var(--primary-700);
162 | }
163 | .btn-block {
164 |   width: 100%;
165 | }
166 | 
167 | /* alerts */
168 | .alert {
169 |   padding: 0.375rem 0.75rem;
170 |   margin-bottom: 1rem;
171 |   border-color: transparent;
172 |   border-radius: var(--borderRadius);
173 | }
174 | 
175 | .alert-danger {
176 |   color: var(--red-dark);
177 |   background: var(--red-light);
178 | }
179 | .alert-success {
180 |   color: var(--green-dark);
181 |   background: var(--green-light);
182 | }
183 | /* form */
184 | 
185 | .form {
186 |   width: 90vw;
187 |   max-width: var(--fixed-width);
188 |   background: var(--white);
189 |   border-radius: var(--borderRadius);
190 |   box-shadow: var(--shadow-2);
191 |   padding: 2rem 2.5rem;
192 |   margin: 3rem auto;
193 | }
194 | .form-label {
195 |   display: block;
196 |   font-size: var(--small-text);
197 |   margin-bottom: 0.5rem;
198 |   text-transform: capitalize;
199 |   letter-spacing: var(--letterSpacing);
200 | }
201 | .form-input,
202 | .form-textarea {
203 |   width: 100%;
204 |   padding: 0.375rem 0.75rem;
205 |   border-radius: var(--borderRadius);
206 |   background: var(--backgroundColor);
207 |   border: 1px solid var(--grey-200);
208 | }
209 | 
210 | .form-row {
211 |   margin-bottom: 1rem;
212 | }
213 | 
214 | .form-textarea {
215 |   height: 7rem;
216 | }
217 | ::placeholder {
218 |   font-family: inherit;
219 |   color: var(--grey-400);
220 | }
221 | .form-alert {
222 |   color: var(--red-dark);
223 |   letter-spacing: var(--letterSpacing);
224 |   text-transform: capitalize;
225 | }
226 | /* alert */
227 | 
228 | @keyframes spinner {
229 |   to {
230 |     transform: rotate(360deg);
231 |   }
232 | }
233 | 
234 | .loading {
235 |   width: 6rem;
236 |   height: 6rem;
237 |   border: 5px solid var(--grey-400);
238 |   border-radius: 50%;
239 |   border-top-color: var(--primary-500);
240 |   animation: spinner 0.6s linear infinite;
241 | }
242 | .loading {
243 |   margin: 0 auto;
244 | }
245 | /* title */
246 | 
247 | .title {
248 |   text-align: center;
249 | }
250 | 
251 | .title-underline {
252 |   background: var(--primary-500);
253 |   width: 7rem;
254 |   height: 0.25rem;
255 |   margin: 0 auto;
256 |   margin-top: -1rem;
257 | }
258 | 
259 | .form h4 {
260 |   text-align: center;
261 | }
262 | .form button {
263 |   margin-top: 0.5rem;
264 | }
265 | 
266 | input[type="color"] {
267 |     -webkit-appearance: none;
268 |     -moz-appearance: none;
269 |     appearance: none;
270 |   
271 |     width: 40px; /* Adjust width */
272 |     height: 20px; /* Adjust height */
273 |     background-color: transparent; /* Or use a specific background color */
274 |     cursor: pointer;
275 |   }
276 |   
277 |   /* For WebKit browsers (Chrome, Safari) */
278 |   input[type="color"]::-webkit-color-swatch-wrapper {
279 |     padding: 0;
280 |     border: none;
281 |   }
282 |   
283 |   input[type="color"]::-webkit-color-swatch {
284 |     border: none;
285 |     background-color: transparent; /* Makes the swatch background transparent */
286 |   }
287 |   
288 |   /* For Firefox */
289 |   input[type="color"]::-moz-color-swatch {
290 |     border: none;
291 |     background-color: transparent; /* Makes the swatch background transparent */
292 |   }
293 |   


--------------------------------------------------------------------------------
/memozation/app.js:
--------------------------------------------------------------------------------
 1 | function fib(n) {
 2 |   const memo = {};
 3 |   if (n in memo) return memo[n];
 4 |   if (n <= 1) return n;
 5 |   return (memo[n] = fib(n - 1) + fib(n - 2));
 6 | }
 7 | 
 8 | 
 9 | console.log(fib(10));
10 | 


--------------------------------------------------------------------------------
/reduce/Example-1/app.js:
--------------------------------------------------------------------------------
 1 | // filter method iterates over the array
 2 | //returns single value and whatever you want to return from reduce like number, object ,array
 3 | const myfriends = [
 4 |     { name: 'Mamoon', age: 25, position: 'Senior Full stack', salary: 1000 },
 5 |     { name: 'Mubahsar', age: 26, position: 'developer', salary: 100 },
 6 |     { name: 'Babar', age: 25, position: 'SQA', salary: 6000 },
 7 |     { name: 'Haroon', age: 24, position: 'SQA', salary: 400 },
 8 |     { name: 'Amir Ali Anwar', age: 25, position: 'Full stack', salary: 500000 },
 9 | ];
10 | // const dailyTotal = myfriends.reduce((total, person) => {
11 | 
12 | //     console.log(total)
13 | //     console.log(person)
14 | //     total += person.salary
15 | //     return total
16 | // }, 0);
17 | // console.log(dailyTotal)
18 | 
19 | 
20 | // Example--2
21 | 
22 | const countSalary = Object.entries(myfriends.reduce((acc, person) => {
23 |     const key = person.name;
24 |     const keysalary = person.salary;
25 | 
26 |     const isExist = acc[key] || { count: 0, salary: 0, name: "" };
27 |     return {
28 |         ...acc, [key]: {
29 |             name: key,
30 |             count: isExist.count + 1,
31 |             salary: isExist.salary + keysalary,
32 |             color: 'red',
33 |         }
34 |     }
35 | }, {})).map(([name, { count, salary, color }])=>({
36 |     name,count,salary,color
37 | }))
38 | // console.log(countSalary);
39 | 
40 | 
41 | 
42 | //Example--3 below code block is much simpler to acheieve the same task 
43 | 
44 | const countdata= Object.values(myfriends?.reduce((acc,{name,salary,position})=>{
45 |  const isExisting= acc[name];
46 |   if(isExisting){
47 |     isExisting.count ++;
48 |     isExisting.salary+=salary
49 |   }else{
50 |     acc[name]= {name,count:1,color:"red",position}
51 |   }  
52 |  return acc
53 | },{})).sort((a,b)=>a.name-b.name)
54 | 
55 | console.log(countdata);


--------------------------------------------------------------------------------
/reduce/Example-1/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Javascript Reduce Method</title>
 8 | </head>
 9 | <body>
10 |     <script src="app.js"></script>
11 | </body>
12 | </html>


--------------------------------------------------------------------------------
/reduce/Example-2/app.js:
--------------------------------------------------------------------------------
 1 | // separate the strings, numbers and special characters from given array
 2 | 
 3 | const a1 = ["S", "U", " . ", "$", "1", "2", "3", "g", "h", "#"];
 4 | 
 5 | const organizedArray = a1.reduce(
 6 |   (result, element) => {
 7 |     if (/[0-9]/.test(element)) {
 8 |       result.numbers.push(element);
 9 |     } else if (/[a-zA-Z]/.test(element)) {
10 |       result.strings.push(element);
11 |     } else {
12 |       result.specialCharacters.push(element);
13 |     }
14 |     return result;
15 |   },
16 |   { strings: [], numbers: [], specialCharacters: [] }
17 | );
18 | const string= organizedArray.strings
19 | const numbers = organizedArray.numbers.map((str)=>parseFloat(str));
20 | // const specialCharacters = organizedArray.specialCharacters?.map((character)=>character.replace(/'/g, ''))
21 | 
22 | console.log({string});
23 | console.log({numbers});
24 | // console.log({specialCharacters});
25 | 
26 | 
27 | 
28 | function abc(a,b,c,...rest){
29 |   console.log(a,b,c,+rest);
30 |  return a+b+c+(+rest)
31 | }
32 | 
33 | let array=[1,2,4,5]
34 | 
35 | console.log(abc(...array));


--------------------------------------------------------------------------------
/reduce/Example-2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Javascript Reduce Method Example 2</title>
 8 | </head>
 9 | <body>
10 |     <script src="app.js"></script>
11 | </body>
12 | </html>


--------------------------------------------------------------------------------
/video/app.js:
--------------------------------------------------------------------------------
 1 | // MDN
 2 | // The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
 3 | // The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images.
 4 | const btn = document.querySelector(".switch-btn");
 5 | const video = document.querySelector(".video-container");
 6 | 
 7 | btn.addEventListener("click", function () {
 8 |   if (!btn.classList.contains("slide")) {
 9 |     btn.classList.add("slide");
10 |     video.pause();
11 |   } else {
12 |     btn.classList.remove("slide");
13 |     video.play();
14 |   }
15 | });
16 | const preloader = document.querySelector(".preloader");
17 | 
18 | window.addEventListener('load',()=>{
19 |     preloader.classList.add("hide-preloader");
20 | })
21 | 


--------------------------------------------------------------------------------
/video/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8" />
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |   <title>Video</title>
 8 | 
 9 |   <!-- styles -->
10 |   <link rel="stylesheet" href="styles.css" />
11 | </head>
12 | 
13 | <body>
14 |   <!-- preloader -->
15 |   <div class="preloader">
16 |     <img src="preloader.gif" alt="preloader" class="preloader__item" />
17 |   </div>
18 |   <!-- header -->
19 |   <header>
20 |     <video controls muted autoplay loop class="video-container">
21 |       <source src="./video.mp4" type="video/mp4" />
22 |     </video>
23 |     <h1>video project</h1>
24 |     <!-- video switch -->
25 |     <button class="switch-btn">
26 |       <span>
27 |         play
28 |       </span>
29 |       <span>
30 |         pause
31 |       </span>
32 |       <span class="switch"></span>
33 |     </button>
34 |   </header>
35 |   <!-- javascript -->
36 |   <script src="app.js"></script>
37 | </body>
38 | 
39 | </html>


--------------------------------------------------------------------------------
/video/logo.svg:
--------------------------------------------------------------------------------
 1 | <svg width="230" height="47" viewBox="0 0 230 47" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g filter="url(#filter0_d)">
 3 | <path d="M21.1797 25.2324C20.916 27.4883 20.0811 29.2314 18.6748 30.4619C17.2783 31.6826 15.418 32.293 13.0938 32.293C10.5742 32.293 8.55273 31.3896 7.0293 29.583C5.51562 27.7764 4.75879 25.3594 4.75879 22.332V20.2812C4.75879 18.2988 5.11035 16.5557 5.81348 15.0518C6.52637 13.5479 7.53223 12.3955 8.83105 11.5947C10.1299 10.7842 11.6338 10.3789 13.3428 10.3789C15.6084 10.3789 17.4248 11.0137 18.792 12.2832C20.1592 13.543 20.9551 15.291 21.1797 17.5273H18.3525C18.1084 15.8281 17.5762 14.5977 16.7559 13.8359C15.9453 13.0742 14.8076 12.6934 13.3428 12.6934C11.5459 12.6934 10.1348 13.3574 9.10938 14.6855C8.09375 16.0137 7.58594 17.9033 7.58594 20.3545V22.4199C7.58594 24.7344 8.06934 26.5752 9.03613 27.9424C10.0029 29.3096 11.3555 29.9932 13.0938 29.9932C14.6562 29.9932 15.8525 29.6416 16.6826 28.9385C17.5225 28.2256 18.0791 26.9902 18.3525 25.2324H21.1797ZM26.8896 23.9287C26.8896 22.376 27.1924 20.9795 27.7979 19.7393C28.4131 18.499 29.2627 17.542 30.3467 16.8682C31.4404 16.1943 32.6855 15.8574 34.082 15.8574C36.2402 15.8574 37.9834 16.6045 39.3115 18.0986C40.6494 19.5928 41.3184 21.5801 41.3184 24.0605V24.251C41.3184 25.7939 41.0205 27.1807 40.4248 28.4111C39.8389 29.6318 38.9941 30.584 37.8906 31.2676C36.7969 31.9512 35.5371 32.293 34.1113 32.293C31.9629 32.293 30.2197 31.5459 28.8818 30.0518C27.5537 28.5576 26.8896 26.5801 26.8896 24.1191V23.9287ZM29.6143 24.251C29.6143 26.0088 30.0195 27.4199 30.8301 28.4844C31.6504 29.5488 32.7441 30.0811 34.1113 30.0811C35.4883 30.0811 36.582 29.5439 37.3926 28.4697C38.2031 27.3857 38.6084 25.8721 38.6084 23.9287C38.6084 22.1904 38.1934 20.7842 37.3633 19.71C36.543 18.626 35.4492 18.084 34.082 18.084C32.7441 18.084 31.665 18.6162 30.8447 19.6807C30.0244 20.7451 29.6143 22.2686 29.6143 24.251ZM47.0576 23.9434C47.0576 21.5117 47.6338 19.5586 48.7861 18.084C49.9385 16.5996 51.4473 15.8574 53.3125 15.8574C55.168 15.8574 56.6377 16.4922 57.7217 17.7617V9.5H60.4316V32H57.9414L57.8096 30.3008C56.7256 31.6289 55.2168 32.293 53.2832 32.293C51.4473 32.293 49.9482 31.541 48.7861 30.0371C47.6338 28.5332 47.0576 26.5703 47.0576 24.1484V23.9434ZM49.7676 24.251C49.7676 26.0479 50.1387 27.4541 50.8809 28.4697C51.623 29.4854 52.6484 29.9932 53.957 29.9932C55.6758 29.9932 56.9307 29.2217 57.7217 27.6787V20.3984C56.9111 18.9043 55.666 18.1572 53.9863 18.1572C52.6582 18.1572 51.623 18.6699 50.8809 19.6953C50.1387 20.7207 49.7676 22.2393 49.7676 24.251ZM70.5947 32H67.8848V16.1504H70.5947V32ZM67.665 11.9463C67.665 11.5068 67.7969 11.1357 68.0605 10.833C68.334 10.5303 68.7344 10.3789 69.2617 10.3789C69.7891 10.3789 70.1895 10.5303 70.4629 10.833C70.7363 11.1357 70.873 11.5068 70.873 11.9463C70.873 12.3857 70.7363 12.752 70.4629 13.0449C70.1895 13.3379 69.7891 13.4844 69.2617 13.4844C68.7344 13.4844 68.334 13.3379 68.0605 13.0449C67.7969 12.752 67.665 12.3857 67.665 11.9463ZM80.5088 16.1504L80.5967 18.1426C81.8076 16.6191 83.3896 15.8574 85.3428 15.8574C88.6924 15.8574 90.3818 17.7471 90.4111 21.5264V32H87.7012V21.5117C87.6914 20.3691 87.4277 19.5244 86.9102 18.9775C86.4023 18.4307 85.6064 18.1572 84.5225 18.1572C83.6436 18.1572 82.8721 18.3916 82.208 18.8604C81.5439 19.3291 81.0264 19.9443 80.6553 20.7061V32H77.9453V16.1504H80.5088ZM96.8535 23.9434C96.8535 21.4727 97.4248 19.5098 98.5674 18.0547C99.71 16.5898 101.224 15.8574 103.108 15.8574C105.042 15.8574 106.551 16.541 107.635 17.9082L107.767 16.1504H110.242V31.6191C110.242 33.6699 109.632 35.2861 108.411 36.4678C107.2 37.6494 105.569 38.2402 103.519 38.2402C102.376 38.2402 101.258 37.9961 100.164 37.5078C99.0703 37.0195 98.2354 36.3506 97.6592 35.501L99.0654 33.875C100.228 35.3105 101.648 36.0283 103.328 36.0283C104.646 36.0283 105.672 35.6572 106.404 34.915C107.146 34.1729 107.518 33.1279 107.518 31.7803V30.418C106.434 31.668 104.954 32.293 103.079 32.293C101.224 32.293 99.7197 31.5459 98.5674 30.0518C97.4248 28.5576 96.8535 26.5215 96.8535 23.9434ZM99.5781 24.251C99.5781 26.0381 99.9443 27.4443 100.677 28.4697C101.409 29.4854 102.435 29.9932 103.753 29.9932C105.462 29.9932 106.717 29.2168 107.518 27.6641V20.4277C106.688 18.9141 105.442 18.1572 103.782 18.1572C102.464 18.1572 101.434 18.6699 100.691 19.6953C99.9492 20.7207 99.5781 22.2393 99.5781 24.251Z" fill="#222222"/>
 4 | <path d="M139.987 26.4336H131.052L129.045 32H126.145L134.289 10.6719H136.75L144.909 32H142.023L139.987 26.4336ZM131.901 24.1191H139.152L135.52 14.1436L131.901 24.1191ZM149.696 23.9434C149.696 21.5117 150.272 19.5586 151.425 18.084C152.577 16.5996 154.086 15.8574 155.951 15.8574C157.807 15.8574 159.276 16.4922 160.36 17.7617V9.5H163.07V32H160.58L160.448 30.3008C159.364 31.6289 157.855 32.293 155.922 32.293C154.086 32.293 152.587 31.541 151.425 30.0371C150.272 28.5332 149.696 26.5703 149.696 24.1484V23.9434ZM152.406 24.251C152.406 26.0479 152.777 27.4541 153.52 28.4697C154.262 29.4854 155.287 29.9932 156.596 29.9932C158.314 29.9932 159.569 29.2217 160.36 27.6787V20.3984C159.55 18.9043 158.305 18.1572 156.625 18.1572C155.297 18.1572 154.262 18.6699 153.52 19.6953C152.777 20.7207 152.406 22.2393 152.406 24.251ZM169.63 23.9434C169.63 21.5117 170.206 19.5586 171.358 18.084C172.511 16.5996 174.02 15.8574 175.885 15.8574C177.74 15.8574 179.21 16.4922 180.294 17.7617V9.5H183.004V32H180.514L180.382 30.3008C179.298 31.6289 177.789 32.293 175.855 32.293C174.02 32.293 172.521 31.541 171.358 30.0371C170.206 28.5332 169.63 26.5703 169.63 24.1484V23.9434ZM172.34 24.251C172.34 26.0479 172.711 27.4541 173.453 28.4697C174.195 29.4854 175.221 29.9932 176.529 29.9932C178.248 29.9932 179.503 29.2217 180.294 27.6787V20.3984C179.483 18.9043 178.238 18.1572 176.559 18.1572C175.23 18.1572 174.195 18.6699 173.453 19.6953C172.711 20.7207 172.34 22.2393 172.34 24.251ZM193.167 32H190.457V16.1504H193.167V32ZM190.237 11.9463C190.237 11.5068 190.369 11.1357 190.633 10.833C190.906 10.5303 191.307 10.3789 191.834 10.3789C192.361 10.3789 192.762 10.5303 193.035 10.833C193.309 11.1357 193.445 11.5068 193.445 11.9463C193.445 12.3857 193.309 12.752 193.035 13.0449C192.762 13.3379 192.361 13.4844 191.834 13.4844C191.307 13.4844 190.906 13.3379 190.633 13.0449C190.369 12.752 190.237 12.3857 190.237 11.9463ZM206.875 30.0811C207.842 30.0811 208.687 29.7881 209.409 29.2021C210.132 28.6162 210.532 27.8838 210.61 27.0049H213.174C213.125 27.9131 212.812 28.7773 212.236 29.5977C211.66 30.418 210.889 31.0723 209.922 31.5605C208.965 32.0488 207.949 32.293 206.875 32.293C204.717 32.293 202.998 31.5752 201.719 30.1396C200.449 28.6943 199.814 26.7217 199.814 24.2217V23.7676C199.814 22.2246 200.098 20.8525 200.664 19.6514C201.23 18.4502 202.041 17.5176 203.096 16.8535C204.16 16.1895 205.415 15.8574 206.86 15.8574C208.638 15.8574 210.112 16.3896 211.284 17.4541C212.466 18.5186 213.096 19.9004 213.174 21.5996H210.61C210.532 20.5742 210.142 19.7344 209.438 19.0801C208.745 18.416 207.886 18.084 206.86 18.084C205.483 18.084 204.414 18.582 203.652 19.5781C202.9 20.5645 202.524 21.9951 202.524 23.8701V24.3828C202.524 26.209 202.9 27.6152 203.652 28.6016C204.404 29.5879 205.479 30.0811 206.875 30.0811ZM222.897 12.3125V16.1504H225.856V18.2451H222.897V28.0742C222.897 28.709 223.029 29.1875 223.293 29.5098C223.557 29.8223 224.006 29.9785 224.641 29.9785C224.953 29.9785 225.383 29.9199 225.93 29.8027V32C225.217 32.1953 224.523 32.293 223.85 32.293C222.639 32.293 221.726 31.9268 221.11 31.1943C220.495 30.4619 220.188 29.4219 220.188 28.0742V18.2451H217.302V16.1504H220.188V12.3125H222.897Z" fill="#49A6E9"/>
 5 | </g>
 6 | <defs>
 7 | <filter id="filter0_d" x="0.758789" y="9.5" width="229.171" height="36.7402" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 8 | <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 9 | <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
10 | <feOffset dy="4"/>
11 | <feGaussianBlur stdDeviation="2"/>
12 | <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
13 | <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
14 | <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
15 | </filter>
16 | </defs>
17 | </svg>
18 | 


--------------------------------------------------------------------------------
/video/preloader.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Amir-ali-anwar/Javascript-nuggets/215e5e886ca7f6417552a3e2a4e6b55270e49fcd/video/preloader.gif


--------------------------------------------------------------------------------
/video/styles.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | =============== 
  3 | Fonts
  4 | ===============
  5 | */
  6 | @import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");
  7 | 
  8 | /*
  9 | =============== 
 10 | Variables
 11 | ===============
 12 | */
 13 | 
 14 | :root {
 15 |   /* dark shades of primary color*/
 16 |   --clr-primary-1: hsl(205, 86%, 17%);
 17 |   --clr-primary-2: hsl(205, 77%, 27%);
 18 |   --clr-primary-3: hsl(205, 72%, 37%);
 19 |   --clr-primary-4: hsl(205, 63%, 48%);
 20 |   /* primary/main color */
 21 |   --clr-primary-5: #49a6e9;
 22 |   /* lighter shades of primary color */
 23 |   --clr-primary-6: hsl(205, 89%, 70%);
 24 |   --clr-primary-7: hsl(205, 90%, 76%);
 25 |   --clr-primary-8: hsl(205, 86%, 81%);
 26 |   --clr-primary-9: hsl(205, 90%, 88%);
 27 |   --clr-primary-10: hsl(205, 100%, 96%);
 28 |   /* darkest grey - used for headings */
 29 |   --clr-grey-1: hsl(209, 61%, 16%);
 30 |   --clr-grey-2: hsl(211, 39%, 23%);
 31 |   --clr-grey-3: hsl(209, 34%, 30%);
 32 |   --clr-grey-4: hsl(209, 28%, 39%);
 33 |   /* grey used for paragraphs */
 34 |   --clr-grey-5: hsl(210, 22%, 49%);
 35 |   --clr-grey-6: hsl(209, 23%, 60%);
 36 |   --clr-grey-7: hsl(211, 27%, 70%);
 37 |   --clr-grey-8: hsl(210, 31%, 80%);
 38 |   --clr-grey-9: hsl(212, 33%, 89%);
 39 |   --clr-grey-10: hsl(210, 36%, 96%);
 40 |   --clr-white: #fff;
 41 |   --clr-red-dark: hsl(360, 67%, 44%);
 42 |   --clr-red-light: hsl(360, 71%, 66%);
 43 |   --clr-green-dark: hsl(125, 67%, 44%);
 44 |   --clr-green-light: hsl(125, 71%, 66%);
 45 |   --clr-black: #222;
 46 |   --ff-primary: "Roboto", sans-serif;
 47 |   --ff-secondary: "Open Sans", sans-serif;
 48 |   --transition: all 0.3s linear;
 49 |   --spacing: 0.25rem;
 50 |   --radius: 0.5rem;
 51 |   --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 52 |   --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 53 |   --max-width: 1170px;
 54 |   --fixed-width: 620px;
 55 | }
 56 | /*
 57 | =============== 
 58 | Global Styles
 59 | ===============
 60 | */
 61 | 
 62 | *,
 63 | ::after,
 64 | ::before {
 65 |   margin: 0;
 66 |   padding: 0;
 67 |   box-sizing: border-box;
 68 | }
 69 | body {
 70 |   font-family: var(--ff-secondary);
 71 |   background: var(--clr-grey-10);
 72 |   color: var(--clr-grey-1);
 73 |   line-height: 1.5;
 74 |   font-size: 0.875rem;
 75 | }
 76 | ul {
 77 |   list-style-type: none;
 78 | }
 79 | a {
 80 |   text-decoration: none;
 81 | }
 82 | img:not(.logo) {
 83 |   width: 100%;
 84 | }
 85 | img {
 86 |   display: block;
 87 | }
 88 | 
 89 | h1,
 90 | h2,
 91 | h3,
 92 | h4 {
 93 |   letter-spacing: var(--spacing);
 94 |   text-transform: capitalize;
 95 |   line-height: 1.25;
 96 |   margin-bottom: 0.75rem;
 97 |   font-family: var(--ff-primary);
 98 | }
 99 | h1 {
100 |   font-size: 3rem;
101 | }
102 | h2 {
103 |   font-size: 2rem;
104 | }
105 | h3 {
106 |   font-size: 1.25rem;
107 | }
108 | h4 {
109 |   font-size: 0.875rem;
110 | }
111 | p {
112 |   margin-bottom: 1.25rem;
113 |   color: var(--clr-grey-5);
114 | }
115 | @media screen and (min-width: 800px) {
116 |   h1 {
117 |     font-size: 4rem;
118 |   }
119 |   h2 {
120 |     font-size: 2.5rem;
121 |   }
122 |   h3 {
123 |     font-size: 1.75rem;
124 |   }
125 |   h4 {
126 |     font-size: 1rem;
127 |   }
128 |   body {
129 |     font-size: 1rem;
130 |   }
131 |   h1,
132 |   h2,
133 |   h3,
134 |   h4 {
135 |     line-height: 1;
136 |   }
137 | }
138 | /*  global classes */
139 | 
140 | .btn {
141 |   text-transform: uppercase;
142 |   background: transparent;
143 |   color: var(--clr-black);
144 |   padding: 0.375rem 0.75rem;
145 |   letter-spacing: var(--spacing);
146 |   display: inline-block;
147 |   transition: var(--transition);
148 |   font-size: 0.875rem;
149 |   border: 2px solid var(--clr-black);
150 |   cursor: pointer;
151 |   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
152 |   border-radius: var(--radius);
153 | }
154 | .btn:hover {
155 |   color: var(--clr-white);
156 |   background: var(--clr-black);
157 | }
158 | /* section */
159 | .section {
160 |   padding: 5rem 0;
161 | }
162 | 
163 | .section-center {
164 |   width: 90vw;
165 |   margin: 0 auto;
166 |   max-width: 1170px;
167 | }
168 | @media screen and (min-width: 992px) {
169 |   .section-center {
170 |     width: 95vw;
171 |   }
172 | }
173 | main {
174 |   min-height: 100vh;
175 |   display: grid;
176 |   place-items: center;
177 | }
178 | /*
179 | =============== 
180 | Video
181 | ===============
182 | */
183 | .preloader {
184 |   position: fixed;
185 |   top: 0;
186 |   left: 0;
187 |   right: 0;
188 |   bottom: 0;
189 |   background: var(--clr-white);
190 |   display: grid;
191 |   justify-content: center;
192 |   align-items: center;
193 |   visibility: visible;
194 |   z-index: 999;
195 |   transition: var(--transition);
196 | }
197 | .hide-preloader {
198 |   z-index: -999;
199 |   visibility: hidden;
200 | }
201 | 
202 | header {
203 |   min-height: 100vh;
204 |   position: relative;
205 |   display: grid;
206 |   place-items: center;
207 | }
208 | .video-container {
209 |   position: absolute;
210 |   top: 0;
211 |   left: 0;
212 |   width: 100%;
213 |   height: 100%;
214 |   object-fit: cover;
215 |   z-index: -2;
216 | }
217 | h1 {
218 |   color: var(--clr-white);
219 | }
220 | /* switch button */
221 | 
222 | .switch-btn {
223 |   position: absolute;
224 |   bottom: 7%;
225 |   left: 7%;
226 |   width: 7rem;
227 |   height: 2rem;
228 |   display: flex;
229 |   border-radius: var(--radius);
230 |   align-items: center;
231 |   justify-content: space-around;
232 |   border: none;
233 |   transition: var(--transition);
234 | }
235 | .switch-btn span {
236 |   display: inline-block;
237 |   font-size: 0.85rem;
238 |   cursor: pointer;
239 |   text-transform: capitalize;
240 |   color: var(--clr-primary-5);
241 | }
242 | .switch {
243 |   position: absolute;
244 |   width: 50%;
245 |   height: 100%;
246 |   top: 0;
247 |   left: 0;
248 |   background: var(--clr-primary-5);
249 |   border-radius: var(--radius);
250 |   margin: 0;
251 |   display: block;
252 |   transition: var(--transition);
253 | }
254 | .slide .switch {
255 |   left: 50%;
256 | }
257 | /* header after */
258 | /* header::after {
259 |   content: "";
260 |   position: absolute;
261 |   top: 0;
262 |   left: 0;
263 |   width: 100%;
264 |   height: 100%;
265 |   background: rgba(0, 0, 0, 0.7);
266 |   z-index: -1;
267 | } */
268 | 


--------------------------------------------------------------------------------
/video/video.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Amir-ali-anwar/Javascript-nuggets/215e5e886ca7f6417552a3e2a4e6b55270e49fcd/video/video.mp4


--------------------------------------------------------------------------------