We Keep Coding

How do I get the previous result in this calorie calculator?

Basically, I want to get the total calories and insert it to another html file for a Calorie Tracker. The result of the calculator should display the total in a new html file(which is the calorie tracker). I am trying to create a Calorie Tracker but I need the total from the previous calculator to display the total in a new html so that I can create a tracker that would deduct the amounted calories for this person based on the inputs they have in the calculator. Any help would be much appreciated and sorry if the post is mostly long code. Trying to learn html, css, and js and I just started awhile back.
function goToTracker() {
location.replace('tracker.html')
}
function goHome() {
location.replace('index.html')
}
document.getElementById('calorie-form').addEventListener('submit', function(e) {
document.getElementById('results').style.display = 'none';
document.getElementById('loading').style.display = 'block';
setTimeout(calculateCalories, 2000);
e.preventDefault();
});
function calculateCalories(e) {
const age = document.getElementById('age');
const gender = document.querySelector('input[name="customRadioInline1"]:checked');
const weight = document.getElementById('weight');
const height = document.getElementById('height');
const activity = document.getElementById('list').value;
const totalCalories = document.getElementById('total-calories');
if (age.value === '' || weight.value === '' || height.value === '' || 80 < age.value || age.value < 15) {
errorMessage('Please make sure the values you entered are correct')
} else if (gender.id === 'male' && activity === "1") {
totalCalories.value = 1.2 * (66.5 + (13.75 * parseFloat(weight.value)) + (5.003 * parseFloat(height.value)) - (6.755 * parseFloat(age.value)));
} else if (gender.id === 'male' && activity === "2") {
totalCalories.value = 1.375 * (66.5 + (13.75 * parseFloat(weight.value)) + (5.003 * parseFloat(height.value)) - (6.755 * parseFloat(age.value)));
} else if (gender.id === 'male' && activity === "3") {
totalCalories.value = 1.55 * (66.5 + (13.75 * parseFloat(weight.value)) + (5.003 * parseFloat(height.value)) - (6.755 * parseFloat(age.value)));
} else if (gender.id === 'male' && activity === "4") {
totalCalories.value = 1.725 * (66.5 + (13.75 * parseFloat(weight.value)) + (5.003 * parseFloat(height.value)) - (6.755 * parseFloat(age.value)));
} else if (gender.id === 'male' && activity === "5") {
totalCalories.value = 1.9 * (66.5 + (13.75 * parseFloat(weight.value)) + (5.003 * parseFloat(height.value)) - (6.755 * parseFloat(age.value)));
} else if (gender.id === 'female' && activity === "1") {
totalCalories.value = 1.2 * (655 + (9.563 * parseFloat(weight.value)) + (1.850 * parseFloat(height.value)) - (4.676 * parseFloat(age.value)));
} else if (gender.id === 'female' && activity === "2") {
totalCalories.value = 1.375 * (655 + (9.563 * parseFloat(weight.value)) + (1.850 * parseFloat(height.value)) - (4.676 * parseFloat(age.value)));
} else if (gender.id === 'female' && activity === "3") {
totalCalories.value = 1.55 * (655 + (9.563 * parseFloat(weight.value)) + (1.850 * parseFloat(height.value)) - (4.676 * parseFloat(age.value)));
} else if (gender.id === 'female' && activity === "4") {
totalCalories.value = 1.725 * (655 + (9.563 * parseFloat(weight.value)) + (1.850 * parseFloat(height.value)) - (4.676 * parseFloat(age.value)));
} else {
totalCalories.value = 1.9 * (655 + (9.563 * parseFloat(weight.value)) + (1.850 * parseFloat(height)) - (4.676 * parseFloat(age.value)));
}
document.getElementById('results').style.display = 'block';
document.getElementById('loading').style.display = 'none';
}
function errorMessage(error) {
document.getElementById('results').style.display = 'none';
document.getElementById('loading').style.display = 'none';
const errorDiv = document.createElement('div');
const card = document.querySelector('.card');
const heading = document.querySelector('.heading');
errorDiv.className = 'alert alert-danger';
errorDiv.appendChild(document.createTextNode(error));
card.insertBefore(errorDiv, heading);
setTimeout(clearError, 4000);
}
function clearError() {
document.querySelector('.alert').remove();
}
body {
background-color: rgb(182, 132, 132);
font-family: 'Spline Sans', sans-serif;
}
.container-1 {
position: absolute;
background-color: blanchedalmond;
border-radius: 10px;
margin-top: 100px;
margin-left: 700px;
margin-right: 700px;
padding: 50px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 10px 10px rgb(148, 129, 129);
}
.container-2 {
position: absolute;
background-color: blanchedalmond;
border-radius: 10px;
margin-top: 100px;
margin-left: 700px;
margin-right: 700px;
padding: 50px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 10px 10px rgb(148, 129, 129);
}
.row {
margin-top: 20px;
}
.form-group {
margin-top: 20px;
text-align: center;
justify-content: center;
}
.form-group-row {
margin-top: 20px;
text-align: center;
justify-content: center;
}
.total {
justify-content: center;
text-align: center;
}
.gohome {}
#loading,
#results {
display: none;
}
#loading {
width: 100%;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="main.css">
<title>Calorie Calculator</title>
</head>
<body>
<div class="container-1">
<div>
<div>
<b><h1 class="header">Calorie Calculator</h1></b>
<form id="calorie-form">
<div class="form-group-row">
<b><label for="age" >Age</label></b>
<div>
<input type="number" class="form-control" id="age" placeholder="Ages 15-80">
</div>
</div>
<fieldset class="form-group">
<div class="row">
<b><legend>Gender</legend></b>
<div id="form-radio">
<div>
<input type="radio" id="male" name="customRadioInline1" checked="checked">
<b><label for="male">Male</label></b>
</div>
<div>
<input type="radio" id="female" name="customRadioInline1">
<b><label for="female">Female</label></b>
</div>
</div>
</div>
</fieldset>
<div class="form-group-row">
<b><label for="weight">Weight</label></b>
<div class="col-sm-10">
<input type="number" class="form-control" id="weight" placeholder="In kilograms">
</div>
</div>
<div class="form-group-row">
<b><label for="height">Height</label></b>
<div class="col-sm-10">
<input type="number" class="form-control" id="height" placeholder="In centimeters">
</div>
</div>
<div class="form-group-row">
<b><legend>Activity</legend></b>
<select id="list">
<option selected value="1">Sedentary (little or no exercise)</option>
<option value="2">Lightly active (light exercise/sports 1-3 days/week)</option>
<option value="3">Moderately active (moderate exercise/sports 3-5 days/week)</option>
<option value="4">Very active (hard exercise/sports 6-7 days a week)</option>
<option value="5">Extra active (very hard exercise/sports & physical job or 2x training)</option>
</select>
</div>
<div class="form-group">
<input type="submit" value="Calculate">
</div>
</form>
<div id="loading">
<img src="./img/Loading.gif" alt="">
</div>
<div id="results" class="total">
<b><h2>Total Calories</h2></b>
<div class="form-group">
<div class="input-group">
<input type="number" class="form-control" id="total-calories" disabled>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>

How to check current value on range slider?

I want to add the current range slider number on the range slider circle. I want my below range slider like this Screenshot.
$(".slider").on("change", function() {
console.clear()
var max = $("[name=plan]:checked").data('max')
var total = 0
//get total
$(".slider").each(function() {
total += parseInt($(this).val()) //calculate total
})
console.log("Total --" + total + " Max --" + max)
if (total > max) {
$(this).val(0) //set value to 0 again..
console.log("can't move..")
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="radio" id="starter" name="plan" data-max="12" value="starter" checked>
<label for="starter">Up to 12</label><br>
<input type="radio" id="plus" name="plan" data-max="24" value="plus">
<label for="plus">Up to 24</label><br>
<input type="range" name="slider-1" min="0" max="12" value="0" step="1" class="slider range-slider">
<output class="range-text">
<span class="number"></span><span class="text">Videos</span>
</output><br>
<input type="range" name="slider-1" min="0" max="12" value="0" step="1" class="slider range-slider"><br>
<input type="range" name="slider-1" min="0" max="12" value="0" step="1" class="slider range-slider"><br>
<input type="range" name="slider-1" min="0" max="12" value="0" step="1" class="slider range-slider"><br>

This solution by css-tricks.com, edited by me might help you. Unfortunately, you cannot position the 'bubble' over the default slider handle because then you can't click on the handle. In my opinion, it looks fairly good, and if you edit the slider styles themselves I think it could be very convincing.
If you want to make it exactly like in the screenshot, however, I really recommend reading this article by css-tricks.com as it really goes in depth about creating a custom slider.
var range = document.getElementById('range');
var bubble = document.getElementById('bubble');
range.addEventListener("input", () => {
setBubble(range, bubble);
});
setBubble(range, bubble);
function setBubble(range, bubble) {
const val = range.value;
const min = range.min ? range.min : 0;
const max = range.max ? range.max : 100;
const newVal = Number(((val - min) * 100) / (max - min));
bubble.innerHTML = val;
bubble.style.left = `calc(${newVal}% + (${8 - newVal * 0.15}px))`;
}
.range-parent {
position: relative;
margin: 0 auto 3rem;
}
.range {
width: 100%;
}
.bubble {
background: dodgerblue;
color: white;
padding: 4px 12px;
position: absolute;
border-radius: 4px;
left: 50%;
transform: translateX(-50%);
}
body {
margin: 2rem;
}
<div class="range-parent">
<input type="range" class="range" id="range">
<output class="bubble" id="bubble"></output>
</div>

I found my answer on jQuery Range Slider
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Slider - Custom handle</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#custom-handle {
width: 3em;
height: 1.6em;
top: 50%;
margin-top: -.8em;
text-align: center;
line-height: 1.6em;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
var handle = $( "#custom-handle" );
$( "#slider" ).slider({
create: function() {
handle.text( $( this ).slider( "value" ) );
},
slide: function( event, ui ) {
handle.text( ui.value );
}
});
} );
</script>
</head>
<body>
<div id="slider">
<div id="custom-handle" class="ui-slider-handle"></div>
</div>
</body>
</html>

jQuery: Control CSS with range slider

How is it possible to control CSS with a range slider via jQuery?
Some example code:
$('.font_size').on('input', function() {
var fontsizeval = $(this).attr('value');
var fontsizemin = $(this).attr('min');
var fontsizemax = $(this).attr('max');
$('.text').css("font-size", fontsizeval + "px");
});
* {
font-size: 12px;
}
.text {
font-size: 120px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text">Text
<div>
Font Size: <input class="font_size" type="range" value="120" min="30" max="200">
Would be very thankful for help!

use val() instead of attr("value")
$('.font_size').on('input', function() {
var fontsizeval = $(this).val();
var fontsizemin = $(this).attr('min');
var fontsizemax = $(this).attr('max');
$('.text').css("font-size", fontsizeval + "px");
});
* {
font-size: 12px;
}
.text {
font-size: 120px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Font Size: <input class="font_size" type="range" value="120" min="30" max="200">
<div class="text">Text
<div>

How do I make my iframe responsive for all devices?

I am not an expert in HTML, CSS, or JavaScript, but I have this website that needs to be responsive on all devices. However, it does not seem like it is working for some reason and instead creates major gaps of white space when I view the website on a mobile web browser:
Here is the code for it:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<style media="screen">
body {
background-color: #f0f0f0;
font: 1em verdana, arial, helvetica, sans-serif;
line-height: 0px;
}
h1,h2 {
font-size: 2em;
color: #f00;
text-align: center;
text-shadow: 0 0 0.06em #000,0 0 0.12em #000;
}
.af-textWrap {
display: block;
text-align: center;
color: #b7b7b7;
}
.af-element {
text-align: center;
}
#awf_field-90534028,
#awf_field-90534029 {
display: block;
width: 98%;
max-width: 28.125em;
margin: auto;
text-align: left;
}
.image {
display: block;
width: 98%;
max-width: 30em;
height: auto;
margin: auto;
}
</style>
</head>
<body>
<div id="worked"></div>
<script src="https://fast.wistia.com/embed/medias/cj7247tp29.jsonp" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script><div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><div class="wistia_embed wistia_async_cj7247tp29 videoFoam=true" style="height:100%;width:100%"> </div></div></div>
<h1>Offer Ends In:</h1>
<h2 id="time"></h2>
<!-- AWeber Web Form Generator 3.0.1 -->
<form class="af-form-wrapper" accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" method="post">
<input name="meta_web_form_id" type="hidden" value="604218668">
<input name="meta_split_id" type="hidden" value="">
<input name="listname" type="hidden" value="awlist4661276">
<input id="redirect_56ab2ff33416d920a3c24dc4d8e140f4" name="redirect" type="hidden" value="http://bloggingnetworkonline.com/InternetMarketing/?page_id=133&preview=true">
<input name="meta_adtracking" type="hidden" value="My_Web_Form">
<input name="meta_message" type="hidden" value="1">
<input name="meta_required" type="hidden" value="name,email">
<input name="meta_tooltip" type="hidden" value="name||First Name...,,email||Best Email...">
<div id="af-form-604218668" class="af-form">
<div id="af-body-604218668" class="af-body af-standards">
<div class="af-element">
<label class="previewLabel" for="awf_field-90534028"></label>
<div class="af-textWrap">
<input id="awf_field-90534028" class="text" tabindex="500" name="name" type="text" placeholder="First Name...">
</div>
</div>
<div class="af-element">
<label class="previewLabel" for="awf_field-90534029"></label>
<div class="af-textWrap">
<input id="awf_field-90534029" class="text" tabindex="500" name="email" type="text" placeholder="Best Email...">
</div>
</div>
<div class="af-element buttonContainer">
<input id="af-submit-image-604218668" class="image" tabindex="502" alt="Submit Form" name="submit" src="https://hostedimages-cdn.aweber-static.com/MTE0ODQyNQ==/original/d316599087b84f9498e3854009bdad52.png" type="image"/>
</div>
<div class="af-element privacyPolicy">
<p><strong>I respect your <a title="Privacy Policy" href="https://www.aweber.com/permission.htm" target="_blank" rel="nofollow">email privacy</a></strong></p>
<div class="af-clear"> </div>
</div>
</div>
</div>
<div style="display: none;"><img src="https://forms.aweber.com/form/displays.htm?id=bAwsTIwcbGwc" alt="">
</div>
</form>
<!-- /AWeber Web Form Generator 3.0.1 -->
<script>
(function() {
'use strict';
var handler = function() {
if (--sec < 0) {
sec = 59;
if (--min < 0) {
min = 0;
sec = 0;
}
}
var min1 = '0' + min + 'm';
var min2 = min + 'm';
var sec1 = '0' + sec + 's';
var sec2 = sec + 's';
var col = ':';
document.getElementById('time').textContent = (min < 10 ? min1 : min2) + col + (sec < 10 ? sec1 : sec2);
};
var sec = 0;
var min = 15;
handler();
setInterval(handler, 1000);
}());
</script>
</body>
</html>

Looks like your iframe is injected by JavaScript so I personally suggest adding a setInterval() to your code to monitor the iframe element. Once the iframe element is available, get the body in the iframe and set it's margin to 0.
$(function() {
$('#test').append('<iframe src="http://www.w3schools.com"></iframe>');
var timer = setInterval(function() {
$('iframe').load( function() {
$('iframe').contents().find("head").append($("<style type='text/css'>body{margin:0;}</style>"));
clearInterval( timer ); // Clear the interval
});
}, 10);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
</div>

Values not getting saved onsubmit of form using local storage

I want to capture 2 values (product name and energy consumption)from a form and store it using local Storage.
OnClick I want to display the stored values on the side of the form.
What is working
local storage is getting set.
Issues (in the commented function compareSetup)
1) My guess is I am not getting the selected product nor the energy values from the form itself.
2) wrote the display logic but getting error on that line
Uncaught SyntaxError: Unexpected identifier.
I tried 2 different ways. I am newbie hence trying different syntax
3) Resources tab in Chrome shows
callAnnual as undefined
callProduct as 0
4) alerts inside function did not work
I missing something. either logically or syntaxwise or both.
Can some one guide me please. Thanks for your time.
var wattage = {
'Artic King AEB': 100,
'Artic King ATMA': 200,
'Avanti Compact': 300,
'Bosch SS': 400,
'Bosch - SHXUC': 100,
'Asko DS': 200,
'Blomberg': 300,
'Amana': 400
};
var annualEnergy = 0;
var dailyEnergyConsumed = 0;
function configureDropDownLists(category, products) {
var refrigerators = new Array('Artic King AEB', 'Artic King ATMA', 'Avanti Compact', 'Bosch SS');
var dishWasher = new Array('Bosch - SHXUC', 'Asko DS', 'Blomberg', 'Amana');
//var wattage = {'Artic King AEB':100,'Artic King ATMA':200,'Avanti Compact':300;'Bosch SS':400,'Bosch - SHXUC':100;'Asko DS':200;'Blomberg':300;'Amana':400}
switch (category.value) {
case 'refrigerators':
products.options.length = 0;
for (i = 0; i < refrigerators.length; i++) {
createOption(products, refrigerators[i], refrigerators[i]);
}
break;
case 'dishWasher':
products.options.length = 0;
for (i = 0; i < dishWasher.length; i++) {
createOption(products, dishWasher[i], dishWasher[i]);
}
break;
default:
products.options.length = 0;
break;
}
}
function createOption(ddl, text, value) {
var opt = document.createElement('option');
opt.value = value;
opt.text = text;
ddl.options.add(opt);
}
function configureProductDropDownLists(product) {
document.getElementById('wattage').innerText = wattage[product.value];
}
function setConsumption(hrs) {
setConsumption();
}
dailyEnergyConsumption = function(hrs) {
dailyEnergyConsumed = 0;
dailyEnergyConsumed = parseFloat(hrs * parseInt(document.getElementById('wattage').innerText) / 1000).toFixed(2);
document.getElementById('dailyEnergyConsumptionVal').innerText = dailyEnergyConsumed + " kWh";
}
annualEnergyConsumption = function(days) {
annualEnergy = 0;
var allYear = document.getElementById('allYear');
var halfYear = document.getElementById('halfYear');
var threeMonths = document.getElementById('threeMonths');
var oneMonth = document.getElementById('oneMonth');
if (allYear || days != 365) {
annualEnergy = parseFloat(dailyEnergyConsumed * parseInt(days)).toFixed(2);
document.getElementById('annualEnergyConsumption').innerText = annualEnergy + " kWh";
} else if (days == 182 && !halfYear) {
annualEnergy = parseFloat(dailyEnergyConsumed * parseInt(days)).toFixed(2);
document.getElementById('annualEnergyConsumption').innerText = annualEnergy + " kWh";
} else if (days == 90 && !threeMonths) {
annualEnergy = parseFloat(dailyEnergyConsumed * parseInt(days)).toFixed(2);
document.getElementById('annualEnergyConsumption').innerText = annualEnergy + " kWh";
} else if (days == 30 && !oneMonth) {
annualEnergy = parseFloat(dailyEnergyConsumed * parseInt(days)).toFixed(2);
document.getElementById('annualEnergyConsumption').innerText = annualEnergy + " kWh";
}
}
/*
function compareSetup(){
// I am trying to set the local storage for 2 things : selected [product name and Annual Energy Consumption]. End goal is to use them inorder to plot a chart
//initialize the selected product and annual consumption by calling their latest values on submit
var submittedProduct = document.getElementById("products").options.selectedIndex;
var submittedAnnualEnergyConsumption = document.getElementById("annualEnergyConsumption").value;
//alert(submittedProduct);
//setting the local storage with a key and variable name which was defined above
localStorage.setItem("callProduct", submittedProduct);
localStorage.setItem("callAnnual", submittedAnnualEnergyConsumption);
//get Item with a key and display
var displayName = localStorage.getItem("callProduct");
//alert(callProduct);
displayName = document.getElementById("displayName");
var displayAnnual = document.getElementById("displayAnnual").innerHTML = localStorage.getItem parseInt(("callAnnual"));
// return false as I dont want the form to submit
return false;
}
*/
$(document).ready(function() {
$("#h1").click(function() {
$("#onesSelected").show();
$("#threeSelected").hide();
$("#sixSelected").hide();
$("#twentyFourSelected").hide();
});
$("#h3").click(function() {
$("#threeSelected").show();
$("#onesSelected").hide();
$("#sixSelected").hide();
$("#twentyFourSelected").hide();
});
$("#h6").click(function() {
$("#sixSelected").show();
$("#onesSelected").hide();
$("#threeSelected").hide();
$("#twentyFourSelected").hide();
});
$("#h24").click(function() {
$("#twentyFourSelected").show();
$("#onesSelected").hide();
$("#threeSelected").hide();
$("#sixSelected").hide();
});
});
/*
annualCost = function() {
// utility rate currently is hard coded but this will come from the database and shall be inputted by user once. Utility Rate does not change that often
var utilityRate = 0.11;
var button = document.getElementById('annualCost');
var annualCost = parseFloat( annualEnergy * utilityRate).toFixed(2);
document.getElementById('annualCostOperation').innerText= "$" + annualCost ;
}
*/
#leftColumn {
width: 600px;
float: left;
}
.placeholderText {
font: bold 12px/30px Georgia, serif;
}
body {
padding-left: 45px;
}
#annualEnergyConsumption {
font: bold 25px arial, sans-serif;
color: #00ff00;
}
#dailyEnergyConsumptionVal {
font: bold 25px arial, sans-serif;
color: #00ff00;
}
#annualCostOperation {
font: bold 40px arial, sans-serif;
color: #00ff00;
}
.dailyButInline {
display: inline;
}
#wattage {
position: absolute;
left: 160px;
top: 130px;
font: bold 25px arial, sans-serif;
color: #00ff00;
}
/* mouse over link */
button:hover {
background-color: #b6b6b6;
}
#onesSelected {
position: absolute;
left: 53px;
top: 246px;
background-color: #00ff00;
display: none;
width: 99px;
height: 5px;
}
#threeSelected {
position: absolute;
left: 156px;
top: 246px;
background-color: #00ff00;
display: none;
width: 99px;
height: 5px;
}
#sixSelected {
position: absolute;
left: 259px;
top: 246px;
background-color: #00ff00;
display: none;
width: 99px;
height: 5px;
}
#twentyFourSelected {
position: absolute;
left: 362px;
top: 246px;
background-color: #00ff00;
display: none;
width: 113px;
height: 5px;
}
<h2>Annual Energy Consumption and Cost Calculator</h2>
<form method="post" onSubmit="return compareSetup()">
<div id="leftColumn">
<div>
<span class="placeholderText">Choose Category</span>
<span>
<select id="ddl" onchange="configureDropDownLists(this,document.getElementById('products'))">
<option value="">Select a Category</option>
<option value="refrigerators">Refrigerators</option>
<option value="dishWasher">DishWasher</option>
</select>
</span>
</br>
<span class="placeholderText">Select a Product</span>
<span>
<select id="products" onchange="configureProductDropDownLists(this)">
<option selected>--------------------------</option>
</select>
</span>
</div>
<div>
<span class="placeholderText">Wattage</span>
<span id="wattage">---</span>
</br>
</br>
</div>
<div id="buttonBoundary">
<div class="placeholderText">Estimated Daily Use</div>
<div class="dailyButInline">
<button type="button" id="h1" onclick="dailyEnergyConsumption(1)">Not a Lot</br>1 hour per day</button>
</div>
<div class="dailyButInline">
<button type="button" id="h3" onclick="dailyEnergyConsumption(3)">Average</br>3 hour per day</button>
</div>
<div class="dailyButInline">
<button type="button" id="h6" onclick="dailyEnergyConsumption(6)">A Lot</br>6 hour per day</button>
</div>
<div class="dailyButInline">
<button type="button" id="h24" onclick="dailyEnergyConsumption(24)">Always On</br>24 hours per day</button>
</div>
<div id="onesSelected"></div>
<div id="threeSelected"></div>
<div id="sixSelected"></div>
<div id="twentyFourSelected"></div>
</br>
</br>
</div>
<div>
<span class="placeholderText">Daily Energy Consumption</span>
</br>
<div id="dailyEnergyConsumptionVal">---</div>
</br>
</div>
<div>
<span class="placeholderText">Estimated Yearly Use</span>
</br>
<input type="radio" name="usageRadio" value="AllYear" id="allYear" onclick="annualEnergyConsumption(365)" />
<label for="allYear">All year</label>
<input type="radio" name="usageRadio" value="halfYear" id="halfYear" onclick="annualEnergyConsumption(182)" />
<label for="halfYear">6 Months</label>
<input type="radio" name="usageRadio" value="threeMonths" id="threeMonths" onclick="annualEnergyConsumption(90)" />
<label for="threeMonths">3 Months</label>
<input type="radio" name="usageRadio" value="oneMonth" id="oneMonth" onclick="annualEnergyConsumption(30)" />
<label for="oneMonth">1 Month</label>
<!-- <div id="daysUsed"><input type="number" id="hour" maxlength="2" min="1" onchange="annualEnergyConsumption(this.value)"></br> -->
</div>
</br>
<div>
<span class="placeholderText">Energy Consumption</span>
</br>
<div id="annualEnergyConsumption">---</div>
</br>
</div>
<input type="submit" value="Save Product" />
</div>
<div id="right">
<div id="displayName">Selected Product 1</div>
<div id="displayAnnual">Selected Product1's Annual Consumption</div>
</div>
<!--
<div id="right">
</form>
<div>
<span class="placeholderText">Enter your Utility Rate per Kw/h</span></br>
<span><input type="number" id="utilityRate" /></span>
</br></br>
</div>
<div>
<span class="placeholderText"><button id="annualCost" onclick='annualCost()'>Annual Cost to Operate</button></span></br>
<span id="annualCostOperation" /></span>
</div>
</div>
-->
</form>

Your scope access of '$' as undefined should be a dead give away as to why the remainder of the code is not working. Once you have called the '$' bit of code within the proper scope it will work.