The Scenario: A Startup Company Wishes To Build A Website
The Scenarioa Startup Company Wishes To Build a Website For Their Onli
The Scenarioa startup company wishes to build a website for their online dating business. They have employed a designer who has produced the following design using graphics software. The software used by the designer only produces an image and does not produce HTML. The company has now contracted you to implement the design, i.e., build the web page. The specifications include a working form component.
The company thinks the designer has done a great job and wants you to implement the design without modifications. Here is a mockup of the page that the client wants you to build: Technical Overview From a technical point of view, the webpage is constructed using HTML and CSS. Most of the HTML content are form elements. Some JavaScript will be required, but you will not have to write it, only follow the instructions to include it where needed. Interactive Features The client's specifications require you to have two interactive features in the web page. When the mouse is moved over any form control or its associated label, the label text will turn blue. When the mouse moves off it, it will return to its normal color. This will be accomplished using CSS. Immediately after the user selects the image of his/her face, the image is to be shown in the web page. A small piece of JavaScript will be provided for you to use for this. However, you are not expected to understand the JavaScript code at this stage, nor should you create any other JavaScript for this assignment. Assignment Tasks There are 3 tasks in this assessment. For Task 1: You will use HTML to create the webpage structure and add content, without any CSS. For Task 2: Apply visual styles to the webpage using CSS. For Task 3: Add the interactive features to the webpage. Each task has been further separated into smaller parts to help organize your approach. Detailed requirements and instructions are given below. Special Notes: You will complete this assignment during the workshop using the Paired Coding method, which your instructor will explain to you before you begin. Paired Coding is a very common collaborative coding method that many teams use, especially with junior developers. Practicing the paired coding method in your workshops will give you experience with this type of collaboration, as well as make the workshop experience more interesting and productive. As this is a mock client-contractor scenario, you will be graded for accuracy. It is important that you carefully check your work against the design specifications provided to ensure that your finished product exactly matches the design. You should especially check things like spelling, capitalization, and punctuation, as these are commonly overlooked. This exercise will help you fine-tune your attentiveness to small details, which is a critical skill for developers.
*
Paper For Above instruction
body {
font-family: Verdana, Arial, sans-serif;
}
p {
margin: 0;
}
legend {
background-color: purple;
border-radius: 10px;
color: white;
padding: 12px;
}
fieldset {
background-color: lavender;
border: 10px solid darkblue;
border-radius: 20px;
margin-bottom: 10px;
width: 720px;
padding: 10px;
}
div {
margin: 10px;
}
label {
display: inline-block;
text-align: right;
vertical-align: top;
width: 200px;
}
input[type="radio"] + label,
input[type="checkbox"] + label {
width: auto;
}
.range-caption {
background-color: darkcyan;
color: white;
padding: 6px;
text-align: center;
}
input[type="submit"] {
background-color: darkcyan;
border-radius: 10px;
color: white;
font-size: 20px;
padding: 12px;
cursor: pointer;
}
/ Interactive feature: labels turn blue on hover over associated input or label /
div:hover {
color: blue;
}
Enter Your Details For Our Dating Website
// Assuming the provided JavaScript code to update image preview is included in "yourJavaScriptFile.js"
// No additional JavaScript needed for this demonstration.