Text to ASCII Art Generator in Django (Mini project)

#django #webdev #python #tutorial

Setup and Installation

Create a virtual environment. I'm using python3.10 for this project

python3.10 -m venv venv

Activate your environment

source venv/bin/activate

Install Django and pyfiglet

pip install django pyfiglet

Create Project

django-admin startproject core

Create App

python manage.py startapp textart

Code

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",

    "textart", # your app
]

textart/views.py

from django.shortcuts import render
import pyfiglet

def text_to_ascii(request):

    # getting all fonts provided by pyfiglet
    fonts = pyfiglet.FigletFont.getFonts()

    # getting form data
    text = request.GET.get('text', '')
    font = request.GET.get('font', 'slant')


    result = pyfiglet.figlet_format(text, font=font)

    context = {
        'fonts': sorted(fonts),
        'result': result
    }

    return render(request, 'index.html', context)

textart/urls.py

from django.urls import path
from . import views

urlpatterns = [
    path('', views.text_to_ascii, name='text_to_ascii'),
]

core/urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path("admin/", admin.site.urls),
    path("", include("textart.urls")), #this
]

templates/index.html

<!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">

    <!-- for dark theme hehe ez-->
    <meta name="color-scheme" content="dark"> 

    <title>Text to ASCII Art</title>

    <style>
        *{
            box-sizing: border-box;
        }

        h1, form, .text, small{
            display: flex;

            justify-content: center;
            align-items: center;
        }

        small{
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 0.5rem;
            background-color: #000;
            color: #fff;
        }

        form{
            gap: 5px;
        }

        input, select, button{
            padding: 10px;
            height: 40px;
        }
        button{
            width: 100px;
        }
    </style>
</head>
<body>
    <main>
        <h1>
            Text to ASCII Art
        </h1>
        <form>
            <input text="text" name="text" placeholder="Enter text" value="{{ request.GET.text }}">


            <select name="font">
                {% for font in fonts %}
                    <option value="{{ font }}" 
                    {% if font == request.GET.font %}
                        selected
                    {% endif %}
                    >
                        {{ font }}
                    </option>
                {% endfor %}
            </select>


            <button type="submit">Submit</button>
        </form>
        <div class="text"><pre>{{ result }}</pre></div>


        <small> Follow me on Instagram&nbsp;<a href="https://www.instagram.com/code_snail/">@code_snail</a></small>
    </main>
</body>
</html>

add templates path in settings.py

TEMPLATES = [
    {
        "BACKEND": "django.template.backends.django.DjangoTemplates",
        "DIRS": [ BASE_DIR / "templates" ], #this
        "APP_DIRS": True,
        "OPTIONS": {
            "context_processors": [
                "django.template.context_processors.debug",
                "django.template.context_processors.request",
                "django.contrib.auth.context_processors.auth",
                "django.contrib.messages.context_processors.messages",
            ],
        },
    },
]