-
Notifications
You must be signed in to change notification settings - Fork 1
/
howmuchyarn.html
227 lines (185 loc) · 10.2 KB
/
howmuchyarn.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Alegreya+Sans:ital,wght@0,400;0,500;1,400;1,500&family=Audiowide&family=Chicle&family=Familjen+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Inter&family=Playfair+Display:wght@400;500&family=Send+Flowers&family=Share+Tech+Mono&family=Ubuntu+Mono:ital@0;1&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css" />
<title>How Much Yarn?</title>
</head>
<!-- A11Y - ADD SKIP TO MAIN CONTENT! -->
<form class="color-picker" action="">
<fieldset>
<legend class="visually-hidden">Pick a color scheme</legend>
<label for="groovy" class="visually-hidden">Groovy Theme</label>
<input type="radio" id="groovy" name="theme" checked />
<label for="starwars-dark" class="visually-hidden">Starwars Dark Theme</label>
<input type="radio" name="theme" id="starwars-dark" />
<label for="elegant" class="visually-hidden">Elegant Theme</label>
<input type="radio" id="elegant" name="theme" />
<label for="simple-dark" class="visually-hidden">Simple Dark Dyslexia Friendly Theme</label>
<input type="radio" id="simple-dark" name="theme" />
</fieldset>
</form>
<nav>
<img
src="assets/menu.svg"
class="menu"
id="menu-btn"
alt="open menu"
/>
<ul class="nav" id="nav">
<li class="exit" id="/assets/exit-btn">
<img
src="assets/exit.svg"
class="menu"
id="exit-btn"
alt="close menu"
/>
</li>
<li><a href="index.html">Home</a></li>
<li><a href="howmuchyarn.html">How Much Yarn?</a></li>
<li><a href="doctorwho.html">Doctor Who Scarf</a></li>
<li><a href="text-binary-knit-converter.html">Text to Binary to Knitting Pattern</a></li>
<li><a href="craftingandcode.html">Crafting and Code Coffee Chats and Discord </a>
<li><a href="about.html">About and Contact</a></li>
<!-- <li><a href="index01.html">Old Site Version 1.0</a></li> -->
</ul>
</nav>
<main>
<div class="wrapper card--content width--max-85vw margin--sides-2rem">
<h1 class="clr--heading align--center">How Much Yarn? <br> The Yarn Gift Helper</h1>
<p>
Are you a non-knitter or non-crocheter who would like to gift yarn to
a knitter or crocheter in your life, but have no idea how much to get?
<!-- Welcome to YarnHelp! This is a site for knitters and crocheters of all
levels who want yarn math help, as well as their friends and family
that just want to know "how much yarn" to give them as a gift. -->
</p>
<p>
With over 240,000 different yarns in the world*, many different
thicknesses ("weights"), and yarn brands having different lengths of
yarn in each ball/skein, it definately can be confusing.
</p>
<p>
The Yarn Gift Helper is designed to help non-knitters quickly figure
out how much yarn to buy for their family members and friends who are
knitters - without spending hours learning about yarn. This current
edition is just for pullover sweaters/jumpers made with medium
thickness yarn.
</p>
<p class="emphasis--fw-600">Note: This version is in active development. Not all data or functionalities have been added. Please visit: <a href="https://yarnhelp.app/howmuchyarn">https://yarnhelp.app/howmuchyarn</a> for a version for worsted weight (Craft Yarn Council 04 weight) that works for all projects.</p>
<form action="#" class="how-much-yarn">
<div class="form-section">
<fieldset>
<legend>Choose a Yarn Weight (thickness)</legend>
<div>
<div>
<input type="radio" name="weight" id="lace-00" checked value="lace00"/>
<label for="lace-00" class="">00 Lace</label>
</div>
<div>
<input type="radio" name="weight" id="fingering-01" checked value="fingering01"/>
<label for="fingering-01" class="">01 Fingering</label>
</div>
<div>
<input type="radio" name="weight" id="sport-02" value="sport02" />
<label for="sport-02" class="">02 Sport</label>
</div>
<div>
<input type="radio" name="weight" id="dk-03" value="dk03" />
<label for="dk-03" class="">03 DK</label>
</div>
<div>
<input type="radio" name="weight" id="worsted-04" value="worsted04"/>
<label for="worsted-04" class="">04 Worsted</label>
</div>
<div>
<input type="radio" name="weight" id="chunky-05" value="chunky05"/>
<label for="chunky-05" class="">05 Chunky</label>
</div>
<div>
<input type="radio" name="weight" id="bulky-06" value="bulky06"/>
<label for="bulky-06" class="">06 Bulky</label>
</div>
<div>
<input type="radio" name="weight" id="jumbo-07" value="jumbo07"/>
<label for="jumbo-07" class="">07 Jumbo</label>
</div>
</div>
</div>
<div class="form-section padding--top-2">
<label for="input"
>Yards in Each Ball:
<input type="number" placeholder="100" name="yardsPerBall" id="yards-per-ball" min="10" max="120000" step="1" value="10" />
</label>
<button type="submit" id="btn-calculate" class="btn-calculate btn">
Calculate
</button>
</div>
</fieldset>
</form>
<h2>Project Types</h2>
<div class="auto-grid-how-much-yarn">
<div class="card">
<h3 class="card__title">Knit Sweaters/<wbr/>Jumpers</h3>
<p>You will need <span class="babyPullover">__</span> balls of yarn for a baby pullover sweater.</p>
<p>You will need <span class="toddlerPullover">__</span> balls of yarn for a toddler pullover sweater.</p>
<p>You will need <span class="childPullover">__</span> balls of yarn for a child pullover sweater.</p>
<p>You will need <span class="adultSmallPullover">__</span> balls of yarn for an adult small to medium pullover sweater.</p>
<p>You will need <span class="adultLargePullover">__</span> balls of yarn for an adult medium to large pullover sweater.</p>
<p>You will need <span class="adultXxlPullover">__</span> balls of yarn for an adult XL to XXL pullover sweater.</p>
</div>
<div class="card">
<h3 class="card__title">Crochted Sweaters/<wbr/>Jumpers</h3>
<p>You will need <span class="babyPulloverCrochet">__</span> balls of yarn for a baby pullover crochet sweater.</p>
<p>You will need <span class="toddlerPulloverCrochet">__</span> balls of yarn for a toddler pullover crochet sweater.</p>
<p>You will need <span class="childPulloverCrochet">__</span> balls of yarn for a child pullover crochet sweater.</p>
<p>You will need <span class="adultSmallPulloverCrochet">__</span> balls of yarn for an adult small to medium pullover crochet sweater.</p>
<p>You will need <span class="adultLargePulloverCrochet">__</span> balls of yarn for an adult medium to large pullover crochet sweater.</p>
<p>You will need <span class="adultXxlPulloverCrochet">__</span> balls of yarn for an adult XL to XXL pullover crochet sweater.</p>
</div>
<!-- SCARFS -->
<div class="card">
<h3 class="card__title">Knitted Scarfs</h3>
<p>You will need <span class="childScarf">__</span> balls of yarn for a child's scarf.</p>
<p>You will need <span class="adultSmallScarf">__</span> balls of yarn for a adult's small scarf.</p>
<p>You will need <span class="adultLargeScarf">__</span> balls of yarn for a adult's large scarf.</p>
<p>You will need <span class="adultExtraLongScarf">__</span> balls of yarn for a adult's extra large scarf.</p>
<p>You will need <span class="doctorWhoScarf">__</span> balls of yarn for a Doctor Who scarf.</p>
</div>
<div class="card">
<h3 class="card__title">Crocheted Scarfs</h3>
<p>You will need <span class="childScarfCrochet">__</span> balls of yarn for a child's crocheted scarf.</p>
<p>You will need <span class="adultSmallScarfCrochet">__</span> balls of yarn for a adult's small crocheted scarf.</p>
<p>You will need <span class="adultLargeScarfCrochet">__</span> balls of yarn for a adult's large crocheted scarf.</p>
<p>You will need <span class="adultExtraLongScarfCrochet">__</span> balls of yarn for a adult's extra large crocheted scarf.</p>
<p>You will need <span class="doctorWhoScarfCrochet">__</span> balls of yarn for a Doctor Who crocheted scarf.</p>
</div>
<!-- BLANKETS AND THROWS -->
<div class="card">
<h3 class="card__title">Blankets and Throws</h3>
<p>
Coming soon!
</p>
</div>
<div class="card">
<h3 class="card__title">Accessories</h3>
<p>
Coming soon!
</p>
</div>
</div>
<p>
Return to: <a href="/index.html">home page</a>
</p>
</div>
</main>
<script src="/app.js"></script>
<script src="/nav.js"></script>
<script src="/howmuchyarn.js" type="module"></script>
</body>
</html>