Problem with displaying number in inner text - javascript

newbie here...
I am working on some simple project where I am trying to simulate bank app.
Thing is that when I click on send money button, I want to take value from input value, and then subtract this value from my whole account balance.
Really simple, but after first transaction I get value which I want, but after second time I get innerText displaying "Nan" instead of some number value.
Here it is javascript file, if you can see from this why I get error.
Also here it is html and css if you don't understand what I am talking about.
////////////////// TOTAL MONEY FROM CARDS ///////////////////////
const totalMoney = document.querySelector(`.totalMoney`);
const allcards = document.querySelectorAll(`.cards`);
let totalMoneyAccount = 0;
allcards.forEach((kartica) => {
let novacNaKartici = kartica.querySelector(`.novacNaKartici`).innerText;
novacNaKartici = parseInt(novacNaKartici);
totalMoneyAccount += novacNaKartici;
totalMoney.innerText = ` ${replika2} $`;
});
//////////////////////////// TRANSFER MONEY TO SOMEONE /////////////////////////////
const reciver = document.querySelector(`input[name='recivier']`);
let amount = document.querySelector(`input[name='amount']`);
const sendMoneyBtn = document.querySelector(`.sendBtn`);
const transakcijeParent = document.querySelector(`.transakcije`);
sendMoneyBtn.addEventListener(`click`, () => {
amount = parseInt(amount.value);
totalMoneyAccount = totalMoneyAccount - amount;
updateProfile(totalMoneyAccount);
});
function updateProfile(totalMoneyAccount) {
totalMoney.innerHTML = totalMoneyAccount;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD#20..48,100..700,0..1,-50..200"
/>
<link rel="stylesheet" href="style.css" />
<title>Bank app</title>
</head>
<body>
<div class="container">
<div class="profile">
<div class="header">
<span class="material-symbols-outlined"> notifications </span>
<span class="material-symbols-outlined"> search </span>
</div>
<div class="person">
<img src="/img/cost1.jpg" alt="" />
<p>Random user</p>
<span class="totalMoney" style="font-size: 20px;"></span>
</div>
<div class="menu">
<div class="account flex">
<span class="material-symbols-outlined"> manage_accounts </span>
<p>Accounts</p>
</div>
<div class="transactions flex">
<span class="material-symbols-outlined"> receipt_long </span>
<p>Transactions</p>
</div>
<div class="bonus flex">
<span class="material-symbols-outlined"> star </span>
<p>Bonus</p>
</div>
<div class="invest flex">
<span class="material-symbols-outlined"> trending_up </span>
<p>Investments</p>
</div>
<div class="logOut flex">
<span class="material-symbols-outlined"> logout </span>
<p>Log Out</p>
</div>
</div>
</div>
<div class="main">
<div class="left">
<div class="naslov">
<p>Cards</p>
<span class="material-symbols-outlined">
add_circle
</span>
</div>
<div class="allCards">
<div class="cards changeJustify">
<div class="singleCard">
<img src="/img/visa.png" alt="" class="changeImg"/>
</div>
<div class="opis">
<p style="color: grey; font-size:20px">VISA</p>
<p style="color: black; font-size:16px" class="balance1 changeBalance">Balance:</p>
</div>
<div class="balance">
<span class="material-symbols-outlined changeSpan dots">
more_vert
</span>
<span style="font-size: 22px; color:grey(59, 59, 59);" class="novacNaKartici">2500$</span>
</div>
</div>
<div class="cards changeJustify">
<div class="singleCard ">
<img src="/img/american.jpg" alt="" class="changeImg"/>
</div>
<div class="opis ">
<p style="color: grey; font-size:20px">VISA</p>
<p style="color: grey; font-size:16px" class="balance1 changeBalance">Balance:</p>
</div>
<div class="balance ">
<span class="material-symbols-outlined changeSpan dots" >
more_vert
</span>
<span style="font-size: 22px; color:black;" class="novacNaKartici">3500$</span>
</div>
</div>
</div>
<p style="font-size: 30px;
color: grey;
font-weight: bold;">Transactions</p>
<div class="transakcije">
</div>
</div>
</div>
<div class="right">
<p style="font-size: 30px;
color: grey;
font-weight: bold;">Transfer money</p>
<div class="transfer">
<label for="recivier">Transfer to</label>
<input type="text" placeholder="antonio3101" name="recivier">
<label for="amount">Amount</label>
<input type="number" placeholder="$300..." name="amount">
<button class="sendBtn">Send</button>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
body {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
}
.container {
width: 100vw;
height: 100vh;
display: flex;
background-color: #f1f2f6;
}
.profile {
height: 100vh;
width: 20%;
background-color: #1d1c57;
display: flex;
flex-direction: column;
color: white;
}
.profile .header {
display: flex;
padding: 30px;
align-items: center;
justify-content: space-between;
color: #7979a6;
}
.profile .header span {
font-size: 26px;
}
.profile .header span:hover {
color: white;
}
.profile .person {
margin-top: 40px;
display: flex;
flex-direction: column;
align-items: center;
}
.profile .person img {
width: 150px;
height: 150px;
border-radius: 50%;
}
.profile .person p {
font-size: 26px;
color: #c6c5d8;
}
.profile .menu {
margin-top: 100px;
padding: 20px;
background-color: #262467;
border-radius: 30px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
height: 100%;
position: relative;
font-size: 22px;
color: #7c7eaa;
}
.profile .flex {
margin-left: 20px;
display: flex;
align-items: center;
gap: 20px;
}
.profile .flex:hover {
margin-left: 40px;
color: white;
transition: ease-in-out;
}
.logOut {
position: absolute;
bottom: 50px;
}
/*-------------------------- KARTICE ----------------------------------------- */
.main .naslov {
color: grey;
font-size: 30px;
font-weight: bold;
}
.naslov {
display: flex;
align-items: center;
justify-content: space-between;
}
.naslov span {
font-size: 32px;
}
.naslov span:hover {
color: black;
}
.main .left {
display: flex;
flex-direction: column;
margin-left: 30px;
}
.main .left .cards {
background-color: #ffffff;
padding: 20px;
display: flex;
padding: 20px;
border-radius: 20px;
}
.cards {
margin-top: 10px;
}
.cards .singleCard {
display: flex;
width: 100%;
}
.allCards {
display: flex;
flex-direction: column;
}
.cards .singleCard img {
width: 250px;
padding-right: 10px;
}
.cards .opis p {
margin: 0;
padding: 0;
margin-left: 10px;
}
.cards .opis {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.cards .balance {
margin-left: 30px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
/*------------------------------- CHANGE CARD -------------------------------- */
.changeImg {
height: 50px;
object-fit: cover;
}
.changeSpan {
display: none;
}
.changeJustify {
display: flex;
align-items: center;
}
.changeBalance {
display: none;
}
/*-------------------------- TRANSAKCIJE ----------------------------------------- */
.transakcije {
background-color: white;
display: flex;
flex-direction: column;
padding: 10px;
}
.single-transaction {
display: flex;
margin-left: 10px;
justify-content: space-between;
align-items: center;
padding: 10px;
border-bottom: 1px solid grey;
}
.single-transaction img {
height: 60px;
width: 60px;
border-radius: 50%;
object-fit: cover;
}
.single-transaction .destination {
font-size: 16px;
color: rgb(73, 73, 73);
font-weight: bold;
}
.single-transaction .amount {
color: rgb(30, 149, 30);
font-weight: bold;
font-size: 16px;
}
.single-transaction:last-child {
border-bottom: 0;
}
/*-------------------------- RIGHT SECTIONS ----------------------------------------- */
/*-------------------------- TRANSFER MONEY ----------------------------------------- */
.right {
display: flex;
flex-direction: column;
margin-left: 100px;
}
.right .transfer {
background-color: #1d1c57;
padding: 50px 20px;
border-radius: 10px;
margin-left: 10px;
margin-right: 20px;
}
.right .transfer input {
height: 30px;
font: 24px;
margin-left: 10px;
}
.right .transfer label {
margin-left: 20px;
color: white;
}
.right .transfer button {
padding: 10px 15px;
color: black;
background-color: white;
border-radius: 5px;
border: 0;
margin-left: 20px;
margin-right: 20px;
}

You are overwriting your amount variable (which points to an input element) with the value inputted into said input.
Hence, after the first click you no longer have a reference to the input element: your code tries to read the value property of the integer amount of the last transaction. This results in the following evaluation: parseInt(amount.value) -> parseInt(undefined) -> NaN.
Change this code:
sendMoneyBtn.addEventListener(`click`, () => {
amount = parseInt(amount.value);
totalMoneyAccount = totalMoneyAccount - amount;
updateProfile(totalMoneyAccount);
});
to something like this:
sendMoneyBtn.addEventListener(`click`, () => {
const amountValue = parseInt(amount.value);
totalMoneyAccount = totalMoneyAccount - amountValue;
updateProfile(totalMoneyAccount);
});
Credit to #JohnnyMopp for noticing it first.

Related

Navigation menu sidebar not closing with click on document

I made the header menu of my website become a sidebar with the screen width. Everything was working fine, the menu could be toggled by clicking the icon. But then i noticed the majority of websites had this property that the menu would close if the user clicks anywhere in the screen. I tryed everything i could but everythime i add the event listener to the code (to remove the class that makes the menu visible), the onclick event that adds the class stops working.
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>Portfolio.</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;700&display=swap" rel="stylesheet">
<link rel="apple-touch-icon" sizes="180x180" href="Favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="Favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="Favicon/favicon-16x16.png">
<link rel="shortcut icon" href="Favicon/favicon.ico" type="image/x-icon" />
<link rel="manifest" href="Favicon/site.webmanifest">
<link rel="stylesheet" href="https://unpkg.com/boxicons#latest/css/boxicons.min.css">
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<!-- Header -->
<header id="header">
<div id="container">
<nav id="nav-bar">
Portfolio.
<ul id="nav-menu">
<div id="nav"><li><a id="link" href="#about-me">Sobre mim</a></li></div>
<div id="nav"><li><a id="link" href="#experience">Experiência</a></li></div>
<div id="nav"><li><a id="link" href="#projects">Projetos</a></li></div>
<div id="nav"><li><a id="link" href="#habilities">Competências</a></li></div>
<div id="nav"><button id="resume-btn">Currículo</button></li></div>
</ul>
<div class="menu-icon">
<h3 onclick="handleMenuToggle()">&#9776</h3>
</div>
</nav>
</div>
</header>
<!-- Sections -->
<main>
<section id="hero"> <!-- Main section -->
<div id="hero-txt">
<h2>
Seja bem vindo, eu sou
</h2>
<h1>
Yan Calvo
</h1>
<p>
Estudante de Ciência da computação e desenvolvedor web
</p>
<div class="social">
<i class='bx bxl-linkedin' ></i>
<i class='bx bxl-github' ></i>
</div>
</div>
</section>
<section id="about-me"> <!-- About section -->
<div id="txt-container" class="container reveal fade-left">
<h2>Sobre mim</h2>
<p>
Sou estudante de Ciência da computação, também
focado em aprender tecnologias de forma
independente. No momento me encontro dedicado a
aprimorar as minhas habilidades através da
experiência profissional e contato com outros
profissionais dedicados.<br><br>
O que mais me entusiasma em trabalhar com programação é poder projetar e criar coisas que tenham propósito e resolvam problemas reais.
Apoiar-se na pesquisa e percepção do cliente, encontrar as formas certas e dinâmicas de resolver determinados problemas, aprender com o processo e, em seguida, iterar e melhora-lo é a chave para um ótimo design.
</p>
</div>
<div class="container reveal fade-left">
<h4 id="quote">
“<br>
Knowledge has to be improved, challenged, and increased constantly, or it vanishes.<br>
”
</h4>
<h5>― Peter Drucker</h5>
</div>
</section>
<section id="experience"> <!-- Experience section -->
<div id="txt-container" class="container reveal fade-right">
<h2>Onde trabalhei </h2>
<p>
Ainda em busca de oportunidades profissionais
</p>
</div>
</section>
<section id="projects"> <!-- Projects section -->
<div id="txt-container" class="container reveal fade-left">
<h2>Projetos</h2>
<p>Trabalhos pessoais</p>
</div>
<div id="portfolio-content" class="container reveal fade-left">
<div class="col">
<img src="Img/work3.jpg">
<div class="layer">
<h3>Web Design</h3>
<h5>Popup</h5>
</div>
</div>
<div class="col">
<img src="Img/work3.jpg">
<div class="layer">
<h3>Web Design</h3>
<h5>Popup</h5>
</div>
</div>
<div class="col">
<img src="Img/work3.jpg">
<div class="layer">
<h3>Web Design</h3>
<h5>Popup</h5>
</div>
</div>
<div class="col">
<img src="Img/work3.jpg">
<div class="layer">
<h3>Web Design</h3>
<h5>Popup</h5>
</div>
</div>
<div class="col">
<img src="Img/work3.jpg">
<div class="layer">
<h3>Web Design</h3>
<h5>Popup</h5>
</div>
</div>
<div class="col">
<img src="Img/work3.jpg">
<div class="layer">
<h3>Web Design</h3>
<h5>Popup</h5>
</div>
</div>
</div>
</section>
<section id="habilities"> <!-- Contact section -->
<div id="txt-container" class="container reveal fade-right">
<h2>Competências</h2>
<div id="habilities-container">
<div id="hability-icons-container"></div>
<img id="hability-icon" src="Img/icons8-javascript-144.png" alt="">
<img id="hability-icon" src="Img/icons8-html-5-144.png" alt="">
<img id="hability-icon" src="Img/icons8-css3-144.png" alt="">
<img id="hability-icon" src="Img/icons8-git-144.png" alt="">
<img id="hability-icon" src="Img/icons8-github-128.png" alt="">
<div id="habilities-description"></div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer id="footer">
<div id="footer-copyright">
<h6>Projetado por Yan Calvo</h6>
</div>
<div id="social">
<h6>Email para contato: yancalvo#gmail.com</h6>
</div>
</footer>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 70px;
}
body {
position: relative;
background-color: #ece7e1;
}
html, body {
overflow-x: hidden;
}
/* Header */
header {
position: fixed;
top: 0;
width: 100%;
background-color: rgba(27,26,33,255);
z-index: 200;
}
#container {
width: 1800px;
margin: auto;
}
#nav-bar {
width: 95%;
margin: auto;
min-height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
}
#nav-brand {
color: white;
text-decoration: none;
font-size: 30px;
}
#nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
}
#nav {
margin: auto 30px;
}
.menu-icon {
display: none;
}
#link {
margin-right: 15px;
color: white;
text-decoration: none;
transition: color 0.15s;
}
#link:hover {
color: gray;
font-style: italic;
}
#resume-btn {
width: 100px;
font-weight: bold;
font-size: 15px;
color: rgba(27,26,33,255);
background-color: #ece7e1;
border-radius: 23.5px;
border-style: solid;
border-color: #ece7e1;
padding: 10px;
cursor: pointer;
transition: color 0.15s, border-color 0.15s, width 1.0s;
}
#resume-btn:hover {
width: 150px;
}
/* Sections */
main {
padding-top: 70px;
}
section {
padding: 0px 100px;
}
#hero {
position: relative;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
grid-gap: 4rem;
}
.social a {
color: white;
width: 35px;
height: 35px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(27,26,33,255);
font-size: 17px;
margin-right: 22px;
margin-bottom: 30px;
margin-top: 20px;
}
.social a:hover{
transform: scale(1.1);
transition: .5s;
}
#about-me {
background-color: #191919;
min-height: 500px;
padding-top: 40px;
margin-bottom: 100px;
display: grid;
grid-template-columns: repeat(2, 2fr);
grid-gap: 2rem;
white-space: normal;
}
#experience {
min-height: 300px;
padding-top: 40px;
margin-bottom: 100px;
display: flex;
justify-content: center;
text-align: center;
white-space: normal;
}
#projects {
background-color: #191919;
min-height: 800px;
padding-top: 40px;
margin-bottom: 100px;
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
grid-gap: 2rem;
}
#portfolio-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, auto));
grid-gap: 2rem;
align-items: center;
margin-top: 5rem;
text-align: center;
cursor: pointer;
}
.layer{
background: transparent;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 12px;
transition: all .40s;
}
.layer:hover{
background: linear-gradient(rgba(0,0,0,0.5) 0%, #191919);
}
.layer h3{
position: absolute;
width: 100%;
font-size: 25px;
font-weight: 500;
color: white;
bottom: 0;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: all .40s;
margin-bottom: 7px;
}
.layer:hover h3{
bottom: 52%;
opacity: 1;
}
.layer h5{
position: absolute;
width: 100%;
font-size:17px;
font-weight: 500;
color: white;
bottom: 0;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: all .40s;
}
.layer:hover h5{
bottom: 48%;
opacity: 1;
}
.col {
position: relative;
}
.col img {
max-width: 100%;
width: 550px;
height: auto;
object-fit: cover;
border-radius: 12px;
}
#habilities {
min-height: 500px;
width: 90%;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: center;
text-align: center;
}
li {
list-style: none;
}
h1 {
font-size: 90px;
color: rgba(27,26,33,255);
margin: 10px 0px 25px;
}
h2 {
font-size: 30px;
margin-bottom: 60px;
}
#about-me h2,
#projects h2
{
color: #ece7e1;
}
#experience h2,
#habilities h2 {
color: #191919;
}
#habilities-container {
display: flex;
flex-direction: column;
align-items: ;
}
#hability-icon {
width: 144px;
height: 144px;
transition: all 0.8s;
}
#hability-icon:hover {
height: 155px;
width: 155px;
}
h6 {
font-size: 20px;
color: white;
}
h4 {
font-size: 40px;
color: #ece7e1;
font-style: italic;
}
h5 {
color: rgba(27,26,33,255);
}
p {
color: gray;
text-align: justify;
}
#footer {
background-color: #191919;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 100px;
}
.reveal {
position: relative;
opacity: 0;
}
.reveal.active {
opacity: 1;
}
.active.fade-left {
animation: fade-left 0.5s ease-in;
}
.active.fade-right {
animation: fade-right 0.5s ease-in;
}
#keyframes fade-left {
0% {
transform: translateX(-100px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
#keyframes fade-right {
0% {
transform: translateX(100px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
#media(max-width:1800px) {
#container {
width: 100%;
}
}
#media only screen and (max-width: 1015px) {
#nav-menu {
position: fixed;
top: 70px;
right: -100%;
display: block;
background-color: rgba(27,26,33,255);
margin: 0;
height: 100%;
-webkit-box-shadow: 1px 6px 0px 6px rgba(0,0,0,0.13);
-moz-box-shadow: 1px 6px 0px 6px rgba(0,0,0,0.13);
box-shadow: 1px 6px 0px 6px rgba(0,0,0,0.13);
width: 250px;
transition: all 0.3s ease;
}
#nav-menu.show-nav {
right: 0;
}
#nav {
text-align: center;
margin: 20px auto;
}
.menu-icon {
color: white;
display: block;
margin: auto 0;
padding: 0 20px;
font-size: 30px;
cursor: pointer;
}
#brush-img {
display: none;
}
#about-me {
display: flex;
flex-direction: column;
}
}
Javascript:
//Toggle sidebar
const navContainer = document.getElementById('nav-menu')
function handleMenuToggle() {
navContainer.classList.add('show-nav')
}
document.onclick = function(e) {
if (e.target.id !== 'nav-menu' && e.target.id !== 'show-nav') {
navContainer.classList.remove('show-nav')
}
}
//Scroll animation
function reveal() {
var reveals = document.querySelectorAll(".reveal");
for (var i = 0; i < reveals.length; i++) {
var windowHeight = window.innerHeight;
var elementTop = reveals[i].getBoundingClientRect().top;
var elementVisible = 150;
if (elementTop < windowHeight - elementVisible) {
reveals[i].classList.add("active");
} else {
reveals[i].classList.remove("active");
}
}
}
window.addEventListener("scroll", reveal);
I just cannot make it work, i'm probably missing something or making some ugly mistakes in the structure of the code.
By taking a look at : this question you could try to do it this way : create a navbar sublcass called like :
navbar.open , and assign it these css properties :
/* If you use an id use #id_name or .classname if you use a class
*/
#id_of_navbar.open {
right: 0;
}
/* OR
.classname.open {
right: 0;
}
*/
And then add to your javascript :
var yournavbar = document.getElementById("id_of_navbar")
//Close menu when document is clicked anywhere
document.onclick = function () {
yournavbar.classList.remove("open");
};
And if you want your navbar to close if you click a part of it, just add this function :
//stop propagation on the side nav element
yournavbar.onclick = function(e) {
e.stopPropagation()
}
I tried that solution and it worked for me so I really hope it helps! Let me know if you are still trying to make it work without success despite this solution.

How to make content editable?

I have a todo list and I want to have editable task so I gave contenteditable = "true" attribute to p tag which contains the task content but when I left click on it, it does not work but when I right click it works! I gave this attribute to heading and it works just fine but its not working on tasks( p tag).
so my question is how can I make tasks editable when I click on them?(not by right click I want left click)
here is my code, please first make a task buy clicking on + button
const taskInput = $(".main__input");
const taskRow = $(".task-row");
const task = $("li");
let id = 0;
// adding task
const addTask = function() {
const markup = `
<li data-id=${id}>
<div class="main">
<div class="task__checkbox">
<input type="checkbox" class="checkbox">
</div>
<p class="task" contenteditable="true">${taskInput.val()}</p>
</div>
<div class="btn-task btn-delete icon" data-id=${id}>
<i class="fa-sharp fa-solid fa-trash"></i>
</div>
</li>
`;
taskRow.append(markup);
id++;
taskInput.val("");
};
$(".btn-plus").on("click", function() {
if (taskInput.val() !== "") addTask();
});
// remove element first solution
taskRow.on("click", ".btn-delete", function(e) {
$(this).parent().remove();
});
taskRow.on("change", ".task__checkbox", function() {
$(this).siblings(".task").toggleClass("checked");
});
$(window).on("keypress", function(e) {
if (e.which === 13 && taskInput.val() !== "") addTask();
});
taskRow.sortable();
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
list-style: none;
}
html {
font-size: 62.5%;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.todo {
width: 40rem;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 0 10px rgb(122, 122, 122);
}
h1 {
background-color: rgb(46, 89, 89);
font-size: 3rem;
font-weight: bold;
color: #fff;
padding: 2rem 1rem;
text-align: center;
}
.row {
display: flex;
}
.main__input {
padding: 1.4rem;
border: none;
/* border-bottom: 1px solid rgb(116, 116, 116);
border-left: 1px solid rgb(116, 116, 116); */
width: 100%;
}
.main__input:focus {
outline: none;
}
.icon {
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(37, 115, 115);
color: #fff;
width: 20%;
font-size: 2rem;
transition: all 0.3s;
}
.icon:hover {
cursor: pointer;
background-color: rgb(52, 81, 81);
}
.icon:active {
background-color: rgb(37, 115, 115);
}
.task-row {
display: flex;
}
.task-block {
width: 80%;
display: flex;
}
.task__checkbox {
width: 10%;
}
.main {
display: flex;
width: 80%;
}
.task__checkbox {
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(37, 115, 115);
padding: 1rem;
}
.checkbox {
width: 1.8rem;
height: 1.8rem;
}
.task {
font-size: 1.8rem;
font-weight: bold;
padding: 1.4rem 1rem;
border: 0.01px solid #999;
width: 100%;
}
.task-row {
flex-direction: column;
}
li {
width: 100%;
display: flex;
}
.checked {
text-decoration: line-through;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
<div class="todo">
<h1 class="heading" contenteditable="true">To-do list</h1>
<div class="todo-body">
<div class="row add-block">
<div class="main">
<input type="text" class="main__input" placeholder="A task you want to compelete">
</div>
<div class="btn-plus icon">
<i class="fa-solid fa-plus"></i>
</div>
</div>
<ul class="row task-row"></ul>
</div>
</div>
As #cbroe and I have mentioned in the comments, the behavior is caused by jQuery UI Sortable Plugin.
The fix is fairly easy, we'll simply use the cancel option of the sortable method to prevent sorting if you start on elements matching the selector. Source: Sortable Widget - jQuery UI
We will pass the p[conteneditable] selector (or any other selector you see fit) to prevent dragging from the p tag that contains the todo text.
Here's a live demo:
const taskInput = $(".main__input");
const taskRow = $(".task-row");
const task = $("li");
let id = 0;
// adding task
const addTask = function() {
const markup = `
<li data-id=${id}>
<div class="main">
<div class="task__checkbox">
<input type="checkbox" class="checkbox">
</div>
<p class="task" contenteditable="true">${taskInput.val()}</p>
</div>
<div class="btn-task btn-delete icon" data-id=${id}>
<i class="fa-sharp fa-solid fa-trash"></i>
</div>
</li>
`;
taskRow.append(markup);
id++;
taskInput.val("");
};
$(".btn-plus").on("click", function() {
if (taskInput.val() !== "") addTask();
});
// remove element first solution
taskRow.on("click", ".btn-delete", function(e) {
$(this).parent().remove();
});
taskRow.on("change", ".task__checkbox", function() {
$(this).siblings(".task").toggleClass("checked");
});
$(window).on("keypress", function(e) {
if (e.which === 13 && taskInput.val() !== "") addTask();
});
/** drag & drop is disabled on p tags having content attribute set. You still able to move the item around by dragging from elsewhere (from the delete button for example) */
taskRow.sortable({
cancel: 'p[contenteditable=true]'
});
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
list-style: none;
}
html {
font-size: 62.5%;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.todo {
width: 40rem;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 0 10px rgb(122, 122, 122);
}
h1 {
background-color: rgb(46, 89, 89);
font-size: 3rem;
font-weight: bold;
color: #fff;
padding: 2rem 1rem;
text-align: center;
}
.row {
display: flex;
}
.main__input {
padding: 1.4rem;
border: none;
/* border-bottom: 1px solid rgb(116, 116, 116);
border-left: 1px solid rgb(116, 116, 116); */
width: 100%;
}
.main__input:focus {
outline: none;
}
.icon {
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(37, 115, 115);
color: #fff;
width: 20%;
font-size: 2rem;
transition: all 0.3s;
}
.icon:hover {
cursor: pointer;
background-color: rgb(52, 81, 81);
}
.icon:active {
background-color: rgb(37, 115, 115);
}
.task-row {
display: flex;
}
.task-block {
width: 80%;
display: flex;
}
.task__checkbox {
width: 10%;
}
.main {
display: flex;
width: 80%;
}
.task__checkbox {
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(37, 115, 115);
padding: 1rem;
}
.checkbox {
width: 1.8rem;
height: 1.8rem;
}
.task {
font-size: 1.8rem;
font-weight: bold;
padding: 1.4rem 1rem;
border: 0.01px solid #999;
width: 100%;
}
.task-row {
flex-direction: column;
}
li {
width: 100%;
display: flex;
}
.checked {
text-decoration: line-through;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
<div class="todo">
<h1 class="heading" contenteditable="true">To-do list</h1>
<div class="todo-body">
<div class="row add-block">
<div class="main">
<input type="text" class="main__input" placeholder="A task you want to compelete">
</div>
<div class="btn-plus icon">
<i class="fa-solid fa-plus"></i>
</div>
</div>
<ul class="row task-row"></ul>
</div>
</div>
I also recommend looking at portlets as they provide a better way (in my opinion) to introduce drag & drop into your elements.

The client.Height function in conjunction with the forEach method JS

I have an accordion list and my task was to implement a smooth tabs open/close function for dynamic content without a set height.
The forEach method works perfectly.
The smooth open/close function (setHeight in JS snippet)also works fine, but only for the first tab.
In other tabs this function does not work and the opening does not happen as we would like it to.
I've already racked my brains.
How can I combine the forEach method and the "setHeight" function so that nothing breaks?
const accItems = document.querySelectorAll('.accordion__item');
accItems.forEach((item) => {
const icon = item.querySelector('.accordion__icon');
const content = item.querySelector('.accordion__content');
item.addEventListener('click', () => {
if (item.classList.contains('open')) {
item.classList.remove('open');
icon.classList.remove('open');
content.classList.remove('open');
} else {
const accOpen = document.querySelectorAll('.open');
accOpen.forEach((open) => {
open.classList.remove('open');
});
item.classList.add('open');
icon.classList.add('open');
content.classList.add('open');
}
if (content.clientHeight) {
content.style.height = 0;
} else {
let accText = item.querySelector('.acc-text');
content.style.height = accText.clientHeight + "px";
}
});
});
body {
margin: 0;
padding: 0;
box-sizing: border-box;
color: #1f1f1f;
background: #f2f2f2; }
html {
font-size: 62.5%; }
h5 {
margin: 0; }
p {
margin: 0; }
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: auto;
max-width: 140rem; }
.section-accordion {
display: flex;
align-items: center;
max-width: 134rem;
margin: auto; }
.accordion-image {
width: 630px;
height: 450px;
background: url("https://eternel.maitreart.com/wp-content/uploads/2021/07/creat-home-1.jpg");
background-repeat: no-repeat;
background-size: cover; }
.accordion {
width: 63rem;
height: auto;
margin-left: 8rem; }
.accordion__item {
border-top: 1px solid #a8a6a4;
overflow: hidden;
transition: height .5s;
padding-bottom: 1rem; }
.accordion__item:last-child {
border-bottom: 1px solid #a8a6a4; }
.accordion__item--header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem 1rem 1rem 1rem;
cursor: pointer; }
.accordion__item.open {
width: 100%; }
.accordion__title {
font-family: 'Lora';
font-size: 2.4rem;
line-height: 1.2;
font-weight: 400;
text-transform: uppercase; }
.accordion__icon {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 2rem;
height: 2rem;
transition: transform .5s ease; }
.accordion__icon span:first-child {
transform: rotate(90deg) translateX(1px);
width: 1.4rem;
height: .1rem;
background: currentColor; }
.accordion__icon span {
display: block;
width: 1.4rem;
height: .1rem;
background: currentColor;
cursor: pointer; }
.accordion__icon.open {
transform: rotate(45deg); }
.accordion__content {
font-family: 'Roboto', sans-serif;
font-size: 1.6rem;
line-height: 1.62;
font-weight: 400;
padding: 0 1rem 0 1rem;
height: 0;
transition: height .5s;
overflow: hidden; }
.accordion__content.open {
margin-bottom: 1.2rem;
height: 100%; }
<div class="container">
<section class="section-accordion">
<div class="accordion-image"></div>
<div class="accordion">
<div class="accordion__item open">
<div class="accordion__item--header">
<h5 class="accordion__title">Visual direction</h5>
<div class="accordion__icon open">
<span></span>
<span></span>
</div>
</div>
<div class="accordion__content open">
<p class="acc-text">Carried nothing on am warrant towards. Polite in of in oh needed itself silent course.
Assistance travelling so especially do prosperous appearance mr no celebrated.
Wanted easily in my called formed suffer. Songs hoped sense.
</p>
</div>
</div>
<div class="accordion__item">
<div class="accordion__item--header">
<h5 class="accordion__title">Event production</h5>
<div class="accordion__icon">
<span class="accordion__icon--first"></span>
<span class="accordion__icon--second"></span>
</div>
</div>
<div class="accordion__content">
<p class="acc-text">Carried nothing on am warrant towards. Polite in of in oh needed itself silent course.
Assistance travelling so especially do prosperous appearance mr no celebrated.
Wanted easily in my called formed suffer. Songs hoped sense.
</p>
</div>
</div>
<div class="accordion__item">
<div class="accordion__item--header">
<h5 class="accordion__title">Brand creation</h5>
<div class="accordion__icon">
<span class="accordion__icon--first"></span>
<span class="accordion__icon--second"></span>
</div>
</div>
<div class="accordion__content">
<p class="acc-text">Carried nothing on am warrant towards. Polite in of in oh needed itself silent course.
Assistance travelling so especially do prosperous appearance mr no celebrated.
Wanted easily in my called formed suffer. Songs hoped sense.
</p>
</div>
</div>
<div class="accordion__item">
<div class="accordion__item--header">
<h5 class="accordion__title">Design concept</h5>
<div class="accordion__icon">
<span class="accordion__icon--first"></span>
<span class="accordion__icon--second"></span>
</div>
</div>
<div class="accordion__content">
<p class="acc-text">Carried nothing on am warrant towards. Polite in of in oh needed itself silent course.
Assistance travelling so especially do prosperous appearance mr no celebrated.
Wanted easily in my called formed suffer. Songs hoped sense.
</p>
</div>
</div>
</div>
</div>
It does not seem that you need setHeight which is the one that messes the display
Here is a delegated version
const accordionItems = document.querySelectorAll(".accordion__item");
document.querySelector('.accordion').addEventListener('click', (e) => {
const item = e.target.closest(".accordion__item");
if (!item) return
accordionItems.forEach(acItem => {
if (acItem !== item) {
acItem.classList.remove('open');
acItem.querySelector('.accordion__icon').classList.remove('open');
acItem.querySelector('.accordion__content').classList.remove('open');
}
});
const icon = item.querySelector('.accordion__icon');
const content = item.querySelector('.accordion__content');
item.classList.toggle("open")
const isOpen = item.classList.contains("open");
icon.classList.toggle("open", isOpen);
content.classList.toggle('open', isOpen);
});
body {
margin: 0;
padding: 0;
box-sizing: border-box;
color: #1f1f1f;
background: #f2f2f2;
}
html {
font-size: 62.5%;
}
h5 {
margin: 0;
}
p {
margin: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: auto;
max-width: 140rem;
}
.section-accordion {
display: flex;
align-items: center;
max-width: 134rem;
margin: auto;
}
.accordion-image {
width: 630px;
height: 450px;
background: url("https://eternel.maitreart.com/wp-content/uploads/2021/07/creat-home-1.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.accordion {
width: 63rem;
height: auto;
margin-left: 8rem;
}
.accordion__item {
border-top: 1px solid #a8a6a4;
overflow: hidden;
transition: height .5s;
padding-bottom: 1rem;
}
.accordion__item:last-child {
border-bottom: 1px solid #a8a6a4;
}
.accordion__item--header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem 1rem 1rem 1rem;
cursor: pointer;
}
.accordion__item.open {
width: 100%;
}
.accordion__title {
font-family: 'Lora';
font-size: 2.4rem;
line-height: 1.2;
font-weight: 400;
text-transform: uppercase;
}
.accordion__icon {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 2rem;
height: 2rem;
transition: transform .5s ease;
}
.accordion__icon span:first-child {
transform: rotate(90deg) translateX(1px);
width: 1.4rem;
height: .1rem;
background: currentColor;
}
.accordion__icon span {
display: block;
width: 1.4rem;
height: .1rem;
background: currentColor;
cursor: pointer;
}
.accordion__icon.open {
transform: rotate(45deg);
}
.accordion__content {
font-family: 'Roboto', sans-serif;
font-size: 1.6rem;
line-height: 1.62;
font-weight: 400;
padding: 0 1rem 0 1rem;
height: 0;
transition: height .5s;
overflow: hidden;
}
.accordion__content.open {
margin-bottom: 1.2rem;
height: 100%;
}
<div class="container">
<section class="section-accordion">
<div class="accordion-image"></div>
<div class="accordion">
<div class="accordion__item open">
<div class="accordion__item--header">
<h5 class="accordion__title">Visual direction</h5>
<div class="accordion__icon open">
<span></span>
<span></span>
</div>
</div>
<div class="accordion__content open" id="content__wrapper">
<p class="acc-text">Carried nothing on am warrant towards. Polite in of in oh needed itself silent course. Assistance travelling so especially do prosperous appearance mr no celebrated. Wanted easily in my called formed suffer. Songs hoped sense.
</p>
</div>
</div>
<div class="accordion__item">
<div class="accordion__item--header">
<h5 class="accordion__title">Event production</h5>
<div class="accordion__icon">
<span class="accordion__icon--first"></span>
<span class="accordion__icon--second"></span>
</div>
</div>
<div class="accordion__content" id="content__wrapper">
<p class="acc-text">Carried nothing on am warrant towards. Polite in of in oh needed itself silent course. Assistance travelling so especially do prosperous appearance mr no celebrated. Wanted easily in my called formed suffer. Songs hoped sense.
</p>
</div>
</div>
<div class="accordion__item">
<div class="accordion__item--header">
<h5 class="accordion__title">Brand creation</h5>
<div class="accordion__icon">
<span class="accordion__icon--first"></span>
<span class="accordion__icon--second"></span>
</div>
</div>
<div class="accordion__content" id="content__wrapper">
<p class="acc-text">Carried nothing on am warrant towards. Polite in of in oh needed itself silent course. Assistance travelling so especially do prosperous appearance mr no celebrated. Wanted easily in my called formed suffer. Songs hoped sense.
</p>
</div>
</div>
<div class="accordion__item">
<div class="accordion__item--header">
<h5 class="accordion__title">Design concept</h5>
<div class="accordion__icon">
<span class="accordion__icon--first"></span>
<span class="accordion__icon--second"></span>
</div>
</div>
<div class="accordion__content" id="content__wrapper">
<p class="acc-text">Carried nothing on am warrant towards. Polite in of in oh needed itself silent course. Assistance travelling so especially do prosperous appearance mr no celebrated. Wanted easily in my called formed suffer. Songs hoped sense.
</p>
</div>
</div>
</div>
</div>
</section>
</div>
cleaned up js to make it more readable:
const accItems = document.querySelectorAll('.accordion__item');
function handleItemClick(e, i) {
if (e) e.preventDefault();
const actives = document.getElementsByClassName("open");
while (actives.length)
actives[0].classList.remove('open');
accItems[i].classList.add("open");
}
accItems.forEach((item, i) =>
item.addEventListener("click", (e) => handleItemClick(e, i))
);
Handling height with just css:
I made icon and content children of .open
.accordion {
width: 63rem;
height: auto;
margin-left: 8rem; }
.accordion__item {
border-top: 1px solid #a8a6a4;
overflow: hidden;
transition: height .5s;
padding-bottom: 1rem; }
.accordion__item:last-child {
border-bottom: 1px solid #a8a6a4; }
.accordion__item--header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem 1rem 1rem 1rem;
cursor: pointer; }
.open .accordion__item {
width: 100%; }
.accordion__title {
font-family: 'Lora';
font-size: 2.4rem;
line-height: 1.2;
font-weight: 400;
text-transform: uppercase; }
.accordion__icon {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 2rem;
height: 0;
transition: transform .5s ease; }
.accordion__icon span:first-child {
transform: rotate(90deg) translateX(1px);
width: 1.4rem;
height: .1rem;
background: currentColor; }
.accordion__icon span {
display: block;
width: 1.4rem;
height: .1rem;
background: currentColor;
cursor: pointer; }
open .accordion__icon {
transform: rotate(45deg);
height: 2rem; }
.accordion__content {
font-family: 'Roboto', sans-serif;
font-size: 1.6rem;
line-height: 1.62;
font-weight: 400;
padding: 0 1rem 0 1rem;
height: 0;
transition: height .5s;
overflow: hidden; }
.open .accordion__content {
margin-bottom: 1.2rem;
height: 100%; }

Not getting the shadow on the winner tab

I made a rock paper Scissors game in html css and js and the game is working fine but there is a slight problem i added a feature that whichever side wins either the computer or the user there should be a shadow behind the winner tab and that too is working but the problem is that it is totally random even when i put that in a condition of when to toggle and it gives the shadow to wrong tab and sometimes to both tabs here is the code:
HTML AND JS:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow&family=Barlow+Condensed&family=Barlow+Semi+Condensed&display=swap" rel="stylesheet">
<title>Rock Paper Scisccor</title>
</head>
<body>
<div class="scoreboard">
<div class="name">
<ul>
<li id="rock"><strong> ROCK </strong> </li>
<li id="Paper"><strong> PAPER </strong> </li>
<li id="Scissors"><strong> SCISSORS </strong> </li>
</ul>
</div>
<div class="score">
<div id="score_name"><strong>SCORE</strong></div>
<div id="score_value"><strong>0</strong></div>
</div>
</div>
<div class="main-game">
<div id="inside_main">
<div class="items" id="rock_1" onclick="rock_2()">
<button class="inside_color">
<img src="rock-paper-scissors-master\rock-paper-scissors-master\images\1.svg" alt="">
</button>
</div>
<div class="items" id="paper_1" onclick="paper_2()">
<button class="inside_color">
<img src="rock-paper-scissors-master\rock-paper-scissors-master\images\2.svg" alt="">
</button>
</div>
<div class="items" id="scissors_1" onclick="scissors_2()">
<button class="inside_color">
<img src="rock-paper-scissors-master\rock-paper-scissors-master\images\3.svg" alt="">
</button>
</div>
</div>
</div>
<div id="results">
<div class="content">
<div id="left_side">YOU PICKED</div>
<div id="left_content">
<div class="items_1" id="user" >
<div class="inside_color" >
<img id="user_img" src="rock-paper-scissors-master\rock-paper-scissors-master\images\3.svg" alt="">
</div>
</div>
</div>
</div>
<div class="play-again">
<div class="result" id="result_value"> YOU LOSE</div>
<button type="button" class="button-play" onclick="btn()">PLAY AGAIN</button>
</div>
<div class="content_1">
<div id="right_side">HOUSE PICKED</div>
<div id="right_content">
<div class="items_1" id="computer" >
<div class="inside_color">
<img id="computer_img" src="rock-paper-scissors-master\rock-paper-scissors-master\images\3.svg" alt="">
</div>
</div>
</div>
</div>
<div class="pics">
</div>
</div>
<script>
let score = 0
function condition(user_choice){
document.getElementById('inside_main').style.display='none'
document.getElementById('results').style.display='grid'
let res = 0
let computer_choice = Math.floor(Math.random() * 3) + 1;
if(user_choice==1 && computer_choice==3){
console.log('you win')
score = score+1
res = 1
}
else if(user_choice==2 && computer_choice==1){
console.log('you win')
score = score+1
res = 1
}
else if(user_choice==3 && computer_choice==2){
console.log('you win')
score = score+1
res = 1
}
else if(user_choice==computer_choice){
console.log('draw')
score = score
res = -1
}
else{
console.log('you lose')
score = score-1
res = 0
}
document.getElementById('user_img').src='rock-paper-scissors-master/rock-paper-scissors-master/images/'+user_choice+'.svg'
document.getElementById('computer_img').src='rock-paper-scissors-master/rock-paper-scissors-master/images/'+computer_choice+'.svg'
document.getElementById('score_value').innerHTML=score
if (res==0){
document.getElementById('result_value').innerHTML='YOU LOSE'
document.getElementById('computer').classList.toggle("big_hover")
console.log(res)
}
else if(res == -1){
document.getElementById('result_value').innerHTML='DRAW'
console.log(res)
}
else{
document.getElementById('result_value').innerHTML='YOU WON'
document.getElementById('user').classList.toggle("big_hover")
console.log(res)
}
// let res = 0
}
function rock_2(){
let user_choice = 1
condition(user_choice)
}
function paper_2(){
let user_choice = 2
condition(user_choice)
}
function scissors_2(){
let user_choice = 3
condition(user_choice)
}
function btn(){
document.getElementById('inside_main').style.display='flex'
document.getElementById('results').style.display='none'
// let res = 0
}
</script>
</body>
</html>
CSS:-
body{
margin: 2px 2px;
/* font-family: 'Barlow', sans-serif; */
/* font-family: 'Barlow Condensed', sans-serif; */
font-family: 'Barlow Semi Condensed', sans-serif;
background-image: radial-gradient( hsl(214, 47%, 23%) , hsl(237, 49%, 15%));
background-repeat: no-repeat;
overflow: hidden;
height: 100vh;
}
.scoreboard{
width: 40%;
height: 10rem;
display: flex;
gap: 30%;
border: 2px solid grey;
margin: auto;
border-radius: 10px;
border-width: 3px;
margin-top: 3%;
}
.name{
color: white;
font-size: 2.7rem;
/* border: 2px solid white; */
margin: 15px;
width: 50%;
line-height: 2.4rem;
align-self: center;
}
.name ul{
list-style-type: none;
padding: 0px 0px;
margin: 0px ;
/* border: 2px solid yellow; */
}
.score{
display: flex;
/* align-self: center; */
flex-direction: column;
border: 2px solid white;
background-color: white;
border-radius: 5px;
/* padding: 7%; */
width: 40%;
/* height: 40vh; */
margin: 3%;
}
#score_name{
display: flex;
align-self: center;
padding: 5px;
color: hsl(229, 64%, 46%);
letter-spacing: .2rem;
}
#score_value{
color: hsl(229, 25%, 31%);
font-size: 4rem;
display: flex;
align-self: center;
}
.main-game{
margin-top: 4%;
}
/* .inside_main ::after{
content: '';
background: url("rock-paper-scissors-master/rock-paper-scissors-master/images/bg-triangle.svg");
background-repeat: no-repeat;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
} */
#inside_main{
display: flex;
/* border: 2px solid whitesmoke; */
width: fit-content;
margin: auto;
height: 60vh;
}
.items{
height: 225px;
width: 225px;
border-radius: 50%;
display: grid;
/* background-color: white; */
}
.items:hover::before{
content: '';
display: flex;
position: absolute;
justify-self: center;
align-self: center;
height: 285px;
width: 285px;
opacity: 10%;
z-index: -1;
background-color: whitesmoke;
border-radius: 50%;
}
.inside_color img{
display: grid;
align-self: center;
justify-self: center;
}
.inside_color{
display: grid;
justify-self: center;
align-self: center;
height: 182px;
width: 182px;
background-color: whitesmoke;
border-radius: 50%;
}
#rock_1{
background: linear-gradient(to bottom, hsl(349, 71%, 52%) , hsl(349, 70%, 56%));
}
#paper_1{
background: linear-gradient(to bottom, hsl(230, 89%, 62%) , hsl(230, 89%, 65%));
position: relative;
top: 50%;
/* left: 25%; */
}
#scissors_1{
background: linear-gradient(to bottom, hsl(39, 89%, 49%) , hsl(40, 84%, 53%));
}
#results{
display: none;
/* border: 2px solid white; */
width: 50%;
grid-template-columns: 1fr 1fr 1fr;
justify-content: center;
margin: auto;
color: white;
font-size: 2rem;
}
.content{
display: grid;
grid-template-rows: repeat (2,auto );
row-gap: 20%;
justify-content: center;
/* padding: 40px; */
}
.content_1{
display: grid;
grid-template-rows: repeat (2,auto );
row-gap: 20%;
justify-content: center;
/* padding: 40px; */
}
.play-again{
display: grid;
grid-template-rows: 3fr 1fr;
row-gap: 10%;
justify-content: center;
}
#left_side{
display: flex;
justify-content: center;
}
#right_side{
display: flex;
justify-content: center;
}
#scissors_1{
border: 2px solid white;
}
.result{
/* border: 2px solid white; */
display: flex;
align-self: flex-end;
justify-content: center;
}
.button-play{
/* border: 2px solid white; */
border-radius: 6%;
width: 25vh;
height: 80%;
}
#user{
background: linear-gradient(to bottom, hsl(39, 89%, 49%) , hsl(40, 84%, 53%));
}
#computer{
background: linear-gradient(to bottom, hsl(349, 71%, 52%) , hsl(349, 70%, 56%));
}
.items_1{
height: 225px;
width: 225px;
border-radius: 50%;
display: grid;
/* background-color: white; */
}
.big_hover::before{
content: '';
display: flex;
position: absolute;
justify-self: center;
align-self: center;
height: 385px;
width: 385px;
opacity: 10%;
z-index: -1;
background-color: whitesmoke;
border-radius: 50%;
}
I think this is the change you need to have in your if-else structure:
if (res==0){
document.getElementById('result_value').innerHTML='YOU LOSE';
document.getElementById('user').classList.remove("big_hover")
document.getElementById('computer').classList.add("big_hover")
console.log(res)
}
else if(res == -1){
document.getElementById('result_value').innerHTML='DRAW'
document.getElementById('user').classList.remove("big_hover")
document.getElementById('computer').classList.remove("big_hover")
console.log(res)
}
else{
document.getElementById('result_value').innerHTML='YOU WON'
document.getElementById('user').classList.add("big_hover")
document.getElementById('computer').classList.remove("big_hover")
console.log(res)
}
With the above code you can insure that the winner side gets shadow and other side looses shadow and on draw both side loose shadow.
Donot use toggle , instead before result remove all shadow class from all tabs then add shadow class where win tab is.

How to use jquery or javaScript to select an item and click OK to put the item in the input box?

Hello everyone~ I am a beginner in programming, and I am completing a task today! But I have some difficulties~
I hope everyone can help me. My English is not very good, but I try to describe my problem completely!
Expected effect
Click the input box to pop up the window
Click the item, the selected item will have a yellow background, and then press confirm to put the selected item in the input input box, and then the pop-up window will disappear.
If you click cancel, the original options will be kept, and the pop-up window will disappear.
However, I just learned jquery recently. I don't know how to implement click confirm and put the item in the input, and how to click cancel to keep the original item and pop out of the window.
Hope you can get help here, thank you again for watching.
$(function(){
$('.input_box').on('click',function(){
$('.sport').css('display','block');
})
$('.sport').click(function(e){
if(e.target.classList.contains('sport')){
$(this).css('display','none');
}
})
$('.sport').click(function(e){
if(e.target.classList.contains('sport')){
$(this).css('display','none');
}
})
$('.item').on('click',function(){
$(this).toggleClass('active');
})
// How to rewrite this program
$('.confirm').on('click',function(e){
// only a little change here
const val = e.target.getAttribute("value");
$('.input_box').val(val);
$('.sport_content').trigger("click");
})
});
.input_box {
width: 500px;
height: 60px;
font-size: 30px;
}
.sport {
background-color: rgba(0, 0, 0, 0.3);
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
display: none;
}
.sport_content {
width: 500px;
padding: 20px;
margin: 0 auto;
background-color: red;
}
.sport_content .title {
text-align: center;
padding: 10px;
font-size: 30px;
font-weight: 800;
}
.sport_content .category {
display: flex;
}
.sport_content .category .item {
width: 100px;
border: 1px solid #fff;
text-align: center;
border-radius: 10px;
padding: 10px;
margin: 10px;
}
.sport_content .category .active {
background-color: yellow;
}
.sport_content .footer {
display: flex;
justify-content: space-between;
margin-top: 30px;
}
.sport_content .footer .cancel {
padding: 20px;
background-color: #fff;
}
.sport_content .footer .confirm {
padding: 20px;
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="">Choose your favorite sport</label><br>
<input type="text" placeholder="Put in your favorite sports" class="input_box">
<div class="sport">
<div class="sport_content">
<h2 class="title">Aerobic exercise</h2>
<ul class="category">
<li class="item" value="RUN">RUN</li>
<li class="item" value="SWIM">Swim</li>
<li class="item" value="bicycle">bicycle</li>
</ul>
<h2 class="title">Strength training</h2>
<ul class="category">
<li class="item" value="weightlifting">weightlifting</li>
<li class="item" value="Stand up">Stand up</li>
<li class="item" value="Barbell">Barbell</li>
</ul>
<div class="footer">
<button class="cancel">cancel</button>
<button class="confirm">confirm</button>
</div>
</div>
</div>
There is no big differents between one and multi.hope you can learn it by youself
$(function(){
$('.input_box').on('click',function(){
$('.sport').css('display','block');
})
$('.sport').click(function(e){
if(e.target.classList.contains('sport')){
$(this).css('display','none');
}
})
$('.sport').click(function(e){
if(e.target.classList.contains('sport')){
$(this).css('display','none');
}
})
$('.item').on('click',function(){
$(this).toggleClass('active');
})
// How to rewrite this program
$('.confirm').on('click',function(e){
// still only a little change here
$(".sport").trigger('click');
var texts = ""
$(".item.active").each(function(idx,item){
texts += $(item).attr("value")+" "
})
$(".input_box").val(texts)
})
});
.input_box {
width: 500px;
height: 60px;
font-size: 30px;
}
.sport {
background-color: rgba(0, 0, 0, 0.3);
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
display: none;
}
.sport_content {
width: 500px;
padding: 20px;
margin: 0 auto;
background-color: red;
}
.sport_content .title {
text-align: center;
padding: 10px;
font-size: 30px;
font-weight: 800;
}
.sport_content .category {
display: flex;
}
.sport_content .category .item {
width: 100px;
border: 1px solid #fff;
text-align: center;
border-radius: 10px;
padding: 10px;
margin: 10px;
}
.sport_content .category .active {
background-color: yellow;
}
.sport_content .footer {
display: flex;
justify-content: space-between;
margin-top: 30px;
}
.sport_content .footer .cancel {
padding: 20px;
background-color: #fff;
}
.sport_content .footer .confirm {
padding: 20px;
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="">Choose your favorite sport</label><br>
<input type="text" placeholder="Put in your favorite sports" class="input_box">
<div class="sport">
<div class="sport_content">
<h2 class="title">Aerobic exercise</h2>
<ul class="category">
<li class="item" value="RUN">RUN</li>
<li class="item" value="SWIM">Swim</li>
<li class="item" value="bicycle">bicycle</li>
</ul>
<h2 class="title">Strength training</h2>
<ul class="category">
<li class="item" value="weightlifting">weightlifting</li>
<li class="item" value="Stand up">Stand up</li>
<li class="item" value="Barbell">Barbell</li>
</ul>
<div class="footer">
<button class="cancel">cancel</button>
<button class="confirm">confirm</button>
</div>
</div>
</div>

Categories