Breaking News: Grepper is joining You.com. Read the official announcement!

javascipt rambow genrate code

MUBASHIR GUJJAR answered on March 22, 2024 Popularity 1/10 Helpfulness 1/10

answer javascipt rambow genrate code

javascipt rambow genrate code

Comment

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rainbow Drawer</title>
  <!-- Include Tailwind CSS -->
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 flex justify-center items-center min-h-screen">
  <div class="text-center">
    <h1 class="text-3xl font-bold mb-4">Rainbow Drawer</h1>
    <div id="color-pickers" class="mb-4">
      <label for="color1">Color 1:</label>
      <input type="color" id="color1" value="#ff0000">
      <label for="color2">Color 2:</label>
      <input type="color" id="color2" value="#ff7f00">
      <label for="color3">Color 3:</label>
      <input type="color" id="color3" value="#ffff00">
      <label for="color4">Color 4:</label>
      <input type="color" id="color4" value="#00ff00">
      <label for="color5">Color 5:</label>
      <input type="color" id="color5" value="#0000ff">
      <label for="color6">Color 6:</label>
      <input type="color" id="color6" value="#7f00ff">
      <label for="color7">Color 7:</label>
      <input type="color" id="color7" value="#ff00ff">
    </div>
    <button id="draw-btn" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Draw Rainbow</button>
    <svg id="rainbow-canvas" class="rainbow-canvas mt-4" viewBox="0 0 500 300"></svg>
  </div>
  <script>
    const colorPickers = document.querySelectorAll('input[type="color"]');
    const drawBtn = document.getElementById('draw-btn');
    const svg = document.getElementById('rainbow-canvas');
    
    function drawRainbow() {
      const colors = [];
      let hasEmptyColor = false;
    
      for (const picker of colorPickers) {
        colors.push(picker.value);
        if (!picker.value) {
          hasEmptyColor = true;
          break;
        }
      }
    
      if (hasEmptyColor) {
        alert('Please select a color for each section of the rainbow!');
        return;
      }

      const sectionWidth = 100 / colors.length;
      let pathData = '';

      colors.forEach((color, index) => {
        const startX = index * sectionWidth;
        const endX = (index + 1) * sectionWidth;
        pathData += `M ${startX},0 A 250,250 0 0,1 ${endX},300 `;
      });

      svg.innerHTML = `<path d="${pathData}" fill="none" stroke="black" />`;

      colors.forEach((color, index) => {
        const start = index * sectionWidth;
        const end = (index + 1) * sectionWidth;
        const linearGradient = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');
        linearGradient.setAttribute('id', `gradient-${index}`);
        linearGradient.setAttribute('x1', `${start}%`);
        linearGradient.setAttribute('y1', '0%');
        linearGradient.setAttribute('x2', `${end}%`);
        linearGradient.setAttribute('y2', '100%');

        const stop1 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
        stop1.setAttribute('offset', '0%');
        stop1.setAttribute('style', `stop-color:${color};stop-opacity:1`);
        const stop2 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
        stop2.setAttribute('offset', '100%');
        stop2.setAttribute('style', `stop-color:${colors[(index + 1) % colors.length]};stop-opacity:1`);

        linearGradient.appendChild(stop1);
        linearGradient.appendChild(stop2);

        svg.appendChild(linearGradient);
      });

      const path = svg.querySelector('path');
      path.setAttribute('stroke', 'url(#gradient-0)'); // Set initial gradient
      for (let i = 0; i < colors.length; i++) {
        path.setAttribute(`stroke-url(#gradient-${i})`, colors[i]);
      }
    }

    drawBtn.addEventListener('click', drawRainbow);
  </script>
</body>
</html>

Popularity 1/10 Helpfulness 1/10 Language html

Source: chat.openai.com

Tags: html

Link to this answer
Share Copy Link

Contributed on Mar 22 2024

MUBASHIR GUJJAR

0 Answers Avg Quality 2/10

javascipt rambow genrate code

Contents

More Related Answers

javascipt rambow genrate code

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.