Tic Tac Toe
15 |21 | Player X's turn 22 |
37 |
38 |
39 |
40 |
41 |
42 |
13 |
36 |
37 |
--------------------------------------------------------------------------------
/Drum--kit/Readme.md:
--------------------------------------------------------------------------------
1 | # Drum-Kit
2 | > This is a JavaScript based Drum Kit WebApp where user can play different drum beats by key press or by m ouse stroke.
3 | > The app is optimized for the mobile view also.
4 |
5 | # Tech Stack Used are:-
6 | > HTML, CSS, JavaScript
7 |
8 | # To clone this project
9 | > Clone the repo
10 | > cd Drum--kit
11 | > Go live using the Live Server Extension
12 |
--------------------------------------------------------------------------------
/Drum--kit/images/crash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/Drum--kit/images/crash.png
--------------------------------------------------------------------------------
/Drum--kit/images/kick.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/Drum--kit/images/kick.png
--------------------------------------------------------------------------------
/Drum--kit/images/snare.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/Drum--kit/images/snare.png
--------------------------------------------------------------------------------
/Drum--kit/images/tom1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/Drum--kit/images/tom1.png
--------------------------------------------------------------------------------
/Drum--kit/images/tom2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/Drum--kit/images/tom2.png
--------------------------------------------------------------------------------
/Drum--kit/images/tom3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/Drum--kit/images/tom3.png
--------------------------------------------------------------------------------
/Drum--kit/images/tom4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/Drum--kit/images/tom4.png
--------------------------------------------------------------------------------
/Drum--kit/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | text-align: center;
3 | background-color: #F10086;
4 | }
5 |
6 | h1 {
7 | font-size: 5rem;
8 | color: #DBEDF3;
9 | font-family: "Arvo", cursive;
10 | text-shadow: 3px 0 #DA0463;
11 |
12 | }
13 |
14 | footer {
15 | color: #DBEDF3;
16 | font-family: sans-serif;
17 | }
18 |
19 | .w {
20 |
21 | background-image: url("images/tom1.png");
22 |
23 | }
24 |
25 | .a {
26 |
27 | background-image: url("images/tom2.png");
28 |
29 | }
30 |
31 | .s {
32 |
33 | background-image: url("images/tom3.png");
34 |
35 | }
36 |
37 | .d {
38 |
39 | background-image: url("images/tom4.png");
40 |
41 | }
42 |
43 | .j {
44 |
45 | background-image: url("images/crash.png");
46 |
47 | }
48 |
49 | .k {
50 |
51 | background-image: url("images/kick.png");
52 |
53 | }
54 |
55 | .l {
56 |
57 | background-image: url("images/snare.png");
58 |
59 | }
60 |
61 | .set {
62 | margin: 10% auto;
63 | }
64 |
65 | .game-over {
66 | background-color: red;
67 | opacity: 0.8;
68 | }
69 |
70 | .pressed {
71 | box-shadow: 0 3px 4px 0 #FFBDE6;
72 | opacity: 0.5;
73 | }
74 |
75 | .red {
76 | color: red;
77 | }
78 |
79 | .drum {
80 | outline: none;
81 | border: 10px solid #F582A7;
82 | font-size: 5rem;
83 | font-family: 'Arvo', cursive;
84 | line-height: 2;
85 | font-weight: 900;
86 | color: #DA0463;
87 | text-shadow: 3px 0 #DBEDF3;
88 | border-radius: 15px;
89 | display: inline-block;
90 | width: 150px;
91 | height: 150px;
92 | text-align: center;
93 | margin: 10px;
94 | background-color: white;
95 | }
--------------------------------------------------------------------------------
/Drum--kit/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 | Drum 🥁 Kit
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
28 |
29 |
32 |
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/Drum--kit/index.js:
--------------------------------------------------------------------------------
1 | var n=document.querySelectorAll(".drum").length
2 | for(var i =0;iadmin accounts
42 | 43 |
44 |
45 |
76 |
77 |
46 |
49 |
50 | prepare("SELECT * FROM `admins`");
52 | $select_accounts->execute();
53 | if($select_accounts->rowCount() > 0){
54 | while($fetch_accounts = $select_accounts->fetch(PDO::FETCH_ASSOC)){
55 | ?>
56 |
68 | no accounts available!';
72 | }
73 | ?>
74 |
75 | add new admin
47 | register admin 48 |messages
42 | 43 |
44 |
45 | prepare("SELECT * FROM `messages`");
47 | $select_messages->execute();
48 | if($select_messages->rowCount() > 0){
49 | while($fetch_message = $select_messages->fetch(PDO::FETCH_ASSOC)){
50 | ?>
51 |
59 | you have no messages';
63 | }
64 | ?>
65 |
66 |
67 |
68 | placed orders
51 | 52 |
53 |
54 | prepare("SELECT * FROM `orders`");
56 | $select_orders->execute();
57 | if($select_orders->rowCount() > 0){
58 | while($fetch_orders = $select_orders->fetch(PDO::FETCH_ASSOC)){
59 | ?>
60 |
89 |
90 |
61 |
81 | no orders placed yet!';
85 | }
86 | ?>
87 |
88 | placed on :
62 |name :
63 |number :
64 |address :
65 |total products :
66 |total price : $/-
67 |payment method :
68 | 80 |user accounts
50 | 51 |
52 |
53 | prepare("SELECT * FROM `users`");
55 | $select_accounts->execute();
56 | if($select_accounts->rowCount() > 0){
57 | while($fetch_accounts = $select_accounts->fetch(PDO::FETCH_ASSOC)){
58 | ?>
59 |
65 | no accounts available!';
69 | }
70 | ?>
71 |
72 |
73 |
74 | category
39 | 40 |
41 |
42 | prepare("SELECT * FROM `products` WHERE name LIKE '%{$category}%'");
45 | $select_products->execute();
46 | if($select_products->rowCount() > 0){
47 | while($fetch_product = $select_products->fetch(PDO::FETCH_ASSOC)){
48 | ?>
49 |
64 | no products found!';
68 | }
69 | ?>
70 |
71 |
72 |
73 |
30 |
31 |
32 |
33 |
34 |
35 | prepare("SELECT * FROM `admins` WHERE id = ?");
37 | $select_profile->execute([$admin_id]);
38 | $fetch_profile = $select_profile->fetch(PDO::FETCH_ASSOC);
39 | ?>
40 |
41 | update profile
42 |
46 | logout
47 |
48 |
49 |
29 | prepare("SELECT * FROM `wishlist` WHERE user_id = ?");
31 | $count_wishlist_items->execute([$user_id]);
32 | $total_wishlist_counts = $count_wishlist_items->rowCount();
33 |
34 | $count_cart_items = $conn->prepare("SELECT * FROM `cart` WHERE user_id = ?");
35 | $count_cart_items->execute([$user_id]);
36 | $total_cart_counts = $count_cart_items->rowCount();
37 | ?>
38 |
39 |
40 | ()
41 | ()
42 |
43 |
44 |
45 |
46 | prepare("SELECT * FROM `users` WHERE id = ?");
48 | $select_profile->execute([$user_id]);
49 | if($select_profile->rowCount() > 0){
50 | $fetch_profile = $select_profile->fetch(PDO::FETCH_ASSOC);
51 | ?>
52 |
53 | update profile
54 |
58 | logout
59 |
62 |
73 |
74 | please login or register first!
63 | 67 | 70 | 71 | 72 |placed orders
37 | 38 |
39 |
40 | please login to see your orders';
43 | }else{
44 | $select_orders = $conn->prepare("SELECT * FROM `orders` WHERE user_id = ?");
45 | $select_orders->execute([$user_id]);
46 | if($select_orders->rowCount() > 0){
47 | while($fetch_orders = $select_orders->fetch(PDO::FETCH_ASSOC)){
48 | ?>
49 |
69 |
70 |
50 |
60 | no orders placed yet!';
64 | }
65 | }
66 | ?>
67 |
68 | placed on :
51 |name :
52 |email :
53 |number :
54 |address :
55 |payment method :
56 |your orders :
57 |total price : $/-
58 |payment status :
59 |quick view
39 | 40 | prepare("SELECT * FROM `products` WHERE id = ?"); 43 | $select_products->execute([$pid]); 44 | if($select_products->rowCount() > 0){ 45 | while($fetch_product = $select_products->fetch(PDO::FETCH_ASSOC)){ 46 | ?> 47 | 77 | no products added yet!'; 81 | } 82 | ?> 83 | 84 |
46 |
47 | prepare("SELECT * FROM `products` WHERE name LIKE '%{$search_box}%'");
51 | $select_products->execute();
52 | if($select_products->rowCount() > 0){
53 | while($fetch_product = $select_products->fetch(PDO::FETCH_ASSOC)){
54 | ?>
55 |
70 | no products found!';
74 | }
75 | }
76 | ?>
77 |
78 |
79 |
80 | latest products
39 | 40 |
41 |
42 | prepare("SELECT * FROM `products`");
44 | $select_products->execute();
45 | if($select_products->rowCount() > 0){
46 | while($fetch_product = $select_products->fetch(PDO::FETCH_ASSOC)){
47 | ?>
48 |
63 | no products found!';
67 | }
68 | ?>
69 |
70 |
71 |
72 | your wishlist
52 | 53 |
54 |
55 | prepare("SELECT * FROM `wishlist` WHERE user_id = ?");
58 | $select_wishlist->execute([$user_id]);
59 | if($select_wishlist->rowCount() > 0){
60 | while($fetch_wishlist = $select_wishlist->fetch(PDO::FETCH_ASSOC)){
61 | $grand_total += $fetch_wishlist['price'];
62 | ?>
63 |
79 | your wishlist is empty';
83 | }
84 | ?>
85 |
86 |
87 |
92 |
93 | 71 | 72 | ## Our Contributors 73 | 74 | 75 |
79 |
80 | Show some ❤️ by starring this awesome repository!
81 |
82 |
--------------------------------------------------------------------------------
/Random_Quote_Generator/README.md:
--------------------------------------------------------------------------------
1 | # random-quote-generator
2 | ### Treehouse Techdegree Project #1 - Random Quote Generator
3 |
4 | In this project, you'll create an app that displays random famous quotes each time a button is clicked. You can display a quote from a famous athlete, politician, or historical figure:
5 |
6 | "The only thing we have to fear is fear itself." — Franklin Delano Roosevelt.
7 |
8 | You'll need to use your knowledge of basic JavaScript syntax, including variables, loops and object literals, to complete this project.
9 |
10 | This project is a fun and effective way for you to practice fundamental JavaScript skills. It also gives you a simple interactive portfolio piece to show off your understanding of JavaScript.
11 |
12 |
13 | # Project Requirements
14 |
15 | ### Create Array of Objects
16 | - [x] Array of objects is named quotes
17 | - [x] Array contains at least 5 quote objects
18 | ### Quote Object
19 | - [x] Objects in array include quote and source properties. If known, citation and date properties are present
20 | ### getRandomQuote function
21 | - [x] Function is named getRandomQuoteand returns a random object from the quotes array
22 | ### printQuote function
23 | - [x] Function named printQuote calls the randomQuote function
24 | - [x] Function prints the quote to the page using the template supplied in the project instructions
25 | ### Code comments
26 | - [x] Comments are included in the code.
27 |
--------------------------------------------------------------------------------
/Random_Quote_Generator/css/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | /*text-align: center;*/
3 | background-size: cover;
4 | color: white;
5 | font-family: 'Amatic SC', cursive;
6 | background-color: rgb(95,207,128);
7 | }
8 | #quote-box {
9 | position: absolute;
10 | top: 14%;
11 | left: 10%;
12 | right: 10%;
13 | width: 80%;
14 | line-height: .5;
15 | }
16 | .quote {
17 | font-size: 6rem;
18 | font-weight: 400;
19 | line-height: 1.1;
20 | text-shadow: 0 1px 1px rgba(0,0,0, .8);
21 | position: relative;
22 | margin: 0;
23 | }
24 | .quote:before, .quote:after {
25 | font-size: 6rem;
26 | line-height: 2.5rem;
27 | position: absolute;
28 | }
29 | .quote:before {
30 | content: "“";
31 | top: .25em;
32 | left: -.5em;
33 | }
34 | .quote:after {
35 | content: "”";
36 | bottom: -.1em;
37 | margin-left: .1em;
38 | position: absolute;
39 | }
40 | .source {
41 | font-size: 2.5rem;
42 | letter-spacing: 0.05em;
43 | line-height: 1.1;
44 | text-align: right;
45 | margin-right: 4em;
46 | }
47 | .source:before {
48 | content: "—";
49 | }
50 | .citation {
51 | font-size: 2.5rem;
52 | font-style: italic;
53 | }
54 | .citation:before {
55 | content: ", ";
56 | font-style: normal;
57 | }
58 | .year:before {
59 | content: ", ";
60 | font-style: normal;
61 | }
62 |
63 | #loadQuote {
64 | font-size: 2.5rem;;
65 | position: fixed;
66 | width: 7em;
67 | display: inline-block;
68 | left: 50%;
69 | margin-left: -6em;
70 | bottom: 150px;
71 | border-radius: 4px;
72 | border: 2px solid #fff;
73 | color: #fff;
74 | background-color: rgba(255,255,255, 0);
75 | padding: 15px 0;
76 | transition: .5s ;
77 | }
78 | #loadQuote:hover {
79 | background-color: rgba(255,255,255,.25);
80 | }
81 | #loadQuote:focus {
82 | outline: none;
83 | }
84 |
85 | @media (max-width: 420px) {
86 | .quote {
87 | font-size: 2.5rem;
88 | }
89 | .quote:before, .quote:after {
90 | font-size: 3rem;
91 | }
92 | .source {
93 | font-size: 1rem;
94 | }
95 | }
96 |
--------------------------------------------------------------------------------
/Random_Quote_Generator/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
12 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/SignUpSignInModule/README.md:
--------------------------------------------------------------------------------
1 | This MiniProject is on a very basic login module that is found on most of the websites.
2 | To make it easy to understand the flow... heavy css is not used.
3 | Basic functionalities are like register form for new users and registered email validation registered user login etc...
4 |
--------------------------------------------------------------------------------
/SignUpSignInModule/Register.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | You can do anything but not everything
13 |David AllenMaking It All Work2009
14 |This is Home Page
11 |LogIn SuccessFul.....
12 | 13 | -------------------------------------------------------------------------------- /Simon Game Challenge/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |15 | Press A Key to Start or click 16 |
17 | 18 |
19 |
32 |
33 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
--------------------------------------------------------------------------------
/Simon Game Challenge/index.js:
--------------------------------------------------------------------------------
1 | var buttonColours = ["red", "blue", "green", "yellow"];
2 |
3 | var gamePattern = [];
4 | var userClickedPattern = [];
5 |
6 | var started = false;
7 | var level = 0;
8 |
9 | $(document).keydown(function() {
10 | if (!started) {
11 | started = true;
12 | $("footer").hide();
13 | $(".button").hide();
14 | nextSequence();
15 | }
16 | });
17 |
18 | $(".button").click(function(){
19 | if (!started) {
20 | started = true;
21 | $("footer").hide();
22 | $(".button").hide();
23 | nextSequence();
24 | }
25 | });
26 |
27 | function nextSequence() {
28 | userClickedPattern = [];
29 | $("#heading").text("Level " + ++level);
30 | var randomNumber = Math.floor(Math.random() * 4);
31 | var randomChosenColour = buttonColours[randomNumber];
32 | gamePattern.push(randomChosenColour);
33 |
34 | $("#" + randomChosenColour).fadeIn(100).fadeOut(100).fadeIn(100);
35 | playSound(randomChosenColour);
36 | }
37 |
38 | $(".btn").click(function() {
39 | var userChosenColour = $(this).attr("id");
40 | userClickedPattern.push(userChosenColour);
41 |
42 | playSound(userChosenColour);
43 | animatePress(userChosenColour);
44 |
45 | if(started) checkAnswer(userClickedPattern.length-1);
46 | });
47 |
48 | function checkAnswer(currentLevel) {
49 | if (gamePattern[currentLevel] === userClickedPattern[currentLevel]) {
50 | if (userClickedPattern.length === gamePattern.length){
51 | setTimeout(function () {
52 | nextSequence();
53 | }, 1000);
54 | }
55 | }
56 | else {
57 | playSound("wrong");
58 | $("body").addClass("game-over");
59 | $("#heading").html('Game Over, Press Any Key to Restart or click');
60 |
61 | setTimeout(function () {
62 | $("body").removeClass("game-over");
63 | }, 200);
64 |
65 | startOver();
66 | }
67 | }
68 |
69 | function animatePress(currentColor) {
70 | $("#" + currentColor).addClass("pressed");
71 | setTimeout(function () {
72 | $("#" + currentColor).removeClass("pressed");
73 | }, 100);
74 | }
75 |
76 | function playSound(name) {
77 | var audio = new Audio("sounds/" + name + ".mp3");
78 | audio.play();
79 | }
80 |
81 | function startOver() {
82 | level = 0;
83 | $(".button").show();
84 | gamePattern = [];
85 | started = false;
86 | }
--------------------------------------------------------------------------------
/Simon Game Challenge/sounds/blue.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/Simon Game Challenge/sounds/blue.mp3
--------------------------------------------------------------------------------
/Simon Game Challenge/sounds/green.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/Simon Game Challenge/sounds/green.mp3
--------------------------------------------------------------------------------
/Simon Game Challenge/sounds/red.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/Simon Game Challenge/sounds/red.mp3
--------------------------------------------------------------------------------
/Simon Game Challenge/sounds/wrong.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/Simon Game Challenge/sounds/wrong.mp3
--------------------------------------------------------------------------------
/Simon Game Challenge/sounds/yellow.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/Simon Game Challenge/sounds/yellow.mp3
--------------------------------------------------------------------------------
/Simon Game Challenge/styles.css:
--------------------------------------------------------------------------------
1 | html{
2 | min-height: 100vh;
3 |
4 | }
5 |
6 | body {
7 | min-height: 100vh;
8 | margin: 0;
9 | line-height:1.5;
10 | text-align: center;
11 | background-color: #011F3F;
12 | font-family: 'Press Start 2P', cursive;
13 | }
14 |
15 | #heading {
16 | font-size: 3rem;
17 | margin: 2% 5%;
18 | color: #FEF2BF;
19 | }
20 |
21 | .button{
22 | margin-top: 0;
23 | font-weight: 700;
24 | font-size: 1.5rem;
25 | display: inline-block;
26 | border: 2px solid black;
27 | padding: 1% 5%;
28 | background-color: rgba(46, 186, 241, 0.664);
29 | color: rgb(24, 24, 26);
30 | box-shadow: 0 0 2px 2px white;
31 | border-radius: 50px;
32 | cursor: pointer;
33 | }
34 |
35 | .button:hover{
36 | opacity: 0.8;
37 | background-color: rgba(84, 90, 87, 0.664);
38 | color: rgb(101, 126, 238);
39 | }
40 |
41 | .container{
42 | display: block;
43 | margin: 50px 0;
44 | }
45 |
46 | .btn {
47 | margin: 25px;
48 | display: inline-block;
49 | height: 200px;
50 | width: 200px;
51 | border: 10px solid black;
52 | border-radius: 20%;
53 | }
54 |
55 | #red { background-color: red;}
56 | #green { background-color: green;}
57 | #blue { background-color: blue;}
58 | #yellow { background-color: yellow;}
59 |
60 | .pressed {
61 | box-shadow: 0 0 20px white;
62 | background-color: grey;
63 | }
64 |
65 | .game-over {
66 | background-color: red;
67 | opacity: 0.8;
68 | }
69 |
70 | footer{
71 | font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
72 | background-color: black;
73 | padding: 10px 0;
74 | color:white;
75 | }
76 |
77 | footer .top{
78 | font-size: 1.5rem;
79 | text-align: center;
80 | margin: 20px 20px;
81 | color: #FEF2BF;
82 | }
83 |
84 | footer div{
85 | text-align: left;
86 | margin: 20px 20px;
87 | color: rgb(185, 148, 245);
88 | }
89 |
90 | footer ul{
91 | text-align: left;
92 | }
93 |
94 | ul li{
95 | list-style-type: '👉 ';
96 | }
97 |
98 | footer a{
99 | text-decoration: none;
100 | color:rgb(38, 230, 31);
101 | font-size: 2rem;
102 | }
103 |
104 | footer a:hover{
105 | text-decoration:underline;
106 | color:rgb(197, 236, 145);
107 | }
108 |
109 | /* -------------------------------------------------- */
110 |
111 | @media only screen and (max-width:565px) {
112 | .btn{
113 | margin: 10px;
114 | border-width: 5px;
115 | height: 100px;
116 | width: 100px;
117 | }
118 | #heading{ font-size: 2rem;}
119 | footer a{ font-size: 1.5rem;}
120 | footer .top{font-size: 1rem;}
121 | footer { font-size: 0.7rem;}
122 | .button{ font-size: 1rem;}
123 | }
124 |
125 | @media only screen and (max-width:300px) {
126 | .btn{
127 | margin: 5px;
128 | height: 50px;
129 | width: 50px;
130 | }
131 | #heading{ font-size: 1rem;}
132 | .container{margin: 30px 0;}
133 | footer a{ font-size: 0.7rem;}
134 | footer .top{font-size: 0.7rem;}
135 | footer { font-size: 0.5rem;}
136 | .button{ font-size: 0.7rem;}
137 | }
--------------------------------------------------------------------------------
/Sorting-Visualizer-main/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
20 |
25 |
21 |
22 |
23 |
24 |
26 |
31 |
27 |
28 |
29 |
30 |
12 |
13 |
14 |
40 |
41 |
42 |
43 |
44 |
45 |
--------------------------------------------------------------------------------
/Sorting-Visualizer-main/style.css:
--------------------------------------------------------------------------------
1 | *{
2 | padding: 0;
3 | margin: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 |
8 | .container{
9 | max-width: 100vw;
10 | height: 100vh;
11 | width: 95%;
12 | margin: 0 auto;
13 | display: flex;
14 | flex-direction: column;
15 | align-items: center;
16 | justify-content: space-between;
17 | padding: 20px 0px;
18 | }
19 |
20 | .bars_container{
21 | display: flex;
22 | flex-direction: row;
23 | }
24 |
25 | .bar{
26 | width: 10px;
27 | background-color: aqua;
28 | /* margin: 0 2px; */
29 | border-radius: 2px;
30 | }
31 |
32 | body{
33 | background-color: #2c3e50;
34 | }
35 |
36 | .buttons_container > button, select{
37 | width: 200px;
38 | height: 30px;
39 | background-color: #677685;
40 | border: none;
41 | border-radius: 5px;
42 | color: white;
43 | font-size: 14px;
44 | cursor: pointer;
45 | text-align: center;
46 | transition: 0.2s ease-in-out;
47 | }
48 |
49 | button:hover{
50 | background-color: #56697b;
51 | }
52 |
--------------------------------------------------------------------------------
/StopWatch/README.md:
--------------------------------------------------------------------------------
1 | # StopWatch
2 |
3 | ## To Clone this repo just use
4 | ```
5 | git clone
12 |
36 |
37 |
43 |
44 |
--------------------------------------------------------------------------------
/StopWatch/stopwatch.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Zen+Loop&display=swap');
2 | :root {
3 | --mainColor1: #3DBE29;
4 | --mainColor2: #EDC126;
5 | }
6 | * {
7 | margin: 0;
8 | padding: 0;
9 | box-sizing: border-box;
10 | }
11 | html {
12 | height: 100%;
13 | width: 100%;
14 | }
15 | body {
16 | font-family: 'Zen Loop', cursive;
17 | background-color: #CAD5E2;
18 | text-transform: uppercase;
19 | min-height: 100%;
20 | overflow: hidden;
21 | }
22 | .container {
23 | width: 60%;
24 | height: 100%;
25 | margin: 0 auto;
26 | }
27 | .watch {
28 | text-align: center;
29 | font-size: 5rem;
30 | font-weight: lighter;
31 | color: #fff;
32 | display: flex;
33 | justify-content: space-between;
34 | align-items: center;
35 | }
36 | .hourDiv,
37 | .minuteDiv,
38 | .secondDiv,
39 | .milliSecondDiv {
40 | width: 20%;
41 | border-bottom-left-radius: 10px;
42 | border-bottom-right-radius: 10px;
43 | }
44 | .hour,
45 | .minute,
46 | .second,
47 | .milliSecond {
48 | padding: 5px;
49 | background-color: var(--mainColor1);
50 | }
51 | .hourTitle,
52 | .minuteTitle,
53 | .secondTitle,
54 | .milliSecondTitle {
55 | background-color: var(--mainColor2);
56 | font-size: 3rem;
57 | padding: 5px;
58 | font-weight: bold;
59 | border-bottom-left-radius: 10px;
60 | border-bottom-right-radius: 10px;
61 | }
62 | .button {
63 | border: none;
64 | border-radius: 10px;
65 | font-size: 3rem;
66 | padding: 10px;
67 | width: 180px;
68 | font-weight: bold;
69 | font-family: 'Zen Loop', cursive;
70 | }
71 | .start {
72 | margin-right: 5%;
73 | color: var(--mainColor1);
74 | transition: 0.5s ease-in-out;
75 | }
76 | .start:hover {
77 | background-color: var(--mainColor2);
78 | color: #fff;
79 | }
80 | .pause {
81 | transition: 0.5s ease-in-out;
82 | }
83 | .pause:hover {
84 | background-color: #E03B8B;
85 | color: #fff;
86 | }
87 | .stop {
88 | margin-left: 5%;
89 | color: var(--mainColor2);
90 | transition: 0.5s ease-in-out;
91 | }
92 | .stop:hover {
93 | background-color: var(--mainColor1);
94 | color: #fff;
95 | }
96 | .buttons {
97 | margin-top: 2%;
98 | margin-bottom: 2%;
99 | display: flex;
100 | justify-content: center;
101 | align-items: center;
102 | }
103 | @media screen and (max-width: 768px) {
104 | .container {
105 | width: 100%;
106 | }
107 | .watch {
108 | font-size: 2rem;
109 | display: flex;
110 | justify-content: space-between;
111 | align-items: center;
112 | }
113 | .hourTitle,
114 | .minuteTitle,
115 | .secondTitle,
116 | .milliSecondTitle {
117 | font-size: 2rem;
118 | }
119 | .button {
120 | margin-top: 5%;
121 | margin-bottom: 5%;
122 | width: 50%;
123 | }
124 | .start, .stop {
125 | margin: 0;
126 | }
127 | .buttons {
128 | margin-top: 10%;
129 | display: flex;
130 | justify-content: center;
131 | align-items: center;
132 | flex-direction: column;
133 | }
134 | }
135 | @media screen and (max-width: 550px) {
136 | .watch {
137 | font-size: 2rem;
138 | }
139 | .hourTitle,
140 | .minuteTitle,
141 | .secondTitle,
142 | .milliSecondTitle {
143 | font-size: 1.5rem;
144 | }
145 | }
--------------------------------------------------------------------------------
/StopWatch/stopwatch.js:
--------------------------------------------------------------------------------
1 | // Timer Field
2 | let hourElement = document.querySelector(".hour");
3 | let minuteElement = document.querySelector(".minute");
4 | let secondElement = document.querySelector(".second");
5 | let millisecondElement = document.querySelector(".milliSecond");
6 |
7 | // Button Field
8 | let startButton = document.querySelector(".start");
9 | let pauseButton = document.querySelector(".pause");
10 | let stopButton = document.querySelector(".stop");
11 |
12 | // Counter Variable
13 | let hour = 00;
14 | let minute = 00;
15 | let second = 00;
16 | let millisecond = 00;
17 | let interval;
18 |
19 | window.onload = () => clearFields();
20 |
21 | startButton.onclick = function () {
22 | clearInterval(interval); // If Some Error Happen and Interval is Setup, It Will Clear That Interval
23 | interval = setInterval(startTimer, 10); //
24 | };
25 | pauseButton.onclick = function () {
26 | clearInterval(interval); // On Clicking Pause Buttom We Will Clear Interval
27 | };
28 | stopButton.onclick = function () {
29 | clearInterval(interval); // Clear Interval
30 | clearFields(); // Clear Timer Fields
31 | };
32 | function startTimer() {
33 | millisecond++;
34 | if (millisecond < 9) {
35 | millisecondElement.innerText = "0" + millisecond;
36 | }
37 | if (millisecond > 99) {
38 | second++;
39 | secondElement.innerText = "0" + second;
40 | millisecond = 0;
41 | millisecondElement.innerText = "0" + millisecond;
42 | }
43 | if (second > 60) {
44 | minute++;
45 | minuteElement.innerText = "0" + minute;
46 | second = 0;
47 | secondElement.innerText = "0" + second;
48 | }
49 |
50 | if (millisecond > 9) {
51 | millisecondElement.innerText = millisecond;
52 | }
53 | if (second > 9) {
54 | secondElement.innerText = second;
55 | }
56 | if (minute > 9) {
57 | minuteElement.innerText = minute;
58 | }
59 | if (hour > 9) {
60 | hourElement.innerText = hour;
61 | }
62 | }
63 |
64 | function clearFields() {
65 | hourElement.innerText = "00";
66 | minuteElement.innerText = "00";
67 | secondElement.innerText = "00";
68 | millisecondElement.innerText = "00";
69 | }
70 |
--------------------------------------------------------------------------------
/Tic-Tac-Toe/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
13 |
30 |
35 |
14 |
17 | 01
15 |Hour
16 |
18 |
21 | 30
19 |Min
20 |
22 |
25 | 01
23 |Sec
24 |
26 |
29 | 99
27 |Millis
28 |21 | Player X's turn 22 |
11 |
19 |
20 |
12 | 3
13 | 2
14 | 1
15 | 0
16 |
17 | Get Ready
18 |
21 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/animated-countdown/script.js:
--------------------------------------------------------------------------------
1 | const nums = document.querySelectorAll('.nums span')
2 | const counter = document.querySelector('.counter')
3 | const finalMessage = document.querySelector('.final')
4 | const replay = document.querySelector('#replay')
5 |
6 | runAnimation()
7 |
8 | function resetDOM() {
9 | counter.classList.remove('hide')
10 | finalMessage.classList.remove('show')
11 |
12 | nums.forEach((num) => {
13 | num.classList.value = ''
14 | })
15 |
16 | nums[0].classList.add('in')
17 | }
18 |
19 | function runAnimation() {
20 | nums.forEach((num, idx) => {
21 | const nextToLast = nums.length - 1
22 |
23 | num.addEventListener('animationend', (e) => {
24 | if (e.animationName === 'goIn' && idx !== nextToLast) {
25 | num.classList.remove('in')
26 | num.classList.add('out')
27 | } else if (e.animationName === 'goOut' && num.nextElementSibling) {
28 | num.nextElementSibling.classList.add('in')
29 | } else {
30 | counter.classList.add('hide')
31 | finalMessage.classList.add('show')
32 | }
33 | })
34 | })
35 | }
36 |
37 | replay.addEventListener('click', () => {
38 | resetDOM()
39 | runAnimation()
40 | })
41 |
--------------------------------------------------------------------------------
/animated-countdown/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
2 |
3 | * {
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | font-family: 'Roboto', sans-serif;
9 | margin: 0;
10 | height: 100vh;
11 | overflow: hidden;
12 | }
13 |
14 | h4 {
15 | font-size: 20px;
16 | margin: 5px;
17 | text-transform: uppercase;
18 | }
19 |
20 | .counter {
21 | position: fixed;
22 | top: 50%;
23 | left: 50%;
24 | transform: translate(-50%, -50%);
25 | text-align: center;
26 | }
27 |
28 | .counter.hide {
29 | transform: translate(-50%, -50%) scale(0);
30 | animation: hide 0.2s ease-out;
31 | }
32 |
33 | @keyframes hide {
34 | 0% {
35 | transform: translate(-50%, -50%) scale(1);
36 | }
37 |
38 | 100% {
39 | transform: translate(-50%, -50%) scale(0);
40 | }
41 | }
42 |
43 | .final {
44 | position: fixed;
45 | top: 50%;
46 | left: 50%;
47 | transform: translate(-50%, -50%) scale(0);
48 | text-align: center;
49 | }
50 |
51 | .final.show {
52 | transform: translate(-50%, -50%) scale(1);
53 | animation: show 0.2s ease-out;
54 | }
55 |
56 | @keyframes show {
57 | 0% {
58 | transform: translate(-50%, -50%) scale(0);
59 | }
60 |
61 | 30% {
62 | transform: translate(-50%, -50%) scale(1.4);
63 | }
64 |
65 | 100% {
66 | transform: translate(-50%, -50%) scale(1);
67 | }
68 | }
69 |
70 | .nums {
71 | color: #3498db;
72 | font-size: 50px;
73 | position: relative;
74 | overflow: hidden;
75 | width: 250px;
76 | height: 50px;
77 | }
78 |
79 | .nums span {
80 | position: absolute;
81 | top: 50%;
82 | left: 50%;
83 | transform: translate(-50%, -50%) rotate(120deg);
84 | transform-origin: bottom center;
85 | }
86 |
87 | .nums span.in {
88 | transform: translate(-50%, -50%) rotate(0deg);
89 | animation: goIn 0.5s ease-in-out;
90 | }
91 |
92 | .nums span.out {
93 | animation: goOut 0.5s ease-in-out;
94 | }
95 |
96 | @keyframes goIn {
97 | 0% {
98 | transform: translate(-50%, -50%) rotate(120deg);
99 | }
100 |
101 | 30% {
102 | transform: translate(-50%, -50%) rotate(-20deg);
103 | }
104 |
105 | 60% {
106 | transform: translate(-50%, -50%) rotate(10deg);
107 | }
108 |
109 | 100% {
110 | transform: translate(-50%, -50%) rotate(0deg);
111 | }
112 | }
113 |
114 | @keyframes goOut {
115 | 0% {
116 | transform: translate(-50%, -50%) rotate(0deg);
117 | }
118 |
119 | 60% {
120 | transform: translate(-50%, -50%) rotate(20deg);
121 | }
122 |
123 | 100% {
124 | transform: translate(-50%, -50%) rotate(-120deg);
125 | }
126 | }
127 |
128 | #replay{
129 | background-color: #3498db;
130 | border-radius: 3px;
131 | border: none;
132 | color: aliceblue;
133 | padding: 5px;
134 | text-align: center;
135 | display: inline-block;
136 | cursor: pointer;
137 | transition: all 0.3s;
138 | }
139 |
140 | #replay span{
141 | cursor: pointer;
142 | display: inline-block;
143 | position: relative;
144 | transition: 0.3s;
145 | }
146 |
147 | #replay span:after{
148 | content: '\00bb';
149 | position: absolute;
150 | opacity: 0;
151 | top: 0;
152 | right: -20px;
153 | transition: 0.5s;
154 | }
155 |
156 | #replay:hover span{
157 | padding-right: 25px;
158 | }
159 |
160 | #replay:hover span:after{
161 | opacity: 1;
162 | right: 0;
163 | }
164 |
--------------------------------------------------------------------------------
/blackJackgame/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: green;
3 | text-align: center;
4 | font-size: large;
5 | }
6 | h1 {
7 | color: yellow;
8 | }
9 | p {
10 | color: azure;
11 | font-size: large;
12 | }
13 | #btn1 {
14 | color: #016f32;
15 | width: 150px;
16 | background: goldenrod;
17 | margin: 2px;
18 | }
19 | #btn2 {
20 | color: #016f32;
21 | width: 150px;
22 | background: goldenrod;
23 | margin: 2px;
24 | }
25 | /* button:hover{
26 | border-color: blue;
27 | } */
28 |
--------------------------------------------------------------------------------
/blackJackgame/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | GO
22 | 25 |Blackjack
12 |Do you want to play?
13 |Cards:
14 |Sum:
15 |16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /blackJackgame/index.js: -------------------------------------------------------------------------------- 1 | let player = { 2 | name: 'Per', 3 | chip: 145, 4 | }; 5 | let cards = []; 6 | let sum = 0; 7 | let blackjack = false; 8 | let isAlive = false; 9 | let message = ''; 10 | let messageEl = document.getElementById('message-el'); 11 | let sumEl = document.getElementById('sum-el'); 12 | let cardsEl = document.getElementById('cards-el'); 13 | 14 | let playerEl = document.getElementById('player-el'); 15 | 16 | playerEl.textContent = player.name + ' : Rs.' + player.chip; 17 | 18 | function getrandomeCard() { 19 | let randomenum = Math.floor(Math.random() * 13) + 1; 20 | if (randomenum > 10) return 10; 21 | else if (randomenum === 1) return 11; 22 | return randomenum; 23 | } 24 | 25 | function startGame() { 26 | isAlive = true; 27 | let firstcard = getrandomeCard(); 28 | cards.push(firstcard); 29 | let secondcard = getrandomeCard(); 30 | cards.push(secondcard); 31 | sum = firstcard + secondcard; 32 | renderGame(); 33 | } 34 | function renderGame() { 35 | // cardsEl.textContent="Cards: "+cards[0]+" "+cards[1] 36 | cardsEl.textContent = 'Cards: '; 37 | for (let i = 0; i < cards.length; i++) { 38 | cardsEl.textContent += cards[i] + ' '; 39 | } 40 | sumEl.textContent = 'Sum: ' + sum; 41 | if (sum <= 20) { 42 | message = 'Do you want to draw a new card?'; 43 | } else if (sum == 21) { 44 | message = 'Wohho! you have got the Blackjack!'; 45 | blackjack = true; 46 | } else { 47 | message = "You're out of the game"; 48 | isAlive = false; 49 | } 50 | // console.log(message) 51 | messageEl.textContent = message; 52 | } 53 | 54 | function newcard() { 55 | if (isAlive == true && blackjack == false) { 56 | let ncard = getrandomeCard(); 57 | cards.push(ncard); 58 | sum += ncard; 59 | renderGame(); 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /dad-jokes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
11 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/dad-jokes/script.js:
--------------------------------------------------------------------------------
1 | const jokeEl = document.getElementById('joke')
2 | const jokeBtn = document.getElementById('jokeBtn')
3 |
4 | jokeBtn.addEventListener('click', generateJoke)
5 |
6 | generateJoke()
7 |
8 | // USING ASYNC/AWAIT
9 | async function generateJoke() {
10 | const config = {
11 | headers: {
12 | Accept: 'application/json',
13 | },
14 | }
15 |
16 | const res = await fetch('https://icanhazdadjoke.com', config)
17 |
18 | const data = await res.json()
19 |
20 | jokeEl.innerHTML = data.joke
21 | }
22 |
23 | // USING .then()
24 | // function generateJoke() {
25 | // const config = {
26 | // headers: {
27 | // Accept: 'application/json',
28 | // },
29 | // }
30 |
31 | // fetch('https://icanhazdadjoke.com', config)
32 | // .then((res) => res.json())
33 | // .then((data) => {
34 | // jokeEl.innerHTML = data.joke
35 | // })
36 | // }
37 |
--------------------------------------------------------------------------------
/dad-jokes/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
2 |
3 | * {
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background-color: #686de0;
9 | font-family: 'Roboto', sans-serif;
10 | display: flex;
11 | flex-direction: column;
12 | align-items: center;
13 | justify-content: center;
14 | height: 100vh;
15 | overflow: hidden;
16 | margin: 0;
17 | padding: 20px;
18 | }
19 |
20 | .container {
21 | background-color: #fff;
22 | border-radius: 10px;
23 | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1);
24 | padding: 50px 20px;
25 | text-align: center;
26 | max-width: 100%;
27 | width: 800px;
28 | }
29 |
30 | h3 {
31 | margin: 0;
32 | opacity: 0.5;
33 | letter-spacing: 2px;
34 | }
35 |
36 | .joke {
37 | font-size: 30px;
38 | letter-spacing: 1px;
39 | line-height: 40px;
40 | margin: 50px auto;
41 | max-width: 600px;
42 | }
43 |
44 | .btn {
45 | background-color: #9f68e0;
46 | color: #fff;
47 | border: 0;
48 | border-radius: 10px;
49 | box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1);
50 | padding: 14px 40px;
51 | font-size: 16px;
52 | cursor: pointer;
53 | }
54 |
55 | .btn:active {
56 | transform: scale(0.98);
57 | }
58 |
59 | .btn:focus {
60 | outline: 0;
61 | }
62 |
--------------------------------------------------------------------------------
/dropdown/README.md:
--------------------------------------------------------------------------------
1 | this is a pure js ,css amd html dropdown menu with animations.
2 | made as a template for websites to copy.
--------------------------------------------------------------------------------
/dropdown/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Don't Laugh Challenge
12 |// Joke goes here
13 |
14 |
19 |
86 |
87 |
88 |
89 |
90 |
--------------------------------------------------------------------------------
/food -api/script.js:
--------------------------------------------------------------------------------
1 | const searchBtn = document.getElementById("search-btn");
2 | const mealList = document.getElementById("meal");
3 | const mealDetailsContent = document.querySelector(".meal-details-content");
4 | const recipeCloseBtn = document.getElementById("recipe-close-btn");
5 |
6 | // event listeners
7 | searchBtn.addEventListener("click", getMealList);
8 | mealList.addEventListener("click", getMealRecipe);
9 | recipeCloseBtn.addEventListener("click", () => {
10 | mealDetailsContent.parentElement.classList.remove("showRecipe");
11 | });
12 |
13 | // get meal list that matches with the ingredients
14 | function getMealList() {
15 | let searchInputTxt = document.getElementById("search-input").value.trim();
16 | fetch(
17 | `https://www.themealdb.com/api/json/v1/1/filter.php?i=${searchInputTxt}`
18 | )
19 | .then((response) => response.json())
20 | .then((data) => {
21 | let html = "";
22 | if (data.meals) {
23 | data.meals.forEach((meal) => {
24 | html += `
25 |
20 |
85 |
21 |
39 |
40 | Find Meals For Your Ingredients
22 |23 | Real food doesn't have ingredients, real food is ingredients.26 | 27 |
24 | - Jamie Oliver 25 |
28 |
34 |
37 |
38 |
41 |
56 |
57 | Your Search Results:
42 |
43 |
44 |
53 |
54 |
55 |
58 |
59 |
66 |
67 |
68 |
84 |
69 |
82 |
83 |
26 |
34 | `;
35 | });
36 | mealList.classList.remove("notFound");
37 | } else {
38 | html = "Oops, there is no such meal with us!";
39 | mealList.classList.add("notFound");
40 | }
41 |
42 | mealList.innerHTML = html;
43 | });
44 | }
45 |
46 | // get recipe of the meal
47 | function getMealRecipe(e) {
48 | e.preventDefault();
49 | if (e.target.classList.contains("recipe-btn")) {
50 | let mealItem = e.target.parentElement.parentElement;
51 | fetch(
52 | `https://www.themealdb.com/api/json/v1/1/lookup.php?i=${mealItem.dataset.id}`
53 | )
54 | .then((response) => response.json())
55 | .then((data) => mealRecipeModal(data.meals));
56 | }
57 | }
58 |
59 | // create a modal
60 | function mealRecipeModal(meal) {
61 | console.log(meal);
62 | meal = meal[0];
63 | let html = `
64 |
27 | 
28 |
29 |
30 |
33 | ${meal.strMeal}
31 | Get Recipe 32 |${meal.strMeal}
65 |${meal.strCategory}
66 |
67 |
70 | Instructions:
68 |${meal.strInstructions}
69 |
71 |
72 |
73 |
74 | Watch Video
75 |
76 | `;
77 | mealDetailsContent.innerHTML = html;
78 | mealDetailsContent.parentElement.classList.add("showRecipe");
79 | }
80 |
--------------------------------------------------------------------------------
/food-api/food.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/food-api/food.jpg
--------------------------------------------------------------------------------
/food-api/index.html:
--------------------------------------------------------------------------------
1 | nes (67 sloc) 2.82 KB
2 |
3 |
4 |
5 |
6 |
7 |
8 |
19 |
86 |
87 |
88 |
89 |
90 |
--------------------------------------------------------------------------------
/food-api/script.js:
--------------------------------------------------------------------------------
1 | const searchBtn = document.getElementById("search-btn");
2 | const mealList = document.getElementById("meal");
3 | const mealDetailsContent = document.querySelector(".meal-details-content");
4 | const recipeCloseBtn = document.getElementById("recipe-close-btn");
5 |
6 | // event listeners
7 | searchBtn.addEventListener("click", getMealList);
8 | mealList.addEventListener("click", getMealRecipe);
9 | recipeCloseBtn.addEventListener("click", () => {
10 | mealDetailsContent.parentElement.classList.remove("showRecipe");
11 | });
12 |
13 | // get meal list that matches with the ingredients
14 | function getMealList() {
15 | let searchInputTxt = document.getElementById("search-input").value.trim();
16 | fetch(
17 | `https://www.themealdb.com/api/json/v1/1/filter.php?i=${searchInputTxt}`
18 | )
19 | .then((response) => response.json())
20 | .then((data) => {
21 | let html = "";
22 | if (data.meals) {
23 | data.meals.forEach((meal) => {
24 | html += `
25 |
20 |
85 |
21 |
39 |
40 | Find Meals For Your Ingredients
22 |23 | Real food doesn't have ingredients, real food is ingredients.26 | 27 |
24 | - Jamie Oliver 25 |
28 |
34 |
37 |
38 |
41 |
56 |
57 | Your Search Results:
42 |
43 |
44 |
53 |
54 |
55 |
58 |
59 |
66 |
67 |
68 |
84 |
69 |
82 |
83 |
26 |
34 | `;
35 | });
36 | mealList.classList.remove("notFound");
37 | } else {
38 | html = "Oops, there is no such meal with us!";
39 | mealList.classList.add("notFound");
40 | }
41 |
42 | mealList.innerHTML = html;
43 | });
44 | }
45 |
46 | // get recipe of the meal
47 | function getMealRecipe(e) {
48 | e.preventDefault();
49 | if (e.target.classList.contains("recipe-btn")) {
50 | let mealItem = e.target.parentElement.parentElement;
51 | fetch(
52 | `https://www.themealdb.com/api/json/v1/1/lookup.php?i=${mealItem.dataset.id}`
53 | )
54 | .then((response) => response.json())
55 | .then((data) => mealRecipeModal(data.meals));
56 | }
57 | }
58 |
59 | // create a modal
60 | function mealRecipeModal(meal) {
61 | console.log(meal);
62 | meal = meal[0];
63 | let html = `
64 |
27 |
28 |
29 |
30 |
33 | ${meal.strMeal}
31 | Get Recipe 32 |${meal.strMeal}
65 |${meal.strCategory}
66 |
67 |
70 | Instructions:
68 |${meal.strInstructions}
69 |
71 |
72 |
73 |
74 | Watch Video
75 |
76 | `;
77 | mealDetailsContent.innerHTML = html;
78 | mealDetailsContent.parentElement.classList.add("showRecipe");
79 | }
80 |
--------------------------------------------------------------------------------
/keyboard-master/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Get Ready...
13 |
14 |
76 | -
15 |
- ESC 16 |
- 1 17 |
- 2 18 |
- 3 19 |
- 4 20 |
- 5 21 |
- 6 22 |
- 7 23 |
- 8 24 |
- 9 25 |
- 0 26 |
- - 27 |
- + 28 |
- BACK 29 |
-
31 |
- TAB 32 |
- Q 33 |
- W 34 |
- E 35 |
- R 36 |
- T 37 |
- Y 38 |
- U 39 |
- I 40 |
- O 41 |
- P 42 |
- [ 43 |
- ] 44 |
- \ 45 |
-
47 |
- CAPS 48 |
- A 49 |
- S 50 |
- D 51 |
- F 52 |
- G 53 |
- H 54 |
- J 55 |
- K 56 |
- L 57 |
- : 58 |
- '' 59 |
- ENTER 60 |
-
62 |
- SHIFT 63 |
- Z 64 |
- X 65 |
- C 66 |
- V 67 |
- B 68 |
- N 69 |
- M 70 |
- , 71 |
- . 72 |
- ; 73 |
- SHIFT 74 |
Goo...
77 | 78 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /keyboard-master/script.js: -------------------------------------------------------------------------------- 1 | const keys = [..."ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"]; 2 | 3 | const timestamps = []; 4 | 5 | timestamps.unshift(getTimestamp()); 6 | 7 | function getRandomNumber(min, max) { 8 | min = Math.ceil(min); 9 | max = Math.floor(max); 10 | return Math.floor(Math.random() * (max - min + 1)) + min; 11 | } 12 | 13 | function getRandomKey() { 14 | return keys[getRandomNumber(0, keys.length-1)] 15 | } 16 | 17 | function targetRandomKey() { 18 | const key = document.getElementById(getRandomKey()); 19 | key.classList.add("selected"); 20 | let start = Date.now() 21 | } 22 | 23 | function getTimestamp() { 24 | return Math.floor(Date.now() / 1000) 25 | } 26 | 27 | document.addEventListener("keyup", event => { 28 | const keyPressed = String.fromCharCode(event.keyCode); 29 | const keyElement = document.getElementById(keyPressed); 30 | const highlightedKey = document.querySelector(".selected"); 31 | 32 | keyElement.classList.add("hit") 33 | keyElement.addEventListener('animationend', () => { 34 | keyElement.classList.remove("hit") 35 | }) 36 | 37 | if (keyPressed === highlightedKey.innerHTML) { 38 | timestamps.unshift(getTimestamp()); 39 | const elapsedTime = timestamps[0] - timestamps[1]; 40 | console.log(`Character per minute ${60/elapsedTime}`) 41 | highlightedKey.classList.remove("selected"); 42 | targetRandomKey(); 43 | } 44 | }) 45 | 46 | targetRandomKey(); 47 | -------------------------------------------------------------------------------- /lift-simulation/README.md: -------------------------------------------------------------------------------- 1 | 2 | # Lift Simulation 3 | 4 | A web app where you can play along wit lift mechanics 5 | 6 | ## Features 7 | 8 | - Have a page where you input the number of floors and lifts from the user. 9 | - An interactive UI is generated, where we have visual depictons of lifts and buttons on floors 10 | Upon clicking a particular button on the floor, a lift goes to that floor. 11 | 12 | - Data store that contains the state of the application data 13 | JS Engine that is the controller for which lift goes where 14 | - Dumb UI that responds to controller's commands 15 | 16 | - Lift having doors open in 2.5s, then closing in another 2.5s 17 | - Lift moving at 2s per floor 18 | - Lift stopping at every floor where it was called 19 | - Mobile friendly design 20 | - Maximum 15 floors and 4 lifts can be generated. 21 | 22 | ## Tech Stack 23 | 24 | Language : vanilla javascript, CSS3, HTML5. 25 | Version Control : Git and Github. 26 | 27 | 28 | ## UML Diagram 29 | 30 |Activity Diagram
31 | 32 |
33 |
34 | ## Setup
35 | Step 1 : If you have git installed you can just clone or download the zip folder.
36 |
37 | Step 2 : To clone locally use this command in the terminal.
38 |
39 | git clone
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/notes-app/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | `
24 |
25 | const editBtn = note.querySelector('.edit')
26 | const deleteBtn = note.querySelector('.delete')
27 | const main = note.querySelector('.main')
28 | const textArea = note.querySelector('textarea')
29 |
30 | textArea.value = text
31 | main.innerHTML = marked(text)
32 |
33 | deleteBtn.addEventListener('click', () => {
34 | note.remove()
35 |
36 | updateLS()
37 | })
38 |
39 | editBtn.addEventListener('click', () => {
40 | main.classList.toggle('hidden')
41 | textArea.classList.toggle('hidden')
42 | })
43 |
44 | textArea.addEventListener('input', (e) => {
45 | const { value } = e.target
46 |
47 | main.innerHTML = marked(value)
48 |
49 | updateLS()
50 | })
51 |
52 | document.body.appendChild(note)
53 | }
54 |
55 | function updateLS() {
56 | const notesText = document.querySelectorAll('textarea')
57 |
58 | const notes = []
59 |
60 | notesText.forEach(note => notes.push(note.value))
61 |
62 | localStorage.setItem('notes', JSON.stringify(notes))
63 | }
--------------------------------------------------------------------------------
/notes-app/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');
2 |
3 | * {
4 | box-sizing: border-box;
5 | outline: none;
6 | }
7 |
8 | body {
9 | background-color: #7bdaf3;
10 | font-family: 'Poppins', sans-serif;
11 | display: flex;
12 | flex-wrap: wrap;
13 | margin: 0;
14 | padding-top: 3rem;
15 | }
16 |
17 | .add {
18 | position: fixed;
19 | top: 1rem;
20 | right: 1rem;
21 | background-color: #9ec862;
22 | color: #fff;
23 | border: none;
24 | border-radius: 3px;
25 | padding: 0.5rem 1rem;
26 | cursor: pointer;
27 | }
28 |
29 | .add:active {
30 | transform: scale(0.98);
31 | }
32 |
33 | .note {
34 | background-color: #fff;
35 | box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);
36 | margin: 30px 20px;
37 | height: 400px;
38 | width: 400px;
39 | overflow-y: scroll;
40 | }
41 |
42 | .note .tools {
43 | background-color: #9ec862;
44 | display: flex;
45 | justify-content: flex-end;
46 | padding: 0.5rem;
47 | }
48 |
49 | .note .tools button {
50 | background-color: transparent;
51 | border: none;
52 | color: #fff;
53 | cursor: pointer;
54 | font-size: 1rem;
55 | margin-left: 0.5rem;
56 | }
57 |
58 | .note textarea {
59 | outline: none;
60 | font-family: inherit;
61 | font-size: 1.2rem;
62 | border: none;
63 | height: 400px;
64 | width: 100%;
65 | padding: 20px;
66 | }
67 |
68 | .main {
69 | padding: 20px;
70 | }
71 |
72 | .hidden {
73 | display: none;
74 | }
75 |
--------------------------------------------------------------------------------
/online education/images/pic-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/online education/images/pic-1.png
--------------------------------------------------------------------------------
/online education/images/pic-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/online education/images/pic-2.png
--------------------------------------------------------------------------------
/online education/images/pic-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/online education/images/pic-3.png
--------------------------------------------------------------------------------
/online education/images/pic-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/online education/images/pic-4.png
--------------------------------------------------------------------------------
/online education/images/pic-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/online education/images/pic-5.png
--------------------------------------------------------------------------------
/online education/images/pic-6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/online education/images/pic-6.png
--------------------------------------------------------------------------------
/online education/images/tutor-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/online education/images/tutor-1.png
--------------------------------------------------------------------------------
/online education/images/tutor-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/online education/images/tutor-2.png
--------------------------------------------------------------------------------
/online education/images/tutor-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/online education/images/tutor-3.png
--------------------------------------------------------------------------------
/online education/images/tutor-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/online education/images/tutor-4.png
--------------------------------------------------------------------------------
/online education/images/tutor-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/online education/images/tutor-5.png
--------------------------------------------------------------------------------
/online education/images/tutor-6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/online education/images/tutor-6.png
--------------------------------------------------------------------------------
/online education/js/script.js:
--------------------------------------------------------------------------------
1 | let menuBtn = document.querySelector('#menu-btn');
2 | let navbar = document.querySelector('.header .flex .navbar');
3 |
4 | menuBtn.onclick = () =>{
5 | menuBtn.classList.toggle('fa-times');
6 | navbar.classList.toggle('active');
7 | }
8 |
9 | window.onscroll = () =>{
10 | menuBtn.classList.remove('fa-times');
11 | navbar.classList.remove('active');
12 | }
13 |
14 | var swiper = new Swiper(".course-slider", {
15 | spaceBetween: 20,
16 | grabCursor:true,
17 | loop:true,
18 | pagination: {
19 | el: ".swiper-pagination",
20 | clickable: true,
21 | },
22 | breakpoints: {
23 | 540: {
24 | slidesPerView: 1,
25 | },
26 | 768: {
27 | slidesPerView: 2,
28 | },
29 | 1024: {
30 | slidesPerView: 3,
31 | },
32 | },
33 | });
34 |
35 | var swiper = new Swiper(".teachers-slider", {
36 | spaceBetween: 20,
37 | grabCursor:true,
38 | loop:true,
39 | pagination: {
40 | el: ".swiper-pagination",
41 | clickable: true,
42 | },
43 | breakpoints: {
44 | 540: {
45 | slidesPerView: 1,
46 | },
47 | 768: {
48 | slidesPerView: 2,
49 | },
50 | 1024: {
51 | slidesPerView: 3,
52 | },
53 | },
54 | });
55 |
56 | var swiper = new Swiper(".reviews-slider", {
57 | spaceBetween: 20,
58 | grabCursor:true,
59 | loop:true,
60 | pagination: {
61 | el: ".swiper-pagination",
62 | clickable: true,
63 | },
64 | breakpoints: {
65 | 540: {
66 | slidesPerView: 1,
67 | },
68 | 768: {
69 | slidesPerView: 2,
70 | },
71 | 1024: {
72 | slidesPerView: 3,
73 | },
74 | },
75 | });
--------------------------------------------------------------------------------
/password-generator/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
46 |
47 |
48 |
49 |
--------------------------------------------------------------------------------
/password-generator/script.js:
--------------------------------------------------------------------------------
1 | const resultEl = document.getElementById('result')
2 | const lengthEl = document.getElementById('length')
3 | const uppercaseEl = document.getElementById('uppercase')
4 | const lowercaseEl = document.getElementById('lowercase')
5 | const numbersEl = document.getElementById('numbers')
6 | const symbolsEl = document.getElementById('symbols')
7 | const generateEl = document.getElementById('generate')
8 | const clipboardEl = document.getElementById('clipboard')
9 |
10 | const randomFunc = {
11 | lower: getRandomLower,
12 | upper: getRandomUpper,
13 | number: getRandomNumber,
14 | symbol: getRandomSymbol
15 | }
16 |
17 | clipboardEl.addEventListener('click', () => {
18 | const password = resultEl.innerText;
19 | if (!password) {
20 | return;
21 | }
22 | navigator.clipboard.writeText(password);
23 | alert('Password copied to clipboard!')
24 | })
25 |
26 | generateEl.addEventListener('click', () => {
27 | const length = +lengthEl.value
28 | const hasLower = lowercaseEl.checked
29 | const hasUpper = uppercaseEl.checked
30 | const hasNumber = numbersEl.checked
31 | const hasSymbol = symbolsEl.checked
32 |
33 | resultEl.innerText = generatePassword(hasLower, hasUpper, hasNumber, hasSymbol, length)
34 | })
35 |
36 | function generatePassword(lower, upper, number, symbol, length) {
37 | let generatedPassword = ''
38 | const typesCount = lower + upper + number + symbol
39 | const typesArr = [{lower}, {upper}, {number}, {symbol}].filter(item => Object.values(item)[0])
40 |
41 | if(typesCount === 0) {
42 | return ''
43 | }
44 |
45 | for(let i = 0; i < length; i += typesCount) {
46 | typesArr.forEach(type => {
47 | const funcName = Object.keys(type)[0]
48 | generatedPassword += randomFunc[funcName]()
49 | })
50 | }
51 |
52 | const finalPassword = generatedPassword.slice(0, length)
53 |
54 | return finalPassword
55 | }
56 |
57 | function getRandomLower() {
58 | return String.fromCharCode(Math.floor(Math.random() * 26) + 97)
59 | }
60 |
61 | function getRandomUpper() {
62 | return String.fromCharCode(Math.floor(Math.random() * 26) + 65)
63 | }
64 |
65 | function getRandomNumber() {
66 | return String.fromCharCode(Math.floor(Math.random() * 10) + 48)
67 | }
68 |
69 | function getRandomSymbol() {
70 | const symbols = '!@#$%^&*(){}[]=<>/,.'
71 | return symbols[Math.floor(Math.random() * symbols.length)]
72 | }
73 |
--------------------------------------------------------------------------------
/password-generator/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
2 |
3 | * {
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background-color: #3b3b98;
9 | color: #fff;
10 | font-family: 'Muli', sans-serif;
11 | display: flex;
12 | flex-direction: column;
13 | align-items: center;
14 | justify-content: center;
15 | height: 100vh;
16 | overflow: hidden;
17 | padding: 10px;
18 | margin: 0;
19 | }
20 |
21 | h2 {
22 | margin: 10px 0 20px;
23 | text-align: center;
24 | }
25 |
26 | .container {
27 | background-color: #23235b;
28 | box-shadow: 0px 2px 10px rgba(255, 255, 255, 0.2);
29 | padding: 20px;
30 | width: 350px;
31 | max-width: 100%;
32 | }
33 |
34 | .result-container {
35 | background-color: rgba(0, 0, 0, 0.4);
36 | display: flex;
37 | justify-content: flex-start;
38 | align-items: center;
39 | position: relative;
40 | font-size: 18px;
41 | letter-spacing: 1px;
42 | padding: 12px 10px;
43 | height: 50px;
44 | width: 100%;
45 | }
46 |
47 | .result-container #result {
48 | word-wrap: break-word;
49 | max-width: calc(100% - 40px);
50 | overflow-y: scroll;
51 | height: 100%;
52 | }
53 |
54 | #result::-webkit-scrollbar {
55 | width: 1rem;
56 | }
57 |
58 | .result-container .btn {
59 | position: absolute;
60 | top: 5px;
61 | right: 5px;
62 | width: 40px;
63 | height: 40px;
64 | font-size: 20px;
65 | }
66 |
67 | .btn {
68 | border: none;
69 | background-color: #3b3b98;
70 | color: #fff;
71 | font-size: 16px;
72 | padding: 8px 12px;
73 | cursor: pointer;
74 | }
75 |
76 | .btn-large {
77 | display: block;
78 | width: 100%;
79 | }
80 |
81 | .setting {
82 | display: flex;
83 | justify-content: space-between;
84 | align-items: center;
85 | margin: 15px 0;
86 | }
87 |
--------------------------------------------------------------------------------
/password-strength-background/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
12 |
13 | Password Generator
13 |
14 |
15 |
18 |
19 |
20 |
41 |
42 |
45 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
18 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/password-strength-background/script.js:
--------------------------------------------------------------------------------
1 | const password = document.getElementById('password')
2 | const background = document.getElementById('background')
3 |
4 | password.addEventListener('input', (e) => {
5 | const input = e.target.value
6 | const length = input.length
7 | const blurValue = 20 - length * 2
8 | background.style.filter = `blur(${blurValue}px)`
9 | })
10 |
--------------------------------------------------------------------------------
/password-strength-background/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | body {
6 | display: flex;
7 | flex-direction: column;
8 | align-items: center;
9 | justify-content: center;
10 | height: 100vh;
11 | overflow: hidden;
12 | margin: 0;
13 | }
14 |
15 | .background {
16 | background: url('https://images.unsplash.com/photo-1556745757-8d76bdb6984b')
17 | no-repeat center center/cover;
18 | position: absolute;
19 | top: -20px;
20 | bottom: -20px;
21 | left: -20px;
22 | right: -20px;
23 | z-index: -1;
24 | filter: blur(20px);
25 | }
26 |
--------------------------------------------------------------------------------
/real-estate website/images/home-bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/real-estate website/images/home-bg.jpg
--------------------------------------------------------------------------------
/real-estate website/images/icon-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/real-estate website/images/icon-1.png
--------------------------------------------------------------------------------
/real-estate website/images/icon-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/real-estate website/images/icon-2.png
--------------------------------------------------------------------------------
/real-estate website/images/icon-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/real-estate website/images/icon-3.png
--------------------------------------------------------------------------------
/real-estate website/images/img-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/real-estate website/images/img-1.jpg
--------------------------------------------------------------------------------
/real-estate website/images/img-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/real-estate website/images/img-2.jpg
--------------------------------------------------------------------------------
/real-estate website/images/img-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/real-estate website/images/img-3.jpg
--------------------------------------------------------------------------------
/real-estate website/images/img-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/real-estate website/images/img-4.jpg
--------------------------------------------------------------------------------
/real-estate website/images/img-5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/real-estate website/images/img-5.jpg
--------------------------------------------------------------------------------
/real-estate website/images/img-6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/real-estate website/images/img-6.jpg
--------------------------------------------------------------------------------
/real-estate website/images/pic-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/real-estate website/images/pic-1.png
--------------------------------------------------------------------------------
/real-estate website/images/pic-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/real-estate website/images/pic-2.png
--------------------------------------------------------------------------------
/real-estate website/images/pic-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/real-estate website/images/pic-3.png
--------------------------------------------------------------------------------
/real-estate website/images/pic-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/real-estate website/images/pic-4.png
--------------------------------------------------------------------------------
/real-estate website/images/s-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/real-estate website/images/s-1.png
--------------------------------------------------------------------------------
/real-estate website/images/s-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/real-estate website/images/s-2.png
--------------------------------------------------------------------------------
/real-estate website/images/s-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/real-estate website/images/s-3.png
--------------------------------------------------------------------------------
/spotify_clone/ak.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/spotify_clone/ak.jpg
--------------------------------------------------------------------------------
/spotify_clone/bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/spotify_clone/bg.png
--------------------------------------------------------------------------------
/spotify_clone/covers/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/spotify_clone/covers/1.jpg
--------------------------------------------------------------------------------
/spotify_clone/covers/10.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/spotify_clone/covers/10.jpg
--------------------------------------------------------------------------------
/spotify_clone/covers/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/spotify_clone/covers/2.jpg
--------------------------------------------------------------------------------
/spotify_clone/covers/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/spotify_clone/covers/3.jpg
--------------------------------------------------------------------------------
/spotify_clone/covers/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/spotify_clone/covers/4.jpg
--------------------------------------------------------------------------------
/spotify_clone/covers/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/spotify_clone/covers/5.jpg
--------------------------------------------------------------------------------
/spotify_clone/covers/6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/spotify_clone/covers/6.jpg
--------------------------------------------------------------------------------
/spotify_clone/covers/7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/spotify_clone/covers/7.jpg
--------------------------------------------------------------------------------
/spotify_clone/covers/8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/spotify_clone/covers/8.jpg
--------------------------------------------------------------------------------
/spotify_clone/covers/9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/spotify_clone/covers/9.jpg
--------------------------------------------------------------------------------
/spotify_clone/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/spotify_clone/logo.png
--------------------------------------------------------------------------------
/spotify_clone/playing.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/spotify_clone/playing.gif
--------------------------------------------------------------------------------
/spotify_clone/songs/1.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/spotify_clone/songs/1.mp3
--------------------------------------------------------------------------------
/spotify_clone/songs/10.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/spotify_clone/songs/10.mp3
--------------------------------------------------------------------------------
/spotify_clone/songs/2.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/spotify_clone/songs/2.mp3
--------------------------------------------------------------------------------
/spotify_clone/songs/3.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/spotify_clone/songs/3.mp3
--------------------------------------------------------------------------------
/spotify_clone/songs/4.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/spotify_clone/songs/4.mp3
--------------------------------------------------------------------------------
/spotify_clone/songs/5.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/spotify_clone/songs/5.mp3
--------------------------------------------------------------------------------
/spotify_clone/songs/6.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/spotify_clone/songs/6.mp3
--------------------------------------------------------------------------------
/spotify_clone/songs/7.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/spotify_clone/songs/7.mp3
--------------------------------------------------------------------------------
/spotify_clone/songs/8.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/spotify_clone/songs/8.mp3
--------------------------------------------------------------------------------
/spotify_clone/songs/9.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamakhileshmishra/Mini_Projects_JavaScript/dd07fc8e0c23ac099696f68633cb79ff25323ae3/spotify_clone/songs/9.mp3
--------------------------------------------------------------------------------
/spotify_clone/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
2 | @import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');
3 | body{
4 | background-color: antiquewhite;
5 | }
6 |
7 | *{
8 | margin: 0;
9 | padding: 0;
10 | }
11 |
12 | nav{
13 | font-family: 'Ubuntu', sans-serif;
14 | }
15 |
16 | nav ul{
17 | display: flex;
18 | align-items: center;
19 | list-style-type: none;
20 | height: 65px;
21 | background-color: black;
22 | color: rgb(113, 210, 81);
23 | }
24 |
25 | nav ul li{
26 | padding: 0 12px;
27 | }
28 | .brand img{
29 | width: 44px;
30 | padding: 0 8px;
31 | }
32 |
33 | .brand {
34 | display: flex;
35 | align-items: center;
36 | font-weight: bolder;
37 | font-size: 1.3rem;
38 | }
39 |
40 | .container{
41 | min-height: 72vh;
42 | background-color: rgb(28, 173, 47);
43 | color: white;
44 | font-family: 'Varela Round', sans-serif;
45 | display: flex;
46 | margin: 23px auto;
47 | width: 70%;
48 | border-radius: 12px;
49 | padding: 34px;
50 | background-image: url('bg.png');
51 | }
52 |
53 | .bottom{
54 | position: sticky;
55 | bottom: 0;
56 | height: 130px;
57 | background-color: black;
58 | color: rgb(137, 208, 74);
59 | display: flex;
60 | justify-content: center;
61 | align-items: center;
62 | flex-direction: column;
63 | }
64 |
65 | .icons{
66 | margin-top: 14px;
67 | }
68 | .icons i{
69 | cursor: pointer;
70 | }
71 |
72 | #myProgressBar{
73 | width: 80vw;
74 | cursor: pointer;
75 | }
76 |
77 | .songItemContainer{
78 | margin-top: 74px;
79 | }
80 |
81 | .songItem{
82 | height: 50px;
83 | display: flex;
84 | background-color: white;
85 | color: black;
86 | margin: 12px 0;
87 | justify-content: space-between;
88 | align-items: center;
89 | border-radius: 34px;
90 | }
91 |
92 | .songItem img{
93 | width: 43px;
94 | margin: 0 23px;
95 | border-radius: 34px;
96 | }
97 |
98 | .timestamp{
99 | margin: 0 23px;
100 | }
101 |
102 | .timestamp i{
103 | cursor: pointer;
104 | }
105 |
106 | .songInfo{
107 | position: absolute;
108 | left: 10vw;
109 | font-family: 'Varela Round', sans-serif;
110 | color: rgb(93, 202, 81);
111 | }
112 |
113 | .songInfo img{
114 | opacity: 0;
115 | transition: opacity 0.4s ease-in;
116 | }
117 |
118 | @media only screen and (max-width: 1100px) {
119 | body {
120 | background-color: rgb(18, 164, 50);
121 | }
122 | }
--------------------------------------------------------------------------------
/to-do-list/README.md:
--------------------------------------------------------------------------------
1 | # This is a To-Do App
2 | A user may add to todo task list, view all the tasks they have to complete,if the task is completed then just click on that task after clicking it will show as completed and the completed task can be deleted by "Delete Completed Button".
3 |
4 | ## Tech Stack Used
5 | 1. HTML
6 | 2. CSS
7 | 3. JavaScript
8 |
9 | # To clone this project
10 | ```
11 | git clone Image Password Strength
19 |Change the password to see the effect
20 |
21 |
22 |
28 |
29 |
30 |
31 |
32 |
38 |
39 |
40 |
46 |