File tree Expand file tree Collapse file tree 3 files changed +81
-5
lines changed
Allfiles/Mod03/Democode/Lesson02/HtmlDOMSample/HtmlDOMSample Expand file tree Collapse file tree 3 files changed +81
-5
lines changed Original file line number Diff line number Diff line change 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 >
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 >
124123 </ItemGroup >
125124 <ItemGroup >
126125 <Folder Include =" App_Data\" />
126+ <Folder Include =" Controllers\" />
127127 <Folder Include =" Models\" />
128128 <Folder Include =" Views\Index\" />
129129 </ItemGroup >
Original file line number Diff line number Diff line change 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
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
Original file line number Diff line number Diff line change 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 >
You can’t perform that action at this time.
0 commit comments