Javascript - Calendar Flip animation not working

Javascript - Calendar Flip animation not working - javascript

I am attempting to create a calendar wherein upon clicking a particular date, the calendar should flip over to reveal details of a specific reservation. While the calendar interface appears perfectly on the webpage, the flip animation does not work and I cant seem to figure out why. I must add that I found most of this code on codepen and am modifying it based on my preference. I have attached my code breakdown below. I would greatly appreciate any advice and help. Thanks!:
<script type = "text/javascript">
var app = {
settings: {
container: $(".calendar"),
calendar: $(".front"),
days: $(".weeks span"),
form: $(".back"),
input: $(".back input"),
buttons: $(".back button")
},
init: function () {
instance = this;
settings = this.settings;
this.bindUIActions();
},
swap: function (currentSide, desiredSide) {
settings.container.toggleClass("flip");
currentSide.fadeOut(900);
currentSide.hide();
desiredSide.show();
},
bindUIActions: function () {
settings.days.on("click", function () {
instance.swap(settings.calendar, settings.form);
settings.input.focus();
});
settings.buttons.on("click", function () {
instance.swap(settings.form, settings.calendar);
});
}
};
app.init();
</script>
<style type = "text/css">
* {
box-sizing: border-box;
font-family: "Roboto", sans-serif;
list-style: none;
margin: 0;
outline: none;
padding: 0;
}
a {
text-decoration: none;
}
body,
html {
height: 100%;
}
body {
background: #dfebed;
font-family: "Roboto", sans-serif;
}
.container {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
margin: 0 auto;
max-width: 600px;
width: 100%;
}
.calendar {
background: #2b4450;
border-radius: 4px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
height: 501px;
perspective: 1000;
transition: 0.9s;
transform-style: preserve-3d;
width: 100%;
}
/* Front - Calendar */
.front {
transform: rotateY(0deg);
}
.current-date {
border-bottom: 1px solid rgba(73, 114, 133, 0.6);
display: flex;
justify-content: space-between;
padding: 30px 40px;
}
.current-date h1 {
color: #dfebed;
font-size: 1.4em;
font-weight: 300;
}
.week-days {
color: #dfebed;
display: flex;
justify-content: space-between;
font-weight: 600;
padding: 30px 40px;
}
.days {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.weeks {
color: #fff;
display: flex;
flex-direction: column;
padding: 0 40px;
}
.weeks div {
display: flex;
font-size: 1.2em;
font-weight: 300;
justify-content: space-between;
margin-bottom: 20px;
width: 100%;
}
.last-month {
opacity: 0.3;
}
.weeks span {
padding: 10px;
}
.weeks span.active {
background: #f78536;
border-radius: 50%;
}
.weeks span:not(.last-month):hover {
cursor: pointer;
font-weight: 600;
}
.event {
position: relative;
}
.event:after {
content: "•";
color: #f78536;
font-size: 1.4em;
position: absolute;
right: -4px;
top: -4px;
}
/* Back - Event form */
.back {
height: 100%;
transform: rotateY(180deg);
}
.back input {
background: none;
border: none;
border-bottom: 1px solid rgba(73, 114, 133, 0.6);
color: #dfebed;
font-size: 1.4em;
font-weight: 300;
padding: 30px 40px;
width: 100%;
}
.info {
color: #dfebed;
display: flex;
flex-direction: column;
font-weight: 600;
font-size: 1.2em;
padding: 30px 40px;
}
.info div:not(.observations) {
margin-bottom: 40px;
}
.info span {
font-weight: 300;
}
.info .date {
display: flex;
justify-content: space-between;
}
.info .date p {
width: 50%;
}
.info .address p {
width: 100%;
}
.actions {
bottom: 0;
border-top: 1px solid rgba(73, 114, 133, 0.6);
display: flex;
justify-content: space-between;
position: absolute;
width: 100%;
}
.actions button {
background: none;
border: 0;
color: #fff;
font-weight: 600;
letter-spacing: 3px;
margin: 0;
padding: 30px 0;
text-transform: uppercase;
width: 50%;
}
.actions button:first-of-type {
border-right: 1px solid rgba(73, 114, 133, 0.6);
}
.actions button:hover {
background: #497285;
cursor: pointer;
}
.actions button:active {
background: #5889a0;
outline: none;
}
/* Flip animation */
.flip {
transform: rotateY(180deg);
}
.front,
.back {
backface-visibility: hidden;
}
</style>
<link rel = "stylesheet" type = "text/css">
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<div class="container">
<div class="calendar">
<div class="front">
<div class="current-date">
<h1>Monday 26th</h1>
<h1>April 2021</h1>
</div>
<div class="current-month">
<ul class="week-days">
<li>MON</li>
<li>TUE</li>
<li>WED</li>
<li>THU</li>
<li>FRI</li>
<li>SAT</li>
<li>SUN</li>
</ul>
<div class="weeks">
<div class="first">
<span class="last-month">28</span>
<span class="last-month">29</span>
<span class="last-month">30</span>
<span class="last-month">31</span>
<span>01</span>
<span>02</span>
<span>03</span>
</div>
<div class="second">
<span>04</span>
<span>05</span>
<span class="event">06</span>
<span>07</span>
<span>08</span>
<span>09</span>
<span>10</span>
</div>
<div class="third">
<span>11</span>
<span>12</span>
<span>13</span>
<span>14</span>
<span class="active">15</span>
<span>16</span>
<span>17</span>
</div>
<div class="fourth">
<span>18</span>
<span>19</span>
<span>20</span>
<span>21</span>
<span>22</span>
<span>23</span>
<span>24</span>
</div>
<div class="fifth">
<span>25</span>
<span>26</span>
<span>27</span>
<span>28</span>
<span>29</span>
<span>30</span>
<span>31</span>
</div>
</div>
</div>
</div>
<div class="back">
<input placeholder="What's the event?">
<div class="info">
<div class="date">
<p class="info-date">
Date: <span>Jan 15th, 2016</span>
</p>
<p class="info-time">
Time: <span>6:35 PM</span>
</p>
</div>
<div class="address">
<p>
Address: <span>129 W 81st St, New York, NY</span>
</p>
</div>
<div class="observations">
<p>
Observations: <span>Be there 15 minutes earlier</span>
</p>
</div>
</div>
<div class="actions">
<button class="save">
Save <i class="ion-checkmark"></i>
</button>
<button class="dismiss">
Dismiss <i class="ion-android-close"></i>
</button>
</div>
</div>
</div>
</div>

Just change the <script> tag as shown below. I added Google CDN for jQuery. Why?
For more about how to load script tags check here
var app = {
settings: {
container: $(".calendar"),
calendar: $(".front"),
days: $(".weeks span"),
form: $(".back"),
input: $(".back input"),
buttons: $(".back button")
},
init: function () {
instance = this;
settings = this.settings;
this.bindUIActions();
},
swap: function (currentSide, desiredSide) {
settings.container.toggleClass("flip");
currentSide.fadeOut(900);
currentSide.hide();
desiredSide.show();
},
bindUIActions: function () {
settings.days.on("click", function () {
instance.swap(settings.calendar, settings.form);
settings.input.focus();
});
settings.buttons.on("click", function () {
instance.swap(settings.form, settings.calendar);
});
}
};
app.init();
* {
box-sizing: border-box;
font-family: "Roboto", sans-serif;
list-style: none;
margin: 0;
outline: none;
padding: 0;
}
a {
text-decoration: none;
}
body,
html {
height: 100%;
}
body {
background: #dfebed;
font-family: "Roboto", sans-serif;
}
.container {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
margin: 0 auto;
max-width: 600px;
width: 100%;
}
.calendar {
background: #2b4450;
border-radius: 4px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
height: 501px;
perspective: 1000;
transition: 0.9s;
transform-style: preserve-3d;
width: 100%;
}
/* Front - Calendar */
.front {
transform: rotateY(0deg);
}
.current-date {
border-bottom: 1px solid rgba(73, 114, 133, 0.6);
display: flex;
justify-content: space-between;
padding: 30px 40px;
}
.current-date h1 {
color: #dfebed;
font-size: 1.4em;
font-weight: 300;
}
.week-days {
color: #dfebed;
display: flex;
justify-content: space-between;
font-weight: 600;
padding: 30px 40px;
}
.days {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.weeks {
color: #fff;
display: flex;
flex-direction: column;
padding: 0 40px;
}
.weeks div {
display: flex;
font-size: 1.2em;
font-weight: 300;
justify-content: space-between;
margin-bottom: 20px;
width: 100%;
}
.last-month {
opacity: 0.3;
}
.weeks span {
padding: 10px;
}
.weeks span.active {
background: #f78536;
border-radius: 50%;
}
.weeks span:not(.last-month):hover {
cursor: pointer;
font-weight: 600;
}
.event {
position: relative;
}
.event:after {
content: "•";
color: #f78536;
font-size: 1.4em;
position: absolute;
right: -4px;
top: -4px;
}
/* Back - Event form */
.back {
height: 100%;
transform: rotateY(180deg);
}
.back input {
background: none;
border: none;
border-bottom: 1px solid rgba(73, 114, 133, 0.6);
color: #dfebed;
font-size: 1.4em;
font-weight: 300;
padding: 30px 40px;
width: 100%;
}
.info {
color: #dfebed;
display: flex;
flex-direction: column;
font-weight: 600;
font-size: 1.2em;
padding: 30px 40px;
}
.info div:not(.observations) {
margin-bottom: 40px;
}
.info span {
font-weight: 300;
}
.info .date {
display: flex;
justify-content: space-between;
}
.info .date p {
width: 50%;
}
.info .address p {
width: 100%;
}
.actions {
bottom: 0;
border-top: 1px solid rgba(73, 114, 133, 0.6);
display: flex;
justify-content: space-between;
position: absolute;
width: 100%;
}
.actions button {
background: none;
border: 0;
color: #fff;
font-weight: 600;
letter-spacing: 3px;
margin: 0;
padding: 30px 0;
text-transform: uppercase;
width: 50%;
}
.actions button:first-of-type {
border-right: 1px solid rgba(73, 114, 133, 0.6);
}
.actions button:hover {
background: #497285;
cursor: pointer;
}
.actions button:active {
background: #5889a0;
outline: none;
}
/* Flip animation */
.flip {
transform: rotateY(180deg);
}
.front,
.back {
backface-visibility: hidden;
}
</style>
<div class="container">
<div class="calendar">
<div class="front">
<div class="current-date">
<h1>Monday 26th</h1>
<h1>April 2021</h1>
</div>
<div class="current-month">
<ul class="week-days">
<li>MON</li>
<li>TUE</li>
<li>WED</li>
<li>THU</li>
<li>FRI</li>
<li>SAT</li>
<li>SUN</li>
</ul>
<div class="weeks">
<div class="first">
<span class="last-month">28</span>
<span class="last-month">29</span>
<span class="last-month">30</span>
<span class="last-month">31</span>
<span>01</span>
<span>02</span>
<span>03</span>
</div>
<div class="second">
<span>04</span>
<span>05</span>
<span class="event">06</span>
<span>07</span>
<span>08</span>
<span>09</span>
<span>10</span>
</div>
<div class="third">
<span>11</span>
<span>12</span>
<span>13</span>
<span>14</span>
<span class="active">15</span>
<span>16</span>
<span>17</span>
</div>
<div class="fourth">
<span>18</span>
<span>19</span>
<span>20</span>
<span>21</span>
<span>22</span>
<span>23</span>
<span>24</span>
</div>
<div class="fifth">
<span>25</span>
<span>26</span>
<span>27</span>
<span>28</span>
<span>29</span>
<span>30</span>
<span>31</span>
</div>
</div>
</div>
</div>
<div class="back">
<input placeholder="What's the event?">
<div class="info">
<div class="date">
<p class="info-date">
Date: <span>Jan 15th, 2016</span>
</p>
<p class="info-time">
Time: <span>6:35 PM</span>
</p>
</div>
<div class="address">
<p>
Address: <span>129 W 81st St, New York, NY</span>
</p>
</div>
<div class="observations">
<p>
Observations: <span>Be there 15 minutes earlier</span>
</p>
</div>
</div>
<div class="actions">
<button class="save">
Save <i class="ion-checkmark"></i>
</button>
<button class="dismiss">
Dismiss <i class="ion-android-close"></i>
</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Related

Navigation bar with drop-down menu is not sticky-ing

The navigation menu is not 'freezing' to the top of the page while I scroll sticky this navigation menu at the top of the page.
let nav_toggle = document.querySelector('.nav_toggle');
let nav_toggle_icon = document.querySelector('.nav_toggle ion-icon');
let nav_menu = document.querySelector('.nav_menu');
nav_toggle.addEventListener('click', () => {
nav_menu.classList.toggle('active');
nav_toggle_icon.setAttribute('name',
nav_menu.classList.contains('active') ? 'close-outline' : 'menu-outline'
);
});
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#400;500&display=swap');
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style-type: none;
}
:root {
--primary: #7F56D9;
--secondary: #F4EBFF;
--text-primary: #101828;
--text-secondary: #667085;
--badge-bg: #ECFDF3;
--badge-text: #027A48;
--white: #fff;
--dropdown-bg: rgb(252, 253, 251);
--shadow: rgba(32, 7, 65, 0.14);
--container: 124rem;
--nav-height: 7rem;
}
html {
font-family: 'Inter', sans-serif;
font-size: 62.5%;
font-style: normal;
}
body {
font-size: 1.6rem;
}
ion-icon {
font-size: 20px;
}
h4 {
font-size: 110%;
font-weight: 300;
}
h3 {
font-size: 130%;
font-weight: 500;
}
a.logo {
color: rgb(9, 2, 114);
font-size: 20px;
font-weight: 500;
}
h4:hover {
color: #eba714;
}
h3:hover {
color: #3d3d3d;
}
.container {
max-width: var(--container);
margin: 0 auto;
padding: 0 1rem;
opacity: 0.98;
position: sticky;
top: 0;
}
.navigation {
display: flex;
align-items: center;
justify-content: space-between;
height: var(--nav-height);
position: relative;
background: var(--white);
}
.nav_list {
display: inline-flex;
gap: 2rem;
align-items: center;
margin: 0 1.5rem;
}
.nav_action {
display: flex;
align-items: center;
gap: 1rem;
}
.nav_link,
.btn {
display: flex;
justify-content: center;
gap: 1rem;
font-weight: 500;
color: var(--text-primary);
}
.btn-primary {
display: inline-flex;
color: var(--white);
background: var(--primary);
font-weight: 500;
padding: 0.6rem 1.5rem;
border-radius: 1.5rem;
}
.nav_toggle {
cursor: pointer;
display: none;
}
.nav_toggle ion-icon {
font-size: 3.5rem;
color: var(--text-primary);
}
.dropdown {
position: absolute;
top: var(--nav-height);
left: 0;
width: 100%;
background: var(--dropdown-bg);
box-shadow: 0rem 0.2rem 0.5rem var(--shadow);
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
transition: all 0.5s ease-in;
}
.dropdown-inner {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
gap: 1rem;
padding: 2rem;
}
.nav_list_menu:hover ion-icon {
transition: all 0.5s ease-in;
transform: rotate(180deg);
}
.nav_list_menu:hover .dropdown {
clip-path: polygon(0 0, 100% 0, 100% 102%, 0 102%);
}
.item-list {
display: flex;
align-items: center;
gap: 1rem;
margin: 3rem 0;
}
.item-list-info {
position: relative;
width: 100%;
}
.info-badge {
position: absolute;
right: 1rem;
top: 0;
background: var(--badge-bg);
padding: 0.1rem 0.5rem;
border-radius: 1rem;
color: var(--badge-text);
}
#media (max-width:730px) {
.nav_toggle {
display: block;
}
.nav_menu {
position: absolute;
top: var(--nav-height);
left: 0;
width: 100%;
background: var(--dropdown-bg);
display: none;
}
.nav_menu.active {
display: block;
}
.nav_list {
display: block;
margin: 2rem 0;
text-align: center;
}
.nav_link {
padding: 0 2rem;
display: flex;
justify-content: space-between;
}
.dropdown {
top: 0;
position: relative;
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
box-shadow: none;
height: 0;
text-align: start;
transition: all 0.5s ease-in;
}
.nav_list_menu:hover .dropdown {
height: 100%;
transition: all 0.5s ease-in;
}
}
#media (max-width:365px) {
.logo-img {
width: 10rem;
}
.btn,
.btn-primary {
padding: 0.4rem 1rem;
}
}
<header>
<div class="container">
<nav class="navigation">
<a class="logo"> RA </a>
<li class="nav_list nav_list_menu">
<a href="#!" class="nav_link">
<ion-icon name="menu"></ion-icon>
</a>
<div class="dropdown">
<div class="dropdown-inner">
<div class="dropdown-item">
<h3 class="item-heading">Menu</h3>
<div class="item-list">
<div class="item-list-info">
<h4>Home</h4>
</div>
</div>
<div class="item-list">
<div class="item-list-info">
<h4>About</h4>
</div>
</div>
<div class="item-list">
<div class="item-list-info">
<h4>Blog</h4>
</div>
</div>
<div class="item-list">
<div class="item-list-info">
<h4>Get in touch</h4>
</div>
</div>
</div>
<div class="dropdown-item">
<h3 class="item-heading">Projects</h3>
<div class="item-list">
<div class="item-list-info">
<h4>Carbon Calculator</h4>
</div>
</div>
<div class="item-list">
<div class="item-list-info">
<h4>Price my car</h4>
</div>
</div>
<div class="item-list">
<div class="item-list-info">
<h4>Coffee Finder</h4>
</div>
</div>
<div class="item-list">
<div class="item-list-info">
<h4>Quran Whiteboard</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
I have tried to attach the 'position: sticky;' and the 'top: 0;' to the container, navigation, etc., and to no effect. I am fairly new to JS and just getting back into HTML and CSS, your help would be appreciated, thank you!

Why does the conditional rendering of icons fail in this Vue 3 application?

I am working on an audio player with Vue 3 and the Napster API.
Project details
There is a mute/unmute button and the method below:
toggleMute() {
this.player.muted = !this.player.muted;
}
const musicApp = {
data() {
return {
player: new Audio(),
trackCount: 0,
tracks: []
};
},
methods: {
async getTracks() {
try {
const response = await axios
.get(
"https://api.napster.com/v2.1/tracks/top?apikey=ZTk2YjY4MjMtMDAzYy00MTg4LWE2MjYtZDIzNjJmMmM0YTdm"
)
.catch((error) => {
console.log(error);
});
this.tracks = response;
this.tracks = response.data.tracks;
} catch (error) {
console.log(error);
}
},
nextTrack() {
if (this.trackCount < this.tracks.length - 1) {
this.trackCount++;
this.setPlayerSource();
this.playPause();
}
},
prevTrack() {
if (this.trackCount >= 1) {
this.trackCount--;
this.setPlayerSource();
this.playPause();
}
},
setPlayerSource() {
this.player.src = this.tracks[this.trackCount].previewURL;
},
playPause() {
if (this.player.paused) {
this.player.play();
} else {
this.player.pause();
}
},
toggleMute() {
this.player.muted = !this.player.muted;
}
},
async created() {
await this.getTracks();
this.setPlayerSource();
this.playPause();
},
computed: {
isPlaying() {
return !this.player.paused;
},
isMuted() {
return this.player.muted;
}
}
};
Vue.createApp(musicApp).mount("#audioPlayer");
html,
body {
margin: 0;
padding: 0;
font-size: 16px;
}
body * {
box-sizing: border-box;
font-family: "Montserrat", sans-serif;
}
.player-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #2998ff;
background-image: linear-gradient(62deg, #2998ff 0%, #5966eb 100%);
}
#audioPlayer {
width: 300px;
height: 300px;
border-radius: 8px;
position: relative;
overflow: hidden;
background-color: #00ca81;
background-image: linear-gradient(160deg, #00ca81 0%, #ffffff 100%);
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
display: flex;
flex-direction: column;
align-items: center;
}
.volume {
color: #ff0057;
opacity: 0.9;
font-size: 20px;
position: absolute;
top: 5px;
right: 6px;
cursor: pointer;
}
.album {
width: 100%;
flex: 1;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.album-items {
padding: 0 10px;
text-align: center;
}
.cover {
width: 150px;
height: 150px;
margin: auto;
box-shadow: 0px 5px 12px 0px rgba(0, 0, 0, 0.17);
border-radius: 50%;
background: url("https://www.udiscovermusic.com/wp-content/uploads/2017/08/The-Smashing-Pumpkins-Mellon-Collie-and-the-Infinite-Sadness.jpg")
center top transparent;
background-size: cover;
}
.info {
width: 100%;
padding-top: 5px;
color: #000;
opacity: 0.85;
}
.info h1 {
font-size: 11px;
margin: 5px 0 0 0;
}
.info h2 {
font-size: 10px;
margin: 3px 0 0 0;
}
.to-bottom {
width: 100%;
margin-top: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.track {
background-color: #ff0057;
opacity: 0.9;
height: 3px;
width: 100%;
}
.controls {
width: 150px;
display: flex;
height: 60px;
justify-content: space-between;
align-items: center;
}
.controls .navigate {
display: flex;
box-shadow: 1px 2px 7px 2px rgba(0, 0, 0, 0.09);
width: 33px;
height: 33px;
line-height: 1;
color: #ff0057;
cursor: pointer;
background: #fff;
opacity: 0.9;
border-radius: 50%;
text-align: center;
justify-content: center;
align-items: center;
}
.controls .navigate.disabled {
pointer-events: none;
color: #606060;
background-color: #f7f7f7;
}
.controls .navigate.navigate-play {
width: 38px;
height: 38px;
}
.navigate-play .fa-play {
margin-left: 3px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://unpkg.com/axios#0.22.0/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue#next"></script>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;500&display=swap" rel="stylesheet">
<div class="player-container">
<div id="audioPlayer">
<span class="volume" #click="toggleMute">
<i v-show="!isMuted" class="fa fa-volume-up"></i>
<i v-show="isMuted" class="fa fa-volume-off"></i>
</span>
<div class="album">
<div class="album-items">
<div class="cover"></div>
<div class="info">
<h1>{{tracks[trackCount].name}}</h1>
<h2>{{tracks[trackCount].artistName}}</h2>
</div>
</div>
</div>
<div class="to-bottom">
<div class="track"></div>
<div class="controls">
<div class="navigate navigate-prev" :class="{'disabled' : trackCount == 0}" #click="prevTrack">
<i class="fa fa-step-backward"></i>
</div>
<div class="navigate navigate-play" #click="playPause">
<i v-if="isPlaying" class="fa fa-pause"></i>
<i v-else class="fa fa-play"></i>
</div>
<div class="navigate navigate-next" :class="{'disabled' : trackCount == tracks.length - 1}" #click="nextTrack">
<i class="fa fa-step-forward"></i>
</div>
</div>
</div>
</div>
</div>
The problem
Depending on the state of the player (muted or unmuted), I want to display either the volume-up or the volume-off icon. For this purpose, I use the isMuted computed property in the template:
<span class="volume" #click="toggleMute">
<i v-show="!isMuted" class="fa fa-volume-up"></i>
<i v-show="isMuted" class="fa fa-volume-off"></i>
</span>
The player is correctly muted and unmuted but the icon does not change accordingly.
What am I doing wrong?

You can add data property muted, update property on
toggleMute() {
this.player.muted = !this.player.muted;
this.muted = this.player.muted
}
and in template bind icons to that property :
const musicApp = {
data() {
return {
player: new Audio(),
trackCount: 0,
tracks: [],
muted: false
};
},
methods: {
async getTracks() {
try {
const response = await axios
.get(
"https://api.napster.com/v2.1/tracks/top?apikey=ZTk2YjY4MjMtMDAzYy00MTg4LWE2MjYtZDIzNjJmMmM0YTdm"
)
.catch((error) => {
console.log(error);
});
this.tracks = response;
this.tracks = response.data.tracks;
} catch (error) {
console.log(error);
}
},
nextTrack() {
if (this.trackCount < this.tracks.length - 1) {
this.trackCount++;
this.setPlayerSource();
this.playPause();
}
},
prevTrack() {
if (this.trackCount >= 1) {
this.trackCount--;
this.setPlayerSource();
this.playPause();
}
},
setPlayerSource() {
this.player.src = this.tracks[this.trackCount].previewURL;
},
playPause() {
if (this.player.paused) {
this.player.play();
} else {
this.player.pause();
}
},
toggleMute() {
this.player.muted = !this.player.muted;
this.muted = this.player.muted
}
},
async created() {
await this.getTracks();
this.setPlayerSource();
this.playPause();
},
computed: {
isPlaying() {
return !this.player.paused;
},
}
};
Vue.createApp(musicApp).mount("#audioPlayer");
html,
body {
margin: 0;
padding: 0;
font-size: 16px;
}
body * {
box-sizing: border-box;
font-family: "Montserrat", sans-serif;
}
.player-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #2998ff;
background-image: linear-gradient(62deg, #2998ff 0%, #5966eb 100%);
}
#audioPlayer {
width: 300px;
height: 300px;
border-radius: 8px;
position: relative;
overflow: hidden;
background-color: #00ca81;
background-image: linear-gradient(160deg, #00ca81 0%, #ffffff 100%);
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
display: flex;
flex-direction: column;
align-items: center;
}
.volume {
color: #ff0057;
opacity: 0.9;
font-size: 20px;
position: absolute;
top: 5px;
right: 6px;
cursor: pointer;
}
.album {
width: 100%;
flex: 1;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.album-items {
padding: 0 10px;
text-align: center;
}
.cover {
width: 150px;
height: 150px;
margin: auto;
box-shadow: 0px 5px 12px 0px rgba(0, 0, 0, 0.17);
border-radius: 50%;
background: url("https://www.udiscovermusic.com/wp-content/uploads/2017/08/The-Smashing-Pumpkins-Mellon-Collie-and-the-Infinite-Sadness.jpg")
center top transparent;
background-size: cover;
}
.info {
width: 100%;
padding-top: 5px;
color: #000;
opacity: 0.85;
}
.info h1 {
font-size: 11px;
margin: 5px 0 0 0;
}
.info h2 {
font-size: 10px;
margin: 3px 0 0 0;
}
.to-bottom {
width: 100%;
margin-top: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.track {
background-color: #ff0057;
opacity: 0.9;
height: 3px;
width: 100%;
}
.controls {
width: 150px;
display: flex;
height: 60px;
justify-content: space-between;
align-items: center;
}
.controls .navigate {
display: flex;
box-shadow: 1px 2px 7px 2px rgba(0, 0, 0, 0.09);
width: 33px;
height: 33px;
line-height: 1;
color: #ff0057;
cursor: pointer;
background: #fff;
opacity: 0.9;
border-radius: 50%;
text-align: center;
justify-content: center;
align-items: center;
}
.controls .navigate.disabled {
pointer-events: none;
color: #606060;
background-color: #f7f7f7;
}
.controls .navigate.navigate-play {
width: 38px;
height: 38px;
}
.navigate-play .fa-play {
margin-left: 3px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://unpkg.com/axios#0.22.0/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue#next"></script>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;500&display=swap" rel="stylesheet">
<div class="player-container">
<div id="audioPlayer">
<span class="volume" #click="toggleMute">
<i v-show="!muted" class="fa fa-volume-up"></i>
<i v-show="muted" class="fa fa-volume-off"></i>
</span>
<div class="album">
<div class="album-items">
<div class="cover"></div>
<div class="info">
<h1>{{tracks[trackCount].name}}</h1>
<h2>{{tracks[trackCount].artistName}}</h2>
</div>
</div>
</div>
<div class="to-bottom">
<div class="track"></div>
<div class="controls">
<div class="navigate navigate-prev" :class="{'disabled' : trackCount == 0}" #click="prevTrack">
<i class="fa fa-step-backward"></i>
</div>
<div class="navigate navigate-play" #click="playPause">
<i v-if="isPlaying" class="fa fa-pause"></i>
<i v-else class="fa fa-play"></i>
</div>
<div class="navigate navigate-next" :class="{'disabled' : trackCount == tracks.length - 1}" #click="nextTrack">
<i class="fa fa-step-forward"></i>
</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>

How to remove NodeList at once?

I m making some project.
When I click "number1" button, I thought "number2" and "drag-zone" box is removed at once
But It's not happened. I have to click "number1" to three time to remove "the number2" and "drag-zone"
I want to remove that at once. What's my problem in my code?
I don't know How could I remove NodeList at once
let list = document.getElementsByClassName("boxDrop");
function remove(num) {
if (num === 0) {
for (let i = 0; i < list[1].childNodes.length; i++)
list[1].removeChild(list[1].childNodes[i]);
}
}
* {
align-items: center;
text-align: center;
justify-content: space-evenly;
}
button {
border: none;
background-color: transparent;
font-size: 20px;
border-radius: 10px;
}
button:hover {
background-color: rgb(252, 211, 77);
}
.thumbDropBox {
display: flex;
border: 3px solid rgb(209, 178, 2);
padding: 15px;
margin-top: 100px;
cursor: pointer;
}
.drop-zone {
display: flex;
border: 3px dashed rgb(253, 196, 39);
margin: 10px;
width: 200px;
height: 200px;
padding: 20px;
font-size: 30px;
font-weight: bold;
border-radius: 14px;
}
.drop-zone__over {
border-style: solid;
}
.drop-zone__input {
display: none;
}
.drop-zone__thumb {
background-color: rgb(235, 235, 235);
height: 100%;
width: 100%;
border-radius: 15px;
overflow: hidden;
position: relative;
}
.drop-zone__thumb::after {
content: attr(data-label);
width: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
background-color: rgb(192, 192, 192);
position: absolute;
bottom: 0;
}
.question {
display: inline-block;
padding: 20px;
font-size: 30px;
}
<div class="thumbDropBox">
<div class="boxDrop">
<div class="drop-zone">
<span class="drop-zone__prompt">Drag or Choose</span>
<input type="file" class="drop-zone__input">
<!-- <div class="drop-zone__thumb" data-label="eskdflsdf.txt"></div> -->
</div>
<button onclick="remove(0)">Number1</button>
</div>
<div class="boxDrop">
<div class="drop-zone">
<span class="drop-zone__prompt">Drag or Choose</span>
<input type="file" class="drop-zone__input">
<!-- <div class="drop-zone__thumb" data-label="eskdflsdf.txt"></div> -->
</div>
<button onclick="remove(1)">Number2</button>
</div>
</div>
<span class="question">Whose is the Better?</span>

HTML/CSS Hamburger Menu - where to place the div for hamburger menu?

I have coded in the header for my school project, and now trying to add a hamburger menu for tablets & mobile versions. I wish to have the hamburger menu on the right side of the screen and the logo on the left side like it already is, the rest of the information like the nav, opening hours, phone number, etc will all be inside the hamburger menu.
The thing I am sitting with is that, I don't really know where to place the div for the hamburger menu. I have built the header for pc screen-size but it all does mess up when I drag the screen to the size of the mobile screen. After watching tutorials and reading about the hamburger menu, I am still sitting here not knowing where to place the div for the hamburger menu and have everything except the logo inside the hamburger menu for tablets and mobile.
Added the code for a header in the snippet, it is showing up weird in the snippet. Probably because I have written a lot wrong, but it still works though:
So this is the full HTML and CSS code for the header:
let popup = document.getElementById("Contact-popup");
popup.addEventListener("click", () => {
document.getElementById("contact_popup_page").style.display = "block";
});
let close = document.getElementById("close");
/** HEADER **/
body {
margin: 0 10%;
font-size: 12px;
}
a {
text-decoration: none;
color: #707070;
}
header {
box-shadow: 2px 2px 2px 3px rgb(0, 0, 0, 0.1);
position: fixed;
width: 80%;
background-color: #fff;
z-index: 100;
margin-top: 0;
}
.header__main {
width: 100%;
display: grid;
grid-template-areas: "box1 box2";
color: #707070;
}
.logo__section {
height: 100px;
grid-area: box1;
margin-left: 2.5%;
width: 40%;
}
.header__main>.logo__section>a>img {
width: 100%;
}
.nav__topRight {
width: 100%;
height: 100px;
grid-area: box2;
color: #000;
flex-direction: column;
margin-top: 0;
align-items: flex-end;
}
.flexbox1 {
margin: 1% 0 3% 0;
}
.nav__top {
display: flex;
justify-content: flex-end;
}
.nav__middle {
display: flex;
justify-content: flex-end;
margin: 5% 3% 0 0;
font-size: 1.8rem;
color: #707070;
}
/** Contact */
input {
outline: none;
border: none;
}
textarea {
outline: none;
border: none;
}
.contact {
font-size: 1.8rem;
color: #707070;
}
.contact__info {
margin-left: 5%;
}
.contact__info>p {
color: #707070;
display: inline;
font-size: 1.8rem;
margin: 0 15px 0 5px;
}
.contact_popup_page {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
display: none;
background-color: rgba(0, 0, 0, 0.5);
z-index: 10;
}
.close,
.closer {
display: flex;
justify-content: right;
position: absolute;
font-size: 50px;
}
textarea:focus,
input:focus {
border-color: #fdb834 !important;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
input:focus:-ms-input-placeholder {
color: transparent;
}
textarea:focus::-webkit-input-placeholder {
color: transparent;
}
textarea:focus:-moz-placeholder {
color: transparent;
}
textarea:focus::-moz-placeholder {
color: transparent;
}
textarea:focus:-ms-input-placeholder {
color: transparent;
}
input::-webkit-input-placeholder {
color: #707070;
}
input:-moz-placeholder {
color: #707070;
}
input::-moz-placeholder {
color: #707070;
}
input:-ms-input-placeholder {
color: #707070;
}
textarea::-webkit-input-placeholder {
color: #707070;
}
textarea:-moz-placeholder {
color: #707070;
}
textarea::-moz-placeholder {
color: #707070;
}
textarea:-ms-input-placeholder {
color: #707070;
}
label {
display: block;
margin: 0;
}
/*---------------------------------------------*/
button {
outline: none !important;
border: none;
background: transparent;
}
button:hover {
cursor: pointer;
}
/*//////////////////////////////////////////////////////////////////
[ utility ]*/
/*//////////////////////////////////////////////////////////////////
[ Contact ]*/
.container-contact {
width: 100%;
min-height: 300px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 5px;
}
.wrap-contact {
width: 500px;
background: #fff;
border-radius: 2px;
padding: 30px 40px 40px 40px;
}
/*==================================================================
[ Form ]*/
.contact-form {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.contact-form-title {
width: 100%;
display: block;
font-family: Raleway-Black;
font-size: 30px;
color: #fdb834;
line-height: 1.2;
text-align: center;
padding-bottom: 45px;
}
/*------------------------------------------------------------------
[ Input ]*/
.wrap-input {
width: 100%;
position: relative;
border: 1px solid #707070;
border-radius: 2px;
margin-bottom: 34px;
}
.rs1.wrap-input {
width: calc((100% - 40px) / 2);
}
.label-input {
font-family: Raleway-SemiBold;
font-size: 13px;
color: #fdb834;
line-height: 1.5;
text-transform: uppercase;
width: 100%;
padding-bottom: 11px;
}
.input {
display: block;
width: 100%;
background: transparent;
font-family: Raleway-SemiBold;
font-size: 18px;
color: #333333;
line-height: 1.2;
padding: 0 25px;
}
input.input {
height: 35px;
}
textarea.input {
min-height: 150px;
padding-top: 19px;
padding-bottom: 15px;
}
/*---------------------------------------------*/
.focus-input {
position: absolute;
display: block;
width: calc(99% + 1px);
height: calc(98%);
top: -1px;
left: 0px;
pointer-events: none;
border: 2px solid;
border-color: #fdb834;
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
-webkit-transform: scaleX(1.1) scaleY(1.3);
-moz-transform: scaleX(1.1) scaleY(1.3);
-ms-transform: scaleX(1.1) scaleY(1.3);
-o-transform: scaleX(1.1) scaleY(1.3);
transform: scaleX(1.1) scaleY(1.3);
}
.input:focus+.focus-input {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
/*------------------------------------------------------------------
[ Button ]*/
.container-contact-form-btn {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: -4px;
}
.contact-form-btn {
font-family: Raleway-Bold;
font-size: 16px;
color: #fff;
line-height: 1.2;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
align-items: center;
padding: 0 20px;
min-width: 150px;
height: 55px;
border-radius: 27px;
background: #fdb834;
position: relative;
z-index: 1;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}
.contact-form-btn::before {
content: "";
display: block;
position: absolute;
z-index: -1;
border-radius: 27px;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #000;
opacity: 1;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}
.contact-form-btn:hover:before {
opacity: 0;
}
.cart__link,
.giftcard__link {
margin-right: 40px;
font-size: 1.8rem;
color: #707070;
}
.box3 {
height: 40px;
display: flex;
flex-direction: row;
margin-left: 2%;
}
.nav__bottom {
width: 55%;
justify-content: flex-start;
}
.help {
margin-left: 25px;
margin-right: 10px;
}
.favorite__link,
.help__link {
color: #707070;
}
.fa-user,
.fa-shopping-cart,
.fa-gift,
.fa-heart {
color: #fdb834;
}
.search {
width: 45%;
display: flex;
position: relative;
height: 40px;
justify-content: flex-end;
align-content: flex-end;
margin: 0 2% 0 0;
font-size: 1.8rem;
color: #707070;
}
.search-box {
background: #fff;
height: 10px;
padding: 5px;
border: 1px solid #707070;
border-radius: 2%;
box-shadow: 1px 1px rgb(112, 112, 112, 0.2);
margin-left: 10px;
}
.search-btn {
text-decoration: none;
color: #707070;
font-size: 2rem;
width: 20px;
height: 10px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
font-size: 1.4rem;
transition: 0.4s;
color: #707070;
width: 15rem;
}
::placeholder {
color: rgb(112, 112, 112, 0.7);
font-size: 1.4rem;
}
<header>
<div class="header__main">
<div class="logo__section">
<img src="https://kommunikasjon.ntb.no/data/images/00171/daaffdf6-fb0e-4e74-9b6b-7f973dbfa6a3.png/social" alt="logo" class="logo" />
</div>
<div class="nav__topRight">
<div class="flexbox1">
<div class="nav__top">
Contact us
<div class="contact_popup_page" id="contact_popup_page">
<div class="container-contact">
<div class="wrap-contact">
<form class="contact-form validate-form">
<button class="close" id="close">×</button>
<span class="contact-form-title"> Contact Us </span>
<label class="label-input" for="first-name">Your Name *</label
>
<div class="wrap-input rs1 validate-input">
<input
id="first-name"
class="input"
type="text"
name="first-name"
placeholder="First name"
/>
<span class="focus-input"></span>
</div>
<div class="wrap-input rs1 validate-input">
<input
class="input"
type="text"
name="last-name"
placeholder="Last name"
/>
<span class="focus-input"></span>
</div>
<label class="label-input" for="email"
>Email Address *</label
>
<div class="wrap-input validate-input">
<input
id="email"
class="input"
type="text"
name="email"
placeholder="Eg. example#email.com"
/>
<span class="focus-input"></span>
</div>
<label class="label-input" for="phone"
>Phone Number</label
>
<div class="wrap-input">
<input
id="phone"
class="input"
type="text"
name="phone"
placeholder="Eg. +47 000 00 000"
/>
<span class="focus-input"></span>
</div>
<label class="label-input" for="message">Message *</label>
<div class="wrap-input validate-input">
<textarea id="message" class="input" name="message" placeholder="Please give us the detail here...."></textarea>
<span class="focus-input"></span>
</div>
<div class="container-contact-form-btn" id="contact-submit">
<button class="contact-form-btn">
<span> Submit </span>
</button>
</div>
</form>
</div>
</div>
</div>
<div class="contact__info">
<p>
<i class="fas fa-phone-alt"></i> (+47) 000 00 000
</p>
<p class="opening__p">Mon-Fri (8-20) Sat (9-16)</p>
</div>
</div>
</div>
<div class="flexbox2">
<div class="nav__middle">
<div class="cart">
<a href="#" class="cart__link"><i class="fas fa-shopping-cart"></i>
Cart</a
>
</div>
<div class="giftcard">
<a href="#" class="giftcard__link"
><i class="fas fa-gift"></i>
Gift Card</a
>
</div>
<div class="signin">
<a href="#" class="singin__link"
><i class="fas fa-user"></i>
Sing In</a
>
</div>
</div>
</div>
</div>
</div>
<div class="box3">
<div class="nav__bottom">
<div class="navbar">
Men
</div>
<div class="navbar">
Women
</div>
<div class="navbar">
Junior
</div>
<div class="navbar">
Gears
</div>
<div class="navbar">
Explore
</div>
<div class="navbar">
About
</div>
</div>
<div class="search">
<div class="favorite">
<a href="#" class="favorite__link"><i class="fas fa-heart"></i>
Favorite</a
>
</div>
<div class="help">
<a href="#" class="help__link"
><i class="fas fa-info-circle"></i>
Help</a
>
</div>
<div class="search-box">
<form action="">
<input
class="search-txt"
type="text"
placeholder="Search....."
name="search"
/>
<a class="search-btn" href="#"><i class="fa fa-search"></i></a>
</form>
</div>
</div>
</div>
</header>

We Keep Coding

JavaScript is the programming language of the Web.

Javascript - Calendar Flip animation not working - javascript

Related

Navigation bar with drop-down menu is not sticky-ing

Why does the conditional rendering of icons fail in this Vue 3 application?

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

How to remove NodeList at once?

HTML/CSS Hamburger Menu - where to place the div for hamburger menu?

Categories

Resources