refactored

Author: zonayedpca

script-solved.js

@@ -10,11 +10,6 @@ const data = {
   person: 1
 }
 
-// ইনপুট ভ্যালিডেট করা, ইনপুট আসলেই নাম্বার কিনা
-const validateInput = input => {
-  return (/^\d+$/).test(input);
-}
-
 // ফর্মের ইনপুট ফিল্ডে কোনোরকম পরিবর্তন আসলেই আমরা অ্যাকশন নিবো
 tipCalculator.addEventListener('change', (e) => {
   // ফর্মের ইনপুট ঠিক আছে কি নেই সেটার উপর ভিত্তি করে এখানে অ্যাকশন নিবো
@@ -49,3 +44,8 @@ tipCalculator.addEventListener('change', (e) => {
     e.target.classList.add('err');
   }
 });
+
+// ইনপুট ভ্যালিডেট করা, ইনপুট আসলেই নাম্বার কিনা
+const validateInput = input => {
+  return (/^\d+$/).test(input);
+}

style.css

@@ -35,14 +35,12 @@ body>div {
 
 .calculator {
   display: flex;
-  color: #fff;
+  color: rgba(0, 0, 0, 0.75);
   padding: 25px;
   width: 600px;
   margin: 0 auto;
   border-radius: 4px;
-  background: #141E30;  /* fallback for old browsers */
-  background: -webkit-linear-gradient(to right, #243B55, #141E30);  /* Chrome 10-25, Safari 5.1-6 */
-  background: linear-gradient(to right, #243B55, #141E30); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+  background: #fff;
 }
 
 .calculator>div,
@@ -64,8 +62,8 @@ body>div {
 }
 
 .result div p {
-    font-size: 18px;
-    text-transform: uppercase;
+  font-size: 18px;
+  text-transform: uppercase;
 }
 
 .result div .amount_tip,
@@ -76,27 +74,28 @@ body>div {
 }
 
 input {
-    border: solid 2px transparent;
-    padding: 15px 10px;
-    font-size: 15px;
-    width: 100%;
-    border-radius: 4px;
+  border: solid 2px rgba(0, 0, 0, 0.2);
+  padding: 15px 10px;
+  font-size: 15px;
+  width: 100%;
+  border-radius: 4px;
 }
 
 input.err {
   border: solid 2px #F44336;
 }
 
 .input-group {
-    margin: 10px 0;
+  margin: 10px 0;
 }
 
 .input-group label {
-    display: block;
-    text-align: left;
-    font-weight: 900;
-    text-transform: uppercase;
-    margin-bottom: 5px;
+  color: rgba(0, 0, 0, 0.75);
+  display: block;
+  text-align: left;
+  font-weight: 900;
+  text-transform: uppercase;
+  margin-bottom: 5px;
 }
 
 .copyright {