TheBridge-FullStackDeveloper · ggmj92 · Dec 12, 2023 · Dec 13, 2023 · Dec 14, 2023 · Dec 22, 2023
diff --git a/.DS_Store b/.DS_Store
diff --git a/assets/.DS_Store b/assets/.DS_Store
diff --git a/assets/img/.DS_Store b/assets/img/.DS_Store
diff --git a/assets/img/1.jpg b/assets/img/1.jpg
diff --git a/assets/img/10.jpg b/assets/img/10.jpg
diff --git a/assets/img/2.jpg b/assets/img/2.jpg
diff --git a/assets/img/3.jpg b/assets/img/3.jpg
diff --git a/assets/img/4.jpg b/assets/img/4.jpg
diff --git a/assets/img/5.jpg b/assets/img/5.jpg
diff --git a/assets/img/6.jpg b/assets/img/6.jpg
diff --git a/assets/img/7.jpg b/assets/img/7.jpg
diff --git a/assets/img/8.jpg b/assets/img/8.jpg
diff --git a/assets/img/9.jpg b/assets/img/9.jpg
diff --git a/assets/img/humidity.png b/assets/img/humidity.png
diff --git a/assets/img/rain.png b/assets/img/rain.png
diff --git a/assets/img/searchIcon.png b/assets/img/searchIcon.png
diff --git a/assets/img/wind.png b/assets/img/wind.png
diff --git a/css/styles.css b/css/styles.css
diff --git a/index.html b/index.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./css/styles.css">
+    <title>Dashboard Project GGMJ</title>
+</head>
+
+<body>
+
+    <header>
+        <h1><a href="index.html">GGMJ's Widget App</a></h1>
+        <div class="navBar">
+            <div>
+                <a href="clock.html" data-widget="clockWidget">Clock</a>
+                <a href="weather.html" data-widget="=weatherWidget">Weather</a>
+                <a href="links.html" data-widget="linkWidget">Link Saver</a>
+                <a href="passwords.html" data-widget="passwordWidget">Password Generator</a>
+            </div>
+        </div>
+
+        </div>
+    </header>
+
+    <div class="container">
+
+            <div class="clockCard" id="clockWidget">
+                <div class="clock">
+                    <div class="time"></div>
+                    <div class="date"></div>
+                </div>
+                <div class="text">
+                    <p></p>
+                </div>
+            </div>
+
+        <div class="weatherCard" id="weatherWidget">
+            <div class="weatherSearch">
+                <input type="text" placeholder="Enter city name" spellcheck="false">
+                <button><img src="./assets/img/searchIcon.png" alt="searchIcon"></button>
+            </div>
+            <div class="error">
+                <p>City not found</p>
+            </div>
+            <div class="weather">
+                <img class="weatherIcon" src="" alt="">
+                <h1 class="temp"></h1>
+                <h4 class="feel"></h4>
+                <h2 class="city"></h2>
+                <div class="details">
+                    <div class="col">
+                        <img src="./assets/img/humidity.png" alt="humidityIcon">
+                        <div>
+                            <p class="humidity"></p>
+                            <p>Humidity</p>
+                        </div>
+                        <div class="col">
+                            <img src="./assets/img/wind.png" alt="windIcon">
+                            <div>
+                                <p class="wind">25km/h</p>
+                                <p>Wind Speed</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="hourlyWeather"></div>
+            </div>
+        </div>
+
+        <div class="linkCard" id="linkWidget">
+            <h2>Favorite Links</h2>
+            <div class="link-items">
+                <div class="link-inputs">
+                    <input type="text" id="link-title" placeholder="Enter link title">
+                    <input type="url" id="link-url" placeholder="Paste link address">
+                </div>
+                <div class="link-button">
+                    <button id="add-link-btn">Add Link</button>
+                </div>
+            </div>
+            <ul id="link-list"></ul>
+        </div>
+
+        <div class="passwordCard" id="passwordWidget">
+            <h2>Password Generator</h2>
+            <div class="password-items">
+                <div class="password-number">
+                    <p>Number of characters: </p>
+                    <input type="number" id="passwordLength" min="12" max="50" value="12">
+                </div>
+                <div class="password-button">
+                    <button id="generateBtn">Generate Password</button>
+                </div>
+                <div class="passwords">
+                    <input type="text" id="password" readonly>
+                </div>
+            </div>
+        </div>
+
+    </div>
+
+    <footer>
+        <p>Gabriel Garcia-Miro | Miami, FL | December 2023</p>
+    </footer>
+
+    <script src="./js/widgets.js"></script>
+
+</body>
+
+</html>