Develop Reference

Issue with Javascript in Posting system

So, I have a posting system. When you type a post in the input field and click the submit button, the post displays with the help of PHP and AJAX.
Now on that post are stuff like a like button and comment button, and when you click the like button, it turns blue. Now, after making a post and the post displaying, clicking the like button will make it blue. However, let's say you make another post. For that post, everything works, except when you click the like button on the second or third post, it makes the like button on the first post only turn blue, similarly with the comment button. Also, the first post has a background color of silver (#C0C0C0), however any other post, like the second or third post, don't. They have no background color.
This stuff (turning blue on click) is accomplished using JavaScript. What I identified from this is that the JS isn't working for any other post besides the first post. To resolve this, I tried changing the position of the JS in the code because I thought it had something to do with the scope, but it didn't. Please help, with the JS and the background color issue.
PHP/HTML/CSS Code:
<style>
.textPost {
margin-top: 170px;
width: 650px;
height: 400px;
position: fixed;
background-color: #C0C0C0;
margin-left: 685px;
border-radius: 15px;
}
.textpostFormat {
margin-left: -640px;
position: fixed;
}
</style>
<div class="textPost">
<?php
$sql = "SELECT * FROM posts";
$result = mysqli_query($connection, $sql);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
?>
<div class="textpostFormat" id="textpostFormat">
<img src="img/pfp.png" alt="pfp" onclick="location.href='profile.php'" class="textpostPFP">
<b><div class="textinfo"><?php echo $firstname . " " . $lastname ?></div></b>
<img src="img/options.png" alt="textpostOptions" class="textpostOptions">
<hr style="margin-top: 85px; width: 600px; position: fixed; margin-left: 663px; border:1px solid black; border-radius: 10px">
<hr style="margin-top: 200px; width: 600px; position: fixed; margin-left: 663px; border:1px solid black; border-radius: 10px">
<div class="textfeedbackBar" style="position: fixed">
<hr style="margin-top: 250px; width: 600px; position: fixed; margin-left: 663px; border: 1px solid black; border-radius: 10px">
<div class="textratingBar">
<div style="float: left; margin: 10px; cursor: pointer">1</div>
<hr style="width: 0px; height: 43px; float: left; margin-top: -2px; border: 1px solid black">
<div style="float: left; margin: 10px; cursor: pointer">2</div>
<hr style="width: 0px; height: 43px; float: left; margin-top: -2px; border: 1px solid black">
<div style="float: left; margin: 10px; cursor: pointer">3</div>
<hr style="width: 0px; height: 43px; float: left; margin-top: -2px; border: 1px solid black">
<div style="float: left; margin: 10px; cursor: pointer">4</div>
<hr style="width: 0px; height: 43px; float: left; margin-top: -2px; border: 1px solid black">
<div style="float: left; margin: 10px; cursor: pointer">5</div>
<hr style="width: 0px; height: 43px; float: left; margin-top: -2px; border: 1px solid black">
<div style="float: left; margin: 10px; cursor: pointer">6</div>
<hr style="width: 0px; height: 43px; float: left; margin-top: -2px; border: 1px solid black">
<div style="float: left; margin: 10px; cursor: pointer">7</div>
<hr style="width: 0px; height: 43px; float: left; margin-top: -2px; border: 1px solid black">
<div style="float: left; margin: 10px; cursor: pointer">8</div>
<hr style="width: 0px; height: 43px; float: left; margin-top: -2px; border: 1px solid black">
<div style="float: left; margin: 10px; cursor: pointer">9</div>
<hr style="width: 0px; height: 43px; float: left; margin-top: -2px; border: 1px solid black">
<div style="float: left; margin-left: 275px; cursor: pointer; margin-top: 10px; position: fixed">10</div>
</div>
</div>
<hr style="margin-top: 320px; width: 600px; position: fixed; margin-left: 663px; border: 1px solid black; border-radius: 10px">
<img src="img/pfp.png" alt="commentpfp" onclick="location.href='profile.php'" class="textcommentPFP">
<input type="text" name="textComment" class="textComment" id="textComment" placeholder="Write a comment">
<p style="margin-left: 670px; margin-top: 95px; position: fixed; font-size: 45px; font-family: 'Rajdhani'"><?php echo $row["body"]; ?></p>
<div class="textPostData" style="position:fixed; font-family: 'Rajdhani'; margin-left: 820px; margin-top: 150px">
<h4 id="textDataLikes" style="cursor: pointer">0 Likes</h4>
<h4 id="textDataComments" style="margin-left: 102px; margin-top: -42px; cursor: pointer">0 Comments</h4>
<h4 id="textDataReactions" style="margin-left: 240px; margin-top: -42px; cursor: pointer">0 Reactions</h4>
</div>
<div style="margin-left: 715px; position: fixed; font-family: 'Rajdhani'">
<h2 style="margin-top: 206px; margin-left: -30px; cursor:pointer; padding: 5px; position: fixed" class="textLike" id="textLike" onclick="textLikeClick()"><i class="fa fa-thumbs-up"></i> Like</h2>
<h2 style="margin-left: 99px; margin-top: 206px; cursor:pointer; padding: 5px; position: fixed" class="makeComment" id="makeComment" onclick="textCommentClick()"><i class="fa fa-comment" style="margin-top: 2px;"></i> Comment</h2>
<h2 style="margin-left: 290px; margin-top: 206px; cursor:pointer; padding: 5px; position: fixed" class="textReact" id="textReact"><i class="fa fa-smile" style="margin-top: 2px;"></i> React</h2>
<h2 style="margin-left: 432px; margin-top: 206px; cursor:pointer; padding: 5px; position: fixed" class="textShare" id="textShare"><i class="fa fa-share" style="margin-top: 2px"></i> Share</h2>
</div>
</div>
<div style="margin-left: 398px; margin-top: 236px">
<img class="textupvote" id="textUpvoteImg" src="img/upvote.png" alt="upvote" onclick="changetextUpvote()" style="width: 100px; margin-bottom: 28px; cursor: pointer">
<img class="textdownvote" id="textDownvoteImg" src="img/downvote.png" alt="downvote" onclick="changetextDownvote()" style="width: 55px; margin-top: 32px; margin-left: 21px; position: fixed; cursor: pointer">
</div>
<?php
}
}
?>
</div>
<?php
}
}
?>
</div>
AJAX code (to display posts without page refresh):
function makePost() {
var postContent = $("#postContent").val();
if (postContent.length > 0) {
jQuery.ajax({
url:"yourposts.php",
data:{
postContent: postContent
},
type:"POST",
success:function(data){
if (data == "success") {
$("#textpostFormat").html(postContent);
}
}
});
}
}
Javascript code (for turning like button blue and stuff):
<script type="text/javascript">
function changetextUpvote() {
var textUpvoteImg = document.getElementById('textUpvoteImg');
if (textUpvoteImg.src.match("orangeupvote")) {
textUpvoteImg.src = "img/upvote.png";
} else {
textUpvoteImg.src = "img/orangeupvote.png";
textDownvoteImg.src = "img/downvote.png";
}
}
function changetextDownvote() {
var textDownvoteImg = document.getElementById('textDownvoteImg');
if (textDownvoteImg.src.match("orangedownvote")) {
textDownvoteImg.src = "img/downvote.png";
} else {
textDownvoteImg.src = "img/orangedownvote.png";
textUpvoteImg.src = "img/upvote.png";
}
}
function textLikeClick() {
document.getElementById('textLike').style.color = "blue";
}
function textCommentClick() {
document.getElementById('textComment').focus();
}
</script>

None of the elements here have an ID attribute. Identification of elements is done based upon inspecting the event.target and navigating around the DOM using querySelector, parentNode and perhaps other techniques such as nextElementSibling etc
The buttons all register a single eventlistener which forks logic based upon a data-set attibute.
document.querySelectorAll('[type="button"]').forEach(bttn=>bttn.addEventListener('click',function(e){
let img=this.parentNode.querySelector('img');
let text=this.parentNode.querySelector('textarea');
switch(this.dataset.action){
case 'upvote':
img.src='img/orangeupvote.png';
img.classList.toggle(this.dataset.action)
break;
case 'downvote':
img.src='img/orangedownvote.png';
img.classList.toggle(this.dataset.action)
break;
case 'comment':
text.focus();
let fd=new FormData();
fd.set('comment',text.value);
fetch('yourposts.php',{method:'post',body:fd})
.then(r=>r.text())
.then(text=>{alert(text)})
break;
case 'like':
this.classList.toggle('liked')
break;
}
}));
.liked{background:blue;color:white}
textarea:focus{background:pink}
.upvote{outline:2px solid green}
.downvote{outline:2px solid red}
<div class="textPost">
<!--
<?php
$sql = "SELECT * FROM posts";
$result = mysqli_query($connection, $sql);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
?>
-->
<h1>Example data</h1>
<div class="textpostFormat">
<p>Lorem ipsum dolor solit...etc #1</p>
<img />
<input type='button' class='usr-interaction' data-action='upvote' value='Upvote' />
<input type='button' class='usr-interaction' data-action='downvote' value='Downvote' />
<textarea cols=50 rows=5>This is simply a comment...</textarea>
<input type='button' class='usr-interaction' data-action='comment' value='Comment' />
<input type='button' class='usr-interaction' data-action='like' value='Like' />
</div>
<div class="textpostFormat">
<p>Lorem ipsum dolor solit...etc #2</p>
<img />
<input type='button' class='usr-interaction' data-action='upvote' value='Upvote' />
<input type='button' class='usr-interaction' data-action='downvote' value='Downvote' />
<textarea cols=50 rows=5>Also a simple comment...</textarea>
<input type='button' class='usr-interaction' data-action='comment' value='Comment' />
<input type='button' class='usr-interaction' data-action='like' value='Like' />
</div>
<div class="textpostFormat">
<p>Lorem ipsum dolor solit...etc #3</p>
<img />
<input type='button' class='usr-interaction' data-action='upvote' value='Upvote' />
<input type='button' class='usr-interaction' data-action='downvote' value='Downvote' />
<textarea cols=50 rows=5>Guess what this is...</textarea>
<input type='button' class='usr-interaction' data-action='comment' value='Comment' />
<input type='button' class='usr-interaction' data-action='like' value='Like' />
</div>
</div>

Stripping all the hideous inline styles and replacing ID attributes with, in this case, simply data-id attributes to yield some example rendered markup like this below. This is NOT intended to be a final solution for you - you need to understand how you fit your functions within this because quite frankly the code given is chaotic.
within the click handler function if you supply the event as an argument to the function you can access event.target within the function. That event.target points to the element that initiated the click. From that point you can use DOM navigation techniques to find other nodes of interest.
document.querySelectorAll('.textpostFormat *[data-id]').forEach(n=>n.addEventListener('click',function(e){
switch( this.dataset.id ){
case 'textUpvoteImg':
changetextUpvote(e);
break;
case 'textDownvoteImg':
changetextDownvote(e)
break;
case 'makeComment':
textCommentClick(e);
break;
case 'textLike':
textLikeClick(e);
break;
}
}));
function changetextUpvote(e) {
alert(e.target)
}
function changetextDownvote(e) {
alert(e.target)
}
function textLikeClick(e) {
alert(e.target)
}
function textCommentClick(e) {
alert(e.target)
}
<div class='textpostFormat'>
<a href='profile.php'><img src='img/pfp.png' alt='pfp' class='textpostPFP'></a>
<div class='textinfo'><b>FIRSTNAME LASTNAME #1</b></div>
<img src='img/options.png' class='textpostOptions' />
<div class='textfeedbackBar'>
<div class='textratingBar'>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
</div>
<a href='profile.php'><img src='img/pfp.png' alt='commentpfp' class='textcommentPFP' /></a>
<input type='text' name='textComment' class='textComment' data-id='textComment' placeholder='Write a comment' />
<p>PARAGRAPH - BODY CONTENT #1</p>
<div class='textPostData'>
<h4 data-id='textDataLikes'>0 Likes</h4>
<h4 data-id='textDataComments'>0 Comments</h4>
<h4 data-id='textDataReactions'>0 Reactions</h4>
</div>
<div>
<h2 class='textLike' data-id='textLike'><i class='fa fa-thumbs-up'></i> Like</h2>
<h2 class='makeComment' data-id='makeComment'><i class='fa fa-comment' style='margin-top: 2px;'></i> Comment</h2>
<h2 class='textReact' data-id='textReact'><i class='fa fa-smile' style='margin-top: 2px;'></i> React</h2>
<h2 class='textShare' data-id='textShare'><i class='fa fa-share' style='margin-top: 2px'></i> Share</h2>
</div>
<div>
<img class='textupvote' data-id='textUpvoteImg' src='img/upvote.png' alt='upvote' />
<img class='textdownvote' data-id='textDownvoteImg' src='img/downvote.png' alt='downvote' />
</div>
</div>
<div class='textpostFormat'>
<a href='profile.php'><img src='img/pfp.png' alt='pfp' class='textpostPFP'></a>
<div class='textinfo'><b>FIRSTNAME LASTNAME #2</b></div>
<img src='img/options.png' class='textpostOptions' />
<div class='textfeedbackBar'>
<div class='textratingBar'>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
</div>
<a href='profile.php'><img src='img/pfp.png' alt='commentpfp' class='textcommentPFP' /></a>
<input type='text' name='textComment' class='textComment' data-id='textComment' placeholder='Write a comment' />
<p>PARAGRAPH - BODY CONTENT #2</p>
<div class='textPostData'>
<h4 data-id='textDataLikes'>0 Likes</h4>
<h4 data-id='textDataComments'>0 Comments</h4>
<h4 data-id='textDataReactions'>0 Reactions</h4>
</div>
<div>
<h2 class='textLike' data-id='textLike'><i class='fa fa-thumbs-up'></i> Like</h2>
<h2 class='makeComment' data-id='makeComment'><i class='fa fa-comment' style='margin-top: 2px;'></i> Comment</h2>
<h2 class='textReact' data-id='textReact'><i class='fa fa-smile' style='margin-top: 2px;'></i> React</h2>
<h2 class='textShare' data-id='textShare'><i class='fa fa-share' style='margin-top: 2px'></i> Share</h2>
</div>
<div>
<img class='textupvote' data-id='textUpvoteImg' src='img/upvote.png' alt='upvote' />
<img class='textdownvote' data-id='textDownvoteImg' src='img/downvote.png' alt='downvote' />
</div>
</div>

Need to Select dropdown via selenium javascript

I have drop down code the following below.
<div class="w-1/2 px-8 pt-6">
<div class="Styled__FieldWrapper-sc-1fqfnqk-1 bQZNMa mb-6">
<label class="form-label" for="transfer.account">Transfer Account</label>
<div class=" css-2b097c-container">
<span aria-live="polite" aria-atomic="false" aria-relevant="additions text" class="css-7pg0cj-a11yText"></span>
<div class=" css-yk16xz-control">
<div class=" css-1hwfws3">
<div class=" css-1uccc91-singleValue"></div>
<div class="css-1g6gooi">
<div class="" style="display: inline-block;">
<input autocapitalize="none" autocomplete="off" autocorrect="off" id="react-select-2-input" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" value="" style="box-sizing: content-box; width: 2px; background: 0px center; border: 0px; font-size: inherit; opacity: 1; outline: 0px; padding: 0px; color: inherit;" class="">
<div style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: 15px; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-weight: 400; font-style: normal; letter-spacing: normal; text-transform: none;"></div>
</div>
</div>
</div>
<div class=" css-1wy0on6">
<div class=" css-tlfecz-indicatorContainer" aria-hidden="true">
<svg height="20" width="20" viewBox="0 0 20 20" aria-hidden="true" focusable="false" class="css-8mmkcg"><path d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"></path></svg>
</div>
<span class=" css-1okebmr-indicatorSeparator"></span>
<div class=" css-tlfecz-indicatorContainer" aria-hidden="true">
<svg height="20" width="20" viewBox="0 0 20 20" aria-hidden="true" focusable="false" class="css-8mmkcg">
<path d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"></path></svg>
</div>
</div>
</div>
<input name="transfer.account" type="hidden" value="">
</div>
</div>
I have used the following below:
By.xpath("//input[#id='react-select-15-input']")).click();
or
By.id( "react-select-15-input")).sendKeys("David Messi");
But no luck. I want to select drop down vai selenium, Any help?

I am not sure if you already have some some framework in place,
Cause this looks wrong :
By.path("//input[#id='react-select-15-input']")).click();
is should be xpath instead of path.
By.xpath("//input[#id='react-select-15-input']")).click();
or
You can try this in Javascript :
driver.click('drop down locator here').click('drop down value locator here')

Form Input previous values suggestions not shown correctly CSS HTML

The previous input suggestions element is getting affected by the CSS styles.
Somehow it is misbehaving when I get into responsive view in the inspect element window.
But when I resize the whole browser then it works fine -
Html for the input element-
<div
className='ModalWrapper Modal__Fullscreen '
showModal={showModal}
>
<CloseModalButton
className='CloseModalButton'
aria-label='Close modal'
onClick={() => setShowModal((prev) => !prev)}
/>
<div className='ModalSection1'>
<div className='modal__content1'>
<p className='modal__welcome'>Welcome Back</p>
<p className='modal__signin'>Sign in to continue.</p>
</div>
<div className='ModalBottomImg'>
<img className='big' src={bottomImg} />
<img
className='mobile'
src={topImg}
style={{ width: '100%' }}
/>
</div>
</div>
<div className='ModalSection2'>
<div className='modal__content2'>
<div className='google__login'>
<img
src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADcAAAA5CAMAAAClD0MEAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAGSUExURQAAAP+/AECA7zCfUN9AQN9AMPe/APe3CO+AIECH70CA7zCnUOdIMOdAOPq6BUCF9DWqUDWlVepFNepFMOpANfu7BPebEECD8zSnVDSnUOdENOtANPy+A0CE9fy8A0OD8jOmU+lDNulDMzapUzOpU+xDNulDNvq9A0KF8jKnUupCMjOqU+pDNfi7BUKE9DSoUjKmVDSpUutENOtCNvm7BEKD8zSnVOlENOlCNkKG9DSoUutENfq8Bfq8BEGD8zOmUzOmUehDNUKF9DOoU+pDNfq6BUGE8jOnU+lDNfu8BEKG8zeffzSpUzSnU+lDNkGF8/u8BUOE9EGF9DSoU+pDNepDNPu8BUGF9DSnUupENelCNfq9BUKF9ECK3UGF9DOoU+pDNelCNfu8BUKF9DSoUzOoU+tDNOpDNfu8Be66CeK5DvmtC9a4E8m3GPaWFKSzKPSHGpeyLPOAHYuxMfF4IHOuOu9pJlmrRE2qSUGpTkCK4EKF9D+M1kGH6j2StzmbjzuWozakZ+xSLzWmXTSoU+pDNcRMx+0AAABodFJOUwAQEBAQECAgICAgICAgMDAwMDAwMEBAQEBAQEBPT1BQUFBQX19fX2BgYGBvb3BwcHB/f3+AgICAgI+Pj5CQkJCQkJ+fn6CgoKCvr6+vr6+wv7+/v7+/z8/Pz8/f39/f39/f7+/v7+/vEvGb2gAAAi1JREFUeNrN1elf0zAYB/DHTVRkU1Fx3TxRJ6ICTgW85wTcxGu6TUUGHSoziveNUYGZ/N9+2tE2ydI07ccX/t416XdPzhXgP0jXicLdRpNS2pypFrK7NdHZKuXTmAyme0XUTjWrVLvkyi66UzFCqsqlLjlLzFB1GgnpzJo0KC8Od7Is1UjpX7H+aCzRjMSgIb5TG88kAWBj5lRNwc4IajLDdCZLfizBqycZoT9ZkzIocawgeWNcxvZ8Ztl57ds2hd5HYZsQQkstZ0X0L/cQsuBXmy0k9d1DZOej5Y5BqGHaeduiCyH+gw44Di21QpSDK8jLFr5r+6hfDgKUPVYWfvI49ss9d1msXNZ2dYCnnhsK45jp7dN2mHN9EV2oesz8BsK42SjriQFuRtm/On9eNui6+wADrnr5ZYR33SkuDzx3FWCzw15/JxXlSa57bhjchXm3TAgxFCzFjDMFAOfsMX4iVsy4v7vhsWfW8zaE0KtvpJ2LvqybKXfdbimjN8vEyYgPizGzw/vtpr4PhMkRuZtm2Px6W4V1JCerxjJ8Yb3V4ByZ6BFZeo7b9a1Oe56Hz3OcTBfJ2k+Gjbo9cZMIuX10R7snnWvPYrVjdlZ6iSSmaS56Tyu/mD13c5oEZu2HMEo7Y8Hwz2+M8bS4ZhqQrOJHsY490hgquRWTbG6vGcTy8rPUU1SqxUO+h35QUTIfV11qPzlhBH3YjGIHrYzFtb6Jxsk7j51DU7k2KEN/AZeF7avEtSekAAAAAElFTkSuQmCC'
alt='gl'
></img>
<p>Continue with Google</p>
</div>
<div className='modal__seperator'>
<hr></hr>
<p>or</p>
<hr></hr>
</div>
<div className='home_modal'>
<form className='modal__form'>
<label>Your Full Name</label>
<input
placeholder='Enter Your Full Name'
type='text'
name='fullName'
onFocusOut={handleRequire}
onChange={handleChange}
></input>
{errors.fullName.length > 0 && (
<p className='modal__errors'>
<svg
className='MuiSvgIcon-root'
focusable='false'
viewBox='0 0 24 24'
aria-hidden='true'
>
<path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'></path>
</svg>{' '}
{errors.fullName}
</p>
)}
<label>Your Email Address</label>
<input
placeholder='Enter Email Address'
type='text'
name='email'
onChange={handleChange}
></input>
{errors.email.length > 0 && (
<p class='modal__errors'>
<svg
class='MuiSvgIcon-root'
focusable='false'
viewBox='0 0 24 24'
aria-hidden='true'
>
<path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'></path>
</svg>{' '}
{errors.email}
</p>
)}
<label>Password</label>
<input
placeholder='Enter Password'
type='password'
name='password'
onChange={handleChange}
></input>
{/* <svg
class='MuiSvgIcon-root visiblity'
focusable='false'
viewBox='0 0 24 24'
aria-hidden='true'
>
<path d='M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z'></path>
</svg> */}
{errors.password.length > 0 && (
<p class='modal__errors password_error'>
<svg
class='MuiSvgIcon-root'
focusable='false'
viewBox='0 0 24 24'
aria-hidden='true'
>
<path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'></path>
</svg>{' '}
{errors.password}
</p>
)}
<button class='home__login' type='submit' disabled>
Next
</button>
</form>
</div>
</div>
<div class='modal__contentbottom'>
<hr></hr>
<p>
By signing up, you're agreeing to our{' '}
<span>Terms of Use</span>
</p>
<p>
Already have an account? <span>Log In</span>
</p>
</div>
</div>
</div>
CSS for the Form container, two columns
form {
display: block;
margin-top: 0em;
}
.modal__form > label {
font-size: 0.875rem;
color: #201e27;
margin: 0.625rem 0 2%;
font-weight: 600;
display: block;
line-height: 1.6;
max-width: 42em;
}
.modal__form > input {
border-radius: 0.3125rem;
margin-bottom: 0.6rem;
width: 96%;
font-size: 0.875rem;
font-family: Inter;
padding: 10px;
outline: none;
caret-color: #48ccac;
border: 1px solid #ddd;
transition: all 0.3s ease-in;
}
.modal__form > input:focus {
border: 2px solid #48ccac;
}
.modal__errors {
color: #e0133e;
width: 100%;
margin-top: 0.01em;
font-weight: 700;
font-size: 0.8rem;
display: flex;
align-items: center;
}
.modal__errors > .MuiSvgIcon-root {
color: #e0133e !important;
font-size: 1.1rem !important;
}
.MuiSvgIcon-root {
fill: currentColor;
width: 1em;
height: 1em;
display: inline-block;
font-size: 1.5rem;
transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
flex-shrink: 0;
user-select: none;
margin-right: 4px;
}
.visiblity {
position: relative;
top: -2.6rem;
right: -22rem;
cursor: pointer;
}
Media queries for the mobile adjusting the two columns
#media (max-width: 770px) {
.ModalSection2 {
height: fit-content;
width: 90%;
margin: 20px auto;
padding: 20px;
}
}
#media (max-width: 415px) {
.ModalWrapper {
height: 100%;
border-radius: 0%;
margin: 0%;
display: block;
position: relative;
/* flex-direction: column; */
overflow-y: auto;
}
.CloseModalButton {
position: fixed !important;
color: grey;
}
.ModalSection1,
.ModalSection2 {
width: 100%;
margin: 0 auto;
padding: 0px;
color: black;
border-radius: 0 0 0 0;
position: relative;
}
.modal__content2 {
width: 100%;
padding: 0 27.2px;
margin: 0;
}
}
#media (max-width: 415px) {
.ModalSection2 {
min-height: 0%;
height: 100%;
overflow-y: unset;
}
.ModalSection1 {
padding-top: 30px;
height: 25%;
background-color: white;
}
}
What is going on here? What is that element called and how to manipulate it ?

Navigation bar - not closing when clicking the current section

Hello,
I have a working navigation bar sliding out of the page when the user clicks on the menu icon. It shows up only on mobile version of the website.
When u want to close the bar, you click on "x" or outside the div, somewhere in the background.
When I click on a section name, the page refreshes and the navigation closes. The problem appears when I click on the current section. The page does not refresh, so you have to close the navigation manually.
I want my navigation bar to close everytime an user clicks a link. Do you have any idea how can I achieve that?
This is my website: https://www.poznanprzeprowadzki.pl
This is my html for this part:
<div id="menu-mobile" class="menu-mobile">
<div class="menu-mobile-close" onclick=closeNav()>
<p>x</p>
</div>
<div class="menu-mobile-header">
<img src="img/poznanprzeprowadzki_logo3.png" name="Poznań przeprowadzki logo" alt="Poznań przeprowadzki logo"></a>
<p class="lang" key="you-are-free-to-contact">Zapraszamy do kontaktu!</p>
</div>
<a href="index.php#indexmain"><div class="dropdown-content-item">
<div class="dropdown-content-item-icon">
<img width="20px" height="20px" src="img/Home_icon_white.png">
</div>
<div class="dropdown-content-item-text">
<p class="lang" key="home">Strona główna</p>
</div>
</div></a>
<a href="about.php#indexmain"><div class="dropdown-content-item">
<div class="dropdown-content-item-icon">
<img width="20px" height="20px" src="img/About_icon_white.png">
</div>
<div class="dropdown-content-item-text">
<p class="lang" key="about">O nas</p>
</div>
</div></a>
<a href="gallery.php#indexmain"><div class="dropdown-content-item">
<div class="dropdown-content-item-icon">
<img width="20px" height="15px" src="img/Gallery_icon_white.png">
</div>
<div class="dropdown-content-item-text">
<p class="lang" key="gallery">Galeria</p>
</div>
</div></a>
<a href="contact.php#indexmain"><div class="dropdown-content-item">
<div class="dropdown-content-item-icon">
<img width="20px" height="15px" src="img/Contact_icon_white.png">
</div>
<div class="dropdown-content-item-text">
<p class="lang" key="contact">Kontakt</p>
</div>
</div></a>
<a href="advices.php#indexmain"><div class="dropdown-content-item">
<div class="dropdown-content-item-icon">
<img width="15px" height="20px" src="img/Advices2_icon_white.png">
</div>
<div class="dropdown-content-item-text">
<p class="lang" key="advices">Pomoc / Porady</p>
</div>
</div></a>
</div>
<div id="menu-mobile-background" class="menu-mobile-background" onclick=closeNav()>
</div>
This is my css for this part:
.menu-mobile {
display: block;
height: 100%;
width: 250px;
position: fixed;
z-index: 9999;
top: 0;
right: -255px;
background-color: rgba(100,100,100,1);
overflow-x: hidden;
transition: 0.4s;
}
.menu-mobile-close {
position: absolute;
top: 5px;
right: 10px;
transition: 0.05s;
}
.menu-mobile-background {
right: 0;
top: 0;
position: fixed;
overflow: hidden;
z-index: 9998;
width: 0px;
height: 100%;
background-color: rgba(0,0,0,0.3);
}
.menu-mobile-header {
min-width: 250px;
padding: 16px;
text-align: center;
background-color: white;
}
.menu-mobile-header p {
font-family: Open Sans;
font-size: 14px;
color: rgba(100,100,100,1);
padding: 2px;
font-weight: 500;
display: block;
white-space: nowrap;
}
.menu-mobile-header img {
margin: 0 auto;
height: 65px;
padding-bottom: 6px;
}
.menu-mobile-close p:hover {
color: rgba(240,240,240,1);
cursor: pointer;
}
.menu-mobile-close p {
font-family: Open Sans;
font-size: 18px;
color: rgba(100,100,100,1);
font-weight: 600;
display: block;
}
This is my JS for this part:
function openNav() {
document.getElementById("menu-mobile").style.right = "0px";
document.getElementById("menu-mobile-background").style.width = "100%";
}
function closeNav() {
document.getElementById("menu-mobile").style.right = "-255px";
document.getElementById("menu-mobile-background").style.width = "0px";
}
Here is a picture of my navigation bar:

Add this script in your js file:
$(document).ready(function() {
$('.menu-mobile a').click(function(e) {
e.preventDefault(); // if the link don't reload all the page
closeNav();
})
});
Another solution, if you want to wait something before redirect:
$(document).ready(function() {
$('.menu-mobile a').click(function(e) {
e.preventDefault(); // is required
closeNav();
setTimeout(() => {
const nextPage = e.currentTarget.href;
window.location.href = nextPage;
},1000) // set the time here in milliseconds
})
});

jQuery-based animations for FreeCodeCamp Project are slow and inconsistent

I'm just doing my final project for FreeCodeCamp's Front end certificate. I turned it into a fighting game, for which the button sequences initiate moves. The problem is that the animations are really buggy. Here are the details:
---Background---
-The codepen link and code are at the bottom
-When I coded it locally, everything worked great, and the player actions were were done using jquery-based animations. (I used the setTimeout(), animation(), css(), and attr() a lot to move the avatars around and switch pictures to show movement
--The problem---
-I put the code on codepen, and so I needed to host the sprite images to use them (I used dropbox). This change caused the animations to not work properly. Some of the images and sounds either load slowly or not at all. If you go to the codepen and try the buttons at the bottom you will quickly see what I mean.
---What I tried---
-I thought that maybe this might be a problem with the app taking too long to load the assets and cache them. (because some of the animations became more fluid after I repeated them) So I added a function near the top to load the photos at the beginning 'imageInit()'. But the problem persists.
Can anyone please help me figure out what is making my jquery animations so choppy and inconsistent? Am I using the wrong techniques perhaps? Please let me know if you need any more info about this. The code is below:
Thank you!
JK
The code is here: https://codepen.io/jonnnyk20/pen/XaPqrR, and here is some code form the project:
var playerSpace = $('.player-space');
var playerAvatar = $('#player-image');
var playerImages = {
"basic": "https://u57193820.dl.dropboxusercontent.com/u/57193820/saiyan-says/images/goku/goku-basic.png",
"attack": "https://u57193820.dl.dropboxusercontent.com/u/57193820/saiyan-says/images/goku/goku-attack.png",
"attack2": "https://u57193820.dl.dropboxusercontent.com/u/57193820/saiyan-says/images/goku/goku-attack2.png",
"attack3": "https://u57193820.dl.dropboxusercontent.com/u/57193820/saiyan-says/images/goku/goku-attack3.png" }
var tlp = new Audio('https://u57193820.dl.dropboxusercontent.com/u/57193820/saiyan-says/sounds/misc/instant-transmission.mp3');
var hitSound = new Audio('https://u57193820.dl.dropboxusercontent.com/u/57193820/saiyan-says/sounds/misc/hit.mp3');
function imageInit(obj){
for (image in obj){
$('<img/>')[0].src = console.log(obj[image]);
}
}
imageInit(miscImages);
imageInit(playerImages);
imageInit(enemyImages);
function attackAnimation(){
playerAvatar.attr("src", miscImages['blur']);
playerAvatar.fadeOut( 100, function() {
// Animation complete.
playerAvatar.fadeIn( 100, function() {
// Animation complete
playerAvatar.attr("src", playerImages['attack']);
enemyAvatar.attr("src", enemyImages['hurt']);
hitSound.play();
playerSpace.css({ left: "55%"});
setTimeout(function(){
playerAvatar.attr("src", miscImages['blur']);
playerAvatar.fadeOut( 100, function() {
playerAvatar.fadeIn( 100, function() {
playerAvatar.attr("src", playerImages['basic']);
enemyAvatar.attr("src", enemyImages['basic']);
playerSpace.css({ left: "20%"});
})
})
}, 200)
});
});
}
.container {
padding: 10px;
}
.row {
margin: 0;
}
.element {
display: inline-block;
background-color: white;
color: #0275d8;
border: solid 1px #0275d8;
border-radius: 50px;
min-width: 75px;
min-height: 75px;
text-align: center;
padding: 10px;
margin: 5px;
padding-top: 25px;
}
.progress {
margin: 5px;
}
.healthBar {
min-height: 20px;
width: 100%;
border-radius: 5px;
padding-left: 5px;
color: #023a6b;
}
.hb-label {
position: absolute;
margin-left: 5px;
font-size: small;
}
.healthBarContainer {
background-color: white;
border-radius: 5px;
margin: 5px;
border: solid 1px #3b66e6;
}
.gameInfo {
margin: 5px;
border: solid 1px gray;
padding: 5px;
/* background-color: #ececec; */
border-radius: 5px;
display: inline-block;
}
.game-screen {
background-color: #b2ebff;
border: solid 1px #0275d8;
height: 228px;
}
.game-control {
border: solid 1px #0275d8;
border-left: none;
text-align: center;
padding: 10px;
}
.button-group {
margin: auto;
}
.game-header {
border: solid 1px #0275d8;
border-bottom: none;
text-align: center;
z-index: 1;
background-color: white;
}
.game-settings {
border: solid 1px #0275d8;
border-top: none;
text-align: center;
}
.block {
margin-right: 40px;
}
.attack {
margin-bottom: -20px;
}
.dodge {
margin-top: -20px;
}
.fighter-space {
/* border: solid 1px #3b66e6; */
border-radius: 20px;
height: 100px;
width: 100px;
text-align: center;
}
.enemy-space {
position: absolute;
right: 20%;
top: 30px;
}
.player-space {
position: absolute;
left: 20%;
top: 30px;
z-index: 1;
}
.half {
float: left !important;
width: 50% !important;
z-index: 1;
}
.ki-space {
display:none;
position: absolute;
top: 30px;
left: 30%;
z-index: 1;
}
.lazer-space {
position: absolute;
top: 9px;
left: 27%;
display: none;
}
.test-actions {
margin: 10px;
}
.fighter-space.km-space {
position: absolute;
top: 25px;
left: 20%;
display:none;
z-index:1
}
.km-space {
z-index: 2
}
.fighter-space.db-space {
position: absolute;
top: -80px;
right: 20%;
display: none;
}
img#db-image {
margin-top: 40px;
}
#separate {
font-weight: bold;
margin: 10px;
font-size: large;
color: crimson
}
<div class="container">
<div class="row top-row">
<div class="col-md-12 game-header">
Title
</div>
</div>
<div class="row mid-row">
<div class="col-md-7 game-screen">
<div class="row health-bars">
<div class="col-md-6 half">
<div class="healthBarContainer">
<div class="hb-label"> Player Health: <span id="playerHealth">0</span> </div>
<div class="healthBar bg-success" id="playerHealthBar" data-p="100" >
</div>
</div>
</div>
<div class="col-md-6 half">
<div class="healthBarContainer">
<div class="hb-label"> Enemy Health: <span id="enemyHealth">0</span> </div>
<div class="healthBar bg-warning" id="enemyHealthBar" data-p="100" syle="min-width: 1em">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 fight-ring">
<div class="fighter-space player-space">
<img src="https://u57193820.dl.dropboxusercontent.com/u/57193820/saiyan-says/images/goku/goku-basic.png" id="player-image" height="100" width="100">
</div>
<div id="projectlie">
<div class="fighter-space ki-space">
<img src="https://u57193820.dl.dropboxusercontent.com/u/57193820/saiyan-says/images/misc/ki-blast.png" id="ki-image" height="100" width="100">
</div>
<div class="fighter-space lazer-space">
<img src="https://u57193820.dl.dropboxusercontent.com/u/57193820/saiyan-says/images/misc/ki-lazer.png" id="lazer-image" height="100" width="250">
</div>
<div class="fighter-space km-space">
<img src="https://u57193820.dl.dropboxusercontent.com/u/57193820/saiyan-says/images/misc/kamehameha1.png" id="km-image" height="100" width="400">
</div>
</div>
<div class="fighter-space enemy-space">
<img src="https://u57193820.dl.dropboxusercontent.com/u/57193820/saiyan-says/images/frieza/frieza-basic.png" id="enemy-image" height="100" width="100">
</div>
<div class="fighter-space db-space">
<img src="https://u57193820.dl.dropboxusercontent.com/u/57193820/saiyan-says/images/misc/frieza-ball.png" id="db-image" height="10" width="10">
</div>
</div>
</div>
</div>
<div class="col-md-5 game-control">
<div class="row">
<div class="button-group">
<div data-i=0 class="simon element attack">Attack</div>
</div>
</div>
<div class="row">
<div class="button-group">
<div data-i=1 class="simon element block">Block</div>
<div data-i=2 class="simon element blast">Blast</div>
</div>
</div>
<div class="button-group">
<div data-i=3 class="simon element dodge">Dodge</div>
</div>
</div>
</div>
<div class="row bottom-row">
<div class="col-md-12 game-settings">
<div class="gameInfo bg-primary" style="color: white" id="restart"> Start</div>
<div class="gameInfo"> Mode: <span id="mode">Easy</span> </div>
<div class="gameInfo"> Input Count: <span id="in-count">0</span> </div>
<div class="gameInfo"> Turn: <span id="turn">Demo</span> </div>
<div class="gameInfo" id="diff"> Change Mode</div>
</div>
<hr>
<div id="separate">--------The Buttons Below are For Testing Purposes---------</div>
<div class="col-md-12 test-actions">
<button class="btn btn-primary test-action" data-p="0" data-a="0">Attack</button>
<button class="btn btn-primary test-action" data-p="0" data-a="1">Block</button>
<button class="btn btn-primary test-action" data-p="0" data-a="2">Blast</button>
<button class="btn btn-primary test-action" data-p="0" data-a="3">Dodge</button>
<button class="btn btn-primary test-action" data-p="0" data-a="4">Finish</button>
<br>
<button class="btn btn-default test-action" data-p="1" data-a="0">E. Attack</button>
<button class="btn btn-default test-action" data-p="1" data-a="1">E. Block</button>
<button class="btn btn-default test-action" data-p="1" data-a="2">E. Blast</button>
<button class="btn btn-default test-action" data-p="1" data-a="3">E. Dodge</button>
<button class="btn btn-default test-action" data-p="1" data-a="4">E. Finish</button>
</div>
<button class="btn btn-default" id="testButton"> Test Controls</button>
</div>
enter code here
</div>