🚀 Excited to share my latest project – Weather Card Web App Built using HTML, CSS & JavaScript, this app fetches real-time weather data and displays it in a clean, responsive card UI with dynamic icons. 🔹 Live city search 🔹 Dynamic weather icons 🔹 Responsive premium UI 🔹 Real-time temperature & condition updates 📂 GitHub Repository: 👉 https://lnkd.in/g9_wQB5v Feedback and suggestions are welcome! 🙌 #WebDevelopment #FrontendDeveloper #JavaScript #BCA #StudentDeveloper

🌱 Built an API-based project called Green Earth using JavaScript. It's a small web app designed to promote tree plantation. 🧩 Features • Browse plants dynamically by category • View plant details through a modal • Add plants to a cart • Calculate total planting cost • Clean and responsive UI for all devices 🛠 Tech Used Frontend: HTML5, CSS3, JavaScript (ES6+) Libraries & Tools: TailwindCSS and DaisyUI JavaScript Concepts: • Fetch API • Async/Await • Dynamic DOM Rendering • Basic Cart State Management 📚 What I Practiced • Fetching data from APIs • Rendering dynamic UI with JavaScript • Handling asynchronous requests • Designing responsive layouts with TailwindCSS A few weeks ago, working with APIs felt confusing. Now building dynamic apps with API data feels much more natural. 🔗 Project Links Live Demo: https://lnkd.in/gjGRxb3U GitHub Repository: https://lnkd.in/g7qckacT 💬 What feature would you add to a tree-plantation web app? #javascript #webdevelopment #frontenddevelopment #buildinpublic #learninginpublic

🧮 Built a Calculator using HTML, CSS & JavaScript 🚀 Excited to share another mini project from my frontend development journey — a Calculator Web App! This project demonstrates how basic arithmetic operations can be implemented using JavaScript along with a clean and responsive user interface. 🔹 Tech Stack Used: ✅ HTML5 – Structure of the calculator ✅ CSS3 – Styling and responsive layout ✅ JavaScript – Logic for calculations and user interactions 🔹 Key Features: ✔️ Perform basic arithmetic operations (+, −, ×, ÷) ✔️ Clean and user-friendly interface ✔️ Responsive design for mobile and desktop ✔️ Instant calculation results ✔️ Smooth button interactions Through this project, I strengthened my understanding of: 👉 JavaScript Functions 👉 DOM Manipulation 👉 Event Handling 👉 UI Component Development Building small projects like this helps improve problem-solving skills and strengthens frontend fundamentals step by step. 💡 🔗 Live Demo: https://lnkd.in/ggupsSsJ #WebDevelopment #FrontendDeveloper #JavaScript #HTML #CSS #UIDeveloper #ReactDeveloper #BuildInPublic #LearningByBuilding

Day 3/30 – Event Countdown Timer Continuing my 30 Days – 30 Frontend Projects Challenge, today I built a countdown timer web app using HTML, CSS, and JavaScript. Features: • Real-time countdown (Days, Hours, Minutes, Seconds) • Clean and responsive UI layout • JavaScript logic updating every second • Simple and practical event tracking tool This project helped me practice time calculations, DOM updates, and interactive UI components. 🌐 Live Demo: https://lnkd.in/g2cVCzTF Consistency is key on to Day 4 tomorrow #snsinstitutions #snsdesignthinkers #designthinking #30DaysOfCode #FrontendDeveloper #WebDevelopment #JavaScript #StudentDeveloper

🌱 Excited to share my latest project: Green Earth! 🌱 I built a web app where you can explore, filter, and shop for plants effortlessly. Here’s what I implemented: 🌿 API-powered plant cards – fetch and display all plants beautifully. 🗂️ Categorical filtering – select a category and see only relevant plants. 🖼️ Interactive modal – click any plant to view details, with conditional bottom border. 🛒 Cart system – add plants and see individual prices. 💰 Dynamic total calculation – know the total cost of your cart in real-time. ✨ Responsive & clean UI – designed with Tailwind CSS & DaisyUI. Tech Used: HTML5 • CSS3 • Tailwind CSS • DaisyUI • Vanilla JavaScript This project helped me increase my core knowledge of Vanilla JavaScript and sharpen my skills in DOM manipulation, API handling, conditional rendering, and dynamic UI updates. 🌿 Fun to combine plants and code! Live Link: https://lnkd.in/gcJwu_9r #VanillaJavaScript #FrontendDevelopment #WebDevelopment #TailwindCSS #DaisyUi #API

🚀 Just Built a Recipe Web App with Authentication & Cooking Timer! Excited to share my React project where I built a fully functional Recipe Application with protected routes and a real-time cooking timer ⏳🍳 🔐 Features Implemented: • User Login Authentication • Protected Routes using React Router • API Integration (DummyJSON Recipes API) • Dynamic Recipe Detail Pages • Real-Time Cooking Timer with Alarm Sound • Responsive UI using Tailwind CSS 💡 What I Learned: ✔ Handling protected routing logic ✔ Managing state with React Hooks ✔ Working with dynamic route parameters ✔ Building reusable components ✔ Improving user experience with timers & alerts This project helped me strengthen my understanding of: React Router • Conditional Rendering • API Handling • Component Architecture Netlify Link :- https://lnkd.in/gfWMkF5b More features coming soon 🚀 #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #TailwindCSS #Coding #100DaysOfCode #DeveloperJourney

Today in my Cohort, we dove deep into the world of the DOM (Document Object Model)—an essential part of web development. Highlights from the session: → What is the DOM and the Window object? → How to construct a DOM structure with different node types—element, text, attribute, comment, and document nodes. → DOM manipulation methods: select elements by ID, class, tag, or via query selectors. → Reading and updating content with innerText, innerHTML, and attribute methods. → Styling elements using the style property. We also applied these concepts in three mini projects: → A simple Dark/Light mode toggle → A dynamic list creator → An engaging color palette generator These hands-on exercises truly solidified my understanding of DOM and its power in building interactive web apps! Suraj Kumar Jha, Akash Kadlag, Chai Code, Chai Aur Code,Hitesh Choudhary,Anirudh J., Jay Kadlag #WebDevelopment #DOM #JavaScript #Code #TechLearning #ChaiCode

🚀 Built a **Product Filter & Search App** using **HTML, CSS, and JavaScript**. This web application allows users to dynamically search products, filter by category, and sort items by price. The project focuses on improving **JavaScript logic, DOM manipulation, and interactive UI development**. 🔹 Features: • Product search functionality • Category-based filtering • Price sorting (Low → High / High → Low) • Responsive product card layout This project helped me strengthen my understanding of **JavaScript array methods, event handling, and dynamic UI rendering**. 🔗 Live Demo: (https://lnkd.in/gfcuhEwt) 💻 GitHub Repo: (https://lnkd.in/g9YZBp3u) #FrontendDevelopment #JavaScript #WebDevelopment #FrontendDeveloper #LearningInPublic

🚀 New Project: Real-Time Weather Dashboard I’ve just wrapped up a responsive Weather Dashboard built with HTML, CSS, and Vanilla JavaScript! ☁️☀️ This project was a fantastic way to practice fetching and handling dynamic data. I integrated the Open-Meteo API to provide real-time updates on temperature, humidity, and wind speed based on user input. Key Features: Dynamic Data Fetching: Uses asynchronous JavaScript to pull live weather coordinates and conditions. Responsive UI: Fully optimized for mobile, tablet, and desktop views with CSS Flexbox and Media Queries. Error Handling: Built-in validation to manage invalid city searches gracefully. Clean Aesthetics: A modern, glassmorphism-inspired design with smooth gradients. I’m particularly excited about this one as I continue to bridge the gap between frontend interfaces and the backend logic I've been focusing on lately. 🙌 A Special Note of Thanks A huge thank you to Pratik Raj Verma for the guidance and support throughout this build. Your insights on structuring clean code and troubleshooting API logic were invaluable! Check out the here: https://lnkd.in/gAJKMFUc #WebDevelopment #JavaScript #CodingJourney #OpenSource #WeatherApp #Frontend

Real-World Web Project Series 01: Recipe Search Web App I built a Recipe Search Web Application using HTML, Tailwind CSS, and JavaScript. The application fetches recipe data from TheMealDB API and dynamically displays results based on the user's search query. Key features: • Search recipes by name • Fetch and display data using async JavaScript and fetch API • Dynamic recipe cards rendered with DOM manipulation • Modal view to read full recipe instructions • Responsive grid layout using Tailwind CSS • Basic loading state and error handling 🔗 Live preview: https://lnkd.in/gcmnnUBg 💻 Source code: https://lnkd.in/gpGuqrcu This project helped me strengthen my understanding of API integration, asynchronous JavaScript, and dynamic UI rendering. More projects coming soon as part of my Real-World Web Project Series. #javascript #frontenddevelopment #webdevelopment #tailwindcss #learninginpublic