text-formation/script.js at main · frontend-core/text-formation · GitHub

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
const input = document.querySelector('#input-text');
const output = document.querySelector('#output-text');
const reset = document.querySelector('#reset');
const upper = document.querySelector('#upper');
const lower = document.querySelector('#lower');
const firstUpper = document.querySelector('#first-upper');
const bold = document.querySelector('#bold');
const embed = document.querySelector('#embed');
const under = document.querySelector('#under');
const whiteSpace = document.querySelector('#white-space');

////////////////////////////////////////////////////////////////////////
input.addEventListener("keyup", () => {
    output.value = input.value;
    toolText.style.opacity = "0";
});
////////////////////////////////////////////////////////////////////////
upper.addEventListener("click", () => {
    toolText.style.opacity = "0";
    return (output.value = output.value.toUpperCase());
});
////////////////////////////////////////////////////////////////////////
lower.addEventListener("click", () => {
    toolText.style.opacity = "0";
    return (output.value = output.value.toLowerCase());
});

////////////////////////////////////////////////////////////////////////
firstUpper.addEventListener("click", function() {
    //return (output.value = output.value.charAt(0).toUpperCase() + output.value.slice(1).toLowerCase());
    let parent = output.value.toLowerCase();
    let split = parent.split(" ");
    const newArr = [];
    for (let i = 0; i < split.length; i++) {
        let temp = split[i].charAt(0).toUpperCase() + split[i].slice(1);
        newArr.push(temp);
    }
    toolText.style.opacity = "0";
    return (output.value = newArr.join(" "));
});

////////////////////////////////////////////////////////////////////////
let isBolding = false;
bold.addEventListener("click", () => {
    toolText.style.opacity = "0";
    isBolding ? offBold() : onBold();
});

const onBold = () => {
    isBolding = true;
    output.classList.add('active');
    return output.value;
}

const offBold = () => {
    isBolding = false;
    output.classList.remove('active');
    return output.value;
}

//////////////////////////////////////////////////////////////////////////
let isEmbing = false;
embed.addEventListener("click", () => {
    toolText.style.opacity = "0";
    isEmbing ? offEmbed() : onEmbed();
});

const onEmbed = () => {
    isEmbing = true;
    output.style.fontStyle = "italic";
    return output.value;
};
const offEmbed = () => {
    isEmbing = false;
    output.style.fontStyle = "normal";
    return output.value;
};

////////////////////////////////////////////////////////////////////////
let isUndering = false;
under.addEventListener("click", () => {
    toolText.style.opacity = "0";
    isUndering ? offUnder() : onUnder();
});

const onUnder = () => {
    isUndering = true;
    output.style.textDecoration = "underline";
    return output.value;
};
const offUnder = () => {
    isUndering = false;
    output.style.textDecoration = "none";
    return output.value;
};

////////////////////////////////////////////////////////////////////////
reset.addEventListener("click", function() {
    input.value = ""
    output.value = "";
    toolText.style.opacity = "0";
});

////////////////////////////////////////////////////////////////////////
whiteSpace.addEventListener("click", () => {
    return (output.value = output.value.replace(/\s+/g, " "));
});

////////////////////////////////////////////////////////////////////////
/*const copyBtn = document.querySelector('.output');
pseudoStyle = getComputedStyle(copyBtn, '::after');     //get property ::after from css style
pseudoStyle.addEventListener("click", () => {});*/

//-----------------------------------------------------------------------------------
const toolText = document.querySelector('#tool-text');

function copy() {
    output.select(); //Get and select the text field
    output.setSelectionRange(0, 99999); /* For mobile devices */
    navigator.clipboard.writeText(output.value); //Copy the text inside the text field
    toolText.innerHTML = "Copied: " + output.value;
    toolText.style.opacity = "1";
}