We Keep Coding

Draggable Widgets not overlapping

I am having issues with configuring my CSS to work accordingly with the JavaScript for the draggable widgets.
For example per testing, when placing a 2x2 widget inside of the dropzone, the 1x2 widget drops down (outside of the dropzone) instead of overlapping.
Placing a dropzone highlight for the 2x2 widget is also outside of the dropzone.
As for the 1x1 widgets, a CSS code that will work accordingly has not been made.
var sizeOfOptions = 0;
function onDragStart2x4(event) {
event
.dataTransfer
.setData('text/plain', event.target.id);
if (sizeOfOptions <= 0) {
document.getElementsByClassName("s2x4")[0].hidden = false;
document.getElementsByClassName("s2x4")[0].style.borderColor = "black";
}
}
function onDragStart2x2(event) {
event
.dataTransfer
.setData('text/plain', event.target.id);
if (sizeOfOptions <= 4) {
if (document.getElementById("s1x2topleft").innerHTML == "" &&
document.getElementById("s1x2botleft").innerHTML == "") {
document.getElementById("s2x2left").hidden = false;
}
if (document.getElementById("s1x2topright").innerHTML == "" &&
document.getElementById("s1x2botright").innerHTML == "") {
document.getElementById("s2x2right").hidden = false;
}
}
}
function onDragStart1x2(event) {
event
.dataTransfer
.setData('text/plain', event.target.id);
if (sizeOfOptions <= 6) {
if (document.getElementById("s2x2left").innerHTML === "") {
document.getElementById("s1x2topleft").style.visibility = "visible";
document.getElementById("s1x2botleft").style.visibility = "visible";
}
if (document.getElementById("s2x2right").innerHTML === "") {
document.getElementById("s1x2topright").style.visibility = "visible";
document.getElementById("s1x2botright").style.visibility = "visible";
}
}
}
function onDragStart1x1(event) {
event
.dataTransfer
.setData('text/plain', event.target.id);
if (sizeOfOptions <= 7) {
if (document.getElementById("s2x2left").innerHTML === "") {
if (document.getElementById("s1x2topleft").innerHTML == "") {
document.getElementById("s1x1topleft").style.visibility = "visible";
document.getElementById("s1x1topmidleft").style.visibility = "visible";
}
if (document.getElementById("s1x2botleft").innerHTML == "") {
document.getElementById("s1x1botmidleft").style.visibility = "visible";
document.getElementById("s1x1botleft").style.visibility = "visible";
}
} {
if (document.getElementById("s2x2right").innerHTML === "") {
if (document.getElementById("s1x2topright").innerHTML == "") {
document.getElementById("s1x1topright").style.visibility = "visible";
document.getElementById("s1x1topmidright").style.visibility = "visible";
}
if (document.getElementById("s1x2botright").innerHTML == "") {
document.getElementById("s1x1botmidright").style.visibility = "visible";
document.getElementById("s1x1botright").style.visibility = "visible";
}
}
}
}
}
function onDragOver(event) {
event.preventDefault();
}
function onDragEnd2x4(event) { // expresion? === if(expresion), after ? === then, after : === else
document.getElementsByClassName("s2x4")[0].innerHTML == "" ?
document.getElementsByClassName("s2x4")[0].hidden = true :
document.getElementsByClassName("s2x4")[0].hidden = false;
}
function onDragEnd2x2(event) {
let divs = document.getElementsByClassName("s2x2");
if (divs[0].innerHTML == "") {
divs[0].hidden = true;
}
if (divs[1].innerHTML == "") {
divs[1].hidden = true;
}
}
function onDragEnd1x2(event) {
let divs = document.getElementsByClassName("s1x2");
if (divs[0].innerHTML == "") {
divs[0].style.visibility = "hidden";
}
if (divs[1].innerHTML == "") {
divs[1].style.visibility = "hidden";
}
if (divs[2].innerHTML == "") {
divs[2].style.visibility = "hidden";
}
if (divs[3].innerHTML == "") {
divs[3].style.visibility = "hidden";
}
}
function onDragEnd1x1(event) {
let divs = document.getElementsByClassName("s1x1");
if (divs[0].innerHTML == "") {
divs[0].style.visibility = "hidden";
}
if (divs[1].innerHTML == "") {
divs[1].style.visibility = "hidden";
}
if (divs[2].innerHTML == "") {
divs[2].style.visibility = "hidden";
}
if (divs[3].innerHTML == "") {
divs[3].style.visibility = "hidden";
}
if (divs[4].innerHTML == "") {
divs[4].style.visibility = "hidden";
}
if (divs[5].innerHTML == "") {
divs[5].style.visibility = "hidden";
}
if (divs[6].innerHTML == "") {
divs[6].style.visibility = "hidden";
}
if (divs[7].innerHTML == "") {
divs[7].style.visibility = "hidden";
}
}
function onDrop2x4(event) {
console.log("Drop options = ", sizeOfOptions);
const id = event
.dataTransfer
.getData('text');
const draggableElement = document.getElementById(id);
if (draggableElement.classList.contains("widget-2x4") && sizeOfOptions <= 0) {
draggableElement.classList.add("size2x4");
const dropzone = event.target;
if (dropzone.innerHTML == "") {
sizeOfOptions += 8;
dropzone.appendChild(draggableElement);;
console.log(dropzone.innerHTML)
event.dataTransfer.clearData();
} else
alert("Each dropzone can only contain 1 widget.");
}
}
function onDrop2x2(event) {
console.log("Drop options = ", sizeOfOptions);
const id = event
.dataTransfer
.getData('text');
const draggableElement = document.getElementById(id);
if (draggableElement.classList.contains("widget-2x2") && sizeOfOptions <= 4) {
draggableElement.classList.add("size2x2");
const dropzone = event.target;
if (dropzone.innerHTML == "") {
sizeOfOptions += 4;
dropzone.appendChild(draggableElement);;
console.log(dropzone.innerHTML)
event.dataTransfer.clearData();
} else
alert("Each dropzone can only contain 1 widget.");
}
}
function onDrop1x2(event) {
console.log("Drop options = ", sizeOfOptions);
const id = event
.dataTransfer
.getData('text');
const draggableElement = document.getElementById(id);
if (draggableElement.classList.contains("widget-1x2") && sizeOfOptions <= 6) {
draggableElement.classList.add("size1x2");
const dropzone = event.target;
if (dropzone.innerHTML == "") {
sizeOfOptions += 2;
dropzone.appendChild(draggableElement);;
console.log(dropzone.innerHTML)
event.dataTransfer.clearData();
} else
alert("Each dropzone can only contain 1 widget.");
}
}
function onDrop1x1(event) {
console.log("Drop options = ", sizeOfOptions);
const id = event
.dataTransfer
.getData('text');
const draggableElement = document.getElementById(id);
if (draggableElement.classList.contains("widget-1x1") && sizeOfOptions <= 7) {
draggableElement.classList.add("size1x1");
const dropzone = event.target;
if (dropzone.innerHTML == "") {
sizeOfOptions += 1;
dropzone.appendChild(draggableElement);;
console.log(dropzone.innerHTML)
event.dataTransfer.clearData();
} else
alert("Each dropzone can only contain 1 widget.");
}
}
.draggable-widgets {
width: 800px;
height: 100px;
margin: auto;
margin-bottom: 40px;
overflow: auto;
white-space: nowrap;
}
.draggable-widgets ul {
margin: auto;
}
.draggable-widgets li {
display: inline-block;
}
.dropzone {
height: 320px;
width: 800px;
}
.divclass {
background-color: mediumpurple;
width: 800px;
height: 320px;
border: 1px black solid;
}
.widget-2x4 {
width: 70px;
height: 70px;
background-color: mediumpurple;
border: 5px black solid;
}
.widget-2x2 {
width: 70px;
height: 70px;
background-color: mediumpurple;
border: 5px black solid;
}
.widget-1x2 {
width: 70px;
height: 70px;
background-color: mediumpurple;
border: 5px black solid;
}
.widget-1x1 {
width: 70px;
height: 70px;
background-color: mediumpurple;
border: 5px black solid;
}
.box2 {
width: 190px;
height: 150px;
}
.box3 {
width: 800px;
height: 320px;
background-color: white;
}
.s2x4 {
position: relative;
margin: 10px;
border: 1px black solid;
width: 780px;
height: 300px;
}
.size2x4 {
position: relative;
background-color: mediumpurple;
border: 1px black solid;
width: 780px;
height: 300px;
}
#s2x2left {
margin: 10px;
border: 1px black solid;
width: 380px;
height: 300px;
}
#s2x2right {
margin: 10px;
border: 1px black solid;
width: 380px;
height: 300px;
}
.size2x2 {
background-color: mediumpurple;
border: 1px black solid;
width: 380px;
height: 300px;
float: left;
}
#s1x2topleft {
display: inline-block;
visibility: hidden;
border: 1px black solid;
margin: 10px;
width: 380px;
height: 140px;
}
#s1x2topright {
display: inline-block;
position: relative;
visibility: hidden;
border: 1px black solid;
margin: 10px;
width: 380px;
height: 140px;
left: 395px;
bottom: 164px;
}
#s1x2botleft {
display: inline-block;
position: relative;
visibility: hidden;
border: 1px black solid;
margin: 10px;
width: 380px;
height: 140px;
bottom: 170px;
}
#s1x2botright {
display: inline-block;
position: relative;
visibility: hidden;
border: 1px black solid;
margin: 10px;
width: 380px;
height: 140px;
bottom: 334px;
left: 395px;
}
.size1x2 {
background-color: mediumpurple;
border: 1px black solid;
width: 380px;
height: 140px;
}
#s1x1topleft {
display: inline-block;
border: 1px black solid;
width: 40px;
height: 40px;
visibility: hidden;
}
#s1x1topmidleft {
display: inline-block;
border: 1px black solid;
width: 40px;
height: 40px;
visibility: hidden;
}
#s1x1topmidright {
display: inline-block;
border: 1px black solid;
width: 40px;
height: 40px;
visibility: hidden;
}
#s1x1topright {
display: inline-block;
border: 1px black solid;
width: 40px;
height: 40px;
visibility: hidden;
}
#s1x1botleft {
display: inline-block;
border: 1px black solid;
width: 40px;
height: 40px;
visibility: hidden;
}
#s1x1botmidleft {
display: inline-block;
border: 1px black solid;
width: 40px;
height: 40px;
visibility: hidden;
}
#s1x1botmidright {
display: inline-block;
border: 1px black solid;
width: 40px;
height: 40px;
visibility: hidden;
}
#s1x1botright {
display: inline-block;
border: 1px black solid;
width: 40px;
height: 40px;
visibility: hidden;
}
.size1x1 {
background-color: mediumpurple;
border: 1px black solid;
width: 40px;
height: 40px;
}
<html>
<head>
<link rel="stylesheet" href="widgets.css">
<script src="config.js"></script>
</head>
<body>
<div class="draggable-widgets">
<!--Widgets Start Here-->
<ul>
<li>
<div id="box2" class="widget-2x4" ondragend="onDragEnd2x4(event)" draggable="true" ondragstart="onDragStart2x4(event);">
<p>2x4</p>
</div>
</li>
<li>
<div id="box1" class="widget-2x2" ondragend="onDragEnd2x2(event)" draggable="true" ondragstart="onDragStart2x2(event);">
<p>2x2</p>
</div>
</li>
<li>
<div id="box1" class="widget-2x2" ondragend="onDragEnd2x2(event)" draggable="true" ondragstart="onDragStart2x2(event);">
<p>2x2</p>
</div>
</li>
<li>
<div id="box4" class="widget-1x2" ondragend="onDragEnd1x2(event)" draggable="true" ondragstart="onDragStart1x2(event);">
<p>1x2</p>
</div>
</li>
<li>
<div id="box4" class="widget-1x2" ondragend="onDragEnd1x2(event)" draggable="true" ondragstart="onDragStart1x2(event);">
<p>1x2</p>
</div>
</li>
<li>
<div id="box4" class="widget-1x2" ondragend="onDragEnd1x2(event)" draggable="true" ondragstart="onDragStart1x2(event);">
<p>1x2</p>
</div>
</li>
<li>
<div id="box4" class="widget-1x2" ondragend="onDragEnd1x2(event)" draggable="true" ondragstart="onDragStart1x2(event);">
<p>1x2</p>
</div>
</li>
<li>
<div id="box5" class="widget-1x1" ondragend="onDragEnd1x1(event)" draggable="true" ondragstart="onDragStart1x1(event);">
<p>1x1</p>
</div>
</li>
<li>
<div id="box5" class="widget-1x1" ondragend="onDragEnd1x1(event)" draggable="true" ondragstart="onDragStart1x1(event);">
<p>1x1</p>
</div>
</li>
<li>
<div id="box5" class="widget-1x1" ondragend="onDragEnd1x1(event)" draggable="true" ondragstart="onDragStart1x1(event);">
<p>1x1</p>
</div>
</li>
<li>
<div id="box5" class="widget-1x1" ondragend="onDragEnd1x1(event)" draggable="true" ondragstart="onDragStart1x1(event);">
<p>1x1</p>
</div>
</li>
<li>
<div id="box5" class="widget-1x1" ondragend="onDragEnd1x1(event)" draggable="true" ondragstart="onDragStart1x1(event);">
<p>1x1</p>
</div>
</li>
<li>
<div id="box5" class="widget-1x1" ondragend="onDragEnd1x1(event)" draggable="true" ondragstart="onDragStart1x1(event);">
<p>1x1</p>
</div>
</li>
<li>
<div id="box5" class="widget-1x1" ondragend="onDragEnd1x1(event)" draggable="true" ondragstart="onDragStart1x1(event);">
<p>1x1</p>
</div>
</li>
<li>
<div id="box5" class="widget-1x1" ondragend="onDragEnd1x1(event)" draggable="true" ondragstart="onDragStart1x1(event);">
<p>1x1</p>
</div>
</li>
</ul>
</div>
<div id="box3" class="divclass box3">
<div id="dropzone-1" class="dropzone">
<!--2x4 START-->
<div class="s2x4" ondragover="onDragOver(event)" ondrop="onDrop2x4(event);" hidden="true"></div>
<!--2x4 END-->
<!--2x2 START-->
<div id="s2x2left" class="s2x2" ondragover="onDragOver(event)" ondrop="onDrop2x2(event);" hidden="true"></div>
<div id="s2x2right" class="s2x2" ondragover="onDragOver(event)" ondrop="onDrop2x2(event);" hidden="true"></div>
<!--2x2 END-->
<!--1x2 START-->
<div id="s1x2topleft" class="s1x2" ondragover="onDragOver(event)" ondrop="onDrop1x2(event);" hidden="true"></div>
<div id="s1x2topright" class="s1x2" ondragover="onDragOver(event)" ondrop="onDrop1x2(event);" hidden="true"></div>
<div id="s1x2botleft" class="s1x2" ondragover="onDragOver(event)" ondrop="onDrop1x2(event);" hidden="true"></div>
<div id="s1x2botright" class="s1x2" ondragover="onDragOver(event)" ondrop="onDrop1x2(event);" hidden="true"></div>
<!--1x2 END-->
<!--1x1 START-->
<div id="s1x1topmidleft" class="s1x1" ondragover="onDragOver(event)" ondrop="onDrop1x1(event);" hidden="true"></div>
<div id="s1x1topmidright" class="s1x1" ondragover="onDragOver(event)" ondrop="onDrop1x1(event);" hidden="true"></div>
<div id="s1x1topleft" class="s1x1" ondragover="onDragOver(event)" ondrop="onDrop1x1(event);" hidden="true"></div>
<div id="s1x1topright" class="s1x1" ondragover="onDragOver(event)" ondrop="onDrop1x1(event);" hidden="true"></div>
<div id="s1x1botleft" class="s1x1" ondragover="onDragOver(event)" ondrop="onDrop1x1(event);" hidden="true"></div>
<div id="s1x1botmidleft" class="s1x1" ondragover="onDragOver(event)" ondrop="onDrop1x1(event);" hidden="true"></div>
<div id="s1x1botmidright" class="s1x1" ondragover="onDragOver(event)" ondrop="onDrop1x1(event);" hidden="true"></div>
<div id="s1x1botright" class="s1x1" ondragover="onDragOver(event)" ondrop="onDrop1x1(event);" hidden="true"></div>
<!--1x1 END-->
</div>
</body>
</html>

Show/hide HTML divs using JavaScript

My HTML code has the following structure:
<a class='card'...<a/>
<div id = "divone" class="card__background" ... </div>
with four respective cards.
When one of the divs with class='card' is clicked. The JavaScript code is supposed to hide the 'class="card__background" inside the other class='card' divs. I already have a script code that doesn't work.
Why would that be?
I am looking to fix my JavaScript code to make it work
function imagechange(divid) {
var x = document.getElementById(divid);
if (x == "divone") {
x.style.display = "block";
divtwo.style.display = 'none';
divthree.style.display = 'none';
divfour.style.display = 'none';
} else if (x == "divtwo";) {
x.style.display = "block";
divone.style.display = 'none';
divthree.style.display = 'none';
divfour.style.display = 'none';
} else if (x == "divthree";) {
x.style.display = "block";
divone.style.display = 'none';
divtwo.style.display = 'none';
divfour.style.display = 'none';
} else {
x.style.display = "block";
divone.style.display = 'none';
divtwo.style.display = 'none';
divthree.style.display = 'none';
}
}
:root {
--background-dark: #2d3548;
--text-light: rgba(255, 255, 255, 0.6);
--text-lighter: rgba(255, 255, 255, 0.9);
--spacing-s: 8px;
--spacing-m: 16px;
--spacing-l: 24px;
--spacing-xl: 32px;
--spacing-xxl: 64px;
--width-container: 1200px;
}
* {
border: 0;
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100%;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
}
body {
height: 100%;
}
.hero-section {
align-items: flex-start;
background-image: linear-gradient(15deg, #0f4667 0%, #2a6973 150%);
display: flex;
min-height: 100%;
justify-content: center;
padding: var(--spacing-xxl) var(--spacing-l);
}
.card-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-column-gap: var(--spacing-l);
grid-row-gap: var(--spacing-l);
max-width: var(--width-container);
width: 100%;
}
#media(min-width: 540px) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
#media(min-width: 960px) {
.card-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.card {
list-style: none;
position: relative;
}
.card:before {
content: '';
display: block;
padding-bottom: 150%;
width: 100%;
}
.card__background {
background-size: cover;
background-position: center;
border-radius: var(--spacing-l);
bottom: 0;
filter: brightness(0.75) saturate(1.2) contrast(0.85);
left: 0;
position: absolute;
right: 0;
top: 0;
transform-origin: center;
trsnsform: scale(1) translateZ(0);
transition: filter 200ms linear, transform 200ms linear;
}
.card:hover .card__background {
transform: scale(1.05) translateZ(0);
}
.card-grid:hover>.card:not(:hover) .card__background {
filter: brightness(0.5) saturate(0) contrast(1.2) blur(20px);
}
.card__content {
left: 0;
padding: var(--spacing-l);
position: absolute;
top: 0;
}
.card__category {
color: var(--text-light);
font-size: 0.9rem;
margin-bottom: var(--spacing-s);
text-transform: uppercase;
}
.card__heading {
color: var(--text-lighter);
font-size: 1.9rem;
text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.2);
line-height: 1.4;
word-spacing: 100vw;
}
<body>
<center>
<h1>My Favorite Things</h1>
<h2>Click on one to get started</h2>
</center>
<section class="hero-section">
<div class="card-grid">
<a class="card" onclick="imagechange('divone')" href="#">
<div id="divone" class="card__background" style="background-image: url(photo-one.jpg)"></div>
<div class="card__content">
<p class="card__category">FAV #1</p>
<h3 class="card__heading">Photo</h3>
</div>
</a>
<a class="card" onclick="imagechange('divtwo')" href="#">
<div id="divtwo" class="card__background" style="background-image: url(photo-two.jpg)"></div>
<div class="card__content">
<p class="card__category">FAV #2</p>
<h3 class="card__heading">Drawing</h3>
</div>
</a>
<a class="card" onclick="imagechange('divthree')" href="#">
<div id="divthree" class="card__background" style="background-image: url(photo-three.jpg)"></div>
<div class="card__content">
<p class="card__category">FAV #3</p>
<h3 class="card__heading">Sports & Lifting</h3>
</div>
</a>
<a class="card" onclick="imagechange('divfour')" href="#">
<div id="divfour" class="card__background" style="background-image: url(photo-four.jpg)"></div>
<div class="card__content">
<p class="card__category">FAV #4</p>
<h3 class="card__heading">Anime & Peaky Blinders</h3>
</div>
</a>
<div>
</section>
</body>

When you use var x = document.getElementById(divid); you are getting an object. So your condition never going to be true.
If you want to check the id just change condition to:
function imagechange(divid) {
const x = document.getElementById(divid)
const id = x.id
if (id === 'divone') {
x.style.display = 'block'
divtwo.style.display = 'none'
divthree.style.display = 'none'
divfour.style.display = 'none'
}
else if (id === 'divtwo') {
x.style.display = 'block'
divone.style.display = 'none'
divthree.style.display = 'none'
divfour.style.display = 'none'
}
else if (id === 'divthree') {
x.style.display = 'block'
divone.style.display = 'none'
divtwo.style.display = 'none'
divfour.style.display = 'none'
}
else {
x.style.display = 'block'
divone.style.display = 'none'
divtwo.style.display = 'none'
divthree.style.display = 'none'
}
}

1 - Please avoid using scripts straight in your HTML, this leads to unorganized code, with a horrible structure, and pessible for maintence.
2 - I deleted the code in the script tags and in place put
<script src="./site.js"></script>
In the same folder. Create a js file correspondent to the name of your html, in this case I used 'site.js'.
3- Use this code in your 'site.js' file.
var cards = ["card1", "card2", "card3", "card4"]
var divs = ["div1", "div2", "div3", "div4"]
cards.forEach(function (card, i){
document.getElementById(card).addEventListener('click', function(){
document.getElementById(divs[i]).style.display = 'block'
for (let j in divs){
if (i != j) document.getElementById(divs[j]).style.display = 'none'
}
})
})
4 - Delete all the onclick="imagechange()" of your card class tags and add id for them.
5 - Your HTML will be like this:
<body>
<center>
<h1>My Favorite Things</h1>
<h2>Click on one to get started</h2>
</center>
<section class="hero-section">
<div class="card-grid">
<a id = "card1" class="card" href="#">
<div id = "div1" class="card__background" style="background-image: url(photo-one.jpg)"></div>
<div class="card__content">
<p class="card__category">FAV #1</p>
<h3 class="card__heading">Photo</h3>
</div>
</a>
<a id = "card2" class="card" href="#">
<div id = "div2" class="card__background" style="background-image: url(photo-two.jpg)"></div>
<div class="card__content">
<p class="card__category">FAV #2</p>
<h3 class="card__heading">Drawing</h3>
</div>
</a>
<a id = "card3" class="card" href="#">
<div id = "div3" class="card__background" style="background-image: url(photo-three.jpg)"></div>
<div class="card__content">
<p class="card__category">FAV #3</p>
<h3 class="card__heading">Sports & Lifting</h3>
</div>
</a>
<a id = "card4" class="card" href="#">
<div id = "div4" class="card__background" style="background-image: url(photo-four.jpg)"></div>
<div class="card__content">
<p class="card__category">FAV #4</p>
<h3 class="card__heading">Anime & Peaky Blinders</h3>
</div>
</a>
<div>
</section>
<script src="./site.js"></script>
</body>

a few listed issues with building a concentration game

I've been at this for a while and can't seem to crack it. I'm a beginner learning to code and I've put myself to the test to build a concentration game. I'm having the following issues;
I only have 11 tiles instead of 16.
I don't have any matching colours
My colours are locking into place when they should only do that when matched with their pair.
I look forward to seeing if someone more advanced can assist.
var resetButton = document.getElementById("reset-button");
var colors= ["square-1" - "square-9"];
for (var i= 0; i < 10; i++){
colors.push("square-" + i);
}
function GameSquare (el, color) {
this.el= el;
this.isOpen = false;
this.isLocked= false;
this.el.addEventListener("click", this, false);
this.setColor(colors);
}
GameSquare.prototype.handleEvent = function(e) {
switch (e.type) {
case "click":
if (this.isOpen || this.isLocked) {
return;
}
this.isOpen = true;
this.el.classList.add('flip');
checkGame(this);
}
}
GameSquare.prototype.reset= function() {
this.isOpen= false;
this.isLocked= false;
this.el.classList.remove('flip');
}
GameSquare.prototype.lock = function() {
this.isLocked = true;
this.isOpen = true;
}
GameSquare.prototype.setColor = function(color) {
this.el.children[0].children[1].classList.remove(this.color);
this.color = color;
this.el.children[0].children[1].classList.add(color);
}
var gameSquares = [];
function random(n) {
return Math.floor(Math.random() * n)
}
function getSomeColors() {
var colorscopy = colors.slice();
var randomColors = [];
for (var i = 0; i < 8; i++) {
var index = random(colorscopy.length);
randomColors.push(colorscopy.splice(index, 1)[0]);
}
return randomColors.concat(randomColors.slice());
}
function setupGame() {
var array = document.getElementsByClassName("game-square");
var randomColors = getSomeColors();
for (var i= 0; i < array.length; i++) {
var index= random(randomColors.length);
var color = randomColors.splice(index, 1)[0];
gameSquares.push(new GameSquare(array[i], color));
}
}
var firstSquare = null;
function checkGame (GameSquare) {
if(firstSquare === null) {
firstSquare = GameSquare;
return
}
if (firstSquare.color === GameSquare.color) {
firstSquare.lock();
GameSquare.lock();
} else {
var a = firstSquare;
var b = GameSquare;
setTimeout(function() {
a.reset();
b.reset();
}, 400);
}
firstSquare = null;
}
function randomizeColors(){
var randomColors= getSomeColors();
gameSquares.forEach(function(GameSquare){
var color = randomColors.splice(random(randomColors.length), 1)[0];
GameSquare.setColor(color);
});
}
function clearGame(){
gameSquares.forEach(function(GameSquare) {
gameSquares.reset();
});
setTimeout(function() {
randomizeColors();
}, 500);
}
setupGame()
* {
padding: 0;
margin: 0;
}
.game-square {
box-sizing: border-box;
border: 1px solid #000;
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
}
.game-square > div {
width: 100%;
height: 200%;
position: absolute;
top: 0;
transition: 400ms;
}
.game-square > div > div {
height: 50%;
}
.game-square > div > div:first-child {
background-color: grey;
}
.flip > div {
top: -100%;
}
.square-0 {
background-color: aqua;
}
.square-1 {
background-color: bisque;
}
.square-2 {
background-color: blue;
}
.square-3 {
background-color: blueviolet;
}
.square-4 {
background-color: brown;
}
.square-5 {
background-color: cadetblue;
}
.square-6 {
background-color: chartreuse;
}
.square-7 {
background-color: chocolate;
}
.square-8 {
background-color: coral;
}
.square-9 {
background-color: teal;
}
#game {
width: 400px;
height: 400px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
border: 1px solid red;
}
#game {
width: 400px;
height: 400px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#reset-button{
position: absolute;
top: 90px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Concentration Game</title>
<link href= "./styles.css" rel="stylesheet" type= "text/css">
</head>
<body>
<div class="container">
<div id="game">
<div class= "game-square">
<div>
<div></div>
<div class= "square-0"></div>
</div>
</div>
<div class= "game-square">
<div>
<div></div>
<div class= "square-1"></div>
</div>
</div>
<div class= "game-square">
<div>
<div></div>
<div class= "square-2"></div>
</div>
</div>
<div class= "game-square">
<div>
<div></div>
<div class= "square-3"></div>
</div>
</div>
<div class= "game-square">
<div>
<div></div>
<div class= "square-4"></div>
</div>
</div>
<div class= "game-square">
<div>
<div></div>
<div class= "square-5"></div>
</div>
</div>
<div class= "game-square">
<div>
<div></div>
<div class= "square-6"></div>
</div>
</div>
<div class= "game-square">
<div>
<div></div>
<div class= "square-7"></div>
</div>
</div>
<div class= "game-square">
<div>
<div></div>
<div class= "square-8"></div>
</div>
</div>
<div class= "game-square">
<div>
<div></div>
<div class= "square-9"></div>
</div>
</div>
<div class= "game-square">
<div>
<div></div>
<div class= "square-0"><div>
</div>
</div>
<div class= "game-square">
<div>
<div></div>
<div class= "square-1"></div>
</div>
</div>
<div class= "game-square">
<div>
<div></div>
<div class= "square-2"></div>
</div>
</div>
<div class= "game-square">
<div>
<div></div>
<div class= "square-3"></div>
</div>
</div>
<div class= "game-square">
<div>
<div></div>
<div class= "square-4"></div>
</div>
</div>
</div>
<button id="reset-button">Reset</button>
</div>
<script src= "./script.js"></script>
</body>
</html>

I made my own implementation with notes; you can compare to see different approach/techniques:
//pick 8 colors
const colors = ["red","blue","green","yellow","orange","purple","brown","pink"];
//double the colors
const double = colors.concat(colors);
//randomize the colors
const matches = [];
for(let i = 0; i < 16; i ++) {
const random = Math.floor(Math.random() * double.length);
matches.push(double.splice(random,1)[0]);
}
//create variable that houses id of comparing square
let compareTo;
//create global click disable
let disable = false;
//on click function
function reveal(e) {
//prevent spam click during comparison
if(disable) return;
//shorten e.target.id to id
const id = e.target.id;
//reveal clicked square
e.target.classList.toggle("hidden");
//remove its onclick
e.target.onclick = null;
//if no squares being compared, store id
if(!compareTo){
compareTo = id;
} else {
//otherwise if square colors match
if(matches[compareTo] === matches[id]){
//reset id reference (keeping both reveal);
compareTo = null;
//win condition
if(!document.getElementsByClassName("hidden").length) setTimeout(()=>alert("YOU WIN!"),0);
} else {
//otherwise prevent spam click during reveal
disable = true;
//and hide both squares, must be in a timeout to be visible
setTimeout(()=> {
e.target.classList.toggle("hidden");
document.getElementById(compareTo).classList.toggle("hidden");
//add onclick back
e.target.onclick = ()=> reveal(event);
document.getElementById(compareTo).onclick = ()=> reveal(event);
//enable clicking
disable = false;
//and erase id reference;
compareTo = null;
},750);
}
}
}
//reference container for iteration
const container = document.getElementById("container");
//iterate squares rather than hard code into html
for(let i = 0; i < 16; i ++){
const square = document.createElement("div");
square.onclick = ()=> reveal(event);
square.classList.add("square");
//add class that hides color
square.classList.add("hidden");
//ids match indexes of color matches
square.setAttribute("id",i);
//assign corresponding color
square.style.backgroundColor = matches[i];
container.append(square);
}
#container {
width: 400px;
height: 400px;
display: flex;
flex-wrap: wrap;
background: blue;
border: 1px solid black;
}
.square {
width: 25%;
height: 25%;
border: 1px solid black;
box-sizing: border-box;
}
.hidden {
background-color: dimgray !important;
}
<div id="container">
</div>

You were very close. I am guessing the material you are reading is only focused on going up to 10 colors. These are the issues that pertain to this:
By looking at your CSS, your .square-X classes only go up to 9. It should go up to 15 (0 index basis)
In your JS, your colors initialization for loop condition is i < 10. It should be i < 16 since you are targeting 16 colors.
Also this particular line var colors = ["square-1" - "square-9"]; is confusing. This is supposed to simply initialize an array but you are assigning it some kind of string value
By fixing these items, the memory game will work as expected. See demo below:
var resetButton = document.getElementById("reset-button");
var colors = [];
for (var i = 0; i < 16; i++) {
colors.push("square-" + i);
}
function GameSquare(el, color) {
this.el = el;
this.isOpen = false;
this.isLocked = false;
this.el.addEventListener("click", this, false);
this.setColor(color);
}
GameSquare.prototype.handleEvent = function(e) {
switch (e.type) {
case "click":
if (this.isOpen || this.isLocked) {
return;
}
this.isOpen = true;
this.el.classList.add('flip');
checkGame(this);
}
}
GameSquare.prototype.reset = function() {
this.isOpen = false;
this.isLocked = false;
this.el.classList.remove('flip');
}
GameSquare.prototype.lock = function() {
this.isLocked = true;
this.isOpen = true;
}
GameSquare.prototype.setColor = function(color) {
this.el.children[0].children[1].classList.remove(this.color);
this.color = color;
this.el.children[0].children[1].classList.add(color);
}
var gameSquares = [];
function random(n) {
return Math.floor(Math.random() * n)
}
function getSomeColors() {
var colorscopy = colors.slice();
var randomColors = [];
for (var i = 0; i < 8; i++) {
var index = random(colorscopy.length);
randomColors.push(colorscopy.splice(index, 1)[0]);
}
return randomColors.concat(randomColors.slice());
}
function setupGame() {
var array = document.getElementsByClassName("game-square");
var randomColors = getSomeColors();
for (var i = 0; i < array.length; i++) {
var index = random(randomColors.length);
var color = randomColors.splice(index, 1)[0];
gameSquares.push(new GameSquare(array[i], color));
}
}
var firstSquare = null;
function checkGame(GameSquare) {
if (firstSquare === null) {
firstSquare = GameSquare;
return
}
if (firstSquare.color === GameSquare.color) {
firstSquare.lock();
GameSquare.lock();
} else {
var a = firstSquare;
var b = GameSquare;
setTimeout(function() {
a.reset();
b.reset();
}, 400);
}
firstSquare = null;
}
function randomizeColors() {
var randomColors = getSomeColors();
gameSquares.forEach(function(GameSquare) {
var color = randomColors.splice(random(randomColors.length), 1)[0];
GameSquare.setColor(color);
});
}
function clearGame() {
gameSquares.forEach(function(GameSquare) {
gameSquares.reset();
});
setTimeout(function() {
randomizeColors();
}, 500);
}
setupGame()
* {
padding: 0;
margin: 0;
}
.game-square {
box-sizing: border-box;
border: 1px solid #000;
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
}
.game-square>div {
width: 100%;
height: 200%;
position: absolute;
top: 0;
transition: 400ms;
}
.game-square>div>div {
height: 50%;
}
.game-square>div>div:first-child {
background-color: grey;
}
.flip>div {
top: -100%;
}
.square-0 {
background-color: aqua;
}
.square-1 {
background-color: bisque;
}
.square-2 {
background-color: blue;
}
.square-3 {
background-color: blueviolet;
}
.square-4 {
background-color: brown;
}
.square-5 {
background-color: cadetblue;
}
.square-6 {
background-color: chartreuse;
}
.square-7 {
background-color: chocolate;
}
.square-8 {
background-color: coral;
}
.square-9 {
background-color: teal;
}
.square-10 {
background-color: hotpink;
}
.square-11 {
background-color: khaki;
}
.square-12 {
background-color: lime;
}
.square-13 {
background-color: turquoise;
}
.square-14 {
background-color: plum;
}
.square-15 {
background-color: red;
}
#game {
width: 400px;
height: 400px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
border: 1px solid red;
}
#game {
width: 400px;
height: 400px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#reset-button {
position: absolute;
top: 90px;
}
<body>
<div class="container">
<div id="game">
<div class="game-square">
<div>
<div></div>
<div class=""></div>
</div>
</div>
<div class="game-square">
<div>
<div></div>
<div class="square"></div>
</div>
</div>
<div class="game-square">
<div>
<div></div>
<div class="square"></div>
</div>
</div>
<div class="game-square">
<div>
<div></div>
<div class="square"></div>
</div>
</div>
<div class="game-square">
<div>
<div></div>
<div class="square"></div>
</div>
</div>
<div class="game-square">
<div>
<div></div>
<div class="square"></div>
</div>
</div>
<div class="game-square">
<div>
<div></div>
<div class="square"></div>
</div>
</div>
<div class="game-square">
<div>
<div></div>
<div class="square"></div>
</div>
</div>
<div class="game-square">
<div>
<div></div>
<div class="square"></div>
</div>
</div>
<div class="game-square">
<div>
<div></div>
<div class="square"></div>
</div>
</div>
<div class="game-square">
<div>
<div></div>
<div class="square"></div>
</div>
</div>
<div class="game-square">
<div>
<div></div>
<div class="square"></div>
</div>
</div>
<div class="game-square">
<div>
<div></div>
<div class="square"></div>
</div>
</div>
<div class="game-square">
<div>
<div></div>
<div class="square"></div>
</div>
</div>
<div class="game-square">
<div>
<div></div>
<div class="square"></div>
</div>
</div>
<div class="game-square">
<div>
<div></div>
<div class="square"></div>
</div>
</div>
</div>
</div>
<button id="reset-button">Reset</button>
</body>

Javascript in need of simplification - collapsible tabs

I've coded some tabs and it seems to work well, although I'm sure I can achieve this with much cleaner code! I'm just not sure how to do that at the moment. I would really appreciate some help with this one.
I'm not sure if its loops I want to use or something completely different?
The way I've done it obviously works but it just seem unnecessary and messy, after this the next step is to add in a transition effect as the tabs come down. I'm not sure if this will even allow me to do that.
function myFunction() {
var a = document.getElementById("results1");
var b = document.getElementById("results2");
var c = document.getElementById("results3");
var d = document.getElementById("title1");
var e = document.getElementById("title2");
var f = document.getElementById("title3");
if (a.style.display === "none") {
a.style.display = "block";
b.style.display = "none";
c.style.display = "none";
d.style.backgroundColor = "#005FAA";
e.style.backgroundColor = "lightgrey";
f.style.backgroundColor = "lightgrey";
}
else {
a.style.display = "none";
d.style.backgroundColor = "lightgrey";
}
}
function myFunction1() {
var a = document.getElementById("results1");
var b = document.getElementById("results2");
var c = document.getElementById("results3");
var d = document.getElementById("title1");
var e = document.getElementById("title2");
var f = document.getElementById("title3");
if (b.style.display === "none") {
a.style.display = "none";
b.style.display = "block";
c.style.display = "none";
d.style.backgroundColor = "lightgrey";
e.style.backgroundColor = "#005FAA";
f.style.backgroundColor = "lightgrey";
}
else {
b.style.display = "none";
e.style.backgroundColor = "lightgrey";
}
}
function myFunction2() {
var a = document.getElementById("results1");
var b = document.getElementById("results2");
var c = document.getElementById("results3");
var d = document.getElementById("title1");
var e = document.getElementById("title2");
var f = document.getElementById("title3");
if (c.style.display === "none") {
a.style.display = "none";
b.style.display = "none";
c.style.display = "block";
d.style.backgroundColor = "lightgrey";
e.style.backgroundColor = "lightgrey";
f.style.backgroundColor = "#005FAA";
}
else {
c.style.display = "none";
f.style.backgroundColor = "lightgrey";
}
}
body{
margin: 10px;}
.title{
background-color:lightgrey;
width: 32%;
float: left;
text-align: center;
text-decoration:none;
color:white;
margin-right: 2%;
padding: 30px;
box-sizing: border-box;
}
.title:last-child{
margin-right:0px;
width:32%;}
.results{
background-color:#005FAA;
float:left;
width: 100%;
color: white;
padding: 30px;
box-sizing: border-box;
}
<div class="container">
<div id="title1" class="title" onclick="myFunction()">
<h4>Item 1</h4>
</div>
<div id="title2" class="title" onclick="myFunction1()">
<h4>Item 2</h4>
</div>
<div id="title3" class="title" onclick="myFunction2()">
<h4>Item 3</h4>
</div>
</div>
<div class="results" id="results1" style="display:none;">Item 1</div>
<div class="results" id="results2" style="display:none">Item 2</div>
<div class="results" id="results3" style="display:none">Item 3</div>

Maybe something like this? You are already using JQuery, so maybe make it modular and use it to help with your transition down effects (you can transition them up too if you'd like).
const tabs = {
animating: false,
toggleResults: function(thatTab) {
const thatResult = $(`[data-title="${thatTab.attr('id')}"]`);
thatTab.toggleClass('activeTab');
thatResult.toggleClass("openedResult");
tabs.animating = true;
thatResult.slideToggle("fast", function() {
tabs.animating = false;
});
},
init: function() {
$(".title").click(function() {
const thatTab = $(this);
const openedResult = $('.openedResult');
const thatTabId = thatTab.attr("id");
const openedResultTitle = openedResult.data('title');
if (!tabs.animating) {
$('.activeTab').removeClass('activeTab');
openedResult.removeClass('openedResult').hide();
if (thatTabId !== openedResultTitle) {
tabs.toggleResults(thatTab);
}
}
});
}
};
$(function() {
tabs.init();
});
body {
margin: 0;
}
.container {
display: flex;
justify-content: space-between;
width: 100%;
}
.title {
background-color: lightgrey;
flex-basis: 32%;
transition: background-color 0ms;
text-align: center;
color: white;
padding: 30px;
box-sizing: border-box;
}
.activeTab {
background-color: #005faa;
transition: background-color 100ms;
}
.results {
background-color: #005faa;
display: none;
width: 100%;
color: white;
padding: 30px;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div id="title1" class="title">
<h4>Item 1</h4>
</div>
<div id="title2" class="title">
<h4>Item 2</h4>
</div>
<div id="title3" class="title">
<h4>Item 3</h4>
</div>
</div>
<div class="results" data-title="title1">Item 1</div>
<div class="results" data-title="title2">Item 2</div>
<div class="results" data-title="title3">Item 3</div>

Try this , you can call same function on all three divs with passing their ids to find the current id.
<!DOCTYPE html>
<style type="text/css">
body{
margin: 10px;}
.title{
background-color:lightgrey;
width: 32%;
float: left;
text-align: center;
text-decoration:none;
color:white;
margin-right: 2%;
padding: 30px;
box-sizing: border-box;
}
.title:last-child{
margin-right:0px;
width:32%;}
.results{
background-color:#005FAA;
float:left;
width: 100%;
color: white;
padding: 30px;
box-sizing: border-box;
}
.active{
display = "block"
}
.inactive{
display : "none"
backgroundColor:"#005FAA"
}
</style>
<div class="container">
<div id="title1" class="title" onclick="ActivateTab(1)">
<h4>Item 1</h4>
</div>
<div id="title2" class="title" onclick="ActivateTab(2)">
<h4>Item 2</h4>
</div>
<div id="title3" class="title" onclick="ActivateTab(3)">
<h4>Item 3</h4>
</div>
<button onclick="ActivateTab(2)">Test</button>
</div>
<div class="results" id="results1" style="display:none;">Item 1</div>
<div class="results" id="results2" style="display:none">Item 2</div>
<div class="results" id="results3" style="display:none">Item 3</div>
<script>
function ActivateTab(id){
let results = document.querySelectorAll(".results")
let titles = document.querySelectorAll(".title")
results.forEach((elementResut,index) =>{
let elementTitle = titles[index];
if(elementResut.id === "results"+id
&& elementResut.style.display === "none")
{
elementResut.style.display = "block";
elementTitle.style.backgroundColor = "#005FAA";
}
else{
elementResut.style.display = "none";
elementTitle.style.backgroundColor = "lightgrey";
}
});
}
</script>

Here is one possible clean-up:
function myFunction(title) {
var results = [...document.getElementsByClassName("results")]
results.forEach(function(r) {
if (title.dataset.for == r.id) {
r.style.display = "block";
} else {
r.style.display = "none";
}
});
var titles = [...document.getElementsByClassName("title")]
titles.forEach(function(t) {
if (t == title) {
t.style.backgroundColor = "#005FAA"
} else {
t.style.backgroundColor = "lightgrey"
}
});
}
body{
margin: 10px;}
.title{
background-color:lightgrey;
width: 32%;
float: left;
text-align: center;
text-decoration:none;
color:white;
margin-right: 2%;
padding: 30px;
box-sizing: border-box;
}
.title:last-child{
margin-right:0px;
width:32%;}
.results{
background-color:#005FAA;
float:left;
width: 100%;
color: white;
padding: 30px;
box-sizing: border-box;
}
<div class="container">
<div id="title1" data-for="results1" class="title" onclick="myFunction(this)">
<h4>Item 1</h4>
</div>
<div id="title2" data-for="results2" class="title" onclick="myFunction(this)">
<h4>Item 2</h4>
</div>
<div id="title3" data-for="results3" class="title" onclick="myFunction(this)">
<h4>Item 3</h4>
</div>
</div>
<div class="results" id="results1" style="display:none;">Item 1</div>
<div class="results" id="results2" style="display:none">Item 2</div>
<div class="results" id="results3" style="display:none">Item 3</div>
I replaced your three functions with one function that accepts a parameter representing the title element. In the event handler, we just pass this to that function. Then in the function, we loop over the things that might have to change (the title and results nodes) testing as we do whether we're working with the matching element or a different one and choosing behavior based on that.
To link the title elements with the results one, I add a data-for attribute to it. There are many other ways this could be done, including using regular expressions to find the basic id (title2 ~> 2, results2 ~> 2 for instance) and matching on those. But this should get you going.
There is more clean-up I would probably do on this, but this should offer significant simplification.
Update
A comment pointed out that the above did not allow for total tab deselection. Given that, it seems better to refactor a bit more and use the shared base id approach. Here is another version written that way:
function myFunction(title) {
var id = title.id.match(/^\D*(\d+)$/)[1]
var hidden = document.getElementById(`results${id}`).style.display !== 'block';
[...document.getElementsByClassName("results")].forEach(function(r) {
r.style.display = "none";
});
[...document.getElementsByClassName("title")].forEach(function(t) {
t.style.backgroundColor = "lightgrey";
});
if (hidden) {
document.getElementById(`results${id}`).style.display = 'block';
document.getElementById(`title${id}`).style.backgroundColor = '#005FAA';
}
}
body{
margin: 10px;}
.title{
background-color:lightgrey;
width: 32%;
float: left;
text-align: center;
text-decoration:none;
color:white;
margin-right: 2%;
padding: 30px;
box-sizing: border-box;
}
.title:last-child{
margin-right:0px;
width:32%;}
.results{
background-color:#005FAA;
float:left;
width: 100%;
color: white;
padding: 30px;
box-sizing: border-box;
}
<div class="container">
<div id="title1" class="title" onclick="myFunction(this)">
<h4>Item 1</h4>
</div>
<div id="title2" class="title" onclick="myFunction(this)">
<h4>Item 2</h4>
</div>
<div id="title3" class="title" onclick="myFunction(this)">
<h4>Item 3</h4>
</div>
</div>
<div class="results" id="results1" style="display:none;">Item 1</div>
<div class="results" id="results2" style="display:none">Item 2</div>
<div class="results" id="results3" style="display:none">Item 3</div>

Simple text slider in jQuery

I need help to do a simple text slider in jQuery or JavaScript.
I need a slider with animation so that the text moves from right to left.
Within my code I have also pagination, where I need highlight which text is active.
This is all of what I have, I need to be very simple.
All answers on the internet are so complicated.
Can someone help me?
.active{
color:red;
}
<div class="buttons">
<button name="prev">Prev</button>
<button name="next">Next</button>
</div>
<div class="content">
<div class="slide">
<p>content od slide</p>
</div>
<div class="slide">
<p>content od slide</p>
</div>
<div class="slide">
<p>content od slide</p>
</div>
</div>
<div class="paginator">
<div class="pagin-tracker">1</div>
<div class="pagin-tracker active">1</div>
<div class="pagin-tracker">1</div>
</div>

You can try this one.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.slider {
}
.slider__wrap {
overflow: hidden;
}
.slide {
width: 100%;
display: inline-block;
text-align: center;
}
.content {
will-change: transform;
white-space: nowrap;
transition: transform 0.3s;
}
</style>
</head>
<body>
<div id="slider" class="slider">
<div class="buttons">
<button name="prev">Prev</button>
<button name="next">Next</button>
</div>
<div class="slider__wrap">
<div class="content" style="transform: translate(-100%);" data-active="1"> <!-- if you need to set initial position to the second slider, or you can use translate(0) to set it to the first slide -->
<div class="slide">
<p>content od slide 1</p>
</div>
<div class="slide">
<p>content od slide 2</p>
</div>
<div class="slide">
<p>content od slide 3</p>
</div>
</div>
</div>
<div class="paginator">
<div class="pagin-tracker">1</div>
<div class="pagin-tracker active">1</div>
<div class="pagin-tracker">1</div>
</div>
</div>
<script>
const slider = document.getElementById('slider');
const sliderWrap = slider.querySelector('.slider__wrap');
const sliderContent = sliderWrap.querySelector('.content');
const sliderButtons = slider.querySelector('.buttons');
const buttonPrev = sliderButtons.querySelector('button[name="prev"]');
const buttonNext = sliderButtons.querySelector('button[name="next"]');
const pages = Array.from(slider.querySelectorAll('.pagin-tracker'));
const pagesCount = pages.length;
const slidesCount = sliderContent.querySelectorAll('.slide').length;
let activeIndex = sliderContent.getAttribute('data-active');
const updatePaginator = () => {
for (let i = 0; i < pagesCount; i++) {
pages[i].classList.remove('active');
}
if (pages[activeIndex]) {
pages[activeIndex].classList.add('active');
}
};
const applyStyle = () => {
sliderContent.setAttribute('data-active', activeIndex);
sliderContent.style.cssText = `transform: translate(-${activeIndex * 100}%);`;
updatePaginator();
};
buttonPrev.addEventListener('click', () => {
if (activeIndex > 0) {
activeIndex--;
applyStyle();
}
}, false);
buttonNext.addEventListener('click', () => {
if (activeIndex < slidesCount - 1) {
activeIndex++;
applyStyle();
}
}, false);
</script>
</body>
</html>

You can use something like this and extend as per you requirement.
https://codepen.io/anon/pen/MqRpKg
HTML
<div class="slide-wrap">
<div class="slide-mask">
<ul class="slide-group">
<li class="slide">this</li>
<li class="slide">is</li>
<li class="slide">a</li>
<li class="slide">simple</li>
<li class="slide">slider</li>
</ul>
</div>
<div class="slider-nav">
<ul></ul>
</div>
</div>
JQuery:
var $slide = $('.slide'),
$slideGroup = $('.slide-group'),
$bullet = $('.bullet')
var slidesTotal = ($slide.length - 1),
current = 0,
isAutoSliding = true;
$bullet.first().addClass('current');
var clickSlide = function() {
//stop auto sliding
window.clearInterval(autoSlide);
isAutoSliding = false;
var slideIndex = $bullet.index($(this));
updateIndex(slideIndex);
};
var updateIndex = function(currentSlide) {
if(isAutoSliding) {
if(current === slidesTotal) {
current = 0;
} else {
current++;
}
} else {
current = currentSlide;
}
$bullet.removeClass('current');
$bullet.eq(current).addClass('current');
transition(current);
};
var transition = function(slidePosition) {
var slidePositionNew = (slidePosition ) * 500;
$slideGroup.animate({
'left': '-' + slidePositionNew + 'px'
});
};
var autoSlide = window.setInterval(updateIndex, 2000);
$( "li.slide" ).each(function( index ) {
$('.slider-nav').append('<span class="bullet">'+index+'</span>');
});
var $bullet = $('.bullet');
$bullet.on( 'click', clickSlide);
CSS
body {
background: rgb(191, 76, 76);
}
/* slider
----------------------*/
.slide-wrap {
margin: 5% auto 0;
width: 540px;
}
.slide-mask {
position: relative;
overflow: hidden;
height: 100px;
}
.slide-group {
position: absolute;
top: 0px;
left: 0;
}
.slide {
display:inline-block;
height: 100px;
width:500px;
font: 100 90px/135px "lato";
font-size: 2em;
color: #fff;
text-align: center;
text-transform: uppercase;
}
/* nav
----------------------*/
.slide-nav {
text-align: center;
border: 1px solid red;
height: 30px;
color: red;
}
.slide-nav ul {
margin: 0;
padding: 0;
}
.slide-nav li {
border: 1px solid red;
width: 100px;
cursor: pointer;
color: red;
}
.slide-nav li.current {
background: rgb(144, 39, 39);
}
.slider-nav {
width: 300px;
text-alignt: center;
margin-left:40%;
}
span.bullet {
display:inline-block;
width: 30px;
cursor: pointer;
}