Headline: 📈 Small Projects, Big Progress. From static HTML pages to dynamic, state-driven interfaces. This To-Do app was a fun way to practice Clean Code principles in Vanilla JS. Key Features: ✅ Add tasks via button or keyboard. ✅ Individual task deletion. ✅ Clean, centered UI for better focus. Next step? Adding LocalStorage so the tasks persist even after a page refresh! 🔄 #LearnToCode #JavaScript #DeveloperJourney #WebDev #PortfolioProject
More Relevant Posts
-
Built a to-do app with a glassmorphic UI as a mini project. Kept it simple — vanilla HTML, CSS, and JS. No frameworks. A few things I learned along the way: — Local Storage API to persist tasks on refresh — DOM manipulation with vanilla JS — How CSS backdrop-filter actually works for the glass effect — JSON.stringify and JSON.parse for saving arrays Small project but learned a lot from it. More coming. repo link: https://lnkd.in/dEtj35Us #WebDev #JavaScript #Frontend #BuildInPublic
To view or add a comment, sign in
-
-
Built a real DOM-based project today......a To-Do List And honestly, it taught me more than I expected. Here’s what it does: - You can type a task and add it using a button - Or simply press Enter on the keyboard to add it instantly - Each task gets added dynamically to the list - Task counters update in real time (In Progress + Completed) - You can delete tasks anytime - You can also mark tasks as completed and track progress What seemed like a “simple project” actually pushed me to understand how everything connects behind the scenes: - How DOM updates work in real time - How events like clicks and keyboard inputs interact with JavaScript - How dynamic UI changes without refreshing the page Even a basic To-Do app contains the core logic of real-world applications. Small steps. Real understanding. Constant building. 💻🔥 #WebDevelopment #JavaScript #DOM #FrontendDevelopment #BuildInPublic
To view or add a comment, sign in
-
My React component was re-rendering again and again… 😅 And then I realized — it’s not random. 💡 In React: A component re-renders when: • State changes • Props change • Parent component re-renders 🧠 Simple example: const [count, setCount] = useState(0); 👉 setCount() → triggers re-render ⚠️ What I was doing wrong: Creating new functions & objects on every render <button onClick={() => handleClick()} /> 👉 New reference every time ❌ 👉 Causes unnecessary re-renders 💡 How I fixed it: • useCallback → memoize functions • React.memo → prevent child re-renders • Avoid inline objects/functions ✅ Result: • Fewer re-renders • Better performance • More predictable UI 🔥 What I learned: React re-renders are predictable 👉 You just need to understand the triggers #ReactJS #FrontendDeveloper #JavaScript #ReactInterview #CodingTips #WebDevelopment
To view or add a comment, sign in
-
Just built a Todo App using Vanilla JavaScript! Key Features: ->Add, edit and delete tasks dynamically ->Reorder tasks with up/down buttons ->Persistent storage using localStorage ->Auto-display of tasks with date & time ->Efficient event handling using event delegation This project helped me strengthen my DOM manipulation, JavaScript logic, and web storage skills. Todo Website: https://lnkd.in/e6y7QmAb Check it out on GitHub: https://lnkd.in/eQjqyHwh #JavaScript #WebDevelopment #Frontend #TodoApp #Coding
To view or add a comment, sign in
-
Day 25 of my JavaScript journey 🚀 Built a Recipe Finder App using HTML, CSS, and JavaScript, powered by an external API. Features: 🍽️ Search recipes dynamically 🌐 Fetch data from TheMealDB API 📄 Display recipe details in real-time ✨ Interactive and user-friendly UI This project helped me understand how to work with APIs, handle asynchronous JavaScript, and build real-world applications. 🔗 Live Demo: https://lnkd.in/gSAAATzM 💻 GitHub Repo: https://lnkd.in/gBQmmBYJ Moving beyond basic projects and building applications that interact with real data. 💻 #JavaScript #WebDevelopment #FrontendDeveloper #100DaysOfCode #CodingJourney #API
To view or add a comment, sign in
-
This is my Simple GitHub Issue Tracker Project! Key Features: • Login Functionality using Only JS. • Seamless switching between All, Open and Closed. • Show Issue Modal when Clicked Each Issue. • Added Search Functionaliy. • Clean, responsive, and user-friendly interface. This project helped me strengthen my JavaScript logic and UI handling skills. More improvements coming soon! Project Live Link: https://lnkd.in/g5vXKzma #WebDevelopment #JavaScript #Frontend #LearningJourney
To view or add a comment, sign in
-
-
I used to think “team generators” were simple… until I tried building one myself. Took a basic idea: 👉 Enter names 👉 Generate teams OR pick a random name And turned it into a working web app using JavaScript. Sounds easy, but I ran into real problems: Handling user input properly (empty lines were a mess) Figuring out how to split names into balanced teams Debugging weird issues (like functions not running because of this) Making the UI actually display results dynamically Built using: • HTML • CSS (Flexbox) • JavaScript (DOM manipulation, events, arrays) This project helped me understand how small ideas turn into real logic + real bugs. Next step: building something more complex (maybe with APIs). Code on GitHub: https://lnkd.in/dPEYSnqU #JavaScript #WebDevelopment #Frontend #LearningByDoing #100DaysOfCode
To view or add a comment, sign in
-
I Just built and deployed a Weather App 🌤️ This project helped me understand how to work with APIs and handle real-time data using JavaScript… Features include: • Search weather by city • Real-time temperature and conditions • Weather icons • Clean and responsive UI (though basic) Try it here: 👉 https://lnkd.in/ea_SveTQ View code: 👉 https://lnkd.in/ervqjNiN More projects coming — currently building and improving daily 🚀 #FrontendDeveloper #JavaScript #WebDevelopment #BuildInPublic
To view or add a comment, sign in
-
Day 1 of #100DaysOfJavaScript 🚀 Today I built a simple Counter App using JavaScript. 🔧 Features: • Increment the number • Decrement the number • Reset back to zero 📚 What I learned: • DOM manipulation • Handling button click events • Updating UI dynamically with JavaScript ⚡ Challenges: Understanding how to properly update values in the DOM without refreshing the page. 🎯 Goal for tomorrow: Build another small interactive project and improve logic building. Starting small, but staying consistent 💪 #JavaScript #100DaysOfCode #WebDevelopment #CodingJourney #LearnInPublic
To view or add a comment, sign in
-
I used to think performance optimization is for advanced developers… So I ignored it. Focused only on building features. But during one project, I noticed: Slow loading Unnecessary re-renders Heavy components That’s when it clicked. 👉 Performance is not optional anymore Now I focus on: • Smaller components • Optimized rendering • Clean logic The biggest learning: A fast app is always better than a complex one. What do you prioritize more: Features or performance? #ReactJS #WebPerformance #FrontendDeveloper #JavaScript
To view or add a comment, sign in
Explore related topics
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