diff --git a/Projects/1-Beginner/Password-Strength-Checker.md b/Projects/1-Beginner/Password-Strength-Checker.md new file mode 100644 index 000000000..4f394f5e1 --- /dev/null +++ b/Projects/1-Beginner/Password-Strength-Checker.md @@ -0,0 +1,39 @@ +# Password Strength Checker Idea + +**Tier:** 1-Beginner + +A web application that helps users create strong passwords by providing real-time feedback on password strength. + +## User Stories + +- [ ] User can enter a password into an input field +- [ ] User can see strength indicators as they type: + - Password length (minimum 8 characters) + - Contains uppercase letters + - Contains lowercase letters + - Contains numbers + - Contains special characters +- [ ] User can see the overall password strength rating (Weak, Medium, Strong) +- [ ] User receives real-time feedback as they type +- [ ] User can see suggestions for improving their password + +## Bonus features + +- [ ] User can generate a random strong password +- [ ] User can copy the password to clipboard with a button click +- [ ] User can see a password strength meter/bar that updates in real-time +- [ ] User can toggle password visibility (show/hide) +- [ ] User can see how long it would take to crack the password + +## Useful links and resources + +- [zxcvbn - Password Strength Estimation Library](https://github.com/dropbox/zxcvbn) +- [MDN Web Docs - Regular Expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions) +- [How to Create a Strong Password (Article)](https://www.security.org/how-secure-is-my-password/) +- [HTML DOM Input Password](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password) + +## Example projects + +- [Password Strength Checker with zxcvbn](https://codepen.io/preserveddarnell/pen/oNNQxQm) +- [Password Strength Meter](https://github.com/pascalbell/password-strength-meter) +- [React Password Strength Checker](https://github.com/mloureiro/react-password-strength) diff --git a/Projects/1-Beginner/Weather-Dashboard.md b/Projects/1-Beginner/Weather-Dashboard.md new file mode 100644 index 000000000..9840a5d6d --- /dev/null +++ b/Projects/1-Beginner/Weather-Dashboard.md @@ -0,0 +1,40 @@ +# Weather Dashboard + +**Tier:** 1-Beginner + +Create a weather dashboard that fetches and displays current weather conditions and forecasts for different cities. + +## User Stories + +- [ ] User can enter a city name to get weather information +- [ ] User can see the current temperature, humidity, wind speed, and weather conditions +- [ ] User can see a weather icon representing the current conditions +- [ ] User can see the location and current date/time +- [ ] User can view a 5-day weather forecast +- [ ] User can toggle between Celsius and Fahrenheit + +## Bonus features + +- [ ] User can see their current location's weather automatically using geolocation +- [ ] User can save favorite locations for quick access +- [ ] User can see sunrise and sunset times +- [ ] User can see an air quality index +- [ ] User can see weather alerts for severe conditions +- [ ] User can see hourly forecasts +- [ ] User can see animated weather icons +- [ ] User can see a map visualization of the weather + +## Useful links and resources + +- [OpenWeather API](https://openweathermap.org/api) - Free weather data API +- [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) +- [Weather Icons](https://erikflowers.github.io/weather-icons/) +- [localStorage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) +- [Chart.js](https://www.chartjs.org/) - For temperature graphs +- [Leaflet](https://leafletjs.com/) - For weather maps + +## Example projects + +- [Weather App with React](https://github.com/ayushkul/react-weather-app) +- [Vanilla JS Weather App](https://github.com/avinash-kr-pandey/Weather_app) +- [Weather Dashboard Demo](https://weather-dashboard.netlify.app/) \ No newline at end of file