Last active
April 15, 2022 04:54
-
-
Save lyraddigital/1f4ace296fc0bcd1aee6778c376f8ebd to your computer and use it in GitHub Desktop.
Angular Todo Course - YouTube
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
main { | |
width: 100%; | |
min-width: 540px; | |
max-width: 540px; | |
} | |
header { | |
display: flex; | |
justify-content: space-between; | |
align-items: center; | |
margin-top: 7rem; | |
margin-bottom: 5rem; | |
} | |
h1 { | |
text-transform: uppercase; | |
font-size: 4rem; | |
font-weight: 700; | |
letter-spacing: 1.5rem; | |
color: var(--light-color); | |
} | |
#languageLogo { | |
width: 48px; | |
height: 48px; | |
} | |
form { | |
display: flex; | |
justify-content: space-between; | |
column-gap: 10px; | |
background: var(--light-color); | |
padding: 20px; | |
box-shadow: var(--box-shadow-style); | |
border-radius: 5px; | |
} | |
input { | |
flex: 1; | |
font-size: 1.8rem; | |
border: 1px solid transparent; | |
outline: none; | |
background: transparent; | |
} | |
#createTodo { | |
background: var(--alternate-color); | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
width: 30px; | |
height: 30px; | |
color: var(--light-color); | |
border-radius: 100%; | |
border: 1px solid transparent; | |
cursor: pointer; | |
font-size: 2rem; | |
} | |
#createTodo:hover, | |
#createTodo:active { | |
background: var(--alternate-dark-color); | |
} | |
#todoList { | |
background: var(--light-color); | |
box-shadow: var(--box-shadow-style); | |
padding: 20px; | |
margin-top: 25px; | |
border-radius: 5px; | |
} | |
#todoListHeader { | |
display: flex; | |
font-size: 1.4rem; | |
justify-content: space-between; | |
color: var(--default-text-color); | |
padding-bottom: 15px; | |
} | |
#todoFilters { | |
display: flex; | |
column-gap: 10px; | |
list-style: none; | |
} | |
#todoFilters button { | |
font-weight: 700; | |
font-size: 1.4rem; | |
cursor: pointer; | |
background: transparent; | |
border: 1px solid transparent; | |
color: var(--default-text-color); | |
} | |
#todoFilters > li.active > button { | |
color: var(--alternate-color); | |
} | |
#clearCompleted { | |
background: transparent; | |
border: 1px solid transparent; | |
cursor: pointer; | |
color: var(--default-text-color); | |
} | |
#todoFilters > li > button:hover, | |
#clearCompleted:hover { | |
color: var(--filter-hover-color); | |
} | |
#todoListBody { | |
list-style: none; | |
margin-top: 20px; | |
} | |
#todoListBody > li { | |
display: flex; | |
font-size: 1.8rem; | |
column-gap: 8px; | |
align-items: center; | |
padding: 20px 0; | |
border-bottom: 1px solid var(--todo-bottom-line-color); | |
} | |
#todoListBody > li:first-of-type { | |
padding-top: 0; | |
} | |
#todoListBody > li:last-of-type { | |
padding-bottom: 0; | |
border-bottom: none; | |
} | |
#todoListBody .todoStatus { | |
height: 24px; | |
width: 24px; | |
color: var(--light-color); | |
border: 1px solid var(--todo-check-border-color); | |
border-radius: 100%; | |
background: transparent; | |
cursor: pointer; | |
} | |
#todoListBody .todoStatus:hover { | |
border: 1px solid var(--primary-color); | |
} | |
#todoListBody > li { | |
cursor: pointer; | |
} | |
#todoListBody > li.checked .todoStatus { | |
border: 1px solid var(--alternate-color); | |
background: linear-gradient( | |
135deg, | |
var(--alternate-color), | |
var(--alternate-dark-color) | |
); | |
} | |
#todoListBody > li .todoText { | |
flex: 1; | |
} | |
#todoListBody > li.checked .todoText { | |
text-decoration: line-through; | |
} | |
#todoListBody > li .removeTodo { | |
background: transparent; | |
border: none; | |
cursor: pointer; | |
} | |
#todoListBody > li .deleteLogo { | |
opacity: 0; | |
width: 18px; | |
height: 18px; | |
fill: var(--primary-dark-color); | |
transition: opacity 200ms; | |
} | |
#todoListBody > li:hover .deleteLogo { | |
opacity: 1; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<main> | |
<header> | |
<h1>Todo</h1> | |
<img | |
id="languageLogo" | |
src="assets/images/languageLogo.svg" | |
alt="Angular Logo" | |
/> | |
</header> | |
<form> | |
<input | |
type="text" | |
name="todoText" | |
placeholder="Create a new todo..." | |
value="" | |
/> | |
<button type="submit" id="createTodo">+</button> | |
</form> | |
<div id="todoList"> | |
<div id="todoListHeader"> | |
<span>2 items left</span> | |
<ul id="todoFilters"> | |
<li class="active"> | |
<button>All</button> | |
</li> | |
<li> | |
<button>Active</button> | |
</li> | |
<li> | |
<button>Completed</button> | |
</li> | |
</ul> | |
<button id="clearCompleted">Clear Completed</button> | |
</div> | |
<ul id="todoListBody"> | |
<li class="checked"> | |
<button class="todoStatus">✓</button> | |
<span class="todoText">Do Angular course</span> | |
<button class="removeTodo"> | |
<img | |
class="deleteLogo" | |
src="assets/images/deleteTodoLogo.svg" | |
alt="Delete Todo" | |
/> | |
</button> | |
</li> | |
<li> | |
<button class="todoStatus">✓</button> | |
<span class="todoText">Do React course</span> | |
<button class="removeTodo"> | |
<img | |
class="deleteLogo" | |
src="assets/images/deleteTodoLogo.svg" | |
alt="Delete Todo" | |
/> | |
</button> | |
</li> | |
<li> | |
<button class="todoStatus">✓</button> | |
<span class="todoText">Do Vue.js course</span> | |
<button class="removeTodo"> | |
<img | |
class="deleteLogo" | |
src="assets/images/deleteTodoLogo.svg" | |
alt="Delete Todo" | |
/> | |
</button> | |
</li> | |
</ul> | |
</div> | |
</main> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<svg width="2370" height="2500" viewBox="0 0 256 270" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet"> | |
<path d="M127.606.341L.849 44.95 20.88 211.022l106.86 58.732 107.412-59.528L255.175 44.16 127.606.341z" fill="#B3B3B3"/> | |
<path d="M242.532 53.758L127.31 14.466v241.256l96.561-53.441 18.66-148.523z" fill="#A6120D"/> | |
<path d="M15.073 54.466l17.165 148.525 95.07 52.731V14.462L15.074 54.465z" fill="#DD1B16"/> | |
<path d="M159.027 142.898L127.31 157.73H93.881l-15.714 39.305-29.228.54L127.31 23.227l31.717 119.672zm-3.066-7.467l-28.44-56.303-23.329 55.334h23.117l28.652.97z" fill="#F2F2F2"/> | |
<path d="M127.309 23.226l.21 55.902 26.47 55.377h-26.62l-.06 23.189 36.81.035 17.204 39.852 27.967.518-81.981-174.873z" fill="#B3B3B3"/> | |
</svg> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
:root { | |
--primary-color: #42a5f5; | |
--primary-dark-color: #0d47a1; | |
--alternate-color: #dd0031; | |
--alternate-dark-color: #c3002f; | |
--light-color: #fff; | |
--default-text-color: #777; | |
--box-shadow-color: rgba(194, 195, 214, 0.5); | |
--filter-hover-color: #111; | |
--todo-bottom-line-color: rgba(0, 0, 0, 0.1); | |
--todo-check-border-color: #ccc; | |
--box-shadow-style: 30px 30px 50px var(--box-shadow-color); | |
} | |
* { | |
margin: 0; | |
padding: 0; | |
box-sizing: border-box; | |
} | |
html { | |
font-size: 10px; | |
} | |
body { | |
display: grid; | |
justify-content: center; | |
background: linear-gradient( | |
180deg, | |
var(--primary-color), | |
var(--primary-dark-color) | |
); | |
background-repeat: no-repeat; | |
background-size: 100vw 35vh; | |
font-family: Arial, Helvetica, sans-serif; | |
font-size: 1.6rem; | |
color: var(--default-text-color); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment