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

form for fun

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

7
index.html
Unescape Escape View File

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