I am proficient in both jQuery and vanilla JS. I've probably mostly used jQuery because various sites I've worked on used Bootstrap, and if jQuery is already being loaded, then I figured I might as well take advantage of it. It is much easier to write, after all.
That said, as I developed in my career as a frontend developer, I started trying to make sites faster, which required that I begin new projects without using jQuery. For example, at my current job, everyone before me used jQuery, but it slowed things down pretty significantly, so I started writing in vanilla, until enough tests were completed that I could switch off jQuery. Now all of our products and tests do not have the jQuery dependency and there are fewer DOM flashes, which means greater trust for users.
This demonstrates my knowledge of vanilla JS. It is used on this project.
const loadData = async () => {
try {
const res = await fetch('data.js');
filtered = await res.json();
filtered.forEach(function(x){
//dropdown
var dropdown = document.getElementById('dropdownItems');
dropdown.insertAdjacentHTML('afterbegin', '<a href="javascript:void(0);" state-target="'+x.stateAbbr+'"<' + x.state + '</a>');
//modals
var stateContainer = document.getElementById('state');
stateContainer.insertAdjacentHTML('afterend', '<div id="modal_'+x.stateAbbr.replace(' ', '-')+'" class="modal"><div class="modal-content"><p class="close">×</p><h1>'+x.state+'</h1><div class="d-flex data-row" id="all-artists"><img src="img/all-artists.svg" /><div class="all-artists-info"><h2>All Artists</h2><div class="d-flex"><p><strong>Count</strong><br>'+x.allArtists[0].count+'</p><p class="location-quotient"><strong>Location Quotient</strong><br>'+x.allArtists[0].lq+'</p></div></div></div><hr><div class="d-flex data-row"><div><img src="img/architects.svg" /><h2>Architects</h2><p><strong>Count</strong><br>'+x.architects[0].count+'</p><p class="location-quotient"><strong>Location Quotient</strong><br>'+x.architects[0].lq+'</p></div><div><img src="img/art-directors.svg" /><h2>Art Directors, Fine Artists, and Animators</h2><p><strong>Count</strong><br>'+x.artDirectors[0].count+'</p><p class="location-quotient"><strong>Location Quotient</strong><br>'+x.artDirectors[0].lq+'</p></div><div><img src="img/designers.svg" /><h2>Designers</h2><p><strong>Count</strong><br>'+x.designers[0].count+'</p><p class="location-quotient"><strong>Location Quotient</strong><br>'+x.designers[0].lq+'</p></div></div><div class="d-flex data-row"><div><img src="img/dancers.svg" /><h2>Dancers and Choreographers</h2><p><strong>Count</strong><br>'+x.dancers[0].count+'</p><p class="location-quotient"><strong>Location Quotient</strong><br>'+x.dancers[0].lq+'</p></div><div><img src="img/musicians.svg" /><h2>Musicians</h2><p><strong>Count</strong><br>'+x.musicians[0].count+'</p><p class="location-quotient"><strong>Location Quotient</strong><br>'+x.musicians[0].lq+'</p></div><div><img src="img/actors.svg" /><h2>Actors</h2><p><strong>Count</strong><br>'+x.actors[0].count+'</p><p class="location-quotient"><strong>Location Quotient</strong><br>'+x.actors[0].lq+'</p></div></div><div class="d-flex data-row"><div><img src="img/entertainers.svg" /><h2>Entertainers</h2><p><strong>Count</strong><br>'+x.entertainers[0].count+'</p><p class="location-quotient"><strong>Location Quotient</strong><br>'+x.entertainers[0].lq+'</p></div><div><img src="img/writers.svg" /><h2>Writers and Authors</h2><p><strong>Count</strong><br>'+x.writers[0].count+'</p><p class="location-quotient"><strong>Location Quotient</strong><br>'+x.writers[0].lq+'</p></div><div><img src="img/photographers.svg" /><h2>Photographers</h2><p><strong>Count</strong><br>'+x.photographers[0].count+'</p><p class="location-quotient"><strong>Location Quotient</strong><br>'+x.photographers[0].lq+'</p></div></div></div></div>');
});
} catch (err) {
console.log(err);
};
function fireModal(target, selector){
target.forEach(function(x){
var getAttributes = x.getAttribute('state-target');
//get button
var targetAttributes = document.querySelector(selector + '[state-target="'+getAttributes+'"]');
//get modal
var getModal = document.getElementById('modal_'+getAttributes);
//get close button
var getCloseBtn = document.querySelector('#modal_'+getAttributes+' .modal-content .close');
targetAttributes.addEventListener('click', function(){
getModal.style.display = "block";
var removeLQ = document.querySelectorAll('.modal .location-quotient');
if(target === getAllStateTargetId){
removeLQ.forEach(function(x){
x.style.display = "none";
})
}else{
removeLQ.forEach(function(x){
x.style.display = "block";
})
}
})
getCloseBtn.onclick = function() {
getModal.style.display = "none";
}
})
}
var getStateTargetIds = document.querySelectorAll('svg a');
var getDropdownTargets = document.querySelectorAll('#dropdownItems a');
var getAllStateTargetId = document.querySelectorAll('.intro-data a');
fireModal(getStateTargetIds, 'svg a');
fireModal(getDropdownTargets, '#dropdownItems a');
fireModal(getAllStateTargetId, '.intro-data a');
var getIntroCount = document.getElementsByClassName('all-count')[0];
getIntroCount.innerHTML = filtered['51']['allArtists'][0]['count'];
};
function dropdown() {
document.getElementById('dropdownItems').classList.toggle('show');
document.getElementById('arrow').classList.toggle('rotated');
var ariaExpanded = document.getElementsByClassName('dropbtn')[0];
var getAriaExpanded = ariaExpanded.getAttribute('aria-expanded');
if (getAriaExpanded === 'false') {
ariaExpanded.setAttribute('aria-expanded', 'true');
} else {
ariaExpanded.setAttribute('aria-expanded', 'false');
};
};
window.onclick = function(event) {
if ((!event.target.matches('#arrow')) && ((!event.target.matches('.select-state')))) {
var dropdowns = document.getElementsByClassName('dropdown-content');
if (dropdowns[0].classList.contains('show')) {
dropdowns[0].classList.remove('show');
};
};
};
loadData();
var getStateName = document.getElementById('state-name');
function tooltipShow(x){
var stateName = x.getAttribute('aria-label');
getStateName.innerHTML = '<h2>'+stateName+'</h2>';
};
function tooltipHide(){
getStateName.innerHTML = '<h2>Hover Your Cursor Over a State</h2>';
};
This demonstrates my ability to use jQuery as well as APIs to load data. It is used on this project.
$(document).ready(function () {
var noResults = '<div class="alert alert-danger" role="alert">No results.</div>'
const professionalSearchBar = document.getElementById('professionalSearchBar')
let filtered = [] var urlParams = new URLSearchParams(window.location.search);
var searchTerm = urlParams.get('search');
var slugSearch = urlParams.get('slug'); var debounce = function(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) {
func.apply(context, args);
}
};
if (immediate && !timeout) {
func.apply(context, args);
}
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}; $('#professionalSearchBar').keyup(debounce(function(e) {
$('#searchList').toggleClass('d-none')
const searchString = e.target.value.toLowerCase();
if(searchTerm === ''){
$('#searchList').hide()
}else{
$('#searchList').show()
}
var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?search='+searchString;
window.history.pushState({path:newurl},'',newurl);
if(searchString.length >= 2){
$('.moreCharacters').html('')
const filteredProfessionals = filtered.filter(leader => {
return (
leader.name.toLowerCase().includes(searchString)
);
})
if(filteredProfessionals.length === 0){
$('.noResults').html(noResults)
$('#searchList').addClass('d-none')
}else{
$('.noResults').html('')
$('#searchList').removeClass('d-none')
displayProfessionals(filteredProfessionals)
}
addHeaders();
}else{
$('.moreCharacters').html('please enter 2 or more characters')
}
},500)) const loadProfessionals = async () => {
try {//$('#modal').modal('show');
$('.card.is-loading').removeClass('d-none') const res = await fetch('https://www.nfp.com/Portals/25/team_member.js?ver=md92RK6iDnURy753c-8Qcg%3d%3d')filtered1 = await res.json();
filtered = await filtered1.documents if(searchTerm !== null){
if (searchTerm.length >=2){
$('.moreCharacters').html('')
urlSearch();
}else{
$('.moreCharacters').html('please enter 2 or more characters')
}
}
$('input#professionalSearchBar').attr('value', searchTerm)//$('#modal').modal('hide');
$('.card.is-loading').addClass('d-none')
$('#searchByProfessional').removeClass('d-none')
$('#professionalSearchBar').removeClass('d-none')
} catch (err) {
console.log(err);
}
}; const slugsearchFunction = async (slugSearch) => {
try {
$('#searchBars').remove();
$('#searchByProfessional').remove()$('.card.is-loading').removeClass('d-none')
const res = await fetch('https://dnnapi.com/content/api/ContentItems/'+slugSearch, {headers: {authorization: 'Bearer **hidden**'}});
filtered1 = await res.json();if(filtered1.details.primaryPhoto.length > 0){
$('#profilePhoto').append('<img class="w-100 pt-5" src="'+filtered1.details.primaryPhoto[0].url+'" />')
}else{
$('#photoPlaceholder').remove()
}
//$('#leaderInfo #leadershipRole').append('<h2>'+filtered1.details.leadershipRole[0]+'</h2>')
$('#leaderName').append(filtered1.details.firstName + ' ' + filtered1.details.lastName)
$('#leaderInfo #title').append('<h3>'+filtered1.details.title+'</h3>')
if(filtered1.details.linkedInurl !== ''){
$('#leaderInfo #linkedIn').append('<a href="'+filtered1.details.linkedInurl+'"><img class="linkedIn" style="width:25px;" src="https://www.nfp.com/Portals/25/Icons/LI-In-Bug.png" /></a>')
}$('#leaderInfo #phone').append(filtered1.details.phoneNumber)if(filtered1.details.email !== ''){
$('#leaderInfo #email').append(filtered1.details.email)
}if(filtered1.details.region[0] !== 'None'){
$('#leaderInfo #region').append('<h3>'+filtered1.details.region+' Region</h3>')
}
$('#leaderInfo #description').append(filtered1.details.description)
const specialtyPagesPropertyCheck = (filtered1.details.hasOwnProperty('specialtyPages'))
if(specialtyPagesPropertyCheck === true){
for(let i = 0; i < filtered1.details.specialtyPages.length; i++){
showSpecialties(filtered1.details.specialtyPages[i])
}
}
console.log(filtered1.details.linktoMainOffice)
if(filtered1.details.linktoMainOffice !== ''){
getSfData(filtered1.details.linktoMainOffice)
}$('.card.is-loading').addClass('d-none')
} catch (err) {
console.log(err);
}
} const getSfData = async (sfOfficeId) => {
if(sfOfficeId !== undefined){
try {
const res = await fetch('https://firmservice.nfp.com/api/firmlocator/officedetail/'+sfOfficeId);
json = await res.json();
$('.officeInfo').append(''
+ '<h2>Office Information</h2>'
+ '<div id="brand"></div>'
+ '<strong>' + json.Brand +'</strong><br>'
+ json.AddressLine1 +'<br>'
+ '<span class="addressLine2"></span>'
+ json.City + ', ' + json.State + ' ' + json.Zip + '<br>'
)
if(json.AddressLine2 !== null){
$('.addressLine2').append(json.AddressLine2)
}
} catch (err) {
console.log(err);
}
}
}; const addHeaders = () =>{
var executiveData = $('#executive .leadersList .dnnInfo').length
if(executiveData > 0){
$('#executive').removeClass('d-none')
$('#executive .categoryHeader').html('<h4>Executives</h4>')
}else{
$('#executive').addClass('d-none')
}
var regionalData = $('#regional .leadersList .dnnInfo').length
if(regionalData > 0){
$('#regional').removeClass('d-none')
$('#regional .categoryHeader').html('<h4>Regional Leaders</h4>')
}else{
$('#regional').addClass('d-none')
$('#regional .noResults').append(noResults)
} var divisionalData = $('#divisional .leadersList .dnnInfo').length
if(divisionalData > 0){
$('#divisional').removeClass('d-none')
$('#divisional .categoryHeader').html('<h4>Divisional Leaders</h4>')
}else{
$('#divisional').addClass('d-none')
$('#divisional .noResults').html(noResults)
}
var specialtyData = $('#specialty .leadersList .dnnInfo').length
if(specialtyData > 0){
$('#specialty').removeClass('d-none')
$('#specialty .categoryHeader').html('<h4>Specialty Leaders</h4>')
}else{
$('#specialty').addClass('d-none')
$('#specialty .noResults').html(noResults)
}
var localData = $('#local .leadersList .dnnInfo').length
if(localData > 0){
$('#local').removeClass('d-none')
$('#local .categoryHeader').html('<h4>Local Leaders</h4>')
}else{
$('#local').addClass('d-none')
$('#local .noResults').html(noResults)
}
var advisorData = $('#advisors .leadersList .dnnInfo').length
if(advisorData > 0){
$('#advisors').removeClass('d-none')
$('#advisors .categoryHeader').html('<h4>Advisors</h4>')
}else{
$('#advisors').addClass('d-none')
$('#advisors .noResults').html(noResults)
}
var platformData = $('#platform .leadersList .dnnInfo').length
if(platformData > 0){
$('#platform').removeClass('d-none')
$('#platform .categoryHeader').html('<h4>Platform Leaders</h4>')
}else{
$('#platform').addClass('d-none')
$('#platform .noResults').html(noResults)
}
}; const displayProfessionals = (leaders) => {
const executives = leaders.map((leader) =>{
console.log(leader)
if(leader.details.leadershipRole[0] === 'Executive'){
var name = `<h4>${leader.name}</h4>`
var photo = leader.details.primaryPhoto.length > 0 ? '<div class="text-center"><img style="width:100%;" src="'+leader.details.primaryPhoto[0].url+'" /></div>' : '<div class="text-center"><img src="https://webfiles2.nfp.com/webfiles/public/tier1/websites/logos/nfp/nfp_logo_green.svg" style="width:100%" /></div>'
var cta = `<p><a class="text-center" href="?slug=${leader.id}">${leader.details.firstName} ${leader.details.lastName}</a></p>` var displayOptionsPresent = leader.details.hasOwnProperty('displayOptions');
if(displayOptionsPresent){
if((!leader.details.displayOptions[0] === 'Do not display on Search Tool') || (leader.details.displayOptions.length === 0)){
return ['<div class="dnnInfo">'+ cta + '</div>']
}
}else{
return ['<div class="dnnInfo">'+ cta + '</div>']
}
} }).join('');
$('#executive .leadersList').html(executives) const regionals = leaders.map((leader) =>{
if(leader.details.leadershipRole[0] === 'Regional'){
var name = `<h4>${leader.name}</h4>`
var photo = leader.details.primaryPhoto.length > 0 ? '<div class="text-center"><img style="width:100px;" src="'+leader.details.primaryPhoto[0].url+'" /></div>' : '<div class="text-center"><img class="nfpLogo" src="https://webfiles2.nfp.com/webfiles/public/tier1/websites/logos/nfp/nfp_logo_green.svg" /></div>'
var cta = `<p><a class="text-center" href="?slug=${leader.id}">${leader.details.firstName} ${leader.details.lastName}</a></p>`
var displayOptionsPresent = leader.details.hasOwnProperty('displayOptions');
if(displayOptionsPresent){
if((!leader.details.displayOptions[0] === 'Do not display on Search Tool') || (leader.details.displayOptions.length === 0)){
return ['<div class="dnnInfo">'+ cta + '</div>']
}
}else{
return ['<div class="dnnInfo">'+ cta + '</div>']
}
}
}).join('');
$('#regional .leadersList').html(regionals) const divisional = leaders.map((leader) =>{
if(leader.details.leadershipRole[0] === 'Divisional'){
var name = `<h4>${leader.name}</h4>`
var photo = leader.details.primaryPhoto.length > 0 ? '<div class="text-center"><img style="width:100px;" src="'+leader.details.primaryPhoto[0].url+'" /></div>' : '<div class="text-center"><img class="nfpLogo" src="https://webfiles2.nfp.com/webfiles/public/tier1/websites/logos/nfp/nfp_logo_green.svg" /></div>'
var cta = `<p><a class="text-center" href="?slug=${leader.id}">${leader.details.firstName} ${leader.details.lastName}</a></p>`
var displayOptionsPresent = leader.details.hasOwnProperty('displayOptions');
if(displayOptionsPresent){
if((!leader.details.displayOptions[0] === 'Do not display on Search Tool') || (leader.details.displayOptions.length === 0)){
return ['<div class="dnnInfo">'+ cta + '</div>']
}
}else{
return ['<div class="dnnInfo">'+ cta + '</div>']
}
}
}).join('');
$('#divisional .leadersList').html(divisional) const specialty = leaders.map((leader) =>{
if(leader.details.leadershipRole[0] === 'Specialty'){
var name = `<h4>${leader.name}</h4>`
var photo = leader.details.primaryPhoto.length > 0 ? '<div class="text-center"><img style="width:100px;" src="'+leader.details.primaryPhoto[0].url+'" /></div>' : '<div class="text-center"><img class="nfpLogo" src="https://webfiles2.nfp.com/webfiles/public/tier1/websites/logos/nfp/nfp_logo_green.svg" /></div>'
var cta = `<p><a class="text-center" href="?slug=${leader.id}">${leader.details.firstName} ${leader.details.lastName}</a></p>`
var displayOptionsPresent = leader.details.hasOwnProperty('displayOptions');
if(displayOptionsPresent){
if((!leader.details.displayOptions[0] === 'Do not display on Search Tool') || (leader.details.displayOptions.length === 0)){
return ['<div class="dnnInfo">'+ cta + '</div>']
}
}else{
return ['<div class="dnnInfo">'+ cta + '</div>']
}
}
}).join('');
$('#specialty .leadersList').html(specialty) const local = leaders.map((leader) =>{
if(leader.details.leadershipRole[0] === 'Local'){
var name = `<h4>${leader.name}</h4>`
var photo = leader.details.primaryPhoto.length > 0 ? '<div class="text-center"><img style="width:100px;" src="'+leader.details.primaryPhoto[0].url+'" /></div>' : '<div class="text-center"><img class="nfpLogo" src="https://webfiles2.nfp.com/webfiles/public/tier1/websites/logos/nfp/nfp_logo_green.svg" /></div>'
var cta = `<p><a class="text-center" href="?slug=${leader.id}">${leader.details.firstName} ${leader.details.lastName}</a></p>`
var displayOptionsPresent = leader.details.hasOwnProperty('displayOptions');
if(displayOptionsPresent){
if((!leader.details.displayOptions[0] === 'Do not display on Search Tool') || (leader.details.displayOptions.length === 0)){
return ['<div class="dnnInfo">'+ cta + '</div>']
}
}else{
return ['<div class="dnnInfo">'+ cta + '</div>']
}
}
}).join('');
$('#local .leadersList').html(local) const advisors = leaders.map((leader) =>{
if(leader.details.leadershipRole[0] === 'Producer'){
var name = `<h4>${leader.name}</h4>`
var photo = leader.details.primaryPhoto.length > 0 ? '<div class="text-center"><img style="width:100px;" src="'+leader.details.primaryPhoto[0].url+'" /></div>' : '<div class="text-center"><img class="nfpLogo" src="https://webfiles2.nfp.com/webfiles/public/tier1/websites/logos/nfp/nfp_logo_green.svg" /></div>'
var cta = `<p><a class="text-center" href="?slug=${leader.id}">${leader.details.firstName} ${leader.details.lastName}</a></p>`
var displayOptionsPresent = leader.details.hasOwnProperty('displayOptions');
if(displayOptionsPresent){
if((!leader.details.displayOptions[0] === 'Do not display on Search Tool') || (leader.details.displayOptions.length === 0)){
return ['<div class="dnnInfo">'+ cta + '</div>']
}
}else{
return ['<div class="dnnInfo">'+ cta + '</div>']
}
}
}).join('');
$('#advisors .leadersList').html(advisors) const platform = leaders.map((leader) =>{
if(leader.details.leadershipRole[0] === 'Platform'){
var name = `<h4>${leader.name}</h4>`
var photo = leader.details.primaryPhoto.length > 0 ? '<div class="text-center"><img style="width:100px;" src="'+leader.details.primaryPhoto[0].url+'" /></div>' : '<div class="text-center"><img class="nfpLogo" src="https://webfiles2.nfp.com/webfiles/public/tier1/websites/logos/nfp/nfp_logo_green.svg" /></div>'
var cta = `<p><a class="text-center" href="?slug=${leader.id}">${leader.details.firstName} ${leader.details.lastName}</a></p>`
var displayOptionsPresent = leader.details.hasOwnProperty('displayOptions');
if(displayOptionsPresent){
if((!leader.details.displayOptions[0] === 'Do not display on Search Tool') || (leader.details.displayOptions.length === 0)){
return ['<div class="dnnInfo">'+ cta + '</div>']
}
}else{
return ['<div class="dnnInfo">'+ cta + '</div>']
}
}
}).join('');
$('#platform .leadersList').html(platform)
}; const showSpecialties = async (subcategoryId) => {
try {const res = await fetch('https://dnnapi.com/content/api/ContentItems/'+subcategoryId, {headers: {authorization: 'Bearer *hidden*'}});result = await res.json();
console.log(result) //$('#specialtyPageLinks h2').removeClass('d-none')
$('#specialtyPageLinks').append('<a href="https://www.nfp.com/' + result.name.replace(/\s-\s/g, '/').replace(/,/g, '').replace(/\s/g, '-').replace('PC', 'property-and-casualty').replace('IS', 'individual-solutions').replace('CB', 'corporate-benefits') + '">'+result.details.articleTitle+'</a><br>')
} catch (err) {
console.log(err);
}
}; const urlSearch = () => {
//console.log(filtered)
const filteredProfessionals = filtered.filter(leader => {
return (
leader.name.toLowerCase().includes(searchTerm)
);
})
$('#searchList').toggleClass('d-none')
if(filteredProfessionals.length === 0){
$('.noResults').html(noResults)
}else{
$('.noResults').html('')
displayProfessionals(filteredProfessionals)
}
addHeaders();
}
if(slugSearch === null){
loadProfessionals();
}if(slugSearch !== null){
slugsearchFunction(slugSearch)
}
});