Mittal-Arpit
diff --git a/‎Array.from Animation/Array.from Animation.css‎
Lines changed: 73 additions & 0 deletions b/‎Array.from Animation/Array.from Animation.css‎
Lines changed: 73 additions & 0 deletions
diff --git a/‎Array.from Animation/Array.from Animation.html‎
Lines changed: 52 additions & 0 deletions b/‎Array.from Animation/Array.from Animation.html‎
Lines changed: 52 additions & 0 deletions
diff --git a/‎Array.from Animation/Array.from Animation.png‎
19 KB b/‎Array.from Animation/Array.from Animation.png‎
19 KB
@@ -0,0 +1,73 @@
+@import url('https://fonts.googleapis.com/css?family=Fjalla+One');
+body {
+ padding: 0;
+ margin: 0;
+ font-family: 'Fjalla One', sans-serif;
+}
+.container{
+ position: absolute;
+ top: 30%;
+ left: 50%;
+ transform: translate(-50%,-50%);
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+}
+#text, button{
+ width: 200px;
+ text-align: center;
+ margin: 0 auto;
+}
+#text {
+ border: 2px solid rgba(0, 0, 0, 0.5);
+ border-radius: 20px 20px 0px 0px;
+ outline: none;
+ padding: 5px;
+ font-size: 20px;
+ font-family: 'Fjalla One', sans-serif;
+ color: rgba(0, 0, 0, 0.6);
+}
+button {
+ border: none;
+ border-radius: 0px 0px 20px 20px;
+ outline: none;
+ padding: 7px;
+ width: 214px;
+ background: rgba(0, 0, 0, 0.5);
+ font-family: 'Fjalla One', sans-serif;
+ color: #eee;
+ font-size: 20px;
+ transition: .5s;
+ cursor: pointer;
+}
+button:hover{
+ background: #262626;
+}
+.boxes {
+ position: absolute;
+ top: 210px;
+ margin-top: 20px;
+ width: 500px;
+ height: auto;
+ left: -125px;
+}
+.box {
+ position: relative;
+ float: left;
+ padding: 5px 10px;
+ color: rgba(0, 0, 0, 0.6);
+ border: 2px solid rgba(0, 0, 0, 0.5);
+ margin: 5px;
+ font-size: 20px;
+ cursor: pointer;
+ transition: .5s;
+}
+h2 {
+ font-size: 50px;
+ color: rgba(0, 0, 0, 0.8);
+}
+.box:hover{
+ transform: scale(1.3);
+ background: #262626;
+ color: #eee;
+}
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+ <meta charset="utf-8" />
+ <title>page</title>
+ <link rel="stylesheet" type="text/css" href="Array.from Animation.css">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
+</head>
+<body>
+
+
+ <div class="container">
+ <h2>Array.from</h2>
+ <input type="text" id="text" placeholder="text...."/>
+ <button onclick="myFunction()">CLICK</button>
+ <div class="boxes"></div>
+ </div>
+
+ <script>
+
+
+
+ function myFunction() {
+ let text = document.getElementById("text").value;
+ let boxes = document.querySelector(".boxes");
+ let list = Array.from(text);
+
+ list.forEach(function (x) {
+ let box = document.createElement("div");
+ box.setAttribute("class", "box");
+ let txt = document.createTextNode(x);
+ box.appendChild(txt)
+ document.querySelector(".boxes").appendChild(box);
+ })
+
+ for (let i = 0; i < 3; i++) {
+ let line = document.createElement("br");
+
+ boxes.appendChild(line);
+ }
+ }
+
+
+ </script>
+
+
+
+
+</body>
+</html>