This is a solution to the Weather app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Note: Delete this note and update the table of contents based on what sections you keep.
Users should be able to:
- Search for weather information by entering a location in the search bar
- View current weather conditions including temperature, weather icon, and location details
- See additional weather metrics like "feels like" temperature, humidity percentage, wind speed, and precipitation amounts
- Browse a 7-day weather forecast with daily high/low temperatures and weather icons
- View an hourly forecast showing temperature changes throughout the day
- Switch between different days of the week using the day selector in the hourly forecast section
- Toggle between Imperial and Metric measurement units via the units dropdown
- Switch between specific temperature units (Celsius and Fahrenheit) and measurement units for wind speed (km/h and mph) and precipitation (millimeters) via the units dropdown
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
Add a screenshot of your solution. The easiest way to do this is to use Firefox to view your project, right-click the page and select "Take a Screenshot". You can choose either a full-height screenshot or a cropped one based on how long the page is. If it's very long, it might be best to crop it.
Alternatively, you can use a tool like FireShot to take the screenshot. FireShot has a free option, so you don't need to purchase it.
Then crop/optimize/edit your image however you like, add it to your project, and update the file path in the image above.
Note: Delete this note and the paragraphs above when you add your screenshot. If you prefer not to add a screenshot, feel free to remove this entire section.
- Solution URL: Add solution URL here
- Live Site URL: Add live site URL here
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- React - JS library
Use this section to recap over some of your major learnings while working through this project. Writing these out and providing code samples of areas you want to highlight is a great way to reinforce your own knowledge.
To see how you can add code snippets, see below:
<h1>Some HTML code I'm proud of</h1>.proud-of-this-css {
color: papayawhip;
}const proudOfThisFunc = () => {
console.log('🎉')
}If you want more help with writing markdown, we'd recommend checking out The Markdown Guide to learn more.
I'm actually proud of this entire project, because I wasn't aware of this Hackathon until around September 15th, so I had half the time allotted to complete this whole complicated project. I essentially had to relearn React because I knew I wanted to use it for this project, but hadn't coded a proper project in a really long time due to time constraints. So even though it's not perfect and there's things I would've improved given more time, I'm still super proud of how this turned out.
I always really struggle with Accessibility when I'm building projects. It's difficult to find a definitive answer on a lot of my questions, but it's something that I always try to be focused on and improve upon (even if I fall short of the mark).
I'd also like to work on improving my CSS to make it a bit cleaner. In particular, I really need to learn Grid, because I would've loved to use it on this project, but I'm not familiar enough with it to use it on a project I need to build quickly.
- Scrimba's React Course(https://scrimba.com/learn-react-c0e) - I knew I wanted to build this project using React, but it had been about a year since I'd built anything, so I definitely needed a refresher. I ended up redoing almost this entire Scrimba course as I built this Weather app, which helped me immeasurably.
- Website - Lesley Wesley (https://github.com/LesleyWesley)
- Frontend Mentor - @LesleyWesley (https://www.frontendmentor.io/profile/LesleyWesley)