Develop

README.md

@@ -24,8 +24,37 @@ Zwrocie uwagę na semantykę html i accessibility.
 * Wykonaj zadanie bez użycia javascriptu
 * Stwórz warstwę backendową(dowolny język) lub podepnij się do firebase
 ### Termin 
-Wstępny czas na wykonanie challenga 21.01.2019  
-
-
+Wstępny czas na wykonanie challenga 10.02.2019
+Przedłużam challeng dla wszystkich chętnych, Code Review będzie się pojawiał do tego terminu i w tym terminie wybierzemy zwycięsce jeżeli ktoś jeszcze nie zrobił 
 
-Jak ktoś ma ochotę zrobić lepszy readme, to niech to zrobi :D
+## Challenge #2 - Header + Home Page
+Zadanie typowo frontendowe, zostało podzielone na 3 mini zadania i jednego bonusowego, tym razem widok tylko w jednej wersji mobilnej aby utrwalić podejście mobile first, a nie dlatego, że mi się nie chciało robić...  
+ Jako że większośc z was próbowała stosować BEM w swoim CSSie jest to dziś oficjalna metodologia naszych challengy.
+Zadania:  
+* Przygotuj Header strony  
+ Zawiera logo i przycisk menu, przycisk ma zmieniac swoj wyglad gdy menu jest aktywne.  
+ Menu ma zawierać linki które na razie prowadzą do #.  
+ Zarówno przycisk jak i menu mają być animowane  
+ Zadanie można wykonać zarówno z pomocą javascriptu jak i przy pomocy tzw. checkbox hack.
+ Staraj się w jak najlepszy sposób odwzorować grafikę, nawet jak wydaje sie brzydka
+ * Przygotuj sekcje strony zgodnie z załączoną grafiką.
+ Sekcja ma zawierać 3 checkboxy w których można zaznaczać postępy zadań.
+ * Javascript
+ Pierwsze zadania do którego wykonania niezbędne jest wykorzystania Javascriptu.  
+ Do sekcji z poprzedniego zadania należy podpiąc skrypt, który będzie pokazywał czas do ukończenia zadania(10.02.2019 23:59:59)
+ Czas ma odmierzać dni jeżeli do końca zadania zostało więcej niż 48 godzin.
+ Jeżeli zostało mniej niż 48 godzin, sekcja ma pokazywać czas w formacie gg:mm:ss, wyswietlany czas ma miec kolor czerwony i ma sie zmieniac na bieżąco.
+ * Bonus zadanie
+ Napisz kod przy użyciu sassa i nowoczesnego javascriptu, zapoznaj się z narzędziami typu webpack,parcel,gulp, npm script i zaimplementuj je w wykonaniu zadania.  
+ ### Grafiki
+Na razie tylko figma
+[Figma](https://www.figma.com/file/bgjopxy8ZV8tWyxm0koix0wg/Header?node-id=0%3A1)   
+ ### Termin 
+Wstępny czas na wykonanie challenga 10.02.2019
+ ### Porada
+ BEM jest koncepcją nazwienictwa, ale nie tylko klass cssowych. Polega on na tym ze dzielimi klasy na bloki, elementy i modyfikatory.
+ Bloki są samodzielnymi elementami strony, oznacza to, że jeżeli możemy coś wyjąć i włożyć w dowolne miejsce na stronie, będzie wyglądać tak samo jak wcześniej. Elementy są elemntami bloku, które jednak nieco różnią się stylem od głownego bloku, nie powinno się ich wyjmować z bloku. Modyfikatory służa tylko do drobnych zmian wizualnych można stosować zarówno do elementów jak i bloków.
+ Dobra analogią może być np. prosta budowa człowieka. Blokiem w takim przypadku będzie ręka, elementem, łokieć a modyfikatorem lewa, palce natomiast beda juz oddzielnym elementem bo moga sie pojawic zarowno u rak jak i u nog - maja wlasne elementy np paznokncie imoga miec swoje modyfikatory np.brudne.  
+ .reka-> -> reka__lokiec -> reka__lokiec--lewy  
+ .palec -> palec__paznokiec --> palec__paznokiec--brudny  
+

css/style.css

@@ -0,0 +1,179 @@
+*,
+*::after,
+*::before {
+    box-sizing: inherit;
+    margin: 0;
+    padding: 0;
+}
+
+html {
+    font-size: 10px;
+    font-family: 'Lato', sans-serif;
+    color: #ffffff;
+}
+
+body {
+    box-sizing: border-box;
+    background: linear-gradient(90deg, #83EB94 0%, #47D95E 100%);
+    text-align: center;
+    min-height: 100vh;
+}
+
+/* HEADER */
+.header {
+    padding: 30px 0;
+}
+
+.header__img,
+.footer__img {
+    max-width: 100%;
+}
+
+.header__title {
+    font-size: 3rem;
+    font-weight: 300;
+    text-transform: uppercase;
+    letter-spacing: 5px; 
+}
+
+
+/* FORM */
+.form {
+    padding-bottom: 6rem;
+}
+
+.form__title {
+    font-size: 1.8rem;
+    font-weight: normal;
+    margin-bottom: 2rem;
+}
+
+.form__input {
+    background: #ffffff;
+    border-radius: .9rem;
+    box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
+    padding: 10px;
+    font-size: 1.6rem;
+    text-indent: 1rem;
+    color: #000000;
+    width: 250px;
+    height: 50px;
+    margin-bottom: 2rem;
+}
+
+.form__input:focus {
+    outline: none;
+    border: 2px solid #5AAF65; 
+}
+
+.form__input::placeholder {
+    color: #A0A0A0;
+}
+
+.form__error {
+    color: #FF3333;
+    display: none;
+    text-align: left;
+    font-size: 1.6rem;
+    text-indent: 1rem;
+    margin-left: 4.5rem;
+    margin-bottom: .5rem;
+}
+
+.form__input--error {
+    border: 2px solid #FF3333;
+}
+
+.form__success {
+    display: block;
+    color: #ffffff;
+    font-size: 1.6rem;
+    font-weight: bold;
+    text-align: center;
+    padding-top: 1rem;
+}
+
+
+.form__btn {
+    display: inline-block;
+    background: #0297EC;
+    border: none;
+    border-radius: .9rem;
+    width: 250px;
+    height: 50px;
+    color: #ffffff;
+    font-size: 1.6rem;
+    font-weight: bold;
+    text-transform: uppercase;
+    transition: .5s all linear;
+}
+
+.form__btn:hover {
+    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
+}
+
+
+/* FOOTER */
+.footer {
+    padding: 0 2rem 2rem;
+}
+
+.footer__info {
+    font-size: 1.6rem;
+    line-height: 2rem;
+    text-indent: 1rem;
+}
+
+.comming-soon__img {
+    display: none;
+}
+
+@media (min-width: 768px) {
+    body {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .header__title {
+        font-size: 6rem;
+    }
+
+    .form {
+       padding-bottom: 0; 
+    }
+
+    .form__title {
+        font-size: 2.4rem;
+        margin-bottom: 3rem;
+    }
+
+    .form__input {
+        margin-right: 2rem;
+    }
+
+    .form__error {
+        margin-left: 12rem;
+    }
+
+    .footer {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+    }
+
+    .footer__info {
+        font-size: 2.4rem;
+    }
+
+    .comming-soon {
+        position: relative;
+    }
+    .comming-soon__img {
+        display: block;
+        position: absolute;
+        top: 0;
+        right: 0;
+        max-width: 100%;
+    }
+}

index.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Challange1</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="https://fonts.googleapis.com/css?family=Lato:300,400&amp;subset=latin-ext" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
+</head>
+<body>
+    <div class="comming-soon">
+        <img src="img/coming-soon-ribbon.png" class="comming-soon__img" alt="">
+    </div>
+
+    <header class="header">
+        <img src="img/pobrane.svg" class="header__img" alt="">
+        <h1 class="header__title">Code academy</h1>
+    </header>
+
+    <main>
+        <form class="form" action="" >
+            <h2 class="form__title">Leave your email</h2>
+
+            <span class="form__error">Invalid E-mail</span>
+            <input type="email" name="email" class="form__input"  placeholder="E-mail">
+            <button type="submit" class="form__btn">Get early access</button>
+            <span class="form__success">E-mail został zapisany!:)</span>
+        </form>
+    </main>
+
+    <footer class="footer">
+        <p class="footer__info">User &copy 2019.</p>
+        <p class="footer__info">Made with <img src="img/love.png" class="footer__img" alt=""> in Poland</p>
+        <p class="footer__info">We`re using cookies to improve your experience.</p>
+    </footer>
+
+    <script src="js/main.js"></script>
+</body>
+</html>

js/main.js

@@ -0,0 +1,33 @@
+const inputForm = document.querySelector(".form__input");
+const btnForm = document.querySelector(".form__btn");
+const errorMessage = document.querySelector(".form__error");
+const successMessage = document.querySelector(".form__success");
+
+function validateEmail(email)
+{
+    let reEmail = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    return reEmail.test(email);
+}
+
+function submitForm(e)
+{
+    e.preventDefault();
+    let inputFormValue = inputForm.value;
+    console.log(validateEmail(inputFormValue));
+
+    if(validateEmail(inputFormValue))
+    {
+        errorMessage.style.display = "none";
+        inputForm.classList.remove("form__input--error");
+        successMessage.style.display = "block";
+    }
+    else
+    {
+        errorMessage.style.display = "block";
+        inputForm.classList.add("form__input--error");
+        successMessage.style.display = "none";
+    }
+}
+
+btnForm.addEventListener("submit", submitForm);
+