Merge branch 'main' into mini

.github/FUNDING.yml

@@ -0,0 +1,3 @@
+# These are supported funding model platforms
+custom: ['https://www.paypal.me/vishalraj25', 'https://paytm.me/a15-Za9']
+github: Vishal-raj-1

README.md

@@ -1,24 +1,21 @@
 <h1 align="center">Awesome JavaScript Projects</h1>
 
-## You can Have a look here [Website](https://vishal-raj-1.github.io/Awesome-JavaScript-Projects/)
+Are you a Newbie in Web development and want to dive deep into Javascript? Do checkout this video to learn JS Basics first
 
-[![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://GitHub.com/Naereen/StrapDown.js/graphs/commit-activity)
-[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
-[![Open Source Love svg1](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)](https://github.com/ellerbrock/open-source-badges/)
-[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/dwyl/esta/issues)
-
-[![GitHub issues](https://img.shields.io/github/issues/Vishal-raj-1/Awesome-JavaScript-Projects)](https://github.com/Vishal-raj-1/Awesome-JavaScript-Projects/issues)
-[![GitHub forks](https://img.shields.io/github/forks/Vishal-raj-1/Awesome-JavaScript-Projects)](https://github.com/Vishal-raj-1/Awesome-JavaScript-Projects/network)
-[![GitHub stars](https://img.shields.io/github/stars/Vishal-raj-1/Awesome-JavaScript-Projects)](https://github.com/Vishal-raj-1/Awesome-JavaScript-Projects/stargazers)
-<a href="https://discord.gg/tRmWXExVtw"><img src="https://img.shields.io/badge/chat-on%20discord-7289DA.svg" alt="Discord Chat" /></a>
-
-Are you a Newbie in Web development and want to dive deep into Javascript?
+<p align="center">
+  <a href="https://www.youtube.com/watch?v=9Shi7sbrHqY&list=PLSH9gf0XETou_b8C3SJm8rk69Z41eUgbQ&index=6">
+    <img src="https://github.com/Vishal-raj-1/Awesome-JavaScript-Projects/blob/main/assets/Images/intro%20to%20JS.png" width=80%> 
+  </a>
+</p>
 
-<p align="center"><img src="https://media.giphy.com/media/l4q83E0RjRSGLXBLO/giphy.gif" width = 40%></p>
 
-Are you looking for some awesome Javascript Projects in which each and every project will teach you an important Javascript Concept?
+Are you looking for some awesome Javascript Projects in which each and every project will teach you an important Javascript Concept? Let's Learn JS DOM Now
 
-<p align="center"><img src="https://media.giphy.com/media/Uq4XZx6xm8bdVgrv9T/giphy.gif" width = 40%></p>
+<p align="center">
+  <a href="https://www.youtube.com/watch?v=9Shi7sbrHqY&list=PLSH9gf0XETou_b8C3SJm8rk69Z41eUgbQ&index=7">
+    <img src="https://github.com/Vishal-raj-1/Awesome-JavaScript-Projects/blob/main/assets/Images/intro%20to%20DOM.png" width=80%> 
+  </a>
+</p>
 
 Do you want to contribute to some Awesome Javascript projects and showcase your Javascript skills through it?🤩
 
@@ -141,13 +138,17 @@ git push -u origin <your_branch_name>
 
 ## Project Admin 😃
 
+<div align="center">
 <table>
   <tbody><tr>
-     <td align="center"><a href="https://github.com/Vishal-raj-1"><img alt="" src="https://avatars.githubusercontent.com/u/59874304?s=400&u=a90ce890d0e3d04ef84d5ae09b143dcb2ecc5d1b&v=4" width="130px;"><br><sub><b> Vishal Rajput </b></sub></a><br><a href="/Vishal-raj-1/Awesome-JavaScript-Projects/commits?author=Vishal-raj-1" title="Code">💻 </a></td> </a></td>
+     <td align="center"><a href="https://twitter.com/vishalraj_1"><img alt="" src="https://avatars.githubusercontent.com/u/59874304?s=400&u=a90ce890d0e3d04ef84d5ae09b143dcb2ecc5d1b&v=4" width="130px;"><br><sub><b> Vishal Rajput </b></sub></a><br><a href="/Vishal-raj-1/Awesome-JavaScript-Projects/commits?author=Vishal-raj-1" title="Code">💻 </a></td> </a></td>
   </tr>
 </tbody></table>
+</div>
 
 ## Our valuable Contributors👩‍💻👨‍💻 :
+<div align="center">
 <a href="https://github.com/Vishal-raj-1/Awesome-JavaScript-Projects/graphs/contributors">
   <img src="https://contributors-img.web.app/image?repo=Vishal-raj-1/Awesome-JavaScript-Projects" />
 </a>
+</div>

assets/css/15puzzle.css

@@ -0,0 +1,79 @@
+html{
+    height: 100%;
+}
+
+body{
+    height: 100%;
+    background-image: linear-gradient(#7B9F35,#226666);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+.game {
+    /* position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%); */
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
+    background-color: tomato;
+    padding:  15px;
+    border-radius: 5px;
+}
+
+.grid{
+    display: grid;
+    grid-template-columns: 80px 80px 80px 80px;
+    grid-template-rows: 80px 80px 80px 80px;
+    border: 1px solid #550000;
+}
+
+.grid button{
+    background-color: #cfcfcf;
+    color: #56A7E8;
+    font-size: 24px;
+    font-weight: bold;
+    border: 1px solid #354F00;
+    outline: none;
+    cursor: pointer;
+}
+
+.footer{
+    margin-top: 15px;
+    display: flex;
+    justify-content: space-between;
+}
+
+.footer button{
+    border: none;
+    font-size: 20px;
+    font-weight: bold;
+    border-radius: 5px;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
+    padding: 5px;
+    width: 80px;
+    background-color: #7B9F35;
+    color: #354F00;
+    outline: none;
+    cursor: pointer;
+}
+
+.footer button:hover{
+    color: #D4EE9F;
+    background-color: #354F00;
+}
+
+.footer span{
+    flex: 1;
+    text-align: center;
+    font-size: 20px;
+    color: yellow;
+    font-weight: bold;
+    margin: auto;
+}
+
+.message{
+    color:  tomato;
+    height: 80px;
+}

assets/css/Drawing App/style.css

@@ -0,0 +1,107 @@
+body
+{
+    background: url(https://cdn.pixabay.com/photo/2016/01/19/14/53/book-1149031__340.jpg) center center fixed;
+    text-align: center;
+    background-size: cover;
+}
+#header
+{
+    background: linear-gradient(white,rgba(128,128,128,0.1));
+    background:-o-linear-gradient(white,rgba(128,128,128,0.1));
+    background:-moz-linear-gradient(white,rgba(128,128,128,0.1));
+    background:-webkit-linear-gradient(white,rgba(128,128,128,0.1));
+    height: 70px;
+    width: 500px;
+    margin: 8px auto;
+    font-size: 2em;
+    color: rgb(7, 7, 7);
+    line-height: 60px;
+}
+.inputContainer
+{
+    width: 300px;
+    margin: 0 auto;
+}
+.input
+{
+    height: 40px;
+    font-size: 1.6em;
+}
+#slider
+{
+    margin: 10px auto;
+}
+#circle
+{
+    height: 5px;
+    width: 1px;
+    border-radius: 50%;
+    background: black;
+    margin: 0 auto;
+    position: absolute;
+    top: 60%;
+    left: 50%;
+    transform:translate(-50%, -50%);
+    -webkit-transform:translate(-50%, -50%);
+    -moz-transform:translate(-50%, -50%);
+    -o-transform:translate(-50%, -50%);
+}
+#thicknessInput
+{
+    position: relative;
+}
+#container
+{
+    width: 500px;
+    height: 400px;
+    border: 1px solid rgba(122,174,229,0.5);
+    margin: 10px auto;
+}
+.inputContainer2
+{
+    width: 399px;
+    margin: 0 auto;
+}
+#paint
+{
+    background-color: #fff;
+    cursor: crosshair;
+}
+.input2
+{
+    width: 133px;
+    color: grey;
+    font-size: 1.0em;
+    float: left;
+}
+.button
+{
+    background: #fff;
+    height: 50px;
+    padding: 10px;
+    border-radius: 3px;
+    font-weight: bold;
+    cursor: pointer;
+    box-shadow: 0px 4px rgba(0,0,0,0.3);
+    -webkit-box-shadow: 0px 4px rgba(0,0,0,0.3);
+    -moz-box-shadow: 0px 4px rgba(0,0,0,0.3);
+    -o-box-shadow: 0px 4px rgba(0,0,0,0.3);
+    position: relative;
+}
+.button:hover
+{
+    color: white;
+    background: linear-gradient(white,rgba(128,128,128,0.1));
+    background:-o-linear-gradient(white,rgba(128,128,128,0.1));
+    background:-moz-linear-gradient(white,rgba(128,128,128,0.1));
+    background:-webkit-linear-gradient(white,rgba(128,128,128,0.1));
+}
+.button:active
+{
+    top: 4px;
+}
+.eraseMode
+{
+    background-color: red;
+    color: #fff;
+}

assets/css/FAQs.css

@@ -9,29 +9,60 @@
 	 margin: 0;
 	 padding: 0;
 	 font-family: 'Hind', sans-serif;
-	 background: rgb(239, 250, 251);
+	 background: brown;
 	 color: #4d5974;
 	 display: flex;
 	 min-height: 100vh;
-}
+	}
+
  .container {
 	 margin: 0 auto;
 	 padding: 4rem;
 	 width: 48rem;
 }
+
+ .card{
+	background-color:rgb(194, 187, 187);
+	box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
+}
+h2{
+	color: #362222;
+	text-align:center;
+	letter-spacing: 2px;
+	background-color:rgb(194, 187, 187);
+}
+.border-bottom{
+	border-bottom: 1px solid purple;
+	padding-bottom: 5px;
+}
+
+.img{
+    width:200px;
+	position:relative;
+    top: -10px;
+    filter: drop-shadow(0 25px 0px #E1D6F6);
+}
+
+/*expand and collapse cards*/
+
+
  .accordion .accordion-item {
-	 border-bottom: 1px solid #e5e5e5;
+	border-bottom: 1px solid #ebc7c7;
+	color: #222831;
+	text-align: center;
+
 }
+
  .accordion .accordion-item button[aria-expanded='true'] {
-	 border-bottom: 1px solid #03b5d2;
+	border-bottom: 1px dotted  #F0EFEF;
 }
  .accordion button {
 	 position: relative;
 	 display: block;
-	 text-align: left;
+	 align-items: center;
 	 width: 100%;
 	 padding: 1em 0;
-	 color: #7288a2;
+	 color: #31112C;
 	 font-size: 1.15rem;
 	 font-weight: 400;
 	 border: none;
@@ -40,15 +71,17 @@
 }
  .accordion button:hover, .accordion button:focus {
 	 cursor: pointer;
-	 color: #03b5d2;
+	 color: #EE4540;
+
 }
  .accordion button:hover::after, .accordion button:focus::after {
 	 cursor: pointer;
-	 color: #03b5d2;
-	 border: 1px solid #03b5d2;
+	 color: #A72693;
+	 border: 1px solid #A72693;
 }
  .accordion button .accordion-title {
 	 padding: 1em 1.5em 1em 0;
+
 }
  .accordion button .icon {
 	 display: inline-block;
@@ -80,7 +113,7 @@
 	 background: currentColor;
 }
  .accordion button[aria-expanded='true'] {
-	 color: #03b5d2;
+	 color: #EE4540;
 }
  .accordion button[aria-expanded='true'] .icon::after {
 	 width: 0;
@@ -100,7 +133,7 @@
 }
  .accordion .accordion-content p {
 	 font-size: 1rem;
-	 font-weight: 300;
+	 font-weight: bold;
 	 margin: 2em 0;
 }
- 
+/*ends*/