Update README and style.css

README.md

@@ -1,24 +1,67 @@
-# Spreadsheet Viewer in Javascript
+# Web Excel and CSV Reader
 
-Creating a javascript exel and csv file viewer that is using a web interface.
+## Overview
 
-This is a basic app, so in the case the spreadsheet has more then one sheet, it will only disply the first one.
+This web application allows users to effortlessly view and interact with Excel (.xlsx) and CSV files directly in their browser. Built using JavaScript and powered by Vite, this lightweight and efficient tool ensures a seamless experience for users who need quick access to spreadsheet data without the need for external software.
 
-Great when you wnat to look at the data and don't want to modify it, such when doing data analyses in python, exc.
+Great when you want to look at the data and don't want to modify it, such when doing data analyses in python, exc.
 
 Or in cases of a weak computer and wont to see a spreadsheet and work on the same time in the web.
 
 Or if you don't have an office to work with.
 
+For using follow the [LINK](https://yanivzalach.github.io/sheetsReader.io/).
 
-## Tools Used
+Or search: `https://yanivzalach.github.io/sheetsReader.io`.
 
-For deployment i used `vite`.
+## Usage
 
-Written in vanilla JS.
+Click the `Chose File` button and select the Excel or CSV file you want to view.
 
-Used to handle data from `csv` and `xlsx` files:
+## Features
 
-```bash
-npm install xlsx
-```
+- **Excel and CSV Support**: Easily upload and view Excel (.xlsx) and CSV files.
+- **Browser-Based**: No need to install additional software – view your files directly in your browser.
+- **Responsive Design**: The application is designed to provide an optimal viewing experience across various devices and screen sizes.
+- **Fast and Efficient**: Utilizing Vite for speedy development and performance optimization.
+
+## Using locally
+
+For those how want to use this project locally follow the following steps:
+
+1. **Clone the Repository:**
+   ```bash
+   git clone https://github.com/YanivZalach/sheetsReader.io.git ~/Documents/sheetsReader
+   ```
+
+2. **Navigate to the Project Directory:**
+   ```bash
+   cd ~/Documents/sheetsReader
+   ```
+
+3. **Install Dependencies:**
+   ```bash
+   npm install
+   ```
+
+    ```bash
+    npm install xlsx
+    ```
+
+4. **Run the Application:**
+   ```bash
+   npm run dev
+   ```
+
+   This will start the development server. Follow the output given link for use.
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## Acknowledgments
+
+- [Vite](https://vitejs.dev/) - Fast, optimized frontend build tool.
+- xlsx - JavaScript spreadsheet library for reading and writing Excel and CSV files.
+
+Enjoy exploring and interacting with your spreadsheet data using the Web Excel and CSV Reader!

style.css

@@ -1,3 +1,4 @@
+/* Vars */
 :root {
   --upload-color: #4caf50;
   --background-color: #f2f2f2;
@@ -17,13 +18,18 @@
 
   --table-width: 250px;
   --table-hight: 70px;
+
+  --link-color: #039450;
+  --hover-link-color: #067323;
 }
 
+/* The base body */
 body {
   font-family: 'Arial', sans-serif;
   background-color: var(--background-color);
 }
 
+/* The main app */
 #app {
   margin: 0px auto;
   padding: var(--padding);
@@ -34,6 +40,7 @@ body {
   min-width: var(--min-width);
 }
 
+/* The input place for the file */
 input {
   display: block;
   width: 100%;
@@ -45,14 +52,7 @@ input {
   box-sizing: border-box;
 }
 
-#result {
-  padding: var(--input-padding);
-  border: var(--border-width) solid var(--border-color);
-  border-radius: var(--border-radius);
-  width: fit-content;
-  height: fit-content;
-}
-
+/* The name of the input file */
 #fileInput {
   cursor: pointer;
   background-color: var(--upload-color);
@@ -62,26 +62,66 @@ input {
   font-size: var(--font-size);
 }
 
-#app input[type="file"]::before {
-  content: 'See spreadsheet file  ';
-  display: inline-block;
-  background-color: var(--upload-color);
-  color: white;
-  padding: var(--input-padding) * 2 var(--input-padding) * 4;
+/* The output place for the file */
+#result {
+  padding: var(--input-padding);
+  border: var(--border-width) solid var(--border-color);
   border-radius: var(--border-radius);
-  cursor: pointer;
+  width: fit-content;
+  height: fit-content;
 }
 
 #result::before {
   content: 'Chosen File: ';
   font-weight: bold;
 }
 
+/* Separating between exel sheets */
+hr{
+	background-color: var(--upload-color);
+	border-radius: 5px;
+	padding: var(--padding);
+}
+
+/* The sheets list */
+a {
+  color: var(--link-color);
+  text-decoration: none; /* Remove default underline */
+  transition: color 0.3s ease; /* Smooth transition for color changes */
+  align-items: center;
+  text-align: left;
+  font-weight: bold;
+  padding: 15px;
+  width: 100%;
+  height: 100%;
+  border-radius: 6px;
+  transition: transform 5s ease-in;
+}
+
+/* Hover effect for the 'a' element */
+a:hover {
+  color: var(--hover-link-color);  /* Change text color on hover */
+  background-color: var(--input-background-color);
+}
+
+ul {
+  list-style: none; /* Remove default list styles */
+  padding: 0; /* Remove default padding */
+  background-color: #f4f4f4;
+  border-radius: 8px;
+}
+
+li {
+  display: flex;
+  padding: 15px;
+  align-items: center;
+}
+
 /* The style sheet */
 table {
     display: inline-flex;
     table-layout: fixed; /* Ensure fixed layout */
-    width: 100%;
+    width: 100%;  /* Max good width */
 }
 
 td {
@@ -91,29 +131,13 @@ td {
 	height: var(--table-hight);
     box-sizing: border-box; /* Include padding and border in the total width/height */
 
-    /* Ensure text does not overflow and add scrolling if necessary */
+    /* Ensure text does not overflow and add scrolling if necessary - great for reading exel */
     overflow: scroll;
 }
 
-/* Optional: Add styling for the header cells */
 th {
     background-color: #f2f2f2;
     text-align: center;
     font-weight: bold;
 }
 
-/* Separating between exel sheets */
-hr{
-	padding: var(--padding);
-}
-
-a {
-  color: #0077cc; /* Set the text color to a blue shade */
-  text-decoration: none; /* Remove default underline */
-  transition: color 0.3s ease; /* Smooth transition for color changes */
-}
-
-/* Hover effect for the 'a' element */
-a:hover {
-  color: #004466; /* Change text color on hover */
-}