forked from bloominstituteoftechnology/DOM-I
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
155 lines (117 loc) · 6.38 KB
/
index.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
146
147
148
149
150
151
152
153
const siteContent = {
"nav": {
"nav-item-1": "Services",
"nav-item-2": "Product",
"nav-item-3": "Vision",
"nav-item-4": "Features",
"nav-item-5": "About",
"nav-item-6": "Contact",
"img-src": "img/logo.png"
},
"cta": {
"h1": "DOM Is Awesome",
"button": "Get Started",
"img-src": "img/header-img.png"
},
"main-content": {
"features-h4":"Features",
"features-content": "Features content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.",
"about-h4":"About",
"about-content": "About content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.",
"middle-img-src": "img/mid-page-accent.jpg",
"services-h4":"Services",
"services-content": "Services content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.",
"product-h4":"Product",
"product-content": "Product content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.",
"vision-h4":"Vision",
"vision-content": "Vision content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.",
},
"contact": {
"contact-h4" : "Contact",
"address" : "123 Way 456 Street Somewhere, USA",
"phone" : "1 (888) 888-8888",
"email" : "[email protected]",
},
"footer": {
"copyright" : "Copyright Great Idea! 2018"
},
};
// Example: Update the img src for the logo
//navigation
//////////////////
let logo = document.getElementById("logo-img");
logo.setAttribute('src', siteContent["nav"]["img-src"]);
let nav1=document.querySelector("nav a:nth-child(1)");
nav1.textContent="Services";
let nav2=document.querySelector("nav a:nth-child(2)");
nav2.textContent="Product";
let nav3=document.querySelector("nav a:nth-child(3)");
nav3.textContent="Vision";
let nav4=document.querySelector("nav a:nth-child(4)");
nav4.textContent="Features";
let nav5=document.querySelector("nav a:nth-child(5)");
nav5.textContent="About";
let nav6=document.querySelector("nav a:nth-child(6)");
nav6.textContent="Contact";
//top section
/////////////////////
let centerTxt=document.querySelector(".cta-text h1");
centerTxt.innerHTML="DOM<br> Is<br> Awesome";
let button1=document.querySelector("button");
button1.textContent="Get Started";
let roundImage=document.querySelector("#cta-img");
roundImage.src="img/header-img.png";
//middle section 2 items
//////////////////////
let topContent1=document.querySelector(".top-content div:nth-child(1) h4 ");
topContent1.textContent="Features";
let topContent11=document.querySelector(".top-content div:nth-child(1) p");
topContent11.textContent="Features content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.";
let topContent2=document.querySelector(".top-content div:nth-child(2) h4");
topContent2.textContent="About";
let topContent22=document.querySelector(".top-content div:nth-child(2) p");
topContent22.textContent="About content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.";
////middle img
////////////////////
let bigImage=document.querySelector("#middle-img");
bigImage.setAttribute("src", siteContent["main-content"]["middle-img-src"]);
//middle section 3 items
let bottomContent1=document.querySelector(".bottom-content div:nth-child(1) h4");
bottomContent1.textContent="Services";
let bottomContent11=document.querySelector(".bottom-content div:nth-child(1) p");
bottomContent11.textContent="Services content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.";
let bottomContent2=document.querySelector(".bottom-content div:nth-child(2) h4");
bottomContent2.textContent="Product";
let bottomContent22=document.querySelector(".bottom-content div:nth-child(2) p");
bottomContent22.textContent="Product content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.";
let bottomContent3=document.querySelector(".bottom-content div:nth-child(3) h4");
bottomContent3.textContent="Vision";
let bottomContent33=document.querySelector(".bottom-content div:nth-child(3) p");
bottomContent33.textContent="Vision content elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.";
//footer
//////////////////
let footerContentHeader=document.querySelector(".contact h4");
footerContentHeader.textContent="Contact";
let footerContentP1=document.querySelector(".contact p:nth-child(2)");
footerContentP1.innerHTML="123 Way 456 Street<br/> Somewhere, USA";
let footerContentP2=document.querySelector(".contact p:nth-child(3)");
footerContentP2.textContent="1 (888) 888-8888";
let footerContentP3=document.querySelector(".contact p:nth-child(4)");
footerContentP3.textContent="[email protected]"
//append and prepend
////////////////////////
let nav=document.querySelector('header > nav');
let prepended_link=document.createElement("a");
prepended_link.textContent="Hello";
prepended_link.setAttribute("href","#");
nav.prepend(prepended_link);
let node2=document.createElement("a");
let node22=document.createTextNode("World");
node2.setAttribute("href","#");
node2.appendChild(node22);
document.querySelector("header nav").appendChild(node2);
let colorChange=document.querySelectorAll("a");
colorChangeArray=Array.from(colorChange);
colorChangeArray.forEach(element=>{
element.style.color="green";
})