1st commit
This commit is contained in:
Spencer Flagg
commit
b74ae12cb2
24 changed files with 3134 additions and 0 deletions
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
3
.vscode/extensions.json
vendored
Normal file
3
.vscode/extensions.json
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"recommendations": ["svelte.svelte-vscode"]
|
||||||
|
}
|
||||||
47
README.md
Normal file
47
README.md
Normal file
|
|
@ -0,0 +1,47 @@
|
||||||
|
# Svelte + TS + Vite
|
||||||
|
|
||||||
|
This template should help get you started developing with Svelte and TypeScript in Vite.
|
||||||
|
|
||||||
|
## Recommended IDE Setup
|
||||||
|
|
||||||
|
[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
|
||||||
|
|
||||||
|
## Need an official Svelte framework?
|
||||||
|
|
||||||
|
Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
|
||||||
|
|
||||||
|
## Technical considerations
|
||||||
|
|
||||||
|
**Why use this over SvelteKit?**
|
||||||
|
|
||||||
|
- It brings its own routing solution which might not be preferable for some users.
|
||||||
|
- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
|
||||||
|
|
||||||
|
This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
|
||||||
|
|
||||||
|
Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
|
||||||
|
|
||||||
|
**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
|
||||||
|
|
||||||
|
Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
|
||||||
|
|
||||||
|
**Why include `.vscode/extensions.json`?**
|
||||||
|
|
||||||
|
Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
|
||||||
|
|
||||||
|
**Why enable `allowJs` in the TS template?**
|
||||||
|
|
||||||
|
While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
|
||||||
|
|
||||||
|
**Why is HMR not preserving my local component state?**
|
||||||
|
|
||||||
|
HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
|
||||||
|
|
||||||
|
If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
|
||||||
|
|
||||||
|
```ts
|
||||||
|
// store.ts
|
||||||
|
// An extremely simple external store
|
||||||
|
import { writable } from 'svelte/store'
|
||||||
|
export default writable(0)
|
||||||
|
```
|
||||||
5
fahrcel.svg
Normal file
5
fahrcel.svg
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
<svg width="48" height="50" viewBox="0 0 48 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect width="47.1365" height="49.1929" fill="#B8860B"/>
|
||||||
|
<path d="M11.0234 9.3999H20.7635C21.6654 9.3999 22.3869 10.1214 22.3869 11.0233V12.2408C22.3869 13.1426 21.6654 13.8641 20.7635 13.8641H13.9094V22.3417H18.9598C19.8617 22.3417 20.5832 23.0632 20.5832 23.965V25.1825C20.5832 26.0844 19.8617 26.8059 18.9598 26.8059H13.9094V38.1694C13.9094 39.0713 13.1428 39.7928 12.286 39.7928H11.0234C10.1215 39.7928 9.40002 39.0713 9.40002 38.1694V11.0233C9.40002 10.1214 10.1215 9.3999 11.0234 9.3999Z" fill="white"/>
|
||||||
|
<path d="M22.946 30.9545V18.1931C22.946 14.766 23.938 12.5113 25.381 11.1585C26.8691 9.80574 28.6728 9.3999 30.3864 9.3999C32.0548 9.3999 33.8585 9.80574 35.3466 11.1585C36.7896 12.5113 37.7366 14.766 37.7366 18.1931V18.8244C37.7366 19.7263 37.0151 20.4478 36.1583 20.4478H34.8506C33.9487 20.4478 33.2272 19.7263 33.2272 18.8244V18.1931C33.2272 15.1718 32.2352 13.8641 30.3864 13.8641C28.4924 13.8641 27.5004 15.1718 27.5004 18.1931V30.9545C27.5004 33.9757 28.4474 35.3285 30.3864 35.3285C31.2431 35.3285 32.0548 34.9678 32.4607 34.5169C33.0018 33.7954 33.2272 32.5778 33.2272 30.9545V30.3232C33.2272 29.4213 33.9487 28.6998 34.8506 28.6998H36.1583C37.0151 28.6998 37.7366 29.4213 37.7366 30.3232V30.9545C37.7366 34.5169 36.7896 36.5911 35.3917 37.989C33.9036 39.432 32.0097 39.7928 30.3864 39.7928C28.6728 39.7928 26.824 39.432 25.3359 37.989C23.938 36.5911 22.946 34.5169 22.946 30.9545Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
13
index.html
Normal file
13
index.html
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="farhcel.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>FAHRCEL - How hot is it in Europe?</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
2468
package-lock.json
generated
Normal file
2468
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
24
package.json
Normal file
24
package.json
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
{
|
||||||
|
"name": "fahrcel",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"check": "svelte-check --tsconfig ./tsconfig.json"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@sveltejs/vite-plugin-svelte": "^2.0.0",
|
||||||
|
"@tsconfig/svelte": "^3.0.0",
|
||||||
|
"svelte": "^3.54.0",
|
||||||
|
"svelte-check": "^2.10.0",
|
||||||
|
"tslib": "^2.4.1",
|
||||||
|
"typescript": "^4.9.3",
|
||||||
|
"vite": "^4.0.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"svelte-routing": "^1.6.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
5
public/fahrcel.svg
Normal file
5
public/fahrcel.svg
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
<svg width="48" height="50" viewBox="0 0 48 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect width="47.1365" height="49.1929" fill="#B8860B"/>
|
||||||
|
<path d="M11.0234 9.3999H20.7635C21.6654 9.3999 22.3869 10.1214 22.3869 11.0233V12.2408C22.3869 13.1426 21.6654 13.8641 20.7635 13.8641H13.9094V22.3417H18.9598C19.8617 22.3417 20.5832 23.0632 20.5832 23.965V25.1825C20.5832 26.0844 19.8617 26.8059 18.9598 26.8059H13.9094V38.1694C13.9094 39.0713 13.1428 39.7928 12.286 39.7928H11.0234C10.1215 39.7928 9.40002 39.0713 9.40002 38.1694V11.0233C9.40002 10.1214 10.1215 9.3999 11.0234 9.3999Z" fill="white"/>
|
||||||
|
<path d="M22.946 30.9545V18.1931C22.946 14.766 23.938 12.5113 25.381 11.1585C26.8691 9.80574 28.6728 9.3999 30.3864 9.3999C32.0548 9.3999 33.8585 9.80574 35.3466 11.1585C36.7896 12.5113 37.7366 14.766 37.7366 18.1931V18.8244C37.7366 19.7263 37.0151 20.4478 36.1583 20.4478H34.8506C33.9487 20.4478 33.2272 19.7263 33.2272 18.8244V18.1931C33.2272 15.1718 32.2352 13.8641 30.3864 13.8641C28.4924 13.8641 27.5004 15.1718 27.5004 18.1931V30.9545C27.5004 33.9757 28.4474 35.3285 30.3864 35.3285C31.2431 35.3285 32.0548 34.9678 32.4607 34.5169C33.0018 33.7954 33.2272 32.5778 33.2272 30.9545V30.3232C33.2272 29.4213 33.9487 28.6998 34.8506 28.6998H36.1583C37.0151 28.6998 37.7366 29.4213 37.7366 30.3232V30.9545C37.7366 34.5169 36.7896 36.5911 35.3917 37.989C33.9036 39.432 32.0097 39.7928 30.3864 39.7928C28.6728 39.7928 26.824 39.432 25.3359 37.989C23.938 36.5911 22.946 34.5169 22.946 30.9545Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
10
src/App.svelte
Normal file
10
src/App.svelte
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { Router, Route } from 'svelte-routing';
|
||||||
|
import Home from './pages/Home.svelte';
|
||||||
|
import ScalePage from './pages/Scale.svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Router>
|
||||||
|
<Route path="/" component={Home} />
|
||||||
|
<Route path="/scale" component={ScalePage} />
|
||||||
|
</Router>
|
||||||
132
src/app.css
Normal file
132
src/app.css
Normal file
|
|
@ -0,0 +1,132 @@
|
||||||
|
:root {
|
||||||
|
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
font-size: 4vmin;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
color-scheme: light dark;
|
||||||
|
color: rgba(255, 255, 255, 0.87);
|
||||||
|
background-color: #242424;
|
||||||
|
|
||||||
|
font-synthesis: none;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #646cff;
|
||||||
|
text-decoration: inherit;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: #535bf2;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
place-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-width: 320px;
|
||||||
|
padding: 3vh;
|
||||||
|
border-radius: 3vh;
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
padding: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
:root {
|
||||||
|
color: #213547;
|
||||||
|
background-color: darkgoldenrod;
|
||||||
|
}
|
||||||
|
body{
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: #747bff;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
td{
|
||||||
|
text-align: right;
|
||||||
|
font-size: var(--size);
|
||||||
|
height: var(--size);
|
||||||
|
padding-right: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
td input{
|
||||||
|
text-align: right;
|
||||||
|
font-size: var(--size);
|
||||||
|
max-width: 5ch;
|
||||||
|
border: 0;
|
||||||
|
margin-right: -15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
td input:focus{
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input::selection{
|
||||||
|
background-color: transparent;
|
||||||
|
color: navy;
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody tr:nth-child(1), tbody tr:nth-child(11){
|
||||||
|
--size: 1rem;
|
||||||
|
color: rgb(0 0 0 / 10%);
|
||||||
|
}
|
||||||
|
tbody tr:nth-child(2), tbody tr:nth-child(10){
|
||||||
|
--size:1.25rem;
|
||||||
|
color: rgb(0 0 0 / 20%);
|
||||||
|
}
|
||||||
|
tbody tr:nth-child(3), tbody tr:nth-child(9){
|
||||||
|
--size:1.5rem;
|
||||||
|
color: rgb(0 0 0 / 30%);
|
||||||
|
}
|
||||||
|
tbody tr:nth-child(4), tbody tr:nth-child(8){
|
||||||
|
--size:1.75rem;
|
||||||
|
color: rgb(0 0 0 / 40%);
|
||||||
|
}
|
||||||
|
tbody tr:nth-child(5), tbody tr:nth-child(7){
|
||||||
|
--size:2rem;
|
||||||
|
color: rgb(0 0 0 / 50%);
|
||||||
|
}
|
||||||
|
tbody tr:nth-child(6){
|
||||||
|
--size:3rem;
|
||||||
|
color: rgb(0 0 0 / 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
thead tr{
|
||||||
|
font-size: 1rem;
|
||||||
|
color:#747bff;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol{
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
li::marker{
|
||||||
|
content: '';
|
||||||
|
}
|
||||||
|
|
||||||
|
.scales{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.f, .c{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
1
src/assets/svelte.svg
Normal file
1
src/assets/svelte.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.9 KiB |
73
src/lib/Convert.svelte
Normal file
73
src/lib/Convert.svelte
Normal file
|
|
@ -0,0 +1,73 @@
|
||||||
|
<script lang="ts">
|
||||||
|
|
||||||
|
const validateInput = (value) => {
|
||||||
|
const number = Number(value);
|
||||||
|
return !isNaN(number);
|
||||||
|
};
|
||||||
|
|
||||||
|
const convertTemperature = (value, from, to) => {
|
||||||
|
if (!validateInput(value)) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
const number = Number(value);
|
||||||
|
if (from === 'C') {
|
||||||
|
return (number * 9 / 5 + 32).toFixed(2);
|
||||||
|
} else if (from === 'F') {
|
||||||
|
return ((number - 32) * 5 / 9).toFixed(2);
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
};
|
||||||
|
let inputF = 72;
|
||||||
|
let inputC = convertTemperature(inputF, 'F', 'C');
|
||||||
|
|
||||||
|
$: bothInputs = inputC === inputF ? inputC : '';
|
||||||
|
|
||||||
|
$: fahrenheit = inputF ? Number(inputF) : 0;
|
||||||
|
$: fahrenheitStart = Math.ceil(fahrenheit / 5) * 5;
|
||||||
|
$: fahrenheitTableTop = [fahrenheitStart - 15, fahrenheitStart - 10, fahrenheitStart - 5];
|
||||||
|
$: fahrenheitTableBottom = [fahrenheitStart + 5, fahrenheitStart + 10, fahrenheitStart + 15];
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<th>Fahrenheit</th>
|
||||||
|
<th>Celsius</th>
|
||||||
|
</tr>
|
||||||
|
{#each fahrenheitTableTop as tempF}
|
||||||
|
<tr>
|
||||||
|
<td>{tempF}</td>
|
||||||
|
<td>{convertTemperature(tempF.toString(), 'F', 'C')}</td>
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
<tr>
|
||||||
|
<td><input type="text" bind:value={inputF} on:input={e => {
|
||||||
|
inputF = e.target.value;
|
||||||
|
if (validateInput(inputF)) {
|
||||||
|
inputC = convertTemperature(inputF, 'F', 'C');
|
||||||
|
} else {
|
||||||
|
inputC = '';
|
||||||
|
inputF = '';
|
||||||
|
}
|
||||||
|
}} /></td>
|
||||||
|
<td><input type="text" bind:value={inputC} on:input={e => {
|
||||||
|
inputC = e.target.value;
|
||||||
|
if (validateInput(inputC)) {
|
||||||
|
inputF = convertTemperature(inputC, 'C', 'F');
|
||||||
|
} else {
|
||||||
|
inputC = '';
|
||||||
|
inputF = '';
|
||||||
|
}
|
||||||
|
}} /></td>
|
||||||
|
</tr>
|
||||||
|
{#each fahrenheitTableBottom as tempF}
|
||||||
|
<tr>
|
||||||
|
<td>{tempF}</td>
|
||||||
|
<td>{convertTemperature(tempF.toString(), 'F', 'C')}</td>
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
</table>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
69
src/lib/Convert2.svelte
Normal file
69
src/lib/Convert2.svelte
Normal file
|
|
@ -0,0 +1,69 @@
|
||||||
|
<script lang="ts">
|
||||||
|
|
||||||
|
const validateInput = (value) => {
|
||||||
|
const number = Number(value);
|
||||||
|
return !isNaN(number);
|
||||||
|
};
|
||||||
|
|
||||||
|
const convertTemperature = (value, from, to) => {
|
||||||
|
if (!validateInput(value)) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
const number = Number(value);
|
||||||
|
if (from === 'C') {
|
||||||
|
return (number * 9 / 5 + 32).toFixed(2);
|
||||||
|
} else if (from === 'F') {
|
||||||
|
return ((number - 32) * 5 / 9).toFixed(2);
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
};
|
||||||
|
let inputF = 72;
|
||||||
|
let inputC = convertTemperature(inputF, 'F', 'C');
|
||||||
|
|
||||||
|
$: bothInputs = inputC === inputF ? inputC : '';
|
||||||
|
|
||||||
|
$: fahrenheit = inputF ? Number(inputF) : 0;
|
||||||
|
$: fahrenheitStart = Math.ceil(fahrenheit / 5) * 5;
|
||||||
|
$: fahrenheitTableTop = [fahrenheitStart - 20, fahrenheitStart - 15, fahrenheitStart - 10, fahrenheitStart - 5];
|
||||||
|
$: fahrenheitTableBottom = [fahrenheitStart + 5, fahrenheitStart + 10, fahrenheitStart + 15, fahrenheitStart + 20];
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<th>Fahrenheit</th>
|
||||||
|
<th>Celsius</th>
|
||||||
|
</tr>
|
||||||
|
{#each fahrenheitTableTop as tempF}
|
||||||
|
<tr>
|
||||||
|
<td class="fcell">{tempF}</td>
|
||||||
|
<td class="ccell">{convertTemperature(tempF.toString(), 'F', 'C')}</td>
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
<tr>
|
||||||
|
<td class="fcell"><input type="text" bind:value={inputF} on:input={e => {
|
||||||
|
inputF = e.target.value;
|
||||||
|
if (validateInput(inputF)) {
|
||||||
|
inputC = convertTemperature(inputF, 'F', 'C');
|
||||||
|
} else {
|
||||||
|
inputC = '';
|
||||||
|
inputF = '';
|
||||||
|
}
|
||||||
|
}} /></td>
|
||||||
|
<td class="ccell"><input type="text" bind:value={inputC} on:input={e => {
|
||||||
|
inputC = e.target.value;
|
||||||
|
if (validateInput(inputC)) {
|
||||||
|
inputF = convertTemperature(inputC, 'C', 'F');
|
||||||
|
} else {
|
||||||
|
inputC = '';
|
||||||
|
inputF = '';
|
||||||
|
}
|
||||||
|
}} /></td>
|
||||||
|
</tr>
|
||||||
|
{#each fahrenheitTableBottom as tempF}
|
||||||
|
<tr>
|
||||||
|
<td class="fcell">{tempF}</td>
|
||||||
|
<td class="ccell">{convertTemperature(tempF.toString(), 'F', 'C')}</td>
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
</table>
|
||||||
144
src/lib/Convert3.svelte
Normal file
144
src/lib/Convert3.svelte
Normal file
|
|
@ -0,0 +1,144 @@
|
||||||
|
<script lang="ts">
|
||||||
|
const ABSOLUTE_ZERO = -273.15;
|
||||||
|
const HIGH_TEMPERATURE = 300;
|
||||||
|
|
||||||
|
export let fahrenheit = 72;
|
||||||
|
export let celsius = 22.2;
|
||||||
|
|
||||||
|
function toC(f) {
|
||||||
|
return +(((f - 32) * 5) / 9).toFixed(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
function toF(c) {
|
||||||
|
return (c * 9) / 5 + 32;
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateCelsius() {
|
||||||
|
if (fahrenheit < toF(ABSOLUTE_ZERO)) {
|
||||||
|
fahrenheit = toF(ABSOLUTE_ZERO);
|
||||||
|
} else if (fahrenheit > toF(HIGH_TEMPERATURE)) {
|
||||||
|
fahrenheit = toF(HIGH_TEMPERATURE);
|
||||||
|
}
|
||||||
|
|
||||||
|
celsius = +toC(fahrenheit);
|
||||||
|
updateTable();
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateFahrenheit() {
|
||||||
|
if (celsius < ABSOLUTE_ZERO) {
|
||||||
|
celsius = ABSOLUTE_ZERO;
|
||||||
|
} else if (celsius > HIGH_TEMPERATURE) {
|
||||||
|
celsius = HIGH_TEMPERATURE;
|
||||||
|
}
|
||||||
|
|
||||||
|
fahrenheit = +toF(celsius);
|
||||||
|
updateTable();
|
||||||
|
}
|
||||||
|
|
||||||
|
let fahrenheitTableTop = [];
|
||||||
|
let fahrenheitTableBottom = [];
|
||||||
|
let celsiusTableTop = [];
|
||||||
|
let celsiusTableBottom = [];
|
||||||
|
|
||||||
|
function updateTable() {
|
||||||
|
let fahrenheitStart = 5 * Math.ceil(fahrenheit / 5);
|
||||||
|
let celsiusStart = 5 * Math.ceil(celsius / 5);
|
||||||
|
fahrenheitTableTop = [];
|
||||||
|
celsiusTableTop = [];
|
||||||
|
for (let i: number = 5; i >= 1; i--) {
|
||||||
|
fahrenheitTableTop.push(fahrenheitStart - i * 5);
|
||||||
|
celsiusTableTop.push(celsiusStart - i * 5);
|
||||||
|
}
|
||||||
|
fahrenheitTableBottom = [];
|
||||||
|
celsiusTableBottom = [];
|
||||||
|
for (let i: number = 1; i <= 5; i++) {
|
||||||
|
fahrenheitTableBottom.push(fahrenheitStart + i * 5);
|
||||||
|
celsiusTableBottom.push(celsiusStart + i * 5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let fFocused = true;
|
||||||
|
|
||||||
|
function focusF(event) {
|
||||||
|
fFocused = true;
|
||||||
|
selectAll(event);
|
||||||
|
}
|
||||||
|
|
||||||
|
function focusC(event) {
|
||||||
|
fFocused = false;
|
||||||
|
selectAll(event);
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectAll(event) {
|
||||||
|
event.target.select();
|
||||||
|
}
|
||||||
|
|
||||||
|
updateTable();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>°F</th>
|
||||||
|
<th>°C</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{#if fFocused}
|
||||||
|
{#each fahrenheitTableTop as value}
|
||||||
|
<tr>
|
||||||
|
<td>{value}</td>
|
||||||
|
<td>{toC(value)}</td>
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
{:else}
|
||||||
|
{#each celsiusTableTop as value}
|
||||||
|
<tr>
|
||||||
|
<td>{toF(value)}</td>
|
||||||
|
<td>{value}</td>
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
{/if}
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
step="5"
|
||||||
|
bind:value={fahrenheit}
|
||||||
|
on:input={updateCelsius}
|
||||||
|
on:focus={focusF}
|
||||||
|
on:click={focusF}
|
||||||
|
inputmode="numeric"
|
||||||
|
pattern="[0-9]*"
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
step="5"
|
||||||
|
bind:value={celsius}
|
||||||
|
on:input={updateFahrenheit}
|
||||||
|
on:focus={focusC}
|
||||||
|
on:click={focusC}
|
||||||
|
inputmode="numeric"
|
||||||
|
pattern="[0-9]*"
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{#if fFocused}
|
||||||
|
{#each fahrenheitTableBottom as value}
|
||||||
|
<tr>
|
||||||
|
<td>{value}</td>
|
||||||
|
<td>{toC(value)}</td>
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
{:else}
|
||||||
|
{#each celsiusTableBottom as value}
|
||||||
|
<tr>
|
||||||
|
<td>{toF(value)}</td>
|
||||||
|
<td>{value}</td>
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
{/if}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
10
src/lib/Counter.svelte
Normal file
10
src/lib/Counter.svelte
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
<script lang="ts">
|
||||||
|
let count: number = 0
|
||||||
|
const increment = () => {
|
||||||
|
count += 1
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button on:click={increment}>
|
||||||
|
count is {count}
|
||||||
|
</button>
|
||||||
26
src/lib/Scale.svelte
Normal file
26
src/lib/Scale.svelte
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
<script>
|
||||||
|
let fs = [];
|
||||||
|
for (let i = -40; i <= 572; i++) {
|
||||||
|
fs.push(i);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
let cs = [];
|
||||||
|
for (let i = -40; i <= 300; i++) {
|
||||||
|
cs.push(i);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="scales">
|
||||||
|
<ol class="f">
|
||||||
|
{#each fs as f}
|
||||||
|
<li>{f}</li>
|
||||||
|
{/each}
|
||||||
|
</ol>
|
||||||
|
<ol class="c">
|
||||||
|
{#each cs as c}
|
||||||
|
<li>{c}</li>
|
||||||
|
{/each}
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
8
src/main.ts
Normal file
8
src/main.ts
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
import './app.css'
|
||||||
|
import App from './App.svelte'
|
||||||
|
|
||||||
|
const app = new App({
|
||||||
|
target: document.getElementById('app'),
|
||||||
|
})
|
||||||
|
|
||||||
|
export default app
|
||||||
9
src/pages/Home.svelte
Normal file
9
src/pages/Home.svelte
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import Convert3 from '../lib/Convert3.svelte'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<Convert3 />
|
||||||
|
|
||||||
|
</main>
|
||||||
9
src/pages/Scale.svelte
Normal file
9
src/pages/Scale.svelte
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import Scale from "../lib/Scale.svelte";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<Scale />
|
||||||
|
|
||||||
|
</main>
|
||||||
2
src/vite-env.d.ts
vendored
Normal file
2
src/vite-env.d.ts
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
/// <reference types="svelte" />
|
||||||
|
/// <reference types="vite/client" />
|
||||||
7
svelte.config.js
Normal file
7
svelte.config.js
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
// Consult https://svelte.dev/docs#compile-time-svelte-preprocess
|
||||||
|
// for more information about preprocessors
|
||||||
|
preprocess: vitePreprocess(),
|
||||||
|
}
|
||||||
20
tsconfig.json
Normal file
20
tsconfig.json
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
{
|
||||||
|
"extends": "@tsconfig/svelte/tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ESNext",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
/**
|
||||||
|
* Typecheck JS in `.svelte` and `.js` files by default.
|
||||||
|
* Disable checkJs if you'd like to use dynamic types in JS.
|
||||||
|
* Note that setting allowJs false does not prevent the use
|
||||||
|
* of JS in `.svelte` files.
|
||||||
|
*/
|
||||||
|
"allowJs": true,
|
||||||
|
"checkJs": true,
|
||||||
|
"isolatedModules": true
|
||||||
|
},
|
||||||
|
"include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
|
||||||
|
"references": [{ "path": "./tsconfig.node.json" }]
|
||||||
|
}
|
||||||
8
tsconfig.node.json
Normal file
8
tsconfig.node.json
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "Node"
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
17
vite.config.ts
Normal file
17
vite.config.ts
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import { svelte } from '@sveltejs/vite-plugin-svelte'
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
base: './',
|
||||||
|
plugins: [svelte()],
|
||||||
|
build: {
|
||||||
|
rollupOptions: {
|
||||||
|
output: {
|
||||||
|
entryFileNames: `[name].[hash].js`,
|
||||||
|
chunkFileNames: `[name].[hash].js`,
|
||||||
|
assetFileNames: `[name].[hash].[ext]`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
Loading…
Reference in a new issue