```// 1. push()
// Appends one or more elements to the end of an array
let arr1 = [1, 2, 3];
arr1.push(4);
console.log(arr1); // [1, 2, 3, 4]

// 2. pop()
// Removes the last element from the array and returns it
let arr2 = [1, 2, 3];
let lastElement = arr2.pop();
console.log(lastElement); // 3
console.log(arr2); // [1, 2]

// 3. shift()
// Removes the first element from the array and returns it
let arr3 = [1, 2, 3];
let firstElement = arr3.shift();
console.log(firstElement); // 1
console.log(arr3); // [2, 3]

// 4. unshift()
// Appends one or more elements to the beginning of an array
let arr4 = [2, 3];
arr4.unshift(1);
console.log(arr4); // [1, 2, 3]

// 5. concat()
// Combines two or more arrays
let arr51 = [1, 2];
let arr52 = [3, 4];
let newArr5 = arr51.concat(arr52);
console.log(newArr5); // [1, 2, 3, 4]

// 6. slice()
// Returns a new array containing part of the original array
let arr6 = [1, 2, 3, 4];
let newArr6 = arr6.slice(1, 3);
console.log(newArr6); // [2, 3]

// 7. splice()
// Changes the contents of an array by removing, replacing, or adding new elements
let arr7 = [1, 2, 3, 4];
arr7.splice(1, 2, 'a', 'b');
console.log(arr7); // [1, 'a', 'b', 4]

// 8. forEach()
// Executes the specified function once for each element of the array
let arr8 = [1, 2, 3];
arr8.forEach(element => console.log(element));
// 1
// 2
// 3

// 9. map()
// Creates a new array with the results of calling the specified function for each element of the array
let arr9 = [1, 2, 3];
let newArr9 = arr9.map(element => element * 2);
console.log(newArr9); // [2, 4, 6]

// 10. filter()
// Creates a new array with all elements that passed the test implemented by the given function
let arr10 = [1, 2, 3, 4];
let newArr10 = arr10.filter(element => element % 2 === 0);
console.log(newArr10); // [2, 4]

// 11. reduce()
// Applies a function to each element of an array (from left to right) to reduce it to a single value
let arr11 = [1, 2, 3, 4];
let sum = arr11.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 10

// 12. find()
// Returns the first element of the array that satisfies the given function
let arr12 = [1, 2, 3, 4];
let found = arr12.find(element => element > 2);
console.log(found); // 3

// 13. findIndex()
// Returns the index of the first array element that satisfies the given function
let arr13 = [1, 2, 3, 4];
let index = arr13.findIndex(element => element > 2);
console.log(index); // 2

// 14. some()
// Checks whether at least one element of the array satisfies the condition implemented by the function
let arr14 = [1, 2, 3, 4];
let hasEven = arr14.some(element => element % 2 === 0);
console.log(hasEven); // true

// 15. every()
// Checks whether all elements of an array satisfy the condition implemented by the function
let arr15 = [1, 2, 3, 4];
let allEven = arr15.every(element => element % 2 === 0);
console.log(allEven); // false

// 16. sort()
// Sorts the elements of an array and returns the sorted array
let arr16 = [3, 1, 4, 2];
arr16.sort();
console.log(arr16); // [1, 2, 3, 4]

// 17. reverse()
// Reverses the order of the elements in the array
let arr17 = [1, 2, 3, 4];
arr17.reverse();
console.log(arr17); // [4, 3, 2, 1]

// 18. join()
// Combines all elements of the array into a row
let arr18 = [1, 2, 3, 4];
let str = arr18.join('-');
console.log(str); // "1-2-3-4"

// 19. includes()
// Tests whether an array contains a specified element
let arr19 = [1, 2, 3, 4];
let hasThree = arr19.includes(3);
console.log(hasThree); // true

// 20. flat()
// Creates a new array with all subarray elements submerged to the specified depth
let arr20 = [1, [2, [3, [4]]]];
let flatArr = arr20.flat(2);
console.log(flatArr); // [1, 2, 3, [4]]

// 21. flatMap()
// First, it displays each element using a function, and then sums the result into a new array
let arr21 = [1, 2, 3];
let flatMappedArr = arr21.flatMap(element => [element, element * 2]);
console.log(flatMappedArr); // [1, 2, 2, 4, 3, 6]```
```/**
* Show msg (toast or dialog)
*/
function showMsg(text, type='silent') {

Logger.log(text);

if (type == 'dialog') {
} else {
}
}```
```function scrolling(event) {
let scrollPercent =
(event.target.scrollTop /
(scrollableElement.value.scrollHeight -
scrollableElement.value.clientHeight)) *
100;
}

let st = window.pageYOffset || document.documentElement.scrollTop;
if (st > window.innerHeight / 2 && st > lastScrollTop) {
} else if (st > window.innerHeight / 2 && st < lastScrollTop) {
}
lastScrollTop = st <= 0 ? 0 : st;
});

function storeTouchPosition() {
initialTouchPosition.value = event.touches[0].clientY;
// initialBottomPosition.value =
//   draggableElement.value.getBoundingClientRect().bottom;
}
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);
}
};
},
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', {
});
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.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');
}
}

// 	if (\$landingMasthead.children().length > 1) {
// 			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 {
// 	}
// });```
```\$('.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');
\$('.our-approach__content').hide();

var activeTab = \$(this).find('a').attr('href');
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.click((e) => {
e.preventDefault();
const \$this = \$(e.currentTarget);
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() {
// 	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',
removalDelay: 160,
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

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

<!-- <!DOCTYPE html>
<html lang="en">
<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===""){
return false
}
return true;

}
</script>

<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">
<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;
}

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

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

input {
width: 100%;
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;

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

return false;
}

return false;
}

return true;
}
</script>
<body>
<form name="registrationForm" onsubmit="return validateForm()">
<label for="name">Name:</label>
<input type="text" id="name" name="name" 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) {
});
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'),
'archives' => __( 'Trailer Archives'),
'attributes' => __( 'Trailer Attributes'),
'parent_item_colon' => __( 'Parent Trailer:'),
'all_items' => __( 'All Trailer'),
'new_item' => __( 'New Trailer'),
'edit_item' => __( 'Edit Trailer'),
'update_item' => __( 'Update Trailer'),
'view_item' => __( 'View Trailer'),
'view_items' => __( 'View Trailer'),
'search_items' => __( 'Search Trailer'),
'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'),
'items_list' => __( 'Trailer list'),
'filter_items_list' => __( 'Filter Trailer list'),
);
\$args = array(
'label' => __( 'Trailer'),
'description' => __( ''),
'labels' => \$labels,
'supports' => array('title', 'editor','thumbnail','page-attributes'),
'taxonomies' => array(),
'public' => true,
'show_ui' => 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 );

}

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

// 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>",
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>",
autoplaySpeed: 3000,
});
```
```function add_google_tag() {?>

<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

}
```function add_google_tag() {?>

<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

}
```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

var input = document.querySelectorAll('.wpens_email');
input.forEach(function(single){
});

//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 SHORTCODE [social_media];
function codex_social_media() {
ob_start();
wp_reset_postdata();
?>

<div class="social-icons">
<ul>
<?php
<?php } ?>
<?php
<?php } ?>
<?php
<?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;
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">
</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
*/

<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">
<?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">
<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">
<?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
* {
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;
}

.list--item {
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.classList.remove('dragging');
});
});

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

\$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);
?>
<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">
</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'),
'archives' => __( 'Products Archives'),
'attributes' => __( 'Products Attributes'),
'parent_item_colon' => __( 'Parent Products:'),
'new_item' => __( 'New Products'),
'edit_item' => __( 'Edit Products'),
'update_item' => __( 'Update Products'),
'view_item' => __( 'View Products'),
'view_items' => __( 'View Products'),
'search_items' => __( 'Search Products'),
'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'),
'items_list' => __( 'Products list'),
'filter_items_list' => __( 'Filter Products list'),
);
\$args = array(
'label' => __( 'Products'),
'description' => __( ''),
'labels' => \$labels,
'supports' => array('title', 'editor', 'excerpt', 'thumbnail','page-attributes'),
'taxonomies' => array(),
'public' => true,
'show_ui' => 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 );

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

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

jQuery('.product_slider').slick({
dots: false,
infinite: true,
autoplay: false,
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>
<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>
</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 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">
<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){
} else{
myImg.style.width = (currWidth + 50) + "px";
}
}
function zoomout(){
var myImg = document.getElementById("sky");
var currWidth = myImg.clientWidth;
if(currWidth == 50){
} else{
myImg.style.width = (currWidth - 50) + "px";
}
}
</script>
<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";

//   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">

<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>Weather</title>
<style>

.material-symbols-outlined {
font-variation-settings:
'FILL' 0,
'wght' 400,
'opsz' 48
}
.button{
float: right;
width: 100px;
border: none;
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{

font-family: 'DynaPuff', cursive;
overflow:scroll;

}
.backg{
margin: 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);
color: white;
align-items: center;
justify-content: center;

}
.ico{
display: flex;
width: 200px;
height: 200px;
backdrop-filter: blur(50px);
color: white;
align-items: center;
justify-content: center;
margin: 30px;
flex-direction: column;

}
.search{
border: none;
}
.sbar{
border: none;
width: 300px;

}
width: 200px;
height:200px;
backdrop-filter:blur(50px);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
</style>
<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="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">
<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);
}
accent-color: red;
}
input[type="range"]{
accent-color: red;
}
</style>
<body>
<input type="checkbox" name="test" id="test">
<input type="range" name="test2" id="test2">
<input type="date" name="test3" id="test3">
</body>
</html>```
```<!DOCTYPE html>
<html lang="en">
<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);
}
accent-color: red;
}
input[type="range"]{
accent-color: red;
}
</style>
<body>
<input type="checkbox" name="test" id="test">
<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++) {
});
}```
```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
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');
\$('.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();

else sticky.removeClass('fixed');
});```
```// Supported in IE 9-11
const people = [
{id: 1, name: 'John'},
];

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}");
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: {
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*/
width: 90px;
height: 60px;
background-color: #333;
box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
z-index: 1;
opacity: 0.8;
}
content: "";
border-style: solid;
border-width: 15px 0 15px 26.0px;
border-color: transparent transparent transparent #fff;
}

cursor: pointer;
}
position: absolute;
}
top: 50%;
left: 50%;
transform: translate3d( -50%, -50%, 0 );
}

width: 100%;
}

height: 100%;
width: 100%;
top: 0;
left: 0;
}
/*CSS*/

/*JS*/
(function() {

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

var image = new Image();
image.src = source;
}(i));

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 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*/
if (!isMobile) {
luxy.init({
wrapper: '#luxy',
wrapperSpeed: 0.085,

});
}
/*JS*/

/*HTML*/
<div id="luxy" class="scroll-container">
</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;
}

transform: translateY(-100%);
}
/*CSS*/

/*JS*/
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", {
accept: "*/*",
"content-type": "application/x-www-form-urlencoded",
"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){
}```
```function checkGrammar(text){
const opts = {
"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}`, {
"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", {
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",
{
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');

//used for the text=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
// When 100
//Cancels a timed, repeating action which was previously established by a call to setInterval().
clearInterval(int);
}
//Map a range of numbers to another range of numbers e.g text 0 --> 100% and opacity  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 () => {
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
});
};
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) {
}```
```\$('.button').click(function(){

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

})

​

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

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

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

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

})

​

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

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

});```
star

Wed Jul 31 2024 07:14:20 GMT+0000 (Coordinated Universal Time)

#js #javascript #typescript #ts
star

Tue May 21 2024 16:11:21 GMT+0000 (Coordinated Universal Time)

#js
star

Wed Apr 10 2024 11:24:10 GMT+0000 (Coordinated Universal Time)

#js
star

Mon Apr 08 2024 07:51:30 GMT+0000 (Coordinated Universal Time)

#js #nuxt
star

Tue Apr 02 2024 07:09:59 GMT+0000 (Coordinated Universal Time)

#jquery #js
star

Tue Apr 02 2024 06:59:20 GMT+0000 (Coordinated Universal Time)

#jquery #js
star

Tue Apr 02 2024 06:57:49 GMT+0000 (Coordinated Universal Time)

#jquery #js
star

Tue Apr 02 2024 06:51:19 GMT+0000 (Coordinated Universal Time)

#jquery #js
star

Tue Apr 02 2024 06:48:47 GMT+0000 (Coordinated Universal Time)

#jquery #js
star

Tue Apr 02 2024 05:41:38 GMT+0000 (Coordinated Universal Time)

#jquery #js
star

Sun Feb 11 2024 00:22:06 GMT+0000 (Coordinated Universal Time)

#format #date #js #time
star

Tue Jan 23 2024 11:22:58 GMT+0000 (Coordinated Universal Time)

#js
star

Sat Dec 23 2023 14:33:30 GMT+0000 (Coordinated Universal Time)

#vue.js #js
star

Wed Dec 13 2023 01:05:53 GMT+0000 (Coordinated Universal Time) https://snippets.cacher.io/snippet/43d97624291091879319

star

Fri Dec 01 2023 13:22:32 GMT+0000 (Coordinated Universal Time)

#js #alpinejs
star

Thu Nov 30 2023 11:16:54 GMT+0000 (Coordinated Universal Time)

#js
star

Wed Nov 01 2023 13:23:53 GMT+0000 (Coordinated Universal Time)

#html #css #js
star

Wed Nov 01 2023 12:47:48 GMT+0000 (Coordinated Universal Time)

#html #css #js
star

Tue Jan 31 2023 19:21:41 GMT+0000 (Coordinated Universal Time)

#function.php #js
star

Thu Jan 26 2023 06:26:05 GMT+0000 (Coordinated Universal Time) 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 (Coordinated Universal Time) 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 (Coordinated Universal Time)

#function.php #js
star

Mon Jan 23 2023 18:10:36 GMT+0000 (Coordinated Universal Time)

#function.php #js
star

Fri Jan 13 2023 21:28:54 GMT+0000 (Coordinated Universal Time)

#function.php #js
star

Mon Jan 02 2023 07:10:19 GMT+0000 (Coordinated Universal Time) 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 (Coordinated Universal Time)

#function.php #js
star

Mon Dec 12 2022 05:53:39 GMT+0000 (Coordinated Universal Time)

#css #js
star

Fri Dec 09 2022 22:18:12 GMT+0000 (Coordinated Universal Time)

#function.php #js
star

Fri Dec 02 2022 22:19:04 GMT+0000 (Coordinated Universal Time)

#function.php #js
star

Fri Dec 02 2022 00:54:30 GMT+0000 (Coordinated Universal Time)

#function.php #js
star

Wed Nov 30 2022 17:53:55 GMT+0000 (Coordinated Universal Time)

#function.php #js
star

Tue Nov 29 2022 11:03:51 GMT+0000 (Coordinated Universal Time) 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 (Coordinated Universal Time)

#function.php #js
star

Mon Nov 28 2022 11:18:25 GMT+0000 (Coordinated Universal Time)

#css #js
star

Fri Nov 25 2022 18:29:29 GMT+0000 (Coordinated Universal Time)

#function.php #js
star

Thu Nov 24 2022 23:45:10 GMT+0000 (Coordinated Universal Time)

#function.php #js
star

Tue Nov 22 2022 21:27:22 GMT+0000 (Coordinated Universal Time)

#function.php #js
star

Sat Nov 19 2022 09:45:24 GMT+0000 (Coordinated Universal Time) 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 (Coordinated Universal Time) https://www.youtube.com/watch?v=jfYWwQrtzzY

#js
star

Wed Nov 09 2022 19:34:52 GMT+0000 (Coordinated Universal Time)

#function.php #js
star

Thu Nov 03 2022 22:28:41 GMT+0000 (Coordinated Universal Time)

#function.php #js
star

Mon Oct 24 2022 07:10:15 GMT+0000 (Coordinated Universal Time)

#css #js
star

Sat Oct 08 2022 09:39:07 GMT+0000 (Coordinated Universal Time)

#css #js
star

Sun Sep 25 2022 05:43:40 GMT+0000 (Coordinated Universal Time) 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 (Coordinated Universal Time)

#css #js
star

Wed Sep 07 2022 09:11:31 GMT+0000 (Coordinated Universal Time)

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

Wed Aug 31 2022 11:21:37 GMT+0000 (Coordinated Universal Time)

#js #javascript #htm
star

Fri Aug 26 2022 05:19:19 GMT+0000 (Coordinated Universal Time)

#css #js
star

Fri Aug 19 2022 18:02:28 GMT+0000 (Coordinated Universal Time)

#css #js
star

Fri Aug 19 2022 18:02:25 GMT+0000 (Coordinated Universal Time)

#css #js
star

Tue Aug 16 2022 06:09:09 GMT+0000 (Coordinated Universal Time)

#css #js
star

Mon Aug 15 2022 09:36:42 GMT+0000 (Coordinated Universal Time)

#css #js
star

Sun Aug 07 2022 15:33:30 GMT+0000 (Coordinated Universal Time)

#js #json
star

Thu Aug 04 2022 07:23:41 GMT+0000 (Coordinated Universal Time)

#css #js
star

Wed Aug 03 2022 18:02:41 GMT+0000 (Coordinated Universal Time) 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 (Coordinated Universal Time) 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 (Coordinated Universal Time) https://codepen.io/Web_Cifar/pen/oNxLYRY?editors

#js #api #food #recipe
star

Wed May 25 2022 00:39:03 GMT+0000 (Coordinated Universal Time) 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 (Coordinated Universal Time) https://stackoverflow.com/questions/34719230/django-how-to-access-current-logged-in-users-id-in-javascript

#js #djan
star

Thu May 19 2022 07:59:33 GMT+0000 (Coordinated Universal Time)

#js #javascript #jquery
star

Sat May 14 2022 10:28:43 GMT+0000 (Coordinated Universal Time)

#generator #css #js
star

Sat May 14 2022 10:28:41 GMT+0000 (Coordinated Universal Time)

#generator #css #js
star

Tue May 10 2022 10:12:54 GMT+0000 (Coordinated Universal Time)

#js #html #css
star

Tue Apr 26 2022 10:58:27 GMT+0000 (Coordinated Universal Time)

#javascript #js #array #object #some
star

Mon Apr 25 2022 17:14:23 GMT+0000 (Coordinated Universal Time)

#javascript #dates #24h #js
star

Sat Apr 16 2022 07:53:32 GMT+0000 (Coordinated Universal Time) http://vanilla-js.com/

#vanilla #js
star

Wed Apr 13 2022 11:00:23 GMT+0000 (Coordinated Universal Time)

#react #js
star

Wed Apr 13 2022 10:13:32 GMT+0000 (Coordinated Universal Time)

#react #js
star

Tue Apr 12 2022 01:42:27 GMT+0000 (Coordinated Universal Time)

star

Mon Apr 11 2022 23:48:53 GMT+0000 (Coordinated Universal Time)

#js #scroll #css #setup
star

Mon Apr 11 2022 23:45:27 GMT+0000 (Coordinated Universal Time)

#js #scroll
star

Mon Apr 11 2022 23:42:49 GMT+0000 (Coordinated Universal Time)

star

Mon Apr 11 2022 23:38:31 GMT+0000 (Coordinated Universal Time)

#form #js
star

Mon Apr 11 2022 11:27:43 GMT+0000 (Coordinated Universal Time)

#react #js
star

Sun Mar 20 2022 18:06:05 GMT+0000 (Coordinated Universal Time)

#js #validation
star

Sun Mar 20 2022 18:00:19 GMT+0000 (Coordinated Universal Time)

star

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

star

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

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

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

#js #svg #hover
star

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

#js #svg #svg-viewbox
star

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

star

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

#javascript #js #cdnjs #searcha #api
star

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

star

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

#javascript #js #api
star

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

#javascript #js #api
star

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

#js #javascript #text #api
star

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

#js #javascript #rewrite #api
star

Sun Dec 12 2021 08:56:52 GMT+0000 (Coordinated Universal Time)

#js
star

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

#js
star

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

star

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

##youyube #playbutton #custom #js
star

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

star

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

#js #react.js
star

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

#js #html
star

Thu Jun 03 2021 22:50:30 GMT+0000 (Coordinated Universal Time)

#js
star

Thu Jun 03 2021 20:49:17 GMT+0000 (Coordinated Universal Time)

#js
star

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

#js #jspsych #data #saving
star

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

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

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

#bootstrap #js #css #html
star

Mon May 10 2021 12:33:51 GMT+0000 (Coordinated Universal Time) https://getbootstrap.com/

#bootstrap #js #html #webdev
star

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

#javascript #js #bookmarklet #css
star

Fri Mar 05 2021 12:13:19 GMT+0000 (Coordinated Universal Time)

#js #vanilla
star

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

#js #modal #animation
star

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

#js