I'm creating search function using php,mysql,js and ajax. But i cant select the search items. I'm trying to select suggested words. there is load suggestions but i can't select them. here is the code i have created.please
this is index page. in index page script part is wrong or doesn't work the last part of fadeOut effect.
<head>
<title>2nd year group project</title>
<meta charset = "utf-8">
<metaname="viewport" content="width=device-width, initial-scale=1">
<!--this is for link css file-->
<link rel="stylesheet" type="text/css" href="css/FindAProffesional.css">
<!--//this is for link icons for site-->
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<!--//this is for link bootstrap to site-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<div style="width:500px;">
<input type="text" name="country" id="country" class="form-control" placeholder="Enter city name">
</div>
<div id="countryList"></div>
<script>
$(document).ready(function(){
$('#country').keyup(function(){
var query = $(this).val();
if(query!='')
{
$.ajax({
url:"search.php",
method:"POST",
data:{query:query},
success:function(data)
{
$('#countryList').fadeIn();
$('#countryList').html(data);
}
});
}
});
$document().on('click','li',function(){
$('#country').val($(this).text());
$('#countryList').fadeOut();
});
});
</script>
</body>
this is serch.php page
<?php
require('dbcon.php');
if(isset($_POST["query"]))
{
$output='';
$query ="SELECT DISTINCT city FROM architect WHERE city LIKE '%".$_POST["query"]."%'";
$result = mysqli_query($conn,$query);
$output = '<ul class="list-unstyled">';
if(mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_array($result))
{
$output .='<li>'.$row["city"].'</li>';
}
}
else
{
$output .='<li>City not Found</li>';
}
$output .='</ul>';
echo $output;
}
?>
replace
$document().on('click','li',function(){
$('#country').val($(this).text());
$('#countryList').fadeOut();
});
with
$(function(){
$('#countryList').on('click','li',function(){
$('#country').val($(this).text());
$('#countryList').fadeOut();
});
});
Related
I've been attempting to create a simple page which updates after you have selected an <option> from a <select> tag.
So far I have been able to get a request going thru for my PHP script to receive the value of the selected option, but the response isn't affecting the displayed content (even though it really should). Firefox shows that the response is the entire page again, but with some additional text attached by the script so I know it went thru.
Even though I receive the response with the updated page/content, the page never seems to update.
index.php:
<?php
$pageName = "Index";
include "static/header.php";
require "static/db.php";
try {
$stmt = $db->prepare("SELECT id, year, make FROM public.vehs");
$stmt->execute();
$vals = $stmt->fetchAll();
} catch (Exception $e) {
die($e->getMessage());
}
#
#
$message = "";
if(isset($_POST['dropdownValue'])) {
$message = "value set";
}
?>
<body>
<script>
$(document).ready(function(){
$('#select1').change(function(){
//Selected value
let inputValue = $(this).val();
//Ajax for calling php function
$.post('index.php', { dropdownValue: inputValue }, function(data){
});
});
});
</script>
<select id="select1">
<option value="" disabled selected></option>
<?php
foreach($vals as $row) {
echo("<option value='{$row["id"]}'>{$row["year"]} - {$row["make"]}</option>");
}
?>
</select><br>
<?php if(!empty($message)): ?>
<p><?= $message ?></p>
<?php endif; ?>
</body>
header.php:
<?php
$pageName;
?>
<head>
<title>Test Website - <?php echo $pageName ?></title>
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
<link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="application/javascript" src="/static/js/ajax.js"> # Really just jQuery, idk why i named it that
<script type="application/javascript" src="/static/js/bootstrap.min.js"></script>
</head>
The request's response:
<head>
<title>Test Website - Index</title>
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
<link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="application/javascript" src="/static/js/ajax.js"
<script type="application/javascript" src="/static/js/bootstrap.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$('#select1').change(function(){
//Selected value
let inputValue = $(this).val();
//Ajax for calling php function
$.post('index.php', { dropdownValue: inputValue }, function(data){
});
});
});
</script>
<select id="select1">
<option value="" disabled selected></option>
<option value='1'>2020 - Test</option> </select><br>
<p>value set</p>
</body>
What I see in the browser after the request:
<html><head>
<title>Test Website - Index</title>
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
<link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="application/javascript" src="/static/js/ajax.js" <script=""></script>
</head>
<body>
<script>
$(document).ready(function(){
$('#select1').change(function(){
//Selected value
let inputValue = $(this).val();
//Ajax for calling php function
$.post('index.php', { dropdownValue: inputValue }, function(data){
});
});
});
</script>
<select id="select1">
<option value="" disabled="" selected=""></option>
<option value="1">2020 - Test</option> </select><br>
</body></html>
To achieve what you want to do create another file like selected.php, because you are loading the whole HTML page while you only want to change the value inside p, then after the data loaded you need to change the text inside p using $('p').text(data)
// selected.php
<?php
$message = "";
if(isset($_POST['dropdownValue'])) {
$message = "value set";
}
echo $message;
?>
Edit your index.php file, to look like this
.....
<script>
$(document).ready(function(){
$('#select1').change(function(){
//Selected value
let inputValue = $(this).val();
//Ajax for calling php function
$.post('selected.php', { dropdownValue: inputValue }, function(data){
$('p').text(data)
});
})
});
</script>
......
<p>value not set</p>
Hope this will help!
I have dropdown. When I select any value and click on confirm, Below it should print the selected value and also the selected value should be shown in the dropdown. How can I achieve this.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--Links related to dropdown-->
<link href="http://localhost/performance/Test/css/fselect.css" rel="stylesheet">
<script src="http://localhost/performance/Test/js/fSelect.js"></script>
<script>
(function($) {
$(function() {
$('#project_name').fSelect();
});
})(jQuery);
</script>
</head>
<body>
<?php
$projects = array('Trial','Test','Birds','Animals');
?>
<div class="container">
<div><center><b>This test will be created in the selected project:</b></center></div><br>
<div class="create_test">
<form action="#" method="post">
<div style="margin-left:2cm;">
<select name="project_name" id="project_name" >
<?php
for($i=0; $i<count($projects); $i++) {
echo "<option value='".$projects[$i]."'>".$projects[$i]."</option>";
}
?>
</select>
<input type="submit" style="margin-left:3.5cm; width:140px;" name="submit" id="comfirm" class="btn btn-success" value="Confirm" />
</div>
</form>
</div>
</div>
</body>
</html>
<?php
/** Store selected in a varaible in php */
$selected = 'trial';// Suppose get the value from db here
for($i=0; $i<count($projects); $i++) {
echo "<option value='".$projects[$i]."' selected='".$project[$i] == $selected."'>".$projects[$i]."</option>";
}
?>
So adding the selected='true' will be used as value for the select tag
I'm using the jquery Maximage add-on to create a full-screen slideshow, loading the images dynamically with php, json and mysql.
The problem is that if I upload one or more new images in the database, Maximage does not update the new images automatically.
Any idea how I can do to update Maximage at the end or start the cycle of the images?
<!DOCTYPE html>
<html class='no-js' lang='en'>
<!--<![endif]-->
<head>
<meta charset='utf-8' />
<title>Kiosco</title>
<link rel="stylesheet" type="text/css" href="lib/css/jquery.maximage.css">
<link rel="stylesheet" type="text/css" href="lib/css/screen.css">
<style type="text/css" media="screen">
#maximage {
/* position:fixed !important; */
}
</style>
</head>
<body>
<div id="maximage">
<?php
include "conexion/conexion.php";
// Consult the database
$result = mysqli_query($con,"SELECT name FROM files ORDER BY position ASC");
//Load images
while($row = mysqli_fetch_array($result)) {
?>
<img src="/KioskoImage/lib/images/ImagesDisplay/<?php echo $row['name'];?>" alt="" width="1400" height="1050">
<?php
}
//Close BD
mysqli_close($con);
?>
</div>
<script src="lib/js/jquery.js"></script>
<script src="lib/js/jquery.cycle.all.js" type="text/javascript"></script>
<script src="lib/js/jquery.maximage.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
// Trigger maximage
jQuery('#maximage').maximage();
});
</script>
<script type="text/javascript">
$('#maximage').maximage({
onImagesLoaded: function() {
location.reload();
}
});
</script>
</body>
</html>
There is data not updated after insert portion.
There is an error Notice: Undefined variable: domain in C:\wamp64\www\email_verify\index.php on line 69.
Notice: Undefined variable: target in C:\wamp64\www\email_verify\index.php on line 69.
Notice: Undefined variable: target_ip in C:\wamp64\www\email_verify\index.php on line 69.
If there are three email entered in textarea, the error will come 3 times.
How can I solve it and update data after insert first portion?
The code is here:
<?php
include_once('config.php');
if(isset($_POST["email_verify_btn"])) {
$email = $_POST["email_verify"];
if(strpos($email,"\n")) {
$text = explode("\n",$email);
}
function domain_exists($text)
{
$domain = substr(strrchr($text, "#"), 1);
$arr = #dns_get_record($domain, DNS_MX);
if ($arr[0]['host'] == $domain && !empty($arr[0]['target'])) {
return $arr[0]['target'];
}
}
foreach ($text as $abc) {
$status = 1;
$c_by = 1;
$c_date = date('Y-m-d H:i:s');
$c_ip = $_SERVER['REMOTE_ADDR'];
$_SESSION['date_time'] = $c_date;
$insert = $connect->query("INSERT INTO `email_verify_list`(`primary_email`,`session`,`status`,`created_by`, `created_date`, `created_ip`) VALUES ('$abc','".$_SESSION['date_time']."','$status','$c_by','$c_date','$c_ip')");
if($insert == 1) {
$c_by = 1;
$c_date = date('Y-m-d H:i:s');
$c_ip = $_SERVER['REMOTE_ADDR'];
if(filter_var($abc, FILTER_VALIDATE_EMAIL)) {
if(domain_exists($abc)) {
$domain = substr(strrchr($abc, "#"), 1);
$data = #dns_get_record($domain, DNS_MX);
if($data) {
$status = "email id is valid";
}
if (is_array($data) || is_object($data)) {
foreach ($data as $key1) {
$host = $key1['host'];
$target = $key1['target'];
$target_ip = gethostbyname($key1['target']);
}
}
} else {
$status = "mx recored not exist";
}
} else {
$status = "not in syntax" ;
}
$insert_all = $connect->query("UPDATE `email_verify_list` SET `host_name`='$domain',`target`='$target',`target_ip`='$target_ip',`status`='$status' WHERE session='".$_SESSION['date_time']."'");
}
}
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
<meta charset="utf-8"/>
<title>BULK EMAIL VARIFIER</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no"/>
<link rel="apple-touch-icon" href="pages/ico/60.png">
<link rel="apple-touch-icon" sizes="76x76" href="pages/ico/76.png">
<link rel="apple-touch-icon" sizes="120x120" href="pages/ico/120.png">
<link rel="apple-touch-icon" sizes="152x152" href="pages/ico/152.png">
<link rel="icon" type="image/x-icon" href="favicon.ico"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta content="" name="description"/>
<meta content="" name="author"/>
<link href="assets/plugins/pace/pace-theme-flash.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/bootstrapv3/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css"/>
<link href="assets/plugins/jquery-scrollbar/jquery.scrollbar.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="assets/plugins/switchery/css/switchery.min.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="pages/css/pages-icons.css" rel="stylesheet" type="text/css" />
<link class="main-stylesheet" href="pages/css/pages.css" rel="stylesheet" type="text/css"/>
<!--[if lte IE 9]>
<link href="assets/plugins/codrops-dialogFx/dialog.ie.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
</head>
<body class="fixed-header ">
<div id="rootwizard" class="m-t-50">
<ul class="nav nav-tabs nav-tabs-linetriangle nav-tabs-separator nav-stack-sm">
<li class="active">
<a data-toggle="tab" href="#tab1"><span>EMAIL VERIFY</span></a>
</li>
</ul>
<form method="post" action="" >
<div class="tab-content">
<div class="tab-pane padding-20 active slide-left" id="tab1">
<div class="row row-same-height">
<div class="col-md-12">
<div class="padding-30">
<div class="row clearfix">
<div class="col-sm-3">
<div class="form-group form-group-default">
<label><font size="2">ENTER YOUR EMAIL <span class="glyphicon glyphicon-envelope"></span></font></label><br>
<textarea cols="43" rows="9" name="email_verify" style="border-color:white;border-width:thin;padding:4pt;" multiple/></textarea><br>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-sm-3">
<button type="submit" name="email_verify_btn" class="btn btn-lg btn-info" style="padding:11pt;width:200px;"/><span><b><font size="2">SUBMIT</font></b></span></button>
</div>
</div> <br><br>
<div class="row clearfix">
<div class="col-sm-12">
<table width="100%" class="table ">
<tr class="success">
<th>PRIMARY EMAIL <span class="glyphicon glyphicon-envelope"></span></th>
<th>HOST NAME</th>
<th>TARGET</th>
<th>TARGET IP</th>
<th>STATUS</th>
</tr>
<?php
$select = $connect->query("SELECT * from `email_verify_list` where session='".$_SESSION['date_time']."' ");
while($row = $select->fetch_assoc()) {
?>
<tr>
<td><?php echo $row['primary_email']; ?></td>
<td><?php echo $row['host_name']; ?></td>
<td><?php echo $row['target']; ?></td>
<td><?php echo $row['target_ip']; ?></td>
<td><?php echo $row['status']; ?></td>
</tr>
<?php } ?>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<script src="assets/plugins/pace/pace.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="assets/plugins/modernizr.custom.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
<script src="assets/plugins/bootstrapv3/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery/jquery-easy.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-unveil/jquery.unveil.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-bez/jquery.bez.min.js"></script>
<script src="assets/plugins/jquery-ios-list/jquery.ioslist.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-actual/jquery.actual.min.js"></script>
<script src="assets/plugins/jquery-scrollbar/jquery.scrollbar.min.js"></script>
<script type="text/javascript" src="assets/plugins/classie/classie.js"></script>
<script src="assets/plugins/switchery/js/switchery.min.js" type="text/javascript"></script>
<script src="assets/plugins/bootstrap3-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script type="text/javascript" src="assets/plugins/jquery-autonumeric/autoNumeric.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap-tag/bootstrap-tagsinput.min.js"></script>
<script type="text/javascript" src="assets/plugins/jquery-inputmask/jquery.inputmask.min.js"></script>
<script src="assets/plugins/bootstrap-form-wizard/js/jquery.bootstrap.wizard.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-validation/js/jquery.validate.min.js" type="text/javascript"></script>
<script src="assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js" type="text/javascript"></script>
<script src="assets/plugins/summernote/js/summernote.min.js" type="text/javascript"></script>
<script src="assets/plugins/moment/moment.min.js"></script>
<script src="assets/plugins/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="assets/plugins/bootstrap-timepicker/bootstrap-timepicker.min.js"></script>
<script src="pages/js/pages.min.js"></script>
<script src="assets/js/form_wizard.js" type="text/javascript"></script>
<script src="assets/js/scripts.js" type="text/javascript"></script>
<script src="assets/js/demo.js" type="text/javascript"></script>
<script>
window.intercomSettings = {
app_id: "xt5z6ibr"
};
</script>
</body>
</html>
add auto increment field in your table and get last inserted record id after insert query run. and used that id for update record in where clause.
The problem is $text is not being set if you submit only one email.
This should be different:
if(strpos($email,"\n")) {
$text = explode("\n",$email);
}
It should be.
if(strpos($email,"\n")) {
$text = explode("\n",$email);
} else {
$text = array($email);
}
or you could just do.
$text = explode("\n",$email);
I usually build my website's pages in .html and then, when everything works, I create the .php page for db and all the server-side stuff.
'Till now I hadn't any problem, but since when I'm trying to integrate some JS scripts in my pages, every time, the same script that in the .html sample works fine in the .php page doesn't work fine or doesn't work at all. Today I was "fighting" with the LightGallery script integrated in my gallery.php file.
I tried everyhing possible before posting this question but whitout any success; I definitely need your help!
This code in the .html page referres to the jQuery gallery and it works fine:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>...</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/gallery.css">
<link rel="stylesheet" type="text/css" href="test/css/lightGallery.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
</head>
<body>
<!-- A jQuery plugin that adds cross-browser mouse wheel support. (Optional) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.js"></script>
<script src="test/js/lightgallery.js"></script>
<!-- lightgallery plugins -->
<script src="https://cdn.jsdelivr.net/picturefill/2.3.1/picturefill.min.js"></script>
<script src="test/js/lg-thumbnail.js"></script>
<script src="test/js/lg-fullscreen.js"></script>
<script src="test/js/lg-autoplay.js"></script>
<div id="header">
....
</div>
<div id="content">
<div id="selector1">
<div class="item" data-src="img/art.jpg">
<figure>
<img src="img/urban.jpg" />
</figure>
</div>
<div class="item" data-src="img/art.jpg">
<figure>
<img src="img/urban.jpg" />
</figure>
</div>
</div>
</div>
<div id="footer">
.....
</div>
<script type="text/javascript">
$('#selector1').lightGallery({
selector: '.item'
});
</script>
</body>
</html>
Since it worked, I integrated it in this .php file:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Marco Brigonzi">
<?php
/* check URL */
$query_url = $_SERVER['QUERY_STRING'];
$pageID = substr($query_url, 6);
?>
<title>Album: "<?php $title = ucfirst($pageID);
echo $title; ?>" | Photo</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/gallery.css">
<link rel="stylesheet" type="text/css" href="script/lightgallery/css/lightGallery.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<?php include("php/header-footer.php"); ?>
</head>
<body>
<?php include_once("php/analyticstracking.php"); ?>
<!-- jQuery version must be >= 1.8.0; -->
<!-- <script src="jquery.min.js"></script> -->
<!-- A jQuery plugin that adds cross-browser mouse wheel support. (Optional) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.js"></script>
<script src="script/lightgallery/js/lightgallery.js"></script>
<!-- lightgallery plugins -->
<script src="https://cdn.jsdelivr.net/picturefill/2.3.1/picturefill.min.js"></script>
<script src="script/lightgallery/js/lg-thumbnail.js"></script>
<script src="script/lightgallery/js/lg-fullscreen.js"></script>
<script src="script/lightgallery/js/lg-autoplay.js"></script>
<script src="script/lightgallery/js/lg-hash.js"></script>
<script src="script/lightgallery/js/lg-pager.js"></script>
<script src="script/lightgallery/js/lg-zoom.js"></script>
<?
$current = "photo";
head($current);
?>
<div id="content">
<div id="selector1">
<?php
/* check URL */
if($pageID == 'urban')
{$pageCode = '1';}
elseif($pageID == 'art')
{$pageCode = '2';}
elseif($pageID == 'street')
{$pageCode = '3';}
elseif($pageID == 'nature')
{$pageCode = '4';}
else
{echo 'Error 0';}
/* connessione */
......connection values........
$conn = mysqli_connect($servername, $username, $password, $dbname);
if (!$conn)
{die("Connection failed: " . mysqli_connect_error());}
/* SET utf8 charset for special characters */
if (!mysqli_set_charset($conn, "utf8"))
{printf("Error loading character set utf8: %s\n", mysqli_error($conn));
exit();
}
$sql_pic = 'SELECT * FROM photos WHERE album="'.$pageCode.'" ORDER BY rating DESC';
$result_pic = mysqli_query($conn, $sql_pic);
if (mysqli_num_rows($result_pic) > 0)
{
while($row_pic = mysqli_fetch_assoc($result_pic))
{
echo '<div class="item" data-src="img/photo/'.$pageID.'/'.$row_pic["name"].'.jpg" alt="">
<figure>
<img src="img/photo/'.$pageID.'/thumb/'.$row_pic["thumb"].'.jpg" alt="">
</figure>
</div>';
}
}
else
{echo 'Error 1';}
mysqli_close($conn);
?>
</div>
</div>
<?php foot(); ?>
<script type="text/javascript">
$('#selector1').lightGallery({
selector: '.item'
});
</script>
</body>
</html>
And, of course, it stops working. I tried to put the JS scripts' calling at the end of the page but nothing changes. I've really no clue, 'cause the code is exactly the same! It's only integrated in a .php dynamic page.
[SOLVED] This time the problem was the capital letter in the CSS call: the server host renamed lightGallery.css in lightgallery.css so the CSS file was missing. Thanks everyone for the help!