js

Javascript

Уеб приложение за пазаруване от онлайн магазин и онлайн игра за печелене на бюджет, с който да се пазарува в магазина. Технологии и програмни езици, които са използвани: HTML, CSS, JAVASCRIPT. ВНИМАНИЕ! За да работи приложението ЗАДЪЛЖИТЕЛНО трябва да са позволени "бисквитките от трети страни" в браузъра. Как да активирам "бисквитки от трети страни" на някои от най-известните браузъри ? Приложението е разделено на три страници, като в точките по-долу е обяснено подробно как действа кода на всяка една от тях.

1. Главната роля на страницата "Начало" е да пренасочва към страница "shop.html".

2. Страница "Магазин" При отваряне на страницата се зареждат:  Параграф с текст и опция "Селект",  Поле с общата сума на продуктите, добавени в "кошницата".  Поле с общия бюджет, с който разполага потребителя.

   1.Чрез опциите в селект може да изберем категория на продуктите, която да се отвори. При промяна на избор от тагът "селект" се скриват всички останали тагове със същото име освен този от който избираме. В следващата стъпка се показва само тагът с data-class, който съвпада с избраната категория. Така остава видим само елементът с този таг, който сме избрали. Продуктите се показват в елемент с таг селект, който има атрибут "multiple". Накратко ще на наричаме този таг "Multi". Всеки един Multi има и атрибут data-id, който съдържа пореден номер. Този номер отговаря на номер от индекса на първия селект. Целта на Multi не e да се избират множество елементи, а да се виждат всички продукти и изборът да е по-лесен.

При избор на продукт се появява снимката на текущо избрания продукт и цената му. Цената на избрания продукт се намира в атрибут "value", който има всеки един от тях, а снимката в атрибут data-src.

При провлачване на мишката над снимката с продукта се появява и поле, което ни позволява го добавим в "количката" за пазаруване.

2. При добавяне на продукта в количката се увеличава числото на продуктите, което е над иконката в менюто. Това става чрез "спан" с id "cartCount", като при кликване на "добавяне в количката" се достъпва до информацията в него. Тя се преобразува в число и се добавя единица.

В същото време се задава информация в параграф с id "cart-content". По подразбиране този параграф е скрит и може се види при кликване върху количката в главното меню. Показването му става чрез функцията "cartContent", която проверява дали съдържанието на параграфа "cart-content" е видимо. Ако е видимо го скрива, а ако не е, го показва. За да се напълни с информация за името на продукта, цената му и картинката в параграф "cartContent" се грижи функцията "addToCard". Тя взима елементите от всяко едно от полетата и ги копира в скрития параграф. Функцията се изпълнява при всяко добавяне на продукт в кошницата. Тя проверява също колко дължим до момента и дали не надвишаваме бюджета си при избиране на продукт. Това става като се вземе информация от полето на текущия продукт и това на сметката, която сме натрупали до момента и ги сравни с полето, което показва нашия бюджет. Ако надвишим бюджета си същата функция ни позволява да отидем в страницата, наречена "Казино".

3.  Полето с бюджета, с който разполага потребителя, се формира от генериране на произволно число само при първото влизане на потребителя. В останалите случаи бюджета се взима от променлива, която е генерирана или при предното влизане в сайта (при положение, че браузъра или страницата не са затваряни) или от бюджета, натрупан в страница "Казино". За задаване на нова стойност на началния бюджет трябва да се излезе от уеб страницата.

За пренос на данни с информация за бюджета от страница "Магазин" към страница "Казино", както и в обратен ред, са използвани така наречените "бисквитки". Проверката става отново чрез езика Javascript. Това е и причината без тези "бисквитки" сайтът да не може да работи .

3. Страница "Казино" В тази страница със скрипт първо се взема стойността от променливата, която съдържа стойността на бюджета от страница "Магазин". В страница "Казино" има три снимки и два бутона. Тя се контролира главно от функция "casino", която се извиква при кликване на бутона "Опитай късмета си". Първата проверка на тази функция е дали си изгубил целият си бюджет. Ако е така, трябва да затворите страницата и да опитате наново. Функцията също обновява променлива с информация за бюджета ви, като я запазва на вашият компютър чрез "бисквитка". Това помага при връщане в магазина да успеете да използвате спечеления бюджет и в тази страница. При всяко извикване на функцията, бюджетът намаля с единица. Функцията извиква още няколко функции: Функцията "start", която завърта всички снимки в цикъл като всяко завъртане е със забавяне, за да може да се вижда снимката при завъртането на цикъла. Снимките, които се въртят са с поредни имена (от 6 до 12). Снимките , които се извъртат са +1 и - 1 от последното число 10, за да не се спират еднакви снимки и да се отстрани "бъг", в който ако се натисне бутонът "Опитай късмета си", достатъчно бързо преди да са се изпълнили всички функции, се получава печалба. Следват функции, които спомагат за промяната на всяка снимка. "First", "Second" и "Third" са функциите, които се грижат за определянето на снимката, която ще се падне. ). При връщане на случайно число между 0 и 5, се извежда снимката с число "7", за да може да има достатъчно печалби, а при число между 6 и 10, снимка със същото име, като числото. Следва функция winCheck. Тя също се изпълнява със закъснение, за да може да се изпълнят всички останали функции със закъснение и резултатът да е правилен. Тази функция сравнява атрибута "src" на трите снимки, който вече се е генерирал от предните функции. Ако атрибутите са еднакви, потребителят получава печалба от 10 единици, които може да ползва за пазаруване в магазина. Това става чрез достъп до съдържаниено на "спан" с id = "budget" и промяна на стойността му. При такова съвпадение се извежда и надпис, с който това се известява. Този надпис може да се скрие, чрез функцията "hide", която се извиква при натискане не бутона "Х".

При загуба на всички пари ще трябва да затворите страницата и да опитате наново.

Как да активирам "бисквитки от трети страни" на някои от най-известните браузъри ? За Google Chrome - > https://www.google.com/search?q=chrome+allow+third+party+cookies&oq=chrome+activate+third+pa&aqs=chrome.1.69i57j0l7.6503j0j1&sourceid=chrome&ie=UTF-8 За Mozilla Firefox -> https://www.google.com/search?safe=off&sxsrf=ACYBGNR247-wEBQs9tB4CGNXXHeqTMmmIg%3A1578938780541&ei=nLEcXtXIIJHZmwX6uor4AQ&q=mozilla+allow+third+party+cookies&oq=mozilla+allow+third+party+cookies&gs_l=psy-ab.3..0i8i7i30l2.106170.106801..106917...0.1..0.187.822.0j6......0....1..gws-wiz.......0i71.05vXZVdIhw4&ved=0ahUKEwjVhouplYHnAhWR7KYKHXqdAh8Q4dUDCAs&uact=5 За Safari - > https://www.google.com/search?safe=off&sxsrf=ACYBGNRStHeuuzLzoAsXzizYTv6arJEm-A%3A1578938888558&ei=CLIcXrffIdKymwXvkbO4AQ&q=safari+allow+third+party+cookies&oq=safari+allow+third+party+cookies&gs_l=psy-ab.3..0i7i30l4j0j0i30l2j0i5i30l2j0i7i5i30.44055.51160..51406...4.3..0.195.1727.0j12......0....1..gws-wiz.......0i71j0i13j0i13i30j0i13i5i30j0i8i13i30j0i8i7i30.eghjETbZ7Ho&ved=0ahUKEwi3g8zclYHnAhVS2aYKHe_IDBcQ4dUDCAs&uact=5