Sticky Notes Web App Built with HTML, CSS & JavaScript

#Hello #Connections 👋 #100DaysOfCodeChallenge | #Day38 🚀 Project: Notes App 📌 What I built Today I built a simple and interactive Notes App where users can create and manage notes directly in the browser. Users can add a note with a heading and details, view it instantly in the notes section, and delete notes when they are no longer needed. 🛠 Technologies Used HTML5 CSS3 Tailwind CSS JavaScript (DOM Manipulation & Event Handling) ⚠ Challenge I faced Dynamically creating note cards and updating the UI whenever a note is added or deleted. ✅ How I solved it Used JavaScript arrays to store notes and a render function to dynamically generate note cards in the DOM whenever the notes list changes. 💬 Open to feedback and suggestions 🚀 🔗 Project link in comments 👇 🙏 Code Of School Avinash Gour | Ritendra Gour #FrontendDeveloper #JavaScript #HTML5 #CSS3 #TailwindCSS #WebDevelopment #100DaysOfCode #DeveloperJourney

Just shipped my Day 17/30 JavaScript challenge: a fully functional To-Do List app! Built with vanilla JS, this project showcases DOM manipulation, event listeners, and dynamic element creation in action. Features include adding tasks, marking them complete with a strikethrough effect, deleting individual items, and clearing everything at once. The sleek UI is fully responsive and built with pure HTML, CSS, and JavaScript. no frameworks, just core fundamentals. Tech topics covered: querySelector, innerHTML, createElement, addEventListener, and event delegation. From image uploaders to task managers, each project peels back another layer of web development. Check it out live: https://lnkd.in/d34HUqPn #FullStackDeveloper #JavaScript #WebDevelopment #CodeGuru #FrontendDevelopment

🚀 Excited to share my first JavaScript Calculator project! I built this web app using HTML, CSS, and JavaScript, where you can perform basic arithmetic operations with real-time results. What started as a small learning experiment turned into a hands-on experience with: 💡 DOM manipulation 💡 Handling button clicks 💡 Building calculation logic It’s amazing how much you can learn by building something from scratch! 🎉 🎥 Check out the demo showing both the code and working app. #javascript #webdevelopment #frontend #learningbydoing #codingjourney

Built a simple Counter App using HTML, CSS, and JavaScript. Increase ➕ Decrease ➖ Reset 🔄 — works similar to cart quantity updates. This project helped me understand DOM manipulation and dynamic value updates. GitHub Repository : https://lnkd.in/gZzUcGWT Live Demo : https://lnkd.in/gYbGruAM #JavaScript #Frontend #Learning

🧠 Just built a Trivia Question Fetcher App using HTML, CSS & JavaScript! A fun little project that fetches a brand new trivia question from an API every 5 seconds — automatically! 🎯 Here's what the app does: ✅ Fetches random trivia questions from a live API ✅ Auto-refreshes every 5 seconds with a new question ✅ Stop button to halt the question rotation ✅ Button changes color when stopped — visual feedback matters! ✅ Prevents any further API calls once stopped The biggest learning from this project? 👉 How setInterval() and clearInterval() work in JavaScript 👉 Why a simple isStopped flag can save you from unwanted API calls 👉 How to handle async fetch() responses even after a stop event #JavaScript #WebDevelopment #HTML #CSS #VanillaJS #API #100DaysOfCode #Frontend #BuildInPublic

Day 18 — Pos-tI-tUP 📸 A React-based photo posting app where users can upload, edit, and delete posts with images and captions. Tech Stack: • React • Tailwind CSS • react-hook-form Key Concepts Applied: • Lifting state up across components • useRef for programmatic file input • Component composition (Navbar, UploadForm, PostCard) • CRUD operations via state Small project, big learnings. Consistency is the key. 💪 GitHub: https://lnkd.in/gpVakZ8C Live Link: https://lnkd.in/g-edej_E #React #Frontend #WebDev #100DaysOfCode #Day18 #JavaScript

🚀 Excited to share my latest project: QR Code Generator built using React and Vite! This simple web application allows users to generate a QR code from any URL and download it instantly. 🔹 Key Features: • Generate QR codes from any URL • Input validation with error handling • Instant QR preview • Download QR code as PNG • Responsive UI design 🛠 Tech Stack: React | JavaScript | Vite | CSS | QRCode npm package Working on this project helped me strengthen my understanding of React state management, conditional rendering, and UI design. 🔗Link : https://lnkd.in/g6EUzh2F 🔗 GitHub Repository: https://lnkd.in/gmV7AiWi I’m continuously learning and building projects to improve my frontend development skills. #React #JavaScript #FrontendDevelopment #WebDevelopment #LearningInPublic #ReactJS

🚀 To-Do List App using plain JavaScript! I wanted to challenge myself to create a simple yet functional task management app without using any frameworks. Here's what it does: ✨ Key Features of My To-Do List App 📝 Quick Task Creation Add tasks instantly with a simple and intuitive input field + button. No distractions—just focus. ✅ Mark Tasks as Complete Easily track progress by marking tasks as done. Completed tasks are visually updated with a clean strikethrough effect. 📌 Clear Task Status Separate visual states for pending and completed tasks help you stay organized at a glance. ❌ Delete Tasks Anytime Remove tasks effortlessly with a single click—keeping your list clean and relevant. ⚡ Real-Time Interaction All actions update instantly using JavaScript DOM manipulation—no page reload needed. 🎯 Minimal & User-Friendly Design A clean, distraction-free UI focused on productivity and ease of use. 💡 Why I built this: Sometimes, going back to basics helps strengthen the fundamentals. This project improved my vanilla JS skills and gave me a deeper understanding of how dynamic web apps work under the hood. Check it out on GitHub: https://lnkd.in/gSnBEDdi

Today I learned about the useRef hook and how it helps us access DOM elements and persist values without re-rendering. 🔹 What is useRef? useRef is a React Hook that returns a mutable object with a .current property. It is mainly used for: • Accessing DOM elements • Storing values without causing re-render • Keeping previous values 🔹 Accessing DOM Elements We can directly access an element using useRef. import { useRef } from "react"; function App(){ const inputRef = useRef(); const focusInput = () => { inputRef.current.focus(); }; return ( <> <input ref={inputRef} /> <button onClick={focusInput}>Focus</button> </> ); } Here React gives direct access to the input element. 🔹 Storing Values Without Re-render Unlike state, updating useRef does NOT re-render the component. const countRef = useRef(0); countRef.current++; This is useful when we want to store values without updating UI. 🔹 useRef vs useState • useState → causes re-render • useRef → does NOT cause re-render 💡 Key Takeaway useRef is useful when: ✔ You need direct access to DOM ✔ You want to store values without re-render ✔ You want better performance in some cases 📌 Day 16 of my 21 Days JavaScript / React Learning Challenge #ReactJS #JavaScript #ReactHooks #FrontendDevelopment #LearningInPublic

Multi-page navigation in React is something most tutorials skip right over. So I built a project specifically around it. 16-web-editorial-layouts is a TypeScript + React application demonstrating production-ready multi-page navigation patterns — the kind of editorial layout structure you see in content-heavy platforms, but rarely in tutorial projects. Key technical choices: • TypeScript throughout for type-safe routing and component props • React client-side routing for navigation without full page reloads • Editorial layout patterns: hierarchical content, nested routes, persistent navigation • Clean separation between layout components and page content The insight: most React tutorials show you how to build a component. Very few show you how to structure a multi-page app so navigation feels native, state persists correctly, and layouts compose cleanly. This project fills that gap. What navigation pattern do you find most underrepresented in React tutorials? #TypeScript #React #WebDevelopment #Frontend #JavaScript