I am trying to make a simple hello world page. I added a few css animations for it and also implemented modal to pop up when the user clicked the button. The button has a blinking animation and will only appear after the user has typed some text.
I tried to first just getting it triggered when they enter their name but then i changed it to a button in the hopes that then it would work. When i print the pop up.style.display after changing it to block then it is prinitng block. but otherwise the modal does not appear.
I tried to print out the modal display and also the modal directly without setting the display to none. but it was of no avail. I also tried changing the overflow hidden property but no use. i tried doing all the changes that AI recommended but no use. this is my code.
CSS
@font-face {
font-family: Caveat;
src: url("D:/Year 4/Term 1/Websites/Hello World/Caveat/static/Caveat-Regular.ttf");
}
* {
background-color: #A24545;
font-family: Caveat;
font-size: 36px;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
position: relative;
width: 1535px;
height: 729px;
overflow: hidden;
margin: auto;
}
.tv-frame {
width: 1100px;
height: 630px;
margin: auto;
margin-top: 60px;
padding: 20px;
margin-left: 210px;
}
.small{
width: 270px;
height: 150px;
}
.mid{
width: 305px;
height: 180px;
}
.leftTV{
top: 50px;
left: -300px;
position: absolute;
animation: movearound 2s infinite;
animation-timing-function: linear;
visibility: hidden;
animation-play-state: paused;
}
.rightTV{
bottom: 70px;
right: -120px;
position: absolute;
mix-blend-mode: darken;
animation: blink2 2s infinite;
visibility: hidden;
animation-play-state: paused;
}
.topTV{
top: -80px;
right: 0px;
position: absolute;
mix-blend-mode: darken;
animation: movearound2 2s infinite;
animation-timing-function: linear;
visibility: hidden;
animation-play-state: paused;
}
.bottomTV{
bottom: -140px;
left: -10px;
position: absolute;
animation: movearound3 2s infinite;
visibility: hidden;
animation-play-state: paused;
}
.sent1{
top: 250px;
left: 610px;
z-index: 3;
position: absolute;
color: aliceblue;
background-color: transparent;
text-align: center;
}
.sent2{
top: 320px;
left: 540px;
z-index: 3;
position: absolute;
color: aliceblue;
background-color: transparent;
text-align: center;
}
.sent3{
width: 370px;
top: 390px;
left: 490px;
z-index: 3;
position: absolute;
border: none;
text-decoration: none;
background-color: transparent;
color: aliceblue;
outline: none;
text-align: center;
}
.sent3::placeholder{
color: aliceblue;
background-color: transparent;
opacity: 0.9;
text-align: center;
}
.optional{
font-size: 26px;
z-index: 3;
top: 480px;
left: 580px;
position: absolute;
color: aliceblue;
width: 200px;
background-color: #000;
border-radius: 5px;
visibility: hidden;
animation: blink 2s infinite;
animation-play-state: paused;
animation-timing-function: ease;
text-align: center;
}
span{
animation: blinkCursor 0.7s infinite;
}
.popUp{
z-index: 1;
display: none;
position: fixed;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(199, 199, 199);
}
.pop-content{
background-color: rgb(54, 54, 54);
margin: 15% auto;
padding: 20px;
width: 300px;
height: 200px;
text-align: center;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.close{
color: #7e7e7e;
float: left;
font-size: 24px;
font-weight: bold;
cursor: pointer;
}
.close:hover,
.close:focus {
color: #000;
}
#done {
margin-top: 10px;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
#done:hover{
background-color:#000;
}
/* Fading transitions */
.fade-in {
transition: opacity 0.5s ease-in;
opacity: 1;
}
.fade-out {
transition: opacity 0.5s ease-out;
opacity: 0;
}
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes movearound {
0% {
top: 50px;
left:-300px;
transform: rotate(70deg);
}
50%{
top: 150px;
left: -180px;
transform: rotate(0deg);
}
100% {
top: 300px;
left: -300px;
transform: rotate(-70deg);
}
}
@keyframes movearound2 {
0% {
transform: rotate(90deg);
top: -260px;
}
50% {
transform: rotate(0deg);
top: -80px;
}
100% {
transform: rotate(-90deg);
top: -260px;
}
}
@keyframes movearound3 {
0% {
bottom: -130px;
left: -10px;
transform: rotate(-30deg);
}
50% {
bottom: -130px;
transform: rotate(30deg);
}
100%{
bottom: -130px;
transform: rotate(-30deg);
}
}
@keyframes blink2 {
0% {
transform: rotate(-30deg);
content: url("D:/Year 4/Term 1/Websites/Hello World/images/retro TV.png");
}
50% {
transform: rotate(30deg);
content: url("D:/Year 4/Term 1/Websites/Hello World/images/Color TV.png");
}
100% {
transform: rotate(-30deg);
content: url("D:/Year 4/Term 1/Websites/Hello World/images/retro TV.png");
}
}
@keyframes blinkCursor {
0% {
border-color: transparent;
}
50% {
border-color: aliceblue;
}
100% {
border-color: transparent;
}
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="helloWorld.css">
<script src="./helloWorld.js"></script>
<link rel="icon" href="D:/Year 4/Term 1/Websites/Hello World/images/tv.png" type="image/x-icon">
<title>Hello World</title>
</head>
<body>
<div class="container">
<span class="sent1"></span>
<span class="sent2"></span>
<input type="text" class="sent3">
<button class="optional text" id="pop-open">... is my name</button>
<img src="./images/Retro-TV-Frame.png" alt="" class="image tv-frame">
<img src="./images/retro TV.png" alt="" class="mid leftTV" style="mix-blend-mode: darken;">
<img src="./images/retro TV.png" alt="" class="small rightTV" id="righttv">
<img src="./images/Retro-TV-Frame.png" alt="" class="small topTV">
<img src="./images/Retro-TV-Frame.png" alt="" class="mid bottomTV">
</div>
<div class="popUp" id="pop-up">
<div class="pop-content">
<span class="close">×</span>
<h2>Welcome</h2>
<p>I see. Hello</p>
<button id="done">Thanks..</button>
</div>
</div>
</body>
</html>
JS
document.addEventListener('DOMContentLoaded', function() {
const input = document.querySelector('.sent3');
const optional = document.querySelector('.optional');
const mainTv = document.querySelector('.tv-frame');
const animatedElements = document.querySelectorAll('.leftTV, .rightTV, .topTV, .bottomTV');
const textElement = document.querySelector('.sent1');
const textElement2 = document.querySelector('.sent2');
const textElement3 = document.querySelector('.sent3');
const popUp = document.getElementById("pop-up");
const close = document.querySelector(".close");
const done = document.getElementById("done");
const open = document.getElementById("pop-open");
const text1 = "Hello Dear,";
const text2 = "Welcome to our World";
const text3 = "What was your Name again?";
function typeWriter(element, text, speed = 200, isPlaceholder = false, callback = null) {
let index = 0;
function type() {
if (index < text.length) {
if (isPlaceholder) {
element.placeholder += text.charAt(index);
} else {
element.textContent += text.charAt(index);
}
index++;
setTimeout(type, speed);
} else if (callback) {
callback();
}
}
type();
}
typeWriter(textElement, text1, 200, false, function() {
typeWriter(textElement2, text2, 200, false, function() {
typeWriter(textElement3, text3, 200, true, function(){
input.focus();
});
});
});
if(input){
input.addEventListener('input', () => {
if (input.value.trim() !== '' && input.value.length >= 4) {
optional.style.visibility = 'visible';
optional.style.animationPlayState = "running";
} else {
optional.style.visibility = 'hidden';
optional.style.animationPlayState = "paused";
}
});
}
open.onclick = function() {
popUp.style.display = "block";
}
close.addEventListener('click', function() {
popUp.style.display = 'none';
});
done.addEventListener('click', function() {
popUp.style.display = 'none';
});
document.addEventListener('mousemove', function(event) {
const rect = mainTv.getBoundingClientRect();
const x = event.clientX - 100;
const y = event.clientY;
const tvXMax = rect.right - 200;
if (x >= rect.left && x <= tvXMax && y >= rect.top && y <= rect.bottom) {
animatedElements.forEach(el => {
el.style.visibility = 'visible';
el.style.animationPlayState = 'running';
el.classList.add('fade-in');
el.classList.remove('fade-out');
});
} else {
animatedElements.forEach(el => {
el.style.animationPlayState = 'paused';
el.classList.add('fade-out');
el.classList.remove('fade-in');
setTimeout(() => {
el.style.visibility = 'hidden';
}, 400);
});
}
});
});
You have minor styling issue for modal. If you use dev tools you can see that modal is displaying but at bottom of red section and that's happening because you have not properly positioned your modal.
To fix the issue add position: absolute with z-index: 10. Below is all newly added code with live example.
.popUp {
position: absolute; /* Newly added */
top: 0px; /* Newly added */
z-index: 10; /* Newly added */
}
document.addEventListener('DOMContentLoaded', function() {
const input = document.querySelector('.sent3');
const optional = document.querySelector('.optional');
const mainTv = document.querySelector('.tv-frame');
const animatedElements = document.querySelectorAll('.leftTV, .rightTV, .topTV, .bottomTV');
const textElement = document.querySelector('.sent1');
const textElement2 = document.querySelector('.sent2');
const textElement3 = document.querySelector('.sent3');
const popUp = document.getElementById("pop-up");
const close = document.querySelector(".close");
const done = document.getElementById("done");
const open = document.getElementById("pop-open");
const text1 = "Hello Dear,";
const text2 = "Welcome to our World";
const text3 = "What was your Name again?";
function typeWriter(element, text, speed = 200, isPlaceholder = false, callback = null) {
let index = 0;
function type() {
if (index < text.length) {
if (isPlaceholder) {
element.placeholder += text.charAt(index);
} else {
element.textContent += text.charAt(index);
}
index++;
setTimeout(type, speed);
} else if (callback) {
callback();
}
}
type();
}
typeWriter(textElement, text1, 200, false, function() {
typeWriter(textElement2, text2, 200, false, function() {
typeWriter(textElement3, text3, 200, true, function() {
input.focus();
});
});
});
if (input) {
input.addEventListener('input', () => {
if (input.value.trim() !== '' && input.value.length >= 4) {
optional.style.visibility = 'visible';
optional.style.animationPlayState = "running";
} else {
optional.style.visibility = 'hidden';
optional.style.animationPlayState = "paused";
}
});
}
open.onclick = function() {
popUp.style.display = "block";
}
close.addEventListener('click', function() {
popUp.style.display = 'none';
});
done.addEventListener('click', function() {
popUp.style.display = 'none';
});
document.addEventListener('mousemove', function(event) {
const rect = mainTv.getBoundingClientRect();
const x = event.clientX - 100;
const y = event.clientY;
const tvXMax = rect.right - 200;
if (x >= rect.left && x <= tvXMax && y >= rect.top && y <= rect.bottom) {
animatedElements.forEach(el => {
el.style.visibility = 'visible';
el.style.animationPlayState = 'running';
el.classList.add('fade-in');
el.classList.remove('fade-out');
});
} else {
animatedElements.forEach(el => {
el.style.animationPlayState = 'paused';
el.classList.add('fade-out');
el.classList.remove('fade-in');
setTimeout(() => {
el.style.visibility = 'hidden';
}, 400);
});
}
});
});* {
background-color: #A24545;
font-family: Caveat;
font-size: 36px;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
position: relative;
width: 1535px;
height: 729px;
overflow: hidden;
margin: auto;
}
.tv-frame {
width: 1100px;
height: 630px;
margin: auto;
margin-top: 60px;
padding: 20px;
margin-left: 210px;
}
.small {
width: 270px;
height: 150px;
}
.mid {
width: 305px;
height: 180px;
}
.leftTV {
top: 50px;
left: -300px;
position: absolute;
animation: movearound 2s infinite;
animation-timing-function: linear;
visibility: hidden;
animation-play-state: paused;
}
.rightTV {
bottom: 70px;
right: -120px;
position: absolute;
mix-blend-mode: darken;
animation: blink2 2s infinite;
visibility: hidden;
animation-play-state: paused;
}
.topTV {
top: -80px;
right: 0px;
position: absolute;
mix-blend-mode: darken;
animation: movearound2 2s infinite;
animation-timing-function: linear;
visibility: hidden;
animation-play-state: paused;
}
.bottomTV {
bottom: -140px;
left: -10px;
position: absolute;
animation: movearound3 2s infinite;
visibility: hidden;
animation-play-state: paused;
}
.sent1 {
top: 250px;
left: 610px;
z-index: 3;
position: absolute;
color: aliceblue;
background-color: transparent;
text-align: center;
}
.sent2 {
top: 320px;
left: 540px;
z-index: 3;
position: absolute;
color: aliceblue;
background-color: transparent;
text-align: center;
}
.sent3 {
width: 370px;
top: 390px;
left: 490px;
z-index: 3;
position: absolute;
border: none;
text-decoration: none;
background-color: transparent;
color: aliceblue;
outline: none;
text-align: center;
}
.sent3::placeholder {
color: aliceblue;
background-color: transparent;
opacity: 0.9;
text-align: center;
}
.optional {
font-size: 26px;
z-index: 3;
top: 480px;
left: 580px;
position: absolute;
color: aliceblue;
width: 200px;
background-color: #000;
border-radius: 5px;
visibility: hidden;
animation: blink 2s infinite;
animation-play-state: paused;
animation-timing-function: ease;
text-align: center;
}
span {
animation: blinkCursor 0.7s infinite;
}
.popUp {
display: none;
position: absolute; /* Newly added */
top: 0px; /* Newly added */
z-index: 10; /* Newly added */
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(199, 199, 199);
}
.pop-content {
background-color: rgb(54, 54, 54);
margin: 15% auto;
padding: 20px;
width: 300px;
height: 200px;
text-align: center;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.close {
color: #7e7e7e;
float: left;
font-size: 24px;
font-weight: bold;
cursor: pointer;
}
.close:hover,
.close:focus {
color: #000;
}
#done {
margin-top: 10px;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
#done:hover {
background-color: #000;
}
/* Fading transitions */
.fade-in {
transition: opacity 0.5s ease-in;
opacity: 1;
}
.fade-out {
transition: opacity 0.5s ease-out;
opacity: 0;
}
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes movearound {
0% {
top: 50px;
left: -300px;
transform: rotate(70deg);
}
50% {
top: 150px;
left: -180px;
transform: rotate(0deg);
}
100% {
top: 300px;
left: -300px;
transform: rotate(-70deg);
}
}
@keyframes movearound2 {
0% {
transform: rotate(90deg);
top: -260px;
}
50% {
transform: rotate(0deg);
top: -80px;
}
100% {
transform: rotate(-90deg);
top: -260px;
}
}
@keyframes movearound3 {
0% {
bottom: -130px;
left: -10px;
transform: rotate(-30deg);
}
50% {
bottom: -130px;
transform: rotate(30deg);
}
100% {
bottom: -130px;
transform: rotate(-30deg);
}
}
@keyframes blinkCursor {
0% {
border-color: transparent;
}
50% {
border-color: aliceblue;
}
100% {
border-color: transparent;
}
}<div class="container">
<span class="sent1"></span>
<span class="sent2"></span>
<input type="text" class="sent3">
<button class="optional text" id="pop-open">... is my name</button>
<img src="./images/Retro-TV-Frame.png" alt="" class="image tv-frame">
<img src="./images/retro TV.png" alt="" class="mid leftTV" style="mix-blend-mode: darken;">
<img src="./images/retro TV.png" alt="" class="small rightTV" id="righttv">
<img src="./images/Retro-TV-Frame.png" alt="" class="small topTV">
<img src="./images/Retro-TV-Frame.png" alt="" class="mid bottomTV">
</div>
<div class="popUp" id="pop-up">
<div class="pop-content">
<span class="close">×</span>
<h2>Welcome</h2>
<p>I see. Hello</p>
<button id="done">Thanks..</button>
</div>
</div>