8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

此代码用于便签项目,该代码适用于第一个便签,但第一个便签之后出现故障

Mingo 2月前

25 0

所以我正在制作这个便签添加项目,如果你点击“加号”图标,就会弹出一个窗口,你可以在其中输入带有你姓名的便签内容。对于第一个便签,它是......

所以我正在制作这个便签添加项目,如果你点击“加号”图标,就会弹出一个窗口,你可以在其中输入带有你姓名的便签内容。

对于第一个笔记,它运行良好,当我点击预览时,会弹出另一个窗口,我可以看到我的笔记在提交之前的实际外观,或者我可以在第一个窗口中点击“提交”将其保存在一个空容器中。

正如我所说的那样,它对于第一个注释运行良好,但是从第二个注释开始,“预览”按钮不起作用,所有注释都保存在预览中,但我希望它们像第一个注释一样保存在那个空容器中。

HTML

<!DOCTYPE html> <html lang="en"> <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="sticky.css"> </head> <body>

<div class="welcome">
    <div class="text-1">
        <h1 class="h1">Welcome to stickey Notez just stick something memorable </h1>
    </div> </div>


<div class="plus">
    <div class="icon-plus">
        <div id="plus" class="fa-solid">+</div> 
    </div> </div>

<div id="newModel" class="model">    <h2>Note Form</h2>    <div class="close" id="closeButton">X</div>    <div id="notePreview" class="notez">
    <!-- <label class="content" for="inputTitle">Name:</label> -->
    <input class="content" placeholder="Name:" id="inputTitle" name="title">
    <!-- <label class="content" for="inputContent">Content:</label> -->
    <textarea class="content" placeholder="Content:" id="inputContent" name="content"></textarea>
    <div class="color-opts">

        <label class="color-option" style="background-color: rgb(131, 26, 26);">

        </label>
        <div class="color-option" style="background-color: rgb(118, 212, 117);">

        </div>
        <div class="color-option" style="background-color: rgb(250, 159, 220);">

        </div>
        <div class="color-option" style="background-color: rgb(102, 200, 215);">

        </div>
    </div>

   </div>    <div class="sutton">    <button  type="button" id="submitNote">Submit</button>    <button type="menu" id="noteMenu">Preview?</button>    </div>



</div>

<div id="preview" class="preview1">
    <div class="rutton">
    <button  type="button" id="submitNote1">Submit</button>    <button type="menu" id="noteeMenu">Back?</button> </div> </div>




<div id="savedNotesContainer">

</div>



<script src="sticky.js"></script> <script src="https://kit.fontawesome.com/29e2b58a51.js" crossorigin="anonymous"></script> </body> </html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');



body{
    padding: 0 40px;
    display: grid;
    /* align-items: center;
    flex-direction: column; */
    background: #0c0e16;
}

.h1{
    font-family: 'Lobster',cursive;
    display: flex;
    justify-content: center;
    font-size: 60px;
    color: #cc00ff;
    text-shadow: 2px 2px #601e6298;


}


.fa-solid{
    
  
    color: #ffffff;
    font-size: 70px;
    position: fixed;
    right: 50px;
    bottom: 70px;
    padding: 10px 14px;
    border-radius: 50%;
    transition:  background 0.5s ease;
    cursor: pointer;;
}
.fa-solid:hover{
    background: #cc00ff2c;
    
}
.icon-plus{
    display: flex;
    position: absolute;
    /* padding: 30px; */
    flex-direction: column;
    justify-content: center;
    right: 70px;
    top: 500px;
    
}

h2{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 35px;
    color: white;
    margin: 0 0 20px 0;
}

.model{
    height: 400px;
    width: 50%;
    align-items: center;
    display: none;
    padding: 30px;
    justify-self: center;
    flex-direction: column;
    justify-content: space-evenly;
    background-color: rgba(67, 31, 44, 0.418);
    position: relative;
    border-radius: 20px;
    position: absolute;
    bottom: 100px;
}



.close{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    font-weight: bolder;
    padding: 10px;
    color: white;;

}
.close:hover{
    color: red;
}

label{
    display: block;
}

.color-opts{
    display: flex;
    margin: 10px;
}

.notez{
    background-color: #0c0e16;
    justify-content: center;
    align-self: center;
    flex-direction: column;
    padding: 30px;
    display: flex;
    width: 40%;
    border-radius: 20px;
}
.content{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: large;
    color: rgb(105, 93, 218);
    padding: 5px;
}
input, textarea{
    background-color: transparent;
    border: none;
    width: 70%;
    border-bottom: 1px dashed  green;
    margin: 10px; 
    /* resize: none;  */
    height: auto;
    
}

#inputTitle{
    font-weight: bolder;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 30px;
    color: white;
}

#inputContent{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    color: white;
}

input,textarea:focus{
    outline: none;
}


textarea::-webkit-scrollbar {
    width: 10px;
  
}

textarea::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
    
}

textarea::-webkit-scrollbar-thumb {
  background-color: rgba(53, 48, 48, 0.377);
  cursor: pointer;
}

button{
    padding: 10px 10px;
    border: 3px solid rgb(255, 0, 0);
    background-color: #0c0e16;
    color: white;
    font-size: medium;
    cursor: pointer;
}

.color-option {
   height: 45px;
   width: 50px;
   margin: 0 10px;
   border-radius: 10px;
   border: 2px solid black;
}

.sutton{
    width: 100%;
    display: flex;
    justify-content: space-between;
}


.preview1{
    height: 500px;
    width: 600px;
    display: none;
    background-color: rgba(255, 255, 255, 0);
    position: absolute;
    bottom: 50px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    justify-self: center;
    padding: 0 20px;

}

.note{
    width: 340px;
    height: 370px;
    display: flex;
    border-radius: 20px;
    color: white;
    font-size: 29px;
    flex-direction: column;
    padding: 10px;
    margin: 20px;
    align-items: center;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
/* .note h3{
    
} */

.rutton{
    display: flex;
    justify-content: space-between;
    width: 100%;
}


JavaScript

document.addEventListener('DOMContentLoaded', function() {

const  newModel = document.getElementById("newModel");
const  plus = document.getElementById("plus")
const closeBtn = document.getElementById("closeButton")
const notePreview = document.getElementById("notePreview")

plus.addEventListener('click', () => {
    if(newModel.style.display === "none"){
        newModel.style.display = "flex"
    }
    else if(newModel.style.display = "flex"){
        newModel.style.display = "none"
    }
})

closeBtn.addEventListener('click',() =>{
    newModel.style.display = "none"
} 
)

const colorBtn = document.querySelectorAll(".color-option")


if (colorBtn.length > 0) {
    notePreview.style.backgroundColor = getComputedStyle(colorBtn[0]).backgroundColor;
}

colorBtn.forEach(child => {
    child.addEventListener('click', () => {
        notePreview.style.backgroundColor = getComputedStyle(child).backgroundColor;
    })
})


const noteMenu = document.getElementById("noteMenu");
const preview = document.getElementById("preview");
let newNote = null;


noteMenu.addEventListener('click', () => {
    const title = document.getElementById("inputTitle");
    const content = document.getElementById("inputContent");
    const noteColor = getComputedStyle(notePreview).backgroundColor;
    
    // const newNote = document.createElement('div');
        // newNote.classList.add('note');
        newNote = document.createElement('div');
        newNote.className = 'note';
        newNote.style.backgroundColor = noteColor;
        newNote.innerHTML = `
            <h3>${title.value}</h3>
            <p>${content.value}</p>
        `;

        preview.appendChild(newNote);
     
    
        // if (noteMenu === 'click') {
            // Toggling the preview visibility
            if (preview.style.display === "flex") {
                preview.style.display = "none";
            } else {
                preview.style.display = "flex";
            }
        

        inputTitle.value = "";
        inputContent.value = "";
        newModel.style.display = "none";
})



const noteemenu = document.getElementById("noteeMenu");
const submiteNote = document.getElementById("submitNote");
const savedNotesContainer = document.getElementById("savedNotesContainer");
const submiteNote1 = document.getElementById("submitNote1");











    noteemenu.addEventListener('click', () => {
    


        preview.style.display = "none";
        
        newModel.style.display = "flex"
        
        // newNote.remove();
    
    
    
    })
    



  
    // const note = document.getElementsByClassName("note");
   submiteNote.addEventListener('click', () => {
    


    if (newNote) {
        const savedNote = newNote.cloneNode(true); // Clone the previewed note
        savedNotesContainer.appendChild(savedNote);
        newNote = null;
        preview.innerHTML = ''; // Clear the preview after submission
        preview.style.display = "none"; // Hide the preview
    } else {
        console.log("No note to submit.");
    }
});

submiteNote1.addEventListener('click', ()=>{
    if (newNote) {
        const savedNote = newNote.cloneNode(true); // Clone the previewed note
        savedNotesContainer.appendChild(savedNote);
        newNote = null;
        preview.innerHTML = ''; // Clear the preview after submission
        preview.style.display = "none"; // Hide the preview
    } else {
        console.log("No note to submit.");
    }
})











})


帖子版权声明 1、本帖标题:此代码用于便签项目,该代码适用于第一个便签,但第一个便签之后出现故障
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由Mingo在本站《css》版块原创发布, 转载请注明出处!
最新回复 (0)
返回
作者最近主题: