├── 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 |
Item-1
113 |
Item-2
114 |
Item-3
115 |
Item-4
116 |
Item-5
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 |
A Terms and Conditions agreement is the agreement that includes the terms, the rules and the guidelines of acceptable behavior and other useful sections to which users must agree in order to use or access your website and mobile app.
161 |
While most websites seem to have one, there's actually no legal requirement for defining terms and conditions. However, if you are gathering user's personal data, you are required to have a stated Privacy Policy. Terms and Conditions may not be required by law, but it's still a smart thing to include.
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 |
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 |
Item-1
113 |
Item-2
114 |
Item-3
115 |
Item-4
116 |
Item-5
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 |
Name
36 |
Price
37 |
38 |
39 |
40 |
41 |
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 |
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 |
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 |
26 |
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 |
72 |
73 |
User Name
74 |
75 |
Password
76 |
77 |
78 |
79 |
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 |
98 |
Home
99 |
Electronics
100 |
101 |
Mobiles
102 |
Televisions
103 |
Watches
104 |
105 |
106 |
107 |
Shoes
108 |
109 |
Casuals
110 |
Sneakers
111 |
112 |
113 |
Contact
114 |
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 |
141 |
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 |
Name
76 |
Price
77 |
Stock Status
78 |
79 |
80 |
81 |
82 |
83 |
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 |
Name
40 |
Price
41 |
Stock
42 |
43 |
44 |
45 |
46 |
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 |
Name
104 |
Price
105 |
Stock
106 |
107 |
108 |
109 |
110 |
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 |
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 |
47 |
48 |
49 | Bootstrap Collapse
50 | - It is used to display and hide content dynamically
51 | - The classes used are
52 | a) .collapse
53 | b) .collapsing
54 | c) .collapse.show
55 | - JQuery Attribute are
56 | a) data-target : which content to collapse
57 | b) data-toggle : specifies actions on click
58 |
59 | data-target is used for buttons.
60 | href is used for links.
61 |
62 | Syntax:
63 |
64 |