Imagine a month of 30 days and randomly assign a temperature for each of these days, including the temperature each day between 7 and 16°C. Here is my code:
let arrMonth = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21,
22, 23, 24, 25, 26, 27, 28, 29, 30
]
let temperature = Math.floor(Math.random() * (16 - 7 + 1)) + 7;
for (let i = 0; i < arrMont.length; ++i) {
arrMonth[i] = temperature
console.log(arrMonth[i])
}
It only gives me the temperature for the last day. What I am doing wrong?
on the console:
30: 11
One simple extension of your code is to turn your variable into an arrow function, like
const temperature = () => (Math.floor(Math.random() * (16 - 7 + 1)) + 7);
Then each time you ask for 'temperature()' you'll get a new value.
let arrMonth = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30
]
const temperature = () => (Math.floor(Math.random() * (16 - 7 + 1)) + 7);
for (let i = 0; i < arrMonth.length; ++i) {
arrMonth[i] = temperature()
console.log(arrMonth[i])
}What the OP asks for is actually a mapping task.
But since the OP also wants to render the well tempered dates/days, an approach which follows the separation of concerns (loosely said ... "each task a single function") should be taken into consideration.
Thus the OP could play around with the different tasks and e.g. adapt them to the OP's needs ...
function getRandomValueFromTemperatureRange() {
// returns random values in between 7 and 16 inclusively.
return (Math.floor(Math.random() * 10) + 7);
}
function createTemperedDateItem(date) {
return {
date,
temperature: getRandomValueFromTemperatureRange(),
};
}
function renderTemperedDateItems(dateList) {
const listRootNode = document.createElement('dl');
dateList.forEach(dateItem => {
const { date, temperature } = dateItem;
const dateNode = document.createElement('dt');
const temperatureNode = document.createElement('dd');
dateNode.title = 'Date within Month';
temperatureNode.title = 'Temperature in °C';
dateNode.textContent = date;
temperatureNode.textContent = temperature;
listRootNode.appendChild(dateNode);
listRootNode.appendChild(temperatureNode);
});
document.body.appendChild(listRootNode);
}
const arrMonth = Array.from(
{ length: 30},
(elm, idx) => (idx + 1)
);
console.log({
arrMonth,
temperedDateList: arrMonth.map(createTemperedDateItem),
});
renderTemperedDateItems(
arrMonth.map(createTemperedDateItem)
);dl { margin: 0!important; }
dl::after { clear: both; display: block; content: ''; }
dt { float: left; }
dd::after { display: inline; content: ' °C'; }
body { margin: 0 0 100px 0!important; }
.as-console-wrapper { max-height: 100px!important; }