First commit :)

This commit is contained in:
RemiSaurel
2022-06-05 01:02:07 +02:00
parent 8c22caa124
commit 04417476b3
4 changed files with 171 additions and 69 deletions
+59 -11
View File
@@ -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>