-
Completed
+
+ Kanban Board
+
+
+
+
+
+
+
+
Paused
+
+
+
No Status
+
+
+ Buy a Pizza
+ ×
-
-
+
+
In Progress
+
+
+
Completed
+
-
+
+
+
\ No newline at end of file
diff --git a/script.js b/script.js
index fae4490..5287ddf 100644
--- a/script.js
+++ b/script.js
@@ -1,47 +1,125 @@
const todos = document.querySelectorAll(".todo");
-const allStatus = document.querySelectorAll(".status");
+const all_status = document.querySelectorAll(".status");
let draggableTodo = null;
-
-todos.forEach((td)=>{
- td.addEventListener("dragstart", StartMove);
- td.addEventListener("dragend", StopMove);
+todos.forEach((todo) => {
+ todo.addEventListener("dragstart", dragStart);
+ todo.addEventListener("dragend", dragEnd);
});
-function StartMove(){
+function dragStart() {
draggableTodo = this;
- // console.log("drag start");
-
+ setTimeout(() => {
+ this.style.display = "none";
+ }, 0);
+ console.log("dragStart");
}
-function StopMove(){
+
+function dragEnd() {
draggableTodo = null;
- // console.log("drag stop");
-
+ setTimeout(() => {
+ this.style.display = "block";
+ }, 0);
+ console.log("dragEnd");
}
-allStatus.forEach((stat)=>{
- stat.addEventListener("dragover", MoveOver);
- stat.addEventListener("dragenter", MoveEnter);
- stat.addEventListener("dragleave", MoveLeave);
- stat.addEventListener("drop", Dropped);
+all_status.forEach((status) => {
+ status.addEventListener("dragover", dragOver);
+ status.addEventListener("dragenter", dragEnter);
+ status.addEventListener("dragleave", dragLeave);
+ status.addEventListener("drop", dragDrop);
});
-function MoveOver(e){
+function dragOver(e) {
e.preventDefault();
- // console.log("drag over");
-
+ // console.log("dragOver");
}
-function MoveEnter(){
- this.style.border = "2px dashed #ccc";
- console.log("drag enter");
-
+
+function dragEnter() {
+ this.style.border = "1px dashed #ccc";
+ console.log("dragEnter");
}
-function MoveLeave(){
- console.log("drag leave");
-
+
+function dragLeave() {
+ this.style.border = "none";
+ console.log("dragLeave");
}
-function Dropped(){
+
+function dragDrop() {
+ this.style.border = "none";
this.appendChild(draggableTodo);
console.log("dropped");
-
-}
\ No newline at end of file
+}
+
+/* modal */
+const btns = document.querySelectorAll("[data-target-modal]");
+const close_modals = document.querySelectorAll(".close-modal");
+const overlay = document.getElementById("overlay");
+
+btns.forEach((btn) => {
+ btn.addEventListener("click", () => {
+ document.querySelector(btn.dataset.targetModal).classList.add("active");
+ overlay.classList.add("active");
+ });
+});
+
+close_modals.forEach((btn) => {
+ btn.addEventListener("click", () => {
+ const modal = btn.closest(".modal");
+ modal.classList.remove("active");
+ overlay.classList.remove("active");
+ });
+});
+
+window.onclick = (event) => {
+ if (event.target == overlay) {
+ const modals = document.querySelectorAll(".modal");
+ modals.forEach((modal) => modal.classList.remove("active"));
+ overlay.classList.remove("active");
+ }
+};
+
+/* create todo */
+const todo_submit = document.getElementById("todo_submit");
+
+todo_submit.addEventListener("click", createTodo);
+
+function createTodo() {
+ const todo_div = document.createElement("div");
+ const input_val = document.getElementById("todo_input").value;
+ const txt = document.createTextNode(input_val);
+
+ todo_div.appendChild(txt);
+ todo_div.classList.add("todo");
+ todo_div.setAttribute("draggable", "true");
+
+ /* create span */
+ const span = document.createElement("span");
+ const span_txt = document.createTextNode("\u00D7");
+ span.classList.add("close");
+ span.appendChild(span_txt);
+
+ todo_div.appendChild(span);
+
+ no_status.appendChild(todo_div);
+
+ span.addEventListener("click", () => {
+ span.parentElement.style.display = "none";
+ });
+ // console.log(todo_div);
+
+ todo_div.addEventListener("dragstart", dragStart);
+ todo_div.addEventListener("dragend", dragEnd);
+
+ document.getElementById("todo_input").value = "";
+ todo_form.classList.remove("active");
+ overlay.classList.remove("active");
+}
+
+const close_btns = document.querySelectorAll(".close");
+
+close_btns.forEach((btn) => {
+ btn.addEventListener("click", () => {
+ btn.parentElement.style.display = "none";
+ });
+});
\ No newline at end of file
diff --git a/style.css b/style.css
index fc78029..a1b2fa0 100644
--- a/style.css
+++ b/style.css
@@ -1,128 +1,301 @@
-*{
+* {
box-sizing: border-box;
+ -ms-overflow-style: none;
+ /* Hides the scrollbar in IE and Edge */
+ scrollbar-width: none;
+ /* Hides the scrollbar in Firefox */
+
}
-:root{
- --bg:rgb(255, 255, 255);
+
+:root {
+ --bg: #ffffff;
+ --bg-2: #b3b3b3;
+ --bg-3: #cecece6b;
+ --bg-4: #f3f3f3b7;
--bg-color: gainsboro;
- --bg-color-alt:#30475E;
+ --bg-color-alt: #30475E;
+ --bg-color-alt-2: #16304d81;
--text-color: #222831;
- --text-color-alt:#DDDDDD;
- --second-color:#F05454;
- --third-color:#8FE3CF;
- --third-color:#5C8374;
+ --text-color-alt: #DDDDDD;
+ --second-color: #F05454;
+ --third-color: #8FE3CF;
+ --third-color: #5C8374;
--shadow: 6px 3px 5px #ffffff;
+ --shadow-2: 6px 3px 5px #979797;
+ --shadow-3: #0f0f0f1a 0px 0px 0px 1px, #0f0f0f1a 0px 2px 4px;
+}
+
+*::-webkit-scrollbar {
+ display: none;
}
-body{
+
+body {
font-family: "Overpass Mono", "IBM Plex Mono", JetBrains Mono, "Slabo13px-Regular", 'Courier New', "Cascadia Code", Consolas, "Inconsolata", Fira Code, monospace;
-
+ min-height: 100vh;
+ background-image: url(img/bgimg1.jpg);
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
-.title{
+.appTitle {
+ /* font-size: xx-large; */
+ color: var(--second-color);
+ background-color: var(--bg-color-alt-2);
+
+ position: absolute;
+ top: 2%;
+ left: 50%;
+ transform: translateX(-50%);
+ border-radius: 12px;
+ padding: 10px;
font-weight: bolder;
- font-size: xx-large;
+ font-size: 36px;
text-align: center;
-
- font-family: 'Courier New', Courier, monospace;
- background-color: var(--second-color);
- color: var(--bg-color-alt);
- border-radius: 10px;
-
}
-.board{
- display: flex;
- min-height: 100vh;
- justify-content: center;
- align-items: center;
-}
-.todoContainer{
- width: 100%;
- height: 100vh;
+.todo-container {
+ /* width: 1000px; */
+ width: 90%;
+ height: 80vh;
display: flex;
- /* justify-content: space-between; */
- /* border: var(--second-color) 1px solid; */
- /* border-radius: 12px; */
-
+ border-radius: 10px;
}
-.status{
+.status {
width: 25%;
- margin: 5px;
+ background-color: var(--bg-4);
position: relative;
- padding: 60px 1rem 0.5rem;
- background-color: var(--bg-color);
+ padding: 30px .2rem 0.5rem;
border-radius: 10px;
- position: relative;
- border: .5px solid var(--third-color);
-
-
+ margin: 5px;
}
-.status:nth-child(even){
- background-color: var(--bg);
+.status:nth-child(even) {
+ /* background-color: #cecece6b; */
+ background-color: var(--bg-3);
}
-.status h1{
+.status h1 {
position: absolute;
- margin: -1px 0px 0px 0px;
- padding: 5px 5px;
top: 0;
left: 0;
+ /* background-color: #343434; */
+ background-color: var(--bg-color-alt);
+ color: #f3f3f3;
+ margin: 0;
width: 100%;
- font-size: larger;
- font-size: 24px;
+ padding: 5px 5px;
+ font-size: 20px;
text-align: center;
- background-color: var(--bg-color-alt);
- color: var(--text-color-alt);
+
border-radius: 10px;
+
}
-#addBtn{
- /* position: relative; */
- padding: .5rem 3rem;
+#add_btn {
+ padding: 0.5rem 1rem;
+ background-color: #ccc;
outline: none;
- /* border: none; */
+ border: none;
width: 100%;
- background-color: var(--bg-color);
- box-shadow: var(--shadow);
- border-radius: 5px;
- font-size: larger;
- font-weight: bold;
+ font-size: 16px;
+ margin: 0.5rem 0;
+ border-radius: 4px;
cursor: pointer;
-
}
-#addBtn:hover{
+#add_btn:hover {
+ /* background-color: #aaa; */
background-color: var(--third-color);
}
-.todo{
- /* position: relative; */
- margin: 10px 0;
- padding: .5rem .5rem;
- outline: none;
- /* border: none; */
- width: 100%;
+.todo {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ position: relative;
+ /* background-color: #fff; */
background-color: var(--bg-color-alt);
color: var(--text-color-alt);
- box-shadow: var(--shadow);
- border-radius: 5px;
- font-size: larger;
- font-weight: bold;
- cursor: pointer;
+ box-shadow: var(--shadow-3);
+ border-radius: 4px;
+ padding: 0.5rem 1rem;
+ font-size: 16px;
+ margin: 0.5rem 0;
}
-.todo .close{
- font-size:x-large;
+.todo .close {
position: absolute;
- right: 30px;
+ right: 1rem;
+ top: 0;
+ font-size: xx-large;
+ color: #ccc;
+ cursor: pointer;
+}
+
+.todo .close:hover {
+ /* color: #343444; */
+ color: var(--second-color);
+}
+
+/* modal */
+
+.close-modal {
+ background: none;
+ border: none;
+ font-size: 18px;
+ font-weight: bolder;
cursor: pointer;
-
}
-.todo .close:hover{
+.close-modal:hover {
+ /* color: #343444; */
color: var(--second-color);
+}
+
+.modal {
+ width: 450px;
+ position: fixed;
+ top: -50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ transition: top 0.3s ease-in-out;
+ border: 1px solid #ccc;
+ border-radius: 10px;
+ z-index: 2;
+ background-color: #fff;
+}
+
+.modal.active {
+ top: 15%;
+}
+
+.modal .header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-bottom: 1px solid #ccc;
+ padding: 10px;
+ font-size: 18px;
+ font-weight: bolder;
+ background-color: rgba(0, 0, 0, 0.05);
+}
+
+.modal .body {
+ padding: 1rem;
+}
+
+#overlay {
+ display: none;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.3);
+}
+
+#overlay.active {
+ display: block;
+}
+
+#todo_input,
+#todo_submit {
+ padding: 0.5rem 1rem;
+ width: 100%;
+ border: #222831 1px solid;
+ margin: 0.25rem;
+}
+
+#todo_submit {
+ background-color: #264927;
+ color: #f3f3f3;
+ font-size: 1rem;
+ border: none;
+ cursor: pointer;
+}
+
+#todo_submit:hover {
+ background-color: #4caf50;
+ color: #f3f3f3;
+ font-size: 1rem;
+ /* border: none; */
+}
+
+/* For mobile phones: */
+@media only screen and (max-width: 710px) {
+ body {
+ /* font-size: 16px; */
+ }
+
+ .appTitle {
+ font-size: 16px;
+ /* Adjusted for smaller size */
+ font-weight: 100;
+ max-height: 10%;
+ overflow: auto;
+ }
+
+ .todo-container {
+ font-size: 16px;
+
+ flex-direction: column;
+ }
+
+ .status {
+ font-size: 16px;
+
+ width: 100%;
+ }
+
+ .status h1 {
+ font-size: 16px;
+ }
+
+ .todo {
+ font-size: 16px;
+
+ flex-direction: column;
+ text-align: center;
+ }
+
+ .todo .close {
+ font-size: 16px;
+
+ position: static;
+ margin-top: 0.5rem;
+ }
+
+ .modal {
+ font-size: 16px;
+
+ width: 100%;
+ }
+
+ #todo_input,
+ #todo_submit {
+ font-size: 16px;
+
+ width: 100%;
+ }
+
+ #overlay {
+ font-size: 16px;
+
+ display: none;
+ }
+}
+
+/* For tablets: */
+@media only screen and (min-width: 601px) and (max-width: 768px) {
+ /* Add tablet styles here */
+}
+
+/* For desktops: */
+@media only screen and (min-width: 769px) {
+ /* Add desktop styles here */
}
\ No newline at end of file