Develop Reference

Toggle switch malfunctioning after deletion of an h1

I have a toggle switch and everything was working perfectly, but as soon as I deleted and h1 element my switch started acting up. Orginally it would sit perfectly in the center of the slider, but now it is offset and stuck to the top. Once the button is clicked it returns to the position its suppose to be in. As soon as the page is refreshed it goes right back to being offset.
What am I doing wrong?
function SlideRight() {
// Checks to see if the slider is to the left of the div
if (document.getElementById("slider").style.float !== "right") {
// If it is we will float the sliderBtn to the right and change the background of the housing to green
document.getElementById("slider").style.float = "right";
document.getElementById("slideHousing").style.backgroundColor = "#00ff00";
// Toggle dark mode on
document.body.style.backgroundColor = "#595959";
document.getElementById("header").style.color = "#e6e6e6";
document.getElementById("press").style.color = "#e6e6e6";
} else {
// If clicked again the btn will move back to the left side and change the color back to original
document.getElementById("slider").style.float = "left";
document.getElementById("slideHousing").style.backgroundColor = "#f2f2f2";
// Toggle dark mode off
document.body.style.backgroundColor = "#e6e6e6";
document.getElementById("header").style.color = "#000";
document.getElementById("press").style.color = "#000";
}
}
body {
height: 100%;
margin: 0;
padding: 0;
background-color: #e6e6e6;
}
html {
height: 100%;
}
.main {
display: table;
height: 100%;
width: 100%;
border: 1px solid transparent;
}
.container {
display: table-cell;
vertical-align: middle;
border: 1px solid transparent;
}
.slider {
height: 100px;
width: 200px;
border-radius: 50px;
background-color: #f2f2f2;
margin: 0 auto;
border: none;
box-shadow: inset 0 0 7px #000;
}
.slideBtn {
border: 1px solid transparent;
height: 90px;
margin-top: 4px;
margin-left: 5px;
margin-right: 5px;
width: 90px;
border-radius: 50px;
background-color: silver;
box-shadow: 0 0 5px #000;
}
<h1 style="text-align: center;" id="header">Dark Mode</h1>
<div class="main">
<div class="container">
<p style="text-align: center;" id="press">Press button to toggle dark mode.</p>
<div class="slider" id="slideHousing">
<div class="slideBtn" id="slider" onclick="SlideRight()">
</div>
</div>
</div>
</div>

You just need to set the initial value of float for the button.
function SlideRight() {
// Checks to see if the slider is to the left of the div
if (document.getElementById("slider").style.float !== "right") {
// If it is we will float the sliderBtn to the right and change the background of the housing to green
document.getElementById("slider").style.float = "right";
document.getElementById("slideHousing").style.backgroundColor = "#00ff00";
// Toggle dark mode on
document.body.style.backgroundColor = "#595959";
document.getElementById("header").style.color = "#e6e6e6";
document.getElementById("press").style.color = "#e6e6e6";
} else {
// If clicked again the btn will move back to the left side and change the color back to original
document.getElementById("slider").style.float = "left";
document.getElementById("slideHousing").style.backgroundColor = "#f2f2f2";
// Toggle dark mode off
document.body.style.backgroundColor = "#e6e6e6";
document.getElementById("header").style.color = "#000";
document.getElementById("press").style.color = "#000";
}
}
body {
height: 100%;
margin: 0;
padding: 0;
background-color: #e6e6e6;
}
html {
height: 100%;
}
.main {
display: table;
height: 100%;
width: 100%;
border: 1px solid transparent;
}
.container {
display: table-cell;
vertical-align: middle;
border: 1px solid transparent;
}
.slider {
height: 100px;
width: 200px;
border-radius: 50px;
background-color: #f2f2f2;
margin: 0 auto;
border: none;
box-shadow: inset 0 0 7px #000;
}
.slideBtn {
float:left;
border: 1px solid transparent;
height: 90px;
margin-top: 4px;
margin-left: 5px;
margin-right: 5px;
width: 90px;
border-radius: 50px;
background-color: silver;
box-shadow: 0 0 5px #000;
}
<h1 style="text-align: center;" id="header">Dark Mode</h1>
<div class="main">
<div class="container">
<p style="text-align: center;" id="press">Press button to toggle dark mode.</p>
<div class="slider" id="slideHousing">
<div class="slideBtn" id="slider" onclick="SlideRight()">
</div>
</div>
</div>
</div>

I'm making a flashcard using JS and i encounteres a problem when i click the save button the card appears but after that there is problem?

I am making an flashcard using javascript and everything is working fine but when I press the save button to save the card there is error. it should display the question and after a click event it should show the answer of that card clicked but there is an error. also my browser storing also doesn't work.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: , sans-serif;
font-size: 1rem;
background: #092d4a;
}
button {
padding: 8px;
outline: none;
cursor: pointer;
border: 1px solid #092d4a;
border-radius: 5px;
}
button:hover {
background-color: #092d4a;
color: white;
}
.container {
width: 95%;
margin: auto;
}
.nav {
display: flex;
justify-content: space-between;
width: 100%;
margin: auto;
padding: 20px 0;
}
.nav button {
font-family: inherit;
}
.create-card {
display: none;
width: 380px;
margin: auto;
padding: 20px;
margin-top: 10px;
border-radius: 5px;
background: whitesmoke;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
}
.create-card textarea {
width: 100%;
border-radius: 5px;
font-family: inherit;
border: 2px solid #092d4a;
}
.create-card button {
width: fit-content;
border: 2px solid #092d4a;
}
.flashcards {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
width: 100%;
margin: auto;
margin-top: 20px;
padding: 0px 17px;
}
.flashcard {
width: 370px;
height: 200px;
word-wrap: break-word;
margin: 15px;
background: #fff;
/* box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.9); */
box-shadow: 0px 2px 4px 0px rgba(255, 255, 255, 0.5);
}
.flashcard h2 {
font-size: 1rem;
}
#media(max-width:768px) {
.flashcard {
margin: auto;
}
.flashcard {
margin-top: 15px;
margin-bottom: 15px;
}
}
#media(max-width:480px) {
.create-card {
width: 100%;
}
.flashcard {
width: 100%;
}
}
<header>
<div class="container">
<div class="nav">
<h1> Saved Flashcards</h1>
<button class="btn1">Add New Card</button>
</div>
</div>
</header>
<div class="container">
<div class="create-card">
<p>
<h2 style="color: black;text-align: center;">Create Flashcard</h2>
</p>
<p>
<label for="text">Question</label><br>
<textarea id="question" placeholder="please enter your question here....."></textarea>
</p>
<p>
<label for="text">Answer</label><br>
<textarea id="answer" placeholder="please place your answer here...."></textarea>
</p>
<br>
<div>
<button class="btn2" onclick="saveFlashcard()">Save</button>
<button class="btn3">Close</button>
</div>
</div>
</div>
<div class="container">
<div class="flashcards" id="flashcards"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="brain.js">
const flashcards = document.getElementsByClassName("flashcards")[0];
const createCard = document.getElementsByClassName("create-card")[0];
const question = document.getElementById("question");
const answer = document.getElementById("answer");
// if (localStorage.getItem("stored") == null) {
// localStorage.setItem("stored", [])
// };
// var test = JSON.parse(localStorage.getItem("stored"));
// var div = document.createElement("div");
// var h2_question = document.createElement("h2");
// var h2_answer = document.createElement("h2");
// div.className = "flashcard";
// h2_question.setAttribute("style", "border-top:1px solid blue; padding:15px; margin-top:30px");
// h2_question.innerHTML = localStorage.getItem("test");
// h2_answer.setAttribute("style", "text-align:center; display:none; color:Blue");
// h2_answer.innerHTML = localStorage.getItem("test");
// div.appendChild(h2_question);
// div.appendChild(h2_answer);
// flashcards.insertAdjacentElement("beforeend", div);
$(".btn1").on("click", function() {
$(".create-card").show();
});
$(".btn3").on("click", function() {
$(".create-card").hide();
});
function saveFlashcard() {
var div = document.createElement("div");
var h2_question = document.createElement("h2");
var h2_answer = document.createElement("h2");
div.className = "flashcard";
h2_question.setAttribute("style", "border-top:1px solid blue; padding:15px; margin-top:30px");
h2_question.innerHTML = question.value;
h2_answer.setAttribute("style", "text-align:center; display:none; color:Blue");
h2_answer.innerHTML = answer.value;
// $(".div").on("click", function() {
// $(".h2_question").show();
// });
div.appendChild(h2_question);
div.appendChild(h2_answer);
$("div").on("click", function() {
if (h2_answer.style.display == "none") {
h2_answer.style.display = "block";
} else {
h2_answer.style.display = "none";
}
});
div.addEventListener("dblclick", function() {
div.remove();
});
flashcards.insertAdjacentElement("beforeend", div);
question.value = '';
answer.value = '';
// var test = JSON.parse(localStorage.getItem("stored"));
// test.push(JSON.stringify([question.value, answer.value]));
};
</script>

Built HTML editor displaying ‘rectangles’

I programmed an HTML editor, but it isn’t working. It was working a little time ago, but probably my sister edited the code (she practically knows nothing of HTML)
Now the problem is that whenever I press the enter key, instead of simply moving to the next line, a rectangle is created. Why?
Here is the code:
const first = document.querySelector(".first");
const iframe = document.querySelector("iframe");
const btn = document.querySelector("button");
btn.addEventListener("click", () => {
var html = first.textContent;
iframe.src = "data:text/html;charset=utf-8," + encodeURI(html);
});
first.addEventListener('keyup',()=>{
var html = first.textContent;
iframe.src = "data:text/html;charset=utf-8," + encodeURI(html);
})
first.addEventListener("paste", function(e) {
e.preventDefault();
var text = e.clipboardData.getData("text/plain");
document.execCommand("insertText", false, text);
});
* {
box-shadow: 0 2px 3px black;
position: fixed;
height: 100vh;
justify-content: center;
align-items: center;
border: 7px solid #36383f;
}
.first {
background-color: #ffffff;
width: 50%;
overflow-x: hidden;
overflow-y: auto;
white-space: pre;
box-shadow: 0 1px 1px rgb(22, 22, 22);
outline: none;
padding: 0.4rem;
height: 90vh;
}
.second {
background-color: rgb(255, 255, 255);
width: 50%;
overflow-y: auto;
white-space: pre;
right: 0;
box-shadow: 0 1px 1px rgb(22, 22, 22);
padding: 0.4rem;
height: 90vh;
}
<div class="main-editor">
<button class="btn">Run</button>
<div class="first" contenteditable>writecode</div>
<iframe class="second" > </iframe>
</div>

It is because you added box-shadow and border to all elements.
Remove them from *.
I changed * to .first, .second
const first = document.querySelector(".first");
const iframe = document.querySelector("iframe");
const btn = document.querySelector("button");
btn.addEventListener("click", () => {
var html = first.textContent;
iframe.src = "data:text/html;charset=utf-8," + encodeURI(html);
});
first.addEventListener('keyup',()=>{
var html = first.textContent;
iframe.src = "data:text/html;charset=utf-8," + encodeURI(html);
})
first.addEventListener("paste", function(e) {
e.preventDefault();
var text = e.clipboardData.getData("text/plain");
document.execCommand("insertText", false, text);
});
.first, .second {
box-shadow: 0 2px 3px black;
position: fixed;
justify-content: center;
align-items: center;
border: 7px solid #36383f;
}
.first {
background-color: #ffffff;
width: 50%;
overflow-x: hidden;
overflow-y: auto;
white-space: pre;
box-shadow: 0 1px 1px rgb(22, 22, 22);
outline: none;
padding: 0.4rem;
height: 90vh;
}
.second {
background-color: rgb(255, 255, 255);
width: 50%;
overflow-y: auto;
white-space: pre;
right: 0;
box-shadow: 0 1px 1px rgb(22, 22, 22);
padding: 0.4rem;
height: 90vh;
}
<div class="main-editor">
<button class="btn">Run</button>
<div class="first" contenteditable>writecode</div>
<iframe class="second" > </iframe>
</div>

How can I choose a different timezone in javascript?

I made an analog clock using html, css, and JS for a website I'm working on. I want this clock to show time in a specific timezone which I want, but using the codes below it only shows time based on client's time.
actually my final goal is to have 5 of these analog clocks and each would show a different time like Sydney, Tokyo, Frankfurt, London and New York.
any ideas how to do that?
this is my clock.css:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #091921;
}
.clock {
width: 120px;
height: 120px;
border-radius: 50%;
background-image: url("https://i.postimg.cc/hjVspvcJ/clock.png");
background-size: cover;
display: flex;
background-color: #D3D3D3;
justify-content: center;
align-items: center;
box-shadow: 0 -5px 5px rgba(255, 255, 255, 0.05),
inset 0 -5px 5px rgba(255, 255, 255, 0.05), 0 5px 5px rgba(0, 0, 0, 0.3),
inset 0 5px 5px rgba(0, 0, 0, 0.3);
}
.clock::before {
content: "";
width: 5px;
height: 5px;
position: absolute;
background-color: #000000;
border-radius: 50%;
z-index: 1000;
}
.hour,
.min,
.sec {
position: absolute;
}
.hr {
width: 64px;
height: 64px;
}
.mn {
width: 76x;
height: 76px;
}
.sc {
width: 92px;
height: 92px;
}
.hr,
.mn,
.sc {
display: flex;
justify-content: center;
}
.hr::before {
content: "";
width: 3px;
height: 32px;
background-color: #000000;
z-index: 100;
border-radius: 2px;
}
.mn::before {
content: "";
width: 2px;
height: 36px;
background-color: #000000;
z-index: 11;
border-radius: 2px;
}
.sc::before {
content: "";
width: 1px;
height: 56px;
background-color: #000000;
z-index: 10;
border-radius: 2px;
}
this is clock.html:
<html>
<head>
<link rel="stylesheet" href="clock.css">
</head>
<body>
<div class="clock">
<div class="hour">
<div class="hr" id="hr"></div>
</div>
<!-- <button class= id="nine">9</button>
<button class= -bg" id="divide">/</button>
<button class=" ary" id="four">4</button>-->
<div class="min">
<div class="mn" id="mn"></div>
</div>
<div class="sec">
<div class="sc" id="sc"></div>
</div>
</div>
<script src="clock.js"></script>
</body>
</html>
and this is clock.js:
const deg = 6;
const hr = document.querySelector("#hr");
const mn = document.querySelector("#mn");
const sc = document.querySelector("#sc");
/*height: 3px;
background-color: #fb7454;
opacity: 0.8;*/
setInterval(() => {
let day = new Date();
let hh = day.getHours() * 30; //360deg / 12 hour => 30
let mm = day.getMinutes() * deg;
let ss = day.getSeconds() * deg;
/*height: 3px;
background-color: #fb7454;
opacity: 0.8;*/
hr.style.transform = `rotateZ(${hh + mm / 12}deg)`;
mn.style.transform = `rotateZ(${mm}deg)`;
sc.style.transform = `rotateZ(${ss}deg)`;
});

Btw guys I found the answer.
I used this function to convert the current time to annother time zone:
function convertTZ(date, tzString) {
return new Date((typeof date === "string" ? new Date(date) : date).toLocaleString("en-US", {timeZone: tzString}));
I hope this helps others with similar problem.

How to fit elements at slider container

I work with statick creation elements, and for this i need to have slider.
I just create slider, but elements are not fit in to slider container.
Example:
var htmlElements;
var userName = "Jonny Programmer"
var id = "6656"
function createUserCard() {
htmlElements = `<div class="user-card">
<img src="https://source.unsplash.com/user/erondu" class="userImage" />
<div class="info">
<div class="name">${userName}</div>
<div class="handle">
<div class="idPersone">${id}</div>
</div>
</div>
</div>`
$('.cardsCreation').append(htmlElements);
}
$('#plus-button').on('click', function () {
createUserCard();
});
(function () {
var sliderImages = document.querySelectorAll('.image'),
arrowLeft = document.querySelector('#left-arrow'),
arrowRight = document.querySelector('#right-arrow'),
currentImg = 0;
function initSlider() {
resetSlider();
sliderImages[0].style.display = 'block';
}
function resetSlider() {
for (var i = 0; i < sliderImages.length; i++) {
sliderImages[i].style.display = 'none';
}
}
function toLeft() {
resetSlider();
sliderImages[currentImg - 1].style.display = 'block';
currentImg--;
}
function toRight() {
resetSlider();
sliderImages[currentImg + 1].style.display = 'block';
currentImg++;
}
arrowLeft.addEventListener('click', function () {
if (currentImg === 0) {
currentImg = sliderImages.length;
}
toLeft();
});
arrowRight.addEventListener('click', function () {
if (currentImg === sliderImages.length - 1) {
currentImg = -1;
}
toRight();
});
initSlider();
})();
.user-card, userImage {
box-shadow: 0px 2px 5px 0 rgba(0,0,0,0.25);
}
.user-card {
margin: 12px;
padding: 10px 10px 10px 10px;
border-radius: 12px;
width: 160px;
text-align: center;
float: left;
background-color: #fff;
}
.userImage {
border-radius: 50%;
height: 140px;
width: 140px;
border: 5px solid #eee;
}
.name {
font-size: 20px;
margin: 5px;
font-weight: bold;
}
.progress {
color: #25af53;
font-size: 48px;
}
#plus-button {
width: 55px;
height: 55px;
border-radius: 50%;
background: #428bca;
position: absolute;
top: 33%;
margin-left: 20px;
cursor: pointer;
box-shadow: 0px 2px 5px #666;
border: none;
outline: none;
}
.plus {
color: white;
position: absolute;
top: 0;
display: block;
bottom: 0;
left: 0;
right: 0;
text-align: center;
padding: 0;
margin: 0;
line-height: 55px;
font-size: 38px;
font-family: 'Roboto';
font-weight: 300;
}
#plus-button:hover {
box-shadow: 0 6px 14px 0 #666;
transform: scale(1.05);
}
.wrapper {
position: relative;
}
.arrow {
cursor: pointer;
position: absolute;
width: 0;
height: 0;
border-style: solid;
top: 50%;
margin-top: 160px;
}
#left-arrow {
border-width: 50px 40px 50px 0;
border-color: transparent #000 transparent transparent;
left: 0;
margin-left: 25px;
}
#right-arrow {
border-width: 50px 0 50px 40px;
border-color: transparent transparent transparent #000;
right: 0;
margin-right: 25px;
}
.image {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.vertical-align-wrapper {
display: table;
overflow: hidden;
text-align: center;
}
.vertical-align-wrapper span {
display: table-cell;
vertical-align: middle;
font-size: 5rem;
color: #ffffff;
}
#media only screen and (max-width : 992px) {
.vertical-align-wrapper span {
font-size: 2.5rem;
}
#left-arrow {
border-width: 30px 20px 30px 0;
margin-left: 15px;
}
#right-arrow {
border-width: 30px 0 30px 20px;
margin-right: 15px;
}
.arrow {
margin-top: -30px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div id="left-arrow" class="arrow"></div>
<div id="slider">
<div class="image image-one">
<div class="vertical-align-wrapper">
<div class="cardsCreation"></div>
<button id="plus-button">
<p class="plus">+</p>
</button>
</div>
</div>
<div class="image image-two">
<div class="vertical-align-wrapper">
<span>Slide 2</span>
</div>
</div>
<div class="image image-three">
<div class="vertical-align-wrapper">
<span>Slide 3</span>
</div>
</div>
</div>
<div id="right-arrow" class="arrow"></div>
</div>
So as u can see affter tapping "+" i add new ellement in to html.
And from two sides i have arrows which are changing slider.
After tapping arrows go down, and this is not good.
And after i will reach limit of adding element in one slider it's add new element to new slider page.
What i want ex:

If you are using toggle of display CSS property that happened because it remove whole element from the DOM so, I suggest you to use visibility or opacity properties to done your task.