Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 939708f

Browse files
added some projects
1 parent 17e5afb commit 939708f

File tree

20 files changed

+3997
-0
lines changed

20 files changed

+3997
-0
lines changed

‎Arrastar e Soltar - B7WEB/index.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="pt">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Arrastar e Soltar</title>
8+
<link rel="stylesheet" href="style.css" />
9+
</head>
10+
<body>
11+
<h1>Arrastar e Soltar</h1>
12+
13+
<div class="neutralArea">
14+
<div class="item" draggable="true">1</div>
15+
<div class="item" draggable="true">2</div>
16+
<div class="item" draggable="true">3</div>
17+
</div>
18+
19+
<div class="areas">
20+
<div class="area" data-name="a"></div>
21+
<div class="area" data-name="b"></div>
22+
<div class="area" data-name="c"></div>
23+
</div>
24+
25+
<footer>Criado pela B7Web</footer>
26+
27+
<script src="script.js"></script>
28+
</body>
29+
</html>

‎Arrastar e Soltar - B7WEB/script.js

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
let areas = {
2+
a: null,
3+
b: null,
4+
c: null
5+
};
6+
7+
document.querySelector('.neutralArea').addEventListener('click', (e) => {
8+
// console.log('target', e.target) // quem possui o evento
9+
// console.log('current target', e.currentTarget) // o cara especifico
10+
})
11+
12+
document.querySelectorAll('.item').forEach(item => {
13+
item.addEventListener('dragstart', dragStart);
14+
item.addEventListener('dragend', dragEnd);
15+
});
16+
17+
document.querySelectorAll('.area').forEach(area => {
18+
area.addEventListener('dragover', dragOver);
19+
area.addEventListener('dragleave', dragLeave);
20+
area.addEventListener('drop', drop);
21+
});
22+
23+
document.querySelector('.neutralArea').addEventListener('dragover', dragOverNeutral);
24+
document.querySelector('.neutralArea').addEventListener('dragleave', dragLeaveNeutral);
25+
document.querySelector('.neutralArea').addEventListener('drop', dropNeutral);
26+
27+
// functions item
28+
function dragStart(e) {
29+
e.currentTarget.classList.add('dragging')
30+
}
31+
32+
function dragEnd(e) {
33+
e.currentTarget.classList.remove('dragging');
34+
}
35+
36+
// functions area
37+
function dragOver(e){
38+
// console.log('Passou por cima')
39+
40+
if(e.currentTarget.querySelector('.item') === null){
41+
e.preventDefault();
42+
e.currentTarget.classList.add('hover');
43+
}
44+
}
45+
46+
function dragLeave(e){
47+
e.currentTarget.classList.remove('hover');
48+
// console.log('saiu de uma area dropavel')
49+
}
50+
51+
function drop(e){
52+
// console.log('liberou')
53+
e.currentTarget.classList.remove('hover');
54+
55+
// console.log(dragItem);
56+
// console.log(e.currentTarget)
57+
58+
if(e.currentTarget.querySelector('.item') === null){
59+
let dragItem = document.querySelector('.item.dragging');
60+
e.currentTarget.appendChild(dragItem);
61+
updateAreas();
62+
}
63+
}
64+
65+
// functions NEUTRAL AREA
66+
function dragOverNeutral(e){
67+
e.preventDefault();
68+
e.currentTarget.classList.add('hover');
69+
}
70+
71+
function dragLeaveNeutral(e){
72+
e.currentTarget.classList.remove('hover');
73+
}
74+
75+
function dropNeutral(e){
76+
e.currentTarget.classList.remove('hover');
77+
// item que estou arrastando
78+
let dragItem = document.querySelector('.item.dragging');
79+
// lugar onde vou dropar
80+
e.currentTarget.appendChild(dragItem);
81+
updateAreas();
82+
}
83+
84+
// Logic Functions
85+
function updateAreas() {
86+
document.querySelectorAll('.area').forEach(area => {
87+
let name = area.getAttribute('data-name');
88+
89+
if(area.querySelector('.item') !== null){
90+
areas[name] = area.querySelector('.item').innerHTML;
91+
} else {
92+
areas[name] = null;
93+
}
94+
});
95+
96+
if(areas.a === '1' && areas.b === '2' && areas.c === '3'){
97+
document.querySelector('.areas').classList.add('correct');
98+
} else {
99+
document.querySelector('.areas').classList.remove('correct');
100+
}
101+
102+
console.log(areas);
103+
}

‎Arrastar e Soltar - B7WEB/style.css

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
display: flex;
9+
min-height: 100vh;
10+
justify-content: center;
11+
align-items: center;
12+
flex-direction: column;
13+
background-color: #333;
14+
font-family: Arial, Helvetica, sans-serif;
15+
}
16+
17+
h1 {
18+
color: #FFF;
19+
margin: 20px 0;
20+
}
21+
22+
.neutralArea {
23+
width: 450px;
24+
height: 150px;
25+
display: flex;
26+
justify-content: space-around;
27+
align-items: center;
28+
border: 2px solid #FFF;
29+
}
30+
.item {
31+
width: 100px;
32+
height: 100px;
33+
background-color: #000;
34+
color: #FFF;
35+
font-size: 30px;
36+
display: flex;
37+
justify-content: center;
38+
align-items: center;
39+
cursor: grab;
40+
}
41+
.item.dragging {
42+
opacity: 0.5;
43+
}
44+
.areas {
45+
width: 450px;
46+
display: flex;
47+
margin-top: 20px;
48+
}
49+
.areas.correct .area {
50+
border: 2px solid #00FF00;
51+
}
52+
.area {
53+
width: 150px;
54+
height: 150px;
55+
border: 2px solid #FFF;
56+
display: flex;
57+
justify-content: center;
58+
align-items: center;
59+
}
60+
.hover {
61+
background-color: rgba(0, 0, 0, 0.3);
62+
}
63+
footer {
64+
margin-top: 20px;
65+
color: #FFF;
66+
font-size: 13px;
67+
}

‎Banner LGPD - B7WEB/index.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<title>BANNER LGPD - B7WEB</title>
7+
8+
</head>
9+
<body>
10+
11+
<h1>MINHA PÁGINA HOME</h1>
12+
13+
<script src="lgpd.js"></script>
14+
</body>
15+
</html>

‎Banner LGPD - B7WEB/lgpd.css

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
.lgpd {
2+
position: fixed;
3+
left: 20px;
4+
right: 20px;
5+
bottom: 20px;
6+
padding: 20px;
7+
background-color: black;
8+
color: white;
9+
font-size: 15px;
10+
display: flex;
11+
justify-content: space-between;
12+
align-items: center;
13+
}
14+
15+
.lgpd button {
16+
background-color: #04A600;
17+
border: 0;
18+
color: white;
19+
cursor: pointer;
20+
padding: 10px 30px;
21+
}
22+

‎Banner LGPD - B7WEB/lgpd.js

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
let lgpdURL = `https://jsonplaceholder.typicode.com/posts`;
2+
3+
let lgpdHTML = `
4+
<link rel="stylesheet" href="lgpd.css">
5+
<div class="lgpd">
6+
<div class="lgpd--left">
7+
Nós ultilizamos cookie para melhorar sua experiência no site!<br>
8+
Nossa <a href="#">Política de privacidade</a>
9+
</div>
10+
<div class="lgpd-right">
11+
<button id="lgpd_button_confirm">OK</button>
12+
</div>
13+
</div>
14+
`;
15+
16+
let lsLGPD = localStorage.getItem('lgpd');
17+
if(!lsLGPD){
18+
document.body.innerHTML += lgpdHTML;
19+
// localStorage.setItem('lgpd', '123');
20+
21+
let lgpdArea = document.querySelector('.lgpd');
22+
let lgpdButton = document.querySelector('#lgpd_button_confirm');
23+
24+
lgpdButton.addEventListener('click', async () => {
25+
lgpdArea.remove();
26+
localStorage.setItem('lgpd', '123');
27+
28+
let result = await fetch(lgpdURL);
29+
let response = await result.json();
30+
31+
if(response.error != '') {
32+
let user_id = '456';
33+
localStorage.setItem('lgpd', user_id);
34+
}
35+
});
36+
}

‎Cookies Popup - ORIGAMID/cookies.css

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
p {
2+
margin: 0px;
3+
}
4+
5+
body {
6+
margin: 0px;
7+
height: 200vh;
8+
background: #eee;
9+
}
10+
11+
.cookies-container {
12+
color: #222;
13+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
14+
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
15+
position: fixed;
16+
width: 100%;
17+
bottom: 2rem;
18+
z-index: 1000;
19+
}
20+
21+
.cookies-content {
22+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
23+
background: white;
24+
max-width: 520px;
25+
border-radius: 5px;
26+
padding: 1rem;
27+
margin: 0 auto;
28+
display: grid;
29+
grid-template-columns: 1fr auto;
30+
gap: 0.5rem;
31+
opacity: 0;
32+
transform: translateY(1rem);
33+
animation: slideUp 0.5s forwards;
34+
}
35+
36+
@keyframes slideUp {
37+
to {
38+
transform: initial;
39+
opacity: initial;
40+
}
41+
}
42+
43+
.cookies-pref label {
44+
margin-right: 1rem;
45+
}
46+
47+
.cookies-save {
48+
grid-column: 2;
49+
grid-row: 1/3;
50+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
51+
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
52+
background: #007cf8;
53+
color: white;
54+
cursor: pointer;
55+
border: none;
56+
border-radius: 5px;
57+
padding: 0.8rem 1rem;
58+
font-size: 1rem;
59+
}
60+
61+
@media (max-width: 500px) {
62+
.cookies-content {
63+
grid-template-columns: 1fr;
64+
}
65+
.cookies-save {
66+
grid-column: 1;
67+
grid-row: 3;
68+
}
69+
}

‎Cookies Popup - ORIGAMID/cookies.js

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
function cookies(functions) {
2+
const container = document.querySelector('.cookies-container');
3+
const save = document.querySelector('.cookies-save');
4+
if (!container || !save) return null;
5+
6+
const localPref = JSON.parse(window.localStorage.getItem('cookies-pref'));
7+
if (localPref) activateFunctions(localPref);
8+
9+
function getFormPref() {
10+
return [...document.querySelectorAll('[data-function]')]
11+
.filter((el) => el.checked)
12+
.map((el) => el.getAttribute('data-function'));
13+
}
14+
15+
function activateFunctions(pref) {
16+
pref.forEach((f) => functions[f]());
17+
container.style.display = 'none';
18+
window.localStorage.setItem('cookies-pref', JSON.stringify(pref));
19+
}
20+
21+
function handleSave() {
22+
const pref = getFormPref();
23+
activateFunctions(pref);
24+
}
25+
26+
save.addEventListener('click', handleSave);
27+
}
28+
29+
function marketing() {
30+
console.log('Função de marketing');
31+
}
32+
33+
function analytics() {
34+
console.log('Função de analytics');
35+
}
36+
37+
cookies({
38+
marketing,
39+
analytics,
40+
});

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /