问题描述
我已经完成了我的项目,在上传到 GitHub 后注意到很多东西没有正确加载。第一个问题不是加载 vanilla js,而是通过弄乱目录在 html 中的链接方式快速解决了这个问题。现在我有一个不加载图像的错误。我得到一个 error 说明:
获取https://rickypoolay.github.io/images/bg-mobile-dark.jpg
我假设我的问题与图像相同。我在 scss 中创建了变量,并在每个主题的不同类中使用它们。任何帮助表示赞赏!
Live Server View(应该看起来像)
原生 JavaScript/SCSS/HTML
'use strict';
//Counter Variables
let taskCounter = 0;
//DOM Elements
const body = document.querySelector('body');
const inputField = document.querySelector('.input');
const tasksContainer = document.querySelector('.tasks-container ul');
const themeSwitchIMG = document.querySelector('.theme-switch');
const taskSpan = document.querySelector('.task-counter span');
const btnClearCompleted = document.querySelector('.clear-completed');
const btnFilters = document.querySelectorAll('.filter-btn');
let inputValue;
let label;
let check;
//Cache Memory
//Local Storage Theme
const theme = localStorage.getItem('theme');
if (theme) {
body.classList.add(theme);
if (theme == 'light') {
themeSwitchIMG.src = 'images/icon-moon.svg';
} else {
themeSwitchIMG.src = 'images/icon-sun.svg';
localStorage.setItem('theme','dark');
}
} else {
body.classList.add('dark');
}
// Functions
//Switch Theme
const themeSwitch = function() {
if (!body.classList.contains('light')) {
//TO LIGHT
body.classList.replace('dark','light');
localStorage.setItem('theme','light');
themeSwitchIMG.src = 'images/icon-moon.svg'
} else {
//TO DARK
body.classList.replace('light','dark');
localStorage.setItem('theme','dark');
themeSwitchIMG.src = 'images/icon-sun.svg'
}
}
//Task is created
const createTask = function(e) {
//Grab the input value of User
inputValue = inputField.value;
if (inputValue.trim().length >= 1 && e.key === 'Enter' || e.key === 'enter') {
taskCounter = document.querySelectorAll('.not-completed').length + 1;
//Creating Task Container
const createtodoDiv = document.createElement("li");
createtodoDiv.classList.add('task-style','task',`task${taskCounter}`,'not-completed');
tasksContainer.appendChild(createtodoDiv);
//Creating CheckBox
const createCheckBox = document.createElement("input");
createCheckBox.type = 'checkBox';
createCheckBox.classList.add(`check${taskCounter}`)
createtodoDiv.appendChild(createCheckBox);
//Todo Name/Label
const createLabel = document.createElement("label");
createLabel.innerText = inputValue;
createLabel.classList.add(`label${taskCounter}`);
createtodoDiv.appendChild(createLabel);
//Create X img
const createDeleteImg = document.createElement('img');
createDeleteImg.src = './images/icon-cross.svg';
createDeleteImg.classList.add('cross-style',`cross${taskCounter}`);
createtodoDiv.appendChild(createDeleteImg);
//Add Eventlistener to Created Task for completion or deletion
createLabel.addEventListener('click',function() {
if (createtodoDiv.classList.contains('not-completed')) {
createLabel.style.textdecoration = 'line-through';
createCheckBox.checked = true;
createtodoDiv.classList.replace('not-completed','completed');
taskCounter--;
taskSpan.innerHTML = taskCounter;
} else {
createLabel.style.textdecoration = 'none';
createCheckBox.checked = false;
createtodoDiv.classList.replace('completed','not-completed');
taskCounter++;
taskSpan.innerHTML = taskCounter;
}
});
createDeleteImg.addEventListener('click',function() {
if (!createtodoDiv.classList.contains('completed')) {
tasksContainer.removeChild(createtodoDiv);
taskCounter--;
taskSpan.innerHTML = taskCounter;
} else {
tasksContainer.removeChild(createtodoDiv);
}
});
//Empty the Input Value of user
inputField.value = '';
//Set Items left
taskSpan.innerHTML = taskCounter;
}
}
//Clear Completed Tasks
const clearCompleted = function() {
const listItems = document.querySelectorAll('.task');
for (let i = 0; i < listItems.length; i++) {
if (listItems[i].classList.contains('completed')) {
tasksContainer.removeChild(listItems[i]);
};
}
}
//Filter Tasks
const taskFilter = function() {
const listItems = document.querySelectorAll('.task');
const btnAll = btnFilters[0];
const btnActive = btnFilters[1];
const btnCompleted = btnFilters[2];
//If Active is selected
if (this.innerText.includes("Active")) {
btnAll.classList.remove('filter-select');
btnActive.classList.add('filter-select');
btnCompleted.classList.remove('filter-select');
for (let i = 0; i < listItems.length; i++) {
if (listItems[i].classList.contains('completed')) {
listItems[i].style.display = 'none';
} else {
listItems[i].style.display = 'flex';
};
};
//If Completed Is Selected
} else if (this.innerText.includes("Completed")) {
btnAll.classList.remove('filter-select');
btnActive.classList.remove('filter-select');
btnCompleted.classList.add('filter-select');
for (let i = 0; i < listItems.length; i++) {
if (!listItems[i].classList.contains('completed')) {
listItems[i].style.display = 'none';
} else {
listItems[i].style.display = 'flex';
};
}
//If All is selected
} else if (this.innerText.includes('All')) {
btnAll.classList.add('filter-select');
btnActive.classList.remove('filter-select');
btnCompleted.classList.remove('filter-select');
for (let i = 0; i < listItems.length; i++) {
listItems[i].style.display = 'flex';
}
}
}
//Adding Event Listeners
for (let i = 0; i < 3; i++) {
btnFilters[i].addEventListener('click',taskFilter);
};
btnClearCompleted.addEventListener('click',clearCompleted);
themeSwitchIMG.addEventListener('click',themeSwitch);
inputField.addEventListener('keyup',createTask);
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap');
//Breakpoints
@mixin breakpoint($point) {
@if point==desktop {
@media (min-width: 70em) {
@content;
}
}
@else if point==laptop {
@media (min-width: 64em) {
@content;
}
}
@else if point==tablet {
@media (min-width: 50em) {
@content;
}
}
@else if point==phablet {
@media (min-width: 37.5em) {
@content;
}
}
@else if point==mobileonly {
@media (max-width: 37.5em) {
@content;
}
}
}
* {
margin: 0;
Box-sizing: border-Box;
padding: 0;
font-family: 'Josefin Sans';
color: white;
user-select: none;
}
:root {
//Dark
--bodyBackgroundDark: #161621;
--taskContainersDark: rgb(37,39,60);
--textColorDark: hsl(236,9%,61%);
--textColorCrossedDark: hsl(233,11%,84%);
--checkColorFilterLight: brightness(100%);
--inputColor: #fff;
//Light
--bodyBackgroundLight: #e6e6e6;
--taskContainersLight: #fff;
--textColorLight: hsl(236,61%);
--textColorCrossedLight: hsl(233,84%);
--checkColorFilterLight: brightness(0%);
--inputColor: hsl(236,61%);
}
//Color Themes
.light {
--bgColor: var(--bodyBackgroundLight);
--bgTasks: var(--taskContainersLight);
--bgImage: url('images/bg-mobile-light.jpg');
--checkColor: brightness(0%);
}
.dark {
--bgColor: var(--bodyBackgroundDark);
--bgTasks: var(--taskContainersDark);
--bgImage: url('images/bg-mobile-dark.jpg');
--checkColor: brightness(100%);
}
//Body
body {
background-image: var(--bgImage);
background-repeat: no-repeat;
background-size: 100vw 12em;
background-color: var(--bgColor);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
transition: all .5s ease-in-out;
}
//Main Container of App
.container {
position: absolute;
top: 2em;
min-width: 20em;
height: 45.5em;
animation: fadeInUp .5s ease-in-out forwards;
}
//Header
.header {
display: flex;
justify-content: space-between;
align-items: center;
.theme-switch {
width: 1.5em;
height: 1.5em;
cursor: pointer;
}
}
.todo-header {
letter-spacing: .25em;
}
//Global Task Style
.task-style {
transition: all .5s ease-in-out;
display: flex;
width: 100%;
height: 3em;
background-color: var(--bgTasks);
align-items: center;
border-bottom: 1px solid #38394a;
.cross-style {
width: .75em;
margin: 0 1em;
cursor: pointer;
}
input[type="checkBox"] {
position: absolute;
appearance: none;
left: 1.4em;
z-index: 5;
}
label {
position: relative;
margin-left: 4em;
color: hsl(236,61%);
font-size: .75rem;
font-weight: 400;
width: 100%;
cursor: pointer;
text-decoration: none;
user-select: text;
}
label::before {
content: "";
background-position: center;
background-size: 10px 10px;
background-repeat: no-repeat;
width: 1.15em;
height: 1.15em;
left: -2.05em;
top: -.25em;
position: absolute;
border: 1px solid #38394a;
border-radius: 100%;
font-size: 1rem;
}
label::after {
content: "";
background: url(/images/icon-check.svg);
background-position: center;
background-size: 10px 10px;
background-repeat: no-repeat;
filter: var(--checkColor);
width: 1.15em;
height: 1.15em;
left: -2em;
top: -.2em;
position: absolute;
border-radius: 100%;
font-size: 1rem;
z-index: 2;
transform: scale(0) rotateZ(180deg);
transition: all .3s cubic-bezier(.54,.01,1.49);
}
input[type='checkBox']:checked+label::after {
transform: scale(1) rotateZ(0deg);
}
}
// Input Field Task Bar
.task-input-container {
transition: all .5s ease-in-out;
margin-top: 2em;
border-radius: 5px;
border-bottom: hidden;
.doneInput {
appearance: none;
border: solid 1px;
border-radius: 100%;
border-color: #38394a;
width: 1.75em;
height: 1.5em;
margin-left: 1.25em;
background-color: transparent;
}
.input {
background-color: transparent;
border-color: transparent;
height: 100%;
width: 100%;
font-size: .75rem;
font-weight: 400;
;
color: var(--inputColor);
margin-left: .75em;
&::placeholder {
color: hsl(236,61%);
}
&:focus {
outline: none;
}
}
}
// Tasks Container
.tasks-container {
transition: all .5s ease-in-out;
width: 100%;
height: 25em;
background-color: var(--bgTasks);
margin-top: 1em;
border-radius: 5px 5px 0 0;
overflow: auto;
}
.tasks-bottom-container {
transition: all .5s ease-in-out;
border-radius: 0 0 5px 5px;
padding: 2em 2em;
border: none;
border-top: 1px solid #38394a;
justify-content: space-between;
font-size: .75em;
.task-counter {
span {
color: rgb(88,91,114);
}
}
p {
color: rgb(88,114);
}
.clear-completed {
cursor: pointer;
}
}
#desktop-bottom {
transition: all .5s ease-in-out;
border-radius: 0 0 5px 5px;
padding: 2em 2em;
border: none;
border-top: 1px solid #38394a;
justify-content: space-between;
font-size: .75em;
p {
color: rgb(88,114);
}
span {
color: rgb(88,114);
}
h4 {
color: rgb(88,114);
}
}
//Bottom Floating Container
.footer {
transition: all .5s ease-in-out;
border: none;
border-radius: 5px;
margin-top: 1em;
justify-content: space-around;
padding: 0 3em;
h4 {
font-weight: 400;
color: rgb(88,114);
}
.filter-btn {
cursor: pointer;
}
.filter-select {
color: #3c7af7;
}
}
//Animation
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(2.5em);
}
to {
opacity: 1;
transform: none;
}
}
.completedAnim {
transform: translateX(5em);
}
//Active Classes
.hidden {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="styles/css/style.css">
<title>Frontend Mentor | Todo app</title>
<!-- Feel free to remove these styles or customise in your own stylesheet ? -->
</head>
<body>
<!-- Header Image Section -->
<div class="container">
<!-- Header -->
<div class="header">
<h1 class='todo-header'>Todo</h1>
<img class="theme-switch" src="./images/icon-moon.svg" alt="sun">
</div>
<!-- Create Task Input-->
<div class="task-style task-input-container">
<input type="button" name="" class="doneInput">
<input class="input" type="text" placeholder="Create a new todo...">
</div>
<div class="tasks-container">
<ul>
</ul>
</div>
<div class='tasks-bottom-container task-style' id='mobile-bottom'>
<p class='task-counter'><span>0</span> Items left</p>
<p class='clear-completed'>Clear Completed</p>
</div>
<!-- <div class="task-bottom-container task-style" id='desktop-bottom'>
<p class='task-counter'><span>0</span> Items left</p>
<h4 class="filter-btn all-btn filter-select">All</h4>
<h4 class="filter-btn active-btn">Active</h4>
<h4 class="filter-btn completed-btn">Completed</h4>
<p class='clear-completed'>Clear Completed</p>
</div> -->
<div class="footer task-style">
<h4 class="filter-btn all-btn filter-select">All</h4>
<h4 class="filter-btn active-btn">Active</h4>
<h4 class="filter-btn completed-btn">Completed</h4>
</div>
</div>
</body>
<script src="./index.js"></script>
</html>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)