Simple Analog Clock using javascript

Simple Analog Clock using javascript (For Beginners)

Simple Analog Clock using javascript

Simple Analog Clock javascript is a web element that helps show the exact time. You can easily create an analog clock with the help of JavaScript.

In this article, I am going to show you how to create a simple analog clock using JavaScript code. I have designed many more types of JavaScript analog and digital clocks before. This design will be of great help to those who want to learn how to design an analog clock for the first time.

 I made this design using simple HTML, CSS, and JavaScript code. Since I made it for Beginners, here I have tried to use the simplest code. Here is a complete explanation of what each code is used for. This will allow you to learn how to make it very easily.

 First I set the background color of the web page. Here I have used images to make numbers and symbols from 1 to 12. But you can make these numbers manually if you want. I have already made many more designs where I have shown you how to make these numbers manually. Then I made three hands in this watch using HTML and CSS code. I used JavaScript to make those hands work.

Simple Analog Clock Javascript [Live Demo]

 Below is a live demo so you can better understand how it works. Here you will find the necessary source code which you can copy and use in your own work.

See the Pen
simple analog clock 1 by Foolish Developer (@fghty)
on CodePen.

The time used here is not the time on any server. It basically uses time from your device using JavaScript’s new Date function.

 

Below the article, there is a download button with the help of which you can download the source code if needed. Hopefully, the live demo above has helped you fully understand how this analog clock works.

How to make a simple analog clock using JavaScript (more…)

Continue ReadingSimple Analog Clock using javascript (For Beginners)
Responsive Navigation Menu bar using HTML & CSS

Responsive Navigation Menu bar using HTML & CSS

Responsive Navigation Menu bar using HTML & CSS

In this article, I am going to show you how to create a responsive navigation menu bar using HTML, CSS, and javascript. I have designed many types of navigation and side menubars before. However, this design is much simpler and simpler. If you are a beginner and want to know about the concept of a navigation menu bar then this tutorial will definitely help you.

 This is a fully responsive CSS navigation menu bar. Bootstrap or other external links were not used to make Responsive. It has been made Responsive using Pure CSS Code. In this case, I have used a small amount of JavaScript only to execute the menu button.

 First I designed the background for navigation and in this case, I used black color in the background. First of all, I used a logo here. In this case, I have used text to create a logo. However, you can use separate images. 

Then I used five menu items here. I have used the color white for menu items and logos which can be seen very clearly on a black background.

Responsive Navigation Menu bar

It is a fully responsive device so it can adapt itself beautifully to any device. In the case of responsive devices, menu items are completely hidden, instead, a small menu button is seen. 

If you click on that button, you can see the complete menu items. It is a very simple design that you can create if you know the basic HTML CSS.

(more…)

Continue ReadingResponsive Navigation Menu bar using HTML & CSS
Javascript Age Calculator | Calculate Age from Date of Birth
Javascript Age Calculator | Calculate Age from Date of Birth

Javascript Age Calculator | Calculate Age from Date of Birth

Javascript Age Calculator | Calculate Age from Date of Birth

JavaScript Age Calculator is a remarkable JavaScript application that will help to calculate a user’s age. Earlier I have shown many types of JavaScript projects like JavaScript Clock, Random Password Generator, Calculator, etc. 

This is the first time I am going to make such an age calculator. This type of design is used in many cases. Basically, there are different types of registration forms where the user needs to be 18 years of age or whatever. 

In that case, the system will calculate the age of the user as soon as the user inputs his date of birth. In this javascript Age Calculator, I have given three places to input age. Where the user can input the day, month, and year of his date of birth. 

Javascript Age Calculator 

The system will then automatically convert the distance of its date of birth from the current time to year months and days. Here I have designed this system using HTML and CSS code and implemented it using JavaScript. 

First I collected the current date from your device using JavaScript code (new Date). Then we subtract that with your input time and convert the subtraction to years, months and days.

As you can see above, I painted the background # 2782e3 of the web page and made a rectangular box in it. I used a title or heading on top of that box. Then I made three boxes to input using HTML’s input (<input>) function. 

The first, second, and third boxes are designed to input days, months, and years, respectively. Then there is a submit button below which the user can see his current age by clicking on it. I have arranged to show the result at the bottom of the box. 

Here’s how to transform your current age into years, months and days. If you want to know how it works and you want to use it live then use the demo section below. Here you will find the required source code which you can use for your own purposes. 

However, I would urge you to follow the tutorial below if you are a beginner and want to know how I made it (Age Calculator using javascript). 

See the Pen
Age calculator by Foolish Developer (@fghty)
on CodePen.

Hopefully, the demo above has helped you to know and enjoy its live demo.

Calculate Age from Date of Birth using Javascript

Now is the time to get to know it steps by step. I have shared the possible results after each step so that it is more convenient for you to understand. 

At the bottom of the article, I have given a download button with the help of which you can download the source code.

Step 1: Design the webpage and create a box (more…)

Continue ReadingJavascript Age Calculator | Calculate Age from Date of Birth
Simple JavaScript calculator Tutorial for Beginners

Simple JavaScript calculator Tutorial for Beginners

Simple JavaScript calculator Tutorial for Beganers

In this article, I am going to show you how to build a calculator using javascript code. I have already designed many more types of calculators using HTML CSS and JavaScript programming code. If you are a beginner and want to know how to build a JavaScript calculator then this tutorial will definitely help you. 

Here I have explained in full step by step which programming code I have used to create any element. We all know what a calculator is and why it is used. These are mainly used for mathematical calculations. In the design shown in this article, you can do small mathematical calculations like addition, subtraction, multiplication, division, etc. 

HTML helped build its structure and buttons. CSS code designed it. The most significant role here is played by JavaScript code which is used to perform calculations and activate the buttons in the calculator.

       ➤ In this case, I have used seven operator buttons which basically help to do this calculation such as addition, subtraction, multiplication, division, equal, cancel, backspace, etc.

       ➤ In this case, I have used eleven number buttons like 0 to 9.

       ➤ There is a beautiful display where all these calculations can be seen.

Simple JavaScript Calculator [Live Demo]

Follow the demo section below to watch the live demo of this calculator. Here you will find the required source code which you can copy and use in your project.

See the Pen
basic calculator by Foolish Developer (@fghty)
on CodePen.

 As you can see in the demo above, this is a nice and simple JavaScript calculator. In which I used eighteen buttons with the number and operator buttons and put a nice display. I used a different color for the background of the operator numbers and added a hover color to it.

Create Calculator using HTML, CSS & JavaScript

 If you want to make this design, you should definitely follow the tutorial below. First of all, you create an HTML and a CSS file. In this case, I have used a very small amount of CSS programming code so you can not create a separate CSS file. If you want to create a CSS file, then you must attach that file to the HTML file.

Step 1: Create the basic structure (more…)

Continue ReadingSimple JavaScript calculator Tutorial for Beginners