Today I have learned Random color change by using a function in javascript

 Random color change by using a function in javascript:

Introduction

When developing modern websites and web apps with JavaScript, there could be instances where you need to generate random colors, such as:

  • You want to reduce boredom and increase the freshness of your websites
  • To test or debug the appearance and functionality of web elements under different color schemes or contrasts.

This article will show you how to create random RGB colors, random hex (hexadecimal) colors, random HSL colors, and random HTML color names just by using vanilla JavaScript. No third-party libraries are necessary.

Generating random RGB color codes

An RGB color code is three numbers between 0 and 255 that represent the amount of red, green, and blue in a color: rgb(redValue, greenValue, blueValue). They are enclosed in parentheses and separated by commas.

To generate a random RGB color in JavaScript, you need to create three random integers between 0 and 255 using the Math.random() function. And then, you can concatenate them into a string with commas and parentheses.

Generating random hex color codes

A hex color code is a six-digit code that starts with a # and represents the amount of red, green, and blue in a color. Each digit can be from 0 to F (or 15 in decimal).

The solution to creating a random hex color code is to use the Math.random() function to generate random numbers between 0 and 15 and then convert them to hexadecimal using the toString(16) method. You can also use a loop or an array to concatenate the characters into a string.

        color:"red"
 changeButtonColor = () => {
    const newColor = this.getRandomColor();
    this.setState({ color: newColor });
  };
  getRandomColor = () => {
    const letters = '0123456789ABCDEF';
    let color1 = '#';
    for (let i = 0; i < 6; i++) {
      color1 += letters[Math.floor(Math.random() * 16)];
    }
    return color1;
  };
 <div style={{ textAlign: 'center', marginTop: '20px' }}>
        <button
          onClick={this.changeButtonColor}
          style={{ backgroundColor: this.state.color, padding: '10px', cursor: 'pointer' }}
        >
          Click me to change color
        </button>
      </div>
Output:
 num1:0,
        num2:0,
        result:0,
  Num1Change = (e) => {
    this.setState({ num1: parseFloat(e.target.value, 10) || 0 });
  };
  Num2Change = (e) => {
    this.setState({ num2: parseFloat(e.target.value, 10) || 0 });
  };
  addNumbers = () => {
    const { num1, num2 } = this.state;
    const result = num1 / num2;
    this.setState({ result });
  };
<div>
        <label>
          Number 1:
          <input type="text" value={this.state.num1} onChange={this.Num1Change} />
        </label>
        <br />
        <label>
          Number 2:
<input type="text" value={this.state.num2} onChange={this.Num2Change} />
        </label>

<br />
        <button onClick={this.addNumbers}>Division</button>
        <br />
        <div>
          Result: {this.state.result}
        </div>
Output:




Comments

Post a Comment

Popular posts from this blog

Building a Full-Stack Student Management System with React.js and NestJS

  🚀 My Journey Creating a Student Management System 🌟 I'm excited to share my recent project — a Student Management System ! This project gave me hands-on experience in building a full-stack application, enhancing both my frontend and backend development skills. 💡 Project Overview The Student Management System is designed to help educational institutions efficiently manage student data, including enrollment, attendance, and performance. The goal was to create a user-friendly platform for both students and administrators. 🔨 Tech Stack Used ✅ Frontend: JavaScript, HTML, CSS, React.js ✅ Backend: TypeScript, NestJS, Node.js ✅ Database: MongoDB (with _id for unique identifiers) 🌟 Key Features ✔️ Student Registration – Easy registration with unique ID management ✔️ Attendance Tracking – Real-time updates on student attendance ✔️ Performance Reports – Generate and view student performance reports ✔️ Admin Panel – Secure access for administrators to manage student...
Read more

Today I have solved the problem in javascript

 Consider the following scenario: there are N mice and N holes placed at integer points along a line. Given this, find a method that maps mice to holes such that the largest number of steps any mouse takes is minimized.Each move consists of moving one mouse one unit to the left or right, and only one mouse can fit inside each hole.For example, suppose the mice are positioned at [1, 4, 9, 15], and the holes are located at [10, -5, 0, 16]. In this case, the best pairing would require us to send the mouse at 1 to the hole at -5, so our function should return 6. const mice = [1, 4, 9, 15]; const holes = [10, -5, 0, 16]; function minSteps(mice, holes) {    mice.sort((a, b) => a - b);     holes.sort((a, b) => a - b); let maxSteps = 0;     for (let i = 0; i < mice.length; i++) {         let steps = Math.abs(mice[i] - holes[i]);         if (steps > maxSteps) {             maxStep...
Read more

Today I have solved problem in javascript

 You are given an array X of floating-point numbers x1, x2, ... xn. These can be rounded up or down to create a corresponding array Y of integers y1, y2, ... yn. Write an algorithm that finds an appropriate Y array with the following properties: The rounded sums of both arrays should be equal. The absolute pairwise difference between elements is minimized. In other words, |x1- y1| + |x2- y2| + ... + |xn- yn| should be as small as possible. For example, suppose your input is [1.3, 2.3, 4.4]. In this case you cannot do better than [1, 2, 5], which has an absolute difference of |1.3 - 1| + |2.3 - 2| + |4.4 - 5| = 1. const inputArray = [1.3, 2.3, 4.4]; const resultArray = roundArray(inputArray); function roundArray(inputArray) {     const n = inputArray.length;     const roundedArray = [];     let roundedSum = 0; for (let i = 0; i < n; i++) {         consat roundedValue = Math.round(inputArray[i]);         rounded...
Read more