Create basic layout

This commit is contained in:
Yash Karandikar 2021-10-31 18:10:56 -05:00
parent b2023f79c5
commit 9270932213
Signed by: karx
GPG key ID: A794DA2529474BA5
3 changed files with 46 additions and 1 deletions

View file

@ -3,6 +3,10 @@
<head>
<meta charset="utf-8" />
<title>Bin2Dec</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css">
<link rel="css" data-trunk href="style.css">
</head>
<body></body>
</html>

View file

@ -1,9 +1,35 @@
use sycamore::prelude::*;
fn main() {
let inp = Signal::new(String::new());
let err = Signal::new(false);
let double = create_memo(cloned!((inp, err) => move || {
if *inp.get() == "" {
return 0;
}
if let Ok(parsed) = (*inp.get()).parse::<u64>() {
err.set(false);
return parsed * 2;
} else {
err.set(true);
return 0;
}
}));
sycamore::render(|| {
template! {
p { "Hello, world!" }
h1(style="text-align: center") { "Bin2Dec" }
div(class="wrapper", style="text-align: center") {
input(placeholder="Binary", bind:value=inp, style="text-align: center")
(if *err.get() {
template! {
span(style="color: red") { "unable to convert" }
}
} else {
template! {}
})
div(class="card") { (double.get()) }
}
}
})
}

15
bin2dec/style.css Normal file
View file

@ -0,0 +1,15 @@
.wrapper {
/* Text margin */
margin: auto;
width: 60%;
padding: 10px;
}
.card {
border: 0.1rem solid #d1d1d1;
border-radius: .4rem;
padding: .6rem 1.0rem .7rem;
margin-bottom: 1.5rem;
word-wrap: break-word;
white-space: pre-wrap;
}