text-area-projects
Never
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Task1</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="p-4">
<textarea class="form-control" placeholder="Enter text here" id="textarea" style="height: 100px"
onkeyup="textfn(this.value)"></textarea>
</div>
<div class="alert alert-danger" id="content"></div>
<div class="task2 mt-4 p-4">
<button class="btn btn-info m-2" onclick="len()">Find length</button>
<span class="alert alert-danger d-none" id="len"></span>
</div>
<div class="task3 mt-4 p-4">
<button class="btn btn-info m-2" onclick="len_four_words()">Find 4 length words</button>
<span class="alert alert-danger d-none " id="lenfour"></span>
</div>
<div class="task4 mt-4 p-4">
<h1 class=" m-2" onclick="upcase()">Uppercase</h1>
<div class="alert alert-danger " id="upcase"></div>
</div>
<div class="task5 mt-4 p-4">
<h1 class=" m-2" onclick="locase()">Lowercase</h1>
<div class="alert alert-danger " id="locase"></div>
</div>
<div class="task6 mt-4 p-4">
<button class="btn btn-info m-2" onclick="rmspace()">remove space</button>
<div class="alert alert-danger " id="rmspace"></div>
</div>
<div class="task7 mt-4 p-4">
<button class=" m-2" onclick="nowords()">numberof words</button>
<span class="alert alert-danger d-none" id="nowords"></span>
</div>
<script>
let val;
function textfn(param){
val = param;
// console.log(val);
document.getElementById('content').innerHTML = val;
document.getElementById('upcase').innerText = val.toUpperCase();
document.getElementById('locase').innerText = val.toLowerCase();
}
function len() {
let data = document.getElementById('textarea').value
document.getElementById('len').innerText = data.length
document.getElementById('len').classList.remove('d-none')
}
function nowords() {
console.log("read");
let data = document.getElementById('textarea').value.split(" ")
document.getElementById('nowords').innerText = data.length
document.getElementById('nowords').classList.remove('d-none')
}
function rmspace() {
console.log("read");
let data = document.getElementById('textarea').value.split(" ").join("")
document.getElementById('rmspace').innerText = data
}
function len_four_words(){
let data = document.getElementById('textarea').value.split(" ")
four_words = data.map(item => item.length < 5)
}
</script>
</body>
</html>