PYTHON TURTLE: OVERVIEW

Developers Today — Tue, 18 Apr 2023 14:27:06 +0000

What is Python Turtle?

Python Turtle is a library used to create simple graphics in Python. It is a great way to introduce programming to kids and adults alike, as it is easy to use and understand. Python Turtle also allows you to learn the basics of programming without having any prior knowledge or experience with coding.

Getting Started with Python Turtle
To get started with Python Turtle, you need to download and install Python. Then you can install the Turtle library by following these steps:

Open a new Python file in your favorite text editor (I use Sublime Text)
Type import turtle at the top of your file.
Create a Turtle object by typing t = Turtle() in your code window, then pressing Enter or Return on your keyboard. This will create an instance of our turtle named “t” that we can use to draw shapes and patterns!

Using Turtle Commands

Turtle Motion Commands:

forward(distance): moves the turtle forward by a specified distance
backward(distance) : moves the turtle backward by a specified distance
right(angle) : turns the turtle clockwise by a specified angle
left(angle) : turns the turtle counterclockwise by a specified angle
goto(x, y) : moves the turtle to the specified coordinates (x, y)
setx(x) : moves the turtle to the specified x-coordinate
sety(y) : moves the turtle to the specified y-coordinate
setheading(angle) : sets the turtle's heading to the specified angle
home() : moves the turtle to the origin (0, 0) and sets the turtle's heading to due east (0 degrees)

Pen Control Commands:

pendown() : puts the pen down, allowing the turtle to draw
pinupup() : lifts the pen up, preventing the turtle from drawing
pensize(width) : sets the width of the pen to the specified value
pencolor(color) : sets the color of the pen to the specified color
fillcolor(color) : sets the color used for filling in shapes
begin_fill() : starts filling in a shape
end_fill() : stops filling in a shape

Window Control Commands:

screensize(width, height) : sets the size of the turtle's screen to the specified values
title(title) : sets the title of the turtle's window
bgcolor(color) : sets the background color of the turtle's window
window_width() : returns the width of the turtle's window
window_height() : returns the height of the turtle's window

Other Commands:

clear() : clears the turtle's screen and resets the turtle to its original state
reset() : clears the turtle's screen and resets the turtle to its original state, but does not clear the drawing window
hideturtle() : hides the turtle from view
showturtle() : makes the turtle visible again
speed(speed) : sets the speed of the turtle (0 = fastest, 10 = slowest)
undo() : undoes the last action performed by the turtle
isdown() : returns True if the pen is down, False otherwise.

Examples:

import turtle
import random
def draw_star(size, color, x, y):
    turtle.penup()
    turtle.goto(x, y)
    turtle.pendown()
    turtle.color(color)
    turtle.begin_fill()
    for _ in range(5):
        turtle.forward(size)
        turtle.right(144)
    turtle.end_fill()
def animate_stars():
    turtle.clear()
    for _ in range(25):
        size = random.randint(10, 30)
        x = random.randint(-300, 300)
        y = random.randint(-300, 300)
        color = random.choice(["red", "blue", "green", "yellow", "white", "cyan", "magenta"])
        draw_star(size, color, x, y)
    turtle.ontimer(animate_stars, 1000)
turtle. Speed(0)
turtle.bgcolor("black")
turtle.hideturtle()
turtle.ontimer(animate_stars, 1000)
turtle.mainloop()

[Youtube]{https://www.youtube.com/watch?v=7dw-MYvF0}

Conclusion
Python Turtle is a great way to introduce programming to kids and adults alike. It’s easy to use, understand and a great way to learn the basics of programming.

Feel free to follow me on Twitter, GitHub, and YouTube.🙂

Connecting the Registration Form To Firebase

Developers Today — Sun, 24 Jul 2022 14:39:11 +0000

Firebase is a mobile and web development platform that provides programmers with a variety of tools that helps them develop quality applications. In this tutorial, we are going to see how we can use firebase for our registration forms.

We can divide the whole tutorial into the following outlines:-
Create an Html template for the registration form.
Add CSS for design and responsiveness.
Connect Firebase Realtime Database to Registration Form using Javascript
1-Create the Html template for the registration form

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ContactForm</title>
    <link rel="stylesheet" href="contact_form.css">
    <link rel='shortcut icon' type='image/x-icon' href='./favicon.ico' />
    <script src="https://www.gstatic.com/firebasejs/9.9.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.9.1/firebase-database.js"></script>
</head>

<body>
    <div class="container">
        <div class="count">
            <h3>Contact Form</h3>
        </div>

        <form id="form_contact" name="contact_form">
            <label>First Name</label>
            <input name="first_name" id="fname" type="text" required placeholder="" />
            <br>
            <label>Last Name</label>
            <input name="last_name" id="sname" type="text" required placeholder="" />
            <br>
            <label>Email</label>
            <input name="email" id="email" type="email" required placeholder="" />
            <br>
            <label>Message</label><br>
            <textarea name="message" id="message" cols="30" rows="10" placeholder="Enter your message here ..." required> </textarea>
            <div class="center">
                <input type="submit" value="Submit">
            </div>
        </form>
    </div>
    <script src="contact_form.js"></script>
</body>

</html>

you can make changes according to your need in the HTML form.

2-Add CSS for design and responsiveness
This contact_form.css file is included in the HTML file.

@import url("https://fonts.googleapis.com/css?family=Roboto:400");

/* Set font of all elements to 'Roboto' */

* {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}


/* Remove outline of all elements on focus */

*:focus {
    outline: 0;
}

body {
    background: #0d1316;
    /* Set background color to #263238*/
}

h3 {
    text-align: center;
}


/* Add styles to 'container' class */

.container {
    padding: 12px 24px 24px 24px;
    margin: 48px 12px;
    background: #109bff;
    border-radius: 4px;
}


/* Add styles to 'label' selector */

label {
    font-size: 0.85em;
    margin-left: 12px;
}


/* Add styles to 'input' and 'textarea' selectors */

input[type=text],
input[type=email],
textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
}


/* Add styles to show 'focus' of selector */

input[type=text]:focus,
input[type=email]:focus,
textarea:focus {
    border: 1px solid green;
}


/* Add styles to the submit button */

input[type=submit] {
    background: #02060a;
    margin: 0 auto;
    outline: 0;
    color: white;
    border: 0;
    padding: 12px 24px;
    border-radius: 4px;
    transition: all ease-in-out 0.1s;
    position: relative;
    display: inline-block;
    text-align: center;
}


/* Add styles for 'focus' property */

input[type=submit]:focus {
    background: #A5D6A7;
    color: whitesmoke;
}


/* Style 'hover' property */

input[type=submit]:hover {
    background: #b13efd;
}


/* Align items to center of the 'div' with the class 'center' */

.center {
    text-align: center;
}

3-Connect Firebase Realtime Database to Registration Form using Javascript
For connecting to the firebase, we need to visit the following website. Then click on Add project, provide a name to the project and continue. Now it will create a project for you. (You can refer to this.)

You will get the option of selecting between the Realtime Database and the Cloud Firestore. In this tutorial, we will make use of the Real-time database. Click on the build from the left menu and chose Realtime database and set up the database.

Chose Project overview from the left menu and chose web app, create one, and copy the firebaseConfig value and paste that into the js file.

var firebaseConfig = {
    apiKey: "AIzaSyBZS2UBi3VNk8uLZ9mdJfE6KRiZjcmxZiQ",
    authDomain: "contact-form-2475b.firebaseapp.com",
    databaseURL: "https://contact-form-2475b-default-rtdb.firebaseio.com",
    projectId: "contact-form-2475b",
    storageBucket: "contact-form-2475b.appspot.com",
    messagingSenderId: "9283608547",
    appId: "1:9283608547:web:51d2956027f8b49bdd4ad6",
    measurementId: "G-5C2FQ0LQ74",
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
//Reference messages collection
let messagesRef = firebase.database().ref("messages");

//function to get form values
function getInputVal(id) {
    return document.getElementById(id).value;
}

//save message to firebase
function saveMessage(fname, sname, email, message) {
    let newMessageRef = messagesRef.push();
    newMessageRef.set({
        fname: fname,
        sname: sname,
        email: email,
        message: message,
    });
}


function submitForm(e) {
    e.preventDefault();

    // get Values
    let fname = getInputVal("fname");
    let sname = getInputVal("sname");
    let email = getInputVal("email");
    //   let phone = getInputVal("phone");
    let message = getInputVal("message");

    //save message

    saveMessage(fname, sname, email, message);
    window.alert("You have successfully sent your message")
        //clear form
    document.getElementById("form_contact").reset();

}

//listen to form
document.getElementById("form_contact").addEventListener("submit", submitForm);

Be careful that all files are in the same folder, or You can change the path of the files.

Note: If you discover your data is not sent to your database, check your console. If you see any error saying permission denied, then you have to go back to your settings in firebase. Click on the database section in your sidebar, in there you will see Rules. Once you click on Rules, set the read and write to true:

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

You can also visit my github profile.

DEV Community: Developers Today

PYTHON TURTLE: OVERVIEW

Connecting the Registration Form To Firebase