Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE>
- <html>
- <div class = 'entire'>
- <p class = 'txt'>Time & Date</p>
- <div>
- <button class = 'butone' onclick = 'myTime()'>Time</button>
- </div>
- <p id = 'output'></p>
- </div>
- <style>
- /* Body */
- .txt {
- font-family: sans-serif;
- position: relative;
- left: 640px;
- font-size: 30px;
- }
- .entire {
- padding: 20px 20px;
- border: 2px solid #000000;
- border-radius: 25px;
- }
- /* Flexbox */
- .flex {
- display: flex;
- margin: 1px;
- }
- .row {
- flex-direction: row;
- width: 100%;
- flex-wrap: wrap;
- display: flex;
- }
- .colone {
- flex: 1;
- display: flex;
- flex-direction: column;
- flex-basis: 100%;
- }
- /* Buttons */
- .butone {
- padding: 16px 16px;
- border-radius: 25px;
- background-color: #FFFFFF;
- border: 2px solid #000000;
- font-size: 15px;
- }
- .butone:hover {
- background-color: #000000;
- cursor: pointer;
- color: #FFFFFF;
- }
- </style>
- <script>
- function myTime() {
- var t = new Date;
- var y = new Date;
- document.getElementById('output').innerHTML = `The current time is ${t.getUTCHours()}:${y.getMinutes()}`;
- }
- </script>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement