├── BATCH1-Q2-CN
    ├── CSS
    │   ├── Oct 11
    │   │   ├── style1.css
    │   │   ├── Assignment.png
    │   │   ├── sample2.html
    │   │   ├── sample1.html
    │   │   ├── sample5.html
    │   │   ├── sample6.html
    │   │   ├── sample3.html
    │   │   └── sample4.html
    │   ├── Oct 26
    │   │   ├── border.png
    │   │   ├── bullet.gif
    │   │   ├── display.html
    │   │   ├── sample5.html
    │   │   ├── sample4.html
    │   │   ├── sample1.html
    │   │   ├── sample3.html
    │   │   ├── boxes.html
    │   │   ├── sample6.html
    │   │   ├── sample2.html
    │   │   └── form.html
    │   ├── Oct 19
    │   │   ├── Assignment.pdf
    │   │   ├── panacloud.png
    │   │   ├── AtomicRobusta.otf
    │   │   ├── sample7.html
    │   │   ├── sample3.html
    │   │   ├── sample2.html
    │   │   ├── sample1.html
    │   │   ├── sample6.html
    │   │   ├── sample4.html
    │   │   └── sample5.html
    │   └── Jan 4
    │   │   ├── sample3.html
    │   │   ├── sample4.html
    │   │   ├── sample5.html
    │   │   ├── sample2.html
    │   │   ├── sample1.html
    │   │   └── sample6.html
    ├── HTML
    │   ├── Oct 5
    │   │   ├── panacloud.png
    │   │   ├── sample6.html
    │   │   ├── sample4.html
    │   │   ├── sample1.html
    │   │   ├── sample7.html
    │   │   ├── sample5.html
    │   │   ├── sample2.html
    │   │   └── sample3.html
    │   ├── Sep 28
    │   │   ├── panacloud.png
    │   │   ├── Internal links
    │   │   │   ├── contact.html
    │   │   │   ├── html
    │   │   │   │   └── about.html
    │   │   │   └── home.html
    │   │   ├── sample3.html
    │   │   ├── sample2.html
    │   │   ├── sample7.html
    │   │   ├── sample8.html
    │   │   ├── sample1.html
    │   │   ├── sample9.html
    │   │   ├── sample10.html
    │   │   ├── sample5.html
    │   │   ├── sample6.html
    │   │   └── sample4.html
    │   └── Sep 21
    │   │   ├── sample1.html
    │   │   ├── sample3.html
    │   │   └── sample2.html
    └── JS
    │   ├── Dec 7
    │       ├── sample5.html
    │       ├── sample6.html
    │       ├── sample2.html
    │       ├── sample4.html
    │       ├── sample3.html
    │       ├── sample1.html
    │       └── sample7.html
    │   ├── Nov 2
    │       ├── sample1.html
    │       ├── sample3.html
    │       ├── sample4.html
    │       └── sample2.html
    │   ├── Nov 9
    │       ├── sample2.html
    │       ├── sample3.html
    │       ├── sample5.html
    │       ├── sample4.html
    │       └── sample1.html
    │   ├── Nov 30
    │       ├── sample5.html
    │       ├── sample7.html
    │       ├── sample4.html
    │       ├── sample1.html
    │       ├── sample6.html
    │       ├── sample3.html
    │       └── sample2.html
    │   ├── Dec 21
    │       ├── sample8.html
    │       ├── sample6.html
    │       ├── sample3.html
    │       ├── sample4.html
    │       ├── sample7.html
    │       ├── sample2.html
    │       ├── sample5.html
    │       └── sample1.html
    │   ├── Dec 14
    │       ├── sample7.html
    │       ├── sample6.html
    │       ├── sample4.html
    │       ├── sample2.html
    │       ├── sample5.html
    │       ├── sample3.html
    │       └── sample1.html
    │   └── Nov 16
    │       ├── sample1.html
    │       ├── sample6.html
    │       ├── sample3.html
    │       ├── sample5.html
    │       ├── sample4.html
    │       └── sample2.html
└── README.md


/BATCH1-Q2-CN/CSS/Oct 11/style1.css:
--------------------------------------------------------------------------------
1 | h1 {
2 |     color: red;
3 | }
4 | p {
5 |     color: darkcyan;
6 | }


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/CSS/Oct 26/border.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuhammadMohsin/PIAIC-Teaching/HEAD/BATCH1-Q2-CN/CSS/Oct 26/border.png


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/CSS/Oct 26/bullet.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuhammadMohsin/PIAIC-Teaching/HEAD/BATCH1-Q2-CN/CSS/Oct 26/bullet.gif


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/CSS/Oct 11/Assignment.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuhammadMohsin/PIAIC-Teaching/HEAD/BATCH1-Q2-CN/CSS/Oct 11/Assignment.png


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/CSS/Oct 19/Assignment.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuhammadMohsin/PIAIC-Teaching/HEAD/BATCH1-Q2-CN/CSS/Oct 19/Assignment.pdf


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/CSS/Oct 19/panacloud.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuhammadMohsin/PIAIC-Teaching/HEAD/BATCH1-Q2-CN/CSS/Oct 19/panacloud.png


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/HTML/Oct 5/panacloud.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuhammadMohsin/PIAIC-Teaching/HEAD/BATCH1-Q2-CN/HTML/Oct 5/panacloud.png


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/HTML/Sep 28/panacloud.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuhammadMohsin/PIAIC-Teaching/HEAD/BATCH1-Q2-CN/HTML/Sep 28/panacloud.png


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/CSS/Oct 19/AtomicRobusta.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuhammadMohsin/PIAIC-Teaching/HEAD/BATCH1-Q2-CN/CSS/Oct 19/AtomicRobusta.otf


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/HTML/Sep 28/Internal links/contact.html:
--------------------------------------------------------------------------------
1 | <html>
2 | 	<head></head>
3 | 	<body>
4 | 		<h1>This is Contact Page</h1>
5 | 	</body>
6 | </html>
7 | 


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/HTML/Sep 28/Internal links/html/about.html:
--------------------------------------------------------------------------------
1 | <html>
2 | 	<head></head>
3 | 	<body>
4 | 		<h1>This is About Page</h1>
5 | 	</body>
6 | </html>
7 | 


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/HTML/Sep 28/sample3.html:
--------------------------------------------------------------------------------
1 | <html>
2 | 	<head>
3 | 		<title>Sample3</title>
4 | 	</head>
5 | 	<body>
6 | 		<a href="mailto:author@gmail.com">Contact to Author</a>	
7 | 	</body>
8 | </html>
9 | 


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/HTML/Sep 21/sample1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 	<head></head>
 4 | 	<body>
 5 | 		<h1>This is my main heading</h1>
 6 | 
 7 |                 <h2>This is my sub heading</h2>
 8 | 
 9 | 		<h3>This is my heading 3</h3>
10 | 
11 | 		<h6>This is my heading 6 </h6>
12 | 	</body>
13 | 
14 | </html
15 | 


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/HTML/Sep 28/sample2.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 	<head>
 3 | 		<title>Sample2</title>
 4 | 	</head>
 5 | 	<body>
 6 | 		<a href="https://www.google.com" target="_blank"> Click here to google </a>
 7 | 		<br/>
 8 | 		<a href="https://www.youtube.com"> Click here to watch my video </a>	
 9 | 	</body>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/HTML/Sep 28/Internal links/home.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 	<head></head>
 3 | 	<body>
 4 | 		<h1>This is Home Page</h1>
 5 | 
 6 | 		<ul>
 7 | 			<li><a href="home.html">Home</a></li>
 8 | 			<li><a href="contact.html">Contact</a></li>
 9 | 			<li><a href="html/about.html">About</a></li>
10 | 		</ul>
11 | 	</body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/HTML/Sep 28/sample7.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 	<head>
 3 | 		<title>Sample7</title>
 4 | 	</head>
 5 | 	<body>
 6 | 		<figure>
 7 | 			 <img src="panacloud.png" alt="Panacloud logo" title="Panacloud"/>
 8 | 				<br/>
 9 | 			<figcaption>
10 | 				<p>This is detail of this image</p>			
11 | 			</figcaption>
12 | 		</figure>
13 | 	</body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/HTML/Sep 28/sample8.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 	<head>
 3 | 		<title>Sample8</title>
 4 | 	</head>
 5 | 	<body>
 6 | 		<table border="1">
 7 | 			<tr>
 8 | 				<td>1</td>
 9 | 				<td>2</td>
10 | 				<td>3</td>			
11 | 			</tr>
12 | 			<tr>
13 | 				<td>4</td>
14 | 				<td></td>
15 | 				<td>6</td>			
16 | 			</tr>
17 | 			<tr>
18 | 				<td>7</td>
19 | 				<td>8</td>
20 | 				<td>9</td>			
21 | 			</tr>
22 | 		</table>
23 | 	</body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # PIAIC-Teaching
 2 | 
 3 | In this repository you will get all the examples and code snippets which we discuss in PIAIC Cloud Native Computing class.
 4 | 
 5 | ### Books
 6 | 
 7 | We will follow below textbooks in this course
 8 | 
 9 | - [HTML & CSS by Jon Duckett](https://drive.google.com/open?id=1UEOzps_BDX-GYu7LQkHG95HmogVBcyIF)
10 | - [Smarter Way to Learn Javascript](https://drive.google.com/open?id=147UyzyrmWPSphddp5TOk6PWwVudGF4Y)
11 | 


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/JS/Dec 7/sample5.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8" />
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 8 |   <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |   <script>
13 |     var now = new Date();
14 |     now.setHours(17);
15 |     console.log(now.toDateString());
16 |   </script>
17 | </body>
18 | 
19 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/HTML/Sep 28/sample1.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 	<head>
 3 | 		<title>Sample1</title>
 4 | 	</head>
 5 | 	<body>
 6 | 		<ol>
 7 | 			<li>Samsung
 8 | 				<ul>
 9 | 					<li>Galaxy</li>
10 | 					<li>Note series</li>
11 | 				</ul>			
12 | 			</li>	
13 | 			<li>Apple
14 | 				<ul>
15 | 					<li>iPhone 11</li>
16 | 					<li>iPhone X</li>
17 | 				</ul>
18 | 			</li>
19 | 		</ol>
20 | 
21 | 		<ol type="A">
22 | 			<li>Item 1</li>
23 | 			<li>Item 2</li>
24 | 		</ol>	
25 | 	</body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/JS/Nov 2/sample1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Variables</title>
 9 | </head>
10 | 
11 | <body>
12 |     <h1>JavaScript Class</h1>
13 | 
14 |     <script>
15 |         alert("Hello world");
16 |         window.alert("Hello world");        
17 |     </script>
18 | </body>
19 | 
20 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/HTML/Sep 28/sample9.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 	<head>
 3 | 		<title>Sample9</title>
 4 | 	</head>
 5 | 	<body>
 6 | 		<table border="1" bgcolor="#efefef">
 7 | 			<tr bgcolor="#af efef">
 8 | 				<td></td>
 9 | 				<th>Sat</th>
10 | 				<th>Sun</th>			
11 | 			</tr>
12 | 			<tr>
13 | 				<th>2-6</th>
14 | 				<td bgcolor="#a1afef">CNC</td>
15 | 				<td>CNC</td>			
16 | 			</tr>
17 | 			<tr>
18 | 				<th>6-10</th>
19 | 				<td>AI</td>
20 | 				<td>AI</td>			
21 | 			</tr>
22 | 		</table>
23 | 		
24 | 	</body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/JS/Dec 7/sample6.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8" />
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 8 |   <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |   <script>
13 |     // function
14 |     function greetUser() {
15 |       alert("Hello there! Good morning!");
16 |     }
17 | 
18 |     //   invoke / call
19 |     greetUser();
20 |   </script>
21 | </body>
22 | 
23 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/JS/Nov 9/sample2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |     <script>
13 |         // var a = ((10 + 2) * 4) * 2;
14 |         // console.log(a)
15 |         // alert(a); 
16 | 
17 |         // var a = (((10 + 2) * 4) * 2) + 1;
18 |         // console.log(a)
19 |         // alert(a);
20 | 
21 |         var a = (2 + 2) + ((3 + 5) * 2);
22 |         console.log(a)
23 |         alert(a);
24 |     </script>
25 | </body>
26 | 
27 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/JS/Dec 7/sample2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8" />
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 8 |   <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |   <script>
13 |     var now = new Date();
14 |     var currentMonth = now.getMonth();
15 |     var months = [
16 |       "jan",
17 |       "feb",
18 |       "mar",
19 |       "apr",
20 |       "may",
21 |       "jun",
22 |       "jul",
23 |       "aug",
24 |       "sep",
25 |       "oct",
26 |       "nov",
27 |       "dec"
28 |     ];
29 |     
30 |     alert(months[currentMonth]);
31 |   </script>
32 | </body>
33 | 
34 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/HTML/Oct 5/sample6.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |     <form>
13 |         <input type="date" required />
14 |         <br />
15 |         <input type="url" required placeholder="Enter url" />
16 |         <br />
17 |         <input type="email" required placeholder="Enter email" />
18 |         <br />
19 |         <input type="search" required placeholder="Enter keyword" />
20 |         <br />
21 |         <input type="submit" />
22 |     </form>
23 | </body>
24 | 
25 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/JS/Nov 30/sample5.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |     <script>
13 |         // alert(Math.round(1.499));
14 |         // alert(Math.round(1.51));
15 |         // alert(Math.round(1.699));
16 |         // alert(Math.round(-1.6));
17 |         // alert(Math.round(-1.5));
18 | 
19 |         // alert(Math.ceil(1.01));
20 |         // alert(Math.floor(1.99));
21 | 
22 |         alert(Math.ceil(-1.01));
23 |         alert(Math.floor(-1.99));
24 | 
25 |     </script>
26 | </body>
27 | 
28 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/JS/Dec 7/sample4.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Document</title>
 8 |   </head>
 9 |   <body>
10 |     <script>
11 |       var bd = new Date("Aug 11,2000");
12 |       var curr = new Date();
13 |       var timeDiff = curr.getTime() - bd.getTime();
14 |       var days = timeDiff / (1000 * 60 * 60 * 24);
15 |       var year = (timeDiff / (1000 * 60 * 60 * 24 * 365)).toFixed(0);
16 |       var month = (((timeDiff / (1000 * 60 * 60 * 24) / 365) * 12) % 12).toFixed(0);
17 |       console.log(year, month);
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/HTML/Sep 28/sample10.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 	<head>
 3 | 		<title>Sample10</title>
 4 | 	</head>
 5 | 	<body>
 6 | 		<table>
 7 | 			<thead>
 8 | 				<tr>
 9 | 					<th>Date</th>
10 | 					<th>Income</th>
11 | 					<th>Expenditure</th>
12 | 				</tr>
13 | 			</thead>
14 | 			<tbody>
15 | 				<tr>
16 | 					<th>1st January</th>
17 | 					<td>250</td>
18 | 					<td>36</td>
19 | 				</tr>
20 | 				<tr>
21 | 					<th>2nd January</th>
22 | 					<td>285</td>
23 | 					<td>48</td>
24 | 				</tr>
25 | 				<tr>
26 | 					<th>31st January</th>
27 | 					<td>129</td>
28 | 					<td>64</td>
29 | 				</tr>
30 | 			</tbody>
31 | 			<tfoot>
32 | 				<tr>
33 | 					<td></td>
34 | 					<td>7824</td>
35 | 					<td>1241</td>
36 | 				</tr>
37 | 			</tfoot>
38 | 		</table>
39 | 	</body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/JS/Nov 9/sample3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |     <script>
13 |         // var name = "Osama";
14 |         // var greetings = "Good evening"
15 |         // var message = greetings + " " + name;
16 |         // alert(message)
17 | 
18 |         // var name = "Sir Mohsin";
19 |         // var greetings = "Good evening"
20 |         // var message = "Hi " + name + ", " + greetings + "!";
21 |         // alert(message)
22 | 
23 |         alert("2 plus 2 equals " + (2 + 2));
24 |     </script>
25 | </body>
26 | 
27 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/CSS/Oct 19/sample7.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Boxes</title>
 9 |     <style>
10 |         li {
11 |             /* display: inline; */
12 |             margin-right: 10px;
13 |         }
14 | 
15 |         li.coming-soon {
16 |             /* display: none; */
17 |             visibility: hidden;
18 |         }
19 |     </style>
20 | </head>
21 | 
22 | <body>
23 |     <ul>
24 |         <li>Home</li>
25 |         <li>Products</li>
26 |         <li class="coming-soon">Services</li>
27 |         <li>About</li>
28 |         <li>Contact</li>
29 |     </ul>
30 | </body>
31 | 
32 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/HTML/Oct 5/sample4.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |     <label>
13 |         Male <input type="radio" name="m" value="male" />
14 |     </label>
15 |     <label>
16 |         Female <input type="radio" name="m" value="female" />
17 |     </label>
18 | 
19 |     <br />
20 |     <label for="male">Male</label>
21 | 
22 |     <input type="radio" id="male" name="m1" value="male" />
23 | 
24 |     <label for="female">Female</label>
25 | 
26 |     <input type="radio" id="female" name="m1" value="female" />
27 | 
28 | </body>
29 | 
30 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/JS/Dec 21/sample8.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |     <script>
13 |         function a1() {
14 |             var num1 = 2;
15 |             function a2() {
16 |                 // alert(num1);
17 |                 function a3() {
18 |                     alert(num1)
19 |                 }
20 |                 a3();
21 |             }
22 |             a2();
23 |             // a3() //won't work
24 |         }
25 |         a1();
26 |         // alert(num1);
27 |         // a2(); // won't work
28 |     </script>
29 | </body>
30 | 
31 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/CSS/Oct 26/display.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 |     <style>
10 |         .my-p {
11 |             background: deepskyblue;
12 |         }
13 | 
14 |         .custom-span {
15 |             background: gray;
16 |             text-align: center;
17 |             display: inline-block;
18 |             width: 150px;
19 |         }
20 |     </style>
21 | </head>
22 | 
23 | <body>
24 |     <p class="my-p">
25 |         This is a sample paragraph
26 |         <span class="custom-span">Span Here...</span>
27 |         here for an example
28 |     </p>
29 | </body>
30 | 
31 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/JS/Dec 14/sample7.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |     <script>
13 |         // var i = 0
14 |         // do {
15 |         //     console.log('It runs inside do block')
16 |         //     i++
17 |         // } while(i < 3);
18 | 
19 | 
20 |         var i = 1;
21 |         var showMore = true;
22 |         do {
23 |             console.log("2 x " + i + " = " + i * 2);
24 |             i++;
25 |             showMore = prompt("Do you want to see more steps?");
26 |         } while (showMore === "true");
27 |     </script>
28 | </body>
29 | 
30 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/JS/Nov 9/sample5.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |     <script>
13 |         var num = 3;
14 |     //     var a = num++ + --num + num + num-- + ++num;
15 |     //    // 3 + 3 + 3 + 3 + 3;
16 |     //    alert(a);
17 |     //    alert(num);
18 |     // alert(num++);
19 |     // alert(num)
20 | 
21 |     //    var b = num++ + ++num;
22 |     //    alert(b);
23 |     //    alert(num);
24 | 
25 |     // alert(num++ + num++ + num++);
26 |     // alert(num++ + 2);
27 |     // alert(num++ + --num +  --num)
28 |     </script>
29 | </body>
30 | 
31 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/HTML/Oct 5/sample1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |     <table border="1" cellpadding="10" cellspacing="0" bgcolor="#efefef">
13 |         <tr bgcolor="red">
14 |             <th>1</th>
15 |             <td bgcolor="blue">2</td>
16 |             <td>3</td>
17 |         </tr>
18 |         <tr>
19 |             <td>4</td>
20 |             <td></td>
21 |             <td>6</td>
22 |         </tr>
23 |         <tr>
24 |             <td>7</td>
25 |             <td>8</td>
26 |             <td>9</td>
27 |         </tr>
28 |     </table>
29 | 
30 | </body>
31 | 
32 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/JS/Dec 7/sample3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8" />
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 8 |   <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |   <script>
13 |     var doomsday = new Date("June 30, 2035");
14 |     var now = new Date();
15 |     //   console.log(doomsday);
16 |     //   console.log(now);
17 |     var msDoomsday = doomsday.getTime();
18 |     var msNow = now.getTime();
19 |     var timeDiff = msDoomsday - msNow;
20 |     var dayDiff = timeDiff / (1000 * 60 * 60 * 24);
21 |     //   days diff
22 |     console.log(Math.floor(dayDiff));
23 |     //   year diff
24 |     console.log(dayDiff / 365);
25 |   </script>
26 | </body>
27 | 
28 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/JS/Nov 2/sample3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |     <script>
13 |         var weight = 150;
14 |         // alert(weight + 25); 
15 | 
16 |         var num1;
17 |         var num2;
18 |         num1 = "a";
19 |         num2 = 11;
20 |         var sum = num1 + num2;
21 |         alert(sum);
22 | 
23 |         var firstName = "Ali";
24 |         var lastName = "Khan";
25 | 
26 |         alert(firstName +" "+ lastName);
27 | 
28 |         num1 = "1";
29 |         num2 = "5";
30 |         alert(num1+num2);
31 |         
32 |     </script>
33 | </body>
34 | 
35 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/CSS/Oct 11/sample2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 |     <link rel="stylesheet" href="style1.css">
10 | </head>
11 | 
12 | <body>
13 |     <h1>Heading 1</h1>
14 |     <p>This is my paragraph. This is my paragraph.
15 |         This is my paragraph. This is my paragraph.
16 |         This is my paragraph. This is my paragraph.
17 |         This is my paragraph.
18 |     </p>
19 |     <p>This is my paragraph. This is my paragraph.
20 |         This is my paragraph. This is my paragraph.
21 |         This is my paragraph. This is my paragraph.
22 |         This is my paragraph.
23 |     </p>
24 | </body>
25 | 
26 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/HTML/Oct 5/sample7.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |     <h2>Heading 1</h2>
13 |     <h2>Heading 2</h2>
14 | 
15 |     <div>
16 |         <a href="https://www.google.com" /> Google </a>
17 |         <a href="https://www.youtube.com" /> Youtube </a>
18 |     </div>
19 | 
20 |     <p>
21 |         This is <span class="blue">some text</span> which I written randomly
22 |     </p>
23 | 
24 |     <iframe src="http://maps.google.co.uk/maps?q=moma+new+york
25 | 	 &amp;output=embed" width="450" height="350">
26 |     </iframe>
27 | 
28 |     <p>All Rightsa Reserved &#169;</p>
29 | </body>
30 | 
31 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/JS/Nov 16/sample1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |     <script>
13 |         var age = 16;
14 |         // if (age == 18) {
15 |         //     alert('You are eligible!!!');
16 |         //     alert('Congrats!!!');
17 |         // }
18 | 
19 |         if (age >= 18) {
20 |             alert('You are eligible!!!');
21 |             alert('Congrats!!!')
22 |         }
23 | 
24 |         if (age < 18) {
25 |             alert('You are not eligible!!!');
26 |             alert('Sorry!!!');
27 |         }
28 | 
29 |         alert('Alert outside if statement');
30 |     </script>
31 | </body>
32 | 
33 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/JS/Dec 7/sample1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8" />
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 8 |   <title>Document</title>
 9 | </head>
10 | 
11 | <body></body>
12 | <script>
13 |   // var currentDate = new Date();
14 |   // var stringCurrentDate = currentDate.toString();
15 |   // console.log(typeof stringCurrentDate);
16 | 
17 |   var now = new Date();
18 |     // console.log(now.getDay());
19 |     // console.log(now.getMonth());
20 |     // console.log(now.getDate());
21 |     // console.log(now.getHours());
22 |     // console.log(now.getMinutes());
23 |     // console.log(now.getSeconds());
24 |     // console.log(now.getMilliseconds());
25 |     // console.log(now.getTime());
26 | </script>
27 | 
28 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/JS/Dec 7/sample7.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8" />
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 8 |   <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |   <script>
13 |     function greetUser(name, message, abc) {
14 |       document.write(message + " " + name + "<br />");
15 |       document.write(
16 |         "Login time: " + new Date().toLocaleTimeString() + "<br /><br />"
17 |       );
18 |     }
19 |     //   greetUser("Osama");
20 |     //   greetUser("Sir Mohsin", "Hello, Good Morning");
21 | 
22 |     //   test function
23 |     function testFunction() {
24 |       console.log("Hello from test function");
25 |     }
26 |     testFunction(1, 2, 3, 4, 5);
27 |   </script>
28 | </body>
29 | 
30 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/HTML/Oct 5/sample5.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |     <fieldset>
13 |         <legend>Login</legend>
14 |         <form action="https://www.google.com">
15 |             <label>
16 |                 Enter Username:
17 |                 <input type="text" name="username" required />
18 |             </label>
19 |             <br />
20 |             <label>
21 |                 Enter Password:
22 |                 <input type="password" name="password" required />
23 |             </label>
24 |             <br />
25 |             <input type="submit" />
26 |         </form>
27 |     </fieldset>
28 | </body>
29 | 
30 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/CSS/Oct 19/sample3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Fonts</title>
 9 |     <style>
10 |         a:link {
11 |             color: green;
12 |         }
13 | 
14 |         a:visited {
15 |             color: orange;
16 |         }
17 | 
18 |         a:hover {
19 |             color: purple;
20 |         }
21 | 
22 |         a:active {
23 |             color: lightcoral;
24 |         }
25 | 
26 |         input[type="text"]:focus {
27 |             color: red;
28 |         }
29 |     </style>
30 | </head>
31 | 
32 | <body>
33 |     <a href="#d2">Visit website</a>
34 |     <br />
35 |     <a href="#d1">Visit website</a>
36 |     <br />
37 |     <input type="text" />
38 | </body>
39 | 
40 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/JS/Dec 14/sample6.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |     <title>Document</title>
 8 | </head>
 9 | <body>
10 |     <script>
11 |         // for (var i = 0; i <= 3; i++) {
12 |         //     alert(i);            
13 |         // }
14 | 
15 |         // var val = 1;
16 |         // while(val <= 5) {
17 |         //    document.write(val + "<br />");
18 |         //    val++;
19 |         // }
20 | 
21 |         // var val = 1
22 |         // while (val !== 0) {
23 |         //     val = +prompt('Enter value');
24 |         //     console.log('You are entering wrong number, please enter 0');
25 |         // }
26 |         // console.log('Console log after while loop');
27 | 
28 |         </script>
29 | </body>
30 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/JS/Nov 9/sample4.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |     <script>
13 |         // var name = prompt("Enter your name", "Osama")
14 |         // var name = prompt("Enter your name")
15 |         // alert(name)
16 |         // var greetings = "Good evening"
17 |         // var message = "Hi " + name + ", " + greetings + "!";
18 |         // alert(message);
19 | 
20 |         // var value = prompt('Enter value');
21 |         // alert(value + 2)
22 | 
23 |         var value = +prompt('Enter value');
24 |         alert(value + 2)
25 |         document.write('<br />')
26 |         document.write('2 x 1 = 2')
27 |     </script>
28 | </body>
29 | 
30 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/CSS/Oct 26/sample5.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 |     <style>
10 |         table {
11 |             /* margin: 50px auto; */
12 |         }
13 | 
14 |         td {
15 |             background-color: #0088dd;
16 |             padding: 15px;
17 |             border: 20px solid #000000;
18 |         }
19 |         table.two {
20 |             border-collapse: collapse;
21 |         }
22 |     </style>
23 | </head>
24 | 
25 | <body>
26 |     <table class="two">
27 |         <tr>
28 |             <td>1</td>
29 |             <td>2</td>
30 |         </tr>
31 |         <tr>
32 |             <td>3</td>
33 |             <td></td>
34 |         </tr>
35 |     </table>
36 | </body>
37 | 
38 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/JS/Dec 21/sample6.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |     <script>
13 |         // var num1 = 12;
14 |         // alert(typeof num1);
15 | 
16 |         // num1 = num1.toString();
17 |         // alert(num1);
18 |         // alert(typeof num1);
19 | 
20 |         // num1 = Number(num1);
21 |         // alert(typeof num1);
22 | 
23 |         // var num1 = 22/7;
24 |         // alert(num1.toFixed(2));
25 | 
26 |         // var now = new Date();
27 |         // alert(now.getDate())
28 |         // getDate() //won't work
29 | 
30 |         // var now = new Date("June, 14, 2015");
31 |         // alert(now);
32 | 
33 |     </script>
34 | </body>
35 | 
36 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/JS/Nov 30/sample7.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |     <script>
13 |         // var userage = prompt("Enter age");
14 |         // alert(userage + 5);
15 | 
16 |         // alert(parseInt(userage)+5)
17 |         // alert(parseFloat(userage))
18 | 
19 |         // alert(Number(userage)+5)
20 | 
21 |         var num1 = 1;
22 |         var num2 = 1;
23 |         var result = num1.toString() + num2.toString();
24 |         // alert(typeof num2);
25 |         // alert(typeof result);
26 |         // alert(result);
27 | 
28 |         var piVal = 22 / 7;
29 |         alert(piVal);
30 |         alert(piVal.toFixed(2))
31 | 
32 |     </script>
33 | </body>
34 | 
35 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/CSS/Oct 19/sample2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Fonts</title>
 9 |     <style>
10 |         h1 {
11 |             text-shadow: 6px 3px 10px green;
12 |         }
13 | 
14 |         p:first-letter {
15 |             font-size: 40px;
16 |         }
17 | 
18 |         p:first-line {
19 |             color: red;
20 |         }
21 |     </style>
22 | </head>
23 | 
24 | <body>
25 |     <h1>
26 |         Heading 1
27 |     </h1>
28 |     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, architecto corporis molestiae quia minus,
29 |         ducimus nam veritatis quas explicabo delectus impedit cupiditate ut porro asperiores et nihil aut quaerat
30 |         voluptas!
31 |     </p>
32 | </body>
33 | 
34 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/JS/Nov 2/sample4.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |     <script>
13 |         // var 1333 = "Hello world"; //illegal
14 |         // var #%^&* = "Hello world"; //illegal
15 |         var _message = "Hello World";
16 |         var $message = "Hello World";
17 |         var myMessage = "Hello CNC";
18 | 
19 |         var MESSAGE;
20 |         alert(MESSAGE);
21 | 
22 |         MESSAGE = "ABC";
23 |         alert(MESSAGE);
24 | 
25 |         var num1 = 1;
26 |         var Num1 = 2;
27 |         // var alert; // illegal
28 | 
29 |         var my_alert = "Hello";
30 | 
31 |         // var first name = "Ali khan";
32 |         var firstName = "Ali Khan";
33 |     </script>
34 | </body>
35 | 
36 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/CSS/Oct 11/sample1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 |     <style>
10 |         h1 {
11 |             color: red;
12 |         }
13 | 
14 |         p {
15 |             color: blue;
16 |         }
17 |     </style>
18 | </head>
19 | 
20 | <body>
21 |     <h1>Heading 1</h1>
22 |     <p>This is my paragraph. This is my paragraph.
23 |         This is my paragraph. This is my paragraph.
24 |         This is my paragraph. This is my paragraph.
25 |         This is my paragraph.
26 |     </p>
27 |     <p>This is my paragraph. This is my paragraph.
28 |         This is my paragraph. This is my paragraph.
29 |         This is my paragraph. This is my paragraph.
30 |         This is my paragraph.
31 |     </p>
32 | </body>
33 | 
34 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/JS/Dec 14/sample4.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |     <title>Document</title>
 8 | </head>
 9 | <body>
10 |     <script>
11 |         function findGrade(grade){
12 |             switch (grade) {
13 |                 case 'A+':
14 |                     alert('Its A+');
15 |                     break;
16 | 
17 |                 case "A":
18 |                     alert('Its A Grade');
19 |                     break;
20 |                 
21 |                 case "B":
22 |                     alert('Its B Grade');
23 |                     break;
24 |             
25 |                 default:
26 |                     alert('Try again!!')
27 |                     break;
28 |             }
29 |         }
30 | 
31 |         findGrade("B");
32 |     </script>
33 | </body>
34 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/JS/Nov 2/sample2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |     <h1>JavaScript</h1>
13 | 
14 |     <script>
15 |         // declaration
16 |         var message;
17 | 
18 |         // initialization
19 |         message = "Welcome to the website";
20 | 
21 |         // alert(message);
22 |         message = "Hello World";
23 |         // alert(message);
24 | 
25 |         // declare and initialize
26 |         var greetings = "Good morning";
27 |         // alert(greetings);
28 |         // var greetings = 'Good evening';
29 |         greetings = 'Good evening';
30 |         // alert(greetings);
31 | 
32 |         var aussieGreeting = 'g"Day';
33 |         alert(aussieGreeting);
34 |     </script>
35 | </body>
36 | 
37 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/JS/Nov 30/sample4.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |     <script>
13 |         var message = "You run an online music service where customers rate each song" +
14 |             " customer ratings and average them, awarding a song from zero to five stars"
15 | 
16 |         // for (var i = 0; i < message.length; i++) {
17 |         //     if (message.slice(i, i + 4) === "song") {
18 |         //         message = message.slice(0, i) + "movie" + message.slice(i + 4);
19 |         //     }
20 |         // }
21 | 
22 |         // message = message.replace("song","movie");
23 | 
24 |         message = message.replace(/song/g, "movie");
25 |         alert(message);
26 | 
27 | 
28 |     </script>
29 | </body>
30 | 
31 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/JS/Dec 21/sample3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |     <script>
13 |         // var fruits = ["Mango", "Apple", "Grapes", "Banana"];
14 |         // fruits.push("Banana");
15 |         // fruits.push("Banana", "Pineapple");
16 |         // alert(fruits);
17 |         // var temp = fruits.pop();
18 |         // alert(temp);
19 | 
20 |         // fruits.pop();
21 |         // alert(fruits);
22 | 
23 |         // fruits.unshift("Banana");
24 |         // fruits.unshift("Banana", "Pineapple");
25 |         // alert(fruits);
26 | 
27 |         // var temp = fruits.shift();
28 |         // alert(temp);
29 |         // alert(fruits);
30 | 
31 |         // fruits.shift();
32 |         // alert(fruits);
33 | 
34 |     </script>
35 | </body>
36 | 
37 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/CSS/Oct 26/sample4.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 |     <style>
10 |         table {
11 |             margin: 50px auto;
12 |         }
13 | 
14 |         td {
15 |             background-color: #0088dd;
16 |             padding: 15px;
17 |             border: 2px solid #000000;
18 |         }
19 | 
20 |         table.one {
21 |             border-spacing: 5px 15px;
22 |         }
23 | 
24 |         /* table.two {
25 |             border-collapse: collapse;
26 |         } */
27 |     </style>
28 | </head>
29 | 
30 | <body>
31 |     <table class="one">
32 |         <tr>
33 |             <td>1</td>
34 |             <td>2</td>
35 |         </tr>
36 |         <tr>
37 |             <td>3</td>
38 |             <td></td>
39 |         </tr>
40 |     </table>
41 | 
42 | </body>
43 | 
44 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/HTML/Sep 21/sample3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 	<head>
 4 | 		<title>Lists</title>
 5 | 	</head>
 6 | 	<body>
 7 | 		<h1>Ordered List</h1>
 8 | 		<ol>
 9 | 			<li>Item a</li>
10 | 			<li>Item 2</li>
11 | 			<li>Item 3</li>
12 | 			<li>Item 4</li>
13 | 		</ol>
14 | 
15 | 		<h1>Unordered List</h1>
16 | 		<ul>
17 | 			<li>Item a</li>
18 | 			<li>Item 2</li>
19 | 			<li>Item 3</li>
20 | 			<li>Item 4</li>
21 | 		</ul>
22 | 
23 | 		<h1>Definition List</h1>
24 | 
25 | 		<dl>
26 | 			 <dt>Sashimi</dt>
27 | 			 <dd>Sliced raw fish that is served with condiments such as shredded 					daikon radish or ginger root, wasabi and soy sauce
28 | 			</dd>
29 | 
30 | 			 <dt>Scale</dt>
31 | 			 <dd>A device used to accurately measure the weight of ingredients
32 | 			</dd>
33 | 			 <dd>A technique by which the scales are removed from the skin of a fish
34 | 			</dd>
35 | 
36 | 			 <dt>Scamorze</dt>
37 | 			 <dt>Scamorzo</dt>
38 | 			 <dd>An Italian cheese usually made from whole cow's milk
39 | 			 </dd>
40 | 		</dl>
41 | 	</body>
42 | </html
43 | 


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/JS/Nov 30/sample1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |     <title>Document</title>
 8 | </head>
 9 | <body>
10 |     <script>
11 |         var userCity = prompt("Enter your city");
12 |         var cities = ["Karachi", "Islamabad", "Faisalbad", "Lahore"];
13 |         var cityExist = false;
14 | 
15 |         for(var i=0;i<4;i++){
16 |             if(cities[i].toLocaleLowerCase() === userCity.toLocaleLowerCase()){
17 |                 alert("PIAIC is working in your city");
18 |                 cityExist = true;
19 |                 break;
20 |             }
21 |             // else{
22 |             //     alert("Comming soon!");
23 |             // }
24 |         }
25 |         
26 |         // if(cityExist === false)
27 |         if(!cityExist){
28 |                 alert("Comming soon!");
29 |         }
30 |     </script>
31 | </body>
32 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/CSS/Jan 4/sample3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 |     <style>
10 |         body {
11 |             margin: 0;
12 |         }
13 | 
14 |         div {
15 |             background-color: chartreuse;
16 |             height: 100px;
17 |             min-width: 500px;
18 |             max-width: 800px;
19 |             border: 1px solid black;
20 |             padding: 20px;
21 |             margin: 10px;
22 |         }
23 |     </style>
24 | </head>
25 | 
26 | <body>
27 |     <div>
28 |         Increasing the default amount of
29 |         leading can make text easier to
30 |         read. The vertical space between
31 |         lines should be larger than the
32 |         space between each word as this
33 |         helps the eye move along the line
34 |         instead of down them.
35 |     </div>
36 | </body>
37 | 
38 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/JS/Nov 16/sample6.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |     <title>Document</title>
 8 | </head>
 9 | <body>
10 |     <script>
11 |         var animals = ['cat', 'dog'];
12 |         // alert(animals);
13 | 
14 |         // push
15 |         animals.push('monkey');
16 |         // alert(animals);
17 | 
18 |         animals.push('rabbit', 'goat');
19 |         // alert(animals);
20 | 
21 |         // pop
22 |         var lastAnimal = animals.pop();
23 |         alert(lastAnimal);
24 |         alert(animals);
25 | 
26 |         // unshift
27 |         animals.unshift('lizard');
28 |         alert(animals);
29 | 
30 |         animals.unshift('leopard', 'lion');
31 |         alert(animals);
32 | 
33 |         // shift
34 |         var removedElementFromBeginning = animals.shift();
35 |         alert(removedElementFromBeginning)
36 |         alert(animals);
37 | 
38 |     </script>
39 | </body>
40 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/JS/Dec 21/sample4.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |     <script>
13 |         // var fruits = ["Mango", "Apple", "Grapes", "Banana", "Pineapple"];
14 |         // var fruits2 = fruits.slice(0);
15 |         // alert(fruits2);
16 | 
17 |         // var fruits2 = fruits.slice(1,5);
18 |         // fruits2.push("abc")
19 |         // alert(fruits2.length);
20 | 
21 |         // // var fruits2 = fruits.slice(1,4);
22 |         // alert(fruits2);
23 |         // alert(fruits)
24 | 
25 |         var fruits = ["Mango", "Apple", "Grapes", "Banana", "Pineapple"];
26 |         // fruits.splice(2,2);
27 |         // alert(fruits);
28 | 
29 |         // fruits.splice(3,0,"Guava", "ABC");
30 |         // alert(fruits)
31 | 
32 |         fruits.splice(2, 2, "Guava", "ABC");
33 |         alert(fruits);
34 | 
35 |     </script>
36 | </body>
37 | 
38 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/CSS/Oct 26/sample1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 |     <style>
10 |         .my-ul {
11 |             /* list-style-type:lower-roman; */
12 |             /* list-style-position:outside; */
13 |             list-style: inside lower-alpha;
14 |             list-style-image: url('./bullet.gif');
15 |         }
16 | 
17 |         .my-ul>li {
18 |             background-color: red;
19 |         }
20 |     </style>
21 | </head>
22 | 
23 | <body>
24 |     <ul class="my-ul">
25 |         <li>This Is Some Text Here We Are Using For Example</li>
26 |         <li>This Is Some Text Here We Are Using For Example</li>
27 |         <li>This Is Some Text Here We Are Using For Example</li>
28 |         <li>This Is Some Text Here We Are Using For Example</li>
29 |         <li>This Is Some Text Here We Are Using For Example</li>
30 |     </ul>
31 | 
32 |     
33 | 
34 | </body>
35 | 
36 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/JS/Nov 16/sample3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |     <script>
13 |         // var percentage = 79;
14 |         // if (percentage >= 80) {
15 |         //     alert('A+ Grade')
16 |         // } else if (percentage >= 70) {
17 |         //     alert('A Grade')
18 |         // } else if (percentage >= 60) {
19 |         //     alert('B Grade')
20 |         // } else {
21 |         //     alert('You are failed!')
22 |         // }
23 | 
24 |         var course = "AIC";
25 |         if (course === "CNC") {
26 |             alert('Class time: 2 to 4 PM');
27 |         } else if (course === "BCC") {
28 |             alert('Class time: 4 to 6 PM');
29 |         } else if (course === "AIC") {
30 |             alert('AI Class time: 6 to 8 PM');
31 |         } else {
32 |             alert('There is no class for this course')
33 |         }
34 |     </script>
35 | </body>
36 | 
37 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/CSS/Oct 26/sample3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 |     <style>
10 |         table {
11 |             margin: 50px auto;
12 |         }
13 | 
14 |         td {
15 |             border: 1px solid #0088dd;
16 |             padding: 15px;
17 |         }
18 | 
19 |         table.one {
20 |             empty-cells: show;
21 |         }
22 | 
23 |         table.two {
24 |             empty-cells: hide;
25 |         }
26 |     </style>
27 | </head>
28 | 
29 | <body>
30 |     <table class="one">
31 |         <tr>
32 |             <td>1</td>
33 |             <td>2</td>
34 |         </tr>
35 |         <tr>
36 |             <td>3</td>
37 |             <td></td>
38 |         </tr>
39 |     </table>
40 |     <table class="two">
41 |         <tr>
42 |             <td>1</td>
43 |             <td>2</td>
44 |         </tr>
45 |         <tr>
46 |             <td>3</td>
47 |             <td></td>
48 |         </tr>
49 |     </table>
50 | </body>
51 | 
52 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/JS/Dec 14/sample2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8" />
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 8 |   <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |   <script>
13 |     //   var a = "Outer variable";
14 | 
15 |     //   function piaic() {
16 |     //     var b = "local variable";
17 |     //   alert(a);
18 |     // alert(b);
19 |     //   }
20 |     //   alert(a);
21 |     //   alert(b);
22 |     //   piaic();
23 | 
24 |     // undefined
25 |     // var c;
26 |     // alert(c);
27 | 
28 |     // reference error
29 |     //   alert(d);
30 | 
31 |     // global scope variable
32 |     /*
33 |   var a = 10;
34 |   function myFunc() {
35 |       // local scope variable
36 |       a = 20;
37 |       alert(a);
38 |   }
39 |   myFunc();
40 |   alert(a);
41 | */
42 |     // global scope variable
43 |     var a = 10;
44 |     function myFunc() {
45 |       // local scope variable
46 |       var a = 20;
47 |       alert(a);
48 |     }
49 |     myFunc();
50 |     alert(a);
51 |   </script>
52 | </body>
53 | 
54 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/JS/Nov 30/sample6.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |     <script>
13 |         // var num1 = Math.random();
14 |         // alert(num1);
15 | 
16 |         // var bigDecimal = Math.random();
17 |         // document.write("Big Decimal: "+ bigDecimal + "<br/>");
18 | 
19 |         // var improvedNum = (bigDecimal * 6) +1;
20 |         // document.write("Improved Num:"+improvedNum + "<br/>");
21 | 
22 |         // var numberOfStars = Math.floor(improvedNum);
23 |         // document.write("Result: "+ numberOfStars + "<br/>");
24 | 
25 |         var bigDecimal = Math.random();
26 |         document.write("Big Decimal: " + bigDecimal + "<br/>");
27 | 
28 |         var improvedNum = (bigDecimal * 100) + 1;
29 |         document.write("Improved Num:" + improvedNum + "<br/>");
30 | 
31 |         var numberOfStars = Math.floor(improvedNum);
32 |         document.write("Result: " + numberOfStars + "<br/>");
33 |     </script>
34 | </body>
35 | 
36 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/JS/Dec 14/sample5.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Document</title>
 8 |   </head>
 9 |   <body>
10 |     <script>
11 |         function findGrade(percentage) {
12 | 
13 |             switch (true) {
14 |                 case (percentage >=80 && percentage <=100):
15 |                     alert("You got A+");
16 |                     break;
17 | 
18 |                 case (percentage >=70 && percentage <=79):
19 |                     alert("You got A Grade");
20 |                     break;
21 | 
22 |                 case (percentage >=60 && percentage <=69):
23 |                     alert("You got B");
24 |                     break;
25 | 
26 |                 case (percentage >=50 && percentage <=59):
27 |                     alert("You got C grade");
28 |                     break;
29 |                 default:
30 |                     alert("Try again!");
31 |                     break;
32 |             }
33 |         }
34 | 
35 |         findGrade(171);
36 |     </script>
37 |   </body>
38 | </html>
39 | 


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/CSS/Jan 4/sample4.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 |     <style>
10 |         div {
11 |             width: 150px;
12 |             height: 150px;
13 |             background-color: cadetblue;
14 |             border: 1px dotted black;
15 |             /* display: inline; */
16 |             display: inline-block;
17 |             /* display: none; */
18 |             border-radius: 50%;
19 |             /* border-radius: 25px; */
20 |         }
21 | 
22 |         li {
23 |             display: inline;
24 |             margin-right: 10px;
25 |         }
26 | 
27 |         li.coming-soon {
28 |             visibility: hidden;
29 |             /* display: none; */
30 |         }
31 |     </style>
32 | </head>
33 | 
34 | <body>
35 |     <div>1</div>
36 |     <div>2</div>
37 |     <div>3</div>
38 | 
39 |     <ul>
40 |         <li>Home</li>
41 |         <li>Products</li>
42 |         <li class="coming-soon">Services</li>
43 |         <li>About</li>
44 |         <li>Contact</li>
45 |     </ul>
46 | </body>
47 | 
48 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/JS/Dec 14/sample3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |     <script>
13 |         var dayOfwk = "Sun";
14 | 
15 |         // switch(dayOfwk) {
16 |         //     case "Sat":
17 |         //         alert("Yahoo!, It's weekend!");
18 |         //         break;
19 | 
20 |         //     case "Sun":
21 |         //         alert("Yahoo!, It's weekend!");
22 |         //         break;
23 | 
24 |         //     case "Thu":
25 |         //         alert("Shoot me now!");
26 |         //         break;
27 |         //     default:
28 |         //         alert('Its sunday');
29 |         // }
30 | 
31 |         switch (dayOfwk) {
32 |             case "Sat":
33 |             case "Sun":
34 |                 alert("Yahoo!, It's weekend!");
35 |                 break;
36 | 
37 |             case "Fri":
38 |                 alert("Today is half day");
39 |                 break;
40 |             default:
41 |                 alert('Its weekday');
42 |         }
43 |     </script>
44 | </body>
45 | 
46 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/HTML/Sep 21/sample2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 	<head>
 4 | 		<title>Text</title>
 5 | 	</head>
 6 | 	<body>
 7 | 		<p>This is <b>bold</b> text</p>
 8 | 		<p>This is <i> italic </i>text</p>
 9 | 		<p>E=MC<sup>2</sup></p>
10 | 		<p>H<sub>2</sub>O</p>
11 | 		<p>This is <strong>strong</strong> word</p>
12 | 		<p>This is <em>EM</em> word</p>
13 | 
14 | 		<blockquote cite="http://en.wikipedia.org/wiki/Winnie-the-Pooh">
15 | 			<p>Did you ever stop to think, and forget to start again?</p>
16 | 		</blockquote>
17 | 
18 | 		<p><abbr title="Professor">Prof</abbr> Stephen
19 | 			 Hawking is a theoretical physicist and cosmologist.
20 | 		</p>
21 | 		<p>
22 | 			<acronym title="National Aeronautics and Space Administration">
23 | 				NASA
24 | 			</acronym> 
25 | 			do some crazy space stuff.
26 | 		</p>
27 | 
28 | 		<p>A <dfn>black hole</dfn> is a region of space from
29 | 	 		which nothing, not even light, can escape.
30 | 		</p>
31 | 
32 | 		<br />
33 | 		<hr />
34 | 		<br />
35 | 		<address>
36 | 			 <p><a href="mailto:homer@example.org">
37 | 				 homer@example.org</a></p>
38 | 			 <p>742 Evergreen Terrace, Springfield.</p>
39 | 		</address>
40 | 		
41 | 		<p>Older price <del>Rs.100</del> New Price <ins>Rs.75</ins></p>
42 | 		<p>Price <s>Rs.100</s></p>
43 | 	</body>
44 | 
45 | </html
46 | 


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/JS/Nov 30/sample3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |     <script>
13 |         var message = "I am a human and I -like Mango";
14 |         // alert(message.indexOf("like"));   
15 | 
16 |         // alert(message.charAt(20));
17 | 
18 |         // alert(message.slice(20));
19 | 
20 |         message = "The code above finds a single character at index-0 (the beginning) of the string" +
21 |             "represented by the variable firstName and assigns it to the variable firstChar ." +
22 |             "The following code finds the last character in the string"
23 | 
24 |         // var resultIndex = message.indexOf("PIAIC");
25 |         var resultIndex = message.indexOf("firstName");
26 |         // alert(resultIndex);
27 | 
28 |         // If exist
29 |         if(resultIndex > -1){
30 |             // alert(message.slice(resultIndex));
31 |             // alert(message.slice(resultIndex, resultIndex + 30));
32 | 
33 |         }
34 | 
35 |         alert(message.charCodeAt("a"));
36 | 
37 |     </script>
38 | </body>
39 | 
40 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/CSS/Jan 4/sample5.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 |     <style>
10 |         ol {
11 |             list-style-type: upper-roman;
12 |         }
13 | 
14 |         .list1 {
15 |             list-style-position: inside;
16 |         }
17 | 
18 |         .list2 {
19 |             list-style-position: outside;
20 |         }
21 |     </style>
22 | </head>
23 | 
24 | <body>
25 |     <ol>
26 |         <li>Life</li>
27 |         <li>Nature</li>
28 |         <li>Love</li>
29 |         <li>Time and Eternity</li>
30 |         <li>The Single Hound</li>
31 |     </ol>
32 | 
33 |     <ul class="list1">
34 |         <li>This is long list and it have unused content</li>
35 |         <li>This is long list and it have unused content</li>
36 |         <li>This is long list and it have unused content</li>
37 |     </ul>
38 |     <ul class="list2">
39 |         <li>This is long list and it have unused content</li>
40 |         <li>This is long list and it have unused content</li>
41 |         <li>This is long list and it have unused content</li>
42 |     </ul>
43 | </body>
44 | 
45 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/JS/Dec 21/sample7.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |     <script>
13 |         // function getUsername(){
14 |         //     var username = prompt("Enter username");
15 |         //     alert(username);
16 |         // }    
17 |         // getUsername();
18 | 
19 |         // ------------------------------------
20 | 
21 |         // function getUsername(){
22 |         //     var username = prompt("Enter username");
23 |         //     return username;
24 |         // }    
25 |         // // getUsername();
26 |         // var username = getUsername();
27 |         // alert(username);
28 | 
29 |         // -----------------------------------
30 | 
31 | 
32 |         function getUsername() {
33 |             var username = prompt("Enter username");
34 |             return username;
35 |         }
36 | 
37 |         function greetUser(name) {
38 |             alert("Hello! Good Morning " + name)
39 |         }
40 | 
41 |         var username = getUsername();
42 |         greetUser(username)
43 |     </script>
44 | </body>
45 | 
46 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/HTML/Oct 5/sample2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |     <h1>Spanning Rows</h1>
13 |     <table border="2">
14 |         <tr>
15 |             <td></td>
16 |             <td>Sat</td>
17 |             <td>Sun</td>
18 |         </tr>
19 |         <tr>
20 |             <td>2-6</td>
21 |             <td rowspan="2">CNC</td>
22 |             <td rowspan="2">AI</td>
23 |         </tr>
24 |         <tr>
25 |             <td>6-10</td>
26 |         </tr>
27 |     </table>
28 | 
29 |     <h1>Spanning Columns</h1>
30 | 
31 |     <table border="2">
32 |         <tr>
33 |             <td></td>
34 |             <td>9-1</td>
35 |             <td>1-4</td>
36 |             <td>4-6</td>
37 |             <td>6-10</td>
38 |         </tr>
39 |         <tr>
40 |             <td>Sat</td>
41 |             <td colspan="3">CNC</td>
42 |             <td>AI</td>
43 |         </tr>
44 |         <tr>
45 |             <td>Sun</td>
46 |             <td colspan="2">CNC</td>
47 |             <td colspan="2">AI</td>
48 |         </tr>
49 |     </table>
50 | </body>
51 | 
52 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/JS/Dec 21/sample2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |     <script>
13 |         // if(true){
14 |         // if(0){
15 |         // if(undefined){
16 |         // if(null){
17 |         // if(""){
18 |         // if(!true){
19 | 
20 |         // if(2 > 5){
21 |         //     alert("This is true");
22 |         // }
23 |         // else {
24 |         //     if(5 > 2){
25 |         //         alert("This is also true");
26 |         //     }
27 |         //     else {
28 |         //         alert("this is false");
29 |         //     }
30 |         // } 
31 | 
32 |         var num1 = 2;
33 |         if (num1 === 1) {
34 |             alert("This is 1")
35 |         }
36 |         else if (num1 === "2") {
37 |             alert("This is 2")
38 |         }
39 |         else if (num1 === 3) {
40 |             alert("This is 3")
41 |         }
42 |         else if (num1 === 4) {
43 |             alert("This is 4")
44 |         }
45 | 
46 |         //Optional
47 |         else {
48 |             alert("Sorry!")
49 |         }
50 | 
51 |     </script>
52 | </body>
53 | 
54 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/CSS/Oct 26/boxes.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8" />
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 8 |   <title>Document</title>
 9 |   <style>
10 |     .border {
11 |       border: 10px solid transparent;
12 |       border-image: url("border.png") 30 30 30 30 stretch;
13 |       padding: 20px;
14 |     }
15 | 
16 |     div.box {
17 |       height: 150px;
18 |       width: 300px;
19 |       box-shadow: 5px 5px 5px #777777;
20 |     }
21 | 
22 |     div.radius {
23 |       height: 150px;
24 |       width: 300px;
25 |       border: 1px solid black;
26 |       /* border-radius:10px; */
27 |       border-radius: 0px 20px 50px 5px;
28 |       padding: 10px;
29 |     }
30 | 
31 |     .dp {
32 |       height: 50px;
33 |       width: 50px;
34 |       border: 1px solid black;
35 |       border-radius: 50%;
36 |     }
37 |   </style>
38 | </head>
39 | 
40 | <body>
41 |   <p class="border">
42 |     Hello, this is some dummy text which is inside border box!
43 |   </p>
44 | 
45 | 
46 |   <div class="box">
47 |     This is a box
48 |   </div>
49 | 
50 |   <br />
51 |   <br />
52 | 
53 |   <div class="radius">
54 |     This is a box
55 |   </div>
56 | 
57 |   <div class="dp">
58 | 
59 |   </div>
60 | </body>
61 | 
62 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/CSS/Oct 11/sample5.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 |     <style>
10 |         * {
11 |             font-family: Arial, Verdana, sans-serif;
12 |         }
13 | 
14 |         h1 {
15 |             font-family: "Courier New", monospace;
16 |         }
17 | 
18 |         i {
19 |             color: red;
20 |         }
21 | 
22 |         i {
23 |             color: green;
24 |         }
25 | 
26 |         p b {
27 |             color: green;
28 |         }
29 | 
30 |         b {
31 |             color: pink !important;
32 |         }
33 | 
34 |         p b {
35 |             color: blue;
36 |         }
37 | 
38 | 
39 |         p.intro {
40 |             font-size: 22px;
41 |         }
42 | 
43 |         p {
44 |             font-size: 14px;
45 |         }
46 | 
47 |         p {
48 |             color: red;
49 |         }
50 |     </style>
51 | </head>
52 | 
53 | <body>
54 |     <h1 class="intro">Potatoes</h1>
55 |     <p class="intro">There are <i>dozens</i> of different
56 |         <b>potato</b> varieties.</p>
57 |     <p>They are usually <strong>described</strong> as early, second early
58 |         and maincrop potatoes.</p>
59 | </body>
60 | 
61 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/JS/Nov 16/sample5.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |     <script>
13 |         // variables
14 |         var student1 = "ahmed";
15 |         var student2 = "umair";
16 |         var student3 = "asad";
17 |         var student4 = "akmal";
18 |         var student5 = "amaan";        
19 |         console.log(student1, student2, student3)
20 | 
21 |         // array indexes   0        1       2        3        4
22 |         var students = ["ahmed", "umair", "asad", "akmal", "amaan"];
23 | 
24 |         // alert(students[2])
25 |         // alert(students[0] + " " + students[1]);
26 | 
27 |         // array indexes 0 to 4
28 |         // array length 5
29 |         // alert('Array length is: ' + students.length);
30 | 
31 | 
32 |         var animals = ['cat', 'dog', 'elephant', 'cow', 'monkey'];
33 |         // alert(animals);
34 |         // animals[5] = "rabbit";
35 |         // alert(animals);
36 | 
37 |         // replace index value
38 |         // animals[2] = "goat";
39 |         // alert(animals);
40 | 
41 |         // animals[10] = "other animal";
42 |         // alert(animals);
43 |         // alert('Animals length: ' + animals.length);
44 | 
45 |         // undefined
46 |         alert(animals[11]);
47 | 
48 |     </script>
49 | </body>
50 | 
51 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/JS/Dec 21/sample5.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |     <script>
13 |         for (var i = 0; i < 5; i++) {
14 |             console.log("Value of i is:", i);
15 |             for (var j = 0; j < 2; j++) {
16 |                 console.log("Value of j is:", j);
17 |             }
18 |         }
19 |         // alert(i);
20 | 
21 |         // var userName = "Ali";
22 |         // alert(userName.toLowerCase());
23 |         // alert(userName.toUpperCase());
24 | 
25 |         var message = "This is some text and I need some pencils.";
26 |         // alert(message.indexOf("some")); //8
27 |         // alert(message.slice(8,12));
28 | 
29 |         // alert(message.lastIndexOf("some")); //29
30 | 
31 |         // var temp = message.lastIndexOf("mango"); // -1
32 | 
33 |         // if(temp !== -1){
34 |         //     alert("It exists! "+ temp)
35 |         // }
36 |         // else {
37 |         //     alert("Mango is not available in the message: "+ temp)
38 |         // }
39 | 
40 |         // alert(message.charAt(29));
41 | 
42 |         // alert(message.replace("some", "important"));
43 |         // alert(message.replace(/some/g, "important"));
44 |         message = message.replace(/some/g, "important");
45 |         alert(message);
46 | 
47 |     </script>
48 | </body>
49 | 
50 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/CSS/Oct 11/sample6.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 |     <style>
10 |         body {
11 |             background-color: red;
12 |         }
13 | 
14 |         p {
15 |             /* background-color: yellow; */
16 |             /* background-color: #efefef; */
17 |             /* background-color: rgb(255, 255, 255); */
18 |             /* background-color: rgba(100, 100, 100, 0.5); */
19 |             background-color: hsla(0, 100%, 100%, 0.5);
20 |             color: black;
21 |             /* opacity: 0; */
22 |         }
23 |     </style>
24 | </head>
25 | 
26 | <body>
27 |     <p>
28 |         This is my paragraph. This is my paragraph.
29 |         This is my paragraph. This is my paragraph.
30 |         This is my paragraph. This is my paragraph.
31 |         This is my paragraph. This is my paragraph.
32 |         This is my paragraph. This is my paragraph.
33 |         This is my paragraph. This is my paragraph.
34 |         This is my paragraph. This is my paragraph.
35 |         This is my paragraph. This is my paragraph.
36 |         This is my paragraph. This is my paragraph.
37 |         This is my paragraph. This is my paragraph.
38 |         This is my paragraph. This is my paragraph.
39 |         This is my paragraph. This is my paragraph.
40 |         This is my paragraph. This is my paragraph.
41 |     </p>
42 | </body>
43 | 
44 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/CSS/Oct 19/sample1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Fonts</title>
 9 |     <style>
10 |         @font-face {
11 |             font-family: AtomicRobusta;
12 |             src: url('AtomicRobusta.otf');
13 |         }
14 | 
15 |         h1{
16 |             font-family: AtomicRobusta;
17 |             font-size: 4em;
18 |         }
19 | 
20 |         .container {
21 |             font-family: AtomicRobusta;
22 |         }
23 | 
24 |         p {
25 |             font-weight: bold;
26 |             /* font-style: oblique; */
27 |             /* text-transform: capitalize; */
28 |             text-decoration: blink;
29 |             line-height: 1.5em;
30 |             /* letter-spacing: 5px; */
31 |             /* word-spacing: 5px; */
32 |             /* text-align: center; */
33 |             text-indent: 30px;
34 |         }
35 | 
36 |         /* p {
37 |             text-align: center;
38 |         } */
39 | 
40 |         img {
41 |             vertical-align: text-bottom;
42 |         }
43 |     </style>
44 | </head>
45 | 
46 | <body>
47 |     <h1>Heading 1</h1>
48 |     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi temporibus quasi esse aperiam, eveniet
49 |         eligendi molestias iste ullam, quo harum quos non ab? Excepturi aliquam quae modi doloremque ab earum.</p>
50 |     <p>Author name</p>
51 |     <p>
52 | 
53 |         <img src="panacloud.png" alt="" width="200" />
54 |         This is some text
55 |     </p>
56 | 
57 | 
58 | </body>
59 | 
60 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/JS/Dec 14/sample1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8" />
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 8 |   <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |   <script>
13 |     //   function greetUser(message) {
14 |     //     alert(message);
15 |     //   }
16 | 
17 | 
18 |     //   var greetings = greetUser('Hi there! Have a very good day to you!'); 
19 |     //   alert(greetings);
20 |     // var num3 = 20;
21 |     function addition(num1, num2) {
22 |       sum = num1 + num2;
23 |       return sum;
24 |     }
25 |     //   var num1 = +prompt('Enter first number');
26 |     //   var num2 = +prompt('Enter second number');
27 |     //   var total = addition(num1, num2);
28 |     //   var total2 = addition(2, addition(2, 4));
29 |     //   var total3 = addition(addition(2, 9), addition(2, 4));
30 |     //   alert(total3);
31 | 
32 |     // function addition1(num1, num2) {
33 |     //     return num1 + num2;
34 |     //   }
35 |     //   var total4 = addition(2, 8);
36 |     //   alert(total4);
37 | 
38 |     // function returnMoreThanOneValue(para1, para2, para3) {
39 |     //     // return para1 + para2, para3 - para1, 22;
40 |     //     return [para1, para2, para3];
41 |     // }
42 | 
43 |     // var values = returnMoreThanOneValue(1, 2, 3);
44 |     // console.log(values);
45 | 
46 |     // function returnValues(para1, para2) {
47 |     //     return [para1, para2];
48 |     //     alert('This is a function returns an array');
49 |     // }
50 | 
51 |     // var values = returnValues(1, 3);
52 |     // alert(values);
53 |   </script>
54 | </body>
55 | 
56 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/JS/Nov 9/sample1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |     <script>
13 |         // var a = 2;
14 |         // var b = 4;
15 |         // var c = a + b;
16 |         // alert(c);
17 | 
18 |         // var a = 2;
19 |         // var b = 4;
20 |         // var c = a + b + 9;
21 |         // alert(c);
22 | 
23 |         // var a = 2;
24 |         // var b = 4;
25 |         // var c = a + b + a + b + 1 + 2;
26 |         // alert(c);
27 | 
28 |         // var a = 2;
29 |         // var b = 4;
30 |         // var c = a - b + 2;
31 |         // alert(c);
32 | 
33 |         // var a = "2";
34 |         // var b = "4";
35 |         // var c = a + b + 2 + 4;
36 |         // alert(c);
37 | 
38 |         // var a = "2";
39 |         // var b = "4";
40 |         // var c = 10 + 2 + a + 2 + 2;
41 |         // 102242
42 |         // 12242
43 |         // alert(c);
44 | 
45 |         // var a = "2";
46 |         // var b = "4";
47 |         // var c = b - a;
48 |         // alert(c);
49 | 
50 |         // var a = "5";
51 |         // var b = "a";
52 |         // var c = a - b;
53 |         // alert(c);
54 | 
55 |         // var a = "2";
56 |         // var b = "4";
57 |         // var c = a / b;
58 |         // alert(c);
59 | 
60 |         // var a = "2";
61 |         // var b = 4;
62 |         // var c = a * b;
63 |         // alert(c);
64 | 
65 |         var a = 5;
66 |         var b = 2;
67 |         var c = a % b;
68 |         alert(c);
69 |     </script>
70 | </body>
71 | 
72 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/CSS/Oct 11/sample3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 | 
10 |     <style>
11 |         /* universal selector */
12 |         * {
13 |             font-family: 'Courier New';
14 |         }
15 | 
16 |         /* type selector */
17 |         h1 {
18 |             color: red;
19 |         }
20 | 
21 |         /* class selector */
22 |         .color-green {
23 |             color: green;
24 |         }
25 | 
26 |         /* id selector */
27 |         #sub {
28 |             color: yellowgreen;
29 |         }
30 |     </style>
31 | </head>
32 | 
33 | <body>
34 |     <h1>Heading 1</h1>
35 |     <h2 id="sub">Heading 2</h2>
36 |     <h2>Heading 2</h2>
37 |     <p>This is my paragraph. This is my paragraph.
38 |         This is my paragraph. This is my paragraph.
39 |         This is my paragraph. This is my paragraph.
40 |         This is my paragraph.
41 |     </p>
42 |     <p class="color-green">This is my paragraph. This is my paragraph.
43 |         This is my paragraph. This is my paragraph.
44 |         This is my paragraph. This is my paragraph.
45 |         This is my paragraph.</p>
46 |     <p>This is my paragraph. This is my paragraph.
47 |         This is my paragraph. This is my paragraph.
48 |         This is my paragraph. This is my paragraph.
49 |         This is my paragraph.
50 |     </p>
51 |     <p class="color-green">This is my paragraph. This is my paragraph.
52 |         This is my paragraph. This is my paragraph.
53 |         This is my paragraph. This is my paragraph.
54 |         This is my paragraph. </p>
55 | </body>
56 | 
57 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/CSS/Oct 26/sample6.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 |     <style>
10 |         input {
11 |             font-size: 120%;
12 |             color: #5a5854;
13 |             background-color: #f2f2f2;
14 |             border: 1px solid #bdbdbd;
15 |             border-radius: 5px;
16 |             padding: 5px 5px 5px 30px;
17 |             background-repeat: no-repeat;
18 |             background-position: 8px 9px;
19 |             display: block;
20 |             margin-bottom: 10px;
21 |         }
22 | 
23 |         input:focus {
24 |             background-color: #ffffff;
25 |             border: 1px solid #b1e1e4;
26 |         }
27 | 
28 |         input#email {
29 |             background-image: url("images/email.png");
30 |         }
31 | 
32 |         input#twitter {
33 |             background-image: url("images/twitter.png");
34 |         }
35 | 
36 |         input#web {
37 |             background-image: url("images/web.png");
38 |         }
39 |     </style>
40 |     <style>
41 |         input#submit {
42 |             color: #444444;
43 |             text-shadow: 0px 1px 1px #ffffff;
44 |             border-bottom: 2px solid #b2b2b2;
45 |             background-color: #b9e4e3;
46 |         }
47 | 
48 |         input#submit:hover {
49 |             color: #333333;
50 |             border: 1px solid #a4a4a4;
51 |             border-top: 2px solid #b2b2b2;
52 |             background-color: #a0dbc4;
53 |         }
54 |     </style>
55 | </head>
56 | 
57 | <body>
58 |     <input type="submit" id="submit" value="Submit Here" />
59 | </body>
60 | 
61 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/CSS/Jan 4/sample2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 |     <style>
10 |         body {
11 |             /* background-color: darkred; */
12 |         }
13 | 
14 |         h1 {
15 |             /* color: rgb(123,44,23); */
16 |             /* color: brown; */
17 |             /* color: rgba(12, 12, 12, 0.4) */
18 |             text-shadow: 3px 2px 4px #e27676;
19 |         }
20 | 
21 |         p::first-letter {
22 |             font-size: 2em;
23 |         }
24 | 
25 |         p::first-line {
26 |             font-weight: bold;
27 |         }
28 | 
29 |         p {
30 |             /* font-size: 75%; */
31 |             font-size: 20px;
32 |             line-height: 40px;
33 |             /* letter-spacing: 10px; */
34 |             word-spacing: 10px;
35 |             text-indent: 20px;
36 |         }
37 |     </style>
38 | </head>
39 | 
40 | <body>
41 |     <h1>Hello World</h1>
42 |     <p>Increasing the default amount of
43 |         leading can make text easier to
44 |         read. The vertical space between
45 |         lines should be larger than the
46 |         space between each word as this
47 |         helps the eye move along the line
48 |         instead of down them. A good
49 |         starter setting is around 1.4 to
50 |         1.5em. Because users can adjust
51 |         the default size of text in their
52 |         browser, the value of the line-
53 |         height property is best given in
54 |         ems, not pixels, so that the gap
55 |         between lines is relative to the
56 |         size of text the user has selected.</p>
57 | </body>
58 | 
59 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/CSS/Oct 19/sample6.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Boxes</title>
 9 |     <style>
10 |         div {
11 |             /* border-width: 5px ;
12 |             border-color: red;
13 |             border-style: dotted; */
14 |             border: 1px dotted red;
15 | 
16 |             /* padding-top: 10px;
17 |             padding-right: 10px;
18 |             padding-bottom: 10px;
19 |             padding-left: 10px; */
20 |             padding: 10px;
21 | 
22 |             /* margin-top: 10px;
23 |             margin-right: 10px;
24 |             margin-bottom: 10px;
25 |             margin-left: 10px; */
26 | 
27 |             margin: 20px auto;
28 |             height: 300px;
29 |             width: 300px;
30 |         }
31 |     </style>
32 | </head>
33 | 
34 | <body>
35 |     <div>
36 |         Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo suscipit doloremque atque ipsam ex, nobis neque
37 |         harum quos! Asperiores quidem repellendus vitae dolore dolores velit aperiam laborum voluptatem adipisci non.
38 |     </div>
39 |     <div>
40 |         Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo suscipit doloremque atque ipsam ex, nobis neque
41 |         harum quos! Asperiores quidem repellendus vitae dolore dolores velit aperiam laborum voluptatem adipisci non.
42 |     </div>
43 |     <div>
44 |         Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo suscipit doloremque atque ipsam ex, nobis neque
45 |         harum quos! Asperiores quidem repellendus vitae dolore dolores velit aperiam laborum voluptatem adipisci non.
46 |     </div>
47 | </body>
48 | 
49 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/HTML/Sep 28/sample5.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 	<head>
 3 | 		<title>Sample1</title>
 4 | 	</head>
 5 | 	<body>
 6 | 		<img src="panacloud.png" height="300" width="800"/>
 7 | 	
 8 | 		<p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p>
 9 | 
10 | <p> <img src="panacloud.png" height="200" width="300"/>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p>
11 | 
12 | <p> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. <img src="panacloud.png" height="200" width="300"/>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p>
13 | 
14 | <p> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. <img src="panacloud.png" height="200" width="300"/></p>
15 | 
16 | 
17 | 	</body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/HTML/Oct 5/sample3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |     <form action="https://www.google.com">
13 | 
14 |         <input type="text" name="username" size="15" maxlength="5" />
15 |         <br />
16 |         <input type="password" name="password" maxlength="5" />
17 |         <br />
18 |         <textarea cols="20" rows="5"></textarea>
19 |         <br />
20 |         <input type="radio" value="opt1" name="q1" /> Option 1
21 |         <input type="radio" value="opt2" name="q1" checked /> Option 2
22 |         <br />
23 |         <input type="checkbox" value="opta" name="opt1" checked /> Option A
24 |         <input type="checkbox" value="optb" name="opt2" /> Option B
25 |         <br />
26 | 
27 |         <select name="select">
28 |             <option value="opt1" hidden></option>
29 |             <option value="opt1">Option1</option>
30 |             <option value="opt2">Option2</option>
31 |             <option value="opt3">Option3</option>
32 |         </select>
33 |         <select name="select" multiple>
34 |             <option value="opt1">Option1</option>
35 |             <option value="opt2">Option2</option>
36 |             <option value="opt3" selected>Option3</option>
37 |         </select>
38 | 
39 |         <br />
40 |         <br />
41 |         <input type="file" name="file" />
42 |         <br />
43 |         <br />
44 | 
45 |         <button>My Button</button>
46 |         <br />
47 |         <br />
48 |         <input type="hidden" name="bookmark" value="lyrics" />
49 | 
50 |         <input type="image" src="panacloud.png" height="100" width="100" />
51 |         <br />
52 |         <input type="submit" name="submit" value="Save" />
53 |     </form>
54 | </body>
55 | 
56 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/HTML/Sep 28/sample6.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 	<head>
 3 | 		<title>Sample6</title>
 4 | 	</head>
 5 | 	<body>
 6 | 		
 7 | 
 8 | <p> <img src="panacloud.png" height="200" width="300" align="right"/>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p>
 9 | 
10 | <p> <img src="panacloud.png" height="200" width="300" align="top"/>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p>
11 | 
12 | <p> <img src="panacloud.png" height="200" width="300" align="middle"/>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p>
13 | 
14 | <p> <img src="panacloud.png" height="200" width="300" align="bottom"/>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p>
15 | 
16 | 
17 | 
18 | 	</body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/HTML/Sep 28/sample4.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 	<head>
 3 | 		<title>Sample4</title>
 4 | 	</head>
 5 | 	<body>
 6 | 
 7 | 		<h1 id="id1">This is starting of the page</h1>
 8 | 		<p>This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. This is some brief text. </p>
 9 | 
10 | 
11 | 	<a href="#id1">Go to Top</a>
12 | 
13 | 	</body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/JS/Dec 21/sample1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |     <script>
13 |         // window.alert("Hello");
14 |         // alert("World");
15 |         // document.write()
16 |         // window.document.write("123");
17 |         // document.write("<h1>Helloo</h1>")
18 | 
19 |         // var container1 = "ABCDEF";
20 |         // var container2 = "123123";
21 |         // var container3 = "Let's go to market";
22 |         // alert(typeof container3);
23 | 
24 |         // var num1 = 2;
25 |         // var num2 = 2;
26 |         // var num3 = "5"; // string 45
27 |         // var num4 = 4; // string 45 + number 4 = string 454
28 |         // var num5 = 4; // string 454 + number 4 = string 4544
29 | 
30 |         // alert(num1 + num2 + num3 + num4 + num5);
31 |         // var 1n1um = 123;
32 | 
33 |         // var num1 = 5 + 3;
34 |         // alert(num1);
35 | 
36 |         // var num1 = 5 % 3;
37 |         // alert(num1);
38 | 
39 |         // var num1 = "5" * 3;
40 |         // alert(num1)
41 | 
42 |         // var num = 5;
43 |         // alert(num++);
44 |         // alert(num++ + num++); // 5 + 6 = 11
45 |         // alert(num)// 7
46 | 
47 |         // var num1 = num++;//5
48 |         // var num2 = num1 + ++num;// 5+7=12
49 |         // alert(num2);12
50 | 
51 |         // var num1 = ++num + num++ + ++num + num++; 
52 |         // 6 + 6 + 8 + 8
53 |         // alert(num1); // 28
54 |         // alert(num) // 9
55 | 
56 |         // var firstName = prompt("Enter first name", "Ali");
57 |         // var lastName= prompt("Enter last name");
58 | 
59 |         // alert(firstName + " " + lastName);
60 | 
61 |         var num1 = prompt("Enter first number");
62 |         var num2 = prompt("Enter second number");
63 |         alert(num1);
64 |         alert(num2);
65 |         alert(num1 + num2)
66 |     </script>
67 | </body>
68 | 
69 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/JS/Nov 30/sample2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |     <title>Document</title>
 8 | </head>
 9 | <body>
10 |     <script>
11 |         var username = "alikhan";
12 |         // alert(username.length);
13 |         
14 |         // alert(username.slice(2,5)); //ikh
15 | 
16 |         var text1 = "My--name---is---khan";
17 |         // alert(text1.slice(11,13));
18 | 
19 |         // var userMonth = prompt("Enter your birthday month");
20 |         // alert(userMonth.slice(0, 3))
21 | 
22 | 
23 |         var message = "A string is indexed like--an array. Only, instead of each index number referring to an element, it refers to a character."
24 |         var textLength = message.length;
25 | 
26 |         // for(var i=0;i<textLength;i++){
27 |         //     if(message.slice(i,i+2) === "--"){
28 |         //         alert("-- found!");
29 |         //         break;
30 |         //     }
31 |         // }
32 | 
33 |         // for(var i=0;i<textLength;i++){
34 |         //     if(message.slice(i,i+5) === "array"){
35 |         //         alert("word ARRAY found!");
36 |         //         break;
37 |         //     }
38 |         // }
39 | 
40 |         message = "I am a human and I -like Mango";
41 | 
42 |         // alert(message.indexOf("Mango"));
43 | 
44 |         for(var i=0;i<message.length;i++){
45 |             if(message.slice(i,i+4) === "like"){
46 |                 // alert(message.slice(0,i))
47 |                 // alert(message.slice(i+4))
48 |                 message = message.slice(0,i) + "dislike" + message.slice(i+4);
49 |                 break;
50 |             }
51 |         }
52 |         // alert(message);
53 |         alert(message.indexOf("Mango"));
54 |         alert(message.lastIndexOf("Mango"));
55 | 
56 |         // alert(message.indexOf("I"));
57 |         // alert(message.lastIndexOf("I"));
58 |         // alert(message.indexOf("XYZ"));
59 | 
60 |     </script>
61 | </body>
62 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/CSS/Jan 4/sample1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |     <title>CSS Selectors</title>
 6 | 
 7 |     <style>
 8 |         * {
 9 |             font-family: Arial, Helvetica, sans-serif;
10 |         }
11 | 
12 |         h1 {
13 |             color: darkblue;
14 |         }
15 | 
16 |         .note {
17 |             color: orange;
18 |         }
19 | 
20 |         #introduction {
21 |             color: red;
22 |             font-style: italic;
23 |         }
24 | 
25 |         li>a {
26 |             /* color: goldenrod; */
27 |         }
28 | 
29 |         li a {
30 |             color: goldenrod;
31 |         }
32 | 
33 |         .note+div {
34 |             /* font-style: italic; */
35 |         }
36 | 
37 |         .note~div {
38 |             font-style: italic;
39 |         }
40 |     </style>
41 | </head>
42 | 
43 | <body>
44 |     <h1 id="top">Kitchen Garden Calendar</h1>
45 |     <p id="introduction">Here you can read our
46 |         handy guide about what to do when.</p>
47 |     <h2>Spring</h2>
48 |     <ul>
49 |         <li><a href="mulch.html">
50 |                 Spring mulch vegetable beds</a></li>
51 |         <li><a href="potato.html">
52 |                 Plant out early potatoes</a></li>
53 |         <li><a href="tomato.html">
54 |                 Sow tomato seeds</a></li>
55 |         <li><a href="beet.html">
56 |                 Sow beet seeds</a></li>
57 |         <li><a href="zucchini.html">
58 |                 Sow zucchini seeds</a></li>
59 |         <li>
60 |             <span>
61 |                 <a href="rhubarb.html">
62 |                     Deadhead rhubarb flowers</a>
63 |             </span>
64 |         </li>
65 |     </ul>
66 |     <p class="note">
67 |         This page was written by
68 |         <a href="mailto:ivy@example.org">
69 |             ivy@example.org</a> for
70 |         <a href="http://www.example.org">Example</a>.
71 |     </p>
72 |     <div>
73 |         This is end of the page!
74 |     </div>
75 | 
76 |     <span>This is a span between two divs</span>
77 | 
78 |     <div>
79 |         <a href="#top">Top of page</a>
80 |     </div>
81 | </body>
82 | 
83 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/JS/Nov 16/sample4.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |     <script>
13 |         // var course = "CNC";
14 |         // var day = "saturday";
15 |         // var time = "2PM";
16 |         // var gender = "male";
17 |         // var center = "SAIMS";
18 | 
19 |         // if (course === "CNC" && day === "saturday" 
20 |         //     && time === "2PM" && gender === "male"
21 |         //     && center === "SAIMS") {
22 |         //     alert('Welcome to the CNC Class!!!');
23 |         // } else {
24 |         //     alert('This is not CNC Class time!!!');
25 |         // }
26 |         
27 | 
28 |         // var age = 18;
29 |         // var nationality = "pakistani";
30 |         // var formB = true;
31 | 
32 |         // if (age >= 18 && nationality === "pakistani" && formB === true) {
33 |         //     alert('You are eligible for CNIC')
34 |         // } else {
35 |         //     alert('You are not eligible!!!')
36 |         // }
37 | 
38 | 
39 |         // var age = 18;
40 |         // var nationality = "pakistani";
41 |         // optional
42 |         // var formB = false;
43 |         // if (age >= 18 && nationality === "pakistani" && formB == true) {
44 |         //     alert('You are eligible for CNIC')
45 |         //     if (!formB) {
46 |         //         alert('Please make a Form-B')
47 |         //     }
48 |         // } else {
49 |         //     alert('You are not eligible!!!')
50 |         // }
51 | 
52 |         var age = 31;
53 |         var gender = "female";
54 |         // if ((gender === "male" || gender === "female") && age >= 18 && age <= 30) {
55 |         //     alert('You can attend class')
56 |         // } else {
57 |         //     alert('You are not eligible for this class!!')
58 |         // }
59 | 
60 |         if (gender === "male" || gender === "female") {
61 |             alert('It works')
62 |         }
63 | 
64 |     
65 | 
66 |     </script>
67 | </body>
68 | 
69 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/CSS/Oct 26/sample2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 |     <style>
10 |         body {
11 |             font-family: Arial, Verdana, sans-serif;
12 |             color: #111111;
13 |         }
14 | 
15 |         table {
16 |             width: 600px;
17 |         }
18 | 
19 |         th,
20 |         td {
21 |             padding: 7px 10px 10px 10px;
22 |         }
23 | 
24 |         th {
25 |             text-transform: uppercase;
26 |             letter-spacing: 0.1em;
27 |             font-size: 90%;
28 |             border-bottom: 2px solid #111111;
29 |             border-top: 1px solid #999;
30 |             text-align: left;
31 |         }
32 | 
33 |         tr.even {
34 |             background-color: #efefef;
35 |         }
36 | 
37 |         tr:hover {
38 |             background-color: #c3e6e5;
39 |         }
40 | 
41 |         .money {
42 |             text-align: right;
43 |         }
44 |     </style>
45 | </head>
46 | 
47 | <body>
48 |     <h1>First Edition Auctions</h1>
49 |     <table>
50 |         <tr>
51 |             <th>Author</th>
52 |             <th>Title</th>
53 |             <th class="money">Reserve Price</th>
54 |             <th class="money">Current Bid</th>
55 |         </tr>
56 |         <tr>
57 |             <td>E.E. Cummings</td>
58 |             <td>Tulips & Chimneys</td>
59 |             <td class="money">$2,000.00</td>
60 |             <td class="money">$2,642.50</td>
61 |         </tr>
62 |         <tr class="even">
63 |             <td>Charles d'Orleans</td>
64 |             <td>Poemes</td>
65 |             <td class="money"></td>
66 |             <td class="money">$5,866.00</td>
67 |         </tr>
68 |         <tr>
69 |             <td>T.S. Eliot</td>
70 |             <td>Poems 1909 - 1925</td>
71 |             <td class="money">$1,250.00</td>
72 |             <td class="money">$8,499.35</td>
73 |         </tr>
74 |         <tr class="even">
75 |             <td>Sylvia Plath</td>
76 |             <td>The Colossus</td>
77 |             <td class="money"></td>
78 |             <td class="money">$1031.72</td>
79 |         </tr>
80 |     </table>
81 | </body>
82 | 
83 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/CSS/Oct 26/form.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Document</title>
 9 |     <style>
10 |         .my-form {
11 |             border: 1px solid #44444480;
12 |             padding: 50px;
13 |             width: 40%;
14 |             margin: auto;
15 |         }
16 | 
17 |         .title {
18 |             color: #444444;
19 |             text-align: center;
20 |         }
21 | 
22 |         label {
23 |             display: inline-block;
24 |             width: 100px;
25 |         }
26 | 
27 |         input {
28 |             /* display: block; */
29 |             /* margin: 10px auto; */
30 |         }
31 | 
32 |         .input {
33 |             background-image: url('./bullet.gif');
34 |             border: none;
35 |             border-bottom: 1px solid #44444480;
36 |             background-repeat: no-repeat;
37 |             background-size: 10px;
38 |             border-radius: 2px;
39 |             margin-bottom: 10px;
40 |             background-position: left center;
41 |             padding: 5px 20px;
42 |         }
43 | 
44 |         input[type='submit'] {
45 |             padding: 5px 20px;
46 |             width: 100%;
47 |             border: 1px solid #44444480;
48 |             border-radius: 2px;
49 |             color: #fff;
50 |             background: #000;
51 |             transition: all 0.5s;
52 |             display: block;
53 |             margin: 50px auto 0px auto;
54 | 
55 |         }
56 | 
57 |         input[type='submit']:hover {
58 |             cursor: pointer;
59 |             color: #000;
60 |             background: #fff;
61 |             transition: all 0.5s;
62 |         }
63 |     </style>
64 | </head>
65 | 
66 | <body>
67 |     <form class="my-form" action="" method="get">
68 |         <h1 class="title">Form</h1>
69 |         <label for="">Username</label>
70 |         <input class="input" type="text" placeholder="Username" name="username" id="">
71 |         <br>
72 |         <label for="">Email</label>
73 |         <input class="input" type="email" placeholder="Email" name="email" id="">
74 |         <br>
75 |         <label for="">Password</label>
76 |         <input class="input" type="password" placeholder="Password" name="password" id="">
77 |         <br>
78 |         <input type="submit" value="Submit">
79 |     </form>
80 | </body>
81 | 
82 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/CSS/Oct 19/sample4.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Attribute Selector</title>
 9 |     <style>
10 |         /* Existence selector */
11 |         /* a[target] {
12 |             color: red;
13 |         }
14 |         p[title] {
15 |             color: green;
16 |         } */
17 | 
18 |         /* Equality selector */
19 |         /* a[target="_blank"] {
20 |             color: red;
21 |         }
22 |         p[title="Paragraph 1"] {
23 |             color: green;
24 |         } */
25 | 
26 |         /* Space selector */
27 |         /* p[title~="Paragraph"] {
28 |             color: green;
29 |         }
30 |         a[target="_blank"] {
31 |             color: red;
32 |         } */
33 | 
34 |         /* Prefix selector */
35 |         /* p[title^="P"] {
36 |             color: green;
37 |         }
38 |         a[target^="_"] {
39 |             color: red;
40 |         }        */
41 | 
42 |         /* SubString selector */
43 |         /* p[title*="ara"] {
44 |             color: green;
45 |         }
46 |         p[title*="a"] {
47 |             color: green;
48 |         }
49 |         a[target*="b"] {
50 |             color: red;
51 |         }
52 |         a[target*="n"] {
53 |             color: red;
54 |         } */
55 | 
56 |         /* Suffix selector */
57 |         /* p[title$="1"] {
58 |             color: green;
59 |         }
60 |         p[title$=" 1"] {
61 |             color: green;
62 |         }
63 |         a[target$="k"] {
64 |             color: red;
65 |         }
66 |         a[target$="ank"] {
67 |             color: red;
68 |         } */
69 |     </style>
70 | </head>
71 | 
72 | <body>
73 |     <p title="Paragraph 1">This is paragraph 1. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit, vel.
74 |         Nobis, dolorem doloremque iste dolorum sapiente, fugit harum magni mollitia ex optio saepe illum! Delectus minus
75 |         doloremque nihil qui ut!</p>
76 |     <p>This is paragraph 2. Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam officiis expedita ea
77 |         dolorum et ex, delectus praesentium atque quas cupiditate at fuga voluptatibus architecto ipsam accusamus.
78 |         Repellendus, provident. Perspiciatis, dolore!</p>
79 | 
80 |     <a href="#">Link1</a>
81 |     <br />
82 |     <a href="#" target="_blank">Link2</a>
83 | </body>
84 | 
85 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/CSS/Jan 4/sample6.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Attribute Selector</title>
 9 |     <style>
10 |         /* Existence selector */
11 |         /* a[target] {
12 |             color: red;
13 |         }
14 |         p[title] {
15 |             color: green;
16 |         } */
17 | 
18 |         /* Equality selector */
19 |         /* a[target="_blank"] {
20 |             color: red;
21 |         }
22 |         p[title="Paragraph 1"] {
23 |             color: green;
24 |         } */
25 | 
26 |         /* Space selector */
27 |         /* p[title~="Paragraph"] {
28 |             color: green;
29 |         }
30 |         a[target="_blank"] {
31 |             color: red; 
32 |         }*/
33 | 
34 |         /* Prefix selector */
35 |         p[title^="P"] {
36 |             color: blue;
37 |         }
38 | 
39 |         a[target^="_"] {
40 |             color: red;
41 |         }
42 | 
43 |         /* SubString selector */
44 |         p[title*="ara"] {
45 |             color: yellow;
46 |         }
47 | 
48 |         p[title*="a"] {
49 |             color: yellow;
50 |         }
51 | 
52 |         a[target*="b"] {
53 |             color: powderblue;
54 |         }
55 | 
56 |         a[target*="n"] {
57 |             color: powderblue;
58 |         }
59 | 
60 |         /* Suffix selector */
61 |         /* p[title$="n"] {
62 |             color: green;
63 |         }
64 |         p[title$=" 1"] {
65 |             color: green;
66 |         }
67 |         a[target$="k"] {
68 |             color: red;
69 |         }
70 |         a[target$="ank"] {
71 |             color: red;
72 |         } */
73 |     </style>
74 | </head>
75 | 
76 | <body>
77 |     <p title="Paragraph 1 main">This is paragraph 1. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit,
78 |         vel.
79 |         Nobis, dolorem doloremque iste dolorum sapiente, fugit harum magni mollitia ex optio saepe illum! Delectus minus
80 |         doloremque nihil qui ut!</p>
81 |     <p>This is paragraph 2. Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam officiis expedita ea
82 |         dolorum et ex, delectus praesentium atque quas cupiditate at fuga voluptatibus architecto ipsam accusamus.
83 |         Repellendus, provident. Perspiciatis, dolore!</p>
84 | 
85 |     <a href="#">Link1</a>
86 |     <br />
87 |     <a href="#" target="_blank">Link2</a>
88 | </body>
89 | 
90 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/CSS/Oct 19/sample5.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>Boxes</title>
 9 |     <style>
10 |         div.box1 {
11 |             height: 300px;
12 |             width: 300px;
13 |             background-color: yellow;
14 |         }
15 | 
16 |         .para1 {
17 |             min-width: 400px;
18 |             max-width: 600px;
19 |             background-color: red;
20 |         }
21 | 
22 |         .para2 {
23 |             min-height: 150px;
24 |             max-height: 180px;
25 |             background-color: palegreen;
26 |             /* overflow: scroll; */
27 |             overflow: auto;
28 |             /* overflow-y: hidden; */
29 |             /* overflow: hidden; */
30 |         }
31 |     </style>
32 | </head>
33 | 
34 | <body>
35 |     <div class="box1">
36 | 
37 |     </div>
38 |     <p class="para1">
39 |         Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis sit labore repellendus esse fuga sunt eligendi et
40 |         tenetur recusandae harum, corrupti dignissimos reiciendis aspernatur distinctio obcaecati eos asperiores dolore
41 |         earum.
42 |     </p>
43 |     <p class="para2">
44 |         Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto qui maiores libero perspiciatis, rerum ipsam
45 |         ea at veniam totam volupta Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae aspernatur itaque
46 |         tenetur distinctio perferendis autem nihil ratione libero id. Officia dolor corrupti voluptate totam accusamus
47 |         asperiores doloribus perferendis nam! Consequatur. Lorem ipsum, dolor sit amet consectetur adipisicing elit.
48 |         Modi impedit iusto, saepe optio possimus rem excepturi porro, ullam minus, blanditiis rerum ducimus? Molestiae
49 |         laboriosam velit nisi quo ratione, voluptatem dolores? Lorem ipsum dolor sit amet consectetur adipisicing elit.
50 |         Itaque non officiis sequi, neque ex excepturi delectus autem rem! Architecto pariatur laudantium quasi accusamus
51 |         laborum voluptates quidem, alias nisi ex veritatis? Lorem ipsum, dolor sit amet consectetur adipisicing elit.
52 |         Dolorem fuga ipsum eum culpa, in temporibus possimus, voluptas ex reiciendis itaque rem cumque atque neque earum
53 |         quos incidunt ad esse adipisci? s odio itaque alias repudiandae quae? Beatae nihil quibusdam totam quam.
54 |     </p>
55 | 
56 | </body>
57 | 
58 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/JS/Nov 16/sample2.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8 |     <title>Document</title>
  9 | </head>
 10 | 
 11 | <body>
 12 |     <script>
 13 |         var age = "18";
 14 |         // if (age == 18) {
 15 |         //     alert('Congrats! You are eligible');
 16 |         // }
 17 | 
 18 |         // if (age === 18) {
 19 |         //     alert('Congrats! You are eligible');
 20 |         // }
 21 | 
 22 |         // if (age !== 18) {
 23 |         //     alert('Congrats! You are eligible');
 24 |         // }
 25 | 
 26 | 
 27 |         // if (true) {
 28 |         //     alert('Congrats! You are eligible');
 29 |         // }
 30 | 
 31 |         // if (false) {
 32 |         //     alert('Congrats! You are eligible');
 33 |         // }
 34 | 
 35 |         // if (0) {
 36 |         //     alert('Congrats! You are eligible');
 37 |         // }
 38 | 
 39 |         // if (-1) {
 40 |         //     alert('Congrats! You are eligible');
 41 |         // }
 42 | 
 43 | 
 44 |         // if (1) {
 45 |         //     alert('Congrats! You are eligible');
 46 |         // }
 47 | 
 48 |         // var a = 1;
 49 | 
 50 |         // if (a) {
 51 |         //     alert('Congrats! You are eligible');
 52 |         // }
 53 | 
 54 |         // *************
 55 |         // var a;
 56 |         // alert(a);
 57 | 
 58 |         // if (a) {
 59 |         //     alert('Congrats! You are eligible');
 60 |         // }
 61 | 
 62 |         // **************
 63 |         // var a = "a";
 64 |         // if (a) {
 65 |         //     alert('Congrats! You are eligible');
 66 |         // }
 67 | 
 68 |         // var age = 18;
 69 |         // if (age >= 18) {
 70 |         //     alert('Congrats! You are eligible');
 71 |         // } else {
 72 |         //     alert('Sorry! You are not eligible');
 73 | 
 74 |         // }
 75 | 
 76 |         // var age = 18;
 77 |         // var overseas = "yes";
 78 |         // if (age >= 18) {
 79 |         //     if (overseas === "yes") {
 80 |         //         alert('Congrats! You are eligible for NICOP');
 81 |         //     } else {
 82 | 
 83 |         //         alert("Congrats! You are eligible for CNIC only!!")
 84 |         //     }
 85 |         // } else {
 86 |         //     alert('Sorry! You are not eligible');
 87 | 
 88 |         // }
 89 | 
 90 |         var age = 17;
 91 |         var formB = "yes"
 92 |         if (age >= 18) {
 93 |             alert('You are eligible for CNIC!!');
 94 |         } else {
 95 |             alert('Sorry! You are not eligible CNIC!!');
 96 |             if (formB !== "yes") {
 97 |                 alert('You can request the Form-B');
 98 |             }
 99 | 
100 |         }
101 | 
102 | 
103 |     </script>
104 | </body>
105 | 
106 | </html>


--------------------------------------------------------------------------------
/BATCH1-Q2-CN/CSS/Oct 11/sample4.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8 |     <title>Document</title>
  9 |     <style>
 10 |         /* class selector */
 11 |         .color-green {
 12 |             color: green;
 13 |         }
 14 | 
 15 |         .font-18 {
 16 |             font-size: 22px;
 17 |         }
 18 | 
 19 |         /* child selector */
 20 |         .list-item>a {
 21 |             color: orange;
 22 |             font-size: 20px;
 23 |         }
 24 | 
 25 |         /* descendant Selector */
 26 |         li a {
 27 |             color: red;
 28 |         }
 29 | 
 30 |         /* Adjacent Sibling Selector */
 31 |         .para+p {
 32 |             color: green;
 33 |         }
 34 | 
 35 |         /* General Sibling Selector */
 36 |         .para~p {
 37 |             color: green;
 38 |         }
 39 |     </style>
 40 | 
 41 | </head>
 42 | 
 43 | <body>
 44 |     <h1>Heading 1</h1>
 45 |     <h2 id="sub">Sub Heading 1</h2>
 46 |     <h2>Sub Heading 2</h2>
 47 |     <p>ThThis is my paragraph. This is my paragraph.
 48 |         This is my paragraph. This is my paragraph.
 49 |         This is my paragraph. This is my paragraph.
 50 |         This is my paragraph.
 51 |     </p>
 52 |     <p class="color-green font-18">
 53 |         This is my paragraph. This is my paragraph.
 54 |         This is my paragraph. This is my paragraph.
 55 |         This is my paragraph. This is my paragraph.
 56 |         This is my paragraph.
 57 |     </p>
 58 |     <p>
 59 |         This is my paragraph. This is my paragraph.
 60 |         This is my paragraph. This is my paragraph.
 61 |         This is my paragraph. This is my paragraph.
 62 |         This is my paragraph.
 63 |     </p>
 64 |     <p class="color-green">
 65 |         This is my paragraph. This is my paragraph.
 66 |         This is my paragraph. This is my paragraph.
 67 |         This is my paragraph. This is my paragraph.
 68 |         This is my paragraph.
 69 |     </p>
 70 |     <ul>
 71 |         <li class="list-item">
 72 |             <a> A Tag</a>
 73 |             <a> A Tag</a>
 74 |         </li>
 75 |         <li class="list-item">
 76 |             <a> A Tag</a>
 77 |         </li>
 78 |         <li class="list-item">
 79 |             <a> A Tag</a>
 80 |         </li>
 81 |         <li class="list-item">
 82 |             <a> A Tag</a>
 83 |         </li>
 84 |         <li class="list-item">
 85 |             <a> A Tag</a>
 86 |         </li>
 87 |         <li class="list-item">
 88 |             <span><a> A Tag</a></span>
 89 |         </li>
 90 |     </ul>
 91 |     <a href="rhubarb.html">
 92 |         Deadhead rhubarb flowers</a>
 93 |     <a href="rhubarb.html">
 94 |         Deadhead rhubarb flowers</a>
 95 |     <br />
 96 |     <p>This is paragraph1. </p>
 97 |     <p class="para">This is paragraph2. </p>
 98 |     <p>This is paragraph3. </p>
 99 |     <p>This is paragraph4. </p>
100 | </body>
101 | 
102 | </html>


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