DEV Community: Shantanu Jana

100+ JavaScript Projects With Source Code

Shantanu Jana — Fri, 09 Feb 2024 16:40:35 +0000

Are you looking for the best JavaScript Projects to increase your JavaScript knowledge with source code?

In this article I have shared 100 best JavaScript tutorials. There are all kinds of projects like JavaScript Projects for Beginners, JavaScript Projects for Intermediate and Advanced JavaScript Projects.

So no matter what kind of knowledge you have about JavaScript these projects will help you. 🥳🥳

JavaScript Projects

JavaScript is one of the most popular programming languages used for web development. It's versatile, powerful, and can be used to create a wide range of projects, from simple scripts to complex web applications.

If you're looking to enhance your JavaScript skills or showcase your abilities to potential employers, working on JavaScript projects with source code is a great way to do so.

Here I have given the source code link of each project. As a result, you can practice these JavaScript projects by yourself. 😇

Best JavaScript Projects Ideas

Let's take a look at the Top 100 JavaScript Projects and discuss how to build them.

JavaScript Projects for Beginners

If you're a beginner looking to dive into the world of coding or seeking to expand your skills, starting with simple JavaScript projects can be a fantastic way to learn while having fun. This Beginners Level JavaScript Project will surely help you.

Image Color Picker Javascript

An Image Color Picker in JavaScript is a simple JavaScript Project that allows users to select colors directly from an image.
It enables users to interactively pick colors from an image displayed on a webpage, facilitating tasks such as color matching, color sampling, or extracting color information from images.
Preview & Code

Digital Clock Javascript

A Digital Clock in JavaScript is a web-based application or JavaScript Project that displays the current time in a digital format on a webpage.
It's a common and straightforward project that showcases how JavaScript can be used to create dynamic and interactive content on the web.
Preview & Code

Stopwatch Using Javascript

A Stopwatch using JavaScript is a basic JavaScript project that allows users to measure elapsed time. It typically consists of a start button to begin timing, a stop button to pause the timer, and a reset button to clear the elapsed time and start over.
Preview & Code

RGB Color Slider Javascript

An RGB Color Slider in JavaScript is a perfect JavaScript Project for Beginners that allows users to select colors by adjusting the values of the Red, Green, and Blue (RGB) components of a color.
This interactive component typically consists of three sliders or input fields, one for each color channel, along with a preview area that displays the resulting color based on the selected RGB values.
Preview & Code

JavaScript Age Calculator

A JavaScript Age Calculator is a Easy JavaScript Project for Beginners that calculates a person's age based on their date of birth and the current date. It typically takes input from the user in the form of their birthdate and then computes and displays their age.
Preview & Code

Image Zoom on Hover

Image Zoom on Hover in JavaScript is a feature that allows users to zoom in on an image when they hover their cursor over it.
This effect enhances user experience by providing a closer look at details within an image without requiring the user to click or interact with additional controls.
Preview & Code

OTP Generator Javascript

An OTP (One-Time Password) Generator in JavaScript is a tool that generates a unique code, typically consisting of numeric or alphanumeric characters, which is valid for a single use or for a limited duration.
OTPs are commonly used for user authentication, two-factor authentication (2FA), and account verification processes in web applications.
Preview & Code

JavaScript Flashlight Effect

A JavaScript flashlight effect simulates the illumination produced by a flashlight or spotlight on a webpage. It's an interactive visual effect that enhances user experience by focusing attention on specific elements or areas of the page.
Implementing a flashlight effect typically involves creating a mask layer over the webpage and allowing users to move the flashlight around using their mouse or touch input.

Preview & Code

Image Accordion

An image accordion in JavaScript is a user interface element that displays a set of images in a vertical or horizontal stack, allowing users to expand and collapse individual images to reveal more details or information associated with each image.
This interaction creates a visually appealing way to present a collection of images while conserving space on the webpage.
Preview & Code

Drag and Drop Element

JavaScript Drag and Drop functionality allows users to interact with webpage elements by clicking and dragging them to different locations on the page.
This feature is commonly used in web applications for tasks such as reordering lists, moving elements between containers, or creating interactive user interfaces.

Preview & Code

Random Password Generator

A Random Number Generator (RNG) in JavaScript is a tool that produces random numbers within a specified range or with specific characteristics. Random numbers are often used in applications such as games, simulations, cryptography, and statistical analysis.
JavaScript provides built-in functions and methods for generating random numbers, which can be customized according to the requirements of the application.
Preview & Code

JavaScript Projects for Intermediate

For intermediate JavaScript developers, there are numerous projects that offer opportunities to expand skills, explore new technologies, and delve deeper into web development concepts. Here's a list of JavaScript project ideas tailored for intermediate developers:

Custom Cursor

A custom cursor in JavaScript refers to the ability to replace the default cursor appearance (such as an arrow or hand pointer) with a custom-designed graphic or HTML element. This allows web developers to create unique and visually appealing cursor effects that align with the theme or branding of a website.

Preview & Code

Palindrome Checker App

A Palindrome Checker App in JavaScript is a simple web application that allows users to input a string of characters and check whether it is a palindrome or not.
A palindrome is a word, phrase, number, or other sequence of characters that reads the same forward and backward, disregarding spaces, punctuation, and capitalization.

Preview & Code

Sliding Image Puzzle Javascript

A Sliding Image Puzzle in JavaScript is a classic game where an image is divided into smaller tiles, and the player's objective is to rearrange the tiles by sliding them around to form the original image. This game provides an entertaining and challenging experience while also testing the player's problem-solving skills and spatial reasoning.

Preview & Code

Currency Converter With Javascript

A Currency Converter with JavaScript is a web application that allows users to convert values from one currency to another based on the current exchange rates.
Users typically input the amount they want to convert, select the source currency, and choose the target currency. The application then retrieves the latest exchange rates from an API and calculates the converted amount accordingly.

Preview & Code

Color Guessing Game Javascript

A Color Guessing Game in JavaScript is an interactive web application where players are presented with a target color, and they have to guess the RGB or hexadecimal code of that color. The game typically provides clues to help players make educated guesses, such as showing the color in a square or providing hints about the color components (red, green, blue) or brightness.

Preview & Code

Drag and Drop Sortable List

A Drag and Drop Sortable List in JavaScript is a user interface component that allows users to reorder items in a list by dragging and dropping them to new positions.
This feature is commonly used in web applications for tasks such as rearranging items in a to-do list, sorting images in a gallery, or organizing files in a file manager.

Preview & Code

Touch and Drag Image Slider

A Touch and Drag Image Slider in JavaScript is a user interface component that allows users to swipe or drag images horizontally to navigate through a gallery of images. This type of slider is optimized for touch-enabled devices such as smartphones and tablets but also works seamlessly with mouse-based interactions on desktop browsers.

Preview & Code

Detect Internet Speed Javascript

Detecting internet speed in JavaScript involves measuring the time it takes to download a known-sized file from a server. There are various techniques to achieve this, including using XMLHttpRequest, fetch API, or HTML5 features like the Network Information API.
Preview & Code

JavaScript Memes App

A JavaScript Memes App is a web application that allows users to browse, search, and view memes. It typically fetches memes from an API or database and displays them in a user-friendly interface, often with features such as pagination, sorting, filtering, and social sharing options. Users can interact with the memes, such as liking or sharing them, and may have the ability to upload their own memes.

Preview & Code

Multiple Dice Roller

A Multiple Dice Roller in JavaScript is a tool that allows users to roll multiple dice of different types (e.g., d4, d6, d8, d10, d12, d20) and display the results.
It's commonly used in tabletop role-playing games (RPGs) like Dungeons & Dragons or for various gaming or educational purposes.
Preview & Code

Password Strength Background

Password strength background in JavaScript is a feature that provides visual feedback to users about the strength of their password as they type it into an input field.
This feedback is typically provided by changing the background color of the input field to indicate whether the password is weak, moderate, or strong based on predefined criteria.

Preview & Code

Custom Mouse Hover Effect

A Custom Mouse Hover Effect in JavaScript is a visual effect that changes the appearance or behavior of an element on a webpage when the user hovers their mouse over it.
This effect can be achieved by using CSS transitions or animations combined with JavaScript event listeners to detect mouse hover events and trigger the desired effect.

Preview & Code

Text Similarity Checker

A Text Similarity Checker in JavaScript is a tool or application that measures the similarity between two pieces of text or documents.
Text similarity can be calculated using various algorithms and techniques, such as cosine similarity, Jaccard similarity, Levenshtein distance, or TF-IDF (Term Frequency-Inverse Document Frequency).

Preview & Code

Coin Toss Game using JavaScript

=> Preview & Code

Rock Paper Scissor Game with Javascript

=> Preview & Code

Right Click Context Menu in JavaScript

=> Preview & Code

Advanced JavaScript Projects

Advanced JavaScript projects often involve building complex web applications or software solutions that leverage sophisticated frameworks, libraries, and APIs.
These projects may require expertise in front-end development, back-end development, or full-stack development. Here are some examples of advanced JavaScript projects:

Random Quote Generator with Storage

A Random Quote Generator with Storage in JavaScript is a web application that displays random quotes to users and allows them to save their favorite quotes for later viewing.
The application typically retrieves quotes from a predefined list or an external API, displays them dynamically on the webpage, and provides options for users to store and retrieve their selected quotes using localStorage.

Preview & Code

Screenshot Capture App Using JavaScript

Creating a Screenshot Capture App using JavaScript involves leveraging browser capabilities to capture screenshots of the current webpage or specific elements within the page.
While JavaScript alone cannot directly take screenshots, it can interact with browser APIs to trigger screenshot capture functionalities.

Preview & Code

Alarm App Javascript

An Alarm App in JavaScript is a simple application that allows users to set alarms and receive notifications or alerts at specific times.
It typically involves user interaction to set the desired time for the alarm, and then the app runs in the background, triggering notifications when the set time is reached.

Preview & Code

Text To Speech Converter

A Text-to-Speech (TTS) Converter in JavaScript is a tool or application that converts written text into spoken words. It utilizes browser APIs or third-party libraries to synthesize text into speech and play it through the device's speakers or headphones. Here's a basic implementation of a Text-to-Speech Converter using HTML, CSS, and JavaScript:

Preview & Code

QR Code Generator Javascript

A QR Code Generator in JavaScript is a tool that allows users to create Quick Response (QR) codes dynamically within a web application. QR codes are two-dimensional barcodes that can contain various types of information, such as URLs, text, contact information, or Wi-Fi credentials.
Preview & Code

Quiz App Javascript

A Quiz App in JavaScript is an interactive web application that presents users with a series of questions and allows them to select answers. After answering all the questions, the app evaluates the responses and provides feedback, such as the total score and correct answers.
Preview & Code

Weather App With Javascript

A Weather App with JavaScript is a web application that provides users with current weather information for a specific location. It typically retrieves weather data from a weather API, processes the data, and displays it in a user-friendly interface.
Preview & Code

Custom Video Player

A Custom Video Player in JavaScript is a web JavaScript Project that provides a customized user interface (UI) for playing video content. It typically includes features such as play, pause, volume control, playback speed adjustment, progress bar, fullscreen mode, and custom styling.
Preview & Code

JavaScript Projects for Students

If you are a student then these JavaScript Projects will help you a lot. JavaScript offers a diverse range of projects suitable for students at various skill levels, from beginners to more advanced learners.
These projects not only help in reinforcing fundamental concepts but also provide practical experience in web development. Below are some javascript project ideas for students.

Star Rating Javascript

A Star Rating component in JavaScript is a JavaScript Project for student that allows users to rate items by selecting stars representing different levels of satisfaction or quality. Typically, it consists of a set of clickable star icons arranged horizontally, with the selected stars highlighted to indicate the user's rating.

Preview & Code

Confetti Effect Javascript

The Confetti Effect in JavaScript refers to a graphical effect where colorful "confetti" (small pieces of paper or other materials) are scattered or thrown across the screen, typically in a festive or celebratory manner.
Preview & Code

Scratch Card Javascript

A Scratch Card in JavaScript is a best js project that mimics the experience of scratching off a concealed area to reveal content underneath, similar to a lottery ticket or a promotional card. In web development, this effect is often implemented using HTML5 canvas elements along with JavaScript to handle the interaction.

Preview & Code

Simon Game With Javascript

The Simon game is a classic electronic game of memory skill. It involves a device that plays a series of tones and lights, and the player must then repeat the sequence.
In a JavaScript implementation of the Simon game, you would typically create a user interface with buttons representing each color, and the game logic would involve generating and displaying a sequence of colors for the player to mimic.

Preview & Code

Custom Music Player Javascript

Creating a custom music player in JavaScript involves building a user interface that allows users to control audio playback. Preview & Code

Rich Text Editor

A Rich Text Editor is a component that enables users to edit and format text with various styles and formatting options similar to a word processor. These editors often provide functionalities like bold, italic, underline, text alignment, bullet points, numbered lists, and more.

Preview & Code

If you like these Best JavaScript Projects then I will add more projects to this list. Please don't forget to like share and follow.

Embarking on JavaScript projects with available source code is an excellent way to enhance your programming skills and expand your knowledge. By dissecting existing projects, you can learn from others' code, understand different design patterns, and discover innovative solutions to common challenges.😊😊

Related Post:

Hope you liked these JavaScript Projects. You will get step by step explanation in the source code link which I have given. Hopefully the Best JavaScript Projects Ideas will help you increase your JavaScript knowledge.

So roll up your sleeves, dive into the source code, and start building something amazing! 🥳🥳

How to Create Modal Popup in React JS

Shantanu Jana — Sun, 22 Jan 2023 06:01:02 +0000

In this article you will learn how to create popup box using React. Earlier I have shared many popup window and automatic popup box tutorial using html css and javascript.

In React JS, you can create a Popup component that can be reused throughout your application.

The basic idea is to have a state variable that keeps track of whether the popup should be visible or not and a function that toggles this state.

Here's an example of how you can create a simple Popup component in React JS:

import React, { useState } from 'react';

function Popup({ children }) {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open Popup</button>
      {isOpen && (
        <div className="popup">
          <div className="popup-content">
            {children}
            <button onClick={() => setIsOpen(false)}>Close</button>
          </div>
        </div>
      )}
    </>
  );
}

export default Popup;

In this example, the Popup component uses the useState Hook to manage the state of the popup. It has a state variable isOpen that is initially set to false and a setIsOpen function that toggles the state.

The component renders a button that calls the setIsOpen function with a value of true when clicked, which opens the popup.

The component also renders the children passed to it, and a close button that calls the setIsOpen function with a value of false when clicked, which closes the popup.

You can use this component in other parts of your application by importing it and passing any content you want to display inside the Popup as children, like so:

import Popup from './Popup';

function App() {
  return (
    <Popup>
      <h2>Popup Title</h2>
      <p>Popup message goes here</p>
    </Popup>
  );
}

The code you provided is an example of how you can use the Popup component in your application.

The App function renders the Popup component and passes any content you want to display inside the Popup as children.

It's important to note that this is a basic example and it's necessary to customize the design and functionality to fit your needs, also you can use some libraries like react-modal or react-overlays to have more powerful functionalities.

How to Make a Color Picker in JavaScript?

Shantanu Jana — Sat, 21 Jan 2023 04:18:17 +0000

To create an image color picker using JavaScript, CSS, and HTML, you will need to create an HTML file that includes an image and a color picker element (such as a color input or a color wheel).

You can use CSS to style the image and the color picker. Finally, you can use JavaScript to attach an event listener to the color picker element, so that when the user selects a color, it updates the image's color accordingly.

HTML Code

Here is a sample HTML structure for the image color picker:

<div id="image-container">
  <img id="image" src="image.jpg">
</div>

<label for="color-picker">Select a color:</label>
<input id="color-picker" type="color">

This is an example of an HTML structure for an image color picker. The code creates a div element with the id of "image-container", which serves as a container for the image.

Inside the container, there's an img element with the id of "image" and the source of "image.jpg", which is the image that will be displayed. Below the container, there's a label element with the text "Select a color:" and a corresponding input element with the id of "color-picker" and the type of "color".

The input element with the type of "color" is a standard HTML5 element that creates a color picker. The user can click on the input to open the color picker and select a color from the color wheel. The color picker can also be used to enter a color value in a variety of formats, such as HEX, RGB, or HSL.

CSS Code

In CSS, you can use the #image-container to set the width and height of the image container, and the #image to set the width and height of the image.

#image-container {
  width: 300px;
  height: 300px;
}

#image {
  width: 100%;
  height: 100%;
}

JavaScript Code

In JavaScript, you can use the addEventListener method to attach an event listener to the color picker element. In the event listener callback function, you can use the style.filter property to update the image's color.

const colorPicker = document.getElementById("color-picker");
const image = document.getElementById("image");

colorPicker.addEventListener("input", function() {
  image.style.filter = `hue-rotate(${this.value}deg)`;
});

JavaScript snippet that attaches an event listener to an HTML input element with the id of "color-picker". The event listener listens for the "input" event, which is triggered when the user changes the value of the color picker.

When the event is triggered, the event listener's callback function is executed. The callback function uses JavaScript's style.filter property to update the image's color by applying the hue-rotate filter to the image and setting the degree of rotation based on the value of the color picker.

The hue-rotate function applies a hue rotation on the input image. The value of the filter is the number of degrees around the color circle by which the input samples will be adjusted.
You can also use libraries like CamanJS for image manipulation and color filter.

Comment how you like the tutorial. I have already shared more tutorials of this type here.

Text To Speech Converter with JavaScript

Shantanu Jana — Fri, 20 Jan 2023 11:36:54 +0000

Converting text to speech using HTML, CSS, and JavaScript can be done using the SpeechSynthesis API.

The SpeechSynthesis API is a built-in JavaScript API that allows you to convert text to speech directly in the browser without the need for any external libraries.

Here is an example of how to use the SpeechSynthesis API to convert text to speech in HTML, CSS, and JavaScript:

HTML Code

<div id="text-to-speech">
  <textarea id="text"></textarea>
  <button id="speak-button">Speak</button>
</div>

CSS Code

#text-to-speech {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#text {
  width: 300px;
  height: 100px;
  padding: 10px;
  margin-bottom: 10px;
}

#speak-button {
  padding: 10px;
  font-size: 18px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

JavaScript Code

// Get the text area and speak button elements
let textArea = document.getElementById("text");
let speakButton = document.getElementById("speak-button");

// Add an event listener to the speak button
speakButton.addEventListener("click", function() {
  // Get the text from the text area
  let text = textArea.value;

  // Create a new SpeechSynthesisUtterance object
  let utterance = new SpeechSynthesisUtterance();

  // Set the text and voice of the utterance
  utterance.text = text;
  utterance.voice = window.speechSynthesis.getVoices()[0];

  // Speak the utterance
  window.speechSynthesis.speak(utterance);
});

This example creates a text area and a button in the HTML, styles them using CSS, and then uses JavaScript to add an event listener to the button that converts the text in the text area to speech when the button is clicked.

Related Post:

This is just a basic example and you can customize it further according to your needs by, for example, adding more options to the speech synthesis and also you can use libraries such as responsivevoice.js, meSpeak.js or annyang.js to add more functionalities and features.

How to Play Sound on Button Click in JavaScript

Shantanu Jana — Mon, 25 Apr 2022 14:59:34 +0000

If you want to create JavaScript Play Sound On Click then this tutorial is for you. I have created a button here. When you click on that button, the sound will play.

This type of play sound on click you can use it everywhere in the webpage or in a certain element. In most cases we hear a beep sound in the button. So Beep Sound has been used here too. But you can use any other sound if you want. Watch its live demo to learn how it works.

✅ 100+ Best JavaScript Projects

Very little JavaScript has been used to create this Play Sound Button. If you know a little JavaScript you can easily create it.

HTML Code:
The button was created by the following html code. Here the button function of html is used.

<button>Click me!</button>

CSS Code:
Buttons are designed with some simple css. First I designed the webpage with some code. Then I designed the button and added the hover effect.

* {
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}

html,
body {
height: 100%;
}

body {
display: flex;
align-items: center;
justify-content: center;
background: #dff0f6;
}

button {
font-family: 'Open Sans', sans-serif;
font-size: 1.5rem;
color: #fff;
background: #034d85;
padding: 1.1rem 3.4rem;
border-radius: .2rem;
transition: opacity .2s;
}

button:hover {
cursor: pointer;
background: #053056;
}

JavaScript Code:
Now play sound on click html has been activated by JavaScript.

First line I added audio using JavaScript. Here I have used beep sound. You can use any audio.
Then a global constant of buttons is set.
Then the sound in the 'audio' is linked to the button by the onclick event. Then I have used the play () method here to play the audio. play () method starts playing the current audio.

const audio = new Audio("https://www.fesliyanstudios.com/play-mp3/387");
const buttons = document.querySelectorAll("button");

buttons.forEach(button => {
  button.addEventListener("click", () => {
    audio.play();
  });
});

Hopefully using the tutorial above you will know how to create Play Sound on Button Click.
Related Post:

I have previously created many JavaScript web elements for beginners. Please comment on how you like this onclick play audio button.

How to Create a Draggable Div in JavaScript

Shantanu Jana — Mon, 25 Apr 2022 08:35:21 +0000

This is a simple JavaScript tutorial on how to create Draggable Div. JavaScript Draggable Element You can create very easily if you know the basic JavaScript.

Draggable div we see in many places. Usually seen a lot of time between large applications and websites. However, they are made in a very advanced way. But it is a simple design.

Draggable Div is a kind of element that you can drag anywhere. Here I have created a Draggable profile card.

For your convenience I have given a preview below. Here you will find all the code and live preview.

If you liked this draggable div and want to get to source codes or files then you can easily get it from this article.

In the JavaScript codes, first I added a mouse down event on the header, and inside the function of it, I added a mouse move event and called an onDrag function.

✅ HTML Code:

The basic structure of the Draggable Div element has been created using the following code.

Here I have just created a basic structure i.e. a box. Here you can add the information of your choice.

<div id="dragable">
  <header id="dragzone">
   <!-- add any information-->
  </header>
</div>

✅ CSS Code:
The code below is the css by which the webpage and the draggable element are designed.

* {
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}

html,
body {
height: 100%;
}

body {
background: #78c7ed;
font-family: sans-serif;
}

#dragable {
width: 21rem;
height: 21rem;
border: 0.2rem solid #0f2c65;
border-radius: 0.2rem;
position: absolute;
z-index: 9;
box-shadow: 2px 4px 18px rgba(0, 0, 0, 0.2);
transition: border-color 0.2s, box-shadow 0.2s;
}

#dragable.drag {
border-color: white;
box-shadow: 3px 6px 24px rgba(0, 0, 0, 0.5);
}

#dragable #dragzone {
width: 100%;
height: 100%;
cursor: move;
z-index: 10;
background-color: #0f2c65;
}

✅ JavaScript Code:
Now it's time to activate this css draggable div by some javascript.

A little bit of advanced JavaScript is used here but it will not be difficult to understand Beginners and a half.

const dragElement = (element, dragzone) => {
    let pos1 = 0,
      pos2 = 0,
      pos3 = 0,
      pos4 = 0;
//MouseUp occurs when the user releases the mouse button
    const dragMouseUp = () => {
      document.onmouseup = null;
//onmousemove attribute fires when the pointer is moving while it is over an element.
      document.onmousemove = null;

      element.classList.remove("drag");
    };

    const dragMouseMove = (event) => {

      event.preventDefault();
//clientX property returns the horizontal coordinate of the mouse pointer
      pos1 = pos3 - event.clientX;
//clientY property returns the vertical coordinate of the mouse pointer
      pos2 = pos4 - event.clientY;
      pos3 = event.clientX;
      pos4 = event.clientY;
//offsetTop property returns the top position relative to the parent
      element.style.top = `${element.offsetTop - pos2}px`;
      element.style.left = `${element.offsetLeft - pos1}px`;
    };

    const dragMouseDown = (event) => {
      event.preventDefault();

      pos3 = event.clientX;
      pos4 = event.clientY;

      element.classList.add("drag");

      document.onmouseup = dragMouseUp;
      document.onmousemove = dragMouseMove;
    };

    dragzone.onmousedown = dragMouseDown;
  };

  const dragable = document.getElementById("dragable"),
    dragzone = document.getElementById("dragzone");

  dragElement(dragable, dragzone);

Hopefully by using the code above you will know how to create JavaScript Draggable Div.

Related Post:

If there is any problem, you must comment. If you want, you can download all the code to create Draggable Div element.

How to Create Random Quote Generator in JavaScript

Shantanu Jana — Wed, 20 Apr 2022 03:27:18 +0000

Many of us read Quote to motivate ourselves. However, if you want, you can create your own Quote Generator. I'm not kidding. If you know some basic html, css and javascript then you can easily create a random quote generator.

Now you are wondering where we will get the quote. There are two ways to do this. You can manually add all the quotes to your project. However, there are many problems.

There is another way you can do this easily. You can fetch content from any other website using api link.

JavaScript Quote Generator

Here I have shared a Quote Generator tutorial using api. You can easily create this Random Quote Generator with some html, css and javascript. Watch its live demo to learn how it works.

HTML Code

I have added all the information using the following html. There is a heading, a display and a generate button.

<div class="wrapper">
<!-- heading -->
  <h2>Random Quote Generator</h2>

  <div class="container">
<!-- result box -->
    <div class="display">
      <p id="quote">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptas,magni.</p>
      <h3 id="author">Lorem, ipsum.</h3>
    </div>
<!-- generate button -->
    <button id="btn">Get Quote</button>

  </div>
</div>

CSS Code

Now it's time to design it. Some basic css has been used for this.

I have designed the first webpage and added background color.
Then the headings here are designed.
Box-shadow arrangement has been made to whiten and highlight the background of Quote Generator.
Then the text in the result box is designed.
The button at the end of all is designed. Button's background-color: # 17203d and text color white.

* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}

body {
background-color: #aed7eb;
}

.wrapper {
width: 400px;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}

.wrapper h2{
  padding: 10px;
  width: 100%;
  color: rgb(3, 64, 153);
  text-align: center;
  margin: 0px 30px 50px 0px;
  background: white;
}

.container {
width: 100%;
position: relative;
border-radius: 5px;
text-align: center;
background-color: #ffffff;
padding: 50px 30px;
box-shadow: 0 20px 65px rgba(87, 11, 16, 0.3);
}

.display{
   box-shadow: 0 0 20px rgba(0,139,253,0.25);
   padding: 10px;
   border: 1px solid rgba(9, 82, 158, 0.29);
}

.container p {
color: #142350;
line-height: 2;
font-size: 19px;
}
.container h3 {
font-weight: 600;
color: #570c9d;
margin: 35px 0 10px 35%;
text-transform: capitalize;
}

.container h3::before{
  content: "- ";
  color: rgb(12, 94, 210);
}

.container button {
background-color: #17203d;
border: none;
font-size: 18px;
font-weight: 600;
color: #ffffff;
cursor: pointer;
padding: 15px 45px;
border-radius: 5px;
margin-top: 40px;
}

JavaScript

If you know html and css then the above code is not very difficult for you. But now you need to activate Quote Generator using some JavaScript.

First the constant of some id function has been determined.
Then all the data has been collected using api link. Then the data is stored in the 'url'.
Then store all the calculations in 'getQuote'. Here only the Quote and the author's name have been fetched and then the information has been arranged to be displayed in the webpage with the help of 'innerText'.
Button and onload function has been activated at the end.

//refer div
let quote = document.getElementById("quote");
let author = document.getElementById("author");
let btn = document.getElementById("btn");
//api link
 const url = "https://api.quotable.io/random";

 let getQuote = () => {
//fetch all data
   fetch(url)
     .then((data) => data.json())
     .then((item) => {
//innerText is used to print the plain text information
        quote.innerText = item.content;
        author.innerText = item.author;
     });
 };
//Activate the calculation at page load(onload)
 window.addEventListener("load", getQuote);
//active the button 
 btn.addEventListener("click", getQuote);

Hopefully the above html, css and javascript you have no difficulty in understanding.

Please comment on how you like this Random Quote Generator. If there is any problem, you can let us know by commenting.

Related Post:

How to Create a Palindrome Checker in JavaScript

Shantanu Jana — Tue, 19 Apr 2022 06:19:58 +0000

This is a simple JavaScript project that will detect Palindrome. This is a simple Palindrome Checker made by JavaScript. If you are wondering how to easily identify Palindrome then welcome to this article.

I know 90% of people know what Palindrome is, but there are many users who do not know what it is and what it is used for. Palindrome is actually a word, verse, sentence or a number that reads the same backward or forward.

Palindrome Checker in JavaScript

Now let's come to this design. This is a simple project with a display and an input box. When you input something in the input box, the result can be seen in the display. Watch its live demo to learn how it works.

Now maybe you are wondering how to make it. This JavaScript Palindrome Checker is very easy to make but for that you need to know some JavaScript.

HTML Code

The following html adds basic structure and information.

An area has been created to view the results first. You can see if your input word is Palindrome.
Then an input box is created in which you will input the word or number.
There is a button at the end that will activate the project.

<!--Basic structure-->
<div class="container">
<!--result box-->
  <p id="result"></p>
<!--input box -->
  <input type="text" id="input-text" placeholder="Enter a word to check">
<!-- submit button -->
  <button id="btn">Check</button>
</div>

CSS Code

Now we need to design some css. First the webpage was designed by some css.

Then the basic structure of Palindrome Checker is designed. The box uses min-width: 450px and background-color: #ffffff.
Then the input box is designed. The size of the input box depends on the padding: 13px 7px.
Here I have used the width of the button: 130px and the background color blue.
At the end the display is designed. The size of the result box depends on the amount of content.

/*Basic design of webpage*/
*,
*:before,
*:after{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body{
  background-color: #1f85e0;
}
/*Basic structure of Palindrome Checker*/
.container{
  width: 35%;
  min-width: 450px;
  background-color: #ffffff;
  padding: 50px 35px;
  position: absolute;
  transform: translate(-50%,-50%);
  left: 50%;
  top: 50%;
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 20px 25px rgba(0,0,0,0.18);
}
.container *{
  font-family: "DM Sans", sans-serif;
  outline: none;
}
/*Design the input box*/
input{
  width: 100%;
  border: none;
  border: 2px solid #d5d5d5;
  padding: 13px 7px;
  font-weight: 400;
}
input:focus{
  border-bottom: 2px solid #b156fe;
}
/*Design of submit button*/
button{
  width: 130px;
  padding: 11px;
  background-color: #185bad;
  border: none;
  border-radius: 4px;
  color: #ffffff;
  font-weight: 400;
  margin-top: 30px;
  font-size: 17px;
}
/*Design the result area*/
p{
  text-align: center;
  color: #073b8c;
  font-weight: 500;
  padding: 30px;
  margin-bottom: 40px;
  font-size: 22px;
  box-shadow: 0 0 20px rgba(0,139,253,0.25);
}

JavaScript Code

The work of Palindrome Checker JavaScript design has been done but the real work is still left.

You will need to use some JavaScript to activate it. But there is no need for Beginners to worry. I have given all the necessary explanations.

First the value of the input box is collected and stored in 'txt'.
Then some calculations check whether the input value is Palindrome.
At the end 'textContent' has been arranged to show the result in the display.

document.getElementById("btn").addEventListener("click",function(){
//Input value has been collected
  let txt = document.getElementById("input-text").value;
  checkPalindrome(txt);
});
//I have given all the calculations below
function checkPalindrome(txt){
//'a-zA-Z0-9' will match all alphanumeric characters, i.e. lower case alphabet, upper case alphabet, and all numbers
//The "g" modifier specifies a global match.
  let txt_new = txt.replace(/[^a-zA-Z0-9]/g, '').toLowerCase();
  let len = txt_new.length;
//'len' Indicates the total number of characters present in it
  let halfLen = Math.floor( len/2 );
  let result =document.getElementById("result");
  let i;

  for( i = 0; i < halfLen; i++){
// !== is strict inequality operator
//strict inequality operator checks whether its two operands are not equal, returning a Boolean result.
      if( txt_new[i] !== txt_new[len-1-i]){
          result.textContent = "Sorry! Not a palindrome 😔";
          return;
      }
//textContent property sets or returns the text content of the specified node
      result.textContent = "Yes! It's a palindrome 😍"
  }
}

Hopefully you have no problem understanding the above JavaScript line.

Please comment on how you like this palindrome program in html. I have shared this JavaScript Palindrome Checker live preview link above.

Related Post:

How to Create a Word Counter in JavaScript

Shantanu Jana — Mon, 18 Apr 2022 12:32:38 +0000

This is a simple JavaScript project that will count your input words and characters. JavaScript Word Counter is a common web element that we see in various websites.

One of the best examples of this is Twitter. You can count the words in a box using javascript word count textarea. We have made this design in many more advanced ways.

Here you can count the characters with the word. When you input something into taxtarea, you can see how many characters and how many words it contains.

Word Counter in JavaScript

There are many tutorials on this topic on the internet but most of them are designed in a very complex way. If you want to create a Word Counter app using pure JavaScript then this article will help you.

Simple there is a box and there is a display. The word and character information of the input text in that input box can be seen in the display. Watch its live demo to learn how it works.

If you are a beginner and are wondering how to make it then there is no reason to worry. Because I'm here. I will give you all the code and step by step tutorial to make this JavaScript Word Counter.

HTML Code

The following html code adds the basic structure and simple information of Word Counter or Character Counter.

First there is the display for viewing the results and then there is the input box.

<!-- Basic area of the project -->
<div class="wrapper">
<!--Result box-->
 <div class="count">
<!--Word count results-->
   <div>
     <h5 id="word-count">0</h5>
     <p>Words</p>
   </div>
<!--character count results-->
   <div>
     <h5 id="charac-count">0</h5>
     <p>Characters</p>
   </div>

 </div>

<!--A place to input content-->
 <div class="container">

  <textarea id="input-textarea" rows="12" placeholder="Start Typing here..."></textarea>

 </div>

</div>

CSS Code

Now you have to design this Word and Character counter with some css.

The first webpage has been designed and a color has been added in the background.
Then the result view box has been designed and the text in it has been designed. Border-radius: 5px 5px 0px 0px is used for the beauty of the display.
Then the input box is designed. Here textarea is used to create the input box.

/*Basic design of webpage*/
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}

body {
background-color: #8bc1f7;
}
/*Basic Area Design*/
.wrapper {
position: absolute;
width: 75vmin;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
/*Design of the place to see the result*/
.count {
background-color: #0547ad;
width: 100%;
padding: 7px;
position: relative;
display: flex;
font-family: sans-serif;
justify-content: space-around;
text-align: center;
border-radius: 5px 5px 0px 0px;
}
/*The text of the result*/
.count p {
color: #ceced7;
}
.count h5 {
color: #ffffff;
font-size: 22px;
}
/*input place design*/
.container {
background-color: #ffffff;
padding: 30px 20px 20px 20px;
border-radius: 0px 0px 8px 8px;
box-shadow: 0 30px 50px rgba(30, 21, 49, 0.3);
}

textarea {
width: 100%;
border: none;
resize: none;
outline: none;
font-size: 16px;
line-height: 28px;
padding: 10px;
max-height: 280px;
color: #0e101a;
box-shadow: 0 20px 65px rgba(61, 139, 190, 0.33);
}

JavaScript Code

Now you need to activate this project (How to Create a Word Counter) using very little JavaScript.

The global constants of some id functions have been determined using the first code line.
Then the character counter is activated. The amount of input character is counted by 'inputTextArea.value.length'. Then with the help of "textContent" it is arranged to show in the webpage.
Then Word Count is activated using txt.split method.

//refer div
let inputTextArea = document.getElementById("input-textarea");
let characCount = document.getElementById("charac-count");
let wordCount = document.getElementById("word-count");

 inputTextArea.addEventListener("input", () => {
//value-length command specifies the maximum value length in bytes
//textContent sets or returns the text content of the specified node
   characCount.textContent = inputTextArea.value.length;
//trim() method removes whitespace from both ends of a string
   let txt = inputTextArea.value.trim();
//txt.split(/\s+/) code will split the full classname of an element into an array containing every class
   wordCount.textContent = txt.split(/\s+/).filter((item) => item).length;
 });

Please comment on how you like this Word Counter in JavaScript. If you have any questions about this word counter html then be sure to ask me.

Custom Right Click Context Menu in JavaScript

Shantanu Jana — Mon, 18 Apr 2022 02:59:33 +0000

This is a JavaScript tutorial where I showed you how to create Custom Right Click. If you know basic JavaScript you can create this Custom Right Click Context Menu.

We use more left click of the mouse. However, from the use of right click in most large websites or applications. This type of Custom Right Click Menu is used even in Windows and all other operating systems. Watch its live demo to learn how it works.

Here I will create a simple JavaScript Right Click Context Menu. And I will share complete information on how I made it.

JavaScript Custom Right Click Menu

This type of Custom Context Menu appears when you right-click anywhere on the webpage. Left click again to hide the Custom Menu bar.

As you can see, with the right click of the mouse, a small box appears. There are some menu items in that box. Although you can use something else instead of this menu.

Below I have given all the code and how it was created.

HTML Code

First I have added the menu items using a few lines of simple html. Here are 5 menu items used. You can increase the amount of this menu.

<div id="context-menu">
  <div class="item">View</div>
  <div class="item">Refresh</div>
  <div class="item">Copy</div>
  <div class="item">Customize</div>
  <div class="item">Save As</div>
</div>

CSS Code

Now I have designed the menu item and Right Click Context Menu by css.

First I designed the webpage using some code.
Then the basic design of context-menu has been done.
Here the menu bar's 'visibility: hidden' has been done. This means that the menu bar cannot be seen under normal conditions.
At the end I have designed the menu item and added the hover effect.

* {
 padding: 0;
 margin: 0;
 box-sizing: border-box;
 font-family: "Poppins", sans-serif;
}

body {
 background-color: #dfe8f1;
}

#context-menu {
 background-color: #ffffff;
 box-shadow: 0 0 20px rgba(37, 40, 42, 0.22);
 color: #1f194c;
 width: 10em;
 padding: 0.8em 0.6em;
 font-size: 1.3rem;
 position: fixed;
 visibility: hidden;
}

.item {
 padding: 0.3em 1.2em;
}

.item:hover {
 background-color: rgba(44, 141, 247, 0.2);
 cursor: pointer;
}

JavaScript

Now it's time to activate the Right Click Context Menu using JavaScript. In this case, every line of JavaScript has the necessary explanation.

Even if you are a beginner, you will not have any difficulty in understanding.

    //Events for desktop and touch
    let events = ["contextmenu", "touchstart"];

    //initial declaration
    var timeout;

    //for double tap
    var lastTap = 0;

    //refer menu div
    let contextMenu = document.getElementById("context-menu");

    //same function for both events
//event type is a data structure that defines the data contained in an event
    events.forEach((eventType) => {
      document.addEventListener(
        eventType,
        (e) => {
//preventDefault() method stops the default action of a selected element from happening by a user
          e.preventDefault();
          //x and y position of mouse or touch
//mouseX represents the x-coordinate of the mouse
          let mouseX = e.clientX || e.touches[0].clientX;
//mouseY represents the y-coordinate of the mouse.
          let mouseY = e.clientY || e.touches[0].clientY;
          //height and width of menu
//getBoundingClientRect() method returns the size of an element and its position relative to the viewport
          let menuHeight = contextMenu.getBoundingClientRect().height;
          let menuWidth = contextMenu.getBoundingClientRect().width;
          //width and height of screen
//innerWidth returns the interior width of the window in pixels
          let width = window.innerWidth;
          let height = window.innerHeight;
          //If user clicks/touches near right corner
          if (width - mouseX <= 200) {
            contextMenu.style.borderRadius = "5px 0 5px 5px";
            contextMenu.style.left = width - menuWidth + "px";
            contextMenu.style.top = mouseY + "px";
            //right bottom
            if (height - mouseY <= 200) {
              contextMenu.style.top = mouseY - menuHeight + "px";
              contextMenu.style.borderRadius = "5px 5px 0 5px";
            }
          }
          //left
          else {
            contextMenu.style.borderRadius = "0 5px 5px 5px";
            contextMenu.style.left = mouseX + "px";
            contextMenu.style.top = mouseY + "px";
            //left bottom
            if (height - mouseY <= 200) {
              contextMenu.style.top = mouseY - menuHeight + "px";
              contextMenu.style.borderRadius = "5px 5px 5px 0";
            }
          }
          //display the menu
          contextMenu.style.visibility = "visible";
        },
        { passive: false }
      );
    });

    //for double tap(works on touch devices)
    document.addEventListener("touchend", function (e) {
      //current time
      var currentTime = new Date().getTime();
      //gap between two gaps
      var tapLength = currentTime - lastTap;
      //clear previous timeouts(if any)
//The clearTimeout() method clears a timer set with the setTimeout() method.
      clearTimeout(timeout);
      //if user taps twice in 500ms
      if (tapLength < 500 && tapLength > 0) {
        //hide menu
        contextMenu.style.visibility = "hidden";
        e.preventDefault();
      } else {
        //timeout if user doesn't tap after 500ms
        timeout = setTimeout(function () {
          clearTimeout(timeout);
        }, 500);
      }
      //lastTap set to current time
      lastTap = currentTime;
    });

    //click outside the menu to close it (for click devices)
    document.addEventListener("click", function (e) {
      if (!contextMenu.contains(e.target)) {
        contextMenu.style.visibility = "hidden";
      }
    });

If you want you can watch the video above to know better how this Custom Right Click (Context Menu) works.

Related Post:

Here I have tried to explain as much as possible. Even then, if you have any problem, you can let us know by commenting.

If you like this JavaScript Custom Right Click Context Menu, please comment.

How to Detect Pressed key in JavaScript (Code + Demo)

Shantanu Jana — Sun, 17 Apr 2022 09:20:49 +0000

This simple JavaScript project will help you to detect the pressed key on your keyboard. For example, if you want, every key pressed on your keyboard, let's look at one of the sections of the webpage. Then you can use this type of JavaScript Detect Pressed key project.

We see such designs in many large websites or applications. It will also show various information of the key you entered here such as onkeypress keycode. Watch its live demo to learn how it works.

If you need to detect keypress in any project then you can definitely use this design.

Detect Pressed key in JavaScript

I have shared the complete source code and tutorial here. To know how I created this javascript onkeypress keycode project you need to have some basic idea about javascript.

First a box was created. In the meantime another small box has been made. When you click on a key, two more boxes like that small box will be created and all the information will be seen in those 3 boxes.

✅ HTML Code

The basic structure of large box and small box has been created using the following html.

A box has been created here. The other two small boxes will be created by JavaScript.

<div class="container">
  <div class="key-container">
     <p>Press any key</p>
  </div>
</div>

✅ CSS Code

Now I have designed this detect keypress project using JavaScript.

The first webpage was designed using css.
Then the big box and the small box are designed.
Then the h4 tag is designed. The question arises in your mind that no h4 tag has been used in html. In fact, it has been added to JavaScript.

* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
}

body {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
background: #1276d1;
 }

.container {
display: flex;
width: 400px;
flex-direction: column;
padding: 2rem;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border-radius: 10px;
background: rgba(255, 255, 255, 0.25);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
border: 1px solid rgba(255, 255, 255, 0.18);
}


.key-container {
display: inline-flex;
padding: 20px;
position: relative;
color: #333;
margin: 2.5rem;
font-size: 22px;
flex-direction: column;
font-weight: bold;
min-width: 150px;
background: white;
backdrop-filter: blur(2.5px);
-webkit-backdrop-filter: blur(2.5px);
border-radius: 10px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
border: 1px solid rgba(255, 255, 255, 0.18);
}

.key-container h4 {
color: #333;
position: absolute;
top: -2rem;
right: 0px;
text-align: center;
width: 100%;
}

✅ JavaScript Code

Here is a little bit of JavaScript used to activate this javascript onkeypress keycode.

First a global constant of the big box has been determined.
Then the pressed key has been detected using keydown event.
At the end all information has been arranged to be displayed in the webpage using innerHTML.

const container = document.querySelector(".container");

//The keydown event is fired when a key is pressed.
window.addEventListener("keydown", (e) => {
//console.log is a method to write code to inconspicuously inform the developers what the code is doing.
   console.log(e);
//innerHTML sets the HTML contents of an element on a web page
   container.innerHTML = 
`<div class="key-container"><h4>Key</h4>${
      e.key === " " ? "Space" : e.key
    }</div> 
<div class="key-container"><h4>Code</h4>${
      e.code
    }</div>
<div class="key-container"><h4>Key Code</h4>${e.keyCode}</div>`;
});

Here I have tried to explain as much as possible. Hopefully you have learned how to create JavaScript Detect Pressed key project.

I have created a video tutorial of this design. You can watch that video if you need more information.

Create an Automatic Image Slideshow in HTML CSS

Shantanu Jana — Sat, 16 Apr 2022 07:02:36 +0000

I will help you if you want to create Automatic Image Slideshow. Here I have created an Automatic Image Slider which is made by html and css only.

Yes you are right
This slider made only by html and css, its images will change automatically. However, I have already created a slider using JavaScript. However, to many users, it seemed a bit complicated. Watch its live demo to learn how it works.

So I made this design. First the slider was created by html and the images were added. Then I designed with css and arranged to change the images automatically.

Automatic Image Slideshow in HTML CSS

This Automatic Image Slider in html css has been created in such a simple way that you will be surprised to see.

First I made a simple box. Box width: 500px and a 10 px border used. The use of borders has greatly enhanced the beauty of this image slider.

HTML Code

The following code is the html code with which the structure of the slider and the images have been added. Here I have used 4 images.

<!--Basic structure of slider-->
<div class="container">
<!--Area of the images-->
   <div class="wrapper">
      <img src="https://filmswot.files.wordpress.com/2018/01/coco_dominates_chinese_box_office_.jpg">
      <img src="https://www.foundry.com/sites/default/files/inline-images/Images_003_0.jpg">
      <img src="https://www.foylefilmfestival.org/sites/default/files/COCO%20main%20image%203.jpg">
      <img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F6%2F2017%2F11%2Fcoco_c330_56b_pub-pub16n-186_rgb-2000.jpg">
   </div>

</div>

CSS Code

The code below is css by which the image slider is designed and the automatic conversion of images is implemented.

Basic structure of slider is first designed by some css.
Then the images are designed. The width of the image is kept equal to the width of the slider.
Then animation is added between the images and activated by keyframes.

👉👉 A simple logic has been used to change the image here. Here the total time of animation is divided by the amount of images. At that time we will see the image.

That means at that time we will see that image. Since 4 images have been used here. So we can see each image up to 25% of the total time.

Since the total time of animation is 16 seconds, we can see each image for 4 seconds.

/*The webpage has been designed*/
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    background-color: #ffffff;
}

/*Basic structure of slider*/
.container{
    width: 500px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    overflow: hidden;
    border: 10px solid #ffffff;
    border-radius: 8px;
    box-shadow: -1px 5px 15px black;
}

/*Area of images*/
.wrapper{
    width: 100%;
    display: flex;
    animation: slide 16s infinite;
}

img{
    width: 100%;
}
/*Animation activated by keyframes*/
@keyframes slide{
    0%{
        transform: translateX(0);
    }
    25%{
        transform: translateX(0);
    }
    30%{
        transform: translateX(-100%);
    }
    50%{
        transform: translateX(-100%);
    }
    55%{
        transform: translateX(-200%);
    }
    75%{
        transform: translateX(-200%);
    }
    80%{
        transform: translateX(-300%);
    }
    100%{
        transform: translateX(-300%);
    }
}

Hopefully you have no more questions about this Automatic Image Slideshow in HTML CSS. Let me know in the comments if you have any questions.

Related Post:

I have shared tutorials on many advanced image sliders by JavaScript before. If you know JavaScript then you can see the tutorials of that automatic image slider.

DEV Community: Shantanu Jana

100+ JavaScript Projects With Source Code

JavaScript Projects

Best JavaScript Projects Ideas

JavaScript Projects for Beginners

Image Color Picker Javascript

Digital Clock Javascript

Stopwatch Using Javascript

RGB Color Slider Javascript

JavaScript Age Calculator

Image Zoom on Hover

OTP Generator Javascript

JavaScript Flashlight Effect

Image Accordion

Drag and Drop Element

Random Password Generator

Tip Calculator with JavaScript

Double Range Slider in HTML, CSS, JS

Countdown Timer using JavaScript

Gradient Color Generator with JavaScript

Image Zoom on Hover using Javascript

JavaScript Projects for Intermediate

Custom Cursor

Palindrome Checker App

Sliding Image Puzzle Javascript

Currency Converter With Javascript

Color Guessing Game Javascript

Drag and Drop Sortable List

Touch and Drag Image Slider

Detect Internet Speed Javascript

JavaScript Memes App

Multiple Dice Roller

Password Strength Background

Custom Mouse Hover Effect

Text Similarity Checker

Coin Toss Game using JavaScript

Rock Paper Scissor Game with Javascript

Right Click Context Menu in JavaScript

Advanced JavaScript Projects

Random Quote Generator with Storage

Screenshot Capture App Using JavaScript

Alarm App Javascript

Text To Speech Converter

QR Code Generator Javascript

Quiz App Javascript

Weather App With Javascript

Custom Video Player

JavaScript Projects for Students

Star Rating Javascript

Confetti Effect Javascript

Scratch Card Javascript

Simon Game With Javascript

Custom Music Player Javascript

Rich Text Editor

How to Create Modal Popup in React JS

How to Make a Color Picker in JavaScript?

HTML Code

CSS Code

JavaScript Code

Text To Speech Converter with JavaScript

How to Play Sound on Button Click in JavaScript

How to Create a Draggable Div in JavaScript

How to Create Random Quote Generator in JavaScript

JavaScript Quote Generator

HTML Code

CSS Code

JavaScript

How to Create a Palindrome Checker in JavaScript

Palindrome Checker in JavaScript

HTML Code

CSS Code

JavaScript Code

How to Create a Word Counter in JavaScript

Word Counter in JavaScript

HTML Code

CSS Code

JavaScript Code

Custom Right Click Context Menu in JavaScript

JavaScript Custom Right Click Menu

HTML Code