Skip to content

Commit

Permalink
vovan-DOM (#164)
Browse files Browse the repository at this point in the history 
* vovan-DOM

* update index.html

* update script.js

* update style .scss

* fix mentor remarks

* update script.js
  • Loading branch information
@vovan-zt
vovan-zt authored Aug 25, 2022
1 parent 781fb55 commit 5869ec2
Show file tree
Hide file tree
Showing 3 changed files with 377 additions and 0 deletions.
55 changes: 55 additions & 0 deletions submissions/vovan-zt/DOM/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Action menu</title>
<meta name="title" content="Action menu">
<meta name="description" content="Action menu">

<link rel="stylesheet" href="css/style.min.css">
</head>
<body>
<header>
<nav>
<div class="menu">
<div class="menu__block">
<div class="menu__close">
<svg width="29" height="30" viewBox="0 0 29 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.1568 14.5231L28.4489 3.23075C29.1837 2.49623 29.1837 1.30861 28.4489 0.574085C27.7144 -0.160437 26.5267 -0.160437 25.7922 0.574085L14.4998 11.8665L3.20781 0.574085C2.47295 -0.160437 1.28567 -0.160437 0.551149 0.574085C-0.183716 1.30861 -0.183716 2.49623 0.551149 3.23075L11.8432 14.5231L0.551149 25.8155C-0.183716 26.55 -0.183716 27.7376 0.551149 28.4721C0.917206 28.8385 1.39852 29.0226 1.87948 29.0226C2.36045 29.0226 2.84141 28.8385 3.20781 28.4721L14.4998 17.1798L25.7922 28.4721C26.1586 28.8385 26.6396 29.0226 27.1205 29.0226C27.6015 29.0226 28.0825 28.8385 28.4489 28.4721C29.1837 27.7376 29.1837 26.55 28.4489 25.8155L17.1568 14.5231Z" fill="white"/>
</svg>
</div>
<ul class="menu__list">
<li class="menu__item"><a href="#" data-content="html5" class="menu__link ">HTML5</a></li>
<li class="menu__item"><a href="#" data-content="css3" class="menu__link">CSS3</a></li>
<li class="menu__item"><a href="#" data-content="js" class="menu__link">JS</a></li>
<li class="menu__item"><a href="#" data-content="react" class="menu__link">React</a></li>
<li class="menu__item"><a href="#" data-content="node" class="menu__link">Node</a></li>
<li class="menu__item"><a href="#" data-content="jquery" class="menu__link">Jquery</a></li>
</ul>
</div>

</div>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</nav>
</header>

<main class="main">
<div class="container">
<div class="main__content">

<div class="main__item">
<h2 class="main__title">WElCOME TO UKRAINE</h2>
</div>

</div>
</div>
</main>
<script src="js/script.js"></script>
</body>
</html>
96 changes: 96 additions & 0 deletions submissions/vovan-zt/DOM/script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
"use strict";

const dataContent = {
"html5":
{
"img": "icons/skills/html5.svg",
"title": "HTML5",
"descr": " HTML5 (англ. HyperText Markup Language, version 5) — язык для структурирования и представления содержимого всемирной паутины. Это пятая версия HTML. Хотя стандарт был завершён (рекомендованная версия к использованию) только в 2014 году (предыдущая, четвёртая, версия опубликована в 1999 году), уже с 2013 года браузерами оперативно осуществлялась поддержка, а разработчиками — использование рабочего стандарта (англ. HTML Living Standard). Цель разработки HTML5 — улучшение уровня поддержки мультимедиа-технологий с одновременным сохранением обратной совместимости, удобочитаемости кода для человека и простоты анализа для парсеров.",
},
"css3":
{
"img": "icons/skills/css3.svg",
"title": "CSS3",
"descr": " CSS используется создателями веб-страниц для задания цветов, шрифтов, стилей, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. Основной целью разработки CSS является ограждение и отделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой веб-страницы (которое теперь производится с помощью формального языка CSS). Такое разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом.",
},
"js":
{
"img": "icons/skills/js.svg",
"title": "JS",
"descr": " JavaScript® (часто просто JS) — это легковесный, интерпретируемый или JIT-компилируемый, объектно-ориентированный язык с функциями первого класса. Наиболее широкое применение находит как язык сценариев веб-страниц, но также используется и в других программных продуктах, например, node.js или Apache CouchDB. JavaScript это прототипно-ориентированный, мультипарадигменный язык с динамической типизацией, который поддерживает объектно-ориентированный, императивный и декларативный (например, функциональное программирование) стили программирования.",
},
"react":
{
"img": "icons/skills/react.svg",
"title": "React",
"descr": " React (иногда React.js или ReactJS) — JavaScript-библиотека с открытым исходным кодом для разработки пользовательских интерфейсов. React разрабатывается и поддерживается Facebook, Instagram и сообществом отдельных разработчиков и корпораций. React может использоваться для разработки одностраничных и мобильных приложений. Его цель — предоставить высокую скорость разработки, простоту и масштабируемость. В качестве библиотеки для разработки пользовательских интерфейсов React часто используется с другими библиотеками, такими как MobX, Redux и GraphQL",
},
"node":
{
"img": "icons/skills/node.js.svg",
"title": "Node",
"descr": " Node или Node.js — программная платформа, основанная на движке V8 (компилирующем JavaScript в машинный код), превращающая JavaScript из узкоспециализированного языка в язык общего назначения. Node.js добавляет возможность JavaScript взаимодействовать с устройствами ввода-вывода через свой API, написанный на C++, подключать другие внешние библиотеки, написанные на разных языках, обеспечивая вызовы к ним из JavaScript-кода. Node.js применяется преимущественно на сервере, выполняя роль веб-сервера, но есть возможность разрабатывать на Node.js и десктопные оконные приложения (при помощи NW.js, AppJS или Electron для Linux, Windows и macOS) и даже программировать микроконтроллеры (например, tessel, low.js и espruino). В основе Node.js лежит событийно-ориентированное и асинхронное (или реактивное) программирование с неблокирующим вводом/выводом.",
},
"jquery":
{
"img": "icons/skills/jquery.svg",
"title": "Jquery",
"descr": " jQuery — набор функций JavaScript, фокусирующийся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API для работы с AJAX. Разработка jQuery ведётся командой добровольцев на пожертвования.",
},
}

const menuList = document.querySelector('.menu__list'),
menuLink = document.querySelectorAll('.menu__link'),
mainContent = document.querySelector('.main__content'),
hamburgerBtn = document.querySelector('.hamburger'),
menu = document.querySelector('.menu'),
closeBtn = document.querySelector('.menu__close');

function menuToggleClass (target) {
menuLink.forEach((link, i) => {
if (target == link) {
link.classList.add('menu__link-active');
} else {
link.classList.remove('menu__link-active');
}
});
}

function toggleContent (target) {
for(let key in dataContent) {
if (target.dataset.content == key) {
mainContent.firstChild.remove();
const element = document.createElement('div');
element.classList.add('main__item');
element.classList.add('box');

element.innerHTML = `
<div class="main__item-icon">
<img src="${dataContent[key].img}" alt="${key}">
</div>
<h2 class="main__item-title">
${dataContent[key].title}
</h2>
<div class="main__item-descr">
${dataContent[key].descr}
</div>
`;
mainContent.append(element);
}
}
}

function showContent ({target}) {
menuToggleClass(target);
toggleContent (target);
}

function toggleMenu() {
menu.classList.toggle('active');
}

window.addEventListener ('DOMContentLoaded', () => {
hamburgerBtn.addEventListener('click', toggleMenu);
closeBtn.addEventListener('click', toggleMenu);
menuList.addEventListener('click', showContent);
});
226 changes: 226 additions & 0 deletions submissions/vovan-zt/DOM/style.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,226 @@
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&display=swap');

* {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
}

header {
position: relative;
height: 50px;
}
nav {
position: fixed;
width: 100%;
height: 50px;
background-color: #272525;
z-index: 5;
}

.container {
min-height: 100vh;
background-color: rgba(0, 0, 0, 0.2);
display: flex;
align-content: flex-start;
justify-content: center;
padding: 20px;
}


.hamburger {
display: none;
}

.menu {
&__close {
display: none;
}
&__list {
display: flex;
justify-content: space-around;
padding: 13px 70px;
margin: 0;
list-style-type: none;
}
&__link{
color: #e9e5e5;
text-decoration: none;
font-size: 15px;
font-weight: 300;
&-active {
color:red;
}

&:hover {
text-decoration: none;
color: green;
}
}
&__item {
border-right: 2px dotted black;
padding-right: 28px;
width: 100%;
text-align: center;


&:last-child {
border-right: none;
}
}
}

.main {
&__content {
margin-top: 10px;
border-radius: 10px;
width: 80%;
min-height: 70vh;
border: 1px solid black;
box-shadow: 3px 3px 10px 5px #000;
}
&__item {
display: flex;
flex-direction: column;
align-content: flex-start;
justify-content: center;
padding: 30px 28px 25px 30px;
&-icon {
text-align: center;
}
&-title {
margin-top: 20px;
text-align: center;
}
&-descr {
margin-top: 15px;
font-weight: 500;
font-size: 12px;
line-height: 18px;
}
}
&__title {
text-align: center;
font-size: 30px;
color:rgb(69, 17, 17);
}

@keyframes append-animate {
from {
transform: scale(0);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
/* animate new box */
.box {
animation: append-animate .3s linear;
}

}

@media (max-width: 576px) {
.container {
max-width: 100%;
padding: 0 10px;
}

.hamburger {
position: absolute;
top: 20px;
right: 30px;
height: 21px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items:flex-end;
cursor: pointer;
span {
display: block;
width: 30px;
height: 3px;
background: #babcb8;
}
span.long {
width: 38px;
}
}

.menu {
position: fixed;
top: 0;
left: -100%;
width:100%;
height: 100vh;
z-index: 10;
visibility: hidden;
opacity: 0;
transition: 0.6s all;
&.active {
left: 0;
visibility: visible;
opacity: 1;

}
&__block {
// left: -100%;
position: relative;
width:250px;
padding-top: 100px;
padding-left: 40px;
background-color:rgba(57, 56, 56, 0.9);
height: 100%;
transition: 0.6 all;
z-index: 10;
box-shadow: 3px 3px 10px 5px #000;
}
&__close {
display: block;
position: absolute;
top: 25px;
right: 25px;
cursor: pointer;
}
&__list {
flex-direction: column;
height: 300px;
justify-content: space-around;

}
&__item {
border:none;
padding: 0;
width: 100%;
text-align: center;

}
&__link {
display: block;
position: relative;
font-weight: bold;
font-size: 24px;
line-height: 36px;
margin-bottom: 15px;

&:before {
content: '';
position: absolute;
left: -35px;
top:10px;
width: 15px;
height: 15px;
border: 1px solid #000000;
border-radius: 100%;
transition: 0.6s all;
}
&:hover {
&:before {
background-color: rgb(182, 68, 15);
}
}
}
}
}

0 comments on commit 5869ec2

Please sign in to comment.