Facebook login page clone using HTML and CSS 🚀

Preview 👇

Codepen link 👇

https://codepen.io/personalvipin/pen/zYPdXvZ

If this thread helpful for you then

1. Do Retweet the FIRST TWEET.
2. Follow me and turn on the notifications: @personalvipin 

Thankyou ❣️

Facebook Login Page Clone - HTML and CSS

Recursion/Recursive function in JavaScript 🚀

Thread 🧵

★ Recursion/Recursive function

• Recursion is the concept that a function can be expressed in terms of itself.

• A function that calls itself is called a recursive function.


★ Syntax for recursive function

function function_name() {
if(condition) //base case
{
       //base case output
    }else {
        // stop calling function_name()
    }
}
function_name(); //function call

• Recursive function must have a base case when they return without calling the function again, otherwise they can never finish executing.

• Example 

function exp(num, pow){
    if (pow == 1){
        return num;
    }else {
 return num*exp(num, pow - 1);
    }
}
exp(2,2);//4

★ Why to use recursion ?

• Recursion adds clarity 
• Reduces the time needed to write and debug code
• Reduces time complexity but not space complexity
• Perform a unit of work multiple times.


End thread 🧵

If this thread helpful for you then

1. Do Retweet the FIRST TWEET.
2. Follow me and turn on the notifications: @personalvipin 

Thankyou ❣️

Recursion in JavaScript 🚀

Functions in JavaScript 🚀

Thread 🧵

★ Function 

• To perform a specific task we combine a group of statements within braces{} or a block. This is known as Function.

• By using the function we can avoid rewriting the same logic again and again in our program.


★ Declaration of Functions

• Declaration of function without parameter

function Function_Name (){
    // function body   
}

• Declaration of function with parameters

function Function_Name (parameter_1, parameter_2,..., parameter_N){
    // function body   
}


• Here function is a keyword which is used to declare a function.

• Within {} , the logic of the function is define.

★ invoke/call a function

• To use the same function again and again, we can easily invoke the function.

• Calling a function without argument

Function_Name();

• Calling a function with argument

Function_Name(argument_1, argument_2,..., argument_N);



• Example : 

//declaring a function

function add_Num(i, j) {
    console.log(i + j);
}

// calling function

add_Num(10,20); // 30


End thread 🧵

If this thread helpful for you then

1. Do Retweet the FIRST TWEET.
2. Follow me and turn on the notifications: @personalvipin 

Thankyou ❣️
 

Functions in JavaScript

text-indent property in CSS 🚀

Thread 🧵

text-indent

• Used to give horizontal space at the start or first line of the text block.
 
• The space is usually from left to right, but can be right to left if the text-indent value is negative or text block is right-to-left mode.

• Values in px, em, % etc.

Example : 

☆ using length values (px, em etc)


End thread 🧵

If this thread helpful for you then

1. Do Retweet the FIRST TWEET.
2. Follow me and turn on the notifications: @personalvipin 
 
Thank you ❣️

Text-indent property in CSS 🚀

Type Conversions in JavaScript 🚀

Thread 🧵

• JavaScript type conversion is the method of converting one data type to another.

• Two types : 

-> Explicit Type Conversion
-> Implicit Type Conversion

Explicit Type Conversion

• This conversion is done with the help of a built-in function.

• Example : 


Implicit Type Conversion

• Implicit conversion is an automatic process, javaScript itself converts one data type to another.

• Example : 


Type Conversions in JavaScript 🚀

3 Ways to Reverse a String(Word) in JavaScript 🚀

Thread 🧵

Input : String //vipin

Output : Reverse of the given String //nipiv

1. Using loop 

• Create a reversed variable to store the reverse string.

• Starting at the last character of the given string passed to the function.

• During each iteration reversed gets concatenated with itself and the current character after loop end return reversedStr.


2. Using Methods

• Here, split() method splits a String into an array of string by separating the string into sub strings.

• After, reverse() method reverses an array in place.

• Last, join() method joins all elements of an array into a string and return it.


3. Using Recursion

• check If the string is empty, return ‘ ’ which is an empty string. 

• If the string is not empty, append the first character at last and make a recursive function call sub-string starting from the first character to the end of the string.

• Return the returned value from the recursive call of sub-string by appending first character of string at last.


Ways to Reverse a String in Javascript

Different between
 
★‎‎ Equality(==) and 
★ Strict Equality (===) 

operators in JavaScript 🚀

Thread 🧵

Equality operator (==)

• If we compare two values but the data type of the values is not the same, then the equality operator first performs a type conversion and then evaluates them.

• Example : 

console.log(3==3); //return true
console log(3=='3'); //also return true


Strict Equality operator (===)

• The strict equality operator will compare both data type and value without converting one data type to the other or without performing any type conversion.

• Example : 

console.log(3===3); //return true
console.log(3==='3'); //return false


Similarly 👇

Inequality operator (!=)

• firstly perform type conversion then compare the values

• Example : 

console.log(1!=1); //false
console.log(1!='1'); //false


Strict Inequality operator(!==)

• Compare both data type and values without performing any type conversions

• Example: 

console.log(1!==1); //false
console.log(1!=='1'); //true


You can read the unrolled version of this thread here: https://typefully.com/personalvipin/ljj3dgH

Difference between Equality and Strict Equality Operator in JavaScript 🚀

border-collapse Property in CSS 🚀

Thread 🧵

border-collapse Property

• Used to specifies whether table borders should be split as in standard HTML or collapse into a single border.

• We have two values : 

1. border-collapse: separate;
2. border-collapse: collapse;

1. border-collapse: separate;

• Borders are separated, each cell will display its own borders (default).

• Example : 

2. border-collapse: collapse;

• Borders are collapsed into a single border when possible (border-spacing and empty-cells properties have no effect).

• Example : 

border-collapse Property in CSS 🚀

Facebook login page clone 🚀

list-style Property in CSS 🚀

★ list-style-type
★ list-style-position
★ list-style-image

Thread 🧵

list-style Property

• It's the shorthand property that is used to set all list properties in one expression.  

• The order of the values of this property is type, position, and image. 

• If one of the values are missing, the default value for that property will be used.

list-style-type

• Used to change the default list type of marker to any other type, such as squares, circles, roman numerals, Latin letters, and many more.

• Example : 

list-style-position 

• It indicates whether a marker appears inside or outside of a box containing bullet points. 

• It includes two values. 

1. inside: It indicates that the list item will contain the bullet points. If the text in this extends to the second line, it will be wrapped inside the marker.

2. outside: It represents that the bullet points will be outside the list item. It is the default value.

Example : 

list-style-image 

• It specifies an image as the marker. Using this property, we can set the image bullets.

• If it does not find the corresponding image, the default bullets will be used.

• Example : 

list-style Property shortened

• list-style : type position image;

• Example : 