gb calculator

gb-calculator.markdown

gb calculator

A Pen by Uvacoder on CodePen.

License.

index.html

<!-- in response to https://www.reddit.com/r/learnjavascript/comments/10apzd2/trying_to_update_2_elements_with_buttons_and/ -->
<table>
<tbody><tr>
<th></th>
<th>Daily</th>
<th>For the Trip</th>
</tr>
<tr>
<td><h2>Total Data Usage</h2></td>
<td><span class="show-gb" id="daily_data_usage">1.3</span></td>
<td><span class="show-gb" id="total_trip_data_usage">0.5</span></td>
</tr>
</tbody></table>
<form>

<h2>Enter how many days you will be going away for</h2>
<input type="number" name="quantity" min="1" class="tripDays" placeholder="Enter Quantity" id="tripdays" style="width: 150px;">

<h2>Hours per day for streaming in SD:</h2>
<button type="button" class="btn" id="sdnever" name="sd_streaming_hours" value="0">Never</button>
<button type="button" class="btn" id="sdone_hour" name="sd_streaming_hours" value="1">1 hour</button>
<button type="button" class="btn" id="sdtwo_hours" name="sd_streaming_hours" value="2">2 hours</button>
<button type="button" class="btn" id="sdthree_hours" name="sd_streaming_hours" value="3">3 hours</button>
<button type="button" class="btn" id="sdfive_hours" name="sd_streaming_hours" value="5">5 hours</button>
<button type="button" class="btn" id="sdeight_hours" name="sd_streaming_hours" value="8">8 hours</button>

<h2>Hours per day for streaming in HD:</h2>
<button type="button" class="btn" id="hdnever" name="hd_streaming_hours" value="0">Never</button>
<button type="button" class="btn" id="hdone_hour" name="hd_streaming_hours" value="1">1 hour</button>
<button type="button" class="btn" id="hdtwo_hours" name="hd_streaming_hours" value="2">2 hours</button>
<button type="button" class="btn" id="hdthree_hours" name="hd_streaming_hours" value="3">3 hours</button>
<button type="button" class="btn" id="hdfive_hours" name="hd_streaming_hours" value="5">5 hours</button>
<button type="button" class="btn" id="hdeight_hours" name="hd_streaming_hours" value="8">8 hours</button>

<h2>Hours per day you will video call (Facetime Whatsapp etc):</h2>
<button type="button" class="btn" id="videonever" name="video_streaming_hours" value="0">Never</button>
<button type="button" class="btn" id="videoone_hour" name="video_streaming_hours" value="1">1 hour</button>
<button type="button" class="btn" id="videotwo_hours" name="video_streaming_hours" value="2">2 hours</button>
<button type="button" class="btn" id="videothree_hours" name="video_streaming_hours" value="3">3 hours</button>
<button type="button" class="btn" id="videofive_hours" name="video_streaming_hours" value="5">5 hours</button>
<button type="button" class="btn" id="videoeight_hours" name="video_streaming_hours" value="8">8 hours</button>

<h2>Hours per day you will listen to music (Spotify, Soundcloud etc):</h2>
<button type="button" class="btn" id="musicnever" name="music_streaming_hours" value="0">Never</button>
<button type="button" class="btn" id="musicone_hour" name="music_streaming_hours" value="1">1 hour</button>
<button type="button" class="btn" id="musictwo_hours" name="music_streaming_hours" value="2">2 hours</button>
<button type="button" class="btn" id="musicthree_hours" name="music_streaming_hours" value="3">3 hours</button>
<button type="button" class="btn" id="musicfive_hours" name="music_streaming_hours" value="5">5 hours</button>
<button type="button" class="btn" id="musiceight_hours" name="music_streaming_hours" value="8">8 hours</button>

<h2>Hours per day you will use your navigation (i.e. Google Maps, Tom Tom, Garmin):</h2>
<button type="button" class="btn" id="navnever" name="nav_hours" value="0">Never</button>
<button type="button" class="btn" id="navone_hour" name="nav_hours" value="1">1 hour</button>
<button type="button" class="btn" id="navtwo_hours" name="nav_hours" value="2">2 hours</button>
<button type="button" class="btn" id="navthree_hours" name="nav_hours" value="3">3 hours</button>
<button type="button" class="btn" id="navfive_hours" name="nav_hours" value="5">5 hours</button>
<button type="button" class="btn" id="naveight_hours" name="nav_hours" value="8">8 hours</button>

<h2>Hours per day you will be gaming:</h2>
<button type="button" class="btn" id="gamenever" name="gaming_hours" value="0">Never</button>
<button type="button" class="btn" id="gameone_hour" name="gaming_hours" value="1">1 hour</button>
<button type="button" class="btn" id="gametwo_hours" name="gaming_hours" value="2">2 hours</button>
<button type="button" class="btn" id="gamethree_hours" name="gaming_hours" value="3">3 hours</button>
<button type="button" class="btn" id="gamefive_hours" name="gaming_hours" value="5">5 hours</button>
<button type="button" class="btn" id="gameeight_hours" name="gaming_hours" value="8">8 hours</button>

<h2>Hours per day you will be browsing the internet:</h2>
<button type="button" class="btn" id="browsenever" name="browsing_hours" value="0">Never</button>
<button type="button" class="btn" id="browseone_hour" name="browsing_hours" value="1">1 hour</button>
<button type="button" class="btn" id="browsetwo_hours" name="browsing_hours" value="2">2 hours</button>
<button type="button" class="btn" id="browsethree_hours" name="browsing_hours" value="3">3 hours</button>
<button type="button" class="btn" id="browsefive_hours" name="browsing_hours" value="5">5 hours</button>
<button type="button" class="btn" id="browseeight_hours" name="browsing_hours" value="8">8 hours</button>

<h2>Select the number of emails a day you will send:</h2>
<button type="button" class="btn" id="emails_0" name="emails_sent" value="0">0</button>
<button type="button" class="btn" id="emails_10" name="emails_sent" value="10">10</button>
<button type="button" class="btn" id="emails_20" name="emails_sent" value="20">20</button>
<button type="button" class="btn" id="emails_30" name="emails_sent" value="30">30</button>
<button type="button" class="btn" id="emails_50" name="emails_sent" value="50">50</button>
<button type="button" class="btn" id="emails_100" name="emails_sent" value="100">100</button>
</form>

script.js

let totals = {"sd_streaming_hours": 0,"hd_streaming_hours": 0,"video_streaming_hours": 0,"music_streaming_hours": 0,"nav_hours": 0,"gaming_hours": 0,"browsing_hours": 0,"emails_sent": 0};

//new detaults object because I hate switches
let defaults = {"sd_streaming_hours": 0.1,"hd_streaming_hours": 0.3,"video_streaming_hours": 0.4,"music_streaming_hours": 0.4,"nav_hours": 0.4,"gaming_hours": 0.4,"browsing_hours": 0.4,"emails_sent": 0.4};

document.body.addEventListener("click", (e) => {
  const el = e.target;
  if (el.classList.contains("btn")) {
    const name = el.name;
    const selected = document.querySelector(".selected[name=" + name + "]");
    if (selected) {
      selected.classList.remove("selected")
    }
    el.classList.add("selected")
    let val = parseInt(el.value);
    //instead of switch, we use the variable 'name' as the property for defaults, which should give us the correspoding value from defaults object.
    totals[name] = val * defaults[name];
    updateDataUsage();
  }
});

//code to update total data usage and total trip data usage at the same time whenever a button is clicked or a number is input

function updateDataUsage() {
  //note, I changed the "input" to tripdays so its meaningful and getting the value instead of the elemnent, while we need the element for the dailyDataUsage and totalTripDataUsage so we can insert something into them.
  let tripdays = document.getElementById("tripdays").value;
  //note, I changed the id to better represent its actual value/purpose
  let dailyDataUsage = document.getElementById("daily_data_usage");
  let totalTripDataUsage = document.getElementById("total_trip_data_usage");
  if (tripdays && dailyDataUsage && totalTripDataUsage) {
    //get the total usage from the totals object by using the reduce method to add up all the values
    let totalUsage = Object.values(totals).reduce((balance, value) => balance + value, 0);
    //put the totals INTO #total_trip_data_usage, we don't need to get it for any reason, we already have a running total calculated for us from the totals object
    totalTripDataUsage.textContent = totalUsage.toFixed(1);
    //now we simply divid our total usage by days for our daily usage and we'll let the css ::after sort out the gb
    dailyDataUsage.textContent = (totalUsage / tripdays).toFixed(1);
  }
};

//to default select the first "never" button

document.getElementById("sdnever").click();

//default trip days value:

let tripDays = document.getElementById("tripdays")
if (tripDays) {
  tripDays.value = "1";
  tripDays.addEventListener("change", updateDataUsage);
  tripDays.addEventListener("click", updateDataUsage);

  document.getElementById("tripdays").focus();
  document.getElementById("tripdays").dispatchEvent(new Event('click'));
}

style.css

/* existing css */
#daily_data_usage,#total_trip_data_usage {
    font-size: 30px;
}
.btn.selected {
    background-color: black;
    color: white;
}

/* new css */
.show-gb::after{
  content:"GB";
}