I have 2 price range. Regular Price and Offer Price displayed on screen with the below HTML rendered.
I am trying to calculate the price difference using Javascript/jquery and insert a div with the discount price.
<div class="price-box">
<p class="old-price">
<span class="price-label">Regular Price:</span>
<span class="price" id="old-price-221">Rs17.00 </span>
</p>
<p class="special-price">
<span class="price-label">Special Price</span>
<span class="price" id="product-price-221">Rs14.45 </span>
</p>
<div>
<span>Discount Price:</span>
<span>XXXXXX</span>
</div>
</div>
I have this currency symbol also displayed along with the price. So, I am wondering how to calculate the difference between "Regular Price" and "Special Price".
Can some one please help me?
P.S. I searched the site and did not find the relevant answers.
There it is : http://jsfiddle.net/s7w98ngt/2/
jQuery part :
$('.price-box').each(function(){
var element = $(this),
oldPriceRaw = element.find('.old-price .price').text(),
specialPriceRaw = element.find('.special-price .price').text(),
oldPrice = parseFloat(oldPriceRaw.replace('Rs','')),
specialPrice = parseFloat(specialPriceRaw.replace('Rs','')),
diff = 'Rs'+(oldPrice - specialPrice).toFixed(2), // 2 numbers after the comma
diffElement = element.find('.diff-price');
diffElement.text(diff);
});
HTML a bit modified :
<div class="price-box">
<p class="old-price">
<span class="price-label">Regular Price:</span>
<span class="price" id="old-price-221">Rs17.00 </span>
</p>
<p class="special-price">
<span class="price-label">Special Price</span>
<span class="price" id="product-price-221">Rs14.45 </span>
</p>
<div>
<span>Discount Price:</span>
<span class="diff-price"></span>
</div>
</div>
The tricky thing was to get the current prices value as float numbers. Then, we just calcul the difference.
Related
In jQuery Terminal I want to add an API that will return indices of the selection.
Example HTML I have:
<div class="cmd" style="width: 100%; --cursor-line:1; top: 0px;">
<div class="cmd-wrapper" style="">
<span class="cmd-prompt" style="visibility: visible; margin-left: 0px;">
<span data-text="> ">
<span style="width: 2ch;">> </span>
</span>
</span>
<div role="presentation" aria-hidden="true" class="cmd-end-line">
<span data-text="H">
<span>H</span>
</span>
<span data-text="e">
<span>e</span>
</span>
<span data-text="l">
<span>l</span>
</span>
<span data-text="l">
<span>l</span>
</span>
<span data-text="o">
<span>o</span>
</span>
<span data-text=" ">
<span> </span>
</span>
<span data-text="W">
<span>W</span>
</span>
<span data-text="o">
<span>o</span>
</span>
<span data-text="r">
<span>r</span>
</span>
<span data-text="l">
<span>l</span>
</span>
<span data-text="d">
<span>d</span>
</span>
<span data-text=" ">
<span> </span>
</span>
</div>
<div class="cmd-cursor-line" role="presentation" aria-hidden="true">
<span>
<span data-text="x">
<span>x</span>
</span>
<span data-text="x">
<span>x</span>
</span>
<span data-text="x">
<span>x</span>
</span>
<span data-text="x">
<span>x</span>
</span>
<span data-text="x">
<span>x</span>
</span>
</span>
<span class="cmd-cursor" style="">
<span data-text="" class="end">
<span> <span></span></span>
</span>
</span>
<span></span>
</div>
</div>
<textarea autocapitalize="off" spellcheck="false" tabindex="1" class="cmd-clipboard" data-cmd-prompt="> " style=""></textarea>
</div>
This is copy-paste of the DOM after entering "Hello World\nxxxxx" and formatted and pretty printed using https://jsonformatter.org/html-pretty-print
My question is what should I do to get the selection indices?
For example, I have a command like this:
> He|lo wor|d
I should get [2, 8] and if the selection is outside of the range: example
>|>> Hello| world
where >>> is prompt I should get [0, 5] I don't care about the negative. I should also handle when the whole selection is outside
|>>>| Hello World
it should return [0, 0] or null.
How would to implement something like this? Note: that I only care about window.getSelection API it's 100% support, not need to be silly and support
IE8.
You want something like
var range = window.getSelection().getRangeAt(0);
var start = range.startOffset;
var end = range.endOffset;
Note that this code assumes that range.startContainer === range.endContainer (which it often does). If you want to get the text / the length of the text between the start and the end containers, you need to recursively traverse the DOM between them. There is also an issue where the length of the text in the DOM is not the same as the length of the text in HTML (browsers sometimes add spaces and other HTML elements)
You'd be right if you guessed that I've worked a bunch in Javascript with selections. IMO it's kind of a nightmare. Tim Down has written a very popular package called Rangy which I recommend it a lot. You should check it out and see if it meets the requirements of what you are doing.
I've solved the issue myself:
var selection = window.getSelection();
var start = $(selection.anchorNode);
var end = $(selection.focusNode);
var before = start.closest('.cmd [role="presentation"]').prevUntil('.cmd-prompt');
var count = 0;
if (before.length > 1) {
count = before.find('[data-text]').length;
}
var s = start.closest('.cmd [role="presentation"] [data-text]');
var e = end.closest('.cmd [role="presentation"] [data-text]');
if ((s.length || e.length)) {
start = count + s.index();
end = count + e.index() + 1;
console.log({start, end});
}
I have this
<div id="chart1" class="bar-chart secondary" data-total="42" animated>
<span class="bar-chart--inner" style="width:42%;"></span>
<span class="bar-chart--text">42% </span>
</div>
and I have one javascript variable var score that I need to assign to data-total="42"and <span class="bar-chart--text">42% </span>
My intention is to replace 42 with my javascript variable. I have tried this
document.getElementById("chart1").innerHTML =score that I have found from this forum but did not work. Please help.
<div id="chart1" class="bar-chart secondary" data-total="document.getElementById("chart1").innerHTML =score" animated>
<span class="bar-chart--inner" style="width:42%;"></span>
<span class="bar-chart--text">42% </span>
</div>
https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
get the element in a JS script
then set elem.dataset.total
document.getElementById("chart1").dataset.total = score
<body>
<div id="chart1" class="bar-chart secondary" data-total="42" animated>
<span class="bar-chart--inner" style="width:42%;"></span>
<span class="bar-chart--text">42% </span>
</div>
<script type="text/javascript">
var score = 20
document.getElementById("chart1").dataset.total = score
</script>
</body>
For setting the html of an element, you can use innerHTML, just need to select that element in another lookup.
document.querySelector(".bar-chart--text").innerHTML = score
I am doing an increment and decrement of values by 1 on three categories. when ever the user updates the individual counts, total count should also be updated.
<div class="container">
<div>TotalCount: <span class="total-count">1</span></div>
<br/>
<div class="adult">
<div>Adult: <span class="adult-count">1</span></div>
<span class="plus">+</span>
<span class="minus disabled">-</span>
</div>
<div class="child">
<div>Child: <span class="child-count">1</span></div>
<span class="plus">+</span>
<span class="minus disabled">-</span>
</div>
<div class="infant">
<div>Infant: <span class="infant-count">1</span></div>
<span class="plus">+</span>
<span class="minus disabled">-</span>
</div>
Maximum total count should be 9. I am able to write the basic logic
fiddle link - https://jsfiddle.net/wgk970uv/
but the code gets complicated for the below requirements,
1. Maximum adult count can be 9
2. Maximum child count should be ( Maximum total count - adult count )
3. Maximum infant count should be same as adult count
could you please help me on this.
All you need to do is remove disabled from all the 3 whenever decrementing any of the categories adult/child/infant -
else if(adultCount<maxPeople){
$('.infant .plus').removeClass('disabled');
$('.child .plus').removeClass('disabled');
$('.adult .plus').removeClass('disabled');
}
The fiddle here.
Your logic could still be refined further to have a short and crisp code.
I have this bit of HTML code.
<div class="container">
<div class="single-result">
<span class="flight-no">VL2100</span>
<span class="cabin">Economy</span>
<span class="price">35000</span>
</div>
<div class="single-result">
<span class="flight-no">VL2101</span>
<span class="cabin">Economy</span>
<span class="price">40000</span>
</div>
<div class="single-result">
<span class="flight-no">VL2100</span>
<span class="cabin">Economy</span>
<span class="price">22000</span>
</div>
<div class="single-result">
<span class="flight-no">VL2100</span>
<span class="cabin">Economy</span>
<span class="price">14500</span>
</div>
</div>
How do I sort it -- based on price -- using Javascript? Please, don't ask me for my JS code. My only thought was to use the bubble sort algorithm. But then, bubble sort works only on sorted arrays and my HTML string isn't sorted. Any suggestions, pointers and / or code will be appreciated.
Create an array and insert for each element 2 fields, the HTML element and the price, sort the array, re-insert the elements after sorting to conainer after make it empty:
var elements = document.querySelectorAll('.single-result');
var sortable = [];
for (i=0;i<elements.length;i++){
sortable.push([elements[i], elements[i].querySelector('.price').textContent]);
}
sortable.sort(function(a, b) {return a[1] - b[1]});
container = document.querySelector('.container');
container.innerHTML = "";
sortable.forEach(function(item) {
container.appendChild(item[0]);
});
I am using a food menu in my website.
In my food menu you can select what you want with your meat.
For example:
shawarma: pita:10$ Baguette:12$ Plate: 17$
steak: pita: 20 Baguette:none Plate:35$
the problem is when some of the menu items dont have one of the pita or Baguette or Plate, the script will print zero "0"
steak: pita: 20 Baguette:0 Plate:35$
I am trying to Find all the 0 number and replace with -.
the problem is that in some items the price come with 0 like 10, 20, 30, etc...
here i don't want to change the "0" to "-"
I tried to use this code: (but this code not makes me what i need)
Any suggestions?
jQuery(document).ready(function($) {
$("div").find(":contains('0')").each(function(){
$this = $(this);
$this.text("-");
});
});
the html looks:
<div id="wppizza-article-tiers-118" class="wppizza-article-tiers">
<span id="wppizza-118-4-0" class="wppizza-article-price ">
<span>0 $</span>
<div class="wppizza-article-price-lbl wppizza-no-cart">Toast</div>
</span>
<span id="wppizza-118-4-1" class="wppizza-article-price ">
<span>20 $</span>
<div class="wppizza-article-price-lbl wppizza-no-cart">Big Pita</div>
</span>
<span id="wppizza-118-4-2" class="wppizza-article-price ">
<span>33 $</span>
<div class="wppizza-article-price-lbl wppizza-no-cart">Baguette</div>
</span>
<span id="wppizza-118-4-3" class="wppizza-article-price ">
<span>35 $</span>
<div class="wppizza-article-price-lbl wppizza-no-cart">לאפה</div>
</span>
<span id="wppizza-118-4-4" class="wppizza-article-price ">
<span>49 $</span>
<div class="wppizza-article-price-lbl wppizza-no-cart">Plate</div>
</span>
</div>
A simple Regular Expression with .replace() will do that: /\b0\b/g
Working Code Snippet:
var myString = "steak: pita: 20 Baguette:0 Plate:35$";
myString = myString.replace("/\b0\b/g", "-");
alert(myString);
jsFiddle Demo
Readup: .replace() | MDN
EDIT:
Try this for your HTML code:
$('#wppizza-article-tiers-118 span span').each(function(){
var text = $(this).text();
text = text.replace(/\b0\b/g, "-");
$(this).text(text);
});
Regex Explained:
/\b0\b/g
Here,
/ is what your regex pattern is enclosed in.
\b means boundary.
0 is what you actually need to replace.
g means global. The replacement will be done globally.
Various Regex tutorials | Google
EDIT2: Here is the working code snippet for the HTML in your question.
$('.wppizza-article-price span').each(function(){
var text = $(this).text();
text = text.replace(/\b0\b/g, "-");
$(this).text(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wppizza-article-tiers-118" class="wppizza-article-tiers">
<span id="wppizza-118-4-0" class="wppizza-article-price ">
<span>0 $</span>
<div class="wppizza-article-price-lbl wppizza-no-cart">Toast</div>
</span>
<span id="wppizza-118-4-1" class="wppizza-article-price ">
<span>20 $</span>
<div class="wppizza-article-price-lbl wppizza-no-cart">Big Pita</div>
</span>
<span id="wppizza-118-4-2" class="wppizza-article-price ">
<span>33 $</span>
<div class="wppizza-article-price-lbl wppizza-no-cart">Baguette</div>
</span>
<span id="wppizza-118-4-3" class="wppizza-article-price ">
<span>35 $</span>
<div class="wppizza-article-price-lbl wppizza-no-cart">לאפה</div>
</span>
<span id="wppizza-118-4-4" class="wppizza-article-price ">
<span>49 $</span>
<div class="wppizza-article-price-lbl wppizza-no-cart">Plate</div>
</span>
</div>
jQuery(document).ready(function() {
$(".wppizza-article-price").each(function(){
var value = $(this).find('span').text();
if (value == '0 $') {
$(this).find('span').text('-');
}
});
});
it will work now DEMO