We Keep Coding

DOM manipulation with JavaScript or jQuery by moving element inside of its sibling [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I have a big list of DOM elements containing product image and description.
How can I use JavaScript or jQuery to move .title element inside its sibling's imageWrapper element ?
I drew a diagram here, hopefully that helps with explaining the situation.
Here is what I have so far:
var $titleArray = $('.title');
for (var i = 0 ; i < $titleArray; i++){
var $imageWrapper = $($titleArray[i]).parent().prev();
$($titleArray[i]).appendTo($imageWrapper);
};

Got it! I forgot to put .length after $titleArray and I used appendTo() instead of prependTo(). Although the code doesn't look so elegant now. But it's a good start.
var $titleArray = $('.title');
for (var i = 0 ; i < $titleArray.length; i++){
var $imageWrapper = $($titleArray[i]).parent().prev();
$($titleArray[i]).prependTo($imageWrapper);
};

Typing effect: Word per Word [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 5 years ago.
Improve this question
I've been figuring out how to have a typing effect that is word per word instead of letter per letter. So far, all links I've searched are offering letter per letter typewriter effect.
https://macarthur.me/typeit/
https://github.com/mattboldt/typed.js/
Is this possible to achieve? Or have you done something similar?

This is pretty easy.
Just register an interval, split your text, reverse the array and pop the last item. The one you append to the text-container then. Done.
JS
var myText = "Some text you want to be typed automagically..";
var myWords = myText.split(" ").reverse();
var ntrvl = setInterval(function() {
addNextWord();
}, 150);
function addNextWord() {
var nextWord = myWords.pop();
if(nextWord !== undefined) {
var textNow = $(".write-here").text() + " " + nextWord;
$(".write-here").text(textNow);
}
}
What do you think of this?
JSfiddle

create an array with whichever words you want to print one at a time.
const sentence = 'this sentence will be displayed one word at a time';
var arrayOfWords = sentence.split(' ');
for (var i = sentence.length - 1; i >= 0; i--) {
setTimeout(function(){
console.log(sentence[i]); // or display another way
}, 400) // set this to your desired interval
}

I need to programatically create several variables in javascript? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I asked this question but it was marked as duplicate - it's not.
I need to programmatically create X number of variables (the number will be the value of someArray.length - which is also something created programmatically and thus unknown to me).
Is there any way to say "there's 8 items in this set, so I need 8 variables, and I need to be able to call on them/manipulate them later?" Hopefully I'm making sense.
My core problem: I programmatically generate a list of links. Can be any number of links. I need to be able to validate that the user clicks each of these links before advancing.

I programmatically generate a list of links. Can be any number of links. I need to be able to validate that the user clicks each of these links before advancing.
You do not need to create an unknown number of variables to solve your problem (how would you name them?). As stated by other commenters, you have a list of links, and you need to keep track of which ones have been clicked.
There are numerous ways to solve this problem in JavaScript. Below is an example of a straightforward approach which should be easy to follow. The approach is simply to use another array, linksClicked, to keep track of which links have been clicked. To validate, count the number of links that have been clicked and compare to the total number of links.
var arrayOfLinks = [
'http://www.stackoverflow.com',
'http://www.arstechnica.com'
];
var linksClicked = [];
function clickLink(url){
//check if link is in arrayOfLinks
for(var i = 0; i < arrayOfLinks.length; i++){
//if link is in arrayOfLinks, mark it as clicked
if(arrayOfLinks[i] === url){
linksClicked[i] = true;
}
}
}
function checkLinksClicked(){
//count number of links that have been clicked
var linkSum = 0;
for(var i = 0; i < linksClicked.length; i++){
if(linksClicked[i]){
linkSum++;
}
}
return linkSum;
}
console.log(checkLinksClicked());
clickLink('http://www.stackoverflow.com');
console.log(checkLinksClicked());
clickLink('http://www.stackoverflow.com');
console.log(checkLinksClicked());
clickLink('http://www.arstechnica.com');
console.log(checkLinksClicked());

Secret Hidden message on keyboard enter [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
Just had a thought and was wondering if it was possible in the spirit of april fools.
Is it possible to have a secret code that you randomly type in a website similar to that on a gaming console like (a, up, down, b, L1, R1), but on the website, you would type on your keyboard "9 2 k (uparrow) 3" and as long as you're on the website, it does something, let's say alert('hey')? Curious to see how you would do it.

// our combo
var combo = [57, 50, 75, 38, 51];
var keys = new Array(combo.length);
$(document).on('keydown', function(evt){
// remove the earliest of the stored keys
keys.shift();
// push in the latest key pressed
keys.push(evt.which);
// compare with combo array - you could use any comparison method (convert to string,...)
if (!keys.some(function(e, i) { return e !== combo[i] }))
alert('hey')
})
Fiddle - https://jsfiddle.net/kzj5e7Lk/
You'll need to click in the run area (bottom right pane) before you try the key combination.

Well, there's a few things you could do to capitalize on this, and make it more obfuscated so the user has to jump through some more hoops to get the secret key combination, but this should be good enough for a basic implementation.
var code = '.57.50.75.38.51';
var entered = '';
var clearCombo;
//keypress won't register up arrow
$('body').keydown(function (e) {
clearTimeout(clearCombo);
entered += '.' + e.which;
clearCombo = setTimeout(function () {
entered = '';
}, 1000);
if (entered === code) {
alert('i pity the foobar');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
That'll require them to enter the code with each character within one second of each other. (set/clearTimeout) It also means they'll have to wait for the timeout to clear out their entered keys if they mess up.
You might also want to check out Mousetrap if you don't mind including an additional library.

JavaScript average calculator [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I am wondering how i would make a function that will record the 10 most recent Date.now commands and then turn them into an average. I then want to put it into a side bar and make it sort of like a scoreboard. http://jsfiddle.net/eh5dxyp4/ . Thanks in advance
clickedTime=Date.now();
reactionTime=(clickedTime-createdTime)/1000;
document.getElementById("time").innerHTML=reactionTime;
this.style.display="none";
makeBox();
}
makeBox();`

You've shown quite a bit of code that doesn't seem relevant to the actual maths part of your question. I'm going to provide one way to do this part:
record the 10 most recent Date.now commands and then turn them into an average
Create an array:
var recent = [];
And a function that adds a value to that array but also ensures there will only be at most ten items in it:
var recentLimit = 10;
function addRecentItem(item) {
recent.push(item); // add to end of array
if (recent.length > recentLimit)
recent.shift(); // remove from start of array
}
Then you just need a function to calculate the average:
function getRecentAverage() {
var i,
sum = 0;
for (i = 0; i < recent.length; i++)
sum += recent[i];
return sum / recent.length;
}
So then wherever in your code you produce one of the Date.now objects you can simply add it to the recent list:
addRecentItem(yourValueHere);
And then get the current average:
console.log( getRecentAverage() );
As far as your scoreboard concept goes, you just need a function that loops through whatever is in the recent array and creates appropriate html elements (li elements, for example).

Add var reactionTimes=[]; somewhere outside the function that calulates it then use
var reactionTime = (clickedTime-createdTime)/1000;
reactionTimes.push(reactionTime);
document.getElementById("time").innerHTML=reactionTime;
if (reactionTimes.length==10) {
var average = reactionTimes.reduce(function(sum, a) { return sum + a },0)/(reactionTimes.length!=0?reactionTimes.length:1);
reactionTimes.pop(); // make ready for a new 10th value
document.getElementById("average").innerHTML=average;
}