@@ -23,6 +23,7 @@ <h1>TIP CALCULATOR</h1>
                     <span>€ </span><input type="number" id="bill">
                     <p>How was your service?</p>
                     <select id="services">
+                        <option value="choose-option">-Choose an option-</option>
                         <option value="outstanding">30% - Outstanding</option>
                         <option value="good">20% - Good</option>
                         <option value="ok">15% - It was OK</option>
@@ -32,17 +33,16 @@ <h1>TIP CALCULATOR</h1>
                     <p>How many people are sharing the bill?</p>
                     <input type="number" id="people"><span>people</span>
                     <br>
-                    <button id="calc-button">CALCULATE!</button>
+                    <button type="button" id="calc-button">CALCULATE!</button>
                     <h3>TIP AMOUNT</h3>
-                    <h4 id="tip-amount"></h4>
-                    <h2>€ 0.00</h2>
-                    <h3>each</h2>
+                    <h2 id="tip-amount">€ 0.00</h2>
+                    <h3 id="each">each</h3>
                 </form>
             </div>
         </div>
     </div>
 
-    <script src="script.js"></script>
+    <script src="main.js"></script>
 </body>
 
 </html>
@@ -0,0 +1,59 @@
+"use strict"
+//Selecting the elements
+
+const bill = document.querySelector("#bill");
+const services = document.querySelector("#services");
+const people = document.querySelector("#people");
+const button = document.querySelector("#calc-button");
+const amount = document.querySelector("#tip-amount");
+const each = document.querySelector("#each");
+let total;
+
+//Event listener for the button click
+button.addEventListener("click", calculateTips);
+
+//Function that calculates the tips for each service selection
+function calculateTips() {
+    //Checks if some of the fields is blank
+    if (bill.value === "" || services.value === "choose-option" || people.value === "") {
+        alert("You need to fill in all the fields!");
+        //Changes the tip value for each percentage
+    } else {
+        switch (services.value) {
+            case "outstanding":
+                onePerson();
+                total = (bill.value * 0.30) / people.value;
+                amount.innerHTML = `€ ${total}`;
+                break;
+            case "good":
+                onePerson();
+                total = (bill.value * 0.20) / people.value;
+                amount.innerHTML = `€ ${total}`;
+                break;
+            case "ok":
+                onePerson();
+                total = (bill.value * 0.15) / people.value;
+                amount.innerHTML = `€ ${total}`;
+                break;
+            case "bad":
+                onePerson();
+                total = (bill.value * 0.1) / people.value;
+                amount.innerHTML = `€ ${total}`;
+                break;
+            case "terrible":
+                onePerson();
+                total = (bill.value * 0.05) / people.value;
+                amount.innerHTML = `€ ${total}`;
+                break;
+        }
+    }
+}
+
+//Function that checks if there is more than one person that pays the bill and adds or deletes the "each"
+function onePerson() {
+    if (parseInt(people.value) === 1) {
+        each.innerHTML = "";
+    } else {
+        each.innerHTML = "each";
+    }
+}
@@ -71,6 +71,10 @@ div.calc-body{
     font-family: 'Odibee Sans', cursive;
     cursor: pointer;
 }
+#calc-button:hover {
+    background-color: #fd7f7f; 
+ }
+
 input#bill{
     font-family: 'Segoe UI', sans-serif;
     font-size: 1.3rem;