HTML Create a div with an id called main-content and a class called container. I
ID: 3701626 • Letter: H
Question
HTML
Create a div with an id called main-content and a class called container. INSIDE this div create the following elements:
Create an h1 with a class called title.
Create a p with a class called description.
Create a h3 with a class called subtitle.
Create a p with an id called current-paragraph and a class called description.
JavaScript
Write the following named functions:
Create a function called welcome that takes no parameters. It should return the string "Welcome developer".
Create a function called number that takes no parameters. It should return the number 3.
Create a function called stringFx that takes no parameters. It should return the string "string".
Create a function called boolFx that takes no parameters. It should return the boolean true.
Create a function called nill that takes no parameters. It should return the value null.
Create a function called parameter that takes a parameter. It should return the parameter.
Create a function called addThree that takes 3 parameters. It should return the sum of the three parameters.
Create a function called writeHtml that takes no parameters: Inside this function yo should:
Select the title class and use the text method to add the string 'This is the title of the Page'
Select the subtitle class and use the html method to add the string 'New Subtitle'
Select the current-paragraph id and use the append method to add the string 'This paragraph has been appended'
Select the main-content id and use the append method to add a new h4 element with the text New element
Car Registration Form
Create a form using Bootstrap with a title called Car Registration. The form should have the following inputs:
Create an input with a label called Model.
Create an input with a label called Make.
Create an number input with a label called Year.
Create an input with a label called VIN.
Create a button called Register.
Create a button called Cancel.
JavaScript
Use a JQuery event method that calls the function called writeHtml when the Registerbutton is clicked.
Create a function writeHtml that takes no parameters. This function should write to the DOM the values of the Make, Model, Year and VIN entered in the form using an unordered list. Once the car appears in the DOM you should clear the form.
Use a JQuery event method that calls the function called hideCar when the Cancelbutton is clicked.
Create a function called hideCar that takes no parameters. This function should hide the car that shows up when you click the Register button.
Explanation / Answer
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<body>
<div id="main-content" class="container">
<h1 class="title"></h1>
<p class="description"></p>
<h1 class="subtitle"></h1>
<p class="description" id="current-paragraph"></p>
</div>
<script>
function welcome(){
return "Welcome developer";
}
function number()
{
return 3;
}
function stringFx(){
return "string";
}
function boolFx(){
return true;
}
function nill(){
return null;
}
function parameter(val){
return val;
}
function addThree(val1,val2,val3){
var sum=val1+val2+val3;
return sum;
}
$(".title").text("This is the title of the Page");
$(".subtitle").html("New Subtitle");
$("#current-paragraph" ).append( "This paragraph has been appended" );
$("#current-paragraph" ).append( "<h4>text New element</h4>" );
</script>
<h1>Car Registration</h1>
<div class="form-group">
<label for="Model">Model:</label>
<input type="text" class="form-control" id="Model">
</div>
<div class="form-group">
<label for="Make">Make:</label>
<input type="text" class="form-control" id="Make">
</div>
<div class="form-group">
<label for="Make">Year:</label>
<input id="Year" type="number" class="form-control">
</div>
<div class="form-group">
<label for="Make">VIN:</label>
<input type="text" class="form-control" id="VIN">
</div>
<button type="submit" class="btn btn-default">Register</button>             <button type="submit" class="btn btn-default">Cancel</button>
<script>
function writeHtml(){
var model= $('#Model').val();
var make= $('#Make').val();
var Year= $('#Year').val();
var VIN= $('#VIN').val();
$("#input1" ).text( model);
$("#input2" ).text( make);
$("#input3" ).text( Year);
$("#input4" ).text( VIN);
$("#Model").val('');
$("#Make").val('');
$("#Year").val('');
$("#VIN").val('');
}
function hideCar(){
$("#input1" ).text( '');
$("#input2" ).text( '');
$("#input3" ).text( '');
$("#input4" ).text( '');
}
</script>
<div id="input1"></div>
<div id="input2"></div>
<div id="input3"></div>
<div id="input4"></div>
</body>
</html>
Note: please the html code above....name to the file....run on browser..... You will meet your requirement..... If any doubts please coment me..... Happy coding!!
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.