grgr
/
diffractive-cookbook
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

form for fun

Browse Source
master
km0 2 years ago
parent 9c530e7bb8
commit acc4ee822d
3 changed files with 88 additions and 22 deletions
Show Stats Download Patch File Download Diff File

43
components/CookbookForm.js
Unescape Escape View File

@ -12,26 +12,33 @@ export default {
return { title, description, nature, logs, who };
},
template: `
<section class='recipe'>
<div class="entry">
<label for="title">Title</label>
<input type="text" v-model='title'/>
</div>
<section class='recipe'>
<label for="title">Title</label>
<input type="text" v-model='title'/>
<div class="entry">
<label for="description">Description</label>
<textarea v-model="description"></textarea>
</div>
<label for="description">Description</label>
<textarea v-model="description"></textarea>
<label for="nature">Nature of the input</label>
<input type="text" v-model="nature" />
<div class="entry">
<label for="nature">Nature of the input</label>
<input type="text" v-model="nature" />
</div>
<label for="log">Process Log</label>
<textarea v-model="logs[index]" v-for="(log, index) in logs" :key="index"></textarea>
<button @click="logs.push('')">Add Step</button>
<div class="entry">
<label for="log">Process Log</label>
<textarea v-model="logs[index]" v-for="(log, index) in logs" :key="index" :placeholder="index + 1"></textarea>
<button class="add" @click="logs.push('')">+</button>
</div>
<label for="who">Who</label>
<input type="text" v-model="who" />
</section>
<div class="entry">
<label for="who">Who</label>
<input type="text" v-model="who" />
</div>
</section>
<dl>
<dt>Title</dt>
@ -45,9 +52,9 @@ export default {
<dt>Log</dt>
<dd>
<ul>
<ol>
<li v-for="log in logs">{{log}}</li>
</ul>
</ol>
</dd>
<dt>Who</dt>

7
index.html
Unescape Escape View File

@ -4,13 +4,14 @@
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://unpkg.com/vue@3"></script>
<link rel="stylesheet" href="style.css" />
<title>diffractive reading</title>
</head>
<body>
<script src="https://unpkg.com/vue@3"></script>
<div id="app"><cookbook-form></cookbook-form></div>
<div id="app">
<cookbook-form></cookbook-form>
</div>
<script type="module">
import CookbookForm from "./components/CookbookForm.js";

60
style.css
Unescape Escape View File

@ -1,2 +1,60 @@
.recipe {
* {
box-sizing: border-box;
}
html,
body {
font-size: 24px;
line-height: 1.6;
font-family: sans-serif;
}
section.recipe {
display: inline-block;
margin: 0 auto;
padding: 32px;
width: 50ch;
border-radius: 0.5rem;
background: linear-gradient(300deg, rgba(242, 173, 131, 1) 0%, rgba(207, 143, 73, 1) 100%);
box-shadow: 1px 1px 10px 2px rgba(0, 0, 0, 0.1);
}
.recipe label,
.recipe input,
.recipe textarea {
font-family: sans-serif;
display: block;
width: 100%;
max-width: 100%;
}
input,
textarea,
button {
color: currentColor;
background: none;
border: 1px solid currentColor;
padding: 8px;
font-size: 1rem;
}
button.add {
display: inline-block;
width: 48px;
height: 48px;
margin-top: 16px;
cursor: pointer;
}
textarea + textarea {
margin-top: 16px;
}
label {
font-style: italic;
font-size: 19px;
}
.entry + .entry {
margin-top: 32px;
}

Write Preview
Loading…
Cancel
Save