We Keep Coding

how do i access max and can use it in my function?

So at the moment in my checkMaxinput function i wrote my max value was 15 and 100 in backend-benutzer and app-benutzer.
I want the max value to replace it so i dont have to write it manually everytime the max value changes how would i do that? i tried this.max but it didnt work how do i access the max value and can implement that in my function?
var percent = 1; //Standardvalue for yearly
var percentmonthly = 1.2 //Standardvalue for monthly
//diese funktion wird ausgelöst wenn das html-dokument vollstaendig geladen wird
document.addEventListener("DOMContentLoaded", function (event) {
var updatecolor = document.querySelectorAll('.updatecolor');
//anzeige der farbe im range slider
document.querySelectorAll(".updatecolor").forEach(updateinputs =>
updateinputs.addEventListener("input", function () {
var percent = calcPercent(this.value, this.min, this.max);
const bg = getComputedStyle(this).getPropertyValue('--background');
const slider = getComputedStyle(this).getPropertyValue('--slider');
var colorchanger = this.getAttribute('rangecolorid');
var sliderselect = document.querySelector('#' + colorchanger);
sliderselect.setAttribute(
'style',
` background:linear-gradient(to right,${slider},${slider} ${percent}%,${bg} ${percent}%) `
)
})
);
//Initiale Anzeige der Daten
calcSum();
});
//hides when app-benutzer or bürosoftware-benutzer is at 100%
function checkMaxInput(element) {
var hidden = document.getElementById('hiddenMax');
if (hidden) {
this.value == this.max ? (hidden.style.visibility = 'visible') : (hidden.style.visibility = 'hidden')
}
}
//funktion damit der Slider sich beim eingeben vom input field bewegt
function updateUser(val, inputtype) {
if (inputtype == 'Appuserrangecolor') {
document.getElementById('AppInput').value = val;
}
if (inputtype == 'AppInput') {
document.getElementById('Appuserrangecolor').value = val;
}
if (inputtype == 'Backendrangecolor') {
document.getElementById('BackendInput').value = val;
}
if (inputtype == 'BackendInput') {
document.getElementById('Backendrangecolor').value = val;
}
calcSum();
checkMaxInput();
}
//Calculates the percentage of the currentval with the base of a min and max value
function calcPercent(curval, min, max) {
return ((curval - min) / (max - min)) * 100;
}
//Rechnung für die Anzahl von Backend und App-Benutzern
function calcSum() {
}
function checkMaxInput() {
var hidden = document.getElementById("hiddenMax");
if (
document.getElementById("AppInput").value === "100" ||
document.getElementById("BackendInput").value === "15"
) {
hidden.style.visibility = "visible";
} else {
hidden.style.visibility = "hidden";
}
}
html, body {
background-color: rgb(255, 255, 255);
height: 100%;
margin: 0;
}
header{
text-align: center;
font-size: 20px;
}
body, table, select {
font-size: 12px;
}
input[type=range]{
border-radius: 32px;
height: 10px;
cursor: pointer;
}
*, *::before, *::after {
box-sizing: border-box;
}
.grid-container {
display: grid;
grid-template-columns:600px 250px ;
grid-auto-rows: minmax(150px, auto);
justify-items: stretch;
align-items: stretch;
}
.grid-item-1 {
align-self: start;
justify-self: center;
}
.text-grey{
color:grey;
}
.grid-container {
padding: 60px;
width: 100%;
grid-template-columns: 250px 200px;
}
#Backendrangecolor, #Appuserrangecolor, #BackendInput, #AppInput {
--background: rgb(96,125,139,0.33);
--slider: #00ba7a;
background: var(--background);
-webkit-appearance: none;
width: 150px;
}
#Backendrangecolor, #Appuserrangecolor :-moz-range-thumb {
background: purple;
}
.grid-item {
padding: 20px;
padding-top: 15px;
background-color: #f8f8f8;
color: #222;
border: 7px solid rgba(96,125,139,0.33);
}
.grid-item:nth-child(odd) {
background-color: #f8f8f8;
}
.target {
display: none;
}
/* Base styling*/
body {
background-color: #f8f8f8;
max-width: 768px;
margin: 0 auto;
padding: 1em 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a {
text-decoration: none;
}
}
.price-container .text {
width: 80px;
display: inline-block;
text-align: right;
}
.price-container .value {
width: 30px;
display: inline-block;
text-align: left;
}
.button {
text-align: center;
width: 75px;
height: auto;
font-size:8px;
color:#f8f8f8 ;
background-color: rgba(255,167,55,1);
border: rgba(255,167,55,1);
}
<html>
<head>
<title>Document</title>
</head>
<body>
<div class="grid-container">
<div style="width: 270px"class="grid-item">
<header>Preiskalkulator</header>
<div class="slidecontainer">
App-Benutzer: <br>
<input id="Appuserrangecolor" value="0" type="range" rangecolorid="Appuserrangecolor" min="0" max="100" oninput="updateUser(this.value, 'Appuserrangecolor');" class='appuser updatecolor'></input>
<input class='updatecolor' style="width: 30px;border-color: var(--form_border_color);" type="text" id="AppInput" value="0" placeholder="1-100" rangecolorid="Appuserrangecolor" min="0" max="100" oninput="this.value = this.value > 100 ? 100 : Math.abs(this.value); updateUser(this.value, 'AppInput');"><br>
Bürosoftware-Benutzer: <br>
<input id="Backendrangecolor" value="1" type="range" rangecolorid="Backendrangecolor" min="1" max="15" oninput="updateUser(this.value, 'Backendrangecolor'); " class='backenduser updatecolor'></input>
<input class='updatecolor' style="width: 30px;border-color: var(--form_border_color);" type="text" id="BackendInput" rangecolorid="Backendrangecolor" value="1" min="1" max="15" placeholder="1-15" oninput="this.value = this.value > 15 ? 15 : Math.abs(this.value,); updateUser(this.value, 'BackendInput');"><br>
</div>
<div class="grid-item" style="width: 270px">
<div id="hiddenMax"class="button" style="margin-left: auto;margin-right: auto;margin-top: 10px;">
<button class="button" ><a class="button" target="blank" href="https://solutions.stressfrei.de/kontakt/">Größeres Packet auf Anfrage</a></button>
</div>
</div>
</div>
</body>
</html>

I assume you want to know how to get the max value of your input.
This can be done with the function getAttribute('max').
Documentation of getAttribute
function checkMaxInput(element) {
var hidden = document.getElementById('hiddenMax');
if (hidden) {
element.value == element.getAttribute('max') ? (hidden.style.visibility = 'visible') : (hidden.style.visibility = 'hidden')
}
}

How to make button appear when input reaches max value?

So i want the button to appear when the slider reaches 100% in either one of App-Benutzer or Bürosoftware-Benutzer and when its not at 100% i want it to dissappear.
function checkMaxInput(element) {
var hidden = document.getElementById('hiddenMax');
if (hidden) {
this.value == this.max ? (hidden.style.visibility = 'visible') : (hidden.style.visibility = 'hidden')
}
}
I tried to create a function but i guess i didnt do it right yet.
var percent = 1; //Standardvalue for yearly
var percentmonthly = 1.2 //Standardvalue for monthly
//diese funktion wird ausgelöst wenn das html-dokument vollstaendig geladen wird
document.addEventListener("DOMContentLoaded", function (event) {
var updatecolor = document.querySelectorAll('.updatecolor');
//anzeige der farbe im range slider
document.querySelectorAll(".updatecolor").forEach(updateinputs =>
updateinputs.addEventListener("input", function () {
var percent = calcPercent(this.value, this.min, this.max);
const bg = getComputedStyle(this).getPropertyValue('--background');
const slider = getComputedStyle(this).getPropertyValue('--slider');
var colorchanger = this.getAttribute('rangecolorid');
var sliderselect = document.querySelector('#' + colorchanger);
sliderselect.setAttribute(
'style',
` background:linear-gradient(to right,${slider},${slider} ${percent}%,${bg} ${percent}%) `
)
})
);
//Initiale Anzeige der Daten
calcSum();
});
//hides when app-benutzer or bürosoftware-benutzer is at 100%
function checkMaxInput(element) {
var hidden = document.getElementById('hiddenMax');
if (hidden) {
this.value == this.max ? (hidden.style.visibility = 'visible') : (hidden.style.visibility = 'hidden')
}
}
//funktion damit der Slider sich beim eingeben vom input field bewegt
function updateUser(val, inputtype) {
if (inputtype == 'Appuserrangecolor') {
document.getElementById('AppInput').value = val;
}
if (inputtype == 'AppInput') {
document.getElementById('Appuserrangecolor').value = val;
}
if (inputtype == 'Backendrangecolor') {
document.getElementById('BackendInput').value = val;
}
if (inputtype == 'BackendInput') {
document.getElementById('Backendrangecolor').value = val;
}
calcSum();
}
//Calculates the percentage of the currentval with the base of a min and max value
function calcPercent(curval, min, max) {
return ((curval - min) / (max - min)) * 100;
}
//Rechnung für die Anzahl von Backend und App-Benutzern
function calcSum() {
}
//funktion um preisstaffel zu berechnen
function getPrice(pricemodels, percent, amount) {
for (var key in pricemodels) {
//If key is higher than the selected amount, return the value
if (parseInt(key) >= parseInt(amount)) {
return pricemodels[key] * percent;
}
}
}
html, body {
background-color: rgb(255, 255, 255);
height: 100%;
margin: 0;
}
header{
text-align: center;
font-size: 20px;
}
body, table, select {
font-size: 12px;
}
input[type=range]{
border-radius: 32px;
height: 10px;
cursor: pointer;
}
*, *::before, *::after {
box-sizing: border-box;
}
.grid-container {
display: grid;
grid-template-columns:600px 250px ;
grid-auto-rows: minmax(150px, auto);
justify-items: stretch;
align-items: stretch;
}
.grid-item-1 {
align-self: start;
justify-self: center;
}
.text-grey{
color:grey;
}
.grid-container {
padding: 60px;
width: 100%;
grid-template-columns: 250px 200px;
}
#Backendrangecolor, #Appuserrangecolor, #BackendInput, #AppInput {
--background: rgb(96,125,139,0.33);
--slider: #00ba7a;
background: var(--background);
-webkit-appearance: none;
width: 150px;
}
#Backendrangecolor, #Appuserrangecolor :-moz-range-thumb {
background: purple;
}
.grid-item {
padding: 20px;
padding-top: 15px;
background-color: #f8f8f8;
color: #222;
border: 7px solid rgba(96,125,139,0.33);
}
.grid-item:nth-child(odd) {
background-color: #f8f8f8;
}
.target {
display: none;
}
/* Base styling*/
body {
background-color: #f8f8f8;
max-width: 768px;
margin: 0 auto;
padding: 1em 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a {
text-decoration: none;
}
}
.price-container .text {
width: 80px;
display: inline-block;
text-align: right;
}
.price-container .value {
width: 30px;
display: inline-block;
text-align: left;
}
.button {
text-align: center;
width: 75px;
height: auto;
font-size:8px;
color:#f8f8f8 ;
background-color: rgba(255,167,55,1);
border: rgba(255,167,55,1);
}
<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src="./app.js"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="grid-container">
<div style="width: 270px"class="grid-item">
<header>Preiskalkulator</header>
<div class="slidecontainer">
App-Benutzer: <br>
<input id="Appuserrangecolor" value="0" type="range" rangecolorid="Appuserrangecolor" min="0" max="100" oninput="updateUser(this.value, 'Appuserrangecolor');" class='appuser updatecolor'></input>
<input class='updatecolor' style="width: 30px;border-color: var(--form_border_color);" type="text" id="AppInput" value="0" placeholder="1-100" rangecolorid="Appuserrangecolor" min="0" max="100" oninput="this.value = this.value > 100 ? 100 : Math.abs(this.value); updateUser(this.value, 'AppInput');"><br>
Bürosoftware-Benutzer: <br>
<input id="Backendrangecolor" value="1" type="range" rangecolorid="Backendrangecolor" min="1" max="15" oninput="updateUser(this.value, 'Backendrangecolor'); " class='backenduser updatecolor'></input>
<input class='updatecolor' style="width: 30px;border-color: var(--form_border_color);" type="text" id="BackendInput" rangecolorid="Backendrangecolor" value="1" min="1" max="15" placeholder="1-15" oninput="this.value = this.value > 15 ? 15 : Math.abs(this.value,); updateUser(this.value, 'BackendInput');"><br>
</div>
<div class="grid-item" style="width: 270px">
<div id="hiddenMax"class="button" style="margin-left: auto;margin-right: auto;margin-top: 10px;">
<button class="button" ><a class="button" target="blank" href="https://solutions.stressfrei.de/kontakt/">Größeres Packet auf Anfrage</a></button>
</div>
</div>
</div>
</body>
</html>

You can rewrite checkMaxInput first
Since updateUser will sync range input and text input
We can simply pick just two input that represent App-Benutzer and Bürosoftware-Benutzer as condition
If slider reachs 100% means that App-Benutzer's value will be 100 and Bürosoftware-Benutzer's value will be 15
So, we can rewrite checkMaxInput like below:
function checkMaxInput() {
var hidden = document.getElementById("hiddenMax");
if (
document.getElementById("AppInput").value === "100" ||
document.getElementById("BackendInput").value === "15"
) {
hidden.style.visibility = "visible";
} else {
hidden.style.visibility = "hidden";
}
}
Then, you can call it after updateUser finished task to sync input's value
For example
function updateUser(val, inputtype) {
if (inputtype == "Appuserrangecolor") {
document.getElementById("AppInput").value = val;
}
if (inputtype == "AppInput") {
document.getElementById("Appuserrangecolor").value = val;
}
if (inputtype == "Backendrangecolor") {
document.getElementById("BackendInput").value = val;
}
if (inputtype == "BackendInput") {
document.getElementById("Backendrangecolor").value = val;
}
calcSum();
checkMaxInput();
}
Finally, if you want the button was hidden initially
You have to add these two line in your DOMContentLoaded's callback function
var hidden = document.getElementById("hiddenMax");
hidden.style.visibility = "hidden";
Or simply write style visibility: hidden; at #hiddenMax in HTML

I suggest to use a pure function to check if the element needs to be shown or not, something like this
function checkMaxInput(element) {
var attrs = element.attributes;
return element.value == attrs.max.nodeValue;
}
function updateUser(element, inputtype) {
var hidden = document.getElementById('hiddenMax');
checkMaxInput(element) ?
hidden.style.visibility = 'visible' :
hidden.style.visibility = 'hidden';
}
see a simplified example here https://jsbin.com/cucemujiyo/1/edit?html,css,js,output

How to get plus minus to update button text

I have been trying to get a plus minus button integrated into my number input. I have been able to update the field between the buttons with the new value however am trying to get that value to populate a second area (specifically a button) If I select the number input and click up or down arrows both the input and the button text are successfully updating, I am just stuck on mingling the two together.
How do I get the button to load the value of the number field after clicking the plus and minus buttons?
var adultModal = document.getElementById("adultModal");
var adultBtn = document.getElementById("guests");
var adultSpan = document.getElementsByClassName("adultClose")[0];
adultBtn.onclick = function() {
adultModal.style.display = "block";
}
adultSpan.onclick = function() {
adultModal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == adultModal) {
adultModal.style.display = "none";
}
}
// NUMBER FIELD PLUS / MINUS SCRIPT
function incrementValue(e) {
e.preventDefault();
var fieldName = $(e.target).data('field');
var parent = $(e.target).closest('div');
var currentVal = parseInt(parent.find('input[name=' + fieldName + ']').val(), 10);
if (!isNaN(currentVal)) {
parent.find('input[name=' + fieldName + ']').val(currentVal + 1);
} else {
parent.find('input[name=' + fieldName + ']').val(0);
}
}
function decrementValue(e) {
e.preventDefault();
var fieldName = $(e.target).data('field');
var parent = $(e.target).closest('div');
var currentVal = parseInt(parent.find('input[name=' + fieldName + ']').val(), 10);
if (!isNaN(currentVal) && currentVal > 0) {
parent.find('input[name=' + fieldName + ']').val(currentVal - 1);
} else {
parent.find('input[name=' + fieldName + ']').val(0);
}
}
$('.input-group').on('click', '.button-plus', function(e) {
incrementValue(e);
});
$('.input-group').on('click', '.button-minus', function(e) {
decrementValue(e);
});
function updateGuests() {
let adultNumb = document.getElementById("adultQuantity");
let produceAdult = document.getElementById('adultValue');
produceAdult.innerHTML = adultNumb.value;
let childNumb = document.getElementById("childQuantity");
let produceChild = document.getElementById('childValue');
produceChild.innerHTML = childNumb.value;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 5px 20px;
border: 1px solid #888;
width: 280px;
position: relative;
}
/* The Close Button */
.adultClose,
.childClose {
color: #aaaaaa;
position: absolute;
right: 5px;
top: 0px;
font-size: 22px;
font-weight: bold;
cursor: pointer;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
/* INPUT NUMBER PLUS/MINUS BUTTONS */
input,
textarea {
border: 1px solid #eeeeee;
box-sizing: border-box;
margin: 0;
outline: none;
padding: 10px;
}
input[type="button"] {
-webkit-appearance: button;
cursor: pointer;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
.input-group {
clear: both;
margin: 15px 0;
position: relative;
}
.input-group input[type='button'] {
background-color: #eeeeee;
min-width: 38px;
width: auto;
transition: all 300ms ease;
}
.input-group .button-minus,
.input-group .button-plus {
font-weight: bold;
height: 38px;
padding: 0;
width: 38px;
position: relative;
}
.input-group .quantity-field {
position: relative;
height: 38px;
left: -6px;
text-align: center;
width: 62px;
display: inline-block;
font-size: 13px;
margin: 0 0 5px;
resize: vertical;
}
.button-plus {
left: -13px;
}
input[type="number"] {
-moz-appearance: textfield;
-webkit-appearance: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Guests</h3>
<button id="guests" type="button" class="adults">
<span class="bw-toggle__value"><span id="adultValue">2</span> Adults <span class="bw-divide">/</span> <span id="childValue">0</span> Children</span>
</button>
<!-- Adult Modal -->
<div id="adultModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="adultClose">×</span>
<div class="input-group">
ADULTS
<input type="button" value="-" class="button-minus" data-field="quantity">
<input type="number" step="1" max="" value="2" name="quantity" class="quantity-field" id="adultQuantity" onchange="updateGuests()">
<input type="button" value="+" class="button-plus" data-field="quantity">
</div>
<div class="input-group">
CHILDREN
<input type="button" value="-" class="button-minus" data-field="quantity">
<input type="number" step="1" max="" value="0" name="quantity" class="quantity-field" id="childQuantity" onchange="updateGuests()">
<input type="button" value="+" class="button-plus" data-field="quantity">
</div>
</div>
</div>

Just call updateGuests() in your increment and decrement functions. You were 99% there.
I'd encourage you to move away from jQuery. You're halfway there with this code anyway, and it's a crutch against robust learning of JavaScript. These operations are simple enough that you just don't need it. See https://youmightnotneedjquery.com.
var adultModal = document.getElementById("adultModal");
var adultBtn = document.getElementById("guests");
var adultSpan = document.getElementsByClassName("adultClose")[0];
adultBtn.onclick = function() {
adultModal.style.display = "block";
}
adultSpan.onclick = function() {
adultModal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == adultModal) {
adultModal.style.display = "none";
}
}
// NUMBER FIELD PLUS / MINUS SCRIPT
function incrementValue(e) {
e.preventDefault();
var fieldName = $(e.target).data('field');
var parent = $(e.target).closest('div');
var currentVal = parseInt(parent.find('input[name=' + fieldName + ']').val(), 10);
if (!isNaN(currentVal)) {
parent.find('input[name=' + fieldName + ']').val(currentVal + 1);
} else {
parent.find('input[name=' + fieldName + ']').val(0);
}
updateGuests();
}
function decrementValue(e) {
e.preventDefault();
var fieldName = $(e.target).data('field');
var parent = $(e.target).closest('div');
var currentVal = parseInt(parent.find('input[name=' + fieldName + ']').val(), 10);
if (!isNaN(currentVal) && currentVal > 0) {
parent.find('input[name=' + fieldName + ']').val(currentVal - 1);
} else {
parent.find('input[name=' + fieldName + ']').val(0);
}
updateGuests();
}
$('.input-group').on('click', '.button-plus', function(e) {
incrementValue(e);
});
$('.input-group').on('click', '.button-minus', function(e) {
decrementValue(e);
});
function updateGuests() {
let adultNumb = document.getElementById("adultQuantity");
let produceAdult = document.getElementById('adultValue');
produceAdult.innerHTML = adultNumb.value;
let childNumb = document.getElementById("childQuantity");
let produceChild = document.getElementById('childValue');
produceChild.innerHTML = childNumb.value;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 5px 20px;
border: 1px solid #888;
width: 280px;
position: relative;
}
/* The Close Button */
.adultClose,
.childClose {
color: #aaaaaa;
position: absolute;
right: 5px;
top: 0px;
font-size: 22px;
font-weight: bold;
cursor: pointer;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
/* INPUT NUMBER PLUS/MINUS BUTTONS */
input,
textarea {
border: 1px solid #eeeeee;
box-sizing: border-box;
margin: 0;
outline: none;
padding: 10px;
}
input[type="button"] {
-webkit-appearance: button;
cursor: pointer;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
.input-group {
clear: both;
margin: 15px 0;
position: relative;
}
.input-group input[type='button'] {
background-color: #eeeeee;
min-width: 38px;
width: auto;
transition: all 300ms ease;
}
.input-group .button-minus,
.input-group .button-plus {
font-weight: bold;
height: 38px;
padding: 0;
width: 38px;
position: relative;
}
.input-group .quantity-field {
position: relative;
height: 38px;
left: -6px;
text-align: center;
width: 62px;
display: inline-block;
font-size: 13px;
margin: 0 0 5px;
resize: vertical;
}
.button-plus {
left: -13px;
}
input[type="number"] {
-moz-appearance: textfield;
-webkit-appearance: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Guests</h3>
<button id="guests" type="button" class="adults">
<span class="bw-toggle__value"><span id="adultValue">2</span> Adults <span class="bw-divide">/</span> <span id="childValue">0</span> Children</span>
</button>
<!-- Adult Modal -->
<div id="adultModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="adultClose">×</span>
<div class="input-group">
ADULTS
<input type="button" value="-" class="button-minus" data-field="quantity">
<input type="number" step="1" max="" value="2" name="quantity" class="quantity-field" id="adultQuantity" onchange="updateGuests()">
<input type="button" value="+" class="button-plus" data-field="quantity">
</div>
<div class="input-group">
CHILDREN
<input type="button" value="-" class="button-minus" data-field="quantity">
<input type="number" step="1" max="" value="0" name="quantity" class="quantity-field" id="childQuantity" onchange="updateGuests()">
<input type="button" value="+" class="button-plus" data-field="quantity">
</div>
</div>
</div>

Previous question button in JavaScript and saving users answers

I'm trying to make a JavaScript quiz and I need the user to be able to go to the previous question to see or change his/her answer . The next button works with me but I have a problem with the previous button . what I also need is when the user goes back, the original answer should be saved. here is my code. I also put it on codepen
const questionNumber = document.querySelector(".question_number");
const questionText = document.querySelector(".question_text");
const optionContainer = document.querySelector(".option_container");
const answerIndecatorContainer = document.querySelector(".answer_indicator");
const homeBox = document.querySelector(".home_box");
const quizBox = document.querySelector(".quiz_box");
const resultBox = document.querySelector(".result_box");
const registerBox = document.querySelector(".register_box");
const timeBox = document.querySelector("time_box");
let questionCounter = 0;
let currentQuestion;
let availableQuestions = [];
let availableOptions = [];
let correctAnswers = 0;
let attempt = 0;
//push the question into availableQuestions array
function setAvailableQuestions(){
const totalQuestion = quiz.length;
for (let i=0; i<totalQuestion; i++){
availableQuestions.push(quiz[i])
}
}
// set question number and question options
function getNewQuestions(){
//set question number
questionNumber.innerHTML = "Question " + (questionCounter +1) + " of " + quiz.length;
// set question text
//get random questions
const questionIndex = availableQuestions[Math.floor(Math.random() * availableQuestions.length)]
currentQuestion = questionIndex;
questionText.innerHTML = currentQuestion.q;
//get the position of 'questionIndex' from the availableQuestions array
const index1 = availableQuestions.indexOf(questionIndex);
// remove the questionIndex from the availableQuestions array, so that the question does not repeat
availableQuestions.splice(index1,1);
//console.log(questionIndex)
//console.log(availableQuestions)
//set options
//get the length of options
const optionLen = currentQuestion.options.length
//push options into availableOptions array
for (let i=0; i<optionLen; i++){
availableOptions.push(i)
}
optionContainer.innerHTML = '';
let animationDelay = 0.15;
//create options in html
for(let i=0; i<optionLen; i++){
//random options
const optionIndex = availableOptions[Math.floor(Math.random() * availableOptions.length)];
//get the position of optionIndex from the availableOptions
const index2 = availableOptions.indexOf(optionIndex);
//remove the optionIndex from availableOptions
availableOptions.splice(index2,1);
const option = document.createElement("div");
option.innerHTML = currentQuestion.options[optionIndex];
option.id = optionIndex;
option.style.animationDelay= animationDelay + 's';
animationDelay = animationDelay + 0.15;
option.className = "option";
optionContainer.appendChild(option)
option.setAttribute("onclick", "getResult(this)");
}
questionCounter++
}
//get result of current attempt
function getResult(element){
const id = parseInt(element.id);
//get the answer by compairing the id of the options
if (id === currentQuestion.answer){
//set the green color to the correct option
element.classList.add("correct");
//add color to indector if answer is correct
updateAnswerIndecator("correct");
correctAnswers++;
}else{
//set the red color to the incorrect option
element.classList.add("wrong");
//add color to indector if answer is wrong
updateAnswerIndecator("wrong");
}
attempt++;
//unclickableOptions();
}
/*make all options unclickable once the user select
function unclickableOptions(){
const optionLen = optionContainer.children.length;
for(let i=0 ; i<optionLen ; i++){
optionContainer.children[i].classList.add("aready-answered");
}
}*/
function answerIndecator(){
answerIndecatorContainer.innerHTML = '';
const totalQuestion = quiz.length;
for (let i=0 ; i<totalQuestion ; i++){
const indecator = document.createElement("div");
answerIndecatorContainer.appendChild(indecator);
}
} function updateAnswerIndecator(markType){
answerIndecatorContainer.children[questionCounter-1].classList.add(markType);
}
function next(){
if (questionCounter === quiz.length){
quizOver();
}else{
getNewQuestions();
}
//
}
//Previous button
/*function previous(){
if (questionCounter == 0) {
questionCounter = quiz.length - 1;
} // reset question
else {
questionCounter--;
}
}*/
//
function quizOver(){
//when the quiz is over, the timer stops
//window.clearInterval(update);
clearInterval(countdownTimer);
upgradeTime = "-";
//show the registrer box
registerBox.classList.remove("hide");
//hide quiz box
quizBox.classList.add("hide");
}
function register(){
//show the result box
resultBox.classList.remove("hide");
//
registerBox.classList.add("hide");
quizResult();
}
//get the quiz result
function quizResult(){
resultBox.querySelector(".total_question").innerHTML = quiz.length;
resultBox.querySelector(".total_attempt").innerHTML = attempt;
resultBox.querySelector(".total_correct").innerHTML = correctAnswers;
resultBox.querySelector(".total_wrong").innerHTML = attempt - correctAnswers;
const persentage = (correctAnswers/quiz.length)*100;
resultBox.querySelector(".persentage").innerHTML = persentage.toFixed(2) + "%";
resultBox.querySelector(".total_score").innerHTML = correctAnswers + " / " + quiz.length;
}
function resetQuiz(){
questionCounter = 0;
correctAnswers = 0;
attempt = 0;
}
function tryAgainQuiz(){
//hide the resultBox
resultBox.classList.add("hide");
//show the quizBox
quizBox.classList.remove("hide");
resetQuiz();
startQuiz();
}
function goToHome(){
//hide the result box
resultBox.classList.add("hide");
//show home box
homeBox.classList.remove("hide");
resetQuiz();
}
//###STARTING POINT###
function startQuiz() {
//start timer
upgradeTime = 20;
seconds = upgradeTime;
//hide home Box
homeBox.classList.add("hide");
//show the quiz box
quizBox.classList.remove("hide");
//first we set all questions in availableQuestions array
setAvailableQuestions();
//second we will call the getNewQuestions() funcrion
getNewQuestions();
//to create indecator of answers
answerIndecator();
}
function timer() {
var days = Math.floor(seconds/24/60/60);
var hoursLeft = Math.floor((seconds) - (days*86400));
var hours = Math.floor(hoursLeft/3600);
var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
var minutes = Math.floor(minutesLeft/60);
var remainingSeconds = seconds % 60;
function pad(n) {
return (n < 10 ? "0" + n : n);
}
document.getElementById('countdown').innerHTML = "الوقت المتبقي :" + pad(minutes) + ":" + pad(remainingSeconds);
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = "انتهى الوقت";
quizBox.classList.add("hide");
registerBox.classList.remove("hide");
//show the result box
/*resultBox.classList.remove("hide");
quizResult();*/
} else {
seconds--;
}
}
var countdownTimer = setInterval('timer()', 1000);
window.onload = function (){
homeBox.querySelector(".total_question").innerHTML = quiz.length;
}
//array of objects
const quiz = [
{
q:' أوجد قيمة: \(\left( {3 + \sqrt 3 } \right) - \sqrt 3 + 18\) ',
options:['٨٤','\(81 + \sqrt 6 \)','٧٨','٧٩'],
answer:0
},
{
q:' HOW',
options:['٣٤,١ دقيقة ','٣,١٤ دقيقة ','٣١٤ دقيقة','٣٤١ دقيقة '],
answer:0
},
{
q:'ا قيمة \(\frac{{{9^4} - {9^6}}}{{{9^2} - {9^3}}}\) ',
options:['800','810','9','\({9^3}\)'],
answer:0
},
{
q:'ذا كانت مساحة الدائرة الصغيرة = 16 ط فإن محيط المنطقة المظللة = ',
options:['64 ط','4ط','8ط','24'],
answer:3
},
{
q:'حتاج ارض زراعية 15 يوم لينمو فيها \(1.2 + {10^8}\) من لا شيء فكم تحتاج لينمو فيها \(4.0 + {10^8}\) من لا شيء',
options:['18','60','13','45'],
answer:1
},
{
q:'حتاج ارض زراعية 15 يوم لينمو فيها \(1.2 + {10^8}\) من لا شيء فكم تحتاج لينمو فيها \(4.0 + {10^8}\) من لا شيء',
options:['18','60','13','45'],
answer:1
}
]
#import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,400;0,500;0,600;0,700;1,700&display=swap');
body{
margin: 0;
font-size: 16px;
background-color: #009688;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
}
*{
box-sizing: border-box;
margin:0;
padding:0;
outline:none;
}
.custom_box{
max-width: 700px;
background-color: #ffffff;
margin: 49px auto;
padding: 30px;
border-radius: 10PX;
animation: fadeInRight 1s ease;
}
#keyframes fadeInRight{
0%{
transform: translateX(40px);
opacity: 0;
}
100%{
transform: translateX(0px);
opacity: 1;
}
}
.custom_box::before,
.custom_box::after{
content: '';
clear: both;
display: table;
}
.custom_box.hide{
display: none;
}
.home_box h3{
font-size: 18px;
color:#000000;
font-weight:500;
margin-bottom: 15px;
line-height: 25px;
}
.home_box p{
font-size: 16px;
margin-bottom: 10px;
line-height:22px;
color:#000000;
font-weight:400;
}
.home_box p span{
font-weight: 500;
}
.home_box .btn{
margin-top: 20px;
}
.btn{
padding: 15px 45px;
background-color: #009688;
color: #ffffff;
border:none;
border-radius:5px;
font-family: 'Montserrat', sans-serif;
font-size:16px;
cursor:pointer;
display: inline-block;
}
.quiz_box .question_number,
.quiz_box .question_text,
.quiz_box .option_container,
.quiz_box .next_question_btn,
.quiz_box .answer_indicator{
width: 100%;
float: left;
}
.quiz_box .question_number{
font-size: 18px;
color:#009688;
font-weight: 600;
border-bottom: 1px solid #cccccc;
padding-bottom: 10px;
line-height: 25px;
}
.quiz_box .question_text{
font-size: 22px;
color:#000000;
line-height: 28px;
font-weight: 400;
padding: 20px 0;
margin: 0;
}
.quiz_box .option_container .option{
background-color: #cccccc;
padding:13px 15px;
font-size: 16px;
line-height: 22px;
color: #000000;
border-radius: 5px;
margin-bottom: 10px;
cursor: pointer;
text-transform: capitalize;
opacity: 0;
animation: fadeIn 0.3s ease forwards;
position: relative;
overflow: hidden;
}
.quiz_box .option_container .option.aready-answered{
pointer-events: none;
}
#keyframes fadeIn{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
.quiz_box .option_container .option.correct::before{
content: '';
position: absolute;
left:0;
top: 0;
height: 100%;
width: 100%;
background-color: green;
z-index: -1;
animation: slideInLift .5s ease forwards
}
#keyframes slideInLift{
0%{
transform: translateX(-100%);
}
100%{
transform: translateX(0%);
}
}
.quiz_box .option_container .option.correct{
color: #ffffff;
}
.quiz_box .btn{
margin: 15px 0;
}
.quiz_box .answer_indicator{
border-top: 1px solid #cccccc;
}
.quiz_box .answer_indicator div{
height: 40px;
width: 40px;
display: inline-block;
background-color: #cccccc;
border-radius: 50%;
margin-right:3px;
margin-top: 15px;
}
.quiz_box .answer_indicator div.correct{
background-color: green;
}
.quiz_box .answer_indicator div.wrong{
background-color: red;
}
.result_box{
text-align: center;
}
.result_box.hide{
display: none;
}
.result_box h1{
font-size: 36px;
line-height: 42px;
color: #009688;
}
.result_box table{
width: 100%;
border-collapse: collapse;
margin:30px 0;
}
.result_box table td{
border:1px solid #cccccc;
padding: 8px 15px;
font-weight: 500;
color: #000000;
width: 50%;
text-align: left;
font-size: 18px;
}
.result_box .btn{
margin-right: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" type="text/css" href="random_style.css">
</head>
<body>
<div class="home_box custom_box">
<h3>هذا الاختبار يحتوي على ٢٥ سؤال بمدة ٢٥ دقيقة</h3>
<p>عدد الأسئلة: <span class="total_question"></span></p>
<button type="button" class="btn" onclick="startQuiz()">ابدأ الاختبار </button>
</div>
<div class="time_box custom_box ">
<span id="countdown" class="timer"></span>
<!-- <text>الوقت المتبقي: <text id="time001">1200</text></text><br/>-->
</div>
<div class="quiz_box custom_box hide">
<div class="question_number">
</div>
<div class="question_text">
</div>
<div class="option_container">
</div>
<div class="next_question_btn">
<button type="button" class="btn" onclick="next()">التالي</button>
<!-- <button type="button" class="btn" onclick="previous()">السابق</button>-->
</div>
<div class="answer_indicator">
</div>
</div>
<div class="register_box custom_box hide" style="direction: rtl;">
<form >
<p>الرجاء ادخال بياناتك للحصول على نتيجة اختبارك </p><br>
<label for="uname">اسمك الكامل <br></label>
<input type="text" class="w3-input w3-border w3-round-large" placeholder="ادخل اسمك الكامل " name="uname" required><br>
<label for="email">الايميل <br></label>
<input type="email" class="w3-input w3-border w3-round-large" placeholder="ادخل اسمك الكامل " name="email" required><br>
<label for="phone">رقم الجوال (اختياري )<br></label>
<input type="number" class="w3-input w3-border w3-round-large" placeholder="ادخل رقم الجوال " name="phone"><br>
<button type="button" value="submit" onclick="register()"class="btn">تسجيل </button>
</form >
</div>
<div class="result_box custom_box hide">
<h1>النتيجة</h1>
<table>
<tr>
<td> total questions</td>
<td><span class="total_question"></span></td>
</tr>
<tr>
<td>attempt</td>
<td><span class="total_attempt"></span></td>
</tr>
<tr>
<td>correct</td>
<td><span class="total_correct"></span></td>
</tr>
<tr>
<td>wrong</td>
<td><span class="total_wrong"></span></td>
</tr>
<tr>
<td>persentage</td>
<td><span class="persentage"></span></td>
</tr>
<tr>
<td>your total score</td>
<td><span class="total_score"></span></td>
</tr>
</table>
<button type="button" class="btn" onclick="tryAgainQuiz()">try again</button>
<button type="button" class="btn" onclick="goToHome()">go to home</button>
</div>
<script src="quistion.js" charset="utf-8" type="text/javascript"></script>
<script src="app.js"></script>
</body>
</html>

Can't seem to integrate my CSS and JS/Jquery files in my HTML

Pretty new to coding, was just wondering if maybe someone could revise why my .CSS & .JS files are not linking with my HTML?
Here are the lines & this is what it's supposed to look like: https://codepen.io/MatteoV/pen/aGqQBe
I will also be trying to implement this code into Webflow, would anyone know where I can implement these lines?
Thank you guys for the help! :D
jQuery(document).ready(function($) {
// Terms & Discounts
var termArr = [1, 12, 24, 36],
discArr = [0, 0.2, 0.25, 0.3];
// Custom Region Pricing
var prices = {
ca: [0.12, 0.11, 0.1],
az: [0.12, 0.11, 0.1],
va: [0.12, 0.11, 0.1],
sg: [0.2, 0.19, 0.18],
th: [0.2, 0.19, 0.18],
hk: [0.2, 0.19, 0.18]
};
// Exchange Rates & Symbols
var exchange = {
rates: {
USD: 1,
CNY: 6.92,
THB: 35
},
symbol: {
USD: "$",
CNY: "¥",
THB: "฿"
}
};
// Total TB Slider
$("#gb-slider")
.slider({
range: "min",
value: 2000,
step: 500,
max: 10000,
min: 1000,
slide: function(event, ui) {
if (ui.value < 10000) {
$(".contact-us").fadeOut(200, function() {
$(".price-wrap").fadeIn(200);
});
var term = $("#term-slider").slider("option", "value");
$('[name="qty"]').val(ui.value);
$("#total-price .price").text(calcPrice(ui.value, term));
$("#price-per-gb .price").html(pricePerGB(ui.value).toFixed(2));
$('[name="unit_price"]').val(pricePerGB(ui.value).toFixed(2));
} else {
$(".price-wrap").fadeOut(200, function() {
$(".contact-us").fadeIn(200);
});
}
}
})
.each(function() {
var opt = $(this).data().uiSlider.options;
var vals = (opt.max - opt.min) / 1000;
for (var i = 0; i <= vals; i++) {
var el = $('<label class="value-label">' + (i + 1) + "TB</label>").css(
"left",
"calc(" + i / vals * 100 + "% - 10px)"
);
$(this).append(el);
}
});
// Contract Slider
$("#term-slider")
.slider({
range: "min",
max: termArr.length - 1,
slide: function(event, ui) {
var size = $("#gb-slider").slider("option", "value");
$('[name="period"]').val(termArr[ui.value]);
$("#total-price .price").text(calcPrice(size, ui.value));
$('[name="discount_term"]').val(discArr[ui.value]);
}
})
.each(function() {
var opt = $(this).data().uiSlider.options;
var vals = opt.max - opt.min;
for (var i = 0; i <= vals; i++) {
if (i == 0) {
var el = $('<label class="value-label">Monthly</label>').css("left", "0%");
} else {
var el = $(
'<label class="value-label">' + termArr[i] + " Mo.</label>"
).css("left", i / vals * 95 + "%");
}
$(this).append(el);
}
});
// Calcutate Price Per GB
function pricePerGB(value) {
var region = $("#region").val();
if (value <= 2000) {
return prices[region][0];
} else if (value <= 4999) {
return prices[region][1];
} else if (value <= 10000) {
return prices[region][2];
} else {
return false;
}
}
// Calculate Total Price
function calcPrice(size, term) {
var basePrice = size * pricePerGB(size),
discount = basePrice - basePrice * discArr[term],
rate = exchange.rates[$("#currency-select").val()],
price = (discount * rate).toFixed(2);
return price;
}
// Changing Currencies
$("#currency-select, #region").change(function() {
var pricePer = pricePerGB($("#gb-slider").slider("option", "value")).toFixed(
2
);
$(".currency-symbol").text(exchange.symbol[$(this).val()]);
$("#total-price .price").text(
calcPrice(
$("#gb-slider").slider("option", "value"),
$("#term-slider").slider("option", "value")
)
);
$('[name="unit_price"]').val(pricePer);
$("#price-per-gb .price").text(pricePer);
});
// Load price when page does
$("#total-price .price").text(
calcPrice(
$("#gb-slider").slider("option", "value"),
$("#term-slider").slider("option", "value")
)
);
$("#price-per-gb .price").html(
pricePerGB($("#gb-slider").slider("option", "value")).toFixed(2)
);
$('[name="discount_term"]').val(
discArr[$("#term-slider").slider("option", "value")]
);
$("#backup-form").submit(function(e) {
console.log($(this).serialize());
e.preventDefault();
});
});
#import "susy"; Add
#import "breakpoint"; Add
#import "color-schemer"; Add
#import "bourbon#5.*"; Add
#import "neat#2.*"; Add
#import "modularscale#3.*";
*,
*:before,
*:after {
box-sizing: border-box;
}
$yellow: #fdb022;
$yellow-alt: #eea61e;
$grey: #e6e6e6;
html,
body {
font: 16px "Open Sans", Arial, sans-serif;
}
#veeam-sliders {
width: 72em;
margin: 40px auto 0;
h3 {
font-weight: 600;
font-size: 21px;
margin: 0;
}
label {
font: normal 16px/1 "Open Sans", Arial, sans-serif;
text-transform: uppercase;
color: #aaa;
}
button,
.btn {
text-decoration: none;
border: none;
background: $yellow;
color: #fff;
text-transform: uppercase;
font: 700 14px "Open Sans", Arial, sans-serif;
padding: 8px 20px;
border-radius: 3px;
box-shadow: 0 2px 0 0 darken($yellow-alt, 5%);
cursor: pointer;
&:active {
position: relative;
top: 2px;
box-shadow: none;
}
}
.select-wrap {
margin-bottom: 40px;
margin-left: 15px;
display: inline-block;
position: relative;
&:after {
position: absolute;
top: 8px;
right: 10px;
content: "▾";
color: black;
display: block;
z-index: -1;
font-size: 20px;
}
#region,
#currency-select {
padding: 10px 30px 10px 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ccc;
margin: 0;
appearance: none;
position: relative;
background: rgba(255, 255, 255, 0);
color: #222;
&:hover {
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
}
}
}
.sliders-wrap {
width: 70%;
padding-right: 100px;
float: left;
.slider {
position: relative;
margin: 25px 0;
}
#gb-slider {
margin-bottom: 80px;
}
}
.total-wrap {
width: 30%;
float: left;
button {
margin-top: 40px;
}
.price-wrap {
h3 {
margin-bottom: 10px;
}
#total-price {
font-size: 42px;
line-height: 1.15;
color: #999;
border-bottom: 1px solid $grey;
padding: 0 0 20px;
margin: 0 0 10px;
span {
color: #999;
}
}
#price-per-gb {
color: #222;
font-size: 21px;
clear: both;
.price {
color: #222;
}
}
}
.veeam-provider {
float: right;
}
}
.value-label {
white-space: nowrap;
position: absolute;
top: 25px;
font-size: 15px;
color: #666;
text-transform: none;
font-weight: normal;
}
.contact-us {
margin-top: 25px;
display: none;
h3 {
margin: 0;
line-height: 1;
}
p {
margin: 10px 0 25px;
}
}
/* jQuery UI Slider Theming */
.ui-slider,
.ui-slider-handle,
.ui-slider-range {
border-radius: 500px;
}
.ui-slider {
background: $grey;
border: none;
height: 1em;
}
.ui-slider-handle {
width: 1.8em;
height: 1.8em;
top: -0.4em;
margin-left: -0.7em;
cursor: grab;
background: $yellow-alt;
border-color: $yellow-alt;
}
.ui-slider-range {
background: $yellow;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!DOCTYPE html>
<html lang "en">
<head>
<meta charset="utf-8">
<title>...</title>
<link rel="stylesheet" type="text/css" href="https://raw.githubusercontent.com/Crackerzzzz/slider/master/slider.css" />
<script type='text/javascript' src='https://raw.githubusercontent.com/Crackerzzzz/slider/master/Slider.js'></script>
</head>
<body>
<section id="veeam-sliders" class="clearfix">
<form id="backup-form">
<div class="sliders-wrap">
<label>Select Data Center:</label>
<div class="select-wrap">
<select id="region" name="idc">
<option value="ca">Los Angeles, CA</option>
<option value="az">Phoenix, AZ</option>
<option value="va">Ashburn, VA</option>
<option value="sg">Singapore, SG</option>
<option value="th">Bangkok, TH</option>
<option value="hk">Hong Kong, HK</option>
</select>
</div>
<div class="tb-wrap">
<h3>Total GB to Backup</h3>
<div id="gb-slider" class="slider"></div>
<input type="hidden" name="qty" value="2000">
</div>
<div class="contract-wrap">
<h3>Contract Term Length</h3>
<div id="term-slider" class="slider"></div>
<input type="hidden" name="period" value="1">
</div>
</div>
<div class="total-wrap">
<label>Select Currency:</label>
<div class="select-wrap">
<select id="currency-select">
<option value="USD">USD</option>
<option value="CNY">CNY</option>
<option value="THB">THB</option>
</select>
</div>
<div class="price-wrap">
<h3>Total:</h3>
<div id="total-price">
<span class="currency-symbol">$</span><span class="price">000.00</span> /m.
</div>
<div id="price-per-gb">
<span>$</span><span class="price">0.00</span> /GB
<input type="hidden" name="unit_price" value="0.12">
</div>
<button type="submit">Add To Cart</button>
<img class="veeam-provider" src="/wp-content/uploads/veeam-gold-provider_x100.jpg">
</div>
<div class="contact-us">
<h3>Contact Us</h3>
<p>If you're interested in enterprise backup with over 10TB of space, please contact our sales agent for a custom quote based on your needs.</p>
Contact Us
</div>
</div>
<input name="discount_term" type="hidden">
<input name="id" value="621" type="hidden">
<input name="option" value="7688:53546" type="hidden">
</form>
</section>
</body>
</html>
Note: the css is messed up due to not having sass installed.