Develop Reference

querySelectorAll selects more than one element

const ratingElements = document.querySelectorAll(".ratings");
ratingElements.forEach((ratingElement) => {
ratingElement.addEventListener("click", (event) => {
console.log(event.target.innerText || event.target.parentNode.innerText); // || means "OR"
event.target.classList.add("active")
event.target.parentNode.classList.add("active")
});
});
.ratings__container {
display: flex;
padding: 20px 0;
gap: 5px;
}
.ratings {
min-width: 100px;
cursor: pointer;
padding: 5px;
margin: 10px 5px;
}
.ratings:hover, .active{
background: darkseagreen;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
color: aliceblue;
transition: all 300ms ease;
}
<div class="container" id="container">
<h1 class="heading">Feedback UI</h1>
<div class="ratings__container" id="ratings__container">
<div class="ratings" aria-label="unhappy">
<img src="unhappy.svg" alt="Unhappy" class="emoji-icon">
<small>Unhappy</small>
</div>
<div class="ratings" aria-label="neutral">
<img src="neutral.svg" alt="Neutral" class="emoji-icon">
<small>Neutral</small>
</div>
<div class="ratings" aria-label="happy">
<img src="happy-icon.svg" alt="Happy" class="emoji-icon">
<small>Happy</small>
</div>
</div>
<button class="btn">
Send Review
</button>
</div>
it should likely to be this
but it is like

You were adding active class to the parent div which is why whole div is turning green when you click on one emoji. One more thing was , when you click on one emoji then click on other both of them were getting green background color. Here is the solution .
const ratingElements = document.querySelectorAll(".ratings");
const images= document.getElementsByClassName("emoji-icon");
ratingElements.forEach((ratingElement) => {
ratingElement.addEventListener("click", (event) => {
for(image of images){
image.classList.remove("active");
}
event.target.classList.add("active")
});
});
.ratings__container {
display: flex;
padding: 20px 0;
gap: 5px;
background-color:aqua;
}
img
{
width:100px;
}
.ratings {
min-width: 100px;
cursor: pointer;
padding: 5px;
margin: 10px 5px;
}
.ratings:hover, .active{
background: darkseagreen;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
color: aliceblue;
transition: all 300ms ease;
}
<div class="container" id="container">
<h1 class="heading">Feedback UI</h1>
<div class="ratings__container" id="ratings__container">
<div class="ratings" aria-label="unhappy">
<img src="https://cdn.shopify.com/s/files/1/1061/1924/products/Happy_Emoji_Icon_5c9b7b25-b215-4457-922d-fef519a08b06_large.png?v=1571606090 alt="Unhappy" class="emoji-icon">
<small>Unhappy</small>
</div>
<div class="ratings" aria-label="neutral">
<img src="https://cdn.shopify.com/s/files/1/1061/1924/products/Happy_Emoji_Icon_5c9b7b25-b215-4457-922d-fef519a08b06_large.png?v=1571606090" alt="Neutral" class="emoji-icon">
<small>Neutral</small>
</div>
<div class="ratings" aria-label="happy">
<img src="https://cdn.shopify.com/s/files/1/1061/1924/products/Happy_Emoji_Icon_5c9b7b25-b215-4457-922d-fef519a08b06_large.png?v=1571606090" alt="Happy" class="emoji-icon">
<small>Happy</small>
</div>
</div>
<button class="btn">
Send Review
</button>
</div>
remove event.target.parentNode.classList.add("active") . Then select images using getElementsByClassName()(or whichever method you prefer) then remove class active for all of them . Then add class active to only one emoji .

How to display div with same ID and OnClick function - Javascript, HTML and CSS

I'm fairly new to Javascript, and i've reached an issue I can't figure out yet, so I'll explain it as best as I can.
I've got 2 divs containing a reply link with the same ID, OnClick. Only difference is the data-attribute which I thought could be used to differentiate the two. There are 2 reply divs that are styled to be hidden. The aim is once the reply link is clicked, the correct div will display below it.
The issue is, when you click any of the two Reply links, it only opens the first reply div below the first parent div. I'll created a little example to give a better understanding:
// Opens reply div and retrieves data-attribute (reply_id) to insert into MYSQL database
function replyLink(element) {
document.getElementById('reply').style.display = "block";
}
// Close div link, displays after opening reply box
function closeLink() {
document.getElementById('reply').style.display = "none";
}
#comment{
border: 1px solid #333333;
width: 500px;
height: 85px;
padding: 5px;
margin: 10px 10px 15px 10px;
}
#comment #content{
border: none;
padding: 15px;
font-size: 12px;
}
#comment #link{
border: none;
padding: 5px;
margin-top: 5px;
}
#comment #link a{
border: none;
text-decoration: none;
font-size: 12px;
color: blue;
}
#comment #link a:hover{
border: none;
text-decoration: underline;
font-size: 12px;
color: blue;
}
#reply{
border: 1px solid red;
padding: 15px;
margin: 0px 0px 10px 45px;
width: 400px;
}
<div id="comment">
<div id="content">
Content #1
</div>
<div id="link">
<a href='javascript:void(0);' onclick="replyLink()" data-test='1'>Reply</a>
</div>
</div>
<div id="reply" style="display: none;">
reply container 1
<a href='javascript:void(0);' onclick='closeLink()' />[Close]</a>
</div>
<div id="comment">
<div id="content">
Content #2
</div>
<div id="link">
<a href='javascript:void(0);' onclick="replyLink()" data-test='2'>Reply</a>
</div>
</div>
<div id="reply" style="display: none;">
reply container 2
<a href='javascript:void(0);' onclick='closeLink()' />[Close]</a>
</div>
Would a java genius be able to help me out.

You can use the classes for styling and IDs with indexes to identify the unique div boxes.
Here is the working example
function replyLink(index) {
document.getElementById('reply_' + index).style.display = "block";
}
// Close div link, displays after opening reply box
function closeLink(index) {
document.getElementById('reply_' + index).style.display = "none";
}
.comment {
border: 1px solid #333333;
width: 500px;
height: 85px;
padding: 5px;
margin: 10px 10px 15px 10px;
}
.comment .content {
border: none;
padding: 15px;
font-size: 12px;
}
.comment .link {
border: none;
padding: 5px;
margin-top: 5px;
}
.comment .link a {
border: none;
text-decoration: none;
font-size: 12px;
color: blue;
}
.comment .link a:hover {
border: none;
text-decoration: underline;
font-size: 12px;
color: blue;
}
.reply {
border: 1px solid red;
padding: 15px;
margin: 0px 0px 10px 45px;
width: 400px;
}
<div class="comment">
<div class="content">
Content #1
</div>
<div class="link">
<a href='javascript:void(0);' onclick="replyLink(0)" data-test='1'>Reply</a>
</div>
</div>
<div class="reply" id="reply_0" style="display: none;">
reply container 1
<a href='javascript:void(0);' onclick='closeLink(0)'>[Close]</a>
</div>
<div class="comment">
<div class="content">
Content #2
</div>
<div class="link">
<a href='javascript:void(0);' onclick="replyLink(1)" data-test='2'>Reply</a>
</div>
</div>
<div class="reply" id="reply_1" style="display: none;">
reply container 2
<a href='javascript:void(0);' onclick='closeLink(1)'>[Close]</a>
</div>

While the use of an id is straightforward when first working with JavaScript and HTML, it's use is discouraged as an anti-pattern. IDs make for brittle code (as you are seeing here) and don't scale well. Instead, don't use ids at all and instead use classes or a relative reference to the elements, such as this, .closest(), nextElementSibling, parentNode, etc.
Also, using hyperlinks as a "hook" to initiate some code upon a click event is semantically incorrect. Hyperlinks are for navigation and people who use screen readers will have difficulty navigating your page. Just about every visible HTML element supports a click event, so just attach a click handler directly to the element instead of wrapping the element with a hyperlink.
Lastly, there is no need for separate show and hide functions. Just add or remove a "hidden" class based on what was clicked.
You can see in my answer how much cleaner the HTML and JavaScript are without ids.
See comments inline below.
// Set up a single event handler for any clicks to any reply or Close
document.addEventListener("click", function(event){
// Check to see if the click originated at a Reply element
if(event.target.classList.contains("reply")){
// Find the closest ".comment" ancestor of the clicked reply
// element and then get the next element sibling to that and
// unhide it.
event.target.closest(".comment")
.nextElementSibling.classList.remove("hidden");
} else if(event.target.classList.contains("replyContainer")){
event.target.classList.add("hidden");
}
});
.hidden { display:none; }
.comment{
border: 1px solid #333333;
width: 500px;
height: 85px;
padding: 5px;
margin: 10px 10px 15px 10px;
}
.comment .reply{
padding: 5px;
margin-top: 5px;
}
.replyContainer{
border: 1px solid red;
padding: 15px;
margin: 0px 0px 10px 45px;
width: 400px;
}
<div class="comment">
<div class="content">Content #1</div>
<div class="reply">Reply</div>
</div>
<div class="hidden replyContainer">reply container 1[Close]</div>
<div class="comment">
<div class="content">Content #2</div>
<div class="reply">Reply</div>
</div>
<div class="hidden replyContainer">reply container 2[Close]</div>
<div class="comment">
<div class="content">Content #3</div>
<div class="reply">Reply</div>
</div>
<div class="hidden replyContainer">reply container 3[Close]</div>

how to change div background color with anothor div attribute value in js

hello guys i got small problem in javascript..
i want to change the background color of .gradient_color class and the color should be another class attribute value... i want to do this with 50+ divs all divs with different color .. how can i set the .gradient_color div background with the value of data-clipboard-text
<div class="box">
<div class="gradient_color"></div>
<div
class="copyButton"
data-clipboard-text="background: linear-gradient(to right, #8e2de2,#8f6ba8);"
>
COPY
</div>
</div>
<div class="box">
<div class="gradient_color"></div>
<div
class="copyButton"
data-clipboard-text="linear-gradient(to right, #ee9ca7, #ffdde1)"
>
COPY
</div>
</div>

you could get all the .gradient_color elements using querySelectorAll and loop over the returned collection. In each iteration, get the next element sibling for the current .gradient_color element and read its data-clipboard-text attribute and set is as background of the current .gradient_color element
const divs = document.querySelectorAll('.gradient_color');
divs.forEach(d => {
d.style.background = d.nextElementSibling.dataset.clipboardText;
})
.gradient_color {
width: 50px;
height: 50px;
border: 1px solid;
}
<div class="box">
<div class="gradient_color"></div>
<div class="copyButton" data-clipboard-text="linear-gradient(to right, #8e2de2,#8f6ba8)">
COPY
</div>
</div>
<div class="box">
<div class="gradient_color"></div>
<div class="copyButton" data-clipboard-text="linear-gradient(to right, #ee9ca7, #ffdde1)">
COPY
</div>
</div>

This should work as well:
const gradientColors = document.querySelectorAll('.gradient_color');
const copyButtons = document.querySelectorAll('.copyButton');
gradientColors.forEach((div,index)=>{
const color = copyButtons[index].dataset.clipboardText;
div.style.background=color;
});
.gradient_color {
width: 50px;
height: 50px;
border: 1px solid;
}
<div class="box">
<div class="gradient_color"></div>
<div class="copyButton" data-clipboard-text="linear-gradient(to right, #8e2de2,#8f6ba8)">
COPY
</div>
</div>
<div class="box">
<div class="gradient_color"></div>
<div class="copyButton" data-clipboard-text="linear-gradient(to right, #ee9ca7, #ffdde1)">
COPY
</div>
</div>

I hope this answers your question?
let elem_with_color_class = document.querySelectorAll('.copyButton');
elem_with_color_class.forEach((elem) => {
elem.addEventListener('click', function() {
let parent = this.parentElement;
let target_elem = parent.querySelector('.gradient_color');
target_elem.style.background = this.getAttribute('data-clipboard-text');
});
});
.box {
display: inline-flex;
justify-content: space-around;
align-items: center;
}
.gradient_color {
height: 30px;
width: 50px;
border: 1px solid #aaa;
margin: 1em;
display: inline-block;
}
.copyButton {
height: 30px;
width: 100px;
font-size: 12px;
font-weight: 500;
font-family: "Quicksand", sans-serif;
display: inline-flex;
justify-content: center;
align-items: center;
cursor: pointer;
color: #fff;
user-select: none;
outline: none;
background: darkseagreen;
border-radius: 2px;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.10);
}
<div class="box">
<div class="gradient_color"></div>
<div class="copyButton" data-clipboard-text="linear-gradient(to right, #8e2de2,#8f6ba8)">COPY</div>
</div>
<div class="box">
<div class="gradient_color"></div>
<div class="copyButton" data-clipboard-text="linear-gradient(to right, #ee9ca7, #ffdde1)">COPY</div>
</div>

Can anyone figure out why addEventListener on my div is not working?

I am trying to add a listener to a small button like div so I can eventually change the color once clicked without having to use an actual button for different reasons. I have seen multiple people on here say that it works or should work. Is there something I am missing or is it just not possible? Just looking for answers!
It's pretty simple and I have verified the button works with the same function.
//this is the entire js page at the moment
var WorkingOutManager = (function () {
this.setCounter = 1;
this.workoutCounter = 1;
this.workoutID = "workout" + workoutCounter + "_set" + setCounter;
this.changeState = () => {
//I will eventually add the code to change the state of the div
console.log(this.workoutID);
}
this.currentSetButton = document.getElementById(this.workoutID).
this.currentSetButton.addEventListener("click", this.changeState);
return {
changeState: changeState
}
})();
<body>
<div id="banner">
<a id="banner_text_link" href="../content/home.html">Work It Out</a>
</div>
<div id="wrapper">
<div>
<img id="page_image"
onclick="window.location.href='../content/home.html'"
src="../images/work_it_out_logo_workouts.png" alt="Work It
Out logo">
</div>
<!--Eventually, Display a Timer after pressing start -->
<div id="current_workout">
<div class="workout_exercise">
<div class="set_name">Pushups</div>
<div onclick="WorkingOutManager.changeState()"
class="set_exercise" id="workout1_set1">15</div>
<div class="set_exercise" id="workout1_set2">15</div>
<div class="set_exercise" id="workout1_set3">15</div>
<div class="set_exercise" id="workout1_set4">15</div>
</div>
<div class="workout_exercise">
<div class="set_name">Situps</div>
<div class="set_exercise" id="workout2_set1">TF</div>
<div class="set_exercise" id="workout2_set2">TF</div>
<div class="set_exercise" id="workout2_set3">TF</div>
<div class="set_exercise" id="workout2_set4">TF</div>
</div>
<div class="workout_exercise">
<div class="set_name">Pullups</div>
<div class="set_exercise" id="workout3_set1">TF</div>
<div class="set_exercise" id="workout3_set2">TF</div>
<div class="set_exercise" id="workout3_set3">TF</div>
<div class="set_exercise" id="workout3_set4">TF</div>
</div>
<button onclick="WorkingOutManager.changeState()"
id="add_exercise">COMPLETE WORKOUT</button>
</div>
</div>
<script src="../scripts/working_out.js"></script>
</body>
#current_workout {
color: rgb(48, 48, 48);
width: 100%;
height: auto;
}
.workout_exercise {
background-color: #c4c4c4;
height: 3rem;
width: auto;
align-content: center;
}
.set_name {
color: #fafafa;
float: left;
height: 100%;
padding: 0 0.2rem;
width: calc(30% - 0.4rem);
text-align: center;
vertical-align: center;
line-height: 3rem;
/* border-style: outset; */
background-color: #c4c4c4;
font-size: 1.6rem;
font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
}
.set_exercise {
float: right;
width: calc(calc(70% / 4) - 0.2rem);
height: 100%;
padding: 0 0.1rem;
margin: 0 0.1rem;
border-radius: 50%;
/* transform: rotate(-25deg);
text-transform: rotate(25deg); */
text-align: center;
vertical-align: center;
line-height: 3rem;
/* border-style: outset; */
background-color: #fafafa;
}
I am not receiving any error messages when I click on the div with the onClick listener. Nothing happens at all, in fact. The button at the bottom of the "current_workout" div works properly and logs the correctly formatted "workoutID."

It works for me if I change the '.' at the end of this line to a semicolon:
this.currentSetButton = document.getElementById(this.workoutID).
Because you're using float: right on .set_exercise, the items are listed from right to left instead of left to right. The clickable item, workout1_set1 is at the right end of the row, not the left. My guess is that you've been clicking the wrong item. I've tweaked your css to highlight the clickable item in the snippet below.
(The handler is firing twice because you've also got an onclick attribute on the div.)
FWIW—I'm not going to tell you how to do your thing—but I see no good reason to use float here (or anywhere at all, ever, really). You could achieve this layout with flexbox, grid, or a table and avoid all of the headaches that come with floats. (I don't usually advocate for tables, but one could argue that this is a table.)
var WorkingOutManager = (function () {
this.setCounter = 1;
this.workoutCounter = 1;
this.workoutID = "workout" + workoutCounter + "_set" + setCounter;
this.changeState = () => {
//I will eventually add the code to change the state of the div
console.log(this.workoutID);
}
this.currentSetButton = document.getElementById(this.workoutID);
this.currentSetButton.addEventListener("click", this.changeState);
return {
changeState: changeState
}
})();
#current_workout {
color: rgb(48, 48, 48);
width: 100%;
height: auto;
}
.workout_exercise {
background-color: #c4c4c4;
height: 3rem;
width: auto;
align-content: center;
}
.set_name {
color: #fafafa;
float: left;
height: 100%;
padding: 0 0.2rem;
width: calc(30% - 0.4rem);
text-align: center;
vertical-align: center;
line-height: 3rem;
/* border-style: outset; */
background-color: #c4c4c4;
font-size: 1.6rem;
font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
}
.set_exercise {
float: right;
width: calc(calc(70% / 4) - 0.2rem);
height: 100%;
padding: 0 0.1rem;
margin: 0 0.1rem;
border-radius: 50%;
/* transform: rotate(-25deg);
text-transform: rotate(25deg); */
text-align: center;
vertical-align: center;
line-height: 3rem;
/* border-style: outset; */
background-color: #fafafa;
}
#workout1_set1 {
background: red;
color: white;
font-weight: bold;
}
<div id="banner">
<a id="banner_text_link" href="../content/home.html">Work It Out</a>
</div>
<div id="wrapper">
<div>
<img id="page_image"
onclick="window.location.href='../content/home.html'"
src="../images/work_it_out_logo_workouts.png" alt="Work It
Out logo">
</div>
<!--Eventually, Display a Timer after pressing start -->
<div id="current_workout">
<div class="workout_exercise">
<div class="set_name">Pushups</div>
<div onclick="WorkingOutManager.changeState()"
class="set_exercise" id="workout1_set1">15</div>
<div class="set_exercise" id="workout1_set2">15</div>
<div class="set_exercise" id="workout1_set3">15</div>
<div class="set_exercise" id="workout1_set4">15</div>
</div>
<div class="workout_exercise">
<div class="set_name">Situps</div>
<div class="set_exercise" id="workout2_set1">TF</div>
<div class="set_exercise" id="workout2_set2">TF</div>
<div class="set_exercise" id="workout2_set3">TF</div>
<div class="set_exercise" id="workout2_set4">TF</div>
</div>
<div class="workout_exercise">
<div class="set_name">Pullups</div>
<div class="set_exercise" id="workout3_set1">TF</div>
<div class="set_exercise" id="workout3_set2">TF</div>
<div class="set_exercise" id="workout3_set3">TF</div>
<div class="set_exercise" id="workout3_set4">TF</div>
</div>
<button onclick="WorkingOutManager.changeState()"
id="add_exercise">COMPLETE WORKOUT</button>
</div>
</div>

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>