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