Marina monsivais

README.md

@@ -16,21 +16,21 @@ In this project you'll take this crypto currency tracker app and build two custo
 
 ## Project Set Up
 
-- [ ] Create a forked copy of this project.
-- [ ] Clone your OWN version of the repository in your terminal
-- [ ] CD into the project base directory `cd dark-mode`
-- [ ] Download project dependencies by running `npm install`
-- [ ] Start up the app using `npm start`
-- [ ] Create a new branch: git checkout -b `<firstName-lastName>`.
-- [ ] Implement the project on your newly created `<firstName-lastName>` branch, committing changes regularly.
-- [ ] Push commits: git push origin `<firstName-lastName>`.
+- [x] Create a forked copy of this project.
+- [x] Clone your OWN version of the repository in your terminal
+- [x] CD into the project base directory `cd dark-mode`
+- [x] Download project dependencies by running `npm install`
+- [x] Start up the app using `npm start`
+- [x] Create a new branch: git checkout -b `<firstName-lastName>`.
+- [x] Implement the project on your newly created `<firstName-lastName>` branch, committing changes regularly.
+- [x] Push commits: git push origin `<firstName-lastName>`.
 
 Follow these steps for completing your project.
 
 - [ ] Submit a Pull-Request to merge <firstName-lastName> Branch into main (student's Repository). **Please don't merge your own pull request**
 - [ ] From the home page of your repo, make sure you have your branch selected
 - [ ] Copy the URL and paste it into Canvas
-  
+
 ## Minimum Viable Product
 
 - [ ] Build a custom hook that let's you save data to localStorage
@@ -84,7 +84,7 @@ export const useLocalStorage = (key, initialValue) => {
   - `setValue` should look something like this:
 
 ```js
-const setValue = value => {
+const setValue = (value) => {
   // Save state
   setStoredValue(value);
   // Save to local storage

src/components/Navbar.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react'; // removed { useState } to clear the following warning in console: Line 1:17:  'useState' is defined but never used  no-unused-vars
 
 const Navbar = (props) => {
   const toggleMode = e => {

src/hooks/useDarkMode.js

@@ -0,0 +1,6 @@
+import { useLocalStorage } from "./useLocalStorage";
+
+export const useDarkMode = (initialValue) => {
+    const [darkMode, setDarkMode] = useLocalStorage(useDarkMode, initialValue);
+    return [darkMode, setDarkMode];
+}

src/hooks/useLocalStorage.js

@@ -0,0 +1,17 @@
+import { useState } from "react";
+
+export const useLocalStorage = (key, initialValue) => {
+    const [storedValue, setStoredValue] = useState(() => {
+        const item = window.localStorage.getItem(key);
+        return item ? JSON.parse(item) : initialValue;
+    })
+    // setValue function
+    const setValue = value => {
+        //Save state
+        setStoredValue(value);
+        //Save to local storages
+        window.localStorage.setItem(key, JSON.stringify(value));
+    };
+    //returning an array
+    return [storedValue, setValue];
+}

src/index.js

@@ -4,13 +4,13 @@ import axios from "axios";
 
 import Charts from "./components/Charts";
 import Navbar from "./components/Navbar";
-
+import { useDarkMode } from "./hooks/useDarkMode";
 
 import "./styles.scss";
 
 const App = () => {
   const [coinData, setCoinData] = useState([]);
-  const [darkMode, setDarkMode] = useState(false);
+  const [darkMode, setDarkMode] = useDarkMode(false); // change useState to the useDarkMode hook
 
   useEffect(() => {
     axios

src/styles.scss

@@ -120,7 +120,7 @@ blockquote:before,
 blockquote:after,
 q:before,
 q:after {
-  content: '';
+  content: "";
   content: none;
 }
 table {
@@ -136,7 +136,7 @@ table {
 
 html {
   font-size: 62.5%;
-  font-family: 'Open Sans', sans-serif;
+  font-family: "Open Sans", sans-serif;
   font-weight: 500;
 }
 
@@ -229,8 +229,8 @@ img {
 .coin__title {
   display: block;
   margin-left: 8px;
-    min-width: 160px;
-text-align: left;
+  min-width: 160px;
+  text-align: left;
 }
 
 .coin__symbol {
@@ -243,11 +243,11 @@ text-align: left;
 }
 
 .dark-mode {
-  color: #fff;
+  color: #8dc648;
   background-color: #313843;
 
   .navbar {
-    background-color: #1F2022;
+    background-color: #1f2022;
     border: none;
   }
 }