Node.js Express Youtube Video Tag Finder Web App Using Youtube-Tags Library Full Example 2020

Node.js Express Youtube Video Tag Finder Web App Using Youtube-Tags Library Full Example 2020

 

 

 

Get Started

 

In order to get started with this application you need to install these dependencies for your web app

 

npm i express

 

npm i nodemon

 

npm i get-youtube-id

 

npm i youtube-tags

 

 

These are the four packages which are required in this project. Install this packages after executing the command

 

npm init -y

 

to make the package.json file

 

Now build the index.js file and copy paste the following code shown below

 

 

index.js

 

 

const express = require('express')

const youtubeTags = require('youtube-tags')

const fs = require('fs')

const bodyParser = require('body-parser')

var getYouTubeID = require('get-youtube-id');

const app = express()

app.use(bodyParser.json())

app.use(bodyParser.urlencoded({extended:false}))

const PORT = 4000

app.get('/',(req,res) => {
    res.sendFile(__dirname + "/index.html")
})

app.post('/tagfinder',async (req,res) => {
    // extract the video id

    var url = req.body.url

    var id = getYouTubeID(url);

    console.log(id)

    // get the tags of the youtube video

    var tags = await youtubeTags.getYoutubeTags(id)
    var content
    tags.forEach(tag => {
        console.log(tag)
        content += tag
    });

    fs.writeFileSync("file.txt",content,(err) => {
        if(err) throw err
        
    })
})

app.listen(PORT,() => {
    console.log(`App is listening on Port ${PORT}`)
})

 

See also  Build a CSS to Javascript Inline Styles Objects Converter in Browser Using Vanilla Javascript Full Project For Beginners

 

 

Now make the html file so that user can see the interface where he can interact with the application.

 

 

index.html

 

 

 

<!DOCTYPE html>
<html>
  <head>
    <title>Youtube Video Tag Finder</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />
  </head>
  <body>
      <div class="container">
          <h1 class="text-center">
              Youtube Tag Finder
          </h1>
          <form action="/tagfinder" method="post">
            <div class="form-group">
                <label for="url">Youtube URL</label>
                <input type="text" name="url" required placeholder="Youtube URL" class="form-control">
            </div>
            <div class="form-group">
                <button class="btn btn-danger btn-block">
                    Get Tags
                </button>
            </div>
        </form>
      </div>
</body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</html>

 

 

 

 

 

 

 

Leave a Reply