Failing to get condition to work with div? - javascript

I want to have the ball sized to the prompt of the user upon entering it and something doesn't work, can't tell what I'm doing wrong.
<style>
body {
background-color: black;
text-align: center;
}
h1 {
color: white;
}
div {
width: 100px;
height: 100px;
margin: auto;
margin-bottom: 10px;
border-radius: 50%;
transition: 0.3s;
line-height: 50px;
.ball4 {
background-color: brown;
}
</style>
<div class="ball4" onclick="onBall4Click()">
PROMPT
</div>
<script>
function onBall4Click() {
var ball4 = document.querySelector('.ball4');
var ball4Size = prompt("Size of ball? ");
if (ball4Size > 1000) {
alert("Too big!")
} else {
var ball4Size = size;
}
}
</script>
Thanks in advance to the helpers.

I feel like this is what you want with your JavaScript:
function onBall4Click() {
var ball4 = document.querySelector('.ball4');
var ball4Size = prompt("Size of ball? ");
if (ball4Size > 1000) {
alert("Too big!")
} else {
ball4.style.width = ball4Size;
ball4.style.height = ball4Size;
}
}
You were using an undefined variable rather than setting the actual size of the element. Also, I believe you still need to make the element a ball at this point because it is just a brown div right now.

Related

How to add static text after animated text in CSS

I've just started a couple of days in web development.
I need help for - I have two texts in the HTML (p tag) on the same line, one linked to JS with an "ID" and the other to CSS with "Class" and by using keyframes, and I've been trying to add a static text on the same line that displays after the animated text.
I'm trying to output - Where the First text animates by default, and when JS actions are triggered, that is by clicking on the button, the second text should display a static text on the same line as the first text.
My code:
JavaScript
CSS
HTML
let secondText = document.getElementById("second-text");
let a = 1;
let b = 5;
let c = a + b;
let result = "";
function startAction() {
if (c <= 12) {
result = "December";
} else {
result = "Not-Exists";
}
secondText.textContent = result;
console.log(result);
}
#second-text {
margin: 30px;
font-size: 20px;
font-weight: 700;
}
.first-text {
margin: 30px;
font-size: 20px;
font-weight: 700;
animation: typing 10s steps(19) infinite;
overflow: hidden;
white-space: nowrap;
border-right: 2px solid #111;
width: 19ch;
}
#keyframes typing {
0% {
width: 0ch;
}
50% {
width: 19ch;
}
100% {
width: 0ch;
}
}
<p class="first-text" id="second-text">Welcome To My Page</p>
<button onclick="startAction()">Action</button>
Please, Help me figure out what went wrong in my code?
Is that what you are looking for ?
let secondText = document.getElementById("second-text");
let a = 1;
let b = 5;
let c = a + b;
let result = "";
function startAction() {
document.getElementById("second-text").classList.remove("first-text");
document.getElementById("second-text").classList.add("newClass");
if (c <= 12) {
result = "December";
} else {
result = "Not-Exists";
}
secondText.textContent = result;
console.log(result);
}
.first-text {
margin: 30px;
font-size: 20px;
font-weight: 700;
animation: typing 10s steps(19) infinite;
overflow: hidden;
white-space: nowrap;
border-right: 2px solid #111;
width: 19ch;
}
.newClass{
margin: 30px;
font-size: 20px;
font-weight: 700;
overflow: hidden;
white-space: nowrap;
width: 19ch;
}
#keyframes typing {
0% {
width: 0ch;
}
50% {
width: 19ch;
}
100% {
width: 0ch;
}
}
<p class="first-text" id="second-text">Welcome To My Page</p>
<button onclick="startAction()">Action</button>

How to style array elements separately

I have recently taken up programming and my first task is to create a queue at the post office. The code kind of works and does everything I need, except, I need the input array elements to be displayed with some style, more like separate squares with names (similarly to the way the buttons are styled), not only in line separated by commas - see the demo below please.
var guests = new Array();
for (var i=0;i<10;i++){
guests[i] = prompt("Enter your name");
if (guests[0] == null) {
alert("No guests in a queue");
break;
} else if (guests[i] == null) {
break;
} else {
document.getElementById("queue").innerHTML=guests;
}
}
function removePeople() {
guests.shift();
document.getElementById("queue").innerHTML=guests;
}
function reversePeople() {
guests.reverse();
document.getElementById("queue").innerHTML=guests;
}
button:hover {
background-color:beige;
color:black;
}
.button {
background-color: green;
border: 2px solid black;
border-radius:4px;
color: white;
padding: 5px 15px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
}
<body>
<p id="queue"></p>
<button class="button" onclick ="removePeople()">Next</button>
<button class="button" onclick ="reversePeople()">Reverse</button>
</body>
I tried hard to find some hints here but everything seems too complicated for my level of understanding. So, if there is no easy way, I would rather ask for some specific materials where I could find how to deal with it. I am learning through W3Schools and also reading Eloquent Javascript publication, but coulnd't find anything concerning my problem. I hope my question makes sense.
Also, if you have any idea how to logically improve the code, I am open to any discussion.
I've tried to keep your code mostly the same.
To be able to change the css of a single queue item you need to wrap that item in something (in this example i've used a span)
I've created a function createQueueItemsHtml() that returns the array items wrapped in a span now you can use the following css selector to add css to each item #queue span
var guests = new Array();
for (var i = 0; i < 3; i++) {
var guestInput = prompt("Enter your name");
if(guestInput != "") {
guests[i] = guestInput;
}
if (guests[0] == null) {
alert("No guests in a queue");
break;
} else if (guests[i] == null) {
break;
} else {
document.getElementById("queue").innerHTML = createQueueItemsHtml();
}
}
function removePeople() {
guests.shift();
document.getElementById("queue").innerHTML = createQueueItemsHtml();
}
function reversePeople() {
guests.reverse();
document.getElementById("queue").innerHTML = createQueueItemsHtml();
}
function createQueueItemsHtml() {
let queueString = "";
for (var ii = 0; ii < guests.length; ii++) {
queueString += "<span>" + guests[ii] + "</span>";
}
return queueString;
}
button:hover {
background-color: beige;
color: black;
}
.button {
background-color: green;
border: 2px solid black;
border-radius: 4px;
color: white;
padding: 5px 15px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
}
#queue span {
background-color: green;
border: 2px solid black;
border-radius: 4px;
color: white;
padding: 5px 15px;
}
<p id="queue"></p>
<button class="button" onclick ="removePeople()">Next</button>
<button class="button" onclick ="reversePeople()">Reverse</button>
You can make your guests into <div> elements and then style those in any way you want or need. (I haven't touched the rest of your code, only the part that was needed for this particular thing)
Just change this bit
else {
document.getElementById("queue").innerHTML=guests;
}
To this:
} else {
var guest = document.createElement('div');
guest.classList.add('guest');
guest.innerHTML = guests[i];
document.getElementById("queue").appendChild(guest);
}
What it does is create a <div> element for each item in your guests array, add class="guest" to the element and add the name from your prompt to it. Then it appends this element to the #queue.
Your HTML would then look like this:
<p id="queue">
<div class="guest">john</div>
<div class="guest">doe</div>
</p>
I would suggest changing the <p> to <section> or something like that, just for the sake of semantics.
You can then style these elements like this:
.guest {
}
var guests = new Array();
for (var i=0;i<10;i++){
guests[i] = prompt("Enter your name");
if (guests[0] == null) {
alert("No guests in a queue");
break;
} else if (guests[i] == null) {
break;
} else {
var guest = document.createElement('div');
guest.classList.add('guest');
guest.innerHTML = guests[i];
document.getElementById("queue").appendChild(guest);
}
}
guest:hover {
background-color:beige;
color:black;
}
.guest {
background-color: green;
border: 2px solid black;
border-radius:4px;
color: white;
padding: 5px 15px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
display: inline-block
}
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<p id="queue"></p>
</body>
</html>

Toggle timer between RUN and RESET JS

I want to do a simple timer who can run from 25 to 0 and reset whenever we want to.
For this I've made a clickable div, and I want one click to start the timer and another one to reset it to 25 and stop the timer, is this possible ?
A toggable start/reset timer?
This is what I came up with so far :
HTML
<div id="result" onclick="playReset"><p id="output"></p> </div>
CSS
#result {
background: pink;
height: 200px;
width: 200px;
border-radius: 50%;
margin-left: 400px;
margin-top: 200px;
}
#result:hover {
border: black solid;
}
#output{
margin-left: 70px;
position: fixed;
font-size: 60px;
}
And the most important the JS :
var duree=25;
var toggle = true;
function playReset () {
if(toggle == true) {
var time = setInterval(function(){
duree--;
document.getElementById('output').innerHTML = duree;
}, 1000);
toggle = false
}
else if (toggle == false) {
clearInterval(time);
duree = 25;
toggle = true;
}
}
document.getElementById('output').innerHTML = duree;
Thank's if someone can give me a hand, I have SO MUCH trouble understanding setInterval/timeout, clearInterval/timeout ...
I simplified that code a little, where you can use the actual time variable to check whether it is running or not.
Stack snippet
var duree = 2;
var time;
function playReset() {
if (time) {
clearInterval(time);
time = null;
duree = 25;
document.getElementById('output').innerHTML = duree;
} else {
time = setInterval(function() {
duree--;
document.getElementById('output').innerHTML = duree;
if (duree == 0) {
clearInterval(time);
}
}, 1000);
}
}
document.getElementById('output').innerHTML = duree;
#result {
background: pink;
height: 200px;
width: 200px;
border-radius: 50%;
margin-left: 40px;
margin-top: 20px;
border: transparent solid;
}
#result:hover {
border: black solid;
}
#output {
margin-left: 70px;
position: fixed;
font-size: 60px;
}
<div id="result" onclick="playReset();">
<p id="output"></p>
</div>
When you later on have increased your skills, you likely want these stuff and their variable hidden from the global environment.
With closure one can do something like this, where only the function name is public.
Stack snippet
(function (output,duree,time) { //declared as static variables
this.init_time = duree;
this.playReset = function() {
if (time) {
clearInterval(time);
time = null;
output.innerHTML = duree = init_time; // set init value
} else {
time = setInterval(function() {
output.innerHTML = --duree;
if (duree == 0) {
clearInterval(time);
}
}, 1000);
}
}
window.playReset = this.playReset; //make it public
output.innerHTML = duree; // set init value
})(document.getElementById('output'),25); // pass in the output element and default time
#result {
background: pink;
height: 200px;
width: 200px;
border-radius: 50%;
margin-left: 40px;
margin-top: 20px;
border: transparent solid;
}
#result:hover {
border: black solid;
}
#output {
margin-left: 70px;
position: fixed;
font-size: 60px;
}
<div id="result" onclick="playReset();">
<p id="output"></p>
</div>
Here is same solution, but with the event listener and I check the count to know if a reset is to be done. You can try this here:
https://jsfiddle.net/0bej5tyn/
html
<div id="timer">
25
</div>
css
#timer{
width:150px;
height:100px;
line-height:100px;
border-radius:100px;
border:5px solid #444;
background:#555;
font-size:50px;
text-align:center;
color:#fff;
font-family:arial;
}
#timer:hover{
border:5px solid #333;
}
js
var timerButton = document.getElementById("timer");
var countStart = timerButton.innerHTML
var count = countStart;
var timer;
timerButton.addEventListener('click',function(){
if (count == countStart){
timer = setInterval(function(){
count--;
timerButton.innerHTML = count;
if (count == 0){
clearInterval(timer);
}
},1000);
}
else{
/* Reset here */
clearInterval(timer);
count = countStart;
timerButton.innerHTML = count;
}
});

JS slider image disappears when clicking Prev/Next arrow

I've tried to look for a solution for this but have failed miserably. It's my first ever time using JS (I'm trying to learn) so the possibility of my just not understanding the answers in the search results properly is quite high - sorry about that.
I am wanting a JS carousel, generated from an array, with Prev/Next buttons (ideally responsive etc but that'll come at a later stage), preferably with captions underneath. I can get the carousel to work but I end up getting a text link when I click on either Prev or Next. And I've no idea how to add the caption array underneath (I've taken out the JS for the captions for now because it was messing everything else up even further).
Relevant HTML:
<body onload="changePilt()">
<span id="prev" class="arrow">❮</span>
<div class="karussell" id="karussell">
<img class="karu" name="esislaid">
</div>
<span id="next" class="arrow">❯</span>
<div class="caption">
<h3 name="esikiri"></h3>
</div>
</body>
CSS, just in case:
.karussell {
position: relative;
width: 100%;
max-height: 600px;
overflow: hidden;
}
.arrow {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
color: #00A7E0;
margin-top: -22px;
padding: 16px;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
#next {
right: 0;
border-radius: 3px 0 0 3px;
}
#prev {
left: 0;
}
.arrow:hover {
background-color: rgba(0,0,0,0.8);
}
.caption {
text-align: center;
color: #00A7E0;
padding: 2px 16px;
}
.karu {
max-width: 75%;
}
#media (max-width:767px){.karu{max-width: 95%;}}
And finally, the dreaded JS:
var i = 0;
var s = 0;
var esileht = [];
var aeg = 5000;
//Image List
esileht[0] = 'img/tooted/raamat/graafvanalinn2016.jpg';
esileht[1] = 'img/tooted/kaart/kaart_taskus_esipool.jpg';
esileht[2] = 'img/tooted/kaart/graafkaart_esikylg.jpg';
//Change Image
function changePilt (){
document.esislaid.src = esileht[i];
if(i < esileht.length -1){
i++;
} else {
i = 0;
}
setTimeout("changePilt()", aeg);
}
document.onload = function() {
}
// Left and Right arrows
//J2rgmine
function jargmine(){
s = s + 1;
s = s % esileht.length;
return esileht [s];
}
//Eelmine
function eelmine(){
if (s === 0) {
s = esileht.length;
}
s = s -1;
return esileht[s];
}
document.getElementById('prev').addEventListener('click', function (e){
document.getElementById('karussell').innerHTML = eelmine();
}
);
document.getElementById('next').addEventListener('click', function (e) {
document.getElementById('karussell').innerHTML = jargmine();
}
);
I'm sure the solution is dreadfully obvious, I just cannot seem to be able to figure it out...
instead of innerHTML change src attribute of image
document.querySelector('#karussell img').src = eelmine();
And
document.querySelector('#karussell img').src = jargmine();

I am trying to make an array[ i ] 'glow' in order assigned. Why is my code not working?

I am attempting to make a simon game. I'm trying to use the glowInOrder() function to make the divs glow in the order of the array. Unfortunately only the first div in the array glows, not the others that follow. (When I say 'glow', I simply mean add effect that looks like glow using CSS.) I suspect the issue is in the glowInOrder() function, but i am unable to find the issue.
Here's my code (also on CodePen):
var colorArray = ["red", "blue", "green", "yellow", "pink"];
var player = [];
var computer = [];
var round = 0;
var randomOrder;
var myColor;
var chosenColor;
//--------------------------------------------------------//
function makeGlow(yolo) {
$(yolo).addClass('hover');
setTimeout(function() {
$(yolo).removeClass('hover');
}, 300);
}
//--------------------------------------------------------//
function makeGlowTwo(yolo) {
setTimeout(function() {
$(yolo).addClass('hover');
}, 500);
setTimeout(function() {
$(yolo).removeClass('hover');
}, 800);
}
//--------------------------------------------------------//
function newGame() {
player = [];
computer = [];
round = 0;
}
//---------------------------------------------------------//
function playerChoice() {
$('.all').on('click', function(e) {
player.push(e.target.id);
makeGlow(this);
});
};
//---------------------------------------------------------//
function computerChoice() {
randomOrder = Math.floor(Math.random() * colorArray.length);
myColor = colorArray[randomOrder];
computer.push(myColor);
chosenColor = "#" + myColor;
makeGlowTwo(chosenColor);
}
//--------------------------------------------------------//
function newRound() {
round++;
glowInOrder();
}
//---------------------------------------------------------//
function glowInOrder() {
//computerChoice();//this may not work take out if you find it doesn't
var i = 1;
var moves = setInterval(function() {
makeGlowTwo(computer[i]);
i++;
if (i >= computer.length) {
clearInterval(moves);
}
}, 400)
}
//---------------------------------------------------------//
function arraysEqual(arr1, arr2) {
if (arr1.length !== arr2.length)
return false;
for (var i = arr1.length; i--;) {
if (arr1[i] !== arr2[i])
return false;
}
return true;
}
//---------------------------------------------------------//
$(document).ready(function() {
newGame();
playerChoice();
computerChoice();
$('.all').on('click', function() {
if (arraysEqual(computer, player)) {
alert('yes');
glowInOrder();
}
});
});
* {
margin: 0;
padding: 0;
}
body {
background-color: black;
}
.all {
border-radius: 50%;
height: 100px;
width: 100px;
}
#red {
border: 5px solid red;
display: table;
margin-left: auto;
margin-right: auto;
}
#blue {
border: 5px solid blue;
border-radius: 50%;
float: right;
display: inline;
}
#green {
border: 5px solid green;
border-radius: 50%;
display: inline-block;
}
#yellow {
border: 5px solid yellow;
border-radius: 50%;
display: inline-block;
margin-left: 40px;
}
#pink {
border: 5px solid pink;
border-radius: 50%;
float: right;
display: inline;
margin-right: 40px;
}
.middleRow {
margin-top: 70px;
margin-bottom: 110px;
}
.gameContainer {
height: 500px;
width: 500px;
margin-left: 25%;
margin-top: 10%;
}
.hover {
background-color: white;
}
<div class="container">
<div class="gameContainer">
<div class="topRow">
<div id="red" class="all"></div>
</div>
<div class="middleRow">
<div id="green" class="all"></div>
<div id="blue" class="all"></div>
</div>
<div class="bottomRow">
<div id="yellow" class="all"></div>
<div id="pink" class="all"></div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Two issues that jump out:
You're only calling computerChoice once, and it adds only one entry to the array. So you have only one entry in computer at index 0.
Your glowInOrder function starts with i set to 1, which doesn't match any entry in your array. And naturally stops when you do the i >= computer.length check.
You need to ensure that computer has the correct number of entries (I'm guessing 5), and you need to start with i = 0 to start with the first one in your glowInOrder.
There are probably other logic issues in the code, but that's what's going on in relation to what you asked about. If you work through it in a debugger (there's one built into your browser) you'll be able to sort the other issues out.

Categories