Munkahelyen ezt a kódot mennyi idő alatt írja meg egy jól fizetett versenyző?

Közösségi kerekasztal
<!DOCTYPE html>
<html lang="hu">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>RGB Színválasztó</title>
  <style>
    #color-box {
      width: 200px;
      height: 200px;
      background-color: rgb(0, 0, 0);
      margin-top: 20px;
      border: 1px solid #ccc;
    }
    #hex-value {
      font-size: 1.2em;
      margin-top: 10px;
    }
    table {
      width: 300px;
      margin-top: 20px;
      border-collapse: collapse;
    }
    td, th {
      padding: 8px;
      border: 1px solid #ddd;
      text-align: center;
    }
    .color-preview {
      width: 40px;
      height: 40px;
      border: 1px solid #444;
    }

    /* Csúszkák alapstílusa, rövidebb szélesség */
    input[type=range] {
      -webkit-appearance: none;
      appearance: none;
      width: 150px;
      height: 8px;
      background: #ddd;
      outline: none;
      border-radius: 5px;
      margin-bottom: 10px;
    }

    /* Piros csúszka stílusa */
    #red {
      background-color: #ffcccc;
    }
    #red::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      background-color: #ff0000;
      border-radius: 50%;
      cursor: pointer;
    }
    #red::-moz-range-thumb {
      width: 20px;
      height: 20px;
      background-color: #ff0000;
      border-radius: 50%;
      cursor: pointer;
    }

    /* Zöld csúszka stílusa */
    #green {
      background-color: #ccffcc;
    }
    #green::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      background-color: #00ff00;
      border-radius: 50%;
      cursor: pointer;
    }
    #green::-moz-range-thumb {
      width: 20px;
      height: 20px;
      background-color: #00ff00;
      border-radius: 50%;
      cursor: pointer;
    }

    /* Kék csúszka stílusa */
    #blue {
      background-color: #ccccff;
    }
    #blue::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      background-color: #0000ff;
      border-radius: 50%;
      cursor: pointer;
    }
    #blue::-moz-range-thumb {
      width: 20px;
      height: 20px;
      background-color: #0000ff;
      border-radius: 50%;
      cursor: pointer;
    }

  div {
    margin: 0 auto;
  }

  .row {
    display: none;
  }

  </style>
</head>
<body  text="#FFFFFF" style="background-color:#000000;">

<form action="/login"><input type="submit" value="login"></form>

  <center>

  <h2>RGB Színválasztó</h2>

  <input type="range" id="red" min="0" max="255" value="0">
  <br>
  <input type="range" id="green" min="0" max="255" value="0">
  <br>
  <input type="range" id="blue" min="0" max="255" value="0">
  <div id="color-box"></div>
  <div id="hex-value">#000000</div>

  <br><br>

    <select id="row-count">
      <option value="1">1 Color</option>
      <option value="2">2 Colors</option>
      <option value="3">3 Colors</option>
      <option value="4">4 Colors</option>
    </select>

    <table>
      <tr>
        <th>Save</th>
        <th>Color</th>
        <th>Minimum Brightness<br>Default Brightness</th>
      </tr>
      <tr id="row1" class="row" >
        <td><button onclick="saveColor(1)">Color 1</button></td>
        <td><div id="preview1" class="color-preview"></div></td>
        <td><input type="range" id="minBright1" min="0" max="255" value="0">
        <input type="range" id="defBright1" min="0" max="255" value="255"></td>
      </tr>
      <tr id="row2" class="row" >
        <td><button onclick="saveColor(2)">Color 2</button></td>
        <td><div id="preview2" class="color-preview"></div></td>
        <td><input type="range" id="minBright2" min="0" max="255" value="0">
        <input type="range" id="defBright2" min="0" max="255" value="255"></td>
      </tr>
      <tr id="row3" class="row">
        <td><button onclick="saveColor(3)">Color 3</button></td>
        <td><div id="preview3" class="color-preview"></div></td>
        <td><input type="range" id="minBright3" min="0" max="255" value="0">
        <input type="range" id="defBright3" min="0" max="255" value="255"></td>
      </tr>
      <tr id="row4" class="row">
        <td><button onclick="saveColor(4)">Color 4</button></td>
        <td><div id="preview4" class="color-preview"></div></td>
        <td><input type="range" id="minBright4" min="0" max="255" value="0">
        <input type="range" id="defBright4" min="0" max="255" value="255"></td>
      </tr>
    </table>

  </center>

  <script type="text/javascript" src="tools.js"></script>
  <script>

    startWS(3);

    const redSlider = document.getElementById('red');
    const greenSlider = document.getElementById('green');
    const blueSlider = document.getElementById('blue');
    const colorBox = document.getElementById('color-box');
    const hexValueDisplay = document.getElementById('hex-value');
    const minBright = [];
    const defBright = [];
    const preview = [];
    var subId = "";
    for (let i = 1; i <= 4; i++) {
      minBright[i] = document.getElementById(`minBright${i}`);
      defBright[i] = document.getElementById(`defBright${i}`);
      preview[i] = document.getElementById(`preview${i}`);
      minBright[i].addEventListener('input', handleSliderChange);
      defBright[i].addEventListener('input', handleSliderChange);
      preview[i].addEventListener('click', handleSliderChange);
      }
    let savedColors = { 1: '', 2: '', 3: '', 4: '' };
    let minBrightValues = { 1: 50, 2: 50, 3: 50, 4: 50 };
    redSlider.addEventListener('input', updateColor);
    greenSlider.addEventListener('input', updateColor);
    blueSlider.addEventListener('input', updateColor);

    document.getElementById('row-count').addEventListener('change', function() {
      const rowCount = parseInt(this.value);
      sendWS("STR[0]=" + rowCount);
      for (let i = 1; i <= 4; i++) {
        const row = document.getElementById(`row${i}`);
        row.style.display = i <= rowCount ? 'table-row' : '';
      }
    });
    document.getElementById('row-count').dispatchEvent(new Event('change'));

    function updateColor() {
      const red = parseInt(redSlider.value);
      const green = parseInt(greenSlider.value);
      const blue = parseInt(blueSlider.value);
      colorBox.style.backgroundColor = `rgb(${red}, ${green}, ${blue})`;
      const hexColor = rgbToHex(red, green, blue);
      hexValueDisplay.textContent = hexColor;
      if (subId === "pre") {sendWS("STRIP[0](BR)255|STRIP[0]" + hexColor);}
    }

    function rgbToHex(r, g, b) {
      return (
        "#" + 
        r.toString(16).padStart(2, '0') +
        g.toString(16).padStart(2, '0') +
        b.toString(16).padStart(2, '0')
      ).toUpperCase();
    }

    function saveColor(slot) {
      const hexColor = hexValueDisplay.textContent;
      savedColors[slot] = hexColor;
      document.getElementById(`preview${slot}`).style.backgroundColor = hexColor;
      sendWS("STR[" + slot + "]=" + savedColors[slot]);
      sendWS("STR[" + (slot+3) + "]=" + minBright[slot].value);
      sendWS("STR[" + (slot+6) + "]=" + defBright[slot].value);
    }

    function handleSliderChange(event) {
      const sliderId = event.target.id;
      const sliderValue = event.target.value; 
      const brIndex = sliderId.slice(-1)
      subId = sliderId.substring(0, 3);
      redSlider.value = parseInt(savedColors[brIndex].substring(1, 3), 16);
      greenSlider.value = parseInt(savedColors[brIndex].substring(3, 5), 16);
      blueSlider.value = parseInt(savedColors[brIndex].substring(5, 7), 16);
      updateColor();
      if (subId != "pre") {
        sendWS("STRIP[0]" + savedColors[brIndex]);
        sendWS("STRIP[0](BR)" + sliderValue);
        }
    }


    function onOpen() {
      sendWS("STR[0-12]@");
      }

    function onMessage(msg) {
      msg = msg.split("~");
      document.getElementById('row-count').value = msg[0];
      document.getElementById('row-count').dispatchEvent(new Event('change'));
      for (let i = 1; i <= 4; i++) {
        savedColors[i] = msg[i];
        preview[i].style.backgroundColor = msg[i];
        minBright[i].value = parseInt(msg[i+3]);
        defBright[i].value = parseInt(msg[i+6]);
        }
      }

  </script>

</body>
</html>

( neutrino v | 2024. 10. 26., szo – 09:57 )

Szerkesztve: 2024. 10. 26., szo – 09:59

5 perc míg kuguglizza a hozzá való libet, aztán még 5 perc amíg berakja és kipróbálja. Ezzel azt akarom mondani, hogy ilyen dolgokat manapság nem írnak, hanem letöltenek.

 

Mi a kérdés? Vagyis inkább miért?

Aláírás _Franko_ miatt törölve. 
Jákub egy .
neut @

( YleGreg | 2024. 10. 26., szo – 10:07 )

Junior aki nekiall nullarol: egy nap, de kozben okosodik.

Medior aki kirazza rutinbol: fel oratol ket ora, attol fugg mennyire jo.

Senior: fel ora ha o maga irja meg, ket ora ha AI-val iratja meg, de utobbi esetben kozben tovabb okosodik.

( vasla_ | 2024. 10. 26., szo – 10:34 )

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RGB Színkeverő</title>
    <style>
        #colorBox {
            width: 200px;
            height: 200px;
            margin-top: 20px;
        }
        .slider-container {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        .slider {
            flex-grow: 1;
            margin: 0 10px;
        }
    </style>
</head>
<body>
    <h1>RGB Színkeverő</h1>
    <div class="slider-container">
        <label for="red">Piros</label>
        <input type="range" id="red" class="slider" min="0" max="255" value="0">
        <span id="redValue">0</span>
    </div>
    <div class="slider-container">
        <label for="green">Zöld</label>
        <input type="range" id="green" class="slider" min="0" max="255" value="0">
        <span id="greenValue">0</span>
    </div>
    <div class="slider-container">
        <label for="blue">Kék</label>
        <input type="range" id="blue" class="slider" min="0" max="255" value="0">
        <span id="blueValue">0</span>
    </div>
    <div id="colorBox"></div>
    <div id="rgbValue"></div>

    <script>
        const redSlider = document.getElementById('red');
        const greenSlider = document.getElementById('green');
        const blueSlider = document.getElementById('blue');
        const redValue = document.getElementById('redValue');
        const greenValue = document.getElementById('greenValue');
        const blueValue = document.getElementById('blueValue');
        const colorBox = document.getElementById('colorBox');
        const rgbValue = document.getElementById('rgbValue');

        function updateColor() {
            const red = redSlider.value;
            const green = greenSlider.value;
            const blue = blueSlider.value;
            const rgbColor = `rgb(${red}, ${green}, ${blue})`;
            colorBox.style.backgroundColor = rgbColor;
            redValue.textContent = red;
            greenValue.textContent = green;
            blueValue.textContent = blue;
            rgbValue.textContent = `RGB: (${red}, ${green}, ${blue})`;
        }

        redSlider.addEventListener('input', updateColor);
        greenSlider.addEventListener('input', updateColor);
        blueSlider.addEventListener('input', updateColor);

        updateColor();
    </script>
</body>
</html>

AI megoldása elsőre:
Irj egy rgb szinkeverőt 3 csuszkával:

 

https://blog.claryel.hu

( dlaszlo | 2024. 10. 26., szo – 11:11 )

Szerkesztve: 2024. 10. 26., szo – 11:13

Attól függ, én voltam olyan környezetben, ahol 5 percért is "izélkedtek", ráadásul olyan, aki 10 évvel ezelőtt kódolt, azóta feljebb buktatták, és azóta nagyon megszépültek az emlékek. :)

Behívott egy meeting-re, és meg kellett magyaráznom, hogy egy olyan taszkot, amivel a csapattársam nagyon jól halad amúgy, és hiba nélkül megcsinálta (tehát tényleg mindent jól csinált), miért 2 nap alatt csinálta meg, és könyvelt a taszkra két napot.

Nem hitte el, és jót röhögött a bajsza alatt, amikor mondtam neki, hogy pont mellélőtt, mert itt minden rendben, és nem hitte le. :)

Szóval remélem, hogy nem ilyen kérdés van (a mai világban már ki tudja).

Tehát a szopó faktor mindig ott van, amivel nagyon tud telni az idő, és szerintem (anélkül hogy belemélyedtem volna, és kb csak a kulcsszavakat néztem meg a kódban. :))) fél nap és három nap között lehet valahol.
És becsléskor mindig fontos, hogy nem a zseniket meg a legtapasztaltabbakat vesszük alapul, hanem egy átlag fejlesztőt, akit kihúzunk a kalapból.

A chatgpt-t meg stack overeflow-t hagyjuk már. Az vagy összejön, vagy nem. ;)

( Wabbitseason v | 2024. 10. 27., v – 00:10 )

Muszáj antik technológiát használni, vagy elég egy <input type="color"> is?