bluehost

Showing posts with label python. Show all posts
Showing posts with label python. Show all posts

Sunday, 1 October 2023

Creating Analogo Clock Using Python

photo screenshot analogo  clock


import tkinter as tk
import time
import math
 
WIDTH = 400
HEIGHT = 400
 
root = tk.Tk()
root.title("Analog Clock")
canvas = tk.Canvas(root, width=WIDTH, height=HEIGHT, bg="white")
canvas.pack()
 
def update_clock():
    canvas.delete("all")
    now = time.localtime()
    hour = now.tm_hour % 12
    minute = now.tm_min
    second = now.tm_sec
 
    # Draw clock face
    canvas.create_oval(2, 2, WIDTH, HEIGHT, outline="black", width=2)
 
    # Draw hour numbers
    for i in range(12):
        angle = i * math.pi/6 - math.pi/2
        x = WIDTH/2 + 0.7 * WIDTH/2 * math.cos(angle)
        y = HEIGHT/2 + 0.7 * WIDTH/2 * math.sin(angle)
        if i == 0:
            canvas.create_text(x, y-10, text=str(i+12), font=("Helvetica", 12))
        else:
            canvas.create_text(x, y, text=str(i), font=("Helvetica", 12))
 
    # Draw minute lines
    for i in range(60):
        angle = i * math.pi/30 - math.pi/2
        x1 = WIDTH/2 + 0.8 * WIDTH/2 * math.cos(angle)
        y1 = HEIGHT/2 + 0.8 * HEIGHT/2 * math.sin(angle)
        x2 = WIDTH/2 + 0.9 * WIDTH/2 * math.cos(angle)
        y2 = HEIGHT/2 + 0.9 * HEIGHT/2 * math.sin(angle)
        if i % 5 == 0:
            canvas.create_line(x1, y1, x2, y2, fill="black", width=3)
        else:
            canvas.create_line(x1, y1, x2, y2, fill="black", width=1)
 
    # Draw hour hand
    hour_angle = (hour + minute/60) * math.pi/6 - math.pi/2
    hour_x = WIDTH/2 + 0.5 * WIDTH/2 * math.cos(hour_angle)
    hour_y = HEIGHT/2 + 0.5 * HEIGHT/2 * math.sin(hour_angle)
    canvas.create_line(WIDTH/2, HEIGHT/2, hour_x, hour_y, fill="black", width=6)
 
    # Draw minute hand
    minute_angle = (minute + second/60) * math.pi/30 - math.pi/2
    minute_x = WIDTH/2 + 0.7 * WIDTH/2 * math.cos(minute_angle)
    minute_y = HEIGHT/2 + 0.7 * HEIGHT/2 * math.sin(minute_angle)
    canvas.create_line(WIDTH/2, HEIGHT/2, minute_x, minute_y, fill="black", width=4)
 
    # Draw second hand
    second_angle = second * math.pi/30 - math.pi/2
    second_x = WIDTH/2 + 0.6 * WIDTH/2 * math.cos(second_angle)
    second_y = HEIGHT/2 + 0.6 * WIDTH/2 * math.sin(second_angle)
    canvas.create_line(WIDTH/2, HEIGHT/2, second_x, second_y, fill="red", width=2)
 
    canvas.after(1000, update_clock)
 
update_clock()
root.mainloop()

Friday, 29 September 2023

Python vs PHP For Web Development

Python and PHP programming languages; anything you need to know.


Python and PHP are both popular programming languages used for web development but they have different characteristics and use cases.

Python is a general-purpose programming language. It's popular for its simplicity, easy to learn, and versatility. 
 
It has many uses from website development,  machine learning, data analysis, and artificial intelligence to scientific computing.

 It's syntax is easy to learn and understand making it a great choice for beginners.

PHP (Hypertext preprocessor)
PHP is a server-side scripting language specifically made for web development.

It is widely used for creating dynamic web pages and web applications.

Comparison
1. Syntax
Python has cream and readable syntax making it good for readability and simplicity.
PHP syntax is similar to C but it's more verbose compared to Python.

2. Web development
Both Python and PHP are used for web development. They have different frameworks and ecosystems.

Python has frameworks like Django and Flask which are powerful tools for web development.
PHP have frameworks like Laravel, and Symfony used for web development.

3.  Community
Python has a larger community of developers who contribute to its growth and development.
PHP has a strong community with many resources available online for learning and troubleshooting.

4. Performance
Python's performance is in scientific computing and data analysis due to its extensive libraries.
PHP is good and optimised for web development tasks making it efficient for handling web requests.
 Finally, the choice between Python and PHP depends on your specific project requirements,  personal preferences, and familiarity with the language. Each language has its strengths and weaknesses. It's good to determine it's community support, availability of resources, performance needs and the nature of the project.


Saturday, 10 June 2023

Why You Shoudl Learn Web Development In Python In 2023:15 Compelling Reasons

                                                    photo Canvas


In this post, we are going to explore 13 real-world examples of python in web development, giving examples of well known websites to innovative applications. You will see how python can power diverse and dynamic web projects, and you will learn some tips and tricks along the way.

13 real word examples of python in web development

1    Googleuses python for web crawling, search engine, Gmail, YouTube, and more.

2    Facebook:  

 Which is a big company, uses Python to do things like studying data, making search engines better, and managing their computers.

3    NASA:    NASA (National Aeronautics and Space Administration) which is a state-owned agency of the United
photo Google

 States of America in control of Civil space program using advanced research in aerospace and aeronautics. Python is a computer program that is used for science, processing data, and making things look real.

4    Netflix:    utilizes Python for the majority of its applications, which encompass data analysis, back-end web development, security automation, risk classification, vulnerability analysis, content recommendation analysis, machine learning, and numerous other related tasks.

5    Amazon:    Amazon uses Boto3, a Python-based AWS software development kit, to handle Amazon Elastic Compute Cloud (EC2), Amazon Simple Storage Services (S3), and Amazon DynamoDB.

6    Uber: Python is widely used by Uber for geolocation purposes, mathematical calculations, data management, and creating login functions.

With these, few discussions other big names which use python are;
7    Wikipedia
8    Instagram
9    Pinterest
10    Quora
11    Dropbox
12    Spotify
13    Reddit

Conclusion

Why are they using python?
Why do they utilize Python? Python is a flexible language that possesses great capabilities for various web-related endeavours. This includes constructing websites, creating programs, and offering services, with Python's repository of frameworks, libraries, and tools.

                                                photo courtesy inexturer.com

 It also benefits from having a wide and engaged community that actively aids in its growth and advancements. This article examines 13 examples depicting the practical applications of Python in web development, highlighting different challenges and use cases.

We hope you have learned something new with us and gained some inspiration for your own projects.
Fell free to comment, like, or give feedback. If you have enjoyed this post, don't forget to share with your friends, colleagues. Thanks for reading!


Tuesday, 24 May 2022

How To Make a Smooth Grid Layout Using CSS.

CSS can be used together with HTML to give a good HTML Website and other features. 

CSS is used to style HTML codes and make them attractive.

Without CSS, HTML website together with other programs like apps would be o no attraction at all.
CSS and HTML go hand in hand, and without one , the other would be of no much use.

In this article, I'm going to show you how to create attractive, and smooth user grid using both CSS and HTML.
Below are the codes of HTML register;
<body id="body">
<div id="container" class="container">
<h2>Register here</h2>
<div class="logo" ></div><br><br>

<div class="fields">
<input class="email" type="email" class="email-input" placeholder="Enter Email" ><br>
<input class="username" type="text" class="user-input" placeholder="Enter Username"><br>
<input class="password" type="password" class="pass-input" placeholder="Enter Password"><br>

<input class="password" type="password" class=" pass-input" placeholder="Confirm Password"><br>

<button type="button">Register</button>
</div>

<p>Already have an Account? <span id="login"><a href="index.html" style="color:#fb2525;">Login Here</a></span></p>

</div>


<script>

</script>
</body>
 

  sign in codes;
<body id="body">
<div class="container">
<h2>Login here</h2>
<div class="logo" ></div><br>
<div class="fields">
<input class="username" type="text" class="user-input" placeholder="Enter username"><br>
<input class="password" type="password" class="pass-input" placeholder="Enter password"><br><br>
<button type="button">Login</button>
</div>
<p id="forgot" onclick="Forgot()" >Fogort Password?</p>
<p>Create New Account <span id="register" > <a href="register.html" style="color:#fb2525;"> Here</a></span></p>

</div>


<script>
function Forgot() {
console.log('clicked');
}
</script>
</body>


Below are the codes of CSS;
#body{
margin:0;
padding:0;
background:#cbced1;
background-size: cover;
background-position:center;
font-family: sans-serif;
}
.container{
width: 350px;
height: 450px;
position: absolute;
left: 40%;
top: 2%;
color: #24cea9;
text-align: center;
padding: 60px 35px 35px 35px;
border-radius: 40px;
background: #ecf0f3;
box-shadow: 13px 13px 20px #7e878f,
-13px -13px 20px #e6dede;

}

#container{
width: 350px;
height: 550px;
position: absolute;
left: 40%;
top: 2%;
color: #24cea9;
text-align: center;
padding: 60px 35px 35px 35px;
border-radius: 40px;
background: #ecf0f3;
box-shadow: 13px 13px 20px #7e878f,
-13px -13px 20px #e6dede;
}

.logo{
background: url("bloh.jpg") no-repeat;
width: 70px;
height: 70px;
background-size: 100% 100%;
/* background-color: #fd7213; */
border-radius: 50%;
top: 30%;

margin: auto;
box-shadow: 0px 0px 2px #5f5f5f,
0px 0px 0px 5px #517691,
8px 8px 15px #5f5f5f,
-8px -8px 15px #ffff;
}

.fields{
width: 100%;
padding: 5px 5px 5px 5px;
}
.fields input{
border:none;
outline: none;
background: none;
font-size: 18px;
color: #555;
padding: 20px 40px 20px 35px;
}

.username, .password, .email{
margin-bottom: 10px;
border-radius: 25px;
box-shadow: inset 8px 8px 6px #cbced1,
inset -8px -8px 6px #ffffff;

}


button{
background: #24cea9;
border-radius: 30px;
outline: none;
cursor: pointer;
border: none;
width: 250px;
height: 60px;
font-size:14px;
font-style:normal;
font-weight: bold;
text-align: center;
font-family: 'lato', sans-serif;
color: #fff;
border: none;
box-shadow: inset 3px 3px 4px #49caf6,
inset -3px -3px 3px #ffffff;
/* transition: 0.5s; */
}

button:hover{
background-color: #49caf6;
}
p{
font-size: 14px;

}


You can add more features and make your grind look more attractive.

Sunday, 22 May 2022

Inputs Types In HTML

There are many inputs you can employ when designing HTML codes.

Some of them are radio button, check button, submit button, file upload button, password, login , signup, etc.

You need to use both HTML and CSS so as to come up with a beautiful user interface that is, a good login or sign up interface.

In my codes, I have incorporated both HTML and CSS and my styles looks attractive.
Use this HTML codes;
<div id="input">
<h1>INPUT TYPES IN HTML</h1>
<p>
<label for="Name">Name </label>
<input type="text" id="txtName" required>
</p>
<br>
<p>
<label for="phone">phone </label>
<input type="tel" id="txtphone" required>
</p>
<br>
<label for="email">email </label>

<input type="email" id="txtemail" required>
<br>
<p>
<label for="password">password </label>
<input type="password" id="txtpassword" required>
</p>
<br>
<p>
<label for="checkbox">checkbox </label>
<input type="checkbox" id="checkbox" required>
</p>
<p>
<label for="radio">radio </label>
<input type="radio">
</p>
<p>
<label for="color">color </label>
<input type="color">
</p>
<p>
<label for="file">file </label>
<input type="file" required>
</p>
<p>
<label for="image">image </label>
<input type="image" required>
</p>
<div class="button">
<p>
<!-- -->
<input type="submit" name="Submit" id="Submit" value="Submit">

</p>
</div>
</div>


Use this CSS codes;
body {
background-color: rgb(157, 219, 219);
text-align: center;
}
.button {
color: rgb(13, 54, 236);
}
#Submit {
background: rgb(51, 255, 0);
}
#checkbox {
color: blue;
}

Now, design your interface to look more professional than mine.

You can share your new codes in the comments section below and compare with others.

Have a good coding career.

Friday, 18 February 2022

My Programming Journey And History

Hi dear programmers, I hope you are making your programming career a better one.

In this story, I want to narrate to you how I started as a self-taught programmer has been going.

I started my programming process in November 2020 making it one year in the programming industry.

Most of my teacher's guide has been YouTube, and google. It is a difficult process but at the end, it gives good results.

Since then, I've known how to program different things using Python. I also learned how to develop websites, majorly front-end interface.

You can also do like me.
I now encourage you to gain more skills and experience, since programming is the future.

Saturday, 23 October 2021

How To Add A Background Image To Your HTML website.


 Many programmers and website builders face challenges of inserting a background image to their HTML and CSS  websites. Others struggle a lot in passing through Google videos, and they can't get the best codes to paste direct to their website. 

 Having a good experience in  website development, I'm going to give you the best and straightforward codes which will help you come from these problems.

To place a background image, you need to first identify where to position your image on the website. Second, look for a good image which can fit the whole place. In this case, the image should be very decorative to attract many readers or visitors to your website.

If you are using external CSS, make sure your CSS link is connected with the HTML pages.

<link rel="stylesheet" href="index.css">

After that, give the name of the container using  class="" or id="". The class in CSS is usually used with(.) while Id is used with(#).

At the HTML page, insert this codes.

<div id="home">
</div>

In CSS page, insert your image.

#home {
background-image: url('wapp.jpeg');
background-size: cover;
background-position: center;
min-height: 100%;
height: 500px;
position: relative;
text-align: center;
padding-top: 0;
}

Thank you for visiting me.


Sunday, 10 October 2021

How To Make An Active Download Button Using HTML And CSS.

 


If you are creating a blog or a website, and you want to put downloadable documents, there are ways you can create the download button and link it to your documents.

For the button to work out perfectly, the documents to be downloaded should be in the same folder as the other documents.

The link of the document should now be mounted into the website code e.g. if "post/edit/310299486750145624" is the document link, now the code should be like

href="post/edit/310299486750145624"

create a button like this;

<button class="btn"><i class="fa fa-download"></i> Download</button>


Make sure you position your button at the preferred place.

Then give your button a class so that the program can know what it's going to do.

class="et_pb_button"

The full button code;

<a href="post/edit/310299486750145624" download="newname" target="_blank"
class="et_pb_button" style="color: #1148df;">Download Link</a>

Friday, 8 October 2021

How To Put A Logo At The Center Of Website Using CSS And HTML.

 


In this article, we are going to show you how to align your website logo at the centre of the website.

This involves a very simple HTML codings and styling.

First, you need to have your logo in the same folder as your other images and photos. Make sure your logo is very attractive; usually a logo carries some information about the company or the website.

You can use  or hire somebody to design for you a good logo or apply online like in Fiverr and pay for the quality of the logo.

Now, to put your logo at the right corner of the website, you simply place this code between the body tangs;

<div class="column">
<div class="logo">
<br>
<img src="log.jpg" alt="logo">
</div>
</div>
<body>
</body>

and you are done.

Now, to place the logo at the centre, you simply use the CSS

<style>
.white-box {
width: 100%;
height: 120;
border-radius: 30px 30px 0px 0px;
display: block;
text-align: center;
transform: translateY(-20px);
padding: 4px;
background: #fff;
}
</style>

And that is wow?

Your logo should look like this


Thank you very much for reading this educative blog.

React vs Angular; Front-End Web Development

Angular and React  are two of the most popular Javascript tools for front-end development. React is a Javascript created by Meta...