From 471bef6c278be0e4299b9ffbda5ed93b88db0d3d Mon Sep 17 00:00:00 2001 From: Sam <74021826+x39OME@users.noreply.github.com> Date: Fri, 24 Mar 2023 14:26:32 +0300 Subject: [PATCH] Add files via upload --- .../css.css | 137 ++++++++++++++++++ .../index.html | 28 ++++ .../main.js | 17 +++ 3 files changed, 182 insertions(+) create mode 100644 100_projects/31-change-colors-with-local-storage/css.css create mode 100644 100_projects/31-change-colors-with-local-storage/index.html create mode 100644 100_projects/31-change-colors-with-local-storage/main.js diff --git a/100_projects/31-change-colors-with-local-storage/css.css b/100_projects/31-change-colors-with-local-storage/css.css new file mode 100644 index 0000000..80f0931 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/100_projects/31-change-colors-with-local-storage/index.html b/100_projects/31-change-colors-with-local-storage/index.html new file mode 100644 index 0000000..9ad1993 --- /dev/null +++ b/100_projects/31-change-colors-with-local-storage/index.html @@ -0,0 +1,28 @@ + + + + + + + Document + + + +
+ +

Background Color

+
Welcome
+
+ + + + diff --git a/100_projects/31-change-colors-with-local-storage/main.js b/100_projects/31-change-colors-with-local-storage/main.js new file mode 100644 index 0000000..14592fe --- /dev/null +++ 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); +} \ No newline at end of file