The-entire-site/app.js

const slide = [
	{ img: "back2.jpg" },
	{ img: "images (2).jpg" },
	{ img: "images (3).jpg" },
	{ img: "images (4).jpg" }
];
let elem = document.getElementById('slideshow-container')
let dot = document.getElementById("dot")
const a = slide.map(value => {
	return `
	 <div class="mySlides">
            <img src="${value.img}" style="width:100%;height:100%">          
        </div>
	`;
})
const b = slide.map((vL, index) => {
	return `
	 <span class="dot" onclick="currentSlide(${index + 1})"></span>
	`;
})
elem.innerHTML = a.join("");
dot.innerHTML = b.join("");
let n = 0;
let slideIndex = 1;

function showSlides(n) {
	let i;
	let slides = document.getElementsByClassName("mySlides");
	let dots = document.getElementsByClassName("dot");
	if (n > slides.length) {
		slideIndex = 1
	}
	if (n < 1) {
		slideIndex = slides.length
	}
	for (i = 0; i < slides.length; i++) {
		slides[i].style.display = "none";
	}
	for (i = 0; i < dots.length; i++) {
		dots[i].className = dots[i].className.replace(" active", "");
	}
	slides[slideIndex - 1].style.display = "block";
	dots[slideIndex - 1].className += " active";
}
showSlides(slideIndex);

function plusSlides(n) {
	showSlides(slideIndex += n);
}

function currentSlide(n) {
	showSlides(slideIndex = n);
}

setInterval(function () {
	n++;
	if (n > slide.length - 1) {
		n = 0;
	}
	showSlides(slideIndex = n);
}, 1500);
const infoUser = [
	{ img: "images (6).jpg", des: "Lorem ipsuLoremssekx eld elk ke dwefnkwfkjn  wifh iowf h ouwaofuupowa hfdhfihedfohiohd fohawih f hbewfoihawfiwehfiyweghfi f iuhe fuh weiu f hip uwe hfiuhwefphiuawfi kem l mecddddd dddddd ddddddd dddddd dddddde ce cec", name: "KEN BILLE", id: "@sajad001184", twitter: "twitter.png" },
	{ img: "hair.jpg", des: "Lorem ipsx as hia uhouasjpo iujasioh casocisajp aremssekx eld elk ke dwefnkwfkjn  wifh iowf h ouwaofuupowaremssekx eld elk ke dwefnkwfkjn  wifh iowf h ouwaofuupowaremssekx eld elk ke dwefnkwfkjn  wifh iowf h ouwaofuupowasjisouijias jpjj xaosuLoremssekx eld elk ke d kem l mece ce cec", name: "KEN BILLE", id: "@sajad001184", twitter: "twitter.png" },
	{ img: "download.jpg", des: "Lorem ipsuLiuashc oac osjcioasj oajefnkwfkjn  wifh iowf h ouwaofuupowa hfdhfihedfohiohd fohawih f hbewfoihawfiwehfiyweghfi f iuhe fuh weiu f hip uwe hfiuhwefphiuawfi kem l mecdddddoiasjio casjajscosacjoic jasjc ocosajcsi co asjoscj oremssekx eld elk ke d kem l remssekx eld elk ke dwefnkwfkjn  wifh iowf h ouwaofuupowamee ce cec", name: "KEN BILLE", id: "@sajad001184", twitter: "twitter.png" }
];

// function elementGet(i) {
// 	let imgclient  = document.getElementById(`imgclient${i}`);
// 	let title  = document.getElementById(`title${i}`);
// 	let subtitle  = document.getElementById(`subtitle${i}`);
// 	let twitter  = document.getElementById(`twitter${i}`);
// 	let lorem  = document.getElementById(`lorem${i}`);
// }
// console.log(imgclient[1]);

let imgclient4 = document.getElementById("imgclient4");
let imgclient1 = document.getElementById("imgclient1");
let subtitle1 = document.getElementById("subtitle1");
let title1 = document.getElementById("title1");
let para1 = document.getElementById("lorem1");
let title = document.getElementById("title");
let subtitle = document.getElementById("subtitle");
let imgclient = document.getElementById("imgclient");
let twitter = document.getElementById("twitter");
let lorem = document.getElementById("lorem");
let title2 = document.getElementById("title2");
let subtitle2 = document.getElementById("subtitle2");
let imgclient2 = document.getElementById("imgclient2");
let twitter2 = document.getElementById("twitter2");
let lorem2 = document.getElementById("lorem2");
let title3 = document.getElementById("title3");
let subtitle3 = document.getElementById("subtitle3");
let imgclient3 = document.getElementById("imgclient3");
let twitter3 = document.getElementById("twitter3");
let lorem3 = document.getElementById("lorem3");
let edit_button = document.getElementById("edit-button");
let twitter1 = document.getElementById("twitter1");
const close_buttom = document.getElementById("close-button");
const modal = document.getElementById("myModal");
let title_box = document.getElementById("title-box");
let user_box = document.getElementById("user-box");
let text_box = document.getElementById("text-box");
let myfile = document.getElementById("myfile");
const end_button = document.getElementById("end-editing");
const span = document.getElementById("close-button");
const close_btn = document.getElementById("close-btn");
const modalValue = [];

title.innerHTML = infoUser[0].name;
subtitle.innerHTML = infoUser[0].id;
imgclient.src = infoUser[0].img;
twitter.src = infoUser[0].twitter;
lorem.innerHTML = infoUser[0].des;
title2.innerHTML = infoUser[1].name;
subtitle2.innerHTML = infoUser[1].id;
imgclient2.src = infoUser[1].img;
twitter2.src = infoUser[1].twitter;
lorem2.innerHTML = infoUser[1].des;
title3.innerHTML = infoUser[2].name;
subtitle3.innerHTML = infoUser[2].id;
imgclient3.src = infoUser[2].img;
twitter3.src = infoUser[2].twitter;
lorem3.innerHTML = infoUser[2].des;
-

	function closee() {
		imgclient1.src = infoUser[0].img;
		imgclient1.style.position = "relative";
		myfile.style.display = "none";
		subtitle1.style.display = "block";
		title_box.style.display = "none";
		subtitle1.textContent = modalValue[1];

		title1.style.display = "block";
		user_box.style.display = "none";
		title1.textContent = modalValue[0];

		para1.style.display = "block";
		text_box.style.display = "none";
		para1.textContent = modalValue[2];
		edit_button.style.display = "block";
		end_button.style.display = "none";
		close_btn.style.display = "none";

	}
	let imgurl;
function appendImgEdit() {
	
	const reader = new FileReader();
	reader.onload = (e) => {

		imgclient1.src = e.target.result;

	}
	reader.readAsDataURL(myfile.files[0]);
}

window.onclick = function (event) {
	if (event.target == modal) {
		modal.style.display = "none";
		closee();
	}
}

function openmodal(i) {
	modal.style.display = "block";
	subtitle1.innerHTML = infoUser[i].id;
	imgclient1.src = infoUser[i].img;
	title1.innerHTML = infoUser[i].name;
	para1.innerHTML = infoUser[i].des;
	twitter1.src = infoUser[i].twitter;

}

function close_button() {
	modal.style.display = "none";
	closee();
}


edit_button.onclick = function () {
	imgclient1.style.position = "absolute";
	myfile.style.display = "block";


	myfile.onclick = function () {
		myfile.addEventListener('change', () => {

			appendImgEdit();

		})

	}



	subtitle1.style.display = "none";
	user_box.style.display = "block";
	user_box.value = subtitle1.textContent;
	modalValue[1] = user_box.value;
	subtitle1.textContent = "";


	title1.style.display = "none";
	title_box.style.display = "block";
	title_box.value = title1.textContent;
	modalValue[0] = title_box.value;
	title1.textContent = "";

	para1.style.display = "none";
	text_box.style.display = "block";
	text_box.value = para1.textContent;
	modalValue[2] = text_box.value;
	para1.textContent = "";
	edit_button.style.display = "none";
	end_button.style.display = "block";
	close_btn.style.display = "block";
}



end_button.addEventListener("click", function () {
	myfile.style.display = "none";
	imgclient1.style.position = "relative";



	title1.textContent = title_box.value;

	title1.style.display = "block";
	title_box.style.display = "none";

	subtitle1.textContent = user_box.value;

	subtitle1.style.display = "block";
	user_box.style.display = "none";

	para1.textContent = text_box.value;

	para1.style.display = "block";
	text_box.style.display = "none";
	edit_button.style.display = "block";
	end_button.style.display = "none";
	close_btn.style.display = "none";
	subtitle1.style.backgroundColor = "pink";
	title1.style.backgroundColor = "pink";

})


/*function card_value(i){
	title[i].innerHTML=infoUser[i].name;
	subtitle[i].innerHTML=infoUser[i].id;
	imgclient[i].src=infoUser[i].img;
	twitter[i].src=infoUser[i].twitter;
	lorem[i].innerHTML=infoUser[i].des;
}/*
	
	
	
	
editEmail.value = result[i].email;
editTitle.value  = result[i].title;
editArea.innerHTML = result[i].discriction ;
editImg.src= result[i].img

	

	

	

const username = document.getElementById("username");
lorem.innerHTML=infoUser[0].des;
lorem1.innerHTML=infoUser[0].des;
title.innerHTML=infoUser[0].name;
title1.innerHTML=infoUser[0].name;
	subtitle.innerHTML=infoUser[0].id;
subtitle1.innerHTML=infoUser[0].id;
imgclient.setAttribute("src",infoUser[0].img);
imgclient1.setAttribute("src",infoUser[0].img);
twitter.setAttribute("src",infoUser[0].twitter);
twitter1.setAttribute("src",infoUser[0].twitter);
	



    


const btn = document.getElementById("myBtn");


let myfile=document.getElementById("myfile");






btn.onclick = function() {
modal.style.display = "block";
}



	
	


edit_button.addEventListener("click", function() {
	
myfile.style.display="block";
myfile.onclick=function(){	
myfile.addEventListener('change', () => {
if (myfile.files && myfile.files[0]) {
const reader = new FileReader();
reader.onload = (e) => {
  imgclient1.src = e.target.result;
}
reader.readAsDataURL(myfile.files[0]);
}
})
}




	
	
subtitle1.style.display="none";
title1_box.style.display="block";
title1_box.value=subtitle1.textContent;
subtitle1.textContent="";


title1.style.display="none";
user_box.style.display="block";
user_box.value=title1.textContent;
title1.textContent="";

para1.style.display="none";
text_box.style.display="block";
text_box.value=para1.textContent;
para1.textContent="";
edit_button.style.display="none";
end_button.style.display="block";
close_btn.style.display="block";
} );




close_buttom.onclick=function(){
edit_button.style.display="block";
end_button.style.display="none";
close_btn.style.display="none";
modal.style.display = "none";

}







let para2=document.getElementById("lorem2");
let title2=document.getElementById("title2");
let title3=document.getElementById("title3");
let subtitle2=document.getElementById("subtitle2");
let subtitle3=document.getElementById("subtitle3");
let twitter2=document.getElementById("twitter2");
let twitter3=document.getElementById("twitter3");
let lorem2=document.getElementById("lorem2");
let imgclient2=document.getElementById("imgclient2");
let imgclient3=document.getElementById("imgclient3");
lorem2.innerHTML=infoUser[1].des;
lorem3.innerHTML=infoUser[1].des;
title2.innerHTML=infoUser[1].name;
title3.innerHTML=infoUser[1].name;
	subtitle2.innerHTML=infoUser[1].id;
subtitle3.innerHTML=infoUser[1].id;
imgclient2.setAttribute("src",infoUser[1].img);
imgclient3.setAttribute("src",infoUser[1].img);
twitter2.setAttribute("src",infoUser[1].twitter);
twitter3.setAttribute("src",infoUser[1].twitter);
	
let title1_box2=document.getElementById("title1-box2");
	
let user_box2=document.getElementById("user-box2");
let edit_button2 = document.getElementById("edit-button2");
const end_button2 = document.getElementById("end-editing2");
	const modal2 = document.getElementById("myModal2");
let text_box2=document.getElementById("text-box2");

const btn2 = document.getElementById("myBtn2");
const close_btn2 = document.getElementById("close-btn2");
const span2 = document.getElementById("close2");
const close_buttom2 = document.getElementById("close-button2");
let myfile1=document.getElementById("myfile1");

btn2.onclick = function() {
modal2.style.display = "block";
}




	


	


edit_button2.addEventListener("click", function() {
	
	
myfile1.style.display="block";
myfile1.onclick=function()	{
myfile1.addEventListener('change', () => {
if (myfile1.files && myfile1.files[0]) {
const reader = new FileReader();
reader.onload = (e) => {
  imgclient2.src = e.target.result;
}
reader.readAsDataURL(myfile1.files[0]);
}
})
} 
	
subtitle2.style.display="none";
title1_box2.style.display="block";
title1_box2.value=subtitle2.textContent;
subtitle2.textContent="";


title2.style.display="none";
user_box2.style.display="block";
user_box2.value=title2.textContent;
title2.textContent="";

para2.style.display="none";
text_box2.style.display="block";
text_box2.value=para2.textContent;
para2.textContent="";
edit_button2.style.display="none";
end_button2.style.display="block";
close_btn2.style.display="block";
} );
end_button2.addEventListener("click", function() {
subtitle2.textContent=title1_box2.value;
subtitle2.style.display="block";
title1_box2.style.display="none";

title2.textContent=user_box2.value;
title2.style.display="block";
user_box2.style.display="none";

para2.textContent=text_box2.value;
para2.style.display="block";
text_box2.style.display="none";
edit_button2.style.display="block";
end_button2.style.display="none";
close_btn2.style.display="none";
title2.style.backgroundColor="pink";
 
} )
close_btn2.onclick=function(){
subtitle2.style.display="block";
title1_box2.style.display="none";
subtitle2.textContent=infoUser[1].id;

title2.style.display="block";
user_box2.style.display="none";
title2.textContent=infoUser[1].title;

para2.style.display="block";
text_box2.style.display="none";
para2.textContent=infoUser[1].des;
edit_button2.style.display="block";
end_button2.style.display="none";
close_btn2.style.display="none";

}
close_buttom2.onclick=function(){
modal2.style.display = "none";
edit_button2.style.display="block";
end_button2.style.display="none";
close_btn2.style.display="none";


}




let para4=document.getElementById("lorem4");
let title4=document.getElementById("title4");
let title5=document.getElementById("title5");
let subtitle4=document.getElementById("subtitle4");
let subtitle5=document.getElementById("subtitle5");
let twitter4=document.getElementById("twitter4");
let twitter5=document.getElementById("twitter5");
let lorem5=document.getElementById("lorem5");
let imgclient4=document.getElementById("imgclient4");
let imgclient5=document.getElementById("imgclient5");
lorem4.innerHTML=infoUser[2].des;
lorem5.innerHTML=infoUser[2].des;
title4.innerHTML=infoUser[2].name;
title5.innerHTML=infoUser[2].name;
	subtitle4.innerHTML=infoUser[2].id;
subtitle5.innerHTML=infoUser[2].id;
imgclient4.setAttribute("src",infoUser[2].img);
imgclient5.setAttribute("src",infoUser[2].img);
twitter4.setAttribute("src",infoUser[2].twitter);
twitter5.setAttribute("src",infoUser[2].twitter);
	
let title1_box3=document.getElementById("title1-box3");
	
let user_box3=document.getElementById("user-box3");
let edit_button3 = document.getElementById("edit-button3");
const end_button3 = document.getElementById("end-editing3");
	const modal3 = document.getElementById("myModal3");
let text_box3=document.getElementById("text-box3");

const btn3 = document.getElementById("myBtn3");
const close_btn3 = document.getElementById("close-btn3");
const span3 = document.getElementById("close3");
const close_buttom3 = document.getElementById("close-button3");
let myfile2=document.getElementById("myfile2");

btn3.onclick = function() {
modal3.style.display = "block";
}





	


edit_button3.addEventListener("click", function() {
	
myfile2.style.display="block";
myfile2.onclick=function()	{
myfile2.addEventListener('change', () => {
if (myfile2.files && myfile2.files[0]) {
const reader = new FileReader();
reader.onload = (e) => {
  imgclient4.src = e.target.result;
}
reader.readAsDataURL(myfile2.files[0]);
}
})
} 
subtitle4.style.display="none";
title1_box3.style.display="block";
title1_box3.value=subtitle4.textContent;
subtitle4.textContent="";


title4.style.display="none";
user_box3.style.display="block";
user_box3.value=title4.textContent;
title4.textContent="";

para4.style.display="none";
text_box3.style.display="block";
text_box3.value=para4.textContent;
para4.textContent="";
edit_button3.style.display="none";
end_button3.style.display="block";
close_btn3.style.display="block";
} );
end_button3.addEventListener("click", function() {
subtitle4.textContent=title1_box3.value;
subtitle4.style.display="block";
title1_box3.style.display="none";

title4.textContent=user_box3.value;
title4.style.display="block";
user_box3.style.display="none";

para4.textContent=text_box3.value;
para4.style.display="block";
text_box3.style.display="none";
edit_button3.style.display="block";
end_button3.style.display="none";
close_btn3.style.display="none";
title4.style.backgroundColor="pink";
 
} )
close_btn3.onclick=function(){
subtitle4.style.display="block";
title1_box3.style.display="none";
subtitle4.textContent=infoUser[2].id;

title4.style.display="block";
user_box3.style.display="none";
title4.textContent=infoUser[2].name;

para4.style.display="block";
text_box3.style.display="none";
para4.textContent=infoUser[2].des;
edit_button3.style.display="block";
end_button3.style.display="none";
close_btn3.style.display="none";

}
close_buttom3.onclick=function(){
modal3.style.display = "none";
edit_button3.style.display="block";
end_button3.style.display="none";
close_btn3.style.display="none";
}
*/