Develop Reference

How can I launch a modal from a button that runs a function in javascript?

I want to launch a modal rather than a simple alert which is triggered by the user clicking a submit button.
This is for a simple quiz application.
function check() {
var c = 0
var w = 0
var radios = document.getElementsByName('a');
var radios2 = document.getElementsByName('b');
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
if (radios[i].value == "a") {
c++
} else {
w++
}
}
}
for (var i = 0; i < radios2.length; i++) {
if (radios2[i].checked) {
if (radios2[i].value == "f") {
c++
} else {
w++
}
}
}
alert(`you got ${c} answers correct and ${w} answers wrong!`)
} //end of check function
<div class="end-quiz">
<input id="end-btn" type="button" name="" value="I am done!" onclick="check()">
</div>
The fiddle;
https://jsfiddle.net/rossmclenny/os78mury/1/

created a popup with html and css. this may help..
function check() {
var c = 0
var w = 0
var radios = document.getElementsByName('a');
var radios2 = document.getElementsByName('b');
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
if (radios[i].value == "a") {
c++
} else {
w++
}
}
}
for (var i = 0; i < radios2.length; i++) {
if (radios2[i].checked) {
if (radios2[i].value == "f") {
c++
} else {
w++
}
}
}
document.querySelector('#result').innerHTML = `you got ${c} answers correct and ${w} answers wrong!`;
document.querySelector('#popup1').classList.add('visible');
} //end of check function
document.querySelector('.close').addEventListener('click',function(){
document.querySelector('#popup1').classList.remove('visible');
});
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target, .visible {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
cursor:pointer;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.popup{
width: 70%;
}
}
<div class="end-quiz">
<input id="end-btn" type="button" name="" value="I am done!" onclick="check()">
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Result</h2>
<a class="close">×</a>
<div class="content">
<p id="result"></p>
</div>
</div>
</div>
reference for popup css :- https://codepen.io/imprakash/pen/GgNMXO

Carousel css3 animation acting weird

I've created this 3 item vertical carousel, and need to correct the transition.
My current project can be seen here:
http://hotelfjordgaarden.dk.test.vjm.dk/
I want to create the transition from this pen (the regular swipe/fade carousel transition):
https://codepen.io/marcusmichaels/pen/yGGoLM
If anyone could help me solve this, I would be so greatful!
Thanks in advance!
My HTML:
<div class="container">
<div class="frontpage__content__carousel">
<div class="frontpage__content__carousel__list">
<div class="frontpage__content__carousel__list__item" data-href="//google.com">
<a href="//google.com">
<p class="h1">
Heading
</p>
<p class="sub">
Subheading
</p>
</a>
</div>
<div class="frontpage__content__carousel__list__item" data-href="//google.com">
<a href="//google.com">
<p class="h1">
Heading
</p>
<p class="sub">
Subheading
</p>
</a>
</div>
<div class="frontpage__content__carousel__list__item" data-href="//google.com">
<a href="//google.com">
<p class="h1">
Heading
</p>
<p class="sub">
Subheading
</p>
</a>
</div>
<div class="frontpage__content__carousel__list__item" data-href="//google.com">
<a href="//google.com">
<p class="h1">
Heading
</p>
<p class="sub">
Subheading
</p>
</a>
</div>
<div class="frontpage__content__carousel__list__item" data-href="//google.com">
<a href="//google.com">
<p class="h1">
Heading
</p>
<p class="sub">
Subheading
</p>
</a>
</div>
</div>
<div class="frontpage__content__carousel__navigation">
<div class="prev icon" id="jsGoToPrev"></div>
<div class="next icon" id="jsGoToNext"></div>
</div>
</div>
</div>
My SASS:
.frontpage {
width: 100%;
overscroll-behavior: none;
.header {
background: white;
display: flex;
width: 100%;
justify-content: center;
align-items: center;
height: 138px;
}
.frontpage__content {
width: 100%;
height: 100%;
display: flex;
text-align: center;
align-items: center;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
#media only screen and (max-width: #screen-sm-max) {
> div {
width: 100%;
margin-left: auto;
margin-right: auto;
}
}
&::before {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #8fa2a6;
z-index: -2;
}
&__video {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: -1;
opacity: 0.4;
}
// carousel wrapper
&__carousel {
overflow: hidden;
& * {
box-sizing: border-box;
}
// carousel
&__list {
overflow: hidden;
transform-style: preserve-3d;
&__item {
// disable user selection
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
opacity: 0;
position: absolute;
top: 0;
left: 0;
transition: transform .5s, top .5s, z-index .5s;
width: 100%;
z-index: -100;
margin: auto;
a {
.h1 {
font-size: 18px;
color: white;
text-transform: uppercase;
margin: 0;
}
.sub {
font-size: 14px;
font-weight: 500;
color: white;
margin: 0;
}
}
&.prev {
transform: translateY(-100%);
z-index: 800;
opacity: 0.5;
}
&.next {
transform: translateY(420%);
#media only screen and (min-width: #screen-lg) {
transform: translateY(500%);
}
z-index: 800;
opacity: 0.5;
}
&.active {
opacity: 1;
position: relative;
z-index: 900;
padding: 40px 0;
margin: 20px 0;
border: 1px solid rgba(255, 255, 255, 0.4);
border-left: none;
border-right: none;
a {
.h1 {
font-size: 18px;
}
.sub {
font-size: 16px;
}
}
}
}
}
&__navigation {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: none;
position: relative;
.icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
font-size: 20px;
border-radius: 50%;
border: 2px solid rgba(white, 0.5);
color: rgba(white, 0.5);
font-weight: 400;
font-family: 'Font Awesome 5 Pro';
position: fixed;
left: 60px;
cursor: pointer;
}
.prev {
top: 40%;
&::before {
content: '\f176';
}
}
.next {
top: 70%;
&::before {
content: '\f175';
}
}
}
}
}
// tablet portrait
#media only screen and (min-width: #screen-sm) {
height: 100vh;
.frontpage__content__carousel__list__item {
a {
.h1 {
font-size: 30px;
}
.sub {
font-size: 10px;
}
}
&.active {
a {
.h1 {
font-size: 40px;
}
.sub {
font-size: 24px;
}
}
}
}
}
// tablet landscape
#media only screen and (min-width: #screen-md) {
.frontpage__content__carousel__list__item {
a {
.h1 {
font-size: 30px;
}
.sub {
font-size: 10px;
}
}
&.active {
a {
.h1 {
font-size: 40px;
}
.sub {
font-size: 24px;
}
}
}
}
}
// desktop
#media only screen and (min-width: #screen-lg) {
.frontpage__content__carousel__navigation {
display: block;
}
.frontpage__content__carousel__list__item {
a {
.h1 {
font-size: 30px;
}
.sub {
font-size: 10px;
}
}
&.active {
a {
.h1 {
font-size: 60px;
}
.sub {
font-size: 30px;
}
}
}
}
}
}
My Javascript:
if ($('.frontpage__content').length > 0) {
$(document).ready(function () {
adjustFrontpageContentHeight();
});
$(window).resize(function () {
adjustFrontpageContentHeight();
});
function adjustFrontpageContentHeight() {
var $windowHeight = $(window).height();
var $headerHeight = $('.header').height();
$('.frontpage__content').height($windowHeight - $headerHeight);
}
(function ($) {
var carousel = $('.frontpage__content__carousel');
var list = $('.frontpage__content__carousel__list');
var items = $('.frontpage__content__carousel__list__item');
var totalItems = items.length;
var slide = 0;
var moving = true;
var itemClassName = 'frontpage__content__carousel__list__item';
function getElements() {
var prev = $('.frontpage__content__carousel__list__item.prev');
var active = $('.frontpage__content__carousel__list__item.active');
var next = $('.frontpage__content__carousel__list__item.next');
var beforePrev;
if (prev.prev().length > 0) {
beforePrev = prev.prev();
} else if (prev.data('index') == 0) {
beforePrev = $('[data-index=' + (totalItems - 1) + ']')
} else {
beforePrev = $('[data-index=' + (prev.data('index') - 1) + ']');
}
var afterNext;
if (next.next().length > 0) {
afterNext = next.next();
} else {
afterNext = $('[data-index=' + (next.data('index') + 1) + ']');
}
return {
beforePrev: beforePrev,
prev : prev,
active : active,
next : next,
afterNext : afterNext,
}
}
function setInitialClasses() {
items[totalItems - 1].className = itemClassName + ' prev';
items[0].className = itemClassName + ' active';
items[1].className = itemClassName + ' next';
}
function goToPrev() {
if (!moving) {
// if first slide, set as last slide, else -1
if (slide === 0) {
slide = (totalItems - 1);
} else {
slide--;
}
goToSlide(slide);
//prependPrev();
}
}
function goToNext() {
if (!moving) {
// if last slide, reset to 0, else +1
if (slide === (totalItems - 1)) {
slide = 0;
} else {
slide++;
}
goToSlide(slide);
//appendNext();
}
}
function goToSlide(slide) {
if (!moving) {
disableInteraction();
// Update the "old" adjacent slides with "new" ones
var newPrevious = slide - 1,
newNext = slide + 1,
oldPrevious = slide - 2,
oldNext = slide + 2;
// Checks and updates if the new slides are out of bounds
if (newPrevious <= 0) {
oldPrevious = (totalItems - 1);
} else if (newNext >= (totalItems - 1)) {
oldNext = 0;
}
// Checks and updates if slide is at the beginning/end
if (slide === 0) {
newPrevious = (totalItems - 1);
oldPrevious = (totalItems - 2);
oldNext = (slide + 1);
} else if (slide === (totalItems - 1)) {
newPrevious = (slide - 1);
newNext = 0;
oldNext = 1;
}
items.each(function() {
$(this).removeClass('active prev next');
});
// Add new classes
items[newPrevious].className = itemClassName + " prev";
items[slide].className = itemClassName + " active";
items[newNext].className = itemClassName + " next";
}
}
function disableInteraction() {
moving = true;
// set timeout to same as transition length
setTimeout(function () {
moving = false;
}, 500);
}
function setEventListeners() {
// click listeners
$('body').on('click', '#jsGoToPrev', function () {
goToPrev();
});
$('body').on('click', '#jsGoToNext', function () {
goToNext();
});
$('body').on('click', '.frontpage__content__carousel__list__item.prev', function () {
goToPrev();
});
$('body').on('click', '.frontpage__content__carousel__list__item.next', function () {
goToNext();
});
$('body').on('click', '.frontpage__content__carousel__list__item.active', function () {
if (!moving) {
window.location.href = $(this).data('href');
}
});
// mousewheel scroll listener
$('body').on('wheel', carousel.selector, function (e) {
if (e.originalEvent.deltaY < 0) {
goToPrev();
} else if (e.originalEvent.deltaY > 0) {
goToNext();
}
});
// touch scroll listener
var ts;
var te;
$('body').on('touchstart', function (e) {
ts = e.originalEvent.touches[0].clientY;
});
$('body').on('touchend', function (e) {
te = e.originalEvent.changedTouches[0].clientY;
if (ts > te+5) {
goToNext();
} else if (ts < te-5) {
goToPrev();
}
});
}
function prependPrev() {
list.prepend(getElements().prev);
}
function appendNext() {
list.append(getElements().next);
}
function initCarousel() {
// nullify links href after load - this is due to SEO
items.each(function () {
$(this).find('a').attr('href', 'javascript:void(0)');
});
setInitialClasses();
setEventListeners();
prependPrev();
moving = false;
}
$(document).ready(function () {
initCarousel();
});
})(jQuery);
}

What I eventually wounded up doing is:
Make my carousel DIV/container overflow: hidden, so I can have items inside which are hidden due to overflow.
I then use jQuery to scroll my div when a non-active item is clicked.
The entire script for the page is here:
if ($('.frontpage__content').length > 0) {
$('.frontpage__content__carousel__list__item ').click(function (e) {
if (!$(this).hasClass('active')) {
e.preventDefault();
var direction = 'up';
if ($(this).index() >= $('.frontpage__content__carousel__list__item.active').index()) {
direction = 'down';
}
$('.frontpage__content__carousel__list__item').removeClass('active');
$(this).addClass('active');
var _this = this;
var scrollTop = 0;
var items = $('.frontpage__content__carousel__list__item');
items.each(function (index, item) {
if ($(this).is($(_this).prev()) || $(_this).index() == 0) {
return false;
}
scrollTop += $(this).height();
});
$('.frontpage__content__carousel__list').stop().animate({
'scrollTop': scrollTop
});
}
});
function goToPrev() {
$('.frontpage__content__carousel__list__item.active').prev().trigger('click');
}
function goToNext() {
$('.frontpage__content__carousel__list__item.active').next().trigger('click');
}
$('#jsGoToPrev').click(function () {
goToPrev();
});
$('#jsGoToNext').click(function () {
goToNext();
});
$(window).resize(function () {
adjustFrontpageContentHeight();
});
function adjustFrontpageContentHeight() {
var $windowHeight = $(window).height();
var $headerHeight = $('.header').height();
$('.frontpage__content').height($windowHeight - $headerHeight);
}
var moving = false;
// mousewheel scroll listener
$('body').on('wheel', '.frontpage__content__carousel', function (e) {
if (!moving) {
moving = true;
setTimeout(function () {
moving = false;
}, 250);
if (e.originalEvent.deltaY < 0) {
goToPrev();
} else if (e.originalEvent.deltaY > 0) {
goToNext();
}
}
});
// touch scroll listener
var ts;
var te;
$('body').on('touchstart', '.frontpage__content__carousel', function (e) {
ts = e.originalEvent.touches[0].clientY;
});
$('body').on('touchend', '.frontpage__content__carousel', function (e) {
te = e.originalEvent.changedTouches[0].clientY;
if (ts > te + 5) {
goToNext();
} else if (ts < te - 5) {
goToPrev();
}
});
}

How to fix time interval on automatic slideshow when manual controls are used

I need help with this slideshow. I want it to be automatic and to be able to be controlled manually aswell. so far its working fine in the automatic part. However when I click the manual controls it takes me to a wrong slide and the time interval for the next 1 or 2 slides is messed up. If anyone has a solution to this then please help.
I have tried to change slideIndex to 0 but that takes me to the 1st slide istead of the next slide.
var slideIndex = 0;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 10000); // Change image every 10 seconds
}
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through
*/
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
<h2>Automatic Slideshow</h2>
<p>Change image every 10 seconds:</p>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img_nature_wide.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img_snow_wide.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img_mountains_wide.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
I expect the interval to be 10 seconds but it turns out to be a couple seconds instead. Also i expect the next / previous slide when buttons are clicked and they aren't working properly

I believe the problem is the fact that you are setting a timeout for your slideshow automatically and when you press the next or previous buttons your old timeouts do not cancel so now you have switched slides, the old timeout will still trigger and then you've also set a new one so it will trigger as well all way within the range of time that you would like.
Instead of creating a timeout for each button click i would suggest using intervals and keeping track of it outside any functions.
When the user presses a forward or back button cancel that interval and create a new one so that you don't run into the issue you are having now where you basically have like 10 loops spamming your carousel at the same time.
JAVASCRIPT
let slideIndex = 0;
const slideTime = 5000;
let slideInterval = setInterval(() => changeSlide(true), slideTime);
function jumpSlide(forward) {
clearInterval(slideInterval);
changeSlide(forward)
slideInterval = setInterval(() => changeSlide(true), slideTime);
}
function changeSlide(forward) {
const slides = document.getElementsByClassName('slide');
slides[slideIndex].classList.remove('active');
if (forward) {
if (slideIndex + 1 > slides.length - 1) {
slides[0].classList.add('active');
slideIndex = 0;
} else {
slides[slideIndex + 1].classList.add('active');
slideIndex ++;
}
} else {
if (slideIndex - 1 < 0) {
slides[slides.length - 1].classList.add('active');
slideIndex = slides.length - 1;
} else {
slides[slideIndex - 1].classList.add('active');
slideIndex --;
}
}
}
HTML
<div class='slide-container'>
<div class='slide active'></div>
<div class='slide'></div>
<div class='slide'></div>
</div>
<button onclick='jumpSlide(false)'>last slide</button>
<button onclick='jumpSlide(true)'>next slide</button>
CSS
.slide-container{
display: flex;
}
.slide {
width: 50px;
height: 50px;
background-color: rgba(0, 0, 0, 0.25)
}
.active {
background-color: red;
}

Disable prev/next arrows on first and last slides

I'm a beginner to create a website.
I need help for my slides created on a website. I copied and pasted the code on my website but my slides are displayed differently (displayed like column )
Moreover, I'd like to disable the prev arrow on the first slide and the next arrow on the last slide.
https://www.w3schools.com/code/tryit.asp?filename=FZUU76085WOH
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = x.length
}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "block";
}
.mySlides {
display: none;
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="w3-content w3-display-container">
<img class="mySlides" src="https://meshrepsy.fr/wp-content/uploads/Salle-dattente.jpg" style="width:100%">
<img class="mySlides" src="https://meshrepsy.fr/wp-content/uploads/Entrée.jpg" style="width:100%">
<img class="mySlides" src="https://meshrepsy.fr/wp-content/uploads/Thérapie.jpg" style="width:100%">
<img class="mySlides" src="https://meshrepsy.fr/wp-content/uploads/Cabinet.jpg" style="width:100%">
<button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">❮</button>
<button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">❯</button>
</div>
Tanks for your help

You need to check if the slideIndex += n value (from clicking the arrow buttons) is the same as the amount of slides you have, if so then disable the next button because there are no more slides.
Also the same logic for the previous slide. If the index is where you started, then disable the previous button.
Here's an example:
var slides = document.getElementsByClassName("mySlides");
var nextBtn = document.getElementById("nextBtn");
var prevBtn = document.getElementById("prevBtn");
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
var newIndex = slideIndex += n;
handleDisabled(newIndex);
showDivs(newIndex);
}
function showDivs(n) {
var i;
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
}
function handleDisabled(newIndex) {
prevBtn.disabled = false;
nextBtn.disabled = false;
if (newIndex === slides.length) {
nextBtn.disabled = true;
} else if (newIndex === 1) {
prevBtn.disabled = true;
}
}
.mySlides {
display: none;
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="w3-content w3-display-container">
<img class="mySlides" src="https://meshrepsy.fr/wp-content/uploads/Salle-dattente.jpg" style="width:100%">
<img class="mySlides" src="https://meshrepsy.fr/wp-content/uploads/Entrée.jpg" style="width:100%">
<img class="mySlides" src="https://meshrepsy.fr/wp-content/uploads/Thérapie.jpg" style="width:100%">
<img class="mySlides" src="https://meshrepsy.fr/wp-content/uploads/Cabinet.jpg" style="width:100%">
<button id="prevBtn" disabled class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">❮</button>
<button id="nextBtn" class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">❯</button>
</div>

Just make it so if n > x.length or n < x.length the display property of the button be set to "none".

I have created another slider based on an example on a website:
enter link description here
I would like to get exactly the same slider on my wordpress, buy when I past the code on my website I have the result of code snippet :(
May you please take a look at this (if possible try it to check it). I tried for several days without success
Thanks
$switch-speed: 1s;
$slider-number: 5;
$slider-width: 100% / $slider-number;
$image1: 'https://meshrepsy.fr/wp-content/uploads/Salle-dattente.jpg';
$image2: 'https://meshrepsy.fr/wp-content/uploads/Entrée.jpg';
$image3: 'https://meshrepsy.fr/wp-content/uploads/Thérapie.jpg';
$image4: 'https://meshrepsy.fr/wp-content/uploads/Cabinet.jpg';
$image5: 'https://meshrepsy.fr/wp-content/uploads/Cure-type.jpg';
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
background-color: #1C2325;
color: #eee;
}
.outer-wrapper {
width: 80%;
margin: 50px auto;
}
// basic styles
.s-wrap {
width: 100%;
margin-bottom: 50px;
padding-bottom: 55%;
position: relative;
border: 2px solid #fff;
background-color: #efefe8;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
overflow: hidden;
> input {
display: none;
}
.s-content {
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
width: 100% * $slider-number;
height: 100%;
font-size: 0;
list-style: none;
transition: transform $switch-speed;
}
.s-item {
display: inline-block;
width: $slider-width;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
}
.s-item-1 {background-image: url($image1);}
.s-item-2 {background-image: url($image2);}
.s-item-3 {background-image: url($image3);}
.s-item-4 {background-image: url($image4);}
.s-item-5 {background-image: url($image5);}
}
.s-type-1 {
.s-control {
position: absolute;
bottom: 18px;
left: 50%;
text-align: center;
transform: translateX(-50%);
transition-timing-function: ease-out;
> label[class^="s-c-"] {
display: inline-block;
width: 12px;
height: 12px;
margin-right: 10px;
border-radius: 50%;
border: 1px solid #999;
background-color: #efefe8;
cursor: pointer;
}
}
.s-nav label {
display: none;
position: absolute;
top: 50%;
padding: 5px 10px;
transform: translateY(-50%);
cursor: pointer;
&::before,
&::after {
content: "";
display: block;
width: 8px;
height: 24px;
background-color: #fff;
}
&::before {margin-bottom: -12px;}
&.left {
left: 20px;
&::before {transform: rotate(45deg);}
&::after {transform: rotate(-45deg);}
}
&.right {
right: 20px;
&::before {transform: rotate(-45deg);}
&::after {transform: rotate(45deg);}
}
}
#for $i from 1 through $slider-number {
#s-#{$i}:checked {
& ~ .s-content {transform: translateX(-$slider-width * ($i - 1));}
& ~ .s-control .s-c-#{$i} {background-color: #333;}
& ~ .s-nav .s-nav-#{$i} {display: block;}
}
}
}
.s-type-2 {
.s-content {
animation: slider-animation 50s ease-in-out infinite;
&:hover {animation-play-state: paused;}
}
}
#keyframes slider-animation {
$i: 0;
$j: 0;
$times: ($slider-number - 1) * 2;
#while $i < 100 {
#{$i}%,
#{$i + 7}% {
#if $i < 50 {
transform: translateX(-$slider-width * $j);
} #else {
transform: translateX(-$slider-width * ($times - $j));
}
}
$i: $i + 100 / $times;
$j: $j + 1;
}
}
<div class="outer-wrapper">
<div class="s-wrap s-type-1" role="slider">
<input type="radio" id="s-1" name="slider-control" checked="checked">
<input type="radio" id="s-2" name="slider-control">
<input type="radio" id="s-3" name="slider-control">
<input type="radio" id="s-4" name="slider-control">
<input type="radio" id="s-5" name="slider-control">
<ul class="s-content">
<li class="s-item s-item-1"></li>
<li class="s-item s-item-2"></li>
<li class="s-item s-item-3"></li>
<li class="s-item s-item-4"></li>
<li class="s-item s-item-5"></li>
</ul>
<div class="s-nav">
<label class="s-nav-1 right" for="s-2"></label>
<label class="s-nav-2 left" for="s-1"></label>
<label class="s-nav-2 right" for="s-3"></label>
<label class="s-nav-3 left" for="s-2"></label>
<label class="s-nav-3 right" for="s-4"></label>
<label class="s-nav-4 left" for="s-3"></label>
<label class="s-nav-4 right" for="s-5"></label>
<label class="s-nav-5 left" for="s-4"></label>
</div>
</div>

Clicking card in memory game doesn't flip it over

I'm trying to make a memory game and am struggling to get the cards to flip over when they're clicked. I expected the following for loop to call the function displayCard when a card (corresponding to each li item with class card) is clicked, which function toggles the classes show and open (sets the card to visible [displays icon] and changes the background color). Any suggestions?
CodePen
For loop:
for (let i = 0; i < cards.length; i++) {
card = cards[i];
card.addEventListener('click', displayCard);
card.addEventListener('click', cardOpen);
card.addEventListener('click', congratulations);
}
displayCard function:
let displayCard = function() {
this.classList.toggle('open');
this.classList.toggle('show');
this.classList.toggle('disabled');
};
CSS for classes show and open:
.card-deck .card.open {
/* transform: rotateY(0); */
background: #02b3e4;
cursor: default;
animation-name: flipInY;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
animation-duration: .75s;
}
.card-deck .card.show {
font-size: 33px;
}
.show {
visibility: visible !important;
opacity: 100 !important;
}

There are two errors in your code that need to be fixed and then the flipping occurs :
in the startGame function, deck.appendChild is not a function. deck was initialized with document.getElementsByClassName('card-deck'). And document.getElementsByClassName returns an array. You need to select the first index of this array.
in the startGame function, interval is not defined. Your function is called before the interval variable is declared. Either move up the interval variable declaration of declare it with the var keyword to "reserve" the identifier.
let card = document.getElementsByClassName('card');
// Spread operator (new in ES6) allows iterable to expand where 0+ arguments are expected
let cards = [...card];
let deck = document.getElementsByClassName('card-deck')[0];
let moves = 0;
let counter = document.querySelector('.moves');
let stars = document.querySelectorAll('.fa-star');
let matchingCard = document.getElementsByClassName('matching');
let starsList = document.querySelectorAll('.stars li');
let closeIcon = document.querySelector('.close');
let modal = document.getElementsByClassName('main-modal');
let openedCards = [];
// Game timer
let second = 0, minute = 0, hour = 0;
let timer = document.querySelector('.timer');
let interval;
// Shuffle function from http://stackoverflow.com/a/2450976
function shuffle(array) {
let currentIndex = array.length, temporaryValue, randomIndex;
while (currentIndex !== 0) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
// Shuffles cards upon page load
document.body.onload = startGame();
function startGame() {
// Shuffles deck
cards = shuffle(cards);
// Removes any existing classes from each card
for (let i = 0; i < cards.length; i++) {
deck.innerHTML = '';
[].forEach.call(cards, function(item) {
deck.appendChild(item);
});
cards[i].classList.remove('show', 'open', 'matching', 'disabled');
}
// Resets number of moves
moves = 0;
counter.innerHTML = moves;
// Resets star rating
for (let i = 0; i < stars.length; i++) {
stars[i].style.color = '#ffd700';
stars[i].style.visibility = 'visible';
}
// Resets timer
let second = 0;
let minute = 0;
let hour = 0;
let timer = document.querySelector('.timer');
timer.innerHTML = '0 mins 0 secs';
if (typeof interval != "undefined") {
sclearInterval(interval);
}
}
// Toggles open and show classes to display cards
let displayCard = function() {
this.classList.toggle('open');
this.classList.toggle('show');
this.classList.toggle('disabled');
};
// Adds opened cards to openedCards list and checks if cards are a match or not
function cardOpen() {
openedCards.push(this);
let len = openedCards.length;
if (len === 2) {
moveCounter();
if (openedCards[0].type === openedCards[1].type) {
matching();
} else {
notMatching();
}
}
}
// When cards match
function matching() {
openedCards[0].classList.add('matching', 'disabled');
openedCards[1].classList.add('matching', 'disabled');
openedCards[0].classList.remove('show', 'open');
openedCards[1].classList.remove('show', 'open');
openedCards = [];
}
// When cards don't match
function notMatching() {
openedCards[0].classList.add('not-matching');
openedCards[1].classList.add('not-matching');
disable();
setTimeout(function() {
openedCards[0].classList.remove('show', 'open', 'not-matching');
openedCards[1].classList.remove('show', 'open', 'not-matching');
enable();
openedCards = [];
}, 1100);
}
// Disables cards temporarily
function disable() {
Array.prototype.filter.call(cards, function(card) {
card.classList.add('disabled');
});
}
// Enables cards, disables matching cards
function enable() {
Array.prototype.filter.call(cards, function(card) {
card.classList.remove('disabled');
for (let i = 0; i < matchingCard.length; i++) {
matchingCard[i].classList.add('disabled');
}
});
}
// Counts player's moves
function moveCounter() {
moves++;
counter.innerHTML = moves;
// Starts timer on first click
if (moves == 1) {
second = 0;
minute = 0;
hour = 0;
startTimer();
}
// Sets star rating based on number of moves
if (moves > 8 && moves < 12) {
for (i = 0; i < 3; i++) {
if (i > 1) {
stars[i].style.visibility = 'collapse';
}
}
}
else if (moves > 13) {
for (i = 0; i < 3; i++) {
if (i > 0) {
stars[i].style.visibility = 'collapse';
}
}
}
}
function startTimer() {
interval = setInterval(function() {
timer.innerHTML = minute + 'mins ' + second + 'secs';
second++;
if (second == 60) {
minute++;
second = 0;
}
if (minute == 60) {
hour++;
minute = 0;
}
}, 1000);
}
// Congratulates player when all cards match and shows modal, moves, time and rating
function congratulations() {
if (matchingCard.length == 16) {
clearInterval(interval);
let finalTime = timer.innerHTML;
// Shows congratulations modal
modal.classList.add('show');
let starRating = document.querySelector('.stars').innerHTML;
// Shows move, time, and rating on modal
document.getElementsByClassName('final-move').innerHTML = moves;
document.getElementsByClassName('star-rating').innerHTML = starRating;
document.getElementsByClassName('total-time').innerHTML = finalTime;
closeModal();
}
}
// Closes modal upon clicking its close icon
function closeModal() {
closeIcon.addEventListener('click', function(e) {
modal.classList.remove('show');
startGame();
});
}
function reset() {
modal.classList.remove('show');
startGame();
}
// Adds event listeners to each card
for (let i = 0; i < cards.length; i++) {
card = cards[i];
card.addEventListener('click', displayCard);
card.addEventListener('click', cardOpen);
card.addEventListener('click', congratulations);
}
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #ffffff;
font-family: 'Permanent Marker', cursive;
font-size: 16px;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
h1 {
font-family: 'Gloria Hallelujah', cursive;
}
/* DECK OF CARDS */
.card-deck {
width: 85%;
background: #716F71;
padding: 1rem;
border-radius: 4px;
box-shadow: 8px 9px 26px 0 rgba(46, 61, 73, 0.5);
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
margin: 0 0 3em;
}
.card-deck .card {
height: 3.7rem;
width: 3.7rem;
margin: 0.2rem 0.2rem;
background: #141214;;
font-size: 0;
color: #ffffff;
border-radius: 5px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5);
}
.card-deck .card.open {
/* transform: rotateY(0); */
background: #02b3e4;
cursor: default;
animation-name: flipInY;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
animation-duration: .75s;
}
.card-deck .card.show {
font-size: 33px;
}
.show {
visibility: visible !important;
opacity: 100 !important;
}
.card-deck .card.matching {
cursor: default;
background: #E5F720;
font-size: 33px;
animation-name: rubberBand;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
animation-duration: .75s;
}
.card-deck .card.not-matching {
animation-name: pulse;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
animation-duration: .75s;
background: #e2043b;
}
.card-deck .card.disabled {
pointer-events: none;
opacity: 0.9;
}
/* SCORE PANEL */
.score-panel {
text-align: left;
margin-bottom: 10px;
}
.score-panel .stars {
margin: 0;
padding: 0;
display: inline-block;
margin: 0 5px 0 0;
}
.score-panel .stars li {
list-style: none;
display: inline-block;
}
.score-panel .restart {
float: right;
cursor: pointer;
}
.fa-star {
color: #FFD700;
}
.timer {
display: inline-block;
margin: 0 1rem;
}
/* CONGRATULATIONS MODAL */
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #ffffff;
border-radius: 5px;
width: 85%;
position: relative;
transition: all 5s ease-in-out;
font-family: 'Gloria Hallelujah', cursive;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #e5f720;
}
.popup .congrats-message,
.info-message {
max-height: 30%;
overflow: auto;
text-align: center;
}
.star-rating li {
display: inline-block;
}
.play-again {
background-color: #141214;
padding: 0.7rem 1rem;
font-size: 1.1rem;
display: block;
margin: 0 auto;
width: 50%;
font-family: 'Gloria Hallelujah', cursive;
color: #ffffff;
border-radius: 5px;
}
/* Animations */
#keyframes flipInY {
from {
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
animation-timing-function: ease-in;
opacity: 0;
}
40% {
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
animation-timing-function: ease-in;
}
60% {
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1;
}
80% {
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}
to {
transform: perspective(400px);
}
}
#keyframes rubberBand {
from {
transform: scale3d(1, 1, 1);
}
30% {
transform: scale3d(1.25, 0.75, 1);
}
40% {
transform: scale3d(0.75, 1.25, 1);
}
50% {
transform: scale3d(1.15, 0.85, 1);
}
65% {
transform: scale3d(.95, 1.05, 1);
}
75% {
transform: scale3d(1.05, .95, 1);
}
to {
transform: scale3d(1, 1, 1);
}
}
#keyframes pulse {
from {
transform: scale3d(1, 1, 1);
}
50% {
transform: scale3d(1.2, 1.2, 1.2);
}
to {
transform: scale3d(1, 1, 1);
}
}
/* MEDIA QUERIES */
#media (max-width: 320px) {
.card-deck {
width: 85%;
}
.card-deck .card {
height: 4.7rem;
width: 4.7rem;
}
}
/* For tablets and larger screens */
#media (min-width: 768px) {
.container {
font-size: 22px;
}
.card-deck {
width: 660px;
height: 680px;
}
.card-deck .card {
height: 125px;
width: 125px;
}
.popup {
width: 60%;
}
}
<!-- <!doctype html> -->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Matching Game</title>
<meta name="description" content="">
<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet prefetch" href="https://fonts.googleapis.com/css?family=Coda">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<header>
<h1>Matching Game</h1>
</header>
<section class="score-panel">
<ul class="stars">
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
</ul>
<span class="moves">0</span> moves
<div class="timer"></div>
<div class="restart" onclick=startGame()>
<i class="fa fa-repeat"></i>
</div>
</section>
<ul class="card-deck">
<li class="card" type="diamond">
<i class="fa fa-diamond"></i>
</li>
<li class="card" type="plane">
<i class="fa fa-paper-plane-o"></i>
</li>
<li class="card matching" type="anchor">
<i class="fa fa-anchor"></i>
</li>
<li class="card" type="bolt" >
<i class="fa fa-bolt"></i>
</li>
<li class="card" type="cube">
<i class="fa fa-cube"></i>
</li>
<li class="card matching" type="anchor">
<i class="fa fa-anchor"></i>
</li>
<li class="card" type="leaf">
<i class="fa fa-leaf"></i>
</li>
<li class="card" type="bicycle">
<i class="fa fa-bicycle"></i>
</li>
<li class="card" type="diamond">
<i class="fa fa-diamond"></i>
</li>
<li class="card" type="bomb">
<i class="fa fa-bomb"></i>
</li>
<li class="card" type="leaf">
<i class="fa fa-leaf"></i>
</li>
<li class="card" type="bomb">
<i class="fa fa-bomb"></i>
</li>
<li class="card open show" type="bolt">
<i class="fa fa-bolt"></i>
</li>
<li class="card" type="bicycle">
<i class="fa fa-bicycle"></i>
</li>
<li class="card" type="plane">
<i class="fa fa-paper-plane-o"></i>
</li>
<li class="card" type="cube">
<i class="fa fa-cube"></i>
</li>
</ul>
<div class="main-modal overlay">
<div class="popup">
<h2>Congratulations!</h2>
<a class="close" href=# >×</a>
<div class="congrats-message">
Congratulations, you're a winner!
</div>
<div class="info-message">
<p>You made <span class=final-move></span> moves </p>
<p>In <span class=total-time></span></p>
<p>Rating: <span class=star-rating></span></p>
</div>
<button class="play-again" onclick="reset()">
Play again
</button>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>