ZuoTi.Pro
Question

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 assignment, download this page and create a local <code>.js</code> to link in.</p>

<p>For each problem, write JavaScript code <strong>in the linked file</strong>. Use comments to indicate the code for each problem, like:</p>

<pre>// Solution for problem 1</pre>

<p>You will edit this file only to link in the JavaScript file and to add JavaScript-friendly tags (e.g. <code>div</code>, <code>span</code>) and <code>class</code> and <code>id</code> attributes. <strong>No inline code or event handlers</strong>.</p>

<p>Keep in mind that the linked JavaScript page runs top-to-bottom <em>as soon as it is retrieved</em>, not when the page is done loading.</p>

<p>Submit both files (<code>.html</code> and <code>.js</code>) to the GitHub repository</pre></p>

<h2>Using JavaScript...</h2>

<div class="panel panel-default">
<div class="panel-heading">
    <h4>Problem 1</h4>
    <p>Replace the text below with "I hate you, Bob."</p>
</div>

<div class="panel-body">
    <p id="wishes">Happy Birthday, Bob!</p>
</div>
</div>

<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://momentjs.com/downloads/moment.js"></script>
<script src="app.js"></script>
</body>
</html>

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

.html 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">

<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://momentjs.com/downloads/moment.js"></script>

<!-- calling external js file to change the text -->
<script src="test.js"></script>


<!-- 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 assignment, download this page and create a local <code>.js</code> to link in.</p>

<p>For each problem, write JavaScript code <strong>in the linked file</strong>. Use comments to indicate the code for each problem, like:</p>

<pre>// Solution for problem 1</pre>

<p>You will edit this file only to link in the JavaScript file and to add JavaScript-friendly tags (e.g. <code>div</code>, <code>span</code>) and <code>class</code> and <code>id</code> attributes. <strong>No inline code or event handlers</strong>.</p>

<p>Keep in mind that the linked JavaScript page runs top-to-bottom <em>as soon as it is retrieved</em>, not when the page is done loading.</p>

<p>Submit both files (<code>.html</code> and <code>.js</code>) to the GitHub repository</pre></p>

<h2>Using JavaScript...</h2>

<div class="panel panel-default">
<div class="panel-heading">
<h4>Problem 1</h4>
<p>Replace the text below with "I hate you, Bob."</p>
</div>

<div class="panel-body">
<p id="wishes">Happy Birthday, Bob!</p>
</div>
</div>


</body>
</html>

text.js file

// calling the function when page is loaded

$(function(){
// changging the text of a wishes # is for id
$("#wishes").text("I hate you, Bob.");
});

0 0
Add a comment
Know the answer?
Add Answer to:
I'm having trouble to link the .js file to the html so changes for the html...
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

  • Hi Expert I need to make a html checkout page link from product page <!DOCTYPE html>...

    Hi Expert I need to make a html checkout page link from product page <!DOCTYPE html> <html lang="en"> <head>     <link rel="stylesheet" href="bootstrap/css/bootstrap.css">     <link rel="stylesheet" href="style.css">     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>     <script src="./bootstrap/js/bootstrap.js"></script>     <meta charset="UTF-8">     <title>Perry Gerry Mobile Cellular</title> </head> <body> <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 bg-white border-bottom shadow-sm">     <h5 class="my-0 mr-md-auto font-weight-normal">Perry Gerry Mobile Cellular</h5>     <nav class="my-2 my-md-0 mr-md-3">         <a class="p-2 text-dark" href="index.html">Home</a>         <a class="p-2 text-dark" href="about.html">About Us</a>         <a class="p-2 text-dark" href="products.html">Products</a>         <a class="p-2 text-dark"...

  • Look at the following illustrated output for an HTML and a css given below <!DOCTYPE html>...

    Look at the following illustrated output for an HTML and a css given below <!DOCTYPE html> <head> <title>TABLE with STYLE SHEET</title> <meta charset="utf-8" /> <meta name="description" content="Godaddy Webpage original" /> <link rel = "stylesheet" href="GoDaddy_assignment_1.css"> <body> <img src= "GoDaddy.png"/> <p>Welcome to:<strong>webhamster.com</strong></br> This web page is parked<strong>Free</strong>courtesy of <a class="aclass1" href ="https://www.godaddy.com">GoDaddy.com</a></p> <h1>Want to buy<span class ="span2">webmaster.com ?</span></h1> <div class ="div1"> <a class ="aclass2" href="https://www.godaddy.com">Learn How</a> </div> </hr> <button>Search Ads</button> </body> </html> “ QUESTION continued Given the corresponding css file .aclass1{color:purple;}...

  • Using form events functions to answer this question. Use the attached form html file which contains...

    Using form events functions to answer this question. Use the attached form html file which contains 2 html radio buttons. When the first choice is chosen, display the text ”First” under the first choice. When the second choice is chosen, display the text ”Second” under the second choice. Instead of using JavaScript complete this question using JQuery <!DOCTYPE html> <html> <head>     <title>midterm exam</title>     <link rel="stylesheet" href="css/q1.css" /> </head> <body>     <div id = "page">        <form>   ...

  • HTML/CSS/ Bootstrap grids to create image I am attemted to recreate a photo using bootstrap grids...

    HTML/CSS/ Bootstrap grids to create image I am attemted to recreate a photo using bootstrap grids and have come across a snag. I need this: To look more like this.... It does not really need to be perfect as far as scaling, at this point I just want the yellow box in the corner with borders like the pic. Also the original pic has white borders that we are ignoring. HTML <!doctype html> <html lang="en"> <head> <!-- Required meta tags...

  • Task 3: Creating a Simple jQuery Application 1. Launch HTML-Kit. 2. Create a new HTML file...

    Task 3: Creating a Simple jQuery Application 1. Launch HTML-Kit. 2. Create a new HTML file and save it as nnLab8.htm. 3. Add the following HTML to the file: <!DOCTYPE HTML> <html> <head> <title>Hello World - jQuery Style</title> </head> <body> <div id="first"></div> <div id="second"></div> <a href="#" id="link">Click Me!</a><br /> <span id="greeting"></span> </body> </html> 4. Add the following<script> element to the<head> section. NOTE: Use the jQuery version number that matches the file name of the file you downloaded in Step 1....

  • In this problem, you will create a selectable “To Do” List. To add a task to...

    In this problem, you will create a selectable “To Do” List. To add a task to this list, the user clicks the Add Task button and enters a description of the task. To delete a task from the list, the user selects the task and then clicks the Delete Task button. Open the HTML and JavaScript files provided as start-up files (index.html from within todo_list_Q.zip file). Then, review the HTML in this file. Note, within the div element, there is...

  • Hello Ive been tryting to add the CDN of jquery to my html code and I...

    Hello Ive been tryting to add the CDN of jquery to my html code and I keep getting an error Need help with this : ​​ Navigate to www.code.jquery.com in your Chrome browser. On this page, you'll find different stable versions of jQuery. Select uncompressed for jQuery Core 3.3.1. Copy the <script> tag that is given to you. In store_hours.html, paste that tag directly above your body's closing tag. This is the jQuery CDN. After you paste this code into...

  • can you do this js and html question. ill give you the html and js and...

    can you do this js and html question. ill give you the html and js and css files just fix my error use if and else like what i did dont use switch just fix my erorr. <!DOCTYPE html> <!-- Webpage HTML document for Lab 4. Authors: Amirhossein Chinaei, Andriy Pavlovych For: EECS 1012, York University, Lassonde School of Engineering --> <html lang="En"> <head> <meta charset="UTF-8"> <!-- title for web page --> <title> EECS1012: Lab 4 - Computational Thinking </title>...

  • trying to get this html to calculate tax values, useing a js library file,    <script...

    trying to get this html to calculate tax values, useing a js library file,    <script type="text/javascript"> { var number; function Icometace(income, itemized) // Assynes: income .=0, itemzed .=0 // Returns: flat tax (13%) due after deductions { var deduction, taxableIcome, total tax; deduciton= Math.max(itermized, 4150): taxableIncome = Math.max(income - debuction, o); toatltax = 0.13*tableTincome return totaltax; } *^js code***\/ html code* <html> <head> <title> taxes </title> <script type="text/javascript"> { var number; function Icometace(income, itemized) // Assynes: income .=0, itemzed...

  • HTML: ch14 IC_1B - use a fadeToggle to control jQuery to show the second part of...

    HTML: ch14 IC_1B - use a fadeToggle to control jQuery to show the second part of the content on Chp 14 slide 33. <!DOCTYPE html> <html lang="en"> <head>    <title> jQuery </title>    <meta charset="utf-8">    <style>        #details { display: none; }    </style>       <xxxx src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></xxxx>       </head> <body>    <h1>jQuery</h1>        <p>Many websites, including Amazon and Google, use jQuery, to provide interaction and dynamic effects on web pages.        <a href="#" id="more">...

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