all home works

hw1react

@@ -0,0 +1 @@
+Subproject commit 1bbd99dc52261d0e85c44bb02195cd22a1bf4b61

myDraft test/index.html

@@ -16,14 +16,12 @@
             </header>
             <main class="main">
                 <section class="content">
-                    
                     <header class="content-header">
                         <div class="time">There are 10 questions in this quiz. You have 1 minute to answer all questions.</div>
                         <div id="button-block" class="button-block">
                             <button id="btnStart" class="button" type="button">Start</button>
                         </div>
                         <div id="countdown" class="countdown">
-                        
                             <div class="countdown-number">
                                 <span class="minutes countdown-time"></span>
                                 <span class="countdown-text">Minutes</span>
@@ -39,20 +37,13 @@
                     <div id="button-block" class="button-block">
                         <button id="submit">Grade Me</button>
                     </div>
-                    <div id="button-block" class="button-block">
-                        <button id="create_constructor">Create own Quiz</button> 
-                    </div>
                     <div id="results"></div>
-                    <div id="quiz_constructor"></div>
-                    
                 </section>
             </main>
             <footer class="footer"></footer>
         </div>
         <script src="quizzes.js"></script>
         <script src="index.js"></script>
-        <script src="localStorageConstructor.js"></script>
         <script src="timer.js"></script>
-        <script src="quizConstructor.js"></script>
     </body>
 </html>

myDraft testConstructor/all.css

@@ -0,0 +1,153 @@
+*,
+*:before,
+*:after {
+	box-sizing: border-box;
+}
+html, body {
+    height: 100%;
+	margin: 0;
+}
+body{
+	font-size: 20px;
+	font-family: sans-serif;
+	color: #333;
+}
+p {
+    margin: 0 0 15px 0;
+}
+span {
+    padding-left: 5px;
+    color: #2e2e2e;
+}
+
+.main-header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-image: url(https://storge.pic2.me/cm/3840x2160/920/58710da961397.jpg);
+    color: white;
+}
+.content {
+    overflow: hidden;
+	margin: 20px 80px;
+}
+
+.content-header {
+    overflow: hidden;
+    margin: 20px 20px;
+    text-align: center;
+    color: rgb(112, 112, 112);
+}
+
+#quiz {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+.card {
+    margin: 5px 20px 50px 20px;
+    width: 50%;
+	padding: 15px 15px 15px;
+    box-shadow: 0 0 10px rgba(0,0,0,0.5);
+	border-radius: 15px;
+	text-align: center;
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+    align-items: center;
+    color: rgb(90, 89, 89);
+}
+.question{
+	font-weight: 600;
+}
+.answers {
+    margin-bottom: 20px;
+    padding-top: 15px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+#create_constructor, #submit{
+	font-family: sans-serif;
+	font-size: 20px;
+	background-color: #182264;
+	color: #fff;
+	border: 0px;
+	border-radius: 3px;
+	padding: 15px 60px;
+	cursor: pointer;
+	margin-bottom: 20px;
+}
+#submit:hover{
+	background-color: #1c2fa8;
+}
+.button-block {
+    display: flex;
+    justify-content: center;
+}
+.button {
+    margin-top: 20px;
+    margin-bottom: 16px;
+    padding: 15px 60px;
+    background-color: #ad0000;
+	color: white;
+	font-size: 20px;
+    font-weight: 700;
+    border: none;
+    cursor: pointer;
+}
+.countdown {
+    font-family: sans-serif;
+    color: #fff;
+    display: inline-block;
+    font-weight: 100;
+    text-align: center;
+    font-size: 30px;
+  }
+   
+.countdown-number {
+    padding: 10px;
+    border-radius: 3px;
+    background: #1c2fa8;
+    display: inline-block;
+    
+  }
+   
+.countdown-time {
+    padding: 10px;
+    border-radius: 3px;
+    background: #182264;
+    display: inline-block;
+    color: #fff;
+  }
+   
+.countdown-text {
+    display: block;
+    padding-top: 5px;
+    font-size: 16px;
+    color: #fff;
+  }
+
+  h4, h5, .test-again {
+      text-align: center;
+  }
+  @media (max-width: 1199px) {
+    .content-header {
+        margin: 0;
+    }
+
+    .content {
+        margin: 0;
+    }
+
+    .card {
+        width: 95%;
+        margin: 10px;
+    }
+
+    .button {
+        margin-bottom: 10px;
+    }
+}

myDraft testConstructor/index.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+    <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">
+        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
+        <link href="all.css" rel="stylesheet">
+        <title>Quiz constructor</title>
+    </head>
+    <body> 
+        <div class="wrapper">
+            
+                <header class="main-header">
+                </header>
+                <main class="main">
+                    <section class="content">
+                        
+                        <div class="content-header">
+                            
+                            <div id="button-block" class="button-block">
+                                <button id="create_constructor">Create own Quiz</button> 
+                            </div>
+                            <div id="quiz_constructor"></div>
+                            <div id="button-block" class="button-block">
+                                <button id="btnStart" class="button" type="button">Start</button>
+                            </div>
+                            <div class="time"> You have 1 minute to answer all questions.</div>
+                            <div id="countdown" class="countdown">
+                                <div class="countdown-number">
+                                    <span class="minutes countdown-time"></span>
+                                    <span class="countdown-text">Minutes</span>
+                                </div>
+                                <div class="countdown-number">
+                                    <span class="seconds countdown-time"></span>
+                                    <span class="countdown-text">Seconds</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div id="quiz"></div>
+                        <div id="button-block" class="button-block">
+                            <button id="submit">Grade Me</button>
+                        </div>
+                        
+                        <div id="results"></div>
+                        
+                    </section>
+                </main>
+                <footer class="footer"></footer>
+            
+        </div>
+        <script src="quizConstructor.js"></script>
+        <script src="localStorageConstructor.js"></script>
+        <script src="timer.js"></script>
+        <script src="index.js"></script>
+    </body>
+</html>

myDraft testConstructor/index.js

@@ -0,0 +1,101 @@
+const quizContainer = document.getElementById('quiz');
+const resultsContainer = document.getElementById('results');
+const submitButton = document.getElementById('submit')
+// const createQuizBtn = document.getElementById('create_constructor')
+
+
+ function buildQuiz(){
+  getConstructorLS()
+    const output = [];
+  
+    // перебираем вопросы
+    yourQuiz.forEach(
+      (currentQuestion, questionNumber) => {
+          const answers = []; 
+  
+        // перебираем ответы
+        for(letter in currentQuestion.answers){
+  
+          // добавляем радио кнопку
+          answers.push(
+            `<label>
+              <input type="radio" name="question${questionNumber}" value="${letter}">
+              ${letter} :
+              ${currentQuestion.answers[letter]}
+            </label>`
+          );
+         
+        }
+  
+         output.push(
+          `<div class="card">
+              <div class="question"> ${currentQuestion.question} </div>
+              <div class="answers"> ${answers.join('')} </div>
+           </div>`
+        );
+        setAnswersToLS(answers)
+      
+      }
+    );
+  
+    quizContainer.innerHTML = output.join('');
+    
+  }
+  const setAnswersToLS = (data) => {
+    localStorage.setItem('answers', JSON.stringify(data));
+  }
+  const getAnswersLS = () => {
+  const answersLS = JSON.parse(localStorage.getItem('answers'));
+  if (answersLS) {
+    answersLS.forEach((answer, index) => answers[index] = answer)
+    }
+  }
+
+
+function showResults(){
+
+    // контейнер для ответов
+    const answerContainers = quizContainer.querySelectorAll('.answers');
+  
+    // счётчик правильных ответов
+    let numCorrect = 0;
+    
+    // для каждого вопроса
+    yourQuiz.forEach( (currentQuestion, questionNumber) => {
+  
+      // находим выбранный ответ
+      const answerContainer = answerContainers[questionNumber];
+      const selector = `input[name=question${questionNumber}]:checked`;
+      const userAnswer = (answerContainer.querySelector(selector) || {}).value;
+      const rightAnswer = currentQuestion.correctAnswer;
+      
+      // если ответ правильный
+      if(userAnswer === rightAnswer){
+        // то добавляем к правильным ответам
+        numCorrect++;
+  
+        // и отмечаем зелёным
+        answerContainers[questionNumber].style.color = 'green';
+      }
+      // если ответ не правильный, или не отмеченный 
+      else  {
+        
+       // - тогда красный
+        answerContainers[questionNumber].style.color = 'red';
+        const correctAnswer = document.createElement('p');
+        correctAnswer.innerText=`Correct answer is: ${rightAnswer}`
+        answerContainers[questionNumber].appendChild(correctAnswer)
+      }
+    });
+  
+    // показываем результат
+    let userTestResult = numCorrect >= 7 ? "passed" : "did not pass";
+    resultsContainer.innerHTML = `<h4>You ${userTestResult} the test! <a href="#" class="test-again">Take the test again</a></h4>
+                                  <h5>You scored ${numCorrect} out of ${yourQuiz.length}</h5>`;
+
+     document.querySelector('.test-again').onclick = (e) => {
+       e.preventDefault();
+       localStorage.removeItem('answers');
+       location.reload();
+     } 
+}

myDraft test/quizConstructor.js

@@ -1,4 +1,15 @@
 const yourQuiz = []
+const createQuizBtn = document.getElementById('create_constructor')
+createQuizBtn.onclick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    document.querySelector('#button-block').setAttribute('display', 'none');
+    buildConstructor();
+}
+const titleOfQuiz = () => {
+    const header = document.querySelector('.main-header')
+    const userQuizTitle = document.createElement('h2')
+}
 const buildConstructor = () => {
     const templateForm = document.createElement('form')
     templateForm.className = "template_form"
@@ -9,7 +20,7 @@ const buildConstructor = () => {
                                 <div class="constructor_answers">
                                 <p><label>Answers</label></p>
                                 <p>
-                                <input type="text" id="answer_letter" class="constructor_answer_lettter" placeholder="Enter a letter(ex: a or b or c or d)">
+                                <input type="text" id="answer_letter" class="constructor_answer_letter" placeholder="Enter a letter(ex: a or b or c or d)">
                                 <input type="text" class="constructor_answer" placeholder="Enter an answer"></p>
                                 </div>
                                 <div>
@@ -19,6 +30,7 @@ const buildConstructor = () => {
                                 <input type="text" id="correct_answer_letter" class="constructor_correct_answer_lettter" placeholder="Enter the letter of the correct answer"></p>
                             </fieldset>
                             <button type="submit" class="add_question" id="add_question">Add a question</button>
+                            <button type="submit" class="start_your_quiz" id="start_your_quiz">Start Your Quiz</button>
     `
 
 
@@ -29,7 +41,7 @@ const buildConstructor = () => {
         let answerContainer = document.querySelector('.constructor_answers');
         const frame = document.createElement('p');
         frame.innerHTML = `
-                            <input type="text" id="answer_letter" class="constructor_answer_lettter" placeholder="Enter a letter">
+                            <input type="text" id="answer_letter" class="constructor_answer_letter" placeholder="Enter a letter">
                             <input type="text" class="constructor_answer" placeholder="Enter an answer">`
         answerContainer.appendChild(frame);                   
     }
@@ -37,32 +49,45 @@ const buildConstructor = () => {
         e.preventDefault();
         e.stopPropagation();
         
-        const questionCust = document.querySelector('#customerQuestion').value;
-        const letterCust = document.querySelector('.constructor_answer_lettter').value;
-        const answerCust = document.querySelector('.constructor_answer').value;
-        yourQuiz.push(new Question(questionCust, letterCust, answerCust))
+        
+        yourQuiz.push(newQuestion())
         setConstructorToLS(yourQuiz);
         templateForm.remove();
         buildConstructor();
     }
     console.log(yourQuiz)
+    const btnStartYourQuiz = document.getElementById('btnStart');
+    btnStartYourQuiz.onclick = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setConstructorToLS();
+        templateForm.remove();
+        initializeClock('countdown', deadline);
+        buildQuiz();
+        localStorage.setItem('timeinterval', initializeClock('countdown', deadline));
+    }
 }
 titleQuiz = document.querySelector('#titleQuiz')
 
 
-class Question {
-    constructor(questionCust, answerCust, letterCust) {
-        
-    this.question = questionCust;
-    this.answers = {letterCust: answerCust};
-    this.correctAnswer = document.querySelector('#correct_answer_letter').value;  
-    } 
+
+const newQuestion = () => {
+    const questionCust = document.querySelector('#customerQuestion').value;
+    const letterCust = document.querySelector('.constructor_answer_letter').value;
+    const answerCust = document.querySelector('.constructor_answer').value;
+    const correctAnswerLetter = document.querySelector('#correct_answer_letter').value;
+    let answers = []
+    
+    for (letterCust in questionCust.answers) {
+        answerCust = questionCust.answers[letterCust]
+        answers.push(`${letterCust} : ${answerCust}`)
+}   
    
-}       
     
-createQuizBtn.onclick = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    document.querySelector('#button-block').setAttribute('display', 'none');
-    buildConstructor();
-}
+    return {
+        question: questionCust,
+        answers: {...[answers].map(item => item.key)}, 
+        
+        correctAnswer: correctAnswerLetter
+    }
+}    

myDraft testConstructor/timer.js

@@ -0,0 +1,59 @@
+
+
+// timer
+function getTimeRemaining(endtime) {
+  let t = Date.parse(endtime) - Date.parse(new Date());
+  let seconds = Math.floor((t / 1000) % 60);
+  let minutes = Math.floor((t / 1000 / 60) % 60);
+ 
+  return {
+    'total': t,
+    'minutes': minutes,
+    'seconds': seconds
+  };
+}
+ 
+function initializeClock(id, endtime) {
+    let clock = document.getElementById(id);
+  
+    let minutesSpan = clock.querySelector('.minutes');
+    let secondsSpan = clock.querySelector('.seconds');
+ 
+function updateClock() {
+    let t = getTimeRemaining(endtime);
+    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
+    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
+    submitButton.onclick = (e) => {
+    e.preventDefault();
+    clearInterval(timeinterval);
+      clock.innerHTML = '';
+      showResults();
+  }
+    if (t.total <= 0) {
+      clearInterval(timeinterval);
+      clock.innerHTML = '';
+      showResults();
+    }
+  }
+ 
+  updateClock();
+  const timeinterval = setInterval(updateClock, 1000);
+  return timeinterval;
+}
+
+ 
+let deadline = new Date(Date.parse(new Date()) + 60 * 1000);
+//initializeClock('countdown', deadline);
+const btnStart = document.getElementById('btnStart');
+btnStart.onclick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    initializeClock('countdown', deadline);
+    buildQuiz();
+    localStorage.setItem('timeinterval', initializeClock('countdown', deadline));
+}
+const btnGradeMe = document.getElementById('submit');
+
+window.onload = function () {
+    localStorage.removeItem('answers')
+}

pizza/cart.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang='en'>
+    <head>
+        <meta charset='UTF-8' />
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+        <!--Bootstrap css-->
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
+        <link rel='stylesheet' href='style.css'>
+        <title> Pizza Delivery Cart</title>
+    </head>
+    <body>
+        <header>
+            <div class="container-fluid">
+                <div class="row ">
+                    <nav class="navbar navbar-expand-lg navbar-light">
+                        <a class="navbar-brand" href="index.html"><img src="img/pizza-logo.png" alt="logo" style="width: 100px;"></a>
+                        <a href="cart.html" type="button" class="btn-cart px-5">
+                            <svg  class="icon icon-basket" width="3em" height="3em" viewBox="0 0 16 16" class="bi bi-cart4" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                                <path fill="#fff" d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l.5 2H5V5H3.14zM6 5v2h2V5H6zm3 0v2h2V5H9zm3 0v2h1.36l.5-2H12zm1.11 3H12v2h.61l.5-2zM11 8H9v2h2V8zM8 8H6v2h2V8zM5 8H3.89l.5 2H5V8zm0 5a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/>
+                            </svg>
+                            <span class="btn-cart-info"></span>
+                        </a>
+                    </nav>
+                </div>
+            </div>
+        </header>
+        <main>
+            <div class="container-fluid">
+                <div class="cart">
+                    <h2 class="cart__title">Ваш заказ</h2>
+                    <div id="cart__content" class="my-3"></div>
+                    <button type="button" id="cart__checkout" class="btn btn-warning mb-3 btn-checkout">Оформить заказ</button>
+                    <button type="button" id="cart__reset" class="btn btn-light mb-3 btn-clear">Очистить корзину</button>
+                </div>
+            </div>
+            
+        </main>
+        <footer>
+            <div class="container-fluid">
+                <div class="row">
+                    <div class="col py-3"><a href="tel:+380501234567"><p class="text-center my-auto">+38 050 123 45 67</p></a></div>
+                </div>
+            </div>
+        </footer>
+        <script src='https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.js'></script>
+         <!--  jQuery, Popper.js, and Bootstrap JS -->
+        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
+        <!-- Custom script -->
+        <script type='module' src='scripts/cart.js'></script>  
+    </body>
+</html>

pizza/index.html

@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang='en'>
+    <head>
+        <meta charset='UTF-8' />
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+        <!--Bootstrap css-->
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
+        <link rel='stylesheet' href='style.css'>
+        <title> Pizza Delivery</title>
+    </head>
+    <body>
+        <header>
+            <div class="container-fluid">
+                <div class="row ">
+                    <nav class="navbar navbar-light">
+                        <a class="navbar-brand" href="#"><img src="img/pizza-logo.png" alt="logo" style="width: 100px;"></a>
+                        <form class="form-search my-2 my-lg-0 mr-0">
+                            <input class="form-control mr-sm-0" type="search" id="search" placeholder="Поиск" aria-label="Search">
+                        </form>
+                        <a href="cart.html" type="button" class="btn-cart px-5">
+                            <svg  class="icon icon-basket" width="3em" height="3em" viewBox="0 0 16 16" class="bi bi-cart4" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                                <path fill="#fff" d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l.5 2H5V5H3.14zM6 5v2h2V5H6zm3 0v2h2V5H9zm3 0v2h1.36l.5-2H12zm1.11 3H12v2h.61l.5-2zM11 8H9v2h2V8zM8 8H6v2h2V8zM5 8H3.89l.5 2H5V8zm0 5a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/>
+                            </svg>
+                            <span class="btn-cart-info"></span>
+                        </a>
+                    </nav>
+                </div>
+            </div>
+        </header>
+        <main>
+            <div class="container-fluid">
+                <div class="row">
+                    <div class="col-xs-12 col-md-4 col-lg-2 order-1 bg-light py-4">
+                        <h3>Выбрать</h3> 
+                        <form id="filter">
+                            <div class="row">
+                                <div class="choice-price col-6 col-md-12 py-3">
+                                    Цена: <br>
+                                    <div class="price-choice d-flex mb-2">
+                                        <input type="number" id="smallPrice" class="form-control mr-1" placeholder="от">
+                                        <input type="number" id="bigPrice" class="form-control" placeholder="до">
+                                    </div>
+                                    <button type="button" id="btn-price" class="btn btn-outline-warning rounded-pill">Ok</button>
+                                </div>
+                                <div class="choice-caloricity col-6 col-md-12 py-3">
+                                    Каллории: <br>
+                                    <div class="price-choice d-flex mb-2">
+                                        <input type="number" id="smallCaloricity" class="form-control mr-1" placeholder="от">
+                                        <input type="number" id="bigCaloricity" class="form-control" placeholder="до">
+                                    </div>
+                                    <button type="button" id="btn-caloricity" class="btn btn-outline-warning rounded-pill">Ok</button>
+                                </div>
+                            </div>
+                            <button type="reset" id="cancel" class="btn btn-warning btn-lg my-2">Отменить выбор</button>
+                            <button type="button" class="btn btn-outline-warning btn-modal-open btn-lg my-3" data-toggle="modal" data-target="#staticBackdroppizza">Создать свою пиццу</button>
+                            <button type="button" class="btn btn-outline-danger btn-lg my-3">Понравившиеся пиццы</button>
+                        </form>   
+                    </div>
+                    <div class="col-xs-12 col-md-8 col-lg-10 order-2 py-4">
+                        <div class="row"> <!--сортировка списка-->
+                            <form class="d-flex align-items-center">
+                                <div class="form-group">
+                                    <select class="form-control mx-3 bg-light" id="sort">
+                                        <option value="default">новинки</option>
+                                        <option value="more">по возрастанию цены</option>
+                                        <option value="less">по убыванию цены</option>
+                                    </select>
+                                </div>
+                            </form>
+                        </div>         
+                        <div class="card-list row py-3 d-flex flex-wrap text-center"> <!--список пицц-->
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+                <div id="modal" class="modal-dialog modal-dialog-centered">
+                    <div class="modal-content">
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                            <span aria-hidden="true" class="modal-close">&times;</span>
+                        </button>
+                        <div class="modal-body">
+                            
+                        </div>
+                        <button type="button" class="btn btn-warning" data-dismiss="modal">Закрыть</button>
+                    </div>
+                </div>
+            </div>
+            <div class="modal fade" id="staticBackdroppizza" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdroppizzaLabel" aria-hidden="true">
+                <div id="modal-create-pizza" class="modal-dialog modal-dialog-centered">
+                    <div class="modal-content">
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                            <span aria-hidden="true" class="modal-close">&times;</span>
+                        </button>
+                        <div class="modal-body-create">
+                          <form class="form-create-pizza"></form>   
+                        </div>
+                        <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
+                    </div>
+                </div>
+            </div>
+        </main>
+        <footer>
+            <div class="container-fluid">
+                <div class="row">
+                    <div class="col py-3"><a href="tel:+380501234567"><p class="text-center my-auto">+38 050 123 45 67</p></a></div>
+                </div>
+            </div>
+        </footer>
+        <script src='https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.js'></script>
+         <!--  jQuery, Popper.js, and Bootstrap JS -->
+        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
+        <!-- Custom script -->
+        <script type='module' src='scripts/index.js'></script>  
+    </body>
+</html>

pizza/registration.html

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang='en'>
+    <head>
+        <meta charset='UTF-8' />
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+        <!--Bootstrap css-->
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
+        <link rel='stylesheet' href='style.css'>
+        <title> Pizza Delivery Registration</title>
+    </head>
+    <body>
+        <header>
+            <div class="container-fluid">
+                <div class="row ">
+                    <nav class="navbar navbar-expand-lg navbar-light">
+                        <a class="navbar-brand" href="index.html"><img src="img/pizza-logo.png" alt="logo" style="width: 100px;"></a>
+                        <a href="cart.html" type="button" class="btn-cart d-flex py-0 px-5 align-items-center">
+                            <svg  class="icon icon-basket" width="3em" height="3em" viewBox="0 0 16 16" class="bi bi-cart4" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                                <path fill="#fff" d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l.5 2H5V5H3.14zM6 5v2h2V5H6zm3 0v2h2V5H9zm3 0v2h1.36l.5-2H12zm1.11 3H12v2h.61l.5-2zM11 8H9v2h2V8zM8 8H6v2h2V8zM5 8H3.89l.5 2H5V8zm0 5a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/>
+                            </svg>
+                            <span class="btn-cart-info"></span>
+                        </a>
+                    </nav>
+                </div>
+            </div>
+        </header>
+        <main>
+            <div class="container-fluid">
+                <h2 class="form-title">Регистрация</h2>
+                <form class="user-info">
+                    <div class="form-row">
+                        <div class="col-md-4 mb-3">
+                          <label for="name">Имя<span class="required">*</span></label>
+                          <input type="text" class="form-control" id="name" placeholder="Имя" required>
+                        </div>
+                    </div>
+                    <div class="form-row">
+                        <div class="col-md-4 mb-3">
+                          <label for="surname">Фамилия<span class="required">*</span></label>
+                          <input type="text" class="form-control" id="surname" placeholder="Фамилия" required>
+                        </div>
+                    </div>
+                    <div class="form-row">
+                        <div class="col-md-4 mb-3">
+                          <label for="phone">Телефон<span class="required">*</span></label>
+                          <input type="tel" class="form-control" id="phone" placeholder="Телефон" required>
+                        </div>
+                    </div>
+                    <div class="form-row">
+                        <div class="col-md-4 mb-3">
+                          <label for="address">Адрес</label>
+                          <input type="text" class="form-control" id="address" placeholder="Адрес">
+                        </div>
+                    </div>
+                    <button type="submit" class="btn btn-outline-warning my-3 btn-to-cart">Перейти к заказу</button>
+                </form>
+            </div>
+            
+        </main>
+        <footer>
+            <div class="container-fluid">
+                <div class="row">
+                    <div class="col py-3"><a href="tel:+380501234567"><p class="text-center my-auto">+38 050 123 45 67</p></a></div>
+                </div>
+            </div>
+        </footer>
+        <script src='https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.js'></script>
+         <!--  jQuery, Popper.js, and Bootstrap JS -->
+        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
+        <!-- Custom script -->
+        <script type='module' src='scripts/index.js'></script>  
+    </body>
+</html>

pizza/scripts/cart.js

@@ -0,0 +1,5 @@
+import {removeCartProduct} from './view/cart.render.js'
+
+  document.querySelector('#cart__reset').onclick = function () {
+    removeCartProduct();
+  }  

pizza/scripts/data/compositionList.js

@@ -0,0 +1,37 @@
+export const compositionList = [{
+    id: 1,
+    name: "Моцарелла",
+    caloricity: 28,
+    price: 15,
+},
+{
+    id: 2,
+    name: "Креветки",
+    caloricity: 37,
+    price: 35,
+},
+{
+    id: 3,
+    name: "Салями",
+    caloricity: 42,
+    price: 25,
+},
+{
+    id: 4,
+    name: "Лук",
+    caloricity: 13,
+    price: 7,
+},
+{
+    id: 5,
+    name: "Томаты",
+    caloricity: 21,
+    price: 17,
+},
+{
+    id: 6,
+    name: "Ветчина",
+    caloricity: 37,
+    price: 35,
+},
+];

pizza/scripts/data/pizzaList.js

@@ -0,0 +1,173 @@
+export const pizzaList = [{
+    id: 1,
+    img: "1.png",
+    name: "Супер гриль",
+    composition: ["охотничьи колбаски", "сосиски", "моцарелла", "баклажан", "томаты", "лук", "перец", "соус томатный", "соус BBQ", "зеленый соус", "майонез"],
+    caloricity: 1569,
+    price: 249,
+},
+{
+    id: 2,
+    img: "2.jpg",
+    name: "Маргарита",
+    composition: ["томаты", "моцарелла", "орегано", "базилик", "соус Pomodoro"],
+    caloricity: 1042,
+    price: 70,
+    priceOfTheDay: true,
+},
+{
+    id: 3,
+    img: "3.jpg",
+    name: "Карбонара",
+    composition: ["ветчина", "шампиньоны", "пармезан", "моцарелла", "томаты", "яйцо перепелиное", "смесь перцев", "соус Carbonara"],
+    caloricity: 1369,
+    price: 119,
+},
+{
+    id: 4,
+    img: "4.jpg",
+    name: "C сырным бортиком",
+    composition: ["хамон", "моцарелла", "сливочный сыр", "персик", "сливки", "руккола"],
+    caloricity: 1140,
+    price: 139,
+},
+{
+    id: 5,
+    img: "5.png",
+    name: "Полло",
+    composition: ["куриное филе sous-vide", "ананас", "моцарелла", "орегано", "перец чили", "соус Pomodoro"],
+    caloricity: 1232,
+    price: 99,
+    priceOfTheDay: true,
+},
+{
+    id: 6,
+    img: "6.jpeg",
+    name: "Пепперони",
+    composition: ["Салями Пепперони", "моцарелла", "орегано", "соус Pomodoro"],
+    caloricity: 1280,
+    price: 119,
+},
+{
+    id: 7,
+    img: "7.png",
+    name: "Гурмео",
+    composition: ["охотничьи колбаски", "салями пепперони", "ветчина", "куриное филе sous-vide", "шампиньоны", "орегано", "соус BBQ"],
+    caloricity: 1343,
+    price: 149,
+},
+{
+    id: 8,
+    img: "8.jpeg",
+    name: "Четыре сыра",
+    composition: ["пармезан", "дор блю", "чеддер", "моцарелла", "груша", "грецкий орех", "соус сливочный"],
+    caloricity: 1220,
+    price: 109,
+},
+{
+    id: 9,
+    img: "9.jpeg",
+    name: "Американо",
+    composition: ["куриное филе sous-vide", "салями", "пепперони", "охотничьи колбаски", "кукуруза", "моцарелла", "лук", "орегано", "соус Pomodoro", "соус BBQ"],
+    caloricity: 1422,
+    price: 149,
+},
+{
+    id: 10,
+    img: "10.jpg",
+    name: "Кальцоне",
+    composition: ["ветчина", "шампиньоны", "дор блю", "моцарелла", "томаты", "орегано"],
+    caloricity: 1056,
+    price: 99,
+    priceOfTheDay: true,
+},
+{
+    id: 11,
+    img: "11.png",
+    name: "Берлускони",
+    composition: ["сливочный соус из белых грибов и шампиньонов с трюфельным маслом", "моцарелла", "дор блю", "орегано", "лук"],
+    caloricity: 1293,
+    price: 125,
+},
+{
+    id: 12,
+    img: "12.png",
+    name: "Супер гриль",
+    composition: ["охотничьи колбаски", "сосиски", "сыр моцарелла", "баклажан", "томаты", "лук", "перец", "соус томатный"],
+    caloricity: 1410,
+    price: 132,
+},
+{
+    id: 13,
+    img: "13.jpeg",
+    name: "Кампанья",
+    composition: ["охотничьи колбаски", "ветчина", "салями пепперони", "куриное филе sous-vide", "шампиньоны", "моцарелла", "томаты"],
+    caloricity: 1510,
+    price: 144,
+},
+{
+    id: 14,
+    img: "14.png",
+    name: "Дьявола",
+    composition: ["горчичный соус", "моцарелла", "молочные сосиски", "бекон", "помидор", "зелень"],
+    caloricity: 1180,
+    price: 107,
+},
+{
+    id: 15,
+    img: "15.png",
+    name: "Бекон ранч",
+    composition: ["фирменный пицца-соус", "моцарелла", "бекон", "ветчина", "телятина", "помидор", "перец болгарский", "соус ранч"],
+    caloricity: 1322,
+    price: 113,
+},
+{
+    id: 16,
+    img: "16.png",
+    name: "Гроссето",
+    composition: ["фирменный пицца-соус", "моцарелла", "лосось", "креветки", "сладкий перец", "маслины", "лимон", "базилик", "орегано"],
+    caloricity: 980,
+    price: 159,
+},
+{
+    id: 17,
+    img: "17.png",
+    name: "Тоскана",
+    composition: ["фирменный пицца-соус", "моцарелла", "ветчина", "бекон", "салями-пеперони", "сладкий перец", "сыр «Пармезан»", "базилик", "орегано"],
+    caloricity: 1310,
+    price: 139,
+},
+{
+    id: 18,
+    img: "18.png",
+    name: "Грибная",
+    composition: ["фирменный пицца-соус", "моцарелла", "шампиньоны", "опята", "маслины", "лук", "базилик", "орегано", "зелень"],
+    caloricity: 1451,
+    price: 132,
+},
+{
+    id: 19,
+    img: "19.png",
+    name: "Туринская",
+    composition: ["горчичный соус", "моцарелла", "салями", "охотничьи колбаски", "огурцы маринованные", "зелень"],
+    caloricity: 1140,
+    price: 138,
+},
+{
+    id: 20,
+    img: "20.jpg",
+    name: "Венецианская",
+    composition: ["фирменный пицца-соус", "моцарелла", "телятина", "куриная грудка", "бекон", "шампиньоны", "помидор", "перец", "пармезан", "зелень"],
+    caloricity: 1341,
+    price: 142,
+},
+{
+    id: 21,
+    img: "21.jpg",
+    name: "Четыре сезона",
+    composition: ["фирменный пицца-соус", "моцарелла", "опята", "куриная грудка", "помидор", "перец", "лук", "шампиньоны", "пармезан", "зелень"],
+    caloricity: 1479,
+    price: 145,
+},
+];
+

pizza/scripts/helpers/path.helper.js

@@ -0,0 +1,5 @@
+export const createImgPath = imgName => {
+    return (imgName.endsWith('.jpg') || imgName.endsWith('.png') || imgName.endsWith('.jpeg'))?
+    `img/${imgName}` :
+    imgName;
+};

pizza/scripts/index.js

@@ -0,0 +1,42 @@
+import {pizzaList} from './data/pizzaList.js';
+import {renderCards} from './view/pizza.render.js';
+import PizzaService  from './services/pizza.service.js'
+import {openCreatePizza} from './view/createPizza.render.js';
+
+
+renderCards(pizzaList)
+
+
+const searchForm = document.querySelector('.form-search');
+let searchPizza = new PizzaService(pizzaList)
+searchForm.oninput = searchPizza.filterByName;
+
+const sortSelect = document.getElementById('sort');
+  
+  sortSelect.onchange = e => {
+    document.querySelector('.card-list').innerHTML = '';
+    renderCards(searchPizza.sortPizzas(pizzaList, sortSelect.value));
+  }
+
+  
+  const btnChoiceByPrice = document.querySelector('#btn-price');
+  btnChoiceByPrice.addEventListener('click', searchPizza.filterByPrice);
+
+  const btnChoiceByCaloricity = document.querySelector('#btn-caloricity');
+  btnChoiceByCaloricity.addEventListener('click', searchPizza.filterByCaloricity);
+
+
+
+document.querySelector('#cancel').addEventListener('click', function (e) {
+    e.preventDefault();
+    this.parentNode.reset();
+    renderCards(pizzaList);
+  })
+
+
+const btnModalOpen = document.querySelector('.btn-modal-open');
+  btnModalOpen.addEventListener('click', () => {
+    openCreatePizza();
+  });
+
+   

pizza/scripts/services/localStorage.service.js

@@ -0,0 +1,12 @@
+import {pizzaList} from '../data/pizzaList.js'
+export const setPizzasListToLS = () => {
+    localStorage.setItem('pizzas', JSON.stringify(pizzaList));
+  }
+  
+  //  localStorage
+export const getPizzasListFromLS = () => {
+    const pizzasListFromLS = JSON.parse(localStorage.getItem('pizzas'));
+    if (pizzasListFromLS) {
+      pizzasListFromLS.forEach((pizza, i) => pizzaList[i] = pizza);
+    }
+  }

pizza/scripts/services/pizza.service.js

@@ -0,0 +1,60 @@
+import {pizzaList} from '../data/pizzaList.js';
+import {renderCards} from '../view/pizza.render.js'
+
+
+export default class PizzaService {
+    constructor() {
+
+    }
+// search by name
+    get initialList () {
+        return [...pizzaList];
+    }
+
+    filterByName() {
+        
+        const searchInputValue = document.querySelector('#search').value;
+        const searchResult = [...pizzaList].filter(pizza => {
+        const searchedName = pizza.name.toLocaleLowerCase().includes(searchInputValue.toLocaleLowerCase());;
+        const searchedIngredients = pizza.composition.join(', ').toLocaleLowerCase().includes(searchInputValue.toLocaleLowerCase());
+        return searchedName || searchedIngredients;
+        }) 
+        renderCards(searchResult);  
+    }
+    sortPizzas(resultArr, dir = "default"){
+            
+        resultArr = [...pizzaList].sort((a, b) => {
+            if (dir === 'default') return this.initialList;
+            if (dir === 'less') return b.price - a.price;
+            if (dir === 'more') return a.price - b.price;
+            })
+          
+        return resultArr;
+    }
+    filterByPrice(e) {
+        e.preventDefault();
+          
+        let small = [...pizzaList].reduce((acc, current) => acc.price < current.price ? acc : current);
+        let big = [...pizzaList].reduce((acc, current) => acc.price > current.price ? acc : current);
+        smallPrice.placeholder = small.price;
+        bigPrice.placeholder = big.price;
+        const smallPriceAmount = smallPrice.value ? smallPrice.value : small.price;
+        const bigPriceAmount = bigPrice.value ? bigPrice.value : big.price; 
+        const neededPizzas = [...pizzaList].filter(goods => goods.price >= smallPriceAmount && goods.price <= bigPriceAmount)
+        renderCards(neededPizzas);
+        }   
+
+    filterByCaloricity(e) {
+        e.preventDefault();
+          
+        let small = [...pizzaList].reduce((acc, current) => acc.caloricity < current.caloricity ? acc : current);
+        let big = [...pizzaList].reduce((acc, current) => acc.caloricity > current.caloricity ? acc : current);
+        smallCaloricity.placeholder = small.caloricity;
+        bigCaloricity.placeholder = big.caloricity;
+        const smallCaloricityAmount = smallCaloricity.value ? smallCaloricity.value : small.caloricity;
+        const bigCaloricityAmount = bigCaloricity.value ? bigCaloricity.value : big.caloricity; 
+        const searchedCaloricity = [...pizzaList].filter(goods => goods.caloricity >= smallCaloricityAmount && goods.caloricity <= bigCaloricityAmount)
+        renderCards(searchedCaloricity);
+        } 
+    }
+    

pizza/scripts/services/user.service.js

@@ -0,0 +1,19 @@
+const userData = () => {
+    const userName = document.getElementById('name').value;
+    const userSurname = document.getElementById('surname').value;
+    const userPhone = document.getElementById('phone').value;
+    const userAddress = document.getElementById('address').value;
+    if (userName && userPhone) {
+        return {
+            name: userName,
+            surname: userSurname,
+            phone: userPhone,
+            address: userAddress
+        }
+    }
+}
+document.querySelector('.user-info').onsubmit = function (event) {
+    event.preventDefault();
+    localStorage.setItem('userInfo', JSON.stringify(userData()));
+    window.open('./cart.html')
+}

pizza/scripts/view/cart.render.js

@@ -0,0 +1,117 @@
+import {createImgPath} from '../helpers/path.helper.js'
+import {pizzaList} from '../data/pizzaList.js'
+
+let cartList = [];
+
+ const getCartDataLS = () => {
+    const pizzaFromCartLS = JSON.parse(localStorage.getItem('cartList'));
+    if (pizzaFromCartLS) {
+      pizzaFromCartLS.forEach((pizza, i) => cartList[i] = pizza);
+    }
+  }
+  
+   const setCartDataLS = (data) => {
+    localStorage.setItem('cartList', JSON.stringify(data));
+  }
+
+ getCartDataLS();
+const cartElemRender = (pizza) => {
+    let pizzaFromCart = pizzaList.find(item => item.id == pizza.id);
+  
+    const productElem = document.createElement('div');
+  
+
+  
+    productElem.innerHTML = `       
+      <div><img class="product__img" src="${createImgPath(pizzaFromCart.img)}"></div>
+      <h5 class="product__title">${pizzaFromCart.name}</h5>
+      <input class="product__count" type="number" value="${pizza.count}">
+      <p>${pizzaFromCart.price}</p>
+      <p>${pizzaFromCart.price * pizza.count}</p>
+      <span class='product__remove'>&times;</span>
+    `;
+  
+    return productElem;
+  }
+  
+  const totalOptions = () => {
+    return cartList.reduce((a, b) => {
+      let pizzaFromCart = pizzaList.find(item => item.id == b.id);
+  
+      a.totalPrice += pizzaFromCart.price * b.count;
+      a.totalCount += b.count;
+      return {
+        totalPrice: a.totalPrice,
+        totalCount: a.totalCount
+      }
+    }, {
+      totalPrice: 0,
+      totalCount: 0
+    })
+  
+  }
+  
+  const fullCartRender = () => {
+    const cartContent = document.querySelector('#cart__content');
+    cartContent.innerHTML = '';
+  
+    const productElements = document.createElement('div');
+    productElements.classList.add('product__list');
+  
+    if (cartList.length) {
+      document.querySelector('#cart__checkout').classList.add('btn-checkout--active');
+      document.querySelector('#cart__reset').classList.add('btn-clear--active');
+   
+      cartList.forEach((pizza, id) => {
+        const productElem = cartElemRender(pizza);
+  
+        productElements.appendChild(productElem);
+  
+        productElem.querySelector(".product__count").onchange = function () {
+          pizza.count = +this.value;
+          if (!pizza.count) {
+            cartList.splice(id, 1);
+          }
+  
+          setCartDataLS(cartList);
+          fullCartRender();
+        };
+  
+        productElem.querySelector(".product__remove").addEventListener('click', function () {
+          cartList.splice(id, 1);
+          setCartDataLS(cartList);
+          fullCartRender();
+        });
+      });
+  
+      const totalPriceBlock = document.createElement('div');
+      totalPriceBlock.innerHTML = `
+        <div>
+          <p class="">Итого: ${totalOptions().totalCount} шт. -  ${totalOptions().totalPrice} грн</p>
+        <div>`;
+        productElements.appendChild(totalPriceBlock);
+  
+      cartContent.appendChild(productElements);
+    } else {
+      cartContent.textContent = 'В корзине нет товаров';
+      document.querySelector('#cart__checkout').classList.remove('btn-checkout--active');
+      document.querySelector('#cart__reset').classList.remove('btn-clear--active');
+    }
+  
+  }
+  
+  fullCartRender();
+  
+  // clear cart
+export const removeCartProduct = () => {
+    localStorage.removeItem('cartList');
+    localStorage.removeItem('userInfo');
+    cartList = [];
+    fullCartRender();
+  }
+  
+  document.querySelector('#cart__checkout').onclick = (e) => {
+      e.preventDefault();
+      window.open('./registration.html')
+  }
+    

pizza/scripts/view/createPizza.render.js

@@ -0,0 +1,125 @@
+import {setPizzasListToLS} from '../services/localStorage.service.js'
+import {createImgPath} from '../helpers/path.helper.js'
+import {compositionList} from '../data/compositionList.js'
+import {pizzaList} from '../data/pizzaList.js'
+import { renderCards } from './pizza.render.js';
+
+
+  
+export  function openCreatePizza() {
+  const popup = document.getElementById('modal-create-pizza');
+  // popup.classList.add('modal--active');
+    const formCreatePizza = document.querySelector('.form-create-pizza');
+    formCreatePizza.innerHTML = '';
+  
+    // create block pizza img
+    const pizzaImgBox = document.createElement('div');
+    pizzaImgBox.classList.add('form-group');
+  
+    pizzaImgBox.innerHTML = `
+        <input id="img-upload" type="file">
+        <img id="pizzaImg" src="" height="100" alt="Image preview...">`;
+    formCreatePizza.appendChild(pizzaImgBox);
+    document.querySelector('#img-upload').addEventListener('change', previewImg);
+  
+    // create block pizza name
+    const pizzaTitle = document.createElement('div');
+    pizzaTitle.classList.add('form-group');
+    pizzaTitle.innerHTML = `<input type="text" class="pizza-name form-control" placeholder="Название пиццы...">`;
+    formCreatePizza.appendChild(pizzaTitle);
+  
+    // create block for pizza compozition
+    const pizzaCompositionBlock = document.createElement('div');
+    pizzaCompositionBlock.className = 'form-group pizza-composition';
+  
+    // filling the block with ingredients
+    for (const ingredient of compositionList) {
+      const formCheck = document.createElement('div');
+      formCheck.classList.add('form-check', 'form-check-inline');
+      formCheck.innerHTML = `
+          <input class="form-check-input" type="checkbox" id="checkbox${ingredient.id}" value="${ingredient.name}">
+          <label class="form-check-label" for="checkbox${ingredient.id}">${ingredient.name}</label>`
+  
+      pizzaCompositionBlock.appendChild(formCheck);
+    }
+  
+    formCreatePizza.appendChild(pizzaCompositionBlock);
+  
+ 
+    const btnCreatePizza = document.createElement('button');
+    btnCreatePizza.className = 'btn btn-danger btn-create-pizza';
+    btnCreatePizza.type = 'submit';
+    btnCreatePizza.textContent = 'Создать';
+    formCreatePizza.appendChild(btnCreatePizza);
+  
+    formCreatePizza.addEventListener('submit', function (e) {
+      e.preventDefault();
+      cretePizza();
+      // popup.classList.remove('modal--active');
+    })
+  
+}
+  
+
+  function cretePizza() {
+    const formCreatePizza = document.querySelector('.form-create-pizza');
+    const pizzaImgSrc = document.getElementById('pizzaImg').src;
+    const pizzaNameValue = formCreatePizza.querySelector('.pizza-name').value;
+    const pizzaComposition = formCreatePizza.querySelector('.pizza-composition');
+    const composition = pizzaComposition.querySelectorAll('input[type="checkbox"]');
+    let compositionCheckedValue = Array.from(composition)
+      .filter(item => item.checked)
+      .map(item => item.value);
+  
+    let pizzaPrice = 0;
+    let pizzaCaloricity = 100;
+    for (const ingredient of compositionList) {
+      compositionCheckedValue.forEach(item => {
+        if (ingredient.name === item) {
+          pizzaPrice += ingredient.price;
+          pizzaCaloricity += ingredient.caloricity;
+        }
+      })
+    }
+  
+    if (pizzaNameValue && compositionCheckedValue && pizzaPrice) {
+      pizzaList.unshift({
+        id: pizzaList.length + 1,
+        img: pizzaImgSrc,
+        name: pizzaNameValue,
+        composition: compositionCheckedValue,
+        caloricity: pizzaCaloricity,
+        price: pizzaPrice,
+        selfCreated: true,
+      });
+      setPizzasListToLS();
+      renderCards(pizzaList);
+    }
+  }
+  
+const convertToBase64 = file => {
+    const fileReader = new FileReader();
+  
+    return new Promise((resolve, reject) => {
+      fileReader.onerror = () => {
+        fileReader.abort()
+        reject("Problem parsing input file.");
+      }
+      fileReader.onload = () => {
+        resolve(fileReader.result);
+      }
+      fileReader.readAsDataURL(file);
+    })
+  }
+  
+
+  const previewImg = async (e) => {
+    const preview = document.getElementById('pizzaImg');
+    const file = e.target.files[0];
+  
+    try {
+      preview.src = file ? await convertToBase64(file) : "";
+    } catch (e) {
+      console.warn(e.message)
+    }
+  }

pizza/scripts/view/pizza.render.js

@@ -0,0 +1,156 @@
+import {setPizzasListToLS, getPizzasListFromLS} from '../services/localStorage.service.js'
+import {createImgPath} from '../helpers/path.helper.js'
+import {pizzaList} from '../data/pizzaList.js'
+
+getPizzasListFromLS();
+export function renderCard(pizza) {
+    const blockForCard = document.createElement('div');
+    blockForCard.className = "col-xs-12 col-md-4 col-lg-3 mb-4"
+    const card = document.createElement('div')
+    card.className = "card h-100 pb-3 pt-2 px-1";
+    card.innerHTML = `
+        <p class = "card-caloricity">${pizza.caloricity || ''} Ккал</p>
+        <div class = "mx-auto pt-3" style="width: 150px">
+            <img class ="card-img-top" src="${createImgPath(pizza.img)}" alt="${pizza.name}"/>
+        </div>
+        
+        <div class = "card-body">
+            <h5 class = "card-title">${pizza.name || ''}</h5>
+            <p class = "card-text">${pizza.composition.join(', ') || ''}</p>
+        </div>    
+        <div class = "card-footer bg-transparent border-white">
+            <p class = "card-price">${pizza.price || ''} грн</p>
+        </div>
+    `
+    // favorit
+    const heart = document.createElement('button');
+    heart.classList.add('btn-favorite');
+    if (pizza.isFavorite) heart.classList.add('btn-favorite--active');
+    heart.addEventListener('click', function (event) {
+        event.stopPropagation();
+        this.classList.toggle('btn-favorite--active');
+        pizza.isFavorite = !pizza.isFavorite;
+       setPizzasListToLS();
+        renderCards(pizzaList);
+    })
+
+    //add to cart
+    const buttonCart = document.createElement('button')
+    buttonCart.className = 'btn btn-add-to-basket d-block'
+    buttonCart.innerText = 'Заказать'
+    buttonCart.onclick = (e) => {
+        e.preventDefault()
+        e.stopPropagation();
+        addPizzaToCart(pizza)
+    }
+    card.appendChild(heart);
+    card.appendChild(buttonCart);
+    
+    card.onclick = (e) => {
+        if(!e.target.className.includes('btn-add-to-basket')) {
+            modalWindowContent(pizza);
+        }
+    }
+
+    card.setAttribute("data-toggle", "modal");
+    card.setAttribute("data-target", "#staticBackdrop");
+
+    blockForCard.appendChild(card)
+    document.querySelector('.card-list').appendChild(blockForCard)
+}
+
+ export const modalWindowContent = (pizza) => {
+    
+    const modalBody = document.querySelector('.modal-body')
+    
+    modalBody.innerHTML = `
+    <p class = "card-caloricity">${pizza.caloricity || ''} Ккал</p>
+    <div class = "mx-auto pt-3" style="width: 150px">
+        <img class ="card-img-top" src="${createImgPath(pizza.img)}" alt="${pizza.name}"/>
+    </div>
+    
+    <div class = "card-body">
+        <h5 class = "card-title">${pizza.name || ''}</h5>
+        <p class = "card-text">${pizza.composition.join(', ') || ''}</p>
+    </div>    
+    <div class = "card-footer bg-transparent border-white">
+        <p class = "card-price">${pizza.price || ''} грн</p>
+    </div>
+`;
+
+}
+
+export const renderCards = pizzas => {
+    document.querySelector('.card-list').innerHTML = '';
+    pizzas.forEach(pizza => renderCard(pizza))
+}
+
+
+const cartList = [];
+
+const getCartDataLS = () => {
+  const pizzaFromCartLS = JSON.parse(localStorage.getItem('cartList'));
+  if (pizzaFromCartLS) {
+    pizzaFromCartLS.forEach((pizza, i) => cartList[i] = pizza);
+  }
+}
+
+getCartDataLS();
+
+
+const setCartDataLS = (data) => {
+  localStorage.setItem('cartList', JSON.stringify(data));
+}
+
+
+const addPizzaToCart = (pizza) => {
+  let findPizzaById = cartList.find(item => item.id === pizza.id)
+
+  if (findPizzaById) {
+    findPizzaById.count += 1;
+    setCartDataLS(cartList);
+    renderCart();
+    return;
+  }
+
+  cartList.push({
+    id: pizza.id,
+    count: 1
+  });
+
+  setCartDataLS(cartList);
+  renderCart();
+}
+
+
+const totalOptions = () => {
+  return cartList.reduce((a, b) => {
+    let pizzaFromCart = pizzaList.find(item => item.id == b.id);
+
+    a.totalPrice += pizzaFromCart.price * b.count;
+    a.totalCount += b.count;
+    return {
+      totalPrice: a.totalPrice,
+      totalCount: a.totalCount
+    }
+  }, {
+    totalPrice: 0,
+    totalCount: 0
+  })
+
+}
+
+const renderCart = () => {
+  document.querySelector('.btn-cart-info').innerHTML = `${totalOptions().totalCount} шт. <br>  ${totalOptions().totalPrice} грн`;
+}
+
+renderCart();
+
+
+document.querySelector('.btn-cart').onclick = function (e) {
+  e.preventDefault();
+
+  if (totalOptions().totalCount) {
+    window.open('./cart.html');
+  }
+}

pizza/style.css

@@ -0,0 +1,143 @@
+.card {
+  color: black;
+}
+
+
+header {
+  width: 100%;
+  position: relative;
+  background-size: cover;
+  background-position: 50% 50%;
+  background-image: url(../img/banner3.jpg);
+  
+}
+
+
+header:after {
+    content: "";
+    position: absolute;
+    background: rgb(20, 10, 1);
+    opacity: 0.7;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+
+.card {
+  box-shadow: 0 10px 15px rgba(0,0,0,0.2), 0 8px 8px rgba(0,0,0,0.2);
+  transition: .2s linear;
+}
+
+.card:hover {
+  cursor: pointer;
+  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
+}
+
+.navbar {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    z-index: 2;
+}
+
+.navbar-brand {
+  margin-right: auto;
+}
+
+.btn-cart {
+    display: flex;
+    width: 200px;
+    align-items: center;
+    padding: 0 5px;
+    border-radius: 10px;
+    background-color: rgba(63, 37, 3, 0.356);
+    color: #fff;
+  }
+  
+  .btn-cart:hover {
+    color: rgb(238, 11, 11);
+    cursor: pointer;
+  }
+  
+  .icon-basket {
+    width: 40px;
+    height: 40px;
+    margin-right: 5px;
+    fill: #f8f8f8;
+    transition: all .2s;
+  }
+  
+.btn-cart-info {
+    display: inline-block;
+    padding: 0 5px;
+    font-size: 14px;
+    text-align: center;
+    
+  }
+
+  .pizza-caloricity {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    font-size: .8rem;
+    font-weight: 600;
+    color: rgb(199, 7, 7);
+  }
+  
+  .card-price {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: rgb(199, 7, 7);
+  }
+  
+  .card-footer {
+    padding: 0;
+    padding-bottom: 20px;
+    border: none;
+    background-color: #fff;
+  }
+  
+  .btn-add-to-basket {
+    width: 70%;
+    margin: 0 auto;
+    font-size: 20px;
+    text-align: center;
+    color: #fff;
+    background-image: url(../img/btn2.jpeg);
+    
+  }
+
+  .btn-favorite {
+    position: absolute;
+    top: 15px;
+    left: 15px;
+    display: block;
+    width: 22px;
+    height: 20px;
+    background-color: transparent;
+    background-image: url(../img/emptyheart.png);
+    background-size: cover;
+    border: none;
+    outline: none;
+  }
+  
+  .btn-cart:active,
+  .btn-cart:focus,
+  .btn-favorite:active,
+  .btn-favorite:focus {
+    border: none;
+    outline: none;
+  }
+  
+  .btn-favorite--active {
+    background-image: url(../img/heart.png);
+  }
+
+  .modal-content {
+    padding: 10px;
+  }
+
+footer {
+    background-color: rgb(31, 13, 1);
+}