JavaScript Find Index Playground Built with HTML and DOM

🚀 Built a Simple To-Do App Today! Today I worked on strengthening my JavaScript fundamentals by building a basic To-Do List application from scratch. Here’s what I implemented: ✅ Fetched data from a JSON source ✅ Added a checkbox feature to mark tasks as completed (with strike-through effect) ✅ Implemented a delete button to remove tasks dynamically ✅ Created an input field to add new tasks, which get pushed into the array and displayed instantly on the UI This project helped me understand DOM manipulation, event handling, and working with arrays in a much better way. Small steps, consistent progress 💪 Looking forward to building more real-world projects! #JavaScript #WebDevelopment #FrontendDevelopment #LearningInPublic #CodingJourney

Learn in Public - Day 31 🚀 Built a simple Counter Timer feature today. The app automatically increments a number every second and allows the user to stop the timer using a button...! While building this, I explored: • Using setInterval() to run functions repeatedly • Understanding clearInterval() to stop execution • Updating text content dynamically in the DOM • Handling button click events • Managing timer state using variables Improvements added: ✔ Auto-increment counter every second ✔ Clear button to stop the timer ✔ Real-time DOM updates ✔ Clean and minimal UI Simple project, but gave me a clear understanding of how timers work in JavaScript ⏱️ Live Project 👇 https://lnkd.in/dKRi6pcZ GitHub Repo 👇 https://lnkd.in/dV5v-Yh6 Learning a little every day 📈 #LearnInPublic #JavaScript #WebDevelopment #100DaysOfCode

🚀 Day 39 - Know Fact About the Number 🔢 Today I built a Number Facts App using JavaScript by integrating a real-world API and handling user interactions efficiently! 🔍 What I learned: • Handling user input with keyboard events (Enter key) • Validating input before making API calls • Making HTTP requests using fetch() • Working with JSON response data • Dynamically updating UI based on API response • Showing loading state using Bootstrap spinner • Managing DOM elements with JavaScript 🛠 App Features: ✔ Enter a number and get an interesting fact instantly ✔ Displays loading spinner while fetching data ✔ Input validation with alert for empty values ✔ Clean and responsive UI Project Links • GitHub Repo: https://lnkd.in/dExxWiWS • Live Demo: https://lnkd.in/dneG2-F7 Consistency beats motivation. Showing up every day 🚀 #Day39 #LearnInPublic #JavaScript #WebDevelopment #FrontendDevelopment #100DaysOfCode

🚀 Day 36 - Random Joke Generator Today I built a fun and interactive Random Joke Generator using JavaScript and APIs.....! 😄 This project helped me understand how real-world apps fetch and display dynamic data. 🔍 What I explored today: • Making HTTP requests using fetch() • Handling API responses with .then() • Working with JSON data • DOM manipulation using getElementById() • Handling events with addEventListener() • Managing loading states using a Bootstrap spinner ⚡ App Features: ✅ Fetches a random joke from an API ✅ Displays joke dynamically on button click ✅ Shows loading spinner while fetching data ✅ Handles errors gracefully 💡 This was a great step towards understanding how frontend connects with APIs.....feels like building real apps now...! Project Links • GitHub Repo: https://lnkd.in/d7m94A7k • Live Demo: https://lnkd.in/ddBBnba2 Excited to keep improving and building more 🔥 #LearnInPublic #JavaScript #WebDevelopment #FrontendDevelopment #CodingJourney #BuildInPublic

Day 17 of my JavaScript journey 🚀 Built an Expense Tracker using HTML, CSS, and JavaScript. This app helps users track their income and expenses, showing the total balance dynamically. This project helped me practice: • Working with arrays and objects • DOM manipulation • Event handling • Dynamic data updates 🔗 Live Demo: https://lnkd.in/gmrsaRJR 💻 GitHub Repo: https://lnkd.in/gS4WA8gJ Moving from small UI projects to more real-world applications step by step. 💻 #JavaScript #WebDevelopment #FrontendDeveloper #100DaysOfCode #CodingJourney

Just built a Todo App using Vanilla JavaScript! Key Features: ->Add, edit and delete tasks dynamically ->Reorder tasks with up/down buttons ->Persistent storage using localStorage ->Auto-display of tasks with date & time ->Efficient event handling using event delegation This project helped me strengthen my DOM manipulation, JavaScript logic, and web storage skills. Todo Website: https://lnkd.in/e6y7QmAb Check it out on GitHub: https://lnkd.in/eQjqyHwh #JavaScript #WebDevelopment #Frontend #TodoApp #Coding

Learn in Public - Day 32 🚀 Built a Theme Switcher feature today. The app allows users to switch between Light and Dark themes by typing input and pressing Enter...! While building this, I explored: • Accessing elements using getElementById() • Handling keyboard events with keydown • Detecting Enter key using event.key • Changing styles dynamically using JavaScript • Working with background images in CSS Improvements added: ✔ Switch between Light and Dark themes ✔ Dynamic background image change ✔ Text color update based on theme ✔ Input validation with alert messages ✔ Case-insensitive input handling Simple feature, but helped me understand how user input and DOM manipulation work together 🎯 Live Project 👇 https://lnkd.in/dMrbSnjw GitHub Repo 👇 https://lnkd.in/dZHRFVMn Consistency > Perfection 📈 #LearnInPublic #JavaScript #WebDevelopment

🚀 Day 19 – Quiz App with Timer ⏱️ Today I built an interactive Quiz Application with a 30-second timer using HTML, CSS, and JavaScript. ✨ Key Features: • ⏱️ 30-second countdown timer for each question • ✅ Instant feedback (correct / wrong answers) • 📊 Live score tracking • 🔄 Automatic question navigation • 🏁 Final score with result message

🧠 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

🚀 Learn in Public - Day 33 Built a Time Converter today. Users can enter hours and minutes, and the app converts the total time into seconds with proper validation...! While building this, I explored: • Handling user input using getElementById() • Using addEventListener() for button click events • Converting string inputs into numbers using parseInt() • Applying conditional logic for validation • Updating UI dynamically using textContent Improvements added: ✔ Convert hours & minutes into seconds ✔ Error handling for empty inputs ✔ Clear separation of result and error messages ✔ Clean and simple UI using Bootstrap ✔ Responsive layout with better alignment Small project, but strengthened my understanding of event handling + DOM manipulation + input validation 💡 🔗 Live Project: https://lnkd.in/dFcYtBii 💻 GitHub Repo: https://lnkd.in/d79Whzsm Consistency > Perfection 📈 #LearnInPublic #JavaScript #WebDevelopment #FrontendDevelopment