From 1ac99bde33a18920ffa79e9a70d9d5674488b747 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Miguel=20R=2E=20=C3=81vila?= Date: Tue, 20 Jul 2021 20:50:46 -0500 Subject: [PATCH] :art: Javascript functions --- app.css | 7 ++- assets/js/cards.js | 22 ++++++++ assets/js/lists.js | 40 +++++++++++++++ assets/js/weather.js | 2 +- config.js | 20 ++++++-- index.html | 117 +++++++++---------------------------------- 6 files changed, 107 insertions(+), 101 deletions(-) diff --git a/app.css b/app.css index 754fc9a..33c9409 100644 --- a/app.css +++ b/app.css @@ -1,4 +1,4 @@ -@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap'); +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap"); /* V A R I A B L E S */ @@ -49,7 +49,7 @@ margin: 0; padding: 0; box-sizing: border-box; - font-family: 'Open Sans', sans-serif; + font-family: "Open Sans", sans-serif; transition: 0.2s ease-in-out; } @@ -94,6 +94,7 @@ body { box-shadow: 0 5px 7px rgba(0, 0, 0, 0.35); border-radius: 5px; } + .card:hover { transform: translateY(-0.2rem); box-shadow: 0 10px 10px rgba(0, 0, 0, 0.35); @@ -116,12 +117,14 @@ body { align-items: center; justify-content: center; } + .weatherBlock__date { display: flex; align-items: center; justify-content: center; margin-top: 30px; } + .weatherBlock__weather { display: flex; align-items: center; diff --git a/assets/js/cards.js b/assets/js/cards.js index 8b13789..2098ce6 100644 --- a/assets/js/cards.js +++ b/assets/js/cards.js @@ -1 +1,23 @@ +console.log("Connected cards"); +const printCards = () => { + for (const card of CONFIG.cards) { + console.log(card.id); + + let item = ` + + + + `; + + const position = "beforeend"; + + buttonsContainer.insertAdjacentHTML(position, item); + } +}; + +printCards(); diff --git a/assets/js/lists.js b/assets/js/lists.js index e69de29..2f63748 100644 --- a/assets/js/lists.js +++ b/assets/js/lists.js @@ -0,0 +1,40 @@ +console.log("Connected lists"); + +const printFirstList = () => { + let icon = ``; + const position = "beforeend"; + list_1.insertAdjacentHTML(position, icon); + for (const link of CONFIG.lists.firstList) { + let item = ` + ${link.name} + `; + const position = "beforeend"; + list_1.insertAdjacentHTML(position, item); + } +}; + +const printSecondList = () => { + let icon = ``; + const position = "beforeend"; + list_2.insertAdjacentHTML(position, icon); + for (const link of CONFIG.lists.secondList) { + let item = ` + ${link.name} + `; + const position = "beforeend"; + list_2.insertAdjacentHTML(position, item); + } +}; + +printFirstList(); +printSecondList(); diff --git a/assets/js/weather.js b/assets/js/weather.js index e52fbfc..57d72ea 100644 --- a/assets/js/weather.js +++ b/assets/js/weather.js @@ -13,7 +13,7 @@ var tempUnit = CONFIG.weatherUnit; const KELVIN = 273.15; // Use your own key for the Weather, Get it here: https://openweathermap.org/ -const key = '15fe26a8e22e4783054e3273824c5xdxd'; +const key = `${CONFIG.weatherKey}`; // Set Position function setPosition(); diff --git a/config.js b/config.js index 013cd5d..caba66f 100644 --- a/config.js +++ b/config.js @@ -17,6 +17,7 @@ const CONFIG = { openInNewTab: true, + weatherKey: '12345678910111213141516', weatherIcons: 'OneDark', weatherUnit: 'C', @@ -32,26 +33,37 @@ const CONFIG = { cards: [ { + id: '1', name: 'Github', icon: 'github', link: 'https://github.com/', }, { + id: '2', name: 'Mail', icon: 'mail', link: 'https://mail.protonmail.com/', }, { + id: '3', + name: 'Todoist', + icon: 'trello', + link: 'https://calendar.google.com/calendar/r', + }, + { + id: '4', name: 'Calendar', icon: 'calendar', link: 'https://calendar.google.com/calendar/r', }, { + id: '5', name: 'Reddit', icon: 'bookmark', link: 'https://reddit.com', }, { + id: '6', name: 'Odysee', icon: 'youtube', link: 'https://odysee.com/', @@ -86,19 +98,19 @@ const CONFIG = { ], secondList: [ { - name: 'Github', + name: 'Linkedin', link: 'https://github.com/', }, { - name: 'Mail', + name: 'Facebook', link: 'https://mail.protonmail.com/', }, { - name: 'Calendar', + name: 'Instagram', link: 'https://calendar.google.com/calendar/r', }, { - name: 'Reddit', + name: 'Telegram', link: 'https://reddit.com', }, ], diff --git a/index.html b/index.html index 8cafb4c..6ba9d25 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,12 @@ + +