function scrolling(event) {
  let scrollPercent =
    (event.target.scrollTop /
      (scrollableElement.value.scrollHeight -
        scrollableElement.value.clientHeight)) *
    100;
}

window.addEventListener("scroll", function () {
  let st = window.pageYOffset || document.documentElement.scrollTop;
  if (st > window.innerHeight / 2 && st > lastScrollTop) {
    isMenuOpen.value = false;
  } else if (st > window.innerHeight / 2 && st < lastScrollTop) {
    isMenuOpen.value = true;
  }
  lastScrollTop = st <= 0 ? 0 : st;
});

function storeTouchPosition() {
  initialTouchPosition.value = event.touches[0].clientY;
  // initialBottomPosition.value =
  //   draggableElement.value.getBoundingClientRect().bottom;
}
function resizeSublinks() {
  document.body.style.overflow = "hidden";
  let delta = event.touches[0].clientY - initialTouchPosition.value;
  let maxScrollDistance = draggableElement.value.scrollHeight - 130;
  let top = draggableElement.value.getBoundingClientRect().top;

  if (delta > 0) {
    //element is being dragged down
    if (draggableElement.value && top <= 392) {
      draggableElement.value.style.transform = `translateY(${delta}px)`;
    }
  } else if (draggableElement.value && delta * -1 <= maxScrollDistance) {
    draggableElement.value.style.transform = `translateY(${delta}px)`;
  }
}
function stopDragging() {
  document.body.style.overflow = "auto";
  initialTouchPosition.value = null;
}

//Inside a plugins folder

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.directive("click-outside", {
    beforeMount(el, binding) {
      el.clickOutsideEvent = function (event) {
        if (!(el === event.target || el.contains(event.target))) {
          binding.value(event, el);
        }
      };
      document.addEventListener("click", el.clickOutsideEvent);
    },
    unmounted(el) {
      document.removeEventListener("click", el.clickOutsideEvent);
    },
  });
});

//Inside the DOM
v-click-outside="handleCloseDestinationSearchResults"

wp.domReady(function () {
	wp.blocks.registerBlockStyle('core/button', {
		name: 'with-arrow',
		label: 'With Arrow',
	});
	wp.blocks.registerBlockStyle('core/button', {
		name: 'link-btn',
		label: 'Link Btn',
	});
  	wp.blocks.registerBlockStyle('core/list', {
		name: 'check',
		label: 'check mark',
	});
});

constructor(element) {
		this.$element = $(element);
		this.$slider = this.$element.find('.team-carousel__slider');

		this.init();
	}

	init() {
		const itemCount = this.$slider.find('.team-carousel__slider-item').length;
		if (itemCount > 4) {
			this.$slider.addClass('owl-carousel');
			this.$slider.owlCarousel({
				margin: 30,
				center: false,
				autoplay: true,
				autoplaySpeed: 2000,
				autoplayHoverPause: true,
				responsiveClass: true,
				items: 1,
				navText: [
					'<a class="arrow-left" aria-hidden="true"></a>',
					'<a class="arrow-right" aria-hidden="true"></a>',
				],
				responsive: {
					576: {
						items: 1,
					},
					789: {
						items: 2,
					},
					992: {
						items: 3,
					},
					1199: {
						items: 4,
					},
				},
			});
		} else if (itemCount <= 4) {
			this.$slider.removeClass('owl-carousel');
		} else {
			this.$slider.removeClass('owl-carousel');
		}
	}

//$(document).ready(function () {
// 	var $landingMasthead = $('[data-landing-masthead]');
// 	if ($landingMasthead.children().length > 1) {
// 		$landingMasthead.owlCarousel({
// 			loop: false,
// 			nav: true,
// 			dots: true,
// 			animateIn: true,
// 			responsiveClass: true,
// 			items: 1,
// 			navText: [
// 				'<a class="arrow-left" aria-hidden="true"></a>',
// 				'<a class="arrow-right" aria-hidden="true"></a>',
// 			],
// 		});
// 	} else {
// 		$landingMasthead.removeClass('owl-carousel');
// 	}
// });

$('.our-approach__row:first').addClass('active');
		$('.our-approach__content').hide();
		$('.our-approach__content:first').show();

		$('.our-approach__row').click(function () {
			$('.our-approach__row').removeClass('active');
			$(this).addClass('active');
			$('.our-approach__content').hide();

			var activeTab = $(this).find('a').attr('href');
			$(activeTab).fadeIn(700);
			return false;
		});

constructor(element) {
		this.$element = $(element);
		this.$tabs = this.$element.find('.accordion__tab');
		this.$innerConts = this.$element.find('.accordion__inner-cont');
		this.$contents = this.$element.find('.accordion__content');
		this.init();
	}

	init() {
		this.$tabs.first().addClass('active');
		this.$innerConts.first().addClass('active');
		this.$tabs.click((e) => {
			e.preventDefault();
			const $this = $(e.currentTarget);
			this.$tabs.not($this).add(this.$innerConts).removeClass('active');
			this.$contents.not($this.next()).slideUp();
			$this.toggleClass('active').parent().toggleClass('active');
			$this.find('.icon').toggleClass('icon-up icon-down');
			$this.next().slideToggle();
		});
	}

// constructor(element) {
	// 	this.$element = $(element);
	// 	this.$tabs = this.$element.find('.faq__tab');
	// 	this.init();
	// }

	// init() {
	// 	$('.faq__tab:first, .faq__inner-cont:first').addClass('active');
	// 	this.$tabs.click(function (e) {
	// 		e.preventDefault();
	// 		$('.faq__tab, .faq__inner-cont').not(this).removeClass('active');
	// 		$('.faq__content').not($(this).next()).slideUp();
	// 		$(this).toggleClass('active');
	// 		$(this).parent().toggleClass('active');
	// 		$(this).find('.icon').toggleClass('icon-up icon-down');
	// 		$(this).next().slideToggle();
	// 	});
	// }

jQuery('img').each(function($){
            var $img = jQuery(this);
            var imgID = $img.attr('id');
            var imgClass = $img.attr('class');
            var imgURL = $img.attr('src');

            jQuery.get(imgURL, function(data) {
                // Get the SVG tag, ignore the rest
                var $svg = jQuery(data).find('svg');

                // Add replaced image's ID to the new SVG
                if(typeof imgID !== 'undefined') {
                    $svg = $svg.attr('id', imgID);
                }
                // Add replaced image's classes to the new SVG
                if(typeof imgClass !== 'undefined') {
                    $svg = $svg.attr('class', imgClass+' replaced-svg');
                }

                // Remove any invalid XML tags as per http://validator.w3.org
                $svg = $svg.removeAttr('xmlns:a');

                // Replace image with new SVG
                $img.replaceWith($svg);

            }, 'xml');

        });

constructor(element) {
		this.$element = $(element);
		this.$popup = this.$element.find('.media-text__img');

		this.init();
	}

	init() {
		this.$popup.magnificPopup({
			disableOn: 0,
			type: 'iframe',
			mainClass: 'mfp-fade',
			removalDelay: 160,
			preloader: false,
			fixedContentPos: true,
		});
	}

const formatDate = (date) =>
  new Intl.DateTimeFormat("en", {
    day: "numeric",
    month: "long",
    year: "numeric",
    weekday: "long",
  }).format(new Date(date));


  export default formatDate

function search() {
  matchingMembers.value = props.story.content.members.filter((member) => {
    return (
      member.tags.some((tag) => {
        return tag.text.toLowerCase().includes(query.value.toLowerCase());
      }) ||
      member.name.toLowerCase().includes(query.value.toLowerCase()) ||
      member.role.toLowerCase().includes(query.value.toLowerCase()) ||
      member.description.toLowerCase().includes(query.value.toLowerCase()) ||
      member.desk.toLowerCase().includes(query.value.toLowerCase())
    );
  });
}

function sortEvents(events) {
  //   return Object.keys(events)
  //     .sort()
  //     .reduce((sortedEvents, key) => {
  //       sortedEvents[key] = events[key];
  //       return sortedEvents;
  //     }, {});

  const sortedEvents = {};
  Object.keys(events)
    .sort()
    .forEach((key) => {
      sortedEvents[key] = events[key];
    });
  return sortedEvents;
}

// Variable 'search' initialized with the string that will be used for the Google search
let search = "Google * and SEO";

// Replace the first space character in the 'search' string with a plus sign
let searchQ = search.replace(' ', '+').trim();
// Construct the Google search URL using the modified 'searchQ' string and setting the results limit to 1000
let searchUrl = `https://www.google.com/search?q=%22${searchQ}%22&num=1000`;

// URL to a raw list of English stop words from the NLTK library hosted on GitHub
let stopwordsUrl = "https://gist.githubusercontent.com/sebleier/554280/raw/7e0e4a1ce04c2bb7bd41089c9821dbcf6d0c786c/NLTK's%20list%20of%20english%20stopwords";

// Initialize 'stopWords' as a Set to store unique stop words
let stopWords = new Set();

// Asynchronously fetch the list of stopwords from the provided URL
fetch(stopwordsUrl)
  .then(response => {
    // Check if the network response is ok; otherwise throw an error
    if (!response.ok) throw new Error('Network response was not ok');
    return response.text(); // Return the response text (stop words) to be processed
  })
  .then(stopwordsData => {
    // Split the stopwords data by newlines and add each trimmed word to the 'stopWords' Set
    stopwordsData.split(/\n/).forEach(word => stopWords.add(word.trim()));
    return fetch(searchUrl); // Fetch the Google search results next
  })
  .then(response => {
    // Check if the network response is ok; otherwise throw an error
    if (!response.ok) throw new Error('Network response was not ok');
    return response.text(); // Return the search HTML to be processed
  })
  .then(data => {
    // Parse the returned HTML string into a DOM Document object
    let _htmlDoc = new DOMParser().parseFromString(data, "text/html");

    // Define a threshold percentile for word frequency analysis
    const bottomPercentile = 0.98;

    // Process and filter h3 text content from the Google search results
    let processedTexts = Array.from(_htmlDoc.querySelectorAll('h3')).map(h3 => 
      h3.textContent.trim().toLowerCase() // Remove whitespace, convert to lower case
      .replace(/[^\w\s]|_/g, "") // Remove punctuation and underscores
      .split(/\s+/).filter(word => !stopWords.has(word)) // Split into words and filter out stop words
    );

    // Count the frequency of each word across all h3 elements
    let wordCounts = processedTexts.flatMap(words => words).reduce((acc, word) => {
        acc[word] = (acc[word] || 0) + 1; // Increment word count or initialize it to 1
        return acc;
    }, {});

    // Sort the frequencies to determine the threshold for common words
    let sortedCounts = Object.values(wordCounts).sort((a, b) => a - b);
    let thresholdIndex = Math.floor(sortedCounts.length * bottomPercentile);
    let thresholdValue = sortedCounts[thresholdIndex];

    // Filter out the words that are more frequent than the threshold
    let frequentWords = new Set(Object.keys(wordCounts).filter(word => wordCounts[word] > thresholdValue));

    // Reconstruct texts by removing the frequent words and ensure they are more than single words
    let reconstructedText = new Set(processedTexts
      .map(words => words.filter(word => !frequentWords.has(word)).join(' '))
      .filter(text => text.split(' ').length > 1));

    // Log each reconstructed text to the console
    reconstructedText.forEach(text => console.log(text));
  })
  .catch(error => console.error('Fetch error:', error)); // Catch and log any errors during the fetch process

<script>
document.addEventListener('alpine:init', () => {
    Alpine.store('notifications', {
        items: [],
        notify(message) {
            this.items.push(message)
        }
    })
})
</script>

(function(window) {
  function define_library() {
    // Create the library object and all its properties and methods.
    var vanillaZoom = {};
    vanillaZoom.init = function(galleryId) {
      // Our library's logic goes here.
    }
    return vanillaZoom;
  }

  // Add the vanillaZoom object to global scope if its not already defined.
  if(typeof(vanillaZoom) === 'undefined') {
    window.vanillaZoom = define_library();
  }
  else{
    console.log("Library already defined.");
  }
})(window);

<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function helloworld(){
            document.write("hello world");
        }
    </script>
    <form>
        <input type="submit" onclick = helloworld()>
    </form>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function validateform(){
            var name=document.getElementById("name").value;
            var roll=document.getElementById("roll").value;
            if(name==="" || roll===""){
                alert("name and roll required");
                return false
            }
            return true;
            
        }
    </script>

</head>
<body>
    <form >
        <label for ="name">Name</label>
        <input type="txt" id="name">
        <label for ="roll" >roll</label>
        <input type="number" id ="roll">
        <input type="submit"onclick=validateform());
    </form>
    
</body>
</html> -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Registration Form</title>
  <style>
    body {
      background-color: #b0ca9e;
      font-size: 16px;
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    form {
      max-width: 400px;
      margin: 20px auto;
      padding: 20px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    label {
      display: block;
      margin-bottom: 8px;
    }

    input {
      width: 100%;
      padding: 8px;
      margin-bottom: 16px;
      box-sizing: border-box;
    }

    input[type="submit"] {
      background-color: #4caf50;
      color: #fff;
      cursor: pointer;
    }
  </style>
  <script>
    function validateForm() {
      var name = document.forms["registrationForm"]["name"].value;
      var username = document.forms["registrationForm"]["username"].value;
      var password = document.forms["registrationForm"]["password"].value;
      var confirmPassword = document.forms["registrationForm"]["confirmPassword"].value;

      if (name === "" || username === "" || password === "" || confirmPassword === "") {
        alert("All fields must be filled out");
        return false;
      }

      if (username.length < 6) {
        alert("Username should be at least 6 characters");
        return false;
      }

      if (password !== confirmPassword) {
        alert("Passwords do not match");
        return false;
      }

      return true;
    }
  </script>
</head>
<body>
  <form name="registrationForm" onsubmit="return validateForm()">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>

    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>

    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required>

    <label for="confirmPassword">Confirm Password:</label>
    <input type="password" id="confirmPassword" name="confirmPassword" required>

    <input type="submit" value="Register">
  </form>
</body>
</html>

<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="save">Save 1</button>
<button class="save">Save 2</button>
<button class="save">Save 3</button>

<script>
  let saveBtn = document.getElementsByClassName('save');
  Array.from(save).forEach(function (el) { 
    el.addEventListener('click', handler) 
  });
  function handler() {
    console.log('Clicked');
  }
</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);

const user_id = JSON.parse(document.getElementById('user_id').textContent);

{{ request.user.id|json_script:"user_id" }}

    $('.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');
}

<script src="path/to/vanilla.js"></script>

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');

});