CEG Tech Forum - Techops Student Director Recruitment 2023-24

Task #1 - Frontend Development

Create a weather report web application with the following constraints

• You can use HTML, CSS, JavaScript. Frameworks and libraries like Next.js, React, Angular, Bootstrap, jQuery, etc. are preferred.
• Required components are Input modes and Weather report.
• Use Open Weather Map API or any other free weather API for this task.
• Input modes ⇒ There should be a search input bar for giving the place (location name) and coordinate number input bars for giving the coordinates. Either of these must be able to be used to give user input.
• Weather report ⇒ The weather report (weather details can be as you wish) for the given place should be displayed in a concise and visually appealing manner.
• Push your code to GitHub/GitLab.
• Attach screenshots/recordings of your app in the submission.
• Host the application in any free hosting platforms like Netlify, GitHub Pages etc.

Tech Stack Used

• React.js
• Styling in Vanilla CSS
• Weather API - WeatherAPI
• Hosting - Vercel

Screenshots

Change browser theme settings to see the light/dark theme as theme will be set according to the browser theme.

Light Mode

Dark Mode

Click on the link below to see my figma design file.

Figma

Live Demo

Cloud Guru - Weather App