We Keep Coding

how to display the right movie informations in an overlay?

I'm looking for solutions to display the right movie information in my overlay.
I have a "popup window" that appears when i click on a movie and it is supposed to display movie's informations in it but when I click on a movie, no matter which one it is, it only displays the last movie informations, what Should I do to fix it ?
const movieIntegration =() => {
allMovies.map(movie=> {
movieGallery.innerHTML += `<div class="imgContainer">
<img src="${movie.img}" alt="${movie.name}">
<div class="titleContainer">
<div class="movieTitle"> ${movie.name} </div>
<div class="seemore"> See more </div>
</div>
</div>`
const seemore = document.querySelectorAll(".seemore")
seemore.forEach(elm => {
elm.addEventListener("click",() => {
pageContainer.innerHTML += `<div class="popupContainer">
<div class="popup">
${movie.name}
<div id="likeButton">
<img src="img/like.png">
</div>
<div id="editButton">
<img src="img/edit.png">
</div>
<a href="submit.html">
<div id="addingButton">
<img src="img/add.png">
</div>
</a>
</div>
</div>`
console.log(true)
}, true)
})
})
}

the problem is that you are getting all the .seemore element for each movie and you are editing the content of ALL elements for each movie, so the last movie will overwrite the content for all the previous.
A solution could be something like this:
const movieIntegration = () => {
allMovies.map((movie) => {
movieGallery.innerHTML += `<div class="imgContainer">
<img src="${movie.img}" alt="${movie.name}">
<div class="titleContainer">
<div class="movieTitle"> ${movie.name} </div>
<div class="seemore"> See more </div>
</div>
</div>`
})
const seemore = document.querySelectorAll('.seemore')
seemore.forEach((elm, i) => {
elm.addEventListener(
'click',
() => {
pageContainer.innerHTML += `<div class="popupContainer">
<div class="popup">
${allMovies[i].name}
<div id="likeButton">
<img src="img/like.png">
</div>
<div id="editButton">
<img src="img/edit.png">
</div>
<a href="submit.html">
<div id="addingButton">
<img src="img/add.png">
</div>
</a>
</div>
</div>`
},
true
)
})
}
In this way you are mapping the .seemore elements AFTER you finish the map of allMovies and, for each .seemore element you get the associated movie and write his name inside.

How to check if all the input values are equal to my data?

I have 32 items in my array, all of them have these properties: id, word, image. User has to guess what's in all the images and write their guess in inputs (so 32 inputs in total). I need to check if the input equals my arrays property "word" and then when clicked a button (type submit, all my pic's and inputs are in a form) display some text for example "Oops! Guess again" if wrong and "Yay! You got it correctly" if right. The text should appear below every input. I displayed all the pictures and inputs with a forEach, and i'm using bulma framework for this page:
const wordBox = info.forEach((words) => {
mainColumns.innerHTML += `
<div class="column is-one-quarter">
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src=${words.image} alt="Placeholder image">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-content">
<input class="input" id="text" type="text" placeholder="Įvesk žodį">
</div>
</div>
<div class="content">
Content
</div>
</div>
</div>
</div>`;
});
Any ideas?
This is how it should look like (the result should appear in content place)

Something like this
I use change instead of a button click
const info = [
{word:"flower",image:"flower.gif"},
{word:"boat",image:"boat.gif"}
];
const mainColumns = document.getElementById("mainColumns");
mainColumns.innerHTML = info.map(({image,word}) =>
`<div class="column is-one-quarter">
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src=${image} alt="Placeholder image">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-content">
<input class="input" data-word="${word}" type="text" placeholder="Įvesk žodį">
<span class="correct hide">Yay</span>
<span class="wrong hide">NOO</span>
</div>
</div>
<div class="content">
Content
</div>
</div>
</div>
</div>`).join("");
mainColumns.addEventListener("change",function(e) {
const correct = [...mainColumns.querySelectorAll("[data-word]")].map(input => {
if (input.value) {
const correct = input.value === input.dataset.word;
parent = input.closest("div");
parent.querySelector(".correct").classList.toggle("hide",!correct)
parent.querySelector(".wrong").classList.toggle("hide",correct);
return correct ? 1 : 0;
}
else return 0;
}).reduce((a,b)=>a+b);
document.getElementById("correct").innerText = correct;
})
#mainColumns { display:flex; }
.hide { display: none; }
<div id="mainColumns"></div>
Correct: <span id="correct"></span>

What you can do is to filter the word array with word from the input value. Then check if the length is equal zero, No match, if the length is greater than one, then there is a match.
const status = wordBox.filter(item => item.word === inputWord)

I'd move towards keeping the objects and the HTML separate, binding the HTML to the object and vice versa. This means including a couple more properties to your array elements.
let info = [{
image: 'flower.png',
word: 'flower',
content: '',
guess: ''
}];
function bindWords() {
info.forEach((words) => {
mainColumns.innerHTML = `
<div class="column is-one-quarter">
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src=${words.image} alt="Placeholder image">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-content">
<input class="input" data-word="${words.word}" type="text" placeholder="Įvesk žodį" value="${words.guess}">
</div>
</div>
<div class="content">
${words.content}
</div>
</div>
</div>
</div>`;
});
}
bindWords();
check.addEventListener('click', () => {
info = Array.from(document.querySelectorAll('.card')).map(el => ({
image: el.querySelector('img').src,
word: el.querySelector('.input').dataset.word,
guess: el.querySelector('.input').value,
content: el.querySelector('.input').value === el.querySelector('.input').dataset.word ?
'Correct' : 'Incorrect'
}));
bindWords();
});
<div id="mainColumns"></div>
<button id="check">Check Answers</button>

Showing an element with an if statement in nextJS

I'm trying to add a parameter to a nextJS components which only show if a condition is true.
Currently, I'm returning this:
return (
<div role="main" aria-label={this.props.title} className={Styles.main + " " + color}>
<h1>{this.props.title}</h1>
<h2>{this.props.sub}</h2>
<div className={Styles.buttons}>
<a className={Styles.button} href="#features">Features</a>
<a className={Styles.button} href="#commands">Commands</a>
<a className={Styles.button} href={this.props.inviteURL}>Invite</a>
{() => {
if (1==1) {
return (
<a className={Styles.button} href={this.props.sourceURL}>Source</a>
)
}
}}
</div>
</div>
);
Currently, it shows the top bit of the return and the buttons inside of that, but the one with the text Source isn't shown.
Why isn't it showing, and how do I fix it?

You are using a function that is never executed, so the component will never appear, it also expects an expression, so if you use simple if statements it won't work, as the following:
return (
<div role="main" aria-label={this.props.title} className={Styles.main + " " + color}>
<h1>{this.props.title}</h1>
<h2>{this.props.sub}</h2>
<div className={Styles.buttons}>
<a className={Styles.button} href="#features">Features</a>
<a className={Styles.button} href="#commands">Commands</a>
<a className={Styles.button} href={this.props.inviteURL}>Invite</a>
{if(1==1) {
return (
<a className={Styles.button} href={this.props.sourceURL}>Source</a>
)
}
}
</div>
</div>
);
I would suggest using ternary operators or && instead of an if which leaves you the following solution:
return (
<div role="main" aria-label={this.props.title} className={Styles.main + " " + color}>
<h1>{this.props.title}</h1>
<h2>{this.props.sub}</h2>
<div className={Styles.buttons}>
<a className={Styles.button} href="#features">Features</a>
<a className={Styles.button} href="#commands">Commands</a>
<a className={Styles.button} href={this.props.inviteURL}>Invite</a>
{1==1 && <a className={Styles.button} href={this.props.sourceURL}>Source</a>}
</div>
</div>
);

Add Attribute to an unshift item vuejs

I have two lists , user can drag items from list 1 to list 2 and there is a button with text input so user can add his own input to the list 2 which will be automatically updated in my MYSQL database using axios.
This is AddItem script
addItembh(){
var input = document.getElementById('itemFormbh');
if(input.value !== ''){
// this line makes a new article with input value but no attribute :(
this.tasksNotCompletedNew.unshift({
behv_skilldesc:input.value
});
axios.post('../joborder/addAttrib', {
behv_skilldesc: input.value,
type:'behvnew',
joborder_id: this.joborder_id ,
alljobs_id: this.alljobs_id
}).then((response) => {
console.log(response.data);
}).catch((error) => {
console.log(error);
});
input.value='';
}
},
To be clear on the question : I need to assign an attribute to my new article thats getting created so I can find the text of that attrib later on deleteItem method
UPDATE :
<template>
<div class="row">
<div class="col-md-4 col-md-offset-2">
<section class="list">
<header>Drag or Add Row Here</header>
<draggable class="drag-area" :list="tasksNotCompletedNew" :options="{animation:200, group:'status',handle:'disabled'}" :element="'article'" #add="onAdd($event, false)" #change="update">
<article class="card" v-for="(task, index) in tasksNotCompletedNew" :key="task.prof_id" :data-id="task.prof_id" #change="onChange">
<span >
{{ task.prof_skilldesc }}
</span>
<span v-if="task.prof_skilldesc !== 'Drag Here'">
<button class="pull-left" #click="deleteItem(task.prof_id) + spliceit(index)" ><i class="fa fa-times inline"></i></button>
</span>
</article>
<article class="card" v-if="tasksNotCompletedNew == ''">
<span>
Drag Here
</span>
</article>
</draggable>
<div>
<input id='itemForm' />
<button v-on:click='addItem' class="btn btn-theme btn-success" style='margin-top:5px;' >Add a row </button>
</div>
</section>
</div>
<div class="col-md-4">
<section class="list">
<header>List of Skills ( Hold left click )</header>
<draggable class="drag-area" :list="tasksCompletedNew" :options="{animation:200, group:'status'}" :element="'article'" #add="onAdd($event, true)" #change="update">
<article class="card"
v-for="(task, index) in visibleskills"
:key="task.prof_id" :data-id="task.prof_id"
>
{{ task.prof_skilldesc }}
<div v-if="index == 4" style="display:none" >{{index2 = onChange(index)}}</div>
</article>
<pagination
v-bind:tasksCompletedNew ="tasksCompletedNew"
v-on:page:update ="updatePage"
v-bind:currentPage ="currentPage"
v-bind:pageSize="pageSize">
</pagination>
</draggable>
</section>
</div>
</div>
</template>
So on Add a row our method will be called .
Thanks for any help

Is it possible to remove size from the end a responsive image path?

I want to remove the -500x500 part from the image so that I can show the actual image.
Here's the complete HTML if anybody wants to take a look:
<div id="speakers_list1" class="wpb_row vc_row mk-fullwidth-false attched-false vc_row-fluid js-master-row mk-in-viewport">
<div style="" class="vc_col-sm-12 wpb_column column_container _ height-full">
<div id="box-14" class="mk-employees a_margin-bottom-10 a_margin-top-10 four-column u6col u5col o0col o1col o2col o3col mk-employees-grayscale classic c_cs ">
<ul>
<li class="mk-employee-item a_colitem a_align-center a_display-inline-block a_float-left m_7">
<div class="item-holder">
<div class="team-thumbnail a_position-relative a_width-100-per a_height-100-per a_overflow-hidden rounded-true">
<a href="http://developer.designprowebsolutions.com/sufi-intensive/team/imam-abdoulaye-ndaw/">
<img alt="Imam Abdoulaye Ndaw" title="Imam Abdoulaye Ndaw" src="http://developer.designprowebsolutions.com/sufi-intensive/wp-content/uploads/2017/02/imam-abdoulahy-ndaw-500x500.jpg">
</a>
<div class="employee-hover-overlay a_m_fly-top-left a_opacity-100 "></div>
</div>
<div class="team-info-wrapper m_7" itemscope="itemscope" itemtype="https://schema.org/Person">
<a class="team-member-name" href="http://developer.designprowebsolutions.com/sufi-intensive/team/imam-abdoulaye-ndaw/">
<span class="team-member-name a_font-16 a_display-block a_font-weight-bold a_text-transform-up a_color-333">Imam Abdoulaye Ndaw</span>
</a>
<span class="team-member-position a_font-12 a_text-transform-up a_display-block a_color-777 a_letter-spacing-1">Imam & Ustadz</span>
<div class="team-member-desc a_margin-top-20 a_margin-bottom-10 a_display-block"></div>
</div>
</div>

A quick way(not beautiful) is to replace the src of the element
src is a attribute on the element, so you can get the value with $(obj).attr("src") or set the value with $(obj).attr("src","newValue")
Edit I created a function so you can do this multiple times with multiple objects
Either add a class to the img, you want to change or call it by an attribute.
Class: fixImage($('.removeRatio'), "-500x500") or
Attribute: fixImage($('[title="Imam Abdoulaye Ndaw"]'), "-500x500")
console.log("This was my SRC: " + $('.removeRatio').attr("src"))
function fixImage(obj, removestring)
{
obj.attr("src", obj.attr("src").replace(removestring, ""))
}
fixImage($('.removeRatio'), "-500x500")
console.log("This now IS my SRC: " + $('.removeRatio').attr("src"))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="speakers_list1" class="wpb_row vc_row mk-fullwidth-false attched-false vc_row-fluid js-master-row mk-in-viewport">
<div style="" class="vc_col-sm-12 wpb_column column_container _ height-full">
<div id="box-14" class="mk-employees a_margin-bottom-10 a_margin-top-10 four-column u6col u5col o0col o1col o2col o3col mk-employees-grayscale classic c_cs ">
<ul>
<li class="mk-employee-item a_colitem a_align-center a_display-inline-block a_float-left m_7">
<div class="item-holder">
<div class="team-thumbnail a_position-relative a_width-100-per a_height-100-per a_overflow-hidden rounded-true">
<a href="http://developer.designprowebsolutions.com/sufi-intensive/team/imam-abdoulaye-ndaw/">
<img class="removeRatio" alt="Imam Abdoulaye Ndaw" title="Imam Abdoulaye Ndaw" src="http://developer.designprowebsolutions.com/sufi-intensive/wp-content/uploads/2017/02/imam-abdoulahy-ndaw-500x500.jpg">
</a>
<div class="employee-hover-overlay a_m_fly-top-left a_opacity-100 "></div>
</div>
<div class="team-info-wrapper m_7" itemscope="itemscope" itemtype="https://schema.org/Person">
<a class="team-member-name" href="http://developer.designprowebsolutions.com/sufi-intensive/team/imam-abdoulaye-ndaw/">
<span class="team-member-name a_font-16 a_display-block a_font-weight-bold a_text-transform-up a_color-333">Imam Abdoulaye Ndaw</span>
</a>
<span class="team-member-position a_font-12 a_text-transform-up a_display-block a_color-777 a_letter-spacing-1">Imam & Ustadz</span>
<div class="team-member-desc a_margin-top-20 a_margin-bottom-10 a_display-block"></div>
</div>
</div>