Add files via upload

2023-03-24 14:26:32 +03:00 · 2023-03-24 14:26:32 +03:00 · 471bef6c27
commit 471bef6c27
parent 6115e1a137
3 changed files with 182 additions and 0 deletions
--- a/100_projects/31-change-colors-with-local-storage/css.css
+++ b/100_projects/31-change-colors-with-local-storage/css.css
@ -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;
+}
--- a/100_projects/31-change-colors-with-local-storage/index.html
+++ b/100_projects/31-change-colors-with-local-storage/index.html
@ -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>
+
--- a/100_projects/31-change-colors-with-local-storage/main.js
+++ b/100_projects/31-change-colors-with-local-storage/main.js
@ -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);
+}