CodingForums.com - Meandering

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - Meandering (http://www.codingforums.com/showthread.php?t=266464)

Hello All, I have coded a simple calculator to estimate quantities in C# ASP but I want to convert it to javascript. I have attempted to use SharpKit without success. The pages of the site I am building are HTML5 standard and I loathe the idea of converting all the pages to ASP for this simple bit of code. The ocean is wide open with possibilities and I am a tiny rubber ducky meandering aimlessly about the waves.

So, any constructive analysis/$.02 would be greatly appreciated.

Ummm...and are we supposed to guess what the calculator does? Or what it looks like?

Start with designing the appearance in HTML, without worrying about JavaScript.

Then start putting the JS code in the page (at the END of the page, just before the </body> tag, will be both best and easiest).

If you don't know JavaScript, then at least do what you can can and show us the formulae involved as well as the HTML page.

And not to ask a silly question, but... Why would you need to convert ALL pages to ASP.NET? Why couldn't you just convert the one page that has the calculator on it?

Hello Old Pedant, thanks for your reply! I have attached a capture of the page. In terms of your silly question, I do not know how to merge a single ASP page with the existing project. When I try to import the HTML and CSS in VS, the layout is not accommodating (fubar). Briefly, dropbox values are selected and when the calculate button is clicked it references a multidimensional array to produce the value in label6.Text. Below is the C# code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace fluriousWeb
{
public partial class WebForm1 : System.Web.UI.Page
{

int[,] stChips = new int[,] {{2,3,5,6,8,10},
{3,6,10,13,16,19},
{5,10,15,19,24,29},
{6,13,19,26,32,39},
{8,16,24,32,40,49},
{10,19,29,39,49,58},
{11,23,34,45,57,68},
{13,26,39,52,65,78},
{15,29,44,58,73,87},
{16,32,49,65,81,97},
{32,65,97,129,162,194},
{49,97,146,194,243,291},
{65,129,194,259,323,388},
{81,162,243,323,404,485}};

int[,] stPavers = new int[,]{{2,3,5,7},
{3,7,10,13},
{5,10,15,20},
{7,13,20,27},
{12,23,35,47}};
protected void Page_Load(object sender, EventArgs e)
{}
protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
{
if (RadioButtonList1.SelectedIndex != -1)
{
Label1.Visible = true;
Label3.Visible = true;
Label2.Visible = false;
Label4.Visible = false;
DropDownList1.Visible = false;
DropDownList3.Visible = false;
DropDownList2.Visible = true;
DropDownList4.Visible = true;
Label6.Text = "";
}
if (RadioButtonList1.SelectedIndex == 1)
{
Label1.Visible = false;
Label3.Visible = false;
Label2.Visible = true;
Label4.Visible = true;
DropDownList2.Visible = false;
DropDownList4.Visible = false;
DropDownList1.Visible = true;
DropDownList3.Visible = true;
Label6.Text = "";
}
}
protected void Button1_Click(object sender, EventArgs e)
{
Label6.Text = "";
DropDownList1.Visible = false;
DropDownList3.Visible = false;
DropDownList2.Visible = false;
DropDownList4.Visible = false;
Label1.Visible = false;
Label3.Visible = false;
Label2.Visible = false;
Label4.Visible = false;
RadioButtonList1.SelectedIndex = -1;
}
protected void Button2_Click(object sender, EventArgs e)
{
if (RadioButtonList1.SelectedIndex != -1)
{
int stoneInch = DropDownList2.SelectedIndex;
int stoneSq = DropDownList4.SelectedIndex;
if (stoneInch != -1 && stoneSq != -1)
Label6.Text = stChips[stoneInch, stoneSq].ToString();
}
if (RadioButtonList1.SelectedIndex == 1)
{
int paverInch = DropDownList1.SelectedIndex;
int paverSq = DropDownList3.SelectedIndex;
if (paverInch != -1 && paverSq != -1)
{
Label6.Text = stPavers[paverInch, paverSq].ToString();
}
}
}
}
}

Yes? And are we supposed to guess at the contents of the dropdown lists?

I say again, create an HTML page *FIRST* and show that to us.

As for not knowing how to import HTML and CSS into a VS project and use it to create an ASP.NET page: Sorry, but that's just your inexperience showing. It really isn't that hard, honest.

But that's probably irrelevant. This actually looks trivial to do all in JS once you have the HTML created.

You'll pardon me, I hope, if I say that just from inspection of your C# code I don't think your code is very user-friendly. You don't even tell people why you aren't giving them an answer when they ask for one (e.g., "You must select both the number of inches and number of squares", or something to that effect).

Thanks Old Pedant for the quick reply again! I will draft up the HTML as that's a different animal than the aspx page that I currently have. In terms of the lack of aptitude I possess when it comes to importing the HTML and CSS into VS, the layout is altered when the files are imported. I haven't the ego to deny that I have much to learn and I appreciate your insights greatly. I also agree that this is a trivial piece of code.

I am a bit unsure as to your comment about user-friendliness. I only pasted a screenshot for summary purposes, in the final product, a client will visit the app with the intention of finding out how many bags of which product they require. It's a fairly simple, hopefully user-friendly process. When they select the product, the correct dropbox appears with the necessary values. It is a necessity to select the square footage and desired depth of product to determine the quantity of product needed.

I apologize if any of this reply hints at the slightest bit of snark, I am only attempting to be thorough in my communication. I truly appreciate your expertise and wisdom.

Hello Old Pedant, I have attached a txt file, rename to html to get a visual in your browser. You will not see the dropboxes by default visible=false, they were designed in asp to appear when the radio is selected.

If radio1 is selected the following dropboxes set visible=true:
dropbox1 (area in sq ft) values are 10,20,30,40,50,60,70,80,90,100,200,300,400,500
dropbox2 (depth) values are 1,2,3,4,5,6

If radio2 is selected the following dropboxes set visible=true:
dropbox3 (area in sq ft) 10,20,30,40,50,60,70
dropbox4(depth) 1,2,3,4

The arrays are as follows:

for radio1
{2,3,5,6,8,10},
{3,6,10,13,16,19},
{5,10,15,19,24,29},
{6,13,19,26,32,39},
{8,16,24,32,40,49},
{10,19,29,39,49,58},
{11,23,34,45,57,68},
{13,26,39,52,65,78},
{15,29,44,58,73,87},
{16,32,49,65,81,97},
{32,65,97,129,162,194},
{49,97,146,194,243,291},
{65,129,194,259,323,388},
{81,162,243,323,404,485}};

for radio2
{2,3,5,7},
{3,7,10,13},
{5,10,15,20},
{7,13,20,27},

I'm delighted to hear your opinion, much thanks!

It's not trivial to import the HTML into a VS project. Wasn't trying to say that. But it can be done. Mainly, you have to stop VS from getting in the way. Anyway, I do agree that this project seems to call for a browser-based, js-based solution.

As for user-friendly: What I meant was, suppose somebody specified the number of square feet but then neglected to specify the depth? You C# code would simply give no answer at all. It would be better to have it say something like "You need to select the depth as well". That's all. No big deal, an 80% of people would have no problem without it. But trust me, that other 20% would drive you nuts with phone calls about how they can't make your web page work.

Ummm...okay...I see the HTML.

But you are missing the most important parts: The <select>s with whatever <option>s they have!

EDIT: OOPS! Sorry. I see you put them in your message, not in the code.

Still, how hard would it have been to put them in the code?

Yes, agreed on fool-proofing the app. I find the c# component is more obliging to me for writing if statements to trigger error messages if necessary. This is all a delicious hot cup of brand new. I am in total agreement that a js solution would be great.

Code:

<!DOCTYPE html><!-- use HTML5 -->

<html>

<head>

<title>

    Landscaping Calculator

</title>

<style type="text/css">

  * { 

            font-family: "Century Gothic";

            font-size: medium;

    }

    div#choices, div#selects, div#message

    {

        width: 100%;

        text-align: center;

    }

    div#selects div

    {

        display: none;

    }

    #message {

        font-weight: bold;

    }

    </style>

</head>

<body>

<form id="form1">

<div id="choices">

    <label><input type="radio" name="choice" value="chips"/>Landscape Stone Chips</label>

    <br/>

    <label><input type="radio" name="choice" value="pavers"/>Patio Base - Paver Filler</label>

</div>

<br/><br/>

<div id="selects">

  <div id="chips">

    <b>Landscape Stone Chips</b>

    <br/><br/>

    <label>Area in square feet: 

    <select name="chipsSqFt">

        <option>--choose--</option>

        <option>10</option><option>20</option><option>30</option>

        <option>40</option><option>50</option><option>60</option>

        <option>70</option><option>80</option><option>90</option>

        <option>100</option><option>200</option><option>300</option>

        <option>400</option><option>500</option>

    </select>

    </label>

    <br/><br/>

    <label>Depth in inches:

    <select name="chipsInches">

        <option>--choose--</option>

        <option>1</option><option>2</option><option>3</option>

        <option>4</option><option>5</option><option>6</option>

    </select>

    </label>

  </div>

  <div id="pavers">

    <b>Patio Base - Paver Filler</b>

    <br/><br/>

    <label>Area in square feet: 

    <select name="paversSqFt">

        <option>--choose--</option>

        <option>10</option><option>20</option><option>30</option>

        <option>40</option><option>50</option><option>60</option>

        <option>70</option>

    </select>

    </label>

    <br/><br/>

    <label>Depth in inches:

    <select name="paversInches">

        <option>--choose--</option>

        <option>1</option><option>2</option><option>3</option>

        <option>4</option>

    </select>

    </label>

  </div>

</div>

<hr/>

<div id="message"></div>

</form>

<script type="text/javascript">

var theForm = document.getElementById("form1");

theForm.choice[0].onclick = choose;

theForm.choice[1].onclick = choose;

theForm.chipsSqFt.onchange = calculate;

theForm.chipsInches.onchange = calculate;

theForm.paversSqFt.onchange = calculate;

theForm.paversInches.onchange = calculate;



var chipsNeeded = [

    [2,3,5,6,8,10],

    [3,6,10,13,16,19],

    [5,10,15,19,24,29],

    [6,13,19,26,32,39],

    [8,16,24,32,40,49],

    [10,19,29,39,49,58],

    [11,23,34,45,57,68],

    [13,26,39,52,65,78],

    [15,29,44,58,73,87],

    [16,32,49,65,81,97],

    [32,65,97,129,162,194],

    [49,97,146,194,243,291],

    [65,129,194,259,323,388],

    [81,162,243,323,404,485]

];

var paversNeeded = [

    [2,3,5,7],

    [3,7,10,13],

    [5,10,15,20],

    [7,13,20,27]

];



function choose()

{

    var showDiv = this.value;

    document.getElementById("chips").style.display = 

        showDiv == "chips" ? "block" : "none";

    document.getElementById("pavers").style.display = 

        showDiv == "pavers" ? "block" : "none";

    document.getElementById("message").innerHTML = "";

}



function calculate()

{ 

    var form = this.form;

    var data, sel1, sel2;

    var msg = document.getElementById("message");



    if ( form.choice[0].checked )

    {

        data = chipsNeeded;

        sel1 = form.chipsSqFt;

        sel2 = form.chipsInches;

    } else {

        data = paversNeeded;

        sel1 = form.paversSqFt;

        sel2 = form.paversInches;

    }

    if ( sel1.selectedIndex == 0 )

    {

        msg.innerHTML = "Please select a number of square feet";                 

        msg.style.color = "red"; 

        return;

    }

    if ( sel2.selectedIndex == 0 )

    {

        msg.innerHTML = "Please select a number of inches of depth";                 

        msg.style.color = "red"; 

        return;

    }

    msg.style.color = "black";

    var bags = data[sel1.selectedIndex-1][sel2.selectedIndex-1];

    msg.innerHTML = "You will need " + bags + " bags at 50 lbs. per bag";

}

</script>

</body>

</html>

Gigantic thanks for your expertise kind Sir! You are an animal!!!

Do study it, see if you can follow the code, and feel free to ask if puzzled.

Studying right now, adding to "my bag of tricks". Have a great evening wherever about's you are.

Master Coder Grand Pedant, have you a suggestion for text transitioning? Currently the footer shifts down block-ily. Curious about a smoother effect. I have looked at JS and CSS but what I have found is predominantly for menus and graphics, ie slideshows. Any quick ideas you can throw out would be awesome. Thanks!!!:thumbsup:

What footer???

No footer in what you showed or what I gave you.

Can you show it live? Give us a URL?

Or... If you mean that when the answer appears it occupies space and so shoves down whatever is below it, there's an easy fix: So long as the answer isn't longer than one line, just put an   (Non-Breaking SPace) into the <div> that gets the answer. That character will be the same height as the answer and so when the answer appears, stuff below it shouldn't move. Or or or... Again, showing it to us live would be best way for us to see the problem.