diff --git a/Sprint-3/alarmclock/alarm-clock.ico b/Sprint-3/alarmclock/alarm-clock.ico new file mode 100644 index 000000000..abdf7ef83 Binary files /dev/null and b/Sprint-3/alarmclock/alarm-clock.ico differ diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6ca81cd3b..4d6bd502e 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,16 +1,83 @@ -function setAlarm() {} +// Remove after use. +const input = document.getElementById("alarmSet"); +const output = document.getElementById("timeRemaining").querySelector(".timer"); +const outputError = document.getElementById("output-error"); +const body = document.getElementsByTagName("body")[0]; +// +let count, timeRemaining; +let isPauseAlarm = false; -// DO NOT EDIT BELOW HERE +function setAlarm() { + reInit(); + const time = Number(input.value); + + if (time && time > 0) { + timeRemaining = time; + output.innerHTML = displayTime(timeRemaining); + startAlarm(); + } else { + throw new Error("You must set a positive value"); + } +} + +function startAlarm() { + count = window.setInterval(() => { + if (timeRemaining >= 1) { + timeRemaining--; + output.innerHTML = displayTime(timeRemaining); + } else { + playAlarm(); + clearInterval(count); + body.classList.add("alarm"); + } + }, 1000); +} +function pauseAlarm(e) { + isPauseAlarm = !isPauseAlarm; + const btn = e.target; + if (isPauseAlarm) { + btn.classList.add("active"); + clearInterval(count); + } else { + btn.classList.remove("active"); + startAlarm(); + } +} + +function reInit() { + audio.pause(); + body.classList.remove("alarm"); + outputError.classList.remove("active"); + outputError.innerHTML = ""; +} +function displayTime(time) { + const seconds = time % 60; + const minutes = (time - seconds) / 60; + return `${String(minutes).padStart(2, "0")}:${String(seconds).padStart( + 2, + "0" + )}`; +} + +// DO NOT EDIT BELOW HERE. var audio = new Audio("alarmsound.mp3"); function setup() { - document.getElementById("set").addEventListener("click", () => { - setAlarm(); + document.getElementById("set").addEventListener("click", (e) => { + try { + setAlarm(); + } catch (e) { + outputError.classList.add("active"); + outputError.innerHTML = e.message; + } }); document.getElementById("stop").addEventListener("click", () => { - pauseAlarm(); + stopAlarm(); + }); + document.getElementById("pause").addEventListener("click", (e) => { + pauseAlarm(e); }); } @@ -18,8 +85,8 @@ function playAlarm() { audio.play(); } -function pauseAlarm() { - audio.pause(); +function stopAlarm() { + reInit(); } window.onload = setup; diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index 48e2e80d9..b90c5cde3 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -3,18 +3,22 @@ + - Title here + Alarm clock app
-

Time Remaining: 00:00

+

Time Remaining: 00:00

+ +

+ diff --git a/Sprint-3/alarmclock/package.json b/Sprint-3/alarmclock/package.json index e1331e071..28448f732 100644 --- a/Sprint-3/alarmclock/package.json +++ b/Sprint-3/alarmclock/package.json @@ -13,5 +13,12 @@ "bugs": { "url": "https://github.com/CodeYourFuture/CYF-Coursework-Template/issues" }, - "homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme" + "homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme", + "dependencies": { + "jest": "^30.2.0", + "jest-environment-jsdom": "^30.2.0" + }, + "devDependencies": { + "@testing-library/jest-dom": "^6.9.1" + } } diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css index 0c72de38b..90cdd22ac 100644 --- a/Sprint-3/alarmclock/style.css +++ b/Sprint-3/alarmclock/style.css @@ -1,15 +1,67 @@ +:root { + --size: 0%; +} + + +body { + background-color: aliceblue; + height: 100vh; + transition: background-color 0.2s ; + &.alarm{ + background: radial-gradient(circle,rgba(250, 221, 5, 1) var(--size), rgba(255, 127, 80, 1) 80%); + animation: alarm 0.2s alternate infinite; + } +} +button { +all:reset; +cursor: pointer; +padding: 0.75rem 1rem; +border: lightgray; +background-color: gainsboro; +border-radius: 1rem; +transition: all 0.2s ease-out; +&:hover{ + background-color: lightskyblue; +} +&.active{ + background-color:coral; +} +} + .centre { position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); + background-color: white; + padding: 2rem; + box-shadow: 2px 2px 0.5rem lightgray; } #alarmSet { margin: 20px; } -h1 { +h1, +#output { text-align: center; } + +#output-error { + visibility: hidden; + padding: 0.5rem; + font-family: 'Courier New', Courier, monospace; + font-weight: 700; + color: white; + background-color: red; +} +#output-error.active{ + visibility: visible; + } + + @keyframes alarm{ + 0%{--size:0%} + 100%{--size:25%} + + } \ No newline at end of file diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..d270528a3 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -1,15 +1,30 @@ + - Title here - + Quote generator app + + + + + + -

hello there

-

-

- +
+
+

Inspire me...

+
+
+
+

Strive not to be a success, but rather to be of value.

+

Albert Einstein

+ +
+
+ - + + \ No newline at end of file diff --git a/Sprint-3/quote-generator/package.json b/Sprint-3/quote-generator/package.json index 0f6f98917..74d253e74 100644 --- a/Sprint-3/quote-generator/package.json +++ b/Sprint-3/quote-generator/package.json @@ -3,9 +3,21 @@ "version": "1.0.0", "license": "CC-BY-SA-4.0", "description": "You must update this package", + "type":"module", "scripts": { "test": "jest --config=../jest.config.js quote-generator" }, + "dependencies": { + "jest": "^30.2.0", + "jest-environment-jsdom": "^30.2.0" + }, + "devDependencies": { + "@testing-library/dom": "^10.4.0", + "@testing-library/jest-dom": "^6.6.3", + "@testing-library/user-event": "^14.6.1", + "jest": "^30.0.4", + "jest-environment-jsdom": "^30.0.4" + }, "repository": { "type": "git", "url": "git+https://github.com/CodeYourFuture/CYF-Coursework-Template.git" diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..52dfe7f85 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -1,28 +1,6 @@ -// DO NOT EDIT BELOW HERE - -// pickFromArray is a function which will return one item, at -// random, from the given array. -// -// Parameters -// ---------- -// choices: an array of items to pick from. -// -// Returns -// ------- -// One item at random from the given array. -// -// Examples of use -// --------------- -// pickFromArray(['a','b','c','d']) // maybe returns 'c' - -// You don't need to change this function -function pickFromArray(choices) { - return choices[Math.floor(Math.random() * choices.length)]; -} - // A list of quotes you can use in your app. // DO NOT modify this array, otherwise the tests may break! -const quotes = [ +export const quotes = [ { quote: "Life isn't about getting and having, it's about giving and being.", author: "Kevin Kruse", @@ -489,5 +467,3 @@ const quotes = [ author: "Zig Ziglar", }, ]; - -// call pickFromArray with the quotes array to check you get a random quote diff --git a/Sprint-3/quote-generator/quotes_generator.js b/Sprint-3/quote-generator/quotes_generator.js new file mode 100644 index 000000000..991fb5b63 --- /dev/null +++ b/Sprint-3/quote-generator/quotes_generator.js @@ -0,0 +1,57 @@ +// Split file for lisibility. +import { quotes } from "./quotes.js"; +// All begins when DOM is loaded. +window.addEventListener("DOMContentLoaded", () => { + const trigger = document.getElementById("new-quote"); + const quote = document.getElementById("quote"); + const author = document.getElementById("author"); + displayQuote(); + trigger.addEventListener("click", () => { + displayQuote(); + }); +}); +// Display with an animation. +async function displayQuote() { + const currentQuote = pickFromArray(quotes); + await writeText(currentQuote.quote, quote); + author.innerHTML = currentQuote.author; +} +// Animation. +function writeText(text, el) { + const lg = text.length; + let count = 0; + let current = text.charAt(count); + el.innerHTML = current; + const w = setInterval(() => { + if (count < lg) { + count++; + current += text.charAt(count); + el.innerHTML = current; + } else { + clearInterval(w); + } + }, 25); +} + +// DO NOT EDIT BELOW HERE + +// pickFromArray is a function which will return one item, at +// random, from the given array. +// +// Parameters +// ---------- +// choices: an array of items to pick from. +// +// Returns +// ------- +// One item at random from the given array. +// +// Examples of use +// --------------- +// pickFromArray(['a','b','c','d']) // maybe returns 'c' + +// You don't need to change this function. +function pickFromArray(choices) { + return choices[Math.floor(Math.random() * choices.length)]; +} + diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..df875b69a 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,131 @@ -/** Write your CSS in here **/ +:root{ + --gold:rgba(250, 221, 5, 1); + --coral: rgba(255, 159, 80, 1); + --body:rgb(32, 15, 1); + --whitesmoke : rgba(245, 245, 245,1); + --whitesmoke-80 : rgba(245, 245, 245,0.8); + +} +/** Reset **/ +/* Box sizing rules */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Remove default padding */ +ul[class], +ol[class] { + padding: 0; +} + +/* Remove default margin */ +body, +h1, +ul[class], +ol[class], +li, +figure, +figcaption, +blockquote, +dl, +dd { + margin: 0; +} + +/* Set core body defaults */ +body { + min-height: 100vh; + scroll-behavior: smooth; + text-rendering: optimizeSpeed; + line-height: 1.5; + color:var(--body); +} + +/* Remove list styles on ul, ol elements with a class attribute */ +ul[class], +ol[class] { + list-style: none; +} + +/* A elements that don't have a class get default styles */ +a:not([class]) { + text-decoration-skip-ink: auto; +} + +/* Make images easier to work with */ +img { + max-width: 100%; + display: block; +} + +/* Natural flow and rhythm in articles by default */ +article>*+* { + margin-top: 1em; +} + +/* Inherit fonts for inputs and buttons */ +input, +button, +textarea, +select { + font: inherit; +} + + +/* layout */ +body { + background: radial-gradient(circle, var(--gold) 25%, var(--coral) 80%); +} + +.header { + position: fixed; +} + +.punchline { + font-family: "Cookie", cursive; + margin: 1.25rem 0; + font-size: 2.5rem; + font-weight: 400; + font-style: normal; + color:var(--whitesmoke); +} + +.content { + padding: 0 2rem; + height: 100vh; + display: flex; + flex-direction: column; +} + +.main { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; +} + +.quote-box { + width: 100ch; + margin: auto 0; +} + +#quote { + font-size: 4rem; +} + +button { + all: unset; + cursor: pointer; + float: right; + font-family:'Franklin Gothic Medium', Arial, sans-serif; + padding: 0.5rem 1rem; + background-color: var(--whitesmoke); + border-radius: 1rem; + transition: all 0.2s ease-out; +} +button:hover { + transform-origin: center; + transform: scale(1.2); + } diff --git a/Sprint-3/reading-list/index.html b/Sprint-3/reading-list/index.html index dbdb0f471..08d2ef98c 100644 --- a/Sprint-3/reading-list/index.html +++ b/Sprint-3/reading-list/index.html @@ -4,11 +4,13 @@ - Title here + Reading list app
- +

My reading List

+
diff --git a/Sprint-3/reading-list/package.json b/Sprint-3/reading-list/package.json index 96f540518..dc6e5d4ea 100644 --- a/Sprint-3/reading-list/package.json +++ b/Sprint-3/reading-list/package.json @@ -6,6 +6,13 @@ "scripts": { "test": "jest --config=../jest.config.js reading-list" }, + "dependencies": { + "jest": "^30.2.0", + "jest-environment-jsdom": "^30.2.0" + }, + "devDependencies": { + "@testing-library/jest-dom": "^6.9.1" + }, "repository": { "type": "git", "url": "git+https://github.com/CodeYourFuture/CYF-Coursework-Template.git" diff --git a/Sprint-3/reading-list/script.js b/Sprint-3/reading-list/script.js index 6024d73a0..946d6aa02 100644 --- a/Sprint-3/reading-list/script.js +++ b/Sprint-3/reading-list/script.js @@ -1,3 +1,32 @@ +window.addEventListener("load", ()=> { + const readingList = document.getElementById("reading-list"); + for(let book of books){ + readingList.append(createLi(book)); + + } + }); +/* +title: 'The Most Human Human', +author: 'Brian Christian', +alreadyRead: true, +bookCoverImage: 'https://images-na.ssl-images-amazon.com/images/I/41m1rQjm5tL._SX322_BO1,204,203,200_.jpg' +*/ + function createLi({title,author,alreadyRead,bookCoverImage }){ + const li = document.createElement("li"); + // !alreadyRead && li.classList.add("read"); + !alreadyRead && (li.style.backgroundColor = "red"); + li.classList.add("book") + li.innerHTML = ` +
+
+

${title}

+

by ${author}

+
+ ` + return li; + + } + // for the tests, do not modify this array of books const books = [ { @@ -21,3 +50,4 @@ const books = [ }, ]; + diff --git a/Sprint-3/reading-list/style.css b/Sprint-3/reading-list/style.css index 74406e64f..d880b1aed 100644 --- a/Sprint-3/reading-list/style.css +++ b/Sprint-3/reading-list/style.css @@ -1,159 +1,45 @@ -/** - * Base styles to use at the start of the class - * - * Module: HTML/CSS - * Lesson: 1,2 - * Class: Scotland 2017 - */ - html, body { font-family: "Source Sans Pro", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -} - -.site-footer { - margin-top: 4em; -} - -.site-footer p { - border-top: 1px solid #dccdc6; - padding-top: 2em; - padding-bottom: 2em; -} - -.navbar-brand > img { - max-height: 40px; - width: auto; -} - -.navbar-light .navbar-nav .nav-link { - color: #292b2c; - font-weight: 600; - text-transform: uppercase; -} - -/* Buttons */ -.btn { - border-radius: 0.15em; -} - -/* Alert */ -.alert { - position: relative; - margin-top: 2em; - margin-bottom: 3em; - padding-top: 1.5em; - padding-bottom: 1.5em; - border: 1px solid #dccdc6; - border-radius: 0; - font-size: 0.85rem; - line-height: 1.3em; - background: transparent; - color: #292b2c; -} - -.alert:before { - content: ""; - position: absolute; - left: -1px; - top: 0; - height: 100%; - width: 1px; - background: #ce5f31; -} - -/* Jumbotron */ -.jumbotron { - border-radius: 0; -} - -/* Headings */ -.heading-underline { - position: relative; - margin-bottom: 2em; - padding-bottom: 0.5em; - border-bottom: 1px solid #dccdc6; - font-size: 1rem; - font-weight: 600; - text-transform: uppercase; -} -.heading-underline:before { - content: ""; - position: absolute; - bottom: -1px; - left: 0; - width: 25%; - height: 1px; - max-width: 100px; - background: #ce5f31; } - -/* Article */ -.article { - margin-bottom: 2em; +body{ + background-color: whitesmoke; } - -.article-title { - margin-bottom: 0.5em; - font-weight: 700; -} - -.article-read-more a { - font-size: 0.85em; - font-weight: 700; - text-decoration: uppercase; +ul, +figure{ + margin: 0; + padding:0; } -.article-read-more a:hover, -.article-read-more a:focus { - text-decoration: none; +#content{ + max-width: 950px; + margin: 0 auto; + padding: 1rem 0; } - -.article-read-more .fa { - margin-right: 0.5em; - color: #ce5f31; +#reading-list{ + list-style-type: none; + display:flex; + justify-content: space-between; + gap:1.5rem; } - -.article-read-more:last-child { - margin-bottom: 0; +.book{ +width: 31%; +padding: 1.5rem; +border-radius: 0.5rem; +background-color: white; } - -.red { +.book.read{ background-color: red; } - -.addArticle { - margin-bottom: 10px; -} - -#addArticleBtn { - margin-left: 20px; - height: 37px; -} - -.colorButton { - margin-bottom: 20px; - margin-right: 20px; - width: 100px; - height: 50px; -} - -#blueBtn { - background: #588fbd; +.book_image{ + height:20rem; + display: flex; + justify-content: center; } - -#orangeBtn { - background: #f0ad4e; -} - -#greenBtn { - background: #87ca8a; +img{ + width: auto ; + height: 100%; } -@media screen and (min-width: 992px) { - .navbar-brand > img { - max-height: 80px; - } -} diff --git a/Sprint-3/slideshow/assets/cat.svg b/Sprint-3/slideshow/assets/cat.svg new file mode 100644 index 000000000..1a711d723 --- /dev/null +++ b/Sprint-3/slideshow/assets/cat.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/Sprint-3/slideshow/assets/cute-cat-a.png b/Sprint-3/slideshow/assets/cute-cat-a.png deleted file mode 100644 index a853b8def..000000000 Binary files a/Sprint-3/slideshow/assets/cute-cat-a.png and /dev/null differ diff --git a/Sprint-3/slideshow/assets/cute-cat-a.webp b/Sprint-3/slideshow/assets/cute-cat-a.webp new file mode 100644 index 000000000..91d970c4c Binary files /dev/null and b/Sprint-3/slideshow/assets/cute-cat-a.webp differ diff --git a/Sprint-3/slideshow/assets/cute-cat-b.jpg b/Sprint-3/slideshow/assets/cute-cat-b.jpg deleted file mode 100644 index ade296856..000000000 Binary files a/Sprint-3/slideshow/assets/cute-cat-b.jpg and /dev/null differ diff --git a/Sprint-3/slideshow/assets/cute-cat-b.webp b/Sprint-3/slideshow/assets/cute-cat-b.webp new file mode 100644 index 000000000..8432795c8 Binary files /dev/null and b/Sprint-3/slideshow/assets/cute-cat-b.webp differ diff --git a/Sprint-3/slideshow/assets/cute-cat-c.jpg b/Sprint-3/slideshow/assets/cute-cat-c.jpg deleted file mode 100644 index 3546f7336..000000000 Binary files a/Sprint-3/slideshow/assets/cute-cat-c.jpg and /dev/null differ diff --git a/Sprint-3/slideshow/assets/cute-cat-c.webp b/Sprint-3/slideshow/assets/cute-cat-c.webp new file mode 100644 index 000000000..3a04dee39 Binary files /dev/null and b/Sprint-3/slideshow/assets/cute-cat-c.webp differ diff --git a/Sprint-3/slideshow/assets/cute-cat-d.webp b/Sprint-3/slideshow/assets/cute-cat-d.webp new file mode 100644 index 000000000..6282a65df Binary files /dev/null and b/Sprint-3/slideshow/assets/cute-cat-d.webp differ diff --git a/Sprint-3/slideshow/icon.svg b/Sprint-3/slideshow/icon.svg new file mode 100644 index 000000000..d1f3b1e9c --- /dev/null +++ b/Sprint-3/slideshow/icon.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/Sprint-3/slideshow/index.html b/Sprint-3/slideshow/index.html index 50f2eb1c0..9a4708771 100644 --- a/Sprint-3/slideshow/index.html +++ b/Sprint-3/slideshow/index.html @@ -1,14 +1,52 @@ + - Title here - + + Image carousel + + + + + + + - cat-pic - - +
+

Lovely kittens

+
+
+
+
+
+ + +
+
diff --git a/Sprint-3/slideshow/slideshow.js b/Sprint-3/slideshow/slideshow.js index 063ceefb5..1bda38551 100644 --- a/Sprint-3/slideshow/slideshow.js +++ b/Sprint-3/slideshow/slideshow.js @@ -1,8 +1,127 @@ const images = [ - "./assets/cute-cat-a.png", - "./assets/cute-cat-b.jpg", - "./assets/cute-cat-c.jpg", + "./assets/cute-cat-a.webp", + "./assets/cute-cat-b.webp", + "./assets/cute-cat-c.webp", + "./assets/cute-cat-d.webp", ]; +// Write your code here // +// Translation. +// values variables. +const step = 800; +let currentId = 0; +const lg = images.length - 1; +// backward & fowards. +let autoSwitchActive = false; +let interval; +// DOM variables. +const slideshowImgs = document.querySelector(".slideshow_images"); +const slideshowChips = document.querySelector(".slideshow_chips"); +const foward = document.getElementById("forward-btn"); +const backward = document.getElementById("backward-btn"); +const autoFoward = document.getElementById("auto-forward-btn"); +const autoBackward = document.getElementById("auto-backward-btn"); +const chips = document.querySelector(".slideshow_chips"); +// Go! +window.addEventListener("load", () => { + images.forEach((img, id) => { + slideshowImgs.append(createSlide(img, id)); + slideshowChips.append(createChip(id)); + }); + foward.addEventListener("click", function () { + switchImg(this); + }); + backward.addEventListener("click", function () { + switchImg(this); + }); + autoFoward.addEventListener("click", function () { + autoSwitchImg(this); + }); + autoBackward.addEventListener("click", function () { + autoSwitchImg(this); + }); +}); -// Write your code here \ No newline at end of file +// Populate DOM. +function createSlide(img, id) { + const box = document.createElement("div"); + box.setAttribute("data-id", id); + box.classList.add("slideshow_image"); + const image = document.createElement("img"); + image.src = img; + image.alt = `cat ${id}`; + box.append(image); + return box; +} +function createChip(id) { + const chip = document.createElement("div"); + chip.setAttribute("data-id", id); + chip.classList.add("slideshow_chips-items"); + if (currentId === id) { + chip.classList.add("active"); + } + return chip; +} +function setActiveChip(id) { + for (let child of chips.children) { + child.dataset.id == id + ? child.classList.add("active") + : child.classList.remove("active"); + } +} +// Events. +// Used in switchImg function. +function translateSlideShow() { + slideshowImgs.style.transform = `translateX(${currentId * -step}px)`; +} +// Used in autoSwitchImg function. +function toggleDisabledBtn(bool, elements) { + if (bool) { + elements.forEach((el) => { + el.classList.add("disabled"); + el.classList.remove("active"); + }); + } else { + elements.forEach((el) => { + el.classList.remove("disabled"); + }); + } +} +// Manual. +function switchImg(el) { + console.log("switchImg", el); + switch (el.id) { + case "forward-btn": + currentId < lg ? currentId++ : (currentId = 0); + break; + case "backward-btn": + currentId === 0 ? (currentId = lg) : currentId--; + break; + } + setActiveChip(currentId); + translateSlideShow(); +} +// Auto. +function autoSwitchImg(el, timer = 2000) { + autoSwitchActive = !autoSwitchActive; + el.classList.toggle("active"); + const elements = [backward, foward]; + let switcher; + switch (el.id) { + case "auto-forward-btn": + elements.push(autoBackward); + switcher = foward; + break; + case "auto-backward-btn": + elements.push(autoFoward); + switcher = backward; + break; + } + if (autoSwitchActive === true) { + toggleDisabledBtn(true, elements); + interval = setInterval(() => switchImg(switcher), 2000); + } else { + toggleDisabledBtn(false, elements); + clearInterval(interval); + } +} diff --git a/Sprint-3/slideshow/style.css b/Sprint-3/slideshow/style.css index 63cedf2d2..83ddefe86 100644 --- a/Sprint-3/slideshow/style.css +++ b/Sprint-3/slideshow/style.css @@ -1 +1,180 @@ /** Write your CSS in here **/ +:root { + --gold: rgba(250, 221, 5, 1); + --coral: rgba(255, 159, 80, 1); + --body: rgb(98 105 112); + --rosybrown-100: rgba(188, 143, 143, 1); + --rosybrown-80: rgba(188, 143, 143, 0.8); + --rosybrown-60: rgba(188, 143, 143, 0.6); + --rosybrown-40: rgba(188, 143, 143, 0.4); + --rosybrown-20: rgba(188, 143, 143, 0.2); + --whitesmoke-100: rgba(245, 245, 245, 1); + --whitesmoke-80: rgba(245, 245, 245, 0.8); + --border-radius: 0.25rem; + +} + +/** Reset **/ +/* Box sizing rules */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Remove default padding */ +ul[class], +ol[class] { + padding: 0; +} + +/* Remove default margin */ +body, +h1, +ul[class], +ol[class], +li, +figure, +figcaption, +blockquote, +dl, +dd { + margin: 0; +} + +/* Set core body defaults */ +body { + min-height: 100vh; + scroll-behavior: smooth; + text-rendering: optimizeSpeed; + line-height: 1.5; + color: var(--body); + background-color: var(--rosybrown-40); + background-image: url("./assets/cat.svg"); +} + +/* Remove list styles on ul, ol elements with a class attribute */ +ul[class], +ol[class] { + list-style: none; +} + +/* A elements that don't have a class get default styles */ +a:not([class]) { + text-decoration-skip-ink: auto; +} + +/* Natural flow and rhythm in articles by default */ +article>*+* { + margin-top: 1em; +} + +/* Inherit fonts for inputs and buttons */ +input, +button, +textarea, +select { + font: inherit; +} + +/* layout */ + +header>h1 { + font-family: "Cookie", cursive; + font-size: 5rem; + text-align: center; + color: var(--whitesmoke-100); + text-shadow: 5px 5px 20px var(--rosybrown-100); +} + +.slideshow { + width: 800px; + margin: 0 auto; + overflow: hidden; +} + +.slideshow_images { + height: 500px; + position: relative; + display: flex; + transition: all 0.5s; +} + +.slideshow_image { + border-radius: calc(var(--border-radius) * 2); + border: 1px solid var(--rosybrown-40); + overflow: hidden; + flex-shrink: 0; + width: 800px; + height: 100%; +} + +.slideshow_image>img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; +} + +.slideshow_navigation, +.slideshow_chips { + padding-top: 1rem; +} + +.slideshow_navigation { + justify-content: space-between; +} + +.slideshow_chips { + justify-content: center; +} + +.slideshow_chips-items { + height: 0.75rem; + width: 0.75rem; + background-color: var(--whitesmoke-100); + opacity: 0.5; + border-radius: 50%; + ; +} + +.slideshow_chips-items.active { + opacity: 1; +} + +button { + all: unset; + cursor: pointer; + float: right; + font-family: 'Franklin Gothic Medium', Arial, sans-serif; + padding: 0.5rem 1rem; + background-color: var(--whitesmoke-100); + border-radius: var(--border-radius); + transition: all 0.2s ease-out; +} + +button:hover { + background-color: var(--rosybrown-60); + color: var(--whitesmoke-100); +} + +button.active { + background-color: var(--rosybrown-100); + color: var(--whitesmoke-100); +} + +button.disabled { + pointer-events: none; + opacity: 0.5; +} + +/* Utlities */ +.flex { + display: flex; + gap: 0.75rem; +} + +.size-6 { + width: 1.5rem; + height: 1.5rem; +}