ZuoTi.Pro
Question

Need help with html/javascript

215

Need to make a box, within the box is one color but has all the color codes for that color. The user is able to move the mouse over the color and in another box it displays the color code for where the mouse is moving, The color code changes as the user moves the mouse within the box. If the user clicks on that color code, another box will store the color with the code: Please look at the photo, thanks for any help.

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

main.html

<html>
<head>
<title> Color Picker in HTML & Javascript </title>
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body {
margin: 0;
padding: 0;
background-color: #e6e6e6;
}
h2 {
background-color: #dbdbdb;
margin: 0;
margin-bottom: 15px;
padding: 10px;
font-family: 'Open Sans';
}
#inputs {
display: none;
}
#pallete {
margin-left: 15px;
position: absolute;
height: 30px;
width: 50px;
}
#inputs:checked ~ #color-picker {
opacity: 1;
}
#color-picker {
position: absolute;
left: 70px;
background-color: white;
height: 150px;
width: 185px;
border: solid 1px #ccc;
opacity: 0;
padding: 5px;
}
canvas:hover {
cursor: crosshair;
}

</style>
</head>

<body>

<label for="inputs" id="pallete" style="background-color: red"></label>
<input type="checkbox" id="inputs" checked></input>

<div id="color-picker">
<canvas id="color-box" height="150" width="150"></canvas>
<canvas id="color-boxes" height="150" width="30"></canvas>
</div>

<script>
var blocks = document.getElementById('color-box');
var cntr = blocks.getContext('2d');
var wt = blocks.width;
var ht = blocks.height;

var strips = document.getElementById('color-boxes');
var cntr2 = strips.getContext('2d');
var wt1 = strips.width;
var ht1 = strips.height;

var lbl = document.getElementById('pallete');

var a = 0;
var b = 0;
var flag = false;
var col = 'rgba(255,0,0,1)';

cntr.rect(0, 0, wt, ht);
gradientFill();

cntr2.rect(0, 0, wt1, ht1);
var grids = cntr2.createLinearGradient(0, 0, 0, ht);
grids.addColorStop(0, 'rgba(255, 0, 0, 1)');
grids.addColorStop(0.17, 'rgba(255, 255, 0, 1)');
grids.addColorStop(0.34, 'rgba(0, 255, 0, 1)');
grids.addColorStop(0.51, 'rgba(0, 255, 255, 1)');
grids.addColorStop(0.68, 'rgba(0, 0, 255, 1)');
grids.addColorStop(0.85, 'rgba(255, 0, 255, 1)');
grids.addColorStop(1, 'rgba(255, 0, 0, 1)');
cntr2.fillStyle = grids;
cntr2.fill();

function mouseClicks(e) {
a = e.offsetX;
b = e.offsetY;
var dat = cntr2.getImageData(a, b, 1, 1).data;
col = 'rgba(' + dat[0] + ',' + dat[1] + ',' + dat[2] + ',1)';
gradientFill();
}

function gradientFill() {
cntr.fillStyle = col;
cntr.fillRect(0, 0, wt, ht);

var grdWhite = cntr2.createLinearGradient(0, 0, wt, 0);
grdWhite.addColorStop(0, 'rgba(255,255,255,1)');
grdWhite.addColorStop(1, 'rgba(255,255,255,0)');
cntr.fillStyle = grdWhite;
cntr.fillRect(0, 0, wt, ht);

var blacks = cntr2.createLinearGradient(0, 0, 0, ht);
blacks.addColorStop(0, 'rgba(0,0,0,0)');
blacks.addColorStop(1, 'rgba(0,0,0,1)');
cntr.fillStyle = blacks;
cntr.fillRect(0, 0, wt, ht);
}

function mousedown(e) {
flag = true;
changingColors(e);
}

function mousemove(e) {
if (flag) {
changingColors(e);
}
}

function mouseup(e) {
flag = false;
}

function changingColors(e) {
a = e.offsetX;
b = e.offsetY;
var dat = cntr.getImageData(a, b, 1, 1).data;
col = 'rgba(' + dat[0] + ',' + dat[1] + ',' + dat[2] + ',1)';
lbl.style.backgroundColor = col;
}

strips.addEventListener("mouseClicks", mouseClicks, false);

blocks.addEventListener("mousedown", mousedown, false);
blocks.addEventListener("mouseup", mouseup, false);
blocks.addEventListener("mousemove", mousemove, false);

</script>
</body>

Output:

media%2F780%2F7804e5b7-446d-4e29-8a9a-fc

0 0
Add a comment
Know the answer?
Add Answer to:
Need help with html/javascript Need to make a box, within the box is one color but has all the c...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • Need help with this java assignment please as soon as possible. Also, please make it as...

    Need help with this java assignment please as soon as possible. Also, please make it as simple as possible so I can figure out how you did it if possible. Thanks so much people of chegg. Project 22-2: Validate user entries Validator Test Name: Joel Murach Age: Sales: 10 OK Exit A validation dialog box Invalid Entry XAge is a required field. OK A validation dialog box Validator Test Name: Joel Murach Age: 37 Sales: $100,000.00 OK Operation . This...

  • NEED HELP with HTML with Javascript embedding for form validation project below. I have my code...

    NEED HELP with HTML with Javascript embedding for form validation project below. I have my code below but I'm stuck with validation. If anyone can fix it, I'd really appreciate. ****************************************************************************** CODE: <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head> <title>Nice</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script> var textFromTextArea; function getWords(){ var text =...

  • I need help incorporating javascript into my page. The Lessons page has a message box (not...

    I need help incorporating javascript into my page. The Lessons page has a message box (not an alert box) that becomes visible/invisible when the mouse is moved over/off the small, red hyperlink on the last line that says, "note." The note is 10pt, red, and italic. The message box contains the text, "Students who pre-pay for the entire term will have the registration fee waved." It is 150px wide, with an "azure" background and a black border. It has 5px...

  • LANGUAGE JAVASCRIPT, PHP Need help with PHP and ajax code. The user needs to login but,...

    LANGUAGE JAVASCRIPT, PHP Need help with PHP and ajax code. The user needs to login but, I keep getting an error that I coded "Wrong username and password!" ***PLEASE DONT GIVE ME A NEW CODE THAT IS NOWHERE NEAR THE CODE I SUBMITTED***** PLEASE LOOK AT THE CODE AND SEE ANY ISSUES login.html <!DOCTYPE html> <html> <head> <title>login popup</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style type="text/css"> body { background-color: white; } </style> </head> <body> <center> <h1 style="text-align: center;"> Login </h1> <form>             Login ID:...

  • given below are the project description and their Html and css files i need javascript according...

    given below are the project description and their Html and css files i need javascript according to the project and other files! WEB230 - JavaScript 1 Assignment 6b - Event Delegation Before starting, study the HTML and open it in a browser so that you understand the structure of the document. You will add functionality to perform several tasks in our shopping list app. Clicking the red "X" at the right of an item will delete that item. Clicking on...

  • Can someone please help, third time I'm asking. I need a basic javascript with no push...

    Can someone please help, third time I'm asking. I need a basic javascript with no push or splice command. Please don't post a picture of the code,because my vision is poor and I won't be able to see it. Also, I need breakdown of what's in HTMLand what' s in javascript. All requirements are below. Thanks for your help. This is a 2 part assignment, but both parts can be completed in one program. Also, please follow ALL Required Programming...

  • Can someone help fix this JAVASCRIPT code according to comment instructions javascriot code: window.addEventListener("click", () =>...

    Can someone help fix this JAVASCRIPT code according to comment instructions javascriot code: window.addEventListener("click", () => { console.log("You clicked?"); }); let button = document.querySelector("button"); button.addEventListener("click", () => { console.log("First Button clicked."); }); // How can we modify this so that it will occur when the 2nd button is clicked? // We need to use querySelectorAll which will produce a nodelist/array of all the buttons. Then we can reference which button we want to apply the click event using [] with...

  • i need this in C# please can any one help me out and write the full...

    i need this in C# please can any one help me out and write the full code start from using system till end i am confused and C# is getting me hard.I saw codes from old posts in Chegg but i need the ful complete code please thanks. Module 4 Programming Assignment – OO Design and implementation (50 points) Our Battleship game needs to store a set of ships. Create a new class called Ships. Ships should have the following...

  • I need help writting a Javascript function that does the following its for a HTML/CSS Shopping...

    I need help writting a Javascript function that does the following its for a HTML/CSS Shopping Cart Page CODE This page contains a list of the selected products that includes an image, name, price, quantity, and cost) Because the process is implemented not as real, three products along with its image and price are displayed on the page. The product ID of each product is stored in a hidden textbox. The default amount of each product is 1 and the...

  • One example of computer-aided design (CAD) is building geometric structures inter- actively. In Chapter 4, we...

    One example of computer-aided design (CAD) is building geometric structures inter- actively. In Chapter 4, we will look at ways in which we can model geometric objects comprised of polygons. Here, we want to examine the interactive part. Let’s start by writing an application that will let the user specify a series of axis- aligned rectangles interactively. Each rectangle can be defined by two mouse positions at diagonally opposite corners. Consider the event listener canvas.addEventListener("mousedown", function() { gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer); if...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT