Dynamic Conversion Chart - javascript

I need to create a conversion chart from degrees Celsius, to degrees Fahrenheit. To do this, I need to use javascript to prompt the user for input for three things: starting temp in Celsius, ending, and the interval at which it will be displayed. Example:
start:100
end:10
interval:10
100 conv
90 conv
80 conv
70 conv
... conv
10 conv
Additionally, this data needs to be displayed in a table. Our instructor has not taught us how to dynamically change or create html or css elements, so I'm a little lost on how I will get the specific amount of cols and rows that ill need, and how I'll get the data in the right position before and after conversion.
Please help!
EDIT so I've been trying, and so far I have something. it looks like:
<script language = "javascript" type="text/javascript">
function prompts()
{
var startingTemp = prompt("Please enter the starting temperature.","Degrees Celsius");
var endingTemp = prompt("Please enter the ending tempurature.","Degrees Celsius");
var intervalTemp = prompt("What interval do you wish to display between the two?","Interval Number");
}
function table()
{
var myTable= "<table><tr><th>Celsius</th>";
myTable+= "<th>Farhenheit</th></tr>";
myTable+= "<tr><td>"+startingTemp"</td>";
myTable+= "<td>212</td></tr>";
myTable+= "</table>";
document.write(myTable);
}
prompts();
table();
</script>
however, the line where I have "+startingTemp" somehow messes it all up and won't print anything. With this included, the table doesn't print anymore and I'm also not being prompted when I reload the page. I'm just trying to get the value of startingTemp displayed there.

Related

How do I Display a link inside an if-condition using javascript based on var

im trying to change the href of my var explanation 11 based on the conditions obtained.
here's the code for the variable
if ( savings_budget_aycs > totalexp ) {
var msg="UNDER";
var explanation="You still have some excess money after factoring all your expenses in your budget. You may want to start looking at investing your excess money or increasing your savings. Do read out content on";
var explanation11=" saving and investing";
var explanation12=" to understand more.";
var explanation2="Since you have more money to use from your budget, one option is to increase your savings.";
var remaining=savings_budget_aycs-totalexp;
} else {
var msg="OVER";
var remaining=totalexp-savings_budget_aycs;
var explanation="This means that your spending has exceeded your income. You will need to make some cutbacks to be able to stay within your budget. Do read our content on";
var explanation11=" planning and budgeting";
var explanation12=" to understand more.";
var explanation2="You are over budget, so try to see what you can cut down on to save some money.";
}
and here is where i call the explanation
firstTableHtml += "<div class=\'explanation\'>"+explanation+"<a id=\'link-saving\'>"+explanation11+"</a>"+explanation12+"</div>";
Remove back slashes before the quotes.
firstTableHtml += "<div class='explanation'>"+explanation+"<a id='link-saving'>"+explanation11+"</a>"+explanation12+"</div>";

Javascript check/validate that sum of three fields add up to 1

I'm creating a nutrition JavaScript calculator where the user enters a daily calorie intake and selects their percentage of carbohydrate, protein, and fat. The result is the percentage of calories and grams from each nutrient. I've got it working but...
As a math check/validation, I want to include some code that will add up the selected carbohydrate, protein, and fat percentages and ensure they equal exactly 1 (or 100%). If this is not true, then I want a little alert/error message to pop up so they know to go back and fix this before the "Calculate" button will work.
Here is the relevant code for what I'm trying to ensure adds up to 1
Thanks in advance for any advice you can provide.
I'm a relative novice with JS, so I'm not even really sure of the exact code I need to use in this case.
<script type="text/javascript">
function calc (form) {
var C, P, F
P=form.Protein.options[form.Protein.selectedIndex].value
F=form.Fat.options[form.Fat.selectedIndex].value
C=form.Carbohydrate.options[form.Carbohydrate.selectedIndex].value
}
</script>
function calc(form) {
const errorEl = document.getElementById('error');
// Clear the error before calculating the new value.
errorEl.innerText = 'Your error message';
const protein = form.Protein.options[form.Protein.selectedIndex].value;
const fat = form.Fat.options[form.Fat.selectedIndex].value;
const carbohydrate = form.Carbohydrate.options[form.Carbohydrate.selectedIndex].value;
if (Number.isNaN(prtein) || Number.isNaN(fat) || Number.isNaN(carbohydrate)) {
document.getElementById('error').innerText = 'Your error message';
return;
}
const sum = parseFloat(protein) + parseFloat(fat) + parseFloat(carbohydrate);
if (sum > 1) {
document.getElementById('error').innerText = 'Your error message';
}
}
And you also need an element with the error id in your form that will show the error message. For example <p id="error"></p>

display 125 words from the description field of the database mysql

Hello fellow Overflows,
So im in the middle of creating a toplist script, ready to launch to the public,
I'm stuck on one perticualr subject.
Displaying X amount of content from A database field.
<?php echo $server_data['description']; ?>
As you can see in this image below, That wouldn't be a good idea to display the full amount.
http://i.imgur.com/IhLs7L7.png
What do i need?
Instead of it displaying all of the database field, i just want it to display 150 characters of the field.
It is best to limit characters while you are selecting from database because it will improve performance a bit. You can limit characters on select with mysql LEFT() function.
Here is how to do it:
SELECT LEFT(description, 150), another_col FROM ......
Try this:
$string = substr($server_data['description'], 0, 150);
substr() will only return a certain amount of characters. If you want a certain amount of words then you could use the following:
<?php
function excerpt($content = '',$number_words = 125){
$content = strip_tags($content);
$contentWords = substr_count($content," ") + 1;
$words = explode(" ",$content,($number_words+1));
$excerpt = join(" ",$words);
return $excerpt;
}
echo excerpt($server_data['description'], 125);

Display Form Input as Stylized String - Javascript

I am trying to take input from a number field and display it somewhere else on the page.
Here is my HTML
<input id="dollar" type="text" name="mytextfield2" onkeyup="updateDollarDisplay();">
<div id="dollarValue"></div>
and my javascript
function convertDigitsToArray(number){
var s = parseInt(number).toString(10).split("").map(Number);
return s;
}
function updateDollarDisplay() {
var amount = $('#dollar').value;
var a = convertDigitsToArray(amount);
console.log(a[0]);
$('#dollarValue').text(a[0]);
}
Running the exact code in a javascript interpreter works fine, it gives me each digit as an element in the array. When I try to do the same through the HTML page it gives me NaN each time. Any ideas?
Fiddle here: http://jsfiddle.net/7mzo8eb5/2/ I'd like it to show to input in the grayed div on each input.
The problem is with var amount = $('#dollar').value;
value is not an attribute, but val is a function. Should be: var amount = $('#dollar').val();

Table to validate data inserted manually and give a message at the end

I'm trying to create a HTML table that will compare some numbers with some intervals and according to which interval the data is situated it will display a message at the end. the data is from polluted soil sample results and the result should tell me in which class the soil is situated. I have made the table but only the last cell is doing what I want. I could repeat the script an give each result to the right of each cell but in fact a just need an answer at the end. Can you help me build a global variable for my table?
Here is what I have so far. The last cell is doing what I want.
The cells with text are there just for information purpose to give an general idea
I have 37 variables (analise results) that i have to compare with 3 intervals (FNADE Classe 1, 2 and 3). If just one of those variables is found in an interval it should display me the name of this interval (ex: FNADE Classe 1), the hierarchy being 3<2<1
Here is the code part, maybe it helps :
window.onload=function() {
document.getElementById("form1").onsubmit=function() {
var celula37 = parseInt(this.celula37.value,10);
var text = "<b>Votre terre peut etre reçue dans une instalation : </b>";
if (celula37 <= 399) text += "FNADE Classe 3";
else if (celula37 >= 400 && celula37 <= 1800) text += "FNADE Classe 2";
else if (celula37 >= 1801) text += "FNADE Classe 1";
else text = "SVP inserez des donnes";
document.getElementById("soilMessage").innerHTML=text;
return false; // cancel submit
}
}
When working with groups of elements it's often easier to use a CSS class name so all of the elements can be treated as an array. It also helps you style things using CSS instead of repeating inline style statements.
<input type="text" class="cellData" name="celula37" id="celula37" value="" />
Then you can do this:
myData = document.getElementsByClassName('cellData')
var celula37;
for(var x = 0;x<myData.length;x++) {
celula37 = parseInt(myData[x].value,10);
... your code ...
document.getElementById('celula'+x).innerHTML = text;
// note, arrays are zero-based, so you may need to tweak your IDs or 'x'
}
myData is then an array of all the inputs.
Then you can style things using CSS:
<style>
.cellData {
border:solid windowtext 1.0pt;
}
td {
border:solid windowtext 1.0pt;
}
</style>
Bon chance!

Categories

Resources