اذهب إلى المحتوى
  • 0

html +JavaScript البحث من فقره

Mari Carmen

السؤال

- The border styles in the list are: solid, dashed and dotted.

- By clicking on “Create the styled paragraph“, you should insert the text ( in the text area) in a paragraph below with the selected style properties.

- By clicking on search (after putting a word to look for it), the paragraph that appeared below should highlight every matched word in it. If it is not exist it should display below that the word does not exist.

- By clicking on “Clear Search” you should remove all the highlights that appear on it from the last searching process.

- You should display the web page in a very similar way to the above suggestion.

كيف ممكن اعدل على كود اني ابحث عن كلمة موجوده ب text area  وكيف ممكن اعمل شكل كما في صوره 

<!DOCTYPE html>
<html>
<head>
<style>
aside {
float: left;
  padding: 20px;
  width: 70%;
  
  height: 300px
}

section:after {
  content: "";
  display: table;
  clear: both;
}


footer {
  
  padding: 10px;
  text-align: center;
  color: white;
}

</style>
</head>
<body>

<header>
  <textarea id="TextEditor" rows="30" cols="50" placeholder="Copy and Paste a text here ..."></textarea>
</header>

<section>
  <h1>Styling a paragraph</h1>
  <label for="textcolor">Text Color:</label>
<input type="color" id="textcolor" value="#ff0000"><br>

<label for="backgroundcolor">Background Color:</label>
<input type="color" id="backgroundcolor" value="#ff0000"><br>

<input type="radio" value="1" checked="checked">With Border<br>
<input type="radio" value="0">Without Border<br>

<label for="bordercolor">Border Color:</label>
<input type="color" id="bordercolor" value="#ff0000"><br>

<input type="button" value="Create the styled button">
<aside>
  <h1>Searching for a text</h1>
</aside>
</section>



<footer>
  
<div id="Results"></div>

</footer>
<script>
     document.querySelector('input[type = button]').addEventListener("click", function(){
    document.getElementById("Results").innerHTML = document.getElementById("TextEditor").value;
    if(document.querySelector('input[type = radio]:checked').value === 1){
        document.getElementById("Results").style.border = "thick solid "+document.getElementById("bordercolor").value;
    }
    document.getElementById("Results").style.color = document.getElementById("textcolor").value;
    document.getElementById("Results").style.backgroundColor = document.getElementById("backgroundcolor").value;
});


</script>


</body>
</html>

 

A.png

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0
بتاريخ 22 ساعات قال Mari Carmen:

نعم لكن لم اتمكن من البحث عن كلمة بل فقره

تفضل هذا هو الكود الكامل حيث أضفت به خاصية البحث وتفريغ البحث

<!DOCTYPE html>
<html>
<head>
<style>


</style>
</head>
<body>

<header>
  <textarea id="TextEditor" rows="30" cols="50" placeholder="Copy and Paste a text here ..."></textarea>
</header>

<section>
  <h1>Styling a paragraph</h1>
  <label for="textcolor">Text Color:</label>
<input type="color" id="textcolor" value="#ffffff"><br>

<label for="backgroundcolor">Background Color:</label>
<input type="color" id="backgroundcolor" value="#ff0000"><br>

<input type="radio" name="border" value="1">With Border<br>
<input type="radio" name="border" value="0">Without Border<br>

<label for="bordercolor">Border Color:</label>
<input type="color" id="bordercolor" value="#000000"><br>

<input type="button" onclick="StylePara()" value="Create the styled button">
<aside>
  <h1>Searching for a text</h1>
  <label for="findword">Text Color:</label>
  <input type="text" id="findword"><br>

  <input type="button" onclick="SearchPara()" value="Search">
  <input type="button" onclick="ClearSearch()" value="Clear Search">
  
</aside>
</section>



<footer>
  
<div id="Results"></div>

</footer>
<script>
function StylePara() {
    document.getElementById("Results").innerHTML = document.getElementById("TextEditor").value;
    if(document.querySelector('input[type=radio]:checked').value === '1'){
        document.getElementById("Results").style.border = "thick solid "+document.getElementById("bordercolor").value;
    }else if(document.querySelector('input[type=radio]:checked').value === '0'){
      document.getElementById("Results").style.border = "none";
    }
    document.getElementById("Results").style.color = document.getElementById("textcolor").value;
    document.getElementById("Results").style.backgroundColor = document.getElementById("backgroundcolor").value;
}

function ClearSearch(){
  var opar = document.getElementById('Results').innerHTML;
  var paragraph = document.getElementById('Results');

  paragraph.innerHTML = opar.replace('<mark>','').replace('</mark>','');
}

function SearchPara() {
  ClearSearch();
  var opar = document.getElementById('Results').innerHTML;
  var paragraph = document.getElementById('Results');
  var search = document.getElementById('findword').value;
  search = search.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');

  var re = new RegExp(search, 'g');
  var m;

  if (search.length > 0)
    paragraph.innerHTML = opar.replace(re, `<mark>$&</mark>`);
  else paragraph.innerHTML = opar;
}


</script>


</body>
</html>

بالتوفيق

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...