-
Notifications
You must be signed in to change notification settings - Fork 0
/
button.js
103 lines (86 loc) · 2.63 KB
/
button.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
function getForteButton () {
const style = document.createElement('style')
document.head.appendChild(style)
style.sheet.insertRule(`
.button {
display: block;
cursor: pointer;
width: 210px;
height: 45px;
background: #fff;
color: #e3010f;
border: 1px solid #e3010f;
font-size: 14px;
text-decoration: none!important;
transition: background .25s ease-in;
}
`, style.sheet.cssRules.length)
style.sheet.insertRule(`
.button__inner {
margin: auto;
max-width: 210px;
}
`, style.sheet.cssRules.length)
style.sheet.insertRule(`
.button__logo {
float: left;
width: 29px;
height: 30px;
margin: 7px 20px 8px 29px;
background: url('https://cosmos-magazine.imgix.net/file/spina/photo/10822/170621-Puppy-Full.jpg?fit=clip&w=835');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
`, style.sheet.cssRules.length)
style.sheet.insertRule(`
.button__text {
display: block;
padding-top: 5px;
margin-bottom: -1px;
font-size: 13px;
}
`, style.sheet.cssRules.length)
style.sheet.insertRule(`
.button__price {
white-space: nowrap;
}
`, style.sheet.cssRules.length)
style.sheet.insertRule(`
.button__price-sum {
font-size: 16px;
font-family: Roboto,Helvetica,Arial,sans-serif;
}
`, style.sheet.cssRules.length)
style.sheet.insertRule(`
.button__price-type {
font-size: 11px;
}
`, style.sheet.cssRules.length)
const button = document.createElement('a')
button.classList.add('button')
const buttonInner = document.createElement('div')
buttonInner.classList.add('button__inner')
const buttonLogo = document.createElement('div')
buttonLogo.classList.add('button__logo')
const buttonText = document.createElement('span')
buttonText.classList.add('button__text')
buttonText.innerHTML = 'Купить в кредит'
const buttonPrice = document.createElement('div')
buttonPrice.classList.add('button__price')
const priceSum = document.createElement('span')
priceSum.classList.add('button__price-sum')
priceSum.innerHTML = '5 331 '
const priceType = document.createElement('span')
priceType.classList.add('button__price-type')
priceType.innerHTML = 'x 24 мес'
buttonInner.appendChild(buttonLogo)
buttonInner.appendChild(buttonText)
buttonPrice.appendChild(priceSum)
buttonPrice.appendChild(priceType)
button.appendChild(buttonInner)
button.appendChild(buttonPrice)
return button
}
const div = document.getElementById('root')
div.appendChild(getForteButton())