17- CSS and JS Folders

Hits: 496

It might be a good time to seperate my css an js codes from base.html. Because obviously I am gonna need to add more css and js in my project.

Make sure virtual environment is activated on your terminal. I created 2 folders named css and js under the static folder. Then under the css folder, I created a file named style.css.

CSS:

In my base.html, I already have some css styles right after the block title. Cut the CSS section and paste into style.css. 

{% block title %}
{% endblock title %}
<!--CSS-->
 <style type="text/css">
.asteriskField{
display: none;
}

</style>
<!--CSS-->

 

Then remove the style tags.

style.css

.asteriskField{
display: none;
}

 

I also need to point to my css file in my base.html

base.html

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="/{% static 'images/favicon.ico' %}" type="image/gif" sizes="16x16">
    <link rel="stylesheet" href="/{% static 'css/style.css' %}">
{% block title %}
{% endblock title %}

 

JS:

I already created the js folder under the static folder. Create a file named main.js in js folder.

Then on your base.html or any page you want, point to this file like that.

 

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="/{% static 'images/favicon.ico' %}" type="image/gif" sizes="16x16">
    <link rel="stylesheet" href="/{% static 'css/style.css' %}">
    <script src="/{% static 'js/main.js' %}"></script>
{% block title %}
{% endblock title %}

 

In main.js, you can simply use this js code to test if everything works

alert("Welcome to MovieApp!");