Fix issues on result page and update README.

Gemfile.lock

@@ -8,6 +8,7 @@ GEM
       coderay (~> 1.1.0)
       method_source (~> 0.9.0)
     rack (2.0.3)
+    rack-favicon (0.0.1)
     shotgun (0.9.2)
       rack (>= 1.0)
 
@@ -18,7 +19,8 @@ DEPENDENCIES
   humanize
   pry
   rack (= 2.0.3)
+  rack-favicon
   shotgun
 
 BUNDLED WITH
-   1.16.0
+   1.16.1

README.md

@@ -0,0 +1,51 @@
+## Simple web app with with rack
+clone & run
+```
+bundle install
+bundle exec rackup
+```
+### Car Loan Calculator
+
+Suppose ABC bank is offering Car Loan to its customers. As a software developer, you have to develop an application for this bank which will facilitate the bankers and its customers for effective calculations regarding car loan plans and installments with reference to number of years. For your guidance, bank has provided you the following eligibility criteria for car loans.
+
+| Requirements | Salaried Individuals | Business Persons |
+| -------------|:-------------:-------| -----:----|
+| **Citizenship**  | Pakistani     | Pakistani |
+| **Age**          | 22-60 years      |   22-70 years |
+| **Minimum monthly income** | Rs. 50,000      |    Rs. 75,000 |
+
+###### Table: Eligibility Criteria for Car Loan
+###### Task 1:
+
+You are required to write an application program which will facilitate user to check eligibility
+based on the upper table. If the user is not eligible, the application will prompt user “You are
+not eligible for this loan” and this step should be repeated to check other customer’s eligibility
+criteria.
+
+###### Task 2:
+In other case if the user is eligible, your developed application should provide an interface which
+will ask the following information to calculate monthly installment as per plan.
+* Car name
+* Total Cost of Vehicle (In Rupees)
+* Down payment (20-50%)
+* Number of Years (3,4,5)
+* Markup Rate (taken from customer 10 - 15%)
+
+###### How to do?
+
+* First check the eligibility
+* If a person is eligible remaining process will be carried out.
+* Followings are the parameters taken from the customer:-
+    * Car name
+    * Total Cost of Vehicle
+    * Down payment
+    * Number of Years
+    * Markup Rate Option
+
+**Note: -** Followings are checks on different fields
+* Car Name (Choose from given list of Vehicles)
+* Down payment should be from 20% to 50%
+* Mark up will be charged 10 to 15% Per Annum
+* Number of years of installments should be 3, 4 or 5.
+* Following is an example for 3 years plan; your application should support all three plans
+(3, 4 and 5 years).

config.ru

@@ -4,4 +4,5 @@ require './models/installment'
 require_relative 'application'
 require 'humanize'
 
+use Rack::Static, :urls => ["/css"], :root => "public"
 run Application.new

lib/helpers.rb

@@ -1,15 +1,11 @@
 require 'erb'
 
 def erb(template, binding)
-
   path = File.expand_path("views/#{template.to_s}.html.erb")
   @view = ERB.new(File.read(path)).result(binding)
 
   layout_file = File.expand_path("views/layout.html.erb")
   erb = ERB.new(File.read(layout_file)).result(binding)
-
-
-
 end
 
 def error(response, message, status = 400)

public/css/style.css

@@ -0,0 +1,60 @@
+body {
+  margin: 0;
+  font-family: 'Poppins', sans-serif;
+}
+
+header {
+  background-color: #3c9bff;
+  padding-left: 20%;
+}
+
+.flash-msg {
+  margin: 0;
+  line-height: 50px;
+  font-weight: 400;
+  padding-left: 20%;
+}
+.error {
+  color: #ff5d5d;
+}
+.success {
+  color: #0bab0b;
+}
+header h1 {
+  margin-top: 0;
+  margin-bottom: 0;
+  line-height: 80px;
+  color: #fff;
+  font-weight: 500;
+}
+
+section {
+  padding-left: 20%;
+
+}
+h2 {
+  margin-top: 0;
+  font-weight: 300;
+  line-height: 100px;
+}
+
+.form-group{
+  margin-top: 10px;
+}
+
+input{
+  padding: 5px;
+
+}
+
+input[type="text"]{
+    width: 300px;
+}
+select{
+  padding: 4px;
+}
+input[type="submit"]{
+  width: 150px;
+  font-weight: 400;
+  margin-top: 10px;
+}

views/index.html.erb

@@ -1,30 +1,34 @@
-<h1>Loan Calculator</h1>
-
 <% if @message %>
-  <h3 class="error"><%= @message %></h3>
+  <h3 class="flash-msg error"><%= @message %></h3>
 <% end %>
+<section>
 
-<h2>Check Eligibilty for loan</h2>
+  <h2>Check eligibility for loan</h2>
 
-<div class="form">
-  <form class="" action="/check" method="post">
-    <input type="radio" name="customer[status]" value="salaried">
-    <label for="customer[status]">Salaried Person</label>
-    <input type="radio" name="customer[status]" value="business">
-    <label for="customer[status]">Business Person</label><br>
-    <label for="customer[nationality]">Nationality :</label>
-    <select class="" name="customer[nationality]">
-      <option value="pakistani">Pakistani</option>
-      <option value="other">Other</option>
-    </select>
-    <% inputs = %W(age monthly\sincome) %>
-    <% inputs.each do |input| %>
-      <div class="">
-        <label for="<%= "customer[#{input}]" %>"> <%= input.capitalize %> :</label><br>
-        <input type="text" name="<%= "customer[#{input.split(' ').last}]" %>" value=""><br>
+  <div class="form">
+    <form class="" action="/check" method="post">
+      <div class="form-group">
+        <input type="radio" name="customer[status]" value="salaried">
+        <label for="customer[status]">Salaried Person</label>
+        <input type="radio" name="customer[status]" value="business">
+        <label for="customer[status]">Business Person</label><br>
+      </div>
+      <div class="form-group">
+        <label for="customer[nationality]">Nationality :</label>
+        <select class="" name="customer[nationality]">
+          <option value="pakistani">Pakistani</option>
+          <option value="other">Other</option>
+        </select>
       </div>
-    <% end %>
-    <br>
-    <input type="submit" name="" value="Check Eligibilty">
-  </form>
-</div>
+      <% inputs = %W(age monthly\sincome) %>
+      <% inputs.each do |input| %>
+        <div class="form-group">
+          <label for="<%= "customer[#{input}]" %>"> <%= input.capitalize %> :</label><br>
+          <input type="text" name="<%= "customer[#{input.split(' ').last}]" %>" value=""><br>
+        </div>
+      <% end %>
+      <br>
+      <input type="submit" name="" value="Check Eligibilty">
+    </form>
+  </div>
+</section>

views/installment.html.erb

@@ -1,35 +1,39 @@
-<h1>Calculate Installment</h1>
+<h3 class="flash-msg success">You are eligible</h3>
 
-<h3>You are eligible</h3>
+<section>
+  <h2>Calculate Installment</h2>
 
-<form class="" action="calculate" method="post">
-  <div class="">
-    <select class="" name="">
-      <% CARS.each_pair do |key, value| %>
-        <option value="<%= key %>"><%= value %></option>
+  <form class="" action="calculate" method="post">
+    <div class="form-group">
+      <label for="">Vehicle :</label><br>
+      <select class="" name="">
+        <% CARS.each_pair do |key, value| %>
+          <option value="<%= key %>"><%= value %></option>
+        <% end %>
+      </select>
+    </div>
+    <div class="form-group">
+      <label for="installment[cost]">Total cost of vehicle</label><br>
+      <input type="text" name="installment[cost]" value="" placeholder="PKR">
+    </div>
+    <div class="form-group">
+      <label for="installment[downpayment]">Down payment</label><br>
+      <input type="text" name="installment[downpayment]" value="" placeholder="PKR">
+    </div>
+    <div class="form-group">
+      <span>No of years: </span><br>
+      <% 3.upto(5) do |i| %>
+        <input type="radio" name="installment[period]" value="<%= i %>">
+        <label for="installment[period]"><%= i.humanize.capitalize %></label><br>
       <% end %>
-    </select>
-  </div>
-  <div class="">
-    <label for="installment[cost]">Total cost of Vehicle</label>
-    <input type="text" name="installment[cost]" value=""> PKR
-  </div>
-  <div class="">
-    <label for="installment[downpayment]">Down Payment</label>
-    <input type="text" name="installment[downpayment]" value=""> PKR
-  </div>
-  <div class="">
-    <span>No of Years: </span><br>
-    <% 3.upto(5) do |i| %>
-      <input type="radio" name="installment[period]" value="<%= i %>">
-      <label for="installment[period]"><%= i.humanize.capitalize %></label><br>
-    <% end %>
-  </div>
-  <div class="">
-    <label for="installment[markup]">Markup Rate</label>
-    <input type="text" name="installment[markup]" value=""> %
-  </div>
-  <div class="">
-    <input type="submit" name="" value="Calculate">
-  </div>
-</form>
+    </div>
+    <div class="">
+      <label for="installment[markup]">Markup rate</label><br>
+      <input type="text" name="installment[markup]" value="" placeholder=" % ">
+    </div>
+    <div class="form-group">
+      <input type="submit" name="" value="Calculate">
+    </div>
+  </form>
+
+</section>

views/layout.html.erb

@@ -3,9 +3,15 @@
   <head>
     <meta charset="utf-8">
     <title>Loan Calculator</title>
+    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet">
+    <link rel="stylesheet" href="/css/style.css">
   </head>
   <body>
 
+    <header>
+      <h1>Loan Calculator</h1>
+    </header>
+
     <%= @view %>
 
   </body>

views/result.html.erb

@@ -1 +1,4 @@
-<h1>Monthly Installment will be <%= @installment.calculate %></h1>
+<section>
+  <h1>Monthly Installment will be <%= @installment.calculate %></h1>
+  <h2><%= @installment.calculate.to_i.humanize %></h2>
+</section>