CHAPTER 1

1
INTRODUCTION

2
 WEATHER FORECASTING WEBSITE

1. INTRODUCTION

Weather impacts nearly every aspect of our lives, from planning outdoor activities to making
crucial decisions in industries such as agriculture, transportation, and construction. In today's
fast-paced world, having access to accurate and timely weather forecasts is more important than
ever. The Weather Forecasting Website Project seeks to address this need by developing a user-
friendly and reliable platform for accessing weather information.

In this digital age, the internet has become the primary source for obtaining weather forecasts.
However, many existing weather forecasting websites often suffer from issues such as outdated
information, complex user interfaces, and limited functionalities. Recognizing these challenges,
our project aims to create a solution that overcomes these shortcomings and provides users with
an enhanced weather forecasting experience.

The primary objective of the Weather Forecasting Website Project is to develop a dynamic and
interactive website that delivers precise and up-to-date weather predictions to users. Leveraging
the power of JavaScript, we aim to create a platform that not only presents weather data in a
clear and understandable manner but also offers interactive features for a more engaging user
experience.

Through this project, we aspire to revolutionize the way users access weather forecasts, offering
a seamless and informative experience for individuals, businesses, and organizations alike. By
providing users with accurate forecasts, real-time updates, and intuitive features, our website
aims to empower users to make informed decisions based on weather conditions.

In the following sections, we will delve into the existing challenges in weather forecasting,
analyze current solutions in the market, outline the proposed enhancements for our website,
detail the software requirements, describe the various modules of the project, discuss our testing
procedures, evaluate the results, and conclude with recommendations for future enhancements.
Through this comprehensive approach, we aim to develop a weather forecasting website that

3
meets the needs and expectations of our users while also paving the way for future advancements
in the field of weather forecasting.

1.1 VISUAL STUDIO CODE

Visual Studio Code (VS Code) is a powerful and versatile source code editor developed by
Microsoft. It is designed to meet the needs of developers across various programming languages
and platforms. With its lightweight and customizable nature, VS Code has quickly become one
of the most popular code editors in the industry.One of the key features of VS Code is its robust
built-in support for numerous programming languages, including JavaScript, Python, Java, C++,
and many more. It offers syntax highlighting, code completion, and debugging capabilities,
making it suitable for a wide range of development tasks.VS Code also boasts a rich ecosystem
of extensions, allowing developers to tailor the editor to their specific needs. From additional
language support to productivity tools and themes, the VS Code marketplace offers a vast array
of extensions to enhance the editor's functionality.

Furthermore, VS Code's integrated Git support simplifies version control workflows, enabling
developers to manage their code repositories directly within the editor. Its intuitive user interface,
coupled with keyboard shortcuts and command palette functionality, promotes efficiency and
productivity in coding tasks.

Overall, Visual Studio Code is a versatile and feature-rich code editor that caters to the diverse
needs of developers, whether they are working on web development, mobile apps, cloud
applications, or other software projects. Its flexibility, extensibility, and user-friendly interface
make it a preferred choice for developers worldwide.

4
1.2 ARCHITECTURE OVERVIEW
The architecture of the Weather Forecasting Website involves a client-server model.
The client-side consists of HTML, CSS, and JavaScript, rendering the user interface and
handling user interactions. JavaScript is used for dynamic content and interactive features.
On the server-side, a backend framework like Node.js retrieves weather data from external
APIs and processes it. The data is then sent to the client-side for presentation. This
architecture allows for a responsive and interactive user experience while ensuring timely
and accurate weather information retrieval and delivery.

1.2.1 CLIENT-SIDE APPLICATION

1. The client-side application for the Weather Forecasting Website employs HTML, CSS,
and JavaScript to create an interactive user interface. JavaScript enables dynamic content
updates, interactive features, and real-time data visualization. Users can easily access and
navigate weather forecasts, enhancing their experience and usability of the website.

2. The client-side application provides features such as:

The client-side application provides features such as real-time weather updates,
interactive maps, customizable location-based forecasts, historical weather data
visualization, and user-friendly navigation for seamless access to weather information.
Additionally, it offers intuitive search functionalities, personalized settings, and
responsive design for optimal user experience across devices.

5
CHAPTER 2

6
SYSTEM ANALYSIS

7
2.1 SYSTEM REQUIREMENTS
o Functional Requirements: These define the essential actions the website must
perform to fulfill its purpose.
 Core Functionalities:
 Location Search: Users can search for weather information by entering a city
name, zip code, or other location identifiers.
 Current Weather Display: Present real-time weather data for the searched
location, including:
 Temperature (in Celsius or Fahrenheit)
 Feels Like temperature
 Humidity percentage
 Wind speed and direction
 Weather description (e.g., sunny, cloudy, rainy)
 Optionally: Cloud cover percentage, visibility
 Weather Forecast: Provide weather predictions for upcoming days or hours.
This could include:
 Daily forecasts with high and low temperatures, weather conditions, and
chance of precipitation (rain/snow).
 Hourly forecasts for detailed information within a specific day.
 Optional Functionalities: Consider including additional features based on your
target audience:
 UV index for sun protection awareness.
 Chance of precipitation with specific amounts (e.g., rain chance with
millimeters expected).
 Sunrise and sunset times.
o Non-Functional Requirements: These define the website's overall
characteristics beyond core functionalities.
 Performance:
 Website Loading Speed: Specify an acceptable loading time for pages to
ensure a smooth user experience (e.g., pages load within 3 seconds).

8
  Data Retrieval Speed:** Define the desired speed for fetching weather data
from APIs or local storage.
 Usability:
 Intuitive Interface: The website should be easy to navigate with clear labels
and well-organized information.
 Responsive Design: The website should adapt seamlessly to different screen
sizes (desktop, mobile, tablets) for optimal viewing across devices.
 Accessibility: Consider accessibility features for users with disabilities (e.g.,
screen reader compatibility, color contrast).
 Security:
 If the website collects user data (e.g., location history for personalized
forecasts), outline measures to protect user privacy and data security.

2.2 EXISTING SYSTEM

following are the problems associated with the previous project which led to the creation of
the proposed project:-

1. Customized cities forecast only get

2. Not user-friendly: The existing system is not user-friendly because the information
like humidity cloud and wind etc are not in one place
3. Not a good UI: The user interface of the previous systems are not that good.

2.3 FEASIBILITY STUDY

The feasibility system for the Weather Forecasting Website assesses technical, economic,
and operational viability. It examines factors such as data availability, reliability of
forecasting algorithms, scalability of the infrastructure, and integration with external
APIs. Economic feasibility evaluates the cost of development, maintenance, and potential
revenue streams. Operational feasibility considers user adoption, usability, and support
requirements. The feasibility system ensures that the weather forecasting website is
technically sound, economically viable, and operationally feasible, laying the foundation

9
 for its successful development, deployment, and long-term sustainability in providing
valuable weather information to users

 Technical Feasibility:
 Evaluate if the website can be built using the chosen technologies
(programming languages, frameworks) and available development skills.
 Consider any technical challenges that might need to be addressed (e.g.,
integrating with complex APIs, data processing requirements).
 Economic Feasibility:
 Estimate the development and maintenance costs of the website. This
includes:
 Cost of development tools and software licenses.
 Server costs (if applicable).
 Ongoing maintenance and updates.
 Analyze if the expected benefits (e.g., increased user traffic, potential
advertising revenue) justify the investment.
 Operational Feasibility:
 Assess if the website can be integrated with existing infrastructure and
resources. This includes:
 Availability of necessary hardware and software resources.
 Ability to manage the website within the organization's existing workflows

2.4 PROPOSED SYSTEM

1. Enhanced Accuracy: Integration of advanced weather prediction algorithms and machine
learning techniques to improve the accuracy of forecasts.
2. Personalized Forecasting:Implementation of location-based services and user preferences
to deliver personalized weather forecasts tailored to individual users' locations and
interests.
3. Real-time Updates: Providing real-time updates and notifications for changes in weather
conditions, ensuring users have access to the latest information.

10
4. Improved User Experience: Enhancing the user interface design for better usability,
accessibility, and interactivity, resulting in a more intuitive and engaging experience for
users interacting with the website.

11
CHATPER 3

12
SYSTEM CONFIGURATION

13
 SYSTEM CONFIGURATION

The system configuration for the Weather Forecasting Website comprises an operating system,
web server (like Apache or Nginx), programming languages (HTML, CSS, and JavaScript), and
weather APIs (such as OpenWeatherMap). This setup facilitates the website's operation across
platforms, efficient serving of web pages, client-side interactivity, and fetching of weather data
for accurate forecasts without the need for a database.

3.1 HARDWARE REQUIREMENTS

1. Hardware Requirements
Here, specify the minimum hardware specifications needed to run the website effectively. This
could include:

 Server:
o Define the minimum server requirements : Processor: Intel core i3 or above for a
stable experience and fast retrieval of data.
o Hard Disk: 4GB and above
o RAM: 256 MB or more to handle website traffic and data processing.
o Consider scalability if you anticipate future growth in user base or data volume.

3.2 SOFTWARE REQUIREMENTS

This section lists the essential software tools needed for development and website operation:

 Web Server Software: Specify the web server software required to host the website
(e.g., Apache, Nginx).
 Operating System: Windows 7, 8, 9, 10
 Development Tools: List the development tools your team will use to build the website:
o Integrated Development Environment (IDE): A code editor with features like
syntax highlighting, debugging tools, and project management - (Visual Studio
Code).

14
 o Version Control System (VCS): A system for tracking code changes and
collaboration - ( Git ).
3. Development Tools

This section delves deeper into the specific programming languages, frameworks, and libraries
used to build the website:

 Front-End Development:
o HTML: The core markup language for structuring website content.
o CSS: Defines the website's visual style (layout, colors, fonts).
o JavaScript: Adds interactivity to the website (e.g., handling user input, updating
UI elements).
o JavaScript Frameworks (Optional): Consider using frameworks like React,
Angular, or Vue.js to streamline development and enhance user interface features.
4. Third-Party Libraries :

If your website utilizes external libraries or APIs (Application Programming Interfaces), list
them here with a brief description of their purpose:

 Weather Data API: Most weather forecasting websites rely on APIs from weather data
providers like OpenWeatherMap , These APIs provide access to real-time and historical
weather data.

5. API Integration :

Explain the process of integrating with external APIs, including:

 Obtaining API Keys: Weather data providers typically require API keys for access.
Explain how to acquire an API key from the chosen service.
 API Calls: Describe how the website code will interact with the API to fetch weather
data.
o Specify the API endpoints used to retrieve specific weather information (e.g.,
current weather for a location, forecast data for a period).
o Handling API responses on a website involves:

15
  Sending HTTP requests to API endpoints.
 Receiving asynchronous responses containing JSON data.
 Parsing JSON data using built-in methods like `response.json()`.
 Checking HTTP status codes to determine success or failure.
 Handling errors with appropriate error messages or fallback behavior.
 Updating the website's UI dynamically based on the parsed data.

3.3 ABOUT THE SOFTWARE

Visual Studio Code (VS Code) stands as a highly versatile source code editor developed by
Microsoft, prized for its lightweight yet potent platform serving writing, debugging, and
management of code across diverse programming languages and platforms. Its appeal lies in its
cross-platform compatibility, seamlessly adapting to Windows, macOS, and Linux operating
systems, ensuring a consistent development experience across environments. VS Code's hallmark
features include an intuitive user interface that can be easily customized with themes, layouts,
and extensions from a vast ecosystem. With built-in language support, developers benefit from
syntax highlighting, code completion, and IntelliSense features, enhancing code-writing
efficiency. The editor's integrated terminal empowers seamless command-line interaction, while
its robust Git integration simplifies version control. Moreover, its debugging capabilities, task
automation, and extensive library of extensions contribute to its status as a preferred choice
among developers for efficient and productive coding endeavors.

16
CHAPTER 4

17
SYSTEM DESIGN

18
 SYSTEM DESIGN

4.1 ARCHITECTURE DIAGRAM

1. System Architecture (High-Level Design)

This section provides a high-level overview of the website's architecture. Imagine it as a

blueprint outlining the major components and their interactions. Here's what to include:

 Front-End (User Interface): This is the part users interact with directly. It includes
elements like:
o Search bar for location input.
o Weather display area showcasing current conditions and forecasts.
 Back-End (Server-Side): This handles tasks behind the scenes:
o Processes user requests (e.g., location search).
o Interacts with the weather data API to fetch information.
o Prepares and formats data for display on the front-end.
 API Integration : The website interacts with an external weather data API to retrieve
real-time and forecast information.
2. User Interface (UI) Design

Here, you'll detail the design of the user interface, focusing on usability and aesthetics.

 Wireframes or Mockups: Include wireframes or mockups to illustrate the website's

layout and user interface elements. These can be basic sketches or more detailed visual
representations.
 UI Components and Layout: Describe the different UI components (search bar, weather
display elements, buttons) and how they are arranged on the page.
o Consider user experience by creating a clear and intuitive layout that's easy to
navigate.
o Ensure proper labeling of elements for user clarity.
 Responsiveness: The website should adapt seamlessly to different screen sizes (desktop,
mobile, tablets). Explain how the UI will adjust to ensure optimal viewing across devices.

19
3. Database Design (if applicable)

If your website stores user data or historical weather data, explain the database structure:

 Entity Relationship Diagram (ERD): Create an ERD to visualize the relationships

between different data entities (e.g., users, locations, weather data). This helps understand
how data is interconnected within the database.
 Data Model: Describe the data model used in the database, including the definition of
tables, columns, data types (e.g., text, numbers, dates), and primary/foreign keys that
establish relationships between tables.
4. System Flowchart

Create a flowchart to illustrate the overall flow of the system. This visualizes the steps involved
when users interact with the website:

 User enters a location search.

 The front-end sends the request to the back-end.
 The back-end interacts with the weather data API.
 The API retrieves and sends weather information to the back-end.
 The back-end processes and formats the data.
 The formatted data is sent back to the front-end.
 The front-end updates the user interface with the retrieved weather information.
5. Technology Stack (HTML, CSS, JavaScript Frameworks)

Explain the specific technologies used for front-end development:

 HTML: Provides the core structure and content of the webpages.

 CSS: Defines the website's visual style (layout, colors, fonts).
 JavaScript: Adds interactivity to the website (e.g., handling user input, updating UI
elements based on search results).

20
CHAPTER 5

21
SYSTEM DESCRIPTION

22
5.1 SYSTEM DESCRIPTION :
The system description provides an overview of the weather forecasting website , detailing its
key features, functionalities, and interactions between various components.

5.1.1 USER INTERFACE DESCRIPTION :

This section focuses on how users interact with the website visually and functionally.

 Homepage: Describe the layout of the homepage, including:

o Search Bar: Explain the functionality and features of the search bar.
 Does it allow searching by city name, zip code, or other identifiers?
 Does it offer autocomplete suggestions as users type?
o Initial Weather Display : If the homepage displays weather information without
a search, describe what data is shown:
 Location name.
 Current weather conditions (e.g., temperature, weather icon).
o Additional Features : Describe any additional functionalities available on the
homepage, such as:
 Links to information pages about weather terminology or understanding
forecasts.
 Quick access buttons to frequently searched locations.
 Search Functionality: Explain how users interact with the search function to retrieve
weather information:
o Describe the process of entering a location and submitting the search.
o Explain how search results are displayed (e.g., location name, current conditions,
option to view detailed forecast).
 Weather Display: Describe how the website presents the retrieved weather data:
o Current Conditions: Explain how the website displays current weather
information for the searched location. This could include:
 Temperature: Specify the temperature unit used (Celsius or Fahrenheit)
and the option to switch units (if applicable).

23
  Feels Like temperature: Explain how "Feels Like" temperature is
displayed and its significance.
 Weather Conditions: Describe how the current weather conditions are
displayed (e.g., sunny, cloudy, rainy, etc.) with corresponding weather
icons (optional).
 Optional: Humidity percentage, wind speed and direction.
o Weather Forecast: Describe how the website presents the weather forecast for
upcoming days or hours. This could include:
 Daily Forecasts: Explain how daily high and low temperatures, weather
conditions, and chance of precipitation are displayed for the next few days
(e.g., 3-day forecast).
 Hourly Forecasts (Optional): If the website offers hourly forecasts,
explain how users access them and how the information is presented (e.g.,
hourly breakdown of temperature, chance of rain, etc.).
o Additional Information Display (Optional): Describe any additional weather
information displayed on the page, such as: * Sunrise and sunset times. * UV
index information.
5.1.2 SYSTEM FUNCTIONALITY DESCRIPTION

This section delves into the inner workings of the website, explaining how it processes data to
deliver information to users:

 Data Fetching: Explain how the website retrieves weather data.

o Does it utilize an external weather data API? If so, specify the API used and how
it is integrated.
o If the website uses local storage for weather data, explain the update process.
 Data Processing and Display: Describe how the retrieved weather data is formatted and
presented on the user interface.
o Explain how current conditions and forecasts are extracted from the data and
displayed in a user-friendly format.

 Error Handling: Explain how the website handles potential errors, such as:

24
o User entering an invalid location.
o Issues with fetching data from the weather API.
o Describe how error messages are displayed to users, ensuring clarity and
guidance.

25
CHAPTER 6

26
TESTING

27
 TESTING

6.1.1 TEST PLAN :

A comprehensive test plan serves as a roadmap for conducting various types of testing. It defines
the scope of testing, objectives, resources, and schedule.

 Scope of Testing: Specify the areas of the website to be tested, including:

o Functionality of search and weather data retrieval.
o Accuracy and completeness of weather information displayed.
o User interface elements and their behavior.
o Performance and responsiveness on different devices.
 Testing Objectives: Outline the goals you aim to achieve through testing:
o Ensure core functionalities work as intended.
o Identify and fix bugs or errors that may disrupt user experience.
o Verify data accuracy and consistency.
o Evaluate website performance and responsiveness for optimal user experience.
 Test Cases: Develop detailed test cases that outline specific scenarios and expected
outcomes. This helps to systematically test various aspects of the website.
o Example Test Case: Search for weather information by entering a city name.
Verify that current weather data displays accurately, including temperature,
weather conditions, and wind speed.
 Resources: Specify the resources needed for testing, including:
o Testing tools (if applicable).
o Testers (internal team or external testers).
o Access to testing environments (development environment, staging environment).
 Schedule: Define a testing schedule, including timelines for different testing phases.
o Consider conducting regression testing after bug fixes to ensure they haven't
introduced new issues.

28
6.1.2 TESTING TYPES :

This section describes the different types of testing you will perform:

 Unit Testing: This focuses on testing individual units of code (functions, modules) to
ensure they work as expected in isolation.
 Integration Testing: This verifies that different components of the website (front-end,
back-end, API integration) work together seamlessly and exchange data correctly.
 Functional Testing: This tests the website's core functionalities to ensure they work as
specified in the requirements. You'll test functionalities like search, weather data display,
and different features (if applicable).
 Non-Functional Testing: This evaluates other important aspects beyond core
functionalities:
o Performance Testing: Measures website loading speed and ensures
responsiveness under different user loads.
o Usability Testing: Involves real users interacting with the website to identify any
usability issues and ensure the interface is intuitive and user-friendly.
o Security Testing: Evaluates the website's security measures to protect user data
and prevent unauthorized access.

6.1.3 REPORTING AND BUG TRACKING :

 Describe how you will document test results, including:
o Recording identified bugs and errors with details like severity and steps to
reproduce.
o Tracking the resolution process and ensuring bugs are fixed before deployment.

29
CHAPTER 7

30
SOURCE CODE

31
CODE :

HTML : HOME PAGE

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1">

<title>Weather Forecasting</title>
<script>
var now = new Date();
</script>

<!-- Loading third party fonts -->

<link href="http://fonts.googleapis.com/css?family=Roboto:300,400,700|" rel="stylesheet"
type="text/css">
<link href="fonts/font-awesome.min.css" rel="stylesheet" type="text/css">

<!-- Loading main css file -->

<link rel="stylesheet" href="style.css">

<!--[if lt IE 9]>
<script src="js/ie-support/html5.js"></script>

32
<script src="js/ie-support/respond.js"></script>
<![endif]-->
</head>

<body onload="DefaultScreen()">

<div class="site-content">
<div class="site-header">
<div class="container">
<a href="index.html" class="branding">
<img src="images/logo.png" alt="" class="logo">
<div class="logo-type">
<h1 class="site-title">Weather Forecasting</h1>
<class="site-description">Weather Updates
</div>
</a>

<!-- Default snippet for navigation -->

<div class="main-navigation">
<button type="button" class="menu-toggle"><i class="fa fa-bars"></i></button>
<ul class="menu">
<li class="menu-item current-menu-item"><a href="index.html">Home</a></li>
<!-- <li class="menu-item" > <a href="news1.html" onclick="scrollWin()">News</a></li> -->
<li class="menu-item"><a href="about.html">About us</a></li>
<!-- <li class="menu-item" id="tempBtn"> <a href="#">Temperature Map</a> </li> -->
<li class="menu-item"><a href="signin-signup.html">Sign up / Sign in</a></li>
</ul> <!-- .menu -->

33
</div> <!-- .main-navigation -->

<div class="mobile-navigation"></div>

</div>
</div> <!-- .site-header -->

<!-- <div class="hero" data-bg-image="images/banner.png" style="background-image:

url(https://source.unsplash.com/weekly?water);"> -->
<div class="hero" style="background-image: url(https://source.unsplash.com/1600x900/?
weather);">

<div class="container">
<form action="#" class="find-location">
<input type="text" placeholder="Find your location..." id="searchBar">
<input type="submit" value="Find" id="searchBtn" onclick="GetInfo()">
</form>

</div>
<div class="forecast-table">
<div class="container">
<div class="forecast-container">
<div class="today forecast">
<div class="forecast-header">
<div class="day" id="day1">Monday</div>
<div class="date" id = "date1"></div>
</div> <!-- .forecast-header -->
<div class="forecast-content">

34
<div class="location" id="city">Weather in Chennai</div>
<div class="degree">
<div class="num" id="temperature1">23^oC</div>
<div class="forecast-icon">
<img src="https://openweathermap.org/img/wn/04n.png" id="icon1" alt="" width=90>
</div>

</div>
<div class="minValues" id="day1Min">Loading...</div>
<div class="maxValues" id="day1Max">Loading...</div>
<div class="wind" id="windSpeed1">Loading</div>
</div>
</div>
<div class="forecast">
<div class="forecast-header">
<div class="day" id="day2"> Tuesday</div>
</div> <!-- .forecast-header -->
<div class="forecast-content">
<div class="forecast-icon">
<img src="https://openweathermap.org/img/wn/04n.png" alt="" width=48 id="icon2">
</div>
<div class="num" id="temperature2">23^oC</div>
<div class="minValues" id="day2Min">Loading...</div>
<div class="maxValues" id="day2Max">Loading...</div>
<div class="wind" id="windSpeed2">Loading</div>

</div>

35
</div>
<div class="forecast">
<div class="forecast-header">
<div class="day" id="day3">Wednesday</div>
</div> <!-- .forecast-header -->
<div class="forecast-content">
<div class="forecast-icon">
<img src="https://openweathermap.org/img/wn/04n.png" alt="" width=48 id="icon3">
</div>
<div class="num" id="temperature3">23^oC</div>
<div class="minValues" id="day3Min">Loading...</div>
<div class="maxValues" id="day3Max">Loading...</div>
<div class="wind" id="windSpeed3">Loading</div>

</div>
</div>
<div class="forecast">
<div class="forecast-header">
<div class="day" id="day4">Thursday</div>
</div> <!-- .forecast-header -->
<div class="forecast-content">
<div class="forecast-icon">
<img src="https://openweathermap.org/img/wn/04n.png" alt="" width=48 id="icon4">
</div>
<div class="num" id="temperature4">23^oC</div>
<div class="minValues" id="day4Min">Loading...</div>
<div class="maxValues" id="day4Max">Loading...</div>

36
<div class="wind" id="windSpeed4">Loading</div>

</div>
</div>
<div class="forecast">
<div class="forecast-header">
<div class="day" id="day5">Friday</div>
</div> <!-- .forecast-header -->
<div class="forecast-content">
<div class="forecast-icon">
<img src="https://openweathermap.org/img/wn/04n.png" alt="" width=48 id="icon5">
</div>
<div class="num" id="temperature5">23^oC</div>
<div class="minValues" id="day5Min">Loading...</div>
<div class="maxValues" id="day5Max">Loading...</div>
<div class="wind" id="windSpeed5">Loading</div>

</div>
</div>

</div>
</div>
</div>
</div>
<main class="main-content">
<h1 id="temperatureMap"><b>Temperature Map</b></h1>

37
<center> <iframe width="700" height="450"
src="https://embed.windy.com/embed2.html?
lat=14.264&lon=72.905&detailLat=14.264&detailLon=72.905&width=650&height=450&*zoo
m=5&level=surface&overlay=temp&product=ecmwf&menu=&message=&marker=&calendar=
now&pressure=&type=map&location=coordinates&detail=&metricWind=default&metricTemp=
default&radarRange=-1"
frameborder="0"></iframe></center>
</main>
</div>
</div>
</div>
</div>

<br><br>

<!-- .main-content -->

<footer class="site-footer">
<div class="container">
<div class="row">
<div class="col-md-8">
<form action="#" class="subscribe-form">
<input type="text" placeholder="Enter your email to subscribe...">

38
<input type="submit" value="Subscribe">
</form>
</div>
<div class="col-md-3 col-md-offset-1">
<div class="social-links">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-google-plus"></i></a>

</div>
</div>
</div>

<p class="colophon"><h1>Weather Forecasting - Vishal</h1> </p>

</div>
</footer> <!-- .site-footer -->
</div>

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/app.js"></script>
<script src="scrolling.js"></script>
<script src="script.js"></script>

</body>
<script>
function scrollWin() {

39
window.scrollTo(0, 1615);
}
</script>
</html>

ABOUT PAGE :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1">

<title>Weather Forecasting</title>

<!-- Loading third party fonts -->

<link href="http://fonts.googleapis.com/css?family=Roboto:300,400,700|" rel="stylesheet"
type="text/css">
<link href="fonts/font-awesome.min.css" rel="stylesheet" type="text/css">

<!-- Loading main css file -->

<link rel="stylesheet" href="style.css">

<!--[if lt IE 9]>
<script src="js/ie-support/html5.js"></script>
<script src="js/ie-support/respond.js"></script>

40
<![endif]-->

</head>

<body>

<div class="site-content">
<div class="site-header">
<div class="container">
<a href="index.html" class="branding">
<img src="images/logo.png" alt="" class="logo">
<div class="logo-type">
<h1 class="site-title">Weather Forecasting</h1>
<small class="site-description">Weather Updates</small>
</div>
</a>

<!-- Default snippet for navigation -->

<div class="main-navigation">
<button type="button" class="menu-toggle"><i class="fa fa-bars"></i></button>
<ul class="menu">
<li class="menu-item current-menu-item"><a href="index.html">Home</a></li>
<li class="menu-item"><a href="about.html">About us</a></li>
<li class="menu-item"><a href="signin-signup.html">Sign up / Sign in</a></li>

41
</ul> <!-- .menu -->
</div> <!-- .main-navigation -->

<div class="mobile-navigation"></div>

</div>
</div> <!-- .site-header -->

<main class="main-content">

<br>
<br>
<br>
<center ><h1 style="font-size: 40px;">About-us</h1>

</center>
<br>
<br>
<div style="width: 1100px ;margin: auto ;"><h4>Our website presents OFFICIAL weather
observations, weather forecasts and climatological information for selected cities supplied by
National Meteorological & Hydrological Services (NMHSs) worldwide.The NMHSs make
official weather observations in their respective countries. Links to their official weather service
websites and tourism board/organization are also provided whenever available. Weather icons are
shown alongside worded forecasts in this version to facilitate visual inspection.

42
By April 2024, WWIS provided official weather information for 2963 cities in which 2819 cities
are available with forecast from 139 members while 2177 cities are available with climatological
information from 170 members. Suggestions to enrich the contents of this website are welcome.
</h4>
</div>

<div class="fullwidth-block">
<div class="container">
<div class="col-md-5">
<div class="contact-details">
<div class="map" data-latitude="-6.897789" data-longitude="107.621735"></div>
<div class="contact-info">
<address>
<img src="images/icon-marker.png" alt="">
<p>Weather Forecasting <br>
Mylapore Chennai-4</p>
</address>

<a href="#"><img src="images/icon-phone.png" alt="">+919087278009</a>

<a href="#"><img src="images/icon-envelope.png" alt="">contact@vishal.com</a>
</div>
</div>
</div>
<div class="col-md-6 col-md-offset-1">
<h2 class="section-title">Contact us</h2>

43
<p>Stay Connected and Contact us for any Problem ! </p>
<form action="#" class="contact-form">
<div class="row">
<div class="col-md-6"><input type="text" placeholder="Your name..."></div>
<div class="col-md-6"><input type="text" placeholder="Email Addresss..."></div>
</div>
<div class="row">
<div class="col-md-6"><input type="text" placeholder="Company name..."></div>
<div class="col-md-6"><input type="text" placeholder="Website..."></div>
</div>
<textarea name="" placeholder="Message..."></textarea>
<div class="text-right">
<input type="submit" placeholder="Send message">
</div>
</form>

</div>
</div>
</div>

</main> <!-- .main-content -->

<footer class="site-footer">
<div class="container">
<div class="row">
<div class="col-md-8">
<form action="#" class="subscribe-form">

44
<input type="text" placeholder="Enter your email to subscribe...">
<input type="submit" value="Subscribe">
</form>
</div>
<div class="col-md-3 col-md-offset-1">
<div class="social-links">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-google-plus"></i></a>

</div>
</div>
</div>

<p class="colophon"><h1>Weather Forecasting - Vishal</h1></p>

</div>
</footer> <!-- .site-footer -->
</div>

<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?
sensor=false&amp;language=en"></script>
<script src="js/plugins.js"></script>
<script src="js/app.js"></script>

</body>

45
</html>

SIGN IN / SING UP PAGE :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Account | Weather Forecasting</title>
</head>

<link rel="stylesheet" href="sign2.css">

<body>

<!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"

integrity="sha384-
50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
crossorigin="anonymous"> -->

<div class="container" id="container">

<div class="form-container sign-up-container">
<form action="#">
<h1>Create Account</h1>
<br>
<!-- <div class="social-container">

46
<a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
<a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
</div> -->
<!-- <span>or use your email for registration</span> -->
<input type="text" placeholder="Name" />
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
<br>
<button>Sign Up</button>
</form>
</div>
<div class="form-container sign-in-container">
<form action="#">
<h1>Sign in</h1>
<br>
<div class="social-container">
<a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
<a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
</div>
<!-- <span>or use your account</span> -->
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
<!-- <a href="#">Forgot your password?</a> -->
<br>
<button>Sign In</button>

47
</form>
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1>Welcome Back!</h1>
<p>To keep connected with us please login with your personal info</p>
<button class="ghost" id="signIn">Sign In</button>
</div>
<div class="overlay-panel overlay-right">
<h1>Hello, Friend!</h1>
<p>Enter your personal details and start journey with us</p>
<button class="ghost" id="signUp">Sign Up</button>
</div>
</div>
</div>
</div>
<br><br>
<a href="index.html"> <span id="samosa" >Back</span></a>
<script src="sign.js"></script>

</body>
</html>

CSS:

Importing CSS Libraries

48
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
display: block;
}

audio,
canvas,
video {
display: inline-block;
}

audio:not([controls]) {
display: none;
height: 0;
}

[hidden],
template {
display: none;
}

html {
background: #fff;
color: #000;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}

html,
button,
input,
select,
textarea {
font-family: sans-serif;

49
}

body {
margin: 0;
}

a{
background: transparent;
}

a:focus {
outline: thin dotted;
}

a:hover,
a:active {
outline: 0;
}

h1 {
font-size: 2em;
margin: 0.67em 0;
}

h2 {
font-size: 1.5em;
margin: 0.83em 0;
}

h3 {
font-size: 1.17em;
margin: 1em 0;
}

h4 {
font-size: 1em;
margin: 1.33em 0;
}

h5 {
font-size: 0.83em;
margin: 1.67em 0;
}

50
h6 {
font-size: 0.75em;
margin: 2.33em 0;
}

abbr[title] {
border-bottom: 1px dotted;
}

b,
strong {
font-weight: bold;
}

dfn {
font-style: italic;
}

mark {
background: #ff0;
color: #000;
}

code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}

pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}

q{
quotes: "\201C" "\201D" "\2018" "\2019";
}

q:before,

51
q:after {
content: '';
content: none;
}

small {
font-size: 80%;
}

sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}

sup {
top: -0.5em;
}

sub {
bottom: -0.25em;
}

img {
border: 0;
}

svg:not(:root) {
overflow: hidden;
}

figure {
margin: 0;
}

fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}

52
legend {
border: 0;
padding: 0;
white-space: normal;
}

button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
margin: 0;
vertical-align: baseline;
}

button,
input {
line-height: normal;
}

button,
select {
text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}

button[disabled],
input[disabled] {
cursor: default;
}

input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;

53
}

input[type="search"] {
-webkit-appearance: textfield;
box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}

textarea {
overflow: auto;
vertical-align: top;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

*,
*:before,
*:after {
box-sizing: border-box;
}

/*
* Global Styles
*/
html {
font-size: 14px;
}

body {
color: #bfc1c8;

54
 font-family: "Roboto", "Open Sans", sans-serif;
font-size: 14px;
font-weight: 300;
line-height: 1.5;
background: #1e202b;
}

h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
margin: 0 0 20px;
line-height: normal;
}

hr {
border: none;
border-bottom: 1px solid #777;
}

ul,
ol {
margin: 0;
padding-left: 0;
}

a{
text-decoration: none;
color: #009ad8;
}

address {
font-style: normal;
}

p{
margin-top: 0;
}

form input,

55
form textarea,
form select {
outline: none;
border: none;
padding: 10px;
border-radius: 30px;
}

form select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

form textarea {
resize: vertical;
}

/*
* Reusable Components Style
*/
.button,
form input[type="submit"],
form button,
form input[type="reset"] {
border: none;
background: #009ad8;
padding: 10px 20px;
border-radius: 30px;
color: white;
}

.map {
height: 220px;
}

.container {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
*zoom: 1;
}

56
.container:after {
content: " ";
clear: both;
display: block;
overflow: hidden;
height: 0;
}

@media (min-width: 768px) {

.container {
width: 750px;
}
}

@media (min-width: 992px) {

.container {
width: 970px;
}
}

@media (min-width: 1200px) {

.container {
width: 1170px;
}
}

.container-fluid {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
*zoom: 1;
}

.container-fluid:after {
content: " ";
clear: both;
display: block;
overflow: hidden;
height: 0;
}

57
.row {
margin-left: -15px;
margin-right: -15px;
*zoom: 1;
}

.row:after {
content: " ";
clear: both;
display: block;
overflow: hidden;
height: 0;
}

.col-xs-1,
.col-sm-1,
.col-md-1,
.col-lg-1,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.col-xs-8,

58
.col-sm-8,
.col-md-8,
.col-lg-8,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10,
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11,
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12 {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}

.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12 {
float: left;
}

.col-xs-1 {
width: 8.3333333333%;
}

59
.col-xs-2 {
width: 16.6666666667%;
}

.col-xs-3 {
width: 25%;
}

.col-xs-4 {
width: 33.3333333333%;
}

.col-xs-5 {
width: 41.6666666667%;
}

.col-xs-6 {
width: 50%;
}

.col-xs-7 {
width: 58.3333333333%;
}

.col-xs-8 {
width: 66.6666666667%;
}

.col-xs-9 {
width: 75%;
}

.col-xs-10 {
width: 83.3333333333%;
}

.col-xs-11 {
width: 91.6666666667%;
}

.col-xs-12 {
width: 100%;

60
}

.col-xs-pull-0 {
right: auto;
}

.col-xs-pull-1 {
right: 8.3333333333%;
}

.col-xs-pull-2 {
right: 16.6666666667%;
}

.col-xs-pull-3 {
right: 25%;
}

.col-xs-pull-4 {
right: 33.3333333333%;
}

.col-xs-pull-5 {
right: 41.6666666667%;
}

.col-xs-pull-6 {
right: 50%;
}

.col-xs-pull-7 {
right: 58.3333333333%;
}

.col-xs-pull-8 {
right: 66.6666666667%;
}

.col-xs-pull-9 {
right: 75%;
}

.col-xs-pull-10 {

61
 right: 83.3333333333%;
}

.col-xs-pull-11 {
right: 91.6666666667%;
}

.col-xs-pull-12 {
right: 100%;
}

.col-xs-push-0 {
left: auto;
}

.col-xs-push-1 {
left: 8.3333333333%;
}

.col-xs-push-2 {
left: 16.6666666667%;
}

.col-xs-push-3 {
left: 25%;
}

.col-xs-push-4 {
left: 33.3333333333%;
}

.col-xs-push-5 {
left: 41.6666666667%;
}

.col-xs-push-6 {
left: 50%;
}

.col-xs-push-7 {
left: 58.3333333333%;
}

62
.col-xs-push-8 {
left: 66.6666666667%;
}

.col-xs-push-9 {
left: 75%;
}

.col-xs-push-10 {
left: 83.3333333333%;
}

.col-xs-push-11 {
left: 91.6666666667%;
}

.col-xs-push-12 {
left: 100%;
}

.col-xs-offset-0 {
margin-left: 0%;
}

.col-xs-offset-1 {
margin-left: 8.3333333333%;
}

.col-xs-offset-2 {
margin-left: 16.6666666667%;
}

.col-xs-offset-3 {
margin-left: 25%;
}

.col-xs-offset-4 {
margin-left: 33.3333333333%;
}

.col-xs-offset-5 {
margin-left: 41.6666666667%;
}

63
.col-xs-offset-6 {
margin-left: 50%;
}

.col-xs-offset-7 {
margin-left: 58.3333333333%;
}

.col-xs-offset-8 {
margin-left: 66.6666666667%;
}

.col-xs-offset-9 {
margin-left: 75%;
}

.col-xs-offset-10 {
margin-left: 83.3333333333%;
}

.col-xs-offset-11 {
margin-left: 91.6666666667%;
}

.col-xs-offset-12 {
margin-left: 100%;
}

@media (min-width: 768px) {

.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12 {

64
 float: left;
}

.col-sm-1 {
width: 8.3333333333%;
}

.col-sm-2 {
width: 16.6666666667%;
}

.col-sm-3 {
width: 25%;
}

.col-sm-4 {
width: 33.3333333333%;
}

.col-sm-5 {
width: 41.6666666667%;
}

.col-sm-6 {
width: 50%;
}

.col-sm-7 {
width: 58.3333333333%;
}

.col-sm-8 {
width: 66.6666666667%;
}

.col-sm-9 {
width: 75%;
}

.col-sm-10 {
width: 83.3333333333%;
}

65
.col-sm-11 {
width: 91.6666666667%;
}

.col-sm-12 {
width: 100%;
}

.col-sm-pull-0 {
right: auto;
}

.col-sm-pull-1 {
right: 8.3333333333%;
}

.col-sm-pull-2 {
right: 16.6666666667%;
}

.col-sm-pull-3 {
right: 25%;
}

.col-sm-pull-4 {
right: 33.3333333333%;
}

.col-sm-pull-5 {
right: 41.6666666667%;
}

.col-sm-pull-6 {
right: 50%;
}

.col-sm-pull-7 {
right: 58.3333333333%;
}

.col-sm-pull-8 {
right: 66.6666666667%;
}

66
.col-sm-pull-9 {
right: 75%;
}

.col-sm-pull-10 {
right: 83.3333333333%;
}

.col-sm-pull-11 {
right: 91.6666666667%;
}

.col-sm-pull-12 {
right: 100%;
}

.col-sm-push-0 {
left: auto;
}

.col-sm-push-1 {
left: 8.3333333333%;
}

.col-sm-push-2 {
left: 16.6666666667%;
}

.col-sm-push-3 {
left: 25%;
}

.col-sm-push-4 {
left: 33.3333333333%;
}

.col-sm-push-5 {
left: 41.6666666667%;
}

.col-sm-push-6 {
left: 50%;

67
}

.col-sm-push-7 {
left: 58.3333333333%;
}

.col-sm-push-8 {
left: 66.6666666667%;
}

.col-sm-push-9 {
left: 75%;
}

.col-sm-push-10 {
left: 83.3333333333%;
}

.col-sm-push-11 {
left: 91.6666666667%;
}

.col-sm-push-12 {
left: 100%;
}

.col-sm-offset-0 {
margin-left: 0%;
}

.col-sm-offset-1 {
margin-left: 8.3333333333%;
}

.col-sm-offset-2 {
margin-left: 16.6666666667%;
}

.col-sm-offset-3 {
margin-left: 25%;
}

.col-sm-offset-4 {

68
 margin-left: 33.3333333333%;
}

.col-sm-offset-5 {
margin-left: 41.6666666667%;
}

.col-sm-offset-6 {
margin-left: 50%;
}

.col-sm-offset-7 {
margin-left: 58.3333333333%;
}

.col-sm-offset-8 {
margin-left: 66.6666666667%;
}

.col-sm-offset-9 {
margin-left: 75%;
}

.col-sm-offset-10 {
margin-left: 83.3333333333%;
}

.col-sm-offset-11 {
margin-left: 91.6666666667%;
}

.col-sm-offset-12 {
margin-left: 100%;
}
}

@media (min-width: 992px) {

.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,

69
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12 {
float: left;
}

.col-md-1 {
width: 8.3333333333%;
}

.col-md-2 {
width: 16.6666666667%;
}

.col-md-3 {
width: 25%;
}

.col-md-4 {
width: 33.3333333333%;
}

.col-md-5 {
width: 41.6666666667%;
}

.col-md-6 {
width: 50%;
}

.col-md-7 {
width: 58.3333333333%;
}

.col-md-8 {
width: 66.6666666667%;
}

.col-md-9 {

70
 width: 75%;
}

.col-md-10 {
width: 83.3333333333%;
}

.col-md-11 {
width: 91.6666666667%;
}

.col-md-12 {
width: 100%;
}

.col-md-pull-0 {
right: auto;
}

.col-md-pull-1 {
right: 8.3333333333%;
}

.col-md-pull-2 {
right: 16.6666666667%;
}

.col-md-pull-3 {
right: 25%;
}

.col-md-pull-4 {
right: 33.3333333333%;
}

.col-md-pull-5 {
right: 41.6666666667%;
}

.col-md-pull-6 {
right: 50%;
}

71
.col-md-pull-7 {
right: 58.3333333333%;
}

.col-md-pull-8 {
right: 66.6666666667%;
}

.col-md-pull-9 {
right: 75%;
}

.col-md-pull-10 {
right: 83.3333333333%;
}

.col-md-pull-11 {
right: 91.6666666667%;
}

.col-md-pull-12 {
right: 100%;
}

.col-md-push-0 {
left: auto;
}

.col-md-push-1 {
left: 8.3333333333%;
}

.col-md-push-2 {
left: 16.6666666667%;
}

.col-md-push-3 {
left: 25%;
}

.col-md-push-4 {
left: 33.3333333333%;
}

72
.col-md-push-5 {
left: 41.6666666667%;
}

.col-md-push-6 {
left: 50%;
}

.col-md-push-7 {
left: 58.3333333333%;
}

.col-md-push-8 {
left: 66.6666666667%;
}

.col-md-push-9 {
left: 75%;
}

.col-md-push-10 {
left: 83.3333333333%;
}

.col-md-push-11 {
left: 91.6666666667%;
}

.col-md-push-12 {
left: 100%;
}

.col-md-offset-0 {
margin-left: 0%;
}

.col-md-offset-1 {
margin-left: 8.3333333333%;
}

.col-md-offset-2 {
margin-left: 16.6666666667%;

73
 }

.col-md-offset-3 {
margin-left: 25%;
}

.col-md-offset-4 {
margin-left: 33.3333333333%;
}

.col-md-offset-5 {
margin-left: 41.6666666667%;
}

.col-md-offset-6 {
margin-left: 50%;
}

.col-md-offset-7 {
margin-left: 58.3333333333%;
}

.col-md-offset-8 {
margin-left: 66.6666666667%;
}

.col-md-offset-9 {
margin-left: 75%;
}

.col-md-offset-10 {
margin-left: 83.3333333333%;
}

.col-md-offset-11 {
margin-left: 91.6666666667%;
}

.col-md-offset-12 {
margin-left: 100%;
}
}

74
@media (min-width: 1200px) {

.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12 {
float: left;
}

.col-lg-1 {
width: 8.3333333333%;
}

.col-lg-2 {
width: 16.6666666667%;
}

.col-lg-3 {
width: 25%;
}

.col-lg-4 {
width: 33.3333333333%;
}

.col-lg-5 {
width: 41.6666666667%;
}

.col-lg-6 {
width: 50%;
}

.col-lg-7 {
width: 58.3333333333%;

75
}

.col-lg-8 {
width: 66.6666666667%;
}

.col-lg-9 {
width: 75%;
}

.col-lg-10 {
width: 83.3333333333%;
}

.col-lg-11 {
width: 91.6666666667%;
}

.col-lg-12 {
width: 100%;
}

.col-lg-pull-0 {
right: auto;
}

.col-lg-pull-1 {
right: 8.3333333333%;
}

.col-lg-pull-2 {
right: 16.6666666667%;
}

.col-lg-pull-3 {
right: 25%;
}

.col-lg-pull-4 {
right: 33.3333333333%;
}

.col-lg-pull-5 {

76
 right: 41.6666666667%;
}

.col-lg-pull-6 {
right: 50%;
}

.col-lg-pull-7 {
right: 58.3333333333%;
}

.col-lg-pull-8 {
right: 66.6666666667%;
}

.col-lg-pull-9 {
right: 75%;
}

.col-lg-pull-10 {
right: 83.3333333333%;
}

.col-lg-pull-11 {
right: 91.6666666667%;
}

.col-lg-pull-12 {
right: 100%;
}

.col-lg-push-0 {
left: auto;
}

.col-lg-push-1 {
left: 8.3333333333%;
}

.col-lg-push-2 {
left: 16.6666666667%;
}

77
.col-lg-push-3 {
left: 25%;
}

.col-lg-push-4 {
left: 33.3333333333%;
}

.col-lg-push-5 {
left: 41.6666666667%;
}

.col-lg-push-6 {
left: 50%;
}

.col-lg-push-7 {
left: 58.3333333333%;
}

.col-lg-push-8 {
left: 66.6666666667%;
}

.col-lg-push-9 {
left: 75%;
}

.col-lg-push-10 {
left: 83.3333333333%;
}

.col-lg-push-11 {
left: 91.6666666667%;
}

.col-lg-push-12 {
left: 100%;
}

.col-lg-offset-0 {
margin-left: 0%;
}

78
.col-lg-offset-1 {
margin-left: 8.3333333333%;
}

.col-lg-offset-2 {
margin-left: 16.6666666667%;
}

.col-lg-offset-3 {
margin-left: 25%;
}

.col-lg-offset-4 {
margin-left: 33.3333333333%;
}

.col-lg-offset-5 {
margin-left: 41.6666666667%;
}

.col-lg-offset-6 {
margin-left: 50%;
}

.col-lg-offset-7 {
margin-left: 58.3333333333%;
}

.col-lg-offset-8 {
margin-left: 66.6666666667%;
}

.col-lg-offset-9 {
margin-left: 75%;
}

.col-lg-offset-10 {
margin-left: 83.3333333333%;
}

.col-lg-offset-11 {
margin-left: 91.6666666667%;

79
 }

.col-lg-offset-12 {
margin-left: 100%;
}
}

@-ms-viewport {
width: device-width;
}

.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
display: none !important;
}

.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
display: none !important;
}

@media (max-width: 767px) {

.visible-xs {
display: block !important;
}

table.visible-xs {
display: table;
}

tr.visible-xs {

80
 display: table-row !important;
}

th.visible-xs,
td.visible-xs {
display: table-cell !important;
}
}

@media (max-width: 767px) {

.visible-xs-block {
display: block !important;
}
}

@media (max-width: 767px) {

.visible-xs-inline {
display: inline !important;
}
}

@media (max-width: 767px) {

.visible-xs-inline-block {
display: inline-block !important;
}
}

@media (min-width: 768px) and (max-width: 991px) {

.visible-sm {
display: block !important;
}

table.visible-sm {
display: table;
}

tr.visible-sm {
display: table-row !important;
}

th.visible-sm,
td.visible-sm {
display: table-cell !important;

81
 }
}

@media (min-width: 768px) and (max-width: 991px) {

.visible-sm-block {
display: block !important;
}
}

@media (min-width: 768px) and (max-width: 991px) {

.visible-sm-inline {
display: inline !important;
}
}

@media (min-width: 768px) and (max-width: 991px) {

.visible-sm-inline-block {
display: inline-block !important;
}
}

@media (min-width: 992px) and (max-width: 1199px) {

.visible-md {
display: block !important;
}

table.visible-md {
display: table;
}

tr.visible-md {
display: table-row !important;
}

th.visible-md,
td.visible-md {
display: table-cell !important;
}
}

@media (min-width: 992px) and (max-width: 1199px) {

.visible-md-block {
display: block !important;

82
 }
}

@media (min-width: 992px) and (max-width: 1199px) {

.visible-md-inline {
display: inline !important;
}
}

@media (min-width: 992px) and (max-width: 1199px) {

.visible-md-inline-block {
display: inline-block !important;
}
}

@media (min-width: 1200px) {

.visible-lg {
display: block !important;
}

table.visible-lg {
display: table;
}

tr.visible-lg {
display: table-row !important;
}

th.visible-lg,
td.visible-lg {
display: table-cell !important;
}
}

@media (min-width: 1200px) {

.visible-lg-block {
display: block !important;
}
}

@media (min-width: 1200px) {

.visible-lg-inline {
display: inline !important;

83
 }
}

@media (min-width: 1200px) {

.visible-lg-inline-block {
display: inline-block !important;
}
}

@media (max-width: 767px) {

.hidden-xs {
display: none !important;
}
}

@media (min-width: 768px) and (max-width: 991px) {

.hidden-sm {
display: none !important;
}
}

@media (min-width: 992px) and (max-width: 1199px) {

.hidden-md {
display: none !important;
}
}

@media (min-width: 1200px) {

.hidden-lg {
display: none !important;
}
}

.visible-print {
display: none !important;
}

@media print {
.visible-print {
display: block !important;
}

table.visible-print {

84
 display: table;
}

tr.visible-print {
display: table-row !important;
}

th.visible-print,
td.visible-print {
display: table-cell !important;
}
}

.visible-print-block {
display: none !important;
}

@media print {
.visible-print-block {
display: block !important;
}
}

.visible-print-inline {
display: none !important;
}

@media print {
.visible-print-inline {
display: inline !important;
}
}

.visible-print-inline-block {
display: none !important;
}

@media print {
.visible-print-inline-block {
display: inline-block !important;
}
}

85
@media print {
.hidden-print {
display: none !important;
}
}

/*
* Header Styles
*/
.site-header {
padding: 50px 0;
}

.site-header .branding {
float: left;
}

.site-header .branding .logo,

.site-header .branding .logo-type {
display: inline-block;
vertical-align: middle;
}

.site-header .branding .logo {

margin-right: 10px;
}

.site-header .branding .site-title {

margin-bottom: 5px;
font-size: 16px;
font-size: 1.1428571429em;
color: white;
}

.site-header .branding .site-description {

font-size: 10px;
font-size: 0.7142857143em;
display: block;
color: #bfc1c8;
}

.main-navigation {
float: right;

86
}

.main-navigation .menu-toggle,
.main-navigation .menu {
vertical-align: middle;
}

.main-navigation .menu-toggle {
background: none;
border: 2px solid transparent;
color: white;
padding: 20px;
border-radius: 40px;
-webkit-transition: .3s ease;
transition: .3s ease;
display: none;
outline: none;
}

@media screen and (max-width: 990px) {

.main-navigation .menu-toggle {
display: inline-block;
}
}

.main-navigation .menu-toggle:hover,
.main-navigation .menu-toggle:active {
border-color: #009ad8;
color: #009ad8;
}

.main-navigation .menu {
list-style: none;
display: inline-block;
*zoom: 1;
}

.main-navigation .menu:after {
content: " ";
clear: both;
display: block;
overflow: hidden;
height: 0;

87
}

@media screen and (max-width: 990px) {

.main-navigation .menu {
display: none;
}
}

.main-navigation .menu .menu-item {

float: left;
margin-left: 10px;
}

.main-navigation .menu .menu-item a {

padding: 5px 25px;
border: 2px solid transparent;
border-radius: 30px;
color: white;
-webkit-transition: .3s ease;
transition: .3s ease;
font-weight: 400;
}

.main-navigation .menu .menu-item.current-menu-item a,

.main-navigation .menu .menu-item:hover a {
border-color: #009ad8;
color: #009ad8;
}

.mobile-navigation {
padding: 30px 0 0;
clear: both;
display: none;
}

@media screen and (min-width: 991px) {

.mobile-navigation {
display: none !important;
}
}

.mobile-navigation .menu {
background: #262936;

88
 list-style: none;
text-align: center;
border-radius: 10px;
overflow: hidden;
}

.mobile-navigation .menu a {
padding: 20px;
display: block;
color: white;
}

.mobile-navigation .menu .menu-item {

border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-navigation .menu .menu-item:last-child {

border-bottom: none;
}

.mobile-navigation .menu .menu-item.current-menu-item a {

color: #009ad8;
}

.hero {
background-size: cover;
padding: 70px 0;
min-height: 350px;
}

.find-location {
position: relative;
margin-bottom: 164px;
}

.find-location input[type="text"] {
width: 100%;
padding: 20px 50px 20px 20px;
background: #1e202b;
color: white;
}

.find-location input[type="submit"] {

89
 position: absolute;
top: 5px;
right: 5px;
bottom: 5px;
padding: 0 40px;
}

.forecast-container {
width: 100%;
background: #323544;
display: table;
table-layout: fixed;
width: 100%;
overflow: hidden;
border-radius: 10px;
margin-top: -150px;
margin-bottom: 50px;
position: relative;
top: 45px;
}

.forecast-container .forecast {
display: table-cell;
vertical-align: top;
}

.forecast-container .forecast:nth-child(even) {
background-color: #262936;
}

@media screen and (max-width: 990px) {

.forecast-container .forecast {
display: block;
width: 16.6667%;
float: left;
}
}

.forecast-container .forecast.today {
width: 420px;
}

.forecast-container .forecast.today .forecast-header {

90
 *zoom: 1;
}

.forecast-container .forecast.today .forecast-header:after {

content: " ";
clear: both;
display: block;
overflow: hidden;
height: 0;
}

.forecast-container .forecast.today .forecast-header .day {

float: left;
}

.forecast-container .forecast.today .forecast-header .date {

float: right;
}

.forecast-container .forecast.today .forecast-content {

text-align: left;
padding-top: 30px;
padding-bottom: 30px;
}

.forecast-container .forecast.today .location {

font-size: 18px;
font-size: 1.2857142857em;
font-weight: 400;
}

.forecast-container .forecast.today .degree .num,

.forecast-container .forecast.today .degree .forecast-icon {
display: inline-block;
vertical-align: middle;
}

.forecast-container .forecast.today .degree .num {

font-size: 90px;
font-size: 6.4285714286rem;
margin-right: 30px;
}

91
.forecast-container .forecast.today span {
margin-right: 20px;
}

.forecast-container .forecast.today span img {

margin-right: 5px;
vertical-align: middle;
}

@media screen and (max-width: 990px) {

.forecast-container .forecast.today {
display: block;
width: 100%;
}
}

.forecast-container .forecast .forecast-header {

background: rgba(0, 0, 0, 0.1);
padding: 10px;
text-align: center;
font-weight: 400;
}

.forecast-container .forecast .forecast-icon {

height: 50px;
}

.forecast-container .forecast .forecast-content {

padding: 50px 20px 10px;
text-align: center;
}

.forecast-container .forecast .forecast-content .forecast-icon {

margin-bottom: 20px;
}

.forecast-container .forecast .forecast-content .degree {

font-size: 24px;
font-size: 1.7142857143em;
color: white;
font-weight: 700;
}

92
.forecast-container .forecast .forecast-content small {
font-size: 16px;
font-size: 1.1428571429em;
}

.fullwidth-block {
padding: 70px 0;
}

.fullwidth-block .section-title {
font-size: 36px;
font-size: 2.5714285714em;
font-weight: 300;
color: white;
}

.filter {
margin-bottom: 30px;
}

.filter-control {
border: 2px solid #262936;
padding: 5px 5px 5px 20px;
border-radius: 30px;
display: inline-block;
white-space: nowrap;
}

.filter-control label {
margin-right: 10px;
display: inline-block;
padding: 10px;
vertical-align: middle;
}

.select.control {
background: #262936;
border-radius: 40px;
overflow: hidden;
display: inline-block;
vertical-align: middle;
padding-right: 30px;
position: relative;

93
}

.select.control:after {
content: " ";
width: 7px;
height: 9px;
background: url(images/arrow-down.png);
position: absolute;
right: 10px;
top: 0;
bottom: 0;
margin: auto;
display: block;
z-index: 1;
}

.select.control select {
padding: 10px 30px;
width: 110%;
border: none;
background: none;
outline: none;
appearance: none;
-webkit-appearance: none;
color: white;
}

.live-camera {
margin-bottom: 30px;
}

.live-camera .live-camera-cover {
position: relative;
margin-bottom: 20px;
cursor: pointer;
}

.live-camera .live-camera-cover:after {
content: " ";
width: 45px;
height: 45px;
position: absolute;
left: 0;

94
 right: 0;
top: 0;
bottom: 0;
margin: auto;
background: url(images/play-button.png);
}

.live-camera .live-camera-cover img {

display: block;
width: 100%;
height: auto;
max-width: 100%;
border-radius: 5px;
}

.live-camera .location {
margin-bottom: 5px;
color: white;
font-weight: 300;
}

.news {
padding-left: 100px;
position: relative;
}

.news:after {
content: " ";
width: 12px;
height: 7px;
background: url(images/arrow.png);
display: block;
}

.news .date {
position: absolute;
top: 0;
left: 0;
color: #009ad8;
font-size: 24px;
font-size: 1.7142857143em;
}

95
.news h3 {
font-size: 14px;
font-size: 1em;
}

.news h3 a {
color: white;
}

.arrow-feature {
list-style-type: none;
}

.arrow-feature li {
position: relative;
padding-left: 30px;
}

.arrow-feature li:before {
content: " ";
width: 12px;
height: 7px;
background: url(images/arrow.png);
position: absolute;
left: 0;
top: 5px;
}

.arrow-feature li h3 {
font-size: 14px;
font-size: 1em;
color: white;
}

.arrow-list {
list-style-image: url(images/arrow.png);
list-style-position: inside;
}

.arrow-list li {
padding: 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

96
.arrow-list li:last-child {
border-bottom: none;
}

.arrow-list a {
color: white;
}

.arrow-list a:hover {
color: #009ad8;
}

.photo-grid {
margin: 0 -5px;
}

.photo-grid a {
width: 33.333%;
padding: 5px;
float: left;
}

.photo-grid a img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}

.breadcrumb {
background: #262936;
border-radius: 40px;
padding: 20px 30px;
font-size: 13px;
font-size: 0.9285714286em;
}

.breadcrumb a {
color: #bfc1c8;
}

.breadcrumb a:after {

97
 content: " ";
display: inline-block;
vertical-align: middle;
width: 12px;
height: 7px;
background: url(images/arrow-gray.png) no-repeat;
margin: 0 10px;
}

.breadcrumb a:hover {
text-decoration: underline;
}

.breadcrumb span {
color: white;
}

.post {
padding: 50px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.post.single {
border-bottom: none;
}

.post:first-child {
padding-top: 0;
}

.post .entry-title {
font-size: 30px;
font-size: 2.1428571429em;
font-weight: 300;
color: white;
}

.post .featured-image {
margin-bottom: 20px;
}

.post .featured-image img {

width: 100%;

98
 max-width: 100%;
height: auto;
border-radius: 5px;
display: block;
}

.post p {
margin-bottom: 30px;
}

#temperatureMap {
margin-left: 29rem;
margin-bottom: 3rem;
margin-top: 4rem;
}

.entry-content blockquote {
margin-left: 50px;
padding-left: 50px;
position: relative;
}

.entry-content blockquote:before {
content: " ";
width: 30px;
height: 23px;
background: url(images/quote.png);
position: absolute;
top: 0;
left: 0;
}

.entry-content blockquote p {
font-size: 24px;
font-size: 1.7142857143rem;
color: #009ad8;
}

.photo {
position: relative;
padding-left: 50%;
min-height: 190px;
border-radius: 10px;

99
 overflow: hidden;
background: #262936;
margin-bottom: 30px;
}

.photo .photo-preview {
position: absolute;
width: 50%;
left: 0;
top: 0;
bottom: 0;
background-size: cover;
}

.photo .photo-details {
padding: 20px;
}

.photo .photo-title {
margin-bottom: 10px;
font-weight: 300;
}

.photo .photo-title a {
color: white;
}

.star-rating {
float: none;
overflow: hidden;
position: relative;
height: 15px;
line-height: 15px;
font-size: 16px;
width: 100px;
font-family: 'FontAwesome';
}

.star-rating:before {
content: "\f005\f005\f005\f005\f005";
color: #1e202b;
float: left;
top: 0;

100
 left: 0;
position: absolute;
}

.star-rating span {
overflow: hidden;
float: left;
top: 0;
left: 0;
position: absolute;
padding-top: 1.5em;
color: #009ad8;
font-size: 16px;
}

.star-rating span:before {
content: "\f005\f005\f005\f005\f005";
top: 0;
position: absolute;
left: 0;
}

.contact-details {
background: #262936;
border-radius: 10px;
overflow: hidden;
}

.contact-details .map {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

.contact-details .contact-info {
padding: 20px;
}

.contact-details address {
padding-left: 30px;
position: relative;
}

.contact-details address img {

101
 position: absolute;
left: 0;
top: 0;
}

.contact-details a {
margin-right: 20px;
color: #bfc1c8;
}

.contact-details a img {
margin-right: 10px;
vertical-align: middle;
}

.contact-form [class*="col"] {
padding: 0 5px;
}

.contact-form .row {
margin: 0 -5px;
}

.contact-form input:not([type="submit"]),
.contact-form textarea {
width: 100%;
padding: 15px;
margin-bottom: 10px;
color: white;
border: 2px solid #393c48;
background: transparent;
}

.contact-form input:not([type="submit"]):hover,
.contact-form input:not([type="submit"]):focus,
.contact-form textarea:hover,
.contact-form textarea:focus {
border-color: #009ad8;
}

.contact-form textarea {
min-height: 150px;
}

102
.contact-form .text-right {
text-align: right;
}

.sidebar .widget {
background: #262936;
border-radius: 10px;
padding: 20px;
margin-bottom: 30px;
}

.sidebar .widget .widget-title {

font-size: 24px;
font-size: 1.7142857143em;
margin-bottom: 20px;
font-weight: 300;
}

.sidebar .widget .arrow-list li {

border: none;
}

.sidebar .widget.top-rated {
padding: 0;
}

.sidebar .widget.top-rated .widget-title {

padding: 20px 20px 0;
}

.sidebar .widget.top-rated ul {
list-style: none;
}

.sidebar .widget.top-rated ul li {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding: 10px 20px;
}

.sidebar .widget.top-rated ul li:last-child {

border-bottom: none;
}

103
.sidebar .widget.top-rated .entry-title {
font-size: 14px;
font-size: 1em;
margin-bottom: 5px;
font-weight: 300;
}

.sidebar .widget.top-rated .entry-title a {

color: #bfc1c8;
}

.sidebar .widget.top-rated .rating strong {

color: #009ad8;
}

/*
* Footer Styles
*/
.site-footer {
background: #262936;
padding: 50px 0;
}

.site-footer .subscribe-form {
position: relative;
margin-bottom: 30px;
}

.site-footer .subscribe-form input[type="text"] {

padding: 20px 100px 20px 20px;
background: #1e202b;
width: 100%;
color: white;
}

.site-footer .subscribe-form input[type="submit"] {

position: absolute;
right: 5px;
top: 5px;
bottom: 5px;
}

104
.site-footer .social-links a {
width: 40px;
height: 40px;
display: inline-block;
border-radius: 50%;
background: #1e202b;
color: #009ad8;
text-align: center;
line-height: 2;
-webkit-transition: .3s ease;
transition: .3s ease;
font-size: 20px;
font-size: 1.4285714286em;
}

.site-footer .social-links a:hover {

background: #009ad8;
color: white;
}

/*
api
*/

#temperature {
font-size: 54px;
}

.minValues {
text-align: center;
display: inline-block;
border-radius: 5px;
height: 25px;
width: 85px;
margin: 0;

.maxValues {
text-align: center;

105
 display: inline-block;
border-radius: 5px;
height: 25px;
width: 85px;
margin: 0;

#windSpeed1 {
position: relative;
bottom: 25px;
left: 192px;
}

SING IN / SIGN UP :

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');

*{
box-sizing: border-box;
}

body {
/* font-family: 'Montserrat', sans-serif; */
/* font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; */
font-family: 'Times New Roman', Times, serif;
background: #f6f5f7;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: -20px 0 50px;
margin-top: 20px;
}

h1 {
font-weight: bold;

106
 margin: 0;
}

p{
/* font-size: 14px; */
font-size: 16px;
font-weight: 100;
line-height: 21px;
letter-spacing: 2px;
margin: 50px 0px 30px;
}

span {
font-size: 12px;
}

a{
color: rgb(230, 223, 223);
font-size: 14px;
text-decoration: none;
margin: 15px 0;
}

.container {
background: #fff;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0, 0, 0, .2), 0 10px 10px rgba(0, 0, 0, .2);
position: relative;
overflow: hidden;
width: 768px;
max-width: 100%;
min-height: 480px;
}

.form-container form {
background: #fff;
display: flex;

107
 flex-direction: column;
padding: 0 50px;
height: 100%;
justify-content: center;
align-items: center;
text-align: center;
}

/* .social-container {
margin: 20px 0;
}

.social-container a {
border: 1px solid #ddd;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 5px;
height: 40px;
width: 40px;
} */

.form-container input {
background: #eee;
border: none;
padding: 12px 15px;
margin: 8px 0;
width: 100%;
}

button {
border-radius: 20px;
border: 1px solid #000000;
/* background: #ff445c; */
background: #242630;

108
 color: #fff;
font-size: 12px;
font-weight: bold;
padding: 12px 45px;
letter-spacing: 1px;
text-transform: uppercase;
transition: transform 80ms ease-in;
}

button:active {
transform: scale(.95);
}

button:focus {
outline: none;
}

button.ghost {
background: transparent;
border-color: #fff;
}

.form-container {
position: absolute;
top: 0;
height: 100%;
transition: all .6s ease-in-out;
}

.sign-in-container {
left: 0;
width: 50%;
z-index: 2;
}

.sign-up-container {
left: 0;

109
 width: 50%;
z-index: 1;
opacity: 0;
}

.overlay-container {
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: transform .6s ease-in-out;
z-index: 100;
}

.overlay {

background: #1e202b;
background: linear-gradient(to right, #242630, #242630) no-repeat 0 0 / cover;
color: #fff;
position: relative;
left: -100%;
height: 100%;
width: 200%;
transform: translateY(0);
transition: transform .6s ease-in-out;
}

.overlay-panel {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 40px;

110
 height: 100%;
width: 50%;
text-align: center;
transform: translateY(0);
transition: transform .6s ease-in-out;
}

.overlay-right {
right: 0;
transform: translateY(0);
}

.overlay-left {
transform: translateY(-20%);
}

/* Move signin to right */

.container.right-panel-active .sign-in-container {
transform: translateY(100%);
}

/* Move overlay to left */

.container.right-panel-active .overlay-container {
transform: translateX(-100%);
}

/* Bring signup over signin */

.container.right-panel-active .sign-up-container {
transform: translateX(100%);
opacity: 1;
z-index: 5;
}

/* Move overlay back to right */

.container.right-panel-active .overlay {
transform: translateX(50%);
}

111
/* Bring back the text to center */
.container.right-panel-active .overlay-left {
transform: translateY(0);
}

/* Same effect for right */

.container.right-panel-active .overlay-right {
transform: translateY(20%);
}

.footer {
margin-top: 25px;
text-align: center;
}

.icons {
display: flex;
width: 30px;
height: 30px;
letter-spacing: 15px;
align-items: center;
}

span#samosa{
border-radius: 20px;
border: 1px solid #000000;

background: #242630;

color: #fff;
font-size: 16px;
font-weight: bold;
padding: 12px 45px;
letter-spacing: 1px;
text-transform: uppercase;

112
 transition: transform 80ms ease-in;
margin-top: 0;

#samosa:active {
transform: scale(.95);
}

#samosa:focus {
outline: none;
}

JAVA SCRIPT :

function GetInfo() {

var newName = document.getElementById("searchBar");

var city = document.getElementById("city");
city.innerHTML = "Weather in "+newName.value;

fetch('https://api.openweathermap.org/data/2.5/forecast?q='+
newName.value+'&appid=1c5f09f467eae9269fcd3e360464b306')
.then(response => response.json())
.then(data => {

// for(i=0; i<5; i++){

// document.getElementById("Day" + (i+1)).innerHTML = ;
// }

for(i=0; i<5; i++){

document.getElementById("temperature" + (i+1)).innerHTML =
Number(data.list[i].main.temp_min - 273.15).toFixed(1) + "°";
}

for(i=0; i<5; i++){

document.getElementById("windSpeed" + (i+1)).innerHTML = "Wind: "
+data.list[i].wind.speed+ " km/h";
113
 }
//Getting the min and max values for each day
for(i = 0; i<5; i++){
document.getElementById("day" + (i+1) + "Min").innerHTML = "Min: " +
Number(data.list[i].main.temp_min - 273.15).toFixed(1)+ "°";
//Number(1.3450001).toFixed(2); // 1.35
}

for(i = 0; i<5; i++){

document.getElementById("day" + (i+1) + "Max").innerHTML = "Max: " +
Number(data.list[i].main.temp_max - 273.15).toFixed(2) + "°";
}
//------------------------------------------------------------

//Getting Weather Icons

for(i = 0; i<5; i++){
document.getElementById("icon" + (i+1)).src = "http://openweathermap.org/img/wn/"+
data.list[i].weather[0].icon
+".png";
}
//------------------------------------------------------------
console.log(data)

})

.catch(err => alert("Something Went Wrong: Try Checking Your Internet Coneciton"))
}

function DefaultScreen(){
document.getElementById("searchBar").defaultValue = "Chennai";
GetInfo();
}

//--------------------------------- Date Function ---------------------//

//------------Updating the Five days ---------------------------//

var myDate = new Date();
var myDay = myDate.getDay();
var weekday = ['Sunday', 'Monday', 'Tuesday',
'Wednesday', 'Thursday', 'Friday', 'Saturday'

114
 ];

for(i=0; i<5; i++){

if(myDay + i >6){
document.getElementById("day" + (i+1)).innerHTML = weekday[myDay + i-7] ;
}
else{
document.getElementById("day" + (i+1)).innerHTML = weekday[myDay + i] ;
}

//---------------updating the intial date-------------------//

var Months = ['January', 'February', 'March', 'April',

'May', 'June', 'July', 'August', 'September',
'October', 'November', 'December'];

var currentDay = new Date();

// Get the current day name

var day = currentDay.getDate();

// Get the current month name

var month = Months[currentDay.getMonth()];
if(day<10){
document.getElementById("date1").innerHTML = "0"+day +" "+ month ;
}
else{
document.getElementById("date1").innerHTML = day +" "+ month ;
}

console.log("this is scrolling.js ")

SING IN/SING UP :

115
const signUpButton = document.getElementById('signUp');
const signInButton = document.getElementById('signIn');
const container = document.getElementById('container');

signUpButton.addEventListener('click', () =>
container.classList.add('right-panel-active'));

signInButton.addEventListener('click', () =>

116
CHAPTER 8

117
CONCLUSION & FUTURE ENHANCEMENT

118
8.1 CONCLUSION

In conclusion, this documentation serves as a comprehensive guide to the design and

development process of your weather forecasting website. The website's primary objective is to
deliver real-time weather information and forecasts to users, addressing a range of needs from
daily planning to professional meteorological analysis. Through systematic system analysis, we
have meticulously captured user requirements, assessed project feasibility, and defined essential
functionalities to meet these needs effectively.

The system configuration phase has specified the requisite hardware, software components, and
development tools necessary for constructing a robust and scalable weather service platform.
This includes considerations for data storage, processing capabilities, and external API
integrations. The system design further elaborated on the website's architecture, delineating user
interface elements for intuitive interaction, data management strategies for handling and
presenting weather data efficiently, and the flow of information from sources to end-users.

Finally, the testing section has laid out meticulous strategies to ensure the website's functionality,
accuracy, and usability. It includes plans for unit testing, integration testing, and user acceptance
testing to validate performance and responsiveness across various devices and user scenarios.
Through this meticulous approach, we aim to deliver a weather forecasting website that not only
meets but exceeds user expectations, providing a reliable and insightful resource for weather-
related information.

119
8.2 FUTURE SCOPE :

8.2.1 DATA ENHANCEMENT:

 Granular Weather Data: Provide more detailed weather data beyond the basics
(temperature, humidity, wind speed). Include:
o UV index for sun protection awareness.
o Precipitation amount with specific details (e.g., rain chance with millimeters
expected, snowfall amount).
o Air quality index.
o Visibility information.

8.2.2 USER EXPERIENCE ENHANCEMENTS:

 Interactive Features:
o Implement interactive hourly and daily forecasts for a more comprehensive view.
o Integrate weather maps for visual representation of weather patterns.
o Allow users to set up customizable alerts for specific weather conditions (e.g.,
rain exceeding a threshold, reaching a certain temperature).
 Mobile Optimization: Ensure the website is fully responsive and user-friendly across all
mobile devices (smartphones, tablets) for on-the-go access.
 User Accounts :
o Allow users to create accounts to save preferred locations for quick weather
checks.
o Enable users to access historical weather data for specific locations.

8.2.3 ADVANCED FUNCTIONALITY:

 Data Visualization: Incorporate charts, graphs, and other data visualization techniques to
present complex weather information in an easily understandable format.
 Hyperlocal Forecasts: Explore options for providing hyperlocal forecasts with
microclimate data relevant to specific neighborhoods or user locations.
 Weather Alerts and Warnings: Integrate with weather alert systems to automatically
notify users of severe weather warnings or advisories in their area.

120
 AI-Powered Insights: In the future, consider implementing AI (Artificial Intelligence) to
analyze weather patterns and offer personalized weather predictions or recommendations
based on user preferences (e.g., suggesting appropriate clothing for the forecast).

121
CHAPTER 9

122
SCREENSHOT

123
SCREENSHOT:

HOME PAGE :

 By default, it will show the weather in Chennai



124
 It will show the different souce of map’s

125
ABOUT US PAGE :

126
SING IN PAGE :

SING UP PAGE :

127
CHAPATER 10

128
FORMS AND REPORTS

129
10.1 FORMS

1. Location Selection:
- Dropdown menu allowing users to select their location from a list of cities or regions.
2. Forecast Type:
- Radio buttons allowing users to specify the type of forecast they're interested in: current
conditions, hourly forecast, or daily forecast.
3. Submit Button:
- Provide a button for users to submit their preferences and generate the weather forecast
report.

10.2 REPORTS

1) Daily Forecast: Include a summary of the weather forecast for each day of the selected
date range, highlighting expected temperature highs and lows, precipitation amounts, and
any notable weather events.
2) Visuals: Enhance the report with visual elements such as charts, graphs, or icons to make
the forecast information more engaging and easy to understand.
3) Current Conditions: Provide an overview of the current weather conditions, including
temperature, humidity, wind speed, and precipitation.
4) Location and Date : Display the selected location and date for which the weather forecast
is generated at the top of the report.

130
CHAPTER 11

131
BIBLIOGRAPHY

132
11.1 BIBLIOGRAPHY:

1. .Singh, Dan, Amreek Singh, and Ashwagosha Ganju. "Site-specific analog weather-
forecast system for northwest Himalaya, India." Annals of Glaciology 49 (2008): 224–30.
http://dx.doi.org/10.3189/172756408787815013.
2. Wible, B. "Weather Forecast." Science 329, no. 5998 (September 16, 2010): 1443.
http://dx.doi.org/10.1126/science.329.5998.1443-a.
3. O'Malley, Mary. "The Weather Forecast." Estudios Irlandeses, no. 11 (March 15, 2016):
232–33. http://dx.doi.org/10.24162/ei2015-6535.

11.1.1 BOOKS

1. Glover, David. The weather forecast. Aylesbury: Ginn, 1991.

2. David, Glover. The weather forecast. Aylesbury: Ginn, 1997.
3. Cowley, Joy. The weather forecast. Bothell, WA: Wright Group, 2000.

11.1.2 WEB REFERANCE:

1. https.wikipedia.com
2. https.w3schools.com
3. https.reactjs.org
4. https://dev.to/achowba/building-a-modal-in-react- 15hg#::targetText=Open%20the
%20Modal.js%20file,%7B%7B%20transform%3A%20props.sho w%20%3F
5. https://github.com/

133