-
Notifications
You must be signed in to change notification settings - Fork 108
/
index.html
114 lines (109 loc) · 4.65 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Maa-Vimala</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body id="body">
<header>
<nav class="navbar">
<h1 id="logoName">Maa-Vimala</h1>
<ul class="nav-links">
<li><i class="fa-solid fa-house"></i><a href="#home"> Home </a></li>
<li><i class="fa-solid fa-info-circle"></i><a href="#about"> About Us </a></li>
<li><i class="fa-solid fa-concierge-bell"></i><a href="#services"> Services </a></li>
<li><i class="fa-solid fa-star"></i><a href="#reviews"> Reviews </a></li>
<li><i class="fa-solid fa-envelope"></i><a href="#contact"> Contact Us </a></li>
</ul>
</nav>
</header>
<!-- <div>
<div class="nav-info">
<p id="time">22 : 33 AM</p>
<div class="nav-info-ele">
<p id="date">24 Aug 2022</p>
<div id="nav-extra">
<span id="whether">Temp : c</span>
<span id="wind">Wind : 17.65</span>
</div>
</div>
</div> -->
</div>
<div>
<div>
<div>
<h1 id="search-txt">Start Typing To Search...</h1>
</div>
<!-- <input type="text" name="" id="input_text"> -->
<div class="search-container">
<input type="text" id="input_text" class="search-bar" placeholder="">
<i class="fas fa-search search-icon"></i>
</div>
</div>
<div>
<ul id="content" class="max-h-[300px] overflow-y-scroll">
<!-- <li>Search On<div>
<i class="fa fa-google"></i>
<i class="fa fa-youtube"></i>
</div></li>
<li>Wikipedia</li>
<li>Maths</li>
<li>Word Search</li> -->
</ul>
</div>
<div id="loader"></div>
<div class="result" id="result">
</div>
<div id="link">
<a href="https://github.com/Web403/Maa-Vimala/blob/main/README.md">Read Me</a>
</div>
</div>
<script>
let time = document.getElementById('time');
let date = document.getElementById('date');
let whether = document.getElementById('whether');
let wind = document.getElementById('wind');
const currentDate = new Date();
const day = currentDate.getDate();
const month = currentDate.getMonth() + 1;
const year = currentDate.getFullYear();
const hour = currentDate.getHours();
const minute = currentDate.getMinutes();
var months = [ "Jan", "Feb", "March", "April", "May", "June",
"July", "Aug", "Sep", "Oct", "Nov", "Dec" ];
let timeext;
hour < 12? timeext = "AM" : timeext = "PM";
setInterval(() => {
time.innerText = hour + " : " + minute + " " + timeext;
}, 60000);
date.innerText = day + " " + months[month] + " " + year;
setInterval(() => {
time.innerText = ""
}, 60000);
function getlocation() {
if (navigator.geolocation) {
console.log("done")
navigator.geolocation.getCurrentPosition(showPosition)
}
else {
console.log("Sorry! your browser is not supporting")
}
}
async function showPosition(position) {
const response = await fetch(`https://api.open-meteo.com/v1/forecast?latitude=${position.coords.latitude}&longitude=${position.coords.longitude}¤t=temperature_2m,wind_speed_10m&hourly=temperature_2m,relative_humidity_2m,wind_speed_10m`);
const wdata = await response.json();
console.log(wdata);
whether.innerText = "Temp : " + wdata.current.temperature_2m + " c";
wind.innerText = "Wind : " + wdata.current.wind_speed_10m + " KM/H";
}
getlocation()
</script>
<script src="script.js"></script>
</body>
</html>