ColmanDevClubORG · danielmargolin · Mar 13, 2024 · Mar 13, 2024 · Mar 13, 2024 · Mar 13, 2024
diff --git a/amosZohar b/amosZohar
diff --git a/benda b/benda
diff --git a/evyatarBabay/firstTask b/evyatarBabay/firstTask
diff --git a/hinoy/Fylo Project - Week 1/fylo-solution-main/Enhancing the Fylo project.pdf b/hinoy/Fylo Project - Week 1/fylo-solution-main/Enhancing the Fylo project.pdf
diff --git a/hinoy/Fylo Project - Week 1/fylo-solution-main/LICENSE b/hinoy/Fylo Project - Week 1/fylo-solution-main/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Ekaterine (Catherine) Mitagvaria
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/hinoy/Fylo Project - Week 1/fylo-solution-main/README.md b/hinoy/Fylo Project - Week 1/fylo-solution-main/README.md
@@ -0,0 +1,50 @@
+![Fylo data storage component](https://github.com/catherineisonline/fylo-data-storage-component-frontendmentor/blob/main/images/project-preview.png?raw=true)
+
+
+<h1 align="center">Fylo data storage component</h1>
+
+<div align="center">
+
+[Live](https://catherineisonline.github.io/fylo-data-storage-component-frontendmentor/)
+| [Solution](https://www.frontendmentor.io/solutions/fylo-data-storage-component-gpaJOs4EP)
+| [Challenge](https://www.frontendmentor.io/challenges/fylo-data-storage-component-1dZPRbV5n)
+
+Solution for a challenge from [frontendmentor.io](https://www.frontendmentor.io/)
+</div>
+
+
+
+## About The Project
+
+This component has some interesting CSS challenges in the design. If you're looking to test your CSS skills, this will be a great project for you!
+The main challenge is to build out this data storage component and get it looking as close to the design as possible.
+You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
+
+Your users should be able to:
+1. View the optimal layout depending on their device's screen size</p>
+
+I do not have access to the Figma sketch so the design is not pixel perfect.</p>
+
+
+
+
+## Built with 
+
+- Semantic HTML5 markup
+- CSS custom properties
+- Grid
+- Desktop-first workflow
+
+## What I learned
+
+This project helped me to practice some grid as it's a little difficult for me to make the grid responsive. My goal is to make grid change from 1 row to 2 rows without using media query however I lack enough experience in this. I decided to finish this project as it is and deepen my knowledge of the grid in another project that I plan to make, specifically - a photography portfolio website. 
+
+
+## Useful resources
+
+1. [Figma](https://www.figma.com/) - Paste your design image to check the size of containers, width, etc.
+2. [Perfect Pixel](https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi) - Awesome Chrome extension that helps you to match the pixels of the provided design.
+
+## Acknowledgments
+
+A big thank you to anyone providing feedback on my [solution](https://www.frontendmentor.io/solutions/fylo-data-storage-component-gpaJOs4EP). It definitely helps to find new ways to code and find easier solutions! 
diff --git a/hinoy/Fylo Project - Week 1/fylo-solution-main/images/bg-desktop.png b/hinoy/Fylo Project - Week 1/fylo-solution-main/images/bg-desktop.png
diff --git a/hinoy/Fylo Project - Week 1/fylo-solution-main/images/bg-mobile.png b/hinoy/Fylo Project - Week 1/fylo-solution-main/images/bg-mobile.png
diff --git a/hinoy/Fylo Project - Week 1/fylo-solution-main/images/favicon-32x32.png b/hinoy/Fylo Project - Week 1/fylo-solution-main/images/favicon-32x32.png
diff --git a/hinoy/Fylo Project - Week 1/fylo-solution-main/images/icon-document.svg b/hinoy/Fylo Project - Week 1/fylo-solution-main/images/icon-document.svg
diff --git a/hinoy/Fylo Project - Week 1/fylo-solution-main/images/icon-folder.svg b/hinoy/Fylo Project - Week 1/fylo-solution-main/images/icon-folder.svg
diff --git a/hinoy/Fylo Project - Week 1/fylo-solution-main/images/icon-upload.svg b/hinoy/Fylo Project - Week 1/fylo-solution-main/images/icon-upload.svg
diff --git a/hinoy/Fylo Project - Week 1/fylo-solution-main/images/logo.svg b/hinoy/Fylo Project - Week 1/fylo-solution-main/images/logo.svg
diff --git a/hinoy/Fylo Project - Week 1/fylo-solution-main/images/project-preview.png b/hinoy/Fylo Project - Week 1/fylo-solution-main/images/project-preview.png
diff --git a/hinoy/Fylo Project - Week 1/fylo-solution-main/index.html b/hinoy/Fylo Project - Week 1/fylo-solution-main/index.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="description" content="Frontend Mentor - Fylo data storage component">
+    <meta name="keywords" content="Fylo data storage component, Frontend Mentor">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="styles.css" rel="stylesheet">
+    </link>
+    <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
+    <title>Fylo data storage component</title>
+</head>
+
+<body>
+    <main>
+        <!--Fylo Container -->
+        <section class="fylo-container">
+            <img class="logo" src="images/logo.svg" alt="Fylo logo" />
+            <section class="icons">
+                <div class="icon-img">
+                    <img src="images/icon-document.svg" alt="" aria-hidden="true" />
+                </div>
+                <div class="icon-img">
+                    <img src="images/icon-folder.svg" alt="" aria-hidden="true" />
+                </div>
+                <div class="icon-img">
+                    <img src="images/icon-upload.svg" alt="" aria-hidden="true" />
+                </div>
+                <button type="button" class="icon-img" onclick="openFile()">
+                    <strong>Upload Image</strong>
+                </button>
+                <input type="file" id="fileInput" accept=".jpg, .jpeg, .gif, .png" onchange="fileSelection()" multiple>
+            </section>
+        </section>
+        <!-- Storage Container -->
+        <section class="storage-container">
+            <h1>You've used <span id="usedStorage">0 MB</span> of your storage</h1>
+            <!-- Progress Bar -->
+            <section class="progress-bar">
+                <div class="gradient-bar">
+                    <div id="progressDot" class="dot-container">
+                        <div class="dot"></div>
+                    </div>
+                </div>
+            </section>
+            <h2>
+                <span id="minStorage">0 MB</span>
+                <span id="maxStorage">15 MB</span>
+            </h2>
+            <!-- GB left -->
+            <section class="gb-left">
+                <p id="mbLeft">15 <span>MB left</span></p>
+            </section>
+        </section>
+    </main>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/hinoy/Fylo Project - Week 1/fylo-solution-main/script.js b/hinoy/Fylo Project - Week 1/fylo-solution-main/script.js
@@ -0,0 +1,53 @@
+var totalSizeLimit = 15; // 15 MB maximum
+var totalUploadedSize = 0; // aggregated size of all files uploaded in bytes
+
+function openFile() {
+  document.getElementById('fileInput').click(); // opens the Finder/File Explorer
+}
+
+function fileSelection() {
+  var selectedFiles = document.getElementById('fileInput').files;
+  var validFiles = [".png", ".jpg", ".gif", ".jpeg"];
+
+  for (var i = 0; i < selectedFiles.length; i++) {
+    var selectedFile = selectedFiles[i];
+    var filesFormat = selectedFile.name.split('.').pop().toLowerCase(); // split the files extensions by "." (.jpg, .jpeg ...)
+
+    if (validFiles.indexOf('.' + filesFormat) === -1) {
+      alert("File format isn't supported: " + selectedFile.name);
+    } else {
+      var fileSize = selectedFile.size;
+      var remainingStorage = totalSizeLimit - (totalUploadedSize / (1024 * 1024));
+
+      if (fileSize / (1024 * 1024) > remainingStorage) { // (fileSize / (1024 * 1024)) -> convert to MB
+        alert("There is not enough space on the disk");
+        return;
+      }
+      totalUploadedSize += fileSize;
+    }
+  }
+  updateProgressBar();
+  updateUploadedStorage();
+}
+
+function updateProgressBar() {
+
+  var progressBar = document.querySelector('.gradient-bar');
+  var progressDot = document.getElementById('progressDot');
+  var mbLeft = document.getElementById('mbLeft');
+  var percentageCalc = (totalUploadedSize / (totalSizeLimit * 1024 * 1024)) * 100; // (totalSizeLimit * 1024 * 1024) convert from MB to bytes and multiply by 100 to convert to a percentage
+  progressBar.style.width = percentageCalc + '%';
+  var remainingStorage = totalSizeLimit - (totalUploadedSize / (1024 * 1024));
+  mbLeft.textContent = remainingStorage.toFixed(2) + ' MB LEFT';
+}
+
+function updateUploadedStorage() {
+  var usedStorageElement = document.getElementById('usedStorage');
+  var uploadedSizeInMB = totalUploadedSize / (1024 * 1024); // convert bytes to MB
+  usedStorageElement.textContent = uploadedSizeInMB.toFixed(2) + ' MB';
+}
+
+// place the progress bar at starting point
+window.onload = function () {
+  updateProgressBar();
+}