API tools faq
paste
Advertisement
lovelymondayss

mengcode

lovelymondayss
Aug 12th, 2021
142
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 9.57 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <!-- <html> -->
  3. <head>
  4.     <meta charset='utf-8'>
  5.     <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  6.     <title>MengCode</title><link rel="stylesheet" href="styles.css">
  7.     <meta name='viewport' content='width=device-width, initial-scale=1'>
  8.     <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
  9.     <link rel="icon" href="./src/MengCode.svg" type="image/icon type">
  10.     <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
  11.     <link rel="stylesheet" href="styles.css">
  12. </head>
  13. <body>
  14.         <!-- Apps -->
  15.         <div class="apps">
  16.             <!-- Header -->
  17.             <div class="header">
  18.                 <div class="header-logo">
  19.                     <img src="./logo.svg" alt="">
  20.                 </div>
  21.             </div>
  22.             <!-- End of Header -->
  23.  
  24.             <!-- Search Bar -->
  25.             <div class="search">
  26.                 <div id="searchWrapper">
  27.                     <input
  28.                     type="text"
  29.                     style="color: #FDFCFC; font-family: 'IBM Plex Mono', monospace; font-size: 2rem; background-color:#504E4E ";
  30.                     name="searchBar"
  31.                     id="searchBar"
  32.                     placeholder="Start typing ..."
  33.                     />
  34.                 </div>
  35.             </div>
  36.             <!-- End Search Bar -->
  37.  
  38.             <!-- Button Category -->
  39.             <div class="btn-container">
  40.                 <!-- <button type="button" class="filter-btn" data-id="all"
  41.                 >All</button>
  42.                 <button type="button" class="filter-btn" data-id="course"
  43.                 >course</button>
  44.                 <button type="button" class="filter-btn" data-id="cheatsheet"
  45.                 >cheatsheet</button> -->
  46.             </div>
  47.             <!-- Button End -->
  48.  
  49.             <!-- Content -->
  50.             <div class="section-center">
  51.                 <!-- Single Content -->
  52.                 <div class="item-content">
  53.                 <!-- image -->
  54.                 <div class="photo-box">
  55.                     <img src="./src/asset-01.png" alt="">
  56.                 </div>
  57.                 <!-- box title and icon -->
  58.                 <div class="title-and-icon">
  59.                     <!-- text body -->
  60.                     <div class="title">
  61.                         <h1>Coloors</h1>
  62.                         <p>Generate color to find your pallete.</p>
  63.                     </div>
  64.                     <div class="icon">
  65.                         <button type="button" class="btn btn-dark"
  66.                         class="filter-btn">Visit</button>                      
  67.                     </div>
  68.                 </div>
  69.                 </div>
  70.                 <!-- End Single Content -->
  71.             </div>
  72.             <!-- End Content -->
  73.  
  74.             <!-- Footer -->
  75.  
  76.             <!-- End Footer -->
  77.         </div>
  78.         <!-- End Apps -->
  79. </body>
  80. <script src="app.js"></script>
  81. </html>
  82.  
  83. ---------------------------------------------------------------------
  84.  
  85.  
  86. :root {
  87.   background-color: #26272b;
  88.   font-family: "IBM Plex Mono", monospace;
  89. }
  90.  
  91. ::-webkit-scrollbar {
  92.   width: 0.25rem;
  93. }
  94.  
  95. ::-webkit-scrollbar-track {
  96.   background: #1e1e24;
  97. }
  98.  
  99. ::-webkit-scrollbar-thumb {
  100.   background: rgba(56, 117, 208);
  101. }
  102.  
  103. .apps {
  104.   padding: 2rem 7rem 2rem 7rem;
  105.   background-color: #26272b;
  106. }
  107.  
  108. p {
  109.   font-family: "IBM Plex Mono", monospace;
  110.   color: #fdfcfc;
  111.   font-size: 1rem;
  112. }
  113.  
  114. h1 {
  115.   font-family: "IBM Plex Mono", monospace;
  116.   color: #fdfcfc;
  117.   font-size: 1.5rem;
  118.   font-weight: 800;
  119. }
  120.  
  121. .search {
  122.   padding-top: 2rem;
  123.   padding-bottom: 2rem;
  124. }
  125.  
  126. #searchBar {
  127.   width: 100%;
  128.   height: 3rem;
  129.   border-radius: 3px;
  130.   border: 1px solid #eaeaea;
  131.   padding: 5px 10px;
  132.   font-size: 2rem;
  133. }
  134.  
  135. #searchWrapper {
  136.   position: relative;
  137. }
  138.  
  139. .btn-dark {
  140.   background-color: #504e4e;
  141.   color: #fdfcfc;
  142.   font-family: "IBM Plex Mono", monospace;
  143.   font-size: 1rem;
  144.   border-radius: 10px;
  145.   justify-content: center;
  146.   align-items: flex-end;
  147. }
  148.  
  149. .btn-container {
  150.   display: flex;
  151.   flex-direction: row;
  152.   padding-top: 2rem;
  153.   padding-bottom: 2rem;
  154. }
  155.  
  156. .filter-btn {
  157.   color: #fdfcfc;
  158.   text-decoration: none;
  159.   background-color: #504e4e;
  160.   font-family: "IBM Plex Mono", monospace;
  161.   font-weight: 700;
  162.   font-size: 1em;
  163.   margin: 0.2%;
  164.   -webkit-border-radius: 10px;
  165.   -moz-border-radius: 10px;
  166.   border-radius: 10px;
  167.   /* -webkit-box-shadow: 0px 9px 0px, 0px 9px 25px;
  168.   -moz-box-shadow: 0px 9px 0px, 0px 9px 25px;
  169.   box-shadow: 0px 9px 0px, 0px 9px 25px; */
  170.   display: block;
  171.   border: none;
  172.  
  173.   -webkit-transition: all 0.1s ease;
  174.   -moz-transition: all 0.1s ease;
  175.   -ms-transition: all 0.1s ease;
  176.   -o-transition: all 0.1s ease;
  177.   transition: all 0.1s ease;
  178. }
  179.  
  180. .filter-btn:active {
  181.   -webkit-box-shadow: 0px 3px 0px rgba(56, 117, 208),
  182.     0px 3px 6px rgba(0, 0, 0, 0.9);
  183.   -moz-box-shadow: 0px 3px 0px rgba(56, 117, 208),
  184.     0px 3px 6px rgba(0, 0, 0, 0.9);
  185.   box-shadow: 0px 3px 0px rgba(56, 117, 208), 0px 3px 6px rgba(0, 0, 0, 0.9);
  186.   position: relative;
  187.   top: 6px;
  188. }
  189.  
  190. .section-center {
  191.   justify-content: flex-start;
  192.   flex-wrap: wrap;
  193.   display: flex;
  194.   /* border: 2px solid red; */
  195. }
  196.  
  197. .item-content {
  198.   width: 22.5em;
  199.   flex-basis: 32.4%;
  200.   height: 18em;
  201.   /* border: 2px solid green; */
  202.   margin: 0.3em;
  203.   position: relative;
  204.   background-color: rgba(56, 117, 208);
  205. }
  206.  
  207. .title button {
  208.   display: flex;
  209.   justify-content: flex-end;
  210.   align-items: flex-end;
  211. }
  212.  
  213. .photo-box {
  214.   /* border: 3px solid pink; */
  215.   height: 60%;
  216.   display: flex;
  217.   align-items: center;
  218.   justify-content: center;
  219. }
  220.  
  221. .photo-box img {
  222.   height: 10.5em;
  223.   width: 22.5em;
  224.   object-fit: fill;
  225. }
  226.  
  227. .title-and-icon {
  228.   display: flex;
  229.   flex-direction: row;
  230.   align-items: flex-end;
  231. }
  232.  
  233. .title {
  234.   margin: 0.2em 0 0 0;
  235.   width: 80%;
  236.   /* border: 2px solid blue; */
  237. }
  238.  
  239. .title p {
  240.   height: 3em;
  241.   overflow: auto;
  242. }
  243.  
  244. .icon {
  245.   /* border: 3px solid yellow; */
  246.   height: 20%;
  247. }
  248.  
  249. -------------------------------------------------------------------
  250.  
  251. const menu = [
  252.     {
  253.       id: 1,
  254.       title: "Coolors",
  255.       category: "course",
  256.       link: "http://coolors.co/",
  257.       img: "./src/asset-01.png",
  258.       desc: `Generate color to find your Pallete `,
  259.     },
  260.     {
  261.       id: 2,
  262.       title: "CSS Layout",
  263.       category: "cheatsheet",
  264.       link: "https://csslayout.io",
  265.       img: "./src/asset-02.png",
  266.       desc: `Free template CSS layout`,
  267.     },
  268.     {
  269.       id: 3,
  270.       title: "Code Pen",
  271.       category: "editor",
  272.       link: 'https://codepen.io',
  273.       img: "./src/asset-03.png",
  274.       desc: `Code Pen is an online community for testing and showcasing user-created HTML, CSS and JavaScript code snippets..`,
  275.     }
  276. ];
  277.  
  278. // get parent element
  279. const sectionCenter = document.querySelector(".section-center");
  280. const btnContainer = document.querySelector(".btn-container");
  281. // display all items when page loads
  282.  
  283. window.addEventListener("DOMContentLoaded", function () {
  284.   diplayMenuItems(menu);
  285.   displayMenuButtons();
  286.   dislaySearch();
  287. });
  288.  
  289. // Menu
  290. function diplayMenuItems(menuItems) {
  291.   let displayMenu = menuItems.map(function (item) {
  292.     // console.log(item);
  293.  
  294.     return `<!-- Single Content -->
  295.     <div class="item-content">
  296.     <!-- image -->
  297.     <div class="photo-box">
  298.         <img src=${item.img} alt=${item.title}>
  299.     </div>
  300.     <!-- box title and icon -->
  301.     <div class="title-and-icon">
  302.         <!-- text body -->
  303.         <div class="title">
  304.             <h1>${item.title}</h1>
  305.             <p>${item.desc}</p>
  306.         </div>
  307.         <div class="icon">
  308.             <a href=${item.link} target="_blank" rel="noopener"
  309.             <button type="button" class="filter-btn"
  310.             >Visit</button>
  311.             </a>
  312.         </div>
  313.     </div>
  314.     </div>
  315.     <!-- End Single Content -->` ;
  316.   });
  317.   displayMenu = displayMenu.join("");
  318.   // console.log(displayMenu);
  319.  
  320.   sectionCenter.innerHTML = displayMenu;
  321. }
  322.  
  323. // Button Category
  324. function displayMenuButtons() {
  325.   const categories = menu.reduce(
  326.     function (values, item) {
  327.       if (!values.includes(item.category)) {
  328.         values.push(item.category);
  329.       }
  330.       return values;
  331.     },
  332.     ["all"]
  333.   );
  334.  
  335.   const categoryBtns = categories
  336.     .map(function (category) {
  337.       return `<button type="button" class="filter-btn" data-id=${category}>
  338.           ${category}
  339.         </button>`;
  340.     })
  341.     .join("");
  342.  
  343.   btnContainer.innerHTML = categoryBtns;
  344.   const filterBtns = btnContainer.querySelectorAll(".filter-btn");
  345.   console.log(filterBtns);
  346.  
  347.   filterBtns.forEach(function (btn) {
  348.     btn.addEventListener("click", function (e) {
  349.       // console.log(e.currentTarget.dataset);
  350.       const category = e.currentTarget.dataset.id;
  351.       const menuCategory = menu.filter(function (menuItem) {
  352.         // console.log(menuItem.category);
  353.         if (menuItem.category === category) {
  354.           return menuItem;
  355.         }
  356.       });
  357.       if (category === "all") {
  358.         diplayMenuItems(menu);
  359.       } else {
  360.         diplayMenuItems(menuCategory);
  361.       }
  362.     });
  363.   });
  364. }
  365.  
  366. //Search Bar
  367. function dislaySearch(){
  368. const searchBar = document.getElementById('searchBar');
  369. searchBar.addEventListener('keyup',function(e){
  370.   const searchString = e.target.value.toLowerCase();
  371.  
  372.   const searchFilter = menu.filter(function(displaySearch)  {
  373.   return (
  374.     displaySearch.title.toLowerCase().includes(searchString) ||
  375.     displaySearch.desc.toLowerCase().includes(searchString)
  376.   );
  377.   });
  378.   diplayMenuItems(searchFilter);
  379. });
  380. }
  381.  
  382. ----------------------------------------------------
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!