- creation of events with a given day and time;
- Creation of an event for one or several participants;
- Removing an event;
- Storing data about participants and events in localStorage, which allows you to save data even when the page is reloaded.
The use of object arrays made it possible to easily save and delete data, and automatically generate a new selection of participants in the table without changing the HTML code.
main.js
Data = {
users: [
{ name: 'All', id: '0', activeEvents: [1, 2, 3] },
{ name: 'Alex', id: '1', activeEvents: [1, 3] },
{ name: 'Dmitri', id: '2', activeEvents: [1, 2, 3] },
{ name: 'Valeria', id: '3', activeEvents: [3] }
],
events: [
{ eventName: 'First meeting', eventId: 1, day: 1, time: 10 },
{ eventName: 'Data Structures', eventId: 2, day: 5, time: 14 },
{ eventName: 'Second meeting', eventId: 3, day: 3, time: 12 }
]
}onload.js
const addMembers = (options) => {
const choseMember = document.querySelector('select.members');
for (let i = 0; i < options.length; i++) {
const member = document.createElement('option');
member.innerHTML = options[i].name;
member.setAttribute('class', 'members_item');
member.setAttribute('value', `${options[i].id}`);
member.setAttribute('id', `member_${options[i].name}`);
choseMember.appendChild(member);
}
};Object with id: "0" is required to display all existing events.
To install the project, please download it or clone, after load node modules of the project use command:
To start the server use the command:
Open http://localhost:8080 for viewing in a browser.
To check if JavaScript code meets the airbnb styleguide requirements use command:
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent