From a6a1bfd2951812e2ee11333547cefb0226cb45ad Mon Sep 17 00:00:00 2001 From: brq1 Date: Thu, 4 Apr 2019 12:21:35 +0200 Subject: [PATCH 1/6] edit: change array built in .js to user input form. --- Readme.md | 14 ++++++++++++ src/index.html | 31 +++++++++++++++++++++++++ src/script.js | 61 ++++++++++++++++++++++++++++++++++++++++++++++++++ src/style.css | 52 ++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 158 insertions(+) create mode 100644 Readme.md create mode 100644 src/index.html create mode 100644 src/script.js create mode 100644 src/style.css diff --git a/Readme.md b/Readme.md new file mode 100644 index 0000000..f1750ad --- /dev/null +++ b/Readme.md @@ -0,0 +1,14 @@ +# Sorter version 2 + +This is simple project with sorting data: alphabetically, with length text and randomly, with data input from user. + +## Installation + +https://brq1.github.io/Sorter/ + +## Usage + +Enter a data in textarea. Text must be split of coma ( , ). +Next you select function to sort. + + diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..22eb29a --- /dev/null +++ b/src/index.html @@ -0,0 +1,31 @@ + + + + + + Sorting + + + + + +
+ +
+ +
+ + +
+ + + \ No newline at end of file diff --git a/src/script.js b/src/script.js new file mode 100644 index 0000000..131b39e --- /dev/null +++ b/src/script.js @@ -0,0 +1,61 @@ +var StringText = document.getElementById("textArea").value; +var Words = [] +Words = StringText.split(","); + +var azEl = document.getElementById("AZ"); +var listEl = document.getElementById("List"); + +function sortInTurn(){ + + listEl.innerHTML = Words.join("
"); +} + +function sortAZ(){ + + Words.sort(); + + if (azEl.value == "Sort A to Z") { + azEl.value = "Sort Z to A"; + } else { + Words.reverse(); + azEl.value = "Sort A to Z"; + } + listEl.innerHTML = Words.join("
"); +} + +function sortLtext(){ + + var temp; + for (var i=0; i < Words.length; i++){ + + for (var j=1; j < Words.length; j++){ + if (Words[j-1].length > Words[j].length){ + temp = Words[j]; + Words[j] = Words[j-1]; + Words[j-1] = temp; + } + } + } + listEl.innerHTML = Words.join("
"); +} + +function Random(){ + var n = Words.length, temp, x; + for (i=0; i < n; i++ ) { + x = Math.floor(Math.random()*n); + temp = Words [i]; + Words[i] = Words[x]; + Words[x] = temp; + } + + listEl.innerHTML = Words.join("
"); +} + +function test (){ + + console.log (Words[0]); + console.log (Words[1]); + console.log (Words[2]); + console.log (Words[3]); + console.log (Words[4]); +} \ No newline at end of file diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..b860fa9 --- /dev/null +++ b/src/style.css @@ -0,0 +1,52 @@ +body { +background-color: #202020; +color: white; +font-family: 'Indie Flower', cursive; + +} +.button { + width: 200px; + font-size: 24px; + background-color: rgb(235, 212, 7); +} + +#all{ + width: 600px; + margin-left: auto; + margin-right: auto; + +} + +#Header { + padding: 5px; + font-size: 52px; + color: rgb(224, 196, 37); + + +} + +#List{ + width: 380px; + padding: 10px; + float: left; + font-size: 24px; +} +#Menu{ + width: 180px; + padding: 10px; + float: right; + +} + +#textarea { + padding: 5px; + line-height: 1.5; + border-radius: 10px; + border: 2px solid #fff; + box-shadow: 2px 2px 2px #999; +} + +.label { + display: block; + margin-bottom: 10px; +} \ No newline at end of file From 1a48d192d12e44306e89551186bc9c3baf355b9a Mon Sep 17 00:00:00 2001 From: brq1 Date: Thu, 4 Apr 2019 12:26:17 +0200 Subject: [PATCH 2/6] edit: change array built in .js to user input form. --- index.html | 26 ---------------------- script.js | 63 ------------------------------------------------------ style.css | 39 --------------------------------- 3 files changed, 128 deletions(-) delete mode 100644 index.html delete mode 100644 script.js delete mode 100644 style.css diff --git a/index.html b/index.html deleted file mode 100644 index d85bcdd..0000000 --- a/index.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - Sorting - - - - - -
- -
- -
- - -
- - \ No newline at end of file diff --git a/script.js b/script.js deleted file mode 100644 index 409e567..0000000 --- a/script.js +++ /dev/null @@ -1,63 +0,0 @@ -var Months = [ - "January", - "February", - "March", - "April", - "May", - "Juni", - "July", - "August", - "September", - "Oktober", - "November", - "December" -]; -var MonthsClone = Months.slice(0); - -function sortInTurn(){ - - document.getElementById("List").innerHTML = MonthsClone.join("
"); -} - -function sortAZ(){ - Months.sort(); - if (document.getElementById("AZ").value == "Sort A to Z") { - document.getElementById("AZ").value = "Sort Z to A"; - document.getElementById("List").innerHTML = Months.join("
"); - } - else{ - Months.reverse(); - document.getElementById("AZ").value = "Sort A to Z"; - document.getElementById("List").innerHTML = Months.join("
"); - } -} - -function sortLtext(){ - - var MlenghtText = []; - var temp; - for (var i=0; i < Months.length; i++){ - - - for (var j=1; j < Months.length; j++){ - if (Months[j-1].length > Months[j].length){ - temp = Months[j]; - Months[j] = Months[j-1]; - Months[j-1] = temp; - } - } - } - document.getElementById("List").innerHTML = Months.join("
"); -} - -function Random(){ - var n = Months.length, temp, x; - for (i=0; i < n; i++ ) { - x = Math.floor(Math.random()*n); - temp = Months [i]; - Months[i] = Months[x]; - Months[x] = temp; - } - - document.getElementById("List").innerHTML = Months.join("
"); -} diff --git a/style.css b/style.css deleted file mode 100644 index c6fc582..0000000 --- a/style.css +++ /dev/null @@ -1,39 +0,0 @@ -body { -background-color: #202020; -color: white; -font-family: 'Indie Flower', cursive; - -} -.button { - width: 200px; - font-size: 24px; - background-color: rgb(235, 212, 7); -} - -#all{ - width: 600px; - margin-left: auto; - margin-right: auto; - -} - -#Header { - padding: 5px; - font-size: 52px; - color: rgb(224, 196, 37); - - -} - -#List{ - width: 380px; - padding: 10px; - float: left; - font-size: 24px; -} -#Menu{ - width: 180px; - padding: 10px; - float: right; - -} \ No newline at end of file From 865c8cf0b943b0fa36e34be2d1bc7d16e148441b Mon Sep 17 00:00:00 2001 From: brq1 Date: Thu, 4 Apr 2019 13:39:39 +0200 Subject: [PATCH 3/6] add function takeWords() --- src/script.js | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/script.js b/src/script.js index 131b39e..b163774 100644 --- a/src/script.js +++ b/src/script.js @@ -1,17 +1,18 @@ -var StringText = document.getElementById("textArea").value; -var Words = [] -Words = StringText.split(","); - var azEl = document.getElementById("AZ"); var listEl = document.getElementById("List"); -function sortInTurn(){ +function takeWords(){ + var StringText = document.getElementById("textArea").value; + Words = StringText.split(","); +} +function sortInTurn(){ + takeWords(); listEl.innerHTML = Words.join("
"); } function sortAZ(){ - + takeWords(); Words.sort(); if (azEl.value == "Sort A to Z") { @@ -24,7 +25,7 @@ function sortAZ(){ } function sortLtext(){ - + takeWords(); var temp; for (var i=0; i < Words.length; i++){ @@ -40,6 +41,7 @@ function sortLtext(){ } function Random(){ + takeWords(); var n = Words.length, temp, x; for (i=0; i < n; i++ ) { x = Math.floor(Math.random()*n); @@ -52,10 +54,8 @@ function Random(){ } function test (){ + alert (takeWords()); + alert (Words[0]); + alert (Words[1]); - console.log (Words[0]); - console.log (Words[1]); - console.log (Words[2]); - console.log (Words[3]); - console.log (Words[4]); } \ No newline at end of file From 63d3b9bcf00a0bcddcfeedb1ed062a0317b60e7f Mon Sep 17 00:00:00 2001 From: brq1 Date: Thu, 4 Apr 2019 15:26:37 +0200 Subject: [PATCH 4/6] edit: trim() in f takeWords --- src/script.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/script.js b/src/script.js index b163774..9566501 100644 --- a/src/script.js +++ b/src/script.js @@ -4,6 +4,10 @@ var listEl = document.getElementById("List"); function takeWords(){ var StringText = document.getElementById("textArea").value; Words = StringText.split(","); + for (i=0 ; i< Words.length; i++){ + Words[i].trim(); + } + //Words.trim(); } function sortInTurn(){ @@ -13,6 +17,7 @@ function sortInTurn(){ function sortAZ(){ takeWords(); + Words.sort(); if (azEl.value == "Sort A to Z") { @@ -53,9 +58,8 @@ function Random(){ listEl.innerHTML = Words.join("
"); } -function test (){ - alert (takeWords()); - alert (Words[0]); - alert (Words[1]); +/*function test (){ + //alert (takeWords()); + alert (Words[4].trim()); -} \ No newline at end of file +}*/ \ No newline at end of file From b236471a363e1de57112e620a03abb18cada5e07 Mon Sep 17 00:00:00 2001 From: brq1 Date: Thu, 4 Apr 2019 15:35:26 +0200 Subject: [PATCH 5/6] edit --- src/index.html | 31 ------------------------ src/script.js | 65 -------------------------------------------------- src/style.css | 52 ---------------------------------------- 3 files changed, 148 deletions(-) delete mode 100644 src/index.html delete mode 100644 src/script.js delete mode 100644 src/style.css diff --git a/src/index.html b/src/index.html deleted file mode 100644 index 22eb29a..0000000 --- a/src/index.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - Sorting - - - - - -
- -
- -
- - -
- - - \ No newline at end of file diff --git a/src/script.js b/src/script.js deleted file mode 100644 index 9566501..0000000 --- a/src/script.js +++ /dev/null @@ -1,65 +0,0 @@ -var azEl = document.getElementById("AZ"); -var listEl = document.getElementById("List"); - -function takeWords(){ - var StringText = document.getElementById("textArea").value; - Words = StringText.split(","); - for (i=0 ; i< Words.length; i++){ - Words[i].trim(); - } - //Words.trim(); -} - -function sortInTurn(){ - takeWords(); - listEl.innerHTML = Words.join("
"); -} - -function sortAZ(){ - takeWords(); - - Words.sort(); - - if (azEl.value == "Sort A to Z") { - azEl.value = "Sort Z to A"; - } else { - Words.reverse(); - azEl.value = "Sort A to Z"; - } - listEl.innerHTML = Words.join("
"); -} - -function sortLtext(){ - takeWords(); - var temp; - for (var i=0; i < Words.length; i++){ - - for (var j=1; j < Words.length; j++){ - if (Words[j-1].length > Words[j].length){ - temp = Words[j]; - Words[j] = Words[j-1]; - Words[j-1] = temp; - } - } - } - listEl.innerHTML = Words.join("
"); -} - -function Random(){ - takeWords(); - var n = Words.length, temp, x; - for (i=0; i < n; i++ ) { - x = Math.floor(Math.random()*n); - temp = Words [i]; - Words[i] = Words[x]; - Words[x] = temp; - } - - listEl.innerHTML = Words.join("
"); -} - -/*function test (){ - //alert (takeWords()); - alert (Words[4].trim()); - -}*/ \ No newline at end of file diff --git a/src/style.css b/src/style.css deleted file mode 100644 index b860fa9..0000000 --- a/src/style.css +++ /dev/null @@ -1,52 +0,0 @@ -body { -background-color: #202020; -color: white; -font-family: 'Indie Flower', cursive; - -} -.button { - width: 200px; - font-size: 24px; - background-color: rgb(235, 212, 7); -} - -#all{ - width: 600px; - margin-left: auto; - margin-right: auto; - -} - -#Header { - padding: 5px; - font-size: 52px; - color: rgb(224, 196, 37); - - -} - -#List{ - width: 380px; - padding: 10px; - float: left; - font-size: 24px; -} -#Menu{ - width: 180px; - padding: 10px; - float: right; - -} - -#textarea { - padding: 5px; - line-height: 1.5; - border-radius: 10px; - border: 2px solid #fff; - box-shadow: 2px 2px 2px #999; -} - -.label { - display: block; - margin-bottom: 10px; -} \ No newline at end of file From af422ba2e721e6ef1d3e141da533bba52923a874 Mon Sep 17 00:00:00 2001 From: brq1 Date: Thu, 4 Apr 2019 16:46:40 +0200 Subject: [PATCH 6/6] general changes no2 --- src/index.html | 31 ++++++++++++++++++++++++ src/script.js | 65 ++++++++++++++++++++++++++++++++++++++++++++++++++ src/style.css | 52 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 148 insertions(+) create mode 100644 src/index.html create mode 100644 src/script.js create mode 100644 src/style.css diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..22eb29a --- /dev/null +++ b/src/index.html @@ -0,0 +1,31 @@ + + + + + + Sorting + + + + + +
+ +
+ +
+ + +
+ + + \ No newline at end of file diff --git a/src/script.js b/src/script.js new file mode 100644 index 0000000..9566501 --- /dev/null +++ b/src/script.js @@ -0,0 +1,65 @@ +var azEl = document.getElementById("AZ"); +var listEl = document.getElementById("List"); + +function takeWords(){ + var StringText = document.getElementById("textArea").value; + Words = StringText.split(","); + for (i=0 ; i< Words.length; i++){ + Words[i].trim(); + } + //Words.trim(); +} + +function sortInTurn(){ + takeWords(); + listEl.innerHTML = Words.join("
"); +} + +function sortAZ(){ + takeWords(); + + Words.sort(); + + if (azEl.value == "Sort A to Z") { + azEl.value = "Sort Z to A"; + } else { + Words.reverse(); + azEl.value = "Sort A to Z"; + } + listEl.innerHTML = Words.join("
"); +} + +function sortLtext(){ + takeWords(); + var temp; + for (var i=0; i < Words.length; i++){ + + for (var j=1; j < Words.length; j++){ + if (Words[j-1].length > Words[j].length){ + temp = Words[j]; + Words[j] = Words[j-1]; + Words[j-1] = temp; + } + } + } + listEl.innerHTML = Words.join("
"); +} + +function Random(){ + takeWords(); + var n = Words.length, temp, x; + for (i=0; i < n; i++ ) { + x = Math.floor(Math.random()*n); + temp = Words [i]; + Words[i] = Words[x]; + Words[x] = temp; + } + + listEl.innerHTML = Words.join("
"); +} + +/*function test (){ + //alert (takeWords()); + alert (Words[4].trim()); + +}*/ \ No newline at end of file diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..b860fa9 --- /dev/null +++ b/src/style.css @@ -0,0 +1,52 @@ +body { +background-color: #202020; +color: white; +font-family: 'Indie Flower', cursive; + +} +.button { + width: 200px; + font-size: 24px; + background-color: rgb(235, 212, 7); +} + +#all{ + width: 600px; + margin-left: auto; + margin-right: auto; + +} + +#Header { + padding: 5px; + font-size: 52px; + color: rgb(224, 196, 37); + + +} + +#List{ + width: 380px; + padding: 10px; + float: left; + font-size: 24px; +} +#Menu{ + width: 180px; + padding: 10px; + float: right; + +} + +#textarea { + padding: 5px; + line-height: 1.5; + border-radius: 10px; + border: 2px solid #fff; + box-shadow: 2px 2px 2px #999; +} + +.label { + display: block; + margin-bottom: 10px; +} \ No newline at end of file