Text to ASCII Art Generator in Django (Mini project)
Tags: django, python, webdev, tutorial
Published: 2022-10-22 04:08:20

## 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

register your app in settings.py

```python
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
```python
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

```python
from django.urls import path
from . import views

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

### core/urls.py 
```python
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
```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

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

```

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


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666161005457/UaupjSSvv.png)

Happy Coding :)

Try this project: [QR Generator in Django](https://www.codesnail.com/how-to-generate-qr-code-in-django/)