0

Im new to JavaScript and don't have the knowledge to write this myself yet. Any help would be great.

I'm creating pseudorandom illustration generator, comprised of 3 images. They'd be chosen by their name and displayed. Live update would be the best.

I'd like to have the user enter their last name (into a field) which will be changed into an individual set of 3 numbers. From those numbers I'd like the images to be chosen, the 1st from the first etc. then display them vertically respectively.

Any input is welcome, I'm sure there's an easier way of doing it. Thanks for your time.

Edit: I'd like to change the last name that the user enters into a 3 digit number(000-999), then display 3 images based of the numbers given. If the number made is 015, then the first image displayed would be 000.jpg, the second 010.jpg and the third would be 005.jpg. Id like the same result each time a name is entered and I'd like to update on real time if possible. I hope this helps clear things up, I'm still trying to figure out the best way. Thanks

Jordan Connor
  • 15
  • 5
  • 1
    Not sure what you are asking. Please try to explain it better and add some code that you have already tried (or at least how you would try to do it) – Alvaro Flaño Larrondo Aug 06 '15 at 20:28
  • I'd like to change the last name that the user enters into a 3 digit number(000-999), then display 3 images based of the numbers given. If the number made is 015, then the first image displayed would be 000.jpg, the second 010.jpg and the third would be 005.jpg. Id like the same result each time a name is entered and I'd like to update on real time if possible. I hope this helps clear things up, I'm still trying to figure out the best way. Thanks – Jordan Connor Aug 06 '15 at 20:40
  • 1
    What you need is a hashing function that takes your string (last name) and hashes it into something like a 9-digit number, and split that into 3 3-digit numbers. – deleted user Aug 06 '15 at 20:48

1 Answers1

2

You can use the ASCII table to get the number matching with a letter.

Then, you can iterate on every char of the last name and sum it. At the end, you might want to use the % (modulo) of the sum to get a value lesser than 1.000.

A tested code would be: 

var lastName = "Connor";
var sum = 0;
for(var i=0; i<lastName.length;i++)
{
   sum += lastName[i].charCodeAt(0);
}

sum = (sum%1000);

In your case, the result would be: 623

Then, you might want to get the files: 600.jpg, 020.jpg and 003.jpg

var firstPic = (sum + "").split('')[0] + "00.jpg";
var secondPic = "0" + (sum + "").split('')[1] + "0.jpg";
var thirdPic = "00" + (sum + "").split('')[2] + ".jpg";
Didier Aupest
  • 3,227
  • 2
  • 23
  • 35
  • This works great thanks. How would I get the images from the var? – Jordan Connor Aug 07 '15 at 13:52
  • 1
    var imgToAdd = document.createElement("img"); imgToAdd.src = firstPic; document.appendChild(imgToAdd); – Didier Aupest Aug 07 '15 at 14:31
  • I know it's a lot to ask but could you explain how to set the name from an input as well. – Jordan Connor Aug 07 '15 at 14:32
  • here is a jsfiddle to train you: http://jsfiddle.net/x19mLe73/ There is the code above and you might want to test some stuff on it. – Didier Aupest Aug 07 '15 at 14:51
  • thats great thanks.I'm not sure i know how to use the code fully, removing the simulated user input should change the 'images' depending on the input right? how does the user submit? and will the images update in each time its entered? – Jordan Connor Aug 08 '15 at 18:55
  • @ Didier Aupest i got some extra help and think iv got it, https://jsfiddle.net/66apegkq/ (based of your code) thanks for taking the time to help me, ill put you in the source code :) – Jordan Connor Aug 08 '15 at 20:15