Please help on printing shipping details as per the form

zuzupus · May 2, 2018, 10:07am

dcookwebdev · May 2, 2018, 11:17am

It would help if you add more context about what you are trying to accomplish. I’m assuming you mean print as in print on paper with a printer.

If you only want to print part of a web page you can explore CSS @media print.
Take a look at this discussion on Stack Overflow.

Alternatively, you could use Javascript and a “print” button to open a new tab with a better formatted version of the result for the user to print (without other stuff).

If you want to print to console, use
console.log(document.getElementById("result"))

zuzupus · May 2, 2018, 11:22am

i am new to JS so bare with me, i want to print in same form itself on top right , similar to the screenshot, can you pl. also help me to get the print for date in given format as June 02 2018, while input is 06/02/2018, below is the code but struggling to print as per the form where id=result is pointed

Shipping Details

Source Address <textarea type=“text” rows=“4” cols="50"name=“source” id=“source”>

Destination Address <textarea type=“text” rows=“4” cols="50"name=“destination” id=“destination”>

Total Product Weight

Cost(per kg)

Shipping Date

Express Delivery

<input type="button" value="Calculate" name="calculate" id="calculate" onClick="multiply()">

dcookwebdev · May 2, 2018, 11:38am

Okay, I understand what you want now.

I’m not going to code it all for you. I believe it will be more beneficial for you to try and learn how to do it yourself. I’ve created a small example for you that does a portion of what you want to accomplish. You can look at it and study it. I am using ES6 Javascript - not sure if that is taught in FCC yet (I have yet to do the Javascript stuff yet!).

Here’s a link to the codepen: https://codepen.io/dcookwebdev/pen/JvNBpw

zuzupus · May 2, 2018, 3:18pm

I think you still dont understand my problem, the solution what you have provided is very straight forward, please refer the screenshot, I would like to print on top right next to destination and the details needs to be printed as follows

Value entered in From textarea
Value entered in To text area
Shipping Cost
Shipping Date with format June 02 2018 but the value entered in text box is 06/02/2018, this seems to be tough especially beginner like me

dcookwebdev · May 2, 2018, 4:06pm

Yeah there’s a lot to JS! Keep going and keep learning! I’m sorry that my example code wasn’t exactly what you want, yet I didn’t intend for it to be so. My hope was that you could look at that and ascertain what it is that you need to do. A “learn from something” situation rather than a “copy something” situation.

Date parsing:

JS provides some ways to parse a date. There is a lot of documentation to read about the built-in Date and it’s various methods.

Here’s an example of what is possible:

var options = {year: 'numeric', month: 'long', day: 'numeric' };
var today  = new Date('06/02/2018');
console.log(today.toLocaleDateString("en-US",options)); // June 2, 2018

Here is more information about .toLocalDateString()

zuzupus · May 3, 2018, 6:10am

this is the code I have written, but i want all the values to get printed on right side of the form.
No hardcoding

function multiply()
{
var product_weight = document.getElementById(“weight”).value;
var product_cost = document.getElementById(“cost”).value;
var express_check = document.getElementById(“delivery”).checked;
var total_weight;

		if(express_check == true)
			{
				total_weight = 1 * product_weight * product_cost; 
			}
		else if(express_check == false)
			{
				total_weight = 0.25 * product_weight * product_cost;  	
			}
		
		document.getElementById("result").innerHTML = "Dear Customer, your total shipping cost is $"+total_weight;
	}

Shipping Details

Source Address
Destination Address
Total Product Weight
Cost(per kg)
Shipping Date
Express Delivery

zuzupus · May 3, 2018, 6:12am

Source Address <textarea type=“text” rows=“4” cols="50"name=“source” id=“source”>

Destination Address <textarea type=“text” rows=“4” cols="50"name=“destination” id=“destination”>

Total Product Weight

Cost(per kg)

Shipping Date

Express Delivery

<input type="button" value="Calculate" name="calculate" id="calculate" onClick="multiply()">

dcookwebdev · May 3, 2018, 6:30am

@zuzupus I don’t mind helping. Could you put all of what you have together in a functioning Codepen?

Side note:
How to post code on the forum so that it has special formatting like this:

console.log('hello world');

Use backticks like this:

```js
console.log(‘hello world’);
```

Html example:
```html
<div id=“div-one”>hello world</div>
```
Will turn into this:

<div id="div-one">hello world</div>

zuzupus · May 3, 2018, 8:59am

my code is incomplete, function average is not working it seems and please bare with me I am not much familiar with js, request to please refer the screenshot in first post

	<script langauge="javascript" type="text/javascript">

function average(itemCost) 
        {
						
		var total = 0;
		var itemCost;
		for(var i = 0; i < itemCost.length; i++) {
    		total += itemCost[i];
					}
		var avg = total / source.length;
			alert(avg)
		document.getElementById("result").innerHTML = avg;
		}

</script>


<h3> Average Shipment Cost Calculation</h3>

<form>
  
  Shipping Item Cost <textarea type="text" rows="4" cols="50"name="source" id="itemCost"></textarea><br>
  
  <input type="button" value="calculate" id="calculate" onClick="average()">
  <br>
  Average shipment cost <input type="text" name="result" id="result"><br>
	
</form>
<p> <span id = "ship"></span> </p>
			
    </body>

</html>

zuzupus · May 3, 2018, 9:00am

sorry wrong code

<script langauge="javascript" type="text/javascript">

function multiply() 
    	{
			var product_weight = document.getElementById("weight").value;
			var product_cost = document.getElementById("cost").value;
			var express_check = document.getElementById("delivery").checked;
			var total_weight;
			
			if(express_check == true)
				{
					total_weight = 1 * product_weight * product_cost; 
				}
			else if(express_check == false)
				{
					total_weight = 0.25 * product_weight * product_cost;  	
				}
			
				}

</script>


<h2> Shipping Details </h2>

<form name="myForm">
  
  Source Address <textarea type="text" rows="4" cols="50"name="source" id="source"></textarea><br>
  Destination Address <textarea type="text" rows="4" cols="50"name="destination" id="destination"></textarea><br>
  Total Product Weight <input type="text" name="weight" id="weight"><br>
  Cost(per kg) <input type="text" name="cost" id="cost"><br>
  Shipping Date <input type="date" name="date" id="date"><br>
  Express Delivery <input type="checkbox" name ="delivery" id="delivery">
   		


 	<input type="button" value="Calculate" name="calculate" id="calculate" onClick="multiply()">
</form>
<p> <span id = "result"></span> </p>
			
    </body>

</html>

dcookwebdev · May 3, 2018, 12:38pm

@zuzupus okay there are a few things to consider in order to get this working like your original picture. You’re getting close! I believe a crucial part of programming is problem solving so I will just put some problems here in the hopes that you can try to find the solution. I also have some examples below. My suggestion is to dig in, think a lot, try, fail, try again, fail again, try again… loop… keep going… you’ll get it! Again I don’t want to write the code for you, my hope is that you’ll learn by doing. So please try, and when you’re ready again, let’s see your code!
(it would be useful if you use Codepen.com - it’s easier to see for people to help you!)

Problems in HTML:

It is usually recommended to not use inline event handlers such as onclick="myFunction()" See below for the basics of how to add event handlers via Javascript.
Using <span> for the result is not recommended. <div> is better. See below about using a template to format the result.

Problems in JS:

There is no output from the function multiply().
In your multiply() function, your if statements return the wrong amount. If express is not checked and weight is 3 and cost is 6 it should return 18 but it returns 4.5.
There is nothing here to process the date.
You will need to call a few functions when the button Calculate is pressed. See below for a tip about separating functions.
In a comment from yesterday I posted something about parsing dates. Try to code it! Use another function!
There is no template for adding HTML to your result. See below about using a template to format the result.
(something for later once the basics are done) There is nothing in your JS code to validate the inputs. Example: for Cost a user could put in two dollars and then multiply() will have an error.

Adding Event Handlers in JS

Inline event handler example:

<button id="button" onclick="myFunction()">click me</button>

The problem is that myFunction() is likely not accessible to the DOM. So it is recommended to add event listeners in Javascript.

Basically:
element.addEventListener(event, function)

Example:

//HTML:
<button id="button">Click me</button>

//JS:
var button = document.getElementById("button");
button.addEventListener("click", myFunction); //<- listens for a click and then will call myFunction when it is clicked

Separating Functions and calling them in an event

It’s a good idea to keep functions in JS small and separate. It helps to maintain code and helps with readability. It is also easier to debug if there are problems.

Sometimes we need to call multiple functions at once when an event happens, such as click.
Here is an example where I want to call two functions that do different things:

let x = 5;
let y = 6;

function multiply(x, y) {
  console.log(x * y);
}

function divide(x, y) {
  console.log(x / y);
}

function runMyFunctions() {
  myFunctionOne(x, y);
  myFunctionTwo(x, y);
}

If a button has the click event listener added to it with the call to runMyFunctions then both multiply() and divide() will both run.

Using a Template to format a result in HTML

Sometimes we want to update elements in the DOM with a result from our JS. There are several ways to do this. A simple way is to use element.innerHTML = "some new stuff". Here I will give two approaches for making a template:

For both of the approaches below let’s say we have this element from our HTML:

var appleDiv = document.getElementById("apple-div");

1st approach is be concatenating strings:

This is the old way of doing things.

var appleColor = "green";
var template = "<p class=\"apple\">I like " + appleColor + "apples. </p>";
appleDiv.innerHTML = template;

2nd approach is by using template literals:

Since ES6 since is the new way of doing things. If you like reading, you can read more about template strings here

let appleColor = "red";
let template = `<p class="apple">I like ${appleColor} apples.</p>`; // don't need to escape the quotes for my apple class in template literal
appleDiv.innerHTML = template;

Note:
ES6 defines new standards for Javascript and so moving forward it’s better to use. So, it’s good to use template literals.

zuzupus · May 4, 2018, 5:55am

honestly i dont understand this forum, i have already provided the code but still you were saying I wont write code, I am not code asking, seeking help to use my code and print which is given in screenshot.
Its been more than 2 days but no help

dcookwebdev · May 4, 2018, 7:04am

@zuzupus
Did you make any changes to your code?

zuzupus · May 4, 2018, 8:59am

nope, the code looks perfectly fine, the one which I have shared i m struggling to print From, Destination,date in specific format and shipping cost on right side of form exactly in screenshot, you can use my code to help

dcookwebdev · May 4, 2018, 12:00pm

@zuzupus

Please take a look at this Codepen here here and you can reference some of the things I typed above.

I think that it will be good if you can spend some time reviewing the course material from https://freecodecamp.org as @camperextraordinaire has suggested.

JohnBackUp · May 4, 2018, 6:11pm

@dcookwebdev Just use Jquery to change the values on the html after taking them from the inputs also using jquery.

dcookwebdev · May 4, 2018, 10:42pm

Yeah that’s also a good way to go about it if he wants to use jquery.

zuzupus · May 7, 2018, 6:49am

thanks alot,but still when i click on calculate button seems to be not working. Also in IE the date selection is not working but in chrome its working, below code for your reference.



<h2 class="heading"> Shipping Details </h2>
<script>
const calculateButton = document.getElementById("calculate");
calculateButton.addEventListener("click", calculate)

function parseDate(formDate) {
  //!! Warning: there should be code here to check that the input is the correct type etc.
  console.log(formDate);
  let options = {year: 'numeric', month: 'long', day: 'numeric' };
  let parsedDate  = new Date(formDate);
  return parsedDate.toLocaleDateString("en-US",options);
}

function multiply() {
  //!! Warning: nothing is here to check that the form values are numbers. Could result in an error or NaN.
  let productWeight = document.getElementById("weight").value;
  let productCost = document.getElementById("cost").value;
  let expressCheck = document.getElementById("delivery").checked;
  let totalCost;

  if (expressCheck == false) {
    totalCost = productWeight * productCost;
  } else if (expressCheck == true) {
    totalCost = 0.25 * productWeight * productCost;
  }
  return '$' + Math.round(totalCost * 100) / 100; // Need to round to two decimals
}

function returnResult(element, sourceAddress, destinationAddress, shippingDate, totalCost) {
  let htmlTemplate = `<b>Shipping Details</b>
From: ${sourceAddress}<br>
To: ${destinationAddress}<br>
Shipping Cost: ${totalCost}<br>
Shipping Date: ${shippingDate}`
  element.innerHTML = htmlTemplate;
}

function calculate() {
  let sourceAddress = document.getElementById("source").value;
  let destinationAddress = document.getElementById("destination").value;
  let formDate = document.getElementById("date").value;
  let element = document.getElementById("result");
  let totalCost = multiply();
  let shippingDate = parseDate(formDate);
  returnResult(element, sourceAddress, destinationAddress, shippingDate, totalCost);
}
</script>
    <form name="myForm">
      Source Address <br><textarea type="text" rows="4" cols="50" name="source" id="source"></textarea><br> Destination Address <br><textarea type="text" rows="4" cols="50" name="destination" id="destination"></textarea><br> Total Product Weight <input type="text"
        name="weight" id="weight"><br> Cost(per kg) <input type="text" name="cost" id="cost"><br> Shipping Date <input type="date" name="date" id="date"><br> Express Delivery <input type="checkbox" name="delivery" id="delivery">

      <input type="button" value="Calculate" name="calculate" id="calculate" onClick="calculate()">
    </form>
  
  <div class="result-div" id="result">
    <b>Shipping Details:</b><br>
    <i>Enter the information in the form and press "calculate".</i>

  </div>

dcookwebdev · May 7, 2018, 7:43am

Remove onclick=calculate() in HTML that may be the problem. My codepen doesn’t have exactly the same HTML as your original code. Sorry I’m on my phone now and can’t really check in full.

Other than that yes we run into browser compatibility issues. Some features of Javascript aren’t supported on older browsers.