FINAL PROJECT: WHY CATS ARE THE BEST PETS - MY CATALOG

Video Demo: <URL https://youtu.be/vHbue3Ikbig>

Description: This is a website about cats with information about cats, links to blogs and articles about cats, a questionnaire and cat pictures, both my own cats as well as cat pictures generated by API.The website consists of HTML5, CSS (with Font Awesome and Bootstrap), JavaScript (with jquery, JSDelivr and Vue) and Python (with Flask and Jinja). The html-templates are responsive to mobile devices.

On every html-template there is a navbar that takes you to the other html-templates. There is also a jumbotron with the title of the website on every html-template and a footer where contact information could go.

index1home.html (Home) contains audio (music from bensound.com) and video (my cat falling off a table). The audio and video are aligned with flex box. There is a div with text in gradient rainbow-colors. There is a box with a cat quote. The colors of the box are gradient, animated colors.

index2articles.html (Articles) contains two flip cards that show the front side as default. When the mouse hovers (or clicks if the user has a mobile device) the back of the card shows. The flip cards are aligned with flex box. index3mycats.html (My Cats) contains a gallery with pictures of my cats, some dead, some alive. Two of the pictures are in containers. There is a cat icon from font awesome that gets larger when the mouse is hovering or clicks the icon. The enhancement of the icon is made with JavaScript. At the bottom of the page there are two boxes with cat quotes. The colors are gradient. The quote boxes are aligned with flex box.

index4form.html (Form) contains a form which I've called a questionnaire. The form consists of radio buttons, a drop down menu, a range, a textarea as well as a check box. The answers are inserted to SQLite and displayed on a template called catalog. If someone tries to manipulate the input in the form they are redirected to a template called Error. A file called Application.py contains the SQLite queries and redirections to different templates using Python and Flask. The SQLite query prevents SQL injections because it only accepts predestined names and variables.

index5quiz.html (Quiz) contains an interactive quiz about cats using JavaScript that tells the user if an answer is right (with green text) or wrong (with red text). The first question is a multiple answer question and the other question is an user input question. There is a box with a cat quote. The colors of the box are gradient, animated colors.

index6catpics.html (Cat Pics) contains a box with a cat picture. The new cat pictures is generated by JavaScript when the button is clicked. The cat pictures are generated by API from https://thecatapi.com/. The background of the box with the cat pictures has gradient, animated gold colors that show if the cat picture is smaller than the box.