forked from s444413/Padel-Tournaments-System
feat: ✨ Turnieje
Zmiana dodająca mozliwosc dodawania, edycji i usuwania turniejów
This commit is contained in:
Arek
parent
ddbcc3cb46
commit
5d6a42135b
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"livePreview.defaultPreviewPath": "/frontend/tworzenie_/index.html"
|
||||
}
|
||||
|
|
@ -0,0 +1,187 @@
|
|||
<html>
|
||||
|
||||
<head>
|
||||
<title>Todo App</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<p> Padel</p>
|
||||
<a href="#">Wiadomości</a>
|
||||
<a href="#">Kalendarz turniejów</a>
|
||||
<a href="#">Ranking</a>
|
||||
<a href="#">Wyniki</a>
|
||||
<a href="#">Kontakt</a>
|
||||
<span class="dot">JM</span>
|
||||
</header>
|
||||
<div class="container">
|
||||
<div class="tournametns_add">
|
||||
<style scoped>
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li * {
|
||||
float: left;
|
||||
}
|
||||
|
||||
li,
|
||||
h3 {
|
||||
clear: both;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button.edit {
|
||||
padding: 10;
|
||||
}
|
||||
|
||||
button.delete {
|
||||
padding: 10;
|
||||
}
|
||||
|
||||
button {
|
||||
background: none;
|
||||
border: 0px;
|
||||
color: #888;
|
||||
font-size: 15px;
|
||||
width: 60px;
|
||||
font-family: Lato, sans-serif;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
h3,
|
||||
label[for='new-task'] {
|
||||
color: gray;
|
||||
font-weight: 700;
|
||||
font-size: 15px;
|
||||
border-bottom: 2px solid #333;
|
||||
padding: 30px 0 10px;
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
line-height: 18px;
|
||||
height: 18px;
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
background: #fff;
|
||||
border-radius: 6px;
|
||||
font-family: Lato, sans-serif;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
input[type="text"]:focus {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* Nowy turniej */
|
||||
label[for='new-task'] {
|
||||
display: block;
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
|
||||
input#new-task {
|
||||
float: left;
|
||||
width: 318px;
|
||||
}
|
||||
|
||||
p>button:hover {
|
||||
color: #0FC57C;
|
||||
}
|
||||
|
||||
/*lista turniejów*/
|
||||
li {
|
||||
overflow: hidden;
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px solid lightblue;
|
||||
}
|
||||
|
||||
li>input[type="checkbox"] {
|
||||
margin: 0 10px;
|
||||
position: relative;
|
||||
top: 15px;
|
||||
}
|
||||
|
||||
li>label {
|
||||
font-size: 18px;
|
||||
line-height: 40px;
|
||||
width: 237px;
|
||||
padding: 0 0 0 11px;
|
||||
}
|
||||
|
||||
li>input[type="text"] {
|
||||
width: 226px;
|
||||
}
|
||||
|
||||
li>.delete:hover {
|
||||
color: #CF2323;
|
||||
}
|
||||
|
||||
ul li input[type=text] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul li.editMode input[type=text] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
ul li.editMode label {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<p>
|
||||
<label for="new-task">Dodawanie turnieju</label>
|
||||
<input id="new-task" type="text">
|
||||
<button>Dodaj</button>
|
||||
</p>
|
||||
|
||||
<h3>Turnieje</h3>
|
||||
<ul id="incomplete-tasks">
|
||||
<li>
|
||||
<input type="checkbox">
|
||||
<label>Turniej w Rzeszowie</label>
|
||||
<input type="text">
|
||||
<button class="edit">Edytuj</button>
|
||||
<button class="delete">Usuń</button>
|
||||
</li>
|
||||
<li class="editMode">
|
||||
<input type="checkbox">
|
||||
<label>Turniej w Łodzi</label>
|
||||
<input type="text" value="Turniej w">
|
||||
<button class="edit">Edytuj</button>
|
||||
<button class="delete">Usuń</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3>Rankingowe</h3>
|
||||
<ul id="completed-tasks">
|
||||
<li>
|
||||
<input type="checkbox" checked="">
|
||||
<label>Turniej w Warszawie</label>
|
||||
<input type="text">
|
||||
<button class="edit">Edycja</button>
|
||||
<button class="delete">Usuń</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script type="text/javascript" src="myscript.js"></script>
|
||||
|
||||
</html>
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue