Задать вопрос
@Dimchik2008
Делаю сайты
javascript

Мой код выглядит плохо или отлично?

Вот сайт: https://cleverslider.000webhostapp.com/ (там фигнюшка на весь экран торчит и за хостинга бесплатного, ну вроде все и так видно)

Можно ли как то по другому оформить код? Или все отлично?

HTML:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="style.css">
	<title>Слайдер</title>
</head>
<body>

	<div class="container-select">
		<form class="form-select">
			<select class="select">
				<option id="cars">Машины</option>
				<option id="sea">Море</option>
				<option id="desert">Пустыня</option>
				<option id="forest">Лес</option>
			</select>
		</form>
	</div>


	<div class="container-slider">
		<div class="main">
			<div class="slider">
				<img src="images/1.jpg" id="img1">
				<img src="images/2.jpg" id="img2">
				<img src="images/3.jpg" id="img3">
				<img src="images/4.jpg" id="img4">
			</div>
		</div>
	</div>

	<div class="container-button">
		<button class="buttonNext">Вперед</button>
		<button class="buttonBack">Назад</button>
		<h1 id="counter"></h1>
	</div>

	<script type="text/javascript" src="js.js"></script>
</body>
</html>


CSS:

body{
	background: black;
}

img{
	width: 700px;
	height: 394px;
}

.container-slider{

}

.main{
	width: 700px;
	height: 394px;
	border: 50px solid burlywood;
	border-radius: 25%;
	margin: 0 auto;
	margin-top: 200px;
	overflow: hidden;
}

.slider{
	width: 700px;
	height: 394px;
	display: flex;
	position: relative;
	left: 0;
	transition: all ease 1s;
}


button{
	padding: 20px;
	border-radius: 50px;
	color: black;
	font-size: 15px;
	font-weight: 900;
	height: 80%;
	margin-top: 10px;
}

.container-button{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 50px;
	position: relative;
	background: burlywood;
	height: 100px;
	border-radius: 5%;
}

.buttonNext{
	margin-right: 100px;
	margin-left: 100px;
	background: green;
	border: 3px solid darkgreen;
}

.buttonBack{
	margin-right: 100px;
	margin-left: 100px;
	background: red;
	border: 3px solid darkred;
}

.buttonNext:active{
	background: darkgreen;
	border: 4px solid green;
}

.buttonBack:active{
	margin-right: 100px;
	margin-left: 100px;
	background: darkred;
	border: 3px solid red;
}


#counter{
	color: deeppink;
	font-size: 50px;
	display: flex;
	position: absolute;
}

.container-select{
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	margin-left: 100px;
	margin-top: 200px;
}

.select{
	padding: 25px;
	font-size: 30px;
	outline: none;
	border: none;
	border-radius: 35px;
}


#cars{
	background: red;
}


#sea{
	background: #1E90FF;
}

#desert{
	background: #F0E68C	;
}

#forest{
	background: #008000	;
}


JAVASCRIPT:

//////////// Cмещение блока с картинками ////////////

let left = 0

////////////////////////////////////////////////////////


/////////////////////////// значение счетчика картинока //////////

let numberCounter = 1

//////////////////////////////////////////////////////////////////


//////////////// Главные объекты сайта //////////////////

let slider = document.querySelector('.slider')
let buttonNext = document.querySelector('.buttonNext')
let buttonBack = document.querySelector('.buttonBack')
let counter = document.querySelector('#counter')

let img1 = document.querySelector('#img1')
let img2 = document.querySelector('#img2')
let img3 = document.querySelector('#img3')
let img4 = document.querySelector('#img4')


/////////////////////////////////////////////////////////


/////////////// Стандартное значение счетчика картинок /////////////

counter.innerHTML = numberCounter + '/4';

////////////////////////////////////////////////////////////////////


//////////// Логика кнопок ///////////////////////////////////////

buttonNext.addEventListener('click', function(){
	left += 700; /// смещение блока с картинками /////
	numberCounter += 1; ///////// значение счетчика картинок ////////
	counter.innerHTML = numberCounter ///// 
	if(left > 2100){
		left = 0;
	}
	if(numberCounter > 4){
		numberCounter = 1;
	}
	slider.style.left = -left + 'px'; /// смещение блока с картинками ////////
	counter.innerHTML = numberCounter + '/4'; /////// добавление в  счетчик картинок /////////
})

buttonBack.addEventListener('click', function(){
	left -= 700;
	numberCounter -= 1;
	if(left < 0){
		left= 2100;
	}
	if(numberCounter < 1){
		numberCounter = 4;
	}
	slider.style.left = -left + 'px' 
	counter.innerHTML = numberCounter + '/4';
})

///////////////////////////////////////////////////////////////////////

//////////////////// Значение меню выбора темы //////////////

let cars = document.querySelector('#cars') 	   // 0 (index) //
let sea = document.querySelector('#sea') 	   // 1 (index) // 
let desert = document.querySelector('#desert') // 2 (index) //
let forest = document.querySelector('#forest') // 3 (index) //

//////////////////////////////////////////////////////////



/////////////////// Выбор темы ///////////////////////

const select = document.querySelector('.select')

//////////////////////////////////////////////////////



///////// Стандартное значение выбора темы/////////

select.selectedIndex = 0
select.style.background = 'red'

///////////////////////////////////////////////



///////////// условия для выбора значение в select ////////////////////

select.onchange = function() {

if (select.selectedIndex == 0){
  select.style.background = 'red'

  slider.style.left = 0 + 'px' 

  counter.innerHTML = 1 + '/4'

  img1.src = 'images/1.jpg'
  img2.src = 'images/2.jpg'
  img3.src = 'images/3.jpg'
  img4.src = 'images/4.jpg'

}

else if (select.selectedIndex == 1){
  select.style.background = '#1E90FF'

  slider.style.left = 0 + 'px' 

  counter.innerHTML = 1 + '/4'

  img1.src = 'images/sea1.jpg'
  img2.src = 'images/sea2.jpg'
  img3.src = 'images/sea3.jpg'
  img4.src = 'images/sea4.jpg'

}

else if (select.selectedIndex == 2){
  select.style.background = '#F0E68C'

  slider.style.left = 0 + 'px' 

  counter.innerHTML = 1 + '/4'

  img1.src = 'images/desert1.jpg'
  img2.src = 'images/desert2.jpg'
  img3.src = 'images/desert3.jpg'
  img4.src = 'images/desert4.jpg'

}

else if (select.selectedIndex == 3){
  select.style.background = '#008000'

  slider.style.left = 0 + 'px' 

  counter.innerHTML = 1 + '/4'

  img1.src = 'images/forest1.jpg'
  img2.src = 'images/forest2.jpg'
  img3.src = 'images/forest3.jpg'
  img4.src = 'images/forest4.jpg'

}

}

/////////////////////////////////////////////////////////////////////////
  • Вопрос задан
  • 379 просмотров
5 комментариев
Подписаться 1 Простой 5 комментариев
Пригласить эксперта
Ответы на вопрос 5
osvex
@osvex
https://habr.com/ru/post/143452/
Ответ написан
Комментировать
Комментировать
@Rerurk
Js из серии, " А назовука я всё переменные через a b c" .
Ответ написан
2 комментария
2 комментария
RAFAILgaley
@RAFAILgaley
; это лишнее в js
Ответ написан
1 комментарий
1 комментарий
@besbesArt
HTML и css нормально. Главное, чтобы структура по классам выглядела понятна.

В JS названия переменных надо всегда придумывать. Иначе потом непонятно, что это за a,b,c. Пусть даже длинные названия, но названия должны быть обозначать назначение переменой.
Ответ написан
Комментировать
Комментировать
olegbarabanov
@olegbarabanov
Программист, фрилансер (ИП)
1) Что касательно JS - рекомендую обратить внимание на
Airbnb JavaScript style guide или на Google JavaScript Style Guide.
Код должен быть в одном стиле. Т.е. либо везде используете ; либо нигде.

2) Также от себя лично добавлю, старайтесь обозначать переменные по умолчанию как const. Если вам не хватает const потому что вам надо переназначать переменную - только тогда делайте let.

Немного модифицируем ваш пример 
let a = 0 
let b = 1 
const b2 = '/4'
const slider = document.querySelector('.slider')
const buttonNext = document.querySelector('.buttonNext')
const buttonBack = document.querySelector('.buttonBack')
const counter = document.querySelector('#counter')

Благодаря const мы сразу видим, что переменные не будут переназначаться (т.е. readonly). Правильное использование const и let - важный элемент самодокументирования кода.

3) Что касается CSS - присмотритесь к Google HTML/CSS Style Guide
Например, в вашем случае порядок свойств в CSS классах не придерживается какого-либо порядка, поэтому читать такое неудобно. Сделайте по алфавиту (за исключением вендорных свойств). Этот пункт как-раз описан тут.
Естественно это не надо ручками делать - поэтому вам придется познакомиться с различными системами автоматического форматирования кода.

4) Именование в CSS классах должно быть единого стиля. У вас в коде есть и .buttonBack и .container-button - lowerCamelCase и CamelCase стиль в CSS использовать нежелательно.

Так-то еще много есть замечаний (вроде неосмысленных названий переменных и пр.) - но это уже перечислили выше. По большей части строго настроенные линтеры кода вам будут хорошими помощниками и укажут на подобные проблемы.
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Developer (backend / fullstack)
Brightdata • Тель-Авив
от 5 500 до 6 500 $
Ещё вакансии
Заказы с Хабр Фриланса
Парсинг свободных билетов
08 мая 2024, в 20:15
50000 руб./за проект
Верстка сайта
08 мая 2024, в 20:07
7000 руб./за проект
Софт на js
08 мая 2024, в 20:04
10000 руб./за проект
Ещё заказы