Skip to content

Commit e5118c2

Browse files
solygambassolygambas
committed
add sortable list styling
1 parent 8e31f1b commit e5118c2

File tree

5 files changed

+174
-5
lines changed

5 files changed

+174
-5
lines changed

‎73-lyrics search app/style.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ body {
1616
}
1717

1818
header {
19-
background: url('https://images.unsplash.com/photo-1495305379050-64540d6ee95d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center/cover;
19+
background: #040404 url('https://images.unsplash.com/photo-1495305379050-64540d6ee95d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center/cover;
2020
color: rgba(255,255,255,0.95);
2121
display: flex;
2222
flex-direction: column;

‎76-new year countdown/style.css

+4-4
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
}
66

77
body {
8-
background: url('https://images.unsplash.com/photo-1513279922550-250c2129b13a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center/cover;
8+
background: #0b3747 url('https://images.unsplash.com/photo-1513279922550-250c2129b13a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center/cover;
99
color: rgba(255,255,255,0.87);
1010
font-family: "PT Sans Narrow", sans-serif;
1111
display: flex;
@@ -34,11 +34,11 @@ body * {
3434

3535
h1 {
3636
font-size: 2.75rem;
37-
margin: -140px 0 40px;
37+
margin: -100px 0 30px;
3838
}
3939

4040
.year {
41-
font-size: 12.5rem;
41+
font-size: 12rem;
4242
z-index: -1;
4343
opacity: 0.2;
4444
position: absolute;
@@ -73,7 +73,7 @@ h1 {
7373

7474
@media (min-width: 640px) {
7575
h1 {
76-
font-size: 3.75rem;
76+
font-size: 3.5rem;
7777
}
7878
.time {
7979
margin: 1rem;

‎77-sortable list/index.html

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!-- Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API -->
2+
3+
<!DOCTYPE html>
4+
<html lang="en">
5+
<head>
6+
<meta charset="UTF-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<link
9+
rel="stylesheet"
10+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
11+
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
12+
crossorigin="anonymous"
13+
/>
14+
<link rel="stylesheet" href="style.css" />
15+
<title>Top 10 Richest People</title>
16+
</head>
17+
<body>
18+
<h1>Top 10 Richest People</h1>
19+
<p>Drag and drop the entries into their corresponding spots</p>
20+
<ul class="draggable-list" id="draggable-list"></ul>
21+
<button id="check" class="check-btn">
22+
Check Order <i class="fas fa-paper-plane"></i>
23+
</button>
24+
<script src="script.js"></script>
25+
</body>
26+
</html>

‎77-sortable list/script.js

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
const draggableList = document.getElementById("draggable-list");
2+
const check = document.getElementById("check");
3+
4+
const richestPeople = [
5+
"Jeff Bezos",
6+
"Bill Gates",
7+
"Bernard Arnault",
8+
"Warren Buffett",
9+
"Larry Ellison",
10+
"Amancio Ortega",
11+
"Mark Zuckerberg",
12+
"Jim Walton",
13+
"Alice Walton",
14+
"S. Robson Walton",
15+
];
16+
17+
const listItems = [];
18+
19+
let dragStartIndex;
20+
21+
function createList() {
22+
const newList = [...richestPeople];
23+
newList
24+
.map((person) => ({ value: person, sort: Math.random() })) // randomize list
25+
.sort((a, b) => a.sort - b.sort) // generate new order
26+
.map((person) => person.value) // retrieve original strings
27+
.forEach((person, index) => {
28+
const listItem = document.createElement("li");
29+
listItem.setAttribute("data-index", index);
30+
listItem.innerHTML = `
31+
<span class="number">${index + 1}</span>
32+
<div class="draggable" draggable="true">
33+
<p class="person-name">${person}</p>
34+
<i class="fas fa-grip-lines"></i>
35+
</div>
36+
`;
37+
listItems.push(listItem);
38+
draggableList.appendChild(listItem);
39+
});
40+
}
41+
42+
// Init
43+
createList();

‎77-sortable list/style.css

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
2+
3+
:root {
4+
--border-color: #e3e5e4;
5+
--background-color: #fff;
6+
--background-secondary-color: #c3c7ca;
7+
--draggable-color: #eaeaea;
8+
--text-color: #34444f;
9+
--right-color: #3ae374;
10+
--wrong-color: #ff3838;
11+
}
12+
13+
* {
14+
box-sizing: border-box;
15+
}
16+
17+
body {
18+
font-family: "Roboto", sans-serif;
19+
background-color: var(--background-color);
20+
display: flex;
21+
flex-direction: column;
22+
align-items: center;
23+
justify-content: flex-start;
24+
height: 100vh;
25+
margin: 0;
26+
}
27+
28+
.draggable-list {
29+
border: 1px solid var(--border-color);
30+
color: var(--text-color);
31+
padding: 0;
32+
list-style-type: none;
33+
}
34+
35+
.draggable-list li {
36+
background-color: var(--background-color);
37+
display: flex;
38+
flex: 1;
39+
}
40+
41+
.draggable-list li:not(:last-of-type) {
42+
border-bottom: 1px solid var(--border-color);
43+
}
44+
45+
.draggable-list .number {
46+
background-color: var(--background-secondary-color);
47+
display: flex;
48+
align-items: center;
49+
justify-content: center;
50+
font-size: 1.75rem;
51+
width: 3.75rem;
52+
height: 3.75rem;
53+
}
54+
55+
.draggable-list li.over .draggable {
56+
background-color: var(--draggable-color);
57+
}
58+
59+
.draggable-list .person-name {
60+
margin: 0 1.25rem 0 0;
61+
}
62+
63+
.draggable-list li.right .person-name {
64+
color: var(--right-color);
65+
}
66+
67+
.draggable-list li.wrong .person-name {
68+
color: var(--wrong-color);
69+
}
70+
71+
.draggable {
72+
cursor: pointer;
73+
display: flex;
74+
align-items: center;
75+
justify-content: space-between;
76+
padding: 1rem;
77+
flex: 1;
78+
}
79+
80+
.check-btn {
81+
background-color: var(--background-secondary-color);
82+
border: none;
83+
color: var(--text-color);
84+
font-size: 1rem;
85+
padding: 0.625rem 1.25rem;
86+
cursor: pointer;
87+
}
88+
89+
.check-btn:active {
90+
transform: scale(0.98);
91+
}
92+
93+
.check-btn:hover {
94+
background-color: var(--text-color);
95+
color: var(--background-color);
96+
}
97+
98+
.check-btn:focus {
99+
outline: none;
100+
}

0 commit comments

Comments
 (0)