DEV Community: sutharrahul

Array Method

sutharrahul — Sun, 19 Mar 2023 09:40:21 +0000

Array is a collection of similar data elements stored at contiguous memory locations. It is the simplest data structure where each data element can be accessed directly by only using its index number.
In array index number start with 0.
Array data [hello, array, java, c++, 1, 56, 23]
Array index [ 0 , 1 , 2 , 3 , 4, 5 ,6 ]

Array Method

Array Length
array length use for get total number of array. How many elements stored in array

let name = ['hello', 'world', 'Asia', 'india', 'america']
console.log(name.length)

outpur: 5

Total number of element is 5

Push
Insert the new value inside array but value/element will stored in last.

let namess = [12, 45, 76, 24, 46]
namess.push('VYOM','rah');
console.log(namess);

output: [12, 45, 76, 24, 46, 'VYOM','rah']

Slice
The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end ( end not included) where start and end represent the index of items in that array.
Syntax
slice()
slice(start)
slice(start, end)

let namess = [12, 45, 76, 24, 46, 23, 86, 96]
console.log(namess.slice(1,7);

output: [ 45, 76, 24, 46, 23, 86 ]

Splice
The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements
Syntax
splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item1)
splice(start, deleteCount, item1, item2, itemN)

let fruit = ['1', '2', '3', '4', 5, 6, 7, 8];
fruit.splice(2, 1, 'Apple', 'Banana');
console.log(fruit);

output: [ '1', '2', 'Apple', 'Banana', '4', 5, 6, 7, 8 ]

Concatenation
The Concatenationmethod add two array.

let arr1 = [1, 2, 3, 4];
let arr2 = [5, 6, 7];
let arr3 = [8, 9, 10, 11, 12]; 
console.log(arr1.concat(arr2, arr3));

output: [1, 2, 3, 4, 5 , 6, 7, 8, 9, 10, 11, 12]

Include
The include method returns "true or false" if the value stored in correct index output will "true" else output will be false.

let num = [1, 2, 3, 4, 5, 6, 7, 8];
console.log(num.includes(7, 6));

output: True

let num = [1, 2, 3, 4, 5, 6, 7, 8];
console.log(num.includes(7, 8));

output: false

7 is a value and 6 is index no. so 7 is stored in index of 6 output is true
if (7,8) it's mean 7 is stored index of 8 which is false because 7 is stored in index of 6

Indexof
Indexof method use to get index number of value means in which index no. value is stored.

let num = [1, 2, 3, 'Anurag', 4, 5, 6, 7, 8];
console.log(num.indexOf('Anurag'));

output: 3

if the same value stored multiple times in same array in that case output will only one index number which come first.

Is Array
isarray Method use is this array or not if it is than output will true is not output will false

let num = [1, 2, 3, 'Anurag', 4, 5, 6, 7, 8, 'Anurag', 'Anurag'];
console.log(Array.isArray(num));

output: True

let num1= dreamworld
console.log(Array.isArray(num1));

output: false

Join
The join method use when we want to add a value in array with all the value of array.

let Arr1 = [1, 2, 3, 4, 5, 6, 7];
let var1 = Arr1.join(' a '); //a will join all value of array
console.log(var1);

output:1 a 2 a 3 a 4 a 5 a 6 a 7

lots Array method are available.

Media Query

sutharrahul — Wed, 28 Dec 2022 18:30:10 +0000

When every we open any website in mobile phone we see the view of page is different as compare to pc because to pixel is different in pc and mobile. Media query do the same thing we can change page view by just using @medi (max width 600px) we have to design. till 600px page view is different (what we design). Media query is Responsive Web Design.

Box Model

sutharrahul — Wed, 28 Dec 2022 18:07:45 +0000

Box model is really useful because when we add height, weight, margin or padding to element than appears bigger than we set if we don't use box model. because calculation of element size is "height + padding + border = actual height of an element" width + padding +border = actual width of element"
if we don't use box sizing than div will be bigger. but If you set box-sizing: border-box; on an element, padding and border are included in the width and height

CSS Box Model

sutharrahul — Sun, 25 Dec 2022 17:38:58 +0000

Margin :

Margin are use to create space around element form all four border.
Example
margin: 10px 12px 15px 20px it cerate space 10px form top 12px from right 15px from bottom and 20px from left. if we just want create space only one side could be top or bottom or right or left we can simply use these property.

margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;

Padding:

Padding are use to create space around element content but inside of boarder. we can create space to top , bottom, right and left.
padding: 10px 12px 15px 20px

padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;

Flex-Box (Align-item)

sutharrahul — Sun, 25 Dec 2022 17:13:16 +0000

Align item same as justify-content but justify-content set item on horizontal line but when we want to adjust item in vertical line we use align-item.
syntex is

.flxbox{
display:flex;
flex-direction:row | column;
align-item: flex-star | flex-end | center;
}

Justify-content in Flex Box

sutharrahul — Sun, 25 Dec 2022 14:44:35 +0000

Simply we can say that justify contet set items horizontal.
but with it has also few property.
.flxbox{ justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right; }

Flex-star (default) :

Item are set on star (left side of page). If we use row-revers but we want that item should be start from left side. so we use justify-content: flex-start.

justify-content: flex-start;

flex-end:

Item are set on end (right side of page)
justify-content: flex-end;

flex-center:

This property set out item on center of the page
justify-content: center;

space-between:

Items are evenly distributed in the line; first item is on the start line, last item on the end line.
justify-content: space-between;

space-around:

To create evenly space around items
justify-content: space-around;

space-evenly:

Items are distributed so that the spacing between any two items (and the space to the edges) is equal.

Flex Box

sutharrahul — Sun, 25 Dec 2022 14:24:11 +0000

Flex has few more property and the one is

flex-wrap
.flexbx{ flex-wrap: nowrap | wrap | wrap-reverse; }
When ever you reduce page size this will place item to next line

This property is much useful when we reduce page size.

Flex Box

sutharrahul — Sun, 25 Dec 2022 14:14:29 +0000

Flex Box is one dimensional layout. Flex box deals with layout in one dimensional at a time either as row or as a column.

.flxbox{ display:flex;
flex box has 4 main axis:

1. Row (default)

when we use display:flex out items set by default as row and the direction is left to right.

{ flex-direction: row; }

2. Row-revers:

It set out items in revers order like

4 3 2 1 and it will show right to left.

{ flex-direction: row-reverse; }

3. Column

It is out item in column(same as row but top to bottom)

flex-direction: column;

4. column-reverse

set items bottom to top (in revers order)
flex-direction: column-reverse;

Audio and Video Tag HTML

sutharrahul — Sat, 24 Dec 2022 08:58:39 +0000

Whenever we visit any web site some time we see a video or audio like music and all is play there. and that video is not available on You-tube. so uses of audio and video tag when we want to add some video content or audio we use Audio video tag.
syntax of Audio and Video tag is ;
<audio src="____">audio</audio> <video src="___">video</video>
this will show video or audio on our page.
To control video we can also add attributes like
-control
-height
-width
-loop
-Autoplay
Why we should use attributes ?
because to make out page more responsive

CSS selector

sutharrahul — Mon, 21 Nov 2022 06:55:12 +0000

Selectors in CSS:
selector in css is very important to make web page good in term of look. it's make easy to target which part we want to style or change.
Type of selector
Universal selector
Individual selector
Class and I'd selector
Combined selector
Inside an element
Direct child
Sibling ~ or +

Universal selector: It's select every thing on canvas.
*{ background-color:black; color: white;
it will change our background in black and fonts will be white.
use of this selector is change web page background color and if we want same fonts on page than we use universal selector.
Individual selector : This selector is use when we want change in tag like

etc. but it will change in all tag's like we use 5 "p" tag or 5 "div" than all 5 will b change

Class and I'd selector:
This selector use for id attribute in html,

<style>
#my1 {
        background-color: #ef9323;
        color: #FFFFFF;
        }
</style>
<html>
<body>
<div id="my1">Hello</div>
</body>
</html>

only "Hello" will be change but if we use multiple

than all will change.

Combined selector: When we want to select multiple tag by use just one CSS we use combined selector. syntax.

<style>
span, li {
        background-color: burlywood;
      }

 </style>
<html>
<body>
<span>Span is just a span, nothing more</span>
<ul>
      <li >item1</li>
      <li >item2</li>
      <li >item3</li>
      <li >item4</li>
      <li>item5</li>
    </ul>
</body>
</html>

Only "Span is just a span, nothing more" and "item" will change.
*Inside an element *

div ul li {
        background-color: #yellow;
      }
<html>
 <div>
      <p>lorem</p>
      <li>awesome</li>
      <ul>
        <li>highlight me 1</li>
        <li>highlight me 2</li>
      </ul>
    </div>

in this selector only highlight me 1 and highlight me 2 change

Table in HTMl

sutharrahul — Tue, 15 Nov 2022 08:10:39 +0000

feeling really amazing bcoz today in make my 1 table in HTML

the code

the result

HTML tags

sutharrahul — Sun, 06 Nov 2022 09:20:18 +0000

In HTML use tags like "h" , "P", "lorem".
"h" use for header file like i am posting this Article and my title is "HTML tag" so this a basically it a my header file
P tag use for writing a paragraph if i want to write anything like a story i use P tag.
The lorem tag inserts a specified amount of random text