Skip to content

Commit 205463d

Browse files
sgtbonsaisgtbonsai
committed
Added weather feature (still under development)
1 parent 186bcf4 commit 205463d

File tree

5 files changed

+448
-5
lines changed

5 files changed

+448
-5
lines changed

‎home/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
<!-- title -->
3636
<div class="container">
3737
<div class="typed-out">
38-
<h1>sgtbonsai</h1>
38+
<h1>Welcome</h1>
3939
</div>
4040
</div>
4141
<br> <br> <br> <br>
@@ -45,7 +45,7 @@ <h1>sgtbonsai</h1>
4545
</div>
4646
<br>
4747
<div style="text-align: center; color: white; padding-left: 10%; padding-right: 10%; font-size: 20px;" class="fade-in">
48-
My name is Leo and i'm a 17 year old web developer from Dallas, Texas. <br><br> I technically first started coding in 2017 when I learned very basic HTML, but that stopped within a month. I later restarted coding in January 2021 when I found out you could code a Discord Bot (Check out <a href="/projects/" style="text-decoration: none; color: gray;">projects</a> to learn more.), and I have been going ever since. Now I know basic JavaScript, HTML5, CSS3, Python, and very VERY basic C#.
48+
My name is Leo and i'm a 17 year old web developer from the Dallas/Fort Worth metroplex in Texas. <br><br> I technically first started coding in 2017 when I learned very basic HTML, but that stopped within a month. I later restarted coding in January 2021 when I found out you could code a Discord Bot (Check out <a href="/projects/" style="text-decoration: none; color: gray;">projects</a> to learn more.), and I have been going ever since. Now I know basic JavaScript, HTML5, CSS3, Python, and very VERY basic C#.
4949
</div>
5050

5151
<!-- <div class="fade-in">

‎projects/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ <h1>Projects</h1>
4545
During my time as a "developer", I have contributed to many projects, as well as coded up my own little projects (all of which are on my GitHub page).
4646
</div> <br>
4747
<div style="text-align: center; color: white; padding-left: 10%; padding-right: 10%; font-size: 20px;" class="fade-in">
48-
Some of those projects include: <br><br> Frontend developer for <a style="text-decoration: none; color: gray;" target=”_blank” href="https://interact.novapro.net/">Interact</a> <br> Lead developer of the <a style="text-decoration: none; color: gray;" href="/comet/">Comet</a> Discord bot (Hosted by Daniel Kravec) <br> A dynamically updating weather website (set locations tho :/) <br> <a style="text-decoration: none; color: gray;" href="/rcg/">Random County Generator</a> <br> This website ;) <br>
48+
Some of those projects include: <br><br> Frontend developer for <a style="text-decoration: none; color: gray;" target=”_blank” href="https://interact.novapro.net/">Interact</a> <br> Lead developer of the <a style="text-decoration: none; color: gray;" href="/comet/">Comet</a> Discord bot (Hosted by Daniel Kravec) <br> A dynamically updating weather website (set locations tho) <br> <a style="text-decoration: none; color: gray;" href="/rcg/">Random County Generator</a> <br> This website ;) <br>
4949
</div>
5050

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

‎weather/index.html

+84-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,85 @@
1+
<!DOCTYPE html>
12
<html>
2-
<h1>not done yet</h1>
3-
</html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width">
7+
<title>replit</title>
8+
<link href="style.css" rel="stylesheet" type="text/css" />
9+
</head>
10+
11+
<body>
12+
<!-- City Names -->
13+
<div class="title">
14+
<h1>Current Conditions</h1>
15+
</div>
16+
<br>
17+
<div class="cityName">
18+
<h1>Seattle, WA</h1>
19+
</div>
20+
<div class=weatherWA>
21+
<h1 id="WATEMP"></h1>
22+
</div>
23+
<div class=iconWA>
24+
<h1>&#8203;</h1>
25+
</div>
26+
<div class=timeWA>
27+
<h1>Time</h1>
28+
</div>
29+
<br>
30+
<div class="cityName">
31+
<h1>New York, NY</h1>
32+
</div>
33+
<div class=weatherNY>
34+
<h1 id="NYTEMP"></h1>
35+
</div>
36+
<div class=iconNY>
37+
<h1>&#8203;</h1>
38+
</div>
39+
<div class=timeNY>
40+
<h1>Time</h1>
41+
</div>
42+
<br>
43+
<div class="cityName">
44+
<h1>Miami, FL</h1>
45+
</div>
46+
<div class=weatherFL>
47+
<h1 id="FLTEMP"></h1>
48+
</div>
49+
<div class=iconFL>
50+
<h1>&#8203;</h1>
51+
</div>
52+
<div class=timeFL>
53+
<h1>Time</h1>
54+
</div>
55+
<br>
56+
<div class="cityName">
57+
<h1>Dallas, TX</h1>
58+
</div>
59+
<div class="weatherTX">
60+
<h1 id="TXTEMP"></h1>
61+
</div>
62+
<div class=iconTX>
63+
<h1 id="TXFEELS"></h1>
64+
</div>
65+
<div class=timeTX>
66+
<h1>Time</h1>
67+
</div>
68+
<br>
69+
<div class="cityName">
70+
<h1>Los Angeles, CA</h1>
71+
</div>
72+
<div class=weatherCA>
73+
<h1 id="CATEMP"></h1>
74+
</div>
75+
<div class=iconCA>
76+
<h1>&#8203;</h1>
77+
</div>
78+
<div class=timeCA>
79+
<h1>Time</h1>
80+
</div>
81+
<!-- Temperatures -->
82+
<script src="index.js"></script>
83+
</body>
84+
85+
</html>

‎weather/index.js

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
//TEXAS
2+
const weatherTX = fetch('https://api.openweathermap.org/data/2.5/weather?id=4684888&appid=a259da0eda6a4eb9f60f0d3d55f4997a&units=imperial')
3+
.then(function(resp) { return resp.json() })
4+
.then(function(data) {
5+
console.log(data);
6+
TXTEMP.innerHTML = Math.round(data.main.temp) + "˚F"
7+
})
8+
9+
const TXTemp = document.getElementById("tempTX");
10+
11+
const TXweather = fetch('https://api.openweathermap.org/data/2.5/weather?id=4684888&appid=a259da0eda6a4eb9f60f0d3d55f4997a&units=imperial')
12+
.then(function(resp) { return resp.json() })
13+
.then(function(data) {
14+
console.log(data);
15+
TXFEELS.innerHTML = Math.round(data.main.feels_like) + "˚F" })
16+
const TXFeels = document.getElementById("feelsTX");
17+
18+
19+
//WASHINGTON
20+
const weatherWA = fetch('https://api.openweathermap.org/data/2.5/weather?id=5809844&appid=a259da0eda6a4eb9f60f0d3d55f4997a&units=imperial')
21+
.then(function(resp) { return resp.json() })
22+
.then(function(data) {
23+
console.log(data);
24+
WATEMP.innerHTML = Math.round(data.main.temp) + "˚F"
25+
})
26+
27+
const WATemp = document.getElementById("tempWA");
28+
29+
//NEW YORK
30+
const weatherNY = fetch('https://api.openweathermap.org/data/2.5/weather?id=5128581&appid=a259da0eda6a4eb9f60f0d3d55f4997a&units=imperial')
31+
.then(function(resp) { return resp.json() })
32+
.then(function(data) {
33+
console.log(data);
34+
NYTEMP.innerHTML = Math.round(data.main.temp) + "˚F"
35+
})
36+
37+
const NYTemp = document.getElementById("tempWA");
38+
39+
//FLORIDA
40+
const weatherFL = fetch('https://api.openweathermap.org/data/2.5/weather?id=4164138&appid=a259da0eda6a4eb9f60f0d3d55f4997a&units=imperial')
41+
.then(function(resp) { return resp.json() })
42+
.then(function(data) {
43+
console.log(data);
44+
FLTEMP.innerHTML = Math.round(data.main.temp) + "˚F"
45+
})
46+
47+
const FLTemp = document.getElementById("tempFL");
48+
49+
//CALIFORNIA
50+
const weatherCA = fetch('https://api.openweathermap.org/data/2.5/weather?id=5368361&appid=a259da0eda6a4eb9f60f0d3d55f4997a&units=imperial')
51+
.then(function(resp) { return resp.json() })
52+
.then(function(data) {
53+
console.log(data);
54+
CATEMP.innerHTML = Math.round(data.main.temp) + "˚F"
55+
})
56+
57+
const CATemp = document.getElementById("tempCA");
58+
59+
document.getElementById('icon').src = `http://openweathermap.org/img/w/${d.weather[0].icon}.png`;
60+

0 commit comments

Comments
 (0)