We Keep Coding

How to add tasks to-do-list using javascript

We are trying to dynamically add tasks using the below javascript on click event. I ran into this problem with my code. I want to push the created objects into an array and then display in a bootstrap card.
let button = document.getElementById('clickMe');
button.addEventListener('click', addCard({
'name': 'juice'
}
))
function addCard(card) {
const cardBody = `<div class="card" id="newCard">
<h5 class="card-header bg bg-warning">Task Card <span id="time" style = "padding-top:5px;"></span></h5>
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text"><strong>${card.name}<br>Assigned to<br>Due date<br>Status<br>Description</strong></p>
</div>
<div class="card-footer">
Edit
Delete
</div>
</div> `;
let cardList = document.getElementById('cardList')
cardList.innerHTML += cardBody;
}
<form>
<input type="text" id="nameF">
<span id="msgErr"></span>
<br>
<br>
<input type="text" id="nameL">
<span id="msgErr"></span>
<br>
<br>
<button type="button" id="clickMe">Validate</button>
<span id="currentTime"></span>
</form>
<div class="container card-columns" id="cardList">
<div class="card" id="newCard">
<h5 class="card-header bg bg-warning">Task Card <span id="time" style="padding-top:5px;"></span></h5>
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text"><strong>Name<br>Assigned to<br>Due date<br>Status<br>Description</strong></p>
</div>
<div class="card-footer">
Edit
Delete
</div>
</div>

I'd probably tweak your codes a bit become like this, to make it more dynamic and easier.
The problem in your snippet is, it failed to call addCard function when you click the <button>.
function addCard() {
const card = {
name: document.getElementById('nameF').value + ' ' + document.getElementById('nameL').value
};
const cardBody = `
<div class="card" id="newCard">
<h5 class="card-header bg bg-warning">Task Card <span id="time" style = "padding-top:5px;"></span></h5>
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text">
<strong>
${card.name}
<br>
Assigned to
<br>
Due date
<br>
Status
<br>
Description
</strong>
</p>
</div>
<div class="card-footer">
Edit
Delete
</div>
</div> `;
const cardList = document.getElementById('cardList');
cardList.innerHTML += cardBody;
}
<form>
<input type="text" id="nameF">
<span id="msgErr"></span>
<br>
<br>
<input type="text" id="nameL">
<span id="msgErr"></span>
<br>
<br>
<button type="button" id="clickMe" onclick="addCard()">Validate</button>
<span id="currentTime"></span>
</form>
<div class="container card-columns" id="cardList">
<div class="card" id="newCard">
<h5 class="card-header bg bg-warning">
Task Card <span id="time" style="padding-top:5px;"></span>
</h5>
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text">
<strong>
Name
<br>
Assigned to
<br>
Due date
<br>
Status
<br>
Description
</strong>
</p>
</div>
<div class="card-footer">
Edit
Delete
</div>
</div>
</div>

How to retain the border of selected bootstrap cards even on page refresh?

I am having 6 bootstrap cards now I wrote code for storing the every card details in the local storage and also on click the card will get a border now I want is on page refresh I should retain the border of the card
My html code is:
<div class="row">
<div class="col-4" onclick="getGoal(1)">
<div class="card4 mt-3" id="room_1" style="width: 12rem; height:9rem;">
<center>
<div class="card-body">
<p class="card-text mt-4" id="cont_1"><b>I am redecorating</b></p>
</div>
</center>
</div>
</div>
<div class="col-4" onclick="getGoal(2)">
<div class="card4 mt-3" id="room_2" style="width: 12rem; height:9rem;">
<center>
<div class="card-body">
<p class="card-text mt-4" id="cont_2"><b>I am Moving</b></p>
</div>
</center>
</div>
</div>
<div class="col-4" onclick="getGoal(3)">
<div class="card4 mt-3" id="room_3" style="width: 12rem; height:9rem;">
<center>
<div class="card-body">
<p class="card-text mt-4" id="cont_3"><b>I need help with a layout</b></p>
</div>
</center>
</div>
</div>
<div class="col-4" onclick="getGoal(4)">
<div class="card4 mt-3" id="room_4" style="width: 12rem; height:9rem;">
<center>
<div class="card-body">
<p class="card-text mt-4" id="cont_4"><b>I am looking for a species</b></p>
</div>
</center>
</div>
</div>
<div class="col-4" onclick="getGoal(5)">
<div class="card4 mt-3" id="room_5" style="width: 12rem; height:9rem;">
<center>
<div class="card-body">
<p class="card-text mt-4" id="cont_5"><b>I am moving with someone</b></p>
</div>
</center>
</div>
</div>
<div class="col-4" onclick="getGoal(6)">
<div class="card4 mt-3" id="room_6" style="width: 12rem; height:9rem;">
<center>
<div class="card-body">
<p class="card-text mt-4" id="cont_6"><b>Other</b></p>
</div>
</center>
</div>
</div>
</div>
<!--Loop ends-->
<a class="link mt-3"><u>Dont see your room?</u></a>
<div class="row mb-3">
<div class="col-4 mr-5">
« Home
</div>
<div class="col-4 ml-5">
Next »
</div>
</div>
My JS code:
$(document).ready(function(){
// goals
$("#room_1").click(function(){
$("#room_1").toggleClass("blue");
});
$("#room_2").click(function(){
$("#room_2").toggleClass("blue");
});
$("#room_3").click(function(){
$("#room_3").toggleClass("blue");
});
$("#room_4").click(function(){
$("#room_4").toggleClass("blue");
});
$("#room_5").click(function(){
$("#room_5").toggleClass("blue");
});
$("#room_6").click(function(){
$("#room_6").toggleClass("blue");
});
$("#room_7").click(function(){
$("#room_7").toggleClass("blue");
});
$("#room_8").click(function(){
$("#room_8").toggleClass("blue");
});
$("#room_9").click(function(){
$("#room_9").toggleClass("blue");
});
});
var goal = [];
var goalIds = [];
function getGoal(id) {
if (goal.length > 0) {
var data = {
id: id,
content: $("#cont_" + id).text()
}
var x = JSON.stringify(data)
var index = goal.indexOf(x)
if (index == -1) {
goal.push(x);
} else {
goal.splice(index, 1);
}
} else {
var data = {
id: id,
content: $("#cont_" + id).text()
}
var x = JSON.stringify(data);
goal.push(x);
}
localStorage.setItem("goal", JSON.stringify(goal));
goalIds = goal.map(element => JSON.parse(element).id);
console.log(goalIds);
issample();
}
function issample() {
$("#goal").val(goalIds);
console.log(goalIds);
}
function initGoals() {
var storedNames = JSON.parse(localStorage.getItem("goal") || '[]');
goalIds = storedNames.map(element => JSON.parse(element).id);
}
My codepen link is: https://codepen.io/lakshmi123__/pen/xxbzwNP

function initGoals() {
goal = JSON.parse(localStorage.getItem("goal") || '[]');
goalIds = goal.map(element => JSON.parse(element).id);
goalIds.forEach(function(i){$("#room_"+i).addClass('blue');});
}
initGoals();
but event then, you are filling your goalIds variable right with that function,but you are forgetting to fill the goal variable too ;)

My question is about getting a solution to calculate the total price of an order with javascript

I'm developping a web page were there is some products in their prices and the quantity of each one, what I'm trying to do, is to calculate the total price, but, with the same class name for every product
I've already tried the solution in the code bellow, but I'm not getting the right price
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div class="row">
<div class="col-md-4">
<img src="../img/produit_newyork_0.jpeg" class="img-fluid float-left mr-5" width="80" height="60"/>
</div>
<div class="col-md-4">
<p class="mb-auto">Lego Architecture</p>
<p class="font-weight-bold">New York City</p>
<p class="font-italic">Quantité : <span class="qte">1</span></p>
</div>
<div class="col-md-4">
<h4 class="text-right prix">49,99€</h4>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="btn btn-outline-danger btn-sm float-right">Supprimer <i class="fas fa-trash-alt"></i></button>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-md-4">
<img src="../img/produit_londres_0.jpeg" class="img-fluid float-left mr-5" width="80" height="60"/>
</div>
<div class="col-md-4">
<p class="mb-auto">Lego Architecture</p>
<p class="font-weight-bold">Londres City</p>
<p class="font-italic">Quantité : <span class="qte">3</span></p>
</div>
<div class="col-md-4">
<h4 class="text-right prix">49,99€</h4>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="btn btn-outline-danger btn-sm float-right">Supprimer <i class="fas fa-trash-alt"></i></button>
</div>
</div>
</li>
</ul>
<script type="text/javascript>
const qte = document.querySelectorAll('.qte');
const prix = document.querySelectorAll('.prix');
const prixPanier = document.querySelector('#prixPanier');
const TVA = document.querySelector('#TVA');
const Total = document.querySelector('#Total');
let prixTotal = 0;
for(let i=0; i < qte.length; i++){
prixTotal = prixTotal + (parseInt(qte[i].innerText)* parseFloat(prix[i].innerText));
}
prixPanier.innerText = prixTotal;
TVA.innerText = prixTotal * 0.15;
</script>
So what I'm looking for, is the right solution also for my last question, How can i add the total and the TVA so i can get the final or the total price ?

When you are working with numbers that contain symbols that are not detected or parsed with JavaScript internal functions, you should make sure to avoid those problems by simply removing the symbol before parsing anything.
This is how the code working looks like:
for(let i=0; i < qte.length; i++){
let price = parseFloat(prix[i].innerText.replace('€','').replace(',','.')),
quantity = parseInt(qte[i].innerText);
prixTotal += (quantity*price);
}
Also, it has kind of a better readability. I'll leave you a
Fiddle so you can check if it is giving your desired output:
https://jsfiddle.net/y0x84rwq/

You have some issues:
the price contain comma, need convert to dot before use.
let price = parseFloat(prix[i].innerHTML.replace(/,/g, '.')).toFixed(2);
This is worked code:
const qte = document.querySelectorAll('.qte');
const prix = document.querySelectorAll('.prix');
const prixPanier = document.querySelector('#prixPanier');
const TVA = document.querySelector('#TVA');
const Total = document.querySelector('#Total');
let prixTotal = 0.0;
for(let i=0; i < qte.length; i++){
let price = parseFloat(prix[i].innerText.replace(/,/g, '.')).toFixed(2);
//console.log(price)
prixTotal = prixTotal + (parseInt(qte[i].innerHTML)* price);
}
prixPanier.innerText = prixTotal;
TVA.innerText = prixTotal * 0.15;
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div class="row">
<div class="col-md-4">
<img src="../img/produit_newyork_0.jpeg" class="img-fluid float-left mr-5" width="80" height="60"/>
</div>
<div class="col-md-4">
<p class="mb-auto">Lego Architecture</p>
<p class="font-weight-bold">New York City</p>
<p class="font-italic">Quantité : <span class="qte">1</span></p>
</div>
<div class="col-md-4">
<h4 class="text-right prix">49,99€</h4>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="btn btn-outline-danger btn-sm float-right">Supprimer <i class="fas fa-trash-alt"></i></button>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-md-4">
<img src="../img/produit_londres_0.jpeg" class="img-fluid float-left mr-5" width="80" height="60"/>
</div>
<div class="col-md-4">
<p class="mb-auto">Lego Architecture</p>
<p class="font-weight-bold">Londres City</p>
<p class="font-italic">Quantité : <span class="qte">3</span></p>
</div>
<div class="col-md-4">
<h4 class="text-right prix">49,99€</h4>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="btn btn-outline-danger btn-sm float-right">Supprimer <i class="fas fa-trash-alt"></i></button>
</div>
</div>
</li>
</ul>
<div id="prixPanier"></div>
<div id="TVA"></div>

comment reply system with catching specific id value

hi guys I have a blog post page and comment and reply system. Everything works fine except one thing:
When I try to add a reply to a comment, I am always replying to the first comment. I think my fault is I can't reach the specific comment id when I click. Here is my html and ajax code:
HTML CODE
<div class="card" style=" margin-bottom:30px;">
<div class="card-header">
<a class="h3">#Model.Header</a>
<br />
<br />
<div class="row">
<div class="col-md-12 col-xs-12 col-xl-12">
<p style="font-size:small">
<b>Kategori: </b> #Model.Category.CategoryName ,<b>Makale Sayısı :</b> #Model.Category.Articles.Count()
<b>Yorum Sayısı :</b> #Model.Comments.Count() <br />
<b>Yayımlanma Tarihi: </b> #String.Format("{0: d MMMM yyyy}", Model.Date) ,<b>Etiketler:</b><i class="fa fa-tags"></i> #Model.Tags.Count()
</p>
<p style="font-size:small;">
<img class="rounded-circle img-fluid" style="width:100px;height:100px;" src="#Model.User.Photo" alt="#Model.User.FullName" />
Posted by:
#Model.User.UserName
</p>
</div>
</div>
<div class="row">
<div class="col-md-12 col-xs-12 col-xl-12">
<img id="articlephoto" style="width:100%; height:350px" class="rounded float-left" src="#Model.Photo" alt="Card image cap">
</div>
</div>
<div class="row" style="margin-top:20px">
<div class="col-md-12 col-xs-12 col-xl-12">
<p>#Html.Raw(Model.Paragraph)</p>
<p style="font-size:small">
<b>Etiketler:</b>
#foreach (var item in Model.Tags)
{
<span class="tag">#item.TagName,</span>
}
</p>
</div>
</div>
</div>
</div>
<h4>Comments</h4>
<hr />
#foreach (var item in Model.Comments.ToList())
{
<!-- Single Comment -->
<div class="media mb-4">
<img style="height:40px; width:40px;" class="d-flex mr-3 rounded-circle" src="#item.User.Photo" alt="#item.User.FullName">
<div class="media-body" style="width:400px;">
<h5 class="mt-0">#item.User.UserName</h5>
<p style="word-break:break-all">
#item.Paragraph
#if (Convert.ToInt32(Session["UserId"]) == item.UserId)
{
<a class="btn btn-danger" href="/Home/DeleteComment/#item.CommentId">
Delete
</a>
<a class="btn btn-warning replybutton" href="#replyform">
Reply
</a>
}
</p>
<p style="font-size:small"><b>Yorum Tarihi:</b>#String.Format("{0: d MMMM yyyy}", item.Date)</p>
<span id="astar" class=""> #item.CommentId</span>
#foreach (var reply in Model.ReplyComments.Where(x => x.CommentId == item.CommentId).ToList())
{
<div class="media mt-4">
<img style="height:40px; width:40px;" class="d-flex mr-3 rounded-circle" src="#item.User.Photo" alt="#item.User.FullName">
<div class="media-body">
<h5 class="mt-0">#reply.User.UserName</h5>
<p>#reply.Paragraph</p>
#if (Convert.ToInt32(Session["UserId"]) == item.UserId)
{
<a class="btn btn-danger" href="/Home/DeleteReply/#reply.ReplyCommentId">
Sil
</a>
}
</div>
</div>
}
</div>
</div>
<hr />
}
#if (Session["UserId"] != null)
{
<!-- Comments Form -->
<div id="commentform" class="card my-4">
<h5 class="card-header">Yorum Yap:</h5>
<div class="card-body">
<form>
<div class="form-group">
<textarea id="comment" typeof="text" class="form-control" rows="3"></textarea>
</div>
<button type="submit" id="send" class="btn btn-primary">Yorum Yap</button>
</form>
</div>
</div>
<div id="replyform" class="card my-4 d-none">
<h5 class="card-header">Cevap Yaz:</h5>
<div class="card-body">
<div class="form-group">
<textarea id="replytext" name="replytext" typeof="text" class="form-control" rows="3"></textarea>
</div>
<button type="submit" id="reply" name="reply" class="btn btn-primary">Cevap Yaz</button>
</div>
</div>
}
else
{
<div class="row" style="margin-bottom:30px;">
<div class="col-md-6">
<h3 class="alert- alert-heading">Yorum Yapabilmek İçin Üye Girişi Yapmalısınız.</h3>
</div>
</div>
}
AND my javascript ajax code
<script type="text/javascript">
$(document).ready(function () {
$("#reply").click(function (e) {
var r_comment = $("#replytext").val();
var r_commentid = parseInt($("#astar").html());
$.ajax({
url: '/Home/ReplyComment/',
data: { replycomment: r_comment, articleid:#Model.ArticleId, commentid: r_commentid },
type: 'POST',
dataType: 'json',
success: function (data) {
alert("Cevap gönderildi");
window.location.reload();
}
});
});
})
</script>
My problem is that I can't catch the specific comment id when I click the reply button. I am getting the comment id from <span id="astar" class=""> #item.CommentId</span>

"When I try to add a reply to a comment, I am always replying to the first comment. " - it's because all your comments have the same ID and jQuery selects the first matching element.
All comments need to have a unique ID. I don't know what language that loop is in but you need to increment the ID. So astar-1, astar-2, astar-3 etc...
Example;
$(document).ready(function(){
var valueBox = document.getElementById('value-box');
$('.reply').on('click', function(){
var comment = $(this).prev().attr('id');
valueBox.innerHTML += '<br />Reply to comment: ' + comment;
console.log(comment);
});
});
.comment::after {
display: table;
content: ' ';
clear: both;
}
span {
display: block;
float: left;
width: 45%;
}
.reply {
display: block;
float: right;
width: 45%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="comment">
<span id="comment-1">Yorum 1</span>
<div class="reply">Cevapla</div>
</div>
<div class="comment">
<span id="comment-2">Yorum 2</span>
<div class="reply">Cevapla</div>
</div>
<div class="comment">
<span id="comment-3">Yorum 3</span>
<div class="reply">Cevapla</div>
</div>
<div id="value-box">
</div>

On one button click event for three pages

I have one page website, with three forms. The first form has class active and the rest are hidden. All forms have buttons with same class .all-pages.
When I click on next button I want the first page to get class hidden, and second get active. When I'm on the second form click on the SAME button NEXT I want the second page to get class hidden, and the third page get active. Please HELP ME :)
And please just JavaScript.
I have 3 forms like this:
<div class="container-fluid"> <!-- first page container -->
<div class="row">
<div class="col-lg-5 col-lg-offset-3">
<form class="well margin-form-top form-color-bg page1">
<div class="row"> <!-- webpage name -->
<div class="col-lg-4 col-lg-offset-4">
<h2>Book a Room</h2>
</div>
</div>
<div class="row"> <!-- information about webpage -->
<div class="col-lg-7 col-lg-offset-2 h4">
<p>This information will let us know more about you.</p>
</div>
</div>
<div class="row"> <!-- navigation -->
<div class="col-lg-12 button-padding-zero">
<ul class="nav nav-pills nav-justified btn-group">
<button type="button" class="btn btn-danger btn-default btn-lg button-width navigation-font-size border-r grey-bg all-pages red active" data-page="0">
<b>ACCOUT</b>
</button>
<button type="button" class="btn btn-default btn-default btn-lg button-width navigation-font-size border-l-r grey-bg all-pages red" data-page="1">
<b>ROOM TYPE</b>
</button>
<button type="button" class="btn btn-default btn-default btn-lg button-width navigation-font-size border-l grey-bg all-pages red" data-page="2">
<b>EXTRA DETAILS</b>
</button>
</ul>
</div>
</div>
<br>
<div class="row"> <!-- let's start -->
<div class="col-lg-5 col-lg-offset-4 h4">
<p>Let's start with the basic details.</p>
</div>
</div>
<br>
<div class="row"> <!-- first row email and country -->
<div class="col-lg-5 col-lg-offset-0">
<div class="input-group">
<input type="email" class="input-sm btn input-width text-left" placeholder="Your Email">
</div>
</div>
<div class="col-lg-6 col-lg-offset-1 button-padding-zero">
<select class="form-control input-sm btn input-width">
<option value="" selected>Country</option>
<option>Serbia</option>
<option>Russia</option>
<option>Brazil</option>
</select>
</div>
</div>
<br>
<div class="row"> <!-- 2nd row password and budget -->
<div class="col-lg-5 col-lg-offset-0">
<div class="input-group">
<input type="password" class="input-sm btn input-width text-left" placeholder="Your Password">
</div>
</div>
<div class="col-lg-6 col-lg-offset-1 button-padding-zero">
<select class="form-control input-sm btn input-width">
<option value="" selected>Daily Budget</option>
<option>100$</option>
<option>200$</option>
<option>300$</option>
</select>
</div>
</div>
<br>
<br>
<br>
<div class="row">
<div class="col-lg-3 col-lg-offset-9">
<button type="button" id="next-button" class="btn btn-default btn-danger btn-lg button-next-width all-pages" data-page="0">NEXT</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
var page1 = document.querySelector('.page1');
var page2 = document.querySelector('.page2');
var page3 = document.querySelector('.page3');
var emptyArrey = [];
var nextButtons = document.querySelectorAll('.all-pages');
function nextFunction(event) {
// debugger;
var allButtons = document.querySelectorAll('.all-pages');
for (var i = 0; i < allButtons.length; i++) {
var oneButton = allButtons[i].dataset.page;
if (allButtons[i].dataset.page === '0') {
page1.classList.add('hidden');
page2.classList.remove('hidden');
return;
debugger;
} else {
page2.classList.add('hidden');
page3.classList.remove('hidden');
}
}
}
for (var nextButton of nextButtons){
nextButton.addEventListener('click', nextFunction);
}

You could use the button's attribute data-page to keep track of which form you're currently on, and then show the appropriate form.
// give your button the id "next-button"
var currentPage = document.getElementByID("next-button").getAttribute("data-page");
Once you know what form you're on, then you can hide the others as needed

If I understood your question, here is possible solution.
const nextButtons = document.querySelectorAll('.all-pages');
const pages = document.querySelectorAll('.page');
nextButtons.forEach(btn => {
btn.addEventListener('click', () => {
pages.forEach(page => {
page.hidden = true;
});
const pageActive = document.querySelector(`.page-${btn.dataset.page}`);
pageActive.hidden = false;
})
})
<div class="page page-1">
<button class="all-pages" data-page="2">NEXT 2</button>
</div>
<div class="page page-2" hidden=true>
<button class="all-pages" data-page="3">NEXT 3</button>
</div>
<div class="page page-3" hidden=true>
<button class="all-pages" data-page="1">NEXT 1</button>
</div>