pre final (tip calculator project)

sadeq93 · sadeq93 · commit 45bf81181693 · 2020-08-19T20:16:15.000+02:00
diff --git a/Week3/project/index.html b/Week3/project/index.html
@@ -4,11 +4,32 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="style.css">
   <title>Tip Calculator</title>
 </head>
 
 <body>
-  <div id="app"></div>
+  <div id="app">
+    <h1>Tip Calculator</h1>
+    <form action="">
+      <label for="amount">How much was your bill?</label>
+      <span>$</span><input type="text" id="amount">
+      <label for="service"></label>
+      <select id="service">
+        <option value="">How was your service?</option>
+        <option value="30">30%</option>
+        <option value="20">20%</option>
+        <option value="15">15%</option>
+        <option value="10">10%</option>
+        <option value="5">5%</option>
+      </select>
+<label for="sharing-people">How many people are sharing the bill?</label>
+<input type="text" id="sharingPeople">
+
+    </form>
+    <button id="calculate-button">cal</button>
+    <h2 id="result"></h2>
+  </div>
   <script src="index.js"></script>
 </body>
 
diff --git a/Week3/project/index.js b/Week3/project/index.js
@@ -1,3 +1,41 @@
-// Your code goes in here
+// document.querySelector("#app").innerText = "Tip Calculator";
+const calculateButton = document.getElementById('calculate-button');
+const CalculateTip = () => {
+  const amount = document.getElementById('amount');
+  const service = document.getElementById('service');
+  const sharingPeople = document.getElementById('sharingPeople');
+  const result = document.getElementById('result');
+
+  let tipAmount = (parseFloat(amount.value) + (parseFloat(amount.value) / 100) * parseFloat(service.value)) / parseFloat(sharingPeople.value);
+  let amountFlag = false;
+  let sharingPeopleFlag = false;
+  if (amount.value === '' || service.value === '' || sharingPeople.value === '') {
+    alert('Fill in all the fields!')
+  } else {
+    if (!isNaN(amount.value)) {
+      amountFlag = true
+    } else {
+      amount.value = `invalid Number`
+      amount.style.color = 'red';
+    }
+
+    if (!isNaN(sharingPeople.value)) {
+      sharingPeopleFlag = true
+    } else {
+      sharingPeople.value = `invalid Number`
+      sharingPeople.style.color = 'red';
+    }
+    if (amountFlag === true && sharingPeopleFlag === true) {
+      if (parseFloat(sharingPeople.value) !== 1) {
+        result.textContent = `TIP AMOUNT $${tipAmount} each`
+      } else {
+        result.textContent = `TIP AMOUNT $${tipAmount}`
+      }
+    
+    }
+  }
+  console.log(amount.value);
+}
+
+calculateButton.addEventListener("click", CalculateTip);
 
-document.querySelector("#app").innerText = "Tip Calculator";
diff --git a/Week3/project/style.css b/Week3/project/style.css
@@ -0,0 +1,20 @@
+*{
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  display: inline-block;
+}
+body{
+  background-color: rgb(0, 0, 0);
+  text-align: center;
+}
+#app{
+  background-color: tomato;
+  max-width: 20%;
+  height: 300px;
+  margin: 100px auto;
+ 
+}
+form > *{
+margin: 5px 0;
+}
