-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
102 lines (90 loc) · 3.6 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
font-size: 20px;
}
button {
width: 100px;
height: 50px;
border-radius: 10px;
background-color: orange;
}
button:hover {
background-color: #c37e01;
color: wheat;
}
textarea {
font-size: 30px;
height: 100px;
width: 600px;
}
</style>
</head>
<body>
<div class="title">Case Converter</div>
<label>
<textarea></textarea>
</label>
<button id="upper-case">Upper Case</button>
<button id="lower-case">Lower Case</button>
<button id="proper-case">Proper Case</button>
<button id="sentence-case">Sentence Case</button>
<button id="save-text-file">Save Text File</button>
<script>
const textArea = document.querySelector('textarea');
// const testText = 'Ivan went to the pub. S. s S No I am not there bro.. or I am here';
// textArea.value = testText;
const upperCaseButton = document.querySelector('#upper-case');
const lowerCaseButton = document.querySelector('#lower-case');
const properCaseButton = document.querySelector('#proper-case');
const sentenceCaseButton = document.querySelector('#sentence-case');
const saveTextFileButton = document.querySelector('#save-text-file');
const changeCase = (element) => (changeFn) => {
element.value = changeFn(element.value);
}
const changeTextArea = changeCase(textArea);
const toUpperCase = (text) => text.toUpperCase();
const toLowerCase = (text) => text.toLowerCase();
const toProperCase = (text) => {
const separator = ' ';
const words = text.split(separator);
return words.map(word => {
const [firstLetter, ...otherLetters] = word.split('');
return firstLetter.toUpperCase() + otherLetters.join('').toLowerCase();
}).join(separator)
};
const toSentenceCase = (text) => {
const separator = '. ';
const sentences = text.split(separator);
console.log({text, sentences});
return sentences.map(sentence => {
const [firstLetter, ...otherLetters] = sentence.split('');
// console.log({firstLetter, otherLetters})
return firstLetter.toUpperCase() + otherLetters.join('').toLowerCase();
}).join(separator);
};
const download = (filename, text) => {
let element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
upperCaseButton.addEventListener('click', () => changeTextArea(toUpperCase));
lowerCaseButton.addEventListener('click', () => changeTextArea(toLowerCase));
properCaseButton.addEventListener('click', () => changeTextArea(toProperCase));
sentenceCaseButton.addEventListener('click', () => changeTextArea(toSentenceCase));
saveTextFileButton.addEventListener('click', () => download('text.txt', textArea.value));
</script>
</body>
</html>