bluehost

Showing posts with label tkinter. Show all posts
Showing posts with label tkinter. 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()

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.

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