The problem is with a sliding-up footer, which is triggered by clicking on an up-arrow. The footer is positioned inside of the page-wrap(as everything is), and instead of sliding up/appearing inside of the page-wrap container as it should, it slides-up on top of it. The page-wrap container acts as a frame with rounded corners for the whole content of the page/website and all body elements are supposed to be inserted inside of it.
I tried several approaches to resolve the issue, including rearranging the HTML elements, adjusting the z-index values in the CSS, and tweaking the JavaScript code, but none of these efforts produced the desired result. I was expecting the footer to slide up inside the page-wrap container and not be positioned on top of everything.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Helvetica+Neue&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Retro Step</title>
</head>
<body>
<div class="page-wrap">
<footer class="slide-up-footer">
<div class="footer-text">
<p>FREE SHIPPING IN PORTUGAL / IN EUROPE FROM 150€ / EASY RETURNS</p>
</div>
<div class="footer-text2">
ABOUTTERMSPRIVACYCOOKIE SETTINGSSUPPORT
</div>
<div class="sign-up-promos">
<div id="info-text"></div>
<form id="newsletter-form" action="your-newsletter-signup-action" method="post" novalidate>
<input type="email" name="email" placeholder="Sign up for exclusive promos, popular releases & more" id="email-input" onfocus="displayInfo(), displaySecondInfo()" type="submit">
</form>
<div id="info-text2"></div>
</div>
<div class="footer-creds">
© GRUPO 15, 2023. ALL RIGHTS RESERVED. TW / TSIW
</div>
</footer>
<div class="up-arrow" id="up-arrow">
<span class="custom-class">^</span>
</div>
<script src="script.js"></script>
</div>
</body>
</html>
html {
scroll-behavior:smooth;
}
body {
font-family: 'Adobe Caslon Pro Bold', sans-serif;
background-color: red;
overflow: hidden;
}
body h1 {
text-align: center;
}
.page-wrap {
position: fixed;
top: 10px;
right: 10px;
left: 10px;
bottom: 10px;
background: white;
border-radius: 30px;
padding: 20px;
text-align: center;
overflow: hidden;
}
.page-wrap h1 {
margin: 0;
}
p {
line-height: 3;
}
::-webkit-scrollbar-track {
background: none;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 5px;
}
.slide-up-footer {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
font: 9px SuisseIntl-Regular, sans-serif;
position: fixed;
bottom: -1000px; /* or another value that will hide the footer */
width: 100vw;
height: 15%;
transition: all 0.7s ease-in-out;
background-color: white;
}
.slide-up-footer.show {
top: 500px;
}
.footer-text {
display: grid;
grid-row: 1/2;
font: 9px SuisseIntl-Regular, sans-serif;
color: black;
text-align: center;
padding: 10px;
justify-content: center;
position: relative;
display: grid;
}
.footer-text2 {
font: 9px SuisseIntl-Regular, sans-serif;
grid-row: 2/3;
color: black;
text-align: top;
padding: 10px;
}
.footer-text2 a{
text-decoration: none;
color: black;
margin: 0px 10px;
}
.footer-text2 a:hover{
text-decoration: underline;
color: black;
}
.footer-creds {
font: 9px SuisseIntl-Regular, sans-serif;
position: relative;
display: grid;
grid-row: 3/4;
color: black;
text-align: top;
padding: 10px;
margin: 0px 10px;
align-items: end;
}
.up-arrow {
transition: all 0.7s ease-in-out;
position: absolute;
bottom: 0px;
right: 0px;
margin: 2rem;
z-index: 999;
}
.custom-class{
font-weight: bold;
font: 20px SuisseIntl-Regular, sans-serif;
color:black;
cursor: pointer;
z-index: 999;
}
.sign-up-promos {
display: grid;
position: absolute;
justify-content: flex-end;
grid-row: 2/3;
grid-template-rows: 1fr 1fr 1fr ;
flex-wrap: wrap;
padding: 10px;
color: black;
float: right;
right: 20px;
}
.sign-up-promos form {
display: grid;
align-items: center;
grid-row: 2/3;
background: transparent;
border-bottom: 2px solid black;
}
.sign-up-promos label {
margin-right: 10px;
}
.sign-up-promos input {
text-align: left;
border: none;
background: transparent;
font: 10px SuisseIntl-Regular, sans-serif;
color: black;
padding: 5px;
width: 270px;
}
.sign-up-promos input::placeholder {
font: 10px SuisseIntl-Regular, sans-serif;
color: black;
}
#email-input:focus {
outline: none;
background: transparent;
}
.sign-up-promos input:focus {
outline: none;
background: transparent;
}
input:-webkit-autofill {
background-color: transparent !important;
}
#info-text {
display: grid;
text-transform: uppercase;
grid-row: 1/2;
align-items: flex-end;
transition: visibility 0.5s ease-in-out;
}
#info-text2 {
width: 270px; /* or any other value you prefer */
display: grid;
grid-row: 3/4;
align-items: center;
transition: visibility 0.5s ease-in-out;
}
#info-text.visible {
visibility: visible;
transform: translateY(-5px);
transition: visibility 0.5s, transform 0.5s ease-in-out;
}
#info-text2.visible {
visibility: visible;
transform: translateY(10px);
transition: visibility 0.5s, transform 0.5s ease-in-out;
}
// Get the up arrow element
const upArrow = document.getElementById("up-arrow");
const footer = document.querySelector(".slide-up-footer");
let isOpen = false;
// Add an event listener to toggle the "show" class
upArrow.addEventListener("click", toggleFooter);
function toggleFooter() {
if (isOpen) {
footer.style.bottom = "-100%";
upArrow.style.transform = "rotate(0deg)";
upArrow.style.bottom = "0";
} else {
footer.style.bottom = "0";
upArrow.style.bottom = "12%";
upArrow.style.transform = "rotate(180deg)";
}
isOpen = !isOpen;
}
function displayInfo() {
document.getElementById("info-text").innerHTML = "Enter email:";
document.getElementById("info-text").classList.add("visible")
}
function displaySecondInfo() {
document.getElementById("info-text2").innerHTML = "By signing up, you confirm you are over 16 years of age and you want to receive GOAT emails. Please see our Terms & Conditions and Privacy Policy for more details.";
document.getElementById("info-text2").classList.add("visible")
}
function validateEmail(email) {
var re = /^\S+#\S+.\S+$/;
return re.test(String(email).toLowerCase());
}
document.getElementById("newsletter-form").addEventListener("submit", function(event) {
event.preventDefault();
var emailInput = document.getElementById("email-input");
if (!validateEmail(emailInput.value)) {
// display an error message
document.getElementById("info-text2").innerHTML = "Please enter a valid email address.";
setTimeout(function() {
document.getElementById("email-input").value = "";
document.getElementById("info-text2").innerHTML = "By signing up, you confirm you are over 16 years of age and you want to receive GOAT emails. Please see our Terms & Conditions and Privacy Policy for more details.";
}, 1000);
} else {
// update the text of info-text
document.getElementById("info-text").innerHTML = "Thank you for subscribing!";
document.getElementById("info-text2").innerHTML = "";
document.getElementById("info-text").classList.add("submited");
setTimeout(function() {
document.getElementById("info-text").innerHTML = "Enter email:";
document.getElementById("info-text2").innerHTML = "By signing up, you confirm you are over 16 years of age and you want to receive GOAT emails. Please see our Terms & Conditions and Privacy Policy for more details.";
document.getElementById("info-text").classList.remove("submited");
emailInput.value = '';
}, 1500);
}
});
let slideUpFooter = document.querySelector(".slide-up-footer");
let infoText = document.getElementById("info-text");
let infoText2 = document.getElementById("info-text2");
let observer = new IntersectionObserver(function(entries, observer) {
entries.forEach(entry => {
if (!entry.isIntersecting) {
// footer is not in view, reset form
document.getElementById("email-input").value = "";
document.getElementById("info-text").innerHTML = "";
document.getElementById("info-text2").innerHTML = "";
infoText.removeAttribute("class");
infoText2.removeAttribute("class");
}
});
});
observer.observe(slideUpFooter);
document.getElementById("email-input").addEventListener("input", function(event) {
// check if the email input is empty
if (event.target.value.trim() === "") {
// display the original messages
document.getElementById("info-text").innerHTML = "Enter email:";
document.getElementById("info-text2").innerHTML = "By signing up, you confirm you are over 16 years of age and you want to receive GOAT emails. Please see our Terms & Conditions and Privacy Policy for more details.";
document.getElementById("info-text").classList.remove("submited");
}
});
I added a fixed position to the page-wrap element and set its top, right, left, and bottom properties to 10 pixels each. This positions the element in the center of the page. I also set a white background and a border radius of 30 pixels to create the rounded border.
Finally, I added a button to the page and some other components.
This allows you to test the appearance of the rounded border with additional elements on the page.
I hope this helps! Let me know if you have any questions.
I was able to create a page with a rounded inside body border by using the following code:
body {
background: #5bb0ff;
}
.page-wrap {
position: fixed;
top: 10px;
right: 10px;
left: 10px;
bottom: 10px;
background: white;
border-radius: 30px;
padding: 20px;
text-align: center;
overflow-y: scroll;
}
.page-wrap h1 {
margin: 0;
}
p {
line-height: 3;
}
::-webkit-scrollbar-track {
background: none;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 5px;
}
.texture-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-repeat: repeat;
background-image: url("images/texture.png");
mix-blend-mode: multiply;
pointer-events: none;
width: 100%;
height: 100%;
opacity: 0.5;
transform: translateZ(1px);
z-index:2
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Helvetica+Neue&display=swap" rel="stylesheet">
<link rel="stylesheet" href="teststyle.css" type="text/css">
<title>Retro Step</title>
</head>
<body>
<div class="page-wrap">
<h1>Rounded inside body border</h1>
<button>Add text</button>
</div>
<div class="texture-overlay"></div>
</body>
</html>
const footer = document.querySelector(".slide-up-footer");
.slide-up-footer {
display: grid;
position: fixed;
bottom: -1000px; /* or another value that will hide the footer */
width: 100vw;
...
The problem your script is applying the slide-up effect directly to the footer. In that moment footer is "detached" from the container .page-wrap
You should modify your script to apply the slide-up effect (adding a new class) directly to the .page-wrap-footer
or you need to apply the style and rounded borders directly to footer, removing it from the .page-wrap parent.
Related
I'm having trouble figuring out how to make the data-title only appear on hovering of the up-arrow only when the footer is down/not showing. However, I would also appreciate another solution where the data-title would still be visible when hovering the up-arrow even when the footer is up/showing. In this case, I would prefer the data-title to be displayed in its original position, up-right/0deg and on top of the up-arrow, rather than rotated 180deg and under the up-arrow.
I've tried using CSS and JavaScript to add and remove the data-title attribute, empty its innerHTML, and toggle its display, but nothing seems to work the way I want. Specifically, I was expecting the data-title to only appear on hover of an element (let's call it "Element A") when another element (let's call it "Element B") is hidden. Element A is the up-arrow, and I want the data-title to be shown on hover of Element A when Element B (the footer) is not visible on the page.
I suspect that the solution may be simple, but I'm struggling to figure it out. Any help or suggestions would be greatly appreciated.
// Get the up arrow element
const upArrow = document.getElementById("up-arrow");
const footer = document.querySelector(".slide-up-footer");
let isOpen = false;
// Add an event listener to toggle the "show" class
upArrow.addEventListener("click", toggleFooter);
upArrow.addEventListener("click", () => {
footer.classList.toggle("show");
});
function toggleFooter() {
if (isOpen) {
footer.style.bottom = "-100%";
upArrow.style.transform = "rotate(0deg)";
upArrow.style.bottom = "0";
} else {
footer.style.bottom = "0";
upArrow.style.bottom = "6%";
upArrow.style.transform = "rotate(180deg)";
}
isOpen = !isOpen;
}
html {
scroll-behavior:smooth;
}
body {
font-family: 'Adobe Caslon Pro Bold', sans-serif;
background-color: red;
overflow: hidden;
}
body h1 {
text-align: center;
}
.page-wrap {
position: fixed;
top: 10px;
right: 10px;
left: 10px;
bottom: 10px;
background: white;
border-radius: 30px;
padding: 20px;
text-align: center;
overflow: hidden;
}
.page-wrap h1 {
margin: 0;
}
p {
line-height: 3;
}
::-webkit-scrollbar-track {
background: none;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 5px;
}
.slide-up-footer {
display: flex;
flex-direction: column;
justify-content: center;
font: 10px Fakt Soft, sans-serif;
position: absolute;
bottom: -1000px; /* or another value that will hide the footer */
width: 100vw;
height: 8%;
transition: all 0.7s ease-in-out;
background-color: white;
}
.slide-up-footer.show {
bottom: 0;
}
.footer-text {
display: grid;
grid-row: 1/2;
font: 12px Fakt Soft, sans-serif;
color: black;
text-align: center;
padding: 10px;
justify-content: center;
position: relative;
}
.footer-text p{
line-height: 0;
}
.up-arrow {
transition: all 0.7s ease-in-out;
position: absolute;
bottom: 0px;
right: 0px;
margin: 2rem;
z-index: 999;
}
.custom-class{
font-weight: bold;
font: 20px Fakt Soft, sans-serif;
color:black;
cursor: pointer;
z-index: 999;
}
.custom-class:hover::before {
content: "FOOTER";
font: 12px Fakt Soft, sans-serif;
position: absolute;
background-color: transparent;
color: black;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Helvetica+Neue&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Retro Step</title>
</head>
<body>
<div class="page-wrap">
<footer class="slide-up-footer">
<div class="footer-text">
<p>FREE SHIPPING IN PORTUGAL / IN EUROPE FROM 150€ / EASY RETURNS</p>
</footer>
<div class="up-arrow" id="up-arrow">
<span class="custom-class" data-title="FOOTER">^</span>
</div>
<script src="script.js"></script>
</div>
</body>
</html>
So apply a style when the sibling as the show class to hide it from view
.slide-up-footer.show + .up-arrow > .custom-class:hover::before {
display: none;
}
// Get the up arrow element
const upArrow = document.getElementById("up-arrow");
const footer = document.querySelector(".slide-up-footer");
let isOpen = false;
// Add an event listener to toggle the "show" class
upArrow.addEventListener("click", toggleFooter);
upArrow.addEventListener("click", () => {
footer.classList.toggle("show");
});
function toggleFooter() {
if (isOpen) {
footer.style.bottom = "-100%";
upArrow.style.transform = "rotate(0deg)";
upArrow.style.bottom = "0";
} else {
footer.style.bottom = "0";
upArrow.style.bottom = "6%";
upArrow.style.transform = "rotate(180deg)";
}
isOpen = !isOpen;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Adobe Caslon Pro Bold', sans-serif;
background-color: red;
overflow: hidden;
}
body h1 {
text-align: center;
}
.page-wrap {
position: fixed;
top: 10px;
right: 10px;
left: 10px;
bottom: 10px;
background: white;
border-radius: 30px;
padding: 20px;
text-align: center;
overflow: hidden;
}
.page-wrap h1 {
margin: 0;
}
p {
line-height: 3;
}
::-webkit-scrollbar-track {
background: none;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 5px;
}
.slide-up-footer {
display: flex;
flex-direction: column;
justify-content: center;
font: 10px Fakt Soft, sans-serif;
position: absolute;
bottom: -1000px;
/* or another value that will hide the footer */
width: 100vw;
height: 8%;
transition: all 0.7s ease-in-out;
background-color: white;
}
.slide-up-footer.show {
bottom: 0;
}
.footer-text {
display: grid;
grid-row: 1/2;
font: 12px Fakt Soft, sans-serif;
color: black;
text-align: center;
padding: 10px;
justify-content: center;
position: relative;
}
.footer-text p {
line-height: 0;
}
.up-arrow {
transition: all 0.7s ease-in-out;
position: absolute;
bottom: 0px;
right: 0px;
margin: 2rem;
z-index: 999;
}
.custom-class {
font-weight: bold;
font: 20px Fakt Soft, sans-serif;
color: black;
cursor: pointer;
z-index: 999;
}
.custom-class:hover::before {
content: "FOOTER";
font: 12px Fakt Soft, sans-serif;
position: absolute;
background-color: transparent;
color: black;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
}
.slide-up-footer.show+.up-arrow>.custom-class:hover::before {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Helvetica+Neue&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Retro Step</title>
</head>
<body>
<div class="page-wrap">
<footer class="slide-up-footer">
<div class="footer-text">
<p>FREE SHIPPING IN PORTUGAL / IN EUROPE FROM 150€ / EASY RETURNS</p>
</footer>
<div class="up-arrow" id="up-arrow">
<span class="custom-class" data-title="FOOTER">^</span>
</div>
<script src="script.js"></script>
</div>
</body>
</html>
I want to make an weather app and I want to let the user to add in the application some weather cards with the city they are interested with. If they no longer want a specific weather card, they can delete it. For now, you can add some empty cards by using the + button.
Below is what I did and how the app looks like.
In the first phase I want the displayed cards to show the city weather information at the current time and with a hover I want the card to expand and display more information about that city such as a 5 day forecast.
I don't know how to stretch a specific card on hover and I'm asking your help with this problem. Thank you!
const displayContent = document.querySelector('.content');
const widget = document.querySelector('.widget');
const addWidget = document.querySelector(".addButton");
console.log(displayContent)
addWidget.addEventListener('click', newWidget);
var cont=0;
function newWidget(){
cont=cont+1;
let newWidget = document.createElement('div');
newWidget.setAttribute('class', 'widget');
newWidget.setAttribute('id', "widget" + cont);
let closeBtn = document.createElement('span');
closeBtn.setAttribute('class', 'remove');
closeBtn.setAttribute('id', 'remove' +cont);
closeBtn.textContent = '✕';
displayContent.appendChild(newWidget);
newWidget.appendChild(closeBtn);
//remove the cards
var close = document.querySelectorAll("span");
for(let i=0 ; i<close.length; i++){
close[i].addEventListener('click', () =>{
close[i].parentElement.remove();
})
}
}
#import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
:root {
--fontcolor: #313131;
--bgcolor: #FAFAFA;
}
html {
font-family: "Roboto", sans-serif;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--bgcolor);
margin: 0;
color: var(--fontcolor);
transition: background-color 500ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.container {
max-width: 85vw;
margin: 0 auto;
}
header {
display: flex;
margin-bottom: 30px;
font-size: 1.5em;
align-items: center;
justify-content: space-between;
}
.search {
width: 100%;
position: relative;
display: flex;
}
.searchTerm {
width: 100%;
border: 3px solid black;
border-right: none;
padding: 5px;
height: 20px;
border-radius: 5px 0 0 5px;
outline: none;
}
.addButton {
width: 40px;
height: 36px;
border: 1px solid black;
background: black;
text-align: center;
color: #fff;
border-radius: 0 6px 5px 0;
cursor: pointer;
font-size: 20px;
}
.content {
margin-bottom: 1em;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-auto-rows: minmax(250px, 1fr);
grid-gap: 25px;
}
.widget {
color: white;
display: flex;
flex-direction: column;
padding: 25px;
position: relative;
white-space: normal;
word-wrap: break-word;
transition: background-color 50ms;
background: linear-gradient(130deg, rgba(25,118,210,1) 0%, rgba(63,81,181,1) 100%);
box-shadow: 5px 5px 18px -1px rgb(0 0 0 / 34%);
border-radius: 5px;
}
.remove{
position: absolute;
top: 5px;
right: 12px;
font-size: 22px;
opacity: 0.7;
cursor: pointer;
}
#keyframes append-animate {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0%);
opacity: 1;
}
}
/* animate new box */
.widget {
animation: append-animate .3s linear;
}
<!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">
<title>My Library</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/31c84a9fec.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<header class="header">
<h1 id='title'>Weather App</h1>
<div class="control">
<div class="wrap">
<div class="search">
<input type="text" class="searchTerm" placeholder="Add a city">
<button type="submit" class="addButton">+</button>
</div>
</div>
</div>
</header>
<div class="content">
<div class="widget" id="widget0">
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Have you tried using CSS transitions?
div {
width: 100px;
height: 100px;
background-color: blue;
margin: 10px;
transition: all 1s;
}
div.h:hover {
width: 150px;
background-color: purple;
}
div.v:hover {
height: 150px;
background-color: purple;
}
<div class="h"></div>
<div class="v"></div>
i really need help with a memory-style game that i have to create for a school project. The issue right now is that my if statements wont really work properly. i want to compare cards and then if they match they should stay open and the score should go up, and if they don't match they should close again. but right now it says the first card click is right and anything clicked on after that is wrong
//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');
}
}
}
});
var score = 0;
var firstClick = null;
var secondoClick = null;
const cards = document.getElementsByClassName("card");
window.addEventListener("click", (event) => {
for (let i = 0; i < cards.length; i++) {
cards[i].addEventListener("click", function() {
cards[i].classList.add("open");
})};
let clicked = event.target.dataset.type;
if(firstClick == null){
firstClick = clicked
} else {
secondoClick = clicked
}
if(secondoClick == firstClick){
console.log('same click')
score++;
firstClick = null;
secondoClick = null;
} else if(secondoClick != null && firstClick != secondoClick) {
console.log('metti null')
firstClick = null;
secondoClick = null;
}});
* {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
}
header {
background-color:#00005e;
height: 60px;
position: relative;
}
header h1 {
color: white;
position: absolute;
top: 17%;
left: 39%;
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:#00005e;
min-width: 160px;
max-width: 400px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
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: 20px;
}
/*The game section*/
section {
max-width: 1300px;
height: 550px;
display: flex;
justify-content: space-around;
margin-top: 20px;
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: 100%;
height: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 185px;
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 );
}
}
/* .welcome {
display: flex;
justify-content: center;
text-align: center;
color: #3c3b6e;
margin-top: 100px;
font-size: 50px;
clear: both;
position: absolute;
}
.startbutton {
display: flex;
justify-content: center;
align-self: center;
margin-top: 100px;
position: absolute;
background-color: #00005e;
color: #e8ebf1;
padding: 10px;
font-size: 30px;
border-radius: 4px;
z-index: 0;
border-color: transparent;
}
.startbutton:hover{
cursor: pointer;
background-color: #3c3b6e;
}
*/
/*The game*/
/*The 'DID YOU KNOW' over the ticker*/
.facts {
display: flex;
justify-content: space-around;
margin-top: 30px;
font-size: 20px;
color: #00005e;
}
/*The facts ticker*/
.tcontainer {
max-width: 1200px;
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"><h2></h2></div>
<section>
<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>
<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>
https://codepen.io/anna100d/pen/wvgQLdW
Problems with code can be much easier to understand and solve if they can be simplified first. Here is a stripped-down version of your game that makes it easy to focus on the logic of the click event listener. (Opening a card in this version merely changes its color.)
In the listener, when the first card is clicked, we want to open it and remember it for later.
When the second card is clicked, we open it and compare it to the first card, then we must forget the first card. (If they match, the score changes; if not, we close both cards.)
Edit:
If the two cards don't match, both cards get closed. To let the user see the selected cards while they're both open, you can put the code that closes the cards into a function and pass that function to JavaScript's built-in setTimeout function.
I updated the snippet to include this behavior (using a couple of additional tricks while I was at it: the "rest" syntax, a "fat arrow" function, and a "closure" -- Search for the respective pages on MDN if you want to learn more about these features.)
// 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){
cardToMatch = card;
}
// If it's the 2nd card, compare types
else{
// 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
resetCardsAfterDelay(cardToMatch, card);
}
// 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;
}
function resetCardsAfterDelay(...listOfCards){
//Takes any number of cards via "rest parameter syntax"
// Uses `setTimeout` to call inner `resetAll` func after delay
// Passes our `resetAll` func to `setTimeout` with a delay in milliseconds
const DELAY = 1200;
setTimeout(resetAll, DELAY);
// Inner func (a "closure") knows about `listOfCards`
function resetAll(){
// In a loop, applies a "fat arrow" func to each card
listOfCards.forEach(
(card) => card.classList.remove("open")
)
}
};
*{ margin: 0; padding: 0; }
.header{ margin: 0.3rem; font-size: 1.1rem; }
.score{ margin: 0.3em; font-weight: bold; }
.card{
width: 14em; margin: 0.3em; padding: 0.1em 0.3em;
border-radius: 0.5em; border: 1px solid grey;
}
.open{ background-color: lightskyblue; }
<h1 class="header">The Password Game</h1>
<div class="score">Score: <span>0</span> </div>
<hr/>
<div class="card" data-type="1"> Never use..? (1) </div>
<div class="card" data-type="1"> Name and Birthday (1) </div>
<div class="card" data-type="2"> Tell password to..? (2) </div>
<div class="card" data-type="2"> No one (2) </div>
<div class="card" data-type="3"> Always change PW..? (3) </div>
<div class="card" data-type="3"> After a data breach (3) </div>
I am Sandhya and I am trying to change the color of the pseudo span added to the input box, on the left side when I click on calculate button in the code given below.
I was unable to add code as it's showing the error It looks like your post is mostly code; please add some more details.
*,
::after,
::before {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
}
.container {
display: flex;
width: 100%;
height: 100vh;
}
.leftcontainer {
background-color: #e9ecef;
width: 20%;
height: 100%;
}
.userprofile::after {
content: "";
display: block;
background: lightgray;
width: 100%;
height: 1px;
bottom: 0;
z-index: 1;
position: absolute;
}
.userprofile img {
width: 50px;
height: 50px;
border-radius: 50%;
}
.maincontent {
width: 100%;
padding: 15px;
}
.maincontent-header p {
text-align: justify;
font-weight: lighter;
font-weight: 200;
}
.readings {
padding-top: 15px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.readings input {
width: 100px;
height: 50px;
border: none;
padding: 15px;
font-weight: 600;
}
.readings input:focus,
button:focus {
outline: none;
}
.readings button:hover {
outline: none;
background-color: #b5e48c;
}
.reading-group p {
padding-top: 5px;
font-size: 10px;
padding-bottom: 15px;
}
.readings button {
height: 50px;
padding: 8px 8px;
background-color: lightgray;
border: none;
font-size: 15px;
font-weight: 600;
color: #14213d;
cursor: pointer;
box-sizing: border-box;
}
.systolic {
position: relative;
}
.systolic::after {
content: "";
display: block;
background: lightgray;
width: 5px;
height: 100%;
bottom: 0;
z-index: 1;
position: absolute;
}
.diastolic {
position: relative;
}
.diastolic::after {
content: "";
display: block;
background: lightgray;
width: 5px;
height: 100%;
bottom: 0;
left: 0;
z-index: 1;
position: absolute;
}
<!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">
<title>Blood Pressure Calculator</title>
</head>
<body>
<div class="container">
<div class="leftcontainer">
<div class="maincontent">
<div class="maincontent-header">
<p>Enter your blood pressure reading here :</p>
</div>
<div class="readings">
<div class="reading-group">
<span class="systolic"><input type="text" id="sys" placeholder="Systolic"></span>
<span class="diastolic"><input type="text" id="dys" placeholder="Diastolic"></span>
<button type="button" onclick="calculatebp();">Calculate</button>
<p>(mm Hg)</p>
</div>
</div>
</div>
</div>
</body>
</html>
This is the end of the code and looks forward to your support.
You if you want to change color of pseudo-elements, you can do something like make a new css for a class for a new background color, and add or remove that class using javascript
Put this is css:
.red_pseudo::after{
background: red;
}
Now I am adding the class when the function runs, hence when class is added their bg color will change to red
let diastolic_pseudo = document.getElementsByClassName('diastolic')[0]
let systolic_pseudo = document.getElementsByClassName('systolic')[0]
function calculatebp() {
alert('you clicked :)');
diastolic_pseudo.classList.add('red_pseudo')
systolic_pseudo.classList.add('red_pseudo')
}
Try here : https://codepen.io/sachuverma/pen/OJbKBbo
This dropdown icon wont turn smoothly, transitions dont work, when the dropdown opens its sudden, same with when it closes, it doesnt close when you click elsewhere on the screen and stays open.
hopefully someone can help and if there is an answer it helps other people looking to do similar.
Here is my code:
JsFiddle if you find it easier: https://jsfiddle.net/Vorex/tr3196L7/1/
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.cssText === "display: block;") {
dropdownContent.style.cssText = "display: none;";
} else {
dropdownContent.style.cssText = "display: block;";
}
});
}
$(".btn_body").click(function () {
$(this).find('i').toggleClass('fa-caret-down fa-caret-right');
if ($(".btn_body").not(this).find("i").hasClass("fa-caret-down")) {
$(".btn_body").not(this).find("i").toggleClass('fa-caret-down fa-caret-right');
}
});
/*===================
CHAT SIDEBAR
====================*/
.chatbar {
scrollbar-width: none;
font-family: 'Tomorrow', sans-serif;
height: 100%;
color: white;
background-color: #363b42;
list-style-type: none;
text-align: center;
margin: 0px;
width: 25%;
padding: 0px;
overflow-y: scroll;
position: fixed;
z-index: 1;
top: 0;
left: 0;
overflow-x: hidden;
padding-top: 20px;
}
.chatbar h1 {
font-size: 25px;
}
.chatbar a, .dropdown-btn {
font-size: 20px;
text-align: center;
display: block;
position: sticky;
text-decoration: none;
padding: 10px;
padding-bottom:15px;
color: white;
transition: 1s ease;
}
.chatbar a:hover, .dropdown-btn:hover {
background-color: #5a626d;
border-radius: 10px;
transition: background-color .5s ease;
}
.chatbar img {
height: 32px;
width: 32px;
border-radius: 16px;
float: left;
}
.chatbar::-webkit-scrollbar {
display: none;
}
.dropdown-btn {
padding: 10px;
text-decoration: none;
font-size: 20px;
color: #fff;
display: block;
border: none;
background: none;
width: 100%;
text-align: center;
cursor: pointer;
outline: none;
font-family: 'Tomorrow', sans-serif;
}
.dropdown-container {
display: none;
background-color: #363b42;
padding-left: 8px;
}
.btn_body {
color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="chatbar">
<h1> Chatbar </h1><br>
Global Chat
Messages
<button class="dropdown-btn btn_body">Dropdown <i class="fa fa-caret-right"></i></button>
<div class="dropdown-container">
Link 1
Link 2
Link 3
</div>
</div>
</body>
</html>
As I told you in the comment you need to rotate your object by either applying a JS animation or (probably easier for you) toggle a class, which rotates your object.
Here an example, and you can obviously adapt it to use jQuery... i don't use it, as i don't like it:
const ddButton = document.querySelector('.dropdown-btn');
ddButton.addEventListener('click', event => {
document.querySelector(".fa.fa-caret-up").classList.toggle("rotate-icon");
});
.fa-caret-up {
transform: rotate(0deg);
transition: all 0.5s ease;
}
.fa-caret-up.rotate-icon {
transform: rotate(180deg);
}
<button class="dropdown-btn btn_body">Dropdown <i class="fa fa-caret-up"></i></button>