DEV Community: Rajamanickam

Countdown Timer using JavaScript

Rajamanickam — Sat, 26 Aug 2023 10:06:09 +0000

Introduction
In this step-by-step tutorial, we will learn how to create a basic countdown timer using JavaScript. Countdown timers are commonly used in websites to create anticipation and inform users about upcoming events, promotions, or product launches. We will build a countdown timer that displays days, hours, minutes, and seconds until a specified date and time.

Step 1: Set Up the HTML Structure
The first step is to create the HTML structure for our countdown timer. We'll use a simple HTML layout with placeholders for days, hours, minutes, and seconds.

Step 2: Style the Countdown Timer
We'll add some basic CSS to style our countdown timer. Create a file named "style.css" and link it in the HTML file.

Step 3: Create the Countdown Logic
Now, let's create the JavaScript code to calculate and display the countdown. Create a file named "script.js" and link it in the HTML file.

Step 4: Test Your Countdown Timer
Open the HTML file in a web browser, and you should see the countdown timer displaying the time remaining until the specified target date and time.

Conclusion
In this tutorial, we've created a simple countdown timer using HTML, CSS, and JavaScript. You can further customize the timer's appearance and behavior to suit your project's needs.

Watch on tutorial : https://www.youtube.com/watch?v=Ei3SIwjAAMU

Building a Simple PHP CRUD Operation

Rajamanickam — Fri, 18 Aug 2023 17:32:48 +0000

In this tutorial, we'll walk you through the process of creating a basic PHP CRUD (Create, Read, Update, Delete) operation. By the end of this guide, you'll have a grasp of how to implement fundamental CRUD operations using PHP and MySQL.

Prerequisites
Before we begin, ensure you have the following set up:

A web server (e.g., Apache)
PHP installed on your server
MySQL database

Database Connection
Create a file named database.php to establish a connection to the database:

Create Operation will provide a form to add new data:

Read Operation to display the list of data:

Update Operation to edit the selected data:

Delete Operation to delete the selected data:

You've successfully created a simple PHP CRUD system for managing blog content. This tutorial has covered the basics of creating, reading, and interacting with data in a MySQL database using PHP

Watch on video : https://www.youtube.com/watch?v=Us0kty-enMM

Check out the full project here on Github: https://github.com/erajamanickam/simple-crud-operation-in-php

Age calculator | Frontendmentor challenge

Rajamanickam — Sat, 05 Aug 2023 16:18:02 +0000

Introduction:

An age calculator is a useful tool for determining a person's age based on their birthdate. Whether you're building a website with age restrictions or simply want to offer visitors a convenient way to calculate their age, this step-by-step guide will walk you through the process of creating an age calculator using HTML, CSS, and JavaScript/jQuery.

Table of Contents:

Understanding the Purpose of an Age Calculator
Setting Up the HTML Structure
Styling the Age Calculator with CSS
Implementing Age Calculation Using JavaScript/jQuery
Adding Error Handling and Validation
Displaying the Calculated Age
Conclusion

- Understanding the Purpose of an Age Calculator
An age calculator is a tool that takes a person's birthdate as input and calculates their current age. It's commonly used on websites that have age restrictions for content or services. For example, an online store selling alcoholic beverages may use an age calculator to verify customers' eligibility.

- Setting Up the HTML Structure
Begin by creating the HTML structure for the age calculator. You'll need input fields for day, month, and year, a button to trigger the calculation, and placeholders to display the calculated age. Use appropriate HTML elements and attributes to ensure semantic structure.

- Styling the Age Calculator with CSS
Apply CSS styles to enhance the appearance of the age calculator. Use CSS classes to target specific elements, such as input fields and the calculation button. Employ CSS properties to adjust dimensions, colors, borders, and spacing, creating an aesthetically pleasing design.

- Implementing Age Calculation Using JavaScript/jQuery
Add interactivity to the age calculator by using JavaScript/jQuery to handle calculations. Attach a click event listener to the calculation button. Retrieve the values from the input fields using jQuery selectors. Calculate the age in years, months, and days based on the entered birthdate and the current date.

- Adding Error Handling and Validation
Implement error handling to ensure accurate results. Validate user input to prevent invalid or empty values. Use jQuery to display error messages dynamically and change label colors and input borders to indicate errors. This enhances the user experience and provides clear feedback.

- Displaying the Calculated Age
Display the calculated age in the appropriate result placeholders. Use jQuery to update the content of the result elements dynamically. Ensure that the calculated age is accurate and presented clearly to the user.

- Conclusion
In this guide, you've learned how to create an age calculator from scratch using HTML, CSS, and JavaScript/jQuery. Building an age calculator is an excellent way to practice your web development skills and enhance your understanding of interactivity. Feel free to customize and expand the calculator's features, such as allowing users to select their birthdate from a calendar or displaying additional information.

Watch on video : https://youtu.be/UPyNp-SVV4M

Source will be available on : https://github.com/erajamanickam/age-calculator

Live demo : https://age-calculator-challenge-demo.vercel.app/

Codepen : https://codepen.io/erajamanickam/pen/wvQOEQL

Blog Application Nodejs

Rajamanickam — Sat, 17 Jun 2023 15:10:21 +0000

The Blogging Platform is a web application that allows users to create, manage, and publish their own blog posts. It provides a user-friendly interface for writing and organizing blog content, as well as features for user authentication, comment management, and blog customization.

Key Features

User Registration and Login Authentication
Blog Creation and Management
Blog List and Sorting
Blog Comment Management
Dashboard

User Registration and Login Authentication
Users can sign up for an account and log in to the platform using their credentials.

Blog Creation and Management
Authenticated users can create new blog posts, edit existing posts, and delete unwanted posts. The platform provides a rich text editor for easy content creation, allowing users to format text, add images, and include other media.

Blog List and Sorting
The platform displays a list of blog posts, ordered by the latest date. Users can browse through the blog list to discover and read the most recent posts.

Blog Comment Management
Users can leave comments on blog posts to engage in discussions. They can also edit and delete their own comments. The comments are displayed below each blog post, showing the user's name, comment content, and the timestamp of the comment.

Dashboard
Authenticated users have access to a dashboard that provides an overview of their blog activity. The dashboard includes statistics on blog views, comments, and engagement.

Check out the full project here on Github: https://github.com/erajamanickam/blog-application-nodejs

Watch on video : https://youtu.be/VwKQA4Bs6P0

Minimalist accordion design

Rajamanickam — Sun, 30 Apr 2023 19:49:15 +0000

In this article, we'll learn how to implement a bootstrap accordion with responsive.

First of all, create html structure

While development use the boostrap cdn

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>

Adding accordion component with bootstrap

<div class="accordion" id="accordionExample">
    <div class="accordion-item">
      <h2 class="accordion-header" id="headingOne">
        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Accordion Item #1
        </button>
      </h2>
      <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
        <div class="accordion-body">
          <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
        </div>
      </div>
    </div>
</div>

Now we can get skeleton of accordion

and adding custom style using my source code

Source will be available on : https://github.com/erajamanickam/simple-accordion

Live demo of minimalist accordion :
https://simple-accordion-css.vercel.app/

Watch on video : https://www.youtube.com/watch?v=nBiMV9kCBqA&t=26s

Codepen : https://codepen.io/erajamanickam/pen/rNqzReE

Netflix UI Clone

Rajamanickam — Sun, 02 Apr 2023 06:39:56 +0000

Creating a Netflix clone UI using HTML and CSS can be a challenging task, but it can also be a great way to practice your web development skills.

Source will be available on : https://github.com/erajamanickam/netflix-ui-clone

Live demo : https://netflix-ui-clone-css.vercel.app/

Watch on video : https://youtu.be/Bfsqmwq_1Uw

Codepen : https://codepen.io/erajamanickam/pen/OJoervB

Dark light mode toggle

Rajamanickam — Sun, 19 Mar 2023 06:27:05 +0000

In this post, I'm going to show you how you can easily create a Dark/Light mode toggle using CSS, JavaScript.

Create two CSS classes, one for the light mode and one for the dark mode.

Create a checkbox input in your HTML code to act as the toggle switch:
In this step, we create a checkbox input element that will act as the toggle switch for our dark-light mode. We use the label element to wrap the input element and a span element with the class slider round for the toggle button.

The id attribute of the input element is used to reference the element in our JavaScript code later.

Add some JavaScript code to toggle the dark mode class
In this step, we use JavaScript to toggle the dark mode class when the toggle switch is clicked. We add an event listener to the input element that listens for the change event and calls the mode function.

We also use the localStorage object to store the user's preference for light or dark mode, so that the mode persists even when the user leaves and returns to the site. We check the value of localStorage.getItem('mode') to see if the user has previously selected a mode, and if so, we set the data-theme attribute and the toggle button accordingly.

By following these steps, you can create a dark-light mode toggle that allows your users to switch between different color schemes for your website or web application.

Source will be available on : https://github.com/erajamanickam/dark-light-mode

Live demo : https://dark-light-mode-css.vercel.app/

Watch on video : https://youtu.be/hBzKhTkLGWU

Codepen : https://codepen.io/erajamanickam/pen/JjaBmpB

Add to cart using javascript

Rajamanickam — Sun, 05 Mar 2023 15:07:44 +0000

In this article, we'll learn how to implement this feature using JavaScript and local storage.

Adding items to a shopping cart is a common feature in e-commerce websites.

Localstorage
Local storage is a feature available in modern web browsers that allows websites to store data locally on the user's device. This data persists even after the user closes the browser or turns off their device, making it an ideal choice for storing shopping cart data.

Save Data to Local Storage
localStorage.setItem(key, value);

Read Data from Local Storage
localStorage.getItem(key);

Remove Data from Local Storage
localStorage.removeItem(key);

Remove All (Clear Local Storage)
localStorage.clear();

Shopping Cart
To add an item to the shopping cart using JavaScript and local storage, we need to follow the following steps:

Create a function that takes the item to be added as a parameter.
Retrieve the current cart data from local storage.
Check if the item to be added already exists in the cart. If so, increase its quantity. If not, add the item to the cart with a quantity of 1.
Save the updated cart data to local storage.
Update the UI to reflect the changes in the cart.

Filter
A category filter allows users to filter a list of items based on categories

Search Products
The jQuery code waits for the document to be ready and then attaches a keyup event listener to the search input field. This event will be triggered whenever the user types or deletes a character in the search box.

I hope this tutorial will be useful to you

Source will be available on : https://github.com/erajamanickam/add-to-cart-javascript

Live demo : https://add-to-cart-javascript.vercel.app/

Watch on video : https://youtu.be/UPyNp-SVV4M

Codepen : https://codepen.io/erajamanickam/pen/YzOjZLa

Send email using reactjs

Rajamanickam — Sun, 26 Feb 2023 16:04:15 +0000

Create a React.js application using either Create React App or by setting up a React project manually.

Install the emailjs-com package by running the following command in the terminal:

npm install emailjs-com

Import the emailjs-com package in your React component where you want to send the email:

Initialize Email.js by providing your Email.js user ID. This ID can be obtained by creating a free account on the Email.js website.

Emailjs.com

A quick and simple way to get a good understanding of EmailJS is to follow our "Contact Form" tutorial that covers all the fundamentals of EmailJS.

Create a function in your component to send the email. The function should use the send method provided by the emailjs-com package and pass the necessary parameters such as the service ID, template ID, template parameters, and callback function.

Now we can implement Regex Form validation.

To add regular expression (regex) validation to your email sending form in React, you can use JavaScript's built-in RegExp object to match the input data against a pattern.

If the input data does not match the pattern, you can display an error message to the user. Here's an example:

For Validation:

Emailjs Dashboard:

Email message:

Source will be available on : https://github.com/erajamanickam/how-to-sent-email-in-reactjs-using-emailjs

Live demo : https://how-to-sent-email-in-reactjs.vercel.app/

Watch on video : https://youtu.be/W4JUdgR8a0E

Real time battery level using javascript

Rajamanickam — Tue, 24 Jan 2023 18:02:55 +0000

In this tutorial we will make a real-time battery level indicator using JavaScript.

You will need to use the Navigator.getBattery() method to access the battery information of the device. This method returns a Promise that resolves to a BatteryManager object, which contains information about the battery level, charging status, and other properties.

Here is an example of how you can use the Navigator.getBattery() method to create a real-time battery level indicator:

This code uses the level property of the BatteryManager object to get the current battery level and then sets the width of the progress bar to match.

The addEventListener() method is used to listen for the levelchange event, which is fired whenever the battery level changes, so the progress bar can be updated in real-time.

Source will be available on : https://github.com/erajamanickam/real-time-battery-level

Live demo of Real time battery level indicator : https://erajamanickam.github.io/real-time-battery-level/

Watch on video : https://www.youtube.com/watch?v=aGtoHum4ruA

Codepen : https://codepen.io/erajamanickam/pen/zYJLZPK

Simple Product enquiry in php with mail function

Rajamanickam — Tue, 10 Jan 2023 17:53:30 +0000

Create simple form in the fields of Name, Email, Mobile, Address and Product Count and amount.

Now, Fetch submitted Time and Date with country wise using PHP

submitting the form data to the server.

isset($_POST['submit'])

get values submitted via HTTP POST method.

While submitting form, Inject the current date and time in hidden type

Next step, Send values in Mail using php mailto function
PHP mail() function is used to send email in PHP. You can send text message, html message and attachment with message using PHP mail() function.

mailto(to, subject, header, message);

When you send a text message using PHP then all the content will be treated as simple text. Even if you will include HTML tags in a text message, it will be displayed as simple text and HTML tags will not be formatted according to HTML syntax.

Adding simple css for styling..

Preview:

Email Data:

Github : https://github.com/erajamanickam/product-enquire-php-with-mail
Demo : https://erajaman.000webhostapp.com/product-enquire/
Youtube : https://www.youtube.com/watch?v=M_ByzcrmHjQ

Star Rating Feedback using Javascript

Rajamanickam — Mon, 19 Dec 2022 19:48:08 +0000

In this tutorial has helped you learn how to create star rating feedback using javascript

First of all, create simple form

<form method="GET" name="feedback" action="#" onsubmit="feedBack(); return false">
      <input type="radio" name="star" id="rate" value="">
      <textarea cols="30" id="comment" placeholder="Describe your comment"></textarea>
</form>

while development use the fontawesome icons and google fonts

Now get the input values using javascript

function feedBack() {
 var rating_Count = document.querySelector("input[name=star]:checked").value;
    var comment = document.getElementById('comment').value; 
document.getElementById('comment_text').innerHTML = comment;
    document.getElementById('star_count').innerHTML = rating_Count;
  }

Adding simple validation

document.getElementById('comment').value === ''
if value is empty shown error message.

Youtube Video : https://youtube.com/shorts/2LLre0ld1pk?feature=share
Demo : https://star-rating-feedback.vercel.app/
Portfolio : https://rajamanickam.vercel.app/
Github : https://github.com/erajamanickam/star-rating-feedback
Codepen : https://codepen.io/erajamanickam/pen/dyjydOj