JavaScript Quote Generator with Arrays and DOM

Hello everyone 👋 Welcome to Day 24 of my JavaScript learning journey 🚀 Today I built a fun yet logic-driven mini project a Spam Generator using HTML, CSS, and JavaScript. This project mainly helped me strengthen my understanding of loops, input handling, and DOM updates. 🧪 Project: Spam Generator How the app works: ✔ User enters a message ✔ User enters how many times it should repeat ✔ On clicking Generate, JavaScript repeats the message ✔ Output is displayed inside a textarea ✔ Everything happens instantly without page reload Simple idea, but very effective for practicing logic. 🔧 Concepts I Applied Through this project, I practiced: 🔹 Selecting elements using getElementById() and querySelector() 🔹 Handling button click events 🔹 Reading and converting input values 🔹 Using `for` loop for repetition logic 🔹 Dynamically updating textarea value 🔹 String concatenation and counters This project clearly showed how loops + DOM = powerful combinations. 🧠 What I Learned • How loops control repetitive tasks in real projects • How user input drives application behavior • How JavaScript dynamically updates UI elements • How even simple logic can create useful tools It also reinforced why practice matters more than theory. 🎯 Day 24 Takeaway Small projects like this sharpen problem-solving skills. The more I build, the more natural JavaScript feels 💻✨ Next ideas: 👉 Random text generator 👉 Auto message formatter 👉 Copy-to-clipboard feature Onward to Day 25 🚀 #javascript #webdevelopment #frontenddevelopment #learninginpublic #codingjourney #developers #100daysofcode #dom #projects #selflearning

🚀 Revising JavaScript by Building 5 Mini Projects Instead of just re-reading theory, I decided to revise JavaScript the practical way — by building small apps from scratch. Each mini project helped reinforce core concepts and turn knowledge into real experience. Here’s what I built 👇 🔀 1. Clone List (DOM Manipulation) An interactive app where clicking an item clones it and moves it to another list — and it can also move back. Built using cloneNode(), event delegation, and appendChild(). 🎲 2. Random Array Generator Enter a min and max value to instantly generate a random 10-element array. Includes input validation and uses Math.random() and Math.floor(). ⏱️ 3. Stopwatch A clean stopwatch with Start / Stop / Reset controls. Built with setInterval, time formatting (HH:MM:SS), and padStart() to ensure consistent display. ✅ 4. To-Do List App A simple but powerful task manager with: • Add, Edit, and Delete tasks • Mark tasks complete with strikethrough • Duplicate detection with toast notifications • LocalStorage persistence so tasks survive page refresh 🌍 5. Country Neighbor Finder (Fetch API) Search for any country and fetch live data from a REST API including: • Flag, region, population, language, and currency • Neighboring country loaded using chained .then() promises • Graceful handling for countries with no borders 💡 Concepts practiced: DOM Manipulation · Event Delegation · setInterval / clearInterval · LocalStorage · Fetch API · Promises & .then() · Array methods · cloneNode() · Math.random() Every mini project is a reminder that the best way to learn programming is by building things — even small ones. If you're learning JavaScript, try building tiny projects like these. They make a huge difference. 💪 #JavaScript #Frontend #WebDevelopment #Programming #Coding #Developers #LearningInPublic #100DaysOfCode #MiniProjects #DOM #FetchAPI #Promises #LocalStorage #ITI #ITICoders

🌱 Beginner-Friendly JavaScript Learning Update I recently took time to go back to the fundamentals of JavaScript and practice it the right way — using strictly vanilla JavaScript (no frameworks, no libraries). Instead of jumping straight into advanced tools, I focused on understanding how JavaScript actually works from the ground up. Here’s what I practiced step by step: ✨ Variables, Strings & Conditionals ✨ Functions & Logic Building ✨ Arrays & Iteration ✨ Objects & Data Structures ✨ DOM Manipulation & Browser Interaction As a beginner-friendly challenge, I built small projects like: Age Category Checker Password Strength Checker Grade Calculator Vowel Counter Todo App Button Click Counter Live Character Counter Simple Shopping Cart Logic This helped me truly understand: How websites respond to clicks, inputs, and user actions — not just writing code, but building real interactivity. I also used Loom to screen record my progress so I could track my learning journey and stay consistent. 🎥 I documented my full practice here: https://lnkd.in/es3iudqd Still learning, still improving, and focusing on strong fundamentals before moving into advanced frameworks. #JavaScript #FrontendDevelopment #BeginnerDeveloper #VanillaJS #LearningInPublic #WebDevelopment

🚀 Excited to share my latest blog post! I’ve been diving deep into JavaScript fundamentals, and this piece is all about making concepts like variables, scope, and functions feel approachable and fun. Instead of dry definitions, I’ve used analogies (like cricket examples 🏏) and small exercises to help learners connect with the ideas more naturally. Writing this was a chance to blend technical clarity with human connection—something I’ve been striving for in my learning journey. I hope it helps others who are starting out or revisiting the basics. 👉 Check it out here: https://lnkd.in/dCXg_nYf Grateful to my mentors and community for inspiring me to keep sharing and learning. Let me know your thoughts—I’d love feedback! #JavaScript #LearningJourney #TechCommunity #Blogging #Coding

Small JavaScript Project | Add Two Numbers Turning learning into practice! Today I built a simple “Add Two Numbers” project using HTML, CSS, and JavaScript, where I applied the concepts I learned in my previous lectures. Even a small project like this helps strengthen the core understanding of DOM manipulation and JavaScript logic, which are essential for frontend development. Here are the concepts I applied while building this project: ● Accessing HTML elements using document.getElementById() ● Handling user input from input fields ● Performing basic arithmetic operations using JavaScript ● Using event handling to trigger actions on button click ● Dynamically displaying the result on the webpage ● Applying DOM manipulation to update content in real time ● Understanding how JavaScript makes webpages interactive Building small projects like this helps transform theoretical knowledge into practical skills and improves problem-solving ability. Excited to keep learning and building more JavaScript projects as I continue my web development journey. #JavaScript #WebDevelopment #FrontendDevelopment #DOM #DOMManipulation #CodingJourney #Programming #LearnJavaScript #DeveloperJourney #CodingLife #SoftwareDevelopment #BuildInPublic #TechLearning

🌟 My Coding Journey Continues: Day 8–10 🌟 This marked an exciting shift in my Web Development journey — I officially started JavaScript foundations. 🚀 Instead of just writing code, I focused on understanding how JavaScript actually works behind the scenes. Day 8: JavaScript & The Engine Behind the Scenes I began with the basics, but from a deeper perspective: How JavaScript runs from the console to the V8 engine Understanding what happens before code executes Introduction to JavaScript execution flow Learning what happens behind the scenes made everything feel more logical rather than magical. Day 9: Data Types, Variables & Operations Strengthened core fundamentals: var, let, and const Primitive vs Non-Primitive data types Type behavior and memory basics Arithmetic and logical operations This helped me understand how JavaScript handles data internally and why certain unexpected behaviors happen. Day 10: Conditions, Arrays & Loops Started applying logic and control flow: if-else conditions Working with arrays Iterating using loops Writing small logic-based examples This is where JavaScript started feeling powerful — combining data + conditions + loops opens up real programming capability. Looking Ahead Starting JavaScript feels like unlocking a new level in Web Development. Understanding the engine, memory, and execution flow makes me more confident about writing clean and predictable code. 🔜 More JS concepts coming next. Day 8–10 completed ✅ 🚀 #CodingJourney #JavaScript #WebDevelopment #Frontend #LearningInPublic #Consistency #EngineeringStudent #100DaysOfCode #JSBasics

Today, I went back to the foundations of JavaScript… and it felt like learning how to think all over again. When I first started coding, arrays were just “lists of items” to me. But today, I slowed down and really understood how to control and manipulate them intentionally. Here’s what I explored: 1. shift() – removes the first item (everything else moves forward) 2. unshift() – adds an item to the beginning 3. pop() – removes the last item 4. push() – adds an item to the end 5. slice() – creates a copy of part of an array 6. splice() – the all-in-one method for adding/removing items anywhere At first glance, these methods look simple. But understanding them deeply means you can control data flow in your applications with confidence. Relearning the basics has reminded me of something important: Strong foundations make everything else easier. I’m currently on a journey of strengthening my JavaScript fundamentals as I continue growing as a Frontend Developer. If you’re also learning or relearning JavaScript, I’d love to connect and grow together. #JavaScript #FrontendDevelopment #LearningInPublic #100DaysOfCode #TechJourney

🚀 Just launched a small project to demonstrate JavaScript library usage and practical examples for developers. While learning or working with JavaScript libraries, one common challenge is finding clear and simple usage examples. Many developers spend time searching documentation just to understand how to integrate a library. So I built a simple demo site that shows how to use JavaScript libraries with real examples. 👉 Explore the project: https://lnkd.in/gg_fU8EB What this project focuses on • Practical examples of using JavaScript libraries • Simple and easy-to-understand implementation • Developer-friendly structure for experimentation • A quick reference for integrating libraries into web projects JavaScript libraries play a huge role in modern web development by helping developers build features faster and reuse tested functionality rather than writing everything from scratch. (arXiv) This project is part of my effort to build useful developer tools and learning resources while exploring new ideas around automation, testing, and developer productivity. If you're a developer, student, or someone exploring JavaScript libraries, I’d love your feedback. Let me know what libraries or examples you would like to see added next. #JavaScript #WebDevelopment #DeveloperTools #Frontend #Programming #Coding #OpenSource #LearningInPublic #BuildInPublic

🚀 JavaScript & Redux Toolkit Learning Today I practiced some important JavaScript concepts and explored Redux Toolkit for state management in React applications. 🔹 JavaScript: call(), apply(), bind() These methods allow us to control the value of "this" when invoking a function. Example: function greet(city) { console.log(this.name + " from " + city); } const person = { name: "Gautam" }; greet.call(person, "Bangalore"); greet.apply(person, ["Bangalore"]); const greetUser = greet.bind(person); greetUser("Bangalore"); ✔ call() → arguments passed individually ✔ apply() → arguments passed as an array ✔ bind() → returns a new function with bound context 🔹 Redux Toolkit Redux Toolkit simplifies Redux state management and reduces boilerplate code. Example store setup: import { configureStore } from "@reduxjs/toolkit"; import counterReducer from "./counterSlice"; export const store = configureStore({ reducer: { counter: counterReducer } }); Redux Toolkit makes Redux easier with features like: • createSlice() • configureStore() • built-in immutability handling 📚 What I learned today: • Function context in JavaScript • Differences between call, apply, and bind • Basic Redux Toolkit store configuration I am continuously improving my skills in JavaScript, React, and full stack development. #JavaScript #ReduxToolkit #ReactJS #WebDevelopment #LearningInPublic #DeveloperJourney

Today’s learning took me deeper into how JavaScript actually makes decisions. When I first started coding, I used operators and conditionals just to “make things work.” But today, I paused and really understood what’s happening under the hood. I explored JavaScript operators: 1. Arithmetic operators — for calculations like addition, subtraction, division, modulus, exponent, increment and decrement 2. Assignment operators — shortcuts like +=, -=, *=, %= 3. Comparison operators — comparing values using ==, ===, != 4. Logical operators — combining conditions using && and || Then I moved into conditional statements, which are what allow programs to make decisions: 👉 if, else if, else 👉 ternary operators for shorter decisions 👉 nested conditions for more complex logic 👉 switch statements for handling multiple possible cases And it clicked… Writing code isn’t just about syntax. It’s about teaching the computer how to think and decide. Strengthening my JavaScript foundations has been one of the best decisions I’ve made on my frontend journey. Every small concept I revisit makes me a more confident and intentional developer #JavaScript #FrontendDevelopment #LearningInPublic #TechJourney #100DaysOfCode