🚀 A simple HTML fact most developers miss When we use this in HTML: <input type="number"> we expect the user to type only numbers, right? But surprisingly, the input still allows characters like, “e”, “+”, “-”, or even a decimal dot. 🧩 Why this happens : <input type="number"> supports scientific notation by design. So writing 1e5 means 100000 and -3e-2 means -0.03. Because of this, the browser treats e, +, -, and . as valid characters while typing. ❗But here’s the problem: For 90% of practical use cases: Phone number OTPs account IDs numeric-only fields and anything that must strictly contain digits ✅ The simple fix Block these characters on keypress and clean any invalid characters from pasted input 👇 #webdevelopment #javascript #frontend #html #programming #developerlife #softwaredevelopment #webdev
Why <input type="number"> allows non-numeric characters
More Relevant Posts
-
HTML 🆚 HTMX — Simple Yet Powerful! Most developers start with HTML — it’s perfect for static pages. But when you need dynamic updates without writing heavy JavaScript, that’s where HTMX shines! ⚡ ✴️HTML: static and simple ✴️HTMX: dynamic, lightweight, and server-driven ☄️With just a few hx-get or hx-post attributes, you can make interactive pages — no JS frameworks needed. Perfect for small apps, dashboards, and fast prototypes. Less JS, more productivity ✨✨ #htmx #html #webdevelopment #frontend #programming #opensource
To view or add a comment, sign in
-
-
🧮 Built a scientific calculator using HTML, CSS, and JavaScript. 🔢 Added functions like sin, cos, tan, log, ln, and sqrt. 🔄 Implemented a DEG/RAD mode toggle with localStorage support. 💻 Designed a responsive and modern user interface. ⚠️ Included error handling for invalid inputs and calculations. #HTML #CSS #JavaScript #WebDevelopment #Frontend #CalculatorApp #ScientificCalculator #CodingProject #ResponsiveDesign #TechProject #Programming #JSProject
To view or add a comment, sign in
-
Web Development Update: This week, we delved deeper into JavaScript fundamentals and explored several core concepts that form the backbone of web development. We covered: Strings: Understanding how to manipulate text data effectively using various string methods. Functions: Learning how to write reusable blocks of code to make our programs more efficient and organized. DOM (Document Object Model): Gaining hands-on experience in dynamically interacting with HTML elements using JavaScript. Arrays: Exploring how to store and manage lists of data. Array Methods (map, filter, reduce): Mastering these powerful higher-order functions to transform and process data efficiently. forEach Loop: Understanding how to iterate through arrays cleanly and effectively. These concepts are essential for building dynamic and interactive web applications. By combining these skills, we can now create programs that not only process data intelligently but also update the user interface in real time. GitHub: https://lnkd.in/eendUUSY #WebDevelopment #JavaScript #FrontendDevelopment #LearningJourney #Programming #Coding
To view or add a comment, sign in
-
🌡️ Built a real-time Temperature Converter using HTML, CSS, and JavaScript! Converts Celsius ↔ Fahrenheit instantly using pure JavaScript logic — no reloads! 🚀 Key Concepts Used: 1. DOM Manipulation 2. Event Listeners 3. Input Handling JS Code: ``` let cel = document.querySelector("#cel"); let fah = document.querySelector("#fah"); cel.addEventListener("input", () => { let celRes = (cel.value * 9) / 5 + 32; if (!Number.isInteger(celRes)) { celRes = celRes.toFixed(4); } fah.value = celRes; }); fah.addEventListener("input", () => { console.log("clicked"); let fahRes = ((fah.value - 32) * 5) / 9; if (!Number.isInteger(fahRes)) { fahRes = fahRes.toFixed(4); } cel.value = fahRes; }); cel.addEventListener("click", () => { cel.value = ""; }); fah.addEventListener("click", () => { fah.value = ""; }); ```` #JavaScript #WebDevelopment #FrontendDevelopment #Coding #LearnJavaScript #HTML #CSS #JSProjects #Programming #Developer 🎥 Watch the full demo below 👇
To view or add a comment, sign in
-
JavaScript is a high-level, interpreted programming language mainly used to make web pages interactive and dynamic. It runs in browsers and helps add behavior — like animations, form validation, or interactive buttons — to HTML and CSS web pages. ⚙️ Key Features of JavaScript: 🧠 Interpreted language – no need for a compiler; runs directly in the browser. ⚡ Lightweight & fast – executes line by line and responds quickly. 🔄 Event-driven – reacts to user actions (clicks, scrolls, inputs). 🧩 Prototype-based OOP – supports objects and inheritance. 🌍 Runs everywhere – browsers, servers (Node.js), and apps. 🚀 What Is the V8 Engine? The V8 Engine is Google’s open-source JavaScript engine, written in C++, that executes JavaScript code. It was first developed for the Google Chrome browser, but it’s now used in Node.js, Edge, and Electron apps (like VS Code). You can think of V8 as the “brain” that makes JavaScript run quickly and efficiently. ⚙️ How the V8 Engine Works Internally Parsing 🧾 V8 reads your JavaScript code and converts it into an Abstract Syntax Tree (AST) — a structure representing your code. Ignition (Interpreter) 🔄 Converts the AST into bytecode (an intermediate form). TurboFan (Compiler) ⚙️ Frequently used bytecode is compiled into machine code (the language your CPU understands), making it run very fast. Garbage Collection 🧹 V8 automatically removes unused memory to optimize performance. #Sudheer Velpula #JavaScript #V8Engine
To view or add a comment, sign in
-
-
✅ What is HTML? HTML stands for HyperText Markup Language. It is the standard language used to create and structure webpages. HTML is not a programming language — it is a markup language that tells the browser how to display content. 🧩 What does HTML do? It structures the content on a webpage, such as: Headings Paragraphs Images Links Lists Tables Forms 🔗 HTML + CSS + JavaScript HTML alone = structure CSS = style and colors JavaScript = interaction and behavior Together → complete web development #HTML #CODING #JAVASCRIPT #PYTHON #CSS #REACT
To view or add a comment, sign in
-
-
💡 Shallow Copy vs Deep Copy — and a Hidden Browser API You Should Know 🚀 Ever faced this situation? You copy an object or array… and somehow, the original still changes. 😵💫 That’s the trap between shallow and deep copies in JavaScript 👇 🧩 Shallow Copy A shallow copy only duplicates the first level. Nested objects or arrays still share the same reference. 🧠 Tools that create shallow copies: Object.assign(), spread syntax (...), Array.slice() 🌊 Deep Copy A deep copy makes a completely new clone of all nested levels, so changes never affect the original. ✅ 1. Using the Modern Browser API — structuredClone() Deeply clones objects, arrays, Maps, Sets, Dates, etc... but removes methods/function it's always better to go for recursive deep copy it will take care functions. Supported in modern browsers (Chrome 98+, Node 17+) ✅ 2. Recursive Deep Copy (for custom control) #JavaScript #Frontend #WebDevelopment #CodingTips #structuredClone #DeepCopy #ShallowCopy #TechLearning
To view or add a comment, sign in
-
-
What is DOM and How it works ? The DOM, or Document Object Model, is a programming interface that represents a web page's HTML structure as a tree of objects, allowing developers to interact with and change a page's content, style, and structure using languages like JavaScript. Think of it as a live, in-memory blueprint of the page, where each HTML tag is a node in a hierarchy. Browser builds DOM after loading the html . DOM is a bridge between Browser and Javascript. Developers can manipulate or interact with web pages through javascript using Dom. Every html tag is an “element node” in DOM. Take a look at the picture below to understand how the DOM tree is created. #React #Javascript #WebDevelopment #Programming
To view or add a comment, sign in
-
-
🪄 JavaScript — The Language That Brings Webpages to Life! JavaScript isn’t just a programming language — it’s the magic that makes websites interactive ✨ Let’s break it down in simple terms 👇 1️⃣ What is JavaScript? It’s a scripting language used to add functionality and interactivity to web pages — like buttons that react, pop-ups that appear, and forms that validate input. 2️⃣ Where It Runs: JavaScript runs inside the browser, making it a client-side language. (Though now, with Node.js, it can also run on servers too 🖥️) 3️⃣ Why It’s Important: Without JavaScript, web pages would just be static — like reading a printed page online. With it, they become dynamic — like a live conversation between you and the site 💬 4️⃣ What It Can Do: ✅ Handle events (clicks, inputs, etc.) ✅ Change HTML and CSS in real-time ✅ Fetch data from servers ✅ Build entire web applications 🌐 5️⃣ Example: document.querySelector("button").addEventListener("click", () => { alert("Hello, World!"); }); Just a few lines — and your webpage starts talking back to you 😄 💬 Every great developer starts here — by understanding how JS turns ideas into interactions. #JavaScript #WebDevelopment #CodingJourney #LearnToCode #FrontendDevelopment #ProgrammingBasics
To view or add a comment, sign in
-
💡 Ever changed a copy of an object… and accidentally changed the original too? If you’ve worked with JavaScript, you know this painful trap all too well! Let’s clarify the difference between shallow copy and deep copy, and see how modern JS handles it. 🔹 Shallow Copy A shallow copy duplicates only the top-level properties. Nested objects or arrays are still shared. const original = { name: "Alice", details: { age: 25 } }; const shallowCopy = { ...original }; shallowCopy.details.age = 30; console.log(original.details.age); // 30 → original object changed! ✅ Top-level copied. ⚠️ Nested objects still reference the same memory. 🔹 Deep Copy A deep copy duplicates everything, including nested objects, so changes don’t affect the original. 1️⃣ Using JSON.stringify() + JSON.parse() const original = { name: "Alice", details: { age: 25 } }; const deepCopy = JSON.parse(JSON.stringify(original)); deepCopy.details.age = 30; console.log(original.details.age); // 25 → safe! ⚠️ Limitation: Doesn’t handle Dates, Maps, Sets, functions, or circular references. 2️⃣ Using structuredClone() (Modern JS) const original = { name: "Alice", details: { age: 25 } }; const deepCopy = structuredClone(original); deepCopy.details.age = 30; console.log(original.details.age); // 25 → safe! ✅ Handles most types, including Date, Map, Set, etc. ⚠️ Available in modern browsers & Node.js v17+. #JS #JavaScript #WebDevelopment #DeepCopy #ShallowCopy #CodingTips #Programming
To view or add a comment, sign in
Explore content categories
- Career
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Hospitality & Tourism
- Business Strategy
- Change Management
- Organizational Culture
- Design
- Innovation
- Event Planning
- Training & Development
Validating at the UI level and sanitizing pasted input is exactly the kind of defensive coding that prevents edge-case bugs. Nice reminder that even “simple” HTML elements have deeper quirks.