I have this photo gallery of 4 images, i have 2 JS variable which are "Field" ( the current number of the image) and "Total" ( the total number of the images )
The problem is that "total" is showing 8 images, which in reality is 4.
Can anyone expain why is the variable double counting ?
There is my code:
/*Counting the number of images*/
$(document).ready(function(){
// counting the number of classes named .item
var total = $(".item").length;
document.getElementById("total").innerHTML = total;
});
var value = 0;
var total = $(".item").length;
/*Add function*/
function add() {
value++;
document.getElementById("field").innerHTML = value;
cdn();
}
/*minus function*/
function minus() {
value--;
document.getElementById("field").innerHTML = value;
cdn();
}
/*condition to start over from 0*/
function cdn(){
if(value>total){
value = 1;
document.getElementById("field").innerHTML = value;
}
if(value<1){
value = total ;
document.getElementById("field").innerHTML = value;
}
}
/*Owl caroussel JS*/
var owl = $('.owl-carousel');
owl.owlCarousel({
nav: false,
margin: 20,
center: true,
items:2,
loop:true,
dots: false,
startPosition: 'URLHash',
URLhashListener:true,
responsive:{
600:{
items:2
}
}
});
// trigger go to next item on your own next navigation button:
$('.customNextBtn').click(function() {
owl.trigger('next.owl.carousel');
})
// trigger go to the previous item:
$('.customPrevBtn').click(function() {
owl.trigger('prev.owl.carousel', [300]);
})
.item {
width: 700px;
height: 500px;
/* background-color: orange;*/
padding: 10px 40px 10px 10px;
}
.item img{
width: 100%;
height: 100%;
}
#container{
width: 100%;
height: 900px;
margin-right: auto;
margin-left: auto;
background-color: black;
padding-bottom: 20px;
}
#place{
width: 100%;
height: 700px;
background-color: black;
position: relative;
}
.photo_place {
width: 550px;
padding-top: 50px;
margin-right: auto;
margin-left: auto;
}
.photo_place p {
font-size: 50px;
color: white;
}
#place_list {
padding-top: 30px;
margin-right: auto;
margin-left: auto;
width: 983px;
}
#place_list ul li {
display: inline-block;
color: white;
font-size: 15px;
margin-right: 11px;
}
.li_active{
color: #a98623 !important;
text-decoration: none;
}
#place_list ul li a {
text-decoration: none;
color: white;
}
.owl-nav button{
display: block;
}
.owl-nav button:focus {
outline:0;
}
.owl-nav {
color: white;
font-size: 25px;
}
.owl-nav {
color: white;
font-size: 30px;
}
.owl-nav .owl-next span{
margin-left: 30px;
}
.owl-nav .owl-prev span{
margin-right: 30px;
}
#nav {
width: 206px;
height: 27px;
margin-top: 60px;
margin-right: auto;
margin-left: auto;
}
#nav a {
width: 50px;
height: 50px;
color: white;
font-size: 30px;
float: left;
}
#field{
float:left;
color: white;
position: absolute;
font-size: 25px;
top: 108%;
left: 45%;
}
#total{
float: left;
margin-left: 20px;
position: absolute;
color: white;
font-size: 25px;
top: 110%;
left: 45%;
}
#total:before{
content :' \002F ';
}
#nav a:hover {
text-decoration: none;
}
#nav .customPrevBtn{
margin-right: 30px;
float:left;
}
#nav .customNextBtn{
margin-left: 30px;
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<!--BS CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!--BS JS-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!--OWL CSS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
</head>
<body>
<div id="container">
<div id="place">
<div class="photo_place">
<p>Galerie Photo & Vidéo</p>
</div>
<div class="owl-carousel owl-theme">
<div class="item">
<img src="https://images.homedepot-static.com/productImages/612ae505-9daf-45c3-ac16-67f97dcb251d/svn/globalrose-flower-bouquets-prime-100-red-roses-64_1000.jpg" >
</div>
<div class="item">
<img src="https://cdn2.stylecraze.com/wp-content/uploads/2013/07/366_Top-25-Most-Beautiful-Yellow-Flowers_147529007.jpg_1.jpg" >
</div>
<div class="item">
<img src="https://images.pexels.com/photos/133464/pexels-photo-133464.jpeg?auto=compress&cs=tinysrgb&h=350" >
</div>
<div class="item">
<img src="http://www.silkflowerwedding.com/weddingflorist/prodimages/Black%20Flower%20Hair%20Clip%20481.jpg" >
</div>
</div>
<div id="nav">
<a class="customPrevBtn" href="javascript:minus();"> ⟵ </a>
<span id="field">1</span>
<span id="total"></span>
<a class="customNextBtn" href="javascript:add();"> ⟶ </a>
</div>
<!--OWL JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
Thanks everyone.
I was looking you code and what works for me was counting the childs outs of the $(document).ready. Check this out.
// counting the number of classes named .item
var total = $(".item").length;
document.getElementById("total").innerHTML = total;
var value = 0;
var total = $(".item").length;
/*Add function*/
function add() {
value++;
document.getElementById("field").innerHTML = value;
cdn();
}
/*minus function*/
function minus() {
value--;
document.getElementById("field").innerHTML = value;
cdn();
}
/*condition to start over from 0*/
function cdn(){
if(value>total){
value = 1;
document.getElementById("field").innerHTML = value;
}
if(value<1){
value = total ;
document.getElementById("field").innerHTML = value;
}
}
/*Owl caroussel JS*/
var owl = $('.owl-carousel');
owl.owlCarousel({
nav: false,
margin: 20,
center: true,
items:2,
loop:true,
dots: false,
startPosition: 'URLHash',
URLhashListener:true,
responsive:{
600:{
items:2
}
}
});
// trigger go to next item on your own next navigation button:
$('.customNextBtn').click(function() {
owl.trigger('next.owl.carousel');
})
// trigger go to the previous item:
$('.customPrevBtn').click(function() {
owl.trigger('prev.owl.carousel', [300]);
})
.item {
width: 700px;
height: 500px;
/* background-color: orange;*/
padding: 10px 40px 10px 10px;
}
.item img{
width: 100%;
height: 100%;
}
#container{
width: 100%;
height: 900px;
margin-right: auto;
margin-left: auto;
background-color: black;
padding-bottom: 20px;
}
#place{
width: 100%;
height: 700px;
background-color: black;
position: relative;
}
.photo_place {
width: 550px;
padding-top: 50px;
margin-right: auto;
margin-left: auto;
}
.photo_place p {
font-size: 50px;
color: white;
}
#place_list {
padding-top: 30px;
margin-right: auto;
margin-left: auto;
width: 983px;
}
#place_list ul li {
display: inline-block;
color: white;
font-size: 15px;
margin-right: 11px;
}
.li_active{
color: #a98623 !important;
text-decoration: none;
}
#place_list ul li a {
text-decoration: none;
color: white;
}
.owl-nav button{
display: block;
}
.owl-nav button:focus {
outline:0;
}
.owl-nav {
color: white;
font-size: 25px;
}
.owl-nav {
color: white;
font-size: 30px;
}
.owl-nav .owl-next span{
margin-left: 30px;
}
.owl-nav .owl-prev span{
margin-right: 30px;
}
#nav {
width: 206px;
height: 27px;
margin-top: 60px;
margin-right: auto;
margin-left: auto;
}
#nav a {
width: 50px;
height: 50px;
color: white;
font-size: 30px;
float: left;
}
#field{
float:left;
color: white;
position: absolute;
font-size: 25px;
top: 108%;
left: 45%;
}
#total{
float: left;
margin-left: 20px;
position: absolute;
color: white;
font-size: 25px;
top: 110%;
left: 45%;
}
#total:before{
content :' \002F ';
}
#nav a:hover {
text-decoration: none;
}
#nav .customPrevBtn{
margin-right: 30px;
float:left;
}
#nav .customNextBtn{
margin-left: 30px;
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<!--BS CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!--BS JS-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!--OWL CSS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
</head>
<body>
<div id="container">
<div id="place">
<div class="photo_place">
<p>Galerie Photo & Vidéo</p>
</div>
<div class="owl-carousel owl-theme">
<div class="item">
<img src="https://images.homedepot-static.com/productImages/612ae505-9daf-45c3-ac16-67f97dcb251d/svn/globalrose-flower-bouquets-prime-100-red-roses-64_1000.jpg" >
</div>
<div class="item">
<img src="https://cdn2.stylecraze.com/wp-content/uploads/2013/07/366_Top-25-Most-Beautiful-Yellow-Flowers_147529007.jpg_1.jpg" >
</div>
<div class="item">
<img src="https://images.pexels.com/photos/133464/pexels-photo-133464.jpeg?auto=compress&cs=tinysrgb&h=350" >
</div>
<div class="item">
<img src="http://www.silkflowerwedding.com/weddingflorist/prodimages/Black%20Flower%20Hair%20Clip%20481.jpg" >
</div>
</div>
<div id="nav">
<a class="customPrevBtn" href="javascript:minus();"> ⟵ </a>
<span id="field">1</span>
<span id="total"></span>
<a class="customNextBtn" href="javascript:add();"> ⟶ </a>
</div>
<!--OWL JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
Related
I tried to do it with the .myslides-colorbox on the html/css. The background always seems to cut of at the edge of the top of the slideshow. I want the slide-show to be over a big box something like this is what I want to do with the slideshow. What do I have to add or place differently to make this happen? The controller represent my slideshow
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n >= x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
*{
margin: 0;
padding: 0;
font-family: sans-serif;
}
.container {
width: 100%;
min-height: 100vh;
/* background-color: red; */
padding-left: 8%;
/* padding-right: 8%; */
box-sizing: border-box;
overflow: hidden;
}
/* Navigation bar section*/
.navbar {
width: 100%;
display: flex;
align-items: center;
}
.logo {
width: 150px;
cursor: pointer;
margin: 30px;
}
#menu-icon {
width: 25px;
cursor: pointer;
}
nav {
flex: 1;
text-align: right;
}
nav ul li {
list-style: none;
display: inline-block;
margin-right: 30px;
}
nav ul li a {
text-decoration: none;
color: #000;
font-size: 20px;
}
nav ul li a:hover {
color:blue
}
.row {
display: flex;
justify-content: space-between;
align-items: center;
margin: 100px 0;
}
.col-1 {
flex-basis: 40%;
position: relative;
margin-left: 50px;
}
.col-1 h2{
font-size: 54px;
}
.col-1 h3{
font-size: 30px;
color: #707070;
font-weight: 100;
margin: 20px 0 10px;
}
.col-1 p {
font-size: 16px;
color: #b7b7b7;
font-weight: 100;
}
.col-1 h4{
margin: 30px 0;
font-size: 20px;
}
button {
width: 140px;
border: 0;
padding: 12px 10px;
outline: none;
color: white;
background: linear-gradient(to right, #fb5283, #ff3527);
border-radius: 6px;
cursor: pointer;
/* transition: width 0.5s; */
}
/* button i {
width: 30px;
display: none;
} */
button:hover {
width: 160px;
background: linear-gradient(to right, #ff3527, #fb5283);
}
.col-1::after {
content: '';
width: 10px;
height: 57%;
background: linear-gradient(#fb5283, #ff3527);
position: absolute;
left: -40px;
top: 8px;
}
.col-2 {
position: relative;
flex-basis: 60%;
display: flex;
align-items: center;
margin-left: 200px;
}
.mySlides-colorBox {
position:sticky;
top: 0;
right: 0;
background: linear-gradient(#fb5283, #ff3527);
/* border-radius: 20px 0 0 20px; */
height: 100%;
width: 80%;
z-index: -1;
transform: translate(15);
}
.mySlides {display:none;}
.box{
width: 800px;
height: 400px;
border: 5px solid blue;
margin: 20px auto;
position: relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/15456887b7.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="index.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="navbar">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTU3DPk4gCVZ0g40k0xiOjiwcqGY9MJkY4quA&usqp=CAU" class="logo">
<nav>
<ul>
<li>Home</li>
<li>Auction</li>
<li>Services</li>
<li>Proceedings</li>
<li>Contact</li>
</ul>
</nav>
<i class="fa-solid fa-bars" id="menu-icon"></i>
</div>
<div class="row">
<div class="col-1">
<h2>Come see our wonderful things!</h2>
<h3>Finnspeed Oy on perustettu vuonna 1995. Se on osakeyhtiö, jonka kotipaikka on Järvenpää, ja pääasiallinen toimiala Autoliike. Yhtiön toimitusjohtaja on Keijo Tapani Lehtonen.
Yhtiön Finnspeed Oy liikevaihto oli 46 tuhatta ja tilikauden tulos 13 tuhatta. Liikevaihto nousi 58,6%. Liikevoittoprosentti oli 37%. Tiedot perustuvat yhtiön viimeisimpään tilinpäätökseen vuodelta 2021.</h3>
<p>more info....</p>
<h4>Free entry</h4>
<button type="button">Button <i class="fa-solid fa-gavel"></i></button>
</div>
<div class="col-2">
<div class="image-container">
<img class="mySlides active" src="https://d1yb6h7rvkcay2.cloudfront.net/f6/d7/91/b0/c4/a8/41/a1/a4/da/02/38/c8/de/dd/6c/f6d791b0-c4a8-41a1-a4da-0238c8dedd6c-large::r:0.jpg" style="width:50%">
<img class="mySlides" src="https://d1yb6h7rvkcay2.cloudfront.net/aa/8e/9c/02/aa/1d/48/f4/82/a1/63/f1/fa/c8/bb/52/aa8e9c02-aa1d-48f4-82a1-63f1fac8bb52-large::r:0.jpg" style="width:50%">
<img class="mySlides" src="https://d1yb6h7rvkcay2.cloudfront.net/98/5f/b3/11/a1/b5/49/0e/b4/71/82/1e/a4/c7/18/60/985fb311-a1b5-490e-b471-821ea4c71860-large::r:0.jpg" style="width:50%">
<img class="mySlides" src="https://d1yb6h7rvkcay2.cloudfront.net/1d/03/8b/7c/66/36/45/19/98/b2/17/1a/fc/be/b9/e5/1d038b7c-6636-4519-98b2-171afcbeb9e5-large::r:0.jpg" style="width:50%">
<button class="mySlides-leftButton" onclick="plusDivs(-1)">❮</button>
<button class="mySlides-rightButton" onclick="plusDivs(1)">❯</button>
<div class="mySlides-colorBox"></div>
</div>
</div>
</div>
</div>
<div class="box">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>
</div>
<script src="index.js"></script>
</body>
</html>
I want to make the popup show when score is equal to 6. and then when you press the button the page should reload. But i can't seem to make it work. i tried the function with the if-statement but it doens't work. so i don't know what to do or how to do it. so i would enjoy it if someone could help me out :)
//Function for the dropdown content
function dropdownTips() {
document.getElementById("mydropdown").classList.toggle("show");
}
window.addEventListener("click", function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdowncontent");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
});
//the game
// Declares global variables
let score = 0,
cardToMatch = null;
// Calls `flipCard` on any click
window.addEventListener("click", flipCard);
// Defines the click listener
function flipCard(event) {
// Identifies the card where the click happened
const card = event.target.closest(".card");
// Ignores irrelevant/invalid clicks
if (!card || card.classList.contains("open")) {
return;
}
// A valid click always opens the card
card.classList.add("open");
// If this is the 1st card of 2, remember it
if (cardToMatch === null) {
cardToMatch = card;
} else {
// If it's the 2nd card, compare types
// If they match...
if (card.dataset.type === cardToMatch.dataset.type) {
// ...Increment score and show it in the DOM
updateScoreDisplay(++score);
}
// If they don't...
else {
// ...Flip both cards back over
setTimeout((first, second) => {
first.classList.remove("open");
second.classList.remove("open");
}, 3000, card, cardToMatch);
// Either way, next click will be the 1st of 2
}
cardToMatch = null;
}
}
function updateScoreDisplay(newScore) {
// Syncs the user-displayed value w/ score
const element = document.querySelector(".score span");
element.textContent = newScore;
}
// popup section
let popup = document.querySelector(".popup");
popup = function() {
if (score === 6) {
popup.style.display ="block";
console.log("hello");
}
}
* {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
}
header {
background-color:#00005e;
height: 50px;
position: relative;
}
header h1 {
color: white;
position: absolute;
top: 10%;
left: 38%;
right: 40%;
width: 355px;
}
/*The 'tips?' button and the drop down content*/
header button {
display: inline-flex;
position:absolute;
align-items: center;
right: 2%;
top: 15%;
bottom: 15%;
padding: 10px 20px;
font-size: 20px;
background-color:white;
color: #00005e;
border-radius: 10px;
cursor: pointer;
border-color: transparent;
}
header button:hover {
opacity: 80%;
}
.dropdowncontent {
display: none;
position: absolute;
right: 0%;
top: 100%;
background-color:#010169;
min-width: 160px;
max-width: 400px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.808);
border-bottom-left-radius: 20px;
z-index: 100;
}
.dropdowncontent li {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.advise{
font-size: 19px;
}
.passwordtips {
font-size: 30px;
left: 20%;
}
.show {
display:block;
}
/*The link in the dropdowncontent*/
a {
text-decoration: underline;
color: white;
}
a:hover {
cursor: pointer;
}
/*The score counter*/
.score {
color: #01016e;
display: flex;
justify-content: center;
margin: 10px;
font-size: 30px;
}
/*The game section*/
.sectionOne {
max-width: 1100px;
height: 550px;
display: flex;
justify-content: space-around;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
border-radius: 7px;
border-color: #00005e;
border-style: solid;
border-width: 5px;
position: relative;
}
/*The sections content*/
.wrapper {
width: 99%;
height: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 183px;
margin-top: 7px;
}
.card{
background-color: #01016e;
color: white;
margin: 10px 10px;
height: 150px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
font-size: 0;
border-radius: 5px;
}
.card h2{
padding: 2px;
transform: scale(-1,1);
}
.card:hover {
cursor: pointer;
}
.open{
animation: flip .5s;
animation-fill-mode: forwards;
transform-style: preserve-3d;
}
#keyframes flip {
from {
background: #00005e;
font-size: 0;
}
to{
background: rgb(20, 73, 185);
font-size:17px;
transform: rotateY( 180deg );
}
}
/* pop up section */
.popup {
position: absolute;
background-color: white;
width: 700px;
height: 500px;
z-index: 100;
right: 50.5vh;
top: 14%;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.808);
border-radius: 8px;
display: none;
}
.congrats {
position: relative;
display: flex;
justify-content: center;
height: 40px;
top: 20%;
color: #00005e;
font-size: 40px;
}
.matches {
position: relative;
height: 40px;
top: 35%;
color: #00005e;
display: flex;
justify-content: center;
font-size: 30px;
}
.playAgain {
position: absolute;
height: 40px;
width: 150px;
top: 65%;
left: 40%;
cursor: pointer;
color: white;
background-color: #00005e;
border-style: none;
font-size: 20px;
border-radius: 5px;
}
/*The 'DID YOU KNOW' over the ticker*/
.facts {
display: flex;
justify-content: space-around;
margin-top: 15px;
font-size: 20px;
color: #00005e;
}
/*The facts ticker*/
.tcontainer {
max-width: 1100px;
margin-top: 20px;
overflow: hidden;
margin-left: auto;
margin-right: auto;
border-radius: 5px;
z-index: 1000;
}
.ticker-wrap {
width: 100%;
padding-left: 100%;
background-color: #00005e;
}
#keyframes ticker {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-100%, 0, 0); }
}
.ticker-move {
display: inline-block;
white-space: nowrap;
padding-right: 100%;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: ticker;
animation-duration: 55s;
}
.ticker-move:hover{
animation-play-state: paused;
}
.ticker-item{
display: inline-block;
padding-top: 5px;
padding-bottom: 2px;
padding-right: 3em;
color: white;
min-height: 40px;
font-size: 25px;
}
/*The pause button for the ticker*/
.pause {
display: flex;
justify-content: center;
margin-top: 10px;
}
.pausebutton {
padding: 5px;
border-radius: 3px;
background-color: #00005e;
color: white;
border-style: none;
cursor: pointer;
}
.pausebutton:hover {
background-color: #3c3b6e;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#700&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<title>The Password Game</title>
</head>
<body>
<header>
<h1>THE PASSWORD GAME</h1>
<div class="dropdown">
<button onclick="dropdownTips()" class="dropbtn">TIPS?</button>
<div class="dropdowncontent" id="mydropdown" >
<ul>
<li class="passwordtips">Tips for making strong passwords: </li>
<li class="advise">1. Use 16 characters or more (use both uppercase and lowercase letters, number and symbols.)</li>
<li class="advise">2. Never use the same password twice.</li>
<li class="advise">3. Use a password manager.</li>
<li class="advise">4. Don't write your passwords down on paper.</li>
<li class="advise">5. Don't share your passwords with others.</li>
<li class="advise">6. Change your password after a breach.</li>
<li class="advise">7. Sign up for data breach notifications. (like haveibeenpwned.com).</li>
<li class="advise">8. Check your accounts regularly for any suspicious activity. </li>
</ul>
</div>
</div>
</header>
<div class="score">Score:<span> 0</span></div>
<section class="sectionOne">
<div class="wrapper" id="card-deck">
<div class="card" data-type="1"><h2>What information should you NEVER use in a password?</h2></div>
<div id="answerSix" class="card" data-type="6"><h2>1 log in</h2></div>
<div id="cardThree" class="card" data-type="3"><h2>When should you ALWAYS change your password?</h2></div>
<div id="anserFive" class="card" data-type="5"><h2>suspicious activity</h2></div>
<div id="cardTwo" class="card" data-type="2"><h2>Who is it okay to tell your password to?</h2></div>
<div id="answerFour" class="card" data-type="4"><h2>16</h2></div>
<div id="answerThree" class="card" data-type="3"><h2>After a data breach</h2></div>
<div id="answerTwo" class="card" data-type="2"><h2>No one</h2></div>
<div id="CardSix" class="card" data-type="6"><h2>For how many log ins is it okay to use the same password?</h2></div>
<div id="cardFour" class="card" data-type="4"><h2>How many characters should you AT LEAST use in a password?</h2></div>
<div class="card" data-card="firstSet" data-type="1"><h2>Name and Birthday</h2></div>
<div id="cardFive" class="card" data-type="5"><h2>What should you regularly look for in your accounts?</h2></div>
</div>
</section>
<section class="popup">
<h3 class="congrats">Congratulations!</h3>
<h3 class="matches">You got 6/6 matches</h3>
<button class="playAgain">Play again?</button>
</section>
<div class="facts">
<h2>DID YOU KNOW?</h2>
</div>
<div class="tcontainer"><div class="ticker-wrap"><div class="ticker-move">
<div class="ticker-item">There is a hacker attack every 39 seconds.</div>
<div class="ticker-item">90% of passwords can be cracked in less than 6 hours.</div>
<div class="ticker-item">80% of hacking related breaches are linked to insufficient passwords.</div>
<div class="ticker-item">59% use their name or birthday in their password.</div>
<div class="ticker-item">6.850.000 passwords are getting hacked each day.</div>
</div></div></div>
<div class="pause">
<p>Hold your mouse over to pause</p>
</div>
<script src="javascript/javascript.js" ></script>
</body>
</html>
you have this code which doesnt run when score is incremented
popup = function() {
if (score === 6) {
popup.style.display ="block";
console.log("hello");
}
}
so i've created a function to check the score like this
let popup = document.querySelector("#popup");
function showPopup() {
if (score === 6) {
popup.style.display ="block";
console.log("hello");
}
}
And call the showPopup function when score is added like this
if (card.dataset.type === cardToMatch.dataset.type) {
// ...Increment score and show it in the DOM
updateScoreDisplay(++score);
showPopup();
}
full code :
//Function for the dropdown content
let popup = document.querySelector("#popup");
function showPopup() {
if (score > 0) {
popup.style.display ="block";
console.log("hello");
}
}
function dropdownTips() {
document.getElementById("mydropdown").classList.toggle("show");
}
window.addEventListener("click", function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdowncontent");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
});
//the game
// Declares global variables
let score = 0,
cardToMatch = null;
// Calls `flipCard` on any click
window.addEventListener("click", flipCard);
// Defines the click listener
function flipCard(event) {
// Identifies the card where the click happened
const card = event.target.closest(".card");
// Ignores irrelevant/invalid clicks
if (!card || card.classList.contains("open")) {
return;
}
// A valid click always opens the card
card.classList.add("open");
// If this is the 1st card of 2, remember it
if (cardToMatch === null) {
cardToMatch = card;
} else {
// If it's the 2nd card, compare types
// If they match...
if (card.dataset.type === cardToMatch.dataset.type) {
// ...Increment score and show it in the DOM
updateScoreDisplay(++score);
showPopup();
}
// If they don't...
else {
// ...Flip both cards back over
setTimeout((first, second) => {
first.classList.remove("open");
second.classList.remove("open");
}, 3000, card, cardToMatch);
// Either way, next click will be the 1st of 2
}
cardToMatch = null;
}
}
function updateScoreDisplay(newScore) {
// Syncs the user-displayed value w/ score
const element = document.querySelector(".score span");
element.textContent = newScore;
}
* {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
}
header {
background-color:#00005e;
height: 50px;
position: relative;
}
header h1 {
color: white;
position: absolute;
top: 10%;
left: 38%;
right: 40%;
width: 355px;
}
/*The 'tips?' button and the drop down content*/
header button {
display: inline-flex;
position:absolute;
align-items: center;
right: 2%;
top: 15%;
bottom: 15%;
padding: 10px 20px;
font-size: 20px;
background-color:white;
color: #00005e;
border-radius: 10px;
cursor: pointer;
border-color: transparent;
}
header button:hover {
opacity: 80%;
}
.dropdowncontent {
display: none;
position: absolute;
right: 0%;
top: 100%;
background-color:#010169;
min-width: 160px;
max-width: 400px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.808);
border-bottom-left-radius: 20px;
z-index: 100;
}
.dropdowncontent li {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.advise{
font-size: 19px;
}
.passwordtips {
font-size: 30px;
left: 20%;
}
.show {
display:block;
}
/*The link in the dropdowncontent*/
a {
text-decoration: underline;
color: white;
}
a:hover {
cursor: pointer;
}
/*The score counter*/
.score {
color: #01016e;
display: flex;
justify-content: center;
margin: 10px;
font-size: 30px;
}
/*The game section*/
.sectionOne {
max-width: 1100px;
height: 550px;
display: flex;
justify-content: space-around;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
border-radius: 7px;
border-color: #00005e;
border-style: solid;
border-width: 5px;
position: relative;
}
/*The sections content*/
.wrapper {
width: 99%;
height: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 183px;
margin-top: 7px;
}
.card{
background-color: #01016e;
color: white;
margin: 10px 10px;
height: 150px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
font-size: 0;
border-radius: 5px;
}
.card h2{
padding: 2px;
transform: scale(-1,1);
}
.card:hover {
cursor: pointer;
}
.open{
animation: flip .5s;
animation-fill-mode: forwards;
transform-style: preserve-3d;
}
#keyframes flip {
from {
background: #00005e;
font-size: 0;
}
to{
background: rgb(20, 73, 185);
font-size:17px;
transform: rotateY( 180deg );
}
}
/* pop up section */
#popup {
position: absolute;
background-color: white;
width: 700px;
height: 500px;
z-index: 100;
right: 50.5vh;
top: 14%;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.808);
border-radius: 8px;
display: none;
}
.congrats {
position: relative;
display: flex;
justify-content: center;
height: 40px;
top: 20%;
color: #00005e;
font-size: 40px;
}
.matches {
position: relative;
height: 40px;
top: 35%;
color: #00005e;
display: flex;
justify-content: center;
font-size: 30px;
}
.playAgain {
position: absolute;
height: 40px;
width: 150px;
top: 65%;
left: 40%;
cursor: pointer;
color: white;
background-color: #00005e;
border-style: none;
font-size: 20px;
border-radius: 5px;
}
/*The 'DID YOU KNOW' over the ticker*/
.facts {
display: flex;
justify-content: space-around;
margin-top: 15px;
font-size: 20px;
color: #00005e;
}
/*The facts ticker*/
.tcontainer {
max-width: 1100px;
margin-top: 20px;
overflow: hidden;
margin-left: auto;
margin-right: auto;
border-radius: 5px;
z-index: 1000;
}
.ticker-wrap {
width: 100%;
padding-left: 100%;
background-color: #00005e;
}
#keyframes ticker {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-100%, 0, 0); }
}
.ticker-move {
display: inline-block;
white-space: nowrap;
padding-right: 100%;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: ticker;
animation-duration: 55s;
}
.ticker-move:hover{
animation-play-state: paused;
}
.ticker-item{
display: inline-block;
padding-top: 5px;
padding-bottom: 2px;
padding-right: 3em;
color: white;
min-height: 40px;
font-size: 25px;
}
/*The pause button for the ticker*/
.pause {
display: flex;
justify-content: center;
margin-top: 10px;
}
.pausebutton {
padding: 5px;
border-radius: 3px;
background-color: #00005e;
color: white;
border-style: none;
cursor: pointer;
}
.pausebutton:hover {
background-color: #3c3b6e;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#700&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<title>ok</title>
</head>
<body>
<header>
<h1>THE PASSWORD GAME</h1>
<div class="dropdown">
<button onclick="dropdownTips()" class="dropbtn">TIPS?</button>
<div class="dropdowncontent" id="mydropdown" >
<ul>
<li class="passwordtips">Tips for making strong passwords: </li>
<li class="advise">1. Use 16 characters or more (use both uppercase and lowercase letters, number and symbols.)</li>
<li class="advise">2. Never use the same password twice.</li>
<li class="advise">3. Use a password manager.</li>
<li class="advise">4. Don't write your passwords down on paper.</li>
<li class="advise">5. Don't share your passwords with others.</li>
<li class="advise">6. Change your password after a breach.</li>
<li class="advise">7. Sign up for data breach notifications. (like haveibeenpwned.com).</li>
<li class="advise">8. Check your accounts regularly for any suspicious activity. </li>
</ul>
</div>
</div>
</header>
<div class="score">Score:<span> 0</span></div>
<section class="sectionOne">
<div class="wrapper" id="card-deck">
<div class="card" data-type="1"><h2>What information should you NEVER use in a password?</h2></div>
<div id="answerSix" class="card" data-type="6"><h2>1 log in</h2></div>
<div id="cardThree" class="card" data-type="3"><h2>When should you ALWAYS change your password?</h2></div>
<div id="anserFive" class="card" data-type="5"><h2>suspicious activity</h2></div>
<div id="cardTwo" class="card" data-type="2"><h2>Who is it okay to tell your password to?</h2></div>
<div id="answerFour" class="card" data-type="4"><h2>16</h2></div>
<div id="answerThree" class="card" data-type="3"><h2>After a data breach</h2></div>
<div id="answerTwo" class="card" data-type="2"><h2>No one</h2></div>
<div id="CardSix" class="card" data-type="6"><h2>For how many log ins is it okay to use the same password?</h2></div>
<div id="cardFour" class="card" data-type="4"><h2>How many characters should you AT LEAST use in a password?</h2></div>
<div class="card" data-card="firstSet" data-type="1"><h2>Name and Birthday</h2></div>
<div id="cardFive" class="card" data-type="5"><h2>What should you regularly look for in your accounts?</h2></div>
</div>
</section>
<section id="popup">
<h3 class="congrats">Congratulations!</h3>
<h3 class="matches">You got 6/6 matches</h3>
<button class="playAgain">Play again?</button>
</section>
<div class="facts">
<h2>DID YOU KNOW?</h2>
</div>
<div class="tcontainer"><div class="ticker-wrap"><div class="ticker-move">
<div class="ticker-item">There is a hacker attack every 39 seconds.</div>
<div class="ticker-item">90% of passwords can be cracked in less than 6 hours.</div>
<div class="ticker-item">80% of hacking related breaches are linked to insufficient passwords.</div>
<div class="ticker-item">59% use their name or birthday in their password.</div>
<div class="ticker-item">6.850.000 passwords are getting hacked each day.</div>
</div></div></div>
<div class="pause">
<p>Hold your mouse over to pause</p>
</div>
</body>
</html>
And i changed the popup section to id instead of class like this
<section id="popup">
This should work:
//Function for the dropdown content
function dropdownTips() {
document.getElementById("mydropdown").classList.toggle("show");
}
window.addEventListener("click", function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdowncontent");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
});
//the game
// Declares global variables
let score = 0,
cardToMatch = null;
// Calls `flipCard` on any click
window.addEventListener("click", flipCard);
// Defines the click listener
function flipCard(event) {
// Identifies the card where the click happened
const card = event.target.closest(".card");
// Ignores irrelevant/invalid clicks
if (!card || card.classList.contains("open")) {
return;
}
// A valid click always opens the card
card.classList.add("open");
// If this is the 1st card of 2, remember it
if (cardToMatch === null) {
cardToMatch = card;
} else {
// If it's the 2nd card, compare types
// If they match...
if (card.dataset.type === cardToMatch.dataset.type) {
// ...Increment score and show it in the DOM
updateScoreDisplay(++score);
}
// If they don't...
else {
// ...Flip both cards back over
setTimeout((first, second) => {
first.classList.remove("open");
second.classList.remove("open");
}, 3000, card, cardToMatch);
// Either way, next click will be the 1st of 2
}
cardToMatch = null;
}
}
function updateScoreDisplay(newScore) {
// Syncs the user-displayed value w/ score
const element = document.querySelector(".score span");
element.textContent = newScore;
}
// popup section
setInterval(function() {if (score==6) {document.getElementById("popup").style.display = "block";}},1000);
* {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
}
header {
background-color:#00005e;
height: 50px;
position: relative;
}
header h1 {
color: white;
position: absolute;
top: 10%;
left: 38%;
right: 40%;
width: 355px;
}
/*The 'tips?' button and the drop down content*/
header button {
display: inline-flex;
position:absolute;
align-items: center;
right: 2%;
top: 15%;
bottom: 15%;
padding: 10px 20px;
font-size: 20px;
background-color:white;
color: #00005e;
border-radius: 10px;
cursor: pointer;
border-color: transparent;
}
header button:hover {
opacity: 80%;
}
.dropdowncontent {
display: none;
position: absolute;
right: 0%;
top: 100%;
background-color:#010169;
min-width: 160px;
max-width: 400px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.808);
border-bottom-left-radius: 20px;
z-index: 100;
}
.dropdowncontent li {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.advise{
font-size: 19px;
}
.passwordtips {
font-size: 30px;
left: 20%;
}
.show {
display:block;
}
/*The link in the dropdowncontent*/
a {
text-decoration: underline;
color: white;
}
a:hover {
cursor: pointer;
}
/*The score counter*/
.score {
color: #01016e;
display: flex;
justify-content: center;
margin: 10px;
font-size: 30px;
}
/*The game section*/
.sectionOne {
max-width: 1100px;
height: 550px;
display: flex;
justify-content: space-around;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
border-radius: 7px;
border-color: #00005e;
border-style: solid;
border-width: 5px;
position: relative;
}
/*The sections content*/
.wrapper {
width: 99%;
height: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 183px;
margin-top: 7px;
}
.card{
background-color: #01016e;
color: white;
margin: 10px 10px;
height: 150px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
font-size: 0;
border-radius: 5px;
}
.card h2{
padding: 2px;
transform: scale(-1,1);
}
.card:hover {
cursor: pointer;
}
.open{
animation: flip .5s;
animation-fill-mode: forwards;
transform-style: preserve-3d;
}
#keyframes flip {
from {
background: #00005e;
font-size: 0;
}
to{
background: rgb(20, 73, 185);
font-size:17px;
transform: rotateY( 180deg );
}
}
/* pop up section */
.popup {
position: absolute;
background-color: white;
width: 700px;
height: 500px;
z-index: 100;
right: 50.5vh;
top: 14%;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.808);
border-radius: 8px;
display: none;
}
.congrats {
position: relative;
display: flex;
justify-content: center;
height: 40px;
top: 20%;
color: #00005e;
font-size: 40px;
}
.matches {
position: relative;
height: 40px;
top: 35%;
color: #00005e;
display: flex;
justify-content: center;
font-size: 30px;
}
.playAgain {
position: absolute;
height: 40px;
width: 150px;
top: 65%;
left: 40%;
cursor: pointer;
color: white;
background-color: #00005e;
border-style: none;
font-size: 20px;
border-radius: 5px;
}
/*The 'DID YOU KNOW' over the ticker*/
.facts {
display: flex;
justify-content: space-around;
margin-top: 15px;
font-size: 20px;
color: #00005e;
}
/*The facts ticker*/
.tcontainer {
max-width: 1100px;
margin-top: 20px;
overflow: hidden;
margin-left: auto;
margin-right: auto;
border-radius: 5px;
z-index: 1000;
}
.ticker-wrap {
width: 100%;
padding-left: 100%;
background-color: #00005e;
}
#keyframes ticker {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-100%, 0, 0); }
}
.ticker-move {
display: inline-block;
white-space: nowrap;
padding-right: 100%;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: ticker;
animation-duration: 55s;
}
.ticker-move:hover{
animation-play-state: paused;
}
.ticker-item{
display: inline-block;
padding-top: 5px;
padding-bottom: 2px;
padding-right: 3em;
color: white;
min-height: 40px;
font-size: 25px;
}
/*The pause button for the ticker*/
.pause {
display: flex;
justify-content: center;
margin-top: 10px;
}
.pausebutton {
padding: 5px;
border-radius: 3px;
background-color: #00005e;
color: white;
border-style: none;
cursor: pointer;
}
.pausebutton:hover {
background-color: #3c3b6e;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#700&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<title>The Password Game</title>
</head>
<body>
<header>
<h1>THE PASSWORD GAME</h1>
<div class="dropdown">
<button onclick="dropdownTips()" class="dropbtn">TIPS?</button>
<div class="dropdowncontent" id="mydropdown" >
<ul>
<li class="passwordtips">Tips for making strong passwords: </li>
<li class="advise">1. Use 16 characters or more (use both uppercase and lowercase letters, number and symbols.)</li>
<li class="advise">2. Never use the same password twice.</li>
<li class="advise">3. Use a password manager.</li>
<li class="advise">4. Don't write your passwords down on paper.</li>
<li class="advise">5. Don't share your passwords with others.</li>
<li class="advise">6. Change your password after a breach.</li>
<li class="advise">7. Sign up for data breach notifications. (like haveibeenpwned.com).</li>
<li class="advise">8. Check your accounts regularly for any suspicious activity. </li>
</ul>
</div>
</div>
</header>
<div class="score">Score:<span> 0</span></div>
<section class="sectionOne">
<div class="wrapper" id="card-deck">
<div class="card" data-type="1"><h2>What information should you NEVER use in a password?</h2></div>
<div id="answerSix" class="card" data-type="6"><h2>1 log in</h2></div>
<div id="cardThree" class="card" data-type="3"><h2>When should you ALWAYS change your password?</h2></div>
<div id="anserFive" class="card" data-type="5"><h2>suspicious activity</h2></div>
<div id="cardTwo" class="card" data-type="2"><h2>Who is it okay to tell your password to?</h2></div>
<div id="answerFour" class="card" data-type="4"><h2>16</h2></div>
<div id="answerThree" class="card" data-type="3"><h2>After a data breach</h2></div>
<div id="answerTwo" class="card" data-type="2"><h2>No one</h2></div>
<div id="CardSix" class="card" data-type="6"><h2>For how many log ins is it okay to use the same password?</h2></div>
<div id="cardFour" class="card" data-type="4"><h2>How many characters should you AT LEAST use in a password?</h2></div>
<div class="card" data-card="firstSet" data-type="1"><h2>Name and Birthday</h2></div>
<div id="cardFive" class="card" data-type="5"><h2>What should you regularly look for in your accounts?</h2></div>
</div>
</section>
<section class="popup" id="popup">
<h3 class="congrats">Congratulations!</h3>
<h3 class="matches">You got 6/6 matches</h3>
<button class="playAgain">Play again?</button>
</section>
<div class="facts">
<h2>DID YOU KNOW?</h2>
</div>
<div class="tcontainer"><div class="ticker-wrap"><div class="ticker-move">
<div class="ticker-item">There is a hacker attack every 39 seconds.</div>
<div class="ticker-item">90% of passwords can be cracked in less than 6 hours.</div>
<div class="ticker-item">80% of hacking related breaches are linked to insufficient passwords.</div>
<div class="ticker-item">59% use their name or birthday in their password.</div>
<div class="ticker-item">6.850.000 passwords are getting hacked each day.</div>
</div></div></div>
<div class="pause">
<p>Hold your mouse over to pause</p>
</div>
<script src="javascript/javascript.js" ></script>
</body>
</html>
The reason why your code wasn't working was because the code you had only checked if the score was 6 at the start of the game. I fixed this by using the function setInterval which checked if the user had finished the game every second.
More Explanations
If you would like to learn more about the setInterval function, visit:
https://www.w3schools.com/jsref/met_win_setinterval.asp
I just finished my javascript course in somewhere in online, and tried to make my own small project 'todolist'.
when user put work into and click , list should be added, but it shows a white and clear page.. I really can't see what's the problem in here.
I tested using console.log() but It shows me what I want, but it doesn't works in tag.
Here is my Code :
input[type=text] {
width: 500px;
height: 40px;
float: left;
}
#input_table {
display: block;
margin-left: auto;
margin-right: auto;
}
#input_box {
text-align: center;
padding-bottom: 50px;
background-color: crimson;
}
.align_center {
display: inline-block;
text-align: center;
}
.submit_box {
padding: 10px;
width: 50px;
height: 25px;
background: #d9d9d9;
color: #555;
float: left;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border-radius: 0;
text-align: center;
}
body {
background-color: gold;
}
.input_text {
float: left;
}
.store_ul {
margin: 0;
padding: 0;
text-align: right;
}
.oneLine {
font-size: 30px;
width: 100%;
height: 50px;
background-color: blue;
}
.close_box {
padding: 5px;
width: 50px;
height: 25px;
color: #555;
cursor: pointer;
}
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="main.css">
<title>ToDoList</title>
</head>
<body>
<script>
var count = 50;
var i = 0;
var tag = '';
</script>
<div id="input_table">
<div id="input_box">
<h1 style="color:white">My To Do List</h1>
<div class="align_center">
<input class="text_box" type="text" value="Title...">
<span class="submit_box" onclick="write()">Add</span>
</div>
</div>
</div>
<div class="output_table">
<div class="store_box">
<ul class="store_ul">
</ul>
</div>
</div>
<script>
function write() {
var text = document.querySelector('.text_box').value;
console.log(text);
if (i < 50) {
tag += '<div class="oneLine"><li class="input_text">' + text + '</li><span class="close_box">x</span></div>';
document.querySelector('.store_ul').innerHTML = tag;
console.log(tag);
i++;
} else {
alert("lists can't be added more than 50 works");
}
}
</script>
</body>
write will refer to the global function document.write, which will completely replace the page if the page has already been loaded. Use a different function name, perhaps "addTodo":
It would also probably be better to use a placeholder rather than a hard-coded value of Title... in the input box:
var count = 50;
var i = 0;
var tag = '';
function addTodo() {
var text = document.querySelector('.text_box').value;
console.log(text);
if (i < 50) {
tag += '<div class="oneLine"><li class="input_text">' + text + '</li><span class="close_box">x</span></div>';
document.querySelector('.store_ul').innerHTML = tag;
console.log(tag);
i++;
} else {
alert("lists can't be added more than 50 works");
}
}
input[type=text] {
width: 500px;
height: 40px;
float: left;
}
#input_table {
display: block;
margin-left: auto;
margin-right: auto;
}
#input_box {
text-align: center;
padding-bottom: 50px;
background-color: crimson;
}
.align_center {
display: inline-block;
text-align: center;
}
.submit_box {
padding: 10px;
width: 50px;
height: 25px;
background: #d9d9d9;
color: #555;
float: left;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border-radius: 0;
text-align: center;
}
body {
background-color: gold;
}
.input_text {
float: left;
}
.store_ul {
margin: 0;
padding: 0;
text-align: right;
}
.oneLine {
font-size: 30px;
width: 100%;
height: 50px;
background-color: blue;
}
.close_box {
padding: 5px;
width: 50px;
height: 25px;
color: #555;
cursor: pointer;
}
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="main.css">
<title>ToDoList</title>
</head>
<body>
<script>
</script>
<div id="input_table">
<div id="input_box">
<h1 style="color:white">My To Do List</h1>
<div class="align_center">
<input class="text_box" type="text" placeholder="Title...">
<span class="submit_box" onclick="addTodo()">Add</span>
</div>
</div>
</div>
<div class="output_table">
<div class="store_box">
<ul class="store_ul">
</ul>
</div>
</div>
<script>
</script>
</body>
You have a name conflict and the native method overrides yours in the global scope. In the example below you can see it is document.write.
<button onclick="console.log(write)">console</button>
<button onclick="console.log(write('hi'))">Hi</button>
when I click on the menu Icon, sometimes it works but after refreshing 3 or 4 times it stops. not working in Chrome at all. am i missing something. Please help.
$(function () {
const menu = $(".fa-3x");
const list = $(".show");
const main = $("#firstpage");
const last = $("#secondpage");
menu.on("click", _=> {
$(".show").toggleClass("hide");
});
});
Mock-up Site here - codepen
The query selector is wrong. $(".show").toggleClass("hide");
It could be better to use #menulinks to access related lu element.
$("#menulinks").on("click", _=> {
$("#menulinks ul").toggleClass("hide");
});
Demo
/* jshint esversion:6 */
/* global $ */
$(function () {
$("#menulinks").on("click", _=> {
$("#menulinks ul").toggleClass("hide");
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
/* makes the image fill entire screen*/
}
.name,
.scroller {
position: absolute;
left: 50%;
text-align: center;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
/* makes text in perfect mid*/
}
h1 {
font-family: "Inconsolata", monospace;
text-transform: uppercase;
}
.name {
top: 45%;
}
.show {
width: 130px;
background: rgba(3, 4, 32, 0.54);
position: relative;
left: 43px;
visibility: visible;
opacity: 1;
z-index: 4;
transition: 0.3s;
}
.fa-3x:hover,
#arrow:hover {
cursor: pointer;
opacity: 0.75;
}
.hidden li:hover a,
.name,
a:hover {
background: linear-gradient(to right, #215AF6, #F2359D);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-decoration: none;
}
.info {
font-size: 350%;
padding: 0;
margin-bottom: 20px;
letter-spacing: 5px;
}
.description {
letter-spacing: 4px;
word-spacing: 5px;
}
header {
background: linear-gradient(rgba(17, 20, 42, 0.95), rgba(17, 20, 42, 0.95)), url("https://images.pexels.com/photos/399636/pexels-photo-399636.jpeg?w=940&h=650&auto=compress&cs=tinysrgb") center;
background-attachment: fixed;
background-size: cover;
text-transform: uppercase;
height: 100vh;
color: white;
}
#secondpage {
background-size: cover;
height: 100vh;
}
div.scroller {
position: absolute;
top: 95%;
left: 50%;
}
.scrolltext {
font-size: 10px;
letter-spacing: 3px;
padding-top: 0;
}
.material-icons.md-100 {
font-size: 100px;
margin-top: -20px;
}
#menulinks {
text-align: left;
padding: 20px;
}
nav p {
font-size: 65%;
letter-spacing: 4px;
}
li a {
text-decoration: none;
color: white;
padding-left: 10px;
font-size: 90%;
}
ul {
list-style: none;
}
li {
padding: 5px;
}
.hide {
opacity: 0;
visibility: hidden;
}
.show li:hover {
background: rgba(3, 4, 32, 1);
padding-left: 12px;
transition: 0.3s;
}
.dp {
max-width: 400px;
max-height: 200px;
filter: grayscale(100%);
}
#bottom {
max-height: 110px;
max-width: 350px;
overflow: hidden;
margin: 0 auto;
margin-top: 230px;
margin-bottom: 50px;
text-align: center;
}
#summary,
#greeting {
max-width: 400px;
margin: 0 auto;
text-align: center;
margin-top: 20px;
}
#greeting {
letter-spacing: 10px;
word-spacing: 10px;
}
#summarytext,
#span {
line-height: 150%;
font-size: 20px;
}
#span {
margin-top: 30px;
}
.fa-2x {
opacity: 0.1;
}
<html lang="en">
<head>
<title>Brian Profile</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<header id="firstpage">
<nav id="menulinks">
<i class="fas fa-align-justify fa-3x"></i>
<p>menu</p>
<ul class="hide">
<li id="firstopt">About</li>
<li id="secondopt">Experience</li>
<li id="thirdopt">Portfolio</li>
<li id="fourthopt">Contact</li>
</ul>
</nav>
<div class="name">
<h1 class="info">Hello, I'm Brian</h1>
<p class="description">an aspiring web developer</p>
</div>
<div class="scroller">
<p class="scrolltext"> SCROLL DOWN</p>
<i class="material-icons md-100" id="arrow">expand_more</i>
</div>
</header>
<footer id="secondpage">
<div id="bottom">
<p>
<img src="https://dl.dropbox.com/s/3c0xlv56hhb1ed7/2013-07-20%2021.58.43.jpg?=raw1" alt="InstaPic" class="dp"></p>
</div>
<div id="greeting">
<span>HI THERE</span>
<p><i class="far fa-window-minimize fa-2x"></i></p>
</div>
<div id="summary">
<p id="summarytext">
I am a web developer based in London. With a growing Portfolio that is constantly updated, I have a passion for all things 'web'.</p>
<p id="span"><span>For more information visit my Blog.</span>
</p>
</div>
</footer>
<script src="scripts.js"></script>
</body>
</html>
Recently, my friend helped me fix a background overlay problem. I had an issue where if the dialog height extended beyond the original website background, it would cut off the overlay right in the middle. His fix solved it.
But now I have a minor but annoying problem. Every time I open a very long dialog, then a short one, the stretched scroll bars from the longer remains. Like when I open the short afterwards, I can scroll down way beyond the background like with the longer, but I can only see the overlay. I don’t think the settings are unloading properly once the dialog is closed.
Is there a way around this? Thank you.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/global.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="Meta" -->
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="doctitle" -->
<title>Ricky Tsang | Book | Bonus Features</title>
<!-- InstanceEndEditable -->
<link href="../../css/default.css" type="text/css" rel="stylesheet" />
<link href="../../css/plugins/jquery.jscrollpane.css" type="text/css" rel="stylesheet" />
<link href="../../css/plugins/custom-theme/jquery-ui-1.8.12.custom.css" type="text/css" rel="stylesheet" />
<link rel="shortcut icon" type="image/x-icon" href="http://www.dearricky.com/_rickytsang-ca/favicon.ico">
<!--[if IE 7]>
<link href="../css/ie7.css" type="text/css" rel="stylesheet" />
<![endif]-->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<style>
a img {
border:0
}
</style>
<noscript>
<style>
#header #inner { width: 820px; }
#mainmenu { visibility: visible; }
</style>
</noscript>
</head>
<body class="oneColElsCtrHdr">
<div id="header">
<div id="top">
<img src="../../images/logo.png" border="0" usemap="#Map" class="Logo" />
<map name="Map" id="Map">
<area shape="circle" coords="85,11,3" href="../../bird/" />
</map>
</div>
<div id="inner">
<div id="mainmenu">
<ul>
<li>
HOME
</li>
<li>
RICKY
<div class="sub">
<ul>
<li>About Ricky</li>
<li>Disability</li>
<li>Writing</li>
<li>Questions & Answers</li>
</ul>
<div class="clear"></div>
</div>
</li>
<li>
JOURNAL
</li>
<li>
ADVICE
<div class="sub">
<ul>
<li>4 Steps To Mending A Broken Heart</li>
</ul>
<div class="clear"></div>
</div>
</li>
<li>
BOOK
<div class="sub">
<ul>
<li>Ridiculous</li>
<li>Excerpts</li>
<li>Bonus Features</li>
<li>Where To Buy</li>
</ul>
<div class="clear"></div>
</div>
</li>
<li>
MUSIC
</li>
<li>
FORUM
</li>
<li>
INFORMATION
<div class="sub">
<ul>
<li>News</li>
<li>Contact</li>
<li>Links</li>
<li>Website</li>
</ul>
<div class="clear"></div>
</div>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<div id="container">
<!-- InstanceBeginEditable name="AboveContainer" -->
<!-- InstanceEndEditable -->
<div id="topContent"></div>
<div id="mainContent">
<!-- InstanceBeginEditable name="MainContent" -->
<div id="fixedHeightContent">
<h1 align="justify">Bonus Features</h1>
<p><strong><em>Ridiculous: The Mindful Nonsense of Ricky’s Brain</em> is jam-packed with hundreds of pages of writing, but there are always limitations when it comes to books. Below are some extras that readers may find entertaining, kind of like a DVD!</strong></p>
<h2><strong><u>From The Book (with excerpts)</u></strong></h2>
<p><strong>The Girl Who Saved My Life</strong><br />
A true story about an amazing girl who stole my heart. Includes a photo and video of interesting items.</p>
<p><strong>Ricky’s Adventures In Bikini Land</strong><br />
A satirical recount of my “adventures” in Niagara Falls. Includes a window scene photo from the room where my family and I stayed.</p>
<p><strong>The Brain Behind His Words</strong><br />
A brutally honest narrative of the things that go on inside my head. Includes a full-size photo of myself that was an inspiration for the piece.</p>
<p><strong>Ricky’s Moments Of WTF?!</strong><br />
About the stranger happenings in the life of yours truly. Includes a few photos of… embarrassing things.</p>
<p><strong>Appreciating Mothers: The How-To Guide</strong><br />
A comical yet hopefully endearing guide on how to appreciate mothers. Includes a poem I wrote about the uterus.</p>
<h2><strong><u>Pages That Didn’t Make It</u></strong>
</h2>
<p><strong>Ricky’s Romantic Analogies</strong><br />
No matter how much I edited this entry, it continued to remain… corny. Though, it did become a pivotal part of the romantic ideas for my following writings.</p>
<p><strong>Monkey See, Monkey Do</strong><br />
This one seemed a little out of place for the book, despite the title. It also had too many photos that only look good in colour.</p>
</div>
<!-- InstanceEndEditable -->
</div>
<div id="bottomContent"></div>
</div>
<div id="footer">
<div class="social">
<ul>
<li><img src="../../images/icons/facebook.png" /></li>
<li><img src="../../images/icons/twitter.png" /></li>
</ul>
</div>
<div class="copyright">
Copyright © 2011 Ricky Wai Kit Tsang. All rights reserved.
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="../../scripts/global.js"></script>
<script type="text/javascript" src="../../scripts/plugins/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="../../scripts/plugins/jquery-ui-1.8.12.custom.min.js"></script>
<script type="text/javascript" src="../../scripts/plugins/jquery.hoverIntent.js"></script>
<script type="text/javascript" src="../../scripts/plugins/jquery.mousewheel.js"></script>
<script type="text/javascript" src="../../scripts/plugins/jquery.jscrollpane.js"></script>
<script type="text/javascript">
$(function() {
$("#fixedHeightContent").jScrollPane({
showArrows: true
});
});
</script>
<!-- InstanceBeginEditable name="Scripts" -->
<!-- InstanceEndEditable -->
</body>
<!-- InstanceEnd --></html>
CSS:
body {
background: url("../images/backgrounds/glowing-clouds.jpg") no-repeat scroll center 130px #000;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1 {
color: #000;
margin-bottom: 20px;
margin-top: 0px;
}
h2 {
color: #000;
font-size: 16px;
}
p {
font-size: 14px;
line-height: 18px;
margin-bottom: 10px;
margin-top: 0px;
}
.clear {
clear: both;
}
#container {
width: 880px;
margin: 20px auto 0px auto;
text-align: left;
}
#topContent {
background-image: url("../images/backgrounds/slider-top.png");
background-repeat: no-repeat;
height: 15px;
margin-top: 40px;
width: 880px;
}
#mainContent {
background: transparent url("../images/backgrounds/slider-body.png") repeat-y scroll 0 0;
hasLayout: false;
padding: 1px 15px;
width: 850px;
}
#fixedHeightContent {
height: 440px;
outline: none;
overflow: auto;
padding: 20px;
width: 810px;
}
#bottomContent {
background-image: url("../images/backgrounds/slider-bottom.png");
background-repeat: no-repeat;
height: 15px;
width: 880px;
}
#floatContent {
overflow: hidden} /**clears floats**/
.RightCaptions {/** container **/
float: right;
width: auto;
height:auto;
border: thin silver solid;
margin: 0.5em;
padding: 0.5em;
}
.LeftCaptions {/** container **/
float: left;
width: auto;
height:auto;
border: thin silver solid;
margin: 0.5em;
padding: 0.5em;
}
.RightCaptions p, .LeftCaptions p {/** text captions **/
text-align: center;
font-style: italic;
font-size: small;
text-indent: 0;
}
#header {
margin: 0px 0px 10px;
position: relative;
}
#header #top {
background-color: #000;
margin: 0px auto;
}
#header #inner {
margin: 0px auto;
width: 820px;
}
#header img.Logo {
padding: 25px 0px 20px 0px;
position: relative;
}
#mainmenu {
float: right;
}
#mainmenu ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#mainmenu ul li {
display: block;
float: left;
}
#mainmenu ul li a {
color: #fff;
display: block;
font-size: 14px;
font-weight: bold;
height: 35px;
line-height: 35px;
padding: 0px 15px;
}
#mainmenu ul li a:hover {
color: #999;
text-decoration: none;
}
#mainmenu ul li a.parent {
background: transparent url("../images/menu/menu-down.png") no-repeat center right;
margin-right: 15px;
}
#mainmenu .sub {
border: solid 1px #fff;
display: none;
position: absolute;
z-index: 1000;
}
#mainmenu .sub ul {
margin: 0px;
}
#mainmenu .sub li {
border: none;
display: block;
float: left;
height: auto;
padding: 0px;
width: auto;
}
#mainmenu .sub a {
color: #fff;
display: block;
font-size: 12px;
height: auto;
line-height: 16px;
padding: 5px 8px 7px;
text-align: left;
}
#mainmenu .sub a:hover {
background-image: none;
}
#footer {
margin: 0px auto;
padding-bottom: 60px;
width: 850px;
position: relative;
text-align: center;
}
#footer .social {
position: absolute;
top: 0;
left: 10px;
}
#footer .social ul {
list-style: none;
margin: 10px 0px 0px;
padding: 0px;
}
#footer .social li {
float: left;
margin-right: 5px;
}
#footer .social img {
border: 0px;
}
#footer .copyright {
color: #fff;
line-height: 32px;
margin-top: 10px;
}
/*******************************
* Controls
******************************/
.ImageRotator {
overflow: hidden;
position: relative;
width: 850px;
}
.ImageRotator ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 9999px;
}
.ImageRotator ul li {
display: block;
float: left;
height: 440px;
width: 850px;
overflow: hidden;
}
.ImageRotator ul li img.gallery {
border: 0px;
height: 630px;
width: 850px;
}
.ImageRotator .toolbar {
background: url("../images/backgrounds/slider-toolbar.png") repeat scroll 0 0 transparent;
bottom: 0px;
color: #fff;
height: 36px;
left: 0px;
position: absolute;
width: 850px;
z-index: 100;
}
.ImageRotator .toolbar .desc {
font-weight: bold;
margin: 10px;
text-align: center;
}
.ImageRotator .toolbar .pages {
margin: 5px;
position: absolute;
right: 0px;
}
.ImageRotator .toolbar .pages div {
background: url("../images/backgrounds/page.png") repeat scroll 0 0 transparent;
color: #999;
cursor: pointer;
float: left;
font-weight: bold;
height: 22px;
padding-top: 6px;
text-align: center;
width: 28px;
}
.ImageRotator .toolbar .pages div.Active {
color: #0f75a7;
}
/*******************************
* Pages
******************************/
.popupDialog {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
}
Script:
<script type="text/javascript">
function openDialog(url) {
$("<div class='popupDialog'>Loading...</div>")
.dialog({
autoOpen: false,
closeOnEscape: true,
width: '900',
height: 'auto',
modal: true,
title: 'Bonus Features',
autoResize: true,
beforeClose: function(){ $(this).remove(); }
}).bind('dialogclose', function() {
jdialog.dialog('destroy');
}).load(url, function() {
$(this).dialog("option", "position", ['center', 'center'] ).bind('dialogopen', function() {
adjustJQueryDialogOverlay();
});
$(this).dialog("open");
});
}
$(window).resize(function() {
$(".ui-dialog-content").dialog("option", "position", ['center', 'center']);
});
</script>
Well, you're not supposed to be required to do this, but when I ran into this same sort of problem, the easiest/quickest fix I found was to call the dialog's destroy method before I create a new one. So you'd try something like this:
$(".ui-dialog-content").dialog("destroy");
This goes immediately before the area in your script in which you set up the new dialog.
HTH.
Edit: As requested:
<script>
function openDialog(url) {
$("<div class='popupDialog'>Loading...</div>").dialog("destroy");
$("<div class='popupDialog'>Loading...</div>")
.dialog({
autoOpen: false,
closeOnEscape: true,
width: '900',
height: 'auto',
modal: true,
title: 'Bonus Features',
autoResize: true,
beforeClose: function(){ $(this).remove(); }
}).bind('dialogclose', function() {
jdialog.dialog('destroy');
}).load(url, function() {
$(this).dialog("option", "position", ['center', 'center'] ).bind('dialogopen', function() {
adjustJQueryDialogOverlay();
});
$(this).dialog("open");
});
}
$(window).resize(function() {
$(".ui-dialog-content").dialog("destroy");
$(".ui-dialog-content").dialog("option", "position", ['center', 'center']);
});
</script>
Should only need to update the script part.
So here is the answer from my friend.
Basically, the overlay is a jQuery bug and I had to search around for a workaround as my resize method which you discovered had a little flaw :P So what you can do is change the openDialog method line to (we won't call adjustJQueryDialogOverlay method):
$(this).dialog("option", "position", ['center', 'center'] );
$(this).dialog("open");
And you also need to update the jquery-ui-1.8.11.custom.css line 41. Change the position from absolute to fixed and hopefully this will solve the background issue!
function openDialog(url) {
$("<div class='popupDialog'>Loading...</div>")
.dialog({
autoOpen: false,
closeOnEscape: true,
width: '900',
height: 'auto',
modal: true,
title: 'Bonus Features',
beforeClose: function(){ $(this).remove(); }
}).bind('dialogclose', function() {
jdialog.dialog('destroy');
}).load(url, function() {
$(this).dialog("option", "position", ['center', 'center'] );
$(this).dialog("open");
});
}
$(window).resize(function() {
$(".ui-dialog-content").dialog("option", "position", ['center', 'center']);
});