Developed JS Mini Projects: Faulty Calculator and Boxes Color Project

🪄 JavaScript — The Language That Brings Webpages to Life! JavaScript isn’t just a programming language — it’s the magic that makes websites interactive ✨ Let’s break it down in simple terms 👇 1️⃣ What is JavaScript? It’s a scripting language used to add functionality and interactivity to web pages — like buttons that react, pop-ups that appear, and forms that validate input. 2️⃣ Where It Runs: JavaScript runs inside the browser, making it a client-side language. (Though now, with Node.js, it can also run on servers too 🖥️) 3️⃣ Why It’s Important: Without JavaScript, web pages would just be static — like reading a printed page online. With it, they become dynamic — like a live conversation between you and the site 💬 4️⃣ What It Can Do: ✅ Handle events (clicks, inputs, etc.) ✅ Change HTML and CSS in real-time ✅ Fetch data from servers ✅ Build entire web applications 🌐 5️⃣ Example: document.querySelector("button").addEventListener("click", () => { alert("Hello, World!"); }); Just a few lines — and your webpage starts talking back to you 😄 💬 Every great developer starts here — by understanding how JS turns ideas into interactions. #JavaScript #WebDevelopment #CodingJourney #LearnToCode #FrontendDevelopment #ProgrammingBasics

Day 2 - Web Development Learning Progress (JavaScript DOM Manipulation) Today, I continued developing my front-end skills by working on a JavaScript DOM project focused on dynamic UI updates and data-driven rendering. Key Concepts Learned : • Selecting and updating DOM elements using querySelector() • Handling click events with addEventListener() • Structuring data using arrays of objects • Dynamically updating text, colors, and styles • Improving UI logic using event-driven programming Understanding Randomization in JavaScript to generate a random IPL team on each button press, I used: 1. Math.random(): Generates a floating-point number between 0 (inclusive) and 1 (exclusive). I used it to create random indexes for selecting teams from the array. 2. Math.floor(): Converts the decimal value from Math.random() * arrayLength into a whole number. This ensures the index is valid and always within the bounds of the array. Together, these functions helped me implement controlled randomness in the project. #SheryiansCodingSchool #Cohort2 #JavaScript #DOM #WebDevelopment #FrontEndDevelopment #LearningInPublic #ProfessionalDevelopment #SoftwareEngineering #SarthakSharma #BrahamDutt

Today’s session was all about JavaScript, and it opened up a whole new side of web development for us! 💻 We learned that JavaScript isn’t just another programming language — it’s what makes web pages come alive. It was first created in 1995 to make websites more interactive, and even today, it’s the backbone of almost every modern web application. 🌍 💡 Here’s what we covered: 🔹 What JavaScript is and why it’s so important 🔹 How to use console.log, alert, and error for debugging and interaction 🔹 Practiced some basic arithmetic operations 🔹 Understood how JavaScript helps us display dynamic data — like showing live updates, user info, or real-time content on a webpage It’s amazing to see how JavaScript connects the front end to live data, making websites more smart and interactive. 🙌 Big thanks to our mentor Srujana Vattamwar & Frontlines EduTech (FLM) for guiding me! 🙏 #JavaScript #WebDevelopment #CSS #Flexbox #HTML #Bootstrap #ReactJS #LearningJourney #VibeCoding #FrontlinesEduTech #UpgradingMyself #WebDesign #FrontendDevelopment

🚀 Beginner JavaScript Project: Tip Calculator 💰 I’ve just completed a simple yet useful Tip Calculator as part of my JavaScript learning journey! This project helped me understand key JS concepts such as: 🔹 DOM Manipulation (getting values, updating elements) 🔹 Event Handling (click events for buttons) 🔹 Conditional Statements and Validation (isNaN, input checks) 🔹 Basic Arithmetic Logic and Dynamic UI Updates 💻 Features I added: ✅ Calculates tip, total, and per-person amount ✅ Inline error messages for invalid inputs (no alerts!) ✅ Quick tip selection buttons (5%, 10%, 15%, 20%) ✅ Reset functionality for a clean user experience 🧠 This project strengthened my understanding of core JavaScript logic and how to make small web tools interactive. 🔗 Live Project: https://lnkd.in/g-Fq7fTR Learning one small project at a time is a great way to build confidence and skill in JavaScript. On to the next one! 💪 #JavaScript #WebDevelopment #BeginnersProjects #LearningByDoing #MERNstack #FrontendDevelopment #CodingJourney#EntriElevate

JavaScript Getters and Setters 🛡️🔑 Elevate your JavaScript game! 🚀 Just saw this code snippet illustrating the power of Getters and Setters in a User class. They are essential for writing robust, maintainable code! Getters are special methods that allow you to access a property, but they can execute custom logic before returning the value. Notice how the get email() method returns "Chai be..." in the example! ☕ This is a great way to: Return calculated values. Format the output. Intercept access (as shown in the code for password(), which returns "Hutt be..." instead of the actual value! 🤫). Setters are special methods that allow you to control how a property is assigned a value. They're critical for: Validation (e.g., ensuring an email is valid). ✅ Data transformation before storage. Logging changes. ✍️ This design pattern helps in Encapsulation—bundling the data (properties) and the methods (getters/setters) that operate on that data, protecting the data from direct, uncontrolled modification. 🧱 The output shows the magic! ✨ Even though the constructor sets a real password, accessing u.password after the class is defined runs the get password() method, revealing the custom string "Hutt be..."! This is how you abstract and protect data! Mastering these concepts is key to writing clean, maintainable, and robust Object-Oriented Programming (OOP) in JavaScript. What's your favorite use case for JS getters/setters? Let me know in the comments! 👇 #JavaScript #OOP #GettersAndSetters #WebDevelopment #ProgrammingTips #Coding #CleanCode

Built My 5th Project in JavaScript – 𝗤𝗨𝗜𝗭 𝗔𝗣𝗣 Once again, gained a lot of confidence in JavaScript — and this project was pure fun to build ! Let’s discuss the craft of the project: ➜ The quiz begins when the user clicks Start, and the first question appears. ➜ The user selects an answer, then clicks Next to move forward. ➜ This process repeats for all questions until the quiz ends. ➜ Once all questions are answered, the Result screen appears showing the score. ➜ Finally, clicking Restart resets everything and brings the quiz back to Start. 🧩ᴛʜᴇ ᴘʀᴏᴊᴇᴄᴛ ᴡᴀꜱ ᴄʀᴀꜰᴛᴇᴅ ꜱᴛᴇᴘ ʙʏ ꜱᴛᴇᴘ:  𝗕𝗹𝗼𝗰𝗸 1: Defined an array of objects for storing questions, choices, and correct answers.  𝗕𝗹𝗼𝗰𝗸 2: Managed quiz progress using currentQuestionIndex to track questions and score to record correct answers.  𝗕𝗹𝗼𝗰𝗸 3: Added an event listener to the Start button to begin the quiz.  𝗕𝗹𝗼𝗰𝗸 4: Controlled visibility of sections when the quiz starts.  𝗕𝗹𝗼𝗰𝗸 5: Displayed each question dynamically using textContent and forEach() for looping through choices.  𝗕𝗹𝗼𝗰𝗸 6: Implemented logic to check answers and update the score.  𝗕𝗹𝗼𝗰𝗸 7: Managed flow to move between questions or show results.  𝗕𝗹𝗼𝗰𝗸 8: Displayed the final result with the score summary.  𝗕𝗹𝗼𝗰𝗸 9: Restarted the quiz to loop the experience again. Stay connected with Malik Arslan ⭐ . . . . #JavaScript #WebDevelopment #FrontendDevelopment #LearningByBuilding #CodingJourney #DOMManipulation #LocalStorage #Projects #ContinuousLearning #ProgrammersLife

This is MY STORY 😊 I used to believe that HTML, CSS, and JavaScript were the three PROGRAMMING languages you needed to master to become a Front-End Developer. After finally wrapping my head around HTML, someone asked me what programming languages I knew. I proudly replied, "HTML and I'm progressing to CSS"😂. That’s when I was gently informed that a front-end developer really only needs one programming language which is JavaScript 🤯 and 2 other languages which are HTML and CSS. (More details are in my previous post!) My next question was, “So what about Bootstrap, React, and jQuery? Where do they fit in?” 🤔 That’s when I got introduced to these words 👇 LIBRARIES and FRAMEWORKS 😍 I came to understand that: 👉 CSS has its own Libraries and Frameworks 👉 JavaScript also has Libraries and Frameworks And what about HTML? 😂 Yeah, I know that’s your next question! So I asked too. [ANSWER LOADING....] So, I immediately sketched all I was told, so I don't forget☺️. I am saving it here today, because it has really saved me. #CodingJourney #FrontendDevelopment #WebDevelopment #JavaScript #CSS #HTML #TechLearning #DeveloperCommunity #CareerInTech

Web Development with vibe coding : JavaScript : Day-1: JavaScript is one of the most powerful and widely used programming languages in web development. It adds interactivity and dynamic behavior to websites — making static pages come alive! ✨ Why We Use JavaScript: To create interactive and responsive web pages. To handle user actions like clicks, inputs, and events. To build web apps, mobile apps, and even backend servers (using Node.js). Brief History about JavaScript : JavaScript was developed in 1995 by Brendan Eich at Netscape. Originally called LiveScript, it was later renamed to JavaScript. Over the years, it has evolved with modern frameworks like React, Angular, and Vue.js — becoming a core technology of the web alongside HTML and CSS. Advantages of JavaScript: 1. Runs directly in the browser without installation. 2. Easy to learn and beginner-friendly. 3. Supported by all major browsers. 4. Huge community and countless libraries. 5. Can be used for both frontend and backend development. What is the Console? The JavaScript console is a developer tool available in browsers (like Chrome DevTools) that allows you to write, test, and debug code directly. You can display outputs using console.log() — perfect for learning and debugging your scripts. Ex: console.log("Hello sree welcome to new page "); Thank you mentor # SrujanaVattamwar, #flm #Frontlinesmedia #Frontlinesedutech #WebDevelopment

⚡ 10 𝐝𝐚𝐲𝐬. 𝐎𝐧𝐞 𝐝𝐞𝐯𝐞𝐥𝐨𝐩𝐞𝐫. 𝐀 𝐥𝐚𝐧𝐠𝐮𝐚𝐠𝐞 𝐭𝐡𝐚𝐭 𝐜𝐡𝐚𝐧𝐠𝐞𝐝 𝐭𝐡𝐞 𝐞𝐧𝐭𝐢𝐫𝐞 𝐢𝐧𝐭𝐞𝐫𝐧𝐞𝐭. 🕰️ There was a time when websites were nothing more than digital brochures. No motion. No interaction. No logic. In 1995, 𝐁𝐫𝐞𝐧𝐝𝐚𝐧 𝐄𝐢𝐜𝐡 was hired by 𝐍𝐞𝐭𝐬𝐜𝐚𝐩𝐞. Netscape needed a new scripting language for the browser — one that was: ✔️ Simpler than Java ✔️ Easy enough for non-programmers ✔️ Able to make the web interactive Then came the “impossible” task: ➡️ “𝐂𝐫𝐞𝐚𝐭𝐞 𝐚 𝐛𝐫𝐨𝐰𝐬𝐞𝐫 𝐬𝐜𝐫𝐢𝐩𝐭𝐢𝐧𝐠 𝐥𝐚𝐧𝐠𝐮𝐚𝐠𝐞 𝐢𝐧 𝐣𝐮𝐬𝐭 10 𝐝𝐚𝐲𝐬.” Brendan accepted the challenge. In just 10 days, he built 𝐌𝐨𝐜𝐡𝐚 — the first version of JavaScript. Later, its name changed from Mocha to LiveScript and then 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭. And everything changed. 💡 JavaScript gave life to the web. 👉 Buttons reacted 👉 Forms validated 👉 Animations breathed 🌐 And the internet finally became interactive ✨ 𝐈𝐧𝐧𝐨𝐯𝐚𝐭𝐢𝐨𝐧 often starts with a challenge no one wants… and someone bold enough to say, “Let’s do it.” 🤔 Question: Which “impossible” technology today do you think will become reality tomorrow? 👉To learn more follow JavaScript Mastery #JavaScript #WebDevelopment #Innovation #TechRevolution #Learning #CodingJourney