how to convert this HTML file into a PDF using python [closed] - python

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 1 year ago.
This post was edited and submitted for review 1 year ago and failed to reopen the post:
Original close reason(s) were not resolved
Improve this question
I am having a process where my python code needs to generate a PDF.
I have an HTML file as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./proforma_supply_bill.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Karla:wght#400;600;700&family=Rajdhani:wght#700&display=swap"
rel="stylesheet">
<title>Proforma bill of supply</title>
<style>
body {
font-family: "Karla", sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
overflow-x: hidden;
}
th,
td {
padding: 0 !important;
text-align: left;
position: relative;
}
.mb-3 {
margin-bottom: 3px;
}
.mb-5 {
margin-bottom: 5px;
}
.pr-10{
padding-right: 10px !important;
}
.text-right {
text-align: right;
}
.border-b_color {
border-bottom: 1px solid #93d150;
}
.border-t {
border-top: 1px solid #dedede;
}
.border-b {
border-bottom: 1px solid #dedede;
}
.card {
background-color: #fff;
padding: 0 20px;
}
.card__header,
.card__total_amount,
.card__amount_section {
display: flex;
align-items: center;
justify-content: space-between;
padding: 17px 0;
}
.card__header_img {
width: 175px;
}
.card__header_title {
font-family: "Rajdhani", sans-serif;
font-size: 24px;
font-weight: bold;
color: #2b9eaa;
text-transform: uppercase;
}
.card__info_flex {
display: flex;
padding: 10px 0;
}
.card__info {
flex: 50%;
}
.card__info_row:not(:last-child) {
margin-bottom: 5px;
}
.card__info_title,
.card__table_data_row__content {
color: #141414;
font-size: 15px;
}
.card__info_text {
color: #141414;
font-size: 15px;
font-weight: bold;
}
.card__table {
width: 100%;
border-collapse: collapse;
}
.card__table_header_row {
background-color: #2b9eaa;
}
.card__table_data_row {
border-top: 1px solid #dedede;
}
.card__table_header_row__content {
color: #fff;
font-size: 15px;
font-weight: bold;
padding: 6px 0;
}
.card__table_data_row__content {
padding: 5px 0;
}
.card__table_data_row__subcontent {
font-size: 13px;
color: #141414;
width: max-content;
margin-left: 10px;
}
.dashed_b-t {
border-top: 1px dashed #dedede;
}
.card__total_amount {
background-color: #F2F2F2;
padding: 4px 10px 5px;
border-top: 1px solid #dedede;
border-bottom: 1px solid #dedede;
}
.card__amount_section {
padding: 6px 10px 5px;
align-items: flex-start;
}
.card__total_amount__title,
.card__total_amount__title_lg {
font-size: 18px;
color: #141414;
font-weight: bold;
}
.card__declaration {
padding: 6px 10px 5px;
background-color: #D4ECEE;
font-size: 15px;
font-weight: bold;
color: #2b2b2b;
}
.card__signature {
margin-top: 30px;
padding: 0 10px;
}
</style>
</head>
<body>
<div class="card">
<div class="card__header border-b_color">
<img src="https://res.cloudinary.com/exportify/image/upload/v1573547246/ExportifyLogo/exportify_logo_166x31_OG_yhqmrg.svg"
alt="Exportify Logo" class="card__header_img">
<div class="card__header_title">PROFORMA Bill of Supply</div>
</div>
<div class="card__info_flex border-b_color">
<div class="card__info">
<div class="card__info_row">
<span class="card__info_title">Proforma Invoice No.: </span>
<span class="card__info_text">{{PROFORMA_INV_NO}}</span>
</div>
<div class="card__info_row">
<span class="card__info_title">Reference No. & Date.: </span>
<span class="card__info_text">{{REF_NO}}</span>
</div>
<div class="card__info_row">
<span class="card__info_title">Buyer's Order No.: </span>
<span class="card__info_text">{{BUYER_ORDER_NO}}</span>
</div>
<div class="card__info_row">
<span class="card__info_title">Vessel/Flight No.: </span>
<span class="card__info_text">{{VESSEL_NAME}}</span>
</div>
<div class="card__info_row">
<span class="card__info_title">City/Port of Loading: </span>
<span class="card__info_text">{{POL}}</span>
</div>
<div class="card__info_row">
<span class="card__info_title">Terms of Delivery: </span>
<span class="card__info_text">{{DELIVERY_TERMS}}</span>
</div>
</div>
<div class="card__info">
<div class="card__info_row">
<span class="card__info_title">Dated: </span>
<span class="card__info_text">{{INV_DATE}}</span>
</div>
<div class="card__info_row">
<span class="card__info_title">SAIL Date: </span>
<span class="card__info_text">{{SAIL_DATE}}</span>
</div>
<div class="card__info_row">
<span class="card__info_title">Place of Receipt by Shipper: </span>
<span class="card__info_text">{{PLACE_OF_RECEIPT}}</span>
</div>
<div class="card__info_row">
<span class="card__info_title">City/Port of Discharge: </span>
<span class="card__info_text">{{POD}}</span>
</div>
</div>
</div>
<div class="card__info_flex" style="padding-bottom: 0;">
<div class="card__info"></div>
<div class="card__info mb-3">
<span class="card__info_title">Buyer (Bill to)</span>
</div>
</div>
<div class="card__info_flex" style="padding-top: 0;">
<div class="card__info">
<div class="card__info_text mb-3">XPORTIFY TECHNOLOGIES PRIVATE LIMITED</div>
<div class="card__info_title mb-5" style="line-height: 20px; width: 85%;">
3rd Floor, 313-314, A/3, BGTA Ganga Premises, Wadala Truck Terminal, Near Wadala RTO, Wadala East,
Mumbai
</div>
<div class="card__info_row">
<span class="card__info_title">GSTIN/UIN: </span>
<span class="card__info_text">27AAACX2283M1ZX</span>
</div>
<div class="card__info_row">
<span class="card__info_title">PAN No: </span>
<span class="card__info_text">AAACX2283M</span>
</div>
<div class="card__info_title mb-5">State Name: Maharashtra, Code: 27</div>
<div class="card__info_row">
<span class="card__info_title">CIN: </span>
<span class="card__info_text">U74999MH2017PTC295494</span>
</div>
</div>
<div class="card__info">
<div class="card__info_text mb-3">{{BUYER_COMPANY_NAME}}</div>
<div class="card__info_title mb-5" style="line-height: 20px;">
{{BUYER_ADDRESS}}
</div>
<div class="card__info_row">
<span class="card__info_title">GSTIN/UIN: </span>
<span class="card__info_text">{{BUYER_GST}}</span>
</div>
<div class="card__info_title mb-5">State Name: {{BUYER_STATE}}</div>
<div class="card__info_row">
<span class="card__info_title">Place of Supply: </span>
<span class="card__info_text">{{BUYER_PLACE_OF_SUPPLY}}</span>
</div>
</div>
</div>
<table class="card__table mb-5">
<thead>
<tr class="card__table_header_row">
<th>
<div class="card__table_header_row__content" style="padding-left: 10px;">Sr. No.</div>
</th>
<th>
<div class="card__table_header_row__content">Description of Services</div>
</th>
<th>
<div class="card__table_header_row__content">HSN/SAC</div>
</th>
<th>
<div class="card__table_header_row__content">Quantity</div>
</th>
<th>
<div class="card__table_header_row__content">Rate</div>
</th>
<th>
<div class="card__table_header_row__content">Per</div>
</th>
<th>
<div class="card__table_header_row__content text-right" style="padding-right: 10px;">
Amount
</div>
</th>
</tr>
</thead>
<tbody>
<tr class="card__table_data_row">
<td>
<div class="card__table_data_row__content" style="padding-left: 10px;">1</div>
</td>
<td>
<div class="card__table_data_row__content">Freight Charges</div>
<div class="card__table_data_row__subcontent">$ 1938/20x1x#74.97</div>
</td>
<td>
<div class="card__table_data_row__content">996521</div>
</td>
<td>
<div class="card__table_data_row__content">1</div>
</td>
<td>
<div class="card__table_data_row__content">7,900.00</div>
</td>
<td>
<div class="card__table_data_row__content">Container</div>
</td>
<td>
<div class="card__table_data_row__content text-right pr-10" style="right: 0;">USD
7,900.00
</div>
</td>
</tr>
</tbody>
</table>
<div class="card__total_amount mb-5">
<div class="card__total_amount__title">Total</div>
<div class="card__total_amount__title_lg">USD 7,900.00</div>
</div>
<div class="card__amount_section border-b mb-3">
<div class="card__amount_section_flex">
<div class="card__info_title mb-3">Amount Chargeable (in words)</div>
<div class="card__info_text">USD Seven Thousand Nine Hundred Only</div>
</div>
<div class="card__amount_section_flex">
<div class="card__info_title">E & O.E</div>
</div>
</div>
<div class="card__amount_section border-t">
<div class="card__amount_section_flex">
<div class="card__info_title">HSN/SAC</div>
</div>
<div class="card__amount_section_flex">
<div class="card__info_title">Taxable Value</div>
</div>
</div>
<div class="card__amount_section border-t mb-3">
<div class="card__amount_section_flex">
<div class="card__info_title">996521</div>
</div>
<div class="card__amount_section_flex">
<div class="card__info_title">INR 1,45,291.86</div>
</div>
</div>
<div class="card__total_amount mb-5">
<div class="card__total_amount__title" style="font-size: 15px;">Total</div>
<div class="card__total_amount__title_lg" style="font-size: 15px;">INR 1,45,291.86</div>
</div>
<div class="card__info_row" style="padding: 10px;">
<span class="card__info_title">Tax Amount (in words): </span>
<span class="card__info_text">NIL</span>
</div>
<div class="card__declaration">
Declaration
</div>
<div class="card__info_title" style="padding: 10px;">
We declare that this invoice shows the actual price of the goods described and that all particulars are true
and correct.
</div>
<div class="card__info_text" style="padding: 0 10px;">
for XPORTIFY TECHNOLOGIES PRIVATE LIMITED
</div>
<div class="card__signature">
<div class="card__info_title">Authorised Signatory</div>
</div>
</div>
</body>
</html>
I want to convert this HTML file into a PDF using Python.
I have one option of using wkhtmltopdf package but I have to run it using the command line everytime.
Which is the most optimal way of doing this without hampering the flow of my code?


Install pdfkit package
pip install pdfkit
Install wkhtmltopdf https://wkhtmltopdf.org/downloads.html
PDF to HTML in the current folder
import pdfkit
import glob
3.1 Set wkhtmltopdf executable file path
config = pdfkit.configuration(wkhtmltopdf='C:/Program Files/wkhtmltopdf/bin/wkhtmltopdf.exe')
3.2 Convert all html files in the current folder
for file in glob.glob('./*.html'):
pdfkit.from_file(file, file[:-4]+'.pdf', configuration=config)

Related

Weasy-print convert to pdf with border image

I’m trying to create pdf file for payment receipt, but I’m not able to figure out how I should set border for it.
As border I want to use this image:
But while converting it to pdf, next page gets like this:
How can I make it constant border for all pages?
Python + Django code:
from weasyprint import HTML
html_string = render_to_string('receipt.html', DATA)
html = HTML(string=html_string)
result = html.write_pdf()
f = open(str(os.path.join(MEDIA_URL + "invoice_receipt/", 'temp.pdf')), 'wb')
f.write(result)
file_obj = File(open(MEDIA_URL + "invoice_receipt/" + "temp.pdf", 'rb'))
transaction.receipt_file = file_obj
transaction.save()
receipt.html template:
<style>
table tbody tr td{
border-top: unset !important;
}
table tbody tr:nth-child(7) td,
table tbody tr:nth-child(8) td,
table tbody tr:nth-child(9) td,
table tbody tr:nth-child(10) td,
table tbody tr:nth-child(11) td,
table tbody tr:nth-child(12) td
{
padding-top: 0;
padding-bottom: 0;
}
.amount-in-words{
border-bottom:3px solid black;
}
.table thead th {
vertical-align: bottom;
border-bottom: 4px solid black;
}
/* .invoice-template{
padding: 20px;
border: 20px solid transparent;
border-image: linear-gradient(to right,#633363 50%,#f3c53d 50%);
border-image-slice: 1;
} */
.logo{
margin-top: 2rem;
}
.logo2{
margin-top: 2rem;
height: 160px;
width:200px;
}
.invoice-template{
padding: 20px;
background-image: url('https://dev-api.test.com/files/files/DumpData/Frame.png');
background-repeat: no-repeat;
background-size: contain;
break-inside: auto;
}
.main-container{
border: 1px solid black;
padding: 20px 10px;
background: white;
}
p {
font-weight: 500;
}
</style>
</head>
<body>
<div class="container invoice-template">
<!-- <div class="main-container"> -->
<div class="row justify-content-center">
<div class="col-md-5 logo"><img src={{ logo }} class="logo2"></div>
<div class="col-md-5 text-right">
<ul style="list-style: none; color: purple; margin-top: 2rem;">
<li>{{ phone }}<span></span></li>
<li><p>{{ email }}<br>{{ website }}</p><span></span></li>
<li>Resource Factory Pvt. Ltd.<br>{{ shop_address|linebreaksbr }}<span></span></li>
</ul>
</div>
</div>
<div class="row text-center">
<div class="col-md-12"><h6>INVOICE</h6></div>
</div>
<div class="row justify-content-center">
<div class="col-md-5">
<p>
To,<br>
{{ user_name }}<br>
{{ user_address|linebreaksbr }}
</p>
<p>Client GST Number.:</p>
</div>
<div class="col-md-5 text-center">
<p>Date: {{ order_date|date:"d-m-Y" }}</p>
<p>Invoice No. {{ invoice }}</p>
</div>
</div>
I’m giving a short version of my html code. If needed full code please mention.

The behavior of box decorations when a box is split (like your main <div> here) is controller by box-decoration-break. Default is slice which breaks the borders after rendering them. clone will compute the borders on each part of the box:
.invoice-template {
box-decoration-break: clone;
}

how do i get all the href links in this div

i am trying to get the links for each restaurant on the search results page for any city on food.grab.com using selenium. This is the div i need to target to get the links but when i run this
rl_elements = driver.find_elements_by_css_selector("ant-layout")
I get an error about the CSS element not being found. I was thinking I could grab that div then probably loop through or use the get("href") tag. This is the div section with the links of the restaurants
<div class="ant-layout">
<div>
<div class="ant-row-flex RestaurantListRow___1SbZY">
<div class="ant-col-24 RestaurantListCol___1FZ8V ant-col-md-12 ant-col-lg-6">
<a href="/ph/en/restaurant/mcdonald-s-sta-cruz-church-delivery/AWiD5JwQfYWaYaQC4nY4" style="color: inherit; text-decoration: none;">
<div class="ant-row-flex ant-row-flex-start ant-row-flex-top asList___1ZNTr">
<div class="ant-col-24 colPhoto___3vb-o ant-col-md-24 ant-col-lg-24">
<div class="promoTag___IYhfm">
<div class="placeholder___1xbBh restoPhoto___3nncy"><img alt="Order McDonald's - Sta Cruz Church" class="realImage___2TyNE show___3oA6B" src="https://d1sag4ddilekf6.azureedge.net/compressed/merchants/AWiD5JwQfYWaYaQC4nY4/hero/20a3b455671746a1b02a2cac627b5a67_1600322490671317355.jpg"></div>
<div class="promoTagHead___1bjRG">Promo</div>
<div class="promoTagTail___2Jy3D"></div>
</div>
</div>
<div class="ant-col-24 colInfo___3iLqj ant-col-md-24 ant-col-lg-24">
<h6 class="name___2epcT">McDonald's - Sta Cruz Church</h6>
<div class="basicInfoContainer___1DcNs">
<div class="basicInfoRow___UZM8d cuisine___T2tCh">Fast Food, Burgers, American, #Combodeals, #ComboDealsBurgers</div>
<div class="basicInfoRow___UZM8d numbers___2xZGn">
<div class="numbersChild___2qKMV">
<div class="medium___3F_Er ratingStar infoItemIcon___23Zvv" role="button" tabindex="0" style="display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url("/static/images/icons/icon-star.svg");"></div>
4.4
</div>
<div class="numbersChild___2qKMV">
<div class="medium___3F_Er deliveryClock infoItemIcon___23Zvv" role="button" tabindex="0" style="display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url("/static/images/icons/icon-clock.svg");"></div>
29 mins • 0.8 km
</div>
</div>
</div>
<div class="basicInfoRow___UZM8d discount___3h-0m">
<div class="medium___3F_Er discountIcon infoItemIcon___23Zvv" role="button" tabindex="0" style="display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url("/static/images/icons/icon-promo-tag.svg");"></div>
<span class="discountText___GQCkj">P150 OFF: Use code PADALOVE, min 600</span>
</div>
</div>
</div>
</a>
</div>
<div class="ant-col-24 RestaurantListCol___1FZ8V ant-col-md-12 ant-col-lg-6">
<a href="/ph/en/restaurant/jollibee-raon-delivery/2-CZC1EZEYACBTCX" style="color: inherit; text-decoration: none;">
<div class="ant-row-flex ant-row-flex-start ant-row-flex-top asList___1ZNTr">
<div class="ant-col-24 colPhoto___3vb-o ant-col-md-24 ant-col-lg-24">
<div class="">
<div class="placeholder___1xbBh restoPhoto___3nncy"><img alt="Order Jollibee - Raon" class="realImage___2TyNE show___3oA6B" src="https://d1sag4ddilekf6.azureedge.net/compressed/merchants/2-CZC1EZEYACBTCX/hero/3189897a1a264165af3c554991970723_1634664559764732889.jpg"></div>
</div>
</div>
<div class="ant-col-24 colInfo___3iLqj ant-col-md-24 ant-col-lg-24">
<h6 class="name___2epcT">Jollibee - Raon</h6>
<div class="basicInfoContainer___1DcNs">
<div class="basicInfoRow___UZM8d cuisine___T2tCh">Filipino, Chicken, Fast Food</div>
<div class="basicInfoRow___UZM8d numbers___2xZGn">
<div class="numbersChild___2qKMV">
<div class="medium___3F_Er ratingStar infoItemIcon___23Zvv" role="button" tabindex="0" style="display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url("/static/images/icons/icon-star.svg");"></div>
4.3
</div>
<div class="numbersChild___2qKMV">
<div class="medium___3F_Er deliveryClock infoItemIcon___23Zvv" role="button" tabindex="0" style="display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url("/static/images/icons/icon-clock.svg");"></div>
33 mins • 0.1 km
</div>
</div>
</div>
</div>
</div>
</a>
</div>
<div class="ant-col-24 RestaurantListCol___1FZ8V ant-col-md-12 ant-col-lg-6">
<a href="/ph/en/restaurant/mang-inasal-tayuman-delivery/2-CZCVUA42FBUTTX" style="color: inherit; text-decoration: none;">
<div class="ant-row-flex ant-row-flex-start ant-row-flex-top asList___1ZNTr">
<div class="ant-col-24 colPhoto___3vb-o ant-col-md-24 ant-col-lg-24">
<div class="promoTag___IYhfm">
<div class="placeholder___1xbBh restoPhoto___3nncy"><img alt="Order Mang Inasal - Tayuman" class="realImage___2TyNE show___3oA6B" src="https://d1sag4ddilekf6.azureedge.net/compressed/merchants/2-CZCVUA42FBUTTX/hero/40d7b143ab2846a490c52bec6b823cfe_1634227146999336525.png"></div>
<div class="promoTagHead___1bjRG">Promo</div>
<div class="promoTagTail___2Jy3D"></div>
</div>
</div>
<div class="ant-col-24 colInfo___3iLqj ant-col-md-24 ant-col-lg-24">
<h6 class="name___2epcT">Mang Inasal - Tayuman</h6>
<div class="basicInfoContainer___1DcNs">
<div class="basicInfoRow___UZM8d cuisine___T2tCh">Filipino, Chicken, Fast Food</div>
<div class="basicInfoRow___UZM8d numbers___2xZGn">
<div class="numbersChild___2qKMV">
<div class="medium___3F_Er ratingStar infoItemIcon___23Zvv" role="button" tabindex="0" style="display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url("/static/images/icons/icon-star.svg");"></div>
4.5
</div>
<div class="numbersChild___2qKMV">
<div class="medium___3F_Er deliveryClock infoItemIcon___23Zvv" role="button" tabindex="0" style="display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url("/static/images/icons/icon-clock.svg");"></div>
31 mins • 2.3 km
</div>
</div>
</div>
<div class="basicInfoRow___UZM8d discount___3h-0m">
<div class="medium___3F_Er discountIcon infoItemIcon___23Zvv" role="button" tabindex="0" style="display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url("/static/images/icons/icon-promo-tag.svg");"></div>
<span class="discountText___GQCkj">Promo Discount - Paa Large Buddy Size + Pork BBQ Buddy Size</span>
</div>
</div>
</div>
</a>
</div>
<div class="ant-col-24 RestaurantListCol___1FZ8V ant-col-md-12 ant-col-lg-6">
<a href="/ph/en/restaurant/angel-s-pizza-legarda-available-for-long-distance-delivery-delivery/PHGFSTI000000zw" style="color: inherit; text-decoration: none;">
<div class="ant-row-flex ant-row-flex-start ant-row-flex-top asList___1ZNTr">
<div class="ant-col-24 colPhoto___3vb-o ant-col-md-24 ant-col-lg-24">
<div class="">
<div class="placeholder___1xbBh restoPhoto___3nncy"><img alt="Order Angel's Pizza - Legarda [Available for LONG-DISTANCE DELIVERY]" class="realImage___2TyNE show___3oA6B" src="https://d1sag4ddilekf6.azureedge.net/compressed/merchants/PHGFSTI000000zw/hero/2166e88cc82b4a8fb3193f1b555002fe_1624797732725799594.jpg"></div>
</div>
</div>
<div class="ant-col-24 colInfo___3iLqj ant-col-md-24 ant-col-lg-24">
<h6 class="name___2epcT">Angel's Pizza - Legarda [Available for LONG-DISTANCE DELIVERY]</h6>
<div class="basicInfoContainer___1DcNs">
<div class="basicInfoRow___UZM8d cuisine___T2tCh">Quick Bites, Pizza, Italian, #ComboDealsPizza</div>
<div class="basicInfoRow___UZM8d numbers___2xZGn">
<div class="numbersChild___2qKMV">
<div class="medium___3F_Er ratingStar infoItemIcon___23Zvv" role="button" tabindex="0" style="display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url("/static/images/icons/icon-star.svg");"></div>
4.6
</div>
<div class="numbersChild___2qKMV">
<div class="medium___3F_Er deliveryClock infoItemIcon___23Zvv" role="button" tabindex="0" style="display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url("/static/images/icons/icon-clock.svg");"></div>
43 mins • 1.4 km
</div>
</div>
</div>
</div>
</div>
</a>
</div>
<div class="ant-col-24 RestaurantListCol___1FZ8V ant-col-md-12 ant-col-lg-6">
<a href="/ph/en/restaurant/wendy-s-dapitan-available-for-long-distance-delivery-delivery/PHGFSTI0000017w" style="color: inherit; text-decoration: none;">
<div class="ant-row-flex ant-row-flex-start ant-row-flex-top asList___1ZNTr">
<div class="ant-col-24 colPhoto___3vb-o ant-col-md-24 ant-col-lg-24">
<div class="promoTag___IYhfm">
<div class="placeholder___1xbBh restoPhoto___3nncy"><img alt="Order Wendy's - Dapitan [Available for LONG-DISTANCE DELIVERY]" class="realImage___2TyNE show___3oA6B" src="https://d1sag4ddilekf6.azureedge.net/compressed/merchants/PHGFSTI0000017w/hero/9cf2d2e2170d4c288706e4ec08740199_1604489462614383246.jpeg"></div>
<div class="promoTagHead___1bjRG">Promo</div>
<div class="promoTagTail___2Jy3D"></div>
</div>
</div>
<div class="ant-col-24 colInfo___3iLqj ant-col-md-24 ant-col-lg-24">
<h6 class="name___2epcT">Wendy's - Dapitan [Available for LONG-DISTANCE DELIVERY]</h6>
<div class="basicInfoContainer___1DcNs">
<div class="basicInfoRow___UZM8d cuisine___T2tCh">Fast Food, Burgers, American, #ComboDealsBurgers</div>
<div class="basicInfoRow___UZM8d numbers___2xZGn">
<div class="numbersChild___2qKMV">
<div class="medium___3F_Er ratingStar infoItemIcon___23Zvv" role="button" tabindex="0" style="display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url("/static/images/icons/icon-star.svg");"></div>
4.4
</div>
<div class="numbersChild___2qKMV">
<div class="medium___3F_Er deliveryClock infoItemIcon___23Zvv" role="button" tabindex="0" style="display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url("/static/images/icons/icon-clock.svg");"></div>
30 mins • 1.5 km
</div>
</div>
</div>
<div class="basicInfoRow___UZM8d discount___3h-0m">
<div class="medium___3F_Er discountIcon infoItemIcon___23Zvv" role="button" tabindex="0" style="display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url("/static/images/icons/icon-promo-tag.svg");"></div>
<span class="discountText___GQCkj">P150 OFF: Use code PADALOVE, min 600</span>
</div>
</div>
</div>
</a>
</div>
<div class="ant-col-24 RestaurantListCol___1FZ8V ant-col-md-12 ant-col-lg-6">
<a href="/ph/en/restaurant/kfc-sta-cruz-delivery/2-CYUZC8BTGJ51GJ" style="color: inherit; text-decoration: none;">
<div class="ant-row-flex ant-row-flex-start ant-row-flex-top asList___1ZNTr">
<div class="ant-col-24 colPhoto___3vb-o ant-col-md-24 ant-col-lg-24">
<div class="promoTag___IYhfm">
<div class="placeholder___1xbBh restoPhoto___3nncy"><img alt="Order KFC - Sta Cruz" class="realImage___2TyNE show___3oA6B" src="https://d1sag4ddilekf6.azureedge.net/compressed/merchants/2-CYUZC8BTGJ51GJ/hero/680a96e5303d4434af6c9ea5751b211e_1593015057999865942.jpeg"></div>
<div class="promoTagHead___1bjRG">Promo</div>
<div class="promoTagTail___2Jy3D"></div>
</div>
</div>
<div class="ant-col-24 colInfo___3iLqj ant-col-md-24 ant-col-lg-24">
<h6 class="name___2epcT">KFC - Sta Cruz</h6>
<div class="basicInfoContainer___1DcNs">
<div class="basicInfoRow___UZM8d cuisine___T2tCh">American, Chicken, Fast Food</div>
<div class="basicInfoRow___UZM8d numbers___2xZGn">
<div class="numbersChild___2qKMV">
<div class="medium___3F_Er ratingStar infoItemIcon___23Zvv" role="button" tabindex="0" style="display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url("/static/images/icons/icon-star.svg");"></div>
4.1
</div>
<div class="numbersChild___2qKMV">
<div class="medium___3F_Er deliveryClock infoItemIcon___23Zvv" role="button" tabindex="0" style="display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url("/static/images/icons/icon-clock.svg");"></div>
27 mins • 0.8 km
</div>
</div>
</div>
<div class="basicInfoRow___UZM8d discount___3h-0m">
<div class="medium___3F_Er discountIcon infoItemIcon___23Zvv" role="button" tabindex="0" style="display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url("/static/images/icons/icon-promo-tag.svg");"></div>
<span class="discountText___GQCkj">P150 OFF: Use code PADALOVE, min 600</span>
</div>
</div>
</div>
</a>
</div>
<div class="ant-col-24 RestaurantListCol___1FZ8V ant-col-md-12 ant-col-lg-6">
<a href="/ph/en/restaurant/chowking-sta-cruz-manila-delivery/2-CYMHN7DWAGL2WE" style="color: inherit; text-decoration: none;">
<div class="ant-row-flex ant-row-flex-start ant-row-flex-top asList___1ZNTr">
<div class="ant-col-24 colPhoto___3vb-o ant-col-md-24 ant-col-lg-24">
<div class="">
<div class="placeholder___1xbBh restoPhoto___3nncy"><img alt="Order Chowking - Sta Cruz Manila" class="realImage___2TyNE show___3oA6B" src="https://d1sag4ddilekf6.azureedge.net/compressed/merchants/2-CYMHN7DWAGL2WE/hero/370cba7acb8645d99e045d93121555cd_1632276886062046084.jpg"></div>
</div>
</div>
<div class="ant-col-24 colInfo___3iLqj ant-col-md-24 ant-col-lg-24">
<h6 class="name___2epcT">Chowking - Sta Cruz Manila</h6>
<div class="basicInfoContainer___1DcNs">
<div class="basicInfoRow___UZM8d cuisine___T2tCh">Chinese, Chicken, Fast Food</div>
<div class="basicInfoRow___UZM8d numbers___2xZGn">
<div class="numbersChild___2qKMV">
<div class="medium___3F_Er ratingStar infoItemIcon___23Zvv" role="button" tabindex="0" style="display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url("/static/images/icons/icon-star.svg");"></div>
4.5
</div>
<div class="numbersChild___2qKMV">
<div class="medium___3F_Er deliveryClock infoItemIcon___23Zvv" role="button" tabindex="0" style="display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url("/static/images/icons/icon-clock.svg");"></div>
31 mins • 0.6 km
</div>
</div>
</div>
</div>
</div>
</a>
</div>
<div class="ant-col-24 RestaurantListCol___1FZ8V ant-col-md-12 ant-col-lg-6">
<a href="/ph/en/restaurant/greenwich-binondo-delivery/2-CYKTRUEHNAUGEX" style="color: inherit; text-decoration: none;">
<div class="ant-row-flex ant-row-flex-start ant-row-flex-top asList___1ZNTr">
<div class="ant-col-24 colPhoto___3vb-o ant-col-md-24 ant-col-lg-24">
<div class="promoTag___IYhfm">
<div class="placeholder___1xbBh restoPhoto___3nncy"><img alt="Order Greenwich - Binondo" class="realImage___2TyNE show___3oA6B" src="https://d1sag4ddilekf6.azureedge.net/compressed/merchants/2-CYKTRUEHNAUGEX/hero/upload-photo-Hero_Photo_66bf96e0fcff47da8b6aacb925f913a3_1554863645049377072.jpeg"></div>
<div class="promoTagHead___1bjRG">Promo</div>
<div class="promoTagTail___2Jy3D"></div>
</div>
</div>
<div class="ant-col-24 colInfo___3iLqj ant-col-md-24 ant-col-lg-24">
<h6 class="name___2epcT">Greenwich - Binondo</h6>
<div class="basicInfoContainer___1DcNs">
<div class="basicInfoRow___UZM8d cuisine___T2tCh">American, Pizza, Fast Food</div>
<div class="basicInfoRow___UZM8d numbers___2xZGn">
<div class="numbersChild___2qKMV">
<div class="medium___3F_Er ratingStar infoItemIcon___23Zvv" role="button" tabindex="0" style="display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url("/static/images/icons/icon-star.svg");"></div>
4.5
</div>
<div class="numbersChild___2qKMV">
<div class="medium___3F_Er deliveryClock infoItemIcon___23Zvv" role="button" tabindex="0" style="display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url("/static/images/icons/icon-clock.svg");"></div>
34 mins • 1.6 km
</div>
</div>
</div>
<div class="basicInfoRow___UZM8d discount___3h-0m">
<div class="medium___3F_Er discountIcon infoItemIcon___23Zvv" role="button" tabindex="0" style="display: inline-block; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url("/static/images/icons/icon-promo-tag.svg");"></div>
<span class="discountText___GQCkj">Lasagna Supreme Flash Sale: two (2) Greenwich Lasagna Supreme Small Pans for only P399!</span>
</div>
</div>
</div>
</a>
</div>
</div>
<button type="button" class="ant-btn ant-btn-block"><span>Load More</span></button>
</div>
</div>
I am currently using this, but it gets all the links on the search result page, i want the ones in the div above.
url_elements = driver.find_elements_by_xpath("//a[contains(#href, '/ph/en/restaurant')]")
url_elements_list = []
for url_element in url_elements:
url_elements_list.append(url_element.get_attribute("href"))
sliced_list=url_elements_list[:2]
print(sliced_list)

To get the restaurants elements inside the specific div element you should do as following:
Apply find_elements_by_xpath method on rl_element web element instead of applying it on web driver instance driver.
The XPath locator should start with a dot . meaning "search from this node, not form the beginning of the whole page.
rl_element = driver.find_element_by_class_name("ant-layout")
url_elements = rl_element.find_elements_by_xpath(".//a[contains(#href, '/ph/en/restaurant')]")
url_elements_list = []
for url_element in url_elements:
url_elements_list.append(url_element.get_attribute("href"))
sliced_list=url_elements_list[:2]
print(sliced_list)

Use those line of code Edited:
url_elements_list = []
for url_element in driver.find_elements_by_class_name('ant-layout')::
url_elements_list.append(url_element.get_attribute("href"))
print(url_elements_list)

Python Selenium Send Keys function does not input text

I'm trying to fill a field with text inputs from a CSV, Send Keys works fine with all fields except for the below one
<div class="col-xs-12 col-md-6">
<div class="custom-select" data-qa="work-tags" data-testid="work-tags" aria-disabled="false">
<div class="custom-select__label">Tags</div>
<div class=" css-2b097c-container">
<div class=" css-yk16xz-control">
<div class=" css-1hwfws3">
<div class=" css-1wa3eu0-placeholder">Select</div>
<div class="css-1g6gooi">
<div class="" style="display: inline-block;"><input autocapitalize="none" autocomplete="off" autocorrect="off" id="react-select-10-input" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" value="" style="box-sizing: content-box; width: 2px; background: 0px center; border: 0px; font-size: inherit; opacity: 1; outline: 0px; padding: 0px; color: inherit;">
<div
style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: 14px; font-family: "Open Sans", sans-serif; font-weight: 400; font-style: normal; letter-spacing: normal; text-transform: none;"></div>
</div>
</div>
</div>
<div class=" css-1wy0on6"><span class=" css-1okebmr-indicatorSeparator"></span>
<div aria-hidden="true" class=" css-tlfecz-indicatorContainer"><svg height="20" width="20" viewBox="0 0 20 20" aria-hidden="true" focusable="false" class="css-19bqh2r"><path d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"></path></svg></div>
</div>
</div>
</div>
</div>
</div>
From UI I can simply input text and save.
I have tried the following but didn't work.
driver.find_element_by_xpath("//div[#data-qa='work-tags']//div[#class=' css-2b097c-container']//div[#class=' css-yk16xz-control']").click()
time.sleep(1)
driver.find_element_by_xpath("//div[#data-qa='work-tags']//div[#class=' css-2b097c-container']//div[#class=' css-yk16xz-control']").send_keys(SSID_rows[SSIDs][1],Keys.TAB)
Thank you

You're trying to put text into div. Try to use input node:
driver.find_element_by_id("react-select-10-input").send_keys(SSID_rows[SSIDs][1],Keys.TAB)

extract key parts a string where the content is enclosed in a <span style="font-weight:bold"> tag

I am getting this answer of a web service:
<html xmlns="http://www.w3.org/TR/REC-html40">
<head>
<title>Grampal </title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="Content-Language" content="EN">
<meta name="author" content="jmguirao#ugr.es">
<link rel="icon" type="image/ico" href="/favicon.ico" />
<style type="text/css">
html,body,form,ul,li,h1,h3,p{margin:0; padding:0}
body { font-family: Arial, Helvetica, sans-serif; background-color:#fff }
a { text-decoration: none; }
a:hover { text-decoration: underline }
ul { list-style-type: none }
td {padding: 0.5pc 2pc 0pc 0pc }
.nav { float: right; padding: 0.5pc 0.5pc 0.5pc 0.5pc; margin-left:5px }
.nav li {display:inline; border-left: 1px solid #444; padding:0 0.4em;}
.nav li.first {border-left:0}
.hide { display:none }
input { text-indent: 2px }
input[type="submit"] { text-indent: 0 }
DIV.delPage { padding: 0.5ex 5em 0.5em 5em; background-color:#ffd6ba; }
.delMain { padding: 2ex 0.5em 0.5pc 0.5em; }
.post { margin-bottom: 0.25pc; font-size: 100%; padding-top: 0.5ex; }
.posts, #posts { padding: 0.5ex 0.5em 0.5pc 50px; }
.banner { padding: 0.5ex 0 0.5pc 0.5em; background-color: #ffc6aa;clear: both }
.banner h1 {
font-weight: bolder; font-size: 150%;
margin:0; padding:0 0 0 26px; display: inline;}
h2 {
font-weight: bolder; font-size: 140%; color: red;
margin:0; padding:0 0 0 26px; display: inline;}
.resaltado {font-weight: bolder;font-size: 100%}
</style>
</head>
<body>
<div class="banner">
<ul class="hide"><li>skip to content</li></ul>
<ul class="nav">Análsis de:
<li class="first">
<a title="Analizador morfosintáctico" href="/grampal/grampal.cgi?m=analiza&e=factura">palabras</a></li>
<li><a title="Desambiguador contextual" href="/grampal/grampal.cgi?m=etiqueta&e=factura">oraciones</a></li>
<li><a title="Etiquetado de textos" href="/grampal/grampal.cgi?m=xml">textos</a></li>
<li><a title="Formas de una palabra" href="/grampal/grampal.cgi?m=genera&e=factura">Generación de formas</a></li>
<!--
<li><a title="Transcripción fonética" href="/grampal/grampal.cgi?m=transcribe&e=factura">Transcripción</a></li>
-->
<li>Etiquetario</li>
<li>Autores</li>
</ul>
<h1>Grampal</h1>
</div>
<div class="delPage" style="font-size: 80%;">
<form method="GET" action="/grampal/grampal.cgi">
<input type="hidden" name="m" value="analiza">
<input type="hidden" name="csrf" value="651c4fcfae059a6e31c39a902f6d27c8">
<span class="resaltado">Palabra : </span><input name="e" size="60" value="factura">
<input type="submit" value="Analiza">
</form>
</div>
<br>
<h2>factura</h2>
<div class="delMain">
<div id="posts">
<table>
<tr>
<td style="font-style:italic;font-size:90%">categoría <span style="font-weight:bold"> N </span></td>
<td style="font-style:italic;font-size:90%">lema <span style="font-weight:bold"> FACTURA </span></td>
<td style="font-style:italic;font-size:90%">género <span style="font-weight:bold"> femenino </span></td>
<td style="font-style:italic;font-size:90%">número <span style="font-weight:bold"> singular </span></td>
</tr>
<tr>
<td style="font-style:italic;font-size:90%">categoría <span style="font-weight:bold"> V </span></td>
<td style="font-style:italic;font-size:90%">lema <span style="font-weight:bold"> FACTURAR </span></td>
<td style="font-style:italic;font-size:90%">número <span style="font-weight:bold"> singular </span></td>
<td style="font-style:italic;font-size:90%">persona <span style="font-weight:bold"> 3 </span></td>
<td style="font-style:italic;font-size:90%">tiempo <span style="font-weight:bold"> presente indicativo </span></td>
</tr>
<tr>
<td style="font-style:italic;font-size:90%">categoría <span style="font-weight:bold"> V </span></td>
<td style="font-style:italic;font-size:90%">lema <span style="font-weight:bold"> FACTURAR </span></td>
<td style="font-style:italic;font-size:90%">número <span style="font-weight:bold"> singular </span></td>
<td style="font-style:italic;font-size:90%">persona <span style="font-weight:bold"> 2 </span></td>
<td style="font-style:italic;font-size:90%">tiempo <span style="font-weight:bold"> imperativo </span></td>
</tr>
</table>
</div>
</div>
</body>
</html>
but I'm interested in only getting everything that is inside the <span style="font-weight:bold"> tag. Is there an optimal way to do it? in my knowledge, I could only achieve it using .split but I do not think it's a very elegant or very optimal way to achieve it. I would like to understand the best way or the most elegant way to achieve it.
This is my desired output:
[
N,
FACTURA,
femenino,
singular,
.
.
.]

You can use regular expressions here:
import re
result = re.findall(r'<span style="font-weight:bold">(.*?)<', html_document)

Buttons on second html file not working for Flask

Ok so I have two html files. base.html and search_results.html
base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
font-family: sans-serif;
background-image: url('/static/Flat-Color-Gradient-Triangles.png');
width: 430px;
height: 763px;
align-items: center;
}
h1 {
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
font-size: 45px;
font-color: #333333;
font-weight: bold;
margin: 0;
padding: 3px;
text-align: center;
}
h2 {
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
font-size: 15px;
font-weight: bold;
margin: 0;
padding: 3px;
border: 1.5px
}
h3 {
font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
font-size: 14px;
font-weight: 100;
margin: 0;
border-top: 1px;
border-bottom: 1px;
padding: 3px;
}
.explicit{
color: rgb(200, 0, 0);
}
.rank{
font-weight: bold;
}
table {
border-collapse: collapse;
padding: 4px;
}
table, th, td {
padding: 5px;
border-bottom: 1px solid black;
color: white;
text-align: center;
}
th {
background-color: #121f1f;
border-left: #121f1f;
border-right:#121f1f;
}
td {
background-color: #253f3f;
border-left: #253f3f;
border-right: #253f3f;
}
input[type='text'] {
width: 100%;
padding: 6px 10px;
margin: 6px 0;
box-sizing: border-box;
border: 2px solid #ccc;
font-size: 14px;
border-radius: 10px;
}
input[type='text']:focus {
border: 3px solid red;
}
input[type = 'submit'] {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
width: 100%;
}
input[value="Up"] {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
}
input[value="Down"] {
background-color: rgb(200,0,0);
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
}
input[value="Add"] {
border: 3px solid #4CAF50;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
}
div.content {
width: 430px;
align-items: center;
}
</style>
</head>
<body>
<div class="content">
<h1>Public Playlist</h1>
<form action = '/search_results' method="POST">
<input placeholder="Artist:" type = 'text' name='artist'> </input>
<input placeholder="Album:" type = 'text' name='album'> </input>
<input placeholder="Track:" type = 'text' name='track'> </input>
<input type="submit" value="Submit!" id="search"/>
</form>
<table >
<tr>
<th><h2>Rank</h2></th>
<th><h2>Title</h2>
<h2>Author|Album</h2></th>
<th><h2>Score</h2></th>
<th><h2>Vote</h2></th>
</tr>
<tr>
<td><h3 type="bold">1</h3></td>
<td><h3>{{name}}</h3>
<h3>{{artist}}:{{album}}</h3></td>
<td><h3>{{ score }}</h3></td>
<form action="/vote" method="POST">
<td>
<input type="button" name="vote" value="Up" id="up">
<input type="button" name= "vote" value="Down" id="down">
</td>
</form>
</tr>
<tr>
<td><h3 type="bold">2</h3></td>
<td><h3>{{name1}}</h3>
<h3>{{artist1}}:{{album1}}</h3></td>
<td><h3>{{ score1 }}</h3></td>
<form action="/" method="POST">
<td>
<input type="button" name="vote1" value="Up" id="up">
<input type="button" name= "vote1" value="Down" id="down">
</td>
</form>
</tr>
<tr>
<td><h3 type="bold">3</h3></td>
<td><h3>{{name2}}</h3>
<h3>{{artist2}}:{{album2}}</h3></td>
<td><h3>{{ score2 }}</h3></td>
<form action="/vote" method="POST">
<td>
<input type="button" name="vote2" value="Up" id="up">
<input type="button" name= "vote2" value="Down" id="down">
</td>
</form>
</tr>
<tr>
<td><h3 type="bold">4</h3></td>
<td><h3>{{name3}}</h3>
<h3>{{artist3}}:{{album3}}</h3></td>
<td><h3>{{ score3 }}</h3></td>
<form action="/vote" method="POST">
<td>
<input type="button" name="vote3" value="Up" id="up">
<input type="button" name= "vote3" value="Down" id="down">
</td>
</form>
</tr>
<tr>
<td><h3 type="bold">5</h3></td>
<td><h3>{{name4}}</h3>
<h3>{{artist4}}:{{album4}}</h3></td>
<td><h3>{{ score4 }}</h3></td>
<form action="/vote" method="POST">
<td>
<input type="button" name="vote4" value="Up" id="up">
<input type="button" name= "vote4" value="Down" id="down">
</td>
</form>
</tr>
<tr>
<td><h3 type="bold">6</h3></td>
<td><h3>{{name5}}</h3>
<h3>{{artist5}}:{{album5}}</h3></td>
<td><h3>{{ score5 }}</h3></td>
<form action="/vote" method="POST">
<td>
<input type="button" name="vote5" value="Up" id="up">
<input type="button" name= "vote5" value="Down" id="down">
</td>
</form>
</tr>
<tr>
<td><h3 type="bold">7</h3></td>
<td><h3>{{name6}}</h3>
<h3>{{artist6}}:{{album6}}</h3></td>
<td><h3>{{ score6 }}</h3></td>
<form action="/vote" method="POST">
<td>
<input type="button" name="vote6" value="Up" id="up">
<input type="button" name= "vote6" value="Down" id="down">
</td>
</form>
</tr>
<tr>
<td><h3 type="bold">8</h3></td>
<td><h3>{{name7}}</h3>
<h3>{{artist7}}:{{album7}}</h3></td>
<td><h3>{{ score7 }}</h3></td>
<form action="/vote" method="POST">
<td>
<input type="button" name="vote7" value="Up" id="up">
<input type="button" name= "vote7" value="Down" id="down">
</td>
</form>
</tr>
<tr>
<td><h3 type="bold">9</h3></td>
<td><h3>{{name8}}</h3>
<h3>{{artist8}}:{{album8}}</h3></td>
<td><h3>{{ score8 }}</h3></td>
<form action="/vote" method="POST">
<td>
<input type="button" name="vote8" value="Up" id="up">
<input type="button" name= "vote8" value="Down" id="down">
</td>
</form>
</tr>
<tr>
<td><h3 type="bold">10</h3></td>
<td><h3>{{name9}}</h3>
<h3>{{artist9}}:{{album9}}</h3></td>
<td><h3>{{ score9 }}</h3></td>
<form action="/vote" method="POST">
<td>
<input type="button" name="vote9" value="Up" id="up">
<input type="button" name= "vote9" value="Down" id="down">
</td>
</form>
</tr>
</table>
<script>
setTimeout(function () {location.reload() },60000);
</script>
</div>
</body>
</html>
search_results.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
font-family: sans-serif;
background-image: url('/static/Flat-Color-Gradient-Triangles.png');
width: 640px;
height: 1136px;
}
h1 {
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
font-size: 45px;
font-color: #333333;
font-weight: bold;
margin: 0;
padding: 3px;
text-align: center;
}
h2 {
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
font-size: 15px;
font-weight: bold;
margin: 0;
padding: 3px;
border: 1.5px
}
h3 {
font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
font-size: 14px;
font-weight: 100;
margin: 0;
border-top: 1px;
border-bottom: 1px;
padding: 3px;
}
.explicit {
color: rgb(200, 0, 0);
}
.rank {
font-weight: bold;
}
table {
border-collapse: collapse;
padding: 4px;
}
table,
th,
td {
padding: 5px;
border-bottom: 1px solid black;
color: white;
text-align: center;
}
th {
background-color: #121f1f;
border-left: #121f1f;
border-right: #121f1f;
}
td {
background-color: #253f3f;
border-left: #253f3f;
border-right: #253f3f;
}
input[type='text'] {
width: 100%;
padding: 6px 10px;
margin: 6px 0;
box-sizing: border-box;
border: 2px solid #ccc;
font-size: 14px;
border-radius: 10px;
}
input[type='text']:focus {
border: 3px solid red;
}
input[type='submit'] {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
width: 100%;
}
input[value="Up"] {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
}
input[value="Down"] {
background-color: rgb(200, 0, 0);
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
}
input[name="Add"] {
border: 3px solid #4CAF50;
color: white;
background-color: #253f3f;
padding: 16px 32px;
text-decoration: none;
font-weight: bold;
margin: 4px 2px;
}
</style>
</head>
<body>
<h1>Public Playlist</h1>
<table>
<tr>
<th>
<h2>Rank</h2>
</th>
<th>
<h2>Title</h2>
<h2>Author|Album</h2>
</th>
<th>
<h2>Score</h2>
</th>
<th>
<h2>Add</h2>
</th>
</tr>
<tr>
<form action="/add" method="GET">
<td>
<h3 type="bold">1</h3>
</td>
<td>
<h3>{{name}}</h3>
<h3>{{artist}}:{{album}}</h3>
</td>
<td>
<h3>{{ score }}</h3>
</td>
<td>
<input type="button" name="Add" value="Add" id="Add">
</td>
</form>
</tr>
<tr>
<form action="/add" method="GET">
<td>
<h3 type="bold">2</h3>
</td>
<td>
<h3>{{name1}}</h3>
<h3>{{artist1}}:{{album1}}</h3>
</td>
<td>
<h3>{{ score1 }}</h3>
</td>
<td>
<input type="button" name="Add" value="Add1" id="Add1">
</td>
</form>
</tr>
<tr>
<form action="/add" method="GET">
<td>
<h3 type="bold">3</h3>
</td>
<td>
<h3>{{name2}}</h3>
<h3>{{artist2}}:{{album2}}</h3>
</td>
<td>
<h3>{{ score2 }}</h3>
</td>
<td>
<input type="button" name="Add" value="Add2" id="Add2">
</td>
</form>
</tr>
<tr>
<form action="/add" method="GET">
<td>
<h3 type="bold">4</h3>
</td>
<td>
<h3>{{name3}}</h3>
<h3>{{artist3}}:{{album3}}</h3>
</td>
<td>
<h3>{{ score3 }}</h3>
</td>
<td>
<input type="button" name="Add" value="Add3" id="Add3">
</td>
</form>
</tr>
<tr>
<form action="/add" method="GET">
<td>
<h3 type="bold">5</h3>
</td>
<td>
<h3>{{name4}}</h3>
<h3>{{artist4}}:{{album4}}</h3>
</td>
<td>
<h3>{{ score4 }}</h3>
</td>
<td>
<input type="button" name="Add" value="Add4" id="Add4">
</td>
</form>
</tr>
<tr>
<form action="/add" method="GET">
<td>
<h3 type="bold">6</h3>
</td>
<td>
<h3>{{name5}}</h3>
<h3>{{artist5}}:{{album5}}</h3>
</td>
<td>
<h3>{{ score5 }}</h3>
</td>
<td>
<input type="button" name="Add" value="Add5" id="Add5">
</td>
</form>
</tr>
<tr>
<form action="/add" method="GET">
<td>
<h3 type="bold">7</h3>
</td>
<td>
<h3>{{name6}}</h3>
<h3>{{artist6}}:{{album6}}</h3>
</td>
<td>
<h3>{{ score6 }}</h3>
</td>
<td>
<input type="button" name="Add" value="Add6" id="Add6">
</td>
</form>
</tr>
<tr>
<form action="/add" method="GET">
<td>
<h3 type="bold">8</h3>
</td>
<td>
<h3>{{name7}}</h3>
<h3>{{artist7}}:{{album7}}</h3>
</td>
<td>
<h3>{{ score7 }}</h3>
</td>
<td>
<input type="button" name="Add" value="Add7" id="Add7">
</td>
</form>
</tr>
<tr>
<form action="/add" method="GET">
<td>
<h3 type="bold">9</h3>
</td>
<td>
<h3>{{name8}}</h3>
<h3>{{artist8}}:{{album8}}</h3>
</td>
<td>
<h3>{{ score8 }}</h3>
</td>
<td>
<input type="button" name="Add" value="Add8" id="Add8">
</td>
</form>
</tr>
<tr>
<form action="/add" method="GET">
<td>
<h3 type="bold">10</h3>
</td>
<td>
<h3>{{name9}}</h3>
<h3>{{artist9}}:{{album9}}</h3>
</td>
<td>
<h3>{{ score9 }}</h3>
</td>
<td>
<input type="button" name="Add" value="Add9" id="Add9">
</td>
</form>
</tr>
</table>
</body>
</html>
I then have a python file projectfalcon.py The relevant methods are:
#app.route('/add', methods=['GET'])
def addingSongs():
if request.method == 'GET':
btnID = request.form['btn']
if btnID == 'Add0':
songResults[0].upVote()
addedSongs.append(songResults[0])
songResults.remove(0)
if btnID == 'Add1':
songResults[1].upVote()
addedSongs.append(songResults[1])
songResults.remove(1)
return render_template('base.html')
So the base.html is the first page that loads. You type in an artist name to search for songs and it takes you to the search_results.html where the results are displayed. I am trying to let the user be able to click the add button and the song will then be added to a list in the projectfalcon.py file. After clicking it will also take you back to the base.html file and reload the songs that in the playlist I am not sure what I am doing wrong. I have googled multiple times but may have not found the right wording. Any help is appreciated.

The most obvious issue I can spot is the way you're accessing the btn variable. Since your form sends a GET request, it needs to be accessed like this:
btnID = request.args.get('btn', '')
Apart from that, I don't understand how you're storing addedSongs list. Flask context is limited to requests, and you shouldn't use python global namespace. You should either create a context variable (also a global in flask) or the easiest way would be to just store user data in a database.
You should take a look at this flask tutorial which is a complete guide to making a web app from scratch. Perhaps it may be of some use to get the basics cleared up and allow you to 'find the right wordings' to your problems! :)
Cheers.

Categories

Resources