I've just started a couple of days in web development.
I need help for - I have two texts in the HTML (p tag) on the same line, one linked to JS with an "ID" and the other to CSS with "Class" and by using keyframes, and I've been trying to add a static text on the same line that displays after the animated text.
I'm trying to output - Where the First text animates by default, and when JS actions are triggered, that is by clicking on the button, the second text should display a static text on the same line as the first text.
My code:
JavaScript
CSS
HTML
let secondText = document.getElementById("second-text");
let a = 1;
let b = 5;
let c = a + b;
let result = "";
function startAction() {
if (c <= 12) {
result = "December";
} else {
result = "Not-Exists";
}
secondText.textContent = result;
console.log(result);
}
#second-text {
margin: 30px;
font-size: 20px;
font-weight: 700;
}
.first-text {
margin: 30px;
font-size: 20px;
font-weight: 700;
animation: typing 10s steps(19) infinite;
overflow: hidden;
white-space: nowrap;
border-right: 2px solid #111;
width: 19ch;
}
#keyframes typing {
0% {
width: 0ch;
}
50% {
width: 19ch;
}
100% {
width: 0ch;
}
}
<p class="first-text" id="second-text">Welcome To My Page</p>
<button onclick="startAction()">Action</button>
Please, Help me figure out what went wrong in my code?
Is that what you are looking for ?
let secondText = document.getElementById("second-text");
let a = 1;
let b = 5;
let c = a + b;
let result = "";
function startAction() {
document.getElementById("second-text").classList.remove("first-text");
document.getElementById("second-text").classList.add("newClass");
if (c <= 12) {
result = "December";
} else {
result = "Not-Exists";
}
secondText.textContent = result;
console.log(result);
}
.first-text {
margin: 30px;
font-size: 20px;
font-weight: 700;
animation: typing 10s steps(19) infinite;
overflow: hidden;
white-space: nowrap;
border-right: 2px solid #111;
width: 19ch;
}
.newClass{
margin: 30px;
font-size: 20px;
font-weight: 700;
overflow: hidden;
white-space: nowrap;
width: 19ch;
}
#keyframes typing {
0% {
width: 0ch;
}
50% {
width: 19ch;
}
100% {
width: 0ch;
}
}
<p class="first-text" id="second-text">Welcome To My Page</p>
<button onclick="startAction()">Action</button>
Related
I'm just learning how to use VUE and I’m trying to separate my HTML, CSS and JS files to get more organized. But something is going wrong, I think with the CSS file but I’m not sure.
Just to get a basic understanding what my code is supposed to do:
There is a welcome screen where 2 rows of text are displayed which are being faded in and out
HTML:
<template>
<header id="mainHeader">
<div class="logo-container"><img src="../Logo/LogoIND.png" alt="Logo IND" id="logo"></div>
</header>
<main>
<div class="loop-text">
<p>BIER</p>
<p>Hoşgeldiniz</p>
<p>Ласкаво просимо</p>
<p>ښه راغلاست</p>
<p>أهلا بك</p>
<p>Welkom</p>
</div>
<div class="loop-text2">
<p>DRINK to Start</p>
<p>Başlatmak için dokunun</p>
<p>Торкніться, щоб почати</p>
<p>مسکارا پیل دی</p>
<p>المس للبدء</p>
<p>Aanraken om te beginnen</p>
</div>
</main>
</template>
<script src="./Welkom.js"></script>
<style scoped>
#import './CSS.css';
</style>
Here at the bottom i have my references to my CSS and JS.
CSS:
template {
background-color: #452170;
color: #ffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.6em;
margin: 0;
height: 1080px;
}
.logo-container {
text-align: center;
width: 100%;
}
#logo {
height: 17em;
}
.containter {
height: auto;
}
#keyframes fade {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.loop-text {
width: 100%;
text-align: center;
position: relative;
height: 25em;
}
.loop-text p {
font-family: 'PT Serif';
opacity: 0;
transition: 1.75s ease-out;
width: inherit;
position: absolute;
height: inherit;
font-size: 16em;
top: 0.6em;
margin: 0;
padding: 0;
}
.loop-text .show {
opacity: 1;
}
.loop-text2 {
width: 100%;
text-align: center;
position: relative;
height: 25em;
}
.loop-text2 p {
font-family: 'PT Serif';
opacity: 0;
transition: 1.75s ease-out;
width: inherit;
position: absolute;
height: inherit;
font-size: 9em;
top: 0.6em;
margin: 0;
padding: 0;
}
.loop-text2 .Afbeelden {
opacity: 1;
}
And my javascript:
let texts = document.querySelectorAll(".loop-text p");
let prev = null;
let animate = (curr, currIndex) => {
let index = (currIndex + 1) % texts.length
setTimeout(() => {
if(prev) {
prev.className = "";
}
curr.className = "show";
prev = curr;
animate(texts[index], index);
}, 3500);
}
animate(texts[0], 0);
let texts2 = document.querySelectorAll(".loop-text2 p");
let prev2 = null;
let animate2 = (curr, currIndex) => {
let index = (currIndex + 1) % texts2.length
setTimeout(() => {
if(prev2) {
prev2.className = "";
}
curr.className = "Afbeelden";
prev2 = curr;
animate2(texts2[index], index);
}, 3500);
}
I want to remove a newsletter element for 10 minutes after closing it. The panel should remain removed if the page is reloaded within that timespan. I was thinking of using localstorage but as far I know localstorage does not have expiration. I'm thinking of using setTimeout but not sure how to use it in this context. Also, this should be done purely with Javascript without any library. JSFiddle.
<section class="newsletter">
<div id="newsletter_container" class="newsletter_class">
<h1>
Panel Title
<button id="close_btn">
close
</button>
</h1>
<h3>Panel content
</h3>
</div>
</section>
.newsletter {
position: fixed;
bottom: 0;
}
#keyframes Slide_down {
0% {
transform: translateY(0);
}
100% {
transform: translateY(250px);
}
}
#newsletter_container {
display: block;
background-color: rgb(0, 122, 193,0.7);
width: 500px;
}
.slide_down {
animation: Slide_down 1.4s ease;
}
.newsletter_class {
display: none;
}
#close_btn {
float: right;
background-color: rgb(0, 122, 193,0.7);
border: none;
cursor: pointer;
}
#media only screen and (max-width:500px) {
#newsletter_container {
width: auto;
}
.newsletter_button {
width: 75%;
padding: 5px 5px;
margin-left: 10px;
margin-bottom: 10px;
}
}
#newsletter_container h1, h3 {
font-family: Arial, Helvetica, sans-serif;
color: white;
padding: 5px 10px;
}
#newsletter_container h1 {
font-size: 16px;
}
#newsletter_container i {
color: white;
}
#newsletter_container h3 {
font-size: 12px;
}
const newsletter = document.getElementById("newsletter_container");
const closeBtn = document.getElementById("close_btn");
closeBtn.addEventListener("click",()=>{
newsletter.classList.add("slide_down");
newsletter.addEventListener("webkitAnimationEnd",function(){
newsletter.remove();
});
});
Edit:
I've used localStorage to remove the elements after reloading, but it's not permanently removed after reloading. JSFiddle.
let removeNewsletter = localStorage.getItem('removeNewsletter');
const closeNewsLetter = () => {
newsletter.classList.add("close");
localStorage.setItem('removeNewsletter','enabled');
}
if(removeNewsletter === 'enabled'){
newsletter.style.display = "none"
newsletter.addEventListener("animationend",function(){
newsletter.remove();
});
}
closeBtn.addEventListener("click",()=>{
removeNewsletter = localStorage.getItem('removeNewsletter');
if(removeNewsletter !== 'enabled'){
newsletter.addEventListener("animationend",function(){
newsletter.remove();
});
closeNewsLetter();
}
});
var storeddate = Number(localStorage.getItem("storedate"));
if(storeddate){
let diff = (Date.now() - storeddate / 60000);
if(diff < 10){
newsletter.remove();
}
}
//localStorage.setItem('removeNewsletter',null);
Use the javascript Date.now() method to get the start time and save it in the local storage. Get another Date.now() when the page loads to compare with the stored time (if any) when the page refreshes and check if the difference is longer than 10 mins.
You can compare both like this:
var storeddate = Number(localStorage.getItem("storeddate"));
if (storeddate){
var diff = (Date.now() - storeddate) / 60000;
if (diff < 10){
newsletter.style.display = "none";
}
}
ps: the Date.now() time is in milliseconds so to get it in minutes you need to divide it by 60000
I want to have the ball sized to the prompt of the user upon entering it and something doesn't work, can't tell what I'm doing wrong.
<style>
body {
background-color: black;
text-align: center;
}
h1 {
color: white;
}
div {
width: 100px;
height: 100px;
margin: auto;
margin-bottom: 10px;
border-radius: 50%;
transition: 0.3s;
line-height: 50px;
.ball4 {
background-color: brown;
}
</style>
<div class="ball4" onclick="onBall4Click()">
PROMPT
</div>
<script>
function onBall4Click() {
var ball4 = document.querySelector('.ball4');
var ball4Size = prompt("Size of ball? ");
if (ball4Size > 1000) {
alert("Too big!")
} else {
var ball4Size = size;
}
}
</script>
Thanks in advance to the helpers.
I feel like this is what you want with your JavaScript:
function onBall4Click() {
var ball4 = document.querySelector('.ball4');
var ball4Size = prompt("Size of ball? ");
if (ball4Size > 1000) {
alert("Too big!")
} else {
ball4.style.width = ball4Size;
ball4.style.height = ball4Size;
}
}
You were using an undefined variable rather than setting the actual size of the element. Also, I believe you still need to make the element a ball at this point because it is just a brown div right now.
I've tried to look for a solution for this but have failed miserably. It's my first ever time using JS (I'm trying to learn) so the possibility of my just not understanding the answers in the search results properly is quite high - sorry about that.
I am wanting a JS carousel, generated from an array, with Prev/Next buttons (ideally responsive etc but that'll come at a later stage), preferably with captions underneath. I can get the carousel to work but I end up getting a text link when I click on either Prev or Next. And I've no idea how to add the caption array underneath (I've taken out the JS for the captions for now because it was messing everything else up even further).
Relevant HTML:
<body onload="changePilt()">
<span id="prev" class="arrow">❮</span>
<div class="karussell" id="karussell">
<img class="karu" name="esislaid">
</div>
<span id="next" class="arrow">❯</span>
<div class="caption">
<h3 name="esikiri"></h3>
</div>
</body>
CSS, just in case:
.karussell {
position: relative;
width: 100%;
max-height: 600px;
overflow: hidden;
}
.arrow {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
color: #00A7E0;
margin-top: -22px;
padding: 16px;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
#next {
right: 0;
border-radius: 3px 0 0 3px;
}
#prev {
left: 0;
}
.arrow:hover {
background-color: rgba(0,0,0,0.8);
}
.caption {
text-align: center;
color: #00A7E0;
padding: 2px 16px;
}
.karu {
max-width: 75%;
}
#media (max-width:767px){.karu{max-width: 95%;}}
And finally, the dreaded JS:
var i = 0;
var s = 0;
var esileht = [];
var aeg = 5000;
//Image List
esileht[0] = 'img/tooted/raamat/graafvanalinn2016.jpg';
esileht[1] = 'img/tooted/kaart/kaart_taskus_esipool.jpg';
esileht[2] = 'img/tooted/kaart/graafkaart_esikylg.jpg';
//Change Image
function changePilt (){
document.esislaid.src = esileht[i];
if(i < esileht.length -1){
i++;
} else {
i = 0;
}
setTimeout("changePilt()", aeg);
}
document.onload = function() {
}
// Left and Right arrows
//J2rgmine
function jargmine(){
s = s + 1;
s = s % esileht.length;
return esileht [s];
}
//Eelmine
function eelmine(){
if (s === 0) {
s = esileht.length;
}
s = s -1;
return esileht[s];
}
document.getElementById('prev').addEventListener('click', function (e){
document.getElementById('karussell').innerHTML = eelmine();
}
);
document.getElementById('next').addEventListener('click', function (e) {
document.getElementById('karussell').innerHTML = jargmine();
}
);
I'm sure the solution is dreadfully obvious, I just cannot seem to be able to figure it out...
instead of innerHTML change src attribute of image
document.querySelector('#karussell img').src = eelmine();
And
document.querySelector('#karussell img').src = jargmine();
I work currently on a messaging application on browser.
In my android app I can align the chat bubbles right or left , my question now how can i do this now in the web?
Android Image
Web Image
The Code for Web-Chatbubbles:
#messages {
overflow-y: auto;
float: left;
min-width: 100px;
margin-bottom: 10px;
height: calc(100% - 80px);
}
#message-filler {
flex-grow: 1;
}
.message-container:first-of-type {
border-top-width: 0;
}
.message-container {
display: block;
margin-top: 10px;
border-top: 1px solid #f3f3f3;
background: skyblue;
border-radius: 12px;
padding-top: 10px;
opacity: 0;
transition: opacity 1s ease-in-out;
}
Now my first question : How can i align the separate items left or right?
And my second question : In the image above the timestamp is not in the bubble how can i align it under the message end align end at the message end?
Current code for timeStamp:
display: inline-flex;
color: black;
font-style: italic;
font-size: 12px;
float: right;
Here is my HTML-Code for the message-list:
<div id="messages">
<span id="message-filler"></span>
</div>
And here the JavaScript :
if (!div) {
var container = document.createElement('div');
container.innerHTML = FriendlyChat.MESSAGE_TEMPLATE;
div = container.firstChild;
div.setAttribute('id', key);
this.messageList.appendChild(div);
}
div.querySelector('.timeStamp').textContent = '15:53';
var messageElement = div.querySelector('.message');
if (text) { // If the message is text.
messageElement.textContent = text;
// Replace all line breaks by <br>.
messageElement.innerHTML = messageElement.innerHTML.replace(/\n/g, '<br>');
} else if (imageUri) { // If the message is an image.
var image = document.createElement('img');
image.addEventListener('load', function () {
this.messageList.scrollTop = this.messageList.scrollHeight;
}.bind(this));
this.setImageUrl(imageUri, image);
messageElement.innerHTML = '';
messageElement.appendChild(image);
}
setTimeout(function () { div.classList.add('visible') }, 1);
this.messageList.scrollTop = this.messageList.scrollHeight;
this.messageInput.focus();
};
Thanks in advance (: