tod
/
odin-default-css-exercises
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make desired outcome gif

This commit is contained in:
conor 2021-10-20 23:05:31 +01:00
parent 660d23d9eb
commit 37187c9111
7 changed files with 169 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
animation/03-pop-up/desired-outcome.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 68 KiB

10
animation/03-pop-up/index.html
View File

@ -5,9 +5,15 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Popup</title> <title>Popup</title>
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="index.css" />
</head> </head>
<body> <body>
<div id="popup-container"></div> <div class="button-container">
<button id="trigger-modal">Open Modal</button>
</div>
<div class="popup-modal">
<button id="close-modal">Close Modal</button>
</div>
<script src="script.js"></script>
</body> </body>
</html> </html>

12
animation/03-pop-up/script.js Normal file
View File

@ -0,0 +1,12 @@
const openButton = document.getElementById('trigger-modal');
const closeButton = document.getElementById('close-modal');
function toggleModal() {
const container = document.querySelector('.button-container');
const modalDiv = document.querySelector('.popup-modal');
modalDiv.classList.toggle('show');
container.classList.toggle('show');
}
openButton.addEventListener('click', toggleModal);
closeButton.addEventListener('click', toggleModal);

61
animation/03-pop-up/solution/solution.css
View File

@ -3,15 +3,19 @@
margin: 0; margin: 0;
} }
.popup-container { body {
overflow: hidden;
}
.button-container {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-color: #ffffff; background-color: #ffffff;
opacity: 1; opacity: 100%;
transition: background-color 0.5s ease-in, opacity 0.5s ease-in; transition: background-color 0.5s ease-in, opacity 0.5s ease-in;
} }
.popup-container.show { .button-container.show {
background-color: #000000; background-color: #000000;
opacity: 40%; opacity: 40%;
} }
@ -24,16 +28,59 @@
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.popup-modal { #trigger-modal {
position: absolute; padding: 20px;
color: #ffffff;
background-color: #0e79dd;
border: none;
border-radius: 5px;
font-weight: 600;
}
#trigger-modal:hover {
cursor: pointer;
box-shadow: 1px 1px 2px #000000;
}
.popup-modal,
.popup-modal.show {
width: 30%; width: 30%;
border: 1px solid black; height: 15%;
background-color: white; background-color: white;
border: 1px solid black;
border-radius: 10px;
display: flex; display: flex;
justify-content: space-between; justify-content: center;
align-items: center;
}
.popup-modal {
margin-top: 10%;
opacity: 0;
visibility: hidden; visibility: hidden;
transition: margin-top 0.5s ease-out, opacity 0.5s ease-out,
visibility 0.5s linear;
} }
.popup-modal.show { .popup-modal.show {
min-height: 90px;
opacity: 1;
visibility: visible; visibility: visible;
margin-top: 0;
transition: margin-top 0.5s ease-out, opacity 0.5s ease-out,
visibility 0.5s linear;
}
#close-modal {
padding: 20px;
color: #ffffff;
background-color: #0e79dd;
border: none;
border-radius: 5px;
font-weight: 600;
}
#close-modal:hover {
cursor: pointer;
box-shadow: 1px 1px 2px #000000;
} }

7
animation/03-pop-up/solution/solution.html
View File

@ -8,12 +8,11 @@
<link rel="stylesheet" href="solution.css" /> <link rel="stylesheet" href="solution.css" />
</head> </head>
<body> <body>
<div class="popup-container"> <div class="button-container">
<button id="trigger-modal">Click Me!</button> <button id="trigger-modal">Open Modal</button>
</div> </div>
<div class="popup-modal"> <div class="popup-modal">
<p>Hey there!</p> <button id="close-modal">Close Modal</button>
<button id="close-modal">X</button>
</div> </div>
<script src="solution.js"></script> <script src="solution.js"></script>
</body> </body>

19
animation/03-pop-up/solution/solution.js
View File

@ -1,19 +1,12 @@
const openButton = document.getElementById('trigger-modal'); const openButton = document.getElementById('trigger-modal');
const closeButton = document.getElementById('close-modal'); const closeButton = document.getElementById('close-modal');
function openModal() { function toggleModal() {
const container = document.querySelector('.popup-container'); const container = document.querySelector('.button-container');
const modalDiv = document.querySelector('.popup-modal'); const modalDiv = document.querySelector('.popup-modal');
modalDiv.classList.add('show'); modalDiv.classList.toggle('show');
container.classList.add('show'); container.classList.toggle('show');
} }
function closeModal() { openButton.addEventListener('click', toggleModal);
const container = document.querySelector('.popup-container.show'); closeButton.addEventListener('click', toggleModal);
const modalDiv = document.querySelector('.popup-modal.show');
modalDiv.classList.remove('show');
container.classList.remove('show');
}
openButton.addEventListener('click', openModal);
closeButton.addEventListener('click', closeModal);

86
animation/03-pop-up/style.css
View File

@ -0,0 +1,86 @@
* {
padding: 0;
margin: 0;
}
body {
overflow: hidden;
}
.button-container {
width: 100vw;
height: 100vh;
background-color: #ffffff;
opacity: 100%;
transition: background-color 0.5s ease-in, opacity 0.5s ease-in;
}
.button-container.show {
background-color: #000000;
opacity: 40%;
}
#trigger-modal,
.popup-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#trigger-modal {
padding: 20px;
color: #ffffff;
background-color: #0e79dd;
border: none;
border-radius: 5px;
font-weight: 600;
}
#trigger-modal:hover {
cursor: pointer;
box-shadow: 1px 1px 2px #000000;
}
.popup-modal,
.popup-modal.show {
width: 30%;
height: 15%;
background-color: white;
border: 1px solid black;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.popup-modal {
margin-top: 10%;
opacity: 0;
visibility: hidden;
transition: margin-top 0.5s ease-out, opacity 0.5s ease-out,
visibility 0.5s linear;
}
.popup-modal.show {
min-height: 90px;
opacity: 1;
visibility: visible;
margin-top: 0;
transition: margin-top 0.5s ease-out, opacity 0.5s ease-out,
visibility 0.5s linear;
}
#close-modal {
padding: 20px;
color: #ffffff;
background-color: #0e79dd;
border: none;
border-radius: 5px;
font-weight: 600;
}
#close-modal:hover {
cursor: pointer;
box-shadow: 1px 1px 2px #000000;
}