Hi Team, I am struggling to figure out why my custom code is clashing with my Nav bar snippet. Would it be possible for someone from the team to have a look at it quickly?
Hi @Mattfat66,
Can you please provide a more details like what exactly you are doing, on which project?
Thanks.
Hi Vashsahu,
I did a custom code drag and drop onto a page called ‘SATS & TEWS’ Calculator Page. The Nav Bar Snippet works on the page up until I add the custom code after which the Nav bar seems faulty whereby the burger menu moves to the opposite side of the page. I am happy to give you my log in details to have a look at the issue.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Triage (TEWS and SATS)</title>
<style>
body {
font-family: Arial;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
width: 300px;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
form {
display: flex;
flex-direction: column;
}
label {
margin-bottom: 5px;
}
.radio-group {
margin-bottom: 10px;
}
button {
margin-top: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #007BFF;
color: white;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.result {
text-align: center;
margin-top: 20px;
font-size: 20px;
padding: 10px;
border-radius: 5px;
}
.result.green {
background-color: #08bf29;
color: #fffefc;
}
.result.yellow {
background-color: #e7eb1c;
color: #856404;
}
.result.orange {
background-color: #fc4f05;
color: #fffefc;
}
.result.red {
background-color: #d90404;
color: #fffefc;
}
</style>
</head>
<body>
<div class="container">
<h1>Triage (TEWS and SATS)</h1>
<form id="health-form">
<div class="radio-group">
<label>Mobility:</label>
<label><input type="radio" name="mobility" value="0"> Walking</label>
<label><input type="radio" name="mobility" value="1"> With Help</label>
<label><input type="radio" name="mobility" value="2"> Stretcher/Immobile</label>
</div>
<div class="radio-group">
<label>Respiratory Rate:</label>
<label><input type="radio" name="respiratory-rate" value="2"> < 9</label>
<label><input type="radio" name="respiratory-rate" value="0"> 9-14</label>
<label><input type="radio" name="respiratory-rate" value="1"> 15-20</label>
<label><input type="radio" name="respiratory-rate" value="2"> 21-29</label>
<label><input type="radio" name="respiratory-rate" value="3"> >29</label>
</div>
<div class="radio-group">
<label>Systolic Blood Pressure:</label>
<label><input type="radio" name="blood-pressure" value="3"> < 70 mmHg</label>
<label><input type="radio" name="blood-pressure" value="2"> 71-80 mmHg</label>
<label><input type="radio" name="blood-pressure" value="1"> 81-100 mmHg</label>
<label><input type="radio" name="blood-pressure" value="0"> 101-199 mmHg</label>
<label><input type="radio" name="blood-pressure" value="2"> > 199 mmHg</label>
</div>
<div class="radio-group">
<label>Heart Rate:</label>
<label><input type="radio" name="heart-rate" value="2"> < 41</label>
<label><input type="radio" name="heart-rate" value="1"> 41-50</label>
<label><input type="radio" name="heart-rate" value="0"> 51-100</label>
<label><input type="radio" name="heart-rate" value="1"> 101-110</label>
<label><input type="radio" name="heart-rate" value="2"> 111-129</label>
<label><input type="radio" name="heart-rate" value="3"> >129</label>
</div>
<div class="radio-group">
<label>Temperature:</label>
<label><input type="radio" name="temperature" value="2"> < 35°C</label>
<label><input type="radio" name="temperature" value="0"> 35-38.4°C</label>
<label><input type="radio" name="temperature" value="2"> > 38.4°C</label>
</div>
<div class="radio-group">
<label>AVPU:</label>
<label><input type="radio" name="avpu" value="0"> Alert</label>
<label><input type="radio" name="avpu" value="1"> Responds to Voice</label>
<label><input type="radio" name="avpu" value="2"> Responds to Pain</label>
<label><input type="radio" name="avpu" value="2"> Confused</label>
<label><input type="radio" name="avpu" value="3"> Unresponsive</label>
</div>
<div class="radio-group">
<label>Trauma:</label>
<label><input type="radio" name="trauma" value="0"> No</label>
<label><input type="radio" name="trauma" value="1"> Yes</label>
</div>
<button type="button" onclick="calculateScore()">Calculate</button>
</form>
<div id="result" class="result"></div>
</div>
<script>
function calculateScore() {
const mobility = parseInt(document.querySelector('input[name="mobility"]:checked').value);
const respiratoryRate = parseInt(document.querySelector('input[name="respiratory-rate"]:checked').value);
const bloodPressure = parseInt(document.querySelector('input[name="blood-pressure"]:checked').value);
const heartRate = parseInt(document.querySelector('input[name="heart-rate"]:checked').value);
const temperature = parseInt(document.querySelector('input[name="temperature"]:checked').value);
const avpu = parseInt(document.querySelector('input[name="avpu"]:checked').value);
const trauma = parseInt(document.querySelector('input[name="trauma"]:checked').value);
const totalScore = mobility + respiratoryRate + bloodPressure + heartRate + temperature + avpu + trauma;
let resultText = '';
let resultClass = '';
if (totalScore > 6) {
resultText = 'Red';
resultClass = 'red';
} else if (totalScore >= 5) {
resultText = 'Orange';
resultClass = 'orange';
} else if (totalScore >= 3) {
resultText = 'Yellow';
resultClass = 'yellow';
} else {
resultText = 'Green';
resultClass = 'green';
}
const resultDiv = document.getElementById('result');
resultDiv.textContent = `Total Score: ${totalScore} - ${resultText}`;
resultDiv.className = `result ${resultClass}`;
}
</script>
</body>
</html>
Its a triage calculator for emergency healthcare
Also, in your CSS code, i can see there is a lot of junk CSS getting applied, like in Body, container, h1, etc which is not needed.
So please apply the CSS which you need for the form and remove everything else.
Thanks.
In the South African environment
Okay will do thank you