Skip to content

Day10 #41

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Day10 #41

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
da6fc7e
Refactoring with vue
JPS09 Mar 21, 2022
c0fca5f
Translating further into Vue and commenting out main part for now
JPS09 Mar 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
167 changes: 103 additions & 64 deletions src/components/days/individual_days/Day10.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,77 +1,116 @@
<template>
<div class="inbox">
<div class="item">
<input type="checkbox" />
<p>This is an inbox layout.</p>
</div>
<div class="item">
<input type="checkbox" />
<p>Check one item</p>
</div>
<div class="item">
<input type="checkbox" />
<p>Hold down your Shift key</p>
</div>
<div class="item">
<input type="checkbox" />
<p>Check a lower item</p>
</div>
<div class="item">
<input type="checkbox" />
<p>Everything in between should also be set to checked</p>
</div>
<div class="item">
<input type="checkbox" />
<p>Try to do it without any libraries</p>
</div>
<div class="item">
<input type="checkbox" />
<p>Just regular JavaScript</p>
</div>
<div class="item">
<input type="checkbox" />
<p>Good Luck!</p>
</div>
<div class="item">
<input type="checkbox" />
<p>Don't forget to tweet your result!</p>
<div
:class="checkbox.class"
v-for="checkbox in checkboxes"
:key="checkbox.id"
@click="checkShift($event)"
>
<input :type="checkbox.type" :id="checkbox.id" />
<p>{{ checkbox.paragraphContent }}</p>
</div>
</div>
</template>

<script>
const checkboxes = document.querySelectorAll("input[type=checkbox]");

let lastChecked;

function checkShift(e) {
// variable to store the shift key boolean value
let shiftKey = e.shiftKey;
// Flag to help us determine if a checkbox is inBetween two checkboxes
let inBetween = false;
export default {
data() {
return {
checkboxes: [
{
class: "item",
type: "checkbox",
paragraphContent: "This is an inbox layout.",
id: 1,
},
{
class: "item",
type: "checkbox",
paragraphContent: "Check one item",
id: 2,
},
{
class: "item",
type: "checkbox",
paragraphContent: "Hold down your Shift key",
id: 3,
},
{
class: "item",
type: "checkbox",
paragraphContent: "Check a lower item",
id: 4,
},
{
class: "item",
type: "checkbox",
paragraphContent:
"Everything in between should also be set to checked",
id: 5,
},
{
class: "item",
type: "checkbox",
paragraphContent: "Try to do it without any libraries",
id: 6,
},
{
class: "item",
type: "checkbox",
paragraphContent: "Just regular JavaScript",
id: 7,
},
{
class: "item",
type: "checkbox",
paragraphContent: "Good Luck!",
id: 8,
},
{
class: "item",
type: "checkbox",
paragraphContent: "Don't forget to tweet your result!",
id: 9,
},
],
inBetween: false,
shiftKey: false,
lastChecked: false,
};
},
methods: {
checkShift(event) {
// variable to store the shift key boolean value
this.shiftKey = event.shiftKey;

// Checking if the shiftKey is pressed and that the current checkbox is checked
if (shiftKey && this.checked) {
// Iterating over the checkboxes
checkboxes.forEach((checkbox) => {
// Check if the current checkbox is one the 'begin' or the 'end'
if (checkbox === this || checkbox === lastChecked) {
// Reverse the value of inBetween since it's not inBetween the start and end
inBetween = !inBetween;
// Checking if the shiftKey is pressed and that the current checkbox is checked
if (this.shiftKey && this.checked) {
// Iterating over the checkboxes
// Need to translate that later
// checkboxes.forEach((checkbox) => {
// // Check if the current checkbox is one the 'begin' or the 'end'
// if (checkbox === this || checkbox === this.lastChecked) {
// // Reverse the value of inBetween since it's not inBetween the start and end
// this.inBetween = !this.inBetween;
// }
// // if the current checkbox is inBetween, check it.
// if (this.inBetween) {
// checkbox.checked = true;
// }
// });
//TODO = Find a way to reverse this in a way that when the shift key is pressed on a checked box, it will make them all unchecked
}
// if the current checkbox is inBetween, check it.
if (inBetween) {
checkbox.checked = true;
}
});
this.lastChecked = this;
},
},
};
// const checkboxes = document.querySelectorAll("input[type=checkbox]");

//TODO = Find a way to reverse this in a way that when the shift key is pressed on a checked box, it will make them all unchecked
}
lastChecked = this;
}
checkboxes.forEach((checkbox) =>
checkbox.addEventListener("click", checkShift)
);
// let lastChecked;

// checkboxes.forEach((checkbox) =>
// checkbox.addEventListener("click", checkShift)
// );
</script>

<style scoped>
Expand Down