I'm developing an application with two date input fields. The current function I have calculates the sum of the digits in each field until it reaches a single digit, and then displays the result along with some text.
Now, I need to create another function that considers only the month and day (disregarding the year) from the input field. It should match this date with one of 12 different date ranges to determine the astrology sign associated with it. For example, a date like 04/09 would be matched with "Aries". The challenge here lies in comparing the input date with the 12 predefined date ranges.
I'm unsure how to structure this new function. It seems like I'll have to create an array with the 12 date ranges and somehow validate the input against this array.
Any suggestions? Here's my existing JavaScript and HTML code:
var ZodiacSigns = ['Aries', 'Taurus', 'Gemini', 'Cancer', 'Leo', 'Virgo', 'Libra', 'Scorpio', 'Saggitarius', 'Capricorn','Aquarius', 'Pisces'];
function getSum() {
// Place the id's of the input and output elements into respective arrays
let inputs = ['dateInput1','dateInput2'];
let outputs = ['result1','result2'];
inputs.forEach(function(input, index){
const inputValue = document.getElementById(input).value;
var sum = 0;
for (var i = 0; i < inputValue.length; i++) {
const num = parseInt(inputValue.charAt(i));
if (!isNaN(num)) {
sum += num;
}
}
const total = (sum - 1) % 9 + 1;
document.getElementById(outputs[index]).textContent = "Your number is: " + total;
});
}
<div class="container">
<div class="cell-1" id="centerElement">
<div id="cell-1-nest-l"></div>
<div id="cell-2-nest-l"></div>
<div id="cell-3-nest-l"></div>
<div id="cell-4-nest-l"><h3>your name</h3></div>
<div id="cell-5-nest-l"></div>
<div id="cell-6-nest-l"><input type="text" class="nameStyle1" id="nameInput1"></div>
</div>
<div class="cell-2" id="centerElement" ><img onclick="getSum();"
src="file:///Users/Nineborn/Downloads/My%20Post%20(5).png" alt=""></div>
<div class="cell-3" id="centerElement" >
<div id="cell-1-nest"></div>
<div id="cell-2-nest"></div>
<div id="cell-3-nest"><h3>their name</h3></div>
<div id="cell-4-nest"></div>
<div id="cell-5-nest"><input type="text" class="nameStyle1" id="nameInput2">
</div>
<div id="cell-6-nest"></div>
</div>
<div class="cell-4" id="result1">
<input type="date" class="dateStyle1" id="dateInput1">
</div>
<div class="cell-5"><button>Start Over</button></div>
<div class="cell-6" id="result2">
<input type="date" class="dateStyle2" id="dateInput2" placeholder="Their Bday">
</div>
<div class="cell-7"></div>
<div class="cell-8"></div>
<div class="cell-9"></div>
</div>