DEV Community: ramyasree manthena

⭐ HTML Input Types (With Examples)

ramyasree manthena — Tue, 18 Nov 2025 16:20:36 +0000

When building forms in HTML, the element is one of the most important building blocks. HTML5 introduced many useful input types that help improve user experience, validation, and accessibility.

In this article, you’ll learn every input type in HTML, along with simple descriptions and examples you can copy-paste into your projects.

🔤 1. Text-Based Input Types

1. text — Single line text

<input type="text" placeholder="Enter your name">

2. password — Hides characters

<input type="password" placeholder="Enter password">

3. email — Validates email format

<input type="email" placeholder="Enter email">

4. number — Numeric input with min/max

<input type="number" min="1" max="10">

5. tel — For phone numbers

<input type="tel" placeholder="Phone number">

6. url — URL input with validation

<input type="url" placeholder="https://example.com">

7. search — Search box style

<input type="search" placeholder="Search here">

🎨 2. Selection Inputs (Choose/Toggle Options)

8. checkbox — Multiple selection

<input type="checkbox"> Accept Terms

9. radio — Single option from a group

<input type="radio" name="gender"> Male

10. range — Slider

<input type="range" min="0" max="100">

11. color — Color picker

<input type="color">

📅 3. Date & Time Inputs

12. date

<input type="date">

13. time

<input type="time">

14. datetime-local

<input type="datetime-local">

15. month

<input type="month">

16. week

<input type="week">

📁 4. File & Upload Inputs

17. file — Upload files

<input type="file">

🕹️ 5. Button Inputs

18. button

<input type="button" value="Click Me">

19. submit

<input type="submit" value="Submit">

20. reset

<input type="reset" value="Reset">

🕶️ 6. Hidden Input

21. hidden — Store background values

<input type="hidden" value="user123">

🖼️ 7. Special Input

22. image — Image submit button

<input type="image" src="submit.png" width="100">

📝 Summary Table (Easy Reference)

Input Type	Description
text	Single line text
password	Hidden characters
email	Email validation
number	Numeric input
tel	Phone number
url	Website URL
search	Search field
checkbox	Multiple selection
radio	Single choice
range	Slider input
color	Color picker
date	Choose a date
time	Choose time
datetime-local	Date + time
month	Choose month
week	Choose week
file	Upload a file
button	Custom button
submit	Submit form
reset	Reset form
hidden	Hidden value
image	Image submit button

💡 Conclusion

HTML provides a wide range of input types that help improve form usability and user experience. Whether you are collecting text, dates, colors or files — there is an input type designed specifically for that job.

Feel free to copy these examples into your project or bookmark this guide for quick reference.

Happy Learning!!

Understanding JavaScript Data Types

ramyasree manthena — Tue, 18 Mar 2025 16:19:05 +0000

JavaScript is a dynamically typed language, meaning you don't have to specify a variable's type explicitly. However, understanding data types is crucial for writing efficient and bug-free code.In this blog, we'll explore JavaScript's data types, their characteristics, and how they work.

Primitive Data Types
JavaScript has seven primitive data types, which are immutable and stored by value.

1. String
A string represents textual data enclosed in quotes.

let name = "Ramyasree";
let greeting = 'Hello, world!';

Strings can be manipulated using various methods like length, toUpperCase(), toLowerCase(), concat(), etc.

2. Number
JavaScript uses a single Number type to represent both integers and floating-point numbers.

let age = 25;
let price = 99.99;

Special numeric values include Infinity, -Infinity, and NaN (Not-a-Number).

3. Boolean
A Boolean represents a logical entity that can have only two values: true or false.

let isLoggedIn = true;
let hasAccess = false;

4. Undefined
A variable that has been declared but has not been assigned a value is undefined.

let x;
console.log(x); // undefined

5. Null
null is an intentional absence of any value.

let y = null;
console.log(y); // null

6. BigInt
BigInt is used for integers larger than Number.MAX_SAFE_INTEGER.

let bigNumber = 123456789012345678901234567890n;
console.log(bigNumber);

7. Symbol
Symbols are unique and immutable primitive values used as object keys.

let sym1 = Symbol('id');
let sym2 = Symbol('id');
console.log(sym1 === sym2); // false

Non-Primitive (Reference) Data Types
Non-primitive data types are objects and are stored by reference.
1. Array
Arrays are special types of objects used to store lists of values.

let colors = ["red", "green", "blue"];
console.log(colors[1]); // green

2. Object
Objects are collections of key-value pairs.

let person = {
  name: "Alice",
  age: 30,
  isStudent: false
};
console.log(person.name); // Alice

3. Function
Functions are also objects in JavaScript and can be assigned to variables.

function greet() {
  return "Hello!";
}
console.log(greet()); // Hello!

4.Classes
Templates for creating objects.

class Person {
  constructor(name) {
    this.name = name;
  }
}

5.Set
A collection of unique values.

let uniqueNumbers = new Set([1, 2, 3, 3]);

6.Map
A collection of key-value pairs where keys can be any data type.

let map = new Map();
map.set("name", "Alice");

7.Date
Used to work with date and time

let today = new Date();

8.RegExp
Used for pattern matching.

let regex = /hello/i;

Conclusion
Understanding JavaScript data types is essential for writing robust applications. By knowing how primitive and reference types work, you can avoid unexpected bugs and improve performance.

If you found this helpful, share your thoughts in the comments or follow me for more JavaScript insights!

Happy Coding!!

“The Hidden Shortcut to Open GitHub Repositories in VS Code”

ramyasree manthena — Sun, 16 Mar 2025 02:40:58 +0000

A simple yet powerful GitHub feature lets you open your repository in a VS Code environment in seconds. Read on to uncover this hidden gem and see how it can streamline your development process.
On any repositroy page, simply replace “.com” with “.dev” and you are all set ✅

Here are the few steps to follow.

Step 1: Open your github repository in web browser.

Step 2: In url, Github.com replace .com with .dev then url will be like this https://github.dev/ManthenaRamyasree/Remote-Quote-Machine ,then hit enter.

That’s it your editor opens with in seconds with code of repository 😀.

Happy Coding!!

Understanding the Difference Between npm and npx

ramyasree manthena — Wed, 12 Feb 2025 06:43:26 +0000

As a developer, you’ve encountered both npm and npx in your development journey. But what's the difference between them? And when should you use one over the other? In this article, we'll break down the key distinctions and help you understand how to use them effectively.

What is npm?
npm stands for Node Package Manager. It's a tool that comes bundled with Node.js and is primarily used for:

Installing Packages: You can install libraries and dependencies for your project using the npm install command.
Managing Dependencies: It keeps track of your project dependencies in the package.json file.
Running Scripts: You can define and run custom scripts, like build and test scripts, using npm run.

Common npm Commands:

npm install : Installs a package locally in your project.
npm install -g : Installs a package globally on your system.
npm start: Runs the start script defined in package.json.
npm run : Runs a custom script.

Example: Installing React

npm install react react-dom

This command installs React and ReactDOM locally in your project.

What is npx?
npx stands for** Node Package Execute**. It was introduced with npm version 5.2.0 and is used for:

Executing Packages: It allows you to run Node packages without installing them globally.
One-Time Use Packages: Perfect for utilities and CLI tools that you don’t want to permanently install.

Why Use npx?

Avoid Global Installs: With npx, you can run a package temporarily without polluting your global package registry.
Version Control: It ensures you’re using the exact version specified in your project, reducing version conflicts.
Convenience: It saves you from installing packages just to run a single command.

Example: Create React App

npx create-react-app my-app

This command executes the create-react-app package without installing it globally, creating a new React application in the my-app directory.

Key Differences:

When to Use What?
Use npm when you need to:

Add dependencies to your project (npm install ).
Manage scripts like build or test scripts (npm run build).

Use npx when you:

Want to run a package just once (e.g., npx create-react-app).
Don’t want to install a CLI tool globally.
Need to ensure you’re using the latest version of a tool.

Conclusion

Both npm and npx are powerful tools that serve different purposes in the Node.js ecosystem. While npm is great for managing project dependencies, npx shines when you need to execute packages without the overhead of installation.

By understanding when to use each, you can streamline your development workflow and avoid version conflicts.

Happy Coding!
If you found this article helpful, don’t forget to clap and share it with your fellow developers! Follow me for more insights web development.

Recipie Finder

ramyasree manthena — Fri, 17 Jan 2025 17:06:19 +0000

This is a submission for the GitHub Copilot Challenge : Fresh Starts

What I Built

Recipie Finder

Input the recipie you want to prepare and click on search it shows the different types of it. Then click on view recipie which helps to find ingredients and procedure of recipie.

Demo

Hosted it with netlify
[https://recipiefind.netlify.app/]

Repo

[https://github.com/ManthenaRamyasree/RecipieFinder]

Copilot Experience

I have built it in simple way using HTML,JS,Tailwind CSS.Very prompt in giving code as per instructions. Enjyed using it. Excited to explore more on how to use it.

Conclusion

It was nice experience. Initially i felt is it possible in 24 hrs to complete project? but using copliot it made me very smart though it is simple application I am happy in doing and submitting it.

I have come across this challenge with one my friend.Thanking him for sharing it with me.