I'm running a Python application in Elastic Beanstalk for test, i connect the application to DynamoDB
and creating a table
The application uses Flask FrameWork , html/css and boto3 sdk to connect to dynamo
the problem is, I can't show the table details on the page
this is a application
this is the table from dynamo
the code of application is
import json
import boto3
from flask import Flask, render_template, request
application = Flask(__name__)
def conectar_dynamo():
dynamodb = boto3.resource('dynamodb', region_name='us-east-1')
table = dynamodb.Table('posts')
return table
def scan():
table = conectar_dynamo()
response = table.scan()
data = response['Items']
while 'LastEvaluatedKey' in response:
response = table.scan(ExclusiveStartKey=response['LastEvaluatedKey'])
data.extend(response['Items'])
return data
def put_item(data):
table = conectar_dynamo()
table.put_item(
Item={
'id': data['id'],
'content': data['content'],
'title': data['title']
}
)
return 'Concluido com sucesso!'
#application.route('/')
def index():
return render_template('index.html')
#application.route('/consultar', methods=['GET'])
def consultar():
return json.dumps(scan(), default=str)
#application.route('/incluir', methods=['POST'])
def incluir():
body = request.json
res = put_item(body)
return res
if __name__ == '__main__':
application.run(host='0.0.0.0', debug=False)
and the index.html is
{% extends 'base.html' %}
{% block content %}
<h1>{% block title %} teste{% endblock %}</h1>
{% for post in posts %}
<a href="#">
<h2>{{ post['title'] }}</h2>
</a>
<span class="badge badge-primary">{{ post['created'] }}</span>
<hr>
{% endfor %}
{% endblock %}
and my base.html is
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>{% block title %} {% endblock %}</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="{{ url_for('index')}}">Barbosa's</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Sobre</a>
</li>
</ul>
</div>
</nav>
<div class="container">
{% block content %} {% endblock %}
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
what am i doing wrong?
Related
I am working on a web page displaying a table below a navigation bar. The table on the page is generated from data coming from a database. The page as such does what it is supposed to do, but the table hosting the data is not left aligned on the page, but has a lot of white space to its left.
The Python/Flask-part of the code looks like this, data from the database comes as pandas DataFrame:
from flask import Flask, render_template
import DBConnector
from jinja2 import Environment
import pandas as pd
app = Flask(__name__)
app.jinja_options = {'lstrip_blocks': True, 'trim_blocks': True}
app.create_jinja_environment()
#app.route('/')
def index():
connector = DBConnector()
df: pd.DataFrame = connector.getData()
return render_template('index.html', tables=[df.to_html(classes='data', header=True)])
I borrowed the index.html code from a Stackoverflow post:
{% extends 'base.html' %}
{% block content %}
<h1>{% block title %}Table Viewer{% endblock %}</h1>
{% for table in tables %}
{{ table|safe }}
{% endfor %}
{% endblock %}
which extends the file base.html:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>{% block title %} {% endblock %}</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="{{ url_for('index')}}">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
<div class="container" align="left">
{% block content %}
{% endblock %}
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
The output looks like this:
How can I remove the large white space to the left of the table?
Problem: CMS-toolbar is hiding Navigation bar menus & it's now disabled(not moving up).
Django version = 3.0.8
Django cms = 3.8.0
I have base template and a home template. Here I am sharing base template code. What should I add to solve the issue?
<!-- this is base template -->
{% load static %}
{% load cms_tags menu_tags sekizai_tags static %} <!--load template libraries of Sekizai and CMS tag -->
<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE }}"> <!-- in case you want other languages -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content=""> {% page_attribute "meta_description" %} <!--should have description of pages-->
<meta name="author" content="">
<title>Smart Learn - {% page_attribute "page_title" %} </title> <!--In title page name should come first then website title -->
{% render_block "css" %} <!-- loading css here render_block comes with sekizai lib to allow templates to included-->
<!-- Bootstrap core CSS -->
{% addtoblock "css" %} <!--for sekizai tags -->
<link href="{% static "vendor/bootstrap/css/bootstrap.min.css" %}" rel="stylesheet">
{% endaddtoblock %}
<!-- Custom styles for this template -->
{% addtoblock "css" %}
<link href="{% static "css/smart-learn.css" %}" rel="stylesheet">
{% endaddtoblock %}
</head>
{% cms_toolbar %}<!-- from cms toobar -->
<body>
<!-- Navigation -->
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="/">Smart Learn</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
{% show_menu 0 100 100 100 %} <!-- for cms menu -->
<li class="nav-item">
<a class="#" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="#" href="services.html">Services</a>
</li>
</ul>
</div>
</div>
</nav>
{% block content %}{% endblock %}
<!-- Footer -->
<footer class="py-5 bg-dark">
{% static_placeholder "Footer" %}
</footer>
<!-- Bootstrap core JavaScript -->
{% addtoblock "js" %}
<script src= "{% static "vendor/jquery/jquery.min.js" %}"></script>
{% endaddtoblock %}
{% addtoblock "js" %}
<script src= "{% static "vendor/bootstrap/js/bootstrap.bundle.min.js" %}"></script>
{% endaddtoblock %}
{% render_block "js" %} <!--to put all js template designs on home -->
</body>
</html>
How can I convert that icon to arrow one which can be moved up and down easily?
This is what I have
This is what I need
Do you have any placeholder tag inside template?
{% block base_content %}
{% placeholder some_content %}
{% endblock %}
If not, navigation bar will be disabled.
Suppose currently I'm on the "http://127.0.0.1:8000/message/detailmessage/5" page and I want to go to "login" page by clicking on login hyperlink from base.html(nav-bar), I want it to show "http://127.0.0.1:8000/login"
but it showing "http://127.0.0.1:8000/message/detailmessage/login"
what should I do?
base.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<style>
{% block css %}{% endblock %}
</style>
<title>{% block title %}{% endblock %}</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Home</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
{% for id in doctor %}
{{id.doctor_id}}
{% endfor %}
<ul class="navbar-nav ml-auto">
{% for id in doctor %}
{{id.doctor_id}}
<li class="nav-item">
<a class="nav-link" href=message/{{id.doctor_id}}>Message</a>
</li>
{% endfor %}
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdownMenuLink"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
LogIn/LogOut
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="login">Login</a>
<a class="dropdown-item" href="/">Log Out</a>
</div>
</li>
</ul>
</div>
</nav>
{% block body %} {% endblock %}
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
</body>
</html>
message.html
{% extends 'base.html' %}
{% block css %}
{% endblock %}
{%block body %}
<h1>My Message Page</h1>
<table class="table table-hover">
<thead>
<tr>
<th scope="col">No</th>
<th scope="col">Sender</th>
<th scope="col">Message</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
{% for message in message %}
<tr>
<th scope="row">{{ forloop.counter }}</th>
<td> {{message.sender}}</td>
<td>{{message.message_text}}</td>
<td><a href="detailmessage/{{message.messager_id}}">View</td>
</tr>
{% endfor %}
</tbody>
</table>
{% load static %}
{% endblock %}
detailmessage.html
{% extends 'base.html' %}
{% block css %} body {
overflow-y:hidden;
}{% endblock %}
{%block body %}
<div class="container my-4 d-flex h-100">
<div class="row align-self-center w-100">
<div class="col-6 mx-auto">
<div class="jumbotron">
{% for message in message %}
<h1 class="display-4">Title:{{message.message_title}}</h1>
<p class="lead">Send By:{{message.sender}}</p>
<p class="lead">{{message.message_text}}</p>
<footer class="blockquote-footer">{{message.send_message}}</footer>
<p class="lead">
<button type="button" onclick="goBack()" class="btn btn-info my-4">
Back
</button>
</p>
{% endfor %}
</div>
</div>
</div>
</div>
<script>
function goBack() {
window.history.back();
}
</script>
{% load static %}
{% endblock %}
views.py
from django.shortcuts import render, redirect, HttpResponse
from django.contrib.auth import authenticate, login, logout
from django.contrib import messages
from .models import Doctor, Message
# Create your views here.
def home(request):
return render(request, 'home.html')
def login(request):
print("before login is done")
if request.method=="POST":
# Get the post parameters
username=request.POST['username']
password=request.POST['password']
print(username)
if Doctor.objects.filter(username=username).exists():
print("after username filter")
print(username)
if Doctor.objects.filter(password=password).exists():
# messages.success(request, "Successfully Logged In")
print("login is done")
doctorid=Doctor.objects.filter(username=username)
cnt = {'doctor': doctorid}
return render(request,'home.html', cnt)
else:
messages.error(request, "Invalid credentials! Please try again")
print("login is wrong")
return redirect("/login")
else:
messages.error(request, "Invalid credentials! Please try again")
print("login is wrong")
return redirect("/login")
return render(request,"login.html")
def message(request, id):
print("messages are in this vieews")
print(id)
message = Message.objects.filter(receiver=id)
cnt = {'message': message}
print(message)
return render(request, 'message.html', cnt)
def detailmessage(request, id):
message = Message.objects.filter(messager_id=id)
print(message)
cnt = {'message': message}
return render(request, 'detailmessage.html', cnt)
urls.py
from django.urls import path
from . import views
app_name = 'msg'
urlpatterns = [
path('home', views.home, name='home'),
path('message/<int:id>', views.message, name='message'),
path('message/detailmessage/<int:id>', views.detailmessage, name='detailmessage'),
path('login', views.login, name='login'),
]
http://127.0.0.1:8000/message/detailmessage/5 pic
http://127.0.0.1:8000/message/detailmessage/login pic
on your template, use this <a class="dropdown-item" href="{% url 'login' %}">Login</a> instead of this :<a class="dropdown-item" href="login">Login</a>
check https://docs.djangoproject.com/en/3.1/ref/templates/builtins/#url
I deployed an ecommerce website on the live server using heroku but having issue with product images as they are not being displayed.
The website is working fine on the local host but causing problem when being deployed online. I inspected the html code and found out that the live website doesn't show the jinja for loop template which is added to the html file. Can anyone please guide me on how to solve this issue?
Here is the link to the website,https://ahad-ecommerce-website.herokuapp.com/ and also the code snippet for the html file
main.html
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title> Ecom </title>
<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" type="text/css" href="{% static 'css/main.css'%}">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1" />
<script type="text/javascript">
var user = '{{request.user}}'
function getToken(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim();
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
var csrftoken = getToken('csrftoken');
function getCookie(name) {
// Split cookie string and get all individual name=value pairs in an array
var cookieArr = document.cookie.split(";");
// Loop through the array elements
for(var i = 0; i < cookieArr.length; i++) {
var cookiePair = cookieArr[i].split("=");
/* Removing whitespace at the beginning of the cookie name
and compare it with the given string */
if(name == cookiePair[0].trim()) {
// Decode the cookie value and return
return decodeURIComponent(cookiePair[1]);
}
}
// Return null if not found
return null;
}
var cart = JSON.parse(getCookie('cart'))
if(cart == undefined){
cart = {}
console.log('Cookie was created')
document.cookie = 'cart=' + JSON.stringify(cart) + ";domain=;path=/"
}
console.log('Cart:', cart)
</script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="{% url 'store' %}">Ecom</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{% url 'store' %}">Store <span class="sr-only">(current)</span></a>
</li>
</ul>
<div class="form-inline my-2 my-lg-0">
Login
<a href="{% url 'cart' %}">
<img id="cart-icon" src="{% static 'images/cart.jpg' %}">
</a>
<p id="cart-total">{{cartItems}}</p>
</div>
</div>
</nav>
<div class="container">
{% block content %}
{% endblock content%}
</div>
<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>
<script type="text/javascript" src="{% static 'js/cart.js' %}"></script>
</body>
</html>
{% extends 'store/main.html' %}
{% load static %}
{% block content %}
<div class="row">
{% for product in products %}
<div class="col-lg-4">
<img class="thumbnail" src="{{product.imageURL}}">
<div class="box-element product">
<h6><strong> {{product.name}} </strong></h6>
<hr>
<button data-product={{product.id}} data-action="add" class="btn btn-outline-secondary add-btn update-cart">Add to cart</button>
<a class="btn btn-outline-success" href="#"> View </a>
<h4 style="display: inline-block;float: right"><strong> ${{product.price|floatformat:2}} </strong></h4>
</div>
</div>
{% endfor %}
</div>
{% endblock content %}
Thanks
My collapsible navbar is not working on this basic site, and I am not sure why. I have tried to reorder the CDN scripts, copied and pasted directly from Boostrap's docs, and have double checked the code a few times. I'm sure it's a stupid mistake, but can anyone help me and point out what is happening here? The toggle button appears, but doesn't do anything when clicked. This is being used with a Django project.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>{% block title %}The title I'm using{% endblock title %}</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
<a class="navbar-brand" href="{% url 'home' %}">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="navbarCollapse" aria-controls="navbarCollapse"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
{% if user.is_authenticated %}
<form class="form-inline ml-auto">
<a href="{% url 'logout' %}" class="btn btn-outline-secondary">
Log out</a>
<a href="{% url 'password_change' %}" class="btn btn-primary ml-2">
Change password</a>
Update user profile
{{ user.username }}
</form>
{% else %}
<form class="form-inline ml-auto">
<a href="{% url 'login' %}" class="btn btn-outline-secondary">
Log In</a>
<a href="{% url 'signup' %}" class="btn btn-primary ml-2">
Sign up</a>
</form>
{% endif %}
</div>
</nav>
<div class="container">
{% block content %}
{% endblock content %}
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Incorrect attribute value in the toggle button:
data-target="navbarCollapse"
It should look like this (include the pound symbol):
data-target="#navbarCollapse"