Created
August 20, 2022 11:42
-
-
Save Tribhuwan-Joshi/ce2e623f194656dcfaf556934b6bc783 to your computer and use it in GitHub Desktop.
files for TODO app
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const format = require('date-fns/format'); | |
const containerAddTask = document.querySelector('.container-addTask'); | |
function renderTask(taskName, taskNote, priorityValue, dueDate) { | |
const newTask = document.createElement('div'); | |
let priorityColor; | |
if (priorityValue === 'high') { | |
priorityColor = 'red'; | |
} | |
else if (priorityValue === 'medium') { | |
priorityColor = 'blue'; | |
} | |
else { | |
priorityColor = 'green'; | |
} | |
newTask.classList.add('task', 'w-90', 'gap-4', 'mt-3', 'flex', 'items-center', 'mx-2'); | |
newTask.innerHTML = `<div class="checkbox"> <input type="checkbox" name="done" id=""></div> | |
<div | |
class="task w-full h-full p-2 text-lg flex border-l-[6px] border-${priorityColor}-600 bg-yellow-100 justify-between rounded-md cursor-pointer "> | |
<div class="task-name">${taskName}</div> | |
<div class="notes text-sm flex w-max items-center">${taskNote}</div> | |
<div class="dueData text-sm flex items-center">${format(dueDate, 'dd MMM yyyy')}</div> | |
</div> | |
<img src="" alt="edit" class="h-[20px] edit-btn hover:cursor-pointer hover:mb-1"></img> | |
` | |
containerAddTask.parentNode.insertBefore(newTask, containerAddTask); | |
} | |
export { renderTask }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import './style.css' | |
import { renderTask } from './domManipulation.js'; | |
import Icon from './imgs/icon.png' | |
import logo from './imgs/todologo.png' | |
import home from "../src/imgs/home.png" | |
import today from "../src/imgs/today.png" | |
import week from "../src/imgs/week.png" | |
import add from "../src/imgs/add.png" | |
import edit from "../src/imgs/edit.png" | |
import projectIcon from './imgs/project.png' | |
import addTaskIcon from './imgs/add2.png'; | |
const homeImg = document.querySelector('.home-img'); | |
const todayImg = document.querySelector('.today-img'); | |
const weekImg = document.querySelector('.week-img'); | |
const projectImg = document.querySelector('.project'); | |
const editBtn = document.querySelector('.edit-btn'); | |
const projectLogo = document.querySelector('.project-icon'); | |
const addtaskAdd = document.querySelector('.add-task-icon'); | |
const linkIcon = document.querySelector('link[rel="icon"]') | |
linkIcon.href = Icon | |
const Logo = document.querySelector('div img.logo'); | |
Logo.src = logo; | |
homeImg.src = home; | |
todayImg.src = today; | |
weekImg.src = week; | |
projectImg.src = add; | |
projectLogo.src = projectIcon; | |
editBtn.src = edit; | |
addtaskAdd.src = addTaskIcon; | |
// addTask | |
const addTask = document.querySelector('.addTask'); | |
const projects = document.querySelector('.all-projects'); | |
const pageName = document.querySelector('.page-name'); | |
const containerAdd = document.querySelector('.container-addTask'); | |
// form data | |
const taskName = document.querySelector('.container-addTask input#task-name'); | |
const taskNote = document.querySelector('.container-addTask input#task-note'); | |
const priority = document.querySelectorAll('.container-addTask input[name="priority"]'); | |
const dueDate = document.querySelector('.container-addTask input#due-date'); | |
// cancel button | |
const cancelBtn = document.querySelector('.container-addTask .cancel-btn'); | |
cancelBtn.addEventListener('click', hideModal); | |
// add button | |
const addBtn = document.querySelector('.container-addTask .add-btn'); | |
addBtn.addEventListener('click', addnewTask); | |
addTask.addEventListener('click', showModal); | |
function showModal() { | |
containerAdd.style.display = 'flex'; | |
} | |
let priorityValue; | |
function addnewTask() { | |
for (const i of priority) { | |
if (i.checked) { | |
priorityValue = i.value; | |
} | |
} | |
if (!(taskName.value && taskNote.value && priorityValue && dueDate.value)) { | |
alert('Please fill all fields'); | |
} | |
else { | |
renderTask(taskName.value, taskNote.value, priorityValue, dueDate.value); | |
containerAdd.style.display = 'none'; | |
taskName.value = ''; | |
taskNote.value = ''; | |
dueDate.value = ''; | |
} | |
} | |
function hideModal() { | |
containerAdd.style.display = 'none'; | |
taskName.value = ''; | |
taskNote.value = ''; | |
dueDate.value = ''; | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment