The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> tittle at center and background text become red, please help
choy96
post Mar 30 2023, 02:14 AM
Post #1





Group: Members
Posts: 4
Joined: 21-October 21
Member No.: 28,150



i have the html code to make a counter with google form by chatgpt, but i can't make the tittle move to center and the counter text background make become red. picture as below is i going to make it be.
https://farmstatus.blogspot.com/2023/03/blog-post.html

html i was using now is below

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Countdown Timer with Google Form</title>
<script>
// Set the date we're counting down to
var countDownDate = new Date("April 1, 2023 00:00:00").getTime();

// Update the countdown every 1 second
var x = setInterval(function() {

// Get the current date and time
var now = new Date().getTime();

// Calculate the time remaining
var timeLeft = countDownDate - now;

// Calculate days, hours, minutes and seconds left
var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
var hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

// Display the countdown in an HTML element
document.getElementById("countdown").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";

// If the countdown is finished, display a message
if (timeLeft < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "EXPIRED";
}
}, 1000);
</script>
</head>
<body>
<h1>Countdown Timer</h1>
<p>Countdown to April 1, 2023:</p>
<p id="countdown"></p>

<!-- Google Form Embed Code -->
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSd8ahWie_F2H3S5wfi3q9yTR8u4oJQzXdK7dOx4xneKt6PZeg/viewform?embedded=true" width="640" height="1418" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
<!-- Replace the "src" URL with the URL of your own Google Form. -->

<!-- Script to fill in name, company name, contact number, and email address -->
<script>
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('entry.XXXXXXXX').value = 'John Doe'; // Replace 'entry.XXXXXXXX' with the ID of the name field in your Google Form, and 'John Doe' with the default name.
document.getElementById('entry.XXXXXXXX').value = 'ABC Company'; // Replace 'entry.XXXXXXXX' with the ID of the company name field in your Google Form, and 'ABC Company' with the default company name.
document.getElementById('entry.XXXXXXXX').value = '1234567890'; // Replace 'entry.XXXXXXXX' with the ID of the contact number field in your Google Form, and '1234567890' with the default contact number.
document.getElementById('entry.XXXXXXXX').value = 'johndoe@example.com'; // Replace 'entry.XXXXXXXX' with the ID of the email address field in your Google Form, and 'johndoe@example.com' with the default email address.
});
</script>
</body>
</html>

Please help, thanks in advance.

This post has been edited by choy96: Mar 30 2023, 02:21 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Mar 30 2023, 04:52 AM
Post #2


Advanced Member
****

Group: Members
Posts: 194
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743



Hi there choy96,

add this to the head section of the document...

CODE

<style media="screen">
h1, p {
    text-align: center;
    }
#countdown {
    width: 11em;
    padding: 0.4em;
    margin: auto;
    background-color: #f00;
    font-size: 1.25em;
    font-weight: bold;
}
iframe {
    display: block;
    margin: auto;
}
</style>


coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Mar 30 2023, 10:31 AM
Post #3


Advanced Member
****

Group: Members
Posts: 194
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743



Hi there choy96,

if you're interested, check out this attachment...

Attached File  choy96.zip ( 2.3k ) Number of downloads: 67

...I've tidied up your page somewhat.

coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
choy96
post Mar 31 2023, 02:31 AM
Post #4





Group: Members
Posts: 4
Joined: 21-October 21
Member No.: 28,150



awosome ! straight copy your zip file then can use it, very good . thanks very much

This post has been edited by choy96: Mar 31 2023, 02:32 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Mar 31 2023, 03:13 AM
Post #5


Advanced Member
****

Group: Members
Posts: 194
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743




No problem, you're very welcome. IPB Image

coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2024 - 01:46 AM