💻 Just built a small card project using HTML, CSS & JavaScript! I recently created a simple UI project where users can fill a form to add new cards dynamically. Each card shows user info like name, hometown, and category — and everything is stored in localStorage so it stays even after refresh. It was a great learning experience for me to understand how data is saved, retrieved, and displayed using JavaScript DOM manipulation. Still improving it step by step — adding more features soon 🚀 If you’ve worked on something similar, I’d love to hear your thoughts or suggestions! https://lnkd.in/d2K-VUZQ #HTML #CSS #JavaScript #LearningByDoing #FrontendDevelopment
More Relevant Posts
-
🚀 Word & Character Counter using HTML, CSS, and JavaScript | Real-Time Text Analyzer 💻 I’ve built a simple yet interactive Word and Character Counter using HTML, CSS, and JavaScript 🎯 ✨ Features: 1. Real-time counting of words and characters 2. Animated heart effect ❤️ 3. Clean and responsive UI 4. Beginner-friendly logic using addEventListener() and DOM manipulation This project helped me improve my JavaScript event handling and string manipulation skills. Perfect for beginners learning front-end development and DOM interaction. 💡 Tech Stack: 🔸 HTML 🔸 CSS 🔸 JavaScript If you liked this mini project, drop a ❤️ and share your thoughts! #JavaScript #FrontendDevelopment #WebDevelopment #CodingProjects #HTML #CSS #LearningByDoing #Programmers #codeWithYousuf
To view or add a comment, sign in
-
🚀 Learning JavaScript DOM Manipulation through Projects To strengthen my understanding of JavaScript DOM Manipulation, I built 4 mini projects using HTML, CSS, and JavaScript 👇 🎨 1. Color Changer – Practiced selecting elements and changing background colors dynamically using querySelectorAll() and addEventListener() 📦 2. Amazon Shipping Calculator – Worked with input fields, conditional logic, and live updates using innerText 🖱️ 3. Custom Cursor – Learned to handle mousemove events and dynamically update element positions for creative effects ⌨️ 4. Live Character Counter – Built real-time interaction using keyup events to display text length instantly 💡 These projects helped me improve in: Selecting and modifying DOM elements Handling user events effectively Dynamically updating UI based on input Each project strengthened my core JavaScript and DOM skills, helping me turn logic into interactive web experiences. Excited to keep learning and building more! 💻 #JavaScript #WebDevelopment #FrontendDevelopment #DOMManipulation #LearningByDoing #HTML #CSS #FullStackDeveloper
To view or add a comment, sign in
-
🚀 Exploring JavaScript Events & CSS Styling Together! 🎨 Today, I created a small web page that demonstrates multiple JavaScript Events in action: ✨ Events used: onclick – Trigger an action when a button is clicked onmouseover & onmouseout – Change color when the mouse hovers over an element onfocus – Highlight an input field when focused onsubmit – Validate form input before submission onload – Display a message when the page loads onchange – Detect dropdown selection 🖌️ Styled with CSS gradients, shadows, and flexbox to make it visually appealing. 🔹 Key Learning: JavaScript events make web pages interactive and dynamic. Even small UI effects can improve user experience greatly. 💻 Languages Used: HTML, CSS, JavaScript 10000 Coders #JavaScript #HTML #CSS #WebDevelopment #Frontend #LearningByDoing #10000coders #PracticeProject #EventsInJavaScript #javascript #js #webdevelopment #programming #coding #frontend #backend #fullstack #webdev #javascriptdeveloper #html #css
To view or add a comment, sign in
-
I’ve just built a modern modal signup form using HTML, CSS, and JavaScript! 🎨✨ This project showcases how to create a popup signup form that appears smoothly on button click and validates user input before submission. ✅ Features: Interactive modal popup 💬 Password match validation 🔐 Clean and responsive UI 🌐 Real-time form output displayed below 🧾 This project helped me strengthen my understanding of DOM manipulation and form handling in JavaScript. 💡 It’s a small but powerful step toward mastering front-end interactivity! 🔗 Check it out on GitHub: https://lnkd.in/eXsXvR75 Special thanks to Pranshoo Rathore Sir for the continuous guidance and motivation 🙏 #HTML #CSS #JavaScript #FrontendDevelopment #WebDevelopment #CodingJourney #LearningEveryday
To view or add a comment, sign in
-
🕒 Just built a Simple Digital Clock using JavaScript! This small project helped me understand how to: ✅ Work with Date() objects in JavaScript ✅ Use setInterval() to update time every second ✅ Style elements using HTML & CSS ✅ Create a clean, responsive UI It’s a simple yet powerful way to learn how JavaScript interacts with the DOM and updates content dynamically. 💻 Tech Stack: HTML | CSS | JavaScript Excited to keep building more front-end projects! 🚀 #JavaScript #WebDevelopment #Frontend #Coding #LearningByDoing #HTML #CSS #DigitalClock #100DaysOfCode
To view or add a comment, sign in
-
Todo List Project using HTML, CSS & JavaScript 🚀 New Project Alert! In my latest video, I built a beautiful and functional Todo List App using HTML, CSS, and JavaScript 🎯 ✨ What you’ll learn in this project: ✅ How to design a responsive UI with CSS Flexbox & Gradients ✅ How to add, delete, and manage tasks dynamically using JavaScript ✅ How to use Local Storage to save todos — so your tasks stay even after page refresh ✅ How to create interactive features like checkboxes and strike-through effects 🧠 Concepts covered: DOM Manipulation Event Handling (click, onclick) Data Persistence with localStorage Dynamic Element Creation in JS 💻 Tech Stack: HTML | CSS | JavaScript [🔗https://lnkd.in/gAfu3Tt6 ] If you found it helpful, don’t forget to like, comment, and share to help others learn too! 🙌 #JavaScript #WebDevelopment #Frontend #Coding #HTML #CSS #Projects #Learning #TodoList#Manoj Kumar Reddy Parlapalli#10000 Coders
To view or add a comment, sign in
-
JavaScript Background Color Changer | HTML CSS JS Project | DOM Manipulation 🎨 Built a Background Color Changer using HTML, CSS, and JavaScript. With a single click, users can switch between multiple color themes like Dark Pink, White, Orange, and Blue — all using DOM manipulation and inline styling through JavaScript. 💡 Key Features: 1. Real-time background color change 2. Simple and interactive UI 3. Event handling using addEventListener() 4. Pure JavaScript (no libraries used) 👨💻 Tech Stack: HTML | CSS | JavaScript This project is perfect for beginners learning how to handle events and manipulate the DOM dynamically. 🚀 If you liked it, don’t forget to Like, Comment, and Follow for more such mini projects! #JavaScript #WebDevelopment #FrontendDevelopment #Coding #HTML #CSS #JSProjects #Programming #LearnJavaScript #Developer #PortfolioProject
To view or add a comment, sign in
-
Part 4 – JavaScript :- Add Logic and Interactivity 💠What is JavaScript? ➜ JavaScript (JS) is a programming language used to make web pages interactive and dynamic. While HTML structures the page and CSS styles it, JavaScript adds the “brain” — enabling your website to respond to user actions, process data, and perform logic. 💡 Think of JavaScript as the engine that makes your website come alive. 💠 Why Learn JavaScript? • Adds logic, animations, and interactivity • Can validate forms before submission • Powers dynamic content (e.g., live clocks, dropdowns, modals) • Used in frontend (browser) and backend (Node.js) 🧩 Basic Syntax :- <script> // Display a message alert("Welcome to JavaScript!"); </script> Output → Shows a popup message: “Welcome to JavaScript!” #JavaScript #WebDevelopment #FrontEnd #Programming #Learning #CareerGrowth #LinkedInLearning #Coding #WebDesign #HTML #CSS #Bootstrap
To view or add a comment, sign in
-
Day 68 of #100daysofcodechallnge Today, I practiced building a Movie Reviews App using HTML, CSS, and JavaScript 🎯 Task Overview: Added HTML elements inside the container with id movieReviewsContainer. Created: An input element (id="titleInput") for movie titles. A textarea (id="reviewTextarea") for reviews. A button (id="addBtn") to add the review. Dynamically displayed the reviews inside the container (id="reviewsContainer"). ⚙️ Functionality Achieved: When the Add button is clicked: ✅ If the movie title is empty → show an alert asking for the title. ✅ Otherwise → add the entered title and review to the reviews section. ✅ Finally, clear the input fields for the next entry. Each day I’m learning how to make web pages more interactive and user-friendly through JavaScript DOM manipulation. #CCBP #NxtWave #100DaysOfCode #WebDevelopment #HTML #CSS #JavaScript #CodingChallenge #FrontendDevelopment #LearnCoding #PracticeMakesPerfect #DevelopersCommunity #CodeEveryday #TechJourney #SoftwareDevelopment #CodingIsFun #BuildInPublic
To view or add a comment, sign in
-
: 🧠 Explanation (for your video) In this video, I created a simple Light and Dark Mode Toggle using HTML, CSS, and JavaScript. When the button is clicked, the background color and text color switch between light and dark themes dynamically. HTML defines the structure — it includes a heading and a button. CSS styles the page, centers the content, and adds color and shape to the button. JavaScript handles the functionality — when the user clicks the button, it changes the background, text color, and button label based on the mode. This project helps beginners understand how to connect HTML, CSS, and JS together to make an interactive web page. 💬 Comment (for posting or describing the project) 🚀 Light & Dark Mode Toggle using JavaScript A simple yet cool project that switches between light and dark themes with just one click! 🌗 This small project helped me practice DOM manipulation and event handling in JavaScript. #JavaScript #FrontendDevelopment #WebProjects #CodingJourney #LightDarkMode 10000 Coders Manoj Kumar Reddy Parlapalli Usha Sri
To view or add a comment, sign in
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
brother sharines coding school YT