-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
171 lines (149 loc) · 8.71 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="UTF-8">
<title>Pig Latin Translator</title>
<content="Translates from any language into Pig Latin!">
<meta name="author" content="Joe Karlsson <joe [at] callmejoe [dot] net>">
<meta name="copyright" content="Copyright (c) 2016 - Joe Carlson">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href='//fonts.googleapis.com/css?family=Raleway:400,300,600' rel='stylesheet' type='text/css'>
<!-- OG Meta Data
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta property="og:description" content="Translates from any language into Pig Latin.">
<meta property="og:title" content="Pig Latin Translator">
<meta property="og:url" content="https://github.com/JoeKarlsson1/Pig-Latin">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Pig Latin Translator" />
<meta property="og:image" content="https://github.com/JoeKarlsson1/Pig-Latin/img/cover_photo.png">
<link rel="author" href="https://plus.google.com/u/0/+JoeKarlsson/posts">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:description" content="Translates from any language into Pig Latin.">
<meta name="twitter:title" content="Pig Latin Translator">
<meta name="twitter:site" content="@JoeCarlson131">
<meta name="twitter:image" content="https://github.com/JoeKarlsson1/Pig-Latin/img/cover_photo.png">
<meta name="twitter:creator" content="@josephcarlson131">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<link rel="stylesheet" type="text/css" href="./css/styles.css">
<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="apple-touch-icon" sizes="57x57" href="/img/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/img/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/img/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/img/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/img/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/img/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/img/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/img/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/img/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/img/favicon-194x194.png" sizes="194x194">
<link rel="icon" type="image/png" href="/img/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/img/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/img/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/img/manifest.json">
<link rel="mask-icon" href="/img/safari-pinned-tab.svg" color="#ff87c3">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/img/mstile-144x144.png">
<meta name="theme-color" content="#ff87c3">
<script defer
src="https://unpkg.com/@tinybirdco/flock.js"
data-host="https://api.us-east.tinybird.co"
data-token="p.eyJ1IjogIjJkZTk1YWQ1LWNmZDMtNDRiNS1hYmMyLTM1ZGExOTFkNzEwZCIsICJpZCI6ICIwMDQzNGY1NC02NTViLTQ0Y2MtYTI1Yy0xZDBmOGIzYzlmYzcifQ.za9IEuK2kV-8SsU2t7MXmvaEXsiBnaGOA6Ccvd0L9gw"
/>
</head>
<body>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div class="section hero">
<div class="container">
<div class="row">
<div class="u-max-full-width ">
<h4 class="hero-heading">Pig Latin Translator</h4>
<img class="pig" src="img/my_logo_450.png">
<h5>A JavaScript tool that translates any language into Pig Latin.</h5>
</div>
</div>
</div>
</div>
<div class="section values">
<div class="container">
<form>
<div class="row">
<div class="six columns">
<label for="exampleMessage">Type a phrase you need translated into Pig Latin</label>
<textarea rows="6" cols="50" class="u-full-width pigInput" id="pigInput" type="text" placeholder="This text will be converted into Pig Latin" name="pigInput"></textarea>
<a class="button button-primary" href="javascript: submitPigPhrase()">Translate</a>
</div>
<div class="six columns" id="translation">
</div>
</div>
</form>
</div>
</div>
<div class="section get-help">
<div class="container">
<div class="row">
<div class="six columns">
<h3>Basically, the Pig Latin system used here works as follows:</h3>
<p>You take the first letter of a word (e.g. Hello = H) and use the last letters (e.g. Hello = ello) and add 'ay' to the first letter (e.g. Hello = Ello hay).</p>
<ul>
<li>Words that start with a vowel (A, E, I, O, U) simply have "ay" appended to the end of the word. Examples are:</li>
<ul>
<li>"eat" → "eatay"</li>
<li>"omelet" → "omeletay"</li>
<li>"are" → "areay"</li>
</ul>
</ul>
</div>
<div class="six columns">
<ul>
<li>Words that start with a consonant have all consonant letters up to the first vowel moved to the end of the word (as opposed to just the first consonant letter), and "-ay" is appended. -('Y' is counted as a vowel in this context). Examples are:</li>
<ul>
<li>"pig" → "ig-pay"</li>
<li>"banana" → "anana-bay"</li>
<li>"trash" → "ash-tray"</li>
<li>"happy" → "appy-hay"</li>
<li>"duck" → "uck-day"</li>
<li>"glove" → "ove-glay"</li>
</ul>
</ul>
</div>
</div>
</form>
</div>
</div>
<div class="section values">
<div class="row">
<div class="container">
<div class="six columns"></div>
<h3 class="section-heading">Like what you see?</h3>
<p class="section-description">My name is Joe, and I am a full-stack JavaScript developer. To check out more of my projects, please visit <a href="http://www.callmejoe.net/">my website</a>. To see the <a href="http://www.callmejoe.net/">source code</a> click the link to the repo.</p>
<a class="button button-primary" target="_blank" href="http://www.callmejoe.net/">Check Me Out</a>
<a class="button button-primary" target="_blank" href="https://github.com/JoeKarlsson1/Pig-Latin">GitHub Repo</a>
</div>
</div>
<div class="container">
<h3 class="section-heading">Plz share</h3>
<div class="entry-social">
<div class="fb">
<a href="https://www.facebook.com/sharer/sharer.php?&u=https://joekarlsson1.github.io/Pig-Latin/" target="_blank">Facebook</a>
</div>
<div class="twitter">
<a href="https://twitter.com/intent/tweet?url=https://joekarlsson1.github.io/Pig-Latin/" target="_blank">Twitter</a>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="pigLatin.js"></script>
</body>
</html>