Random Number Generator

Generate a random number between a (0, 100) range.

Download

HTML

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Random Number Generator</title>
      <link rel="stylesheet" href="styles.css">
    </head>
    
    <body>
      <div class="container">
        <div class="output" id="output"></div>
        <div class="form-group-container">
          <div class="form-group">
            <label for="start">Start</label>
            <input type="number" id="start" name="start" min="0" value="0">
          </div>
          <div class="form-group">
            <label for="end">End</label>
            <input type="number" id="end" name="end" min="0" value="100">
          </div>
        </div>
    
        <button class="generate-btn" id="generate-btn">Generate Random Number</button>
      </div>
    
      <script src="script.js"></script>
    </body>
    
    </html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

    body {
      font-family: "Inter", sans-serif;
      margin: 0;
      padding: 0;
      height: 100vh;
      background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .container {
      background-color: #fff;
      border-radius: 25px;
      padding: 20px;
      border: 1px solid #ccc;
      width: 300px;
      box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
    }
    
    .form-group-container {
      display: flex;
      gap: 20px;
    }
    
    .form-group {
      margin-bottom: 30px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    
    .form-group label {
      font-size: 1.3em;
      font-weight: bold;
      color: #333;
    }
    
    .form-group input {
      padding: 10px;
      border-radius: 12px;
      font-size: 1.3em;
      width: 117px;
    }
    
    .output {
      margin-bottom: 30px;
      font-size: 3em;
      text-align: center;
      font-weight: bold;
    }
    
    .generate-btn {
      padding: 10px;
      font-size: 1.3em;
      cursor: pointer;
      background-color: #007bff;
      color: #fff;
      border: none;
      border-radius: 12px;
      transition: background-color 0.3s;
      width: 100%;
    }
    
    .generate-btn:hover {
      background-color: #0056b3;
    }
    
    .animated {
      animation: animation 1s;
    }
    
    @keyframes animation {
      0% {
        color: #007bff;
      }
    }

JavaScript

document.addEventListener('DOMContentLoaded', function () {
      const output = document.getElementById('output');
      const generateBtn = document.getElementById('generate-btn');
    
      // Generate a default random number when the page loads
      generateRandomNumber();
    
      generateBtn.addEventListener('click', generateRandomNumber);
    
      function generateRandomNumber() {
        const startInput = document.getElementById('start');
        const endInput = document.getElementById('end');
    
        const start = parseInt(startInput.value);
        const end = parseInt(endInput.value);
    
        if (isNaN(start) || isNaN(end) || start >= end) {
          output.textContent = "Please enter valid start and end values.";
          return;
        }
    
        const randomNumber = Math.floor(Math.random() * (end - start + 1)) + start;
        output.textContent = randomNumber;
    
        // Apply animation effect on generating a new number
        output.classList.add('animated');
        setTimeout(() => {
          output.classList.remove('animated');
        }, 500);
      }
    });

Color Generator

Generate a random color with its hexadecimal code.

Download

HTML

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Simple Color Generator</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    
    <body>
        <div class="container">
            <div id="color-box" class="color-box"></div>
            <div class="color-info">
                <div id="color-code" class="color-code">#442A71</div>
                <button id="copy-btn">Copy</button>
            </div>
            <button id="generate-btn">Generate Color</button>
        </div>
        <script src="script.js"></script>
    </body>
    
    </html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

    body {
        font-family: "Inter", sans-serif;
        margin: 0;
        padding: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
    
    .container {
        background-color: #fff;
        border-radius: 25px;
        padding: 20px;
        border: 1px solid #ccc;
        width: 300px;
        box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
    }
    
    .color-box {
        width: 100%;
        height: 290px;
        margin-bottom: 20px;
        border: 1px solid #ccc;
        border-radius: 100%;
        transition: .3s;
        background: #442A71;
    }
    
    .color-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }
    
    .color-code {
        margin-right: 10px;
        font-size: 1.5em;
        font-weight: bold;
    }
    
    #copy-btn {
        padding: 10px;
        font-size: 1.3em;
        cursor: pointer;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 4px;
        transition: background-color 0.3s;
    }
    
    #copy-btn:hover {
        background-color: #0056b3;
    }
    
    #generate-btn {
        padding: 10px;
        font-size: 1.3em;
        cursor: pointer;
        background-color: #6624D9;
        color: #fff;
        border: none;
        border-radius: 12px;
        transition: background-color 0.3s;
        width: 100%;
    }
    
    #generate-btn:hover {
        background-color: #d240f2;
    }

JavaScript

document.addEventListener('DOMContentLoaded', function () {
      const colorBox = document.getElementById('color-box');
      const colorCode = document.getElementById('color-code');
      const generateBtn = document.getElementById('generate-btn');
      const copyBtn = document.getElementById('copy-btn');
  
      generateBtn.addEventListener('click', generateRandomColor);
      copyBtn.addEventListener('click', copyColorCode);
  
      function generateRandomColor() {
          const randomColor = getRandomColor();
          updateColor(randomColor);
      }
  
      function getRandomColor() {
          const letters = '0123456789ABCDEF';
          let color = '#';
          for (let i = 0; i < 6; i++) {
              color += letters[Math.floor(Math.random() * 16)];
          }
          return color;
      }
  
      function updateColor(color) {
          colorBox.style.backgroundColor = color;
          colorCode.textContent = color;
      }
  
      function copyColorCode() {
          const copyText = document.createElement('textarea');
          copyText.value = colorCode.textContent;
          document.body.appendChild(copyText);
          copyText.select();
          copyText.setSelectionRange(0, 99999);
          document.execCommand('copy');
          document.body.removeChild(copyText);
          colorCode.textContent = "Copied!";
          setTimeout(() => {
              colorCode.textContent = copyText.value;
          }, 2000);
      }
  });

Counter

...

Download

HTML

CSS

JavaScript

Up Counter

...

Download

HTML

CSS

JavaScript

Text Resizer

...

Download

HTML

CSS

JavaScript

Play Sound Onclick

...

Download

HTML

CSS

JavaScript

Change Background Color

...

Download

HTML

CSS

JavaScript

Modal Box

...

Download

HTML

CSS

JavaScript

Check Internet Connection

...

Download

HTML

CSS

JavaScript

Traffic Light

...

Download

HTML

CSS

JavaScript

Gradient Generator

...

Download

HTML

CSS

JavaScript

Good Cheap Fast

...

Download

HTML

CSS

JavaScript

Expanding Search Bar

...

Download

HTML

CSS

JavaScript

OTP Authentication

...

Download

HTML

CSS

JavaScript

Detect Key

...

Download

HTML

CSS

JavaScript

Follower Counter

...

Download

HTML

CSS

JavaScript

Date Calculator

...

Download

HTML

CSS

JavaScript

Theme Switcher

...

Download

HTML

CSS

JavaScript

Key Counter

...

Download

HTML

CSS

JavaScript

Step Indicator

...

Download

HTML

CSS

JavaScript

Decimal-Binary Converter

...

Download

HTML

CSS

JavaScript

Sortable List With Drag And Drop

...

Download

HTML

CSS

JavaScript

Image Slider

...

Download

HTML

CSS

JavaScript

Countdown Timer

...

Download

HTML

CSS

JavaScript

Todo List

...

Download

HTML

CSS

JavaScript

Range Control

...

Download

HTML

CSS

JavaScript

Weight Converter

...

Download

HTML

CSS

JavaScript

Browser Detector

...

Download

HTML

CSS

JavaScript

Calculator

...

Download

HTML

CSS

JavaScript

Age Calculator

...

Download

HTML

CSS

JavaScript

Digital Clock

...

Download

HTML

CSS

JavaScript

Stop Watch

...

Download

HTML

CSS

JavaScript

Joke Generator

...

Download

HTML

CSS

JavaScript

Fibonacci Generator

...

Download

HTML

CSS

JavaScript

IBM Calculator

...

Download

HTML

CSS

JavaScript

Calendar

...

Download

HTML

CSS

JavaScript

Product Counter

...

Download

HTML

CSS

JavaScript

Email Validation

...

Download

HTML

CSS

JavaScript

Form Validation

...

Download

HTML

CSS

JavaScript

Percentage Calculator

...

Download

HTML

CSS

JavaScript

Love Calculator

...

Download

HTML

CSS

JavaScript

Tip Calculator

...

Download

HTML

CSS

JavaScript

Analog Clock

...

Download

HTML

CSS

JavaScript

Customize The Parrot

...

Download

HTML

CSS

JavaScript

Halloween Party

...

Download

HTML

CSS

JavaScript

Weather App

...

Download

HTML

CSS

JavaScript

New Year Counter

...

Download

HTML

CSS

JavaScript

Meaning Of Your Name

...

Download

HTML

CSS

JavaScript

Coin Flip

...

Download

HTML

CSS

JavaScript

Height Converter

...

Download

HTML

CSS

JavaScript

Drag And Drop

...

Download

HTML

CSS

JavaScript

Accordion

...

Download

HTML

CSS

JavaScript

Show / Hide Password

...

Download

HTML

CSS

JavaScript

Billionaires Table

...

Download

HTML

CSS

JavaScript

Pet Finder

...

Download

HTML

CSS

JavaScript

Image Finder

...

Download

HTML

CSS

JavaScript

Currency Converter

...

Download

HTML

CSS

JavaScript

Loan Calculator

...

Download

HTML

CSS

JavaScript

Draggable Container

...

Download

HTML

CSS

JavaScript

Lorem Ipsum Generator

...

Download

HTML

CSS

JavaScript

Typing Effect

...

Download

HTML

CSS

JavaScript

Read More / Less

...

Download

HTML

CSS

JavaScript

Hexadecimal Clock

...

Download

HTML

CSS

JavaScript

Palindrome Checker

...

Download

HTML

CSS

JavaScript

Live User Filter

...

Download

HTML

CSS

JavaScript

Expense Tracker

...

Download

HTML

CSS

JavaScript

Animal Generator

...

Download

HTML

CSS

JavaScript

Mouse Position

...

Download

HTML

CSS

JavaScript

Bookmarker App

...

Download

HTML

CSS

JavaScript

Password Strength With Image

...

Download

HTML

CSS

JavaScript

Movie Seat Booking

...

Download

HTML

CSS

JavaScript

Book List App

...

Download

HTML

CSS

JavaScript

Notes App

...

Download

HTML

CSS

JavaScript

Pizza Ordering System

...

Download

HTML

CSS

JavaScript

Meditation App

...

Download

HTML

CSS

JavaScript

Toast Notification App

...

Download

HTML

CSS

JavaScript

Movie App

...

Download

HTML

CSS

JavaScript

Dictionary App

...

Download

HTML

CSS

JavaScript

QR Generator

...

Download

HTML

CSS

JavaScript

Quiz App

...

Download

HTML

CSS

JavaScript

Color Board

...

Download

HTML

CSS

JavaScript

Music Player

...

Download

HTML

CSS

JavaScript

Spinning Roulette

...

Download

HTML

CSS

JavaScript

Product Carousel

...

Download

HTML

CSS

JavaScript

Emoji Rating

...

Download

HTML

CSS

JavaScript

Word Beater

...

Download

HTML

CSS

JavaScript

Weekly Budget

...

Download

HTML

CSS

JavaScript

Recipes App

...

Download

HTML

CSS

JavaScript

Password Validation

...

Download

HTML

CSS

JavaScript

Github Profile Generator

...

Download

HTML

CSS

JavaScript

Shopping Cart

...

Download

HTML

CSS

JavaScript

Drum Kit

...

Download

HTML

CSS

JavaScript

MP3 Player

...

Download

HTML

CSS

JavaScript

Pomodoro Timer

...

Download

HTML

CSS

JavaScript

Password Generator

...

Download

HTML

CSS

JavaScript

Image Generator

...

Download

HTML

CSS

JavaScript

Food Generator

...

Download

HTML

CSS

JavaScript

Check Password Strength

...

Download

HTML

CSS

JavaScript

Piano

...

Download

HTML

CSS

JavaScript

Audio Visualizer

...

Download

HTML

CSS

JavaScript

Color Contrast Generator

...

Download

HTML

CSS

JavaScript

Chatbot

...

Download

HTML

CSS

JavaScript

Guess The Number

...

Download

HTML

CSS

JavaScript

Guess The Color

...

Download

HTML

CSS

JavaScript

Guess The Word

...

Download

HTML

CSS

JavaScript

Rock Paper Scissors

...

Download

HTML

CSS

JavaScript

Math Trainer

...

Download

HTML

CSS

JavaScript

Memory Cards

...

Download

HTML

CSS

JavaScript

Song Lyrics App

...

Download

HTML

CSS

JavaScript

Filter Menu

...

Download

HTML

CSS

JavaScript

Parking Lot App

...

Download

HTML

CSS

JavaScript

Treasure Game

...

Download

HTML

CSS

JavaScript

Hangman Game

...

Download

HTML

CSS

JavaScript

Tic Tac Toe

...

Download

HTML

CSS

JavaScript

Catch The Emoji

...

Download

HTML

CSS

JavaScript

2048 Game

...

Download

HTML

CSS

JavaScript

Space Invaders

...

Download

HTML

CSS

JavaScript

Whack The Mole

...

Download

HTML

CSS

JavaScript

Snake Game

...

Download

HTML

CSS

JavaScript

Concentration Game

...

Download

HTML

CSS

JavaScript

Tennis Table

...

Download

HTML

CSS

JavaScript

Chess

...

Download

HTML

CSS

JavaScript

Tetris

...

Download

HTML

CSS

JavaScript

Brick Breaker Game

...

Download

HTML

CSS

JavaScript