CODEWITHSUNDEEP
javascripthtml
nineborn
nineborn

Reputation: 105

Can I do this without a server?

I have no backend skills yet, i'm just trying to find out if I can create this functionality using javascript and run it on my browser.

I want a birthday input field, and a submit button.

I want to take the birthday data, and add all the individual numbers together, and then add the digits of that sum to get a single digit.

For example:

10/9/1940 would calculate 1+0+9+1+9+4+0. Which would equal 24. Then it would add the digits 2+4. Which equals 6.

Then, I want to print that number at the end of an h1 that says, "your combined birthday number is: 6"

Any tips? I dont have any idea how to link the input data in a birthday form to a submit button.

Upvotes: 3

Views: 154

Answers (4)

Nidhin Joseph
Nidhin Joseph

Reputation: 10237

Try this way using parseInt() to check if its a number.

function sumString(str, result) {
  for (i = 0; i < str.length; i++)
    if (!isNaN(parseInt(str[i])))
      result += parseInt(str[i]);
  if (result.toString().length <= 1)
    return result;
  else
    return sumString(result.toString(), 0);
}


function onBirthDaySelect(value) {
  document.getElementById('result').innerHTML = `<h1>your combined birthday number is: ${sumString(value, 0)}</h1>`;
}
<input type="date" id="bday"> <button onclick="onBirthDaySelect(document.getElementById('bday').value)">Calculate</button>
<div id="result"></div>

Upvotes: 1

Mukyuu
Mukyuu

Reputation: 6759

Yes, you can. By using input date you can get the date then you convert the value into integer by using Number() for each index and finally you append the <h1> text into body by using appendChild:

function calculate(){
  const date = document.getElementById('birthdate').value; // get input date value
  let result = 0; // for each function call set result to 0
  for (let index=0; index < date.length; index++){
    if(Number(date[index])){ // check if number
      result += Number(date[index]); // accumulate result
    }
  }
  const node = document.createElement("h1"); // Create a <h1> node
  const textnode = document.createTextNode(`your combined birthday number is: ${result}`);
  node.appendChild(textnode); // Append the text to <h1>
  document.body.appendChild(node); // Append <h1> to <body>
}
<input type="date" id="birthdate">
<button onclick="calculate()">Calculate</button>

Server is typically used to store data, and manage the data so you can use them across multiple devices. Which in this case you don't really need one.

Upvotes: 0

Laquio
Laquio

Reputation: 39

Using Javascript you can parse the Date from the birthday input field, see js string methods, after parsing the string into a number you can easily add them up then put back into your page.

Upvotes: 0

MBer
MBer

Reputation: 2524

Yes - if you do not need information to persist beyond a reload of the page, then you can do almost anything with JavaScript. Your use case is not that different from W3Schools' JS tutorial - besides a button, the form would just need a date entry field, and a few lines to do your calculation and apply the changes to the page. I recommend going through that to get an idea of the possibilities.

A server is only required if you want a system to act autonomously or remember across multiple users.

Upvotes: 4

Related Questions