Skip to content

Instantly share code, notes, and snippets.

@joismar

joismar/index.html

Created March 9, 2021 13:42
Show Gist options
  • Save joismar/7941b988d11bd97dfbb063c889901eea to your computer and use it in GitHub Desktop.
Save joismar/7941b988d11bd97dfbb063c889901eea to your computer and use it in GitHub Desktop.
Download ZIP
Text Formatter
Raw
index.html
<html>
<body>
<div class="container">
<div class="form">
<div class="mini-header">
<h3>Mode: </h3>
<select id="mode" class="mode" onchange="val()">
<div class="options">
<option value="m0">Pick a mode...</option>
<option style="background-color" value="m1">all lowercase</option>
<option value="m2">ALL UPPERCASE</option>
<option value="m3">First Uppercase</option>
<option value="m4">Intelligent Mode</option>
</div>
</select>
</div>
<textarea id="text" name="textarea" rows="10" onfocus="clearContents(this)" onkeyup="val()">Write the text here...</textarea>
</div>
<div class="result-outer">
<div class="mini-header">
<h3>Result:</h3>
<button onclick="copy()" class="copy-btn" id="copy">Copy</button>
</div>
<textarea name="result" id="result" rows="10"></textarea>
</div>
<div class="tuto">
<h3>Intelligent Mode Tutorial:</h3>
<p>Intelligent mode automatically corrects the most common scores such as:
<li>Capitalize the first letter of the words after punctuation and paragraph break.</li>
<li>Enter [space] after the comma.</li>
<li>Corrects unnecessary capitalization by giving the user the option of ## at the beginning of the word to CAPITALIZE it or # to Capitalize Only the First Letter. Ex: ##capitalize = CAPITALIZE and #capitalize = Capitalize.</li>
</p>
<p style="width:100%;text-align:center;">By Joismar @ Codepen</p>
</div>
<div class="toast" id="toast"></div>
</div>
</body>
</html>
Raw
script.js
function upper() {
var text = document.getElementById('text').value;
document.getElementById('result').value = text.toUpperCase();
}
function lower() {
var text = document.getElementById('text').value;
document.getElementById('result').value = text.toLowerCase();
}
function first() {
var text = document.getElementById('text').value;
var par = text.split(/\n/);
var html = ''
for (i = 0; i < par.length; i++) {
var strs = par[i].split(' ');
for (j = 0; j < strs.length; j++) {
if (strs[j].length == 1) {
html += strs[j].toUpperCase() + ' ';
} else {
html += strs[j].substr(0,1).toUpperCase() + strs[j].substr(-(strs[j].length - 1)) + ' ';
}
}
if (par.length > 1) {
html += '\n';
}
}
document.getElementById('result').value = html;
}
function imode() {
var text = document.getElementById('text').value;
text = text.toLowerCase();
var par = text.split(/\n/);
console.log(par);
var html = '';
for (i = 0; i < par.length; i++) {
par[i] = par[i].substr(0,1).toUpperCase() + par[i].substr(-(par[i].length - 1));
var strs = par[i].split(' ');
for (j = 0; j < strs.length; j++) {
if (strs[j].search(/(\w[.]$)/) != -1) {
if (j < strs.length-1) {
strs[j+1] = strs[j+1].substr(0,1).toUpperCase() + strs[j+1].substr(-(strs[j+1].length - 1));
}
}
if (strs[j].search(/(\w[,]\w)/) != -1) {
var mth = strs[j].match(/(\w[,]\w)/);
for (m = 0; m < mth.length; m++) {
strs[j] = strs[j].replace(/(\w[,]\w)/g, mth[m][0] + ', ' + mth[m][2]);
}
}
if (strs[j].search(/([#][#])\w+/) != -1) {
strs[j] = strs[j].substr(2, strs[j].length-1).toUpperCase();
}
if (strs[j].search(/([#])\w+/) != -1) {
strs[j] = strs[j].substr(0,2).toUpperCase()[1] + strs[j].substr(-(strs[j].length - 2));
}
if (strs[j] == ',') {
strs.splice(j,1)
strs[j-1] = strs[j-1] + ','
}
}
html += strs.join(' ');
if (par.length > 1) {
console.log('after if:'+html);
html += '\n';
console.log('after n:'+html);
}
}
document.getElementById('result').value = html;
}
function clearContents(element) {
if (element.value == 'Write the text here...') {
element.value = '';
}
}
function copy() {
var copyText = document.getElementById("result");
copyText.select();
document.execCommand("copy");
toast("Copied!")
}
function toast(text) {
visible(true, "toast");
document.getElementById("toast").innerHTML = text;
setTimeout(function(){visible(false, "toast")}, 2000);
}
function visible(on, id) {
if (on == true) {
document.getElementById(id).style.display = 'block';
} else {
document.getElementById(id).style.display = 'none';
}
}
function val() {
var mode = 'null';
var e = document.getElementById("mode");
mode = e.options[e.selectedIndex].value;
if (mode == 'm1') {
visible(true, "copy");
lower();
} else if (mode == 'm2') {
visible(true, "copy");
upper();
} else if (mode == 'm3') {
visible(true, "copy");
first();
} else if (mode == 'm4') {
visible(true, "copy");
imode();
} else {
visible(false, "copy");
document.getElementById('result').value = '';
}
}
Raw
style.css
@import url('https://fonts.googleapis.com/css?family=Nunito');
:root {
--bg-dark: #28272D;
--white: #FFF;
--black: #171717;
--silver: #C4C1C1;
--platinum: #E8E5E7;
}
#text, #result {
max-width: 430px;
}
body {
padding: 10px;
font-family: 'Nunito', sans-serif;
background-color: var(--bg-dark);
color: var(--white);
}
.container {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
max-width: 900px;
}
textarea {
width: 100%;
outline: none;
border: 0;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: var(--platinum);
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
font-family: 'Nunito', sans-serif;
}
.mini-header {
display: flex;
justify-content: space-between;
align-items: center;
}
select {
border: none;
outline: none;
font-size: 1.17em;
background: var(--bg-dark);
color: var(--white);
font-family: 'Nunito', sans-serif;
}
.result-outer, .form, .tuto{
margin: 10px;
min-width: 300px;
flex: 1;
}
.tuto {
background-color: var(--silver);
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
padding: 0 20px;
color: var(--black);
}
.copy-btn {
background: var(--silver);
border: none;
width: 100px;
height: 25px;
border-radius: 5px;
margin-right: 5px;
font-family: 'Nunito', sans-serif;
display: none;
}
.toast {
position: fixed;
display: none;
font-family: 'Nunito', sans-serif;
top: 50%;
left: 50%;
padding: 30px 50px;
background: rgba(12, 12, 12, .8);
border-radius: 5px;
transform: translate(-50%, -50%);
}
Raw
text-formatter.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment