Home » Javascript » JavaScript Manipulation in website [on hold]

JavaScript Manipulation in website [on hold]

Posted by: admin August 19, 2018 Leave a comment

Questions:
if(!localStorage.getItem('bgcolor')){
      changeBgColor();
}
else {
      styleBgColor();
}
if(!localStorage.getItem('theme')){
      changeTheme();
}
else {
      styleTheme();
}
function changeTheme() {
      localStorage.setItem('theme',document.getElementById('theme1').value);
      styleTheme();
}
function styleTheme() {
 var currentColor= localStorage.getItem('theme');
 document.getElementById('theme1').value= currentColor;
    
 switch(document.getElementById('theme1').value){
            case "Daracula":
            {
                  document.body.style.transition="all 1.5s ease-in-out";
                  document.getElementById(page).style.transition="all 1.5s ease-in-out";
                  custom.style.color="#000016";
                  custom.style.transition="all 1.5s ease-in-out";
                  custom.style.backgroundColor="#fff";
                  document.body.style.backgroundColor="#000016";
                  document.body.style.color="#fff";
                  openButton.style.backgroundColor="#000016";
                  openButton.style.transition="all 1.5s ease-in-out";
                  openButton.style.color="#fff";
                  document.getElementById(page).style.backgroundColor="#000016";            
                  document.getElementById(page).style.color="#fff";            
            break;
            }
            case "Yellow":
            {     
                  document.body.style.transition="all 1.5s ease-in-out";
                  document.getElementById(page).style.transition="all 1.5s ease-in-out";
                  document.body.style.backgroundColor="yellow";
                  document.getElementById(page).style.backgroundColor="yellow";
                  
                  openButton.style.color="#000016";
                  openButton.style.backgroundColor="yellow";
                  document.getElementById(page).style.color="#000016";                  
                  document.body.style.color="#000016";
                  break;
            
            }
            case "White":
            {
                  document.body.style.transition="all 1.5s ease-in-out";
                  document.getElementById(page).style.transition="all 1.5s ease-in-out";
                  openButton.style.color="black";    
                  openButton.style.backgroundColor="#fff";
                  document.body.style.backgroundColor="#fff";
                  document.getElementById(page).style.backgroundColor="#fff";
                  document.getElementById(page).style.color="#000016";
                  document.body.style.color="#000016";
                  break;
            }
           case "Blue":
            {
                  document.body.style.transition="all 1.5s ease-in-out";
                  document.getElementById(page).style.transition="all 1.5s ease-in-out";
                  openButton.style.color="#000016";
                  document.body.style.backgroundColor="lightskyblue";
                  openButton.style.backgroundColor="lightskyblue";
                  document.getElementById(page).style.backgroundColor="lightskyblue";                  
                  document.getElementById(page).style.color="#000016";                  
                  document.body.style.color="#000016";
                  break;
            }
      }
}

function changeBgColor() {
      localStorage.setItem('bgcolor',document.getElementById('bgColor').value);
      styleBgColor();
}

 function styleBgColor() {                 
       var currentColor = localStorage.getItem('bgcolor');
       document.getElementById('bgColor').value = currentColor;
       document.body.style.backgroundColor= currentColor ;
       document.body.style.transition="all 1.5s ease-in-out" ;
       document.getElementById(page).style.backgroundColor=currentColor;
       openButton.style.backgroundColor=currentColor;
       document.getElementById(page).style.transition="all 1.5s ease-in-out";
       
}
<div id="themetoggle" class="selection">
<label id="select">
Theme ➠
</label>
<select id="theme1"  onchange="changeTheme()">
<option value="Daracula" style="background: #000016;color:#fff;">Black</option>
<option value="White" style="background: #fff;color:#000016;">White</option>
<option value="Blue" style="background: lightskyblue;color:#000016;">Blue</option>
<option value="Yellow" style="background: yellow;color:#000016;">Yellow</option>
</select>
</div>
<div class="bgcolor box">
<label class="title">Background Color </label>
<input list="fontColors" class="enter" id="bgColor" oninput="changeBgColor()" placeholder="Enter Color Name">
<datalist id="fontColors" >
<option value="AliceBlue">AliceBlue</option>	
<option value="AntiqueWhite">AntiqueWhite</option>	
<option value="Aqua">Aqua</option>                 
<option value="Aquamarine">Aquamarine</option>
<option value="Azure">Azure</option>	
<option value="Beige">Beige</option>	
<option value="Bisque">Bisque</option>	
<option value="Black">Black</option>	             
<option value="BlanchedAlmond">BlanchedAlmond</option>
<option value="Blue">Blue</option>	              
<option value="BlueViolet">BlueViolet</option>	                  
<option value="Brown">Brown</option>	                 
<option value="BurlyWood">BurlyWood</option>	
<option value="CadetBlue">CadetBlue</option>	                  
<option value="Chartreuse">Chartreuse</option>	                 
<option value="Chocolate">Chocolate</option>	                  
<option value="Coral">Coral</option>	                  
<option value="CornflowerBlue">CornflowerBlue</option>	
<option value="Cornsilk">Cornsilk</option>	
<option value="Crimson">Crimson</option>	                 
<option value="Cyan">Cyan</option>	                 
<option value="DarkBlue">DarkBlue</option>	               
<option value="DarkCyan">DarkCyan</option>	                 
<option value="DarkGoldenRod">DarkGoldenRod</option>	                  
<option value="DarkGray">DarkGray</option>	
<option value="DarkGrey">DarkGrey</option>	
<option value="DarkGreen">DarkGreen</option>	               
<option value="DarkKhaki">DarkKhaki</option>	
<option value="DarkMagenta">DarkMagenta</option>	                 
<option value="DarkOliveGreen">DarkOliveGreen</option>                  
<option value="DarkOrange">DarkOrange</option>	                 
<option value="DarkOrchid">DarkOrchid</option>	                  
<option value="DarkRed">DarkRed</option>	              
<option value="DarkSalmon">DarkSalmon</option>
<option value="DarkSeaGreen">DarkSeaGreen</option>
<option value="DarkSlateBlue">DarkSlateBlue</option>	                 
<option value="DarkSlateGray">DarkSlateGray</option>	                
<option value="DarkSlateGrey">DarkSlateGrey</option>	                
<option value="DarkTurquoise">DarkTurquoise</option>	                 
<option value="DarkViolet">DarkViolet</option>	                 
<option value="DeepPink">DeepPink</option>	                  
<option value="DeepSkyBlue">DeepSkyBlue</option>	                 
<option value="DimGray">DimGray</option>	
<option value="DimGrey">DimGrey</option>	                  
<option value="DodgerBlue">DodgerBlue</option>	                  
<option value="FireBrick">FireBrick</option>	                 
<option value="FloralWhite">FloralWhite</option>	
<option value="ForestGreen">ForestGreen</option>	                
<option value="Fuchsia">Fuchsia</option>	                 
<option value="Gainsboro">Gainsboro</option>	
<option value="GhostWhite">GhostWhite</option>	
<option value="Gold">Gold</option>	                 
<option value="GoldenRod">GoldenRod</option>	                  
<option value="Gray">Gray</option>
<option value="Grey">Grey</option>	
<option value="Green">Green</option>	               
<option value="GreenYellow">GreenYellow</option>	                  
<option value="HoneyDew">HoneyDew</option>	
<option value="HotPink">HotPink</option>	
<option value="IndianRed">IndianRed</option>	                 
<option value="Indigo">Indigo</option>	                
<option value="Ivory">Ivory</option>	
<option value="Khaki">Khaki</option>	
<option value="Lavender0">Lavender0</option>
<option value="LavenderBlush">LavenderBlush</option>	
<option value="LawnGreen">LawnGreen</option>	                 
<option value="LemonChiffon">LemonChiffon</option>	
<option value="LightBlue">LightBlue</option>	
<option value="LightCoral">LightCoral</option>	
<option value="LightCyan">LightCyan</option>	
<option value="LightGoldenRodYellow">LightGoldenRodYellow</option>	
<option value="LightGray">LightGray</option>	
<option value="LightGrey">LightGrey</option>	
<option value="LightGreen">LightGreen</option>	
<option value="LightPink">LightPink</option>	
<option value="LightSalmon">LightSalmon</option>	
<option value="LightSeaGreen">LightSeaGreen</option>	                  
<option value="LightSkyBlue">LightSkyBlue</option>	
<option value="LightSlateGray">LightSlateGray</option>	
<option value="LightSlateGrey">LightSlateGrey</option>	
<option value="LightSteelBlue">LightSteelBlue</option>	
<option value="LightYellow">LightYellow</option>	
<option value="Lime">Lime</option>	               
<option value="LimeGreen">LimeGreen</option>	                 
<option value="Linen">Linen</option>	
<option value="Magenta">Magenta</option>	                 
<option value="Maroon">Maroon</option>	               
<option value="MediumAquaMarine">MediumAquaMarine</option>	
<option value="MediumBlue">MediumBlue</option>	               
<option value="MediumOrchid">MediumOrchid</option>	                  
<option value="MediumPurple">MediumPurple</option>	
<option value="MediumSeaGreen">MediumSeaGreen</option>	                  
<option value="MediumSlateBlue">MediumSlateBlue</option>	
<option value="MediumSpringGreen">MediumSpringGreen</option>	                 
<option value="MediumTurquoise">MediumTurquoise</option>	                  
<option value="MediumVioletRed">MediumVioletRed</option>	                  
<option value="MidnightBlue">MidnightBlue</option>	                 
<option value="MintCream">MintCream</option>	
<option value="MistyRose">MistyRose</option>
<option value="Moccasin">Moccasin</option>	
<option value="NavajoWhite">NavajoWhite</option>	
<option value="Navy">Navy</option>	               
<option value="OldLace">OldLace</option>	
<option value="Olive">Olive</option>	                 
<option value="OliveDrab">OliveDrab</option>	                  
<option value="Orange">Orange</option>	                 
<option value="OrangeRed">OrangeRed</option>	                
<option value="Orchid">Orchid</option>	
<option value="PaleGoldenRod">PaleGoldenRod</option>	
<option value="PaleGreen">PaleGreen</option>	
<option value="PaleTurquoise">PaleTurquoise</option>
<option value="PaleVioletRed">PaleVioletRed</option>	
<option value="PapayaWhip">PapayaWhip</option>	
<option value="PeachPuff">PeachPuff</option>	
<option value="Peru">Peru</option>	                  
<option value="Pink">Pink</option>	
<option value="Plum">Plum</option>	
<option value="PowderBlue">PowderBlue</option>	
<option value="Purple">Purple</option>	                 
<option value="RebeccaPurple">RebeccaPurple</option>
<option value="Red">Red</option>	        
<option value="RosyBrown">RosyBrown</option>	
<option value="RoyalBlue">RoyalBlue</option>	                  
<option value="SaddleBrown">SaddleBrown</option>
<option value="Salmon">Salmon</option>	
<option value="SandyBrown">SandyBrown</option>	                  
<option value="SeaGreen">SeaGreen</option>                 
<option value="SeaShell">SeaShell</option>	
<option value="Sienna">Sienna</option>	                 
<option value="Silver">Silver</option>	
<option value="SkyBlue">SkyBlue</option>	
<option value="SlateBlue">SlateBlue</option>	                 
<option value="SlateGray">SlateGray</option>	
<option value="SlateGrey">SlateGrey</option>	
<option value="Snow">Snow</option>	
<option value="SpringGreen">SpringGreen</option>	                 
<option value="SteelBlue">SteelBlue</option>	                 
<option value="Tan">Tan</option>	
<option value="Teal">Teal</option>	                 
<option value="Thistle">Thistle</option>	
<option value="Tomato">Tomato</option>                 
<option value="Turquoise">Turquoise</option>	                 
<option value="Violet">Violet</option>	
<option value="Wheat">Wheat</option>	
<option value="White">White</option>	
<option value="WhiteSmoke" >WhiteSmoke</option>
<option value="Yellow">Yellow</option>	            
<option value="YellowGreen">YellowGreen</option>
</datalist>
<span class="or">OR</span>
<span class="select">Select</span>
<input type="color" class="colorchoice" id="bgColorS" oninput="changeBgColorS()">
</div>
Answers: