d2jsp
Log InRegister
d2jsp Forums > Off-Topic > Computers & IT > Programming & Development > Looking For Some Javascript/css/html Code Written > 500fg Each
Add Reply New Topic New Poll
Views: 277Replies: 8Track Topic
Member
Posts: 14,925
Joined: Jan 3 2008
Gold: 135,879.75
#1
Apr 3 2019 09:35am
Instructions: Write it with codepen.io.

Task 1:

User presses 'H'. "Pop-up 1" appears on the screen.
User presses 'H' again. "Pop-up 2" appears on the screen.
User presses 'H' again. "Pop-up 3" appears on the screen.
User presses 'H' again. Nothing happens because there are only 3 pop-ups.

Task 2:

The page shows a sentence that says: "Press D and I will disappear."

User presses D on keyboard. The sentence disappears with a disintegration effect.
Member
Posts: 12,703
Joined: May 17 2013
Gold: 12,935.00
#2
Apr 3 2019 11:58am
Here's task 1:

HTML:
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>How to Detect H Keypress using JavaScript</title>
</head>
<body onkeypress="handleH(event)">
<script src="script.js"></script>
</body>
</html>



JS:
Code
var number = 1;

function handleH(e) {
var keycode = e.code;
if (keycode == "KeyH") {
if (number > 3) {
return;
}
alert("Popup " + number);
number++;
}
}
Member
Posts: 14,925
Joined: Jan 3 2008
Gold: 135,879.75
#3
Apr 3 2019 02:10pm
Quote (Klexmoo @ Apr 3 2019 01:58pm)
Here's task 1:

HTML:
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>How to Detect H Keypress using JavaScript</title>
</head>
<body onkeypress="handleH(event)">
<script src="script.js"></script>
</body>
</html>



JS:
Code
var number = 1;

function handleH(e) {
var keycode = e.code;
if (keycode == "KeyH") {
if (number > 3) {
return;
}
alert("Popup " + number);
number++;
}
}



Sorry, I should've been a little bit more clear. The pop-up should be a div of some sort, and each pop-up has a different form / shape, that wouldn't be able to be replicated with a for loop. Can you also link it through codepen.io? I'm not too familiar with using the languages when it's not through that format.

This post was edited by kdog3682 on Apr 3 2019 02:11pm
Member
Posts: 1,039
Joined: Jul 8 2008
Gold: 1,939.50
#4
Apr 3 2019 02:25pm
Quote (kdog3682 @ Apr 3 2019 03:10pm)
Sorry, I should've been a little bit more clear. The pop-up should be a div of some sort, and each pop-up has a different form / shape, that wouldn't be able to be replicated with a for loop. Can you also link it through codepen.io? I'm not too familiar with using the languages when it's not through that format.


Acceptance criteria too vague.

Task 1:

User presses 'H'. "Pop-up 1" appears on the screen.
User presses 'H' again. "Pop-up 2" appears on the screen.
User presses 'H' again. "Pop-up 3" appears on the screen.
User presses 'H' again. Nothing happens because there are only 3 pop-ups.

Does this mean that at the end when you click H for the 4th time the 3 popups are present? The div is :
Code
<div>Pop-up 1Pop-up 2Pop-up 3</div>

or
Code
<div>Pop-up 1<br />Pop-up 2<br />Pop-up 3</div>

or
Code
<div>Pop-up 3</div>

or empty?
Member
Posts: 12,703
Joined: May 17 2013
Gold: 12,935.00
#5
Apr 3 2019 02:45pm
Quote (kdog3682 @ 3 Apr 2019 22:10)
Sorry, I should've been a little bit more clear. The pop-up should be a div of some sort, and each pop-up has a different form / shape, that wouldn't be able to be replicated with a for loop. Can you also link it through codepen.io? I'm not too familiar with using the languages when it's not through that format.


You're a master of being vague. How about actually specifying details then?
Member
Posts: 14,925
Joined: Jan 3 2008
Gold: 135,879.75
#6
Apr 3 2019 04:41pm
Quote (waraholic @ Apr 3 2019 04:25pm)
Acceptance criteria too vague.

Task 1:

User presses 'H'. "Pop-up 1" appears on the screen.
User presses 'H' again. "Pop-up 2" appears on the screen.
User presses 'H' again. "Pop-up 3" appears on the screen.
User presses 'H' again. Nothing happens because there are only 3 pop-ups.

Does this mean that at the end when you click H for the 4th time the 3 popups are present? The div is :
Code
<div>Pop-up 1Pop-up 2Pop-up 3</div>

or
Code
<div>Pop-up 1<br />Pop-up 2<br />Pop-up 3</div>

or
Code
<div>Pop-up 3</div>

or empty?



Press H first time: a picture of a dog flies on to the screen.
Press H second time: a picture of a cat flies onto the screen.
Press H third time: a red rectangle appears on the screen.
Press H fourth time: nothing happens, but everything else remains.
Keep pressing H: Nothing happens.
Member
Posts: 1,039
Joined: Jul 8 2008
Gold: 1,939.50
#7
Apr 3 2019 05:00pm
Quote (kdog3682 @ Apr 3 2019 05:41pm)
Press H first time: a picture of a dog flies on to the screen.
Press H second time: a picture of a cat flies onto the screen.
Press H third time: a red rectangle appears on the screen.
Press H fourth time: nothing happens, but everything else remains.
Keep pressing H: Nothing happens.


So you've clarified the fact that everything remains on the page, but you've also added to the ask by requesting things to fly onto the screen. Easily done with CSS animation, but I'm not doing any work trying to shoot a moving target.
Member
Posts: 1,039
Joined: Jul 8 2008
Gold: 1,939.50
#8
Apr 3 2019 05:10pm
That being said you can just take Klexmoo's code and substitute the alert with
Code
var node = document.createElement("div");
node.textContent = "Popup" + number;
document.body.appendChild(node);

but I'm not doing the images or animation or any of that other stuff. You can pay Klexmoo if this is enough for you.

Edit: missing a word

This post was edited by waraholic on Apr 3 2019 05:10pm
Member
Posts: 14,925
Joined: Jan 3 2008
Gold: 135,879.75
#9
Apr 3 2019 07:31pm
Quote (waraholic @ Apr 3 2019 07:10pm)
That being said you can just take Klexmoo's code and substitute the alert with
Code
var node = document.createElement("div");
node.textContent = "Popup" + number;
document.body.appendChild(node);

but I'm not doing the images or animation or any of that other stuff. You can pay Klexmoo if this is enough for you.

Edit: missing a word


Thanks.

This post was edited by kdog3682 on Apr 3 2019 07:31pm
Go Back To Programming & Development Topic List
Add Reply New Topic New Poll

© 2003-2024 d2jsp  Contact