From cf9a4c96bb8ba696f4bc62753f767e06ee7fe8d8 Mon Sep 17 00:00:00 2001 From: manq2010 Date: Wed, 26 Oct 2022 12:18:38 +0200 Subject: [PATCH 1/6] Add CSS file --- css/styles.css | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 css/styles.css diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..e69de29 From eebc6d3ff1186c58e952dff28d46cabcdabe590b Mon Sep 17 00:00:00 2001 From: Enning94 Date: Wed, 26 Oct 2022 10:55:53 +0000 Subject: [PATCH 2/6] Add Navigation bar --- css/styles.css | 25 +++++++++++++++++++++++++ index.html | 39 +++++++++++++++++++++++++++++++++++---- 2 files changed, 60 insertions(+), 4 deletions(-) diff --git a/css/styles.css b/css/styles.css index e69de29..1ad246f 100644 --- a/css/styles.css +++ b/css/styles.css @@ -0,0 +1,25 @@ +*{ + padding: 0; + margin: 0; + box-sizing: border-box; +} +.navi-cont{ + display: flex; + justify-content: space-around; + background-color: blanchedalmond; + padding: 0.5rem; +} + +.nav-menu { + align-items: center; + list-style-type: none; +} +.nav-item > a { +text-decoration: none; +margin-left: 1rem; +font-size: 1rem; +} +.logo{ + text-decoration: none; +} + diff --git a/index.html b/index.html index d427915..16be05a 100644 --- a/index.html +++ b/index.html @@ -6,19 +6,41 @@ - + integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous"> Awesome books: plain JavaScript with objects + -
+
+ + +
+
+ +

All awesome books - +

+
+
+
+

Add a new Book

@@ -36,6 +58,15 @@

+
+ +
+
+

Contact Information

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, laudantium.

+
+
+ \ No newline at end of file From f8a70686a77aa682c5d905d225740819c56e9975 Mon Sep 17 00:00:00 2001 From: manq2010 Date: Wed, 26 Oct 2022 15:29:39 +0200 Subject: [PATCH 3/6] Add even listner for the nav links --- css/styles.css | 21 +++++++++--- index.html | 87 ++++++++++++++++++++++++++++---------------------- js/index.js | 23 +++++++++++++ 3 files changed, 88 insertions(+), 43 deletions(-) diff --git a/css/styles.css b/css/styles.css index 1ad246f..765f7bd 100644 --- a/css/styles.css +++ b/css/styles.css @@ -3,7 +3,12 @@ margin: 0; box-sizing: border-box; } -.navi-cont{ + +html { + /* font-size: 62.5%; */ +} + +.navi-cont { display: flex; justify-content: space-around; background-color: blanchedalmond; @@ -14,12 +19,18 @@ align-items: center; list-style-type: none; } + .nav-item > a { -text-decoration: none; -margin-left: 1rem; -font-size: 1rem; + text-decoration: none; + margin-left: 1rem; + font-size: 1.6rem; } -.logo{ + +.logo { text-decoration: none; } +.close { + display: none; +} + diff --git a/index.html b/index.html index 16be05a..59985db 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ + integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous"> Awesome books: plain JavaScript with objects @@ -16,56 +16,67 @@ -
- +
+
-

- All awesome books -

-
-
+

+ All awesome books +

+
+
-
-
-

- Add a new Book -

+
+
+

+ Add a new Book +

+ +
+
+ + +
+
+ + +
+ +
-
-
- - -
-
- - -
- -
+
+
-
-
+
+
+

Contact Information

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, laudantium.

+
    +
  • Our email: festus@mancoba.com
    • +
  • Our phone number: 001122334455
    • +
  • Our address: Accra, Ghana, 27318 city
    • +
+
+
-
-
-

Contact Information

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, laudantium.

-
-
+
+

Copyright +

+
diff --git a/js/index.js b/js/index.js index c2b1dc7..abb957d 100644 --- a/js/index.js +++ b/js/index.js @@ -102,3 +102,26 @@ form.addEventListener('submit', (e) => { }); DisplayBook.getLs(); + +const listBtnId = document.querySelector('#home'); +const AddNewBtnId = document.querySelector('#add-book'); +const contactBtnId = document.querySelector('#contact'); + +const listBtn = document.querySelector('.home'); +const AddNewBtn = document.querySelector('.add-book'); +const contactBtn = document.querySelector('.contact'); + +listBtn.addEventListener('click', () => { + AddNewBtnId.classList.add('close'); + contactBtnId.classList.add('close'); +}); + +AddNewBtn.addEventListener('click', () => { + listBtnId.classList.add('close'); + contactBtnId.classList.add('close'); +}); + +contactBtn.addEventListener('click', () => { + AddNewBtnId.classList.add('close'); + listBtnId.classList.add('close'); +}); From c122f9b136d9495ca93248f681a1d0b76dea1a32 Mon Sep 17 00:00:00 2001 From: Enning94 Date: Wed, 26 Oct 2022 13:53:43 +0000 Subject: [PATCH 4/6] Add styling --- .github/workflows/linters.yml | 14 ++++++++++++++ .stylelintrc.json | 20 ++++++++++++++++++++ css/styles.css | 12 +++++------- index.html | 8 ++++---- js/index.js | 3 +++ 5 files changed, 46 insertions(+), 11 deletions(-) create mode 100644 .stylelintrc.json diff --git a/.github/workflows/linters.yml b/.github/workflows/linters.yml index 1bc6426..9b039aa 100644 --- a/.github/workflows/linters.yml +++ b/.github/workflows/linters.yml @@ -32,6 +32,20 @@ jobs: [ -f .hintrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.hintrc - name: Webhint Report run: npx hint . + stylelint: + name: Stylelint + runs-on: ubuntu-18.04 + steps: + - uses: actions/checkout@v2 + - uses: actions/setup-node@v1 + with: + node-version: "12.x" + - name: Setup Stylelint + run: | + npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x + [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.stylelintrc.json + - name: Stylelint Report + run: npx stylelint "**/*.{css,scss}" eslint: name: ESLint runs-on: ubuntu-22.04 diff --git a/.stylelintrc.json b/.stylelintrc.json new file mode 100644 index 0000000..32127b3 --- /dev/null +++ b/.stylelintrc.json @@ -0,0 +1,20 @@ +{ + "extends": ["stylelint-config-standard"], + "plugins": ["stylelint-scss", "stylelint-csstree-validator"], + "rules": { + "at-rule-no-unknown": [ + true, + { + "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"] + } + ], + "scss/at-rule-no-unknown": [ + true, + { + "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"] + } + ], + "csstree/validator": true + }, + "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css", "**/*.js", "**/*.jsx"] +} diff --git a/css/styles.css b/css/styles.css index 765f7bd..938822f 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1,18 +1,15 @@ -*{ +* { padding: 0; margin: 0; box-sizing: border-box; } -html { - /* font-size: 62.5%; */ -} - .navi-cont { display: flex; justify-content: space-around; - background-color: blanchedalmond; + background-color: rgb(213, 209, 203); padding: 0.5rem; + color: rgba(18, 14, 14, 0.77); } .nav-menu { @@ -24,13 +21,14 @@ html { text-decoration: none; margin-left: 1rem; font-size: 1.6rem; + color: rgba(18, 14, 14, 0.77); } .logo { text-decoration: none; + font-size: 2rem; } .close { display: none; } - diff --git a/index.html b/index.html index 59985db..1ee87b6 100644 --- a/index.html +++ b/index.html @@ -39,7 +39,7 @@

-
+

Add a new Book @@ -61,10 +61,10 @@

-
+

Contact Information

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, laudantium.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, laudantium.

  • Our email: festus@mancoba.com
  • Our phone number: 001122334455
    • @@ -73,7 +73,7 @@

    Contact Information

-