Restore image fade in functionality

js/image.js

@@ -0,0 +1,18 @@
+export default class Image {
+  constructor(image) {
+    this.image = image;
+  }
+
+  showImage() {
+    this.image.style.opacity = 1;
+  }
+
+  fadeIn() {
+    this.image.style.opacity = 0;
+    this.attachLoadedEvent();
+  }
+
+  attachLoadedEvent() {
+    this.image.addEventListener('load', () => this.showImage());
+  }
+}

js/image.spec.js

@@ -0,0 +1,35 @@
+import Image from './image';
+
+const imageHtml = '<img src="foo.jpg"></img>';
+
+describe('Image', () => {
+  let image;
+
+  beforeEach(() => {
+    document.body.innerHTML = imageHtml;
+    image = document.querySelector('img');
+  });
+
+  it('Should initialize', () => {
+    const img = new Image(image);
+    expect(img).toBeInstanceOf(Image);
+  });
+
+  it('Should store a reference to the image element', () => {
+    const img = new Image(image);
+    expect(img.image).toBe(image);
+  });
+
+  test('fadeIn should set the element opacity to 0', () => {
+    const img = new Image(image);
+    img.fadeIn();
+    expect(img.image.style.opacity).toBe('0');
+  });
+
+  test('showImage should set the element opacity to 1', () => {
+    const img = new Image(image);
+    img.showImage();
+    expect(img.image.style.opacity).toBe('1');
+  });
+});
+

js/windy.js

@@ -1,9 +1,17 @@
 import Menu from './menu';
 import Navigation from './navigation';
+import Image from './image';
 
-const windy = {};
+const windy = {
+  images: [],
+};
 
 export default function init() {
+  document.querySelectorAll('img').forEach((image) => {
+    const img = new Image(image);
+    img.fadeIn();
+    windy.images.push(img);
+  });
   windy.menu = new Menu({
     container: document.querySelector('.Menu'),
   });