From 9872528eff32000c3e9c55177ee84dc417f27ded Mon Sep 17 00:00:00 2001 From: Hocine Benouddane Date: Sun, 20 Aug 2023 00:21:15 +0100 Subject: [PATCH] fixed scroll issue --- madlibs.js | 18 ++--- style.css | 196 +++++++++++++++++++++++++++-------------------------- 2 files changed, 109 insertions(+), 105 deletions(-) diff --git a/madlibs.js b/madlibs.js index 4b36b0d..62cfb6f 100644 --- a/madlibs.js +++ b/madlibs.js @@ -119,9 +119,9 @@ const container = document.createElement("div"); const edit = document.querySelector(".madLibsEdit"); // Using querySelector to select a specific element const pre = document.querySelector(".madLibsPreview"); // Using querySelector to select a specific element const playMusic = document.createElement("button"); -playMusic.id="musicButton"; +playMusic.id = "musicButton"; const resetBtn = document.createElement("button"); -resetBtn.id = "resetButton" +resetBtn.id = "resetButton"; const soundCheckBtn = document.querySelector(".sound-btn"); const sound = document.getElementById("sound"); soundCheckBtn.addEventListener("click", () => { @@ -152,9 +152,9 @@ container.appendChild(pre); function madlibsEdit(processedStory) { const editPara = document.createElement("p"); - editPara.className = "editText" + editPara.className = "editText"; const previewPara = document.createElement("p"); - previewPara.className = "previewText" + previewPara.className = "previewText"; const newArr = []; for (const item of processedStory) { @@ -165,10 +165,10 @@ function madlibsEdit(processedStory) { span.setAttribute("class", "opacity"); editPara.appendChild(input); previewPara.appendChild(span); - + input.setAttribute("class", "input"); input.setAttribute("placeholder", item.pos); input.setAttribute("maxlength", "20"); - input.style.width=("80px") + input.style.width = "80px"; span.innerHTML = ` ${item.pos}`; input.addEventListener("input", (e) => { @@ -182,18 +182,18 @@ function madlibsEdit(processedStory) { }); input.addEventListener("focus", function () { input.style.backgroundColor = "green"; - input.style.backgroundColor = "#b9ddb8b8"; + input.style.backgroundColor = "#b9ddb8b8"; }); input.addEventListener("blur", function () { - input.style.backgroundColor = "#ecd599" + input.style.backgroundColor = "#ecd599"; }); resetBtn.addEventListener("click", () => { input.value = ""; input.setAttribute("placeholder", item.pos); span.textContent = item.pos; - input.style.backgroundColor = "" + input.style.backgroundColor = ""; }); newArr.push(input); } else { diff --git a/style.css b/style.css index 2e02e65..c74167d 100644 --- a/style.css +++ b/style.css @@ -3,16 +3,16 @@ */ body { - background-image: url("assets/jumanji.jpg"); - background-size: cover; - background-repeat: no-repeat; - font-family: "Merienda", cursive; - text-align: center; - text-indent: 0.5cm; - padding: 0; - margin: 0; - font-size: auto; - word-spacing: 3px; + background-image: url("assets/jumanji.jpg"); + background-size: cover; + background-repeat: no-repeat; + font-family: "Merienda", cursive; + text-align: center; + text-indent: 0.5cm; + padding: 0; + margin: 0; + font-size: auto; + word-spacing: 3px; } button { @@ -30,6 +30,7 @@ button { .content { opacity: 0; transition: opacity 0.5s ease-in-out; + width: 100%; } .hidden { @@ -81,13 +82,18 @@ button { } .start-page { - position: absolute; - top: 0; width: 100%; height: 100vh; overflow: hidden; } +.loading, +.start-page { + position: fixed; + top: 0; + left: 0; +} + .bab1, .bab2 { position: relative; @@ -204,109 +210,107 @@ button { } .container { - padding: 1rem; - display: flex; - justify-content: space-between; - gap: 1rem; -} - -.madLibsEdit{ - height: auto; - padding: 30px; - flex: 50%; - display: flex; - align-content: center; - justify-content: center; - background-image: url("assets/paper2.jpg"); - box-shadow: 0px 4px 20px 0px rgba(255, 255, 255, 0.72); - background-repeat: no-repeat; - background-size: cover; - object-fit: initial; -} -.madLibsPreview{ - height: auto; - padding: 30px; - flex: 50%; - display: flex; - align-content: center; - justify-content: center; - box-shadow: 0px 4px 20px 0px rgba(255, 255, 255, 0.72); - background-image: url("assets/paper2.jpg"); - background-repeat: no-repeat; - background-size: cover; - object-fit: initial; + padding: 1rem; + display: flex; + justify-content: space-between; + gap: 1rem; } -/* the text for our two stories (one where we input and preview) */ +.madLibsEdit, +.madLibsPreview { + padding: 20px; + flex: 50%; + display: flex; + align-items: center; + justify-content: center; + background-image: url("assets/paper2.jpg"); + box-shadow: 0px 4px 20px 0px rgba(255, 255, 255, 0.72); + background-repeat: no-repeat; + background-size: cover; + object-fit: initial; + line-height: 1.7; +} +.madLibsPreview { + background-image: url("assets/paper2.jpg"); + line-height: 1.9; +} -.editText { - color: #300900; - text-align: justify; - } +/* the text for our two stories (one where we input and preview) */ - +.editText, .previewText { - color: #300900; - text-align: justify; - } + color: #1a0501; + text-align: justify; + font-weight: 600; +} - /* styling for the logo on the main page */ +/* styling for the logo on the main page */ .logoContainer { - position: relative; - top: 0; - text-align: center; -} -#inLogo{ - width: 30%; - height: 30%; + position: relative; + top: 0; + text-align: center; +} +#inLogo { + width: 30%; + height: 30%; +} +.input { + border: none; + text-align: center; + display: inline; + font-family: inherit; + font-size: inherit; + border-radius: 5px; + padding: none; + width: auto; } - /* style for music and reset button */ #musicButton { - color: rgb(255, 255, 255); - padding: 10px 20px; - cursor: pointer; - border-radius: 10px; - border: 5px solid #FFB904; - background: #372C28; - box-shadow: 0px 4px 20px 0px rgba(3, 155, 0, 0.72); - margin-bottom: 20px; - margin-right: 30px; - width: 100px; + color: rgb(255, 255, 255); + padding: 10px 20px; + cursor: pointer; + border-radius: 10px; + border: 5px solid #ffb904; + background: #372c28; + box-shadow: 0px 4px 20px 0px rgba(3, 155, 0, 0.72); + margin-bottom: 20px; + margin-right: 30px; + width: 100px; } #resetButton { - color: white; - padding: 10px 20px; - cursor: pointer; - border-radius: 10px; - border: 5px solid #FFB904; - background: #372C28; - box-shadow: 0px 4px 20px 0px rgba(3, 155, 0, 0.72); - margin-bottom: 20px; - margin-left: 30px; - width: 100px; + color: white; + padding: 10px 20px; + cursor: pointer; + border-radius: 10px; + border: 5px solid #ffb904; + background: #372c28; + box-shadow: 0px 4px 20px 0px rgba(3, 155, 0, 0.72); + margin-bottom: 20px; + margin-left: 30px; + width: 100px; } /* for when it goes under a certain width */ - @media (max-width: 786px) { - .container { - align-items: center; - flex-direction: column; +@media (max-width: 786px) { + .container { + align-items: center; + flex-direction: column; + } - } - -.madLibsEdit, - .madLibsPreview { - padding: 10px; - flex: 100%; - } - #musicButton, #resetButton{ - margin-top: 30px; - margin-bottom: 10px; - } } + .madLibsEdit, + .madLibsPreview { + padding: 10px; + flex: 100%; + } + #musicButton, + #resetButton { + margin-top: 30px; + margin-bottom: 10px; + } +} .play_music { display: hidden;