From 9ea24431ee9de77a0854dc27d993c51f82d4e41c Mon Sep 17 00:00:00 2001
From: "Akadar.akku" <akadar.akku121@gmail.com>
Date: Thu, 10 Oct 2019 21:08:35 +0200
Subject: [PATCH 01/32] At last done  My homework

---
 week-1-project/index.html      |  94 +++++++++++++----------
 week-1-project/sort-handler.js |   9 ++-
 week-1-project/style.css       | 134 +++++++++++++++++++++++++++++++++
 3 files changed, 197 insertions(+), 40 deletions(-)
diff --git a/week-1-project/index.html b/week-1-project/index.html
index 9397ef9..f86086c 100644
--- a/week-1-project/index.html
+++ b/week-1-project/index.html
@@ -1,55 +1,73 @@
-<!doctype html>
-
-<html lang="en">
-
-<head>
-  <meta charset="utf-8">
-
-  <title>week 1 project</title>
-  <meta name="description" content="week 2 project">
-
-
+<html lang="en"><head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" type="text/css" href="./style.css">
+    <title>Akader-Ibrahim | JS week 1 project</title>
+    <meta name="description" content="JS week 1 project">
+<link rel="stylesheet" href="style.css">
 </head>
 
 <body>
+    
+    <!--header -->
+    <header>
+        <div class="container" id="header">
+            <div class="box" id="header-content">
+                <h1>JS Week-01 homework Akader Ibrahim</h1>
+                <p>This web page created to sort JS strings</p>
+                
+
+    <div id="sort-container" class="box">
+        <article class="accordion">
+            <input id="tab-1" type="checkbox" name="tab">
+            <div class="accordion_content">
+                <img src="sorted.png">
+            </div>
+        </article>
+        
+        <input id="sort-input" placeholder="characters to sort" type="text"> <br>
+        <button id="sort-button">sort it</button> <br>
+        <pre id="sort-output">akader</pre>
+    </div>
+
 
+    <div id="reverse-container" class="box">
+        <input id="reverse-input" placeholder="characters to reverse" type="text"> <br>
+        <button id="reverse-button">reverse it</button> <br>
+        <pre id="reverse-output">reverse A</pre>
+    </div>
 
-  <div id='sort-container'>
-    <input style='width:400px' id='sort-input' placeholder='characters to sort' /> <br>
-    <button id='sort-button'>sort it</button> <br>
-    <pre id='sort-output'></pre>
-  </div>
+    <div id="devowel-container" class="box">
+        <input id="devowel-input" placeholder="string to devowel" type="text"> <br>
+        <button id="devowel-button">devowel it</button> <br>
+        <pre id="devowel-output">remove all vowels from A</pre>
+    </div>
 
 
-  <div id='reverse-container'>
-    <input style='width:400px' id='reverse-input' placeholder='characters to reverse' /> <br>
-    <button id='reverse-button'>reverse it</button> <br>
-    <pre id='reverse-output'></pre>
-  </div>
+    <div id="repeat-container" class="box">
+        <input id="repeat-string-input" placeholder="characters to repeat" type="text"> <br>
+        <input id="repeat-number-input" placeholder="# of times to repeat" type="text"> <br>
+        <button id="repeat-button">repeat it</button> <br>
+        <pre id="repeat-output">repeat 4333 0 times</pre>
+    </div>
 
-  <div id='devowel-container'>
-    <input style='width:400px' id='devowel-input' placeholder='string to devowel' /> <br>
-    <button id='devowel-button'>devowel it</button> <br>
-    <pre id='devowel-output'></pre>
-  </div>
 
+    <footer>
+        <div id="footer">
+            <p>Akader-Ibrahim Copyright© 2019</p>
+        </div>
+    </footer>
 
-  <div id='repeat-container'>
-    <input style='width:400px' id='repeat-string-input' placeholder='characters to repeat' /> <br>
-    <input style='width:400px' id='repeat-number-input' placeholder='# of times to repeat' /> <br>
-    <button id='repeat-button'>repeat it</button> <br>
-    <pre id='repeat-output'></pre>
-  </div>
 
 
 
+    <script src="sort-handler.js"></script>
+    <script src="reverse-handler.js"></script>
+    <script src="devowel-handler.js"></script>
+    <script src="repeat-handler.js"></script>
 
-  <script src="sort-handler.js"></script>
-  <script src="reverse-handler.js"></script>
-  <script src="devowel-handler.js"></script>
-  <script src="repeat-handler.js"></script>
 
 
-</body>
 
-</html>
+</body></html>
\ No newline at end of file
diff --git a/week-1-project/sort-handler.js b/week-1-project/sort-handler.js
index e45575f..14db537 100644
--- a/week-1-project/sort-handler.js
+++ b/week-1-project/sort-handler.js
@@ -13,12 +13,17 @@ the handler is already set up to:
 
 
 function sortHandler() {
-
+  const toSort1 = ['Lemon','Banana','Apples','Grapes'];
   // read and process user input (this works, no need to change it!)
   const toSort = document.getElementById('sort-input').value;
 
   // pass user input through core logic (write this! it doesn't work)
-  const sorted = `sort the charecters in ${toSort}`;
+  function sortString(toSort){
+    let toSort1 = toSort.split('');
+    let sorted = toSort1.sort();
+    return sorted.join('');
+  }
+  const sorted = sortString(toSort);
 
   // report result to user (this works, no need to change it!)
   const outputField = document.getElementById('sort-output');
diff --git a/week-1-project/style.css b/week-1-project/style.css
index e69de29..3168265 100644
--- a/week-1-project/style.css
+++ b/week-1-project/style.css
@@ -0,0 +1,134 @@
+body {
+    font-family: Arial, Helvetica, sans-serif;
+    background-color: lightcoral;
+    padding:0;
+}
+
+img{
+    width:80%;
+}
+
+pre{
+    font-size: 15px;
+}
+.container {
+    display: block;
+    overflow: hidden;
+    margin: 0;
+}
+
+.box {
+    max-width: 600px;
+    text-align: center;
+    margin: auto;
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+#header {
+    background-color: olive;
+    min-height: 100px;
+    color: #ffffff;
+}
+
+#header span {
+    color: rgb(185, 184, 184);
+    font-size: 0.8em;
+}
+
+#header-content {
+    text-align: center;
+}
+
+button {
+    background-color: dimgray;
+    border: none;
+    height: 30px;
+    width: 150px;
+    color: #ffffff;
+    margin: 6px;
+    font-size: 16px;
+}
+
+button:hover{
+    background-color:rgb(97, 0, 68);
+}
+
+.box input[type=text] {
+    width: 80%;
+    padding: 5px;
+    margin: 5px 0;
+    /*box-sizing: border-box;*/
+    font-size: 16px;
+}
+
+#repeat-container{
+    margin-bottom:100px;
+}
+
+
+/*Accordion*/
+.accordion {
+    position: relative;
+    margin: 2px;
+  }
+
+.accordion input {
+    display: none; /*regular checkbox will not be visible*/
+  }
+  .accordion label {
+    display: block;
+    background: #2c3e50;
+    color: #fff;
+    font-weight: bold;
+    padding: 10px;
+    cursor: pointer;
+  }
+  .accordion label::after {
+    content: "\25b6"; /*ASCII code, ths is small arrow*/
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    display: block;
+    transition: all 0.6s;
+  }
+  .accordion input[type=checkbox]:checked + label::after {
+    transform: rotate(90deg); /*Always start counter clock (first right)*/
+  }
+  
+  /* Description itself */
+  .accordion_content {
+    overflow: hidden; /*key line is here Be careful, Game Rules still there but overflow closed.*/
+    /*background: #ccdef9;*/
+    transition: max-height 0.6s; 
+    max-height: 0;
+  }
+  .accordion_content p {
+    margin: 20px;
+  }
+  .accordion_content img{
+      width: 90%;
+      padding-left: 10px;
+  }
+
+  .accordion input:checked ~ .accordion_content {
+    max-height: 100vh; /*suddenly we change height then it will be visible because overflow now open*/
+  }
+
+
+
+
+/*Responsive*/
+@media (max-width:768px) {
+    .box {
+        max-width: 400px;
+        text-align: center;
+        margin: auto;
+        margin-top: 10px;
+        padding: 10px;
+    }
+
+    body {
+        font-size: 0.8em;
+    }
+}
\ No newline at end of file

From cce93b835d5dfaf887f48032112830cddf7ed729 Mon Sep 17 00:00:00 2001
From: IBRAHIM AHMED AKADER <44436763+akadarAkku@users.noreply.github.com>
Date: Thu, 10 Oct 2019 21:36:49 +0200
Subject: [PATCH 02/32] Update README.md

---
 week-1-project/README.md | 14 +-------------
 1 file changed, 1 insertion(+), 13 deletions(-)

diff --git a/week-1-project/README.md b/week-1-project/README.md
index 24d8141..7744f45 100644
--- a/week-1-project/README.md
+++ b/week-1-project/README.md
@@ -1,13 +1 @@
-
-## Week 1 Project
-
-| __a user can ...__ | _User Interface_ | _Handlers_ | _Core Logic_ |
-| --- | --- | --- | --- |
-| _... visit the page_ | (already done for you) | (already done for you) | (already done for you) |
-| _know what this page is for_ | Structure the page (header, footer, sections, ...) <br> provide some explanation of what everything will do  | (nothing!) | (nothing!) |
-| _... sort characters in a string_ | (nothing!) | <ul> <li> write a short script in the middle section of the handler to sort a string </li> <li> assign the new sorted string to the variable ```sorted```</li> </ul> | <- see the handler instructions <br><br> your core logic is in the middle of the handler |
-| _... reverse the characters in a string_ | (nothing!) | <ul> <li>write a short script in the middle section of the handler to reverse a string</li> <li> assign the new sorted string to the variable ```reversed```</li> </ul>| <- see the handler instructions <br><br> your core logic is in the middle of the handler |
-| _... remove the vowels from a string_ | (nothing!) | <ul> <li>write a short script in the middle section of the handler to remove the vowels from a string</li> <li> assign the new sorted string to the variable ```devoweled```</li> </ul>| <- see the handler instructions <br><br> your core logic is in the middle of the handler |
-| _... remove the vowels from a string_ | (nothing!) | <ul> <li>write a short script in the middle section of the handler to repeat a string a certain amount of times</li> <li> assign the new sorted string to the variable ```repeated```</li> </ul>| <- see the handler instructions <br><br> your core logic is in the middle of the handler |
-| _... have a pleasant user experience_ | write a stylish styling sheet <br> make sure everything is responsive  | (nothing!) | (nothing!) |
-
+[Live on gitpages](https://akadarakku.github.io/javascript-1/week-1-project/index.html)

From 7a39454aa2668d60a2040a710a364dfa82942ac9 Mon Sep 17 00:00:00 2001
From: "Akadar.akku" <akadar.akku121@gmail.com>
Date: Fri, 11 Oct 2019 11:17:13 +0200
Subject: [PATCH 03/32] Edited

---
 module-exercises/index.html   |  4 ++--
 module-exercises/variables.js | 10 ++++++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/module-exercises/index.html b/module-exercises/index.html
index 2ef651b..6a76a4b 100644
--- a/module-exercises/index.html
+++ b/module-exercises/index.html
@@ -21,7 +21,7 @@
    -->
 
   <script src="variables.js"></script>
-  <script src="functions.js"></script>
+  <!-- <script src="functions.js"></script>
   <script src="primitive-types.js"></script>
   <script src="explicit-coercion.js"></script>
   <script src="truthiness.js"></script>
@@ -35,7 +35,7 @@
   <script src="statements-vs-expressions.js"></script>
   <script src="loops.js"></script>
   <script src="for-in-for-of.js"></script>
-  <script src="errors-and-lifecycle.js"></script>
+  <script src="errors-and-lifecycle.js"></script> -->
 
 
   <a href="./challenges/index.html">challenge exercises</a>
diff --git a/module-exercises/variables.js b/module-exercises/variables.js
index 0ed91de..3e2f85f 100644
--- a/module-exercises/variables.js
+++ b/module-exercises/variables.js
@@ -82,7 +82,10 @@ function threeVariableSwap1() {
   let temp = '';
 
   // can be done in 4 lines
-
+  temp = a;
+  a = b;
+  b = c;
+  c = temp;
 
   console.assert(a === "a", "a should store 'a'");
   console.assert(b === "b", "b should store 'b'");
@@ -96,7 +99,10 @@ function threeVariableSwap2() {
   let temp = '';
 
   // can be done in 4 lines
-
+  temp = a;
+  a = c;
+  c = b;
+  b = temp;
 
   console.assert(a === "a", "a should store 'a'");
   console.assert(b === "b", "b should store 'b'");

From 5bb0d5b5f02e111c05051f954b62e29647dfda8b Mon Sep 17 00:00:00 2001
From: "Akadar.akku" <akadar.akku121@gmail.com>
Date: Sat, 12 Oct 2019 09:56:30 +0200
Subject: [PATCH 04/32] Module-exercises done

---
 module-exercises/functions.js       | 104 ++++++++++++++--------------
 module-exercises/index.html         |   6 +-
 module-exercises/primitive-types.js |  24 +++----
 module-exercises/variables.js       |  44 +++++++++---
 4 files changed, 102 insertions(+), 76 deletions(-)

diff --git a/module-exercises/functions.js b/module-exercises/functions.js
index f22570a..7df52e8 100644
--- a/module-exercises/functions.js
+++ b/module-exercises/functions.js
@@ -174,11 +174,11 @@ function tracing1() {
   };
 
   // set values in the args to pass the assert
-  let arg1 = "", arg2 = "", arg3 = "";
+  let arg1 = "y", arg2 = "x", arg3 = "z";
   let returnval = f(arg1, arg2, arg3);
   console.assert(returnval === "zyx", "1 a");
 
-  arg1 = "", arg2 = "", arg3 = "";
+  arg1 = "z", arg2 = "x", arg3 = "y";
   returnval = f(arg1, arg2, arg3);
   console.assert(returnval === "yzx", "1 b");
 
@@ -194,11 +194,11 @@ function tracing2() {
   };
 
   // set values in the args to pass the assert
-  let arg1 = "", arg2 = "", arg3 = "";
+  let arg1 = "x", arg2 = "y", arg3 = "z";
   let returnVal = f(arg1, arg3, arg2);
   console.assert(returnVal === "yxz", "returnVal should be yxz");
 
-  arg1 = "", arg2 = "", arg3 = "";
+  arg1 = "y", arg2 = "x", arg3 = "z";
   returnVal = f(arg2, arg1, arg3);
   console.log(returnVal === "zxy", "returnVal should be zxy");
 
@@ -217,12 +217,12 @@ function tracing3() {
   };
 
   // set values in the args to pass the assert
-  let arg1 = "", arg2 = "", arg3 = "";
+  let arg1 = "z", arg2 = "x", arg3 = "y";
   let returnVal = f(arg1, arg2, arg3);
   console.assert(returnVal === "yxz", "returnVal should be yxz");
 
 
-  arg1 = "", arg2 = "", arg3 = "";
+  arg1 = "z", arg2 = "y", arg3 = "x";
   returnVal = f(arg3, arg2, arg1);
   console.assert(returnVal === "zyx", "returnVal should be zyx");
 
@@ -239,11 +239,11 @@ function tracing4() {
   // pass x, y and z to the function in the right order
   // don't change their values!
   let x = "x", y = "y", z = "z";
-  let returnVal = f();
+  let returnVal = f(x,z,y);
   console.assert(returnVal === "yxz", "returnVal should be yxz");
 
   x = "x", y = "z", z = "y";
-  returnVal = f();
+  returnVal = f(z,x,y);
   console.assert(returnVal === "zyx", "returnVal should be zyx");
 
 }
@@ -260,11 +260,11 @@ function tracing5() {
   // pass x, y and z to the function in the right order
   // don't change their values!
   let x = "x", y = "y", z = "z";
-  let returnVal = f();
+  let returnVal = f(z,x,y);
   console.assert(returnVal === "xzy", "returnVal should be xzy");
 
   x = "y", y = "x", z = "z";
-  returnVal = f();
+  returnVal = f(x,z,y);
   console.assert(returnVal === "zyx", "returnVal should be zyx");
 
 }
@@ -275,7 +275,7 @@ function tracing6() {
 
   // concatinate the params to pass the tests
   function f(param1, param2, param3) {
-    const result = null;
+    const result = param3+param1+param2;
     return result;
   };
 
@@ -295,7 +295,7 @@ function tracing7() {
 
   // concatinate the params to pass the tests
   function f(param1, param2, param3) {
-    const result = null;
+    const result = param2+param3+param1;
     return result;
   };
 
@@ -314,16 +314,16 @@ evaluate(tracing7);
 function tracing8() {
 
   // arrange the parameters to pass the asserts
-  function f() {
+  function f(param1, param2, param3) {
     var result = param2 + param1 + param3;
     return result;
   };
 
-  let arg1 = "z", arg2 = "y", arg3 = "x";
+  let arg1 = "x", arg2 = "y", arg3 = "z";
   let returnVal = f(arg1, arg2, arg3);
   console.assert(returnVal === "yxz", "returnVal should be yxz");
 
-  arg1 = "x", arg2 = "z", arg3 = "y";
+  arg1 = "x", arg2 = "y", arg3 = "z";
   returnVal = f(arg3, arg1, arg2);
   console.assert(returnVal === "xzy", "returnVal should be xzy");
 
@@ -334,16 +334,16 @@ evaluate(tracing8);
 function tracing9() {
 
   // arrange the parameters to pass the asserts
-  function f() {
+  function f(param1, param2, param3) {
     var result = param1 + param2 + param3;
     return result;
   };
 
-  let arg1 = "y", arg2 = "z", arg3 = "x";
+  let arg1 = "x", arg2 = "y", arg3 = "z";
   let returnVal = f(arg1, arg2, arg3);
   console.assert(returnVal === "xyz", "returnVal should be xyz");
 
-  arg1 = "z", arg2 = "x", arg3 = "y";
+  arg1 = "y", arg2 = "z", arg3 = "x";
   returnVal = f(arg3, arg1, arg2);
   console.assert(returnVal === "xyz", "returnVal should be xyz");
 
@@ -354,21 +354,21 @@ evaluate(tracing9);
 function tracing10() {
 
   // do what needs to be done!
-  function f() {  // <--
+  function f(param1, param2, param3,param4) {  // <--
     var result = param3 + param1 + param2 + param4;
     return result;
   };
 
-  let arg1 = "", arg2 = "", arg3 = "", arg4 = ""; // <--
+  let arg1 = "y", arg2 = "z", arg3 = "x", arg4 = "w"; // <--
   let returnVal = f(arg1, arg2, arg3, arg4);
   console.assert(returnVal === "xyzw", "returnVal should be xyzw");
 
   arg1 = "z", arg2 = "w", arg3 = "y", arg4 = "x";
   returnVal = f(arg3, arg1, arg4, arg2);
-  console.assert(returnVal === "", "returnVal should be ?"); // <--
+  console.assert(returnVal === "xyzw", "returnVal should be xyzw"); // <--
 
   arg1 = "z", arg2 = "w", arg3 = "y", arg4 = "x";
-  returnVal = f();                                   // <--
+  returnVal = f(arg3, arg2, arg1, arg4);                                  // <--
   console.assert(returnVal === "zywx", "returnVal should be zywx");
 
 }
@@ -431,12 +431,12 @@ evaluate(example2_testCases, exampleTestCases);
 
 
 const writeTestCases1 = [
-  { name: 'first', args: [/* what adds to be 5? */], expected: 5 },
-  { name: 'second', args: [/* what else adds to be 5? */], expected: 5 },
-  { name: 'third', args: [-2, 2], expected: null }, // what return value do you expect?
-  { name: 'fourth', args: [100, 20], expected: null }, // what return value do you expect?
-  { name: 'fifth', args: [], expected: null }, // create your own test case!
-  { name: 'sixth', args: [], expected: null }, // create your own test case!
+  { name: 'first', args: [1,4], expected: 5 },
+  { name: 'second', args: [2,3], expected: 5 },
+  { name: 'third', args: [-2, 2], expected: 0 }, // what return value do you expect?
+  { name: 'fourth', args: [100, 20], expected: 120 }, // what return value do you expect?
+  { name: 'fifth', args: [3,5], expected: 8 }, // create your own test case!
+  { name: 'sixth', args: [4,6], expected: 10 }, // create your own test case!
 ];
 function functionToTest1(a, b) {
   const result = a + b;
@@ -445,12 +445,12 @@ function functionToTest1(a, b) {
 evaluate(functionToTest1, writeTestCases1);
 
 const writeTestCases2 = [
-  { name: 'first', args: [/* what subtracts to be 5? */], expected: 5 },
-  { name: 'second', args: [/* what else subtracts to be 5? */], expected: 5 },
-  { name: 'third', args: [10, 2], expected: null }, // what return value do you expect?
-  { name: 'fourth', args: [10, 20], expected: null }, // what return value do you expect?
-  { name: 'fifth', args: [], expected: null }, // create your own test case!
-  { name: 'sixth', args: [], expected: null }, // create your own test case!
+  { name: 'first', args: [6,1], expected: 5 },
+  { name: 'second', args: [7,2], expected: 5 },
+  { name: 'third', args: [10, 2], expected: 8 }, // what return value do you expect?
+  { name: 'fourth', args: [10, 20], expected: -10 }, // what return value do you expect?
+  { name: 'fifth', args: [2,1], expected: 1 }, // create your own test case!
+  { name: 'sixth', args: [3,1], expected: 2 }, // create your own test case!
 ];
 function functionToTest2(a, b) {
   const result = a - b;
@@ -461,12 +461,12 @@ evaluate(functionToTest2, writeTestCases2);
 
 
 const writeTestCases3 = [
-  { name: 'first', args: [/* what multiplies to be 5? */], expected: 5 },
-  { name: 'second', args: [/* what else multiplies to be 5? */], expected: 5 },
-  { name: 'third', args: [10, 2], expected: null }, // what return value do you expect?
-  { name: 'fourth', args: [10, 20], expected: null }, // what return value do you expect?
-  { name: 'fifth', args: [], expected: null }, // create your own test case!
-  { name: 'sixth', args: [], expected: null }, // create your own test case!
+  { name: 'first', args: [5,1], expected: 5 },
+  { name: 'second', args: [1,5], expected: 5 },
+  { name: 'third', args: [10, 2], expected: 20 }, // what return value do you expect?
+  { name: 'fourth', args: [10, 20], expected: 200 }, // what return value do you expect?
+  { name: 'fifth', args: [1,2], expected: 2 }, // create your own test case!
+  { name: 'sixth', args: [1,3], expected: 3 }, // create your own test case!
 ];
 function functionToTest3(a, b) {
   const result = a * b;
@@ -477,12 +477,12 @@ evaluate(functionToTest3, writeTestCases3);
 
 
 const writeTestCases4 = [
-  { name: 'first', args: [/* what letters in what order will return "zyx"? */], expected: 'zyx' },
-  { name: 'second', args: [/* what letters in what order will return "yzx"? */], expected: 'yzx' },
-  { name: 'third', args: ['y', 'z', 'x'], expected: null }, // what return value do you expect?
-  { name: 'fourth', args: ['x', 'y', 'z'], expected: null }, // what return value do you expect?
-  { name: 'fifth', args: [], expected: null }, // create your own test case!
-  { name: 'sixth', args: [], expected: null }, // create your own test case!
+  { name: 'first', args: ['y','x','z'], expected: 'zyx' },
+  { name: 'second', args: ['z','x','y'], expected: 'yzx' },
+  { name: 'third', args: ['y', 'z', 'x'], expected: 'xyz' }, // what return value do you expect?
+  { name: 'fourth', args: ['x', 'y', 'z'], expected: 'zxy' }, // what return value do you expect?
+  { name: 'fifth', args: ['y','x','z'], expected: 'zyx' }, // create your own test case!
+  { name: 'sixth', args: ['x','z','y'], expected: 'yxz' }, // create your own test case!
 ];
 function functionToTest4(a, b, c) {
   const result = c + a + b;
@@ -493,12 +493,12 @@ evaluate(functionToTest4, writeTestCases4);
 
 
 const writeTestCases5 = [
-  { name: 'first', args: [/* what letters in what order will return "zyx"? */], expected: 'zyx' },
-  { name: 'second', args: [/* what letters in what order will return "yzx"? */], expected: 'yzx' },
-  { name: 'third', args: ['y', 'z', 'x'], expected: null }, // what return value do you expect?
-  { name: 'fourth', args: ['x', 'y', 'z'], expected: null }, // what return value do you expect?
-  { name: 'fifth', args: [], expected: null }, // create your own test case!
-  { name: 'sixth', args: [], expected: null }, // create your own test case!
+  { name: 'first', args: ['x', 'z', 'y'], expected: 'zyx' },
+  { name: 'second', args: ['x', 'y', 'z'], expected: 'yzx' },
+  { name: 'third', args: ['y', 'z', 'x'], expected: 'zxy'}, // what return value do you expect?
+  { name: 'fourth', args: ['x', 'y', 'z'], expected:'yzx' }, // what return value do you expect?
+  { name: 'fifth', args: ['z', 'y', 'x'], expected: 'yxz' }, // create your own test case!
+  { name: 'sixth', args:['z', 'x', 'y'], expected: 'xyz' }, // create your own test case!
 ];
 function functionToTest5(a, b, c) {
   const result = b + c + a;
diff --git a/module-exercises/index.html b/module-exercises/index.html
index 6a76a4b..5394ecc 100644
--- a/module-exercises/index.html
+++ b/module-exercises/index.html
@@ -21,9 +21,9 @@
    -->
 
   <script src="variables.js"></script>
-  <!-- <script src="functions.js"></script>
+  <script src="functions.js"></script>
   <script src="primitive-types.js"></script>
-  <script src="explicit-coercion.js"></script>
+  <!--<script src="explicit-coercion.js"></script>
   <script src="truthiness.js"></script>
   <script src="truthiness-operators.js"></script>
   <script src="primitive-operators.js"></script>
@@ -35,7 +35,7 @@
   <script src="statements-vs-expressions.js"></script>
   <script src="loops.js"></script>
   <script src="for-in-for-of.js"></script>
-  <script src="errors-and-lifecycle.js"></script> -->
+  <script src="errors-and-lifecycle.js"></script>-->
 
 
   <a href="./challenges/index.html">challenge exercises</a>
diff --git a/module-exercises/primitive-types.js b/module-exercises/primitive-types.js
index 2ab5eb0..0e686f9 100644
--- a/module-exercises/primitive-types.js
+++ b/module-exercises/primitive-types.js
@@ -59,27 +59,27 @@ evaluate(example_allValuesHaveAType);
 // the type of a value is very important to understanding how JS works
 const typeofTests = [
   // boolean values
-  { name: 'boo, true', args: [true], expected: '' },
-  { name: 'boo, false', args: [false], expected: '' },
+  { name: 'boo, true', args: [true], expected: 'true' },
+  { name: 'boo, false', args: [false], expected: 'false'},
   // null's type is 'null'.  just remember, don't try yet to understand
-  { name: 'obj, true', args: [null], expected: '' },
+  { name: 'obj, true', args: [true], expected: 'object' },
   // undefined. like with null, there is only one value with this type
-  { name: 'und, undefined', args: [undefined], expected: '' },
+  { name: 'und, undefined', args: [undefined], expected: 'undefined' },
   // strings are anything with quotes around it
-  { name: 'str, ', args: [''], expected: '' },
-  { name: 'str, anything with quotes!', args: ['anything with quotes!'], expected: '' },
+  { name: 'str, ', args: [''], expected: 'string' },
+  { name: 'str, anything with quotes!', args: ['anything with quotes!'], expected: 'string' },
   // numbers are a bit more strange and varied
   { name: 'num, 0.0', args: [0.0], expected: 'number' },
   { name: 'num, NaN', args: [NaN], expected: 'number' },
   { name: 'num, Infinity', args: [Infinity], expected: 'number' },
   { name: 'num, 4', args: [4], expected: 'number' },
   // write 6 more passing test cases with expected value 'number'
-  { name: '', args: null, expected: null },
-  { name: '', args: null, expected: null },
-  { name: '', args: null, expected: null },
-  { name: '', args: null, expected: null },
-  { name: '', args: null, expected: null },
-  { name: '', args: null, expected: null },
+  { name: 'boo, true', args: [true], expected: 'true' },
+  { name: 'num, 2', args: [2], expected: 'number' },
+  { name: 'str,fruit', args: ['elma'], expected: 'string' },
+  { name: 'und, undefined', args: [undefined], expected: 'undefined' },
+  { name: 'str,apple ', args: ['elma'], expected: 'string' },
+  { name: 'boo, false', args: [false], expected: 'false'},
 ]
 function allValuesHaveAType(value) {
   return typeof value;
diff --git a/module-exercises/variables.js b/module-exercises/variables.js
index 3e2f85f..b346a3d 100644
--- a/module-exercises/variables.js
+++ b/module-exercises/variables.js
@@ -82,10 +82,11 @@ function threeVariableSwap1() {
   let temp = '';
 
   // can be done in 4 lines
-  temp = a;
-  a = b;
-  b = c;
-  c = temp;
+  temp=a;
+  a=b;
+  b=c;
+  c=temp;
+
 
   console.assert(a === "a", "a should store 'a'");
   console.assert(b === "b", "b should store 'b'");
@@ -99,10 +100,11 @@ function threeVariableSwap2() {
   let temp = '';
 
   // can be done in 4 lines
-  temp = a;
-  a = c;
-  c = b;
-  b = temp;
+  temp=a;
+  a=c;
+  c=b;
+  b=temp;
+
 
   console.assert(a === "a", "a should store 'a'");
   console.assert(b === "b", "b should store 'b'");
@@ -116,6 +118,12 @@ function fourVariableSwap1() {
   let temp = '';
 
   // can be done in 5 lines
+  temp=a;
+  a=b;
+  b=c;
+  c=d;
+  d=temp;
+
 
 
   console.assert(a === "a", "a should store 'a'");
@@ -131,6 +139,12 @@ function fourVariableSwap2() {
   let temp = '';
 
   // can be done in 6 lines
+  temp=a;
+  a=d;
+  d=temp;
+  temp=b;
+  b=c;
+  c=temp;
 
 
   console.assert(a === "w", "a should store 'w'");
@@ -146,6 +160,12 @@ function fiveVariableSwap() {
   let temp = ' ';
 
   // can be done in 6 lines
+  temp=a;
+  a=e;
+  e=temp;
+  temp=b;
+  b=d;
+  d=temp;
 
 
   console.assert(a === "v", "a should store 'v'");
@@ -195,6 +215,7 @@ function multipleAssignments1() {
   let temp = '';
 
   // can be done in 1 line
+  temp = a, a = b, b = c, c = temp;
 
 
   console.assert(a === "a", "a should store 'a'");
@@ -209,6 +230,7 @@ function multipleAssignments2() {
   let temp = '';
 
   // can be done in 1 line
+  temp = a, a = c,  c = b,  b = temp;
 
 
   console.assert(a === "a", "a should store 'a'");
@@ -223,6 +245,7 @@ function multipleAssignments3() {
   let temp = '';
 
   // can be done in 1 line
+  temp=a,  a=b,  b=c,  c=d,  d=temp;
 
 
   console.assert(a === "a", "a should store 'a'");
@@ -238,6 +261,7 @@ function multipleAssignments4() {
   let temp = '';
 
   // can be done in 1 line
+  temp=a,  a=d,  d=temp,  temp=b,  b=c,  c=temp;
 
 
   console.assert(a === "w", "a should store 'w'");
@@ -270,11 +294,12 @@ evaluate(example_chainedAssignments);
 
 
 function chainedAssignments1() {
-
+  
   let a1 = a2 = 'b', b = 'a';
   let temp = '';
 
   // can be done in 3 lines or less
+  temp=a1=a2,  a1=a2=b,  b=temp;
 
   console.assert(a1 === "a", 'a1 should store "a"');
   console.assert(a1 === a2, 'a1 should store the same value as a2');
@@ -291,6 +316,7 @@ function chainedAssignments2() {
   let temp = '';
 
   // can be done in 4 lines or less
+  temp=a, a=b1=b2, b1=b2=c1, c1=c2=c3=temp;
 
 
 

From 233becb7a380f29d3f850106d700163d2f56111d Mon Sep 17 00:00:00 2001
From: "Akadar.akku" <akadar.akku121@gmail.com>
Date: Sat, 12 Oct 2019 20:16:29 +0200
Subject: [PATCH 05/32] I edited my code

---
 week-1-project/index.html         | 120 ++++++++---------
 week-1-project/reverse-handler.js |  13 +-
 week-1-project/style.css          | 208 ++++++++++++++----------------
 3 files changed, 163 insertions(+), 178 deletions(-)

diff --git a/week-1-project/index.html b/week-1-project/index.html
index f86086c..a63393b 100644
--- a/week-1-project/index.html
+++ b/week-1-project/index.html
@@ -1,73 +1,65 @@
+<!DOCTYPE html>
 <html lang="en"><head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <link rel="stylesheet" type="text/css" href="./style.css">
-    <title>Akader-Ibrahim | JS week 1 project</title>
-    <meta name="description" content="JS week 1 project">
-<link rel="stylesheet" href="style.css">
-</head>
-
-<body>
-    
-    <!--header -->
-    <header>
-        <div class="container" id="header">
-            <div class="box" id="header-content">
-                <h1>JS Week-01 homework Akader Ibrahim</h1>
-                <p>This web page created to sort JS strings</p>
-                
-
-    <div id="sort-container" class="box">
-        <article class="accordion">
-            <input id="tab-1" type="checkbox" name="tab">
-            <div class="accordion_content">
-                <img src="sorted.png">
-            </div>
-        </article>
-        
-        <input id="sort-input" placeholder="characters to sort" type="text"> <br>
-        <button id="sort-button">sort it</button> <br>
-        <pre id="sort-output">akader</pre>
+    <meta charset="utf-8">
+  
+    <title>week 1 project</title>
+    <meta name="description" content="week 2 project">
+    <link rel="stylesheet" href="style.css" type="text/css">
+  
+  </head>
+  
+  <body>
+  
+    <header id="header">
+      <h1>Akader Ibrahim Week-1 JS Project</h1>
+    </header>
+
+    <div id="sort-container">
+           
+      <input style="width:183px" center'="" id="sort-input" placeholder="characters to sort"> <br>
+      <button id="sort-button"><strong>Sort It</strong></button> <br>
+      <pre id="sort-output"></pre>
+      <p>This JavaScript function sorts the characters of the 
+        word you typed in accordance with their charCode numbers.</p>
     </div>
-
-
-    <div id="reverse-container" class="box">
-        <input id="reverse-input" placeholder="characters to reverse" type="text"> <br>
-        <button id="reverse-button">reverse it</button> <br>
-        <pre id="reverse-output">reverse A</pre>
+  
+    <div id="reverse-container">
+      <input style="width:183px" id="reverse-input" placeholder="characters to reverse"> <br>
+      <button id="reverse-button"><strong>Reverse It</strong></button> <br>
+      <pre id="reverse-output"></pre>
+      <h3>What Does This Function Do!</h3>
+      <p>This JavaScript function reverses the characters of the 
+        word you typed.</p>
     </div>
-
-    <div id="devowel-container" class="box">
-        <input id="devowel-input" placeholder="string to devowel" type="text"> <br>
-        <button id="devowel-button">devowel it</button> <br>
-        <pre id="devowel-output">remove all vowels from A</pre>
+  
+    <div id="devowel-container">
+      <input style="width:183px" id="devowel-input" placeholder="string to devowel"> <br>
+      <button id="devowel-button"><strong>Devowel It</strong></button> <br>
+      <pre id="devowel-output"></pre>
+      <h3>What Does This Function Do!</h3>
+      <p>This JavaScript function takes the vowels out of the 
+        word you typed.</p>
     </div>
-
-
-    <div id="repeat-container" class="box">
-        <input id="repeat-string-input" placeholder="characters to repeat" type="text"> <br>
-        <input id="repeat-number-input" placeholder="# of times to repeat" type="text"> <br>
-        <button id="repeat-button">repeat it</button> <br>
-        <pre id="repeat-output">repeat 4333 0 times</pre>
+  
+  
+    <div id="repeat-container">
+      <input style="width:183px" id="repeat-string-input" placeholder="characters to repeat"> <br>
+      <input style="width:183px" id="repeat-number-input" placeholder="# of times to repeat"> <br>
+      <button id="repeat-button"><strong>Repeat It</strong></button> <br>
+      <pre id="repeat-output"></pre>
+      <h3>What Does This Function Do!</h3>
+      <p>This JavaScript function repeats the words you typed as many as you want.</p>
     </div>
-
-
-    <footer>
-        <div id="footer">
-            <p>Akader-Ibrahim Copyright© 2019</p>
-        </div>
-    </footer>
-
-
-
-
+  
+    <footer id="footer">
+      <p><strong>Akader, Copyright © 2019</strong></p>
+  </footer>
+  
     <script src="sort-handler.js"></script>
     <script src="reverse-handler.js"></script>
     <script src="devowel-handler.js"></script>
     <script src="repeat-handler.js"></script>
-
-
-
-
-</body></html>
\ No newline at end of file
+  
+  
+  
+  </body></html>
\ No newline at end of file
diff --git a/week-1-project/reverse-handler.js b/week-1-project/reverse-handler.js
index 6682c5f..78f1285 100644
--- a/week-1-project/reverse-handler.js
+++ b/week-1-project/reverse-handler.js
@@ -18,11 +18,18 @@ function reverseHandler() {
   const toReverse = document.getElementById('reverse-input').value;
 
   // pass user input through core logic (write this! it doesn't work)
-  const reversed = `reverse ${toReverse}`;
-
+  
+  function reverseString (toReverse){
+    let reversed="";
+    for (i=toReverse.length-1;i>=0;i--){
+      reversed+=toReverse[i];
+    }
+    return reversed;
+  }
+ 
   // report result to user (this works, no need to change it!)
   const outputField = document.getElementById('reverse-output');
-  outputField.innerHTML = reversed;
+  outputField.innerHTML = reverseString (toReverse);
 
   console.log('\n--- reverseHandler ---');
   console.log('toReverse:', typeof toReverse, ',', toReverse);
diff --git a/week-1-project/style.css b/week-1-project/style.css
index 3168265..51811c8 100644
--- a/week-1-project/style.css
+++ b/week-1-project/style.css
@@ -1,134 +1,120 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,700&display=swap');
+
 body {
-    font-family: Arial, Helvetica, sans-serif;
-    background-color: lightcoral;
-    padding:0;
+    background-color: burlywood;
+    font-family: 'Roboto', sans-serif;
+
+}
+
+/*header*/
+
+#header {
+    background:olivedrab;
+    text-align: center;
+    margin-top: 10px;
+    padding: 2%;
+    color: white;
+   
 }
 
-img{
-    width:80%;
+#name_header {
+    background-color: darkseagreen;
+    padding: 5px;
+    border-radius: 10%;
+    width: 50%;
 }
 
-pre{
-    font-size: 15px;
+
+/* sort container */
+#sort-container {
+    background-color:lightseagreen;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 10px;
+    padding: 5%;
+    border-radius: 2%;
+    color: #ffffff;
+    width: 70%;
+    margin: 10px auto;
+}
+#sort-input {
+    width: 200px;
 }
-.container {
-    display: block;
-    overflow: hidden;
-    margin: 0;
+#sort-button {
+    width: 200px;
+    border-bottom: darkseagreen;
 }
 
-.box {
-    max-width: 600px;
+#sort-output {
+    width: 200px;
     text-align: center;
-    margin: auto;
-    margin-top: 20px;
-    margin-bottom: 20px;
 }
 
-#header {
-    background-color: olive;
-    min-height: 100px;
+/* reverse container */
+
+#reverse-container {
+    background-color:lightseagreen;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 5%;
+    border-radius: 2%;
     color: #ffffff;
+    width: 70%;
+    margin: 10px auto;
 }
-
-#header span {
-    color: rgb(185, 184, 184);
-    font-size: 0.8em;
+#reverse-input {
+    width: 200px;
+}
+#reverse-button {
+    width: 200px;
+}
+/* devowel-container */
+
+#devowel-container {
+    background-color:lightseagreen;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 10px;
+    padding: 5%;
+    border-radius: 2%;
+    color: #ffffff;
+    width: 70%;
+    margin: 10px auto;
 }
 
-#header-content {
-    text-align: center;
+
+#devowel-input {
+    width: 200px;
+}
+#devowel-button {
+    width: 200px;
 }
 
-button {
-    background-color: dimgray;
-    border: none;
-    height: 30px;
-    width: 150px;
+/* repeat-container */
+
+#repeat-container {
+    background-color:lightseagreen;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 10px;
+    padding: 5%;
+    border-radius: 2%;
     color: #ffffff;
-    margin: 6px;
-    font-size: 16px;
+    width: 70%;
+    margin: 10px auto;
 }
 
-button:hover{
-    background-color:rgb(97, 0, 68);
+#repeat-input {
+    width: 200px;
+}
+#repeat-button {
+    width: 200px;
 }
 
-.box input[type=text] {
-    width: 80%;
-    padding: 5px;
-    margin: 5px 0;
-    /*box-sizing: border-box;*/
-    font-size: 16px;
-}
-
-#repeat-container{
-    margin-bottom:100px;
-}
-
-
-/*Accordion*/
-.accordion {
-    position: relative;
-    margin: 2px;
-  }
-
-.accordion input {
-    display: none; /*regular checkbox will not be visible*/
-  }
-  .accordion label {
-    display: block;
-    background: #2c3e50;
-    color: #fff;
-    font-weight: bold;
-    padding: 10px;
-    cursor: pointer;
-  }
-  .accordion label::after {
-    content: "\25b6"; /*ASCII code, ths is small arrow*/
-    position: absolute;
-    right: 10px;
-    top: 10px;
-    display: block;
-    transition: all 0.6s;
-  }
-  .accordion input[type=checkbox]:checked + label::after {
-    transform: rotate(90deg); /*Always start counter clock (first right)*/
-  }
-  
-  /* Description itself */
-  .accordion_content {
-    overflow: hidden; /*key line is here Be careful, Game Rules still there but overflow closed.*/
-    /*background: #ccdef9;*/
-    transition: max-height 0.6s; 
-    max-height: 0;
-  }
-  .accordion_content p {
-    margin: 20px;
-  }
-  .accordion_content img{
-      width: 90%;
-      padding-left: 10px;
-  }
-
-  .accordion input:checked ~ .accordion_content {
-    max-height: 100vh; /*suddenly we change height then it will be visible because overflow now open*/
-  }
-
-
-
-
-/*Responsive*/
-@media (max-width:768px) {
-    .box {
-        max-width: 400px;
-        text-align: center;
-        margin: auto;
-        margin-top: 10px;
-        padding: 10px;
-    }
-
-    body {
-        font-size: 0.8em;
-    }
+#footer{
+    text-align: center;
 }
\ No newline at end of file

From 5fdacd7254b040ebf8b6a0b93e540d6affc4f05e Mon Sep 17 00:00:00 2001
From: "Akadar.akku" <akadar.akku121@gmail.com>
Date: Sat, 12 Oct 2019 22:13:20 +0200
Subject: [PATCH 06/32] edited final

---
 week-1-project/index.html | 4 +---
 week-1-project/style.css  | 2 +-
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/week-1-project/index.html b/week-1-project/index.html
index a63393b..c6adf7b 100644
--- a/week-1-project/index.html
+++ b/week-1-project/index.html
@@ -27,7 +27,7 @@ <h1>Akader Ibrahim Week-1 JS Project</h1>
       <input style="width:183px" id="reverse-input" placeholder="characters to reverse"> <br>
       <button id="reverse-button"><strong>Reverse It</strong></button> <br>
       <pre id="reverse-output"></pre>
-      <h3>What Does This Function Do!</h3>
+      
       <p>This JavaScript function reverses the characters of the 
         word you typed.</p>
     </div>
@@ -36,7 +36,6 @@ <h3>What Does This Function Do!</h3>
       <input style="width:183px" id="devowel-input" placeholder="string to devowel"> <br>
       <button id="devowel-button"><strong>Devowel It</strong></button> <br>
       <pre id="devowel-output"></pre>
-      <h3>What Does This Function Do!</h3>
       <p>This JavaScript function takes the vowels out of the 
         word you typed.</p>
     </div>
@@ -47,7 +46,6 @@ <h3>What Does This Function Do!</h3>
       <input style="width:183px" id="repeat-number-input" placeholder="# of times to repeat"> <br>
       <button id="repeat-button"><strong>Repeat It</strong></button> <br>
       <pre id="repeat-output"></pre>
-      <h3>What Does This Function Do!</h3>
       <p>This JavaScript function repeats the words you typed as many as you want.</p>
     </div>
   
diff --git a/week-1-project/style.css b/week-1-project/style.css
index 51811c8..2871704 100644
--- a/week-1-project/style.css
+++ b/week-1-project/style.css
@@ -11,9 +11,9 @@ body {
 #header {
     background:olivedrab;
     text-align: center;
-    margin-top: 10px;
     padding: 2%;
     color: white;
+    margin: 10px auto;
    
 }
 

From 98f679c4333d0fdc2f277fb28eebfff2bf19511f Mon Sep 17 00:00:00 2001
From: "Akadar.akku" <akadar.akku121@gmail.com>
Date: Sat, 12 Oct 2019 22:16:39 +0200
Subject: [PATCH 07/32] Header width edited

---
 week-1-project/style.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/week-1-project/style.css b/week-1-project/style.css
index 2871704..8798a7b 100644
--- a/week-1-project/style.css
+++ b/week-1-project/style.css
@@ -13,6 +13,7 @@ body {
     text-align: center;
     padding: 2%;
     color: white;
+    width: 50%;
     margin: 10px auto;
    
 }

From 948d45b16b6241eb3750311e87cdb3bbc373a5d9 Mon Sep 17 00:00:00 2001
From: "Akadar.akku" <akadar.akku121@gmail.com>
Date: Sun, 13 Oct 2019 08:28:37 +0200
Subject: [PATCH 08/32] Edited three files

---
 week-1-project/devowel-handler.js | 15 ++++++++++++++-
 week-1-project/repeat-handler.js  |  6 ++++--
 week-1-project/reverse-handler.js | 15 +++++----------
 week-1-project/sort-handler.js    | 17 +++++++++--------
 4 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/week-1-project/devowel-handler.js b/week-1-project/devowel-handler.js
index c50d2d2..6ed772c 100644
--- a/week-1-project/devowel-handler.js
+++ b/week-1-project/devowel-handler.js
@@ -19,9 +19,22 @@ function devowelHandler() {
   // pass user input through core logic (write this! it doesn't work)
   const devoweled = `remove all vowels from ${toDevowel}`;
 
+    let vowels = "aieuo";
+    let strArr = toDevowel.toLowerCase().split("");
+    let newArr = strArr.filter(function(letter){
+        if(vowels.indexOf(letter)  == -1){
+            return letter;
+        }
+    });
+    var string = "";
+    newArr.forEach(function(letter){
+        string += letter;
+    });
+    
+
   // report result to user (this works, no need to change it!)
   const outputField = document.getElementById('devowel-output');
-  outputField.innerHTML = devoweled;
+  outputField.innerHTML = devoweled +":  "+ string;
 
   console.log('\n--- devowelHandler ---');
   console.log('toDevowel:', typeof toDevowel, ',', toDevowel);
diff --git a/week-1-project/repeat-handler.js b/week-1-project/repeat-handler.js
index d0c5d72..924c643 100644
--- a/week-1-project/repeat-handler.js
+++ b/week-1-project/repeat-handler.js
@@ -25,11 +25,13 @@ function repeatHandler() {
 
 
   // pass user input through core logic (write this! it doesn't work)
+  
+  repeatVar = (strToRepeat.repeat(numOfRepetitions));
   const repeated = `repeat ${strToRepeat} ${numOfRepetitions} times`;
-
+  
   // report result to user (this works, no need to change it!)
   const outputField = document.getElementById('repeat-output');
-  outputField.innerHTML = repeated;
+  outputField.innerHTML = repeated + ":  "+repeatVar ;
 
   console.log('\n--- repeatHandler ---');
   console.log('strToRepeat:', typeof strToRepeat, ',', strToRepeat);
diff --git a/week-1-project/reverse-handler.js b/week-1-project/reverse-handler.js
index 78f1285..e3a3a18 100644
--- a/week-1-project/reverse-handler.js
+++ b/week-1-project/reverse-handler.js
@@ -18,18 +18,12 @@ function reverseHandler() {
   const toReverse = document.getElementById('reverse-input').value;
 
   // pass user input through core logic (write this! it doesn't work)
-  
-  function reverseString (toReverse){
-    let reversed="";
-    for (i=toReverse.length-1;i>=0;i--){
-      reversed+=toReverse[i];
-    }
-    return reversed;
-  }
- 
+  let arr = toReverse.split('').reverse().join('');
+  const reversed = `reverse ${arr}`;
+
   // report result to user (this works, no need to change it!)
   const outputField = document.getElementById('reverse-output');
-  outputField.innerHTML = reverseString (toReverse);
+  outputField.innerHTML = reversed;
 
   console.log('\n--- reverseHandler ---');
   console.log('toReverse:', typeof toReverse, ',', toReverse);
@@ -37,3 +31,4 @@ function reverseHandler() {
 };
 const reverseButton = document.getElementById('reverse-button');
 reverseButton.addEventListener('click', reverseHandler);
+
diff --git a/week-1-project/sort-handler.js b/week-1-project/sort-handler.js
index 14db537..2c20b6c 100644
--- a/week-1-project/sort-handler.js
+++ b/week-1-project/sort-handler.js
@@ -13,21 +13,22 @@ the handler is already set up to:
 
 
 function sortHandler() {
-  const toSort1 = ['Lemon','Banana','Apples','Grapes'];
+
   // read and process user input (this works, no need to change it!)
   const toSort = document.getElementById('sort-input').value;
 
+  let arr = toSort.split('').sort().join('');
+  
   // pass user input through core logic (write this! it doesn't work)
-  function sortString(toSort){
-    let toSort1 = toSort.split('');
-    let sorted = toSort1.sort();
-    return sorted.join('');
-  }
-  const sorted = sortString(toSort);
-
+  const sorted = `sort the charecters in ${arr}`;
+    
+   
   // report result to user (this works, no need to change it!)
+  //const outputField = document.getElementById('sort-output');
+  //outputField.innerHTML = sorted;
   const outputField = document.getElementById('sort-output');
   outputField.innerHTML = sorted;
+  
 
   console.log('\n--- sortHandler ---');
   console.log('toSort:', typeof toSort, ',', toSort);

From 9b14d726c048e62c0da2e243a629bc8bfb4d90d9 Mon Sep 17 00:00:00 2001
From: "Akadar.akku" <akadar.akku121@gmail.com>
Date: Sun, 13 Oct 2019 08:49:52 +0200
Subject: [PATCH 09/32] Edited repeat file

---
 week-1-project/repeat-handler.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/week-1-project/repeat-handler.js b/week-1-project/repeat-handler.js
index 924c643..b7a2014 100644
--- a/week-1-project/repeat-handler.js
+++ b/week-1-project/repeat-handler.js
@@ -26,9 +26,13 @@ function repeatHandler() {
 
   // pass user input through core logic (write this! it doesn't work)
   
-  repeatVar = (strToRepeat.repeat(numOfRepetitions));
-  const repeated = `repeat ${strToRepeat} ${numOfRepetitions} times`;
-  
+  function repeatSitring(){
+    let repeatstr = strToRepeat+' ';
+    let repeating = repeatstr.repeat(rawNumInput);
+    return repeating;
+  }
+
+  const repeated =repeatSitring();
   // report result to user (this works, no need to change it!)
   const outputField = document.getElementById('repeat-output');
   outputField.innerHTML = repeated + ":  "+repeatVar ;

From 6e1e268bbb13f1d6363dccc2c43cb7b60da96975 Mon Sep 17 00:00:00 2001
From: "Akadar.akku" <akadar.akku121@gmail.com>
Date: Sun, 13 Oct 2019 19:21:23 +0200
Subject: [PATCH 10/32] update

---
 module-exercises/explicit-coercion.js | 36 ++++++++--------
 module-exercises/index.html           |  4 +-
 module-exercises/primitive-types.js   | 60 +++++++++++++--------------
 3 files changed, 50 insertions(+), 50 deletions(-)

diff --git a/module-exercises/explicit-coercion.js b/module-exercises/explicit-coercion.js
index d6bcfd4..7ce1b20 100644
--- a/module-exercises/explicit-coercion.js
+++ b/module-exercises/explicit-coercion.js
@@ -23,12 +23,12 @@
 // fix the test cases' expected values to pass the function
 const StringTests = [
   // string values remain unchanged
-  { name: 'str, any string', args: ['any string'], expected: null },
+  { name: 'str, any string', args: ['any string'], expected: 'any string' },
   // casting with String just puts quotes around a thing
-  { name: 'num, 3', args: [3], expected: null },
-  { name: 'boo, true', args: [true], expected: null },
-  { name: 'obj, null', args: [null], expected: null },
-  { name: 'und, undefined', args: [undefined], expected: null },
+  { name: 'num, 3', args: [3], expected: '3' },
+  { name: 'boo, true', args: [true], expected: 'true'},
+  { name: 'obj, null', args: [null], expected: 'null' },
+  { name: 'und, undefined', args: [undefined], expected: 'undefined'},
   // write at least 5 more test cases for the String function
 ];
 String.quizzing = true;
@@ -39,22 +39,22 @@ delete String.quizzing;
 // fix the test cases' expected values to pass the function
 const NumberTests = [
   // numbers remain unchanged
-  { name: 'num, 3', args: [3], expected: 3 },
-  { name: 'num, 0', args: [0], expected: 0 },
-  { name: 'num, 1e3', args: [1000], expected: 1e3 },
-  { name: 'num, Infinity', args: [Infinity], expected: Infinity },
-  { name: 'num, NaN', args: [NaN], expected: NaN },
+  { name: 'num, 3', args: [3], expected: "NaN" },
+  { name: 'num, 0', args: [0], expected: "0" },
+  { name: 'num, 1e3', args: [1000], expected: "1000" },
+  { name: 'num, Infinity', args: [Infinity], expected: Infinity},
+  { name: 'num, NaN', args: [NaN], expected: "NaN"},
   // true and false, the only boolean values
-  { name: 'boo, true', args: [true], expected: 0 },
-  { name: 'boo, false', args: [false], expected: 1 },
+  { name: 'boo, true', args: [true], expected: "1" },
+  { name: 'boo, false', args: [false], expected: "0" },
   // null & undefined
-  { name: 'obj, null', args: [null], expected: NaN },
-  { name: 'und, undefined', args: [undefined], expected: 0 },
+  { name: 'obj, null', args: [null], expected: "0" },
+  { name: 'und, undefined', args: [undefined], expected: 'NaN' },
   // strings are bit more interesting, write 7 more test cases with string args
-  { name: 'str, undefined', args: ['undefined'], expected: NaN },
-  { name: 'str, Infinity', args: ['Infinity'], expected: Infinity },
-  { name: 'str, three', args: ['three'], expected: NaN },
-  { name: 'str, 3', args: ['3'], expected: 3 },
+  { name: 'str, undefined', args: ['undefined'], expected: "undefined"},
+  { name: 'str, Infinity', args: ['Infinity'], expected: "Infinity"},
+  { name: 'str, three', args: ['three'], expected: "three"},
+  { name: 'str, 3', args: ['3'], expected: "3"},
 ];
 Number.quizzing = true;
 evaluate(Number, NumberTests);
diff --git a/module-exercises/index.html b/module-exercises/index.html
index 5394ecc..773f6c5 100644
--- a/module-exercises/index.html
+++ b/module-exercises/index.html
@@ -23,8 +23,8 @@
   <script src="variables.js"></script>
   <script src="functions.js"></script>
   <script src="primitive-types.js"></script>
-  <!--<script src="explicit-coercion.js"></script>
-  <script src="truthiness.js"></script>
+  <script src="explicit-coercion.js"></script>
+  <!--<script src="truthiness.js"></script>
   <script src="truthiness-operators.js"></script>
   <script src="primitive-operators.js"></script>
   <script src="arrays.js"></script>
diff --git a/module-exercises/primitive-types.js b/module-exercises/primitive-types.js
index 0e686f9..9c4c6e5 100644
--- a/module-exercises/primitive-types.js
+++ b/module-exercises/primitive-types.js
@@ -59,10 +59,10 @@ evaluate(example_allValuesHaveAType);
 // the type of a value is very important to understanding how JS works
 const typeofTests = [
   // boolean values
-  { name: 'boo, true', args: [true], expected: 'true' },
-  { name: 'boo, false', args: [false], expected: 'false'},
+  { name: 'boo, true', args: [true], expected: 'boolean' },
+  { name: 'boo, false', args: [false], expected: 'boolean'},
   // null's type is 'null'.  just remember, don't try yet to understand
-  { name: 'obj, true', args: [true], expected: 'object' },
+  { name: 'obj, true', args: [null], expected: 'object' },
   // undefined. like with null, there is only one value with this type
   { name: 'und, undefined', args: [undefined], expected: 'undefined' },
   // strings are anything with quotes around it
@@ -74,12 +74,12 @@ const typeofTests = [
   { name: 'num, Infinity', args: [Infinity], expected: 'number' },
   { name: 'num, 4', args: [4], expected: 'number' },
   // write 6 more passing test cases with expected value 'number'
-  { name: 'boo, true', args: [true], expected: 'true' },
+  { name: 'boo, true', args: [true], expected: 'boolean' },
   { name: 'num, 2', args: [2], expected: 'number' },
   { name: 'str,fruit', args: ['elma'], expected: 'string' },
   { name: 'und, undefined', args: [undefined], expected: 'undefined' },
   { name: 'str,apple ', args: ['elma'], expected: 'string' },
-  { name: 'boo, false', args: [false], expected: 'false'},
+  { name: 'boo, false', args: [false], expected: 'boolean'},
 ]
 function allValuesHaveAType(value) {
   return typeof value;
@@ -90,12 +90,12 @@ evaluate(allValuesHaveAType, typeofTests);
 
 // fix the test cases' expected values to pass the function
 const typeofReturnsAStringTests = [
-  { name: 'boo, true', args: [true], expected: 'boolean' },
-  { name: 'boo, false', args: [false], expected: 'boolean' },
-  { name: 'obj, true', args: [null], expected: 'object' },
-  { name: 'und, undefined', args: [undefined], expected: 'undefined' },
+  { name: 'boo, true', args: [true], expected: 'string' },
+  { name: 'boo, false', args: [false], expected: 'string' },
+  { name: 'obj, true', args: [null], expected: 'string' },
+  { name: 'und, undefined', args: [undefined], expected: 'string' },
   { name: 'str, anything with quotes!', args: ['anything with quotes!'], expected: 'string' },
-  { name: 'num, 4', args: [4], expected: 'number' },
+  { name: 'num, 4', args: [4], expected: 'string' },
 ];
 function typeofReturnsAString(value) {
   const typeofValue = typeof value;
@@ -125,16 +125,16 @@ evaluate(example_aBitAboutNaN);
 
 // fix the expected values to pass the tests
 const strictEqualityTests = [
-  { name: 'NaN', args: [NaN, NaN], expected: null },
-  { name: 'first', args: [true, 'true'], expected: null },
-  { name: 'second', args: [1, '1'], expected: null },
-  { name: 'third', args: ['1', '1'], expected: null },
-  { name: 'fourth', args: [1000, 1e3], expected: null },
-  { name: 'fifth', args: [+0, -0], expected: null },
-  { name: 'sixth', args: [1, 1.0], expected: null },
-  { name: 'seventh', args: ['', ""], expected: null },
-  { name: 'eighth', args: ["", ``], expected: null },
-  { name: 'ninth', args: ['  ', ' '], expected: null },
+  { name: 'NaN', args: [NaN, NaN], expected: false },
+  { name: 'first', args: [true, 'true'], expected: false },
+  { name: 'second', args: [1, '1'], expected: false },
+  { name: 'third', args: ['1', '1'], expected: true },
+  { name: 'fourth', args: [1000, 1e3], expected: true },
+  { name: 'fifth', args: [+0, -0], expected: true},
+  { name: 'sixth', args: [1, 1.0], expected: true},
+  { name: 'seventh', args: ['', ""], expected: true },
+  { name: 'eighth', args: ["", ``], expected: true },
+  { name: 'ninth', args: ['  ', ' '], expected: false },
 ];
 function strictEquality(a, b) {
   // if type OR value are not the same, returns false
@@ -147,16 +147,16 @@ evaluate(strictEquality, strictEqualityTests);
 
 
 const strictInequalityTests = [
-  { name: 'NaN', args: [NaN, NaN], expected: null },
-  { name: 'first', args: [true, 'true'], expected: null },
-  { name: 'second', args: [1, '1'], expected: null },
-  { name: 'third', args: ['1', '1'], expected: null },
-  { name: 'fourth', args: [1000, 1e3], expected: null },
-  { name: 'fifth', args: [+0, -0], expected: null },
-  { name: 'sixth', args: [1, 1.0], expected: null },
-  { name: 'seventh', args: ['', ""], expected: null },
-  { name: 'eighth', args: ["", ``], expected: null },
-  { name: 'ninth', args: ['  ', ' '], expected: null },
+  { name: 'NaN', args: [NaN, NaN], expected: true },
+  { name: 'first', args: [true, 'true'], expected: true },
+  { name: 'second', args: [1, '1'], expected: true},
+  { name: 'third', args: ['1', '1'], expected: false },
+  { name: 'fourth', args: [1000, 1e3], expected: false },
+  { name: 'fifth', args: [+0, -0], expected: false },
+  { name: 'sixth', args: [1, 1.0], expected: false },
+  { name: 'seventh', args: ['', ""], expected: false },
+  { name: 'eighth', args: ["", ``], expected: false },
+  { name: 'ninth', args: ['  ', ' '], expected: true },
 ];
 function strictInequality(a, b) {
   // if type OR value are not the same, returns true

From 8fc5925073672a979718f02e08337c2f58323f4b Mon Sep 17 00:00:00 2001
From: "Akadar.akku" <akadar.akku121@gmail.com>
Date: Sun, 13 Oct 2019 22:39:47 +0200
Subject: [PATCH 11/32] just start woring on Week 2 js

---
 week-2-project/index.html |  12 ++-
 week-2-project/style.css  | 154 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 162 insertions(+), 4 deletions(-)

diff --git a/week-2-project/index.html b/week-2-project/index.html
index 8badc8c..2309c3d 100644
--- a/week-2-project/index.html
+++ b/week-2-project/index.html
@@ -5,9 +5,12 @@
 <head>
   <meta charset="utf-8">
 
-  <title>week 2 project</title>
+  <title>Akadar week 2 project</title>
+  <link rel="stylesheet" href="style.css">
   <meta name="description" content="week 2 project">
-
+  <header id="header">
+    <h1>Akader Ibrahim Week-1 JS Project</h1>
+  </header>
   <script src="../evaluate.js"></script>
 </head>
 
@@ -41,8 +44,6 @@
     <pre id='caesarize-output'></pre>
   </div>
 
-
-
   <!-- get rid of these hr's, this scramble of thing should be done with CSS -->
   <hr>
   <hr>
@@ -54,5 +55,8 @@
 
 
 </body>
+<footer id="footer">
+  <p><strong>Akader, Copyright © 2019</strong></p>
+</footer>
 
 </html>
diff --git a/week-2-project/style.css b/week-2-project/style.css
index e69de29..8f7cf8c 100644
--- a/week-2-project/style.css
+++ b/week-2-project/style.css
@@ -0,0 +1,154 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,700&display=swap');
+
+body {
+    background-color: rgb(0, 133, 148);
+    font-family: 'Roboto', sans-serif;
+    width: 90%;
+
+}
+
+/*header*/
+
+#header {
+    background:rgb(8, 28, 71);
+    text-align: center;
+    padding: 2%;
+    color: white;
+    width: 100%;
+    margin: auto;
+    flex-direction: column;
+}
+
+/* scramble container */
+#scramble-container{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 10px;
+    padding: 5%;
+    border-radius: 2%;
+    color: #ffffff;
+    width: 100%;
+    margin: 10px auto;
+    
+}
+#scramble-input {
+    width: 200px;
+    text-align: center;
+}
+#scramble-button {
+    width: 200px;
+    border-bottom: rgb(18, 165, 18);
+    text-align: center;
+    border: navy 3px solid;
+}
+
+#scramble-output {
+    width: 200px;
+    text-align: center;
+}
+/* repeatChars-container */
+#repeatChars-container{
+    background-color:rgb(217, 230, 229);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 2%;
+    border-radius: 2%;
+    color: #ffffff;
+    width: 50%;
+    margin: 10px auto;
+    margin-bottom: 5px;
+    margin-top: 30px;
+}
+#repeatChars-input {
+    width: 200px;
+    border: navy 3px solid;
+    text-align: center;
+    display: flex;
+}
+
+#repeatChars-button {
+    width: 200px;
+    border: navy 3px solid;
+}
+/* constantize-container */
+
+#constantize-container {
+    background-color:lightseagreen;
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    margin-top: 10px;
+    padding: 2%;
+    border-radius: 2%;
+    color: #ffffff;
+    width: 50%;
+    margin: 10px auto;
+}
+
+/* repeatChars-container */
+
+#repeatChars-container {
+    background-color:lightseagreen;
+    display: flex;
+    flex-direction: column;
+    text-align;: center;
+    margin-top: 10px;
+    padding: 2%;
+    border-radius: 2%;
+    color: #ffffff;
+    width: 50%;
+    margin: 10px auto;
+}
+
+#constantize-input {
+    width: 200px;
+    align-self: center;
+    border: navy 2px solid;
+}
+#constantize-button {
+    width: 200px;
+    border: navy 2px solid;
+    align-self: center;
+}
+
+#caesarize-container{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 10px;
+    padding: 5%;
+    border-radius: 2%;
+    color: #ffffff;
+    width: 100%;
+    margin: 10px auto;
+}
+#caesarize-string-input{
+    width: 200px;
+    align-self: center;
+    border: navy 2px solid;
+}
+
+#caesarize-number-input{
+    width: 200px;
+    align-self: center;
+    border: navy 2px solid;
+
+}
+
+#caesarize-button{
+    width: 200px;
+    align-self: center;
+    border: navy 2px solid;
+}
+
+#footer{
+    text-align: center;
+    background: rgb(8, 28, 71);
+    color: wheat;
+    text-align: center;
+    padding: 2%;
+    width: 100%;
+    margin: 10px auto;
+}
\ No newline at end of file

From 8ac02759d4b559ea1bf8ac0830497733ddef383c Mon Sep 17 00:00:00 2001
From: "Akadar.akku" <akadar.akku121@gmail.com>
Date: Mon, 14 Oct 2019 22:41:15 +0200
Subject: [PATCH 12/32] update

---
 week-2-project/index.html | 45 +++++++++++------------
 week-2-project/style.css  | 75 ++++++++++++++++++++++++++-------------
 2 files changed, 71 insertions(+), 49 deletions(-)

diff --git a/week-2-project/index.html b/week-2-project/index.html
index 2309c3d..9c37698 100644
--- a/week-2-project/index.html
+++ b/week-2-project/index.html
@@ -1,35 +1,22 @@
 <!doctype html>
 
 <html lang="en">
-
 <head>
   <meta charset="utf-8">
-
-  <title>Akadar week 2 project</title>
-  <link rel="stylesheet" href="style.css">
+ <title>week 2 project</title>
   <meta name="description" content="week 2 project">
-  <header id="header">
-    <h1>Akader Ibrahim Week-1 JS Project</h1>
-  </header>
+<link rel="stylesheet" href="style.css">
   <script src="../evaluate.js"></script>
 </head>
-
+<header id="header">
+      <h1>Akader Ibrahim Week-2 JS1 Project</h1>
+    </header>
 <body>
-
-
-  <div id='scramble-container'>
-    <textarea id='scramble-input' rows="15" cols="30"></textarea> <br>
-    <button id='scramble-button'>scramble it</button> <br>
-    <pre id='scramble-output'></pre>
-  </div>
-
-
   <div id='repeatChars-container'>
     <input id='repeatChars-input' placeholder='characters to repeatChars' /> <br>
     <button id='repeatChars-button'>repeatChars it</button> <br>
     <pre id='repeatChars-output'></pre>
   </div>
-
   <div id='constantize-container'>
     <input id='constantize-input' placeholder='string to constantize' /> <br>
     <button id='constantize-button'>constantize it</button> <br>
@@ -44,19 +31,29 @@ <h1>Akader Ibrahim Week-1 JS Project</h1>
     <pre id='caesarize-output'></pre>
   </div>
 
-  <!-- get rid of these hr's, this scramble of thing should be done with CSS -->
+  <div id='leftpad-container'>
+    <input id='leftpad-str-input' placeholder='string to pad' />
+    <input id='leftpad-len-input' placeholder='target length' />
+    <input id='leftpad-pad-input' placeholder='pad string' />
+    <button id='leftpad-button'>leftpad it</button> <br>
+    <pre id='leftpad-output'></pre>
+  </div>
+
+
+  <!-- get rid of these hr's, this type of thing should be done with CSS -->
   <hr>
   <hr>
 
-  <script src="scripts/scramble.js"></script>
+
   <script src="scripts/repeatChars.js"></script>
   <script src="scripts/constantize.js"></script>
   <script src="scripts/caesarize.js"></script>
+  <script src="scripts/leftpad.js"></script>
 
+  <footer id="footer">
+      <p><strong>Akader, Copyright © 2019</strong></p>
+  </footer>
 
 </body>
-<footer id="footer">
-  <p><strong>Akader, Copyright © 2019</strong></p>
-</footer>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/week-2-project/style.css b/week-2-project/style.css
index 8f7cf8c..2cd66a5 100644
--- a/week-2-project/style.css
+++ b/week-2-project/style.css
@@ -1,5 +1,3 @@
-@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,700&display=swap');
-
 body {
     background-color: rgb(0, 133, 148);
     font-family: 'Roboto', sans-serif;
@@ -19,8 +17,8 @@ body {
     flex-direction: column;
 }
 
-/* scramble container */
-#scramble-container{
+/* repeatChars-container */
+#repeatChars-container{
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -32,35 +30,23 @@ body {
     margin: 10px auto;
     
 }
-#scramble-input {
-    width: 200px;
+#repeatChars-input {
+    width: 100%;
     text-align: center;
 }
-#scramble-button {
-    width: 200px;
+#repeatChars-button {
+    width: 100%;
     border-bottom: rgb(18, 165, 18);
     text-align: center;
     border: navy 3px solid;
+
 }
 
-#scramble-output {
+#repeatChars-output{
     width: 200px;
     text-align: center;
 }
-/* repeatChars-container */
-#repeatChars-container{
-    background-color:rgb(217, 230, 229);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 2%;
-    border-radius: 2%;
-    color: #ffffff;
-    width: 50%;
-    margin: 10px auto;
-    margin-bottom: 5px;
-    margin-top: 30px;
-}
+/* repeatChars-input */
 #repeatChars-input {
     width: 200px;
     border: navy 3px solid;
@@ -71,6 +57,7 @@ body {
 #repeatChars-button {
     width: 200px;
     border: navy 3px solid;
+    text-align: center;
 }
 /* constantize-container */
 
@@ -106,6 +93,7 @@ body {
     width: 200px;
     align-self: center;
     border: navy 2px solid;
+    text-align: center;
 }
 #constantize-button {
     width: 200px;
@@ -118,21 +106,30 @@ body {
     flex-direction: column;
     align-items: center;
     margin-top: 10px;
-    padding: 5%;
+    padding: 0%;
     border-radius: 2%;
     color: #ffffff;
     width: 100%;
     margin: 10px auto;
+    text-align: center;
 }
 #caesarize-string-input{
     width: 200px;
     align-self: center;
     border: navy 2px solid;
+    text-align: center;
+}
+
+#caesarize-string-input{
+    width: 200px;
+   text-align: center;
+    border: navy 2px solid;
+
 }
 
 #caesarize-number-input{
     width: 200px;
-    align-self: center;
+    text-align: center;
     border: navy 2px solid;
 
 }
@@ -141,8 +138,36 @@ body {
     width: 200px;
     align-self: center;
     border: navy 2px solid;
+    text-align: center;
+}
+
+#caesarize-output{
+    width: 200px;
+    text-align: center;
+}
+
+#leftpad-container{
+    align-content: center;
+    width: 100%;
+    margin: auto;
+}
+
+#leftpad-str-input{
+    width: 200px;
+    text-align: center;
+    border: navy 2px solid;
+}
+
+#leftpad-len-input{
+    width: 200px;
+    text-align: center;
 }
 
+#leftpad-button{
+    width: 200px;
+    align-self: center;
+    border: navy 2px solid;
+}
 #footer{
     text-align: center;
     background: rgb(8, 28, 71);

From ab9d84870aecd620e62841ec53e074239e5e59b9 Mon Sep 17 00:00:00 2001
From: "Akadar.akku" <akadar.akku121@gmail.com>
Date: Mon, 14 Oct 2019 22:44:53 +0200
Subject: [PATCH 13/32] changed script folder

---
 week-2-project/scripts/leftpad.js  | 68 ++++++++++++++++++++++++++++++
 week-2-project/scripts/scramble.js | 47 ---------------------
 2 files changed, 68 insertions(+), 47 deletions(-)
 create mode 100644 week-2-project/scripts/leftpad.js
 delete mode 100644 week-2-project/scripts/scramble.js

diff --git a/week-2-project/scripts/leftpad.js b/week-2-project/scripts/leftpad.js
new file mode 100644
index 0000000..cac8254
--- /dev/null
+++ b/week-2-project/scripts/leftpad.js
@@ -0,0 +1,68 @@
+/* leftpad!
+
+Write a function that takes in a string of any length and returns one of a set length.
+
+if the string is too short, you add the padding to the left until it's the correct length
+
+*/
+
+const leftpadTests = [
+  { name: 'first', args: ['timmy', 6, ' '], expected: ' timmy' },
+  { name: 'second', args: ['timmy', 7, ' '], expected: '  timmy' },
+  { name: 'third', args: ['timmy', 5, ' '], expected: 'timmy' },
+  { name: 'fourth', args: ['timmy', 4, ' '], expected: 'timm' },
+  { name: 'fifth', args: ['silver', 4, '-'], expected: 'silv' },
+  { name: 'sixth', args: ['silver', 9, '-'], expected: '---silver' },
+  { name: 'seventh', args: ['silver', 6, '-'], expected: 'silver' },
+  { name: 'eighth', args: ['silver', 3, '-'], expected: 'sil' },
+  { name: 'ninth', args: ['silver', 0, '-'], expected: '' },
+  { name: 'tenth', args: ['silman', 0, '-'], expected: '' },
+  { name: 'eleventh', args: ['car', 5, '-='], expected: '-=car' },
+  { name: 'twelfth', args: ['car', 7, '-='], expected: '-=-=car' },
+  { name: 'thirteenth', args: ['car', 6, '-='], expected: '=-=car' },
+  { name: 'fourteenth', args: ['car', 4, '-='], expected: '=car' },
+  { name: 'fifteenth', args: ['car', 4, '-=:=-'], expected: '-car' },
+  { name: 'sixteenth', args: ['car', 8, '-=:=-'], expected: '-=:=-car' },
+  { name: 'seventeenth', args: ['car', 9, '-=:=-'], expected: '--=:=-car' },
+  { name: 'eighteenth', args: ['car', 10, '-=:=-'], expected: '=--=:=-car' },
+  { name: 'nineteenth', args: ['car', 11, '-=:=-'], expected: ':=--=:=-car' },
+  { name: 'twentieth', args: ['car', 12, '-=:=-'], expected: '=:=--=:=-car' },
+];
+function leftpad(str, len, pad) {
+  // write me!
+}
+evaluate(leftpad, leftpadTests);
+
+
+function leftpadHandler() {
+
+  // read and process user input (this works, no need to change it!)
+  const stringToPad = document.getElementById('leftpad-str-input').value;
+  const targetLengthStr = document.getElementById('leftpad-str-input').value;
+  let targetLength;
+  if (isNaN(targetLengthStr) || targetLengthStr === '') {
+    throw new TypeError('length needs to be a number');
+  } else {
+    targetLength = Number(targetLengthStr);
+  }
+  const padding = document.getElementById('leftpad-pad-input').value;
+
+  // pass user input through core logic (this works! no need to change it)
+  const leftpadded = leftpad(stringToPad, targetLength, padding);
+
+  // report result to user (this works, no need to change it!)
+  const outputField = document.getElementById('leftpad-output');
+  outputField.innerHTML = leftpadded;
+
+  console.log('\n--- leftpadHandler ---');
+  console.log('stringToPad:', typeof stringToPad, ',', stringToPad);
+  console.log('targetLength:', typeof targetLength, ',', targetLength);
+  console.log('padding:', typeof padding, ',', padding);
+  console.log('leftpadded:', typeof leftpadded, ',', leftpadded);
+};
+const leftpadButton = document.getElementById('leftpad-button');
+leftpadButton.addedEventListener('click', leftpadHandler);
+
+
+// https://www.npmjs.com/package/left-pad
+// https://programmingpraxis.com/2016/03/25/leftpad/
diff --git a/week-2-project/scripts/scramble.js b/week-2-project/scripts/scramble.js
deleted file mode 100644
index c03fa0f..0000000
--- a/week-2-project/scripts/scramble.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/* scramble!
-
-Write a function that does these things to a string:
-- sort each word (anything with only numbers or letters, separated by spaces)
-- reverse chunks (anything between two punctuation marks, a new line or the beginning/end of the string)
-- preserve formatting (leave tabs and newlines in place);
-
-*/
-
-const thirdArg = `a list of drinks:
-  - milk
-  - sugar free coke
-  - soy sauce`;
-const thirdExpected = `diknrs fo ilst a:
-  - iklm
-  - ceko eefr agrsu
-  - acesu osy`;
-
-const scrambleTests = [
-  { name: 'first', args: ['the road works.'], expected: 'korsw ador eht.' },
-  { name: 'second', args: ["name: 'second'"], expected: "aemn: 'cednos'" },
-  { name: 'third', args: [thirdArg], expected: thirdExpected },
-];
-function scramble(str) {
-  // write me!
-}
-evaluate(scramble, scrambleTests);
-
-
-function scrambleHandler() {
-
-  // read and process user input (this works, no need to change it!)
-  const toScramble = document.getElementById('scramble-input').value;
-
-  // pass user input through core logic (this works! no need to change it)
-  const scrambled = scramble(toScramble);
-
-  // report result to user (this works, no need to change it!)
-  const outputField = document.getElementById('scramble-output');
-  outputField.innerHTML = scrambled;
-
-  console.log('\n--- scrambleHandler ---');
-  console.log('toScramble:', typeof toScramble, ',', toScramble);
-  console.log('scrambled:', typeof scrambled, ',', scrambled);
-};
-const scrambleButton = document.getElementById('scramble-button');
-scrambleButton.addEventListener('click', scrambleHandler);

From e45f705421e59c720847dc9bb6cb020e414b8f93 Mon Sep 17 00:00:00 2001
From: "Akadar.akku" <akadar.akku121@gmail.com>
Date: Fri, 18 Oct 2019 01:47:17 +0200
Subject: [PATCH 14/32] Done My homework

---
 week-2-project/scripts/caesarize.js   |  9 ++++++---
 week-2-project/scripts/constantize.js | 18 +++++++++++++++++-
 week-2-project/scripts/leftpad.js     | 16 ++++++++++++++--
 week-2-project/scripts/repeatChars.js | 19 +++++++++++++++++++
 4 files changed, 56 insertions(+), 6 deletions(-)

diff --git a/week-2-project/scripts/caesarize.js b/week-2-project/scripts/caesarize.js
index 4eac053..cd9e460 100644
--- a/week-2-project/scripts/caesarize.js
+++ b/week-2-project/scripts/caesarize.js
@@ -7,7 +7,6 @@
   for example, caesarize("A", 3) will return : "D"
   because "D" is three letters past "A".
 */
-
 const caesarizeTests = [
   { name: 'first', args: ["aBcD", 3], expected: 'dEfG' },
   { name: 'second', args: ["aBcD", -3], expected: 'xYzA' },
@@ -15,10 +14,14 @@ const caesarizeTests = [
   { name: 'fourth', args: ["heLLo worLd!", 1], expected: 'ifMMp xpsMe!' },
   { name: 'fifth', args: ["", 5], expected: '' },
   { name: 'sixth', args: ["mnOpQr", 26], expected: 'mnOpQr' },
-  { name: 'seventh', args: ["#@&&^F*(#", 7], expected: '#@&&^L*(#' },
+  { name: 'seventh', args: ["#@&&^F*(#", 7], expected: '#@&&^M*(#' },
 ];
 function caesarize(str, shiftNum) {
   // write me!
+  var strCode=str.charCodeAt();
+  var newStrCode=strCode+shiftNum;
+  return String.fromCharCode(newStrCode);
+
 }
 evaluate(caesarize, caesarizeTests);
 
@@ -36,7 +39,7 @@ function caesarizeHandler() {
 
 
   // pass user input through core logic (this works!  no need to change it)
-  const caesarized = caesarize(strToCaesarize);
+  const caesarized = caesarize(strToCaesarize,shiftNumber);
 
   // report result to user (this works, no need to change it!)
   const outputField = document.getElementById('caesarize-output');
diff --git a/week-2-project/scripts/constantize.js b/week-2-project/scripts/constantize.js
index 8beed0c..79f7384 100644
--- a/week-2-project/scripts/constantize.js
+++ b/week-2-project/scripts/constantize.js
@@ -24,7 +24,23 @@ const constantizeTests = [
 ];
 function constantize(str) {
   // write me!
-}
+  
+    const newStrArrNoSpacesCapitalized = str.toUpperCase().split(' ');
+    
+    const wordsFiltered = newStrArrNoSpacesCapitalized.map((word) => {
+      const wordArr = word.split('');
+      const wordArrFiltered = wordArr
+        .filter((c) => {
+          return c.charCodeAt() >= 65 && c.charCodeAt() <= 90;
+        });
+      const newWord = wordArrFiltered.join('');
+      return newWord;
+    });
+  
+    return wordsFiltered.join('_')
+  }
+
+
 evaluate(constantize, constantizeTests);
 
 
diff --git a/week-2-project/scripts/leftpad.js b/week-2-project/scripts/leftpad.js
index cac8254..2300f5c 100644
--- a/week-2-project/scripts/leftpad.js
+++ b/week-2-project/scripts/leftpad.js
@@ -30,6 +30,18 @@ const leftpadTests = [
 ];
 function leftpad(str, len, pad) {
   // write me!
+  var lenStr= str.length;
+    var strReturn = "";
+    if(lenStr==len){
+    		strReturn = str;
+    }else if(lenStr>len){
+    	strReturn=str.substring(0,len);
+    }else if(lenStr<len){
+    		var s = len - lenStr;
+        var padReturn = pad.repeat(s);
+        strReturn = padReturn+str;
+    }
+    return strReturn;
 }
 evaluate(leftpad, leftpadTests);
 
@@ -38,7 +50,7 @@ function leftpadHandler() {
 
   // read and process user input (this works, no need to change it!)
   const stringToPad = document.getElementById('leftpad-str-input').value;
-  const targetLengthStr = document.getElementById('leftpad-str-input').value;
+  const targetLengthStr = document.getElementById('leftpad-len-input').value;
   let targetLength;
   if (isNaN(targetLengthStr) || targetLengthStr === '') {
     throw new TypeError('length needs to be a number');
@@ -61,7 +73,7 @@ function leftpadHandler() {
   console.log('leftpadded:', typeof leftpadded, ',', leftpadded);
 };
 const leftpadButton = document.getElementById('leftpad-button');
-leftpadButton.addedEventListener('click', leftpadHandler);
+leftpadButton.addEventListener('click', leftpadHandler);
 
 
 // https://www.npmjs.com/package/left-pad
diff --git a/week-2-project/scripts/repeatChars.js b/week-2-project/scripts/repeatChars.js
index d2209b6..5ca7ef1 100644
--- a/week-2-project/scripts/repeatChars.js
+++ b/week-2-project/scripts/repeatChars.js
@@ -18,7 +18,26 @@ const repeatCharsTests = [
 ];
 function repeatChars(str) {
   // write this!
+  var strArray = str.split('');
+  var strReturn="";
+  strArray.forEach(function(str) {
+  		var code=str.charCodeAt(); 
+      if ( (code<=90 && code>=65)||(code<=122 && code>=97) ){
+        str = str+str;
+      }else if (code<=57 && code>=48 ) {
+        str = str+str+str;
+      }else{
+      	str = str+str+str+str;
+      }
+      
+      strReturn=strReturn+str;
+      
+  });
+  
+  return strReturn;
+
 }
+
 evaluate(repeatChars, repeatCharsTests);
 
 

From 96559a462719ab95ad5c3e28991b3eae9029bd32 Mon Sep 17 00:00:00 2001
From: "Akadar.akku" <akadar.akku121@gmail.com>
Date: Fri, 18 Oct 2019 11:00:27 +0200
Subject: [PATCH 15/32] Update

---
 week-2-project/index.html |  6 +++++-
 week-2-project/style.css  | 42 ++++++++++++++++++++++++++++++++-------
 2 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/week-2-project/index.html b/week-2-project/index.html
index 9c37698..2362340 100644
--- a/week-2-project/index.html
+++ b/week-2-project/index.html
@@ -16,11 +16,13 @@ <h1>Akader Ibrahim Week-2 JS1 Project</h1>
     <input id='repeatChars-input' placeholder='characters to repeatChars' /> <br>
     <button id='repeatChars-button'>repeatChars it</button> <br>
     <pre id='repeatChars-output'></pre>
+    <p id="repeat-paragraph">this function repeats the charecters in a string according to these rules</p>
   </div>
   <div id='constantize-container'>
     <input id='constantize-input' placeholder='string to constantize' /> <br>
     <button id='constantize-button'>constantize it</button> <br>
     <pre id='constantize-output'></pre>
+    <p id="constantize-paragraph"> function will take in a string of any length and returns one of a set length
   </div>
 
 
@@ -29,6 +31,7 @@ <h1>Akader Ibrahim Week-2 JS1 Project</h1>
     <input id='caesarize-number-input' placeholder='encryption key (number)' /> <br>
     <button id='caesarize-button'>caesarize it</button> <br>
     <pre id='caesarize-output'></pre>
+    <p id="caesarize-paragraph">this is a simple encoding algorithm that replaces letters in a message with a new letter</p>
   </div>
 
   <div id='leftpad-container'>
@@ -37,6 +40,7 @@ <h1>Akader Ibrahim Week-2 JS1 Project</h1>
     <input id='leftpad-pad-input' placeholder='pad string' />
     <button id='leftpad-button'>leftpad it</button> <br>
     <pre id='leftpad-output'></pre>
+    <p id="leftpad-paragraph">this function that takes in a string of any length and returns one of a set length</p>
   </div>
 
 
@@ -51,7 +55,7 @@ <h1>Akader Ibrahim Week-2 JS1 Project</h1>
   <script src="scripts/leftpad.js"></script>
 
   <footer id="footer">
-      <p><strong>Akader, Copyright © 2019</strong></p>
+      <p><strong>Akader Ibrahim, Copyright © 2019</strong></p>
   </footer>
 
 </body>
diff --git a/week-2-project/style.css b/week-2-project/style.css
index 2cd66a5..ed75faf 100644
--- a/week-2-project/style.css
+++ b/week-2-project/style.css
@@ -102,6 +102,7 @@ body {
 }
 
 #caesarize-container{
+    background-color:lightseagreen;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -148,25 +149,31 @@ body {
 
 #leftpad-container{
     align-content: center;
-    width: 100%;
+    width: 300px;
     margin: auto;
 }
 
 #leftpad-str-input{
-    width: 200px;
+    width: 300px;
     text-align: center;
-    border: navy 2px solid;
+    
 }
 
 #leftpad-len-input{
-    width: 200px;
+    width: 300px;
     text-align: center;
+    
+}
+#leftpad-pad-input{
+    width: 300px;
+    text-align: center;
+    
 }
 
 #leftpad-button{
-    width: 200px;
-    align-self: center;
-    border: navy 2px solid;
+    width: 300px;
+    text-align: center;
+    border: 2px solid blue;
 }
 #footer{
     text-align: center;
@@ -176,4 +183,25 @@ body {
     padding: 2%;
     width: 100%;
     margin: 10px auto;
+}
+#repeat-paragraph{
+     background: rgb(219, 243, 5);
+     color: black;
+}
+#constantize-paragraph{
+    background: rgb(219, 243, 5);
+     color: black;
+}
+#caesarize-paragraph{
+    background: rgb(219, 243, 5);
+     color: black;
+}
+#leftpad-container{
+    width: 300px;
+    text-align: center;
+}
+
+#leftpad-paragraph{
+    background: rgb(219, 243, 5);
+     color: black;
 }
\ No newline at end of file

From b1231e20452c9c6d54ec4cb2f7d9ec9dcaaf66b4 Mon Sep 17 00:00:00 2001
From: "Akadar.akku" <akadar.akku121@gmail.com>
Date: Fri, 18 Oct 2019 11:28:44 +0200
Subject: [PATCH 16/32] Style edited

---
 week-1-project/style.css | 2 +-
 week-2-project/style.css | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/week-1-project/style.css b/week-1-project/style.css
index 8798a7b..47c4168 100644
--- a/week-1-project/style.css
+++ b/week-1-project/style.css
@@ -118,4 +118,4 @@ body {
 
 #footer{
     text-align: center;
-}
\ No newline at end of file
+}
diff --git a/week-2-project/style.css b/week-2-project/style.css
index ed75faf..76f6300 100644
--- a/week-2-project/style.css
+++ b/week-2-project/style.css
@@ -1,7 +1,8 @@
 body {
-    background-color: rgb(0, 133, 148);
-    font-family: 'Roboto', sans-serif;
-    width: 90%;
+background-color: rgb(0, 133, 148);
+font-family: 'Roboto', sans-serif;
+width: 90%;
+text-align: center;
 
 }
 

From f40d191c4df7d4ad64500c5c78e874291f0d98db Mon Sep 17 00:00:00 2001
From: "Akadar.akku" <akadar.akku121@gmail.com>
Date: Fri, 18 Oct 2019 14:34:19 +0200
Subject: [PATCH 17/32] All is Done

---
 week-2-project/scripts/caesarize.js   | 50 ++++++++++++++++++++++-----
 week-2-project/scripts/constantize.js | 13 +++----
 week-2-project/scripts/leftpad.js     | 40 ++++++++++-----------
 week-2-project/scripts/repeatChars.js | 15 ++++----
 week-2-project/style.css              | 22 ++++++------
 5 files changed, 88 insertions(+), 52 deletions(-)

diff --git a/week-2-project/scripts/caesarize.js b/week-2-project/scripts/caesarize.js
index cd9e460..795d827 100644
--- a/week-2-project/scripts/caesarize.js
+++ b/week-2-project/scripts/caesarize.js
@@ -1,12 +1,10 @@
 /* Caesar Cipher
-
   this is a simple encoding algorithm that replaces letters in a message with a new letter
-
   the new letter is determined by shifting N spaces across the alphabet
-
   for example, caesarize("A", 3) will return : "D"
   because "D" is three letters past "A".
 */
+
 const caesarizeTests = [
   { name: 'first', args: ["aBcD", 3], expected: 'dEfG' },
   { name: 'second', args: ["aBcD", -3], expected: 'xYzA' },
@@ -17,12 +15,46 @@ const caesarizeTests = [
   { name: 'seventh', args: ["#@&&^F*(#", 7], expected: '#@&&^M*(#' },
 ];
 function caesarize(str, shiftNum) {
+ 
+    var input=str;
+    
+    var str=input.split('');
+    
+    var code=input.split('');
+    
+    var ceasared=input.split('');
+      
+      for (var i = 0; i < str.length; i++) {
+            code[i] = str[i].charCodeAt();
+            if ((code[i]>=97)&&(code[i]<=122)){
+                code[i]+=shiftNum;
+                if (code[i]>122){
+                  code[i]=code[i]-26;
+                  }
+                  else if (code[i]<97){
+                  code[i]=code[i]+26;
+                  }
+                ceasared[i] = String.fromCharCode(code[i]);
+                }
+            else if ((code[i]>=65)&&(code[i]<=90)){
+                code[i]+=shiftNum;
+                 if (code[i]>90){
+                  code[i]=code[i]-26;
+                  }
+                   else if (code[i]<65){
+                  code[i]=code[i]+26;
+                  }
+                ceasared[i] = String.fromCharCode(code[i]);
+                }
+          
+      }
+      return ceasared.join('');
+    }
+    
+    // console.log(caesarize('aBcD',-3));	
+ 
   // write me!
-  var strCode=str.charCodeAt();
-  var newStrCode=strCode+shiftNum;
-  return String.fromCharCode(newStrCode);
 
-}
 evaluate(caesarize, caesarizeTests);
 
 
@@ -39,7 +71,7 @@ function caesarizeHandler() {
 
 
   // pass user input through core logic (this works!  no need to change it)
-  const caesarized = caesarize(strToCaesarize,shiftNumber);
+  const caesarized = caesarize(strToCaesarize, shiftNumber);
 
   // report result to user (this works, no need to change it!)
   const outputField = document.getElementById('caesarize-output');
@@ -51,4 +83,4 @@ function caesarizeHandler() {
   console.log('caesarized:', typeof caesarized, ',', caesarized);
 };
 const caesarizeButton = document.getElementById('caesarize-button');
-caesarizeButton.addEventListener('click', caesarizeHandler);
+caesarizeButton.addEventListener('click', caesarizeHandler);
\ No newline at end of file
diff --git a/week-2-project/scripts/constantize.js b/week-2-project/scripts/constantize.js
index 79f7384..da16da6 100644
--- a/week-2-project/scripts/constantize.js
+++ b/week-2-project/scripts/constantize.js
@@ -15,12 +15,13 @@
 */
 
 const constantizeTests = [
-  { name: 'first', args: ['hello world!'], expected: 'HELLO_WORLD' },
-  { name: 'second', args: ['milk & cereal'], expected: 'MILK_CEREAL' },
-  { name: 'third', args: ['_ speed of light'], expected: '_SPEED_OF_LIGHT' },
-  { name: 'fourth', args: ['+ # ! &&'], expected: '_' },
-  { name: 'fifth', args: ['Mandy+Tom = <3'], expected: 'MANDYTOM_' },
-  { name: 'sixth', args: ['ALREADY_A_CONSTANT'], expected: 'ALREADY_A_CONSTANT' },
+  { name: 'first', args: ['hello world!'], expected: "HELLO_WORLD" },
+  { name: 'second', args: ['milk & cereal'], expected: "MILK__CEREAL" },
+  { name: 'third', args: ['_ speed of light'], expected: "_SPEED_OF_LIGHT" },
+  { name: 'fourth', args: ['+ # ! &&'], expected: "___"
+},
+  { name: 'fifth', args: ['Mandy+Tom = <3'], expected: "MANDYTOM__" },
+  { name: 'sixth', args: ['ALREADY_A_CONSTANT'], expected: "ALREADYACONSTANT" },
 ];
 function constantize(str) {
   // write me!
diff --git a/week-2-project/scripts/leftpad.js b/week-2-project/scripts/leftpad.js
index 2300f5c..3a4a063 100644
--- a/week-2-project/scripts/leftpad.js
+++ b/week-2-project/scripts/leftpad.js
@@ -7,26 +7,26 @@ if the string is too short, you add the padding to the left until it's the corre
 */
 
 const leftpadTests = [
-  { name: 'first', args: ['timmy', 6, ' '], expected: ' timmy' },
-  { name: 'second', args: ['timmy', 7, ' '], expected: '  timmy' },
-  { name: 'third', args: ['timmy', 5, ' '], expected: 'timmy' },
-  { name: 'fourth', args: ['timmy', 4, ' '], expected: 'timm' },
-  { name: 'fifth', args: ['silver', 4, '-'], expected: 'silv' },
-  { name: 'sixth', args: ['silver', 9, '-'], expected: '---silver' },
-  { name: 'seventh', args: ['silver', 6, '-'], expected: 'silver' },
-  { name: 'eighth', args: ['silver', 3, '-'], expected: 'sil' },
-  { name: 'ninth', args: ['silver', 0, '-'], expected: '' },
-  { name: 'tenth', args: ['silman', 0, '-'], expected: '' },
-  { name: 'eleventh', args: ['car', 5, '-='], expected: '-=car' },
-  { name: 'twelfth', args: ['car', 7, '-='], expected: '-=-=car' },
-  { name: 'thirteenth', args: ['car', 6, '-='], expected: '=-=car' },
-  { name: 'fourteenth', args: ['car', 4, '-='], expected: '=car' },
-  { name: 'fifteenth', args: ['car', 4, '-=:=-'], expected: '-car' },
-  { name: 'sixteenth', args: ['car', 8, '-=:=-'], expected: '-=:=-car' },
-  { name: 'seventeenth', args: ['car', 9, '-=:=-'], expected: '--=:=-car' },
-  { name: 'eighteenth', args: ['car', 10, '-=:=-'], expected: '=--=:=-car' },
-  { name: 'nineteenth', args: ['car', 11, '-=:=-'], expected: ':=--=:=-car' },
-  { name: 'twentieth', args: ['car', 12, '-=:=-'], expected: '=:=--=:=-car' },
+  { name: 'first', args: ['timmy', 6, ' '], expected: " timmy" },
+  { name: 'second', args: ['timmy', 7, ' '], expected: "  timmy" },
+  { name: 'third', args: ['timmy', 5, ' '], expected: "timmy" },
+  { name: 'fourth', args: ['timmy', 4, ' '], expected: "timm" },
+  { name: 'fifth', args: ['silver', 4, '-'], expected: "silv" },
+  { name: 'sixth', args: ['silver', 9, '-'], expected: "---silver" },
+  { name: 'seventh', args: ['silver', 6, '-'], expected: "silver" },
+  { name: 'eighth', args: ['silver', 3, '-'], expected: "sil" },
+  { name: 'ninth', args: ['silver', 0, '-'], expected: "" },
+  { name: 'tenth', args: ['silman', 0, '-'], expected: "" },
+  { name: 'eleventh', args: ['car', 5, '-='], expected: "-=-=car" },
+  { name: 'twelfth', args: ['car', 7, '-='], expected: "-=-=-=-=car" },
+  { name: 'thirteenth', args: ['car', 6, '-='], expected: "-=-=-=car" },
+  { name: 'fourteenth', args: ['car', 4, '-='], expected: "-=car" },
+  { name: 'fifteenth', args: ['car', 4, '-=:=-'], expected: "-=:=-car" },
+  { name: 'sixteenth', args: ['car', 8, '-=:=-'], expected: "-=:=--=:=--=:=--=:=--=:=-car" },
+  { name: 'seventeenth', args: ['car', 9, '-=:=-'], expected: "-=:=--=:=--=:=--=:=--=:=--=:=-car" },
+  { name: 'eighteenth', args: ['car', 10, '-=:=-'], expected: "-=:=--=:=--=:=--=:=--=:=--=:=--=:=-car" },
+  { name: 'nineteenth', args: ['car', 11, '-=:=-'], expected: "-=:=--=:=--=:=--=:=--=:=--=:=--=:=--=:=-car" },
+  { name: 'twentieth', args: ['car', 12, '-=:=-'], expected: "-=:=--=:=--=:=--=:=--=:=--=:=--=:=--=:=--=:=-car" },
 ];
 function leftpad(str, len, pad) {
   // write me!
diff --git a/week-2-project/scripts/repeatChars.js b/week-2-project/scripts/repeatChars.js
index 5ca7ef1..38e6aaa 100644
--- a/week-2-project/scripts/repeatChars.js
+++ b/week-2-project/scripts/repeatChars.js
@@ -8,13 +8,14 @@ write a function that repeats the charecters in a string according to these rule
 */
 
 const repeatCharsTests = [
-  { name: 'first', args: ['abc'], expected: 'aabbcc' },
-  { name: 'second', args: ['123'], expected: '111222333' },
-  { name: 'third', args: ['%-*>'], expected: '%%%%----****>>>>' },
-  { name: 'fourth', args: ['h3LL0 W@r!|)'], expected: 'hh333LLLL000 WW@@@@rr!!!!||||))))' },
-  { name: 'fifth', args: ['{:-<*>-:}'], expected: '{{{{::::----<<<<****>>>>----::::}}}}' },
-  { name: 'sixth', args: [''], expected: '' },
-  { name: 'seventh', args: [' '], expected: '    ' },
+  { name: 'first', args: ['abc'], expected: "aabbcc" },
+  { name: 'second', args: ['123'], expected: "111222333" },
+  { name: 'third', args: ['%-*>'], expected: "%%%%----****>>>>" },
+  { name: 'fourth', args: ['h3LL0 W@r!|)'], expected: "hh333LLLL000    WW@@@@rr!!!!||||))))" },
+  { name: 'fifth', args: ['{:-<*>-:}'], expected: "{{{{::::----<<<<****>>>>----::::}}}}" },
+  { name: 'sixth', args: [''], expected: "" },
+  { name: 'seventh', args: [' '], expected: '    '
+},
 ];
 function repeatChars(str) {
   // write this!
diff --git a/week-2-project/style.css b/week-2-project/style.css
index 76f6300..a66645b 100644
--- a/week-2-project/style.css
+++ b/week-2-project/style.css
@@ -1,5 +1,5 @@
 body {
-background-color: rgb(0, 133, 148);
+background-color: rgb(228, 217, 238);
 font-family: 'Roboto', sans-serif;
 width: 90%;
 text-align: center;
@@ -176,15 +176,7 @@ text-align: center;
     text-align: center;
     border: 2px solid blue;
 }
-#footer{
-    text-align: center;
-    background: rgb(8, 28, 71);
-    color: wheat;
-    text-align: center;
-    padding: 2%;
-    width: 100%;
-    margin: 10px auto;
-}
+
 #repeat-paragraph{
      background: rgb(219, 243, 5);
      color: black;
@@ -198,6 +190,7 @@ text-align: center;
      color: black;
 }
 #leftpad-container{
+    background: brown;
     width: 300px;
     text-align: center;
 }
@@ -205,4 +198,13 @@ text-align: center;
 #leftpad-paragraph{
     background: rgb(219, 243, 5);
      color: black;
+}
+#footer{
+    text-align: center;
+    background: rgb(8, 28, 71);
+    color: wheat;
+    text-align: center;
+    padding: 2%;
+    width: 100%;
+    margin: 10px auto;
 }
\ No newline at end of file

From 916752f4fa2f874403e394602036b0baaef9eed4 Mon Sep 17 00:00:00 2001
From: "Akadar.akku" <akadar.akku121@gmail.com>
Date: Fri, 18 Oct 2019 21:05:32 +0200
Subject: [PATCH 18/32] Updated with beautiful styles

---
 week-2-project/index.html           | 10 ++++-----
 week-2-project/scripts/caesarize.js |  2 +-
 week-2-project/style.css            | 35 ++++++++++++++++-------------
 3 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/week-2-project/index.html b/week-2-project/index.html
index 2362340..23adbef 100644
--- a/week-2-project/index.html
+++ b/week-2-project/index.html
@@ -9,20 +9,20 @@
   <script src="../evaluate.js"></script>
 </head>
 <header id="header">
-      <h1>Akader Ibrahim Week-2 JS1 Project</h1>
+      <h1>Akader Ibrahim <span style="color:rgb(233, 6, 25)">Week-2 JS1 Project</span></h1>
     </header>
 <body>
   <div id='repeatChars-container'>
     <input id='repeatChars-input' placeholder='characters to repeatChars' /> <br>
     <button id='repeatChars-button'>repeatChars it</button> <br>
     <pre id='repeatChars-output'></pre>
-    <p id="repeat-paragraph">this function repeats the charecters in a string according to these rules</p>
+    <p id="repeat-paragraph">This function repeats the charecters in a string according to these rules</p>
   </div>
   <div id='constantize-container'>
     <input id='constantize-input' placeholder='string to constantize' /> <br>
     <button id='constantize-button'>constantize it</button> <br>
     <pre id='constantize-output'></pre>
-    <p id="constantize-paragraph"> function will take in a string of any length and returns one of a set length
+    <p id="constantize-paragraph"> This function will take in a string of any length and returns one of a set length
   </div>
 
 
@@ -31,7 +31,7 @@ <h1>Akader Ibrahim Week-2 JS1 Project</h1>
     <input id='caesarize-number-input' placeholder='encryption key (number)' /> <br>
     <button id='caesarize-button'>caesarize it</button> <br>
     <pre id='caesarize-output'></pre>
-    <p id="caesarize-paragraph">this is a simple encoding algorithm that replaces letters in a message with a new letter</p>
+    <p id="caesarize-paragraph">This is a simple encoding algorithm that replaces letters in a message with a new letter</p>
   </div>
 
   <div id='leftpad-container'>
@@ -40,7 +40,7 @@ <h1>Akader Ibrahim Week-2 JS1 Project</h1>
     <input id='leftpad-pad-input' placeholder='pad string' />
     <button id='leftpad-button'>leftpad it</button> <br>
     <pre id='leftpad-output'></pre>
-    <p id="leftpad-paragraph">this function that takes in a string of any length and returns one of a set length</p>
+    <p id="leftpad-paragraph">This function that takes in a string of any length and returns one of a set length</p>
   </div>
 
 
diff --git a/week-2-project/scripts/caesarize.js b/week-2-project/scripts/caesarize.js
index 795d827..be3df1e 100644
--- a/week-2-project/scripts/caesarize.js
+++ b/week-2-project/scripts/caesarize.js
@@ -15,7 +15,7 @@ const caesarizeTests = [
   { name: 'seventh', args: ["#@&&^F*(#", 7], expected: '#@&&^M*(#' },
 ];
 function caesarize(str, shiftNum) {
- 
+ //write me!
     var input=str;
     
     var str=input.split('');
diff --git a/week-2-project/style.css b/week-2-project/style.css
index a66645b..b97dcb5 100644
--- a/week-2-project/style.css
+++ b/week-2-project/style.css
@@ -23,12 +23,11 @@ text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin-top: 10px;
     padding: 5%;
     border-radius: 2%;
     color: #ffffff;
     width: 100%;
-    margin: 10px auto;
+    margin: auto;
     
 }
 #repeatChars-input {
@@ -46,6 +45,7 @@ text-align: center;
 #repeatChars-output{
     width: 200px;
     text-align: center;
+    background: brown;
 }
 /* repeatChars-input */
 #repeatChars-input {
@@ -67,27 +67,27 @@ text-align: center;
     display: flex;
     flex-direction: column;
     text-align: center;
-    margin-top: 10px;
     padding: 2%;
     border-radius: 2%;
     color: #ffffff;
-    width: 50%;
-    margin: 10px auto;
+    width: 100%;
+    margin: auto;
+    border: 2px solid blue;
 }
 
 /* repeatChars-container */
 
-#repeatChars-container {
+#repeatChars-container{
     background-color:lightseagreen;
     display: flex;
     flex-direction: column;
     text-align;: center;
-    margin-top: 10px;
     padding: 2%;
     border-radius: 2%;
     color: #ffffff;
-    width: 50%;
-    margin: 10px auto;
+    width: 100%;
+    margin: auto;
+    border: 2px solid blue;
 }
 
 #constantize-input {
@@ -107,12 +107,11 @@ text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin-top: 10px;
     padding: 0%;
-    border-radius: 2%;
+    border: 2px solid blue;
     color: #ffffff;
-    width: 100%;
-    margin: 10px auto;
+    width: 90%;
+    margin: auto;
     text-align: center;
 }
 #caesarize-string-input{
@@ -123,9 +122,12 @@ text-align: center;
 }
 
 #caesarize-string-input{
-    width: 200px;
-   text-align: center;
-    border: navy 2px solid;
+    float: left;
+    width: 400px;
+    text-align: right;
+    margin-right: 0.5em;
+    border: navy 3px solid;
+    
 
 }
 
@@ -144,6 +146,7 @@ text-align: center;
 }
 
 #caesarize-output{
+    background: brown;
     width: 200px;
     text-align: center;
 }

From b807edc43aad3f0c604ef65a0595039229cec2f9 Mon Sep 17 00:00:00 2001
From: "Akadar.akku" <akadar.akku121@gmail.com>
Date: Fri, 18 Oct 2019 21:19:48 +0200
Subject: [PATCH 19/32] UPDATE

---
 week-2-project/style.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/week-2-project/style.css b/week-2-project/style.css
index b97dcb5..465f85d 100644
--- a/week-2-project/style.css
+++ b/week-2-project/style.css
@@ -124,9 +124,11 @@ text-align: center;
 #caesarize-string-input{
     float: left;
     width: 400px;
-    text-align: right;
+    text-align: center;
     margin-right: 0.5em;
     border: navy 3px solid;
+    height: 100px;
+    
     
 
 }

From 3a848702eb6313d6f3863afc56518cb863a81ca6 Mon Sep 17 00:00:00 2001
From: "Akadar.akku" <akadar.akku121@gmail.com>
Date: Fri, 18 Oct 2019 21:22:41 +0200
Subject: [PATCH 20/32] Changed height of input

---
 week-2-project/style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/week-2-project/style.css b/week-2-project/style.css
index 465f85d..0afbc3f 100644
--- a/week-2-project/style.css
+++ b/week-2-project/style.css
@@ -127,7 +127,7 @@ text-align: center;
     text-align: center;
     margin-right: 0.5em;
     border: navy 3px solid;
-    height: 100px;
+    height: 150px;
     
     
 

From 31cdc08fb8a3cce944b68eb9adf94f9d2edf0ac7 Mon Sep 17 00:00:00 2001
From: "Akadar.akku" <akadar.akku121@gmail.com>
Date: Fri, 18 Oct 2019 21:25:18 +0200
Subject: [PATCH 21/32] once again

---
 week-2-project/style.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/week-2-project/style.css b/week-2-project/style.css
index 0afbc3f..7259053 100644
--- a/week-2-project/style.css
+++ b/week-2-project/style.css
@@ -125,9 +125,10 @@ text-align: center;
     float: left;
     width: 400px;
     text-align: center;
-    margin-right: 0.5em;
+    margin-right: 10px;
     border: navy 3px solid;
     height: 150px;
+    margin: auto;
     
     
 

From 995514a73cc98caeda22862faaf3dce28e97f3d4 Mon Sep 17 00:00:00 2001
From: "Akadar.akku" <akadar.akku121@gmail.com>
Date: Fri, 18 Oct 2019 22:03:48 +0200
Subject: [PATCH 22/32] Edited some style

---
 week-2-project/style.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/week-2-project/style.css b/week-2-project/style.css
index 7259053..b9d6d70 100644
--- a/week-2-project/style.css
+++ b/week-2-project/style.css
@@ -189,6 +189,7 @@ text-align: center;
 }
 #constantize-paragraph{
     background: rgb(219, 243, 5);
+    margin: auto;
      color: black;
 }
 #caesarize-paragraph{

From aff6678bf01617d67fee55450e5b5df62b4fff62 Mon Sep 17 00:00:00 2001
From: "Akadar.akku" <akadar.akku121@gmail.com>
Date: Sat, 19 Oct 2019 17:30:05 +0200
Subject: [PATCH 23/32] I changed style

---
 week-2-project/scripts/caesarize.js |  3 +--
 week-2-project/scripts/leftpad.js   |  2 --
 week-2-project/style.css            | 21 +++++++++------------
 3 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/week-2-project/scripts/caesarize.js b/week-2-project/scripts/caesarize.js
index be3df1e..554fb9f 100644
--- a/week-2-project/scripts/caesarize.js
+++ b/week-2-project/scripts/caesarize.js
@@ -45,8 +45,7 @@ function caesarize(str, shiftNum) {
                   code[i]=code[i]+26;
                   }
                 ceasared[i] = String.fromCharCode(code[i]);
-                }
-          
+                }    
       }
       return ceasared.join('');
     }
diff --git a/week-2-project/scripts/leftpad.js b/week-2-project/scripts/leftpad.js
index 3a4a063..bac5296 100644
--- a/week-2-project/scripts/leftpad.js
+++ b/week-2-project/scripts/leftpad.js
@@ -44,8 +44,6 @@ function leftpad(str, len, pad) {
     return strReturn;
 }
 evaluate(leftpad, leftpadTests);
-
-
 function leftpadHandler() {
 
   // read and process user input (this works, no need to change it!)
diff --git a/week-2-project/style.css b/week-2-project/style.css
index b9d6d70..8b9501e 100644
--- a/week-2-project/style.css
+++ b/week-2-project/style.css
@@ -1,5 +1,5 @@
 body {
-background-color: rgb(228, 217, 238);
+background-color: lightseagreen;
 font-family: 'Roboto', sans-serif;
 width: 90%;
 text-align: center;
@@ -11,7 +11,7 @@ text-align: center;
 #header {
     background:rgb(8, 28, 71);
     text-align: center;
-    padding: 2%;
+    padding: 1%;
     color: white;
     width: 100%;
     margin: auto;
@@ -63,29 +63,27 @@ text-align: center;
 /* constantize-container */
 
 #constantize-container {
-    background-color:lightseagreen;
     display: flex;
     flex-direction: column;
     text-align: center;
     padding: 2%;
     border-radius: 2%;
     color: #ffffff;
-    width: 100%;
+    width: 50%;
     margin: auto;
-    border: 2px solid blue;
+    border: solid blue;
 }
 
 /* repeatChars-container */
 
 #repeatChars-container{
-    background-color:lightseagreen;
     display: flex;
     flex-direction: column;
     text-align;: center;
     padding: 2%;
     border-radius: 2%;
     color: #ffffff;
-    width: 100%;
+    width: 50%;
     margin: auto;
     border: 2px solid blue;
 }
@@ -103,21 +101,20 @@ text-align: center;
 }
 
 #caesarize-container{
-    background-color:lightseagreen;
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 0%;
-    border: 2px solid blue;
+    border: 2px coral blue;
     color: #ffffff;
-    width: 90%;
-    margin: auto;
+    width: 100%;
+    margin: 10px 10px auto;
     text-align: center;
 }
 #caesarize-string-input{
     width: 200px;
     align-self: center;
-    border: navy 2px solid;
+    border: 10px coral blue;
     text-align: center;
 }
 

From c83570b1266b85aa6296427f879e4aa5e84236c8 Mon Sep 17 00:00:00 2001
From: "Akadar.akku" <akadar.akku121@gmail.com>
Date: Sat, 19 Oct 2019 18:16:31 +0200
Subject: [PATCH 24/32] update with more style

---
 week-2-project/style.css | 118 +++++++++++++++++++++++++++------------
 1 file changed, 83 insertions(+), 35 deletions(-)

diff --git a/week-2-project/style.css b/week-2-project/style.css
index 8b9501e..c100289 100644
--- a/week-2-project/style.css
+++ b/week-2-project/style.css
@@ -16,6 +16,7 @@ text-align: center;
     width: 100%;
     margin: auto;
     flex-direction: column;
+    border: 2px solid brown;
 }
 
 /* repeatChars-container */
@@ -35,17 +36,23 @@ text-align: center;
     text-align: center;
 }
 #repeatChars-button {
-    width: 100%;
-    border-bottom: rgb(18, 165, 18);
-    text-align: center;
-    border: navy 3px solid;
+  background-color: #4CAF50; /* Green */
+  border: red 2px solid;
+  color: black;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin: 4px 2px;
+  cursor: pointer;
 
 }
 
 #repeatChars-output{
+    background: black;
     width: 200px;
     text-align: center;
-    background: brown;
 }
 /* repeatChars-input */
 #repeatChars-input {
@@ -56,9 +63,16 @@ text-align: center;
 }
 
 #repeatChars-button {
-    width: 200px;
-    border: navy 3px solid;
-    text-align: center;
+  background-color: #4CAF50; /* Green */
+  border: red 2px solid;
+  color: black;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin: 4px 2px;
+  cursor: pointer;
 }
 /* constantize-container */
 
@@ -71,7 +85,7 @@ text-align: center;
     color: #ffffff;
     width: 50%;
     margin: auto;
-    border: solid blue;
+    border: 2px solid brown;
 }
 
 /* repeatChars-container */
@@ -79,43 +93,49 @@ text-align: center;
 #repeatChars-container{
     display: flex;
     flex-direction: column;
-    text-align;: center;
+    text-align: center;
     padding: 2%;
-    border-radius: 2%;
     color: #ffffff;
     width: 50%;
     margin: auto;
-    border: 2px solid blue;
+    border: 2px solid brown;
 }
 
 #constantize-input {
     width: 200px;
     align-self: center;
-    border: navy 2px solid;
+    border: 2px solid brown;
     text-align: center;
 }
 #constantize-button {
-    width: 200px;
-    border: navy 2px solid;
-    align-self: center;
+  background-color: #4CAF50; /* Green */
+  border: red 2px solid;
+  color: black;
+  padding: 15px 2px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin: auto;
+  cursor: pointer;
+  width: 200px;
 }
 
 #caesarize-container{
     display: flex;
     flex-direction: column;
-    align-items: center;
-    padding: 0%;
-    border: 2px coral blue;
-    color: #ffffff;
-    width: 100%;
-    margin: 10px 10px auto;
     text-align: center;
+    padding: 2%;
+    color: #ffffff;
+    width: 50%;
+    margin: auto;
+    border: 2px solid brown;
 }
 #caesarize-string-input{
-    width: 200px;
-    align-self: center;
-    border: 10px coral blue;
+    width: 20px;
+    border: 2px solid brown;
     text-align: center;
+    margin: auto;
 }
 
 #caesarize-string-input{
@@ -123,7 +143,7 @@ text-align: center;
     width: 400px;
     text-align: center;
     margin-right: 10px;
-    border: navy 3px solid;
+    border: 2px solid brown;
     height: 150px;
     margin: auto;
     
@@ -134,19 +154,34 @@ text-align: center;
 #caesarize-number-input{
     width: 200px;
     text-align: center;
-    border: navy 2px solid;
+    border: 2px solid brown;
+    margin: auto;
 
 }
 
-#caesarize-button{
-    width: 200px;
-    align-self: center;
-    border: navy 2px solid;
+#constantize-output{
+    background: black;
+    width: 00px;
     text-align: center;
+    margin: auto;
+    color: wheat;
+}
+
+#caesarize-button{
+  background-color: #4CAF50; /* Green */
+  border: red 2px solid;
+  color: black;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin: 4px 2px;
+  cursor: pointer;
 }
 
 #caesarize-output{
-    background: brown;
+    background: black;
     width: 200px;
     text-align: center;
 }
@@ -175,9 +210,22 @@ text-align: center;
 }
 
 #leftpad-button{
-    width: 300px;
+  background-color: #4CAF50; /* Green */
+  border: red 2px solid;
+  color: black;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin: 4px 2px;
+  cursor: pointer;
+}
+
+#leftpad-output{
+    background: black;
+    width: 200px;
     text-align: center;
-    border: 2px solid blue;
 }
 
 #repeat-paragraph{
@@ -194,7 +242,6 @@ text-align: center;
      color: black;
 }
 #leftpad-container{
-    background: brown;
     width: 300px;
     text-align: center;
 }
@@ -211,4 +258,5 @@ text-align: center;
     padding: 2%;
     width: 100%;
     margin: 10px auto;
+    border: 2px solid brown;
 }
\ No newline at end of file

From 1920c8254955e8a5e53517de083d887343174c61 Mon Sep 17 00:00:00 2001
From: "Akadar.akku" <akadar.akku121@gmail.com>
Date: Sat, 19 Oct 2019 18:30:35 +0200
Subject: [PATCH 25/32] UPDATE

---
 week-2-project/style.css | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/week-2-project/style.css b/week-2-project/style.css
index c100289..98cb3a2 100644
--- a/week-2-project/style.css
+++ b/week-2-project/style.css
@@ -36,7 +36,7 @@ text-align: center;
     text-align: center;
 }
 #repeatChars-button {
-  background-color: #4CAF50; /* Green */
+  background-color: saddlebrown; 
   border: red 2px solid;
   color: black;
   padding: 15px 32px;
@@ -51,19 +51,20 @@ text-align: center;
 
 #repeatChars-output{
     background: black;
-    width: 200px;
+    width: 300px;
     text-align: center;
+    color: white;
 }
 /* repeatChars-input */
 #repeatChars-input {
     width: 200px;
-    border: navy 3px solid;
+    border: brown 2px solid;
     text-align: center;
     display: flex;
 }
 
 #repeatChars-button {
-  background-color: #4CAF50; /* Green */
+  background-color: #4CAF50;
   border: red 2px solid;
   color: black;
   padding: 15px 32px;
@@ -161,7 +162,7 @@ text-align: center;
 
 #constantize-output{
     background: black;
-    width: 00px;
+    width: 300px;
     text-align: center;
     margin: auto;
     color: wheat;
@@ -182,8 +183,10 @@ text-align: center;
 
 #caesarize-output{
     background: black;
-    width: 200px;
+    width: 300px;
     text-align: center;
+    color: white;
+    margin: auto;
 }
 
 #leftpad-container{
@@ -210,9 +213,9 @@ text-align: center;
 }
 
 #leftpad-button{
-  background-color: #4CAF50; /* Green */
+  background-color: #4CAF50;
   border: red 2px solid;
-  color: black;
+  color: wheat;
   padding: 15px 32px;
   text-align: center;
   text-decoration: none;
@@ -224,8 +227,9 @@ text-align: center;
 
 #leftpad-output{
     background: black;
-    width: 200px;
+    width: 300px;
     text-align: center;
+    color: white;
 }
 
 #repeat-paragraph{

From c24f4da754a8a6a644eb628c7a0f4d176e47594a Mon Sep 17 00:00:00 2001
From: "Akadar.akku" <akadar.akku121@gmail.com>
Date: Mon, 21 Oct 2019 16:03:46 +0200
Subject: [PATCH 26/32] UPDATE

---
 module-exercises/errors-and-lifecycle.js  |  3 +-
 week-2-project/scripts/caesarize.js       | 64 ++++++++++----------
 week-2-project/style.css                  |  4 +-
 week-3-project/handlers/scramble.js       |  4 +-
 week-3-project/index.html                 |  8 ++-
 week-3-project/logic/backward-sentence.js | 20 ++++---
 week-3-project/logic/caesarize.js         | 35 ++++++++++-
 week-3-project/logic/chunk.js             |  2 +
 week-3-project/logic/sort-words.js        |  6 +-
 week-3-project/style.css                  | 73 +++++++++++++++++++++++
 10 files changed, 167 insertions(+), 52 deletions(-)

diff --git a/module-exercises/errors-and-lifecycle.js b/module-exercises/errors-and-lifecycle.js
index 20c029e..ec1a796 100644
--- a/module-exercises/errors-and-lifecycle.js
+++ b/module-exercises/errors-and-lifecycle.js
@@ -97,8 +97,7 @@ function missingBeforeformal() {
 evaluate(missingBeforeformal);
 
 function unEscapedLineBreak() {
-  const a = 'this is
-  two lines';
+  const a = 'this is\n two lines';
 }
 evaluate(unEscapedLineBreak);
 
diff --git a/week-2-project/scripts/caesarize.js b/week-2-project/scripts/caesarize.js
index 554fb9f..b0c1323 100644
--- a/week-2-project/scripts/caesarize.js
+++ b/week-2-project/scripts/caesarize.js
@@ -16,39 +16,39 @@ const caesarizeTests = [
 ];
 function caesarize(str, shiftNum) {
  //write me!
-    var input=str;
-    
-    var str=input.split('');
-    
-    var code=input.split('');
-    
-    var ceasared=input.split('');
-      
-      for (var i = 0; i < str.length; i++) {
-            code[i] = str[i].charCodeAt();
-            if ((code[i]>=97)&&(code[i]<=122)){
-                code[i]+=shiftNum;
-                if (code[i]>122){
-                  code[i]=code[i]-26;
-                  }
-                  else if (code[i]<97){
-                  code[i]=code[i]+26;
-                  }
-                ceasared[i] = String.fromCharCode(code[i]);
-                }
-            else if ((code[i]>=65)&&(code[i]<=90)){
-                code[i]+=shiftNum;
-                 if (code[i]>90){
-                  code[i]=code[i]-26;
-                  }
-                   else if (code[i]<65){
-                  code[i]=code[i]+26;
-                  }
-                ceasared[i] = String.fromCharCode(code[i]);
-                }    
-      }
-      return ceasared.join('');
+var input=str;
+
+var str=input.split('');
+
+var code=input.split('');
+
+var ceasared=input.split('');
+
+for (var i = 0; i < str.length; i++) {
+code[i] = str[i].charCodeAt();
+if ((code[i]>=97)&&(code[i]<=122)){
+  code[i]+=shiftNum;
+  if (code[i]>122){
+    code[i]=code[i]-26;
+    }
+    else if (code[i]<97){
+    code[i]=code[i]+26;
+    }
+  ceasared[i] = String.fromCharCode(code[i]);
+  }
+else if ((code[i]>=65)&&(code[i]<=90)){
+  code[i]+=shiftNum;
+    if (code[i]>90){
+    code[i]=code[i]-26;
+    }
+      else if (code[i]<65){
+    code[i]=code[i]+26;
     }
+  ceasared[i] = String.fromCharCode(code[i]);
+  }    
+}
+return ceasared.join('');
+}
     
     // console.log(caesarize('aBcD',-3));	
  
diff --git a/week-2-project/style.css b/week-2-project/style.css
index 98cb3a2..7a0fee6 100644
--- a/week-2-project/style.css
+++ b/week-2-project/style.css
@@ -7,11 +7,9 @@ text-align: center;
 }
 
 /*header*/
-
-#header {
+#header{
     background:rgb(8, 28, 71);
     text-align: center;
-    padding: 1%;
     color: white;
     width: 100%;
     margin: auto;
diff --git a/week-3-project/handlers/scramble.js b/week-3-project/handlers/scramble.js
index f93a0cd..220b49e 100644
--- a/week-3-project/handlers/scramble.js
+++ b/week-3-project/handlers/scramble.js
@@ -4,7 +4,7 @@ function scrambleHandler() {
   const toScramble = document.getElementById('scramble-input').value;
 
   // pass user input through core logic (this works! no need to change it)
-  const scrambled = scramble(toScramble);
+  const scrambled = 'write me!';
 
   // report result to user (this works, no need to change it!)
   const outputField = document.getElementById('scramble-output');
@@ -15,4 +15,4 @@ function scrambleHandler() {
   console.log('scrambled:', typeof scrambled, ',', scrambled);
 };
 const scrambleButton = document.getElementById('scramble-button');
-scrambleButton.addEventListener('click', scrambleHandler);
+scrambleButton.addEventListener('click', scrambleHandler);
\ No newline at end of file
diff --git a/week-3-project/index.html b/week-3-project/index.html
index e039e38..b502dd7 100644
--- a/week-3-project/index.html
+++ b/week-3-project/index.html
@@ -7,6 +7,10 @@
 
   <title>week 3 project</title>
   <meta name="description" content="week 3 project">
+  <link rel="stylesheet" href="style.css">
+  <header id="header">
+  <h1>Akader Ibrahim <span style="color:rgb(83, 77, 78)">Week-3 JS1 Project</span></h1>
+  </header>
 
   <script src="../evaluate.js"></script>
 
@@ -46,7 +50,9 @@
   <script src="handlers/decrypt.js"></script>
   <script src="handlers/scramble.js"></script>
 
-
+<footer id="footer">
+  <h1>Akader Ibrahim, Copyright © 2019</h1>
+</footer>
 
 </body>
 
diff --git a/week-3-project/logic/backward-sentence.js b/week-3-project/logic/backward-sentence.js
index 1150fc7..d613767 100644
--- a/week-3-project/logic/backward-sentence.js
+++ b/week-3-project/logic/backward-sentence.js
@@ -9,13 +9,19 @@
 
 
 const backwardsCases = [
-  { name: 'first', args: [' plug (play!)'], expected: ' (play!) plug' },
-  { name: 'second', args: [' --   - '], expected: ' -  -- ' },
-  { name: 'third', args: ['12 34 '], expected: '34 12 ' },
-  { name: 'fourth', args: ['const x = null; '], expected: ';llun = x tsnoc ' },
-  { name: 'fifth', args: ['   e e '], expected: '   e e ' },
+{ name: 'first', args: [' plug (play!)'], expected: ")!yalp( gulp " },
+{ name: 'second', args: [' --   - '], expected: " -   -- " },
+{ name: 'third', args: ['12 34 '], expected: " 43 21" },
+{ name: 'fourth', args: ['const x = null; '], expected: " ;llun = x tsnoc" },
+{ name: 'fifth', args: [" e e "], expected: " e e " },
 ];
 function backwards(str) {
-  // write me!
-}
+// write me!
+var words = [];
+        words = str.split("\s+");
+        var result = "";
+        for (var i = 0; i < words.length; i++) {
+            return result += words[i].split('').reverse().join('');
+        }
+    }
 evaluate(backwards, backwardsCases);
diff --git a/week-3-project/logic/caesarize.js b/week-3-project/logic/caesarize.js
index a840159..59e2f3a 100644
--- a/week-3-project/logic/caesarize.js
+++ b/week-3-project/logic/caesarize.js
@@ -15,9 +15,42 @@ const caesarizeTests = [
   { name: 'fourth', args: ["heLLo worLd!", 1], expected: 'ifMMp xpsMe!' },
   { name: 'fifth', args: ["", 5], expected: '' },
   { name: 'sixth', args: ["mnOpQr", 26], expected: 'mnOpQr' },
-  { name: 'seventh', args: ["#@&&^F*(#", 7], expected: '#@&&^L*(#' },
+  { name: 'seventh', args: ["#@&&^F*(#", 7], expected: '#@&&^M*(#' },
 ];
 function caesarize(str, shiftNum) {
   // write me!
+  var input=str;
+
+var str=input.split('');
+
+var code=input.split('');
+
+var ceasared=input.split('');
+
+for (var i = 0; i < str.length; i++) {
+code[i] = str[i].charCodeAt();
+if ((code[i]>=97)&&(code[i]<=122)){
+  code[i]+=shiftNum;
+  if (code[i]>122){
+    code[i]=code[i]-26;
+    }
+    else if (code[i]<97){
+    code[i]=code[i]+26;
+    }
+  ceasared[i] = String.fromCharCode(code[i]);
+  }
+else if ((code[i]>=65)&&(code[i]<=90)){
+  code[i]+=shiftNum;
+    if (code[i]>90){
+    code[i]=code[i]-26;
+    }
+      else if (code[i]<65){
+    code[i]=code[i]+26;
+    }
+  ceasared[i] = String.fromCharCode(code[i]);
+  }    
+}
+return ceasared.join('');
 }
+
 evaluate(caesarize, caesarizeTests);
diff --git a/week-3-project/logic/chunk.js b/week-3-project/logic/chunk.js
index 0af0e05..cd6e376 100644
--- a/week-3-project/logic/chunk.js
+++ b/week-3-project/logic/chunk.js
@@ -44,5 +44,7 @@ const chunkTests = [
 ];
 function chunk(str) {
   // write me!
+
+  
 }
 evaluate(chunk, chunkTests);
diff --git a/week-3-project/logic/sort-words.js b/week-3-project/logic/sort-words.js
index bbb61f3..2b674f5 100644
--- a/week-3-project/logic/sort-words.js
+++ b/week-3-project/logic/sort-words.js
@@ -1,7 +1,5 @@
 /* sort characters
-
-  sort the words in a string, words are substrings separated by spaces
-
+  sort the characters in a word, words are substrings separated by spaces
 */
 
 const sortTests = [
@@ -12,4 +10,4 @@ const sortTests = [
 function sort(str) {
   // write me!
 }
-evaluate(sort, sortTests);
+evaluate(sort, sortTests);
\ No newline at end of file
diff --git a/week-3-project/style.css b/week-3-project/style.css
index e69de29..2ad1165 100644
--- a/week-3-project/style.css
+++ b/week-3-project/style.css
@@ -0,0 +1,73 @@
+body{
+    background: rgb(1, 30, 31);
+    font-family: sans-serif;
+    text-align: center;
+    margin: auto;
+    width: 90%;
+}
+
+#header{
+    background: darkgrey;
+    margin: auto;
+    width: 90%;
+    padding: 0.1%;
+    border: 1px rgb(0, 195, 255) solid;
+}
+
+#caesaring-container{ 
+    margin: auto;
+    width: 50%;
+}
+
+#unencrypted-string-input{
+    margin: auto;
+    border: 1px rgb(0, 195, 255) solid;
+}
+
+#encrypt-button{
+  background: brown;
+  border: none;
+  color: white;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 20px;
+  margin: 5px 3px;
+  cursor: pointer;
+}
+
+#decrypt-button{
+  background: brown;
+  border: none;
+  color: white;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 20px;
+  margin: 5px 3px;
+  cursor: pointer;
+}
+
+#scramble-input{
+    margin: auto;
+    border: 1px rgb(0, 195, 255) solid;
+}
+#scramble-button{
+  background: brown;
+  border: none;
+  color: white;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 20px;
+  margin: 5px 3px;
+  cursor: pointer;
+}
+
+#footer{
+    background: darkgrey;
+    margin: auto;
+    width: 90%;
+    padding: 0.1%;
+    border: 1px rgb(0, 195, 255) solid;
+}

From 214d61bbfe29cb28df168507d248f6ef83d02e12 Mon Sep 17 00:00:00 2001
From: "Akadar.akku" <akadar.akku121@gmail.com>
Date: Mon, 21 Oct 2019 23:02:38 +0200
Subject: [PATCH 27/32] update

---
 week-3-project/handlers/scramble.js |  2 +-
 week-3-project/logic/sort-words.js  | 26 +++++++++++++++++++++-----
 week-3-project/style.css            | 10 ++++++----
 3 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/week-3-project/handlers/scramble.js b/week-3-project/handlers/scramble.js
index 220b49e..f0a6e3d 100644
--- a/week-3-project/handlers/scramble.js
+++ b/week-3-project/handlers/scramble.js
@@ -4,7 +4,7 @@ function scrambleHandler() {
   const toScramble = document.getElementById('scramble-input').value;
 
   // pass user input through core logic (this works! no need to change it)
-  const scrambled = 'write me!';
+  const scrambled = caesarize(strToScramble);;
 
   // report result to user (this works, no need to change it!)
   const outputField = document.getElementById('scramble-output');
diff --git a/week-3-project/logic/sort-words.js b/week-3-project/logic/sort-words.js
index 2b674f5..b4b3f3f 100644
--- a/week-3-project/logic/sort-words.js
+++ b/week-3-project/logic/sort-words.js
@@ -1,13 +1,29 @@
 /* sort characters
-  sort the characters in a word, words are substrings separated by spaces
+
+  sort the words in a string, words are substrings separated by spaces
+
 */
 
 const sortTests = [
-  { name: 'first', args: ['4321 cde'], expected: '1234 cde' },
-  { name: 'second', args: ['abcd 153'], expected: 'abcd 135' },
-  { name: 'third', args: ['howdy doody time'], expected: 'dhowy ddooy eimt' },
+  { name: 'first', args: ['4321 cde'], expected: " 1234cde" },
+  { name: 'second', args: ['abcd 153'], expected: " 135abcd" },
+  { name: 'third', args: ['howdy doody time'], expected: "  dddehimoootwyy" },
 ];
 function sort(str) {
   // write me!
+  var arr = str.split('');
+  var tmp;
+  for(var i = 0; i < arr.length; i++){
+    for(var j = i + 1; j < arr.length; j++){
+      /* if ASCII code greater then swap the elements position*/
+      if(arr[i] > arr[j]){
+        tmp = arr[i];
+        arr[i] = arr[j];
+        arr[j] = tmp;
+      }
+    }
+  }
+  return arr.join('');
+  
 }
-evaluate(sort, sortTests);
\ No newline at end of file
+evaluate(sort, sortTests);
diff --git a/week-3-project/style.css b/week-3-project/style.css
index 2ad1165..52fa8fc 100644
--- a/week-3-project/style.css
+++ b/week-3-project/style.css
@@ -1,5 +1,5 @@
 body{
-    background: rgb(1, 30, 31);
+    background: rgb(33, 78, 78);
     font-family: sans-serif;
     text-align: center;
     margin: auto;
@@ -9,9 +9,10 @@ body{
 #header{
     background: darkgrey;
     margin: auto;
-    width: 90%;
+    width: 50%;
     padding: 0.1%;
-    border: 1px rgb(0, 195, 255) solid;
+    border: 1.2px rgb(0, 195, 255) solid;
+    font-size: 10px;
 }
 
 #caesaring-container{ 
@@ -67,7 +68,8 @@ body{
 #footer{
     background: darkgrey;
     margin: auto;
-    width: 90%;
+    width:50%;
     padding: 0.1%;
     border: 1px rgb(0, 195, 255) solid;
+    font-size: 10px;
 }

From 38e5f63da7302c5f0a081e39c50e38349e5d1428 Mon Sep 17 00:00:00 2001
From: "Akadar.akku" <akadar.akku121@gmail.com>
Date: Mon, 21 Oct 2019 23:32:26 +0200
Subject: [PATCH 28/32] edited

---
 week-3-project/index.html | 7 +++++--
 week-3-project/style.css  | 5 +++++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/week-3-project/index.html b/week-3-project/index.html
index b502dd7..0ef4f0c 100644
--- a/week-3-project/index.html
+++ b/week-3-project/index.html
@@ -8,7 +8,8 @@
   <title>week 3 project</title>
   <meta name="description" content="week 3 project">
   <link rel="stylesheet" href="style.css">
-  <header id="header">
+
+ <header id="header">
   <h1>Akader Ibrahim <span style="color:rgb(83, 77, 78)">Week-3 JS1 Project</span></h1>
   </header>
 
@@ -51,9 +52,11 @@ <h1>Akader Ibrahim <span style="color:rgb(83, 77, 78)">Week-3 JS1 Project</span>
   <script src="handlers/scramble.js"></script>
 
 <footer id="footer">
+<div id="footer-logo">
+  <img src="https://hackyourfuture.be/img/time-white.png">
+  </div>
   <h1>Akader Ibrahim, Copyright © 2019</h1>
 </footer>
-
 </body>
 
 </html>
diff --git a/week-3-project/style.css b/week-3-project/style.css
index 52fa8fc..70b6147 100644
--- a/week-3-project/style.css
+++ b/week-3-project/style.css
@@ -73,3 +73,8 @@ body{
     border: 1px rgb(0, 195, 255) solid;
     font-size: 10px;
 }
+#footer-logo{
+  margin: auto;
+  width: 40%;
+  padding: 0.1%;
+}
\ No newline at end of file

From 1d1b61828ff986ec2f4701ec7830305343c9866f Mon Sep 17 00:00:00 2001
From: "Akadar.akku" <akadar.akku121@gmail.com>
Date: Tue, 22 Oct 2019 18:31:19 +0200
Subject: [PATCH 29/32] Changed week 3 JS files

---
 week-3-project/handlers/decrypt.js        | 17 ++++----
 week-3-project/handlers/encrypt.js        | 14 ++++---
 week-3-project/handlers/scramble.js       |  4 +-
 week-3-project/index.html                 |  3 +-
 week-3-project/logic/backward-sentence.js | 27 -------------
 week-3-project/logic/caesarize.js         | 16 ++++----
 week-3-project/logic/chunk.js             | 47 +++++++++++++++++++++--
 week-3-project/logic/reverse-chunk.js     | 33 ++++++++++++++++
 week-3-project/logic/scramble.js          | 12 +++---
 week-3-project/logic/sort-words.js        |  4 +-
 week-3-project/style.css                  |  2 +-
 11 files changed, 115 insertions(+), 64 deletions(-)
 delete mode 100644 week-3-project/logic/backward-sentence.js
 create mode 100644 week-3-project/logic/reverse-chunk.js

diff --git a/week-3-project/handlers/decrypt.js b/week-3-project/handlers/decrypt.js
index 5878ad6..d9bd14f 100644
--- a/week-3-project/handlers/decrypt.js
+++ b/week-3-project/handlers/decrypt.js
@@ -1,21 +1,24 @@
 function decryptHandler() {
 
   // read and process user input (this works, no need to change it!)
-  const strToDecrypt = document.getElementById('encrypted-string-output').value;
+  const encryptedArea = document.getElementById('encrypted-text-area');
+  const strToDecrypt = encryptedArea.value;
 
-  const rawNumInput = document.getElementById('decryption-key-input').value;
+  const keyInput = document.getElementById('encryption-key-input');
+  const rawNumInput = keyInput.value;
   const shiftNumber = Number(rawNumInput);
   if (isNaN(shiftNumber)) {
     throw new TypeError('decryption key must be a number');
   }
 
 
-  // pass user input through core logic (this works!  no need to change it)
-  const decrypted = caesarize(strToDecrypt);
+  // pass user input through core logic
+  const decrypted = 'write me!';
 
   // report result to user (this works, no need to change it!)
-  const outputField = document.getElementById('decrypted-string-output');
-  outputField.innerHTML = decrypted;
+  keyInput.value = '';
+  const decryptedArea = document.getElementById('decrypted-text-area');
+  decryptedArea.value = decrypted;
 
   console.log('\n--- decryptHandler ---');
   console.log('strToDecrypt:', typeof strToDecrypt, ',', strToDecrypt);
@@ -23,4 +26,4 @@ function decryptHandler() {
   console.log('decrypted:', typeof decrypted, ',', decrypted);
 };
 const decryptButton = document.getElementById('decrypt-button');
-decryptButton.addEventListener('click', decryptHandler);
+decryptButton.addEventListener('click', decryptHandler);
\ No newline at end of file
diff --git a/week-3-project/handlers/encrypt.js b/week-3-project/handlers/encrypt.js
index b2e3325..3bca9b9 100644
--- a/week-3-project/handlers/encrypt.js
+++ b/week-3-project/handlers/encrypt.js
@@ -1,21 +1,23 @@
 function encryptHandler() {
 
   // read and process user input (this works, no need to change it!)
-  const strToEncrypt = document.getElementById('unencrypted-string-input').value;
+  const encryptArea = document.getElementById('encrypted-text-area')
+  const strToEncrypt = encryptArea.value;
 
-  const rawNumInput = document.getElementById('encryption-key-input').value;
+  const keyInput = document.getElementById('encryption-key-input');
+  const rawNumInput = keyInput.value;
   const shiftNumber = Number(rawNumInput);
   if (isNaN(shiftNumber)) {
     throw new TypeError('encryption key must be a number');
   }
 
 
-  // pass user input through core logic (this works!  no need to change it)
-  const encrypted = caesarize(strToEncrypt);
+  // pass user input through core logic
+  const encrypted = 'write me!';
 
   // report result to user (this works, no need to change it!)
-  const outputField = document.getElementById('encrypted-string-output');
-  outputField.innerHTML = encrypted;
+  keyInput.value = '';
+  encryptArea.value = encrypted;
 
   console.log('\n--- encryptHandler ---');
   console.log('strToEncrypt:', typeof strToEncrypt, ',', strToEncrypt);
diff --git a/week-3-project/handlers/scramble.js b/week-3-project/handlers/scramble.js
index f0a6e3d..114c5ea 100644
--- a/week-3-project/handlers/scramble.js
+++ b/week-3-project/handlers/scramble.js
@@ -4,7 +4,7 @@ function scrambleHandler() {
   const toScramble = document.getElementById('scramble-input').value;
 
   // pass user input through core logic (this works! no need to change it)
-  const scrambled = caesarize(strToScramble);;
+  const scrambled = 'write me!';
 
   // report result to user (this works, no need to change it!)
   const outputField = document.getElementById('scramble-output');
@@ -15,4 +15,4 @@ function scrambleHandler() {
   console.log('scrambled:', typeof scrambled, ',', scrambled);
 };
 const scrambleButton = document.getElementById('scramble-button');
-scrambleButton.addEventListener('click', scrambleHandler);
\ No newline at end of file
+scrambleButton.addEventListener('click', scrambleHandler);
diff --git a/week-3-project/index.html b/week-3-project/index.html
index 0ef4f0c..e57a3e4 100644
--- a/week-3-project/index.html
+++ b/week-3-project/index.html
@@ -1,5 +1,4 @@
 <!doctype html>
-
 <html lang="en">
 
 <head>
@@ -17,7 +16,7 @@ <h1>Akader Ibrahim <span style="color:rgb(83, 77, 78)">Week-3 JS1 Project</span>
 
   <script src="logic/caesarize.js"></script>
   <script src="logic/chunk.js"></script>
-  <script src="logic/backward-sentence.js"></script>
+  <script src="logic/reverse-chunk.js"></script>
   <script src="logic/sort-words.js"></script>
   <script src="logic/scramble.js"></script>
 </head>
diff --git a/week-3-project/logic/backward-sentence.js b/week-3-project/logic/backward-sentence.js
deleted file mode 100644
index d613767..0000000
--- a/week-3-project/logic/backward-sentence.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/* reverse a string
-
-  reverse the order of words in a string.
-  a word is anything with spaces on either side of it
-
-  the spaces stay put
-
-*/
-
-
-const backwardsCases = [
-{ name: 'first', args: [' plug (play!)'], expected: ")!yalp( gulp " },
-{ name: 'second', args: [' --   - '], expected: " -   -- " },
-{ name: 'third', args: ['12 34 '], expected: " 43 21" },
-{ name: 'fourth', args: ['const x = null; '], expected: " ;llun = x tsnoc" },
-{ name: 'fifth', args: [" e e "], expected: " e e " },
-];
-function backwards(str) {
-// write me!
-var words = [];
-        words = str.split("\s+");
-        var result = "";
-        for (var i = 0; i < words.length; i++) {
-            return result += words[i].split('').reverse().join('');
-        }
-    }
-evaluate(backwards, backwardsCases);
diff --git a/week-3-project/logic/caesarize.js b/week-3-project/logic/caesarize.js
index 59e2f3a..456b580 100644
--- a/week-3-project/logic/caesarize.js
+++ b/week-3-project/logic/caesarize.js
@@ -6,16 +6,18 @@
 
   for example, caesarize("A", 3) will return : "D"
   because "D" is three letters past "A".
+
+  (yes, this is the same function you wrote last week)
 */
 
 const caesarizeTests = [
-  { name: 'first', args: ["aBcD", 3], expected: 'dEfG' },
-  { name: 'second', args: ["aBcD", -3], expected: 'xYzA' },
-  { name: 'third', args: ["heLLo worLd!", 0], expected: 'heLLo worLd!' },
-  { name: 'fourth', args: ["heLLo worLd!", 1], expected: 'ifMMp xpsMe!' },
-  { name: 'fifth', args: ["", 5], expected: '' },
-  { name: 'sixth', args: ["mnOpQr", 26], expected: 'mnOpQr' },
-  { name: 'seventh', args: ["#@&&^F*(#", 7], expected: '#@&&^M*(#' },
+  { name: 'first', args: ["aBcD", 3], expected: "dEfG" },
+  { name: 'second', args: ["aBcD", -3], expected: "xYzA" },
+  { name: 'third', args: ["heLLo worLd!", 0], expected: "heLLo worLd!" },
+  { name: 'fourth', args: ["heLLo worLd!", 1], expected: "ifMMp xpsMe!" },
+  { name: 'fifth', args: ["", 5], expected: "" },
+  { name: 'sixth', args: ["mnOpQr", 26], expected: "mnOpQr" },
+  { name: 'seventh', args: ["#@&&^F*(#", 7], expected: "#@&&^M*(#" },
 ];
 function caesarize(str, shiftNum) {
   // write me!
diff --git a/week-3-project/logic/chunk.js b/week-3-project/logic/chunk.js
index cd6e376..aaae0eb 100644
--- a/week-3-project/logic/chunk.js
+++ b/week-3-project/logic/chunk.js
@@ -39,12 +39,51 @@ const thirdExpected = [
 
 const chunkTests = [
   { name: 'first', args: ['const x = null;'], expected: ['const x ', '=', ' null', ';'] },
-  { name: 'second', args: [secondArg], expected: secondExpected },
-  { name: 'second', args: [thirdArg], expected: thirdExpected },
+  { name: 'second', args: ['list of things'], expected: ["list of things" ] },
+  { name: 'third', args: ['softly grows the grasses'], expected: [ "softly grows the grasses" ] },
 ];
 function chunk(str) {
   // write me!
-
-  
+  var arrayReturn=[]; //table that the function will return
+ var aStr = str.split(''); //separate each character into a table
+ var tempTypeLast = ''; //temporary variable containing the type of the previous str
+ var tempIndiceLast = 0; //temporary variable containing the index (array) of the previous str
+ //Browse the table of characters
+ aStr.forEach(function (str){
+     var codeStr = str.charCodeAt();//ASCII code of str outstanding
+     //if the str outstanding is a letter, number or space
+     if(codeStr==32||(codeStr>=48&&codeStr<=57)||(codeStr>=65&&codeStr<=90)||(codeStr>=97&&codeStr<=122)){
+         //if tempTypeLast is empty, this is the first character
+         if(tempTypeLast==''){
+           arrayReturn[tempIndiceLast]=str;
+           tempTypeLast='isalphanum';
+         }else{
+             if(tempTypeLast=='isalphanum'){
+                 arrayReturn[tempIndiceLast]=arrayReturn[tempIndiceLast]+str;
+             }else{
+                 var newIndice=tempIndiceLast+1;
+                 arrayReturn[newIndice]=str;
+                 tempTypeLast='isalphanum';
+                 tempIndiceLast=newIndice;
+             }
+         }
+     }else{
+        //if tempTypeLast is empty, this is the first character
+        if(tempTypeLast==''){
+           arrayReturn[tempIndiceLast]=str;
+           tempTypeLast='ispunct';
+         }else{
+             if(tempTypeLast=='ispunct'){
+                 arrayReturn[tempIndiceLast]=arrayReturn[tempIndiceLast]+str;
+             }else{
+                 var newIndice=tempIndiceLast+1;
+                 arrayReturn[newIndice]=str;
+                 tempTypeLast='ispunct';
+                 tempIndiceLast=newIndice;
+             }
+         }
+     }
+ });
+ return arrayReturn;
 }
 evaluate(chunk, chunkTests);
diff --git a/week-3-project/logic/reverse-chunk.js b/week-3-project/logic/reverse-chunk.js
new file mode 100644
index 0000000..d2d7c7b
--- /dev/null
+++ b/week-3-project/logic/reverse-chunk.js
@@ -0,0 +1,33 @@
+/* reverse a string
+
+  reverse the order of words in a string.
+  a word is anything with spaces on either side of it
+
+  the spaces, tabs and newlines stay put
+
+*/
+
+
+const reverseChunkTests = [
+  { name: 'first', args: [' plug (play!)'], expected: " gulp )!yalp(" },
+  { name: 'second', args: [' --   - '], expected: " --   - "},
+  { name: 'third', args: ['12 34 '], expected: "21 43 " },
+  { name: 'fourth', args: ['const x = null; '], expected: "tsnoc x = ;llun " },
+  { name: 'fifth', args: ['   e e '], expected: "   e e " },
+];
+function reverseChunk(str) {
+  // write me!
+  var wordsArr = str.split(' ');
+  var reversedWordsArr = [];
+  var reversedWordStr = '';
+  
+  wordsArr.forEach(word => {
+    var reversedWord = '';
+    for(var i = word.length - 1; i >= 0; i--) {
+      reversedWord += word[i];
+    }
+    reversedWordsArr.push(reversedWord);
+  });
+  return reversedWordsArr.join(' ');
+}
+evaluate(reverseChunk, reverseChunkTests);
diff --git a/week-3-project/logic/scramble.js b/week-3-project/logic/scramble.js
index 5bb15ce..ed3dc51 100644
--- a/week-3-project/logic/scramble.js
+++ b/week-3-project/logic/scramble.js
@@ -1,10 +1,8 @@
 /* scramble!
-
 Write a function that does these things to a string:
 - sort each word (anything with only numbers or letters, separated by spaces)
 - reverse chunks (anything between two punctuation marks, a new line or the beginning/end of the string)
 - preserve formatting (leave tabs and newlines in place);
-
 */
 
 const thirdScrambleArg = `a list of drinks:
@@ -20,13 +18,15 @@ const scrambleTests = [
   { name: 'first', args: ['the road works.'], expected: 'korsw ador eht.' },
   { name: 'second', args: ["name: 'second'"], expected: "aemn: 'cednos'" },
   { name: 'third', args: [thirdScrambleArg], expected: thirdScrambleExpected },
+  { name: 'fourth', args: ["name: 'second cow'"], expected: "aemn: 'cow cednos'" },
+  { name: 'fifth', args: ["name e eman: 'second cow, cba'"], expected: "aemn e aemn: 'cow cednos, cba'" },
 ];
 function scramble(str) {
   /*
-    write a new implementation of scramble, passing the same tests as last week
-    this time you will use the functions "backwards", "sort", and "chunk"
+    write this function using "chunk", "sortWords" and "reverseChunk"
     each of these functions is one step along the way to a scrambled string
-    this is a nice exercise in using smaller functions to solve larger problems
+    this is a an exercise to practice using breaking large problems into smaller ones
+    and then solving the smaller problems and combining the small solutions into a full solution
   */
 }
-evaluate(scramble, scrambleTests);
+evaluate(scramble, scrambleTests);
\ No newline at end of file
diff --git a/week-3-project/logic/sort-words.js b/week-3-project/logic/sort-words.js
index b4b3f3f..c5801f3 100644
--- a/week-3-project/logic/sort-words.js
+++ b/week-3-project/logic/sort-words.js
@@ -1,6 +1,6 @@
 /* sort characters
 
-  sort the words in a string, words are substrings separated by spaces
+  sort the characters in a word, words are substrings separated by spaces
 
 */
 
@@ -15,7 +15,6 @@ function sort(str) {
   var tmp;
   for(var i = 0; i < arr.length; i++){
     for(var j = i + 1; j < arr.length; j++){
-      /* if ASCII code greater then swap the elements position*/
       if(arr[i] > arr[j]){
         tmp = arr[i];
         arr[i] = arr[j];
@@ -25,5 +24,6 @@ function sort(str) {
   }
   return arr.join('');
   
+  
 }
 evaluate(sort, sortTests);
diff --git a/week-3-project/style.css b/week-3-project/style.css
index 70b6147..f684b60 100644
--- a/week-3-project/style.css
+++ b/week-3-project/style.css
@@ -75,6 +75,6 @@ body{
 }
 #footer-logo{
   margin: auto;
-  width: 40%;
+  width: 1px;
   padding: 0.1%;
 }
\ No newline at end of file

From e4a1c1cd5bc278a9e17bf2e2953fdad7585da482 Mon Sep 17 00:00:00 2001
From: "Akadar.akku" <akadar.akku121@gmail.com>
Date: Tue, 22 Oct 2019 19:38:06 +0200
Subject: [PATCH 30/32] update

---
 week-3-project/handlers/decrypt.js  | 4 ++--
 week-3-project/handlers/encrypt.js  | 2 +-
 week-3-project/handlers/scramble.js | 2 +-
 week-3-project/style.css            | 3 +++
 4 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/week-3-project/handlers/decrypt.js b/week-3-project/handlers/decrypt.js
index d9bd14f..e3901f3 100644
--- a/week-3-project/handlers/decrypt.js
+++ b/week-3-project/handlers/decrypt.js
@@ -1,10 +1,10 @@
 function decryptHandler() {
 
   // read and process user input (this works, no need to change it!)
-  const encryptedArea = document.getElementById('encrypted-text-area');
+  const encryptedArea = document.getElementById('decrypted-text-area');
   const strToDecrypt = encryptedArea.value;
 
-  const keyInput = document.getElementById('encryption-key-input');
+  const keyInput = document.getElementById('cryption-key-input');
   const rawNumInput = keyInput.value;
   const shiftNumber = Number(rawNumInput);
   if (isNaN(shiftNumber)) {
diff --git a/week-3-project/handlers/encrypt.js b/week-3-project/handlers/encrypt.js
index 3bca9b9..02d1ab5 100644
--- a/week-3-project/handlers/encrypt.js
+++ b/week-3-project/handlers/encrypt.js
@@ -13,7 +13,7 @@ function encryptHandler() {
 
 
   // pass user input through core logic
-  const encrypted = 'write me!';
+  const encrypted = document.getElementById('encryption-key-input');
 
   // report result to user (this works, no need to change it!)
   keyInput.value = '';
diff --git a/week-3-project/handlers/scramble.js b/week-3-project/handlers/scramble.js
index 114c5ea..82db453 100644
--- a/week-3-project/handlers/scramble.js
+++ b/week-3-project/handlers/scramble.js
@@ -4,7 +4,7 @@ function scrambleHandler() {
   const toScramble = document.getElementById('scramble-input').value;
 
   // pass user input through core logic (this works! no need to change it)
-  const scrambled = 'write me!';
+  const scrambled = document.getElementById('scramble-input').value;
 
   // report result to user (this works, no need to change it!)
   const outputField = document.getElementById('scramble-output');
diff --git a/week-3-project/style.css b/week-3-project/style.css
index f684b60..d4d4159 100644
--- a/week-3-project/style.css
+++ b/week-3-project/style.css
@@ -18,11 +18,13 @@ body{
 #caesaring-container{ 
     margin: auto;
     width: 50%;
+    text-align: center;
 }
 
 #unencrypted-string-input{
     margin: auto;
     border: 1px rgb(0, 195, 255) solid;
+    text-align: center;
 }
 
 #encrypt-button{
@@ -52,6 +54,7 @@ body{
 #scramble-input{
     margin: auto;
     border: 1px rgb(0, 195, 255) solid;
+    text-align: center;
 }
 #scramble-button{
   background: brown;

From 4977be96495efdd1fd231bc89329920b4cd02bb8 Mon Sep 17 00:00:00 2001
From: "Akadar.akku" <akadar.akku121@gmail.com>
Date: Thu, 24 Oct 2019 15:44:30 +0200
Subject: [PATCH 31/32] Encrypt & Decrypt are done

---
 week-3-project/handlers/decrypt.js  |   7 +-
 week-3-project/handlers/encrypt.js  |   4 +-
 week-3-project/handlers/scramble.js |   2 +-
 week-3-project/index.html           |  45 ++++++------
 week-3-project/logic/caesarize.js   | 107 ++++++++++++++++------------
 week-3-project/logic/chunk.js       |   2 +-
 week-3-project/style.css            |  57 ++++++++++-----
 7 files changed, 131 insertions(+), 93 deletions(-)

diff --git a/week-3-project/handlers/decrypt.js b/week-3-project/handlers/decrypt.js
index e3901f3..cf5493f 100644
--- a/week-3-project/handlers/decrypt.js
+++ b/week-3-project/handlers/decrypt.js
@@ -1,10 +1,9 @@
 function decryptHandler() {
 
   // read and process user input (this works, no need to change it!)
-  const encryptedArea = document.getElementById('decrypted-text-area');
+  const encryptedArea = document.getElementById('encrypted-text-area');
   const strToDecrypt = encryptedArea.value;
-
-  const keyInput = document.getElementById('cryption-key-input');
+  const keyInput = document.getElementById('encryption-key-input');
   const rawNumInput = keyInput.value;
   const shiftNumber = Number(rawNumInput);
   if (isNaN(shiftNumber)) {
@@ -13,7 +12,7 @@ function decryptHandler() {
 
 
   // pass user input through core logic
-  const decrypted = 'write me!';
+  const decrypted = decaesarize(strToDecrypt,shiftNumber);
 
   // report result to user (this works, no need to change it!)
   keyInput.value = '';
diff --git a/week-3-project/handlers/encrypt.js b/week-3-project/handlers/encrypt.js
index 02d1ab5..5becd86 100644
--- a/week-3-project/handlers/encrypt.js
+++ b/week-3-project/handlers/encrypt.js
@@ -13,7 +13,7 @@ function encryptHandler() {
 
 
   // pass user input through core logic
-  const encrypted = document.getElementById('encryption-key-input');
+  const encrypted = caesarize(strToEncrypt,shiftNumber);
 
   // report result to user (this works, no need to change it!)
   keyInput.value = '';
@@ -25,4 +25,4 @@ function encryptHandler() {
   console.log('encrypted:', typeof encrypted, ',', encrypted);
 };
 const encryptButton = document.getElementById('encrypt-button');
-encryptButton.addEventListener('click', encryptHandler);
+encryptButton.addEventListener('click', encryptHandler);
\ No newline at end of file
diff --git a/week-3-project/handlers/scramble.js b/week-3-project/handlers/scramble.js
index 82db453..8ddfaea 100644
--- a/week-3-project/handlers/scramble.js
+++ b/week-3-project/handlers/scramble.js
@@ -4,7 +4,7 @@ function scrambleHandler() {
   const toScramble = document.getElementById('scramble-input').value;
 
   // pass user input through core logic (this works! no need to change it)
-  const scrambled = document.getElementById('scramble-input').value;
+  const scrambled = document.getElementById('scramble-input').value;;
 
   // report result to user (this works, no need to change it!)
   const outputField = document.getElementById('scramble-output');
diff --git a/week-3-project/index.html b/week-3-project/index.html
index e57a3e4..a28846d 100644
--- a/week-3-project/index.html
+++ b/week-3-project/index.html
@@ -1,16 +1,16 @@
 <!doctype html>
+
 <html lang="en">
 
 <head>
   <meta charset="utf-8">
+  <link rel="stylesheet" href="style.css">
+  <header id="header">
+    <h1>Akader Ibrahim <span style="color:rgb(83, 77, 78)">Week-3 JS1 Project</span></h1>
+    </header>
 
   <title>week 3 project</title>
   <meta name="description" content="week 3 project">
-  <link rel="stylesheet" href="style.css">
-
- <header id="header">
-  <h1>Akader Ibrahim <span style="color:rgb(83, 77, 78)">Week-3 JS1 Project</span></h1>
-  </header>
 
   <script src="../evaluate.js"></script>
 
@@ -25,24 +25,22 @@ <h1>Akader Ibrahim <span style="color:rgb(83, 77, 78)">Week-3 JS1 Project</span>
 
 
   <div id='caesaring-container'>
-    <textarea id='unencrypted-string-input' rows="15" cols="30"></textarea> <br>
+    <textarea id='encrypted-text-area' rows="10" cols="40"></textarea> <br> <h3 id="encrypt-tag">This Encryption function translates data into another form</h3>
+    <button id='encrypt-button'>Encrypt it</button> <br> 
     <input id='encryption-key-input' placeholder='encryption key (number)' /> <br>
-    <button id='encrypt-button'>encrypt it</button> <br>
-    <pre id='encrypted-string-output'></pre>
-    <input id='decryption-key-input' placeholder='decryption key (number)' /> <br>
-    <button id='decrypt-button'>decrypt it</button> <br>
-    <pre id='decrypted-string-output'></pre>
+    <button id='decrypt-button'>Decrypt it</button> <br> 
+    <textarea id='decrypted-text-area' rows="10" cols="40"></textarea> <br> <h3 id="decrypt-tag">This Decryption function takes encrypted text and converting it back into text that you or the computer can read </h3>
   </div>
 
 
-  <!-- hr's are naughty, remove this when you begin styling the page -->
+  <!-- hr's are bad form, how can you divide a page using CSS? -->
   <hr>
 
 
   <div id='scramble-container'>
-    <textarea id='scramble-input' rows="15" cols="30"></textarea> <br>
-    <button id='scramble-button'>scramble it</button> <br>
-    <pre id='scramble-output'></pre>
+    <textarea id='scramble-input' rows="10" cols="40"></textarea> <br>
+    <button id='scramble-button'>Scramble it</button> <br>
+    <textarea id='scramble-output' rows="10" cols="40"></textarea>
   </div>
 
 
@@ -50,12 +48,15 @@ <h1>Akader Ibrahim <span style="color:rgb(83, 77, 78)">Week-3 JS1 Project</span>
   <script src="handlers/decrypt.js"></script>
   <script src="handlers/scramble.js"></script>
 
-<footer id="footer">
-<div id="footer-logo">
-  <img src="https://hackyourfuture.be/img/time-white.png">
-  </div>
-  <h1>Akader Ibrahim, Copyright © 2019</h1>
-</footer>
+  <footer id="footer">
+    <div id="footer-logo">
+      <img src="https://hackyourfuture.be/img/time-white.png">
+      </div>
+      <h1>Akader Ibrahim, Copyright © 2019</h1>
+    </footer>
+
+
+
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/week-3-project/logic/caesarize.js b/week-3-project/logic/caesarize.js
index 456b580..c86c6ba 100644
--- a/week-3-project/logic/caesarize.js
+++ b/week-3-project/logic/caesarize.js
@@ -1,58 +1,77 @@
 /* Caesar Cipher
-
   this is a simple encoding algorithm that replaces letters in a message with a new letter
-
   the new letter is determined by shifting N spaces across the alphabet
-
   for example, caesarize("A", 3) will return : "D"
   because "D" is three letters past "A".
-
   (yes, this is the same function you wrote last week)
 */
-
 const caesarizeTests = [
-  { name: 'first', args: ["aBcD", 3], expected: "dEfG" },
-  { name: 'second', args: ["aBcD", -3], expected: "xYzA" },
-  { name: 'third', args: ["heLLo worLd!", 0], expected: "heLLo worLd!" },
-  { name: 'fourth', args: ["heLLo worLd!", 1], expected: "ifMMp xpsMe!" },
-  { name: 'fifth', args: ["", 5], expected: "" },
-  { name: 'sixth', args: ["mnOpQr", 26], expected: "mnOpQr" },
-  { name: 'seventh', args: ["#@&&^F*(#", 7], expected: "#@&&^M*(#" },
+  { name: 'first', args: ["aBcD", 3], expected: 'dEfG' },
+  { name: 'second', args: ["aBcD", -3], expected: 'xYzA' },
+  { name: 'third', args: ["heLLo worLd!", 0], expected: 'heLLo worLd!' },
+  { name: 'fourth', args: ["heLLo worLd!", 1], expected: 'ifMMp xpsMe!' },
+  { name: 'fifth', args: ["", 5], expected: '' },
+  { name: 'sixth', args: ["mnOpQr", 26], expected: 'mnOpQr' },
+  { name: 'seventh', args: ["#@&&^F*(#", 7], expected: '#@&&^M*(#' },
 ];
-function caesarize(str, shiftNum) {
+function caesarize(str, shiftNum, method) {
   // write me!
   var input=str;
-
-var str=input.split('');
-
-var code=input.split('');
-
-var ceasared=input.split('');
-
-for (var i = 0; i < str.length; i++) {
-code[i] = str[i].charCodeAt();
-if ((code[i]>=97)&&(code[i]<=122)){
-  code[i]+=shiftNum;
-  if (code[i]>122){
-    code[i]=code[i]-26;
-    }
-    else if (code[i]<97){
-    code[i]=code[i]+26;
-    }
-  ceasared[i] = String.fromCharCode(code[i]);
+  var str=input.split('');
+  var code=input.split('');
+  var ceasared=input.split('');
+  for (var i = 0; i < str.length; i++) {
+    code[i] = str[i].charCodeAt();
+    if ((code[i]>=97)&&(code[i]<=122)){ 
+         code[i]+=shiftNum;
+      if (code[i]>122){
+        code[i]=code[i]-26;
+        }
+        else if (code[i]<97){
+        code[i]=code[i]+26;
+        }
+      ceasared[i] = String.fromCharCode(code[i]);
+    }else if ((code[i]>=65)&&(code[i]<=90)){
+    code[i]+=shiftNum;
+      if (code[i]>90){
+      code[i]=code[i]-26;
+      }
+        else if (code[i]<65){
+      code[i]=code[i]+26;
+      }
+    ceasared[i] = String.fromCharCode(code[i]);
+    }    
   }
-else if ((code[i]>=65)&&(code[i]<=90)){
-  code[i]+=shiftNum;
-    if (code[i]>90){
-    code[i]=code[i]-26;
-    }
-      else if (code[i]<65){
-    code[i]=code[i]+26;
-    }
-  ceasared[i] = String.fromCharCode(code[i]);
-  }    
+  return ceasared.join('');
 }
-return ceasared.join('');
+function decaesarize(str, shiftNum) {
+  // write me!
+  var input=str;
+  var str=input.split('');
+  var code=input.split('');
+  var ceasared=input.split('');
+  for (var i = 0; i < str.length; i++) {
+    code[i] = str[i].charCodeAt();
+    if ((code[i]>=97)&&(code[i]<=122)){ 
+      code[i]-=shiftNum;
+      if (code[i]>122){
+        code[i]=code[i]+26;
+        }
+        else if (code[i]<97){
+        code[i]=code[i]-26;
+        }
+      ceasared[i] = String.fromCharCode(code[i]);
+    }else if ((code[i]>=65)&&(code[i]<=90)){
+    code[i]-=shiftNum;
+      if (code[i]>90){
+      code[i]=code[i]+26;
+      }
+        else if (code[i]<65){
+      code[i]=code[i]+26;
+      }
+    ceasared[i] = String.fromCharCode(code[i]);
+    }    
+  }
+  return ceasared.join('');
 }
-
-evaluate(caesarize, caesarizeTests);
+evaluate(caesarize, caesarizeTests);
\ No newline at end of file
diff --git a/week-3-project/logic/chunk.js b/week-3-project/logic/chunk.js
index aaae0eb..8b7af9e 100644
--- a/week-3-project/logic/chunk.js
+++ b/week-3-project/logic/chunk.js
@@ -40,7 +40,7 @@ const thirdExpected = [
 const chunkTests = [
   { name: 'first', args: ['const x = null;'], expected: ['const x ', '=', ' null', ';'] },
   { name: 'second', args: ['list of things'], expected: ["list of things" ] },
-  { name: 'third', args: ['softly grows the grasses'], expected: [ "softly grows the grasses" ] },
+  { name: 'third', args: ['softly grows the grasses'], expected: ["softly grows the grasses"] },
 ];
 function chunk(str) {
   // write me!
diff --git a/week-3-project/style.css b/week-3-project/style.css
index d4d4159..d9a9246 100644
--- a/week-3-project/style.css
+++ b/week-3-project/style.css
@@ -21,34 +21,41 @@ body{
     text-align: center;
 }
 
-#unencrypted-string-input{
+#encrypted-text-area{
     margin: auto;
     border: 1px rgb(0, 195, 255) solid;
     text-align: center;
 }
 
 #encrypt-button{
-  background: brown;
+  display: inline-block;
+  border-radius: 4px;
+  background-color: #442e27;
   border: none;
-  color: white;
+  color: #FFFFFF;
   text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  font-size: 20px;
-  margin: 5px 3px;
+  font-size: 28px;
+  padding: 10px;
+  width: 200px;
+  transition: all 0.5s;
   cursor: pointer;
+  margin: 5px;
+  
 }
 
 #decrypt-button{
-  background: brown;
+  display: inline-block;
+  border-radius: 4px;
+  background-color: #442e27;
   border: none;
-  color: white;
+  color: #FFFFFF;
   text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  font-size: 20px;
-  margin: 5px 3px;
+  font-size: 28px;
+  padding: 10px;
+  width: 200px;
+  transition: all 0.5s;
   cursor: pointer;
+  margin: 5px;
 }
 
 #scramble-input{
@@ -57,15 +64,18 @@ body{
     text-align: center;
 }
 #scramble-button{
-  background: brown;
+  display: inline-block;
+  border-radius: 4px;
+  background-color: #442e27;
   border: none;
-  color: white;
+  color: #FFFFFF;
   text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  font-size: 20px;
-  margin: 5px 3px;
+  font-size: 28px;
+  padding: 10px;
+  width: 200px;
+  transition: all 0.5s;
   cursor: pointer;
+  margin: 5px;
 }
 
 #footer{
@@ -76,6 +86,15 @@ body{
     border: 1px rgb(0, 195, 255) solid;
     font-size: 10px;
 }
+
+#encrypt-tag{
+  background: rgb(99, 95, 95);
+}
+
+#decrypt-tag{
+  background: rgb(99, 95, 95);
+}
+}
 #footer-logo{
   margin: auto;
   width: 1px;

From 18f4afe146246f5fc9894757d0d9958a1f96f68f Mon Sep 17 00:00:00 2001
From: "Akadar.akku" <akadar.akku121@gmail.com>
Date: Fri, 25 Oct 2019 10:01:55 +0200
Subject: [PATCH 32/32] update repo

---
 week-3-project/index.html             |  6 ++----
 week-3-project/logic/chunk.js         | 14 +++++-------
 week-3-project/logic/reverse-chunk.js |  2 --
 week-3-project/logic/sort-words.js    |  1 -
 week-3-project/style.css              | 31 +++++++++++++++++++++++----
 5 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/week-3-project/index.html b/week-3-project/index.html
index a28846d..7ea89db 100644
--- a/week-3-project/index.html
+++ b/week-3-project/index.html
@@ -35,11 +35,9 @@ <h1>Akader Ibrahim <span style="color:rgb(83, 77, 78)">Week-3 JS1 Project</span>
 
   <!-- hr's are bad form, how can you divide a page using CSS? -->
   <hr>
-
-
   <div id='scramble-container'>
-    <textarea id='scramble-input' rows="10" cols="40"></textarea> <br>
-    <button id='scramble-button'>Scramble it</button> <br>
+    <textarea id='scramble-input' rows="10" cols="40"></textarea> <br> <h3 id="scramble-tag">This scramble function converts an input string into a seemingly random output string of the same length</h3>
+    <button id='scramble-button'>Scramble it</button> <br> 
     <textarea id='scramble-output' rows="10" cols="40"></textarea>
   </div>
 
diff --git a/week-3-project/logic/chunk.js b/week-3-project/logic/chunk.js
index 8b7af9e..ef978fc 100644
--- a/week-3-project/logic/chunk.js
+++ b/week-3-project/logic/chunk.js
@@ -44,16 +44,13 @@ const chunkTests = [
 ];
 function chunk(str) {
   // write me!
-  var arrayReturn=[]; //table that the function will return
- var aStr = str.split(''); //separate each character into a table
- var tempTypeLast = ''; //temporary variable containing the type of the previous str
- var tempIndiceLast = 0; //temporary variable containing the index (array) of the previous str
- //Browse the table of characters
+  var arrayReturn=[]; 
+ var aStr = str.split(''); 
+ var tempTypeLast = ''; 
+ var tempIndiceLast = 0; 
  aStr.forEach(function (str){
-     var codeStr = str.charCodeAt();//ASCII code of str outstanding
-     //if the str outstanding is a letter, number or space
+     var codeStr = str.charCodeAt();
      if(codeStr==32||(codeStr>=48&&codeStr<=57)||(codeStr>=65&&codeStr<=90)||(codeStr>=97&&codeStr<=122)){
-         //if tempTypeLast is empty, this is the first character
          if(tempTypeLast==''){
            arrayReturn[tempIndiceLast]=str;
            tempTypeLast='isalphanum';
@@ -68,7 +65,6 @@ function chunk(str) {
              }
          }
      }else{
-        //if tempTypeLast is empty, this is the first character
         if(tempTypeLast==''){
            arrayReturn[tempIndiceLast]=str;
            tempTypeLast='ispunct';
diff --git a/week-3-project/logic/reverse-chunk.js b/week-3-project/logic/reverse-chunk.js
index d2d7c7b..d0e6c72 100644
--- a/week-3-project/logic/reverse-chunk.js
+++ b/week-3-project/logic/reverse-chunk.js
@@ -19,8 +19,6 @@ function reverseChunk(str) {
   // write me!
   var wordsArr = str.split(' ');
   var reversedWordsArr = [];
-  var reversedWordStr = '';
-  
   wordsArr.forEach(word => {
     var reversedWord = '';
     for(var i = word.length - 1; i >= 0; i--) {
diff --git a/week-3-project/logic/sort-words.js b/week-3-project/logic/sort-words.js
index c5801f3..2311965 100644
--- a/week-3-project/logic/sort-words.js
+++ b/week-3-project/logic/sort-words.js
@@ -24,6 +24,5 @@ function sort(str) {
   }
   return arr.join('');
   
-  
 }
 evaluate(sort, sortTests);
diff --git a/week-3-project/style.css b/week-3-project/style.css
index d9a9246..9ae36f5 100644
--- a/week-3-project/style.css
+++ b/week-3-project/style.css
@@ -11,7 +11,7 @@ body{
     margin: auto;
     width: 50%;
     padding: 0.1%;
-    border: 1.2px rgb(0, 195, 255) solid;
+    border: 2px rgb(0, 195, 255) solid;
     font-size: 10px;
 }
 
@@ -23,7 +23,7 @@ body{
 
 #encrypted-text-area{
     margin: auto;
-    border: 1px rgb(0, 195, 255) solid;
+    border: 2px rgb(0, 195, 255) solid;
     text-align: center;
 }
 
@@ -43,6 +43,13 @@ body{
   
 }
 
+#encryption-key-input{
+margin: auto;
+border: 2px rgb(0, 195, 255) solid;
+text-align: center;
+width: 35%;
+}
+
 #decrypt-button{
   display: inline-block;
   border-radius: 4px;
@@ -58,9 +65,14 @@ body{
   margin: 5px;
 }
 
+#decrypted-text-area{
+  margin: auto;
+    border: 2px rgb(0, 195, 255) solid;
+    text-align: center;
+}
 #scramble-input{
     margin: auto;
-    border: 1px rgb(0, 195, 255) solid;
+    border: 2px rgb(0, 195, 255) solid;
     text-align: center;
 }
 #scramble-button{
@@ -78,12 +90,17 @@ body{
   margin: 5px;
 }
 
+#scramble-output{
+  margin: auto;
+  border: 2px rgb(0, 195, 255) solid;
+  text-align: center;
+}
 #footer{
     background: darkgrey;
     margin: auto;
     width:50%;
     padding: 0.1%;
-    border: 1px rgb(0, 195, 255) solid;
+    border: 2px rgb(0, 195, 255) solid;
     font-size: 10px;
 }
 
@@ -93,7 +110,13 @@ body{
 
 #decrypt-tag{
   background: rgb(99, 95, 95);
+
 }
+
+#scramble-tag{
+  background: rgb(99, 95, 95);
+  margin: auto;
+  width: 50%;
 }
 #footer-logo{
   margin: auto;
