I am using node.js as the backend and using Axios as a frontend to handle input and output to show to do list in the sidebar but i cant validate if (input.value !== ” ) i don’t want only to show the check box in my side div also please help how i can delete to-do list after clicking the checkbox.
backend node/express :-
const express = require('express');
const cors = require('cors')
const app = express();
const path = require('path');
var arrs =[];
app.use(cors())
app.use(express.static('./font end'))
app.use(express.urlencoded({extended:false}))
app.get('/response',(req,res)=>{
res.status(200).json({arrs});
})
app.post('/response',(req,res)=>{
const {datas,id} = req.body;
let items = {datas,id}
arrs.push(items)
console.log(arrs)
res.status(200).sendFile(path.resolve(__dirname,'./font end/index.html'))
})
app.delete('/response',(req,res)=>{
const {id} = req.body;
arrs=arrs.filter((e)=>e.id !== id)
res.send(arrs)
})
app.listen(5000,()=>{
console.log('server is listening');
})
font end code :-
const show = document.querySelector('.sidebar');
const inp =document.querySelector('#datas');
const button = document.querySelector('#main-submit');
button.addEventListener('click',(e)=>{
})
const jappy = async ()=>{
try{
let {data} = await axios.get('http://localhost:5000/response');
let rez = data.arrs.map((ak)=>{
return `<div class="task"><span>${ak.datas}</span><input type="checkbox" id="checkit"></div>`;
})
show.innerHTML=rez.join('');
}
catch(err){
console.log(err);
}}
jappy();
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap');
*,::before,::after{
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root{
--input-width : 300px;
--input-color:#f5f5f5;
}
body{
font-family: 'poppins';
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: 300px 300px;
}
.sidebar{
grid-row: 1/3;
}
.task{
margin-top: 10%;
display: flex;
justify-content: center;
font-family: 'poppins';
font-weight: bold;
font-size: 18px;
padding: 5px;
}
#checkit{
width: 1.6rem;
margin-left: 7px;
cursor: pointer;
}
.task>button{
margin-left: 10px;
height: 30px;
width: 30px;
border-radius: 50%;
border: none;
box-shadow: none;
cursor: pointer;
}
.task>button:hover{
box-shadow: 0px 2px 2px 0px rgb(146, 146, 146);
}
.main{
margin-left: 200px;
}
form{
display: inline-flex;
margin-top: 10%;
margin-left: 10%;
width: 350px;
height: 350px;
gap: 17px;
flex-direction: column;
justify-content: space-evenly;
border-radius: 10%;
border: 1px solid #D9D9D9;
box-shadow:0px 10px 20px 0px rgba(131, 131, 131, 0.25);
padding: 25px;
}
#datas{
width: var(--input-width);
margin-top: 10px;
height: 35px;
padding: 10px;
display: flex;
border: none;
background-color:var(--input-color);
outline: none;
}
#ids{
width: var(--input-width);
margin-top: 10px;
height: 35px;
padding: 10px;
display: flex;
border: none;
background-color:var(--input-color);
outline: none;
}
#main-submit{
width: 100px;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
border-radius: 30px;
background-color: #08C475;;
border: none;
cursor: pointer;
}
#main-submit:hover{
box-shadow:0px 3px 3px 0px rgba(158, 158, 158, 0.45);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To do app</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="sidebar">
<div class="task">
</div>
</div>
<div class="main">
<form action="/response" method="post">
<h1>TO DO app</h1>
<div id="data">
<label for="datas"><h3>item name</h3></label>
<input type="text" name="datas" id="datas" placeholder="type data">
</div>
<div id="submit">
<button type="submit" id="main-submit">click me</button>
</div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="./script.js"></script>
</body>
</html>
I tried using (input.value.trim()) in the submit button also but value blinks for moment in the side div bar and disappear
I also used delete in the backend that uses IDs but how can I adjust so i can only delete value of to do list after clicking input checkbox
