Skip to content

Commit

Permalink
lab 5
Browse files Browse the repository at this point in the history
  • Loading branch information
Lofranlof committed Nov 19, 2023
1 parent 4c531f0 commit 58c5cb3
Show file tree
Hide file tree
Showing 10 changed files with 182 additions and 18 deletions.
100 changes: 96 additions & 4 deletions CSS/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -322,25 +322,25 @@ th {
.table_container th {
font-size: 1.5rem;
margin-top: 10px;
color: #d75d10;
color: #ffffff;
}

.table_container tbody tr:nth-child(even) td {
background-color: #dce8f2;
background-color: #6e6e6e;
}

.table_container tbody tr:nth-child(odd) td {
background-color: dimgray;
}

.block_menu_news {
background-color: #dce8f2;
background-color: #a8a8a8;
padding: 20px;
text-align: center;
}

.block_menu_news h2 {
color: #070c11;
color: #000000;
font-size: 2.5rem;
}

Expand All @@ -350,4 +350,96 @@ a:hover {

a.active {
color: #9c1f1fdd;
}

.container{
width: 100vw;
min-height: 100vh;
background: linear-gradient(90deg, #bebebe, #777777);

}

.todo {
width: 50vw;
max-width: 540px;
min-width: 200px;
background: #f9f9f9;
margin: 100px auto 20px;
padding: 40px 30px 70px;
border-radius: 20px;

}
.todo h2 {
display: flex;
align-items: center;
text-align: center;
margin-bottom: 20px;
}
.row{
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 30px;
padding-left: 20px;
margin-bottom: 25px;
background: #ededed
}
input {
flex: 1;
border: none;
outline: none;
background: transparent;
padding: 10px;
}
button {
border: none;
outline: none;
padding: 16px 50px;
background: #5f5959;
color: #ffffff;
font-size: 16px;
cursor: pointer;
border-radius: 40px;
}
ul.todoList li {
list-style: none;
font-size: 17px;
padding: 12px 8px 12px 50px;
user-select: none;
cursor: pointer;
position: relative
}
ul.todoList li::before{
content:'';
position: absolute;
height: 28px;
width: 28px;
background-image: url(/IMG/checkbox_uncheked.png);
background-size: cover;
background-position: center;
top: 8px;
left: 8px;
}
ul.todoList li.checked{
color: #727272;
text-decoration: line-through;
}
ul.todoList li.checked::before {
background-image: url(/IMG/checkbox_cheked.png);
}
ul.todoList li span {
position: absolute;
right: 0;
top: 5px;
width: 40px;
height: 40px;
font-size: 22px;
color: #555;
line-height: 40px;
text-align: center;
border-radius: 50%;
}
ul.todoList li span:hover {
background: #edeef0;

}
Binary file added IMG/checkbox_cheked.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added IMG/checkbox_uncheked.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
38 changes: 38 additions & 0 deletions JS/todoList.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
const inputBox = document.getElementById("input-box")
const listContainer = document.getElementById("list-container")

function addTask() {
if(inputBox.value === ""){
alert("You have to write something!");
}
else {
let li = document.createElement("li");
li.innerHTML = inputBox.value;
listContainer.appendChild(li);
let span = document.createElement("span");
span.innerHTML = "\u00d7";
li.appendChild(span);
}
inputBox.value = "";
saveData();
}

listContainer.addEventListener("click", function(e){
if(e.target.tagName === "LI") {
e.target.classList.toggle("checked");
saveData();
}
else if (e.target.tagName === "SPAN"){
e.target.parentElement.remove()
saveData();
}
}, false);

function saveData() {
localStorage.setItem("data", listContainer.innerHTML);
}

function showData(){
listContainer.innerHTML = localStorage.getItem("data");
}
showData();
4 changes: 2 additions & 2 deletions achievements.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@
<body>
<header class="header">
<h1 class="header__title">Achievements</h1>
<nav class="header__nav"><a href="index.html">General</a> <a href="scoreboard.html">PRScoreboard</a> <a href="achievements.html" class="active">Achievements</a> <a href="resources.html">Resources</a> <a href="profile.html">Profile</a></nav>
<nav class="header__nav"><a href="index.html">General</a> <a href="scoreboard.html">PRScoreboard</a> <a href="achievements.html" class="active">Achievements</a> <a href="resources.html">Resources</a> <a href="profile.html">Profile</a> <a href="todo.html">ToDoList</a></nav>
</header>
<main>
<main class="body">
</main>
<footer>
</footer>
Expand Down
2 changes: 1 addition & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<body>
<header class="header">
<h1 class="header__title">Welcome to YeahBuddy!</h1>
<nav class="header__nav"><a href="index.html" class="active">General</a> <a href="scoreboard.html">PRScoreboard</a> <a href="achievements.html">Achievements</a> <a href="resources.html">Resources</a> <a href="profile.html">Profile</a></nav>
<nav class="header__nav"><a href="index.html" class="active">General</a> <a href="scoreboard.html">PRScoreboard</a> <a href="achievements.html">Achievements</a> <a href="resources.html">Resources</a> <a href="profile.html">Profile</a> <a href="todo.html">ToDoList</a></nav>
</header>
<main class="body">
<section class="body__section">
Expand Down
4 changes: 2 additions & 2 deletions profile.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@
<body>
<header class="header">
<h1 class="header__title">Profile</h1>
<nav class="header__nav"><a href="index.html">General</a> <a href="scoreboard.html">PRScoreboard</a> <a href="achievements.html">Achievements</a> <a href="resources.html">Resources</a> <a href="profile.html" class="active">Profile</a></nav>
<nav class="header__nav"><a href="index.html">General</a> <a href="scoreboard.html">PRScoreboard</a> <a href="achievements.html">Achievements</a> <a href="resources.html">Resources</a> <a href="profile.html" class="active">Profile</a> <a href="todo.html">ToDoList</a></nav>
</header>
<main>
<main class="body">
</main>
<footer>
</footer>
Expand Down
14 changes: 7 additions & 7 deletions resources.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,14 @@
<body>
<header class="header">
<h1>Learning Resources / Cool channels</h1>
<nav class="header__nav"><a href="index.html">General</a> <a href="scoreboard.html">PRScoreboard</a> <a href="achievements.html">Achievements</a> <a href="resources.html" class="active">Resources</a> <a href="profile.html">Profile</a></nav>
<nav class="header__nav"><a href="index.html">General</a> <a href="scoreboard.html">PRScoreboard</a> <a href="achievements.html">Achievements</a> <a href="resources.html" class="active">Resources</a> <a href="profile.html">Profile</a> <a href="todo.html">ToDoList</a></nav>
</header>
<main>
<h2>YouTube Channels</h2>
<ul></ul>
<li><a href="https://www.youtube.com/@RenaissancePeriodization">Renaissance Periodization</a></li>
<li><a href="https://www.youtube.com/@sam_sulek">Sam Sulek (just for the memes)</a></li>
<li><a href="https://www.youtube.com/@BaldOmniMan">Bald Omni-Man</a></li>
<main class="body">
<h2 class="body__section__title">YouTube Channels</h2>
<ul class="body__list">
<li class="body__list__item"><a href="https://www.youtube.com/@RenaissancePeriodization">Renaissance Periodization</a></li>
<li class="body__list__item"><a href="https://www.youtube.com/@sam_sulek">Sam Sulek (just for the memes)</a></li>
<li class="body__list__item"><a href="https://www.youtube.com/@BaldOmniMan">Bald Omni-Man</a></li>
</ul>
</main>
<footer>
Expand Down
4 changes: 2 additions & 2 deletions scoreboard.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@
<body>
<header class="header">
<h1 class="header__title">Scoreboard</h1>
<nav class="header__nav"><a href="index.html">General</a> <a href="scoreboard.html" class="active">PRScoreboard</a> <a href="achievements.html">Achievements</a> <a href="resources.html">Resources</a> <a href="profile.html">Profile</a></nav>
<nav class="header__nav"><a href="index.html">General</a> <a href="scoreboard.html" class="active">PRScoreboard</a> <a href="achievements.html">Achievements</a> <a href="resources.html">Resources</a> <a href="profile.html">Profile</a> <a href="todo.html">ToDoList</a></nav>
</header>
<main>
<main class="body">
</main>
<footer>
</footer>
Expand Down
34 changes: 34 additions & 0 deletions todo.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<link href="CSS/style.css" rel="stylesheet">
<title>YeahBuddy!</title>
</head>
<body>
<header class="header">
<h1 class="header__title">ToDo List</h1>
<nav class="header__nav"><a href="index.html">General</a> <a href="scoreboard.html">PRScoreboard</a> <a href="achievements.html">Achievements</a> <a href="resources.html">Resources</a> <a href="profile.html">Profile</a> <a href="todo.html" class="active">ToDoList</a></nav>
</header>
<main class="body">
<div class="container">
<div class="todo">
<h2>ToDo List</h2>
<div class="row">
<input id="input-box" type="text" placeholder="Type your task">
<button onclick="addTask()">Add task</button>
</div>
<ul class="todoList" id="list-container">
<!-- <li class="checked">Task 1</li>
<li>Task 2</li>
<li>Task 3</li> -->
</ul>
</div>
</div>
</main>
<script src="JS/todoList.js"></script>
<footer>
</footer>
</body>
</html>

0 comments on commit 58c5cb3

Please sign in to comment.