Snippets Collections
<!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>
const searchForm = document.querySelector("form");
2
const searchResultDiv = document.querySelector(".search-result");
3
const container = document.querySelector(".container");
4
let searchQuery = "";
5
const APP_ID = "Use Your Own App ID Here";
6
const APP_key = "Use Your Own App Key Here";
7
// console.log(container)
8
searchForm.addEventListener("submit", (e) => {
9
  e.preventDefault();
10
  searchQuery = e.target.querySelector("input").value;
11
  fetchAPI();
12
});
13
​
14
async function fetchAPI() {
15
  const baseURL = `https://api.edamam.com/search?q=${searchQuery}&app_id=${APP_ID}&app_key=${APP_key}&from=0&to=20`;
16
  const response = await fetch(baseURL);
    $('.tabs-nav a').on('click', function (event) {
        event.preventDefault();
        $('.tabs-nav li').removeClass('tab-active');
        $(this).parent().addClass('tab-active');
        $('.tabs-stage section').hide();
        $($(this).attr('href')).show();

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

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

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

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


CSS

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


jQuery

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

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

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

  return false;
});

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

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

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

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

console.log(hoursBetweenDates);

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

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

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

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

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

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

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

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

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

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

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

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

.youtube img {
	width: 100%;
}

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

/*JS*/
(function() {

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

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

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

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

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

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

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

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

})();
/*JS*/

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

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

	});
}
/*JS*/

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

})

​

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

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

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

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

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

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

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

})

​

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

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

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

});
star

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

#css #js
star

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

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

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

#js #javascript #htm
star

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

#css #js
star

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

#css #js
star

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

#css #js
star

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

#css #js
star

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

#css #js
star

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

#js #json
star

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

#css #js
star

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

#js
star

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

#js #api #food #recipe
star

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

#django #js #javascript
star

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

#js #djan
star

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

#generator #css #js
star

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

#generator #css #js
star

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

#js #html #css
star

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

#react #js
star

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

#react #js
star

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

#js #scroll #css #setup
star

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

#js #scroll
star

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

#react #js
star

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

#js #validation
star

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

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

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

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

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

#js #svg #hover
star

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

#js #svg #svg-viewbox
star

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

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

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

#javascript #js #cdnjs #searcha #api
star

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

#javascript #api #js #autocomplete #google
star

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

#javascript #js #api
star

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

#javascript #js #api
star

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

#js #javascript #text #api
star

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

#js #javascript #rewrite #api
star

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

#js
star

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

#js
star

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

#youtube #custom #playbutton #js
star

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

##youyube #playbutton #custom #js
star

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

#cookie #js
star

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

#js #react.js
star

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

#js #html
star

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

#js
star

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

#js
star

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

#js #jspsych #data #saving
star

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

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

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

#bootstrap #js #css #html
star

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

#javascript #js #bookmarklet #css
star

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

#js #vanilla
star

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

#js #modal #animation
star

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

#js

Save snippets that work with our extensions

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