Weather app

calc page link.txt

@@ -0,0 +1 @@
+https://codepen.io/subhash2807/pen/xxxWGXe

login page link.txt

@@ -0,0 +1,145 @@
+https://codepen.io/subhash2807/pen/dyympYd
+
+HTML CODE:
+<!doctype html>
+<html>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <script>
+function clck()
+{
+    alert('successfully logined');
+}</script>
+    <link href="cont.css" rel="stylesheet">
+    <head>
+        <title>
+            login form
+        </title>
+    </head>
+    <body>
+        <div id="sg1" class="sg" align="center">
+            <img src="https://raw.githubusercontent.com/Subhash2807/test1/master/he%20(1).jpg">
+            <h1>LOGIN PAGE</h1><br>
+            <!-- <h2>Username</h2><br> -->
+            <input  name="username" placeholder="Username" type="text"><br><br>
+            <input name="password" type="password" placeholder="Password"><br><br>
+            <input type="checkbox"  id="check" valign="left"><p style="font-size:20px">Remember me</p><br>
+            <button onclick="clck()" >Login</button><br><br>
+            <a href="http://www.google.com">forget password?</a><br>
+        </div>
+    </body>
+</html>
+
+
+CSS CODE:
+
+*{
+    padding:0px;
+    margin:0px;
+}
+body{
+    background-color: aqua;
+}
+#sg1
+{
+    height: 70vh;
+    width:50%;
+    background-color: rgb(106, 106, 211);
+    position: absolute;
+    left:50%;
+    top:45vh;
+    margin-top:-35vh;
+    margin-left:-25%;
+    border:15px solid rgba(61, 16, 185, 0.863);
+    border-radius:50px;
+
+
+}
+input {
+    height: 6vh;
+    color:red;
+  text-align:center;
+    width:85%;
+    font-size:4vw;
+    border-radius:20px;
+}
+img:hover{
+    opacity: 1;
+
+
+}
+img {
+    border-radius:50%;
+    height:26vh;
+    width:40%;
+    position: absolute;
+    left:50%;
+    margin-left:-18%;
+    margin-top:-15vh;
+    opacity:0.9;
+
+}
+h1{
+    margin-top:12vh;
+    /* font-size: 5vw; */
+
+
+    color:rgba(206, 19, 19, 0.918);
+    text-decoration-style: solid;
+    font-style:bold;
+}
+
+::placeholder {
+    color:red;
+    text-align:center;
+    font-size:3.5vw;
+    margin: 0 auto;
+    opacity:0.4;
+}
+button{
+    height:8vh;
+    width:30%;
+    font-size:3vw;
+    background-color: red;
+    border:3px rgb(66, 2, 2) solid;
+}
+button:hover
+{
+    height:6.5vh;
+    width:31%;
+}
+a:link{
+color:yellow;
+    /* font-size:4vw; */
+    background-color: transparent;
+
+}
+#check
+{
+        height: 4vh;
+}
+@media screen and (min-width: 1000px) {
+    h1 {
+      font-size: 60px;
+    }
+    ::placeholder{
+        font-size:40px
+          margin-top:-10px;
+    }
+    a:link {
+        font-size:30px;
+    }
+  }
+
+
+  @media screen and (max-width: 1000px) {
+    h1 {
+      font-size: 30px;
+    }
+    ::placeholder{
+        font-size:30px
+    }
+    a:link {
+        font-size:20px;
+    }
+  }
+

weather.css

@@ -0,0 +1,127 @@
+*{
+    padding:0px;
+    margin:0px;
+}
+body{
+    font-family: 'Oswald',sans-seriff;
+    background-image: url('https://github.com/Subhash2807/test1/blob/master/ian-tuck-lieECYO-yTo-unsplash.jpg?raw=true');
+    background-attachment: fixed;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-color:rgba(170, 183, 197, 0.959);
+
+}
+
+@media screen and (min-width: 500px){
+#WeatherContent {
+
+    height: 500px;
+    width :400px;
+    background-color:#769BBE;
+    position:absolute;
+    left:50%;
+    top:50%;
+   transform: translate(-50%,-50%);
+   border-radius:50px;
+   box-shadow:  12px 12px 15px #444141;
+   font-size: 20px;
+
+
+}
+input{
+    height:30px;
+    width:300px;
+    /* border-radius:20px; */
+    background:transparent;
+    border:0px;
+    outline:0px;
+    border-bottom:3px solid rgba(1,1,11,1);
+    text-align: center;
+    font-size: 25px;
+}
+::placeholder{
+color:black;
+font-size:20px;
+text-align: center;
+}
+#dis{
+padding-top:50px;
+
+}
+button{
+    margin-top:30px;
+    height:40px;
+    width:120px;
+    font-size:20px;
+    border-radius: 12px;
+    border:0;
+    box-shadow: 3px 3px 3px rgba(1,1,11,1);
+    outline:none;
+}
+
+}
+@media screen and (max-width: 500px)
+{
+
+#WeatherContent {
+
+    height: 300px;
+    width :200px;
+    background-color:#769BBE;
+    position:absolute;
+    left:50%;
+    top:50%;
+   transform: translate(-50%,-50%);
+   border-radius:25px;
+   box-shadow:  6px 6px 8px #444141;
+   font-size: 20px;
+
+
+
+}
+input{
+
+    height:15px;
+    width:150px;
+    /* border-radius:20px; */
+    background:transparent;
+    border:0px;
+    outline:0px;
+    border-bottom:1.5px solid rgb(28, 32, 39);
+    text-align: center;
+    font-size: 12px;
+    margin-top:-12px;
+}
+::placeholder{
+color:black;
+font-size:10px;
+text-align: center;
+/* font-weight: ; */
+}
+#dis{
+padding-top:50px;
+
+}
+button{
+    margin-top:15px;
+    height:20px;
+    width:60px;
+    font-size:10px;
+    border-radius: 6px;
+    border:0;
+    box-shadow: 1.5px 1.5px 1.5px rgba(1,1,11,1);
+    outline:none;
+    margin-top:25px
+}
+#temp{
+    font-size:13px;
+}
+img{
+    height: 50px;
+}
+#dis{
+    font-size:12.5px;
+    margin-top:-15px;
+}
+}

weather.html

@@ -0,0 +1,31 @@
+<!doctype html>
+<html>
+    <head>
+            <link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet">
+            <meta charset="UTF-8">
+            <meta name="discription" content="get the latest weather updates">
+            <meta name="Keywords" content="Weather,HTML,CSS,JavaScript,">
+            <meta name="author" content="Subhash">
+            <meta name="viewport" content="width=device-width, initial-scale=1.0">
+            <link rel="icon" href="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRZZvVnYYC2dzQ5EzgdJl1sR-raQOF74DouXQzzl4-7_xYcJTZz" type="image/gif" sizes="16x16">
+            <link rel="stylesheet" href="weather.css" type="text/css">
+            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+            <title>
+            Weather app using api.
+             </title>
+        <script src="tese.js" type="text/javascript"></script>
+    </head>
+    <body onload="defult()">
+        <div id="WeatherContent" align="center">
+            <div id="inpt">
+                <div  id="dis"><H3>WEATHER APPLICATION<br><br></H3></div>
+                <input id="city" placeholder="Enter the city name"><br>
+                <button onclick="weathr()">
+                    WEATHER
+                </button>
+                <p id ="temp"></p> 
+                <img src="" id="img">          
+            </div>
+        </div>
+    </body>
+</html>

weather.js

@@ -0,0 +1,45 @@
+function weathr(){
+
+    var    city1 = document.getElementById('city').value;
+    var  link_api='http://api.openweathermap.org/data/2.5/weather?q='+city1+'&appid=e8cde246c8e175455f7354975fd34a4a&units=metric';
+    fetch(link_api)
+   .then(
+     function(valu) {
+     if (valu.status !== 200) {
+      document.getElementById('temp').innerHTML='<br>Please enter correct city';
+     return;
+    } 
+
+valu.json().then(function(data) {
+document.getElementById('temp').innerHTML='<br><p>City : ' + city1 + ' <p>Temperature : '+ (data.main.temp) + '&#8451;</p><p>Humidity : '+data.main.humidity+'%</p>';
+document.getElementById('img').src='https://raw.githubusercontent.com/Subhash2807/Weather-App-JavaScript/master/icons/' + data.weather[0].icon+'.png';
+// imge(data.weather[0].main);
+});
+}
+)
+;
+}
+
+function defult(){
+
+    var  link_api='http://api.openweathermap.org/data/2.5/weather?q=lucknow&appid=e8cde246c8e175455f7354975fd34a4a&units=metric';
+    fetch(link_api)
+   .then(
+     function(valu) {
+
+valu.json().then(function(data) {
+document.getElementById('temp').innerHTML='<br><p>City : Lucknow <p>Temperature : '+ Math.floor(data.main.temp) +'&#8451;</p><p>Humidity : '+data.main.humidity+' %</p>';
+document.getElementById('img').src='https://raw.githubusercontent.com/Subhash2807/Weather-App-JavaScript/master/icons/' + data.weather[0].icon+'.png';
+imge(data.weather[0].main);
+
+});
+}
+)
+.catch(function(err) {
+console.log('Fetch Error :-S', err);
+});
+}
+
+
+
+