Tijani-zainab/redact-js-program.html

## redact-js-program.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>assignment</title>

</head>
<body>

    <form>
        <input id="message" type="text"/>
        <input id="message-tohide" type="text" placeholder="type text to hide"/>
        <input id="custom-replace" type="text" placeholder="specify char"/>
        <button type="button" id="redact-btn">hide text</button>
    </form>

    <div id="display-redacted" style="border: 5px solid rgb(140, 172, 140); width: 500px; height: 100px; margin-top: 10px;">

    </div>


</body>
<script src="redact-js-program.js" defer></script>
</html>

## redact-js-program.js
let writeMessage;
let ArrToHide;
let specifyChar;


let displayDiv = document.getElementById("display-redacted");
const redactBtn = document.getElementById("redact-btn");


redactBtn.addEventListener('click', function handleRedact(event) {
    event.preventDefault();
    writeMessage = document.getElementById("message").value;
    specifyChar = document.getElementById("custom-replace").value;
    ArrToHide = document.getElementById("message-tohide").value.split(' ');

    ArrToHide.forEach(element => {
        const regex = new RegExp(element, "gi");
        writeMessage = writeMessage.replace( regex, specifyChar);
        //writeMessage = writeMessage.replace( regex, if(specifyChar === null) {regex, "***"});

    });

    displayDiv.innerHTML = writeMessage;

    const resetInputs = document.querySelectorAll('#message, #message-tohide, #custom-replace');

    resetInputs.forEach(input => {
        input.value = '';
    });

})
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>assignment</title>

	</head>
	<body>

	<form>
	<input id="message" type="text"/>
	<input id="message-tohide" type="text" placeholder="type text to hide"/>
	<input id="custom-replace" type="text" placeholder="specify char"/>
	<button type="button" id="redact-btn">hide text</button>
	</form>

	<div id="display-redacted" style="border: 5px solid rgb(140, 172, 140); width: 500px; height: 100px; margin-top: 10px;">

	</div>


	</body>
	<script src="redact-js-program.js" defer></script>
	</html>
	let writeMessage;
	let ArrToHide;
	let specifyChar;


	let displayDiv = document.getElementById("display-redacted");
	const redactBtn = document.getElementById("redact-btn");


	redactBtn.addEventListener('click', function handleRedact(event) {
	event.preventDefault();
	writeMessage = document.getElementById("message").value;
	specifyChar = document.getElementById("custom-replace").value;
	ArrToHide = document.getElementById("message-tohide").value.split(' ');

	ArrToHide.forEach(element => {
	const regex = new RegExp(element, "gi");
	writeMessage = writeMessage.replace( regex, specifyChar);
	//writeMessage = writeMessage.replace( regex, if(specifyChar === null) {regex, "***"});

	});

	displayDiv.innerHTML = writeMessage;

	const resetInputs = document.querySelectorAll('#message, #message-tohide, #custom-replace');

	resetInputs.forEach(input => {
	input.value = '';
	});

	})