Building Green Earth API Project with JavaScript

"Developed a responsive Weather App using HTML, CSS, and JavaScript, allowing users to fetch real-time temperature and weather conditions for any city, with an interactive user interface and dynamic data handling."This app allows users to enter a city name and get the temperature along with weather conditions and icons. ✨ Features: ✔️ City-based weather search ✔️ Temperature display 🌡️ ✔️ Weather condition with icons ☀️🌧️❄️ ✔️ Clean and simple UI This project helped me improve my JavaScript skills, especially working with APIs and dynamic data. 🔗 Live Demo: https://lnkd.in/d2wK4hqR 🚀 Looking forward to building more such projects! #WebDevelopment #JavaScript #HTML #CSS #BeginnerProject #Learning #LinkedInProjects

🧮 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

Topic: Code Splitting in React – Ship Less JavaScript, Load Faster Apps 📦 Code Splitting in React – Why Loading Everything is a Bad Idea Most React apps bundle everything into one big file. 👉 More code = slower load = worse UX The smarter approach? Code Splitting 👇 🔹 What is Code Splitting? Load JavaScript only when it’s needed, instead of shipping everything upfront. 🔹 Basic Example const Dashboard = React.lazy(() => import("./Dashboard")); <Suspense fallback={<Loader />}> <Dashboard /> </Suspense> 👉 Component loads only when required 👉 Reduces initial bundle size 🔹 Why It Matters ✔ Faster initial load ✔ Better performance on slow networks ✔ Improved user experience ✔ Smaller bundle size 🔹 Where to Use It ✔ Routes (most common) ✔ Heavy components (charts, editors) ✔ Admin panels / dashboards ✔ Feature-based modules 💡 Real-World Insight Users don’t need your entire app at once. They only need what they see right now. 📌 Golden Rule Load less → faster app → happier users 📸 Daily React tips & visuals: 👉 https://lnkd.in/g7QgUPWX 💬 Have you implemented code splitting in your app yet? #React #ReactJS #CodeSplitting #FrontendPerformance #JavaScript #WebDevelopment #DeveloperLife

🚀 Next.js Pages & Layouts Understanding routing and layout in Next.js can feel tricky at first… Here’s a quick breakdown 👇 🧩 Pages (Routing Made Easy) → Every file becomes a route automatically → `/app/home/page.js` → `/home` → No need for React Route 🧱 Layouts (Reusable UI) → Define common UI like Navbar & Footer → Wraps all pages automatically → Keeps UI consistent across app 🔁 Nested Layouts (Scalable Apps) → Create layouts for specific sections → Example: `/dashboard/layout.js` → Perfect for admin panels & dashboards ⚡ Why it matters? ✔ No manual routing ✔ Clean project structure ✔ Reusable components ✔ Better scalability 💡 Build once, reuse everywhere — that’s the power of Next.js layouts! 💬 Are you using App Router or still on Pages Router? #NextJS #React #Frontend #WebDevelopment #JavaScript #SoftwareEngineering #Coding

🚀 Stop Shipping "Dead Weight" to Your Users! 🌳 In the modern era of high-performance web apps, every kilobyte counts. If your JavaScript bundle is bloated, your user experience suffers. Enter Tree-Shaking—the essential optimisation technique for every frontend engineer. 🚀 🔍 What is Tree-Shaking? Tree-shaking is a dead-code elimination technique. It uses static analysis to identify which parts of your code (functions, classes, or variables) are actually being used and "shakes off" the rest. 🍃 By leveraging ES Modules (import/export), modern bundlers ensure that only the "living" code reaches your production environment, keeping your application lean and fast. ⚡ 📦 Real-Life Example: The "Subscription Box" 🚛 Imagine you subscribe to a monthly "Chef’s Box" that contains 50 different ingredients. Without Tree-Shaking: You receive all 50 ingredients every time, even if you only plan to cook a simple pasta dish using 3 items. You waste space in your kitchen and spend time sorting through the clutter. 🍝❌ With Tree-Shaking: The service only sends you the 3 specific ingredients you actually need for your recipe. Your kitchen stays organised, and you start cooking immediately. 👨🍳✅ Don't import a massive 100KB utility library just to use one capitalise() function. Tree-shaking ensures you only ship that one function to the browser. 💎 Tree-shaking reduces Total Blocking Time (TBT) and improves your site's SEO and conversion rates. 📈✨ #TreeShaking #WebPerformance #FrontendDevelopment #JavaScript #ReactJS #NextJS #CleanCode #SoftwareEngineering #WebOptimization #ReactJSDevelopment

🚀 #Day42 of #100DaysOfCoding 🚀 Project Update. Build a simple and interactive “Call Now Web App” using HTML, CSS, and JavaScript. The application allows users to enter a mobile number and instantly generate a clickable call link using the tel: protocol. This project demonstrates DOM manipulation, user input handling, and dynamic content rendering in JavaScript. ✨ Key Features 🔹 User Input Field Allows users to enter any mobile number easily 🔹 Dynamic Call Link Generation Automatically creates a clickable call button using JavaScript 🔹 One-Click Calling Uses tel: protocol to directly initiate calls on supported devices 🔹 Real-Time Output Display Displays the generated call link instantly without page reload 🔹 Simple & Beginner-Friendly UI Clean and minimal design for better user experience 🔹 DOM Manipulation Uses getElementById and innerHTML for dynamic updates Code Of School || Ritendra Gour || Avinash Gour #WebDevelopment #JavaScript #Frontend #HTML #CSS #CodingProject #BeginnerFriendly #100DaysOfCode #TechProjects #LearningByDoing

Day 42/100 🔥 Day 19 – React Series 💡 Today’s Topic: Lazy Loading & Code Splitting in React When React apps grow, the JavaScript bundle becomes very large. This slows down the initial page load. To solve this, React provides Lazy Loading and Code Splitting. 🧠 What is Code Splitting? Instead of loading all components at once, React loads components only when they are needed. Example: Without Code Splitting App.js → loads everything With Code Splitting Home → loads Home component Profile → loads Profile component only when visited This improves performance and loading speed. 🟢 React Lazy Example import React, { Suspense, lazy } from "react"; const Dashboard = lazy(() => import("./Dashboard")); function App() { return ( <Suspense fallback={<h2>Loading...</h2>}> <Dashboard /> </Suspense> ); } 🔎 What Happens Here? lazy() → Loads component only when required Suspense → Shows fallback UI while component loads Example fallback: Loading... Spinner Skeleton UI 🌍 Real-Time Example Large apps like: Netflix Instagram do not load everything at once. Instead: ✔ Load homepage first ✔ Load profile page when clicked ✔ Load settings when needed This keeps apps fast and responsive. 🎯 Benefits ✅ Faster initial load ✅ Smaller JavaScript bundle ✅ Better user experience ✅ Optimized performance 💡 Real Project Use Case Imagine a dashboard with pages: Home Analytics Reports Settings Instead of loading everything: Load each page only when the user navigates to it. 🧩 Lazy Loading with React Router const About = lazy(() => import("./About")); <Route path="/about" element={<About />} /> This makes routing even more optimized. Performance optimization is crucial in modern web apps. 📢 Short Caption Version 🚀 Day 19 – Lazy Loading & Code Splitting Load components only when needed. Faster apps = Better user experience. #React #JavaScript #FrontendDeveloper #WebDevelopment #100DaysOfCode #FullStackDeveloper

🌱 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

WEATHER APPLICATION:- https://lnkd.in/gnsxThYe 🌦️ Excited to share my Weather Application project! Built using HTML, CSS, and JavaScript, this app fetches real-time weather data and displays it in a clean, user-friendly interface. ✨ Features: • Live weather updates • City-based search • Simple and responsive design This project helped me improve my skills in API integration and frontend development. #WebDevelopment #JavaScript #API #Frontend #Projects #Learning

💻 Notely – Collaborative Note-Taking App Built this as a quick addition to my project portfolio – a full-stack MERN + Tailwind CSS web app for taking, organizing, and sharing notes. Straightforward, clean, and fully functional. 📌 Highlights • Rich text editor with formatting and image support • Secure authentication with JWT login and password hashing • Auto-save & draft system keeps your work safe as you write • Pin important notes to keep them at the top • Collaborator sharing with real-time edit tracking • Folder organization with optional PIN protection • Full-text search and smooth sorting/filtering • Dark mode & responsive UI across devices A polished, professional note-taking experience ready for anyone who wants to stay organized. 🔗 GitHub: https://lnkd.in/gqBPJXeY #MERN #ReactJS #NodeJS #WebDevelopment #PortfolioProject #SoftwareEngineering