window.onload = function(){
const pattern = trianglify({
width: window.innerWidth,
height: window.innerHeight,
cellSize: 75,
xColors: 'Blues',
yColors: 'match',
variance: 0.75,
fill: true,
})
document.getElementById('background').appendChild(pattern.toCanvas())
/* Customization
width: 600,
height: 400,
cellSize: 75,
variance: 0.75,
seed: null,
xColors: 'random',
yColors: 'match',
fill: true,
palette: trianglify.colorbrewer,
colorSpace: 'lab',
colorFunction: trianglify.colorFunctions.interpolateLinear(0.5),
strokeWidth: 0,
points: null
}
*/
let ageInput = document.querySelector('#ageInput');
let heightInput = document.querySelector('#heightInput');
let weightInput = document.querySelector('#weightInput');
let extremeWeightGain = document.getElementById('extremeWeightGain')
let averageWeightGain = document.getElementById('averageWeightGain')
let mildWeightGain = document.getElementById('mildWeightGain')
let mildWeightLoss = document.getElementById('mildWeightLoss')
let averageWeightLoss = document.getElementById('averageWeightLoss')
let extremeWeightLoss = document.getElementById('extremeWeightLoss')
let btnAdd = document.querySelector('button');
let maintainCalories = document.getElementById('maintainCalories');
const selectElement = document.getElementById('exerciseInput')
let exerciseValue = {
price: 0
}
selectElement.addEventListener("change", function(e) {
const inputValue = e.target.value;
if (inputValue == 'noExercise') {
exerciseValue.price = -150;
}
if (inputValue == 'lightExercise') {
exerciseValue.price = -50;
}
if (inputValue == 'moderateExercise') {
exerciseValue.price = 100;
}
if (inputValue == 'activeExercise') {
exerciseValue.price = 250;
}
if (inputValue == 'veryActiveExercise') {
exerciseValue.price = 375;
}
if (inputValue == 'extraActiveExercise') {
exerciseValue.price = 500;
}
})
btnAdd.addEventListener('click', () =>{
let zyzz = parseFloat(weightInput.value*10) + parseFloat(heightInput.value*6.25) -
parseFloat(ageInput.value*5) + parseInt(genderValue.price) + parseInt(exerciseValue.price);
maintainCalories.innerText = zyzz.toFixed(0);
extremeWeightGain.innerText = zyzz *100 /71;
averageWeightGain.innerText = zyzz *100 /81;
mildWeightGain.innerText = zyzz *100 /89;
mildWeightLoss.innerText = zyzz *88 /100;
averageWeightLoss.innerText = zyzz *76 /100;
extremeWeightLoss.innerText = zyzz *66 /100;
extremeWeightGain.innerHTML = Math.round(extremeWeightGain.innerHTML *1);
averageWeightGain.innerHTML = Math.round(averageWeightGain.innerHTML *1);
mildWeightGain.innerHTML = Math.round(mildWeightGain.innerHTML *1);
mildWeightLoss.innerHTML = Math.round(mildWeightLoss.innerHTML *1);
averageWeightLoss.innerHTML = Math.round(averageWeightLoss.innerHTML *1);
extremeWeightLoss.innerHTML = Math.round(extremeWeightLoss.innerHTML *1);
});
var genderValue = {
price: 0
}
var maleValue = document.getElementById('Male');
Male.addEventListener('click' ,function(){
genderValue.price = 5;
})
var femaleValue = document.getElementById('Female');
Female.addEventListener('click' ,function(){
genderValue.price = -161;
})
}
function showResults() {
document.getElementById("input1").style.display="none";
document.getElementById("input2").style.display="none";
document.getElementById("input3").style.display="none";
document.getElementById("input4").style.display="none";
document.getElementById("input5").style.display="none";
document.getElementById("input6").style.display="none";
document.getElementById('hideButton').style.display = "none";
document.getElementById("resultsSection").style.display="block";
}.main-section {
padding-top: 79px;
padding-left: 500px;
width: 903px;
font-family: 'Anton', sans-serif;
display: block;}
.background {
position: sticky;
overflow: hidden;}
.wholeArea {
position: absolute;
top: 0;
right: 0;}
.title {
font-size: 60px;
color: #132c54;}
.description {
font-size: 25px;
color: #2569c8;
line-height: 29px;
margin-bottom: 8px;}
.inputText {
font-size: 30px;
color: #132c54;
background-color: white;}
.inputField {
font-size: 30px;
color: #132c54;
border-color: #132c54;
border-width: 4px;
border-style: solid;
outline-color: #132c54;
border-radius: 6px;}
.noDecoration { /* No Text Decoration */
text-decoration: none;
color: #132c54;}
.selectInput {
width: 413px;
color: #132c54;
outline-color: #132c54;
outline-width: 0px;
border-color: #132c54;
border-width: 4px;
border-style: solid;
border-radius: 6px;}
.textInput {
width: 400px;
display: inline;
color: #132c54;
outline-color: #132c54;
outline-width: 0px;
border-color: #132c54;
border-width: 4px;
border-style: solid;
border-radius: 6px;
padding-left: 3px;}
.selectOption {
font-size: 30px;
color: #132c54;}
.buttonStyle {
font-size: 35px;
color: #132c54;
background-color: white;
outline-color: #132c54;
outline-width: 0px;
border-color: #132c54;
border-width: 4px;
border-style: solid;
border-radius: 6px;}
.radioStyle {
width: 20px;
height: 20px;
display: inline-block;
vertical-align: top;}
.leftColumnBox {
position: absolute;
margin-right: 100px;
width: auto;
height: auto;}
.leftColumnBox2 {
position: absolute;
margin-top: 321px;
margin-right: 100px;
width: auto;
height: auto;}
.rightColumnBox {
position: absolute;
margin-right: 100px;
width: auto;
height: auto;}
.rightColumnBox2 {
position: absolute;
margin-top: 321px;
margin-right: 100px;
width: auto;
height: auto;}
.leftColumn {
width: auto;
height: auto;
margin-top: 81px;
margin-left: 100px;
margin-right: 100px;
float: left;
position: fixed;
display: inline;
top: 0px;
left: 0px;}
.rightColumn {
width: auto;
height: auto;
margin-top: 81px;
margin-left: 100px;
margin-right: 400px;
float: left;
position: fixed;
display: inline;
top: 0px;
right: 0px;}
.advertImage {
border: 10px white solid;
border-radius: 6px;
width: 300px;
height: auto;}
.resultsSection {
display: none;}
.radioArea {
height: 45px;
width: 700px;
display: block;}
.inputArea {
height: 50px;
width: 700px;
display: block;}
.labelText {
width: 150px;
display: inline-block;}
.resultsText {
line-height: 40px;
padding: 0px;
border: 0px;
margin: 0px;}
.hideInput {
display: block;}
.mainBorder {
border: 20px solid white;
border-radius: 12px;
background-color: white;}
.titleBorder {
border: 20px solid white;
border-bottom: none;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
background-color: white;}
.descBorder {
border: 20px solid white;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
background-color: white;}
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:active { text-decoration: none; }
@media screen and (max-width: 780px) {
.main-section {
padding-top: 64px;
padding-left: 10%;
padding-right: 0px;
width: 80%;
}
.leftColumn {
width: 240px;
height: auto;
margin-top: 41px;
margin-left: 85px;
margin-right: 30px;
float: left;
position: static;
display: block;
width: 30%;
}
.rightColumn {
width: 240px;
height: auto;
margin-top: 41px;
margin-left: 70px;
margin-right: 0px;
float: left;
position: fixed;
position: static;
display: block;
width: 30%;
}
.advertImage {
border: 10px white solid;
border-radius: 6px;
width: 240px;
height: auto;
}
.leftColumnBox2 {
display: none;
}
.rightColumnBox2 {
display: none;
}
.textInput {
width: 350px;
}
.selectInput {
width: 363px;
}
.title {
font-size: 40px;
}
.description {
font-size: 18px;
}
.labelText {
width: 150px;
}}
@media screen and (max-width: 760px) {
.main-section {
padding-top: 64px;
padding-left: 11%;
padding-right: 0px;
width: 80%;
}
.leftColumn {
width: 240px;
height: auto;
margin-top: 41px;
margin-left: 88px;
margin-right: 30px;
float: left;
position: static;
display: block;
width: 30%;
}
.rightColumn {
width: 240px;
height: auto;
margin-top: 41px;
margin-left: 70px;
margin-right: 0px;
float: left;
position: fixed;
position: static;
display: block;
width: 30%;
}
.advertImage {
border: 10px white solid;
border-radius: 6px;
width: 240px;
height: auto;
}
.leftColumnBox2 {
display: none;
}
.rightColumnBox2 {
display: none;
}
.textInput {
width: 350px;
}
.selectInput {
width: 363px;
}
.title {
font-size: 40px;
}
.description {
font-size: 18px;
}
.labelText {
width: 150px;
}}
.banner { /* Banner Styles */
width: 100%;
color: black;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 24px;
float: left;
text-decoration: none;
cursor: pointer;}
html, body {
max-width: 100%;
overflow-x: hidden;}
.noselect { /* No Highlighting */
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome, Edge, Opera and Firefox */}
.banner-head-1 { /* Home Header */
float: left;
overflow-wrap: normal;
margin-left: 200px;
margin-right: 200px;
text-decoration: none;
color: black;
display:block;}
.banner-head-2 { /* Food Header */
float: left;
overflow-wrap: normal;
margin-left: 55px;
text-decoration: none;
color: black;
display:block;}
.banner-head-3 { /* Exercise Header */
float: left;
overflow-wrap: normal;
margin-left: 55px;
text-decoration: none;
color: black;
display:block;}
.banner-head-4 { /* Calculators Header */
float: left;
overflow-wrap: normal;
margin-left: 55px;
text-decoration: none;
color: black;
display:block;}
.banner-head-5 { /* Calculators Header */
float: left;
overflow-wrap: normal;
margin-left: 55px;
text-decoration: none;
color: black;
display:block;}
.dropdown { /* Dropdown Content */
cursor: pointer;
color: black;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 24px;
display:none;
position:absolute;
width: 100%;
float: left;
text-decoration: none;
padding-right: 80px;
margin: 0px;
border: 0px;}
.noDecoration { /* No Text Decoration */
text-decoration: none;
color: black;}
.dropdown-content {
display: none;
padding-left: 20px;}
.banner-logo {
height: 40px;
border: 10px solid white;
border-radius: 12px;
margin-top: 5px;}
.banner-logo-responsive {
margin-left: 150px;
height: 43px;
margin-top: 5px;
margin-bottom: 5px;
border: 10px solid white;
border-radius: 12px;
margin-left: 350px;}
.mobile-logo {
height: 80px;
padding: none;
border: 10px white solid;
border-radius: 8px;}
@media screen and (max-width: 780px) {
.banner-head-1 { /* Home Header */
margin-left: 6px;
margin-right: 10px;
}
.banner-head-2 { /* Food Header */
margin-left: 15px;
}
.banner-head-3 { /* Exercise Header */
margin-left: 15px;
}
.banner-head-4 { /* Calculators Header */
margin-left: 15px;
}
.banner-head-5 { /* Calculators Header */
margin-left: 15px;
}
.banner-logo {
height: 22px;
}}
@media screen and (max-width: 760px) {
.banner-head-1 { /* Home Header */
margin-left: 10px;
margin-right: 10px;
}
.banner-head-2 { /* Food Header */
margin-left: 15px;
}
.banner-head-3 { /* Exercise Header */
margin-left: 15px;
}
.banner-head-4 { /* Calculators Header */
margin-left: 15px;
}
.banner-head-5 { /* Calculators Header */
margin-left: 15px;
}
.banner-logo {
height: 21px;
}}<div class="mainBorder calculatorSection" id="inputSection"> <!-- Calculator -->
<div class="radioArea" style="padding-bottom: 5px;" id="input1">
<label class="inputText noDecoration labelText">Units</label>
<a href="./calorie-calculator.html">
<input type="radio" class="inputField radioStyle" onclick="window.location='./calorie-calculator.html'">
<label class="inputText noDecoration">Metric</label>
</a>
<a href="./calorie-calculator-imperial.html">
<input type="radio" class="inputField radioStyle" onclick="window.location='./calorie-calculator-imperial.html'">
<label class="inputText noDecoration">Imperial</label><br>
</a>
</div>
<div class="radioArea" id="input2">
<label for="gender" class="inputText labelText">Gender</label>
<input type="radio" id="Male" name="gender" value="5" class="inputField radioStyle">
<label for="Male" class="inputText">Male</label>
<input type="radio" id="Female" name="gender" value="-165" class="inputField radioStyle">
<label for="Female" class="inputText">Female</label><br>
</div>
<div class="inputArea" id="input3">
<label for="ageInput" class="inputText labelText">Age</label>
<input type="number" id="ageInput" class="inputField textInput" placeholder="12-80"><br>
</div>
<div class="inputArea" id="input4">
<label for="heightInput" class="inputText labelText">Height</label>
<input type="number" id="heightInput" class="inputField textInput" placeholder="100cm - 200cm"><br>
</div>
<div class="inputArea" id="input5">
<label for="weightInput"class="inputText labelText">Weight</label>
<input type="number" id="weightInput" class="inputField textInput" placeholder="30kg - 120kg"><br>
</div>
<div class="inputArea" id="input6">
<label for="exerciseInput"class="inputText labelText">Exercise</label>
<select id="exerciseInput" class="inputText selectInput">
<option class="inputText selectOption">Exercise</option>
<option value="noExercise" id="noExercise" class="inputText selectOption">Inactive</option>
<option value="lightExercise" id="lightExercise" class="inputText selectOption">Light Activity</option>
<option value="moderateExercise" id="moderateExercise" class="inputText selectOption">Moderate Activity</option>
<option value="activeExercise" id="activeExercise" class="inputText selectOption">Active</option>
<option value="veryActiveExercise" id="veryActiveExercise" class="inputText selectOption">Very Active</option>
<option value="extraActiveExercise" id="extraActiveExercise" class="inputText selectOption">Extra Active</option>
</select><br>
</div>
<button class="buttonStyle" onclick="showResults();" id="hideButton">ADD</button>
<span class="resultsSection" id="resultsSection">
<div class="inputText resultsText">Extreme Weight Gain(1kg/week) - <span id="extremeWeightGain" class="inputText"></span></div>
<div class="inputText resultsText">Weight Gain(0.5kg/week) - <span id="averageWeightGain" class="inputText"></span></div>
<div class="inputText resultsText">Mild Weight Gain(0.25kg/week) - <span id="mildWeightGain" class="inputText"></span></div>
<div class="inputText resultsText">Maintain Calories - <span id="maintainCalories" class="inputText"></span></div>
<div class="inputText resultsText">Mild Weight Loss(0.25kg/week) - <span id="mildWeightLoss" class="inputText"></span></div>
<div class="inputText resultsText">Weight Loss(0.5kg/week) - <span id="averageWeightLoss" class="inputText"></span></div>
<div class="inputText resultsText">Extreme Weight Loss(1kg/week) - <span id="extremeWeightLoss" class="inputText"></span></div>
</span>
</div>Hi there,
I am trying to make my site responsive but it stops working at 760px. When it his 760px everything else gets moved and out of place. The problem happens when I click on a button to hide the input section and display the answers. Nothing is displaced on the button press for 760px+. The code is very similar at each code break and I can't find the issue.
Here is what it looks like before the button press:img-1
Here is what it looks like after the button pressimg-2
