Skip to content

Commit 138f056

Browse files
ryanveryanve
committed
0.5.0: Add online eol converter
1 parent 66ffd48 commit 138f056

File tree

5 files changed

+118
-16
lines changed

5 files changed

+118
-16
lines changed

‎converter.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
$('.js-converter__form').on('submit', function(e) {
2+
e.preventDefault()
3+
var $form = $(this)
4+
var $output = $form.find('.js-converter__output')
5+
var method = $form.find('.js-converter__method')[0].value
6+
var text = $form.find('.js-converter__input')[0].value
7+
$output.text(eol[method](text))
8+
});

‎index.html

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US" class="scheme--white">
3+
<title>EOL converter</title>
4+
<meta name="description" content="Newline character converter">
5+
<link rel="stylesheet" href="style.css">
6+
7+
<header class="m-b-3">
8+
<h1 class="m-b-1">eol converter</h1>
9+
<a class="button scheme--light" href="https://github.com/ryanve/eol">Github</a>
10+
<a class="button scheme--light" href="https://www.npmjs.com/package/eol">npm</a>
11+
</header>
12+
13+
<form class="js-converter__form">
14+
<fieldset class="m-b-2">
15+
<label class="block m-b-2">
16+
<b>Input</b>
17+
<textarea class="area border-radius scheme--white js-converter__input"></textarea>
18+
</label>
19+
<button type="submit" class="button scheme--dark">Convert line endings to</button>
20+
<label class="inline-block m-b-2">
21+
<select class="button scheme--light js-converter__method" aria-label="Convert to">
22+
<option selected>lf</option>
23+
<option>crlf</option>
24+
<option>cr</option>
25+
</select>
26+
</label>
27+
</fieldset>
28+
<section>
29+
<h2 class="inherit-size">Output</h2>
30+
<div class="area scheme--white border-radius js-converter__output" contenteditable></div>
31+
</section>
32+
</form>
33+
34+
<script src="eol.js"></script>
35+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.slim.min.js"></script>
36+
<script src="converter.js"></script>

‎package.json

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "eol",
33
"description": "Newline character converter",
4-
"version": "0.4.0",
4+
"version": "0.5.0",
55
"homepage": "https://github.com/ryanve/eol",
66
"license": "MIT",
77
"author": "Ryan Van Etten",
@@ -21,7 +21,8 @@
2121
],
2222
"main": "eol.js",
2323
"scripts": {
24-
"pretest": "jshint eol.js && jshint test.js",
24+
"lint": "jshint eol.js && jshint test.js",
25+
"pretest": "npm run lint",
2526
"test": "node test.js"
2627
},
2728
"repository": {

‎style.css

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
.scheme--white { background: #fafafa; color: #020202 }
2+
.scheme--dark { background: navy; color: #fafafa }
3+
.scheme--light { background: gainsboro; color: navy }
4+
5+
*, :before, :after { box-sizing: border-box }
6+
html { font: 1em/2 sans-serif; }
7+
body { width: 100%; margin: auto; padding: 1em }
8+
a { text-decoration: none }
9+
a:hover { text-decoration: underline }
10+
textarea, select { font: inherit }
11+
textarea { max-width: 100%; margin: 0 }
12+
header, section { display: block }
13+
fieldset { padding: 0; border: 0 }
14+
label { margin: 0; padding: 0 }
15+
h1, h2 { line-height: 1 }
16+
17+
.border-radius {
18+
border-radius: .25em;
19+
}
20+
21+
.inherit-size {
22+
font-size: inherit;
23+
}
24+
25+
.button {
26+
font-size: inherit;
27+
font-style: inherit;
28+
font-weight: bold;
29+
min-height: 2.5em;
30+
display: inline-block;
31+
border: 0;
32+
border-radius: .25em;
33+
padding: .33333em .66666em;
34+
margin: 0;
35+
}
36+
37+
.button:enabled:hover {
38+
cursor: pointer;
39+
text-decoration: underline;
40+
}
41+
42+
.m-b-1 {
43+
margin-bottom: .5em;
44+
}
45+
46+
.m-b-2 {
47+
margin-bottom: 1em;
48+
}
49+
50+
.m-b-3 {
51+
margin-bottom: 2em;
52+
}
53+
54+
.inline-block {
55+
display: inline-block;
56+
}
57+
58+
.block {
59+
display: block;
60+
}
61+
62+
.area {
63+
border: 2px solid gainsboro;
64+
padding: .25em;
65+
display: block;
66+
overflow: auto;
67+
resize: vertical;
68+
width: 100%;
69+
height: 7.5em;
70+
line-height: 1.1;
71+
}

‎test.html

-14
This file was deleted.

0 commit comments

Comments
 (0)