├── images
└── gueio.png
├── index.html
└── js
├── components
├── Character
│ └── index.js
├── Slide
│ └── index.js
├── Title
│ └── index.js
└── WrapperCharacters
│ └── index.js
├── index.js
└── styles.js
/images/gueio.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/marcobrunodev/curso-javascript-feliz/ce517dbbc702e7c013de3c281e1286c96fbe89d5/images/gueio.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Mini curso de JavaScript feliz
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/js/components/Character/index.js:
--------------------------------------------------------------------------------
1 | function Character(css, path) {
2 | return `
3 | 
4 | `
5 | }
--------------------------------------------------------------------------------
/js/components/Slide/index.js:
--------------------------------------------------------------------------------
1 | const states = [true, false, false]
2 |
3 | function showItems(stateItems) {
4 | const item = (pos) => Item`
5 | .item {
6 | list-style: none;
7 | height: calc(var(--line-height) * 3);
8 | width: calc(var(--line-height) * 3);
9 | background-color: var(--happy-color);
10 | transition: transform 100ms linear;
11 | cursor: pointer;
12 | }
13 | ${`pos-${pos}`}
14 | `
15 | const itemActive = (pos) => Item`
16 | .item.active {
17 | transform: scale(1.6)
18 | }
19 |
20 | ${`active pos-${pos}`}
21 | `
22 |
23 | const items = stateItems.map((state, index) => {
24 | if (state) {
25 | return itemActive(index + 1)
26 | }
27 | return item(index + 1)
28 | })
29 |
30 | return items.join('')
31 | }
32 |
33 | function clearAction(action) {
34 | action.classList.remove('second')
35 | action.classList.remove('third')
36 | }
37 |
38 | function handleClick(event) {
39 | const { target } = event
40 | const allItems = document.querySelectorAll('.item')
41 | const action = document.querySelector('.action')
42 |
43 | allItems.forEach(item => item.classList.remove('active'))
44 | target.classList.add('active');
45 |
46 | clearAction(action)
47 | if (target.classList.contains('pos-2')) {
48 | action.classList.add('second')
49 | }
50 |
51 | if (target.classList.contains('pos-3')) {
52 | action.classList.add('third')
53 | }
54 | }
55 |
56 | function createStyle(css) {
57 | const head = document.querySelector('head')
58 | const style = `
59 |
62 | `
63 |
64 | head.insertAdjacentHTML('beforeend', style)
65 | }
66 |
67 | const Action = (css) => {
68 | createStyle(css)
69 |
70 | return (
71 | ``
72 | )
73 | }
74 |
75 | const Item = (css, className) => {
76 | createStyle(css)
77 |
78 | return (`
79 |
81 |
82 | `)
83 | }
84 |
85 | const Slide = (css, content) => (
86 | ``
87 | )
88 |
89 | const action = Action`
90 | .action {
91 | list-style: none;
92 | background-color: var(--action-color);
93 | height: calc(var(--line-height) * 4);
94 | width: calc(var(--line-height) * 4);
95 | position: absolute;
96 | left: -5px;
97 | transition: transform 300ms linear;
98 | }
99 |
100 | .action.second {
101 | transform: translateX(293px) rotate(360deg);
102 | }
103 |
104 | .action.third {
105 | transform: translateX(585px) rotate(720deg);
106 | }
107 | `
108 |
109 | const slide = Slide`
110 | display: flex;
111 | align-items: center;
112 | justify-content: space-between;
113 | position: relative;
114 | width: 80%;
115 | height: var(--line-height);
116 | background-color: var(--happy-color);
117 | margin-top: auto;
118 | ${showItems(states) + action}
119 | `
--------------------------------------------------------------------------------
/js/components/Title/index.js:
--------------------------------------------------------------------------------
1 | function Title(css, textContent) {
2 | return `
3 |
4 | ${textContent}
5 |
`
6 | }
--------------------------------------------------------------------------------
/js/components/WrapperCharacters/index.js:
--------------------------------------------------------------------------------
1 | const pathGueio = 'images/gueio.png'
2 | const gueio = Character`
3 | width: 18%;
4 | ${pathGueio}
5 | `
6 |
7 | const WrapperCharacters = (css, children) => (`
8 | ${children}
9 | `)
10 |
11 | const wrapperCharacters = WrapperCharacters`
12 | display: flex;
13 | justify-content: space-evenly;
14 | ${gueio + gueio + gueio}
15 | `
--------------------------------------------------------------------------------
/js/index.js:
--------------------------------------------------------------------------------
1 | const root = document.querySelector('#root')
2 | const textTitle = 'Dificuldade'
3 |
4 | const title = Title`
5 | color: #82589F;
6 | font-size: 2.5rem;
7 | letter-spacing: 1.2px;
8 | margin-bottom: 4rem;
9 | ${textTitle}
10 | `
11 |
12 | root.insertAdjacentHTML('beforeend', title)
13 | root.insertAdjacentHTML('beforeend', wrapperCharacters)
14 | root.insertAdjacentHTML('beforeend', slide)
--------------------------------------------------------------------------------
/js/styles.js:
--------------------------------------------------------------------------------
1 | const css = `
2 | `
38 |
39 | const head = document.querySelector('head')
40 |
41 | head.insertAdjacentHTML('beforeend', css)
--------------------------------------------------------------------------------