Prompt Details
Model
Chat - GPT-3.5 (gpt-3.5-turbo)
Token size
53 ($0.00010 / call)
Example input
To begin, simply duplicate and insert the prompt. Make use of the new template as a starting point for crafting your own unique story!
Example output
Sure! Here's an example of a streamlined and simple code that displays the time in a digital clock format using HTML, CSS, and JavaScript:
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="clock">
<span id="time"></span>
<button id="reset">Reset</button>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS (style.css):
```css
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: Arial, sans-serif;
}
.clock {
text-align: center;
}
#time {
font-size: 4rem;
margin-bottom: 1rem;
}
#reset {
background-color: #ccc;
border: none;
padding: 0.5rem 1rem;
cursor: pointer;
font-size: 1rem;
color: #333;
}
```
JavaScript (script.js):
```javascript
function updateTime() {
var date = new Date();
var hours = formatTime(date.getHours());
var minutes = formatTime(date.getMinutes());
var seconds = formatTime(date.getSeconds());
var time = hours + ":" + minutes + ":" + seconds;
document.getElementById("time").textContent = time;
}
function formatTime(time) {
return time < 10 ? "0" + time : time;
}
function resetClock() {
document.getElementById("time").textContent = "00:00:00";
}
setInterval(updateTime, 1000);
document.getElementById("reset").addEventListener("click", resetClock);
```
In this code, the HTML structure consists of a `div` element with the class "clock" that contains a `span` element with the id "time" to display the current time, and a `button` element with the id "reset" to reset the clock.
The CSS styles center the clock vertically and horizontally, and provide a simple, modern, and minimalist design.
The JavaScript code defines two functions: `updateTime()` to update the time every second and display it in the clock, and `resetClock()` to reset the clock to "00:00:00" when the reset button is clicked. The `setInterval` function is used to call the `updateTime()` function every second.
Make sure to save the HTML, CSS, and JavaScript code in separate files named "index.html", "style.css", and "script.js", respectively, in the same directory. Then, open the "index.html" file in a web browser to see the digital clock with a reset button.
Instant access
Commercial use
Money‑backBy purchasing this prompt, you agree to our terms of service
23
Views
GPT-3.5-TURBO
🔀 Create the website of your dreams! With your customizable and functional Digital Clock at any time.
🔥 You will have everything you need to create it, such as your own html, css and javascript code.
✨⚡️ Workable for any design, GET IT NOW!
...more
Added over 1 month ago
