Web Development

<main class="calc-wrapper">
      <!-- Solar Roof Data Inputs -->

      <form class="calc-form" action="form-results.html" method="get">
        <label for="first-name" class="label first-name-label">
          First Name
        </label>
        <input type="text" class="first-name-input" />
        <label for="last-name" class="label last-name-label"> Last Name </label>
        <input type="text" class="last-name-input" />

        <!-- Google API Address Autocomplete Section -->
        <label class="label addr-sec-label" for="addr-sec"
          >Address Selection*</label
        >
        <input type="text" class="input" placeholder="Address" id="location" />
        <input
          type="text"
          class="input"
          placeholder="Apt, Suite, etc (optional)"
        />
        <input type="text" class="input" placeholder="City" id="locality" />

        <input
          type="text"
          class="input"
          placeholder="State/Province"
          id="administrative_area_level_1"
        />

        <input
          type="text"
          class="input"
          placeholder="Zip/Postal code"
          id="postal_code"
        />

        <input type="text" class="input" placeholder="Country" id="country" />
        <div class="map" id="map"></div>

        <!-- End - Google API Address Autocomplete Section -->

        <div class="roof-complexity">
          <label class="label roof-complexity-label" for="roof-complexity"
            >Roof Complexity Type*</label
          >
          <select
            class="roof-complexity-input"
            id="roof-complexity-input"
            name="roof-complexity"
          >
            <option selected disabled hidden>Select an Option</option>
            <option id="simple" value="simple">Simple</option>
            <option id="moderate" value="moderate">Moderate</option>
            <option id="complex" value="complex">Complex</option>
          </select>
        </div>

        <div class="system-size">
          <label class="label system-size-label" for="system-size"
            >Select System Size*</label
          >
          <button class="btn calc-form-btn system-size-minus-btn" type="button">
            -
          </button>
          <input
            class="system-size-input"
            id="system-size-input"
            value="4.0"
          />
          <button class="btn calc-form-btn system-size-plus-btn" type="button">
            +
          </button>
        </div>

        <div class="powerwall-battery">
          <label class="label powerwall-battery-label" for="powerwall-battery"
            >Select Powerwall Battery Storage (in units)*</label
          >
          <button
            class="btn calc-form-btn powerwall-battery-minus-btn"
            type="button"
          >
            -
          </button>
          <input class="powerwall-battery-input" id="powerwall-battery-input" />
          <button
            class="btn calc-form-btn powerwall-battery-plus-btn"
            type="button"
          >
            +
          </button>
        </div>
      </form>

      <!-- Totals and Incentives Calculations -->

      <div class="totals-section">
        <label class="label roof-before-itc" for="roof-before-itc"
          >Solar Roof Price Before Incentives</label
        >
        <input type="text" class="input" id="roof-price-before-itc" />

        <label
          class="label powerwall-price-before-itc"
          for="powerwall-price-before-itc"
          >Powerwall Price Before Incentives</label
        >
        <input class="input" id="powerwall-price-before-itc" value=" " />

        <label class="label est-total-before-itc" for="est-total-before-itc"
          >Estimated Total Price Before Incentives</label
        >
        <input type="text" class="input" id="est-total-before-itc" />

        <label class="label est-itc" for="est-itc">Estimated Solar ITC</label>
        <input type="text" class="input" id="est-itc" />
      </div>
    </main>

/** Set Global Styling Variables **/

:root {
  /** Fonts **/
  --mainFont: "Arial";
  --textFont: "Open Sans", sans-serif;
  --secondaryFont: "Raleway", sans-serif;

  /** Colors **/
  --primary: #4f5449;
  --darkGray: #2f2e2e;
  --lightGray: #ebebeb;
  --white: #fff;
  --black: #000;
  --darkorange: orange;
}

/** Apply Natural Box Layout Model to All Elements - Allow Components to Change **/

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%; /* Now 10px = 1rem! */
}

body {
  font-family: var(--mainFont);
  font-size: 1.6rem;
  line-height: 2;
}

.calc-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/** Calculator Form 1 Styles **/

/** Use Flexbox to Limit the Use of Media Queries and to Center the Main Element on All Devices**/

.calc-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 5rem;
  margin-bottom: 5rem;
  width: 50%;
  padding: 5rem;
}

.first-name-input {
  width: 50%;
  padding: 2rem;
}

.last-name-input {
  width: 50%;
  padding: 2rem;
}

/** Style Calculator Form Input and Label Sections 
System Size Input area was not given a class of 'input'
so the buttons would remain inline with the input field. 
It was given only and ID to target for a one off style and
for JS **/

/** Style Google API Address Autocomplete Section **/

.sb-title {
  font-family: var(--mainFont);
  font-weight: bold;
}

/** Style Form Address Section **/

.addr-sec-input {
  width: 100%;
  padding: 2rem;
}

.input {
  width: 50%;
  padding: 2rem;
  text-align: center;
}

.label {
  margin-top: 2rem;
  font-weight: bold;
  text-align: center;
  display: block;
}

/** Style Home Size Section **/

.home-size-input {
  padding: 2rem;
  text-align: center;
}

/** Style Roof Complexity Section **/

.roof-complexity-input {
  padding: 2rem;
  text-align: center;
}

/** Style Form System Size Section **/

.system-size {
  display: block;
}

.system-size-input {
  padding: 2rem;
  text-align: center;
}

/** Style Form Powerwall Battery Storage **/
.powerwall-battery {
  display: block;

}

.powerwall-battery-input {
  padding: 2rem;
  text-align: center;
}

.calc-form-btn {
  background-color: var(--primary);
  border: none;
  color: var(--white);
  padding: 0 1.5rem;
  text-align: center;
  text-decoration: none;
  font-size: 2rem;
  border-radius: 0.5rem;
  cursor: pointer;
}

/** Calculator Form 2 Styles **/
.totals-section {
  border: var(--black);
  border-style: solid;
  background: var(--darkorange);
  width: 50%;
  margin-right: 5rem;
  border-width: 1px;
  padding: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 25%;
}

.submit-section {
  text-align: center;
  margin-bottom: 5rem;
}

.submit-btn {
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  border-color: #FFFFFF;
  color: #FFFFFF;
  background-color: var(--primary);
  padding: 4rem;
  font-size: 2rem;
  text-transform: uppercase;
  border-radius: 1rem;
  width: 10%;
}

.submit-btn {
  cursor: pointer;
}

Input word: mini-stonescape group iii - Lev Distance: 6 - Shortest: 6
Did you mean: stonescapes group iii

Smallest Distance: 6
array(16) {
  [0]=>
  array(3) {
    ["key"]=> string(10) "REF_PA_365"
    ["value"]=> string(21) "stonescapes group iii"
    ["distance"]=> int(6)
  }
  [1]=>
  array(3) {
    ["key"]=> string(10) "REF_PA_364"
    ["value"]=> string(20) "stonescapes group ii"
    ["distance"]=> int(7)
  }
  [2]=>
  array(3) {
    ["key"]=> string(10) "REF_PA_081"
    ["value"]=> string(19) "stonescapes group i"
    ["distance"]=> int(8)
  }

// if this distance is less than the next found shortest word
// distance, OR if a next shortest word has not yet been found
if ($distance <= $shortest || $shortest < 0) {
    // set the closest match, and shortest distance
    $closest  = $value;
    $shortest = $distance;
}

echo "Input word: $partDescription - Lev Distance: $distance - Shortest: $shortest\n";
if ($shortest == 0) {

    echo "Exact match found: $closest\n\n";
    $pValue = $closest;

} else {

    echo "Did you mean: $closest\n\n";

    // Analyse the word more in detail
    $distances = array_column($comparisons, 'distance');
    $smallestDistance = min($distances);
    echo "Smallest Distance: $smallestDistance\n";
    var_dump($comparisons);

    // $pValue = $answer['key'];
    // $closest = $answer['value'];
    echo "Best choice: $closest\n\n";
    var_dump($pValue);

}