Hello i'm trying to make an up arrow like this:
but i got this :
I am not able to rotate the direction of the arrow
I already tried to change the rotate to 360, 90
and it doesn't work I'm not able to do something like the image I posted
const data = [
{
id: 1,
name: "SIMPLES NACIONAL – MEI",
funcionarioIncrease: 49.99,
maxFuncionario: 1,
socioIncrease: 0,
maxSocio: 5,
FATURAMENTO: [
{
name: "ATÉ 30.000,00",
value: 49.99,
},
{
name: "De 30.001,00 a 50.000,00 ",
value: 99.99,
},
],
},
{
id: 2,
name: "SIMPLES NACIONAL – SERVIÇOS",
funcionarioIncrease: 25,
maxFuncionario: 3,
socioIncrease: 25,
maxSocio: 5,
FATURAMENTO: [
{
name: "ATÉ 30.000,00",
value: 149.99,
},
{
name: "De 30.001,00 a 50.000,00 ",
value: 199.99,
},
],
},
];
function createInput(id, value) {
var inputRadio = document.createElement("input");
if (id && value) {
inputRadio.id = value;
inputRadio.name = "category";
inputRadio.type = "radio";
inputRadio.value = value;
inputRadio.classList.add("radio");
return inputRadio;
}
return null;
}
function createOptions() {
const container = document.querySelector(".options-container");
data.forEach((value) => {
const optionDiv = document.createElement("div");
optionDiv.classList.add("option");
container.append(optionDiv);
const input = createInput(value.name, value.id);
if (!input) {
return null;
}
optionDiv.append(input);
var label = document.createElement("label");
label.htmlFor = value.id;
label.innerHTML = value.name;
optionDiv.append(label);
});
}
function initalize() {
createOptions();
const selected = document.querySelector(".selected");
const optionsContainer = document.querySelector(".options-container");
const optionsList = document.querySelectorAll(".option");
selected.addEventListener("click", () => {
optionsContainer.classList.toggle("active");
});
optionsList.forEach((o) => {
o.addEventListener("click", () => {
let input = o.querySelector("input").id;
selected.innerHTML = o.querySelector("label").innerHTML;
selected.setAttribute("data-value", input);
optionsContainer.classList.remove("active");
});
});
}
initalize();
.select-box {
display: flex;
width: 100%;
max-height: 50px;
flex-direction: column;
position: relative;
z-index: 2;
}
.select-box .options-container {
background: #2f3640;
color: #f5f6fa;
max-height: 0;
width: 100%;
opacity: 0;
transition: all 0.4s;
border-radius: 8px;
overflow: hidden;
position: absolute;
order: 1;
top: 100%;
z-index: 2;
}
.select-box .options-container::before {
position: absolute;
display: block;
content: "";
bottom: 100%;
right: 25px;
width: 7px;
height: 7px;
margin-bottom: -4px;
border-top: 1px solid #b5b5b5;
border-left: 1px solid #b5b5b5;
background: blue;
transform: rotate(45deg);
transition: all 0.4s ease-in-out;
}
.selected {
background: #2f3640;
border-radius: 8px;
margin-bottom: 8px;
color: #f5f6fa;
position: relative;
order: 0;
}
.selected::after {
position: absolute;
display: block;
content: "";
width: 10px;
height: 10px;
top: 50%;
right: 25px;
margin-top: -3px;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
transform: rotate(45deg) translateY(-50%);
transition: all 0.4s ease-in-out;
transform-origin: 50% 0;
transition: all 0.4s;
}
.select-box .options-container.active {
max-height: 240px;
opacity: 1;
}
.select-box .options-container.active + .selected::after {
margin-top: 3px;
transform: rotate(-135deg) translateY(-50%);
}
.select-box .options-container::-webkit-scrollbar {
width: 8px;
background: #0d141f;
border-radius: 0 8px 8px 0;
}
.select-box .options-container::-webkit-scrollbar-thumb {
background: #525861;
border-radius: 0 8px 8px 0;
}
.select-box .option,
.selected {
padding: 12px 24px;
cursor: pointer;
}
.select-box .option:hover {
background: #414b57;
}
.select-box label {
cursor: pointer;
color: white;
}
.select-box .option .radio {
display: none;
}
<div class="inputs_container">
<div class="service_mode flex">
<div class="select-box">
<div class="options-container"></div>
<div class="selected">
Select Video Category
</div>
</div>
</div>
if anyone can help me i would be grateful
the css class I'm trying to add to the arrow is this:
.select-box .options-container::before
Here is one I think I made it clear the change is not hard to see mean that you will see where I made it but let me make something clear I removed width and height and alter the border-top to 10px solid transparent and border-right from 10px solid green to 10px solid #2f3640 to make its appearance so good
const data = [{
id: 1,
name: "SIMPLES NACIONAL – MEI",
funcionarioIncrease: 49.99,
maxFuncionario: 1,
socioIncrease: 0,
maxSocio: 5,
FATURAMENTO: [{
name: "ATÉ 30.000,00",
value: 49.99,
},
{
name: "De 30.001,00 a 50.000,00 ",
value: 99.99,
},
],
},
{
id: 2,
name: "SIMPLES NACIONAL – SERVIÇOS",
funcionarioIncrease: 25,
maxFuncionario: 3,
socioIncrease: 25,
maxSocio: 5,
FATURAMENTO: [{
name: "ATÉ 30.000,00",
value: 149.99,
},
{
name: "De 30.001,00 a 50.000,00 ",
value: 199.99,
},
],
},
];
function createInput(id, value) {
var inputRadio = document.createElement("input");
if (id && value) {
inputRadio.id = value;
inputRadio.name = "category";
inputRadio.type = "radio";
inputRadio.value = value;
inputRadio.classList.add("radio");
return inputRadio;
}
return null;
}
function createOptions() {
const container = document.querySelector(".options-container");
data.forEach((value) => {
const optionDiv = document.createElement("div");
optionDiv.classList.add("option");
container.append(optionDiv);
const input = createInput(value.name, value.id);
if (!input) {
return null;
}
optionDiv.append(input);
var label = document.createElement("label");
label.htmlFor = value.id;
label.innerHTML = value.name;
optionDiv.append(label);
});
}
function initalize() {
createOptions();
const selected = document.querySelector(".selected");
const optionsContainer = document.querySelector(".options-container");
const optionsList = document.querySelectorAll(".option");
selected.addEventListener("click", () => {
optionsContainer.classList.toggle("active");
});
optionsList.forEach((o) => {
o.addEventListener("click", () => {
let input = o.querySelector("input").id;
selected.innerHTML = o.querySelector("label").innerHTML;
selected.setAttribute("data-value", input);
optionsContainer.classList.remove("active");
});
});
}
initalize();
.select-box {
display: flex;
width: 100%;
max-height: 50px;
flex-direction: column;
position: relative;
z-index: 2;
}
.select-box .options-container {
background: #2f3640;
color: #f5f6fa;
max-height: 0;
width: 100%;
opacity: 0;
transition: all 0.4s;
border-radius: 8px;
/*overflow: hidden;*/
position: absolute;
order: 1;
top: 100%;
z-index: 2;
}
.select-box .options-container::before {
position: absolute;
display: block;
content: "";
bottom: 100%;
right: 25px;
/*width: 7px;
height: 7px;*/
margin-bottom: -6px;
border-top: 10px solid transparent;
border-right: 10px solid #2f3640/*green*/
;
/*background: blue;*/
transform: rotate(225deg);
transition: all 0.4s ease-in-out;
}
.selected {
background: #2f3640;
border-radius: 8px;
margin-bottom: 8px;
color: #f5f6fa;
position: relative;
order: 0;
}
.selected::after {
position: absolute;
display: block;
content: "";
width: 10px;
height: 10px;
top: 50%;
right: 25px;
margin-top: -3px;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
transform: rotate(45deg) translateY(-50%);
transition: all 0.4s ease-in-out;
transform-origin: 50% 0;
transition: all 0.4s;
}
.select-box .options-container.active {
max-height: 240px;
opacity: 1;
}
.select-box .options-container.active+.selected::after {
margin-top: 3px;
transform: rotate(-135deg) translateY(-50%);
}
.select-box .options-container::-webkit-scrollbar {
width: 8px;
background: #0d141f;
border-radius: 0 8px 8px 0;
}
.select-box .options-container::-webkit-scrollbar-thumb {
background: #525861;
border-radius: 0 8px 8px 0;
}
.select-box .option,
.selected {
padding: 12px 24px;
cursor: pointer;
}
.select-box .option:hover {
background: #414b57;
}
.select-box label {
cursor: pointer;
color: white;
}
.select-box .option .radio {
display: none;
}
<div class="inputs_container">
<div class="service_mode flex">
<div class="select-box">
<div class="options-container"></div>
<div class="selected">
Select Video Category
</div>
</div>
</div>
and if you find any bug in the code please let me know if there could be any further help
Related
I'm making a quiz front-end with "Back" and "Next" buttons. I want to update my answer if I change my answer when I go back. Idk how to update a new answer if I press "Back" and change the answer to a different one.
Secondly, how to fix my result table into bigger one because it looks small eventhough i try to change the width.
HTML
<div>
<div class="user-role">
<div class="question current">
<transition name="slide-fade" mode="out-in">
<div :key="questions[currentQuestion].question" :class="{deactivate: answered == questions.length}">
<h2>{{questions[currentQuestion].question }}</h2>
<div class="answers">
<span v-for="(answer, index) in questions[currentQuestion].answer" :key="index" v-bind:data-index="index" #click="selectAnswer">{{ answer }}</span>
</div>
<button class="back-btn" v-on:click="backBtn">Back</button>
<button class="next-btn" disabled v-on:click="nextBtn">{{ currentQuestion < (questions.length -1) ? "Next" : "Result!" }}</button>
</div>
</transition>
</div>
<div class="result">
<div class="success"></div>
<h2>Your score is:</h2>
<h1 :class="[(Number(((correctAnswers / questions.length) *100)).toFixed(2) >= 50)]">{{ Number(((correctAnswers / questions.length) *100)).toFixed(2) }}%</h1>
<small><b>{{ correctAnswers }}</b>Correct, <b>{{ wrongAnswers }}</b>Wrong</small>
<button v-on:click="Closeresult">CLOSE</button>
<button class="show-wrong-ones"
v-show= "wrongAnswers > 0"
#click="showWrongQuestion = true">Wrong answers
</button>
</div>
</div>
<div class="wrong-questions">
<h2 v-if="wrongQuestions.length > 1">Your wrong Questions</h2>
<h2 v-else-if="wrongQuestions.length == 1">Your wrong Question</h2>
<div class="wrong-one" v-for="question in wrongQuestions">
<h3>{{ question.question }}</h3>
<div class="answers-container">
<span class="selected">{{ question.answers[question.selected] }}</span>
<span class="correct">{{ question.answers[question.correct_answer] }}</span>
</div>
</div>
<button id="return-to-result">Show my result</button>
</div>
</div>
CSS
body {
font: Arial , sans-serif;
background: linear-gradient(#2d8dcb, #F0FFFF);
height: 100vh;
max-height: 100vh;
overflow: hidden;
}
h1.main{
font-weight: 100;
color: #FFFFFF;
text-align: center;
margin: 0;
}
.user-role {
transition: opacity .2s ease;
}
.user-role.mute {
opacity: .5;
}
.question{
max-width: 650px;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-250%);
background-color: rgba(255, 255, 255, .25);
color: #FFFFFF;
padding: 10px;
border-radius: 4px;
overflow: hidden;
transition: transform .4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
font-size: 30px;
}
.question.current {
transform: translateY(-50%) translateX(-50%);
}
.wrong.current {
transform: translateY(-50%) translateX(-50%);
}
.question.blur {
filter: blur(2px);
pointer-events: none;
}
.deactivate {
pointer-events: none;
}
.question h2{
min-width: calc(100% - 20px);
max-width: calc(100% - 20px);
background-color: transparent;
font-weight: 100;
padding: 0;
border-radius: 3px;
}
.question .answers {
display: flex;
flex-wrap: wrap;
color: #FFFFFF;
}
.question .answers span{
display: inline-block;
width: calc(50% - 5px);
max-width: calc(50% - 5px);
background-color: rgba(255, 255, 255, .5);
color: #FFFFFF;
font-size: 30px;
margin: 5px 5px 0 0;
padding: 5px;
border-radius: 3px;
cursor: pointer;
}
.question .answers span.selected {
animation: select-answer .5s ease;
background-color: #A52A2A;
}
#keyframes select-answer {
0% {
transform: scale(0.95);
}
100% {
transform: scale(1);
}
}
.question .next-question {
margin-top: 15px;
padding-right: 5px;
text-align: right;
}
.question .next-btn {
background-color: #F0F8FF;
border: none;
padding: 3px 20px;
border-radius: 3px;
font-size: 1.5em;
color: #FFFFFF;
cursor: pointer;
transition: all .5s ease;
}
.question .next-btn:hover {
outline: none;
background-color: #A52A2A;
}
.question .next-btn[disabled] {
opacity: .6;
cursor: no-drop;
}
.question .back-btn {
background-color: #F0F8FF;
border: none;
padding: 3px 20px;
border-radius: 3px;
font-size: 1.5em;
color: #FFFFFF;
cursor: pointer;
transition: all .5s ease;
}
.question .back-btn:hover {
outline: none;
background-color: #A52A2A;
}
.question .back-btn[disabled] {
opacity: .6;
cursor: no-drop;
}
.slide-fade-enter-active {
transition: all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.slide-fade-leave-active {
transition: all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.slide-fade-enter {
transform: translateY(-40%);
opacity: 0;
}
.slide-fade-leave-to {
transform: translateY(40%);
opacity: 0;
}
.status {
font-size: 0.8em;
margin: 3px auto 0;
text-align: center;
padding: 5px;
border-radius: 2px;
color: rgba(255, 255, 255, .5);
transition: color .3s ease;
}
.result{
max-width: 560px;
overflow: hidden;
text-align: center;
position: absolute;
top: -50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
padding: 15px;
border-radius: 5px;
background-color: #fff;
transition: all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.result.active {
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
.result svg {
position: absolute;
opacity: 0.15
}
.result .success {
position: absolute;
top: -10px;
left: 10px;
width: calc(100% - 20px);
height: 100%;
opacity: 0.1;
}
.result h2 {
font-family: 'Bad Script', cursive;
font-weight: 400;
text-align: center;
}
.result h1 {
font-size: 2.3em;
font-weight: 400;
margin-bottom: -10px;
}
.result button {
position: absolute;
bottom: 5px;
background-color: transparent;
border-radius: 5px;
color: #FFFFFF;
cursor: pointer;
font-size: 10px;
transition: box-shadow .2s ease;
}
.result button.close {
right: 10px;
padding: 0 15px;
color: #A52A2A;
font-size: 25px;
}
.result button.show-wrong-ones {
left: 10px;
padding: 5px;
color: #A52A2A;
font-size: 20px;
}
.result button:hover {
box-shadow: 4px 6px 15px 1px #ddd;
}
.green {
color: #0dcc0d;
}
.red {
color: #d21d0f;
}
.wrong-questions {
width: 80vw;
max-height: 100vh;
text-align: center;
overflow-y: scroll;
padding: 5px;
position: absolute;
top: 150%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
border-radius: 5px;
background-color:#000000;
color:#FFFFFF;
transition: all .4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrong-questions.active {
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
.wrong-questions::-webkit-scrollbar-track {
border-radius: 10px;
}
.wrong-questions::-webkit-scrollbar {
width: 4px;
}
.wrong-questions::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #e6e6e6;
}
.wrong-questions h2 {
font-weight: 100;
margin: 10px 0;
text-align: center;
color: #d21d0f;
}
.wrong-questions .wrong-one {
width: 90%;
text-align: left;
margin: 0 auto;
padding: 3px 7px;
border-bottom: 1px solid #eee;
}
.wrong-questions .wrong-one h3 {
font-weight: 100;
}
.wrong-questions .answers-container {
padding-right: 40px;
}
.wrong-questions .answers-container span {
display: block;
padding: 0 7px;
position: relative;
}
.wrong-questions .answers-container span:after {
position: absolute;
top: 0px;
right: -40px;
font-weight: 100;
font-size: .9em;
}
.wrong-questions .answers-container span.selected {
color: #d21d0f;
}
.wrong-questions .answers-container span.selected:after {
content: "Yours";
}
.wrong-questions .answers-container span.correct {
color: #0dcc0d;
}
.wrong-questions .answers-container span.correct:after {
content: "Correct";
right: -52px;
}
.wrong-questions button {
display: inline-block;
margin-top: 10px;
padding: 3px 10px;
background-color: transparent;
border: none;
outline: none;
border-radius: 5px;
color: #d21d0f;
cursor: pointer;
font-size: 1.05em;
font-family: 'Bad Script', cursive;
transition: box-shadow .2s ease;
}
.wrong-questions button:hover {
box-shadow: 4px 6px 15px 1px #ddd;
}
JsVue2
Vue.component('display-question',{
data: function(){
return{
showWrongQuestion: false,
wrongQuestions: [],
temp: [],
currentQuestion: 0,
answered: 0,
wrongAnswers: 0,
correctAnswers: 0,
questions: [
{
question: 'What is the capital of Ukrain ?',
answer: [
'Kyiv',
' Kabul',
' Buenos Aires',
' Praia'
],
correct_answer: 0,
selected: null,
sense: 0
},
{
question: 'When was Queen Elizabeth II death ?',
answer: [
'11/09/2022',
'08/09/2022',
'12/08/2022',
'07/09/2022'
],
correct_answer: 1,
selected: null,
sense: 0
},
{
question: 'How many bones are there in human body?',
answer: [
'206',
'186',
'209',
'190'
],
correct_answer: 0,
selected: null,
sense: 0
},
{
question: 'Who were the 30th president of ?',
answer: [
'Julia Eileen Gillard',
'John Winston Howard ',
' Scott John Morrison ',
'Anthony Albanese,'
],
correct_answer: 2,
selected: null,
sense: 0
},
{
question: 'What is the biggest continent?',
answer: [
'Oceania',
'Europe',
'Asia',
'Africa'
],
correct_answer: 2,
selected: null,
sense: 0
}
],
}},
methods: {
//select answer function
selectAnswer: function(a) {
var choice = a.currentTarget,
backBtn = document.querySelector('.back-btn'),
answers = document.querySelectorAll('.answers span'),
nextBtn = document.querySelector('.next-btn');
answers.forEach(answer => {
answer.classList.contains('selected') ? answer.classList.remove('selected') : '';
});
choice.classList.add('selected');
this.questions[this.currentQuestion].selected = choice.dataset.index;
nextBtn.removeAttribute('disabled');
backBtn.removeAttribute('disabled');
//Back button function
},
backBtn:function () {
var backbutton = this.$el.querySelector('.back-btn'),
answers = this.$el.querySelectorAll('.answers span'),
questionsLength = this.questions.length,
result = this.$el.querySelector('.result'),
question = this.$el.querySelector('.question');
if(!backbutton.hasAttribute('disabled') && this.currentQuestion >= (this.currentQuestion -1)) {
this.currentQuestion--;
answers.forEach(answer => {
answer.classList.contains('selected') ? answer.classList.remove('selected') : '';
})
}
else if(this.currentQuestion >= (questionsLength -1)) {
this.questions.forEach( (question) => {
if(question.selected == question.correct_answer && question.sense ==0) {
this.correctAnswers++;
question.sense = 1;
} else if(question.selected != question.correct_answer && question.sense ==0) {
this.wrongAnswers++;
question.sense = 1;
let temp = {};
temp.answers = question.answers;
temp.question = question.question;
temp.correct_answer = question.correct_answer;
temp.selected = question.selected;
this.wrongQuestions.push(temp);
}
});
result.classList.add('active');
question.classList.add('blur');
}
},
//Next button Function
nextBtn: function() {
var nextbutton = this.$el.querySelector('.next-btn'),
answers = this.$el.querySelectorAll('.answers span'),
questionsLength = this.questions.length,
result = this.$el.querySelector('.result'),
question = this.$el.querySelector('.question');
if(!nextbutton.hasAttribute('disabled') && this.currentQuestion < (questionsLength -1)) {
this.currentQuestion++;
answers.forEach(answer => {
answer.classList.contains('selected') ? answer.classList.remove('selected') : '';
}),
nextbutton.setAttribute('disabled', '');
}
else if(this.currentQuestion >= (questionsLength -1)) {
this.questions.forEach( (question) => {
if(question.selected == question.correct_answer && question.sense ==0) {
this.correctAnswers++;
question.sense = 1;
} else if(question.selected != question.correct_answer && question.sense ==0) {
this.wrongAnswers++;
question.sense = 1;
let temp = {};
temp.answers = question.answers;
temp.question = question.question;
temp.correct_answer = question.correct_answer;
temp.selected = question.selected;
this.wrongQuestions.push(temp);
}
});
result.classList.add('active');
question.classList.add('blur');
}
},
//calculate result
calculateResult: (questions) => {
var correct;
for(var i=0; i< questions.length; i++) {
this.questions[i].selected == questions[i].correct ? correct++ : '';
}
return (correct / questions.length) * 100;
},
//wrong answer button
wrongAnswersBtn: function() {
result.classList.remove('active');
wrongQuestions.classList.add('active');
},
//close result
Closeresult:function(){
var question = this.$el.querySelector('.question'),
result = this.$el.querySelector('.result');
result.classList.remove('active');
question.classList.remove('blur');
},
showMyResults: function(){
result.classList.add('active');
wrongQuestions.classList.remove('active');
},
},
template: '<div><div class="user-role"><div class="question current"><transition name="slide-fade" mode="out-in"><div :key="questions[currentQuestion].question" :class="{deactivate: answered == questions.length}"><h2>{{questions[currentQuestion].question }}</h2><div class="answers"><span v-for="(answer, index) in questions[currentQuestion].answer" :key="index" v-bind:data-index="index" #click="selectAnswer">{{ answer }}</span></div> <button class="back-btn" v-on:click="backBtn">Back</button> <button class="next-btn" disabled v-on:click="nextBtn">{{ currentQuestion < (questions.length -1) ? "Next" : "Result!" }}</button></div></transition></div><div class="result"><div class="success"></div><h2>Your score is:</h2><h1 :class="[(Number(((correctAnswers / questions.length) *100)).toFixed(2) >= 50)]">{{ Number(((correctAnswers / questions.length) *100)).toFixed(2) }}%</h1><small><b>{{ correctAnswers }}</b>Correct, <b>{{ wrongAnswers }}</b>Wrong</small> <button class=closeresult v-on:click="Closeresult">Close</button> <button class="show-wrong-ones"v-show= "wrongAnswers > 0"#click="showWrongQuestion = true">Wrong answers</button></div></div><div class="wrong-questions"><h2 v-if="wrongQuestions.length > 1">Your wrong Questions</h2> <div class="wrong-one" v-for="question in wrongQuestions"> <h3>{{ question.question }}</h3><div class="answers-container"></div></div> </div> </div>',
})
var test1 = new Vue({
el: "#app1",
data: {
},
});
if I understood correctly -
you need to move your question to a computed propery.
in the data section -
data(){
return{
currentQuestionIndex:0
}
}
in the computed section -
computed:{
currentQuestion(){
return this.questions[this.currentQuestionIndex];
}
}
now, every time the data property currentQuestionIndex will be changed, the computed property currentQuestion will be changed.
Hope its hopeful.
I have created a carousel, with dummy images. But when I am trying to embed video in it, it goes blank and throws no error at all. How can I add the video link inside the carousel so that on click of it, it gets opened up in an iframe.
I tried replacing the img tag with video tag and created separate div too but that also seem to be not working
const galleryContainer = document.querySelector('.gallery-container');
const galleryControlsContainer = document.querySelector('.gallery-controls');
const galleryControls = ['previous', 'next'];
const galleryItems = document.querySelectorAll('.gallery-item');
class Carousel {
constructor(container, items, controls) {
this.carouselContainer = container;
this.carouselControls = controls;
this.carouselArray = [...items];
}
// Update css classes for gallery
updateGallery() {
this.carouselArray.forEach(el => {
el.classList.remove('gallery-item-1');
el.classList.remove('gallery-item-2');
el.classList.remove('gallery-item-3');
el.classList.remove('gallery-item-4');
el.classList.remove('gallery-item-5');
});
this.carouselArray.slice(0, 5).forEach((el, i) => {
el.classList.add(`gallery-item-${i + 1}`);
});
}
// Update the current order of the carouselArray and gallery
setCurrentState(direction) {
if (direction.className == 'gallery-controls-previous') {
this.carouselArray.unshift(this.carouselArray.pop());
} else {
this.carouselArray.push(this.carouselArray.shift());
}
this.updateGallery();
}
setControls() {
this.carouselControls.forEach(control => {
galleryControlsContainer.appendChild(document.createElement('button')).className = `gallery-controls-${control}`;
document.querySelector(`.gallery-controls-${control}`).innerText = control;
});
}
useControls() {
const triggers = [...galleryControlsContainer.childNodes];
triggers.forEach(control => {
control.addEventListener('click', e => {
e.preventDefault();
if (control.className == 'gallery-controls-add') {
const newItem = document.createElement('img');
const latestItem = this.carouselArray.length;
const latestIndex = this.carouselArray.findIndex(item => item.getAttribute('data-index') == this.carouselArray.length) + 1;
this.carouselArray.splice(latestIndex, 0, newItem);
document.querySelector(`[data-index="${latestItem}"]`).after(newItem);
this.updateGallery();
} else {
this.setCurrentState(control);
}
});
});
}
}
function callfunc() {
console.log("this func is being caled")
}
const exampleCarousel = new Carousel(galleryContainer, galleryItems, galleryControls);
exampleCarousel.setControls();
// exampleCarousel.setNav();
exampleCarousel.useControls();
.gallery {
width: 100%;
}
.gallery-container {
align-items: center;
display: flex;
height: 400px;
margin: 0 auto;
max-width: 1000px;
position: relative;
}
.gallery-item {
height: 150px;
opacity: 0;
position: absolute;
transition: all 0.3s ease-in-out;
width: 150px;
z-index: 0;
}
.gallery-item-1 {
left: 15%;
opacity: .4;
transform: translateX(-50%);
}
.gallery-item-2,
.gallery-item-4 {
height: 200px;
opacity: 1;
width: 200px;
z-index: 1;
}
.gallery-item-2 {
left: 30%;
transform: translateX(-50%);
}
.gallery-item-3 {
box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
height: 300px;
opacity: 1;
left: 50%;
transform: translateX(-50%);
width: 300px;
z-index: 2;
}
.gallery-item-4 {
left: 70%;
transform: translateX(-50%);
}
.gallery-item-5 {
left: 85%;
opacity: .4;
transform: translateX(-50%);
}
.gallery-controls {
display: flex;
justify-content: center;
margin: 30px 0;
}
.gallery-controls button {
background-color: transparent;
border: 0;
cursor: pointer;
font-size: 16px;
margin: 0 20px;
padding: 0 12px;
text-transform: capitalize;
}
.gallery-controls button:focus {
outline: none;
}
.gallery-controls-previous {
position: relative;
}
.gallery-controls-previous::before {
border: solid #000;
border-width: 0 2px 2px 0;
content: '';
display: inline-block;
height: 4px;
left: -10px;
padding: 2px;
position: absolute;
top: 0;
transform: rotate(135deg) translateY(-50%);
transition: left 0.15s ease-in-out;
width: 4px;
}
.gallery-controls-previous:hover::before {
left: -18px;
}
.gallery-controls-next {
position: relative;
}
.gallery-controls-next::before {
border: solid #000;
border-width: 0 2px 2px 0;
content: '';
display: inline-block;
height: 4px;
padding: 2px;
position: absolute;
right: -10px;
top: 50%;
transform: rotate(-45deg) translateY(-50%);
transition: right 0.15s ease-in-out;
width: 4px;
}
.gallery-controls-next:hover::before {
right: -18px;
}
.gallery-nav {
bottom: -15px;
display: flex;
justify-content: center;
list-style: none;
padding: 0;
position: absolute;
width: 100%;
}
.gallery-nav li {
background: #ccc;
border-radius: 50%;
height: 10px;
margin: 0 16px;
width: 10px;
}
.gallery-nav li.gallery-item-selected {
background: #555;
}
<div class="gallery">
<div class="gallery-container">
<img class="gallery-item gallery-item-1" onclick="callfunc()" src="http://fakeimg.pl/300/" data-index="1">
<img class="gallery-item gallery-item-2" src="http://fakeimg.pl/300/" data-index="2">
<img class="gallery-item gallery-item-3" src="http://fakeimg.pl/300/" data-index="3">
<img class="gallery-item gallery-item-4" src="http://fakeimg.pl/300/" data-index="4">
<img class="gallery-item gallery-item-5" src="http://fakeimg.pl/300/" data-index="5">
</div>
<div class="gallery-controls"></div>
</div>
You can just add the video as a gallery item.
If you want an image that shows the video in a modal on click, you can set a data attribute with the video url and on click send it to a hidden modal and show it.
const galleryContainer = document.querySelector('.gallery-container');
const galleryControlsContainer = document.querySelector('.gallery-controls');
const galleryControls = ['previous', 'next'];
const galleryItems = document.querySelectorAll('.gallery-item');
class Carousel {
constructor(container, items, controls) {
this.carouselContainer = container;
this.carouselControls = controls;
this.carouselArray = [...items];
}
// Update css classes for gallery
updateGallery() {
this.carouselArray.forEach(el => {
el.classList.remove('gallery-item-1');
el.classList.remove('gallery-item-2');
el.classList.remove('gallery-item-3');
el.classList.remove('gallery-item-4');
el.classList.remove('gallery-item-5');
});
this.carouselArray.slice(0, 5).forEach((el, i) => {
el.classList.add(`gallery-item-${i + 1}`);
});
}
// Update the current order of the carouselArray and gallery
setCurrentState(direction) {
if (direction.className == 'gallery-controls-previous') {
this.carouselArray.unshift(this.carouselArray.pop());
} else {
this.carouselArray.push(this.carouselArray.shift());
}
this.updateGallery();
}
setControls() {
this.carouselControls.forEach(control => {
galleryControlsContainer.appendChild(document.createElement('button')).className = `gallery-controls-${control}`;
document.querySelector(`.gallery-controls-${control}`).innerText = control;
});
}
useControls() {
const triggers = [...galleryControlsContainer.childNodes];
triggers.forEach(control => {
control.addEventListener('click', e => {
e.preventDefault();
if (control.className == 'gallery-controls-add') {
const newItem = document.createElement('img');
const latestItem = this.carouselArray.length;
const latestIndex = this.carouselArray.findIndex(item => item.getAttribute('data-index') == this.carouselArray.length) + 1;
this.carouselArray.splice(latestIndex, 0, newItem);
document.querySelector(`[data-index="${latestItem}"]`).after(newItem);
this.updateGallery();
} else {
this.setCurrentState(control);
}
});
});
}
}
function callfunc() {
console.log("this func is being caled")
}
const exampleCarousel = new Carousel(galleryContainer, galleryItems, galleryControls);
exampleCarousel.setControls();
// exampleCarousel.setNav();
exampleCarousel.useControls();
.gallery {
width: 100%;
}
.gallery-container {
align-items: center;
display: flex;
height: 400px;
margin: 0 auto;
max-width: 1000px;
position: relative;
}
.gallery-item {
height: 150px;
opacity: 0;
position: absolute;
transition: all 0.3s ease-in-out;
width: 150px;
z-index: 0;
}
.gallery-item-1 {
left: 15%;
opacity: .4;
transform: translateX(-50%);
}
.gallery-item-2,
.gallery-item-4 {
height: 200px;
opacity: 1;
width: 200px;
z-index: 1;
}
.gallery-item-2 {
left: 30%;
transform: translateX(-50%);
}
.gallery-item-3 {
box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
height: 300px;
opacity: 1;
left: 50%;
transform: translateX(-50%);
width: 300px;
z-index: 2;
}
.gallery-item-4 {
left: 70%;
transform: translateX(-50%);
}
.gallery-item-5 {
left: 85%;
opacity: .4;
transform: translateX(-50%);
}
.gallery-controls {
display: flex;
justify-content: center;
margin: 30px 0;
}
.gallery-controls button {
background-color: transparent;
border: 0;
cursor: pointer;
font-size: 16px;
margin: 0 20px;
padding: 0 12px;
text-transform: capitalize;
}
.gallery-controls button:focus {
outline: none;
}
.gallery-controls-previous {
position: relative;
}
.gallery-controls-previous::before {
border: solid #000;
border-width: 0 2px 2px 0;
content: '';
display: inline-block;
height: 4px;
left: -10px;
padding: 2px;
position: absolute;
top: 0;
transform: rotate(135deg) translateY(-50%);
transition: left 0.15s ease-in-out;
width: 4px;
}
.gallery-controls-previous:hover::before {
left: -18px;
}
.gallery-controls-next {
position: relative;
}
.gallery-controls-next::before {
border: solid #000;
border-width: 0 2px 2px 0;
content: '';
display: inline-block;
height: 4px;
padding: 2px;
position: absolute;
right: -10px;
top: 50%;
transform: rotate(-45deg) translateY(-50%);
transition: right 0.15s ease-in-out;
width: 4px;
}
.gallery-controls-next:hover::before {
right: -18px;
}
.gallery-nav {
bottom: -15px;
display: flex;
justify-content: center;
list-style: none;
padding: 0;
position: absolute;
width: 100%;
}
.gallery-nav li {
background: #ccc;
border-radius: 50%;
height: 10px;
margin: 0 16px;
width: 10px;
}
.gallery-nav li.gallery-item-selected {
background: #555;
}
<div class="gallery">
<div class="gallery-container">
<img class="gallery-item gallery-item-1" onclick="callfunc()" src="http://fakeimg.pl/300/" data-index="1">
<video class="gallery-item gallery-item-2" data-index="2" width="320" height="240" controls>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<img class="gallery-item gallery-item-3" src="http://fakeimg.pl/300/" data-index="3">
<img class="gallery-item gallery-item-4" src="http://fakeimg.pl/300/" data-index="4">
<img class="gallery-item gallery-item-5" src="http://fakeimg.pl/300/" data-index="5">
</div>
<div class="gallery-controls"></div>
</div>
;
(function($) {
class Popup {
constructor(options, elem) {
var self = this;
var defaultPopupMenu = `<div>
<i id="faInfo" class="fa fa-info"></i>
<i id="faQuest" class="fa fa-question"></i>
<i id="faLink" class="fa fa-external-link"></i>
</div>`;
this.defaultOptions = {
content: defaultPopupMenu, //this option MUST be set when new options passed through, or only the default menu will show
position: "top", //where the popup will show by default- top. Other options: right, bottom, or left
theme: "popupTheme", //Menu Element theme. Defaults to popupTheme, but custom class can be set instead
style: "", //Popup Menu Style. Default no style, will revert to default colours. Other options: Blue, Red, Green, Custom
animation: "standard", //Standard animation by default. Other options: flip, grow, bounce
event: "click", //Default set to "click", can also be set to hover
hideOnClick: true, //When true, clicking off the menu closes it. When false, only clicking on the menu closes it
zIndex: 100, //Individual z-index can be set for each menu for layering if necessary
//function to handle actions when clicking on popup menu icons. MUST be set when options are passed through or an error or default menu actions will occur
popItemClick: function(globalthis) {
//Default actions
var twentyEightSpaces = `
`;
var twentyFourSpaces = `
`;
var eightSpaces = ` `;
var sixteenSpaces = `
`;
var content;
var container = $(event.target).attr("id");
switch (container) {
case "faInfo":
content = {
type: "info",
heading: "Information",
text: `<p>To set a new menu when calling .popup() on an element,
you must set a variable that holds a string with the html for that menu, then
pass that variable through as the "content" part of the options. For example: </p>
<p>var myMenu = '<div>\ <br />
${twentyEightSpaces}<a href="#''><i id="faInfo" class="fa fa-info"></i></a>\<br />
${twentyFourSpaces}</div>'; </p>
<p>would create a menu with one item, and just add more '<a>' tags with icons inside the '<div>' tags to add more menu items. </p>
<p>Then add it to the content when calling the popup: </p>
<p>$("#myPopUp").popup({ <br />
${eightSpaces}content: myMenu, <br />
${eightSpaces}popItemClick(globalthis) { <br />
${sixteenSpaces}...new actions here... <br />
${eightSpaces}} <br />
});</p>
<p>You must set new actions in the "popItemClick" function for your menu
in the options you pass or it will throw an error.</p>`
}
globalthis.alertBox(content);
break;
case "faQuest":
content = {
type: "info",
heading: "Question",
text: `<p>Why is this being shown?</p>
<p>Because you need to set a popup menu of your own (and the popItemClick() function) or you get this default menu.</p>
<p>If you set the popup menu but don't change the popItemClick() function, you will get an error.</p>
<p>Click the "i" button for more info.</p>`
}
globalthis.alertBox(content);
break;
case "faLink":
window.open("http://example.com/");
break;
default:
content = {
type: "danger",
heading: "Error",
text: `<p>Error! You have set a new menu without changing the 'popItemClick' function.
The 'popItemClick' function must be set to new menu actions.</p>`
}
globalthis.alertBox(content);
}
}
}
this.elem = elem;
this.$elem = $(elem);
this.options = $.extend({}, this.defaultOptions, options);
if (!this.$elem.hasClass(this.options.theme)) {
this.$elem.addClass(this.options.theme);
}
this.init();
}
init() {
this.popup = $('<div class="pop-cont" />')
.addClass('pop-' + this.options.position)
.addClass('popupTheme' + this.options.style)
.append('<div class="pop-items" />')
.appendTo('body').css("opacity", 0).hide();
this.setContent();
this.setTriggers();
}
setContent() {
var self = this;
var location = this.popup.find(".pop-items");
var content;
if ((this.options.position == 'top') || (this.options.position == 'bottom')) {
content = $(this.options.content).find("a").addClass("pop-item");
location.html(content);
this.popup.find("i").first().addClass("leftBorder");
this.popup.find("i").last().addClass("rightBorder");
} else if ((this.options.position == 'left') || (this.options.position == 'right')) {
content = $(this.options.content).find("a").addClass("pop-item").addClass('item-side');
location.html(content);
this.popup.find("i").first().addClass("topBorder");
this.popup.find("i").last().addClass("bottomBorder");
}
//popItemClick callback****************************************
location.find('.pop-item').on('click', function(event) {
event.preventDefault();
self.options.popItemClick.call(this, self);
});
}
setTriggers() {
var self = this;
if (this.options.event === 'click') {
this.$elem.on('click', function(event) {
event.preventDefault();
if (self.$elem.hasClass('pressed')) {
self.pophide();
} else {
self.popshow();
}
});
}
if (this.options.event === 'hover') {
this.$elem.on('mouseenter', function(event) {
setTimeout(function() {
self.popshow();
self.popup = $(self.popup[0]);
}, 250);
});
$(this.popup).on('mouseleave', function(event) {
setTimeout(function() {
self.pophide();
}, 1000);
});
}
if (this.options.hideOnClick === true) {
$('html').on('click.popup', function(event) {
if (event.target != self.elem && self.$elem.has(event.target).length === 0 &&
self.popup.has(event.target).length === 0 && self.popup.is(":visible")) {
self.pophide();
}
});
}
}
pophide() {
var self = this;
var animation = {
opacity: 0
};
this.$elem.removeClass('pressed');
switch (this.options.position) {
case 'top':
animation.top = '+=20';
break;
case 'left':
animation.left = '+=20';
break;
case 'right':
animation.left = '-=20';
break;
case 'bottom':
animation.top = '-=20';
break;
}
this.popup.animate(animation, 200, function() {
self.popup.hide();
});
}
popshow() {
this.$elem.addClass('pressed');
this.setPosition();
this.popup.show().css({
opacity: 1
}).addClass('animate-' + this.options.animation);
}
setPosition() {
var self = this;
this.coords = this.$elem.offset();
var x = this.coords.left;
var y = this.coords.top;
var popWidth = this.popup.width();
var popHeight = this.popup.height();
var adjLeft = popWidth / 2;
var adjTop = popHeight / 2;
this.testy = $('<div class="test" />')
.css({
display: 'inline-block',
margin: '0px',
padding: '0px'
})
.appendTo('body');
var measure = this.$elem.clone().css({
padding: "0px",
margin: "0px"
});
var loc = this.testy;
loc.html(measure);
var textWidth = this.testy.width();
var textHeight = this.testy.height();
this.testy.remove();
var adjMenuWidth = textWidth / 2;
var adjMenuHeight = textHeight / 2;
var up = y - (popHeight + 7);
var down = y + textHeight;
if (this.popup.hasClass('pop-top')) {
this.popup.css({
top: up + "px",
left: (x - adjLeft + adjMenuWidth + 5) + "px",
right: "auto",
'z-index': this.options.zIndex
});
}
if (this.popup.hasClass('pop-bottom')) {
this.popup.css({
top: (down + 7) + "px",
left: (x - adjLeft + adjMenuWidth + 5) + "px",
right: "auto",
'z-index': this.options.zIndex
});
}
if (this.popup.hasClass('pop-left')) {
this.popup.css({
top: (y - adjTop + adjMenuHeight + 5) + "px",
left: (x - popWidth - 2) + "px",
right: "auto",
'z-index': this.options.zIndex
});
}
if (this.popup.hasClass('pop-right')) {
this.popup.css({
top: (y - adjTop + adjMenuHeight + 5) + "px",
left: (x + textWidth + 12) + "px",
right: "auto",
'z-index': this.options.zIndex
});
}
}
alertBox(content) {
var self = this;
var myAlert = `<div id="alertBox" class="alert">
<div class="alert-content">
<div class="alert-header">
<h2></h2>
</div>
<div class="alert-body"></div>
<div class="alert-footer">
<button class="alert-close">OK</button>
</div>
</div>
</div>`;
$('body').append(myAlert);
this.alert = $('#alertBox');
this.header = this.alert.find('div.alert-header');
this.heading = this.header.find('h2');
this.alertBody = this.alert.find('div.alert-body');
this.footer = this.alert.find('div.alert-footer');
this.close = this.footer.find('button.alert-close');
this.heading.append(content.heading);
this.alertBody.append(content.text);
switch (content.type) {
case "info":
this.header.addClass("info");
this.footer.addClass("info");
this.close.addClass("info");
break;
case "success":
this.header.addClass("success");
this.footer.addClass("success");
this.close.addClass("success");
break;
case "danger":
this.header.addClass("danger");
this.footer.addClass("danger");
this.close.addClass("danger");
break;
case "warning":
this.header.addClass("warning");
this.footer.addClass("warning");
this.close.addClass("warning");
break;
default:
break;
}
this.alert.show();
var closeBtn = $("button.alert-close");
closeBtn.on("click", function() {
self.alert.remove();
});
$(document).on("click", function(event) {
event.preventDefault();
if (event.target == self.alert[0]) {
self.alert.remove();
}
});
}
};
//Set $.fn.popup so it returns an instance of the Popup class when called*******************************
$.fn.popup = function(options) {
return this.each(function() {
var popobject = new Popup(options, this);
});
};
}(jQuery));
/*jshint multistr: true */
//this is a sample .js file that shows how you might set up the popup menus
;
(function($) {
$(document).ready(function() {
$('#defaultTest').popup();
});
}(jQuery));
/*Default theme**************/
.popupTheme {
background-color: #333;
background-size: 100% 100%;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 0;
position: relative;
box-shadow: 5px 5px 3px #888;
z-index: 1;
float: left;
margin: 5px;
cursor: pointer;
}
.popupTheme i,
.popupThemeRed i,
.popupThemeBlue i,
.popupThemeGreen i,
.popupThemeCustom i {
width: 20px;
height: 20px;
font-size: 18px;
color: #fff;
display: block;
background-color: transparent;
padding: 10px;
background-size: 100% 100%;
cursor: pointer;
}
.popupTheme i:hover {
background-color: #4d4d4d;
}
.pop-cont.pop-top::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -7px;
border-width: 7px;
border-style: solid;
border-color: #333 transparent transparent transparent;
z-index: 100;
}
.pop-cont.pop-bottom::before {
content: "";
position: absolute;
top: -14px;
left: 50%;
margin-left: -7px;
border-width: 7px;
border-style: solid;
border-color: transparent transparent #333 transparent;
z-index: 100;
}
.pop-cont.pop-left::after {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -7px;
border-width: 7px;
border-style: solid;
border-color: transparent transparent transparent #333;
z-index: 100;
}
.pop-cont.pop-right::before {
content: "";
position: absolute;
top: 50%;
left: -14px;
margin-top: -7px;
border-width: 7px;
border-style: solid;
border-color: transparent #333 transparent transparent;
z-index: 100;
}
.pop-cont {
margin: auto;
position: relative;
display: block;
cursor: pointer;
border-radius: 6px;
box-shadow: 5px 5px 3px #888;
}
.pop-cont,
.pop-item,
.popupTheme {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
/*Individual menu item*/
.pop-item {
height: 100%;
display: block;
width: 20px;
height: 20px;
text-align: center;
padding: 10px;
text-decoration: none;
float: left;
}
.item-side {
float: none !important;
}
.pop-item i {
margin: -10px 0 0 -10px;
}
.pop-top {
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
}
.pop-bottom {
position: absolute;
top: 0;
left: 50%;
margin-left: -5px;
}
.pop-left {
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
margin-top: -7px;
}
.pop-right {
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
margin-top: -7px;
}
.animate-standard {
animation: animateStandard 0.3s 1 ease;
-webkit-animation: animateStandard 0.3s 1 ease;
}
#-webkit-keyframes animateStandard {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0px);
opacity: 1;
}
}
#keyframes animateStandard {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0px);
opacity: 1;
}
}
.animate-grow {
animation: animateGrow 0.4s 1 ease;
-webkit-animation: animateGrow 0.4s 1 ease;
}
#-webkit-keyframes animateGrow {
0% {
transform: scale(0) translateY(40px);
opacity: 0;
}
70% {
transform: scale(1.5) translate(0px);
}
100% {
transform: scale(1) translate(0px);
opacity: 1;
}
}
#keyframes animateGrow {
0% {
transform: scale(0) translateY(40px);
opacity: 0;
}
70% {
transform: scale(1.5) translate(0px);
}
100% {
transform: scale(1) translate(0px);
opacity: 1;
}
}
.animate-flip {
animation: animateFlip 0.4s 1 ease;
-webkit-animation: animateFlip 0.4s 1 ease;
}
#-webkit-keyframes animateFlip {
from {
transform: rotate3d(2, 2, 2, 180deg);
opacity: 0;
}
to {
transform: rotate3d(0, 0, 0, 0deg);
opacity: 1;
}
}
#keyframes animateFlip {
from {
transform: rotate3d(2, 2, 2, 180deg);
opacity: 0;
}
to {
transform: rotate3d(0, 0, 0, 0deg);
opacity: 1;
}
}
.leftBorder {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.rightBorder {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.bottomBorder {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.topBorder {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.hidden {
display: none !important;
}
.clear {
clear: both;
}
/* The Alert Box (background) */
.alert {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1001;
/* Sit on top */
padding-top: 250px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.8);
/* Black w/ opacity */
}
.alert-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
border-radius: 6px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s;
max-width: 700px;
min-width: 300px;
/*width settings for different browsers. Note that these won't work at all for IE and versions of Edge before v79*/
width: fit-content;
/*works in chrome and opera*/
width: -moz-fit-content;
/*works for firefox */
width: -webkit-fit-content;
/*works for Edge v79 and up*/
width: -ms-fit-content;
width: -o-fit-content;
}
#-webkit-keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
#keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
.alert-header,
.alert-header.info {
padding: 2px 16px;
background-color: #02baf2;
color: #fff;
border-radius: 5px 5px 0px 0px;
text-align: center;
}
.alert-header.success {
background-color: #00cc1b;
}
.alert-header.danger {
background-color: #ff0000;
}
.alert-header.warning {
background-color: #f7931e;
}
.alert-body {
padding: 2px 16px;
text-align: left;
font-size: 18px;
font-weight: bold;
color: #000;
min-height: 40px;
}
.alert-footer,
.alert-footer.info {
padding: 15px 16px;
background-color: #02baf2;
color: #fff;
border-radius: 0px 0px 5px 5px;
text-align: center;
}
.alert-footer.success {
background-color: #00cc1b;
}
.alert-footer.danger {
background-color: #ff0000;
}
.alert-footer.warning {
background-color: #f7931e;
}
.alert-close,
.alert-close.info {
padding: 5px 15px;
border-radius: 3px;
border: 0;
background-color: #fff;
color: #02baf2;
font-weight: bold;
box-shadow: 5px 5px 10px #666;
}
.alert-close.success {
color: #00cc1b;
}
.alert-close.danger {
color: #ff0000;
}
.alert-close.warning {
color: #f7931e;
}
.alert-close:hover {
color: #000;
text-decoration: none;
cursor: pointer;
}
.alert-close:focus {
outline: none;
}
body {
font-family: Helvetica, sans-serif;
}
.displayBox {
background-color: #efefef;
padding: 0px 0px 30px 0px;
display: inline-block;
width: 100%;
}
.header {
text-align: center;
font-size: 12px;
border-bottom: 1px solid #fff;
width: 100%;
color: #fff;
background-color: #130e5a;
}
.header h1 {
margin: 0px;
padding: 5px 0px;
}
div.icon-box-top {
margin: 50px 0px 25px 0px;
display: block;
float: left;
clear: both;
}
div.icon-box {
margin: 25px 0px 25px 0px;
display: block;
float: left;
clear: both;
}
p.icon-text,
p.menuText {
display: block;
margin-left: 45px;
margin-bottom: 0px;
float: left;
}
p.menuText {
margin-left: 20px !important;
margin-top: 0px;
}
.textPopup {
/*When attaching popups to text menus, style text menu separately*/
display: block;
font-size: 28px;
font-weight: bold;
color: #130e5a;
margin: 0px 0px 0px 75px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
cursor: pointer;
float: left;
z-index: 1;
}
p.textPopup.pressed {
color: #02baf2 !important;
}
div#myPopUp,
div#myPopUp2,
div#myPopUp3,
div#myPopUp4 {
margin-left: 75px;
display: inline-block;
}
i.swIcon {
font-size: 208px !important;
margin: 10px;
}
text-decoration: none;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="icon-box-top">
<div id="defaultTest" style="margin-left: 75px">
<i class="fa fa-cog leftBorder rightBorder"></i>
</div>
</div>
I have an example I'm working from which works fine. When I duplicate that code in my app, the icon looks too small and off center.
Here is how it is supposed to look, per example:
Here is how it looks when I enter the same code:
It is smaller and the cog is off center.
Here is the example's html:
<div class="icon-box-top">
<div id="defaultTest" style="margin-left: 75px">
<i class="fa fa-cog leftBorder rightBorder"></i>
</div>
</div>
Here is my html:
<div class="icon-box-top">
<div id="defaultTest" style="margin-left: 75px">
<i class="fa fa-cog leftBorder rightBorder"></i>
</div>
</div>
Here are the example's dependencies:
<link rel="stylesheet" type="text/css" href="styles/Popup-plugin.css">
<link rel="stylesheet" type="text/css" href="styles/Example.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <!-- necessary for the "draggable" ui -->
<script src="scripts/Popup-plugin.js"></script>
<script src="scripts/Example.js"></script>
Here are my dependencies:
<link rel="stylesheet" type="text/css" href="css/Popup-plugin.css">
<link rel="stylesheet" type="text/css" href="css/Example.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <!-- necessary for the "draggable" ui -->
<script src="js/Popup-plugin.js"></script>
<script src="js/Example.js"></script>
The only difference that I can see is he stores his javascript in scripts folder and mine is in js folder. And he stores his css in styles folder whereas mine is in css folder.
The javascript is the same too:
$('#defaultTest').popup();
Any ideas?
I finally found the problem. There was a bootstrap css library that was interfering with the Popup-plugin css. But now my bootstrap tabs don't work and I'll have to spend additional time looking at different versions of it, or replacing the tabs with something else. I figured there was a css conflict somewhere but it took me all day to find it. This has happened to me before and it is a painful and time-consuming process to isolate the problem and fix it. If anyone has suggestions of tools or techniques for speeding up this process, please leave comments below for everyone reading this to benefit.
Hello I'm trying to use translate Y (100%) in a child element
so that it is exactly below the total height of the parent element
but this is not happening:
I need my options box to be exactly below the total height of the parent element
something like that:
In this photo above the box is exactly below the box that shows the option currently active and in my example for some reason I can't do that.
const data = [
{
id: 1,
name: "SIMPLES NACIONAL – MEI",
funcionarioIncrease: 49.99,
maxFuncionario: 1,
socioIncrease: 0,
maxSocio: 5,
FATURAMENTO: [
{
name: "ATÉ 30.000,00",
value: 49.99,
},
{
name: "De 30.001,00 a 50.000,00 ",
value: 99.99,
},
],
},
{
id: 2,
name: "SIMPLES NACIONAL – SERVIÇOS",
funcionarioIncrease: 25,
maxFuncionario: 3,
socioIncrease: 25,
maxSocio: 5,
FATURAMENTO: [
{
name: "ATÉ 30.000,00",
value: 149.99,
},
{
name: "De 30.001,00 a 50.000,00 ",
value: 199.99,
},
],
},
];
function createInput(id, value) {
var inputRadio = document.createElement("input");
if (id && value) {
inputRadio.id = value;
inputRadio.name = "category";
inputRadio.type = "radio";
inputRadio.value = value;
inputRadio.classList.add("radio");
return inputRadio;
}
return null;
}
function createOptions() {
const container = document.querySelector(".options-container");
data.forEach((value) => {
const optionDiv = document.createElement("div");
optionDiv.classList.add("option");
container.append(optionDiv);
const input = createInput(value.name, value.id);
if (!input) {
return null;
}
optionDiv.append(input);
var label = document.createElement("label");
label.htmlFor = value.id;
label.innerHTML = value.name;
optionDiv.append(label);
});
}
function initalize() {
createOptions();
const selected = document.querySelector(".selected");
const optionsContainer = document.querySelector(".options-container");
const optionsList = document.querySelectorAll(".option");
selected.addEventListener("click", () => {
optionsContainer.classList.toggle("active");
});
optionsList.forEach((o) => {
o.addEventListener("click", () => {
let input = o.querySelector("input").id;
selected.innerHTML = o.querySelector("label").innerHTML;
selected.setAttribute("data-value", input);
optionsContainer.classList.remove("active");
});
});
}
initalize();
.select-box {
display: flex;
width: 100%;
max-height: 50px;
flex-direction: column;
position: relative;
z-index: 2;
}
.select-box .options-container {
background: #2f3640;
color: #f5f6fa;
max-height: 0;
width: 100%;
opacity: 0;
transition: all 0.4s;
border-radius: 8px;
overflow: hidden;
position: absolute;
order: 1;
transform: translateY(100%);
z-index: 2;
}
.selected {
background: #2f3640;
border-radius: 8px;
margin-bottom: 8px;
color: #f5f6fa;
position: relative;
order: 0;
}
.selected::after {
content: "";
background: url("img/arrow-down.svg");
background-size: contain;
background-repeat: no-repeat;
position: absolute;
height: 100%;
width: 32px;
right: 10px;
top: 5px;
transition: all 0.4s;
}
.select-box .options-container.active {
max-height: 240px;
opacity: 1;
overflow-y: scroll;
}
.select-box .options-container.active + .selected::after {
transform: rotateX(180deg);
top: -6px;
}
.select-box .options-container::-webkit-scrollbar {
width: 8px;
background: #0d141f;
border-radius: 0 8px 8px 0;
}
.select-box .options-container::-webkit-scrollbar-thumb {
background: #525861;
border-radius: 0 8px 8px 0;
}
.select-box .option,
.selected {
padding: 12px 24px;
cursor: pointer;
}
.select-box .option:hover {
background: #414b57;
}
.select-box label {
cursor: pointer;
color: white;
}
.select-box .option .radio {
display: none;
}
<div class="inputs_container">
<div class="service_mode flex">
<div class="select-box">
<div class="options-container"></div>
<div class="selected">
Select Video Category
</div>
</div>
</div>
</div>
Just add top position as 100% and remove translate.
const data = [
{
id: 1,
name: "SIMPLES NACIONAL – MEI",
funcionarioIncrease: 49.99,
maxFuncionario: 1,
socioIncrease: 0,
maxSocio: 5,
FATURAMENTO: [
{
name: "ATÉ 30.000,00",
value: 49.99,
},
{
name: "De 30.001,00 a 50.000,00 ",
value: 99.99,
},
],
},
{
id: 2,
name: "SIMPLES NACIONAL – SERVIÇOS",
funcionarioIncrease: 25,
maxFuncionario: 3,
socioIncrease: 25,
maxSocio: 5,
FATURAMENTO: [
{
name: "ATÉ 30.000,00",
value: 149.99,
},
{
name: "De 30.001,00 a 50.000,00 ",
value: 199.99,
},
],
},
];
function createInput(id, value) {
var inputRadio = document.createElement("input");
if (id && value) {
inputRadio.id = value;
inputRadio.name = "category";
inputRadio.type = "radio";
inputRadio.value = value;
inputRadio.classList.add("radio");
return inputRadio;
}
return null;
}
function createOptions() {
const container = document.querySelector(".options-container");
data.forEach((value) => {
const optionDiv = document.createElement("div");
optionDiv.classList.add("option");
container.append(optionDiv);
const input = createInput(value.name, value.id);
if (!input) {
return null;
}
optionDiv.append(input);
var label = document.createElement("label");
label.htmlFor = value.id;
label.innerHTML = value.name;
optionDiv.append(label);
});
}
function initalize() {
createOptions();
const selected = document.querySelector(".selected");
const optionsContainer = document.querySelector(".options-container");
const optionsList = document.querySelectorAll(".option");
selected.addEventListener("click", () => {
optionsContainer.classList.toggle("active");
});
optionsList.forEach((o) => {
o.addEventListener("click", () => {
let input = o.querySelector("input").id;
selected.innerHTML = o.querySelector("label").innerHTML;
selected.setAttribute("data-value", input);
optionsContainer.classList.remove("active");
});
});
}
initalize();
.select-box {
display: flex;
width: 100%;
max-height: 50px;
flex-direction: column;
position: relative;
z-index: 2;
}
.select-box .options-container {
background: #2f3640;
color: #f5f6fa;
max-height: 0;
width: 100%;
opacity: 0;
transition: all 0.4s;
border-radius: 8px;
overflow: hidden;
position: absolute;
top:100%;
order: 1;
z-index: 2;
}
.selected {
background: #2f3640;
border-radius: 8px;
margin-bottom: 8px;
color: #f5f6fa;
position: relative;
order: 0;
}
.selected::after {
content: "";
background: url("img/arrow-down.svg");
background-size: contain;
background-repeat: no-repeat;
position: absolute;
height: 100%;
width: 32px;
right: 10px;
top: 5px;
transition: all 0.4s;
}
.select-box .options-container.active {
max-height: 240px;
opacity: 1;
overflow-y: scroll;
}
.select-box .options-container.active + .selected::after {
transform: rotateX(180deg);
top: -6px;
}
.select-box .options-container::-webkit-scrollbar {
width: 8px;
background: #0d141f;
border-radius: 0 8px 8px 0;
}
.select-box .options-container::-webkit-scrollbar-thumb {
background: #525861;
border-radius: 0 8px 8px 0;
}
.select-box .option,
.selected {
padding: 12px 24px;
cursor: pointer;
}
.select-box .option:hover {
background: #414b57;
}
.select-box label {
cursor: pointer;
color: white;
}
.select-box .option .radio {
display: none;
}
<div class="inputs_container">
<div class="service_mode flex">
<div class="select-box">
<div class="options-container"></div>
<div class="selected">
Select Video Category
</div>
</div>
</div>
</div>
I'm trying to figure out the best way of adding a time counter to my memory game. The game consists of a lot of squares and if the user has figured out and won the game, a modal pops up and tells the user that they have won and offers to reset the game to start over.
I want to add the time the user spent playing the game. Since they have opened the page it should count the time from 0 to x seconds, and later when the user finishes the game, it echo's the score on the modal, so the user can see their score. But if someone did not complete the quiz in x seconds, a function runs that opens modal, but this time echo's that person has run out of time and offers to start over.
I'm using a small remake of this game on codepen
HTML:
<div class="modal-overlay">
<div class="modal">
<h2 class="winner">You Rock!</h2>
<button class="restart">Play Again?</button>
<p class="message">Developed on CodePen by Nate Wiley</p>
<p class="share-text">Share it?</p>
<ul class="social">
<li><a target="_blank" class="twitter" href="http://twitter.com/share?url=http://codepen.io/natewiley/pen/HBrbL"><span class="brandico-twitter-bird"></span></a></li>
<li><a target="_blank" class="facebook" href="http://www.facebook.com/sharer.php?u=http://codepen.io/natewiley/pen/HBrbL"><span class="brandico-facebook"></span></a></li>
<li><a target="_blank" class="google" href="https://plus.google.com/share?url=http://codepen.io/natewiley/pen/HBrbL"><span class="brandico-googleplus-rect"></span></a></li>
</ul>
</div>
</div>
All logos are property of their respective owners, No Copyright infringement intended.
The CSS part:
#import url(http://weloveiconfonts.com/api/?family=brandico);
/* brandico */
[class*="brandico-"]:before {
font-family: 'brandico', sans-serif;
}
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
background: black;
min-height: 100%;
font-family: "Arial", sans-serif;
}
.wrap {
position: relative;
height: 100%;
min-height: 500px;
padding-bottom: 20px;
}
.game {
transform-style: preserve-3d;
perspective: 500px;
min-height: 100%;
height: 100%;
}
#mixin width($max){
#media (max-width: $max){
#content;
}
}
#keyframes matchAnim {
0% {
background: #bcffcc;
}
100% {
background: white;
}
}
.card {
float: left;
width: 16.66666%;
height: 25%;
padding: 5px;
text-align: center;
display: block;
perspective: 500px;
position: relative;
cursor: pointer;
z-index: 50;
-webkit-tap-highlight-color: rgba(0,0,0,0);
#include width(800px){
width: 25%;
height: 16.666%;
}
.inside {
width: 100%;
height: 100%;
display: block;
transform-style: preserve-3d;
transition: .4s ease-in-out;
background: white;
&.picked, &.matched {
transform: rotateY(180deg);
}
&.matched {
animation: 1s matchAnim ease-in-out;
animation-delay: .4s;
}
}
.front, .back {
border: 1px solid black;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 20px;
img {
max-width: 100%;
display: block;
margin: 0 auto;
max-height: 100%;
}
}
.front {
transform: rotateY(-180deg);
#include width(800px){
padding: 5px;
}
}
.back{
#include width(800px){
padding: 10px;
}
}
}
.modal-overlay {
display: none;
background: rgba(0,0,0,.8);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.modal {
display: none;
position: relative;
width: 500px;
height: 400px;
max-height: 90%;
max-width: 90%;
min-height: 380px;
margin: 0 auto;
background: white;
top: 50%;
transform: translateY(-50%);
padding: 30px 10px;
.winner {
font-size: 80px;
text-align: center;
font-family: "Anton", sans-serif;
color: #4d4d4d;
text-shadow: 0px 3px 0 black;
#include width(480px){
font-size: 60px;
}
}
.restart {
font-family: "Anton", sans-serif;
margin: 30px auto;
padding: 20px 30px;
display: block;
font-size: 30px;
border: none;
background: #4d4d4d;
background: linear-gradient(#4d4d4d, #222);
border: 1px solid #222;
border-radius: 5px;
color: white;
text-shadow: 0px 1px 0 black;
cursor: pointer;
&:hover {
background: linear-gradient(#222, black);
}
}
.message {
text-align: center;
a {
text-decoration: none;
color: #28afe6;
font-weight: bold;
&:hover {
$c: lighten(#28afe6, 10%);
color: $c;
border-bottom: 1px dotted $c;
}
}
}
.share-text {
text-align: center;
margin: 10px auto;
}
.social {
margin: 20px auto;
text-align: center;
li {
display: inline-block;
height: 50px;
width: 50px;
margin-right: 10px;
&:last-child {
margin-right: 0;
}
a {
display: block;
line-height: 50px;
font-size: 20px;
color: white;
text-decoration: none;
border-radius: 5px;
&.facebook {
background: #3b5998;
&:hover {
background: lighten(#3b5998, 10%);
}
}
&.google {
background: #D34836;
&:hover {
background: lighten(#D34836, 10%);
}
}
&.twitter {
background: #4099FF;
&:hover {
background: lighten(#4099FF, 10%);
}
}
}
}
}
}
footer {
height: 20px;
position: absolute;
bottom: 0;
width: 100%;
z-index: 0;
.disclaimer {
line-height: 20px;
font-size: 12px;
color: #727272;
text-align: center;
#include width(767px){
font-size: 8px;
}
}
}
And js:
(function(){
var Memory = {
init: function(cards){
this.$game = $(".game");
this.$modal = $(".modal");
this.$overlay = $(".modal-overlay");
this.$restartButton = $("button.restart");
this.cardsArray = $.merge(cards, cards);
this.shuffleCards(this.cardsArray);
this.setup();
},
shuffleCards: function(cardsArray){
this.$cards = $(this.shuffle(this.cardsArray));
},
setup: function(){
this.html = this.buildHTML();
this.$game.html(this.html);
this.$memoryCards = $(".card");
this.binding();
this.paused = false;
this.guess = null;
},
binding: function(){
this.$memoryCards.on("click", this.cardClicked);
this.$restartButton.on("click", $.proxy(this.reset, this));
},
// kinda messy but hey
cardClicked: function(){
var _ = Memory;
var $card = $(this);
if(!_.paused && !$card.find(".inside").hasClass("matched") && !$card.find(".inside").hasClass("picked")){
$card.find(".inside").addClass("picked");
if(!_.guess){
_.guess = $(this).attr("data-id");
} else if(_.guess == $(this).attr("data-id") && !$(this).hasClass("picked")){
$(".picked").addClass("matched");
_.guess = null;
} else {
_.guess = null;
_.paused = true;
setTimeout(function(){
$(".picked").removeClass("picked");
Memory.paused = false;
}, 600);
}
if($(".matched").length == $(".card").length){
_.win();
}
}
},
win: function(){
this.paused = true;
setTimeout(function(){
Memory.showModal();
Memory.$game.fadeOut();
}, 1000);
},
showModal: function(){
this.$overlay.show();
this.$modal.fadeIn("slow");
},
hideModal: function(){
this.$overlay.hide();
this.$modal.hide();
},
reset: function(){
this.hideModal();
this.shuffleCards(this.cardsArray);
this.setup();
this.$game.show("slow");
},
// Fisher--Yates Algorithm -- http://bost.ocks.org/mike/shuffle/
shuffle: function(array){
var counter = array.length, temp, index;
// While there are elements in the array
while (counter > 0) {
// Pick a random index
index = Math.floor(Math.random() * counter);
// Decrease counter by 1
counter--;
// And swap the last element with it
temp = array[counter];
array[counter] = array[index];
array[index] = temp;
}
return array;
},
buildHTML: function(){
var frag = '';
this.$cards.each(function(k, v){
frag += '<div class="card" data-id="'+ v.id +'"><div class="inside">\
<div class="front"><img src="'+ v.img +'"\
alt="'+ v.name +'" /></div>\
<div class="back"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/codepen-logo.png"\
alt="Codepen" /></div></div>\
</div>';
});
return frag;
}
};
var cards = [
{
name: "php",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/php-logo_1.png",
id: 1,
},
{
name: "css3",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/css3-logo.png",
id: 2
},
{
name: "html5",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/html5-logo.png",
id: 3
},
{
name: "jquery",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/jquery-logo.png",
id: 4
},
{
name: "javascript",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/js-logo.png",
id: 5
},
{
name: "node",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/nodejs-logo.png",
id: 6
},
{
name: "photoshop",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/photoshop-logo.png",
id: 7
},
{
name: "python",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/python-logo.png",
id: 8
},
{
name: "rails",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/rails-logo.png",
id: 9
},
{
name: "sass",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/sass-logo.png",
id: 10
},
{
name: "sublime",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/sublime-logo.png",
id: 11
},
{
name: "wordpress",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/wordpress-logo.png",
id: 12
},
];
Memory.init(cards);
})();
You can accomplish a timer functionality with using setTimeout recursively or setInterval like so:
(function () {
var timeContainer = document.getElementById("timer-value");
var startButton = document.getElementById("start-game");
var timer = 0;
var maxTime = 30;
var timeout = null;
function count () {
timeout = setTimeout(function () {
if (timer < maxTime) {
timer++;
timeContainer.innerText = timer;
count();
}
else {
alert("Time's up!");
startButton.style.display = "inline-block";
}
}, 1000);
}
function endGame () {
clearTimeout(timeout);
startButton.style.display = "inline-block";
alert("You completed the game in time!");
}
function startGame () {
if (timeout) { clearTimeout(timeout); }
timer = 0;
timeContainer.innerText = timer;
this.style.display = "none";
count();
}
document.getElementById("start-game").addEventListener("click", startGame);
document.getElementById("end-game").addEventListener("click", endGame);
})();
<h3>Timer: <span id="timer-value">0</span></h3>
<button id="start-game">Start Game</button> <button id="end-game">End Game</button>