We Keep Coding

How to validate data into paragraph's text using javascript?

I want to check if time and day is same when I click to add these paragraphs into the array, If time and day is same then also prevent adding items into an array. Can Anyone help me please.Thanks
window.addEventListener("load", function() {
var test = [];
[...document.querySelectorAll(".container p")].forEach(function(para) {
para.addEventListener("click", function(e) {
var text = e.currentTarget.textContent;
if (test.indexOf(text) === -1)
{
test.push(text);
}
console.log(test)
})
})
})
<div class="container">
<p>
<b>Group:N</b>Code:1234<br/>
<b>Session Type:</b>CS<br/>
<b>Location:</b>Main Hall<br/>
<b>Time:</b>11:00<br/>
<b>Day:</b>Tuesday<br/>
<b>Duration:</b>1hour<br/>
</p>
</div>
<div class="container">
<p>
<b>Group:M</b>Code:98743<br/>
<b>Session Type:</b>NP<br/>
<b>Location:</b>Main Hall2<br/>
<b>Time:</b>11:00<br/>
<b>Day:</b>Tuesday<br/>
<b>Duration:</b>1hour<br/>
</p>
</div>

Issue with disappearing images on click event (javascript)

I am supposed to build a store for a a javascript assignment. The store has three items and a counter which tallies the total of the items. Each item is updated through a click event which changes the value based on a data attribute defined in the html. It then saves this to cookies and allows us to use what was stored when we get to a checkout page. The cookies store and the totals update, but unfortunately, each time the click event occurs, the image disappears. I have been scouring the code and I cannot see why this is happening. Can anyone help?
$(document).ready(function() {
$("#jeans-line").text(Cookies.get("jeans") || 0)
$("#jeanJacket-line").text(Cookies.get("jeanJacket") || 0)
$("#belt-line").text(Cookies.get("belt") || 0)
$("#total").text(Cookies.get("total") || 0)
//The DOM will be changed to the key value of each cookie or 0
$('.item').click(function() {
itemTotal = parseInt($(this).text())
oneMore = itemTotal + ($(this).data('cost'))
$(this).text(oneMore)
Cookies.set($(this).data('name'), oneMore)
setTotal()
});
// //updating the total cost of the pseudo-items in shopping
function setTotal() {
var jeans = parseInt(Cookies.get("jeans"))
var jeanJacket = parseInt(Cookies.get("jeanJacket"))
var belt = parseInt(Cookies.get("belt"))
Cookies.set("total", (jeans + jeanJacket + belt) || 0)
$("#total").text(Cookies.get("total") || 0)
};
//Enter data and close the modal
var modal = $("#modal-box")
var email_input;
$(".email-submit").click(function(e) {
e.preventDefault();
email_input = $("#email-val").val()
console.log(email_input)
var checkEmail = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (checkEmail.test(email_input)) {
alert("This is a good email!")
Cookies.set("email", email_input)
modal.css("display", "none")
} else {
alert("This is not a valid email address!")
}
});
//closes the model with close click event
$(".close").click(function() {
modal.css("display", "none");
});
}) //closes document.ready
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-4">
<div class="item" data-cost="200" data-name="jeans">
<img id="jeansIMG" src="images/jeans.jpg">
<h2 class="item" id="jeans-line"></h2>
</div>
</div>
<div class="col-md-4">
<div class="item" data-cost="300" data-name="jeanJacket">
<img id="jeanJacketIMG" src="images/jean_jacket.jpg">
<h2 class="item" id="jeanJacket-line"></h2>
</div>
</div>
<div class="col-md-4">
<div class="item" data-cost="50" data-name="belt">
<img id="beltIMG" src="images/belt.jpg">
<h2 class="item" id="belt-line"></h2>
</div>
</div>
</div>
<!-- closes the bootstrap row -->
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
<img class="shoppingCart" src="images/shopping_cart.jpg">
<h2 class="totalTitle">The total for these pseudo-products is:</h2>
<h2 id="total"></h2>
</div>
<div class="col-md-4">
</div>
</div>

The reason why images are getting remove is because of this code:
$('.item').click(function () {
itemTotal = parseInt($(this).text())
oneMore = itemTotal + ($(this).data('cost'))
$(this).text(oneMore) // <-- this overrides everything inside div.item
Cookies.set($(this).data('name'), oneMore)
setTotal()
});
Seeing your overall code, I'd suggest to change inner item class to something else (eg. item-total) so it won't be conflicting with the outer item class. After that adjust the javascript code:
$('.item').click(function() {
itemTotal = parseInt($(this).text())
oneMore = itemTotal + ($(this).data('cost'))
$('.item-total', this).text(oneMore) // <!-- change text in item-total
Cookies.set($(this).data('name'), oneMore)
setTotal()
});
You may also want to modify the setTotal to add default value || 0 so that it will calculate the total properly even if there is one or more items left unclicked:
function setTotal() {
var jeans = parseInt(Cookies.get("jeans") || 0)
var jeanJacket = parseInt(Cookies.get("jeanJacket") || 0)
var belt = parseInt(Cookies.get("belt") || 0)
Cookies.set("total", (jeans + jeanJacket + belt) || 0)
$("#total").text(Cookies.get("total") || 0)
};
You can check the simplified demo in https://jsfiddle.net/nm5dL9h1/

How to divide result given in html() jquery?

I'm trying to create a function where I click a button and I get content from a <div>. After, I need to divide the content. I mean, if this div has 10 children, I need to save 5 children in my var code1 and the other 5 in var code2. My problem is I'm not able to use html() function. My code looks like:
$(".pluscontrol").click(function(){
var id = $(this).attr("id");
var items=$(this).closest("table").parent().next().children('#'+id).children().length;
var middle = items / 2;
var code1="";
$(this).closest("table").parent().next().children('#'+id).html(
function(index,currentcontent){
if (index < middle )
code1 = code1 + currentcontent;
});
if ( $(".modal-body .row .sdiv").attr("id") == 1 )
$(".modal-body .row #1.sdiv").html(code1);
if ( $(".modal-body .row .sdiv").attr("id") == 2 )
$(".modal-body .row #2.sdiv").html("...");
});
As you can see, at first, I get the children lenght but I get all items.
I've checked this reference but it not helps too much
the var items is the number of items

Giving an argument to .html() makes it change the HTML of the selected elements. If you want to get the HTML, just call .html() with no argument.
To get the HTML of all the elements in a collection, use .map() to iterate, then combine them with .join().
var allChildren = $(".parent").children();
var middle = Math.floor(allChildren.length/2);
var code1 = allChildren.slice(0, middle).map(function(index, element) {
return element.innerHTML + " " + index;
}).get().join(' ');
var code2 = allChildren.slice(middle).map(function(index, element) {
return element.innerHTML + " " + (index + middle);
}).get().join(' ');
$("#out1").html(code1);
$("#out2").html(code2);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="parent">
<div class="child">Test1</div>
<div class="child">Test2</div>
<div class="child">Test3</div>
<div class="child">Test4</div>
<div class="child">Test5</div>
<div class="child">Test6</div>
<div class="child">Test7</div>
<div class="child">Test8</div>
<div class="child">Test9</div>
<div class="child">Test10</div>
</div>
First group:
<div id="out1"></div>
Second group:
<div id="out2"></div>

You can use querySelectorAll which gives u a collection of child element. It also has a length function which you can call. If you want you can chain a foreach method to it. I have broken it down for clarity.
var children = document.querySelectorAll('.parent > div');
var midPoint = Math.round(children.length / 2);
var firstHalf = Array.prototype.slice.call(children,0,midPoint);
var secondHalf = Array.prototype.slice.call(children,midPoint);
firstHalf.forEach(function(elm){
console.log(elm.innerHTML);
});
<div class="parent">
<div class="child"><p>Test1</p></div>
<div class="child"><p>Test1</p></div>
<div class="child"><p>Test1</p></div>
<div class="child"><p>Test1</p></div>
<div class="child"><p>Test1</p></div>
<div class="child"><p>Test1</p></div>
<div class="child"><p>Test1</p></div>
<div class="child"><p>Test1</p></div>
<div class="child"><p>Test1</p></div>
</div>

jQuery sorting fails

I have the following html structur (endless):
<div class="wrapper">
<div class="content"> Its block 3
<div class="number">3</div>
</div>
</div>
<div class="wrapper">
<div class="content"> Its block 2
<div class="number">2</div>
</div>
</div>
I want to sort it by clicking a button like this:
<div class="wrapper">
<div class="content"> Its block 2 <--- new order
<div class="number">2</div> <--- new order
</div>
</div>
<div class="wrapper">
<div class="content"> Its block 3 <--- new order
<div class="number">3</div> <--- new order
</div>
</div>
... but with my script it doesn´t work (because of the same div class name, I think?). So, how can I sort this and toggle the sort by highest number and lowest number? Can anybody help me?
function sortHigh(a, b) {
var date1 = $(a).find(".content .number").text()
var date2 = $(b).find(".content .number").text();
return $(a).find(".content .number").text() > $(b).find(".content .number").text();
};
function sortLow(a, b) {
var date1 = $(a).find(".content .number").text()
var date2 = $(b).find(".content .number").text();
return $(a).find(".content .number").text() < $(b).find(".content .number").text();
};
//how to toggle?
$(function () {
$('.sort').click(function () {
$('.content').sort(sortHigh).appendTo('.wrapper');
}, function () {
$('.content').sort(sortLow).appendTo('.wrapper');
});
});
Thats my bad try: fiddle

try to change your code with this:-
var toggle="high";
//how to toggle?
$(function(){
$('.sort').click(function () {
if (toggle == "high") {
toggle = "low";
$('.list').html($('.list .wrapper').sort(sortLow));
} else {
toggle = "high"
$('.list').html($('.list .wrapper').sort(sortHigh));
}
});
});
Demo

Using jQuery, you can add the sort functionality as such:
jQuery.fn.sortDomElements = (function() {
return function(comparator) {
return Array.prototype.sort.call(this, comparator).each(function(i) {
this.parentNode.appendChild(this);
});
};
})();
var srtdesc = true;
$(function() {
$(".sort").click(function() {
srtdesc = !srtdesc;
$(".list").children().sortDomElements(function(a, b) {
if (srtdesc) {
return Number($(a).find('.number').text()) - Number($(b).find('.number').text());
} else {
return Number($(b).find('.number').text()) - Number($(a).find('.number').text());
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="sort">Sort-Button</button>
<div class="list">
<div class="wrapper">
<div class="content">Its block 3
<div class="number">3</div>
</div>
</div>
<div class="wrapper">
<div class="content">Its block 1
<div class="number">1</div>
</div>
</div>
<div class="wrapper">
<div class="content">Its block 2
<div class="number">2</div>
</div>
</div>
</div>

You have two issues with your code.
The first is that your sorts are sorting strings. return "2" > "3" for example.
The other issue is that the click function you're using isn't toggling correctly. I'm guessing you're familiar with the .hover() syntax which is why you've done it that way.
As you can see, I'm forcing sortHigh and sortLow to return Numbers. I've also done a sorting low/high check and toggle within the click function.
function sortHigh(a, b) {
var date1 = Number($(a).find(".number").text());
var date2 = Number($(b).find(".number").text());
return date1 > date2;
};
function sortLow(a, b) {
var date1 = Number($(a).find(".number").text());
var date2 = Number($(b).find(".number").text());
return date1 <= date2;
};
$(function(){
var sortHighCheck = null;
$('.sort').click(function(){
if (sortHighCheck === true) {
$('.wrapper').sort(sortLow).appendTo('.list')
sortHighCheck = false;
} else {
$('.wrapper').sort(sortHigh).appendTo('.list')
sortHighCheck = true;
}
});
});
Edit: Forgot to add the jsfiddle link

If you want to sort, you can add data-val attribute to each content div:
<div class="content" data-val="2"> Its block 2 <--- new order
and sort each wrapper div with this code:
jQuery("#sort").click( function() {
jQuery('.wrapper').sort(function (a, b) {
return jQuery(a).find('.content').data('val') - jQuery(b).find('.content').data('val');
}).each(function (_, container) {
jQuery(container).parent().append(container);
});
});

JavaScript reselect class personally in ListView

I am creating ListView using my template:
HTML:
<div id="ItemTemplate" data-win-control="WinJS.Binding.Template">
<div class="ItemTemplate">
<div class="back"></div>
<div data-win-bind="innerText:Info.shortName" class="shortName"></div>
<div data-win-bind="innerText:value Converters.BeginValue" class="value"></div>
<div data-win-bind="innerText:value Converters.EndValue" class="valueEnd"></div>
<div data-win-bind="innerText:Info.longName"></div>
<img data-win-bind="src:Info.flag" class="flag" />
<div data-win-bind="innerText:change Converters.BeginChange" class="change"></div>
<div data-win-bind="innerText:change Converters.EndValue" class="changeEnd"></div>
<div data-win-bind="innerText:changePercent Converters.BeginChangePercent" class="changePercent"></div>
<div data-win-bind="innerText:changePercent Converters.EndValue" class="changePercentEnd"></div>
</div>
</div>
The issue is when I meet the very long name I need to adjust font-size.
So I do (for each element in list):
JavaScript:
template = document.getElementById('ItemTemplate');
// Adjust font - size
var name = item.data.Info.longName;
// Split by words
var parts = name.split(' ');
// Count words
var count = parts.filter(function(value) {
return value !== undefined;
}).length;
var longNameDiv = $(template).children("div").children("div").eq(4);
if (count > 2) {
// Display very long names correctly
$(longNameDiv).removeClass();
$(longNameDiv).addClass("veryLongName");
}
var rootDiv = document.createElement('div');
template.winControl.render(item.data, rootDiv);
return rootDiv;
CSS:
.veryLongName {
font-size: 10pt;
}
But it doesn't effect selectivly. Moreover seems like it is check conditions for the first time and then just apply the same setting for remaining items. But it needs to change font-size to smaller only in case if the name is too long. So what am I doing wrong? Thanks.

Try by using following code instead, but u must include jquery for it.
jsfiddle : http://jsfiddle.net/vH6G8/

You can do this using jquery's filter
$(".ItemTemplate > div").filter(function(){
return ($(this).text().length > 5);
}).addClass('more_than5');
$(".ItemTemplate > div").filter(function(){
return ($(this).text().length > 10);
}).removeClass('more_than5').addClass('more_than10');
DEMO