Day-29 — News App using HTML, CSS, and JavaScript Hello Everyone: News App built with HTML, CSS, and JavaScript, which fetches and displays live news headlines from a real API. This project helped me take my JavaScript skills to the next level by learning how to integrate and handle real-time data from an external source. 🧩 Project Overview The main goal of this project was to create a simple and user-friendly interface where users can read the latest news from different categories like technology, sports, business, entertainment, and health — all dynamically fetched using JavaScript. It’s not just a static page; every headline, image, and description comes live from the News API, making it feel like a mini real-world product. ⚙️ Workflow and Logic Here’s how the app works step by step: API Connection: I used the free News API (https://newsapi.org/ ) to fetch real-time news data in JSON format. The fetch() function and async/await were used to make API calls clean and readable. Data Handling: After receiving the response, I parsed the JSON data and dynamically created HTML elements using JavaScript to show the image, title, and short description for each news item. Category Filtering: I added buttons for categories like “Sports,” “Technology,” and “Business.” When a user clicks a category, a new API call fetches the relevant news instantly. Responsive Design: Using CSS Flexbox and Grid, I made sure the layout adjusts perfectly across mobile, tablet, and desktop screens. Error Handling: I added simple error messages when the API fails to fetch data or when no news is found — ensuring a better user experience. 💡 What I Learned This project was a big step forward from simple DOM projects. I learned how to: Work with APIs and real-time JSON data Use async/await for asynchronous JavaScript Handle errors gracefully Dynamically generate content using template literals and DOM manipulation Create a responsive and professional layout using modern CSS techniques This project helped me understand how frontend and backend connect in real applications. It felt like building a real product for users rather than just a static webpage. 🚀 Technologies Used HTML5 – for structure CSS3 (Flexbox, Grid) – for layout and styling JavaScript (ES6) – for logic, API handling, and interactivity News API – for real-time content git- https://lnkd.in/gg8pTMVS I’m excited to move ahead with more real-world applications and strengthen my full-stack foundation! #JavaScript #WebDevelopment #API #Frontend #CodingJourney #29day #NewsApp #LearningByBuilding #HTML #CSS #AsyncAwait #TechLearner #100DaysOfCode Saurabh Shukla
Built a News App with HTML, CSS, and JavaScript
More Relevant Posts
-
🚀 JavaScript Basics — The Foundation of Modern Web Development If you’ve ever interacted with a dynamic website — from filling out a form to seeing instant search suggestions — chances are, JavaScript (JS) is behind it. 💡 What is JavaScript? JavaScript is a scripting language that adds interactivity, logic, and dynamic behavior to web pages. It works alongside HTML (structure) and CSS (styling) to bring websites to life. ⚙ How Do We Add JavaScript to a Web Page? We use the <script> tag to write or link JavaScript code in HTML. 🔹 Inline JavaScript — written directly inside an HTML element. 🔹 Internal JavaScript — written inside <script> tags within the HTML file. <script> console.log("Hello from internal JS"); </script> 🔹 External JavaScript — written in a separate .js file and linked to HTML. <script src="script.js"></script> ✅ Best Practice: Always use external JS for cleaner, maintainable code. 🧮 Variables in JavaScript Variables are containers for storing data values. ✅ Rules for Creating a Variable: Must start with a letter, underscore (_), or $ Cannot start with a number Are case-sensitive Should not use reserved keywords 🔑 Keywords to Declare Variables var let const 🧱 Understanding Each: 🔸 var Function-scoped or globally scoped Can be re-declared and updated Hoisted (accessible before declaration) ⚠ Drawback: Leads to unexpected behavior due to hoisting and re-declaration. 🔸 let Block-scoped Can be updated, but not re-declared in the same scope ⚠ Drawback: Cannot be accessed before initialization (temporal dead zone). 🔸 const Block-scoped Cannot be updated or re-declared ⚠ Drawback: The value assigned must be initialized immediately, and mutable objects can still be changed internally. 👉 Best Practice: Use const by default let when you know the value will change Avoid var in modern JS ⚙ JavaScript Operators Operators are symbols or keywords used to perform operations on values and variables. 🔹Arithmetic🔹Assignment 🔹Comparison🔹Logical 🔹TypeOf 🔹Ternary 🔹Comparison 💬 Comments in JavaScript Used to make your code readable and maintainable. Single-line comment: // This is a comment Multi-line comment: /* multi-line comment */ 🎯 String Literals (Backticks ``) Template literals allow: Multi-line strings String interpolation (embedding variables easily) Example: const name = "JavaScript"; console.log(Hello, ${name}!); 🧠 In Summary: JavaScript is the core language of the web, and understanding its basics — variables, scoping, and structure — sets the foundation for mastering advanced frameworks and tools. Thank You Ravi Siva Ram Teja Nagulavancha Sir Saketh Kallepu Sir Uppugundla Sairam Sir #JavaScript #WebDevelopment #Coding #Frontend #ProgrammingBasics #LearnToCode #TechCommunity
-
🌐 Understanding the DOM in JavaScript — The Foundation of Web Development If you’re a web developer (or aspiring to be one), mastering the DOM (Document Object Model) is essential. DOM is the invisible layer that connects your JavaScript logic to your HTML structure, allowing you to dynamically change anything on a webpage — content, color, layout, and even behavior. 🧠 What Is the DOM? DOM (Document Object Model) is a W3C standard that represents an HTML or XML document as a tree of objects. Every element on a webpage — from <div> and <p> to text or attributes — becomes a node in this tree. Each node can be accessed, modified, or removed using JavaScript. In simple terms: The DOM turns your HTML into a programmable structure that JavaScript can manipulate. 🌳 DOM Structure (DOM Tree) In HTML, everything is a node: Document Node: the root (<html>). Element Node: tags like <div>, <a>, <p>. Text Node: the text inside elements. (Bonus: Attribute Nodes & Comment Nodes exist too.) Each node follows parent–child relationships: A node has one parent (except the root). It can have multiple children or none. Nodes on the same level are siblings. You can access them with parentNode, childNodes, firstChild, or nextSibling. 🧭 Accessing the DOM You can reach DOM elements in two main ways: 🔹 Direct access document.getElementById('id') document.getElementsByTagName('div') document.getElementsByName('username') 🔹 Indirect traversal element.parentNode element.firstChild element.nextSibling ⚙️ Manipulating the DOM ✨ Create new elements const div = document.createElement('div'); div.textContent = 'Hello DOM!'; document.body.appendChild(div); 🗑️ Remove elements const el = document.getElementById('old'); el.parentNode.removeChild(el); 🧩 Common properties PropertyDescriptionidUnique identifierclassNameCSS class nameinnerHTMLHTML inside an elementtextContentOnly text inside an elementstyleInline CSS stylesvalueForm field value ⚡ DOM Events DOM events let you react to user actions (clicks, typing, loading, etc.). 1️⃣ Inline <button onclick="alert('Hi!')">Click me</button> 2️⃣ Directly via JavaScript button.onclick = () => alert('Hello!'); 3️⃣ Modern approach – addEventListener() button.addEventListener('click', () => alert('Clicked!')); 💡 Why DOM Matters DOM manipulation is the foundation of dynamic web behavior. Once you understand it, frameworks like React, Vue, or Angular become much easier to learn — because they’re all built on top of DOM principles. 💬 How did you first learn about the DOM? Share your experience in the comments below 👇 #JavaScript #WebDevelopment #Frontend #DOM #Coding #LearnToCode
-
JavaScript — The Language That Brings Websites to Life ⚡ Every great website is built on three core layers: 🧱 HTML defines the structure, 🎨 CSS defines the style, ⚡ JavaScript brings it to life. JavaScript isn’t just a programming language — it’s the backbone of modern web interactivity. It powers everything from simple animations to full-scale applications like Google Docs, YouTube, and modern dashboards. Let’s break it down 👇 🟨 1️⃣ What JavaScript Does JavaScript turns static web pages into dynamic experiences. It handles user actions, validates forms, loads data without reloading the page, and controls animations & UI behavior. 💡 Example: Clicking “Add to Cart” on an eCommerce site — JavaScript does that instantly without refreshing the page. 🟩 2️⃣ Why JavaScript Is So Important ✅ It runs natively in every browser — no setup needed. ✅ It’s flexible: works on both front-end (React, Vue, Next.js) and back-end (Node.js). ✅ It’s fast, event-driven, and integrates easily with APIs. ✅ It’s the base for advanced frameworks that power modern web apps. JavaScript isn’t just for developers — it’s how brands deliver better UX, speed, and functionality. 🟦 3️⃣ Frameworks & Ecosystem JavaScript’s ecosystem is massive. Here are the most popular tools shaping the modern web: ⚛️ React.js → Fast, component-based UIs 🔺 Next.js → SEO-friendly, server-rendered apps 🌐 Node.js → Server-side JS for APIs & scalable systems 🎨 GSAP & Three.js → For smooth animations and 3D web effects Together, these tools make web experiences richer, faster, and smarter. 🧠 4️⃣ Why Every Developer Should Learn It If you know JavaScript, you can: ✅ Build interactive websites ✅ Create web apps ✅ Work with APIs & databases ✅ Build mobile apps (React Native) ✅ Even automate tasks using JS-based tools It’s the one skill that connects frontend, backend, and automation. 💬 In Short: HTML gives a website a body. CSS gives it style. But JavaScript gives it a soul. ⚡ Whether you’re a freelancer, designer, or startup — mastering JavaScript means mastering the web. 🌍 👉 I help businesses and startups build fast, modern, and interactive websites using JavaScript, WordPress, and Webflow — designed to perform and scale. Let’s connect if you’re ready to bring your ideas to life 🚀 #JavaScript #WebDevelopment #Frontend #Coding #WebDesign #React #NodeJS #Freelancing #TechInsights #Learning #Programming
-
-
80% of developers appearing for front-end roles get tripped up & can't answer these 43 simple questions based on JavaScript Fundamentals, CSS, HTML, and React.... Maybe you will fail to answer them, too. Study them to become better. [1] What is CSS selector specificity and how does it work? [2] Explain the concept of "hoisting" in JavaScript [3] What is the event loop in JavaScript runtimes? [4] Explain how `this` works in JavaScript [5] Describe Block Formatting Context (BFC) and how it works. [6] Describe `z-index` and how stacking context is formed. [7] What kind of things must you be wary of when designing or developing for multilingual sites? [8] Explain CSS sprites, and how you would implement them on a page or site. [9] Explain how a browser determines what elements match a CSS selector. [10] Have you ever worked with retina graphics? [11] How do you serve a page with content in multiple languages? [12] How do you serve your pages for feature-constrained browsers? [13] How is responsive design different from adaptive design? [14] How would you approach fixing browser-specific styling issues? [15] Is there any reason you’d want to use `translate()` instead of `absolute` positioning, or vice-versa? And why? [16] What does a `DOCTYPE` do? [17] What's the difference between "resetting" and "normalizing" CSS? [18] Why would you use something like the `load` event? [19] What does re-rendering mean in React? [20] What are the differences between JavaScript ES2015 classes and ES5 function constructors? [21] Why does React recommend against mutating state? [22] What is `'use strict';` in JavaScript for? [23] Explain what React hydration is [24] Explain AJAX in as much detail as possible [25] What are React Portals used for? [26] What are the advantages and disadvantages of using AJAX? [27] How do you debug React applications? [28] What are the differences between `XMLHttpRequest` and `fetch()` in JavaScript and browsers? [29] How do you abort a web request using `AbortController` in JavaScript? [30] Explain the differences between CommonJS modules and ES modules in JavaScript [31] What are iterators and generators in JavaScript and what are they used for? [32] What are server-sent events? [33] What is virtual DOM in React? [34] How does virtual DOM in React work? What are its benefits and downsides? [35] What is React Fiber and how is it an improvement over the previous approach? [36] What tools and techniques do you use for debugging JavaScript code? [37] What is reconciliation in React? [38] How does JavaScript garbage collection work? [39] Explain how JSONP works (and how it's not really Ajax) [40] Explain the same-origin policy with regards to JavaScript [41] Explain what a single page app is and how to make one SEO-friendly [42] Explain why the following doesn't work as an IIFE: `function foo(){}();`. What needs to be changed to properly make it an IIFE? [43] When would you use `document.write()`?
-
✨ Elevate Your React/Tailwind Workflow: Why the cn Utility is a Game-Changer In modern React and Tailwind CSS, managing conditional, conflict-free class names is often a headache. Enter the cn utility function, popularized by shadcn/ui, which offers a powerful, elegant solution. What is the cn Utility? 🛠️ cn is a simple wrapper function that combines two key libraries for intelligent class management: clsx: Handles conditional logic. It allows you to pass in strings, arrays, and objects (for true/false conditions) to generate a class string. tailwind-merge: Handles conflict resolution. It intelligently merges Tailwind classes, ensuring the most specific utility (e.g., 'p-8' wins over 'p-4') is preserved, eliminating common styling bugs. The cn function handles both conditional logic and conflict resolution simultaneously! 👎 The Problem: Standard String Concatenation When assigning classes dynamically, developers often use template literals. This quickly becomes messy in complex cases, especially for components like the React Router DOM NavLink: JavaScript // Messy & Prone to Conflicts! <NavLink className={({ isActive }) => `base-classes ${isActive ? 'active-classes' : 'inactive-classes'} ${props.className}` } > ... </NavLink> 👍 The Solution: Using cn for Clean Code With cn, your component logic becomes vastly cleaner, safer, and more readable: JavaScript import { cn } from '@/lib/utils'; <NavLink className={({ isActive }) => cn( 'base-classes transition-colors', // 1. Base styles isActive ? 'bg-primary' : 'text-gray', // 2. Conditional state props.className // 3. External customizations (safely merged!) ) } > ... </NavLink> Key Benefits of Adopting cn 💪 Zero Tailwind Class Conflicts: The most crucial benefit. cn automatically resolves conflicts (e.g., text-red-500 vs. text-blue-500), guaranteeing consistent styling. Superior Readability: Avoids complex, hard-to-read template literals and nested ternaries. Effortless Conditionality: Pass objects for simple true/false class application: cn('base', { 'hidden': !isVisible }). Robust Customization: Easily merge external className props with internal component styles without risking overrides. The cn utility is a modern best practice. It ensures your UI remains robust, consistent, and easy to extend, leading to a much more productive developer experience. If you use React and Tailwind, this pattern is a must-have for a professional codebase. #React #TailwindCSS #FrontendDevelopment #WebDev #ShadcnUI
-
-
🔵 1️⃣ The Basics 🟢 HTML Semantic HTML Forms & Accessibility ARIA Roles 🟢 CSS Flexbox & Grid Responsive Design (Media Queries) Animations & Variables 🟢 JavaScript Closures, Promises, Async/Await Event Loop & Call Stack DOM Manipulation 💡 Example: const btn = document.querySelector("#clickMe"); btn.addEventListener("click", () => { const msg = document.createElement("p"); msg.textContent = "You clicked the button!"; document.body.appendChild(msg); }); 🧠 Interview Tip: Be ready to explain event bubbling and propagation. 🔵 2️⃣ Version Control & Build Tools 🟢 Git + GitHub/GitLab 🟢 npm / yarn 🟢 Webpack, Parcel, ESLint, Prettier 💡 ESLint Example: { "extends": ["eslint:recommended", "plugin:react/recommended"], "rules": { "no-unused-vars": "warn" } } 🧠 Why it matters: A clean codebase = professional discipline. 🔵 3️⃣ Frameworks & State Management 🟢 React (Hooks, Context, Routing) 🟢 Vue / Angular / Svelte 💡 React Example: useEffect(() => { const timer = setInterval(() => setCount(c => c + 1), 1000); return () => clearInterval(timer); }, []); 🧠 Key Insight: Hooks simplify lifecycle management. 🟢 Redux / Context API / Zustand 💡 State Example: const ThemeContext = React.createContext("dark"); const theme = React.useContext(ThemeContext); 🧠 Tip: Context helps avoid prop drilling. 🔵 4️⃣ Performance Optimization Code Splitting Lazy Loading Web Vitals (CLS, FID, LCP) 💡 React Lazy Loading: const Profile = React.lazy(() => import("./Profile")); 🧠 Pro Tip: Reduces initial bundle size — improves Core Web Vitals. 🔵 5️⃣ Advanced Concepts TypeScript GraphQL SSR / SSG (Next.js) PWA / WebAssembly 💡 TypeScript Example: interface User { id: number; name: string; } const greet = (u: User) => `Hello, ${u.name}`; 🧠 Why TypeScript: Fewer runtime bugs + better collaboration. 🔵 6️⃣ Deployment & CI/CD 🟢 Vercel / Netlify / Docker / GitHub Actions 💡 Example: name: Build & Deploy on: [push] jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - run: npm install && npm run build 🧠 Insight: Automate early — it builds DevOps maturity. 💬 Don’t Skip Soft Skills ✔ Communication & teamwork ✔ Problem-solving mindset ✔ Code reviews & clean commits ✔ Managing deadlines 🚀 Pro Advice: Learn → Build → Refine. HTML → Portfolio Page JS → To-Do App React → Weather / Chat App System Design → Scalable Dashboard 🤔 Unsure where to begin? Drop a comment or DM — let’s grow together! 👉 Follow Rahul R Jain for real-world React + JavaScript interview prep, hands-on coding insights, and frontend strategies that go beyond tutorials. #FrontendDeveloper #JavaScript #ReactJS #FrontendDevelopment #WebDevelopment #CodingInterview #NextJS #TypeScript #HTML #CSS #CleanCode #WebPerformance #FrontendEngineer #CareerGrowth #DeveloperCommunity #RahulJain #InterviewPrep #Programming
-
Today, I explored some fundamental yet powerful JavaScript concepts that form the backbone of real-world web development. 🧠 Console, Alert, and Prompt console.log(), error(), table() — perfect for debugging. alert() and prompt() are blocking; good only for quick demos. Always remove console logs in production for cleaner UX. ⚙️ Running JavaScript from Script Inline: <script>...</script> — executes immediately. External: <script src="app.js" defer></script> — best for performance. 🔁 Conditional Statements & Logical Operators if, else if, else control logic flow. Truthy & Falsy values: Falsy → false, 0, "", null, undefined, NaN Everything else is truthy. Logical operators: && → returns first falsy || → returns first truthy ?? → handles only null/undefined 🔀 Switch Statement Efficient for multiple discrete conditions: ```js switch (day) { case 'Mon': work(); break; case 'Sun': rest(); break; default: plan(); } ``` 🧩 Arrays & Methods Creating & accessing: ```js const arr = [10, 20, 30]; console.log(arr[1]); // 20 ``` Common methods: Mutating: push, pop, splice, shift, unshift, reverse Non-mutating: slice, concat, includes, indexOf ✅ Prefer non-mutating methods for predictable state. 🧮 Reference Types & Equality Arrays/objects compare by reference, not content. [1,2] === [1,2]; // false --> Use const for arrays to prevent reassignment (but mutation allowed). ➕ Intro to Multi-dimensional Arrays Arrays inside arrays — used for tables or grids: ```js const matrix = [[1,2],[3,4]]; console.log(matrix[1][0]); // 3 ``` 💡 Key Takeaways Use console smartly; avoid alerts in production. Defer or modularize scripts for speed. Understand truthy/falsy for clean conditions. Prefer immutable array operations. Use const for stable references. 🧭 Next in my Full Stack journey: Conditional logic, control flow patterns, and mastering iteration methods like map, filter, and reduce. #JavaScript #FullStackDeveloper #CodingJourney #100DaysOfCode #WebDevelopment #LearnInPublic
-
Understanding event.target in JavaScript: A Complete Guide Introduction When building interactive web pages, events play a crucial role — they allow JavaScript to respond to user actions like clicks, typing, hovering, or submitting forms. One of the most useful properties in event handling is event.target, which helps you identify exactly which element triggered an event. What Is event.target? The event.target property refers to the DOM element that initiated the event. In simpler terms: event.target is the element that the user interacted with — such as the button they clicked, the input they typed into, or the image they hovered over. It’s a property of the Event object, which the browser automatically passes into event handler functions. Syntax element.addEventListener("click", function(event) { console.log(event.target); }); event → the event object automatically created by the browser. event.target → the element that triggered the event. Example 1: Basic Usage <button>Click Me</button> <script> document.querySelector("button").addEventListener("click", function(event) { console.log("The clicked element is:", event.target); }); </script> Output (in console): <button>Click Me</button> In this example, clicking the button logs the button element because it’s the target of the click event. Example 2: Multiple Elements and Event Delegation Let’s say you have multiple buttons inside a container: <div id="container"> <button>Save</button> <button>Cancel</button> <button>Delete</button> </div> <script> document.getElementById("container").addEventListener("click", function(event) { console.log("You clicked:", event.target.textContent); }); </script> Button Clicked Console Output : Save You clicked: Save Cancel You clicked: Cancel Delete You clicked:Delete If you click on any button, the event handler logs that button’s text. Here’s what happens: The event listener is attached to the container (div), not to each button individually. When you click a button, the event bubbles up to the container. event.target identifies which specific button was clicked. This technique is called event delegation — it improves performance and code simplicity.
-
Day 21 of my #100DaysofCodeChallenge – Random Joke Generator App Today’s project was all about fun + functionality! I built a Random Joke Generator App using HTML, CSS, and JavaScript, and I learned how to make web pages speak, fetch live data from APIs, and copy content to clipboard — all in one project. Let me explain everything simply 👇 💡 What This App Does: Whenever you click on the “Get Joke” button, it instantly fetches a random joke from a Joke API and displays it on the screen. You can also: Click “Speak” → to hear the joke aloud using the browser’s voice (Text-to-Speech feature). Click “Copy” → to copy the joke text to your clipboard and share it anywhere. It’s a perfect blend of humor and JavaScript power! 🧠 What I Learned: 1️⃣ Fetching Data from an API: I used the fetch() method in JavaScript to get jokes from an online API (https://v2.jokeapi.dev). It returns a random joke in JSON format. Then I displayed that joke dynamically using innerText. 2️⃣ Understanding Async & Await: These keywords make JavaScript handle API calls smoothly — no freezing or waiting. async function lets us write asynchronous code, and await pauses it until data arrives. 3️⃣ DOM Manipulation: By selecting elements using getElementById, I controlled the text and buttons directly from JavaScript — making the page interactive and responsive. 4️⃣ Speech Synthesis API (Text to Speech): This was the most exciting part! I learned how browsers can actually speak using: let utterance = new SpeechSynthesisUtterance(jokeText.innerText); speechSynthesis.speak(utterance); This converts the joke into voice output — amazing, right? 5️⃣ Clipboard API: With one line, I added a feature to copy text directly to the clipboard: navigator.clipboard.writeText(jokeText.innerText); This makes it super easy to share your favorite jokes instantly. 🎨 Styling the App: I used CSS gradients, hover effects, and box shadows to make it look modern and clean. It’s simple, colorful, and gives a fun vibe — perfect for a joke app. 🚀 Key Skills Practiced: JavaScript API integration Async/Await for asynchronous programming Speech Synthesis API for voice output Clipboard API for text copying Dynamic DOM updates UI design using CSS Flexbox and Gradients 🌱 My Takeaway: Small projects like this teach real development concepts while keeping the process exciting. When you see your code making the browser talk — that’s when coding becomes truly magical ✨ 💬 Let’s Connect: I’d love to know — what’s the funniest project you’ve ever built? Drop your thoughts or ideas below! 👇 🏷️ Hashtags for Reach: #Day21 #100DaysOfCode #JavaScript #WebDevelopment #Frontend #CodingJourney #LearningByBuilding #APIs #SpeechSynthesis #ClipboardAPI #CodingCommunity #DeveloperJourney #TechLearning #CodeNewbie #HTMLCSSJS #DailyCoding Saurabh Shukla git - https://lnkd.in/gDJ9jrFJ
-
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