DEV Community: Javacodepoint

Age Calculator Using HTML, CSS, and JavaScript: A Beginner’s Guide

Javacodepoint — Wed, 07 Feb 2024 19:15:40 +0000

Let’s start by creating the structure of our age calculator using HTML. Open your text editor and create a new HTML file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Age Calculator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Age Calculator</h1>
        <div class="form">
            <label for="dob">Date of Birth:</label>
            <input type="date" id="dob">
            <button onclick="calculateAge()">Calculate Age</button>
        </div>
        <div class="result">
            <p>Your age is:</p>
            <p id="ageResult">0 years, 0 months, 0 days</p>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Styling with CSS

To make our age calculator visually appealing, let’s add some CSS to a separate styles.css file. Here’s a simple CSS stylesheet to get you started:

body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

h1 {
    color: #333;
}

.form {
    margin: 20px 0;
}

label {
    font-weight: bold;
}

input[type="date"] {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

button {
    background-color: #007BFF;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}

.result {
    margin-top: 20px;
    font-size: 18px;
}

Calculating Age with JavaScript

Now, let’s add the functionality to calculate the age using JavaScript. Create a script.js file and add the following code:

function calculateAge() {
    const dobInput = document.getElementById('dob').value;
    const dob = new Date(dobInput);
    const currentDate = new Date();

    const ageInMilliseconds = currentDate - dob;
    const ageInYears = ageInMilliseconds / (365 * 24 * 60 * 60 * 1000);
    const age = Math.floor(ageInYears);

    currentDate.setFullYear(currentDate.getFullYear() - age);
    const monthDiff = currentDate.getMonth() - dob.getMonth();

    let months = monthDiff;
    if (currentDate.getDate() < dob.getDate()) {
        months--;
    }

    let days = currentDate.getDate() - dob.getDate();
    if (days < 0) {
        const lastDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 0).getDate();
        days = lastDayOfMonth - dob.getDate() + currentDate.getDate();
    }

    document.getElementById('ageResult').textContent = `${age} years, ${months} months, ${days} days`;
}

Learn more in detail with complete source code with code explanation here: Age Calculator Using HTML, CSS, and JavaScript: A Beginner’s Guide

Preview an image before uploading using jQuery

Javacodepoint — Sun, 13 Mar 2022 13:06:02 +0000

To preview or display an image before uploading it to the Server is providing the best user experience.
Here we are going to use HTML, CSS, and jQuery to develop it.

You just need to follow the below simple steps:

Define the basic HTML
Define the basic CSS for the HTML to apply the style
Define the jQuery code to preview the image and reset

HTML

<head>
    <!-- jQuery library script import -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>  
    <h1>Preview an image before uploading using jQuery</h1>  
    <p>Upload an image file (.JPG,.JPEG,.PNG,.GIF) </p>

    <!-- input element to choose a file for uploading -->
    <input type="file" accept="image/*" id="image-upload" />
    <br>
    <!-- img element to preview or display the uploading image -->
    <img id="image-container" />
    <br>
    <button id="upload-btn" >Upload</button>
    <button id="cancel-btn" >Cancel</button>
</body>

CSS

/* to make everything center aligned */
body{
    text-align:center;
}

/* to set specific height and width for image preview */
#image-container{
    margin : 20px;
    height: 200px;
    width: 400px;
    background-color:#eee;
    border: 1px dashed #000;
}

jQuery code

/* This function will call when page loaded successfully */    
$(document).ready(function(){

    /* This function will call when onchange event fired */        
    $("#image-upload").on("change",function(){

      /* Current this object refer to input element */         
      var $input = $(this);
      var reader = new FileReader(); 
      reader.onload = function(){
            $("#image-container").attr("src", reader.result);
      } 
      reader.readAsDataURL($input[0].files[0]);
    });


    /* This function will call when upload button clicked */       
    $("#upload-btn").on("click",function(){
        /* file validation logic goes here if required */     
        /* image uploading logic goes here */
        alert("Upload logic need to be write here...");

    });

    /* This function will call when cancel button clicked */       
    $("#cancel-btn").on("click",function(){
        /* Reset input element */
        $('#image-upload').val("");

        /* Clear image preview container */
        $('#image-container').attr("src","");
    });

  });

Learn detailed explaination in article here: Preview an image before uploading using jQuery

File upload validations in javascript

Javacodepoint — Thu, 17 Feb 2022 08:27:36 +0000

In the web application, from the security point of view file validation is the most important parameter that needs to be considered by each developer especially when doing the file upload. The validations can be either client-side or server-side or maybe both.

This article shows you how could you validate the File Type (Extension) and File Size before uploading it to the server. This demonstration will be shown for the client-side validation using javascript.

File Type (Extension) Validation

Using Javascript, we could easily validate the file type by extracting the file extension with the allowed file types.

Example of File Type Validation

Below is the sample example for the file type validation. In this example, we upload files having extensions .jpeg/.jpg/.png/.gif only. We are going to define a javascript function validateFileType() that will be called on the upload button click.

<!DOCTYPE html>
<html>  
<head>
    <title>
        File type validation while uploading using JavaScript
    </title>
    <style>
        body{
            text-align:center;
        }
    </style>
</head>  
<body>  
    <h1>File type validation while uploading using JavaScript</h1>  
    <p>Upload an image (.jpg,.jpeg,.png,.gif)</p>

    <!-- input element to choose a file for uploading -->
    <input type="file" id="file-upload" />
    <br><br>

    <!-- button element to validate file type on click event -->
    <button onclick="validateFileType()">Upload</button>

    <script>

    /* javascript function to validate file type */
    function validateFileType() {
        var inputElement = document.getElementById('file-upload');
        var files = inputElement.files;
        if(files.length==0){
            alert("Please choose a file first...");
            return false;
        }else{
            var filename = files[0].name;

            /* getting file extenstion eg- .jpg,.png, etc */
            var extension = filename.substr(filename.lastIndexOf("."));

            /* define allowed file types */
            var allowedExtensionsRegx = /(\.jpg|\.jpeg|\.png|\.gif)$/i;

            /* testing extension with regular expression */
            var isAllowed = allowedExtensionsRegx.test(extension);

            if(isAllowed){
                alert("File type is valid for the upload");
                /* file upload logic goes here... */
            }else{
                alert("Invalid File Type.");
                return false;
            }
        }
    }
    </script>
</body>  
</html>

Let’s understand the above code implementation with sample points:

An HTML element is defined with attribute type=”file” to choose a file for uploading.
An HTML element is defined to call the validateFileType() function on click event to validate file type before uploading.
Inside validateFileType(), getting inputElement by calling javascript function getElementById().
Using inputElement.files, getting the files object.
Using files.length, checking wether user has chosen any file or not.
Using files[0].name, getting the name of the file with extension (eg- wallpager.png).
Defining regular expression allowedExtensionsRegx variable with allowed file types(.JPG, .JPEG, .PNG, .GIF only).
Using the test() function, checking wether the file type is allowed or not. It returns boolean value true or false.

Preview

Learn more: https://javacodepoint.com/file-upload-validations-in-javascript/

Star pattern programs [Tricks] in java

Javacodepoint — Sat, 15 Jan 2022 07:44:09 +0000

Pattern printing programs help you to enhance your logical skills, coding, and looping concept. These programs are frequently asked by the interviewer to check the logical skills of the programmer.

In this article, you will learn the simple tricks to develop the logic for Star pattern printing. These tricks will not only help you to understand the Star pattern programs but also help you to understand Alphabet/Character patterns and Number patterns.

Tricks to develop pattern programs logic

Here you are going to learn 8 simple tricks to develop almost all types of pattern programs. All the tricks will be in three steps, first two steps are simple but the third step is a little tricky. The third step is very important for developing the logic.

Let’s see all the 8 tricks one by one:

Trick-1:

Let’s develop the logic for the above pattern:

Let me explain the above steps with simple points:

Step-1: Given pattern

Step-2:

The given pattern can be converted in to the box format like the above.
The box format is repersented in Rows(1,2,3,4,5) and Columns(1,2,3,4,5).

Step-3:

Let’s assume variable n(required number of rows), eg. n=5.
In the above image, the blue color area representing the Line(row) whereas the green color area representing the Star printing.
Line can be represented either in increasing order(1,2,3,4,5) or in decreasing order(5,4,3,2,1).
In the given pattern, first-line is printing 1 star, second-line is printing 2 stars, third-line is printing 3 stars, and so on.
Now you can see in the green area, we have mentioned it like 1 to 1, 1 to 2, 1 to 3, 1 to 4, and 1 to 5.
Now match the common patterns from both(blue area and green area), here you can see we have matched it with red color box.
Now as we have selected lines in increasing order(1,2,3,4,5), so we can write it like 1 to n and then it can be further assumed as the variable i.
Similarly in the green area, we can write it like 1 to i and then it can be further assumed as the vriable j.
Now we can write a for loop for the variable i is like for(int i=1; i<=n; i++){ …} to change the line and another for loop for the variable j is like for(int j=1; j<=i; j++){ …} to print the star. Hence, here we required only two for loops to print the given pattern.

Let’s see the complete logic below:



package com.javacodepoint.patterns;

public class StarPattern {

    // Main Method
    public static void main(String[] args) {

        // Initializing required number of lines/rows
        int n = 5;

        // Outer loop for the line/row change
        for(int i=1; i<=n; i++) {

            // Inner loop for the star printing
            for(int j=1; j<=i; j++) {

                // Printing the star without changing the line
                System.out.print("*");
            }

            // Line/Row change
            System.out.println();
        }
    }

}

Visit the below link to learn all the triks:

https://javacodepoint.com/logical-programs/star-pattern-programs-tricks-in-java/