DEV Community: Guna Ramesh

Function

Guna Ramesh — Mon, 15 Jun 2026 06:16:01 +0000

In JavaScript, a function is a block of code designed to perform a specific task. It runs when it is called (invoked).
Function Declaration
A Function Declaration is a way of creating a function in JavaScript using the function keyword followed by the function name. It defines a reusable block of code that performs a specific task whenever the function is called.

code
function name(){
console.log("Gunalan")
}
name()
output
Gunalan
How to receive and give the arguments in function?
function name(name1,name2){
console.log("Gunalan")
console.log(name1,name2)
}
name("guna","ramesh")
I created a function named name.
The function has two parameters, name1 and name2.
Parameters are used to receive values when the function is called.
When I call the function using name("guna", "ramesh"), the values "guna" and "ramesh" are called arguments.
The first argument ("guna") is assigned to name1.
The second argument ("ramesh") is assigned to name2.
Then the function executes its code and prints:

Gunalan
guna ramesh

example 2 add two values in function
function name(val1,val2){
console.log("Gunalan")
console.log(val1+val2)
}
name(90,87)
output
Gunalan
177
when use return in function
Use return when you want a function to send a value back to where it was called.
function name(val1,val2){
console.log("Gunalan")
console.log(val1+val2)
return val1-val2
}
let result=name(90,87)
console.log(result)
output
Gunalan
177
3
Function Expression
A function expression means storing a function inside a variable.
const name=function(){
console.log("gunalan")
}
name()
output
gunalan

if you call before function expression its show error because its stored one variable.So dont call previously.
name()
const name=function(){
console.log("gunalan")
}
output
ReferenceError: Cannot access 'name' before initialization

Python Train Task 1

Guna Ramesh — Thu, 28 May 2026 08:52:51 +0000

Task1:
Two trains are travelling one place to another place.
Total no of station is 300.
The 1st train will stop every 3rd station and
2nd train will stop every 5th station.
I need a following output :
if 1st train stops in any stations.print Train 1 is stopped
if 2nd train stops in any stations.print Train 2 is stopped
And both trains are stops in same stations print Both Trains are stopped.

program:
station=1
totalstation=300
while totalstation>=station:
    if station%3==0 and station%5==0:
        print(station,"Both Trains are stopped.")
    elif station%3==0:
        print(station,"Train 1 is stopped.")
    elif station%5==0:
        print(station,"Train 2 is stopped.")
    station=station+1

output:
3 Train 1 is stopped.
5 Train 2 is stopped.
6 Train 1 is stopped.
9 Train 1 is stopped.
10 Train 2 is stopped.
12 Train 1 is stopped.
15 Both Trains are stopped.
18 Train 1 is stopped.
20 Train 2 is stopped.
21 Train 1 is stopped.
24 Train 1 is stopped.
25 Train 2 is stopped.
27 Train 1 is stopped.
30 Both Trains are stopped.
33 Train 1 is stopped.
35 Train 2 is stopped.
36 Train 1 is stopped.
39 Train 1 is stopped.
40 Train 2 is stopped.
42 Train 1 is stopped.
45 Both Trains are stopped.
48 Train 1 is stopped.
50 Train 2 is stopped.
51 Train 1 is stopped.
54 Train 1 is stopped.
55 Train 2 is stopped.
57 Train 1 is stopped.
60 Both Trains are stopped.
63 Train 1 is stopped.
65 Train 2 is stopped.
66 Train 1 is stopped.
69 Train 1 is stopped.
70 Train 2 is stopped.
72 Train 1 is stopped.
75 Both Trains are stopped.
78 Train 1 is stopped.
80 Train 2 is stopped.
81 Train 1 is stopped.
84 Train 1 is stopped.
85 Train 2 is stopped.
87 Train 1 is stopped.
90 Both Trains are stopped.
93 Train 1 is stopped.
95 Train 2 is stopped.
96 Train 1 is stopped.
99 Train 1 is stopped.
100 Train 2 is stopped.
102 Train 1 is stopped.
105 Both Trains are stopped.
108 Train 1 is stopped.
110 Train 2 is stopped.
111 Train 1 is stopped.
114 Train 1 is stopped.
115 Train 2 is stopped.
117 Train 1 is stopped.
120 Both Trains are stopped.
123 Train 1 is stopped.
125 Train 2 is stopped.
126 Train 1 is stopped.
129 Train 1 is stopped.
130 Train 2 is stopped.
132 Train 1 is stopped.
135 Both Trains are stopped.
138 Train 1 is stopped.
140 Train 2 is stopped.
141 Train 1 is stopped.
144 Train 1 is stopped.
145 Train 2 is stopped.
147 Train 1 is stopped.
150 Both Trains are stopped.
153 Train 1 is stopped.
155 Train 2 is stopped.
156 Train 1 is stopped.
159 Train 1 is stopped.
160 Train 2 is stopped.
162 Train 1 is stopped.
165 Both Trains are stopped.
168 Train 1 is stopped.
170 Train 2 is stopped.
171 Train 1 is stopped.
174 Train 1 is stopped.
175 Train 2 is stopped.
177 Train 1 is stopped.
180 Both Trains are stopped.
183 Train 1 is stopped.
185 Train 2 is stopped.
186 Train 1 is stopped.
189 Train 1 is stopped.
190 Train 2 is stopped.
192 Train 1 is stopped.
195 Both Trains are stopped.
198 Train 1 is stopped.
200 Train 2 is stopped.
201 Train 1 is stopped.
204 Train 1 is stopped.
205 Train 2 is stopped.
207 Train 1 is stopped.
210 Both Trains are stopped.
213 Train 1 is stopped.
215 Train 2 is stopped.
216 Train 1 is stopped.
219 Train 1 is stopped.
220 Train 2 is stopped.
222 Train 1 is stopped.
225 Both Trains are stopped.
228 Train 1 is stopped.
230 Train 2 is stopped.
231 Train 1 is stopped.
234 Train 1 is stopped.
235 Train 2 is stopped.
237 Train 1 is stopped.
240 Both Trains are stopped.
243 Train 1 is stopped.
245 Train 2 is stopped.
246 Train 1 is stopped.
249 Train 1 is stopped.
250 Train 2 is stopped.
252 Train 1 is stopped.
255 Both Trains are stopped.
258 Train 1 is stopped.
260 Train 2 is stopped.
261 Train 1 is stopped.
264 Train 1 is stopped.
265 Train 2 is stopped.
267 Train 1 is stopped.
270 Both Trains are stopped.
273 Train 1 is stopped.
275 Train 2 is stopped.
276 Train 1 is stopped.
279 Train 1 is stopped.
280 Train 2 is stopped.
282 Train 1 is stopped.
285 Both Trains are stopped.
288 Train 1 is stopped.
290 Train 2 is stopped.
291 Train 1 is stopped.
294 Train 1 is stopped.
295 Train 2 is stopped.
297 Train 1 is stopped.
300 Both Trains are stopped.

What is Sep-Seperate in Python?

Guna Ramesh — Wed, 27 May 2026 06:12:42 +0000

sep **stands for separator
**sep works only when there are 2 or more values.
Its cant work if any one value is available.

print("Gunalan", sep="*")
output
Gunalan

If you didn't use **sep **to make a **space **By default Python uses space, so we use sep to change it.

program
print("Gunalan","Ramesh")
output
Gunalan Ramesh

So we need any thing instead of Space use sep for change.
Example:

program
print("Gunalan","Ramesh",sep="*")
output
Gunalan*Ramesh
print("Gunalan","Ramesh",sep=".")
output
Gunalan.Ramesh
print("Gunalan","Ramesh",sep="with")
output
GunalanwithRamesh
But you did \n 
output
Gunalan
Ramesh

Reason is \n is used for push next value to next line.
Symbol Meaning
\n next line
\t tab space
\ backslash
\' single quote
\" double quote
They are special commands inside .

JavaScript Scenario Questions (Variables, Operators, Conditional Statements)

Guna Ramesh — Tue, 26 May 2026 14:14:33 +0000

1.You are building a login system. Store username and password in variables and check whether both are filled.

Program
let username="gunalan";
let password="ramesh"
if(username!==""&&password!==""){
    console.log("filled")
}
else{
    console.log("Not filled")
}

output
filled

Explanation:
I created two variables named username and password using the let keyword and assigned values to them.
Then, I used an if condition to check whether both variables are filled or not.
"" means empty
!== "" means not empty (filled)
&& means both conditions must be true
So, the condition checks if both username and password are not empty.
If both are filled, it prints "filled".
Otherwise, it prints "Not filled".
So the output is "filled".

2.Create variables to store a product's name, price, and stock. Print a message like:
"iPhone costs ₹60000 and only 5 left in stock"

program
       let name="iPhone"
       let price=60000
       let stock=5
       console.log(name,"costs","₹"+price,"and only",stock,"left in stock")

output
       "iPhone costs ₹60000 and only 5 left in stock"

Explanation:

I created three variables using let: name, price, and stock, and assigned values to them.

Then, I used console.log() to print a message using those variables.

The output will be:
"iPhone costs ₹ 60000 and only 5 left in stock"

name → product name
price → product price
stock → available quantity

console.log() is used to display the message by combining text and variables.

3.Store a student's marks in 3 subjects and calculate total.

let tamil=98
let english=100
let maths=100
let total=tamil+english+maths
console.log(total)

output
298

explanation
I created three variables: tamil, english, and maths, and assigned marks to them.

Then, I calculated the total using:
let total = tamil + english + maths;

Finally, I printed the total using console.log().

4.Swap two numbers without using a third variable.

program
let a=10;
let b=20
    a=a+b 
    b=a-b 
    a=a-b
    console.log(a,b)

output
20 10

Explanation
Add both → a = a + b a=10+20=30
Get original a → b = a - b b=a-b =>30-20=10
Get original b → a = a - b a=a-b =>30-10=20

5.Create a variable that stores whether a user is logged in or not and show a welcome message.

program
  let loggedin=true
  if(loggedin){
      console.log("Your'e welcome!")
  }
  else{
      console.log("login first")
  }

output
Your'e welcome!

Some Task In Operators in Javascript

Guna Ramesh — Tue, 26 May 2026 03:48:05 +0000

Operators Task

Task 1
let a = 15;
let b = 4;

Find:

a + b
a % b

program:
    let a =15;
    let b=4;
    console.log (a+b);
    console.log (a%b);

output:
    19
    3

Task 2
let x = 10;
x += 20;

Final value?

program:
    let x=10;
    x=x+=20; //x=x+20//
    console.log(x)

output:
    30

Task 3

Output guess:

console.log(5 == "5");
console.log(5 === "5");

program:
    console.log(5 == "5");
    console.log(5 === "5");

output: 
    true
    false

explanation:
== is only check a value.
=== is check a value and datatype if anyone is different it said false.
Task 4 (Real-life)
let age = 17;

Check:

age >= 18 → print true/false

program:
    age=17;
    if(age>=18){
        console.log("true")
    }
    else{
        console.log("false")
    }

output:
    false

explanation:

The variable age is initialized with the value 17
The if statement checks whether the condition age >= 18 is true
Since 17 is less than 18, the condition becomes false
When the condition is false, the else block is executed
Therefore, the program prints "false"
Output:
false
Task 5: Even or Odd (Using %)
let num = 7;

Check:

If remainder is 0 → even
Else → odd

Print result

program:
let num = 7;
if (num%2==0){
console.log("even")
}
else{
console.log("odd")
}

output:
odd

🔍 Explanation

 The variable num is assigned the value 7

 The condition num % 2 === 0 checks whether the number is divisible by 2

 If the remainder is 0, the number is even

 If the remainder is not 0, the number is odd

 Here, 7 % 2 = 1, so the condition is false

 Therefore, the else block executes

Output
odd

Key Point

% (modulus) operator is used to find the remainder
Even numbers → remainder 0
Odd numbers → remainder not 0
Task 5: Logical Operators
let age = 22;
let hasID = true;

Check:

age > 18 AND hasID → ?
age < 18 OR hasID → ?

Print both outputs

program:
    let age = 22;
    let hasID = true;
    console.log(age>18 && hasID)
    console.log(age<13||hasID)
output:
    true
    true

what happens?
The variable age is assigned the value 22
The variable hasID is assigned the value true
Condition 1: age > 18 && hasID

age > 18 → 22 > 18 → true
hasID → true

Using AND (&&):
Both conditions must be true

Result:
true && true → true

Condition 2: age < 18 || hasID

age < 18 → 22 < 18 → false
hasID → true

Using OR (||):
At least one condition must be true

Result:
false || true → true

Output
true
true

Key Points

 && (AND) → both conditions must be true
 || (OR) → any one condition is enough
 Logical operators are used for decision making

Python Tasks

Guna Ramesh — Tue, 26 May 2026 03:43:25 +0000

The following programs clearly explain the concept of indentation and highlight common mistakes we usually make.
1.expected output is "1 1 1 1 1"

program:
count = 1
while count<=5:
print(1, end=' ') #print(1, end='\n')
count=count+1

output:
1 1 1 1 1

What happens in this program?

Initially, the variable count is assigned the value 1

The while loop checks whether count is less than or equal to 5

If the condition is true, the loop executes

Inside the loop, the value 1 is printed followed by a space

After printing, the value of count is increased by 1

Now count becomes 2, and the loop runs again

This process continues until count becomes greater than 5

When count becomes 6, the condition becomes false, and the loop stops

Output
1 1 1 1 1

Additional Note

If you use:

print(1, end='\n')

The output will be:

Program 1
Expected Output
2 4 6 8 10 6 12
Program
count = 1
while count <= 5:
print(count * 2, end=' ')
count = count + 1

print(count, end=' ')
print(count * 2)
Explanation

Initially, count is assigned the value 1

The loop runs while count <= 5

Inside the loop, count * 2 is printed with a space

After each iteration, count is increased by 1

When the loop ends, count becomes 6

After the loop:

print(count, end=' ') prints 6
print(count * 2) prints 12
Output

2 4 6 8 10 6 12

Program 2
Expected Output
2 4 6 8 10 6
12
Program
count = 1
while count <= 5:
print(count * 2, end=' ')
count = count + 1

print(count)
print(count * 2)
Explanation

The loop works the same as in Program 1

After the loop ends, count = 6

print(count) prints 6 and moves to the next line

print(count * 2) prints 12 on a new line

Output
2 4 6 8 10 6
12
Important Concept: Indentation

If indentation is not handled correctly, the output will be unexpected.

Wrong Program
count = 1
while count <= 5:
print(count * 2, end=' ')
count = count + 1
print(count)
print(count * 2)
What happens?

The last two print statements are inside the loop because of indentation

So they execute in every iteration

This produces repeated and mixed output

Output
2 2
4
4 3
6
6 4
8
8 5
10
10 6
12
Final Key Points

Indentation decides whether code is inside or outside the loop
end=' ' prints in the same line
end='\n' prints in the next line
print() moves to the next line
Always align indentation carefully

Python

Guna Ramesh — Mon, 25 May 2026 13:53:49 +0000

1.Excepted output:
10 8 6 4 2
program:
a=10
while a>=1:
print(a,end=" ")
a=a-2
output:
10 8 6 4 2

What happens in this program?

Initially, the value of a is set to 10. The while loop checks whether a is greater than or equal to 1.

Since the condition is true, the loop starts executing. Inside the loop, the current value of a is printed, followed by a space.

After printing, the value of a is decreased by 2 (a = a - 2), and the updated value is stored back in the same variable.

This process continues:

First iteration → a = 10
Second iteration → a = 8
Third iteration → a = 6
Fourth iteration → a = 4
Fifth iteration → a = 2

When a becomes 0, the condition a >= 1 becomes false, and the loop stops.

Output:
10 8 6 4 2

This task for you
15 12 9 6 3

Javascript Variables.

Guna Ramesh — Sun, 24 May 2026 15:52:51 +0000

Task 1:Create Variables

Create 3 variables:

Your name
Your age
Your city

Use let for age, const for name
program:
let name="gunalan"
let age="23"
const city="pattukkottai"
console.log(name)
console.log(age)
console.log(city)

output:
gunalan
23

pattukkottai

Task 2: Update Value

let score = 10;
Change it to 50 and print it using:
console.log(score);

program:
let score=10;
score=50;
console.log(score)

output:

50

Task 3: Const Error Check

const country = "India";
Try to change it to "USA"
What happens? (observe error)

program:
const country="india";
country="usa";
console.log(country);

output:

TypeError: Assignment to constant variable.

Understanding Concepts

Task 4: Identify Output

program:
var x = 10;
var x = 20;
console.log(x);

output:

20

Task 5: Fix Error

let y = 30;
let y = 40;

Fix this code without error

program:
let y=30;
y=40;
console.log(y)

output:

40

Task 6: Scope Test
{
let a = 100;
}
console.log(a);

Will it work or error? Why?

program:
{
let a = 100;
}
console.log(a);

output:
a is not defined . variable is inside a block but the print statement is outside
so couldn't print the output because let is a block-scope, if you did the print statement inside the

block it is printed.

Level 3: Real-Life Task (Your Project Style)
Task 7: Shopping Cart

Create variables:

const shopName = "RuralCart";
let items = 0;
let price = 100;

Do this:

Add 3 items → update items
Increase price → price = price + 50
Print all values

program:
const shopName = "RuralCart";
let items = 0;
let price = 100;
items=items+3;
price=price+50;
console.log(shopname)
console.log(items);
console.log(price);

output:
RuralCart
3

150

Bonus Challenge

Task 8: Combine Everything

Write a program:

productName
productPrice
quantity

Calculate total:

total = productPrice * quantity;

Print:

Product: Rice
Total Price: 500

program 1:

let productName="Rice";
let productPrice=50;
let quantity=10;
total=productPrice*quantity;
console.log(total)

output:
500

program 2:
let productName="Rice";
let productPrice=50;
let quantity=10;
console.log(productPrice*quantity)

output:

500

Task 9: String + Variable

Create:

let name = "Guna";
let age = 23;

Print like this:

My name is Guna and I am 23 years old

program:
let name = "Guna";
let age = 23;
console.log("My name is "+name+" and I am "+age+" years old")

output:

**My name is Guna and I am 23 years old**

Task 10: Total Price (Clean Output)
let product = "Sugar";
let price = 40;
let qty = 5;

expect Output:

Product: Sugar
Total: 200

program:
let product = "Sugar";
let price = 40;
let qty = 5;
let total=price*qty
console.log("Product:"+product)
console.log("Total:"+total)
output:
Product: Sugar

Total: 200

Python progarming to Print the output in decending order using while loop

Guna Ramesh — Sun, 24 May 2026 07:47:20 +0000

Expected Output is 5 4 3 2 1
Print the Program using Python
count=1
price=5
while count<=5:
print(price,end=' ')
price=price-1
count=count+1

What happens here? Step 1: Create a variable named count and assign the value 1.

Step 2:
Create a variable named price and assign the value 5.

Step 3 (Condition):
The loop runs as long as the value of count is less than or equal to 5.
If count becomes greater than 5, the loop stops.

How the loop works
First, the loop checks the value of count. Initially, it is 1.

The condition count <= 5 is true, so the loop starts.

It prints the value of price and adds a space using end=' '.

Then:

count is increased by 1

price is decreased by 1

Now:

count = 2

price = 4

Again, the condition is checked. Since 2 <= 5, it is still true.

This process continues until count becomes 6. At that point, the condition becomes false, and the loop stops.

Output
5 4 3 2 1
Why is the output horizontal instead of vertical?
Normally, print() moves to the next line after printing.

But here we use:

end=' '
This means:

After printing, a space is added instead of a new line.

So the cursor stays on the same line.

Different end examples
end=' ' → 5 4 3 2 1

end='.' → 5.4.3.2.1.

end='' → 54321

JavaScript Basics

Guna Ramesh — Sun, 24 May 2026 07:11:40 +0000

1.What is JavaScript?
JavaScript is a scripting programing language used to make website interactive.
example: click a button -> something happens.
used with
Html for make Content Structue.
Css for to make Design and Style.
JS for to make a Behaviour.

2.what is Interpreter?
Interpreter is a program thats reads and executes a program line by line instead of execute whole program at once.Js also called Interpreter
programming language because its executes a program line by line.

Advantage:     Error shown instantly.
           Execute line by line.
Disadvantage:  Slower than Compiler.

3.What is Variable In JavaScript and How to use?
Variable are declared a keyword like var , let and const.

example:       var a=10;
           let a=20;
           let name="gunalan";
           const a=true;

4.What is the Difference between Var Let and Const?
In JavaScript, variables are declared using three keywords: var, let, and const.
Each has different behavior in terms of scope, reusability, and mutability.

1.var is the oldest way to declare variables in JavaScript.
    var name = "Guna";
Features:
        Function-scoped (not block-scoped)
        Can be allow redeclared
        Can be reinitialized
        Gets hoisted (moved to top internally)

        var x = 10;
        var x = 20; //its allowed
var is not recommended in modern development due to unexpected behavior.
example:
        {
            var a=10;
            console.log(a);
        }
        output:10
        ---------------------
        {
            var a=10;
        }
            console.log(a);
        output:10


2.let is used for variables that may change.But cant to redeclare. And its only access inside the block. Because its block-scope.
    let a=10;
    let a=15; //cant allow redeclare 
        a=15;//allow to reinitial.
Features:
        Block-scoped ({ })
        Can be updated
        Cannot be redeclared in the same scope  
example:
        {
            let a=10;
            console.log(a);
        }
        output:10
        ---------------------
        {
            let a=10;
        }
            console.log(a);
        output:a is not defined

3.const is used for values that should not change.
    const age = 23;
Features:
        Block-scoped
        Cannot be updated
        Cannot be redeclared
        Must be initialized during declaration
example:
        {
            const a=10
            console.log(a)
        }
        output:10   
        --------------------------
        {
            const a=10
        }
        console.log(a)
        output:a is not defined.

Facebook Layout

Guna Ramesh — Fri, 22 May 2026 07:20:43 +0000

Facebook Login Page Clone using HTML & CSS
Introduction
In this project, I created a clone of the Facebook login page using HTML and CSS. The goal was to understand real-world UI design and improve my frontend development skills.

Technologies Used
HTML for structuring the webpage
CSS for styling and layout design
CSS Grid and Flexbox for alignment

Features
Two-column layout using CSS Grid
Left section with logo and image
Right section with login form
Styled buttons with hover effects
Footer with multiple language options

What I Learned
Through this project, I learned how to:
Use CSS Grid for page layout
Use Flexbox for alignment and spacing
Design responsive UI structures
Style forms, buttons, and text effectively
Organize code for better readability

Challenges Faced
Aligning the left and right sections properly
Managing spacing between elements
Making the layout similar to the original Facebook design

Improvements
Added responsive design using media queries
Improved button hover effects
Enhanced UI with better spacing and shadows

Conclusion
This project helped me gain hands-on experience in building real-world UI designs. It improved my understanding of layout techniques and boosted my confidence in frontend development.

Future Scope
Add JavaScript form validation
Connect to backend for login functionality
Improve mobile responsiveness further

CSS-Cascading Style Sheet

Guna Ramesh — Thu, 21 May 2026 08:14:09 +0000

1.What is CSS and Why we use this?
CSS is used to style the html tags.
Like:
Color
Background Color
Size
Border etc...
Because html is a tag if we enter the value inside any tag its will display in browser. But its look normal,ok now i ask one question we see two sites one is display in black and white without style and other is look color-fully and use more styles.
I think all are like the second one right!
That's why we using CSS.
2.How many ways to using CSS?
we must know

1.Inline CSS
2.Internal CSS
3.External CSS
Inline-Inline CSS is applied directly inside an HTML element using the style attribute.
<p style="color: red;">Hello World</p>
Use one element only
can't reusable.
Internal-Internal CSS is written inside the <style> tag in the <head> section of an HTML page.
<head>
<style>
p {
color: blue;
}
</style>
</head>
Works for single page
Easy to manage inside same file
External-External CSS is written in a separate .css file and linked to HTML.
These is the format to link CSS file to Html file.
<link rel="stylesheet" href="style.css">
We go clearly from basics of css.
1.create a one div class fix any name to that div.
1.i am using the name is container.
2.Container is created but cant visible.
3.Use css to make color and set width and height.
how to use
div class name is container
.container{
border:1px solid green; //now border is visible like green color.
height:100vh;//why we did a height 100vh -view of height 100 fully covered. But dont need to set width because div tag is block level so take full width.
}

Without CSS Property

Border 2px solid green

Border 2px solid
100vh

Upcoming days i will update next properties.