Todo List Part1

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="
https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css
" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<style>
    .cursor{
        cursor: pointer;
    }
</style>
</head>
<body>
   

    <div class="d-flex justify-content-center align-items-center hh-100">
        <div class="col-12 col-lg-4 card p-2 m-2">

            <!-- =============================Input========================== -->
            <div>
                <div class="col-auto">
                    <div class="input-group mb-2">
                      <input type="text" id="task" class="form-control" id="inlineFormInputGroup" placeholder="Enter Task Name">
                      <div class="input-group-prepend cursor">
                        <div id="add" class="input-group-text">Add</div>
                      </div>
                    </div>
                  </div>
            </div>
            <!-- =============================Input========================== -->
             <h1 class="h6">Task List</h1>
             
             <div id="List" class="p-2">


            <table>
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
                <tbody id="tab">
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>

                </tbody>
            </table>
             
        </div>
    </div>
   
</body>

<script>

let TaskArray=[];
let task=document.getElementById('task');
let add=document.getElementById('add');
let list=document.getElementById('List');



//=================Add============
add.onclick=()=>{
    if(task.value!=""){

        TaskArray.push({
            "Task":task.value,
            "Status":"NotDone"
        });
        Display();
        task.value="";
    }
}


function Display(){

    list.innerHTML="";
    TaskArray.forEach((item,index)=>{
        list.innerHTML=list.innerHTML+ListTemplet(item,index);
    });
}


//===================================
function ListTemplet(item,index){

    return `
        <div class="row align-items-center ${item.Status===`Done`?`bg-success`:``} ">
                    <div class="col-lg-6 d-block">
                    ${index+1}. ${item.Task}
                    </div>
                    <div class="col-lg-6 d-block text-end">
                        <button onClick="Delete(${index});" class="btn btn-danger"><i class="bi bi-trash3"></i></button>
                        <button class="btn btn-primary"><i class="bi bi-pencil-square"></i></button>
                        <button onClick="Update(${index});" class="btn btn-primary">${item.Status===`Done`?`<i class="bi bi-x-lg"></i>`:`<i class="bi bi-check2"></i>`}</button>
                    </div>
                </div>
    `;
}


function Delete(index){
    TaskArray.splice(index,1);
    Display();
}

function Update(index){

    if(TaskArray[index].Status==="NotDone"){
        TaskArray[index].Status="Done";
    }else{
    TaskArray[index].Status="NotDone";
    }
    Display();
}


</script>

</html>

Comments

Post a Comment

Popular posts from this blog

App 1st User Define Component

  import logo from './logo.svg' ; import './App.css' ; import React from "react" ; function App () { let products=[ 1 , 2 , 3 , 4 , 5 , 6 ] ; return <> <h1> Sabirs </h1> { products. map ((item)=>( <ProdoctCard src = {item} /> )) } </> ; } export default App ; function ProdoctCard ({src}) { return <img src = { `./img/ ${src} .webp` } /> ; }
Read more

Example 1

 //====================Component A================== import React , { useState } from "react" ; import B from "./B" ; export default function () { const [name , setName]= useState ( null ) ; return ( <div> <h1> A component </h1> <input value = {name} onChange = {(event)=>setName(event. target . value )} placeholder = { 'Please input name' } /> <h1> {name} </h1> <hr/> <B a = {name} setA = {setName} /> </div> ) }  //====================Component B================== export default function (obj) { //{a,setA} return ( <div> <h1> B component </h1> <input value = {obj. a } onChange = {(event)=>obj. setA (event. target . value )} placeholder = { 'Please input name' } /> <h1> {obj. a } </h1> <hr/> </div> ) }
Read more

Rabiit

Image
   ///==========================Css============== . box-pos { position : relative ; height : 200 px ; backgroundColor : "#e9ecef" ; } . rabit { position : absolute ; bottom : 19 px ; } . start-game-panel { background : #000000bf ; position : absolute ; top : 0 px ; bottom : - 13 px ; right : 0 px ; left : 0 px ; display : flex ; justify-content : center ; align-items : center ; } . img-d { width : 400 px ; } ====================React JS Componant================= import React , { useState , useRef } from "react" ; import "bootstrap/dist/css/bootstrap.min.css" ; import "./rabit.css" ; import "./test.css" ; //============Main Componant export function TestGame () { const [isGameOver , setIsGameOver]= useState ( false ) ; const [isGameStart , setIsGameStart]= useState ( false ) ; const [rabitPos , setRabitPos]= useState ( 0 ) ; const [score , setScore]= useState (...
Read more