Hallo meine Freunde,
ich mache gerade aus Spaß eine ToDoListe um meine Fähigkeiten zu stärken. Jedoch komme ich nicht weiter... Und zwar das mit dem "Change Status" - Button. Wenn ich darauf klicke und mein Kärtchen "orange" ist, dann sollte es in "grün umwandeln", und es sollte eine img erscheinen (Also es sollte dann so aussehen, als würde ich "Completed" - Button drücken. Und wenn es schon grün ist dann sollte es in orange umwandeln.) Also es ist besser wenn ihr euch meinen ganzen Code anseht. Ich hoffe auf eure Hilfen! Ich sitze schon wirklich den ganzen Tag da drum und sterbe gleich. Dankeschön im Voraus!
*update: Sorry, dass ich diese Frage im Unterbereich Java reingepackt habe, ich habe aus irgendeinem Grund aufeinmal gedacht, dass Java = JavaScript ist... Es tut mir Leid nochmal!!!
ich mache gerade aus Spaß eine ToDoListe um meine Fähigkeiten zu stärken. Jedoch komme ich nicht weiter... Und zwar das mit dem "Change Status" - Button. Wenn ich darauf klicke und mein Kärtchen "orange" ist, dann sollte es in "grün umwandeln", und es sollte eine img erscheinen (Also es sollte dann so aussehen, als würde ich "Completed" - Button drücken. Und wenn es schon grün ist dann sollte es in orange umwandeln.) Also es ist besser wenn ihr euch meinen ganzen Code anseht. Ich hoffe auf eure Hilfen! Ich sitze schon wirklich den ganzen Tag da drum und sterbe gleich. Dankeschön im Voraus!
*update: Sorry, dass ich diese Frage im Unterbereich Java reingepackt habe, ich habe aus irgendeinem Grund aufeinmal gedacht, dass Java = JavaScript ist... Es tut mir Leid nochmal!!!
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Tasks</title>
<link rel="stylesheet" href="./style.css">
<script defer src="./script.js"></script>
</head>
<body>
<div class="bodyDiv">
<header>
<div class="title">
<h1>My Tasks</h1>
</div>
</header>
<main>
<section>
<div class="inputs">
<input id="inputOne" type="text" placeholder="Enter your task!">
<input id="inputTwo" type="date" placeholder="Enter your date!">
<button id="buttonForInputs">Add task!</button>
</div>
</section>
<section>
<div class="tasks">
<div class="date"></div>
<div class="information"></div>
</div>
</section>
<section>
<div class="buttons">
<button id="buttonOne">Delete all!</button>
<button id="buttonTwo">Change status!</button>
</div>
</section>
</main>
</div>
</body>
</html>
CSS:
*{
margin: 0;
box-sizing: border-box;
}
/*BODY_AND_HTML*/
html {
background-image: linear-gradient(161deg, rgba(117, 117, 117, 0.03) 0%, rgba(117, 117, 117, 0.03) 50%,rgba(8, 8, 8, 0.03) 50%, rgba(8, 8, 8, 0.03) 100%),linear-gradient(59deg, rgba(245, 245, 245, 0.05) 0%, rgba(245, 245, 245, 0.05) 50%,rgba(68, 68, 68, 0.05) 50%, rgba(68, 68, 68, 0.05) 100%),linear-gradient(286deg, rgba(107, 107, 107, 0.07) 0%, rgba(107, 107, 107, 0.07) 50%,rgba(7, 7, 7, 0.07) 50%, rgba(7, 7, 7, 0.07) 100%),linear-gradient(123deg, rgba(9, 9, 9, 0.09) 0%, rgba(9, 9, 9, 0.09) 50%,rgba(120, 120, 120, 0.09) 50%, rgba(120, 120, 120, 0.09) 100%),linear-gradient(170deg, rgba(202, 202, 202, 0.01) 0%, rgba(202, 202, 202, 0.01) 50%,rgba(19, 19, 19, 0.01) 50%, rgba(19, 19, 19, 0.01) 100%),linear-gradient(210deg, rgba(64, 64, 64, 0.04) 0%, rgba(64, 64, 64, 0.04) 50%,rgba(4, 4, 4, 0.04) 50%, rgba(4, 4, 4, 0.04) 100%),linear-gradient(90deg, rgb(249, 17, 190),rgb(100, 28, 213));
background-repeat: no-repeat;
background-size: cover;
height: 1000px;
}
/*HEADER*/
header .title {
display: flex;
justify-content: center;
}
header h1 {
font-size: 4rem;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: #fff;
}
/*MAIN*/
.tasks {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
margin-top: 50px;
}
.tasks .date {
background-color: orange;
width: 20%;
padding-bottom: 20px;
border-radius: 3px;
display: none;
}
.tasks .date p {
text-align: center;
color: #fff;
font-weight: 700;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin-top: 9px;
}
.tasks .information {
background-color: rgb(219, 182, 112);
width: 20%;
padding-top: 220px;
border-radius: 2px;
text-align: start;
display: none;
}
.tasks .information p {
margin-top: -210px;
margin-left: 30px;
color: #fff;
font-weight: 100;
font-size: 15px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.inputs {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.inputs input {
width: 30%;
height: 30px;
border-radius: 7px;
}
.inputs #inputOne {
margin-top: 150px;
}
.inputs #inputTwo {
margin-top: 10px;
}
.inputs button {
margin-top: 15px;
width: 8%;
height: 30px;
margin-right: 320px;
border-radius: 10px;
color: #fff;
font-weight: 600;
background-image: linear-gradient(353deg, rgb(242, 82, 69),rgb(131, 28, 80));
text-transform: uppercase;
cursor: pointer;
border: none;
}
.buttons {
display: flex;
justify-content: center;
margin-right: 150px;
margin-top: 30px;
gap: 10px;
}
.buttons button {
width: 11%;
height: 30px;
border-radius: 10px;
color: #fff;
font-weight: 600;
background-image: linear-gradient(353deg, rgb(242, 82, 69),rgb(131, 28, 80));
text-transform: uppercase;
cursor: pointer;
border: none;
}
Javascript:
document.addEventListener("DOMContentLoaded", function() {
const tasksInformation = document.querySelector(".tasks .information");
const tasksDate = document.querySelector(".tasks .date");
const addTasksButton = document.getElementById("buttonForInputs");
const tasks = document.getElementsByClassName("tasks");
const inputOne = document.getElementById("inputOne");
const inputTwo = document.getElementById("inputTwo");
const deleteAllButton = document.getElementById("buttonOne");
const changeStatusButton = document.getElementById("buttonTwo");
const buttonTwo = document.createElement("button")
let completedClicked = false;
// ADD_TASK_BUTTON
// FOR_INFORMATION_INPUT
const addTaskButtonFunction = () => {
const taskInfo = inputOne.value;
const taskInfoAdd = document.createElement("p");
taskInfoAdd.textContent = taskInfo;
tasksInformation.appendChild(taskInfoAdd);
inputOne.value = "";
// COMPLETED_BUTTON
const buttonOne = document.createElement("button");
buttonOne.textContent = "COMPLETED";
tasksInformation.appendChild(buttonOne);
buttonOne.addEventListener("click", () => {
completedClicked = true;
tasksInformation.style.backgroundColor = "rgb(113, 194, 113)";
tasksDate.style.backgroundColor = "green";
const image = document.createElement("img");
image.src = "https://static-00.iconduck.com/assets.00/process-completed-icon-499x512-mhraisqh.png";
tasksInformation.append(image);
buttonOne.remove();
image.style.width = "100px";
image.style.height = "100px";
image.style.marginLeft = "180px";
image.style.marginTop = "105px";
tasksInformation.appendChild(buttonTwo)
buttonTwo.style.marginLeft = "20px"
buttonTwo.style.position = "relative"
buttonTwo.style.top = "-40px"
const changeStatusFunction = () => {
if (completedClicked) {
tasksInformation.style.backgroundColor = "rgb(219, 182, 112)";
tasksDate.style.backgroundColor = "orange";
completedClicked = false;
} else {
tasksInformation.style.backgroundColor = "rgb(113, 194, 113)";
tasksDate.style.backgroundColor = "green";
const u = document.createElement("h1")
u.textContent = "JS IS SHIT"
tasksInformation.append(u)
completedClicked = true;
}
};
buttonTwo.addEventListener("click", changeStatusFunction);
});
tasksInformation.style.display = "block";
buttonOne.style.color = "#fff";
buttonOne.style.fontWeight = "600";
buttonOne.style.marginTop = "170px";
buttonOne.style.marginLeft = "20px";
buttonOne.style.borderRadius = "10px";
buttonOne.style.background = "rgb(93,186,19)";
buttonOne.style.background = "linear-gradient(353deg, rgba(93,186,19,1) 39%, rgba(211,237,190,1) 74%)";
buttonOne.style.border = "none";
buttonOne.style.cursor = "pointer";
// DELETE_TASK_BUTTON
buttonTwo.textContent = "DELETE TASK"
tasksInformation.append(buttonTwo)
buttonTwo.style.borderRadius = "10px"
buttonTwo.style.color = "#fff"
buttonTwo.style.fontWeight = "600"
buttonTwo.style.backgroundImage = "linear-gradient(353deg, rgb(242, 82, 69),rgb(131, 28, 80))"
buttonTwo.style.cursor = "pointer"
buttonTwo.style.border = "none"
};
// FOR_DATE_INPUT
const anotherAddTasksButtonFunction = () => {
const dateInfo = inputTwo.value;
const dateInfoAdd = document.createElement("p");
dateInfoAdd.textContent = `Date: ${dateInfo}`;
tasksDate.appendChild(dateInfoAdd);
inputTwo.value = "";
tasksDate.style.display = "block";
};
// REMOVE_ALL_BUTTON
const removeAllButtonFunction = () => {
while (tasks[0].firstChild) {
tasks[0].removeChild(tasks[0].firstChild);
}
};
// CHANGE_STATUS_BUTTON
const changeStatusFunction = () => {
if (completedClicked) {
tasksInformation.style.backgroundColor = "rgb(219, 182, 112)";
tasksDate.style.backgroundColor = "orange";
completedClicked = false;
} else {
tasksInformation.style.backgroundColor = "rgb(113, 194, 113)";
tasksDate.style.backgroundColor = "green";
completedClicked = true;
}
};
// EVENT_LISTENERS
changeStatusButton.addEventListener("click", changeStatusFunction);
addTasksButton.addEventListener("click", () => {
addTaskButtonFunction();
anotherAddTasksButtonFunction();
});
deleteAllButton.addEventListener("click", removeAllButtonFunction);
});
