Dynamic Image Resizer with JavaScript

🚀 Mini JavaScript Project: Live Search Filter I built a small JavaScript project that displays user cards with name, image, and role, along with a real-time search feature. As the user types in the input field, the list dynamically filters matching profiles using JavaScript array methods and DOM manipulation—without reloading the page. 🔧 Tech Used: HTML • CSS • JavaScript (DOM, filter, events) This project helped me strengthen my understanding of dynamic UI rendering and real-world search functionality. 🔗: https://lnkd.in/daSiKzRx Always open to feedback and learning! #JavaScript #WebDevelopment #Frontend #MiniProject #Learning

Built an interactive image movement feature using HTML, CSS, and JavaScript, where users can dynamically shift an image left or right with button controls — demonstrating creative DOM manipulation and responsive UI behavior. #WebDevelopment #FrontendDevelopment #JavaScript #HTMLCSS #UIUXDesign #InteractiveDesign #CodingLife #Innovation #TechProjects #LinkedInTechCommunity

🚀 10 Days HTML, CSS & JavaScript Journey – Day 2 Day 2 was all about CSS & JavaScript interactions. Today, I created a Button Ripple Effect, focusing on: Button styling Click interaction Simple JavaScript logic Small UI effects like this really improve user experience. Learning step by step and enjoying the process 💪 #Day2 #WebDevelopment #HTML #CSS #JavaScript #UIEffects #LearningJourney

🚀Hello Everyone:- Day 12 – 15 Days of JavaScript Challenge: 🔹Task 2: JavaScript User Card Filter Project Built a dynamic user card interface using vanilla JavaScript that displays user profiles with images and bios. ✨ Key Features Dynamically creates user cards using DOM manipulation Displays profile image, blurred background layer, name, and bio Implements real-time search filtering using the input event Uses array.forEach() to render UI components Uses array.filter() to match users based on search input Clears and re-renders results dynamically without page reload 🧠 Concepts Used JavaScript Objects & Arrays DOM Manipulation (createElement, appendChild) Event Handling (input event) Higher-order array methods (forEach, filter) Dynamic UI rendering 🚀 Outcome Created a clean, responsive, and interactive user listing feature similar to a social profile explorer, improving understanding of real-time filtering and DOM-based rendering. #JavaScript #DOMManipulation #FrontendDevelopment #15DaysOfJavaScript #HTML  #HTMLInterview  #WebDevelopment  #FrontendDeveloper #HTML5  #CodingJourney #HTMLBasics  #DeveloperCommunity #InterviewPreparation  #HTMLQuestions #100DaysOfCode #LearnToCode  #BuildInPublic  #FrontendLearning  #GitHubRepository #15DaysOfJavaScript #JavaScript  #WebDevelopment  #DailyCoding  #DeveloperJourney #15DaysOfJavaScript #JavaScript #WebDevelopment #LocalStorage #DailyCoding #DeveloperJourney

Built a simple movie library using HTML, CSS, and vanilla JavaScript to practice fetching JSON data and rendering dynamic UI cards. Focused on clean structure, Flexbox layout, and readable DOM logic. No frameworks, just fundamentals. Always refining the basics. 💻 Code available on my GitHub: https://lnkd.in/ggsPpka5 #FrontendDevelopment #JavaScript #HTML #CSS #WebDevelopment #LearningInPublic #ContinuousLearning

Day 128 of #130DaysOfCode 🎬💻 Built a Movie Reviews application using HTML, CSS, and JavaScript. What I implemented today: Created a form-based UI with input and textarea for user data Captured user input using DOM access (value) Added basic validation to prevent empty movie titles Dynamically rendered: Movie title Movie review Separator (<hr>) for clarity Reset input fields after successful submission Key concepts reinforced: DOM manipulation with createElement() and appendChild() Handling button click events with functions Structuring user-generated content dynamically Why validation matters before updating the UI Why this matters: This pattern is used in comment systems, review sections, feedback forms Strong fundamentals > fancy libraries Next improvements (no excuses): Add delete/edit review Store reviews in localStorage #JavaScript #DOMManipulation #FrontendDevelopment #WebDevelopment #130DaysOfCode #BuildInPublic #NxtWave

🎮 Snake Game Built Using HTML, CSS & JavaScript -I built a classic Snake Game using HTML, CSS, and JavaScript to strengthen my understanding of core web development concepts. Key highlights: Game logic implementation using JavaScript Keyboard-based snake movement Collision detection (walls & self) Dynamic score tracking Responsive and simple UI This project helped me improve my problem-solving skills and deepen my understanding of JavaScript event handling and DOM manipulation. 🔗 GitHub Repository: 👉https://lnkd.in/gVP3xAeJ 📌 More projects coming soon—open to feedback and suggestions! #JavaScript #WebDevelopment #Frontend #HTML #CSS #LearningByDoing #Projects

Recently Built a Captcha Generator using HTML, CSS, and JavaScript check it out here:👉https://lnkd.in/g2eC-pyD It may look simple, but it covers: Random string generation User input validation Real-time feedback with UI effects DOM manipulation & Event handling Small projects like this really expose logic gaps and improve problem-solving. Thanks. #JavaScript #FrontendDevelopment #WebDev #PracticeProjects

Developed a Multiple Theme Switcher using HTML, CSS, and JavaScript, where different UI themes are applied dynamically through DOM manipulation. Each button click updates the background color and text content without reloading the page. In this project, I practiced: Selecting HTML elements using DOM methods Handling user interactions with event listeners Dynamically updating styles using JavaScript Applying multiple themes through a single reusable function This project helped me clearly understand how JavaScript interacts with HTML elements using the DOM. #JavaScript #DOM #DOMManipulation #FrontendDevelopment #WebDevelopment #HTML #CSS #JavaScriptProjects #MiniProject #ThemeSwitcher #UIDevelopment #LearningByDoing #InternLife #RemoteIntern #CodingJourney

🚀React Js Hooks *useEffect vs useLayoutEffect: What's the difference? 🤔* ✅useEffect - Runs *after* render, when the browser has finished painting the screen. - Best for most cases, like fetching data, setting timers, or updating local storage. - Runs asynchronously, so it won't block the UI. ✅useLayoutEffect - Runs *synchronously* after all DOM mutations, before the browser paints the screen. - Best for cases where you need to measure or manipulate the DOM, like getting the height of an element. - Can block the UI, so use sparingly! *When to use each? 🤔* - Use useEffect for most side effects, like: - Fetching data from an API - Setting timers or intervals - Updating local storage - Use useLayoutEffect for DOM-related tasks, like: - Measuring the size of an element - Manipulating the DOM (e.g., adding or removing classes) - Animating elements #React #ReactHooks #useEffect #useLayoutEffect #WebDevelopment #JavaScript #learn