Polling in React: New Learning Experience

🚀 #Day48 of #100DaysOfCoding Today, I created a Dark Mode Toggle with Random Background Color Feature using HTML, CSS, and JavaScript. In this mini project, I implemented a button that switches the page into dark mode and also generates a random background color each time it is clicked. This helped me practice working with JavaScript DOM manipulation, class toggling, styling elements dynamically, and random color generation logic. ✨ Key learnings from today’s project: • Implementing Dark Mode using classList.toggle() • Generating random colors using JavaScript logic • Changing background color dynamically • Styling elements using JavaScript • Improving UI interaction with button effects • Strengthening DOM manipulation concepts Projects like these are helping me become more confident in JavaScript fundamentals and frontend interaction designstep by step. Grateful for the continuous guidance and support from Ritendra Gour Sir and Avinash Gour Sir at Code Of School Institute 🙏 Excited to keep learning and building more creative features ahead! 💻🔥 #Day48 #100DaysOfCoding #JavaScript #FrontendDevelopment #HTML #CSS #DarkMode #WebDevelopment #LearningJourney #CodeOfSchool

I thought useRef was only for accessing DOM… 😅 But I was wrong. 💡 For a long time, I used useRef like this: const inputRef = useRef(); 👉 Focus input, access DOM — that’s it. ⚠️ Then I faced a problem: I needed to store a value 👉 without causing re-render Using useState was triggering re-renders ❌ 💡 Then I discovered: useRef can store mutable values 👉 without re-rendering the component 🧠 Example: const countRef = useRef(0); countRef.current++; 👉 Value updates 👉 But component doesn’t re-render ✅ Result: • Better performance • No unnecessary re-renders • More control over values 🔥 What I learned: useRef is not just for DOM 👉 it’s for persisting values across renders #ReactJS #FrontendDeveloper #JavaScript #ReactInterview #CodingTips #WebDevelopment

I used Debounce when I should have used Throttle… 😅 And it broke my feature. 💡 I was working on scroll tracking 👉 I wanted to track user scroll position in real-time So I used Debounce. ⚠️ Problem: Debounce waits until user stops scrolling 👉 So I was getting delayed updates ❌ 💡 Then I switched to Throttle 🧠 Difference: 👉 Debounce Waits → runs after user stops action 👉 Throttle Runs → at fixed intervals while action continues 📌 Example: Typing → use Debounce ✅ Scrolling → use Throttle ✅ ✅ Result: • Smooth scroll tracking • Better performance • Correct behavior 🔥 What I learned: Choosing the wrong optimization can break the user experience. #ReactJS #FrontendDeveloper #JavaScript #CodingTips #WebDevelopment

Your useEffect is firing 6 times. It's probably not what's in the dependency array. I had [options] in mine. One dependency. Looked fine. The effect ran on every single render anyway — hammering my API with duplicate calls I couldn't explain. The problem wasn't the value. It was the reference. options was an object getting recreated fresh on every render, so React saw a "new" dependency every time — even when the actual data hadn't changed. React doesn't deep-compare objects in the dep array. It checks identity. Fix was wrapping options in useMemo. Two lines. Effect ran once. Done. But honestly, the bigger shift was realising I'd been thinking about dependencies wrong. It's not just what is in the array — it's whether the things in the array are actually stable between renders. If your effect fires more than it should, check the stability of your deps, not just the list. What kills you about useEffect? Curious if this one's common. #react #javascript #reacthooks #frontenddevelopment #webdev

#Hello #Connections 👋 #100DaysOfCodeChallenge | #Day59 Project: Live Character Counter What I built Today I built a Live Character Counter that tracks characters, words, and spaces in real-time with a clean and modern UI. Technologies Used HTML5 CSS3 JavaScript (DOM, Events, Clipboard API) Challenge I faced Managing real-time updates efficiently while keeping the UI smooth and responsive. How I solved it Used event listeners and optimized DOM updates, along with animations for better user experience. Features Real-time text tracking Word & character count Progress bar with warning states Copy & clear functionality Live Demo: https://lnkd.in/ddMKS65k Open to feedback and suggestions Code Of School Avinash Gour | Ritendra Gour #FrontendDeveloper #JavaScript #WebDevelopment #100DaysOfCode #DeveloperJourney #Coding #UIUX

Time is simple—until you try to calculate it precisely. I recently built an Age Calculator that computes exact age in years, months, and days from a given date of birth. What looks simple on the surface turned out to be an interesting problem—handling leap years, varying month lengths, and ensuring consistent accuracy across different inputs. ⚙️ Built using JavaScript, HTML, CSS the focus was on: • Precise date handling • Input validation • Consistent results across edge cases 🎯 Beyond functionality, I aimed for clarity—keeping the interface minimal while ensuring a smooth and intuitive user experience. 🔗 Try it here: https://lnkd.in/gpXkKs3c This project reminded me that even small ideas can challenge your thinking—and that attention to detail is what makes simple features truly reliable. #WebDevelopment #JavaScript #FrontendDevelopment #Coding #Projects

🚀 #Day47 of #100DaysOfCoding Today, I built a simple and interactive Even or Odd Number Checker using HTML, CSS, and JavaScript. This mini project helped me strengthen my understanding of user input handling, conditional statements (if–else), modulus operator (%), and DOM manipulation in JavaScript. I also focused on improving the UI design using gradients, spacing, and hover effects to make the project look cleaner and more professional. ✨ Key learnings from today’s project: • Taking user input using HTML input fields • Validating empty input conditions • Using the modulus operator (%) to check even/odd numbers • Applying if–else logic in JavaScript • Updating output dynamically using innerText • Designing a clean and responsive UI with CSS Step by step, these small projects are helping me build a strong foundation in JavaScript logic building and frontend development. Grateful for the continuous guidance and support from Ritendra Gour Sir and Avinash Gour Sir at Code Of School Institute 🙏 Excited to continue this learning journey and build more projects ahead! 💻🔥 #Day47 #100DaysOfCoding #JavaScript #FrontendDevelopment #HTML #CSS #WebDevelopment #LearningJourney #CodeOfSchool

Coding is not for the weak. 🤦♂️ It demands a lot from your brain. Attention, patience, logic, all at the same time. I used to wonder why developers sit in front of their screens for hours, pressing this and that on their keyboards. People calling them "tech bros" and all of that. But as my training at TechCrush progresses, I'm starting to understand. It's not that they're wasting time. They're doing what is called debugging, hunting down one small thing, hiding somewhere in hundreds of lines of code, that's standing between them and the output they want. I had my own simpler version of this experience. I wrote my HTML, linked it to my CSS, gave it instructions, and it refused to respond. VS Code was flagging an error. I kept staring at my screen trying to figure out what was wrong. Then I found it. ❌ <h3>Greatest of all is God </h3 ✅ <h3>Greatest of all is God </h3> One missing closing bracket. That's all it was. 🤦♂️ And that's not even the only way code decides to misbehave. Incomplete strings will do the same thing: ❌ let message = "God is the greatest; ✅ let message = "God is the greatest"; Notice anything? The closing quotation mark that tells JavaScript "this is a string", nowhere to be found. Variable declared, but JavaScript is looking at it like, what is this? and refusing to cooperate. Just chaos. 😂 Two small bugs. Whole output – halted. Humbling. Frustrating. And somehow, still worth it. Next week we're moving into Arrays, Function Arguments and Objects. Let's see what that brings. 👀 Still learning | Still figuring it out What is your own version of bugging and debugging experience, dop it in the comment. #TechCrush #Cohort6 #JavaScript #FrontendDevelopment #NigerianTech #Tech4AfricanScholars #TechJourney

🚀 Day 1 / 21 — Frontend Challenge Today I built: 👉 Digital Clock ⏰ 🧠 Flow I designed before coding: Create basic UI (clock container) using HTML & CSS Use JavaScript Date object to get current time Extract hours, minutes, seconds Update UI every second using setInterval 🛠 Tech Used: HTML | CSS | JavaScript ✨ Features: Real-time digital clock Auto update every second Clean and centered UI 🚧 Challenges Faced: Initially formatting the time properly (adding leading zeros like 09 instead of 9) was tricky, but solved it using conditional logic. Also ensured smooth updates without flickering. 💡 Key Learning: Planning before coding makes development faster & cleaner. Understanding JavaScript timing functions (setInterval) is very important. 🙏 Guidance by: @Keyur Gohil 🏫 Learning at: @Red & White Skill Education Official 📂 GitHub Repo: https://lnkd.in/gTJRfGWb #21DaysJSWithKeyur #RedandWhite #Skill #JavaScript #FrontendDevelopment #BuildInPublic #WebDevelopment

🚀 #Day46 of #100DaysOfCoding Today, I worked on a Mobile Number Validation Mini Project using HTML, CSS, and JavaScript. In this project, I implemented real-time input validation where the user is guided to enter exactly a 10-digit mobile number. If the number is incomplete, a message appears automatically — and it hides once the correct length is entered. This helped me better understand input handling, string conversion, length validation, and DOM manipulation in JavaScript. ✨ Key learnings from today’s practice: • Real-time input validation using JavaScript • Limiting user input length to 10 digits • Showing & hiding messages dynamically • Working with .value, .length, and .slice() • Improving UI interaction using CSS styling These small projects are helping me strengthen my core JavaScript logic-building skills step by step. Grateful for the continuous guidance and support from Ritendra Gour Sir and Avinash Gour Sir at Code Of School Institute 🙏 Excited to continue learning and building more tomorrow! 💻🔥 #Day46 #100DaysOfCoding #JavaScript #FrontendDevelopment #HTML #CSS #WebDevelopment #LearningJourney #CodeOfSchool