Trying to update html with javascript

Trying to update html with javascript - javascript

So here is my code that i need help with
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style8.css" />
<title>Progress Steps</title>
</head>
<body>
<div class="container">
<div class="progress-container">
<div class="progress" id="progress"></div>
<div class="circle active">1</div>
<div class="circle">2</div>
<div class="circle">3</div>
<div class="circle">4</div>
</div>
<button class="btn" id="prev" disabled>Prev</button>
<button class="btn" id="next">Next</button>
</div>
<script src="script8.js"></script>
</body>
</html>
Here is the css
#import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
:root {
--line-border-fill: #3498db;
--line-border-empty: #383838;
}
* {
box-sizing: border-box;
}
body {
background-color: #1f1f1f;
font-family: 'Muli', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.container {
text-align: center;
}
.progress-container { //im trying to use this
display: flex;
justify-content: space-between;
position: relative;
margin-bottom: 30px;
max-width: 100%;
width: 350px;
}
.progress-container::before { //im trying to use this
content: '';
background-color: var(--line-border-empty);
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
height: 4px;
width: 100%;
z-index: -1;
}
.progress { //im trying to use this
background-color: var(--line-border-fill);
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
height: 4px;
width: 0%;
z-index: -1;
transition: 0.4s ease;
}
.circle {
background-color: #1f1f1f;
color:#e2e2e2;
border-radius: 50%;
height: 30px;
width: 30px;
display: flex;
align-items: center;
justify-content: center;
border: 3px solid var(--line-border-empty);
transition: 0.4s ease;
}
.circle.active {
border-color: var(--line-border-fill);
}
.btn {
background-color: var(--line-border-fill);
color: #fff;
border: 0;
border-radius: 6px;
cursor: pointer;
font-family: inherit;
padding: 8px 30px;
margin: 5px;
font-size: 14px;
}
.btn:active {
transform: scale(0.98);
}
.btn:focus {
outline: 0;
}
.btn:disabled {
background-color: var(--line-border-empty);
cursor: not-allowed;
}
And here is the javascript. Im not really familiar with javascript. Kind of a newbie at it.
const progress = document.getElementById("progress");
const prev = document.getElementById("prev");
const next = document.getElementById("next");
const circles = document.querySelectorAll(".circle");
let currentActive = 1;
next.addEventListener("click", () => {
currentActive++;
if (currentActive > circles.length) {
currentActive = circles.length;
}
update();
});
prev.addEventListener("click", () => {
currentActive--;
if (currentActive < 1) {
currentActive = 1;
}
update();
});
function update() { //here is the part i need help with
}
const actives = document.querySelectorAll(".active");
progress.style.width =
((actives.length - 1) / (circles.length - 1)) * 100 + "%";
if (currentActive === 1) {
prev.disabled = true;
} else if (currentActive === circles.length) {
next.disabled = true;
} else {
prev.disabled = false;
next.disabled = false;
}
Im trying to write a function to update the html when the back or next button is pressed and i need to use the progress css class. I have no idea how to implement it.

You should be able to use the DOM control functions in JavaScript to fix your problem.
Send my answer. Sincerely
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Progress Steps</title>
</head>
<style>
#import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
:root {
--line-border-fill: #3498db;
--line-border-empty: #383838;
}
* {
box-sizing: border-box;
}
body {
background-color: #1f1f1f;
font-family: 'Muli', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.container {
text-align: center;
}
.progress-container {
display: flex;
justify-content: space-between;
position: relative;
margin-bottom: 30px;
max-width: 100%;
width: 350px;
}
.progress-container::before {
content: '';
background-color: var(--line-border-empty);
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
height: 4px;
width: 100%;
z-index: -1;
}
.progress {
background-color: #3498db;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
height: 4px;
width: 0%;
z-index: -1;
transition: 0.4s ease;
}
.circle {
background-color: #1f1f1f;
color:#e2e2e2;
border-radius: 50%;
height: 30px;
width: 30px;
display: flex;
align-items: center;
justify-content: center;
border: 3px solid var(--line-border-empty);
transition: 0.4s ease;
}
.circle.active {
border-color: #3498db;
}
.btn {
background-color: #3498db;
color: #fff;
border: 0;
border-radius: 6px;
cursor: pointer;
font-family: inherit;
padding: 8px 30px;
margin: 5px;
font-size: 14px;
}
.btn:active {
transform: scale(0.98);
}
.btn:focus {
outline: 0;
}
.btn:disabled {
background-color: var(--line-border-empty);
cursor: not-allowed;
}
</style>
<body>
<div class="container">
<div id="content" style="border: 1px solid black; margin: 0 auto; width: 300px; height: 100px; background-color: white;">
Content 1
</div>
<div class="progress-container">
<div class="progress" id="progress"></div>
<div class="circle active">1</div>
<div class="circle">2</div>
<div class="circle">3</div>
<div class="circle">4</div>
</div>
<button class="btn" id="prev" disabled>Prev</button>
<button class="btn" id="next">Next</button>
</div>
</body>
<script>
const progress = document.getElementById("progress");
const prev = document.getElementById("prev");
const next = document.getElementById("next");
const content = document.getElementById("content"); // added
const circles = document.querySelectorAll(".circle");
let currentActive = 1;
next.addEventListener("click", () => {
currentActive++;
if (currentActive > circles.length) {
currentActive = circles.length;
}
update(currentActive);
});
prev.addEventListener("click", () => {
currentActive--;
if (currentActive < 1) {
currentActive = 1;
}
update(currentActive);
});
function update(currentStep) {
//here is the part I fixed
let stepItems = document.getElementsByClassName("circle");
for (let i = 0; i < stepItems.length; i++) {
const stepItem = stepItems[i];
if (stepItem.textContent == currentStep) {
stepItem.classList.toggle("active");
}
}
prev.toggleAttribute("disabled", false);
next.toggleAttribute("disabled", false);
if (currentStep == 1) prev.setAttribute("disabled", true);
if (currentStep == 4) next.setAttribute("disabled", true);
content.innerText = "Content" + currentStep;
}
const actives = document.querySelectorAll(".active");
progress.style.width = ((actives.length - 1) / (circles.length - 1)) * 100 + "%";
if (currentActive === 1) {
prev.disabled = true;
} else if (currentActive === circles.length) {
next.disabled = true;
} else {
prev.disabled = false;
next.disabled = false;
}
</script>
</html>

Related

Button not responding (even not hover)

const sentence = document.getElementById('sentence')
const word = document.getElementById('word')
const number = document.getElementById('number')
const btnContainer = document.getElementById('btnContainer')
function Start() {
btnContainer.style.display = 'flex';
}
Start()
sentence.addEventListener('click', () => {
type = 1;
Start();
})
word.addEventListener('click', () => {
type = 2;
Start();
})
number.addEventListener('click', () => {
type = 3;
Start();
})
.btnContainer {
position: absolute;
top: 60px;
right: .5vw;
gap: .2em;
width: 25vw;
height: 10vh;
align-items: center;
justify-content: center;
}
.btn {
background-color: transparent;
border: transparent;
font-size: 1.1rem;
color: var(--lightprimary);
transition: ease-in-out .2s;
}
.btn:hover {
color: var(--darkprimary);
}
<div class="btnContainer" id="btnContainer">
<button class="sentenceButton btn" id="sentence">Sentence</button>
<button class="wordButton btn" id="word">Words</button>
<button class="numberButton btn" id="number">Numbers</button>
</div>
There is more code that hasn't something to do with the buttons.
The 'btnContainer.style.display' is necessary to work with the other code.

Please confirm that your CSS :root selector is structured like so. In order for it to grab the primary color, you have to define that color first. Also, as mentioned in the comments it appears your buttons are responding via the console log.
const sentence = document.getElementById('sentence')
const word = document.getElementById('word')
const number = document.getElementById('number')
const btnContainer = document.getElementById('btnContainer')
function Start() {
btnContainer.style.display = 'flex';
}
Start()
sentence.addEventListener('click', () => { type = 1; Start(); })
word.addEventListener('click', () => { type = 2; Start(); })
number.addEventListener('click', () => { type = 3; Start(); })
.btnContainer {
position: absolute;
top: 60px;
right: .5vw;
gap: .2em;
width: 25vw;
height: 10vh;
align-items: center;
justify-content: center;
}
.btn {
background-color: white;
border: hidden;
font-size: 1.1rem;
color: var(--lightprimary);
transition: ease-in-out .2s;
}
.btn:hover {
background-color: var(--darkprimary-color);
}
:root {
--darkprimary-color: yellow;
}
<div class="btnContainer" id="btnContainer">
<button class="sentenceButton btn" id="sentence" type="button">Sentence</button>
<button class="wordButton btn" id="word" type="button">Words</button>
<button class="numberButton btn" id="number" type="button">Numbers</button>
</div>

Without the Javascript code and with defined --lightprimary and --darkprimary, everything works.
:root{
--lightprimary: green;
--darkprimary: red;
}
.btnContainer {
position: absolute;
top: 60px;
right: .5vw;
gap: .2em;
width: 25vw;
height: 10vh;
align-items: center;
justify-content: center;
}
.btn {
background-color: transparent;
border: transparent;
font-size: 1.1rem;
color: var(--lightprimary);
transition: ease-in-out .2s;
}
.btn:hover {
color: var(--darkprimary);
}
<div class="btnContainer" id="btnContainer">
<button class="sentenceButton btn" id="sentence">Sentence</button>
<button class="wordButton btn" id="word">Words</button>
<button class="numberButton btn" id="number">Numbers</button>
</div>

const shortApi = 'https://api.quotable.io/random?minLength=60&maxLength=80'
const mediumApi = 'https://api.quotable.io/random?minLength=100&maxLength=180'
const longApi = 'https://api.quotable.io/random?minLength=200&maxLength=220'
const display = document.getElementById('display')
const input = document.getElementById('input')
const restart = document.getElementById('restart-btn')
const sentence = document.getElementById('sentence')
const word = document.getElementById('word')
const number = document.getElementById('number')
const actionBtn1 = document.getElementById('btn1')
const actionBtn2 = document.getElementById('btn2')
const actionBtn3 = document.getElementById('btn3')
const actionBtn4 = document.getElementById('btn4')
const container = document.getElementById('container')
const btnContainer = document.getElementById('btnContainer')
const smallBtnContainer = document.getElementById('smallBtnContainer')
const stats = document.getElementById('stats')
const exit = document.getElementById('exit')
var type = 1
async function newQuote() {
display.innerText = '';
var quote = 'hello world'
let arr = quote.split("").map(value => {
return "<span class='span'>" + value + "</span>"
})
display.innerHTML += arr.join("");
}
function Start() {
newQuote()
input.value = null
stats.style.display = 'none';
container.style.display = 'flex';
btnContainer.style.display = 'flex';
smallBtnContainer.style.display = 'block';
input.disabled = false;
let startTime = null
let endTime = null
input.addEventListener('input', () => {
if (startTime == null)
startTime = new Date()
let quoteChars = document.querySelectorAll(".span")
var mistakes = 0
quoteChars = Array.from(quoteChars)
let inputChars = input.value.split("")
quoteChars.forEach((char, index) => {
if (char.innerText === inputChars[index]) {
char.classList.add('correct')
char.classList.remove('incorrect')
} else if (inputChars[index] == null) {
char.classList.remove('correct')
char.classList.remove('incorrect')
} else {
char.classList.remove('correct')
char.classList.add('incorrect')
mistakes += 1
}
})
if (inputChars.length >= quoteChars.length) {
clicked = false
stats.style.display = 'block';
container.style.display = 'none';
btnContainer.style.display = 'none';
smallBtnContainer.style.display = 'none';
input.disabled = true;
endTime = new Date()
const delta = endTime - startTime
const seconds = delta / 1000
const minutes = seconds / 60
const accuracy = Math.round(((input.value.length - mistakes) / input.value.length) * 100)
const wpm = (input.value.length / 5 / minutes).toFixed(2) + " wpm"
document.getElementById('score').innerHTML = wpm
document.getElementById('mistakes').innerText = mistakes
document.getElementById('accuracy').innerText = accuracy + "%"
}
})
}
function changeActionButtons(type) {
actionBtn1.style.display = 'block'
actionBtn2.style.display = 'block'
actionBtn3.style.display = 'block'
actionBtn4.style.display = 'block'
if (type == 1) {
actionBtn1.style.display = 'none'
actionBtn2.textContent = 'short'
actionBtn3.textContent = 'medium'
actionBtn4.textContent = 'long'
} else if (type == 2) {
actionBtn1.textContent = '1'
actionBtn2.textContent = '10'
actionBtn3.textContent = '20'
actionBtn4.textContent = '30'
} else if (type == 3) {
actionBtn1.textContent = '1'
actionBtn2.textContent = '5'
actionBtn3.textContent = '10'
actionBtn4.textContent = '15'
}
}
changeActionButtons(type)
Start()
exit.addEventListener('click', () => {
stats.style.display = 'none';
container.style.display = 'flex';
btnContainer.style.display = 'block';
smallBtnContainer.style.display = 'block';
Start()
})
restart.addEventListener('click', () => {
Start();
})
sentence.addEventListener('click', () => {
console.log('gello');
type = 1;
changeActionButtons(1);
Start();
console.log('clicked');
})
word.addEventListener('click', () => {
type = 2;
changeActionButtons(2);
Start();
})
number.addEventListener('click', () => {
type = 3;
changeActionButtons(3);
Start();
})
* {
box-sizing: border-box;
}
:root {
--primary: #222;
--lightprimary: #555;
--darkprimary: #0f0f0f;
--secondary: #ffcf00;
--incorrect: #ff2d2d;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: var(--primary);
font-size: 2rem;
font-family: 'Oxygen', Arial, sans-serif;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
-khtml-user-select: none;
}
button {
font-family: 'Oxygen', Arial, sans-serif;
}
.container {
position: relative;
display: flex;
width: 90%;
height: 50vh;
text-align: center;
justify-content: center;
align-items: center;
padding: 1rem;
color: var(--lightprimary);
max-width: 1000px;
transition: ease-in-out .2s;
}
.quote {
font-family: 'Oxygen Mono', monospace;
display: block;
position: absolute;
top: 100px;
}
.input {
font-family: 'Oxygen Mono', monospace;
position: absolute;
top: 280px;
resize: none;
width: 100%;
border: 2px solid var(--lightprimary);
border-radius: 20px;
text-align: left;
font-size: 1.1rem;
margin: auto;
outline: none;
text-align: center;
color: var(--lightprimary);
background-color: transparent;
}
.input:focus {
border-color: var(--darkprimary);
}
.restart-btn {
position: absolute;
top: 340px;
background-color: transparent;
border: transparent;
font-size: 4rem;
color: var(--lightprimary);
transition: ease-in-out .2s;
}
.restart-btn:hover {
color: var(--darkprimary);
}
.btnContainer {
position: absolute;
top: 60px;
right: .5vw;
gap: .2em;
width: 25vw;
height: 10vh;
align-items: center;
justify-content: center;
}
.btn {
font-size: 1.1rem;
color: var(--lightprimary);
transition: ease-in-out .2s;
}
.btn:hover {
color: var(--darkprimary);
}
.smallBtnContainer {
position: absolute;
top: 70px;
right: 6.5vw;
gap: .2em;
width: 25vw;
height: 10vh;
align-items: center;
justify-content: center;
}
.smallBtn {
background-color: transparent;
border: transparent;
font-size: 1rem;
color: var(--lightprimary);
transition: ease-in-out .2s;
}
.smallBtn:hover {
color: var(--darkprimary);
}
.stats {
display: none;
justify-content: center;
align-items: center;
width: 40vw;
height: 40vh;
position: absolute;
color: var(--secondary);
text-align: center;
font-size: 1.6rem;
transition: ease-in-out .2s;
}
.exit {
font-size: 2rem;
background-color: transparent;
border: transparent;
color: var(--lightprimary);
transition: ease-in-out .2s;
}
.exit:hover {
color: var(--darkprimary);
}
.logo {
position: absolute;
width: 200px;
aspect-ratio: 1;
top: 0;
left: 0;
}
.title {
position: absolute;
color: var(--secondary);
top: 75px;
left: 150px;
}
.correct {
color: var(--secondary);
text-decoration: none;
}
.incorrect {
color: var(--incorrect);
text-decoration: underline;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Oxygen&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Oxygen+Mono&display=swap" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<title>Type Lite</title>
<script src="script.js" defer></script>
</head>
<body>
<img class="logo" alt='logo'>
<p class='title'>logo</p>
<div class="stats" id="stats">
<p>Score: <span id="score"></span></p>
<p>Mistakes: <span id="mistakes"></span></p>
<p>Accuracy: <span id="accuracy"></span></p>
<button class="exit" id="exit">X</button>
</div>
<div class="container" id="container">
<div class="quote" id="display"></div>
<textarea class="input" id="input" cols="90" rows="2" placeholder="Type here to start." autofocus></textarea>
<button class="restart-btn" id="restart-btn">Restart</button>
</div>
<div class="btnContainer" id="btnContainer">
<button class="sentenceButton btn" id="sentence">Sentence</button>
<button class="wordButton btn" id="word">Words</button>
<button class="numberButton btn" id="number">Numbers</button>
</div>
<div class="smallBtnContainer" id="smallBtnContainer">
<button class="smallBtn" id="btn1">1</button>
<button class="smallBtn" id="btn2">2</button>
<button class="smallBtn" id="btn3">3</button>
<button class="smallBtn" id="btn4">4</button>
</div>
</body>
</html>

JavaScript WebApp lose shape after clicking "Again"

I am making a small game to guess numbers in javascript, but when I try to reset the game adding an addEventListener with a click and clicking a button created that is called "Again" in order to reset to original configuration and reset the game web-app loses shape. Why this happens??
My HTML code is :
var number = Math.trunc(Math.random() * 20) + 1;
var score = 20;
var highscore = 0;
document.querySelector(".check").addEventListener("click", function() {
var guess = Number(document.querySelector(".guess").value);
console.log(guess);
// when there is no input
if (!guess) {
document.querySelector(".message").
textContent = "No Number!!!!!!";
// when player wins
} else if (guess === number) {
document.querySelector(".message").
textContent = "Correct Number!!!!!!!!";
document.querySelector(".number").textContent = number;
document.querySelector("body").style.backgroundColor="#60b347";
document.querySelector(".number").style.width="30rem";
if(score>highscore){
highscore=score;
document.querySelector(".highscore").textContent=highscore;
}
// when guess is too high
} else if (guess > number) {
if (score > 1) {
document.querySelector(".message").
textContent = "Too High!!!!!!!!!!";
score = score - 1;
document.querySelector(".score").textContent = score;
} else {
document.querySelector(".message").textContent = "YOU LOST THE GAME";
document.querySelector(".score").textContent=0;
}
// when guess is to low
} else if (guess < number) {
if (score > 1) {
document.querySelector(".message").
textContent = "Too Low!!!!!!!!!!";
score = score - 1;
document.querySelector(".score").textContent = score;
} else {
document.querySelector(".message").textContent = "YOU LOST THE GAME";
document.querySelector(".score").textContent=0;
}
}
});
document.querySelector(".again").addEventListener("click", function(){
score=20;
var number = Math.trunc(Math.random() * 20) + 1;
document.querySelector(".message").textContent = "Start guessing...";
document.querySelector(".score").textContent = score;
document.querySelector(".number").textContent = "?";
document.querySelector(".guess").value="";
document.querySelector("body").style.backgroundColor="#222";
document.querySelector("body").style.width="15rem";
});
#import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
box-sizing: border-box;
}
body {
font-family: 'Press Start 2P', sans-serif;
color: #eee;
background-color: #222;
/* background-color: #60b347; */
}
/* LAYOUT */
header {
position: relative;
height: 35vh;
border-bottom: 7px solid #eee;
}
main {
height: 65vh;
color: #eee;
display: flex;
align-items: center;
justify-content: space-around;
}
.left {
width: 52rem;
display: flex;
flex-direction: column;
align-items: center;
}
.right {
width: 52rem;
font-size: 2rem;
}
/* ELEMENTS STYLE */
h1 {
font-size: 4rem;
text-align: center;
position: absolute;
width: 100%;
top: 52%;
left: 50%;
transform: translate(-50%, -50%);
}
.number {
background: #eee;
color: #333;
font-size: 6rem;
width: 15rem;
padding: 3rem 0rem;
text-align: center;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
}
.between {
font-size: 1.4rem;
position: absolute;
top: 2rem;
right: 2rem;
}
.again {
position: absolute;
top: 2rem;
left: 2rem;
}
.guess {
background: none;
border: 4px solid #eee;
font-family: inherit;
color: inherit;
font-size: 5rem;
padding: 2.5rem;
width: 25rem;
text-align: center;
display: block;
margin-bottom: 3rem;
}
.btn {
border: none;
background-color: #eee;
color: #222;
font-size: 2rem;
font-family: inherit;
padding: 2rem 3rem;
cursor: pointer;
}
.btn:hover {
background-color: #ccc;
}
.message {
margin-bottom: 8rem;
height: 3rem;
}
.label-score {
margin-bottom: 2rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<title>Guess My Number!</title>
</head>
<body>
<header>
<h1>Guess My Number!</h1>
<p class="between">(Between 1 and 20)</p>
<button class="btn again">Again!</button>
<div class="number">?</div>
</header>
<main>
<section class="left">
<input type="number" class="guess" />
<button class="btn check">Check!</button>
</section>
<section class="right">
<p class="message">Start guessing...</p>
<p class="label-score">Score: <span class="score">20</span></p>
<p class="label-highscore">
Highscore: <span class="highscore">0</span>
</p>
</section>
</main>
<script src="script.js"></script>
</body>
</html>

delete this row: document.querySelector("body").style.width="15rem"

Scroll Snap for div that looks like an iPhone in HTML

I made this iPhone in HTML (Please do not pay attention to the spaghetti code, and it's in german, if it is necessary i can translate it with pleasure):
var time = document.getElementById("time");
var notification = document.getElementById("notification");
var notificationHeader = document.getElementById("notificationHeader");
var notificationDescription = document.getElementById("notificationDescription");
var verificationCode = Math.floor(1000 + Math.random() * 9000);
var input = document.getElementById("instagramNumberText");
var correctOrWrongCheck = document.getElementById("correctOrWrongCheck");
var verificationCodePTag = document.getElementById("verificationCode");
var instagram = document.getElementById("instagramApp");
var mail = document.getElementById("mailApp");
var createAccountButton = document.getElementById("createAccount");
var createAccountForm = document.getElementById("createAccountForm");
var verificationCodeInstagramPage = document.getElementById("verificationCodeInstagramPage");
var controlVerificationCodeButton = document.getElementById("controlVerificationCode");
var continueToInstagramAccountButton = document.getElementById("continueToInstagramAccount");
var verificationCodeEmailDescription = document.getElementById("verificationCodeEmailDescription");
var verificationCodeEmail = document.getElementById("verificationCodeEmail");
var erfolgreichAngemeldet = document.getElementById("erfolgreichAngemeldet");
var instagramAccount = document.getElementById("instagramAccount");
var instagramName = document.getElementById("instagramName");
var instagramNameInput = document.getElementById("instagramNameInput");
// Time
function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
// add a zero in front of numbers<10
m = checkTime(m);
document.getElementById('time').innerHTML = h + ":" + m;
t = setTimeout(function() {
startTime()
}, 500);
}
startTime();
// Insta
function controlVerificationCode() {
if (input.value == verificationCode) {
correctOrWrongCheck.innerHTML = "Der Code war korrekt!";
continueToInstagramAccountButton.style.display = "block";
continueToInstagramAccountButton.style.margin = "5px auto";
controlVerificationCodeButton.style.display = "none";
} else if (input.value !== verificationCode) {
correctOrWrongCheck.innerHTML = "Der Code ist leider Falsch!";
continueToInstagramAccountButton.style.display = "none";
controlVerificationCodeButton.style.display = "block";
}
}
verificationCodeEmailDescription.innerHTML = "Ihr Bestätigunscode lautet: " + verificationCode;
// OPEN AND CLOSE APPS
function openVerificationCodeInstagramPage() {
createAccountForm.style.display = "none";
verificationCodeInstagramPage.style.display = "block"
verificationCodeEmail.style.display = "block";
instagramName.value = instagramNameInput.value;
notification.style.transform = "translate(-50%, -50%) scale(0)";
notificationDescription.innerHTML = "Ihr Bestätigunscode lautet: ...";
setTimeout(
function() {
notification.style.transform = "translate(-50%, -50%) scale(1)";
}, 1000);
setTimeout(
function() {
notification.style.transform = "translate(-50%, -50%) scale(0)";
}, 7000);
}
function continueToInstagramAccount() {
verificationCodeInstagramPage.style.display = "none";
instagramAccount.style.display = "flex";
erfolgreichAngemeldet.display = "none";
notificationDescription.innerHTML = "Erfolgreich bei Instagram angemeldet"
notification.style.transform = "translate(-50%, -50%) scale(0)";
erfolgreichAngemeldet.style.display = "block";
setTimeout(
function() {
notification.style.transform = "translate(-50%, -50%) scale(1)";
}, 1000);
setTimeout(
function() {
notification.style.transform = "translate(-50%, -50%) scale(0)";
}, 7000);
var counter = 0;
var followers = document.getElementById('followers');
setTimeout(function(){
var st = setInterval(function(){
followers.innerHTML = ++counter;
},100)
},100);
}
function closeNotification() {
notification.style.transform = "translate(-50%, -50%) scale(0)";
}
function openInstagram() {
instagram.style.transform = "scale(1)";
}
function openMail() {
mail.style.transform = "scale(1)";
}
function closeApp() {
instagram.style.transform = "scale(0)";
mail.style.transform = "scale(0)";
}
window.onload = function() {
document.getElementById("instagramNumberText").value = '';
}
* {
margin: 0;
padding: 0;
font-family: 'Roboto',sans-serif;
user-select: none;
}
input:focus, textarea:focus {
outline: 0;
}
#phone {
height: 600px;
width: 350px;
border-radius: 50px;
position: absolute;
top: 600px;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-top: 90px solid;
border-right: 15px solid;
border-left: 15px solid;
border-bottom: 90px solid;
background-image: url("https://ioshacker.com/wp-content/uploads/2019/06/iOS-13-wallpaper.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.app {
box-shadow: 0 0 9px -4px #000;
}
#topbar {
padding: 0.3em;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
height: 20px;
transform: translate(-4%,0) scale(0.9);
width: 370px;
}
#connection {
display: flex;
align-items: center;
width: 110px;
justify-content: space-around;
}
#battery {
display: flex;
align-items: center;
width: 110px;
justify-content: end;
}
#battery .bi-battery-full {
font-size: 23px;
margin-left: 5px;
}
#topbar .bi-wifi-2 {
font-size: 25px;
margin-top: -3px;
}
#time {
text-align: center;
}
#notification {
margin: 0;
position: absolute;
top: 365px;
left: 50%;
-ms-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
height: 85px;
width: 315px;
background: #EDEBED;
border-radius: 10px;
z-index: 10000;
transition: all 0.5s;
box-shadow: 0 0 10px -1px #525252;
padding: 0.5em 0 0.5em 1em;
display: flex;
flex-direction: column;
justify-content: center;
}
#notification h1 {
font-size: 23px;
}
#appsOne {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
#instagramIcon, #verificationCode, #mailIcon {
margin: 20px;
}
.app {
font-size: 40px;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
transition: all 0.2s;
}
.app:hover {
cursor: pointer;
filter: brightness(90%);
}
.bi-instagram, .bi-envelope-fill {
width: 40px;
height: 40px;
color: #fff;
font-family: sans-serif;
}
/* Instagram */
#instagramIcon {
background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
}
#instagramApp {
position: absolute;
top: 0;
left: 0;
background: #EAEAEA;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
transition: all 0.3s;
transform: scale(0);
z-index: 99999;
text-align: center;
}
.instagramHeader {
font-family: 'Handlee', cursive;
font-size: 35px;
}
.instagramSecondHeader {
font-size: 15px;
width: 260px;
margin: 1em 0;
}
#instagramNameInput, #instagramEmail, #instagramNumberText {
font-size: 15px;
padding: 0.5em;
border: 1px solid #D1D1D1;
margin: 0.5em 0 0.5em 0;
width: 220px;
}
.instagramButton {
width: 236px;
font-size: 15px;
padding: 0.5em;
background: #3296F0;
color: #fff;
border: none;
margin: 0.5em 0;
transition: all 0.2s;
}
.instagramButton:hover {
filter: brightness(80%);
cursor: pointer;
}
#verificationCodeInstagramPage {
display: none;
}
#continueToInstagramAccount {
display: none;
}
#instagramAccount {
display: none;
justify-content: flex-start;
height: 100%;
width: 100%;
background: #f7f7f7;
flex-direction: column;
align-items: center;
}
#instagramName {
font-size: 20px;
text-align: left;
width: 85%;
padding: 20px 20px 15px 10px;
border-bottom: 1px solid gray;
height: 20px;
border-right: none;
border-top: none;
border-left: none;
background: none;
}
#profilePicture {
font-size: 35px;
width: 80px;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
background: #eae9e9;
border-radius: 100000px;
margin: 20px;
border: 1px solid #6f6e6e;
color: #6f6e6e;
}
#instagramPictureAndNumbers {
display: inherit;
width: 360px;
}
#numbers {
width: 225px;
height: 45px;
margin: 35px 0 0 0;
}
#userDescription {
width: 320px;
font-size: 13px;
border: none;
background: none;
resize: none;
}
.bi-table {
font-size: 25px;
border-bottom: 1px solid;
width: 90%;
margin-top: 0.5em;
}
#emptyImages {
color: #c7c7c7;
margin: 100px;
font-size: 14px;
}
/* Mail */
#mailIcon {
background: linear-gradient(0deg, #05ffff 0%, #3cabe6 30%, #2763dc 70%);
}
#mailApp {
position: absolute;
top: 0;
left: 0;
background: #f6f6f6;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: column;
transition: all 0.3s;
transform: scale(0);
z-index: 99999;
text-align: center;
}
#mailHeader {
font-size: 25px;
padding: 20px;
background: #fff;
width: 88%;
z-index: 999;
}
#verificationCodeEmail {
display: none;
}
.email {
background: #fff;
width: 97%;
padding: 5px;
border-top: 1px solid #e6e6e6;
}
.emailHeader {
text-align: left;
margin: 10px;
font-size: 25px;
}
#verificationCodeEmailDescription, #erfolgreichAngemeldetDescription {
text-align: left;
margin: 10px;
}
#erfolgreichAngemeldet {
display: none;
}
/* Home Button */
#homeButton {
position: absolute;
height: 60px;
width: 60px;
background: transparent;
z-index: 9999;
bottom: -107px;
border-radius: 100000px;
left: 50%;
-ms-transform: translate(-50%, -50%) rotate(-10deg);
transform: translate(-50%, -50%) rotate(-10deg);
border: 1px outset;
cursor: pointer;
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.4.1/font/bootstrap-icons.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;300;400&display=swap" rel="stylesheet">
<div id="notification" onclick="closeNotification();">
<h1 id="notificationHeader"><b>Neue Email erhalten!</b></h1>
<p id="notificationDescription"></p>
</div>
<div id="phone">
<div id="topbar">
<div id="connection">
<i class="bi bi-bar-chart-fill"></i>
LIDL LTE
<i class="bi bi-wifi-2"></i>
</div>
<p id="time"></p>
<div id="battery">
98%
<i class="bi bi-battery-full"></i>
</div>
</div>
<div id="slider">
<div id="appsOne">
<!-- Instagram -->
<div id="instagramIcon" class="app" onclick="openInstagram();"><i class="bi bi-instagram"></i></div>
<div id="instagramApp">
<form id="createAccountForm" action="#" onsubmit="openVerificationCodeInstagramPage(); return false;">
<h1 class="instagramHeader">Instagram</h1>
<p>Erstelle einen Account</p>
<input type="text" id="instagramNameInput" placeholder="Name" maxlength="12" autocomplete="off" required>
<input type="email" id="instagramEmail" placeholder="E-Mail" autocomplete="off" required>
<button type="submit" id="createAccount" class="instagramButton">Erstellen</button>
</form>
<div id="verificationCodeInstagramPage">
<h1 class="instagramHeader">Bestätigen</h1>
<p class="instagramSecondHeader">Wir haben ihn einen Bestätigungscode per Email gesendet!</p>
<input type="text" id="instagramNumberText" maxlength="4" onkeypress="return /[0-9]/i.test(event.key)" placeholder="Bestätigungscode"><br>
<button onclick="controlVerificationCode();" id="controlVerificationCode" class="instagramButton">Bestätigen</button>
<button class="instagramButton" id="continueToInstagramAccount" onclick="continueToInstagramAccount()">Weiter</button>
<p id="correctOrWrongCheck"></p>
</div>
<div id="instagramAccount">
<input type="text" id="instagramName">
<div id="instagramPictureAndNumbers">
<div id="profilePicture"><i class="bi bi-person-fill"></i></div>
<table id="numbers">
<tr>
<th id="posts">0</th>
<th id="followers">1</th>
<th id="following">0</th>
</tr>
<tr>
<td>Posts</td>
<td>Followers</td>
<td>Following</td>
</tr>
</table>
</div>
<textarea id="userDescription" placeholder="Beschreibung..." rows="10"></textarea>
<i class="bi bi-table"></i>
<p id="emptyImages">No images found</p>
</div>
</div>
<div id="appsTwo">
Second App Page
</div>
</div>
<!-- Mail App -->
<div id="mailIcon" class="app" onclick="openMail();"><i class="bi bi-envelope-fill"></i></div>
<div id="mailApp">
<h1 id="mailHeader">E-Mails</h1>
<div class="email" id="erfolgreichAngemeldet">
<h1 class="emailHeader">Instagram</h1>
<p class="emailDescription" id="erfolgreichAngemeldetDescription">Erfolgreich angemeldet</p>
</div>
<div class="email" id="verificationCodeEmail">
<h1 class="emailHeader">Instagram</h1>
<p class="emailDescription" id="verificationCodeEmailDescription">Ihr Bestätigunscode lautet</p>
</div>
</div>
</div>
<div id="homeButton" onclick="closeApp();"></div>
To see the iPhone better you should click on Full-Page in the snippet.
My problem was that I have 2 divs: #appsOne and #appsTwo which are in the div #slider. On the home page of the iPhone you can see two apps (#appsOne) and a text (#appsTwo) in the middle. The apps (#appsOne) should stay where they are but the text (#appsTwo) should be made on a second page with a horizontal scroll snap. How could I do that?
And here's an image, how it looks like without the slider and the #appsTwo div:

CSS Scroll-snapping
We can seperate the two 'screen's by wrapping each in a div with class panel.
To make the slider scrollable, we have to apply white-space: nowrap to force it into a single line. To make scroll-snap work horizontally, set scroll-snap-type to x and make it mandatory (scroll-snap-type: x mandatory;). This means that:
The visual viewport of this scroll container will rest on a snap point if it isn't currently scrolled. That means it snaps on that point when the scroll action finished, if possible. If content is added, moved, deleted or resized the scroll offset will be adjusted to maintain the resting on that snap point.MDN
We also set overscroll-behavior-x to contain which makes sure that no scroll chaining occurs to neighboring scrolling areas, e.g. underlying elements will not scroll.
We then apply scroll-snap-align: center to .panel. To prevent the overflowing contents in the panels, we also apply white-space: initial.
Result:
https://jsfiddle.net/Spectric/j7br8h5a/
JS Scroll-snapping (mouse drag)
We can take it one step further by adding support for user drag to scroll.
For this, we don't actually need scroll-snap at all. We can do it with pure JS.
Add an event listener for mousedown that sets isDown to true. Record the last position of the mouse.
Add an event listener for mousemove that checks whether the user is currently dragging (isDown == true). If the user is, calculate the distance from the current mouse position and the last mouse position, increment the slider's scrollLeft by the difference, and set the last position to the current position.
Add an event listener for mouseup that sets isDown to false and checks whether the slider's current scrollLeft is bigger than half. If it is, we can use scrollIntoView() on one panel to smoothly scroll it into the viewport.
To prevent scrolling when an app is opened, we can store the status in a variable which we set it to true when one of the open app function is called and false when the closeApp function is called. In the mousemove listener we also check whether this variable is true.
Best viewed in full-page mode
var time = document.getElementById("time");
var notification = document.getElementById("notification");
var notificationHeader = document.getElementById("notificationHeader");
var notificationDescription = document.getElementById("notificationDescription");
var verificationCode = Math.floor(1000 + Math.random() * 9000);
var input = document.getElementById("instagramNumberText");
var correctOrWrongCheck = document.getElementById("correctOrWrongCheck");
var verificationCodePTag = document.getElementById("verificationCode");
var instagram = document.getElementById("instagramApp");
var mail = document.getElementById("mailApp");
var createAccountButton = document.getElementById("createAccount");
var createAccountForm = document.getElementById("createAccountForm");
var verificationCodeInstagramPage = document.getElementById("verificationCodeInstagramPage");
var controlVerificationCodeButton = document.getElementById("controlVerificationCode");
var continueToInstagramAccountButton = document.getElementById("continueToInstagramAccount");
var verificationCodeEmailDescription = document.getElementById("verificationCodeEmailDescription");
var verificationCodeEmail = document.getElementById("verificationCodeEmail");
var erfolgreichAngemeldet = document.getElementById("erfolgreichAngemeldet");
var instagramAccount = document.getElementById("instagramAccount");
var instagramName = document.getElementById("instagramName");
var instagramNameInput = document.getElementById("instagramNameInput");
// Time
function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
// add a zero in front of numbers<10
m = checkTime(m);
document.getElementById('time').innerHTML = h + ":" + m;
t = setTimeout(function() {
startTime()
}, 500);
}
startTime();
// Insta
function controlVerificationCode() {
if (input.value == verificationCode) {
correctOrWrongCheck.innerHTML = "Der Code war korrekt!";
continueToInstagramAccountButton.style.display = "block";
continueToInstagramAccountButton.style.margin = "5px auto";
controlVerificationCodeButton.style.display = "none";
} else if (input.value !== verificationCode) {
correctOrWrongCheck.innerHTML = "Der Code ist leider Falsch!";
continueToInstagramAccountButton.style.display = "none";
controlVerificationCodeButton.style.display = "block";
}
}
verificationCodeEmailDescription.innerHTML = "Ihr Bestätigunscode lautet: " + verificationCode;
// OPEN AND CLOSE APPS
function openVerificationCodeInstagramPage() {
createAccountForm.style.display = "none";
verificationCodeInstagramPage.style.display = "block"
verificationCodeEmail.style.display = "block";
instagramName.value = instagramNameInput.value;
notification.style.transform = "translate(-50%, -50%) scale(0)";
notificationDescription.innerHTML = "Ihr Bestätigunscode lautet: ...";
setTimeout(
function() {
notification.style.transform = "translate(-50%, -50%) scale(1)";
}, 1000);
setTimeout(
function() {
notification.style.transform = "translate(-50%, -50%) scale(0)";
}, 7000);
}
function continueToInstagramAccount() {
verificationCodeInstagramPage.style.display = "none";
instagramAccount.style.display = "flex";
erfolgreichAngemeldet.display = "none";
notificationDescription.innerHTML = "Erfolgreich bei Instagram angemeldet"
notification.style.transform = "translate(-50%, -50%) scale(0)";
erfolgreichAngemeldet.style.display = "block";
setTimeout(
function() {
notification.style.transform = "translate(-50%, -50%) scale(1)";
}, 1000);
setTimeout(
function() {
notification.style.transform = "translate(-50%, -50%) scale(0)";
}, 7000);
var counter = 0;
var followers = document.getElementById('followers');
setTimeout(function() {
var st = setInterval(function() {
followers.innerHTML = ++counter;
}, 100)
}, 100);
}
function closeNotification() {
notification.style.transform = "translate(-50%, -50%) scale(0)";
}
var isAppOpened = false;
function openInstagram() {
isAppOpened = true;
instagram.style.transform = "scale(1)";
}
function openMail() {
isAppOpened = true;
mail.style.transform = "scale(1)";
}
function closeApp() {
isAppOpened = false;
instagram.style.transform = "scale(0)";
mail.style.transform = "scale(0)";
}
window.onload = function() {
document.getElementById("instagramNumberText").value = '';
}
const slider = document.getElementById("slider");
const panels = document.querySelectorAll('.panel');
var lastX = 0;
var isDown = false;
document.addEventListener("mousedown", function(e) {
lastX = e.pageX;
isDown = true;
})
document.addEventListener("mousemove", function(e) {
if (isDown && !isAppOpened) {
const curX = e.pageX;
const diff = lastX - curX;
slider.scrollLeft += diff;
lastX = curX;
}
})
document.addEventListener("mouseup", function() {
isDown = false;
slider.style.scrollBehavior = "smooth";
if (slider.scrollLeft > 175) {
panels[1].scrollIntoView();
} else {
panels[0].scrollIntoView();
}
slider.style.scrollBehavior = "unset";
})
* {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
user-select: none;
}
input:focus,
textarea:focus {
outline: 0;
}
#phone {
height: 600px;
width: 350px;
border-radius: 50px;
position: absolute;
top: 600px;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-top: 90px solid;
border-right: 15px solid;
border-left: 15px solid;
border-bottom: 90px solid;
background-image: url("https://ioshacker.com/wp-content/uploads/2019/06/iOS-13-wallpaper.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.app {
box-shadow: 0 0 9px -4px #000;
}
#topbar {
padding: 0.3em;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
height: 20px;
transform: translate(-4%, 0) scale(0.9);
width: 370px;
}
#connection {
display: flex;
align-items: center;
width: 110px;
justify-content: space-around;
}
#battery {
display: flex;
align-items: center;
width: 110px;
justify-content: end;
}
#battery .bi-battery-full {
font-size: 23px;
margin-left: 5px;
}
#topbar .bi-wifi-2 {
font-size: 25px;
margin-top: -3px;
}
#time {
text-align: center;
}
#notification {
margin: 0;
position: absolute;
top: 365px;
left: 50%;
-ms-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
height: 85px;
width: 315px;
background: #EDEBED;
border-radius: 10px;
z-index: 10000;
transition: all 0.5s;
box-shadow: 0 0 10px -1px #525252;
padding: 0.5em 0 0.5em 1em;
display: flex;
flex-direction: column;
justify-content: center;
}
#notification h1 {
font-size: 23px;
}
#appsOne {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
#instagramIcon,
#verificationCode,
#mailIcon {
margin: 20px;
}
.app {
font-size: 40px;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
transition: all 0.2s;
}
.app:hover {
cursor: pointer;
filter: brightness(90%);
}
.bi-instagram,
.bi-envelope-fill {
width: 40px;
height: 40px;
color: #fff;
font-family: sans-serif;
}
/* Instagram */
#instagramIcon {
background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
#instagramApp {
position: absolute;
top: 0;
left: 0;
background: #EAEAEA;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
transition: all 0.3s;
transform: scale(0);
z-index: 99999;
text-align: center;
}
.instagramHeader {
font-family: 'Handlee', cursive;
font-size: 35px;
}
.instagramSecondHeader {
font-size: 15px;
width: 260px;
margin: 1em 0;
}
#instagramNameInput,
#instagramEmail,
#instagramNumberText {
font-size: 15px;
padding: 0.5em;
border: 1px solid #D1D1D1;
margin: 0.5em 0 0.5em 0;
width: 220px;
}
.instagramButton {
width: 236px;
font-size: 15px;
padding: 0.5em;
background: #3296F0;
color: #fff;
border: none;
margin: 0.5em 0;
transition: all 0.2s;
}
.instagramButton:hover {
filter: brightness(80%);
cursor: pointer;
}
#verificationCodeInstagramPage {
display: none;
}
#continueToInstagramAccount {
display: none;
}
#instagramAccount {
display: none;
justify-content: flex-start;
height: 100%;
width: 100%;
background: #f7f7f7;
flex-direction: column;
align-items: center;
}
#instagramName {
font-size: 20px;
text-align: left;
width: 85%;
padding: 20px 20px 15px 10px;
border-bottom: 1px solid gray;
height: 20px;
border-right: none;
border-top: none;
border-left: none;
background: none;
}
#profilePicture {
font-size: 35px;
width: 80px;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
background: #eae9e9;
border-radius: 100000px;
margin: 20px;
border: 1px solid #6f6e6e;
color: #6f6e6e;
}
#instagramPictureAndNumbers {
display: inherit;
width: 360px;
}
#numbers {
width: 225px;
height: 45px;
margin: 35px 0 0 0;
}
#userDescription {
width: 320px;
font-size: 13px;
border: none;
background: none;
resize: none;
}
.bi-table {
font-size: 25px;
border-bottom: 1px solid;
width: 90%;
margin-top: 0.5em;
}
#emptyImages {
color: #c7c7c7;
margin: 100px;
font-size: 14px;
}
/* Mail */
#mailIcon {
background: linear-gradient(0deg, #05ffff 0%, #3cabe6 30%, #2763dc 70%);
}
#mailApp {
position: absolute;
top: 0;
left: 0;
background: #f6f6f6;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: column;
transition: all 0.3s;
transform: scale(0);
z-index: 99999;
text-align: center;
}
#mailHeader {
font-size: 25px;
padding: 20px;
background: #fff;
width: 88%;
z-index: 999;
}
#verificationCodeEmail {
display: none;
}
.email {
background: #fff;
width: 97%;
padding: 5px;
border-top: 1px solid #e6e6e6;
}
.emailHeader {
text-align: left;
margin: 10px;
font-size: 25px;
}
#verificationCodeEmailDescription,
#erfolgreichAngemeldetDescription {
text-align: left;
margin: 10px;
}
#erfolgreichAngemeldet {
display: none;
}
/* Home Button */
#homeButton {
position: absolute;
height: 60px;
width: 60px;
background: transparent;
z-index: 9999;
bottom: -107px;
border-radius: 100000px;
left: 50%;
-ms-transform: translate(-50%, -50%) rotate(-10deg);
transform: translate(-50%, -50%) rotate(-10deg);
border: 1px outset;
cursor: pointer;
}
#slider {
white-space: nowrap;
position: relative;
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
height: calc(100% - 30px);
}
.panel {
display: inline-block;
width: 350px;
white-space: initial;
}
#appsTwo {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.4.1/font/bootstrap-icons.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;300;400&display=swap" rel="stylesheet">
</head>
<body>
<div id="notification" onclick="closeNotification();">
<h1 id="notificationHeader"><b>Neue Email erhalten!</b></h1>
<p id="notificationDescription"></p>
</div>
<div id="phone">
<div id="topbar">
<div id="connection">
<i class="bi bi-bar-chart-fill"></i> LIDL LTE
<i class="bi bi-wifi-2"></i>
</div>
<p id="time"></p>
<div id="battery">
98%
<i class="bi bi-battery-full"></i>
</div>
</div>
<div id="slider">
<div class="panel">
<div id="appsOne">
<!-- Instagram -->
<div id="instagramIcon" class="app" onclick="openInstagram();"><i class="bi bi-instagram"></i></div>
<div id="instagramApp">
<form id="createAccountForm" action="#" onsubmit="openVerificationCodeInstagramPage(); return false;">
<h1 class="instagramHeader">Instagram</h1>
<p>Erstelle einen Account</p>
<input type="text" id="instagramNameInput" placeholder="Name" maxlength="12" autocomplete="off" required>
<input type="email" id="instagramEmail" placeholder="E-Mail" autocomplete="off" required>
<button type="submit" id="createAccount" class="instagramButton">Erstellen</button>
</form>
<div id="verificationCodeInstagramPage">
<h1 class="instagramHeader">Bestätigen</h1>
<p class="instagramSecondHeader">Wir haben ihn einen Bestätigungscode per Email gesendet!
</p>
<input type="text" id="instagramNumberText" maxlength="4" onkeypress="return /[0-9]/i.test(event.key)" placeholder="Bestätigungscode"><br>
<button onclick="controlVerificationCode();" id="controlVerificationCode" class="instagramButton">Bestätigen</button>
<button class="instagramButton" id="continueToInstagramAccount" onclick="continueToInstagramAccount()">Weiter</button>
<p id="correctOrWrongCheck"></p>
</div>
<div id="instagramAccount">
<input type="text" id="instagramName">
<div id="instagramPictureAndNumbers">
<div id="profilePicture"><i class="bi bi-person-fill"></i></div>
<table id="numbers">
<tr>
<th id="posts">0</th>
<th id="followers">1</th>
<th id="following">0</th>
</tr>
<tr>
<td>Posts</td>
<td>Followers</td>
<td>Following</td>
</tr>
</table>
</div>
<textarea id="userDescription" placeholder="Beschreibung..." rows="10"></textarea>
<i class="bi bi-table"></i>
<p id="emptyImages">No images found</p>
</div>
</div>
<div id="mailIcon" class="app" onclick="openMail();"><i class="bi bi-envelope-fill"></i></div>
<div id="mailApp">
<h1 id="mailHeader">E-Mails</h1>
<div class="email" id="erfolgreichAngemeldet">
<h1 class="emailHeader">Instagram</h1>
<p class="emailDescription" id="erfolgreichAngemeldetDescription">Erfolgreich angemeldet</p>
</div>
<div class="email" id="verificationCodeEmail">
<h1 class="emailHeader">Instagram</h1>
<p class="emailDescription" id="verificationCodeEmailDescription">Ihr Bestätigunscode lautet
</p>
</div>
</div>
</div>
</div>
<div class="panel">
<div id="appsTwo">
<div>
Second App Page
</div>
</div>
</div>
</div>
<div id="homeButton" onclick="closeApp();"></div>
</div>
</body>
</html>
Result:
You can hide the horizontal scrollbar by applying overflow-x:hidden to #slider

Why does the br tag not move the text under the title?

How do I get the text that says "this is just some placeholder text that should let you scroll" to be under the title? I thought seeing as there is a <br> tag after the title, the text would go under it?
(in case it's unclear in the snippet, the background image has an arrow pointing down, indicating that the user should scroll down upon arriving at the home page).
$(document ).ready(function(){
var counter = 0;
$('#menuIcon').click(function(){
counter+=1;
if (counter == 3){
}
});
});
var open = false;
function Drop(n) {
var i;
if (open == false) {
for (i = n; i < 5; i++) {
Drp(i)
}
open = true
} else if (open == true) {
for (i = n; i < 5; i++) {
Cls(i)
}
open = false
}
}
function Drp(n) {
var elem = document.getElementsByClassName("menu-con")[n];
var pos = -1 * window.innerHeight - n * 100;
var id = setInterval(frame, 5);
function frame() {
if (pos >= -10) {
clearInterval(id);
elem.style.top = 0 + 'px';
} else {
pos += 10;
elem.style.top = pos + 'px';
}
}
}
function Cls(n) {
var elems = document.getElementsByClassName("menu-con")[n];
var poss = 0;
var ids = setInterval(frames, 5);
function frames() {
if (poss <= -1 * window.innerHeight) {
clearInterval(ids);
elems.style.top = -1 * window.innerHeight + 'px';
} else {
poss += -7 - n * 2;
elems.style.top = poss + 'px';
}
}
}
* {
box-sizing: border-box;
max-width: 100%;
font-family: 'PT Sans Narrow', sans-serif;
font-weight: bold;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
background-color: black;
background-image:url(foo.png);
background-repeat:no-repeat;
background-position: center;
background-size:cover;
background-attachment: fixed;
}
.menuBox {
display: none;
}
.menuBox a {
text-decoration: none;
color: black;
}
.menu-icon {
width: 50px;
height: 50px;
position: fixed;
top: 0;
right: 0;
margin: 10px 15px;
transform: scale(0.8);
padding: 0;
cursor: pointer;
z-index: 20
}
.menu-bar {
width: 50px;
height: 5px;
background: rgb(190, 190, 190);
position: absolute;
transition: all 0.3s;
font-weight: bold;
font-size: 50px
}
.menu-bar1 {
margin-top: 9px
}
.menu-bar2 {
margin-top: 23px
}
.menu-bar3 {
margin-top: 37px
}
.menu-icon.hover .menu-bar1 {
-webkit-transform: rotate(45deg) scaleX(0.7);
margin-top: 22px;
}
.menu-icon.hover .menu-bar2 {
opacity: 0
}
.menu-icon.hover .menu-bar3 {
-webkit-transform: rotate(-45deg) scaleX(0.7);
margin-top: 22px;
}
.menu {
width: 100%;
height: 100%;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.menu-con {
-webkit-flex-grow: 1;
flex-basis: 0;
flex-grow: 1;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
position: relative;
top: -100%;
transition: all 0.5s
}
.menu-con a:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
opacity: 1;
background: rgba(0, 0, 0, 0);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.menu-con:hover a:before {
background: rgba(0, 0, 0, 0.2)
}
.menu-con a {
height: 20px;
-webkit-align-self: center;
color: white;
font-size: 25px;
z-index: 2;
cursor: pointer
}
#media screen and (max-width: 600px) {
.menu-con {
min-width: 50%
}
}
#media screen and (max-width: 350px) {
.menu-con {
min-width: 100%
}
}
a {
text-decoration: none;
}
.title {
display:flex;
justify-content: center;
align-items:center;
font-size:50px;
color:white;
}
.homeText {
background-color:darkblue;
display:flex;
justify-content:center;
}
<html class="animated pulse">
<head>
<title>Ben Cohen</title>
<link href=style.css rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow" rel="stylesheet">
<link href="animate.css" rel=stylesheet>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="main.js"></script>
<link rel=icon href=icon.png>
</head>
<body>
<div class="menu-icon" onclick="this.classList.toggle('hover');Drop(0)" id="menuIcon">
<div class="menu-bar menu-bar1"></div>
<div class="menu-bar menu-bar2"></div>
<div class="menu-bar menu-bar3"></div>
</div>
<div class="menu">
<div class="menu-con" style="background:red;" href="yayitworks.html">
HOME
</div>
<div class="menu-con" style="background:blue" id="hello">
<a>PORTFOLIO</a>
</div>
<div class="menu-con" style="background:darkorange;">
<a>POUS</a>
</div>
<div class="menu-con" style="background:green;">
<a>HOMEWORK</a>
</div>
<div class="menu-con" style="background:white;">
<a style="color:black">TEST PAGE</a>
</div>
</div>
<div class="homeText">
<div class="title">
THIS IS A TITLE.
</div><br>
<p>this is just some placeholder text that should let you scroll</p>
</div>
</body></html>

Remove display: flex; from your .hometext CSS.
.hometext {
background-color:darkblue;
justify-content:center;
}
You can also specify the flex direction:
.hometext {
background-color:darkblue;
justify-content:center;
display: flex;
flex-direction: column;
More info here...
https://www.w3schools.com/Css/css3_flexbox.asp
& here...
https://developer.mozilla.org/en-US/docs/Web/CSS/flex

Make text color of colorpicker value

I need your help. I have button. With the press on it I can make text. With click on this text I can edit this text. And I have colorpicker. I need, when I choose color the text which I created also will change color(it will change on this value of colorpicker) I don't know how to do this. Help me please
function addText() {
var type = $(".select-txt").val();
var align = $(".form-align").val();
var float = "text-align:";
var id = Date.now();
var editBlock = "$('.edit-block')";
var display = ",'block'";
var colorValue = $(".color").val();
var color = "color:";
var closeTag = ";";
var onclick = "onclick="+editBlock+".css('display'"+display+");";
var ordinary = "<div class='text-"+align+"' id="+id+" "+onclick+" contenteditable style="+float+align+closeTag+
">text</div>";
var h = "<"+type+" class='text-"+align+"' id="+id+" "+onclick+" contenteditable style="+float+align+">text</"+type+">";
if(type == "ordinary") {
$(".preview").append(ordinary);
}
else if(type.startsWith("h")) {
$(".preview").append(h);
}
$(".color").minicolors({
defaultValue: "#000"
});
$(".color").on("change", function() {
var colorValue = $(".color").val();
ordinary.append(color+colorValue);
});
}
function showTextWindow() {
var modal = $(".modal-txt-container");
if (modal.css('display', "none")) {
modal.css('display', "grid");
}
else {
modal.css('display', "none");
}
}
function showTextWindow() {
var modal = document.querySelector(".modal-txt-container");
if (modal.currentStyle) {
var displayStyle = modal.currentStyle.display;
} else if (window.getComputedStyle) {
var displayStyle = window.getComputedStyle(modal, null).getPropertyValue("display");
}
if (displayStyle == "none") {
modal.style.display = "grid";
}
else {
modal.style.display = "none";
}
}
function showElement() {
var modal = document.querySelector(".choose-option");
var add = document.querySelector('.add');
if (modal.currentStyle) {
var displayStyle = modal.currentStyle.display;
} else if (window.getComputedStyle) {
var displayStyle = window.getComputedStyle(modal, null).getPropertyValue("display");
}
if (displayStyle == "none") {
modal.style.display = "grid";
}
else {
modal.style.display = "none";
add.style.display = "block";
}
}
* {
outline: none;
padding: 0;
margin: 0;
}
.choose-option {
background-color: #352a2c;
position: fixed;
color: white;
font-family: 'Scada', sans-serif;
padding: 15px;
width: 14%;
}
.insert-txt-block {
padding-bottom: 3%;
font-size: 1.3em;
}
.btn-txt::before {
content: '\f031';
font-family: "fontAwesome";
margin-right: 3%;
}
.btn-txt {
font-size: 1.2em;
list-style: none;
transition: 0.1s;
padding: 5px;
}
.btn-txt:hover {
background-color: #727272;
}
.modal-insert-txt {
background-color: #352a2c;
color: white;
font-family: 'Scada', sans-serif;
padding: 20px;
padding-right: 25px;
width: 130%;
border-radius: 4px;
}
.modal-txt-container {
display: grid;
justify-content: center;
right: 0;
left: 0;
position: fixed;
top: 15%;
display: none;
}
.container {
position: fixed;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
outline: 0;
box-shadow: none;
border: 0 !important;
background-image: none;
width: 85%;
height: 100%;
margin: 0;
padding: 0 0 0 .5em;
cursor: pointer;
color: black;
background: white;
border-radius: 1px 0px 0px 1px;
}
.form-group::after {
content: '\25BC';
position: absolute;
padding: 0 0.5em;
background: rgb(59, 61, 52);
pointer-events: none;
line-height: 1.7em;
-webkit-transition: .25s all ease;
-o-transition: .25s all ease;
transition: .25s all ease;
color: white;
}
.form-group {
position: relative;
display: block;
height: 1.7em;
margin: 1% 0% 5% 0;
border: 1px solid #272822;
}
.btn-insert-txt {
border: none;
color: white;
background: #ff5959;
padding: 5px;
font-size: 1.01em;
border-radius: 2px;
cursor: pointer;
}
.btn-insert-txt:hover {
background: #e54040;
}
.modal-insert-txt span {
font-size: 1.1em;
}
.modal-insert-txt h2 {
padding-bottom: 2%;
}
.modal-insert-txt hr {
margin-bottom: 3%;
}
.flex-close-title {
display: flex;
justify-content: space-around;
}
.type-insert li {
cursor: pointer;
}
.close {
font-size: 1.7em;
margin-top: -1%;
cursor: pointer;
}
.close::after {
content: '\f057';
font-family: "fontAwesome";
color: #ff5959;
}
.add {
font-size: 2em;
cursor: pointer;
display: none;
position: fixed;
left: 1%;
top: 2%;
}
.add::after {
content: '\f055';
font-family: "fontAwesome";
color: #ff5959;
}
#textarea-edit {
width: 80%;
height: 100px;
resize: none;
border: 2px solid #3B3D45;
background: #3B3D45;
color: white;
padding: 4%;
font-size: 1.05em;
border-radius: 4px;
display: flex;
justify-content: center;
position: relative;
top: 1%;
}
.edit-block {
background: #272822;
width: 20%;
height: 100vh;
float: right;
color: white;
font-family: 'Scada', sans-serif;
padding: 20px;
display: none;
position: fixed;
top: 0;
right: 0;
}
.edit-block span {
font-size: 1.3em;
}
.minicolors-theme-default .minicolors-input {
height: 29px !important;
padding-left: 30px !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Site Bilder</title>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Scada:400,700&subset=cyrillic" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/jquery.minicolors/2.1.2/jquery.minicolors.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.minicolors/2.1.2/jquery.minicolors.css">
</head>
<body>
<span class="add" onclick="showElement()"></span>
<div class="choose-option">
<div class="flex-close-title">
<div class="insert-txt-block">Insert elements</div>
<span class="close" onclick="showElement()"></span>
</div>
<ul class="type-insert">
<li class="btn-txt" onclick="showTextWindow()">Text</li>
</ul>
</div>
<div class="modal-txt-container">
<div class="modal-insert-txt">
<h2>Insert text</h2>
<hr>
<span>Тип Текста</span>
<div class="form-group">
<select class="select-txt">
<option value="ordinary" selected>Plain text</option>
<option value="h1">h1</option>
<option value="h2">h2</option>
<option value="h3">h3</option>
<option value="h4">h4</option>
<option value="h5">h5</option>
<option value="h6">h6</option>
</select>
</div>
<span>Text alignment</span>
<div class="form-group">
<select class="form-align">
<option value="left">left</option>
<option value="center">Center</option>
<option value="right">right</option>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn-insert-txt" onclick="addText()">Insert text</button>
</div>
</div>
</div>
<div class="preview">
</div>
<div class="edit-block">
<div class="wrap">
<span class="title-textarea">
Цвет
</span>
<input type="text" id="hue" class="color" data-control="hue">
</div>
</div>
<script src="js/app.js"></script>
</body>
</html>

The solution I decided on is simple enough, I add a class to know which piece of text I'm currently editing, and then set the color CSS attribute to the colour picker's selection for that selected class.
So your onclick is now:
var onclick = 'onclick="editTextColour(this)"';
I made a new function to handle the basics, (this) as the param for onclick is treated as the element that calls it:
function editTextColour(elem) {
$('.editing').removeClass('editing');
$(elem).addClass('editing');
$('.edit-block').show();
}
And then your change event for the color picker is just this:
$(".color").on("change", function() {
var colorValue = $(".color").val();
$('.preview .editing').css('color', colorValue);
});
JSFiddle

We Keep Coding

JavaScript is the programming language of the Web.

Trying to update html with javascript - javascript

Related

Button not responding (even not hover)

JavaScript WebApp lose shape after clicking "Again"

Scroll Snap for div that looks like an iPhone in HTML

Why does the br tag not move the text under the title?

Make text color of colorpicker value

Categories

Resources