We Keep Coding

Creating a flip card with multiple faces using Javascript

I was trying to create a flipcard with multiple faces but Im not entirely sure how to make the change whenever I click the card. When I'm on the console I can see that the class was added but the face is still the same. I want it to be grey background, Name: Jane, grey background, Name: John. Thats the pattern I am trying to create. I have janeCard and johnCard at the end since I'm not 100% sure how to toggle between them.
Here is the link to my codepen if anyone wants to see. https://codepen.io/heidibonilla/pen/abyRrBg
<section class="card-area">
<div class="card">
<div class="inner-card jane" id="clicks">
<div class="front"></div>
</div>
</div>
// Card will flip on click
const flipCard = document.querySelector('.inner-card');
flipCard.addEventListener('click', function() {
flipCard.classList.toggle('is-flipped');
})
// Set a var to count the clicks
let clicks = document.getElementById('clicks');
let count = 0;
clicks.onclick = function() {
count += 1;
console.log(count);
if(count % 2 == 0) {
// show front of card
console.log('even');
} else {
// switch between john or jane
janeCard.classList.toggle('john');
console.log('odd');
console.log(janeCard)
}
}
const janeCard = document.querySelector('.jane');
const johnCard = document.querySelector('.john');
janeCard.innerHTML = `<div class="front">
</div>
<div class="back">
<div class="back-info">
<h2>Jane Doe</h2>
<p><strong>Title:</strong> Web Developer</p>
<p><strong>Email:</strong> example#example.com</p>
<p><strong>Phone:</strong> (999) 999 - 9999</p>
</div>
</div>`
johnCard.innerHTML = `<div class="back">
<div class="back-info">
<h2>John Doe</h2>
<p><strong>Title:</strong> iOS Developer</p>
<p><strong>Email:</strong> example#example.com</p>
<p><strong>Phone:</strong> (999) 999 - 9999</p>
</div>
</div>`

Show active class

I want to add class 'active' to next div 1 second before first is removed.
Practically, I want to have an 'active' class on 2 elements at the same time for that 1 second.
Can someone help me?
Thanks
<div class="map-inner">
<div class="map-location-outer">
<div class="map-location-inner location1 active">
<div class="map-location">
<div class="map-icon">
<img src="i/content/map-icon2.svg">
</div>
<span class="map-pin"><span></span></span>
</div><!-- map-location -->
</div>
</div>
<div class="map-location-outer">
<div class="map-location-inner location2">
<div class="map-location">
<div class="map-icon">
<img src="i/content/map-icon3.svg">
</div>
<span class="map-pin"><span></span></span>
</div><!-- map-location -->
</div>
</div>
<div class="map-location-outer">
<div class="map-location-inner location3">
<div class="map-location">
<div class="map-icon">
<img src="i/content/map-icon1.png">
</div>
<span class="map-pin"><span></span></span>
</div><!-- map-location -->
</div>
</div>
</div>
var x = 1;
function updateClass() {
let a = $(".map-location-inner.active");
a.removeClass("active");
a = a.parent().next(".map-location-outer");
if (a.length == 0)
a = $(".map-location-outer").first();
a.find(".map-location-inner").addClass("active");
}
setInterval(function () {
updateClass();
}, x * 5500);

You can use setTimeout to wait before removing 1st .active class and add 2nd .active class before removing 1st one.
var x = 1;
function updateClass() {
let a = $(".map-location-inner.active");
let b = a.parent().next(".map-location-outer");
if (b.length == 0)
b = $(".map-location-outer").first();
b.find(".map-location-inner").addClass("active");
setTimeout(function() {
a.removeClass("active");
}, 1000);
}
setInterval(function () {
updateClass();
}, x * 5500);

iterating through childs of div with class insides :nth-child in jQuery

i am trying to iterate through the children of the div with class insides.
so far it has been a failure.
here is the html:
<div class="insides">
<div class="pen" style="background-image:url('images/video.png');background-size:cover">
<div class="cover"></div>
<div class="items">
<div class="title">
fullscreen-centered-blurred-video-background
</div>
<div class="desc">
Quick video covers fullscreen with blur effect and grayscale (looping) with working input fields
</div>
<a class="button button-secondary button-small" href="http://codepen.io/peterbs/pen/QpyrMb">
View On CodePen
</a>
</div>
</div>
<div class="pen" style="background-image:url('images/form.png');background-size:cover">
<div class="cover"></div>
<div class="items">
<div class="title">
Loading-form
</div>
<div class="desc">
Simple and fast loading form that is displayed after loading is finished
</div>
<a class="button button-secondary button-small" href="http://codepen.io/peterbs/pen/PpZExY">
View On CodePen
</a>
</div>
</div>
<div class="pen" style="background-image:url('images/horizontal.png');background-size:cover">
<div class="cover"></div>
<div class="items">
<div class="title">
align-vertically
</div>
<div class="desc">
Very easy javascript that aligns children vertically within its parents because css had weak support.
</div>
<a class="button button-secondary button-small" href="http://codepen.io/peterbs/pen/aJNEvB">
View On CodePen
</a>
</div>
</div>
<div class="pen" style="background-image:url('images/navbar.png');background-size:cover">
<div class="cover"></div>
<div class="items">
<div class="title">
navbar-animations
</div>
<div class="desc">
navigation bar with 3 different animations. One more will be coming soon.
</div>
<a class="button button-secondary button-small" href="http://codepen.io/peterbs/pen/dvMpyV">
View On CodePen
</a>
</div>
</div>
</div>
.pen has opacity: 0
and when the user scrolls down a little bit i want them to show 1 by 1.
here is the javascript:
$(document).ready(function(){
window.addEventListener('scroll',function(){
var scroll = $(this).scrollTop();
$('.content').css('transform', 'translateY( '+ scroll / 2 +'px )' );
if(scroll > 120){
for(x = 0; x <= 4 ; x++){
setTimeout(function(){
$('.insides:nth-child('+ x +')').css('opacity','1');
}, 700*x);
}
}else{
for(x = 0; x <= 4 ; x++){
setTimeout(function(){
$('.insides:nth-child('+ x +')').css('opacity','0');
}, 700*x);
}
}
});
var scroll = $(this).scrollTop();
if(scroll > 120){
for(x = 0; x <= 4 ; x++){
setTimeout(function(){
$('.insides:nth-child('+ x +')').css('opacity','1');
}, 700*x);
}
}else{
for(x = 0; x <= 4 ; x++){
setTimeout(function(){
$('.insides:nth-child('+ x +')').css('opacity','0');
}, 700*x);
}
}
});
i honestly have no idea why it is not working. it just doesn't show
here is a jsfiddle: https://jsfiddle.net/f176ch6r/
it doesn't look perfect in the fiddle but it does the job

Two problems here:
the nth-child selector must be applied on your .pen elements
because of the setTimeout all your $('.insides:nth-child('+ x +')') selectors will have the same x
here is what I would write:
window.addEventListener('scroll', _onScroll);
_onScroll();
function _onScroll(){
var x,
scroll = $(this).scrollTop(),
show = scroll > 120;
$('.content').css('transform', 'translateY( '+ scroll / 2 +'px )' );
for(x = 0; x <= 4 ; x++){
_toggle(x, show);
}
}
function _toggle(index, bShow){
setTimeout(function(){
$('.insides .pen:nth-child('+ (index + 1) +')').css('opacity', bShow ? 1 : 0);
}, 700*index);
}
I also updated your jsfiddle

Make slider counter, count just the amount of slides in the slider

I made a jQuery slider for a website, it has 9 slides, and I want the counter to count JUST until 9. What happens is that as soon as I get to the last slide (09 of 09) and CLICK on the NEXT bnt, it goes to the first slide (01 of 09) and when I click to go to the second slide I get this: 11 of 09. Please help!
It's an infinite slider, and would like the counter to work "UP" and "DOWN", meaning to have the counter add if the user goes NEXT and subtract if the user goes previous.
The slider is in this site http://madebymorro.com/web_dev_vavilco/
at the very bottom.
Thanks!
the code I have is HTML:
<section id="construction">
<div class="wrapper">
<div id="home-slider">
<div id="slider-data">
<div class="count">
<span class="current">1</span>/09
</div>
<div class="slider-nav">
<div class="prev"><img src="images/home-prev.svg" alt=""></div>
<div class="next"><img src="images/home-next.svg" alt=""></div>
</div>
</div>
<div id="home-slider-c">
<section class="slider-project">
<img src="images/home-slider001.jpg" alt="">
<div class="img-data">
<p>zaragoza</p>
<p>apartamentos</p>
</div>
</section>
<section class="slider-project">
<img src="images/home-slider002.jpg" alt="">
<div class="img-data">
<p>bravtevilla</p>
<p>casas</p>
</div>
</section>
<section class="slider-project">
<img src="images/home-slider003.jpg" alt="">
<div class="img-data">
<p>business Center Dorado</p>
<p>oficinas</p>
</div>
</section>
<section class="slider-project">
<img src="images/home-slider004.jpg" alt="">
<div class="img-data">
<p>balcones de la trinidad</p>
<p>apartamentos</p>
</div>
</section>
<section class="slider-project">
<img src="images/home-slider005.jpg" alt="">
<div class="img-data">
<p>gratamira 131</p>
<p>apartamentos</p>
</div>
</section>
<section class="slider-project">
<img src="images/home-slider006.jpg" alt="">
<div class="img-data">
<p>torre olaya plaza</p>
<p>apartamentos y plaza comercial</p>
</div>
</section>
<section class="slider-project">
<img src="images/home-slider007.jpg" alt="">
<div class="img-data">
<p>torre olaya plaza</p>
<p>locales comerciales</p>
</div>
</section>
<section class="slider-project">
<img src="images/home-slider008.jpg" alt="">
<div class="img-data">
<p>plaza castilla</p>
<p>apartamentos</p>
</div>
</section>
<section class="slider-project">
<img src="images/home-slider009.jpg" alt="">
<div class="img-data">
<p>sauses del country</p>
<p>apartamentos</p>
</div>
</section>
</div>
</div>
</div>
the code I have is jQuery:
var slider = $('#home-slider-c'),
next = $('.slider-nav .next'),
prev = $('.slider-nav .prev');
$('#home-slider-c section:last-child').insertBefore('#home-slider-c section:first-child');
slider.css('margin-left', '-100%');
var n = 0;
function getNext() {
var e = n === $('.slider-project').length - 1 ? 0 : n + 1;
$(".current").html(e + 1);
n++;
console.log(e);
slider.animate({
marginLeft: '-200%'
}, 700, function() {
$('#home-slider-c section:first-child').insertAfter('#home-slider-c section:last-child');
slider.css('margin-left', '-100%');
});
// $(".current").html(e++);
}
var n = 0;
function getPrev() {
var e = n <= 0 ? $('.slider-project').length - 1 : n - 1;
$(".current").html(e + 1);
n--;
console.log(e);
slider.animate({
marginLeft: 0
}, 700, function() {
$('#home-slider-c section:last-child').insertBefore('#home-slider-c section:first-child');
slider.css('margin-left', '-100%');
});
}
next.on('click', getNext);
prev.on('click', getPrev);

Try using this single counter e initialized to 1
....
var e= 1;
function getNext() {
e= e<$('.slider-project').length?e:0;
e++;
$(".current").html(e);
// n++;
console.log(e);
....
}
function getPrev() {
e= e<=1?$('.slider-project').length+1:e;
e--;
$(".current").html(e);
// n--;
console.log(e);
....
}

Use the Reminder Operator % Here you go:
var tot = 6, // Let's say we have 6 slides.
c = 0; // Dummy counter
$("#prev, #next").on("click", function(){
// Increment or decrement counter depending on button ID
c = this.id==="next" ? ++c : --c;
// OK almost there, now let's loop our counter to prevent exceeding <0 or >5
// >5 since index 5 is the 6th slide (tot-1).
// If counter went less than 0 (prev button) than set it to tot-1
// For all other cases use modulo % which will reset it to 0 automagically.
c = c<0 ? tot-1 : c%tot;
$("#test").text(c);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id=prev>«</button>
<span id=test>0</span>
<button id=next>»</button>
The above can be written using a bigger if else logic, but if it's all clear than you can simply use this snippet and drop it into any current or future gallery you build:
// Logic to loop counter on prev / next click:
c = (this.id==="next" ? ++c : --c) < 0 ? tot-1 : c%tot;

Sliding "cards" effect -- slides out, but not in

I'm using the following code to create a sliding card effect where each "card" is a list element and they slide across the screen. They are only visible within the "stage" I've set with specific height and width. It's working great -- except that, while the cards slide out nicely to the left, they don't perform the same sliding function inwards from the right. Instead, it simply jumps onto the page and looks a bit startling.
Does anyone know how I could get the next list item to slide in from the right instead of simply appearing?
Thanks!
JS:
window.addEvent('domready', function () {
var totIncrement = 0;
var increment = 968;
var maxRightIncrement = increment * (-303); //this is -303 because there are 303 cards, but the example below only has 3
var fx = new Fx.Style('slider-list', 'margin-left', {
duration: 300,
//transition: Fx.Transitions.Back.easeInOut,
wait: true
});
// EVENTS for the button "previous"
var pbuttons = document.getElementsByClassName('prevButton');
for(i = 0; i < pbuttons.length; i++) {
$(pbuttons[i]).addEvents({
'click': function (event) {
if(totIncrement > maxRightIncrement) {
totIncrement = totIncrement + increment;
fx.stop()
fx.start(totIncrement);
}
}
});
}
//-------------------------------------
// EVENTS for the button "next"
// var buttons = $('.nextButton');
var buttons = document.getElementsByClassName('nextButton');
for(i = 0; i < buttons.length; i++) {
$(buttons[i]).addEvents({
'click': function (event) {
if(totIncrement > maxRightIncrement) {
totIncrement = totIncrement - increment;
fx.stop()
fx.start(totIncrement);
}
}
});
}
});
HTML:
<div id="slider-stage">
<ul id="slider-list">
<li id="l1">
<!-- previous button -->
<div class="prev"><a class="prevButton" href="#">Previous</a></div>
<div>
<!-- content goes here -->
<!-- next button -->
<div class="slider-buttons">
<a class="nextButton" href="#">Next</a>
</div>
</div>
</li>
<li id="l2">
<!-- previous button -->
<div class="prev"><a class="prevButton" href="#">Previous</a></div>
<div>
<!-- content goes here -->
<!-- next button -->
<div class="slider-buttons">
<a class="nextButton" href="#">Next</a>
</div>
</div>
</li>
<li id="l3">
<!-- previous button -->
<div class="prev"><a class="prevButton" href="#">Previous</a></div>
<div>
<!-- content goes here -->
<!-- next button -->
<div class="slider-buttons">
<a class="nextButton" href="#">Next</a>
</div>
</div>
</li>
</ul>
</div>