Skip to content

Commit 0454b1f

Browse files
HuXn-WebDevHuXn-WebDev
committed
Text Formatter
1 parent 998a485 commit 0454b1f

File tree

3 files changed

+134
-0
lines changed

3 files changed

+134
-0
lines changed

‎34. Text Formatter/app.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
const inputField = document.getElementById("input-field");
2+
const outputField = document.getElementById("output-field");
3+
const buttons = document.querySelectorAll("button");
4+
5+
inputField.addEventListener(
6+
"keyup",
7+
() => (outputField.innerHTML = inputField.value)
8+
);
9+
10+
buttons.forEach((btn) => {
11+
btn.addEventListener("click", () => {
12+
if (btn.classList.contains("uppercase")) {
13+
outputField.innerHTML = outputField.innerHTML.toUpperCase();
14+
} else if (btn.classList.contains("lowercase")) {
15+
outputField.innerHTML = outputField.innerHTML.toLocaleLowerCase();
16+
} else if (btn.classList.contains("capitalize")) {
17+
outputField.innerHTML =
18+
outputField.innerHTML.charAt(0).toUpperCase() +
19+
outputField.innerHTML.slice(1).toLowerCase();
20+
} else if (btn.classList.contains("bold")) {
21+
outputField.style.fontWeight = "900";
22+
} else if (btn.classList.contains("italic")) {
23+
outputField.style.fontStyle = "italic";
24+
} else if (btn.classList.contains("underline")) {
25+
outputField.style.textDecoration = "underline";
26+
}
27+
});
28+
});

‎34. Text Formatter/index.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Text Formatter</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="input-container">
12+
<h2>Type In Your Words</h2>
13+
<input type="text" id="input-field" placeholder="Type Your Text Here" />
14+
</div>
15+
16+
<div class="btns-container">
17+
<button class="btn uppercase">ABC</button>
18+
<button class="btn lowercase">abc</button>
19+
<button class="btn capitalize">Abc</button>
20+
<button class="btn bold">B</button>
21+
<button class="btn italic">/</button>
22+
<button class="btn underline">ABC</button>
23+
</div>
24+
25+
<p id="output-field">Output</p>
26+
</div>
27+
28+
<script src="app.js"></script>
29+
</body>
30+
</html>

‎34. Text Formatter/style.css‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
text-align: center;
9+
background-color: #ccef;
10+
height: 100vh;
11+
display: flex;
12+
flex-direction: column;
13+
justify-content: center;
14+
align-items: center;
15+
}
16+
17+
.container {
18+
padding: 6rem;
19+
background: black;
20+
}
21+
22+
.container h2 {
23+
color: #fff;
24+
font-family: sans-serif;
25+
font-size: 3rem;
26+
margin-bottom: 40px;
27+
}
28+
29+
.input-container input {
30+
width: 100%;
31+
padding: 10px;
32+
margin-bottom: 20px;
33+
outline: none;
34+
}
35+
36+
button {
37+
padding: 10px 20px;
38+
font-weight: bold;
39+
cursor: pointer;
40+
background-color: blueviolet;
41+
color: #fff;
42+
border: none;
43+
margin: 10px;
44+
}
45+
46+
p {
47+
width: 600px;
48+
height: 600px;
49+
background: #ccef;
50+
color: #000;
51+
height: 80px;
52+
border: 1px solid #555;
53+
border-radius: 10px;
54+
display: flex;
55+
justify-content: center;
56+
align-items: center;
57+
margin: auto;
58+
margin-top: 2rem;
59+
font-family: sans-serif;
60+
}
61+
62+
.uppercase {
63+
text-transform: uppercase;
64+
}
65+
66+
.capitalize {
67+
text-transform: capitalize;
68+
}
69+
70+
.underline {
71+
text-decoration: underline;
72+
}
73+
74+
.italic {
75+
font-style: italic;
76+
}

0 commit comments

Comments
 (0)