CSS z-index property and javascript background mouse interaction

CSS z-index property and javascript background mouse interaction - javascript

I'm trying to add a radial gradient as a background of my blogpost card.
This radial gradient should follow the cursor when the
blog post card is hovered. Here here my little code example about the
effect ( https://codepen.io/D_s/pen/OJNpNBV ).
The problem is that doesn't work as expected because the other div elements of the card (title, image, tags, button) are interfering with the hovering. How i can solve this?
Here is the code of the blog post card:
let backgroundgradient = document.querySelector('.card');
backgroundgradient.onmousemove = function(e) {
let rect = e.target.getBoundingClientRect();
let x = e.clientX - rect.left;
let y = e.clientY - rect.top;
backgroundgradient.style.setProperty('--x', x + 'px');
backgroundgradient.style.setProperty('--y', y + 'px');
}
Thank you for the help!

Instead of using e.target.getBoundingClientRect() and .left/.right which will change as the child elements are hovered, consider using the .offsetLeft/.offsetRight of the .card element itself.
let backgroundgradient = document.querySelector('.card');
backgroundgradient.onmousemove = function(e) {
let x = e.clientX - backgroundgradient.offsetLeft;
let y = e.clientY - (backgroundgradient.offsetTop - window.pageYOffset);
backgroundgradient.style.setProperty('--x', x + 'px');
backgroundgradient.style.setProperty('--y', y + 'px');
}
.card,
.imagebox {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.imagebox {
flex: 3 1 30ch;
height: calc(282px + 5vw);
overflow: hidden;
}
.imagebox img {
max-width: 100%;
min-width: 100%;
min-height: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: cover;
object-position: 50% 50%;
padding: 15px;
border-radius: 30px;
z-index: 1;
}
.card {
background: #bdbdbd;
box-sizing: border-box;
border: 2px solid #f93668;
overflow: hidden;
position: relative;
border-radius: 20px;
overflow: hidden;
}
.card:before {
--size: 0;
content: '';
position: absolute;
left: var(--x);
top: var(--y);
width: var(--size);
height: var(--size);
background: radial-gradient(circle closest-side, #f93668, transparent);
transform: translate(-50%, -50%);
transition: width 0.8s ease, height 0.4s ease;
}
.card:hover:before {
--size: 90rem;
}
.card-content {
padding: 16px 32px;
flex: 10 1 40ch;
z-index: 2;
}
.card-tags {
margin: 0 -8px;
}
.card-tag {
display: inline-block;
margin: 8px;
font-size: 0.875em;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--primary);
}
.card-title {
margin: 0;
font-size: clamp(2.4em, 1.1vw, 1.1em);
font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
}
.card-title a {
text-decoration: none;
color: inherit;
}
.card-metadata {
margin: 0;
}
.card-save {
display: flex;
align-items: center;
padding: 6px 14px 6px 12px;
border-radius: 4px;
border: 2px solid currentColor;
color: var(--primary);
background: none;
cursor: pointer;
font-weight: bold;
}
.card-save svg {
margin-right: 6px;
}
/* Body Layout */
* {
box-sizing: border-box;
}
body {
--primary: rgb(249, 54, 104);
--grey: #454545;
--lightgrey: #666;
color: var(--grey);
line-height: 1.55;
display: flex;
justify-content: center;
flex-wrap: wrap;
font-family: "Roboto", Helvetica, Arial, sans-serif;
}
.container {
width: clamp(20px, 90%, 90%);
padding: 24px;
}
<div class="container">
<article class="card">
<div class="imagebox">
<img src="https://d2w9rnfcy7mm78.cloudfront.net/2548871/original_eb4afb32258fcb72de6dddd99cbc4171.jpg?1534159969?bc=1" width="1500" height="1368" alt="">
</div>
<div class="card-content">
<p class="card-tags">
<span class="card-tag">Gluten Free</span>
<span class="card-tag">Main dish</span>
</p>
<h1 class="card-title">Title for a post to come</h1>
<p class="card-desc">by Slutty Urbanism</p>
<button class="card-save" type="button">
Read more
</button>
</div>
</article>
</div>
An example with multiple card elements...
let cards = document.querySelectorAll('.card');
for (let card of cards) {
card.onmousemove = function(e) {
let x = e.clientX - card.offsetLeft;
let y = e.clientY - (card.offsetTop - window.pageYOffset);
card.style.setProperty('--x', x + 'px');
card.style.setProperty('--y', y + 'px');
}
}
.card,
.imagebox {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.imagebox {
flex: 3 1 30ch;
height: calc(282px + 5vw);
overflow: hidden;
}
.imagebox img {
max-width: 100%;
min-width: 100%;
min-height: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: cover;
object-position: 50% 50%;
padding: 15px;
border-radius: 30px;
z-index: 1;
}
.card {
background: #bdbdbd;
box-sizing: border-box;
border: 2px solid #f93668;
overflow: hidden;
position: relative;
border-radius: 20px;
overflow: hidden;
}
.card:before {
--size: 0;
content: '';
position: absolute;
left: var(--x);
top: var(--y);
width: var(--size);
height: var(--size);
background: radial-gradient(circle closest-side, #f93668, transparent);
transform: translate(-50%, -50%);
transition: width 0.8s ease, height 0.4s ease;
}
.card:hover:before {
--size: 90rem;
}
.card-content {
padding: 16px 32px;
flex: 10 1 40ch;
z-index: 2;
}
.card-tags {
margin: 0 -8px;
}
.card-tag {
display: inline-block;
margin: 8px;
font-size: 0.875em;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--primary);
}
.card-title {
margin: 0;
font-size: clamp(2.4em, 1.1vw, 1.1em);
font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
}
.card-title a {
text-decoration: none;
color: inherit;
}
.card-metadata {
margin: 0;
}
.card-save {
display: flex;
align-items: center;
padding: 6px 14px 6px 12px;
border-radius: 4px;
border: 2px solid currentColor;
color: var(--primary);
background: none;
cursor: pointer;
font-weight: bold;
}
.card-save svg {
margin-right: 6px;
}
/* Body Layout */
* {
box-sizing: border-box;
}
body {
--primary: rgb(249, 54, 104);
--grey: #454545;
--lightgrey: #666;
color: var(--grey);
line-height: 1.55;
display: flex;
justify-content: center;
flex-wrap: wrap;
font-family: "Roboto", Helvetica, Arial, sans-serif;
}
.container {
width: clamp(20px, 90%, 90%);
padding: 24px;
}
<div class="container">
<article class="card">
<div class="imagebox">
<img src="https://d2w9rnfcy7mm78.cloudfront.net/2548871/original_eb4afb32258fcb72de6dddd99cbc4171.jpg?1534159969?bc=1" width="1500" height="1368" alt="">
</div>
<div class="card-content">
<p class="card-tags">
<span class="card-tag">Gluten Free</span>
<span class="card-tag">Main dish</span>
</p>
<h1 class="card-title">Title for a post to come</h1>
<p class="card-desc">by Slutty Urbanism</p>
<button class="card-save" type="button">
Read more
</button>
</div>
</article>
<article class="card">
<div class="imagebox">
<img src="https://d2w9rnfcy7mm78.cloudfront.net/2548871/original_eb4afb32258fcb72de6dddd99cbc4171.jpg?1534159969?bc=1" width="1500" height="1368" alt="">
</div>
<div class="card-content">
<p class="card-tags">
<span class="card-tag">Gluten Free</span>
<span class="card-tag">Main dish</span>
</p>
<h1 class="card-title">Title for a post to come</h1>
<p class="card-desc">by Slutty Urbanism</p>
<button class="card-save" type="button">
Read more
</button>
</div>
</article>
</div>

Related

Why is my automatic chatbox not showing up?

So when i click "chat with us", the full chat box must appear but it doesn't. The console announces mistake as:'Uncaught TypeError: Cannot read property 'style' of null
at HTMLButtonElement. '
Anything wrong with my codes? somebody can help me? Thank you so much!
This is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Snake</title>
<link rel="stylesheet" href="chat.css">
<script src="https://kit.fontawesome.com/48a972c999.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="chat-bar-collapsible">
<button id="chat-bar-button" type="button" class="collapsible">Chat With Us!
<i id="chat-icon" style="color: #fff;" class="fas fa-fw fa-comment-o"></i>
</button>
</div>
<div class="content">
<div class="full-chat-block">
<!--Mesage Container-->
<div class="outer-container">
<div class="container">
<!--Messages-->
<div id="chatbox">
<h5 id="chat-timestamp"></h5>
<p id="botStarterMessages " class="botText"><span>loading...</span></p>
</div>
<!--User Input Box-->
<div class="chat-bar-input-block">
<div id="user-input">
<input type="text" id="textInput" class="input-box" placeholder="Tap 'enter' to send a mesage" />
<p></p>
</div>
<div class="chat-bar-icons">
</div>
</div>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
</html>
This is my css:
.chat-bar-collapsible {
position: fixed;
bottom: 0;
right: 50px;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.collapsible {
background-color: rgb(82, 151, 255);
color: white;
cursor: pointer;
padding: 18px;
width: 350px;
text-align: left;
outline: none;
font-size: 18px;
border-radius: 10px 10px 0px 0px;
border: 3px solid white;
border-bottom: none;
}
.content {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
.full-chat-block {
width: 350px;
background: white;
text-align: center;
overflow: auto;
scrollbar-width: none;
height: max-content;
transition: max-height 0.2s ease-out;
}
.outer-container {
min-height: 500px;
bottom: 0%;
position: relative;
}
.chat-container {
max-height: 500px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
scroll-behavior: smooth;
hyphens: auto;
}
.chat-container::-webkit-scrollbar {
display: none;
}
.chat-bar-input-block {
display: flex;
float: left;
box-sizing: border-box;
justify-content: space-between;
width: 100%;
align-items: center;
background-color: rgb(235, 235, 235);
border-radius: 10px 10px 0px 0px;
padding: 10px 0px 10px 10px;
}
.chat-bar-icons {
display: flex;
justify-content: space-evenly;
box-sizing: border-box;
width: 25%;
float: right;
font-size: 20px;
}
#chat-icon:hover {
opacity: .7;
}
/* Chat bubbles */
#userInput {
width: 75%;
}
.input-box {
float: left;
border: none;
box-sizing: border-box;
width: 100%;
border-radius: 10px;
padding: 10px;
font-size: 16px;
color: #000;
background-color: white;
outline: none
}
.userText {
color: white;
font-family: Helvetica;
font-size: 16px;
font-weight: normal;
text-align: right;
clear: both;
}
.userText span {
line-height: 1.5em;
display: inline-block;
background: #5ca6fa;
padding: 10px;
border-radius: 8px;
border-bottom-right-radius: 2px;
max-width: 80%;
margin-right: 10px;
animation: floatup .5s forwards
}
.botText {
color: #000;
font-family: Helvetica;
font-weight: normal;
font-size: 16px;
text-align: left;
}
.botText span {
line-height: 1.5em;
display: inline-block;
background: #e0e0e0;
padding: 10px;
border-radius: 8px;
border-bottom-left-radius: 2px;
max-width: 80%;
margin-left: 10px;
animation: floatup .5s forwards
}
#keyframes floatup {
from {
transform: translateY(14px);
opacity: .0;
}
to {
transform: translateY(0px);
opacity: 1;
}
}
#media screen and (max-width:600px) {
.full-chat-block {
width: 100%;
border-radius: 0px;
}
.chat-bar-collapsible {
position: fixed;
bottom: 0;
right: 0;
width: 100%;
}
.collapsible {
width: 100%;
border: 0px;
border-top: 3px solid white;
border-radius: 0px;
}
}
This is my JS:
var coll = document.getElementsByClassName('collapsible')
for (let i = 0; i < coll.length; i++) {
coll[i].addEventListener('click', function() {
this.classList.toggle('active')
var content = this.nextElementSibling
if (content.style.maxHeight) {
content.style.maxHeight = null
} else {
content.style.maxHeight = content.scrollHeight + "px"
}
})
}

Using .nextSibling will look directly for the next child element under your parent div. Since this refers to your button inside of chat-bar-collapsible there are no more child elements that are adjacent to your button element under the char-bar-collapsible div. You need to walk up to the parent element using .parentNode, and then access the adjacent content div from that using .nextElementSibling:
var content = this.parentNode.nextElementSibling;
var coll = document.getElementsByClassName('collapsible');
for (let i = 0; i < coll.length; i++) {
coll[i].addEventListener('click', function() {
this.classList.toggle('active');
var content = this.parentNode.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null
} else {
content.style.maxHeight = content.scrollHeight + "px"
}
})
}
.chat-bar-collapsible {
position: fixed;
bottom: 0;
right: 50px;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.collapsible {
background-color: rgb(82, 151, 255);
color: white;
cursor: pointer;
padding: 18px;
width: 350px;
text-align: left;
outline: none;
font-size: 18px;
border-radius: 10px 10px 0px 0px;
border: 3px solid white;
border-bottom: none;
}
.content {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
.full-chat-block {
width: 350px;
background: white;
text-align: center;
overflow: auto;
scrollbar-width: none;
height: max-content;
transition: max-height 0.2s ease-out;
}
.outer-container {
min-height: 500px;
bottom: 0%;
position: relative;
}
.chat-container {
max-height: 500px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
scroll-behavior: smooth;
hyphens: auto;
}
.chat-container::-webkit-scrollbar {
display: none;
}
.chat-bar-input-block {
display: flex;
float: left;
box-sizing: border-box;
justify-content: space-between;
width: 100%;
align-items: center;
background-color: rgb(235, 235, 235);
border-radius: 10px 10px 0px 0px;
padding: 10px 0px 10px 10px;
}
.chat-bar-icons {
display: flex;
justify-content: space-evenly;
box-sizing: border-box;
width: 25%;
float: right;
font-size: 20px;
}
#chat-icon:hover {
opacity: .7;
}
/* Chat bubbles */
#userInput {
width: 75%;
}
.input-box {
float: left;
border: none;
box-sizing: border-box;
width: 100%;
border-radius: 10px;
padding: 10px;
font-size: 16px;
color: #000;
background-color: white;
outline: none
}
.userText {
color: white;
font-family: Helvetica;
font-size: 16px;
font-weight: normal;
text-align: right;
clear: both;
}
.userText span {
line-height: 1.5em;
display: inline-block;
background: #5ca6fa;
padding: 10px;
border-radius: 8px;
border-bottom-right-radius: 2px;
max-width: 80%;
margin-right: 10px;
animation: floatup .5s forwards
}
.botText {
color: #000;
font-family: Helvetica;
font-weight: normal;
font-size: 16px;
text-align: left;
}
.botText span {
line-height: 1.5em;
display: inline-block;
background: #e0e0e0;
padding: 10px;
border-radius: 8px;
border-bottom-left-radius: 2px;
max-width: 80%;
margin-left: 10px;
animation: floatup .5s forwards
}
#keyframes floatup {
from {
transform: translateY(14px);
opacity: .0;
}
to {
transform: translateY(0px);
opacity: 1;
}
}
#media screen and (max-width:600px) {
.full-chat-block {
width: 100%;
border-radius: 0px;
}
.chat-bar-collapsible {
position: fixed;
bottom: 0;
right: 0;
width: 100%;
}
.collapsible {
width: 100%;
border: 0px;
border-top: 3px solid white;
border-radius: 0px;
}
}
<script src="https://kit.fontawesome.com/48a972c999.js" crossorigin="anonymous"></script>
<div class="chat-bar-collapsible">
<button id="chat-bar-button" type="button" class="collapsible">Chat With Us!<i id="chat-icon" style="color: #fff;" class="fas fa-fw fa-comment-o"></i></button>
</div>
<div class="content">
<div class="full-chat-block">
<!--Mesage Container-->
<div class="outer-container">
<div class="container">
<!--Messages-->
<div id="chatbox">
<h5 id="chat-timestamp"></h5>
<p id="botStarterMessages " class="botText"><span>loading...</span></p>
</div>
<!--User Input Box-->
<div class="chat-bar-input-block">
<div id="user-input">
<input type="text" id="textInput" class="input-box" placeholder="Tap 'enter' to send a mesage" />
<p></p>
</div>
<div class="chat-bar-icons">
</div>
</div>
</div>
</div>
</div>
</div>

How to adjust the "Total Price" whenever I change the input values?

Whenever I add an item to the cart, the item appends to the row in the shopping cart, and the price will adjust. But I am having some trouble having the price adjusting to whenever I change the inputs (input: "type" = number) values. I cannot seem to find the correct format. Can I have some assistance? Feedback is much appreciated. Here to learn!
HTML:
<!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>E-Commerce Website</title>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<link rel="stylesheet" href="/fonts/fontawesome-free-5.3.1-web/css/all.css"><link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="p1" id="p1">
<div class="topnavcont">
<ul class="topleftnav">
<li class="topnavlink">Home</li>
<li class="topnavlink">Shop</li>
</ul>
<h1 class="topnavtitle">The Store</h1>
<div class="navcartcontainer">
<h3 class="totalnumber">0</h3>
<i class="fas fa-shopping-cart" id="cartbtn"></i>
</div>
</div>
<!-- <img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="bgimg"> -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><img src="clark-street-mercantile-P3pI6xzovu0-unsplash.jpg" alt="" class="bgimg"><div class="overlay"></div></div>
<div class="swiper-slide"><img src="michela-ampolo-7tDGb3HrITg-unsplash.jpg" alt="" class="bgimg"><div class="overlay"></div></div>
<!-- <div class="swiper-slide">Slide 3</div>
... -->
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev arrow"></div>
<div class="swiper-button-next arrow"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
<div class="cartbody">
<i class="fal fa-times" id="closeicon"></i>
<h2 class="carttitle">Shopping Cart</h2>
<ul class="cartitems">
<!-- <div><li class="cartitem"><span class="itemtitle">Shirt1</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li></div>
<div><li class="cartitem"><span class="itemtitle">Shirt2</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li></div>
<div><li class="cartitem"><span class="itemtitle">Shirt3</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li></div> -->
</ul>
<h3 class="actualprice carttotal"id="actualprice">Total: $0</h3>
<button class="purchasebtn" id="purchasebtn">Purchase</button>
</div>
</div>
<div class="p2" id="p2">
<h1 class="p2title">My Shop</h1>
<div class="itemcontainer">
<div class="item">
<img src="anomaly-WWesmHEgXDs-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">White Shirt</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="revolt-164_6wVEHfI-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Red Shoes</h1>
<h3 class="itemprice">$4.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="sebastian-coman-travel-dtOTQYmTEs0-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Sunglasses</h1>
<h3 class="itemprice">$6.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
</div>
<div class="itemcontainer2">
<div class="item">
<img src="haley-phelps-RgJ-NU_qWjM-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Jeans</h1>
<h3 class="itemprice">$1.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="olive-tatiane-ImEzF9B91Mk-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Necklace</h1>
<h3 class="itemprice">$6.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="rafael-silva-fc2Q2DKBCYY-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Beanie</h1>
<h3 class="itemprice">$2.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="app.js"async></script>
</body>
</html>
CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
::-webkit-scrollbar{
display: none;
}
.wrapper{
overflow-x: hidden;
}
.topnavcont{
padding: 1em 0em;
align-items: center;
height: 10vh;
width: 100vw;
display: flex;
justify-content: space-around;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.10) 0px 3px 6px, rgba(0, 0, 0, 0.20) 0px 3px 6px;
position: fixed;
z-index: 5;
}
a{
text-decoration: none;
color: black;
}
.topleftnav{
display: flex;
justify-content: space-between;
width: 10%;
margin-left: -3%;
font-weight: bold;
}
.topleftnav li{
cursor: pointer;
list-style: none;
font-size: 1.05rem;
transition: 0.3s ease;
border-bottom: transparent solid 2px;
}
.topleftnav li:hover{
border-bottom: black solid 2px;
transform: scale(1.1);
}
.topnavtitle{
margin-right: 2.5%;
}
.navcartcontainer{
display: flex;
margin-right: -1%;
}
.topnavcont .totalnumber{
color: black;
padding: 0.2em 0.4em;
border-radius: 50%;
font-size: 1.25rem;
height: fit-content;
/* cursor: pointer; */
font-weight: bold;
}
.topnavcont i{
font-size: 2rem;
margin-left: 0.3em;
cursor: pointer;
transition: 0.4s ease;
}
.topnavcont i:hover{
transform: scale(1.15);
}
.p1{
height: 100vh;
position: relative;
}
.p1 img{
object-fit: cover;
height: 100vh;
width: 100%;
}
.p1 .overlay::after{
content: "";
position: absolute;
top: 10vh;
bottom: 0;
left: 0;
right: 0;
background-color: black;
opacity: 0.4;
height: 90vh;
width: 100%;
}
.cartbody{
background-color: white;
position: fixed;
height: 100vh;
width: 25vw;
top: 10%;
left: 75%;
z-index: 2100;
overflow-y: auto;
transform: translateX(100%);
transition: 0.6s ease;
box-shadow: rgba(0, 0, 0, 0.0) 0px 0px 0px, rgba(0, 0, 0, 0.30) 0px 3px 6px;
}
.carttotal{
font-size: 2rem;
color: rgb(22, 113, 119);
font-weight: bold;
margin-top: 1.5em;
text-align: center;
margin-bottom: 3em;
}
.purchasebtn{
background-color: rgb(22, 113, 119);
margin-bottom: 5em;
padding: 1em 2.5em;
border-radius: 0.3em;
color: white;
margin-left: 35%;
font-weight: bold;
font-size: 1rem;
outline: none;
border: none;
cursor: pointer;
transition: 0.3s ease;
}
.purchasebtn:hover{
background-color: rgb(11, 70, 75);
}
.cartbody i{
font-size: 2.2rem;
margin-left: 0.4em;
margin-top: 0.2em;
color: black;
font-weight: 200;
cursor: pointer;
transition: 0.3s ease;
}
.cartbody i:hover{
transform: scale(1.15);
}
.cartbody input{
width: 2.2rem;
height: auto;
}
.cartbodyactive{
transform: translateX(0%);
transform: scale(1);
background-color: white;
}
.carttitle{
text-align: center;
margin-top: 1em;
margin-bottom: 2em;
}
.cartitem{
display: flex;
justify-content: space-evenly;
}
.cartitem .itemtitle{
font-size: 1.2rem;
}
.cartitems{
display: flex;
flex-direction: column;
row-gap: 3em;
overflow-y: auto;
list-style: none;
padding-left: 0.5em;
}
.removebtn{
background-color: red;
color: black;
font-weight: bold;
outline: none;
border: none;
padding: 0.5em 1em;
cursor: pointer;
}
.p2{
height: 120vh;
position: relative;
}
.p2title{
color: black;
padding-top: 2.5em;
margin-left: 7%;
}
.p2 img{
height: 200px;
width: 300px;
object-fit: cover;
}
.itemcontainer{
margin-top: 6em;
display: flex;
justify-content: space-around;
}
.itemcontainer2{
margin-top: 6em;
display: flex;
justify-content: space-around;
}
.item{
display: flex;
flex-direction: column;
align-items: center;
min-height: 355px;
justify-content: space-around;
}
.atcbtn{
background-color: white;
cursor: pointer;
text-decoration: none;
color: black;
width: 40%;
text-align: center;
font-weight: bold;
border: black solid 2px;
padding: 0.8em 0.5em;
transition: 0.4s ease;
}
.atcbtn:hover{
background-color: black;
color: white;
font-weight: bold;
}
.arrow{
color: white;
}
#media only screen and (max-width: 600px){
.topnavcont{
padding: 1em 0em;
align-items: center;
height: 10vh;
width: 100vw;
display: flex;
justify-content: space-around;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.10) 0px 3px 6px, rgba(0, 0, 0, 0.20) 0px 3px 6px;
position: fixed;
z-index: 5;
}
.topleftnav{
display: flex;
justify-content: space-evenly;
width: 55%;
margin-left: 1%;
padding-right: 5%;
font-weight: bold;
}
.topleftnav li{
cursor: pointer;
list-style: none;
font-size: 1rem;
transition: 0.3s ease;
border-bottom: transparent solid 2px;
}
.topleftnav li:hover{
border-bottom: black solid 2px;
transform: scale(1.1);
}
.topnavtitle{
font-size: 1.8rem;
width: 80%;
}
.navcartcontainer{
display: flex;
padding-right: 5%;
margin-left: 0%;
}
.topnavcont .totalnumber{
color: black;
padding: 0.2em 0.4em;
border-radius: 50%;
font-size: 1.25rem;
height: fit-content;
/* cursor: pointer; */
font-weight: bold;
}
.topnavcont i{
font-size: 2rem;
margin-left: 0.3em;
cursor: pointer;
transition: 0.4s ease;
}
.cartbody{
background-color: white;
position: fixed;
height: 100vh;
width: 80vw;
top: 10%;
left: 20%;
z-index: 2100;
overflow-y: auto;
transform: translateX(100%);
transition: 0.6s ease;
box-shadow: rgba(0, 0, 0, 0.0) 0px 0px 0px, rgba(0, 0, 0, 0.30) 0px 3px 6px;
}
.carttotal{
font-size: 2rem;
color: rgb(22, 113, 119);
font-weight: bold;
margin-top: 1.5em;
text-align: center;
margin-bottom: 3em;
}
.cartbody i{
font-size: 2.2rem;
margin-left: 0.4em;
margin-top: 0.2em;
color: black;
font-weight: 200;
cursor: pointer;
transition: 0.3s ease;
}
.cartbody i:hover{
transform: scale(1.15);
}
.cartbody input{
width: 1.5rem;
height: auto;
}
.cartbodyactive{
transform: translateX(0%);
transform: scale(1);
background-color: white;
}
.carttitle{
text-align: center;
margin-top: 1em;
margin-bottom: 2em;
}
.cartitem{
display: flex;
justify-content: space-evenly;
padding-bottom: 2em;
}
.cartitem .itemtitle{
font-size: 1.2rem;
}
.cartitems{
display: flex;
flex-direction: column;
row-gap: 3em;
overflow-y: auto;
list-style: none;
padding-left: 0.5em;
}
.removebtn{
background-color: red;
color: black;
font-weight: bold;
outline: none;
border: none;
padding: 0.5em 1em;
cursor: pointer;
}
.p2{
height: fit-content;
padding-bottom: 20%;
position: relative;
}
.p2title{
color: black;
padding-top: 2.5em;
margin-left: 7%;
}
.p2 img{
height: 200px;
width: 300px;
object-fit: cover;
}
.itemcontainer{
margin-top: 6em;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.itemcontainer2{
margin-top: 6em;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.item{
display: flex;
flex-direction: column;
align-items: center;
min-height: 355px;
justify-content: space-around;
padding-bottom: 2em;
}
.atcbtn{
background-color: white;
cursor: pointer;
text-decoration: none;
color: black;
width: 40%;
text-align: center;
font-weight: bold;
border: black solid 2px;
padding: 0.8em 0.5em;
transition: 0.4s ease;
}
.atcbtn:hover{
background-color: black;
color: white;
font-weight: bold;
}
.arrow{
color: white;
}
}
JAVASCRIPT:
let TotalNumber = document.querySelector(".totalnumber");
const Atc = document.getElementsByClassName("atcbtn");
const cartbtn = document.getElementById("cartbtn");
const closeicon = document.getElementById("closeicon");
const cartbody = document.querySelector(".cartbody");
const removebtn = document.getElementsByClassName("removebtn");
const carttotal = document.querySelector(".carttotal");
let price = document.querySelector(".actualprice");
let itempricestring = document.getElementsByClassName("itemprice");
let globalquantinput = document.querySelector(".qinput");
cartbtn.addEventListener("click", function () {
cartbody.classList.toggle("cartbodyactive");
});
closeicon.addEventListener("click", function () {
cartbody.classList.remove("cartbodyactive");
});
function AddItemtoCart() {
//INCREASING THE TOTAL NUMBER
for (i = 0; i < Atc.length; i++) {
let button = Atc[i];
button.addEventListener("click", function () {
let TotalNumbervalue = TotalNumber.innerHTML;
if (TotalNumbervalue > -1) {
TotalNumber.innerHTML++;
}
//GETTING THE SHOP ELEMENTS AND APPENDING THEM TO THE CART
let shopitem = button.parentElement;
let shoptitle =
shopitem.getElementsByClassName("item-title")[0].innerText;
let shopprice = shopitem.getElementsByClassName("itemprice")[0].innerText;
shoppriceall = shopitem.getElementsByClassName("itemprice").innerText;
let cartrow = document.createElement("div");
let cartitems = document.getElementsByClassName("cartitems")[0];
let cartrowcontent = `<li class="cartitem"><span class="itemtitle">${shoptitle}</span><span class="itemprice">${shopprice}</span><input type="number" class="qinput"id="qinput"><button class="removebtn">Remove</button></li>`;
cartrow.innerHTML = cartrowcontent;
cartitems.append(cartrow);
//ADJUSTING THE TOTAL
let priceint = price.innerText;
let pricerounded = parseFloat(priceint.replace("Total: $", ""));
let shopprice2 = shopprice.replace("$", "");
let shoppriceint = parseFloat(shopprice2);
console.log(shoppriceint);
console.log(pricerounded);
price.innerText = "Total: $" + (shoppriceint + pricerounded).toFixed(2);
//REMOVING ELEMENTS AND DECREASING NUMBER
cartitems.lastChild
.querySelector(".removebtn")
.addEventListener("click", function () {
let TotalNumbervalue = parseInt(TotalNumber.innerText);
console.log(TotalNumbervalue);
if (TotalNumbervalue > 0) {
let shopremoveitem = this.parentElement.parentElement;
let shopremoveprice =
shopremoveitem.getElementsByClassName("itemprice")[0].innerText;
let shopremoveprice2 = shopremoveprice.replace("$", "");
let shopremovepriceint = parseFloat(shopremoveprice2);
let quantin = document.querySelector(".qinput");
let quantinval = quantin.value;
let priceafteradded = parseFloat(
price.innerText.replace("Total: $", "")
);
TotalNumber.innerText--;
Math.round(shopremovepriceint);
price.innerText =
"Total: $" +
(priceafteradded - shopremovepriceint * quantinval).toFixed(2);
}
this.parentElement.parentElement.remove();
});
//PRICEINT1 PRICEINT2 AND PRICEINT3 ARE TO GET THE INNER TEXT OF THE PRICE IN EACH FUNCTION.
//MAKING SURE THE INPUTS DONT GO OVER 1 AND ALSO MAKING SURE THEY WORK
let qinput = document.getElementsByClassName("qinput");
for (let i = 0; i < qinput.length; i++) {
let qinputnumber = document.querySelector(".qinput");
//HERE IS THE ISSUE //
qinput[i].addEventListener("change", function () {
//UPDATE THE PRICE TOTAL ON CHANGE
let priceint3 = document.querySelector(".actualprice").innerText;
let newqinput = cartrow.getElementsByClassName("qinput")[0];
let newqinputval = newqinput.value;
let priceint3rounded = parseFloat(priceint3.replace("Total: $", ""));
price.innerText =
"Total: $" +
(priceint3rounded + shoppriceint * newqinputval).toFixed(2);
//MAKE SURE NUMBERS DONT GO BELOW 1
if (qinput[i].value < 1) {
qinput[i].value = 1;
price.innerText = priceint3;
}
});
if (qinput[i].value > 1) {
qinput[i].value = qinputnumber.value;
} else {
qinput[i].value = 1;
}
}
});
}
}
//ALERTING USER THAT ITEMS HAVE BEEN PURCHASED
AddItemtoCart();
let purchasebtn = document.getElementById("purchasebtn");
purchasebtn.addEventListener("click", function () {
location.reload();
alert("Your items have been purchased!");
});
//SMOOTH SCROLL
const scroll = new SmoothScroll('a[href*="#"]', {
speed: 1000,
speedAsDuration: true,
easing: "easeinquad",
});
//SWIPER
const swiper = new Swiper(".swiper-container", {
// Optional parameters
direction: "horizontal",
loop: true,
speed: 300,
// If we need pagination
pagination: {
el: ".swiper-pagination",
dynamicBullets: true,
},
// Navigation arrows
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
// And if we need scrollbar
scrollbar: {
el: ".swiper-scrollbar",
},
});

The problem is that you add the price of an object every time you change the amount of it.
So if you have "Red Shoes" in your Cart and the price is at 4.99$
If you now click the up button or increase the value of the input field by one another shoppriceint * newqinputval is added to the OLD-total so the price displayed now is $14.97 (eg. 4.99 initial price + 2 * shoppriceint)
You would have to store the current amount before the change happened (onfoucs or something simmilar) and then substract it before you add another 2 items on top:
(priceint3rounded - shoppriceint * oldqinputval + shoppriceint * newqinputval).toFixed(2);
Hope this helped.
Have a great day! If you need further assistance let me know (:

Here's the part I updated, removing the code around it that was trying to do the same thing before:
function updateAmounts() {
let total = 0
document.querySelectorAll(".qinput").forEach(el => {
let qty = +el.value
let price = +el.closest('.cartitem').querySelector('.itemprice').innerText.trim().replace('$','');
total += (qty * price);
})
document.querySelector(".actualprice").innerHTML = `Total: $${total.toFixed(2)}`
}
document.querySelectorAll(".qinput").forEach(el => el.addEventListener("change", (e) => updateAmounts()))
What this does is:
every time a .qinput field is changed (a quantity)
it triggers updateAmounts(), which
cycles through ALL the .qinput fields, finds their respective prices, and tallies the (quantity * price) for each, culminating in the total
let TotalNumber = document.querySelector(".totalnumber");
const Atc = document.getElementsByClassName("atcbtn");
const cartbtn = document.getElementById("cartbtn");
const closeicon = document.getElementById("closeicon");
const cartbody = document.querySelector(".cartbody");
const removebtn = document.getElementsByClassName("removebtn");
const carttotal = document.querySelector(".carttotal");
let price = document.querySelector(".actualprice");
let itempricestring = document.getElementsByClassName("itemprice");
let globalquantinput = document.querySelector(".qinput");
cartbtn.addEventListener("click", function() {
cartbody.classList.toggle("cartbodyactive");
});
closeicon.addEventListener("click", function() {
cartbody.classList.remove("cartbodyactive");
});
function AddItemtoCart() {
//INCREASING THE TOTAL NUMBER
for (i = 0; i < Atc.length; i++) {
let button = Atc[i];
button.addEventListener("click", function() {
let TotalNumbervalue = TotalNumber.innerHTML;
if (TotalNumbervalue > -1) {
TotalNumber.innerHTML++;
}
//GETTING THE SHOP ELEMENTS AND APPENDING THEM TO THE CART
let shopitem = button.parentElement;
let shoptitle =
shopitem.getElementsByClassName("item-title")[0].innerText;
let shopprice = shopitem.getElementsByClassName("itemprice")[0].innerText;
shoppriceall = shopitem.getElementsByClassName("itemprice").innerText;
let cartrow = document.createElement("div");
let cartitems = document.getElementsByClassName("cartitems")[0];
let cartrowcontent = `<li class="cartitem"><span class="itemtitle">${shoptitle}</span><span class="itemprice">${shopprice}</span><input type="number" class="qinput"id="qinput"><button class="removebtn">Remove</button></li>`;
cartrow.innerHTML = cartrowcontent;
cartitems.append(cartrow);
//ADJUSTING THE TOTAL
let priceint = price.innerText;
let pricerounded = parseFloat(priceint.replace("Total: $", ""));
let shopprice2 = shopprice.replace("$", "");
let shoppriceint = parseFloat(shopprice2);
console.log(shoppriceint);
console.log(pricerounded);
price.innerText = "Total: $" + (shoppriceint + pricerounded).toFixed(2);
//REMOVING ELEMENTS AND DECREASING NUMBER
cartitems.lastChild
.querySelector(".removebtn")
.addEventListener("click", function() {
let TotalNumbervalue = parseInt(TotalNumber.innerText);
console.log(TotalNumbervalue);
if (TotalNumbervalue > 0) {
let shopremoveitem = this.parentElement.parentElement;
let shopremoveprice =
shopremoveitem.getElementsByClassName("itemprice")[0].innerText;
let shopremoveprice2 = shopremoveprice.replace("$", "");
let shopremovepriceint = parseFloat(shopremoveprice2);
let quantin = document.querySelector(".qinput");
let quantinval = quantin.value;
let priceafteradded = parseFloat(
price.innerText.replace("Total: $", "")
);
TotalNumber.innerText--;
Math.round(shopremovepriceint);
price.innerText =
"Total: $" +
(priceafteradded - shopremovepriceint * quantinval).toFixed(2);
}
this.parentElement.parentElement.remove();
});
//PRICEINT1 PRICEINT2 AND PRICEINT3 ARE TO GET THE INNER TEXT OF THE PRICE IN EACH FUNCTION.
//MAKING SURE THE INPUTS DONT GO OVER 1 AND ALSO MAKING SURE THEY WORK
let qinput = document.getElementsByClassName("qinput");
for (let i = 0; i < qinput.length; i++) {
let qinputnumber = document.querySelector(".qinput");
// UPDATED CODE //
function updateAmounts() {
let total = 0
document.querySelectorAll(".qinput").forEach(el => {
let qty = +el.value
let price = +el.closest('.cartitem').querySelector('.itemprice').innerText.trim().replace('$', '');
total += (qty * price);
})
document.querySelector(".actualprice").innerHTML = `Total: $${total.toFixed(2)}`
}
document.querySelectorAll(".qinput").forEach(el => el.addEventListener("change", (e) => updateAmounts()))
if (qinput[i].value > 1) {
qinput[i].value = qinputnumber.value;
} else {
qinput[i].value = 1;
}
}
});
}
}
//ALERTING USER THAT ITEMS HAVE BEEN PURCHASED
AddItemtoCart();
let purchasebtn = document.getElementById("purchasebtn");
purchasebtn.addEventListener("click", function() {
location.reload();
alert("Your items have been purchased!");
});
//SMOOTH SCROLL
const scroll = new SmoothScroll('a[href*="#"]', {
speed: 1000,
speedAsDuration: true,
easing: "easeinquad",
});
//SWIPER
const swiper = new Swiper(".swiper-container", {
// Optional parameters
direction: "horizontal",
loop: true,
speed: 300,
// If we need pagination
pagination: {
el: ".swiper-pagination",
dynamicBullets: true,
},
// Navigation arrows
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
// And if we need scrollbar
scrollbar: {
el: ".swiper-scrollbar",
},
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
::-webkit-scrollbar {
display: none;
}
.wrapper {
overflow-x: hidden;
}
.topnavcont {
padding: 1em 0em;
align-items: center;
height: 10vh;
width: 100vw;
display: flex;
justify-content: space-around;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.10) 0px 3px 6px, rgba(0, 0, 0, 0.20) 0px 3px 6px;
position: fixed;
z-index: 5;
}
a {
text-decoration: none;
color: black;
}
.topleftnav {
display: flex;
justify-content: space-between;
width: 10%;
margin-left: -3%;
font-weight: bold;
}
.topleftnav li {
cursor: pointer;
list-style: none;
font-size: 1.05rem;
transition: 0.3s ease;
border-bottom: transparent solid 2px;
}
.topleftnav li:hover {
border-bottom: black solid 2px;
transform: scale(1.1);
}
.topnavtitle {
margin-right: 2.5%;
}
.navcartcontainer {
display: flex;
margin-right: -1%;
}
.topnavcont .totalnumber {
color: black;
padding: 0.2em 0.4em;
border-radius: 50%;
font-size: 1.25rem;
height: fit-content;
/* cursor: pointer; */
font-weight: bold;
}
.topnavcont i {
font-size: 2rem;
margin-left: 0.3em;
cursor: pointer;
transition: 0.4s ease;
}
.topnavcont i:hover {
transform: scale(1.15);
}
.p1 {
height: 100vh;
position: relative;
}
.p1 img {
object-fit: cover;
height: 100vh;
width: 100%;
}
.p1 .overlay::after {
content: "";
position: absolute;
top: 10vh;
bottom: 0;
left: 0;
right: 0;
background-color: black;
opacity: 0.4;
height: 90vh;
width: 100%;
}
.cartbody {
background-color: white;
position: fixed;
height: 100vh;
width: 25vw;
top: 10%;
left: 75%;
z-index: 2100;
overflow-y: auto;
transform: translateX(100%);
transition: 0.6s ease;
box-shadow: rgba(0, 0, 0, 0.0) 0px 0px 0px, rgba(0, 0, 0, 0.30) 0px 3px 6px;
}
.carttotal {
font-size: 2rem;
color: rgb(22, 113, 119);
font-weight: bold;
margin-top: 1.5em;
text-align: center;
margin-bottom: 3em;
}
.purchasebtn {
background-color: rgb(22, 113, 119);
margin-bottom: 5em;
padding: 1em 2.5em;
border-radius: 0.3em;
color: white;
margin-left: 35%;
font-weight: bold;
font-size: 1rem;
outline: none;
border: none;
cursor: pointer;
transition: 0.3s ease;
}
.purchasebtn:hover {
background-color: rgb(11, 70, 75);
}
.cartbody i {
font-size: 2.2rem;
margin-left: 0.4em;
margin-top: 0.2em;
color: black;
font-weight: 200;
cursor: pointer;
transition: 0.3s ease;
}
.cartbody i:hover {
transform: scale(1.15);
}
.cartbody input {
width: 2.2rem;
height: auto;
}
.cartbodyactive {
transform: translateX(0%);
transform: scale(1);
background-color: white;
}
.carttitle {
text-align: center;
margin-top: 1em;
margin-bottom: 2em;
}
.cartitem {
display: flex;
justify-content: space-evenly;
}
.cartitem .itemtitle {
font-size: 1.2rem;
}
.cartitems {
display: flex;
flex-direction: column;
row-gap: 3em;
overflow-y: auto;
list-style: none;
padding-left: 0.5em;
}
.removebtn {
background-color: red;
color: black;
font-weight: bold;
outline: none;
border: none;
padding: 0.5em 1em;
cursor: pointer;
}
.p2 {
height: 120vh;
position: relative;
}
.p2title {
color: black;
padding-top: 2.5em;
margin-left: 7%;
}
.p2 img {
height: 200px;
width: 300px;
object-fit: cover;
}
.itemcontainer {
margin-top: 6em;
display: flex;
justify-content: space-around;
}
.itemcontainer2 {
margin-top: 6em;
display: flex;
justify-content: space-around;
}
.item {
display: flex;
flex-direction: column;
align-items: center;
min-height: 355px;
justify-content: space-around;
}
.atcbtn {
background-color: white;
cursor: pointer;
text-decoration: none;
color: black;
width: 40%;
text-align: center;
font-weight: bold;
border: black solid 2px;
padding: 0.8em 0.5em;
transition: 0.4s ease;
}
.atcbtn:hover {
background-color: black;
color: white;
font-weight: bold;
}
.arrow {
color: white;
}
#media only screen and (max-width: 600px) {
.topnavcont {
padding: 1em 0em;
align-items: center;
height: 10vh;
width: 100vw;
display: flex;
justify-content: space-around;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.10) 0px 3px 6px, rgba(0, 0, 0, 0.20) 0px 3px 6px;
position: fixed;
z-index: 5;
}
.topleftnav {
display: flex;
justify-content: space-evenly;
width: 55%;
margin-left: 1%;
padding-right: 5%;
font-weight: bold;
}
.topleftnav li {
cursor: pointer;
list-style: none;
font-size: 1rem;
transition: 0.3s ease;
border-bottom: transparent solid 2px;
}
.topleftnav li:hover {
border-bottom: black solid 2px;
transform: scale(1.1);
}
.topnavtitle {
font-size: 1.8rem;
width: 80%;
}
.navcartcontainer {
display: flex;
padding-right: 5%;
margin-left: 0%;
}
.topnavcont .totalnumber {
color: black;
padding: 0.2em 0.4em;
border-radius: 50%;
font-size: 1.25rem;
height: fit-content;
/* cursor: pointer; */
font-weight: bold;
}
.topnavcont i {
font-size: 2rem;
margin-left: 0.3em;
cursor: pointer;
transition: 0.4s ease;
}
.cartbody {
background-color: white;
position: fixed;
height: 100vh;
width: 80vw;
top: 10%;
left: 20%;
z-index: 2100;
overflow-y: auto;
transform: translateX(100%);
transition: 0.6s ease;
box-shadow: rgba(0, 0, 0, 0.0) 0px 0px 0px, rgba(0, 0, 0, 0.30) 0px 3px 6px;
}
.carttotal {
font-size: 2rem;
color: rgb(22, 113, 119);
font-weight: bold;
margin-top: 1.5em;
text-align: center;
margin-bottom: 3em;
}
.cartbody i {
font-size: 2.2rem;
margin-left: 0.4em;
margin-top: 0.2em;
color: black;
font-weight: 200;
cursor: pointer;
transition: 0.3s ease;
}
.cartbody i:hover {
transform: scale(1.15);
}
.cartbody input {
width: 1.5rem;
height: auto;
}
.cartbodyactive {
transform: translateX(0%);
transform: scale(1);
background-color: white;
}
.carttitle {
text-align: center;
margin-top: 1em;
margin-bottom: 2em;
}
.cartitem {
display: flex;
justify-content: space-evenly;
padding-bottom: 2em;
}
.cartitem .itemtitle {
font-size: 1.2rem;
}
.cartitems {
display: flex;
flex-direction: column;
row-gap: 3em;
overflow-y: auto;
list-style: none;
padding-left: 0.5em;
}
.removebtn {
background-color: red;
color: black;
font-weight: bold;
outline: none;
border: none;
padding: 0.5em 1em;
cursor: pointer;
}
.p2 {
height: fit-content;
padding-bottom: 20%;
position: relative;
}
.p2title {
color: black;
padding-top: 2.5em;
margin-left: 7%;
}
.p2 img {
height: 200px;
width: 300px;
object-fit: cover;
}
.itemcontainer {
margin-top: 6em;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.itemcontainer2 {
margin-top: 6em;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.item {
display: flex;
flex-direction: column;
align-items: center;
min-height: 355px;
justify-content: space-around;
padding-bottom: 2em;
}
.atcbtn {
background-color: white;
cursor: pointer;
text-decoration: none;
color: black;
width: 40%;
text-align: center;
font-weight: bold;
border: black solid 2px;
padding: 0.8em 0.5em;
transition: 0.4s ease;
}
.atcbtn:hover {
background-color: black;
color: white;
font-weight: bold;
}
.arrow {
color: white;
}
}
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<link rel="stylesheet" href="/fonts/fontawesome-free-5.3.1-web/css/all.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<div class="wrapper">
<div class="p1" id="p1">
<div class="topnavcont">
<ul class="topleftnav">
<a href="#p1">
<li class="topnavlink">Home</li>
</a>
<a href="#p2">
<li class="topnavlink">Shop</li>
</a>
</ul>
<h1 class="topnavtitle">The Store</h1>
<div class="navcartcontainer">
<h3 class="totalnumber">0</h3>
<i class="fas fa-shopping-cart" id="cartbtn"></i>
</div>
</div>
<!-- <img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="bgimg"> -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><img src="clark-street-mercantile-P3pI6xzovu0-unsplash.jpg" alt="" class="bgimg">
<div class="overlay"></div>
</div>
<div class="swiper-slide"><img src="michela-ampolo-7tDGb3HrITg-unsplash.jpg" alt="" class="bgimg">
<div class="overlay"></div>
</div>
<!-- <div class="swiper-slide">Slide 3</div>
... -->
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev arrow"></div>
<div class="swiper-button-next arrow"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
<div class="cartbody">
<i class="fal fa-times" id="closeicon"></i>
<h2 class="carttitle">Shopping Cart</h2>
<ul class="cartitems">
<!-- <div><li class="cartitem"><span class="itemtitle">Shirt1</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li></div>
<div><li class="cartitem"><span class="itemtitle">Shirt2</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li></div>
<div><li class="cartitem"><span class="itemtitle">Shirt3</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li></div> -->
</ul>
<h3 class="actualprice carttotal" id="actualprice">Total: $0</h3>
<button class="purchasebtn" id="purchasebtn">Purchase</button>
</div>
</div>
<div class="p2" id="p2">
<h1 class="p2title">My Shop</h1>
<div class="itemcontainer">
<div class="item">
<img src="anomaly-WWesmHEgXDs-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">White Shirt</h1>
<h3 class="itemprice">$8.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="revolt-164_6wVEHfI-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Red Shoes</h1>
<h3 class="itemprice">$4.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="sebastian-coman-travel-dtOTQYmTEs0-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Sunglasses</h1>
<h3 class="itemprice">$6.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
</div>
<div class="itemcontainer2">
<div class="item">
<img src="haley-phelps-RgJ-NU_qWjM-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Jeans</h1>
<h3 class="itemprice">$1.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="olive-tatiane-ImEzF9B91Mk-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Necklace</h1>
<h3 class="itemprice">$6.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="rafael-silva-fc2Q2DKBCYY-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Beanie</h1>
<h3 class="itemprice">$2.99</h3>
<!-- Add To Cart -->
<button class="atcbtn">Add To Cart</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="app.js" async></script>

Animation in html/css/js [duplicate]

This question already has an answer here:
How to reuse the same code multiple times - html/css
(1 answer)
Closed 1 year ago.
I would like the modal that pops up in my code to work separately for the buttons I have. For example, I have the About Me button and the Projects button. When the user clicks the About Me button, there should be a separate modal that pops up with different text, and then when the user clicks the Projects button, there should be a different modal that pops up with a different text. Essentially, the design of the modal should be the same, it just that it should have different text for each of the buttons.
Code:
function popUp_model(){
const pop_up_model = document.getElementById('model');
pop_up_model.classList.toggle('active');
}
body{
background: black;
}
.wrapper { display: flex; }
#container {
display: flex;
align-items: center;
justify-content: center;
margin: 0 100px;
}
.button {
margin-top: 58px;
align-content: left;
--y: -25;
--x: 0;
--rotation: 0;
--speed: 2;
--padding: 1rem 1.25rem;
cursor: pointer;
padding: var(--padding);
border: 4px solid;
border-color: #00fffe;
color: white; /* changed */
font-weight: bold;
font-size: 1.25rem;
transition: background 0.1s ease;
background: hsl(var(--grey), 100%, 50%);
animation-name: flow-and-shake;
-webkit-animation-duration: calc(var(--speed) * 1s);
animation-duration: calc(var(--speed) * 1s);
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.button:hover {
background: hsl(var(--grey), 100%, 40%);
--speed: 0.1;
--rotation: -1;
--y: -1;
--x: 1;
}
#-webkit-keyframes flow-and-shake {
0%, 100% {
transform: translate(calc(var(--x) * -1%), 0) rotate(calc(var(--rotation) * -1deg));
}
50% {
transform: translate(calc(var(--x) * 1%), calc(var(--y) * 1%)) rotate(calc(var(--rotation) * 1deg));
}
}
/* modal*/
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body1 {
background: transparent;
font-family: "Courier New", Courier, monospace;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.button {
position: relative;
}
#model {
position: absolute;
z-index: 1;
top: 50%;
left: -100%;
transform: translate(-50%, -50%);
background: #101010;
max-width: 450px;
padding: 70px 50px;
transition: 1s;
visibility: hidden;
}
#model.active {
visibility: visible;
left: 50%;
}
#model .model-content {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#model .model-content img {
width: 80px;
}
#model .model-content h2 {
font-size: 24px;
font-weight: 800;
margin: 20px 0px;
}
.model-input {
margin-top: 20px;
width: 100%;
}
.model-input input {
width: 100%;
border: 1px solid;
padding: 15px;
outline: none;
font-size: 18px;
}
.model-input input[type="submit"] {
letter-spacing: 2px;
cursor: pointer;
}
.model-input input[type="submit"]:hover {
letter-spacing: 4px;
}
.close-model {
position: absolute;
top: 30px;
right: 30px;
cursor: pointer;
}
.close-model img {
width: 20px;
}
/* modal 2*/
/* modal*/
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body2 {
background: transparent;
font-family: "Courier New", Courier, monospace;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.button1 {
position: relative;
}
#subscribe-us1 {
padding: 15px 20px;
background: #000;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 2px;
border-radius: 10px;
outline: none;
display: inline-block;
font-weight: 600;
cursor: pointer;
}
#subscribe-us1:hover {
letter-spacing: 4px;
}
#model1 {
position: absolute;
z-index: 1;
top: 50%;
left: -100%;
transform: translate(-50%, -50%);
background: steelblue;
max-width: 450px;
padding: 70px 50px;
transition: 1s;
visibility: hidden;
}
#model1.active {
visibility: visible;
left: 50%;
}
#model1 .model-content {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#model1 .model-content img {
width: 80px;
}
#model1 .model-content h2 {
font-size: 24px;
font-weight: 800;
margin: 20px 0px;
}
.model-input1 {
margin-top: 20px;
width: 100%;
}
.model-input1 input {
width: 100%;
border: 1px solid #cccccc;
padding: 15px;
outline: none;
font-size: 18px;
}
.model-input1 input[type="submit"] {
letter-spacing: 2px;
cursor: pointer;
}
.model-input1 input[type="submit"]:hover {
letter-spacing: 4px;
}
.close-model1 {
position: absolute;
top: 30px;
right: 30px;
cursor: pointer;
}
.close-model1 img {
width: 20px;
}
<div id="container">
<div class="button__wrap">
<button class="button" style="--hue: 162.03381670949574" onclick="popUp_model()" >About me</button>
</div>
<div class="button__wrap">
<button class="button" style="--hue: 162.03381670949574" onclick="popUp_model()">My Projects</button>
<div class="button__shadow"></div>
</div>
</div>
<div id="model">
<div class="model-content">
<img src="https://image.shutterstock.com/image-vector/mail-icon-260nw-523869661.jpg" alt="Email">
<h2>
Join Our Newsletter
</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<div class="model-input">
<input type="email" placeholder="Enter Email">
</div>
<div class="model-input">
<input type="submit" value="Sign Up">
</div>
</div>
<a class="close-model" onclick="popUp_model()"><img src="https://cdn3.iconfinder.com/data/icons/pyconic-icons-1-2/512/close-512.png" alt="Close-model-icon"></a>
</div>
</div>
</div>
As you can see, there is the same modal with the same text for both of the buttons. But I want different text on the modals for each of the buttons. Any suggestions?
Expected Output
When the user clicks About Me the modal with the text that I sent in the code should appear.
When the user clicks Projects the modal with a different text saying something like, "Hello, these are my projects" should appear.
NOTE: The design of the modal should be the exact same, the only thing that changes is the text.
I tried switching the names of the classes and making like a second modal with different text but it did not quite work, and I got the wrong output.
Is there a way this can be accomplished?

There are multiples ways to reuse the same model with different content, based on the situation.
A simple solution can be passing some parameters to the popUp_model function.
function popUp_model(typeOfModel) {
let aboutHTML = `
<img src="https://image.shutterstock.com/image-vector/mail-icon-260nw-523869661.jpg" alt="Email">
<h2>
Join Our Newsletter
</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<div class="model-input">
<input type="email" placeholder="Enter Email">
</div>
<div class="model-input">
<input type="submit" value="Sign Up">
</div>
`;
let projectHTML = `
<h2>
My Projects
</h2>
<ul>
<li>Project 1</li>
<li>Project 2</li>
</ul>
`;
if(typeOfModel == 0)
document.getElementsByClassName("model-content")[0].innerHTML = aboutHTML;
else
document.getElementsByClassName("model-content")[0].innerHTML = projectHTML;
const pop_up_model = document.getElementById('model');
pop_up_model.classList.toggle('active');
}
body {
background: black;
}
.wrapper {
display: flex;
}
#container {
display: flex;
align-items: center;
justify-content: center;
margin: 0 100px;
}
.button {
margin-top: 58px;
align-content: left;
--y: -25;
--x: 0;
--rotation: 0;
--speed: 2;
--padding: 1rem 1.25rem;
cursor: pointer;
padding: var(--padding);
border: 4px solid;
border-color: #00fffe;
color: white;
/* changed */
font-weight: bold;
font-size: 1.25rem;
transition: background 0.1s ease;
background: hsl(var(--grey), 100%, 50%);
animation-name: flow-and-shake;
-webkit-animation-duration: calc(var(--speed) * 1s);
animation-duration: calc(var(--speed) * 1s);
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.button:hover {
background: hsl(var(--grey), 100%, 40%);
--speed: 0.1;
--rotation: -1;
--y: -1;
--x: 1;
}
#-webkit-keyframes flow-and-shake {
0%,
100% {
transform: translate(calc(var(--x) * -1%), 0) rotate(calc(var(--rotation) * -1deg));
}
50% {
transform: translate(calc(var(--x) * 1%), calc(var(--y) * 1%)) rotate(calc(var(--rotation) * 1deg));
}
}
/* modal*/
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body1 {
background: transparent;
font-family: "Courier New", Courier, monospace;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.button {
position: relative;
}
#model {
position: absolute;
z-index: 1;
top: 50%;
left: -100%;
transform: translate(-50%, -50%);
background: #101010;
max-width: 450px;
padding: 70px 50px;
transition: 1s;
visibility: hidden;
}
#model.active {
visibility: visible;
left: 50%;
}
#model .model-content {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#model .model-content img {
width: 80px;
}
#model .model-content h2 {
font-size: 24px;
font-weight: 800;
margin: 20px 0px;
}
.model-input {
margin-top: 20px;
width: 100%;
}
.model-input input {
width: 100%;
border: 1px solid;
padding: 15px;
outline: none;
font-size: 18px;
}
.model-input input[type="submit"] {
letter-spacing: 2px;
cursor: pointer;
}
.model-input input[type="submit"]:hover {
letter-spacing: 4px;
}
.close-model {
position: absolute;
top: 30px;
right: 30px;
cursor: pointer;
}
.close-model img {
width: 20px;
}
/* modal 2*/
/* modal*/
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body2 {
background: transparent;
font-family: "Courier New", Courier, monospace;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.button1 {
position: relative;
}
#subscribe-us1 {
padding: 15px 20px;
background: #000;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 2px;
border-radius: 10px;
outline: none;
display: inline-block;
font-weight: 600;
cursor: pointer;
}
#subscribe-us1:hover {
letter-spacing: 4px;
}
#model1 {
position: absolute;
z-index: 1;
top: 50%;
left: -100%;
transform: translate(-50%, -50%);
background: steelblue;
max-width: 450px;
padding: 70px 50px;
transition: 1s;
visibility: hidden;
}
#model1.active {
visibility: visible;
left: 50%;
}
#model1 .model-content {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#model1 .model-content img {
width: 80px;
}
#model1 .model-content h2 {
font-size: 24px;
font-weight: 800;
margin: 20px 0px;
}
.model-input1 {
margin-top: 20px;
width: 100%;
}
.model-input1 input {
width: 100%;
border: 1px solid #cccccc;
padding: 15px;
outline: none;
font-size: 18px;
}
.model-input1 input[type="submit"] {
letter-spacing: 2px;
cursor: pointer;
}
.model-input1 input[type="submit"]:hover {
letter-spacing: 4px;
}
.close-model1 {
position: absolute;
top: 30px;
right: 30px;
cursor: pointer;
}
.close-model1 img {
width: 20px;
}
h2, p, li {
color: white;
}
<div id="container">
<div class="button__wrap">
<button class="button" style="--hue: 162.03381670949574" onclick="popUp_model(0)">About me</button>
</div>
<div class="button__wrap">
<button class="button" style="--hue: 162.03381670949574" onclick="popUp_model(1)">My Projects</button>
<div class="button__shadow"></div>
</div>
</div>
<div id="model">
<div class="model-content">
</div>
<a class="close-model" onclick="popUp_model()"><img src="https://cdn3.iconfinder.com/data/icons/pyconic-icons-1-2/512/close-512.png" alt="Close-model-icon"></a>
</div>
</div>
</div>

You can do something like this to send the type and set the text in the function based on the type.
function popUp_model(type){
let changeTextEl = document.getElementById('change-text')
if (type == 1) changeTextEl.innerHTML = 'Join Our Newsletter'
if (type == 2) changeTextEl.innerHTML = 'Hello, these are my projects'
const pop_up_model = document.getElementById('model');
pop_up_model.classList.toggle('active');
}
body{
background: black;
}
.wrapper { display: flex; }
#container {
display: flex;
align-items: center;
justify-content: center;
margin: 0 100px;
}
.button {
margin-top: 58px;
align-content: left;
--y: -25;
--x: 0;
--rotation: 0;
--speed: 2;
--padding: 1rem 1.25rem;
cursor: pointer;
padding: var(--padding);
border: 4px solid;
border-color: #00fffe;
color: white; /* changed */
font-weight: bold;
font-size: 1.25rem;
transition: background 0.1s ease;
background: hsl(var(--grey), 100%, 50%);
animation-name: flow-and-shake;
-webkit-animation-duration: calc(var(--speed) * 1s);
animation-duration: calc(var(--speed) * 1s);
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.button:hover {
background: hsl(var(--grey), 100%, 40%);
--speed: 0.1;
--rotation: -1;
--y: -1;
--x: 1;
}
#-webkit-keyframes flow-and-shake {
0%, 100% {
transform: translate(calc(var(--x) * -1%), 0) rotate(calc(var(--rotation) * -1deg));
}
50% {
transform: translate(calc(var(--x) * 1%), calc(var(--y) * 1%)) rotate(calc(var(--rotation) * 1deg));
}
}
/* modal*/
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body1 {
background: transparent;
font-family: "Courier New", Courier, monospace;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.button {
position: relative;
}
#model {
position: absolute;
z-index: 1;
top: 50%;
left: -100%;
transform: translate(-50%, -50%);
background: #101010;
max-width: 450px;
padding: 70px 50px;
transition: 1s;
visibility: hidden;
}
#model.active {
visibility: visible;
left: 50%;
}
#model .model-content {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#model .model-content img {
width: 80px;
}
#model .model-content h2 {
font-size: 24px;
font-weight: 800;
margin: 20px 0px;
}
.model-input {
margin-top: 20px;
width: 100%;
}
.model-input input {
width: 100%;
border: 1px solid;
padding: 15px;
outline: none;
font-size: 18px;
}
.model-input input[type="submit"] {
letter-spacing: 2px;
cursor: pointer;
}
.model-input input[type="submit"]:hover {
letter-spacing: 4px;
}
.close-model {
position: absolute;
top: 30px;
right: 30px;
cursor: pointer;
}
.close-model img {
width: 20px;
}
/* modal 2*/
/* modal*/
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body2 {
background: transparent;
font-family: "Courier New", Courier, monospace;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.button1 {
position: relative;
}
#subscribe-us1 {
padding: 15px 20px;
background: #000;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 2px;
border-radius: 10px;
outline: none;
display: inline-block;
font-weight: 600;
cursor: pointer;
}
#subscribe-us1:hover {
letter-spacing: 4px;
}
#model1 {
position: absolute;
z-index: 1;
top: 50%;
left: -100%;
transform: translate(-50%, -50%);
background: steelblue;
max-width: 450px;
padding: 70px 50px;
transition: 1s;
visibility: hidden;
}
#model1.active {
visibility: visible;
left: 50%;
}
#model1 .model-content {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#model1 .model-content img {
width: 80px;
}
#model1 .model-content h2 {
font-size: 24px;
font-weight: 800;
margin: 20px 0px;
}
.model-input1 {
margin-top: 20px;
width: 100%;
}
.model-input1 input {
width: 100%;
border: 1px solid #cccccc;
padding: 15px;
outline: none;
font-size: 18px;
}
.model-input1 input[type="submit"] {
letter-spacing: 2px;
cursor: pointer;
}
.model-input1 input[type="submit"]:hover {
letter-spacing: 4px;
}
.close-model1 {
position: absolute;
top: 30px;
right: 30px;
cursor: pointer;
}
.close-model1 img {
width: 20px;
}
<div id="container">
<div class="button__wrap">
<button class="button" style="--hue: 162.03381670949574" onclick="popUp_model(1)" >About me</button>
</div>
<div class="button__wrap">
<button class="button" style="--hue: 162.03381670949574" onclick="popUp_model(2)">My Projects</button>
<div class="button__shadow"></div>
</div>
</div>
<div id="model">
<div class="model-content">
<img src="https://image.shutterstock.com/image-vector/mail-icon-260nw-523869661.jpg" alt="Email">
<h2 id="change-text">
Join Our Newsletter
</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<div class="model-input">
<input type="email" placeholder="Enter Email">
</div>
<div class="model-input">
<input type="submit" value="Sign Up">
</div>
</div>
<a class="close-model" onclick="popUp_model()"><img src="https://cdn3.iconfinder.com/data/icons/pyconic-icons-1-2/512/close-512.png" alt="Close-model-icon"></a>
</div>
</div>
</div>

Give user ablity to click on images and upload their own picture

I have a profile page consisting of two people. I want users to be able to click on one of two images and upload their own image to one of the image frames
textarea {
border: none;
overflow: auto;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
:root {
font-size: 10px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
sans-serif;
min-height: 100vh;
background-color: #fafafa;
color: #262626;
padding-bottom: 3rem;
}
img {
display: block;
}
.container {
width: 400px;
margin-left: auto;
margin-right: auto;
max-width: 93.5rem;
margin: 0 auto;
padding: 0 2rem;
}
.btn {
display: inline-block;
font: inherit;
background: none;
border: none;
color: inherit;
padding: 0;
cursor: pointer;
}
.btn:focus {
outline: 0.5rem auto #4d90fe;
}
.visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
/* Profile Section */
.profile {
padding: 5rem 0;
}
.profile::after {
content: "";
display: block;
clear: both;
}
.profile-user-settings,
.profile-stats,
.profile-bio {
float: left;
width: calc(66.666% - 2rem);
}
.profile-user-settings {
margin-top: 1.1rem;
}
.profile-user-name {
display: inline-block;
font-size: 3.2rem;
font-weight: 300;
}
.profile-edit-btn {
font-size: 1.4rem;
line-height: 1.8;
border: 0.1rem solid #dbdbdb;
border-radius: 0.3rem;
padding: 0 2.4rem;
margin-left: 2rem;
}
.profile-stats li {
display: inline-block;
font-size: 1.6rem;
line-height: 1.5;
margin-right: 4rem;
cursor: pointer;
}
.profile-stats li:last-of-type {
margin-right: 0;
}
.profile-real-name,
.profile-stat-count,
.profile-edit-btn {
font-weight: 600;
}
/* Gallery Section */
.gallery {
display: flex;
flex-wrap: wrap;
margin: -1rem -1rem;
padding-bottom: 3rem;
}
.gallery-item {
position: relative;
flex: 1 0 22rem;
margin: 1rem;
color: #fff;
cursor: pointer;
}
.gallery-item:hover .gallery-item-info,
.gallery-item:focus .gallery-item-info {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
.gallery-item-info {
display: none;
}
.gallery-item-info li {
display: inline-block;
font-size: 1.7rem;
font-weight: 600;
}
.gallery-item-likes {
margin-right: 2.2rem;
}
.gallery-item-type {
position: absolute;
top: 1rem;
right: 1rem;
font-size: 2.5rem;
text-shadow: 0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.1);
}
.fa-clone,
.fa-comment {
transform: rotateY(180deg);
}
.gallery-image {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Media Query */
#media screen and (max-width: 40rem) {
.profile {
display: flex;
flex-wrap: wrap;
padding: 4rem 0;
}
.profile::after {
display: none;
}
.profile-image,
.profile-user-settings,
.profile-bio,
.profile-stats {
float: none;
width: auto;
}
.profile-user-settings {
flex-basis: calc(100% - 10.7rem);
display: flex;
flex-wrap: wrap;
margin-top: 1rem;
}
.profile-user-name {
font-size: 2.2rem;
}
.profile-edit-btn {
order: 1;
padding: 0;
text-align: center;
margin-top: 1rem;
}
.profile-edit-btn {
margin-left: 0;
}
.profile-bio {
font-size: 1.4rem;
margin-top: 1.5rem;
}
.profile-edit-btn,
.profile-bio,
.profile-stats {
flex-basis: 100%;
}
.profile-stats {
order: 1;
margin-top: 1.5rem;
}
.profile-stats ul {
display: flex;
text-align: center;
padding: 1.2rem 0;
border-top: 0.1rem solid #dadada;
border-bottom: 0.1rem solid #dadada;
}
.profile-stats li {
font-size: 1.4rem;
flex: 1;
margin: 0;
}
.profile-stat-count {
display: block;
}
}
/* Spinner Animation */
#keyframes loader {
to {
transform: rotate(360deg);
}
}
/*
#supports (display: grid) {
.profile {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: repeat(3, auto);
grid-column-gap: 3rem;
align-items: center;
}
.profile-image {
grid-row: 1 / -1;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
grid-gap: 2rem;
}
.profile-image,
.profile-user-settings,
.profile-stats,
.profile-bio,
.gallery-item,
.gallery {
width: auto;
margin: 0;
}
#media (max-width: 40rem) {
.profile {
grid-template-columns: auto 1fr;
grid-row-gap: 1.5rem;
}
.profile-image {
grid-row: 1 / 2;
}
.profile-user-settings {
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 1rem;
}
.profile-edit-btn,
.profile-stats,
.profile-bio {
grid-column: 1 / -1;
}
.profile-user-settings,
.profile-edit-btn,
.profile-settings-btn,
.profile-bio,
.profile-stats {
margin: 0;
}
}
}
#import url(https://fonts.googleapis.com/css?family=Raleway:400,200,300,800);
#import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
figure.snip0056 {
font-family: 'Raleway', Arial, sans-serif;
position: relative;
overflow: hidden;
margin: 10px;
min-width: 380px;
max-width: 480px;
width: 100%;
background: #ffffff;
color: #000000;
}
figure.snip0056 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
figure.snip0056 > img {
width: 50%;
border-radius: 50%;
border: 4px solid #ffffff;
-webkit-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
-webkit-transform: scale(1.6);
transform: scale(1.6);
position: relative;
float: right;
right: -15%;
z-index: 1;
}
figure.snip0056 figcaption {
padding: 20px 30px 20px 20px;
position: absolute;
left: 0;
width: 50%;
}
figure.snip0056 figcaption h2,
figure.snip0056 figcaption p {
margin: 0;
text-align: left;
padding: 10px 0;
width: 100%;
}
figure.snip0056 figcaption h2 {
font-size: 1.3em;
font-weight: 300;
text-transform: uppercase;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
figure.snip0056 figcaption h2 span {
font-weight: 800;
}
figure.snip0056 figcaption p {
font-size: 0.9em;
opacity: 0.8;
}
figure.snip0056 figcaption .icons {
width: 100%;
text-align: left;
}
figure.snip0056 figcaption .icons i {
font-size: 26px;
padding: 5px;
top: 50%;
color: #000000;
}
figure.snip0056 figcaption a {
opacity: 0.3;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
figure.snip0056 figcaption a:hover {
opacity: 0.8;
}
figure.snip0056 .position {
width: 100%;
text-align: left;
padding: 15px 30px;
font-size: 0.9em;
opacity: 1;
font-style: italic;
color: #ffffff;
background: #000000;
clear: both;
}
figure.snip0056.blue .position {
background: #20638f;
}
figure.snip0056.red .position {
background: #962d22;
}
figure.snip0056.yellow .position {
background: #bf6516;
}
figure.snip0056:hover > img,
figure.snip0056.hover > img {
right: -12%;
}
#import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
#social {
position: absolute;
right: 0;
bottom: 0;
margin: 20px 10px;
text-align: center;
}
.smGlobalBtn { /* global button class */
display: inline-block;
position: relative;
cursor: pointer;
width: 50px;
height: 50px;
border:2px solid #ddd; /* add border to the buttons */
box-shadow: 0 3px 3px #999;
padding: 0px;
text-decoration: none;
text-align: center;
color: #fff;
font-size: 25px;
font-weight: normal;
line-height: 2em;
border-radius: 27px;
-moz-border-radius:27px;
-webkit-border-radius:27px;
}
/* facebook button class*/
.facebookBtn{
background: #4060A5;
}
.facebookBtn:before{ /* use :before to add the relevant icons */
font-family: "FontAwesome";
content: "\f09a"; /* add facebook icon */
}
.facebookBtn:hover{
color: #4060A5;
background: #fff;
border-color: #4060A5; /* change the border color on mouse hover */
}
/* twitter button class*/
.twitterBtn{
background: #00ABE3;
}
.twitterBtn:before{
font-family: "FontAwesome";
content: "\f099"; /* add twitter icon */
}
.twitterBtn:hover{
color: #00ABE3;
background: #fff;
border-color: #00ABE3;
}
/* instagram button class*/
.instagramBtn{
background: #4169E1;
}
.instagramBtn:before{
font-family: "FontAwesome";
content: "\f16d"; /* add instagram icon */
}
.instagramBtn:hover{
color: #00FFFF;
background: #fff;
border-color: #4169E1;
}
<div class="container">
<div class="profile">
<form action="testing.php" method="post">
<textarea name="text2" rows="2" cols=0> Family Name</textarea><br>
</form>
<button class="btn profile-edit-btn">Edit Profile</button>
</div>
<!-- End of profile section -->
</div>
<!-- End of container -->
</header>
<main>
<div class="container">
<figure class="snip0056">
<figcaption>
<textarea name="text2" rows="2" cols=0>Name(john Doe)</textarea>
<textarea name="text3" rows="8" cols=20>Bio,Social media, Favorite Quote,A letter to your partner.</textarea>
</p>
</figcaption> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample8.jpg" alt="profilepic1" id="imgClickAndChange" onclick="changeImage()" />
<div class="position">
<textarea name="text4" rows="1" cols=9>Proffession</textarea>
</div>
</h3>
</figure>
<figure class="snip0056 yellow">
<figcaption>
<textarea name="text5" rows="2" cols=0>Name(jane Doe)</textarea>
<textarea name="text6" rows="8" cols=20>Bio,Social media, Favorite Quote,A letter to your partner.</textarea>
</figcaption><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample9.jpg" alt="sample9" />
<div class="position">
<textarea name="text4" rows="1" cols=9>Title</textarea>
</figure>
<div id="social">
<a class="facebookBtn smGlobalBtn" href="https://facebook.com/ngurah.dimas.94"></a>
<a class="twitterBtn smGlobalBtn" href="https://twitter.com/ngurahdimas"></a>
<a class="instagramBtn smGlobalBtn" href="http://instagram.com/ngurahdimas_"></a>
</div>
</main>

Use label and hide the upload button
<form id='form' method='post' action='/'>
<label for='img1'>
<input id='img1' type='file' style='display: none;' />
<img id='img1_preview' src='' />
</label>
<input type='submit' value='Update' />
</form>
When you click the img, which also click on the label it will automatically trigger the input file which will pop up the upload image window, click on the submit to submit the form. It is better to use JS to capture the image and upload it using ajax though, will be more responsive.

use this code to choose a image and onclick submit button you need to process it with your baground
<form >
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile"><br><br>
<input type="submit">
</form>

Add image to Button

I would like to add a .png image to the buttons .img-btn-next and img-btn-prev.
It is a picture gallery and I want to replace the buttons with next icons.
I'm a starter, I suppose it's not that difficult.
Thanks for your help in advance.
display: block;
padding: 0.5vw 0.5vw;
position: fixed;
background-color: black;
color: white;
top: 50vh;
z-index: 150;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
cursor: pointer;
}
.img-btn-next:hover{
opacity: 0.8;
}
.img-btn-prev {
display: block;
padding: 0.5vw 0.5vw;
background-color: black;
position: fixed;
top: 50vh;
z-index: 150;
font-family: Arial, Helvetica, sans-serif;
color: white;
cursor: pointer;
text-transform: uppercase;
}
.img-btn-prev:hover{
opacity: 0.8;
-----------------------------------------------------------------------
let newNextBtn = document.createElement("a");
let btnNextText = document.createTextNode("next");
newNextBtn.appendChild(btnNextText);
container.appendChild(newNextBtn);
newNextBtn.setAttribute("class", "img-btn-next");
newNextBtn.setAttribute("onclick", "changeImg(1)");
newNextBtn.style.cssText = "right:" + calcImgtoEdge + "px;";
//last Button
let newPrevBtn = document.createElement("a");
let btnPrevText = document.createTextNode("last");
newPrevBtn.appendChild(btnPrevText);
container.appendChild(newPrevBtn);
newPrevBtn.setAttribute("class", "img-btn-prev");
newPrevBtn.setAttribute("onclick", "changeImg(0)");
newPrevBtn.style.cssText = "left:" + calcImgtoEdge + "px;";
}

You can simply add an <img> tag inside the <a> or <button> element, which I think is the easier option in order to style it properly and mix it with other elements such as a text label:
.img-btn {
position: fixed;
display: block;
top: 50vh;
transform: translate(0, -50%);
text-transform: uppercase;
font-family: monospace;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 100%;
width: 128px;
height: 128px;
box-shadow: 0 0 64px rgba(0, 0, 0, .125);
}
.img-btn:hover {
opacity: 0.5;
}
.img-btn-next {
left: 16px;
}
.img-btn-prev {
right: 16px;
}
.img-btn-img {
width: 64px;
margin: 0 0 8px;
}
<a class="img-btn img-btn-prev">
<img class="img-btn-img" src="https://i.stack.imgur.com/9fbz7.png" />
<span class="img-btn-text">Prev</span>
</a>
<a class="img-btn img-btn-next">
<img class="img-btn-img" src="https://i.stack.imgur.com/WBFLy.png" />
<span class="img-btn-text">Next</span>
</a>
Alternatively, you can also add it as a CSS background:
.img-btn {
position: fixed;
display: block;
top: 50vh;
transform: translate(0, -50%);
text-transform: uppercase;
font-family: monospace;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 100%;
width: 128px;
height: 128px;
box-shadow: 0 0 64px rgba(0, 0, 0, .125);
background-size: 50%;
background-position: 50% 50%;
background-repeat: no-repeat;
}
.img-btn:hover {
opacity: 0.5;
}
.img-btn-prev {
left: 16px;
background-image: url("https://i.stack.imgur.com/WBFLy.png");
}
.img-btn-next {
right: 16px;
background-image: url("https://i.stack.imgur.com/9fbz7.png");
}
.img-btn-img {
width: 64px;
margin: 0 0 8px;
}
<a class="img-btn img-btn-prev"></a>
<a class="img-btn img-btn-next"></a>

We Keep Coding

JavaScript is the programming language of the Web.

CSS z-index property and javascript background mouse interaction - javascript

Related

Why is my automatic chatbox not showing up?

How to adjust the "Total Price" whenever I change the input values?

Animation in html/css/js [duplicate]

Give user ablity to click on images and upload their own picture

Add image to Button

Categories

Resources