DEV Community: Vishnu Priya S

Basic Array methods.

Vishnu Priya S — Fri, 09 Oct 2026 19:17:15 +0000

toString() -- elements in a single value with the help of comma separated string.

at() -- returns an indexed element from an array, returns the same as []

length() -- set the length size and return the length.

join() -- works like toString you can specify the separator (symbols)

push() -- adds new element at the end

pop() -- removes the last element from the array.

shift() -- removes the 1st element and all other elements goes in the lower index.

unshift() -- adding the values in the 1st.

delete() -- leaves and provides as undefined.

concat() -- creates a new array by merging the exisiting array.

flat() -- acts as an multiple array make them into single array.

slice()-- create new array , doesn't remove any elements from the src array.

splice() -- add new items to an array

for...of() -- The for...of statements hands you the array values.

forEach()-- calls a function (a callback function) for each array element.

map() -- Note that the function takes 3 arguments:

-> The item value
-> The item index
-> The array itself
When a callback function uses only the value parameter, the index and array parameters can be omitted

filter() -- it checks the condition is true or false , if you return values it never gonna execute.

spread()-- (...) operator expands an array into individual elements.

rest() -- collect the leftovers(...rest)

JS variables , Functions &Objects

Vishnu Priya S — Tue, 29 Sep 2026 18:04:27 +0000

Variables

let-- a keyword used to declare re-assignable, block-scoped local variables.
var-- re- declaring the values.
const-- you can't change the values.

Complier -- debug your whole program and translate to the machine

Intrepreter -- line by line debug and translates them to the machine.

Function

The function name should starts with lowercase, declaring the function and calling it (invoking) a reusable block of code designed to perform a specific task.

eg: function subj(tam, eng, math, sci, ss){
let add= (tam+ eng+ math+ sci+ ss);
console.log(add);
result add;
}
subj(80,50,90,40,54);

here the function name is subj and it has a arguments of tam, eng..
it stores the values into the variable called add. again calling the function to execute the code.

return

return is a keyword it returns the value not the variable
eg:The return keyword passes back the value (314), not the variable name (add).

objects

objects used to group and store all the variable with the help of obj name, in obj you can create another obj

const laptop={
brand: "hp",
price: "20000",
camera:{
back:50;
front:20;
}
}

console.log(laptop.camera.back) // o/p: 50

here the laptop is obj name and i'm calling the other obj name with the help of (.) and calling the var and that fetches the actual value.

constructor function

when the obj is created the constructor called automatically.
constructor name should starts with uppercase(Student)
used to initialize object specific value.

const laptop1 = new Laptop("hp", 20000);

here new is a keyowrd storing the values into Laptop.

function Laptop(i, j){
this.brand= i;
this.price=j;

const laptop1 = new Laptop("hp", 20000);

console.log(laptop1.brand); // o/p:hp

the line new Laptop("hp", 20000) is the act of calling the function.

1.A Normal Function: You call it using just its name and parentheses:
subj(80, 50, 90);
2.A Constructor Function:You call it by putting the word new right in front of it:
new Laptop("hp", 20000);

JavaScript

Vishnu Priya S — Tue, 29 Sep 2026 07:03:13 +0000

java datatypes have 2 types

primitive(7 types) -->

*number *- carries number , whole no, float, decimal
*string *- sequence of information
*boolean *- true or false
*bigint *- large number
*null *- intentional absence of any obj value
*undefined *- declared variable but not yet given a value
*symbol *- handles unique code

non-primitive --> object (fixed things)

Grid concept

Vishnu Priya S — Tue, 22 Sep 2026 16:23:54 +0000

display:grid;
grid-template-areas:
"header header"
"menu content"
"footer footer"

before that you should assign name for each child and call them in
grid-area:header; in the grid-template-areas

Day 3 of Payilagam

Vishnu Priya S — Fri, 18 Sep 2026 18:22:49 +0000

Position property in CSS defines how an element is placed on a web page. (top, bottom, left, and right)
5 types of position

static- default behaviour offsets(top/left) do not work.
relative- It owns the original position and move your position where it used to be.
absolute- It checks the parent class if it is non- static it works accordingly.
fixed- An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. (eg: E-commerce website of header, footer)
sticky- behaves like normal element until the user reach the specific point. It sticks and acts like it is fixed(only within its parent container).

Day 2 of Payilagam

Vishnu Priya S — Thu, 17 Sep 2026 17:50:32 +0000

Today we have learnt about how to use the
input type="text" id= "name"
Label for ="name" (Here you're mentioning the label name)
eg: name: Vishnu
along with that we learned how to separate the parent class and child class by using html,css tags.

In css we have used media queries to create a responsive layout.

The attributes are performed only in the respective tags
Eg: input type= radio button.
(Here the type is an attribute that only performs on this tag.)

Website

Font awesome is a website where they have n numbers icons .

Flexbox froggy - understand the flexbox concept

Css scan- have a n number of box shadows

Day 1 in Payilagam

Vishnu Priya S — Tue, 15 Sep 2026 18:09:19 +0000

This is my first day of Payilagam where i learnt the new thing called *table *
thead -- carries heading , we can have multiple head too.
tbody -- row value
tr-- stands for table row
th-- thead the browser understands it "Semantics", also it BOLD your text
td-- table data it display in a row format.

eg:

Attendance
Vishnu

In CSS:

text-transform -- where you can captialize or lowercase your content.
border-collapse: collapse; -- the two column table sharing the one border.

@media query -- used for responsive website
@media (min-width:768px;) -- when you minimize your screen in 768px the inner changes will appear.