WilliamSimao/challenge-tourist-attractions-WilliamSimao
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Develop #3

Merged
WilliamSimao merged 26 commits from Develop into main 2022-11-29 01:13:27 +00:00
Conversation 0 Commits 26 Files Changed 27 +8046 -166
13 changed files with 8046 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit ff228b5d3a - Show all commits

13
.editorconfig Normal file
View File

@ -0,0 +1,13 @@
# EditorConfig is awesome: https://EditorConfig.org
# top-most EditorConfig file
root = true
[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
max_line_length = 100

2
.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
node_modules
dist

15
gulpfile.js Normal file
View File

@ -0,0 +1,15 @@
const { src, dest, watch } = require('gulp');
const sass = require('gulp-sass')(require('sass'));
function styles() {
return src('src/styles/main.scss').pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError)).pipe(dest('dist'));
};
function sentinel () {
watch('src/styles/*.scss', {ignoreInitial: false}, styles);
}
exports.sentinel = sentinel;

7804
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

21
package.json Normal file
View File

@ -0,0 +1,21 @@
{
"name": "challenge-tourist-attractions-williamsimao",
"version": "1.0.0",
"description": "Projeto m3Academmy",
"main": "js.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "gulp sentinel"
},
"repository": {
"type": "git",
"url": "https://gitea.ecommercetools.com.br/WilliamSimao/challenge-tourist-attractions-WilliamSimao.git"
},
"author": "",
"license": "ISC",
"devDependencies": {
"gulp": "^4.0.2",
"gulp-sass": "^5.1.0",
"sass": "^1.56.1"
}
}

20
index.html → public/index.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="../dist/main.css">
<title>Tourist Attractions</title>
</head>
@ -16,11 +16,9 @@
<form class="form__tourist-attractions">
<div class="container-input">
<div class="wrapper-input__img">
<label class="label-input" for="input__img">
<!-- <span class="span__img">
</span> -->
</label>
<input id="input__img" type="file" data-test="input-image">
@ -29,14 +27,14 @@
<div class="wrapper-input__text">
<input name="input-title" class="input-text__titulo" type="text" placeholder="Titulo" data-test="input-titulo">
<input name="input-description" class="input-text__descricao" type="text" placeholder="Descrição" data-test="input-descrição">
<div class="wrapper-button-submit">
<button class="button-submit__input" type="submit" data-test="button-submit">Adicionar</button>
</div>
</div>
</div>
</form>
@ -49,7 +47,7 @@
<div class="container-cards__wrapper">
<ul class="wrapper-ul__cards"></ul>
</div>
@ -57,7 +55,7 @@
</main>
<script src="js.js"></script>
<script src="../src/scripts/js.js"></script>
</body>
</html>
</html>

18
js.js → src/scripts/js.js
View File

@ -7,7 +7,7 @@ document.addEventListener('DOMContentLoaded', function () {
const textLabelInput = "Imagem";
labelInput.innerText = textLabelInput;
const form = document.querySelector('.form__tourist-attractions');
const form = document.querySelector('.form__tourist-attractions');
const ulList = document.querySelector('.wrapper-ul__cards');
const inputTitle = document.querySelector('.input-text__titulo');
@ -34,16 +34,16 @@ document.addEventListener('DOMContentLoaded', function () {
});
reader.readAsDataURL(file);
labelInput.innerText = "";
labelInput.style.border = "none";
}else {
labelInput.innerText = textLabelInput;
labelInput.style.border = "";
}
});
//----------------------------------------------------------
@ -61,18 +61,18 @@ document.addEventListener('DOMContentLoaded', function () {
if (spotImg != '' && spotTitle != '' && spotDescription != '') {
const spot = {
image: spotImg.src,
titulo: spotTitle,
description: spotDescription,
};
list.push(spot);
renderListItems();
resetInputs();
}else {
alert('Preencha todos os campos')
}
@ -88,7 +88,7 @@ document.addEventListener('DOMContentLoaded', function () {
spotStructure += `
<li class="wrapper-cards__li">
<div class="result-card__img">
<div class="result-card__img">
<img class="result-card__img" src="${i.image}" alt="Imagem Turismo" />
</div>
@ -110,7 +110,7 @@ document.addEventListener('DOMContentLoaded', function () {
labelInput.innerText = textLabelInput;
labelInput.style.border = "";
};
};
});

5
src/styles/common/reset.scss Normal file
View File

@ -0,0 +1,5 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

7
src/styles/main.scss Normal file
View File

@ -0,0 +1,7 @@
@import "utils/variables.scss";
@import "utils/fonts.scss";
@import "common/reset.scss";
@import "partials/form.scss";

146
src/styles/partials/form.scss Normal file
View File

@ -0,0 +1,146 @@
@import "utils/fonts.scss";
.container-h1-input {
padding: 40px 130px;
.page-titulo__tourist {
font-family: "Poppins", sans-serif;
font-style: normal;
font-weight: 700;
font-size: 32px;
line-height: 120%;
}
.container-input {
display: flex;
margin: 40px 0 60px;
.wrapper-input__img label {
display: flex;
align-items: center;
justify-content: center;
color: $grey-500;
font-family: "Roboto", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.15px;
width: 343px;
height: 212px;
margin-right: 20px;
border: 2px solid $grey-200;
border-radius: 8px;
cursor: pointer;
}
.wrapper-input__img input {
display: none;
margin-right: 20px;
}
.wrapper-input__text {
display: flex;
flex-direction: column;
.input-text__titulo {
display: flex;
width: 328px;
height: 56px;
margin-bottom: 20px;
padding: 16px 0 16px 16px;
border: 2px solid $grey-100;
border-radius: 8px;
color: $grey-500;
font-family: "Roboto", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.15px;
}
.input-text__descricao {
display: flex;
width: 417px;
height: 136px;
margin-bottom: 16px;
padding: 40px 0px 72px 20px;
color: $grey-500;
font-family: "Roboto", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.15px;
border: 2px solid $grey-100;
border-radius: 8px;
}
.wrapper-button-submit {
display: flex;
justify-content: end;
.button-submit__input {
display: flex;
align-items: center;
justify-content: center;
width: 121px;
height: 56px;
background: $red-500;
color: $white-500;
font-family: "Poppins", sans-serif;
font-style: normal;
font-weight: 700;
font-size: 16px;
border: 1px solid $red-500;
border-radius: 8px;
cursor: pointer;
&:hover {
background: $red-700;
}
}
}
}
}
.img-result {
width: 100%;
height: 100%;
border-radius: 8px;
object-fit: cover;
}
.page-titulo__img__spot {
font-family: "Poppins", sans-serif;
font-style: normal;
font-weight: 700;
font-size: 32px;
line-height: 120%;
}
}

2
src/styles/utils/fonts.scss Normal file
View File

@ -0,0 +1,2 @@
@import url("https://fonts.googleapis.com/css2?family=Arimo&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@700&family=Roboto:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Arimo&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@700&family=Roboto&display=swap");

13
src/styles/utils/variables.scss Normal file
View File

@ -0,0 +1,13 @@
//colors
$white-500: #ffffff;
$grey-100: #d6d6d6;
$grey-200: #e5e5e5;
$grey-500: #858585;
$red-500: #ff5a5f;
$red-700: #e93137;

146
style.css
View File

@ -1,146 +0,0 @@
@import url("https://fonts.googleapis.com/css2?family=Arimo&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@700&family=Roboto:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Arimo&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@700&family=Roboto&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container-h1-input {
padding: 40px 130px;
}
.page-titulo__tourist {
font-family: "Poppins", sans-serif;
font-style: normal;
font-weight: 700;
font-size: 32px;
line-height: 120%;
}
.container-input {
display: flex;
margin: 40px 0 60px;
}
.wrapper-input__img label {
display: flex;
align-items: center;
justify-content: center;
color: #858585;
font-family: "Roboto", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.15px;
width: 343px;
height: 212px;
margin-right: 20px;
border: 2px solid #e5e5e5;
border-radius: 8px;
cursor: pointer;
}
.wrapper-input__img input {
display: none;
margin-right: 20px;
}
.img-result {
width: 100%;
height: 100%;
border-radius: 8px;
object-fit: cover;
}
.wrapper-input__text {
display: flex;
flex-direction: column;
}
.input-text__titulo {
display: flex;
width: 328px;
height: 56px;
margin-bottom: 20px;
padding: 16px 0 16px 16px;
border: 2px solid #d6d6d6;
border-radius: 8px;
color: #858585;
font-family: "Roboto", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.15px;
}
.input-text__descricao {
display: flex;
width: 417px;
height: 136px;
margin-bottom: 16px;
padding: 40px 0px 72px 20px;
color: #858585;
font-family: "Roboto", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.15px;
border: 2px solid #d6d6d6;
border-radius: 8px;
}
.wrapper-button-submit {
display: flex;
justify-content: end;
}
.button-submit__input {
display: flex;
align-items: center;
justify-content: center;
width: 121px;
height: 56px;
background: #ff5a5f;
color: #ffffff;
font-family: "Poppins", sans-serif;
font-style: normal;
font-weight: 700;
font-size: 16px;
border: 1px solid #ff5a5f;
border-radius: 8px;
cursor: pointer;
}
.button-submit__input:hover {
background: #e93137;
}
.page-titulo__img__spot {
font-family: "Poppins", sans-serif;
font-style: normal;
font-weight: 700;
font-size: 32px;
line-height: 120%;
}