Skip to content

05 - Modal interactions #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
vherus wants to merge 1 commit into
base: 04-modal
Choose a base branch
from
Open

05 - Modal interactions #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,5 +71,6 @@ <h2>Ash Ketchum</h2>
</div>
</div>

<script src="main.js"></script>
</body>
</html>
53 changes: 53 additions & 0 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
// Get the loading image HTML element
const loading = document.querySelector('.loading');

// Get the modal HTML element, and its content & close button elements
const modal = document.querySelector('.modal');
const modalContent = modal.querySelector('.modal-content');
const modalClose = modal.querySelector('.modal-close');

// Add an event listener to the close button so when its clicked, the modal disappears
modalClose.addEventListener('click', function() {
// Add the hidden css class when clicked
modal.classList.add('hidden');
});

// Create a function that will run when we click on a character
async function playCharacter(character) {
// Remove the hidden class from the loading image so it shows on screen
loading.classList.remove('hidden');

// Define some content to display in the modal. We'll switch this out with AI dialog later!
const content = 'You clicked a character!'

// Add that content, as well as the character name, into the modal HTML
modalContent.innerHTML = `
<h2>${character}</h2>
<p>${content}</p>
<code>Well done!</code>
`;

// After 2 seconds, remove the hidden class from the modal so it shows on screen and hide the loading image
setTimeout(function () {
modal.classList.remove('hidden');
loading.classList.add('hidden');
}, 2000)
}

// Create a function to run when the page loads
function init() {
// Get all of the character HTML elements
const characters = document.querySelectorAll('.character');

// Add a click event to every character
characters.forEach((el) => {
el.addEventListener('click', function() {
const character = el.dataset.character;
// When the character is clicked, run the playCharacter function using the clicked character
playCharacter(character);
});
});
}

init();