Search This Blog
Showing posts with label html. Show all posts
Showing posts with label html. Show all posts

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

By Posted on No comments:

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>
Read More

Create a Text to Speech App with JavaScript | JS

By Posted on No comments:

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>
Read More

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

By Posted on No comments:

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>
Read More

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

By Posted on No comments:

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>
Read More

Convert HTML To Canvas | Canvas To Downloadable PNG | JPG Image | html2canvas | JavaScript |

By Posted on No comments:

Convert HTML to Canvas and Canvas to downloadable png / jpeg image | html2canvas. Hello friends in this video i will be showing you how to convert html elements to canvas and how to convert canvas to image which can be downloable in client side. In this tutorial I'm using html2canvas . js library to convert html element to canvas. i hope you will like this video.

Video Description

Convert HTML to Canvas and Canvas to downloadable png / jpeg image | html2canvas. Hello friends in this video i will be showing you how to convert html elements to canvas and how to convert canvas to image which can be downloable in client side. In this tutorial I'm using html2canvas . js library to convert html element to canvas. i hope you will like this video.

Source code: https://b.codewithsundeep.com/2022/05... html2canvas.js library link : https://html2canvas.hertzen.com You can contact me on , Facebook : https://facebook.com/codewithsundeep Instagram : https://instagram.com/codewithsundeep1 Your Queries : html2canvas, convert html page to image using javascript, convert html table to image javascript,, convert html div to image javascript, convert html to image, convert div to image without canvas, html2image javascript, convert div to image using canvas, convert html div to image javascript, convert html table to image javascript, html2image javascript, how to convert html to canvas, how to convert canvas to image, html to canvas, canvas to image, canvas to image javascript, canvas to image js, canvas to image download, canvas to image file, canvas to image jquery, canvas to image angular, canvas to image url, canvas to image file javascript, canvas to image data, convert canvas to image, photoshop fit canvas to image, html canvas to image, js canvas to image, gimp fit canvas to image, convert canvas to image file javascript, photoshop resize canvas to image, save canvas to image, add canvas to image, tkinter canvas to image, canvas add text to image, canvas html to image, canvas convert to image, canvas save to image, canvas export to image, canvas to base64, canvas to dataurl, canvas fit to image, canvas draw to image, canvas render to image, canvas background to image Hashtag : #html #javascript #canvas #image #html2canvas #canvas2image #canvas_to_image #html_to_canvas #hindi #tutorial #hindi_tutorial #javascript_tutorial #javascripttutorial #convert_html_to_canvas #convert_canvas_to_image #codewithsundeep #code_with_sundeep

Source Code to Convert HTML to Canvas and Canvas to downloadable png / jpeg image


<!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">
   <!-- html2canvas cdn link -->
    <script src="  https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.0/html2canvas.min.js"></script>
    <title>div 2 jpg using html2canvas js library</title>
    <style>
        .result {
            display: none;
        }

        canvas {
            border: 2px solid blue;
        }
    </style>
</head>
<body>
    <div class="html">
        <h2>Lorem ipsum dolor sit amet.</h2>
        <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere repudiandae ea libero aspernatur voluptas,
            possimus iste distinctio sed alias cum officiis quo quis iure explicabo, nulla assumenda asperiores
            temporibus commodi. Laudantium libero corrupti nisi ab earum, sunt laborum, deleniti ducimus totam quod,
            deserunt enim consequatur aspernatur soluta nulla eveniet natus!
        </p>
        <button onclick="convert()">Convert me to jpg image</button>
    </div>
    <div class="result">
        <a href=""><button>Download JPG</button>
        </a>
        <hr>

    </div>
    <script>
        const div = document.querySelector(".html");
        const result = document.querySelector(".result");

        function convert() {
            html2canvas(div).then(function (canvas) {
                result.appendChild(canvas);
                let cvs = document.querySelector("canvas");
                let dataURI = cvs.toDataURL("image/jpeg");
                let downloadLink = document.querySelector(".result>a");
                downloadLink.href = dataURI;
                downloadLink.download = "div2canvasimage.jpg";
                console.log(dataURI);
            });
            result.style.display = "block";

        }
    </script>
</body>
</html>
Read More

Match Media Queries With JavaScript matchMedia Method

By Posted on No comments:

In today's video you will know about how we can match media queries using JavaScript

Source Code to Match media Queries with the help of 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>Match Media Queries using Javascript</title>
    <style>
        body {
            display: flex;
            align-items: center;
            justify-content: space-evenly;
        }
        
        div {
            height: 100px;
            width: 100px;
            background-color: darkCyan;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</body>
<script>
    // javascript code to match media queries
    let media = () => {
        let queries = matchMedia("(max-width:600px)");
        if (queries.matches) {
            document.querySelector("body").style.flexDirection = "column";
        } else {
            document.querySelector("body").style.flexDirection = "row";
        }
    }
    onload = media;
    onresize = media;
</script>

</html>
Read More

Read CSV Files Data in HTML Table using JavaScript Fetch Method | CSV to HTML | JS | CSV File Reader

By Posted on No comments:

In Today's video I will be showing you how we can fetch csv file data to display in HTML table.

Source code to fetch and read csv file

Replace the test.csv with your csv file name.


<!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 {
            border: 2px solid blue;
        }
    </style>
</head>
<body>
    <table>

    </table>
    <script>
//         tutorial link : https://www.youtube.com/watch?v=gnqHNJNc_0A
        onload = fetch("./test.csv").then(res => {
            return res.text()
        }).then(data => {
            let result = data.split(/\r?\n|\r/).map(e => {
                return e.split(",")
            })
            result.forEach(e => {
                let m = e.map(e => {
                    return `<td>${e}</td>`;
                }).join("")
                let ce = document.createElement("tr");
                ce.innerHTML = m;
                if (ce.innerText != "") {
                    document.querySelector("table").appendChild(ce);
                }
                // console.log(m);

            })
        })
    </script>
</body>
</html>
Read More

How to read csv data in html table using Javascript ( JS )

By Posted on No comments:

 In today's video, I'm going to show you how to read or display  CSV Files in an HTML table using JavaScript.

Hope This Video Will Help You.

Free Source code to read csv files in html table using javascript.

Save this html and name it to "csv-file-reader.html" or anything what you want.


<!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>csv file reader</title>
    <style>
        td {
            border: 2px solid maroon;
        }
    </style>
</head>
<body>
    <!-- tutorial link : https://www.youtube.com/watch?v=BQfK1QKCHys&t=326s -->
    <input type="file">
    <table></table>
    <script src="./csv.js"></script>
</body>
</html>

Copy and Save the below script file giving a name "csv.js"


        const x = document.querySelector("input");
        x.addEventListener("change", () => {
            const fr = new FileReader();
            fr.onloadend = e => {
                let r = fr.result.split("\n").map(e => {
                    return e.split(",");
                });
                r.forEach(e => {
                    let m = e.map(e => {
                        return `${e}`;
                    }).join("");
                    const ce = document.createElement("tr");
                    ce.innerHTML = m;

                    if (ce.innerText !== "") {
                        document.querySelector("table").append(ce);

                    }


                });

                // console.log(r)
            }
            fr.readAsText(x.files[0]);

        })

You are done!

Read More
Subscribe to: Posts (Atom)