To do app

AbdulMoiz-Ali · May 24, 2024 · caf5b47 · caf5b47
commit caf5b47
Show file tree

Hide file tree

Showing 4 changed files with 250 additions and 0 deletions.
diff --git a/app.js b/app.js
@@ -0,0 +1,104 @@
+let input;
+let editInputField;
+let paradiv;
+let editButton;
+let doblesaver;
+function btnmain() {
+    input = document.getElementById('maininp').value;
+    if (input === " " || input.length <= 1) {
+        alert("Please enter a task to add to list");
+        return;
+    }
+    // console.log(input.value)
+    let todoListContainer = document.getElementById("listbox");
+
+    // Task List Item 
+    let creatdiv = document.createElement('div');
+    creatdiv.className = 'creatdiv'
+
+    // creatdiv.innerText = input;
+    todoListContainer.appendChild(creatdiv);
+
+    //outputdiv
+    let outputdiv = document.createElement('div');
+    outputdiv.setAttribute("id", "outputdivbar");
+    creatdiv.appendChild(outputdiv);
+
+
+    // //inputdiv
+    // let inputdiv = document.createElement('inp');
+    // inputdiv.setAttribute("id", "inputdiv");
+    // inputdiv.value = input;
+    // outputdiv.appendChild(inputdiv);
+
+    //paradiv
+    paradiv = document.createElement('p');
+    paradiv.innerText = input;
+    paradiv.setAttribute("id", "paradiv");
+    outputdiv.appendChild(paradiv);
+
+    //outputbtndiv
+    let outputbtndiv = document.createElement('div');
+    outputbtndiv.setAttribute("id", "outputbtndiv");
+    creatdiv.appendChild(outputbtndiv);
+
+    // Edit Button 
+    editButton = document.createElement("button");
+    editButton.innerHTML = `<i class="fa-solid fa-pen"></i>`;
+    editButton.setAttribute("id", "edit-button");
+    editButton.setAttribute("onclick", "editTask(this)");
+    outputbtndiv.appendChild(editButton);
+
+    // Delete Button 
+    let deleteButton = document.createElement("button");
+    deleteButton.innerHTML = `<i class="fa-solid fa-trash"></i>`;
+    deleteButton.setAttribute("id", "delete-button");
+    deleteButton.setAttribute("onclick", "deleteTask(this)");
+    outputbtndiv.appendChild(deleteButton);
+    input.value = " ";
+    console.log(input.value);
+
+    // Edit Input 
+    editInputField = document.createElement("input");
+    editInputField.setAttribute("id", "editTaskInput");
+    editInputField.value = input;
+    outputdiv.appendChild(editInputField);
+    console.log(editInputField.parentElement);
+    editInputField.style.display = 'none';
+
+
+}
+function editTask(element) {
+    // let paraEditParentElement = document.getElementById('outputdivbar');
+    // console.log(paraEditParentElement);
+    editInputField.style.display = 'flex';
+    paradiv.style.display = 'none';
+    editButton.style.display = 'none';
+    // let edittaskbtn = paraEditParentElement.children[0];
+    let khan = element.parentElement;
+    // console.log(khan);
+    // edittaskbtn.style.display = 'flex';
+    let ali = khan.children[2];
+    // edittaskbtnnone.style.display = 'none';
+    doblesaver = document.createElement("button");
+    doblesaver.innerHTML = `save`;
+    doblesaver.setAttribute("id", "doble-button");
+    doblesaver.setAttribute("onclick", "doblesave(this)");
+    khan.appendChild(doblesaver);
+
+}
+function deleteTask(element) {
+    var parentElement = element.parentElement.parentElement;
+    parentElement.style.display = "none";
+}
+var moiz;
+function doblesave(element) {
+    let saver = document.getElementById('editTaskInput').value;
+    var paradivsave = document.getElementById('paradiv');
+    paradivsave.innerHTML = saver;
+    doblesaver.style.display = "none";
+    paradivsave.style.display = "flex";
+    moiz = document.getElementById('editTaskInput');
+    moiz.style.display = 'none';
+    editButton.style.display = 'block';
+}
diff --git a/dahlia-flower-blue-flower-black-background-amoled-5k-5120x2880-8534.jpg b/dahlia-flower-blue-flower-black-background-amoled-5k-5120x2880-8534.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./style.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
+      integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+    <title>To Do App</title>
+  </head>
+  <body>
+    <div id="foam" class="foam">
+      <div class="login"><h1>TO DO App</h1></div>
+      <div class="input">
+        <input
+          class="name"
+          type="text"
+          name="User name"
+          placeholder="Task name"
+          id="maininp"
+        />
+      </div>
+      <!-- <div class="input">
+        <input
+          class="pass"
+          type="password"
+          name="password"
+          placeholder="password"
+        />
+      </div> -->
+      <!-- <div class="foorter-foam">
+        <div class="cheakbox"><input type="checkbox" />Remember me</div>
+        <div class="foget"><a href="#">Forget password?</a></div>
+      </div> -->
+      <div onclick="btnmain()" class="button"><button>Save Her</button></div>
+      <div id="listbox"></div>
+      <!-- <div class="link">Don't have an account?<a href="#">Rigister</a></div> -->
+    </div>
+
+    <script src="./app.js"></script>
+  </body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,99 @@
+* {
+  box-sizing: border-box;
+  margin: 0px;
+  padding: 0px;
+}
+body {
+  background-image: url(./dahlia-flower-blue-flower-black-background-amoled-5k-5120x2880-8534.jpg);
+  background-size: cover;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  text-align: center;
+  min-height: 100vh;
+}
+.foam {
+  background-color: transparent;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  flex-wrap: wrap;
+  border-radius: 15px;
+  width: fit-content;
+  border: 1px solid silver;
+  width: 420px;
+  gap: 20px;
+  padding: 30px 40px;
+  color: #fff;
+  backdrop-filter: blur(6px);
+  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+}
+.foorter-foam {
+  display: flex;
+  justify-content: space-between;
+}
+.name,
+.pass {
+  background-color: transparent;
+  width: 100%;
+  height: 100%;
+  outline: none;
+  border-radius: 40px;
+  font-size: 16px;
+  color: #fff;
+  padding: 20px 45px 20px 20px;
+}
+.input {
+  width: 100%;
+  height: 50px;
+  border-radius: 40px;
+}
+h1 {
+  font-size: 36px;
+}
+input::placeholder {
+  color: #fff;
+}
+.foorter-foam {
+  gap: 100px;
+}
+.button {
+  width: 100%;
+  height: 45px;
+  background-color: #fff;
+  border-radius: 40px;
+  outline: none;
+  border: none;
+  cursor: pointer;
+}
+button {
+  width: 100%;
+  height: 100%;
+  /* background-image: url(39619.jpg); */
+  background-color: blue;
+  background-size: cover;
+  outline: none;
+  border: none;
+  border-radius: 40px;
+  font-size: 16px;
+  font-weight: 900;
+  cursor: pointer;
+  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+}
+.link {
+  font-size: 16px;
+  font-weight: 700;
+}
+a {
+  text-decoration: none;
+  color: #fff;
+}
+a:hover {
+  color: red;
+  font-weight: 600;
+}
+button:hover {
+  transform: scale(1.1);
+}