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.

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>

</body>
</html>

Sample Output Screenshots:

venereology answered 1 year ago

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

Build a html form (making use of CSS and Javascript) with the following elements. The form...

Build a html form (making use of CSS and Javascript) with the following elements. The form must have validations and within a table format. • Name: a text box where the content must start with 1 upper case characters and no special character (i.e. !, @, #, $, %, &, *). Number is not allowed. The text box must not be empty. • Module code: a text box where the content must start with 3 lower case alphabets and follows...

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

5 html files minimum (does not include css file) Use of all three methods of css...

5 html files minimum (does not include css file) Use of all three methods of css (inline, internal, external). Have inline and internal css on all 5 html files and use one external css file that styles all 5 html pages Use div tags to section off part of the pages and add border radius the divs 1 paragraph on at least 5 html pages (1 paragraph must have at least 6 sentences) The following CSS properties must be used...

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

HTML WEBSITE WITH CSS LAYOUT 1. Create a studentregistration form with the following fields: > Email...

HTML WEBSITE WITH CSS LAYOUT 1. Create a studentregistration form with the following fields: > Email Address (Email) > Desired Username (Text box) > Password (Password) > Family name (Text box) > Middle Name/Initial (Text box) > First name (Text box) > Gender (Radio Button - Male or Female only!) > ID Number (Text box) > Mobile Number (Text box) > Landline Number (Text box) > Permanent Home Address (Text box) > Degree/Course (Text box) > Year Level (Drop down...

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

CSS and HTML multiple choice Which of the following are true for vector images? They have...

CSS and HTML multiple choice Which of the following are true for vector images? They have to be rasterized eventually. They are good for photorealism. They are good for drawing shapes and logos. They are stored inefficiently. They are resolution independent. They are effectively bitmaps. They are stored efficiently.