Develop Reference

my popup should show when score = 6, but i cant make it work

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

How to decrese an image in JavaScript?

I'm trying to create that every time that the image is clicked, it will decrease in size until it completely disappears. But I can't do this, help me!
HTML code:
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="main.css">
<meta charset="utf-8">
<title>Stupid Project</title>
</head>
<body>
<header class="header-top">
<h1>Shrink the image</h1>
</header>
<img src="D:\MATEUS\Programação\Stupid project\images\levi.png" alt="Levi" id="image">
</body>
</html>
<script type="main/javascript" src="jquery-3.3.1.js"></script>
CSS code:
#import "variables.css";
#import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght#300&display=swap');
*
{
margin: 0%;
font-family: 'Ubuntu', sans-serif;
background-color: var(--body-color);
}
.header-top
{
background-color: var(--body-color);
height: 49px;
}
.header-top > h1
{
color: white;
display: inline-block;
vertical-align: top;
margin-left: 10px 10px;
}
#image
{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
margin-top: 90px;
border-radius: 20px;
}

Assuming you want to scale the image down in size on each click we can do this:
set the inital scale of the image to 1 (through a CSS variable --scale)
set up an event listener on the image
when the image is clicked read the current value of --scale, decrease it by 0.1, say, (as long as it hasn't already hit 0)
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="main.css">
<meta charset="utf-8">
<title>Stupid Project</title><style>
*
{
margin: 0%;
font-family: 'Ubuntu', sans-serif;
background-color: var(--body-color);
}
.header-top
{
background-color: var(--body-color);
height: 49px;
}
.header-top > h1
{
color: white;
display: inline-block;
vertical-align: top;
margin-left: 10px 10px;
}
#image
{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
margin-top: 90px;
border-radius: 20px;
transform: scale(var(--scale));
}
</style>
</head>
<body>
<header class="header-top">
<h1>Shrink the image</h1>
</header>
<img src="https://picsum.photos/id/1016/1024/768" alt="test picture" id="image">
<script>
const image = document.getElementById("image");
image.style.setProperty('--scale', 1);
image.addEventListener("click", function () {
const curScale = image.style.getPropertyValue('--scale');
if (curScale > 0) {image.style.setProperty('--scale', curScale - 0.1); }
});
</script>
</body>
</html>

I found the solution to the problem, here's the example code:
HTML:
<button type="button" id="button" onclick="zoomout()">Click Me!</button>
<img src="https://images.pexels.com/photos/1108099/pexels-photo-1108099.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" id="image">
CSS:
#image
{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
margin-top: 0px; /* 90px */
margin-bottom: 10px;
border-radius: 20px;
transition: all 1s;
}
#button
{
color: white;
margin-left: 570px;
margin-top: 39px;
margin-bottom: 0%;
padding: 15px 32px;
background-color: var(--button-color);
}
JavaScript:
function zoomout() {
var GFG = document.getElementById("image");
var currWidth = GFG.clientWidth;
GFG.style.width = (currWidth - 100) + "px"
}

You can just reduce the image width one by one (or with whatever rate you wish), and to visualize this change have some transition set on the image.
const img = document.querySelector("img");
const imgWidth = getComputedStyle(img, null).getPropertyValue('width')
document.querySelector("button").addEventListener("click", () => {
for (let i = parseInt(imgWidth); i >= 0; i--) {
img.style.width = `${i}px`
}
})
img {
display: block;
width: 200px;
transition: all 1s;
}
button {
margin-bottom: 5px;
}
<button>Click</button>
<img src="https://images.unsplash.com/photo-1618141411216-96de9f2bd309?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyN3x8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" />

My JQuery is not working on Chrome, sometimes works on firefox and then stops

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>

HTML Move Canvas object with onclick

Is it possible to attach onclick event to move the object img left, down and right.
The button are placeholder , the sequence are left,down and right.
I'm facing two issue:-
1. My width is 500px, even when I drew it at 250px. It doesn't center .
2. I've tried multiple ways to add the onclick function to -/+ the y-axis and x-axis .
I've even tried to adapt to this code :
http://www.authorcode.com/how-to-move-an-object-on-the-html5-canvas/
But no luck either.
Is there something i missing? I've checked on google mostly are keyevent handler.
JSBIN:
http://jsbin.com/wuseguvuka/2/edit?html,css,output
CSS:
#charset "utf-8";
/* Global Styles */
#main {
width:100%;
background-color:red;
}
body {
margin-left: auto;
margin-right: auto;
width: 92%;
max-width: 960px;
padding-left: 2.275%;
padding-right: 2.275%;
}
/* Header */
header {
text-align: center;
display: block;
}
header .profileLogo .logoPlaceholder {
background-color: white;
color:black;
width: 300px;
text-align: center;
}
header .logoPlaceholder span {
width: 180px;
height: 22px;
font-family: 'Montserrat', sans-serif;
color: black;
font-size: 30px;
font-weight: 700;
line-height: 53px;
}
header .logoPlaceholder2 span {
width: 180px;
height: 22px;
font-family: 'Montserrat', sans-serif;
color: black;
font-size: 30px;
font-weight: 700;
line-height: 53px;
}
header .profilePhoto {
background-color: rgba(237,237,237,1.00);
width: 259px;
border-radius: 50%;
height: 259px;
clear: both;
}
header .profileHeader h1 {
font-family: 'Montserrat', sans-serif;
color: rgba(146,146,146,1.00);
font-size: 30px;
font-weight: 700;
line-height: 24px;
}
header .profileHeader h3 {
font-family: sans-serif;
color: rgba(146,146,146,1.00);
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
hr {
background-color: rgba(208,207,207,1.00);
height: 1px;
}
header .profileHeader p {
font-family: sans-serif;
color: rgba(146,146,146,1.00);
font-size: 14px;
font-weight: 400;
line-height: 1.8;
overflow-y: auto;
}
header .socialNetworkNavBar {
text-align: center;
display: block;
margin-top: 60px;
clear: both;
}
header .socialNetworkNavBar .socialNetworkNav {
border-radius: 50%;
cursor: pointer;
}
header .socialNetworkNavBar .socialNetworkNav img:hover {
opacity: 0.5;
}
/* Media query for Mobile devices*/
#media only screen and (min-width : 285px) and (max-width : 480px) {
/* Header */
#main {
width:100%;
}
header {
width: 100%;
float: left;
}
.wrapper {
display: inline-block;
width: 100%;
height: 100%;
}
header .profileLogo .logoPlaceholder {
display: inline-block;
text-align: left;
}
header .profilePhoto {
display: inline-block;
}
header .profileHeader {
text-align: center;
margin-top: 10%;
}
header .profileHeader p {
text-align: justify;
}
header .socialNetworkNavBar {
text-align: center;
display: block;
margin-top: 60px;
clear: both;
margin-bottom: 15%;
}
header .socialNetworkNavBar .socialNetworkNav {
width: 60px;
height: 60px;
display: inline-block;
margin-right: 23px;
}
}
/* Media Query for Tablets */
#media only screen and (min-width : 481px) and (max-width : 1024px) {
/* Header */
header {
width: 100%;
float: none;
}
header .profileLogo .logoPlaceholder {
display: inline-block;
font-family: 'Montserrat', sans-serif;
}
header .profilePhoto {
float: left;
clear: both;
margin-right: 3%;
margin-top: 5%;
}
header .profileHeader {
text-align: left;
margin-top: 7%;
}
header .socialNetworkNavBar .socialNetworkNav {
width: 74px;
height: 74px;
display: inline-block;
margin-right: 23px;
}
}
/* Desktops and laptops */
#media only screen and (min-width:1025px) {
/* Header */
header .profileLogo .logoPlaceholder {
float: left;
margin-bottom: 50px;
}
header .profilePhoto {
float: left;
clear: both;
margin-right: 3%;
}
header .profileHeader {
text-align: left;
padding-top: 10%;
}
header .socialNetworkNavBar .socialNetworkNav {
width: 74px;
height: 74px;
display: inline-block;
margin-right: 23px;
}
.wrapper {
display: table;
padding: 0;
width: 100%;
height: 100%;
}
.container {
display: table-cell;
vertical-align: middle;
}
.canvas-container {
position: relative;
max-width: 1024px;
min-width: 120px;
margin: 0 auto;
}
}
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>About Page template By Adobe Dreamweaver CC</title>
<link href="AboutPageAssets/styles/aboutPageStyle.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/montserrat:n4:default;source-sans-pro:n2:default.js" type="text/javascript"></script>
<script>
function load() {
var context = document.getElementById('main').getContext("2d");
var img = new Image();
img.src = "http://via.placeholder.com/75x150";
img.onload = function () {
context.drawImage(img, 250, 0);
}
}
</script>
</head>
<body onload="load();">
<!-- Header content -->
<header>
<div class="profileLogo">
<!-- Profile logo. Add a img tag in place of <span>. -->
<p class="logoPlaceholder"><!-- <img src="logoImage.png" alt="sample logo"> --><span>Name :</span></p>
<p class="logoPlaceholder"><!-- <img src="logoImage.png" alt="sample logo"> --><span>Attempts :</span></p>
<p class="logoPlaceholder"><!-- <img src="logoImage.png" alt="sample logo"> --><span>Score :</span></p>
</div>
<section>
<div class="wrapper">
<div class="container">
<div class="canvas-container">
<canvas id="main" width="500px" height="250px"></canvas>
</div>
</div>
</div>
</section>
<!-- Links to Social network accounts -->
<aside class="socialNetworkNavBar">
<div style="margin-right: 50px;" class="socialNetworkNav">
<!-- Add a Anchor tag with nested img tag here -->
<input type="image" src="http://via.placeholder.com/75x75" >
</div>
<div id="left" style="margin-right: 50px;" class="socialNetworkNav">
<!-- Add a Anchor tag with nested img tag here -->
<input type="image" src="http://via.placeholder.com/75x75" > </div>
<div id="down" style="margin-right: 50px;" class="socialNetworkNav">
<!-- Add a Anchor tag with nested img tag here -->
<input id="right" type="image" src="http://via.placeholder.com/75x75" >
</div>
</aside>
</header>
<!-- content -->
</body>
</html>

Yes!
It is absolutely possible. Here is how you could achieve that ...
function load() {
var context = document.getElementById('main').getContext("2d");
var left = document.getElementById('left');
var down = document.getElementById('down');
var right = document.getElementById('right');
var imgLoaded = false;
var posX = 250;
var posY = 0;
var snap = 10;
var img = new Image();
img.onload = function() {
imgLoaded = true;
context.drawImage(img, posX, posY);
};
img.src = "http://via.placeholder.com/75x150";
// left button click
left.onclick = function() {
if (!imgLoaded) return;
posX = posX - snap;
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.drawImage(img, posX, posY);
};
// down button click
down.onclick = function() {
if (!imgLoaded) return;
posY = posY + snap;
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.drawImage(img, posX, posY);
};
// right button click
right.onclick = function() {
if (!imgLoaded) return;
posX = posX + snap;
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.drawImage(img, posX, posY);
};
}
#charset "utf-8";
/* Global Styles */
#main {
width: 100%;
background-color: red;
}
body {
margin-left: auto;
margin-right: auto;
width: 92%;
max-width: 960px;
padding-left: 2.275%;
padding-right: 2.275%;
}
/* Header */
header {
text-align: center;
display: block;
}
header .profileLogo .logoPlaceholder {
background-color: white;
color: black;
width: 300px;
text-align: center;
}
header .logoPlaceholder span {
width: 180px;
height: 22px;
font-family: 'Montserrat', sans-serif;
color: black;
font-size: 30px;
font-weight: 700;
line-height: 53px;
}
header .logoPlaceholder2 span {
width: 180px;
height: 22px;
font-family: 'Montserrat', sans-serif;
color: black;
font-size: 30px;
font-weight: 700;
line-height: 53px;
}
header .profilePhoto {
background-color: rgba(237, 237, 237, 1.00);
width: 259px;
border-radius: 50%;
height: 259px;
clear: both;
}
header .profileHeader h1 {
font-family: 'Montserrat', sans-serif;
color: rgba(146, 146, 146, 1.00);
font-size: 30px;
font-weight: 700;
line-height: 24px;
}
header .profileHeader h3 {
font-family: sans-serif;
color: rgba(146, 146, 146, 1.00);
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
hr {
background-color: rgba(208, 207, 207, 1.00);
height: 1px;
}
header .profileHeader p {
font-family: sans-serif;
color: rgba(146, 146, 146, 1.00);
font-size: 14px;
font-weight: 400;
line-height: 1.8;
overflow-y: auto;
}
header .socialNetworkNavBar {
text-align: center;
display: block;
margin-top: 60px;
clear: both;
}
header .socialNetworkNavBar .socialNetworkNav {
border-radius: 50%;
cursor: pointer;
}
header .socialNetworkNavBar .socialNetworkNav img:hover {
opacity: 0.5;
}
/* Media query for Mobile devices*/
#media only screen and (min-width: 285px) and (max-width: 480px) {
/* Header */
#main {
width: 100%;
}
header {
width: 100%;
float: left;
}
.wrapper {
display: inline-block;
width: 100%;
height: 100%;
}
header .profileLogo .logoPlaceholder {
display: inline-block;
text-align: left;
}
header .profilePhoto {
display: inline-block;
}
header .profileHeader {
text-align: center;
margin-top: 10%;
}
header .profileHeader p {
text-align: justify;
}
header .socialNetworkNavBar {
text-align: center;
display: block;
margin-top: 60px;
clear: both;
margin-bottom: 15%;
}
header .socialNetworkNavBar .socialNetworkNav {
width: 60px;
height: 60px;
display: inline-block;
margin-right: 23px;
}
}
/* Media Query for Tablets */
#media only screen and (min-width: 481px) and (max-width: 1024px) {
/* Header */
header {
width: 100%;
float: none;
}
header .profileLogo .logoPlaceholder {
display: inline-block;
font-family: 'Montserrat', sans-serif;
}
header .profilePhoto {
float: left;
clear: both;
margin-right: 3%;
margin-top: 5%;
}
header .profileHeader {
text-align: left;
margin-top: 7%;
}
header .socialNetworkNavBar .socialNetworkNav {
width: 74px;
height: 74px;
display: inline-block;
margin-right: 23px;
}
}
/* Desktops and laptops */
#media only screen and (min-width: 1025px) {
/* Header */
header .profileLogo .logoPlaceholder {
float: left;
margin-bottom: 50px;
}
header .profilePhoto {
float: left;
clear: both;
margin-right: 3%;
}
header .profileHeader {
text-align: left;
padding-top: 10%;
}
header .socialNetworkNavBar .socialNetworkNav {
width: 74px;
height: 74px;
display: inline-block;
margin-right: 23px;
}
.wrapper {
display: table;
padding: 0;
width: 100%;
height: 100%;
}
.container {
display: table-cell;
vertical-align: middle;
}
.canvas-container {
position: relative;
max-width: 1024px;
min-width: 120px;
margin: 0 auto;
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>About Page template By Adobe Dreamweaver CC</title>
<link href="AboutPageAssets/styles/aboutPageStyle.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>
var __adobewebfontsappname__ = "dreamweaver"
</script>
<script src="http://use.edgefonts.net/montserrat:n4:default;source-sans-pro:n2:default.js" type="text/javascript"></script>
</head>
<body onload="load();">
<!-- Header content -->
<header>
<div class="profileLogo">
<!-- Profile logo. Add a img tag in place of <span>. -->
<p class="logoPlaceholder">
<!-- <img src="logoImage.png" alt="sample logo"> --><span>Name :</span></p>
<p class="logoPlaceholder">
<!-- <img src="logoImage.png" alt="sample logo"> --><span>Attempts :</span></p>
<p class="logoPlaceholder">
<!-- <img src="logoImage.png" alt="sample logo"> --><span>Score :</span></p>
</div>
<section>
<div class="wrapper">
<div class="container">
<div class="canvas-container">
<canvas id="main" width="500px" height="250px"></canvas>
</div>
</div>
</div>
</section>
<!-- Links to Social network accounts -->
<aside class="socialNetworkNavBar">
<div id="left" style="margin-right: 50px;" class="socialNetworkNav">
<!-- Add a Anchor tag with nested img tag here -->
<input type="image" src="http://via.placeholder.com/75x75">
</div>
<div id="down" style="margin-right: 50px;" class="socialNetworkNav">
<!-- Add a Anchor tag with nested img tag here -->
<input type="image" src="http://via.placeholder.com/75x75"> </div>
<div id="right" style="margin-right: 50px;" class="socialNetworkNav">
<!-- Add a Anchor tag with nested img tag here -->
<input type="image" src="http://via.placeholder.com/75x75">
</div>
</aside>
</header>
<!-- content -->
</body>
</html>
apology for not giving explanation

Content expanding beyond div but no scroll bar

I'm using JQuery to load the contents of a text file into a div however when the content goes beyond the div no scroll bar appears.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<title></title>
<link rel="stylesheet" type="text/css" href="CSS/common.css">
<script src="JS/common.js"></script>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
</head>
<body>
<nav>
<ul id="tabs">
<li>Home</li>
<li>History</li>
<li>The Circuit</li>
<li>Gallery</li>
<li>Further Reading</li>
</ul>
</nav>
<div id="content">
<div id="tabContent1"></div>
<div id="tabContent2"></div>
<div id="tabContent3"></div>
<div id="tabContent4"></div>
<div id="tabContent5"></div>
</div>
</body>
</html>
CSS:
body {
background-color: #EEEEEE;
font-family: Arial,Helvetica;
font-size: small;
height: 100%;
margin: 100px auto 0;
width: 100%;
}
#tabs {
list-style: none outside none;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
top: -98px;
width: 100%;
}
#tabs li {
float: left;
margin: 0 -15px 0 0;
}
#tabs a {
border-bottom: 30px solid #3D3D3D;
border-right: 30px solid transparent;
color: #FFFFFF;
float: left;
height: 0;
line-height: 30px;
opacity: 0.3;
padding: 0 40px;
position: relative;
text-decoration: none;
text-transform: uppercase;
}
#tabs a:hover {
border-bottom-color: #2AC7E1;
opacity: 1;
}
#content {
background: none repeat scroll 0 0 #FFFFFF;
border-top: 2px solid #3D3D3D;
height: 100%;
padding: 2em;
position: fixed;
top: 30px;
width: 98%;
overflow: auto;
}
.activeTab {
border-bottom-color: #3D3D3D !important;
opacity: 1 !important;
}
.img {
}
JQuery:
$('a[name="#tabContent2"]').click(function () {
$("#tab1").removeClass('activeTab');
$("#tab3").removeClass('activeTab');
$("#tab4").removeClass('activeTab');
$("#tab5").removeClass('activeTab');
$(this).addClass('activeTab');
$("#tabContent2").load("external/test2.txt");
$("#tabContent2").show();
$("#tabContent1").hide();
$("#tabContent3").hide();
$("#tabContent4").hide();
$("#tabContent5").hide();
});
How can I get the scroll bar to appear?

#tabs {
overflow: scroll;
}
overflow controls how content is hidden. If set to hidden it will be hidden with no scroll bars. You want scroll to add the appropriate scroll bar.

Overflow is visible but just it overflowed by padding:
#content {
background: none repeat scroll 0 0 #FFFFFF;
border-top: 2px solid #3D3D3D;
height: 100%;
padding: 2em 0 0 2em; /*<--change to this*/
position: fixed;
top: 30px;
width: 98%;
overflow: auto;
}

Try to use the famous micro clearfix instead of overflow: auto;
/*The famous micro clearfix*/
.group:before,
.group:after,
.group:before,
.group:after {
content: " ";
display: table;
}
.group:after,
.group:after {
clear: both;
}
.group,
.group {
*zoom: 1;
}
And for your jQuery, that can be a lot shorter and, arguable, more readable like this:
$('a[name="#tabContent2"]').click(function () {
$(this).parent().parent().find("a").removeClass("activeTab");
$(this).addClass('activeTab');
$("#content > div").hide();
$("#tabContent2").load("external/test2.txt");
$("#tabContent2").show();
});