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 1 year 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...
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...
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 --------------------------------------------------
Your blog post should have a unique title. It should summarize the current event source with...
Your blog post should have a unique title. It should summarize the current event source with the hyper link to the source. The blog post should connect to our textbook and sociological concepts. It should be at least 400 words. Lastly, it should be grammatical correct. To complete this assignment you should: First, student must create a blog, which I provide another document showing step by step instructions. Student will only have to do this once. After that is done,...
Please use markup language HTML5 please. For this homework assignment, you will create a Web site...
Please use markup language HTML5 please. For this homework assignment, you will create a Web site made up of three different pages and links between those pages Index.htm The Web pages in a site should have a similar look-and-feel. For this site, you should create a simple menu as follows: Create a horizontal line across the very top and bottom of the page. Also on the home (Index) page, create links to the other two pages. The links should appear...
Referencing the blog posts from Karl Denniger’s Market Ticker blog and your textbook readings this week...
Referencing the blog posts from Karl Denniger’s Market Ticker blog and your textbook readings this week analyze how income and cultural trends can impact an individual’s diet. Cite examples that support your conclusions. http://market-ticker.org/akcs-www?singlepost=3356715. http://market-ticker.org/akcs-www?singlepost=3356669. Please reference those links for the answer an put the link in APA format and also use APA for citing references in-txt and end of document citations.
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT