I have an HTML page with two buttons: a light theme button and a dark theme button. When I click the light theme button the background will turn light gray and text is black, when I click the dark theme button the background will turn black and text is white.
When I reopen my page the last theme selected should be generated.
so here is my html:
<html>
<head>
<script type="text/javascript" src="js/index.js"></script>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<div class="MyPage">
<body>
<h1>choose a theme:</h1>
<input id="b1" type="button" value="light theme">
<input id="b2" type="button" value="darck theme">
<p>this a sample for using API local storage in HTML5 </p>
</body>
</div>
</html>
css:
.MyLightPage
{
background-color: gray;
text-decoration-color: black;
}
.MyDarkPage
{
background-color: black;
color: white;
}
My problem is how to connect the 3 diverse types of my project (HTML, CSS and JavaScript) and what functions should be existing in my JavaScript file to make this happen.
This can be easily done using JavaScript.
The buttons call different functions where the background and text color is being set.
#MyPage {
background-color: black;
color: white;
}
<div id="MyPage">
<h1>choose a theme:</h1>
<input id="b1" onclick="lightTheme()" type="button" value="light theme">
<input id="b2" onclick="darkTheme()" type="button" value="dark theme">
<p>this a sample for using API local storage in HTML5 </p>
<script>
function darkTheme() {
document.getElementById('MyPage').style.backgroundColor = "black";
document.getElementById('MyPage').style.color = "white";
}
function lightTheme() {
document.getElementById('MyPage').style.backgroundColor = "white";
document.getElementById('MyPage').style.color = "black";
}
</script>
</div>
This snippet shows how to set the relevant CSS classes upon the click of a button. Saving the selecting theme can be added to the JS part easily - please refer to the very simple Localstorage API for details.
$('#b1').click(function() {
$('body').attr("class","MyLightPage");
});
$('#b2').click(function() {
$('body').attr("class","MyDarkPage");
});
.MyLightPage
{
background-color: gray;
text-decoration-color: black;
}
.MyDarkPage
{
background-color: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="MyPage">
<h1>choose a theme:</h1>
<input id="b1" type="button" value="light theme">
<input id="b2" type="button" value="dark theme">
<p>this a sample for using API local storage in HTML5 </p>
</div>
</body>
As a side note, please also have a look at how a basic HTML document is structured. The body tag should not be the child of any divs, it has to be the direct child of the html tag.
If you want to maintain the state of the last color that is clicked you need to hold some data on the server. The DOM will refresh every time you do a hard page reload. Database data, however, maintains the data that you can fetch on every page load. You can update this database data when one of the buttons is clicked. You have different ways to implement this. An example could be:
.theme-styling{
<?php echo getDarkOrLightThemeCode(); ?>
}
Then in the DOM, you can assign theme styling to specific elements that have a light and dark element styling:
<button class="btn btn-large theme-styling">Hello</button>
<button class="btn btn-large theme-styling">Goodbye</button>
You can add an id to specific elements if you want additional styling apart from your dark and light theme styles.
And then specifically, when the user clicks a dark theme button or light theme button, you should create an AJAX request to update the variable property on the server.
try this:
var element = document.querySelector('body'),
button = document.querySelector('#myButton');
button.addEventListener('click',function(){
if(element.className == 'MyLightPage'){
element.className = 'MyDarkPage';
}else{
element.className = 'MyLightPage';
}
});
Related
I used a two-button when I clicked on that button div should be changed using javascript replaced the function the problem is when I click on the button border should be changed by default black color I could not find where it was added that I'm adding screenshots. it happened after I added on click replaced function
<script>
function replace(hide, show) {
document.getElementById(hide).style.display = "none";
document.getElementById(show).style.display = "block";
}
</script>
<div class="two_btn">
<div class="order_btn">
<button type="button" onclick="replace('div2','div1')">Order & Collect</button>
</div>
<div class="book_collection">
<button type="button" onclick="replace('div1','div2')">Book UK Collection</button>
</div>
</div>
It's an on-focus outline, automatically added by your browser. To remove it completely (not advisable), you can add this to your CSS:
button:focus {
outline: none;
}
Why you should not do this and use a different approach instead:
https://www.a11yproject.com/posts/never-remove-css-outlines/
http://www.outlinenone.com/
SO I wanted to change few contents of the page when the checkbox input is checked and bring everything back to it was before when the checkbox is unchecked.
<div class="switch">
<input type="checkbox" name="checkbox" id="checkbox" onchange="darkmode(this)" />
</div>
<section id="section">
<p>This is a line</p>
</section>
<script>
function darkmode(checkboxElem) {
if (checkboxElem.checked) {
document.body.style.backgroundColor = "black";
document.getElementById("checkbox").style.borderColor = "white";
document.getElementById("section").style.color ="white";
}else {
document.body.style.backgroundColor = "white";
document.getElementById("checkbox").style.borderColor = "black";
document.getElementById("section").style.color ="black";
}
}
</script>
I figured I can do that by giving value to every content that was changed. In the 'else' statement I will have to give every content it's the value of 'as it was before' Doing this will take a lot of time and I will have to write everything twice (in CSS and Javascript).
If there is a way to bring everything to default when the checkbox is unchecked without without giving every element their pervious value. Please, let me know.
Thank you
I think a most simple and clear solution is design your dark mode style linked to a body css class and toggle that class using onchange event directly.
I hope that solution helps you.
body.dark-mode{
background-color:black;
}
body.dark-mode>h1{
color:red;
}
body.dark-mode>p{
color:white;
}
<body>
<input type='checkbox' onchange='document.body.classList.toggle("dark-mode");'>
<h1>Heading 1</h1>
<p>Paragraph 1</p>
...
</body>
Easiest solution would be to add and remove a class to the body as in the snippet below. Then you delcare all styling for the darkmode within the css. Its important, that it is written at the bottom of the normal css.
function darkmode(checkboxElem) {
var darkMode = document.body;
if (checkboxElem.checked) {
darkMode.classList.add("dark-mode");
} else {
darkMode.classList.remove("dark-mode");
}
}
.dark-mode {
color: white;
background-color: black;
}
<body>
<div class="switch">
<input type="checkbox" name="checkbox" id="checkbox" onchange="darkmode(this)" />
</div>
<section id="section">
<p>This is a line</p>
</section>
</body>
I have made a dark mode button with my own dark theme. The theme is saved by Local Storage. Also when I click the button, then it's icon change (moon to sun). But if I reload the page, the site is still in dark mode but the button icon's is the moon again. So heres a link which show you the problem if youo don't understant what i am talking about. (https://postimg.cc/yg6Q3vq0)
Also heres my code:
//This is the darkmode script.
function darkmode() {
const wasDarkmode = localStorage.getItem('darkmode') === 'true';
localStorage.setItem('darkmode', !wasDarkmode);
const element = document.body;
element.classList.toggle('dark-mode', !wasDarkmode);
}
function onload() {
document.body.classList.toggle('dark-mode', localStorage.getItem('darkmode') === 'true');
}
//End
//And this is the code which change the button's icon
$('button').on('click', fav);
function fav(e) {
$(this).find('.fa').toggleClass('fa-moon-o fa-sun-o');
}
//So I would like to combine the 2 codes. I mean to add the icon code to Local Storage.
.card {
color: yellow;
background-color: blue;
}
.dark-mode .car {
color: blue;
background-color: yellow;
}
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<a style="padding: 0 !important;"><button class="darkmode" onclick="darkmode()"><i class="fa fa-moon-o"></i></button></a>
<div class="card">
<h1>Title</h1>
<p>Text<//p>
<h2>Another text..</h2>
</div>
</body>
</html>
The browser just renders the HTML as written. Your HTML says to render <i class="fa fa-moon-o"></i>, so that's what the browser shows. In other words, it will always show the moon icon by default.
You need to perform some kind of check on page load to see if the icon should be changed.
Something like this might work:
// when the document is ready
$(document).ready(function () {
// check if dark mode is enabled
if (localStorage.getItem('darkmode') === 'true') {
// if it is, change the moon icon to a sun icon
('.fa').toggleClass('fa-moon-o fa-sun-o');
}
});
Is it possible to get the 'text' which I will get back on undo. For Example: I have two paragraphs
Para1
Para2 <--- deleting para2 using backspace
When I will do ctrl+z or undo , para2 will be retrieved back. Is there any way in javascript to get that 'para2' will be returned in the undo option (I want to get 'para2' in some js variable. I know it will come in editor automatically) ? Search a lot but didn't get any solution. Any help will be highly appreciated
P.S: I need this because I want to remove some attributes in my html on undo.
UPDATE 2
Due to OP's question changes, I will address this one last time.
P.S: I need this because I want to remove some attributes in my html on undo.
Undo Retrieves deleted text
Delete Removes text
If you have a ton of attributes in your html, use the text editor's replace feature. What text editor do you use?
UPDATE 1
Added a new function getUndone(). Do the following to test it:
Delete some text.
click the ⤺ button.
click the Get button.
The undone portion of text will be back as expected.
The undone text is also stored in a variable (i.e. sel).
The undone text is also in clipboard.
The undone text is displayed as well.
Used execCommand('undo') to undo.
Used execCommand('copy') to store in clipboard.
Used window.getSelection() to retrieve selected text and store in sel.
Used .toString() to display undone text.
execCommand API is made for creating text editors. It has a ton of methods and properties. The following Snippet has bold, italics, underline, and undo.
document.execCommand( 'undo',false,null);
SNIPPET
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<style>
body {
font: 400 16px/1.4'serif';
}
#editor1 {
border: 3px inset grey;
height: 100px;
width: 381px;
margin: 10px auto 0;
}
fieldset {
margin: 2px auto 15px;
width: 358px;
}
button {
width: 5ex;
text-align: center;
padding: 1px 3px;
}
</style>
</head>
<body>
<div id="editor1" contenteditable="true">
The quick brown fox jumped over the lazy dog.
</div>
<fieldset>
<button class="fontStyle" onclick="document.execCommand('italic',false,null);" title="Italicize Highlighted Text"><i>I</i>
</button>
<button class="fontStyle" onclick="document.execCommand( 'bold',false,null);" title="Bold Highlighted Text"><b>B</b>
</button>
<button class="fontStyle" onclick="document.execCommand( 'underline',false,null);"><u>U</u>
</button>
<button class="fontStyle" onclick="document.execCommand( 'undo',false,null);"><b>⤺</b>
</button>
<button class="fontStyle" onclick="getUndone()">Get</button>
<br/>
<label for='data'>Data:
<input id="data">
</label>
</fieldset>
<script>
function getUndone() {
var data = document.getElementById('data');
var sel = window.getSelection();
document.execCommand('undo', false, null);
document.execCommand('copy', false, null);
data.value = sel.toString();
}
</script>
Ok so am trying to get just my headers (all 3 headers) to turn the color red when the "Red Headings" button is clicked by using the changeStuff function but it doesn't seem to run properly. So Is this the correct function I should be using?
<title>Stanford Graduation</title>
<style type="text/css">
.redElements {
color: red;
}
</style>
</head>
<body>
<h1>Graduation</h1>
<p>Graduation is the culmination of four (or more years of hard work).</p>
<h2>Graduation Traditions</h2>
<p>Stanford Graduation has it's own amazing traditions.</p>
<h3>The Wacky Talk</h3>
<p>Stanford Seniors act and dress wacky as they enter the stadium.</p>
<h3 id="speakerHeading">Speakers</h3>
<p>Stanford graduation speakers always have Stanford ties.</p>
<div>
<input type="button" value="Red Headings" id="theRedButton" />
<input type="button" value="Fade Out Speaker" id="theSpeakersButton" />
</div>
<script>
"jquery-2.1.4.js"
</script>
<script>
function changeStuff() {
$("h").addClass("redElements");
}
$("theRedButton").bind("click", changeStuff);
</script>
</body>
To add the class to all header elements, use:
function changeStuff() {
$("h1, h2, h3").addClass("redElements");
}
$("#theRedButton").on("click", changeStuff);
Edit: Here's the complete HTML content you need, which also shows how you should be bringing in jQuery and hooking into the document ready callback:
<head>
<title>Stanford Graduation</title>
<style type="text/css">
.redElements {
color: red;
}
</style>
</head>
<body>
<h1>Graduation</h1>
<p>Graduation is the culmination of four (or more years of hard work).</p>
<h2>Graduation Traditions</h2>
<p>Stanford Graduation has it's own amazing traditions.</p>
<h3>The Wacky Talk</h3>
<p>Stanford Seniors act and dress wacky as they enter the stadium.</p>
<h3 id="speakerHeading">Speakers</h3>
<p>Stanford graduation speakers always have Stanford ties.</p>
<div>
<input type="button" value="Red Headings" id="theRedButton" />
<input type="button" value="Fade Out Speaker" id="theSpeakersButton" />
</div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function() {
$("#theRedButton").on("click", changeStuff);
});
function changeStuff() {
$("h1, h2, h3").addClass("redElements");
}
</script>
</body>
And here's a working pen showing it in action: http://codepen.io/Ghazgkull/pen/rVRRbK
Your code has syntax errors.
Change it to
function changeStuff() {
$("h1,h2,h3").addClass("redElements");
}
$("#theRedButton").bind("click", changeStuff);
https://jsfiddle.net/2oj1s9mg/
Also
<script>
"jquery-2.1.4.js"
</script>
Should be
<script src="jquery-2.1.4.js"></script>
Try like this
$("h1,h2,h3").addClass("redElements");
There is no element name h
For id jquery use # .
Without # jquery treated provided selector as element
Add like this
$("#theRedButton").bind("click",changeStuff);
$("#theRedButton").bind("click",changeStuff);
added a # for select by id
and the $('h') should be $('h1,h2,h3,h4,h5');//or whatever you want to get that class on the page
Also I can see the jquery I hope you tried to demo a pseudo code else you have to include jQuery