Read on Twitter
Building projects is how you *actually* learn front-end development.
So here& #39;s 5 project ideas you can use and build with Vanilla JavaScript or your favourite framework
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🧵" title="Thread" aria-label="Emoji: Thread">https://abs.twimg.com/emoji/v2/... draggable="false" alt="👇" title="Rückhand Zeigefinger nach unten" aria-label="Emoji: Rückhand Zeigefinger nach unten">
So here& #39;s 5 project ideas you can use and build with Vanilla JavaScript or your favourite framework
1. Todolist App
There& #39;s a reason this project is a classic. It teaches you a lot of fundamentals like working with arrays, handling user input, and displaying stuff on the screen. Focus on basic functionality like adding items and marking them as done, maybe with animationshttps://abs.twimg.com/emoji/v2/... draggable="false" alt="👍" title="Daumen hoch" aria-label="Emoji: Daumen hoch">
There& #39;s a reason this project is a classic. It teaches you a lot of fundamentals like working with arrays, handling user input, and displaying stuff on the screen. Focus on basic functionality like adding items and marking them as done, maybe with animations
2. Weather app
Use a service like https://openweathermap.org/api ">https://openweathermap.org/api"... to retrieve weather data and display it. You can add as many details as you like, and maybe even adjust the background depending on the current weather conditions. The sky is the limit here!https://abs.twimg.com/emoji/v2/... draggable="false" alt="🌤" title="Sonne mit kleiner Wolke" aria-label="Emoji: Sonne mit kleiner Wolke">
Use a service like https://openweathermap.org/api ">https://openweathermap.org/api"... to retrieve weather data and display it. You can add as many details as you like, and maybe even adjust the background depending on the current weather conditions. The sky is the limit here!
3. Dad-joke generator
Hit up an API like https://icanhazdadjoke.com/api ">https://icanhazdadjoke.com/api"... and show one or more jokes to the user. Add "reroll" functionality to fetch new jokes. For an extra challenge, disable the button when a joke is being fetched, and display a loading state for better UXhttps://abs.twimg.com/emoji/v2/... draggable="false" alt="🔥" title="Feuer" aria-label="Emoji: Feuer">
Hit up an API like https://icanhazdadjoke.com/api ">https://icanhazdadjoke.com/api"... and show one or more jokes to the user. Add "reroll" functionality to fetch new jokes. For an extra challenge, disable the button when a joke is being fetched, and display a loading state for better UX
4. Movie app
Allow the user to search for movies. You can also add category searching, to only display movies related to a certain category. Consider adding "watchlist" functionality for users to add movies to their future watch list, and save it in LocalStoragehttps://abs.twimg.com/emoji/v2/... draggable="false" alt="🎬" title="Filmklappe" aria-label="Emoji: Filmklappe">
Allow the user to search for movies. You can also add category searching, to only display movies related to a certain category. Consider adding "watchlist" functionality for users to add movies to their future watch list, and save it in LocalStorage
5. Countdown timer
Allow the user to select a date, and then display a countdown until that date. Make the countdown display at least days, hours, minutes and seconds (maybe even weeks or months). To get fancy, add fireworks when the countdown runs outhttps://abs.twimg.com/emoji/v2/... draggable="false" alt="🎆" title="Feuerwerk" aria-label="Emoji: Feuerwerk">
Allow the user to select a date, and then display a countdown until that date. Make the countdown display at least days, hours, minutes and seconds (maybe even weeks or months). To get fancy, add fireworks when the countdown runs out
