Scribd
Upload
18 views

Minor Project Report

Uploaded by

kunalgame54
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
18 views

Minor Project Report

Uploaded by

kunalgame54
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 26

DECLARATION

I certify that

a. The work in this report is original and has been done by me.
b. I have followed the guidelines provided by the institute in preparing the report.
c. I have confirmed to the norms and guidelines given in the Ethical code of
conduct of the institute.
d. Whenever I have used materials (data, theoretical analysis, figures, and text)
from other sources, I have given due credit to them by citing them in the text
of the report and giving their details in the references. Further, I have taken
permission from the copyright owners of the sources, whenever necessary.

Signature of Student
Abstract

Weather Application is a web app based on languages html, css and javascript.
This app is made to check the live weather status of a place just by typing the name
of tha city. In this we make use of three files - .html, .css and .js All filesare linked
in html file.

On this app there is a search city box a user just have to type the city name in the box
and then the live weather status of the city is fetched by the app with the help of
OpenWeather API and displayed on the screen.
CONTENTS
Cover Page 01

Declaration 02

Abstract 03

Chapter 1 Introduction to Web Development 05

Chapter 2 HTML Fundamentals 07

Chapter 3 CSS Introduction 09

Chapter 4 Ways to insert CSS 10

Chapter 5 JavaScript Introduction 14


Chapter 6 Web API Introduction 17
Project 18
Conclusion 27
1. Introduction to Web Development

The term web development connected with development of webpages. It refers to


building and designing of the websites and then maintaining them. Its work is to
create a website that looks, great, work faster and perform well.

It includes fields like:

• Web Designing
• Web Publishing
• Web Programming
• Database Management

Web development skills are demanded highly worldwide and paid well too. So
making career in web development is a great option. It is one of the easiest
accessible higher paid fields as you do not need a traditional university degree to
become qualified.

The field of web development is divided into:-

1. Front-End( the user site)


2. Back-End(the server side)

1.1 Front-End:-
A front-end dev takes care of layout, design and interactivity using HTML,
CSS and JavaScript. They take an idea from the drawing board and turn it into
reality.

What you see and what you use, such as the visual aspect of the website, the
drop-down menus and the text, are all brought together by the front-end dev,
who writes a series of programmes to bind and structure the elements, make
them look good and add interactivity. These programmes are run through a
browser.

1.2 Back-End:-

The backend developer engineers what is going on behind the scenes. This is
where the data is stored, and without this data, there would be no frontend.
The backend of the web consists of the server that hosts the website, an
application for running it and a database to contain the data.

The backend dev uses computer programmes to ensure that the server, the
application and the database run smoothly together.

1.3 Full Stack Development:-

In full stack development both front end and back end programming takes
place.

The developer is known as full stack developer


2.HTML Fundamentals

• HTML stands for Hyper Text Markup Language


• HTML is the standard markup language for creating Web pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content

2.1 Structure of HTML Document:-

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>t Heading</h1>
<p> Paragraph.</p>

</body>
</html>
• The <!DOCTYPE html> declaration defines that this document is an HTML5
document
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the HTML page

• The <title> element specifies a title for the HTML page (which is shown in the
browser's title bar or in the page's tab)
• The <body> element defines the document's body, and is a container for all
the visible contents, such as headings, paragraphs, images, hyperlinks, tables,
lists, etc.

• The <h1> element defines a large heading


• The <p> element defines a paragraph

2.2 HTML Attributes:-

• All HTML elements can have attributes


• Attributes provide additional information about elements
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs like: name="value"
• The href attribute of <a> specifies the URL of the page the link goes to
• The src attribute of <img> specifies the path to the image to be displayed
• The width and height attributes of <img> provide size information for images
• The alt attribute of <img> provides an alternate text for an image
• The style attribute is used to add styles to an element, such as color, font, size,
and more
• The lang attribute of the <html> tag declares the language of the Web page
• The title attribute defines some extra information about an elemen
2.3 The <input> Element

The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on the type attribute.

 <input type = “text”> Displays a single line input field

 <input type = “radio”> Displays a radio button


 <input type = “checkbox”> Displays a checkbox
▪ <input type = “submit”>Displays a submit button
▪ <input type = “button”> Displays a clickable button
3 CSS Introduction

• CSS stands for Cascading Style Sheets


• CSS describes how HTML elements are to be displayed on screen, paper, or in
other media
• CSS saves a lot of work. It can control the layout of multiple web pages all at
once
• External stylesheets are stored in CSS files

3.1 CSS Syntax

A CSS rule-set consists of a selector and a declaration block:

Selector Declaration Declaration

H1 {color : red; font-size : 12px}

Property value property value

• The selector points to the HTML element you want to style.


• The declaration block contains one or more declarations separated by
semicolons.
• Each declaration includes a CSS property name and a value, separated
by a colon.
• Multiple CSS declarations are separated with semicolons, and
declaration blocks are surrounded by curly braces.
4 Ways to Insert CSS
There are three ways of inserting a style sheet:

• External CSS
• Internal CSS
• Inline CSS

External CSS

With an external style sheet, you can change the look of an entire website by
changing just one file!

Each HTML page must include a reference to the external style sheet file inside the
<link> element, inside the head section.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
style.css

body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}

Internal CSS

An internal style sheet may be used if one single HTML page has a unique
style.

The internal style is defined inside the <style> element, inside the head
section.

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}

</style>
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>

Inline CSS

An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style
attribute can contain any CSS property.

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>


<p style="color:red;">This is a paragraph.</p>

</body>
</html>
5 JavaScript Introduction

• JavaScript is the Programming Language for the Web.


• JavaScript can update and change both HTML and CSS.
• JavaScript can calculate, manipulate and validate data.

➔ JavaScript Can Change HTML Content

One of many JavaScript HTML methods is getElementById().

document.getElementById("demo").innerHTML = "Hello";

➔ JavaScript Can Change HTML Styles (CSS)

document.getElementById("demo").style.fontSize = "40px";

➔ JavaScript Can Hide HTML Elements

document.getElementById("demo").style.display = "none";

➔ JavaScript Can Show HTML Elements

document.getElementById("demo").style.display = "block";
5.1 JavaScript Syntax

JavaScript syntax is the set of rules, how JavaScript programs are constructed:

var x, y, z; // Declare Variables


x = 5; y = 6; // Assign Values
z = x + y; // Compute Values

JavaScript is Case Sensitive

Declaring (Creating) JavaScript Variables

Creating a variable in JavaScript is called "declaring" a variable.

You declare a JavaScript variable with the var keyword:

var name;

JavaScript Function Syntax

A JavaScript function is defined with the function keyword, followed by


a name, followed by parentheses ().

Function names can contain letters, digits, underscores, and dollar signs (same
rules as variables).

function name(parameter1, parameter2, parameter3) {


// code to be executed
}
5.2 JavaScript Objects

var person = {firstName:"Sandhya", lastName:"Chauhan", age:20,


eyeColor:"black"};

Accessing Object Properties

You can access object properties in two ways:

• objectName.propertyName

• objectName["propertyName"]

Object Methods
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
6 Web API Introduction

A Web API is a developer's dream.

 It can extend the functionality of the browser


 It can greatly simplify complex functions
 It can provide easy syntax to complex code

API stands for Application Programming Interface.

A Web API is an application programming interface for the Web.

A Browser API can extend the functionality of a web browser.

A Server API can extend the functionality of a web server.

Browser APIs
All browsers have a set of built-in Web APIs to support complex operations, and to help
accessing data.

Third Party APIs


Third party APIs are not built into our browser.

To use these APIs, we will have to download the code from the Web.

Examples:

 YouTube API - Allows us to display videos on a web site.


 Twitter API - Allows us to display Tweets on a web site.
 Facebook API - Allows us to display Facebook info on a web site.
PROJECT
Language Used :- HTML ,CSS, JAVASCRIPT.

Html :-
<!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>Weather App</title>

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

</head>

<body>

<div class="app-main">

<div class="searchInputBox">

<input type="text" id="input-box" class="input-box" placeholder="Enter City Name ..."


autocomplete="off">

</div>

<div class="weather-body">

<div class="location-details">

<div class="city" id="city">Amravati, IN</div>

<div class="date" id="date">10 June (Wednesday), 2020</div>

</div>

<div class="weather-status">

<div class="temp" id="temp">34&deg;C</div>


<div class="min-max" id="min-max">32&deg;C (min) / 34&deg;C (max)</div>

<div class="weather" id="weather">Clear</div>

<div class="img"></div>

</div>

</div>

</div>

<script src="script.js"></script>

</body>

</html>

CSS :-
*{

margin: 0;

padding: 0;

box-sizing: border-box;

body {

background-image: url('12.jpg');

height: 100vh;

overflow: hidden;

background-repeat: no-repeat;

background-position: top center;

font-family: Arial, Helvetica, sans-serif;

background-size: cover;

}
.app-main {

width: 70vh;

margin: 70px auto;

background-color: rgba(240, 248, 255, 0.6);

padding: 20px;

text-align: center;

.app-main > * {

margin-bottom: 10px;

.input-box {

width: 100%;

background-color: rgba(255, 255, 255, 0.6);

border: none;

outline: none;

color: #582233;

font-size: 1.2rem;

height: 50px;

border-radius: 5px;

padding: 0 10px;

text-align: center;

.input-box{

background-color: rgba(255, 255, 255, alpha);

}
.weather-body{

display: none;

color: #582233;

padding: 20px;

line-height: 2rem;

border-radius: 10px;

background-color: rgba(255, 255, 255, 0.6);

height: 50vh;

.location-details{

font-weight: bold;

.weather-status{

padding: 20px;

.temp{

font-size: 50pt;

font-weight: 700;

margin: 20px 0;

text-shadow: 2px 4px rgba(0, 0, 0, 0.3);

.min-max, .weather {

font-size: 12pt;

font-weight: 600;

}
JAVASCRIPT:-
const weatherApi = {

key: "566b60ef3dbbdde5589a013ed682720a",

baseUrl: "https://api.openweathermap.org/data/2.5/weather"

const searchInputBox = document.getElementById('input-box');

//Event Listner function on keypress

searchInputBox.addEventListener('keypress', (event) => {

if(event.keyCode == 13){

console.log(searchInputBox.value);

getWeatherReport(searchInputBox.value);

document.querySelector('.weather-body').style.display = "block";

});

// Get Weather Report

function getWeatherReport(city){

fetch(`${weatherApi.baseUrl}?q=${city}&appid=${weatherApi.key}&units=metric`)

.then(weather => {

return weather.json();

}).then(showWeatherReport);

// Show weather report


function showWeatherReport(weather){

console.log(weather);

let city = document.getElementById('city');

city.innerText = `${weather.name}, ${weather.sys.country}`;

let temperature = document.getElementById('temp');

temperature.innerHTML = `${Math.round(weather.main.temp)}&deg;C`;

let minMaxTemp = document.getElementById('min-max');

minMaxTemp.innerHTML = `${Math.floor(weather.main.temp_min)}&deg;C (min) /


${Math.ceil(weather.main.temp_max)}&deg;C (max)`;

let weatherType = document.getElementById('weather');

weatherType.innerText = `${weather.weather[0].main}`;

let date = document.getElementById('date');

let todayDate = new Date();

date.innerText = dateManage(todayDate);

if(weatherType.textContent == 'Clear'){

document.body.style.backgroundImage = "url('image/clear.jpg')"

}else if(weatherType.textContent == 'Clouds'){

document.body.style.backgroundImage = "url('image/clouds.jpg')"

else if(weatherType.textContent == 'Rain'){

document.body.style.backgroundImage = "url('image/rainy.jpg')"

else if(weatherType.textContent == 'Snow'){


document.body.style.backgroundImage = "url('image/snow.gif')"

else if(weatherType.textContent == 'Mist'){

document.body.style.backgroundImage = "url('image/foggy-fog.gif')"

else if(weatherType.textContent == 'Smoke'){

document.body.style.backgroundImage = "url('image/foggy-fog.gif')"

else if(weatherType.textContent == 'Thunderstorm'){

document.body.style.backgroundImage = "url('image/thunder.gif')"

// Date manage

function dateManage(dateArg){

let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September",
"October", "November", "December"];

let year = dateArg.getFullYear();

let month = months[dateArg.getMonth()];

let date = dateArg.getDate();

let day = days[dateArg.getDay()];

return `${date} ${month} ${day}, ${year}`;}


CONCLUSION
This project has really been a good start and informative. It has made us understand and learn how
things go on frontend.

The scope of this project is to polish our skills, find weather of a particular place and to
accomplish goodgrades.

References
https://www.w3schools.com/

You might also like