ZuoTi.Pro
Question

Please Help!!! Requirements: Use an external CSS & JS file, no internal or inline styles &...

Please Help!!!

Requirements:

  • Use an external CSS & JS file, no internal or inline styles & scripts
    • Please comment your JS to demonstrate your understanding of what is happening
  • Create a form with at least 2 inputs and a submit button
    • A good example would be First Name, Last Name, and Age.
  • Use JS to provide the user with some feedback on the values they enter or choose with your inputs
  • To do this you will need create a function that has an event listener on each of your inputs
    • The Event listener should call a function that evaluates the inputs value(what the user inputs)
      • HINT use this.value as it will refer to the triggering element (the input)
    • This function should take the value and use a conditional statement (if/else or switch) and provide the user with a message depending on the value. This message can appear anywhere in proximity of the form. In most form it happens below the input that triggered the feedback. The feedback can be silly, but should relate to the input value in an obvious way.
      • SUPER HINT: The JavaScript Book website has great examples of event handlers and listeners within a form. I have taken an example and added it below for reference as well. Check it out to make this assignment easier: http://javascriptbook.com/code/c06/ (Links to an external site.)
  • Style your page
    • Font, color, spacing and layout should be intentional and not default for all other elements on the page
    • Use classes for styling
    • As always no CSS frameworks all custom creations from your original self
  • Confirm that the code is properly indented & formatted.
  • Validate your code, there should be no errors
engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>External Styles and script </title>
    <!-- External Style link    -->
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1 class="title">Registration</h1>
    <!-- Registration Form   -->
    <form class="form">
        <div class="div">
            <label class="label">First Name</label>
            <input class="input" type="text" name="first_name" id="firstname">
        </div>
        <div class="div">
            <label class="label">Last Name</label>
            <input class="input" type="text" name="last_name" id="lastname">
        </div>
        <div class="div">
            <label class="label">Age</label>
            <input type="number" class="input" name="age" id="age">
        </div>
        <div class="div">
            <input type="submit" value="submit" class="submit" id="submit">
        </div>
    </form>

    <div class="feedback">
        <h2><span>First Name: </span><span id="displayfirstname"> </span></h2>
        <h3><span>LastName : </span><span id="lname"></span></h3>
        <h4><span>Age : </span><span  id="displayage"></span></h4>
    </div>
    <!--  External Javascript source   -->
    <script src="script.js"></script>
</body>
</html>

style.css:

* { box-sizing: border-box;}

.title {
    text-align: center;
    color: blue;
}

.form {
    width: 30%;
    height: 250px;
    margin: auto;
    background: #f080f0;
    padding: 25px;
    color: #fff;
    font-weight: 500;
    font-size: 20px;
    margin-bottom: 20px;
}
.label {
    display: inline-block;
    width: 150px;
}

.input {
    padding: 5px 8px;
}

.div {
    margin-top: 10px;
}

.submit {
    display: block;
    width: 80px;
    padding: 5px 8px;
    margin: auto;
    text-align:center;
    color: #fff;
    background: blue;
    border: none;
    border-radius: 3px;
    text-transform: capitalize;
}

.feedback {
    width: 50%;
    height: 300px;
    background: #222;
    margin: auto;
    color: #fff;
    padding: 30px;
}

.feedback h2 {
    height: 40px;
}

.feedback h3 {
    height: 30px;
}

script.js:

// grab the element from html
let firstName = document.querySelector('#firstname');
let lastName = document.querySelector('#lastname');
let age = document.querySelector('#age');
let displayFirstName = document.querySelector('#displayfirstname');
let displayLastName = document.querySelector('#lname');
let displayAge = document.querySelector('#displayage');
let submit = document.querySelector('#submit');
let firstNameLength = 0;

// change event on first name input
firstName.addEventListener('change', function () {
    firstNameLength = this.value.length;

    // check the length of first name
    if(firstNameLength > 20) {
        displayFirstName.textContent = "First name is very larze";
    } else  if (firstNameLength < 4) {
        displayFirstName.textContent = "First name is very short";
    } else  {
        displayFirstName.textContent = this.value;
    }
});

// keyup event on last name
lastName.addEventListener('keyup', function () {
    displayLastName.textContent = this.value;
});

// change event on age input
age.addEventListener('change', function () {
    displayAge.textContent = this.value;
});

// click event page not reload using preventDefault method
submit.addEventListener('click', function (event) {
    event.preventDefault();
});



Document checking completed. No errors or warnings to show. Source 1. <!DOCTYPE html> 2. <html lang=en> 3. <head> <meta chaDocument checking completed. No errors or warnings to show. Source t risimti con 1. * { box-sizing: border-box;} 3. .title {e
0 0
Add a comment
Know the answer?
Add Answer to:
Please Help!!! Requirements: Use an external CSS & JS file, no internal or inline styles &...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • USE THE GIVEN STARTER HTML & JS FILES (DON'T NEED CSS FILE): Using a state machine...

    USE THE GIVEN STARTER HTML & JS FILES (DON'T NEED CSS FILE): Using a state machine design pattern and keypress() create a website that can capture user keyboard input. Each time the user types in something and hits <enter> a new TODO list item will be added to the panel. Using click() add a reset button that clears the list. $(document).ready(function() { $("li").css("id", "uw"); const states = ["idle", "gather", "process"]; var state = states[0]; var words = new Array (...

  • Create an HTML5 page that contains a form to collect the following data. The text in...

    Create an HTML5 page that contains a form to collect the following data. The text in bold indicates the id value that should be assigned to each html control: Product (drop down list) product – iPad, iPhone 6S, Galaxy 5S, Moto X, and so on Quantity (number) quantity Unit price (number) unit_price Discount (%)(number) discount_rate Date (date)   order_date First Name (text box)   first_name Last Name (text box)   last_name Payment type (drop down list)   payment_type – Visa, Master, Discover, Amex, and...

  • Create an external JavaScript file/code and then write a function that displays an alert box. This...

    Create an external JavaScript file/code and then write a function that displays an alert box. This box will display when the user clicks the submit button to submit the information typed in the form, so be sure the alert box contains an appropriate message. please use the OnClick event handler for your form's submit button.

  • a) Write JavaScript code (Q4.js) that is executed when the place order button is pressed and...

    a) Write JavaScript code (Q4.js) that is executed when the place order button is pressed and it calculates the cost of each item (based on quantity specified) entered the online form and the overall total cost. The results should be displayed on the same page under the form submission button All JavaScript code must be external. If any fields are left blank or do not contain a number, an alert box should display an appropriate error message upon form submission...

  • Remember to include: A consistent design and color scheme An external CSS document to control these...

    Remember to include: A consistent design and color scheme An external CSS document to control these aspects CSS applied to a single page Use of inline styles A consistent navigation between parts of your site A minimum of 5-8 pages At least three external hyperlinks An email link with the subject filled in A form (it does NOT have to connect to a database because that is beyond the scope of this class) Properly placed images on at least three...

  • I'm having trouble to link the .js file to the html so changes for the html...

    I'm having trouble to link the .js file to the html so changes for the html to be made in the .js file <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>:JavaScript, HTML and jQuery</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- this is so I don't have to give you a separate CSS file --> <style>     .hidden {display: none;}     .menu { width: 100px;} </style> </head> <body> <div class="container"> <h1>Assignment 2: JavaScript, HTML and jQuery</h1> <p>To complete this...

  • Must be car Themed My first JS-DOM color:red; text node!'); //creates 'This is a text node!'...

    Must be car Themed My first JS-DOM color:red; text node!'); //creates 'This is a text node!' color:blue; font-family: arial; Clicker Counter: 0 Interface should look something like this, but does not have to be one for one like this picture One of JavaScript's powers is to be able to interact with the DOM directly. You've seen this when using commands such as document.getElementById("idName'). This document allows you to search HTML for certain elements. It turns out that you can also...

  • HTML / CSS Content Requirements Create a home page with the following elements and settings: Set...

    HTML / CSS Content Requirements Create a home page with the following elements and settings: Set the background, font colors, and “theme” to match those used in lab assignment #1 using an external css file; inline styling should be used only where necessary to override styling from the external css H1 element, centered at the top of the page, with “Thank you for choosing Your Company Name. . . “ text* Div or other container with at least 5 sentences...

  • Hello! I am to create a .js file that allows the paragraph on the bottom of...

    Hello! I am to create a .js file that allows the paragraph on the bottom of the page to update with what the user enters. I need to modify the given HTML to recognize the javascript file that I am to make from scratch. The HTML file and other details are below: Use the given HTML to add functionality to an interactive form that generates an invitation to volunteers for an event. The file will have the following invitation message...

  • javascript

    In this project you will write the JavaScript code to create a calculator. Good thing is that everyone knows how the calculator works. It is a challenging project, give yourself lots of time to complete it.1. You are provided with an HTML, and CSS files.. Look at these files to understandhow to use them and modify them if needed based on your code. (Note: You can adddifferent selector (id, class) in HTML ONLY and cannot make any changes to CSS.)Create...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT