I just added a dark mode and currency switcher using JS, but the changes don't save after refreshing the page. Does somebody know how to use localStorage on the following codes? Changes can be seen on the following website Morocco tours.
Dark theme:
var icon = document.getElementById("icon-phone");
icon.onclick = function () {
document.body.classList.toggle("dark-theme");
if (document.body.classList.contains("dark-theme")) {
icon.src = "./assets/images/sun.png";
} else {
icon.src = "./assets/images/moon.png";
}
}
var icon = document.getElementById("icon");
icon.onclick = function () {
document.body.classList.toggle("dark-theme");
if (document.body.classList.contains("dark-theme")) {
icon.src = "./assets/images/sun.png";
} else {
icon.src = "./assets/images/moon.png";
}
}
You can use localStorage.setItem('key', 'value') to set and localStorage.getItem('key') to read a localStorage item.
You could, for example, set localStorage.setItem('dark-theme', true) and later retrieve it with localStorage.getItem('dark-theme').
var isDarkTheme = window.localStorage.getItem('dark-theme');
if (isDarkTheme === null) {
isDarkTheme = false;
} else {
isDarkTheme = isDarkTheme === 'true'
}
var icon = document.getElementById("icon-phone");
if (isDarkTheme) {
document.body.classList.add('dark-theme')
}
icon.onclick = function () {
isDarkTheme = !isDarkTheme;
if (isDarkTheme) {
document.body.classList.add('dark-theme');
} else {
document.body.classList.remove('dark-theme');
}
window.localStorage.setItem('dark-theme', isDarkTheme);
if (document.body.classList.contains("dark-theme")) {
icon.src = "./assets/images/sun.png";
} else {
icon.src = "./assets/images/moon.png";
}
}
Related
So I got this class to truncate text but it's fixed, I want to to make more dynamic. I want to pass the length of text I want to truncate and make it work with multiple elements. I'm a newbie in JS classes so it's a but confusing for me right now. thank you in advance.
class readMore {
constructor() {
const end = 300;
this.content = '.readmore__content';
this.buttonToggle = '.readmore__toggle';
}
initiate() {
this.setNodes();
this.init();
this.addEventListeners();
}
setNodes() {
this.nodes = {
contentToggle: document.querySelector(this.content),
};
this.buttonToggle = this.nodes.contentToggle.parentElement.querySelector(this.buttonToggle);
}
init() {
const { contentToggle } = this.nodes;
this.stateContent = contentToggle.innerHTML;
contentToggle.innerHTML = `${this.stateContent.substring(200, `${end}`)}...`;
}
addEventListeners() {
this.buttonToggle.addEventListener('click', this.onClick.bind(this));
}
onClick(event) {
const targetEvent = event.currentTarget;
const { contentToggle } = this.nodes;
if (targetEvent.getAttribute('aria-checked') === 'true') {
targetEvent.setAttribute('aria-checked', 'false');
contentToggle.innerHTML = this.stateContent;
this.buttonToggle.innerHTML = 'Show less';
} else {
targetEvent.setAttribute('aria-checked', 'true');
contentToggle.innerHTML = `${this.stateContent.substring(200, `${end}`)}...`;
this.buttonToggle.innerHTML = 'Show more';
}
}
}
const initReadMore = new readMore();
initReadMore.initiate();
I have 2 javascript files and I want to combine them. One is for dark-mode and the other one is for dark-mode switch button. Separately they work fine, but when combined dark-mode works like it should, but switch button place isn't saved after refreshing the page. What can I do to fix that?
/* DARK-MODE */
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
(function() {
let onpageLoad = localStorage.getItem("theme") || "";
let element = document.body;
element.classList.add(onpageLoad);
document.getElementById("theme").textContent = "DarkMode";
localStorage.getItem("theme") || "light";
})();
function themeToggle() {
let element = document.body;
element.classList.toggle("dark-mode");
let theme = localStorage.getItem("theme");
if (theme && theme === "dark-mode") {
localStorage.setItem("theme", "");
} else {
localStorage.setItem("theme", "dark-mode");
}
document.getElementById("theme").textContent = localStorage.getItem("theme");
};
/* DM-BUTTON */
function App() {}
App.prototype.setState = function(state) {
localStorage.setItem('checked', state);
}
App.prototype.getState = function() {
return localStorage.getItem('checked');
}
function init() {
var app = new App();
var state = app.getState();
var checkbox = document.querySelector('#toggle');
if (state == 'true') {
checkbox.checked = true;
}
checkbox.addEventListener('click', function() {
app.setState(checkbox.checked);
});
}
init();
<div class="toggle1">
<input type="checkbox" onclick="themeToggle()" class="dmbtn" id="toggle">
<label for="toggle"></label>
</div>
I used javascript, html, and css to create a usable todo list by moving tabs (project todo, personal todo). But it only works on the first tab, not the other tabs. (But it does animate the button being pressed.) I think it's a matter of order, but maybe not. PLEASE HELP ME !! Below is the code in javascript.
const todoObjectList1 = [];
const todoObjectList2 = [];
$(".menu1").click(function(){
$(this).addClass('on');
$(".menu2").removeClass("on");
})
$(".menu2").click(function(){
$(this).addClass('on');
$(".menu1").removeClass("on");
})
// project todo
class Todo_Class1 {
constructor(item){
this.ulElement1 =item;
}
add() {
const todoInput1 = document.querySelector("#myInput1").value;
if (todoInput1 == "") {
alert("You did not enter any item!")
} else {
const todoObject1 = {
id1 : todoObjectList1.length,
todoText1 : todoInput1,
isDone1 : false,
}
todoObjectList1.unshift(todoObject1);
this.display();
document.querySelector("#myInput1").value = '';
}
}
done_undone(x) {
const selectedTodoIndex1 = todoObjectList1.findIndex((item)=> item.id1 == x);
console.log(todoObjectList1[selectedTodoIndex1].isDone1);
todoObjectList1[selectedTodoIndex1].isDone1 == false ? todoObjectList1[selectedTodoIndex1].isDone1 = true : todoObjectList1[selectedTodoIndex1].isDone1 = false;
this.display();
}
deleteElement(z) {
const selectedDelIndex1 = todoObjectList1.findIndex((item)=> item.id1 == z);
todoObjectList1.splice(selectedDelIndex1,1);
this.display();
}
display() {
this.ulElement1.innerHTML = "";
todoObjectList1.forEach((object_item1) => {
const liElement1 = document.createElement("li");
const delBtn1 = document.createElement("i");
liElement1.innerText = object_item1.todoText1;
liElement1.setAttribute("data-id1", object_item1.id1);
delBtn1.setAttribute("data-id1", object_item1.id1);
delBtn1.classList.add("far", "fa-trash-alt");
liElement1.appendChild(delBtn1);
delBtn1.addEventListener("click", function(e) {
const deleteId1 = e.target.getAttribute("data-id1");
myTodoList1.deleteElement(deleteId1);
})
liElement1.addEventListener("click", function(e) {
const selectedId1 = e.target.getAttribute("data-id1");
myTodoList1.done_undone(selectedId1);
})
if (object_item1.isDone) {
liElement1.classList.add("checked");
}
this.ulElement1.appendChild(liElement1);
})
}
}
// personal todo
class Todo_Class2 {
constructor(item){
this.ulElement2 =item;
}
add() {
const todoInput2 = document.querySelector("#myInput2").value;
if (todoInput2 == "") {
alert("You did not enter any item!")
} else {
const todoObject2 = {
id2 : todoObjectList2.length,
todoText2 : todoInput2,
isDone2 : false,
}
todoObjectList1.unshift(todoObject2);
this.display();
document.querySelector("#myInput2").value = '';
}
}
done_undone(x) {
const selectedTodoIndex2 = todoObjectList2.findIndex((item)=> item.id2 == x);
console.log(todoObjectList2[selectedTodoIndex2].isDone2);
todoObjectList2[selectedTodoIndex2].isDone2 == false ? todoObjectList1[selectedTodoIndex2].isDone2 = true : todoObjectList2[selectedTodoIndex2].isDone2 = false;
this.display();
}
deleteElement(z) {
const selectedDelIndex2 = todoObjectList2.findIndex((item)=> item.id2 == z);
todoObjectList2.splice(selectedDelIndex2,1);
this.display();
}
display() {
this.ulElement2.innerHTML = "";
todoObjectList2.forEach((object_item2) => {
const liElement2 = document.createElement("li");
const delBtn2 = document.createElement("i");
liElement2.innerText = object_item2.todoText2;
liElement2.setAttribute("data-id2", object_item2.id2);
delBtn2.setAttribute("data-id2", object_item1.id2);
delBtn2.classList.add("far", "fa-trash-alt");
liElement2.appendChild(delBtn2);
delBtn2.addEventListener("click", function(e) {
const deleteId2 = e.target.getAttribute("data-id2");
myTodoList2.deleteElement(deleteId2);
})
liElement2.addEventListener("click", function(e) {
const selectedId2 = e.target.getAttribute("data-id2");
myTodoList1.done_undone(selectedId2);
})
if (object_item2.isDone) {
liElement2.classList.add("checked");
}
this.ulElement2.appendChild(liElement2);
})
}
}
////-----MAIN PROGRAM------------
const listSection1 = document.querySelector("#myUL1");
myTodoList1 = new Todo_Class1(listSection1);
// project todo add
document.querySelector(".addBtn1").addEventListener("click", function() {
myTodoList1.add()
})
document.querySelector("#myInput1").addEventListener("keydown", function(e) {
if (e.keyCode == 13) {
myTodoList1.add()
}
})
// personal todo add
const listSection2 = document.querySelector("#myUL2");
myTodoList2 = new Todo_Class2(listSection2);
document.querySelector(".addBtn2").addEventListener("click", function() {
myTodoList2.add()
})
document.querySelector("#myInput2").addEventListener("keydown", function(e) {
if (e.keyCode == 13) {
myTodoList2.add()
}
})
I just gave different javascript to different todo taps.
In other javascript, the existing personal part was removed and pasted.😂
I'm making a "What language you should learn"site but more complex
I don't know why but when i check my checkbox,they don't became true but when i reload the page now they are true
if (document.getElementById("langage1").checked) {
html = true;
}
if (document.getElementById("langage2").checked) {
phpmysql = true;
}
if (document.getElementById("langage3").checked) {
js = true;
}
if (document.getElementById("langage4").checked) {
python = true;
}
if (document.getElementById("langage5").checked) {
java = true;
}
if (document.getElementById("langage6").checked) {
swift = true;
}
if (document.getElementById("langage7").checked) {
batch = true;
}
if (document.getElementById("langage8").checked) {
jquery = true;
}
if (document.getElementById("langage9").checked) {
c = true;
}
if (document.getElementById("langage10").checked) {
cplus = true;
}
if (document.getElementById("langage11").checked) {
objectivec = true;
}
if (document.getElementById("langage12").checked) {
cdiaise = true;
}
if (document.getElementById("langage13").checked) {
construct = true;
}
if (document.getElementById("langage14").checked) {
wordpress = true;
}
if (document.getElementById("langage15").checked) {
unity = true;
}
if (document.getElementById("langage16").checked) {
gamemaker = true;
}
if (document.getElementById("langage17").checked) {
unreal = true;
}
if (document.getElementById("langage1").checked === false) {
html = false;
}
if (document.getElementById("langage2").checked === false) {
phpmysql = false;
}
Here is an example of the commands that should make them true,any idea how to fix that?
You have to add eventlisteners
document.getElementById("langage1").addEventListener("click", myFunction);
// example function
function myFunction() {
document.getElementById("langage1").innerHTML = "YOU CLICKED ME!";
}
This way you tell javascript to fire when you do something, in this chase a click. So every time you click the checkbox myFunction() fires
So I been trying to track mobile swipes where inside the slider there is other swipes. Look the image below. The code you see attached is part of my Google Analytics events tracking code.
Here is my code:
// Shop buttons
jQuery('.shop-btn-group a').click(function(event) {
var clickedLink = jQuery(this);
var gaqArgs = ['_trackEvent', 'Shop'];
var validShopLink = false;
if ( clickedLink.hasClass('shop-women') ) {
validShopLink = true;
gaqArgs.push('Click-Shop');
}
if (this.rel) {
gaqArgs.push(this.rel);
}
if (validShopLink) {
// Check if the user is using a keyboard command to open the link in a new tab
if (event.metaKey || event.ctrlKey || event.shiftKey) {
try {
_gaq.push(gaqArgs);
}
catch(err) {}
return;
}
else {
event.preventDefault();
try {
_gaq.push(gaqArgs);
_gaq.push(function() {
document.location = clickedLink[0].href;
});
}
catch(err) {
document.location = this.href;
}
}
}
});
// Product click
jQuery('.image-wrap a').click(function(event) {
var clickedLink = jQuery(this);
var gaqArgs = ['_trackEvent', 'Shop'];
var validShopLink = false;
if ( clickedLink.hasClass('frame-image') ) {
validShopLink = true;
gaqArgs.push('Click-Product');
}
if (this.rel) {
gaqArgs.push(this.rel);
}
if (validShopLink) {
// Check if the user is using a keyboard command to open the link in a new tab
if (event.metaKey || event.ctrlKey || event.shiftKey) {
try {
_gaq.push(gaqArgs);
}
catch(err) {}
return;
}
else {
event.preventDefault();
try {
_gaq.push(gaqArgs);
_gaq.push(function() {
document.location = clickedLink[0].href;
});
}
catch(err) {
document.location = this.href;
}
}
}
});
// Color dots
jQuery('.color-dots .dot').click(function(event) {
var dot = jQuery(this);
var colorIndex = dot.index();
var sku = null;
try {
var link = dot.closest('.color-dots')
.siblings('.btn-wrapper')
.eq(0)
.find('.shop-btn-group')
.eq(colorIndex)
.children('a')
.eq(0);
if ( link[0].rel ) {
sku = link[0].rel;
}
}
catch(err) {}
if (sku) {
try {
_gaq.push(['_trackEvent', 'Shop', 'Click-Color', sku]);
}
catch(err) {}
}
});
Any help will be awesome thanks in advance.