ZuoTi.Pro
Question

finished the web page ********************************************************* .js // I've added a span with the id "count" which...

finished the web page

*********************************************************

.js

// I've added a span with the id "count" which you can use to modify
// the number of clicks on the page
// you can do this by getting the value; incrementing it and then
// modifying the value of the span


function changeColor(){
    const colors = ['red', 'green', 'blue', 'cyan', 'yellow', 'black', 'silver', 'tan'];

    // Choose a random float from [0, 1) the multiply by length to get random index
    // Math.floor() clamps to an integer for the index
    const colorIndex = Math.floor(Math.random() * colors.length);
    color = colors[colorIndex];

    // get the "ball" div
    const ball = document.getElementById("ball");
    // Set it's background color
    ball.style.background = color;
}

function moveBall () {
    // get the ball
    const ball = document.getElementById("ball");
    // subtract the width/height of the ball so that it is always fully on screen
    const width = window.innerWidth - ball.offsetWidth;
    const height = window.innerHeight - ball.offsetHeight;

    // pick random coordinates
    const x = Math.floor(Math.random() * width);
    const y = Math.floor(Math.random() * height);
    
    // put the ball there
    ball.style.left =  `${x}px`;
    ball.style.top = `${y}px`;
}

// Put the ball back at the bottom of the page and
// reset the number of clicks to 0
function reset () {
    // You should use the ball's left and top (not bottom)
    console.log("IMPLEMENT THIS FUNCTION");
}

*****************************************************************

.html

<!DOCTYPE html>
<html>
    <head>
        <title>JS Example</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="js_example.css">
        <script src="js_example.js"></script>
    </head>
    <body>
        <header>Simple JavaScript/DOM interaction example.</header>
        <nav>
            <div id="color-button" onclick="changeColor(); moveBall()">
                Change Color
            </div>
            <span>
                Clicks: <span id="cound">0</span>
            </span>
            <div id="reset-button" onclick="reset()">Reset</div>
        </nav>
        <div id="ball" onclick="moveBall()"></div>
    </body>
</html>

******************************************************************

.css

body {
    font-family: "Helvetica", "Trebuchet", sans-serif;
    font-size: 1em;
    line-height: 1.5em;
}

/* The `#` symbol indicates an `id`.   Use `.` for `class`. */

#reset-button{
    background-color: rgb(165, 44, 44);
    text-align: center;
    max-width: 8em;
    border: 1px solid rgb(165, 44, 44);
    border-radius: 0.2em;
    color: whitesmoke;
    /* The following rule will center the button horizontally: */
    margin: 0 auto;
}

#color-button{
    background-color: rgb(67, 189, 8);
    text-align: center;
    max-width: 8em;
    border: 1px solid rgb(38,118,0);
    border-radius: 0.2em;
    /* The following rule will center the button horizontally: */
    margin: 0 auto;
}

#ball {
    background-color: rgb(204,0,51); /* AState Scarlet, Pantone 186 */
    width: 100px;
    height: 100px;
    border-radius: 50px;
    position: absolute;
    /* Let's start the ball in the middle as well: */
    /* Note: if `calc` doesn't work, just remove this line */
    left: calc(50% - 50px);
    /* and 1 em unit above the bottom of the window */
    bottom: 1em;
    /* And we want it to always appear "behind" the button */
    z-index: -1;
}

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

Homework Answers

Answer #1

js_example.js

// I've added a span with the id "count" which you can use to modify
// the number of clicks on the page
// you can do this by getting the value; incrementing it and then
// modifying the value of the span
// grab the element span
let spanEle = document.getElementById('count');
let count = 0;


function changeColor(){
    const colors = ['red', 'green', 'blue', 'cyan', 'yellow', 'black', 'silver', 'tan'];

    // Choose a random float from [0, 1) the multiply by length to get random index
    // Math.floor() clamps to an integer for the index
    const colorIndex = Math.floor(Math.random() * colors.length);
    color = colors[colorIndex];

    // get the "ball" div
    const ball = document.getElementById("ball");
    // Set it's background color
    ball.style.background = color;
}

function moveBall () {
    // get the ball
    const ball = document.getElementById("ball");
    // subtract the width/height of the ball so that it is always fully on screen
    const width = window.innerWidth - ball.offsetWidth;
    const height = window.innerHeight - ball.offsetHeight;

    // pick random coordinates
    const x = Math.floor(Math.random() * width);
    const y = Math.floor(Math.random() * height);

    // put the ball there
    ball.style.left =  `${x}px`;
    ball.style.top = `${y}px`;
    count++;
    spanEle.innerText = count;
}

// Put the ball back at the bottom of the page and
// reset the number of clicks to 0
function reset () {
    // You should use the ball's left and top (not bottom)
    console.log("IMPLEMENT THIS FUNCTION");
    const ball = document.getElementById("ball");
    ball.style.backgroundColor = 'rgb(204, 0, 51)';
    ball.style.position = 'absolute';
    ball.style.left = 'calc(50% - 50px)';
    ball.style.bottom = '1em';
    ball.style.zIndex = -1;
    count = 0;
    spanEle.innerText = count;
}

**********************************************************************

index.html

<!DOCTYPE html>
<html>
<head>
    <title>JS Example</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="js_example.css">

</head>
<body>
<header>Simple JavaScript/DOM interaction example.</header>
<nav>
    <div id="color-button" onclick="changeColor(); moveBall()">
        Change Color
    </div>
    <span>
                Clicks: <span id="count">0</span>
            </span>
    <div id="reset-button" onclick="reset()">Reset</div>
</nav>
<div id="ball" onclick="moveBall()"></div>
<script src="js_example.js"></script>
</body>
</html>

*************************************************************

js_example.css

body {
    font-family: "Helvetica", "Trebuchet", sans-serif;
    font-size: 1em;
    line-height: 1.5em;
}

/* The `#` symbol indicates an `id`.   Use `.` for `class`. */

#reset-button{
    background-color: rgb(165, 44, 44);
    text-align: center;
    max-width: 8em;
    border: 1px solid rgb(165, 44, 44);
    border-radius: 0.2em;
    color: whitesmoke;
    /* The following rule will center the button horizontally: */
    margin: 0 auto;
}

#color-button{
    background-color: rgb(67, 189, 8);
    text-align: center;
    max-width: 8em;
    border: 1px solid rgb(38,118,0);
    border-radius: 0.2em;
    /* The following rule will center the button horizontally: */
    margin: 0 auto;
}

#ball {
    background-color: rgb(204,0,51); /* AState Scarlet, Pantone 186 */
    width: 100px;
    height: 100px;
    border-radius: 50px;
    position: absolute;
    /* Let's start the ball in the middle as well: */
    /* Note: if `calc` doesn't work, just remove this line */
    left: calc(50% - 50px);
    /* and 1 em unit above the bottom of the window */
    bottom: 1em;
    /* And we want it to always appear "behind" the button */
    z-index: -1;
}
0 0
Add a comment
Know the answer?
Add Answer to:
finished the web page ********************************************************* .js // I've added a span with the id "count" which...
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

  • Does my css style sheet look okay? /* Author:       Your Name --> Natasha Strange /*...

    Does my css style sheet look okay? /* Author:       Your Name --> Natasha Strange /* Date:           Today's Date --> September 22, 2019 /* Description:   Lab Number --> Lab04 /*doctype css*/ @import url(fonts/chuckfive.css); @import url(fonts/merriweather.css); body    { background-color: rgb(199,201,191);        } div { border: 1px solid black;        padding: 100px 100px 100px 100px;        background-color: gray; } nav { text-align: center;    color: rgb( 7,20,138); } header, footer   { background-color: rgb(199,201,199);        color:...

  • HTML css When i refresh the page, the picture doesnt move at all for #i1 i...

    HTML css When i refresh the page, the picture doesnt move at all for #i1 i have width and height but the pictuers doesn't move please fix it. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> <style> body{ background-color:#FFA07A; } #h1{ color:white; text-decoration:none; padding:30px; } #h2{ color:white; text-decoration:none; padding:30px; } #navbar1{ background-color:grey; text-align:center; font-size:35px; height:100%px; border:1px solid black; position:absolute; text-decoration:none; margin-left:300px; } #h3{ color:white; text-decoration:none; padding:30px; } #b1{ background-color:grey; font-size:30px; } i1{ width:10px; height:20px; } </style> <body> <div...

  • Need help with creating this JavaScript file. I'm not sure where or how to begin. 1. You are working solely with the DOM object. Thus, you should be coding primarily in the js file. You must use...

    Need help with creating this JavaScript file. I'm not sure where or how to begin. 1. You are working solely with the DOM object. Thus, you should be coding primarily in the js file. You must use the addEventListener, in addition you may need to use id and class attributes as needed. The .html and .css files have been provided to you. See the .png files for an example of what is expected. 2. Place the javaScript file in its...

  • In this exercise, you’ll upgrade a version of the MPG application so the error messages are...

    In this exercise, you’ll upgrade a version of the MPG application so the error messages are displayed in span elements to the right of the text boxes. Open the HTML and JavaScript files in this folder: exercises_short\ch06\mpg\ Then, run the application and click the Calculate MPG button to see that an error message is displayed in an alert dialog box for each of the two input fields. 2. In the HTML file, add a span element after the input element...

  • for Javascript, JQuery When the page is first opened a user will see the name field...

    for Javascript, JQuery When the page is first opened a user will see the name field and the three vacation images to the left of the page. The page should behave according to the following rules. 1. When a user's mouse pointer goes over any image, that image's border will change to be "outset 10px" and when the mouse pointer leaves that image it's border will change to "none". 2. When the user clicks a "Vacation" image on the left,...

  • As part of this assignment we are using the base Gallery HTML and writing JavaScript code...

    As part of this assignment we are using the base Gallery HTML and writing JavaScript code that will: 1) preload the images provided to us, 2) Create rollover functionality for each of the thumbnails in your image gallery 3) Use appropriate images found in the images folder. 4) Write developer comments to describe the variables being declared and explain the functions and logical blocks of JavaScript code pertaining to the gallery. I know it has to be an external JS...

  • How do i make my html show 10 results per page, and how do i make...

    How do i make my html show 10 results per page, and how do i make the books clickable to show results about them? <!DOCTYPE html> <html> <head> <title>Google Books Search</title> <script src="https://code.jquery.com/jquery-2.1.4.min.js"> </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <style> body{ background:lightblue } .wrap{ max-width:400px; margin:auto; margin-top:10px; } .pagination, pagination-last{ float:left; } a{ text-decoration:none; padding:15px 20px; border:1px solid black; border-right:none; background:#f2f2f2; font-size:18px; font-weight:bold; } .pagination-last a{ border-right:1px solid black; } a:hover { background:orange; color;white; } </style> <!-- <script src="js/main.js"></script> --> <script> function B_Search()...

  • 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>...

  • Problems: Develop a web page that allows a user to try out different text and background...

    Problems: Develop a web page that allows a user to try out different text and background color combinations by clicking buttons. Use Javascript to implement the functionalities. Below are two screen shots of the working application. Clicking the buttons at the bottom changes either the foreground color or the background color. The following descriptions are about the details. Specifically, you have to implement: An HTML file should include the following features (3 points) Some texts (Anything you like) Put the...

  • Develop the Change Calculator application In this exercise, you’ll create an application that displays the minimum...

    Develop the Change Calculator application In this exercise, you’ll create an application that displays the minimum number of quarters, dimes, nickels, and pennies that make up the number of cents specified by the user. Without the use of a JavaScript Library (for coins). 1.      Open the HTML and JavaScript files below: 2.      In the JavaScript file, note that three functions are supplied. The $ function. The start of a calculateChange function. And an onload event handler that attaches the calculateChange...

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