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

Create a Math Quiz App using HTML CSS and JavaScript | JS Quiz App | JavaScript Project

Create a Math Quiz App using HTML CSS and JavaScript. Hello, in today's tutorial video I'm going to show you how to create a math quiz app/game using HTML, CSS, and javascript.

Source code to Create a Math Quiz App using HTML CSS and 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>Math Quiz</title>
    <style>
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }
        
        .quiz {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            background-color: darkCyan;
            border-radius: 5px;
            box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
            padding: 30px;
        }
        
        .quiz * {
            width: 100%;
            height: 25px;
            margin-top: 2px;
            text-align: center;
        }
        
        .reset {
            color: #fff;
            text-decoration: underline;
            cursor: pointer;
        }
        
        .score {
            color: #fff;
            font-weight: bolder;
        }
        
        h1 {
            color: #fff;
        }
        
        .result {
            color: pink;
            font-weight: bolder;
        }
        
        .next {
            display: none;
        }
    </style>
</head>

<body>
    <form class='quiz'>
        <span class='result'>Solve It</span>
        <h1>
            <span class='quest'>10+10</span>
            <span> = ?</span>
        </h1>
        <input type='number' class='ans' placeholder='0' required>
        <input type='submit' class='submit'>
        <button type='button' class='next'>Play next</button>
        <button type='button' class='score' disabled>Score</button>
        <span class='reset'>Reset score</span>
    </form>
    <script>
        let quiz = document.querySelector(".quiz");
        let result = document.querySelector(".result");
        let quest = document.querySelector(".quest");
        let ans = document.querySelector(".ans");
        let submit = document.querySelector(".submit");
        let next = document.querySelector(".next");
        let score = document.querySelector(".score");
        let reset = document.querySelector(".reset");
        let prevScore = ~~localStorage.getItem('score');
        score.textContent = `Score : ${prevScore}`;

        function gq() {
            let op = ['+', '-', '*', '/'];
            let r1 = ~~(Math.random() * 5) + 5;
            let r2 = ~~(Math.random() * 5);
            let rop = ~~(Math.random() * 4);
            quest.textContent = `${r1} ${op[rop]} ${r2}`;
        }
        gq();
        quiz.addEventListener('submit', (e) => {
            e.preventDefault();
            submit.style.display = "none";
            next.style.display = "block";
            let cans = ~~Function('return ' + quest.textContent)().toFixed();
            if (cans == ans.value) {
                result.textContent = 'Wow Score Added!';
                let scr = prevScore + 5;
                prevScore = scr;
                localStorage.setItem("score", prevScore);
                score.textContent = `Score : ${prevScore}`;
            } else {
                result.textContent = `Oops! Correct ans is ${cans}`;
            }
        })
        next.addEventListener('click', () => {
            gq();
            result.textContent = 'Solve It';
            quiz.reset();
            next.style.display = "none";
            submit.style.display = "block";
        })
        reset.addEventListener('click', () => {
            localStorage.removeItem('score');
            location.reload();
        })
    </script>
</body>

</html>

Useful Links

Speech to Text with JavaScript | Speech to Text App | JS

Speech to Text with JavaScript
Convert Speech to text
In today's video, I will show you how to convert speech to text with the help of JavaScript.

Source code to create a Speech to Text App 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>Speech to text in js</title>
    <!-- https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition -->
    <!-- new webkitSpeechRecognition() || new SpeechRecognition()-->
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        form {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
        }

        form * {
            width: 50%;
        }

        textarea {
            height: 250px;
        }

        h1 {
            text-align: center;
        }
    </style>
</head>
<body>
    <form>
        <h1>Speech To Text App</h1>
        <textarea></textarea>
        <button type="submit">Speak!</button>
        <button type="button">Stop</button>
    </form>
    <script>
        let form = document.querySelector("form");
        let sr = window.webkitSpeechRecognition || window.SpeechRecognition;
        let spRec = new sr();
        spRec.lang = "hi";
        spRec.continuous = true;
        spRec.interimResults = true;
        // console.log(spRec);
        form.addEventListener("submit", e => {
            e.preventDefault();
            spRec.start();
        })
        spRec.onresult = res => {
            let text = Array.from(res.results)
                .map(r => r[0])
                .map(txt => txt.transcript)
                .join("");
            form[0].value = text;
            // console.log(text);
        }
        form[2].addEventListener("click", () => {
            spRec.stop()
        })
    </script>
</body>
</html>

Useful Links

Create a Text to Speech App with JavaScript | JS

Create a Text to Speech App with JavaScript | JS In this video, you will learn how to convert text to speech using JavaScript.

Source code to create a Text to Speech App 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>Js Web Speech API</title>
    <style>
        body {
            width: 100%;
            height: 100vh;
        }

        form {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

        form * {
            width: 50%;
        }

        textarea {
            height: 250px;
        }

        h1 {
            text-align: center;
        }
    </style>
</head>
<body>
    <form>
        <h1>Text To Speech App</h1>
        <select></select>
        <textarea></textarea>
        <input type="submit" value="Speak!">
        <button type="button">Pause</button>
        <button type="button">Resume</button>
        <button type="button">Stop</button>
    </form>
    <script>
        let voices;
        let form = document.forms[0];
        if ("speechSynthesis" in window) {
            speechSynthesis.onvoiceschanged = () => {

                voices = speechSynthesis.getVoices();
                voices.map(voice => {
                    form[0].innerHTML += `
                    <option>${voice.name}</option>
                    `;
                })

                console.log(voices);
            }
            form.addEventListener("submit", e => {
                e.preventDefault()
                let selected = form[0].querySelector("option:checked").value;
                let t2s = new SpeechSynthesisUtterance();
                t2s.text = form[1].value;
                let voice = voices.filter(v => {
                    return v.name == selected;
                })
                t2s.voice = voice[0];
                speechSynthesis.cancel();
                speechSynthesis.speak(t2s)
            })

        } else {
            alert("unsupported")
        }
        form[3].addEventListener("click", e => {
            speechSynthesis.pause()
        })
        form[4].addEventListener("click", e => {
            speechSynthesis.resume()
        })
        form[5].addEventListener("click", e => {
            speechSynthesis.cancel();
        })
    </script>
   
</body>
</html>

Useful Links

Export HTML Table to CSV with JavaScript | HTML 2 CSV | convert html table to csv | JS

Export HTML Table to CSV with JavaScript | HTML 2 CSV | convert html table to csv | JS Hello friend's in this video I'm going to show you how to export html table data to csv file. I hope this video will help you to expertise your Javascript skill.

Source code to export HTML Table to CSV with JavaScript


<!DOCTYPE html>
<html lang="en">
<head>
    <!-- tutorial link : https://youtu.be/2_Q9DBL-vZE -->
    <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>html2csv</title>
    <style>
        table {
            background-image: linear-gradient(to top left, rgb(202, 103, 103), rgb(231, 131, 131), rgb(228, 175, 175));
            width: 100%;
        }

        td,
        th {
            border: 3px solid rgba(255, 255, 255, 0.589);
            color: white;
            letter-spacing: 0.1rem;
            text-align: center;
            font-size: 2rem;
        }
    </style>
</head>
<body>
    <table> 
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Gender</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Subash</td>
                <td>24</td>
                <td>Male</td>
            </tr>
            <tr>
                <td>Subham</td>
                <td>21</td>
                <td>Male</td>
            </tr>
            <tr>
                <td>Tanya</td>
                <td>26</td>
                <td>Female</td>
            </tr>
            <tr>
                <td>Geeta</td>
                <td>22</td>
                <td>Female</td>
            </tr>
            <tr>
                <td>shyam</td>
                <td>29</td>
                <td>Male</td>
            </tr>
            <tr>
                <td>Aditya</td>
                <td>27</td>
                <td>Male</td>
            </tr>
        </tbody>

    </table>

    <script>
        let csv = [];
        let tr = document.querySelectorAll("tr");
        for (let i = 0; i < tr.length; i++) {
            // console.log(tr[i]);
            let cols = tr[i].querySelectorAll("th,td");
            let csvRow = [];
            for (j = 0; j < cols.length; j++) {
                csvRow.push(cols[j].innerHTML)
            }
            csv.push(csvRow.join(","))
            // console.log(csvRow.join(","));
        }
        console.log(csv.join("\n"));
        let blob = new Blob([csv.join("\n")], { type: "text/csv" });
        let ce = document.createElement("a");
        ce.innerHTML = "Download";
        ce.download = "codewithsundeep"
        ce.href = URL.createObjectURL(blob);
        document.body.appendChild(ce);
    </script>
</body>
</html>

Useful Links

Validate and show Preview of Single or Multiple Image before upload in server with Javascript | Js

Hello, friend's in this tutorial I'm going to show you how we can display preview of image in our webpage after select from file input field, here we are not going to upload image file in web server, we will just show preview of selected image file in client browser using javascript.

Source code to Validate and show Preview of Single or Multiple Image before upload in server 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>Preview image before upload, with Javascript</title>
    <!--Regex to validate image => ("[^\\s]+(.*?)\\.(jpg|jpeg|png|gif|JPG|JPEG|PNG|GIF)$") -->
    <!--Tutorial Link : https://youtu.be/QxRIyuNNzoM-->
</head>
<body>
    <input type="file" multiple>
    <div></div>
    <script>
        let input = document.querySelector("input");
        let div = document.querySelector("div")
        input.addEventListener("change", e => {
            console.log(e.target.files);
            Array.from(e.target.files).forEach(item => {
                if (item.name.match("[^\\s]+(.*?)\\.(jpg|jpeg|png|gif|JPG|JPEG|PNG|GIF)$")) {
                    div.innerHTML += `
                <img src="${item.name}"height="200"width="300">
                `;
                } else {
                    alert("please select a valid image file")
                }
            })
            // for single file preview
            // if (e.target.files[0].name.match("[^\\s]+(.*?)\\.(jpg|jpeg|png|gif|JPG|JPEG|PNG|GIF)$")) {
            //     div.innerHTML = `
            //     <img src="${e.target.files[0].name}"height="200"width="300">
            //     `;
            // } else {
            //     alert("please select a valid image file")
            // }
        })
    </script>

</body>
</html>

Useful Links

Subscribe to: Posts (Atom)