The sliding carousel

1. Add ten forecast boxes to your HTML and use flexbox to initially distribute them horizontally in the "window" box (I called it "range" in the code from lecture) behind which they will slide back and forth. At this point they might all be jammed up to the left, for instance.
2. Write a Javascript function init() that is run when the page is first loaded, that uses the relative or absolute position in CSS and the "left" style property in Javascript to correctly space the ten boxes so that exactly the first five of them are visible, and the rest are off to the right side and unseen. To grab all ten boxes into your Javascript code, give them a class (eg. "steppy") instead of an id, use the document.getElementByClassName method to grab them from the DOM as a list, and use a for loop to run through the list and position each box:
   
   function init() {
var range = document.getElementById("range");
var rangeWidth = range.clientWidth;
var steppers = document.getElementsByClassName("stepper");
var n = steppers.length;
for (i = 0; i < n; i++) {
...
}
}
   
   You'll need to calculate yourself how much space to put between boxes to get exactly five to show up in the "window" box, based on the "clientWidth" property of the the "window".
3. Get the right forecast text into the boxes.
4. Implement shifting the boxes when the buttons are pushed. Figure out how far to move the inner forecast boxes, by changing their "left" positions, so as to always show exactly five in the window. Make the buttons do this motion in one single big jump. Remember that the values for "left" are strings, eg. "-57px", and you need to do any calcualtions using numbers!
5. Then, to get a beautifully animated transition, in the CSS for the inner forecast box class (eg. "steppy") add the lines:
   
   transition-property: left;
transition-duration: 1s;
   
   Savor the coolness.