Skip to content

Commit

Permalink
+ finish with dark mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@victorpreston
victorpreston committed May 16, 2024
1 parent d38ba7f commit d47d7f4
Show file tree
Hide file tree
Showing 5 changed files with 87 additions and 84 deletions.
Empty file removed css/.gitkeep
View file
Empty file.
138 changes: 61 additions & 77 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,92 +3,76 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- displays site properly based on user's device -->

<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
<meta
name="description"
content="Keep track of your daily tasks by using Todo App"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./images/favicon-32x32.png"
/>
<link rel="stylesheet" href="css/styles.css" />
<link
href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap"
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css"
/>
<link rel="stylesheet" href="./css/reset.css" />
<link rel="stylesheet" href="./css/style.css" />

<title>Frontend Mentor | Todo app</title>
</head>
<body class="body">
<div class="header"></div>
<main>
<div class="content">
<h2 class="content_title">TODO</h2>
<!--Dark Mode Swich -->
<div class="theme-switch-wrapper">
<span class="toggle-icon">
<img class="icon" src="./images/icon-light.svg" alt="" />
</span>
<label class="theme-switch">
<input class="input_darkmode" type="checkbox" />
</label>
</div>
</div>

<form class="addTodo">
<button type="submit" class="btn addNewBtn" aria-label="button">
<span class="plusSign custom_checkbox">+</span>
</button>
<input
class="addNew"
name="add"
type="text"
id="create"
placeholder="Create a new todo..."
aria-label="Create a new todo..."
/>
</form>

<body>
<section class="todo-app light">
<div class="container">
<div class="alert"></div>
<div class="card">
<div>
<ul class="tasks"></ul>
</div>

<div class="task items_left">
<p class="counter">5 items left</p>
<button class="btn clear">Clear Completed</button>
</div>
<header>
<div class="logo">todo</div>
<img src="images/icon-sun.svg" data-theme="light" alt="icon-sun" />
<img
class="available"
src="images/icon-moon.svg"
data-theme="dark"
alt="icon-moon"
/>
</header>
<div class="input-field">
<span class="icon"></span>
<input
type="text"
name="todo"
data-placeholder="Create a new task..."
placeholder="Create a new task..."
/>
</div>

<div class="bottom">
<div class="buttons filter-todos">
<button class="btn all active" value="all">All</button>
<button class="btn activeBtn" value="active">Active</button>
<button class="btn completed" value="completed">Completed</button>
<div class="todo-list">
<ul>
<!-- Todo items Here -->
</ul>
<div class="controls">
<div class="left-items">
<span class="number"></span> items left
</div>
<ul class="filters">
<li class="selected" data-filter="todo">All</li>
<li data-filter="active">Active</li>
<li data-filter="completed">Completed</li>
</ul>
<div class="clear-completed">Clear Completed</div>
</div>
</div>
<div class="note">Drag and drop to reorder list</div>
</div>
<div class="copyright">
Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
>Frontend Mentor</a
>. Coded by
<a
href="https://github.com/victorpreston"
target="_blank"
>victorpreston</a
>.
</div>
<footer class="attribution">
<p class="drag_text">Drag and drop to reorder list</p>
<p class="author">
Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="https://github.com/victorpreston" target="_blank">victorpreston</a>.
</p>
</footer>
</main>

<template id="task-template">
<li class="task">
<input class="task-input" type="checkbox" />
<label>
<span class="custom_checkbox"></span>
</label>
<span class="deleteBtn">
<img class="delete" src="./images/icon-cross.svg" alt="" />
</span>
</li>
</template>

<script src="./js/dark.js"></script>
<script src="./js/todo.js"></script>
</section>
<script src="js/main.js"></script>
<script src="js/dark.js"></script>
</body>
</html>
26 changes: 26 additions & 0 deletions js/dark.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
const themeToggle = document.querySelector('.todo-app header img.available');

themeToggle.addEventListener('click', function() {
const todoApp = document.querySelector('.todo-app');
todoApp.classList.toggle('dark');

todoApp.style.transition = 'background-color 0.5s';

if (todoApp.classList.contains('dark')) {
todoApp.style.backgroundColor = 'var(--dt-very-dark-blue)';
} else {
todoApp.style.backgroundColor = 'var(--lt-very-light-grayish-blue)';
}

// Get the moon icon done: I am new to js anyway, just want to try out everything.
const moonIcon = document.querySelector('.todo-app header img.available');

moonIcon.style.transition = 'transform 0.5s, opacity 0.5s';
moonIcon.style.transform = todoApp.classList.contains('dark') ? 'rotate(180deg)' : 'rotate(0deg)';
moonIcon.style.opacity = '0';

setTimeout(() => {
moonIcon.src = todoApp.classList.contains('dark') ? 'images/icon-sun.svg' : 'images/icon-moon.svg';
moonIcon.style.opacity = '1';
}, 500);
});
Empty file removed js/todo.js
View file
Empty file.
7 changes: 0 additions & 7 deletions styles.css
View file

This file was deleted.

0 comments on commit d47d7f4

Please sign in to comment.