python programming html sqlalchemy orm 4 questions refer to the attachments bid if you know how to do only

https://www.udemy.com/python-ecommerce-build-a-dja…

Question 1

Assuming you are designing a chat application and is building up a quick static demo. The chat interface that you have in mind looks like this.

a)Using only HTML & CSS, create the above output using a *.html file and *.css file to build up the “RECENT CONVERSION” section illustrated below.

You should create a folder (ie q1) and store the relevant resources accordingly in the subfolders (ie q1/img , q1/css). Create your own images for icons.

b)Add a Button to the end of the list as illustrated below.

Using additional Javascript, enhance the code created in (a) to change the conversation list into a dynamic list. Each time the button is clicked, a input interface will be display to allow 3 info to be entered (Name, Status, Message). Once the input is submitted, a new conversation item will be added to the conversion list.

c)Add a new “Button 2” below the button created in (b). Using Javascript and DOM, enable the following when the “Button 2” is clicked:

-All the Names in the list will become Bold

-All the Status in the list will change its colour to blue.

– All the Message in the even numbered items in the list will change its colour to light green.

d)Add a new “Button 3” below the button created in (c). Using Javascript, DOM, CSS, SVG enable the following when the “Button 3” is clicked:

– All Image icons in the even numbered items in the list will be highlighted in yellow.

Question 2

Create a new folder q2 and create a new Flask MVC application by re-using the code in (a).

a)Using Flask’s templates, routes and functions, implement the same conversation list and button in Q1a, b.

Use a Python dictionary to implement the model so that the conversation data can be created and saved in the application.

The routes and functions should allow the following operations:

-List

-add

b)Enable your Flask application to support a REST web api by installing the following Flask API library. You should validate the installation to ensure it is working properly.

https://www.flaskapi.org/#installation

c)Implement the same “Button 2” as Q1 which can enable the following:

-All the Names in the list will become Bold

-All the Status in the list will change its colour to blue.

-All the Message in the even numbered items in the list will change its colour to light green.

You should enhance your model in a) so that the display attributes of the list can be stored (i.e. Name are in Bold, Status colour is blue, even list is light green)

Use the concept of a Jquery AJAX call when “Button 2” is clicked to trigger the relevant new route(s) and functions(s) that will change the display attributes of the list.

d)Enhancethemodeloftheconversationlisttoincludeanewattribute–named

“status”. Add a new “Button 3” with a Jquery AJAX call which will set the status attributes of the even numbered list items to False (or 0). The page should also be refreshed to show that the even items respective icons has been greyed out.

Question 3

You are tasked to develop a Reports dashboard that analyses demographics data. The layout of the dashboard should look like the following:

a)Create a Flask application with a basic template that will display the above data. By using SQLalchemy ORM or Python dictionary, create a data model to store the information.

You can refer to the following Python code to retrieve the data from the following URL:

import requests, json, csv

user_agent = {‘User-agent’: ‘Mozilla/5.0’}

url = “https://raw.githubusercontent.com/jennybc/gapminder/master/data-raw/04_gap-merged.tsv”

data = requests.get(url, headers = user_agent)

data_str = data.content.decode(“utf-8”)

data_csv = csv.reader(data_str.splitlines(), delimiter=’t’) # Observe that each record is separated by line breaks, delimited by “t”

data_list = list(data_csv)

display(data_list)

b)Create the side menu with an item “Data Table. Once the item is clicked, it should load the 1^st 10 records of the data from the model and display the table as illustrated.

A “Next 10” button should display the next 10 records when it is clicked.

c)Create a sorting feature as illustrated below. When the header being clicked, the data will be sorted alphabetically (ie country or continent) or from smallest to largest (year, pop …). If the same header is clicked again, the sorting will be done again in reverse.

d)Create a delete feature as illustrated below. The current 10 records will be deleted when “all” is checked and “Delete” Button is clicked.

Question 4

Use the same dataset from Q3.

a)Add a new menu to the Dashboard created earlier and create a visualization chart titled “Data Chart” that display the Life Expectancy, Population and Gdp Percapital of Singapore. Use the Charting library ChartJS (https://www.chartjs.org) to plot the charts.

(5 marks)

b)Add a new menu to the Dashboard and create a visualization chart titled “Population by Continent” that display the Population of each Continent. Use the “Stack Bar Charts” to visualize the data.

c)Add a new menu to the Dashboard and create a visualization chart titled “GDP by Continent”. Create a HTML drop down list which contains a list of Continent names derived from the dataset.

By using “Line Charts” technique, plot a multi-line chart that will dynamically display the GDP percapita of all countries of the Continent which is selected in the dropdown list.

I.e. When “Oceania” continent is selected, the chart should show the GDPs of Fiji, New Zealand, Solomon Islands