wip
This commit is contained in:
commit
a94e750b61
|
|
@ -0,0 +1,34 @@
|
|||
# dependencies (bun install)
|
||||
node_modules
|
||||
|
||||
# output
|
||||
out
|
||||
dist
|
||||
*.tgz
|
||||
|
||||
# code coverage
|
||||
coverage
|
||||
*.lcov
|
||||
|
||||
# logs
|
||||
logs
|
||||
_.log
|
||||
report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
|
||||
|
||||
# dotenv environment variable files
|
||||
.env
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
.env.local
|
||||
|
||||
# caches
|
||||
.eslintcache
|
||||
.cache
|
||||
*.tsbuildinfo
|
||||
|
||||
# IntelliJ based IDEs
|
||||
.idea
|
||||
|
||||
# Finder (MacOS) folder config
|
||||
.DS_Store
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
# Weather
|
||||
|
||||
To install dependencies:
|
||||
|
||||
```bash
|
||||
bun install
|
||||
```
|
||||
|
||||
To run:
|
||||
|
||||
```bash
|
||||
bun run index.js
|
||||
```
|
||||
|
||||
### TODO
|
||||
|
||||
- Lots, like
|
||||
- background image from city camera
|
||||
- API Integration
|
||||
- meta junk
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"lockfileVersion": 1,
|
||||
"workspaces": {
|
||||
"": {
|
||||
"name": "weather",
|
||||
"devDependencies": {
|
||||
"@types/bun": "latest",
|
||||
},
|
||||
"peerDependencies": {
|
||||
"typescript": "^5",
|
||||
},
|
||||
},
|
||||
},
|
||||
"packages": {
|
||||
"@types/bun": ["@types/bun@1.2.5", "", { "dependencies": { "bun-types": "1.2.5" } }, "sha512-w2OZTzrZTVtbnJew1pdFmgV99H0/L+Pvw+z1P67HaR18MHOzYnTYOi6qzErhK8HyT+DB782ADVPPE92Xu2/Opg=="],
|
||||
|
||||
"@types/node": ["@types/node@22.13.10", "", { "dependencies": { "undici-types": "~6.20.0" } }, "sha512-I6LPUvlRH+O6VRUqYOcMudhaIdUVWfsjnZavnsraHvpBwaEyMN29ry+0UVJhImYL16xsscu0aske3yA+uPOWfw=="],
|
||||
|
||||
"@types/ws": ["@types/ws@8.5.14", "", { "dependencies": { "@types/node": "*" } }, "sha512-bd/YFLW+URhBzMXurx7lWByOu+xzU9+kb3RboOteXYDfW+tr+JZa99OyNmPINEGB/ahzKrEuc8rcv4gnpJmxTw=="],
|
||||
|
||||
"bun-types": ["bun-types@1.2.5", "", { "dependencies": { "@types/node": "*", "@types/ws": "~8.5.10" } }, "sha512-3oO6LVGGRRKI4kHINx5PIdIgnLRb7l/SprhzqXapmoYkFl5m4j6EvALvbDVuuBFaamB46Ap6HCUxIXNLCGy+tg=="],
|
||||
|
||||
"typescript": ["typescript@5.8.2", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ=="],
|
||||
|
||||
"undici-types": ["undici-types@6.20.0", "", {}, "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg=="],
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"name": "weather-app",
|
||||
"module": "src/index.js",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"devDependencies": {
|
||||
"@types/bun": "latest"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Weather Forecast</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/n2geoff/stylelite/dist/stylelite.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/feather-icons-css/css/feather.min.css">
|
||||
|
||||
<style>
|
||||
section {
|
||||
background-color: #EEE;
|
||||
width: 84px;
|
||||
padding: .5rem;
|
||||
text-align: center;
|
||||
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
article {
|
||||
background: #DDD;
|
||||
}
|
||||
|
||||
section:hover {
|
||||
background: var(--theme);
|
||||
color: #FFF;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
em {
|
||||
color: var(--theme);
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script src="index.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<article style="padding: 1rem; width: 540px;">
|
||||
<h1 style="border-bottom: 2px solid var(--theme);">Weather Forecast</h1>
|
||||
<div class="grid">
|
||||
<div style="font-size: 2.2rem; line-height: 3rem; font-weight: bold;">RICEVILLE</div>
|
||||
<div style="font-size: 2.2rem;line-height: 3rem; text-align: right; color: var(--theme);font-weight: bold;">
|
||||
<i class="ft-sun"></i>
|
||||
72°F
|
||||
</div>
|
||||
</div>
|
||||
<div style="background: var(--theme); color: #FFF; padding: .5rem;width: 100%">
|
||||
Today,
|
||||
March 13th
|
||||
<strong>THURSDAY</strong>
|
||||
</div>
|
||||
<br>
|
||||
<!-- sunny -->
|
||||
|
||||
<div class="grid" style="width: 512px">
|
||||
<daily-temp></daily-temp>
|
||||
<daily-temp></daily-temp>
|
||||
<daily-temp></daily-temp>
|
||||
<daily-temp></daily-temp>
|
||||
<daily-temp></daily-temp>
|
||||
</div>
|
||||
<div style="text-align: center;">
|
||||
<em>Five Day Forecast</em>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
customElements.define("daily-temp", class DailyTempeture extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
// this.attachShadow({mode:"open"});
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
|
||||
const state = {
|
||||
day: this.day(new Date().getDay()),
|
||||
high: 72,
|
||||
low: 64
|
||||
}
|
||||
|
||||
|
||||
this.innerHTML = this.render(state);
|
||||
}
|
||||
|
||||
day(idx) {
|
||||
const days = ["SUN","MON","TUE","WED","THU","FRI","SAT"];
|
||||
|
||||
return days[idx];
|
||||
}
|
||||
|
||||
render(state = {}) {
|
||||
return `
|
||||
<section>
|
||||
<strong>${state.day}</strong>
|
||||
<div>
|
||||
<i class="${state.icon || 'ft-sun'}" style="font-size: 2.2rem"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<strong>${state.high}°</strong> / ${state.low}°
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
`;
|
||||
}
|
||||
});
|
||||
Loading…
Reference in New Issue