<title>Rolling looping</title> <style type="text/css "> @import url('https://fonts.googleapis.com/css?family=Amatic+SC'); @import url('https://fonts.googleapis.com/css?family=Amatic+SC|Coming+Soon'); h1 {font-family: 'Amatic SC', cursive; font-size: 200%;} ul {list-style-type: none; margin: 50px; padding-left:30px; } body { font-family: sans-serif; text-align: center;} img { padding-left: 5cm; } .red { color: red; } body {padding: 5rem;} </style>

Whee!

<nav>

<ul>
    
  <li><a href="#" target ="_blank">Introduction</a></li>  
   <li><a href="#" target ="_blank">Address</a></li>   
    <li><a href="#" target ="_blank">Guide</a></li>  
    
</ul>


</nav>

tag with id of "roller" from the HTML var theImg = document.querySelector("img#roller"); // set the src attribute of the img to be the first element in source array theImg.setAttribute("src", imageSources[0]); // TODO: set howMany variable to a value user inputs var howMany = prompt ("how many times?") var counter = 1 // TODO: execute this loop the number of times user requested while(counter <= 100){ console.log("Wheee! This is the ", counter+5, " time we've done this!"); // find value of counter modulo length of sources array- // this value will increase by one on each iteration of the loop, // so image source will cycle through all possible images var theOne = counter % imageSources.length; // reset the src of the image to the next member of the sources array theImg.setAttribute("src", imageSources[theOne]); // TODO: increment the counter } // EXTRA CHALLENGES: // 1. Using JS, add a class of "red" to the

. // This only needs to be done once, so code should be outside loop. // 2. Execute the loop only half as many times, or twice as many times, as the user requested. // 3. Add a pause to each loop, so user can see each image as it cycles past. // This is a difficult one! </script>

wujiayu1995 / hw-2 Goto Github PK

hw-2's Introduction

Whee!

. // This only needs to be done once, so code should be outside loop. // 2. Execute the loop only half as many times, or twice as many times, as the user requested. // 3. Add a pause to each loop, so user can see each image as it cycles past. // This is a difficult one! </script>

hw-2's People

Contributors

Watchers

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent