A Pen by AmiraAmin

PHOTO

Sun Jun 13 2021 13:16:26 GMT+0000 (UTC)

Saved by @amiraamin #undefined

console.clear();

//people droppig a form (action creator)

const creatPolicy =(name,amount)=>{

  return{//action(form in our analogy)

    type:'CREATE_Policy',

    payload:{

      name,amount

    }  

  }  

}



const deletePolicy =(name,amount)=>{

  return{//action(form in our analogy)

    type:'DELETE_Policy',

    payload:{

      name,amount

    }  

  }  

}



const creatClaim =(name,amountOfMoneytoCollect)=>{

  return{//action(form in our analogy)

    type:'CREATE_CLAIM',

    payload:{

      name,amountOfMoneytoCollect

    }  

  }  

}

//reducer department

 const ClaimHistory =(oldListOfClaim=[],form)=>{

   if(action.type===CREATE_CLAIM)

    { //we care about this action

       return [...oldListOfClaim ,action.payload]

    }

https://codepen.io/amiraamin12/pen/Popxqep?editors

Save snippets that work from anywhere online with our extensions

Available in the Chrome Web Store

Get Firefox Add-on

Get VS Code extension

Comments

More like this

Online HTML Editor - 𝗛𝗧𝗠𝗟-𝗢𝗻𝗹𝗶𝗻𝗲.𝗰𝗼𝗺

Tryit Editor v3.7

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}

#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;

Untitled - Jupyter Notebook

Python Starter - Jupyter Notebook

Tabbar animation - Only CSS

.tabs {

  --background: #FFFFFF;

  --text-color: #;
4
  --color-01: #FFB400;
5
  --color-02: #FF50;
6
  --color-03: #901F8;

  --width: 300px;    
8
  --height: 75px;
9
  --border-radius: var(--height);     
10
  background: var(--background);

  width: var(--width);

  height: var(--height);

  padding: 0;
14
  position: relative;

  border-radius: var(--border-radius);

  box-shadow: 0 10px 30px rgba(#414856, 0.05);

  display: flex;

  justify-content: space-around;

  align-items: center;

  padding: 0 15px;

  box-sizing: border-box;

  label {

    width: 25px;

    height: 25px;

Tabbar animation - Only CSS

<div class="tabs">

  <!-- TAB 1 -->

  <input type="radio" name="tab" id="tab-01" checked />

  <label for="tab-01">

    <svg>

      <use xlink:href="#icon-01" class="icon" />

      <use xlink:href="#icon-01" class="icon" />

      <use xlink:href="#icon-01" class="icon" />

      <use xlink:href="#icon-01" class="icon" />

      <use xlink:href="#icon-01" class="icon" />

    </svg>

  </label>

  <!-- TAB 2 -->

  <input type="radio" name="tab" id="tab-02" />

  <label for="tab-02">

    <svg>

      <use xlink:href="#icon-02" class="icon" />

      <use xlink:href="#icon-02" class="icon" />

      <use xlink:href="#icon-02" class="icon" />

      <use xlink:href="#icon-02" class="icon" />

      <use xlink:href="#icon-02" class="icon" />

    </svg>

  </label>

Insert Headers and Footers ‹ Private Tutoring & Test Prep Services — WordPress

<script id="frase-script" data-hash="1eb88405a4522a439c" src="https://app.frase.io/js/libraries/bot.js"></script>
2
<meta name="google-site-verification" content="L_vGUaI3AOGtve31I11D844-h8hDqtjlsZxqLUhFnOw" />
3
<script>
4
   var script = document.createElement("script");
5
   script.id = "wphs";
6
   script.src = "https://cdn.jsdelivr.net/npm/hockeystack@latest/hockeystack.min.js";
7
   script.async = 1;
8
   script.dataset.apikey = "d3ff5681ac9d499dad06d4d22e";
9
   script.dataset.cookieless = 1;

   document.getElementsByTagName('head')[0].appendChild(script);
11
</script>


13
<script type="text/javascript">

  (function (d, u, h, s) {
15
    h = d.getElementsByTagName('head')[0];
16
    s = d.createElement('script');

    s.async = 1;
18
    s.src = u + new Date().getTime();

    h.appendChild(s);

  })(document, 'https://grow.clearbitjs.com/api/pixel.js?v=');

</script>

Insert Headers and Footers ‹ Private Tutoring & Test Prep Services — WordPress

<script id="frase-script" data-hash="1eb88405a4522a439c" src="https://app.frase.io/js/libraries/bot.js"></script>
2
<meta name="google-site-verification" content="L_vGUaI3AOGtve31I11D844-h8hDqtjlsZxqLUhFnOw" />
3
<script>
4
   var script = document.createElement("script");
5
   script.id = "wphs";
6
   script.src = "https://cdn.jsdelivr.net/npm/hockeystack@latest/hockeystack.min.js";
7
   script.async = 1;
8
   script.dataset.apikey = "d3ff5681ac9d499dad06d4d22e";
9
   script.dataset.cookieless = 1;

   document.getElementsByTagName('head')[0].appendChild(script);
11
</script>


13
<script type="text/javascript">

  (function (d, u, h, s) {
15
    h = d.getElementsByTagName('head')[0];
16
    s = d.createElement('script');

    s.async = 1;
18
    s.src = u + new Date().getTime();

    h.appendChild(s);

  })(document, 'https://grow.clearbitjs.com/api/pixel.js?v=');

</script>

#undefined #javascript

According to user min and max range generating random number

function randomRange(myMin, myMax) {
  // Only change code below this line
  return Math.floor(Math.random()* (myMax - myMin+1)+myMin);
  // Only change code above this line
}

#undefined #javascript

Generating random number from particular given range

var k = 0;
 console.log(Math.floor(Math.random()*10))

Editing Calculator-using-javascript./README.md at main · Ut321/Calculator-using-javascript.

# Calculator-using-javascript.

Cards Hover Effect -> HTML & CSS

<div class="container">



  <div class="card">

    <div class="face face1">

      <div class="content">

        <span class="stars"></span>

        <h2 class="java">Java</h2>

        <p class="java">Java is a class-based, object-oriented programming language that is designed to have as few implementation dependencies as possible.</p>

      </div>

    </div>

    <div class="face face2">

      <h2>01</h2>

    </div>

  </div>



  <div class="card">

    <div class="face face1">

      <div class="content">

        <span class="stars"></span>

        <h2 class="python">Python</h2>

        <p class="python">Python is an interpreted, high-level and general-purpose programming language.</p>

      </div>

Cards Hover Effect -> HTML & CSS

@import url("https://fonts.googleapis.com/css?family=Righteous&display=swap");
2


body {

  margin: 0;

  padding: 0;

  display: flex;

  justify-content: center;

  align-items: center;

  font-family: "Righteous", cursive;

  min-height: 100vh;

  background-color: #a9c9ff;

  background-image: linear-gradient(0deg, #a9c9ff 0%, #ffbbec 100%);



  .container {

    max-width: 100vw;

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
18
    grid-gap: 35px;

    margin: 0 auto;

    padding: 40px 0;



    .card {

Circular Avatars

<div class="flex space-x-">
2
  <div class="relative w- h-12">

    <img class="rounded-full border border-gray-0 shadow-sm" src="https://randomuser.me/api/portraits/women/1.jpg" alt="user image" />

    <div class="absolute top-0 right-0 h-3 w-3 my-1 border-2 border-white rounded-full bg-green-400 z-2"></div>

  </div>



  <div class="relative w- h-16">
8
    <img class="rounded-full border border-gray-100 shadow-sm" src="https://randomuser.me/api/portraits/women/81.jpg" alt="user image" />

    <div class="absolute top-0 right-0 h-4 w-4 my-1 border-2 border-white rounded-full bg-green-400 z-2"></div>
10
  </div>


12
  <div class="relative w-24 h-24">

    <img class="rounded-full border border-gray-100 shadow-sm" src="https://randomuser.me/api/portraits/women/81.jpg" alt="user image" />

    <div class="absolute top-0 right-0 h-6 w-6 my-1 border-4 border-white rounded-full bg-green-400 z-2"></div>

  </div>
16
</div>



<div class="flex space-x-2">

  <div class="relative w-12 h-12">

    <img class="rounded-full border border-gray-100 shadow-sm" src="https://randomuser.me/api/portraits/women/81.jpg" alt="user image" />

Browse more snippets >>