Svenn Sparekalkulator

by SvennMats

HTML

<section class="svenn-calc-section">
  <div class="svenn-calc-container">
    
    <div class="svenn-calc-grid">
      
      <div class="svenn-calc-inputs">
        
        <h3 class="svenn-input-section-title">Drift & Administrasjon (Svenn Total)</h3>
        
        <div class="svenn-input-group">
          <div class="svenn-input-label">
            <span>Antall ansatte i bedriften?</span>
            <span class="svenn-range-val" id="val-emp">2</span>
          </div>
          <input type="range" class="svenn-range-slider" id="slider-emp" min="1" max="50" value="2" step="1">
          <div class="svenn-range-labels"><span>1</span><span>50</span></div>
        </div>
        
        <div class="svenn-input-group">
          <div class="svenn-input-label">
            <span>Admin. timer brukt pr uke?</span>
            <span class="svenn-range-val" id="val-hours">10</span>
          </div>
          <input type="range" class="svenn-range-slider" id="slider-hours" min="1" max="100" value="10" step="1">
          <div class="svenn-range-labels"><span>1 t</span><span>100 t</span></div>
        </div>
        
        <div class="svenn-input-group" style="margin-bottom: 48px;">
          <div class="svenn-input-label">
            <span>Hvilken timepris fakturerer dere?</span>
            <span class="svenn-range-val" id="val-rate">700 kr</span>
          </div>
          <input type="range" class="svenn-range-slider" id="slider-rate" min="250" max="1500" value="700" step="50">
          <div class="svenn-range-labels"><span>250 kr</span><span>1500 kr</span></div>
        </div>

        <div class="svenn-divider-sub"></div>
        
        <h3 class="svenn-input-section-title">Pristilbud (Svenn Kalkulasjon)</h3>
        
        <div class="svenn-input-group">
          <div class="svenn-input-label">
            <span>Tilbud sendt pr måned i snitt?</span>
            <span class="svenn-range-val"...

CSS

/* --- Brand Variabler --- */
.svenn-calc-section {
  --svenn-orange: #F96529;
  --svenn-orange-hover: #e0551e;
  --svenn-dark: #241D2D;
  --svenn-res-bg: #EDF3E3;
  --svenn-border: #E5E7EB;
  
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding: 60px 20px;
  background-color: transparent; 
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

.svenn-calc-section *, .svenn-calc-section *::before, .svenn-calc-section *::after {
  box-sizing: border-box;
}

.svenn-calc-container {
  max-width: 1000px;
  width: 100%;
}

/* --- Grid Layout --- */
.svenn-calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

/* --- Venstre: Inputs --- */
.svenn-calc-inputs {
  background: #ffffff;
  padding: 40px;
  border-radius: 20px;
  border: 1px solid var(--svenn-border);
  box-shadow: 0 4px 6px -1px rgba(36, 29, 45, 0.05);
}

.svenn-input-section-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--svenn-dark);
  margin: 0 0 24px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--svenn-res-bg);
}

.svenn-divider-sub {
  height: 1px;
  background-color: var(--svenn-border);
  margin: 40px 0;
}

.svenn-input-group {
  margin-bottom: 32px;
}

.svenn-input-group:last-child {
  margin-bottom: 0;
}

.svenn-input-label {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 16px;
  font-weight: 600;
  color: var(--svenn-dark);
  font-size: 1rem;
}

.svenn-range-val {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--svenn-orange);
}

/* Slider Styling */
.svenn-range-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  outline: none;
  background: #E5E7EB; 
  margin: 0;
}

.svenn-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
 ...

JavaScript

document.addEventListener("DOMContentLoaded", () => {
  // --- Hent elementer (Total) ---
  const sliderEmp = document.getElementById("slider-emp");
  const sliderHours = document.getElementById("slider-hours");
  const sliderRate = document.getElementById("slider-rate");
  
  const valEmp = document.getElementById("val-emp");
  const valHours = document.getElementById("val-hours");
  const valRate = document.getElementById("val-rate");

  // --- Hent elementer (Kalkulasjon) ---
  const sliderOffers = document.getElementById("slider-offers");
  const sliderOfferHours = document.getElementById("slider-offer-hours");
  const sliderProjectValue = document.getElementById("slider-project-value");
  
  const valOffers = document.getElementById("val-offers");
  const valOfferHours = document.getElementById("val-offer-hours");
  const valProjectValue = document.getElementById("val-project-value");
  
  // --- Hent resultatfelt ---
  const resAdminSavedVal = document.getElementById("res-admin-saved-val");
  const resAdminCost = document.getElementById("res-admin-cost");
  
  const resKalkSavedVal = document.getElementById("res-kalk-saved-val");
  const resKalkProfitVal = document.getElementById("res-kalk-profit-val");
  const resKalkCost = document.getElementById("res-kalk-cost");
  
  const resTotalNet = document.getElementById("res-total-net");
  
  // Formatere tall
  const formatCur = (num) => new Intl.NumberFormat('no-NB').format(num) + " kr";
  
  // Style slider-spor dynamisk
  const updateSliderStyle = (slider) => {
    const min = slider.min || 0;
    const max = slider.max || 100;
    const val = slider.value;
    const percentage = ((val - min) / (max - min)) * 100;
    slider.style.background = `linear-gradient(to right, #F96529 ${percentage}%, #E5E7EB ${percentage}%)`;
  };

  // Hovedutregning
  const calculateSavings = () => {
    // 1. Variabler
    const employees = parseInt(sliderEmp.value);
    const...