├── 01-04-20202Notes.txt ├── BodyEntities.html ├── BootstrapProject ├── BOOSTRAP.rar ├── about.html ├── contactus.html ├── help.txt ├── index.html ├── login.html ├── password.html ├── register.html └── service.html ├── ClassExamples └── Login.html ├── Example1.html ├── Images ├── help.txt ├── kfctop.PNG ├── krusher1.PNG ├── omg1.PNG ├── omg2.PNG └── wings.PNG ├── OnlineClassNotes ├── 01-04-2020Notes.txt ├── 02-04-2020Notes.txt ├── 03-04-2020Notes.txt ├── 05-04-2020Notes.txt ├── 05-05-2020Notes.txt ├── 06-04-2020Notes.txt ├── 07-04-2020Notes.txt ├── 08-04-2020_Notes.txt ├── 10-04-2020Notes.txt ├── 11-04-2020Notes.txt ├── 13-04-2020Notes.txt ├── 14-04-2020Notes.txt ├── 15-04-2020Notes.txt ├── 18-04-2020 │ ├── Notes.txt │ └── angularJsArchitecture.png ├── 20-03-2020_Notes.txt ├── 20-04-2020Notes.txt ├── 20-04-2020notes.txt ├── 21-03-2020_Notes.txt ├── 21-04-2020Notes.txt ├── 22-04-2020Notes.txt ├── 23-03-2020_Notes.txt ├── 24-03-2020Notes.txt ├── 24-04-2020Notes.txt ├── 25-04-2020Notes.txt ├── 26-03-2020_Notes.txt ├── 27-03-2020_Notes.txt ├── 27-04-2020Notes.txt ├── 28-03-2020_notes.txt ├── 28-04-2020Notes.txt ├── 30-03-2020Notes.txt ├── 30-04-2020Notes.txt └── 31-03-2020_Notes.txt ├── ProjectSamples ├── help.txt └── index.html ├── SampleProject ├── BOOSTRAP.rar ├── ResponsiveLayout.txt └── help.txt ├── UploadExamples └── help.txt ├── datalist.html ├── detailsSummary.html ├── fontEffects.html ├── headings.html ├── home.html ├── iframe.html ├── imagedemo.html ├── index.html ├── ishop-Project ├── 04-05-2020Notes.txt ├── 11-05-2020Notes.txt ├── Database.txt ├── FinalProjectNotes.txt ├── MEANExample.txt ├── mongoInstall.txt └── notes.txt ├── links.html ├── login.html ├── nestedUnordered.html ├── orderedlist.html ├── shop.html ├── tableDemo.html ├── tables.html ├── textFormatting.html ├── textPresentation.html ├── tutorial.html └── unorderedlist.html /01-04-20202Notes.txt: -------------------------------------------------------------------------------- 1 | JQuery Selectors 2 | =============== 3 | - To Select and manipulate HTML DOM elements. 4 | - Selector can access any HTML element and can dynamically control the element. 5 | - Different types of JQuery Selectors 6 | 7 | Selector Syntax Description 8 | =========================================== 9 | * $("*") It is used to select all elements 10 | 11 | #id $("#id") It is used to select any element 12 | based on its ID. 13 | 14 | .class $(".class") It is used to select any element 15 | by using its class name. 16 | 17 | element $("tag") It is used to select any element 18 | by using its tag name. 19 | 20 | multiple $("h2,div,p") It will select the specified. 21 | 22 | Ex: 23 | 24 | 25 | 26 | JQuery Demo 27 | 47 | 49 | 56 | 57 | 58 |
59 |

60 |

61 | 62 | 63 | 64 | Selector Syntax Description 65 | =========================================== 66 | :first #("li:first") It will access the first li element. 67 | :last #("li:last") It will access the last li element. 68 | :even #("tr:even") It will access even occurance. 69 | :odd #("tr:odd") It will access odd occurance. 70 | 71 | Ex: 72 | 73 | 74 | 75 | JQuery Demo 76 | 96 | 98 | 109 | 110 | 111 |
    112 |
  1. Item-1
  2. 113 |
  3. Item-2
  4. 114 |
  5. Item-3
  6. 115 |
  7. Item-4
  8. 116 |
  9. Item-5
  10. 117 |
118 |
119 |

120 |

121 | 122 | 123 | 124 | JQuery HTML and CSS 125 | - JQuery provides a set of functions with are used to manipulate HTML and CSS. 126 | 127 | 1. html() : It is similar to innerHTML of javascript. 128 | It allows text with formats. 129 | 130 | 2. text() : It is similar to innerText of JS. It is plain 131 | text without formats. 132 | 133 | Ex: 134 | 135 | 136 | 142 | 143 | 144 |

145 |

146 | 147 | 148 | 3. val() : It is used to set or get a value present in 149 | element. like textbox, checkbox, radio, select 150 | 151 | Ex: 152 | 153 | 154 | 159 | 160 | 161 |
162 |
User Name
163 |
164 |
165 | 166 | 167 | 4. css() : It is used to apply css styles for any HTML 168 | element. 169 | Single Style 170 | $("div").css("property", "value"); 171 | Multiple Styles 172 | $("div").css({"property":"value", "property":"value"..}); 173 | 174 | Ex: 175 | 176 | 177 | 183 | 184 | 185 |
186 | 187 |
188 | 189 | 190 | 5. before() ] It is used to add content before and 191 | 6. after() ] after the current element. 192 | 193 | Ex: 194 | 195 | 196 | 202 | 203 | 204 |

Current Paragraph

205 | 206 | 207 | 7. prepend() : It adds new content as prefix with out 208 | deleting exisiting. 209 | 8. append() : It adds new content as suffix without 210 | deleting exisiting. 211 | 212 | Ex: 213 | 214 | 215 | 223 | 224 | 225 |

Current Paragraph

226 |

Naresh

227 | 228 | -------------------------------------------------------------------------------- /BodyEntities.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Entities 4 | 5 |
C Program
6 |
7 |
 8 |        #include <stdio.h>
 9 |        main() 
10 |        {
11 |          print("Welcome to HTML");
12 |        }
13 |       
14 |
15 | 16 | -------------------------------------------------------------------------------- /BootstrapProject/BOOSTRAP.rar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sharma-NareshIT/7AM_UI_Examples/4947aee90cc8010bb3eda8c3c733a5b1c8d1f7fc/BootstrapProject/BOOSTRAP.rar -------------------------------------------------------------------------------- /BootstrapProject/contactus.html: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | 9 | Naresh Technologies 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 |
30 |
31 | 32 | 33 |
34 |
35 |
36 |
37 |

Naresh Institute and Technologies

38 | 39 |
40 |
41 |

42 | 75 | 76 | 77 | 78 | 79 | 80 | 81 |
82 | 83 |
84 | 85 |

Contact Details

86 |


87 |
88 |
    89 |
  • Name: Naresh Technologies

  • 90 |
  • Email ID: info@nareshit.com

  • 91 |
  • Contact Number: +91-xxxxxxxxxx

  • 92 |
  • Address: Hyderabad, India

  • 93 |
94 |
95 |
96 |

97 |
98 | 99 | 100 | 101 |
102 | 103 |
104 | 105 |
106 | 107 | 108 |

109 | 110 | 154 | 155 | 156 | 157 | 158 | 159 |
160 |
161 |
162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | -------------------------------------------------------------------------------- /BootstrapProject/help.txt: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /BootstrapProject/login.html: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | 9 | Naresh Technologies 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 43 | 44 | 45 | 46 | 47 | 48 |
49 |
50 |
51 | 52 | 53 |
54 |
55 |
56 |
57 |

Naresh Institute and Technologies

58 | 59 |
60 |
61 |

62 | 95 | 96 |
97 |
98 |
99 | 100 | 101 | 102 |
103 |
104 | 105 |
106 |
107 |
108 |

109 |



110 |
111 |
112 |
113 | 114 |
115 |
116 | 117 |
118 | 119 | 120 | 121 |
122 |
123 |
124 | 125 |
126 |
127 | 128 |
129 | 130 | 131 | 132 |
133 |
134 |
135 |
136 |
137 |
138 | 139 |
140 |
141 | 142 |
143 |
144 | 145 |

146 |
147 |
148 |
149 | 150 | 151 | 152 |
153 |




154 |
155 |
156 | 157 | 158 | 159 | 160 |
161 | 162 | 163 | 164 | 165 |

166 | 167 | 211 | 212 | 213 | 214 | 215 | 216 |
217 |
218 |
219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | -------------------------------------------------------------------------------- /BootstrapProject/password.html: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | 9 | Naresh Technologies 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 |
30 |
31 | 32 | 33 |
34 |
35 |
36 |
37 |

Naresh Institute and Technologies

38 | 39 |
40 |
41 |

42 | 75 | 76 | 77 | 78 | 79 | 80 | 81 |
82 | 83 |
84 |
85 |
86 | 87 |

Registration Form

88 | 89 |

90 | 91 |
92 | 93 |

94 |
95 |
96 | 97 |
98 |
99 |
100 | 101 | 102 | 103 |
104 |
105 |
106 |
107 |
108 |
109 | 110 | 111 |
112 |
113 |
114 | 115 |
116 |
117 |
118 | 119 | 120 |
121 |
122 |
123 | 124 | 125 |
126 |
127 | 128 |
129 |
130 | 131 |
132 | 133 |
134 |
135 | 136 |
137 |
138 |


139 | your image 140 |
141 | 142 | 143 | 144 |
145 |
146 | 147 | 148 | 149 | 150 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 |

182 | 183 | 227 | 228 | 229 | 230 | 231 | 232 |
233 |
234 |
235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | -------------------------------------------------------------------------------- /BootstrapProject/service.html: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | 9 | Naresh Technologies 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 |
30 |
31 | 32 | 33 |
34 |
35 |
36 |
37 |

Naresh Institute and Technologies

38 | 39 |
40 |
41 |

42 | 75 | 76 | 77 | 78 | 79 | 80 |
81 | 82 |

Service

83 |

84 | 85 |
86 |
87 |
88 | 89 |
90 | 91 |
92 | 93 |

94 |
WEB DESIGN !!
95 |
96 |
97 | Web design refers to the design of websites that are displayed on the internet. It usually refers to the user experience aspects of website development rather than software development.
98 |
99 | 100 |
101 |
102 | 103 |
104 | 105 |

106 |
IT SERVICES !!
107 |
108 |
109 | We are ideally located in Larbert meaning we can offer IT support to businesses throughout Scotland. We take the hassle and worry out of your IT system by providing preventative and proactive IT support. 110 |
111 |
112 | 113 |
114 |
115 | 116 |
117 | 118 |

119 |
WEB MARKETING !!
120 |
121 |
122 | We are passionate about digital content creation, strategy and delivery. We deliver results by designing marketing strategies which improve our clients brand visibility. 123 |
124 |
125 | 126 |
127 |
128 | 129 |
130 |
131 |
132 | 133 | 134 | 135 | 136 | 137 | 138 |

139 | 140 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | -------------------------------------------------------------------------------- /ClassExamples/Login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Login 4 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 42 | 43 |
User Login
User Name
Password
  39 | 40 | 41 |
44 | 45 | 46 | -------------------------------------------------------------------------------- /Example1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Example 4 | 37 | 38 | 39 |
40 |
41 |
42 | 43 | 48 |
49 | 51 | 52 | -------------------------------------------------------------------------------- /Images/help.txt: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /Images/kfctop.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sharma-NareshIT/7AM_UI_Examples/4947aee90cc8010bb3eda8c3c733a5b1c8d1f7fc/Images/kfctop.PNG -------------------------------------------------------------------------------- /Images/krusher1.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sharma-NareshIT/7AM_UI_Examples/4947aee90cc8010bb3eda8c3c733a5b1c8d1f7fc/Images/krusher1.PNG -------------------------------------------------------------------------------- /Images/omg1.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sharma-NareshIT/7AM_UI_Examples/4947aee90cc8010bb3eda8c3c733a5b1c8d1f7fc/Images/omg1.PNG -------------------------------------------------------------------------------- /Images/omg2.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sharma-NareshIT/7AM_UI_Examples/4947aee90cc8010bb3eda8c3c733a5b1c8d1f7fc/Images/omg2.PNG -------------------------------------------------------------------------------- /Images/wings.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sharma-NareshIT/7AM_UI_Examples/4947aee90cc8010bb3eda8c3c733a5b1c8d1f7fc/Images/wings.PNG -------------------------------------------------------------------------------- /OnlineClassNotes/01-04-2020Notes.txt: -------------------------------------------------------------------------------- 1 | JQuery Selectors 2 | =============== 3 | - To Select and manipulate HTML DOM elements. 4 | - Selector can access any HTML element and can dynamically control the element. 5 | - Different types of JQuery Selectors 6 | 7 | Selector Syntax Description 8 | =========================================== 9 | * $("*") It is used to select all elements 10 | 11 | #id $("#id") It is used to select any element 12 | based on its ID. 13 | 14 | .class $(".class") It is used to select any element 15 | by using its class name. 16 | 17 | element $("tag") It is used to select any element 18 | by using its tag name. 19 | 20 | multiple $("h2,div,p") It will select the specified. 21 | 22 | Ex: 23 | 24 | 25 | 26 | JQuery Demo 27 | 47 | 49 | 56 | 57 | 58 |
59 |

60 |

61 | 62 | 63 | 64 | Selector Syntax Description 65 | =========================================== 66 | :first #("li:first") It will access the first li element. 67 | :last #("li:last") It will access the last li element. 68 | :even #("tr:even") It will access even occurance. 69 | :odd #("tr:odd") It will access odd occurance. 70 | 71 | Ex: 72 | 73 | 74 | 75 | JQuery Demo 76 | 96 | 98 | 109 | 110 | 111 |
    112 |
  1. Item-1
  2. 113 |
  3. Item-2
  4. 114 |
  5. Item-3
  6. 115 |
  7. Item-4
  8. 116 |
  9. Item-5
  10. 117 |
118 |
119 |

120 |

121 | 122 | 123 | 124 | JQuery HTML and CSS 125 | - JQuery provides a set of functions with are used to manipulate HTML and CSS. 126 | 127 | 1. html() : It is similar to innerHTML of javascript. 128 | It allows text with formats. 129 | 130 | 2. text() : It is similar to innerText of JS. It is plain 131 | text without formats. 132 | 133 | Ex: 134 | 135 | 136 | 142 | 143 | 144 |

145 |

146 | 147 | 148 | 3. val() : It is used to set or get a value present in 149 | element. like textbox, checkbox, radio, select 150 | 151 | Ex: 152 | 153 | 154 | 159 | 160 | 161 |
162 |
User Name
163 |
164 |
165 | 166 | 167 | 4. css() : It is used to apply css styles for any HTML 168 | element. 169 | Single Style 170 | $("div").css("property", "value"); 171 | Multiple Styles 172 | $("div").css({"property":"value", "property":"value"..}); 173 | 174 | Ex: 175 | 176 | 177 | 183 | 184 | 185 |
186 | 187 |
188 | 189 | 190 | 5. before() ] It is used to add content before and 191 | 6. after() ] after the current element. 192 | 193 | Ex: 194 | 195 | 196 | 202 | 203 | 204 |

Current Paragraph

205 | 206 | 207 | 7. prepend() : It adds new content as prefix with out 208 | deleting exisiting. 209 | 8. append() : It adds new content as suffix without 210 | deleting exisiting. 211 | 212 | Ex: 213 | 214 | 215 | 223 | 224 | 225 |

Current Paragraph

226 |

Naresh

227 | 228 | -------------------------------------------------------------------------------- /OnlineClassNotes/02-04-2020Notes.txt: -------------------------------------------------------------------------------- 1 | 8. appendTo() : It is used to append any content to a specific element. The content can be 2 | text or a template. 3 | A template is combination of HTML 4 | and Logic. 5 | 6 | Syntax: 7 | $(` ${expression} `).appendTo("element"); 8 | 9 | Ex: 10 | 11 | 12 | 27 | 28 | 29 |

Cities List

30 |
    31 | 32 |
33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 |
NamePrice
42 | 43 | 44 | 9. $.each() : It is an iterator, which is used to read values and keys from a collection. 45 | 46 | Syntax: 47 | $.each(collection, function(key, value) { 48 | 49 | }) 50 | 51 | Ex: 52 | 53 | 54 | 69 | 70 | 71 |

Cities List

72 |
    73 | 74 |
75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 |
NamePrice
84 | 85 | 86 | Ex: Nested Loops 87 | 88 | 89 | 90 | 104 | 105 | 106 |

Shopping Categories

107 |
    108 | 109 |
110 | 111 | -------------------------------------------------------------------------------- /OnlineClassNotes/03-04-2020Notes.txt: -------------------------------------------------------------------------------- 1 | Ex: Nested Iterations 2 | 3 | 4 | 5 | 19 | 20 | 21 |

Shopping Categories

22 |
    23 |
24 | 25 | 26 | 10. remove() : It is used to remove the selected elements from DOM. It will remove the element but not data and its events. 27 | 28 | 11. detach() : It is used to remove the selected element including all child nodes, but data will be there. 29 | 30 | 12. empty() : It removes only data without removing the element. 31 | 32 | 13. attr() : It is used to dymamically control any attribute of element. 33 | 34 | $("#pic").attr("attribute", "value"); 35 | $("#pic").attr({"attribute1":"value", "attribute2":"value"}) 36 | 37 | Ex: 38 | 39 | 40 | 41 | 42 | 54 | 55 | 56 |

Product Details

57 |
58 |
Name
59 |
60 |
Price
61 |
62 |
Preview
63 |
64 | 65 |
66 |
67 | 68 | 69 | 70 | Ex: 71 | 72 | 73 | 81 | 82 | 83 |
84 | Select City 85 | 88 |
89 | 90 | 91 | JQuery Events 92 | --------------------- 93 | - JQuery uses all JavaScript 94 | - Mouse Events 95 | mouseover() 96 | mousedown() 97 | mouseup() 98 | mouseout() 99 | mousemove() 100 | - Key Events 101 | keyup() 102 | keypress() 103 | keydown() 104 | - Miscelaneous Events 105 | click() 106 | focus() 107 | blur() 108 | change() 109 | select() 110 | submit() 111 | load() 112 | contextmenu() 113 | dblclick() 114 | 115 | Syntax: 116 | $("button").click(function(event){ 117 | 118 | }) 119 | $("select").change(function(event){ 120 | 121 | }) 122 | 123 | Ex: 124 | 125 | 126 | 140 | 141 | 142 | 143 |

144 | 149 |

150 | 151 |

152 | 153 | 154 | JQuery Effects 155 | -------------------------------------------------------------------------------- /OnlineClassNotes/05-04-2020Notes.txt: -------------------------------------------------------------------------------- 1 | JQuery HTML and CSS 2 | JQuery Events 3 | JQuery Effects 4 | - A set of functions that can handle animation and effects for HTML elements. 5 | - The functions are 6 | 1. hide() 7 | 2. show() 8 | 3. toggle() 9 | 4. fadeIn() 10 | 5. fadeOut() 11 | 6. fadeToggle() 12 | 7. fadeTo() 13 | 8. slideDown() 14 | 9. slideUp() 15 | 10. slideToggle() 16 | 11. animate() 17 | 12. delay() 18 | 19 | Ex: show() , hide(), toggle() 20 | $(selector).hide() 21 | $(selector).hide(duration, callback) 22 | $(selector).hide(duration, easing, callback) 23 | $(selector).show(duration, easing, callback) 24 | $(selector).toggle(duration, easing, callback) 25 | 26 | duration - Defined in milli seconds to display 27 | animation. or you can also define 28 | the effect as "fast", "slow". 29 | 30 | Ex: 31 | 32 | 33 | 48 | 49 | 50 |
51 | 52 | 53 | 54 |
55 | 56 | 57 |
58 | 59 | 60 | 61 | Ex: fadeIn(), fadeOut(), fadeToggle() 62 | 63 | 64 | 65 | 80 | 81 | 82 |
83 | 84 | 85 | 86 |
87 | 88 | 89 |
90 | 91 | 92 | Ex: animate() for defining your own css effects. 93 | 94 | 95 | 96 | 116 | 117 | 118 | 119 | 120 |

121 | 122 | 123 | 124 | 125 | EX: delay() is used to delay the animation 126 | 127 | 128 | 129 | 139 | 145 | 146 | 147 | 148 |

149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | JQuery UI 157 | - It provides pre-defined interface interactions, effects, widgets and themes built on JQuery javascript library. 158 | - It provides templates which you can implement in your application without writing much logic. 159 | - Jquery UI provides 160 | a) Interactions 161 | b) Widgets 162 | c) Effects 163 | d) Utilities 164 | 165 | Install JQuery UI 166 | ============== 167 | 1. Visit "https://jqueryui.com/" 168 | 2. Goto Download category 169 | 3. In Quick Downloads - Select "Stable" 170 | 4. Open and Extract the downloaded ZIP folder 171 | 5. Copy all files from folder 172 | 6. Goto your project and create a new folder 173 | "jquery-ui" 174 | 7. paste all copies jquery library files. 175 | 176 | Note: In order to use Jquery UI library you have to plugin the JQuery base library. 177 | 178 | JQuery UI Interactions 179 | ================== 180 | 1. Draggable 181 | 2. Droppable 182 | 3. Resizable 183 | 4. Selectable 184 | 5. Sortable 185 | 186 | Ex: 187 | 188 | 189 | 194 | 195 | 196 | 201 | 202 | 203 | 204 | 205 | 206 | -------------------------------------------------------------------------------- /OnlineClassNotes/05-05-2020Notes.txt: -------------------------------------------------------------------------------- 1 | Middleware 2 | - It is a software framework used to handle communication in network based applications. 3 | ex: Express 4 | 5 | Ex: 6 | 1. Install Express from Server Side folder 7 | >npm install express 8 | 9 | 2. Add a new file 10 | "Test.js" 11 | var express = require("express"); 12 | var mongoClient = require("mongodb").MongoClient; 13 | 14 | var url = "mongodb://127.0.0.1:27017"; 15 | 16 | var app = express(); 17 | 18 | app.get("/getProducts", function(request, response){ 19 | mongoClient.connect(url, function(err, clientObj){ 20 | if(!err) { 21 | var database = clientObj.db("shoppingdb"); 22 | database.collection("tblproducts").find({}).toArray(function(err, documents){ 23 | if(!err) { 24 | response.send(documents); 25 | } 26 | }) 27 | } 28 | }) 29 | }) 30 | 31 | app.get("/getCategories", function(req, res){ 32 | mongoClient.connect(url, function(err, clientObj){ 33 | if(!err) { 34 | var database = clientObj.db("shoppingdb"); 35 | database.collection("tblcategories").find({}).toArray(function(err, documents){ 36 | if(!err) { 37 | res.send(documents); 38 | } 39 | }) 40 | } 41 | }) 42 | }) 43 | 44 | app.get("/getUsers", function(req, res){ 45 | mongoClient.connect(url, function(err, clientObj){ 46 | if(!err) { 47 | var database = clientObj.db("shoppingdb"); 48 | database.collection("tblregister").find({}).toArray(function(err, documents){ 49 | if(!err) { 50 | res.send(documents); 51 | } 52 | }) 53 | } 54 | }) 55 | }) 56 | app.listen(8080); 57 | console.log("Server Listening on: http://127.0.0.1:8080"); 58 | 59 | 3. Add a new HTML file 60 | "Home.html" 61 | 62 | 63 | 64 | 65 | 71 | 72 | 84 | 85 | 86 |

JQuery Ajax Call

87 |
88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 |
Product IdNamePriceIs In StockPreview
103 |
104 | 105 | 106 | -------------------------------------------------------------------------------- /OnlineClassNotes/06-04-2020Notes.txt: -------------------------------------------------------------------------------- 1 | JQuery Interactions 2 | 1. Draggable 3 | 2. Droppable 4 | 3. Resizable 5 | 4. Selectable 6 | 5. Sortable 7 | 8 | Ex: 9 | 10 | 11 | 12 | 21 | 22 | 23 | 31 | 32 | 33 |
34 |
Draggable
35 |
36 | 37 |
38 |
Resizable
39 |
40 | 41 |
42 |
Selectable
43 |
44 |
    45 |
  1. HTML
  2. 46 |
  3. CSS
  4. 47 |
  5. JavaScript
  6. 48 |
49 |
50 |
Sortable
51 |
52 | 57 |
58 |
59 | 60 | 61 | JQuery Widgets 62 | - Widget is a gadget for web application. 63 | - It is template with combination of CSS, HTML , and JQuery. 64 | - You can apply by using simple functions. 65 | - Designing widgets requires a specific format to follow. 66 | 67 | 1. Accordion: Displays collapsible content panels for presenting information in a limited amount of space. 68 | 69 | 70 | Ex: 71 | 72 | 73 | 74 | 75 | 80 | 81 | 82 |
83 |

HTML Tutorial

84 |
85 |

Depending on how you obtained the Windows software, this is a license agreement between (i) you and the device manufacturer or software installer that distributes the software with your device; or (ii) you and Microsoft Corporation (or, based on where you live or, if a business, where your principal place of business is located, one of its affiliates) if you acquired the software from a retailer.

86 |
87 |

JavaScript Basics

88 |
89 |

Depending on how you obtained the Windows software, this is a license agreement between (i) you and the device manufacturer or software installer that distributes the software with your device; or (ii) you and Microsoft Corporation (or, based on where you live or, if a business, where your principal place of business is located, one of its affiliates) if you acquired the software from a retailer.

90 |
91 |

CSS Examples

92 |
93 |

Depending on how you obtained the Windows software, this is a license agreement between (i) you and the device manufacturer or software installer that distributes the software with your device; or (ii) you and Microsoft Corporation (or, based on where you live or, if a business, where your principal place of business is located, one of its affiliates) if you acquired the software from a retailer.

94 |
95 |
96 | 97 | 98 | 2. AutoComplete : Enables users to quickly find and select from pre-populated list of value as they type. 99 | 100 | Ex: 101 | 102 | 103 | 104 | 105 | 119 | 120 | 121 | Search Topics : 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | -------------------------------------------------------------------------------- /OnlineClassNotes/07-04-2020Notes.txt: -------------------------------------------------------------------------------- 1 | JQuery Widgets: 2 | 1. Accordion 3 | 2. AutoComplete 4 | 3. Checkboxradio : It is a widget used for radio and checkboxes in a form. They have a predefined selection and visual effect with built in CSS and Jquery. 5 | 6 | Ex: 7 | 8 | 9 | 10 | 11 | 16 | 17 | 18 |
19 | Choose Payment Mode 20 | 21 | 22 | 23 | 24 | 25 |
26 |
27 | Choose Courses 28 | 29 | 30 | 31 | 32 |
33 | 34 | 35 | 5. DatePicker : It shows a calendar and allows the user to select a date and input date into control. It can work across all types of browsers. 36 | 37 | Ex: 38 | 39 | 40 | 41 | 42 | 47 | 48 | 49 | Date of Birth: 50 | 51 | 52 | 53 | 6. Dialog : It is used to display any content in a dialog box, which client can open and close dynamically. 54 | 55 | Ex: 56 | 57 | 58 | 59 | 60 | 67 | 68 | 69 | 70 |
71 | 80 | 81 | 82 | 7. Menu: It is used to display a menu bar that can show categories and items in categories dynamically. 83 | 84 | Ex: 85 | 86 | 87 | 88 | 89 | 94 | 95 | 96 |
97 | 115 |
116 | 117 | 118 | 8. Select Menu : It is mostly used for displaying a dropdown menu with pre-defined effects. 119 | 120 | Ex: 121 | 122 | 123 | 124 | 125 | 130 | 131 | 132 |
133 | Select Your City 134 | 140 |
141 |
142 | Select Product 143 | 147 |
148 | 149 | 150 | 9. Tabs : It is used for intra document navigation. It will design a tabed menu. 151 | 152 | Ex: 153 | 154 | 155 | 156 | 157 | 162 | 163 | 164 | 183 | 184 | -------------------------------------------------------------------------------- /OnlineClassNotes/08-04-2020_Notes.txt: -------------------------------------------------------------------------------- 1 | JQuery Ajax 2 | - Ajax is Asynchronous JavaScript and XML 3 | - Async is a technique used to handle multiple tasks simultaneously at the same time i.e without locking any task it can process other tasks. 4 | - In Synchronous technique other tasked are locked when any one task is being performed. 5 | - JQuery provide a set of Ajax functions and methods that allow us to load data into page without reloading the page. 6 | - Ajax Enable Partial Post Back mechanism. 7 | - Only Specific portion of page is loaded or posted without refreshing the complete page. 8 | - The various Ajax methods provided by JQuery are 9 | 10 | 1. ajaxComplete() 11 | 2. ajaxError() 12 | 3. ajaxSend() 13 | 4. ajaxStart() 14 | 5. ajaxStop() 15 | 6. ajaxSuccess() 16 | 7. jquery.get() 17 | 8. jquery.getJson() 18 | 9. jquery.post() 19 | 10. load() etc.. 20 | 21 | 22 | .getJson() : Loads JSON-encoded data from the server using Http GET request. 23 | 24 | Syntax: 25 | .getJson(url, function(data) { 26 | 27 | }) 28 | 29 | Ex: 30 | 1. Create a new folder by name "data" 31 | 2. Add a new file into data folder by name 32 | "products.json" 33 | [ 34 | { 35 | "Name": "Samsung TV", 36 | "Price": 34000.44, 37 | "IsInStock": true 38 | }, 39 | { 40 | "Name":"Nike Casuals", 41 | "Price": 2000.44, 42 | "IsInStock":false 43 | } 44 | ] 45 | 46 | 3. Add a new HTML file 47 | "Demo.html" 48 | 49 | 50 | 51 | 52 | 53 | 66 | 67 | 68 |
69 |

Products Data

70 | 71 |
72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 |
NamePriceStock Status
84 |
85 |
86 | 87 | 88 | 89 | Note: Ajax examples you can run only from WebServer. [Open with Live Server] 90 | 91 | $.getJson("url", function(){ 92 | }) 93 | .done(function() { }) 94 | .fail(function(){ }) 95 | .always(function{}) 96 | 97 | JQuery Bootstrap 98 | -------------------------------------------------------------------------------- /OnlineClassNotes/10-04-2020Notes.txt: -------------------------------------------------------------------------------- 1 | $.getJSON() 2 | .done(function(){ }) 3 | .fail(function(){}) 4 | .always(function(){}) 5 | 6 | done() → Executes when request is success 7 | fail() → Executes when request failed 8 | always() → Executes everytime i.e on succes and 9 | on fail. 10 | 11 | Ex: 12 | 13 | 14 | 32 | 33 | 34 | 35 |

36 |
37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 |
NamePriceStock
47 |
48 | 49 | 50 | Ajax Request Status: 51 | - Ajax calls in a page will be processing by using the following methods. 52 | - The status of ajax is shown by using these methods. 53 | 54 | .ajaxComplete() 55 | .ajaxError() 56 | .ajaxStart() 57 | .ajaxStop() 58 | .ajaxSuccess() 59 | .ajaxError() 60 | 61 | Syntax: 62 | $(function() { 63 | 64 | }) 65 | .ajaxComplete(function(){ }) 66 | .ajaxSuccess(function(){ }) 67 | 68 | Ex: 69 | 70 | 71 | 96 | 97 | 98 | 99 |

100 |
101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 |
NamePriceStock
111 |
112 | 113 | 114 | JQuery Bootstrap 115 | - Install Boostrap 116 | - Install JQuery 117 | 118 | JQuery Bootstrap provides a set of Templates that makes the presentation more interactive and responsive. 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | -------------------------------------------------------------------------------- /OnlineClassNotes/11-04-2020Notes.txt: -------------------------------------------------------------------------------- 1 | JQuery Bootstrap 2 | 1. Alert : It is used for displaying an alert box, which you can dynamically control. 3 | 4 | Class Description 5 | --------------------------------------------- 6 | alert It defines an alert box for a 7 | container. 8 | alert-primary 9 | alert-secondary Defines various colors for alert. 10 | alert-success 11 | alert-danger 12 | alert-warning 13 | alert-info 14 | 15 | alert-link It is to display a link in alert box. 16 | it changes according to base 17 | color. 18 | alert-heading It is used for headings in alert. 19 | 20 | alert-dismissible It specifies that alert can be 21 | closed dynamically. It requires 22 | "data-dismiss" to close. 23 | 24 | JQuery Attribute Description 25 | ---------------------------------------------------------------------- 26 | role It defines the type of element. 27 | data-dismiss It is used to close alert or any 28 | element. 29 | 30 | JQuery Classes 31 | ----------------------------------------------------------------------- 32 | .fade It gives fading effect 33 | .show It give show effect 34 | .close It is to define close style. 35 | 36 | 37 | Ex: 38 | 39 | 40 | 41 | 42 | 50 | 51 | 52 |
53 |

Alert Demo

54 | 55 | 61 |
62 | 63 | 64 | 65 | Carousel 66 | ------------- 67 | A slideshow component for cycling through element- Images or slide of text. 68 | 69 | Class Description 70 | ========================================== 71 | carousel It is to display a collection of 72 | slides. 73 | slide It is used to defining slide animation. 74 | carousel-inner To group all slides. 75 | carousel-item To define a slide. 76 | active To make a slide active to start 77 | with. 78 | d-block ] TO set slide size to fit the 79 | w-100 ] window. 80 | 81 | JQueryAttribute Description 82 | ======================================== 83 | data-ride It defines the carousel to start. 84 | data-slide It specifies to previous or next. 85 | data-slide-to It specifies to any slide number [index] 86 | data-target It specifies carousel id to use on click. 87 | 88 | 89 | Carousel with Controls 90 | =================== 91 | 92 | Class Description 93 | _____________________________________________ 94 | carousel-control-prev 95 | carousel-control-next 96 | carousel-control-prev-icon 97 | carousel-control-next-icon 98 | 99 | Ex: 100 | 101 | 102 | 103 | 104 | 105 | 106 | 132 | 133 | 134 | 135 | 136 | -------------------------------------------------------------------------------- /OnlineClassNotes/13-04-2020Notes.txt: -------------------------------------------------------------------------------- 1 | Carousel Transition: 2 | - carousel slide 3 | - carousel-fade 4 | 5 | Syntax: 6 | 78 |
79 |
80 |
81 |

JavaScript

82 |
83 |
84 |

something about javascript ...

85 |
86 |
87 |
88 | 89 | Bootstrap DropDown 90 | - It is only used for create a dropdown for navigation. 91 | - Don't use as alternative for 93 | 94 | Classes: 95 | 1. dropdown-menu 96 | 2. dropdown-item 97 | 3. dropdown-divider 98 | 4. dropdown-toggle-split 99 | 5. dropdown-toggle 100 | 6. dropdown-item-text 101 | 7. active 102 | 8. disabled 103 | 104 | JQuery Attribute 105 | 1. data-toggle 106 | 107 | Note: To use dropdown you need a bootstrap.bundle.js library 108 | 109 | 110 | Ex: 111 | 112 | 113 | 114 | 115 | 116 | 117 |

Navigation

118 | 130 | 131 | 132 | -------------------------------------------------------------------------------- /OnlineClassNotes/14-04-2020Notes.txt: -------------------------------------------------------------------------------- 1 | Bootstrap Modal 2 | - It is similar to a dialog in JQuery UI. 3 | - It shows a dialog you can open and close dynamically. 4 | 5 | Classes: 6 | 1. modal 7 | 2. modal-dialog 8 | 3. modal-content 9 | 4. modal-header 10 | 5. modal-title 11 | 6. modal-body 12 | 7. modal-footer 13 | 14 | JQuery attributes: 15 | 1. role = dialog 16 | 2. role = document 17 | 3. data-toggle : On and OFF 18 | 4. data-target : It specifies the target dialog 19 | 5. data-dismiss : close the modal 20 | 21 | Ex: 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 60 | 61 | Bootstrap Navbar 62 | - To create a responsive navigation bar using JQuery and Bootstrap 63 | 64 | Classes 65 | 1. navbar-brand 66 | 2. navbar-nav 67 | 3. navbar-toggler 68 | 4. form-inline 69 | 5. navbar-text 70 | 6. collapse.navbar-collapse 71 | 7. nav-link 72 | 8. nav-item 73 | 74 | Note: Always design navbar using "nav" element 75 | 76 | Ex: 77 | 78 | 79 | 80 | 81 | 82 | 83 | 102 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /OnlineClassNotes/15-04-2020Notes.txt: -------------------------------------------------------------------------------- 1 | Bootstrap Pagination 2 | - Pagination allows to navigate between contents in a page. 3 | - It allows navigation within the data i.e next, previous, first, last etc.. 4 | 5 | Classes: 6 | 1. pagination , pagination-sm, pagination-lg 7 | 2. page-item 8 | 3. page-link 9 | 4. active 10 | 5. disabled 11 | 6. justify-content-center, between, end 12 | 13 | Ex: 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 32 | 33 | 34 | 35 | Bootstrap Popover 36 | - It is used to display tool-tip for your contents 37 | - It requires "popper.js" 38 | 39 | Attributes: 40 | 1. data-container = "body" 41 | 2. data-toggle = "popover" 42 | 3. data-placement = "top, right, bottom, left" 43 | 4. data-content = "any content" 44 | 45 | To Enable Popper you need a JQuery function 46 | "popover()" 47 | 48 | EX: 49 | 50 | 51 | 52 | 53 | 58 | 59 | 60 |

Popper

61 | 62 | 63 | 64 | Note: Add title attribute with popover to display titles. 65 | 66 | Syntax: 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /OnlineClassNotes/18-04-2020/Notes.txt: -------------------------------------------------------------------------------- 1 | Angular JS 2 | - Angular JS is an open source, cross platform, JavaScript based Framewok developed by Google and maintained by a large community of organizations and developers to address the issues in SPA. 3 | 4 | - Angular Js uses JavaScript based library. 5 | - It allows to build application and control application flow. 6 | - It uses frameworks like MVC, MVP and MVVM for building applications. 7 | - It also uses frameworks like Cordova, Ionic and NativeScript, which are are used to build cross platform mobile apps. 8 | - Angular JS started in 2010 with 1.0 9 | - Angular JS latest version till data is 1.7.9 10 | 11 | Installing Angular JS for Project 12 | ---------------------------------------------- 13 | 1. Open your project location in Terminal or command prompt 14 | 2. Install Angular Js core library. 15 | 16 | > npm install angular 17 | 18 | node_modules 19 | |_angular 20 | |_angular.js 21 | 22 | Ex: Home.html 23 | 24 | 25 | 26 | 27 | Angular JS {{1+1}} 28 | 29 | 30 | 31 |

Welcome to Angular Js

32 |
33 | Addition : {{10+20}} 34 |
35 |
36 | Multiply : {{4 * 4}} 37 |
38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /OnlineClassNotes/18-04-2020/angularJsArchitecture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sharma-NareshIT/7AM_UI_Examples/4947aee90cc8010bb3eda8c3c733a5b1c8d1f7fc/OnlineClassNotes/18-04-2020/angularJsArchitecture.png -------------------------------------------------------------------------------- /OnlineClassNotes/20-03-2020_Notes.txt: -------------------------------------------------------------------------------- 1 | JavaScript Browser Events 2 | 1. Mouse Events 3 | 2. Key Events 4 | 3. Timer Events 5 | 4. Miscelaneous Events 6 | 7 | Mouse Events in JavaScript: 8 | The mouse events are used to handle interactions when user is moving the mouse and handling various mouse buttons. 9 | 10 | Event Description 11 | ============================================ 12 | onmouseover It specifies the action when mouse pointer is over any element. 13 | onmouseout It specifies the action when 14 | mouse pointer is moved out of 15 | any element. 16 | onmousedown It specifies the action to perform 17 | when mouse button is down 18 | over any element. 19 | onmouseup It specifies the action to perform 20 | when mouse button is released 21 | over the element. 22 | onmousemove It specifies the action to perform 23 | when mouse pointer is moving 24 | over any element. 25 | 26 | 27 | Ex: MouseOver and Mouse Out 28 | 29 | 30 | 31 | 32 | Mouse Events 33 | 53 | 69 | 70 | 71 |

Mouse over ads will change

72 | 73 |

Mouse over Demo

74 |
75 | 76 |
77 |

Mouse Over Zoom

78 |
79 | 80 |
81 | 82 | 83 | 84 | 85 | Ex: Mouse Down and Mouse Up 86 | 87 | 88 | 89 | 90 | Mouse Down Demo 91 | 99 | 100 | 101 | 102 |

Press hold down your mouse button to turn ON bulb and release to OFF.

103 | 104 | 105 | 106 | 107 | Ex: Mouse Move 108 | 109 | 110 | 111 | 112 | Mouse Move 113 | 119 | 131 | 132 | 133 |
134 | 135 | Red color 136 | 137 | 138 | Green color 139 | 140 | 141 | Blue color 142 | 143 |
144 |
145 |

Sample Text

146 |
147 | 148 | 149 | 150 | -------------------------------------------------------------------------------- /OnlineClassNotes/20-04-2020Notes.txt: -------------------------------------------------------------------------------- 1 | Angular JS Framework Components 2 | 3 | Component Description 4 | ----------------------------------------------------------------------------- 5 | 1. Module A module is collection of various 6 | component in angular. Every module 7 | contains controllers, models, views, 8 | directives, filters, services. 9 | 2. Controller It contains application specific logic 10 | 3. Model It represents the data and contains 11 | data. 12 | 4. View It represents user interface [UI] 13 | 5. Factory It is a collection of functions. 14 | 6. Service It is a collection of factories. 15 | 7. Directive It is used to make the static DOM into 16 | dynamic DOM. 17 | 18 | 19 | Angular JS Modules 20 | ------------------------------ 21 | 1. A module comprises of several components, which include factory, services, directives, filters etc. 22 | 23 | 2. A module is like a container with components. 24 | 3. It is similar to a Class in OOP. 25 | 4. Angular JS provide several built-in modules like: 26 | ngRoute, ngMessages, ngAnimations 27 | ngSanitize etc.. 28 | 5. Modules are present in a libary like 29 | angular.js 30 | angular-route.js 31 | angular-sanitize.js 32 | 6. You can create a new Module by using 33 | "angular.module()" 34 | 35 | Syntax: 36 | var app = angular.module("moduleName", [ dependencies ]); 37 | var app = angular.module("DemoModule", ['ngRoute', 'ngSanitize',...]); 38 | 39 | 7. A module is applied to HTML document by using the directive "ng-app" 40 | 41 | 42 | 43 | 8. Every HTML document can use only one module i.e there can be only one "ng-app" defined in a page. 44 | 45 | Angular JS Controller 46 | =================== 47 | - Controller contains application specific logic. 48 | - The logic required for angular js interactions is defined in controller. 49 | - Every application can have several controllers. 50 | - Controller is created by using 51 | "angular.controller()" 52 | 53 | Syntax: 54 | angular.controller("ControllerName", function(){ 55 | 56 | 57 | }) 58 | 59 | - Controller is applied to document by using "ng-controller" directive 60 | 61 | 62 | 63 | 64 | Ex: 65 | 66 | 67 | 68 | 69 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | - The members declared in a controller are accesible only within the controller. 82 | - To define the members for global access you have to use a service called "$scope" in controller function. 83 | 84 | Ex: 85 | 86 | 87 | 88 | 89 | 99 | 100 | 101 |

{{message}}

102 |
103 | Addition : {{add(60,40)}} 104 |
105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | -------------------------------------------------------------------------------- /OnlineClassNotes/20-04-2020notes.txt: -------------------------------------------------------------------------------- 1 | Angular JS Framework Components 2 | 3 | Component Description 4 | ----------------------------------------------------------------------------- 5 | 1. Module A module is collection of various 6 | component in angular. Every module 7 | contains controllers, models, views, 8 | directives, filters, services. 9 | 2. Controller It contains application specific logic 10 | 3. Model It represents the data and contains 11 | data. 12 | 4. View It represents user interface [UI] 13 | 5. Factory It is a collection of functions. 14 | 6. Service It is a collection of factories. 15 | 7. Directive It is used to make the static DOM into 16 | dynamic DOM. 17 | 18 | 19 | Angular JS Modules 20 | ------------------------------ 21 | 1. A module comprises of several components, which include factory, services, directives, filters etc. 22 | 23 | 2. A module is like a container with components. 24 | 3. It is similar to a Class in OOP. 25 | 4. Angular JS provide several built-in modules like: 26 | ngRoute, ngMessages, ngAnimations 27 | ngSanitize etc.. 28 | 5. Modules are present in a libary like 29 | angular.js 30 | angular-route.js 31 | angular-sanitize.js 32 | 6. You can create a new Module by using 33 | "angular.module()" 34 | 35 | Syntax: 36 | var app = angular.module("moduleName", [ dependencies ]); 37 | var app = angular.module("DemoModule", ['ngRoute', 'ngSanitize',...]); 38 | 39 | 7. A module is applied to HTML document by using the directive "ng-app" 40 | 41 | 42 | 43 | 8. Every HTML document can use only one module i.e there can be only one "ng-app" defined in a page. 44 | 45 | Angular JS Controller 46 | =================== 47 | - Controller contains application specific logic. 48 | - The logic required for angular js interactions is defined in controller. 49 | - Every application can have several controllers. 50 | - Controller is created by using 51 | "angular.controller()" 52 | 53 | Syntax: 54 | angular.controller("ControllerName", function(){ 55 | 56 | 57 | }) 58 | 59 | - Controller is applied to document by using "ng-controller" directive 60 | 61 | 62 | 63 | 64 | Ex: 65 | 66 | 67 | 68 | 69 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | - The members declared in a controller are accesible only within the controller. 82 | - To define the members for global access you have to use a service called "$scope" in controller function. 83 | 84 | Ex: 85 | 86 | 87 | 88 | 89 | 99 | 100 | 101 |

{{message}}

102 |
103 | Addition : {{add(60,40)}} 104 |
105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | -------------------------------------------------------------------------------- /OnlineClassNotes/21-03-2020_Notes.txt: -------------------------------------------------------------------------------- 1 | Mouse Events 2 | - onmouseover 3 | - onmouseout 4 | - onmousedown 5 | - onmouseup 6 | - onmousemove 7 | 8 | Ex: Mouse Move Animation 9 | 10 | 11 | 19 | 20 | 21 |
22 | 23 |
24 | 25 | 26 | 27 | KeyEvents: 28 | - The key events specify actions to perform while user is keying in the characters. [Typing] 29 | 30 | Event Description 31 | =========================================== 32 | onkeyup It specifies actions to perform 33 | when key is released. 34 | onkeydown It specifies actions to perform 35 | when user hold down key. 36 | onkeypress It specifies actions to perform 37 | when user finish a key. 38 | 39 | 40 | KeyEvent Properties Description 41 | ============================================ 42 | keyCode It returns the actual key code 43 | ASCII value of key. 44 | A=65, Z=90 45 | charCode It also returns the character code 46 | only on char keys. 47 | 48 | which It is also same as keyCode but 49 | it is suitable for all keyboard 50 | layouts. 51 | 52 | altKey It returns true if alt key used 53 | shiftKey It returns true if shift key used 54 | ctrlKey It returns true if ctrl key used. 55 | 56 | Ex: 57 | 58 | 59 | 60 | 66 | 97 | 98 | 99 |

Register User

100 |
101 | 102 |
103 | 104 | 105 |
106 |
107 |
108 | 109 |
110 | 111 | 112 |
113 |
114 | 115 | -------------------------------------------------------------------------------- /OnlineClassNotes/21-04-2020Notes.txt: -------------------------------------------------------------------------------- 1 | Angular JS Directives 2 | - Directive is Angular JS is used for 3 | a) Extending Markup 4 | b) Making markup Dynamic 5 | c) Making the markup more interactive 6 | - Angular JS provides several built-in directives 7 | - The core library for directives in Angular Js is "angular.js". 8 | 9 | 1. ng-app : It is used to configure angular module 10 | to the document scope. 11 | 12 | 13 | 14 | 2. ng-controller: It is used to configure a controller. 15 | 16 | 17 | 18 | 3. ng-init : It is used to initialize value in angular scope. The initialized variables are accessbile from any location within the Angular scope. 19 | 20 | Ex: 21 | 22 | 23 | 24 | 25 |
26 | Mouse is over div {{count}} times. 27 |
28 | 29 | 30 | 31 | Ex: 32 | 33 | 34 | 35 | 36 |
37 | Mouse is over div {{count}} times. 38 |
39 |
40 | 41 |
42 | 43 |
44 | 45 | 46 | Ex: Any Type of value can be initialized by using 47 | "ng-init" 48 | 49 | 50 | 57 | 58 | 59 |
60 |
Initialize String
61 |
{{msg}}
62 |
Initialize Array
63 |
Cities[0]-{{cities[0]}}
Cities[1]-{{cities[1]}}
64 |
Initialize Object
65 |
Name : {{product.Name}}
Price : {{product.Price}}
InStock : {{(product.InStock==true)?"Available":"Out of Stock"}}
66 |
67 | 68 | 69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /OnlineClassNotes/22-04-2020Notes.txt: -------------------------------------------------------------------------------- 1 | ng-show / ng-hide : Used to show or hide any element 2 | ng-if : It is used to add or remove any element. 3 | 4 | Syntax: 5 | ng-show = true/false 6 | ng-hide = true/false 7 | ng-if = true/false 8 | 9 | Ex: 10 | 11 | 12 | 23 | 24 | 25 | 26 |
27 | 28 |
29 | 30 | 31 | ng-repeat: It is used to repeat any HTML element. 32 | It uses an iterator that can read elements 33 | from a collection in sequential order. 34 | 35 |
  • {{item}}
  • 36 | 37 | Ex: 38 | 39 | 40 | 46 | 47 | 48 |

    Categories

    49 |
      50 |
    1. {{item}}
    2. 51 |
    52 |

    Select Category

    53 | 56 |

    Choose a Category

    57 | 60 | 61 | 62 | 63 | Ex: Nested Repeat 64 | 65 | 66 | 67 | 77 | 82 | 83 | 84 |

    Amazon Shopping

    85 |
      86 |
    1. 87 | {{item.Category}} 88 | 91 |
    2. 92 |
    93 | 94 | 95 | Ex: 96 | 97 | 98 | 108 | 113 | 114 | 115 |

    Products Table

    116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 |
    NamePriceStock
    {{item.Name}}{{item.Price}}{{(item.IsInStock==true)?"Available":"Out of Stock"}}
    130 | 131 | 132 | 133 | -------------------------------------------------------------------------------- /OnlineClassNotes/23-03-2020_Notes.txt: -------------------------------------------------------------------------------- 1 | 2 | Miscelaneous Events 3 | - onfocus 4 | - onblur 5 | - onchange 6 | - oncut 7 | - oncopy 8 | - onpaste 9 | - onselect 10 | - onselectstart 11 | - onload 12 | - onsubmit 13 | - onreset 14 | 15 | 16 | OnFocus & OnBlur 17 | ================ 18 | - Onfocus will specify actions to perform when any element gets focus. 19 | - OnBlur specifies actions to perform when the element looses focus. 20 | 21 | Ex-1: 22 | 23 | 34 | 35 | 36 | User Name : 37 | 38 | 39 | 40 | 41 | Ex-2: (Validation) 42 | 43 | 44 | 54 | 64 | 65 | 66 | User Name : 67 | 68 | 69 | 70 | OnChange: 71 | It specifies the actions to perform when user is changing the value. You can use this event for elements like textbox, dropdown, number, range etc. 72 | 73 | Ex: 74 | 75 | 103 | 104 | 105 |
    106 | Zoom Out Zoom In 107 |
    108 |
    109 | 110 |
    111 | 112 | 113 | OnCut, OnCopy, OnPaste: 114 | These events are used to specify actions to perform when user finish operations like cut, copy and paste inside any element. 115 | 116 | Ex: 117 | 118 | 129 | 130 | 131 |
    132 | Your Comments 133 | 134 |
    135 |
    136 | 137 |
    138 | 139 | 140 | FAQ: How to disable cut, copy, paste, rightclick, selection in Page? 141 | A: Write the event in body and set "return false". 142 | 143 | Ex: 144 | 145 |

    You can't Copy our Content

    146 |

    Right Click Disabled on this Page.

    147 | 148 | 149 | -------------------------------------------------------------------------------- /OnlineClassNotes/24-03-2020Notes.txt: -------------------------------------------------------------------------------- 1 | onchange, oncut, oncopy, onpaste, oncontextmenu 2 | onselectstart, onfocus, onblur, onclick, ondblclick, onsubmit, onreset 3 | 4 | Ex: ondblclick 5 | It specifies the actions to perform when user double clicks on any element. 6 | 7 | 8 | 13 | 18 | 19 | 20 | 21 |

    Double Click to Open Image

    22 | 23 | 24 | Onload : It specifies the actions to perform when bodyloads or any image load. 25 | 26 | Syntax: 27 | 28 | 29 | onsubmit and onreset: 30 | ================== 31 | - Submit and Reset are events defined for form element. 32 | - Submit event firesup on submit click 33 | - Reset event firesup on reset click 34 | - Form can submit or reset only by using the 35 | generic buttons i.e submit or reset. 36 | 37 | Ex: 38 | 39 |
    40 |
    41 | Product Details 42 |
    43 |
    Name
    44 |
    45 |
    Price
    46 |
    47 |
    48 | 49 | 50 | 51 |
    52 |
    53 | 54 | 55 | FAQ: How to submit the form on any another element event? Like Dropdown selection changed. 56 | A. Write Event for the element 57 | on Element event call "form.submit()" method. 58 | It requires a reference name for form. 59 | 60 | Ex: 61 | 62 | 67 | 68 | 69 |
    70 |
    71 | Select City 72 | 77 |
    78 |
    79 | 80 | 81 | Timer Events: 82 | The timer events are used to perform any specific functionality at regular time intervals. 83 | a) setTimeOut() 84 | b) clearTimeOut() 85 | c) setInterval() 86 | d) clearInterval() 87 | 88 | setTimeout() : It is a timer function, It locks the task and make the task sleep for some duration of time, and release the task after the time interval. 89 | 90 | Syntax: 91 | setTimeOut(function(), timeInterval) 92 | [milliseconds] 93 | 1000 = 1 sec 94 | 95 | clearTimeout(): It is used to clear any function from memory before execution. 96 | 97 | Syntax: 98 | clearTimeout(functionReference); 99 | 100 | Ex: 101 | 102 | 121 | 122 | 123 |
    124 | 125 |
    126 |
    127 | 128 |
    129 | 130 | -------------------------------------------------------------------------------- /OnlineClassNotes/24-04-2020Notes.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 14 | 15 | 52 | 53 | 54 |
    55 |
    56 |

    Products List

    57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 |
    Product IdNamePriceAction
    {{item.ProductId}}{{item.Name}}{{item.Price}}
    73 |
    74 |
    75 |

    Add Product

    76 |
    77 |
    78 |
    Product Id
    79 |
    80 |
    Name
    81 |
    82 |
    Price
    83 |
    84 |
    85 | 86 |
    87 |
    88 |
    89 | 90 | -------------------------------------------------------------------------------- /OnlineClassNotes/25-04-2020Notes.txt: -------------------------------------------------------------------------------- 1 | Filters in Angular 2 | - Formatting, Filtering and Sorting the Data. 3 | - Angular JS provides the following filters 4 | 1. uppercase 5 | 2. lowercase 6 | 3. number 7 | 4. currency 8 | 5. limitTo 9 | 6. orderBy 10 | 7. filter 11 | 8. json 12 | 9. date 13 | - Filter is a function that reads your value and manipulates by using a built-in functionality and returns the value. 14 | - Filters are applied by using "|" 15 | 16 | 17 | uppercase ] Used to convert values into upper or 18 | lowercase ] lowercase. 19 | 20 | {{ data | uppercase }} 21 | 22 | number : It is used to display number with 1000 23 | separator and decimal places. 24 | 25 | currency : It is similar to number but will have a 26 | currency symbol. 27 | 28 | {{ data | currency : 'symbol': 3 }} 29 | 30 | date : To display date values in various date formats. 31 | 32 | {data | date: 'MM/dd/yyyy' }} 33 | 34 | Ex: 35 | 36 | 37 | 54 | 55 | 67 | 68 | 69 |
    70 | 85 |
    86 |

    Products Catalog

    87 |
    88 |
    89 |
    90 |
    {{product.Name|uppercase}}
    91 |
    92 |
    93 | 94 |
    95 | 99 |
    100 |
    101 |
    102 |
    103 | 104 | 105 | -------------------------------------------------------------------------------- /OnlineClassNotes/26-03-2020_Notes.txt: -------------------------------------------------------------------------------- 1 | Timer Events 2 | - setTimeout() 3 | - clearTimeout() 4 | 5 | Note: SetTimeout will load the taks into memory, then gives task to process, after process it is removed from memory. Hence task will execute only once. 6 | If you want the task to execute again then you have to load into memory again. 7 | Task - function 8 | 9 | setInterval(): 10 | ========== 11 | It is a timer function that loads the task into memory and gives to the process without removing from memory. It continues to give the task to the process until you clear from memory. 12 | Syntax: 13 | setInterval(function(), timeInterval); 14 | 15 | clearInterval(): 16 | ============ 17 | It is a timer function that clear the task from memory. 18 | 19 | Syntax: 20 | clearInterval(memoryReference) 21 | 22 | Ex: Time 23 | 24 | 37 | 52 | 53 | 54 |
    55 | 56 |
    57 |
    58 | 59 | 60 |
    61 | 62 | 63 | Ex: Timer- Slide Show of Images 64 | 65 | 66 | 67 | 68 | 93 | 94 | 95 |
    96 |
    97 |
    98 |
    99 |
    100 |
    101 |
    102 |
    103 |
    104 | 105 |
    106 | 110 |
    111 |
    112 |
    113 | 114 | -------------------------------------------------------------------------------- /OnlineClassNotes/27-03-2020_Notes.txt: -------------------------------------------------------------------------------- 1 | JavaScript Browser Objects 2 | - JavaScript BOM & DOM 3 | - JavaScript Browser Objects 4 | a) window 5 | b) location 6 | c) navigator 7 | d) history 8 | e) document 9 | - JavaScript Window Object 10 | "window" object provides a set of properties and methods that are used to control the browser window. 11 | 12 | Member Description 13 | ==================================== 14 | open() Opens any document in a new window 15 | close() Closes the current document. 16 | print() Print the current document. 17 | 18 | Syntax: 19 | window.open("filePath", "Title", "properties"); 20 | 21 | properties in open method: 22 | - toolbar= yes/no 23 | - scrollbars=yes/no 24 | - resizable=yes/no 25 | - top = 300 26 | - left = 200 27 | - width = 200 28 | - height= 100 29 | 30 | window.close(); 31 | window.close(windowRefernce); 32 | window.print(); 33 | 34 | Ex: Window Object 35 | 36 | 48 | 49 | 50 |

    Browser Window Object

    51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | JavaScript Location Object 59 | ====================== 60 | - It provides a set of properties and methods that are used to handle the client location details. 61 | 62 | Member Description 63 | ---------------------------------------------------------------------------- 64 | host It returns the server Name or 65 | IP address 66 | port It returns the port number. 67 | protocol It returns the current protocol. 68 | href It returns the complete URL. 69 | pathname It returns the current path. 70 | hash It returns the current hash name. 71 | search It returns the querystring. 72 | [?name=value&name=value] 73 | reload() It reloads the window. 74 | 75 | Ex: Get Client Location Details 76 | 77 | 78 | 85 | 90 | 91 | 92 |

    Location Details

    93 |
    94 | 95 |
    96 |
    97 |
    Server Name / IP
    98 |
    99 |
    Protocol
    100 |
    101 |
    URL
    102 |
    103 |
    104 | 105 | -------------------------------------------------------------------------------- /OnlineClassNotes/27-04-2020Notes.txt: -------------------------------------------------------------------------------- 1 | uppercase 2 | lowercase 3 | number 4 | currency 5 | date 6 | filter 7 | orderBy 8 | limitTo 9 | json 10 | 11 | limitTo : It specifies the number of records to display 12 | 13 | 14 | 15 |
    16 | 17 | json : It is used to convert the data into JSON format. 18 | 19 | {{data | json}} 20 | 21 | 22 | Http Service 23 | - It allows to configure communication with Services. 24 | - It can make are request and access the response details to display client side. 25 | - It is used for WebServices and RESTful services. 26 | [Representational State Transfer] 27 | - Angular JS uses "$http" service to handle the request from client side. 28 | 29 | Syntax: 30 | $http.get("url") 31 | .then(function sucess(response) { 32 | // on success 33 | }, function failure(response){ 34 | // on failure 35 | }); 36 | 37 | Response Object contains several details like 38 | a) status : It returns status code 39 | 200, 404 40 | b) statusText: It returns status text. 41 | OK, NotFound 42 | c) data : It contains data present in file 43 | 44 | Ex: 45 | 1. Create a new folder by name "Data" 46 | 47 | 2. Add a new file into folder by name 48 | "products.json" 49 | [ 50 | { 51 | "Name": "Samsung TV", 52 | "Price": 34000.44, 53 | "IsInStock": true 54 | }, 55 | { 56 | "Name":"Nike Casuals", 57 | "Price": 2000.44, 58 | "IsInStock":false 59 | }, 60 | { 61 | "Name":"Mobile", 62 | "Price": 13000.44, 63 | "IsInStock":true 64 | } 65 | ] 66 | 67 | 3. Create a new Angular JS App to consume data 68 | "index.html" 69 | 70 | 71 | 72 | 73 | 74 | 93 | 94 | 95 |

    Http Service

    96 |
    97 |
    Status Code
    98 |
    {{code}}
    99 |
    Status Text
    100 |
    {{text}}
    101 |
    Data
    102 |
    103 |
    104 |                    {{data|json}}
    105 |                
    106 |
    107 |
    108 | 109 | 110 | 111 | MongoDb - Database 112 | Node JS - Server Side 113 | Express - Middleware 114 | Angular JS - Client Side 115 | HTML, CSS, JQuery 116 | 117 | Project 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | -------------------------------------------------------------------------------- /OnlineClassNotes/28-04-2020Notes.txt: -------------------------------------------------------------------------------- 1 | Routing 2 | - Routing is a technique used in Web Applications. 3 | - Routing technique allows to handle navigation in application. 4 | - User can stay on single page and can get access to everything from the page. 5 | - User will not navigate outside the page. 6 | - New components are added to page without reloading the complete page. 7 | - This type of Application interface is known as SPA. 8 | [Single Page Application]. 9 | 10 | - Routing Requires "ngRoute" module which is present in "angular-route.js" 11 | 12 | - ng-view is a directive used to specific where the result must be displayed in page. 13 | 14 | - Routes are configured by using "angular.config()" with a service called "$routeProvider" 15 | 16 | Syntax: 17 | app.config(function($routeProvider){ 18 | $routeProvider 19 | .when("/home", { 20 | templateUrl: "home.html" 21 | }) 22 | }) 23 | Home 24 | 25 | 26 | 27 | Ex: 28 | 1. Visit the following URL 29 | https://code.angularjs.org/1.7.9 30 | 2. Right Click on "angular-route.js" 31 | 3. Select "Save Link as" 32 | 4. Save into your project 33 | C:\Ishop\node_modules\angular 34 | "angular-route.js" 35 | 36 | 5. Create a new folder by name 37 | "Website" 38 | 6. Add following files 39 | - index.html 40 | - home.html 41 | - about.html 42 | - contact.html 43 | - login.html 44 | 7. design all pages with your own content 45 | 8. Index.html code 46 | "Index.html" 47 | 48 | 49 | 50 | 51 | 56 | 57 | 58 | 82 | 83 | 84 |
    85 |
    86 |

    Naresh-I-Technologies

    87 |
    88 | Home 89 | About 90 | Contact 91 |
    92 | 95 |
    96 |
    97 | 98 |
    99 |
    100 |
    101 | © copyright 2020 102 |
    103 |
    104 |
    105 | 106 | 107 | -------------------------------------------------------------------------------- /OnlineClassNotes/30-03-2020Notes.txt: -------------------------------------------------------------------------------- 1 | Window Object 2 | Location Object 3 | Navigator Object 4 | 5 | Navigator 6 | - It provides set of properties and methods that are used to access the client browser details. i.e which browser family user is using, which version of browser the client is using, what plugin's are supported on client browser etc.. 7 | 8 | Members Description 9 | ======================================== 10 | appName It returns the browser family 11 | name. 12 | appVersion It returns the browser version 13 | userAgent It returns the supported platform 14 | platform It returns the current client 15 | platform [OS] 16 | language It returns the current browser 17 | language [us-en] 18 | plugins[] It is an array of all plugins available on browser. 19 | mimeTypes[] It returns all mime types 20 | supported on browser. 21 | cookieEnable It returns the cookie status. 22 | 23 | 24 | Ex: Browser Details using Navigator 25 | 26 | 27 | 28 | 29 | Navigator 30 | 37 | 46 | 47 | 48 |
    49 | 50 |
    51 |
    Browser Family
    52 |
    53 |
    Platform
    54 |
    55 |
    Language
    56 |
    57 |
    User Agent
    58 |
    59 |
    Cookie Enabled
    60 | 61 |
    62 |
    63 | 64 | 65 | 66 | Ex: Plugin - It is a software tool installed for your browser to handle specific type of content, like PDF document, Audio and Video Content, Flash Animations etc.. 67 | 68 | - To Get list of all plugins installed in a browser 69 | 70 | 78 | 79 | - To Verify plugin available or not 80 | 81 | 93 | 94 | 95 | CSS Tutorial PDF 96 | 97 | 98 | 99 | Ex: MIME Type 100 | 101 | 109 | 110 | FAQ: How to verify JavaScript status on Browser? JavaScript enabled or not? 111 | A. You can verify JavaScript by using HTML element 112 |