Develop Reference

What am I doing wrong here? The count is being stored and transferred to the other group of buttons

I have been struggling with this, please can you help? Here is the code. I want the group buttons to work independently from each other. F.example, if I press the Home buttons, the count should not transfer to the Guest button. It should begin from zero when clicked, but it counts what has been stored in the variable prior to it being clicked.
const homeScreen = document.getElementById("home-screen");
const guestScreen = document.getElementById("guest-screen");
let count = 0;
homeScreen.textContent = 0;
guestScreen.textContent = 0;
const plusOne = () => {
count += 1;
guestScreen.textContent = count;
}
const plusTwo = () => {
count += 2;
guestScreen.textContent = count;
}
const plusThree = () => {
count += 3;
let result = guestScreen.textContent = count;
if (result.length !== 0) {
return result;
}
}
const reset = () => {
guestScreen.textContent = 0;
}
const homeOne = () => {
count += 1;
homeScreen.textContent = count;
console.log("Clicked Home");
}
<div class="container">
<div class="d-flex justify-content-between bd-highlight mb-2">
<div id="left">
<h3 class="home">HOME</h3>
<span id="home-screen" class="float-start rounded"></span>
<div>
<button onclick="homeOne()" class="btn btn-info">+1</button>
<button onclick="homeTwo()" class="btn btn-info">+1</button>
<button onclick="homeThree()" class="btn btn-info">+1</button>
</div>
</div>
<div><Button onclick="reset()" class="btn reset">Reset</Button> </div>
<div id="left">
<h3 class="text">GUEST</h3>
<span id="guest-screen" class="float-end rounded"></span>
<div>
<button onclick="plusOne()" class="btn ">+1</button>
<button onclick="plusTwo()" class="btn ">+1</button>
<button onclick="plusThree()" class="btn ">+1</button>
</div>
</div>
</div>
<div class="row">
<div class="row">
<div class="row">
<div class="col-sm-4">
</div>
<div class="row">
<div class="col-sm-5">
</div>
</div>
</div>
</div>
</div>
</div>

Then use two different variable: homeCount and guestCount .
const homeScreen = document.getElementById("home-screen");
const guestScreen = document.getElementById("guest-screen");
let homeCount = 0;
let guestCount = 0;
homeScreen.textContent = 0;
guestScreen.textContent = 0;
const plusOne = () => {
guestCount += 1;
guestScreen.textContent = guestCount;
}
const plusTwo = () => {
guestCount += 2;
guestScreen.textContent = guestCount;
}
const plusThree = () => {
guestCount += 3;
guestScreen.textContent = guestCount;
// Unclear what was attempted here...
// let result = guestScreen.textContent = guestCount;
// if (result.length !== 0) {
// return result;
// }
}
const reset = () => {
guestScreen.textContent = 0;
}
const homeOne = () => {
homeCount += 1;
homeScreen.textContent = homeCount;
}
const homeTwo = () => {
homeCount += 2;
homeScreen.textContent = homeCount;
}
const homeThree = () => {
homeCount += 3;
homeScreen.textContent = homeCount;
}
<div class="container">
<div class="d-flex justify-content-between bd-highlight mb-2">
<div id="left">
<h3 class="home">HOME</h3>
<span id="home-screen" class="float-start rounded"></span>
<div>
<button onclick="homeOne()" class="btn btn-info">+1</button>
<button onclick="homeTwo()" class="btn btn-info">+2</button>
<button onclick="homeThree()" class="btn btn-info">+3</button>
</div>
</div>
<div><Button onclick="reset()" class="btn reset">Reset</Button> </div>
<div id="left">
<h3 class="text">GUEST</h3>
<span id="guest-screen" class="float-end rounded"></span>
<div>
<button onclick="plusOne()" class="btn ">+1</button>
<button onclick="plusTwo()" class="btn ">+2</button>
<button onclick="plusThree()" class="btn ">+3</button>
</div>
</div>
</div>
<div class="row">
<div class="row">
<div class="row">
<div class="col-sm-4">
</div>
<div class="row">
<div class="col-sm-5">
</div>
</div>
</div>
</div>
</div>
</div>

JavaScript dynamic card rendering in inner HTML

Spend much time but can't solve it. My CSS is OK. But why it is printing line by line in innerHTML? I am using an async function to get the data.
1st Function
const deploySnipCard = (getSnip) => {
for (x in getSnip) {
const tech = getSnip[x].tech;
const tags = getSnip[x].tags;
const tagsUrl = getSnip[x].tagsUrl;
const status = getSnip[x].status;
const imgSrc = getSnip[x].imgSrc;
const imgUrl = getSnip[x].imgUrl;
const caption = getSnip[x].caption;
appendCard(tech, tags, tagsUrl, status, imgSrc, imgUrl, caption);
}
};
2nd Function
const appendCard = (tech, tags, tagsUrl, status, imgSrc, imgUrl, caption) => {
const mainDiv = document.getElementById("root");
mainDiv.innerHTML += `
<div class="col-12 col-lg-4 col-md-6">
<div class="snip-card mt-5 p-2">
<div class="d-flex justify-content-between">
<div>
<span class="badge bg-primary mb-2">${tech}</span>
<a href="${tagsUrl}">
<span class="badge bg-danger mb-2 mx-1">${tags}</span></a>
</div>
<div>
<span class="badge bg-success mb-2">${status}</span>
</div>
</div>
<a href="${imgUrl}">
<div class="bg-dark">
<img class="card-img img-fluid" alt="click here" loading="lazy"
src="${imgSrc}">
</div>
</a>
<p class="snip-card-cap my-2">${caption}</p>
</div>
</div>`;
};
Output:
Expected Output:

How do I add new text after all functions are executed?

I want to have a line of text "oh no you are staving" to show up only after all items are removed. So in this case it means all the function are executed. Do I have to create a if statement?
Sorry I am really new to programming so I know my code is very wonky. Thanks for helping still!
function ateKroket() {
var delFood = document.getElementById("kroket");
delFood.remove();
}
function ateCake() {
var delFood = document.getElementById("cake");
delFood.remove();
}
function atePizza() {
var delFood = document.getElementById("pizza");
delFood.remove();
}
function ateSushi() {
var delFood = document.getElementById("sushi");
delFood.remove();
}
<div id="foodStorage">
<div id="kroket">
<img class="foodImg" src= "images/kroket.jpg">
<div><h5 id="foodName">Kroket</h5>
<button class="ateBtn" onclick="ateKroket()">Ate</button>
</div>
</div>
<div id="cake">
<img class="foodImg" src= "images/cake.jpg">
<div><h5 id="foodName">Cake</h5>
<button class="ateBtn" onclick="ateCake()">Ate</button>
</div>
</div>
<div id="pizza">
<img class="foodImg" src= "images/pizza.jpg">
<div><h5 id="foodName">Pizza</h5>
<button class="ateBtn" onclick="atePizza()">Ate</button>
</div>
</div>
<div id="sushi">
<img class="foodImg" src= "images/sushi.jpg">
<div><h5 id="foodName">Sushi</h5>
<button class="ateBtn" onclick="ateSushi()">Ate</button>
</div>
</div>

Add the following:
(To HTML):
<div id="foodEaten" style="display:none;">4</div>
(Then to your Javascript):
function ateKroket() {
var delFood = document.getElementById("kroket");
delFood.remove();
checkFood()
}
function ateCake() {
var delFood = document.getElementById("cake");
delFood.remove();
checkFood()
}
function atePizza() {
var delFood = document.getElementById("pizza");
delFood.remove();
checkFood()
}
function ateSushi() {
var delFood = document.getElementById("sushi");
delFood.remove();
checkFood()
}
function checkFood(){
var foodLeft = parseInt(document.getElementById('foodEaten').innerHTML);
foodLeft = foodLeft-1;
document.getElementById('foodEaten').innerHTML = foodLeft;
if(foodLeft<1){
console.log("starving");
//DO WHATEVER YOU WANT WHEN NO FOOD LEFT
}
}
What this will do is edit an invisible counter of food left each time a button is clicked, and then action something if that counter is a certain value

You should make use of classes to make your code more maintainable/reusable wihout repetition. Here is an example where I added a food class to each food div:
var foodStorage = document.getElementById('foodStorage'),
ateBtns = document.querySelectorAll('.ateBtn');
ateBtns.forEach(function(btn) {
btn.addEventListener('click', function() {
foodStorage.removeChild(this.closest('.food'));
if (foodStorage.children.length === 0) {
alert('Oh no, you are starving!');
}
});
});
<div id="foodStorage">
<div class="food">
<div><h5>Kroket</h5>
<button class="ateBtn">Ate</button>
</div>
</div>
<div class="food">
<div><h5 id="foodName">Cake</h5>
<button class="ateBtn">Ate</button>
</div>
</div>
<div class="food">
<div><h5>Pizza</h5>
<button class="ateBtn">Ate</button>
</div>
</div>
<div class="food">
<div><h5>Sushi</h5>
<button class="ateBtn">Ate</button>
</div>
</div>
</div>

You could declare a variable counter:
var food = 4;
function ateKroket() {
var delFood = document.getElementById("kroket");
delFood.remove();
checkfood()
}
function ateCake() {
var delFood = document.getElementById("cake");
delFood.remove();
checkfood()
}
function atePizza() {
var delFood = document.getElementById("pizza");
delFood.remove();
checkfood()
}
function ateSushi() {
var delFood = document.getElementById("sushi");
delFood.remove();
checkfood()
}
function checkfood() {
food--;
if (food === 0) {
document.getElementById("starving").style.display = "block";
}
}
#starving {
display: none;
}
<div id="foodStorage">
<div id="kroket">
<img class="foodImg" src="images/kroket.jpg">
<div>
<h5 id="foodName">Kroket</h5>
<button class="ateBtn" onclick="ateKroket()">Ate</button>
</div>
</div>
<div id="cake">
<img class="foodImg" src="images/cake.jpg">
<div>
<h5 id="foodName">Cake</h5>
<button class="ateBtn" onclick="ateCake()">Ate</button>
</div>
</div>
<div id="pizza">
<img class="foodImg" src="images/pizza.jpg">
<div>
<h5 id="foodName">Pizza</h5>
<button class="ateBtn" onclick="atePizza()">Ate</button>
</div>
</div>
<div id="sushi">
<img class="foodImg" src="images/sushi.jpg">
<div>
<h5 id="foodName">Sushi</h5>
<button class="ateBtn" onclick="ateSushi()">Ate</button>
</div>
</div>
<div id="starving">
oh no you are starving
</div>
</div>
Or something much more optimized:
document.getElementById("foodStorage").addEventListener("click", function(e) {
if (e.target.classList.contains("ateBtn")) {
e.target.parentElement.parentElement.remove();
if (this.childElementCount === 1) {
document.getElementById("starving").style.display = "block";
}
}
});
#starving {
display: none;
}
<div id="foodStorage">
<div id="kroket">
<img class="foodImg" src="images/kroket.jpg">
<div>
<h5 id="foodName">Kroket</h5>
<button class="ateBtn">Ate</button>
</div>
</div>
<div id="cake">
<img class="foodImg" src="images/cake.jpg">
<div>
<h5 id="foodName">Cake</h5>
<button class="ateBtn">Ate</button>
</div>
</div>
<div id="pizza">
<img class="foodImg" src="images/pizza.jpg">
<div>
<h5 id="foodName">Pizza</h5>
<button class="ateBtn">Ate</button>
</div>
</div>
<div id="sushi">
<img class="foodImg" src="images/sushi.jpg">
<div>
<h5 id="foodName">Sushi</h5>
<button class="ateBtn">Ate</button>
</div>
</div>
<div id="starving">
oh no you are starving
</div>
</div>

how to get the array from the javascript function to the html form as input field value by body onload() function?

I am having 6 bootstrap cards where the card details are id,content. Onclick of every card I am getting the ids of clicked card into the array from the local storage now I want to send that ids to the html form as value for input field
My html code is:
<body onload = "sample(),issample()">
<div class="form-group" >
<input type="text" name="goal" id="goal" value=" ">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" name="email" class="form-control" required>
</div>
<div class="form-group">
<label for="password2">Password</label>
<input type="password" name="password" class="form-control" required>
</div>
<input type="submit" value="Register" class="btn btn-secondary btn-block">
My JS code is :
var goal = []
function getGoal(id, content) {
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))
// To get all ids
var storedNames = JSON.parse(localStorage.getItem("goal"))
var goalIds = []
if (storedNames)
storedNames.forEach(element => {
element = JSON.parse(element)
goalIds.push(element.id)
});
console.log(goalIds)
}
function issample(){
$("#goal").val(goalIds);
}
I am getting error as goalIds not defined but the goalIds array is getting the ids but that ids are not getting in the form as a value how can I access the goalids in the other function
My cards code is
<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 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 in 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>
My styles code is:
var styles = []
var styleIds = []
function getStyle(id) {
if (styles.length > 0) {
var data = { id: id, image: $("#img_"+id).attr('src'),content: $("#cont_" + id).text() }
var x = JSON.stringify(data)
var index = styles.indexOf(x)
if (index == -1) {
styles.push(x)
}
else {
styles.splice(index, 1)
}
}
else {
var data = { id: id, image: $("#img_"+id).attr('src'),content: $("#cont_" + id).text() }
var x = JSON.stringify(data)
styles.push(x)
}
localStorage.setItem("styles", JSON.stringify(styles))
styleIds = styles.map(element => JSON.parse(element).id);
console.log(styleIds)
assample();
}
function assample() {
$("#style").val(styleIds);
console.log(styleIds)
}
function initStyles() {
var storedNames = JSON.parse(localStorage.getItem("styles") || '[]');
styleIds = storedNames.map(element => JSON.parse(element).id);
}

You need to make goalIds a global variable so it can be used in both functions.
Use storedNames.map() when assigning it, so it will be reset each time.
getGoal() doesn't use the content parameter, you can just remove that.
You should call issample() at the end of getGoal() to update the input field.
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);
}
To initialize goalIds when the page is loaded, add another function:
function initGoals() {
var storedNames = JSON.parse(localStorage.getItem("goal") || '[]');
goalIds = storedNames.map(element => JSON.parse(element).id);
}
And call initGoals() in your onload:
<body onload="sample(); initGoals(); issample();">

Javascript onclick does not work, multiple images to click in a row

I've tried to combine code I found (I don't know JS too well), and I click on the image in the DOM (mockup2.png), but nothing happens. It is supposed to go to mockup3.png, and then another click takes it to mockup4.png etc. For context, some of the other code is using Bootstrap and Razor. Any idea why the clicking does nothing?
#{
ViewBag.Title = "Marketplace";
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="~/Content/Login.css" />
<link rel="stylesheet" type="text/css" href="~/Content/Site.css" />
<script>
$(document).ready(
function () {
$('#studentnavicons a').hover(
function () {
$("#studentnaviconstext p").text($(this).attr("title"));
}
});
</script>
<script type="text/javascript">
var checkbox = document.getElementById('wireframe-student');
var img = <img src="~/Content/img/Student Market/market_mockup2.png" />;
var img1 = <img src="~/Content/img/Student Market/market_mockup3.png" />;
var img2 = <img src="~/Content/img/Student Market/market_mockup4.png" />;
var img3 = <img src="~/Content/img/Student Market/market_mockup5.png" />;
checkbox.onclick = function () {
if (checkbox.src == img) {
checkbox.src = img1;
} else if (checkbox.src == img1) {
checkbox.src = img2;
} else if (checkbox.src == img2) {
checkbox.src = img3;
} else {
checkbox.src = img3;
}
}
</script>
<div class="background">
<div class="row text-center">
<h1 class="student-header" align="center">Marketplace</h1>
<div id="studentnavicons">
<i class="fas fa-store-alt" style="color:#7a553b"></i>
<i class="fas fa-map-signs" style="color:#7a553b"></i>
<i class="fas fa-shopping-cart" style="color:#7a553b"></i>
<i class="fas fa-trophy" style="color:#7a553b"></i>
<i class="fas fa-user" style="color:#7a553b"></i>
<i class="fas fa-sign-out-alt" style="color:#7a553b"></i>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="boxed" align="center">
<font size="10">Points: 150</font>
</div>
<img id="wireframe-student" src="~/Content/img/Student Market/market_mockup2.png" width="1000" class="img-responsive" />
<div class="col-md-4">
<div style="float: right; margin-top:-70px;" align="center">
#Html.ActionLink("Sell", "MarketAfter", "Student", null, new { #class = "btn btn-primary" })
</div>
</div>
<div class="col-md-4">
<div style="float:right; margin-top:-70px;" align="center">
#Html.ActionLink("Buy", "MarketAfter", "Student", null, new { #class = "btn btn-primary" })
</div>
</div>
</div>
</div>
</div>
Trying the JQuery, but still nothing:
#{
ViewBag.Title = "Marketplace";
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="~/Content/Login.css" />
<link rel="stylesheet" type="text/css" href="~/Content/Site.css" />
<script>
$(document).ready(
function () {
$('#studentnavicons a').hover(
function () {
$("#studentnaviconstext p").text($(this).attr("title"));
}
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
$('#wireframe-student').on('click', function () {
var img_src = $(this).attr('alt');
if (img_src == 'image1') {
$(this).attr({ src: '/Content/img/Student Market/Market_demo3.png', alt: 'image2' });
} else if (img_src == 'image2') {
$(this).attr({ src: '/Content/img/Student Market/Market_demo4.png', alt: 'image3' });
} else if (img_src == 'image3') {
$(this).attr({ src: '/Content/img/Student Market/Market_demo5.png', alt: 'image4' });
} else {
/* carry on..... */
}
});
</script>
<div class="background">
<div class="row text-center">
<h1 class="student-header" align="center">Marketplace</h1>
<div id="studentnavicons">
<i class="fas fa-store-alt" style="color:#7a553b"></i>
<i class="fas fa-map-signs" style="color:#7a553b"></i>
<i class="fas fa-shopping-cart" style="color:#7a553b"></i>
<i class="fas fa-trophy" style="color:#7a553b"></i>
<i class="fas fa-user" style="color:#7a553b"></i>
<i class="fas fa-sign-out-alt" style="color:#7a553b"></i>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="boxed" align="center">
<font size="10">Points: 150</font>
</div>
<div class="row">
<div class="col-md-12">
<img id="wireframe-student" src="/Content/img/Student Market/Market_demo2.png" width="1000" class="img-responsive" alt="image1" />
</div>
</div>
<div class="col-md-4">
<div style="float: right; margin-top:-70px;" align="center">
#Html.ActionLink("Sell", "MarketAfter", "Student", null, new { #class = "btn btn-primary" })
</div>
</div>
<div class="col-md-4">
<div style="float:right; margin-top:-70px;" align="center">
#Html.ActionLink("Buy", "MarketAfter", "Student", null, new { #class = "btn btn-primary" })
</div>
</div>
</div>
</div>
</div>

try changing this
var checkbox = document.getElementById('wireframe-student');
var img = <img src="~/Content/img/Student Market/market_mockup2.png" />;
var img1 = <img src="~/Content/img/Student Market/market_mockup3.png" />;
var img2 = <img src="~/Content/img/Student Market/market_mockup4.png" />;
var img3 = <img src="~/Content/img/Student Market/market_mockup5.png" />;
to
var checkbox = document.getElementById('wireframe-student');
var img = "~/Content/img/Student Market/market_mockup2.png";
var img1 = "~/Content/img/Student Market/market_mockup3.png";
var img2 = "~/Content/img/Student Market/market_mockup4.png";
var img3 = "~/Content/img/Student Market/market_mockup5.png";
i changed the code in the second block you can refer it here
https://jsfiddle.net/3pan85xv/
just the after click part more readable then if else loop
<script>
$(function() {
// Handler for .ready() called.
$('#wireframe-student').on('click', function () {
var img_src = $(this).attr('alt');
switch(img_src){
default :
case 'image1': $(this).attr({ src: '/Content/img/Student Market/Market_demo3.png', alt: 'image2' });
break;
case 'image2': $(this).attr({ src: '/Content/img/Student Market/Market_demo4.png', alt: 'image3' });
break;
case 'image3': $(this).attr({ src: '/Content/img/Student Market/Market_demo5.png', alt: 'image4' });
break;
}
});
});
</script>
new fiddle with the changes i just did https://jsfiddle.net/shyamjoshi/qoa3jfq1/1/

I think you should try this jQuery code.
For easy understanding keep short image name in img's alt tag
to differentiate on each click and change image name on each click for next image.
I hope this will help..!
$('#wireframe-student').on('click', function(){
var img_src = $(this).attr('alt');
if(img_src == 'image1') {
$(this).attr({src:'http://via.placeholder.com/150x160',alt:'image2'});
} else if(img_src == 'image2') {
$(this).attr({src:'http://via.placeholder.com/150x170',alt:'image3'});
} else if(img_src == 'image3') {
$(this).attr({src:'http://via.placeholder.com/150x180',alt:'image4'});
} else {
/* carry onn..... */
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12">
<img id="wireframe-student" src="http://via.placeholder.com/150x150" width="" class="img-responsive" alt="image1" />
</div>
</div>