3 async

homeworks/ivan.bieliaiev_Ckakipaki/3-async/app.js

@@ -0,0 +1,158 @@
+const requestUrl = 'https://jsonplaceholder.typicode.com/posts';
+
+// DOM elements
+const blog = document.querySelector('[data-blog]');
+const sorting = document.querySelector('[data-sorting]');
+const filtering = document.querySelector('[data-filter]');
+
+// For first loading
+const loading = document.createElement('p');
+loading.innerText = 'Loading...';
+loading.classList.add('loading');
+
+// GET
+async function getElements(url) {
+    const response = await fetch(url);
+    const content = await response.json();
+    const data = await content.splice(0, 10);
+    return data;
+}
+
+// REMDERING POSTS_________________________________________
+
+// POST MARKUP
+function postMarkupPost(id, title, text) {
+    const article = document.createElement('article');
+    const p = document.createElement('p');
+    const h1 = document.createElement('h1');
+    const div = document.createElement('div');
+    const button = document.createElement('button');
+    article.setAttribute('data-post', id);
+    article.classList = 'blog__post';
+    button.setAttribute('data-delete-post', id);
+    button.classList = 'delete__button';
+    p.classList = 'post__text';
+    h1.classList = 'post__title';
+    div.classList = 'post__delete';
+    button.textContent = 'delete';
+    h1.textContent = title;
+    p.textContent = text;
+    div.appendChild(button);
+    article.appendChild(h1);
+    article.appendChild(p);
+    article.appendChild(div);
+    blog.appendChild(article);
+}
+// Appending posts to blog container
+function createPostsList(posts) {
+    posts.forEach((el) => {
+        postMarkupPost(el.id, el.title, el.body);
+    });
+}
+
+// DELETING___________________________________________
+
+// Present messege before Deleting post
+function presentMessege(el) {
+    const deleteMessege = document.createElement('div');
+    deleteMessege.innerText = `Post: ${el.target.attributes[0].value} deleted`;
+    deleteMessege.classList.add('post__delete__outText');
+    document.body.appendChild(deleteMessege);
+    setTimeout(() => {
+        document.body.removeChild(deleteMessege);
+    }, 500);
+}
+
+// Deleting post
+function addDeleteSupport() {
+    document.addEventListener('click', (e) => {
+        if (e.target.classList[0] === 'delete__button') {
+            blog.removeChild(e.target.closest('article'));
+            presentMessege(e);
+        }
+    });
+}
+
+// FILTERING________________________________________________
+
+// For sorting and filtering
+function filteringElemets(value) {
+    const textList = document.querySelectorAll('.post__title');
+    if (value !== '') {
+        textList.forEach((el) => {
+            const current = el.innerText.toLowerCase();
+            if (current.search(value) === -1) {
+                el.parentElement.classList.add('hide');
+            } else {
+                el.parentElement.classList.remove('hide');
+            }
+        });
+    } else {
+        textList.forEach((elem) => {
+            elem.parentElement.classList.remove('hide');
+        });
+    }
+}
+
+// For default filtering without sort
+function filter() {
+    filtering.addEventListener('input', (e) => {
+        const val = e.target.value.trim().toLowerCase();
+        filteringElemets(val);
+    });
+}
+
+// SORTING________________________________________________
+async function reloadSortedPage() {
+    sorting.addEventListener('change', () => {
+        const filterVal = filtering.value.trim();
+        console.log(filterVal);
+        const posts = [];
+        const onPageArticle = document.querySelectorAll('[data-post]');
+        onPageArticle.forEach((e) => {
+            const obj = {
+                id: e.attributes[0].value,
+                title: e.querySelector('.post__title').innerText,
+                body: e.querySelector('.post__text').innerText,
+            };
+            posts.push(obj);
+        });
+        blog.innerHTML = '';
+        switch (sorting.value) {
+            case 'AtoZ':
+                createPostsList(posts.sort((a, b) => (a.title > b.title ? 1 : -1)));
+                break;
+            case 'ZtoA':
+                createPostsList(posts.sort((a, b) => (a.title < b.title ? 1 : -1)));
+                break;
+            default:
+                createPostsList(posts);
+        }
+        if (filterVal !== '') {
+            filteringElemets(filterVal);
+        }
+    });
+}
+
+// FIRST INITIALIZATION______________________________
+
+// Timimg with first loading page
+async function attachHandlers(data) {
+    setTimeout(() => {
+        blog.removeChild(loading);
+        createPostsList(data);
+        addDeleteSupport();
+        filter();
+        reloadSortedPage();
+    }, 3000);
+}
+
+// First Present page
+async function firstInit() {
+    blog.appendChild(loading);
+    const posts = await getElements(requestUrl);
+    attachHandlers(posts);
+}
+
+// First init(Starter)
+firstInit();

homeworks/ivan.bieliaiev_Ckakipaki/3-async/index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="style.css">
+    <title>Document</title>
+</head>
+<body>
+    <section class="main" data-main>
+        <header class="main__header">
+            <h1 class="header__logo">blog</h1>
+            <div class="header__rightSide">
+                <form action="sort" class="rightSide__sort">
+                    <select data-sorting size="1" class="sort__section">
+                        <option data-sort='default' selected value="sort">sort</option>
+                        <option data-sort='AtoZ' value="AtoZ">A to Z</option>
+                        <option data-sort='ZtoA' value="ZtoA">Z to A</option>
+                    </select>
+                </form>
+                <input data-filter type="text" name="filter" class="rightSide__filter" placeholder="filter">
+            </div>
+        </header>
+        <section class="main__blog" data-blog>
+        </section>
+    </section>
+    <script src="app.js"></script>
+</body>
+</html>

homeworks/ivan.bieliaiev_Ckakipaki/3-async/style.css

@@ -0,0 +1,128 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  width: 100%;
+  height: 100%;
+  border: 10px solid rgb(187, 187, 187);
+  background: rgb(0, 162, 255);
+  position: relative;
+}
+
+.main {
+  margin: 0 auto;
+  width: 100%;
+  max-width: 900px;
+  border-radius: 30px;
+  background: rgb(255, 255, 255);
+  overflow: hidden;
+}
+
+.main__header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin: 20px 50px;
+}
+
+.header__logo {
+  font-size: 25px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.header__logo::first-letter {
+  color: rgb(255, 38, 0);
+}
+
+.header__rightSide {
+  display: flex;
+  flex-direction: row;
+  margin: 0 20px 0 300px;
+}
+
+.sort__section {
+  font-size: 16px;
+  height: 25px;
+  width: 90px;
+  border-radius: 7px;
+  text-transform: uppercase;
+}
+
+.rightSide__filter {
+  height: 25px;
+  font-size: 16px;
+  width: 120px;
+  margin: 0 0 0 30px;
+}
+
+.main__blog {
+  background: rgb(212, 212, 212);
+  padding: 30px 60px;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.blog__post {
+  position: relative;
+  margin: 0 0 30px;
+  width: 45%;
+  padding: 20px;
+  background: rgb(255, 255, 255);
+  border-radius: 30px;
+}
+
+.post__title {
+  margin: 0 0 25px;
+  font-size: 20px;
+  text-transform: uppercase;
+}
+
+.post__title::first-letter {
+  color: rgb(255, 38, 0);
+}
+
+.post__text {
+  font-size: 17px;
+  margin: 0 0 25px;
+}
+
+.post__delete {
+  position: absolute;
+  bottom: 15px;
+  right: 15px;
+  width: 100%;
+  text-align: right;
+}
+
+.delete__button {
+  width: 50px;
+}
+
+/* Support elements */
+
+.hide {
+  display: none;
+}
+
+.post__delete__outText {
+  padding: 5px;
+  position: fixed;
+  right: 20px;
+  top: 20px;
+  font-size: 25px;
+  font-weight: 700;
+  background: rgb(223, 146, 2);
+}
+
+.loading {
+  color: rgba(255, 166, 0, .774);
+  font-size: 25px;
+}