Snippets Collections
<script src=//use.fontawesome.com/96bc47e5c3.js></script>
function explode(url, part) {
  let urlParts = url.replace('http://','').replace('https://','').split(/[/?#]/);
  return urlParts[part];
}

let url = 'http://scratch99.com/web-development/javascript/',
    domain = explode(url, 0),
    dir = explode(url, 1),
    subdir = explode(url, 2)

console.log(domain);
console.log(dir);
console.log(subdir);
<button class="saveBtn">Save 1</button>
<button class="saveBtn">Save 2</button>
<button class="saveBtn">Save 3</button>

<script>
  let saveBtn = document.getElementsByClassName('saveBtn');
  function myHandler() {
    console.log('Clicked');
  }
  Array.from(saveBtn).forEach(function (elm) { 
    elm.addEventListener('click', myHandler) 
  })
</script>
// create Triler Post type



function create_trailer() {

	$labels = array(
		'name' => _x( 'Trailer', 'Post Type General Name'),
		'singular_name' => _x( 'Trailer', 'Post Type Singular Name'),
		'menu_n ame' => _x( 'Trailer', 'Admin Menu text'),
		'name_admin_bar' => _x( 'Trailer', 'Add New on Toolbar'),
		'archives' => __( 'Trailer Archives'),
		'attributes' => __( 'Trailer Attributes'),
		'parent_item_colon' => __( 'Parent Trailer:'),
		'all_items' => __( 'All Trailer'),
		'add_new_item' => __( 'Add New Trailer'),
		'add_new' => __( 'Add New'),
		'new_item' => __( 'New Trailer'),
		'edit_item' => __( 'Edit Trailer'),
		'update_item' => __( 'Update Trailer'),
		'view_item' => __( 'View Trailer'),
		'view_items' => __( 'View Trailer'),
		'search_items' => __( 'Search Trailer'),
		'not_found' => __( 'Not found'),
		'not_found_in_trash' => __( 'Not found in Trash'),
		'featured_image' => __( 'Featured Image'),
		'set_featured_image' => __( 'Set featured image'),
		'remove_featured_image' => __( 'Remove featured image'),
		'use_featured_image' => __( 'Use as featured image'),
		'insert_into_item' => __( 'Insert into Trailer'),
		'uploaded_to_this_item' => __( 'Uploaded to this Trailer'),
		'items_list' => __( 'Trailer list'),
		'items_list_navigation' => __( 'Trailer list navigation'),
		'filter_items_list' => __( 'Filter Trailer list'),
	);
	$args = array(
		'label' => __( 'Trailer'),
		'description' => __( ''),
		'labels' => $labels,
		'menu_icon' => 'dashicons-video-alt',
		'supports' => array('title', 'editor','thumbnail','page-attributes'),
		'taxonomies' => array(),
		'public' => true,
		'show_ui' => true,
		'show_in_menu' => true,
		'menu_position' => 5,
		'show_in_admin_bar' => true,
		'show_in_nav_menus' => true,
		'can_export' => true,
		'has_archive' => true,
		'hierarchical' => false,
		'exclude_from_search' => false,
		'show_in_rest' => true,
		'publicly_queryable' => true,
		'capability_type' => 'post',
	);
	register_post_type( 'trailer', $args );

}
add_action( 'init', 'create_trailer');


function trailer_loop()
{
    ob_start();
    wp_reset_postdata();


    $arg = array(
        'post_type' => 'trailer',
        'posts_per_page' => -1,
        'order' => 'ASC',
    );

    $themeslider = new WP_Query($arg);
	$y = 1;
?>

    <div class="main_trailer_row">
        <?php if ($themeslider->have_posts()) : ?>
            <?php while ($themeslider->have_posts()) : ?>
                <?php $themeslider->the_post(); ?>
					<div class="container-fluid trailer_innerMain" style="background:url( <?php if ( has_post_thumbnail() ) { the_post_thumbnail_url('full');} ?> )">
						<div class="row align-item-end">
							<div class="col-md-6">
								<div class="tailer_img">
									<h4><?php the_title(); ?></h4>
									<div class="home_content"><?php echo wp_trim_words( get_the_content(), 40, '' ); ?></div>
								</div>
							</div>
							<div class="col-md-6">
								<div class="video-name">
								<span>Video</span>
								</div>
								<a href="<?php the_field('traile_url'); ?>" target="_blank" class="video-image">
									<div class="trailer-cont">
										<img class="img-fluid rotating" src="<?php the_field('traile_img'); ?>" alt="">
									</div>
								</a>
							</div>
						</div>
					</div>
            <?php endwhile; ?>
        <?php endif; ?>
    </div>
<?php
    wp_reset_postdata();
    return '' . ob_get_clean();
}
add_shortcode( 'trailer_code', 'trailer_loop' );





// js
jQuery('.main_movies_row').slick({
  slidesToShow:4,
  slidesToScroll: 1,
  autoplay: true,
  arrows: true,
  centerMode: true,
  dots: false,
	nextArrow:"<span class='list-icon fas fa-arrow-left'></span>",
  prevArrow:"<span class='list-icon fas fa-arrow-right'></span>",
  adaptiveHeight: true,
  autoplaySpeed: 3000,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
       slidesToShow: 2
      }
    },
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
       slidesToShow: 1
      }
    }
  ]
});

jQuery('.main_trailer_row').slick({
  slidesToShow:1,
  slidesToScroll: 1,
  autoplay: true,
  arrows: true,
  centerMode: false,
  dots: true,
	nextArrow:"<span class='list-icon fas fa-arrow-right'></span>",
  prevArrow:"<span class='list-icon fas fa-arrow-left'></span>",
  adaptiveHeight: false,
  autoplaySpeed: 3000,
});
function add_google_tag() {?>
  
<!-- Google tag (gtag.js) --> 
<script async src="https://www.googletagmanager.com/gtag/js?id=G-H75ENPM26K"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-H75ENPM26K'); </script>

<?php 
    
}
add_action( 'wp_head', 'add_google_tag' );
function add_google_tag() {?>
  
<!-- Google tag (gtag.js) --> 
<script async src="https://www.googletagmanager.com/gtag/js?id=G-H75ENPM26K"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-H75ENPM26K'); </script>

<?php 
    
}
add_action( 'wp_head', 'add_google_tag' );
UserDrinks.update({}, { $rename: { "creator" : "user" } }, { multi: true }, callback)
<?php 
    if ( is_home() || is_front_page() ) { ?>
<?php } else { ?>
    <div class="inner-banner" style="background:url(
    <?php
    if (has_post_thumbnail()) { ?>
        <?php echo get_the_post_thumbnail_url($post->ID, 'full') ?>
    <?php } else { ?>
        <?php bloginfo('stylesheet_directory'); ?>/images/default.jpg<?php } ?>) no-repeat center center / cover;">
        <h2><?php the_title(); ?></h2>
    </div>

<?php }?>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.11/css/intlTelInput.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.11/js/intlTelInput.min.js"></script>

<div class="input-field">
    <input type="tel" id="intl_phone_number" minlength="10" />
</div>

<script>
    const phoneInputField = document.querySelector("#intl_phone_number");
    const phoneInput = window.intlTelInput(phoneInputField, {
        separateDialCode: true,
        hiddenInput: "phoneno",
        utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.11/js/utils.js"
    });
</script>
///short code 
[wpens_easy_newsletter firstname="no" lastname="no" button_text="SIGN UP"]

var input = document.querySelectorAll('.wpens_email');
input.forEach(function(single){
   single.setAttribute('placeholder', 'YOUR EMAIL');
});


//for elementor
function ti_custom_javascript() {
    ?>
        <script>
          var input = document.querySelectorAll('.wpens_email');
input.forEach(function(single){
   single.setAttribute('placeholder', 'Enter your email to subscribe');
});
        </script>
    <?php
}
add_action('wp_footer', 'ti_custom_javascript');
// ADD SHORTCODE [social_media];
add_shortcode('social_media', 'codex_social_media');
function codex_social_media() {
ob_start();
    wp_reset_postdata(); 
    $facebook = get_field('facebook', 'option');
    $twitter = get_field('twitter', 'option');
    $google_plus =  get_field('google_plus', 'option');
    ?>

<div class="social-icons">
	<ul>
	    <?php
	    if($facebook == true){ ?>
	          <li><a href="<?php the_field('facebook_page_url', 'option'); ?>" target="_blank"><i class="fa fa-facebook"></i></a></li>
	   <?php } ?>
      <?php
	    if($twitter == true){ ?>
        <li><a href="<?php the_field('twitter_page_url', 'option'); ?>" target="_blank"><i class="fa fa-twitter"></i></a></li>
        <?php } ?>
        <?php
	    if($google_plus == true){ ?>
        <li><a href="<?php the_field('google_plus_page_url', 'option'); ?>" target="_blank"><i class="fa fa-google-plus"></i></a></li>
        <?php } ?>
	</ul>

</div>  <!-- Social Media  -->
<!-- -----------------------marquee   ---------------------- -->
        <section class="marquee-sec">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                    <marquee width="100%" direction="left" height="22px">
                        <p>
                Section 102(b) of the DMCA amends section 104 of the Copyright Act and adds new definitions to section 101 of the Copyright Act in order to extend the protection of U.S. law to those                     works required to be protected under the WCT and the WPPT.
                        </p>
                    </marquee>
                    </div>
                 </div>
            </div>
        </section>
====
section.marquee-sec {
    background-color: #f9c511;
    padding: 10px;
    position: sticky;
    top: 0;
    z-index: 10;
}
@font-face {
    font-family: "ClashDisplay";
    src: url("fonts/ClashDisplay-Regular.woff");
    font-weight: 400;
}
fetch('https://geolocation-db.com/json/')
  .then(res => res.json())
  .then(prom => console.log(prom));
.section-2.section3 .section2-wrap .container > div:nth-child(2) .box-wrap > div:nth-child(even) .sec2-box
$("#file").change(function() {
      filename = this.files[0].name;
      $('.filename').text(filename);
    });
add_shortcode('contact_us', 'contact_usFunc');
function contact_usFunc() { ?>
<div class="footer-item">
	<h6 class="widgettitle"><?php _e('Our Office') ?></h6>
<ul class="contact_info">
	<li>
		<div class="info_wrapper">
			<div class="info_img">
				<?php $imgurl = get_field('address_image' ,'option'); ?>
				<img src="<?php echo $imgurl; ?>">
			</div>
			<div class="info_content">
				<p><strong>ADDRESS</strong><?php echo get_field('company_address','option'); ?></p>
			</div>
		</div>
	</li>
	<li>
		<div class="info_wrapper">
			<div class="info_img">
				<?php $tel_image =  get_field('tel_image'  ,'option'); ?>
				<img src="<?php echo $tel_image; ?>">
			</div>
			<div class="info_content">
				<p><strong>Call Us 24/7</strong></p><a href="tel:<?php echo get_field('company_number_title','option'); ?>"><?php echo get_field('company_number_title','option'); ?></a>
			</div>
		</div>
	</li>
	<li>
		<div class="info_wrapper">
			<div class="info_img">
				<?php $email_image =  get_field('email_image' ,'option'); ?>
				<img src="<?php echo $email_image; ?>">
			</div>
			<div class="info_content">
				<p><strong>EMAIL</strong></p><a href="mailto:<?php echo get_field('company_email','option'); ?>"><?php echo get_field('company_email','option'); ?></a>
			</div>
		</div>
	</li>
</ul>
</div>
<?php }
$(document).ready(function(){
  $('.yourclass').trigger('click');
});
<?php
    /**
     Template Name: Blog
     */
    
    get_header(); ?>
<blog>
<?php 

if( get_field('page_builder') ){
        $page_builder = get_field('page_builder');
        //echo print_r( $page_builder);

        foreach ($page_builder as $key => $section) {
            include('inc/inc-'.$section['acf_fc_layout'].'.php');
        }
    } 

?>


<div class="blog-section with-bg">
    <div class="container">
        <div class="row">
            <div class="col-md-7">
                <div id="blog_loop" class="row">
                    <?php
                        // WP_Query arguments
                        $args = array(
                          'post_type'            => 'post',
                          'post_status'          => 'publish',
                          'order'                => 'DESC',
                          'posts_per_page'     =>  -1,
                        );
                          $po = new WP_Query($args);
                         ?>
                    <?php if ($po->have_posts() ): ?>
                    <?php while ( $po->have_posts() ) : ?>
                    <?php $po->the_post(); ?>  
                    <div class="col-md-6 col-sm-12 item_loop">
                        <div class="blog-item">
                            <div class="thumbnail-blog">
                                <a href="<?php the_permalink(); ?>" >
                                    <?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
                                    <div class="image" style="background-image: url('<?php echo $thumb['0'];?>')"></div>
                                </a>
                            </div>
                            <div class="blog-content">
                                <h3 class="title"><a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></h3>
                                <div class="except">
                                    <?php $content=get_the_content(); echo substr($content,0, 250)." ..."; ?>
                                </div>
                                <div class="meta"> 
                                  <div class="asign-author"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/icon-author.png" width="19" height="19" alt=""> <?php the_author(); ?> </div> 
                                  <div class="entry-date"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/icon-calander.png" width="18" height="18" alt=""> <?php echo get_the_date(); ?></div>
                                </div>
                            </div>
                        </div>
                    </div> 
                    <?php endwhile; ?>
                    <?php  endif; ?>
                </div>
            </div> <!-- end col-md-7 -->
            <div class="col-md-4">
               <?php get_sidebar(); ?>
                <!-- sidebar -->
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="stl-head text-center">
                    <div class="sub-head">latest blogs</div>
                    <h3>Trending <span class="multicol">Stories</span></h3>
                </div>
                <div id="blog_trend" class="row">
                    <?php
                        // WP_Query arguments
                        $args = array(
                          'post_type'            => 'post',
                          'post_status'          => 'publish',
                          'order'                => 'DESC',
                          'posts_per_page'     =>  -1,
                          'tax_query'        => array(
                              array(
                                  'taxonomy' => 'category',
                                  'field'    => 'slug',
                                  'terms'    => 'trending-stories',
                              ),
                          ),
                        );
                          $po = new WP_Query($args);
                         ?>
                    <?php if ($po->have_posts() ): ?>
                    <?php while ( $po->have_posts() ) : ?>
                    <?php $po->the_post(); ?>  
                        <div class="col-md-4 col-sm-12 trending">
                            <div class="blog-item">
                                <div class="thumbnail-blog">
                                    <a href="<?php the_permalink(); ?>" >
                                        <?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
                                        <div class="image" style="background-image: url('<?php echo $thumb['0'];?>')"></div>
                                    </a>
                                </div>
                                <div class="blog-content">
                                    <h3 class="title"><a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></h3>
                                    <div class="except">
                                        <?php $content=get_the_content(); echo substr($content,0, 250)." ..."; ?>
                                    </div>
                                    <div class="meta"> 
                                      <div class="asign-author"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/icon-author.png" width="19" height="19" alt=""> <?php the_author(); ?> </div> 
                                      <div class="entry-date"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/icon-calander.png" width="18" height="18" alt=""> <?php echo get_the_date(); ?></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <?php endwhile; ?>
                    <?php  endif; ?> 
                </div>
            </div>
        </div>
    </div>
</div>
</blog>
</section>
<?php get_footer(); ?>
//Pictures
 <picture>
       <source
    media="(max-width:599px) and (prefers-color-scheme: light)"
    srcset="images/bg-mobile-light.jpg"
    />
      <source
    media="(max-width:599px) and (prefers-color-scheme: dark)"
    srcset="images/bg-mobile-dark.jpg"
    />
      <source
    media="(min-width:600px) and (prefers-color-scheme: light)"
    srcset="images/bg-desktop-light.jpg"
    />
      <source
    media="(min-width:600px) and (prefers-color-scheme: dark)"
    srcset="images/bg-desktop-dark.jpg"
    />
      <img
    src="images/bg-mobile-light.jpg"
    aria-hidden="true"
    class="background-img"
    alt=""
    />
</picture>

//CSS
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #25273c;
    --color-primary-text: #e4e5f1;
    --color-secondary-text: #cacde8;
    --color-deleted-text: #4d5067;
    --color-circle: #777a92;
    --color-background: #161722;
    --color-background-hover: #1c1e35;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --color-white: #ffffff;
    --color-primary: #ffffff;
    --color-primary-text: #494c6b;
    --color-secondary-text: #9394a5;
    --color-light-text: #d4d4d4;
    --color-active: #3a7cfd;
    --color-circle: #d6d6d6;
    --color-background: #fafafa;
    --color-background-hover: #ebebeb;
    --color-background-modal: rgba(73, 76, 107, 0.6);
    --color-error: #cd1237;
  }
}


//JS
let dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
//Show which prefers-color-scheme user has before the page loads
window.matchMedia('(prefers-color-scheme: dark)');
if (dark) {
  //Do something
} else {
  //Do something
}
//HTML
  <div class="container">
      <ul class="list">
        <li class="list--item" draggable="true">1</li>
        <li class="list--item" draggable="true">2</li>
        <li class="list--item" draggable="true">3</li>
        <li class="list--item" draggable="true">4</li>
      </ul>
    </div>

//CSS
* {
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  width: min(90%, 500px);
  background-color: #333;
}

.list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  list-style: none;
  padding: 1rem;
}

.list--item {
  padding: 1rem;
  background-color: #efefef;
}

.dragging {
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  transition: 0.3s;
}

//JS
const list = document.querySelector('.list');
const items = document.querySelectorAll('.list--item');

const getDragAfterElement = (y) => {
  //Selects all the elements in the container that are not being dragged
  const draggableElements = [
    ...list.querySelectorAll('.list--item:not(.dragging)'),
  ];

  //Loop through the elements' list and determine which single element is right after our mouse cursor based on the y position that we pass in
  return draggableElements.reduce(
    (closest, child) => {
      const box = child.getBoundingClientRect();
      //Get half of the box on the y axis
      const offset = y - box.top - box.height / 2;
      //First the number needs to be negative, that is how we know that we are hovering over another child element, but we need the closest one, so the one which offset is the smallest
      if (offset < 0 && offset > closest.offset) {
        return { offset: offset, element: child };
      } else {
        return closest;
      }
    },
    { offset: Number.NEGATIVE_INFINITY }
  ).element;
};

items.forEach((item) => {
  item.addEventListener('dragstart', () => {
    item.classList.add('dragging');
  });
  item.addEventListener('dragend', () => {
    item.classList.remove('dragging');
  });
});

list.addEventListener('dragover', (e) => {
  e.preventDefault();

  const draggable = document.querySelector('.dragging');

  const afterElement = getDragAfterElement(e.clientY);
  if (afterElement == null) {
    //going to be added as the last child if no element is after
    list.appendChild(draggable);
  } else {
    //going to be added as before the next element
    list.insertBefore(draggable, afterElement);
  }
});
//file name 
single.(postname).php


<?php get_header();
// $add_tours = get_field('add_tours');
$tour_imformation = get_field('tour_information');
$destination_names = $tour_imformation['destination_name'];
$hotel_names = $tour_imformation['featured_hotels'];


?>
<main class="single-destination">
	<!-- ========================= Banner ========================== -->
	<div class="banner" style="background-image: url(<?php the_post_thumbnail_url() ?>);">
		<div class="title">
			<h1><?php the_title(); ?></h1>
		</div>
	</div>

	<!-- ============================ grid sec =========================== -->

	<section class="grid-sec">
		<div class="wrapper-container">
			<div class="wrapper">

				<div class="wapper-item">
					<div class="tab-sec">
						<div class="tabs">
							<ul id="tabs-nav">
								<li><a href="#tab1">INFORMATION</a></li>
								<li><a href="#tab2">TOUR PLAN</a></li>
								<li><a href="#tab3">LOCATION</a></li>
								<li><a href="#tab4">GALLERY</a></li>
								<li><a href="#tab5">REVIEWS</a></li>
							</ul> <!-- END tabs-nav -->

							<div id="tabs-content">
								<div id="tab1" class="tab-content">
									<div class="tab-data">
										<h2>INFORMATION</h2>
										<p><?php the_content(); ?></p>
										<ul>
											<li>
												<ul>
													<li><strong>Destination</strong></li>
													<li>
														<ul>

															<?php
															foreach ($destination_names as $key => $value) {
																$destination_cat_names = get_the_category_by_ID($value);
																$destination_cat_url = get_category_link($value);
															?>
																<li>
																	<i class="fa-solid fa-map-location"></i><a href="<?php echo $destination_cat_url; ?>" title="<?php echo $destination_cat_names; ?>"><?php echo $destination_cat_names; ?></a>
																</li>
															<?php }
															?>
														</ul>
													</li>
												</ul>
											</li>
											<li>
												<ul>
													<li><strong>Includes</strong></li>
													<li><?php echo $tour_imformation['include']; ?></li>
												</ul>
											</li>
											<li>
												<ul>
													<li><strong>Excludes</strong></li>
													<li><?php echo $tour_imformation['excludes']; ?></li>	
												</ul>
											</li>
											<li>
												<ul>
													<li><strong>Featured Hotels</strong></li>
													<li>
														<ul>
															<?php
															foreach ($hotel_names as $key => $value) { ?>
																<li>
																	<i class="fa-solid fa-hotel"></i><a href="<?php the_permalink($value); ?>" title="<?php the_title_attribute($value); ?>"><?php echo get_the_title($value); ?></a>
																</li>
															<?php }
															?>
														</ul>

													</li>
												</ul>
											</li>
										</ul>
										<?php echo do_shortcode('[gravityform id="1" title="false" description="false" ajax="true"]') ?>
									</div>
								</div>
								<div id="tab2" class="tab-content">
									<div class="tour-plan-data">
										<ul>
											<li>
												<h2>Itinerary Details</h2>
												<p>A detailed itinerary will be distributed 45 days prior to departure date. Please use the trip highlights in the interim.</p>
											</li>
										</ul>
									</div>
								</div>
								<div id="tab3" class="tab-content">
									<div class="location-data">
										<h2>LOCATION</h2>
										<div class="map">
											<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d210702.826143149!2d150.47390740491318!3d-34.39545731740385!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6b130871b4cadc43%3A0x238c1ad4d5e9ac69!2sUpper%20Nepean%2C%20New%20South%20Wales%2C%20Australia!5e0!3m2!1sen!2s!4v1667428646506!5m2!1sen!2s" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
										</div>
									</div>
								</div>
								<div id="tab4" class="tab-content">
									<div class="gallery-data">
										<ul>
											<li><a href="" class="fancybox"><img src="<?php echo get_stylesheet_directory_uri() ?>/images/01.jpg" alt=""></a></li>
											<li><a href="" class="fancybox"><img src="<?php echo get_stylesheet_directory_uri() ?>/images/02.jpg" alt=""></a></li>
											<li><a href="" class="fancybox"><img src="<?php echo get_stylesheet_directory_uri() ?>/images/03.jpg" alt=""></a></li>
											<li><a href="" class="fancybox"><img src="<?php echo get_stylesheet_directory_uri() ?>/images/04.jpg" alt=""></a></li>
											<li><a href="" class="fancybox"><img src="<?php echo get_stylesheet_directory_uri() ?>/images/05.jpg" alt=""></a></li>
											<li><a href="" class="fancybox"><img src="<?php echo get_stylesheet_directory_uri() ?>/images/06.jpg" alt=""></a></li>

										</ul>
									</div>
								</div>
								<div id="tab5" class="tab-content">
									<?php echo do_shortcode('[gravityform id="2" title="false" description="false"]') ?>
								</div>
							</div> <!-- END tabs-content -->

						</div> <!-- END tabs -->
					</div>
				</div>
			</div>
		</div>
	</section>



</main>

<?php get_footer();
function create_product() {

$labels = array(
    'name' => _x( 'Product', 'Post Type General Name'),
    'singular_name' => _x( 'Product', 'Post Type Singular Name'),
    'menu_n ame' => _x( 'Products', 'Admin Menu text'),
    'name_admin_bar' => _x( 'Products', 'Add New on Toolbar'),
    'archives' => __( 'Products Archives'),
    'attributes' => __( 'Products Attributes'),
    'parent_item_colon' => __( 'Parent Products:'),
    'all_items' => __( 'All Products'),
    'add_new_item' => __( 'Add New Products'),
    'add_new' => __( 'Add New'),
    'new_item' => __( 'New Products'),
    'edit_item' => __( 'Edit Products'),
    'update_item' => __( 'Update Products'),
    'view_item' => __( 'View Products'),
    'view_items' => __( 'View Products'),
    'search_items' => __( 'Search Products'),
    'not_found' => __( 'Not found'),
    'not_found_in_trash' => __( 'Not found in Trash'),
    'featured_image' => __( 'Featured Image'),
    'set_featured_image' => __( 'Set featured image'),
    'remove_featured_image' => __( 'Remove featured image'),
    'use_featured_image' => __( 'Use as featured image'),
    'insert_into_item' => __( 'Insert into Products'),
    'uploaded_to_this_item' => __( 'Uploaded to this Products'),
    'items_list' => __( 'Products list'),
    'items_list_navigation' => __( 'Products list navigation'),
    'filter_items_list' => __( 'Filter Products list'),
);
$args = array(
    'label' => __( 'Products'),
    'description' => __( ''),
    'labels' => $labels,
    'menu_icon' => 'dashicons-admin-page',
    'supports' => array('title', 'editor', 'excerpt', 'thumbnail','page-attributes'),
    'taxonomies' => array(),
    'public' => true,
    'show_ui' => true,
    'show_in_menu' => true,
    'menu_position' => 5,
    'show_in_admin_bar' => true,
    'show_in_nav_menus' => true,
    'can_export' => true,
    'has_archive' => true,
    'hierarchical' => false,
    'exclude_from_search' => false,
    'show_in_rest' => true,
    'publicly_queryable' => true,
    'capability_type' => 'post',
);
register_post_type( 'products', $args );

}
add_action( 'init', 'create_product');
function product_loop()
{
ob_start();
wp_reset_postdata();


$arg = array(
    'post_type' => 'products',
    'posts_per_page' => -1,
);

$themeslider = new WP_Query($arg);
?>

<div class="product_slider">
    <?php if ($themeslider->have_posts()) : ?>
        <?php while ($themeslider->have_posts()) : ?>
            <?php $themeslider->the_post();
            $url = wp_get_attachment_url(get_post_thumbnail_id($themeslider->ID));
            ?>
                <div class="cbd_main">
                    <div class="cbd_img">
                        <?php $url = wp_get_attachment_url(get_post_thumbnail_id($themeslider->ID)); ?>
                        <img src="<?php echo $url; ?>">
                    </div>
                    <div class="cbd_inner">
                        <h1><?php the_title(); ?></h1>
                        <div class="home_content"><?php echo wp_trim_words( get_the_content(), 40, '' ); ?></div>
                    </div>
                </div>

        <?php endwhile; ?>
    <?php endif; ?>
</div>
<?php
wp_reset_postdata();
return '' . ob_get_clean();
}
add_shortcode( 'product_code', 'product_loop' );


//////////////////////jss

jQuery('.product_slider').slick({
  dots: false,
  infinite: true,
	autoplay: false,
	centerPadding:'100px',
	arrows: false,
  speed: 300,
	centerMode: true,
 slidesToShow: 3,
 slidesToScroll: 1,
 responsive: [
   {
     breakpoint: 1024,
     settings: {
       slidesToShow: 3,
       slidesToScroll: 1,
       infinite: false,
       dots: false
     }
   },
   {
     breakpoint: 600,
     settings: {
       slidesToShow: 3,
       slidesToScroll: 1
     }
   },
   {
     breakpoint: 480,
     settings: {
       slidesToShow: 1,
       slidesToScroll: 1
     }
   }
 ]
});

$('.green').click(function() {
  $('.timer').css('background', 'green');
});
$('.red').click(function() {
  $('.timer').css('background', 'red');
});
<div style="overflow-x: auto;">
            <form action="" method="post">
              {% csrf_token %}
            <table class="table table-hover mt-4" id="childTable">
              <thead class="text-color fs-medium fw-bold " style="background-color:#e2edf5;">
                <tr>
                  <th>No</th>
                  <th class="text-center">PLANNED EXPENSES</th>
                  <th class="text-center">JAN</th>
                  <th class="text-center">FEB</th>
                  <th class="text-center">MAR</th>
                  <th class="text-center">APR</th>
                  <th class="text-center">MAY</th>
                  <th class="text-center">JUN</th>
                  <th class="text-center">JUL</th>
                  <th class="text-center">AUG</th>
                  <th class="text-center">SEP</th>
                  <th class="text-center">OCT</th>
                  <th class="text-center">NOV</th>
                  <th class="text-center">DEC</th>
                  <th class="text-center">Action</th>
                </tr>
              </thead>
              <tbody>
                {% for i in LcaBudget %}
                <tr class="trParent">
                  <th class="fs-medium index" scope="row">{{forloop.counter}}</th>
                  <td>{{i.expenses}}</td>
                  <td>{{i.jan}}</td>
                  <td>{{i.feb}}</td>
                  <td>{{i.mar}}</td>
                  <td>{{i.apr}}</td>
                  <td>{{i.may}}</td>
                  <td>{{i.jun}}</td>
                  <td>{{i.jul}}</td>
                  <td>{{i.aug}}</td>
                  <td>{{i.sep}}</td>
                  <td>{{i.oct}}</td>
                  <td>{{i.nov}}</td>
                  <td>{{i.dec}}</td>
                  <td>
                    <a href="/Qapi_Leadership/LcaBudget/{{i.pk}}/update/"><i class="fa-2x bi bi-pencil"></i></a>
                  </td>
                </tr>
                {% endfor %}
                <tr class="trParent">
                  <th class="fs-medium index" scope="row">1</th>
                  <input type="hidden" name="user" value="{{request.user.pk}}">
                  <td>
                    <input type="number" min="0" step="0.01" name="expenses" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="jan" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="feb" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="mar" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="apr" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="may" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="jun" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="jul" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="aug" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="sep" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="oct" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="nov" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <input type="number" min="0" step="0.01" name="dec" class="form-control fs-medium" required />
                  </td>
                  <td>
                    <i onclick="myFunction(event)" class="fa-2x bi bi-trash-fill"></i>
                  </td>
                </tr>
              </tbody>
            </table>
            <button onclick="childrenRow()" class="btn btn-primary" type="button" id="addrow">Add new line</button>
            <button class="btn btn-primary" type="submit">Save</button>
          </form>
            <script>
              var i = 1;
              function childrenRow() {
                i++;
                $('#childTable').find('tbody').append('<tr class="trParent"><th class="fs-medium index" scope="row">' + i + '</th><input type="hidden" name="user" value="{{request.user.pk}}"><td><input type="number" min="0" step="0.01" name="expenses" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="jan" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="feb" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="mar" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="apr" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="may" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="jun" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="jul" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="aug" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="sep" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="oct" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="nov" class="form-control fs-medium" required /></td><td><input type="number" min="0" step="0.01" name="dec" class="form-control fs-medium" required /></td><td><i onclick="myFunction(event)" class="fa-2x bi bi-trash-fill"></i></td></tr>');
              }
            </script>
            <script>
              function myFunction(e) {
                // document.getElementById("childTable").deleteRow(0);
                e.currentTarget.closest(".trParent").remove();
              }
            </script>
          </div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Increasing and Decreasing Image Size</title>
<script>
    function zoomin(){
        var myImg = document.getElementById("sky");
        var currWidth = myImg.clientWidth;
        if(currWidth == 500){
            alert("Maximum zoom-in level reached.");
        } else{
            myImg.style.width = (currWidth + 50) + "px";
        } 
    }
    function zoomout(){
        var myImg = document.getElementById("sky");
        var currWidth = myImg.clientWidth;
        if(currWidth == 50){
            alert("Maximum zoom-out level reached.");
        } else{
            myImg.style.width = (currWidth - 50) + "px";
        }
    }
</script>
</head>
<body>
    <p>
        <button type="button" onclick="zoomin()">Zoom In</button>
        <button type="button" onclick="zoomout()">Zoom Out</button>
    </p>
    <img src="/pngwing.com.png" id="sky" width="250" alt="Cloudy Sky">
</body>
</html>
<!DOCTYPE php>
<?php 
error_reporting(null);
$city = $_POST['get'];
$Url = file_get_contents("http://api.openweathermap.org/data/2.5/weather?q=".$city."&units=metric&appid=73c340f4df1ee2a07dca01d0ce48bf48");
$data=json_decode($Url,true);
// echo "<pre>";
// print_r($data);


$dataurl=file_get_contents("https://pixabay.com/api/?key=29428143-1b7675892c7e12c1f8fdd4157&q=".$_POST['get']."&image_type=photo");
$test=json_decode($dataurl,true);
// echo "<pre>";
// print_r($test);
$flag='flag';
$back=$test['hits'][rand(1,19)]['largeImageURL'];



// echo "<pre>";
// print_r($test);
// $lon=$data['coord']['lon'];
// $lat=$data['coord']['lat'];
// $newtest=file_get_contents('https://api.openweathermap.org/data/2.5/weather?lat='.$lat.'&lon='.$lon.'&appid=73c340f4df1ee2a07dca01d0ce48bf48');
// $test1=json_decode($newtest,true);
$weatherAPI="a595f443b58d4c97962234220222208";
$Weatherlink=file_get_contents('http://api.weatherapi.com/v1/current.json?key='.$weatherAPI.'&q='.$city.'');
$getdata=json_decode($Weatherlink,true);

//   echo "<pre>";
// print_r($getdata);
$cnt=$getdata['location']['country'];
$ctname="a595f443b58d4c97962234220222208";
$getct=file_get_contents("http://api.weatherapi.com/v1/current.json?key=".$ctname."&q=".$_POST['get']);
$gvdata=json_decode($getct,true);
$loc=$gvdata["location"]["country"];
$imurl=$gvdata['current']['condition']['icon'];

// echo "<pre>";
// print_r($dta);
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="https://kit.fontawesome.com/3ade12e83a.js" crossorigin="anonymous"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
    <title>Weather</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=DynaPuff&display=swap');

       .material-symbols-outlined {
         font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD'0,
        'opsz' 48
}
       .button{
        padding: 10px;
        float: right;
        width: 100px;
        border: none;
        border-radius: 10px;
        background-color: #038cfc;
        color: white;
       }   
       .button:hover{
        background-color: #055ca3;
       }  

       .wmain{
        width:100%;
        display: flex;
        flex-direction: column;
            
            align-items: center;
            justify-content: center;
       }
        body{
           
            padding: 5%;
            font-family: 'DynaPuff', cursive;
            overflow:scroll;
          
        }
      .backg{
        margin: 0%;
        padding: 0%;
        position: absolute;
        width: 100%;
        height: 200%;
        z-index: -1;
        left:0%;
        top: 0%;
      }
      .show{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 30px;
      }
      #box{
        display: flex;
        width: 100px;
        height: 100px;
        backdrop-filter: blur(50px);
        border-radius:15px;
        box-shadow: 1px 1px 10px black;
        color: white;
        align-items: center;
        justify-content: center;

      }
      .ico{
        display: flex;
        width: 200px;
        height: 200px;
        backdrop-filter: blur(50px);
        border-radius:15px;
        box-shadow: 1px 1px 10px black;
        color: white;
        align-items: center;
        justify-content: center;
        margin: 30px;
        flex-direction: column;

      }
      .search{
        border: none;
        border-radius: 30px;
        padding: 10px;
      }
      .sbar{
         border: none;
        border-radius: 30px;
        padding: 10px;
        width: 300px;

      }
      .heade{
        width: 200px;
        height:200px;
        backdrop-filter:blur(50px);
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      }
    </style>
</head>
<img class="backg" src="<?=$back ?>">
<body>
    <div class="nav">
      <a href="signup.php">
      <button name="bt" class="button">
        Source Code
      </button>
      </a>
    </div>
    <div class="wmain">

        <form method="POST">
        <div class="search"><input class="sbar" name="get" value="india" type="search"></div>
        </form>
<div class="heade" style="box-shadow:1px 1px 50px black;">
        <div class="name"><h1 style="color: white;"><?=$_POST['get'];?></h1></div>
            <img width="50px" src="https://countryflagsapi.com/png/<?=$cnt?>">
            </div>
       <div class="ico">
       <img  src="<?=$imurl?>" >
        <div class="ne"><h1><?= $data['weather']['0']['main']?></h1></div>

          <div id="bo" class="temp"><i style="color: yellow;" class="fa-solid fa-temperature-full"></i>&nbsp<?=round($data['main']['temp']) ?>deg</div>
        </div>
        <div class="show">
     
            <div id="box" class="hum"><span style="color: skyblue;" class="material-symbols-outlined">
humidity_high
</span><?=$data['main']['humidity'] ?></div>
            <div id="box" class="press"><span style="color: orange;" class="material-symbols-outlined">
compress
</span><?=$data['main']['pressure'] ?></div>
            <div id="box" class="min"><span style="color: green;" class="material-symbols-outlined">
thermometer
</span><?=$data['main']['temp_min'] ?></div>
            <div id="box" class="max"><span style="color: red;" class="material-symbols-outlined">
thermometer
</span><?=$data['main']['temp_max'] ?></div>
            <div id="box" class="wind"><i style="color: green;"  class="fa-solid fa-wind"></i>&nbsp<?=$data['wind']['speed'] ?></div>
        </div>
        
    </div>
    
</body>

</html>

(function (d) {
    var w = d.documentElement.offsetWidth,
        t = d.createTreeWalker(d.body, NodeFilter.SHOW_ELEMENT),
        b;
    while (t.nextNode()) {
        b = t.currentNode.getBoundingClientRect();
        if (b.right > w || b.left < 0) {
            t.currentNode.style.setProperty('outline', '1px dotted red', 'important');
            console.log(t.currentNode);
        }
    };
}(document));
type="text" name="" id="today_date" onblur=" type='text'"
                    onfocus= "type='date'"
<!DOCTYPE html>
<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>Document</title>
    <style>
        input[type="checkbox"]{
            accent-color: rgb(51, 255, 0);
        }
        input[type="radio"]{
            accent-color: red;
        }
        input[type="range"]{
            accent-color: red;
        }
    </style>
</head>
<body>
    <input type="checkbox" name="test" id="test">
    <input type="radio" name="test1" id="test1">
    <input type="range" name="test2" id="test2">
    <input type="date" name="test3" id="test3">
</body>
</html>
<!DOCTYPE html>
<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>Document</title>
    <style>
        input[type="checkbox"]{
            accent-color: rgb(51, 255, 0);
        }
        input[type="radio"]{
            accent-color: red;
        }
        input[type="range"]{
            accent-color: red;
        }
    </style>
</head>
<body>
    <input type="checkbox" name="test" id="test">
    <input type="radio" name="test1" id="test1">
    <input type="range" name="test2" id="test2">
    <input type="date" name="test3" id="test3">
</body>
</html>
type="text" name="" id="today_date" onblur=" type='text'"
                    onfocus= "type='date'"
.form-control:focus {
        border-color: #28a745;
        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
    } 
let a = '{"userId": 1, "id": 1, "title": "delectus aut autem", "completed": false}';
let b = JSON.parse(a);
document.getElementById("divid").innerHTML = b.title;

// Using fetch
fetch ('https://jsonplaceholder.typicode.com/todos/1')
.then(res => res.json())
.then(json => document.getElementById("divid").innerHTML = json.title);
   <div>
        <div class="rounded-circle test position-relative" style="width: 150px; height:150px; overflow: hidden;">
            <img id="imguplod" width="100%" src="./images/Ellipse 523.png" alt="">
            <label class="cam_img" for="imgInp">
                <img  width="100%" src="./images/group.png" alt="">
            </label>
            <input type="file" name="logo" id="imgInp" style="display: none;" accept="image/*">
        </div>

        <script>
            imgInp.onchange = evt => {
              const[file] = imgInp.files;
              if (file) {
                imguplod.src = URL.createObjectURL(file);
              }
            }
          </script>
        
      </div>
btns = document.getElementsByClassName("saveBtn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function () {
    //Add function here
  });
}
const searchForm = document.querySelector("form");
2
const searchResultDiv = document.querySelector(".search-result");
3
const container = document.querySelector(".container");
4
let searchQuery = "";
5
const APP_ID = "Use Your Own App ID Here";
6
const APP_key = "Use Your Own App Key Here";
7
// console.log(container)
8
searchForm.addEventListener("submit", (e) => {
9
  e.preventDefault();
10
  searchQuery = e.target.querySelector("input").value;
11
  fetchAPI();
12
});
13
​
14
async function fetchAPI() {
15
  const baseURL = `https://api.edamam.com/search?q=${searchQuery}&app_id=${APP_ID}&app_key=${APP_key}&from=0&to=20`;
16
  const response = await fetch(baseURL);
    $('.tabs-nav a').on('click', function (event) {
        event.preventDefault();
        $('.tabs-nav li').removeClass('tab-active');
        $(this).parent().addClass('tab-active');
        $('.tabs-stage section').hide();
        $($(this).attr('href')).show();

        if ($('#tab-1').css('display') == 'none') {
            $('.box-filters').hide();
        } else {
            $('.box-filters').show();
        }
    });
// js
#!/usr/bin/env php
<?php
foreach (glob('*.js') as $js) {
   echo "wp_enqueue_script('wptheme-{$js}', get_template_directory_uri() . '/js/{$js}', array('jquery'), '1.0', true);";
}

// Css
#!/usr/bin/env php
<?php
foreach (glob('*.css') as $css) {
   echo "wp_enqueue_style('wptheme-{$css}', get_template_directory_uri() . '/css/{$css}', null, '1.0');";
}
// js
#!/usr/bin/env php
<?php
foreach (glob('*.js') as $js) {
   echo "wp_enqueue_script('wptheme-{$js}', get_template_directory_uri() . '/js/{$js}', array('jquery'), '1.0', true);";
}

// Css
#!/usr/bin/env php
<?php
foreach (glob('*.css') as $css) {
   echo "wp_enqueue_style('wptheme-{$css}', get_template_directory_uri() . '/css/{$css}', null, '1.0');";
}
HTML

<div class="sticky"></div>


CSS

.fixed {
    position: fixed;
    top:0; left:0;
    width: 100%;
}


jQuery

$(window).scroll(function(){
  var sticky = $('.sticky'),
      scroll = $(window).scrollTop();

  if (scroll >= 100) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});
// Supported in IE 9-11
const people = [
  {id: 1, name: 'John'},
  {id: 2, name: 'Adam'},
];

const isFound = people.some(element => {
  if (element.id === 1) {
    return true;
  }

  return false;
});

console.log(isFound); // 👉️ true

if (isFound) {
  // object is contained in array
}
const then = new Date('2022-01-24T09:30:20');
const now = new Date();

const msBetweenDates = Math.abs(then.getTime() - now.getTime());

// 👇️ convert ms to hours                  min  sec   ms
const hoursBetweenDates = msBetweenDates / (60 * 60 * 1000);

console.log(hoursBetweenDates);

if (hoursBetweenDates < 24) {
  console.log('date is within 24 hours');
} else {
  console.log('date is NOT within 24 hours');
}
import React from "react"

export default function Card(props) {
    return (
        <div className="card">
      
      
      
            {props.openSpots === 0 && <div className="card--badge">SOLD OUT</div>} 
      		//if first statement is true, show last stetment/ otherwise dont
      
      
      
            <img src={`../images/${props.img}`} className="card--image" />
            <div className="card--stats">
                <img src="../images/star.png" className="card--star" />
                <span>{props.rating}</span>
                <span className="gray">({props.reviewCount}) • </span>
                <span className="gray">{props.location}</span>
            </div>
            <p className="card--title">{props.title}</p>
            <p className="card--price"><span className="bold">From ${props.price}</span> / person</p>
        </div>
    )
}
import React from "react"
import Navbar from "./components/Navbar"
import Hero from "./components/Hero"
import Card from "./components/Card"
import data from "./data"
/*
Challenge:

- import the array of data from data.js
- map over the array to create <Card /> components
- display the array of card components under the navbar
  (in place of the current <Card /> component)

Note: We haven't styled the group of components yet, so they'll
still be block elements, stacked vertically. We'll add styling later.
*/

export default function App() {
            // <Hero />
    const cards = data.map(item => {
        return (
            <Card 
                img={item.coverImg}
                rating={item.stats.rating}
                reviewCount={item.stats.reviewCount}
                location={item.location}
                title={item.title}
                price={item.price}
            />
        )
    })        
    
    return (
        <div>
            <Navbar />
            {cards}
        </div>
    )
}
// n=1 -> 1 
// n=2 -> 5 -> f1 + 4(n-1)
// n=3 -> 13 -> f2 + 4(n-1) 
// n=4 -> 25 -> f3 + 4(n-1)
// fn = f(n-1) + 4(n-1)

// se expresa en función a la función anterior, para buscar la recursividad
// La recurrencia que se encuentra matematicamente, en este caso "recursividad"
// Se tendra que optener despues de optener la función en función del n anterior. 

// if(n===1) return 1
// f(n) = f(n-1) + 4(n-1);  
<style>
	html, body {
  		overflow-y: hidden;
  	}
</style>

<script>
  $(function(){
  setTimeout(function(){
    $('html')
    .css({
      'overflow-y': 'scroll'
    })
    
  	window.scrollTo(0, 0);
  }, 3000);
});
</script>
<script>
  $(".modal__open").click((e) => {
    e.preventDefault();
  	$('html')
    .css({
      'overflow-y': 'hidden'
    })
  })
  
  
  $(".modal__close").click((e) => {
    e.preventDefault();
  	$('html')
    .css({
      'overflow-y': 'scroll'
    })
  })
</script>
<script>
  const fullScreenHeightDiv = $(".fullScreenHeightDiv");
  
  fullScreenHeightDiv.css("height", window.innerHeight);
</script>
<script>
  var Webflow = Webflow || [];
Webflow.push(function() {  
  // unbind webflow form handling (keep this if you only want to affect specific forms)
  $(document).off('submit');

  /* Any form on the page */
  $('form').submit(function(e) {
    e.preventDefault();

  	const $form = $(this); // The submitted form
    
    if ($form.valid()) {
      const $submit = $('[type=submit]', $form); // Submit button of form
    const buttonText = $submit.val(); // Original button text
    const buttonWaitingText = $submit.attr('data-wait'); // Waiting button text value
    const formMethod = $form.attr('method'); // Form method (where it submits to)
    const formAction = $form.attr('action'); // Form action (GET/POST)
    const formRedirect = $form.attr('data-redirect'); // Form redirect location
    const formData = $form.serialize(); // Form data
    
    // Set waiting text
    if (buttonWaitingText) {
      $submit.val(buttonWaitingText); 
    }
    
    $.ajax(formAction, {
    	data: formData,
      method: formMethod
    })
    .done((res) => {
      // If form redirect setting set, then use this and prevent any other actions
      if (formRedirect) { window.location = formRedirect; return; }

    	$form
      	.hide() // optional hiding of form
    		.siblings('.w-form-done').show() // Show success
      	.siblings('.w-form-fail').hide(); // Hide failure
    })
    .fail((res) => {
      $form
      	.siblings('.w-form-done').hide() // Hide success
    	  .siblings('.w-form-fail').show(); // show failure
    })
    .always(() => {
      // Reset text
      $submit.val(buttonText);
    });
    }
  });
});
</script>
function App() {
    const date = new Date()
    const hours = date.getHours()
    let timeOfDay
    
    if (hours < 12) {
        timeOfDay = "morning"
    } else if (hours >= 12 && hours < 17) {
        timeOfDay = "afternoon"
    } else {
        timeOfDay = "night"
    }
    return (
        <h1>Good {timeOfDay}!</h1>
    )
}
/*JS*/
const $form = $("{YOUR_FORM_CLASS}");
$.validator.addMethod("letters", function(e, a) {
		return this.optional(a) || e == e.match(/^[a-zA-Z\s]*$/);
	}),
	$form.validate({
		rules: {
			name: {
				required: !0,
				minlength: 2,
				maxlength: 45
			},
			countrycity: {
				required: !0
			},
			email: {
				required: !0,
				email: !0
			}
		},
		messages: {
			name: "Please specify your name",
			email: "Please specify a valid email address",
			countrycity: "Field cannot be blank"
		},
	});
/*JS*/
/*JS*/
$("#{ID_OF_CLOSE_MODAL_BUTTON}").click(function(e) {
	const t = document.getElementsByClassName("{YOUR_MODAL_CLASSNAME}")[0].children[0].src;
	document.getElementsByClassName("{YOUR_MODAL_CLASSNAME}")[0].children[0].setAttribute("src", ""),
		document.getElementsByClassName("{YOUR_MODAL_CLASSNAME}")[0].children[0].setAttribute("src", t);
});
/*JS*/
/*CSS*/
.youtube .play-button {
	width: 90px;
	height: 60px;
	background-color: #333;
	box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
	z-index: 1;
	opacity: 0.8;
	border-radius: 6px;
}
.youtube .play-button:before {
	content: "";
	border-style: solid;
	border-width: 15px 0 15px 26.0px;
	border-color: transparent transparent transparent #fff;
}

.youtube img,
.youtube .play-button {
	cursor: pointer;
}
.youtube img,
.youtube iframe,
.youtube .play-button,
.youtube .play-button:before {
	position: absolute;
}
.youtube .play-button,
.youtube .play-button:before {
	top: 50%;
	left: 50%;
	transform: translate3d( -50%, -50%, 0 );
}

.youtube img {
	width: 100%;
}

.youtube iframe {
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
}
/*CSS*/

/*JS*/
(function() {

	var youtube = document.querySelectorAll(".youtube");

	for (var i = 0; i < youtube.length; i++) {

		var source = "https://img.youtube.com/vi/" + youtube[i].dataset.embed + "/sddefault.jpg";

		var image = new Image();
		image.src = source;
		image.addEventListener("load", function() {
			youtube[i].appendChild(image);
		}(i));

		youtube[i].addEventListener("click", function() {

			var iframe = document.createElement("iframe");

			iframe.setAttribute("frameborder", "0");
			iframe.setAttribute("allowfullscreen", "");
			iframe.setAttribute("src", "https://www.youtube.com/embed/" + this.dataset.embed + "?rel=0&showinfo=0&autoplay=0");

			this.innerHTML = "";
			this.appendChild(iframe);
		});
	};

})();
/*JS*/

/*HTML*/
<div data-embed="YOUTUBE_VIDEO_ID" class="video-modal youtube">
  <div class="play-button"></div>
</div>
/*HTML*/
/*JS*/
/*connect luxy.js with CDN*/
<script src="https://min30327.github.io/luxy.js/dist/js/luxy.js"></script>

/*script to make luxy.js work properly*/
const isMobile = /iPhone|iPad|Android/i.test(navigator.userAgent);
if (!isMobile) {
	luxy.init({
		wrapper: '#luxy',
		wrapperSpeed: 0.085,

	});
}
/*JS*/

/*HTML*/
<div id="luxy" class="scroll-container">
	... //your content goes here
</div>
/*HTML*/

/*CSS*/
.scroll-container {
  position: fixed;
}
/*CSS*/
/*JS*/
const handleButtonWithSvgHover = (buttonId, svgWrapperId, svgFillColorNew, svgFillColorOld) => {
	const button = $(`#${buttonId}`);
	const svgWrapper = $(`#${svgWrapperId}`);
	const svgPath = svgWrapper[0].children[0].children[0];
	svgPath.style.transition = "0.6s";

	button.mouseenter(() => {
		svgPath.setAttribute("fill", svgFillColorNew);
	})
	button.mouseleave(() => {
		svgPath.setAttribute("fill", svgFillColorOld);
	})
}

handleButtonWithSvgHover("arrow-down-btn", "arrow-down-svg", "white", "black");
/*JS*/


/*HTML markdown example*/
<button id="arrow-down-btn">
  <div id="arrow-down-svg">
    <svg width="22" height="28" viewBox="..." fill="none">
		<path d="..." fill="black"></path>
	</svg>
  </div>
</buton>
/*HTML markdown example*/
const svg = document.getElementsByTagName("svg")[SVG_INDEX];
const bbox = svg.getBBox();
const viewBox = [bbox.x, bbox.y, bbox.width, bbox.height].join(" ");
svg.setAttribute("viewBox", viewBox);
prompt("Copy to clipboard: Ctrl+C, Enter", svg.outerHTML);
/*CSS*/
#nav__wrapper {
  transform: translateY(0%);
  transition: all 0.3s ease-out;
}

#nav__wrapper.header_hide {
  transform: translateY(-100%);
}
/*CSS*/
  
/*JS*/
const header_el = $("#nav__wrapper"),
    mywindow = $(window);
let mypos = mywindow.scrollTop(),
    up = !1,
    newscroll = 0;
mywindow.scroll(function () {
    (newscroll = mywindow.scrollTop()) > mypos && !up ? (header_el.toggleClass("header_hide"), (up = !up)) : newscroll < mypos && up && (header_el.toggleClass("header_hide"), (up = !up)), (mypos = newscroll);
});
/*JS*/
async function cdnjs(query){
	return await fetch("https://2qwlvlxzb6-2.algolianet.com/1/indexes/*/queries", {
		headers: {
		  accept: "*/*",
		  "content-type": "application/x-www-form-urlencoded",
		  "x-algolia-api-key": `2663c73014d2e4d6d1778cc8ad9fd010`,
		  "x-algolia-application-id": `2QWLVLXZB6`,
		},
		body: JSON.stringify({
		  requests: [{ indexName: "libraries", params: e`query=${q}` }],
		}),
		method: "POST",
	      })
		.then((res) => res.json())
		.then((res) => {
		  let results = res.results[0].hits;
		  return results.map((item) => ({
		    name: item.name,
		    keywords: item.keywords,
		    snippet: item.description,
		    author: item.author,
		  }));
		});
}
async function autocomplete(text){
	return JSON.parse(await fetch("https://www.google.com/complete/search?q=testing&client=Firefox").then(res => res.text()))[1];
}
function checkGrammar(text){
    const opts = {
        headers: {
            "accept": "application/vnd.splat+json",
        }
    }
    return new Promise(async (resolve) => {
        let job = await fetch("https://api.cram.com/article-evaluations", {
          "body": JSON.stringify({
              "text": text,
              "evaluate":["grammar","plagiarism"]
          }),
          "method": "POST",
          ...opts,
        }).then(res => res.json())
        let int = setInterval(async () => {
            let res = await fetch(`https://api.cram.com/article-evaluations/${job.data.id}`, {
              "headers": {
                "accept": "application/vnd.splat+json",
              },
              "method": "GET",
            }).then(res => res.json())
            if (res.data.is_success === 1){
                clearInterval(int);
                return resolve(res.data.result);
            }
        }, 500)
    });
}
/**
 * @param {String} text The text to check
 * @returns {Promise.<Object>}
 * @example
 *  // ⇒ {
 *  //   "Corrections": [...],
 *  //   "Sentences": [...]
 *  //}
 */
async function grammar(text){
	let res = await fetch(`https://services.gingersoftware.com/Ginger/correct/jsonSecured/GingerTheTextFull?callback=$&text=${encodeURIComponent(text)}&apiKey=GingerWebsite&clientVersion=2.0&lang=US`).then(res => res.text())
	return JSON.parse(res.replace(/^\$\(/, "").replace(/\);?$/, ""));//Returns a 'callback'
}
/**
* Gets parts of speech for a sentence
* @param {String} text The text to get parts of speech for.
* @returns {Promise.<Object>} Resolves into a list of parts of speech. (Or rejects with an error)
* @example 
* var parts_of_speech  = await parts_of_speech("Sometimes I just want to code in JavaScript all day.");
* // ⇒
* // {entities: Array(1), sentiments: Array(1), documentInfo: {…}, wordFreq: Array(4), taggedText: '<span class="tag ADV">Sometimes</span> <span class…>all</span> <span class="tag DURATION">day</span>'}
function parts_of_speech(text) {
*/
function parts_of_speech(text) {
  return new Promise(async (resolve, reject) => {
    fetch("https://showcase-serverless.herokuapp.com/pos-tagger", {
      headers: {
        accept: "application/json",
        "content-type": "application/json",
      },
      body: JSON.stringify({ sentence: text }),
      method: "POST",
    })
      .then((res) => res.json())
      .then(resolve)
      .catch(reject);
  });
}
/**
* Rewrites text
* @param {String} text The text to rewrite.
* @returns {Promise.<String[]>} Resolves into a list of about 10 rewritten versions. (Or rejects with an error)
* @example 
* var rewritten  = await rewrite("Sometimes I just want to code in JavaScript all day.");
* // ⇒ [
* //    "I sometimes just want to code JavaScript all day.",
* //    "JavaScript is my favorite programming language sometimes.",
* //    "I sometimes wish I could code in JavaScript all day.",
* //    "JavaScript is sometimes all I want to do all day.",
* //    "I like JavaScript sometimes and want to code all day long.",
* //    "Some days I just want to work all day in JavaScript.",
* //    "It's not uncommon for me to just want to code in JavaScript all day.",
* //    "My favorite thing to do sometimes is just code JavaScript all day.",
* //    "My favourite coding language is JavaScript, which I can code all day.",
*//     "JavaScript is my preferred language sometimes, since it lets me code all day.",
*// ];
*/
function rewrite(text) {
  return new Promise(async (resolve, reject) => {
    var { suggestions, error_code, error_msg, error_msg_extra } = await fetch(
      "https://api.wordtune.com/rewrite-limited",
      {
        headers: {
          accept: "*/*",
          "accept-language": "en-US,en;q=0.9",
          "content-type": "application/json",
          "x-wordtune-origin": "https://www.wordtune.com",
        },
        referrer: "https://www.wordtune.com/",
        body: JSON.stringify({
          action: "REWRITE",
          text: text,
          start: 0,
          end: text.length,
          selection: {
            wholeText: text,
            start: 0,
            end: text.length,
          },
        }),
        method: "POST",
      }
    ).then((res) => res.json());
    if (error_code || error_msg || error_msg_extra) {
      reject({
        code: error_code,
        message: error_msg,
        message_extra: error_msg_extra,
      });
    } else {
      resolve(suggestions);
    }
  });
}
const background = document.querySelector('.bg');
const loadingText = document.querySelector('.loading-text');

//used for the text=0%
let load = 0;

//repeatedly calls a function or executes a code snippet, with a fixed time delay between each call.
let int = setInterval(blurring, 10);

function blurring() {
  //increase text num with each iteration
  load++;
  // When 100
  if (load > 99) {
    //Cancels a timed, repeating action which was previously established by a call to setInterval().
    clearInterval(int);
  }
  loadingText.innerText = `${load}%`;
  //Map a range of numbers to another range of numbers e.g text 0 --> 100% and opacity  1 --> 0
  loadingText.style.opacity = scale(load, 0, 100, 1, 0);
  //Map a range of numbers to another range of numbers e.g text 0 --> 100 and filter: blur(10px --> 0)
  background.style.filter = `blur(${scale(load, 0, 100, 10, 0)}px)`;
}

function scale(number, inMin, inMax, outMin, outMax) {
  return ((number - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
}
const str  = 'mycookie=test';

const spl = str.split(';');

const x = spl.map(v => v.split('='))
.map(([k, ...vs]) => [k, vs.join('=')]).reduce((acc, [k, v]) ={
       acc[k.trim()] = decodeURIComponent(v);
       return acc;
 }, {});

console.log(x);
import React from 'react';
import Carousel from 'react-material-ui-carousel'
import { Paper, Button } from '@material-ui/core'

function Example(props)
{
    var items = [
        {
            name: "Random Name #1",
            description: "Probably the most random thing you have ever seen!"
        },
        {
            name: "Random Name #2",
            description: "Hello World!"
        }
    ]

    return (
        <Carousel>
            {
                items.map( (item, i) => <Item key={i} item={item} /> )
            }
        </Carousel>
    )
}

function Item(props)
{
    return (
        <Paper>
            <h2>{props.item.name}</h2>
            <p>{props.item.description}</p>

            <Button className="CheckButton">
                Check it out!
            </Button>
        </Paper>
    )
}
    <input class="copy" type="text" value="copy this text">
    <button class="copy">copy</button>
    <input class="paste" type="text" value="paste here">
    <button class="paste">paste</button>

const inputCopy = document.querySelector('input.copy')
const btnCopy = document.querySelector('button.copy')
const inputPaste = document.querySelector('input.paste')
const btnPaste = document.querySelector('button.paste')

btnCopy.onclick = async () => {
    await navigator.clipboard.writeText(inputCopy.value)
    console.log('copied!');
}
btnPaste.onclick = async () => {
    const clipText = await navigator.clipboard.readText()
    inputPaste.value = clipText
    console.log('pasted!');
}

function getRandInt(start, end) {
    return Math.floor(Math.random() * (end - start + 1)) + start
}
const mongoose = require('mongoose')
require('dotenv').config()

mongoose.connect(process.env.MONGODB_URI, {
   useNewUrlParser: true,
   useUnifiedTopology: true,
   useCreateIndex: true
})

mongoose.connection.on('connected', () => {
  console.log('Mongoose connected')
})

mongoose.connection.on('error', (err) => {
  console.log(`Mongoose connected error ${err}`)
})

mongoose.connection.on('disconnected', () => {
  console.log('Mongoose disconnected')
})
var endExperiment = function() {

  prompt_resubmit = function() {
    replaceBody(error_message);
    $("#resubmit").click(resubmit);
  };

  resubmit = function() {
    replaceBody("<h1>Trying to resubmit...</h1>");
    reprompt = setTimeout(prompt_resubmit, 10000);
    
    psiTurk.saveData({
      success: function() {
          clearInterval(reprompt); 
      }, 
      error: prompt_resubmit
    });
  };
  // Load the debriefing page 
  psiTurk.showPage('debriefing.html');

  //code for bonus??
  $("#next").click(function () {
      record_responses();
      psiTurk.saveData({
            success: function(){
                psiTurk.computeBonus('compute_bonus', function() { 
                  psiTurk.completeHIT(); // when finished saving compute bonus, the quit
                }); 
            }, 
            error: prompt_resubmit});
  });
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
javascript:(d=>{var css=`:root{background-color:#f1f1f1;filter:invert(1) hue-rotate(180deg)}img:not([src*=".svg"]),picture,video{filter: invert(1) hue-rotate(180deg)}`,style,id="dark-mode",ee=d.getElementById(id);if(null!=ee)ee.parentNode.removeChild(ee);else {style = d.createElement('style');style.type="text/css";style.id=id;if(style.styleSheet)style.styleSheet.cssText=css;else style.appendChild(d.createTextNode(css));(d.head||d.querySelector('head')).appendChild(style)}})(document)
var element = document.querySelectorAll('.elementClass');
if (typeof(element) != 'undefined' && element != null) {
    //your code here
}
$('.button').click(function(){

  var buttonId = $(this).attr('id');

  $('#modal-container').removeAttr('class').addClass(buttonId);

  $('body').addClass('modal-active');

})

​

$('#modal-container').click(function(){

  $(this).addClass('out');

  $('body').removeClass('modal-active');

});
$('.button').click(function(){

  var buttonId = $(this).attr('id');

  $('#modal-container').removeAttr('class').addClass(buttonId);

  $('body').addClass('modal-active');

})

​

$('#modal-container').click(function(){

  $(this).addClass('out');

  $('body').removeClass('modal-active');

});
star

Tue Jan 31 2023 19:21:41 GMT+0000 (UTC)

#function.php #js
star

Thu Jan 26 2023 06:26:05 GMT+0000 (UTC) https://www.thiscodeworks.com/how-to-get-the-domain-from-a-url-using-javascript-javascript-promises-howto/5e18fd750e84c280ef23c905

#js #html
star

Thu Jan 26 2023 06:02:46 GMT+0000 (UTC) https://www.thiscodeworks.com/add-event-listener-to-multiple-buttons-with-the-same-class-javascript/5efa75c76c23bc0014be6336

#js #html
star

Tue Jan 24 2023 23:30:13 GMT+0000 (UTC)

#function.php #js
star

Mon Jan 23 2023 18:10:36 GMT+0000 (UTC)

#function.php #js
star

Fri Jan 13 2023 21:28:54 GMT+0000 (UTC)

#function.php #js
star

Mon Jan 02 2023 07:10:19 GMT+0000 (UTC) https://stackoverflow.com/questions/43070692/update-schema-in-mongoose-to-add-new-property

#javascript #js #nodejs
star

Wed Dec 14 2022 23:36:08 GMT+0000 (UTC)

#function.php #js
star

Mon Dec 12 2022 05:53:39 GMT+0000 (UTC)

#css #js
star

Fri Dec 09 2022 22:18:12 GMT+0000 (UTC)

#function.php #js
star

Fri Dec 02 2022 22:19:04 GMT+0000 (UTC)

#function.php #js
star

Fri Dec 02 2022 00:54:30 GMT+0000 (UTC)

#function.php #js
star

Wed Nov 30 2022 17:53:55 GMT+0000 (UTC)

#function.php #js
star

Tue Nov 29 2022 11:03:51 GMT+0000 (UTC) https://www.folkstalk.com/2022/07/get-user-location-without-permission-with-code-examples.html

#js #api
star

Tue Nov 29 2022 00:24:19 GMT+0000 (UTC)

#function.php #js
star

Mon Nov 28 2022 11:18:25 GMT+0000 (UTC)

#css #js
star

Fri Nov 25 2022 18:29:29 GMT+0000 (UTC)

#function.php #js
star

Thu Nov 24 2022 23:45:10 GMT+0000 (UTC)

#function.php #js
star

Tue Nov 22 2022 21:27:22 GMT+0000 (UTC)

#function.php #js
star

Sat Nov 19 2022 09:45:24 GMT+0000 (UTC) https://www.section.io/engineering-education/watch-for-system-dark-mode-using-js-css/

#js #html #css
star

Thu Nov 17 2022 10:44:58 GMT+0000 (UTC) https://www.youtube.com/watch?v=jfYWwQrtzzY

#js
star

Wed Nov 09 2022 19:34:52 GMT+0000 (UTC)

#function.php #js
star

Thu Nov 03 2022 22:28:41 GMT+0000 (UTC)

#function.php #js
star

Mon Oct 24 2022 07:10:15 GMT+0000 (UTC)

#css #js
star

Sat Oct 08 2022 09:39:07 GMT+0000 (UTC)

#css #js
star

Sun Sep 25 2022 05:43:40 GMT+0000 (UTC) https://www.udemy.com/course/modern-html-css-from-the-beginning/learn/lecture/13285454#questions/11102965

#js #gallery #lightbox
star

Sat Sep 10 2022 05:15:12 GMT+0000 (UTC)

#css #js
star

Wed Sep 07 2022 09:11:31 GMT+0000 (UTC)

#html #css #php #mys #js #json
star

Wed Aug 31 2022 11:21:37 GMT+0000 (UTC)

#js #javascript #htm
star

Fri Aug 26 2022 05:19:19 GMT+0000 (UTC)

#css #js
star

Fri Aug 19 2022 18:02:28 GMT+0000 (UTC)

#css #js
star

Fri Aug 19 2022 18:02:25 GMT+0000 (UTC)

#css #js
star

Tue Aug 16 2022 06:09:09 GMT+0000 (UTC)

#css #js
star

Mon Aug 15 2022 09:36:42 GMT+0000 (UTC)

#css #js
star

Sun Aug 07 2022 15:33:30 GMT+0000 (UTC)

#js #json
star

Thu Aug 04 2022 07:23:41 GMT+0000 (UTC)

#css #js
star

Wed Aug 03 2022 18:02:41 GMT+0000 (UTC) https://www.hostnextra.com/kb/easy-to-install-next-js-on-ubuntu-20-04/

#js
star

Wed Jul 13 2022 16:39:59 GMT+0000 (UTC) https://www.thiscodeworks.com/add-event-listener-to-multiple-buttons-with-the-same-class-javascript/5efa75c76c23bc0014be6336

#js #vanilla
star

Fri Jun 17 2022 18:42:45 GMT+0000 (UTC) https://codepen.io/Web_Cifar/pen/oNxLYRY?editors

#js #api #food #recipe
star

Wed May 25 2022 00:39:03 GMT+0000 (UTC) https://stackoverflow.com/questions/34719230/django-how-to-access-current-logged-in-users-id-in-javascript

#django #js #javascript
star

Wed May 25 2022 00:38:41 GMT+0000 (UTC) https://stackoverflow.com/questions/34719230/django-how-to-access-current-logged-in-users-id-in-javascript

#js #djan
star

Sat May 14 2022 10:28:43 GMT+0000 (UTC)

#generator #css #js
star

Sat May 14 2022 10:28:41 GMT+0000 (UTC)

#generator #css #js
star

Tue May 10 2022 10:12:54 GMT+0000 (UTC)

#js #html #css
star

Wed Apr 13 2022 11:00:23 GMT+0000 (UTC)

#react #js
star

Wed Apr 13 2022 10:13:32 GMT+0000 (UTC)

#react #js
star

Mon Apr 11 2022 23:48:53 GMT+0000 (UTC)

#js #scroll #css #setup
star

Mon Apr 11 2022 23:45:27 GMT+0000 (UTC)

#js #scroll
star

Mon Apr 11 2022 11:27:43 GMT+0000 (UTC)

#react #js
star

Sun Mar 20 2022 18:06:05 GMT+0000 (UTC)

#js #validation
star

Sun Mar 20 2022 17:56:00 GMT+0000 (UTC) https://agency-website-c0d1e7.webflow.io/

#css #js #html #youtube-embed #lazy-load #youtube-lazy-load
star

Sun Mar 20 2022 17:39:14 GMT+0000 (UTC) https://agency-website-c0d1e7.webflow.io/

#js #css #html #smooth-scrolling #luxy.js
star

Sun Mar 20 2022 17:28:54 GMT+0000 (UTC) https://agency-website-c0d1e7.webflow.io/

#js #svg #hover
star

Sun Mar 20 2022 17:13:46 GMT+0000 (UTC) https://agency-website-c0d1e7.webflow.io/

#js #svg #svg-viewbox
star

Sun Mar 20 2022 17:07:22 GMT+0000 (UTC) https://agency-website-c0d1e7.webflow.io/

#css #js #header #navbar #scroll-animation
star

Mon Jan 10 2022 17:04:09 GMT+0000 (UTC) https://github.com/explosion-scratch/cool_apis

#javascript #js #cdnjs #searcha #api
star

Mon Jan 10 2022 17:03:43 GMT+0000 (UTC) https://github.com/explosion-scratch/cool_apis

#javascript #api #js #autocomplete #google
star

Mon Jan 10 2022 17:03:25 GMT+0000 (UTC) https://github.com/explosion-scratch/cool_apis

#javascript #js #api
star

Mon Jan 10 2022 17:03:08 GMT+0000 (UTC) https://github.com/explosion-scratch/cool_apis

#javascript #js #api
star

Mon Jan 10 2022 17:02:49 GMT+0000 (UTC) https://github.com/explosion-scratch/cool_apis

#js #javascript #text #api
star

Mon Jan 10 2022 17:02:27 GMT+0000 (UTC) https://github.com/explosion-scratch/cool_apis

#js #javascript #rewrite #api
star

Sun Dec 12 2021 08:56:52 GMT+0000 (UTC)

#js
star

Tue Sep 28 2021 16:54:08 GMT+0000 (UTC) https://mermaid-js.github.io/mermaid-live-editor/edit/

#js
star

Thu Aug 26 2021 03:10:25 GMT+0000 (UTC) https://codepen.io/rooc/pen/bONbqw

#youtube #custom #playbutton #js
star

Thu Aug 26 2021 03:08:48 GMT+0000 (UTC) https://codepen.io/arjunamgain/pen/zxydgg

##youyube #playbutton #custom #js
star

Sat Aug 07 2021 04:35:46 GMT+0000 (UTC) https://jsbin.com/

#cookie #js
star

Thu Jun 17 2021 15:57:27 GMT+0000 (UTC) https://github.com/Learus/react-material-ui-carousel

#js #react.js
star

Thu Jun 10 2021 07:09:58 GMT+0000 (UTC) https://www.youtube.com/watch?v=7c1K1SCmCb4

#js #html
star

Thu Jun 03 2021 22:50:30 GMT+0000 (UTC)

#js
star

Thu Jun 03 2021 20:49:17 GMT+0000 (UTC)

#js
star

Wed Jun 02 2021 17:37:05 GMT+0000 (UTC) https://github.com/danieljwilson/ObjectVsTask

#js #jspsych #data #saving
star

Wed Jun 02 2021 17:05:03 GMT+0000 (UTC) https://github.com/colinquirk/psiturkParser

##js #js #javascript #psiturk #data
star

Mon May 10 2021 12:34:15 GMT+0000 (UTC) https://getbootstrap.com/

#bootstrap #js #css #html
star

Sat Mar 13 2021 17:40:37 GMT+0000 (UTC) https://gist.github.com/lweiss01/7a6c60843b64236b018e7398fb0d5f40#file-darkmodeswitcher-js

#javascript #js #bookmarklet #css
star

Fri Mar 05 2021 12:13:19 GMT+0000 (UTC)

#js #vanilla
star

Thu Dec 24 2020 05:24:43 GMT+0000 (UTC) https://codepen.io/designcouch/pen/obvKxm

#js #modal #animation
star

Thu Dec 24 2020 05:19:18 GMT+0000 (UTC) https://codepen.io/designcouch/pen/obvKxm

#js

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension