How to create my elements in chat using JavaScript [closed] - javascript

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I'm developing a chat, and I need to create the elements using JavaScript, but I don't have a lot of knowledge about JavaScript, so every time I try, it goes wrong, and I believe this is because of the CSS classes too, it makes it harder for me, I would like someone to help me with this
body {
background-color: black;
}
.chat {
width: calc(100% - 20px);
height: 500px;
/* border: solid 1px pink; */
display: flex;
flex-direction: column;
padding: 10px;
margin: 0 auto 0 auto;
overflow: auto;
}
.messages {
margin-top: 30px;
display: flex;
flex-direction: column;
}
.message {
border-radius: 20px;
padding: 4px 15px;
margin-top: 1px;
margin-bottom: 1px;
display: inline-block;
}
.yours {
align-items: flex-start;
}
.yours .message {
margin-right: 25%;
background-color: purple;
position: relative;
}
.yours .message.last:before {
content: "";
position: absolute;
z-index: 0;
bottom: 0;
left: -7px;
height: 20px;
width: 20px;
background: purple;
border-bottom-right-radius: 15px;
}
.yours .message.last:after {
content: "";
position: absolute;
z-index: 1;
bottom: 0;
left: -10px;
width: 10px;
height: 20px;
background: black;
border-bottom-right-radius: 10px;
}
.mine {
align-items: flex-end;
}
.mine .message {
color: white;
margin-left: 25%;
background: linear-gradient(to bottom, #00D0EA 0%, #0085D1 100%);
background-attachment: fixed;
position: relative;
}
.mine .message.last:before {
content: "";
position: absolute;
z-index: 0;
bottom: 0;
right: -8px;
height: 20px;
width: 20px;
background: linear-gradient(to bottom, #00D0EA 0%, #0085D1 100%);
background-attachment: fixed;
border-bottom-left-radius: 15px;
}
.mine .message.last:after {
content: "";
position: absolute;
z-index: 1;
bottom: 0;
right: -10px;
width: 10px;
height: 20px;
background: black;
border-bottom-left-radius: 10px;
}
.yours .user {
font-size: 0.6em;
color: grey;
margin: 0px 0px 0px 10px;
}
.mine .user {
font-size: 0.6em;
color: grey;
margin: 0px 10px 0px 0px;
}
<div class="chat">
<div class="mine messages">
<div class="user"><span>Me</span></div>
<div class="message last">
Dude
</div>
</div>
<div class="yours messages">
<div class="user"><span>Mark</span></div>
<div class="message">
Hey!
</div>
<div class="message">
You there?
</div>
<div class="message last">
Hello, how's it going?
</div>
</div>
<div class="mine messages">
<!-- <div class="user">Me</div> -->
<div class="message">
Great thanks!
</div>
<div class="message last">
How about you?
</div>
</div>
<div class="yours messages">
<div class="user"><span>Anne</span></div>
<div class="message">
Hello!
</div>
<div class="message">
How are you?
</div>
<div class="message last">
Glad to see you?
</div>
</div>
<div class="mine messages">
<!-- <div class="user">Me</div> -->
<div class="message">
Great thanks!
</div>
<div class="message last">
How about you?
</div>
</div>
</div>
How can I create this elements using JavaScript?

You can render a message transcript by binning them by user and then rendering each of the bins.
Each time the underlying transcript is updated, just re-render the messages.
Edit: I changed:
if (currBin.type === binType(message))
to this:
if (currBin.from === message.from)
Because I was attempting to cache the users so that I only display a new user when they enter the chat (following a previous user) as seen in OP's HTML. You could have a flag to only show "Me" when a bin from the receiving user initially send a sequence of messages.
Demo
const messages = [
{ "from": "Me" , "content": "Dude" },
{ "from": "Mark" , "content": "Hey!" },
{ "from": "Mark" , "content": "You there?" },
{ "from": "Mark" , "content": "Hello, how's it going?" },
{ "from": "Me" , "content": "Great thanks!" },
{ "from": "Me" , "content": "How about you?" },
{ "from": "Anne" , "content": "Hello!" },
{ "from": "Anne" , "content": "How are you?" },
{ "from": "Anne" , "content": "Glad to see you?" },
{ "from": "Me" , "content": "Great thanks!" },
{ "from": "Me" , "content": "How about you?" }
];
const renderMessages = (messages) => {
const binType = (message) => message.from === 'Me' ? 'mine' : 'yours';
const binMessages = (messages) => {
const createBin = (message) => {
return {
'type': binType(message),
'from': message.from,
'messages': [ message ]
};
};
return messages.reduce((bins, message) => {
if (bins.length === 0) {
bins.push(createBin(message));
} else {
const currBin = bins[bins.length - 1];
if (currBin.from === message.from) {
currBin.messages.push(message);
} else {
bins.push(createBin(message));
}
}
return bins;
}, []);
};
const render = (bins) => {
return bins.map(bin => {
return `
<div class="${bin.type} messages">
<div class="user"><span>${bin.from}</span></div>
${bin.messages.map((message, index, all) => {
return `
<div class="message ${index === all.length - 1 ? 'last' : ''}">
${message.content}
</div>`
}).join('')}
</div>
`;
}).join('');
}
return render(binMessages(messages));
}
document.querySelector('.chat').innerHTML = renderMessages(messages);
body {
background-color: black;
}
.chat {
width: calc(100% - 20px);
/* border: solid 1px pink; */
display: flex;
flex-direction: column;
padding: 10px;
margin: 0 auto 0 auto;
overflow: auto;
}
.messages {
margin-top: 30px;
display: flex;
flex-direction: column;
}
.message {
border-radius: 20px;
padding: 4px 15px;
margin-top: 1px;
margin-bottom: 1px;
display: inline-block;
}
.yours {
align-items: flex-start;
}
.yours .message {
margin-right: 25%;
background-color: purple;
position: relative;
}
.yours .message.last:before {
content: "";
position: absolute;
z-index: 0;
bottom: 0;
left: -7px;
height: 20px;
width: 20px;
background: purple;
border-bottom-right-radius: 15px;
}
.yours .message.last:after {
content: "";
position: absolute;
z-index: 1;
bottom: 0;
left: -10px;
width: 10px;
height: 20px;
background: black;
border-bottom-right-radius: 10px;
}
.mine {
align-items: flex-end;
}
.mine .message {
color: white;
margin-left: 25%;
background: linear-gradient(to bottom, #00D0EA 0%, #0085D1 100%);
background-attachment: fixed;
position: relative;
}
.mine .message.last:before {
content: "";
position: absolute;
z-index: 0;
bottom: 0;
right: -8px;
height: 20px;
width: 20px;
background: linear-gradient(to bottom, #00D0EA 0%, #0085D1 100%);
background-attachment: fixed;
border-bottom-left-radius: 15px;
}
.mine .message.last:after {
content: "";
position: absolute;
z-index: 1;
bottom: 0;
right: -10px;
width: 10px;
height: 20px;
background: black;
border-bottom-left-radius: 10px;
}
.yours .user {
font-size: 0.6em;
color: grey;
margin: 0px 0px 0px 10px;
}
.mine .user {
font-size: 0.6em;
color: grey;
margin: 0px 10px 0px 0px;
}
<div class="chat"></div>

Related

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 change the border color of a div when clicking a radio button inside the same div?

So I'm currently working on a personal project. And came across with a problem.
I want my border color of this div to green when the user clicks the radio button inside that div. Like this:
Here
But my current version looks like this:
Here
Here is my CSS and HTML
.backProjectCard2 {
padding-right: 10px;
}
.backProjectCard {
border: 2px solid #ececec;
border-radius: 10px;
margin: 0 0 20px;
padding-top: 24px;
position: relative;
right: 5px;
width: 580px;
}
/*For Input and .checkmark*/
.backProjectCard input {
position: relative;
height: 20px;
width: 20px;
left: 20px;
}
.input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.backProject input:checked~.checkmark {
background-color: #fff;
}
.checkmark {
position: absolute;
top: 27px;
left: 20px;
height: 18px;
width: 18px;
background-color: #fff;
border-radius: 50%;
border: solid #e0e0e0 1.7px;
z-index: -1;
}
.backProject input:checked~.checkmark:after {
display: block;
}
.backProject .checkmark:after {
top: 2px;
left: 3px;
width: 10px;
height: 10px;
border-radius: 50%;
background: hsl(176, 50%, 47%);
}
.checkmark:after {
z-index: 1;
content: "";
position: absolute;
display: none;
}
<div class="backProjectCard backProjectCard2">
<input onclick="radioCheck();" type="radio" class="input">
<span class="checkmark"></span>
<h4 id="card-h">Bamboo Stand</h4>
<h3>Pledge $25 or more</h3>
<p id="left">left</p>
<h2 id="card2-num">101</h2>
<p>You get an ergonomic stand made of natural baamboo. You've helped us launch our promotional campaign, and you'll be added to a special Backer member list.</p>
<hr>
<div class="pledgeSection">
<p>Enter your pledge</p>
<button class="btn-1 card2Btn">Continue</button>
<button class="btn-2">
<p>$</p>
<input value="25" class="input-price input-price2" type="number">
</button>
</div>
JS (Only for clicking the radio button twice):
function radioCheck() {
timesClicked++
if (timesClicked > 1) {
$("input").prop("checked", false)
timesClicked = 0;
}
}
function colorchange() {
var x = document.getElementById('checker');
var y = document.getElementById('radiobox');
if (x.checked === true) {
y.style.borderColor = "green";
} else {
y.style.borderColor = "silver";
}
}
#radiobox {
width: 300px;
height: 200px;
border: 5px solid;
border-color: silver;
}
<div id="radiobox">
<input type="radio" onclick="colorchange();" id="checker"></input>
</div>
To keep it simple, I'll just use a short example and you can just apply it to your own example.
This is how you can do that
function radioCheck(){
// Get the checkbox
var checkBox = document.getElementById("myInputCheck");
// Get the div with border
var divBorder = document.getElementsByClassName("backProjectCard")[0]
// If the checkbox is checked, display the border
if (checkBox.checked == true){
divBorder.classList.remove("backProjectCard"); //remove "backProjectCard"
divBorder.classList.add("newBorder"); //add the new border with new color
} else {
divBorder.classList.remove("newBorder");
divBorder.classList.add("backProjectCard");
}
}
.backProjectCard2 {
padding-right: 10px;
}
.backProjectCard {
border: 2px solid #ececec;
border-radius: 10px;
margin: 0 0 20px;
padding-top: 24px;
position: relative;
right: 5px;
width: 580px;
}
/*For Input and .checkmark*/
.backProjectCard input {
position: relative;
height: 20px;
width: 20px;
left: 20px;
}
.input {
position: absolute;
opacity: 1;
cursor: pointer;
}
.checkmark {
position: absolute;
top: 27px;
left: 20px;
height: 18px;
width: 18px;
background-color: #fff;
border-radius: 50%;
border: solid #e0e0e0 1.7px;
z-index: -1;
}
.newBorder{
border: 2px solid #177972 !important;
border-radius: 10px;
margin: 0 0 20px;
padding-top: 24px;
position: relative;
right: 5px;
width: 580px;
}
<div class="backProjectCard backProjectCard2">
<input onclick="radioCheck();" type="radio" id="myInputCheck">
<h4 >Bamboo Stand</h4>
<h3>Pledge $25 or more</h3>
<p >left</p>
<h2 >101</h2>
<p>You get an ergonomic stand made of natural baamboo. You've helped us launch our promotional campaign, and you'll be added to a special Backer member list.</p>

Mouseover event with mousedown

I need your help. There is an APP Virtual-piano. When I click the key, the relevent note is reproduced.If the click is single, everything is fine. But when I hold down the mouse button and lead the cursor over the keys, the sound is not produced. What could be the problem? I suppose that the problem is in function on the line 15. But i don`t know how to fix it. Help me please. Thanks in advance.
This is JS code
const piano = document.querySelector(".piano");
const collectionPiano = document.querySelectorAll(".piano-key");
function setActiveKey(event) { //active status keys mouse event
event.target.classList.add("piano-key-active", "piano-key-active-pseudo");
}
function removeActiveKey(event) { //remove active status keys mouse event
event.target.classList.remove("piano-key-active", "piano-key-active-pseudo");
}
function playAudio (note) { //start function playAudio
const audio = document.querySelector(`audio[data-note="${note}"]`);
audio.currentTime = 0;
audio.play();
}
function startKeyActive (event) { //mouseover and mouseout events for active status keys, pseudo and play audio
if (event.target.classList.contains("piano-key")) {
event.target.classList.add("piano-key-active", "piano-key-active-pseudo");
const note = event.target.dataset.note;
playAudio(note);
}
collectionPiano.forEach((el) => {
// el.addEventListener("mouseover", playAudio);
el.addEventListener("mouseover", setActiveKey);
el.addEventListener("mouseout", removeActiveKey);
});
};
function stopKeyIActive () { //remove mouseover and mouseout events for active status keys, pseudo and play audio
collectionPiano.forEach((el) => {
el.classList.remove("piano-key-active", "piano-key-active-pseudo");
// el.removeEventListener("mouseover", playAudio);
el.removeEventListener("mouseover", setActiveKey);
el.removeEventListener("mouseout", removeActiveKey);
});
};
piano.addEventListener("mousedown", startKeyActive);
piano.addEventListener("mousedown", playAudio);
document.addEventListener("mouseup", stopKeyIActive);
window.addEventListener("keydown", (event) => { // Event keyboard - play audio
if (event.repeat) {
return;
}
const audioKeys = document.querySelector(`audio[data-key="${event.keyCode}"]`);
const pianoKey = document.querySelector(`.piano-key[data-key="${event.keyCode}"]`);
audioKeys.currentTime = 0;
audioKeys.play();
pianoKey.classList.add('piano-key-active');
window.addEventListener("keyup", () => {
pianoKey.classList.remove('piano-key-active');
})
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
user-select: none;
}
a:focus {
outline: 0;
}
html {
background: #313940;
}
body {
min-height: 100vh;
background-color: #313940;
font-family: "Open Sans", Arial, Helvetica, sans-serif;
background: #313940;
overflow-x: hidden;
}
.header {
text-align: center;
width: 100%;
border-bottom: 1px solid;
border-image-slice: 1;
border-image-source: linear-gradient(to left, #38495a, #a2abb3, #38495a);
}
.header-title {
line-height: 60px;
font-weight: 300;
color: #fff;
}
.main {
min-height: calc(100vh - 110px);
padding: 60px 10px 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: space-between;
width: 100%;
max-width: 1140px;
margin: 0 auto;
}
.btn-container {
display: flex;
justify-content: space-between;
width: 306px;
height: 40px;
margin: 0 auto;
margin-bottom: 80px;
}
.btn {
width: 150px;
height: 40px;
padding: 0 10px;
background-color: #454c53;
border: 0;
border-radius: 2px;
font-family: "Open Sans", sans-serif;
font-size: 16px;
font-weight: 300;
color: #fff;
outline: 0;
cursor: pointer;
transition: 0.3s;
}
.btn:not(.btn-active):hover {
background-color: #515961;
}
.btn:active {
background-color: #00c9b7;
}
.btn-active {
background-color: #00b4a4;
}
.btn-active:hover {
background-color: #00c9b7;
}
.piano {
position: relative;
display: flex;
justify-content: space-between;
width: 100%;
height: 270px;
max-width: 560px;
margin: 0 auto 60px;
}
.piano-key {
position: relative;
width: 80px;
height: 270px;
background-color: rgba(255, 255, 255, 0.85);
border: 4px solid #313940;
border-radius: 0px 0px 12px 12px;
transition: 0.3s;
cursor: pointer;
}
.piano-key:hover {
background-color: #fff;
}
.keys-sharp {
position: absolute;
top: 0;
bottom: 0;
left: 53px;
right: 53px;
display: flex;
justify-content: space-between;
pointer-events: none;
}
.piano-key.sharp {
width: 54px;
height: 170px;
background-color: #313940;
border: 0;
border-radius: 0px 0px 9px 9px;
top: 0;
z-index: 3;
pointer-events: auto;
transform-origin: center top;
}
.piano-key.piano-key-active,
.piano-key.sharp.piano-key-active {
transform: scale(0.96);
}
.piano-key.none {
background-color: transparent;
border: 0;
border-radius: 0;
pointer-events: none;
}
.piano-key::before,
.piano-key::after {
content: attr(data-note);
position: absolute;
width: 40px;
height: 40px;
font-size: 26px;
line-height: 40px;
text-align: center;
color: #a2abb3;
bottom: -45px;
left: 20px;
transition: 0.3s;
pointer-events: none;
}
.piano-key::after {
display: none;
content: attr(data-letter);
}
.piano-key:hover::before,
.piano-key:hover::after {
color: #d7dfe6;
}
.sharp:active {
border-top: 0;
}
.piano-key.sharp::before,
.piano-key.sharp::after {
bottom: 175px;
left: 7px;
}
.piano-key.letter::before {
display: none;
}
.piano-key.letter::after {
display: block;
}
.piano-key-letter::before {
content: attr(data-letter);
}
.piano-key-remove-mouse:active::before {
color: #a2abb3;
}
.piano-key-active-pseudo:hover::after,
.piano-key-active-pseudo:hover::before,
.piano-key-active::after,
.piano-key-active::before {
color: #00b4a4;
}
.fullscreen {
position: fixed;
top: 120px;
right: 40px;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.3);
border: 0;
outline: 0;
background-size: contain;
transition: 0.3s;
cursor: pointer;
background-image: url("assets/svg/fullscreen-open.svg");
}
.fullscreen:hover {
background-color: rgba(255, 255, 255, 0.5);
}
:-webkit-full-screen .fullscreen {
background-image: url("assets/svg/fullscreen-exit.svg");
}
.footer {
border-top: 1px solid;
border-image-slice: 1;
border-image-source: linear-gradient(to left, #38495a, #a2abb3, #38495a);
}
.footer-container {
padding: 0 15px;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: 1140px;
margin: 0 auto;
}
.github {
display: block;
width: 120px;
height: 45px;
padding-left: 45px;
background-image: url("assets/svg/github.svg");
background-size: 35px;
background-repeat: no-repeat;
background-position: left center;
line-height: 45px;
color: #cbd5de;
font-size: 16px;
font-family: "Open Sans", sans-serif;
transition: 0.3s;
}
.github:hover {
color: #fff;
}
.rss {
display: block;
position: relative;
font-family: "Open Sans", sans-serif;
width: 86px;
height: 32px;
background-image: url("assets/svg/rss.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: left center;
padding-right: 111px;
}
.rss-year {
position: absolute;
bottom: 0;
right: 0;
font-size: 21px;
letter-spacing: -2px;
color: #cbd5de;
line-height: 0.9;
font-weight: bold;
transition: 0.3s;
}
.rss:hover .rss-year {
right: -5px;
letter-spacing: 0;
}
#media (max-width: 768px) {
.fullscreen {
top: 10px;
right: 20px;
width: 40px;
height: 40px;
}
}
#media (max-width: 600px) {
.main {
padding-top: 40px;
}
.piano {
width: 310px;
height: 160px;
}
.piano-key {
width: 44px;
height: 160px;
border-radius: 0px 0px 8px 8px;
border: 2px solid #313940;
}
.keys-sharp {
left: 26px;
right: 26px;
}
.piano-key.sharp {
width: 36px;
height: 100px;
border-radius: 0px 0px 6px 6px;
}
.piano-key::before,
.piano-key::after {
width: 30px;
height: 30px;
font-size: 22px;
bottom: -35px;
left: 7px;
font-size: 22px;
}
.piano-key.sharp::before,
.piano-key.sharp::after {
bottom: 115px;
left: 3px;
}
.btn-container {
width: 244px;
height: 40px;
margin-bottom: 80px;
}
.btn {
width: 120px;
height: 40px;
}
}
<!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 href="assets/piano.ico" rel="shortcut icon">
<link href="https://fonts.gstatic.com" rel="preconnect">
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght#300&family=Open+Sans:wght#300;400;800&display=swap"
rel="stylesheet">
<link href="style.css" rel="stylesheet">
<title>virtual-piano</title>
</head>
<body>
<header class="header">
<h1 class="header-title">Virtual Piano</h1>
</header>
<main class="main">
<div class="btn-container">
<button class="btn btn-notes btn-active">Notes</button>
<button class="btn btn-letters">Letters</button>
</div>
<div class="piano">
<div class="piano-key" data-key="68" data-letter="D" data-note="c"></div>
<div class="piano-key" data-key="70" data-letter="F" data-note="d"></div>
<div class="piano-key" data-key="71" data-letter="G" data-note="e"></div>
<div class="piano-key" data-key="72" data-letter="H" data-note="f"></div>
<div class="piano-key" data-key="74" data-letter="J" data-note="g"></div>
<div class="piano-key" data-key="75" data-letter="K" data-note="a"></div>
<div class="piano-key" data-key="76" data-letter="L" data-note="b"></div>
<div class="keys-sharp">
<div class="piano-key sharp" data-key="82" data-letter="R" data-note="c♯"></div>
<div class="piano-key sharp" data-key="84" data-letter="T" data-note="d♯"></div>
<div class="piano-key sharp none"></div>
<div class="piano-key sharp" data-key="85" data-letter="U" data-note="f♯"></div>
<div class="piano-key sharp" data-key="73" data-letter="I" data-note="g♯"></div>
<div class="piano-key sharp" data-key="79" data-letter="O" data-note="a♯"></div>
</div>
</div>
<audio data-key="75" data-note="a" src="assets/audio/a.mp3"></audio>
<audio data-key="79" data-note="a♯" src="assets/audio/a♯.mp3"></audio>
<audio data-key="76" data-note="b" src="assets/audio/b.mp3"></audio>
<audio data-key="68" data-note="c" src="assets/audio/c.mp3"></audio>
<audio data-key="82" data-note="c♯" src="assets/audio/c♯.mp3"></audio>
<audio data-key="70" data-note="d" src="assets/audio/d.mp3"></audio>
<audio data-key="84" data-note="d♯" src="assets/audio/d♯.mp3"></audio>
<audio data-key="71" data-note="e" src="assets/audio/e.mp3"></audio>
<audio data-key="72" data-note="f" src="assets/audio/f.mp3"></audio>
<audio data-key="85" data-note="f♯" src="assets/audio/f♯.mp3"></audio>
<audio data-key="74" data-note="g" src="assets/audio/g.mp3"></audio>
<audio data-key="73" data-note="g♯" src="assets/audio/g♯.mp3"></audio>
<button class="fullscreen openfullscreen"></button>
</main>
<footer class="footer">
<div class="footer-container">
<a class="github" href="#" target="_blank" rel="noopener noreferrer">github</a>
<a class="rss" href="https://rs.school/js/" target="_blank" rel="noopener noreferrer">
<span class="rss-year">'21</span>
</a>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>
I did it, here is the final code JS
const piano = document.querySelector(".piano");
const collectionPiano = document.querySelectorAll(".piano-key");
function playAudio (event) { //active status keys mouse event
event.target.classList.add("piano-key-active", "piano-key-active-pseudo");
const note = event.target.dataset.note;
const audio = document.querySelector(`audio[data-note="${note}"]`);
audio.currentTime = 0;
audio.play();
}
function removeActiveKey(event) { //remove active status keys mouse event
event.target.classList.remove("piano-key-active", "piano-key-active-pseudo");
}
function startKeyActive (event) { //mouseover and mouseout events for active status keys, pseudo and play audio
if (event.target.classList.contains("piano-key")) {
event.target.classList.add("piano-key-active", "piano-key-active-pseudo");
}
collectionPiano.forEach((el) => {
el.addEventListener("mouseover", playAudio);
el.addEventListener("mouseout", removeActiveKey);
});
};
function stopKeyIActive () { //remove mouseover and mouseout events for active status keys, pseudo and play audio
collectionPiano.forEach((el) => {
el.classList.remove("piano-key-active", "piano-key-active-pseudo");
el.removeEventListener("mouseover", playAudio);
el.removeEventListener("mouseout", removeActiveKey);
});
};
piano.addEventListener("mousedown", startKeyActive);
piano.addEventListener("mousedown", playAudio);
document.addEventListener("mouseup", stopKeyIActive);
window.addEventListener("keydown", (event) => { // Event keyboard - play audio
if (event.repeat) {
return;
}
const audioKeys = document.querySelector(`audio[data-key="${event.keyCode}"]`);
const pianoKey = document.querySelector(`.piano-key[data-key="${event.keyCode}"]`);
audioKeys.currentTime = 0;
audioKeys.play();
pianoKey.classList.add('piano-key-active');
window.addEventListener("keyup", () => {
pianoKey.classList.remove('piano-key-active');
})
});

How to fit elements at slider container

I work with statick creation elements, and for this i need to have slider.
I just create slider, but elements are not fit in to slider container.
Example:
var htmlElements;
var userName = "Jonny Programmer"
var id = "6656"
function createUserCard() {
htmlElements = `<div class="user-card">
<img src="https://source.unsplash.com/user/erondu" class="userImage" />
<div class="info">
<div class="name">${userName}</div>
<div class="handle">
<div class="idPersone">${id}</div>
</div>
</div>
</div>`
$('.cardsCreation').append(htmlElements);
}
$('#plus-button').on('click', function () {
createUserCard();
});
(function () {
var sliderImages = document.querySelectorAll('.image'),
arrowLeft = document.querySelector('#left-arrow'),
arrowRight = document.querySelector('#right-arrow'),
currentImg = 0;
function initSlider() {
resetSlider();
sliderImages[0].style.display = 'block';
}
function resetSlider() {
for (var i = 0; i < sliderImages.length; i++) {
sliderImages[i].style.display = 'none';
}
}
function toLeft() {
resetSlider();
sliderImages[currentImg - 1].style.display = 'block';
currentImg--;
}
function toRight() {
resetSlider();
sliderImages[currentImg + 1].style.display = 'block';
currentImg++;
}
arrowLeft.addEventListener('click', function () {
if (currentImg === 0) {
currentImg = sliderImages.length;
}
toLeft();
});
arrowRight.addEventListener('click', function () {
if (currentImg === sliderImages.length - 1) {
currentImg = -1;
}
toRight();
});
initSlider();
})();
.user-card, userImage {
box-shadow: 0px 2px 5px 0 rgba(0,0,0,0.25);
}
.user-card {
margin: 12px;
padding: 10px 10px 10px 10px;
border-radius: 12px;
width: 160px;
text-align: center;
float: left;
background-color: #fff;
}
.userImage {
border-radius: 50%;
height: 140px;
width: 140px;
border: 5px solid #eee;
}
.name {
font-size: 20px;
margin: 5px;
font-weight: bold;
}
.progress {
color: #25af53;
font-size: 48px;
}
#plus-button {
width: 55px;
height: 55px;
border-radius: 50%;
background: #428bca;
position: absolute;
top: 33%;
margin-left: 20px;
cursor: pointer;
box-shadow: 0px 2px 5px #666;
border: none;
outline: none;
}
.plus {
color: white;
position: absolute;
top: 0;
display: block;
bottom: 0;
left: 0;
right: 0;
text-align: center;
padding: 0;
margin: 0;
line-height: 55px;
font-size: 38px;
font-family: 'Roboto';
font-weight: 300;
}
#plus-button:hover {
box-shadow: 0 6px 14px 0 #666;
transform: scale(1.05);
}
.wrapper {
position: relative;
}
.arrow {
cursor: pointer;
position: absolute;
width: 0;
height: 0;
border-style: solid;
top: 50%;
margin-top: 160px;
}
#left-arrow {
border-width: 50px 40px 50px 0;
border-color: transparent #000 transparent transparent;
left: 0;
margin-left: 25px;
}
#right-arrow {
border-width: 50px 0 50px 40px;
border-color: transparent transparent transparent #000;
right: 0;
margin-right: 25px;
}
.image {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.vertical-align-wrapper {
display: table;
overflow: hidden;
text-align: center;
}
.vertical-align-wrapper span {
display: table-cell;
vertical-align: middle;
font-size: 5rem;
color: #ffffff;
}
#media only screen and (max-width : 992px) {
.vertical-align-wrapper span {
font-size: 2.5rem;
}
#left-arrow {
border-width: 30px 20px 30px 0;
margin-left: 15px;
}
#right-arrow {
border-width: 30px 0 30px 20px;
margin-right: 15px;
}
.arrow {
margin-top: -30px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div id="left-arrow" class="arrow"></div>
<div id="slider">
<div class="image image-one">
<div class="vertical-align-wrapper">
<div class="cardsCreation"></div>
<button id="plus-button">
<p class="plus">+</p>
</button>
</div>
</div>
<div class="image image-two">
<div class="vertical-align-wrapper">
<span>Slide 2</span>
</div>
</div>
<div class="image image-three">
<div class="vertical-align-wrapper">
<span>Slide 3</span>
</div>
</div>
</div>
<div id="right-arrow" class="arrow"></div>
</div>
So as u can see affter tapping "+" i add new ellement in to html.
And from two sides i have arrows which are changing slider.
After tapping arrows go down, and this is not good.
And after i will reach limit of adding element in one slider it's add new element to new slider page.
What i want ex:
If you are using toggle of display CSS property that happened because it remove whole element from the DOM so, I suggest you to use visibility or opacity properties to done your task.

How to stop/start looping sliders when mouse over the element?

Making slider I've faced one issue. When I hover the buttons under the images (they are labels) the looping of the slider has to stop. And when its out - it backs to looping. Cant understant where I'm wrong. See the code in snippet or in this link.
$(document).ready(function(){
var loop = true;
var quantity = $('input[type="radio"]').length;
function changeTo(i) {
setTimeout(function () {
if (loop) {
number = i%(quantity);
$("label").removeClass('active');
$("label:eq(" + number + ")").trigger("click").addClass('active');
changeTo(i+1);
}
}, 2000);
}
changeTo(0);
$( "label" ).on( "mouseover", function() {
loop = false;
$("label").removeClass('active');
$(this).addClass('active').trigger('click');
}).on('mouseout', function(){
loop = true;
});
});
* {
box-sizing: border-box;
}
body {
background: #f2f2f2;
padding: 20px;
font-family: 'PT Sans', sans-serif;
}
.slider--block {
max-width: 670px;
display: block;
margin: auto;
background: #fff;
}
.active {
color: red;
}
.image-section {
display: none;
}
.image-section + section {
height: 100%;
width:100%;
position:absolute;
left:0;
top:0;
opacity: .33;
transition: 400ms;
z-index: 1;
}
.image-section:checked + section {
opacity: 1;
transition: 400ms;
z-index: 2;
}
.image-section + section figcaption {
padding: 20px;
background: rgba(0,0,0,.5);
position: absolute;
top: 20px;
left: 20px;
color: #fff;
font-size: 18px;
max-width: 50%;
}
.image-window {
height: 367px;
width: 100%;
position: relative;
overflow:hidden;
}
.slider-navigation--block {
display: flex;
border:1px solid;
background: #1D1D1D;
padding: 5px;
z-index: 3;
position: relative;
}
.slider-navigation--block label {
background: #2C2C2C;
padding: 20px;
color: #fff;
margin-right: 7px;
flex: 1;
cursor: pointer;
text-align: center;
position:relative;
display: inline-flex;
justify-content: center;
align-items: center;
min-height:100px;
border-radius: 4px;
text-shadow: 2px 2px 0 rgba(0,0,0,0.15);
font-weight: 600;
}
.slider-navigation--block label.active:before {
content: "";
position: absolute;
top: -11px;
transform: rotate(-135deg);
border: 12px solid;
border-color: transparent #537ACA #537ACA transparent;
left: calc(50% - 12px);
}
.slider-navigation--block label.active{
background-image: linear-gradient(to bottom, #537ACA, #425F9B);
}
.slider-navigation--block label:last-child {
margin-right: 0;
}
img {
max-width: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider--block">
<div class="slider">
<div class="image-window">
<input class="image-section" id="in-1" type="radio" checked name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext...
</figcaption>
<img src="http://dogavemanzara.weebly.com/uploads/2/3/2/8/23283920/6960961_orig.jpg">
</section>
<input class="image-section" id="in-2" type="radio" name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext about something else...
</figcaption>
<img src="http://desktopwallpapers.org.ua/pic/201111/1024x600/desktopwallpapers.org.ua-8624.jpg">
</section>
<input class="image-section" id="in-3" type="radio" name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext again about something else...
</figcaption>
<img src="http://dogavemanzara.weebly.com/uploads/2/3/2/8/23283920/6960961_orig.jpg">
</section>
</div>
<div class="slider-navigation--block">
<label class="active" for="in-1">AION [ру-офф]</label>
<label for="in-2">Perfect World [ру-офф]</label>
<label for="in-3">Lineage 2 [ру-офф]</label>
</div>
</div>
</div>
See this JSFiddle for a working example.
However, if you are hoverring for more than the timeout period, then changeto() is not called, you will want to add changeto() to the "mouseleave" handler.
$(document).ready(function(){
var loop = true;
var quantity = $('input[type="radio"]').length;
function changeTo(i) {
setTimeout(function () {
if (loop) {
number = i%(quantity);
$("label").removeClass('active');
$("label:eq(" + number + ")").trigger("click").addClass('active');
changeTo(i+1);
}
}, 2000);
}
changeTo(0);
$( "label" ).on( "mouseover", function() {
loop = false;
$("label").removeClass('active');
$(this).addClass('active').trigger('click');
}).on('mouseout', function(){
loop = true;
changeTo(0)
});
});
* {
box-sizing: border-box;
}
body {
background: #f2f2f2;
padding: 20px;
font-family: 'PT Sans', sans-serif;
}
.slider--block {
max-width: 670px;
display: block;
margin: auto;
background: #fff;
}
.active {
color: red;
}
.image-section {
display: none;
}
.image-section + section {
height: 100%;
width:100%;
position:absolute;
left:0;
top:0;
opacity: .33;
transition: 400ms;
z-index: 1;
}
.image-section:checked + section {
opacity: 1;
transition: 400ms;
z-index: 2;
}
.image-section + section figcaption {
padding: 20px;
background: rgba(0,0,0,.5);
position: absolute;
top: 20px;
left: 20px;
color: #fff;
font-size: 18px;
max-width: 50%;
}
.image-window {
height: 367px;
width: 100%;
position: relative;
overflow:hidden;
}
.slider-navigation--block {
display: flex;
border:1px solid;
background: #1D1D1D;
padding: 5px;
z-index: 3;
position: relative;
}
.slider-navigation--block label {
background: #2C2C2C;
padding: 20px;
color: #fff;
margin-right: 7px;
flex: 1;
cursor: pointer;
text-align: center;
position:relative;
display: inline-flex;
justify-content: center;
align-items: center;
min-height:100px;
border-radius: 4px;
text-shadow: 2px 2px 0 rgba(0,0,0,0.15);
font-weight: 600;
}
.slider-navigation--block label.active:before {
content: "";
position: absolute;
top: -11px;
transform: rotate(-135deg);
border: 12px solid;
border-color: transparent #537ACA #537ACA transparent;
left: calc(50% - 12px);
}
.slider-navigation--block label.active{
background-image: linear-gradient(to bottom, #537ACA, #425F9B);
}
.slider-navigation--block label:last-child {
margin-right: 0;
}
img {
max-width: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider--block">
<div class="slider">
<div class="image-window">
<input class="image-section" id="in-1" type="radio" checked name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext...
</figcaption>
<img src="http://dogavemanzara.weebly.com/uploads/2/3/2/8/23283920/6960961_orig.jpg">
</section>
<input class="image-section" id="in-2" type="radio" name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext about something else...
</figcaption>
<img src="http://desktopwallpapers.org.ua/pic/201111/1024x600/desktopwallpapers.org.ua-8624.jpg">
</section>
<input class="image-section" id="in-3" type="radio" name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext again about something else...
</figcaption>
<img src="http://dogavemanzara.weebly.com/uploads/2/3/2/8/23283920/6960961_orig.jpg">
</section>
</div>
<div class="slider-navigation--block">
<label class="active" for="in-1">AION [ру-офф]</label>
<label for="in-2">Perfect World [ру-офф]</label>
<label for="in-3">Lineage 2 [ру-офф]</label>
</div>
</div>
</div>

Categories

Resources