js file

1 year ago · 6d9747c35f
1 changed files with 313 additions and 0 deletions
--- a/app.js
+++ b/app.js
@ -0,0 +1,313 @@
				@@ -0,0 +1,313 @@
+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);
+	},3000);
+	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:"images (6).jpg",des:"Lorem ipsuLoremssekx eld elk ke d kem l mece ce cec",name:"KEN BILLE",id:"@sajad001184"},
+	{img:"images (6).jpg",des:"Lorem ipsuLoremssekx eld elk ke d kem l mee ce cec",name:"KEN BILLE",id:"@sajad001184"}
+	];
+	 
+	
+	
+	
+	
+	let para1=document.getElementById("lorem1");
+	let title=document.getElementById("title");
+	let title1=document.getElementById("title1");
+	let subtitle=document.getElementById("subtitle");
+	let subtitle1=document.getElementById("subtitle1");
+	let twitter=document.getElementById("twitter");
+	let twitter1=document.getElementById("twitter1");
+	let lorem=document.getElementById("lorem");
+	let imgclient1=document.getElementById("imgclient1");
+	let imgclient=document.getElementById("imgclient");
+	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);
+	
+	let title1_box=document.getElementById("title1-box");
+	
+	let user_box=document.getElementById("user-box");
+let edit_button = document.getElementById("edit-button");
+const end_button = document.getElementById("end-editing");
+        const modal = document.getElementById("myModal");
+let text_box=document.getElementById("text-box");
+
+const btn = document.getElementById("myBtn");
+const close_btn = document.getElementById("close-btn");
+const span = document.getElementById("close");
+const close_buttom = document.getElementById("close-button");
+let myfile=document.getElementById("myfile");
+
+imgclient1.onclick=function(){
+
+}
+
+
+
+
+
+btn.onclick = function() {
+  modal.style.display = "block";
+}
+
+
+span.onclick = function() {
+edit_button.style.display="block";
+end_button.style.display="none";
+close_btn.style.display="none";
+modal.style.display = "none";
+}
+
+
+window.onclick = function(event) {
+  if (event.target == modal) {
+    modal.style.display = "none";
+  }
+}
+	
+
+
+edit_button.addEventListener("click", function() {
+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";
+} );
+end_button.addEventListener("click", function() {
+subtitle1.textContent=title1_box.value;
+subtitle1.style.display="block";
+title1_box.style.display="none";
+
+title1.textContent=user_box.value;
+title1.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";
+title1.style.backgroundColor="pink";
+  
+} )
+close_btn.onclick=function(){
+subtitle1.style.display="block";
+title1_box.style.display="none";
+subtitle1.textContent=infoUser[0].id;
+
+title1.style.display="block";
+user_box.style.display="none";
+title1.textContent=infoUser[0].title;
+
+para1.style.display="block";
+text_box.style.display="none";
+para1.textContent=infoUser[0].des;
+edit_button.style.display="block";
+end_button.style.display="none";
+close_btn.style.display="none";
+
+}
+close_buttom.onclick=function(){
+modal.style.display = "none";
+edit_button.style.display="block";
+end_button.style.display="none";
+close_btn.style.display="none";
+
+
+}
+
+
+
+
+
+
+
+	let para2=document.getElementById("lorem3");
+	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");
+
+
+btn2.onclick = function() {
+  modal2.style.display = "block";
+}
+
+
+
+
+
+	
+
+
+edit_button2.addEventListener("click", function() {
+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";
+
+
+}