Question

In: Computer Science

Create a web site to share your travel blog stories from multiple trips. Desktop site should...

Create a web site to share your travel blog stories from multiple trips.
Desktop site should have three columns, the left being navigation, middle is your text, the right is some basic facts about the location that you visited.

Tablet site should have two columns, dropping the right column.

Mobile phone site should have one column, with the navigation becoming the drop-down list.

Create a form and use JavaScript to validate the user data.

Submitting valid data should result in a page that displays the date, time, location, title and description.

Solutions

Expert Solution

Website: Front end should always provide a user-friendly experience. The responsiveness for desktop site, tablet and mobile phone can be achieved using media queries.

Media Query: Media query is a CSS technique introduced in CSS3.It uses the @media rule to include a block of CSS properties only if a certain condition is true.

The below code is the example for above-mentioned specifications - desktop site with left navigation, Middle text, and Right facts. The tablet and mobile versions are also supported using media queries.

Code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: "Lato", sans-serif;
}

.column {
float: left;
  width: 33.33%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
clear: both;
}

.sidenav {
height: 100%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
}

.sidenav a {
padding: 6px 6px 6px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}

.sidenav a:hover {
color: #f1f1f1;
}

.main {
margin-left: 200px; /* Same as the width of the sidenav */
}

@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}

/* On screens that are 700px wide or less, go from four columns to two columns */
@media screen and (max-width: 700px) {
.column {
width: 50%;
}
}

/* On screens that are 400px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.column {
width: 100%;
}
}

</style>
</head>
<body>

<div class="row">
  <div class="column">

<div class="sidenav">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>

</div>
  <div class="column">Middle Text</div>
  <div class="column">Right Facts</div>
</div>
</body>
</html>

Form with javascript validation to collect user data:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "_//W3C// DTD XHTML 1.0 Transitional //EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Login page</title>
<link href="style1.css" rel="stylesheet" type="text/css"/>

<script src="vaishu6.js">
</script>
</head>
<body>
<div class="header">
</div>
<div class="section">
</div>
<div class="section1">
</div>
<img id="slide" name="slide" height="600px" width="250px"/>
<center><input type="submit" id="bt1" onclick="tests(1)" value="login"/></center>
<center><input type="submit" id="bt2" onclick="tests(2)" value="signup"/></center>
<div id="Form">
<table id="table2" cellspacing="1px">
<caption><center><font face="jokerman"/><h1 style="color:orange;"><big>Signup</big></h1></center></caption><b>
<form>
<p><tr>
<td><b>Name:</b></td><td><input type="text" id="name"></td>
<td><p style="color:red" id="name1"></p></td>
</tr>
<tr>
<td><b>Username:</b></td><td><input type="text" id="uname"></td>
<td><p style="color:red" id="uname1"></p>
</td>
</tr>
<tr>
<td><b>Password:</b></td><td><input type="password" id="ps"></td>
<td><p style="color:red" id="ps1"></p>
</td>
</tr>
<tr>
<td><b>Confirm password:</b></td><td><input type="password" id="cp"></td>
<td><p style="color:red" id="cp1"></p>
</td>
</tr>
<tr>
<td><b>Email-Id:</b></td><td><input type="text" id="mail"></td>
<td><p style="color:red" id="mail1"></p>
</td>
</tr>
<tr>
<td><b>Mobile Number:</b></td><td><input type="text" id="mn"></td>
<td><p style="color:red" id="mn1"></p>
</td>
</tr>
<tr>
<td><b>Telephone Number:</b></td><td><input type="text" id="cn"></td>
<td><p style="color:red" id="cn1"></p>
</td>
</tr>
<tr>
<td><b>Gender:</b></td><td><input type="radio" name="gender" id="gen1" value="Female" checked="checked">Female&nbsp &nbsp
<input type="radio" name="gender" id="gen2" value="Male">Male</br></td>
</tr>
<tr>
<td><b>Language:</b></td><td>
<select name="Language" id="lan">
<option value="Telugu">Telugu</option>
<option value="Hindi">Hindi</option>
<option value="English">English</option>
<option value="Marathi">Marathi</option>
   <option value="Tamil">Tamil</option>
   <option value="Kannada">Kannada</option>
</select></br></td>
</tr>

<tr>
<td>
<b>Hobbies:</b>
</td>

       <td><input type="checkbox" id="cb" onclick="func()">Yes</td>
       <td><p style="color:red" id="hob"></p>
</td>

   </tr>
<tr>
   <td></td>
   <td>
   <p id="hobbies" style="display:none;">
       <input type="checkbox" name="hobbies" value="reading">reading &nbsp
       <input type="checkbox" name="hobbies" value="playing">playing &nbsp
       <input type="checkbox" name="hobbies" value="singing">singing &nbsp
       <input type="checkbox" name="hobbies" value="dancing">dancing &nbsp
   </p><br>
   </td>
   </tr>
   <script>
    function func()
       {
           var menu=document.getElementById("hobbies");
           var field=document.getElementById("cb");

           if(field.checked==true)
               menu.style.display="block";
           else
               menu.style.display="none";
       }

</script>
<td>
<center>
<button type="button" onclick="test()">
SUBMIT</button></center>
</td>
<td><center>
<button type="button" onclick="test2()">
CANCEL</button></center>
</td>
</tr></b>
</table>
</div>
<div id="last">
<table id="table3">
<caption><b>Details of Student</b></caption>
<tr>
<td><b>Name:</b></td>
<td><p id="det1"></p></td>
</tr>
<tr>
<td><b>Username:</b></td>
<td><p id="det2"></p></td>
</tr>
<tr>
<td><b>Email-Id:</b></td>
<td><p id="det3"></p></td>
</tr>
<tr>
<td><b>Mobile No:</b></td>
<td><p id="det4"></p></td>
</tr>
<tr>
<td><b>TelePhone No:</b></td>
<td><p id="det5"></p></td>
</tr>
<tr>
<td><b>Gender:</b></td>
<td><p id="det6"></p></td>
</tr>
<tr>
<td><b>Languages Known:</b></td>
<td><p id="det7"></p></td>
</tr>
<tr>
<td><b>Hobbies:</b></td>
<td><p id="det8"></p></td>
</tr>

</table>
</div>
<div class="footer">
</div>
</body>
</html>

Style sheet for above form:

#table1,#table2,#table3
{
   display:none;
}


.header
{
   font-size:12px;
   top:0px;
   left:0px;
   right:0px;
   background-color:#36688D;
   position:absolute;
   height:120px;
   color:orange;
   overflow:hidden;
}
#head{
   left:200px;
   top:12px;
   font-size:15px;
   position:absolute;
}
.footer{
background-color:black;
height:30px;
top:880px;
left:0px;
right:0px;
position:absolute;
}
.section{
background-color:white;
height:780px;
top:120px;
left:0px;
right:0px;
position:absolute;

}
/*.section1{
background-color:#DCC7AA;
height:60px;
top:150px;
left:430px;
right:450px;
position:absolute;

}*/
#slide{
  
   top:120px;
   left:0px;
   height:780px;
   right:250px;
   position:absolute;
}


#Form{
   float:center;
   top:220px;
   right:500px;
   left:300px;
   background-color:#F1E086/*#ABDCD6*/;
   height:670px;
   position:absolute;
   overflow:hidden;
}
#last{
   float:center;
   top:120px;
   right:0px;
   left:1000px;
   background-color:#C7F6EC;
   height:660px;
   position:absolute;
   overflow:hidden;
}

#bt1{
   background-color:black;
   float:left;
   top:160px;
   position:absolute;
   left:440px;
   font-size:30px;
   display:inline;
   color:white;
  
}
#bt2{
background-color:black;
   float:left;
   top:160px;
   position:absolute;
   left:540px;
   font-size:30px;
   display:inline;
   color:white;
}
#img{
   margin:200px;
}


Javascript Validation:

function test()
{
var a=document.getElementById("name").value;
var a1=/^[a-z A-Z \s \.]{1,}[\. a-z A-Z \s]{1,26}$/;
var b=document.getElementById("uname").value;
var b1=/^[^0-9][a-z,0-9,.\s]{4,}$/i;
var c=document.getElementById("ps").value;
var c1=/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[#$@!%&*?])[A-Za-z\d#$@!%&*?]{6,15}$/;
var d1=document.getElementById("cp").value;
var e=document.getElementById("mail").value;
var e1=/^[^0-9][a-z]{2,}[0-9]{0,}@[a-z]{4,6}\.[a-z]{2,3}$/i;
var f=document.getElementById("mn").value;
var f1=/^[0-9]{8,12}$/i;
var g=document.getElementById("cn").value;
var g1=/^[0-9]{3,4}-[0-9]{8}$/i;
var h=document.getElementById("gen1");
var j=document.getElementById("gen2");
var i=document.getElementById("lan").value;
var s="Please enter valid ";
var d=0;
if(a.match(a1))
{
   d=d+1;
   document.getElementById("name1").innerHTML="";
}
else
{
document.getElementById("name1").innerHTML="enter correct name";
}
if(b.match(b1))
{
   d=d+1;
   document.getElementById("uname1").innerHTML="";
}
else
{
document.getElementById("uname1").innerHTML="enter correct username ";
}
if(c.match(c1))
{
   d=d+1;
   document.getElementById("ps1").innerHTML="";
}
else
{
document.getElementById("ps1").innerHTML="enter correct password";
}
if(e.match(e1))
{
   d=d+1;
   document.getElementById("mail1").innerHTML="";
}
else
{
document.getElementById("mail1").innerHTML="enter correct Email Id ";
}
if(f.match(f1))
{
   d=d+1;
   document.getElementById("mn1").innerHTML="";
}
else
{
document.getElementById("mn1").innerHTML="enter correct mobile number ";
}
if(g.match(g1))
{
   d=d+1;
   document.getElementById("cn1").innerHTML="";
}
else
{
document.getElementById("cn1").innerHTML="enter correct telephone number ";
}

var menu=document.getElementsByName("hobbies");
var selected=[];
for(var i=0;i<menu.length;i++){
if(menu[i].checked){
selected.push(menu[i].value);
}
}
var v=" ";
for(var i=0;i<selected.length;i++){
     
   v=v+selected[i]+" ";
     
}

if((d==6)&&(d1==c))
{
document.getElementById("cp1").innerHTML="";
us.push(b);
psw.push(c);
document.getElementById("det1").innerHTML=document.getElementById("name").value;
document.getElementById("det2").innerHTML=document.getElementById("uname").value;
document.getElementById("det3").innerHTML=document.getElementById("mail").value;
document.getElementById("det4").innerHTML=document.getElementById("mn").value;
document.getElementById("det5").innerHTML=document.getElementById("cn").value;
document.getElementById("det8").innerHTML=v;
if(h.checked)
document.getElementById("det6").innerHTML="female";
else if(j.checked)
   document.getElementById("det6").innerHTML="male";
document.getElementById("det7").innerHTML=document.getElementById("lan").value;
document.getElementById("table3").style.display="block";
alert("your response have been taken successfully");
}
else if(d1!=c)
{
   document.getElementById("cp1").innerHTML="recheck your password";
}
else if(d1==c)
{document.getElementById("cp1").innerHTML="";

}
else
{
}
{
}

}

On submitting the user data we can redirect the page to the actual required one.

venereology answered 2 years ago
Next > < Previous

Related Solutions

Create a web site to share your travel blog stories from multiple trips. Desktop site should...
Create a web site to share your travel blog stories from multiple trips. Desktop site should have three columns, the left being navigation, middle is your text, the right is some basic facts about the location that you visited. Tablet site should have two columns, dropping the right column. Mobile phone site should have one column, with the navigation becoming the drop-down list. In HTML, also don't worry about putting information on the columns you can just put some kind...
Using HTML: Create a Book of the Month Club Web site. The home page should describe...
Using HTML: Create a Book of the Month Club Web site. The home page should describe the current month's selection, including book title, author, publisher, ISBN, and the number of pages. Create separate Web pages for book selections in each of the last three months. Add links to the home page that opens each of the three Web pages. Save the home page as BookClub.html, and save the Web Pages for previous months using the name of the month. BOOK:...
Design an activities page to make this web site complete. a.Use your imagination to create at...
Design an activities page to make this web site complete. a.Use your imagination to create at least four activities. b.Organize these activities in a table. c.Some activities are free but some may charge some fee. d.Once again, the correct resort title and navigation menu bar shall be included.e.Include an image for each activity. Make sure the images’ size are the same.f.When mouse hovers on any image, its size will be enlarged.
what we should do to protect and secure Web Site and Web Application
what we should do to protect and secure Web Site and Web Application
You are to develop from the beginning a web site about yourself with regards to your...
You are to develop from the beginning a web site about yourself with regards to your course studies and any certifications you have done so far. This web site provides certain required details about your education/studies which you did. You will design and develop your web site with Notepad/Notepad++, HTML, Java Script and CSS. The purpose of this assignment is for you to build a web site that will contain some details about all of your course degrees you have...
1. (a)Can you configure your browser to open multiple simultaneous connections to a Web site? (b)What...
1. (a)Can you configure your browser to open multiple simultaneous connections to a Web site? (b)What are the advantages and disadvantages of having a large number of simultaneous TCP connections?
Visit one of your favorite websites in your desktop browser, and then visit the same site...
Visit one of your favorite websites in your desktop browser, and then visit the same site using the browser on a mobile device (tablet or phone). What, if any, differences do you see? Why do you think those differences exist? Are some activities easier on the desktop site than on the mobile site, or vice versa? Would you suggest any changes to the desktop or mobile sites based on your comparison? Does your LinkedIn profile contain the following elements? Demonstrate...
Create a program that will prompt for user information for a Web site. Use a structure...
Create a program that will prompt for user information for a Web site. Use a structure to store the data. The structure will need to include the following items: First Name - string Last Name - string Full Name - string Birth Date   - int (assume format yyyymmdd) IsLeasingAutomobile - bool yearlySalary - float Create a single structure from the items listed above. Prompt for all items except "Full Name" and load the input directly into a variable based on...
How do I create a backup and restore strategy for a web site and the database...
How do I create a backup and restore strategy for a web site and the database for the site?
Create one a one day travel package for 'Allocentric tourists' - The travel package should satisfy...
Create one a one day travel package for 'Allocentric tourists' - The travel package should satisfy the needs of these type of tourists - Travel package can be one or two pages long. - It should include the following information: - Which city/destination? You may choose a destination from the following countries: - USA/Canada/Nepal/Denmark - Detail of Activities Attractions to be visited Transportation Accommodation Food & beverage arrangements - What is the price in Canadian Dollars Per Person --------------------------------------------------
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT