DEV Community: Anand Raj

Where does css placed in html : 3 places for css

Anand Raj — Thu, 28 Jul 2022 03:30:01 +0000

Article is originally published @ bepractical

Hey developers , in this article I am going to show you where does css can be placed inside your html file .

So let’s get started : )
Method to place css in html file

External css
Internal css
Inline css

External css

In this method , you have to write css in an external file and then link that css file in html file .

Let’s assume that you have made an style.css file in your html file directory , and wrote some css code in it . Then in html file you can link the css file like below example

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>My Home Page</title>
</head>
<body>

<h1>Welcome to Homepage !</h1>
<p>Greetings :)</p>

</body>
</html>

<link /> tag is used to link css files in html file . Attribute href is used to give location of css file .

Your style.css does not contain any html tags and file will look something like this

#banner{
  background-color: lightblue;
}

#banner p{
  color: navy;
  margin-left: 20px;
}

Let’s move toward the second method i.e., Internal css

Internal css

This is the second method to place css in html file . In this method there is no need to make an external file for css and link it to the html file .

In this method css is placed inside the html file inside <style> tag of <head> tag like the below code .

<!DOCTYPE html>
<html>
<head>
<style>
#banner{
  background-color: lightblue;
}

#banner p{
  color: navy;
  margin-left: 20px;
}
</style>
<title>My Home Page</title>
</head>
<body>

<h1>Welcome to Homepage !</h1>
<p>Greetings :)</p>

</body>
</html>

Inline css

In this method all the css is applied in the style attribute of that tag like the example below . Style attriubte can contain any number of css properties .

Read full article here 👉 https://bepractical.tech/where-does-css-placed-in-html-3-places-for-css/

How to check battery status with javascript ( 2 simple steps )

Anand Raj — Sun, 24 Jul 2022 01:45:00 +0000

In this tutorial I am going to show you how easily you can check battery status of system using javascript battery API .

Using the battery API various information about the system battery can be extracted , thus increasing the user experience also , in case user needs urgent charging .

Getting battery Information

The battery API is not working in all browser , so first of all before getting the battery status we need to check that if browser supports the battery API or not .

Checking API working in browser

Now to check the working of API in browser we need to use getBattery method on navigator API , as shown in the example below .

if(navigator.getBattery){
    // if battery API is working
}
else{
    // if battery API is not working
}

Check battery status

If the battery API is working then we can check the battery percentage with getBattery() API , this API returns a promise .

navigator.getBattery()
    .then(function(battery) {

        // Get current battery level .
        var batteryLevel = battery.level * 100;
        console.log(batteryLevel);
    })
    .catch(function(e) {
        console.error(e);
    });

The battery object has the following properties we can use to extract more information about sytem battery .

battery.level : to check the battery level
battery.charging : to check if the battery is currently charging or not (true/false)
battery.chargingTime : to check the time remaining in full charge of battery
battery.dischargingTime : to check the time remaining in battery dead .

Now to detect changes in all these properties at real time javascript provide us some event listeners , as shown below .

battery.onlevelchange : to detect change in battery level
battery.onchargingchange : to detect change in power plug in/out of battery
battery.onchargingtimechange : to detect change in battery level
battery.onlevelchange : to detect change in battery level

In the below example as soon as the battery level goes below 15% an alert will popup recommending connecting system to charger .

Read full article here 👉 https://bepractical.tech/how-to-check-battery-status-with-javascript-2-simple-steps/

How to upload file with ajax jquery : Simplest method

Anand Raj — Fri, 22 Jul 2022 08:06:04 +0000

Output

Hey developers , in this tutorial you will learn how to upload file using AJAX Jquery . Basically ajax is a method to send request in backend with reloading the whole page .

Storing an image file in backend requires an file input in html , some styling with css and if you want some animations you can use Javascript .

Jquery is a javascript library , it is mainly used for DOM and ajax is a jquery method used to send request in backend . In javascript ajax is known as xmlHttpRequest .

HTML
CSS
jquery
PHP
Conclusion

HTML File

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<title>Upload file</title>
</head>
<body>
    <div class="container">
        <div class="row d-flex justify-content-center align-items-center" >
            <div class="col-md-6 my-5 d-flex justify-content-start align-items-center flex-column" >
                <img src="" alt="" class = "mb-3 show_image" />
                <div class="file_upload">
                    <input type="file" name="file" id="fileInput">
                    <button class = "uploadButton" >Upload</button>
                </div>
            </div>
        </div>
    </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</body>
</html>

In the above code block img tag is used to show the uploaded image file , and tag is used to choose for image file to be uploaded .

CSS File

.row{
    width:100%;
}
.col-md-6{
    width:500px;
    height:300px;
    border-radius: 10px;
    overflow: hidden;
}
img{
    width:95%;
    height:80%;
}

Write the above code in a seprate css file and link it with the html file .

Jquery code

Before writing jquey code , include jquery’s cdn link into your html file

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Then after write the below jquery code in script tag below jquery linkage into your html file.

$(document).ready(function(){

        $(".uploadButton").click(function(){

            var fd = new FormData();
            var files = $('#fileInput')[0].files;
            // console.log(files);
            // Check file selected or not
            if(files.length > 0 ){
                fd.append('file',files[0]);

                $.ajax({
                    url: 'upload.php',
                    type: 'post',
                    data: fd,
                    success: function(response){
                        if(response){
                            $(".show_img").attr("src",response); 
                        }else{
                            console.log('file not uploaded');
                        }
                    },
                });
            }else{
                alert("Please select a file.");
            }
        });
    });

In the above jquery code we have used FormData() to upload file in backend . After successful uploading of file we are showing it into image tag .

Read Full Article here 👉 https://bepractical.tech/how-to-upload-file-with-ajax-jquery-simplest-method/

Easiest way to connect database in javascript (3 simple steps)

Anand Raj — Mon, 18 Jul 2022 02:06:06 +0000

Javascript is one of the most popular programming languages , as all other languages like PHP , C# , Python they all provides driver to connect with Mysql Server . And unlike the MongoDB database Mysql also provides it’s module for Nodejs to connect with , as Mysql is also a popular relational database so there’s need to be support for Nodejs .

Mysql’s module mysql i.e., driver for Nodejs helps Nodejs developer to connect with Mysql server , it’s a very easy library to use and implement .

In this article you will learn to connect with Mysql database using Javascript Nodejs in 3 simple steps .

Requirements

We need the below two requirements in order to make connection with Mysql database using Javascript Nodejs .

1 . Mysql Server (we are using XAMPP )

2 . Nodejs installed

Step 1 : Install Mysql Nodejs library

To install the mysql library you need to have Nodejs installed in your system . Run the following command to install mysql library .

npm install mysql

After installation you need to require this module in your main file before making connection to database .

Note : Don’t forgot to start Mysql server before making a connection unless you will face an error.

Step 2 : Make connection to database and execute queries

After successful installation of library you can make connection to database . You can make connection to database in 2 ways

1 . Simple connection

2 . Pooled connection

Simple connection

In simple connection you will use the basic components to make a connection to Mysql database . First of all you need to require the mysql library in file and then with createConnection() pass all the required parameters i.e., host , user , password , database as shown in below example .

var mysql = require('mysql'); // requiring nodejs mysql library

var connection = mysql.createConnection({ // creating database connection
    host     : 'localhost',
    user     : 'root',
    password : '',
    database : 'users_db'
})

 // You can refer to this article originally published at
 // https://bepractical.tech/easiest-way-to-connect-database-in-javascript-3-simple-steps/

Article link : https://bepractical.tech/easiest-way-to-connect-database-in-javascript-3-simple-steps/

This is my first post at dev.to . I am a full stack web developer (php) .

Anand Raj — Tue, 15 Mar 2022 02:10:54 +0000