My Journey to DLithe Bootcamp(.NET Full Stack Week 4(Feb14- Feb19)
Assignment no : 21 DLithe_BC_NFS_T_Task21_Javascript
12/02/2022
Task Details:
Registration Form
1. Use regular expression
2. Confirm password
we will see how to create a responsive registration form using HTML, CSS, and JavaScript. We will also see, how to create and different types of HTML controls and how to validate HTML controls using javascript. So here is an example of a registration form design in HTML and CSS with code.
Finally, we will see how to get HTML control values using JavaScript.
How to create registration form in HTML and CSS
Now, let us see how to create a responsive registration form. For this, first, we will create an HTML page. You can use any HTML code editor like Notepad++, VS Code, Atom, etc. We will use here Visual Studio code to create a registration form in HTML and CSS.
In Visual Studio Code, create a file with extension as .html or .htm.
Here, we will use the below HTML controls:
- Textbox
- Textarea
- Radio button
- Date
- Number
- Tel
- Checkbox
- Dropdown
- Password
- Button, etc.
Apart from this, we have used a .CSS file to provide styling for the controls and we have provided the .css file reference in the HTML file.
- box-sizing: border-box; — It is a CSS property, which sets the calculated value of total width and height of a form.
- .container — This container class is used for stored all the objects in memory.
- .col-10, .col-90 -Here we divided the screen into two parts from 100% of the total responsive grid view. One is col-10, which takes 10% of the total screen. It includes all the labels like First Name, Last Name, Email, Mobile, etc.) Similarly, col-90, which takes 90% of the total screen. It includes all the fields like text field, text area, number field, password field, date field, etc.
- @media — It is a CSS query used for adopting all the screen resolution (such as a mobile, tablet, desktop, laptop, etc.)
And now the registration form in html and css looks like below:
Login with regular expression:
Code:
Github :
Assignment no : 22 DLithe_BC_NFS_T_Task21_jQuery
14/02/2022
- Selectors
2. Effects(Hide, Show, Toggle, Fade, Slide, Chaining, Callback function)
3. Animation( animate())
1. Selectors:
jQuery is the most popular and widely used Javascript library that lets you simplify traversal and manipulate the HTML DOM tree. It offers you easy access to elements or group of elements in the DOM. The official website of jQuery calls it a powerful tool.
When you want to select or manipulate one or more than one HTML element, jQuery selectors are used. It lets you find out matching elements from DOM using expressions. It is interesting to note that jQuery selectors are linked to CSS selectors.
There are multiple selectors based on element, id, class, types, attributes, and many more.
What Does jQuery Selectors Do?
jQuery selectors play a very significant role in the JavaScript library. They are basically functions that allow you to select elements based on the given criteria from DOM.
These unique selectors are used to find and manipulate HTML elements based on various attributes or attribute values like name, id, class, HTML tags, etc.
Thus making it easier for you to find and access elements from DOM.
How To Use The jQuery Selectors?
It is very easy to use jQuery selectors. They are written within the <script> tag. All the jQuery selectors start with a dollar sign and contain attributes within the parentheses: $(). Let us take a look at the syntax and then discuss an example using the “this” selector.
Syntax: $(attribute)
Example: $(*)
Let us see how to hide the current element using the “this” selector.
What Are Various jQuery Selectors?
jQuery selectors provide multiple ways to select and manipulate elements. Here are some important jQuery selectors that can be helpful to a web developer:
1.The #id
Selector:
It uses the attribute “id” of the HTML tag to select
elements.
Syntax: $(“#id_name”)
2.The .class
Selector:
It selects elements with a specific class.
Syntax: $(“.class_name”)
3.The “*”
Selector:
This selector is used to select all the elements.
Syntax:
$(“*”)
4.The “this”
Selector:
This selector is used to select the current element in HTML.
Syntax: $(this)
5.The “p:first”
Selector:
It is used to select first element in <p> tag.
Syntax:
$(“p:first”)
6.The “p:test”
Selector:
It is used to select all elements in <p> tag with
class=”test”.
Syntax:
$(“p.test”)
7.The “:button”
Selector:
It selects all <button> elements as well as
<input> elements of type=”button”
Syntax: $(“:button”)
8.The “tr:odd”
Selector:
It is used to select all odd <tr> elements.
Syntax:
$(“tr:odd”)
9.The “tr:even”
Selector:
This selector is used to select all even <tr>
elements.
Syntax:
$(“tr:even”)
10.The “[href]”
Selector:
It is used to select all elements with attribute “href”.
Syntax:
$(“[href]”)
11.The “ul
li:first” Selector:
It selects the first <li> element of the first
<ul> tag.
Syntax: $(“ul li:first”)
12.The
“a[target=’_blank’]” Selector:
This selector selects all <a> elements with an
attribute value equal to “_blank”
Syntax: $(“a[target=’_blank’]”)
Let us see an example to select even <tr> elements in
a table using jQuery “tr:even” selector.
2.Effects(Hide, Show, Toggle, Fade, Slide, Chaining, Callback function)
jQuery is the most used JavaScript library for designing a variety of web pages. Designing web pages not only includes content and styles but also various effects and animations to make it attractive.
In order to design effective web pages for your website, jQuery provides various effects and animations. It easily adds various effects and animations to your web pages just within a few steps.
In this tutorial, we will learn what jQuery effects do and the different types of effects that can be added using jQuery functions. Some of the effects we will learn today are Hide/Show effect, fadeIn and fadeOut effects and some others.
What Does jQuery Effects Do?
jQuery Effects are like the cherry on the cake in designing web pages. It adds effectiveness and helps to easily create web pages with various effects and animations.
You can add various effects like hide/show, fade, slide, animate, toggle, and much more. jQuery allows you to add simple, standard effects that are commonly used, and the ability to create new custom effects.
How To Use The jQuery Effects?
You can quickly
add jQuery effects and animations to your HTML code. The effects are added by including
jQuery effect methods into your <script> tag.
Let us see an
example to use the jQuery Hide/Show Effect. Here when you will click on the
“Hide” button the text will disappear and when you click on the “Show” button
What Are The Various jQuery Effect Methods?
jQuery provides a lot of standard effect methods to design beautiful web pages. Learning these effects can can be really helpful for a web developer to create interactive web pages. Some of the methods are as follows:
1.animate()
It is used to
run custom animations on the selected elements.
Syntax: (selector).animate({styles},speed,easing,callback)
Here “styles”
specifies one or more CSS values to animate, “speed” specifies the speed of to animate,
“easing” also determines speed but at different points in animation, and
“callback” is to be executed after the animation completes.
2.delay()
This method is
used to delay the execution of all queued functions on the selected elements.
Syntax: $(selector).delay(speed,queueName)
Here
“queueName” specifies the name of the queue.
3.fadeIn()
It is used to
fade in the selected elements.
Syntax: $(selector).fadeIn()
4.fadeOut()
It is used to
fade out the selected elements.
Syntax: $(selector).fadeOut()
5.hide()
This method is
used to hide the selected elements.
Syntax: $(selector).hide()
6.show()
This method is
used to show the selected elements.
Syntax: $(selector).show()
7.slideUp()
It is used to
slide-up or hide the selected elements.
Syntax: $(selector).slideUp()
8.stop()
This method
stops the currently running effect or animation for the selected elements.
Syntax: $(selector).stop()
9.toggle()
It toggles
between the hide() and show() methods.
Syntax: $(selector).toggle()
Web animation has been serving up people for almost 3 decades now, but back then very few people were using Internet and with limited resources and lack of technologies developers were unable to create useful effects.
Examples Output of the above concepts:
code:
Github:
Assignment no : 23 DLithe_BC_NFS_T_Task23_jQuery
15/02/2022
Task details:
1.Animations
2. jQuery Methods
3. Accordion and Autocomplete
Animation:
jQuery includes methods which give special effects to the elements on hiding, showing, changing style properties, and fade-in or fade-out operation. These special effect methods can be useful in building an interactive user interface.
The following table lists jQuery methods for adding special effects to the DOM elements.
Let’s look at some important methods for special effects.
jQuery animate() Method
The jQuery animate() method performs custom animation using element’s style properties. The animate() method changes existing style properties to the specified properties with motion.
Specify a selector to get the reference of an element to which you want to add animation effect and then call animate() method with JSON object for style properties, speed of animation and other options.
jQuery queue() Method
The jQuery queue() method shows or manipulates the queue of special effect functions to be executed on the specified element.
jQuery fadeIn() Method
The jQuery fadeIn() method displays specified element(s) by fading them to opaque.
jQuery fadeOut() Method
The jQuery fadeOut() method hides specified element(s) by fading them to transparent.
jQuery hide() and show() Method
The jQuery hide() method hides and show() method displays the specified element. You can specify speed, easing and callback function which will be executed when hide/show completes.
jQuery toggle() Method
The jQuery toggle() method hides or displays specified element(s).
2. jQuery Methods
One very important part of jQuery is the possibility to manipulate the DOM.
jQuery comes with a bunch of DOM related methods that make it easy to access and manipulate elements and attributes.
Get Content — text(), html(), and val()
Three simple, but useful, jQuery methods for DOM manipulation are:
- text() - Sets or returns the text content of selected elements
- html() - Sets or returns the content of selected elements (including HTML markup)
- val() - Sets or returns the value of form fields
The following example demonstrates how to get content with the jQuery text() and html() methods:
Get Attributes — attr()
The jQuery attr() method is used to get attribute values.
jQuery remove()
The jQuery remove() method is used to remove the selected elements out of the DOM. It removes the selected element itself, as well as everything inside it (including all texts and child nodes). This method also removes the data and the events of the selected elements.
Accordion :
Accordions are useful when you want to toggle between hiding and showing large amount of content:
Autocomplete :
Auto completion is a mechanism frequently used in modern websites to provide the user with a list of suggestions for the beginning of the word, which he/she has typed in a text box. The user can then select an item from the list, which will be displayed in the input field. This feature prevents the user from having to enter an entire word or a set of words.
JQueryUI provides an autocomplete widget — a control that acts a lot like a <select> dropdown, but filters the choices to present only those that match what the user is typing into a control. jQueryUI provides the autocomplete() method to create a list of suggestions below the input field and adds new CSS classes to the elements concerned to give them the appropriate style.
Any field that can receive input can be converted into an Autocomplete, namely, <input> elements, <textarea> elements, and elements with the contenteditable attribute.
Code:
Animation:
Github:
Assignment no : 24 DLithe_BC_NFS_T_Task24_C#
16/02/2022
Task details:
- Get Employee details and print them
2. Perform Arithmetic operations
3. Swap without using third variable
4. Find largest of 3 numbers
1 ) Get Employee Details and Print in Console:
2) Arithmetic Operation in C#:
3. Swap without using third variable
We can swap two numbers without using third variable. There are two common ways to swap two numbers without using third variable:
- By + and -
- By * and /
Output Code:
4. Find largest of 3 numbers
Firstly, let’s set the three numbers −
int num1, num2, num3;
// set the value of the three numbers
num1 = 10;
num2 = 20;
num3 = 50;
Now check the first number with the second number. If num1 > num2, then check num1 with num3. If num1 is greater than num3, that would mean the largest number is num1.
Output code:
Github.com:
Assignment no 25 : DLithe_BC_NFS_T_Task25_C#
17/02/2022
Task Details:
Access Specifiers
— — — — — — — — — — — — — — —
1. Encapsulation (private, public)
2. Inheritance (protected)
3. 2 projects(assemblies) — internal
Encapsulation:
Encapsulation is defined as the wrapping up of data under a single unit. It is the mechanism that binds together code and the data it manipulates. In a different way, encapsulation is a protective shield that prevents the data from being accessed by the code outside this shield.
- Technically in encapsulation, the variables or data of a class are hidden from any other class and can be accessed only through any member function of own class in which they are declared.
- As in encapsulation, the data in a class is hidden from other classes, so it is also known as data-hiding.
- Encapsulation can be achieved by: Declaring all the variables in the class as private and using C# Properties in the class to set and get the values of variables.
Code Example of Encapsulation:
Inheritance:
Inheritance is an important pillar of OOP(Object Oriented Programming). It is the mechanism in C# by which one class is allowed to inherit the features(fields and methods) of another class.
Important terminology:
- Super Class: The class whose features are inherited is known as super class(or a base class or a parent class).
- Sub Class: The class that inherits the other class is known as subclass(or a derived class, extended class, or child class). The subclass can add its own fields and methods in addition to the superclass fields and methods.
- Reusability: Inheritance supports the concept of “reusability”, i.e. when we want to create a new class and there is already a class that includes some of the code that we want, we can derive our new class from the existing class. By doing this, we are reusing the fields and methods of the existing class.
Inheritance code Example :
2 projects(assemblies)
Github:
DLithe_BC_NFS_T_Task26_C#
17/02/2022
Task Details:
- 1D ARRAY
2. 2D ARRAY
3. JAGGED ARRAY
4. PARAMS ARRAY
5. ARRAY METHODS
What is Array in C#? How many types of Array in c#?
Arrays are used to store multiple values in a single variable, instead of declaring separate variables for each value.to declare an array, define the variable type with square brackets
C# supports multidimensional arrays up to 32 dimensions. The multidimensional array can be declared by adding commas in the square brackets. For example, [,] declares two-dimensional array, [, ,] declares three-dimensional array, [, , ,] declares four-dimensional array, and so on. So, in a multidimensional array, no of commas = No of Dimensions — 1.
The following declares multidimensional arrays
Two-dimensional array declaration(2D): int[,] arr2d;
Three-dimensional array : int[, ,] arr3d;
Four-dimensional array : int[, , ,] arr4d ;
Five-dimensional array : int[, , , ,] arr5d;
Code Example of Array:
Code Example Output:
Code Example 2d Array:
Output Screen of 2D Array:
Jagged Array:
Output Screen of Jagged Array :
Code Example of Paramsarray:
Output Screen:
Github:
Assignment no : 27 DLithe_BC_NFS_T_Task27_C#
20/02/2022
Task Details:
- Strings
2. Nullable
3. Partial Class and Partial Method
1. Strings:
In C#, string is an object of System.String class that represent sequence of characters. We can perform many operations on strings such as concatenation, comparison, getting substring, search, trim, replacement etc.
What is Difference between String and string?
In C#, string is keyword which is an alias for System.String class. That is why string and String are equivalent. We are free to use any naming convention.
example : string s1 = “hello World”;//creating string using string keyword
Example 2: String s2 = “Hello World”;//creating string using String class
String Methods:
Clone() : It is used to return a reference to this instance of
String.Compare(String, String) : It is used to compares two specified String objects. It returns an integer that indicates their relative position in the sort order.
CompareOrdinal(String, String): It is used to compare two specified String objects by evaluating the numeric values of the corresponding Char objects in each string.
CompareTo(String) : It is used to compare this instance with a specified String object. It indicates whether this instance precedes, follows, or appears in the same position in the sort order as the specified string.
Concat(String, String) : It is used to concatenate two specified instances of String.
Contains(String) : It is used to return a value indicating whether a specified substring occurs within this string.
Copy(String) : It is used to create a new instance of String with the same value as a specified String.
CopyTo(Int32, Char[], Int32, Int32) : It is used to copy a specified number of characters from a specified position in this instance to a specified position in an array of Unicode characters.
EndsWith(String) : It is used to check that the end of this string instance matches the specified string.
Equals(String, String) : It is used to determine that two specified String objects have the same value.
Format(String, Object) : It is used to replace one or more format items in a specified string with the string representation of a specified object.
Nullable
- Nullable Types
- C# — Value & Reference Types
- C# — Interface
- C# — Operators
- C# — if else Statements
- C# — Ternary Operator ?:
- C# — Switch
- C# — For Loop
- C# — While Loop
- C# — Do-while Loop
- C# — Partial Class
- C# — Static
- C# — Array
- Multidimensional Array
- Jagged Array
- C# — Indexer
- C# — Generics
- Generic Constraints
- C# — Collections
- ArrayList
- List
- SortedList
- Dictionary
- Hashtable
- Stack
- Queue
- C# — Tuple
- C# — ValueTuple
- C# — Built-in Exceptions
- Exception Handling
- throw
- Custom Exception
- C# — Delegates
- Func Delegate
- Action Delegate
- Predicate Delegate
- Anonymous Methods
- C# — Events
- C# — Covariance
- C# — Extension Method
- C# — Stream I/O
- C# — File
- C# — FileInfo
- C# — Object Initializer
- C# — Useful Resources
C# — Nullable Types
As you know, a value type cannot be assigned a null value.
For example, int i = null will give you a compile time error.
C# 2.0 introduced nullable types that allow you to assign null to value type variables. You can declare nullable types using Nullable <type> where T is a type.
Example Declaration :
Nullable <int > i = null;
A nullable type can represent the correct range of values for its underlying value type, plus an additional null value. For example, Nullable<int> can be assigned any value from -2147483648 to 2147483647, or a null value.
The Nullable types are instances of System.Nullable<type>struct.
Code Output Example:
Partial Class and Partial Method:
In C#, you can split the implementation of a class, a struct, a method, or an interface in multiple .cs files using the partial keyword. The compiler will combine all the implementation from multiple .cs files when the program is compiled.
Consider the following Student.cs and StudentMethods.cs files that contain the Student class.
code Output Example:
