JavaScript Learning – Movie Search App Built a Movie Search App using JavaScript . I created a Movie Search Application that fetches real-time data from an API and displays it in a clean and responsive UI. Now, instead of static data, my app works with live movie data . What it can do: • Search any movie instantly • Display posters, title & release year • View full details like rating, actors & plot • Clean and responsive movie card UI What I learned from this project: • How to use fetch() with async/await • Handling real-time API data • Difference between search results & detailed data • DOM manipulation in dynamic apps • Writing cleaner and better structured code One feature I really enjoyed building: Clicking a movie → getting full details dynamically 🔗 Code available on GitHub: https://lnkd.in/g2tNSM2C Trainer:Raviteja T 10000 Coders #JavaScript #WebDevelopment #FrontendDevelopment #APIs #Projects #LearningInPublic #BuildInPublic #FullStackJourney
More Relevant Posts
-
🚀 Day 42 : Navigating Between Forms using JavaScript in Model-Driven Apps Continuing my learning series on JavaScript in Power Apps – Model-Driven Apps. 🔹 Form Navigation In Model-Driven Apps, sometimes we need to switch between different forms of the same entity using JavaScript. This helps developers control which form should open based on specific conditions. 🔹 Why is it useful? In real scenarios, developers may need to: open different forms for different users switch form based on record type control UI experience dynamically handle multiple form designs 🔹 How it works We use formSelector to access available forms and navigate between them. 🔹 Syntax formContext.ui.formSelector.items.get("formId").navigate(); 🔹 Example (Real Scenario – Student Form Switch) function switchStudentForm(executionContext) { var formContext = executionContext.getFormContext(); var formSelector = formContext.ui.formSelector; if (!formSelector) return; // Example: Student Type field (VIP / Normal) var studentType = formContext.getAttribute("kt_studenttype").getValue(); var items = formSelector.items.get(); items.forEach(function (item) { switch (studentType) { case 1: // VIP Student if (item.getLabel() === "VIP Form") { item.navigate(); } break; case 2: // Normal Student if (item.getLabel() === "Main Form") { item.navigate(); } break; } }); } #PowerApps #ModelDrivenApps #PowerPlatform #MicrosoftPowerPlatform #Microsoft #Dynamics365 #MicrosoftDynamics365 #Dataverse #JavaScript
To view or add a comment, sign in
-
🚀 Day 5 of My MERN Stack Journey Today I moved from just learning JavaScript concepts to actually building something real. I created a Task Dashboard (To-Do App) using pure JavaScript and DOM manipulation. 💡 What I practiced: • Selecting elements using querySelector() • Updating content with innerText & innerHTML • Styling UI dynamically with JavaScript • Creating elements using createElement() • Handling events with addEventListener() ✨ Features I built: ✔️ Add new tasks ✔️ Delete individual tasks ✔️ Mark tasks as completed ✔️ Clear all tasks ✔️ Input validation 🔗 GitHub Project: https://lnkd.in/dTTzZbRG 🧠 Key Learning: This was the moment I understood how JavaScript actually controls the UI. Instead of static pages, I can now create interactive experiences. ⚠️ Challenges: Handling events properly and managing dynamic elements was tricky, but solving it gave me much better clarity on the DOM. 🚀 Next Step: Planning to improve this project by adding Local Storage so tasks remain even after refreshing the page. I’m sharing my journey as I learn and grow step by step. If you have suggestions or feedback, I’d love to hear from you! Read More: https://lnkd.in/dT4tVUT3 #JavaScript #WebDevelopment #MERN #LearningInPublic #100DaysOfCode
To view or add a comment, sign in
-
🚀 #Day55 of #100DaysofCodingChallenge Today I built a Random Quote Generator App using HTML, CSS, and JavaScript with API Integration that fetches motivational quotes dynamically from an external API. 🔹 Features of today’s project: • Fetches random quotes using API • Displays quote with author name • “New Quote” button for refreshing quotes instantly • Clean and modern UI design • Implemented async/await with fetch() 💡 What I learned today: This project helped me improve my understanding of API integration, handling JSON data, and updating UI dynamically using JavaScript. Working with real-time data makes projects feel more practical and closer to real-world applications. Step by step, building stronger JavaScript skills every day! 💻🔥 Special thanks to my mentors Ritendra Gour Sir and Avinash Gour Sir for their continuous guidance and support. 🏫 Learning under: Code Of School Excited to continue this journey and build more interactive web projects ahead! 🚀 #Day55 #100DaysOfCode #JavaScript #WebDevelopment #APIIntegration #QuoteGenerator #HTML #CSS #LearningJourney #CodeOfSchool #ConsistencyMatters
To view or add a comment, sign in
-
🚀 Day 11 / 21 — Frontend Challenge Yesterday I built a static Quiz App… Today, I turned it into a dynamic real-world application 🌐👇 Today I built: 👉 API Based Quiz App 🚀 🧠 Flow I designed before coding: Replaced static quiz data with real-time API Fetched questions using async/await Transformed API data into usable format Randomized answer positions dynamically Implemented timer countdown system Built score tracking logic Handled loading & error states Focused on making the app feel interactive and real 🛠 Tech Used: HTML | CSS | JavaScript | Fetch API ✨ Features: • Live questions from API 🌐 • Every reload = new quiz 🔄 • Timer countdown ⏳ • Score tracking system 🎯 • Randomized options for each question • Loading state before quiz starts • Clean & responsive premium UI ⚡ Challenges Faced: Handling API data structure and converting it into a usable format was tricky. Also, managing async operations while keeping the UI smooth required careful handling. 💡 Key Learning: Learned how to work with APIs, handle asynchronous JavaScript, and build applications that use real-time data instead of static content. 🔥 From Day 10 ➝ Day 11: Static project ➝ Dynamic API-based app 🌐 Now it actually feels like a real product 🚀 Consistency is turning small projects into real-world skills 💯 💬 What should I build next? (Thinking about Weather App 🌦️ or Movie Search App 🎬) 🙏 Guidance by: Keyur Gohil 📚 Learning at: Red And White Multimedia Education 📌 GitHub Repo: https://lnkd.in/dTR9harE — #buildinpublic #frontenddeveloper #javascriptprojects #webdevelopment #codingjourney #100daysofcode #developers #programminglife #learninpublic #api #uidesign
To view or add a comment, sign in
-
Built a Command Palette using Vanilla JavaScript I’ve been practicing core JavaScript concepts and applied them by building a command palette similar to modern apps. Current features:• Keyboard shortcut (Ctrl + K) to open/close palette• Real-time search filtering• Dynamic rendering using state-driven approach• Active item highlighting with keyboard navigation• Clean and responsive modern UI This project helped me understand how to structure frontend logic using:event → state → render → UI I’ll continue improving this project by adding more advanced features like command execution, better navigation, and smoother interactions. Check the app below ⬇️ and suggest me improvements Demo Live: https://lnkd.in/dvCRnpuv Learning in public and building step by step. 💻
To view or add a comment, sign in
-
Stop Learning Frameworks. Start Learning How the Web Actually Works. Every day, I see developers jumping from React → Next.js → Vue → AI tools… hoping the next shiny thing will make them “job-ready.” But here’s a truth most won’t tell you: Frameworks don’t make you a great developer. Understanding the web does. If you truly want to stand out in web development, master these fundamentals: How the browser works (Rendering, DOM, CSSOM) JavaScript under the hood (Event loop, closures, async behavior) Networking basics (HTTP/HTTPS, APIs, caching) Performance optimization (lazy loading, code splitting) Accessibility (a11y) — because great devs build for everyone Frameworks will change. Trends will fade. But these fundamentals compound over time. I shifted my focus from “learning tools” to “understanding systems.” Debugging got easier, performance improved, and my confidence grew. My current rule: “Don’t just use tools. Understand why they exist.” If you're a developer feeling stuck, try this: Pick one concept this week (like the event loop) Go deep instead of wide Build something small around it You’ll grow much faster. What’s one concept in web development you wish you understood better? #WebDevelopment #Frontend #JavaScript #Programming #Developers #Learning #TechCareers
To view or add a comment, sign in
-
🚀 My JavaScript-React Journey :- Error Handling 🔥 Today I learned something that separates beginners from real developers… 👉 Handling errors, not just writing code. Most of us focus on writing “working code”… But real-world apps fail all the time. And that’s where Error Handling comes in. 🔹 What I explored today: ✔️ Error Types in JavaScript SyntaxError → code hi galat ReferenceError → variable exist nahi karta TypeError → wrong operation on data ✔️ try...catch Handling runtime errors without crashing the app ✔️ finally Runs no matter what (success or error) ✔️ throw Creating custom errors for better control 💡 Biggest Realization: Writing code is easy. Making it fail-proof is what makes you a developer. 🧠 What I’m improving daily: • Writing safer code • Handling edge cases • Thinking like a real developer 📌 Next Step: Objects , Modules , this keyword , more as Foundations for REACT #javascript #webdevelopment #codingjourney #learninpublic #180daysofcode #frontenddevelopment #programming #developers #reactjs #softwareengineering #MatadeenYadav #matadeenyadav
To view or add a comment, sign in
-
How I Understood Memory Leak in JavaScript One day I wrote this small code: let user = { name: "Siddharth" }; let map = new Map(); map.set(user, "Developer"); user = null; console.log(map); And I thought: 👉 “I removed the user… so memory should be free now.” But I was wrong. 🧠 What actually happened? Even after: user = null; The object was still in memory. Why? Because Map was still holding a reference to it. 👉 JavaScript says: “As long as something is pointing to this object, I won’t delete it.” That’s called a memory leak. 💡 Human way to understand this Imagine: You throw something in the dustbin 🗑️ But someone secretly keeps a copy of it. So it’s not really gone. That’s exactly what Map does here. ⚠️ The problem If this keeps happening in a real app: • Memory keeps increasing 📈 • App becomes slow 🐢 • Eventually crashes 💥 ✅ The fix (cleanup) let user = { name: "Siddharth" }; let map = new Map(); map.set(user, "Developer"); user = null; // Cleanup map.clear(); console.log(map); // Map(0) {} Now: 👉 No reference → memory gets freed 🚀 The lesson I learned 📌 Memory leaks happen when references are not removed 📌 Map keeps strong references 📌 Always clean up unused data Now whenever I use Map, I ask: 👉 Am I removing things I no longer need? Still learning JavaScript the human way. 🚀 #JavaScript #MemoryLeak #WebDevelopment #LearningInPublic #CleanCode #ReactJS #FrontendDevelopment #DeveloperJourney #Performance
To view or add a comment, sign in
-
-
🚀 I built 10 JavaScript projects… and got frustrated more than I expected. But that frustration changed how I think about building applications. Projects I built: • Clicker Game • Background Color Changer • Countdown Timer • Digital Clock • Income Tax Calculator • Love Calculator • Quiz App • Random Quote Generator • To-Do App (with localStorage) What actually mattered (not the projects): Two projects pushed me the most: 👉 To-Do App 👉 Quiz App Because for the first time, I stopped “just coding” and started thinking in architecture. The biggest concept I learned: 👉 Source of Truth Instead of directly manipulating the UI: • Keep data in a central structure (array/object) • Update the data first • Reflect changes in the UI • Persist it (localStorage) Why this matters: This approach makes apps: • More scalable • Easier to debug • More predictable Honest truth: I enjoyed building these projects… but I was also frustrated a lot. And that’s where real learning happened. 🎥 I’ve created a video showcasing all 10 projects. This is just the beginning — now I'll focus on building more structured and scalable applications. Project refrence help: Rohit Negi | Youtube channel: CoderArmy #JavaScript #WebDevelopment #BuildInPublic #LearningJourney #FrontendDevelopment #fullstackdevelopment
To view or add a comment, sign in
-
Stop Writing Inefficient JavaScript. This One Concept Can Save Your App. Every time a user types in your search bar… Are you firing an API call on every single keystroke? 😵💫 Now imagine this instead: 👉 The user types freely 👉 Your app waits… just a moment 👉 Then fires ONE clean, optimized request That’s the power of Debouncing. 💡 What most developers miss: It’s not about writing more code. It’s about writing smarter code. Debouncing ensures your function runs only when it actually matters not every time an event gets triggered. ⚡ Where this becomes a game-changer: • 🔍 Search bars (no more API spam) • 📱 Form validation (only after user finishes typing) • 💾 Auto-save features (clean + efficient saves) • 📏 Resize events (final state > every state) 🧠 Real insight: Most beginners make this mistake: ❌ Creating a new debounced function inside the event listener → Result: Debouncing breaks completely ✅ The correct approach: Create it once, reuse it everywhere ⏱️ Think of it like this: User types: a → ab → abc → abcd Your function runs: ❌ ❌ ❌ ✅ Only the final intent matters. 🚀 If you're serious about frontend performance, this is not optional it's foundational. Mastering small concepts like this is what separates a developer who writes code from one who builds scalable systems. 💬 Curious where would you use debouncing in your current project? hashtag #javascript #webdevelopment #frontend #reactjs #coding #programming #developers #softwareengineering
To view or add a comment, sign in
Explore content categories
- Career
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Hospitality & Tourism
- Business Strategy
- Change Management
- Organizational Culture
- Design
- Innovation
- Event Planning
- Training & Development