<div
    class="slide"
    style="
      background-image: url('https://images.unsplash.com/photo-1495467033336-2effd8753d51?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80');
    "
  ></div>

  <div
    class="slide"
    style="
      background-image: url('https://images.unsplash.com/photo-1522735338363-cc7313be0ae0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2689&q=80');
    "
  ></div>

  <div
    class="slide"
    style="
      background-image: url('https://images.unsplash.com/photo-1559087867-ce4c91325525?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80');
    "
  ></div>

<div style="background-color: #2A86BA">
  <h1>Nature flower</h1>
  <p>all in pink</p>
</div>

<div style="background-color: #252E33">
  <h1>Bluuue Sky</h1>
  <p> with it's mountains</p>
</div>

<div style="background-color: #FFB866">
  <h1>Lonely castle</h1>
  <p>in the wilderness</p>
</div>

    <button class="up-button">
      <i class=" iconfont icon-xiajiantou"></i>
    </button>
</div>

*CSS
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}

body{
font-family: ‘Open Sans’, sans-serif;
height: 100vh;
}

.slider-container{
position: relative;
color:white;
width:100vw;
height: 100vh;
overflow: hidden;

}

.left{
position: absolute;
width:35%;
height:100%;
top:0;
left: 0;
transition: transform 0.5s ease-in-out;
}
.left div{
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.left h1{
margin-top: -30px;
margin-bottom: 10px;
}

.right{
position: absolute;
top:0;
left:35%;
height:100%;
width: 65%;
transition: transform 0.5s ease-in-out;
}
.right div{
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}

button{
background-color: #fff;
position: absolute;
top:50%;
left: 35%;
padding: 10px 10px;
font-size: 18px;
border: none;
cursor: pointer;
z-index: 100;
}

.up-button{
transform: translateY(-100%);
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}

.down-button{
transform: translateX(-100%);
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}

JS
const sliderContainer = document.querySelector(“.slider-container”);
const leftBtn = document.querySelector(‘.up-button’);
const rightBtn = document.querySelector(‘.down-button’);
const sliderRight = document.querySelector(‘.right’);
const sliderLeft = document.querySelector(‘.left’);
const slidersLength = sliderRight.querySelectorAll(‘div’).length;

let sliderActiveIndex=0;
sliderRight.style.top = ${-(slidersLength - 1) * 100}vh;

leftBtn.addEventListener(‘click’, ()=>changeSlide(‘up’));
rightBtn.addEventListener(‘click’, ()=>changeSlide(‘down’));

const changeSlide=(direnction)=>{
const sliderHeight = sliderContainer.clientHeight;
if(direnction===’up’){
sliderActiveIndex++;
if(sliderActiveIndex>slidersLength-1){
sliderActiveIndex=0;
}
}else if(direnction===”down”){
sliderActiveIndex–;
if(sliderActiveIndex<0){
sliderActiveIndex=slidersLength-1;
}

}

sliderRight.style.transform = translateY(${sliderActiveIndex*sliderHeight}px);
sliderLeft.style.transform = translateY(-${sliderActiveIndex*sliderHeight}px);

}

1
2
3
4
5

### toast notification

演示参考地址：https://50projects50days.com/projects/toast-notification/

HTML**

****CSS8
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}

body{
  background-color: rgb(150, 50, 243);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  position: relative;
}

button{
padding: 15px 7px;
border-radius: 6px;
border: 0ch;
color:rgb(76, 15, 145);
text-align: center;
font-weight: bold;
cursor: pointer;
}

button:focus{
outline: none;
}

button:focus{
transform: scale(0.98);
}

#toasts{
position: fixed;
bottom: 10px;
right: 10px;
display: flex;
flex-direction: column;
align-items: flex-end;
background-color: rgb(209, 69, 13);
}

.toast{
background-color: #fff;
border-radius: 5px;
padding: 1rem 2rem;
margin:0.5rem;
}
.toast.info{
color:rebeccapurple;
}

.toast.success{
color: green;
}

.toast.error{
color: red;
}

JS
const button = document.querySelector(‘button’);
const toasts = document.getElementById(‘toasts’);

const message = [‘Message One’, ‘Message Two’ ,’Message three’, ‘Message Four’];
const types = [‘info’, ‘success’, ‘error’];

button.addEventListener(‘click’, ()=>createNotification())

function createNotification(type=null, message=null){
const notif = document.createElement(‘div’);
notif.classList.add(‘toast’);
notif.classList.add(type ? type : getRandomType());
notif.innerText =message ? message: getRandomMessage();
toasts.appendChild(notif);

setTimeout(() => {
notif.remove();
}, 3000);
}

function getRandomType(){
return types[Math.floor(Math.random()*types.length)];
}

function getRandomMessage(){
return message[Math.floor(Math.random()*message.length)]
}

1
2
3

### GitHub Profile

**HTML

CSS*******
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body{
background-color: rgba(37, 22, 19, 0.795);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height:100vh;
margin: 0;
overflow: hidden;

}

input{
padding: 15px 10px;
width: 700px;
border-radius: 7px;
border: none;
background-color: rgb(95, 28, 121);
margin-bottom: 20px;
box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05),
0 15px 40px rgba(0, 0, 0, 0.1);
color:white
}
input::placeholder{
color:aliceblue
}

input:focus{
outline: none;
}

.card{
max-width: 800px;
background-color: #4c2885;
border-radius: 20px;
box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05),
0 15px 40px rgba(0, 0, 0, 0.1);
margin: 0.5rem 0rem;
padding: 3rem;
display: flex;
}

.avatar{
border-radius: 50%;
border: 10px solid #2a2a72;
height: 150px;
width: 150px;
}

.user-info{
color:#eee;
margin-left: 2rem;
}

.user-info p{
border-bottom: 15px;
}
.user-info h2{
margin-bottom: 5px;
}

.user-info ul{
list-style-type: none;
display: flex;
justify-content: space-between;
padding: 0;
max-width: 400px;
margin-bottom: 5px;
}

.user-info ul li{
display: flex;
align-items: center;
}

.user-info ul li strong{
font-size: 0.9rem;
margin-left: 0.5rem;
}

.repo{
text-decoration: none;
color: #fff;
background-color: #212a72;
font-size: 0.7rem;
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
display: inline-block;
}

@media(max-width:500px){
.card{
flex-direction:column;
align-items: center;
}
form{
max-width:400px;
}
}
}

***JS
const APIURL= ‘http://api.github.com/users/'

const main = document.getElementById(‘main’);
const form = document.querySelector(‘.form’);
const search = document.getElementById(‘search’);

async function getUser(username) {
try{
const { data } =await axios(APIURL + username);
createUserCard(data);
getRepos(username);
}catch(error){
if(error.response.status ===404){
createErrorCard(‘查询不到相关信息’);
}
}
}
async function getRepos(username){
try {
const {data} =await axios(APIURL + username+’/repos?sort=created’);
addReposToCard(data);

} catch (error) {
createErrorCard(‘查询错误’);
}
}

function createUserCard(user){
const cardHtml = <div class="card"> <div > <img src="${user.avatar_url}" alt="${user.name}" class="avatar"> </div> <div class="user-info"> <h1>${user.name}</h1> <p> ${user.bio}</p> <ul> <il>${user.followers}<strong>Followers</strong></li> <il>${user.followering}<strong>Followering</strong></li> <il>${user.public_repos}<strong>Repos</strong></li> </ul> <div id="repos"></div> </div> </div>
main.innerHTML = cardHtml;
}

function createErrorCard(msg){
const cardHtml = <div class="card"> <h1>${msg}</h1> </div>
main.innerHTML = cardHtml;
}

function addReposToCard(repos){
const reposEl = document.getElementById(‘repos’);
repos.slice(0, 5).forEach(repo=>{
let repoEl =document.createElement(‘a’);
repoEl.classList.add(‘repo’);
repoEl.href =repo.html_url;
repoEl.innerHTML = repo.name;
repoEl.target = “_blank”;
reposEl.appendChild(repoEl);
})
}

form.addEventListener(‘submit’, (e)=>{
e.preventDefault();
const user = search.value;
if(user){
getUser(user);
search.value=””;
}

})

1
2
3

### double Click

HTML

Double click on the image to it

CSS*
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: ‘Oswald’, sans-serif;
text-align: center;
overflow: hidden;
margin: 0;
}

h3 {
margin-bottom: 0;
text-align: center;
}

small {
display: block;
margin-bottom: 20px;
text-align: center;
}

.fa-heart {
color: red;
}

.loveMe {
height: 440px;
width: 300px;
background: url(‘https://images.unsplash.com/photo-1504215680853-026ed2a45def?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80')
no-repeat center center/cover;
margin: auto;
cursor: pointer;
max-width: 100%;
position: relative;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.loveMe .fa-heart {
position: absolute;
animation: grow 0.6s linear;
transform: translate(-50%, -50%) scale(0);
}

@keyframes grow {
to {
transform: translate(-50%, -50%) scale(10);
opacity: 0;
}
}

*JS
let times = document.getElementById(‘times’);
const div = document.querySelector(‘.loveMe’);
let clickTimes = 0;
let resetTime = 0;
div.addEventListener(‘click’,(e)=>{
clickTimes++;
resetTime++
times.innerText = clickTimes;
if(resetTime==2){
resetTime=0;
// const heart = document.createElement(‘i’)
// heart.classList.add(‘fas’)
// heart.classList.add(‘fa-heart’)
// div.appendChild(heart);
createHeart(e);
}

})

const createHeart = (e) => {
const heart = document.createElement(‘i’)
heart.classList.add(‘fas’)
heart.classList.add(‘fa-heart’)
console.log(e);

const x = e.clientX
const y = e.clientY

const leftOffset = e.target.offsetLeft
const topOffset = e.target.offsetTop

const xInside = x - leftOffset
const yInside = y - topOffset

heart.style.top = `${yInside}px`
heart.style.left = `${xInside}px`

div.appendChild(heart);
setTimeout(() => heart.remove(), 1000)

}

1
2
3

### Password Generator

*HTML

***CSSS
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}

body{
background-color: rgb(127, 127, 226);
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin:0;
flex-direction: column;
color: white;
}

.container{
background-color: blueviolet;
padding: 10px 20px;
box-shadow: 0px 2px 10px rgba(255, 255, 255, 0.2);
width: 400px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
h1{
font-size: 24px;
}
.result-container{
display: flex;
justify-content: space-between;
width:100%;
background-color: black;
padding: 7px 7px;

}

.result-container span{
display: inline-block;
width: 75%;

padding: 7px;
}

.result-container button{
height: 40px;
width:40px;
background-color: rgb(151, 63, 235);
font-size: 25px;
color:aliceblue;
margin-right: 0;
border: none;
}
.result-container button i{
font-size: 23px;
}

.setting{
width:100%;

}
.setting .setting{
display: flex;
margin-top: 15px;
justify-content: space-between;
width: 100%;
}
.setting label{
margin-right: 98px;
}
.setting input{
margin-right: 0px;
}

.btn{
border: none;
cursor: pointer;
}
.btn:focus{
outline: none;

}
.btn-large{
background-color:rgb(74, 6, 105);
padding: 10px 20px;
margin: 15px 0;
width: 100%;
color: white
}

JS**

const resultEl = document.getElementById(‘result’);
const clipboardEl = document.getElementById(‘clipboard’)
const lengthEl = document.getElementById(‘length’);
const uppercaseEl = document.getElementById(‘uppercase’);
const lowercaseEl = document.getElementById(‘lowercase’);
const numbersEl = document.getElementById(‘numbers’);
const symbolsEl = document.getElementById(‘symbols’);
const generateEl = document.getElementById(‘generate’);

//点击复制按钮复制生成的密码
clipboardEl.addEventListener(‘click’ ,()=>{
const textarea = document.createElement(‘textarea’);
const password = resultEl.innerHTML;
if(!password) return;
textarea.value= password;
document.body.appendChild(textarea);
textarea.select();
document.execCommand(‘copy’);
textarea.remove();
alert(‘已成功复制代码’);

})

//点击生成密码按钮生成密码

generateEl.addEventListener(‘click’,()=>{
const length = +lengthEl.value;
const hasLower = lowercaseEl.chcked;
const hasUpper = uppercaseEl.chcked;
const hasNumber = numbersEl.chcked;
const hasSymbol = symbolsEl.checked;
resultEl.innerText = generatePassword(hasLower,hasUpper,hasNumber,hasSymbol, length)
console.log(resultEl.value);
})

//存储所有的随机函数
const randomFunc = {
lower: getRandomLower,
upper: getRandomUpper,
number: getRandomNumber,
symbol: getRandomSymbol
}

//生成代码函数
function generatePassword(lower, upper, number, symbol, length){
let generatedPassword =’’;
let typesCount = lower+ upper+ number + symbol;
if(typesCount==0) return ‘’;
const typesArr=[{lower}, {upper}, {number},{ symbol}];

for(let i= 0; i<length; i++){
typesArr.forEach(type=>{
const funcName = Object.keys(type)[0]
generatedPassword += randomFuncfuncName
})
}
const finalPassword = generatedPassword.slice(0, length)
return finalPassword;
}

function getRandomLower() {
return String.fromCharCode(Math.floor(Math.random() * 26) + 97)
}

function getRandomUpper() {
return String.fromCharCode(Math.floor(Math.random() * 26) + 65)
}

function getRandomNumber() {
return String.fromCharCode(Math.floor(Math.random() * 10) + 48)
}

function getRandomSymbol() {
const symbols = ‘!@#$%^&*(){}[]=<>/,.’
return symbols[Math.floor(Math.random() * symbols.length)]
}

1
2
3

### Good Cheap Fast

HTML**

How do you want your project to be?

*****CSS
body{
font-family: ‘Robot’, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}

.toggle-container {
display: flex;
align-items: center;
margin: 10px 0;
width: 200px;
}

.toggle-container .label{
width: 80px;
height :40px;
position: relative;
border-radius: 50px;
background-color:rgb(192, 192, 186);
margin: 0 10px;
}

.toggle-container .label .ball{
position: absolute;
top: 3px;
left: 3px;
width: 34px;
height:34px;
background-color: aliceblue;
border-radius: 50%;
animation: slideOff 0.3s linear forwards;
}
.toggle-container .toggle{
visibility: hidden;
}

.toggle:checked+.label{
background-color: rgb(171, 113, 226);
}

.toggle:checked +.label .ball{
animation: slideOn 0.3s linear forwards;
}
@keyframes slideOff{

0%{
  transform: translateX(40px) scale(1);
}
50%{
  transform: translateX(20px) scale(1.2);
}

100%{
  transform: translateX(0px) scale(1);
}

}

@keyframes slideOn{
0%{
transform: translateX(0px) scale(1);
}

50%{
transform: translateX(20px) scale(1.2);
}

100%{
transform: translateX(40px) scale(1);
}
}

*JS
const toggles = document.querySelectorAll(‘.toggle’);
const good = document.getElementById(‘good’);
const cheap = document.getElementById(‘cheap’);
const fast = document.getElementById(‘fast’);

toggles.forEach(toggle=>toggle.addEventListener(‘click’,(e)=>{
if(good.checked&&cheap.checked&&fast.checked){
if(e.target==cheap){
good.checked=false;
}

if(e.target===fast){
  cheap.checked=false;
}

if(e.target===good){
  fast.checked=false;
}

}
}))

1
2
3
4
5

### Notes App

参考演示地址： https://50projects50days.com/projects/notes-app/

HTML
+Add note

CSS*
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}

body{
background-color: rgb(86, 194, 236);
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
margin: 60px 40px;

}

.add{
position: fixed;
top: 15px;
right:20px;
padding: 6px 15px;
background-color: rgb(231, 119, 74);
border:none;
color:aliceblue;
cursor: pointer;
}

.add:active{
transform: scale(0.98);
}

.note{
background-color: #fff;
box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);
margin: 30px 20px;
height: 400px;
width: 300px;

}

.tools{
background-color: rgba(236, 124, 33, 0.849);
padding: 10px 12px;
border: none;
display: flex;
justify-content: flex-end;

}

.tools button{

border: none;
background-color: transparent;
cursor: pointer;
margin-left: 0.5rem;
}

.tools button i{
color:white;
cursor: pointer;
font-size: 24px;
}

.note textarea{
border:none;
outline: none;
font-family: inherit;
height: 400px;
width:100%;
padding: 20px;
}

.main{
padding: 20px;
width:100%;
word-wrap: break-word;

}

.hidden{
display: none;
}

JS
const addBtn = document.querySelector(‘.add’);

//localstage会将之前存储的字段显示出来，要不然打开页面以前的数据就没法显示
const notes =JSON.parse(localStorage.getItem(‘notes’));
if(notes){
notes.forEach(note=>addNewNote(note));
}

addBtn.addEventListener(‘click’, ()=>addNewNote())

function addNewNote(text=””) {
const note = document.createElement(‘div’);
note.classList.add(‘note’);
document.body.appendChild(note)
note.innerHTML = <div class="tools"> <button class="edit"> <i class="iconfont icon-bianji"></i></button> <button class="delete" > <i class="iconfont icon-shanchu"></i></button> </div> <div class="main ${text? "" : "hidden"}"></div> <textarea class ="${text ? "hidden" : ""}"></textarea>
const editBtn = note.querySelector(“.edit”);
const deleteBtn = note.querySelector(“.delete”);
const main = note.querySelector(‘.main’);
const textAarea = note.querySelector(‘textarea’);
//把缓存里的notesl里的值传入到textAarea和main中。
textAarea.value = text;
main.innerHTML= text;

editBtn.addEventListener(‘click’, ()=>{
main.classList.toggle(‘hidden’);
textAarea.classList.toggle(‘hidden’);
})

deleteBtn.addEventListener(‘click’, ()=>{
note.remove();
updateLS();
})

textAarea.addEventListener(‘input’, (e)=>{

console.log(e.target);
main.innerHTML=e.target.value;
updateLS();
})

}
//更新localStorage函数

function updateLS(){
const textnotes= document.querySelectorAll(‘textarea’);
let notes = [];
textnotes.forEach(textnote=>{
notes.push(textnote.value);
localStorage.setItem(‘notes’, JSON.stringify(notes));
})

}

1
2
3
4
5

### Animated Countdown

演示参考地址：https://50projects50days.com/projects/animated-countdown/

HTML**

CSS*
body{
font-family: ‘Roboto’ ,sans-serif;
margin: 0;
height: 100vh;
overflow: hidden;
}

h4{
font-size: 20px;
margin: 5px;
text-transform: uppercase;
}

.counter{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}

.counter.hide{
transform: translate(-50%,-50%) scale(0);
animation: hide 0.2s ease-out;
}

@keyframes hide{
0%{
transform: translate(-50%, -50%) scale(1);
}

100%{
transform: translate(-50%, -50%) scale(0);
}
}

.nums{
color:#3498db;
font-size: 50px;
position: relative;
overflow: hidden;
width: 250px;
height: 50px;

}

.nums span{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(120deg);
transform-origin: bottom center;
}

.nums span.in{
transform: translate(-50%, -50%) rotate(0deg);
animation: goIn 0.5s ease-in-out;
}

.nums span.out{
animation: goOut 0.5s ease-in-out;
}

@keyframes goIn{
0%{
transform: translate(-50%, -50%) rotate(120deg);
}

30%{
transform:translate(-50%, -50%) rotate(-20deg);
}
60%{
transform:translate(-50%, -50%) rotate(10deg);
}
100%{
transform:translate(-50%, -50%) rotate(10deg);
}
}

@keyframes goOut{
0%{
transform: translate(-50%, -50%) rotate(0deg);
}

60%{
transform: translate(-50%, -50%) rotate(20deg);
}

100%{
transform: translate(-50%, -50%) rotate(-120deg);
}
}

.final{
position:fixed;
top: 50%;
left: 50%;
/* 先隐藏起来 */
transform: translate(-50%, -50%) scale(0);
text-align: center;
}

.final.show{
transform: translate(-50%,-50%) scale(1);
animation: show 0.2s ease-out;
}

@keyframes show{

0%{
transform: translate(-50%, -50%) scale(0);
}

30%{
transform: translate(-50%, -50%) scale(1.4);
}

100%{
transform: translate(-50%, -50%) scale(1);
}

}

JS****
const counter = document.querySelector(‘.counter’);
const nums = document.querySelectorAll(‘.nums span’);
const final = document.querySelector(‘.final’);
console.log(final);
const replay = document.getElementById(‘replay’);

runAnimation();

function runAnimation(){
nums.forEach((num,index)=>{
const lastindex = nums.length-1;
num.addEventListener(‘animationend’ ,(e)=>{
if(e.animationName==’goIn’ && index!==lastindex){

    num.classList.remove('in');
    num.classList.add('out');
  }

 else if(e.animationName==='goOut' && num.nextElementSibling){
    num.nextElementSibling.classList.add('in')
  }else{
    counter.classList.add('hide');
    final.classList.add('show');
  }

})

})
}

replay.addEventListener(‘click’ ,()=>{
resetAnimation();
runAnimation();
})

function resetAnimation() {

final.classList.remove(‘show’);
counter.classList.remove(‘hide’);

nums.forEach((num)=>{
num.classList.value=’’;
})

nums[0].classList.add(‘in’);
}

1
2
3
4
5

### mobile Tab Navigation

演示参考地址：https://50projects50days.com/projects/mobile-tab-navigation/

**HTML

*CSS
body{
background-color: #B88ACB;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: sans-serif;
font-style: 16px;
color:rgb(150, 149, 149)

}

.phone{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 3px solid #fff;
border-radius: 15px;
height: 600px;
width: 400px;
overflow: hidden;
}

.phone .img{
position: relative;
height: 90%;
overflow: hidden;
width:400px
}

.img .content{
position: absolute;
top:0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;

opacity: 0;

transition: opacity 0.4s ease
}

.img .content.show{
opacity: 1;
}

nav{
width: 100%;
height: 10%;

}

nav ul{
list-style-type: none;
display: flex;
align-items: center;
justify-content: space-between;
text-align: center;
padding: 12px 10px ;
background-color: #fff;

}
nav ul li{
cursor: pointer;
}

nav ul li:hover{
color:#c580e2;
}
nav ul li.active{
color:#b963dd
}

*****JS
const imgs = document.querySelectorAll(‘.content’);
const lis = document.querySelectorAll(‘li’);

lis.forEach((li, index)=>{
li.addEventListener(‘click’, ()=>{
hideAllImages();
hideAllLis()

li.classList.add('active');
imgs[index].classList.add('show')

})
})

function hideAllImages(){
imgs.forEach(img=>{
img.classList.remove(‘show’);
})
}

function hideAllLis() {
lis.forEach(li=>{
li.classList.remove(‘active’);
})
}

1
2
3
4
5
6
7
8
9
10
11
12
13

### Password strength Backgrond

参考演示地址： https://50projects50days.com/projects/password-strength-background/

#### 该项目是用tailwindcss框架写的，用的时候要插入引用

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.8.11/tailwind.min.css"

   integrity="sha512KO1h5ynYuqsFuEicc7DmOQc+S9m2xiCKYlC3zcZCSEw0RGDsxcMnppRaMZnb0DdzTDPaW22ID/gAGCZ9i+RT/w=="crossorigin="anonymous"

  />

*******HTML *********

<button class="bg-black text-white py-2 mt-4 inlne-block w-full  rounded" type="submit">Submit</button>

CSS*

body{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100vh;
overflow: hidden;
margin: 0;
}

.background{
background: url(‘https://images.unsplash.com/photo-1556745757-8d76bdb6984b')
no-repeat center/cover;
position: absolute;
top:-20px;
left:-20px;
right: -20px;
bottom: -20px;
z-index: -1;
filter: blur(20px);
}

JS*
const bgImg = document.querySelector(‘.background’);
const password = document.getElementById(‘password’);

password.addEventListener(‘input’ ,(e)=>{
const input = e.target.value
const length = input.length
const blurValue = 20 - length * 2
bgImg.style.filter = blur(${blurValue}px)

})

1
2
3
4
5

### 3D background Boxes

参考演示地址： https://50projects50days.com/projects/3d-background-boxes/

HTML

Magic 🎩

CSS*

body {
background-color: #fafafa;
font-family: ‘Roboto’, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
}

.magic{
background-color: #f9ca24;
color:#fff;
font-family: ‘Poppins’ , sans-serif;
border: 0;
border-radius: 3px;
font-size: 16px;
padding: 12px 12px;
cursor: pointer;
position: fixed;
top: 20px;
letter-spacing: 1px;
box-shadow: 0 3px rgba(249, 202,36, 0.5);
z-index: 100;
}

.magic:focus{
outline: none;
}

.magic:active{
box-shadow: none;
transform: translateY(2px);
}

.boxes{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
height: 500px;
width: 500px;
position: relative;
transition: 0.4s ease;
}

.boxes.big{
width: 600px;
height: 600px
}

.boxes.big .box{
transform: rotateZ(360deg);

}

.box{
background-image: url(‘https://media.giphy.com/media/EZqwsBSPlvSda/giphy.gif');
position: relative;
background-size: 500px 500px;
background-repeat: no-repeat;
width: 125px;
height: 125px;
transition: 0.3s ease;

}

.box:before{
content: ‘’;
background-color: #f9ca24;
position: absolute;
bottom: -15px;
left: 8px;
height: 15px;
width: 100%;
transform: skewX(45deg);
}

.box::after{
content: ‘’;
background-color: #ebd281;
position: absolute;
top: 8px;
right: -15px;
width: 15px;
height: 100%;
transform: skewY(45deg);
}

***JS

const boxesContainer = document.getElementById(‘boxes’)
const btn = document.getElementById(‘btn’)

btn.addEventListener(‘click’, () => boxesContainer.classList.toggle(‘big’))

function createBoxes() {
for (let i = 0; i < 4; i++) {
for (let j = 0; j < 4; j++) {
const box = document.createElement(‘div’)
box.classList.add(‘box’)
box.style.backgroundPosition = ${-j * 125}px ${-i * 125}px
boxesContainer.appendChild(box)
}
}
}

createBoxes()

1
2
3
4
5

### Verify  Account  Ui

演示参考链接： https://50projects50days.com/projects/verify-account-ui/

HTML*

******CSS
body{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}

.container{
height: 100%;
width: 80%;
border-left:3px solid #000;
border-right:3px solid #000;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}

h1{
font-size: 40px;
font-weight: 600;
margin-top: 20px;
}

h4{
font-size: 20px;
max-width: 600px;
margin-top: 20px;
font-weight: 200;
}

.input-container{
display: flex;

align-items: center;
width: 100%;
margin-top: 50px;
justify-content: ;

}

.input{
border:1px solid rgb(211, 207, 207);
width:136px;
height: 160px;
line-height: 160px;
/* justify-content: space-between; */
text-align: center;
margin: 9px;
font-size: 75px;
border-radius: 7px;
-moz-appearance: textfield;
}

.input::-webkit-outer-spin-button,
.input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

.input:valid{
border-color: #3498db;
box-shadow: 0 10px 10px -5px rgba(0,0,0,0.25);
}

.p{
max-width: 600px;
margin-top: 60px;
background-color: rgb(235, 215, 192);
border-radius: 10px;
padding: 13px 20px;
text-align: center;
line-height: 30px;
}

@media(max-width:900px){
.input-container{
flex-wrap: wrap;
}

@media(max-width:600px){
.input-container{
flex-wrap: wrap;
}

.input{
font-size: 60px;
height: 80px;
max-width: 70px;
}
}
}

JS******
const inputs = document.querySelectorAll(‘input’);
inputs[0].focus();
inputs.forEach((input ,index) => {
input.addEventListener(‘keydown’, (e)=>{
if(e.key>=0 && e.key<=9){
inputs[index].value =’’; //每次输入后将值置空，保证下次输入的时候不会保存原先输入的值。
setTimeout(() => {
if(index<inputs.length-1)
inputs[index+1].focus();
}, 10);
}
else if(e.key==’Backspace’){
setTimeout(() => {
inputs[index-1].focus();
}, 10);
}
})
});

1
2
3
4
5

### Live User Filter

演示参考地址：https://50projects50days.com/projects/live-user-filter/

**********HTML ***********

***********CSS ************
body{
background-color: #f8f9fd;
font-family: ‘Roboto’ , sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin-top: 10px;
margin-bottom: 10px;
}

.container{
border-radius: 5px;
box-shadow: 3px 3px 10px rgba(0,0,0, 0.2);
overflow: hidden;
width: 400px;
overflow-y: auto;

}

.title{
margin: 0;
font-size: 26px;
}

.subtitle{
display: inline-block;
margin: 5px 0 20px;
opacity: 0.8;
font-size: 16px;
}

.header{
background-color: #3e57db;
color:#fff;
padding: 30px 20px;
}

.header input{
background-color: rgba(0,0,0,0.3);
border: 0;
border-radius: 50px;
color: #fff;
font-size: 14px;
padding: 10px 15px;
width: 100%;
}

.header input:focus{
outline: none;
}

.user-list{
list-style-type: none;
background-color: #fff;
width: 100%;
max-height: 400px;
overflow-y: auto;
}

.user-list li{
display: flex;
padding: 10px 12px;
width: 100%;
}
.user-list:last-child{
padding-bottom: 20px;
background-color: transparent;
}

.user-list li img{
border-radius: 50%;
height: 90px;
width:90px;
object-fit: cover;
margin-left: 10px;
}

.user-list .user-info{
margin-left: 10px;
}

.user-list .user-info h4{
margin: 0 0 10px;
font-size: 20px;
font-weight: 600;
}

.user-list .user-info p{
font-size: 14px;
}

.user-list li:not(:last-of-type){
border-bottom: 1px solid #eee;
}

.user-list li.hide{
display: none;
}

***JS
const filter = document.getElementById(‘filter’);
const result = document.getElementById(‘result’);
const resultItem = [];

getData();
filter.addEventListener(‘input’ , (e)=>{filterData(e.target.value)});

async function getData(){
const res = await fetch(‘https://randomuser.me/api?results=50');
let {results} = await res.json();
console.log(results);
result.innerHTML=’’;

results.forEach(user => {
const li = document.createElement(‘li’);
li.innerHTML = <img src ="${user.picture.large}" alt="${user.name.first}"> <div class="user-info"> <h4>${user.name.first} ${user.name.last}</h4> <p> ${user.location.city}, ${user.location.country}</p> </div>
result.appendChild(li);
resultItem.push(li)
});

}

function filterData(searchValue) {
resultItem.forEach(item=>{
if(item.innerText.toLowerCase().includes(searchValue.toLowerCase())){
item.classList.remove(‘hide’);
}else{
item.classList.add(‘hide’);
}
})
}

1
2
3
4
5

### Feedback UI Design

演示参考地址： https://50projects50days.com/projects/feedback-ui-design/

***HTML

***CSS
body{
background-color: #FEF9F2;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
overflow: hidden;
position: relative;
}

.container1{
width: 600px;
height: 400px;
box-shadow: 0 10px 20px rgba(0,0,0, 0.3);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 10px 10px;
background-color: #fdfdfc;
position: absolute;
opacity: 1;
}

.container1 h1{
font-size: 22px;
max-width: 400px;
font-weight: 400;
}

.container1 ul{
list-style-type: none;
display: flex;
align-items: center;
justify-content: center;
padding-top: 15px;
}

.container1 li{
padding: 15px 12px;
margin: 0 5px;
cursor: pointer;

width: 150px;
height: 150px;

}

.container1 li img{
width:60px;
height: 60px;
margin-top: 10px;
}

.container1 li p{
margin-top: 15px;
color:#899
}

.container1 li:hover{
box-shadow: 0px 2px 5px rgba(20, 20, 20, 0.2);
}

.container1 li.active{
box-shadow: 0px 2px 5px rgba(20, 20, 20, 0.2);
}

button{
margin: 40px 0;
padding: 15px 10px;
width: 220px;
border-radius: 7px;
border: none;
background-color:#f3ba10 ;
color: #fdfdfc;
font-size: 24px;
cursor: pointer;
outline: none;
}

button:active{
transform: scale(0.98);
}

.container2{
width: 600px;
height: 300px;
box-shadow: 0 10px 20px rgba(0,0,0, 0.3);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 10px 10px;
background-color: #fdfdfc;
z-index: -1;

}

.container2 i{
color: red;
font-size: 29px;
margin-top: 20px;
}

.container2 h3,p{
margin-top: 20px;
}
.container2 p{
max-width: 400px;
font-size: 18px;
}

****jS
let lis=document.querySelectorAll(‘li’);
let btn = document.getElementById(‘btn’);

const container1 = document.querySelector(‘.container1’)
const container2 = document.querySelector(‘.container2’);
const container2h3= document.querySelector(‘.container2 h3’);

lis.forEach(li => {
li.addEventListener(‘click’, (e)=>{
removeChangeLi();
li.classList.add(‘active’)
})
});

function removeChangeLi(){
lis.forEach(li=>{
li.classList.remove(‘active’);
})
}

btn.addEventListener(‘click’, (e)=>{show()})

function show(){
if(lis[0].classList.contains(‘active’)){
container1.remove();
container2h3.innerText=’Feedback:Unhappy’;
}
else if(lis[1].classList.contains(‘active’)){
container1.remove();
container2h3.innerText=’Feedback:Neutrual’;
}
else{
container1.remove();
container2h3.innerText=’Feedback:Satisfied’;
}
}

1
2
3
4
5
6
7
8
9
10

其他浏览器内与该功能类似的伪类

- ::-moz-range-thumb   //火狐
- ::-ms-thumb    //IE

### custom Range Slider

演示参考链接：https://50projects50days.com/projects/custom-range-slider/

HTML***

Custom Range Slider

****************CSS *************
body{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
overflow: hidden;
background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);

}

h2 {
position: absolute;
top: 10px;
}

.range-container {
position: relative;
}

input[type=’range’] {
width: 300px;
margin: 18px 0;
-webkit-appearance: none;
}

input[type=’range’]:focus {
outline: none;
}

input[type=’range’] + label {
background-color: #fff;
position: absolute;
top: -25px;
left: 110px;
width: 80px;
padding: 5px 0;
text-align: center;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

input[type=’range’]::-webkit-slider-runnable-track {
background: purple;
border-radius: 4px;
width: 100%;
height: 10px;
cursor: pointer;
}

input[type=’range’]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 24px;
width: 24px;
background: #fff;
border-radius: 50%;
border: 1px solid purple;
margin-top: -7px;
cursor: pointer;
}

*JS
const range = document.getElementById(‘range’)

range.addEventListener(‘input’, (e) => {
const value = +e.target.value
const label = e.target.nextElementSibling

const range_width = getComputedStyle(e.target).getPropertyValue('width')

const label_width = getComputedStyle(label).getPropertyValue('width');

//去掉’px‘这个单位
const num_width = +range_width.substring(0, range_width.length - 2)
const num_label_width = +label_width.substring(0, label_width.length - 2)

const max = +e.target.max

const min = +e.target.min

const left = value * (num_width / max) - num_label_width / 2 + scale(value, min, max, 10, -10)
// const left = 300/110*value-40+(y2-y1)/(x2-x1)*3;

label.style.left = `${left}px`
label.innerHTML = value

1
2
3
4
5

### quiz App

演示参考地址：https://50projects50days.com/projects/quiz-app/

**************ＨＴＭＬ＊＊＊＊＊＊＊＊＊＊＊＊

＊＊＊＊＊＊＊＊＊＊＊＊＊CSS＊＊＊＊＊＊＊＊＊＊＊
body{
background-color: #EAEEF4;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}

.quiz-container{
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
background-color: #fff;
margin: 10px 0;
padding: 25px 40px;
width: 700px;
border-radius: 8px;

}

.header-container{

}
h2{
line-height: 45px;
text-align: center;
font-size: 34px;

}

.header-container ul{
list-style-type: none;

}
.header-container ul li{
font-size: 25px;
margin: 40px;
}

.header-container ul li input{
transform: scale(1.3);
color: #8E44AD

}

.header-container ul li label{
cursor: pointer;
padding-left: 10px;
}

button{
width:100%;
background-color: #8E44AD;
padding: 12px 12px;
border: none;
color: white;
font-size: 20px;
cursor: pointer;
outline: none;
margin-bottom: 10px;
}

button:focus {
outline: none;
background-color: #5e3370;
}
button:hover {
background-color: #732d91;
}

.reload-button{
margin: 30px 0;
}

＊＊＊＊＊＊＊＊＊＊＊＊＊＊JS*********************
const quizData=[
{
question: “Which language runs in a web browser?”,
a: “Java”,
b: “C”,
c: “Python”,
d: “JavaScript”,
correct: “d”,
},

{
    question: "What does CSS stand for?",
    a: "Central Style Sheets",
    b: "Cascading Style Sheets",
    c: "Cascading Simple Sheets",
    d: "Cars SUVs Sailboats",
    correct: "b",
},
{
    question: "What does HTML stand for?",
    a: "Hypertext Markup Language",
    b: "Hypertext Markdown Language",
    c: "Hyperloop Machine Language",
    d: "Helicopters Terminals Motorboats Lamborginis",
    correct: "a",
},
{
    question: "What year was JavaScript launched?",
    a: "1996",
    b: "1995",
    c: "1994",
    d: "none of the above",
    correct: "b",
},

]

const quiz = document.getElementById(‘quiz’);
const questionEl= document.getElementById(‘question’);
const answerEls = document.querySelectorAll(‘.answer’);
const a_text = document.getElementById(‘a_text’);

const b_text = document.getElementById(‘b_text’);
const c_text = document.getElementById(‘c_text’);
const d_text = document.getElementById(‘d_text’);
const submitBtn = document.getElementById(‘submit’);

let chengji = 0;
let currentQuizIndex = 0;

loadQuiz();

function loadQuiz(){
clearAnswerData();
questionEl.innerText = quizData[currentQuizIndex].question;
a_text.innerText = quizData[currentQuizIndex].a;
b_text.innerText = quizData[currentQuizIndex].b;
c_text.innerText = quizData[currentQuizIndex].c;
d_text.innerText = quizData[currentQuizIndex].d;
}

function clearAnswerData(){
answerEls.forEach(answerEl=>{
answerEl.checked = false;
})
}

function getAnswer(){
let answer;
answerEls.forEach(answerEl=>{
if(answerEl.checked===true){
answer = answerEl.id;
}
})
return answer;
}

submitBtn.addEventListener(‘click’ ,()=>{
let answer = getAnswer();
if(answer){
if(answer===quizData[currentQuizIndex].correct){
chengji++;
}
if(currentQuizIndex<quizData.length-1){
currentQuizIndex++;
loadQuiz();
}else{
quiz.innerHTML = <h2>You answered ${chengji}/${quizData.length} questions correctly</h2> <button onclick="location.reload()" class="reload-button">Reload</button>
}
}else{
alert(‘未选择答案’)
}
})

1
2
3
4
5

### Testimonial Box Switch

演示参考地址： https://50projects50days.com/projects/testimonial-box-switcher/

HTML*******

0%

CSS
body{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
margin:20px auto;
}

.container{
background-color: #29788b;
border-radius: 9px;
padding: 40px;
display: flex;
justify-content: center;
align-items: center;
text-anchor: center;
flex-direction: column;
color:aliceblue;
position: relative;
}

.progress{
width:100%;
height: 7px;
background-color: rgb(91, 215, 236);
animation: grow 20s linear infinite;
transform-origin: left;
}

span{
position: absolute;
top: 20px;
right: 20px
}

@keyframes grow{
0%{
transform: scaleX(0);
}
}
p{
margin: 20px 0;
max-width: 700px;
line-height: 35px;
font-size: 20px;
}
p::before{

}

p::after{

}

.info{
display: flex;
justify-content: center;
align-items: center;
}

img{
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 50%;
border: none;
}
.user-info{
margin-left: 15px;
text-align: center;
margin-top: 20px;

}

.user-info h3{
margin-bottom: -20px;
}

JS******
const pEl = document.querySelector(‘p’);
const imgEl = document.querySelector(‘img’);
const h3El = document.querySelector(‘h3’);
const pinfoEl = document.querySelector(‘.pinfo’);
const span = document.querySelector(‘span’)

const datas=[
{
name: ‘Miyah Myles’,
position: ‘Marketing’,
photo:
‘https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=707b9c33066bf8808c934c8ab394dff6',
text:
“I’ve worked with literally hundreds of HTML/CSS developers and I have to say the top spot goes to this guy. This guy is an amazing developer. He stresses on good, clean code and pays heed to the details. I love developers who respect each and every aspect of a throughly thought out design and do their best to put it in code. He goes over and beyond and transforms ART into PIXELS - without a glitch, every time.”,
},
{
name: ‘June Cha’,
position: ‘Software Engineer’,
photo: ‘https://randomuser.me/api/portraits/women/44.jpg',
text:
‘This guy is an amazing frontend developer that delivered the task exactly how we need it, do your self a favor and hire him, you will not be disappointed by the work delivered. He will go the extra mile to make sure that you are happy with your project. I will surely work again with him!’,
},
{
name: ‘Iida Niskanen’,
position: ‘Data Entry’,
photo: ‘https://randomuser.me/api/portraits/women/68.jpg',
text:
“This guy is a hard worker. Communication was also very good with him and he was very responsive all the time, something not easy to find in many freelancers. We’ll definitely repeat with him.”,
},
{
name: ‘Renee Sims’,
position: ‘Receptionist’,
photo: ‘https://randomuser.me/api/portraits/women/65.jpg',
text:
“This guy does everything he can to get the job done and done right. This is the second time I’ve hired him, and I’ll hire him again in the future.”,
},
{
name: ‘Jonathan Nunfiez’,
position: ‘Graphic Designer’,
photo: ‘https://randomuser.me/api/portraits/men/43.jpg',
text:
“I had my concerns that due to a tight deadline this project can’t be done. But this guy proved me wrong not only he delivered an outstanding work but he managed to deliver 1 day prior to the deadline. And when I asked for some revisions he made them in MINUTES. I’m looking forward to work with him again and I totally recommend him. Thanks again!”,
},
{
name: ‘Sasha Ho’,
position: ‘Accountant’,
photo:
‘https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?h=350&auto=compress&cs=tinysrgb',
text:
‘This guy is a top notch designer and front end developer. He communicates well, works fast and produces quality work. We have been lucky to work with him!’,
},
{
name: ‘Veeti Seppanen’,
position: ‘Director’,
photo: ‘https://randomuser.me/api/portraits/men/97.jpg',
text:
‘This guy is a young and talented IT professional, proactive and responsible, with a strong work ethic. He is very strong in PSD2HTML conversions and HTML/CSS technology. He is a quick learner, eager to learn new technologies. He is focused and has the good dynamics to achieve due dates and outstanding results.’,
},
]
let index= 0;
let munMax=100;

getData();
function getData(){
let {name, position, photo, text} =datas[index];

imgEl.src=photo;
h3El.innerText = name;
pEl.innerText =text;
pinfoEl.innerText = position;

index++;
if (index > datas.length - 1) {
index= 0;
}
}
///////////在中间加这段代码是为了在显示第一个人的信息的时候百分比能显示出来////////////////
let i=0;
let id=setInterval(() => {
if(i<=100){
span.innerText=i+’%’;
i++;
}
},110)
// /////////////////////////
setInterval(() => {
getData();

let i=1;
let id=setInterval(() => {
span.innerText=i+’%’;
i++;
if(i>100){
clearInterval(id);
i=0;
}
}, 200);

}, 20000);

1
2
3
4
5

### Random Image Feed

演示参考地址： https://50projects50days.com/projects/random-image-feed/

****HTML

Random Image Feed

CSS*********
body {
font-family: ‘Roboto’, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
}

.title{
margin-top: 10;
text-align: center;
}

.container{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;

}

.container img{
object-fit: cover;
margin: 10px;
height: 300px;
width: 300px;
max-width: 100%;

}

JS*
const container = document.querySelector(‘.container’)
const unsplashURL = ‘https://source.unsplash.com/random/'
const count=15;

for(let i=0; i<15; i++){
let img=document.createElement(‘img’);
img.src=${unsplashURL}${getRandomSize()};
container.appendChild(img)
}

function getRandomSize(){
return ${getRandomNum()}x${getRandomNum()}
}
function getRandomNum(){
return Math.floor(Math.random()*10+ 300);

}

1
2
3
4
5
6
7

### Todo List 

演示参考地址：https://50projects50days.com/projects/todo-list/

涉及到locaolstorage方面的内容

*HTML

*****CSS8
body{
display: flex;

justify-content: center;
text-align: center;
height: 100vh;

margin: 0;
}

h1{
margin-top: 15px;
color:#DBC7ED;
font-size: 130px;
letter-spacing: 3px;
}

.inputcontainer{
box-shadow: 2px 3px 12px rgba(0,0,0, 0.2);
width:500px;
max-width: 100%;
margin-bottom: 30px;
}

input {
border: none;
color: #444;
font-size: 2rem;
padding: 0.5rem 2rem;
display: block;
width: 100%;
outline: none;
}

input::placeholder {
color: #d5d5d5;
}
input:focus{
border: solid 2px #DBC7ED;
}

ul{
background-color: #fff;
padding: 0;
margin: 0;
list-style-type: none;
}

li{
font-size: 35px;
border-bottom: 1px solid rgba(88, 86, 86, 0.133);
padding: 12px;
}

li.completed{
color:rgb(248, 66, 10);
text-decoration: line-through;

}

li:first-of-type{
border-top: 1px solid rgba(88, 86, 86, 0.133);
}
small{
font-size: 18px;
max-width: 350px;
color:rgb(121, 118, 118);
}

small.last{
margin-top: 900px;
}

**jS
const input = document.getElementById(‘input’);
const ul = document.querySelector(‘ul’);
const lis = document.querySelectorAll(‘li’);

let notes = JSON.parse(localStorage.getItem(‘notes’));
notes.forEach(note=>{
addNote(note);
})

input.addEventListener(‘keyup’ ,(e)=>{
if(e.keyCode==13){
addNote();
}
})

function addNote(note){
let notetext = input.value;
//这个判断可将以前保存在localstarage里面的数据显示出来。
if(note){
notetext = note.text;
}

if(notetext){
let li =document.createElement(‘li’);
li.innerHTML = notetext;

li.addEventListener('click', ()=>{
  li.classList.toggle('completed');
  upLS();
})

li.addEventListener('contextmenu' ,(e)=>{
e.preventDefault();
  li.remove();
  upLS();
})

ul.appendChild(li);
input.value='';
upLS();

}
}

////更新Locastorage数据库
function upLS(){
let notes = [];
let lis = document.querySelectorAll(‘li’)
lis.forEach(li=>{
notes.push({
text: li.innerText,
completed: li.classList.contains(‘completed’)
})
})

localStorage.setItem(‘notes’, JSON.stringify(notes))
}