Hello! Im am having trouble implementing bootstrap into my own website. I am simply trying to make a list of pokemon that act as buttons that you can press. And when you press them a modal pops up displaying more info about them.
I got it to work with my vanilla JS but I can't seem to get to work when I apply bootstrap.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simple JS App</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<header class="page-header">
<!-- NOTE:Add your logo here -->
<img width="200" src="img/logo.png" alt="logo" class="page-header__item" >
</header>
<h1>Pokedex</h1>
<div class="modal fade" id="modal-container" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h1>I like big modals and I cannot lie</h1>
</div>
</div>
</div>
</div>
<div id= "image-container"></div>
<ul class="list-group"></ul>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="js/scripts.js"></script>
</body>
</html>
JS-
let pokemonRepository = (function () {
let pokemonList = [];
let apiUrl = 'https://pokeapi.co/api/v2/pokemon/?limit=150';
function add(pokemon) {
pokemonList.push(pokemon);
}
function getAll() {
return pokemonList;
}
function addListItem(pokemon) {
let pokemonList = document.querySelector('.list-group');
let listPokemon = document.createElement('li');
listPokemon.classList.add('group-list-item');
let button = document.createElement('button');
button.innerText = pokemon.name;
button.classList.add('btn');
pokemonList.appendChild(listPokemon);
listPokemon.appendChild(button);
button.addEventListener('click', function(event) {
showDetails(pokemon);
});
}
function loadList() {
return fetch(apiUrl).then(function (response) {
return response.json();
}).then(function (json) {
json.results.forEach(function (item) {
let pokemon = {
name: item.name,
detailsUrl: item.url
};
add(pokemon);
console.log(pokemon);
});
}).catch(function (e) {
console.error(e);
});
}
function loadDetails(item) {
let url = item.detailsUrl;
return fetch(url).then(function (response) {
return response.json();
}).then(function (details) {
// Now we add the details to the item
item.imageUrl = details.sprites.front_default;
item.height = details.height;
item.types = details.types;
}).catch(function (e) {
console.error(e);
});
}
function showDetails(pokemon) {
loadDetails(pokemon).then(function () {
showModal(pokemon);
});
};
function showModal(item) {
let modalContainer = document.querySelector('#myModal');
modalContainer.classList.add('is-visible');
// Clear all existing modal content
modalContainer.innerHTML = '';
modalContainer.addEventListener('click', (e) => {
// Since this is also triggered when clicking INSIDE the modal
// We only want to close if the user clicks directly on the overlay
let target = e.target;
if (target === modalContainer) {
hideModal();
}
});
let modal = document.createElement('div');
modal.classList.add('modal');
// Add the new modal content
let closeButtonElement = document.createElement('button');
closeButtonElement.classList.add('modal-close');
closeButtonElement.innerText = 'Close';
closeButtonElement.addEventListener('click', hideModal);
let titleElement = document.createElement('h1');
titleElement.innerText = item.name + (': ') + ('height = ') + item.height;
let container = document.querySelector('#image-container');
let myImage = document.createElement('img');
myImage.src = item.imageUrl;
modal.appendChild(closeButtonElement);
modal.appendChild(titleElement);
modalContainer.appendChild(modal);
modal.appendChild(myImage);
}
function hideModal() {
let modalContainer = document.querySelector('#myModal');
modalContainer.classList.remove('is-visible');
}
window.addEventListener('keydown', (e) => {
let modalContainer = document.querySelector('#myModal');
if (e.key === 'Escape' && modalContainer.classList.contains('is-visible')) {
hideModal();
}
});
return {
add: add,
getAll: getAll,
addListItem: addListItem,
loadList: loadList,
loadDetails: loadDetails,
showDetails: showDetails
};
})();
pokemonRepository.loadList().then(function () {
pokemonRepository.getAll().forEach(function (pokemon) {
pokemonRepository.addListItem(pokemon);
});
});
I got it to work with my vanilla JS but I can't seem to get to work when I apply bootstrap.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simple JS App</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<header class="page-header">
<!-- NOTE:Add your logo here -->
<img width="200" src="img/logo.png" alt="logo" class="page-header__item" >
</header>
<h1>Pokedex</h1>
<div class="modal fade" id="modal-container" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h1>I like big modals and I cannot lie</h1>
</div>
</div>
</div>
</div>
<div id= "image-container"></div>
<ul class="list-group"></ul>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="js/scripts.js"></script>
</body>
</html>
JS-
let pokemonRepository = (function () {
let pokemonList = [];
let apiUrl = 'https://pokeapi.co/api/v2/pokemon/?limit=150';
function add(pokemon) {
pokemonList.push(pokemon);
}
function getAll() {
return pokemonList;
}
function addListItem(pokemon) {
let pokemonList = document.querySelector('.list-group');
let listPokemon = document.createElement('li');
listPokemon.classList.add('group-list-item');
let button = document.createElement('button');
button.innerText = pokemon.name;
button.classList.add('btn');
pokemonList.appendChild(listPokemon);
listPokemon.appendChild(button);
button.addEventListener('click', function(event) {
showDetails(pokemon);
});
}
function loadList() {
return fetch(apiUrl).then(function (response) {
return response.json();
}).then(function (json) {
json.results.forEach(function (item) {
let pokemon = {
name: item.name,
detailsUrl: item.url
};
add(pokemon);
console.log(pokemon);
});
}).catch(function (e) {
console.error(e);
});
}
function loadDetails(item) {
let url = item.detailsUrl;
return fetch(url).then(function (response) {
return response.json();
}).then(function (details) {
// Now we add the details to the item
item.imageUrl = details.sprites.front_default;
item.height = details.height;
item.types = details.types;
}).catch(function (e) {
console.error(e);
});
}
function showDetails(pokemon) {
loadDetails(pokemon).then(function () {
showModal(pokemon);
});
};
function showModal(item) {
let modalContainer = document.querySelector('#myModal');
modalContainer.classList.add('is-visible');
// Clear all existing modal content
modalContainer.innerHTML = '';
modalContainer.addEventListener('click', (e) => {
// Since this is also triggered when clicking INSIDE the modal
// We only want to close if the user clicks directly on the overlay
let target = e.target;
if (target === modalContainer) {
hideModal();
}
});
let modal = document.createElement('div');
modal.classList.add('modal');
// Add the new modal content
let closeButtonElement = document.createElement('button');
closeButtonElement.classList.add('modal-close');
closeButtonElement.innerText = 'Close';
closeButtonElement.addEventListener('click', hideModal);
let titleElement = document.createElement('h1');
titleElement.innerText = item.name + (': ') + ('height = ') + item.height;
let container = document.querySelector('#image-container');
let myImage = document.createElement('img');
myImage.src = item.imageUrl;
modal.appendChild(closeButtonElement);
modal.appendChild(titleElement);
modalContainer.appendChild(modal);
modal.appendChild(myImage);
}
function hideModal() {
let modalContainer = document.querySelector('#myModal');
modalContainer.classList.remove('is-visible');
}
window.addEventListener('keydown', (e) => {
let modalContainer = document.querySelector('#myModal');
if (e.key === 'Escape' && modalContainer.classList.contains('is-visible')) {
hideModal();
}
});
return {
add: add,
getAll: getAll,
addListItem: addListItem,
loadList: loadList,
loadDetails: loadDetails,
showDetails: showDetails
};
})();
pokemonRepository.loadList().then(function () {
pokemonRepository.getAll().forEach(function (pokemon) {
pokemonRepository.addListItem(pokemon);
});
});
