How To Extract Text From PDF Using JavaScript | PDF To Text Extractor

Source Code to extract text from pdf documents.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PDF to Text Extractor</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js" integrity="sha512-ml/QKfG3+Yes6TwOzQb7aCNtJF4PUyha6R3w8pSTo/VJSywl7ZreYvvtUso7fKevpsI+pYVVwnu82YO0q3V6eg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <style>
        h1{
            width: 100%;
            text-align: center;
        }
        .pdfwork,.afterupload{
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction:column;
            width: 100%;
        }
        .pdfwork *{
            margin-top: 5px;
        }
        .afterupload{
            display: none;
        }
        .another{
            display: none;
        }
    </style>
</head>
<body>
    <h1>PDF To Text Extractor</h1>
    <div class="pdfwork">
        <button class="another" onclick="location.reload()">Extract Another PDF</button>
        <span>Select PDF</span>
        <input type="file" class="selectpdf">
        <span>Password :</span>
        <input type="password" class="pwd" placeholder='optional'>
        <button class="upload">Upload</button>
        <div class="afterupload">
            <span>Select Page</span>
            <select class="selectpage" onchange="afterProcess()"></select>
            <a href="" class="download" download>Download Pdf Text</a>
            <textarea class="pdftext"></textarea>
        </div>
    </div>
    <script>
        pdfjsLib.GlobalWorkerOptions.workerSrc="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.worker.min.js";
        let pdfinput = document.querySelector(".selectpdf");
        let pwd = document.querySelector(".pwd");
        let upload = document.querySelector(".upload");
        let afterupload = document.querySelector(".afterupload");
        let select = document.querySelector("select");
        let download = document.querySelector(".download");
        let pdftext = document.querySelector(".pdftext");
        upload.addEventListener('click',()=>{
            let file = pdfinput.files[0];
            if(file!=undefined&&file.type=="application/pdf"){
                let fr = new FileReader();
                fr.readAsDataURL(file)
                fr.onload=()=>{
                    let res = fr.result;
                    if(pwd.value==""){
                        extractText(res,false)
                    }else{
                        extractText(res,true)
                    }
                }
            }else{
                alert("select a valid pdf file")
            }
        })
        let alltext = [];
        async function extractText(url,pass) {
          try{
            let pdf;
            if(pass){
                pdf = await pdfjsLib.getDocument({url:url,password:pwd.value}).promise;
            }else{
                pdf = await pdfjsLib.getDocument(url).promise;
            }
            let pages = pdf.numPages;
            for(let i=1;i<=pages;i++){
                let page = await pdf.getPage(i)
                let txt = await page.getTextContent();
                let text = txt.items.map((s)=>s.str).join("");
                alltext.push(text)
            }
            alltext.map((e,i)=>{
                select.innerHTML+=`
                <option value="${i+1}">${i+1}</option>
                `;
            })
            afterProcess()
          }catch(err){
            alert(err.message)
          }
        }

        function afterProcess(){
            pdftext.value=alltext[select.value-1];
            download.href="data:text/plain;charset=utf-8,"+encodeURIComponent(alltext[select.value-1])
            afterupload.style.display="flex";
            document.querySelector(".another").style.display="unset";
        }
    </script>
</body>
</html>

Javascript CRUD APP Using Google Sheet as a Database | Appscript Crud app

HTML, CSS, JavaScript code for Crud App Using Google Sheet as a Database


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .edit,.delete{
            background-color:red;
            cursor: pointer;
            color:white;
            padding: 3px;
            border-radius:5px;
        }
        .update{
            display: none;
        }
    </style>
</head>
<body>
    <form>
        <input type="text"class="todo"placeholder='Todo..'>
        <button class="add"type="button" onclick="addData()">Add Todo</button>
        <button class="update"type="button">Update Todo</button>
    </form>
    <table>
        <thead>
            <tr>
                <th>Id</th>
                <th>Todo</th>
                <th>Update</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <script>
        let api = "YOUR_API_URL_HERE";
        let form = document.querySelector("form");
        let add = document.querySelector(".add");
        let update = document.querySelector(".update");
        let tbody = document.querySelector("tbody");
        function addData() {
            add.textContent="Adding.."
            let obj = {
                todo:form[0].value
            }
            fetch(api,{
                method:"POST",
                body:JSON.stringify(obj)
            })
              .then(res => res.text())
              .then(data => {
                readData()
                alert(data)
                add.textContent="Add Todo"
                form.reset();
              });
        }

        function readData(){
            fetch(api)
            .then(res=>res.json())
            .then(data=>{
                let todo = data.todo;
                let trtd = todo.map(each=>{
                    return `
                    <tr>
                    <td class="id">${each[0]}</td>    
                    <td class="data">${each[1]}</td>
                    <td class="edit"onclick="updateCall(this,${each[0]})">Edit</td>    
                    <td class="delete"onclick="delData(${each[0]})">Delete</td>    
                    </tr>
                    
                    `
                })
                tbody.innerHTML=trtd.join("");
            })
        }
        readData()
        function delData(id){
            fetch(api+`?del=true&id=${id}`)
            .then(res=>res.text())
            .then(data=>{
                readData()
                alert(data)
            })
        }
        function updateCall(elm,id){
            add.style.display="none"
            update.style.display="unset"
            let todo = elm.parentElement.querySelector(".data").textContent;
            form[0].value=todo;
            update.setAttribute("onclick",`updateData(${id})`)
        }
        function updateData(id){
            update.textContent="Updating.."
            fetch(api+`?update=true&id=${id}&data=${form[0].value}`)
            .then(res=>res.text())
            .then(data=>{
                readData()
                alert(data)
                form.reset()
            update.textContent="Update Todo"
            add.style.display="unset"
            update.style.display="none"
            })
        }
    </script>
</body>
</html>

Appscript Code For CRUD APP using Google Sheet as a Database



const app = SpreadsheetApp.openByUrl("Your_Spreadsheet_url_here");
const sheet = app.getSheetByName("Sheet1");
function doGet(req){
if(req.parameter.del){
sheet.deleteRow(req.parameter.id)
return ContentService.createTextOutput("Data Deleted!")
}else if(req.parameter.update){
  sheet.getRange(req.parameter.id,2).setValue(req.parameter.data);
  return ContentService.createTextOutput("Data Updated!")
}else{
  let data = sheet.getDataRange().getValues();
data.shift()
let obj = {
  todo:data
}
  return ContentService.createTextOutput(JSON.stringify(obj))
}
}
function doPost(req){
  let data = JSON.parse(req.postData.contents)
  sheet.appendRow(["=row()",data.todo])
  return ContentService.createTextOutput("Data Received!")
}

function test(){
  Logger.log(sheet.getDataRange().getValues())
}

How To Integrate ChatGPT with Google Sheet

Code For Appscript

Paste Below Code In AppScript and Run the run function and in google sheet column type the custom =Chat("Your Questions Here") formula and press Enter.


const apiKey = "YOUR_OPEN_AI_API_KEY_HERE";
function run(){
Chat("Hello")
}
function Chat(question){
  let payload = {
  "model": "text-davinci-003",
  "prompt": `${question}`,
  "temperature": 0.7,
  "max_tokens": 256,
  "top_p": 1,
  "frequency_penalty": 0,
  "presence_penalty": 0
}
let options = {
  "method":"post",
  "headers":{
    "Authorization":"Bearer "+apiKey,
    "Content-Type":"application/json"
  },
  "payload":JSON.stringify(payload)
}
let req = UrlFetchApp.fetch("https://api.openai.com/v1/completions",options)
let res = JSON.parse(req).choices[0].text;
return res;
}

Upload Image to Google Drive And Google Sheet From HTML File Input Element | JavaScript | AppScript

Upload Image to Google Drive And Google Sheet From HTML File Input Element | JavaScript | AppScript

Hello, in today's video i'll be showing you how to upload image in Google drive and Google sheet From HTML File Input Element.

AppScript Code


let app = SpreadsheetApp.openByUrl("Your_Google_Sheet_URL");
let sheet = app.getSheetByName("Your_Google_Sheet_Name");
function doPost(e){
try{
  let obj = JSON.parse(e.postData.contents);
  let dcode = Utilities.base64Decode(obj.base64);
  let blob = Utilities.newBlob(dcode,obj.type,obj.name);
  let newFile = DriveApp.createFile(blob);
  let link = newFile.setSharing(DriveApp.Access.ANYONE_WITH_LINK,DriveApp.Permission.VIEW).getDownloadUrl();
  let lr = sheet.getLastRow();
  sheet.getRange(lr+1,1).setFormula(`=IMAGE("${link}")`);
  return ContentService.createTextOutput("image uploaded")
}catch(err){
  return ContentService.createTextOutput(err)
}

}

Html JavaScript Code


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<input type="file"accept="image/*">
<img src="" alt="">
<script>
    let url = "Api_Endpoint_Url";
    let file = document.querySelector("input");
    let img = document.querySelector("img");
    file.addEventListener('change',()=>{
        let fr = new FileReader();
        fr.addEventListener('loadend',()=>{
            let res = fr.result;
            img.src=res;
            let spt = res.split("base64,")[1];
            // console.log(spt);
            let obj = {
                base64:spt,
                type:file.files[0].type,
                name:file.files[0].name
            }
            fetch(url,{
                method:"POST",
                body:JSON.stringify(obj)
            })
            .then(r=>r.text())
            .then(data=>console.log(data))

        })
        fr.readAsDataURL(file.files[0])
    })
</script>
</body>
</html>

Convert HTML CSS to PDF with JavaScript | HTML to PDF

Convert HTML CSS to PDF with JavaScript | HTML to PDF Hello, in this video i will show you how to convert HTML, CSS to PDF using JavaScript and HTML2PDF.js library.

Source Code to Convert HTML to PDF


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML to PDF</title>
    <style>
        .elem {
            background-color: darkCyan;
            color: white;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>

<body>
    <div class="elem">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi illo cumque ea velit, earum explicabo commodi ipsa voluptatem quidem dolores laborum eaque itaque nihil at eveniet similique fugit enim consequuntur, officia nostrum nemo! Nam voluptate corporis
        error aut nobis repellendus illo pariatur accusantium non quas dolores nihil dignissimos quam quisquam natus nostrum nesciunt officia temporibus doloremque, dolor iste! Aspernatur ad ratione perspiciatis sequi consequuntur aut nulla itaque consequatur.
        Aliquam fugit distinctio debitis deleniti, nisi nemo eius a, facilis dolorem tempora iusto laboriosam dicta beatae. Nisi, quisquam. Ducimus facere rerum veniam, reprehenderit labore expedita! Amet fuga, quia dicta excepturi iusto cumque.
    </div>
    <button class="download">Download PDF</button>
    <script>
        let div = document.querySelector(".elem");
        let btn = document.querySelector(".download");
        btn.addEventListener('click', () => {
            html2pdf().from(div).save()
        })
    </script>
</body>

</html>

Useful Links

Create a Working Contact Form Using HTML - CSS - JavaScript And AppScript | HTML Form to Email

Create a Working Contact Form Using HTML - CSS - JavaScript And AppScript. Hello, in today's video i will show you how to create a working contact form using HTML, CSS, JavaScript and AppScript.

HTML, CSS , JavaScript Code


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Form</title>
    <style>
        form {
            width: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
        
        form * {
            width: 100%;
            margin-top: 2px;
        }
    </style>
</head>

<body>
    <form>
        <h2>Contact Us</h2>
        <span class="message"></span>
        <input type="text" name="name" placeholder='Name..'>
        <input type="email" name="email" placeholder='Email..'>
        <textarea name="message" cols="30" rows="10" placeholder='Message..'></textarea>
        <input type="submit" class="submit">
    </form>
    <script>
        let url = "Api End point url";
        let form = document.querySelector("form");
        let submit = document.querySelector(".submit");
        let message = document.querySelector(".message");
        form.addEventListener('submit', (e) => {
            e.preventDefault();
            submit.value = "submitting.."
            fetch(url, {
                    method: "POST",
                    body: new FormData(form)
                })
                .then(res => res.text())
                .then(data => {
                    message.innerHTML = data;
                    submit.value = "submit"

                })
                .catch(err => {
                    message.innerHTML = err;
                    submit.value = "submit"
                })
        })
    </script>
</body>

</html>

AppsScript Code


let sheet = SpreadsheetApp.openByUrl("YOUR_SPREADSHEET_URL")
function doPost(e){
  MailApp.sendEmail("receipent email address",`${e.parameters.name} from new contact form!`,`${e.parameters.message}\n${e.parameters.email}`)
  return ContentService.createTextOutput("Message has been Sent!")
}

Useful Links

CRUD App Using HTML - CSS - JavaScript and IndexedDB API

CRUD App Using HTML - CSS - JavaScript and IndexedDB API

Hello, in today's video i will be showing you how to create simple CRUD App using HTML, CSS, and JavaScript.

HTML, CSS code

Save below html , css code in index.html file.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CRUD App</title>
    <style>
        form {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
        
        form * {
            width: 50%;
            margin-top: 2px;
        }
        
        .update {
            display: none;
        }
        
        .up,
        .de {
            background-color: red;
            color: white;
            cursor: pointer;
        }
        
        td,
        th {
            border: 2px solid black;
        }
        
        h1 {
            text-align: center;
        }
        
        table {
            width: 100%;
        }
    </style>
</head>

<body>
    <h1>CRUD-APP</h1>
    <form>
        <input type="text" placeholder='Name'>
        <input type="email" placeholder='Email'>
        <input type="tel" placeholder='Phone'>
        <input type="text" placeholder='Address'>
        <button type="button" class="submit">Submit Data</button>
        <button type="button" class="update">Update Data</button>
    </form>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
                <th>Address</th>
                <th>Update</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script src="./script.js"></script>
</body>

</html>

JavaScript Code

Save below code in script.js file.


const form = document.querySelector("form");
const submit = document.querySelector(".submit");
const updates = document.querySelector(".update");
const tbody = document.querySelector("table>tbody");

submit.addEventListener('click', () => {
    let idb = indexedDB.open('crud', 1)
    idb.onupgradeneeded = () => {
        let res = idb.result;
        res.createObjectStore('data', { autoIncrement: true })
    }
    idb.onsuccess = () => {
        let res = idb.result;
        let tx = res.transaction('data', 'readwrite')
        let store = tx.objectStore('data')
        store.put({
            name: form[0].value,
            email: form[1].value,
            phone: form[2].value,
            address: form[3].value
        })
        alert("data has been added")
        location.reload()
    }
})

function read() {
    let idb = indexedDB.open('crud', 1)
    idb.onsuccess = () => {
        let res = idb.result;
        let tx = res.transaction('data', 'readonly')
        let store = tx.objectStore('data')
        let cursor = store.openCursor()
        cursor.onsuccess = () => {
            let curRes = cursor.result;
            if (curRes) {
                console.log(curRes.value.name);
                tbody.innerHTML += `
                
                ${curRes.value.name}
                ${curRes.value.email}
                ${curRes.value.phone}
                ${curRes.value.address}
                Update
                Delete
                
                `;
                curRes.continue()
            }

        }
    }
}

function del(e) {
    let idb = indexedDB.open('crud', 1)
    idb.onsuccess = () => {
        let res = idb.result;
        let tx = res.transaction('data', 'readwrite')
        let store = tx.objectStore('data')
        store.delete(e)
        alert("Data has been deleted")
        location.reload()
    }
}
let updateKey;

function update(e) {
    submit.style.display = "none";
    updates.style.display = "block";
    updateKey = e;
}
updates.addEventListener('click', () => {
    let idb = indexedDB.open('crud', 1)
    idb.onsuccess = () => {
        let res = idb.result;
        let tx = res.transaction('data', 'readwrite')
        let store = tx.objectStore('data')
        store.put({
            name: form[0].value,
            email: form[1].value,
            phone: form[2].value,
            address: form[3].value
        }, updateKey);
        alert("data has been updated")
        location.reload()
    }
})

read()

Useful Links

Reading Data From Google Sheet | Google Sheet to JSON and JSON to HTML | JavaScript and Apps Script

Reading Data From Google Sheet | Google Sheet to JSON and JSON to HTML | JavaScript and Apps Script

In today's video you will learn about How to read and display data from Google Sheet.

AppsScript Code


const ss = SpreadsheetApp.openByUrl("Your google sheet url")
const sheet = ss.getSheetByName("Sheet1")
function doGet(e){
  let obj = {};
  let data = sheet.getDataRange().getValues()
  obj.content = data;
return ContentService.createTextOutput(JSON.stringify(obj)).setMimeType(ContentService.MimeType.JSON)

}

Deploy your appsscript project and copy the API endpoint URL.

HTML, JavaScript Code


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        tr {
            background-color: lightGrey;
        }
        
        tr:nth-child(2n) {
            background-color: grey;
        }
    </style>
</head>

<body>
    <table></table>
    <script>
        fetch('paste your api end point url here')
            .then(res => res.json())
            .then(data => {
                let tr = data.content.reduce((prev, cur) => {
                    let td = cur.map(e => `<td>${e}</td>`)
                    return prev + `<tr>${td.join("")}</tr>`
                }, "\r")
                document.querySelector("table").innerHTML = tr;
                
            });
    </script>
</body>

</html>

Keywords :

dynamically display data from google sheets into a web app
spreadsheet to html table
google html page
google apps script html table
spreadsheet in html
google apps script html css
google sheet to website free
google apps script html form submit
how to connect html form to google sheets
get data from google sheets to html
how to create a google page in html
google sheet page setup
how to create google search page in html

Useful Links

How to Submit HTML Form Data to Google Sheets | Save Using doPost Method | AppScript | JavaScript

How to Submit HTML Form Data to Google Sheets | Save Using doPost Method | AppScript | JavaScript.

First open Vs Code or any your favourite code editor and create a index.html file.

Paste the below code in the index.html.

                
                    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML form to Google Sheet</title>
</head>

<body>
    <h1 id="msg"></h1>
    <form>
        <input type="text" name="name" placeholder='Name'><br><br>
        <input type="email" name="email" placeholder='Email'><br><br>
        <input type="tel" name="phone" placeholder='Phone'><br><br>
        <input type="submit" id="sub">
    </form>
    <script>
        let form = document.querySelector("form");
        form.addEventListener('submit', (e) => {
            e.preventDefault();
            document.querySelector("#sub").value = "Submiting..";
            let data = new FormData(form);
            fetch('Paste_Your_Api_EndPoint_Url', {
                    method: "POST",
                    body: data
                })
                .then(res => res.text())
                .then(data => {
                    document.querySelector("#msg").innerHTML = data;
                    document.querySelector("#sub").value = "Submit"
                });
        })
    </script>
</body>

</html>

Now goto https://google.com/sheets and create a blank spreadsheet.
Click on extensions then click on Apps Script.

A new AppScript project will be open in new tab. Paste the below code there and go back to spreadsheet tab then copy url of spreadsheet then give the URL in argument of SpreadsheetApp.openByUrl() method in the code.

                
                    const sheets = SpreadsheetApp.openByUrl("Paste your spreadsheet url here");
                    //if you have changed your sheet name then replace the below Sheet1 with your sheet name
const sheet = sheets.getSheetByName("Sheet1");
function doPost(e){
  let data = e.parameter;
  sheet.appendRow([data.name,data.email,data.phone]);
  return ContentService.createTextOutput("Success");
}

Click Deploy then click on New deployments.
Select type "Web App".
In configuration section input your description and select "Anyone" in "who has access" dropdown menu then click on deploy.
Click the Authorize Access Button.
Select your Google account then you will see something like below image, click on "advanced" and click on "Go to Untitled project (unsafe)" then allow your Google account to access the project.
You will get a API end point URL there Copy the URL then goto to your code editor and give the URL to argument of fetch() method. You are Done!.

Useful Links

Fetch and Read Excel Sheets Data in HTML Table with JavaScript

Fetch and Read Excel Sheets Data in HTML Table with JavaScript . In today's video I will show you how to read and display Excel Sheets data in Html table using JavaScript.

Source code to Fetch and Read Excel Sheets Data in HTML Table with JavaScript


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Excel Sheets to HTML Table</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js" integrity="sha512-r22gChDnGvBylk90+2e/ycr3RVrDi8DIOkIGNhJlKfuyQM4tIRAI062MaV8sfjQKYVGjOBaZBOA87z+IhZE9DA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <style>
        tr {
            background-color: gray;
        }
        
        tr:nth-child(2n) {
            background-color: lightgray;
        }
    </style>
</head>

<body>
    <div class="table"></div>
    <script>
        let table = document.querySelector(".table");
        (
            async() => {
                let workbook = XLSX.read(await (await fetch("./excel.xlsx")).arrayBuffer());
                console.log(workbook);
                let worksheet = workbook.SheetNames;
                worksheet.forEach(name => {
                    let html = XLSX.utils.sheet_to_html(workbook.Sheets[name]);
                    table.innerHTML += `
                    <h3>${name}</h3>${html}
                    `;
                })
            }
        )()
    </script>
</body>

</html>

Useful Links

JavaScript Todo List App with Local Storage | Todo App | Javascript Project

JavaScript Todo list App with Local Storage.
In this video, I will show you how to create a to-do list app using HTML, CSS, and javascript.

Source code to create a todo list app using JavaScript



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo App</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
        
        form {
            width: 80%;
        }
        
        form * {
            width: 100%;
            height: 20px;
            margin-top: 2px;
        }
        
        table {
            width: 80%;
        }
        
        th,
        td {
            border: 1px solid #000;
        }
        
        h1 {
            color: brown;
        }
        
        td[onclick] {
            background-color: red;
            color: #fff;
            border-radius: 5px;
            cursor: pointer;
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>Todo App</h1>
    <form>
        <input type="text" required>
        <input type="submit">
    </form>
    <table>
        <thead>
            <tr>
                <th>Todo's</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <script>
        // ["gfgf","hggbhd"]
        let form = document.querySelector("form");
        let ls = localStorage.getItem('todo');
        let todo = ls ? JSON.parse(ls) : [];
        form.addEventListener('submit', (e) => {
            e.preventDefault();
            let inpData = form[0].value;
            todo.push(inpData)
            localStorage.setItem('todo', JSON.stringify(todo))
            location.reload()
        })
        todo.map((data, index) => {
            document.querySelector("tbody").innerHTML += `
            <tr>
            <td>${data}</td>    
            <td onclick="del(${index})">Delete</td>    
            </tr>
            `;
        })

        function del(e) {
            let deleted = todo.filter((data, index) => {
                return index !== e;
            })
            localStorage.setItem('todo', JSON.stringify(deleted))
            location.reload()
        }
    </script>
</body>

</html>

Useful Links

Fetch and Display Multiple CSV Files in HTML Table with JavaScript | CSV to HTML | Read CSV

In today's video, I will be showing you how to display multiple CSV files in an HTML table using JavaScript. First, we will convert CSV files to a javascript array then we will display them in an HTML table.

Source code to read multiple csv files in HTML table with JavaScript

Create a index.html file and paste the below code


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Read CSV files with javascript fetch method</title>
    <style>
        td,
        th {
            border: 2px solid blue;
        }
        
        table {
            display: none;
        }
        
        nav {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
        }
        
         :target {
            display: block;
        }
    </style>
</head>

<body>
    <nav id="nav">

    </nav>
    <h1>CSV Data Reader</h1>
    <script src="./csv.js"></script>
</body>

</html>

Create a csv.js file and paste the below code


let fa = [
    // replace the path value with your csv files path
    { path: "/static/1.csv", head: "CSV1" },
    { path: "/static/2.csv", head: "CSV2" },
    { path: "/static/3.csv", head: "CSV3" },
]
for (let i = 0; i < fa.length; i++) {
    document.querySelector("#nav").innerHTML += `
    ${fa[i].head}
    `;
    document.querySelector("body").innerHTML += `
    
    
    
    ${fa[i].head}
    
    
    
    
    `;
    fetch(fa[i].path)
        .then(res => res.text())
        .then(data => {
            let result = data.split(/\r?\n|\r/)
                .map(e => {
                    return e.split(",")
                        .map(td => td !== "" ? `${td}` : "")
                        .join("")
                        .split("\n")
                        .map(tr => tr !== "" ? `${tr}` : "")
                        .join("");
                })
            document.querySelector(`#tbody${i}`).innerHTML = result.join("");
            // console.log(result);
        })
}

Useful Links

Subscribe to: Posts (Atom)