Built a real-time validation system — part of The Odin Project's JavaScript course. ✅ Email, Country, Postal Code, Password & Confirm ✅ Live inline validation: red/green feedback as you type ✅ Multi-country postal regex ✅ Password rules: letter, number, special char ✅ Accessibility: aria-invalid, aria-describedby, aria-live ✅ No libraries — just vanilla JS, HTML, CSS If all valid... you get a high five. 🌐 Live: https://lnkd.in/e9mDU_qj 💾 Code: https://lnkd.in/ercq89FN 🎥 Watch how it works #JavaScript #WebDev #FrontEnd #TheOdinProject #LearningInPublic #FormValidation
More Relevant Posts
-
Intercept, Control, Reflect: Power Tools Hidden in JavaScript 🪞 Learned about the Proxy pattern in JavaScript and how it works closely with the Reflect object. Explored how Proxies allow interception of operations like: -Property access -Assignment -Validation -Logging or access control And how Reflect provides a clean, predictable way to forward those operations while preserving default behavior. Key takeaway: Proxies are powerful but sharp tools. They enable elegant abstractions, yet can hurt readability and debugging if overused. Reflect helps keep proxy logic explicit and intention-revealing. Understanding these internals deepens how JS really works under the hood. #JavaScript #DesignPatterns #ProxyPattern #FrontendDevelopment #WebDevelopment #LearnInPublic
To view or add a comment, sign in
-
💻 JavaScript code should read like a story, not a puzzle. We've all seen the "Pyramid of Doom." You need to login, then get a user, then get their posts. Before you know it, you are ten brackets deep and can't find the way out. In our latest article entitled "The Secret Life of JavaScript: The Promise", we look at the evolution of async code: ✅ Callbacks: The nesting nightmare. ✅ Promises: The flat chain (The IOU). ✅ Async/Await: The "pause" button that doesn't freeze the browser. See how to turn your staircase logic into a straight line. 👉 Read it on Medium: https://lnkd.in/gmXQryaZ #JavaScript #Async #Coding #SoftwareDevelopment
To view or add a comment, sign in
-
-
Day 42/100 – An Important JavaScript Concept Many People Ignore Not all performance issues come from bad code. Sometimes they come from too many function calls. 📌 Topic: Debouncing vs Throttling Both are used to control how often a function executes. ✅ Debouncing Runs the function only after a certain time has passed since the last event. Example use cases: • Search input • Form validation 👉 Executes when user stops typing. ✅ Throttling Runs the function at a fixed interval, no matter how many times the event occurs. Example use cases: • Scroll events • Window resize 👉 Executes every X milliseconds. Understanding these concepts helps build faster and smoother applications. Small improvements. Big impact. On to Day 43 🚀 #100DaysOfCode #JavaScript #WebDevelopment #LearningInPublic #Consistency #FrontendDevelopment
To view or add a comment, sign in
-
-
🚀 Optimizing .filter().map() in JavaScript — When It Actually Matters Writing readable code is always the priority. But in large datasets or performance-critical code paths, how we process arrays can make a measurable difference. A common approach is to use .filter() and .map(), or even a condition inside .map(). These patterns are readable and expressive, but they create multiple iterations and extra memory allocations — which can add up for large arrays or frequently executed code. A more efficient alternative is .reduce(), which combines filtering and mapping in a single pass, reducing memory usage and improving performance in the right scenarios. ⚠️ Important nuance: For small arrays or occasional operations, the difference is negligible. Readability and maintainability usually outweigh micro-optimizations. Always profile before optimizing — modern JS engines are fast, and clarity should come first. #JavaScript #WebPerformance #CleanCode #SoftwareEngineering #CodingBestPractices
To view or add a comment, sign in
-
-
𝐓𝐨𝐝𝐚𝐲 𝐈 𝐫𝐞𝐯𝐢𝐬𝐢𝐭𝐞𝐝 𝐚 𝐜𝐨𝐫𝐞 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 𝐜𝐨𝐧𝐜𝐞𝐩𝐭 𝐭𝐡𝐚𝐭 𝐪𝐮𝐢𝐞𝐭𝐥𝐲 𝐚𝐟𝐟𝐞𝐜𝐭𝐬 𝐜𝐨𝐝𝐞 𝐪𝐮𝐚𝐥𝐢𝐭𝐲: 𝒗𝒂𝒓 𝒗𝒔 𝒍𝒆𝒕 𝒗𝒔 𝒄𝒐𝒏𝒔𝒕 👇 var x = 10; // function-scoped let y = 20; // block-scoped const z = 30; // block-scoped & cannot be reassigned Key differences that matter in real projects: > "var" is function-scoped and can lead to unexpected bugs due to hoisting. > "let" provides block scope, making control flow safer. > "const" enforces immutability of the reference, improving readability. Modern JavaScript favors const by default, uses let when reassignment is required and avoids var in most cases. Back to fundamentals — with a modern JS lens. Any insights or suggestions are welcome🙂 #DAY6 #JavaScript #WebDevelopment #FrontendDevelopment #LearningInPublic #dailyChallenge
To view or add a comment, sign in
-
Follow-up to yesterday’s JavaScript `this` question 👇 Yesterday’s output was: 10 2 undefined undefined The issue was: • lost `this` context • accidental global variable usage So what if we want **ALL calls to always print 10**? Here’s a clean and correct solution 👇 Output: 10 10 10 10 🧠Why this works • We always access a through this.a • No accidental mutation of global variables • bind(obj) permanently fixes the context • call(obj) explicitly sets the correct context No matter how the function is invoked, this always points to obj. 🔑 Key Takeaway If a function depends on `this`, make the binding explicit. #JavaScript #ThisKeyword #CallBindApply #InterviewQuestions #FrontendDeveloper #MERNStack
To view or add a comment, sign in
-
-
⚡ JavaScript Event Loop — The Concept That Makes JS Feel “Fast.” Ever wondered how JavaScript handles multiple tasks even though it’s single-threaded? Here are the key things to understand: 🧩 Call Stack Runs your code line by line (one task at a time). 🌐 Web APIs (Browser) Handles slow tasks like setTimeout, fetch, DOM events, etc. 📥 Callback Queue (Task Queue) Stores callbacks waiting to run after the stack is empty. ⚡ Job Queue (Microtask Queue) Promises go here — and it runs before the callback queue ✅ 🔁 Event Loop Continuously checks if the call stack is empty, then pushes queued tasks back to execution. Understanding this helps you: ✅ predict async output order ✅ fix “why is this logging first?” confusion ✅ write better Promise/async-await code ✅ understand sequence vs parallel vs race I wrote a beginner-friendly breakdown with examples. Link in the comments 👇 #JavaScript #WebDevelopment #Frontend #Programming #LearnJavaScript #SoftwareEngineering #Async #EventLoop
To view or add a comment, sign in
-
-
🚨 “Why did my JavaScript object suddenly break?” I remember thinking: “Object keys are just variable names… easy.” That single assumption cost me hours of debugging 😵💫 Most beginners don’t realize this early: 👉 JavaScript does not treat object keys the way we visually see them. Internally, every object key is stored as a string 🧠 So when a key contains: • spaces • special characters JavaScript needs it to be written explicitly as a string. If you skip this rule, the code: • throws errors • behaves unexpectedly • makes objects feel “random” They’re not random. Your mental model is incomplete. 📌 One tiny syntax rule = hours of confusion saved #JavaScript #LearningInPublic #WebDevelopment #FrontendDevelopment #Debugging
To view or add a comment, sign in
-
-
📌 JavaScript concat() Method – Explained Simply The concat() method in JavaScript is used to merge two or more arrays or strings and return a new combined result — without modifying the original data. 👉 Key Characteristics 🔹 Does not mutate the original array or string 🔹 Returns a new array or string 🔹 Preserves the order of elements 🔹 Can accept multiple arguments 👉 Why use concat()? 🔹 Ideal when you want to combine data safely 🔹 Helps maintain immutability, which is important in React and modern JavaScript 🔹 Makes code cleaner and more readable For arrays, concat() is often preferred over push() when you don’t want to change the original array. 🔁 Immutability leads to predictable and bug-free code. #JavaScript #WebDevelopment #Frontend #JSMethods #CleanCode #Learning
To view or add a comment, sign in
-
-
🚀 Day 885 of #900DaysOfCode ✨ 5 Important Object Methods in JavaScript Objects are at the core of JavaScript — and knowing how to work with them efficiently can make your code cleaner, more readable, and easier to maintain. In today’s post, I’ve covered 5 essential JavaScript object methods that every developer should be familiar with. These methods help you handle data more effectively and simplify common object-related operations in real-world applications. If you want to strengthen your JavaScript fundamentals and write more confident code, this post is for you. 👇 Which object method do you use most often? Let me know in the comments! #Day885 #learningoftheday #900daysofcodingchallenge #FrontendDevelopment #WebDevelopment #JavaScript #React #CodingCommunity #Objects
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