Skip to content

Commit a755406

Browse files
avichaigavichaig
committed
demo code changed
DOMContentLoaded event listener added event listener added to GetPersons button
1 parent 4a18873 commit a755406

File tree

3 files changed

+94
-3
lines changed

3 files changed

+94
-3
lines changed

‎Allfiles/Mod05/Democode/fetchWeb/fetchWeb/Scripts/indexScript.js‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
//server URL
2+
const weatherApiUrl = "https://randomuser.me/api/?results=3";
3+
4+
document.addEventListener('DOMContentLoaded', function (event) {
5+
document.getElementById('addPersonsBtn').addEventListener('click', getPersons);
6+
});
7+
8+
//Get persons async function to receive persons list, generate and fill table rows
9+
async function getPersons() {
10+
try {
11+
//Get request by fetch
12+
let response = await fetch(weatherApiUrl);
13+
if (response.ok) {
14+
//Converting the response to Json
15+
const data = await response.json();
16+
//Get table element
17+
const table = document.getElementById("PersonTable");
18+
//Mapping all persons into the table
19+
data.results.map(function (auther) {
20+
//Create new element to insert into the table
21+
const tr = createNode('tr'),
22+
fullNameRow = createNode('td'),
23+
PicRow = createNode('td'),
24+
PicEl = createNode('img'),
25+
emailRow = createNode('td');
26+
//Insert the data into the element
27+
fullNameRow.innerHTML = `${auther.name.title}. ${auther.name.last} ${auther.name.first}`;
28+
PicEl.src = auther.picture.medium;
29+
emailRow.innerHTML = auther.email;
30+
//Insert the elements into the table
31+
append(tr, fullNameRow);
32+
append(PicRow, PicEl);
33+
append(tr, PicRow);
34+
append(tr, emailRow);
35+
append(table, tr);
36+
})
37+
}
38+
}
39+
catch (e) {
40+
console.log(e);
41+
}
42+
}
43+
//Create new element by element name
44+
function createNode(element) {
45+
return document.createElement(element);
46+
}
47+
48+
// Append the element(el) into the parent
49+
function append(parent, el) {
50+
return parent.appendChild(el);
51+
}

‎Allfiles/Mod05/Democode/fetchWeb/fetchWeb/fetchWeb.csproj‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -94,13 +94,13 @@
9494
<Content Include="Content\Site.css" />
9595
<Content Include="fonts\glyphicons-halflings-regular.svg" />
9696
<Content Include="Global.asax" />
97-
<Content Include="Scripts\index.js" />
97+
<Content Include="index.html" />
98+
<Content Include="Scripts\indexScript.js" />
9899
<Content Include="Scripts\modernizr-2.6.2.js" />
99100
<Content Include="Web.config" />
100101
</ItemGroup>
101102
<ItemGroup>
102103
<Compile Include="App_Start\RouteConfig.cs" />
103-
<Compile Include="Controllers\HomeController.cs" />
104104
<Compile Include="Global.asax.cs">
105105
<DependentUpon>Global.asax</DependentUpon>
106106
</Compile>
@@ -114,7 +114,6 @@
114114
<None Include="packages.config" />
115115
<Content Include="Views\_ViewStart.cshtml" />
116116
<Content Include="Views\Shared\_Layout.cshtml" />
117-
<Content Include="Views\Home\Index.cshtml" />
118117
<None Include="Web.Debug.config">
119118
<DependentUpon>Web.config</DependentUpon>
120119
</None>
@@ -124,6 +123,7 @@
124123
</ItemGroup>
125124
<ItemGroup>
126125
<Folder Include="App_Data\" />
126+
<Folder Include="Controllers\" />
127127
<Folder Include="Models\" />
128128
</ItemGroup>
129129
<PropertyGroup>

‎Allfiles/Mod05/Democode/fetchWeb/fetchWeb/index.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>HTML Basic</title>
7+
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
8+
<link href="/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
9+
<script src="/Scripts/modernizr-2.6.2.js"></script>
10+
<script src="/Scripts/IndexScript.js"></script>
11+
</head>
12+
<body>
13+
<div class="navbar navbar-inverse navbar-fixed-top">
14+
<div class="container">
15+
<div class="navbar-header">
16+
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
17+
<span class="icon-bar"></span>
18+
<span class="icon-bar"></span>
19+
<span class="icon-bar"></span>
20+
</button>
21+
</div>
22+
<div class="navbar-collapse collapse">
23+
<ul class="nav navbar-nav"></ul>
24+
</div>
25+
</div>
26+
</div>
27+
<div class="container body-content">
28+
<br />
29+
<button id="addPersonsBtn">Get Persons</button>
30+
<hr />
31+
<table id="PersonTable">
32+
<tr>
33+
<th>Full name</th>
34+
<th>Picture</th>
35+
<th>Email</th>
36+
</tr>
37+
</table>
38+
</div>
39+
</body>
40+
</html>

0 commit comments

Comments
 (0)