Message from JavaScript discussions

August 2020

— 

const containerQuery = '#' + containerID
const container = document.querySelector(containerQuery);

const style = `
.day {
display: inline-block;
background-color: white;
color: #ccc;
text-align: center;
width: 100px;
height: 100px;
}
.day-active {
background-color: rebeccapurple;
color: white;
}

.day .day-week {
font-size: 0.9em;
}

.day .day-num {
font-size: 1.2em;
}
`;

const s = document.createElement('style');

s.innerHTML = style;

document.head.appendChildren(s);

/**
* type {(day: number | string, week: "mon" | "tue" | "wed" | "thu" | "sat" | "sun", isActive?: boolean) => HTMLElement}
*/
const dateFactory = (day, week, isActive = false) => {
const ret = document.createElement('div';
ret.classList.add('day', isActive ? 'day-active' : undefined);
const inWeek = document.createElement('span');
inWeek.classList.add('day-week');
ret.appendChildren(inWeek);
const inNum = document.createElement('span');
inNum.classList.add('day-num');
ret.appendChildren(inNum);

return ret;
}

function days(startNum, startWeek, container, amount, activeIndex) {
const days = ['mon', 'tue', 'wed', 'thu', 'sat', 'sun'];
if (days.indexOf(startWeek) === -1)
throw new Error();
for (let i = 0; i < amount, i++) {
const e = dateFactory (startNum + i, days[(days.indexOf(startWeek) + i) % days.length], i === activeIndex);
container.appendChildren(e);
}
}

function week(start, activeDay) {
days(start, 'mon', container, 7, activeDay)
}

week(24, 4);

Message permanent page

— 

Obviously just a mock, a lot of tests are missing. If it doesn't work, maybe it's appendChild instead of appendChildren, can't remember

— Alright. Thanks so much.. I appreciate..
I'll give you feedback once I try it..

— You learn much more if you try to solve such a problem yourself

— And only ask here if you don't know the JS way to to solve a specific problem in you code

— Https://youtu.be/-ZCbJwFP5sk

— Djezuz man, why not codepen something, i bet you had some similar task before🤤

— Proud boy🤤 woof

— Guys do anyone know a package for unique ID generators ?
Thanks

— Search on npm. uuid or nanoid

— Thanks

— Hi