mirror of
https://github.com/LucasVbr/own-workspace.git
synced 2026-05-19 10:53:19 +00:00
First commit :)
This commit is contained in:
+59
-11
@@ -1,28 +1,76 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<img alt="Vue logo" src="./assets/logo.png">
|
||||
<HelloWorld msg="Welcome to Your Vue.js App"/>
|
||||
<header>
|
||||
<Welcome/>
|
||||
<h3 id="time"></h3>
|
||||
</header>
|
||||
<to-do-list></to-do-list>
|
||||
<div class="ytb">
|
||||
<iframe width="80%" height="400" src="https://www.youtube.com/embed/MCkTebktHVc?autoplay=1&mute=1" title="YouTube video player" frameborder="0"
|
||||
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture">
|
||||
</iframe>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HelloWorld from './components/HelloWorld.vue'
|
||||
|
||||
import Welcome from './components/Welcome.vue'
|
||||
import ToDoList from "@/components/ToDoList";
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
HelloWorld
|
||||
Welcome,
|
||||
ToDoList
|
||||
}
|
||||
}
|
||||
window.addEventListener("load", () => {
|
||||
clock();
|
||||
|
||||
function clock() {
|
||||
const today = new Date();
|
||||
|
||||
// get time components
|
||||
const hours = today.getHours();
|
||||
const minutes = today.getMinutes();
|
||||
const seconds = today.getSeconds();
|
||||
|
||||
//add '0' to hour, minute & second when they are less 10
|
||||
const hour = hours < 10 ? "0" + hours : hours;
|
||||
const minute = minutes < 10 ? "0" + minutes : minutes;
|
||||
const second = seconds < 10 ? "0" + seconds : seconds;
|
||||
|
||||
const time = hour + ":" + minute + ":" + second;
|
||||
|
||||
document.getElementById("time").innerHTML = time;
|
||||
setTimeout(clock, 1000);
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300&display=swap');
|
||||
|
||||
* {
|
||||
background-color: #FFF5DE;
|
||||
font-family: 'Outfit', sans-serif;
|
||||
}
|
||||
|
||||
.ytb {
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
margin-top: 60px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
margin-right: 10vw;
|
||||
margin-left: 10vw;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#time {
|
||||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user