DEV Community: The Vik

Top 5 best YouTube channel for programmers

The Vik — Mon, 16 Aug 2021 07:49:30 +0000

Ok so in this blog imma show the top 5 best youtube channel that I personally use to learn. Keep in mind that these all are my suggestions, everyone has a different taste.

Join my discord server and talk with many programmers in there

- First 25 people to join will get special role

Number 1 - FreeCodeCamp

So FreeCodeCamp is a really good youtube channel for everyone who is learning to code and want to learn to code, they make large, small and video for everything, they also have a forum where you can read blogs. Their videos are one of the best although I have met many people who dont like Free Code Camp.

Number 2 - Transvercy Media

This is almost same as free code camp, makes great video, of many languages and big or small videos. I dont have watched much videos of Transvercy Media so I dont know what to tell but yeah as far I have a watched its really great. also I havnt met anyone who said anything bad for this channel.

Number 3 - Programming with Mosh

Mosh Hamedani ( his name ) provides tons of tutorials of trending and emerging web languages and technologies. He also makes large and small videos but mainly cover Python, Javascript, C# etc.

Number 4 - Dev Ed

Edward Simon who has a great sense of humor, teaches frontend languages and libraries like JavaScript, React and backend runtime environment like Node.js. He also teaches web design, 3D modeling using tools like Figma, Sketch, and Photoshop without getting you bored.

Number 5 - Web Dev Simplified

This is my personal best, maybe I think DevEd and Web Dev Simplified is draw but yeah. He mainly focus on JavaScript.

Haha comment the next 5 :)

How to print in JavaScript

The Vik — Sun, 15 Aug 2021 20:27:31 +0000

So as in python you use print("Hello World") in c++ you use cout << "Hello World" but in JavaScript you have to use console.log("Hello World")
EASY

Join my discord server and talk with many programmers in there

- First 25 people to join will get special role

How to make a guessing game in JavaScript

The Vik — Sun, 15 Aug 2021 09:43:22 +0000

So in this tutorial we are going to make a simple number guessing game which will generate a random number between 0 - 10 ( you can set the max number to whatever you want ) and then if the user guess the correct number it will show or else wrong answer will be shown.

Join my discord server and talk with many programmers in there

- First 25 people to join will get special role

<input type="text" placeholder="Your Guess" id="inputfield">
<button id="inputsubmit">Submit</button>
<!-- The results will be shown here -->
<div id="result"></div>

const inputfield = document.getElementById('inputfield')
const inputsubmit = document.getElementById('inputsubmit')
const result = document.getElementById('result')

const random = Math.floor(Math.random() * 10)

inputsubmit.addEventListener('click', () => {
    const inputvalue = inputfield.value
    const input = parseInt(inputvalue)
    if ( random === input ) {
        result.innerText = "Correct answer"
    } else {
        result.innerText = "Wrong answer"
    }
})

Play the upgraded number guessing game made by me

ok so in html we only make a input field for guessing the number, a button to submit that guess and a div to show the results.

in javascript we are getting all of those things in html using getElementById and then we generating a random number using Math.random() and multiplying it by 10 ( this is the max number change it to whatever you want.

now we adding a event listener to our button then making a const named inputvalue and passing inputfield.value in it then we are using parseInt to get the integer value of inputvalue.
now we just using a if statement so if random === input then we will write "Correct Answer" in our result div and else we will write "Wrong Answer" in our result div.

THANKS for reading this much :D

How to make a Drag-n-Drop in JavaScript

The Vik — Sun, 08 Aug 2021 08:13:40 +0000

Okay so the earlier two blogs of mine got a lot of views and now I am thinking to make another blog tutorial so in this blog we are making a simple Drag-n-Drop feature in JavaScript and tbh its is very easy and simple to understand.

Source code for drag-n-drop

Follow me on Github

    <div class="container">
        <p class="draggable" draggable="true">1</p>
        <p class="draggable" draggable="true">2</p>
    </div>
    <div class="container">
        <p class="draggable" draggable="true">3</p>
        <p class="draggable" draggable="true">4</p>
    </div>

body {
    margin: 0;
    background-color: #ff4040;
}

.container {
    background-color: #333;
    padding: 1rem;
    margin-top: 1rem;
}

.draggable {
    padding: 1rem;
    background-color: white;
    border: 1px solid black;
    cursor: move;
}

.draggable.dragging {
    opacity: .5;
}

const draggables = document.querySelectorAll('.draggable')
const containers = document.querySelectorAll('.container')

draggables.forEach(draggable => {
    draggable.addEventListener('dragstart', () => {
        draggable.classList.add('dragging')
    })
    draggable.addEventListener('dragend', () => {
        draggable.classList.remove('dragging')
    })
})
containers.forEach(container => {
    container.addEventListener('dragover', e => {
        e.preventDefault()
        const draggable = document.querySelector('.dragging')
        container.appendChild(draggable)
    })
})

so thats the whole code imma not explain the html and css mainly because its pretty simple, we are just making some div and some paragraphs and in css we just styling them a little bit.

make sure to link your javascript and css to html

Ok so now let us learn what we are doing in javascript.

const draggables = document.querySelectorAll('.draggable')
const containers = document.querySelectorAll('.container')

draggables.forEach(draggable => {
    draggable.addEventListener('dragstart', () => {
        draggable.classList.add('dragging')
    })
    draggable.addEventListener('dragend', () => {
        draggable.classList.remove('dragging')
    })
})

so in the first and second line of code we are just adding our class as a const in javascript, we are using querySeletorAll because we dont have a single thing assigned with the same class.
okk so in the fourth like we make a forEach function for all of the draggables and then we just adding a EventListener in it and givin it 'dragstart' and adding style to it by using

draggable.classList.add

.
we are doing the same, but now we replacing dragstart with drag end and also instead of adding we are just removing the style.

containers.forEach(container => {
    container.addEventListener('dragover', e => {
        e.preventDefault()
        const draggable = document.querySelector('.dragging')
        container.appendChild(draggable)
    })
})

umm so now we making forEach for our div's ( containers ) and then adding a eventListener and just making a const and assigning querySeletor 'dragging' and then just appendChild which basically mean adding a child to it.

so you can make a basic drag and drop feature using this code and it was easy, right?

How to make a qr-code generator with JavaScript

The Vik — Thu, 05 Aug 2021 19:11:00 +0000

Making a qr-code generator is pretty simple tbh because of the existing stuff available on the internet.

Source Code Of This Blog
Try Out The QRCODE Generator We Are Going To Make In This Blog

    <input type="text" onchange="generateQR()" id="url" 
    placeholder="Place Your Url">
    <button id="makeQR">
        Generate QR Code
    </button>
    <div id="output"></div>
    <script src="qrcode.min.js"></script>
    <script src="main.js"></script>

let qrcode = new QRCode(document.getElementById('output'));
let qrdata = document.getElementById('url');
let makeQr = document.getElementById('makeQR')

function generateQR() {
    var data = qrdata.value;
    qrcode.makeCode(data)
}

makeQr.addEventListener('click', function() {
    generateQR()
})

Okay so thats all of the code you got to understand to make this.

First of all you have to download this from https://davidshimjs.github.io/qrcodejs/ this is nesecarry to be downloaded because the base code isnt mine its this guy who made it.

Okay so now first we are gonna make the html

    <input type="text" onchange="generateQR()" id="url" 
    placeholder="Place Your Url">
    <button id="makeQR">
        Generate QR Code
    </button>
    <div id="output"></div>
    <script src="qrcode.min.js"></script>
    <script src="main.js"></script>

First we are making a input box and giving it onchange="generateOR()" which is a function we are making in main.js also we giving it a ID.
then we making a button and giving it a ID too.
Now we making a

it is necessary because the qr code is going to be shown here only, and in last we importing the script.( main.js is the code we are making and qrcode.min.js is the base code)

let qrcode = new QRCode(document.getElementById('output'));
let qrdata = document.getElementById('url');
let makeQr = document.getElementById('makeQR')

function generateQR() {
    const data = qrdata.value;
    qrcode.makeCode(data)
}

makeQr.addEventListener('click', function() {
    generateQR()
})

Okay in the first three lines we are just importing all of the ids we gave in our html by using document.getElementById.

let qrcode = new QRCode(document.getElementById('output'));

in this line we are making a new QRCode and it is important because there is something in qrcode.min.js so if we write new QRCode when import out div then it is going to automatically find that this is the div it is going to show the generated qr.

function generateQR() {
    const data = qrdata.value;
    qrcode.makeCode(data)
}

Here we are making the generateOR function ( used in html ) and making a const named data and getting qrdata.value ( the value of that input box ) at last we are adding qrcode.makeCode(data) ( qrcode is that div ) and makeCode means generate QR Code and (data) menas qrdata.value ( value of input box )

this code should now also work if we write the link and press enter but if you want that the qrcode also shows when we click on the button then

makeQr.addEventListener('click', function() {
    generateQR()
})

here we arent doing much just adding a event listener 'click' and passing generateOR() function in it

Thanks for reading till the ending you can follow me on github and star this repo

How to make a web scraper with JavaScript

The Vik — Wed, 04 Aug 2021 09:13:03 +0000

In this blog I will teach how to make a web scraper with axios and cheerio.

Source Code

const axios = require('axios')
const cheerio = require('cheerio')
// Replace the url with your url
const url = 'https://www.premierleague.com/stats/top/players/goals?se=-1&cl=-1&iso=-1&po=-1?se=-1'

axios(url)
    .then(response => {
        const html = response.data
        const $ = cheerio.load(html)
        const statsTable = $('.statsTableContainer > tr')
        const statsData = []

        statsTable.each(function() {
            const rank = $(this).find('.rank > strong').text()
            const playerName = $(this).find('.playerName > strong').text()
            const nationality = $(this).find('.playerCountry').text()
            const mainStat = $(this).find('.mainStat').text()
            statsData.push({
                rank,
                playerName,
                nationality,
                mainStat
            })
        })
        // Will print the collected data
        console.log(statsData)
    })
    // In case of any error it will print the error
    .catch(console.error)

Wosh

thats a lot of code lets get it one by one

npm install axios cheerio --save

to install or of the required dependencies

const axios = require('axios')
const cheerio = require('cheerio')

this will import those installed dependencies

const url = 'https://www.premierleague.com/stats/top/players/goals?se=-1&cl=-1&iso=-1&po=-1?se=-1'

this is the url from which we will scrap the data, you can change
it if you want but will have to change more things then

axios(url)
    .then(response => {
        const html = response.data
        const $ = cheerio.load(html)
        const statsTable = $('.statsTableContainer > tr')
        const statsData = []
    }

at the first line we are calling axios and url we are then adding .then function and passing response in it.
then we are making a const named html and passing response.data
if you now use

console.log(html)

then it will print the whole html code of the website.
okay so now we are making a const named $ and then loading the html with cheerio.
now making a const name statsTable and passing ( with $ = cheerio )the class of the div from which we are going to scrap the data.
now are are making a statsData in which we will store the scraped data.


statsTable.each(function() {
            // If you replaced the url then you have to replace these too
            const rank = $(this).find('.rank > strong').text()
            const playerName = $(this).find('.playerName > strong').text()
            const nationality = $(this).find('.playerCountry').text()
            const mainStat = $(this).find('.mainStat').text()
            statsData.push({
                rank,
                playerName,
                nationality,
                mainStat
            })
        }) 

//  this code should be inside .then(responde => {}) which be made above

okay now we are just finding the specific div to scrap the data and then converting it to text using .text()
also then we are pushing those specific div's text to statsData which we also made above.

now we have to just use

console.log(statsData) // inside .then(responde => {})

and it should show all of the scraped data.

and at last when everything is closed }) we will

.catch(console.error)

which will print the error if we have one and done.

this is my first time explaining a code so idk how I did.

THANKS