Как добавить прямоугольной области функционал кнопки?

Question

CoCoCoder @CoCoCoder

Новичок в веб-программировании,только учусь. :)

HTML

Как добавить прямоугольной области функционал кнопки?

В общем,сделал интерфейс калькулятору,так,как мне понравилось.Но,когда дело дошло до написания его функционала - всё застопорилось.Потому что я банально не понимаю,как добавить прямоугольной области(к примеру,у кнопки "=" это оранжевая часть вокруг неё) функционал кнопки.Подскажите,пожалуйста.Я полный новичок в этом плане.Прикладываю фотографию получившегося.

Вопрос задан более трёх лет назад
82 просмотра

12 комментариев

Подписаться 1 Простой 12 комментариев

freelion93 @freelion93

А код приложите?

Написано более трёх лет назад
CoCoCoder @CoCoCoder Автор вопроса

freelion93, да,конечно.А куда лучше?Или прям так вставлять?Просто мой первый вопрос здесь.

Написано более трёх лет назад
freelion93 @freelion93

CoCoCoder, вставляешь в сообщение сюда с вклюением в поле Исходный код, значок < / >

Написано более трёх лет назад

CoCoCoder @CoCoCoder Автор вопроса

<!DOCTYPE html>
<html>
	<head>
		<title>CoCoCoder</title>
		<meta charset = "utf-8">
		<link rel = "stylesheet" href = "calculator-style.css">
		<script src = "calculator-script.js" defer ></script>
	</head>
	<body>
		<div class = "button-number">
			<div class = "button-1"><span class = "1">1</span></div> <!-- 65px --> 
			<div class = "button-2">2</div>
			<div class = "button-3">3</div>
			<div class = "button-4">4</div>
			<div class = "button-5">5</div>
			<div class = "button-6">6</div>
			<div class = "button-7">7</div>
			<div class = "button-8">8</div>
			<div class = "button-9">9</div>
			<div class = "button-0" type = "button" value = "0" onclick = 'insert(0)'>0</div>
			<div class = "button-star">*</div>
			<div class = "button-slash">/</div>
			<div class = "button-equal">=</div>
			<div class = "button-amount">+</div>
			<div class = "button-difference">-</div>
			<div class = "button-degree">^</div>
			<div class = "output-line" type = "textarea"><input type = "textarea" class ="textview"></input></div>
		</div>
		<div class = "bkground"></div>
	</body>
</html>

.button-number {
	text-align:center;
}
.button-1 {
	height: 60px;
	width:60px;
	background-color:#F1F3F4;
	border-radius:20px;
	font-size:40px;
	margin-left:450px;
	margin-top:450px;
}
.button-2 {
	height: 60px;
	width:60px;
	background-color:#F1F3F4;
	border-radius:20px;
	font-size:40px;
	margin-left:515px;
	margin-top:-60px;
}
.button-3 {
	height: 60px;
	width:60px;
	background-color:#F1F3F4;
	border-radius:20px;
	font-size:40px;
	margin-left:580px;
	margin-top:-60px;
}
.button-4 {
	height: 60px;
	width:60px;
	background-color:#F1F3F4;
	border-radius:20px;
	font-size:40px;
	margin-left:450px;
	margin-top:-125px;
}
.button-5 {
	height: 60px;
	width:60px;
	background-color:#F1F3F4;
	border-radius:20px;
	font-size:40px;
	margin-left:515px;
	margin-top:-60px;
}
.button-6 {
	height: 60px;
	width:60px;
	background-color:#F1F3F4;
	border-radius:20px;
	font-size:40px;
	margin-left:580px;
	margin-top:-60px;
}
.button-7 {
	height: 60px;
	width:60px;
	background-color:#F1F3F4;
	border-radius:20px;
	font-size:40px;
	margin-left:450px;
	margin-top:-125px;
}
.button-8 {
	height: 60px;
	width:60px;
	background-color:#F1F3F4;
	border-radius:20px;
	font-size:40px;
	margin-left:515px;
	margin-top:-60px;
}
.button-9 {
	height: 60px;
	width:60px;
	background-color:#F1F3F4;
	border-radius:20px;
	font-size:40px;
	margin-left:580px;
	margin-top:-60px;
}
.button-0 {
	height:60px;
	width: 60px;
	background-color:#F1F3F4;
	border-radius:20px;
	font-size:40px;
	margin-left:515px;
	margin-top:135px;
}
.button-star {
	height:60px;
	width:60px;
	background-color:#F3A447;
	border-radius:20px;
	font-size:40px;
	margin-left:450px;
	margin-top:-60px;
}
.button-slash {
	height:60px;
	width:60px;
	background-color:#F3A447;
	border-radius:20px;
	font-size:40px;
	margin-left:580px;
	margin-top:-60px;
}
.button-equal {
	height:125px;
	width:60px;
	background-color:#F3A447;
	border-radius:20px;
	font-size:40px;
	margin-left:645px;
	margin-top:-125px;
}
.button-amount {
	height:60px;
	width:60px;
	background-color:#F3A447;
	border-radius:20px;
	font-size:40px;
	margin-left:645px;
	margin-top:-190px;
}
.button-difference {
	height:60px;
	width:60px;
	background-color:#F3A447;
	border-radius:20px;
	font-size:40px;
	margin-left:645px;
	margin-top:-125px;
}
.button-degree {
	height:60px;
	width:60px;
	background-color:#F3A447;
	border-radius:20px;
	font-size:40px;
	margin-left:645px;
	margin-top:-125px;
}
.output-line {
	width:190px;
	height:50px;
	margin-top:-55px;
	margin-left:450px;
	background-color:#fff;
}
.bkground {
	background-color:#4D4D4D;
	height:330px;
	width:270px;
	border-radius:20px;
	margin-left:443px;
	margin-top:-200px;
	z-index:-1;
	position:relative;
}
.textview {
	border:0px solid #fff;
	height:60px;
	width:30px;
}

Написано более трёх лет назад

CoCoCoder @CoCoCoder Автор вопроса

freelion93, прошу палками не кидаться,потому как только посмотрев гайд узнал,что калькулятор целесообразнее делать таблицей.)

Написано более трёх лет назад
Сергей Карвасарный @megapihar6

но там не все так просто в калькуляторе будет у тебя))
snippet
Вот тебе пример калькулятора делал когда-то на счет красивого кода не обещаю) быстро накидал и забыл про него) eval() почитай про это.
snippet

Написано более трёх лет назад
CoCoCoder @CoCoCoder Автор вопроса

Сергей Карвасарный, Извините,а в каком смысле?Я немного не понимаю сути данного скриншота.Это консоль?

Написано более трёх лет назад
freelion93 @freelion93

CoCoCoder, вообще да, а так нужно внутрь засунуть кнопки вместо div
<button class = "button-2">2</button>
и уже стилизовать их

Написано более трёх лет назад
CoCoCoder @CoCoCoder Автор вопроса

freelion93, Спасибо Вам.

Написано более трёх лет назад
freelion93 @freelion93

CoCoCoder, да нзч

Написано более трёх лет назад
Сергей Карвасарный @megapihar6

CoCoCoder, кнопка была)) я подкинул готовый калькулятор смотри если нужно будет

Написано более трёх лет назад
CoCoCoder @CoCoCoder Автор вопроса

Сергей Карвасарный, Понял.Вам тоже спасибо большое,разобрался!

Написано более трёх лет назад

Решения вопроса 2

3 комментария

Комментировать

Пригласить эксперта

Ваш ответ на вопрос

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

Войти через центр авторизации

Похожие вопросы

HTML

+1 ещё

Простой
Почему html,vs code.в текстовом файле открывается весь набранный код?
- 1 подписчик
- 7 часов назад
- 73 просмотра
2

ответа
HTML

+2 ещё

Простой
Как поставить видео на всю ширину флекс элемента?
- 1 подписчик
- 8 часов назад
- 50 просмотров
0

ответов
JavaScript

+1 ещё

Средний
Как правильно сделать переключение темы?
- 1 подписчик
- 18 часов назад
- 97 просмотров
2

ответа
HTML

+3 ещё

Простой
Почему третья карточка не становиться в ряд?
- 1 подписчик
- вчера
- 160 просмотров
1

ответ
HTML

+1 ещё

Простой
Как добиться срабатывания transition для checkbox?
- 1 подписчик
- 02 нояб.
- 83 просмотра
3

ответа
HTML

Простой
Как преобразовать HTML в exe?
- 2 подписчика
- 02 нояб.
- 337 просмотров
4

ответа
HTML

+1 ещё

Простой
Как сделать Second Picker?
- 1 подписчик
- 02 нояб.
- 106 просмотров
2

ответа
HTML

Простой
Чем и как вы тестируете WAI-ARIA?
- 1 подписчик
- 01 нояб.
- 62 просмотра
0

ответов
HTML

+1 ещё

Простой
Как исправить эффект при наведении?
- 1 подписчик
- 01 нояб.
- 109 просмотров
0

ответов
HTML

Простой
Чему равна высота и ширина элемента .content в следующем коде?
- 1 подписчик
- 31 окт.
- 49 просмотров
0

ответов
Показать ещё Загружается…

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Frontend Developer

Wanted. • Санкт-Петербург

До 180 000 ₽

Оптимизация ботов телеграм

06 нояб. 2024, в 00:20

1000 руб./за проект

Смарт-контракт на блокчейне TON

06 нояб. 2024, в 00:03

40000 руб./за проект

Ручное тестирование приложения в сторах (iOS и Android)

05 нояб. 2024, в 23:19

3000 руб./за проект

freelion93, да,конечно.А куда лучше?Или прям так вставлять?Просто мой первый вопрос здесь.
CoCoCoder, вставляешь в сообщение сюда с вклюением в поле Исходный код, значок < / >
freelion93, прошу палками не кидаться,потому как только посмотрев гайд узнал,что калькулятор целесообразнее делать таблицей.)
но там не все так просто в калькуляторе будет у тебя))
snippet
Вот тебе пример калькулятора делал когда-то на счет красивого кода не обещаю) быстро накидал и забыл про него) eval() почитай про это.
snippet
Сергей Карвасарный, Извините,а в каком смысле?Я немного не понимаю сути данного скриншота.Это консоль?
CoCoCoder, вообще да, а так нужно внутрь засунуть кнопки вместо div
<button class = "button-2">2</button>
и уже стилизовать их
CoCoCoder, кнопка была)) я подкинул готовый калькулятор смотри если нужно будет
Сергей Карвасарный, Понял.Вам тоже спасибо большое,разобрался!

Answer 1 · 2019-08-07 19:30:21

Алексей Ярков @yarkov

Помог ответ? Отметь решением.

Так делать вообще не надо. Кнопка должна быть кнопкой. Кнопка тоже прекрасно стилизуется.

Ответ написан более трёх лет назад

3 комментария

Answer 2 · 2019-08-07 23:51:07

Здравствуйте. Как уже упомянули, лучше кнопки делать кнопками. Но функционал калькулятора вы всё равно будете писать на JavaScript. Там конечно неважно div это или кнопка, но раз уж для кнопки сделали отдельный элемент - то его точно стоит использовать. Если вы с JavaScript вообще не знакомы - рекомендую сначала выучить этот язык. Потом уже станет понятно как реализовать функционал калькулятора. Код, по моему, никто не будет писать вместо вас, так что учитесь, поищите в интернете и точно найдёте то, что вам понадобится.

Как добавить прямоугольной области функционал кнопки?

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

Минуточку внимания

Войдите на сайт