Kirjoittaja Aihe: HTML5 window.localStorage -JavaScript  (Luettu 1693 kertaa)

Jere Sumell

  • Käyttäjä
  • Viestejä: 721
  • Talous, Hallinto ja Markkinointi (AMK, 2017),B.B.A
    • Profiili
    • Tietokone-blogi
HTML5 window.localStorage -JavaScript
« : 17.11.21 - klo:21.08 »
Ohjelmoin tänään HTML5/JavaScript -tekniikoilla HTML-värivalitsimen ja julkaisin sen nyt illalla kotisivuillani ja sain positiivista palautetta Ohjelmointiputkassa tästä, mutta minulle ehdotettiin, että suurempi hyöty käyttäjälle saavutettaisiin, jos hyödyntäisi tuota window.localStorage -luokan käyttöä, mutta se on uusi minulle, voisiko joku veistää rautalangasta, miten sitä käytetään ja miten se toimii.

Suora linkki HTML-värivalitsimeeni on
https://jeresumell.munsivu.fi/ohjelmat/htmlC.html

Lisäsin vielä nuo Radio-buttonit tuohon, että käyttäjä saa valita, vaikka sama se, kun toinen ohjelman esittämä väri on valitun värin vastaväri, opponent colour.
Free Internet and  people for humans all over the globe!

(Profiilikuvassa oma valokuvani GIMPissä editoituna Disney Classic-väripaletin väreihin ja muunnettuna bittikartta-tiedostosta vektorigrafiikaksi.)

Jere Sumell

  • Käyttäjä
  • Viestejä: 721
  • Talous, Hallinto ja Markkinointi (AMK, 2017),B.B.A
    • Profiili
    • Tietokone-blogi
Vs: HTML5 window.localStorage -JavaScript
« Vastaus #1 : 19.11.21 - klo:19.25 »
En nyt käsitä, vaikka tuo localStorage nyt niin vaikealta asialta vaikuta, mutta missä kohtaa vienti ja muuttujan tuonti pitäisi suorittaa.

Tässä aja() -metodini, jota kutsutaan, kun käyttäjä käyttää noita liukuimia ja valitsee haluamansa värin

Koodia: [Valitse]
function aja() {
if (typeof(Storage) !== "undefined") {
localStorage.setItem('red', document.getElementById("redRange").value);
localStorage.setItem('green',document.getElementById("greenRange").value);
localStorage.setItem('blue', document.getElementById("blueRange").value);
}
var rHex = toHex(localStorage.getItem('red'));
var gHex = toHex(localStorage.getItem('green'));
var bHex = toHex(localStorage.getItem('blue'));
var full = rHex+gHex+bHex;
var oppR = invertColor(full);
var pick = document.querySelector('input[name="userColorPick"]:checked').value;


if (pick =="Background") {

document.getElementById("demo").style.backgroundColor = '#'+full;
document.getElementById("demo").style.color = oppR;
document.getElementById("rgb").innerHTML = 'RGB-code:(' +'R:'+sliderR.value+', G:'+sliderG.value +', B:'+ sliderB.value+')';
document.getElementById("hexD").innerHTML = 'Hex-Code: ' +'#' +full;
document.getElementById("oppC").innerHTML = 'Opposite color: ' + oppR;
}
if (pick == "Text") {
document.getElementById("demo").style.backgroundColor = oppR;
document.getElementById("demo").style.color = '#'+full;
document.getElementById("rgb").innerHTML = 'RGB-code:(' +'R:'+sliderR.value+', G:'+sliderG.value +', B:'+ sliderB.value+')';
document.getElementById("hexD").innerHTML = 'Hex-Code: ' +oppR;
document.getElementById("oppC").innerHTML = 'Opposite color: ' + full;
}
};
Free Internet and  people for humans all over the globe!

(Profiilikuvassa oma valokuvani GIMPissä editoituna Disney Classic-väripaletin väreihin ja muunnettuna bittikartta-tiedostosta vektorigrafiikaksi.)