Create Mobile Toggle Menu with JavaScript

.eslintrc.json

@@ -0,0 +1,25 @@
+{
+    "env": {
+      "browser": true,
+      "es6": true,
+      "jest": true
+    },
+    "parser": "babel-eslint",
+    "parserOptions": {
+      "ecmaVersion": 2018,
+      "sourceType": "module"
+    },
+    "extends": ["airbnb-base"],
+    "rules": {
+      "no-shadow": "off",
+      "no-param-reassign": "off",
+      "eol-last": "off",
+      "import/extensions": [ 1, {
+        "js": "always", "json": "always"
+      }]
+    },
+    "ignorePatterns": [
+      "dist/",
+      "build/"
+    ]
+  }

.github/workflows/linters.yml

@@ -29,7 +29,7 @@ jobs:
       - name: Setup Webhint
         run: |
           npm install --save-dev hint@6.x
-          [ -f .hintrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css/.hintrc
+          [ -f .hintrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.hintrc
       - name: Webhint Report
         run: npx hint .
   stylelint:
@@ -43,6 +43,20 @@ jobs:
       - 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/.stylelintrc.json
+          [ -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}"
+        run: npx stylelint "**/*.{css,scss}"
+  eslint:
+    name: ESLint
+    runs-on: ubuntu-18.04
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: "12.x"
+      - name: Setup ESLint
+        run: |
+          npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x
+          [ -f .eslintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.eslintrc.json
+      - name: ESLint Report
+        run: npx eslint .

.hintrc

@@ -1,18 +1,18 @@
 {
-    "connector": {
-      "name": "local",
-      "options": {
-        "pattern": ["**", "!.git/**", "!node_modules/**"]
-      }
-    },
-    "extends": ["development"],
-    "formatters": ["stylish"],
-    "hints": [
-      "button-type",
-      "disown-opener",
-      "html-checker",
-      "meta-charset-utf-8",
-      "meta-viewport",
-      "no-inline-styles:error"
-    ]
-  }
+  "connector": {
+    "name": "local",
+    "options": {
+      "pattern": ["**", "!.git/**", "!node_modules/**"]
+    }
+  },
+  "extends": ["development"],
+  "formatters": ["stylish"],
+  "hints": [
+    "button-type",
+    "disown-opener",
+    "html-checker",
+    "meta-charset-utf-8",
+    "meta-viewport",
+    "no-inline-styles:error"
+  ]
+}

.stylelintrc.json

@@ -1,11 +1,10 @@
 {
-    "extends": ["stylelint-config-standard"],
-    "plugins": ["stylelint-scss", "stylelint-csstree-validator"],
-    "rules": {
-      "at-rule-no-unknown": null,
-      "scss/at-rule-no-unknown": true,
-      "csstree/validator": true
-    },
-    "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css"]
-  }
-
+  "extends": ["stylelint-config-standard"],
+  "plugins": ["stylelint-scss", "stylelint-csstree-validator"],
+  "rules": {
+    "at-rule-no-unknown": null,
+    "scss/at-rule-no-unknown": true,
+    "csstree/validator": true
+  },
+  "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css", "**/*.js", "**/*.jsx"]
+}

dom.js

@@ -0,0 +1,25 @@
+const toggleMenu = document.getElementById('toggle-menu');
+
+function hide() {
+  toggleMenu.style.display = 'none';
+}
+
+document.querySelectorAll('.mylinks').forEach((n) => n.addEventListener('click', () => {
+  hide();
+}));
+
+function openNav() {
+  toggleMenu.style.display = 'block';
+}
+
+function closeNav() {
+  toggleMenu.style.display = 'none';
+}
+
+document.getElementById('openMenu').addEventListener('click', () => {
+  openNav();
+});
+
+document.getElementById('close').addEventListener('click', () => {
+  closeNav();
+});

index.html

@@ -2,6 +2,10 @@
 <html lang="en">
 
 <head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Oluyemi Paul Portfolio</title>
     <!-- Global site tag (gtag.js) - Google Analytics -->
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-DQYJK8ZFFX"></script>
 <script>
@@ -11,17 +15,14 @@
 
   gtag('config', 'G-DQYJK8ZFFX');
 </script>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Oluyemi Portfolio</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link
         href="https://fonts.googleapis.com/css2?family=Crete+Round&family=Poppins:wght@100;200&family=Roboto:wght@100;200&display=swap"
         rel="stylesheet">
     <script src="https://kit.fontawesome.com/746ba03926.js" crossorigin="anonymous"></script>
     <link rel="stylesheet" href="style.css">
+
 </head>
 
 <body>
@@ -30,19 +31,31 @@
             <nav id="navbar">
                 <p id="profileName"><a href="#"> Paul, Oluyemi</a></p>
                 <ul id="desktop-nav">
-                    <li><a id="portfolio" href="#">Portfolio</a></li>
-                    <li><a id="about" href="#">About </a></li>
-                    <li><a id="contact" href="#"> Contact</a></li>
-                    <li><a href="#"> <i class="far fa-envelope"></i></a></li>
+
+                    <li><a href="#portfolio">Portfolio</a></li>
+                    <li><a href="#about">About </a></li>
+                    <li><a href="#contact"> Contact</a></li>
+                    <li><a id="email" href="#"> <i class="far fa-envelope"></i></a></li>
                 </ul>
-                <div id="bars">
-                    <div class="bar1"></div>
+                <div id="openMenu" >
+                 <a href="#"><div class="bar1"></div>
                     <div class="bar2"></div>
                     <div class="bar3"></div>
+                    </a>
                 </div>
             </nav>
         </header>
-
+        <div id="hideMe">
+        <div id="toggle-menu">
+            <img src="./image/close-btn2.JPG" alt="" id="close">
+            <ul>
+                <li class="mylinks"><a href="#portfolio" >Portfolio</a></li>
+                <li class="mylinks"><a href="#about">About</a></li>
+                <li class="mylinks"><a href="#contact" >Contact</a></li>
+            </ul>
+            <div></div>
+        </div>
+    </div>
         <main id="container" class="flex-b">
             <section class="first-page">
                 <h1 class="greetText">Hey There.<br>
@@ -68,7 +81,7 @@ <h2 class="jobTitle">I am a Software Developer</h2>
         </main>
 
         <!-- Project/works Section -->
-        <div class="content-flex flex-c">
+        <div class="content-flex flex-c" id="portfolio">
             <div id="topic">
                 <h2>My Recent Works</h2>
                 <hr>
@@ -93,8 +106,6 @@ <h2 id="story">Multi-Post Stories</h2>
             </div>
         </div>
 
-
-
         <div class="flex-d">
 
             <div class="content_1 content-flex ">
@@ -144,7 +155,6 @@ <h3 class="title-post">Profesional Art Printing Data More</h3>
 
         </div>
 
-
         <div class="flex-e">
             <div class="content_1 content-flex">
                 <div class="img04">
@@ -193,9 +203,7 @@ <h3 class="title-post">Profesional Art Printing Data More</h3>
         </div>
 
         <!-- About-me Section -->
-
-        <section class="about_me_grid flex-f">
-
+        <section class="about_me_grid flex-f"  id="about" >
             <div class="flex-f1">
                 <img id="about_img" width="586" height="354" src="./image/about-img-bg.png" alt="">
                 <h2 id="about-title">About me</h2>
@@ -251,18 +259,18 @@ <h2 id="about-title">About me</h2>
             </div>
 
         </section>
-
-        <section class="flex-g">
+        <section class="flex-g"  id="contact">
             <div class="flex-g1">
                 <h4 id="intrest-text">I'm always interested in hearing about new projects,
                     so if you'd like to chat please get in touch.</h4>
-                <form action="https://formspree.io/f/mknyregg" method="post">
+                <form action="https://formspree.io/f/mknyregg" method="post" id="form">
                     <div class="flex">
                         <input type="text" class="input-text" id="name" name="client_name" maxlength="30"
                             placeholder="Full name" required>
-                        <input type="email" class="input-text" id="email" name="client_email" maxlength="30"
+                        <input type="email" class="input-text" id="eml" name="email" maxlength="30"
                             placeholder="Email address" required>
-                        <textarea id="msg" name="client_comment" maxlength="500" placeholder="Enter text here"
+                            <p id="invalidText"></p>
+                        <textarea id="msg" name="msg" maxlength="500" placeholder="Enter text here"
                             required></textarea>
                         <button class="button" type="submit">Get in touch</button>
                     </div>
@@ -282,7 +290,8 @@ <h4 id="intrest-text">I'm always interested in hearing about new projects,
             </div>
             <div id="footer-bar"></div>
         </section>
-    </div>
+        </div>
+        <script src="dom.js"></script>
 </body>
 
 </html>