├── .DS_Store ├── CSS ├── Class - 01 │ ├── index.html │ └── style.css ├── Class - 02 │ ├── index.html │ └── style.css ├── Class - 03 │ ├── index.html │ └── style.css ├── Class - 04 │ ├── images │ │ └── capadocia-inverno.jpg │ ├── index.html │ └── style.css ├── Class - 05 │ ├── index.html │ └── style.css ├── Class - 06 │ ├── index.html │ └── style.css ├── Class - 07 │ ├── index.html │ └── style.css ├── Class - 08 │ ├── fonts │ │ ├── AlexBrush-Regular.ttf │ │ └── KaushanScript-Regular.otf │ ├── index.html │ └── style.css ├── Class - 09 │ ├── index.html │ └── style.css ├── Class - 10 │ ├── images │ │ └── heart-boder1.jpg │ ├── index.html │ └── style.css ├── Class - 11 │ ├── images │ │ ├── myBall.cur │ │ └── star.jpg │ ├── index.html │ └── style.css ├── Class - 12 │ ├── index.html │ └── style.css ├── Class - 13 │ ├── index.html │ └── style.css ├── Class - 14 │ ├── images │ │ ├── akhtar.jpg │ │ ├── bgrose.jpg │ │ ├── header.gif │ │ ├── pattern.gif │ │ ├── rosebg1.avif │ │ └── tulip.gif │ ├── index.html │ └── style.css ├── Class - 15 │ ├── index.html │ └── style.css ├── Class - 16 │ ├── index.html │ └── style.css ├── Class - 17 │ ├── index.html │ └── style.css ├── Class - 18 │ ├── index.html │ └── style.css └── Lab Work │ ├── .DS_Store │ ├── Class - 01 Layouts │ ├── images │ │ ├── chat.png │ │ ├── leafe.webp │ │ └── logo.png │ ├── index.html │ └── style.css │ ├── Class - 02 Layouts - Responsive │ ├── images │ │ ├── chat.png │ │ ├── leafe.webp │ │ └── logo.png │ ├── index.html │ └── style.css │ └── Class - 03 FoodPanda │ ├── images │ ├── burger.jfif │ ├── cart.PNG │ ├── lang.PNG │ ├── location.PNG │ ├── logo.PNG │ ├── panda-hero.webp │ └── user.PNG │ ├── index.html │ └── style.css ├── HTML ├── class - 01 │ └── index.html ├── class - 02 │ └── index.html ├── class - 03 │ └── index.html ├── class - 04 │ └── index.html ├── class - 05 │ ├── about │ │ └── about.html │ ├── contact │ │ └── contact.html │ └── index.html ├── class - 06 │ ├── contact │ │ └── contact.html │ ├── index.html │ ├── message │ │ └── message.html │ └── service │ │ └── service.html ├── class - 07 │ ├── images │ │ ├── afridi.webp │ │ ├── frog.png │ │ └── youtube.png │ └── index.html ├── class - 08 │ └── index.html ├── class - 09 │ └── index.html ├── class - 10 │ ├── images │ │ ├── 568182.png │ │ ├── save.jpg │ │ └── subscribe.avif │ └── index.html └── class - 11 │ ├── about.html │ └── index.html ├── JavaScript ├── Class 1 │ ├── app.js │ └── index.html ├── Class 10 │ ├── app.js │ ├── images │ │ └── shoaib.webp │ ├── index.html │ └── style.css ├── Class 11 │ ├── app.js │ └── index.html ├── Class 12 Date and time │ ├── app.js │ └── index.html ├── Class 13 Functions │ ├── app.js │ └── index.html ├── Class 14 Objects │ ├── app.js │ └── index.html ├── Class 15 │ ├── app.js │ ├── index.html │ └── style.css ├── Class 16 │ ├── app.js │ ├── index.html │ └── style.css ├── Class 17 │ ├── app.js │ ├── index.html │ └── style.css ├── Class 18 │ ├── app.js │ ├── index.html │ └── style.css ├── Class 19 │ ├── app.js │ ├── index.html │ └── style.css ├── Class 2 │ ├── app.js │ ├── index.html │ └── style.css ├── Class 20 Objects │ ├── app.js │ ├── index.html │ └── style.css ├── Class 21 │ ├── app.js │ ├── index.html │ └── style.css ├── Class 22 Advance JS │ ├── app.js │ ├── index.html │ └── style.css ├── Class 3 │ ├── app.js │ └── index.html ├── Class 4 │ ├── app.js │ └── index.html ├── Class 5 │ ├── app.js │ └── index.html ├── Class 6 │ ├── app.js │ └── index.html ├── Class 7 │ ├── app.js │ └── index.html ├── Class 8 │ ├── app.js │ └── index.html ├── Class 9 │ ├── app.js │ └── index.html ├── assignment │ ├── 12-13_IF...ELSE_ELSE...IFStatements_SetOfConditions.pdf │ ├── 14-17_Arrays.pdf │ ├── 18-20_FORLoops.pdf │ ├── 1_Alerts.docx │ ├── 20-25_Strings.pdf │ ├── 26-34_MathAndDateMethods.pdf │ ├── 2_VariablesForStrings.pdf │ ├── 35-38_Functions.docx │ ├── 3_VariablesForNumbers.pdf │ ├── 4_VariableNames_LegalAndIllegal.pdf │ ├── 5-7_MathExpressions.pdf │ └── 8-11_ConcatenatingStrings_Prompts_IFStatements_ComparisonOperators.pdf └── lab │ ├── lab 1 │ ├── app.js │ └── index.html │ ├── lab 10 │ ├── app.js │ ├── index.html │ └── style.css │ ├── lab 11 todo with array │ ├── app.js │ ├── index.html │ └── style.css │ ├── lab 12 todo without array │ ├── app.js │ ├── index.html │ └── style.css │ ├── lab 13 e-commerce │ ├── index.html │ ├── script.js │ └── styles.css │ ├── lab 2 │ ├── app.js │ └── index.html │ ├── lab 3 │ ├── app.js │ └── index.html │ ├── lab 4 │ ├── app.js │ └── index.html │ ├── lab 5 │ ├── app.js │ └── index.html │ ├── lab 6 │ ├── app.js │ └── index.html │ ├── lab 7 │ ├── app.js │ └── index.html │ ├── lab 8 │ ├── app.js │ └── index.html │ └── lab 9 │ ├── app.js │ └── index.html ├── NextJS ├── class-01 - helloworld │ ├── .eslintrc.json │ ├── .gitignore │ ├── README.md │ ├── next.config.mjs │ ├── package-lock.json │ ├── package.json │ ├── postcss.config.mjs │ ├── public │ │ ├── next.svg │ │ └── vercel.svg │ ├── src │ │ └── app │ │ │ ├── button.tsx │ │ │ ├── favicon.ico │ │ │ ├── globals.css │ │ │ ├── helloworld.tsx │ │ │ ├── layout.tsx │ │ │ └── page.tsx │ ├── tailwind.config.ts │ ├── tsconfig.json │ └── yarn.lock ├── class-02 - prop and states │ ├── .eslintrc.json │ ├── .gitignore │ ├── README.md │ ├── next.config.mjs │ ├── package-lock.json │ ├── package.json │ ├── postcss.config.mjs │ ├── public │ │ └── images │ │ │ ├── next.svg │ │ │ └── vercel.svg │ ├── src │ │ └── app │ │ │ ├── counter.tsx │ │ │ ├── favicon.ico │ │ │ ├── globals.css │ │ │ ├── layout.tsx │ │ │ └── page.tsx │ ├── tailwind.config.ts │ └── tsconfig.json ├── class-03 - conditional rendering and lists │ ├── .eslintrc.json │ ├── .gitignore │ ├── README.md │ ├── next.config.mjs │ ├── package-lock.json │ ├── package.json │ ├── postcss.config.mjs │ ├── public │ │ └── images │ │ │ ├── next.svg │ │ │ └── vercel.svg │ ├── src │ │ └── app │ │ │ ├── counter.tsx │ │ │ ├── favicon.ico │ │ │ ├── globals.css │ │ │ ├── layout.tsx │ │ │ ├── page.tsx │ │ │ └── studentslist.tsx │ ├── tailwind.config.ts │ └── tsconfig.json ├── class-04 - Products and Categories │ ├── .eslintrc.json │ ├── .gitignore │ ├── README.md │ ├── next.config.mjs │ ├── package-lock.json │ ├── package.json │ ├── postcss.config.mjs │ ├── public │ │ └── images │ │ │ ├── next.svg │ │ │ └── vercel.svg │ ├── src │ │ └── app │ │ │ ├── allproducts.tsx │ │ │ ├── categories.tsx │ │ │ ├── counter.tsx │ │ │ ├── favicon.ico │ │ │ ├── globals.css │ │ │ ├── layout.tsx │ │ │ ├── myinfo.tsx │ │ │ ├── page.tsx │ │ │ ├── product-type.ts │ │ │ ├── product.tsx │ │ │ └── studentslist.tsx │ ├── tailwind.config.ts │ └── tsconfig.json ├── class-05 - Auth Example │ ├── .eslintrc.json │ ├── .gitignore │ ├── README.md │ ├── next.config.mjs │ ├── package-lock.json │ ├── package.json │ ├── postcss.config.mjs │ ├── public │ │ └── images │ │ │ ├── next.svg │ │ │ └── vercel.svg │ ├── src │ │ ├── app.rar │ │ └── app │ │ │ ├── favicon.ico │ │ │ ├── globals.css │ │ │ ├── greet.tsx │ │ │ ├── hobbies.tsx │ │ │ ├── layout.tsx │ │ │ ├── login.tsx │ │ │ ├── page.tsx │ │ │ ├── usertimeline.tsx │ │ │ └── usertype.ts │ ├── tailwind.config.ts │ └── tsconfig.json └── class-06 - App Routers │ ├── .env │ ├── .eslintrc.json │ ├── .gitignore │ ├── README.md │ ├── next.config.mjs │ ├── package-lock.json │ ├── package.json │ ├── postcss.config.mjs │ ├── public │ ├── next.svg │ └── vercel.svg │ ├── src │ ├── app │ │ ├── favicon.ico │ │ ├── globals.css │ │ ├── layout.tsx │ │ ├── login │ │ │ └── page.tsx │ │ ├── page.tsx │ │ └── signup │ │ │ └── page.tsx │ └── components │ │ └── authform.tsx │ ├── tailwind.config.ts │ └── tsconfig.json ├── TypeScript ├── class 01 - Hello World │ ├── .gitignore │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── script.js │ ├── script.ts │ └── tsconfig.json ├── class 02 - Hello World │ ├── .gitignore │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── script.js │ ├── script.ts │ └── tsconfig.json ├── class 03 - Hello World │ ├── .gitignore │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── script.js │ ├── script.ts │ └── tsconfig.json └── class 04 - Modules and Classes │ ├── .gitignore │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── script.js │ ├── script.ts │ ├── tsconfig.json │ └── utils │ ├── sum.js │ └── sum.ts ├── books ├── Wiley.HTML.and.CSS.Oct.2011.pdf └── a.smarter.way.to.learn.javascript.pdf └── git commands.txt /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/.DS_Store -------------------------------------------------------------------------------- /CSS/Class - 01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Document 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |

Hello World

19 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum inventore nihil esse totam, sequi 20 | earum mollitia 21 | distinctio laborum. Quos labore molestiae ea excepturi reiciendis provident placeat, minima vitae corporis 22 | totam!

23 | 24 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum inventore nihil esse totam, sequi 25 | earum mollitia 26 | distinctio laborum. Quos labore molestiae ea excepturi reiciendis provident placeat, minima vitae corporis 27 | totam!

28 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum inventore nihil esse totam, sequi earum mollitia 29 | distinctio laborum. Quos labore molestiae ea excepturi reiciendis provident placeat, minima vitae corporis 30 | totam!

31 | 32 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum inventore nihil esse totam, sequi 33 | earum mollitia 34 | distinctio laborum. Quos labore molestiae ea excepturi reiciendis provident placeat, minima vitae corporis 35 | totam!

36 | 37 | 38 | -------------------------------------------------------------------------------- /CSS/Class - 01/style.css: -------------------------------------------------------------------------------- 1 | /* body { 2 | background-color: lightcyan; 3 | } 4 | 5 | h1 { 6 | color: purple; 7 | } 8 | 9 | p { 10 | color: green; 11 | } 12 | */ 13 | 14 | h1 { 15 | color: yellow !important; 16 | } 17 | 18 | h1 { 19 | color: orange; 20 | } 21 | 22 | * { 23 | background-color: aqua; 24 | color: purple; 25 | } 26 | 27 | 28 | 29 | 30 | .even { 31 | color: blue; 32 | } 33 | 34 | .even { 35 | color: red; 36 | } 37 | 38 | 39 | #special { 40 | text-decoration: underline; 41 | } -------------------------------------------------------------------------------- /CSS/Class - 02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |

Hello World

13 | 14 |
15 | Facebook 16 | 24 |
25 | 26 | 34 | 35 | 36 | 37 | 38 | 39 | 40 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus vitae voluptas 41 | adipisci perspiciatis ut unde 42 | labore aut ducimus quos? Accusamus quisquam incidunt magni quasi accusantium labore eum dolorum sint ea?

43 |

JavaScript Lorem ipsum dolor sit amet consectetur adipisicing elit. 44 | Repellendus vitae voluptas adipisci 45 | perspiciatis ut unde 46 | labore aut ducimus quos? Accusamus quisquam incidunt magni quasi accusantium labore eum dolorum sint ea?

47 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus vitae voluptas 48 | adipisci perspiciatis ut unde 49 | labore aut ducimus quos? Accusamus quisquam incidunt magni quasi accusantium labore eum dolorum sint ea?

50 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus vitae voluptas 51 | adipisci perspiciatis ut unde 52 | labore aut ducimus quos? Accusamus quisquam incidunt magni quasi accusantium labore eum dolorum sint ea?

53 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus vitae voluptas 54 | adipisci perspiciatis ut unde 55 | labore aut ducimus quos? Accusamus quisquam incidunt magni quasi accusantium labore eum dolorum sint ea?

56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /CSS/Class - 02/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | background-color: antiquewhite; 3 | } 4 | 5 | h1, 6 | p { 7 | color: brown; 8 | } 9 | 10 | #js-1 { 11 | /* text-decoration: underline; */ 12 | font-weight: bold; 13 | } 14 | 15 | .special { 16 | /* color: white; */ 17 | } 18 | 19 | h1.special { 20 | /* background-color: aqua; */ 21 | } 22 | 23 | 24 | 25 | div>ul>li>a { 26 | color: red; 27 | } 28 | 29 | div a { 30 | background-color: aquamarine; 31 | } 32 | 33 | 34 | div, 35 | h1 {} 36 | 37 | div>h1 {} 38 | 39 | div h1 {} -------------------------------------------------------------------------------- /CSS/Class - 03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |

Potatoes

13 |

There are dozens of different 14 | potato varieties. 15 |

16 |

They are usually described as early, second early 17 | and maincrop potatoes.

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /CSS/Class - 03/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: Arial, Helvetica, sans-serif; 3 | } 4 | 5 | h1 { 6 | font-family: "Courier New", monospace; 7 | } 8 | 9 | i { 10 | color: green; 11 | } 12 | 13 | i { 14 | color: red; 15 | } 16 | 17 | 18 | 19 | b { 20 | color: pink; 21 | } 22 | 23 | p b { 24 | color: blue !important; 25 | } 26 | 27 | p b { 28 | color: purple; 29 | } 30 | 31 | p#intro { 32 | font-size: 100%; 33 | } 34 | 35 | p { 36 | font-size: 75%; 37 | } -------------------------------------------------------------------------------- /CSS/Class - 04/images/capadocia-inverno.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/CSS/Class - 04/images/capadocia-inverno.jpg -------------------------------------------------------------------------------- /CSS/Class - 04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | capadocia 13 |

Hello World

14 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur voluptatem dolore iure porro quam quis suscipit 15 | nesciunt quos, consequuntur, excepturi, aperiam laborum. Quibusdam, ipsam libero sunt animi eum odit magnam!

16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /CSS/Class - 04/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | selector{ 3 | declaration; 4 | property: value; 5 | } 6 | 7 | * 8 | 9 | h1, p 10 | 11 | .className 12 | 13 | #idName 14 | 15 | 16 | parent>child 17 | 18 | parent child 19 | 20 | */ 21 | 22 | 23 | /* 24 | color 25 | background-color 26 | text-decoration 27 | font-family 28 | font-size 29 | font-weight 30 | text-align 31 | width 32 | height 33 | text-transform 34 | 35 | 36 | 37 | */ 38 | 39 | 40 | 41 | * { 42 | background-color: antiquewhite; 43 | font-family: Arial, Helvetica, sans-serif; 44 | } 45 | 46 | h1 { 47 | /* background-color: pink; 48 | width: 40%; */ 49 | font-size: 80px; 50 | text-align: center; 51 | color: red; 52 | text-transform: uppercase; 53 | } 54 | 55 | p { 56 | font-size: 45px; 57 | } 58 | 59 | .cover-image { 60 | width: 100%; 61 | height: 550px; 62 | } 63 | 64 | 65 | -------------------------------------------------------------------------------- /CSS/Class - 05/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 14 | 15 | 16 | 17 |
18 |

hello world

19 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente voluptatibus saepe harum! Voluptatem animi 20 | cupiditate accusantium error optio soluta itaque vel qui, labore, pariatur officia nobis maiores, 21 | repudiandae sit esse.

22 |
23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /CSS/Class - 05/style.css: -------------------------------------------------------------------------------- 1 | .container { 2 | color: red; 3 | background-color: aqua; 4 | border: 10px solid green; 5 | padding: 15px; 6 | } 7 | 8 | h1, 9 | p { 10 | /* border: inherit; */ 11 | background-color: pink; 12 | padding: inherit; 13 | } 14 | 15 | 16 | h1 { 17 | color: black; 18 | } -------------------------------------------------------------------------------- /CSS/Class - 06/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |

Hello World

13 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat excepturi mollitia qui accusamus sed saepe 14 | quaerat nostrum rem! Delectus rerum, ea tenetur modi nemo atque quidem animi ipsam facilis nulla.

15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /CSS/Class - 06/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | background-color: pink; 3 | } 4 | 5 | h1 { 6 | /* color: #ff0000; 7 | background-color: rgba(0, 0, 0, 0.5); */ 8 | /* background-color: #000000; */ 9 | /* opacity: 0.6; */ 10 | color: hsl(320, 100%, 50%); 11 | 12 | } 13 | 14 | p { 15 | color: hsla(200, 100%, 50%, 0.2); 16 | } -------------------------------------------------------------------------------- /CSS/Class - 07/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Text 8 | 9 | 10 | 11 | 12 |
13 |

Hello World

14 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis blanditiis quos et sed 15 | tenetur ut 16 | nisi 17 | perferendis, dignissimos accusamus dicta provident quaerat odit temporibus dolore recusandae, reprehenderit 18 | doloremque. Eos, expedita!

19 | 20 | YouTube 21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /CSS/Class - 07/style.css: -------------------------------------------------------------------------------- 1 | .container { 2 | font-family: Arial, Helvetica, sans-serif; 3 | /* font-size: 40px; */ 4 | background-color: pink; 5 | /* width: 70%; */ 6 | } 7 | 8 | 9 | h1 { 10 | /* font-family: 'Courier New', Courier, monospace; */ 11 | /* font-size: 32px; */ 12 | background-color: aliceblue; 13 | width: 35%; 14 | /* font-size: 1em; */ 15 | font-weight: normal; 16 | text-transform: uppercase; 17 | text-decoration: underline; 18 | /* letter-spacing: 1.2em; */ 19 | text-align: center; 20 | margin: auto; 21 | } 22 | 23 | p { 24 | /* font-size: 20px; */ 25 | /* font-size: 25%; */ 26 | /* font-size: 1em; */ 27 | text-transform: capitalize; 28 | line-height: 1.2em; 29 | /* word-spacing: 1.4em; */ 30 | text-align: justify; 31 | } 32 | 33 | .diff-size { 34 | color: red; 35 | font-size: 1.4em; 36 | font-weight: bold; 37 | font-style: italic; 38 | } 39 | 40 | /* 41 | cite { 42 | font-style: normal; 43 | } */ 44 | 45 | a { 46 | color: red; 47 | text-decoration: none; 48 | } -------------------------------------------------------------------------------- /CSS/Class - 08/fonts/AlexBrush-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/CSS/Class - 08/fonts/AlexBrush-Regular.ttf -------------------------------------------------------------------------------- /CSS/Class - 08/fonts/KaushanScript-Regular.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/CSS/Class - 08/fonts/KaushanScript-Regular.otf -------------------------------------------------------------------------------- /CSS/Class - 08/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |

I Love Pakistan

13 | Google 14 | Facebook 15 | LinkedIn 16 | Instagram 17 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias molestias reprehenderit officia debitis 18 | voluptatibus cumque, nulla fugit, itaque, ea quas suscipit a magni consequuntur quasi necessitatibus aut ipsa 19 | laborum omnis.

20 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias molestias reprehenderit officia debitis 21 | voluptatibus cumque, nulla fugit, itaque, ea quas suscipit a magni consequuntur quasi necessitatibus aut ipsa 22 | laborum omnis.

23 | 24 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias molestias reprehenderit officia debitis 25 | voluptatibus cumque, nulla fugit, itaque, ea quas suscipit a magni consequuntur quasi necessitatibus aut ipsa 26 | laborum omnis.

27 | 28 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias molestias reprehenderit officia debitis 29 | voluptatibus cumque, nulla fugit, itaque, ea quas suscipit a magni consequuntur quasi necessitatibus aut ipsa 30 | laborum omnis.

31 | 32 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias molestias reprehenderit officia debitis 33 | voluptatibus cumque, nulla fugit, itaque, ea quas suscipit a magni consequuntur quasi necessitatibus aut ipsa 34 | laborum omnis.

35 | 36 |
37 | 38 | 39 | 40 |
41 | 42 |











43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /CSS/Class - 08/style.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "alex brush"; 3 | src: url("fonts/AlexBrush-Regular.ttf"); 4 | } 5 | 6 | @font-face { 7 | font-family: "kaushan"; 8 | src: url("fonts/KaushanScript-Regular.otf"); 9 | } 10 | 11 | * { 12 | background-color: pink; 13 | 14 | } 15 | 16 | 17 | h1 { 18 | font-family: 'alex brush'; 19 | color: red; 20 | } 21 | 22 | p { 23 | font-family: 'kaushan'; 24 | color: red; 25 | } 26 | 27 | /* 28 | h1+p { 29 | color: green; 30 | } 31 | 32 | h1~p { 33 | background-color: aliceblue; 34 | } 35 | */ 36 | 37 | /* h1 { 38 | text-indent: -1000px; 39 | } 40 | 41 | 42 | p { 43 | text-indent: 40px; 44 | } */ 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | h1 { 58 | color: #ffffff; 59 | text-shadow: -1px -1px 4px #008000; 60 | } 61 | 62 | h1:hover { 63 | color: #008000; 64 | text-shadow: -1px -1px 4px #ffffff; 65 | } 66 | 67 | 68 | 69 | 70 | p:first-line { 71 | color: purple 72 | } 73 | 74 | p:first-letter { 75 | font-size: 2em; 76 | color: green; 77 | } 78 | 79 | 80 | 81 | a:link { 82 | color: lightgreen; 83 | } 84 | 85 | a:visited { 86 | color: green 87 | } 88 | 89 | a:hover { 90 | color: blue; 91 | text-decoration: none; 92 | } 93 | 94 | 95 | input { 96 | background-color: antiquewhite; 97 | } 98 | 99 | input:focus { 100 | background-color: burlywood; 101 | } 102 | 103 | input:active { 104 | background-color: gray; 105 | color: white; 106 | } 107 | 108 | 109 | 110 | 111 | /* 112 | :first-letter 113 | :first-line 114 | :link 115 | :visited 116 | :hover 117 | :focus 118 | :active 119 | 120 | */ -------------------------------------------------------------------------------- /CSS/Class - 09/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |
13 |

Hello World

14 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam ducimus velit veritatis natus nihil, unde 15 | voluptates voluptatibus laudantium exercitationem neque est maiores fugit itaque hic, et beatae commodi quis 16 | dolorem? 17 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam ducimus velit veritatis natus nihil, unde 18 | voluptates voluptatibus laudantium exercitationem neque est maiores fugit itaque hic, et beatae commodi quis 19 | dolorem? 20 | 21 |

22 | 23 | 24 |
25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /CSS/Class - 09/style.css: -------------------------------------------------------------------------------- 1 | .container { 2 | background-color: pink; 3 | /* height: 250px; */ 4 | } 5 | 6 | h1, 7 | p { 8 | background-color: rgba(0, 0, 0, 0.5); 9 | } 10 | 11 | 12 | h1 { 13 | /* width: 50%; */ 14 | } 15 | 16 | /* p { 17 | height: 50%; 18 | overflow: hidden; 19 | } */ 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | h1 { 62 | /* border: 10px solid red; */ 63 | /* border-width: 10px 0 0 0; 64 | border-style: solid double dotted dashed; 65 | border-color: red green blue yellow; */ 66 | 67 | 68 | /* border: 5px solid red; 69 | border-bottom-color: green; 70 | border-top-style: dashed; 71 | border-top-width: 20px; */ 72 | 73 | 74 | 75 | 76 | } 77 | 78 | body{ 79 | margin: 0; 80 | } 81 | .container{ 82 | padding: 20px; 83 | } 84 | 85 | h1{ 86 | border: 5px solid red; 87 | /* padding: 10px 15px 20px 40px; */ 88 | /* padding-left: 40px; */ 89 | margin: 0; 90 | } 91 | p{ 92 | border: 5px solid red; 93 | margin: 0; 94 | 95 | margin-top: 10px; 96 | /* margin-left: 5px; */ 97 | /* padding-left: 15px; */ 98 | } 99 | 100 | -------------------------------------------------------------------------------- /CSS/Class - 10/images/heart-boder1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/CSS/Class - 10/images/heart-boder1.jpg -------------------------------------------------------------------------------- /CSS/Class - 10/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |
13 |
14 |

Hello World

15 |

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facere asperiores, nobis, nesciunt voluptas 16 | laboriosam 17 | minima non nemo, perferendis id dolorum enim est sit iste a mollitia nostrum neque facilis! Aliquam!

18 |
19 |
20 |

Hello World

21 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolores, recusandae accusantium! Atque similique 22 | praesentium nemo architecto suscipit autem repellendus neque, beatae quod. Ut vitae praesentium, beatae debitis 23 | excepturi nihil illo! 24 |





25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /CSS/Class - 10/style.css: -------------------------------------------------------------------------------- 1 | .container { 2 | /* background-color: pink; */ 3 | width: 380px; 4 | /* height: 250px; */ 5 | /* border: 10px solid red; */ 6 | padding: 50px; 7 | /* margin: 20px; 8 | margin-left: 0; */ 9 | 10 | margin: 0 auto; 11 | 12 | text-align: right; 13 | 14 | box-shadow: 0px 0px 50px #105f45; 15 | 16 | } 17 | 18 | /* .main-container { 19 | 20 | width: 210px; 21 | background-color: pink; 22 | border: 20px solid green; 23 | padding:5px; 24 | } */ 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | p { 36 | /* display: none; */ 37 | /* visibility: hidden; */ 38 | /* visibility: visible; */ 39 | 40 | 41 | } 42 | 43 | 44 | 45 | 46 | 47 | 48 | /* 49 | h2{ 50 | background-color: pink; 51 | display: inline-block; 52 | } */ 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | .container { 95 | /* border-radius: 30px 20px 70px 70px / 170px 40px 40px 90px; */ 96 | /* border-top-right-radius: 50px; */ 97 | border: 30px solid red; 98 | border-image: url("images/heart-boder1.jpg") 65 100 100 100 repeat; 99 | 100 | } -------------------------------------------------------------------------------- /CSS/Class - 11/images/myBall.cur: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/CSS/Class - 11/images/myBall.cur -------------------------------------------------------------------------------- /CSS/Class - 11/images/star.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/CSS/Class - 11/images/star.jpg -------------------------------------------------------------------------------- /CSS/Class - 11/style.css: -------------------------------------------------------------------------------- 1 | ol { 2 | list-style-type: decimal-leading-zero; 3 | } 4 | 5 | ul { 6 | 7 | /* list-style-type: square; */ 8 | /* list-style-image: url("images/star.jpg"); */ 9 | /* list-style-position: inside; */ 10 | 11 | 12 | list-style: circle inside; 13 | } 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | body { 24 | font-family: Arial, Verdana, sans-serif; 25 | color: #111111; 26 | } 27 | 28 | table { 29 | width: 600px; 30 | /* empty-cells: hide; */ 31 | /* border-spacing: 15px 25px; */ 32 | border-spacing: 0px 0px; 33 | border-collapse: collapse; 34 | } 35 | 36 | th, 37 | td { 38 | border: 1px solid black; 39 | padding: 7px 10px 10px 10px; 40 | } 41 | 42 | th { 43 | text-transform: uppercase; 44 | letter-spacing: 0.1em; 45 | font-size: 90%; 46 | border-bottom: 2px solid #111111; 47 | border-top: 1px solid #999; 48 | text-align: left; 49 | } 50 | 51 | tr.even { 52 | background-color: #efefef; 53 | } 54 | 55 | tr:hover { 56 | background-color: #c3e6e5; 57 | } 58 | 59 | .money { 60 | text-align: right; 61 | } 62 | 63 | a{ 64 | cursor: url(images/myBall.cur),crosshair; 65 | } -------------------------------------------------------------------------------- /CSS/Class - 12/style.css: -------------------------------------------------------------------------------- 1 | .para-2 { 2 | width: 50%; 3 | position: relative; 4 | top: 50px; 5 | /* left: 50%; */ 6 | left: 200px; 7 | border: 1px solid red; 8 | 9 | } 10 | 11 | h2{ 12 | background-color: pink; 13 | position: absolute; 14 | top:70px; 15 | left: 180px; 16 | z-index: -5; 17 | } 18 | 19 | h3{ 20 | /* background-color: red; 21 | position: fixed; */ 22 | /*top: 200px; 23 | left: 100px; */ 24 | /* z-index: -5; */ 25 | } 26 | 27 | p{ 28 | background-color: #f0f8ff 29 | } 30 | 31 | 32 | a{ 33 | position: sticky; 34 | top: 50px; 35 | /* left:70px; */ 36 | } -------------------------------------------------------------------------------- /CSS/Class - 13/style.css: -------------------------------------------------------------------------------- 1 | /* .col-1, .col-2{ 2 | float: left; 3 | } 4 | 5 | .col-1{ 6 | width: 70%; 7 | } 8 | 9 | .col-2{ 10 | position: relative; 11 | top: 50px; 12 | } */ 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | h1{ 22 | font-size: 20px; 23 | } 24 | .col-1, 25 | .col-2, 26 | .col-3 { 27 | float: left; 28 | width: 29%; 29 | padding: 2%; 30 | } 31 | 32 | .col-2{ 33 | border-left: 1px solid black; 34 | border-right: 1px solid black; 35 | } -------------------------------------------------------------------------------- /CSS/Class - 14/images/akhtar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/CSS/Class - 14/images/akhtar.jpg -------------------------------------------------------------------------------- /CSS/Class - 14/images/bgrose.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/CSS/Class - 14/images/bgrose.jpg -------------------------------------------------------------------------------- /CSS/Class - 14/images/header.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/CSS/Class - 14/images/header.gif -------------------------------------------------------------------------------- /CSS/Class - 14/images/pattern.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/CSS/Class - 14/images/pattern.gif -------------------------------------------------------------------------------- /CSS/Class - 14/images/rosebg1.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/CSS/Class - 14/images/rosebg1.avif -------------------------------------------------------------------------------- /CSS/Class - 14/images/tulip.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/CSS/Class - 14/images/tulip.gif -------------------------------------------------------------------------------- /CSS/Class - 14/style.css: -------------------------------------------------------------------------------- 1 | /* .large{ 2 | width: 280px; 3 | height: 400px; 4 | } 5 | 6 | img{ 7 | float: right; 8 | } */ 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | .bg-img { 21 | /* background-image: url("images/rose\ bg1.avif"); 22 | background-repeat: no-repeat; 23 | background-attachment: fixed; */ 24 | /* background-size: cover; */ 25 | 26 | /* background-position: center center; */ 27 | /* background-color: #f3d4d1; */ 28 | 29 | 30 | 31 | /* background: #f3d4d1 url("images/rosebg1.avif") fixed center center no-repeat; */ 32 | 33 | 34 | } 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | h1 { 48 | font-size: 64px; 49 | height: 100px; 50 | background: #ffffff url("images/header.gif") repeat; 51 | } 52 | 53 | /* .bg-img{ 54 | background: #ffffff url('images/tulip.gif') no-repeat scroll top right; 55 | 56 | } */ 57 | 58 | 59 | 60 | .bg-img { 61 | font-size: 32px; 62 | color: #ffffff; 63 | background: #000000 url(images/pattern.gif); 64 | } -------------------------------------------------------------------------------- /CSS/Class - 15/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |
13 |

Hello Universe

14 |

Hello Earth

15 |

Hello Moon

16 |

Hello Mars

17 |

Hello Pluto

18 |

Hello Sun

19 |
20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /CSS/Class - 15/style.css: -------------------------------------------------------------------------------- 1 | h3{ 2 | background-color: antiquewhite; 3 | margin: 2px; 4 | padding: 2px; 5 | height:25px; 6 | width: 120px; 7 | display: flex; 8 | align-items: center; 9 | justify-content: center; 10 | } 11 | .special{ 12 | height:40px; 13 | } 14 | .container { 15 | border: 1px solid red; 16 | height: 150px; 17 | display: flex; 18 | /* flex-direction: row-reverse; */ 19 | /* flex-wrap: wrap; */ 20 | justify-content: space-between; 21 | align-items: center; 22 | } 23 | 24 | -------------------------------------------------------------------------------- /CSS/Class - 16/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |
13 |

Hello Earth

14 |

Hello Moon

15 | 16 |

Hello Jupitor

17 | 18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /CSS/Class - 16/style.css: -------------------------------------------------------------------------------- 1 | /* .container { 2 | border: 1px solid red; 3 | display: flex; 4 | flex-wrap: wrap; 5 | justify-content: space-between; 6 | align-items: flex-start; 7 | align-content: space-evenly; 8 | height: 200px; 9 | } 10 | 11 | .container>h3 { 12 | margin: 0; 13 | width: 40%; 14 | border: 1px solid green; 15 | } */ 16 | 17 | 18 | 19 | /* .container { 20 | border: 1px solid red; 21 | height: 200px; 22 | display: flex; 23 | flex-direction: column; 24 | justify-content: space-evenly; 25 | align-items: center; 26 | } 27 | 28 | .container>h3 { 29 | border: 1px solid green; 30 | margin: 0; 31 | } */ 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | .container { 60 | border: 1px solid red; 61 | display: flex; 62 | justify-content: space-between; 63 | align-items: flex-start; 64 | height: 100px; 65 | } 66 | 67 | .container>h3 { 68 | border: 1px solid green; 69 | margin: 0; 70 | flex-basis: 30%; 71 | } 72 | 73 | .mars { 74 | /* flex-grow: 3; */ 75 | /* flex-shrink: 0; 76 | background-color: pink; */ 77 | } 78 | 79 | .earth { 80 | /* flex-grow: 2; */ 81 | } 82 | 83 | 84 | 85 | 86 | /* .mars { 87 | order: -1; 88 | } 89 | 90 | .earth { 91 | order: 1 92 | } */ -------------------------------------------------------------------------------- /CSS/Class - 17/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |

Hello World

13 | 14 | 15 | -------------------------------------------------------------------------------- /CSS/Class - 17/style.css: -------------------------------------------------------------------------------- 1 | /* h1 { 2 | background-color: darkorchid; 3 | transition: background-color 4s, padding-left 4s, transform 4s, color 4s; 4 | transition-timing-function: ease-out; 5 | } 6 | 7 | 8 | h1:hover { 9 | background-color: green; 10 | color: red; 11 | transform: rotate(180deg); 12 | padding-left: 30%; 13 | } */ 14 | 15 | 16 | 17 | @keyframes heading { 18 | 0% { 19 | padding-left: 0; 20 | background-color: aqua; 21 | color: black; 22 | } 23 | 24 | 25% { 25 | padding-left: 20%; 26 | background-color: antiquewhite; 27 | color: red; 28 | } 29 | 30 | 50% { 31 | padding-left: 40%; 32 | background-color: rgb(215, 250, 215); 33 | color: rgb(81, 0, 255); 34 | } 35 | 36 | 75% { 37 | padding-left: 60%; 38 | background-color: rgb(250, 215, 243); 39 | color: rgb(159, 11, 132); 40 | } 41 | 42 | 100% { 43 | padding-left: 80%; 44 | background-color: rgb(250, 243, 215); 45 | color: rgb(12, 106, 137); 46 | } 47 | 48 | 49 | /* from { 50 | padding-left: 0; 51 | background-color: aqua; 52 | color: black; 53 | 54 | } 55 | 56 | to { 57 | padding-left: 30%; 58 | background-color: antiquewhite; 59 | color: red; 60 | } */ 61 | } 62 | 63 | h1 { 64 | font-size: 20px; 65 | background-color: aqua; 66 | animation-name: heading; 67 | animation-duration: 4s; 68 | animation-iteration-count: infinite; 69 | animation-direction: alternate; 70 | /* animation-timing-function: ease-in-out; */ 71 | } -------------------------------------------------------------------------------- /CSS/Class - 18/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |

Hello World

16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /CSS/Class - 18/style.css: -------------------------------------------------------------------------------- 1 | @media only screen and (max-width: 900px) { 2 | h1 { 3 | font-size: 100px; 4 | background-color: red; 5 | } 6 | } 7 | 8 | @media only screen and (max-width:600px) { 9 | h1 { 10 | background-color: green; 11 | } 12 | } -------------------------------------------------------------------------------- /CSS/Lab Work/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/CSS/Lab Work/.DS_Store -------------------------------------------------------------------------------- /CSS/Lab Work/Class - 01 Layouts/images/chat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/CSS/Lab Work/Class - 01 Layouts/images/chat.png -------------------------------------------------------------------------------- /CSS/Lab Work/Class - 01 Layouts/images/leafe.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/CSS/Lab Work/Class - 01 Layouts/images/leafe.webp -------------------------------------------------------------------------------- /CSS/Lab Work/Class - 01 Layouts/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/CSS/Lab Work/Class - 01 Layouts/images/logo.png -------------------------------------------------------------------------------- /CSS/Lab Work/Class - 01 Layouts/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: Arial, Helvetica, sans-serif; 3 | } 4 | 5 | .green-bar { 6 | width: 500px; 7 | height: 80px; 8 | background-color: #8dc63f; 9 | position: absolute; 10 | top: 0; 11 | left: 30%; 12 | border-radius: 20px; 13 | } 14 | 15 | 16 | .nav-bar { 17 | height: 30px; 18 | width: 100%; 19 | padding: 20px; 20 | position: fixed; 21 | top: 0; 22 | left: 0; 23 | border-bottom: 2px solid lightgray; 24 | display: flex; 25 | justify-content: space-between; 26 | align-items: center; 27 | z-index: 10; 28 | background-color: #ffffff; 29 | } 30 | 31 | .nav-bar>ul { 32 | display: flex; 33 | width: 35%; 34 | justify-content: space-evenly; 35 | list-style-type: none; 36 | font-size: 1.5em; 37 | color: #8dc63f; 38 | } 39 | 40 | .nav-bar>ul>li:hover { 41 | text-decoration: underline; 42 | /* color: #ffffff; 43 | background-color: #8dc63f;*/ 44 | } 45 | 46 | .nav-bar>img { 47 | height: 70px; 48 | } 49 | 50 | 51 | 52 | .content-container { 53 | position: relative; 54 | top: 90px; 55 | display: flex; 56 | flex-wrap: wrap; 57 | width: 66%; 58 | margin: 0 auto; 59 | } 60 | 61 | 62 | .content-container>div { 63 | /* border: 1px solid red; */ 64 | width: 28%; 65 | padding: 2%; 66 | } 67 | 68 | .services-icon { 69 | width: 40px; 70 | height: 30px; 71 | position: relative; 72 | left: 70px; 73 | bottom: 20px; 74 | 75 | } 76 | 77 | .chat-container { 78 | position: fixed; 79 | bottom: 10px; 80 | right: 30px; 81 | } 82 | 83 | .chat-container>img { 84 | width: 70px; 85 | height: 70px; 86 | } -------------------------------------------------------------------------------- /CSS/Lab Work/Class - 02 Layouts - Responsive/images/chat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/CSS/Lab Work/Class - 02 Layouts - Responsive/images/chat.png -------------------------------------------------------------------------------- /CSS/Lab Work/Class - 02 Layouts - Responsive/images/leafe.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/CSS/Lab Work/Class - 02 Layouts - Responsive/images/leafe.webp -------------------------------------------------------------------------------- /CSS/Lab Work/Class - 02 Layouts - Responsive/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/CSS/Lab Work/Class - 02 Layouts - Responsive/images/logo.png -------------------------------------------------------------------------------- /CSS/Lab Work/Class - 03 FoodPanda/images/burger.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/CSS/Lab Work/Class - 03 FoodPanda/images/burger.jfif -------------------------------------------------------------------------------- /CSS/Lab Work/Class - 03 FoodPanda/images/cart.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/CSS/Lab Work/Class - 03 FoodPanda/images/cart.PNG -------------------------------------------------------------------------------- /CSS/Lab Work/Class - 03 FoodPanda/images/lang.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/CSS/Lab Work/Class - 03 FoodPanda/images/lang.PNG -------------------------------------------------------------------------------- /CSS/Lab Work/Class - 03 FoodPanda/images/location.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/CSS/Lab Work/Class - 03 FoodPanda/images/location.PNG -------------------------------------------------------------------------------- /CSS/Lab Work/Class - 03 FoodPanda/images/logo.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/CSS/Lab Work/Class - 03 FoodPanda/images/logo.PNG -------------------------------------------------------------------------------- /CSS/Lab Work/Class - 03 FoodPanda/images/panda-hero.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/CSS/Lab Work/Class - 03 FoodPanda/images/panda-hero.webp -------------------------------------------------------------------------------- /CSS/Lab Work/Class - 03 FoodPanda/images/user.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/CSS/Lab Work/Class - 03 FoodPanda/images/user.PNG -------------------------------------------------------------------------------- /CSS/Lab Work/Class - 03 FoodPanda/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | user-icon 17 | logo 18 | 23 | 24 |
25 | 26 | 27 | lang-icon 28 | cart-icon 29 |
30 | 31 |
32 | 33 | 37 | 38 | 39 |
40 | 41 | 42 |
43 |

Food and groceries delivery from ڪراچي Karachi’s best restaurants and shops

44 | panda hero 45 | 46 |
47 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /HTML/class - 01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Hello World 8 | 9 | 10 | 11 |

Hello World

12 |

The quick brown fox jumps over the lazy dog.

13 |



14 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Obcaecati facilis possimus provident iure sint natus 15 | quo dolor assumenda pariatur quod expedita explicabo nam harum laborum, debitis repellat nemo! Voluptatum, vero. 16 |

17 |
18 |

Another heading

19 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit quod, nulla consequuntur saepe qui fuga alias aut 20 | blanditiis ipsum in nobis eaque aspernatur recusandae distinctio officia magnam vero nostrum rem.

21 | 22 |

Batch 11th Web Development

23 | 24 |

E=MC2

25 |

8 x 10-7

26 | 27 |

Formula of water is H2O

28 |

Formula of Carbon Dioxide CO2

29 | 30 | 31 |

32 | Hoshiaar! 33 | Apne qeemti saman ki khud hifazat karen 34 |

35 | 36 |

37 | Beware: 38 | Pickpockets operate in this area. 39 |

40 | 41 |

This toy has many small pieces and is 42 | 43 | not suitable for children under five years old. 44 | 45 |

46 | 47 | 48 |

saad ko peeto mat chordo

49 | 50 | 51 | 52 |

I think Ivy was the first.

53 |

Who was the first?

54 |

I think Ivy was the first.

55 |

What was Ivy's rank?

56 |

I think Ivy was the first.

57 | 58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /HTML/class - 04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | List 8 | 9 | 10 | 11 |

Scrambled Eggs

12 |

Eggs are one of my favourite foods. Here is a recipe for deliciously rich scrambled eggs.

13 | 14 |

Ingredients

15 | 20 | 21 |

Method

22 |
    23 |
  1. Melt butter in a frying pan over a medium 24 | heat
    2. 25 |
  2. Gently mix the eggs and cream in a bowl
    3. 26 |
  3. Once butter has melted add cream and eggs
    4. 27 |
  4. Using a spatula fold the eggs from the edge of 28 | the pan to the center every 20 seconds (as if 29 | you are making an omelette)
    5. 30 |
  5. When the eggs are still moist remove from the 31 | heat (it will continue to cook on the plate 32 | until served)
    6. 33 |
34 | 35 | 48 | 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /HTML/class - 05/about/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | About Us 8 | 9 | 10 | 11 |

Hello About Us Page

12 | Home 13 | Contact 14 | 15 | 16 | -------------------------------------------------------------------------------- /HTML/class - 05/contact/contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Contact Me 8 | 9 | 10 | 11 |

Contact Me

12 | Home 13 | About Us 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /HTML/class - 05/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Links 8 | 9 | 10 | 11 | Contact 12 | 13 | About Us 14 | 15 |



16 | Google 17 |

18 | YouTube 19 |

20 | Facebook 21 |

22 | LinkedIn 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /HTML/class - 06/message/message.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |

Message page

12 | Home 13 | Contact 14 | 15 | 16 | -------------------------------------------------------------------------------- /HTML/class - 06/service/service.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |

Service Page

13 | Home 14 | Contact 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /HTML/class - 07/images/afridi.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/HTML/class - 07/images/afridi.webp -------------------------------------------------------------------------------- /HTML/class - 07/images/frog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/HTML/class - 07/images/frog.png -------------------------------------------------------------------------------- /HTML/class - 07/images/youtube.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/HTML/class - 07/images/youtube.png -------------------------------------------------------------------------------- /HTML/class - 07/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Image 8 | 9 | 10 | 11 |
12 | Frog digestive system 13 |
14 |

Frog Digestive System

15 |
16 |
17 | 18 |
19 | 21 | 22 | 23 | 24 | Afridi wicket celeberation 25 | 26 | 27 | 28 | YouTube 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /HTML/class - 09/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Forms 8 | 9 | 10 | 11 |

Hello World

12 |
13 | 16 |

17 | 18 | 21 |

22 | 23 |

Gender:

24 | 25 | 28 | 29 | 32 |

33 | 34 |

Select your favorite subject:(You may pick more than 1)

35 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 61 |

62 | 63 | 66 | 67 |

68 | 69 | 70 | 71 |
72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /HTML/class - 10/images/568182.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/HTML/class - 10/images/568182.png -------------------------------------------------------------------------------- /HTML/class - 10/images/save.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/HTML/class - 10/images/save.jpg -------------------------------------------------------------------------------- /HTML/class - 10/images/subscribe.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/HTML/class - 10/images/subscribe.avif -------------------------------------------------------------------------------- /HTML/class - 11/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |

Hello About Page

12 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab ullam necessitatibus incidunt distinctio iure, 13 | pariatur, quis praesentium quas id adipisci autem, accusantium est sed beatae aut ad deleniti vitae eligendi? 14 |

15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /JavaScript/Class 1/app.js: -------------------------------------------------------------------------------- 1 | /* 2 | String "" '' 3 | 4 | */ 5 | // alert('Welcome to JS world!'); 6 | 7 | console.log("Welcome to JS world!"); 8 | 9 | console.log("2 + 2"); 10 | console.log(2 + 2); 11 | console.log(2 - 1); 12 | console.log(5 * 7); 13 | console.log(70 / 7); 14 | console.log(3 ** 3); -------------------------------------------------------------------------------- /JavaScript/Class 1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |

Hello World

12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /JavaScript/Class 10/app.js: -------------------------------------------------------------------------------- 1 | 2 | // let specialEl = document.querySelectorAll(".special"); 3 | // console.log(specialEl); 4 | 5 | // specialEl[0].innerHTML = "Hello Earth"; 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | // let specialEl = document.querySelectorAll("div>img"); 19 | 20 | // console.log(specialEl[0].className); 21 | 22 | // specialEl[0].src = "images/shoaib.webp"; 23 | // specialEl[0].className += " shoaib"; 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | // let cityEl = document.querySelectorAll('input'); 34 | // console.log(cityEl[0]); 35 | // cityEl[0].value = "Karachi"; 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | // let aEl = document.querySelectorAll('a'); 44 | // aEl[0].href = "https://www.youtube.com/c/jsguru"; 45 | // aEl[0].innerHTML = "YouTube"; 46 | 47 | 48 | 49 | // let allEl = document.querySelectorAll("h2"); 50 | // console.log(allEl); 51 | // allEl[1].innerHTML = "Hello Kotlin"; 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | let h2Elements = document.querySelectorAll("h2"); 75 | let h2Element = document.querySelector("h2"); 76 | console.log(h2Elements, h2Element); 77 | -------------------------------------------------------------------------------- /JavaScript/Class 10/images/shoaib.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/JavaScript/Class 10/images/shoaib.webp -------------------------------------------------------------------------------- /JavaScript/Class 10/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 |

Hello World

13 | Github 14 | 15 |

Hello JS

16 |

Hello Python

17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 |
25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /JavaScript/Class 10/style.css: -------------------------------------------------------------------------------- 1 | .shoaib { 2 | width: 400px; 3 | height: 250px; 4 | } -------------------------------------------------------------------------------- /JavaScript/Class 11/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /JavaScript/Class 12 Date and time/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /JavaScript/Class 13 Functions/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 |
    13 | 14 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
    Students NameMarksGrade
    32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /JavaScript/Class 14 Objects/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /JavaScript/Class 15/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Document 10 | 11 | 12 | 13 |
    14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /JavaScript/Class 15/style.css: -------------------------------------------------------------------------------- 1 | .success { 2 | color: #008000; 3 | border: 1px solid #008000; 4 | padding: 2em; 5 | } 6 | 7 | .fail { 8 | color: #ff0000; 9 | border: 1px solid #ff0000; 10 | padding: 2em; 11 | } -------------------------------------------------------------------------------- /JavaScript/Class 16/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Document 10 | 11 | 12 | 13 |

    Hello World

    14 | 15 | Click Me 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /JavaScript/Class 16/style.css: -------------------------------------------------------------------------------- 1 | .success { 2 | color: #008000; 3 | border: 1px solid #008000; 4 | padding: 2em; 5 | } 6 | 7 | .fail { 8 | color: #ff0000; 9 | border: 1px solid #ff0000; 10 | padding: 2em; 11 | } -------------------------------------------------------------------------------- /JavaScript/Class 17/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Document 10 | 11 | 12 | 13 |

    Hello World

    14 | 15 | Go to Google 16 |
    17 | 20 | 21 |
    24 | 27 | 28 |

    29 |

    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam quibusdam, 30 | quos 31 | eos quas quis dolores 32 | doloribus nesciunt facilis reprehenderit magnam ducimus maiores excepturi repellendus optio, ipsa possimus ratione 33 | dolorum aperiam?

    34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /JavaScript/Class 17/style.css: -------------------------------------------------------------------------------- 1 | .success { 2 | border: 1px solid green; 3 | } -------------------------------------------------------------------------------- /JavaScript/Class 18/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Document 10 | 11 | 12 | 13 |

    Hello World

    14 |
      15 | Google 16 |
    1. Fajar
      2. 17 |
    2. Zuhar
      3. 18 |
    3. Asar
      4. 19 |
    4. Maghrib
      5. 20 |
    5. Isha
      6. 21 |
    22 |

    1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet voluptate amet quo suscipit hic 23 | consequatur aut 24 | fugit cumque explicabo fuga, sequi aliquam earum porro? Culpa dicta ullam cum nostrum accusamus.

    25 |

    2 Lorem ipsum dolor sit amet consectetur adipisicing elit. This is JavaScript Class 26 | Eveniet 27 | voluptate amet quo suscipit hic 28 | consequatur aut 29 | fugit cumque explicabo fuga, sequi aliquam earum porro? Culpa dicta ullam cum nostrum accusamus.

    30 |

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet voluptate amet quo suscipit hic consequatur aut 31 | fugit cumque explicabo fuga, sequi aliquam earum porro? Culpa dicta ullam cum nostrum accusamus.

    32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /JavaScript/Class 18/style.css: -------------------------------------------------------------------------------- 1 | .success { 2 | border: 1px solid green; 3 | } -------------------------------------------------------------------------------- /JavaScript/Class 19/app.js: -------------------------------------------------------------------------------- 1 | // let divEl = document.querySelectorAll("#container")[0]; 2 | // let userName = prompt('what is your name?'); 3 | // divEl.innerHTML = `

    Hello ${userName}

    `; 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | /* 19 | .createElement(tagNameInUpperCase) // create elment node 20 | .setAttribute(attributeName, attributeValue) 21 | .createTextNode(string) // create text node 22 | parent.appendChild(newChild) // add in last node 23 | parent.insertBefore(newChild, target) // add on target node 24 | parent.removeChild(target) // remove target node 25 | 26 | 27 | */ 28 | 29 | 30 | let divEl = document.querySelectorAll("#container")[0]; 31 | 32 | let h1El = document.createElement("H1"); 33 | h1El.setAttribute("id", "main-heading"); 34 | h1El.setAttribute("title", "this is main heading"); 35 | h1El.setAttribute("class", "hide special not-show"); 36 | 37 | let textNode = document.createTextNode("Hello Mars"); 38 | h1El.appendChild(textNode); 39 | divEl.appendChild(h1El); 40 | 41 | let target = divEl.childNodes[1]; 42 | // let target = divEl.firstChild.nextSibling; 43 | divEl.insertBefore(h1El, target); 44 | 45 | let targetToDelete = divEl.childNodes[2]; 46 | divEl.removeChild(targetToDelete) 47 | 48 | -------------------------------------------------------------------------------- /JavaScript/Class 19/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Document 10 | 11 | 12 | 13 |
    14 |

    This is sub heading.

    15 |
    16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /JavaScript/Class 19/style.css: -------------------------------------------------------------------------------- 1 | .success { 2 | border: 1px solid green; 3 | } -------------------------------------------------------------------------------- /JavaScript/Class 2/app.js: -------------------------------------------------------------------------------- 1 | // alert("Hello World"); 2 | // console.log(1 + 1); 3 | // document.write("

    Hello World

    "); 4 | // document.write("

    I am the master of my own fate.

    ") 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | // let userName = 'Aslam'; 33 | // console.log('Welcome ' + userName + " to our class."); 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | // console.log(2 ** 4); // +-*/ ** % 54 | 55 | 56 | 57 | // console.log(31 % 5); 58 | // console.log(35 % 5); 59 | 60 | 61 | 62 | 63 | // let num1 = 3461327; 64 | // console.log(num1 % 5); 65 | 66 | 67 | 68 | 69 | 70 | // let userName = prompt("what is your name?"); 71 | // console.log("Welcome " + userName); 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | // let num1 = +prompt("enter a number"); 85 | // let num2 = +prompt("enter another number"); 86 | // console.log(num1 + num2); 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | // let userName = prompt("What is your name?"); 95 | // let num1 = +prompt('enter a number'); 96 | // let num2 = +prompt('enter another number'); 97 | 98 | // document.write("Welcome " + userName + "." + "
    Your total is: " + (num1 + num2)); 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | // let workOutDay = 1; 108 | 109 | // console.log(workOutDay++); //1 110 | // console.log(++workOutDay); // 3 111 | // console.log(++workOutDay); //4 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | // let bullets = 11; 125 | // console.log(bullets--);//11 126 | // console.log(--bullets);//9 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | -------------------------------------------------------------------------------- /JavaScript/Class 2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /JavaScript/Class 2/style.css: -------------------------------------------------------------------------------- 1 | .special { 2 | color: green; 3 | font-weight: bold; 4 | } -------------------------------------------------------------------------------- /JavaScript/Class 20 Objects/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Document 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /JavaScript/Class 20 Objects/style.css: -------------------------------------------------------------------------------- 1 | .success { 2 | border: 1px solid green; 3 | } -------------------------------------------------------------------------------- /JavaScript/Class 21/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Document 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /JavaScript/Class 21/style.css: -------------------------------------------------------------------------------- 1 | .success { 2 | border: 1px solid green; 3 | } -------------------------------------------------------------------------------- /JavaScript/Class 22 Advance JS/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Document 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /JavaScript/Class 22 Advance JS/style.css: -------------------------------------------------------------------------------- 1 | .success { 2 | border: 1px solid green; 3 | } -------------------------------------------------------------------------------- /JavaScript/Class 3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /JavaScript/Class 4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /JavaScript/Class 5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /JavaScript/Class 6/app.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | array.length // length of array 4 | array.includes() // boolean true or false 5 | array.indexOf() // index number of existing item or -1 6 | 7 | array.pop() // remove last index 8 | array.push() // add to last index 9 | array.shift() // remove first index 10 | array.unshift() // add to first index 11 | 12 | array.splice() // remove or add on targetted index 13 | array.slice() // to make a copy of extracted item 14 | 15 | 16 | */ 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | // let fruits = ['apple', 'banana', 'oranges']; 25 | 26 | 27 | // console.log(fruits.length); 28 | 29 | // console.log(fruits[1]); 30 | 31 | // let userFavFruit = prompt('what is your fav fruit?'); 32 | // if (fruits.includes(userFavFruit)) { 33 | // console.log("Your fav fruit is already in the list."); 34 | // } 35 | // else { 36 | // console.log('your fav fruit is not in the list.'); 37 | // } 38 | 39 | 40 | 41 | 42 | 43 | // let books = ["Deewan Ghalib", "Baal Jebreel", "Bahar Shariat", "Rich Dad Poor Dad"]; 44 | 45 | // let userRequiredBook = prompt('which book do you want to read?'); 46 | 47 | // let bookIndex = books.indexOf(userRequiredBook); 48 | // if (bookIndex > -1) { 49 | // console.log("Your required book is indexed at " + bookIndex) 50 | // } 51 | // else { 52 | // console.log('Sorry your required book is unavailable.'); 53 | // } 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | // let fruits = ['apple', 'banana', 'oranges']; 65 | 66 | // fruits.pop(); 67 | // fruits.push("Kharbooza"); 68 | 69 | // console.log(fruits); 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | // let fruits = ['apple', 'banana', 'oranges']; 84 | 85 | // fruits.shift(); 86 | // fruits.unshift("mango", "pineapple"); 87 | 88 | // console.log(fruits); 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | // let fruits = ['apple', 'banana', 'oranges', "mango", "watermelon"]; 101 | 102 | // fruits.splice(1, 0, "Melons", 'Grapes'); 103 | // fruits.splice(3, 2); 104 | 105 | // console.log(fruits) 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | let fruits = ['apple', 'banana', 'oranges', "mango", "watermelon", "strawberry", "grapes", "melons"]; 126 | 127 | 128 | // let favFruits = fruits.slice(2, 4); 129 | let favFruits = fruits.slice(4, 7); 130 | 131 | console.log(favFruits) 132 | 133 | 134 | 135 | -------------------------------------------------------------------------------- /JavaScript/Class 6/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /JavaScript/Class 7/app.js: -------------------------------------------------------------------------------- 1 | // let primeNums = [1, 2, 3, 5, 7, 11, 13, 17, 19, 23]; 2 | 3 | // Array.splice(startingIndex, delete item count, add new item(s)) 4 | // primeNums.splice(2, 3, 29, 31, 37); 5 | 6 | // console.log(primeNums); 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | // let num = [1, 2, 3, 4, 5, 6, 7, 8, 9]; 23 | 24 | // let privNum = num.slice(3, 7); 25 | 26 | // console.log(privNum, num); 27 | 28 | 29 | 30 | 31 | // let cricketers = ["afridi", "misbah", "shoaib akhtar", "Muhammad Asif", "Dhoni", "Yovraj", "tendulkar", "sehwag", 'Saeed Anwar', "Amir Sohail"]; 32 | 33 | // let favCricket = cricketers.slice(2, 4); 34 | // console.log(favCricket); 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | //madam 48 | //civic 49 | // level 50 | // noon 51 | // mom 52 | // eye 53 | // let strArr = ["h", "a", "i", "d", "e", "r"]; 54 | // console.log(strArr.reverse().join("")); 55 | // console.log(strArr); 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | // let str = 'haider ali shah'; 75 | 76 | // console.log(str[6]); 77 | 78 | // console.log(str.length); 79 | 80 | // console.log(str.slice(7, 10)); 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | // let firstName = 'hAIDeR ali'; 94 | 95 | // console.log(firstName.toLowerCase()); 96 | // console.log(firstName.toUpperCase()); 97 | // let userName = prompt('what is your name?'); 98 | 99 | // if (firstName.toLowerCase() === userName.toLowerCase()) { 100 | 101 | // } 102 | 103 | 104 | 105 | let firstName = "hAIdEr"; // Haider 106 | 107 | 108 | 109 | 110 | 111 | -------------------------------------------------------------------------------- /JavaScript/Class 7/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /JavaScript/Class 8/app.js: -------------------------------------------------------------------------------- 1 | // let fullName = ["haider", 'ali', 'shah']; 2 | 3 | // let myName = fullName.join("-"); 4 | 5 | // console.log(myName); 6 | 7 | 8 | 9 | // let myName = "haider ali shah"; 10 | // let myNameArr = myName.split(" "); 11 | 12 | // console.log(myNameArr); 13 | 14 | 15 | 16 | 17 | 18 | // let word = prompt('find if palindrom or not?'); 19 | // let revWord = word.split("").reverse().join(""); 20 | 21 | // if (word === revWord) { 22 | // console.log("yes, it is a palindrome"); 23 | // } 24 | // else { 25 | // console.log('no it is not a palindrom'); 26 | // } 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | /* 54 | starting point 55 | ending point 56 | changes 57 | 58 | */ 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | // for (let i = 0; i <= 50; i++) { 71 | // console.log(i); 72 | // } 73 | 74 | // console.log('hello world'); 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | // for (let i = 100; i > 0; i--) { 91 | // console.log(i); 92 | // } 93 | 94 | // for (let i = 0; i <= 10; i = i + 4) { 95 | // console.log(i) 96 | // } 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | // let table = +prompt('enter table name'); 137 | 138 | // for (let i = 1; i <= 200; i++) { 139 | // // 2 x 1 = 2 140 | // // 2 x 2 = 4 141 | // document.write("

    " + table + " x " + i + " = " + table * i + "

    ") 142 | // } 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | let students = ["aslam", "akram", "muzammil", "abdullah", "ahmed", "abdul karim", "anas"]; 171 | 172 | for (let i = 0; i < students.length; i++) { 173 | console.log("Hello " + students[i]); 174 | 175 | } 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | -------------------------------------------------------------------------------- /JavaScript/Class 8/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /JavaScript/Class 9/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /JavaScript/assignment/12-13_IF...ELSE_ELSE...IFStatements_SetOfConditions.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/JavaScript/assignment/12-13_IF...ELSE_ELSE...IFStatements_SetOfConditions.pdf -------------------------------------------------------------------------------- /JavaScript/assignment/14-17_Arrays.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/JavaScript/assignment/14-17_Arrays.pdf -------------------------------------------------------------------------------- /JavaScript/assignment/18-20_FORLoops.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/JavaScript/assignment/18-20_FORLoops.pdf -------------------------------------------------------------------------------- /JavaScript/assignment/1_Alerts.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/JavaScript/assignment/1_Alerts.docx -------------------------------------------------------------------------------- /JavaScript/assignment/20-25_Strings.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/JavaScript/assignment/20-25_Strings.pdf -------------------------------------------------------------------------------- /JavaScript/assignment/26-34_MathAndDateMethods.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/JavaScript/assignment/26-34_MathAndDateMethods.pdf -------------------------------------------------------------------------------- /JavaScript/assignment/2_VariablesForStrings.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/JavaScript/assignment/2_VariablesForStrings.pdf -------------------------------------------------------------------------------- /JavaScript/assignment/35-38_Functions.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/JavaScript/assignment/35-38_Functions.docx -------------------------------------------------------------------------------- /JavaScript/assignment/3_VariablesForNumbers.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/JavaScript/assignment/3_VariablesForNumbers.pdf -------------------------------------------------------------------------------- /JavaScript/assignment/4_VariableNames_LegalAndIllegal.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/JavaScript/assignment/4_VariableNames_LegalAndIllegal.pdf -------------------------------------------------------------------------------- /JavaScript/assignment/5-7_MathExpressions.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/JavaScript/assignment/5-7_MathExpressions.pdf -------------------------------------------------------------------------------- /JavaScript/assignment/8-11_ConcatenatingStrings_Prompts_IFStatements_ComparisonOperators.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/JavaScript/assignment/8-11_ConcatenatingStrings_Prompts_IFStatements_ComparisonOperators.pdf -------------------------------------------------------------------------------- /JavaScript/lab/lab 1/app.js: -------------------------------------------------------------------------------- 1 | // alert("Welcome"); 2 | // console.log(5 + 5 - 2 * 5); 3 | 4 | // alert("03413542800"); 5 | // console.log(03413542800); 6 | 7 | // document.write("Welcome Haider"); 8 | // document.write("Goodbye Haider"); 9 | 10 | 11 | 12 | // alert("welcome to JS land \nHappy coding"); 13 | // console.log("welcome to JS land \nHappy coding"); 14 | 15 | // document.write('Welcome to JS land

    Happy Coding

    '); 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | // let userName; 52 | // userName = "Abdullah"; 53 | 54 | // console.log(userName); 55 | // alert(userName); 56 | // document.write(userName); 57 | // userName = "haider"; 58 | 59 | // console.log(userName); 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | // let userName, fatherName, rollNumber; 76 | // userName = "Haider"; 77 | // fatherName = 'Shah'; 78 | // rollNumber = "2643"; 79 | // console.log(userName, fatherName, rollNumber); 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | // let userName; 97 | // userName = "haider"; 98 | 99 | // let userName = "haider"; 100 | // let fatherName = 'Shah'; 101 | // console.log(userName); 102 | 103 | 104 | // let userName = 'haider', fatherName = 'shah'; 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | // let userName = "haider"; 114 | // console.log('Welcome' + " " + userName); 115 | 116 | // let userName = "Anas"; 117 | // let greeting = "Eid Mubarak"; 118 | // console.log(greeting + " " + userName); 119 | 120 | 121 | 122 | 123 | -------------------------------------------------------------------------------- /JavaScript/lab/lab 1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

    Hello World

    10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /JavaScript/lab/lab 10/app.js: -------------------------------------------------------------------------------- 1 | let countForm = document.querySelectorAll('.count-input'); 2 | let countH1El = document.querySelectorAll('.count-num'); 3 | let errorMsgEl = document.querySelectorAll('.error-msg'); 4 | 5 | function addNumber() { 6 | let formVal = countForm[0].value; 7 | displayMsg(formVal, "+"); 8 | } 9 | 10 | 11 | function minusNumber() { 12 | let formVal = countForm[0].value; 13 | displayMsg(formVal, "-"); 14 | } 15 | 16 | 17 | 18 | function displayMsg(formValue, operator) { 19 | if (isNaN(formValue)) { 20 | errorMsgEl[0].innerHTML = "You must enter a number"; 21 | errorMsgEl[0].style.borderWidth = "1px"; 22 | } 23 | else if (operator === "-") { 24 | countH1El[0].innerHTML = Number(countH1El[0].innerHTML) - Number(formValue); 25 | removeErr(); 26 | } 27 | else if (operator === "+") { 28 | countH1El[0].innerHTML = Number(countH1El[0].innerHTML) + Number(formValue); 29 | removeErr(); 30 | } 31 | 32 | 33 | } 34 | 35 | function removeErr() { 36 | errorMsgEl[0].innerHTML = ""; 37 | errorMsgEl[0].style.borderWidth = "0px"; 38 | } -------------------------------------------------------------------------------- /JavaScript/lab/lab 10/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

    0

    17 |

    18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /JavaScript/lab/lab 10/style.css: -------------------------------------------------------------------------------- 1 | .error-msg{ 2 | color: #ff0000; 3 | text-align: center; 4 | border: 0px solid #ff0000; 5 | } -------------------------------------------------------------------------------- /JavaScript/lab/lab 11 todo with array/app.js: -------------------------------------------------------------------------------- 1 | let todoInput = document.querySelectorAll('.todo-input')[0]; 2 | let todoListDiv = document.querySelectorAll('.todo-list'); 3 | 4 | let allTodos = []; 5 | 6 | function add() { 7 | let newTodo = todoInput.value; 8 | allTodos.push(newTodo); 9 | printAllTodos(); 10 | todoInput.value = ""; 11 | } 12 | 13 | function printAllTodos() { 14 | todoListDiv[0].innerHTML = ""; 15 | for (let i = 0; i < allTodos.length; i++) { 16 | todoListDiv[0].innerHTML += ` 17 |

    18 | ${allTodos[i]} 19 | 20 | 21 |

    22 | `; 23 | } 24 | } 25 | 26 | function deleteTodo(index) { 27 | allTodos.splice(index, 1); 28 | printAllTodos(); 29 | } 30 | 31 | 32 | 33 | let addTodoDiv = document.querySelectorAll("#add-todo-container")[0]; 34 | let editTodoDiv = document.querySelectorAll("#edit-todo-container")[0]; 35 | let editInput = document.querySelectorAll(".edit-todo-input")[0]; 36 | let editIndex; 37 | function editTodo(index) { 38 | if (isEditing) { 39 | displayError(); 40 | } 41 | else { 42 | toggleTodoInput(); 43 | editInput.value = allTodos[index]; 44 | editIndex = index; 45 | } 46 | } 47 | 48 | function updateTodo() { 49 | toggleTodoInput(); 50 | allTodos.splice(editIndex, 1, editInput.value); 51 | printAllTodos(); 52 | } 53 | 54 | let isEditing = false; 55 | function toggleTodoInput() { 56 | if (isEditing) { 57 | addTodoDiv.className = ""; 58 | editTodoDiv.className += " hide"; 59 | } 60 | else { 61 | addTodoDiv.className += " hide"; 62 | editTodoDiv.className = ""; 63 | } 64 | isEditing = !isEditing; 65 | } 66 | 67 | let errorEl = document.querySelectorAll(".error-msg")[0]; 68 | function displayError() { 69 | errorEl.innerHTML = 'Please save current todo first.'; 70 | setTimeout(function () { 71 | errorEl.innerHTML = ""; 72 | }, 3000); 73 | } -------------------------------------------------------------------------------- /JavaScript/lab/lab 11 todo with array/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 |
    12 | 13 | 14 |
    15 |
    16 | 17 | 18 |
    19 |
    20 |

    21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /JavaScript/lab/lab 11 todo with array/style.css: -------------------------------------------------------------------------------- 1 | .error-msg { 2 | color: #ff0000; 3 | text-align: center; 4 | border: 0px solid #ff0000; 5 | } 6 | 7 | .hide { 8 | display: none; 9 | } 10 | -------------------------------------------------------------------------------- /JavaScript/lab/lab 12 todo without array/app.js: -------------------------------------------------------------------------------- 1 | let todoInput = document.querySelectorAll(".todo-input")[0]; 2 | let todoListDiv = document.querySelectorAll(".todo-list")[0]; 3 | 4 | function add() { 5 | let newTodo = todoInput.value; 6 | printAllTodos(newTodo); 7 | todoInput.value = ""; 8 | } 9 | function printAllTodos(todoText) { 10 | let newTodoItem = makeTodoEl(todoText); 11 | todoListDiv.appendChild(newTodoItem); 12 | } 13 | 14 | function makeTodoEl(newTodoText) { 15 | let pEl = document.createElement("P"); 16 | let textNode = document.createTextNode(newTodoText); 17 | pEl.appendChild(textNode); 18 | 19 | let delBtn = document.createElement("BUTTON"); 20 | let delText = document.createTextNode("Delete"); 21 | delBtn.appendChild(delText); 22 | delBtn.setAttribute("onclick", "deleteTodo(this)"); 23 | 24 | let edtBtn = document.createElement("BUTTON"); 25 | let edtText = document.createTextNode("Edit"); 26 | edtBtn.appendChild(edtText); 27 | edtBtn.setAttribute("onclick", "editTodo(this)"); 28 | 29 | pEl.appendChild(delBtn); 30 | pEl.appendChild(edtBtn); 31 | 32 | return pEl; 33 | } 34 | function deleteTodo(el) { 35 | let targetNode = el.parentNode; 36 | todoListDiv.removeChild(targetNode); 37 | } 38 | 39 | let todoInputContainer = document.querySelectorAll("#add-todo-container")[0]; 40 | let editTodoContainer = document.querySelectorAll("#edit-todo-container")[0]; 41 | let editForm = document.querySelectorAll(".edit-todo-input")[0]; 42 | let editValue; 43 | function editTodo(el) { 44 | editValue = el.parentNode.childNodes[0]; 45 | editForm.value = editValue.nodeValue; 46 | todoInputContainer.className += " hide"; 47 | editTodoContainer.className = ""; 48 | } 49 | 50 | function updateTodo() { 51 | console.log(editForm.value); 52 | editValue.nodeValue = editForm.value; 53 | todoInputContainer.className = ""; 54 | editTodoContainer.className += " hide"; 55 | } 56 | -------------------------------------------------------------------------------- /JavaScript/lab/lab 12 todo without array/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 |
    12 | 13 | 14 |
    15 |
    16 | 17 | 18 |
    19 |
    20 |

    21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /JavaScript/lab/lab 12 todo without array/style.css: -------------------------------------------------------------------------------- 1 | .error-msg { 2 | color: #ff0000; 3 | text-align: center; 4 | border: 0px solid #ff0000; 5 | } 6 | 7 | .hide { 8 | display: none; 9 | } 10 | -------------------------------------------------------------------------------- /JavaScript/lab/lab 13 e-commerce/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | E-commerce App 7 | 8 | 9 | 10 |
    11 |

    My E-commerce App

    12 | 20 |
    21 | 22 |
    23 |
    24 |
    25 | 26 |
    27 |

    Products

    28 |
    29 | 61 |
    62 |
    63 | 64 | 67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /JavaScript/lab/lab 13 e-commerce/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, sans-serif; 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | header { 9 | background-color: #d87093; 10 | color: #fff; 11 | padding: 10px 0; 12 | text-align: center; 13 | } 14 | 15 | header h1 { 16 | margin: 0; 17 | } 18 | 19 | nav ul { 20 | list-style: none; 21 | padding: 0; 22 | } 23 | 24 | nav ul li { 25 | display: inline; 26 | margin: 0 15px; 27 | } 28 | 29 | nav ul li a { 30 | color: #fff; 31 | text-decoration: none; 32 | } 33 | 34 | .carousel { 35 | width: 100%; 36 | overflow: hidden; 37 | } 38 | 39 | .slides { 40 | display: flex; 41 | width: 300%; 42 | animation: slide 60s infinite; 43 | } 44 | 45 | .slides img { 46 | width: 33.33%; 47 | } 48 | 49 | @keyframes slide { 50 | 0% { transform: translateX(0); } 51 | 33% { transform: translateX(-33.33%); } 52 | 66% { transform: translateX(-66.66%); } 53 | 100% { transform: translateX(0); } 54 | } 55 | 56 | .products { 57 | padding: 20px; 58 | text-align: center; 59 | margin-bottom: 150px; 60 | } 61 | 62 | .product-list { 63 | display: flex; 64 | justify-content: space-around; 65 | flex-wrap: wrap; 66 | } 67 | 68 | .product-item { 69 | width: 200px; 70 | margin: 10px; 71 | padding: 10px; 72 | border: 1px solid #ccc; 73 | border-radius: 5px; 74 | text-align: center; 75 | } 76 | 77 | .product-item img { 78 | width: 100%; 79 | height: auto; 80 | } 81 | 82 | footer { 83 | background-color: #d87093; 84 | color: #fff; 85 | text-align: center; 86 | padding: 10px 0; 87 | position: fixed; 88 | width: 100%; 89 | bottom: 0; 90 | } 91 | -------------------------------------------------------------------------------- /JavaScript/lab/lab 2/app.js: -------------------------------------------------------------------------------- 1 | // let bYear = +prompt("enter your birth year"); 2 | // document.write("Your birth year is " + bYear); 3 | 4 | // let num1 = +prompt("enter a number"); 5 | // let num2 = +prompt("enter another number"); 6 | 7 | // console.log('Your total is ' + (num1 + num2)); 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | // let jobTitle = prompt('your desired job title'); 22 | // let country = prompt('where do you want to work?'); 23 | // let partnerName = prompt("who do you want to marry?"); 24 | // let kidsCount = prompt("prefered children count"); 25 | 26 | // let fortune = "You will be a " + jobTitle + " in " + country + ", and married to " + partnerName + " with " + kidsCount + " kids."; 27 | 28 | // alert(fortune); 29 | // console.log(fortune); 30 | // document.write(fortune); 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | // let emailId = prompt("what is your emai ID?"); 49 | // console.log('My email id is ' + emailId); 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | // let str = 5; 64 | // let num = "5"; 65 | 66 | // console.log(typeof str); 67 | // console.log(typeof num); 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | // "'Haider' ordered '3' 'tshirts' from abc store of '500' each. His total bill is '1500'" 82 | 83 | 84 | 85 | 86 | 87 | let product = prompt('enter your cart item'); 88 | let buyerName = prompt('enter your name'); 89 | let price = prompt('enter unit price'); 90 | let qty = prompt('enter quantity'); 91 | let message = buyerName + " ordered " + qty + product + " from abc store of " + price + " each. His total bill is " + (qty * price) + "."; 92 | 93 | document.write(message); 94 | 95 | 96 | 97 | 98 | 99 | 100 | -------------------------------------------------------------------------------- /JavaScript/lab/lab 2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

    Hello World

    10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /JavaScript/lab/lab 3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /JavaScript/lab/lab 4/app.js: -------------------------------------------------------------------------------- 1 | // let siblings = ["Haider", "Abdullah", "Muzammil"]; 2 | 3 | // let primeNumbers = [1, 2, 3, 5, 7, 11, 13]; 4 | 5 | // let qualifications = [true, false, true, true, false, false, true, true, true, false]; 6 | 7 | 8 | 9 | // let mixxedArr = ["Haider", 3344, true, 'Ali', 3413, false, 3419974]; 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | // let arr1 = [1, 2, 3, 4]; 25 | // let arr2 = [5, 6, 7, 8]; 26 | 27 | // let mixedArr = arr1.concat(arr2, arr3, arr4); 28 | 29 | // let mixedArr = arr1.concat(arr2).concat(arr3); 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | // let arr1 = [1, 2, 3, 4]; 40 | // let arr2 = [5, 6, 7, 8]; 41 | 42 | // let arr3 = [arr1, arr2, "haider"]; 43 | // console.log(arr3[1][3]); 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | // document.write("

    Qualifications:

    "); 69 | // let qualifications = ['SSC', "HSC", "BCS", "BS", "BCOM", "MS", "M.Phil", "Ph.D"]; 70 | // let index = 0; 71 | // document.write("
      "); 72 | // document.write("
    1. " + qualifications[index++] + "
      2. "); 73 | // document.write("
    2. " + qualifications[index++] + "
      3. "); 74 | // document.write("
    3. " + qualifications[index++] + "
      4. "); 75 | // document.write("
    4. " + qualifications[index++] + "
      5. "); 76 | // document.write("
    5. " + qualifications[index++] + "
      6. "); 77 | // document.write("
    6. " + qualifications[index++] + "
      7. "); 78 | // document.write("
    7. " + qualifications[index++] + "
      8. "); 79 | // document.write("
    8. " + qualifications[index++] + "
      9. "); 80 | // document.write("
    "); 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | // let fruits = ['apple', 'bnana', 'grapes', "orange"]; 141 | 142 | // let lastIndex = fruits.length - 1; 143 | 144 | // fruits[lastIndex] 145 | -------------------------------------------------------------------------------- /JavaScript/lab/lab 4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /JavaScript/lab/lab 5/app.js: -------------------------------------------------------------------------------- 1 | /* 2 | do not user includes and indexOf methods 3 | use for loop 4 | */ 5 | 6 | 7 | // let capCities = ['Karachi', 'Lahore', 'Peshawar', 'Quetta', 'Skardu']; 8 | 9 | // let userCity = prompt('Which city do you live in?'); //karachi 10 | // let isCapCity = false; 11 | 12 | // for (let i = 0; i < capCities.length; i++) { 13 | // let capCity = capCities[i]; 14 | // console.log(capCity); 15 | // if (userCity.toLowerCase() === capCity.toLowerCase()) { 16 | // console.log('You live in a capital city.'); 17 | // isCapCity = true; 18 | // break; 19 | // } 20 | // } 21 | 22 | // if (isCapCity === false) { 23 | // console.log('You do not live in a capital city.'); 24 | // let doYouWantToMove = confirm("do you want to move?"); 25 | // if (doYouWantToMove) { 26 | // console.log('you may explore properties on zameen.com'); 27 | // } 28 | // } 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | // for (let i = 0; i <= 3; i++) { 60 | // console.log("***** outer loop " + i + " *****"); 61 | 62 | // for (let j = 0; j <= 3; j++) { 63 | // console.log("====== inner loop " + j + " ======"); 64 | // } 65 | 66 | // } 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | let firstNames = ["Akram", "Abdullah", "Aadil", "Noman"]; 96 | let lastNames = ["Khan", "Ansari", "Qureshi", "Tanoli"]; 97 | let possibleNames = []; 98 | for (let i = 0; i < firstNames.length; i++) { 99 | let firstName = firstNames[i]; 100 | 101 | for (let j = 0; j < lastNames.length; j++) { 102 | let lastName = lastNames[j]; 103 | let fullName = firstName + " " + lastName; 104 | console.log(fullName); 105 | possibleNames.push(fullName); 106 | } 107 | } 108 | console.log(possibleNames); 109 | -------------------------------------------------------------------------------- /JavaScript/lab/lab 5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /JavaScript/lab/lab 6/app.js: -------------------------------------------------------------------------------- 1 | // haider HAIDER hAIdEr --> Haider 2 | // let userName = prompt('what is your name?'); 3 | // // haider 4 | // let firstChr = userName[0]; 5 | // firstChr = firstChr.toUpperCase(); 6 | 7 | // let restChr = userName.slice(1); 8 | // restChr = restChr.toLowerCase(); 9 | 10 | // console.log(firstChr + restChr); 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | // let fruits = ['banana','apple', 'watermelon', 'orange']; 47 | 48 | // fruits.sort(); 49 | 50 | // console.log(fruits); 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | // let fruits = ['banana', 'apple', 'watermelon', 'orange']; 59 | 60 | // let sortedFruits = fruits.toSorted(); 61 | // let reversedFruits = fruits.toReversed(); 62 | 63 | // console.log(fruits, sortedFruits, reversedFruits); 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | // let num = 2.9; 99 | // let round = Math.round(num); // 3 100 | // let ceiledVal = Math.ceil(num); // 3 101 | // let floorVal = Math.floor(num); //2 102 | 103 | // console.log(round, ceiledVal, floorVal); 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | // console.log(Math.max(5, 7, 3, 7, 40, 10571, 56, 741, 62, 450)); 128 | 129 | // console.log(Math.min(5, 7, 3, 7, 40, 3, 56, 741, 62, 450)); 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | // let num1 = [1, 2, 3]; 149 | // let num2 = [4, 5, 6]; 150 | 151 | // let num3 = [...num1, ...num2]; 152 | // // [1,2,3,4,5,6] 153 | 154 | // console.log(num3); 155 | // console.log(Math.max(...num3)); 156 | // console.log(Math.min(...num3)); 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | let random = Math.ceil(Math.random() * 6); 215 | 216 | console.log(random); 217 | 218 | 219 | -------------------------------------------------------------------------------- /JavaScript/lab/lab 6/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /JavaScript/lab/lab 7/app.js: -------------------------------------------------------------------------------- 1 | // let h1Elements = document.querySelectorAll("h1"); 2 | 3 | // h1Elements[0].innerHTML = "SMIT Admission"; 4 | 5 | // let spanEl = document.querySelectorAll("span"); 6 | 7 | // spanEl[0].innerHTML = "this is awkward"; 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | // let pEl = document.querySelectorAll("p"); 19 | 20 | // for (let i = 0; i < pEl.length; i++) { 21 | // pEl[i].innerHTML = "The quick brown fox jumps over the lazy dog."; 22 | // } 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | // let imgEl = document.querySelectorAll("img"); 31 | // imgEl[0].src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRAnFgdOqI3ng2L3UJqMeW9Acz5mGj6LAcbMGOApTkJYA&s"; 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | // function changeImage() { 41 | // console.log(2 + 2); 42 | // } 43 | 44 | 45 | // changeImage(); 46 | // changeImage(); 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | // let imgEl = document.querySelectorAll("img"); 64 | // let isNewImage = false; 65 | // function changeImage() { 66 | // if (isNewImage === false) { 67 | // imgEl[0].src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRAnFgdOqI3ng2L3UJqMeW9Acz5mGj6LAcbMGOApTkJYA&s"; 68 | // isNewImage = true; 69 | // } 70 | // else { 71 | // imgEl[0].src = "https://i.pinimg.com/474x/4b/f6/f1/4bf6f197ad48bcf5bcc0a761954cb48d.jpg"; 72 | // isNewImage = false; 73 | // } 74 | // } 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | let inputEl = document.querySelectorAll('input'); 96 | 97 | function showMessage() { 98 | console.log(inputEl[0].value); 99 | inputEl[0].value = ""; 100 | } -------------------------------------------------------------------------------- /JavaScript/lab/lab 7/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 13 | 14 | 15 | 16 |

    SMIT Attendance

    17 | 18 | 19 | 20 | 21 | 22 |
    23 |
    24 |
    25 | 26 |

    27 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia 28 | excepturi voluptatem aliquid quia ipsam, this is awesome modi 29 | ab molestias quis quas, saepe voluptatum reiciendis nobis praesentium 30 | alias voluptate? 31 |

    32 | shoaib akhtar 36 |

    37 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia 38 | excepturi voluptatem aliquid quia ipsam, repellat nulla dolore 39 | necessitatibus modi ab molestias quis quas, saepe voluptatum reiciendis 40 | nobis praesentium alias voluptate? 41 |

    42 |

    43 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia 44 | excepturi voluptatem aliquid quia ipsam, repellat nulla dolore 45 | necessitatibus modi ab molestias quis quas, saepe voluptatum reiciendis 46 | nobis praesentium alias voluptate? 47 |

    48 |

    49 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia 50 | excepturi voluptatem aliquid quia ipsam, repellat nulla dolore 51 | necessitatibus modi ab molestias quis quas, saepe voluptatum reiciendis 52 | nobis praesentium alias voluptate? 53 |

    54 |

    55 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia 56 | excepturi voluptatem aliquid quia ipsam, repellat nulla dolore 57 | necessitatibus modi ab molestias quis quas, saepe voluptatum reiciendis 58 | nobis praesentium alias voluptate? 59 |

    60 | 61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /JavaScript/lab/lab 8/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |

    11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /JavaScript/lab/lab 9/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |
    11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /NextJS/class-01 - helloworld/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /NextJS/class-01 - helloworld/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /NextJS/class-01 - helloworld/README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | # or 12 | pnpm dev 13 | # or 14 | bun dev 15 | ``` 16 | 17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 18 | 19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. 20 | 21 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. 22 | 23 | ## Learn More 24 | 25 | To learn more about Next.js, take a look at the following resources: 26 | 27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 29 | 30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 31 | 32 | ## Deploy on Vercel 33 | 34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 35 | 36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 37 | -------------------------------------------------------------------------------- /NextJS/class-01 - helloworld/next.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {}; 3 | 4 | export default nextConfig; 5 | -------------------------------------------------------------------------------- /NextJS/class-01 - helloworld/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "helloworld", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "react": "^18", 13 | "react-dom": "^18", 14 | "next": "14.2.4" 15 | }, 16 | "devDependencies": { 17 | "typescript": "^5", 18 | "@types/node": "^20", 19 | "@types/react": "^18", 20 | "@types/react-dom": "^18", 21 | "postcss": "^8", 22 | "tailwindcss": "^3.4.1", 23 | "eslint": "^8", 24 | "eslint-config-next": "14.2.4" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /NextJS/class-01 - helloworld/postcss.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('postcss-load-config').Config} */ 2 | const config = { 3 | plugins: { 4 | tailwindcss: {}, 5 | }, 6 | }; 7 | 8 | export default config; 9 | -------------------------------------------------------------------------------- /NextJS/class-01 - helloworld/public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /NextJS/class-01 - helloworld/public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /NextJS/class-01 - helloworld/src/app/button.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | type MyButtonTypes = { 4 | label: string, 5 | clickHandler: () => void; 6 | } 7 | 8 | export default function MyButton({ label, clickHandler }: MyButtonTypes) { 9 | // const eventHandler = () => { 10 | // console.log('this is event handler') 11 | // } 12 | // return 13 | 14 | return 15 | } -------------------------------------------------------------------------------- /NextJS/class-01 - helloworld/src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/NextJS/class-01 - helloworld/src/app/favicon.ico -------------------------------------------------------------------------------- /NextJS/class-01 - helloworld/src/app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | :root { 6 | --foreground-rgb: 0, 0, 0; 7 | --background-start-rgb: 214, 219, 220; 8 | --background-end-rgb: 255, 255, 255; 9 | } 10 | 11 | @media (prefers-color-scheme: dark) { 12 | :root { 13 | --foreground-rgb: 255, 255, 255; 14 | --background-start-rgb: 0, 0, 0; 15 | --background-end-rgb: 0, 0, 0; 16 | } 17 | } 18 | 19 | body { 20 | color: rgb(var(--foreground-rgb)); 21 | background: linear-gradient( 22 | to bottom, 23 | transparent, 24 | rgb(var(--background-end-rgb)) 25 | ) 26 | rgb(var(--background-start-rgb)); 27 | } 28 | 29 | @layer utilities { 30 | .text-balance { 31 | text-wrap: balance; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /NextJS/class-01 - helloworld/src/app/helloworld.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import MyButton from "./button" 4 | 5 | type HelloWorldTypes = { 6 | greet: string, 7 | message: string, 8 | btnLabel: string, 9 | handerFunc: () => void; 10 | } 11 | 12 | export default function HelloWorld({ 13 | greet, 14 | message, 15 | btnLabel, 16 | handerFunc 17 | }: HelloWorldTypes) { 18 | 19 | return ( 20 | <> 21 |

    {greet}

    22 |

    {message}

    23 | 27 | 28 | ) 29 | } -------------------------------------------------------------------------------- /NextJS/class-01 - helloworld/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | // import { Inter } from "next/font/google"; 3 | // import "./globals.css"; 4 | 5 | // const inter = Inter({ subsets: ["latin"] }); 6 | 7 | export const metadata: Metadata = { 8 | title: "Create Next App", 9 | description: "Generated by create next app", 10 | }; 11 | 12 | export default function RootLayout({ 13 | children, 14 | }: Readonly<{ 15 | children: React.ReactNode; 16 | }>) { 17 | return ( 18 | 19 | {children} 20 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /NextJS/class-01 - helloworld/src/app/page.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | 4 | import HelloWorld from "./helloworld"; 5 | 6 | 7 | export default function Home() { 8 | const signup = ()=>{ 9 | console.log('signup func'); 10 | } 11 | 12 | const login = ()=>{ 13 | console.log('login func'); 14 | } 15 | 16 | const forgetPassword = ()=>{ 17 | console.log('forgetPassword func'); 18 | } 19 | 20 | return ( 21 | <> 22 | 28 | 29 | 35 | 36 | 42 | 43 | ) 44 | } -------------------------------------------------------------------------------- /NextJS/class-01 - helloworld/tailwind.config.ts: -------------------------------------------------------------------------------- 1 | import type { Config } from "tailwindcss"; 2 | 3 | const config: Config = { 4 | content: [ 5 | "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", 6 | "./src/components/**/*.{js,ts,jsx,tsx,mdx}", 7 | "./src/app/**/*.{js,ts,jsx,tsx,mdx}", 8 | ], 9 | theme: { 10 | extend: { 11 | backgroundImage: { 12 | "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", 13 | "gradient-conic": 14 | "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", 15 | }, 16 | }, 17 | }, 18 | plugins: [], 19 | }; 20 | export default config; 21 | -------------------------------------------------------------------------------- /NextJS/class-01 - helloworld/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["dom", "dom.iterable", "esnext"], 4 | "allowJs": true, 5 | "skipLibCheck": true, 6 | "strict": true, 7 | "noEmit": true, 8 | "esModuleInterop": true, 9 | "module": "esnext", 10 | "moduleResolution": "bundler", 11 | "resolveJsonModule": true, 12 | "isolatedModules": true, 13 | "jsx": "preserve", 14 | "incremental": true, 15 | "plugins": [ 16 | { 17 | "name": "next" 18 | } 19 | ], 20 | "paths": { 21 | "@/*": ["./src/*"] 22 | } 23 | }, 24 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 25 | "exclude": ["node_modules"] 26 | } 27 | -------------------------------------------------------------------------------- /NextJS/class-02 - prop and states/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /NextJS/class-02 - prop and states/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /NextJS/class-02 - prop and states/README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | # or 12 | pnpm dev 13 | # or 14 | bun dev 15 | ``` 16 | 17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 18 | 19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. 20 | 21 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. 22 | 23 | ## Learn More 24 | 25 | To learn more about Next.js, take a look at the following resources: 26 | 27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 29 | 30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 31 | 32 | ## Deploy on Vercel 33 | 34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 35 | 36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 37 | -------------------------------------------------------------------------------- /NextJS/class-02 - prop and states/next.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {}; 3 | 4 | export default nextConfig; 5 | -------------------------------------------------------------------------------- /NextJS/class-02 - prop and states/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "class-02", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "react": "^18", 13 | "react-dom": "^18", 14 | "next": "14.2.5" 15 | }, 16 | "devDependencies": { 17 | "typescript": "^5", 18 | "@types/node": "^20", 19 | "@types/react": "^18", 20 | "@types/react-dom": "^18", 21 | "postcss": "^8", 22 | "tailwindcss": "^3.4.1", 23 | "eslint": "^8", 24 | "eslint-config-next": "14.2.5" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /NextJS/class-02 - prop and states/postcss.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('postcss-load-config').Config} */ 2 | const config = { 3 | plugins: { 4 | tailwindcss: {}, 5 | }, 6 | }; 7 | 8 | export default config; 9 | -------------------------------------------------------------------------------- /NextJS/class-02 - prop and states/public/images/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /NextJS/class-02 - prop and states/public/images/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /NextJS/class-02 - prop and states/src/app/counter.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { useState } from "react"; 4 | 5 | type CounterType = { 6 | message: string; 7 | count: number; 8 | }; 9 | 10 | export default function Counter({ message, count }: CounterType) { 11 | const [userName, setUserName] = useState(""); 12 | const [initCount, setInitCount] = useState(count); 13 | 14 | const addHandler = () => { 15 | setInitCount(initCount + 1); 16 | }; 17 | 18 | const changeHandler = (event: any) => { 19 | setUserName(event.target.value); 20 | }; 21 | 22 | return ( 23 | <> 24 |

    25 | {message} {initCount} 26 |

    27 | User Name: 28 | { 33 | setUserName(event.target.value); 34 | }} 35 | /> 36 |

    Welcome {userName}

    37 |

    {initCount}

    38 | 39 | 40 | ); 41 | } 42 | -------------------------------------------------------------------------------- /NextJS/class-02 - prop and states/src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/NextJS/class-02 - prop and states/src/app/favicon.ico -------------------------------------------------------------------------------- /NextJS/class-02 - prop and states/src/app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | :root { 6 | --foreground-rgb: 0, 0, 0; 7 | --background-start-rgb: 214, 219, 220; 8 | --background-end-rgb: 255, 255, 255; 9 | } 10 | 11 | @media (prefers-color-scheme: dark) { 12 | :root { 13 | --foreground-rgb: 255, 255, 255; 14 | --background-start-rgb: 0, 0, 0; 15 | --background-end-rgb: 0, 0, 0; 16 | } 17 | } 18 | 19 | body { 20 | color: rgb(var(--foreground-rgb)); 21 | background: linear-gradient( 22 | to bottom, 23 | transparent, 24 | rgb(var(--background-end-rgb)) 25 | ) 26 | rgb(var(--background-start-rgb)); 27 | } 28 | 29 | @layer utilities { 30 | .text-balance { 31 | text-wrap: balance; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /NextJS/class-02 - prop and states/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | // import { Inter } from "next/font/google"; 3 | // import "./globals.css"; 4 | 5 | // const inter = Inter({ subsets: ["latin"] }); 6 | 7 | export const metadata: Metadata = { 8 | title: "Create Next App", 9 | description: "Generated by create next app", 10 | }; 11 | 12 | export default function RootLayout({ 13 | children, 14 | }: Readonly<{ 15 | children: React.ReactNode; 16 | }>) { 17 | return ( 18 | 19 | {children} 20 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /NextJS/class-02 - prop and states/src/app/page.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | React.FC 3 | React.ReactNode 4 | */ 5 | 6 | import Counter from "./counter"; 7 | 8 | export default function Home() { 9 | return ( 10 | 14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /NextJS/class-02 - prop and states/tailwind.config.ts: -------------------------------------------------------------------------------- 1 | import type { Config } from "tailwindcss"; 2 | 3 | const config: Config = { 4 | content: [ 5 | "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", 6 | "./src/components/**/*.{js,ts,jsx,tsx,mdx}", 7 | "./src/app/**/*.{js,ts,jsx,tsx,mdx}", 8 | ], 9 | theme: { 10 | extend: { 11 | backgroundImage: { 12 | "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", 13 | "gradient-conic": 14 | "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", 15 | }, 16 | }, 17 | }, 18 | plugins: [], 19 | }; 20 | export default config; 21 | -------------------------------------------------------------------------------- /NextJS/class-02 - prop and states/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["dom", "dom.iterable", "esnext"], 4 | "allowJs": true, 5 | "skipLibCheck": true, 6 | "strict": true, 7 | "noEmit": true, 8 | "esModuleInterop": true, 9 | "module": "esnext", 10 | "moduleResolution": "bundler", 11 | "resolveJsonModule": true, 12 | "isolatedModules": true, 13 | "jsx": "preserve", 14 | "incremental": true, 15 | "plugins": [ 16 | { 17 | "name": "next" 18 | } 19 | ], 20 | "paths": { 21 | "@/*": ["./src/*"] 22 | } 23 | }, 24 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 25 | "exclude": ["node_modules"] 26 | } 27 | -------------------------------------------------------------------------------- /NextJS/class-03 - conditional rendering and lists/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /NextJS/class-03 - conditional rendering and lists/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /NextJS/class-03 - conditional rendering and lists/README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | # or 12 | pnpm dev 13 | # or 14 | bun dev 15 | ``` 16 | 17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 18 | 19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. 20 | 21 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. 22 | 23 | ## Learn More 24 | 25 | To learn more about Next.js, take a look at the following resources: 26 | 27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 29 | 30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 31 | 32 | ## Deploy on Vercel 33 | 34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 35 | 36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 37 | -------------------------------------------------------------------------------- /NextJS/class-03 - conditional rendering and lists/next.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {}; 3 | 4 | export default nextConfig; 5 | -------------------------------------------------------------------------------- /NextJS/class-03 - conditional rendering and lists/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "class-02", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "react": "^18", 13 | "react-dom": "^18", 14 | "next": "14.2.5" 15 | }, 16 | "devDependencies": { 17 | "typescript": "^5", 18 | "@types/node": "^20", 19 | "@types/react": "^18", 20 | "@types/react-dom": "^18", 21 | "postcss": "^8", 22 | "tailwindcss": "^3.4.1", 23 | "eslint": "^8", 24 | "eslint-config-next": "14.2.5" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /NextJS/class-03 - conditional rendering and lists/postcss.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('postcss-load-config').Config} */ 2 | const config = { 3 | plugins: { 4 | tailwindcss: {}, 5 | }, 6 | }; 7 | 8 | export default config; 9 | -------------------------------------------------------------------------------- /NextJS/class-03 - conditional rendering and lists/public/images/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /NextJS/class-03 - conditional rendering and lists/public/images/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /NextJS/class-03 - conditional rendering and lists/src/app/counter.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { useState } from "react"; 4 | 5 | type CounterType = { 6 | message: string; 7 | count: number; 8 | }; 9 | 10 | type UserType = { 11 | name: string; 12 | rollNum: number 13 | } 14 | type ErrorType = { 15 | type: "error" | "warning", 16 | errorMsg: string 17 | } 18 | 19 | export default function Counter({ message, count }: CounterType) { 20 | const [userName, setUserName] = useState(""); 21 | const [initCount, setInitCount] = useState(count); 22 | const [error, setError] = useState({ 23 | type:'error', 24 | errorMsg: "You are not listed in our system." 25 | }); 26 | 27 | 28 | const addHandler = () => { 29 | setInitCount(initCount + 1); 30 | }; 31 | 32 | const changeHandler = (event: any) => { 33 | setUserName(event.target.value); 34 | }; 35 | 36 | const toggleErrorHandler = ()=>{ 37 | if(error.type === 'error'){ 38 | setError({ 39 | type: 'warning', 40 | errorMsg: 'please wear your id card.' 41 | }); 42 | } 43 | else{ 44 | setError({ 45 | type: 'error', 46 | errorMsg: "You are not listed in our system." 47 | }); 48 | } 49 | } 50 | 51 | 52 | return ( 53 | <> 54 |

    55 | {message} {initCount} 56 |

    57 | User Name: 58 | { 63 | setUserName(event.target.value); 64 | }} 65 | /> 66 | 67 | { 68 | userName.length >= 3 ? 69 |

    Welcome {userName}

    : 70 |

    Please enter your name

    71 | } 72 | 73 |

    78 | {error.errorMsg} 79 |

    80 | 81 | 82 |

    {initCount}

    83 | 84 | 85 | ); 86 | } 87 | -------------------------------------------------------------------------------- /NextJS/class-03 - conditional rendering and lists/src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/NextJS/class-03 - conditional rendering and lists/src/app/favicon.ico -------------------------------------------------------------------------------- /NextJS/class-03 - conditional rendering and lists/src/app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | :root { 6 | --foreground-rgb: 0, 0, 0; 7 | --background-start-rgb: 214, 219, 220; 8 | --background-end-rgb: 255, 255, 255; 9 | } 10 | 11 | @media (prefers-color-scheme: dark) { 12 | :root { 13 | --foreground-rgb: 255, 255, 255; 14 | --background-start-rgb: 0, 0, 0; 15 | --background-end-rgb: 0, 0, 0; 16 | } 17 | } 18 | 19 | body { 20 | color: rgb(var(--foreground-rgb)); 21 | background: linear-gradient( 22 | to bottom, 23 | transparent, 24 | rgb(var(--background-end-rgb)) 25 | ) 26 | rgb(var(--background-start-rgb)); 27 | } 28 | 29 | @layer utilities { 30 | .text-balance { 31 | text-wrap: balance; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /NextJS/class-03 - conditional rendering and lists/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | // import { Inter } from "next/font/google"; 3 | // import "./globals.css"; 4 | 5 | // const inter = Inter({ subsets: ["latin"] }); 6 | 7 | export const metadata: Metadata = { 8 | title: "Create Next App", 9 | description: "Generated by create next app", 10 | }; 11 | 12 | export default function RootLayout({ 13 | children, 14 | }: Readonly<{ 15 | children: React.ReactNode; 16 | }>) { 17 | return ( 18 | 19 | {children} 20 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /NextJS/class-03 - conditional rendering and lists/src/app/page.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | React.FC 3 | React.ReactNode 4 | */ 5 | 6 | import Counter from "./counter"; 7 | import StudentsLists from "./studentslist"; 8 | 9 | const students = [ 10 | { 11 | name: "haider", 12 | rollNum: 2643, 13 | feePaid: true, 14 | }, 15 | { 16 | name: "abdullah", 17 | rollNum: 2644, 18 | feePaid: false, 19 | }, 20 | { 21 | name: "muzammil", 22 | rollNum: 2645, 23 | feePaid: true, 24 | }, 25 | { 26 | name: "Ahmed", 27 | rollNum: 2666, 28 | feePaid: false, 29 | }, 30 | ]; 31 | 32 | export default function Home() { 33 | return ( 34 | <> 35 | { 36 | students.map(({ name, rollNum, feePaid }, i) => ( 37 | 42 | )) 43 | } 44 | 45 | 46 | 47 | ); 48 | } 49 | -------------------------------------------------------------------------------- /NextJS/class-03 - conditional rendering and lists/src/app/studentslist.tsx: -------------------------------------------------------------------------------- 1 | type StudentsProps = { 2 | name: string; 3 | rollNum: number; 4 | feePaid: boolean; 5 | }; 6 | 7 | export default function StudentsLists({ 8 | name, 9 | rollNum, 10 | feePaid, 11 | }: StudentsProps) { 12 | return ( 13 |
    14 |

    {name}

    15 |

    {rollNum}

    16 | { 17 | feePaid ? 18 |

    Your fee is paid.

    : 19 |

    Please clear your dues.

    20 | } 21 |
    22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /NextJS/class-03 - conditional rendering and lists/tailwind.config.ts: -------------------------------------------------------------------------------- 1 | import type { Config } from "tailwindcss"; 2 | 3 | const config: Config = { 4 | content: [ 5 | "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", 6 | "./src/components/**/*.{js,ts,jsx,tsx,mdx}", 7 | "./src/app/**/*.{js,ts,jsx,tsx,mdx}", 8 | ], 9 | theme: { 10 | extend: { 11 | backgroundImage: { 12 | "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", 13 | "gradient-conic": 14 | "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", 15 | }, 16 | }, 17 | }, 18 | plugins: [], 19 | }; 20 | export default config; 21 | -------------------------------------------------------------------------------- /NextJS/class-03 - conditional rendering and lists/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["dom", "dom.iterable", "esnext"], 4 | "allowJs": true, 5 | "skipLibCheck": true, 6 | "strict": true, 7 | "noEmit": true, 8 | "esModuleInterop": true, 9 | "module": "esnext", 10 | "moduleResolution": "bundler", 11 | "resolveJsonModule": true, 12 | "isolatedModules": true, 13 | "jsx": "preserve", 14 | "incremental": true, 15 | "plugins": [ 16 | { 17 | "name": "next" 18 | } 19 | ], 20 | "paths": { 21 | "@/*": ["./src/*"] 22 | } 23 | }, 24 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 25 | "exclude": ["node_modules"] 26 | } 27 | -------------------------------------------------------------------------------- /NextJS/class-04 - Products and Categories/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /NextJS/class-04 - Products and Categories/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /NextJS/class-04 - Products and Categories/README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | # or 12 | pnpm dev 13 | # or 14 | bun dev 15 | ``` 16 | 17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 18 | 19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. 20 | 21 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. 22 | 23 | ## Learn More 24 | 25 | To learn more about Next.js, take a look at the following resources: 26 | 27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 29 | 30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 31 | 32 | ## Deploy on Vercel 33 | 34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 35 | 36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 37 | -------------------------------------------------------------------------------- /NextJS/class-04 - Products and Categories/next.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {}; 3 | 4 | export default nextConfig; 5 | -------------------------------------------------------------------------------- /NextJS/class-04 - Products and Categories/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "class-02", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "react": "^18", 13 | "react-dom": "^18", 14 | "next": "14.2.5" 15 | }, 16 | "devDependencies": { 17 | "typescript": "^5", 18 | "@types/node": "^20", 19 | "@types/react": "^18", 20 | "@types/react-dom": "^18", 21 | "postcss": "^8", 22 | "tailwindcss": "^3.4.1", 23 | "eslint": "^8", 24 | "eslint-config-next": "14.2.5" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /NextJS/class-04 - Products and Categories/postcss.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('postcss-load-config').Config} */ 2 | const config = { 3 | plugins: { 4 | tailwindcss: {}, 5 | }, 6 | }; 7 | 8 | export default config; 9 | -------------------------------------------------------------------------------- /NextJS/class-04 - Products and Categories/public/images/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /NextJS/class-04 - Products and Categories/public/images/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /NextJS/class-04 - Products and Categories/src/app/allproducts.tsx: -------------------------------------------------------------------------------- 1 | import Product from "./product"; 2 | import { ProductItemType } from "./product-type"; 3 | 4 | type ProductListType = { 5 | productList: ProductItemType[]; 6 | } 7 | 8 | export default function AllProducts({ productList }: ProductListType) { 9 | 10 | return ( 11 | 12 | 13 | 14 | 15 | 18 | 21 | 24 | 27 | 28 | 29 | 30 | 31 | 32 | { 33 | productList.map(({ 34 | id, name, price, category 35 | }, index) => ( 36 | 43 | )) 44 | } 45 | 46 | 47 | 48 | 49 | 50 | 51 |
    16 | Sr. 17 | 19 | Product 20 | 22 | Price 23 | 25 | Category 26 |
    52 | 53 | ) 54 | } 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /NextJS/class-04 - Products and Categories/src/app/categories.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | type CategoryType = { 4 | categories: string[]; 5 | setSelectedCat: (cat: string) => void; 6 | } 7 | 8 | export default function Categories({ 9 | categories, 10 | setSelectedCat 11 | }: CategoryType) { 12 | 13 | return ( 14 | <> 15 | { 16 | categories.map((category, i) => ( 17 | 23 | )) 24 | } 25 | 26 | 27 | ) 28 | } -------------------------------------------------------------------------------- /NextJS/class-04 - Products and Categories/src/app/counter.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { useState } from "react"; 4 | 5 | type CounterType = { 6 | message: string; 7 | count: number; 8 | }; 9 | 10 | type UserType = { 11 | name: string; 12 | rollNum: number 13 | } 14 | type ErrorType = { 15 | type: "error" | "warning", 16 | errorMsg: string 17 | } 18 | 19 | export default function Counter({ message, count }: CounterType) { 20 | const [userName, setUserName] = useState(""); 21 | const [initCount, setInitCount] = useState(count); 22 | const [error, setError] = useState({ 23 | type:'error', 24 | errorMsg: "You are not listed in our system." 25 | }); 26 | 27 | 28 | const addHandler = () => { 29 | setInitCount(initCount + 1); 30 | }; 31 | 32 | const changeHandler = (event: any) => { 33 | setUserName(event.target.value); 34 | }; 35 | 36 | const toggleErrorHandler = ()=>{ 37 | if(error.type === 'error'){ 38 | setError({ 39 | type: 'warning', 40 | errorMsg: 'please wear your id card.' 41 | }); 42 | } 43 | else{ 44 | setError({ 45 | type: 'error', 46 | errorMsg: "You are not listed in our system." 47 | }); 48 | } 49 | } 50 | 51 | 52 | return ( 53 | <> 54 |

    55 | {message} {initCount} 56 |

    57 | User Name: 58 | { 63 | setUserName(event.target.value); 64 | }} 65 | /> 66 | 67 | { 68 | userName.length >= 3 ? 69 |

    Welcome {userName}

    : 70 |

    Please enter your name

    71 | } 72 | 73 |

    78 | {error.errorMsg} 79 |

    80 | 81 | 82 |

    {initCount}

    83 | 84 | 85 | ); 86 | } 87 | -------------------------------------------------------------------------------- /NextJS/class-04 - Products and Categories/src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/NextJS/class-04 - Products and Categories/src/app/favicon.ico -------------------------------------------------------------------------------- /NextJS/class-04 - Products and Categories/src/app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | :root { 6 | --foreground-rgb: 0, 0, 0; 7 | --background-start-rgb: 214, 219, 220; 8 | --background-end-rgb: 255, 255, 255; 9 | } 10 | 11 | @media (prefers-color-scheme: dark) { 12 | :root { 13 | --foreground-rgb: 255, 255, 255; 14 | --background-start-rgb: 0, 0, 0; 15 | --background-end-rgb: 0, 0, 0; 16 | } 17 | } 18 | 19 | body { 20 | color: rgb(var(--foreground-rgb)); 21 | background: linear-gradient( 22 | to bottom, 23 | transparent, 24 | rgb(var(--background-end-rgb)) 25 | ) 26 | rgb(var(--background-start-rgb)); 27 | } 28 | 29 | @layer utilities { 30 | .text-balance { 31 | text-wrap: balance; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /NextJS/class-04 - Products and Categories/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | // import { Inter } from "next/font/google"; 3 | // import "./globals.css"; 4 | 5 | // const inter = Inter({ subsets: ["latin"] }); 6 | 7 | export const metadata: Metadata = { 8 | title: "Create Next App", 9 | description: "Generated by create next app", 10 | }; 11 | 12 | export default function RootLayout({ 13 | children, 14 | }: Readonly<{ 15 | children: React.ReactNode; 16 | }>) { 17 | return ( 18 | 19 | {children} 20 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /NextJS/class-04 - Products and Categories/src/app/myinfo.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | export default function MyInfo() { 4 | return ( 5 | 6 | 7 | 8 | 11 | 14 | 17 | 18 | 19 |
    9 | Haider Ali 10 | 12 | Muhammad Shah Alam 13 | 15 | 2643 16 |
    20 | ) 21 | } -------------------------------------------------------------------------------- /NextJS/class-04 - Products and Categories/src/app/page.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { useEffect, useState } from "react"; 4 | import AllProducts from "./allproducts"; 5 | import Categories from "./categories"; 6 | import MyInfo from "./myinfo"; 7 | import { ProductItemType } from "./product-type"; 8 | 9 | const products: ProductItemType[] = [ 10 | { 11 | id: 1, 12 | name: 'Iphone 15 Promax', 13 | price: 2500, 14 | category: "Phones" 15 | }, 16 | { 17 | id: 2, 18 | name: 'Airpod', 19 | price: 25, 20 | category: "Gadgets" 21 | }, 22 | { 23 | id: 3, 24 | name: 'Eid Special Nara J.', 25 | price: 25, 26 | category: "Cloths" 27 | }, 28 | { 29 | id: 4, 30 | name: 'Tesla Cybertruck', 31 | price: 65000, 32 | category: "Cars" 33 | }, 34 | { 35 | id: 5, 36 | name: 'Macbook', 37 | price: 2500, 38 | category: "Computers" 39 | }, 40 | { 41 | id: 6, 42 | name: 'Mehran', 43 | price: 2000, 44 | category: "Cars" 45 | }, 46 | ]; 47 | 48 | export default function Home() { 49 | const [categList, setCategList] = useState([ 50 | "All", "Phones", "Gadgets", "Cloths", "Cars", "Computers" 51 | ]); 52 | const [filteredProducts, setFilteredProducts] = useState(products); 53 | const [selectedCat, setSelectedCat] = useState("All"); 54 | 55 | useEffect(() => { 56 | console.log('Hello World'); 57 | }, []); 58 | 59 | useEffect(() => { 60 | 61 | let shrtListedPrd = products.filter(({ category }) => ( 62 | selectedCat === "All" || category === selectedCat 63 | )); 64 | setFilteredProducts(shrtListedPrd); 65 | 66 | 67 | }, [selectedCat]); 68 | 69 | 70 | return ( 71 | <> 72 | 73 | 74 | 78 | 81 | 82 | ); 83 | } 84 | -------------------------------------------------------------------------------- /NextJS/class-04 - Products and Categories/src/app/product-type.ts: -------------------------------------------------------------------------------- 1 | export type ProductItemType = { 2 | id: number; 3 | name: string; 4 | price: number; 5 | category: "All" | "Phones" | "Gadgets" | "Cloths" | "Cars" | "Computers"; 6 | }; 7 | -------------------------------------------------------------------------------- /NextJS/class-04 - Products and Categories/src/app/product.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | sr 3 | product name 4 | price 5 | category 6 | 7 | 8 | */ 9 | 10 | import { ProductItemType } from "./product-type"; 11 | 12 | export default function Product({ 13 | id, 14 | name, 15 | price, 16 | category 17 | }: ProductItemType) { 18 | return ( 19 | 20 | 21 | {id} 22 | 23 | 24 | {name} 25 | 26 | 27 | {price} 28 | 29 | 30 | {category} 31 | 32 | 33 | ) 34 | } -------------------------------------------------------------------------------- /NextJS/class-04 - Products and Categories/src/app/studentslist.tsx: -------------------------------------------------------------------------------- 1 | type StudentsProps = { 2 | name: string; 3 | rollNum: number; 4 | feePaid: boolean; 5 | }; 6 | 7 | export default function StudentsLists({ 8 | name, 9 | rollNum, 10 | feePaid, 11 | }: StudentsProps) { 12 | return ( 13 |
    14 |

    {name}

    15 |

    {rollNum}

    16 | { 17 | feePaid ? 18 |

    Your fee is paid.

    : 19 |

    Please clear your dues.

    20 | } 21 |
    22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /NextJS/class-04 - Products and Categories/tailwind.config.ts: -------------------------------------------------------------------------------- 1 | import type { Config } from "tailwindcss"; 2 | 3 | const config: Config = { 4 | content: [ 5 | "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", 6 | "./src/components/**/*.{js,ts,jsx,tsx,mdx}", 7 | "./src/app/**/*.{js,ts,jsx,tsx,mdx}", 8 | ], 9 | theme: { 10 | extend: { 11 | backgroundImage: { 12 | "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", 13 | "gradient-conic": 14 | "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", 15 | }, 16 | }, 17 | }, 18 | plugins: [], 19 | }; 20 | export default config; 21 | -------------------------------------------------------------------------------- /NextJS/class-04 - Products and Categories/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["dom", "dom.iterable", "esnext"], 4 | "allowJs": true, 5 | "skipLibCheck": true, 6 | "strict": true, 7 | "noEmit": true, 8 | "esModuleInterop": true, 9 | "module": "esnext", 10 | "moduleResolution": "bundler", 11 | "resolveJsonModule": true, 12 | "isolatedModules": true, 13 | "jsx": "preserve", 14 | "incremental": true, 15 | "plugins": [ 16 | { 17 | "name": "next" 18 | } 19 | ], 20 | "paths": { 21 | "@/*": ["./src/*"] 22 | } 23 | }, 24 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 25 | "exclude": ["node_modules"] 26 | } 27 | -------------------------------------------------------------------------------- /NextJS/class-05 - Auth Example/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /NextJS/class-05 - Auth Example/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /NextJS/class-05 - Auth Example/README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | # or 12 | pnpm dev 13 | # or 14 | bun dev 15 | ``` 16 | 17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 18 | 19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. 20 | 21 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. 22 | 23 | ## Learn More 24 | 25 | To learn more about Next.js, take a look at the following resources: 26 | 27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 29 | 30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 31 | 32 | ## Deploy on Vercel 33 | 34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 35 | 36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 37 | -------------------------------------------------------------------------------- /NextJS/class-05 - Auth Example/next.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {}; 3 | 4 | export default nextConfig; 5 | -------------------------------------------------------------------------------- /NextJS/class-05 - Auth Example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "class-02", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "react": "^18", 13 | "react-dom": "^18", 14 | "next": "14.2.5" 15 | }, 16 | "devDependencies": { 17 | "typescript": "^5", 18 | "@types/node": "^20", 19 | "@types/react": "^18", 20 | "@types/react-dom": "^18", 21 | "postcss": "^8", 22 | "tailwindcss": "^3.4.1", 23 | "eslint": "^8", 24 | "eslint-config-next": "14.2.5" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /NextJS/class-05 - Auth Example/postcss.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('postcss-load-config').Config} */ 2 | const config = { 3 | plugins: { 4 | tailwindcss: {}, 5 | }, 6 | }; 7 | 8 | export default config; 9 | -------------------------------------------------------------------------------- /NextJS/class-05 - Auth Example/public/images/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /NextJS/class-05 - Auth Example/public/images/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /NextJS/class-05 - Auth Example/src/app.rar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/NextJS/class-05 - Auth Example/src/app.rar -------------------------------------------------------------------------------- /NextJS/class-05 - Auth Example/src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/NextJS/class-05 - Auth Example/src/app/favicon.ico -------------------------------------------------------------------------------- /NextJS/class-05 - Auth Example/src/app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | :root { 6 | --foreground-rgb: 0, 0, 0; 7 | --background-start-rgb: 214, 219, 220; 8 | --background-end-rgb: 255, 255, 255; 9 | } 10 | 11 | @media (prefers-color-scheme: dark) { 12 | :root { 13 | --foreground-rgb: 255, 255, 255; 14 | --background-start-rgb: 0, 0, 0; 15 | --background-end-rgb: 0, 0, 0; 16 | } 17 | } 18 | 19 | body { 20 | color: rgb(var(--foreground-rgb)); 21 | background: linear-gradient( 22 | to bottom, 23 | transparent, 24 | rgb(var(--background-end-rgb)) 25 | ) 26 | rgb(var(--background-start-rgb)); 27 | } 28 | 29 | @layer utilities { 30 | .text-balance { 31 | text-wrap: balance; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /NextJS/class-05 - Auth Example/src/app/greet.tsx: -------------------------------------------------------------------------------- 1 | 2 | type GreetType = { 3 | userName?: string 4 | } 5 | 6 | export default function Greet({userName}: GreetType){ 7 | return

    Welcome {userName}

    8 | } -------------------------------------------------------------------------------- /NextJS/class-05 - Auth Example/src/app/hobbies.tsx: -------------------------------------------------------------------------------- 1 | type HobbiesType = { 2 | hobbies?: string[]; 3 | }; 4 | export default function Hobbies({ hobbies }: HobbiesType) { 5 | console.log(hobbies); 6 | 7 | return ( 8 |
      9 | {hobbies?.map((hobby, i) => ( 10 |
    • {hobby}
      • 11 | ))} 12 |
    13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /NextJS/class-05 - Auth Example/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | // import { Inter } from "next/font/google"; 3 | // import "./globals.css"; 4 | 5 | // const inter = Inter({ subsets: ["latin"] }); 6 | 7 | export const metadata: Metadata = { 8 | title: "Create Next App", 9 | description: "Generated by create next app", 10 | }; 11 | 12 | export default function RootLayout({ 13 | children, 14 | }: Readonly<{ 15 | children: React.ReactNode; 16 | }>) { 17 | return ( 18 | 19 | {children} 20 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /NextJS/class-05 - Auth Example/src/app/page.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { useState } from "react"; 4 | import UserTimeline from "./usertimeline"; 5 | import Login from "./login"; 6 | import { UserType } from "./usertype"; 7 | 8 | export default function Home() { 9 | const [isAuthenticated, setIsAuthenticated] = useState(false); 10 | const [user, setUser] = useState(null); 11 | 12 | return ( 13 | <> 14 | {isAuthenticated ? ( 15 | 18 | ) : ( 19 | 23 | )} 24 | 25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /NextJS/class-05 - Auth Example/src/app/usertimeline.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import Greet from "./greet"; 4 | import Hobbies from "./hobbies"; 5 | import { UserType } from "./usertype"; 6 | 7 | type UserTimelineType = { 8 | userData: (UserType | null); 9 | }; 10 | 11 | export default function UserTimeline({userData}: UserTimelineType) { 12 | console.log(userData); 13 | return ( 14 | <> 15 | 18 | 19 | 22 | 23 | 24 | ); 25 | } 26 | -------------------------------------------------------------------------------- /NextJS/class-05 - Auth Example/src/app/usertype.ts: -------------------------------------------------------------------------------- 1 | type PostType = { 2 | content: string; 3 | likes: number; 4 | }; 5 | 6 | export type UserType = { 7 | email: string; 8 | password: string; 9 | userName: string; 10 | hobbies: string[]; 11 | post: PostType[]; 12 | }; 13 | -------------------------------------------------------------------------------- /NextJS/class-05 - Auth Example/tailwind.config.ts: -------------------------------------------------------------------------------- 1 | import type { Config } from "tailwindcss"; 2 | 3 | const config: Config = { 4 | content: [ 5 | "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", 6 | "./src/components/**/*.{js,ts,jsx,tsx,mdx}", 7 | "./src/app/**/*.{js,ts,jsx,tsx,mdx}", 8 | ], 9 | theme: { 10 | extend: { 11 | backgroundImage: { 12 | "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", 13 | "gradient-conic": 14 | "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", 15 | }, 16 | }, 17 | }, 18 | plugins: [], 19 | }; 20 | export default config; 21 | -------------------------------------------------------------------------------- /NextJS/class-05 - Auth Example/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["dom", "dom.iterable", "esnext"], 4 | "allowJs": true, 5 | "skipLibCheck": true, 6 | "strict": true, 7 | "noEmit": true, 8 | "esModuleInterop": true, 9 | "module": "esnext", 10 | "moduleResolution": "bundler", 11 | "resolveJsonModule": true, 12 | "isolatedModules": true, 13 | "jsx": "preserve", 14 | "incremental": true, 15 | "plugins": [ 16 | { 17 | "name": "next" 18 | } 19 | ], 20 | "paths": { 21 | "@/*": ["./src/*"] 22 | } 23 | }, 24 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 25 | "exclude": ["node_modules"] 26 | } 27 | -------------------------------------------------------------------------------- /NextJS/class-06 - App Routers/.env: -------------------------------------------------------------------------------- 1 | AuthToken=fdasfwear832kl4n0vcb9435klmf 2 | 3 | FirebaseKey=dsafdsar23q8324klvnb9045mv9043 4 | 5 | 6 | OpenAIKey=dafwe43243439gfsd43qmfo40 7 | OpenAIPassword=haider123456 8 | 9 | AWSKey=dsafweqr5923n09vcbr -------------------------------------------------------------------------------- /NextJS/class-06 - App Routers/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /NextJS/class-06 - App Routers/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /NextJS/class-06 - App Routers/README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | # or 12 | pnpm dev 13 | # or 14 | bun dev 15 | ``` 16 | 17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 18 | 19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. 20 | 21 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. 22 | 23 | ## Learn More 24 | 25 | To learn more about Next.js, take a look at the following resources: 26 | 27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 29 | 30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 31 | 32 | ## Deploy on Vercel 33 | 34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 35 | 36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 37 | -------------------------------------------------------------------------------- /NextJS/class-06 - App Routers/next.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {}; 3 | 4 | export default nextConfig; 5 | -------------------------------------------------------------------------------- /NextJS/class-06 - App Routers/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nextjsroutes", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "react": "^18", 13 | "react-dom": "^18", 14 | "next": "14.2.5" 15 | }, 16 | "devDependencies": { 17 | "typescript": "^5", 18 | "@types/node": "^20", 19 | "@types/react": "^18", 20 | "@types/react-dom": "^18", 21 | "postcss": "^8", 22 | "tailwindcss": "^3.4.1", 23 | "eslint": "^8", 24 | "eslint-config-next": "14.2.5" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /NextJS/class-06 - App Routers/postcss.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('postcss-load-config').Config} */ 2 | const config = { 3 | plugins: { 4 | tailwindcss: {}, 5 | }, 6 | }; 7 | 8 | export default config; 9 | -------------------------------------------------------------------------------- /NextJS/class-06 - App Routers/public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /NextJS/class-06 - App Routers/public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /NextJS/class-06 - App Routers/src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/NextJS/class-06 - App Routers/src/app/favicon.ico -------------------------------------------------------------------------------- /NextJS/class-06 - App Routers/src/app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | :root { 6 | --foreground-rgb: 0, 0, 0; 7 | --background-start-rgb: 214, 219, 220; 8 | --background-end-rgb: 255, 255, 255; 9 | } 10 | 11 | @media (prefers-color-scheme: dark) { 12 | :root { 13 | --foreground-rgb: 255, 255, 255; 14 | --background-start-rgb: 0, 0, 0; 15 | --background-end-rgb: 0, 0, 0; 16 | } 17 | } 18 | 19 | body { 20 | color: rgb(var(--foreground-rgb)); 21 | background: linear-gradient( 22 | to bottom, 23 | transparent, 24 | rgb(var(--background-end-rgb)) 25 | ) 26 | rgb(var(--background-start-rgb)); 27 | } 28 | 29 | @layer utilities { 30 | .text-balance { 31 | text-wrap: balance; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /NextJS/class-06 - App Routers/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | // import { Inter } from "next/font/google"; 3 | // import "./globals.css"; 4 | 5 | // const inter = Inter({ subsets: ["latin"] }); 6 | 7 | export const metadata: Metadata = { 8 | title: "Create Next App", 9 | description: "Generated by create next app", 10 | }; 11 | 12 | export default function RootLayout({ 13 | children, 14 | }: Readonly<{ 15 | children: React.ReactNode; 16 | }>) { 17 | return ( 18 | 19 | {children} 20 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /NextJS/class-06 - App Routers/src/app/login/page.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import AuthForm from "@/components/authform"; 4 | import Link from "next/link"; 5 | 6 | export default function Login() { 7 | const login = (email: string, password: string) => { 8 | console.log("This is login function", email, password); 9 | }; 10 | 11 | return ( 12 | <> 13 | 17 | 18 |

    19 | Do not have an account? 20 | Sign up here. 21 |

    22 | 23 | ); 24 | } 25 | -------------------------------------------------------------------------------- /NextJS/class-06 - App Routers/src/app/signup/page.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import AuthForm from "@/components/authform"; 4 | import Link from "next/link"; 5 | 6 | export default function Signup() { 7 | const signup = (email: string, password: string) => { 8 | console.log("This is signup function", email, password); 9 | }; 10 | 11 | return ( 12 | <> 13 | 17 | 18 |

    19 | Already have an account? 20 | Login here. 21 |

    22 | 23 | ); 24 | } 25 | -------------------------------------------------------------------------------- /NextJS/class-06 - App Routers/src/components/authform.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { useState } from "react"; 4 | 5 | type AuthFormTypes = { 6 | btnLabel: string; 7 | btnFunc: (email: string, password: string) => void; 8 | }; 9 | 10 | export default function AuthForm({ btnLabel, btnFunc }: AuthFormTypes) { 11 | const [email, setEmail] = useState(""); 12 | const [password, setPassword] = useState(""); 13 | 14 | return ( 15 | <> 16 | 17 | { 22 | setEmail(e.target.value); 23 | }} 24 | /> 25 |
    26 | 27 | 28 | { 33 | setPassword(e.target.value); 34 | }} 35 | /> 36 |
    37 | 38 | 45 | 46 | ); 47 | } 48 | -------------------------------------------------------------------------------- /NextJS/class-06 - App Routers/tailwind.config.ts: -------------------------------------------------------------------------------- 1 | import type { Config } from "tailwindcss"; 2 | 3 | const config: Config = { 4 | content: [ 5 | "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", 6 | "./src/components/**/*.{js,ts,jsx,tsx,mdx}", 7 | "./src/app/**/*.{js,ts,jsx,tsx,mdx}", 8 | ], 9 | theme: { 10 | extend: { 11 | backgroundImage: { 12 | "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", 13 | "gradient-conic": 14 | "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", 15 | }, 16 | }, 17 | }, 18 | plugins: [], 19 | }; 20 | export default config; 21 | -------------------------------------------------------------------------------- /NextJS/class-06 - App Routers/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["dom", "dom.iterable", "esnext"], 4 | "allowJs": true, 5 | "skipLibCheck": true, 6 | "strict": true, 7 | "noEmit": true, 8 | "esModuleInterop": true, 9 | "module": "esnext", 10 | "moduleResolution": "bundler", 11 | "resolveJsonModule": true, 12 | "isolatedModules": true, 13 | "jsx": "preserve", 14 | "incremental": true, 15 | "plugins": [ 16 | { 17 | "name": "next" 18 | } 19 | ], 20 | "paths": { 21 | "@/*": ["./src/*"] 22 | } 23 | }, 24 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 25 | "exclude": ["node_modules"] 26 | } 27 | -------------------------------------------------------------------------------- /TypeScript/class 01 - Hello World/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /TypeScript/class 01 - Hello World/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /TypeScript/class 01 - Hello World/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "class 01 - Hello World", 3 | "lockfileVersion": 3, 4 | "requires": true, 5 | "packages": { 6 | "": { 7 | "devDependencies": { 8 | "typescript": "^5.5.2" 9 | } 10 | }, 11 | "node_modules/typescript": { 12 | "version": "5.5.2", 13 | "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.2.tgz", 14 | "integrity": "sha512-NcRtPEOsPFFWjobJEtfihkLCZCXZt/os3zf8nTxjVH3RvTSxjrCamJpbExGvYOF+tFHc3pA65qpdwPbzjohhew==", 15 | "bin": { 16 | "tsc": "bin/tsc", 17 | "tsserver": "bin/tsserver" 18 | }, 19 | "engines": { 20 | "node": ">=14.17" 21 | } 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /TypeScript/class 01 - Hello World/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "devDependencies": { 3 | "typescript": "^5.5.2" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /TypeScript/class 01 - Hello World/script.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | /* 3 | https://www.w3schools.com/typescript/typescript_getstarted.php 4 | 5 | 6 | install node js from nodejs.org 7 | 8 | 9 | 10 | install typescript in your working directory with following command 11 | npm install typescript --save-dev 12 | 13 | 14 | 15 | create .gitignore and add node_modules 16 | 17 | 18 | 19 | run following command to check tsc 20 | npx tsc 21 | 22 | 23 | 24 | run following command to create tsconfig.json 25 | npx tsc --init 26 | 27 | 28 | 29 | run following command to transpile 30 | npx tsc 31 | 32 | 33 | 34 | run following command to transpile and watch 35 | npx tsc --watch 36 | 37 | 38 | */ 39 | let user = "haider"; 40 | user = "abdullah"; 41 | let num = 5; 42 | num = 7; 43 | let isOff = true; 44 | isOff = false; 45 | function greet(userName) { 46 | console.log(`Welcome ${userName}`); 47 | } 48 | greet(user); 49 | function makeGreeting(userName, msg) { 50 | return `${msg} ${userName}`; 51 | } 52 | let greetMsg = makeGreeting("haider", "How are you"); 53 | console.log(greetMsg); 54 | -------------------------------------------------------------------------------- /TypeScript/class 01 - Hello World/script.ts: -------------------------------------------------------------------------------- 1 | /* 2 | https://www.w3schools.com/typescript/typescript_getstarted.php 3 | 4 | 5 | install node js from nodejs.org 6 | 7 | 8 | 9 | install typescript in your working directory with following command 10 | npm install typescript --save-dev 11 | 12 | 13 | 14 | create .gitignore and add node_modules 15 | 16 | 17 | 18 | run following command to check tsc 19 | npx tsc 20 | 21 | 22 | 23 | run following command to create tsconfig.json 24 | npx tsc --init 25 | 26 | 27 | 28 | run following command to transpile 29 | npx tsc 30 | 31 | 32 | 33 | run following command to transpile and watch 34 | npx tsc --watch 35 | 36 | 37 | */ 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | let user: string = "haider"; 46 | user = "abdullah" 47 | 48 | let num: number = 5; 49 | num = 7; 50 | 51 | let isOff: boolean = true; 52 | isOff = false; 53 | 54 | 55 | function greet(userName: string): void { 56 | console.log(`Welcome ${userName}`); 57 | } 58 | greet(user) 59 | 60 | 61 | function makeGreeting(userName: string, msg: string): string { 62 | return `${msg} ${userName}`; 63 | } 64 | 65 | let greetMsg: string = makeGreeting("haider", "How are you") 66 | console.log(greetMsg) -------------------------------------------------------------------------------- /TypeScript/class 01 - Hello World/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2016", 4 | "module": "commonjs", 5 | "esModuleInterop": true, 6 | "forceConsistentCasingInFileNames": true, 7 | "strict": true, 8 | "skipLibCheck": true 9 | } 10 | } -------------------------------------------------------------------------------- /TypeScript/class 02 - Hello World/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /TypeScript/class 02 - Hello World/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /TypeScript/class 02 - Hello World/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "helloworld-typescript", 3 | "version": "0.0.1", 4 | "lockfileVersion": 3, 5 | "requires": true, 6 | "packages": { 7 | "": { 8 | "name": "helloworld-typescript", 9 | "version": "0.0.1", 10 | "devDependencies": { 11 | "typescript": "^5.5.2" 12 | } 13 | }, 14 | "node_modules/typescript": { 15 | "version": "5.5.2", 16 | "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.2.tgz", 17 | "integrity": "sha512-NcRtPEOsPFFWjobJEtfihkLCZCXZt/os3zf8nTxjVH3RvTSxjrCamJpbExGvYOF+tFHc3pA65qpdwPbzjohhew==", 18 | "dev": true, 19 | "bin": { 20 | "tsc": "bin/tsc", 21 | "tsserver": "bin/tsserver" 22 | }, 23 | "engines": { 24 | "node": ">=14.17" 25 | } 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /TypeScript/class 02 - Hello World/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "helloworld-typescript", 3 | "version": "0.0.1", 4 | "description": "We are learning typescript.", 5 | "scripts": { 6 | "start": "npx tsc --watch", 7 | "build": "npx tsc", 8 | "watch": "npx tsc --watch" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/haideralishah/Saylani-Batch-11-Section-G.git" 13 | }, 14 | "devDependencies": { 15 | "typescript": "^5.5.2" 16 | } 17 | } -------------------------------------------------------------------------------- /TypeScript/class 02 - Hello World/script.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | /*Union Types*/ 3 | // let user: string | number = "haider"; 4 | let h = "a"; 5 | let o = 4; 6 | let c = "e"; 7 | let u = true; 8 | console.log(h, o, c, u); 9 | -------------------------------------------------------------------------------- /TypeScript/class 02 - Hello World/script.ts: -------------------------------------------------------------------------------- 1 | 2 | /*Union Types*/ 3 | // let user: string | number = "haider"; 4 | 5 | // user = 5; 6 | 7 | // let fruits: string[] = ['Apple', 'Banana']; 8 | 9 | // let mixArr: (string | number)[] = ['Apple', 'Banana']; 10 | // mixArr.push(1); 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | // let user: any; 23 | // user = "haider"; 24 | // user = 2; 25 | // user = true; 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | /* Making custome types or aliases */ 46 | // type Mixed = string | number | boolean; 47 | 48 | // let h: Mixed = "a"; 49 | 50 | // let o: Mixed = 4; 51 | 52 | // let c: Mixed = "e"; 53 | 54 | // let u: Mixed = true; 55 | 56 | // console.log(h, o, c, u); 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | type Car = { 70 | name: string, 71 | model: number, 72 | varient: string, 73 | isAutomatic: boolean, 74 | features: string[], 75 | launchedYear?: number, 76 | calculateAvg?: (fuelQty: number, distance: number) => void 77 | } 78 | 79 | let car: Car = { 80 | name: 'Mehran', 81 | model: 2009, 82 | varient: 'VXR', 83 | isAutomatic: false, 84 | features: ["Air Bags", "Air Conditioned"], 85 | calculateAvg: (fuelQty, distance) => { 86 | 87 | } 88 | } 89 | 90 | car.launchedYear = 2000; 91 | 92 | 93 | -------------------------------------------------------------------------------- /TypeScript/class 03 - Hello World/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /TypeScript/class 03 - Hello World/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /TypeScript/class 03 - Hello World/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "helloworld", 3 | "version": "1.0.0", 4 | "lockfileVersion": 3, 5 | "requires": true, 6 | "packages": { 7 | "": { 8 | "name": "helloworld", 9 | "version": "1.0.0", 10 | "devDependencies": { 11 | "typescript": "^5.5.2" 12 | } 13 | }, 14 | "node_modules/typescript": { 15 | "version": "5.5.2", 16 | "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.2.tgz", 17 | "integrity": "sha512-NcRtPEOsPFFWjobJEtfihkLCZCXZt/os3zf8nTxjVH3RvTSxjrCamJpbExGvYOF+tFHc3pA65qpdwPbzjohhew==", 18 | "dev": true, 19 | "bin": { 20 | "tsc": "bin/tsc", 21 | "tsserver": "bin/tsserver" 22 | }, 23 | "engines": { 24 | "node": ">=14.17" 25 | } 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /TypeScript/class 03 - Hello World/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "helloworld", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "start": "npx tsc --watch", 6 | "build": "npx tsc" 7 | }, 8 | "devDependencies": { 9 | "typescript": "^5.5.2" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /TypeScript/class 03 - Hello World/script.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | // let basicColors2: string[]; 3 | // let basicColors: [string, string, string]; 4 | // basicColors = ['red', 'green', 'blue']; 5 | // let mixArr2: (string | number | boolean)[]; 6 | // let mixArr: readonly [string, number, boolean]; 7 | // mixArr = ["hello", 1, true]; 8 | // let mixArr: readonly [string, number, boolean] = ["hello", 1, true]; 9 | // const pending = "pending"; 10 | // const confirmed = "confirmed"; 11 | // const shipped = "shipped"; 12 | // const delivered = "delivered"; 13 | // enum OrderStatus { 14 | // pending, 15 | // confirmed, 16 | // shipped, 17 | // delivered 18 | // } 19 | // console.log(OrderStatus.shipped); 20 | // enum Province { 21 | // sindh = 'Sindh', 22 | // punjab = "Punjab", 23 | // balochistan = "Balochistan", 24 | // KP = "KP", 25 | // GB = "GB" 26 | // } 27 | // console.log(Province.balochistan) 28 | // enum HTTPCode { 29 | // success = 200, 30 | // badReqest = 400, 31 | // myMistake = 500 32 | // } 33 | /*use with key*/ 34 | // console.log(HTTPCode.success); 35 | /*use with value*/ 36 | // console.log(HTTPCode[400]); 37 | // enum MathConst { 38 | // PI = 3.14, 39 | // ranNum = Math.random(), 40 | // sum = 5 + 9 41 | // } 42 | // console.log(MathConst.PI); 43 | // console.log(MathConst.sum); 44 | // console.log(MathConst.ranNum); 45 | // console.log(MathConst.ranNum); 46 | let a = prompt("what is your name?"); 47 | let userName = a; 48 | let userName2 = a; 49 | -------------------------------------------------------------------------------- /TypeScript/class 04 - Modules and Classes/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /TypeScript/class 04 - Modules and Classes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /TypeScript/class 04 - Modules and Classes/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "helloworld", 3 | "version": "1.0.0", 4 | "lockfileVersion": 3, 5 | "requires": true, 6 | "packages": { 7 | "": { 8 | "name": "helloworld", 9 | "version": "1.0.0", 10 | "devDependencies": { 11 | "typescript": "^5.5.2" 12 | } 13 | }, 14 | "node_modules/typescript": { 15 | "version": "5.5.2", 16 | "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.2.tgz", 17 | "integrity": "sha512-NcRtPEOsPFFWjobJEtfihkLCZCXZt/os3zf8nTxjVH3RvTSxjrCamJpbExGvYOF+tFHc3pA65qpdwPbzjohhew==", 18 | "dev": true, 19 | "bin": { 20 | "tsc": "bin/tsc", 21 | "tsserver": "bin/tsserver" 22 | }, 23 | "engines": { 24 | "node": ">=14.17" 25 | } 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /TypeScript/class 04 - Modules and Classes/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "helloworld", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "start": "npx tsc --watch", 6 | "build": "npx tsc" 7 | }, 8 | "devDependencies": { 9 | "typescript": "^5.5.2" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /TypeScript/class 04 - Modules and Classes/script.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | /* 3 | 1. add type="module" in script tag 4 | 2. modify tsconfig.json and change target and module properties to ESNext 5 | 3. run with live server 6 | */ 7 | class Car { 8 | name; 9 | model; 10 | varient; 11 | constructor(carName, model, varient) { 12 | this.name = carName; 13 | this.model = model; 14 | this.varient = varient; 15 | } 16 | isAutomatic = true; 17 | calculateAverage(fuel, milage) { 18 | let msg = `${this.name} has fuel average of ${milage / fuel} km.`; 19 | console.log(msg); 20 | } 21 | } 22 | let car1 = new Car("Mehran", 2005, "VXR"); 23 | car1.calculateAverage(20, 400); 24 | let car2 = new Car("Haval", 2023, "HEV"); 25 | car2.calculateAverage(10, 150); 26 | console.log(car1, car2); 27 | -------------------------------------------------------------------------------- /TypeScript/class 04 - Modules and Classes/utils/sum.js: -------------------------------------------------------------------------------- 1 | export default function sum(num1, num2) { 2 | return num1 + num2; 3 | } 4 | export let userName = "haider ali"; 5 | export let isTeacher = true; 6 | export let age = 33; 7 | export let fruits = ["apple", "banana"]; 8 | export let car = { name: "Mehran", model: 2005 }; 9 | // let userName = "haider"; 10 | // let fruits = ["apple", "banana"]; 11 | // let car = { name: "Mehran", model: 2005 }; 12 | // export { userName, fruits, car }; 13 | // export default car; 14 | -------------------------------------------------------------------------------- /TypeScript/class 04 - Modules and Classes/utils/sum.ts: -------------------------------------------------------------------------------- 1 | export default function sum(num1: number, num2: number): number { 2 | return num1 + num2; 3 | } 4 | 5 | export let userName = "haider ali"; 6 | 7 | export let isTeacher = true; 8 | 9 | export let age = 33; 10 | 11 | export let fruits = ["apple", "banana"]; 12 | 13 | export let car = { name: "Mehran", model: 2005 } 14 | 15 | 16 | 17 | 18 | 19 | 20 | // let userName = "haider"; 21 | 22 | // let fruits = ["apple", "banana"]; 23 | 24 | // let car = { name: "Mehran", model: 2005 }; 25 | 26 | // export { userName, fruits, car }; 27 | // export default car; -------------------------------------------------------------------------------- /books/Wiley.HTML.and.CSS.Oct.2011.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/books/Wiley.HTML.and.CSS.Oct.2011.pdf -------------------------------------------------------------------------------- /books/a.smarter.way.to.learn.javascript.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haideralishah/Saylani-Batch-11-Section-G/614731f60b7044184b923dfa322d0d7028c23373/books/a.smarter.way.to.learn.javascript.pdf -------------------------------------------------------------------------------- /git commands.txt: -------------------------------------------------------------------------------- 1 | git config --global user.name 2 | git config --global user.email 3 | 4 | 5 | git init 6 | 7 | 8 | 9 | git status 10 | To stage: 11 | git add 12 | To Commit: 13 | git commit -m "" 14 | 15 | 16 | git log 17 | 18 | 19 | 20 | git branch 21 | git branch 22 | git checkout 23 | 24 | 25 | 26 | To merge checkout to parent branch 27 | git merge 28 | 29 | 30 | git remote add origin 31 | git push -u origin 32 | 33 | 34 | git clone 35 | git pull 36 | 37 | 38 | 39 | 40 | --------------------------------------------------------------------------------