Local delivery distance - zip code

[montz]

I would like to develop a price system based on zip code. now I have only a list of zip code each input but I’d like to have 2 list of zip code. Any ideas?

function checkIfAvailable(zip) {
  let zones = ["00182", "00183", "00184", "00185", "00186", "00187", "00153"];
  return zones.indexOf(zip) >= 0;
}
function checkIfAvailable(zip1) {
  let zone = ["00182", "00183", "00184", "00185", "00186", "00187", "00153"];
  return zone.indexOf(zip1) >= 0;
}

function validateZip() {
  let zip = document.getElementById("zipCode").value;
  let zip1 = document.getElementById("zipCode1").value;
  let msg = "";
  if (checkIfAvailable(zip) && checkIfAvailable(zip1)) {
    msg = "<h2 style='color:green'>Price 1</h2>";
  } else {
    msg = "<h2 style='color:orange'>Price 2</h2>";
  }

  document.getElementById("msg").innerHTML = msg;
}

[kevinSmith]

I would work on the logic without worrying about the UI. What is the logic that you want? I’m not clear.

[kevinSmith]

I’m just assuming here, but I’m imagining something like this:

const PRICE_ADJUSTS = [
  {
    zips: ['00001', '00002', '00003'],
    factor: 1.1,
  },
  {
    zips: ['00004', '00005', '00006'],
    factor: 1.2,
  },
  {
    zips: ['00007', '00008', '00009'],
    factor: 1.3,
  },
]

const getPriceByZip = (basePrice, zipcode) => {
  for (const adjust of PRICE_ADJUSTS) {
    if (adjust.zips.includes(zipcode)) {
      return Math.round((basePrice * adjust.factor) * 100) / 100
    }
  }
  
  return basePrice
}

console.log(getPriceByZip(100, '00001'))
// 110
console.log(getPriceByZip(100, '00005'))
// 120
console.log(getPriceByZip(100, '00009'))
// 130
console.log(getPriceByZip(100, '99999'))
// 100

If you want a more complicated adjustment, you can have a function.

[montz]

@kevinSmith

Thank you for your answer.
Really, I want to find the way to do this:

classes of zip:
a) centre of city (00001, 00002, 0003)
b) out of the centre (00004, 00005, 00006)

if I enter two zip code (zip1, zip2) in two input =>

if zip1 and zip 2 are in the centre (a-class) → GREEN AREA
if zip1 is a-class and zip2 is b-class → ORANGE AREA
if zip1 and zip2 are in b-class → RED AREA
if zip1 and zip 2 aren’t in A or B class → BLACK AREA

[montz]

something like that:

HTML:

<form>
        ZIP <br />
        
        <input
          type="text"
          minlength="5"
          maxlength="5"
          id="zipCode"
          placeholder="ZIP"
          onKeyUp="validateZip()"
        />
      
      <br /><br />
      
       ZIP1: <br />
        
        <input
          type="text"
          minlength="5"
          maxlength="5"
          id="zipCode1"
          placeholder="CAP"
          onKeyUp="validateZip()"
        />
      </form>

JS:

switch (zip) {
  case 00001:
  case 00002:
  case 00003:
    alert("0");
    zip = 0;
    break;
  case 00004:
  case 00005:
  case 00006:
    alert("1");
    zip = 1;
    break;
  case 00007:
  case 00008:
  case 00009:
    alert("2");
    zip = 2;
    break;
  default:
    alert("3");
    zip = 3;
}

switch (zip1) {
  case 00001:
  case 00002:
  case 00003:
    alert("0");
    zip1 = 0;
    break;
  case 00004:
  case 00005:
  case 00006:
    alert("1");
    zip1 = 1;
    break;
  case 00007:
  case 00008:
  case 00009:
    alert("2");
    zip1 = 2;
    break;
  default:
    alert("3");
    zip1 = 3;
}

function validateZip() {
  let zip = document.getElementById("zipCode").value;
  let zip1 = document.getElementById("zipCode1").value;
  let msg = "";
  if (zip == zip2) {
    msg = "<h2 style='color:green'>You spend 1€</h2>";
  } else if (zip > zip2) {
    msg = "<h2 style='color:orange'>You spend 2€</h2>";
  } else if (zip < zip2) {
    msg = "<h2 style='color:orange'>You spend 2€</h2>";
  } else {
    msg = "<h2 style='color:orange'>Boom!</h2>";
  }

  document.getElementById("msg").innerHTML = msg;
}

[kevinSmith]

Sorry, I wrote the code but got busy with work and forgot to post it.

Again, I think it is good to separate your logic from your UI. Two small problems are easier to solve than one big one.

I came up with this for the logic:

const CENTRE_ZIPS = ['00001', '00002', '00003']
const OUTER_ZIPS = ['00004', '00005', '00006']

const getClass = zip => {
  if (CENTRE_ZIPS.includes(zip)) {
    return 'a'
  }
  return OUTER_ZIPS.includes(zip) ? 'b' : null
}

const getArea = (zip1, zip2) => {
  const zip1Class = getClass(zip1)
  const zip2Class = getClass(zip2)

  if (zip1Class === 'a' && zip2Class === 'a') {
    return 'green'
  }
  
  if (zip1Class === 'a' && zip2Class === 'b') {
    return 'orange'
  }
  
  if (zip1Class === 'b' && zip2Class === 'b') {
    return 'red'
  }
  
  return 'black'
}

console.log(getArea(CENTRE_ZIPS[0], CENTRE_ZIPS[1]))
// green
console.log(getArea(CENTRE_ZIPS[0], OUTER_ZIPS[1]))
// orange
console.log(getArea(OUTER_ZIPS[0], OUTER_ZIPS[1]))
// red
console.log(getArea('foo1', 'foo2'))
// black

What you gave me did not account for the possibility that zip1 is in area b and zip2 is in area a, but that would be easy to fix with this:

  if (
    (zip1Class === 'a' && zip2Class === 'b') || 
    (zip1Class === 'b' && zip2Class === 'a')
  ) {
    return 'orange'
  }