Faizan Khan’s Post

Hello everyone 👋 Welcome to Day 24 of my JavaScript learning journey 🚀 Today I built a fun yet logic-driven mini project a Spam Generator using HTML, CSS, and JavaScript. This project mainly helped me strengthen my understanding of loops, input handling, and DOM updates. 🧪 Project: Spam Generator How the app works: ✔ User enters a message ✔ User enters how many times it should repeat ✔ On clicking Generate, JavaScript repeats the message ✔ Output is displayed inside a textarea ✔ Everything happens instantly without page reload Simple idea, but very effective for practicing logic. 🔧 Concepts I Applied Through this project, I practiced: 🔹 Selecting elements using getElementById() and querySelector() 🔹 Handling button click events 🔹 Reading and converting input values 🔹 Using `for` loop for repetition logic 🔹 Dynamically updating textarea value 🔹 String concatenation and counters This project clearly showed how loops + DOM = powerful combinations. 🧠 What I Learned • How loops control repetitive tasks in real projects • How user input drives application behavior • How JavaScript dynamically updates UI elements • How even simple logic can create useful tools It also reinforced why practice matters more than theory. 🎯 Day 24 Takeaway Small projects like this sharpen problem-solving skills. The more I build, the more natural JavaScript feels 💻✨ Next ideas: 👉 Random text generator 👉 Auto message formatter 👉 Copy-to-clipboard feature Onward to Day 25 🚀 #javascript #webdevelopment #frontenddevelopment #learninginpublic #codingjourney #developers #100daysofcode #dom #projects #selflearning

Hello everyone 👋 Welcome to Day 22 of my JavaScript learning journey 🚀 Today I built a Password Strength Checker using HTML, CSS, and JavaScript a small project, but a very practical one used in real-world applications. This project helped me understand how JavaScript validates user input and gives instant feedback. 🔐 Project: Password Strength Checker The app works like this: ✔ User enters a password ✔ JavaScript checks the password length ✔ Strength is displayed instantly as:  • Weak  • Medium  • Strong ✔ Text color changes based on strength ✔ No page reload (handled via JavaScript) Simple UI, clear logic, real use case. 🔧 Concepts I Applied In this project, I practiced: 🔹 Form handling using submit event 🔹 preventDefault() to stop page reload 🔹 Reading input values dynamically 🔹 Conditional logic (if / else if) 🔹 DOM manipulation using textContent 🔹 Dynamic styling using style.color 🔹 Basic validation logic This helped reinforce how JavaScript controls form behavior and validation. 🧠 What I Learned • How password validation works at a basic level • How real-time feedback improves user experience • How to combine logic + DOM updates cleanly • How small checks can turn into useful features This project made form-based JavaScript feel much more comfortable. 🎯 Day 22 Takeaway Not every project needs to be big practical projects build real confidence 💻✨ From games to utilities to validation tools, JavaScript is slowly becoming second nature. Onward to Day 23 🚀 #javascript #webdevelopment #frontenddevelopment #learninginpublic #codingjourney #developers #100daysofcode #dom #projects #selflearning

JavaScript Mini Project | Dynamic Quote Generator Learning becomes powerful when we apply concepts to real projects. Today I built a Dynamic Quote Generator using HTML, CSS, and JavaScript, where I implemented the concepts I learned in my previous JavaScript lectures. This project randomly displays motivational quotes on the webpage, making the page dynamic and interactive using JavaScript. Here are the concepts I used while building this project: ● Using arrays in JavaScript to store multiple quotes ● Generating random numbers using Math.random() ● Accessing elements using document.getElementById() ● Updating content dynamically using textContent / innerHTML ● Using functions to organize JavaScript logic ● Implementing setInterval() to change quotes automatically ● Applying DOM manipulation to update webpage content in real time Projects like this help me better understand how JavaScript controls webpage behavior and creates interactive user experiences. Step by step, I am improving my JavaScript and Frontend Development skills by building small practical projects. #JavaScript #WebDevelopment #FrontendDevelopment #DOM #DOMManipulation #CodingJourney #Programming #LearnJavaScript #DeveloperJourney #CodingLife #SoftwareDevelopment #BuildInPublic #TechLearning

Small JavaScript Project | Add Two Numbers Turning learning into practice! Today I built a simple “Add Two Numbers” project using HTML, CSS, and JavaScript, where I applied the concepts I learned in my previous lectures. Even a small project like this helps strengthen the core understanding of DOM manipulation and JavaScript logic, which are essential for frontend development. Here are the concepts I applied while building this project: ● Accessing HTML elements using document.getElementById() ● Handling user input from input fields ● Performing basic arithmetic operations using JavaScript ● Using event handling to trigger actions on button click ● Dynamically displaying the result on the webpage ● Applying DOM manipulation to update content in real time ● Understanding how JavaScript makes webpages interactive Building small projects like this helps transform theoretical knowledge into practical skills and improves problem-solving ability. Excited to keep learning and building more JavaScript projects as I continue my web development journey. #JavaScript #WebDevelopment #FrontendDevelopment #DOM #DOMManipulation #CodingJourney #Programming #LearnJavaScript #DeveloperJourney #CodingLife #SoftwareDevelopment #BuildInPublic #TechLearning

🚀 JavaScript Learning Update – Day 22 Today, I learned how to modify text and content inside HTML elements using JavaScript. I explored: • textContent – to get or set all the text inside an element   • innerText – to access only the visible text on the page   • innerHTML – to read or update HTML content inside an element  Understanding the difference between these methods helped me see how JavaScript can dynamically update web page content. This is an important step toward building interactive web applications where the UI changes based on user actions. Learning step by step and strengthening my DOM fundamentals. #JavaScript #DOM #WebDevelopment #FrontendDeveloper #LearningInPublic #CodingJourney

🚀 Just launched a small project to demonstrate JavaScript library usage and practical examples for developers. While learning or working with JavaScript libraries, one common challenge is finding clear and simple usage examples. Many developers spend time searching documentation just to understand how to integrate a library. So I built a simple demo site that shows how to use JavaScript libraries with real examples. 👉 Explore the project: https://lnkd.in/gg_fU8EB What this project focuses on • Practical examples of using JavaScript libraries • Simple and easy-to-understand implementation • Developer-friendly structure for experimentation • A quick reference for integrating libraries into web projects JavaScript libraries play a huge role in modern web development by helping developers build features faster and reuse tested functionality rather than writing everything from scratch. (arXiv) This project is part of my effort to build useful developer tools and learning resources while exploring new ideas around automation, testing, and developer productivity. If you're a developer, student, or someone exploring JavaScript libraries, I’d love your feedback. Let me know what libraries or examples you would like to see added next. #JavaScript #WebDevelopment #DeveloperTools #Frontend #Programming #Coding #OpenSource #LearningInPublic #BuildInPublic

Let's Start the JS Journey .. JavaScript Series – Introduction From Structure ➝ Style ➝ Now Behavior In our journey so far: HTML gave us structure CSS gave us design Now JavaScript gives life If HTML builds the house and CSS decorates it… 👉 JavaScript turns on the lights, opens the doors, and makes everything interactive. Welcome to the JavaScript Series 💛 🖇️ What This Series Will Be About This series will be beginner-friendly, simple, and practical. We’ll cover JavaScript step by step: 📌 What JavaScript actually is 📌 How it works in browsers 📌 Variables and data types 📌 Functions 📌 Conditions and loops 📌 DOM manipulation 📌 Events 📌 Arrays and objects 📌 Basic ES6 concepts 📌 how JS works with modern frameworks No heavy theory. No confusing explanations. Just simple concepts + real examples. 🖇️ Why Learn JavaScript? Because today: * Every interactive website uses it * All modern frontend frameworks are built on it * React, Vue, Angular → all powered by JS * Even backend (Node.js) uses JavaScript If you want to become a strong frontend developer JavaScript is not optional. It’s essential. 🖇️ What Makes JavaScript Special? Unlike HTML and CSS: * HTML is structure * CSS is styling * JavaScript is logic It can: * Detect clicks * Validate forms * Change content dynamically * Fetch data from servers * Create animations * Build full applications It makes websites feel alive. 🖇️ How This Series Will Be Structured Just like our HTML and CSS series: * Simple language * Real-life examples * Small practical code snippets * Step-by-step progression * Beginner-friendly explanations We’ll build confidence slowly. No rushing. 🖇️ Who This Series Is For * Beginners starting frontend * Students learning web development * Developers moving from HTML/CSS to JS * Anyone who wants to truly understand how the web works If you understood our HTML and CSS series. You’re ready for JavaScript. 💡 Final Thoughts JavaScript may look scary at first. But once you understand the logic behind it, it becomes one of the most powerful tools you’ll ever learn. We’re not just learning a language. We’re learning how to make the web think ✨ #JS_Series #FrontendLearning

Day 8/30 – Full Stack Development Journey Today I continued my JavaScript learning journey and explored two important concepts: Objects and the DOM (Document Object Model). I learned how objects help store and organize data using key–value pairs, making it easier to manage complex information in JavaScript applications. Understanding objects is very useful for representing real-world data and building scalable applications. I also learned about the DOM and how JavaScript interacts with HTML elements in a web page. By using DOM methods, we can select elements, modify content, change styles, and create dynamic and interactive web pages. Key learnings from today: • Understanding JavaScript objects and how to store data using key–value pairs • Accessing and modifying object properties • Introduction to the DOM (Document Object Model) • Selecting and manipulating HTML elements using JavaScript These concepts are helping me understand how JavaScript connects with HTML and CSS to build interactive websites. Excited to keep learning and building more projects as part of my full stack development journey. #Day8 #FullStackDevelopment #JavaScript #WebDevelopment #CodingJourney #LearningInPublic #100DaysOfCode

Day 10/21: Illuminating the Web with Vanilla JavaScript! 🔦 Halfway through my 21-day coding challenge, and today I decided to dive deep into DOM manipulation and Event Listeners to create a dynamic Spotlight Effect. The goal was simple but the logic is powerful: creating an interactive overlay that follows the user's cursor, revealing the content beneath—much like a flashlight in a dark room. 🛠️ How it works: The Layer: Used a fixed div with a radial-gradient background to create the "darkness" and the "hole" of light. The Interaction: Leveraged the mousemove event to capture the real-time coordinates (clientX, clientY) of the cursor. The Magic: Dynamically updated the CSS background property using JavaScript template literals to move the center of the radial gradient to the cursor's exact position. 💡 Key Takeaways: Event Handling: Understanding how addEventListener drives high-performance UI updates. CSS-in-JS: Learning to manipulate complex CSS properties (like gradients) on the fly. User Experience: Seeing how interactive elements can make a landing page feel more premium. 🌐 Live Demo: https://lnkd.in/g9BnnDBG 🔗 Check out the source code here: https://lnkd.in/gd7eyfEm Building this from scratch reinforced my understanding of how JavaScript interacts with the browser's coordinate system. It’s not just about writing code; it's about creating an experience. Check out the video below to see it in action! 👇 Sarthak Sharma Ritik Rajput Devendra Dhote #JavaScript #WebDevelopment #Frontend #CodingChallenge #21DaysOfLinkedIn #MERNStack #CodingJourney #SoftwareEngineering

A few days ago while I was working on some small JavaScript projects, someone saw my screen and said something like: "Why are you building these tiny things? You should be building something bigger." I didn’t really argue or explain much in that moment. But the truth is simple: these "small" projects are intentional. It’s not as if I don’t know how to build bigger things, fetch APIs, or write more complex JavaScript applications. These small projects are deliberate — they’re about focusing on fundamentals, testing my understanding, and making sure my foundation is solid. This choice is intentional, not a limitation. Right now, I’m revisiting JavaScript fundamentals to see whether my understanding is still solid and to further strengthen the foundation in my brain. Building these mini projects gives me the chance to refresh key concepts like logic, loops, and conditions, while watching them come together to create something tangible and meaningful. Every solid structure starts with a strong base, and for me, that’s what these projects are about. Still learning. Still building. One step at a time. #JavaScript #LearningInPublic #WebDevelopment #BuildInPublic