ASMR JavaScript Svelte

🚀 20 Beginner Svelte Project Ideas

🧩 Foundational UI Projects

1. Counter App

   • A basic counter with increment, decrement, and reset buttons.
   • Practice: state, events, binding.

2. To-Do List

   • Add, check off, delete tasks. Store them in localStorage.
   • Practice: list rendering, reactivity, localStorage.

3. Theme Toggler

   • Toggle between light and dark modes.
   • Practice: class binding, localStorage.

4. Accordion/FAQ Component

   • Expand/collapse answers with animation.
   • Practice: conditional rendering, transitions.

5. Digital Clock

   • A live updating clock with hours, minutes, seconds.
   • Practice: lifecycle (onMount), setInterval.

📋 Form-Based Apps

6. Signup/Login Form

   • Simple form with validation and fake success message.
   • Practice: two-way binding, form validation.

7. BMI Calculator

   • Enter height and weight to calculate Body Mass Index.
   • Practice: reactive calculations.

8. Expense Tracker

   • Add expenses, list them, and show a total.
   • Practice: reactive arrays, formatting.

9. Unit Converter

   • Convert temperature (C/F), currency, or weight.
   • Practice: reactive inputs, select options.

10. Quiz App

• Show multiple-choice questions, score at the end.
• Practice: conditional rendering, component state.

🌐 Fetch & API Projects

11. Weather App (with OpenWeather API)

• Fetch and display weather by city name.
• Practice: fetch, API usage, error handling.

12. Random Quote Generator

• Get a new quote on button click.
• Practice: fetch, simple state update.

13. Image Search (Unsplash API)

• Input a term and show image results.
• Practice: API fetch, input binding, grid layout.

14. Crypto Price Tracker

• Show live prices of selected cryptocurrencies.
• Practice: polling APIs, formatting numbers.

15. GitHub Profile Viewer

• Enter a username and fetch public GitHub data.
• Practice: API handling, reusable components.

🎯 Interactive & Visual Projects

16. Drag & Drop List

• Rearrange items with drag and drop.
• Practice: events, state updates.

17. Pomodoro Timer

• Timer for focus sessions with start/pause/reset.
• Practice: intervals, time logic, styling.

18. Typing Speed Test

• Show a sentence, measure typing speed and accuracy.
• Practice: inputs, timers, key events.

19. Color Picker Tool

• Pick a color and see the hex/rgb preview.
• Practice: input type=color, reactive styling.

20. Markdown Previewer

• Textarea input that shows rendered Markdown below.
• Practice: third-party libraries, two-way binding.