Algorithms - Alphabetize String

YunaAnn · YunaAnn · commit fe09d3a78caa · 2020-10-24T21:02:01.000+02:00
diff --git a/README.md b/README.md
@@ -18,10 +18,17 @@
 3. Reverse String
     - EXAMPLE 
         1. cat -> tac
-        2. lovely -> ylevol
+        2. rain -> niar
 
-4. Repeat String
+4. Alphabetize String
+    - EXAMPLE 
+        1. cat -> act
+        2. rain -> ainr  
+
+5. Repeat String
     - EXAMPLE 
         1. cat, 5 -> catcatcatcatcat
-        2. rain, 4' -> rainrainrainrain        
+        2. rain, 4' -> rainrainrainrain   
+
+
 
diff --git a/algorithms.js b/algorithms.js
@@ -4,22 +4,24 @@ function nameSwap()
         // 'Doe Jane' -> 'Jane Doe'
         // 'Nowak Jan' -> 'Jan Nowak'
 
+    var nameSwapString = document.getElementById("nameSwap").value;
+
     /*
+    //option 1 :
     var stringToArray = nameSwapString.split(' ');
     var reverseArray = stringToArray.reverse();
     var reverseString = reverseArray.join(' ');
     document.getElementById("swapNameResult").innerHTML = reverseString;
     */
 
-    //Indexes
+    //option 2 : Indexes
     /*
     var array = nameSwapString.split(' ');
     var result = array[1] + ' ' + array[0];
     document.getElementById("swapNameResult").innerHTML = result;
     */
 
-    var nameSwapString = document.getElementById("nameSwap").value;
-    
+    //option 3 : One line
     var nameSwapResult = nameSwapString.split(' ').reverse().join(' ');
     document.getElementById("swapNameResult").innerHTML = nameSwapResult;
 }   
@@ -43,12 +45,25 @@ function palindrome()
 function reverseString()
 {   
     //EXAMPLE:
-    //1. cat, 5 -> catcatcatcatcat
-    //2. rain, 4' -> rainrainrainrain
+    //1. cat -> tac
+    //2. rain -> niar
 
     var reverseString = document.getElementById("reverseString").value;
     
     var reverseStringResult = reverseString.split('').reverse().join('');
+    
+    //option 2:
+    //var reverseStringResult = [...reverseString].reverse().join('');
+
+    //option 3 - for loop:
+    /*
+        var reverseStringResult = '';
+        for (var i = reverseString.length-1; i >= 0 ; i--)
+        {
+            reverseStringResult += reverseString; 
+        }
+    */
+
     document.getElementById("reverseStringResult").innerHTML = reverseStringResult;
 }
 
@@ -59,23 +74,23 @@ function repeatString()
     //'cat', 5 -> 'catcatcatcatcat'
     //'rain, 4' -> 'rainrainrainrain' 
 
-    var str = document.getElementById("repeatStringString").value;
-    var num = document.getElementById("repeatStringNumber").value;
+    var repeatStringString = document.getElementById("repeatStringString").value;
+    var repeatStringNumber = document.getElementById("repeatStringNumber").value;
 
     var finalString = '';
 
-    if(num <= 0)
+    if(repeatStringNumber <= 0)
     {
         finalString = ' Error. Incorrect data. ';
     }
 
     //for loop
-    for (var index = 1; index <=num; index++)
+    for (var index = 1; index <=repeatStringNumber; index++)
     {
-        finalString += str; 
+        finalString += repeatStringString; 
     }
 
-    //or while loop
+    //option 2 :  while loop
     /*
     while (num > 0) 
     {
@@ -87,4 +102,19 @@ function repeatString()
     document.getElementById("repeatStringResult").innerHTML = finalString;
 }
 
+function alphabetizeString()
+{
+    //EXAMPLE
+    //cat -> act
+    //rain -> ainr  
+
+    var alphabetizeStr = document.getElementById("alphabetizeString").value;
+
+    var alphabetizeStrResult = alphabetizeStr.split('').sort().join('');
+    //option 2
+    //var alphabetizeStrResult = [...alphabetizeStr].sort().join('');
+
+    document.getElementById("alphabetizeStringResult").innerHTML = alphabetizeStrResult;
+}
+
 
diff --git a/css/main.css b/css/main.css
@@ -52,7 +52,7 @@ strong
 
 .white-container h1
 {
-    font-size: 3rem;
+    font-size: 2rem;
     padding-bottom: 1rem;
 }
 
diff --git a/index.html b/index.html
@@ -46,6 +46,23 @@ <h6> lovely -> ylevol </h6>
                         <strong id="reverseStringResult"> ------------ </strong>
                     </div>   
   
+                    <div class="col-4">
+                        <div class="example">
+                            <h1 class="display-4"> Alphabetize String </h1>
+                            <h3 class="lead"> EXAMPLE </h3>
+                            <h6> cat -> act </h6>
+                            <h6> rain -> ainr </h6>
+                        </div>
+                        <div class="row">
+                            <div class="col-8">
+                                <input class="form-control form-control-lg" type="text" id="alphabetizeString" name="alphabetizeString">
+                            </div>
+                        </div>
+                        <button id="btn-space" onclick="alphabetizeString()" class="btn btn-outline-info btn-lg"> Alphabetize! </button>
+                        <p class="lead"> RESULT </p>
+                        <strong id="alphabetizeStringResult"> ------------ </strong>
+                    </div>   
+
                     <div class="col-4">
                         <div class="example">
                             <h1 class="display-4"> Repeat String </h1>
@@ -64,7 +81,7 @@ <h6> rain, 4' -> rainrainrainrain </h6>
                         <button id="btn-space" onclick="repeatString()" class="btn btn-outline-info btn-lg"> Repeat! </button>
                         <p class="lead"> RESULT </p>
                         <strong id="repeatStringResult"> ------------ </strong>
-                    </div>    
+                    </div>
 
                 </div>
 
@@ -109,21 +126,15 @@ <h6> Do geese see God? </h6>
                 <div class = "container">
 
                     <div class="row">
-                        <div class="col-4">
-                            <h3> JavaScript Algorithms </h3>
-                        </div>
                         <div class="col-4">
                         </div>
+
                         <div class="col-4">
                             <div class="contact">
                                 <a  target="_blank" rel="noopener noreferrer" href="https://github.com/YunaAnn/JavaScriptAlgorithms"> <i class="fas fa-code"></i></a>               
                                 <a  target="_blank" rel="noopener noreferrer" href="https://github.com/YunaAnn"><i class="fab fa-github" style="padding-left:10px"></i></a>
                             </div>
                         </div>    
-
-
-
-
                 </div>
 
 

Original file line number	Diff line number	Diff line change
`@@ -52,7 +52,7 @@ strong`
`52`	`52`
`53`	`53`	`.white-container h1`
`54`	`54`	`{`
`55`		`- font-size: 3rem;`
	`55`	`+ font-size: 2rem;`
`56`	`56`	`padding-bottom: 1rem;`
`57`	`57`	`}`
`58`	`58`