diff --git a/README.md b/README.md index 92ac9d3..b4e412e 100644 --- a/README.md +++ b/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 + diff --git a/assets2/Header.pdf b/assets2/Header.pdf new file mode 100644 index 0000000..b47afba Binary files /dev/null and b/assets2/Header.pdf differ diff --git a/assets2/favicon.ico b/assets2/favicon.ico new file mode 100644 index 0000000..c0340a7 Binary files /dev/null and b/assets2/favicon.ico differ diff --git a/assets2/logo.jpg b/assets2/logo.jpg new file mode 100644 index 0000000..1dc64fc Binary files /dev/null and b/assets2/logo.jpg differ diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..d195fe7 --- /dev/null +++ b/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%; + } +} diff --git a/img/coming-soon-ribbon.png b/img/coming-soon-ribbon.png new file mode 100644 index 0000000..02c5684 Binary files /dev/null and b/img/coming-soon-ribbon.png differ diff --git a/img/love.png b/img/love.png new file mode 100644 index 0000000..fe99515 Binary files /dev/null and b/img/love.png differ diff --git a/img/pobrane.svg b/img/pobrane.svg new file mode 100644 index 0000000..1d1332b --- /dev/null +++ b/img/pobrane.svg @@ -0,0 +1 @@ +developer activity \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..c735fc8 --- /dev/null +++ b/index.html @@ -0,0 +1,40 @@ + + + + + + Challange1 + + + + + +
+ +
+ +
+ +

Code academy

+
+ +
+
+

Leave your email

+ + Invalid E-mail + + + E-mail został zapisany!:) +
+
+ + + + + + \ No newline at end of file diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..000fd1b --- /dev/null +++ b/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); +