44 |
45 |
46 |
47 |
48 |
Write your message
49 |
50 |
56 |
57 |
58 |
59 |
60 |
61 |
--------------------------------------------------------------------------------
/css-card-with-button/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
CSS Card with Button
8 |
9 |
10 |
11 |
12 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/teams/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
Team
10 |
11 |
12 |
13 |
14 |
15 |
Moussa Tounkara
16 |
CEO & Founder
17 |
Some text that describes me lorem ipsum ipsum lorem.
18 |
example@example.com
19 |
Contact
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
Issa Ndiaye
29 |
Art Director
30 |
Some text that describes me lorem ipsum ipsum lorem.
31 |
example@example.com
32 |
Contact
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
Demba Camara
42 |
Designer
43 |
Some text that describes me lorem ipsum ipsum lorem.
44 |
example@example.com
45 |
Contact
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
--------------------------------------------------------------------------------
/Live-Weather/weather.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
Weather App
9 |
10 |
11 |
12 |
13 |
16 |
17 |
18 |
19 |
Weather API
20 |
21 |
22 |
23 |
24 |
25 |
27 |
28 |
29 |
30 |
Almora, IN
31 |
5 April 2022, (Tuesday)
32 |
33 |
34 |
35 |
34°C
36 |
32°C (min) / 34°C (max)
37 |
Clear
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
--------------------------------------------------------------------------------
/Scroll-to-top/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
31 |
32 |
33 |
34 |
Top
35 |
36 |
Scroll-To-Top Button
37 |
The "scroll to top" button that becomes visible
38 | when the user starts to scroll the page .
39 |
40 |
61 |
62 |
63 |
64 |
--------------------------------------------------------------------------------
/react-to-do-list-master/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
11 |
12 |
13 |
22 |
React App
23 |
24 |
25 |
26 | You need to enable JavaScript to run this app.
27 |
28 |
29 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/Dark-Mode-Toggle/ReadMe.md:
--------------------------------------------------------------------------------
1 | # Dark Mode Toggle using JS
2 |
3 | This project is base example snippet to create a dark mode toggle by using onClick button or by using a checkbox input.
4 |
5 | **Note:** No extra stylesheet or library is used. It is basic use of HTML, CSS and Javascript.
6 |
7 | ## Development Guide
8 |
9 | I will explain how to use **onClick Button** toggle for changing theme. Also don't forget to link CSS and Javascript file to your HTML.
10 |
11 | #### Base HTML
12 | - Create a basic HTML content as per your need.
13 | - Give an **id** to your respective container element or body tag (in case you have no container).
14 |
15 | #### Styling CSS
16 | - Create base `:root` themes for both dark and light with each different state colors as per your need.
17 |
18 | ---
19 | #### I defined background-color, text-color and button color in each theme.
20 |
21 | - Define two classes, one light and one dark. We will toggle these classes at container.
22 | - Use these classes in css hirarchy to change color of your content as per need.
23 | Example:
24 | ```
25 | .light .content button {
26 | background-color: var(--light-btn-color);
27 | color: var(--light-text-color);
28 | }
29 | ```
30 |
31 | #### Creatung Functions
32 | - Create the function and referrence the container at the top of file.
33 | - Inside the function, use conditions like if container `contains` this class then remove that and add another.
34 | - Do check about classlist functions like add, remove and toggle in javascript for more info.
35 | - Add the function in your HTML under attribute onClick.
36 | ```
37 |
Toggle Mode
38 | ```
39 |
40 | ## Screenshots
41 |
42 | #### Light Mode
43 | 
44 |
45 | #### Dark Mode
46 | 
47 |
--------------------------------------------------------------------------------
/react-to-do-list-master/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | animation: App-logo-spin infinite 20s linear;
7 | height: 80px;
8 | }
9 |
10 | .App-header {
11 | background-color: #222;
12 | height: 150px;
13 | padding: 20px;
14 | color: white;
15 | }
16 |
17 | .App-title {
18 | font-size: 1.5em;
19 | }
20 |
21 | .App-intro {
22 | font-size: large;
23 | }
24 |
25 | @keyframes App-logo-spin {
26 | from { transform: rotate(0deg); }
27 | to { transform: rotate(360deg); }
28 | }
29 |
30 | .app-separator {
31 | position: static;
32 | height: 228px;
33 | }
34 |
35 | .enable-remove-mode {
36 | position: fixed;
37 | right: 25px;
38 | bottom: 25px;
39 | }
40 | .remove-mode {
41 | padding-top: 10px;
42 | }
43 |
44 | .swipeable-views {
45 | padding: 10px;
46 | }
47 |
48 | /* task transition animations */
49 |
50 | .task-animation-enter {
51 | opacity: 0.01;
52 | height: 0;
53 | }
54 |
55 | .task-animation-enter.task-animation-enter-active {
56 | opacity: 1;
57 | height: 56px;
58 | transition: 500ms;
59 | }
60 |
61 | .task-animation-leave {
62 | opacity: 1;
63 | height: 56px;
64 | }
65 |
66 | .task-animation-leave.task-animation-leave-active {
67 | opacity: 0.01;
68 | height: 0;
69 | transition: 300ms;
70 | }
71 |
72 | /* remove mode transition animations */
73 |
74 | .remove-mode-animation-enter {
75 | opacity: 0.01;
76 | height: 0;
77 | }
78 |
79 | .remove-mode-animation-enter.remove-mode-animation-enter-active {
80 | opacity: 1;
81 | height: 36px;
82 | transition: 300ms;
83 | }
84 |
85 | .remove-mode-animation-leave {
86 | opacity: 1;
87 | height: 36px;
88 | }
89 |
90 | .remove-mode-animation-leave.remove-mode-animation-leave-active {
91 | opacity: 0.01;
92 | height: 0;
93 | transition: 300ms;
94 | }
--------------------------------------------------------------------------------
/FAQ-website/style.css:
--------------------------------------------------------------------------------
1 | body{
2 | margin: 0;
3 | padding: 0;
4 | display: flex;
5 | flex-direction: column;
6 | font-family:Verdana, Tahoma, sans-serif;
7 | background-image: url("./bg.jpg");
8 | background-repeat: no-repeat;
9 | background-size: cover;
10 | }
11 | .title{
12 | display: flex;
13 | margin-top: 5%;
14 | color: #3ce165;
15 | align-items: center;
16 | justify-content: center;
17 | }
18 | .section-center{
19 | display: flex;
20 | flex-direction: column;
21 | align-items: center;
22 | }
23 | .question{
24 | display:flex;
25 | width:600px;
26 | padding-left: 10px;
27 | padding-right: 10px;
28 | flex-direction: column;
29 | background-color: #fff;
30 | margin: 1%;
31 | border: 1px solid black;
32 | border-radius: 10px;
33 | justify-content: center;
34 | box-shadow: 5px 5px 10px rgb(0,0,0,0.5 );
35 |
36 | }
37 | .question-title{
38 | display: flex;
39 | flex-direction: row;
40 | font-size: 15px;
41 | font-weight: bold;
42 | color: #000;
43 | justify-content:space-between;
44 | }
45 | .question-btn{
46 | display: block;
47 | position: relative;
48 | background-color: transparent;
49 | border: none;
50 | font-size: 20px;
51 | color: #0090db;
52 | cursor: pointer;
53 | }
54 | .question-text{
55 | border-top: 1px solid black;
56 | display: none;
57 | }
58 | .show-text .question-text{
59 | display: block;
60 | }
61 | .close{
62 | display: none;
63 | }
64 | .show-text .open{
65 | display: none;
66 | }
67 | .show-text .close{
68 | display: inline;
69 | }
70 | footer{
71 | display: flex;
72 | width: 100%;
73 | height: 10%;
74 | align-content: center;
75 | justify-content: center;
76 | margin-top: 11%;
77 | }
78 | h3{
79 | color: #fff;
80 | }
81 | a{
82 | color: #3ce165;
83 | background-color: transparent;
84 | }
--------------------------------------------------------------------------------
/react-table-search/frontend/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 |
React App
28 |
29 |
30 |
You need to enable JavaScript to run this app.
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/Calculator/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
Calculator
11 |
12 |
13 |
14 |
15 |
16 |
17 |
Calculator
18 |
19 |
20 |
24 |
AC
25 |
DEL
26 |
/
27 |
7
28 |
8
29 |
9
30 |
*
31 |
4
32 |
5
33 |
6
34 |
+
35 |
1
36 |
2
37 |
3
38 |
-
39 |
.
40 |
0
41 |
=
42 |
43 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/Login Form/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
LogIn Form
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
18 |
19 |
LOGIN TO YOUR ACCOUNT
20 |
21 |
23 |
24 |
34 |
35 |
36 |
37 |
38 |
Forgotten
39 |
40 |
42 |
43 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
--------------------------------------------------------------------------------
/Sign Up Page/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
55 |
56 |
78 |
79 |
80 |
--------------------------------------------------------------------------------
/CSS-Button-Animations/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding:0;
3 | margin: 0;
4 | }
5 | body {
6 | text-align: center;
7 | font-family: "Roboto";
8 | color: #000;
9 | letter-spacing:1px;
10 | background: #314755;
11 | background: linear-gradient(to right, #26a0da, #314755);
12 |
13 | }
14 | .wrapper{
15 | position: fixed;
16 | height: 60%;
17 | top: 50%;
18 | left: 50%;
19 | display: flex;
20 | flex-direction: column;
21 | justify-content: space-evenly;
22 | transform: translate(-50%, -50%);
23 | }
24 | h1{
25 | color: #ffd000;
26 | position: fixed;
27 | top: 10%;
28 | left: 50%;
29 | transform: translate(-50%, -50%);
30 | }
31 | .btn {
32 | text-align: center;
33 | display: inline-block;
34 | padding: 15px 40px;
35 | border: 2px solid #293241;
36 | border-radius: 10px;
37 | cursor: pointer;
38 | letter-spacing: 2px;
39 | position:relative;
40 | overflow:hidden;
41 | margin: 0 20px;
42 | background-color: #54d173;
43 | }
44 |
45 |
46 | /* button 1 */
47 | .btn-1:before {
48 | content: "";
49 | position: absolute;
50 | height: 150px;
51 | width: 50px;
52 | background : #293241;
53 | left: -55px;
54 | top: -40px;
55 | transform: rotate(37deg);
56 | transition: all .3s;
57 | opacity: 0.3;
58 | }
59 |
60 | .btn-1:hover:before {
61 | left:95%;
62 | }
63 |
64 | /* button 2 */
65 |
66 | .btn-2:before {
67 | content: "";
68 | position: absolute;
69 | height: 100%;
70 | width: 0;
71 | background : #293241;
72 | left: 100%;
73 | bottom: 0;
74 | transition: all .3s;
75 | opacity: 0.5;
76 | }
77 |
78 | .btn-2:hover:before {
79 | width: 100%;
80 | left:0;
81 | }
82 | /* button 3 */
83 | .btn-3:before {
84 | content: "";
85 | position: absolute;
86 | height: 0;
87 | width: 100%;
88 | background : #293241;
89 | left: 0;
90 | top: 0;
91 | transition: all .3s;
92 | opacity: 0.3;
93 | }
94 |
95 | .btn-3:hover:before {
96 | height: 100%;
97 | }
--------------------------------------------------------------------------------
/calculator.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
Simple Calculator using HTML, CSS and JavaScript
7 |
8 |
9 |
10 |
11 |
12 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
--------------------------------------------------------------------------------
/CSS button with ring indicator/style.css:
--------------------------------------------------------------------------------
1 | html, body {
2 | height: 100%;
3 | }
4 |
5 | .wrap {
6 | height: 100%;
7 | display: flex;
8 | align-items: center;
9 | justify-content: center;
10 | }
11 |
12 | .button {
13 | min-width: 300px;
14 | min-height: 60px;
15 | font-family: 'Nunito', sans-serif;
16 | font-size: 22px;
17 | text-transform: uppercase;
18 | letter-spacing: 1.3px;
19 | font-weight: 700;
20 | color: #313133;
21 | background: #4FD1C5;
22 | background: linear-gradient(90deg, rgba(129,230,217,1) 0%, rgba(79,209,197,1) 100%);
23 | border: none;
24 | border-radius: 1000px;
25 | box-shadow: 12px 12px 24px rgba(79,209,197,.64);
26 | transition: all 0.3s ease-in-out 0s;
27 | cursor: pointer;
28 | outline: none;
29 | position: relative;
30 | padding: 10px;
31 | }
32 |
33 | button::before {
34 | content: '';
35 | border-radius: 1000px;
36 | min-width: calc(300px + 12px);
37 | min-height: calc(60px + 12px);
38 | border: 6px solid #00ff40;
39 | box-shadow: 0 0 60px rgba(102, 255, 0, 0.64);
40 | position: absolute;
41 | top: 50%;
42 | left: 50%;
43 | transform: translate(-50%, -50%);
44 | opacity: 0;
45 | transition: all .3s ease-in-out 0s;
46 | }
47 |
48 | .button:hover, .button:focus {
49 | color: #313133;
50 | transform: translateY(-6px);
51 | }
52 |
53 | button:hover::before, button:focus::before {
54 | opacity: 1;
55 | }
56 |
57 | button::after {
58 | content: '';
59 | width: 30px; height: 30px;
60 | border-radius: 100%;
61 | border: 6px solid #00ff37;
62 | position: absolute;
63 | z-index: -1;
64 | top: 50%;
65 | left: 50%;
66 | transform: translate(-50%, -50%);
67 | animation: ring 1.5s infinite;
68 | }
69 |
70 | button:hover::after, button:focus::after {
71 | animation: none;
72 | display: none;
73 | }
74 |
75 | @keyframes ring {
76 | 0% {
77 | width: 30px;
78 | height: 30px;
79 | opacity: 1;
80 | }
81 | 100% {
82 | width: 300px;
83 | height: 300px;
84 | opacity: 0;
85 | }
86 | }
--------------------------------------------------------------------------------
/Games_ecommerce_website/js/billingformvalidation.js:
--------------------------------------------------------------------------------
1 | function validation()
2 | {
3 | var name = document.getElementById('name').value;
4 | var email = document.getElementById('email').value;
5 | var mobile = document.getElementById('mobile').value;
6 | var add1 = document.getElementById('add1').value;
7 | var add2 = document.getElementById('add2').value;
8 | var text = document.getElementById('text').value;
9 |
10 | var namecheck = /^[a-zA-Z]{2,30}$/;
11 | var emailcheck = /^[a-zA-Z0-9]{3,}[@]{1}[a-z]{3,}[.]{1}[a-zA-Z]$/;
12 | var mobilecheck = /^[0-9]{10}$/;
13 | var add1check = /^[a-zA-Z0-9]{2,30}$/;
14 | var add2check = /^[a-zA-Z0-9]{2,30}$/;
15 | var textcheck = /^[a-zA-Z0-9!@#$%^&*_+-]{2,30}$/;
16 |
17 |
18 |
19 | if(namecheck.test(name))
20 | {
21 | document.getElementById('nameerror').innerHTML = "";
22 | }
23 | else
24 | {
25 | document.getElementById('nameerror').innerHTML = "Invalid name";
26 | return false;
27 | }
28 |
29 |
30 | if(emailcheck.test(email))
31 | {
32 | document.getElementById('emailerror').innerHTML = "";
33 | }
34 | else
35 | {
36 | document.getElementById('emailerror').innerHTML = "Invalid email";
37 | return false;
38 | }
39 |
40 |
41 | if(mobilecheck.test(mobile))
42 | {
43 | document.getElementById('mobileerror').innerHTML = "";
44 | }
45 | else
46 | {
47 | document.getElementById('mobileerror').innerHTML = "Invalid Number";
48 | return false;
49 | }
50 |
51 |
52 | if(add1check.test(add1))
53 | {
54 | document.getElementById('add1error').innerHTML = "";
55 | }
56 | else
57 | {
58 | document.getElementById('add1error').innerHTML = "Invalid Address";
59 | return false;
60 | }
61 |
62 |
63 | if(add2check.test(add2))
64 | {
65 | document.getElementById('add2error').innerHTML = "";
66 | }
67 | else
68 | {
69 | document.getElementById('add2error').innerHTML = "Invalid Address";
70 | return false;
71 | }
72 |
73 |
74 | if(textcheck.test(text))
75 | {
76 | document.getElementById('texterror').innerHTML = "";
77 | }
78 | else
79 | {
80 | document.getElementById('texterror').innerHTML = "Invalid text";
81 | return false;
82 | }
83 |
84 |
85 |
86 |
87 |
88 | }
89 |
--------------------------------------------------------------------------------
/react-to-do-list-master/src/ConfirmDialog.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import Dialog from 'material-ui/Dialog';
4 | import FlatButton from 'material-ui/FlatButton';
5 | import './App.css';
6 |
7 | /**
8 | * This object is used for type checking the props of the component.
9 | */
10 | const propTypes = {
11 | title: PropTypes.string.isRequired,
12 | message: PropTypes.string.isRequired,
13 | open: PropTypes.bool.isRequired,
14 | onCancel: PropTypes.func.isRequired,
15 | onConfirm: PropTypes.func.isRequired,
16 | };
17 |
18 | /**
19 | * This callback type is called `cancelCallback` and is displayed as a global symbol.
20 | *
21 | * @callback cancelCallback
22 | */
23 |
24 | /**
25 | * This callback type is called `confirmCallback` and is displayed as a global symbol.
26 | *
27 | * @callback confirmCallback
28 | */
29 |
30 | /**
31 | * @description Represents a material UI based Confirm Dialog.
32 | * @constructor
33 | * @param {Object} props - The props that were defined by the caller of this component.
34 | * @param {string} props.title - The message to be displayed by the dialog.
35 | * @param {boolean} props.open - The visibility of the dialog.
36 | * @param {cancelCallback} props.onCancel - The callback to execute when the user hits the cancel button.
37 | * @param {confirmCallback} props.onConfirm - The callback to execute when the user hits the confirm button.
38 | */
39 | function ConfirmDialog(props) {
40 |
41 | // Confirm Dialog buttons
42 | const dialogActions = [
43 |
,
48 |
,
55 | ];
56 |
57 | return (
58 |
59 |
65 | {props.message}
66 |
67 |
68 | );
69 | }
70 |
71 | // Type checking the props of the component
72 | ConfirmDialog.propTypes = propTypes;
73 |
74 | export default ConfirmDialog;
--------------------------------------------------------------------------------
/Coming Soon Page/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
45 |
46 |
47 |
48 |
51 |
52 |
SITE GOING LIVE IN
53 |
54 |
55 |
56 |
59 |
60 |
61 |
91 |
92 |
93 |
94 |
--------------------------------------------------------------------------------
/todo-site/script.js:
--------------------------------------------------------------------------------
1 | const inputBox = document.querySelector(".inputField input");
2 | const addBtn = document.querySelector(".inputField button");
3 | const todoList = document.querySelector(".todoList");
4 | const deleteAllBtn = document.querySelector(".footer button");
5 |
6 | inputBox.onkeyup = ()=>{
7 | let userEnteredValue = inputBox.value;
8 | if(userEnteredValue.trim() != 0){
9 | addBtn.classList.add("active");
10 | }else{
11 | addBtn.classList.remove("active");
12 | }
13 | }
14 |
15 | showTasks();
16 | addBtn.onclick = ()=>{
17 | let userEnteredValue = inputBox.value;
18 | let getLocalStorageData = localStorage.getItem("New Todo");
19 | if(getLocalStorageData == null){
20 | listArray = [];
21 | }else{
22 | listArray = JSON.parse(getLocalStorageData);
23 | }
24 | listArray.push(userEnteredValue);
25 | localStorage.setItem("New Todo", JSON.stringify(listArray));
26 | showTasks();
27 | addBtn.classList.remove("active");
28 | }
29 |
30 | function showTasks(){
31 | let getLocalStorageData = localStorage.getItem("New Todo");
32 | if(getLocalStorageData == null){
33 | listArray = [];
34 | }else{
35 | listArray = JSON.parse(getLocalStorageData);
36 | }
37 | const pendingTasksNumb = document.querySelector(".pendingTasks");
38 | pendingTasksNumb.textContent = listArray.length;
39 | if(listArray.length > 0){
40 | deleteAllBtn.classList.add("active");
41 | }else{
42 | deleteAllBtn.classList.remove("active");
43 | }
44 | let newLiTag = "";
45 | listArray.forEach((element, index) => {
46 | newLiTag += `
${element} `;
47 | });
48 | todoList.innerHTML = newLiTag;
49 | inputBox.value = "";
50 | }
51 | function deleteTask(index){
52 | let getLocalStorageData = localStorage.getItem("New Todo");
53 | listArray = JSON.parse(getLocalStorageData);
54 | listArray.splice(index, 1);
55 | localStorage.setItem("New Todo", JSON.stringify(listArray));
56 | showTasks();
57 | }
58 |
59 | deleteAllBtn.onclick = ()=>{
60 | let getLocalStorageData = localStorage.getItem("New Todo");
61 | if(getLocalStorageData == null){
62 | listArray = [];
63 | }else{
64 | listArray = JSON.parse(getLocalStorageData);
65 | listArray = [];
66 | }
67 | localStorage.setItem("New Todo", JSON.stringify(listArray));
68 | showTasks();
69 | }
70 |
--------------------------------------------------------------------------------
/react-to-do-list-master/src/MobileTearSheet.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | /**
5 | * This object is used for type checking the props of the component.
6 | */
7 | const propTypes = {
8 | children: PropTypes.object.isRequired,
9 | };
10 |
11 | /**
12 | * Represents a component that adds a zigzag-bottomed outline to a material-ui list component.
13 | * @param {Object} props - The props that were defined by the caller of this component.
14 | * @param {Object} props.children - Children component.
15 | * @returns {XML}
16 | * @constructor
17 | */
18 | const MobileTearSheet = (props) => {
19 |
20 | const height = "100%";
21 | const styles = {
22 | root: {
23 | margin: '0 auto',
24 | maxWidth: 500,
25 | width: '100%',
26 | },
27 | container: {
28 | border: 'solid 1px #d9d9d9',
29 | borderBottom: 'none',
30 | height: height,
31 | overflow: 'hidden',
32 | },
33 | bottomTear: {
34 | display: 'block',
35 | position: 'relative',
36 | marginTop: -10,
37 | maxWidth: 500,
38 | },
39 | };
40 |
41 | return (
42 |
43 |
44 | {props.children}
45 |
46 |
63 |
64 | );
65 | };
66 |
67 | // Type checking the props of the component
68 | MobileTearSheet.propTypes = propTypes;
69 |
70 | export default MobileTearSheet;
--------------------------------------------------------------------------------
/e-commerce website/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
Lifestyle Store
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
19 |
20 |
21 |
22 |
23 |
24 |
We sell lifestyle
25 |
“Flat 40% OFF on premium brands
26 |
Shop Now
27 |
28 |
30 |
31 |
32 |
41 |
50 |
59 |
64 |
65 |
--------------------------------------------------------------------------------
/react-table-search/frontend/src/logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/react-table-search/frontend/src/Search.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import Title from './Title';
3 | import { Box, TextField, TableRow, TableCell, Table, TableBody } from '@mui/material';
4 |
5 | function createData(lang_id, language) {
6 | return { lang_id, language };
7 | }
8 |
9 | const tableData = [
10 | {
11 | lang_id: "1",
12 | language: "JAVA"
13 | }
14 | ,
15 | {
16 | lang_id: "2",
17 | language: "PYTHON"
18 | }
19 | ,
20 | {
21 | lang_id: "3",
22 | language: "REACT JS"
23 | }
24 | ,
25 | {
26 | lang_id: "4",
27 | language: "ANGULAR JS"
28 | }
29 | ,
30 | {
31 | lang_id: "5",
32 | language: "PHP"
33 | },
34 | {
35 | lang_id: "6",
36 | language: "VUE JS"
37 | }
38 | ,
39 | {
40 | lang_id: "7",
41 | language: "KOTLIN"
42 | }
43 | ,
44 | {
45 | lang_id: "8",
46 | language: "C#"
47 | }
48 | ]
49 |
50 | const Languages = () => {
51 | const [search, setSearch] = React.useState('');
52 |
53 | const style = {
54 | position: 'absolute',
55 | top: '50%',
56 | left: '50%',
57 | transform: 'translate(-50%, -50%)',
58 | width: 500,
59 | height: 400,
60 | bgcolor: 'background.paper',
61 | boxShadow: 24,
62 | p: 4,
63 | borderRadius: 3
64 | };
65 |
66 | const rows = [];
67 |
68 | tableData.filter((language) =>
69 | language.language?.includes(search)
70 | ).map((result) => {
71 | rows.push(createData(result.lang_id, result.language))
72 | })
73 |
74 | return (
75 |
76 |
77 | Languages
78 | setSearch(e.target.value.toLocaleUpperCase())} />
79 |
80 |
81 |
82 | {rows.map((row, index) => (
83 |
84 | {(row.language)}
85 |
86 | ))}
87 |
88 |
89 |
90 |
91 |
92 | );
93 | }
94 |
95 | export default Languages;
--------------------------------------------------------------------------------
/Calculator/style.css:
--------------------------------------------------------------------------------
1 | *{
2 | margin: 0;
3 | padding: 0;
4 | }
5 | .radial-gradient {
6 | position:absolute;
7 | z-index: -3;
8 | top:0px;
9 | left:0px;
10 | height:100%;
11 | width:100%;
12 | background: #9b59b6;
13 | background:
14 | radial-gradient(
15 | at center, #3498db, #9b59b6
16 | );
17 | }
18 |
19 | .animate-charcter
20 | {
21 | text-transform: uppercase;
22 | background-image: linear-gradient(
23 | -225deg,
24 | #12cffa 0%,
25 | #44107a 29%,
26 | #ff1361 67%,
27 | #fff800 100%
28 | );
29 | background-size: auto auto;
30 | background-clip: border-box;
31 | background-size: 200% auto;
32 | color: #fff;
33 | background-clip: text;
34 | -webkit-text-fill-color: transparent;
35 | -webkit-background-clip: text;
36 | -webkit-text-fill-color: transparent;
37 | animation: textclip 2s linear infinite;
38 | display: inline-block;
39 | font-size: 5rem;
40 | }
41 |
42 | @keyframes textclip {
43 | to {
44 | background-position: 200% center;
45 | }
46 | }
47 | @media(max-width:700px)
48 | {
49 | .animate-charcter{
50 | font-size: 3rem;
51 | }
52 | }
53 |
54 | .box1{
55 | padding-top: 4rem;
56 | display: grid;
57 | justify-content: center;
58 | align-content: center;
59 | min-height: 80vh;
60 | grid-template-columns: repeat(4, 5rem);
61 | grid-template-rows: minmax(6rem, auto) repeat(5, 5rem);
62 | border-radius: 4rem;
63 | }
64 |
65 | .box1 > button{
66 | cursor: pointer;
67 | font-size: 2rem;
68 | border: 1px solid white;
69 | outline: none;
70 | background-color: rgba(255, 255, 255, 0.75);
71 | }
72 |
73 | .box1 > button:hover{
74 | background-color: rgba(6, 215, 243, 0.9);
75 | }
76 |
77 | .spa{
78 | grid-column: span 2;
79 | }
80 |
81 | .display{
82 | grid-column: 1 / -1;
83 | height: 8rem;
84 | background-color: rgba(0, 0, 0, 0.75);
85 | display: flex;
86 | align-items: flex-end;
87 | justify-content: space-around;
88 | flex-direction: column;
89 | padding: 10px;
90 | word-wrap: break-word;
91 | word-break: break-all;
92 | border-top-left-radius: 2rem;
93 | border-top-right-radius: 2rem;
94 | }
95 |
96 | .display .old{
97 | color: rgba(14, 209, 249, 0.75);
98 | font-size: 1.5rem;
99 | }
100 |
101 | .display .temp{
102 | color: white;
103 | font-size: 2.5rem;
104 | }
105 |
--------------------------------------------------------------------------------
/Slider/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
Task5
8 |
35 |
69 |
70 |
71 |
83 |
84 |
85 |
--------------------------------------------------------------------------------
/react-to-do-list-master/src/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
7 |
8 |
--------------------------------------------------------------------------------
/e-commerce website/css/index.css:
--------------------------------------------------------------------------------
1 | body{
2 | width: 100%;
3 | height: 100%;
4 | margin: 0;
5 | }
6 | a{
7 | text-decoration: none;
8 | background-color: transparent;
9 | color:#ededed;
10 | }
11 | .header{
12 | background-color:#000;
13 | color:#fff;
14 | border-color: #080808;
15 | min-height: 50px;
16 | border: 1px solid transparent;
17 | }
18 | .inner-header{
19 | width:80%;
20 | margin:auto;
21 | }
22 | .logo{
23 | float: left;
24 | height: 50px;
25 | padding: 15px;
26 | font-size: 20px;
27 | font-weight: bold;
28 | }
29 | .header-link{
30 | float:right;
31 | font-size:14px;
32 | height: 50px;
33 | padding: 15px 15px;
34 | font-size:16px;
35 | font-weight: bold;
36 | }
37 | .content{
38 | min-height: 600px;
39 | }
40 | .banner-image{
41 | padding-bottom: 50px;
42 | margin-bottom: 20px;
43 | text-align: center;
44 | color: #f8f8f8;
45 | background: url(../images/intro-bg_1.jpg) no-repeat center;
46 | background-size: cover;
47 | }
48 | .inner-banner-image{
49 | padding-top: 12%;
50 | width:80%;
51 | margin:auto;
52 | }
53 | .banner_content{
54 | position: relative;
55 | padding-top: 6%;
56 | padding-bottom: 6%;
57 | overflow:hidden;
58 | margin-bottom: 12%;
59 | background-color: rgba(0, 0, 0, 0.7);
60 | max-width: 660px;
61 | }
62 | .button{
63 | color: #fff;
64 | background-color: #c9302c;
65 | border-color: #ac2925;
66 | box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
67 | padding: 10px 16px;
68 | font-size: 18px;
69 | border-radius: 6px;
70 | }
71 | .container{
72 | width:100%;
73 | margin:auto;
74 | overflow:hidden;
75 | }
76 | .item{
77 | width:30%;
78 | display: block;
79 | padding: 4px;
80 | margin-bottom: 20px;
81 | line-height: 1.42857143;
82 | background-color: #fff;
83 | border: 1px solid #ddd;
84 | border-radius: 4px;
85 | float:left;
86 | margin-left:1%;
87 | }
88 | .thumbnail{
89 | display: block;
90 | max-width: 100%;
91 | height: auto;
92 | text-align: center;
93 | }
94 | .caption{
95 | color:#000;
96 | padding:0px 10px 10px;
97 | font-weight: bold;
98 |
99 | }
100 | footer{
101 | background-color: #000;
102 | height: 40px;
103 | color:#fff;
104 | font-size:18px;
105 | text-align: center;
106 | padding-top: 0.5px;
107 |
108 | }
--------------------------------------------------------------------------------
/Canvas White board/script.js:
--------------------------------------------------------------------------------
1 | window.addEventListener("load", function(){
2 | //get canvas
3 | mycanvas = document.getElementById('mycanvas');
4 | mycanvas.width = window.innerWidth;
5 | mycanvas.height = window.innerHeight;
6 |
7 | //getcontext
8 | isdrawable = false
9 | mycontext = mycanvas.getContext('2d');
10 | mycanvas.addEventListener('mousemove', drawCircle);
11 | mycanvas.addEventListener('mouseup', disableDrawing);
12 | mycanvas.addEventListener('mousedown', enableDrawing);
13 |
14 | //Radius bar
15 | raduis =10;
16 | radiusvalue = document.getElementById('radiusvalue');
17 | incre = document.getElementById('incre');
18 | decre = document.getElementById('decre');
19 | incre.addEventListener('click', increaseRadius);
20 | decre.addEventListener('click', decreaseRadius);
21 |
22 | //save bar
23 | savebtn = document.getElementById('savebtn');
24 | savebtn.addEventListener('click', saveAsImg);
25 |
26 | //colors bar
27 | allcolors = document.querySelectorAll(".colorsbtn");
28 | for(var i = 0; i < allcolors.length; i++){
29 | allcolors[i].addEventListener('click', changeColor);
30 | if(allcolors[i].style.backgroundColor == localStorage.getItem('newColor')){
31 | allcolors[i].classList.add('active');
32 | mycontext.fillStyle = allcolors[i].style.backgroundColor;
33 | }
34 | }
35 | });
36 |
37 | function drawCircle(e){
38 | if(isdrawable){
39 | mycontext.beginPath();
40 | mycontext.arc(e.clientX, e.clientY, raduis, 0, Math.PI * 2);
41 | mycontext.fill();
42 | mycontext.closePath();
43 | }
44 | }
45 |
46 | function disableDrawing(){
47 | isdrawable = false;
48 | }
49 |
50 | function enableDrawing(){
51 | isdrawable = true;
52 | }
53 |
54 | function increaseRadius(){
55 | raduis++;
56 | radiusvalue.innerText = raduis;
57 | }
58 |
59 | function decreaseRadius(){
60 | raduis--;
61 | radiusvalue.innerText = raduis;
62 | }
63 |
64 | function saveAsImg(e){
65 | var link = document.createElement('a');
66 | link.download = 'download.png';
67 | link.href = mycanvas.toDataURL()
68 | link.click();
69 | link.delete;
70 | }
71 |
72 | function changeColor(e){
73 | var getOldSelectColor = document.getElementsByClassName('active')[0];
74 | if(getOldSelectColor != null)
75 | getOldSelectColor.classList.remove('active');
76 |
77 | var newSelectColor = e.target;
78 | newSelectColor.classList.add('active');
79 | mycontext.fillStyle = newSelectColor.style.backgroundColor;
80 | localStorage.setItem('newColor', newSelectColor.style.backgroundColor)
81 | }
82 |
83 |
--------------------------------------------------------------------------------
/Dark-Mode-Toggle/styles.css:
--------------------------------------------------------------------------------
1 | :root {
2 | /* light theme */
3 | --light-bg-color: #fff;
4 | --light-text-color: #151515;
5 | --light-btn-color: #78ccf3;
6 | --light-switch-color: #41f675;
7 |
8 | /* dark theme */
9 | --dark-bg-color: #151515;
10 | --dark-text-color: #fff;
11 | --dark-btn-color: #076a98;
12 | --dark-switch-color: #05942e;
13 | }
14 |
15 | /* ------------------------default base CSS--------------------------- */
16 | * {
17 | box-sizing: border-box;
18 | padding: 0;
19 | margin: 0;
20 | }
21 |
22 | html,
23 | body {
24 | height: 100%;
25 | width: 100%;
26 | }
27 |
28 | /* Container styling */
29 |
30 | .container {
31 | position: relative;
32 | display: flex;
33 | flex-direction: column;
34 | width: 100%;
35 | min-height: 100%;
36 | text-align: center;
37 | font-family: Arial, Helvetica, sans-serif;
38 | }
39 |
40 | /* light theme color styling for container */
41 |
42 | .light.container {
43 | background-color: var(--light-bg-color);
44 | color: var(--light-text-color);
45 | transition: all 0.3s ease;
46 | }
47 |
48 | /* dark theme color styling for container */
49 |
50 | .dark.container {
51 | background-color: var(--dark-bg-color);
52 | color: var(--dark-text-color);
53 | transition: all 0.3s ease;
54 | }
55 |
56 | .container h1 {
57 | margin-top: 70px;
58 | }
59 |
60 | .content {
61 | position: relative;
62 | display: block;
63 | margin: 0 auto;
64 | padding: 50px;
65 | width: 100%;
66 | top: 25%;
67 | text-transform: uppercase;
68 | }
69 |
70 | .content button,
71 | .content .switch {
72 | cursor: pointer;
73 | padding: 20px 40px;
74 | font-size: 20px;
75 | font-weight: bold;
76 | text-transform: uppercase;
77 | letter-spacing: 1.5px;
78 | border-radius: 10px;
79 | }
80 |
81 | .content button {
82 | margin-top: 30px;
83 | }
84 |
85 | /* light theme color styling for button */
86 |
87 | .light .content button {
88 | background-color: var(--light-btn-color);
89 | color: var(--light-text-color);
90 | }
91 |
92 | /* dark theme color styling for button */
93 |
94 | .dark .content button {
95 | background-color: var(--dark-btn-color);
96 | color: var(--dark-text-color);
97 | }
98 |
99 | /* hiding the default checkbox input */
100 | input {
101 | position: absolute;
102 | opacity: 0;
103 | cursor: pointer;
104 | height: 0;
105 | width: 0;
106 | }
107 |
108 | .switch {
109 | position: relative;
110 | display: block;
111 | margin: auto;
112 | width: fit-content;
113 | margin-top: 30px;
114 | }
115 |
116 | /* light theme color styling for switch checkbox */
117 |
118 | .light .switch {
119 | background-color: var(--light-switch-color);
120 | color: var(--light-text-color);
121 | }
122 |
123 | /* dark theme color styling for switch checkbox */
124 |
125 | .dark .switch {
126 | background-color: var(--dark-switch-color);
127 | color: var(--dark-text-color);
128 | }
--------------------------------------------------------------------------------
/css-card-with-button/style.css:
--------------------------------------------------------------------------------
1 | *,
2 | ::before,
3 | ::after {
4 | box-sizing: border-box;
5 | border-width: 0;
6 | border-style: solid;
7 | }
8 |
9 | html {
10 | line-height: 1.5;
11 | -webkit-text-size-adjust: 100%;
12 | -moz-tab-size: 4;
13 | tab-size: 4;
14 | font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
15 | "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
16 | "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
17 | }
18 |
19 | body {
20 | margin: 0;
21 | line-height: inherit;
22 | }
23 |
24 | h5 {
25 | font-size: inherit;
26 | font-weight: inherit;
27 | }
28 |
29 | a {
30 | color: inherit;
31 | text-decoration: inherit;
32 | }
33 |
34 | h5,
35 | p {
36 | margin: 0;
37 | }
38 |
39 | .p-6 {
40 | padding: 1.5rem;
41 | }
42 |
43 | .max-w-sm {
44 | max-width: 24rem;
45 | }
46 |
47 | .bg-white {
48 | background-color: rgb(255 255 255);
49 | }
50 |
51 | .rounded-lg {
52 | border-radius: 0.5rem;
53 | }
54 |
55 | .border {
56 | border-width: 1px;
57 | border-top-width: 1px;
58 | border-right-width: 1px;
59 | border-bottom-width: 1px;
60 | border-left-width: 1px;
61 | }
62 |
63 | .border-gray-200 {
64 | border-color: rgb(229 231 235);
65 | }
66 |
67 | .shadow-md {
68 | box-shadow: 0 0 #0000, 0 0 #0000, 0 4px 6px -1px rgb(0 0 0 / 0.1),
69 | 0 2px 4px -2px rgb(0 0 0 / 0.1);
70 | }
71 |
72 | .mb-2 {
73 | margin-bottom: 0.5rem;
74 | }
75 |
76 | .text-2xl {
77 | font-size: 1.5rem;
78 | line-height: 2rem;
79 | }
80 |
81 | .font-bold {
82 | font-weight: 700;
83 | }
84 |
85 | .tracking-tight {
86 | letter-spacing: -0.025em;
87 | }
88 |
89 | .text-gray-900 {
90 | color: rgb(17 24 39);
91 | }
92 |
93 | .mb-3 {
94 | margin-bottom: 0.75rem;
95 | }
96 |
97 | .font-normal {
98 | font-weight: 400;
99 | }
100 |
101 | .text-gray-700 {
102 | color: rgb(55 65 81);
103 | }
104 |
105 | .inline-flex {
106 | display: inline-flex;
107 | }
108 |
109 | .items-center {
110 | align-items: center;
111 | }
112 |
113 | .py-2 {
114 | padding-top: 0.5rem;
115 | padding-bottom: 0.5rem;
116 | }
117 |
118 | .px-3 {
119 | padding-left: 0.75rem;
120 | padding-right: 0.75rem;
121 | }
122 |
123 | .text-sm {
124 | font-size: 0.875rem;
125 | line-height: 1.25rem;
126 | }
127 |
128 | .font-medium {
129 | font-weight: 500;
130 | }
131 |
132 | .text-center {
133 | text-align: center;
134 | }
135 |
136 | .text-white {
137 | color: rgb(255 255 255);
138 | }
139 |
140 | .bg-blue-700 {
141 | background-color: rgb(29 78 216);
142 | }
143 |
144 | .hover\:bg-blue-800:hover {
145 | background-color: rgb(30 64 175);
146 | }
147 |
148 | .focus\:ring-4:focus {
149 | box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000;
150 | }
151 |
152 | .focus\:outline-none:focus {
153 | outline: 2px solid transparent;
154 | outline-offset: 2px;
155 | }
156 |
157 | .ml-2 {
158 | margin-left: 0.5rem;
159 | }
160 |
161 | .-mr-1 {
162 | margin-right: -0.25rem;
163 | }
164 |
165 | .w-4 {
166 | width: 1rem;
167 | }
168 |
169 | .h-4 {
170 | height: 1rem;
171 | }
172 |
--------------------------------------------------------------------------------
/Live-Weather/weather.jsx:
--------------------------------------------------------------------------------
1 | const weatherApi = {
2 | key: "bab281d79e5f1e9755a68d754cc313e7",
3 | baseUrl: "https://api.openweathermap.org/data/2.5/weather",
4 | }
5 |
6 | const searchInputBox = document.getElementById('input-box');
7 |
8 |
9 | searchInputBox.addEventListener('keypress', (event) => {
10 |
11 | if(event.keyCode == 13) {
12 | console.log(searchInputBox.value);
13 | getWeatherReport(searchInputBox.value);
14 | document.querySelector('.weather-body').style.display = "block";
15 | }
16 |
17 | });
18 |
19 |
20 | function getWeatherReport(city) {
21 | fetch(`${weatherApi.baseUrl}?q=${city}&appid=${weatherApi.key}&units=metric`)
22 | .then(weather => {
23 | return weather.json();
24 | }).then(showWeatherReport);
25 | }
26 |
27 |
28 | function showWeatherReport(weather){
29 | console.log(weather);
30 |
31 | let city = document.getElementById('city');
32 | city.innerText = `${weather.name}, ${weather.sys.country}`;
33 |
34 | let temperature = document.getElementById('temp');
35 | temperature.innerHTML = `${Math.round(weather.main.temp)}°C`;
36 |
37 | let minMaxTemp = document.getElementById('min-max');
38 | minMaxTemp.innerHTML = `${Math.floor(weather.main.temp_min)}°C (min)/ ${Math.ceil(weather.main.temp_max)}°C (max) `;
39 |
40 | let weatherType = document.getElementById('weather');
41 | weatherType.innerText = `${weather.weather[0].main}`;
42 |
43 | let date = document.getElementById('date');
44 | let todayDate = new Date();
45 | date.innerText = dateManage(todayDate);
46 |
47 |
48 | if(weatherType.textContent == 'Clear') {
49 | document.body.style.backgroundImage = "url('Sunny.png')";
50 |
51 | } else if(weatherType.textContent == 'Clouds') {
52 |
53 | document.body.style.backgroundImage = "url('Cloud.jpg')";
54 |
55 | } else if(weatherType.textContent == 'Haze') {
56 |
57 | document.body.style.backgroundImage = "url('Haze.png')";
58 |
59 | } else if(weatherType.textContent == 'Rain') {
60 |
61 | document.body.style.backgroundImage = "url('Rain.png')";
62 |
63 | } else if(weatherType.textContent == 'Snow') {
64 |
65 | document.body.style.backgroundImage = "url('Snow.png')";
66 |
67 | } else if(weatherType.textContent == 'Thunderstorm') {
68 |
69 | document.body.style.backgroundImage = "url('Thunder.png')";
70 |
71 | }
72 | else{
73 | document.body.style.backgroundImage = "url('Haze.png')";
74 | }
75 | }
76 |
77 |
78 | function dateManage(dateArg) {
79 |
80 | let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
81 |
82 | let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
83 |
84 | let year = dateArg.getFullYear();
85 | let month = months[dateArg.getMonth()];
86 | let date = dateArg.getDate();
87 | let day = days[dateArg.getDay()];
88 |
89 | return `${date} ${month} ${year} ,(${day})`;
90 | }
--------------------------------------------------------------------------------
/react-to-do-list-master/src/ColumnList.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import {CSSTransitionGroup} from 'react-transition-group';
4 | import Checkbox from 'material-ui/Checkbox';
5 | import {List, ListItem} from 'material-ui/List';
6 | import MobileTearSheet from './MobileTearSheet';
7 | import DeleteIcon from 'material-ui/svg-icons/action/delete';
8 | import './ColumnList.css';
9 |
10 | /**
11 | * This object is used for type checking the props of the component.
12 | */
13 | const propTypes = {
14 | title: PropTypes.string.isRequired,
15 | items: PropTypes.array,
16 | updateTask: PropTypes.func.isRequired,
17 | removeTask: PropTypes.func.isRequired,
18 | removeMode: PropTypes.bool,
19 | };
20 |
21 | /**
22 | * This object sets default values to the optional props.
23 | */
24 | const defaultProps = {
25 | items: [],
26 | removeMode: [],
27 | };
28 |
29 | /**
30 | * This callback type is called `removeTask` and is displayed as a global symbol.
31 | *
32 | * @callback removeTask
33 | * @param {Object} event - The event generate by remove click.
34 | */
35 |
36 | /**
37 | * This callback type is called `updateTask` and is displayed as a global symbol.
38 | *
39 | * @callback updateTask
40 | * @param {Object} target - The event generate by onChange.
41 | * @param {Object} item - The item to be updated.
42 | */
43 |
44 | /**
45 | * @description Represents the column list element.
46 | * @param {Object} props - The props that were defined by the caller of this component.
47 | * @param {string} props.title - The title of this column list.
48 | * @param {Object[]} [props.items=[]] - The array of tasks/items of the list.
49 | * @param {removeTask} props.removeTask - Callback executed when user click to remove the task.
50 | * @param {updateTask} props.updateTask - Callback executed when when user the done checkbox.
51 | * @param {boolean} [props.removeMode=false] - Indicates whether the app is in remove mode.
52 | * @returns {XML} Return the stateless component markup
53 | * @constructor
54 | */
55 | const ColumnList = (props) => {
56 | return (
57 |
58 |
59 |
60 |
64 | {props.items.map(item => (
65 | (props.removeMode ? props.removeTask(item) : props.updateTask(item))}
68 | rightIcon={props.removeMode ?
78 | ))}
79 |
80 |
81 |
82 |
83 | )
84 | };
85 |
86 | // Type checking the props of the component
87 | ColumnList.propTypes = propTypes;
88 |
89 | // Assign default values to the optional props
90 | ColumnList.defaultProps = defaultProps;
91 |
92 | export default ColumnList;
93 |
--------------------------------------------------------------------------------
/todo-site/style.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Quicksand&display=swap");
2 | * {
3 | margin: 0;
4 | padding: 0;
5 | box-sizing: border-box;
6 | font-family: "Quicksand", sans-serif;
7 | }
8 | header{
9 | color: #ccc;
10 | }
11 |
12 | span{
13 | color: #ccc;
14 | }
15 | body {
16 | width: 100%;
17 | height: 100vh;
18 | padding: 10px;
19 | background-color: rgb(34, 34, 34);
20 | }
21 | .wrapper {
22 | background: rgb(34, 34, 34);
23 | max-width: 400px;
24 | width: 100%;
25 | margin: 250px auto;
26 | padding: 25px;
27 | border-radius: 5px;
28 | box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
29 | }
30 | .wrapper header {
31 | font-size: 30px;
32 | font-weight: 600;
33 | }
34 | .wrapper .inputField {
35 | margin: 20px 0;
36 | width: 100%;
37 | display: flex;
38 | height: 45px;
39 | }
40 | .inputField input {
41 | width: 85%;
42 | height: 100%;
43 | outline: none;
44 | border-radius: 3px;
45 | border: 1px solid #ccc;
46 | font-size: 17px;
47 | padding-left: 15px;
48 | transition: all 0.3s ease;
49 | }
50 | .inputField input:focus {
51 | border-color: rgb(34, 34, 34);
52 | }
53 | .inputField button {
54 | width: 50px;
55 | height: 100%;
56 | border: none;
57 | color: #fff;
58 | margin-left: 5px;
59 | font-size: 21px;
60 | outline: none;
61 | background: rgb(34, 34, 34);
62 | cursor: pointer;
63 | border-radius: 3px;
64 | opacity: 0.6;
65 | pointer-events: none;
66 | transition: all 0.3s ease;
67 | }
68 | .inputField button:hover,
69 | .footer button:hover {
70 | background: rgb(34, 34, 34);
71 | }
72 | .inputField button.active {
73 | opacity: 1;
74 | pointer-events: auto;
75 | }
76 | .wrapper .todoList {
77 | max-height: 250px;
78 | overflow-y: auto;
79 | }
80 | .todoList li {
81 | position: relative;
82 | list-style: none;
83 | margin-bottom: 8px;
84 | background: #f2f2f2;
85 | border-radius: 3px;
86 | padding: 10px 15px;
87 | cursor: default;
88 | overflow: hidden;
89 | word-wrap: break-word;
90 | }
91 | .todoList li .icon {
92 | position: absolute;
93 | right: -45px;
94 | top: 50%;
95 | transform: translateY(-50%);
96 | background: #e74c3c;
97 | width: 45px;
98 | text-align: center;
99 | color: #fff;
100 | padding: 10px 15px;
101 | border-radius: 0 3px 3px 0;
102 | cursor: pointer;
103 | transition: all 0.2s ease;
104 | }
105 | .todoList li:hover .icon {
106 | right: 0px;
107 | }
108 | .wrapper .footer {
109 | display: flex;
110 | width: 100%;
111 | margin-top: 20px;
112 | align-items: center;
113 | justify-content: space-between;
114 | }
115 | .footer button {
116 | padding: 6px 10px;
117 | border-radius: 3px;
118 | border: none;
119 | outline: none;
120 | color: black;
121 | font-weight: 400;
122 | font-size: 16px;
123 | margin-left: 5px;
124 | background:white;
125 | cursor: pointer;
126 | user-select: none;
127 | opacity: 0.6;
128 | pointer-events: none;
129 | transition: all 0.3s ease;
130 | }
131 | .footer button.active {
132 | opacity: 1;
133 | pointer-events: auto;
134 | }
135 |
--------------------------------------------------------------------------------
/custom-linktree-page/assets/css/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | background: linear-gradient(-45deg, #d35ecd, #5aad45, #23a6d5, #3a0eb3);
3 | background-size: 400% 400%;
4 | animation: gradient 15s ease infinite;
5 | }
6 |
7 | @keyframes gradient {
8 | 0% {
9 | background-position: 0% 50%;
10 | }
11 |
12 | 50% {
13 | background-position: 100% 50%;
14 | }
15 |
16 | 100% {
17 | background-position: 0% 50%;
18 | }
19 | }
20 |
21 | img {
22 | border-radius: 50%;
23 | }
24 |
25 | .profile-picture {
26 | display: block;
27 | margin-left: auto;
28 | margin-right: auto;
29 | margin-top: 5%;
30 | height: auto;
31 | max-width: 100px;
32 | }
33 |
34 | .profile-name {
35 | text-align: center;
36 | padding: 10px;
37 | font-family: "Dosis", sans-serif;
38 | color: white;
39 | font-size: 22px;
40 | letter-spacing: 2px;
41 | }
42 |
43 | .profile-about {
44 | text-align: center;
45 | padding: 2px;
46 | font-family: "Dosis", sans-serif;
47 | color: white;
48 | font-size: 15px;
49 | letter-spacing: 2px;
50 | }
51 |
52 | .links {
53 | text-align: center;
54 | margin-top: 20px;
55 | padding: 20px;
56 | border: 0.5px solid rgb(255, 255, 255);
57 | border-width: 1px;
58 | width: 490px;
59 | display: block;
60 | margin-left: auto;
61 | margin-right: auto;
62 | border-radius: 40px;
63 | font-family: "Dosis", sans-serif;
64 | position: relative;
65 | font-size: 20px;
66 | letter-spacing: 3px;
67 | }
68 |
69 | .links-in {
70 | padding: 5px;
71 | border: 0.5px solid rgba(255, 255, 255, 0);
72 | border-width: 1px;
73 | width: 30px;
74 | display: block;
75 | border-radius: 40px;
76 | left: 20px;
77 | position: absolute;
78 | font-size: 20px;
79 | }
80 |
81 | .hover {
82 | text-decoration: none;
83 | color: rgb(255, 255, 255);
84 | transition: color 1s;
85 | }
86 |
87 | .hover:hover {
88 | color: rgb(0, 0, 0);
89 | background: rgb(255, 255, 255);
90 | text-decoration: none;
91 | }
92 |
93 | .bottom-text {
94 | text-decoration: none;
95 | text-align: center;
96 | margin-top: 30px;
97 | font-size: 20px;
98 | color: rgb(255, 255, 255);
99 | font-family: "Handlee", cursive;
100 | }
101 |
102 | .link-hide {
103 | text-decoration: none;
104 | }
105 | .link-hide:hover {
106 | text-decoration: none;
107 | }
108 |
109 | @media (max-width: 548px) {
110 | .links {
111 | text-align: center;
112 | margin-top: 20px;
113 | padding: 20px;
114 | border: 0.5px solid rgb(255, 255, 255);
115 | border-width: 1px;
116 | width: 290px;
117 | display: block;
118 | margin-left: auto;
119 | margin-right: auto;
120 | border-radius: 40px;
121 | font-family: "Dosis", sans-serif;
122 | position: relative;
123 | }
124 | .profile-about {
125 | text-align: center;
126 | padding: 2px;
127 | font-family: "Dosis", sans-serif;
128 | color: white;
129 | font-size: 15px;
130 | letter-spacing: 1px;
131 | }
132 | }
133 |
134 | .links-footer {
135 | padding: 4px;
136 | border: 0.5px solid rgb(255, 255, 255);
137 | border-width: 1px;
138 | width: 40px;
139 | display: inline-block;
140 | border-radius: 30px;
141 | font-size: 20px;
142 | text-align: center;
143 | margin: 10px;
144 | margin-top: 50px;
145 | }
146 |
--------------------------------------------------------------------------------
/quiz/style.css:
--------------------------------------------------------------------------------
1 | body{
2 | font-size: 20px;
3 | font-family: monospace;
4 | background-color: lightblue;
5 | }
6 |
7 |
8 |
9 | #container{
10 | margin : 20px auto;
11 | margin-top: 180px;
12 | background-color: white;
13 | height: 300px;
14 | width : 700px;
15 | border-radius: 5px;
16 | box-shadow: 0px 5px 15px 0px;
17 | position: relative;
18 | }
19 | #start{
20 | font-size: 1.5em;
21 | font-weight: bolder;
22 | word-break: break-all;
23 | width:100px;
24 | height:150px;
25 | border : 2px solid lightgrey;
26 | text-align: center;
27 | cursor: pointer;
28 | position: absolute;
29 | left:300px;
30 | top:50px;
31 | color : lightgrey;
32 | }
33 | #start:hover{
34 | border: 3px solid lightseagreen;
35 | color : lightseagreen;
36 | }
37 |
38 | #qImg{
39 | width : 200px;
40 | height : 200px;
41 | position: absolute;
42 | left : 0px;
43 | top : 0px;
44 | }
45 | #qImg img{
46 | width : 200px;
47 | height : 200px;
48 | border-top-left-radius: 5px;
49 | }
50 |
51 | #question{
52 | width:500px;
53 | height : 125px;
54 | position: absolute;
55 | right:0;
56 | top:0;
57 | }
58 | #question p{
59 | margin : 0;
60 | padding : 15px;
61 | font-size: 1.25em;
62 | }
63 |
64 | #choices{
65 | width : 480px;
66 | position: absolute;
67 | right : 0;
68 | top : 125px;
69 | padding : 10px
70 | }
71 | .choice{
72 | display: inline-block;
73 | width : 135px;
74 | text-align: center;
75 | border : 1px solid grey;
76 | border-radius: 5px;
77 | cursor: pointer;
78 | padding : 5px;
79 | }
80 | .choice:hover{
81 | border : 2px solid grey;
82 | font-weight: bold;
83 | }
84 |
85 | #timer{
86 | position: absolute;
87 | height : 100px;
88 | width : 200px;
89 | bottom : 0px;
90 | text-align: center;
91 | }
92 | #counter{
93 | font-size: 3em;
94 | }
95 | #btimeGauge{
96 | width : 150px;
97 | height : 10px;
98 | border-radius: 10px;
99 | background-color: lightgray;
100 | margin-left : 25px;
101 | }
102 | #timeGauge{
103 | height : 10px;
104 | border-radius: 10px;
105 | background-color: mediumseagreen;
106 | margin-top : -10px;
107 | margin-left : 25px;
108 | }
109 | #progress{
110 | width : 500px;
111 | position: absolute;
112 | bottom : 0px;
113 | right : 0px;
114 | padding:5px;
115 | text-align: right;
116 | }
117 | .prog{
118 | width : 25px;
119 | height : 25px;
120 | border: 1px solid #000;
121 | display: inline-block;
122 | border-radius: 50%;
123 | margin-left : 5px;
124 | margin-right : 5px;
125 | }
126 | #scoreContainer{
127 | margin : 20px auto;
128 | background-color: white;
129 | opacity: 0.8;
130 | height: 300px;
131 | width : 700px;
132 | border-radius: 5px;
133 | box-shadow: 0px 5px 15px 0px;
134 | position: relative;
135 | display: none;
136 | }
137 | #scoreContainer img{
138 | position: absolute;
139 | top:100px;
140 | left:325px;
141 | }
142 | #scoreContainer p{
143 | position: absolute;
144 | display: block;
145 | width : 59px;
146 | height :59px;
147 | top:130px;
148 | left:325px;
149 | font-size: 1.5em;
150 | font-weight: bold;
151 | text-align: center;
152 | }
--------------------------------------------------------------------------------
/Games_ecommerce_website/js/app.js:
--------------------------------------------------------------------------------
1 | /* -----------------------------------------------
2 | /* How to use? : Check the GitHub README
3 | /* ----------------------------------------------- */
4 |
5 | /* To load a config file (particles.json) you need to host this demo (MAMP/WAMP/local)... */
6 | /*
7 | particlesJS.load('particles-js', 'particles.json', function() {
8 | console.log('particles.js loaded - callback');
9 | });
10 | */
11 |
12 | /* Otherwise just put the config content (json): */
13 |
14 | particlesJS('particles-js',
15 |
16 | {
17 | "particles": {
18 | "number": {
19 | "value": 80,
20 | "density": {
21 | "enable": true,
22 | "value_area": 800
23 | }
24 | },
25 | "color": {
26 | "value": "#ffffff"
27 | },
28 | "shape": {
29 | "type": "circle",
30 | "stroke": {
31 | "width": 0,
32 | "color": "#000000"
33 | },
34 | "polygon": {
35 | "nb_sides": 5
36 | },
37 | "image": {
38 | "src": "img/github.svg",
39 | "width": 100,
40 | "height": 100
41 | }
42 | },
43 | "opacity": {
44 | "value": 0.5,
45 | "random": false,
46 | "anim": {
47 | "enable": false,
48 | "speed": 1,
49 | "opacity_min": 0.1,
50 | "sync": false
51 | }
52 | },
53 | "size": {
54 | "value": 5,
55 | "random": true,
56 | "anim": {
57 | "enable": false,
58 | "speed": 40,
59 | "size_min": 0.1,
60 | "sync": false
61 | }
62 | },
63 | "line_linked": {
64 | "enable": true,
65 | "distance": 150,
66 | "color": "#ffffff",
67 | "opacity": 0.4,
68 | "width": 1
69 | },
70 | "move": {
71 | "enable": true,
72 | "speed": 6,
73 | "direction": "none",
74 | "random": false,
75 | "straight": false,
76 | "out_mode": "out",
77 | "attract": {
78 | "enable": false,
79 | "rotateX": 600,
80 | "rotateY": 1200
81 | }
82 | }
83 | },
84 | "interactivity": {
85 | "detect_on": "canvas",
86 | "events": {
87 | "onhover": {
88 | "enable": true,
89 | "mode": "repulse"
90 | },
91 | "onclick": {
92 | "enable": true,
93 | "mode": "push"
94 | },
95 | "resize": true
96 | },
97 | "modes": {
98 | "grab": {
99 | "distance": 400,
100 | "line_linked": {
101 | "opacity": 1
102 | }
103 | },
104 | "bubble": {
105 | "distance": 400,
106 | "size": 40,
107 | "duration": 2,
108 | "opacity": 8,
109 | "speed": 3
110 | },
111 | "repulse": {
112 | "distance": 200
113 | },
114 | "push": {
115 | "particles_nb": 4
116 | },
117 | "remove": {
118 | "particles_nb": 2
119 | }
120 | }
121 | },
122 | "retina_detect": true,
123 | "config_demo": {
124 | "hide_card": false,
125 | "background_color": "#b61924",
126 | "background_image": "",
127 | "background_position": "50% 50%",
128 | "background_repeat": "no-repeat",
129 | "background_size": "cover"
130 | }
131 | }
132 |
133 | );
--------------------------------------------------------------------------------
/react-table-search/frontend/README.md:
--------------------------------------------------------------------------------
1 | # Getting Started with Create React App
2 |
3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
4 |
5 | ## Available Scripts
6 |
7 | In the project directory, you can run:
8 |
9 | ### `npm start`
10 |
11 | Runs the app in the development mode.\
12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
13 |
14 | The page will reload when you make changes.\
15 | You may also see any lint errors in the console.
16 |
17 | ### `npm test`
18 |
19 | Launches the test runner in the interactive watch mode.\
20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
21 |
22 | ### `npm run build`
23 |
24 | Builds the app for production to the `build` folder.\
25 | It correctly bundles React in production mode and optimizes the build for the best performance.
26 |
27 | The build is minified and the filenames include the hashes.\
28 | Your app is ready to be deployed!
29 |
30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
31 |
32 | ### `npm run eject`
33 |
34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!**
35 |
36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37 |
38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
39 |
40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
41 |
42 | ## Learn More
43 |
44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45 |
46 | To learn React, check out the [React documentation](https://reactjs.org/).
47 |
48 | ### Code Splitting
49 |
50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
51 |
52 | ### Analyzing the Bundle Size
53 |
54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
55 |
56 | ### Making a Progressive Web App
57 |
58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
59 |
60 | ### Advanced Configuration
61 |
62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
63 |
64 | ### Deployment
65 |
66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
67 |
68 | ### `npm run build` fails to minify
69 |
70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
71 |
--------------------------------------------------------------------------------
/Games_ecommerce_website/css/tcpage.css:
--------------------------------------------------------------------------------
1 | .headercontainer{
2 | margin: 0px;
3 | padding: 0px;
4 | height: 100px;
5 |
6 | background-color:black;
7 | display: flex;
8 | }
9 | .themebpink{
10 | z-index: -9;
11 | background-color: #2F4F4F;
12 | padding-top: 10px;
13 | padding-bottom: 10px;
14 | }
15 | .logo{
16 | padding-left: 50px;
17 | }
18 | .particles{
19 | background-color: black;
20 | height: 100px;
21 | width: 800px;
22 | }
23 |
24 | hr.hr1{
25 | background-color: red;
26 | height:15px;
27 | margin: 0px;
28 | animation: load 1s linear infinite;
29 |
30 | }
31 | @keyframes load{
32 | 0%{background-image: linear-gradient(90deg,#FFC0CB,#FFB6C1)}
33 | 10%{background-image: linear-gradient(90deg,#FFB6C1,#F08080)}
34 | 20%{background-image: linear-gradient(90deg,#F08080,#FF69B4)}
35 | 30%{background-image: linear-gradient(90deg,#FF69B4,#FF1493)}
36 | 40%{background-image: linear-gradient(90deg,#FF1493,#FFB6C1)}
37 | 50%{background-image: linear-gradient(90deg,#FFB6C1,#C71585)}
38 | 60%{background-image: linear-gradient(90deg,#FF1493,#FFB6C1)}
39 | 70%{background-image: linear-gradient(90deg,#FF69B4,#FF1493)}
40 | 80%{background-image: linear-gradient(90deg,#F08080,#FF69B4)}
41 | 90%{background-image: linear-gradient(90deg,#FFB6C1,#F08080)}
42 | 100%{background-image: linear-gradient(90deg,#FFC0CB,#FFB6C1)}
43 |
44 | }
45 | .nav {
46 |
47 | height: 100px;
48 | margin: 0px;
49 | display:flex;
50 |
51 | }
52 | a{
53 | text-decoration: none;
54 | font-family: helvetica;
55 | }
56 | .nav0,.nav1,.nav2,.nav3,.nav4,.nav5,.nav6{
57 | padding: 10px;
58 |
59 | margin:20px;
60 | font-size:15px;
61 | }
62 | .a0 i {
63 | color: red;
64 |
65 | }
66 | .a0 span{
67 | opacity: 0;
68 | color: red;
69 | }
70 | .a1 i{
71 | color: #6AFF09;
72 | }
73 | .a1 span{
74 | opacity: 0;
75 | color: #6AFF09;
76 | }
77 |
78 | .a2 i{
79 | color: blue;
80 | }
81 | .a2 span{
82 | opacity: 0;
83 | color: blue;
84 | }
85 | }
86 | .a3 i{
87 | color: orange;
88 | }
89 | .a3 span{
90 | opacity: 0;
91 | color: orange;
92 | }
93 | .a4 i{
94 | color: #FF00E2;
95 | }
96 | .a4 span{
97 | opacity: 0;
98 | color: #FF00E2;
99 | }
100 | .a5 i{
101 | color: yellow;
102 | }
103 | .a5 span{
104 | opacity: 0;
105 | color: yellow;
106 | }
107 | .a6 i{
108 | color: pink;
109 | }
110 | .a6 span{
111 | opacity: 0;
112 | color: pink;
113 | }
114 |
115 |
116 |
117 | .nav0:hover,.nav1:hover,.nav2:hover,.nav3:hover,.nav4:hover,.nav5:hover,.nav6:hover{
118 | transform: translateY(-10px);
119 | }
120 | .nav0 .a0 span:hover,.nav1 .a1 span:hover,.nav2 .a2 span:hover,.nav3 .a3 span:hover,.nav4 .a4 span:hover,.nav5 .a5 span:hover,.nav6 .a6 span:hover{
121 | opacity: 1;
122 |
123 | }
124 | .textbox{
125 | background-color: #F48FB1;
126 | border-radius: 30px;
127 | box-shadow: 4px 4px 10px black;
128 | color: #880E4F;
129 | margin: 100px;
130 |
131 | }
132 | .textbox ol{
133 | font-size: 40px;
134 | text-align-last: center;
135 | font-family: verdana;
136 | font-weight: bold;
137 | }
138 | .textbox li{
139 | font-size: 25px;
140 | padding:10px;
141 | }
142 |
143 |
144 | .footer{
145 | height: 200px;
146 | background-color: black;
147 | display: flex;
148 | }
149 | .footer img{
150 |
151 | height: 200px;
152 | padding-left: 500px;
153 |
154 | }
155 | .follow{
156 | font-size: 20px;
157 | color:white;
158 | margin: 10px;
159 |
160 | }
161 | .feedback{
162 | font-size: 20px;
163 | color:white;
164 | margin: 10px;
165 | padding-left:500px;
166 |
167 | }
168 | .copyright{
169 | padding-top: 10px;
170 | background-color: black;
171 | margin: 0px;
172 | text-align: center;
173 | color: white;
174 | }
--------------------------------------------------------------------------------
/quiz/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
Quiz
6 |
7 |
8 |
9 |
10 |
11 |
Start Quiz!
12 |
13 |
14 |
15 |
20 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/Games_ecommerce_website/css/driveinstructionspage.css:
--------------------------------------------------------------------------------
1 | .headercontainer{
2 | margin: 0px;
3 | padding: 0px;
4 | height: 100px;
5 |
6 | background-color:black;
7 | display: flex;
8 | }
9 | .themeblue{
10 | z-index: -9;
11 | background-color: #2F4F4F;
12 | padding-top: 10px;
13 | padding-bottom: 10px;
14 | }
15 | .logo{
16 | padding-left: 50px;
17 | }
18 | .particles{
19 | background-color: black;
20 | height: 100px;
21 | width: 800px;
22 | }
23 |
24 | hr.hr1{
25 | background-color: red;
26 | height:15px;
27 | margin: 0px;
28 | animation: load 1s linear infinite;
29 |
30 | }
31 | @keyframes load{
32 | 0%{background-image: linear-gradient(90deg,#B0E0E6,#ADD8E6)}
33 | 10%{background-image: linear-gradient(90deg,#ADD8E6,#87CEEB)}
34 | 20%{background-image: linear-gradient(90deg,#87CEEB,#00BFFF)}
35 | 30%{background-image: linear-gradient(90deg,#00BFFF,#1E90FF)}
36 | 40%{background-image: linear-gradient(90deg,#1E90FF,#ADD8E6)}
37 | 50%{background-image: linear-gradient(90deg,#ADD8E6,#0000FF)}
38 | 60%{background-image: linear-gradient(90deg,#1E90FF,#ADD8E6)}
39 | 70%{background-image: linear-gradient(90deg,#00BFFF,#1E90FF)}
40 | 80%{background-image: linear-gradient(90deg,#87CEEB,#00BFFF)}
41 | 90%{background-image: linear-gradient(90deg,#ADD8E6,#87CEEB)}
42 | 100%{background-image: linear-gradient(90deg,#B0E0E6,#ADD8E6)}
43 |
44 | }
45 | .nav {
46 |
47 | height: 100px;
48 | margin: 0px;
49 | display:flex;
50 |
51 | }
52 | a{
53 | text-decoration: none;
54 | font-family: helvetica;
55 | }
56 | .nav0,.nav1,.nav2,.nav3,.nav4,.nav5,.nav6{
57 | padding: 10px;
58 |
59 | margin:20px;
60 | font-size:15px;
61 | }
62 | .a0 i {
63 | color: red;
64 |
65 | }
66 | .a0 span{
67 | opacity: 0;
68 | color: red;
69 | }
70 | .a1 i{
71 | color: #6AFF09;
72 | }
73 | .a1 span{
74 | opacity: 0;
75 | color: #6AFF09;
76 | }
77 |
78 | .a2 i{
79 | color: blue;
80 | }
81 | .a2 span{
82 | opacity: 0;
83 | color: blue;
84 | }
85 | }
86 | .a3 i{
87 | color: orange;
88 | }
89 | .a3 span{
90 | opacity: 0;
91 | color: orange;
92 | }
93 | .a4 i{
94 | color: #FF00E2;
95 | }
96 | .a4 span{
97 | opacity: 0;
98 | color: #FF00E2;
99 | }
100 | .a5 i{
101 | color: yellow;
102 | }
103 | .a5 span{
104 | opacity: 0;
105 | color: yellow;
106 | }
107 | .a6 i{
108 | color: pink;
109 | }
110 | .a6 span{
111 | opacity: 0;
112 | color: pink;
113 | }
114 |
115 |
116 |
117 | .nav0:hover,.nav1:hover,.nav2:hover,.nav3:hover,.nav4:hover,.nav5:hover,.nav6:hover{
118 | transform: translateY(-10px);
119 | }
120 | .nav0 .a0 span:hover,.nav1 .a1 span:hover,.nav2 .a2 span:hover,.nav3 .a3 span:hover,.nav4 .a4 span:hover,.nav5 .a5 span:hover,.nav6 .a6 span:hover{
121 | opacity: 1;
122 |
123 | }
124 | .t1{
125 | font-family: Helvetica;
126 | font-size: 60px;
127 | color: #87CEFA;
128 | margin-left: 100px;
129 | text-align-last: center;
130 | background-image: gradient(60deg,#2F4F4F,#0000CD,#000080#0000CD,#2F4F4F);
131 |
132 |
133 | }
134 |
135 |
136 | .t2 dt{
137 | color: #00BFFF;
138 | padding: 30px;
139 | padding-left: 400px;
140 | font-size: 50px;
141 |
142 |
143 | }
144 | .t2 dd{
145 | color: #B0E0E6;
146 | padding: 15px;
147 | padding-left: 400px;
148 | font-size: 30px;
149 |
150 | }
151 |
152 |
153 |
154 | .footer{
155 | height: 200px;
156 | background-color: black;
157 | display: flex;
158 | }
159 | .footer img{
160 |
161 | height: 200px;
162 | padding-left: 500px;
163 |
164 | }
165 | .follow{
166 | font-size: 20px;
167 | color:white;
168 | margin: 10px;
169 |
170 | }
171 | .feedback{
172 | font-size: 20px;
173 | color:white;
174 | margin: 10px;
175 | padding-left:500px;
176 |
177 | }
178 | .copyright{
179 | padding-top: 10px;
180 | background-color: black;
181 | margin: 0px;
182 | text-align: center;
183 | color: white;
184 | }
185 |
--------------------------------------------------------------------------------
/Live-Weather/weather.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background: linear-gradient(rgba(0, 0, 0, 0.7) rgba(0, 0, 0, 0.7)), url("noaa-kcvlb727mn8-unsplash.jpg");
9 | height: 100vh;
10 | overflow: hidden;
11 | background-repeat: no-repeat;
12 | background-position: top center;
13 | font-family: Arial, Helvetica, sans-serif;
14 | background-size: cover;
15 | align-items: center;
16 | justify-content: center;
17 | }
18 |
19 | /* .backvideo{
20 | position: absolute;
21 | z-index: -5;
22 | margin-top: -10rem;
23 | } */
24 |
25 |
26 |
27 | /* body{
28 | background: linear-gradient(rgba(0, 0, 0, 0.7) rgba(0, 0, 0, 0.7)), url("noaa-kcvlb727mn8-unsplash.jpg");
29 | background-size: cover;
30 | } */
31 |
32 | .heading{
33 | margin-top: 2rem;
34 | /* color: rgb(9, 17, 240); */
35 | text-transform: uppercase;
36 |
37 | }
38 |
39 |
40 | .container{
41 | /* margin-left: 62vh; */
42 | /* padding-left: 20rem; */
43 | /* margin: auto; */
44 | /* margin-top: 15rem; */
45 | height: 10rem;
46 | display: flex;
47 | justify-content: center;
48 | align-items: center;
49 | margin-bottom: -5rem;
50 |
51 | }
52 | .row{
53 | /* margin-left: 35rem; */
54 | position: relative;
55 | margin: auto;
56 | justify-content: center;
57 | align-items: center;
58 | }
59 | .animate-charcter
60 | {
61 | text-transform: uppercase;
62 | background-image: linear-gradient(
63 | -225deg,
64 | #12cffa 0%,
65 | #44107a 29%,
66 | #ff1361 67%,
67 | #fff800 100%
68 | );
69 | background-size: auto auto;
70 | background-clip: border-box;
71 | background-size: 200% auto;
72 | color: #fff;
73 | background-clip: text;
74 | -webkit-text-fill-color: transparent;
75 | -webkit-background-clip: text;
76 | -webkit-text-fill-color: transparent;
77 | animation: textclip 2s linear infinite;
78 | display: inline-block;
79 | font-size: 5rem;
80 | }
81 |
82 | @keyframes textclip {
83 | to {
84 | background-position: 200% center;
85 | }
86 | }
87 | @media(max-width:700px)
88 | {
89 | .animate-charcter{
90 | font-size: 3rem;
91 | }
92 | }
93 |
94 | .app-main {
95 | margin-top: -20rem;
96 | width: 50vh;
97 | margin: 100px auto;
98 | background-color: rgba(7, 237, 233, 0.579);
99 | padding: 20px;
100 | text-align: center;
101 | border-radius: 2rem;
102 | }
103 | @media(max-width:700px){
104 | .app-main{
105 | width: 40vh;
106 | }
107 | }
108 |
109 | .app-main > * {
110 | margin-bottom: 20px;
111 | }
112 |
113 | .input-box {
114 | width: 100%;
115 | background-color: rgba(255,255,255,0.6);
116 | border: none;
117 | outline: none;
118 | color: #210af4;
119 | font-size: 1.2rem;
120 | height: 50px;
121 | border-radius: 5px;
122 | padding: 0 10px;
123 | text-align: center;
124 | }
125 |
126 | .input-box:focus {
127 | background-color: rgba(255,255,255,0.6);
128 | }
129 |
130 |
131 | .weather-body {
132 | display: none;
133 | color: #210af4;
134 | padding: 20px;
135 | line-height: 2rem;
136 | border-radius: 10px;
137 | background-color: rgba(255,255,255,0.6);
138 | height: 50vh;
139 | }
140 |
141 | .location-details {
142 | font-weight: bold;
143 | }
144 |
145 | .weather-status {
146 | padding: 20px;
147 | }
148 |
149 | .temp {
150 | font-size: 50pt;
151 | font-weight: 700;
152 | margin: 20px 0;
153 | text-shadow: 2px 4px rgba(0,0,0,0.3);
154 | }
155 |
156 | .min-max, .weather {
157 | font-size: 12pt;
158 | font-weight: 600;
159 | }
160 |
161 |
--------------------------------------------------------------------------------
/Contact Us Form/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
2 | *{
3 | margin: 0;
4 | padding: 0;
5 | outline: none;
6 | box-sizing: border-box;
7 | font-family: 'Poppins', sans-serif;
8 | }
9 | .body-form{
10 | display: flex;
11 | align-items: center;
12 | justify-content: center;
13 | min-height: 100vh;
14 | padding: 40px;
15 | background: linear-gradient(115deg, #56d8e4 10%, #9f01ea 90%);
16 | }
17 | .container1{
18 | max-width: 800px;
19 | background: #fff;
20 | width: 800px;
21 | padding: 25px 40px 10px 40px;
22 | box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
23 | }
24 | .container1 .text{
25 | text-align: center;
26 | font-size: 35px;
27 | font-weight: 600;
28 | background: -webkit-linear-gradient(right, #56d8e4, #9f01ea, #56d8e4, #9f01ea);
29 | -webkit-background-clip: text;
30 | -webkit-text-fill-color: transparent;
31 | }
32 | .container1 form{
33 | padding: 30px 0 0 0;
34 | }
35 | .container1 form .form-row{
36 | display: flex;
37 | margin: 32px 0;
38 | }
39 | form .form-row .input-data{
40 | width: 100%;
41 | height: 40px;
42 | margin: 0 20px;
43 | position: relative;
44 | }
45 | form .form-row .textarea{
46 | height: 70px;
47 | }
48 | .input-data input,
49 | .textarea textarea{
50 | display: block;
51 | width: 100%;
52 | height: 100%;
53 | border: none;
54 | font-size: 17px;
55 | border-bottom: 2px solid rgba(0,0,0, 0.12);
56 | }
57 | .input-data input:focus ~ label, .textarea textarea:focus ~ label,
58 | .input-data input:valid ~ label, .textarea textarea:valid ~ label{
59 | transform: translateY(-20px);
60 | font-size: 14px;
61 | color: #3498db;
62 | }
63 | .textarea textarea{
64 | resize: none;
65 | padding-top: 10px;
66 | }
67 | .input-data label{
68 | position: absolute;
69 | pointer-events: none;
70 | bottom: 10px;
71 | font-size: 16px;
72 | transition: all 0.3s ease;
73 | }
74 | .textarea label{
75 | width: 100%;
76 | bottom: 40px;
77 | background: #fff;
78 | }
79 | .input-data .underline{
80 | position: absolute;
81 | bottom: 0;
82 | height: 2px;
83 | width: 100%;
84 | }
85 | .input-data .underline:before{
86 | position: absolute;
87 | content: "";
88 | height: 2px;
89 | width: 100%;
90 | background: #3498db;
91 | transform: scaleX(0);
92 | transform-origin: center;
93 | transition: transform 0.3s ease;
94 | }
95 | .input-data input:focus ~ .underline:before,
96 | .input-data input:valid ~ .underline:before,
97 | .textarea textarea:focus ~ .underline:before,
98 | .textarea textarea:valid ~ .underline:before{
99 | transform: scale(1);
100 | }
101 | .submit-btn .input-data{
102 | overflow: hidden;
103 | height: 45px!important;
104 | width: 25%!important;
105 | }
106 | .submit-btn .input-data .inner{
107 | height: 100%;
108 | width: 300%;
109 | position: absolute;
110 | left: -100%;
111 | background: -webkit-linear-gradient(right, #56d8e4, #9f01ea, #56d8e4, #9f01ea);
112 | transition: all 0.4s;
113 | }
114 | .submit-btn .input-data:hover .inner{
115 | left: 0;
116 | }
117 | .submit-btn .input-data input{
118 | background: none;
119 | border: none;
120 | color: #fff;
121 | font-size: 17px;
122 | font-weight: 500;
123 | text-transform: uppercase;
124 | letter-spacing: 1px;
125 | cursor: pointer;
126 | position: relative;
127 | z-index: 2;
128 | }
129 | @media (max-width: 700px) {
130 | .container .text{
131 | font-size: 30px;
132 | }
133 | .container form{
134 | padding: 10px 0 0 0;
135 | }
136 | .container form .form-row{
137 | display: block;
138 | }
139 | form .form-row .input-data{
140 | margin: 35px 0!important;
141 | }
142 | .submit-btn .input-data{
143 | width: 40%!important;
144 | }
145 | }
--------------------------------------------------------------------------------
/simple-js-calculator/script.js:
--------------------------------------------------------------------------------
1 | class Calculator {
2 | constructor(previousOperandTextElement, currentOperandTextElement) {
3 | this.previousOperandTextElement = previousOperandTextElement
4 | this.currentOperandTextElement = currentOperandTextElement
5 | this.clear()
6 | }
7 |
8 | clear() {
9 | this.currentOperand = ''
10 | this.previousOperand = ''
11 | this.operation = undefined
12 | }
13 |
14 | delete() {
15 | this.currentOperand = this.currentOperand.toString().slice(0, -1)
16 | }
17 |
18 | appendNumber(number) {
19 | if (number === '.' && this.currentOperand.includes('.')) return
20 | this.currentOperand = this.currentOperand.toString() + number.toString()
21 | }
22 |
23 | chooseOperation(operation) {
24 | if (this.currentOperand === '') return
25 | if (this.previousOperand !== '') {
26 | this.compute()
27 | }
28 | this.operation = operation
29 | this.previousOperand = this.currentOperand
30 | this.currentOperand = ''
31 | }
32 |
33 | compute() {
34 | let computation
35 | const prev = parseFloat(this.previousOperand)
36 | const current = parseFloat(this.currentOperand)
37 | if (isNaN(prev) || isNaN(current)) return
38 | switch (this.operation) {
39 | case '+':
40 | computation = prev + current
41 | break
42 | case '-':
43 | computation = prev - current
44 | break
45 | case '*':
46 | computation = prev * current
47 | break
48 | case '÷':
49 | computation = prev / current
50 | break
51 | default:
52 | return
53 | }
54 | this.currentOperand = computation
55 | this.operation = undefined
56 | this.previousOperand = ''
57 | }
58 |
59 | getDisplayNumber(number) {
60 | const stringNumber = number.toString()
61 | const integerDigits = parseFloat(stringNumber.split('.')[0])
62 | const decimalDigits = stringNumber.split('.')[1]
63 | let integerDisplay
64 | if (isNaN(integerDigits)) {
65 | integerDisplay = ''
66 | } else {
67 | integerDisplay = integerDigits.toLocaleString('en', { maximumFractionDigits: 0 })
68 | }
69 | if (decimalDigits != null) {
70 | return `${integerDisplay}.${decimalDigits}`
71 | } else {
72 | return integerDisplay
73 | }
74 | }
75 |
76 | updateDisplay() {
77 | this.currentOperandTextElement.innerText =
78 | this.getDisplayNumber(this.currentOperand)
79 | if (this.operation != null) {
80 | this.previousOperandTextElement.innerText =
81 | `${this.getDisplayNumber(this.previousOperand)} ${this.operation}`
82 | } else {
83 | this.previousOperandTextElement.innerText = ''
84 | }
85 | }
86 | }
87 |
88 | const numberButtons = document.querySelectorAll('[data-number]')
89 | const operationButtons = document.querySelectorAll('[data-operation]')
90 | const equalsButton = document.querySelector('[data-equals]')
91 | const deleteButton = document.querySelector('[data-delete]')
92 | const allClearButton = document.querySelector('[data-all-clear]')
93 | const previousOperandTextElement = document.querySelector('[data-previous-operand]')
94 | const currentOperandTextElement = document.querySelector('[data-current-operand]')
95 |
96 | const calculator = new Calculator(previousOperandTextElement, currentOperandTextElement)
97 |
98 | numberButtons.forEach(button => {
99 | button.addEventListener('click', () => {
100 | calculator.appendNumber(button.innerText)
101 | calculator.updateDisplay()
102 | })
103 | })
104 |
105 | operationButtons.forEach(button => {
106 | button.addEventListener('click', () => {
107 | calculator.chooseOperation(button.innerText)
108 | calculator.updateDisplay()
109 | })
110 | })
111 |
112 | equalsButton.addEventListener('click', button => {
113 | calculator.compute()
114 | calculator.updateDisplay()
115 | })
116 |
117 | allClearButton.addEventListener('click', button => {
118 | calculator.clear()
119 | calculator.updateDisplay()
120 | })
121 |
122 | deleteButton.addEventListener('click', button => {
123 | calculator.delete()
124 | calculator.updateDisplay()
125 | })
--------------------------------------------------------------------------------
14 | 
18 | 
25 | 
32 |