We Keep Coding

How to apply link to entire button rather than just the text

Is there a way to assign the link to the whole button, so that it is easier to interact with instead of having to click on the text itself?
<table style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; mso-line-height-rule: exactly; border-collapse: collapse !important;" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#000000">
<tbody>
<tr>
<td align="center" width="250px" style="padding: 20px 10px; width: 250px;">
<a rel="noopener noreferrer" href="https://www.thermador.com/us/dealer-locator?cid=April21SSElead1v2|emai|en|noc|adhoc|thd|own|12468|engage|finddealer_cta" target="_blank" title="FIND DEALER" style="font-family: Avenir, Arial, san-serif; color: #ffffff; text-decoration: none; line-height: 14px; white-space: nowrap; font-size: 15px; font-weight: normal; letter-spacing: 3px;"
data-sap-hpa-ceimo-link-id="202004221731488" data-sap-hpa-ceimo-link-outboundid=" " data-sap-hpa-ceimo-link-utm="X" data-sap-hpa-ceimo-link-trackable="X" data-sap-hpa-ceimo-link-type="Static">FIND DEALER</a>
</td>
</tr>
</tbody>
</table>

Simple. Just apply the sizing CSS to the <a> element instead and give it an inline-block display type since anchors are by default inline and will not render any padding.
a
{
padding: 20px 10px;
width: 250px;
text-align: center;
display: inline-block;
}
<table style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; mso-line-height-rule: exactly; border-collapse: collapse !important;" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#000000">
<tbody>
<tr>
<td align="center"><a rel="noopener noreferrer" href="https://www.thermador.com/us/dealer-locator?cid=April21SSElead1v2|emai|en|noc|adhoc|thd|own|12468|engage|finddealer_cta" target="_blank" title="FIND DEALER" style="font-family: Avenir, Arial, san-serif; color: #ffffff; text-decoration: none; line-height: 14px; white-space: nowrap; font-size: 15px; font-weight: normal; letter-spacing: 3px;"
data-sap-hpa-ceimo-link-id="202004221731488" data-sap-hpa-ceimo-link-outboundid=" " data-sap-hpa-ceimo-link-utm="X" data-sap-hpa-ceimo-link-trackable="X" data-sap-hpa-ceimo-link-type="Static">FIND DEALER</a></td>
</tr>
</tbody>
</table>

How to increment notifications when different buttons are clicked on multiple pages in jquery

I have a list of buttons. When a user clicks on one it will add and show you a notification bubble. This calculates how many times a user clicked a button. This works fine for the table, as shown below.
However I have more buttons on a different part of a page that I also want to include in to the notification list. For example, if I have the button pants and O clicks on it, it must check the current notifications to see if any one of them is clicked and add to it, and vice versa.
How can I achieve this?
function countN(counter) {
if (counter > 0) {
$('.notify').addClass("notification");
$('.market-odds .btn').addClass("notification")
$('.market-odds .btn').html(counter);
$(".notify").html(counter);
}
}
$('body').on('click', '.marketoptionrow.OP a.button', function() {
var alreadyClicked = $(this).hasClass('clicked');
if (!alreadyClicked) {
$(this).addClass('clicked');
var counter = parseInt($(".notify").html()) || 0
counter++;
countN(counter);
}
});
.notification {
position: absolute;
display: block;
text-align: center;
font-size: 11px;
font-weight: 700;
letter-spacing: -1px;
width: auto;
min-width: 8px;
/*height: 9px;*/
line-height: 5px;
padding: 5px;
border-radius: 50%;
color: #fff;
box-shadow: 1px 1px 5px #000;
border: 2px solid #fff;
background-color: #b60000;
}
.button {
display: block;
width: 56px;
height: 22px;
line-height: 22px;
background: url(images/odds_button.png) #f9b108 repeat-x;
color: #005081;
border-radius: 9px;
text-decoration: none;
margin: 0 auto;
cursor: pointer;
border-left: 1px #f9b108 solid;
border-top: 1px #f9b108 solid;
border-bottom: 1px #f9b108 solid;
border-right: 1px #f9b108 solid;
box-shadow: 1px 1px 1px #005081;
text-transform: uppercase;
font-family: 'Roboto-Bold';
font-size: 14px;
font-weight: normal;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="notify"> Notification</span>
<br/>
<table>
<thead>
<tr>
<th>Current</th>
</tr>
</thead>
<tbody>
<tr class="marketoptionrow OP" dataid="35917931">
<td><a class="button" bettype="W">Milk</a></td>
</tr>
<tr class="marketoptionrow OP" dataid="35917934">
<td><a class="button" bettype="W">Salt</a></td>
</tr>
<tr class="marketoptionrow OP" dataid="35917933">
<td><a class="button" bettype="W">EGGS</a></td>
</tr>
<tr class="marketoptionrow OP" dataid="35917937">
<td><a class="button" bettype="W">flour</a></td>
</tr>
</tbody>
</table>
<br/>
How do i include this into the notifications. if this is clicked first before the table buttons then the table buttons must add to its list and vice versa
<div id="">
<div class="market">
<input type="button" id="1104263 " class="btn btn-betslip bg-blue" value="Pants">
</div><br/>
<div class="market">
<input type="button" id="1104264" class="btn btn-betslip bg-blue" value="Shirt">
</div><br/>
<div class="market">
<input type="button" id="1109306" class="btn btn-betslip bg-blue" value="Shoes">
</div>
</div>

How can I add a button that adds the answer to the inputs, next to the button?

I have this code written here but there is something I want to add to it that I would like help with, and not being a master coder I don't know what to do.
Here is my code so far
function calculate() {
var A = document.getElementById("a").value;
var B = document.getElementById("b").value;
var C = document.getElementById("c").value;
var D = document.getElementById("d").value;
var ans = ((A * B) - (C * D)) / (B - C);
alert(ans);
}
* {
font-family: arial;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 40px;
background-color: #05537b;
}
.thisTable td {
line-height: 36px;
font-size: 14px;
}
.container {
background-color: #EEE;
padding: 5px 15px 15px 15px;
border: 1px solid #CCC;
margin-bottom: 25px;
width: 100%;
text-align: left
}
.box {
background-color: #FFF;
border: 1px solid #CCC;
width: 40px;
margin: 0px 4px;
}
.button {
margin-left: 10px;
background-color: #333;
border: 1px solid #CCC;
width: 25px;
color: #FFF;
font-weight: bold;
}
.answer {
padding-left: 10px
}
.answer b {
text-decoration: underline
}
.how {
color: #555;
margin-left: 15px;
font-size: 13px;
background-color: #FFF;
padding: 2px 4px
}
.how b {
color: #D00;
font-weight: bold;
text-decoration: none
}
<div style="width:1000px; background-color:#FFF; padding:10px 20px; text-align:center; -moz-border-radius:10px">
<div style="font-size:30px; font-weight:bold; padding-bottom:20px; padding-top:8px">Average Damage Calculator</div>
<div class=container>
<h3>Calculate Target Average</h3>
<table class=thisTable>
<tr>
<td>Type in your target average damage <input type='number' id='a' /> </td>
</tr>
<tr>
<td>Type the amount of battles you want to achieve it by <input type='number' id='b' /></td>
<tr>
<td>Type in your current number of battles <input type='number' id='c' /></td>
<tr>
<td>Type in your current average damage <input type='number' id='d' /></td>
</tr>
<tr>
<td>
<button onClick='calculate()'>calculate</button>
</td>
</tr>
</table>
</div>
</div>
Currently I have it, so that when the user types in the information and clicks the "calculate" button, the answer pops up in like a small window. But I don't want that to happen. What I want to happen instead, is that, when you click the "calculate" button, the answer (a number) will appear right below, or next to the button instead of popping up on the screen. I would also like to refine the answer from being so specific, and only have it round the thousandth decimal.

As you tagged the question jQuery, I remade your example to utilise it. Also, there are a few suggested changes: field names/variable names would benefit from being clues to what they contain, and rather than hard-coding the event listeners, attach them programmatically. The comments in my code should show what's happening.
// Rather than an inline click event listener, as the OP has
// tagged the question jQuery, we can simply attach the event
// listener here.
$(".calc-btn").on("click", calculate);
/*****
* function to actually calculate the target value. This gathers
* all the given fields, performs the requisite math, and outputs
* a rounded value to the answer pane.
*****/
function calculate() {
// Note the meaningful names. While not a key part of your
// question, it will help down the line with debugging errors
// if your variables and fields have meaningful names.
var targetDamage = parseInt($("[name='target-damage']").val());
var targetBattles = parseInt($("[name='target-battles']").val());
var currentBattles = parseInt($("[name='current-battles']").val());
var currentDamage = parseInt($("[name='current-damage']").val());
// Given the above fields, we can see what we're actually doing
// rather than simply manipulating A, B, C and D.
var ans = ((targetDamage * targetBattles) - (currentBattles * currentDamage)) / (targetBattles - currentBattles);
var remainingBattles = targetBattles-currentBattles;
// Stick the answer in the answer pane!
$(".calculator-answer-pane").text("You need to average "+Math.round(ans)+" over the next "+remainingBattles+" battles to reach your target.");
}
* {
font-family: arial;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 40px;
background-color: #05537b;
}
.thisTable td {
line-height: 36px;
font-size: 14px;
}
.main-container {
width: 1000px;
background-color: #FFF;
padding: 10px 20px;
text-align: center;
-moz-border-radius: 10px;
}
.calculator-container {
font-size: 30px;
font-weight: bold;
padding-bottom: 20px;
padding-top: 8px;
}
.calculator-main-pane {
background-color: #EEE;
padding: 5px 15px 15px 15px;
border: 1px solid #CCC;
margin-bottom: 25px;
width: 100%;
text-align: left
}
.box {
background-color: #FFF;
border: 1px solid #CCC;
width: 40px;
margin: 0px 4px;
}
.button {
margin-left: 10px;
background-color: #333;
border: 1px solid #CCC;
width: 25px;
color: #FFF;
font-weight: bold;
}
.answer {
padding-left: 10px
}
.answer b {
text-decoration: underline
}
.how {
color: #555;
margin-left: 15px;
font-size: 13px;
background-color: #FFF;
padding: 2px 4px
}
.how b {
color: #D00;
font-weight: bold;
text-decoration: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-container">
<center>
<div class="calculator-container">Average Damage Calculator</div>
<div class="calculator-main-pane">
<h3>Calculate Target Average</h3>
<table class=thisTable>
<tr>
<td>Type in your target average damage</td>
<td>
<input type='number' name='target-damage' />
</td>
</tr>
<tr>
<td>Type the amount of battles you want to achieve it by</td>
<td>
<input type='number' name='target-battles' />
</td>
</tr>
<tr>
<td>Type in your current number of battles</td>
<td>
<input type='number' name='current-battles' />
</td>
</tr>
<tr>
<td>Type in your current average damage</td>
<td>
<input type='number' name='current-damage' />
</td>
</tr>
<tr>
<td>
<button class="calc-btn">calculate</button>
</td>
<td class="calculator-answer-pane"></td>
</tr>
</table>
</div>
</center>
</div>

I've added a span next to the button. Instead of showing an alert after calculating a score, the answer is placed in the span.
function calculate(){
// The value property returns a string, use parseInt to convert it to an integer.
var targetAvgDamage = parseInt(document.getElementById("a").value, 10),
numberOfBattles = parseInt(document.getElementById("b").value, 10),
battlesFought = parseInt(document.getElementById("c").value, 10),
currentAvgDamage = parseInt(document.getElementById("d").value, 10);
var answer = ((targetAvgDamage * numberOfBattles) - (battlesFought * currentAvgDamage)) / (numberOfBattles - battlesFought);
// Get the element from the DOM to place the answer in.
var answerCell = document.getElementById('answer-cell');
// Set the text content of the element.
answerCell.textContent = 'The answer is: ' + Math.ceil(answer);
}
var
// Get the button element from the DOM.
calculateTrigger = document.getElementById('calculate-btn');
// Attach an event handler for the visitor clicks on the button.
calculateTrigger.addEventListener('click', calculate);
* { font-family:arial; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
body { margin:40px; background-color:#05537b; }
.thisTable td { line-height:36px; font-size:14px; }
.container { background-color:#EEE; padding:5px 15px 15px 15px; border:1px solid #CCC; margin-bottom:25px; width:100%; text-align:left }
.box { background-color:#FFF; border:1px solid #CCC; width:40px; margin:0px 4px; }
.button { margin-left:10px; background-color:#333; border:1px solid #CCC; width:25px; color:#FFF; font-weight:bold; }
.answer { padding-left:10px }
.answer b { text-decoration:underline }
.how { color:#555; margin-left:15px; font-size:13px; background-color:#FFF; padding:2px 4px }
.how b { color:#D00; font-weight:bold; text-decoration:none }
<div style="width:1000px; background-color:#FFF; padding:10px 20px; text-align:center; -moz-border-radius:10px">
<center>
<div style="font-size:30px; font-weight:bold; padding-bottom:20px; padding-top:8px">
Average Damage Calculator
</div>
<div class=container>
<h3>Calculate Target Average</h3>
<table class=thisTable>
<tr>
<td>Type in your target average damage</td>
<td><input type='number' id='a'/></td>
</tr>
<tr>
<td>Type the amount of battles you want to achieve it by</td>
<td><input type='number' id='b'/></td>
<tr>
<td>Type in your current number of battles</td>
<td><input type='number' id='c'/></td>
<tr>
<td>Type in your current average damage</td>
<td><input type='number' id='d'/></td>
</tr>
<tr>
<td>
<button id="calculate-btn">calculate</button>
</td>
</tr>
<tr>
<td>
<span id="answer-cell"></span>
</td>
</tr>
</table>
</div>
</div>
To round the answer you can use a number of methods, see below for some examples.
var a = 24.5123678;
console.log(`Round up to nearest int: ${Math.ceil(a)}`);
console.log(`Round down to nearest int: ${Math.floor(a)}`);
console.log(`Round to the nearest int: ${Math.round(a)}`);
console.log(`Round up to a number of decimals: ${a.toFixed(4)}`);

You can add a new td to your table, and then use the innerHTML to add the result of your calculation to the new td (with id="result") .
function calculate() {
var A = document.getElementById("a").value;
var B = document.getElementById("b").value;
var C = document.getElementById("c").value;
var D = document.getElementById("d").value;
var ans = ((A * B) - (C * D)) / (B - C);
//Here you assign your result to the new td
var Result = document.getElementById("result").innerHTML = "Result: " + ans;
}
* {
font-family: arial;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 40px;
background-color: #05537b;
}
.thisTable td {
line-height: 36px;
font-size: 14px;
}
.container {
background-color: #EEE;
padding: 5px 15px 15px 15px;
border: 1px solid #CCC;
margin-bottom: 25px;
width: 100%;
text-align: left
}
.box {
background-color: #FFF;
border: 1px solid #CCC;
width: 40px;
margin: 0px 4px;
}
.button {
margin-left: 10px;
background-color: #333;
border: 1px solid #CCC;
width: 25px;
color: #FFF;
font-weight: bold;
}
.answer {
padding-left: 10px
}
.answer b {
text-decoration: underline
}
.how {
color: #555;
margin-left: 15px;
font-size: 13px;
background-color: #FFF;
padding: 2px 4px
}
.how b {
color: #D00;
font-weight: bold;
text-decoration: none
}
<div style="width:1000px; background-color:#FFF; padding:10px 20px; text-align:center; -moz-border-radius:10px">
<div style="font-size:30px; font-weight:bold; padding-bottom:20px; padding-top:8px">Average Damage Calculator</div>
<div class=container>
<h3>Calculate Target Average</h3>
<table class=thisTable>
<tr>
<td>Type in your target average damage <input type='number' id='a' /> </td> <td id="result">here</td>
</tr>
<tr>
<td>Type the amount of battles you want to achieve it by <input type='number' id='b' /></td>
<tr>
<td>Type in your current number of battles <input type='number' id='c' /></td>
<tr>
<td>Type in your current average damage <input type='number' id='d' /></td>
</tr>
<tr>
<td>
<button onClick='calculate()'>calculate</button>
</td>
</tr>
</table>
</div>
</div>

Images not showing up on PDF created from HTML

I want to create PDF dynamically. That means I am taking files from Google Drive and then putting them in a HTML code and trying to create PDF out of it.
Everything is working fine , except images are not showing up.
What I am doing right now is :
Create HtmlOutput from HTML string.
Getting blob of that HTML.
Then that blob getAs PDF
Then finally saving that PDF in drive.
I thought maybe it need some time to render images so I have added sleep.
Alternative suggestions/solutions/code is also welcomed.
Here is the code I am using :
function htmlToPDF() {
var file1="0BweO_SXcQGqgcEV3Mk9QYVRMczQ";
var file2="0BweO_SXcQGqgVU93ZU56WkRkN3c";
var file3="0BweO_SXcQGqgMkIxTlhKajk5MFk";
var html = "<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'> <html xmlns='http://www.w3.org/1999/xhtml'> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8' /> <title>High Return Real Estate</title> <style> #charset 'utf-8'; /* CSS Document */ body,html{ font-family: 'Lato', sans-serif; background:#dfe7ea; margin-top: 0; margin-bottom:0; } .main_wrapper { width: 930px; margin: 0 auto; background: #fff; padding: 0 23px 0 23px; box-shadow: 1px 1px 8px -1px #bbbbbb; } .top_header { background: #dfe9e9; display: inline-block; width: 100%; margin-bottom: 6px; } .left_top { display: inline-block; width: 70%; padding: 26px 0 26px 50px; float: left; } p.contact_person.right_person { border-right: 0; padding-left: 25px; display: inline-block; } p.contact_person { width: 214px; display: inline-block; text-align: left; border-right: 1px solid #ccd4d3; } .left_top p span { font-size: 13px; color: #000; display: inline-block; width: 100%; margin-top: 2px; } .left_top p { font-size: 20px; font-weight: bold; color: #ea9a5a; margin: 0; } .right_top img { border-top: 7px solid #496bb3; border-bottom: 7px solid #496bb3; padding: 16px 5px 13px 4px; } .right_top { display: inline-block; position: absolute; background: #fff; } .galleryimage_main img { width: 100%; display: inline-block; } .property_address { } .property_address p { font-size: 15px; text-transform: uppercase; color: #fff; margin-bottom: 0; margin-top: 4px; } .common_box_style { padding: 20px; background: #496bb3; text-transform: uppercase; } .common_box_style h2 { margin-top: 2px; color: #54bb73; font-size: 20px; } .property_information { margin-left: 6px; } .property_information ul li p { font-size: 15px; color: #fff; text-transform: capitalize; margin-bottom: 3px; margin-top: 0; } .property_information ul li { list-style: none; margin-bottom: 5px; } .property_information ul li span { font-size: 15px; color: #fff; text-transform: capitalize; margin-bottom: 3px; margin-top: 0; width: 100px; display: inline-block; text-align: left; } .property_information ul { padding-left: 0; width: auto; display: inline-block; float: left; margin-right: 15px; margin-top: 0; margin-bottom: 4px; } .property_information ul li span.value_field { font-size: 13px; } ul.grpleft li span { width: 136px; } p.cash_prize { text-align: center; font-size: 18px; font-weight: bold; color: #fff; display: inline-block; width: 100%; margin: 0; } p.cash_prize span { padding-left: 10px; } .margintop{ margin-top: 6px; } .left_col { width: 34%; float: left; } .right_col { display: inline-block; width: 66%; } .gallery_small_images { display: inline-block; width: 99%; margin-left: 6px; margin-top: 6px; height: 232px; overflow: hidden; } .gallery_small_images img{ width:100%; } .gallery_small_image2 { width: 50%; float: left; } .gallery_small_image3 { width: 49%; display: inline-block; float: left; margin-left: 6px; } table.expense_info tr td.exp_info_disc { font-size: 14px; color: #fff; text-transform: capitalize; text-align: left; } tr.total_exp td { padding-top: 13px; padding-bottom: 30px; } .cashflow h2 { margin-bottom: 7px; } .roi input[type='text'] { font-size: 23px; text-align: center; font-weight: bold; height: 33px; margin-bottom: 5px; } .roi h2 { margin-top: 24px; font-size: 22px; font-weight: 800; } tr.total_exp { font-weight: bold; margin-top: 4px; /* display: table; */ width: 100%; } table.expense_info th { font-size: 12px; font-weight: bold; color: #fff; text-transform: capitalize; } td { font-size: 13px; color: #fff; text-align: center; vertical-align: middle; } .expense_info.common_box_style.margintop { padding: 20px 13px; } table.cashflow { text-align: center; margin: 0 auto; color: #fff; text-transform: capitalize; } table.cashflow tr th { font-size: 19px; font-weight: normal; } table.cashflow tr td { font-size: 17px; font-weight: bold; } .roi { display: inline-block; background: #2bb673; width: 99%; text-align: center; color: #000; padding: 10px 0px 20px 0; margin-left: 6px; margin-top: 6px; } .discliamer_sec { background: #dfe9e9; display: inline-block; text-align: center; font-size: 9px; width: 100%; padding: 10px 0; line-height: 18px; margin-top: 6px; } .discliamer_sec h2 { color: #768293; } .footer_cright { background: #496bb3; text-align: center; font-size: 8px; color: #fff; padding: 1px 0; font-weight: 400; margin-top: 7px; display: inline-block; width: 100%; } #media print { .common_box_style, .roi, .discliamer_sec, .footer_cright, .top_header { background: !important; -webkit-print-color-adjust: exact; } } </style> <link href='https://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet'> </head> <body> <div class='main_wrapper'> <div class='top_header'> <div class='left_top'><p class='contact_person'>Xyz xyz<span>xyz#xyz.com</span></p><p class='contact_person right_person'>Xyz xyz<span>xyz#xyz.com</span></p></div> <div class='right_top'>";
html +="<img src='images/logo.png' /></div> </div> <div class='galleryimage_main'> <img src='https://drive.google.com/uc?export=view&id="+file1+"' alt='Gallery Image Here' height='350' width='885'/> </div> <div class='left_col'> <div class='property_address common_box_style margintop'> <h2>PROPERTY ADDRESS</h2> <p id='address_line_1' class='address_line_1'>4043 N RAVENSWOOD AVE,</p> <p id='address_line_2' class='address_line_2'>CSUITE 316, HICAGO,</p> </div> <div class='expense_info common_box_style margintop'> <h2>EXPENSE INFORMATION</h2> <table id='expense_information' class='expense_info' cellpadding='3' cellspacing='1'> <tr> <th></th> <th>%of Rent</th> <th>Monthly</th> <th>Yearly</th> </tr> <tr> <td class='exp_info_disc'>Estimated Taxes:</td> <td>-</td> <td>345</td> <td>777</td> </tr> <td class='exp_info_disc'>Estimated Insurance:</td> <td>-</td> <td>200</td> <td>133</td> </tr> <tr> <td class='exp_info_disc'>Management Fee:</td> <td>4</td> <td>344</td> <td>5200</td> </tr> <tr> <td class='exp_info_disc'>Vacancy Adjustment:</td> <td>2</td> <td>555</td> <td>50</td> </tr> <tr> <td class='exp_info_disc'>Repairs & Maintenance: </td> <td>10</td> <td>500</td> <td>50</td> </tr> <tr> </tr> <tr> </tr> <tr> </tr> <tr is='total_exp' class='total_exp'> <td class='exp_info_disc'>TOTAL EXPENSES:</td> <td></td> <td>343</td> <td>342</td> </tr> <tr> </tr><tr> </tr><tr> </tr> </table> </div> <div class='cashflow common_box_style margintop'> <h2>CASH FLOW ESTIMATE</h2> <table id='cashflow' class='cashflow' cellpadding='3' cellspacing='5'> <tr> <th>Per Month</th> <th>Per Year</th> </tr> <tr> <td>123</td> <td>4533</td> </tr> </table> </div> </div> <div class='right_col'> <div id='property_information' class='property_information common_box_style margintop'> <h2>PROPERTY Information</h2> <ul> <li><span>List Price:</span><span class='value_field'>100</span></p></li> <li><span>Rehab Costs:</span><span class='value_field'>100</span></p></li> <li><span>Structure:</span><span class='value_field'>Single Family</span></li> <li><span>Current Rent:</span><span class='value_field'>29</span></li> </ul> <ul class='grpleft'> <li><span>Bedrooms:</span><span class='value_field'>100</span></li> <li><span>Bathrooms:</span><span class='value_field'>100</span></p></li> <li><span>Square Footage:</span><span class='value_field'>100</span></p></li> <li><span> Current Status:</span><span class='value_field'>Rented and Performing </span></li> </ul> <p class='cash_prize'>CASH PRICE<span>300</span></p> </div> <div class='gallery_small_images'> <div class='gallery_small_image2'> <img src='https://drive.google.com/uc?export=view&id="+file2+"' /> </div> <div class='gallery_small_image3'> <img src='https://drive.google.com/uc?export=view&id="+file3+"' /> </div></div> <div class='roi' id='cash_on_cash'> <h2>CASH-ON-CASH ROI</h2> <input type='text' value='1200' id='cash_roi_input'></input> </div> </div> <div class='discliamer_sec'> <h2>Information deemed reliabale but not guranteed. Images not to scale. Buyer responsible for <br>due diligence for all information provided and should conduct their own research.</h2> </div> <div class='footer_cright'> <h2>Copyright © High Return Real Estate LLC - 2017</h2> </div> </div> </body> </html>";
var blob = HtmlService.createHtmlOutput(html);
//Utilities.newBlob(html, "text/html", "text.html");
Utilities.sleep(30000);
blob = blob.getBlob();
var pdf = blob.getAs("application/pdf");
Utilities.sleep(30000);
DriveApp.createFile(pdf).setName("text.pdf");
}

You can download the image file using URLfetchApp and convert it into a base64 data string and create a page with that. The remaining procedure is same as previous
function htmlToPDF() {
var file = []
file[0]="0BweO_SXcQGqgcEV3Mk9QYVRMczQ"
file[1]="0BweO_SXcQGqgVU93ZU56WkRkN3c"
file[2]="0BweO_SXcQGqgMkIxTlhKajk5MFk"
var url = "https://drive.google.com/uc?export=view&id="
var img = UrlFetchApp.fetch(url+file[0])
file[0] = img.getBlob().getContentType()+';base64,'+ Utilities.base64Encode(img.getBlob().getBytes())
var img = UrlFetchApp.fetch(url+file[1])
file[1] = img.getBlob().getContentType()+';base64,'+ Utilities.base64Encode(img.getBlob().getBytes())
var img = UrlFetchApp.fetch(url+file[2])
file[2] = img.getBlob().getContentType()+';base64,'+ Utilities.base64Encode(img.getBlob().getBytes())
var html = "<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'> <html xmlns='http://www.w3.org/1999/xhtml'> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8' /> <title>High Return Real Estate</title> <style> #charset 'utf-8'; /* CSS Document */ body,html{ font-family: 'Lato', sans-serif; background:#dfe7ea; margin-top: 0; margin-bottom:0; } .main_wrapper { width: 930px; margin: 0 auto; background: #fff; padding: 0 23px 0 23px; box-shadow: 1px 1px 8px -1px #bbbbbb; } .top_header { background: #dfe9e9; display: inline-block; width: 100%; margin-bottom: 6px; } .left_top { display: inline-block; width: 70%; padding: 26px 0 26px 50px; float: left; } p.contact_person.right_person { border-right: 0; padding-left: 25px; display: inline-block; } p.contact_person { width: 214px; display: inline-block; text-align: left; border-right: 1px solid #ccd4d3; } .left_top p span { font-size: 13px; color: #000; display: inline-block; width: 100%; margin-top: 2px; } .left_top p { font-size: 20px; font-weight: bold; color: #ea9a5a; margin: 0; } .right_top img { border-top: 7px solid #496bb3; border-bottom: 7px solid #496bb3; padding: 16px 5px 13px 4px; } .right_top { display: inline-block; position: absolute; background: #fff; } .galleryimage_main img { width: 100%; display: inline-block; } .property_address { } .property_address p { font-size: 15px; text-transform: uppercase; color: #fff; margin-bottom: 0; margin-top: 4px; } .common_box_style { padding: 20px; background: #496bb3; text-transform: uppercase; } .common_box_style h2 { margin-top: 2px; color: #54bb73; font-size: 20px; } .property_information { margin-left: 6px; } .property_information ul li p { font-size: 15px; color: #fff; text-transform: capitalize; margin-bottom: 3px; margin-top: 0; } .property_information ul li { list-style: none; margin-bottom: 5px; } .property_information ul li span { font-size: 15px; color: #fff; text-transform: capitalize; margin-bottom: 3px; margin-top: 0; width: 100px; display: inline-block; text-align: left; } .property_information ul { padding-left: 0; width: auto; display: inline-block; float: left; margin-right: 15px; margin-top: 0; margin-bottom: 4px; } .property_information ul li span.value_field { font-size: 13px; } ul.grpleft li span { width: 136px; } p.cash_prize { text-align: center; font-size: 18px; font-weight: bold; color: #fff; display: inline-block; width: 100%; margin: 0; } p.cash_prize span { padding-left: 10px; } .margintop{ margin-top: 6px; } .left_col { width: 34%; float: left; } .right_col { display: inline-block; width: 66%; } .gallery_small_images { display: inline-block; width: 99%; margin-left: 6px; margin-top: 6px; height: 232px; overflow: hidden; } .gallery_small_images img{ width:100%; } .gallery_small_image2 { width: 50%; float: left; } .gallery_small_image3 { width: 49%; display: inline-block; float: left; margin-left: 6px; } table.expense_info tr td.exp_info_disc { font-size: 14px; color: #fff; text-transform: capitalize; text-align: left; } tr.total_exp td { padding-top: 13px; padding-bottom: 30px; } .cashflow h2 { margin-bottom: 7px; } .roi input[type='text'] { font-size: 23px; text-align: center; font-weight: bold; height: 33px; margin-bottom: 5px; } .roi h2 { margin-top: 24px; font-size: 22px; font-weight: 800; } tr.total_exp { font-weight: bold; margin-top: 4px; /* display: table; */ width: 100%; } table.expense_info th { font-size: 12px; font-weight: bold; color: #fff; text-transform: capitalize; } td { font-size: 13px; color: #fff; text-align: center; vertical-align: middle; } .expense_info.common_box_style.margintop { padding: 20px 13px; } table.cashflow { text-align: center; margin: 0 auto; color: #fff; text-transform: capitalize; } table.cashflow tr th { font-size: 19px; font-weight: normal; } table.cashflow tr td { font-size: 17px; font-weight: bold; } .roi { display: inline-block; background: #2bb673; width: 99%; text-align: center; color: #000; padding: 10px 0px 20px 0; margin-left: 6px; margin-top: 6px; } .discliamer_sec { background: #dfe9e9; display: inline-block; text-align: center; font-size: 9px; width: 100%; padding: 10px 0; line-height: 18px; margin-top: 6px; } .discliamer_sec h2 { color: #768293; } .footer_cright { background: #496bb3; text-align: center; font-size: 8px; color: #fff; padding: 1px 0; font-weight: 400; margin-top: 7px; display: inline-block; width: 100%; } #media print { .common_box_style, .roi, .discliamer_sec, .footer_cright, .top_header { background: !important; -webkit-print-color-adjust: exact; } } </style> <link href='https://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet'> </head> <body> <div class='main_wrapper'> <div class='top_header'> <div class='left_top'><p class='contact_person'>Xyz xyz<span>xyz#xyz.com</span></p><p class='contact_person right_person'>Xyz xyz<span>xyz#xyz.com</span></p></div> <div class='right_top'>";
html +="<img src='images/logo.png' /></div> </div> <div class='galleryimage_main'> <img src='data:"+file[0]+"' alt='Gallery Image Here' height='350' width='885'/> </div> <div class='left_col'> <div class='property_address common_box_style margintop'> <h2>PROPERTY ADDRESS</h2> <p id='address_line_1' class='address_line_1'>4043 N RAVENSWOOD AVE,</p> <p id='address_line_2' class='address_line_2'>CSUITE 316, HICAGO,</p> </div> <div class='expense_info common_box_style margintop'> <h2>EXPENSE INFORMATION</h2> <table id='expense_information' class='expense_info' cellpadding='3' cellspacing='1'> <tr> <th></th> <th>%of Rent</th> <th>Monthly</th> <th>Yearly</th> </tr> <tr> <td class='exp_info_disc'>Estimated Taxes:</td> <td>-</td> <td>345</td> <td>777</td> </tr> <td class='exp_info_disc'>Estimated Insurance:</td> <td>-</td> <td>200</td> <td>133</td> </tr> <tr> <td class='exp_info_disc'>Management Fee:</td> <td>4</td> <td>344</td> <td>5200</td> </tr> <tr> <td class='exp_info_disc'>Vacancy Adjustment:</td> <td>2</td> <td>555</td> <td>50</td> </tr> <tr> <td class='exp_info_disc'>Repairs & Maintenance: </td> <td>10</td> <td>500</td> <td>50</td> </tr> <tr> </tr> <tr> </tr> <tr> </tr> <tr is='total_exp' class='total_exp'> <td class='exp_info_disc'>TOTAL EXPENSES:</td> <td></td> <td>343</td> <td>342</td> </tr> <tr> </tr><tr> </tr><tr> </tr> </table> </div> <div class='cashflow common_box_style margintop'> <h2>CASH FLOW ESTIMATE</h2> <table id='cashflow' class='cashflow' cellpadding='3' cellspacing='5'> <tr> <th>Per Month</th> <th>Per Year</th> </tr> <tr> <td>123</td> <td>4533</td> </tr> </table> </div> </div> <div class='right_col'> <div id='property_information' class='property_information common_box_style margintop'> <h2>PROPERTY Information</h2> <ul> <li><span>List Price:</span><span class='value_field'>100</span></p></li> <li><span>Rehab Costs:</span><span class='value_field'>100</span></p></li> <li><span>Structure:</span><span class='value_field'>Single Family</span></li> <li><span>Current Rent:</span><span class='value_field'>29</span></li> </ul> <ul class='grpleft'> <li><span>Bedrooms:</span><span class='value_field'>100</span></li> <li><span>Bathrooms:</span><span class='value_field'>100</span></p></li> <li><span>Square Footage:</span><span class='value_field'>100</span></p></li> <li><span> Current Status:</span><span class='value_field'>Rented and Performing </span></li> </ul> <p class='cash_prize'>CASH PRICE<span>300</span></p> </div> <div class='gallery_small_images'> <div class='gallery_small_image2'> <img src='data:"+file[1]+"' /> </div> <div class='gallery_small_image3'> <img src='data:"+file[2]+"' /> </div></div> <div class='roi' id='cash_on_cash'> <h2>CASH-ON-CASH ROI</h2> <input type='text' value='1200' id='cash_roi_input'></input> </div> </div> <div class='discliamer_sec'> <h2>Information deemed reliabale but not guranteed. Images not to scale. Buyer responsible for <br>due diligence for all information provided and should conduct their own research.</h2> </div> <div class='footer_cright'> <h2>Copyright © High Return Real Estate LLC - 2017</h2> </div> </div> </body> </html>";
var blob = HtmlService.createHtmlOutput(html);
//Utilities.newBlob(html, "text/html", "text.html");
blob = blob.getBlob();
var pdf = blob.getAs("application/pdf");
DriveApp.createFile(pdf).setName("text.pdf");
}

/**
* This function retrieve the html body.
* Using regex searches all the images src attribute and create array of image URLs
* Iterate over imageURL & retrieve image blob from URLFetchApp and convert it into base64
* Then replaces the imageURL with base64 with proper formatting
* Then convert the htmlText to PDF and save it in folder
* #param {string} messageID
* #param {string} folderID
* #param {string} fileURL
*/
function convertMailBodyToPDF(messageID, folderID) {
const mail = GmailApp.getMessageById(messageID);
let htmlText = mail.getBody();
const images = getAllImageTags(htmlText);
images.forEach(image => {
const res = UrlFetchApp.fetch(image);
const imgbase64 = "data:" + res.getBlob().getContentType() + ';base64,' + Utilities.base64Encode(res.getBlob().getBytes());
htmlText = replaceAll(htmlText, image, imgbase64);
});
const blob = htmlToPDF(htmlText);
const file = DriveApp.getFolderById(folderID).createFile(blob).setName("testimage.pdf");
console.log(file.getUrl());
return file.getUrl();
}
/**
* This converts html to pdf blob
* #param {string} text
* #param {Blob} blob
*/
function htmlToPDF(text) {
const html = HtmlService.createHtmlOutput(text);
const blob = html.getBlob();
return blob.getAs("application/pdf");
}
/**
* Retrieve all image src
* #param {string} str
* #return {Array} imageURL
*/
function getAllImageTags(str) {
let words = [];
str.replace(/<img[^>]+src="([^">]+)"/g, function ($0, $1) { words.push($1) });
return words;
}
const escapeRegExp = (string) => string.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
const replaceAll = (str, find, replace) => str.replace(new RegExp(escapeRegExp(find), 'g'), replace);

You saved me with this:
> const images = getAllImageTags(htmlText); images.forEach(image => {
> const res = UrlFetchApp.fetch(image);
> const imgbase64 = "data:" + res.getBlob().getContentType() + ';base64,' + Utilities.base64Encode(res.getBlob().getBytes());
> htmlText = replaceAll(htmlText, image, imgbase64); });
I just edited it:
htmlText = htmlText.replace(image, imgbase64);
I needed to Compile a Google Doc Template that I have in DRIVE which is a letterhead with a Header and a Footer which are images and as body there are Placeholders, ex. {{name}} {{surname}}; finally upload to DRIVE as a PDF.
So the steps were:
from DOC to HTML
from HTML to BLOB
from BLOB to PDF
Everything worked correctly, but in the conversion to PDF I was missing the images... which had to be replaced by the same images but converted to Base64 ... and your procedure works great!
Thanks!!!!!!

RAL to RGB/HEX via javascript

I'm a beginner when it comes to javascript...I got a project which requires the following:
Conversion from RAL-Color-Codes to RGB/HEX (javascript).
I overthought that and came across some ideas:
1.) Make a complex list which inherits all RAL-Codes (around 213+)
2.) to be DRY - get RAL-to-RGB/HEX-Information from: http://www.ralcolor.com/
Well - as I said: I'm a beginner in javascript...
It would be very nice if you could give me some hints to start the coding, as I'm a media-designer, not a programmer :(
Best regards,
daft

Here's a short example of parsing the table itself. This is my standard template blank.html file with the addition of 4 rows of the table and some code in mInit.
A few things to consider, in no particular order:
It seems that every 2nd table row is empty
The rgb values use the - as a separator, rather than ,
It seems unlikely that you'd want the hex code and the rgb code. If you give the(some?) browser a # code, it converts it internally to an rgb() code. (Chrome 32.0.1700.102 m) If this is suitable, just grab the hex-code, since it doesn't need to be altered with a RegEx like the rgb value does.
you can have a look around http://w3schools.com for documentation of the various functions/attributes I've used.
Output: (excerpt)
There are 4 rows in the table
RAL 7046: rgb: 130,137,143 - hex: #82898F
RAL 7047: rgb: 208,208,208 - hex: #D0D0D0
/////////////////////////////////////////////////////////////
//// U n u s e d i n t h i s s a m p l e
/////////////////////////////////////////////////////////////
function newEl(tag) {
return document.createElement(tag);
}
function newTxt(txt) {
return document.createTextNode(txt);
}
function toggleClass(element, newStr) {
var index = element.className.indexOf(newStr);
if (index == -1)
element.className += ' ' + newStr;
else {
if (index != 0)
newStr = ' ' + newStr;
element.className = element.className.replace(newStr, '');
}
}
function forEachNode(nodeList, func) {
var i, n = nodeList.length;
for (i = 0; i < n; i++) {
func(nodeList[i], i, nodeList);
}
}
/////////////////////////////////////////////////////////////
//// R e q u i r e d b y t h i s s a m p l e
/////////////////////////////////////////////////////////////
function byId(e) {
return document.getElementById(e);
}
window.addEventListener('load', mInit, false);
function mInit() {
var tbl = byId('colTable');
var rows = tbl.rows
var output = '';
var i, n, curRowNum, curRowOfCells;
output = "There are " + rows.length + " rows in the table" + "<br>";
for (i = 0; i < rows.length; i++) {
curRowOfCells = rows[i].cells;
if (rows[i].cells[0].childNodes.length != 0) {
var curRalCode, curRgb, curHex;
curRalCode = rows[i].cells[0].querySelectorAll('p span')[0].innerHTML;
curRgb = rows[i].cells[1].childNodes[0].innerHTML;
// change 130-137-143 into 130,137,143
curRgb = curRgb.replace(/-/g, ',');
curHex = rows[i].cells[2].childNodes[0].innerHTML;
output += curRalCode + ": " + "rgb: " + curRgb + " - hex: " + curHex + "<br>";
}
}
byId('output').innerHTML = output;
}
<div id='output'></div>
<table id='colTable'>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td style="HEIGHT: 50px; PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(130,137,143)">
<p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">RAL
7046</span></p>
</td>
<td style="BACKGROUND-COLOR: rgb(130,137,143)" align="center"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">130-137-143</span></td>
<td style="BACKGROUND-COLOR: rgb(130,137,143)" align="center"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">#82898F</span></td>
<td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(130,137,143)">
<p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Telegrau 2</span></p>
</td>
<td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(130,137,143)">
<p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Telegrey 2</span></p>
</td>
<td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(130,137,143)">
<p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Telegris 2</span></p>
</td>
<td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(130,137,143)">
<p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Gris tele 2</span></p>
</td>
<td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(130,137,143)">
<p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Tele
grigio 2</span></p>
</td>
<td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(130,137,143)">
<p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Telegrijs 2</span></p>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td style="HEIGHT: 50px; PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(208,208,208)">
<p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">RAL
7047</span></p>
</td>
<td style="BACKGROUND-COLOR: rgb(208,208,208)" align="center"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">208-208-208</span></td>
<td style="BACKGROUND-COLOR: rgb(208,208,208)" align="center"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">#D0D0D0</span></td>
<td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(208,208,208)">
<p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Telegrau 4</span></p>
</td>
<td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(208,208,208)">
<p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Telegrey 4</span></p>
</td>
<td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(208,208,208)">
<p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Telegris 4</span></p>
</td>
<td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(208,208,208)">
<p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Gris
tele 4</span></p>
</td>
<td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(208,208,208)">
<p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Tele
grigio 4</span></p>
</td>
<td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(208,208,208)">
<p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Telegrijs 4</span></p>
</td>
</tr>
</table>