x39OME/100-project-100-days-website
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Sam 2023-03-24 14:26:32 +03:00 committed by GitHub
parent 6115e1a137
commit 471bef6c27
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 182 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
100_projects/31-change-colors-with-local-storage/css.css Normal file
View File

@ -0,0 +1,137 @@
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body{
font-size: 21px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
height: 100vh;
}
.container{
margin: 10px;
width: 1200px;
}
.container .color-switcher{
list-style:none;
margin-bottom: 20px;
text-align: center;
}
.container .color-switcher li {
width: 30px;
height: 30px;
cursor: pointer;
display: inline-block;
border-radius: 50%;
transition: .3s;
}
.container .color-switcher li:hover{
box-shadow:
3px 3px 10px rgba(0, 0, 0, .3),
-3px -3px 10px rgba(0, 0, 0, .3);
}
.container .color-switcher li:first-child{
background-color: #DC143C;
}
.container .color-switcher li:nth-child(2){
background-color: #9ACD32;
}
.container .color-switcher li:nth-child(3){
background-color: #8e44ad;
}
.container .color-switcher li:nth-child(4){
background-color: #000;
}
.container .color-switcher li:nth-child(5){
background-color: #FFD700;
}
.container .color-switcher li:nth-child(6){
background-color: #87CEFA;
}
.container .color-switcher li:nth-child(7){
background-color: #DB7093;
}
.container .color-switcher li:nth-child(8){
background-color: #FFA500;
}
.container h3{
color: #DC143C;
margin-bottom: 15px;
}
.container div{
background-color: #DC143C;
padding: 20px;
color: #fff;
height: 100px;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.red .container h3{
color: #DC143C;
}
.red .container div{
background-color: #DC143C;
padding: 20px;
color:#fff;
}
.green .container h3{
color: #9ACD32;
}
.green .container div{
background-color: #9ACD32;
padding: 20px;
color:#fff;
}
.purple .container h3{
color: #8e44ad;
}
.purple .container div{
background-color: #8e44ad;
padding: 20px;
color:#fff;
}
.black .container h3{
color: #000;
}
.black .container div{
background-color: #000;
padding: 20px;
color:#fff;
}
.gold .container h3{
color: #FFD700;
}
.gold .container div{
background-color: #FFD700;
padding: 20px;
color:#fff;
}
.sky .container h3{
color: #87CEFA;
}
.sky .container div{
background-color: #87CEFA;
padding: 20px;
color:#fff;
}
.violet .container h3{
color: #DB7093;
}
.violet .container div{
background-color: #DB7093;
padding: 20px;
color:#fff;
}
.orange .container h3{
color: #FFA500;
}
.orange .container div{
background-color: #FFA500;
padding: 20px;
color:#fff;
}

28
100_projects/31-change-colors-with-local-storage/index.html Normal file
View File

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div class="container">
<ul class="color-switcher">
<li data-color="red"></li>
<li data-color="green"></li>
<li data-color="purple"></li>
<li data-color="black"></li>
<li data-color="gold"></li>
<li data-color="sky"></li>
<li data-color="violet"></li>
<li data-color="orange"></li>
</ul>
<h3>Background Color</h3>
<div>Welcome</div>
</div>
<script src="main.js"></script>
</body>
</html>

17
100_projects/31-change-colors-with-local-storage/main.js Normal file
View File

@ -0,0 +1,17 @@
document.body.classList.add(localStorage.getItem("pageColor") || 'red');
var el = document.querySelectorAll('.color-switcher li');
var classesList = [];
for (var i = 0; i < el.length; i++) {
classesList.push(el[i].getAttribute("data-color"));
el[i].addEventListener(
"click",
function(){
document.body.classList.remove(...classesList);
document.body.classList.add(this.getAttribute("data-color"));
localStorage.setItem("pageColor",this.getAttribute("data-color"));
}, false);
}