diff --git a/README.md b/README.md
index 4abcf1f..e7be4ad 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,12 @@
+<<<<<<< HEAD
# Towns for SoftUni
Code for the Git and GitHub Exercise
+=======
+# Roles
+
+- Bobby (techfrapi) takes the role "Editor"
+- Ivan (shadow-develop) takes the role "Shuffler"
+- Tashev (xaoccc) takes the role "Styler"
+
+>>>>>>> 882432cf27ae1db17e863fc8bc7b300d9916cc2a
+
diff --git a/towns.css b/towns.css
index 3f23d97..2960a7a 100644
--- a/towns.css
+++ b/towns.css
@@ -1,3 +1,80 @@
-select, input {
- width: 100px;
-}
\ No newline at end of file
+html {
+ font-family: Arial, sans-serif;
+}
+
+main {
+ margin: 5rem auto;
+ width: 14rem;
+}
+
+body {
+ background-color: #0592f11c;
+ background-image: url(https://images.unsplash.com/photo-1480714378408-67cf0d13bc1b?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
+ background-position-x: center;
+ background-position-y: top;
+ background-repeat: no-repeat;
+ background-blend-mode: darken;
+}
+
+h1 {
+ text-align: center;
+ font-size: 3rem;
+}
+
+select {
+ margin-bottom: 1rem;
+ width: 60%;
+ display: block;
+ margin: 0 auto 1rem;
+}
+
+.field {
+ display: flex;
+ flex-direction: row;
+ margin-bottom: 1rem;
+ gap: 0.75rem;
+}
+
+button, input {
+ display: block;
+ padding: 0.5rem 1rem;
+ border: none;
+ border-radius: 0.4rem;
+}
+
+button {
+ background-color: #007bff;
+ color: white;
+ width: 5rem;
+
+}
+
+button#btnDelete {
+ background: red;
+}
+
+
+button:hover {
+ cursor: pointer;
+ background-color: #051ed5;
+}
+
+button#btnDelete:hover {
+ background: rgb(139, 0, 0);
+}
+
+
+.field input {
+ width: 7rem;
+}
+
+#result {
+ margin-top: 1rem;
+ display: none;
+ width: 90%;
+ background: rgba(255, 255, 255, 0.8);
+ padding: 0.5rem 1rem;
+}
+
+
+
diff --git a/towns.html b/towns.html
index d7a7960..e9b4321 100644
--- a/towns.html
+++ b/towns.html
@@ -3,26 +3,35 @@
Towns
-
+
+
+ Towns
+
-Towns
-
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
diff --git a/towns.js b/towns.js
index 6f50af6..b6efe1c 100644
--- a/towns.js
+++ b/towns.js
@@ -1,7 +1,10 @@
$(document).ready(function() {
$('#btnDelete').click(deleteTown)
+ $('#btnShuffle').click(shuffleTowns);
+ $('#btnAdd').click(addTown);
});
+
function deleteTown() {
let townName = $('#townName').val();
$('#townName').val('');
@@ -12,8 +15,37 @@ function deleteTown() {
option.remove();
}
}
- if (removed)
+ if (removed) {
+ $('#result').css("display", "block");
$('#result').text(townName + " deleted.");
+ }
+
else
$('#result').text(townName + " not found.");
}
+
+function shuffleTowns() {
+ let towns = $('#towns option').toArray();
+ $('#towns').empty();
+ shuffleArray(towns);
+ $('#towns').append(towns);
+ $('#result').text("Towns shuffled.");
+
+ function shuffleArray(array) {
+ for (var i = array.length - 1; i > 0; i--) {
+ var j = Math.floor(Math.random() * (i + 1));
+ var oldElement = array[i];
+ array[i] = array[j];
+ array[j] = oldElement;
+ }
+ }
+}
+
+function addTown() {
+ let townName = $('#townNameForAdd').val();
+ $('#townNameForAdd').val('');
+ $('#towns').append($('