JavaScript-Projects/testimonial.html at main · srujana-manda/JavaScript-Projects · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Testimonial Slider</title>
    <style>
      body {
  margin: 0;
  display: flex;
  justify-content: center;
  height: 100vh;
  align-items: center;
  font-family: cursive;
}

.testimonial-container {
  width: 500px;
  height: 100px;
  background-color: slateblue;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  min-width: 400px;
  padding: 70px 20px;
  margin: 5px;
  color: white;
  position: relative;
}

img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -50px;
}

.username {
  font-size: 13px;
  font-weight: 100;
}
    </style>
  </head>
  <body>
    <div class="testimonial-container">
      <img
         src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=880&q=80"
        alt="user-image"
      />
      <p class="text">
        This is simply unbelievable! I would be lost without Apple. The very
        best. Not able to tell you how happy I am with Apple.
      </p>
      <h4 class="username">Cherise G</h4>
    </div>
    <script>


const testimonials = [
  {
    name: "Cherise G",
    photoUrl:
      "https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=880&q=80",
    text: "This is simply unbelievable! I would be lost without Apple. The very best. Not able to tell you how happy I am with Apple.",
  },
  {
    name: "Rosetta Q",
    photoUrl:
      "https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=880&q=80",
    text: "I would also like to say thank you to all your staff. Wow what great service, I love it! Apple impressed me on multiple levels.",
  },
  {
    name: "Constantine V",
    photoUrl:
      "https://images.unsplash.com/photo-1628157588553-5eeea00af15c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=880&q=80",
    text: "Thank you for making it painless, pleasant and most of all hassle free! I wish I would have thought of it first. The very best.",
  },
];
const imgE1 = document.querySelector("img");
const textE1 = document.querySelector(".text");
const usernameE1 = document.querySelector(".username");

let id = 0;

updateTestimonial();

 function updateTestimonial() {
  const { name, photoUrl, text } = testimonials[id];

    imgE1.src = photoUrl;
    textE1.innerText = text;
    usernameE1.innerText = name;
    id++;

    if(id === testimonials.length){
        id = 0;
    }

    setTimeout(() => {
        updateTestimonial();
    },1000);
};

// const imgEl = document.querySelector("img");
// const textEl = document.querySelector(".text");
// const usernameEl = document.querySelector(".username");

// let idx = 0;

// updateTestimonial();

// function updateTestimonial() {
//   const { name, photoUrl, text } = testimonials[idx];
//   imgEl.src = photoUrl;
//   textEl.innerText = text;
//   usernameEl.innerText = name;
//   idx++;
//   if (idx === testimonials.length) {
//     idx = 0;
//   }
//   setTimeout(() => {
//     updateTestimonial();
//   }, 10000);
// }


    </script>
  </body>
</html>