Question

In: Computer Science

Use HTML, CSS, jQuery and Bootstrap to do the following: 1. Add four buttons "Start", "Stop",...

Use HTML, CSS, jQuery and Bootstrap to do the following:

1. Add four buttons "Start", "Stop", "Back", "Reset". <button type="button">

2. Add "glyphicon-shopping-cart" to <div id="sc" style="font-size: 100px; color: blue; ">.
Use CSS in embeded style to set
<style type="text/css">
    #sc{

border-style: dotted; /* Required to animate border width */
border-color: red;
border-width: 0;
}
</style>

3. <script>

- "Start", call "animate()" function to move it to right by 300px for
each click, speed is 2000. left: "+=300px". Hint: chaining
call animate({borderBottomWidth: "0px"},500)
in css, border-bottom-with:

- "Stop", call "stop()" function stop movement, show bottom border color
in red. Hint: use "Chaining" to call stop() and
animate({borderBottomWidth: "10px"},500)

- "Back", call "animate()" function to move it to left by 300px for
each click, speed is 2000.

- "Reset", call "animate()" function to the begining positon. left: "0".
"Chaining" call.

Solutions

Expert Solution

Working code implemented in HTML, CSS, jQuery & Bootstrap and appropriate comments provided for better understanding.

Source Code:

<!doctype html>
<html lang-"en">
   <head>
       <meta charset-"utf-8"/>
       <title>Assignment</title>
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-
   BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstraptheme.
   min.css" integrity="sha384-
   rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-
   Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
   <script>
       $(document).ready(function() {

           $("#start").click(function() {
               $("#sc").animate({borderBottomWidth: "0"},500).animate({
                   marginLeft: "+=300px",
               }, 2000);
           });

           $("#stop").click(function() {
               $("#sc").stop().animate({borderBottomWidth: "10px"},500).css("borderBottomWidth", "10px");
           });

           $("#back").click(function() {
               $("#sc").animate({borderBottomWidth: "0"},500).animate({
                   marginLeft: "-=300px",
               }, 2000);
           });

       $("#reset").click(function() {
           $("#sc").animate({borderBottomWidth: "0"},500).animate({
               marginLeft: "0px",
           }, 500);
           });

       });
</script>
   <style media="screen">
       .button-container {
           padding: 10px 0px 50px 10px; /*T10-R0-B50-L10*/
       }
       #sc {
           display: inline-block; /*only take up space needed*/
           border-style: dotted;
           border-color: red;
           border-width: 0;
           font-size: 100px;
           color: blue;
       }
   </style>

   </head>

   <body>
       <div class="button-container">
           <button id="start" type="button" name="button">Start</button>
           <button id="stop" type="button" name="button">Stop</button>
           <button id="back" type="button" name="button">Back</button>
           <button id="reset" type="button" name="button">Reset</button>
       </div>

<!--START animate({borderBottomWidth: "0px"},500) -->
<!--STOP stop().animate({borderBottomWidth: "10px"},500) -->
<!--BACK animate() -->
<!--RESET animate() -->

       <div id="sc">
           <span class="glyphicon glyphicon-shopping-cart"></span>
       </div>

   </body>
</html>

Sample Output Screenshots:

venereology answered 1 year ago
Next > < Previous

Related Solutions

Use HTML&CSS& JavaScript to: 3-4) Write a JQuery Ajax program which can communicate with flicker to...
Use HTML&CSS& JavaScript to: 3-4) Write a JQuery Ajax program which can communicate with flicker to get the last pictures taken from any place or related to any concept(s) the user has written in a textbox, say Sydney, train. Some information associated with the image like its topic, time taken, and its link needs to be appeared with it. 3-5) Develop a server which can serve the file you developed in 3-4. 3-6) Add a plugin to the real jQuery...
Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any...
Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any of the following: • Your hobbies, likes/dislikes, career aspirations, dream job, favorite animals/ pets, favorite superhero, etc. • You do not have to share personal information that you are uncomfortable with sharing. Follow these guidelines when creating your page: • Include at least one heading (h1, h2, etc.) in your web page. • Provide a quote from a book, movie, etc. • Include at...
Develop a personal web page for yourself using HTML, CSS, and Javascript Use the following HTML...
Develop a personal web page for yourself using HTML, CSS, and Javascript Use the following HTML tags to design your webpage: <h1>...</h1>,<h3>...</h3>, <h6>...</h6>, <p>...</p>, <b>...</b>, <i>...</i>, <a>...</a>, <img...>, <table>... </table>, <div>...</div>, <form>...</form>, <input type="text">, and <input type= "submit"> Use an external css to change the default style of your webpage. You must use at least one element selector, one id selector, and one class selector Using text input and submit button, allow the user to change the background color of...
Purpose: To practice the use of HTML and CSS Game Review Website 1. You will write...
Purpose: To practice the use of HTML and CSS Game Review Website 1. You will write a website for the fictitious company Game Gurus. The website will have a home page that you will design, as well as pages created by each "guru." (At least 2 gurus are required). The home page will include: o A description of the site o A quote from each guru o Links to manufacturers websites o Links to the TopTen.html and GameOfTheWeek.html pages for...
Create 1 HTML page and 1 CSS file for all the styles. Your html page will...
Create 1 HTML page and 1 CSS file for all the styles. Your html page will be a small gallery of images using the Polaroid style. The page should have at least 1 row of 3 images. You can choose any theme of images. Don't pick random images, make them all have a theme. Add an h1 tag for the header of your page. Style the h1 tag with a color, size, and font family. Include a paragraph tag under...
Please use HTML and CSS - Create the overlay and popup: Note: this is my original...
Please use HTML and CSS - Create the overlay and popup: Note: this is my original code just add it to to make the next steps please: HTML: <nav> <ul class="Login-button"> LOG IN</ul> </nav> CSS: *{ margin: 0; padding: 0; list-style-type: none; } nav { height: 50px; background: #DEDFE0; display: flex; align-items: center; padding: 0 20px; } .login-button { padding: 5px 8px; cursor: pointer;} .login-button: hover { background: #BCBDC0; } PLEASE do the following: Create a transparent grey overlay over...
use CSS, java and HTML to make a charity admin page. It's a web page after...
use CSS, java and HTML to make a charity admin page. It's a web page after you log in to your account. I can have personal information, the amount of money donated, the children who have received charity, and some blogs. In fact, all the things are what I want. But you are free to do whatever You like, even if you don't say what I say. I just need a charity Admin page for charity User.Don't ask me for...
use CSS, java and HTML to make a charity admin page. It's a web page after...
use CSS, java and HTML to make a charity admin page. It's a web page after you log in to your account. I can have personal information, the amount of money donated, the children who have received charity, and some blogs. In fact, all the things are what I want. But you are free to do whatever You like, even if you don't say what I say. I just need a charity Admin page for charity User.Don't ask me for...
use CSS, java and HTML to make a charity admin page. It's a web page after...
use CSS, java and HTML to make a charity admin page. It's a web page after you log in to your account. I can have personal information, the amount of money donated, the children who have received charity, and some blogs. In fact, all the things are what I want. But you are free to do whatever You like, even if you don't say what I say. I just need a charity Admin page for charity User.Don't ask me for...
use CSS, java and HTML to make a charity admin page. It's a web page after...
use CSS, java and HTML to make a charity admin page. It's a web page after you log in to your account. I can have personal information, the amount of money donated, the children who have received charity, and some blogs. In fact, all the things are what I want. But you are free to do whatever You like, even if you don't say what I say. I just need a charity Admin page for charity User.Don't ask me for...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT