-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
145 lines (132 loc) · 4.69 KB
/
app.js
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
137
138
139
140
141
142
143
144
145
const mainContainer =document.createElement('main')
mainContainer.setAttribute('id','main')
const featuresContainer = document.createElement('div')
featuresContainer.classList.add('features-container')
const testimonialsContainer = document.createElement('div')
testimonialsContainer.classList.add('testimonials-container')
const ctaContainer = document.createElement('div')
ctaContainer.classList.add('cta')
const footerContainer = document.createElement('footer')
footerContainer.setAttribute('id','footer')
dynamicContent()
// Toggle navbar
const navbar = document.getElementById('navbar')
const toggle = document.querySelector('.togglemenu')
toggle.addEventListener('click',()=>{
navbar.classList.toggle('active')
})
function dynamicContent(){
const divContainer = document.createElement('div')
divContainer.classList.add('container')
divContainer.innerHTML = `
<!-- Header -->
<header id="header">
<div class="flex-logo-toggle">
<div class="logo">
<img src="./images/logo.png" alt="">
</div>
<div class="togglemenu">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
</div>
<!-- Navbar -->
<nav id="navbar">
<ul>
<li><a href="#welcome">Welcome</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<section id="welcome">
<article class="welcome-flex-left">
<h1>Our App Is Ready For You! Take A Look & Enjoy. </h1>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<button class="btn"> <a href="#">Learn More</a></button>
</article>
<article class="welcome-flex-right">
<img src="./images/poster.jpg" alt="">
</article>
</section>
`
document.body.appendChild(divContainer)
mainContent()
}
function mainContent(){
mainContainer.innerHTML=`
<h2 id="features">Work</h2>
${featuresContent()}
${testimonialsContent()}
`
mainContainer.appendChild(featuresContainer)
mainContainer.appendChild(testimonialsContainer)
ctaContainer.innerHTML = `
<div class="cta-center">
<div class="cta-info">
<h3>Call to action! It's time!</h3>
<p>Sign up for that product by clicking that button right over there!</p>
</div>
<button class="cta-btn btn">
<a href="#">Sign up</a>
</button>
</div>`
mainContainer.appendChild(ctaContainer)
document.body.appendChild(mainContainer)
footerContainer.innerHTML = footerContent()
document.body.appendChild(footerContainer)
}
function featuresContent(){
// features
const features = [
{
img:'./images/icon1.png',
title:'Good Design',
info:"Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when a printer took a galley."
},
{
img:'./images/icon2.png',
title:'Well Protected',
info:"Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when a printer took a galley."
},
{
img:'./images/icon3.png',
title:'High Class',
info:"Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when a printer took a galley."
},
{
img:'./images/icon4.png',
title:'Responsive',
info:"Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when a printer took a galley."
},
]
features.forEach(feature => {
let article = document.createElement('article')
article.classList.add('feature')
article.innerHTML = `
<div class="feature-icon">
<img src="${feature.img}" alt="feature icon">
</div>
<h3 class="feature-title">${feature.title}</h3>
<p class="feature-info">
${feature.info}
</p>
`
featuresContainer.appendChild(article)
})
return '';
}
function testimonialsContent(){
testimonialsContainer.innerHTML = `
<div class="client-photo">
<img src="./images/person1.jpg" alt="">
</div>
<h4 class="client-name">Sarah Shmidt</h4>
<p class="testimonial">
"There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable."
</p>
`
return '';
}
function footerContent(){
return ` <p>Copyright © The Odin Project <span class="year">2021</span></p>`
}