JavaScript Modules - Project 1 - Tmpl

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="gallery.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <h2>Image Gallery</h2>
    <ul id="gallery">
    </ul>
  </body>

</html>

// Code goes here
document.addEventListener('DOMContentLoaded', function(){
  console.log('DOM Ready!');
 
 
 
});

/* Styles go here */
body{
  padding: 0;
}


#gallery img{
  cursor: pointer;
}

#gallery .gallery-overlay{
  background-color: rgba(0, 0, 0, 0.66);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  
  align-content: center;
  justify-content: center;
}

#gallery .gallery-overlay img{
  border-radius: 5px;
  padding: 1rem;
  background: #fff;
  width: 100%;
  margin: 8rem;
}

#gallery .gallery-overlay.open{
 display: flex;
}

# Advanced JavaScript - The Module Pattern - Project 1

In this project, you'll build an image gallery JavaScript widget. 
Use the Module Pattern to hide all of the internal implementation details of the image gallery, 
and expose only the global variable `Gallery` (an object) and one public method, init() to initialize the module.

When you click on the link, you'll see the image preview.

You can build your image gallery to look any way you like, but the functionality should include the following features:

- Clicking on a link to open the image preview.
- The image preview should appear in the same page (that is, you should not navigate to a new page).
- No links should be clickable while the image is showing.
- Provide a way to close the image preview, so you can get back to the main part of the page and click on another image link. This could be a button or simply an action (like clicking on the image preview).

Here are a couple of screenshots showing how your image previewer could work:

After loading the page: