Why isn't my search icon fetching the API? - javascript

I added a search Icon to my code, but now I need it to fetch the results in the API. I assigned it an id so I can access it but it's not working. What newbie mistake am I making?
const searchForm = document.querySelector('form');
const searchResultDiv = document.querySelector('.search-result');
const container = document.querySelector('.container');
let searchQuery='';
const searchIcon = document.getElementById('search-icon');
searchForm.addEventListener('submit', (e) => {
e.preventDefault();
searchQuery = e.target.querySelector('input').value;
fetchAPI();
})
searchIcon.addEventListener('click', (search) => {
searchQuery = search.target.querySelector('input').value;
fetchAPI();
})
<head>
<link href='https://unpkg.com/boxicons#2.1.2/css/boxicons.min.css' rel='stylesheet'>
</head>
<div class="container">
<div class="logo" style="cursor: pointer">
<img src="/Images/logo img.png">
<h1 class="brand">Recipe App</h1>
</div>
<form>
<input type="text" placeholder="Find Yummy Recipes...">
<i class='bx bx-search' id="search-icon" style="cursor: pointer;"></i>
</form>
<div class="search-result">
<!-- <div class="item">
<img src="/Images/Food-1.jpg" alt="">
<div class="food-details">
<h1 class="title">This is a Recipe</h1>
<a class="view-button" href="#">View Recipe</a>
</div>
<p class="item-data">Calories: 120</p>
</div> -->
</div>
</div>


The snippet below demonstrates how you can assign two event listeners ('click' and 'submit') to the body of the document. The if condition in the callback function turns it into a "delegated" event handling: the action will unfold only if the sIcon element was click-ed or the submit event was triggered (e. g. by hitting the return key after entering text into the input field).
As #DaveNewton remarked in a comment already, you should evaluate the inp.value as late as possible and not communicate it through a global variable but rather as an argument to the fetchAPI() function.
const sIcon = document.getElementById('search-icon'),
inp=document.querySelector("input");
['click','submit'].forEach(ty=>document.body.addEventListener(ty,ev=> {
ev.preventDefault();
if(ev.type=='click'&&ev.target==sIcon||ev.type=='submit')
fetchAPI(inp.value);
}));
function fetchAPI(pat){
console.log(`fetching data with pattern: ${pat}`);
}
<head>
<link href='https://unpkg.com/boxicons#2.1.2/css/boxicons.min.css' rel='stylesheet'>
</head>
<div class="container">
<div class="logo" style="cursor: pointer">
<img src="/Images/logo img.png">
<h1 class="brand">Recipe App</h1>
</div>
<form>
<input type="text" placeholder="Find Yummy Recipes...">
<i class='bx bx-search' id="search-icon" style="cursor: pointer;"></i>
</form>
<div class="search-result">
<!-- <div class="item">
<img src="/Images/Food-1.jpg" alt="">
<div class="food-details">
<h1 class="title">This is a Recipe</h1>
<a class="view-button" href="#">View Recipe</a>
</div>
<p class="item-data">Calories: 120</p>
</div> -->
</div>
</div>

Related

How does eventlistener work in this code?

From using querySelector, querying a form element and adding an event listener to the latter, I want to understand how the submit button is involved. Is it because the submit button is what gives meaning to the form? And please provide me with some good resources on JavaScript and DOM scripting. Thanks and regards.
// const taskInput = document.getElementById('task');
// const heading = document.querySelector('h5');
function handleEvent(evt) {
evt.preventDefault();
const { type, target } = evt;
console.log({ type, target });
}
const form = document.querySelector('form');
// submit
form.addEventListener('submit', handleEvent);
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col s12">
<div id="main" class="card">
<div class="card-content">
<span class="card-title">Task List</span>
<div class="row">
<form id="task-form">
<div class="input-field col s12">
<input type="text" name="task" id="task" value="Walk the dog">
<label for="task">New Task</label>
</div>
</div>
<input type="submit" value="Add Task" class="btn">
</form>
</div>
<div class="card-action">
<h5 id="task-title">Tasks</h5>
<ul class="collection">
<li class="collection-item">
List Item
<a href="#" class="delete-item secondary-content">
<i class="fa fa-remove"></i>
</a>
</li>
</div>
</div>
</div>
</div>
</div>

jQuery not adding class to selected div id

I'm trying this code on website but it not working at all.
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>
var link = jQuery(location).attr('pathname');
var fullurl = jQuery(location).attr('href');
if (link.split("/")[3] === "sardines") {
console.log("fullurl = " + fullurl);
console.log("pathname = " + link);
console.log("loop sardines");
jQuery('#sardines').addClass('capik');
console.log("end addClass");
}
else if (link.split("/")[3] === "saba"){
console.log("loop saba");
jQuery('#saba').addClass('capik');
console.log("end addClass");
}
else{
console.log("end of loop");
}
<div id="all-product-categories">
<div class="all-categories">
<h2>All Categories</h2>
</div>
<div class="col-12">
<div id="sardines" class="sardines col-3">
<a href="/index.php/products/sardines" alt="Sardines">
<div class="box">
<span>SARDINES</span>
<img src="images/AYAM-product-categories/sardines.png" alt="sardines" width="150" height="150" />
</div>
</a>
</div>
<div id="saba" class="saba col-3">
<a href="/index.php/products/saba" alt="Saba">
<div class="box">
<span>SABA</span>
<img src="images/AYAM-product-categories/saba.png" alt="saba" width="150" height="150" />
</div>
</a>
</div>
<div id="mackerel" class="col-3">
<a href="/index.php/products/mackerel" alt="Mackerel">
<div class="box">
<span>MACKEREL</span>
<img src="images/AYAM-product-categories/mackerel.png" alt="saba" width="150" height="150" />
</div>
</a>
</div>
<div id="tuna" class="col-3">
<a href="/index.php/products/tuna" alt="Tuna">
<div class="box">
<span>TUNA</span>
<img src="images/AYAM-product-categories/tuna.png" alt="saba" width="150" height="150" />
</div>
</a>
</div>
</div>
<div style="clear: both;"> </div>
<div class="col-12">
<div id="bakedbeans" class="col-3">
<a href="/index.php/products/baked-beans" alt="Baked Beans">
<div class="box">
<span>BAKED BEANS</span>
<img src="images/AYAM-product-categories/baked-beans.png" alt="saba" width="150" height="150" />
</div>
</a>
</div>
<div id="coconut" class="col-3">
<a href="/index.php/products/coconut" alt="Coconut">
<div class="box">
<span>COCONUT</span>
<img src="images/AYAM-product-categories/coconut.png" alt="saba" width="150" height="150" />
</div>
</a>
</div>
<div id="fruits" class="col-3">
<a href="/index.php/products/fruits" alt="Fruits">
<div class="box">
<span>FRUITS</span>
<img src="images/AYAM-product-categories/fruits.png" alt="saba" width="150" height="150" />
</div>
</a>
</div>
<div id="vegetables" class="col-3">
<a href="/index.php/products/vegetables" alt="Vegetables">
<div class="box">
<span>VEGETABLES</span>
<img src="images/AYAM-product-categories/vegetables.png" alt="saba" width="150" height="150" />
</div>
</a>
</div>
</div>
<div style="clear: both;"> </div>
Can someone help me with this issue. The script are running fine on the site but the jQuery not adding any class on the selected id. The loop also working fine. How to make the jQuery add the new class on the selected div id. Here i'm attaching the screenshot for the console that show the script are running fine and screenshot for the html. But the class are not added into the selected one.Look like it skipping the addClass script there.
This is when i'm on sardines page.

Wrap your code with jQuery(document).ready. Your code might have been executed before the html was fully loaded. Means that your selectors got executed when the element is not present yet..
// document.ready
jQuery(document).ready(function () {
var link = jQuery(location).attr('pathname');
console.log("url = " + link);
console.log(link.split("/")[3]);
console.log(link.split("/")[3] === "sardines");
if (link.split("/")[3] === "sardines") {
console.log("loop sardines");
jQuery('#sardines').addClass('class');
console.log("end addClass");
}
else if (link.split("/")[3] === "saba"){
console.log("loop saba");
jQuery('#saba').addClass('class');
console.log("end addClass");
}
else{
console.log("end of loop");
}
})
<!-- A not working example, inspect element you see there's no class -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("#test").addClass("test");
</script>
<div id="test">
Test
</div>
<!-- A working example, inspect element you see there's a class -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#test").addClass("test");
});
</script>
<div id="test">
Test
</div>
Hope that helps

Can't figure out why my site loads so slow

I got a site form my html teacher, he asked me to check it and fix any problems if they are there. While I fixted some, there is still one big one that I can't figure out. It takes a long time (around 30 seconds) to load the site completly. Everything loads correctly, exapt the navigation menu and a youtube video. I found the source of the problem, it has something to do with the JavaScript code. I don't understand JavaScripy, so I can't figure out the problem. When I delete the JavaScript code, the site loads, but the navigation menu and the video don't, not at all to be exact. There is another JavaScript file, but I don't think it has anything to do with this, and it's to long to post here, so you can download the file here. Here is the css file.
The last 10 lines of JavaScript code is the problem.
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Magic-Fire® by Safretti - Home - Safretti Magic-Fire</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="shortcut icon" type="image/png" href="./assets/images/favicon.png">
<link rel="stylesheet" href="./assets/css/style.css?v=1501504031">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o) [0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-1301951-24', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<div id="viewport">
<div class="page" id="page-18027">
<header class="block-4-1 v-0" data-sticky="sticky"><div class="container">
<div class="row">
<div class="col">
<div class="middle">
<div class="logo">
<a class="media-1" href="./index.html"><img src="./assets/images/safretti-magicfire-fireplaces-logo-white.svg"></a>
</div>
<div class="menu">
<a class="handler" href="#">
<div></div>
<div></div>
<div></div>
</a>
<div class="mobile-menu block-4-1-mobile-menu v-0">
<div class="outer">
<div class="inner">
<div class="menu-1 menu-menu-1"><ul> <li class="active">Home</li><li>Magic-Fire?</li><li class="">Mistero<ul class="" style="height: 179px;"><li>Mistero 500</li><li>Mistero 1000</li><li>Mistero 1500</li><li>Mistero 2000</li><li>Mistero customized</li></ul> </li><li class="">Incanto<ul class="" style="height: 179px;"><li>Incanto 1000</li><li>Incanto 1500</li><li>Incanto 2000</li><li>Incanto 2500</li><li>Incanto customized</li></ul></li><li>Customized</li><li>References</li><li>About Safretti</li><li>Contact</li></ul></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div></header>
<section id="block-39-848428" class="v-35">
<div class="media-4" data-size="1920x0"><iframe src="//www.youtube.com/embed/U5RHhah4poI?enablejsapi=1&wmode=transparent" allowfullscreen></iframe>
<div class="container">
<div class="row">
<div class="col">
<div class="box">
</div>
</div>
</div>
</div>
</section>
<section id="block-51-848431" class="v-35">
<div class="media-4" data-size="1920x0"><iframe src="https://www.youtube.com/embed/U5RHhah4poI?rel=0&autoplay=1&controls=0&showinfo=0" allowfullscreen></iframe>
</div>
<div class="container">
<div class="row">
<div class="col">
<div class="box">
</div>
</div>
</div>
</div>
</section>
<section id="block-76-206454" class="v-35">
<div class="container">
<div class="row">
<div class="col">
<div class="box">
<h1 class="heading-2">The greatest contrast in the world brought together by state of the art technique.</h1>
</div>
</div>
</div>
</div>
</section>
<section id="block-36-219665" class="v-0">
<div class="container">
<div class="row equalize">
<div class="col col-md-6">
<a class="media-2" data-size="480x0" href="./what-is-magic-fire-/incanto-old/index.html">
<img src="./assets/images/home-1c.480x0.jpg">
</a>
<h3 class="heading-3">INCANTO</h3>
<div class="text-2"><p>Incanto is the Magic-Fire Mistero (see description Mistero) provided with a housing so it can be easily integrated in several projects.
</p></div>
<a class="button-2" href="./incanto/index.html">more info ></a>
</div>
<div class="col col-md-6">
<a class="media-2" data-size="480x0" data-position="center-middle" href="./what-is-magic-fire-/mistero-old/index.html">
<img src="./assets/images/home-1b.480x0.jpg">
</a>
<h3 class="heading-3">MISTERO</h3>
<div class="text-2">
<p>Mistero is an electrical fire. The Magic-Fires are equipped with water reservoirs. An evapor<span style="color: #999999;">ator turns t</span>he water into fine water mist. By illuminating the mist you will get a truly realistic and lively smoke / flame effect.</p>
</div>
<a class="button-2" href="./mistero/index.html">Available in the following sizes</a>
</div>
</div>
</div>
</section>
<section id="block-76-956792" class="v-35">
<div class="container">
<div class="row">
<div class="col">
<div class="box">
<h2 class="heading-2">
<span style="font-family: raleway-thin; color: #ffffff;">ON DEMAND - CUSTOM MADE</span>
</h2>
<div class="text-2">
<p><span style="font-family: raleway-regular; color: #ffffff; font-size: 12px;"><span style="color: #999999;">The Magic-Fire firespaces are also available in on demand custom made solutions. Specialy for you as furniture or interior designer or architect if you want something unique for your project. Interested? </span><br /><span style="color: #999999;">Please</span><span style="font-family: raleway-bold;"><strong><span style="color: #ffffff;"> click here</span></strong></span><span style="color: #999999;"> for more information or</span> <strong><span style="font-family: raleway-bold;"><span style="color: #ffffff;">contact</span></span></strong> <span style="color: #999999;">us for more information.</span></span></p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="block-8-2 v-0">
<div class="container">
<div class="row">
<div class="col">
<h3 class="heading-3">Safretti BV - Metaalstraat 3a/3c - 7483 PD Haaksbergen - The Netherlands - ICC nr.: 08130256 - VAT nr.: NL8138.45.245.B01</h3>
</div>
</div>
</div>
</section>
<section class="block-55-1 v-0">
<div class="container">
<div class="row">
<div class="col">
<div class="middle">
<div>
<div>
<div class="media-1">
<img src="./assets/images/icon-phone.svg">
</div>
<div class="text-6"><p>0031 (0)53 574 2554
</p></div>
</div>
<div>
<div class="media-1">
<img src="./assets/images/icon-email.svg">
</div>
<div class="text-6"><p><u>info#safretti.com</u>
</p></div>
</div>
</div>
<div>
<div>
<a class="media-1" href="http://www.facebook.com/safretti" target="_blank">
<img src="./assets/images/icon-facebook.svg">
</a>
<a class="media-1" href="http://nl.linkedin.com/in/safretti-bv-23172931" target="_blank">
<img src="./assets/images/icon-linkedin.svg">
</a>
<a class="media-1" href="http://nl.pinterest.com/safretti/" target="_blank">
<img src="./assets/images/icon-pinterest.svg">
</a>
<a class="media-1" href="http://www.youtube.com/channel/UCkN0NWaLeQts786gy6XkSkQ" target="_blank">
<img src="./assets/images/icon-youtube.svg">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<script src="./assets/js/script.js?v=1501504031"></script>
<script src="//maps.googleapis.com/maps/api/js? key=AIzaSyAdxtgr_gHrZ7E8t2aSZ_-eTAbIr_zc478"></script>
<script>$(window).on('load', function() {
new Menu({selector: '#page-18027 .block-4-1 .menu, [data-page_id="page- 18027"] .block-4-1 .menu'});
new Cover({selector: '#page-18027 #block-51-848431 .media-4, [data- page_id="page-18027"] #block-51-848431 .media-4'});
new Sticky({selector: '#page-18027 [data-sticky], [data-page_id="page- 18027"] [data-sticky]'});
new Scale({selector: '#page-18027 [class*="heading-"], [data-page_id="page-18027"] [class*="heading-"], #page-18027 [class*="text-"], [data-page_id="page-18027"] [class*="text-"]'});
new Anchor({selector: '#page-18027 a[href^="#"], [data-page_id="page-18027"] a[href^="#"]'});
new Popup({selector: '#page-18027 .block-55-1 a[href][target="popup"], [data-page_id="page-18027"] .block-55-1 a[href][target="popup"]'});
new Equalize({selector: '#page-18027 #block-36-219665 .equalize, [data- page_id="page-18027"] #block-36-219665 .equalize'});
new Video({selector: '#page-18027 #block-51-848431 video, [data- page_id="page-18027"] #block-51-848431 video, #page-18027 #block-51-848431 iframe, [data-page_id="page-18027"] #block-51-848431 iframe'});
});
</script>
</body>

Check your style.css if you have many imports. That is something that can cause long loading times. Otherwise if your hosting it localy try to move it to somewhere else. Or check if you have many animations (js).
Edit: Actually the pageloaded very fast on my side. I mean I hadnt the CSS but it lokks like its not the html/js code. Could you post the CSS code too inside your question?

get rid of the large space in the URL in this line.
<script src="//maps.googleapis.com/maps/api/js? key=AIzaSyAdxtgr_gHrZ7E8t2aSZ_-eTAbIr_zc478"></script>
change to
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyAdxtgr_gHrZ7E8t2aSZ_-eTAbIr_zc478"></script>
it is best practice to not have spaces in URL
see Google Maps API Best Practices

How to trigger an event on specific html element with class in vanilla javascript

I'm trying to refactor my jquery code to vanilla because I want to use js properly. But I'm having a problem. I cannot figure out how for example trigger event only on third element with specific class. Because querySelector always returns the first element with that class for example this is my half finished code
const box = document.querySelector('.media-page--box-container');
$(box).on('mouseenter', () => {
// $(this). => select hovered element and do something only on it
console.log('enter')
}).on('mouseleave', () => {
console.log('leave')
});
.media-page--box-container:not(:first-child){
margin-top: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>
You can find example in the snippet

Use the code below if you want to add a listener to one element.
const box = document.querySelector('.media-page--box-container');
box.addEventListener("click", function() {
console.log("Clicked!");
});
<div class="media-page--box-container">.media-page--box-container</div>
Or this code for few elements
const boxes = document.querySelectorAll('.media-page--box-container');
boxes.forEach(function(box){
box.addEventListener("click", function() {
console.log("Clicked!");
});
});
<div class="media-page--box-container">.media-page--box-container 1</div>
<div class="media-page--box-container">.media-page--box-container 2</div>
<div class="media-page--box-container">.media-page--box-container 3</div>
querySelector returns one object, querySelectorAll and getElementsByClassName return array of objects. Not getElementsByClassName require class name, not selector in parameters.
console.log("querySelector", document.querySelector('.media-page--box-container'));
console.log("querySelectorAll", document.querySelectorAll('.media-page--box-container'));
console.log("getElementsByClassName", document.getElementsByClassName('media-page--box-container'));
<div class="media-page--box-container">.media-page--box-container 1</div>
<div class="media-page--box-container">.media-page--box-container 2</div>
<div class="media-page--box-container">.media-page--box-container 3</div>
Note, if there will be no elements on the page, methods will return null. So, you should check this case. If box will null, the code will break with an error.
const box = document.querySelector('.media-page--box-container');
console.log("box value", box);
// Wrong:
box.addEventListener("click", function() {
console.log("Clicked!");
});
// Correct:
if (box !== null)
box.addEventListener("click", function() {
console.log("Clicked!");
});
<div class="media-page--box-container-A">.media-page--box-container-A</div>
<div class="media-page--box-container-B">.media-page--box-container-B</div>

This answer should highlight a few things. You may need to handle event bubbling differently. I added e.target to the hover message. Your target is a block element that will trigger the mouse events even where you can't see it so I highlighted it in red. querySelectorAll will grab all elements not just the first one the way querySelector works.
const boxes = document.querySelectorAll('.media-page--box-container');
boxes[2].addEventListener("mouseover", myMouseover );
boxes[2].addEventListener("mouseleave", myMouseout);
function myMouseover(e) {
console.log('enter' + e.target);
}
function myMouseout() {
console.log('leave');
}
.media-page--box-container:not(:first-child) {
margin-top: 50px;
}
.media-page--box-container {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>

You can use querySelectorAll to retrieve all nodes matching your selector.
Because it returns a NodeList, which is an array-like object, you can traverse that by invoking array.prototype.foreach and passing through the nodelist.
From there you can add event listeners to each item in the node list, or any individual node based on the iterator.
const boxes = document.querySelectorAll('.media-page--box-container');
Array.prototype.forEach.call(boxes, (box, i) => {
if (i===2) {
box.addEventListener('mouseenter', () => {
console.log('enter')
});
box.addEventListener('mouseleave', () => {
console.log('leave')
});
}
});
.media-page--box-container:not(:first-child){
margin-top: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>
<div class="media-page--box-container">
<div class="media-page--inner-wrapper">
<div class="media-page--image-wrapper">
<img class="media-page--image" src="http://via.placeholder.com/212x169">
</div>
<div class="media-page--image-title-wrapper">
<span class="media-page--image-title">Image.jpg</span>
</div>
<div class="media-page--download-link-wrapper">
<a class="media-page--download-link" href="#">Download</a>
</div>
</div>
</div>

Using font-awesome in a code

I have the following code in my JSP file
<div class="row-fluid">
<div style="text-align: left;" class="span3 row-fluid">
<label><spring:message code="alert.channels.outbound.lines"></spring:message>: </label>
</div>
<div class = "span3">
<div class="textbox">
<div class="textVal">${alertStatusForm.outboundLines}</div>
<div class="pencil span3 ">
<img src="/static/img/pencil.png" alt="Edit">
</div>
<div class="save span3">
<img src="/static/img/disk.png" alt="Save">
</div>
<div class="close span3">
<img src="/static/img/Cross.png" alt="Close">
</div>
</div>
</div>
</div>
Now I have to use the font-awesome in place of pencil.png , disk.png and Cross.png .
I have the following codes for the above pencil , disk and Cross as
Pencil =  icon-pencil ()
disk = icon-save ()
Cross = icon-remove ()
from the website http://fortawesome.github.io/Font-Awesome/cheatsheet/
Please let me know how to use the above codes in place of

You can write like this by change to <i> tag instead of <img>
<div class="row-fluid">
<div style="text-align: left;" class="span3 row-fluid">
<label><spring:message code="alert.channels.outbound.lines"></spring:message>: </label>
</div>
<div class = "span3">
<div class="textbox">
<div class="textVal">${alertStatusForm.outboundLines}</div>
<div class="pencil span3 ">
<i class="icon-edit"></i>
</div>
<div class="save span3">
<i class= "icon-save"></i>
</div>
<div class="close span3">
<i class= "icon-folder-close"></i>
</div>
</div>
</div>
</div>
Besure that you have link with font awsome css or
add this link in your layout or views
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

You need to change the <IMG> tags with the following:
<i class="icon-pencil"></i>
Setting appropriate class on the <i> element.

Categories

Resources