Homework SourseWrite the HTML CSS and JS that meets the following requireme
Write the HTML, CSS, and JS that meets the following requirements:
1. Make the font size 20 points.
2. Make the left margin 50 pixels.
3. Add the following elements to the page:
a level 1 header. The content shall be your name.
b image. The picture displayed shall be anything of your choice on the web. Use an absolute URL.
c ordered list with two items. The content of these items shall be your two favorite things.
4. Write a JS script that does the following:
a). Ask the user for his two favorite things. Change the ordered list so that it replaces the previous content with these values.
b). Ask the user if he likes Google. If so, change the image so that it shows some image of Google.
Any example code?
Solution
// css file styleCss.css
.container{
font-size: 20pt;
margin-left: 50px;
}
// html file contains html and java script we have to include css file also
// for that we have to use <link rel=\"stylesheet\" href=\"styleCss.css\">
// html file htmlForReq.html
<!DOCTYPE html>
<html>
<head>
<link rel=\"stylesheet\" href=\"styleCss.css\">
</head>
<style>
/*
Inner css you can also write css here, but using separate file is prefered.
if you want to use here enable below comment.
*/
/*
.container{
font-size: 20pt;
margin-left: 50px;
}
*/
</style>
<body>
<div class=\"container\">
<h1>
NameXyz
</h1>
<img src=\"http://www.oyegraphics.com/wp-content/uploads/2015/05/Go-For-It-Good-Luck-600x358.gif\" alt=\"Mountain View\" style=\"width:304px;height:228px;\" id=\"imageId\">
<ol >
<li id = \"fav1\">Sports</li>
<li id = \"fav2\">Chegg</li>
</ol>
likes google??<br>
<input type=\"radio\" name=\"likes\" value=\"yes\" id=\"google\" onchange=\"changeImage()\"> yes</input>
<input type=\"radio\" name=\"likes\" value=\"no\" id = \"nogoogle\" onchange=\"changeImage()\" checked> no </input>
<br><br>
<button type=\"button\" onclick=\"change()\">Change Favorite!</button>
</div>
<script>
function change(){
var fav1 = prompt(\"Please Enter your 1st favorite thing\", \"\");
var fav2 = prompt(\"Please Enter your 2nd favorite thing\",\"\");
if (fav1.length > 0) {
document.getElementById(\"fav1\").innerHTML =
fav1;
}
if (fav2.length > 0) {
document.getElementById(\"fav2\").innerHTML =
fav2;
}
//enable this if you want to change image after user enter google in prompt
/*if(fav1.toLowerCase() == \"google\" || fav2.toLowerCase() == \"google\"){
document.getElementById(\"imageId\").src=
\"http://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png\";
}*/
}
function changeImage(){
if(document.getElementById(\'google\').checked) {
document.getElementById(\"imageId\").src=
\"http://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png\";
}else if(document.getElementById(\'nogoogle\').checked) {
document.getElementById(\"imageId\").src=
\"http://www.oyegraphics.com/wp-content/uploads/2015/05/Go-For-It-Good-Luck-600x358.gif\";
}
}
</script>
</body>
</html>
