CodesWithJK: Learn Technical Skills

How to Create Chrome Extension to Close All Open Tabs Using JavaScript - CodesWithJK

2022-02-19T08:48:00.003+05:30

Hello Friends, Today we are going to show You "How to Create Chrome Extension Using Javascript, how to create an extension for chrome". We will create a simple chrome extension that will close all the tabs of our chrome browser in one go. This is a very interesting topic, please read the full article.

How to Create Chrome Extension to Close All Open Tabs Using JavaScript - CodesWithJK

What Are Chrome Extension

The extension is a software program that enables users to customize the Chrome browsing experience. Chrome extensions make our job a little easier. Chrome extension can be created using HTML, CSS, JavaScript, and other languages.

Extension Structure:

Source On GITHUB

Let's Start

Step 1:

Create a Folder in Your Computer

You will have to create a folder named Close All Tabs, which will contain all the files that you need for the extension.

And when you add the extension to the Chrome plugin, you will be asked to add this folder.

Article:

Create quiz App with Timer Using HTML CSS & JavaScript

Top 5 Programming Languages to Learn 2022

Step 2:

Creating manifest.json File

Now we have to create a file named manifest.json. Manifest.json file contains information about the extension. It is written in JSON format.

Now save this code by pasting it in the manifest.json file.

{
"manifest_version": 3,
"name": "Close All Tabs",
"description": "Close all open tabs and create an empty tab",
"version": "0.0.1",
"icons": {
"48": "icons/48.png",
"128": "icons/128.png"
},
"background": {
"service_worker": "background.js"
},
"action": {}
}

Step 3:

Creating background.js File

Now we have to create a file named background.js.

Now save this code by pasting it in the background.js file.

// toolbar button event listener
chrome.action.onClicked.addListener(function (thisTab) {
chrome.tabs.create({}, function (newTab) {
let querying = chrome.tabs.query({}, function (tabs) {
for (let tab of tabs) {
if (tab.id !== newTab.id) chrome.tabs.remove(tab.id);
}
});
});
});

Step 4:

Now we have to create a folder named Icons.

manifest.json

"icons": {
"16": "icons/16.png",
"48": "icons/48.png",
"128": "icons/128.png"
},

Step 5:

Now you have to load the file in the chrome extension.

(1) Go to chrome://extensions in your browser.

(2) Then you have to enable developer mode which is shown in the photo.

(3) Then you have to click on Load Unpacked, you have to select the file.

(4) If the file is correct then the name of that app will open in front of you. If the file is not correct then an error message will come.

(5) Now you have successfully added the extension to Chrome. Now you can use it. If you want to watch from video then the link is given below.

Now test this Extension:

1. Pin this extension in chrome browser.

2. open multiple tabs

3. click on the extension.

4. Successfully close all open tabs.

Thanx for reading this article. I hope you enjoy it.

PHP: Basics ECHO/Print Statement - CodeswithJK

2022-01-03T15:13:00.020+05:30

PHP means for Hypertext Preprocessor. PHP is a side server scripting language used in web development. PHP is an interpreted language. We use .php extension to create PHP file. We can embed PHP with HTML, CSS, and JavaScript.

PHP: Basics ECHO/Print Statement

{tocify} $title={Table of Contents}

PHP: Syntax

To write the PHP code, we write <?---PHP code here--?>.

Example:

<?php

#Your PHP Code here

?>

PHP: Echo/Print Statement

In the first step, we use the echo statement or print statement to print and display the data on the screen.

And the echo statement is faster than the print statement. That's why we may first use echo statements to show most of the data on the screen.

PHP: Echo Statement

Echo statements are used to display the data on the screen.

We can use echo statements in two ways like echo and echo().

Example:

<?php
echo "<h1>hello CodesWithJK!</h1>";
echo "Hello Readers!<br>";
echo "I'm Learning PHP!<br>";
?>

OUTPUT:

PHP: Print Statement

Print statements are Also used to display the data on the screen.

Example:

<?php
print "<h1>Hello CodesWithJK!</h1>";
print "Hello Readers!<br>";
print "I'm Learning PHP!<br>";
?>

OUTPUT:

PHP: Echo + Print Statement Example

Using Variables in Example. You can read about variables in the next chapters

Example:

<?php
$text1 = "I am Learning PHP";
$text2 = "CodesWithjk.com";
$x1 = 6;
$y1 = 5;

echo "<h1>" . $text1 . "</h1>";
print "Study PHP at " . $text2 . "<br>";
echo $x1 + $y1;
?>

OUTPUT:

PHP: Comments

I also have comments on PHP. Our program does not execute the comments written in the program.

If a user sees our program, then by looking at the comments, he can understand what has been written about.

First of all, we can comment in two ways in PHP:

Single Line Comment
Multiple Line Comment

Single Line Comment Example:

<?php
// Single-line comment

# This is also a single-line comment
?>

Multiple Line Comment Example:

<?php
/*
This is
a multiple-line
comment
*/
?>

Skipping parts of code in a program:

<?php
// Skipping parts of code in a program
$z1 = 8 /* + 20 */ + 10;
echo $z1;
?>

PHP: Introduction - CodeswithJK

2021-12-30T12:14:00.024+05:30

PHP means for Hypertext Preprocessor. PHP is a side server scripting language used in web development. PHP is an open-source language and we can do it for free. And it is a very simple language.

PHP

PHP is an interpreted language. We use .php extension to create PHP file. We can embed PHP with HTML, CSS, and JavaScript.

It is very important for you to have knowledge of languages like HTML, CSS, and JavaScript first before learning Php. If you do not know HTML, CSS, and JavaScript language, then you can learn by clicking on the link given below.

Learn HTML
Learn CSS

{tocify} $title={Table of Contents}

PHP: What is Full Form

The full form of PHP is Hypertext Preprocessor. Php is a side server scripting language used in web development.

PHP: Who Created PHP

Php was created by Rasmus Lerdorf in 1994 and was brought to the market in 1995.

PHP: Why Use PHP

Php is an open-source language and we can do it for free. And it is a very simple language.
With this, we can send cookies and can also receive them.
We can embed PHP with HTML tags and Script.
With PHP we can control the user to access Some pages of our Site.
PHP works on many platforms like Windows, Linux, MacOS, Unix.
PHP is free and you can download it from their official site: Php.net

HTML: (Anchor Tag) Links Examples - CodesWithJK

2021-12-28T11:52:00.056+05:30

#11 HTML <a> Anchor Tag Links

Hello friends, today we are in the 11th chapter of this HTML tutorial, we will know what are HTML <a> (anchor tag) links, HTML Links, HTML anchor tags, and how to use them.

HTML links are called hyperlinks. We use <a> (anchor tag) for page linking. <a> (anchor tag) is use very mostly in HTML. And we'll see a lot of examples of this.

{tocify} $title={Table of Contents}

What is <a>(Anchor Tag) in HTML

With <a> anchor tag, we can link another page in one page. HTML links are called hyperlinks. We use <a> (anchor tag) for page linking.

<a>CodesWithJK</a>

In this, you will need href attribute in page linking. To link one page to another, you must provide a link to that page in the herf attribute.

<a href="https://www.codeswithjk.com">CodesWithJK</a>

HTML Links target attributes

With the target attribute, we have to open the document in the new tab of the browser and current then, so we use this target attribute.

The target attribute has many values which are given below:

_blank: _blank attribute opens the document in a new Tab.
_self: _self attribute opens the document in a current tab.
_parent: _parent attribute opens the document in the parent frame.
_top: This opens the document in full-body of the window.

Example:

<!DOCTYPE html>
<html>
<body>

<a href="https://www.codeswithjk.com/" target="_blank">Visit CodesWithJK</a>

<p>If target="_blank", the link will open in a new browser window or tab.</p>

</body>
</html>

HTML: <a> Anchor Tag Uses With Examples

We will go through some important examples of <a> anchor tags.

HTML Links Hyperlinks

We only call HTML links as hyperlinks. If you click on the links you will jump to another document. You can see this in the example.

We have to write the anchor tag <a herf="#tech"> for the div which we have given, in this way you have to use # to create a hyperlink.

When you click on Click Here for Technology link, you will be scrolled to the page of the Technology section.

Example:

<!DOCTYPE html>
<html>
<body>
<h1>codeswithjk</h1>
<a href="#tech">click here for Technology</a><br><br>
<a href="#me">click here for codeswithjk</a>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<div id="tech">
<h2>Technology</h2>
<p>
Learn Technical Skills from CodesWithJK and Learn all programming languages like C/C++, Python, Java, and other programming languages with our easy-to-follow tutorials. And you can learn Tech, Technology information, Hacking knowledge, Seo, Tips & Tricks, and other social media tricks.
</p>
</div>

<div id="me">
<h2>This is me(codesWithJK)</h2>
<p>
I am CodesWithJK. You Can Learn all programming language on my
site.
</p>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br>

</body>
</html>

HTML Links to an Email Address

To send you an email, you must use the mailto protocol in the href attribute. You would write mailto: "email address" must be typed like this.

Example:

<a href="mailto:codeswithjk@example.com">Send email</a>

HTML Links: Insert Link into Image

To use the image as a link, you must put the <a> tag inside the <img> tag.

Example:

<htmL>
<head>
  
<title>CodesWithJK</title>
</head>
<body>
   <h1>Hello CodesWithJK</h1>
   <a href="https://www.codeswithjk.com/2021/11/html-attributes.html">
  <img src= "https://i.ibb.co/TbZ1Kk6/juned.jpg" style="width:400px; height:100px;">
  </a>
</body>
</html>

HTML Links: Ping Attribute

By using the ping attribute in HTML, you can know how many clicks have happened in the website link. You can use the ping attribute with the anchor tag.

Example:

<a href="https://example.com" ping="https://example.com/tracking click">With a Ping</a>

HTML Links: Style a Color on Link

In HTML, the color for the link is different when it visits, when it is not visited, and when it is active. Similarly, the color of the link changes.

These are of many types which are given below:

a:hover: Hover works when you move the mouse over the text, that text turns green, which you can see in our example.
a:active: Active's work is when the user clicks on the link, it turns blue. which you can see in our example.
a:visited: The function of visited is that the user has already clicked on the anchor text and it remains red. which you can see in our example.

Example:

<style>
a:link {
  color: yellow;
  text-decoration: none;
}

a:visited {
  color: red;
  text-decoration: none;
}

a:hover {
  color: green;
  text-decoration: underline;
}

a:active {
  color: blue;
  text-decoration: underline;
}
</style>

Shopping

Create Artificial Intelligence in Python Like (Jarvis, Friday) - CodesWithJK

2021-12-19T14:00:00.041+05:30

How to Create Artificial Intelligence in Python Like (Jarvis, Friday)

Hello Friends, Today I Show you ("how to create Artificial intelligence, how to create artificial intelligence in python, how to create artificial intelligence like Jarvis"). We are making this artificial program on python program, you can also operate it like us, otherwise, you can also create artificial programs from c++.

Before this you can install Pycharm and visual studio code on your computer by creating your python programs, we are here to use Pycharm, let's start.

{tocify} $title={Table of Contents}

What is Required to build an AI System?

First, before you create artificial programs, you have to install some modules on your computer, first I tell you about the module, and then you can tell me how to install the module on the computer, and how to install it.

1 - Pyttx3:- This model is used to convert the text to speech, and we can use this module also offline. And to install this module we need to type the command on our terminal.

pip install pyttx3

2 - Speech Recognition:- We are creating an artificial talker, which can speak to us, and listen to our voices. What does our assistant say to us And to install this module, We need to type the command on our terminal.

pip install speech-recognition

Linux User:

Sudo apt-get install python3-pyaudio

3 - Subprocess:- The module we use to subprocess the system, means we can use the computer's system from this module, like some of its commands, shutdown, sleep, etc. This module comes built-in with python.

4 - Datetime:- We use this module to take it to show the date. This module comes built-in with python.

5- Wikipedia:- We all know that Wikipedia is the best place for knowledge. That's why we will use the model of Wikipedia in our program, which will output us by searching Wikipedia. We need to type the command on our terminal.

pip install Wikipedia

6 - Web browser:- We use this module for web search. This module comes built-in with python.

7 - Pyjokes:- We collect all the jokes of this module from the Internet. We need to type the command on our terminal.

pip install pyjokes

8 - WolframAlpha:- Algorithm and advanced AI Technology have been used in WolframAlpha, this allows us to solve the question at an expert level. We need to type the command on our terminal.

pip install WolframAlpha

9 - Request:- We use the request module for Making GET and POST. We need to type the command on our terminal.

pip install request

10 - BeautifulSoup:- BeautifulSoup is a library. Which extracts information from web pages from the Internet. We need to type the command on our terminal.

pip install beautifulsoup

11 - Twilio:- He uses the Twilio module for calling and messaging. We need to type the command on our terminal.

pip install Twilio

12 - Ecapture:- The Ecapture module is used to capture the image from the camera. We need to type the command on our terminal.

pip install ecapture

We have told me about some important modules, there are many modules on the Internet, which we can not tell, you can also look at Google.

How to Get Banking Details From IFSC Code Using Python
[8 Steps] How to Become Data Science Master in Python

How to Create Artificial Intelligence Like Jarvis

You can create artificial intelligence (Jarvis) of yourself by doing all these modules. Just you need to have python knowledge, you can do it by looking at my code to do it on this module.

Python AI Program:

import pyttsx3

import datetime

import speech_recognition as sr

import Wikipedia

import pyjokes

import webbrowser

import os

import WolframAlpha

import pywhatkit

import subprocess

import time

import ctypes

# import ecapture

engine = pyttsx3.init('sapi5')

voices = engine.getProperty('voices')

# print(voices[0].id)

engine.setProperty('voice', voices[0].id)

engine.setProperty("rate", 130)

def speak(sound):

    engine.say(sound)

    engine.runAndWait()

def new_time():

    _time = datetime.datetime.now().strftime('%H:%M:%S')

    return speak(f'sir, time is {_time}')

def wishing_time():

    hour = int(datetime.datetime.now().hour)

    if hour>=0 and hour<12:

        speak("Good morning sir")

    elif hour>=12 and hour<18:

        speak("Good afternoon sir")

    elif hour>18 and hour<24:

        speak("Good evening sir")

def takeCommand():

    r = sr.Recognizer()

    with sr.Microphone() as source:

        print("Listening...")

        r.pause_threshold = 1

        sound = r.listen(source)

    try:

        print("Recognizing...")

        future = r.recognize_google(sound, language='en-in')

        print(f'User said: {future}')

    except Exception as e:

        # print(e)

        print("Say that again please...")

        return "None"

    return future

if __name__ == '__main__':

    wishing_time()

    speak("what can i help you")

    while True:

        future = takeCommand().lower()

# time

        if 'time' in future:

            new_time()

    # knowledge bass

        elif 'calculator' in future:

            speak("sir, tell you the first number ")

            first_number = int(takeCommand())

            speak("sir, tell you the second number")

            second_number = int(takeCommand())

            speak("sir, tell your arithmatic operation")

            arithmatic_op = str(takeCommand())

            if arithmatic_op == 'addition':

                result = first_number + second_number

                speak(f'{first_number} + {second_number} is')

                print(result)

                speak(result)

            elif arithmatic_op == 'subtraction':

                result1 = first_number - second_number

                speak(f'{first_number} - {second_number} is')

                print(result1)

                speak(result1)

            elif arithmatic_op == 'multiplication':

                result2 = first_number * second_number

                speak(f'{first_number} * {second_number} is')

                print(result2)

                speak(result2)

            elif arithmatic_op == 'divide':

                result3 = first_number / second_number

                speak(f'{first_number} / {second_number} is')

                print(result3)

                speak(result3)

            elif arithmatic_op == 'asterisk':

                result4 = first_number ** second_number

                speak(f'{first_number} % {second_number} is')

                print(result4)

                speak(result4)

            elif arithmatic_op == 'modulus':

                result5 = first_number % second_number

                speak(f'{first_number} % {second_number} is')

                print(result5)

                speak(result5)

            else:

                speak("Your input is not correct, plz try again")

        elif 'wikipedia' in future:

            speak('searching wikipedia')

            future = future.replace('wikipedia','')

            results = wikipedia.summary(future, sentences=2)

            print(results)

            speak(results)

        elif 'question' in future:

            speak("what your question, sir")

            x = takeCommand()

            app_id = '6H58RP-E8AEV2Q7WW'

            client = wolframalpha.Client(app_id)

            res = client.query(x)

            answer = next(res.results).text

            print(answer)

            speak(answer)

    # name, created, etc more.....

        elif 'name' in future:

            speak('my name is Jarvis')

            speak("sir, what is your good name")

            _name = takeCommand()

            speak('nice name sir,')

        Elif 'thanks' in the future or 'thank you' in the future:

            speak("No problem sir, I am joking")

        Elif 'old' in the future:

            speak("I was launched in 2020, so I'm still fairly young. but I've learned so much. I hope I \'m wise beyond my years")

        Elif 'crush' in future or 'boyfriend' in the future:

            speak('the opportunity rover on mass is my all-time crush, what an adventurer')

        elif 'joke' in future:

            speak(pyjokes.get_joke())

        elif 'how are you' in future:

            speak(' i am good sir,')

            speak('how are you sir')

        elif 'fine' in future or 'good' in future:

            speak('it\'s good to know that your fine')

        elif 'exit' in future:

            speak('thanx for giving me more time')

            exit()

        Elif 'who made you' in the future or 'who created you' in the future:

            speak("I have been created by Junaid")

# opening file in this code

        elif 'open firefox' in future:

            speak('here you go with firefox')

            _path = "C:\\Program Files\\Mozilla Firefox\\firefox.exe"

            os.startfile(_path)

        elif 'open notepad' in future:

            _path = 'C:\\Users\\Juned Ahmed\\Desktop'

            os.startfile(_path)

        elif 'open youtube' in future:

            speak("here you go with youtube")

            webbrowser.open('www.youtube.com')

        elif 'open google' in future:

            speak("here you go with google")

            webbrowser.open('www.google.com')

        elif 'open ms word' in future:

            speak("opening ms word")

            _path = "C:\Program Files\Microsoft Office\root\Office16\WINWORD.EXE"

            os.startfile(_path)

        elif 'open excel' in future:

            speak("opening excel")

            _path = "C:\Program Files\Microsoft Office\root\Office16\EXCEL.EXE"

            os.startfile(_path)

        elif 'create text file' in future:

            speak('give of name of txt file')

            txt_name = takeCommand()

            _filename = open(f'{txt_name}.txt', 'w')

            write_file = takeCommand()

            print(_filename.write(write_file))

            speak('write sucessfully')

            speak("would you like to read this file")

        elif 'play' in future:

            song = future.replace('play','')

            speak('playing' + song )

            pywhatkit.playonyt(song)

        elif 'google' in future:

            search_ = future.replace('google','')

            speak("searching sir")

            pywhatkit.search(search_)

        elif "restart" in future:

            subprocess.call(["shutdown", "/r"])

        elif "hibernate" in future or "sleep" in future:

            speak("Hibernating")

            subprocess.call("shutdown / h")

        elif "log off" in future or "sign out" in future:

            speak("Make sure all the application are closed before sign-out")

            time.sleep(5)

            subprocess.call(["shutdown", "/l"])

        # elif "camera" in future or "take a photo" in future:

        #     ec.capture(0, "Jarvis Camera ", "img.jpg")

        elif 'lock window' in future:

            speak("locking the device")

            ctypes.windll.user32.LockWorkStation()

        elif 'shutdown system' in future:

            speak("Hold On a Sec ! Your system is on its way to shut down")

            subprocess.call('shutdown / p /f')

You've got this code, so you can copy it from here, and if you need a file you can download it from here.

And you can follow us on GitHub, you can find all the python programs on our GitHub.

Github ID

Conclusion

We have learned to create artificial programs (Jarvis), and we have to go about some modules in which artificial programs are there. And you guys will follow us on GitHub, you will get all the codes there, then you will get the next new post.

Thank you.

shopping

Create quiz App with Timer Using HTML CSS & JavaScript - CodesWithJK

2021-12-16T09:05:00.025+05:30

Create Quiz App with Timer Using HTML, CSS, Javascript

Hello friends, today we will know in this article "How to create quiz app in HTML with timer". In this article, we will create a quiz app using HTML, CSS, and JavaScript.

If you also want to create your own quiz by learning HTML, CSS, then you can learn HTML, CSS from our site.

for HTML - Click here

for CSS - Click here

First of all, let us tell you that this source code is not our own, it has been created by "codingnepalweb.com". And all this credit goes to CodingNepalWeb.

Video Tutorial of Create Quiz App With Timer

{tocify} $title={Table of Contents}

Step 1 - Create A HTML File

First of all, you have to create an HTML file, which we have given source code, you can save it on your laptop/computer with .html extension. I am creating an index.html file.

If you do not know what is .html extension is and how to create an HTML file then you can read our post on "HTML Editor".

<!DOCTYPE html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Awesome Quiz App | CodingNepal</title>
    <link rel="stylesheet" href="style.css">
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
    
    <div class="start_btn"><button>Start Quiz</button></div>

    
    <div class="info_box">
        <div class="info-title"><span>Some Rules of this Quiz</span></div>
        <div class="info-list">
            <div class="info">1. You will have only <span>15 seconds</span> per each question.</div>
            <div class="info">2. Once you select your answer, it can't be undone.</div>
            <div class="info">3. You can't select any option once time goes off.</div>
            <div class="info">4. You can't exit from the Quiz while you're playing.</div>
            <div class="info">5. You'll get points on the basis of your correct answers.</div>
        </div>
        <div class="buttons">
            <button class="quit">Exit Quiz</button>
            <button class="restart">Continue</button>
        </div>
    </div>

    
    <div class="quiz_box">
        <header>
            <div class="title">Awesome Quiz Application</div>
            <div class="timer">
                <div class="time_left_txt">Time Left</div>
                <div class="timer_sec">15</div>
            </div>
            <div class="time_line"></div>
        </header>
        <section>
            <div class="que_text">
                
            </div>
            <div class="option_list">
                
            </div>
        </section>

        
        <footer>
            <div class="total_que">
                
            </div>
            <button class="next_btn">Next Que</button>
        </footer>
    </div>

    
    <div class="result_box">
        <div class="icon">
            <i class="fas fa-crown"></i>
        </div>
        <div class="complete_text">You've completed the Quiz!</div>
        <div class="score_text">
            
        </div>
        <div class="buttons">
            <button class="restart">Replay Quiz</button>
            <button class="quit">Quit Quiz</button>
        </div>
    </div>

    
    <script src="js/questions.js"></script>

    
    <script src="js/script.js"></script>

</body>
</html>
</html>

Previous article:

How to Get Banking Details From IFSC Code Using Python

Top 5 Programming Languages to Learn 2022

Step 2 - Create A CSS File

Now you have to create a CSS file, which we have given source code, you can save it on your laptop/computer with the .css extension. I am creating a style.css file.

If you do not know what is .css extension is and how to create a CSS file then you can read our post on "CSS Syntax and Selector".

/* importing google fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body{
    background: #007bff;
}

::selection{
    color: #fff;
    background: #007bff;
}

.start_btn,
.info_box,
.quiz_box,
.result_box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
                0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.info_box.activeInfo,
.quiz_box.activeQuiz,
.result_box.activeResult{
    opacity: 1;
    z-index: 5;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.start_btn button{
    font-size: 25px;
    font-weight: 500;
    color: #007bff;
    padding: 15px 30px;
    outline: none;
    border: none;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
}

.info_box{
    width: 540px;
    background: #fff;
    border-radius: 5px;
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}

.info_box .info-title{
    height: 60px;
    width: 100%;
    border-bottom: 1px solid lightgrey;
    display: flex;
    align-items: center;
    padding: 0 30px;
    border-radius: 5px 5px 0 0;
    font-size: 20px;
    font-weight: 600;
}

.info_box .info-list{
    padding: 15px 30px;
}

.info_box .info-list .info{
    margin: 5px 0;
    font-size: 17px;
}

.info_box .info-list .info span{
    font-weight: 600;
    color: #007bff;
}
.info_box .buttons{
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 30px;
    border-top: 1px solid lightgrey;
}

.info_box .buttons button{
    margin: 0 5px;
    height: 40px;
    width: 100px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    outline: none;
    border-radius: 5px;
    border: 1px solid #007bff;
    transition: all 0.3s ease;
}

.quiz_box{
    width: 550px;
    background: #fff;
    border-radius: 5px;
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}

.quiz_box header{
    position: relative;
    z-index: 2;
    height: 70px;
    padding: 0 30px;
    background: #fff;
    border-radius: 5px 5px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0px 3px 5px 1px rgba(0,0,0,0.1);
}

.quiz_box header .title{
    font-size: 20px;
    font-weight: 600;
}

.quiz_box header .timer{
    color: #004085;
    background: #cce5ff;
    border: 1px solid #b8daff;
    height: 45px;
    padding: 0 8px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 145px;
}

.quiz_box header .timer .time_left_txt{
    font-weight: 400;
    font-size: 17px;
    user-select: none;
}

.quiz_box header .timer .timer_sec{
    font-size: 18px;
    font-weight: 500;
    height: 30px;
    width: 45px;
    color: #fff;
    border-radius: 5px;
    line-height: 30px;
    text-align: center;
    background: #343a40;
    border: 1px solid #343a40;
    user-select: none;
}

.quiz_box header .time_line{
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 3px;
    background: #007bff;
}

section{
    padding: 25px 30px 20px 30px;
    background: #fff;
}

section .que_text{
    font-size: 25px;
    font-weight: 600;
}

section .option_list{
    padding: 20px 0px;
    display: block;
}

section .option_list .option{
    background: aliceblue;
    border: 1px solid #84c5fe;
    border-radius: 5px;
    padding: 8px 15px;
    font-size: 17px;
    margin-bottom: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

section .option_list .option:last-child{
    margin-bottom: 0px;
}

section .option_list .option:hover{
    color: #004085;
    background: #cce5ff;
    border: 1px solid #b8daff;
}

section .option_list .option.correct{
    color: #155724;
    background: #d4edda;
    border: 1px solid #c3e6cb;
}

section .option_list .option.incorrect{
    color: #721c24;
    background: #f8d7da;
    border: 1px solid #f5c6cb;
}

section .option_list .option.disabled{
    pointer-events: none;
}

section .option_list .option .icon{
    height: 26px;
    width: 26px;
    border: 2px solid transparent;
    border-radius: 50%;
    text-align: center;
    font-size: 13px;
    pointer-events: none;
    transition: all 0.3s ease;
    line-height: 24px;
}
.option_list .option .icon.tick{
    color: #23903c;
    border-color: #23903c;
    background: #d4edda;
}

.option_list .option .icon.cross{
    color: #a42834;
    background: #f8d7da;
    border-color: #a42834;
}

footer{
    height: 60px;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid lightgrey;
}

footer .total_que span{
    display: flex;
    user-select: none;
}

footer .total_que span p{
    font-weight: 500;
    padding: 0 5px;
}

footer .total_que span p:first-child{
    padding-left: 0px;
}

footer button{
    height: 40px;
    padding: 0 13px;
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
    border: none;
    outline: none;
    color: #fff;
    border-radius: 5px;
    background: #007bff;
    border: 1px solid #007bff;
    line-height: 10px;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.95);
    transition: all 0.3s ease;
}

footer button:hover{
    background: #0263ca;
}

footer button.show{
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

.result_box{
    background: #fff;
    border-radius: 5px;
    display: flex;
    padding: 25px 30px;
    width: 450px;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}

.result_box .icon{
    font-size: 100px;
    color: #007bff;
    margin-bottom: 10px;
}

.result_box .complete_text{
    font-size: 20px;
    font-weight: 500;
}

.result_box .score_text span{
    display: flex;
    margin: 10px 0;
    font-size: 18px;
    font-weight: 500;
}

.result_box .score_text span p{
    padding: 0 4px;
    font-weight: 600;
}

.result_box .buttons{
    display: flex;
    margin: 20px 0;
}

.result_box .buttons button{
    margin: 0 10px;
    height: 45px;
    padding: 0 20px;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    outline: none;
    border-radius: 5px;
    border: 1px solid #007bff;
    transition: all 0.3s ease;
}

.buttons button.restart{
    color: #fff;
    background: #007bff;
}

.buttons button.restart:hover{
    background: #0263ca;
}

.buttons button.quit{
    color: #007bff;
    background: #fff;
}

.buttons button.quit:hover{
    color: #fff;
    background: #007bff;
}

Step 3 - Create A Javascript File

Now you have to create two JavaScript files here, which you have to save with the .js extension.

We have created a file named "question.js".

// creating an array and passing the number, questions, options, and answers
let questions = [
    {
    numb: 1,
    question: "What does HTML stand for?",
    answer: "Hyper Text Markup Language",
    options: [
      "Hyper Text Preprocessor",
      "Hyper Text Markup Language",
      "Hyper Text Multiple Language",
      "Hyper Tool Multi Language"
    ]
  },
    {
    numb: 2,
    question: "What does CSS stand for?",
    answer: "Cascading Style Sheet",
    options: [
      "Common Style Sheet",
      "Colorful Style Sheet",
      "Computer Style Sheet",
      "Cascading Style Sheet"
    ]
  },
    {
    numb: 3,
    question: "What does PHP stand for?",
    answer: "Hypertext Preprocessor",
    options: [
      "Hypertext Preprocessor",
      "Hypertext Programming",
      "Hypertext Preprogramming",
      "Hometext Preprocessor"
    ]
  },
    {
    numb: 4,
    question: "What does SQL stand for?",
    answer: "Structured Query Language",
    options: [
      "Stylish Question Language",
      "Stylesheet Query Language",
      "Statement Question Language",
      "Structured Query Language"
    ]
  },
    {
    numb: 5,
    question: "What does XML stand for?",
    answer: "eXtensible Markup Language",
    options: [
      "eXtensible Markup Language",
      "eXecutable Multiple Language",
      "eXTra Multi-Program Language",
      "eXamine Multiple Language"
    ]
  },
  // you can uncomment the below codes and make duplicate as more as you want to add question
  // but remember you need to give the numb value serialize like 1,2,3,5,6,7,8,9.....

  //   {
  //   numb: 6,
  //   question: "Your Question is Here",
  //   answer: "Correct answer of the question is here",
  //   options: [
  //     "Option 1",
  //     "option 2",
  //     "option 3",
  //     "option 4"
  //   ]
  // },
];

Lastly, now you have to create another .js file. We save it as "script.js".

//selecting all required elements
const start_btn = document.querySelector(".start_btn button");
const info_box = document.querySelector(".info_box");
const exit_btn = info_box.querySelector(".buttons .quit");
const continue_btn = info_box.querySelector(".buttons .restart");
const quiz_box = document.querySelector(".quiz_box");
const result_box = document.querySelector(".result_box");
const option_list = document.querySelector(".option_list");
const time_line = document.querySelector("header .time_line");
const timeText = document.querySelector(".timer .time_left_txt");
const timeCount = document.querySelector(".timer .timer_sec");

// if startQuiz button clicked
start_btn.onclick = ()=>{
    info_box.classList.add("activeInfo"); //show info box
}

// if exitQuiz button clicked
exit_btn.onclick = ()=>{
    info_box.classList.remove("activeInfo"); //hide info box
}

// if continueQuiz button clicked
continue_btn.onclick = ()=>{
    info_box.classList.remove("activeInfo"); //hide info box
    quiz_box.classList.add("activeQuiz"); //show quiz box
    showQuetions(0); //calling showQestions function
    queCounter(1); //passing 1 parameter to queCounter
    startTimer(15); //calling startTimer function
    startTimerLine(0); //calling startTimerLine function
}

let timeValue =  15;
let que_count = 0;
let que_numb = 1;
let userScore = 0;
let counter;
let counterLine;
let widthValue = 0;

const restart_quiz = result_box.querySelector(".buttons .restart");
const quit_quiz = result_box.querySelector(".buttons .quit");

// if restartQuiz button clicked
restart_quiz.onclick = ()=>{
    quiz_box.classList.add("activeQuiz"); //show quiz box
    result_box.classList.remove("activeResult"); //hide result box
    timeValue = 15;
    que_count = 0;
    que_numb = 1;
    userScore = 0;
    widthValue = 0;
    showQuetions(que_count); //calling showQestions function
    queCounter(que_numb); //passing que_numb value to queCounter
    clearInterval(counter); //clear counter
    clearInterval(counterLine); //clear counterLine
    startTimer(timeValue); //calling startTimer function
    startTimerLine(widthValue); //calling startTimerLine function
    timeText.textContent = "Time Left"; //change the text of timeText to Time Left
    next_btn.classList.remove("show"); //hide the next button
}

// if quitQuiz button clicked
quit_quiz.onclick = ()=>{
    window.location.reload(); //reload the current window
}

const next_btn = document.querySelector("footer .next_btn");
const bottom_ques_counter = document.querySelector("footer .total_que");

// if Next Que button clicked
next_btn.onclick = ()=>{
    if(que_count < questions.length - 1){ //if question count is less than total question length
        que_count++; //increment the que_count value
        que_numb++; //increment the que_numb value
        showQuetions(que_count); //calling showQestions function
        queCounter(que_numb); //passing que_numb value to queCounter
        clearInterval(counter); //clear counter
        clearInterval(counterLine); //clear counterLine
        startTimer(timeValue); //calling startTimer function
        startTimerLine(widthValue); //calling startTimerLine function
        timeText.textContent = "Time Left"; //change the timeText to Time Left
        next_btn.classList.remove("show"); //hide the next button
    }else{
        clearInterval(counter); //clear counter
        clearInterval(counterLine); //clear counterLine
        showResult(); //calling showResult function
    }
}

// getting questions and options from array
function showQuetions(index){
    const que_text = document.querySelector(".que_text");

    //creating a new span and div tag for question and option and passing the value using array index
    let que_tag = '<span>'+ questions[index].numb + ". " + questions[index].question +'</span>';
    let option_tag = '<div class="option"><span>'+ questions[index].options[0] +'</span></div>'
    + '<div class="option"><span>'+ questions[index].options[1] +'</span></div>'
    + '<div class="option"><span>'+ questions[index].options[2] +'</span></div>'
    + '<div class="option"><span>'+ questions[index].options[3] +'</span></div>';
    que_text.innerHTML = que_tag; //adding new span tag inside que_tag
    option_list.innerHTML = option_tag; //adding new div tag inside option_tag

    const option = option_list.querySelectorAll(".option");

    // set onclick attribute to all available options
    for(i=0; i < option.length; i++){
        option[i].setAttribute("onclick", "optionSelected(this)");
    }
}
// creating the new div tags which for icons
let tickIconTag = '<div class="icon tick"><i class="fas fa-check"></i></div>';
let crossIconTag = '<div class="icon cross"><i class="fas fa-times"></i></div>';

//if user clicked on option
function optionSelected(answer){
    clearInterval(counter); //clear counter
    clearInterval(counterLine); //clear counterLine
    let userAns = answer.textContent; //getting user selected option
    let correcAns = questions[que_count].answer; //getting correct answer from array
    const allOptions = option_list.children.length; //getting all option items

    if(userAns == correcAns){ //if user selected option is equal to array's correct answer
        userScore += 1; //upgrading score value with 1
        answer.classList.add("correct"); //adding green color to correct selected option
        answer.insertAdjacentHTML("beforeend", tickIconTag); //adding tick icon to correct selected option
        console.log("Correct Answer");
        console.log("Your correct answers = " + userScore);
    }else{
        answer.classList.add("incorrect"); //adding red color to correct selected option
        answer.insertAdjacentHTML("beforeend", crossIconTag); //adding cross icon to correct selected option
        console.log("Wrong Answer");

        for(i=0; i < allOptions; i++){
            if(option_list.children[i].textContent == correcAns){ //if there is an option which is matched to an array answer
                option_list.children[i].setAttribute("class", "option correct"); //adding green color to matched option
                option_list.children[i].insertAdjacentHTML("beforeend", tickIconTag); //adding tick icon to matched option
                console.log("Auto selected correct answer.");
            }
        }
    }
    for(i=0; i < allOptions; i++){
        option_list.children[i].classList.add("disabled"); //once user select an option then disabled all options
    }
    next_btn.classList.add("show"); //show the next button if user selected any option
}

function showResult(){
    info_box.classList.remove("activeInfo"); //hide info box
    quiz_box.classList.remove("activeQuiz"); //hide quiz box
    result_box.classList.add("activeResult"); //show result box
    const scoreText = result_box.querySelector(".score_text");
    if (userScore > 3){ // if user scored more than 3
        //creating a new span tag and passing the user score number and total question number
        let scoreTag = '<span>and congrats! , You got <p>'+ userScore +'</p> out of <p>'+ questions.length +'</p></span>';
        scoreText.innerHTML = scoreTag;  //adding new span tag inside score_Text
    }
    else if(userScore > 1){ // if user scored more than 1
        let scoreTag = '<span>and nice , You got <p>'+ userScore +'</p> out of <p>'+ questions.length +'</p></span>';
        scoreText.innerHTML = scoreTag;
    }
    else{ // if user scored less than 1
        let scoreTag = '<span>and sorry , You got only <p>'+ userScore +'</p> out of <p>'+ questions.length +'</p></span>';
        scoreText.innerHTML = scoreTag;
    }
}

function startTimer(time){
    counter = setInterval(timer, 1000);
    function timer(){
        timeCount.textContent = time; //changing the value of timeCount with time value
        time--; //decrement the time value
        if(time < 9){ //if timer is less than 9
            let addZero = timeCount.textContent;
            timeCount.textContent = "0" + addZero; //add a 0 before time value
        }
        if(time < 0){ //if timer is less than 0
            clearInterval(counter); //clear counter
            timeText.textContent = "Time Off"; //change the time text to time off
            const allOptions = option_list.children.length; //getting all option items
            let correcAns = questions[que_count].answer; //getting correct answer from array
            for(i=0; i < allOptions; i++){
                if(option_list.children[i].textContent == correcAns){ //if there is an option which is matched to an array answer
                    option_list.children[i].setAttribute("class", "option correct"); //adding green color to matched option
                    option_list.children[i].insertAdjacentHTML("beforeend", tickIconTag); //adding tick icon to matched option
                    console.log("Time Off: Auto selected correct answer.");
                }
            }
            for(i=0; i < allOptions; i++){
                option_list.children[i].classList.add("disabled"); //once user select an option then disabled all options
            }
            next_btn.classList.add("show"); //show the next button if user selected any option
        }
    }
}

function startTimerLine(time){
    counterLine = setInterval(timer, 29);
    function timer(){
        time += 1; //upgrading time value with 1
        time_line.style.width = time + "px"; //increasing width of time_line with px by time value
        if(time > 549){ //if time value is greater than 549
            clearInterval(counterLine); //clear counterLine
        }
    }
}

function queCounter(index){
    //creating a new span tag and passing the question number and total question
    let totalQueCounTag = '<span><p>'+ index +'</p> of <p>'+ questions.length +'</p> Questions</span>';
    bottom_ques_counter.innerHTML = totalQueCounTag;  //adding new span tag inside bottom_ques_counter
}

Finally, we have successfully created this quiz application using HTML, CSS, and Javascript. If you are facing a problem in copying our code then you can download the source code of the Quiz App with Timer from below.

shopping

How to Get Banking Details From IFSC Code Using Python - CodesWithJK

2021-12-12T12:12:00.020+05:30

How to Get Banking Details From IFSC Code Using Python

Hello friend, Today I show you How to Get Banking Details From IFSC Code Using Python. And, Full form of IFSC code is Indian Financial System Code. This 11 Digit alphanumeric code is used in IFSC code.

Friends, Let's start writing a python program and Get banking Details from IFSC code Using Python.

{tocify} $title={Table of Contents}

Method - 1:

We are going to use a module in my Python program, we get banking details from this module.

Ifscapi:- This Module help to collect banking details from the bank. And First, you install this Module in your terminal.

INSTALLATION:

pip install ifscApi

Write a Program:

First, you import a module.
As you can see this Program.

Python 3

#import Module
from ifscApi.getDetails import FetchData

#IFSC Code
IFSC_Code = "ALLA0210885"
Result = FetchData().getdata(IFSC_Code)

print(Result)

OUTPUT:

Related Articles: Top 5 Programming Languages to Learn 2022

[8 Steps] How to Become Data Science Master in Python

Method – 2:

In this method, we are using Razorpay IFSCToolkit. This Toolkit uses to Fetch Data from IFSC Code.

Modules:

request:- we are going to use the request module in my python program. this module allows sending the HTTP/HTTPS request.

Pip install request

Write a Python Program:

1:- First, you import a module.

2:- As you can see this program.

Python 3

# import Module
import requests

#IFSC Code
IFSC_Code = 'ALLA0210885'
URL = "https://ifsc.razorpay.com/"

result = requests.get(URL + IFSC_Code).json()

print(result)

OUTPUT:

Conclusion

We learned from this article that "How to Get Banking Details From IFSC Code Using Python". if you are like this article, please share this article with your friend. if you are facing any problems, please do comment.

Thank you.

shopping

Top 5 Programming Languages to Learn 2022 - CodesWithJK

2021-12-10T09:09:00.021+05:30

Top 5 Programming Languages to Learn 2022

Hello Friend, today I talk to you about "Top 5 Programming Languages to learn in 2022, Top 5 Programming language, top 5 best programming languages, top 5 programming languages". Programming is the most important language in IT sector, you can high Pay Jobs. you earn the highest money in this IT sector after you should learn this language.

Top 5 Programming Languages to Learn 2022

You should learn Data Science, Machine Learning, and Artificial Intelligence in Python Language. and you should learn HTML, CSS, JAVASCRIPT in Web Development. And C/C++ Language is most important to create OS and machine Resources. And You Can Learn App development in Java Language.

you can Learn Web development on this site - Click here

But, there is a hundred programming language on Earth. How will you choose "Top 5 Programming Language" for which you Provide High Salary in Foreign and India? But, No problem We are telling you "Top 5 Programming Language 2022" In this article. which You Should Learn. Let's Start.

top 5 programming languages,top 5 programming languages 2021,top 5 programming languages to learn,top 5 programming languages 2022,top 5 programming languages 2022 CodesWithJK,top 5 programming languages in the world,top 5 programming languages in india,top 5 best programming languages

{tocify} $title={Table of Contents}

1 - Python:-

Python is the most important language for Software Developers. We can do App development, Web development, Data Science, Machine Learning, Artificial intelligence, Game Development from Python. As per a ranking report of Stackoverflow, Python is the Top(#1) Language in 2022 and you should learn this. According to Stackoverflow, you can get the Highest salary in Data Science and Machine learning. and all the companies like Google, Microsoft, Facebook use this language. And I have already told you, what python can do by learning.

2 - JavaScript:-

JavaScript is the most important language for web development. JavaScript is a High Demand language in IT Sector. As per a ranking report of Stackoverflow, Javascript is Top(#2) Language in 2022 and you should learn this. And all the companies like Google, Microsoft, Facebook use this language. We can do Web development, App Development, Game development, and many more. You should learn this language in 2022.

3 - Java:-

Java is the most important language for App Development. The demand for Java has reduced due to the arrival of Kotlin, but still, many developers use Java for development. As per a ranking report of Stackoverflow, Java is the Top(#3) Language in 2022 and you should learn this. We are many frameworks in this language, We can do Android Development, Web Application, Desktop Application, Scientific Application Etc. You should learn this language in 2022.

4 - C / C++:-

C / C++ is the most important language for an operating system, memory Resources, and many more. As per a ranking report of Stackoverflow, C / C++ is the Top(#4) Language in 2022 and you should learn this. And the big tech companies like Adobe, Microsoft, Oracle, Nvidia hire C / C++ Developers. you should learn this language in 2022.

5 - Kotlin:-

Kotlin is a new programming language, we can do Application Development in this language. Google has declared it this is the preferred language for application development. As per a ranking report of Stackoverflow, Kotlin is Top(#5) Language in 2022 and you should learn this. We are many libraries in the Kotlin language, We can do Android Development, Web Application, Desktop Application, Etc. And the big tech companies like Pinterest, Uber, Netflix hire Kotlin Developers. you should learn this language in 2021.

Conclusion

We know "Top 5 Programming Languages to Learn in 2022" in this article. which programming should Language reading for Google, Microsoft, Facebook Etc. if you are Like this article, Plz share it with your friends.

Thank You.

shopping

[8 Steps] How to Become Data Science Master in Python - CodesWithJK

2021-12-09T19:13:00.023+05:30

[8 Steps] How to Become Data Science Master in Python

Hello friend, I Talk to you today, "How to Become a Data Science master in python, [8 Steps] How to become Data Science Master in Python, Data Science With Python, how to become a master in python programming, learn data science in 8 easy steps, data science in python, data science salary".

Data Science is a huge job market in 2021. it is a huge job opportunity in this market. If you want to be a master in data science, then you must first become a python master. Before you understand the basic function of python. let's start friends.

{tocify} $title={Table of Contents}

1. Master in Python Programming

How do I master Python programming?

Python is High- level and case-sensitive programming language. And python is OOP(Object Oriented Programming) Language. that's python language was released in 1991. python is an interpretable language. and it is so simple and easy to learn.

Understand Basic Function in Python:

Before you Learn Data Science, then you know the basic function of python. there are many functions like Keyword, identifier, data types, string, for loop, while loop, variable, control statement, and much more. And this is a big topic, and you can learn python using geeks for geeks, W3school. let's know.

Important Topic in Python:

1. String

2. for loop

3. while loop

4. List

5. Tuple

6. Dictionary

7. Set

8. Function

9. OOP(Object Oriented Programming)

You can Learn from Here - Geeksforgeeks and W3school.

2. Work on Small Project

After you learn the basic function of python, you have to work on a small project. you have gone to the internet and searched any website for python exercises. After searching you can choose any site for exercise. and you can practice them.

You can practice from here - W3resources

3. Learn Data Science Libraries in python

You can use the Best python libraries for Data Science. There are three best libraries in python for data science. Numpy, Pandas, Matplotlib.

Numpy - Numpy is the best python library in python for data science. this is used for the Numerical and computation matrices. this is a supported Multi-dimensional array.

Pandas - The Pandas module is an open-source library, this is used for data manipulation and data analysis. we can create a data frame in the Pandas module. We can use this module for machine learning and deep learning.

Matplotlib - The Matplotlib module is used for data visualization, creating static and interactive visualization. This module gives facilities like scatter plots, pie charts, histograms.

4. Daily Code Continuously

When you are learning any programming language, so You daily practice. it's your logic increase, and you can solve any problems. And you don't have to be afraid of it. You have to practice daily coding. At this time you will get your All coding problem on the Internet. And you can go on Geeksforgeeks and hacker rank after learning Coding, this is aa best platform for coding practice.

Click here - Geeksforgeeks

Click here - Hacker rank

5. Learn basic Math for Data Science and ML

If you should get a job in Data Science and Machine Learning, then you can learn basic math. That's why data science and machine learning may get the most money. This is the Basic Chapter of math, Which you should read.

Math for Data Science:

1. Calculus

2. Linear Algebra

3. Statistics

Math for Machine Learning:

1. Calculus

2. Linear Algebra

3. Statistics and Probability

4. Graph theory

6. Understand And Visualize Data

You can learn "How to Visualize Data in Python". that's an important topic because after you analyze data, you can show him in a graph. for this, you can be using the Matplotlib module for showing data in graphs.

first, you open your Virtual Studio and Pycharm Editor.

import matplotlib.pyplot module as plt

And After you had analyzed the data, you can show it off in graphs.

7. Learn Advance python Concepts

You have had learned basic python concepts and Basic maths, And you have got a good grip on your basic python and basic math, so now you have to learn some advanced topics of Python. You can get a good grip on data science and machine learning by reading Python's Advance topic.

Advanced Topic in Python:

1. Maps Topic

2. Filter Topic

3. Generators Topic

4. Lambda Topic

5. Itertools Topic

8. Practice Python programming and Data Science

if you are following my steps welcome, So you have learned Python Programming and Data Science well. Just like this, you have to practice programming and data science. And you have to get a grip on your Python Programming and Data Science by going to the Internet. And the more you practice, the more you learn. There is a lot of websites here on the internet, this is the top sites for practice for coding, you can go on Hacker rank or Geeksforgeeks.

1. Geeksforgeeks

2. Stackoverflow

3. Hacker rank

Conclusion

We know this article "[8 Steps] How to become Data Science in python programming". And we have had know basic python, advanced python programming, Basic Math, and top Libraries in data science and machine learning in this article. If you have any problem, below on comment. we shall solve your problem. If you have liked a post, please share it with your friends.

Thank You.

shopping