Kalkulasjonskalkulator

by SvennMats

HTML

<div class="svenn-calc-container">
  <div class="svenn-header">
    <h2>Sjekk hva du sparer</h2>
    <p>Med Svenn bruker du kun 20% av tiden på kalkulering sammenlignet med tradisjonelle metoder.</p>
  </div>

  <div class="svenn-inputs">
    <div class="input-group">
      <div class="label-row">
        <label for="hourlyRate">Din timepris</label>
        <span id="displayRate" class="value-display">850 kr</span>
      </div>
      <input type="range" id="hourlyRate" min="300" max="1500" step="50" value="850">
    </div>

    <div class="input-group">
      <div class="label-row">
        <label for="timePerOffer">Tid per tilbud i dag</label>
        <span id="displayTime" class="value-display">60 min</span>
      </div>
      <input type="range" id="timePerOffer" min="15" max="240" step="15" value="60">
    </div>

    <div class="input-group">
      <div class="label-row">
        <label for="offersPerWeek">Antall tilbud per uke</label>
        <span id="displayOffers" class="value-display">3 stk</span>
      </div>
      <input type="range" id="offersPerWeek" min="1" max="20" step="1" value="3">
    </div>
  </div>

  <hr class="divider">

  <div class="svenn-results">
    <div class="result-row">
      <span class="res-label">Dagens kostnad (manuelt arbeid):</span>
      <span class="res-value" id="oldCost">0 kr</span>
    </div>
    
    <div class="result-row svenn-row">
      <span class="res-label">Kostnad med Svenn (Tid + Lisens):</span>
      <span class="res-value" id="newCost">0 kr</span>
    </div>

    <div class="total-savings">
      <p>Din månedlige gevinst:</p>
      <h3 id="totalSavings">0 kr</h3>
      <div class="savings-badge">Sparer 80% tid</div>
    </div>
    
    <a href="#" class="cta-button">Start Prøveperiode</a>
  </div>
</div>

CSS

@font-face {
  font-family: 'Magnet';
  src: local('Magnet'), url('path-to-magnet.woff2') format('woff2');
}

:root {
  --brand-orange: #F96529;
  --brand-dark: #241D2D;
  --brand-white: #FFFFFF;
  --bg-gray: #f4f4f4;
  --text-gray: #666;
}

body {
  font-family: 'Magnet', 'Inter', sans-serif;
  padding: 20px;
  background-color: var(--bg-gray);
}

.svenn-calc-container {
  background-color: var(--brand-white);
  color: var(--brand-dark);
  max-width: 500px;
  margin: 0 auto;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(36, 29, 45, 0.1);
}

.svenn-header h2 {
  color: var(--brand-dark);
  margin: 0 0 10px 0;
  font-size: 24px;
}

.svenn-header p {
  color: var(--text-gray);
  font-size: 14px;
  margin-bottom: 30px;
  line-height: 1.5;
}

/* Input Styling */
.input-group { margin-bottom: 25px; }

.label-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 14px;
}

.value-display { color: var(--brand-orange); font-weight: bold; }

input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
}
input[type=range]:focus { outline: none; }

/* Track */
input[type=range]::-webkit-slider-runnable-track {
  width: 100%; height: 8px; cursor: pointer;
  background: #E0E0E0; border-radius: 5px;
}
input[type=range]::-moz-range-track {
  width: 100%; height: 8px; cursor: pointer;
  background: #E0E0E0; border-radius: 5px;
}

/* Thumb */
input[type=range]::-webkit-slider-thumb {
  height: 24px; width: 24px; border-radius: 50%;
  background: var(--brand-orange); cursor: pointer;
  -webkit-appearance: none; margin-top: -8px;
  box-shadow: 0 2px 6px rgba(249, 101, 41, 0.4);
}
input[type=range]::-moz-range-thumb {
  height: 24px; width: 24px; border: none; border-radius: 50%;
  background: var(--brand-orange); cursor: pointer;
  box-shadow: 0 2px 6px rgba(249, 101, 41, 0.4);
}

.divider...

JavaScript

// Constants
const SVENN_LICENSE_COST = 1599;
const WEEKS_IN_MONTH = 4.33;
const TIME_EFFICIENCY_FACTOR = 0.20; // Svenn takes only 20% of original time

// Elements
const hourlyRateInput = document.getElementById('hourlyRate');
const timePerOfferInput = document.getElementById('timePerOffer');
const offersPerWeekInput = document.getElementById('offersPerWeek');

const displayRate = document.getElementById('displayRate');
const displayTime = document.getElementById('displayTime');
const displayOffers = document.getElementById('displayOffers');

const oldCostEl = document.getElementById('oldCost');
const newCostEl = document.getElementById('newCost');
const totalSavingsEl = document.getElementById('totalSavings');

// Currency Formatter
const formatNOK = (number) => {
  return new Intl.NumberFormat('no-NO', { 
    style: 'currency', 
    currency: 'NOK', 
    maximumFractionDigits: 0 
  }).format(number);
};

function calculate() {
  // 1. Get Values
  const rate = parseFloat(hourlyRateInput.value);
  const minutesPerOfferOld = parseFloat(timePerOfferInput.value);
  const offersPerWeek = parseFloat(offersPerWeekInput.value);

  // 2. Update Labels
  displayRate.textContent = `${rate} kr`;
  displayTime.textContent = `${minutesPerOfferOld} min`;
  displayOffers.textContent = `${offersPerWeek} stk`;

  // 3. Calculate Hours per Month (OLD vs NEW)
  const totalMinutesOldPerMonth = minutesPerOfferOld * offersPerWeek * WEEKS_IN_MONTH;
  const totalHoursOld = totalMinutesOldPerMonth / 60;
  
  // New time is just 20% of old time
  const totalHoursNew = totalHoursOld * TIME_EFFICIENCY_FACTOR;

  // 4. Calculate Costs
  const costOld = totalHoursOld * rate;
  
  // Cost New = Labor cost (reduced) + Svenn License
  const laborCostNew = totalHoursNew * rate;
  const costNewTotal = laborCostNew + SVENN_LICENSE_COST;

  // 5. Calculate Savings
  const monthlySavings = costOld - costNewTotal;

  // 6. Update UI
 ...