mirror of
https://github.com/LucasVbr/own-workspace.git
synced 2026-05-13 17:21:58 +00:00
cleaning + POMODORO 🎉
This commit is contained in:
RemiSaurel
+1
-1
@@ -5,7 +5,7 @@
|
|||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
<title>Workspace</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>
|
<noscript>
|
||||||
|
|||||||
+14
-63
@@ -1,28 +1,25 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<header>
|
<div class="pause"></div>
|
||||||
<Welcome/>
|
|
||||||
<h3 id="time"></h3>
|
|
||||||
</header>
|
|
||||||
<to-do-list></to-do-list>
|
<to-do-list></to-do-list>
|
||||||
<div class="ytb" v-show="displayYoutube">
|
<div class="aside">
|
||||||
<iframe width="80%" height="400" src="https://www.youtube-nocookie.com/embed/MCkTebktHVc?autoplay=1&mute=1" title="YouTube video player" frameborder="0"
|
<div class="ytb" v-show="displayYoutube">
|
||||||
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
|
<iframe width="100%" height="388" src="https://www.youtube-nocookie.com/embed/MCkTebktHVc?autoplay=1&mute=1" title="YouTube video player" frameborder="0"
|
||||||
id="youtube_video">
|
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
|
||||||
</iframe>
|
id="youtube_video">
|
||||||
|
</iframe>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<footer>Made with <a href="https://github.com/RemiSaurel/todoapp" target="_blank" class="name">💙</a> by <a href="https://www.linkedin.com/in/r%C3%A9mi-saurel/" target="_blank" class="name">Rémi Saurel</a> </footer>
|
<footer>Made with <a href="https://github.com/RemiSaurel/todoapp" target="_blank" class="name">💙</a> by <a href="https://www.linkedin.com/in/r%C3%A9mi-saurel/" target="_blank" class="name">Rémi Saurel</a> </footer>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Welcome from './components/Welcome.vue'
|
|
||||||
import ToDoList from "@/components/ToDoList";
|
import ToDoList from "@/components/ToDoList";
|
||||||
export default {
|
export default {
|
||||||
name: 'App',
|
name: 'App',
|
||||||
components: {
|
components: {
|
||||||
Welcome,
|
ToDoList,
|
||||||
ToDoList
|
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@@ -31,32 +28,10 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
window.addEventListener("load", () => {
|
|
||||||
clock();
|
|
||||||
|
|
||||||
function clock() {
|
|
||||||
const today = new Date();
|
|
||||||
|
|
||||||
// get time components
|
|
||||||
const hours = today.getHours();
|
|
||||||
const minutes = today.getMinutes();
|
|
||||||
|
|
||||||
//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 time = hour + ":" + minute;
|
|
||||||
|
|
||||||
document.getElementById("time").innerHTML = time;
|
|
||||||
setTimeout(clock, 1000);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400&display=swap');
|
||||||
|
|
||||||
* {
|
* {
|
||||||
font-family: 'Outfit', sans-serif;
|
font-family: 'Outfit', sans-serif;
|
||||||
@@ -71,32 +46,6 @@ body {
|
|||||||
background: -webkit-linear-gradient( 0deg, rgba(255, 253, 226, 1) 0%, rgba(255, 228, 164, 1) 50%, rgba(255, 217, 153, 1) 100%);
|
background: -webkit-linear-gradient( 0deg, rgba(255, 253, 226, 1) 0%, rgba(255, 228, 164, 1) 50%, rgba(255, 217, 153, 1) 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ytb {
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 16px;
|
|
||||||
user-select: none;
|
|
||||||
position: relative;
|
|
||||||
padding-bottom: 56.25%; /* 16:9, for an aspect ratio of 1:1 change to this value to 100% */
|
|
||||||
}
|
|
||||||
|
|
||||||
iframe{
|
|
||||||
position: absolute;
|
|
||||||
top: 5%;
|
|
||||||
left: 20%;
|
|
||||||
width: 60%;
|
|
||||||
height: 60%;
|
|
||||||
border-radius: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-right: 10vw;
|
|
||||||
margin-left: 10vw;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
@@ -104,8 +53,10 @@ footer {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#time {
|
.ytb {
|
||||||
font-size: 28px;
|
margin-left: 32px;
|
||||||
|
margin-right: 32px;
|
||||||
|
margin-top: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* TEXT UNDERLINE */
|
/* TEXT UNDERLINE */
|
||||||
|
|||||||
@@ -0,0 +1,218 @@
|
|||||||
|
<template>
|
||||||
|
<div class="pomodoro">
|
||||||
|
<div id="dot-container">
|
||||||
|
<span class="dot"></span>
|
||||||
|
<span class="dot"></span>
|
||||||
|
<span class="dot"></span>
|
||||||
|
<span class="dot"></span>
|
||||||
|
</div>
|
||||||
|
<div id="message">
|
||||||
|
<div v-if="this.isRestingTime">
|
||||||
|
Pause time 🎉
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
Work time 📚
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="time">
|
||||||
|
<span id="minutes">{{minutes}}</span>
|
||||||
|
<span id="colon">:</span>
|
||||||
|
<span id="seconds">{{seconds}}</span>
|
||||||
|
</div>
|
||||||
|
<div id="params">
|
||||||
|
<div id="presetTime">
|
||||||
|
<button @click="setMinutes(25)">25'</button>
|
||||||
|
<button @click="setMinutes(45)">45'</button>
|
||||||
|
</div>
|
||||||
|
<div id="startStop">
|
||||||
|
<button @click="startSession" id="start">▶️</button>
|
||||||
|
<button @click="pauseSession" id="pause" disabled>⏸</button>
|
||||||
|
<button @click="resetSession" id="reset">🔄</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const MINUTES = 25;
|
||||||
|
const SECONDS = 0;
|
||||||
|
const SHORT_PAUSE = 5;
|
||||||
|
const LONG_PAUSE = 30;
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "Pomodoro",
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
minutes: MINUTES,
|
||||||
|
seconds: SECONDS,
|
||||||
|
sessionStarted: false,
|
||||||
|
nbSessionsFinished: 0,
|
||||||
|
isRestingTime: false,
|
||||||
|
customTimer: MINUTES
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setMinutes(value) {
|
||||||
|
this.minutes = value.toString();
|
||||||
|
this.customTimer = value;
|
||||||
|
},
|
||||||
|
startSession() {
|
||||||
|
if (!this.sessionStarted) {
|
||||||
|
this.countDownTimer();
|
||||||
|
this.sessionStarted = true;
|
||||||
|
}
|
||||||
|
if (!this.isRestingTime) {
|
||||||
|
this.enableButton("pause");
|
||||||
|
}
|
||||||
|
this.disableButton("start");
|
||||||
|
let all = document.querySelectorAll("#presetTime button");
|
||||||
|
for (let el of all) { el.disabled = true; }
|
||||||
|
},
|
||||||
|
pauseSession() {
|
||||||
|
this.sessionStarted = false;
|
||||||
|
this.disableButton("pause");
|
||||||
|
this.enableButton("start");
|
||||||
|
clearTimeout(this.timeout);
|
||||||
|
},
|
||||||
|
disableButton(buttonId) {
|
||||||
|
let button = document.getElementById(buttonId);
|
||||||
|
button.disabled = true;
|
||||||
|
},
|
||||||
|
enableButton(buttonId) {
|
||||||
|
let button = document.getElementById(buttonId);
|
||||||
|
button.disabled = false;
|
||||||
|
},
|
||||||
|
resetSession() {
|
||||||
|
this.sessionStarted = false;
|
||||||
|
this.minutes = this.customTimer;
|
||||||
|
this.seconds = SECONDS;
|
||||||
|
this.prettyTime();
|
||||||
|
clearTimeout(this.timeout);
|
||||||
|
let all = document.querySelectorAll("#presetTime button, #start");
|
||||||
|
for (let el of all) { el.disabled = false; }
|
||||||
|
this.disableButton("pause")
|
||||||
|
},
|
||||||
|
countDownTimer: function () {
|
||||||
|
if (this.minutes === "00" && this.seconds === "00") {
|
||||||
|
if (this.isRestingTime) {
|
||||||
|
this.isRestingTime = false;
|
||||||
|
this.resetSession();
|
||||||
|
} else {
|
||||||
|
this.nbSessionsFinished++;
|
||||||
|
if (this.nbSessionsFinished === 4) {
|
||||||
|
this.setupPauseTimer(LONG_PAUSE);
|
||||||
|
this.nbSessionsFinished = 0;
|
||||||
|
} else {
|
||||||
|
this.setupPauseTimer(SHORT_PAUSE);
|
||||||
|
}
|
||||||
|
this.changeDots();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.timeout = setTimeout(() => {
|
||||||
|
this.minutes = parseInt(this.minutes);
|
||||||
|
this.seconds = parseInt(this.seconds);
|
||||||
|
if (this.seconds === 0) {
|
||||||
|
if (this.minutes > 0) {
|
||||||
|
this.minutes -= 1;
|
||||||
|
this.seconds = 59;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.seconds -= 1;
|
||||||
|
}
|
||||||
|
this.prettyTime()
|
||||||
|
this.countDownTimer()
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
changeDots() {
|
||||||
|
let dots = document.querySelectorAll(".dot");
|
||||||
|
for (let dot of dots) {
|
||||||
|
dot.classList.remove("active");
|
||||||
|
}
|
||||||
|
for (let i = 0; i < this.nbSessionsFinished; i++) {
|
||||||
|
dots[i].classList.add("active");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setupPauseTimer(minutes){
|
||||||
|
this.isRestingTime = true;
|
||||||
|
this.sessionStarted = false;
|
||||||
|
this.enableButton("start");
|
||||||
|
this.disableButton("reset")
|
||||||
|
this.disableButton("pause")
|
||||||
|
this.minutes = minutes.toString();
|
||||||
|
this.seconds = 0;
|
||||||
|
this.prettyTime();
|
||||||
|
},
|
||||||
|
prettyTime () {
|
||||||
|
if (this.minutes < 10) {
|
||||||
|
this.minutes = "0" + this.minutes;
|
||||||
|
}
|
||||||
|
if (this.seconds < 10) {
|
||||||
|
this.seconds = "0" + this.seconds;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.prettyTime();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.pomodoro {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#time {
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: 8vw;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#startStop > button{
|
||||||
|
font-size: 32px;
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#params {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#params #presetTime > button {
|
||||||
|
margin: 8px;
|
||||||
|
font-size: 24px;
|
||||||
|
width: 62px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#seconds {
|
||||||
|
display: inline-block;
|
||||||
|
width: 10vw;
|
||||||
|
}
|
||||||
|
#minutes {
|
||||||
|
display: inline-block;
|
||||||
|
width: 10vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#message {
|
||||||
|
font-size: 1.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot {
|
||||||
|
height: 25px;
|
||||||
|
width: 25px;
|
||||||
|
background-color: lightslategrey;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin: 12px 4px 12px 4px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
height: 25px;
|
||||||
|
width: 25px;
|
||||||
|
background-color: mediumseagreen;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin: 12px 4px 12px 4px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
+43
-18
@@ -1,25 +1,37 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="todolist">
|
<div class="container">
|
||||||
<input @keydown.enter="addItem(item)" type="text" name="todo" id="todo_input" v-model="item"
|
<div id="todolist">
|
||||||
placeholder="Ex: Finir exos maths">
|
<div>
|
||||||
<div id="liste">
|
<input @keydown.enter="addItem(item)" type="text" name="todo" id="todo_input" v-model="item"
|
||||||
<div v-for="item in items" :key="item" class="item">
|
placeholder="Ex: Finir exos maths">
|
||||||
<div id="text">
|
</div>
|
||||||
{{item}}
|
<div id="liste">
|
||||||
</div>
|
<div v-for="item in items" :key="item" class="item">
|
||||||
<div @click="removeItem(item)" id="trash">
|
<div id="text">
|
||||||
🗑
|
{{item}}
|
||||||
|
</div>
|
||||||
|
<div @click="removeItem(item)" id="trash">
|
||||||
|
🗑
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div id="pomodoro">
|
||||||
|
<pomodoro></pomodoro>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
|
import Pomodoro from "@/components/Pomodoro";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "ToDoList",
|
name: "ToDoList",
|
||||||
components: {},
|
components: {
|
||||||
|
Pomodoro
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
item: "",
|
item: "",
|
||||||
@@ -34,7 +46,9 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
removeItem(item) {
|
removeItem(item) {
|
||||||
this.items = this.items.filter(e => e !== item)
|
this.items = this.items.filter(e =>
|
||||||
|
e !== item
|
||||||
|
)
|
||||||
this.item = ""
|
this.item = ""
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -42,13 +56,26 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
#pomodoro {
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
#todolist {
|
#todolist {
|
||||||
text-align: center;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-left: 32px;
|
||||||
|
width: 40%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#todo_input {
|
#todo_input {
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
width: 60%;
|
width: 100%;
|
||||||
|
height: 52px;
|
||||||
padding: 12px 20px;
|
padding: 12px 20px;
|
||||||
margin: 8px 0;
|
margin: 8px 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@@ -72,13 +99,11 @@ export default {
|
|||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 10px 10px 10px 10px;
|
padding: 12px 22px 12px 22px;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
min-width: 82px;
|
min-width: 82px;
|
||||||
max-width: 50vw;
|
max-width: 40vw;
|
||||||
box-shadow: rgba(111, 111, 111, 0.2) 0px 7px 29px 0px;
|
box-shadow: rgba(111, 111, 111, 0.2) 0px 7px 29px 0px;
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,19 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="hello">
|
|
||||||
<h1>ToDoList</h1>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'Welcome',
|
|
||||||
props: {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.hello {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Reference in New Issue
Block a user