Add styles

README.md

@@ -1,2 +1,5 @@
-# Towns for SoftUni
-Code for the Git and GitHub Exercise
+· {Dani1} takes the role "Editor"
+
+· {Dani2} takes the role "Shuffler"
+
+· {Dani3} takes the role "Styler"

towns.css

@@ -1,3 +1,61 @@
-select, input {
-	width: 100px;
-}
+select,
+input {
+  width: 100px;
+}
+
+@import url("https://fonts.googleapis.com/css?family=Rubik");
+body {
+  font-family: "Rubik", sans-serif;
+}
+* {
+  box-sizing: content-box;
+}
+article {
+  background: #ccc;
+  width: 180px;
+  padding: 10px;
+  margin: 10px;
+  display: inline-block;
+  vertical-align: top;
+}
+article > header {
+  background: #5f5f5f;
+  color: white;
+  margin: 0px 0px 10px 0px;
+  padding: 4px 6px;
+}
+article > header > h1 {
+  margin: 0px;
+}
+article > select {
+  width: 178px;
+}
+article > input {
+  width: 176px;
+}
+article > button {
+  display: block;
+  margin: 10px auto 0px auto;
+  border: none;
+  border-radius: 3px;
+  padding: 5px 15px;
+  background: green;
+  color: white;
+  font-weight: bold;
+}
+article > button:hover {
+  box-shadow: 0px 0px 10px white;
+  cursor: pointer;
+}
+button#btnDelete {
+  background: red;
+}
+#result {
+  display: none;
+  width: 50%;
+  margin: 10px auto;
+  padding: 10px 15px;
+  background: #ddd;
+  border-radius: 5px;
+  border: 1px solid #777;
+}

towns.html

@@ -22,6 +22,10 @@ <h1>Towns</h1>
     <input type="text" id="townName" />
     <button id="btnDelete">Delete</button>
 </div>
+<div> 
+    <input type="text" id="townNameForAdd" />
+     <button id="btnAdd">Add</button> 
+    </div>
 <div id="result"></div>
 
 </body>

towns.js

@@ -1,19 +1,23 @@
-$(document).ready(function() {
-	$('#btnDelete').click(deleteTown)
+$(document).ready(function () {
+  $("#btnDelete").click(deleteTown);
+  $('#btnAdd').click(addTown);
 });
-
+function addTown() {
+  let townName = $("#townNameForAdd").val();
+  $("#townNameForAdd").val("");
+  $("#towns").append($("<option>").text(townName));
+  $("#result").text(townName + " added.");
+}
 function deleteTown() {
-	let townName = $('#townName').val();
-	$('#townName').val('');
-	let removed = false;
-	for (let option of $('#towns option')) {
-		if (option.textContent == townName) {
-			removed = true;
-			option.remove();
-		}
-	}
-	if (removed)
-		$('#result').text(townName + " deleted.");
-	else
-		$('#result').text(townName + " not found.");
+  let townName = $("#townName").val();
+  $("#townName").val("");
+  let removed = false;
+  for (let option of $("#towns option")) {
+    if (option.textContent == townName) {
+      removed = true;
+      option.remove();
+    }
+  }
+  if (removed) $("#result").text(townName + " deleted.");
+  else $("#result").text(townName + " not found.");
 }