DEV Community

Cover image for Text to ASCII Art Generator in Django (Mini project)
Arpit
Arpit

Posted on

Text to ASCII Art Generator in Django (Mini project)

Setup and Installation

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

python3.10 -m venv venv
Enter fullscreen mode Exit fullscreen mode

Activate your environment

source venv/bin/activate
Enter fullscreen mode Exit fullscreen mode

Install Django and pyfiglet

pip install django pyfiglet
Enter fullscreen mode Exit fullscreen mode

Create Project

django-admin startproject core
Enter fullscreen mode Exit fullscreen mode

Create App

python manage.py startapp textart
Enter fullscreen mode Exit fullscreen mode

Code

register your app in settings.py

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

    "textart", # your app
]
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

textart/urls.py

from django.urls import path
from . import views

urlpatterns = [
    path('', views.text_to_ascii, name='text_to_ascii'),
]
Enter fullscreen mode Exit fullscreen mode

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
]
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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",
            ],
        },
    },
]

Enter fullscreen mode Exit fullscreen mode

Now runserver and open http://127.0.0.1:8000, yay

image.png

Happy Coding :)

Try this project: QR Generator in Django

Top comments (0)