Skip to content

Instantly share code, notes, and snippets.

@JacoMig

JacoMig/frontendexercise.markdown

Created March 27, 2019 16:35
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save JacoMig/1f1a377a8828892af48bd2aca5d9f752 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save JacoMig/1f1a377a8828892af48bd2aca5d9f752 to your computer and use it in GitHub Desktop.
Download ZIP
FrontEndExercise
Raw
index.html
<noscript>
<strong>We're sorry but this website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div class="page">
<div class="logo mobile">
<img src="https://media.yoox.biz/ytos/resources/FEDTEST/images/logo-ynap/logo-ynap.svg" alt="logo" />
</div>
<div class="hero">
<img class="desktop" src="https://media.yoox.biz/ytos/resources/FEDTEST/images/man-yellow-jacket/man-yellow-jacket-1024w.jpg" alt="hero image" />
<img class="mobile" src="https://media.yoox.biz/ytos/resources/FEDTEST/images/man-yellow-jacket/man-yellow-jacket-640w.jpg" alt="hero image" />
</div>
<section>
<div class="logo desktop">
<img src="https://media.yoox.biz/ytos/resources/FEDTEST/images/logo-ynap/logo-ynap.svg" alt="logo" />
</div>
<p>YOOX NET-A-PORTER GROUP is the <span>world’s leading online luxury fashion retailer.</span> The Group is a Global company with Anglo-Italian roots, the result of a game-changing merger, which in October 2015 brought together YOOX GROUP and THE NET-A-PORTER GROUP, two companies that have <span>revolutionized the luxury fashion industry</span> since their birth in 2000.</p>
<div class="section_main">
<div class="section_navi">
<ul>
<li data-index="1" class="active">1</li>
<li data-index="2">2</li>
<li data-index="3">3</li>
<li data-index="4">4</li>
<li data-index="5">5</li>
</ul>
</div>
<div class="section_content">
<h2 class="section_title"></h2>
<div class="section_text">
<div class="block"></div>
<div class="block"></div>
</div>
</div>
</div>
<div class="newsletter">
<h2 class="newsletter_label">Newsletter</h2>
<form class="newsletter_box">
<input required type="email" placeholder="work@ynap.com" name="email" id="email">
<button class="send" type="submit">Subscribe</button>
</form>
<div class="validation_message hidden">
Thank you you have subscribed to the newsletter!
</div>
</div>
</section>
<footer>
<p class="copyright">COPYRIGHT © 2000-2017 YOOX NET-A-PORTER GROUP</p>
</footer>
</div>
Raw
script.js
const endpoint = 'https://jsonplaceholder.typicode.com/posts/';
const fetch_btns = document.querySelectorAll('.section_navi li');
const containerSection = document.querySelector('.section_content');
const containerText = document.querySelector('.section_text');
const containerTitle = document.querySelector('.section_title');
const sendNewsletter = document.querySelector('.send');
const inputNewsletter = document.querySelector('#email');
const form = document.querySelector('form');
const validationMessage = document.querySelector('.validation_message');
let ID = 1;
// FETCHING POSTS
async function fetchPosts(id){
const api_call = await fetch(`${endpoint}${id}`);
const data = await api_call.json();
return data;
}
async function showPosts(){
const Posts = new Object;
await fetchPosts(ID).then(data => {
Posts.text = data.body;
Posts.title = data.title;
})
containerSection.classList.add('hidden');
containerSection.addEventListener('transitionend', function(e){
containerTitle.textContent = Posts.title;
containerText.innerHTML = "";
for(var i = 0; i < 5; i++){
containerText.innerHTML += `<p>${Posts.text}</p>`;
}
e.target.classList.remove('hidden')
})
}
fetch_btns.forEach((btn,i) => {
btn.addEventListener('click', function(e){
const _this = e.target;
if(!_this.classList.contains('active')){
fetch_btns.forEach((button,i) => button.classList.remove('active'))
btn.classList.add('active')
ID = _this.dataset.index;
showPosts();
}
})
})
showPosts();
// MAIL VALIDATION
const invalidClassName = 'invalid';
sendNewsletter.addEventListener('click', function(e){
if (inputNewsletter.validity.valid) {
inputNewsletter.classList.remove(invalidClassName)
validationMessage.classList.remove('hidden');
form.classList.add('hidden')
e.preventDefault();
}else{
inputNewsletter.classList.add(invalidClassName)
}
})
Raw
style.scss
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
$smartphone-width: 640px;
@mixin tiny {
@media (max-width: #{$smartphone-width}) {
@content;
}
}
$font : 'Open Sans';
$Regular : 400;
$Bold : 700;
$text_sm: 14px;
$text_lg: 24px;
$h2 : 24px;
$darkGrey : #333;
$lightGrey : #666;
$backgroundcolor : #f2f2f2;
$from : #ccc;
$to : #fff;
@mixin linear-gradient($from, $to, $from_percentage, $to_percentage) {
background: $to;
background: -moz-linear-gradient(top, $from $from_percentage, $to $to_percentage);
background: -webkit-gradient(linear, left top, left bottom, color-stop($from_percentage,$from), color-stop($to_percentage,$to));
background: -webkit-linear-gradient(top, $from $from_percentage,$to $to_percentage);
background: -o-linear-gradient(top, $from $from_percentage,$to $to_percentage);
background: linear-gradient(to bottom, $from $from_percentage, $to $to_percentage);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#{$from}, endColorstr=#{$to})
}
*,*:after,*:before{
box-sizing: border-box;
margin:0;
padding:0
}
ul li{
list-style: none;
}
html{
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
html, body{
height: 100%;
margin:0;
padding:0;
}
a:hover,
a:active,
input, button:active, button:focus{
outline: 0;
}
button,
input,
select,
textarea{
margin: 0;
font-size: 100%;
vertical-align: middle;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"]{
-webkit-appearance: button;
cursor: pointer;
}
label,
select,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
input[type="radio"],
input[type="checkbox"] {
cursor: pointer;
}
textarea{
overflow: auto;
vertical-align: top;
}
img{
max-width: 100%;
width: auto\9;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
body{
background: $lightGrey;
font-family: $font;
font-weight: $Regular;
font-size: $text_sm;
color: $lightGrey;
}
.page{
max-width: 1024px;
margin:0 auto;
background: #fff;
}
.logo{
img{
width: 100%;
max-width: 300px;
}
margin-bottom: 30px;
}
section{
padding: 30px 20px;
h2{
font-size: $h2;
text-transform: uppercase;
color: $darkGrey;
font-weight: $Regular;
}
p{
padding-bottom: 20px;
span{
color: $darkGrey;
font-weight: $Bold;
}
}
.section_main{
background: $backgroundcolor;
padding: 15px 10px;
margin:30px 0;
min-height: 200px;
ul{
display: flex;
li{
color: $darkGrey;
padding:3px 6px;
border: 1px solid $lightGrey;
@include linear-gradient(#fff, #ccc, 0%, 100%);
margin-right:10px;
cursor:pointer;
&.active, &:hover{
@include linear-gradient(#ccc, #fff, 0%, 100%);
}
}
}
.section_content{
margin-top:20px;
display:table;
transition: 0.3s;
.section_title{
width: 29.3%;
line-height: 24px;
display: table-cell;
}
.section_text{
column-count: 2;
display: table-cell;
vertical-align: top;
}
}
}
.newsletter{
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
.newsletter_box{
flex-basis: 70%;
display: flex;
transition: all 0.3s;
input{
flex-basis: 90%;
padding: 5px;
border: 1px solid #666;
color:#a7a7a7;
transition: border 0.3s;
border-radius: 0px;
-webkit-border-radius: 0px;
&::placeholder{
color:#a7a7a7;
font-size: $text_sm;
}
&.invalid{
border-color:red;
}
}
button{
padding: 3px 8px;
border: 1px solid #666;
@include linear-gradient(#fff, #ccc, 0%, 100%);
&:active, &:hover{
@include linear-gradient(#ccc, #fff, 0%, 100%);
}
}
}
.validation_message{
position: absolute;
left: 50%;
transition: all 0.3s;
font-weight: $Bold;
color: green;
}
}
}
footer{
background: $darkGrey;
padding: 15px 0;
p{
text-transform: uppercase;
color:#fff;
font-size: 10px;
text-align: center;
font-weight: $Bold;
}
}
.hidden{
opacity: 0;
visibility: hidden;
}
.mobile{display: none}
.desktop{display:block;}
@include tiny{
.mobile{display: block}
.desktop{display:none;}
.logo.mobile{
padding:15px;
margin-bottom:15px;
}
section{
padding:15px;
.section_main{
.section_content{
display:block;
.section_title{
width: 100%;
display: block;
padding-bottom: 20px;
}
.section_text{
column-count: 1;
display: block;
}
}
}
.newsletter{
display:block;
.newsletter_label{
padding-bottom: 20px;
}
.validation_message{
top: 38px;
left:0;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment