Answer to Question #221614 in HTML/JavaScript Web Application for osama

Question

Answer to Question #221614 in HTML/JavaScript Web Application for osama

Question #221614

i. Login page with username and password

ii. Contact form with Passport picture, Submit button

a. Create a folder with ‘’ My First Project_Student ID’’. Also, use HTML to create the main heading as ‘’MELCOM WEBSITE’’

b. For you to validate the login page and form. It is important to write JavaScript to ensure the accuracy of the form element before submission.

c. Provide five (5) images of your choice and include your Passport picture/image for the entire webpage.

d. Link the pages to each section to ensure effective navigation of the pages.

e. Use your skills in JavaScript to provide dynamism to your pages to meet your design.

Note:

a. You are required to bring texts of your own, paragraph, line break, and headings

b. Use any color of your choice where appropriate also use font style and font size where no further instruction is given.

Expert's answer

index.html

<!DOCTYPE html>
<html>
<head>
  <title>MELCOM WEBSITE</title>
  <link rel="stylesheet" href="main.css">
  <style>
  table{
  width : 80px;
  border : 20px solid #bdc3c7;
  padding : 20px;
  margin : 20px auto;
  background-color : #3498db;
  letter-spacing : 0.2cm;
  }
  .bum{
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  }
  .tum{
  float: right;
}
.act{
display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

  </style>
</head>

<body>
<ul class = "bum">
<li class = "tum" ><a class="act" href="#home">Home</a></li>
  <li class = "tum"><a class="act" href="https://upsa.edu.gh/">USPA</a></li>
</ul>
    <center><h1>MELCOM WEBSITE</h1></center>
    
    <ol>
    <li>Fruits</li>
    <ul>
    <li>Apple</li>
    <li>Apricots</li>
    <li>Avocado</li>
    <li>Banana</li>
    </ul>
    <li>Cereals</li>
    <ul>
    <li>Wheat</li>
    <li>Rice</li>
    <li>Oats</li>
    <li>Maize</li>
    </ul>
    <li>Vegetables</li>
    <ul>
    <li>Carrot</li>
    <li>Garlic</li>
    <li>Broccoli</li>
    <li>Spinach</li>
    </ul>
    <li>Carbohydrates</li>
    <ul>
    <li>Bread</li>
    <li>Beans</li>
    <li>Potatoes</li>
    <li>Popcorn</li>
    </ul>
    </ol>
    <br><br>
    <table>
    <tr>
    <th>Citrus</th>
    <th>Stone Fruit</th>
    <th>Berries</th>
    <th>Melons</th>
    </tr>
    <tr>
    <td>Orange</td>
    <td>Nectarines</td>
    <td>Bananas</td>
    <td>Watermelons</td>
    </tr>
    <tr>
    <td>Grapefruit</td>
    <td>Apricots</td>
    <td>Mangoes</td>
    <td>Rockmelons</td>
    </tr>
    <tr>
    <td>Mandarin</td>
    <td>Peaches</td>
    <td></td>
    <td>Honeydew melons</td>
    </tr>
    <tr>
    <td>Limes</td>
    <td>Plums</td>
    </tr>
    </table>
    
 
</body>
</html>

login.html

<!DOCTYPE html>
<html>
<head>
  <title>MELCOM WEBSITE</title>
  <link rel="stylesheet" href="main.css">
 
  <script>
function validateForm() {
  var name=document.myform.name.value;  
var password=document.myform.password.value;  
 
if (name==null || name==""){  
  alert("Name can't be blank");  
  return false;  
}else if(password.length<6){  
  alert("Password must be at least 6 characters long.");  
  return false;  
  }  
}  

</script>
</head>

<body>
    <center><h1>MELCOM WEBSITE</h1></center>
    
  <div class="wrapper">
    <form class="form" name = "myform" action= "indexm.html" onclick="return validateform()" method = "post">
      <div class="pageTitle title">Login</div>
      <div class="secondaryTitle title">Please fill this form to login.</div>
      <input type="text" class="name formEntry" placeholder="UserName" />
      <input type="text" class="password formEntry" placeholder="Password"/>
      
      <button class="submit formEntry" >Submit</button>
    </form>
  </div>
 
</body>
</html>

contact.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="main.css">
  <title>MELCOM WEBSITE</title>
  <script>
function validateForm() {
  var name=document.myform.name.value;  
var email=document.myform.email.value;
var message=document.myform.message.value;   
 
if (name==null || name==""){  
  alert("Name can't be blank");  
  return false;  
}else if((/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(myForm.emailAddr.value)){
    return true;
    }
    else{
  alert("Email is incorrect!!");  
  return false;  
  }  
  else if (message == null || message == "")
  {
  alert("Message can't be blank");
  return false;
  }
}  

</script>

</head>

<body>
<center><h1>MELCOM WEBSITE</h1></center>
  <div class="wrapper">
    <form class="form" name = "myform" action= "indexm.html" onclick="return validateform()" method = "post">
      <div class="pageTitle title">Contact Form</div>
      
      <input type="text" class="name formEntry" placeholder="Name" />
      <input type="text" class="email formEntry" placeholder="Email"/>
      <textarea class="message formEntry" placeholder="Message"></textarea>
      
      
      <button class="submit formEntry">Submit</button>
    </form>
  </div>
 
</body>

</html>

main.css

body {
  background-color: #d1f3e7;
}

#title-Tag-Line {
  font-size: 20px;
}


/* form animation starts */
.form {
  background: #fff;
  box-shadow: 0 30px 60px 0 rgba(90, 116, 148, 0.4);
  border-radius: 5px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 5px;
  padding-bottom: 5px;
  left: 0;
  right: 0;
  position: absolute;
  border-top: 5px solid #0e3721;
/*   z-index: 1; */
  animation: bounce 1.5s infinite;
}
::-webkit-input-placeholder {
  font-size: 1.3em;
}

.title{
  display: block;
  font-family: sans-serif;
  margin: 10px auto 5px;
  width: 300px;
}
.termsConditions{
  margin: 0 auto 5px 80px;
}

.pageTitle{
  font-size: 2em;
  font-weight: bold;
}
.secondaryTitle{
  color: grey;
}

.name {
  background-color: #ebebeb;
  color: black;
}
.name:hover {
  border-bottom: 5px solid #0e3721;
  height: 30px;
  width: 380px;
  transition: ease 0.5s;
}
.password {
  background-color: #ebebeb;
  color: black;
}
.password:hover {
  border-bottom: 5px solid #0e3721;
  height: 30px;
  width: 380px;
  transition: ease 0.5s;
}

.email {
  background-color: #ebebeb;
  height: 2em;
}

.email:hover {
  border-bottom: 5px solid #0e3721;
  height: 30px;
  width: 380px;
  transition: ease 0.5s;
}

.message {
  background-color: #ebebeb;
  overflow: hidden;
  height: 10rem;
}

.message:hover {
  border-bottom: 5px solid #0e3721;
  height: 12em;
  width: 380px;
  transition: ease 0.5s;
}

.formEntry {
  display: block;
  margin: 30px auto;
  min-width: 300px;
  padding: 10px;
  border-radius: 2px;
  border: none;
  transition: all 0.5s ease 0s;
}

.submit {
  width: 200px;
  color: white;
  background-color: #0e3721;
  font-size: 20px;
}

.submit:hover {
  box-shadow: 15px 15px 15px 5px rgba(78, 72, 77, 0.219);
  transform: translateY(-3px);
  width: 300px;
  border-top: 5px solid #0e3750;
  border-radius: 0%;
}

@keyframes bounce {
  0% {
    tranform: translate(0, 4px);
  }
  50% {
    transform: translate(0, 8px);
  }
}

Learn more about our help with Assignments: Programming & Computer Science

Comments

No comments. Be the first!

Answer to Question #221614 in HTML/JavaScript Web Application for osama

Comments

Leave a comment

Related Questions