I'm creating a simple webapp, with HTML, CSS, Javascript and Python (Flask).
In the middle of the page, there is a widget, composed by a left-side part, with five button, and a right side part with five "card", but only one is visible.
If I click on a button, the corrispondent card shows up and the color of the button I clicked changes.
The problem is that there are some css property that aren't kept, like the border one, that after changing the card for thge first time, it disapear, and also hover property don't work anymore. Here is my code.
function change(c){
let btn0 = document.getElementById("bmi");
let btn1 = document.getElementById("ideal");
let btn2 = document.getElementById("calories");
let btn3 = document.getElementById("water");
let btn4 = document.getElementById("fat");
let btnA = [btn0, btn1, btn2, btn3, btn4];
let card0 = document.getElementById("b");
let card1 = document.getElementById("i");
let card2 = document.getElementById("c");
let card3 = document.getElementById("w");
let card4 = document.getElementById("f");
let cardA = [card0, card1, card2, card3, card4];
for(let i=0; i<5; i++){
if (i==c){
btnA[i].style.backgroundColor = "#f00";
cardA[i].style.display = "inline";
}else{
btnA[i].style.backgroundColor = "#ddd";
cardA[i].style.display = "none";
}
cardA[i].style.backgroundColor = "#f00";
}
}.title{
font-family: 'Merriweather', serif;
text-align: center;
color: red;
margin-top: 20px;
font-size: 40pt;
font-weight: 3000;
}
.infoBar{
width:50%;
margin: auto;
}
.topMenu{
font-family: 'Merriweather', serif;
font-size: 18pt;
height: 50px;
width: 32%;
margin: -3px;
background-color: blue;
border-left:1px white solid;
border-right:1px white solid;
border-radius: 50px;
}
.startingContent{
text-align: center;
margin-top: 30px;
font-family: 'Merriweather', serif;
font-size: 20pt;
font-weight: 200;
}
.image{
margin: auto;
height:30%;
width:30%;
margin-top: 30px;
}
.widget{
display:flex;
margin: auto;
}
.buttons{
display: flex;
flex-direction: column;
}
.lateral{
height: 75px;
width: 85px;
padding: 5px;
border-radius: 0px;
border: 1px #ddd solid;
background-color: #ddd;
margin: 0px;
border-top-right-radius: 15px 15px;
border-bottom-left-radius: 15px 15px;
}
#bmi{
background-color: #f00;
}
.lateral:hover{
background-color: #fff;
transition: 1s;
border: #fff solid 1px;
}
.ideal,.calories, .water, .fat, .bmi{
width:70%;
border: 1px solid blue;
margin-top: -20px;
border-top-right-radius: 30px 30px;
border-bottom-left-radius: 30px 30px;
}
.ideal,.calories, .water, .fat{
display: none;
}
table, th, td{
border: 1px #ddd solid;
margin: 10;
}
table{
border-collapse: collapse;
margin: auto;
}
tr:nth-child(even) {
background-color: #dddddd;
}<div class = widget>
<div class = buttons>
<button class = lateral id = bmi onclick="change(0)">BMI</button>
<button class = lateral id = ideal onclick="change(1)">Ideal weight</button>
<button class = lateral id = calories onclick="change(2)">Calories requirement</button>
<button class = lateral id = water onclick="change(3)">Water requirement</button>
<button class = lateral id = fat onclick="change(4)">Body fat percentage</button>
</div>
<div class = calculator>
<div class = bmi id = b>
<h1 class = subT>BMI calculator</h1>
<p>The BMI (body mass index) is and index that tells you if<br>
your weight is good or not. Here is the table for results:
</p>
<table>
<tr>
<th><b>BMI</b></td>
<th><b>Condition</b></td>
</tr>
<tr>
<td><16.5</td>
<td>Seriusly underweight</td>
</tr>
<tr>
<td>16.5-18.5</td>
<td>Underweight</td>
</tr>
<tr>
<td>18.5-24.5</td>
<td>In shape</td>
</tr>
</table>
<form>
<p>Insert your height (in centimeters):</p>
<input type = "text">
<p>Insert your weight (in kilograms):</p>
<input type = "text">
<br><br>
<button value = calculate onclick="calculateBMI()">Calculate</button>
</form>
</div>
<div class = ideal id = i>
<h1 class = subT>Ideal weight</h1>
<p>All we have our weight, but we don't know if it is too low <br>
or too high. The ideal weight is a weight calculated using your age,<br>
your height and your gender. This is the weight we should have to be in shape</p>
<form>
<!--form with required entry-->
<p>Insert your height (in centimeters):</p>
<input type = "text">
<p>Gender:</p>
<select>
<option value = "m">Male</option>
<option value = "f">Female</option>
</select>
<p>Insert your age :</p>
<input type = "number">
<br><br>
<button value = calculate onclick="calculateBMI()">Calculate</button>
<p>Your ideal weight is:</p>
</form>
</div>
<div class = calories id = c>
<h1 class = subT>Calories requirement</h1>
<p> Calories are used as fuel from our body. They are necessary for our<br>
life. When you consume too little calories, your body fat reduces, when you<br>
consume too much, your fat increase. So, is necessary know the correct <br>
amount of calories to consume. It depends on your ideal weight, your gender<br>
and how much calories you burn during the day</p>
<form>
<!--form with required entry-->
<p>Insert your ideal weight (in kilograms):</p>
<input type = "text">
<p>Gender:</p>
<select>
<option value = "m">Male</option>
<option value = "f">Female</option>
</select>
<p>Age:</p>
<input type = "number">
<p>Type of work:</p>
<select>
<option value = "sed">Sedentary</option>
<option value = "qhe">Quite heavy</option>
<option value = "hev">Heavy</option>
</select>
<p>Wourkout</p>
<select>
<option value = "sed">Less than 2hrs a week</option>
<option value = "qhe">Beetween 2 and 5 hrs a week</option>
<option value = "hev">Over 5hrs a week</option>
</select>
<br><br>
<button value = calculate onclick="calculateBMI()">Calculate</button>
<p>Your calories requirement is:</p>
</form>
</div>
<div class = water id = w>
<h1 class = subT>Water requirement</h1>
<p>Water is one of the most important think we consume. <br>
There is a formula that shows how much water we should drink.<br>
The formula is the following </p>
<p>weight(in kilograms)*30ml</p>
<p>Insert your actual weight:</p>
<input type = "text">
<br><br>
<button value = calculate onclick="calculateBMI()">Calculate</button>
<p>Your water requirement is:</p>
</div>
<div class = fat id = f>
<h1 class = subT>Body fat percentage</h1>
<p>Your fat percentage show you simply if you have too much fat in your<br>
body. Here is the table to compare your results</p>
<table>
<tr>
<th></td>
<th><b>Male</b></td>
<th><b>Female</b></th>
</tr>
<tr>
<td>Athletes</td>
<td>5.0-13.0</td>
<td>12.0-16.0</td>
</tr>
<tr>
<td>Preatty active persons</td>
<td>13.0-18.0</td>
<td>16.0-25.0</td>
</tr>
<tr>
<td>Overweight</td>
<td>19.0-24.0</td>
<td>25.0-31.0</td>
</tr>
<tr>
<td>Obese</td>
<td>>24.0</td>
<td>>31.0</td>
</tr>
</table>
<p>Insert your height (in centimeters):</p>
<input type = "text">
<p>Gender:</p>
<select>
<option value = "m">Male</option>
<option value = "f">Female</option>
</select>
<p>Insert waist circumference:</p>
<input type = "text">
<p>Insert neck circumference:</p>
<input type = "text">
<p>Insert flanks circumference:</p>
<input type = "text">
<br><br>
<button value = calculate onclick="calculateBMI()">Calculate</button>
<p>Your body fat percentage is:</p>
</div>
</div>
</div>When I enter the first time in the site, the border around the card still exist, and also after property, but when I change the card I'm visualizing, I can't see it anymore.
I don't know if there is a sovrascription of property, or if I changed something without knowing that.
Can someone tell me something? Thanks
<th>then end with</th>rather than</td>