Typos + clean up

README.md

@@ -3,8 +3,8 @@
 ## Installation
 - Clone the repo
 - Go to chrome://extensions
-- Enable the developer options if not already enabled
-- Click "Load unpacked extension..." (FR: "Charger l'extension non empaquetée")
+- Enable the *developer options* if it's not already
+- Click *Load unpacked extension...* (FR: "Charger l'extension non empaquetée")
 - Navigate and select the repo's root directory
 
 
@@ -26,7 +26,7 @@ npm run lint
 
 #### Configuration
 
-The config is in the file ``.eslintrc.json``
+The main config file is ``.eslintrc.json``
 
 - [Disallow semicolons instead of ASI](https://eslint.org/docs/rules/semi)
 - [Use of single quotes wherever possible](https://eslint.org/docs/rules/quotes)
@@ -35,13 +35,13 @@ The config is in the file ``.eslintrc.json``
 
 ## Things to improve
 - [x] Dark mode
-- [ ] The app needs an icon because for now we use the default google one...
+- [ ] The app needs an icon because as of now we are using the default google one...
 - [x] Install a linter on the project so that we all can collaborate without having so many useless changes to review
 - [ ] Animation on the YouTube Homepage to show where the thumbnail is updated. Like a scale up scale down on the thumbnail for example.
 - [ ] Drag and drop thumbnail should work. For now the integration is done and if you hover the dropzone with a file, you'll see the good animation. But once you release the click, it does not work. It's a small thing to fix.
-- [x] People also would like to be able to use this extension on the subsribe feed on YouTube. And it is really a good feature that needs to be done
+- [x] People would also like to be able to use this extension on the *subscribe feed* of YouTube. And it is really a good feature that needs to be done
 - [x] Integrating the V2.0 of the design made by BastiUI ([Figma Link](https://www.figma.com/file/lceF92oVJ4QRAbnfddO5FL/BastiUi-%E2%80%A2-PrevYou?node-id=116%3A56))
-- [ ] Creating tests ? (even if @liior after many tried realised that it was maybe not that interesting to do. Follow the discussion [here](https://twitter.com/LiiorC/status/1378610942498508802))
+- [ ] Creating tests ? (even if @liior after many tried, realised that it may not be that good of an idea. Follow the discussion [here](https://twitter.com/LiiorC/status/1378610942498508802))
 
 
 ## Credits

popup.js

@@ -18,16 +18,15 @@ const eyesPupils = document.querySelectorAll('.js-animated-eyes')
 // =============================================
 // DARK/LIGHT MODE handler
 
-// Once the page loaded, check if the Dark Mode is activated with a function that 
-// return 'on' or null depending of the existence of a 'darkMode' key on LocalStorage
+// Once the page is loaded, check if the Dark Mode is activated with a function that 
+// returns 'on' or null depending on the existence of a 'darkMode' key on LocalStorage
 window.onload = () =>{ 
     if ( isDarkModeOn() == 'on' ){ 
         setTimeout(darkMode,
             300)
     }
 } 
 
-
 darkModeBtn.addEventListener( 'click', () => {
     if ( isDarkModeOn() == null ) {
         darkMode()
@@ -38,12 +37,11 @@ darkModeBtn.addEventListener( 'click', () => {
     }
 })
 
-//function that check the existence of the key 'darkMode' on LocalStorage
+// Function that checks the existence of the key 'darkMode' on LocalStorage
 function isDarkModeOn(){
     return localStorage.getItem( 'darkMode' ) ? 'on' : null  
 }
 
-
 function darkMode(){
     darkModeBtn.innerHTML = 
         '<svg width="43" height="43" viewBox="0 0 43 43" fill="none" xmlns="http://www.w3.org/2000/svg">'
@@ -55,7 +53,6 @@ function darkMode(){
     switchProperties( styleToChange )
 }
 
-
 function lightMode(){
     darkModeBtn.innerHTML = 
         '<svg width="19" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">'
@@ -88,7 +85,7 @@ function initInputs() {
     chrome.storage.local.get('thumbnailProperties', (result) => {
         var storedThumbnail = result.thumbnailProperties
 
-        // If there's valid data stored
+        // If valid data is stored
         if (typeof (storedThumbnail) !== 'undefined') {
             console.log(storedThumbnail)
             titleInput.value = storedThumbnail.title || null
@@ -157,18 +154,17 @@ async function launchScript(shuffle = false) {
         function: findCard,
     })
 
-    // everything went smooth so we can close the popup to let the user enjoy
+    // Everything went smooth so we can close the popup to let the user enjoy
     window.close()
     chrome.storage.local.remove(['errorMessage'])
 }
 
-
 thumbnailInput.addEventListener('change', () => {
     const file = thumbnailInput.files[0]
     const reader = new FileReader()
 
     reader.addEventListener('load', function () {
-        // convert image file to base64 string
+        // Convert image file to base64 string
         videoThumbnail = reader.result
         previewVideo.src = reader.result
     }, false)
@@ -197,9 +193,8 @@ resetBtn.addEventListener('click', () => {
     refreshApp()
 })
 
-
 function findCard() {
-    // Select randomly a card between a range
+    // Select a random a card in between a range
     let cardPositionIndex = 1
 
     const activeScreen = document.querySelector('[role="main"]')
@@ -244,7 +239,7 @@ function findCard() {
     })
 }
 
-// Removes the errors from storage and from the display
+// Remove the errors from storage and from the display
 function removeError() {
     errorMessageSpan.textContent = ''
     errorMessageSpan.style.display = 'none'
@@ -270,21 +265,20 @@ function refreshApp() {
 // =============================================
 // ANIMATED EYES
 
-//First, we find the eyes position and their center :
+//First, we find the eyes's positions and their center :
 let eyeCoord = headerEye.getBoundingClientRect()
 let centerOfEyeX = Math.round(( ( eyeCoord.right - eyeCoord.left ) / 2 ) + eyeCoord.left)
 let centerOfEyeY = Math.round(( ( eyeCoord.bottom - eyeCoord.top ) / 2 ) + eyeCoord.top)
 
 
-//on mousemove, we locate the mouse position and compare its X & Y coordinates to eyes' center.
-// let=eyeDirection indicate the eyes direction in a "North, South, South East etc..." mode
+// On mousemove, we locate the mouse position and compare its X & Y coordinates to the eyes's center.
+// let=eyeDirection indicates the eyes's direction with cardinal directions
 
 document.addEventListener('mousemove', (e) =>{
     let mouseX = e.clientX
     let mouseY = e.clientY
     let eyeDirection
 
-
     eyeDirection = mouseY < centerOfEyeY ? 'N' : 'S'
     eyeDirection += mouseX < centerOfEyeX ? 'W' : 'E'
 
@@ -300,7 +294,7 @@ document.addEventListener('mousemove', (e) =>{
         eyeDirection = 'C'
     }
 
-    // due "North", "South" etc ... are calculate on an approximative direction ( eyes' center +/- 10 px )
+    // Caridnal directions are calculated on an approximative direction ( eyes's center +/- 10px )
     function approx(nbToCompare, nbToApprox){
         return (  nbToApprox-10 < nbToCompare && nbToCompare < nbToApprox + 10)
     }

style.css

@@ -5,7 +5,6 @@
 }
 
 :root {
-
   --grey: #A7A3C2;
   --grey-light: #D5CEEA;
   --grey-lighter: #F8F5FF;
@@ -14,10 +13,10 @@
 
   --btnColor: #6116FF;
   --btnBorder: #24008C;
-  --bg: #FFFFFF;            /*Dark/Light Mode :*/
-  --btnBg: #F8F5FF;         /* these custom properties are the colors that changes*/
-  --formText: #000000;      /* when we switch from one mod to another */
-  --headerColor : #161827;  /* JS is binded to them for easy switch*/
+  --bg: #FFFFFF;            /* Dark/Light Mode : */
+  --btnBg: #F8F5FF;         /* These custom properties are the colors that change */
+  --formText: #000000;      /* when we switch from one mode to another */
+  --headerColor : #161827;  /* we binded some JS to them to facilitate the switch */
 }
 
 body {
@@ -86,16 +85,14 @@ body {
     animation: diceShaking 150ms infinite alternate linear;
 }
 
-
 .py-button:hover .py-dice {
     transform: translate(50%);
 }
 
 .py-dice:hover {
-    transform: translateX(0%)!important;
+    transform: translateX(0%) !important;
 }
 
-
 .py-button-icon {
     margin-right: 12px;
 }
@@ -183,8 +180,7 @@ body {
 input {
     -webkit-appearance: none;
     -moz-appearance: none;
-  }
-
+}
 
 .py-form-group {
     display: block;
@@ -234,12 +230,12 @@ input {
 }
 
 .py-form-file {
-	width: 0.1px;
-	height: 0.1px;
-	opacity: 0;
-	overflow: hidden;
-	position: absolute;
-	z-index: -1;
+    width: 0.1px;
+    height: 0.1px;
+    opacity: 0;
+    overflow: hidden;
+    position: absolute;
+    z-index: -1;
 }
 
 .py-error {
@@ -445,8 +441,8 @@ input {
     transition: .4s;
 }
 
-input:checked + .slider {background-color: var(--btnColor);}  
-input:focus + .slider {box-shadow: 0 0 1px var(--btnColor);}  
+input:checked + .slider {background-color: var(--btnColor);}
+input:focus + .slider {box-shadow: 0 0 1px var(--btnColor);}
 input:checked + .slider:before {transform: translateX(16px);}
 
 /* //////// */