├── README.md
├── UNIT 1
    ├── Anchor code
    │   ├── 1.intro_form.html
    │   ├── 2.emailasformaction.html
    │   ├── 3.intro_boxmodel.html
    │   ├── 4.js_sort_random.html
    │   ├── 5.obj_intro.html
    │   ├── 6.obj_inheritance.html
    │   ├── 7.class.html
    │   ├── 8.call_apply_bind.html
    │   ├── U1L4.html
    │   └── U1L4_ip.html
    ├── Box_model.html
    ├── CSS_col_fonts.html
    ├── DESCENDANT_selectors.html
    ├── External_link.html
    ├── FunctionReturn.html
    ├── Function_Parameter.html
    ├── Function_arguments.html
    ├── HTML5_DOC_STRUCT.html
    ├── HTML_Lists.html
    ├── Hover_example.html
    ├── Image.html
    ├── Inheritance.html
    ├── Internalprac.html
    ├── JavaScript_Array.html
    ├── LET_ex.html
    ├── Prototypal.html
    ├── STYLE.CSS
    ├── Span.html
    ├── TAble_example.html
    ├── VistednHover.html
    ├── basicsjs.html
    ├── border.html
    ├── css.html
    ├── css_form.html
    ├── css_table.html
    ├── form_example.html
    ├── forms.html
    ├── global_var.html
    ├── hello.js
    ├── html5_color.html
    ├── html5_inputType.html
    ├── img_link.html
    ├── inlineprac.html
    ├── javascript_ex.html
    ├── javascript_operators.html
    ├── letnConst.html
    ├── local_var.html
    ├── prototype.html
    ├── pseudo_ex.html
    ├── screen IO.html
    ├── screen_output.html
    ├── table_border.html
    ├── table_colspan.html
    ├── table_rowspan.html
    ├── type_of ex1.html
    ├── varletconst.html
    └── varnlet.html
├── UNIT 2
    ├── .vscode
    │   └── settings.json
    ├── ClearTimeout.html
    ├── Doc_structure.html
    ├── Document_method.html
    ├── Event_Bubbling.html
    ├── Event_Capturing.html
    ├── HTML5_Aud.html
    ├── HTML5_Video.html
    ├── HTML5_canvas_1.html
    ├── HTML5_contenteditable.htm
    ├── HTML5_email.htm
    ├── HTML5_ex.htm
    ├── ONMOUSEOVER.html
    ├── ONMOUSEOVER_OUT.html
    ├── Zomato_logo.png
    ├── ajaxex.html
    ├── callajax.html
    ├── canvas.htm
    ├── child.html
    ├── class_qs.html
    ├── clientX_Y.html
    ├── contextmenu_1.html
    ├── create_elem1.html
    ├── create_element.html
    ├── create_element_text.html
    ├── create_txtNode.html
    ├── customevent.html
    ├── dbclick.html
    ├── dom.html
    ├── dowork.js
    ├── elem_tag1.html
    ├── elment_classname.html
    ├── elment_id.html
    ├── elment_name.html
    ├── elment_tag.html
    ├── event_flow.html
    ├── event_hand.html
    ├── event_hand1.html
    ├── event_prop.html
    ├── form.html
    ├── from_to.html
    ├── geoloc.htm
    ├── get_attr.html
    ├── getajax.html
    ├── getjson.html
    ├── html5.htm
    ├── html5.zip
    ├── html5a.htm
    ├── html5b.htm
    ├── html5c.htm
    ├── html5d.htm
    ├── html5e.htm
    ├── html5f.htm
    ├── html5g.htm
    ├── html5h.htm
    ├── html5i.htm
    ├── html5j.htm
    ├── html5k.htm
    ├── inline_style.html
    ├── innerHTML.html
    ├── innerTxt.html
    ├── insert_Before.html
    ├── jq_aj_fetch.html
    ├── jyp_ON.html
    ├── jyp_animate.htm
    ├── jyp_animate1.htm
    ├── jyp_append.htm
    ├── jyp_appendto.html
    ├── jyp_before_after.htm
    ├── jyp_callback.html
    ├── jyp_chaining.html
    ├── jyp_chaining_1.html
    ├── jyp_change.html
    ├── jyp_classSel.html
    ├── jyp_click.html
    ├── jyp_css.htm
    ├── jyp_delay.html
    ├── jyp_double-click.html
    ├── jyp_element_class.html
    ├── jyp_element_sel.html
    ├── jyp_fadein.htm
    ├── jyp_fadeout.htm
    ├── jyp_fadeout_span.htm
    ├── jyp_filter.htm
    ├── jyp_filter_eq.htm
    ├── jyp_focus.html
    ├── jyp_form.html
    ├── jyp_getter.html
    ├── jyp_hide_show.html
    ├── jyp_hover.htm
    ├── jyp_load.html
    ├── jyp_mouse_enter_leave.html
    ├── jyp_mouseenter.html
    ├── jyp_mouseup.html
    ├── jyp_multiple.html
    ├── jyp_multiple_elememts.html
    ├── jyp_post.html
    ├── jyp_post1.html
    ├── jyp_setter.html
    ├── jyp_show.htm
    ├── jyp_show1.html
    ├── jyp_slideDown.html
    ├── jyp_slideUp.html
    ├── jyp_toogle.html
    ├── key_Uppercase.html
    ├── keycode.html
    ├── keycode1.html
    ├── load_xml2.html
    ├── logo.png
    ├── metakey.html
    ├── modifier .html
    ├── mouse.html
    ├── mouse_over.html
    ├── mouse_over_out (2).html
    ├── new3.xml
    ├── onclick.html
    ├── onclick_event_handler.html
    ├── onfocus.html
    ├── onfocus1.html
    ├── onload.html
    ├── onready.html
    ├── parent_node.html
    ├── pic1.jpg
    ├── pic2.jpg
    ├── postajax.html
    ├── querySel.html
    ├── querySel_1.html
    ├── querySel_2.html
    ├── querySel_All.html
    ├── querySel_All_1.html
    ├── query_both.html
    ├── remove_attr.html
    ├── remove_child.html
    ├── replace_child.html
    ├── sam.js
    ├── sam.json
    ├── sam.xml
    ├── sam1.json
    ├── screenX_Y.html
    ├── screen_coordinates.html
    ├── setInterval.html
    ├── set_attr.html
    ├── set_attr1.html
    ├── set_clearInterval.html
    ├── settimeout.html
    ├── shuttle.mp4
    ├── siblings.html
    ├── svg.htm
    ├── test.php
    ├── travel.jpeg
    ├── travelwoman.jpg
    ├── web_workers.html
    ├── worker1.html
    ├── ww.htm
    ├── xmlparse.html
    └── xmlparse1.html
├── UNIT 3
    ├── Anchor_code
    │   ├── U3L2.html
    │   ├── U3L3.html
    │   ├── U3L4.html
    │   ├── U3L5.html
    │   ├── U3L6.html
    │   ├── U3L6_1.html
    │   ├── U3L7.html
    │   ├── U3L8.html
    │   ├── images
    │   │   ├── peacock.jpg
    │   │   └── tiger.jpg
    │   ├── ref.html
    │   └── ref_pass.html
    ├── Counter_Events.html
    ├── Nested Components.html
    ├── React_styling.html
    ├── Refs1.html
    ├── Refs2.html
    ├── Refs3.html
    ├── Unit3_React.pdf
    ├── add_Image.html
    ├── basic_Component.html
    ├── basiccomponent.html
    ├── bindingevents.html
    ├── bloglayout.html
    ├── characterlog.html
    ├── clock.html
    ├── colours.html
    ├── compl_components.html
    ├── components.html
    ├── context_basic.html
    ├── controlled.html
    ├── counter.html
    ├── discount.html
    ├── eventobject.html
    ├── events_1.html
    ├── events_2.html
    ├── facebackCard.html
    ├── facebookcard.html
    ├── firstprgm.html
    ├── firstreact.html
    ├── firstreactcode.html
    ├── formvalidation.html
    ├── greet_event.html
    ├── idwithprops.html
    ├── image_react.html
    ├── issuetracker_1.html
    ├── issuetracker_2a.html
    ├── issuetracker_2b.html
    ├── issuetracker_3.html
    ├── issuetracker_4.html
    ├── keys.html
    ├── lifecycle.html
    ├── lifecycle1.html
    ├── lifecycleR1.html
    ├── map.html
    ├── map_key.html
    ├── mouse_events.html
    ├── mouseevents.html
    ├── multipleinputs.html
    ├── nested(q1).html
    ├── parameters.html
    ├── props.child.html
    ├── props.html
    ├── react_event.html
    ├── react_event2.html
    ├── react_form_val.html
    ├── react_forms1.html
    ├── react_forms3.html
    ├── react_styles.html
    ├── reactbasic.html
    ├── reactstyle.html
    ├── reactwithjsx.html
    ├── refs_1.html
    ├── refs_2.html
    ├── refs_3.html
    ├── simpleform.html
    ├── spread_operator.html
    ├── stateless.html
    ├── stateless_2.html
    ├── static_getDerivedStateFromProps().html
    ├── super_example.html
    ├── uncontrolled.html
    └── updatingcontext.html
├── UNIT 4
    ├── AppendFile.js
    ├── Blocking.js
    ├── Collection_create.js
    ├── HTTP_Client.js
    ├── HTTP_Server.js
    ├── NonBlocking.js
    ├── Readstreams1.js
    ├── Unit4.docx
    ├── Unit4.pdf
    ├── Write_streams.js
    ├── buffer.js
    ├── calculator.js
    ├── chaining_stream.js
    ├── clearInterval.js
    ├── clearTimeout.js
    ├── createDB.js
    ├── delete.js
    ├── delete1.js
    ├── deleteMany.js
    ├── document_insert.js
    ├── document_insertMany.js
    ├── event.js
    ├── event1.js
    ├── event2.js
    ├── event2_addList.js
    ├── eventLoop_understanding.js
    ├── eventemitter.js
    ├── findall.js
    ├── httpHeader.js
    ├── httprequestclient.js
    ├── httprequestserver.js
    ├── moduleExample.js
    ├── openFile.js
    ├── pipe_stream.js
    ├── readFile.js
    ├── renameFile.js
    ├── setInterval.js
    ├── setTimeout.js
    ├── update.js
    └── writeFile.js
└── UNIT 5
    ├── AnchorCodes
        ├── FileUpload.txt
        ├── Form(pug).txt
        ├── Formdata.txt
        ├── Middleware-static.txt
        ├── cookie.js
        ├── err_handling.txt
        ├── exp.js
        ├── exp_mw.js
        ├── exp_req.js
        ├── hello.js
        ├── index.js
        └── student.js
    ├── Application_level_middleware.js
    ├── Router-level_middleware.js
    ├── Unit5.pdf
    ├── bodyparser.js
    ├── bodyparser1.js
    ├── cookie1.js
    ├── cookie11.js
    ├── cookie111.js
    ├── cookieparser.js
    ├── errorhandling.js
    ├── express_server.js
    ├── fileupload.js
    ├── form.html
    ├── form_1.html
    ├── formserver.js
    ├── formserver_1.js
    ├── index.js
    ├── middleware.js
    ├── middleware3.js
    ├── middleware_1.js
    ├── middleware_2.js
    ├── middlewareorder.js
    ├── middlewareorder_2.js
    ├── middlewareorder_3.js
    ├── requestlogging.js
    ├── routing.js
    ├── things.js
    ├── upload.html
    └── urlbuilding.js


/README.md:
--------------------------------------------------------------------------------
1 | # WT-Programs


--------------------------------------------------------------------------------
/UNIT 1/Anchor code/2.emailasformaction.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Title of the document</title>
 5 |     <style>
 6 |       div {
 7 |         margin-bottom: 10px;
 8 |       }
 9 |     </style>
10 |   </head>
11 |   <body>
12 |     <h2>Give Feedback to Our Website.</h2>
13 |     <form action="mailto:info@w3docs.com?subject=The%20subject%20of%20the%20mail" method="post" enctype="text/plain">
14 |       <div>
15 |         <label for="uname">Name:
16 |           <input type="text" name="name" id="uname" />
17 |         </label>
18 |       </div>
19 |       <div>
20 |         <label for="uemail">Email:
21 |           <input type="text" name="email" id="uemail" />
22 |         </label>
23 |       </div>
24 |       <div>
25 |         <label for="ucomments">Comments:</label>
26 |         <br />
27 |         <textarea name="comments" id="ucomments" rows="12" cols="35">Send your comments to us.</textarea>
28 |       </div>
29 |       <div>
30 |         <input type="submit" value="Send" />
31 |         <input type="reset" value="Clear Form" />
32 |       </div>
33 |     </form>
34 |   </body>
35 | </html>


--------------------------------------------------------------------------------
/UNIT 1/Anchor code/4.js_sort_random.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 	<head>
 3 | 		<title>JavaScript</title>
 4 | 	</head>
 5 | 	<body>
 6 | 		<p id="p1"> This is the javascript program on DOM Manipulation.
 7 | 		</p>
 8 | 		<ul id="ul1">
 9 | 			<li>Item 1</li>
10 | 			<li>Item 2</li>
11 | 			<li>Item 3</li>
12 | 			<li>Item 4</li>
13 | 		</ul>
14 | 		<script type="text/javascript">
15 | 			/*
16 | 				DOM Manipulation:
17 | 				Access Elements using  - getElementById or querySelector or querySelectorAll
18 | 				
19 | 				Create Element using - createElement or createTextNode
20 | 				
21 | 				Node manipulation using - appendChild,insertBefore, replaceChild, removeChild, remove
22 | 			*/
23 | 
24 | 		</script>
25 | 	</body>
26 | </html>


--------------------------------------------------------------------------------
/UNIT 1/Anchor code/5.obj_intro.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 	<script>
 4 | 		// JavaScript Objects
 5 | 		
 6 | 		// Method 1 : Object Literals
 7 | 		/*let item = {name:"Reebok", price:"Rs. 2000", av_qty:20};
 8 | 		document.write(item.name+" "+item.price+"<br/>");
 9 | 		item.show=function(){
10 | 			document.write(this.name+" "+this.price+" "+this.av_qty+"<br/>");
11 | 		};
12 | 		item.show();
13 | 		*/
14 | 		// Method 2 : Object Constructors
15 | 		function item(name, price, av_qty){
16 | 			this.name = name;
17 | 			this.price = price;
18 | 			this.av_qty = av_qty;
19 | 			/*this.show = function(){
20 | 				document.write(this.name+" "+this.price+" "+this.av_qty+"<br/>");
21 | 			}*/
22 | 		}
23 | 		
24 | 		let item1 = new item("Reebok", "Rs. 2000", 20);
25 | 		let item2 = new item("Nike", "Rs. 3000", 25);
26 | 		
27 | 		//item2.show();
28 | 		
29 | 		item.prototype.show = function(){
30 | 			document.write(this.name+" "+this.price+" "+this.av_qty+"<br/>");
31 | 		}
32 | 		item1.show();
33 | 		item2.show();
34 | 	</script>
35 | </head>
36 | <body>
37 | </body>
38 | </html>


--------------------------------------------------------------------------------
/UNIT 1/Anchor code/7.class.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 	<script>
 4 | 		// JavaScript Class
 5 | 		
 6 | 		// ECMAScript 2015 (ES6)
 7 | 		
 8 | 		class item{
 9 | 			constructor(name,price){
10 | 				this.iname = name;
11 | 				this.iprice = price;
12 | 			}
13 | 			show(){
14 | 				document.write("iname: "+this.iname+" iprice: "+this.iprice+"<br/>")
15 | 			}
16 | 		}
17 | 		
18 | 		let i1 = new item("MI 7", "Rs 20000");
19 | 		i1.show();
20 | 		
21 | 	</script>
22 | </head>
23 | <body>
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/UNIT 1/Anchor code/8.call_apply_bind.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 	<script>
 4 | 		function mytostring(){
 5 | 			console.log(arguments);
 6 | 			var str="";
 7 | 			for (var i in arguments)
 8 | 				str=str+this[arguments[i]];
 9 | 			return str;
10 | 		}
11 | 		var obj={name:"vijay", age:"22", show:function(){}};
12 | 		var params=["name","age"];
13 | 
14 | 		console.log(mytostring.call(obj,"name","age")); 
15 | 		//call mytostring for obj with parameter list specified individually
16 | 		
17 | 		console.log(mytostring.apply(obj,params));
18 | 		//call mytostring for obj with parameter list specified as an array
19 | 		
20 | 		var obj1={name:"sujay", age:"25", show:function(){}};
21 | 		var objstr = mytostring.bind(obj1); 
22 | 		// bind mytostring to obj1 and store that reference as objstr
23 | 		
24 | 		console.log(objstr("name","age"));// same as mytostring.call(obj)
25 | 
26 | 	</script>
27 | </head>
28 | </html>


--------------------------------------------------------------------------------
/UNIT 1/Anchor code/U1L4_ip.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 	<head>
 3 | 		<title>HTML5 tags</title>
 4 | 		<script>
 5 | 			function settext(){
 6 | 				let col = document.querySelector("#colcode").value;
 7 | 				document.querySelector("#coltext").value = col;
 8 | 			}
 9 | 			function setcolor(){
10 | 				let col = document.querySelector("#coltext").value;
11 | 				document.querySelector("#colcode").value = col;
12 | 			}
13 | 		</script>
14 | 	</head>
15 | 	<body>
16 | 		<form action="save.py" method="get">
17 | 			<input id="colcode" onchange="settext()" type="color" name="ucolor"></input>
18 | 			<input onchange="setcolor()" type="text" id="coltext"></input>
19 | 			<input type="tel" autofocus required placeholder="xxx-xxx-xxxx" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" name="utel"></input>
20 | 			<button type="submit">Submit</button>
21 | 		</form>
22 | 	</body>
23 | </html>


--------------------------------------------------------------------------------
/UNIT 1/Box_model.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <style>
 5 |         .div1{
 6 |             background-color: red;
 7 |             width: 50%;
 8 |             height: 200px;
 9 |             margin: 10px;
10 |             border: 10px solid;
11 | 
12 |         }
13 |         .div2
14 |         {
15 |             background-color: green;
16 |             margin: 10px;
17 |         }
18 | 
19 |     </style>
20 | </head>
21 | <body>
22 |     <div class="div1">Division 1</div>
23 |     <div class="div2">Division 2</div>
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/UNIT 1/CSS_col_fonts.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <style>
 5 |             body{
 6 |                 background-color: cornflowerblue;
 7 |                  background-image:url("Nature.jfif");
 8 |                 background-repeat: no-repeat;
 9 |                 background-position:center; 
10 |             }
11 |         </style>
12 |     </head>
13 | <body>
14 | 
15 | <h1 style="background-color:DodgerBlue;">Hello World</h1>
16 | 
17 | <p style="background-color:Tomato;">
18 |    Example for background color.
19 | </p>
20 | 
21 | <p style="color:MediumSeaGreen;">Example for Text color</p>
22 | <h1 style="border:2px solid Violet;">Example for border</h1>
23 | </body>
24 | </html>


--------------------------------------------------------------------------------
/UNIT 1/DESCENDANT_selectors.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Descendant</title>
 5 |     <style>
 6 |   div.items a { 
 7 |   color: green;
 8 |   font-weight: bold;
 9 | }
10 | 
11 | </style>
12 |   </head>
13 |   <body>
14 |     <div class="items">
15 |       <a href="#">Item1</a>
16 |       <a href="#">Item2</a>
17 |       <a href="#">Item3</a>
18 |       <ul>
19 |         <li><a href="#">Item4</a></li>
20 |         <li><a href="#">Item5</a></li>
21 |         <li><a href="#">Item6</a></li>
22 |       </ul>
23 |     </div>
24 |   </body>
25 | </html>


--------------------------------------------------------------------------------
/UNIT 1/External_link.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <head>
 3 |     <title>
 4 |         first prgm
 5 |     </title>
 6 |  <link rel="stylesheet" href="style1.css">
 7 | </head>
 8 | <body>
 9 | <p>hello world</p>
10 | <h1>this is heading</h1>
11 | </body>


--------------------------------------------------------------------------------
/UNIT 1/FunctionReturn.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |     <head>
 3 |         <title>Function</title>
 4 |     </head>
 5 |     <body>
 6 |         <script type ="text/javascript">
 7 |             function average()
 8 |              {
 9 | 	        a=82;
10 |             b=70;
11 |             c=90;
12 |             d=3;
13 |             return (a+b+c)/d;  
14 |              }
15 |              alert("res:"+average());
16 |         </script>
17 |     </body>
18 | </html>


--------------------------------------------------------------------------------
/UNIT 1/Function_Parameter.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <body>
 3 | 	<h1>function parameters</h1>
 4 | 	<script>
 5 | 		function ShowMessage(firstName, lastName) {
 6 | 			alert("Hello " + firstName + lastName);
 7 | 		}
 8 | 		ShowMessage("Tony", "Stark");
 9 |     </script>
10 | </body>
11 | </html>


--------------------------------------------------------------------------------
/UNIT 1/Function_arguments.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <body>
 3 | 	<h1>Arguments</h1>
 4 | 	<script>
 5 |         function ShowMessage(firstName, lastName)
 6 |         {
 7 | 			alert("Hello " + arguments[0] + " " + arguments[1]);
 8 | 		}
 9 | 		ShowMessage("Tony", "Stark"); 
10 | 		ShowMessage("Peter", "Parker");
11 |     </script>
12 | </body>
13 | </html>


--------------------------------------------------------------------------------
/UNIT 1/HTML5_DOC_STRUCT.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>  
 2 | 
 3 | <html>  
 4 |    <head> 
 5 |       <meta charset = "utf-8"> 
 6 |       <title>...</title> 
 7 |    </head> 
 8 |   
 9 |    <body> 
10 |       <header> 
11 |          <h1>HTML5 Document Structure Example</h1> 
12 |          <p>This page should be tried in safari, chrome or Mozila.</p> 
13 |       </header> 
14 |    
15 |       <nav> 
16 |          <ul> 
17 |             <li><a href = "https://www.google.com/">HTML Tutorial</a></li> 
18 |             <li><a href = "https://www.google.com/">CSS Tutorial</a></li> 
19 |             <li><a href = "https://www.google.com/">JavaScript Tutorial</a></li> 
20 |          </ul> 
21 |       </nav> 
22 |    
23 |       <article> 
24 |          <section> 
25 |             <p>Once article can have multiple sections</p>
26 |          </section> 
27 |       </article> 
28 |    
29 |       <aside> 
30 |          <p>This is  aside part of the web page</p> 
31 |       </aside> 
32 | 
33 |       <details>
34 |          <summary>Click To See</summary>
35 |          <p>Hello</p>
36 |      </details> 
37 | 
38 |      <p>This text is <mark>marked</mark</p>
39 | 
40 |       <footer> 
41 |           <p>Content for footer<p>
42 |       </footer> 
43 |    
44 |    </body> 
45 | </html>


--------------------------------------------------------------------------------
/UNIT 1/HTML_Lists.html:
--------------------------------------------------------------------------------
 1 | <!-- <!DOCTYPE html>
 2 |  <html>
 3 | <body>
 4 | 
 5 | <h2>An unordered HTML list</h2>
 6 | 
 7 | <ul>
 8 |   <li>Coffee</li>
 9 |   <li>Tea</li>
10 |   <li>Milk</li>
11 | </ul>  
12 | 
13 | </body>
14 | </html> -->
15 | 
16 | <!-- <!DOCTYPE html>
17 | <html>
18 | <body>
19 | 
20 | <h2>An ordered HTML list</h2>
21 | 
22 | <ol>
23 |   <li>Coffee</li>
24 |   <li>Tea</li>
25 |   <li>Milk</li>
26 | </ol>  
27 | 
28 | </body>
29 | </html>  -->
30 | 
31 | <!DOCTYPE html>
32 | <html>
33 | <body>
34 | 
35 | <h2>A Description List</h2>
36 | 
37 | <dl>
38 |   <dt>Coffee</dt>
39 |   <dd>- black hot drink</dd>
40 |   <dt>Milk</dt>
41 |   <dd>- white cold drink</dd>
42 | </dl>
43 | 
44 | </body>
45 | </html>


--------------------------------------------------------------------------------
/UNIT 1/Hover_example.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <head>
 3 |     <title>First Prgm</title>
 4 |     <style>
 5 |         p{
 6 |             display: none;
 7 |             background-color: crimson;
 8 |             padding: 20px;
 9 |             
10 |         }
11 |         div:hover p{
12 |             display: block;
13 |             font-size: 140%;
14 |         }
15 |     </style>
16 | </head>
17 | <body>
18 |     <div>hi where are you
19 |         <p>Im here!!!</p>
20 |     </div>
21 |     
22 | </body>


--------------------------------------------------------------------------------
/UNIT 1/Image.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html>
2 | <html>
3 | <body>
4 | 
5 | <h2>HTML Image</h2>
6 | <img src="Nature.jfif" alt="its nature" width="500" height="333">
7 | 
8 | </body>
9 | </html>


--------------------------------------------------------------------------------
/UNIT 1/Inheritance.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <head>
 3 |     <title>
 4 |          Inheritance
 5 |     </title>
 6 | </head>
 7 | <body>
 8 |    <script >
 9 |        function Parentclass(){
10 |            this.parent_property1="hi";
11 |            this.parentmethod1=function parentmenthod1(arg1){
12 |                return arg1 +" Parent method 1 ";
13 |            }
14 |        }
15 | 
16 |        function Childclass(){
17 |            this.child_property1="hello";
18 |            this.childmethod1=function childmenthod1(arg1){
19 |                return arg1 +" Childmethod 1 ";
20 |            }
21 |        } 
22 |        Childclass.prototype=new Parentclass();
23 |        var  instance1= new Childclass();
24 |        alert(instance1 instanceof Parentclass);
25 |        alert(instance1 instanceof Childclass);
26 | 
27 |        alert(instance1.parentmethod1("res:"));
28 |        alert(instance1.childmethod1("res:"));
29 |        alert(instance1.parent_property1);
30 |        alert(instance1.child_property1);
31 |       
32 |       
33 |        Childclass.prototype.parentmethod1 = function parentmethod1(arg1)
34 |        {
35 |         return arg1+"   Parent method overridden";
36 |         }
37 |         alert( instance1.parentmethod1("res: ") );
38 |     </script>
39 | 
40 | 
41 | </body>


--------------------------------------------------------------------------------
/UNIT 1/Internalprac.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <style>
 5 | body {
 6 |   background-color: linen;
 7 | }
 8 | 
 9 | h1 {
10 |   color: maroon;
11 |   margin-left: 40px;
12 | }
13 | </style>
14 | </head>
15 | <body>
16 | 
17 | <h1>This is a heading</h1>
18 | <p>This is a paragraph.</p>
19 | 
20 | </body>
21 | </html>


--------------------------------------------------------------------------------
/UNIT 1/JavaScript_Array.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <body>
 4 | 	<h1>Demo: JavaScript Array</h1>
 5 | 	<p id="p1"></p>
 6 | 	<p id="p2"></p>
 7 | 	<p id="p3"></p>
 8 | 	<p id="p4"></p>
 9 | 	<p id="p5"></p>
10 | 		
11 | 	<script>
12 | 		var stringArray = ["one", "two", "three"];
13 | 		var numericArray = [1, 2, 3, 4];
14 | 		var decimalArray = [1.1, 1.2, 1.3];
15 | 		var booleanArray = [true, false, false, true];
16 | 		var mixedArray = [1, "two", "three", 4];
17 | 
18 | 		document.getElementById("p1").innerHTML = stringArray;
19 | 		document.getElementById("p2").innerHTML = numericArray;
20 | 		document.getElementById("p3").innerHTML = decimalArray;
21 | 		document.getElementById("p4").innerHTML = booleanArray;
22 | 		document.getElementById("p5").innerHTML = mixedArray;
23 |     </script>
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/UNIT 1/LET_ex.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <head>
 4 | 
 5 | </head>
 6 | <body>
 7 |     <script>
 8 | function nodeSimplified(){
 9 |   const MY_VARIABLE =10;
10 |   console.log(MY_VARIABLE);  
11 | }
12 |     </script>
13 |    
14 | </body>
15 | </html>


--------------------------------------------------------------------------------
/UNIT 1/Prototypal.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <head>
 3 |     <title>
 4 |         Prototypal 
 5 |     </title>
 6 | </head>
 7 | <body>
 8 |    <script >
 9 |    //Attach property to object
10 | function Student() {
11 |     this.name = 'John';
12 |     this.gender = 'Male';
13 | }
14 | 
15 | var studObj1 = new Student();
16 | studObj1.age = 15;
17 | alert(studObj1.age); // 15
18 | 
19 | var studObj2 = new Student();
20 | alert(studObj2.age); // undefined
21 | 
22 | // prototype
23 | function Student() {
24 |     this.name = 'John';
25 |     this.gender = 'M';
26 | }
27 | 
28 | Student.prototype.age = 15;
29 | 
30 | var studObj1 = new Student();
31 | alert(studObj1.age); // 15
32 | 
33 | var studObj2 = new Student();
34 | alert(studObj2.age); // 15
35 | 
36 | prototype
37 | function Student() {
38 |     this.name = 'John';
39 |     this.gender = 'M';
40 | }
41 | 
42 | var studObj = new Student();
43 | 
44 | console.log(Student.prototype); // object
45 | console.log(studObj.prototype); // undefined
46 | console.log(studObj.__proto__); // object
47 | 
48 | console.log(typeof Student.prototype); // object
49 | console.log(typeof studObj.__proto__); // object
50 | 
51 | console.log(Student.prototype === studObj.__proto__ ); // true
52 |     </script>
53 | 
54 | 
55 | </body>


--------------------------------------------------------------------------------
/UNIT 1/STYLE.CSS:
--------------------------------------------------------------------------------
1 | body {
2 |   background-color: lightblue;
3 | }
4 | 
5 | h1 {
6 |   color: navy;
7 |   margin-left: 20px;
8 | }


--------------------------------------------------------------------------------
/UNIT 1/Span.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <head>
 3 |     <title>
 4 |         Example for Span Tag  
 5 |     </title>
 6 |    
 7 |     <style>
 8 | 
 9 |     </style>
10 | </head>
11 | <body>
12 |   <p> I like<span style="color: blue;"> blue</span> and <span style="color: red;">red</span></p>
13 | 
14 |        
15 |       
16 | </body>


--------------------------------------------------------------------------------
/UNIT 1/TAble_example.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <body>
 4 | 
 5 | <h2>Basic HTML Table</h2>
 6 | 
 7 | <table style="width:100%">
 8 |   <tr>
 9 |     <th>Table_header1</th>
10 |     <th>Table_header2</th> 
11 |     <th>Table_header3</th>
12 |   </tr>
13 |   <tr>
14 |     <td>Table_data1</td>
15 |     <td>Table_data2</td>
16 |     <td>Table_data3</td>
17 |   </tr>
18 |   <tr>
19 |     <td>Table_data1</td>
20 |     <td>Table_data2</td>
21 |     <td>Table_data3</td>
22 |   </tr>
23 |   <tr>
24 |     <td>Table_data1</td>
25 |     <td>Table_data2</td>
26 |     <td>Table_data3</td>
27 |   </tr>
28 | </table>
29 | 
30 | </body>
31 | </html>


--------------------------------------------------------------------------------
/UNIT 1/VistednHover.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <style>
 5 | /* unvisited link */
 6 | a:link {
 7 |   color: rgb(128, 41, 0);
 8 | }
 9 | 
10 | /* visited link */
11 | a:visited {
12 |   color :rebeccapurple;
13 | }
14 | 
15 | /* mouse over link */
16 | a:hover {
17 |   color:palegreen;
18 | }
19 | 
20 | /* selected link */
21 | a:active {
22 |   color:orange;
23 | } 
24 | p{
25 |     font-size: 1cm;
26 |     font-style: italic;
27 | }
28 | </style>
29 | </head>
30 | <body>
31 | <h1>Hello World!</h1>
32 | <p>click the link: <a href="https://www.google.com">Google Home page</a></p>
33 | 
34 | </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/UNIT 1/basicsjs.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <head>
 4 |     <title>Creating Variables in JavaScript</title>
 5 | </head>
 6 | <body>
 7 |     <script>
 8 |     // Creating variables
 9 |     var name = "ABC";
10 |     var age = 21;
11 |     var employee = false;
12 | 
13 |    
14 |     
15 |     // Printing variable values
16 |     document.write(name + "<br>");
17 |     document.write(age + "<br>");
18 |     document.write(employee + "<br>");
19 |         
20 |      // Declaring Variable
21 |      var userName;
22 |      
23 |      // Assigning value
24 |      userName = "AB AB";
25 |      
26 |      // Printing variable values
27 |      document.write(userName + "<br>");
28 | 
29 |          // Declaring multiple Variables
30 |     var name = "ABC", age = 21, employee = false;
31 |     
32 |     // Printing variable values
33 |     document.write(name + "<br>");
34 |     document.write(age + "<br>");
35 |     document.write(employee + "<br>");
36 |     </script>
37 | </body>
38 | </html>
39 | 


--------------------------------------------------------------------------------
/UNIT 1/css.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <style>
 5 | p {
 6 |   color: red;
 7 |   text-align: center;
 8 | } 
 9 | </style>
10 | </head>
11 | <body>
12 | 
13 | <p>Hello World!</p>
14 | <p> CSS</p>
15 | 
16 | </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/UNIT 1/css_table.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>CSS class</title>
 5 |     <style>
 6 |    table  th
 7 |    {
 8 |     color: #36C;
 9 |    font-weight: normal;
10 |    letter-spacing: .4em;
11 |    margin-bottom: 1em;
12 |    text-transform: lowercase;
13 |    }
14 | </style>
15 |   </head>
16 |   <body>
17 |     <h1>Hello World!</h1>
18 |     <p>Welcome to CSS</p>
19 |     
20 |     <table border="10" width=80% >
21 |         <caption>Emp details</caption>
22 |       <tr>
23 |           <th>EmpName</th>
24 |           <th>EmpSal</th>
25 |           <th>Empdesgn</th>
26 |       </tr>
27 |       <tr align="center">
28 |           <td>Raj</td>
29 |           <td>40000</td>
30 |           <td>Manager</td>
31 |       </tr>
32 |       <tr align="center">
33 |           <td>Sam</td>
34 |           <td>10000</td>
35 |           <td>Agent</td>
36 |       </tr>
37 |       <tr align="center">
38 |           <td>Arun</td>
39 |           <td>20000</td>
40 |           <td>Agent</td>
41 |       </tr>
42 |       
43 |     </table>
44 |   </body>
45 | </html>


--------------------------------------------------------------------------------
/UNIT 1/global_var.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <body>
 4 | 	<h1>JavaScript Global scope</h1>
 5 | 	
 6 | 	<script>
 7 | 	 function createUserName() {
 8 |         userName = "Bill";
 9 |     }
10 | 
11 |     function modifyUserName() {
12 |         if(userName)
13 |             userName = "Steve";
14 |     };
15 | 
16 |     function showUserName() {
17 |         alert(userName);  
18 |     }
19 |     
20 |     createUserName();
21 |     showUserName(); 
22 | 
23 |     modifyUserName();
24 |     showUserName();
25 |     </script>
26 | </body>
27 | </html>
28 | 
29 | 
30 | 
31 | 


--------------------------------------------------------------------------------
/UNIT 1/hello.js:
--------------------------------------------------------------------------------
1 | function sayHello(){
2 |     alert("hello");
3 | }
4 | 
5 | document.getElementById("myBtn").onclick=sayHello;
6 | 
7 |   


--------------------------------------------------------------------------------
/UNIT 1/html5_color.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | <title>HTML5 Color Input Type</title>
 5 | <script>
 6 |     function getValue() {
 7 | var color = document.getElementById("mycolor").value;
 8 |         alert(color);
 9 |     }
10 | </script>
11 | </head>
12 | <body>
13 |     <form>
14 |         <label for="mycolor">Select Color:</label>
15 |         <input type="color" value="#00ff00" id="mycolor">
16 |         <button type="button" onclick="getValue();">Get Value</button>
17 |     </form>
18 | </body>
19 | </html>                            


--------------------------------------------------------------------------------
/UNIT 1/html5_inputType.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <head>
 3 |     <title>
 4 |         first prgm
 5 |     </title>
 6 |     <style>
 7 |         h1.a {
 8 |             text-align: center;
 9 |             font-size: 40px;
10 |         }
11 | 
12 |     </style>
13 | </head>
14 | <body>
15 |         <h1 class="a"> Examples of <em>input</em> element in HTML5</h1>
16 |         Date : <input type = "date" name = "newinput" />
17 |          <input type = "submit" value = "submit" />
18 |          <br/>
19 |          <br/>
20 |          Select Number : <input type = "number" min = "0" max = "10"
21 |          value = "5" name = "newinput" />
22 |         <input type = "submit" value = "submit" />
23 |         <br/>
24 |         <br/>
25 |         Select Range : <input type = "range" min = "0" max = "10" 
26 |         value = "5" name = "newinput" />
27 |         <input type = "submit" value = "submit" />
28 |         <br/>
29 |         <br/>
30 |         Enter email : <input type = "email" name = "newinput" />
31 |          <input type = "submit" value = "submit" />
32 |          <br/>
33 |          <br/>
34 |          Enter URL : <input type = "url" name = "newinput" />
35 |          <input type = "submit" value = "submit" />
36 | </body>


--------------------------------------------------------------------------------
/UNIT 1/img_link.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <body>
 4 | 
 5 | <h2>Image as a Link</h2>
 6 | 
 7 | <p>The image below is a link. Try to click on it.</p>
 8 | 
 9 | <a href="https://www.google.com"><img src="ganapa.png" alt="Image not  avaiable" style="width:42px;height:42px;"></a>
10 | 
11 | </body>
12 | </html>


--------------------------------------------------------------------------------
/UNIT 1/inlineprac.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <body>
 4 | 
 5 | <h1 style="color:blue;text-align:center;">This is a heading</h1>
 6 | <p style="color:red;">This is a paragraph.</p>
 7 | 
 8 | </body>
 9 | </html>
10 | 


--------------------------------------------------------------------------------
/UNIT 1/javascript_ex.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <head>
 4 |     <title>JavaScript </title>
 5 | </head>
 6 | <body>
 7 |  <script>
 8 |      var x=10;
 9 |      var y=20;
10 |      var sum=x+y;
11 |      document.write(sum);
12 |  </script>
13 | </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/UNIT 1/letnConst.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Declaring Variables with let and const Keywords in JavaScript</title>
 6 | </head>
 7 | <body>
 8 |     <script>
 9 |     // Declaring variables
10 |     let name = "Harry Potter";
11 |     let age = 11;
12 |     let isStudent = true;
13 |     
14 |     // Printing variable values
15 |     document.write(name + "<br>");
16 |     document.write(age + "<br>");
17 |     document.write(isStudent + "<br>");
18 |     
19 |     // Declaring constant
20 |     const PI = 3.14;
21 |     
22 |     // Printing constant value
23 |     document.write(PI); // 3.14
24 |     
25 |     // Trying to reassign
26 |     PI = 10; // error
27 |     </script>
28 |    
29 | </body>
30 | </html>


--------------------------------------------------------------------------------
/UNIT 1/local_var.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <body>
 4 | 	<h1>JavaScript Global scope</h1>
 5 | 	<p id="error"></p>
 6 | 
 7 | 	<script>
 8 | 		function createUserName() {
 9 | 			var userName = "Bill";
10 | 		}
11 | 
12 | 		function showUserName() {
13 | 			try{
14 | 				alert(userName);
15 | 			}
16 | 			catch(ex)
17 | 			{
18 | 				document.getElementById("error").innerHTML = ex;
19 | 			}
20 | 		}
21 | 
22 | 		createUserName();
23 | 		showUserName(); 
24 | 	</script>
25 | </body>
26 | </html>
27 | 
28 | function fun()
29 | {
30 | 	var temp ="temp is defined in function scope";
31 | 	console.log(temp); 
32 | }
33 | 
34 | fun();
35 | console.log(temp);
36 | 
37 | if(true)
38 | {
39 |   var v1 =10;
40 |   let v2=20;
41 |   console.log(v1);
42 |   console.log(v2); 
43 | }
44 | 
45 | console.log(v1);
46 | console.log(v2);


--------------------------------------------------------------------------------
/UNIT 1/prototype.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <head>
 3 |     <title>
 4 |        Objects
 5 |     </title>
 6 | </head>
 7 | <body>
 8 |    <script >
 9 | function Student() {
10 |     this.name = 'John';
11 |     this.gender = 'M';
12 | }
13 | 
14 | Student.prototype.sayHi = function(){
15 |     alert("Hi");
16 | };
17 | 
18 | var studObj = new Student();
19 | studObj.toString();
20 |  </script>
21 | 
22 | 
23 | </body>


--------------------------------------------------------------------------------
/UNIT 1/pseudo_ex.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <head>
 3 |    <style>
 4 |        /* Simple pseudo-class example */
 5 | /* .first {
 6 |     font-size: 120%;
 7 |     font-weight: bold;
 8 | } */
 9 | 
10 | /* p:first-child {
11 |     font-size: 120%;
12 |     font-weight: bold;
13 | } */
14 | /* pseudo-element selector */
15 | /* p::first-line {
16 |     font-size: 120%;
17 |     font-weight: bold;
18 | }    */
19 |   
20 | /* Combining pseudo-classes and pseudo-elements */
21 | /* p:first-child::first-line {
22 |   font-size: 120%;
23 |   font-weight: bold; */
24 | 
25 |    </style>
26 | 
27 | </head>
28 | <body>
29 |     <p class="first">A journey of thousand miles begins with a single step.
30 |         Howsoever big a task is, it starts with a small step.
31 |         Example: I’m feeling overwhelmed by the prospect of completing 4,000-word paper by next week, but I guess I’ll start by writing 500 words every day. After all, a journey of a thousand miles begins with a single step.</p>
32 | 
33 | <p>This is second Para for p tag.A journey of thousand miles begins with a single step.
34 |     Howsoever big a task is, it starts with a small step.
35 |     Example: I’m feeling overwhelmed by the prospect of completing 4,000-word paper by next week, but I guess I’ll start by writing 500 words every day. After all, a journey of a thousand miles begins with a single step.</p>
36 | </body>


--------------------------------------------------------------------------------
/UNIT 1/screen IO.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 	<html>
 3 | 		<head>
 4 | 			<script>
 5 | 			
 6 | 			alert("This is web tech");
 7 | 			var age=prompt("How old are you?")
 8 | 			age=age+2;
 9 | 			alert("after two year you will be "+ age);
10 | 			 var b=confirm("are you sure this is your age?")
11 | 			 console.log(b);
12 | 			 if(b)
13 | 			 document.write("<h1>Yes my age is "+age+"<h1>" );
14 | 			 document.writeln("<h1>HEllo</h1>")
15 | 			 document.writeln("<h1>World</h1>")
16 | 			
17 | 			</script>
18 | 		
19 | 		</head>
20 | 		<body>
21 | 
22 | 		</body>	
23 | 	</html>


--------------------------------------------------------------------------------
/UNIT 1/screen_output.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Writing into the Browser's Console with JavaScript</title>
 6 | </head>
 7 | <body>
 8 |     <script>
 9 |     // Printing a simple text message
10 |     document.write("Hello World!"); // Prints: Hello World!
11 |    
12 |     // Printing a variable value 
13 |     var x = 10;
14 |     var y = 20;
15 |     var sum = x + y;
16 |     document.write(sum); // Prints: 30
17 |     </script>
18 |     
19 | <p>Example for confirm,prompt and alert.</p>
20 | <script>
21 | {
22 |     confirm("if you want to continue...Press ok!");
23 | }
24 | </script>
25 | <script>
26 |     {
27 |          prompt("What's your favourite actor?");
28 |     }
29 |     </script>
30 |     <script>
31 |         {
32 |           alert("Hello! I am an alert box!");
33 |         }
34 |         </script>
35 |         
36 |     
37 | </body>
38 | </html>


--------------------------------------------------------------------------------
/UNIT 1/table_border.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <style>
 5 | table, th, td {
 6 |   border: 1px solid black;
 7 |   /* border-collapse: collapse; */
 8 | }
 9 | th, td {
10 |   padding: 15px;
11 | }
12 | </style>
13 | </head>
14 | <body>
15 | 
16 | <h2>Table With Border</h2>
17 | 
18 | <p>Use the CSS border property to add a border to the table.</p>
19 | 
20 | <table style="width:100%">
21 |   <tr>
22 |     <th>Firstname</th>
23 |     <th>Lastname</th> 
24 |     <th>Age</th>
25 |   </tr>
26 |   <tr>
27 |     <td>ABC</td>
28 |     <td>qaz</td>
29 |     <td>50</td>
30 |   </tr>
31 |   <tr>
32 |     <td>wsx</td>
33 |     <td>edc</td>
34 |     <td>94</td>
35 |   </tr>
36 |   <tr>
37 |     <td>rfv</td>
38 |     <td>tgb</td>
39 |     <td>80</td>
40 |   </tr>
41 | </table>
42 | 
43 | </body>
44 | </html>
45 | 


--------------------------------------------------------------------------------
/UNIT 1/table_colspan.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <style>
 5 | table, th, td {
 6 |   border: 1px solid black;
 7 |   border-collapse: collapse;
 8 | }
 9 | th, td {
10 |   padding: 5px;
11 |   text-align: left;    
12 | }
13 | </style>
14 | </head>
15 | <body>
16 | 
17 | <h2>Cell that spans two columns</h2>
18 | <p>To make a cell span more than one column, use the colspan attribute.</p>
19 | 
20 | <table style="width:100%">
21 |   <tr>
22 |     <th>Name</th>
23 |     <th colspan="2">Telephone</th>
24 |   </tr>
25 |   <tr>
26 |     <td>Bill Gates</td>
27 |     <td>55577854</td>
28 |     <td>55577855</td>
29 |   </tr>
30 | </table>
31 | 
32 | </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/UNIT 1/table_rowspan.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <style>
 5 | table, th, td {
 6 |   border: 1px solid black;
 7 |   border-collapse: collapse;
 8 | }
 9 | th, td {
10 |   padding: 5px;
11 |   text-align: left;    
12 | }
13 | </style>
14 | </head>
15 | <body>
16 | 
17 | <h2>Cell that spans two rows</h2>
18 | <p>To make a cell span more than one row, use the rowspan attribute.</p>
19 | 
20 | <table style="width:100%">
21 |   <tr>
22 |     <th>Name:</th>
23 |     <td>Bill Gates</td>
24 |   </tr>
25 |   <tr>
26 |     <th rowspan="2">Telephone:</th>
27 |     <td>55577854</td>
28 |   </tr>
29 |   <tr>
30 |     <td>55577855</td>
31 |   </tr>
32 | </table>
33 | 
34 | </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/UNIT 1/varletconst.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Var N Let N const </title>
 6 | </head>
 7 | <body>
 8 |     <script>
 9 | function myFn() {
10 |   let foo = 1;
11 |   foo = 30;
12 |   //let foo = 101;   
13 |   foo = 101;
14 | 
15 |   console.log(foo);  
16 | }
17 | 
18 | myFn();
19 | 
20 | console.log(foo);
21 |     </script>
22 |     
23 | </body>
24 | </html>


--------------------------------------------------------------------------------
/UNIT 1/varnlet.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Var N Let </title>
 6 | </head>
 7 | <body>
 8 |     <script>
 9 | 
10 |     //  Creating variables
11 |     var name = "ABC";
12 |     var age = 21;
13 |     var employee = false;
14 |     
15 |     // Printing variable values
16 |     document.write(name + "<br>");
17 |     document.write(age + "<br>");
18 |     document.write(employee + "<br>");
19 |         
20 |      // Declaring Variable
21 |      var userName;
22 |      
23 |      // Assigning value
24 |      userName = "AB AB";
25 |      
26 |      // Printing variable values
27 |      document.write(userName + "<br>");
28 | 
29 |          // Declaring multiple Variables
30 |     var name = "ABC", age = 21, employee = false;
31 |     
32 |     // Printing variable values
33 |     document.write(name + "<br>");
34 |     document.write(age + "<br>");
35 |     document.write(employee+ "<br>");
36 | 
37 |     </script>
38 |     
39 | </body>
40 | </html>


--------------------------------------------------------------------------------
/UNIT 2/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "liveServer.settings.port": 5501
3 | }


--------------------------------------------------------------------------------
/UNIT 2/ClearTimeout.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <head> </head>
 3 | <body>
 4 |   <script>
 5 |     // program to stop the setTimeout() method
 6 | 
 7 |     let count = 0;
 8 | 
 9 |     // function creation
10 |     function increaseCount() {
11 |       // increasing the count by 1
12 |       count += 1;
13 |       console.log(count);
14 |     }
15 |     let id = setTimeout(increaseCount, 3000);
16 |     // clearTimeout
17 |     clearTimeout(id);
18 |     console.log("setTimeout is stopped.");
19 |   </script>
20 | </body>
21 | 


--------------------------------------------------------------------------------
/UNIT 2/Doc_structure.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>My home page</title>
 5 |   </head>
 6 |   <body>
 7 |     <h1>My home page</h1>
 8 |     <p>Hello, I am Riya and this is my home page.</p>
 9 |     <p>I also wrote a book! Read it <a href="http://www.google.com">here</a>.</p>
10 |   </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/UNIT 2/Document_method.html:
--------------------------------------------------------------------------------
 1 | Examples For Document method
 2 | <html>
 3 |   <head>
 4 |     <title>Change the Background</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       function background() {
 9 |         var color = document.bg.color.value;
10 |         document.body.style.backgroundColor = color;
11 |       }
12 |     </script>
13 |     <form name="bg">
14 |       Type the Color Name:<input type="text" name="color" size="20" /><br />
15 |       Click the Submit Button to change this Background color as your Color.<br />
16 |       <input type="button" value="Submit" onClick="background()" />
17 |     </form>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/UNIT 2/Event_Bubbling.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>Event Bubbling</title>
 6 |   </head>
 7 |   <body>
 8 |     <div id="parent">
 9 |       <button id="child">Click</button>
10 |     </div>
11 | 
12 |     <script>
13 |       var parent = document.querySelector("#parent");
14 |       //  Add click event on parent div
15 |       parent.addEventListener("click", function () {
16 |         console.log("Parent clicked");
17 |       });
18 |       var child = document.querySelector("#child");
19 |       //  Add click event on child button
20 |       child.addEventListener("click", function () {
21 |         console.log("Child clicked");
22 |       });
23 |     </script>
24 |   </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/UNIT 2/Event_Capturing.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>Event Capturing</title>
 6 |   </head>
 7 |   <body>
 8 |     <div id="parent">
 9 |       <button id="child">Click</button>
10 |     </div>
11 | 
12 |     <script>
13 |       var parent = document.querySelector("#parent");
14 |       var child = document.querySelector("#child");
15 |       parent.addEventListener(
16 |         "click",
17 |         function () {
18 |           console.log("Parent clicked");
19 |         },
20 |         true
21 |       );
22 |       child.addEventListener("click", function () {
23 |         console.log("Child clicked");
24 |       });
25 |     </script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/UNIT 2/HTML5_Aud.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <title>HTML5 Page</title>
 5 |     <meta charset="utf-8" />
 6 |   </head>
 7 | 
 8 |   <body>
 9 |     <h1>My First HTML5 Audio page.</h1>
10 |     <!-- <audio src="BTS.mp3" controls></audio>	   -->
11 | 
12 |     <audio id="play" src="BTS.mp3" controls></audio>
13 |     <div>
14 |       <button onclick="document.getElementById('play').play()">Play</button>
15 |       <button onclick="document.getElementById('play').pause()">Pause</button>
16 |       <button onclick="document.getElementById('play').volume += 0.1">Vol+</button>
17 |       <button onclick="document.getElementById('play').volume -= 0.1">Vol-</button>
18 |     </div>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/UNIT 2/HTML5_Video.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>Embedding a YouTube Video in an HTML Page</title>
 6 |   </head>
 7 |   <body>
 8 |     <p>
 9 |       Watch youtube video here:
10 |       <a href="https://www.youtube.com/watch?v=hLrVV2-oJ9g" target="_blank" rel="nofollow">
11 |         https://www.youtube.com/watch?v=hLrVV2-oJ9g</a
12 |       >
13 |     </p>
14 | 
15 |     <video controls="controls" autoplay="on">
16 |       <source src="shuttle.mp4" type="video/mp4" width="600px" height="400px" />
17 | 
18 |       Your browser does not support the HTML5 Video element.
19 |     </video>
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/UNIT 2/HTML5_canvas_1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <body>
 4 |     <canvas id="mycanvas" width="400" height="300"> </canvas>
 5 |     <script>
 6 |       var c = document.querySelector("#mycanvas");
 7 |       var ctx = c.getContext("2d");
 8 |       var grd = ctx.createLinearGradient(0, 0, 320, 240);
 9 | 
10 |       grd.addColorStop(0, "red");
11 |       grd.addColorStop(0.5, "white");
12 |       grd.addColorStop(1, "blue");
13 | 
14 |       ctx.fillStyle = grd;
15 |       ctx.fillRect(0, 0, 400, 300);
16 |     </script>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/UNIT 2/HTML5_contenteditable.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 |   <head>
 5 |     <meta charset="utf-8" />
 6 |     <title>untitled</title>
 7 |   </head>
 8 |   <body>
 9 |     <h2>To-Do List</h2>
10 |     <ul contenteditable="true">
11 |       <li>Break mechanical cab driver.</li>
12 |       <li>Drive to abandoned factory</li>
13 |       <li>Watch video of self</li>
14 |     </ul>
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/UNIT 2/HTML5_email.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |  
 3 | <html lang="en">
 4 |   <head>
 5 |         
 6 |     <meta charset="utf-8" />
 7 |         
 8 |     <title>form</title>
 9 |   </head>
10 |   <body>
11 |         
12 |     <form action="" method="get">
13 |               <label for="email">Email:</label>         <input id="email" name="email" type="email" />  
14 |               <button type="submit">Submit Form</button>     
15 |     </form>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/UNIT 2/ONMOUSEOVER.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script>
 5 |       function hov() {
 6 |         var e = document.getElementById("hover");
 7 |         e.style.display = "none";
 8 |       }
 9 |     </script>
10 |   </head>
11 |   <body>
12 |     <p>The onmouseover Activity</p>
13 |     <div
14 |       id="hover"
15 |       onmouseover="hov()"
16 |       style="background-color: rgb(19, 116, 207); height: 200px; width: 200px"
17 |     ></div>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/UNIT 2/ONMOUSEOVER_OUT.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <head>
 3 |   <title> </title>
 4 | </head>
 5 | <body>
 6 |   <input type="text" id="status" value="Not over the link" />
 7 | 
 8 |   <form>
 9 |     <a
10 |       href=""
11 |       onmouseover="document.getElementById('status').value='Over the link'"
12 |       onmouseout="document.getElementById('status').value='Not over the link'"
13 |       >Move the mouse over me!</a
14 |     >
15 |   </form>
16 | </body>
17 | 


--------------------------------------------------------------------------------
/UNIT 2/Zomato_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adithya-m08/WT-Programs/8f3e37a39ba2ed942fca1b2580f9980a2daf1a7c/UNIT 2/Zomato_logo.png


--------------------------------------------------------------------------------
/UNIT 2/ajaxex.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <head>
 3 |   <title> </title>
 4 | </head>
 5 | <body>
 6 |   <div id="demo">
 7 |     <button type="button" onclick="loadXMLDoc()">Change Content</button>
 8 |   </div>
 9 |   <script>
10 |     function loadXMLDoc() {
11 |       var xhttp = new XMLHttpRequest();
12 |       xhttp.onreadystatechange = function () {
13 |         if (this.readystate == 4 && this.status == 200) {
14 |           document.getElementById("demo").innerHTML = this.responseText;
15 |         }
16 |       };
17 |       xhttp.open("GET", "fun.txt", true);
18 |       xhttp.send();
19 |     }
20 |   </script>
21 | </body>
22 | 


--------------------------------------------------------------------------------
/UNIT 2/callajax.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 5 | <script>
 6 | $(document).ready(function(){
 7 |   $("button").click(function(){
 8 |     $.ajax({url: "fun.txt", success: function(result){
 9 |       $("#div1").html(result);
10 |     }});
11 |   });
12 | });
13 | </script>
14 | </head>
15 | <body>
16 | 
17 | <div id="div1"><h2>Contents displayed here</h2></div>
18 | 
19 | <button>click</button>
20 | 
21 | </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/UNIT 2/canvas.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <head>
 3 |   <title> </title>
 4 | </head>
 5 | <body>
 6 |   <canvas id="myCanvas"></canvas>
 7 |   <script>
 8 |     var canvas = document.getElementById("myCanvas");
 9 |     var ctx = canvas.getContext("2d");
10 |     ctx.fillStyle = "#FF0000";
11 |     ctx.fillRect(0, 0, 80, 80);
12 |   </script>
13 | </body>
14 | 


--------------------------------------------------------------------------------
/UNIT 2/child.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <head>
 3 |     <title>
 4 |       Child_node
 5 |     </title>
 6 | </head>
 7 | <body>
 8 |     <main>
 9 |         <h1>Today's articles</h1>
10 |       
11 |         <article id="article-1">
12 |           <h2 class="a">A chain is only as strong as its weakest link.</h2>
13 |           <section>
14 |             <p>One weak part will render the whole weak..</p>
15 |             <p>No matter how confident the team is, it is as strong as its weakest link – its defence.</p>
16 |           </section>
17 |         </article>
18 |       
19 |         <article id="article-2">
20 |             
21 |           <h2 class="b">All good things come to an end</h2>
22 |           <section>
23 |             <p>Good experiences eventually come to an end...</p>
24 |           </section>
25 |         </article>
26 |         <script>
27 |             let content = document.getElementById('article-2');
28 |             let firstChild = content.firstChild.nodeName;
29 |                 console.log(firstChild);
30 | 
31 |                 let article1 = document.getElementById('article-2');
32 |                     console.log(article1.lastElementChild);
33 |         </script>
34 |       </main>
35 | </body>
36 | 


--------------------------------------------------------------------------------
/UNIT 2/class_qs.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>JavaScript Select Elements with CSS Selectors</title>
 6 |   </head>
 7 |   <body>
 8 |     <ul>
 9 |       <li>Bread</li>
10 |       <li class="tick">Coffee</li>
11 |       <li>Pineapple Cake</li>
12 |     </ul>
13 | 
14 |     <script>
15 |       // Selecting all li elements
16 |       var matches = document.querySelectorAll("ul li");
17 | 
18 |       // Printing the number of selected li elements
19 |       document.write("Number of selected elements: " + matches.length + "<hr>");
20 | 
21 |       // Printing the content of selected li elements
22 |       for (var elem of matches) {
23 |         document.write(elem.innerHTML + "<br>");
24 |       }
25 | 
26 |       // Applying line through style to first li element with class tick
27 |       matches = document.querySelectorAll("ul li.tick");
28 |       matches[0].style.textDecoration = "line-through";
29 |     </script>
30 |   </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/UNIT 2/clientX_Y.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <body>
 4 |     <h2 onclick="coord(event)">client X&Y coordinates and the value</h2>
 5 |     <p id="demo"></p>
 6 | 
 7 |     <script>
 8 |       function coord(event) {
 9 |         var x = event.clientX;
10 |         var y = event.clientY;
11 |         var coords = "X coords: " + x + ", Y coords: " + y;
12 |         document.getElementById("demo").innerHTML = coords;
13 |       }
14 |     </script>
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/UNIT 2/contextmenu_1.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <h1>Context Menu example</h1>
 4 |   </head>
 5 |   <body>
 6 |     <script>
 7 |       document.addEventListener("contextmenu", hideMenu, false);
 8 |       function hideMenu(e) {
 9 |         e.preventDefault();
10 |       }
11 |     </script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/UNIT 2/create_elem1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Creating Elements</title>
 5 |     <meta charset="utf-8" />
 6 |     <style>
 7 |       body {
 8 |         background-color: #0e454c;
 9 |         padding: 30px;
10 |       }
11 |       h1 {
12 |         color: #14fff7;
13 |         font-size: 72px;
14 |         font-family: sans-serif;
15 |         text-decoration: underline;
16 |       }
17 |       p {
18 |         color: #14fff7;
19 |         font-family: sans-serif;
20 |         font-size: 36px;
21 |         font-weight: bold;
22 |       }
23 |     </style>
24 |   </head>
25 | 
26 |   <body>
27 |     <h1>Hello Class!</h1>
28 |     <script>
29 |       let newElement = document.createElement("p");
30 |       let bodyElement = document.querySelector("body");
31 |       newElement.textContent = "Welcome to DOM";
32 |       bodyElement.appendChild(newElement);
33 |     </script>
34 |   </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/UNIT 2/create_element.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>JavaScript Insert New Element into the DOM</title>
 6 |   </head>
 7 |   <body>
 8 |     <div id="main">
 9 |       <h1 id="title">Hello World!</h1>
10 |       <p id="hint">This is a simple paragraph.</p>
11 |     </div>
12 | 
13 |     <button type="button" onclick="insertElement()">Insert Element</button>
14 | 
15 |     <script>
16 |       function insertElement() {
17 |         // Creating a new div element
18 |         var newDiv = document.createElement("div");
19 | 
20 |         // Creating a text node
21 |         var newContent = document.createTextNode("Hi, how are you doing?");
22 | 
23 |         // Adding the text node to the newly created div
24 |         newDiv.appendChild(newContent);
25 | 
26 |         // Adding the newly created element and its content into the DOM
27 |         var currentDiv = document.getElementById("main");
28 |         document.body.appendChild(newDiv, currentDiv);
29 | 
30 |         var currentDiv = document.getElementById("main");
31 |         document.body.insertBefore(newDiv, currentDiv);
32 |       }
33 |     </script>
34 |   </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/UNIT 2/create_element_text.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>DOM Manipulation</title>
 5 |   </head>
 6 |   <body>
 7 |     <p id="paraId">First Paragraph</p>
 8 |     <!-- <div class="container">
 9 |     </div> -->
10 |   </body>
11 |   <script>
12 |     //creating a new element node
13 |     var newElementNode = document.createElement("p");
14 | 
15 |     //creating a new text node
16 |     var newTextNode = document.createTextNode("Text content");
17 |     //   //appending the new text node to the new element node
18 |     //   newElementNode.appendChild(newTextNode);
19 | 
20 |     // //appending the new element node to existing div
21 |     // var div = document.querySelector('.container');
22 |     // div.appendChild(newElementNode);
23 |   </script>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/UNIT 2/create_txtNode.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>createTextNode() Method</title>
 5 |     <style>
 6 |       h1,
 7 |       h2 {
 8 |         color: blue;
 9 |         font-weight: bold;
10 |       }
11 |       body {
12 |         text-align: center;
13 |         background-color: gold;
14 |       }
15 |     </style>
16 |   </head>
17 |   <body>
18 |     <h1>Vacation</h1>
19 |     <h2>TextNode Method</h2>
20 |     <button onclick="fun()">Submit</button>
21 |     <script>
22 |       function fun() {
23 |         var x = document.createTextNode("I enjoy!!");
24 |         document.body.appendChild(x);
25 |       }
26 |     </script>
27 |   </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/UNIT 2/customevent.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>JavaScript Custom Event</title>
 7 |   </head>
 8 |   <body>
 9 |     <div class="note">JS Custom Event</div>
10 |     <script>
11 |       function highlight(elem) {
12 |         const bgColor = "yellow";
13 |         elem.style.backgroundColor = bgColor;
14 | 
15 |         // create the event
16 |         let event = new CustomEvent("highlight", {
17 |           detail: {
18 |             backgroundColor: bgColor,
19 |           },
20 |         });
21 |         // dispatch the event
22 |         elem.dispatchEvent(event);
23 |       }
24 | 
25 |       // Select the div element
26 |       let div = document.querySelector(".note");
27 | 
28 |       // Add border style
29 |       function addBorder(elem) {
30 |         elem.style.border = "solid 1px red";
31 |       }
32 | 
33 |       // Listen to the highlight event
34 |       div.addEventListener("highlight", function (e) {
35 |         addBorder(this);
36 | 
37 |         // examine the background
38 |         console.log(e.detail);
39 |       });
40 | 
41 |       // highlight div element
42 |       highlight(div);
43 |     </script>
44 |   </body>
45 | </html>
46 | 


--------------------------------------------------------------------------------
/UNIT 2/dbclick.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head> </head>
 4 | 
 5 |   <body>
 6 |     <h1 id="heading">Hello world :):)</h1>
 7 |     <h2>Double Click Example.</h2>
 8 |     <p>This is an example of creating the double click event using the <b> addEventListener() method </b>.</p>
 9 |     <script>
10 |       document.getElementById("heading").addEventListener("dblclick", fun);
11 |       function fun() {
12 |         document.getElementById("heading").innerHTML = " Welcome";
13 |       }
14 |     </script>
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/UNIT 2/dom.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <head>
 3 |   <title>DOM</title>
 4 |   <script>
 5 |     function fun() {
 6 |       alert(document.getElementsByName("g")[0].value);
 7 |     }
 8 |   </script>
 9 | </head>
10 | <body>
11 |   <input type="text" name="g" />
12 |   <input type="button" onclick="fun()" value="click" />
13 | </body>
14 | 


--------------------------------------------------------------------------------
/UNIT 2/dowork.js:
--------------------------------------------------------------------------------
1 | self.addEventListener(
2 |   "message",
3 |   function (e) {
4 |     self.postMessage(e.data);
5 |   },
6 |   false
7 | );
8 | 


--------------------------------------------------------------------------------
/UNIT 2/elem_tag1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>JavaScript getElementsByTagName() Demo</title>
 5 |   </head>
 6 |   <body>
 7 |     <h1>JavaScript getElementsByTagName() Demo</h1>
 8 |     <h2>First heading</h2>
 9 |     <p>This is the first paragraph.</p>
10 |     <h2>Second heading</h2>
11 |     <p>This is the second paragraph.</p>
12 |     <h2>Third heading</h2>
13 |     <p>This is the third paragraph.</p>
14 |     <button id="btnCount">Count H2</button>
15 |     <script>
16 |       let btn = document.getElementById("btnCount");
17 |       btn.addEventListener("click", () => {
18 |         let headings = document.getElementsByTagName("h2");
19 |         alert(`The number of H2 tags: ${headings.length}`);
20 |       });
21 |     </script>
22 |   </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/UNIT 2/elment_classname.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head> </head>
 4 |   <body>
 5 |     <p>this is example for Classname</p>
 6 |     <p class="a">I like to travel</p>
 7 | 
 8 |     <p class="a">but solo travelling</p>
 9 |     <p id="b"></p>
10 |     <script>
11 |       var x = document.getElementsByClassName("a");
12 |       document.getElementById("b").innerHTML = " " + x[0].innerHTML;
13 |     </script>
14 |   </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/UNIT 2/elment_id.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Element Accessing</title>
 5 |   </head>
 6 |   <body>
 7 |     <script>
 8 |       function getcube() {
 9 |         var num = document.getElementById("num").value;
10 |         alert(num * num * num);
11 |       }
12 |     </script>
13 |     <form>
14 |       Enter No: <input type="text" id="num" /><br /><br />
15 |       <input type="button" value="Get cube Value" onclick="getcube()" />
16 |     </form>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/UNIT 2/elment_name.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>My home page</title>
 5 |     <style>
 6 |       body {
 7 |         text-align: center;
 8 |       }
 9 |     </style>
10 |     <script>
11 |       function fun() {
12 |         alert(document.getElementsByName("g")[0].value);
13 |       }
14 |     </script>
15 |   </head>
16 |   <body>
17 |     <input type="text" name="g" />
18 |     <br />
19 |     <br />
20 |     <input type="button" onclick="fun()" value="Click here" />
21 |   </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/UNIT 2/elment_tag.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>My home page</title>
 5 |     <style></style>
 6 |   </head>
 7 |   <body>
 8 |     <script>
 9 |       var a = document.getElementsByTagName("body")[0];
10 |       a.style.backgroundColor = "red";
11 |       console.log(a);
12 |     </script>
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/UNIT 2/event_flow.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>JS Event Demo</title>
 5 |   </head>
 6 |   <body>
 7 |     <div id="container">
 8 |       <button id="btn">Click Me!</button>
 9 |     </div>
10 |   </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/UNIT 2/event_hand.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>Random color example — event handler attribute</title>
 6 |     <style>
 7 |       button {
 8 |         margin: 20px;
 9 |       }
10 |     </style>
11 |   </head>
12 |   <body>
13 |     <button>Change color</button>
14 |     <script>
15 |       const btn = document.querySelector("button");
16 | 
17 |       function random(number) {
18 |         return Math.floor(Math.random() * (number + 1));
19 |       }
20 | 
21 |       btn.onclick = function () {
22 |         const rndCol = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
23 |         document.body.style.backgroundColor = rndCol;
24 |       };
25 |     </script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/UNIT 2/event_hand1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>Random color example — event handler attribute</title>
 6 |     <style>
 7 |       button {
 8 |         margin: 10px;
 9 |       }
10 |     </style>
11 |   </head>
12 |   <body>
13 |     <button>Change color</button>
14 |     <script>
15 |       const btn = document.querySelector("button");
16 | 
17 |       function random(number) {
18 |         return Math.floor(Math.random() * number);
19 |       }
20 | 
21 |       function bgChange() {
22 |         const rndCol = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
23 |         document.body.style.backgroundColor = rndCol;
24 |       }
25 | 
26 |       btn.addEventListener("click", bgChange);
27 |       btn.removeEventListener("click", bgChange);
28 |     </script>
29 |   </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/UNIT 2/form.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <title>JavaScript Form Demo</title>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <link rel="stylesheet" href="css/style.css" />
 7 |   </head>
 8 |   <body>
 9 |     <div class="container">
10 |       <form action="signup.html" method="post" id="signup">
11 |         <h1>Sign Up</h1>
12 |         <div class="field">
13 |           <label for="name">Name:</label>
14 |           <input type="text" id="name" name="name" placeholder="Enter your fullname" />
15 |           <small></small>
16 |         </div>
17 |         <div class="field">
18 |           <label for="email">Email:</label>
19 |           <input type="text" id="email" name="email" placeholder="Enter your email address" />
20 |           <small></small>
21 |         </div>
22 |         <div class="field">
23 |           <button type="submit" class="full">Subscribe</button>
24 |         </div>
25 |       </form>
26 |     </div>
27 |     <script src="js/app.js"></script>
28 |   </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/UNIT 2/from_to.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <head>
 3 |   <title> </title>
 4 | </head>
 5 | <body>
 6 |   <script>
 7 |     function printNumbers(from, to) {
 8 |       let current = from;
 9 | 
10 |       let timerId = setInterval(function () {
11 |         alert(current);
12 |         if (current == to) {
13 |           clearInterval(timerId);
14 |         }
15 |         current++;
16 |       }, 1000);
17 |     }
18 | 
19 |     // usage:
20 |     printNumbers(5, 10);
21 |   </script>
22 | </body>
23 | 


--------------------------------------------------------------------------------
/UNIT 2/geoloc.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <title>HTML5 Geo Location</title>
 5 | </head>
 6 | <body>
 7 | 
 8 |     <script>
 9 |         if(navigator.geolocation) {
10 |             alert("geolocation supported")
11 |         }
12 |         else{
13 |         alert("geolocation not supported")
14 |         }  
15 | 
16 |         navigator.geolocation.getCurrentPosition(success,error);
17 |     
18 |     function success(positions){
19 |         
20 |         var lat=positions.coords.latitude;
21 |         var lon=positions.coords.longitude;
22 |         var acc=positions.coords.accuracy;
23 |                                          
24 |         alert("Latitute is " + lat+ ", longitude is  "+ lon + " and accuracy is " + acc );
25 |     }
26 |     
27 |     
28 |     function error(){
29 |         alert("geolocation is denied");
30 |     }
31 |     </script>
32 | </body>
33 | </html
34 | 


--------------------------------------------------------------------------------
/UNIT 2/get_attr.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>JavaScript Get the Value of an Attribute</title>
 6 |   </head>
 7 |   <body>
 8 |     <p><a href="https://www.google.com/" target="_blank" id="myLink">Google</a></p>
 9 | 
10 |     <script>
11 |       // Selecting the element by ID attribute
12 |       var link = document.getElementById("myLink");
13 | 
14 |       // Getting the attributes values
15 |       var href = link.getAttribute("href");
16 |       document.write(href); // Prints: https://www.google.com/
17 |       document.write("<br>");
18 | 
19 |       var target = link.getAttribute("target");
20 |       document.write(target); // Prints: _blank
21 |     </script>
22 |   </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/UNIT 2/getajax.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |             
 3 | <html>
 4 | <head>
 5 |     <meta name="viewport" content="width=device-width" />
 6 | 	<script type="text/javascript" 
 7 |             src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
 8 |     </script>
 9 | 	<script type="text/javascript">
10 |         $(document).ready(function () {
11 | 			
12 | 		 $('#ajaxBtn').click(function(){
13 | 			
14 | 			$.get('fun.txt',  // url
15 |       function (data, textStatus, jqXHR) {  // success callback
16 |           alert('status: ' + textStatus + ', data:' + data);
17 | 
18 | 			});
19 | 		});
20 |     });
21 |     </script>
22 | </head>
23 | <body>
24 | 	<h1> jQuery get() method demo 
25 | 	</h1>
26 | 	<input type="button" id="ajaxBtn" value="Send GET request" />
27 | 	<p>
28 | 	</p>
29 | </body>
30 | </html>


--------------------------------------------------------------------------------
/UNIT 2/getjson.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 5 |     <script>
 6 |       $(document).ready(function () {
 7 |         $("button").click(function () {
 8 |           $.getJSON("sam1.json", function (result) {
 9 |             $.each(result, function (i, field) {
10 |               $("div").append(field + " ");
11 |             });
12 |           });
13 |         });
14 |       });
15 |     </script>
16 |   </head>
17 |   <body>
18 |     <button>Get JSON data</button>
19 | 
20 |     <div></div>
21 |   </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/UNIT 2/html5.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head> </head>
 4 |   <body>
 5 |     <h1>Welcome to HTML5</h1>
 6 |     <header>This is a header tag</header>
 7 |     <footer>This is a header tag</footer>
 8 |   </body>
 9 | </html>
10 | 


--------------------------------------------------------------------------------
/UNIT 2/html5.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adithya-m08/WT-Programs/8f3e37a39ba2ed942fca1b2580f9980a2daf1a7c/UNIT 2/html5.zip


--------------------------------------------------------------------------------
/UNIT 2/html5a.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head> </head>
 4 |   <body>
 5 |     <h1>Welcome to Techinfo</h1>
 6 |     <nav>
 7 |       <a href="#home">Home</a> | <a href="#About">About Us</a> | <a href="#contact">Contact Us</a> |
 8 |       <a href="#our-Clients">Clients</a>
 9 |     </nav>
10 |   </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/UNIT 2/html5b.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |    <title>Article on Indian Startups</title>
 5 |    <style>
 6 |        article{
 7 |            width: 300px;
 8 |            border: 2px solid gray;
 9 |            padding: 10px;
10 |            border-radius: 10px;
11 |            margin: 5px;
12 |        }
13 |     </style>
14 | </head>
15 | <body>
16 |     <article>
17 |         <img src="Zomato_logo.png" width="100%" height="100%" alt="zomato pic">
18 |         <h1>Zomato</h1>
19 |         <p>Deepindar Goyal and Gauvrav Gupta are the co founder of Zomato.
20 |             Zomato recently made its journey to Indian Stock Exchange.
21 |             Zomato has the Market cap of 1L cr which is one of the highest
22 |             in indian start Ups
23 |             <section>
24 |                 <h1>Gaurav Gupta</h1>
25 |                 <p>Gaurav Gupta is from IIT Delhi and also Did his PG in
26 |                     IIM Culcutta.
27 |                     Recendly Gurav Gupta Left Zomato on 13/09/2021
28 |                 </p>
29 |             </section>
30 |         </p>
31 | 
32 | 
33 | 
34 |     </article>
35 | </body>
36 | </html>


--------------------------------------------------------------------------------
/UNIT 2/html5c.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head> </head>
 4 |   <body>
 5 |     <h1>Demo for Output Tag</h1>
 6 |     <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
 7 |       <input type="range" id="a" value="50" />+ <input type="number" id="b" value="35" />=
 8 |       <output name="x" for="a b"></output>
 9 |     </form>
10 |   </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/UNIT 2/html5d.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head> </head>
 4 |   <body>
 5 |     <h1>Detail tag</h1>
 6 |     <details>
 7 |       <summary>About Bounce</summary>
 8 |       <p>
 9 |         Bounce is and Indian Start Up. Founded in Karnataka, A young group from Karnataka, Hassan Malnad College
10 |         Students Founded Bounce in 2008.
11 |       </p>
12 |     </details>
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/UNIT 2/html5e.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head> </head>
 4 |   <body>
 5 |     <!--<video src="Sample.mkv" controls>
 6 |         <p>If your seeing this message b/c your browser does not 
 7 |             support video tag
 8 |         </p>
 9 |     </video>-->
10 |     <audio src="audio2.mp3" controls></audio>
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/UNIT 2/html5f.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Fig Caption</title>
 5 |   </head>
 6 |   <body>
 7 |     <figure>
 8 |       <img src="pic1.jpg" width="50%" height="50%" />
 9 |       <figcaption>Road Image</figcaption>
10 |     </figure>
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/UNIT 2/html5g.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head> </head>
 4 |   <body>
 5 |     <h1>Progress</h1>
 6 |     <progress id="file" value="25" max="100"></progress>
 7 |     <label>Disk Usage</label>
 8 |     <meter id="disk_c" value="0.6">60%</meter>
 9 |     <label>Disk Usage</label>
10 |     <meter id="disk_d" value="4" min="0" max="10"></meter>
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/UNIT 2/html5h.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head> </head>
 4 |   <body>
 5 |     <p>Before canvas</p>
 6 |     <canvas width="120" height="60"></canvas>
 7 |     <p>After Canvas</p>
 8 |     <script>
 9 |       let c = document.querySelector("canvas");
10 |       let context = c.getContext("2d");
11 |       context.fillStyle = "red";
12 |       context.fillRect(10, 10, 100, 50);
13 |     </script>
14 |   </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/UNIT 2/html5i.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head> </head>
 4 |   <body>
 5 |     <svg>
 6 |       <circle r="50" cx="50" cy="50" fill="red" stroke="green"></circle>
 7 |       <rect x="120" y="5" width="90" height="90" fill="none" stroke="blue"></rect>
 8 |     </svg>
 9 |   </body>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/UNIT 2/html5j.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Get My Location</title>
 5 |   </head>
 6 |   <body>
 7 |     <button onclick="geoloc()">Click here to know your location</button>
 8 |     <p id="id1"></p>
 9 |     <script>
10 |       var x = document.getElementById("id1");
11 |       function geoloc() {
12 |         if (navigator.geolocation) {
13 |           navigator.geolocation.getCurrentPosition(showposition);
14 |         } else {
15 |           x.innerHTML = "Geolocation not supported in your browser";
16 |         }
17 |       }
18 |       function showposition(pos) {
19 |         x.innerHTML = "Latitude: " + pos.coords.latitude + "<br> Logitude: " + pos.coords.longitude;
20 |       }
21 |     </script>
22 |   </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/UNIT 2/html5k.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>JS as Single Thread</title>
 5 |     <script>
 6 |       function fun1() {
 7 |         var work = new Worker("sam.js");
 8 |         work.onmessage = function (event) {
 9 |           alert("Loop took" + event.data + " number of times to get exe");
10 |         };
11 |       }
12 |       function fun2() {
13 |         alert("Good Morning Again!!!");
14 |       }
15 |     </script>
16 |   </head>
17 |   <body>
18 |     <input type="submit" onclick="fun1()" value="Click 1" />
19 |     <input type="submit" onclick="fun2()" value="Click 2" />
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/UNIT 2/inline_style.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>JavaScript Add Inline Styles to an Element</title>
 6 |   </head>
 7 |   <body>
 8 |     <p id="intro">This is a paragraph.</p>
 9 |     <p>This is another paragraph.</p>
10 |     <button type="button" onclick="setStyle()">Set intro paragraph styles</button>
11 | 
12 |     <script>
13 |       function setStyle() {
14 |         // Selecting element
15 |         var elem = document.getElementById("intro");
16 | 
17 |         // Appling styles on element
18 |         elem.style.color = "blue";
19 |         elem.style.fontSize = "18px";
20 |         elem.style.fontWeight = "bold";
21 |       }
22 |     </script>
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/UNIT 2/innerHTML.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <body>
 4 |     <p id="demo" onclick="myFunction()">Click me.</p>
 5 | 
 6 |     <script>
 7 |       function myFunction() {
 8 |         document.getElementById("demo").innerHTML = "Hello!";
 9 |       }
10 |     </script>
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/UNIT 2/innerTxt.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>DOM Manipulation</title>
 5 |   </head>
 6 |   <body>
 7 |     <p id="paraId">First Paragraph</p>
 8 |   </body>
 9 |   <script>
10 |     //accessing the node with id="paraId"
11 |     var firstPara = document.querySelector("#paraId");
12 | 
13 |     //updating the text of the node
14 |     firstPara.innerText = "Modified Paragraph";
15 |   </script>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/UNIT 2/insert_Before.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <body>
 4 |     <ul id="myList">
 5 |       <li>Cake</li>
 6 |       <li>Sandwich</li>
 7 |     </ul>
 8 | 
 9 |     <p>Click the button to insert an item to the list.</p>
10 | 
11 |     <button onclick="myFunction()">ClickMe !!!</button>
12 | 
13 |     <script>
14 |       function myFunction() {
15 |         var newItem = document.createElement("li");
16 |         var textnode = document.createTextNode("Ice Cream");
17 |         newItem.appendChild(textnode);
18 | 
19 |         var list = document.getElementById("myList");
20 |         list.insertBefore(newItem, list.childNodes[2]);
21 |       }
22 |     </script>
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/UNIT 2/jq_aj_fetch.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Fetch</title>
 5 |     <script>
 6 |       var resp;
 7 |       function fetchdata() {
 8 |         mydiv = document.querySelector("#container");
 9 |         fetch("shuttle.mp4") // returns a promise that resolves on response object
10 |           .then(function (response) {
11 |             resp = response;
12 |             return response.text(); // returns a promise that resolves on text response
13 |             // other alternatives
14 |             // response.json()
15 |             // response.blob()
16 |           })
17 |           .then(function (text) {
18 |             mydiv.innerHTML = text;
19 | 
20 |             /*	mydiv.innerHTML = obj.srn; */
21 | 
22 |             /*	vid = document.createElement("video");
23 | 					vid.controls = true;
24 | 					vid.src = URL.createObjectURL(obj);
25 | 					mydiv.appendChild(vid); 
26 | 				*/
27 |           })
28 |           .catch(function (error) {
29 |             console.log(error.message);
30 |           });
31 |       }
32 |     </script>
33 |   </head>
34 |   <body>
35 |     <button onclick="fetchdata()">Fetch Data</button>
36 |     <div id="container"></div>
37 |   </body>
38 | </html>
39 | 


--------------------------------------------------------------------------------
/UNIT 2/jyp_ON.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <head>
 3 |   <title>DOM</title>
 4 |   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 5 |   <style>
 6 |     p {
 7 |       padding: 20px;
 8 |       font: 20px sans-serif;
 9 |       background-color: aqua;
10 |     }
11 |   </style>
12 |   <script>
13 |     $("p").on("click", function () {
14 |       console.log("click");
15 |     });
16 |   </script>
17 | </head>
18 | <body>
19 |   <p>on method is useful for binding the same handler function to multiple events</p>
20 |   <button>click</button>
21 | </body>
22 | 


--------------------------------------------------------------------------------
/UNIT 2/jyp_animate.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>animate demo</title>
 6 |     <style>
 7 |       div {
 8 |         background-color: #bca;
 9 |         width: 100px;
10 |         border: 1px solid green;
11 |       }
12 |     </style>
13 |     <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
14 |   </head>
15 |   <body>
16 |     <button id="go">Run</button>
17 |     <div id="block">Hello!</div>
18 | 
19 |     <script>
20 |       // Using multiple unit types within one animation.
21 | 
22 |       $("#go").click(function () {
23 |         $("#block").animate(
24 |           {
25 |             width: "70%",
26 |             opacity: 0.4,
27 |             marginLeft: "0.6in",
28 |             fontSize: "3em",
29 |             borderWidth: "10px",
30 |           },
31 |           1500
32 |         );
33 |       });
34 |     </script>
35 |   </body>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/UNIT 2/jyp_animate1.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>animate demo</title>
 6 |     <style>
 7 |       div {
 8 |         position: relative;
 9 |         background-color: #abc;
10 |         width: 40px;
11 |         height: 40px;
12 |         float: left;
13 |         margin: 5px;
14 |       }
15 |     </style>
16 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
17 |   </head>
18 |   <body>
19 |     <p><button id="go">Run »</button></p>
20 |     <div class="block"></div>
21 |     <div class="block"></div>
22 |     <div class="block"></div>
23 |     <div class="block"></div>
24 |     <div class="block"></div>
25 |     <div class="block"></div>
26 | 
27 |     <script>
28 |       $("#go").click(function () {
29 |         $(".block")
30 |           .first()
31 |           .animate(
32 |             {
33 |               left: 100,
34 |             },
35 |             {
36 |               duration: 1000,
37 |               step: function (now, fx) {
38 |                 $(".block").slice(20).css("left", now);
39 |               },
40 |             }
41 |           );
42 |       });
43 |     </script>
44 |   </body>
45 | </html>
46 | 


--------------------------------------------------------------------------------
/UNIT 2/jyp_append.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>Append</title>
 6 |     <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 7 |     <script>
 8 |       $(document).ready(function () {
 9 |         // Append all paragraphs on document ready
10 |         $("p").append(' <a href="#">read more...</a>');
11 |       });
12 |     </script>
13 |   </head>
14 |   <body>
15 |     <p>I like to reading...</p>
16 |     <p>But not everyday...</p>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/UNIT 2/jyp_appendto.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 5 |     <script>
 6 |       $(document).ready(function () {
 7 |         $("button").click(function () {
 8 |           $("<span><b>Hello class</b></span>").appendTo("p");
 9 |         });
10 |       });
11 |     </script>
12 |   </head>
13 |   <body>
14 |     <button>Add new content at the end of each p element</button>
15 |     <p>I am a new reader.</p>
16 |     <p>I am also a new reader.</p>
17 |   </body>
18 | </html>
19 | <!-- append  and appendto -->
20 | 


--------------------------------------------------------------------------------
/UNIT 2/jyp_before_after.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 5 |     <style>
 6 |       img {
 7 |         width: fit-content;
 8 |       }
 9 |     </style>
10 |     <script>
11 |       $(document).ready(function () {
12 |         $("#btn1").click(function () {
13 |           $("img").before("<b>Before</b>");
14 |         });
15 | 
16 |         $("#btn2").click(function () {
17 |           $("img").after("<i>After</i>");
18 |         });
19 |       });
20 |     </script>
21 |   </head>
22 |   <body>
23 |     <img src="travel.jpeg" alt="travelwoman" width="100" height="140" /><br /><br />
24 | 
25 |     <button id="btn1">Insert before</button>
26 |     <button id="btn2">Insert after</button>
27 |   </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/UNIT 2/jyp_callback.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>Example of jQuery Effect Method without Callback Function</title>
 6 |     <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
 7 |     <style>
 8 |       p {
 9 |         background: yellow;
10 |         font-size: 24px;
11 |         padding: 20px;
12 |       }
13 |     </style>
14 |     <script>
15 |       $(document).ready(function () {
16 |         $("button").click(function () {
17 |           $("p").slideToggle("slow", alert("hello"));
18 |           // alert("The slide toggle effect has completed.");
19 |         });
20 |       });
21 |     </script>
22 |   </head>
23 |   <body>
24 |     <p>This is paragraph.</p>
25 |     <button type="button">Click me</button>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/UNIT 2/jyp_chaining.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
 5 |     <script>
 6 |       $(document).ready(function () {
 7 |         $("button").click(function () {
 8 |           $("p").slideDown(5000).css("font-size", "1.5em").slideUp(5000);
 9 |         });
10 |       });
11 |     </script>
12 |   </head>
13 |   <body>
14 |     <h2>jQuery chaning example</h2>
15 |     <p style="display: none">
16 |       This example is for chaning. This para will appear when you click on the Show Me! button with an increased
17 |       font size.
18 |     </p>
19 |     <button>Show Me!</button>
20 |   </body>
21 | </html>
22 | 
23 | <!-- the slideDown() effect and the slideUp() effect in a single line. 
24 |   This will make the paragraph appear  and then disappear with a 
25 |   slide down and slide up effects respectively. -->
26 | 


--------------------------------------------------------------------------------
/UNIT 2/jyp_chaining_1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>Example of jQuery Method Chaining</title>
 6 |     <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
 7 |     <style>
 8 |       /* Some custom styles to beautify this example */
 9 |       p {
10 |         width: 200px;
11 |         padding: 40px 0;
12 |         font: bold 24px sans-serif;
13 |         text-align: center;
14 |         background: #aaccaa;
15 |         border: 1px solid #63a063;
16 |         box-sizing: border-box;
17 |       }
18 |     </style>
19 |     <script>
20 |       $(document).ready(function () {
21 |         $(".start").click(function () {
22 |           $("p").animate({ width: "100%" }).animate({ fontSize: "46px" }).animate({ borderWidth: 30 });
23 |         });
24 |         $(".reset").click(function () {
25 |           $("p").removeAttr("style");
26 |         });
27 |       });
28 |     </script>
29 |   </head>
30 |   <body>
31 |     <p>Hello World!</p>
32 |     <button type="button" class="start">Start Chaining</button>
33 |     <button type="button" class="reset">Reset</button>
34 |   </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/UNIT 2/jyp_change.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 5 |     <script>
 6 |       $(document).ready(function () {
 7 |         $("select").change(function () {
 8 |           var selectedOption = $(this).find(":selected").val();
 9 |           alert("You have selected - " + selectedOption);
10 |         });
11 |       });
12 |     </script>
13 |   </head>
14 |   <body>
15 |     <form>
16 |       <label>City:</label>
17 |       <select>
18 |         <option>London</option>
19 |         <option>Paris</option>
20 |         <option>New York</option>
21 |       </select>
22 |     </form>
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/UNIT 2/jyp_classSel.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <head>
 3 |   <title> </title>
 4 |   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 5 | 
 6 |   <script>
 7 |     $(document).ready(function () {
 8 |       $("button").click(function () {
 9 |         $(".a").css("background-color", "blue");
10 |       });
11 |     });
12 |   </script>
13 | </head>
14 | <body>
15 |   <h1 class="a">hello</h1>
16 |   <h3 class="a">Class</h3>
17 |   <p>hi</p>
18 |   <button class="a">click</button>
19 | </body>
20 | 


--------------------------------------------------------------------------------
/UNIT 2/jyp_click.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <head>
 3 |   <title> </title>
 4 |   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 5 |   <style>
 6 |     p {
 7 |       padding: 20px;
 8 |       font: 20px sans-serif;
 9 |       background-color: aquamarine;
10 |     }
11 |   </style>
12 |   <script>
13 |     $(document).ready(function () {
14 |       $("p").click(function () {
15 |         $(this).slideUp();
16 |       });
17 |     });
18 |   </script>
19 | </head>
20 | <body>
21 |   <p>Click on me and I'll disappear.</p>
22 |   <p>Click on me and I'll disappear.</p>
23 |   <p>Click on me and I'll disappear.</p>
24 | </body>
25 | 


--------------------------------------------------------------------------------
/UNIT 2/jyp_css.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 5 |     <script>
 6 |       $(document).ready(function () {
 7 |         $("button").click(function () {
 8 |           $("p").css({ "background-color": "yellow", "font-size": "200%" });
 9 |         });
10 |       });
11 |     </script>
12 |   </head>
13 |   <body>
14 |     <h2>This is a heading</h2>
15 | 
16 |     <p style="background-color: #ff0000">This is a paragraph.</p>
17 |     <p style="background-color: #00ff00">This is a paragraph.</p>
18 |     <p style="background-color: #0000ff">This is a paragraph.</p>
19 | 
20 |     <p>This is a paragraph.</p>
21 | 
22 |     <button>Set multiple styles for p</button>
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/UNIT 2/jyp_delay.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>delay demo</title>
 6 |     <style>
 7 |       div {
 8 |         position: absolute;
 9 |         width: 60px;
10 |         height: 60px;
11 |         float: left;
12 |       }
13 |       .first {
14 |         background-color: #3f3;
15 |         left: 0;
16 |       }
17 |       .second {
18 |         background-color: #33f;
19 |         left: 80px;
20 |       }
21 |     </style>
22 |     <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
23 |   </head>
24 |   <body>
25 |     <p><button>Run</button></p>
26 |     <div class="first"></div>
27 |     <div class="second"></div>
28 | 
29 |     <script>
30 |       $("button").clicka(function () {
31 |         $("div.first").slideUp(300).delay(800).fadeIn(400);
32 |         $("div.second").slideUp(300).fadeIn(400);
33 |       });
34 |     </script>
35 |   </body>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/UNIT 2/jyp_double-click.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 5 |     <script>
 6 |       $(document).ready(function () {
 7 |         $("p").dblclick(function () {
 8 |           $(this).hide();
 9 |         });
10 |       });
11 |     </script>
12 |   </head>
13 |   <body>
14 |     <p>If you double-click on me, I will disappear.</p>
15 |     <p>Click me away!</p>
16 |     <p>Click me too!</p>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/UNIT 2/jyp_element_class.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <head>
 3 |   <title> </title>
 4 |   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 5 |   <script>
 6 |     $(document).ready(function () {
 7 |       $("button").click(function () {
 8 |         $("p.main").css("background-color", "red");
 9 |       });
10 |     });
11 |   </script>
12 | </head>
13 | <body>
14 |   <h1>hello</h1>
15 |   <h3>Class</h3>
16 |   <p class="main">hi</p>
17 |   <p class="main">what doing</p>
18 |   <button>click</button>
19 | </body>
20 | 


--------------------------------------------------------------------------------
/UNIT 2/jyp_element_sel.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <head>
 3 |   <title> </title>
 4 |   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 5 |   <script>
 6 |     $(document).ready(function () {
 7 |       $("button").click(function () {
 8 |         $("p").hide();
 9 |       });
10 |     });
11 |   </script>
12 | </head>
13 | <body>
14 |   <h1>hello</h1>
15 |   <h3>Class</h3>
16 |   <p>hi</p>
17 |   <button>click</button>
18 | </body>
19 | 


--------------------------------------------------------------------------------
/UNIT 2/jyp_fadein.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>fadeIn demo</title>
 6 |     <style>
 7 |       span {
 8 |         color: red;
 9 |         cursor: pointer;
10 |       }
11 |       div {
12 |         margin: 3px;
13 |         width: 80px;
14 |         display: none;
15 |         height: 80px;
16 |         float: left;
17 |       }
18 |       #one {
19 |         background: #f00;
20 |       }
21 |       #two {
22 |         background: #0f0;
23 |       }
24 |       #three {
25 |         background: #00f;
26 |       }
27 |     </style>
28 |     <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
29 |   </head>
30 |   <body>
31 |     <span>Click here...</span>
32 |     <div id="one"></div>
33 |     <div id="two"></div>
34 |     <div id="three"></div>
35 | 
36 |     <script>
37 |       $(document.body).click(function () {
38 |         $("div:hidden").first().fadeIn("slow");
39 |       });
40 |     </script>
41 |   </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/UNIT 2/jyp_fadeout.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>fadeOut demo</title>
 6 |     <style>
 7 |       p {
 8 |         font-size: 150%;
 9 |         cursor: pointer;
10 |       }
11 |     </style>
12 |     <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
13 |   </head>
14 |   <body>
15 |     <p>If you click on this paragraph you'll see it just fade away.</p>
16 | 
17 |     <script>
18 |       $("p").click(function () {
19 |         $("p").fadeOut("slow");
20 |       });
21 |     </script>
22 |   </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/UNIT 2/jyp_fadeout_span.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>fadeOut demo</title>
 6 |     <style>
 7 |       span {
 8 |         cursor: pointer;
 9 |       }
10 |       span.hilite {
11 |         background: yellow;
12 |       }
13 |       div {
14 |         display: inline;
15 |         color: red;
16 |       }
17 |     </style>
18 |     <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
19 |   </head>
20 |   <body>
21 |     <h3>
22 |       Find the modifiers -
23 |       <div></div>
24 |     </h3>
25 |     <p>
26 |       If you <span>really</span> want to go outside <span>in the cold</span> then make sure to wear your
27 |       <span>warm</span> jacket given to you by your <span>favorite</span> teacher.
28 |     </p>
29 | 
30 |     <script>
31 |       $("span").click(function () {
32 |         $(this).fadeOut(1000, function () {
33 |           $("div").text("'" + $(this).text() + "' has faded!");
34 |           $(this).remove();
35 |         });
36 |       });
37 |       $("span").hover(
38 |         function () {
39 |           $(this).addClass("hilite");
40 |         },
41 |         function () {
42 |           $(this).removeClass("hilite");
43 |         }
44 |       );
45 |     </script>
46 |   </body>
47 | </html>
48 | 


--------------------------------------------------------------------------------
/UNIT 2/jyp_filter.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>filter demo</title>
 6 |     <style>
 7 |       div {
 8 |         width: 60px;
 9 |         height: 60px;
10 |         margin: 5px;
11 |         float: left;
12 |         border: 2px white solid;
13 |       }
14 |     </style>
15 |     <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
16 |   </head>
17 |   <body>
18 |     <div></div>
19 |     <div class="middle"></div>
20 |     <div class="middle"></div>
21 |     <div class="middle"></div>
22 |     <div class="middle"></div>
23 |     <div></div>
24 | 
25 |     <!-- <script>
26 | $( "div" )
27 |   .css( "background", "#c8ebcc" )
28 |   .filter( ".middle" )
29 |     .css( "border-color", "red" );
30 | </script> -->
31 | 
32 |     <script>
33 |       $("div").css("background", "#c8ebcc").last().css("border-color", "red");
34 |     </script>
35 |   </body>
36 | </html>
37 | 
38 | <!-- <script>
39 |     $( "div" )
40 |       .css( "background", "#c8ebcc" )
41 |       .first(  )
42 |         .css( "border-color", "red" );
43 | </script> -->
44 | 


--------------------------------------------------------------------------------
/UNIT 2/jyp_filter_eq.htm:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>eq demo</title>
 6 |   <style>
 7 |   div {
 8 |     width: 60px;
 9 |     height: 60px;
10 |     margin: 10px;
11 |     float: left;
12 |     border: 2px solid blue;
13 |   }
14 |   .blue {
15 |     background: blue;
16 |   }
17 |   </style>
18 |   <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
19 | </head>
20 | <body>
21 |  
22 | <div></div>
23 | <div class="middle"></div>
24 | <div class="middle"></div>
25 | <div class="middle"></div>
26 | <div class="middle"></div>
27 | <div></div>
28 |  
29 | <script>
30 | $( "div" )
31 |   .css( "background", "#c8ebcc" )
32 |   .filter( ".middle" )
33 |     .css( "border-color", "red" );
34 | </script>
35 |  
36 | </body>
37 | </html>
38 | 
39 | 
40 | <script>
41 |     $( "div" )
42 |       .css( "background", "#c8ebcc" )
43 |       .first(  )
44 |         .css( "border-color", "red" );
45 |     </script>
46 |      
47 |     </body>
48 |     </html>


--------------------------------------------------------------------------------
/UNIT 2/jyp_focus.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 5 |     <script>
 6 |       $(document).ready(function () {
 7 |         $("input").focus(function () {
 8 |           $(this).css("background-color", "yellow");
 9 |         });
10 |         $("input").blur(function () {
11 |           $(this).css("background-color", "green");
12 |         });
13 |       });
14 |     </script>
15 |   </head>
16 |   <body>
17 |     Name: <input type="text" name="fullname" /><br />
18 |     Email: <input type="text" name="email" />
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/UNIT 2/jyp_form.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 5 |     <script>
 6 |       $(document).ready(function () {
 7 |         $("form").submit(function () {
 8 |           alert("form is submitted.");
 9 |         });
10 |       });
11 |     </script>
12 |   </head>
13 |   <body>
14 |     <form action="">
15 |       Your Name: <input type="text" name="name" value="ABC" /><br />
16 |       Your Age: <input type="text" name="age" value="21" /><br /><br />
17 |       <input type="submit" value="Submit" />
18 |     </form>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/UNIT 2/jyp_hide_show.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 5 |     <script>
 6 |       $(document).ready(function () {
 7 |         $("#hide").click(function () {
 8 |           $("p").hide();
 9 |         });
10 |         $("#show").click(function () {
11 |           $("p").show();
12 |         });
13 |       });
14 |     </script>
15 |   </head>
16 |   <body>
17 |     <h2>jQuery show and hide example</h2>
18 |     <p>Welcome to Class</p>
19 |     <button id="hide">hide</button>
20 |     <button id="show">show</button>
21 |   </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/UNIT 2/jyp_hover.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 5 |     <style>
 6 |       p {
 7 |         padding: 20px;
 8 |         font: 20px sans-serif;
 9 |         background: #f2f2f2;
10 |       }
11 |       p.highlight {
12 |         background: yellow;
13 |       }
14 |     </style>
15 |     <script>
16 |       $(document).ready(function () {
17 |         $("p").hover(
18 |           function () {
19 |             $(this).addClass("highlight");
20 |           },
21 |           function () {
22 |             $(this).removeClass("highlight");
23 |           }
24 |         );
25 |       });
26 |     </script>
27 |   </head>
28 |   <body>
29 |     <p>hover over me</p>
30 |   </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/UNIT 2/jyp_load.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 5 |     <script>
 6 |       $(document).ready(function () {
 7 |         $("img").load(function () {
 8 |           alert("Image loaded.");
 9 |         });
10 |       });
11 |     </script>
12 |   </head>
13 |   <body>
14 |     <img src="pic2.jpg" alt="good morning" />
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/UNIT 2/jyp_mouse_enter_leave.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <head>
 3 |   <title> </title>
 4 |   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 5 |   <style>
 6 |     p {
 7 |       padding: 20px;
 8 |       text-decoration: solid;
 9 |       font-size: larger;
10 |     }
11 |   </style>
12 |   <script>
13 |     $(document).ready(function () {
14 |       $("p").on({
15 |         mouseenter: function () {
16 |           $(this).css("background-color", "Blue");
17 |         },
18 |         mouseleave: function () {
19 |           $(this).css("background-color", "red");
20 |         },
21 |         click: function () {
22 |           $(this).css("background-color", "yellow");
23 |         },
24 |       });
25 |     });
26 |   </script>
27 | </head>
28 | <body>
29 |   <p id="p1">hi this is for mouseenter and mouseleave</p>
30 | </body>
31 | 


--------------------------------------------------------------------------------
/UNIT 2/jyp_mouseenter.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 5 |     <script>
 6 |       $(document).ready(function () {
 7 |         $("#p1").mouseenter(function () {
 8 |           alert("Welcome to Class");
 9 |         });
10 |       });
11 |     </script>
12 |   </head>
13 |   <body>
14 |     <p id="p1">Keep cursor over me</p>
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/UNIT 2/jyp_mouseup.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <head>
 3 |   <title> </title>
 4 |   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 5 |   <style></style>
 6 |   <script>
 7 |     $(document).ready(function () {
 8 |       $("button").mousedown(function () {
 9 |         alert("Button was clicked");
10 |       });
11 |     });
12 |   </script>
13 | </head>
14 | <body>
15 |   <p>example for mouse up</p>
16 |   <button>clicked</button>
17 | </body>
18 | 


--------------------------------------------------------------------------------
/UNIT 2/jyp_multiple.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <head>
 3 |   <title> </title>
 4 |   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 5 |   <script>
 6 |     $(document).ready(function () {
 7 |       $("button").click(function () {
 8 |         $(".a,.b").hide();
 9 |       });
10 |     });
11 |   </script>
12 | </head>
13 | <body>
14 |   <h1 class="a">hello</h1>
15 |   <h3 class="b">Class</h3>
16 |   <p>hi</p>
17 |   <button class="a">click</button>
18 | </body>
19 | 


--------------------------------------------------------------------------------
/UNIT 2/jyp_multiple_elememts.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <head>
 3 |   <title> </title>
 4 |   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 5 |   <script>
 6 |     $(document).ready(function () {
 7 |       $("button").click(function () {
 8 |         $("h3,a,button").css("background-color", "yellow");
 9 |       });
10 |     });
11 |   </script>
12 | </head>
13 | <body>
14 |   <h1>hello</h1>
15 |   <h3>Class</h3>
16 |   <p>hi</p>
17 |   <p>
18 |     This article is published on
19 |     <a href="https://google.com">welcome to google</a>
20 |     website
21 |   </p>
22 |   <p>what doing</p>
23 |   <button>click</button>
24 | </body>
25 | 


--------------------------------------------------------------------------------
/UNIT 2/jyp_post.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>jQuery.post demo</title>
 6 |     <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
 7 |   </head>
 8 |   <body>
 9 |     <script>
10 |       $.post(
11 |         "test.php",
12 |         { func: "getNameAndTime" },
13 |         function (data) {
14 |           console.log(data.name); // John
15 |           console.log(data.time); // 2pm
16 |         },
17 |         "json"
18 |       );
19 |     </script>
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/UNIT 2/jyp_post1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>jQuery.post demo</title>
 6 |     <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
 7 |   </head>
 8 |   <body>
 9 |     <form action="/" id="searchForm">
10 |       <input type="text" name="s" placeholder="Search..." />
11 |       <input type="submit" value="Search" />
12 |     </form>
13 |     <!-- the result of the search will be rendered inside this div -->
14 |     <div id="result"></div>
15 | 
16 |     <script>
17 |       // Attach a submit handler to the form
18 |       $("#searchForm").submit(function (event) {
19 |         // Stop form from submitting normally
20 |         event.preventDefault();
21 | 
22 |         // Get some values from elements on the page:
23 |         var $form = $(this),
24 |           term = $form.find("input[name='s']").val(),
25 |           url = $form.attr("action");
26 | 
27 |         // Send the data using post
28 |         var posting = $.post(url, { s: term });
29 | 
30 |         // Put the results in a div
31 |         posting.done(function (data) {
32 |           var content = $(data).find("#content");
33 |           $("#result").empty().append(content);
34 |         });
35 |       });
36 |     </script>
37 |   </body>
38 | </html>
39 | 


--------------------------------------------------------------------------------
/UNIT 2/jyp_setter.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>jQuery Set Form Fields Values</title>
 6 |     <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
 7 |     <script>
 8 |       $(document).ready(function () {
 9 |         $("button").click(function () {
10 |           var text = $(this).text();
11 |           $('input[type="text"]').val(text);
12 |         });
13 |       });
14 |     </script>
15 |   </head>
16 |   <body>
17 |     <button type="button">Mint Chocolate Chip</button>
18 |     <button type="button">Chocolate Brownie</button>
19 |     <button type="button">Kulfi</button>
20 |     <p><strong>Note:</strong> Click the above buttons to set the value of following input box.</p>
21 |     <p>
22 |       <input type="text" />
23 |     </p>
24 |   </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/UNIT 2/jyp_show.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>show demo</title>
 6 |     <style>
 7 |       p {
 8 |         background: yellow;
 9 |       }
10 |     </style>
11 |     <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
12 |   </head>
13 |   <body>
14 |     <button>Show it</button>
15 |     <p style="display: none">Hello...</p>
16 | 
17 |     <script>
18 |       $("button").click(function () {
19 |         $("p").show("fast");
20 |       });
21 |     </script>
22 |   </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/UNIT 2/jyp_show1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>show demo</title>
 6 |     <style>
 7 |       div {
 8 |         background: #def3ca;
 9 |         margin: 3px;
10 |         width: 80px;
11 |         display: none;
12 |         float: left;
13 |         text-align: center;
14 |       }
15 |     </style>
16 |     <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
17 |   </head>
18 |   <body>
19 |     <button id="showr">Show</button>
20 |     <button id="hidr">Hide</button>
21 |     <div>Hello ,</div>
22 |     <div>how</div>
23 |     <div>are</div>
24 |     <div>you?</div>
25 | 
26 |     <script>
27 |       $("#showr").click(function () {
28 |         $("div")
29 |           .first()
30 |           .show("fast", function showNext() {
31 |             $(this).next("div").show("fast", showNext);
32 |           });
33 |       });
34 | 
35 |       $("#hidr").click(function () {
36 |         $("div").hide(1000);
37 |       });
38 |     </script>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/UNIT 2/jyp_slideDown.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>slideDown demo</title>
 6 |     <style>
 7 |       div {
 8 |         background-color: chartreuse;
 9 |         margin: 3px;
10 |         width: 80px;
11 |         height: 40px;
12 |         display: none;
13 |         float: left;
14 |       }
15 |     </style>
16 |     <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
17 |   </head>
18 |   <body>
19 |     Click me!
20 |     <div></div>
21 |     <div></div>
22 |     <div></div>
23 | 
24 |     <script>
25 |       $(document.body).click(function () {
26 |         if ($("div").first().is(":hidden")) {
27 |           $("div").slideDown("slow");
28 |         } else {
29 |           $("div").hide();
30 |         }
31 |       });
32 |     </script>
33 |   </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/UNIT 2/jyp_slideUp.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>slideUp demo</title>
 6 |     <style>
 7 |       div {
 8 |         margin: 2px;
 9 |       }
10 |     </style>
11 |     <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
12 |   </head>
13 |   <body>
14 |     <div>
15 |       <button>Hide One</button>
16 |       <input type="text" value="One" />
17 |     </div>
18 | 
19 |     <div>
20 |       <button>Hide Two</button>
21 |       <input type="text" value="Two" />
22 |     </div>
23 | 
24 |     <div>
25 |       <button>Hide Three</button>
26 |       <input type="text" value="Three" />
27 |     </div>
28 | 
29 |     <div id="msg"></div>
30 | 
31 |     <script>
32 |       $("button").click(function () {
33 |         $(this)
34 |           .parent()
35 |           .slideUp("slow", function () {
36 |             $("#msg").text($("button", this).text() + " has completed.");
37 |           });
38 |       });
39 |     </script>
40 |   </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/UNIT 2/jyp_toogle.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>toggle demo</title>
 6 |     <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
 7 |   </head>
 8 |   <body>
 9 |     <button>Toggle</button>
10 |     <p>Hello</p>
11 |     <p style="display: none">Good Bye</p>
12 | 
13 |     <script>
14 |       $("button").click(function () {
15 |         $("p").toggle();
16 |       });
17 |     </script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/UNIT 2/key_Uppercase.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <body>
 3 |     <h1>KeyUp Event</h1>
 4 | 
 5 |     <label
 6 |       >Name:
 7 |       <input type="text" id="event" />
 8 |     </label>
 9 |     <script>
10 |       document.getElementById("event").addEventListener("keyup", message, false);
11 |       function message() {
12 |         var x = document.getElementById("event");
13 |         x.value = x.value.toUpperCase();
14 |       }
15 |     </script>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/UNIT 2/keycode.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <body>
 3 |     <h1>Keycode</h1>
 4 |     <script>
 5 |       document.addEventListener("keydown", checkKeyPressed, false);
 6 | 
 7 |       function checkKeyPressed(e) {
 8 |         if (e.keyCode === 66) {
 9 |           alert("The 'b' key is pressed.");
10 |           console.log(e);
11 |         }
12 |       }
13 |     </script>
14 |   </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/UNIT 2/keycode1.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <body>
 3 |     <h1>Keycode</h1>
 4 |     <p id="event"></p>
 5 |     <script>
 6 |       document.addEventListener("keydown", checkKeyPressed, false);
 7 | 
 8 |       function checkKeyPressed(e) {
 9 |         var x = document.getElementById("event");
10 |         switch (e.keyCode) {
11 |           case 37:
12 |             x.innerHTML += "Left Key pressed!</br>";
13 |             console.log(e);
14 |             break;
15 |           case 38:
16 |             x.innerHTML += "Up Key pressed!</br>";
17 |             console.log(e);
18 |             break;
19 |           case 39:
20 |             x.innerHTML += "Right Key pressed!</br>";
21 |             console.log(e);
22 |             break;
23 |           case 40:
24 |             x.innerHTML += "Down Key pressed!</br>";
25 |             console.log(e);
26 |             break;
27 |         }
28 |       }
29 |     </script>
30 |   </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/UNIT 2/load_xml2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>XmlHttpRequest</title>
 5 |   </head>
 6 |   <body>
 7 |     <h1>Display XML data in a table</h1>
 8 |     <button onclick="loadxml()">Display</button>
 9 |     <table id="id1"></table>
10 |     <script>
11 |       function loadxml() {
12 |         var xhr = new XMLHttpRequest();
13 |         xhr.onreadystatechange = function () {
14 |           if (this.readyState == 4 && this.status == 200) {
15 |             newfunction(this);
16 |           }
17 |         };
18 |         xhr.open("GET", "new3.xml", true);
19 |         xhr.send();
20 |       }
21 |       function newfunction(xml) {
22 |         var i;
23 |         var xmldoc = xml.responseXML;
24 |         var table = "<tr><th>Name</th><th>Price</th></tr>";
25 |         var x = xmldoc.getElementsByTagName("company");
26 |         for (i = 0; i < x.length; i++) {
27 |           table +=
28 |             "<tr><td>" +
29 |             x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue +
30 |             "</td><td>" +
31 |             x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue +
32 |             "</td></tr>";
33 |         }
34 |         document.getElementById("id1").innerHTML = table;
35 |       }
36 |     </script>
37 |   </body>
38 | </html>
39 | 


--------------------------------------------------------------------------------
/UNIT 2/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adithya-m08/WT-Programs/8f3e37a39ba2ed942fca1b2580f9980a2daf1a7c/UNIT 2/logo.png


--------------------------------------------------------------------------------
/UNIT 2/metakey.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <body>
 3 |     <h1>Metakey Event</h1>
 4 | 
 5 |     <label> Name:</label>
 6 |     <input type="text" id="event" />
 7 |     <p id="event1"></p>
 8 |     <script>
 9 |       document.getElementById("event").addEventListener("keydown", message, false);
10 |       function message(event) {
11 |         var x = document.getElementById("event1");
12 |         if (event.metaKey) {
13 |           x.innerHTML = "The META key was pressed!";
14 |           console.log(event);
15 |         } else {
16 |           x.innerHTML = "The META key was NOT pressed!";
17 |         }
18 |       }
19 |     </script>
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/UNIT 2/modifier .html:
--------------------------------------------------------------------------------
 1 | <button id="button">Alt+Shift+Click on me!</button>
 2 | 
 3 | <script>
 4 |   button.onclick = function (event) {
 5 |     if (event.altKey && event.shiftKey) {
 6 |       alert("Hooray!It worked");
 7 |     }
 8 |   };
 9 | </script>
10 | 


--------------------------------------------------------------------------------
/UNIT 2/mouse.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <body>
 4 |     <h1 id="demo">The onmouseover Activity</h1>
 5 | 
 6 |     <script>
 7 |       document.getElementById("demo").addEventListener("mouseover", mouseOver);
 8 |       document.getElementById("demo").addEventListener("mouseout", mouseOut);
 9 | 
10 |       function mouseOver() {
11 |         document.getElementById("demo").style.color = "Blue";
12 |       }
13 | 
14 |       function mouseOut() {
15 |         document.getElementById("demo").style.color = "black";
16 |       }
17 |     </script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/UNIT 2/mouse_over.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <h1>mouseover Events</h1>
 4 |   </head>
 5 |   <body>
 6 |     <script>
 7 |       function mouseoverevent() {
 8 |         alert("Welcome to Class");
 9 |       }
10 |     </script>
11 |     <p onmouseover="mouseoverevent()">Keep cursor over me</p>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/UNIT 2/mouse_over_out (2).html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <title>addEventListener!</title>
 4 | 
 5 |     <script>
 6 |       document.addEventListener("mouseover", changecolor, false);
 7 |       document.addEventListener("mouseout", changecolor1, false);
 8 |       function changecolor() {
 9 |         var data = document.getElementById("image1");
10 |         data.setAttribute("width", "750");
11 |         data.setAttribute("height", "500");
12 |         data.src = "pic2.jpg";
13 |       }
14 |       function changecolor1() {
15 |         var data = document.getElementById("image1");
16 |         data.setAttribute("width", "750");
17 |         data.setAttribute("height", "500");
18 |         data.src = "pic1.jpg";
19 |       }
20 |     </script>
21 |   </head>
22 |   <body>
23 |     <h1>addEventListener function</h1>
24 |     <img id="image1" src="pic1.jpg" alt="unavailable" /><br />
25 |   </body>
26 | </html>
27 | 
28 | <!--  <a href="www.google.com" id="event" style="font-size: 2em">reference link</a></br>
29 |         <input type="button" value="click "id="event1"/> -->
30 | 


--------------------------------------------------------------------------------
/UNIT 2/new3.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <mobile>
 3 | 	<company>
 4 | 		<name>Xaiomi</name>
 5 | 		<model>11 Ultra</model>
 6 | 		<price>50000</price>
 7 | 		<os>Android 10</os>
 8 | 	</company>
 9 | 	<company>
10 | 		<name>Apple</name>
11 | 		<model>13 pro</model>
12 | 		<price>90000</price>
13 | 		<os>IOS</os>
14 | 	</company>
15 | 	<company>
16 | 		<name>Samsung</name>
17 | 		<model>Galaxy</model>
18 | 		<price>90000</price>
19 | 		<os>Ansroid 10</os>
20 | 	</company>
21 | </mobile>


--------------------------------------------------------------------------------
/UNIT 2/onclick.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     Javascript Events
 4 |   </head>
 5 |   <body>
 6 |     <script>
 7 |       function clickevent() {
 8 |         document.write("This is GOD");
 9 |       }
10 |     </script>
11 |     <form>
12 |       <input type="button" onclick="clickevent()" value="Who's this?" />
13 |     </form>
14 |   </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/UNIT 2/onclick_event_handler.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script>
 5 |       function changeText() {
 6 |         document.getElementById("target").innerHTML = "New text";
 7 |       }
 8 |     </script>
 9 |   </head>
10 |   <body>
11 |     <p id="target">Sample text</p>
12 |     <button type="button" onclick="changeText()">Change text</button>
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/UNIT 2/onfocus.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script>
 5 |       function myFunction(x) {
 6 |         x.style.background = "green";
 7 |       }
 8 |     </script>
 9 |   </head>
10 |   <body>
11 |     Enter your name: <input type="text" onfocus="myFunction(this)" /><br /><br />
12 |     Enter your Age:<input type="number" />
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/UNIT 2/onfocus1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>JavaScript Focus Events</title>
 5 |   </head>
 6 |   <body>
 7 |     <p>Move focus to the password field to see the effect:</p>
 8 | 
 9 |     <form id="form">
10 |       <input type="text" placeholder="username" />
11 |       <input type="password" placeholder="password" />
12 |     </form>
13 | 
14 |     <script>
15 |       const pwd = document.querySelector('input[type="password"]');
16 | 
17 |       pwd.addEventListener("focus", (e) => {
18 |         e.target.style.backgroundColor = "yellow";
19 |       });
20 | 
21 |       pwd.addEventListener("blur", (e) => {
22 |         e.target.style.backgroundColor = "";
23 |       });
24 |     </script>
25 |   </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/UNIT 2/onload.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <style></style>
 5 |     <script>
 6 |       function fun() {
 7 |         alert("Hello World!!, Welcome to Class");
 8 |       }
 9 |     </script>
10 |   </head>
11 |   <body onload="fun()">
12 |     <h1>Example of the HTML onload attribute</h1>
13 |     <p>HIIIII.</p>
14 |   </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/UNIT 2/onready.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <body>
 4 |     <h2>Using the XMLHttpRequest Object</h2>
 5 | 
 6 |     <div id="demo">
 7 |       <button type="button" onclick="loadXMLDoc()">Change Content</button>
 8 |     </div>
 9 | 
10 |     <script>
11 |       function loadXMLDoc() {
12 |         var xhttp = new XMLHttpRequest();
13 |         xhttp.onreadystatechange = function () {
14 |           if (this.readyState == 4 && this.status == 200) {
15 |             document.getElementById("demo").innerHTML = this.responseText;
16 |           }
17 |         };
18 |         xhttp.open("GET", "fun.txt", true);
19 |         xhttp.send();
20 |       }
21 |     </script>
22 |   </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/UNIT 2/parent_node.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <head>
 3 |   <title>Parent_node</title>
 4 | </head>
 5 | <body>
 6 |   <main>
 7 |     <h1>Today's articles</h1>
 8 | 
 9 |     <article id="article-1">
10 |       <h2 class="a">A chain is only as strong as its weakest link.</h2>
11 |       <section>
12 |         <p>One weak part will render the whole weak..</p>
13 |         <p>No matter how confident the team is, it is as strong as its weakest link – its defence.</p>
14 |       </section>
15 |     </article>
16 | 
17 |     <article id="article-2">
18 |       <h2 class="b">All good things come to an end</h2>
19 |       <section>
20 |         <p>Good experiences eventually come to an end...</p>
21 |       </section>
22 |     </article>
23 |     <script>
24 |       let note = document.querySelector(".a");
25 |       console.log(note.parentNode);
26 |     </script>
27 |   </main>
28 | </body>
29 | <!-- The node.parentNode returns the read-only parent node of a
30 |      specified node or null if it does not exist. -->
31 | 


--------------------------------------------------------------------------------
/UNIT 2/pic1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adithya-m08/WT-Programs/8f3e37a39ba2ed942fca1b2580f9980a2daf1a7c/UNIT 2/pic1.jpg


--------------------------------------------------------------------------------
/UNIT 2/pic2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adithya-m08/WT-Programs/8f3e37a39ba2ed942fca1b2580f9980a2daf1a7c/UNIT 2/pic2.jpg


--------------------------------------------------------------------------------
/UNIT 2/postajax.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 |   <head>
 5 |     <meta name="viewport" content="width=device-width" />
 6 |     <script
 7 |       type="text/javascript"
 8 |       src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"
 9 |     ></script>
10 |     <script type="text/javascript">
11 |       $(document).ready(function () {
12 |         $("#ajaxBtn").click(function () {
13 |           $.post(
14 |             "fun.txt", // url
15 |             { myData: "This is my data." }, // data to be submit
16 |             function (data, status, jqXHR) {
17 |               // success callback
18 |               $("p").append("status: " + status + ", data: " + data);
19 |             }
20 |           )
21 |             .done(function () {
22 |               alert("Request done!");
23 |             })
24 |             .fail(function (jqxhr, settings, ex) {
25 |               alert("failed, " + ex);
26 |             });
27 |         });
28 |       });
29 |     </script>
30 |   </head>
31 |   <body>
32 |     <h1>jQuery post() method demo</h1>
33 |     <input type="button" id="ajaxBtn" value="Send POST request" />
34 |     <p></p>
35 |   </body>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/UNIT 2/querySel.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <body>
 4 |     <p>This is a p element.</p>
 5 | 
 6 |     <p>This is also a p element.</p>
 7 | 
 8 |     <p>Click the button to add a background color to the first p element in the document.</p>
 9 | 
10 |     <button onclick="myFunction()">Try it</button>
11 | 
12 |     <script>
13 |       function myFunction() {
14 |         document.querySelector("p").style.backgroundColor = "red";
15 |       }
16 |     </script>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/UNIT 2/querySel_1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <body>
 4 |     <h3>A h3 element</h3>
 5 |     <h2>A h2 element</h2>
 6 | 
 7 |     <script>
 8 |       document.querySelector("h2").style.backgroundColor = "blue";
 9 |     </script>
10 |   </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/UNIT 2/querySel_2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>DOM Manipulation</title>
 5 |   </head>
 6 |   <body>
 7 |     <p id="paraId">First Paragraph</p>
 8 |     <script>
 9 |       //accessing the node with id="paraId"
10 |       var firstPara = document.querySelector("#paraId");
11 |     </script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/UNIT 2/querySel_All.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <body>
 4 |     <h2 class="example">This example heading</h2>
 5 |     <p class="example">A example paragraph</p>
 6 | 
 7 |     <p>Click the button to add a background color all elements with class="example".</p>
 8 | 
 9 |     <button onclick="myFunction()">Try it</button>
10 | 
11 |     <script>
12 |       function myFunction() {
13 |         var x, i;
14 |         x = document.querySelectorAll(".example");
15 |         for (i = 0; i < x.length; i++) {
16 |           x[i].style.backgroundColor = "green";
17 |         }
18 |       }
19 |     </script>
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/UNIT 2/querySel_All_1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <body>
 4 |     <p>This is a p element.</p>
 5 | 
 6 |     <p>This is also a p element.</p>
 7 | 
 8 |     <p>Click the button to add a background color to the first p element (index 0) in the document.</p>
 9 | 
10 |     <button onclick="myFunction()">Try it</button>
11 | 
12 |     <script>
13 |       function myFunction() {
14 |         var x = document.querySelectorAll("p");
15 |         x[0].style.backgroundColor = "red";
16 |       }
17 |     </script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/UNIT 2/query_both.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>DOM Manipulation</title>
 5 |   </head>
 6 |   <body>
 7 |     <p class="para">First Paragraph</p>
 8 |     <!-- 1st node -->
 9 |     <a href="https://google.com" class="para">Welcome to Google</a>
10 |     <!-- 2nd node -->
11 |     <input type="text" class="para" />
12 |     <!-- 3rd node -->
13 |   </body>
14 |   <script>
15 |     //accessing the nodes with class="para"
16 |     var nodesHavingParaClass = document.querySelectorAll(".para");
17 |     //nodesHavingParaClass contains 1st, 2nd and 3rd nodes.
18 | 
19 |     //accessing the node with class="para"
20 |     var nodeHavingParaClass = document.querySelector(".para");
21 |     //nodeHavingParaClass contains only the 1st node.
22 |   </script>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/UNIT 2/remove_attr.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>JavaScript Remove an Attribute from an Element</title>
 6 |   </head>
 7 |   <body>
 8 |     <a href="https://www.google.com/" id="myLink">Google</a>
 9 | 
10 |     <script>
11 |       // Selecting the element
12 |       var link = document.getElementById("myLink");
13 | 
14 |       // Removing the href attribute
15 |       link.removeAttribute("href");
16 |     </script>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/UNIT 2/remove_child.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>JavaScript Remove an Element from the DOM</title>
 6 |   </head>
 7 |   <body>
 8 |     <div id="main">
 9 |       <h1 id="title">Hello World!</h1>
10 |       <p id="hint">This is a simple paragraph.</p>
11 |     </div>
12 | 
13 |     <button type="button" onclick="removeElement()">Remove Element</button>
14 | 
15 |     <script>
16 |       function removeElement() {
17 |         var parentElem = document.getElementById("main");
18 |         var childElem = document.getElementById("hint");
19 |         parentElem.removeChild(childElem);
20 |       }
21 |     </script>
22 |   </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/UNIT 2/replace_child.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>JavaScript Replace an Element with another Element in the DOM</title>
 6 |   </head>
 7 |   <body>
 8 |     <div id="main">
 9 |       <h1 id="title">Hello World!</h1>
10 |       <p id="hint">This is a simple paragraph.</p>
11 |     </div>
12 | 
13 |     <button type="button" onclick="replaceParagraph()">Replace Paragraph</button>
14 | 
15 |     <script>
16 |       function replaceParagraph() {
17 |         var parentElem = document.getElementById("main");
18 |         var oldPara = document.getElementById("hint");
19 | 
20 |         // Creating new elememt
21 |         var newPara = document.createElement("p");
22 |         var newContent = document.createTextNode("This is a new paragraph.");
23 |         newPara.appendChild(newContent);
24 | 
25 |         // Replacing old paragraph with newly created paragraph
26 |         parentElem.replaceChild(newPara, oldPara);
27 |       }
28 |     </script>
29 |   </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/UNIT 2/sam.js:
--------------------------------------------------------------------------------
1 | var j = 0;
2 | for (var i = 1; i < 1000000; i++) {
3 |   j = i;
4 | }
5 | postMessage(j);
6 | 


--------------------------------------------------------------------------------
/UNIT 2/sam.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"CATALOG": {
 3 | 		"CD": [
 4 | 			{
 5 | 				"TITLE": "Empire Burlesque",
 6 | 				"ARTIST": "Bob Dylan",
 7 | 				"COUNTRY": "USA",
 8 | 				"COMPANY": "Columbia",
 9 | 				"PRICE": "10.90",
10 | 				"YEAR": "1985"
11 | 			},
12 | 			{
13 | 				"TITLE": "Hide your heart",
14 | 				"ARTIST": "Bonnie Tyler",
15 | 				"COUNTRY": "UK",
16 | 				"COMPANY": "CBS Records",
17 | 				"PRICE": "9.90",
18 | 				"YEAR": "1988"
19 | 			}
20 | 		]
21 | 	}
22 | }


--------------------------------------------------------------------------------
/UNIT 2/sam.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <CATALOG>
 3 |     <CD>
 4 |         <TITLE>Empire Burlesque</TITLE>
 5 |         <ARTIST>Bob Dylan</ARTIST>
 6 |         <COUNTRY>USA</COUNTRY>
 7 |         <COMPANY>Columbia</COMPANY>
 8 |         <PRICE>10.90</PRICE>
 9 |         <YEAR>1985</YEAR>
10 |     </CD>
11 |     <CD>
12 |         <TITLE>Hide your heart</TITLE>
13 |         <ARTIST>Bonnie Tyler</ARTIST>
14 |         <COUNTRY>UK</COUNTRY>
15 |         <COMPANY>CBS Records</COMPANY>
16 |         <PRICE>9.90</PRICE>
17 |         <YEAR>1988</YEAR>
18 |     </CD>
19 | </CATALOG>


--------------------------------------------------------------------------------
/UNIT 2/sam1.json:
--------------------------------------------------------------------------------
1 | {
2 |    "name": "Johnny",
3 |    "age": 25
4 | }


--------------------------------------------------------------------------------
/UNIT 2/screenX_Y.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <body>
 4 |     <h2 onclick="showCoords(event)">Screen coordinates and the value.</h2>
 5 |     <p id="demo"></p>
 6 | 
 7 |     <script>
 8 |       function showCoords(event) {
 9 |         var x = event.screenX;
10 |         var y = event.screenY;
11 |         var coords = "X coords: " + x + ", Y coords: " + y;
12 |         document.getElementById("demo").innerHTML = coords;
13 |       }
14 |     </script>
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/UNIT 2/screen_coordinates.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>JS Mouse Location Demo</title>
 5 |     <style>
 6 |       #track {
 7 |         background-color: goldenrod;
 8 |         height: 200px;
 9 |         width: 400px;
10 |       }
11 |     </style>
12 |   </head>
13 |   <body>
14 |     <p>Move your mouse to see its location.</p>
15 |     <div id="track"></div>
16 |     <p id="log"></p>
17 | 
18 |     <script>
19 |       let track = document.querySelector("#track");
20 |       track.addEventListener("mousemove", (e) => {
21 |         let log = document.querySelector("#log");
22 |         log.innerText = `
23 |             Screen X/Y: (${e.screenX}, ${e.screenY})
24 |             Client X/Y: (${e.clientX}, ${e.clientY})`;
25 |       });
26 |     </script>
27 |   </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/UNIT 2/setInterval.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <body>
 4 |     <p>Example for setInterval</p>
 5 |     <p id="demo"></p>
 6 | 
 7 |     <script>
 8 |       var myVar = setInterval(myTimer, 1000);
 9 | 
10 |       function myTimer() {
11 |         var d = new Date();
12 |         var t = d.toLocaleTimeString();
13 |         document.getElementById("demo").innerHTML = t;
14 |       }
15 |     </script>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/UNIT 2/set_attr.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>JavaScript Set an Attribute on an Element</title>
 6 |   </head>
 7 |   <body>
 8 |     <button type="button" id="myBtn">Click Me</button>
 9 | 
10 |     <script>
11 |       // Selecting the element
12 |       var btn = document.getElementById("myBtn");
13 | 
14 |       // Setting new attributes
15 |       btn.setAttribute("class", "click-btn");
16 |       btn.setAttribute("disabled", "");
17 |     </script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/UNIT 2/set_attr1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>JavaScript Change the Value of an Attribute</title>
 6 |   </head>
 7 |   <body>
 8 |     <p><a href="#" id="myLink">google</a></p>
 9 | 
10 |     <script>
11 |       // Selecting the element
12 |       var link = document.getElementById("myLink");
13 | 
14 |       // Changing the href attribute value
15 |       link.setAttribute("href", "https://www.google.com");
16 |     </script>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/UNIT 2/set_clearInterval.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <body>
 4 |     <p>Example for setInterval() and clearInterval().</p>
 5 | 
 6 |     <button onclick="stopColor()">Stop Toggling</button>
 7 | 
 8 |     <script>
 9 |       var myVar = setInterval(setColor, 300);
10 | 
11 |       function setColor() {
12 |         var x = document.body;
13 |         x.style.backgroundColor = x.style.backgroundColor == "blue" ? "purple" : "blue";
14 |       }
15 | 
16 |       function stopColor() {
17 |         clearInterval(myVar);
18 |       }
19 |     </script>
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/UNIT 2/settimeout.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <head> </head>
 3 | <body>
 4 |   <script>
 5 |     // program to display time every 3 seconds
 6 |     function showTime() {
 7 |       // return new date and time
 8 |       let dateTime = new Date();
 9 | 
10 |       // returns the current local time
11 |       let time = dateTime.toLocaleTimeString();
12 | 
13 |       console.log(time);
14 | 
15 |       // display the time after 3 seconds
16 |       setTimeout(showTime, 3000);
17 |     }
18 | 
19 |     // calling the function
20 |     showTime();
21 |   </script>
22 | </body>
23 | 


--------------------------------------------------------------------------------
/UNIT 2/shuttle.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adithya-m08/WT-Programs/8f3e37a39ba2ed942fca1b2580f9980a2daf1a7c/UNIT 2/shuttle.mp4


--------------------------------------------------------------------------------
/UNIT 2/siblings.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <head>
 3 |   <title>Sibling</title>
 4 | </head>
 5 | <body>
 6 |   <main>
 7 |     <h1>Today's articles</h1>
 8 | 
 9 |     <article id="article-1">
10 |       <h2 class="a">A chain is only as strong as its weakest link.</h2>
11 |       <section>
12 |         <p>One weak part will render the whole weak..</p>
13 |         <p>No matter how confident the team is, it is as strong as its weakest link – its defence.</p>
14 |       </section>
15 |     </article>
16 | 
17 |     <article id="article-2">
18 |       <h2>it says</h2>
19 |       <h2 class="b">All good things come to an end</h2>
20 |       <section>
21 |         <p>Good experiences eventually come to an end...</p>
22 |       </section>
23 |     </article>
24 |     <script>
25 |       let current = document.querySelector(".b");
26 |       let nextSibling = current.nextElementSibling;
27 |       console.log(nextSibling);
28 | 
29 |       let current1 = document.querySelector(".b");
30 |       let prevSiblings = current.previousElementSibling;
31 |       console.log(prevSiblings);
32 |     </script>
33 |   </main>
34 | </body>
35 | <!-- The nextElementSibling returns null if
36 |  the specified element is the first one in the list. -->
37 | <!-- The previousElementSibling property returns null
38 |  if the current element is the first one in the list -->
39 | 


--------------------------------------------------------------------------------
/UNIT 2/svg.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>Example of HTML svg Tag</title>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="500" height="350">
 9 |       <rect x="100" y="100" width="300" height="150" fill="yellow" stroke="black" stroke-width="5" />
10 |     </svg>
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/UNIT 2/test.php:
--------------------------------------------------------------------------------
1 | <?php
2 |  echo json_encode(array("name"=>"John","time"=>"2pm"));
3 | ?>


--------------------------------------------------------------------------------
/UNIT 2/travel.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adithya-m08/WT-Programs/8f3e37a39ba2ed942fca1b2580f9980a2daf1a7c/UNIT 2/travel.jpeg


--------------------------------------------------------------------------------
/UNIT 2/travelwoman.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adithya-m08/WT-Programs/8f3e37a39ba2ed942fca1b2580f9980a2daf1a7c/UNIT 2/travelwoman.jpg


--------------------------------------------------------------------------------
/UNIT 2/web_workers.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Web Worker Demo</title>
 5 |   </head>
 6 |   <body>
 7 |     <h2>Validating the browser compatibility of Web Browsers</h2>
 8 |     <div id="yes"></div>
 9 |     <div id="No"></div>
10 |     <button onclick="worker_demo();">Submit</button>
11 |     <script>
12 |       function worker_demo() {
13 |         if (typeof Worker !== "undefined") {
14 |           document.getElementById("yes").innerHTML = " Browser Supports";
15 |         } else {
16 |           document.getElementById("NO").innerHTML = "Browser Not Supporting the workers";
17 |         }
18 |       }
19 |     </script>
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/UNIT 2/worker1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>JS as Single Thread</title>
 5 |     <script>
 6 |       function fun1() {
 7 |         var work = new Worker("sam.js");
 8 |         work.onmessage = function (event) {
 9 |           alert("Loop took" + event.data + " number of times to get exe");
10 |         };
11 |       }
12 |       function fun2() {
13 |         alert("Good Morning Again!!!");
14 |       }
15 |     </script>
16 |   </head>
17 |   <body>
18 |     <input type="submit" onclick="fun1()" value="Click 1" />
19 |     <input type="submit" onclick="fun2()" value="Click 2" />
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/UNIT 2/ww.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Web worker</title>
 5 |     <script>
 6 |       var worker = new Worker("dowork.js");
 7 |       worker.addEventListener(
 8 |         "message",
 9 |         function (e) {
10 |           console.log("Worker said :", e.data);
11 |         },
12 |         false
13 |       );
14 |       worker.postMessage("hello CLass");
15 |     </script>
16 |   </head>
17 |   <body></body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/UNIT 2/xmlparse.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <body>
 4 |     <h2>Using the XMLHttpRequest Object</h2>
 5 | 
 6 |     <div id="demo">
 7 |       <button type="button" onclick="loadXMLDoc()">Change Content</button>
 8 |     </div>
 9 | 
10 |     <script>
11 |       function loadXMLDoc() {
12 |         var xhttp = new XMLHttpRequest();
13 |         xhttp.onreadystatechange = function () {
14 |           if (this.readyState == 4 && this.status == 200) {
15 |             document.getElementById("demo").innerHTML = this.responseText;
16 |           }
17 |         };
18 |         xhttp.open("GET", "sam.xml", true);
19 |         xhttp.send();
20 |       }
21 |     </script>
22 |   </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/UNIT 2/xmlparse1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <body>
 4 |     <p id="demo"></p>
 5 | 
 6 |     <script>
 7 |       var parser, xmlDoc;
 8 |       var text =
 9 |         "<bookstore><book>" +
10 |         "<title>Everyday Italian</title>" +
11 |         "<author>Giada De Laurentiis</author>" +
12 |         "<year>2005</year>" +
13 |         "</book></bookstore>";
14 | 
15 |       parser = new DOMParser();
16 |       xmlDoc = parser.parseFromString(text, "text/xml");
17 | 
18 |       document.getElementById("demo").innerHTML = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
19 |     </script>
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/UNIT 3/Anchor_code/U3L2.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 	<head>
 3 | 		<title>React</title>
 4 | 		<script crossdomain src="https://unpkg.com/react@16/umd/react.development.js"> </script> 
 5 | 		<script crossdomain src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"> </script> 
 6 | 		<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"> </script>
 7 | 	</head>
 8 | 	<body>
 9 | 		<div id="container"></div>
10 | 		<script type="text/babel">
11 | 			var destination = document.querySelector("#container");
12 | 			ReactDOM.render( 
13 | 				<h1>React World</h1>, 
14 | 				//React.createElement( "h1", null, "React  World" ),
15 | 				destination
16 | 			);
17 | 		</script>
18 | 	</body>
19 | </html>


--------------------------------------------------------------------------------
/UNIT 3/Anchor_code/U3L3.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 	<head>
 3 | 		<title>React</title>
 4 | 		<script crossdomain src="https://unpkg.com/react@16/umd/react.development.js"> </script> 
 5 | 		<script crossdomain src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"> </script> 
 6 | 		<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"> </script>
 7 | 	</head>
 8 | 	<body>
 9 | 		<div id="container"></div>
10 | 		<script type="text/babel">
11 | 			var destination = document.querySelector("#container");
12 | 			class HelloWorld extends React.Component { 
13 | 				render() { 
14 | 					return <div>
15 | 						<h1>Hello, {this.props.name}!</h1>
16 | 						{this.props.children}
17 | 					</div> ;
18 | 				}
19 | 			}
20 | 
21 | 			ReactDOM.render( 
22 | 				<div>
23 | 					<HelloWorld name="Batman">
24 | 						<p>Next Line</p>
25 | 					</HelloWorld>
26 | 					<HelloWorld name="Robin">
27 | 						<p>Next New Line</p>
28 | 					</HelloWorld>
29 | 				</div>,
30 | 				destination
31 | 			);
32 | 		</script>
33 | 	</body>
34 | </html>


--------------------------------------------------------------------------------
/UNIT 3/Anchor_code/U3L4.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 	<head>
 3 | 		<title>React</title>
 4 | 		<script crossdomain src="https://unpkg.com/react@16/umd/react.development.js"> </script> 
 5 | 		<script crossdomain src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"> </script> 
 6 | 		<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"> </script>
 7 | 	</head>
 8 | 	<body>
 9 | 		<div id="container"></div>
10 | 		<script type="text/babel">
11 | 			container = document.querySelector("#container");
12 | 			class Letter extends React.Component {
13 | 				render() {
14 | 					var letterStyle = {
15 | 						padding: "20px",
16 | 						margin: "20px",
17 | 						backgroundColor: this.props.bgcolor,
18 | 						color: "#333",
19 | 						display: "inline-block",
20 | 					}; 
21 | 					return (
22 | 						<div style={letterStyle}>
23 | 							{this.props.children}
24 | 						</div>
25 | 					);
26 | 				}
27 | 			}
28 | 			ReactDOM.render(
29 | 				<div>
30 | 					<Letter bgcolor="#58B3FF">A</Letter>
31 | 					<Letter bgcolor="#FF605F">E</Letter>
32 | 					<Letter bgcolor="#FFD52E">I</Letter>
33 | 					<Letter bgcolor="#49DD8E">O</Letter>
34 | 					<Letter bgcolor="#AE99FF">U</Letter>
35 | 				</div>,
36 | 				container
37 | 			);
38 | 
39 | 		</script>
40 | 	</body>
41 | </html>


--------------------------------------------------------------------------------
/UNIT 3/Anchor_code/U3L7.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 	<head>
 3 | 		<title>React</title>
 4 | 		<script crossdomain src="https://unpkg.com/react@16/umd/react.development.js"> </script> 
 5 | 		<script crossdomain src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"> </script> 
 6 | 		<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"> </script>
 7 | 	</head>
 8 | 	<body>
 9 | 		<div id="container"></div>
10 | 		<script type="text/babel">
11 | 			function Stuff(props){
12 | 				return(<p>Hello {props.name}!!!</p>);
13 | 			}
14 | 			ReactDOM.render(
15 | 				<Stuff name="Batman" />,
16 | 				document.querySelector("#container")
17 | 			);
18 | 		</script>
19 | 	</body>
20 | </html>


--------------------------------------------------------------------------------
/UNIT 3/Anchor_code/U3L8.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 	<head>
 3 | 		<title>React</title>
 4 | 		<script crossdomain src="https://unpkg.com/react@16/umd/react.development.js"> </script> 
 5 | 		<script crossdomain src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"> </script> 
 6 | 		<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"> </script>
 7 | 	</head>
 8 | 	<body>
 9 | 		<div id="container"></div>
10 | 		<script type="text/babel">
11 | 			function NameList(props){
12 | 				const names = props.names;
13 | 				const listItems = names.map((name, index)=>
14 | 					<li key={index}>{name}</li>
15 | 				);
16 | 				return(
17 | 					<ul>{listItems}</ul>
18 | 					/*[ <p key="1">Batman1</p>,
19 | 						<p key="2">Ironman1</p>,
20 | 						<p key="3">Spiderman1</p>
21 | 					]*/
22 | 				)
23 | 			}
24 | 			const names=["Batman", "Ironman", "Spiderman"];
25 | 			ReactDOM.render(<NameList names={names}/>,document.querySelector("#container"));
26 | 		</script>
27 | 	</body>
28 | </html>


--------------------------------------------------------------------------------
/UNIT 3/Anchor_code/images/peacock.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adithya-m08/WT-Programs/8f3e37a39ba2ed942fca1b2580f9980a2daf1a7c/UNIT 3/Anchor_code/images/peacock.jpg


--------------------------------------------------------------------------------
/UNIT 3/Anchor_code/images/tiger.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adithya-m08/WT-Programs/8f3e37a39ba2ed942fca1b2580f9980a2daf1a7c/UNIT 3/Anchor_code/images/tiger.jpg


--------------------------------------------------------------------------------
/UNIT 3/Anchor_code/ref_pass.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 	<head>
 3 | 		<title>React</title>
 4 | 		<script crossdomain src="https://unpkg.com/react@16/umd/react.development.js"> </script> 
 5 | 		<script crossdomain src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"> </script> 
 6 | 		<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"> </script>
 7 | 		<style>
 8 | 		</style>
 9 | 	</head>
10 | 	<body>
11 | 		<div id="container"></div>
12 | 		<script type="text/babel">
13 | 		function CustomTextInput(props) {
14 | 			return (
15 | 				<div>
16 | 				<input ref={props.inputRef} />    </div>
17 | 			);
18 | 		}
19 | 
20 | 		class Parent extends React.Component {
21 | 			doClick=(e)=>{
22 | 				//console.log(e.target);
23 | 				console.log(this.inputElement.value);
24 | 				//this.inputElement.value="red";
25 | 			}
26 | 		  render() {
27 | 			return (
28 | 				<div>
29 | 			  <CustomTextInput
30 | 				inputRef={(el) => this.inputElement = el}      />
31 | 				<button onClick={this.doClick}>Click</button>
32 | 				</div>
33 | 			);
34 | 		  }
35 | 		}
36 | 		ReactDOM.render(
37 | 			<Parent/>,
38 | 			document.body
39 | 		)
40 | 		</script>
41 | 	</body>
42 | </html>


--------------------------------------------------------------------------------
/UNIT 3/Unit3_React.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adithya-m08/WT-Programs/8f3e37a39ba2ed942fca1b2580f9980a2daf1a7c/UNIT 3/Unit3_React.pdf


--------------------------------------------------------------------------------
/UNIT 3/add_Image.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <title> </title>
 7 |   <script  src="https://unpkg.com/react@16/umd/react.development.js"></script>
 8 |   <script  src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
 9 |   <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
10 | </head>
11 | 
12 | <body>
13 |     <div id="root"></div>
14 |   <script type="text/babel">
15 |   class Images extends React.Component{
16 |     render(){
17 |           var imagesettings ={
18 |               height :100,
19 |               weight: 100,
20 |               padding :10
21 |               }
22 |        return(
23 |            <img style={imagesettings} src= {this.props.src} />
24 |             
25 |        );     
26 |       }
27 |   }
28 | 
29 |     ReactDOM.render(
30 |   <div>
31 |     <h1>Hello, Welcome to my React page</h1>
32 |     <div>
33 |         <Images src="download1.jpg"/>
34 |         <Images src="download2.jpg"/>
35 |         <Images src="download3.jpg"/>
36 |     </div>   
37 |    
38 |   </div>,
39 |   document.getElementById("root")
40 | );
41 |   </script>
42 | </body>
43 | 
44 | </html>
45 | 


--------------------------------------------------------------------------------
/UNIT 3/basic_Component.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE HTML>
 2 | <html>
 3 | <head>
 4 |  <title>React Components</title>
 5 |  <style>
 6 |      div{
 7 |          border: 1px solid black;
 8 |          padding: 10px 10px 20px 20px;
 9 | 
10 |      }
11 |  </style>
12 |  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
13 |  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
14 |  <script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
15 | </head>
16 | <body>
17 |  
18 |     
19 |     <script type="text/babel">
20 |     
21 |         class Name extends React.Component {
22 |             render() {
23 |                 return (<div>John</div>);}
24 |         }
25 |         class Photo extends React.Component {
26 |             render() {
27 |                 return (<div>Placeholder for John's Photo</div>);
28 |             }
29 |         }
30 |         class IDcard extends React.Component {
31 |             render() {
32 |                 return(<div>
33 |                 <Photo/>
34 |                 <Name/>
35 |                 </div>
36 |                 );}
37 |         }
38 |         ReactDOM.render(<IDcard/>,
39 |         document.body);
40 | </script>
41 | 
42 | </body>
43 | </html>


--------------------------------------------------------------------------------
/UNIT 3/basiccomponent.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE HTML>
 2 | <html>
 3 | <head>
 4 |  <title>React Components</title>
 5 |  <style>
 6 |      div{
 7 |          border: 1px solid black;
 8 |          padding: 10px 10px 20px 20px;
 9 | 
10 |      }
11 |  </style>
12 |  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
13 |  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
14 |  <script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
15 | </head>
16 | <body>
17 |  
18 |     
19 |     <script type="text/babel">
20 |     
21 |         class Name extends React.Component {
22 |             render() {
23 |                 return (<div>John</div>);}
24 |         }
25 |         class Photo extends React.Component {
26 |             render() {
27 |                 return (<div>Placeholder for John's Photo</div>);
28 |             }
29 |         }
30 |         class IDcard extends React.Component {
31 |             render() {
32 |                 return(<div>
33 |                 <Photo/>
34 |                 <Name/>
35 |                 </div>
36 |                 );}
37 |         }
38 |         ReactDOM.render(<IDcard/>,
39 |         document.body);
40 | </script>
41 | 
42 | </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/UNIT 3/clock.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE HTML>
 3 | <html>
 4 | <head>
 5 | <title>Clock</title>
 6 | <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
 7 | <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
 8 | <script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
 9 | </head>
10 | <body>
11 |     <div id="clock"></div>
12 |     <script type="text/babel">
13 | 
14 |         <div id="clock"></div>
15 |         function tick() {
16 |          const element = (
17 |            <div>
18 |             <h1>It is {new Date().toLocaleTimeString()}.</h1>
19 |            </div>
20 |          );
21 |          ReactDOM.render(element, document.getElementById('clock'));
22 |         }
23 |         setInterval(tick, 1000);
24 |         </script>
25 | </body>
26 | </html>
27 | 
28 | 


--------------------------------------------------------------------------------
/UNIT 3/components.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE HTML>
 2 | <html>
 3 | <head>
 4 |  <title>React Components</title>
 5 |  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
 6 |  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
 7 |  <script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
 8 | </head>
 9 | <body>
10 |  
11 |  <script type="text/babel">
12 |   class Disciplines extends React.Component{
13 |     render(){
14 |       return <h2>This section details disciplines </h2>;
15 |     }
16 |   }
17 |   class Courses extends React.Component {
18 |       render() {
19 |           return <h2>This section details courses</h2>;
20 |       }
21 |   }
22 |   class School extends React.Component{
23 |       render(){
24 |       const divStyle = {border: "5px solid black"};
25 | 
26 |         return(
27 |         <div style={divStyle}>
28 |           Welcome to School!
29 |           <Disciplines/> <hr/>
30 |           <Courses/> <hr/>
31 |         </div>
32 |         );
33 | 
34 | 
35 |       }
36 |     }
37 | 
38 |   ReactDOM.render(<School/>, 
39 |     document.body );
40 | 
41 |  </script>
42 | </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/UNIT 3/counter.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE HTML>
 2 | <html>
 3 | <head>
 4 |  <title>Counter</title>
 5 |  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
 6 |  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
 7 |  <script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
 8 | </head>
 9 | <body>
10 |  
11 |     <div id="contents"></div>
12 |     <script type="text/babel">
13 |     class ClickMe extends React.Component{
14 |         constructor(){
15 |             super();
16 |             this.state={
17 |                 clicks: 0
18 |             };
19 |             this.counter = this.counter.bind(this);
20 |         }
21 |         counter() {
22 |         this.setState({
23 |             clicks: this.state.clicks + 1
24 |             });
25 |         }
26 |         render(){
27 |             return(
28 |             <div>
29 |             <button onClick={this.counter}> Click Me! </button>
30 |             <h1> Number of clicks: {this.state.clicks} </h1>
31 |             </div>
32 |             
33 |             );
34 |         }
35 |     }
36 |    
37 | ReactDOM.render(<ClickMe/>,
38 | document.getElementById('contents'));
39 | </script>
40 | 
41 | </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/UNIT 3/firstprgm.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <title>React!</title>
 7 |   <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
 8 |   <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
 9 |   <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
10 |   <style>
11 |     #container {
12 |     	padding: 50px;
13 |     	background-color: #EEE;
14 |     }
15 |     #container h1 {
16 |     	font-size: 144px;
17 | 		font-family: sans-serif;
18 |    	 color: #0080a8;
19 |     }
20 | </style>
21 | </head>
22 | 
23 | <body>
24 |     <div id="container"></div>
25 |   <script type="text/babel">
26 | //       ReactDOM.render(
27 | //   <h1>ABC</h1>,
28 | //   document.querySelector("#container")
29 | // );
30 | 
31 | var destination = document.querySelector("#container");
32 | 
33 | ReactDOM.render(
34 |   <h1>Batman</h1>,
35 |   destination
36 | ); 
37 |   </script>
38 | </body>
39 | 
40 | </html>


--------------------------------------------------------------------------------
/UNIT 3/firstreact.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE HTML>
 2 | <html>
 3 | <head>
 4 | <title>My first react code</title>
 5 | <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
 6 | <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
 7 | </head>
 8 | <body>
 9 |     <div id="content"></div>
10 |     <script>
11 |         const element = React.createElement('div', {title: 'Outer div'},React.createElement('h1', null, 'Hello World!'));
12 |         ReactDOM.render(element, document.getElementById('content'));
13 |     </script>
14 | </body>
15 | </html>


--------------------------------------------------------------------------------
/UNIT 3/firstreactcode.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE HTML>
 2 | <html>
 3 | <head>
 4 | <title>My first react code</title>
 5 | <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
 6 | <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
 7 | </head>
 8 | <body>
 9 |     <div id="content"></div>
10 |     <script>
11 |         const element = React.createElement('div', {title: 'Outer div'},React.createElement('h1', null, 'Hello World!'));
12 |         ReactDOM.render(element, document.getElementById('content'));
13 |     </script>
14 | </body>
15 | </html>


--------------------------------------------------------------------------------
/UNIT 3/image_react.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <title> </title>
 7 |   <script  src="https://unpkg.com/react@16/umd/react.development.js"></script>
 8 |   <script  src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
 9 |   <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
10 | </head>
11 | 
12 | <body>
13 |     <div id="root"></div>
14 |   <script type="text/babel">
15 | 
16 |   const img ="https://picsum.photos/200";
17 |     ReactDOM.render(
18 |   <div>
19 |     <h1>Hello, Welcome to my React page</h1>
20 |     <div>
21 |      <img src={img + "?grayscale"} />
22 |     </div>   
23 |    
24 |   </div>,
25 |   document.getElementById("root")
26 | );
27 | //  to refresh the Image automatically
28 | 
29 | function autoRefresh(){
30 |      window.location=window.location.href;
31 | 
32 |  }
33 |  setInterval("autoRefresh()",2000)
34 |   </script>
35 | </body>
36 | 
37 | </html>
38 | 


--------------------------------------------------------------------------------
/UNIT 3/map_key.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <title> </title>
 7 |   <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
 8 |   <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
 9 |   <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
10 | </head>
11 | 
12 | <body>
13 |     <div id="ex"></div>
14 |   <script type="text/babel">
15 |     var names = ["qaz","xyz","abc"];
16 |     ReactDOM.render(
17 |         <div>
18 |         {
19 |             names.map(function(name,index){
20 |                 return<div key={index}>Hello,{name}!</div>
21 |             })
22 |         }
23 |         </div>,
24 |         document.getElementById("ex")
25 |     );
26 |     </script>
27 | </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/UNIT 3/props.child.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <title>React</title>
 7 |   <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
 8 | <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
 9 | <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
10 | <style>
11 |   #container {
12 |     padding: 50px;
13 |     background-color: #EEE;
14 |   }
15 |   #container h1 {
16 |     font-size: 144px;
17 |   font-family: sans-serif;
18 |     color: #0080a8;
19 |   }
20 | </style>
21 | </head>
22 | 
23 | <body>
24 |   <div id="container"></div>
25 |   <script type="text/babel">
26 | 
27 | 
28 |   class Buttonify extends React.Component {
29 |   render() {
30 |     return(
31 |       <div>
32 |         <button type={this.props.behavior}>{this.props.children}</button>
33 |       </div>
34 |     );
35 |   }
36 | }
37 | ReactDOM.render(
38 |   <div>
39 |     <Buttonify behavior="submit">SEND DATA</Buttonify>
40 |   </div>,
41 |   document.querySelector("#container")
42 | ); 
43 |   </script>
44 | </body>
45 | 
46 | </html>


--------------------------------------------------------------------------------
/UNIT 3/props.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE HTML>
 3 | <html>
 4 | <head>
 5 |  <title>React Components</title>
 6 |  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
 7 |  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
 8 |  <script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
 9 | </head>
10 | <body>
11 |   <div id="contents"></div>
12 |   <script type="text/babel">
13 |     class Greeting extends React.Component {
14 |       render() {
15 |       return (<p>Welcome {this.props.name}</p>);
16 |       }
17 |     }
18 |     const element = <div>
19 |     <Greeting name="John"/>
20 |     <Greeting name="Jane"/>
21 |     </div>;
22 |     ReactDOM.render(element,document.getElementById('contents'));
23 |     </script> 
24 |   
25 | </script>
26 | </body>
27 | </html>


--------------------------------------------------------------------------------
/UNIT 3/react_event.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <title> </title>
 7 |   <script  src="https://unpkg.com/react@16/umd/react.development.js"></script>
 8 |   <script  src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
 9 |   <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
10 | </head>
11 | 
12 | <body>
13 |     <div id="root"></div>
14 |   <script type="text/babel">
15 |   class Football extends React.Component {
16 |   shoot() {
17 |     alert("Great Shot!");
18 |   }
19 |   render() {
20 |     return (
21 |       <button onClick={this.shoot}>Take the shot!</button>
22 |     );
23 |   }
24 | }
25 | 
26 | ReactDOM.render(
27 |     <Football />,
28 |      document.getElementById('root'));
29 |   </script>
30 | </body>
31 | 
32 | </html>


--------------------------------------------------------------------------------
/UNIT 3/react_event2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <title> </title>
 7 |   <script  src="https://unpkg.com/react@16/umd/react.development.js"></script>
 8 |   <script  src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
 9 |   <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
10 | </head>
11 | 
12 | <body>
13 |     <div id="root"></div>
14 |   <script type="text/babel">
15 | class App extends React.Component {
16 |    constructor(props) {
17 |       super(props);
18 |       
19 |       this.state = {
20 |          data: 'Helo Class...'
21 |       }
22 |       this.updateState = this.updateState.bind(this);
23 |    };
24 |    updateState() {
25 |       this.setState({data: 'Good Morning...'})
26 |    }
27 |    render() {
28 |       return (
29 |          <div>
30 |             <button onClick = {this.updateState}>CLICK</button>
31 |             <h4>{this.state.data}</h4>
32 |          </div>
33 |       );
34 |    }
35 | }
36 | 
37 | ReactDOM.render(
38 |     <App />,
39 |      document.getElementById('root'));
40 |   </script>
41 | </body>
42 | 
43 | </html>


--------------------------------------------------------------------------------
/UNIT 3/react_styles.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <title> </title>
 7 |   <script  src="https://unpkg.com/react@16/umd/react.development.js">
 8 | </script>
 9 |   <script  src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
10 |   <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
11 |   <style>
12 |     #container {
13 |       padding: 50px;
14 |       background-color:aqua;
15 |     }
16 |     #container h1 {
17 |       font-size: 70px;
18 |       font-family: sans-serif;
19 |       color:crimson;
20 |     }
21 |   </style>
22 | </head>
23 | 
24 | <body>
25 |     <div id="container"></div>
26 |   <script type="text/babel">
27 |         var destination = document.querySelector("#container");
28 | 
29 | ReactDOM.render(
30 |   <div>
31 |     <h1>Batman</h1>
32 |     <h1>Iron Man</h1>
33 |     <h1>Nicolas Cage</h1>
34 |     <h1>Mega Man</h1>
35 |   </div>,
36 |   destination
37 | );
38 |   </script>
39 | </body>
40 | 
41 | </html>
42 | 


--------------------------------------------------------------------------------
/UNIT 3/reactbasic.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <title>React! React! React!</title>
 7 |   <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
 8 |   <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
 9 |   <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
10 | 
11 |   <style>
12 |     #container {
13 |       padding: 50px;
14 |       background-color: #EEE;
15 |     }
16 |     #container h1 {
17 |       font-size: 144px;
18 |       font-family: sans-serif;
19 |       color: #0080a8;
20 |     }
21 |   </style>
22 | </head>
23 | 
24 | <body>
25 |   <div id="container"></div>
26 |   <script type="text/babel">
27 |     var destination = document.querySelector("#container");
28 | 
29 |     ReactDOM.render(React.createElement(
30 |       "h1",
31 |       null,
32 |       "Batman"
33 |     ), destination);
34 |   </script>
35 | </body>
36 | 
37 | </html>


--------------------------------------------------------------------------------
/UNIT 3/reactwithjsx.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE HTML>
 2 | <html>
 3 | <head>
 4 | <title>React with JSX</title>
 5 | <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
 6 | <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
 7 | <script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
 8 | </head>
 9 | <body>
10 |     <div id="content"></div>
11 |     <script type="text/babel">
12 |         const element = (
13 |         <div title="Outer div">
14 |         <h1>Hello World!</h1>
15 |         </div>);
16 |         ReactDOM.render(element, document.getElementById('content'));
17 |     </script>
18 | </body>
19 | </html>
20 | 
21 | 


--------------------------------------------------------------------------------
/UNIT 3/stateless.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE HTML>
 2 | <html>
 3 | 
 4 | <head>
 5 |     <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
 6 |     <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
 7 |     <script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
 8 | </head>
 9 | <body>
10 |     <script type='text/babel'>
11 | 
12 |   function HelloWorld(props) {
13 |     return (
14 |       <div title="Outer div">
15 | 
16 |       <h1>{props.message}</h1>
17 |       </div>
18 |       );
19 | }
20 |   ReactDOM.render(<div><HelloWorld message="Welcome"/></div>, document.body);
21 | </script>
22 | </body>
23 | 
24 | </html>
25 | 


--------------------------------------------------------------------------------
/UNIT 3/stateless_2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE HTML>
 2 | <html>
 3 | 
 4 | <head>
 5 |     <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
 6 |     <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
 7 |     <script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
 8 | </head>
 9 | <body>
10 |     <script type='text/babel'>
11 | 
12 |     function App() {
13 |         const greeting = 'Hello Function Component!';
14 |         return <Headline value={greeting} />;
15 |     }
16 |         function Headline(props) {
17 |         return <h1>{props.value}</h1>;
18 |         }
19 |   ReactDOM.render(<App/>, document.body);
20 | </script>
21 | </body>
22 | 
23 | </html>
24 | 


--------------------------------------------------------------------------------
/UNIT 3/super_example.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <title>React!</title>
 7 |   <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
 8 |   <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
 9 |   <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
10 | <!-- <style>
11 |     #container{
12 |         padding: 50px;
13 |         background-color: #FFF;
14 | 
15 |     }
16 | </style> -->
17 | </head>
18 | 
19 | <body>
20 |  <div id="container"></div>
21 |     <script type="text/babel">
22 | // without super()
23 | class A {
24 |   constructor() {
25 |     this.a = 'hello'
26 |   }
27 | }
28 | 
29 | class B extends A {
30 |   constructor(){
31 |     console.log(this.a) 
32 |   }
33 | }
34 | 
35 | console.log(new B())
36 | 
37 | // with super()
38 | // class A {
39 | //   constructor(props) {
40 | //     this.props = props
41 | //   }
42 | // }
43 | 
44 | // class B extends A {
45 | //   constructor(props) {
46 | //     super(props)
47 | //     console.log(this.props)
48 | //   }
49 | // }
50 | 
51 | // console.log(new B({title: 'hello world'}))
52 |     </script>
53 | 
54 | 
55 | 
56 | </body>
57 | 
58 | </html>
59 | 
60 | 
61 | 
62 | 
63 | 
64 | 
65 | 


--------------------------------------------------------------------------------
/UNIT 4/AppendFile.js:
--------------------------------------------------------------------------------
1 | var fs = require('fs');
2 | 
3 | fs.appendFile('test.txt', 'Hello Class!', function (err) { 
4 |                         if (err)
5 |         console.log(err);
6 |                         else
7 |         console.log('Append operation complete.');
8 | });


--------------------------------------------------------------------------------
/UNIT 4/Blocking.js:
--------------------------------------------------------------------------------
1 | var fs = require("fs");
2 | var data = fs.readFileSync('input.txt');
3 | 
4 | console.log(data.toString());
5 | console.log("Program Ended");


--------------------------------------------------------------------------------
/UNIT 4/Collection_create.js:
--------------------------------------------------------------------------------
 1 | var MongoClient = require('mongodb').MongoClient;
 2 | var url = "mongodb://localhost:27017/";
 3 | MongoClient.connect(url, function(err, db) {
 4 | if (err) throw err;
 5 | var dbo = db.db("3k");
 6 | dbo.createCollection("customers", function(err, res) {
 7 | if (err) throw err;
 8 | console.log("Collection created!");
 9 | db.close();
10 | });
11 | });
12 | 


--------------------------------------------------------------------------------
/UNIT 4/HTTP_Client.js:
--------------------------------------------------------------------------------
 1 | var http = require('http');
 2 | var fetch = require('node-fetch');
 3 | 
 4 | 
 5 | fetch('http://localhost:8081/sam.json', {
 6 |         method: 'GET',
 7 |         headers: { 'Content-Type': 'application/json' },
 8 |     })
 9 |     .then(res => res.json())
10 |     .then(res => console.log(res));


--------------------------------------------------------------------------------
/UNIT 4/NonBlocking.js:
--------------------------------------------------------------------------------
1 | var fs = require("fs");
2 | 
3 | fs.readFile('input.txt', function (err, data) {
4 |    if (err) return console.error(err);
5 |    console.log(data.toString());
6 | });
7 | 
8 | console.log("Program Ended");


--------------------------------------------------------------------------------
/UNIT 4/Readstreams1.js:
--------------------------------------------------------------------------------
 1 | const fileSystem = require("fs");
 2 | var data = "";
 3 | 
 4 | const readStream = fileSystem.createReadStream("input.txt");
 5 | 
 6 | readStream.setEncoding("UTF8");
 7 | 
 8 | readStream.on("data", (chunk) => {
 9 | 	data += chunk;
10 | });
11 | 
12 | readStream.on("end", () => {
13 | 	console.log(data);
14 | });
15 | 
16 | readStream.on("error", (error) => {
17 | 	console.log(error.stack);
18 | });


--------------------------------------------------------------------------------
/UNIT 4/Unit4.docx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adithya-m08/WT-Programs/8f3e37a39ba2ed942fca1b2580f9980a2daf1a7c/UNIT 4/Unit4.docx


--------------------------------------------------------------------------------
/UNIT 4/Unit4.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adithya-m08/WT-Programs/8f3e37a39ba2ed942fca1b2580f9980a2daf1a7c/UNIT 4/Unit4.pdf


--------------------------------------------------------------------------------
/UNIT 4/Write_streams.js:
--------------------------------------------------------------------------------
1 | var fs = require('fs');
2 | var readableStream = fs.createReadStream('file1.txt');
3 | var writableStream = fs.createWriteStream('file2.txt');
4 | 
5 | readableStream.setEncoding('utf8');
6 | 
7 | readableStream.on('data', function(chunk) {
8 |     writableStream.write(chunk);
9 | });


--------------------------------------------------------------------------------
/UNIT 4/buffer.js:
--------------------------------------------------------------------------------
 1 | // var buf = Buffer.alloc(15);
 2 | // const buf1 = Buffer.allocUnsafe(10);
 3 | // const buf1 = Buffer.allocUnsafe(10, 3);
 4 | // console.log(buf1);
 5 | 
 6 | // const buf1 = Buffer.allocUnsafe(100);
 7 | // const len = buf1.write('welcomeuser',2,5,'utf8');
 8 | // console.log(len);
 9 | 
10 | // const buf = Buffer.from('welcome to  node.js class');
11 | // var len = buf.length
12 | // console.log(len)
13 | 
14 | // array-to-buffer.js
15 | 
16 | // var arr = [true, true, false];
17 | // const buf = Buffer.from(arr);
18 |  
19 | // for(const byt of buf.values()){
20 | //     console.log(byt);
21 | // }
22 | 
23 | // // convert-json-to-buffer.js
24 | 
25 | // const msg = '{"name":"John", "age":"22"}';
26 | // var jsonObj = JSON.parse(msg);
27 |  
28 | // // convert JSON object to String
29 | // var jsonStr = JSON.stringify(jsonObj);
30 |  
31 | // // read json string to Buffer
32 | // const buf = Buffer.from(jsonStr);
33 |  
34 | // console.log(buf.length);
35 | 
36 | buf = new Buffer.alloc(26);
37 | for (var i = 0 ; i < 26 ; i++) {
38 |   buf[i] = i + 97;
39 | }
40 | 
41 | console.log( buf.toString('ascii'));       // outputs: abcdefghijklmnopqrstuvwxyz
42 | console.log( buf.toString('ascii',0,5));   // outputs: abcde
43 | console.log( buf.toString('utf8',0,5));    // outputs: abcde
44 | console.log( buf.toString(undefined,0,5));


--------------------------------------------------------------------------------
/UNIT 4/calculator.js:
--------------------------------------------------------------------------------
 1 | // Returns addition of two numbers
 2 | exports.add = function (a, b) {
 3 |     return a+b;
 4 | }; 
 5 |  
 6 | // Returns difference of two numbers
 7 | exports.subtract = function (a, b) {
 8 |     return a-b;
 9 | }; 
10 |  
11 | // Returns product of two numbers
12 | exports.multiply = function (a, b) {
13 |     return a*b;
14 | };


--------------------------------------------------------------------------------
/UNIT 4/chaining_stream.js:
--------------------------------------------------------------------------------
1 | var fs = require('fs');
2 | var zlib = require('zlib');
3 | 
4 | fs.createReadStream('input.txt')
5 |   .pipe(zlib.createGunzip())
6 |   .pipe(fs.createWriteStream('output.txt'));


--------------------------------------------------------------------------------
/UNIT 4/clearInterval.js:
--------------------------------------------------------------------------------
1 | function welcome () {  
2 |   console.log("Welcome Class!");  
3 | }  
4 | var id1 = setTimeout(welcome,1000);  
5 | var id2 = setInterval(welcome,1000);  
6 |   
7 | // clearInterval(id2);  


--------------------------------------------------------------------------------
/UNIT 4/clearTimeout.js:
--------------------------------------------------------------------------------
 1 | function welcome () {  
 2 |     console.log("Welcome Class!");  
 3 |   }  
 4 |   var id1 = setTimeout(welcome,1000);  
 5 |   var id2 = setInterval(welcome,1000);  
 6 |    clearTimeout(id1); 
 7 | 
 8 | //   Its recursive in nature.
 9 | //    It will terminate after one step if you use ClearInterval.
10 | 
11 | // clearImmediate(immediateObject): 
12 | //   It is used to stop an immediateObject, as created by setImmediate
13 | // clearInterval(intervalObject): 
14 | //     It is used to stop an intervalObject, as created by setInterval
15 | // clearTimeout(timeoutObject): 
16 | //     It prevents a timeoutObject, as created by setTimeout


--------------------------------------------------------------------------------
/UNIT 4/createDB.js:
--------------------------------------------------------------------------------
1 | var mongoclient=require('mongodb').MongoClient;
2 | var url="mongodb://localhost:27017/3k";
3 | mongoclient.connect(url,function(err,db){
4 |     if(err)throw err;
5 |     console.log("DB has been created and switched to db");
6 |     db.close();
7 | })


--------------------------------------------------------------------------------
/UNIT 4/delete.js:
--------------------------------------------------------------------------------
1 | var fs = require('fs');
2 | 
3 | fs.unlink('test.txt', function () {
4 |     
5 |     console.log('write operation complete.');
6 | 
7 | });


--------------------------------------------------------------------------------
/UNIT 4/delete1.js:
--------------------------------------------------------------------------------
 1 | var MongoClient = require('mongodb').MongoClient;
 2 | var url = "mongodb://localhost:27017/";
 3 | MongoClient.connect(url, function(err, db) {
 4 | if (err) throw err;
 5 | var dbo = db.db("3k");
 6 | var myquery = { address: 'Mountain 21' };
 7 | dbo.collection("customers").deleteOne(myquery, function(err, obj) {
 8 | if (err) throw err;
 9 | console.log("1 document deleted");
10 | db.close();
11 | });
12 | });
13 | 


--------------------------------------------------------------------------------
/UNIT 4/deleteMany.js:
--------------------------------------------------------------------------------
 1 | var url = "mongodb://localhost:27017/";
 2 | MongoClient.connect(url, function(err, db) {
 3 | if (err) throw err;
 4 | var dbo = db.db("3k");
 5 | var myquery = { address: "Highway 37" }; // address starts with O
 6 | dbo.collection("customers").deleteMany(myquery, function(err, obj) {
 7 | if (err) throw err;
 8 | console.log(obj.deletedCount+ " document(s) deleted");
 9 | db.close();
10 | });
11 | });
12 | 


--------------------------------------------------------------------------------
/UNIT 4/document_insert.js:
--------------------------------------------------------------------------------
 1 | var MongoClient = require('mongodb').MongoClient;
 2 | var url = "mongodb://localhost:27017/";
 3 | MongoClient.connect(url, function(err, db) {
 4 | if (err) throw err;
 5 | var dbo = db.db("3k");
 6 | var myobj = { name: "Company Inc", address: "Highway 37" };
 7 | dbo.collection("customers").insertOne(myobj, function(err,
 8 | res) {
 9 | if (err) throw err;
10 | console.log("1 document inserted");
11 | db.close();
12 | });
13 | });
14 | 


--------------------------------------------------------------------------------
/UNIT 4/document_insertMany.js:
--------------------------------------------------------------------------------
 1 | var MongoClient = require('mongodb').MongoClient;
 2 | var url = "mongodb://localhost:27017/";
 3 | MongoClient.connect(url, function(err, db) {
 4 | if (err) throw err;
 5 | var dbo = db.db("3k");
 6 | var myobj = [
 7 | { name: 'John', address: 'Highway 71'},
 8 | { name: 'Peter', address: 'Lowstreet 4'},
 9 | { name: 'Amy', address: 'Apple st 652'},
10 | { name: 'Hannah', address: 'Mountain 21'}]
11 | dbo.collection("customers").insertMany(myobj, function(err, res) {
12 | if (err) throw err;
13 | console.log("Number of documents inserted: " + res.insertedCount);
14 | db.close();
15 | });
16 | });
17 | 


--------------------------------------------------------------------------------
/UNIT 4/event.js:
--------------------------------------------------------------------------------
 1 | // Import events module
 2 | var events = require('events');
 3 | 
 4 | // Create an eventEmitter object
 5 | var eventEmitter = new events.EventEmitter();
 6 | 
 7 | // Create an event handler as follows
 8 | var connectHandler = function connected() {
 9 |    console.log('connection succesful.');
10 |   
11 |    // Fire the data_received event 
12 |    eventEmitter.emit('data_received');
13 | }
14 | 
15 | // Bind the connection event with the handler
16 | eventEmitter.on('connection', connectHandler);
17 |  
18 | // Bind the data_received event with the anonymous function
19 | eventEmitter.on('data_received', function(){
20 |    console.log('data received succesfully.');
21 | });
22 | 
23 | // Fire the connection event 
24 | eventEmitter.emit('connection');
25 | 
26 | console.log("Program Ended.");


--------------------------------------------------------------------------------
/UNIT 4/event1.js:
--------------------------------------------------------------------------------
 1 | var emitter = require('events').EventEmitter;
 2 | function iterateProcessor(num) {
 3 |   var emt = new emitter();
 4 |   setTimeout(function () {
 5 |         for (var i = 1; i <= num; i++) {
 6 |           emt.emit('BeforeProcess', i);
 7 |           console.log('Processing Iteration:' + i);
 8 |           emt.emit('AfterProcess', i);
 9 |         }
10 |       }
11 |       , 5000)
12 |   return emt;
13 | }
14 | var it = iterateProcessor(5);
15 |  
16 | it.on('BeforeProcess', function (info) {
17 |   console.log('Starting the process for ' + info);
18 | });
19 |  
20 | it.on('AfterProcess', function (info) {
21 |   console.log('Finishing processing for ' + info);
22 | });


--------------------------------------------------------------------------------
/UNIT 4/event2.js:
--------------------------------------------------------------------------------
 1 | // get the reference of EventEmitter class of events module
 2 | var events = require('events');
 3 | 
 4 | //create an object of EventEmitter class by using above reference
 5 | var em = new events.EventEmitter();
 6 | 
 7 | //Subscribe for FirstEvent
 8 | em.on('FirstEvent', function (data) {
 9 |     console.log('First subscriber: ' + data);});
10 | 
11 | // Raising FirstEvent
12 | em.emit('FirstEvent', 'This is my first Node.js event emitter example.');
13 | 


--------------------------------------------------------------------------------
/UNIT 4/event2_addList.js:
--------------------------------------------------------------------------------
 1 | var emitter = require('events').EventEmitter;
 2 | 
 3 | var em = new emitter();
 4 | 
 5 | //Subscribe FirstEvent
 6 | em.addListener('FirstEvent', function (data) {
 7 |     console.log('First subscriber: ' + data);
 8 | });
 9 | 
10 | //Subscribe SecondEvent
11 | em.on('SecondEvent', function (data) {
12 |     console.log('First subscriber: ' + data);
13 | });
14 | 
15 | // Raising FirstEvent
16 | em.emit('FirstEvent', 'This is my first Node.js event emitter example.');
17 | 
18 | // Raising SecondEvent
19 | em.emit('SecondEvent', 'This is my second Node.js event emitter example.');
20 | 


--------------------------------------------------------------------------------
/UNIT 4/eventLoop_understanding.js:
--------------------------------------------------------------------------------
 1 | const perimeter = function(a,b){
 2 | return 2*(a+b);
 3 | }
 4 | const showPerimeter = function(){
 5 | console.log(perimeter(2,2));
 6 | }
 7 | const start = function(){
 8 | console.log('Initailizing.....');
 9 | console.log('Getting Started.....');
10 | setTimeout(showPerimeter,10000);
11 | console.log('Ending program.....');
12 | console.log('Exiting.....');
13 | }
14 | start();


--------------------------------------------------------------------------------
/UNIT 4/eventemitter.js:
--------------------------------------------------------------------------------
1 | var events=require("events");
2 | var eventEmitter= new events.EventEmitter();
3 | var  myEventHandler=function()
4 | {
5 |     console.log("i love Icecream");
6 | }
7 |  eventEmitter.on("cream",myEventHandler);
8 |  eventEmitter.emit("cream");


--------------------------------------------------------------------------------
/UNIT 4/findall.js:
--------------------------------------------------------------------------------
 1 | var MongoClient = require('mongodb').MongoClient;
 2 | var url = "mongodb://localhost:27017/";
 3 | MongoClient.connect(url, function(err, db) {
 4 | if (err) throw err;
 5 | var dbo = db.db("3k");
 6 | dbo.collection("customers").find({}).toArray(function(err,
 7 | result) {
 8 | if (err) throw err;
 9 | console.log(result);
10 | db.close();
11 | });
12 | });
13 | 


--------------------------------------------------------------------------------
/UNIT 4/httpHeader.js:
--------------------------------------------------------------------------------
 1 | var http = require('http');
 2 | 
 3 | http.createServer(function (req, res) {
 4 | 
 5 | // response header to display content as html    
 6 | 
 7 | res.writeHead(200, {'Content-Type':'text/html'})    
 8 | 
 9 | // Write response to client
10 | 
11 | res.write('<b>Hi Guest</b><br/>');
12 | 
13 | res.write('<span style="font-weight:bold; color:Green">Welcome to Class</span>');
14 | 
15 | res.end();
16 | 
17 | }).listen(4200, console.info("Server listening on port 4200"));


--------------------------------------------------------------------------------
/UNIT 4/httprequestclient.js:
--------------------------------------------------------------------------------
 1 | const http = require('http');
 2 | 
 3 | const options = {
 4 |     hostname: 'localhost',
 5 |     port: 8081,
 6 |     path: '/admin',
 7 |     method: 'GET'
 8 | };
 9 | var callback= function(response){
10 | 	var body="";
11 | 	response.on('data', function(data){
12 | 		body+=data;
13 | 	});
14 | 
15 |  //binds an event with its event handler
16 |  response.on('end', function(){
17 |  	console.log(body);
18 |  });
19 |  response.on('error', (err) => {
20 | 
21 |     console.error(err);
22 | });
23 | 
24 | 
25 | };
26 | const req = http.request(options, callback);
27 | 
28 | req.end();


--------------------------------------------------------------------------------
/UNIT 4/httprequestserver.js:
--------------------------------------------------------------------------------
 1 | var http = require('http'); // Import Node.js core module
 2 | 
 3 | var server = http.createServer(function (req, res) {   //create web server
 4 |     if (req.url == '/') { //check the URL of the current request
 5 |         
 6 |         // set response header
 7 |         res.writeHead(200, { 'Content-Type': 'text/html' }); 
 8 |         
 9 |         // set response content    
10 |         res.write('<html><body><p>This is home Page.</p></body></html>');
11 |         res.end();
12 |     
13 |     }
14 |     else if (req.url == "/student") {
15 |         
16 |         res.writeHead(200, { 'Content-Type': 'text/html' });
17 |         res.write('<html><body><p>This is student Page.</p></body></html>');
18 |         res.end();
19 |     
20 |     }
21 |     else if (req.url == "/admin") {
22 |         
23 |         res.writeHead(200, { 'Content-Type': 'text/html' });
24 |         res.write('<html><body><p>This is admin Page.</p></body></html>');
25 |         res.end();
26 |     
27 |     }
28 |     else
29 |         res.end('Invalid Request!');
30 | 
31 | });
32 | 
33 | server.listen(8081); //6 - listen for any incoming requests
34 | 
35 | console.log('Node.js web server at port 8081 is running..');


--------------------------------------------------------------------------------
/UNIT 4/moduleExample.js:
--------------------------------------------------------------------------------
1 | var calculator = require('./calculator');
2 |  
3 | var a=10, b=5;
4 |  
5 | console.log("Addition : "+calculator.add(a,b));
6 | console.log("Subtraction : "+calculator.subtract(a,b));
7 | console.log("Multiplication : "+calculator.multiply(a,b));
8 | 


--------------------------------------------------------------------------------
/UNIT 4/openFile.js:
--------------------------------------------------------------------------------
 1 | var fs = require('fs');
 2 | 
 3 | fs.open('input.txt', 'r', function (err, fd) {
 4 |     
 5 |                             if (err) {
 6 |                             return console.error(err);
 7 |     }
 8 |     
 9 |                             var buffr = new Buffer.alloc(1024);
10 |     
11 |     fs.read(fd, buffr, 0, buffr.length, 0, function (err, bytes) {
12 |        
13 |                             if (err) throw err;
14 |             
15 |                             // Print only read bytes to avoid junk.
16 |                             if (bytes > 0) {
17 |             console.log(buffr.slice(0, bytes).toString());
18 |         }
19 |         
20 |                             // Close the opened file.
21 |         fs.close(fd, function (err) {
22 |                             if (err) throw err;
23 |         });
24 |     });
25 | });
26 | 


--------------------------------------------------------------------------------
/UNIT 4/pipe_stream.js:
--------------------------------------------------------------------------------
1 | var fs = require('fs');
2 | var readableStream = fs.createReadStream('input.txt');
3 | var writableStream = fs.createWriteStream('file1.txt');
4 | 
5 | readableStream.pipe(writableStream);


--------------------------------------------------------------------------------
/UNIT 4/readFile.js:
--------------------------------------------------------------------------------
1 | var fs = require('fs');
2 | 
3 | fs.readFile('TestFile.txt','utf8', function (err, data) {
4 |                     if (err) throw err;
5 | 
6 |     console.log(data);
7 | });


--------------------------------------------------------------------------------
/UNIT 4/renameFile.js:
--------------------------------------------------------------------------------
1 | var fs = require('fs');
2 | 
3 | //Rename the file "mynewfile1.txt" into "myrenamedfile.txt":
4 | fs.rename('TestFile.txt', 'myrenamedfile.txt', function (err) {
5 |   if (err) throw err;
6 |   console.log('File Renamed!');
7 | });
8 | 


--------------------------------------------------------------------------------
/UNIT 4/setInterval.js:
--------------------------------------------------------------------------------
 1 | // function printHello() {
 2 | //    console.log( "Hello, World!");
 3 | // }
 4 | 
 5 | // // Now call above function after 2 seconds
 6 | // setInterval(printHello, 2000);
 7 | 
 8 | setInterval(function() {  
 9 |     console.log("setInterval: Hey! 1 millisecond completed!..");   
10 |    }, 1000); 


--------------------------------------------------------------------------------
/UNIT 4/setTimeout.js:
--------------------------------------------------------------------------------
1 | function printHello() {
2 |    console.log( "Hello, World!");
3 | }
4 | 
5 | // Now call above function after 2 seconds
6 | setTimeout(printHello, 2000);


--------------------------------------------------------------------------------
/UNIT 4/update.js:
--------------------------------------------------------------------------------
 1 | var MongoClient = require('mongodb').MongoClient;
 2 | var url = "mongodb://127.0.0.1:27017/";
 3 | MongoClient.connect(url, function(err, db) {
 4 | if (err) throw err;
 5 | var dbo = db.db("3k");
 6 | var myquery = { address: "Apple st 652" };
 7 | var newvalues = { $set: {name: "Mickey", address: "Canyon 123" } };
 8 | dbo.collection("customers").updateOne(myquery, newvalues, function(err,
 9 | res) {
10 | if (err) throw err;
11 | console.log("1 document updated");
12 | db.close();
13 | });
14 | });
15 | 


--------------------------------------------------------------------------------
/UNIT 4/writeFile.js:
--------------------------------------------------------------------------------
1 | var fs = require('fs');
2 | 
3 | fs.writeFile('test.txt', 'Hello World!', function (err) { 
4 |                         if (err)
5 |         console.log(err);
6 |                         else
7 |         console.log('Write operation complete.');
8 | });


--------------------------------------------------------------------------------
/UNIT 5/AnchorCodes/FileUpload.txt:
--------------------------------------------------------------------------------
 1 | const express = require("express");
 2 | const fileupload = require("express-fileupload");
 3 | const fs=require("fs");
 4 | 
 5 | const app = express();
 6 | 
 7 | app.use(fileupload())
 8 | 
 9 | app.get('/',(req,res) => {
10 | 	//var retform="<form action='http://localhost:3000/upload' method='post' encType='multipart/form-data'> <input type='file' name='sampleFile'/><input type='submit' value='Upload'/></form>";
11 | 	res.sendFile(__dirname + '/index.html')
12 | })
13 | 
14 | app.post('/',(req,res) =>
15 | {
16 | 	if(req.files)
17 | 		console.log(req.files);
18 | 	
19 | 	var file = req.files.file;
20 | 	var filename=file.name
21 | 	console.log(filename)
22 | 	file.mv('./files/' + filename,function(err)
23 | 	{
24 | 		if(err){
25 | 			res.send(err)
26 | 		}else
27 | 		{
28 | 			res.send("File "+file.name+" uploaded!!")
29 | 		}
30 | 		
31 | 	})
32 | })
33 | 
34 | 
35 | app.listen(3000,function(){
36 | 	console.log("Server up at 3000")
37 | });


--------------------------------------------------------------------------------
/UNIT 5/AnchorCodes/Form(pug).txt:
--------------------------------------------------------------------------------
 1 | html
 2 | html
 3 |    head
 4 | 
 5 |    body
 6 |       form(action = "/", method = "POST")
 7 |          div
 8 |             label(for = "first") First name:
 9 |             input(name = "first" value = "Web")
10 |          br
11 |          div
12 |             label(for = "last") Last name:
13 |             input(name = "last" value = "Technology")
14 |          br
15 |          button(type = "submit") Submit


--------------------------------------------------------------------------------
/UNIT 5/AnchorCodes/Formdata.txt:
--------------------------------------------------------------------------------
 1 | var express = require('express');
 2 | var bodyParser = require('body-parser');
 3 | var multer = require('multer');
 4 | var upload = multer();
 5 | var app = express();
 6 | 
 7 | app.get('/', function(req, res){
 8 |    res.render('form');
 9 | });
10 | 
11 | app.set('view engine', 'pug');
12 | app.set('views', './views');
13 | 
14 | app.use(bodyParser.json()); 
15 | app.use(bodyParser.urlencoded({ extended: true })); 
16 | //form-urlencoded
17 | // for parsing multipart/form-data
18 | app.use(upload.array()); 
19 | app.use(express.static('public'));
20 | 
21 | app.post('/', function(req, res){
22 |    console.log(req.body);
23 |    res.send("recieved your request!");
24 | });
25 | app.listen(3000);


--------------------------------------------------------------------------------
/UNIT 5/AnchorCodes/Middleware-static.txt:
--------------------------------------------------------------------------------
 1 | //middleware static 
 2 | var express = require('express');
 3 | //const path=require('path');
 4 | var app = express();
 5 | //const router = express.Router();
 6 | app.use(express.static('folder1'));
 7 |   app.listen(process.env.port || 3000);
 8 |   
 9 |   console.log('Running at Port 3000');
10 | 
11 | //folder1 contains html,css,img files


--------------------------------------------------------------------------------
/UNIT 5/AnchorCodes/cookie.js:
--------------------------------------------------------------------------------
 1 | var express = require("express");
 2 | 
 3 | var app = express();
 4 | 
 5 | var cookieParser = require("cookie-parser");
 6 | 
 7 | app.use(cookieParser());
 8 | 
 9 | app.get("/",function(req,res){
10 | 	console.log(req.cookies.uname);
11 | 	//console.log(res.cookie("uname"));
12 | 	res.cookie("uname", "expressuser",{sameSite:true,secure:true}).send("Cookie set!!")
13 | })
14 | app.get("/setexp",function(req,res){
15 | 	console.log(req.cookies.uname);
16 | 	res.cookie("uname","newuser",{maxAge:5000}).send("Cookie set!!")
17 | })
18 | app.get("/delete",function(req,res){
19 | 	console.log(req.cookies.uname);
20 | 	res.clearCookie("uname").send("Cookie cleared!!")
21 | })
22 | app.listen(3000,function(){
23 | 	console.log("Server up at 3000")
24 | })


--------------------------------------------------------------------------------
/UNIT 5/AnchorCodes/err_handling.txt:
--------------------------------------------------------------------------------
 1 | var express= require("express")
 2 | 
 3 | var app= express();
 4 | 
 5 | app.use("/student",function(err,req,res,next){
 6 | 
 7 |     console.log(err.stack);
 8 | 
 9 |     res.send(500).send("Something went wrong")
10 | 
11 | })
12 | 
13 | app.get("/student/:id",function(req,res,next){
14 | 
15 |     if(req.params.id.indexOf("2000")!=-1){
16 | 
17 |       var err = new Error("Something went Wrong!!!")
18 | 
19 |         next(err)
20 | 
21 |     }
22 | 
23 |     else{
24 | 
25 |         res.send("Everything is fine with"+req.params.id)
26 | 
27 |         next();
28 | 
29 |     }
30 | 
31 |     app.use("/student",function(req,res){
32 | 
33 |         console.log("I am Fine")
34 | 
35 |     })
36 | 
37 | })
38 | 
39 |     app.listen(3000,function(){
40 | 
41 |         console.log("Server is listening on port 3000")
42 | 
43 |   
44 | 
45 | })


--------------------------------------------------------------------------------
/UNIT 5/AnchorCodes/exp.js:
--------------------------------------------------------------------------------
 1 | var express = require("express"); // npm install express --save
 2 | 
 3 | var app = express();
 4 | var MongoClient = require("mongodb").MongoClient;
 5 | var bodyParser = require('body-parser');
 6 | 
 7 | app.use(bodyParser.json()); //populates req.body with the req message body or leaves it as null object
 8 | 
 9 | app.get("/", function(req, res){
10 | 	res.send("Welcome to my page!!!")
11 | })
12 | 
13 | //var hellorouter = require("./hello.js")
14 | 
15 | //app.use("/hello", hellorouter); // http://localhost:3000/hello
16 | 
17 | var studrouter = require("./student.js")
18 | 
19 | app.use("/student", studrouter); // http://localhost:3000/student
20 | app.get("/student",function())
21 | app.listen(3000, function(){
22 | 	console.log("Server listening on 3000...")
23 | });


--------------------------------------------------------------------------------
/UNIT 5/AnchorCodes/exp_mw.js:
--------------------------------------------------------------------------------
 1 | var express = require("express"); // npm install express --save
 2 | 
 3 | var app = express();
 4 | 
 5 | // Middleware Functions
 6 | // request - response (life cycle of a request)
 7 | 
 8 | // authentication
 9 | // parsing request
10 | // response header (compression)
11 | // Router
12 | 
13 | app.use(function(req, res, next){
14 | 	//task
15 | 	console.log("First MW Function")
16 | 	next();
17 | })
18 | 
19 | app.use("/", function(req, res, next){
20 | 	//task
21 | 	console.log("Route MW Function 1")
22 | 	next();
23 | })
24 | 
25 | app.use("/", function(req, res, next){
26 | 	//task
27 | 	console.log("Route MW Function 2")
28 | 	next();
29 | })
30 | 
31 | app.get("/", function(req, res, next){
32 | 	console.log("Route Function")
33 | 	res.send("Welcome to my page!!!")
34 | 	next();
35 | })
36 | 
37 | app.use("/", function(req, res, next){
38 | 	//task
39 | 	console.log("Route MW Function 3")
40 | 	next();
41 | })
42 | 
43 | app.use(function(req, res){
44 | 	//task
45 | 	console.log("Last MW Function")
46 | 	//next();
47 | })
48 | 
49 | app.listen(3000, function(){
50 | 	console.log("Server listening on 3000...")
51 | });


--------------------------------------------------------------------------------
/UNIT 5/AnchorCodes/hello.js:
--------------------------------------------------------------------------------
 1 | var express = require("express"); // npm install express --save
 2 | 
 3 | var router = express.Router();
 4 | //var MongoClient = require("mongo").MongoCLient;
 5 | 
 6 | router.get("/", function(req,res){
 7 | 	res.send("Hi There!!!")
 8 | //	MongoClient.collection("hello").find({})
 9 | })
10 | router.get("/:sid", function(req,res){
11 | // localhost/student/1234
12 | // localhost:3000/hello?msg=greeting - querystring
13 | 	res.send("Hi There, Greetings!!!")
14 | 	req.query // => {} req.query.dept req.query.rtype
15 | 	//req.params.msg
16 | //	MongoClient.collection("hello").find({dept:req.query.dept})
17 | })
18 | 
19 | 
20 | 
21 | router.post("/", function(req,res){ //creation of resource
22 | 	res.send("Hello Greeting Message saved!")
23 | 	//req.body
24 | //	MongoClient.collection("hello").insert(req.body)
25 | })
26 | router.put("/:id",function(req,res){ //modification of resource
27 | 	res.send("Hello Greeting Message updated!")
28 | //	MongoClient.collection("hello").update({srn:req.params.id},{studentprofile:skjjgksfgsfgnsfngk}) //BLOB
29 | })
30 | router.delete("/", function(req,res){
31 | 	res.send("Hello Greeting Message deleted!")
32 | //	MongoClient.collection("hello").delete({})
33 | })
34 | 
35 | module.exports = router;
36 | 


--------------------------------------------------------------------------------
/UNIT 5/AnchorCodes/index.js:
--------------------------------------------------------------------------------
 1 | var express = require('express');
 2 | var app = express();
 3 | app.use(function(req,res,next){
 4 | 	console.log("Got request at "+new Date().toString())
 5 | 	//for(i in req)
 6 | 	//	console.log(req[i])
 7 | 	next()
 8 | })
 9 | app.use('/', function(req,res,next){
10 | 	console.log("Middleware 1 ")
11 | 	//for(i in req)
12 | 	//	console.log(req[i])
13 | 	next()
14 | })
15 | app.get('/', function(req, res,next){
16 |    res.send("Hello world!");
17 |    next()
18 | });
19 | app.use('/', function(req,res,next){
20 | 	console.log("Middleware 2")
21 | 	//for(i in req)
22 | 	//	console.log(req[i])
23 | 	next()
24 | })
25 | app.use(function(req,res){
26 | 	console.log("Middleware 3")
27 | 	//for(i in req)
28 | 	//	console.log(req[i])
29 | })
30 | 
31 | app.get('/welcome/:id', function(req, res){
32 | 	res.send("Welcome to the Express "+req.params.id)
33 | })
34 | app.listen(3000);


--------------------------------------------------------------------------------
/UNIT 5/Application_level_middleware.js:
--------------------------------------------------------------------------------
1 | //Application-level middleware
2 | var express = require('express')
3 | var app = express()
4 | 
5 | app.get('/user/:id', function (req, res, next) {
6 |     console.log('Request Type:', req.method)
7 |     next()
8 |   })
9 | app.listen(3000);


--------------------------------------------------------------------------------
/UNIT 5/Unit5.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adithya-m08/WT-Programs/8f3e37a39ba2ed942fca1b2580f9980a2daf1a7c/UNIT 5/Unit5.pdf


--------------------------------------------------------------------------------
/UNIT 5/bodyparser.js:
--------------------------------------------------------------------------------
 1 | var express = require('express')
 2 | var bodyParser = require('body-parser')
 3 | 
 4 | var app = express()
 5 | 
 6 | // create application/json parser
 7 | var jsonParser = bodyParser.json()
 8 | 
 9 | // create application/x-www-form-urlencoded parser
10 | var urlencodedParser = bodyParser.urlencoded({ extended: false })
11 | 
12 | // POST /login gets urlencoded bodies
13 | app.post('/login', urlencodedParser, function (req, res) {
14 |   res.send('welcome, ' + req.body.username)
15 | })
16 | 
17 | // POST /api/users gets JSON bodies
18 | app.post('/api/users', jsonParser, function (req, res) {
19 |   // create user in req.body
20 | })
21 | 
22 | app.listen(3000)


--------------------------------------------------------------------------------
/UNIT 5/bodyparser1.js:
--------------------------------------------------------------------------------
 1 | var express = require('express')
 2 | const bodyParser = require('body-parser');
 3 | var app = express()
 4 | 
 5 | // To parse URL encoded data
 6 | app.use(bodyParser.urlencoded({ extended: false }));
 7 | 
 8 | // To parse json data
 9 | app.use(bodyParser.json());
10 | 
11 | app.listen(2300);


--------------------------------------------------------------------------------
/UNIT 5/cookie1.js:
--------------------------------------------------------------------------------
 1 | var express = require("express");
 2 | 
 3 | var app = express();
 4 | 
 5 | var cookieParser = require("cookie-parser");
 6 | 
 7 | app.use(cookieParser());
 8 | 
 9 | app.get("/",function(req,res){
10 | 	console.log(req.cookies.uname);
11 | 	console.log(res.cookie("uname"));
12 | 	res.cookie("uname", "expressuser",{sameSite:true,secure:true}).send("Cookie set!!")
13 | })
14 | app.get("/setexp",function(req,res){
15 | 	console.log(req.cookies.uname);
16 | 	res.cookie("uname","newuser",{maxAge:5000}).send("Cookie set!!")
17 | })
18 | app.get("/delete",function(req,res){
19 | 	console.log(req.cookies.uname);
20 | 	res.clearCookie("uname").send("Cookie cleared!!")
21 | })
22 | app.listen(3000,function(){
23 | 	console.log("Server up at 3000");
24 | })


--------------------------------------------------------------------------------
/UNIT 5/cookie11.js:
--------------------------------------------------------------------------------
 1 | var express = require('express')
 2 | var cookieParser = require('cookie-parser')
 3 | 
 4 | var app = express()
 5 | app.use(cookieParser())
 6 | 
 7 | app.get('/', function (req, res) {
 8 |   // Cookies that have not been signed
 9 |   console.log('Cookies: ', req.cookies)
10 | 
11 |   // Cookies that have been signed
12 |   console.log('Signed Cookies: ', req.signedCookies)
13 | })
14 | 
15 | app.listen(8080);


--------------------------------------------------------------------------------
/UNIT 5/cookie111.js:
--------------------------------------------------------------------------------
 1 | var express = require('express');  
 2 | var cookieParser = require('cookie-parser');  
 3 | var app = express();  
 4 | app.use(cookieParser()); 
 5 |  
 6 | app.get('/cookieset',function(req, res){  
 7 | res.cookie('cookie_name', 'cookie_value');  
 8 | res.cookie('company', 'WEB Tech');  
 9 | res.cookie('name', 'ABC');  
10 |   
11 | res.status(200).send('Cookie is set');  
12 | });  
13 | app.get('/cookieget', function(req, res) {  
14 |   res.status(200).send(req.cookies);  
15 | });  
16 | app.get('/', function (req, res) {  
17 |   res.status(200).send('Welcome to cookie CLass!');  
18 | });  
19 | var server = app.listen(8000, function () {  
20 |   var host = server.address().address;  
21 |   var port = server.address().port;  
22 |   console.log('Example app listening at http://%s:%s', host, port);  
23 | })


--------------------------------------------------------------------------------
/UNIT 5/cookieparser.js:
--------------------------------------------------------------------------------
 1 | var express = require('express')
 2 | var cookieParser = require('cookie-parser')
 3 | 
 4 | var app = express()
 5 | app.use(cookieParser())
 6 | 
 7 | app.get('/', function (req, res) {
 8 |   // Cookies that have not been signed
 9 |   console.log('Cookies: ', req.cookies)
10 | 
11 |   // Cookies that have been signed
12 |   console.log('Signed Cookies: ', req.signedCookies)
13 | })
14 | 
15 | app.listen(8080);


--------------------------------------------------------------------------------
/UNIT 5/errorhandling.js:
--------------------------------------------------------------------------------
 1 | var express = require('express');
 2 | var app = express();
 3 | 
 4 | app.get('/', function(req, res){
 5 |    //Create an error and pass it to the next function
 6 |    var err = new Error("Something went wrong");
 7 |    next(err);
 8 | });
 9 | 
10 | /*
11 |  * other route handlers and middleware here
12 |  * ....
13 |  */
14 | 
15 | //An error handling middleware
16 | app.use(function(err, req, res, next) {
17 |    res.status(500);
18 |    res.send("Oops, something went wrong.")
19 | });
20 | 
21 | app.listen(3000);


--------------------------------------------------------------------------------
/UNIT 5/express_server.js:
--------------------------------------------------------------------------------
1 | const express = require('express')
2 | const app = express();
3 | app.listen(3000, () => {
4 |     console.log('Server running on localhost:3000');
5 |   });


--------------------------------------------------------------------------------
/UNIT 5/fileupload.js:
--------------------------------------------------------------------------------
 1 | const express = require('express');
 2 | const fileUpload = require('express-fileupload');
 3 | const path= require('path');
 4 | const app = express();
 5 | 
 6 | app.use(fileUpload());
 7 | app.get('/',function(req,res){
 8 |   res.sendFile(path.join(__dirname+'/upload.html'));
 9 |   //__dirname : It will resolve to your project folder.
10 | });
11 | 
12 | app.post('/upload', function(req, res) {
13 |   
14 |     if (req.files){
15 |       console.log(req.files); //view object structure
16 |       var uploadedFile=req.files.sampleFile; // The name of the input field (i.e. "sampleFile") in upload.html
17 |       var uploadedFile_name= uploadedFile.name;
18 |       var uploadedFile_size= uploadedFile.size;
19 | 
20 | 
21 |       //create a directory called uploads
22 |       uploadedFile.mv('./uploads/'+ uploadedFile_name, function(err){
23 |         if (err){
24 |           console.log(err);
25 |         }
26 |         res.send(uploadedFile_name+ ' of size' + uploadedFile_size+ ' uploaded!');
27 |       });
28 |     }
29 | });
30 | app.listen(8080);
31 | 
32 | 
33 | 


--------------------------------------------------------------------------------
/UNIT 5/form.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |     <head>
 3 |         <title>Form</title>
 4 |     </head>
 5 |     <body>
 6 |         <form method="POST" action="/submit-form">
 7 |             <input type="text" name="username" placeholder="Enter Username" />
 8 |             <input type="submit" />
 9 |           </form>
10 |     </body>
11 | </html>


--------------------------------------------------------------------------------
/UNIT 5/form_1.html:
--------------------------------------------------------------------------------
 1 | <!--form_1.html-->
 2 | <html>
 3 |     <head>
 4 |         <title>Form</title>
 5 |     </head>
 6 |     <body>
 7 |         <form method="GET" action="/submit-form">
 8 |             <input type="text" name="username" placeholder="Enter Username" />
 9 |             <input type="submit" />
10 |           </form>
11 |     </body>
12 | </html>


--------------------------------------------------------------------------------
/UNIT 5/formserver.js:
--------------------------------------------------------------------------------
 1 | const express = require('express')
 2 | const app = express()
 3 | const path = require('path');
 4 | app.use(express.urlencoded({
 5 |   extended: true
 6 | }));
 7 | app.post('/submit-form', (req, res) => {
 8 |     const username = req.body.username
 9 |     res.send("<h1>Welcome " + username + "</h1>");
10 |   });
11 | 
12 | app.get('/',function(req,res){
13 |     res.sendFile(path.join(__dirname+'/form.html'));
14 |     //__dirname : It will resolve to your project folder.
15 |   });
16 | app.listen(8080);
17 | 


--------------------------------------------------------------------------------
/UNIT 5/formserver_1.js:
--------------------------------------------------------------------------------
 1 | const express = require('express')
 2 | const app = express()
 3 | const path = require('path');
 4 | const url = require('url');
 5 | 
 6 | app.get('/submit-form', (req, res) => {
 7 |     const username = url.parse(req.url, true).query.username;
 8 |     res.send("<h1>Welcome " + username + "</h1>");
 9 |   });
10 | 
11 | app.get('/',function(req,res){
12 |     res.sendFile(path.join(__dirname+'/form_1.html'));
13 |   });
14 | app.listen(8081);
15 | 


--------------------------------------------------------------------------------
/UNIT 5/index.js:
--------------------------------------------------------------------------------
1 | var express = require('Express');
2 | var app = express();
3 | 
4 | var things = require('./things.js');
5 | 
6 | //both index.js and things.js should be in same directory
7 | app.use('/things', things);
8 | 
9 | app.listen(3000);


--------------------------------------------------------------------------------
/UNIT 5/middleware.js:
--------------------------------------------------------------------------------
 1 | const express = require('express');
 2 | const app = express();
 3 | 
 4 | // Simple request time logger
 5 | app.use((req, res, next) => {
 6 |    console.log("A new request received at " + Date.now());
 7 | 
 8 |    // This function call tells that more processing is
 9 |    // required for the current request and is in the next middleware function/route handler.
10 |    next();  
11 | });
12 | 
13 | app.get('/home', (req, res) => {
14 |   res.send('Home Page');
15 | });
16 | 
17 | app.get('/about', (req, res) => {
18 |   res.send('About Page');
19 | });
20 | 
21 | app.listen(3000, () => console.log('Example app listening on port 3000!'));


--------------------------------------------------------------------------------
/UNIT 5/middleware3.js:
--------------------------------------------------------------------------------
 1 | var express = require('express');
 2 | var app = express();
 3 | 
 4 | const middleware = (req,res,next)=>{
 5 |     console.log("Hello am Middleware function");
 6 | //  next();
 7 | }
 8 | 
 9 | app.get('/',function(req,res){
10 |     res.send("<h1>Welcome to Express JS Home page</h1>");
11 | });
12 | app.get('/login',middleware,function(req,res){
13 |     res.send("<h1>Login Here!!!</h1>")
14 | });
15 | app.get('/contact',middleware,function(req,res){
16 |     res.send("<h1>Contact US</h1>");
17 | })
18 | // other HTTP methods are, app.get(),app.post(),app.put(),app.delete()
19 | var server = app.listen(5000);


--------------------------------------------------------------------------------
/UNIT 5/middleware_1.js:
--------------------------------------------------------------------------------
 1 | //logs request based on time
 2 | var express= require('express');
 3 | var app=express();
 4 | 
 5 | //middleware function
 6 | var requesttime= function(req,res,next){
 7 | 	req.requestTime=Date.now();
 8 | 	next(); //calls next middleware
 9 | }
10 | //how to use the middleware? using app.use
11 | 
12 | app.use(requesttime);
13 | app.get('/', function(req,res){
14 | 	var responseText='A request was made! <br> ';
15 | 	responseText+="Time of request : " + req.requestTime;
16 | 	res.send(responseText);
17 | });
18 | app.listen(8081);  


--------------------------------------------------------------------------------
/UNIT 5/middleware_2.js:
--------------------------------------------------------------------------------
 1 | var express= require('express');
 2 | var app=express();
 3 | app.use('/user/:id', function(req,res,next){
 4 | 
 5 | 	if (req.params.id==0){
 6 | 		res.send("Provide another id!");
 7 | 	}
 8 | 	else{
 9 | 		next();  
10 | 	}
11 | });
12 | //give all routes
13 | app.get("/",function(req,res){
14 | 	res.send("Welcome");
15 | 
16 | 
17 | });
18 | app.get("/user/:id",function(req,res){
19 | 		res.send("ID:  " + req.params.id);
20 | 
21 | });
22 | 
23 | app.get("/user/:id/hello",function(req,res){
24 | 	res.send("Hello ID:  " + req.params.id);
25 | 
26 | });
27 | 
28 | app.listen(8081, function(){
29 | 	console.log("Server is running")
30 | });
31 | 
32 | 


--------------------------------------------------------------------------------
/UNIT 5/middlewareorder.js:
--------------------------------------------------------------------------------
 1 | var express= require('express');
 2 | var app=express();
 3 | //change the order of the middleware functions and observe what happens
 4 | 
 5 | app.use('/user/:id', function(req,res,next){
 6 | 	console.log("ID:" + req.params.id);
 7 | 	next();
 8 | });
 9 | app.use(function(req,res,next){
10 | 	console.log("/" + req.method);
11 | 	next();
12 | }); 
13 | app.get("/",function(req,res){
14 | 	res.send("Welcome");
15 | });
16 | app.get("/user/:id",function(req,res){
17 | 		res.send("ID:  " + req.params.id);
18 | });
19 | app.listen(8080, function(){
20 | 	console.log("Server is running")
21 | });
22 | 
23 | 


--------------------------------------------------------------------------------
/UNIT 5/middlewareorder_2.js:
--------------------------------------------------------------------------------
 1 | var express= require('express');
 2 | var app=express();
 3 | app.get("/user/:id",function(req,res){
 4 |     res.send("ID:  " + req.params.id);
 5 | });
 6 | app.use('/user/:id', function(req,res,next){
 7 | 	if (req.params.id==0){
 8 | 		res.send("Provide another id!");
 9 | 	}
10 | 	else{
11 | 		next();
12 | 	}
13 | });
14 | 
15 | app.get("/",function(req,res){
16 | 	res.send("Welcome");
17 | });
18 | app.get("/user/:id",function(req,res){
19 | 		res.send("ID:  " + req.params.id);
20 | });
21 | 
22 | app.listen(8081, function(){
23 | 	console.log("Server is running")
24 | });
25 | 
26 | 


--------------------------------------------------------------------------------
/UNIT 5/middlewareorder_3.js:
--------------------------------------------------------------------------------
 1 | var express = require('express')
 2 | var app = express()
 3 | 
 4 | var myLogger = function (req, res, next) {
 5 |   console.log('LOGGED')
 6 |   // next()
 7 | }
 8 | 
 9 | app.use(myLogger)
10 | 
11 | app.get('/', function (req, res) {
12 |   res.send('Hello World!')
13 | })
14 | 
15 | app.listen(3000)


--------------------------------------------------------------------------------
/UNIT 5/requestlogging.js:
--------------------------------------------------------------------------------
 1 | const express = require('express');
 2 | const app = express();
 3 | 
 4 | app.use((req, res, next) => {
 5 |   console.log(req);
 6 |   next();
 7 | });
 8 | 
 9 | app.get('/', (req, res, next) => {
10 |   res.send('Welcome Home');
11 | });
12 | 
13 | app.listen(3000);
14 | 
15 | 


--------------------------------------------------------------------------------
/UNIT 5/routing.js:
--------------------------------------------------------------------------------
 1 | var express = require('express');
 2 | var app = express();
 3 | 
 4 | app.get('/getabout', function (req, res) {
 5 |     res.send("GET Request Received at /getabout");
 6 |   });
 7 | app.post('/postfeedback', function (req, res) {
 8 |     console.log("POST Request Received at /postfeedback");
 9 |     res.send('Feedback Page');
10 | })
11 | app.delete('/deletepost', function (req, res) {
12 |     res.send('DELETE Request Received at /deletepost');
13 | });
14 | app.put('/post', function (req, res) {
15 |   res.send('PUT Request Received at /post')
16 | })
17 | app.listen(3000);


--------------------------------------------------------------------------------
/UNIT 5/things.js:
--------------------------------------------------------------------------------
 1 | var express = require('express');
 2 | var router = express.Router();
 3 | 
 4 | router.get('/', function(req, res){
 5 |    res.send('GET route on things.');
 6 | });
 7 | router.post('/', function(req, res){
 8 |    res.send('POST route on things.');
 9 | });
10 | 
11 | //export this router to use in our index.js
12 | module.exports = router;


--------------------------------------------------------------------------------
/UNIT 5/upload.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <body>
 3 |       <h1> Upload a file! </h1>
 4 |     <form 
 5 |       action='http://localhost:8080/upload' 
 6 |       method='post' 
 7 |       encType="multipart/form-data">
 8 |         <input type="file" name="sampleFile" />
 9 |         <input type='submit'  />
10 |     </form>     
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/UNIT 5/urlbuilding.js:
--------------------------------------------------------------------------------
1 | var express = require('express');
2 | var app = express();
3 | 
4 | app.get('/:id', function(req, res){
5 |     res.send('The id you specified is ' + req.params.id);
6 |  });
7 |  
8 | app.listen(3000);


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