I ran my server with python manage.py runserver and for some reason it started displaying as plain text. When I run it as a live server it comes out normal. I have no idea what I changed that messed it up. Seems like a longshot but if anyone has encountered the same problem please let me know.
For some reason, when I run it in the django liveserver, it is all wrapped in a pre tag
Here is the full html code
<!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">
<title>Document</title>
{% load static %}
<link rel="stylesheet" href="{% static 'pictures.css' %}">
<link rel="stylesheet" href="{% static 'my_albums.css' %}">
<link rel="stylesheet" href="{% static 'other.css' %}">
<link rel="stylesheet" href="{% static 'text.css' %}">
<link rel="stylesheet" href="{% static 'header_stuff2.css' %}">
<script>
let album_list = []
function display_albums(){
document.getElementById('album_table').innerHTML = ''
table_header = document.createElement('tr')
table_album_header = document.createElement('th')
table_artist_header = document.createElement('th')
table_date_header = document.createElement('th')
table_score_header = document.createElement('th')
table_album_header.innerText = 'Album'
table_artist_header.innerText = 'Artist'
table_date_header.innerText = 'Date'
table_score_header.innerText = 'Score'
let album_location = document.getElementById('album_table')
album_location.appendChild(table_header)
table_header.appendChild(table_album_header)
table_header.appendChild(table_artist_header)
table_header.appendChild(table_date_header)
table_header.appendChild(table_score_header)
album_list.forEach(function (album){
table_row = document.createElement('tr')
album_collumn = document.createElement('td')
artist_collumn = document.createElement('td')
date_collumn = document.createElement('td')
score_collumn = document.createElement('td')
delete_button_button = document.createElement('button')
delete_button_button.innerText = "Delete"
delete_button_button.id = album.id
delete_button_button.onclick = delete_album;
score_box = document.createElement('select')
score_box.innerText = "Score"
score_box.id = album.album_name + '' + '_select'
score_box.onclick = validate(album.album_name + '' + '_select')
score_option_default = document.createElement('option')
album_collumn.innerText = album.album_name
artist_collumn.innerText = album.artist
date_collumn.innerText = album.release_date
let album_location = document.getElementById('album_table')
album_location.appendChild(table_row)
table_row.appendChild(album_collumn)
table_row.appendChild(artist_collumn)
table_row.appendChild(date_collumn)
table_row.appendChild(score_collumn)
table_row.appendChild(delete_button_button)
score_collumn.appendChild(score_box)
score_box.appendChild(score_option_default)
option_counter = 0
while(option_counter != 11){
sc_o1 = document.createElement('option')
sc_o1.innerText = option_counter
sc_o1.value = option_counter
option_counter++
score_box.appendChild(sc_o1)
sc_o1.id = album.album_name + '' + option_counter.toString()
}
})
}
function validate(select_id){
var selected_select = document.getElementById(select_id)
console.log(select_id)
var selected_value = selected_select.options[selected_select.selectedIndex].value
alert(selected_value+''+'gang')
}
function update_score(){
album_list.forEach(function (album){
var select_thing = document.getElementById(album.album_name+''+'_select')
album.score = selected_select.options[selected_select.selectedIndex].value
})
}
document.addEventListener('DOMContentLoaded', () => {
document
.getElementById('flavours')
.addEventListener('input', handleSelect);
document.getElementById('thing').addEventListener('input', handleData);
});
function handleSelect(ev) {
let select = ev.target; //document.getElementById('flavours');
console.log(select.value);
let choices = [];
// for (let i = 0; i < select.selectedOptions.length; i++) {
// choices.push(select.selectedOptions[i].value);
// }
choices = [].map.call(select.selectedOptions, (option) => option.value);
console.log(choices);
}
function handleData(ev) {
let theInput = ev.target;
console.log(theInput.value, typeof theInput.value);
}
/*album_collumn = table_row.createElement('td')
artist_collumn = table_row.createElement('td')
date_collumn = table_row.createElement('td')
album_collumn.innerText = album.album_name
artist_collumn.innerText = album.artist
date_collumn.innerText = album.release_date
*/
function add_albums(){
album_name = document.getElementById('addedInput').value
album_list.push({
album_name: album_name,
artist: "Aidan Stone",
release_date: 2022,
score: NaN,
id: album_name
});
display_albums();
update_score();
}
function delete_album(event){
const delete_button = event.target
const idToDelete = delete_button.id
album_list = album_list.filter(function (album){
if (album.id === idToDelete){
return false
}
else{
return true
}
})
display_albums();
}
</script>
</head>
<body style="
height:3000px;
">
<header class="header">
<div class="search_bar_section">
<form class="search_bar" >
<div ><input class="search_bar_cool" type="text" placeholder="Search"></div>
<img class="search_bar_button" src="pictures/search_bar.jpg">
<!-- When I make it a button it fucks up the shape? -->
</form>
</div>
<div class="header_section">
<div class="nav_stuff">
<li><span><a href="fantasy_website_website.html">Home</a></span></li>
<li><span><a href="fantasy_website_website.html">Add Albums</a></span></li>
<li><span><a href="about_me.html">About Me</a></span></li>
<li><span><a href="fantasy_website_website.html">Other idk</a></span></li>
<li><span><a href="about_me.html">Other idk</a></span></li>
</div>
</div>
<div class="profile_section">
<img class="pfp" src="pictures/gkmc.jpg">
</div>
</header>
<body>
<div>
<table border="10" width="100" class="album_table" id="album_table">
<tr>
<th>Album</th>
<th>Artist</th>
<th>Average Score</th>
<th>Score</th>
</tr>
</table>
</div>
<div class="form">
<input type="text" placeholder="Search" id="addedInput",class = "Searchbar">
<button type="button" id="addBtn" onclick="add_albums()"></button>
</div>
<body>
