diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..667aff2
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "livePreview.defaultPreviewPath": "/frontend/tworzenie_/index.html"
+}
\ No newline at end of file
diff --git a/frontend/panel_organizatora/index.html b/frontend/panel_organizatora/index.html
new file mode 100644
index 0000000..f73b0a9
--- /dev/null
+++ b/frontend/panel_organizatora/index.html
@@ -0,0 +1,187 @@
+
+
+
+ Todo App
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Turnieje
+
+
+
Rankingowe
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/frontend/panel_organizatora/myscript.js b/frontend/panel_organizatora/myscript.js
new file mode 100644
index 0000000..fd93c89
--- /dev/null
+++ b/frontend/panel_organizatora/myscript.js
@@ -0,0 +1,154 @@
+//Problem: user interaction doesn't provide desired results
+//Solution: add interactivity so the user can manage daily tasks.
+
+var taskInput = document.getElementById("new-task"); // new-task
+var addButton = document.getElementsByTagName("button")[0];//first button
+var incompleteTasksHolder = document.getElementById("incomplete-tasks"); //incomplete-tasks
+var completedTasksHolder = document.getElementById("completed-tasks"); //completed-tasks
+
+//New Task List item
+
+var createNewTaskElement = function (taskString) {
+ // create List Item
+ var listItem = document.createElement("li");
+ // input checkbox
+ var checkBox = document.createElement("input");
+ // label
+ var label = document.createElement("label");
+ // input (text)
+ var editInput = document.createElement("input");
+ // button.edit
+ var editButton = document.createElement("button");
+ // button.delete
+ var deleteButton = document.createElement("button");
+
+ //Each element needs modified
+
+ checkBox.type = "checkBox";
+ editInput.type = "text";
+
+ editButton.innerText = "Edytuj";
+ editButton.className = "edit";
+ deleteButton.innerText = "Usuń";
+ deleteButton.className = "delete";
+
+ label.innerText = taskString;
+
+ // Each element needs appending
+ listItem.appendChild(checkBox);
+ listItem.appendChild(label);
+ listItem.appendChild(editInput);
+ listItem.appendChild(editButton);
+ listItem.appendChild(deleteButton);
+
+ return listItem;
+}
+
+
+//Add a new task
+var addTask = function () {
+ console.log("Add Task...");
+ //Create a new list item with the text from the #new-task:
+ var listItem = createNewTaskElement(taskInput.value);
+ //Append listItem to incompleteTaskHolder
+ incompleteTasksHolder.appendChild(listItem);
+ bindTaskEvents(listItem, taskCompleted);
+ taskInput.value = "";
+}
+
+//Edit an existing task
+var editTask = function () {
+ console.log("Edit Task...");
+
+ var listItem = this.parentNode;
+
+ var editInput = listItem.querySelector("input[type=text]");
+ var label = listItem.querySelector("label");
+
+ var containsClass = listItem.classList.contains("editMode");
+
+
+ // if class of the parent is .editMode
+ if (containsClass) {
+ //Switch from .editMode
+ //label text become the input's value
+ label.innerText = editInput.value;
+ } else {
+ //Switch to .editMode
+ //input value becomes the labels text
+ editInput.value = label.innerText;
+ }
+ //Toggle .editMode on the parent
+ listItem.classList.toggle("editMode");
+}
+
+//Delete an existing task
+var deleteTask = function () {
+ console.log("Delete Task...");
+ //Remove the parent list item from the ul
+ var listItem = this.parentNode;
+ var ul = listItem.parentNode;
+
+ ul.removeChild(listItem);
+}
+
+//Mark a task as complete
+var taskCompleted = function () {
+ console.log("Task Complete...");
+ //When the Checkbox is checked
+ //Append the task list item to the #completed-tasks ul
+ var listItem = this.parentNode;
+ completedTasksHolder.appendChild(listItem);
+ bindTaskEvents(listItem, taskIncomplete);
+}
+
+
+//Mark a task as incomplete
+var taskIncomplete = function () {
+ console.log("Task Incomplete...");
+ //When the checkbox is unchecked appendTo #incomplete-tasks
+ var listItem = this.parentNode;
+ incompleteTasksHolder.appendChild(listItem);
+ bindTaskEvents(listItem, taskCompleted);
+}
+
+
+//Set the click handler to the addTask function
+addButton.addEventListener("click", addTask);
+
+
+var bindTaskEvents = function (taskListItem, checkBoxEventHandler) {
+ console.log("Bind List item events");
+ // select listitems chidlren
+ var checkBox = taskListItem.querySelector('input[type="checkbox"]');
+ var editButton = taskListItem.querySelector("button.edit");
+ var deleteButton = taskListItem.querySelector("button.delete");
+ //bind editTask to edit button
+ editButton.onclick = editTask;
+ //bind deleteTask to delete button
+ deleteButton.onclick = deleteTask;
+ //bind checkBoxEventHandler to checkbox
+ checkBox.onchange = checkBoxEventHandler;
+
+}
+
+//cycle over incompleteTaskHolder ul list items
+for (var i = 0; i < incompleteTasksHolder.children.length; i++) {
+ //bind events to list item's children (taskCompleted)
+ bindTaskEvents(incompleteTasksHolder.children[i], taskCompleted);
+}
+
+//cycle over completedTaskHolder ul list items
+for (var i = 0; i < completedTasksHolder.children.length; i++) {
+ //bind events to list item's children (taskCompleted)
+ bindTaskEvents(completedTasksHolder.children[i], taskIncomplete);
+}
+
+
+
+
+
+
+
+
+
diff --git a/frontend/panel_organizatora/style.css b/frontend/panel_organizatora/style.css
new file mode 100644
index 0000000..e9437bb
--- /dev/null
+++ b/frontend/panel_organizatora/style.css
@@ -0,0 +1,108 @@
+* {
+ /* border: solid; */
+}
+
+a {
+ text-align: center;
+ line-height: 2;
+ color: white;
+ text-decoration: none;
+}
+
+
+header {
+ display: flex;
+ flex-flow: row wrap;
+ justify-content: space-between;
+ background-color: #0f64f2;
+ margin: auto;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ padding-right: 30px;
+ padding-left: 30px;
+
+}
+
+header>p {
+ text-align: center;
+ line-height: 0;
+}
+
+.container {
+ height: 100%;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+
+}
+
+.eventHeader {
+ text-align: center;
+ padding-top: 5px;
+ padding-bottom: 5px;
+}
+
+.event {
+ background-color: #0f64f2;
+ color: white;
+ border-style: solid;
+ border-width: 2px;
+ margin-top: 25px;
+ margin-right: 25px;
+ flex-direction: column;
+ flex-wrap: wrap;
+ height: auto;
+
+
+}
+
+.eventInside {
+ background-color: white;
+ color: #4C8BF5;
+ height: auto;
+ border: solid;
+ border-color: lightgray;
+ padding: 10px;
+
+}
+
+.eventInside>p {
+ color: lightgray;
+}
+
+.myButton {
+ background-color: #4C8BF5;
+ border-radius: 28px;
+ border: 1px solid #4C8BF5;
+ display: inline-block;
+ cursor: pointer;
+ color: #ffffff;
+ font-family: Arial;
+ font-size: 9px;
+ padding: 8px 13px;
+ text-decoration: none;
+}
+
+.dot {
+ height: 30px;
+ width: 30px;
+ color: white;
+ background-color: skyblue;
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+
+@media all and (max-width: 800px) {
+ header {
+ justify-content: space-around;
+ }
+}
+
+@media all and (max-width: 800px) {
+ header {
+ flex-direction: colum;
+ }
+}
\ No newline at end of file