BedirhanYildirim_RegexForm.html updated

box shadow color changed, added samples to playground
salimsah · May 9, 2018 · 128af9a · 128af9a
1 parent 3960ff9
commit 128af9a
Showing 1 changed file with 31 additions and 64 deletions.
diff --git a/docs/regexp/BedirhanYildirim_RegexpForm.html b/docs/regexp/BedirhanYildirim_RegexpForm.html
@@ -190,6 +190,16 @@
           margin-top: -52px;
           display: block;
       }
+      .playGround .pgSamples{
+        background-color: #323330;
+        padding: 5px 8px;
+        width: 49%;
+        text-align: center;
+      }
+      .playGround .pgSamples a {
+        color: #ffffff;
+        margin: 0 15px;
+      }
       .playGround input {
         -webkit-transition: border, 100ms;
         transition: border, 100ms;
@@ -341,9 +351,6 @@
             <li>
               <a href="#examples">Examples</a>
             </li>
-            <!--<li>
-              <a href="#playground">Playground</a>
-            </li>-->
           </ul>
         </div>
       </div>
@@ -358,28 +365,44 @@ <h3>Regular Expression</h3>
         <div class="containerContent headerPlay">
           <p>Create you own pattern and test here.</p>
           <div class="playGround">
+            <div class="pgSamples">
+              <a id="sample1" href="#header">Just Numbers</a>
+              <a id="sample2"  href="#header">Lower Case</a>
+              <a id="sample3"  href="#header">11 Digit Phone Number</a>
+            </div>
+            <br>
             <label>Pattern:</label>
-            <input type="text" id="pattern1" name="sample1" placeholder="Enter your pattern">
+            <input type="text" id="pattern1" placeholder="Enter your pattern">
             <label>Text:</label>
-            <input type="text" id="text1" name="sample1" placeholder="Enter your text">
+            <input type="text" id="text1" placeholder="Enter your text">
             <img id="acceptImg" style="margin-left: 500px; padding-top: -300px;" height="50" src="http://bedirhanyildirim.com/automata/img/accept.png"/>
             <img id="rejectImg" style="margin-left: 500px; padding-top: -300px;" height="50" src="http://bedirhanyildirim.com/automata/img/reject.png"/>
           </div>
           <script type="text/javascript" >
             $(document).ready(function(){
-              document.getElementById("pattern1").value = "^\\d+$";
+              document.getElementById("pattern1").value = "";
+              $("#sample1").click(function(){
+                document.getElementById("pattern1").value = "^\\d+$";
+              });
+              $("#sample2").click(function(){
+                document.getElementById("pattern1").value = "^[a-z]{1,10}$";
+              });
+              $("#sample3").click(function(){
+                document.getElementById("pattern1").value = "^([0-9]{11})$";
+              });
+
               $("#text1").keyup(function(){
                 var word = $("#pattern1").val();
                 var re = new RegExp(word);
                 var txt = $("#text1").val();
                 if(re.test(this.value)){
-                  this.style.boxShadow = "0 0 20px green";
+                  this.style.boxShadow = "0 0 35px #0e8c6a";
                   $("#acceptImg").show();
                   $("#rejectImg").hide();
                 }else{
                   $("#acceptImg").hide();
                   $("#rejectImg").show();
-                  this.style.boxShadow = "0 0 20px red";
+                  this.style.boxShadow = "0 0 35px #d10606";
                 }
                 if(this.value == "" || $("#pattern1").val() == ""){
                   this.style.boxShadow = "none";
@@ -398,11 +421,6 @@ <h3>Regular Expression</h3>
           </script>
         </div>
       </div>
-
-
-
-
-
     </section>
     <section id="regex">
       <div class="container">
@@ -558,57 +576,6 @@ <h3>Basic Patterns</h3>
         </div>
       </div>
     </section>
-    <!--<div class="bigSeparatrix"></div>
-    <section id="playground">
-      <div class="container">
-        <div class="containerTitle">
-          <h3>Playground</h3>
-        </div>
-        <div class="containerContent">
-          <p>You can test here own patterns.</p>
-        </div>
-        <div class="separatrix"></div>
-        <div class="containerLittleTitle">
-          <h3>Test Here</h3>
-          <br style="clear: both;">
-        </div>
-        <div class="containerContent">
-          <p>Create you own pattern and test here.</p>
-          <div class="playGround">
-            <label>Pattern:</label>
-            <input type="text" id="pattern1" name="sample1" placeholder="Enter your pattern">
-            <label>Text:</label>
-            <input type="text" id="text1" name="sample1" placeholder="Enter your text">
-          </div>
-          <script type="text/javascript" >
-            $(document).ready(function(){
-              //document.getElementById("sample1").addEventListener('change', function (evt){
-                //console.log(this.value);
-              //});
-              $("#text1").keyup(function(){
-                var word = $("#pattern1").val();
-                var re = new RegExp(word);
-                var txt = $("#text1").val();
-                //var pattern = /^\d+$/;
-                if(re.test(this.value)){
-                  this.style.boxShadow = "0 0 20px green";
-                }else{
-                  this.style.boxShadow = "0 0 20px red";
-                }
-                if(this.value == "" || $("#pattern1").val() == ""){
-                  this.style.boxShadow = "none";
-                }
-              });
-              $("#pattern1").keyup(function(){
-                if(this.value == ""){
-                  $("#text1").style.boxShadow = "0 0 0 red";
-                }
-              });
-            });
-          </script>
-        </div>
-      </div>
-    </section>-->
     <section id="footer">
       <div class="footerContent">
         <p>This website made for term project of Formal Languages and Automata Theory course. Purpose of this website teaching Regular Expressions on JS to people who searchs and finds it.