JSFiddle - React, Tailwind, and code Playground

by Kanatantsin

HTML

<article class="article-block">
  <h2 class="article-header">Misplaced New York</h2>
  <p class="article-description">
    Eleven New York City landmarks have been misplaced, their current location unknown. Photographs of unclear origin appear to show them scattered across the globe – on sand dunes, mud flats, “lunar” plains, and rocky beaches. Nobody knows exactly what happened or why. Did they act of their own volition? Was there foulplay involved? What does it all mean? Stories trickle in from the future, from architects, online reviewers, and the buildings themselves, but these only add to the confusion. Your curiosity and help is much appreciated.
  </p>

  <div class="article-gallery">
    <img id="currentPhoto" src="https://netology-code.github.io/hj-homeworks/browser/slider/i/spinner.gif" alt="">
    <button id="prevPhoto">Назад</button>
    <button id="nextPhoto">Вперед</button>
  </div>

  <div class="article-text">
    <ul class="list">
      <li class="list-item">
        Building the brutalist Breuer Building in the bloody boondocks was brutal. But worth it. Try making a clay pot inside a kiln, or basting a turkey that’s still in the oven. That’s what it was like at night, when the gnats crawled out of every little crack in the ground and kamikaze-attacked our eyeballs. I honestly don’t remember how we got the concrete on site. Mules? It was all such a blur. There’s only one window because the glass was so hot none of the guys would touch it. Nah, I’m just kidding. Breuer wanted it that way. I kind of like it; it’s like a cyclops eye or a barnacle or something.
      </li>
      <li class="list-item">
        Guggenheim museums began sprouting across the globe, from the Basque Country to faraway Dubai, until there was nowhere else for them to grow. The board of directors sent agents to scour the earth for primitive lands that knew nothing of modern and contemporary art. At last word arrived of such a place. A check was written, migrant workers hired,...

CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700,800');

body {
  font-family: 'Open Sans', sans-serif;
  width: 1280px;
  margin: 0 auto;
  color: #333333;
  background-color: #76c7c0;
}

button {
  background-color: #e8645a;
  border: none;
  outline: none;
  color: #ffffff;
  font-size: 22px;
  font-weight: 500;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px;
  transition: 0.6s;
}

button:hover {
  background-color: #ffffff;
  color: #e8645a;
  transition: 0.6s;
  cursor: pointer;
}

.article-block {
  background-color: #f3f3f3;
  padding: 50px;
  height: 100%;
}

.article-header {
  font-weight: 600;
  font-size: 32px;
  color: #7f8c8c;
}

.article-description {
  height: 125px;
  font-size: 18px;
}

.article-description::before {
  content: "";
  display: block;
  height: 100%;
  width: 3px;
  margin-right: 15px;
  background: #76b7b1;
  float: left;
}

.article-gallery {
  width: 100%;
  height: 800px;
  overflow: hidden;
  position: relative;
}

.article-gallery img {
  min-width: 100%;
  min-height: 100%;
  display: block;
}

.article-gallery img::after {
  content: attr(alt);
  display: block;
}

#prevPhoto {
  left: 0;
}

#prevPhoto::before {
  content: "« ";
  font-size: 35px;
  line-height: 22px;
  vertical-align: text-top;
}

#nextPhoto {
  right: 0;
}

#nextPhoto::after {
  content: " »";
  font-size: 35px;
  line-height: 22px;
  vertical-align: text-top;
}

.article-text {
  padding: 25px 50px;
}

.list {
  list-style-type: none;
  padding: 0;
}

.list-item {
  margin-bottom: 25px;
  text-indent: 10px;
  line-height: 1.5;
}

.list-item::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  margin: 5px;
  border-radius: 50%;
  float: left;
  background-color: #e8645a;
}

.list-item::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 5px;
  border-radius: 50%;
  background-color: #83ccc5;
  vertical-align: middle;
}

JavaScript

'use strict';

const photosArray = [
  'https://netology-code.github.io/hj-homeworks/browser/gallery/i/breuer-building.jpg',
  'https://netology-code.github.io/hj-homeworks/browser/gallery/i/guggenheim-museum.jpg',
  'https://netology-code.github.io/hj-homeworks/browser/gallery/i/headquarters.jpg',
  'https://netology-code.github.io/hj-homeworks/browser/gallery/i/IAC.jpg',
  'https://netology-code.github.io/hj-homeworks/browser/gallery/i/new-museum.jpg'
];

const currentIndex = 0;
//console.log(currentIndex);

const currentPhoto = document.getElementById("currentPhoto");
const nextBtn = document.getElementById("nextPhoto");

function nextPhoto(currentIndex){
currentIndex = currentIndex + 1;
console.log(currentIndex);
currentPhoto.src = photosArray[currentIndex];
return currentPhoto.src;
}

/*gallery.flippingNext = function(){
  if(gallery.currentIndex > gallery.photosArray.length - 1) {
    console.log("Кнопка нажата");
    gallery.currentIndex = 0;
    currentPhoto.src = gallery.photosArray[gallery.currentIndex];
    gallery.currentIndex = gallery.currentIndex + 1;
  }
  return currentPhoto;
}

gallery.flippingPrev = function(){
  if(gallery.currentIndex < 0) {
    console.log("Кнопка нажата");
    gallery.currentIndex = gallery.photosArray.length - 1;
    currentPhoto.src = gallery.photosArray[gallery.currentIndex];
    gallery.currentIndex = gallery.currentIndex - 1;
  }
  return currentPhoto;
}

const prevPhoto = document.getElementById("prevPhoto");
const nextPhoto = document.getElementById("nextPhoto");
prevPhoto.onclick = gallery.flippingPrev;
nextPhoto.onclick = gallery.flippingNext;
const currentPhoto = document.getElementById("currentPhoto");*/
//prevPhoto.onclick = gallery.photosArray[gallery.currentIndex]
nextBtn.onclick = nextPhoto;
//console.log(nextPhoto);
//currentPhoto.src = gallery.photosArray[gallery.currentIndex];
//console.log(gallery.photosArray[0]);