We Keep Coding

how to add javascript on Jsx

i'm learning Javascript and React and i got a problem.
i want to play a javascript function on a jsx files but i don't know where to put it.
i explain:
I want to make a mouseover effect, when "tech-title" is hover, i want to show "tech-text".
In the CSS, visibility is "hidden" for "tech-text"
I want to know what i'm doing wrong ...
thanks a lot ;)
const Resume = () => {
let techTitle = document.querySelectorAll('.tech-title')
let techText = document.querySelectorAll('.tech-text')
function cardDisplay() {
techTitle.addEventListener('mouseover', () => {
techText.style.visibility = 'visible'
})
}
return (
<div className="app-container">
<Profile />
<div className="right-container">
<Navigation />
<div className="display">
<h2 className="exp-title">A propos de moi</h2>
<p className="about-me">
Curieux de nature, je suis à la recherche d'un nouvel environnement de travail pour une première expérience
en tant que Développeur, je suis motivé et prêt à apprendre de nouvelles compétences.
</p>
<h3 className="skills">Skills</h3>
<div class="skill-content">
<div className="skill-card">
<i className="fa-solid fa-puzzle-piece"></i>
<h4 className="skill-title">Réflexion</h4>
<p className="skill-text">
Je trouve très stimulant le fait d'analyser un problème afin d'en trouver la solution
</p>
</div>
<div class="skill-card">
<i className="fa-solid fa-people-group"></i>
<h4 className="skill-title">Travail en équipe</h4>
<p className="skill-text">
Je suis à l'aise pour travailler en équipe ainsi que pour m'exprimer en public
</p>
</div>
<div className="skill-card">
<i className="fa-solid fa-user-ninja"></i>
<h4 className="skill-title">Capacité d'apatation</h4>
<p className="skill-text">
Je suis capable de m'adapter à tout type de situation ainsi que de gérer mon stress
</p>
</div>
<div className="skill-card">
<i className="fa-solid fa-lightbulb"></i>
<h4 className="skill-title">Curiosité</h4>
<p className="skill-text">
Curieux de nature, j'adore apprendre de nouvelles connaissances et compétences
</p>
</div>
</div>
<h3 className="skills">Tech</h3>
<div className="tech-container">
<div className="tech-card">
<div className="img-tech"></div>
<h4 className="tech-title">Html, CSS</h4>
<p className="tech-text">bla</p>
</div>
<div className="tech-card">
<div className="img-tech"></div>
<h4 className="tech-title">SASS</h4>
<p className="tech-text"></p>
</div>
<div className="tech-card">
<div className="img-tech"></div>
<h4 className="tech-title">Javascript</h4>
<p className="tech-text">bla</p>
</div>
<div className="tech-card">
<div className="img-tech"></div>
<h4 className="tech-title">React Js</h4>
<p className="tech-text">bla</p>
</div>
</div>
</div>
</div>
</div>
)
}
export default Resume

Depends on how you want to call your function inside yout JSX.
If you want to call your function every time your component renders you can just call it inside curly braces anywhere inside your JSX.
function myFunction() {
console.log('Hi, I rendered');
}
return (
<div>
{myFunction()}
</div>
)
If you want to call your function when an event happens, like a click event for example, you need to pass the function as a callback like so
function myOnClickFunction() {
console.log('I was clicked');
}
return (
<div>
<button onClick={myOnClickFunction}>Click me!</button>
</div>
)
Notice that I don't use the () when passing my function as a callback onClick={myOnClickFunction}, that is because I don't to run it now, I want to run it when the user clicks on it.
If you need to pass params inside your function you can write your callback as an arrow function and pass any params inside to it.
function myOnClickFunctionWithParams(name) {
console.log(`Hey ${name}, I was clicked`);
}
return (
<div>
<button onClick={() => myOnClickFunctionWithParams('John')}>Click me!</button>
</div>
)
In your case I think you will want to use onMouseEnter and onMouseLeave events on your div.
There are many default events you can use similar to onClick, you can fallback to this documentation anytime you have questions

React uses what's called a virtual-dom wich is built on top of the actual dom, and so they provide their own library of events methods, for your specific case, i would suggest you those react event methods:
onMouseEnter
and
onMouseLeave
learn more on how to handle mouse hover

You can use curly braces in your JSX to open a window to JavaScript, please refer the doc

First, a quick solution to the mouseover problem.
const Resume = () => {
const [hovered, setHovered] = useState(false);
return (
<div
onMouseOver={() => setHovered(true)}
onMouseLeave={() => setHovered(false)}
>
Text I want to show on mouse over
</div>
)
}
You'll see there's a lot less code than you're using, and no event listeners.. you're using what I like to call "psuedo React" - in many ways you're fighting against all of the reasons why React exists in first place!
There's a good video about this on YT: Stop Writing Fake React Code
My advice is to do some tutorials/courses on React and learn how to do the basics properly, it'll be time well spent!
On the "where to put my JS functions?" issue, in general, if the function depends upon any props or state from the component, then add it inside the component as a regular function.
If there are no dependents then the function is better off outside the component.. it's reusable, much easier to write unit tests for, and can't trigger any unexpected re-renders.

Get DIV element by ID or Class as href?

I have the following structure
JAVASCRIPT
//ID of container
$('a#modal_info').attr('rel','{handler: "iframe", size: {x: '+(width-(width*0.03))+', y: '+(height-(height*0.20))+'}}');
});
</script>
HTML
<!-- Esta parte é o Link para fazer a chamada -->
<div id="modal_info" class="modal barradofundo" onclick="window.location.href = this.getElementsByTagName('a')[0].href;">
SAIBA +
</div>
What am I trying to achieve here: The href element that uses the id modal_info is called by the javascript and opens a popup. I can't reproduce it here because it's a Joomla website, but it works. I need to achieve the same result with the div that uses the class barradofundo, as it is already clickable. How is it clickable? Because of the part onclick="window.location.href = this.getElementsByTagName('a')[0].href;"

Angular JS XML data display issue

I'm trying to learn Xml and AngularJs, and I have some issues. I am not able to display the img tag of my feed, well i suppose it's enclosure tag but it does'nt work.
For the title or description there's no problems
Anyone knows how I can fix it ?
Thanks a lot and here goes my code!
<tr ng-repeat="item in feed.entries | filter:searchText">
<td>
<img ng-src="{{item.enclosure}}" />
</td>
<td>
<a href="#/feed/{{feed.id}}/item/{{item.title|hash}}">
<strong ng-bind-html="item.title"></strong>
</a>
<br/>
<span ng-bind-html="item.contentSnippet"></span>
</td>
<td>
{{item.publishedDate | rssDate}}
</td>
</tr>

<item><title>Foot - LFP - LFP : l'UCPF demande la démission de Frédéric Thiriez</title><link>http://www.lequipe.fr/Football/Actualites/Lfp-l-ucpf-le-syndicat-des-clubs-de-l2-demande-la-demission-de-frederic-thiriez/617436#xtor=RSS-1</link><description>L'Assemblée générale de la Ligue, fin février, s'annonce délicate pour son président, Frédéric Thiriez : l'UCPF, l'un des deux syndicats de clubs, estime qu'il «a failli à sa mission» et appelle à sa démission.</description><pubDate>Thu, 17 Dec 2015 14:24:00 +0100</pubDate><enclosure url="http://medias.lequipe.fr/img-photo-jpg/lfp-l-ucpf-le-syndicat-des-clubs-de-l2-demande-la-da-mission-de-fra-da-ric-thiriez/1500000000624930/0-600-0-70/2983b.jpg" length="50000" type="image/jpeg"/></item>

You have to take the attribute url of your enclosure tag. Try:
<img ng-src="{{item.enclosure._url}}" />

I am not sure if you want to use Image SRC Tag or a Link HREF Tag. I can only see HREF Tag on your Script.
For HREF use this:
<a ng-href="#/feed/{{feed.id}}/item/{{item.title|hash}}"></a>
For SRC use this:
<img ng-src="{{SOMETHING.LIKETHIS}}">
Best of Luck.

Dynamic div does not work in Chrome

Last year I published this one page site: www.rofeengenharia.com.br
In the Portifolio page if you click on "Abrir" it loads a dynamic div with javascript over the Portifolio page. In Safari and Firefox it is still working, but it stopped working in Chrome (it was working in Chrome too when I published it).
Here is part of the code:
The place where the dynamic div is loaded and the link to open it (onClick):
<DIV id="projeto_selecionado" style="position:absolute; z-index:20000; background:#ffffff;">
</DIV>
<!-- OBRA 1 -->
<DIV class="view view-sixth">
<IMG width="100%" height="auto" style="float:left;" src="images/portifolio/obra01/obra01_thumb_01.jpg" alt="Obra 01" />
<DIV class="mask">
<H2>Condomínio Jardim Acapulco</H2>
<P>Manutenção executada pela ROFE no litoral sul de São Paulo.</P>
Abrir
</DIV>
</DIV><!-- view -->
And the javascript file:
function exibir_projeto01()
{
$('<div/>').addClass("newdiv")
.html('<DIV id="projeto_selecionado">\
...
...
...
</DIV><!-- container_projeto_01 -->')
.appendTo($("#projeto_selecionado"))
.hide()
.fadeIn(1000);
// Não deixa a pagina voltar para o topo quando clica no link
event.preventDefault();
}
Anyone knows how to make it work in Chrome again?

Try using jQuery - remove the inline onclick and do this instead - also you try to add something with ID #projeto_selecionado to itself
$(".info").on("click",function(e) {
e.preventDefault();
$('<div/>').addClass("newdiv")
.html('<DIV>\
...\
...\
...\
</DIV>')
.appendTo("#projeto_selecionado")
.hide()
.fadeIn(1000);
});
WITHOUT html comments!

jQuery -> toggle function

I have a list with events. I use a foreach for the array to retrieve the data. How my list looks like:
<article class="club-list-club">
<h2 class="club-list-title">
'.$club->getClubnaam().'
</h2>
<h2 class="club-list-location">
'.$club->getWoonplaats().'
</h2>
<h2 class="club-list-open-info">
Openingstijden
</h2>
<h2 class="club-list-big-info">
link2page
</h2>
<h2 class="club-list-small-info">
<span class="club-list-show-small-info">Show</span>
</h2>
<div class="more-info hide">
Hier wat informatie over de club zelf die kort word weergeven. je vind hier de openingstijden en alle
andere belangrijke info. Hier wat informatie over de club zelf die kort word weergeven. je vind hier de
openingstijden en alle andere belangrijke info.
</div>
</article>';
When the SPAN .club-list-show-small-info is clicked, i want the first div.more-info to toggle with fade or slide. What am i doing wrong in my code below:
<script type="text/javascript">
$(document).ready(function(){
$('.club-list-show-small-info').click(function(){
$(this).next('div').slideToggle('.hide');
});
});
</script>

The click event is bound to the span element, the div is not its next sibling element, the div is the next sibling of the spans parent h2 element. So
$(document).ready(function () {
$('.club-list-show-small-info').click(function () {
$(this).parent().next('div').slideToggle();
});
});
Demo: Fiddle

It should be:
$('.club-list-show-small-info').click(function(){
$(this).parent().next().slideToggle();
});
Since the info you want to show and hide is the next() sibling of .club-list-small-info which is the parent() of your .club-list-show-small-info span
Demo
If you want to have fade effect, you can use fadeToggle():
$('.club-list-show-small-info').click(function(){
$(this).parent().next().fadeToggle();
});
Demo