Scribd
Upload
28 views14 pages

Lab 3

Uploaded by

milkysdave
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
28 views14 pages

Lab 3

Uploaded by

milkysdave
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 14

МІНІСТЕРСТВО ОСВІТИ І НАУКИ

НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ «ЛЬВІВСЬКА ПОЛІТЕХНІКА»

Web-технології та Web-дизайн
Лабораторна робота робота №3
Варіант 15

Виконав студент
групи ІР-22
Матвійчук Андрій.

Львів 2020
ГИТ: https://github.com/thefreekley/webLab3-5/tree/master/mysite/main/templates/main

Завдання

3. CRUD Javascript App: View Page


Description: In this work, you have to make a simple presentation part of a
website - View Page (You can find the template of the page by following the link -
https://wireframepro.mockflow.com/view/lviv-iot-crud-js-app

For your blocks you must use data from your java/python project class.

In case you don’t have a data from previous year, you should choose any free
task from this link:
https://docs.google.com/document/d/1RW9PpalOlHn-nVIi8kbCr71vu_XLNsjj4TKpTdBnZ-
w/edit?usp=sharing

Then using JavaScript, you need to implement the following operations on


your data (it is up to you to decide which field should be used for each of the
operations):
 Sort of your items option
 Search option
 Count total amount of some of the field
(e.g total price of all cars)

Requirements:
 Responsiveness absolutely not required.
 Styling is not important at all. Is up to you.

Our recommendations and tips:


 use JS Array methods: map(), sort(), filter(), reduce()
 use native JS for any DOM operations (querySelector | findById |
insertAdjacentHTML | etc)
 a website example from live coding
 Working with DOM & JS Array methods project
https://github.com/bradtraversy/vanillawebprojects/tree/master/dom-array-
methods
 useful projects examples

View Page.html

Сторінка на якій відображаються товари.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'main/css/normalize.css' %}">
<link rel="stylesheet" href="{% static 'main/css/reset.css' %}">
<link rel="stylesheet" href="{% static 'main/css/style.css' %}">
<script src="{% static 'main/js/sort.js' %}"></script>
<title>View Page</title>
</head>
<body>
<header class="header">
<div class="header__page">
<a class="header__My-Zoo" href="#">World of Printer</a>
<a class="header__a" href="{% url 'view' %}" > My Printers </a>
<a class="header__a" href="{% url 'create' %}" > Create Printer
</a>
</div>
<nav class="nav">
<input type="input" class="nav__type" id="nav__type_"
placeholder="Type something..." >
<input type="button" class="nav_search" value="Search"
onclick="search();">
<input type="button" class="nav_clear" value="Clear"
onclick="clear_type();">
</nav>
</header>
<main class="main">
<aside class="manager">
<div class="manager__wraper">
<p class="manager_manage-animals">Manage printers</p>
<div class="manager__sort">
<span class="manager__sort_span">Sort by the most
</br> expensive printers</span>
<input type="checkbox" id="checkbox1"
onclick="sort();"/>
<label for="checkbox1"><div
class="circle"></div></label>
</div>
<p class="manager__daily-expenses">Count total
expenses</p>
<div class="manager__count-div">
<input type="button" class="manager__count"
value="Count" OnClick="count();">
</div>
<div class="manger__result">
<p class="manger__result_expenses">Total
expenses:</p>
<p id="manger__result_expenses_sum">₴0.0</p>
</div>
</div>
</aside>

<div class="block" id = "block_">


{% for el in printer %}
<div class="block__box">

<div>
<p class="block__box_title">{{ el.title }}</p>
<p class="block__box_subtitle">{{ el.description }}</p>
<p class="block__box_text">Price: <span
class="block__box_price">{{ el.price }}</span> ₴</p>
<p class="block__box_text">Speed: <span
class="block__box_speed">{{ el.speed }}</span> p/m</p>
<p class="block__box_last-updated">Last updated
<span id="block__time">{{ el.date }}</span> </p>
</div>
<div class="block__buttons">

<a href="{% url 'update' el.id %}"


class="block__edit">Edit</a>
<a href="{% url 'delete' el.id %}"
class="block__remove">Remove</a>
</div>

</div>
{% endfor %}

</div>
</main>
</body>
</html>

Sort.js
Функція count рахує кількість товарів,
Функція sort сортує блоки товарів за допомогою алгоритму сортування бабочкою

functio
n
count()
{
var summ=0;

var count_arr=document.getElementsByClassName("block__box_price");
for( var i=0; i<count_arr.length;i++){
summ+=Number(count_arr[i].textContent)
}
document.getElementById("manger__result_expenses_sum").textContent="₴" +
String(summ);
}

function sort(){
var checkBox = document.getElementById("checkbox1");

//divs[j - 1].children[0].children[2].children[0].textContent
if(checkBox.checked == true){

const items = document.getElementById("block_");


for (let i = 0; i < items.children.length - 1; i++) {
for (let j = i; j < items.children.length; j++) {
if
(Number(items.children[i].children[0].children[2].children[0].textContent) >
Number(items.children[j].children[0].children[2].children[0].textContent)) {

let replacedNode = items.replaceChild(items.children[j],


items.children[i]);
insertAfter(replacedNode, items.children[i]);
}
}
}
}
else{

const items = document.getElementById("block_");


for (let i = 0; i < items.children.length - 1; i++) {
for (let j = i; j < items.children.length; j++) {
if
(Number(items.children[i].children[0].children[2].children[0].textContent) <
Number(items.children[j].children[0].children[2].children[0].textContent)) {

let replacedNode = items.replaceChild(items.children[j],


items.children[i]);
insertAfter(replacedNode, items.children[i]);
}
}
}

function insertAfter(elem, refElem) {


return refElem.parentNode.insertBefore(elem, refElem.nextSibling);
}

function clear_type(){
document.getElementById("nav__type_").value="";
divs=document.getElementsByClassName("block__box");
for (i = 0; i < divs.length; i++) {
divs[i].style.display = "";
}

}
function search(){
input = document.getElementById("nav__type_");
filter = input.value.toUpperCase();
divs=document.getElementsByClassName("block__box");
for (i = 0; i < divs.length; i++) {
a = divs[i].getElementsByClassName("block__box_title")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
divs[i].style.display = "";
} else {
divs[i].style.display = "none";
}
}
}

style.css
Стилі до основних блоків view-page
body{
font-family: "Arial";

}
a{
text-decoration: none;
color: rgb(0,0,0);
}

.header{
margin-right: 4px;
margin-left: 4px;
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
background: #F8F8F8;
border: solid #BDBDBD 1px;
border-radius: 5px
}

.header__My-Zoo{

font-size: 18px;
color: #7F7F7F;
padding: 0px 20px 0px 15px;
}

.header__a{
height: 50px;
padding:16px 15px 16px 15px;
background: #F8F8F8;
transition: 0.5s;

}
.header__a:hover{
transition: 0.5s;
background-color: #E0E0E0;
}

.nav__type{
width: 220px;
height: 25px;
color: black;
border: solid #BDBDBD 1px;
border-radius: 2px
}
.nav_search{
padding:0px 15px 0px 15px;
height: 30px;
border: none;
outline: none;
background: #F8F8F8;
border-radius: 3px;
border: solid #3E95DF 1px;
color: #3E95DF;
margin:0px 5px 0px 5px;
transition: 0.5s;
}
.nav_search:hover{
color: #F8F8F8;
background:#3E95DF;
transition: 0.5s;
}

.nav_clear{
padding:0px 15px 0px 15px;
height: 30px;
border: none;
outline: none;
background: #F8F8F8;
border-radius: 3px;
border: solid #D9534F 1px;
color: #D9534F;
margin:0px 5px 0px 5px;
transition: 0.5s;
}
.nav_clear:hover{
color: #F8F8F8;
background:#D9534F;
transition: 0.5s;
}
.manager{
margin-top: 20px;
width: 250px;
height: 100ex;
border-right: solid #CDCDCD 2px;
display: flex;
justify-content: center;
align-items: start;
}
.manager__wraper{
width: 220px;
display: flex;
flex-direction: column;
align-items:space-beetwen;

.manager_manage-animals{
text-align: center;
font-size: 22px;
}
.manager__sort{
font-size: 15px;
padding-top: 20px;
padding-bottom: 20px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: solid #CDCDCD
2px;
}
.manager__sort_span{
font-weight: bold;
color: #616161;
}
.manager__daily-expenses{
font-size: 15px;
padding-top: 20px;
font-weight: bold;
color: #616161;
}

.manager__count{

margin-top: 15px;
width: 100px;
font-weight: bold;
height: 30px;
border: none;
outline: none;
background: #0275D8;
border-radius: 3px;
color: white;
transition: 0.5s;
}
.manager__count:hover{
transform: scale(1.05);
transition: 0.5s;
}
.manger__result{
padding-top:20px;
display: flex;
justify-content: space-between;
}
.manager__count-div{
display: flex;
justify-content: center;
}
#manger__result_expenses_sum{
font-weight: bold;
}
.manger__result_expenses{
font-size: 15px;
color: #616161;
}
#checkbox1{
display: none;
}
#checkbox1 + label{
display: block;
width: 40px;
height: 15px;
border: solid #0275D8 1.5px;
border-radius: 10px;
}

#checkbox1:checked ~ label div{


margin-left: 24px;
transition: 0.2s;
}
label div{
transition: 0.2s;
height: 14px;
width: 14px;
border-radius: 7px;
background: #0275D8;
}
.main{
display: flex;
justify-content: flex-start;
}

.block__box{
margin:30px;
margin-right: 0px;
width: 180px;
height: 280px;
border: solid #616161 1.5px;
display: flex;
flex-direction: column;
align-items: space-between;
justify-content: space-between;
}

.block__box_title{
padding-top: 15px;
padding-left: 10px;
font-size: 18px;
font-weight: bold;
}
.block__box_text{
padding-top: 10px;
padding-left: 10px;
font-size: 13px;
color:#61617A;
}
.block__box_subtitle{
padding-top: 14px;
padding-left: 10px;
font-size: 13px;
}

.block__box_last-updated{
padding-top: 15px;
padding-left: 10px;
font-size: 13px;
color: #B0B0B0;
}
.block__buttons{

display: flex;
justify-content: space-between;
padding-bottom: 5px;
}
.block__edit{
text-align:center;
line-height:30px;
margin-left: 10px;
margin-top: 15px;
width: 75px;
font-size: 14px;
height: 30px;
border: none;
outline: none;
background: #5BC0DE;
border-radius: 4px;
color: white;
transition: 0.5s;
}
.block__edit:hover{
transform: scale(1.05);
transition: 0.5s;
}

.block__remove{
text-align:center;
line-height:30px;
margin-right: 10px;
margin-top: 15px;
width: 75px;
font-size: 14px;
height: 30px;
background: #D9534F;
border-radius: 4px;
color: white;
transition: 0.5s;
}
.block__remove:hover{
transform: scale(1.05);
transition: 0.5s;
}

.block{
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
}

You might also like