Skip to content

Commit c0c289f

Browse files
authored
Merge pull request #20 from MicrosoftLearning/mod03_lesson2_democode
demo code changed
2 parents 1aa99ee + b15395e commit c0c289f

File tree

3 files changed

+81
-5
lines changed

3 files changed

+81
-5
lines changed

Allfiles/Mod03/Democode/Lesson02/HtmlDOMSample/HtmlDOMSample/HtmlDOMSample.csproj

Lines changed: 2 additions & 2 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="index.html" />
9798
<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
<Folder Include="Views\Index\" />
129129
</ItemGroup>

Allfiles/Mod03/Democode/Lesson02/HtmlDOMSample/HtmlDOMSample/Scripts/IndexScript.js

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
function addHobbies() {
1+
document.addEventListener('DOMContentLoaded', function (event) {
2+
document.getElementById('newHobbyBtn').addEventListener('click', addHobbies);
3+
});
4+
5+
function addHobbies() {
26
//Get all hobbies inputs
37
const inputList = document.querySelectorAll('.hobbiesInput');
48
//check if hobbies input elements less then 5
@@ -7,15 +11,15 @@
711
const hobbiesList = document.getElementById('hobbiesList');
812
//Create new elements
913
const newLineElement = createNode('br'),
10-
createNode('input');
14+
inputElement = createNode('input');
1115
//Set class attribute to the new input element
1216
inputElement.setAttribute("class", "hobbiesInput");
1317
//Insert the new elements to the end of the div
1418
append(hobbiesList, newLineElement);
1519
append(hobbiesList, inputElement);
1620
}
1721
else {
18-
alert("Can't add more hobbies (max: 5)");
22+
document.getElementById('newHobbyBtn').removeEventListener('click', addHobbies);
1923
}
2024
}
2125

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
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+
22+
</div>
23+
<div class="navbar-collapse collapse">
24+
<ul class="nav navbar-nav"></ul>
25+
</div>
26+
</div>
27+
</div>
28+
29+
<div class="container body-content">
30+
<form>
31+
<fieldset>
32+
<legend>
33+
Enter your details
34+
</legend>
35+
<ol>
36+
<li>
37+
<label>
38+
<strong>Full name</strong>
39+
<br />
40+
<input type="text" name="UserName" />
41+
</label>
42+
</li>
43+
<li>
44+
<label>
45+
Telephone number
46+
<br />
47+
<input type="text" name="Phone" />
48+
</label>
49+
</li>
50+
<li>
51+
<label>
52+
Email Address
53+
<br />
54+
<input type="text" name="Email" />
55+
</label>
56+
</li>
57+
<li>
58+
<label>
59+
My hobbies
60+
</label>
61+
<div id="hobbiesList">
62+
<input type="text" name="hobby" class="hobbiesInput" />
63+
<button type="button" id="newHobbyBtn">Add hobby</button>
64+
</div>
65+
</li>
66+
</ol>
67+
</fieldset>
68+
<input type="submit" value="Check my details" />
69+
</form>
70+
</div>
71+
</body>
72+
</html>

0 commit comments

Comments
 (0)