hello I am creating a writing app.
you can do formating too in that app
here is the demo: https://goodapps.w3spaces.com.docs.html
i spent a lot of time doing this and now i am stuck
here is the code below:
function showTextinBold()
{
let textToChange = document.getElementById('textToUse').getSelectedText();
let resultDivElement =document.getElementById('result');
resultDivElement.innerHTML = "<b>" + textToChange +"</b>";
}
function showTextinUnderline()
{
let textToChange = document.getElementById('textToUse').value;
let resultDivElement =document.getElementById('result');
resultDivElement.innerHTML = "<u>" + textToChange +"</u>";
}
//this will change the font color
function showTextinRed()
{ let colorDropdown=document.getElementById('colors');
let textToChange = document.getElementById('textToUse').value;
let resultDivElement =document.getElementById('result');
resultDivElement.innerHTML = "<font color='" + colorDropdown.selectedOptions[0].value+"'>" + textToChange +"</font>";
}
//this will change the font face or family of the text
function showTextinFonts()
{ let fontfamilyDropdown=document.getElementById('fonts');
let textToChange = document.getElementById('textToUse').value;
let resultDivElement =document.getElementById('result');
resultDivElement.innerHTML = "<font face='" + fontfamilyDropdown.selectedOptions[0].value+"'>" + textToChange +"</font>";
}
//this will change the font size of the text
function showTextinsizes()
{ let fontsizeDropdown=document.getElementById('sizes');
let textToChange = document.getElementById('textToUse').value;
let resultDivElement =document.getElementById('result');
resultDivElement.innerHTML = "<font size='" + fontsizeDropdown.selectedOptions[0].value+"'>" + textToChange +"</font>";
}
//this will cross out the text
function showTextinStrike()
{
let textToChange = document.getElementById('textToUse').value;
let resultDivElement =document.getElementById('result');
resultDivElement.innerHTML = "<strike>" + textToChange +"</strike>";
}
// this will show what you have wrote in the textarea but without formating
function showTextforResult()
{
let textToChange = document.getElementById('textToUse').value;
let resultDivElement =document.getElementById('result');
resultDivElement.innerHTML = textToChange ;
}
// this will make the text like a heading
function showTextforHeading()
{
let textToChange = document.getElementById('textToUse').value;
let resultDivElement =document.getElementById('result');
resultDivElement.innerHTML = "<h1>" + textToChange +"</h1>";
}
//this will make the text slanted or italic
function showTextforItalic()
{
let textToChange = document.getElementById('textToUse').value;
let resultDivElement =document.getElementById('result');
resultDivElement.innerHTML = "<i>" + textToChange +"</i>";
}
//this will change the background color of the text
function showTextforHighlight()
{
let textToChange = document.getElementById('textToUse').value;
let resultDivElement =document.getElementById('result');
resultDivElement.innerHTML = "<mark>" + textToChange +"</mark>";
}<input type = "button" value="Bold" style="font-weight: bold; background-color: white; margin-top: 8px;
padding: 14px;" id ="bold" onclick="showTextinBold()">
<input type="button" value = "Underline" id="und" style="text-decoration: underline ;background-color:white; margin-top: 8px;
padding: 14px;"onclick="showTextinUnderline()">
<input type="button" value="Stiketrough" id="strike" style="text-decoration: line-through; background-color: white; margin-top: 8px;
padding: 14px;" onclick="showTextinStrike()">
<input type="button" value="Italic" id="ita" style=" font-style: italic; background-color: white; margin-top: 8px;
padding: 14px;"onclick="showTextforItalic()">
<input type="button" value = "Highlight" id="mark" style="background-color:yellow; margin-top: 8px;
padding: 14px;"onclick="showTextforHighlight()">
<input type="button" value="Add heading" id="heading" style="font-size:small; font-weight: bold; background-color: white;margin-top: 8px;
padding: 14px;"onclick="showTextforHeading()">
<input type="button" value="Show Result" id="pararesulting1" style="background-color: white;margin-top: 8px;
padding: 14px;"onclick="showresultinnew()">
<input type="button" value="Print" ID="PT" style="background-color: white; margin-top: 8px;
padding: 14px;" onclick="print()">
<br>
<textarea id="textToUse" onkeyup="showTextforResult()">
Welcome to Aswin's Writer. This is completely free. You can start typing here. Just Press show result or any of the buttons to try it.To go to the next line just write <br>, the break symbol in HTML.
</textarea>
<br/><!-- this is where you will see the result after click on any of the formatting buttons/ dropdown menus-->
Result
<div id="result" class="result">
</div>but my problem is that I want to only get the selected text in that textarea and format them.It would be nice if you help me. Can you please help me?
