Skip to content

Commit 2a413de

Browse files
PrajapatiRoshanPrajapatiRoshan
PrajapatiRoshan
authored and
PrajapatiRoshan
committed
2 projects added
1 parent b00a4b8 commit 2a413de

File tree

8 files changed

+508
-0
lines changed

8 files changed

+508
-0
lines changed

‎GradientColor/index.html‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Color Generator</title>
7+
<link rel="stylesheet" href="style.css" />
8+
<script defer src="script.js" defer></script>
9+
</head>
10+
<body>
11+
<div class="container">
12+
<!-- Linear gradient -->
13+
<div class="wrapper">
14+
<div class="gradient-box"></div>
15+
<div class="row options">
16+
<div class="column direction">
17+
<p>Directions</p>
18+
<div class="select-box">
19+
<select name="direction" id="direction-dropdown">
20+
<option value="to top">Top</option>
21+
<option value="to right top">Right top</option>
22+
<option value="to right">Right</option>
23+
<option value="to right bottom">Right bottom</option>
24+
<option value="to bottom">Bottom</option>
25+
<option value="to left bottom">Left bottom</option>
26+
<option value="to left">Left</option>
27+
<option value="to left top" selected>Left top</option>
28+
</select>
29+
</div>
30+
</div>
31+
<div class="column colors" id="inputs-linear">
32+
<p>Colors</p>
33+
<div class="inputs">
34+
<input type="color" name="" id="" value="#5665E9" />
35+
<input type="color" name="" id="" value="#A271F8" />
36+
</div>
37+
</div>
38+
</div>
39+
<textarea class="row" id="linear" disabled>
40+
background : linear-gradient(to left top, #977DFE, #6878FF);</textarea
41+
>
42+
<div class="row buttons">
43+
<button class="refresh">Refresh Colors</button>
44+
<button class="copy">Copy Code</button>
45+
</div>
46+
</div>
47+
<!-- Radial gradient -->
48+
<div class="wrapper">
49+
<div class="gradient-box radial"></div>
50+
<div class="row options">
51+
<div class="column direction">
52+
<p>Directions</p>
53+
<div class="select-box">
54+
<select name="direction" id="direction-dropdown--radial">
55+
<option value="">-</option>
56+
<option value="closest-side">closest-side</option>
57+
<option value="circle">circle</option>
58+
<option value="ellipse at top">ellipse at top</option>
59+
<option value="ellipse at bottom">ellipse at bottom</option>
60+
</select>
61+
</div>
62+
</div>
63+
<div class="column colors" id="inputs-radial">
64+
<p>Colors</p>
65+
<div class="inputs">
66+
<input type="color" name="" id="" value="#5665E9" />
67+
<input type="color" name="" id="" value="#A271F8" />
68+
</div>
69+
</div>
70+
</div>
71+
<textarea class="row" id="radial" disabled>
72+
background : radial-gradient(#e66465, #9198e5);</textarea
73+
>
74+
<div class="row buttons radial">
75+
<button class="refresh">Refresh Colors</button>
76+
<button class="copy">Copy Code</button>
77+
</div>
78+
</div>
79+
</div>
80+
</body>
81+
</html>

‎GradientColor/script.js‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
/*
2+
* linear Gradient Side------
3+
*/
4+
const gradientBox = document.querySelector('.gradient-box');
5+
const colorsInputs = document.querySelectorAll('#inputs-linear input');
6+
const directionDropDown = document.querySelector('#direction-dropdown');
7+
const linearGradientText = document.querySelector('#linear');
8+
const refreshBtn = document.querySelector('.refresh');
9+
const copyBtn = document.querySelector('.copy');
10+
11+
/**
12+
* Radial Gradient Side----
13+
*/
14+
const gradientBoxRad = document.querySelector('.gradient-box.radial');
15+
const colorsInputsRadial = document.querySelectorAll('#inputs-radial input');
16+
const directionDropDownRadial = document.querySelector('#direction-dropdown--radial');
17+
const radialGradientText = document.querySelector('#radial');
18+
const refreshBtnR = document.querySelector('.radial .refresh');
19+
const copyBtnR = document.querySelector('.radial .copy');
20+
21+
//rand Hxa code generator
22+
const getRandomColor = () =>
23+
`#${Math.floor(Math.random() * 0xffffff).toString(16)}`.padEnd(7, 1);
24+
25+
//update background and text
26+
const generateGradient = (isRandom = false, _radial = false) => {
27+
if (isRandom) {
28+
if (_radial) {
29+
colorsInputsRadial[0].value = getRandomColor();
30+
colorsInputsRadial[1].value = getRandomColor();
31+
} else {
32+
colorsInputs[0].value = getRandomColor();
33+
colorsInputs[1].value = getRandomColor();
34+
}
35+
}
36+
if (_radial) {
37+
const gradient = `radial-gradient(${
38+
directionDropDownRadial.value + (directionDropDownRadial.value && ', ')
39+
}${colorsInputsRadial[0].value}, ${colorsInputsRadial[1].value})`;
40+
gradientBoxRad.style.background = gradient;
41+
radialGradientText.value = `background : ${gradient}`;
42+
} else {
43+
const gradient = `linear-gradient(${directionDropDown.value}, ${colorsInputs[0].value}, ${colorsInputs[1].value})`;
44+
gradientBox.style.background = gradient;
45+
linearGradientText.value = `background : ${gradient}`;
46+
}
47+
};
48+
49+
//ucopy text to clipboard
50+
const copyCode = (_radial = false) => {
51+
const _prvText = 'Copy Code';
52+
if (_radial) {
53+
navigator.clipboard.writeText(radialGradientText.value);
54+
copyBtnR.innerText = 'Code Copied';
55+
setTimeout(() => (copyBtnR.innerText = _prvText), 2 * 1000, _prvText);
56+
} else {
57+
navigator.clipboard.writeText(linearGradientText.value);
58+
copyBtn.innerText = 'Code Copied';
59+
setTimeout(() => (copyBtn.innerText = _prvText), 2 * 1000, _prvText);
60+
}
61+
};
62+
63+
/*
64+
* linear Gradient Side------
65+
*/
66+
colorsInputs.forEach((_input) =>
67+
_input.addEventListener('input', () => {
68+
generateGradient(false);
69+
})
70+
);
71+
72+
directionDropDown.addEventListener('change', () => {
73+
generateGradient(false);
74+
});
75+
76+
refreshBtn.addEventListener('click', () => {
77+
generateGradient(true);
78+
});
79+
80+
copyBtn.addEventListener('click', () => {
81+
copyCode(false);
82+
});
83+
84+
/**
85+
* Radial Gradient Side----
86+
*/
87+
colorsInputsRadial.forEach((_input) =>
88+
_input.addEventListener('input', () => {
89+
generateGradient(false, true);
90+
})
91+
);
92+
93+
directionDropDownRadial.addEventListener('change', () => {
94+
generateGradient(false, true);
95+
});
96+
97+
refreshBtnR.addEventListener('click', () => {
98+
generateGradient(true, true);
99+
});
100+
101+
copyBtnR.addEventListener('click', () => {
102+
copyCode(true);
103+
});

‎GradientColor/style.css‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
2+
3+
:root {
4+
--background-color-linear: linear-gradient(#000, #d8d7d7, #fff);
5+
--background-color: #fff;
6+
--first-gradiant-color: linear-gradient(to left top, #977dfe, #6878ff);
7+
--first-gradiant-color-radial: radial-gradient(#977dfe, #6878ff);
8+
--btn-bg-color-1: #6c757d;
9+
--btn-bg-color-2: #826cff;
10+
--border-color-1: #aaa;
11+
--font-color-1: #333;
12+
--font-color-2: #ccc;
13+
}
14+
15+
* {
16+
margin: 0;
17+
padding: 0;
18+
box-sizing: border-box;
19+
font-family: 'Poppins', sans-serif;
20+
}
21+
22+
body {
23+
display: flex;
24+
align-items: center;
25+
justify-content: center;
26+
min-height: 100vh;
27+
background: var(--background-color-linear);
28+
}
29+
30+
.container {
31+
display: flex;
32+
column-gap: 50px;
33+
}
34+
35+
.wrapper {
36+
width: 450px;
37+
padding: 25px;
38+
border-radius: 7px;
39+
background: var(--background-color);
40+
}
41+
42+
.wrapper .gradient-box {
43+
width: 100%;
44+
height: 220px;
45+
border-radius: 7px;
46+
background: var(--first-gradiant-color);
47+
}
48+
49+
.wrapper .row {
50+
display: flex;
51+
margin: 20px 0;
52+
justify-content: space-between;
53+
}
54+
55+
.row :where(.column, button) {
56+
width: calc(100% / 2 - 10px);
57+
}
58+
59+
.options p {
60+
font-size: 1.12rem;
61+
margin-bottom: 8px;
62+
}
63+
64+
.options .select-box {
65+
border-radius: 5px;
66+
padding: 0px 5px;
67+
border: 1px solid var(--border-color-1);
68+
}
69+
70+
.select-box select {
71+
cursor: pointer;
72+
margin: 5px 5px;
73+
border: none;
74+
outline: none;
75+
font-size: 1.12rem;
76+
background: none;
77+
}
78+
79+
.options .colors {
80+
margin-left: 60px;
81+
}
82+
.colors input {
83+
height: 41px;
84+
width: calc(100% / 2 - 20px);
85+
}
86+
.colors input:last-child {
87+
margin-left: 6px;
88+
}
89+
.wrapper textarea {
90+
width: 100%;
91+
color: var(--font-color-1);
92+
resize: none;
93+
font-size: 1.05rem;
94+
border-radius: 5px;
95+
padding: 10px 15px;
96+
border: 1px solid var(--font-color-2);
97+
}
98+
.buttons button {
99+
color: var(--background-color);
100+
cursor: pointer;
101+
padding: 15px 0;
102+
font-size: 1.09rem;
103+
border: none;
104+
outline: none;
105+
border-radius: 5px;
106+
margin: 0 0 -15px;
107+
}
108+
.buttons .refresh {
109+
background: var(--btn-bg-color-1);
110+
}
111+
.buttons .copy {
112+
background: var(--btn-bg-color-2);
113+
}
114+
115+
.gradient-box.radial {
116+
background: var(--first-gradiant-color-radial);
117+
}

‎ToDoList/images/check.png‎

3.94 KB
Loading

‎ToDoList/images/uncheck.png‎

3.76 KB
Loading

‎ToDoList/index.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link
7+
rel="stylesheet"
8+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"
9+
/>
10+
<link
11+
rel="stylesheet"
12+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"
13+
/>
14+
<link rel="stylesheet" href="style.css" />
15+
<script defer src="script.js"></script>
16+
<title>To Do List - App</title>
17+
</head>
18+
<body>
19+
<div class="container">
20+
<div class="todo-app">
21+
<h2>
22+
To Do List<span class="material-symbols-outlined icon"> fact_check </span>
23+
</h2>
24+
<div class="row">
25+
<input type="text" id="input-box" placeholder="Add your text" /><button
26+
onclick="addTask()"
27+
>
28+
Add
29+
</button>
30+
</div>
31+
<ul id="list-container">
32+
<!-- <li class="checked">Task 1</li>
33+
<li>Task 2</li>
34+
<li>Task 3</li> -->
35+
</ul>
36+
</div>
37+
</div>
38+
</body>
39+
</html>

‎ToDoList/script.js‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
const inptBox = document.getElementById('input-box');
2+
const listContainer = document.getElementById('list-container');
3+
4+
// List of ToDo's
5+
let toDoLists = [];
6+
7+
// Create task
8+
const creatList = (_value) => {
9+
const li = document.createElement('li');
10+
li.innerHTML = _value;
11+
const icon = `<span class="material-symbols-outlined" data-index=${toDoLists.length}>delete</span>`;
12+
li.insertAdjacentHTML('beforeend', icon);
13+
return li;
14+
};
15+
16+
// Add task
17+
const addTask = () => {
18+
if (inptBox.value === '') {
19+
alert('You must write somethings!');
20+
} else {
21+
toDoLists.push(inptBox.value);
22+
saveDate();
23+
listContainer.appendChild(creatList(inptBox.value));
24+
inptBox.value = '';
25+
}
26+
};
27+
28+
// Add button listener
29+
listContainer.addEventListener(
30+
'click',
31+
function (e) {
32+
if (e.target.tagName === 'LI') {
33+
e.target.classList.toggle('checked');
34+
} else if (e.target.tagName === 'SPAN') {
35+
e.target.parentElement.remove();
36+
toDoLists.splice(e.target.dataset.index - 1, 1);
37+
saveDate();
38+
}
39+
},
40+
false
41+
);
42+
43+
// Save task on storage
44+
const saveDate = () => {
45+
localStorage.setItem('ToDoList', JSON.stringify(toDoLists));
46+
};
47+
48+
// fetch task from storage
49+
window.addEventListener('load', () => {
50+
const data = localStorage.getItem('ToDoList');
51+
if (!data) return;
52+
toDoLists = [...JSON.parse(data)];
53+
toDoLists.map((list) => listContainer.appendChild(creatList(list)));
54+
});

0 commit comments

Comments
 (0)