Animated Navbar using Flex and clip-path

PHOTO

Thu Dec 30 2021 01:33:37 GMT+0000 (UTC)

Saved by @Surftware #undefined

const hamburger = document.querySelector(".hamburger");

const navLinks = document.querySelector(".nav-links");

const links = document.querySelectorAll(".nav-links li");



hamburger.addEventListener('click', ()=>{

   //Animate Links

    navLinks.classList.toggle("open");

    links.forEach(link => {

        link.classList.toggle("fade");

    });



    //Hamburger Animation

    hamburger.classList.toggle("toggle");

});

https://codepen.io/hitensharma/pen/dybryGE

Save snippets that work from anywhere online with our extensions

Available in the Chrome Web Store

Get Firefox Add-on

Get VS Code extension

Comments

More like this

add property to each object in array javascript using ".map()" Code Example

Results.map(obj=> ({ ...obj, Active: 'false' }))

void main() {
  getNumber();
}

getNumber () {
  print ("Hello");
}

#undefined #child

Edit Themes ‹ Bruna Carolina Santos — WordPress

/*
Theme Name:     Twenty Seventeen Child
Theme URI:      https://wordpress.org/themes/twentyseventeen-child/
Description:    Tema Child per il tema Twenty Thirteen
Author:         Bruna Carolina Santos
Author URI:     
Template:       twentyseventeen
Version:        2.8-wpcom
*/

Edit Themes ‹ Bruna Carolina Santos — WordPress

Customiser Dark Theme

<style>
  /* Root Variables */
  
    :root {
      --fd_Font: inherit;
      --fd_Dark: #ffffff;
      --fd_Bodytext: #d1d1d1;
      --fd_Subtletext: #b7b7b7;
      --fd_Disabledtext: #7d7d7d;
      --fd_Light: #ababab;
      --fd_Pale: #4f4f4f;
      --fd_Background: #000000;
      --fd_Danger: #D80034;
      --fd_Warning: #FF5B21;
      --fd_Success: #1EBA63;
      --fd_Info: #4E65E1;
      --fd_Transparent: transparent;
    }
  </style>
  <link rel="stylesheet" href="https://d2bzmcrmv4mdka.cloudfront.net/production/ordering-system/chromeExtension/production-v1.min.css">

<div class="msgBox msgBox__container bg-light-grey">

  

  <section class="topBar bg-grey">

    <a href="#" class="round arrowBox bg-white"><div class="arrow down"></div></a>

  </section>

  

  <section class="user">

    <div class="avatarBox">

        <img class="round avatar" src="https://lh3.googleusercontent.com/DzXJfgqnFZmEOerX1XWEBm5F0udVmtx7Wkl6WSmL1in8fzHhZAml4hGERWmFh0buKmGUTeIttb9Go6sRjmE=rw">

      <div class="user__status round bg-pink"></div>

    </div>

    <div class="user__nameContainer">

      <div class="user__detail mid-grey">Kerem Suer</div>

      <div class="user__detail light-grey">Contributor</div>

    </div>

    <button class="btn">Block</button>

  </section>



  <section class="user">

    <div class="avatarBox">

        <img class="round avatar" src="https://lh3.googleusercontent.com/DzXJfgqnFZmEOerX1XWEBm5F0udVmtx7Wkl6WSmL1in8fzHhZAml4hGERWmFh0buKmGUTeIttb9Go6sRjmE=rw">

Centrar Imagen - FlexBox

// NO JS

find out whether the radio button is checked, or not

<!DOCTYPE html>
<html>
<body>

Radio button:<input type="radio" id="myRadio" checked>

<p>Click the "Try it" button to find out whether the radio button is checked, or not.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("myRadio").checked;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

Untitled1 - Jupyter Notebook

model training and testing

Light and Dark theme React with Less and CSS variables

const LIGHT_THEME = 'light-theme';

const DARK_THEME = 'dark-theme';



const ThemeContext = React.createContext();



function ThemeWrapper({ children }) {

  const [theme, setTheme] = React.useState(LIGHT_THEME);

  

  const applyTheme = (newTheme) => {

    document.getElementById('app').className = newTheme;

    setTheme(newTheme);

  }

  

  return (

    <ThemeContext.Provider value={{ theme, applyTheme }}>

      {children}

    </ThemeContext.Provider>

  )

}

Simple React Dark Mode.

function Header() {

  const [ darkMode, setDarkMode ] = React.useState(false)

   

  React.useEffect(() => {

    const body = document.body

    const toggle = document.querySelector('.toggle-inner')

    

    // If dark mode is enabled - adds classes to update dark-mode styling.

    // Else, removes and styling is as normal.

    if( darkMode === true ) {

      body.classList.add('dark-mode')

      toggle.classList.add('toggle-active')

    } else {

      body.classList.remove('dark-mode')

      toggle.classList.remove('toggle-active')

    }

  }, [darkMode])

  

  return (

Copy/paste contacts

mobile menu close

<script>
    jQuery(document).ready(function() {

        jQuery("#dd-menu-mobile ul li a").attr("onclick", "menuClose()");
        jQuery(".dd-cta-close").attr("onclick", "menuClose()");

    });

    function menuClose() {
        var element = document.getElementById("dd-section");
        element.classList.toggle("dd-m-menu");
    }

</script>

Slick Carousel smooth scroll

$('#gallery').slick({

  slidesToShow: ,

  slidesToScroll: 1,

  autoplay: true,

  autoplaySpeed: 0,
6
  speed: 000,

  pauseOnHover: false,
8
  cssEase: 'linear'

});

filter array with rest operator

https://jsbin.com/

Browse more snippets >>