Learning JavaScript: DOM Manipulation and CSS Styles

🚀 Day 8/21 – JavaScript DOM Project Built a Live Search Filter using JavaScript DOM manipulation. 🛠 Features implemented: ✅ Real-time search filtering ✅ Dynamic DOM updates on user input ✅ Case-insensitive search logic ✅ Improved user experience with instant results 💡 Key Learning: Using the input event and DOM manipulation makes it possible to build real-time interactive search features. #Day8 #JavaScript #DOM #FrontendDevelopment #LearnInPublic

Today I understood the working of a simple calculator using HTML, CSS, and JavaScript. When a user clicks a button, JavaScript captures the value and displays it on the screen. When "=" is clicked, the expression is evaluated and the result is shown. The "Clear" button resets everything. This helped me understand basic event handling and DOM manipulation in JavaScript. Learning step by step 🚀 #JavaScript #WebDevelopment #HTML #CSS #CodingPractice

I recently built a Real-Time Character Counter using HTML, CSS, and JavaScript. The text area updates the character count as the user types and prevents input beyond the maximum limit. This small project helped me practice JavaScript event handling and DOM manipulation. Feel free to check it out and use the code for learning. #JavaScript #WebDevelopment #HTML #CSS #LearningByDoing #CodingJourney Live demo link: https://lnkd.in/gHNBqfN2 Github repository link: https://lnkd.in/geS37Eia

Day 14/21 – Built an Image Slider using JavaScript Today I built a simple image slider using JavaScript. The idea was to allow users to navigate through images using Previous and Next buttons. When the user clicks Next, the slider moves to the next image. When the user clicks Previous, it goes back to the previous one. Concepts I practiced today: • JavaScript DOM manipulation • Handling button click events • Updating images dynamically • Basic slider logic using JavaScript • Combining HTML, CSS, and JavaScript together. This project helped me understand how JavaScript can control content changes and user interactions on a webpage. Learning and building consistently with #sheryianscodingschool 🚀 #Day14 #21DaysChallenge #JavaScript #FrontendDevelopment #WebDevelopment #BuildInPublic #LearningInPublic

Today I practiced generating my checkout page dynamically using JavaScript. Instead of writing all the HTML manually, I used JavaScript to create the elements and display products on the page. It made me realize how powerful the DOM is when building real applications. I also fixed a small but confusing bug with radio buttons. When I selected an option for one product, it affected other products too. I learned that radio buttons are grouped by their "name" attribute — so each product needs its own unique name. What I learned today: JavaScript can build your entire UI dynamically. Small bugs usually teach big lessons. Understanding how things work is more important than just making them work. Slowly but surely improving every day. #Day4OfTakingJavaScriptSeriously The radio selector input is the circle with black dot inside

Learn in Public – Day 5 🚀 Today I learned about checkbox inputs, label & for attribute, setAttribute(), loops (for...of), and deeper DOM manipulation in JavaScript. To apply these concepts, I built a Todos Application 📝 In this project I: • Dynamically created todo items • Added checkboxes and delete icons • Used arrays to manage tasks • Styled components using CSS border properties It feels great to move from small scripts to building structured mini-applications. Consistency. Clarity. Progress. 💪 Project Link 👇 https://lnkd.in/d8iy7Kh5 #JavaScript #WebDevelopment #LearnInPublic #100DaysOfCode

🔹Simon Says Memory Game using JavaScript! I recently built a Simon Says Memory Game using HTML, CSS, and JavaScript as part of strengthening my core JavaScript fundamentals 🎮 How to Play • Click start new to start. • Watch the color sequence carefully. • Click the colors in the exact same order. • Each level adds one new color to the sequence. • You must repeat all previous colors + the new one correctly. One wrong click = Game Over. This project helped me strengthen my understanding of DOM manipulation, event handling, and logic building in JavaScript. 🔗 Play here: https://lnkd.in/gu9FqmKG Comment your highest level below 👇 #JavaScript #WebDevelopment #FrontendDevelopment #LearningByBuilding #HTML #CSS

Today I practiced a small JavaScript program to change the background color when a button is clicked. When the button is pressed, JavaScript triggers a function that changes the page’s background color using DOM manipulation. This helped me understand: ✔ Event handling ✔ onclick function ✔ DOM manipulation ✔ How JavaScript interacts with HTML & CSS Small practice, better understanding 🚀 #JavaScript #WebDevelopment #Frontend #CodingPractice #LearningJourney

📚 Today I Learned: Scope Chain in JavaScript The scope chain in JavaScript is used to resolve variable values. When a variable is used, JavaScript looks for it in a specific order. 🔹 How it works: 1️⃣ JavaScript first checks the current scope. 2️⃣ If the variable is not found, it checks the outer (parent) scope. 3️⃣ This process continues until it reaches the global scope. 💻 Example: let a = 10; function outer() { let b = 20; function inner() { let c = 30; console.log(a, b, c); } inner(); } outer(); ✅ The inner() function can access c, b, and a because of the scope chain. #javascript #webdevelopment #frontenddeveloper #learninginpublic

🚀 Day 5/21 – JavaScript DOM Project Built a Random Quote Generator using JavaScript. Live Link: 🛠 Features implemented: ✅ Displays a random motivational quote ✅ Generates new quote on button click ✅ Uses JavaScript arrays and Math.random() ✅ Dynamic DOM updates 💡 Key Learning: Learned how to generate random values and update UI dynamically using DOM manipulation. #Day5 #JavaScript #DOM #FrontendDevelopment #LearnInPublic