Musaeeb Zahir’s Post

Today's JavaScript Practice Tasks As part of my Frontend Developer learning journey, I practiced the following JavaScript tasks today: 1. Created a Promise function getUserData() that resolves after 2 seconds and handles errors using catch(). 2. Wrote a function to divide two numbers and reject if the denominator is 0. 3. Implemented reverseWords(sentence) to reverse each word in a string using split(), map(), and join(). 4. Created removeDuplicates (arr) to return a new array without duplicate values using filter(). 5. Built sumEvenNumbers(arr) to filter even numbers and calculate their sum. Learning JavaScript step by step and improving my problem-solving skills every day. #JavaScript #Frontend Developer #WebDevelopment #Learning Journey #CodingPractice

Blog Post App (JavaScript Practice Project) Day 9 of my JavaScript learning journey. Built a simple blog post app using HTML, CSS, and Vanilla JavaScript where users can create blog posts with a title, description, and image. Posts are displayed dynamically on the page without using any backend. This project helped me practice real-world DOM manipulation and event handling concepts. ✨ What I learned: Working with querySelector & NodeList Handling events with addEventListener Dynamic UI updates Showing/hiding sections Basic state management in JavaScript 🛠 Tech Stack: HTML CSS JavaScript 🎯 Goal: To improve my JavaScript logic and understand how dynamic content works in real projects. project link: https://lnkd.in/gajJ-s56; github:https://lnkd.in/g8RF2Bbd; #100DaysOfCode #JavaScript #FrontendDevelopment #WebDevelopment #LearningInPublic #MiniProject #DOMManipulation #BuildInPublic #sheriyanscodingschool

Today I explored two powerful JavaScript concepts: Higher Order Functions (HOF) and Closures. 🔹 Higher Order Functions (HOF) A function that takes another function as an argument or returns a function. Example: function greet(name){ return "Hello " + name; } function processUser(fn){ console.log(fn("Praful")); } processUser(greet); Functions like map(), filter(), reduce() are common examples of HOF. 🔹 Closures A closure happens when a function remembers variables from its outer scope even after the outer function has finished executing. Example: function counter(){ let count = 0; return function(){ count++; console.log(count); } } const inc = counter(); inc(); // 1 inc(); // 2 The inner function still remembers the variable count because of closures. Understanding these concepts helps write clean, modular, and powerful JavaScript code. Thanks to Sheryians Coding School for explaining these concepts so clearly 🚀 Day 7 of my 21 Days JavaScript Concept Challenge ✅ #JavaScript #WebDevelopment #FrontendDeveloper #LearningInPublic #CodingJourney #SheryiansCodingSchool

Have you ever wondered why, in a world full of diverse programming languages, one name always rises to the top when it comes to web development? 🤔🌐 • Why is JavaScript always used? 🟨 The simple answer: a historical monopoly. Browsers only speak JavaScript. Back in the 1990s, when the first browsers were being built, developers needed a way to make web pages interactive ✨ So, JavaScript was born… and every major browser followed suit. Today, browsers like Chrome, Safari, and Firefox all come with built-in JavaScript engines ⚙️ That means if you want to run code in a browser… JavaScript is the native language. • Can we use something else? 🤓💡 Yes. You’re not completely locked in anymore. There are two powerful escape routes: 1️⃣ Transpiling (Write anything → Convert to JS) 🔄 You can write code in other languages and translate it into JavaScript before it reaches the browser. 🔹 TypeScript – JavaScript with superpowers (and fewer bugs) 🔹 Dart – Used with Flutter for web apps 🔹 PyScript / Brython – Run Python in the browser 🐍 2️⃣ WebAssembly (Wasm) 🚀 This is where things get futuristic. WebAssembly lets you run languages like: 💻 C++ 🦀 Rust ⚡ Go 🔷 C# …directly in the browser at near-native speed. 👉 Example: Microsoft’s Blazor lets you build web apps using C# instead of JavaScript. • So why does JavaScript still dominate? 👑 Even with all these alternatives… JavaScript still rules the web. 🔹 Massive Ecosystem 🌍 NPM is the largest library of code on the planet. Need a feature? Someone already built it. 🔹 Direct DOM Access ⚡ JavaScript can instantly update the webpage (DOM). Other technologies often need to “go through” JS, which adds friction. 🔹 Industry Momentum 🏢 25+ years of dominance means: 👨💻 Millions of developers 🏗️ Thousands of companies built on JS Switching away is like turning a cargo ship, not a speedboat. 💭 Final Thought JavaScript isn’t just a language anymore… It’s the operating system of the web 🌐⚡ If you found this helpful, let’s connect 🤝 #WebDevelopment #SoftwareEngineering #Programming #JavaScript #Frontend #Backend #TechCommunity

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

Today I explored what happens behind the scenes in a React project when we create it using Vite. Here’s what I understood 👇 ⚡ 1. Vite Vite is a modern build tool that makes React development faster. Why developers prefer it: • Faster development server • Instant Hot Module Replacement (HMR) • Lightweight configuration • Much faster than Create React App 🧠 2. JSX React allows us to write HTML inside JavaScript using JSX. Example: function App(){ return <h1>Hello React</h1> } But browsers cannot understand JSX directly. 🔧 3. Babel This is where Babel comes in. Babel converts JSX into normal JavaScript. Example: JSX <h1>Hello React</h1> Converted into React.createElement("h1", null, "Hello React") So behind the scenes, React is actually running JavaScript functions. 🧩 4. React Components React applications are built using components (reusable UI blocks). Example: function Header(){ return <h1>Welcome</h1> } Using the component: function App(){ return <Header/> } This makes React apps modular and reusable. 📂 5. React Folder Structure (Vite) Understanding the folder structure makes development easier. • node_modules → stores installed dependencies • public → static files like images or icons • src → main application code • assets → images and resources • App.jsx → main root component • main.jsx → entry point connecting React to DOM • index.html → root HTML file • package.json → manages dependencies and scripts • vite.config.js → Vite configuration 💡 Key takeaway React works by combining: • Vite (build tool) • Babel (JSX compiler) • Components (reusable UI blocks) Understanding these fundamentals makes React much easier to work with. Big thanks to Devendra Dhote and Sheryians Coding School for explaining these concepts clearly 🙌 📌 Day 10 of my 21 Days JavaScript / React Challenge #ReactJS #JavaScript #FrontendDevelopment #Vite #LearningInPublic #SheryiansCodingSchool

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

Day 7 of building in public. Starting my 21 Day Frontend Development Challenge 🚀 Today I built a project called Sequential User Fetcher using HTML CSS and Vanilla JavaScript. The goal of this project was to deeply understand how asynchronous JavaScript works when interacting with external APIs. Instead of fetching multiple users at once I implemented sequential API requests using async and await. This means each request waits for the previous one to complete before the next one starts. While working on this project I focused on understanding the flow of data from the API to the user interface. When the Load Users button is clicked the application: •Shows a loading indicator •Fetches random users from the Random User API one by one •Processes the JSON response •Dynamically creates user cards using DOM manipulation •Displays profile image name and email for each user This helped me understand how real applications handle asynchronous operations and dynamically update the UI. Key things I practiced in this project:- •Async and Await in JavaScript •Fetch API for working with external data •DOM manipulation for dynamic UI updates • Sequential API requests •Building responsive UI layouts using CSS Small projects like this are helping me move from just writing code to actually understanding how modern web applications work. Learning in public and building every single day. Excited for Day 8. If you are also learning JavaScript or building projects feel free to connect. Day 7 complete 14 more days of learning and building ahead. If you are also learning JavaScript or building projects I would love to connect and learn together. #webdevelopment #javascript #frontenddevelopment #100DaysOfCode #buildinpublic #programming #coding #softwaredeveloper #devcommunity #webdev #javascriptdeveloper #learninpublic #sheryains #sheryainscodingschool Harsh Vandana Sharma , Sheryians Coding School , Satwik Raj, Sheryians Coding School Community. Live link :- https://lnkd.in/gV4pmc25 GitHub repo:-https://lnkd.in/gQQ2iU9k My GitHub profile :-https://lnkd.in/eG98UbAa

Small project, but a big step forward in improving my frontend development skills! I have created a Palindrome checker project based on javascript. My github project link: https://lnkd.in/dzU4_6Es You can access this project code. Good for beginners developers I’m continuously learning and building — more projects coming soon. #JavaScript #WebDevelopment #FrontendDeveloper #Coding #Projects